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

<template>
  <div class="xzjg">
    <div>项目名称:选址结果</div>
    <div class="box-sizing" style="height: 47%; width: 100%">
      <div class="title block-title">
        意向地块 （{{ bgList ? bgList.length : 0 }}）
        <span @click="download" class="export">导出报告</span>
      </div>
      <div class="bxCon" style="height: 90%">
        <el-collapse accordion v-model="activeNames">
          <el-collapse-item
            :name="'gb' + index1"
            v-for="(item1, index1) in bgList"
            :key="index1"
          >
            <template slot="title">
              地块编号{{ item1.dkbm }} ({{ item1.area || 0 }})亩
              <span class="tools">
                <i
                  class="header-icon el-icon-place"
                  @click.stop="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.kzxxgydmc }}</span>
                <span>{{ item1.area || 0 }}亩</span>
              </p>
              <p style="color: #cddeeb">
                <img src="/static/images/ghzc/iconSun.png" />
                <span style="margin-left: 20px">基准地标价:</span
                ><span style="color: #02a7f0"
                  >{{ item1.landPrice || 0 }}万元</span
                >
              </p>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div style="height: 47%; width: 100%" v-if="xzjgObj">
      <div class="title flex-box">
        <span class="block-title"
          >备选地块 （{{ xzjgObj.dks ? xzjgObj.dks.length : 0 }}）
        </span>
      </div>
      <div class="bxCon">
        <el-collapse accordion v-model="activeNames">
          <el-collapse-item
            :name="index"
            v-for="(item, index) in xzjgObj.dks"
            :key="item.dkbm"
          >
            <template slot="title">
              <!-- 地块编号B_P_123 -->
              地块编号{{ item.dkbm }} ({{ item.area || 0 }})亩
              <span class="tools">
                <i
                  class="header-icon el-icon-place"
                  @click.stop="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.kzxxgydmc }}</span>
                <span>{{ item.area || 0}}亩</span>
              </p>
              <p style="color: #cddeeb">
                <!-- <i class="iconSun"></i> -->
                <img src="/static/images/ghzc/iconSun.png" />
                <span style="margin-left: 20px">基准地标价:</span
                ><span style="color: #02a7f0"
                  >{{ item.landPrice || 0 }}万元</span
                >
              </p>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>

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

