real3d-portalsite/src/views/complianceAnalysis/components/scjg.vue

<template>
  <div class="scjg">
    <div>
      <div class="downloadDiv">
        <span class="xmmc">
          项目名称：
          <span class="text">{{ scjgObj.xmmc }}</span>
        </span>
        <span class="export" @click="download">导出报告</span>
      </div>
      <div>
        分析面积：
        <span class="text">{{ compute(scjgObj.fxmj) }}亩</span>
      </div>
    </div>

    <div v-for="(eitem, i) in echarts" :key="i" class="echars">
      <div class="echartTitle">
        <div class="block-title">{{ eitem.label }}</div>
        <div
          class="eicon"
          :class="eitem.iseyes ? 'eyes' : 'close_eyes'"
          @click="eyesChaneg(i)"
        ></div>
        <div
          class="eicon"
          :class="eitem.isshow ? 'eshow' : 'eclose'"
          @click="eitem.isshow = !eitem.isshow"
        ></div>
      </div>
      <pie
        v-if="eitem.scxstyle == 0"
        v-show="eitem.isshow"
        class="echart"
        :class="`echart${eitem.dataList.length <= 6 ? '' : '_vertical'}`"
        unit="亩"
        @echartClick="(name, iseyes) => echartClick(name, iseyes, i)"
        :ref="`echartRef${eitem.id}`"
      ></pie>
      <el-collapse v-if="eitem.lchildren.length" v-show="eitem.isshow">
        <collRecursiveTree
          :data="eitem.lchildren"
          :piseyes="eitem.iseyes"
          @mapview="changeDataSources"
        ></collRecursiveTree>
      </el-collapse>
    </div>
    <!-- <div class="bottomBtns">
      <span></span>
      <span class="sureBtn" @click="download">导出报告</span>
    </div> -->
  </div>
</template>

