real3d-portalsite/src/views/siteselection/components/xzjg.vue

<template>
  <div class="xzjg">
    <div>项目名称XXXXXX</div>
    <div class="box-sizing" style="height: 35%; width: 100%">
      <div class="title site-title">
        <!-- <span class="block-title"
          >意向地块{{ bgList ? bgList.length : 0 }}）</span
        > -->
        意向地块（{{ bgList ? bgList.length : 0 }}）
        <span>导出报告</span>
      </div>
      <el-scrollbar
        class="height-100-50 max-width"
        style="border: 1px solid #e8e8e8"
      >
        <!-- {{ xzjgObj }} -->
        <el-collapse accordion v-model="activeNames">
          <el-collapse-item
            :name="'gb' + index1"
            v-for="(item1, index1) in bgList"
            :key="index1"
          >
            <template slot="title">
              <!-- 地块编号B_P_123 -->
              地块编号{{ item1.properties.dkbm }} ({{
                item1.properties.ydmj.toFixed(0)
              }})
              <span class="tools">
                <i
                  class="header-icon el-icon-place"
                  @click="mapview(item1)"
                ></i>
                <i
                  class="header-icon el-icon-delete"
                  @click="deleteprogramme($event, item1)"
                ></i>
              </span>
            </template>
            <div class="collapseCon">
              <p class="oneItem">
                <span>{{ item1.properties.kzxxgydmc }}</span>
                <span>{{ item1.properties.ydmj.toFixed(2) }}平方米</span>
              </p>
              <p>
                基准地标价:<span style="color: #02a7f0"
                  >{{ item1.properties.landPrice }}万元</span
                >
              </p>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-scrollbar>
    </div>
    <div class="box-sizing padding-bottom-60" style="height: 35%; width: 100%">
      <div class="title height-50 flex-box align-center">
        <span class="block-title"
          >备选地块（{{
            xzjgObj.features ? xzjgObj.features.length : 0
          }}）</span
        >
      </div>
      <el-scrollbar
        class="height-100-50 max-width"
        style="border: 1px solid #e8e8e8"
      >
        <el-collapse accordion v-model="activeNames">
          <el-collapse-item
            :name="index"
            v-for="(item, index) in xzjgObj.features"
            :key="item.properties.dkbm"
          >
            <template slot="title">
              <!-- 地块编号B_P_123 -->
              地块编号{{ item.properties.dkbm }} ({{
                item.properties.ydmj.toFixed(0)
              }})
              <span class="tools">
                <i class="header-icon el-icon-place" @click="mapview(item)"></i>
                <i
                  class="header-icon el-icon-plus"
                  @click="addprogramme($event, item)"
                ></i>
              </span>
            </template>
            <div class="collapseCon">
              <p class="oneItem">
                <span>{{ item.properties.kzxxgydmc }}</span>
                <span>{{ item.properties.ydmj.toFixed(2) }}平方米</span>
              </p>
              <p>
                基准地标价:<span style="color: #02a7f0"
                  >{{ item.properties.landPrice }}万元</span
                >
              </p>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-scrollbar>
    </div>

    <div class="xz-btn flex-box" style="justify-content: space-between">
      <div class="max-height flex-box align-center margin-left-22"></div>
      <div class="max-height flex-box align-center">
        <el-button round class="btn-style" @click="resetAll">重选</el-button>
        <el-button
          round
          class="btn-style"
          @click="downReport"
          v-if="reportText == '查看报告'"
          >下载报告</el-button
        >
        <el-button
          type="primary"
          round
          class="btn-style margin-right-22"
          @click="submit"
          >{{ reportText }}</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import drawData from "./draw.json";