<script>
import drawData from "./draw.json";
import ghjgData from "./规划结果.json";
import { GetXzjg } from "../../../api/ghss/ghxz.js";
// 使用
import parse from "wellknown";
import data from "../../../../static/data/ghss/data";
let dataSources = {}
export default {
  components: {},
  props: {
    activeTabs: {
      type: String,
    },
    scjgObj: {
      type: Object,
    },
    rwBsm: {
      type: String,
    },
  },

  data() {
    return {
      bgList: [],
      model: null,
      layer: null,
      reportText: "生成报告",
      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: null,
      tempObj: null,
      copyData: null,
      arrww: [],
      tempdataSourcesId: null,
      xzjgBSM: "",
    };
  },
  mounted() {
    this.GetXzjg()
  },
  methods: {
    GetXzjg() {
      GetXzjg({ bsm: this.$props.rwBsm }).then((res) => {
        if (res.success) {
          this.xzjgObj = JSON.parse(JSON.stringify(res.data));
          this.copyData = JSON.parse(JSON.stringify(res.data));
          this.tempObj = JSON.parse(JSON.stringify(res.data));
          this.xzjgObj.dks.forEach((item) => {
            this.drawWktPloygon(item.geom, "#0000ff"); //item.dkbm
          });
          this.drawWktPloygon(res.data.geom, "#ff0000"); //res.data.bsm
        } else {
          this.$message.error(res.message);
        }
      });
    },
    download() {
      window.open(this.$props.scjgObj.task.fxbg);
    },
    viewReport() {
      window.open(
        this.$props.scjgObj.task.fxbg.replace(".docx", ".pdf"),
        "_blank"
      );
    },

    // 手动处理为GeoJSON
    getGeoJSON(data) {
      return {
        type: "FeatureCollection",
        features: data.map((geometry) => ({
          type: "Feature",
          geometry: parse(geometry),
        })),
      };
    },

    drawWktPloygon(item, itemColor, id) {
      // const geometry = parse(item); // 就可以得到{type: 'MultiPolygon', coordinates: Array(1)}
      // console.log(geometry, "geometry");
      let geom = {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: parse(item),
          },
        ],
      };
      this.loadGeoJSON(geom, itemColor, id);

      // viewer.entities.removeAll();
      // let geoms =
      //   item
      //     .substring(item.indexOf("(((") + 3, item.length - 3)
      //     .split(")),((") ||
      //   item.substring(item.indexOf("((") + 2, item.length - 2).split(")),((");
      // for (let i = 0; i < geoms.length; i++) {
      //   let geom = geoms[i].split(",");
      //   let points = [];
      //   for (let j = 0; j < geom.length; j++) {
      //     points.push(parseFloat(geom[j].split(" ")[0]));
      //     points.push(parseFloat(geom[j].split(" ")[1]));
      //   }
      //   points.push(parseFloat(geom[0].split(" ")[0]));
      //   points.push(parseFloat(geom[0].split(" ")[1]));
      //   viewer.entities.add({
      //     polygon: {
      //       hierarchy: {
      //         positions: Cesium.Cartesian3.fromDegreesArray(points),
      //       },
      //       material: Cesium.Color.WHITE.withAlpha(0.3),
      //       clampToGround: true,
      //       outline: true,
      //       outlineWidth: 5,
      //       outlineColor: Cesium.Color.fromCssColorString(itemColor),
      //     },
      //   });
      // }
      // viewer.flyTo(viewer.entities);
    },

    // 加载GeoJSON数据
    loadGeoJSON(geojson, yanse, id) {
      let _this = this;
      const dataSource = new Cesium.GeoJsonDataSource();
      dataSource
        .load(geojson, {
          clampToGround: true,
          stroke: Cesium.Color.fromCssColorString(yanse),
          fill: Cesium.Color.WHITE.withAlpha(0.3), //注意：颜色必须大写，即不能为blue
          strokeWidth: 5,
        })
        .then((data) => {
          viewer.dataSources.add(data);
          // let entities = data.entities.values;
          viewer.flyTo(data, {
            offset: new Cesium.HeadingPitchRange(0, -45, 5000),
          });
          if (id) {
            this.tempdataSourcesId = id;
          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.dks.filter((item1) => {
          return item1.dkbm != item.dkbm;
        });
        this.xzjgObj.dks = list;
      }
    },

    deleteprogramme(e, item) {
      e.stopPropagation();
      this.bgList = this.bgList.filter((item1) => {
        return item1.dkbm != item.dkbm;
      });
      const temp = JSON.parse(
        JSON.stringify(
          this.tempObj.dks.filter((item1) => {
            return item1.dkbm == item.dkbm;
          })
        )
      );
      this.xzjgObj.dks.push(temp[0]);
    },
    resetAll() {
      // this.xzjgObj = JSON.parse(JSON.stringify(this.tempObj))
      // parent.emit("update:xzjgObj", JSON.parse(JSON.stringify(this.tempObj)));
      this.xzjgObj = this.copyData;
      this.reportText = "生成报告";
      this.bgList = [];
    },
    mapview(item) {
      console.log(item)
      this.drawWktPloygon(item.geom, "#ff0000", item.dkbm);
    },

    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.dks.some((ele) => ele.dkbm === item.dkbm)
      );
      this.bgList.sort(function (a, b) {
        return parseInt(a.yxfa) - parseInt(b.yxfa);
      });
    },
  },
  beforeResolve(to, from, next) {
    console.log(to, from, next, "to, from, next");
  },

  watch: {
    activeTabs(newValue, oldValue) {
      if (newValue == "scjg") {
        this.initData();
      }
    },
    //监听区域id的变化,用于删除上一次点击生成的geojson区域面
    tempdataSourcesId(newVal, oldVal) {
      if (oldVal) {
        viewer.dataSources.remove(dataSources[oldVal]);
      }
    },
  },

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

<style lang="scss" scoped>
.xzjg {
  // height: calc(100vh - 108px);
  // height: 49vh;
  height: 100%;
  min-width: 300px;
  box-sizing: border-box;
  padding: 0px 10px;

  .blue {
    color: #409eff;
  }

  .title {
    button {
      padding: 0;
      float: right;
      margin-right: 5px;
      min-height: unset;
    }
    .export {
      display: inline-block;
      background-color: #0f7ac8;
      text-align: center;
      width: 95px;
      height: 28px;
      line-height: 28px;
      float: right;
    }
  }
  .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;
  }

  .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;
    color: #fff;
  }
  p:nth-child(2) {
    position: relative;
    // padding-right: 20px;
    img {
      position: absolute;
      top: 6px;
    }
  }
  .oneItem {
    .iconSun {
      width: 16px;
      height: 16px;
      display: inline-block;
      background: url("../../../../static//images//ghzc//iconSun.png") no-repeat;
      background-size: 100% 100%;
    }
    span {
      // border: 1px solid #02a7f0;
      padding: 3px 5px;
      border-radius: 2px 2px 2px 2px;
    }
    span:first-child {
      background: rgba(253, 219, 59, 0.2);
      font-size: 14px;
      color: #ffc700;
    }
    span:nth-child(2) {
      background: rgba(155, 255, 139, 0.2);
      font-size: 14px;
      color: #9bff8b;
    }
    p {
      font-size: 14px;
      color: #cddeeb;
    }
  }
}
.bxCon {
  width: 100%;
  height: 94%;
  // background-color: #9aff8b87;
  overflow: hidden;
  overflow-y: auto;
}
/deep/ .el-collapse {
  // width: 95%;
  border: none;
}
/deep/ .el-scrollbar {
  border: 1px solid #0f7ac8 !important;
  // padding: 0 10px;
}
/deep/ .el-collapse-item__header {
  border-bottom: 1px solid rgba(102, 126, 143, 0.747);
  position: relative;
}
/deep/ .el-collapse-item__wrap {
  border-bottom: 1px solid rgba(102, 126, 143, 0.5) !important;
}
/deep/ .el-scrollbar__wrap {
  padding: 0 10px;
}
</style>