<script>
import pie from "@/components/echartsTemplate/pie.vue";
import collRecursiveTree from "./collRecursiveTree.vue";
import { GetFxjg } from "@/api/ghss/hgxfx.js";
// import hgxfx from "../../../../static/data/ghss/data.js";
import parse from "wellknown";
let dataSourceList = {};
let colors = [
  "#62ADED",
  "#DFE15A",
  "#6EDC8D",
  "#00A42E",
  "#F9B447",
  "#7F4FE5",
  "#FF6969",
  "#27CED9",
  "#DF56F5",
  "#DCFFAF",
];
export default {
  components: { pie, collRecursiveTree },
  props: {
    scjgObj: {
      type: Object,
    },
  },
  data() {
    return {
      echarts: [],
      ruleForm: {
        name: "",
        xzmj: "",
        fileList: [],
      },
      fileid: 1,
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    compute(mj) {
      return mj ? (mj * 0.0015).toFixed(2) : 0;
    },
    initData() {
      this.echarts = [];
      this.$emit("updateParent", "loading", true);
      GetFxjg({ bsm: this.$props.scjgObj.bsm }).then((res) => {
        if (res.success) {
          res.data.forEach((e) => {
            let c = e.dataList || [];
            c.map((ci) => {
              ci.name = ci.yslx_name || ci.scxname;
              // ci.value = this.compute(ci.mj);
              ci.value = ci.mj;
              ci.geom = ci.geom || (ci.data ? ci.data.geom : "");
              // ci.label = ci.mc_name;
            });
            this.echarts.push({
              id: e.scxbsm,
              label: e.scxname,
              dataList: e.dataList,
              lchildren: e.children || [],
              iseyes: false,
              isshow: false,
              scxstyle: e.scxstyle,
            });
            if (e.scxstyle == 0) this.setEchart(c, e.scxbsm);
            // if (e.children) console.log(e.children)
          });
          this.$emit("updateParent", "loading", false);
        }
      });
    },
    eyesChaneg(i) {
      this.echarts[i].iseyes = !this.echarts[i].iseyes;
      // if (i == 0 || i == 2) {
      //   this.changeDataSources(this.echarts[i]);
      // } else {
      let iseyes = this.echarts[i].iseyes;
      this.echarts[i].dataList.forEach((child, ci) => {
        this.changeDataSources({ ...child, iseyes }, colors[ci]);
      });
      this.lchangeDataSources(this.echarts[i].lchildren, iseyes);
      // }
      // emit("eyesChaneg");
    },
    lchangeDataSources(data, iseyes) {
      data.forEach((child, ci) => {
        if (child.dataList) {
          child.dataList.forEach((ld, li) => {
            this.changeDataSources({ ...ld, iseyes }, colors[li]);
          });
        }
        if (child.children) {
          this.lchangeDataSources(child.children, iseyes);
        }
      });
    },
    changeDataSources({ geom, id, iseyes }, color) {
      if (dataSourceList[id]) {
        dataSourceList[id].show = iseyes;
      } else if (geom) {
        this.addPolygon(geom, id, color);
      }
    },
    echartClick(name, iseyes, index) {
      if (this.echarts[index].iseyes) {
        let click = this.echarts[index].dataList.filter((c) => c.name == name);
        if (click.length > 0)
          this.changeDataSources({
            geom: click[0].geom,
            id: click[0].id,
            iseyes,
          });
      }
    },
    setEchart(data, id) {
      this.$nextTick(() => {
        let type = data.length <= 6 ? "horizontal" : "vertical";
        this.$refs[`echartRef${id}`][0].setOptions({ data, type });
      });
    },
    // 加载GeoJSON数据
    addPolygon(geom, id, colors) {
      let geojson = parse(geom);
      let _this = this;
      // viewer.entities.removeAll();
      let scolor = colors
        ? Cesium.Color.fromCssColorString(colors)
        : Cesium.Color.RED;
      let fcolor = colors
        ? Cesium.Color.fromCssColorString(colors)
        : Cesium.Color.WHITE;

      let polygon = Cesium.GeoJsonDataSource.load(geojson, {
        clampToGround: true,
        stroke: scolor,
        fill: fcolor.withAlpha(0.3), //注意：颜色必须大写，即不能为blue
        strokeWidth: 3,
      });
      polygon.then(function (dataSource) {
        // dataSource.id = id;
        // 将数据源添加到Cesium Viewer
        viewer.dataSources.add(dataSource);
        viewer.zoomTo(dataSource);
        dataSourceList[id] = dataSource;
        // 可以获取实体并进行操作
        // dataSource.entities.values.forEach((entity) => {
        //   // 你可以在这里设置实体的属性，例如位置、颜色等
        //   // console.log(entity);
        // });
      });
    },

    download() {
      window.open(this.$props.scjgObj.fxbg); //this.$props.scjgObj.task.fxbg
    },
    viewReport() {
      window.open(this.$props.scjgObj.fxbg.replace(".docx", ".pdf"), "_blank");
    },
    reset() {
      if (Object.keys(dataSourceList).length) viewer.dataSources.removeAll();
      dataSourceList = {};
    },
  },

  // watch(
  //     () => prop.scjgObj,
  //     (newValue, oldValue) => {
  //       this.jcfwlist[0].value = newValue.task.fxmj + "m²";
  //       nextTick(() => {
  //         this.setEcharts(newValue);
  //       });
  //     }
  //   );
  watch: {
    // scjgObj(newValue) {
    //   this.initData();
    // },
  },
};
</script>

<style lang="scss" scoped>
.scjg {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 10px;
  line-height: 40px;
  .downloadDiv {
    .xmmc {
      width: calc(100% - 120px);
      display: inline-block;
    }
    .export {
      width: 110px;
      height: 32px;
      background: #0f7ac8;
      text-align: center;
      line-height: 32px;
      display: inline-block;
    }
  }
  .text {
    color: #cddeeb;
  }

  .echars {
    margin-bottom: 10px;
    .echartTitle {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      // background: rgba(38, 38, 38, 0.9);
      border-bottom: 1px solid #166cad;
      margin-right: 10px;
      line-height: 40px;

      .block-title {
        width: calc(100% - 50px);
      }
      .eicon {
        width: 20px;
        height: 20px;
        margin-top: 10px;
        background-size: 100% 100%;
      }
      .eyes {
        background-image: url("/static/images/ghzc/eyes.png");
      }
      .close_eyes {
        background-image: url("/static/images/ghzc/close_eyes.png");
      }
      .eshow {
        background-image: url("/static/images/ghzc/to_bottom.png");
      }
      .eclose {
        background-image: url("/static/images/ghzc/to_right.png");
      }
    }

    .echart {
      width: 380px;
      height: 220px;
    }
    .echart_vertical {
      width: 380px;
      height: 370px;
    }
  }
}
</style>