import ghjgData from "./规划结果.json";
export default {
  components: {},
  props: {
    activeTabs: {
      type: String,
    },
  },

  data() {
    return {
      bgList: [],
      model: null,
      layer: null,
      reportText: "生成报告",
      tempObj: [],
      // xzjgObj: {
      //   bsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
      //   xmmc: "111",
      //   jsdw: "111",
      //   fxbg: "/file/statics/shape/辅助选址报告/6d39b2d4307b46e2a4cf6f8c68a30c31/111（选址报告）_1676448756708.pdf",
      //   items: [
      //     {
      //       objectid: 13761,
      //       bsm: "7fe39bc0ad0811eda6d9f0def1935d90",
      //       rwbsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
      //       dlb: "SDE.XZYDYH",
      //       dlbm: "0602",
      //       dlmc: "种植设施建设用地",
      //       cjsj: "2023-02-15T16:12:34.000+08:00",
      //       yxfa: "0",
      //       bz: null,
      //       tbmj: 25.0850187,
      //       xzqdm: "150502",
      //       xzqmc: "科尔沁区",
      //       fxyzjg: [],
      //     },
      //   ],
      // },
      // tempObj: {
      //   bsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
      //   xmmc: "111",
      //   jsdw: "111",
      //   fxbg: "/file/statics/shape/辅助选址报告/6d39b2d4307b46e2a4cf6f8c68a30c31/111（选址报告）_1676448756708.pdf",
      //   items: [
      //     {
      //       objectid: 13761,
      //       bsm: "7fe39bc0ad0811eda6d9f0def1935d90",
      //       rwbsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
      //       dlb: "SDE.XZYDYH",
      //       dlbm: "0602",
      //       dlmc: "种植设施建设用地",
      //       cjsj: "2023-02-15T16:12:34.000+08:00",
      //       yxfa: "0",
      //       bz: null,
      //       tbmj: 25.0850187,
      //       xzqdm: "150502",
      //       xzqmc: "科尔沁区",
      //       fxyzjg: [],
      //     },
      //   ],
      //   rwBsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
      // },
      rwObj: {
        bsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
        sjy: "SDE.XZYDYH",
        sjymc: "国土空间总体规划",
        ydbsm: "0",
        ydmc: null,
        ydmjbegin: "0",
        ydmjend: "100",
        xmmc: "111",
        jsdw: "111",
        fxbg: "/file/statics/shape/辅助选址报告/6d39b2d4307b46e2a4cf6f8c68a30c31/111（选址报告）_1676448756708.pdf",
        rwzt: 2,
        fwlx: 1,
        xzfw: null,
        zip: "/file/statics/shape/辅助选址报告/6d39b2d4307b46e2a4cf6f8c68a30c31/111_1676448756708.zip",
      },
      geoJsonEntities: null,
      xzjgObj: ghjgData,
      tempObj: ghjgData,
    };
  },
  mounted() {
    console.log(drawData, "drawData", ghjgData);
    this.addPolygon("规划结果", "ghjg");
    this.addPolygon("draw", "draw");
  },
  methods: {
    // 加载GeoJSON数据
    addPolygon(label, id) {
      let _this = this;
      let polygon = Cesium.GeoJsonDataSource.load(
        `static/data/${label}.geojson`,
        {
          clampToGround: true,
          stroke: Cesium.Color.BLUE,
          fill: Cesium.Color.WHITE.withAlpha(0.3), //注意：颜色必须大写，即不能为blue
          strokeWidth: 5,
        }
      );
      polygon.then(function (dataSource) {
        // dataSource.id = id;
        // 将数据源添加到Cesium Viewer
        viewer.dataSources.add(dataSource);
        viewer.zoomTo(dataSource);
        _this.dataSources[id] = dataSource;
      });
    },
    addprogramme(e, item) {
      e.stopPropagation();
      const list = this.bgList.filter((item1) => {
        return item1 == item;
      });
      if (list.length == 0) {
        this.bgList.push(item);
        const list = this.xzjgObj.features.filter((item1) => {
          return item1.properties.dkbm != item.properties.dkbm;
        });
        this.xzjgObj.features = list;
      }
    },

    deleteprogramme(e, item) {
      e.stopPropagation();
      this.bgList = this.bgList.filter((item1) => {
        return item1.properties.dkbm != item.properties.dkbm;
      });
      const temp = JSON.parse(
        JSON.stringify(
          this.tempObj.items.filter((item1) => {
            return item1.properties.dkbm == item.properties.dkbm;
          })
        )
      );
      this.xzjgObj.features.push(temp[0]);
    },
    resetAll() {
      // parent.emit("update:xzjgObj", JSON.parse(JSON.stringify(this.tempObj)));
      this.reportText = "生成报告";
      this.bgList = [];
    },
    mapview(item) {
      // e.stopPropagation() 
      console.log(item, "=====");
      console.log(item.geometry.coordinates[0][0][0][0],'item.geometry.coordinates[0][0]');
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
          item.geometry.coordinates[0][0][0][0],
          item.geometry.coordinates[0][0][0][1],
          15000.0
        ),
        orientation: {
          heading: Cesium.Math.toRadians(20.0),
          pitch: Cesium.Math.toRadians(-35.0),
          roll: 0.0,
        },
      });
    },
    submit() {
      console.log("生成报告");
    },

    downReport() {
      window.open(this.model.zip, "_blank");
    },

    loadJgMap() {},

    loadJg(bsm) {
      console.log(bsm, "bsm");
    },

    initData() {
      this.model = this.rwObj;
      this.bgList = this.tempObj.items.filter(
        (item) =>
          !this.xzjgObj.features.some(
            (ele) => ele.properties.dkbm === item.properties.dkbm
          )
      );
      this.bgList.sort(function (a, b) {
        return parseInt(a.yxfa) - parseInt(b.yxfa);
      });
    },
  },

  watch: {
    activeTabs(newValue, oldValue) {
      if (newValue == "scjg") {
        this.initData();
      }
    },
  },

  beforeDestroy() {
    viewer.dataSources.removeAll();
  },
};
</script>

