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

<template>
  <div class="scjg">
    <div>
      <div class="downloadDiv">
        <span>项目名称：{{ ruleForm.name }}</span>
        <el-button type="primary" size="mini" @click="download">
          导出报告
        </el-button>
      </div>
      <div>分析面积：{{ ruleForm.xzmj }}平方千米</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" :ref="`echartRef`"></pie>
    </div>

    <!-- v-show="isshow"  -->
  </div>
</template>

<script>
import pie from "@/components/echartsTemplate/pie.vue";
import hgxfx from "../../../../static/data/ghss/data.js";
export default {
  components: { pie },
  props: {
    scjgObj: {
      type: Object,
    },
    jgTable: {
      type: Boolean,
    },
  },
  data() {
    return {
      echarts: [
        { label: "现状分析", iseyes: false, isshow: true },
        { label: "三线分析", iseyes: false, isshow: true },
        // { label: "土地利用规划分析", iseyes: false, isshow: false },
        { label: "详细规划分析", iseyes: false, isshow: false },
      ],
      ruleForm: {
        name: "",
        xzmj: "",
        fileList: [],
      },
      dataSources: {},
    };
  },
  mounted() {
    this.ruleForm.name = hgxfx.name;
    this.ruleForm.xzmj = hgxfx.xzmj;
    this.setEchart1();
    this.setEchart2();
    // this.setEchart3();
    this.setEchart4();
  },
  methods: {
    eyesChaneg(i) {
      this.echarts[i].iseyes = !this.echarts[i].iseyes;
      let label = this.echarts[i].label;
      let id = "scjg" + i;
      if (this.dataSources[id]) {
        this.dataSources[id].show = this.echarts[i].iseyes;
      } else this.addPolygon(label, id);
      // emit("eyesChaneg");
    },
    setEchart1() {
      this.$nextTick(() => {
        this.$refs.echartRef[0].setOptions(hgxfx.xzfxlist);
      });
    },
    setEchart2() {
      this.$nextTick(() => {
        this.$refs.echartRef[1].setOptions(hgxfx.sxfxlist);
      });
    },
    setEchart3() {
      this.$nextTick(() => {
        this.$refs.echartRef[2].setOptions(hgxfx.tdlylist);
      });
    },
    setEchart4() {
      this.$nextTick(() => {
        this.$refs.echartRef[2].setOptions(hgxfx.xxghlist);
      });
    },
    // 加载GeoJSON数据
    addPolygon(label, id) {
      let _this = this;
      // viewer.entities.removeAll();
      let polygon = Cesium.GeoJsonDataSource.load(
        `/static/data/ghss/${label}.geojson`,
        { clampToGround: true }
      );
      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.task.fxbg);
    },
    viewReport() {
      window.open(
        this.$props.scjgObj.task.fxbg.replace(".docx", ".pdf"),
        "_blank"
      );
    },
    reset() {
      this.dataSources = {};
      viewer.dataSources.removeAll();
    },
  },

  // 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;
  line-height: 40px;
  .downloadDiv {
    span {
      width: calc(100% - 100px);
      display: inline-block;
    }
  }

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

      .block-title {
        width: calc(100% - 80px);
      }
      .eicon {
        width: 30px;
        height: 30px;
        margin: 5px;
        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: 150px;
    }
  }
}
</style>