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">{{ scjgObj.xzmj }}平方千米</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-show="eitem.isshow"
        class="echart"
        :class="`echart${i}`"
        @echartClick="echartClick"
        :ref="`echartRef`"
      ></pie>
    </div>
    <!-- <div class="bottomBtns">
      <span></span>
      <span class="sureBtn" @click="download">导出报告</span>
    </div> -->
  </div>
</template>

<script>
import pie from "@/components/echartsTemplate/pie.vue";
import hgxfx from "../../../../static/data/ghss/data.js";
let colors = ["#62ADED", "#DFE15A", "#6EDC8D"];
export default {
  components: { pie },
  props: {
    scjgObj: {
      type: Object,
    },
  },
  data() {
    return {
      echarts: [],
      ruleForm: {
        name: "",
        xzmj: "",
        fileList: [],
      },
      dataSources: {},
    };
  },
  mounted() {
    hgxfx.treeData.forEach((e) => {
      if (e.label == "控制性详细规划") e.label = "详细规划分析";
      this.echarts.push({ ...e, iseyes: false, isshow: false });
    });
    this.setEchart1();
    this.setEchart2();
    // this.setEchart3();
    this.setEchart4();
  },
  methods: {
    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].children.forEach((child, ci) => {
          this.changeDataSources({ ...child, iseyes }, colors[ci]);
        });
      }
      // emit("eyesChaneg");
    },
    changeDataSources({ label, id, iseyes }, color) {
      if (this.dataSources[id]) {
        this.dataSources[id].show = iseyes;
      } else this.addPolygon(label, id, color);
    },
    echartClick(name, iseyes) {
      if (this.echarts[1].iseyes) {
        let click = this.echarts[1].children.filter((c) => c.label == name);
        if (click.length > 0)
          this.changeDataSources({
            label: click[0].label,
            id: click[0].id,
            iseyes,
          });
      }
    },
    setEchart1() {
      this.$nextTick(() => {
        this.$refs.echartRef[0].setOptions({
          type: "vertical",
          data: hgxfx.xzfxlist,
        });
      });
    },
    setEchart2() {
      this.$nextTick(() => {
        let setoptions = {
          data: hgxfx.sxfxlist,
          type: "horizontal", //横向
          isclick: true,
        };
        this.$refs.echartRef[1].setOptions(setoptions);
      });
    },
    setEchart3() {
      this.$nextTick(() => {
        this.$refs.echartRef[2].setOptions({ data: tdlylist });
      });
    },
    setEchart4() {
      this.$nextTick(() => {
        this.$refs.echartRef[2].setOptions({
          data: hgxfx.xxghlist,
          type: "vertical",
        });
      });
    },
    // 加载GeoJSON数据
    addPolygon(label, id, colors) {
      let _this = this;
      // viewer.entities.removeAll();
      let scolor = colors
        ? Cesium.Color.fromCssColorString(colors)
        : Cesium.Color.BLUE;
      let fcolor = colors
        ? Cesium.Color.fromCssColorString(colors)
        : Cesium.Color.WHITE;

      let polygon = Cesium.GeoJsonDataSource.load(
        `/static/data/ghss/${label}.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);
        _this.dataSources[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(this.dataSources).length) viewer.dataSources.removeAll();
      this.dataSources = {};
    },
  },

  // watch(
  //     () => prop.scjgObj,
  //     (newValue, oldValue) => {
  //       this.jcfwlist[0].value = newValue.task.fxmj + "m²";
  //       nextTick(() => {
  //         this.setEcharts(newValue);
  //       });
  //     }
  //   );
  watch: {},
};
</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: 116px;
      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;
    }
    .echart0,
    .echart2 {
      width: 380px;
      height: 370px;
    }
  }
}
</style>