<style lang="scss" scoped>
.xzjg {
  height: calc(100vh - 108px);
  min-width: 300px;
  box-sizing: border-box;
  padding: 0px 10px;
  ::v-deep(.el-scrollbar__bar) {
    right: -15px;
  }
  td {
    padding-left: 15px;
  }

  .el-collapse-item__header {
    font-size: 18px;
    .fanan-caozuo {
      position: absolute;
      right: 20px;
      box-sizing: border-box;
      padding-right: 20px;
    }
  }
  .el-collapse-item__content {
    padding-bottom: 0;
  }
  ::v-deep(.el-collapse-item__header) {
    color: #303133 !important;
    position: relative;
    cursor: auto;
  }
  .blue {
    color: #409eff;
  }
  ::v-deep(.el-tabs__item) {
    height: 55px;
  }
  ::v-deep(.el-form-item__content) {
    line-height: 40px;
  }
  ::v-deep(.el-form-item__label) {
    line-height: 40px;
  }
  .title {
    button {
      padding: 0;
      float: right;
      margin-right: 5px;
      min-height: unset;
    }
  }
  .el-form-item {
    margin-bottom: 0;
  }
  .xz-btn {
    width: 100%;
    position: absolute;
    height: 55px;
    z-index: 2;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
  }
  ::v-deep(.el-descriptions :not(.is-bordered) td),
  ::v-deep(.el-descriptions :not(.is-bordered) th) {
    padding-bottom: 3px;
  }
  ::v-deep(.el-collapse-item__content) {
    padding-bottom: 10px;
  }
  ::v-deep(.el-collapse-item__header) {
    cursor: pointer;
    &:hover {
      background-color: rgba(64, 158, 255, 0.09);
    }
  }
  .clat-title {
    padding-left: 10px;
    padding-right: 5px;
    display: inline-flex;
    .clat-title-head {
      display: inline-block;
      max-width: 280px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.tools {
  position: absolute;
  right: 30px;
}

.collapseCon {
  p {
    width: 100%;
    height: 30px;
    line-height: 30px;
    // background-color: pink;
  }
  .oneItem {
    span {
      border: 1px solid #02a7f0;
      padding: 3px 5px;
      border-radius: 5px;
    }
  }
}
</style>