三线分析

src/views/complianceAnalysis/components/scjg.vue

@@ -24,7 +24,12 @@
           @click="eitem.isshow = !eitem.isshow"
         ></div>
       </div>
-      <pie v-show="eitem.isshow" class="echart" :ref="`echartRef`"></pie>
+      <pie
+        v-show="eitem.isshow"
+        class="echart"
+        @echartClick="echartClick"
+        :ref="`echartRef`"
+      ></pie>
     </div>
 
     <!-- v-show="isshow"  -->
@@ -34,6 +39,11 @@
 <script>
 import pie from "@/components/echartsTemplate/pie.vue";
 import hgxfx from "../../../../static/data/ghss/data.js";
+let colors = [
+  ["#FC8053", "#F2CAA4"],
+  ["#5583e7", "#36dddb"],
+  ["#f888b1", "#fbe6ee"],
+];
 export default {
   components: { pie },
   props: {
@@ -43,12 +53,7 @@ export default {
   },
   data() {
     return {
-      echarts: [
-        { label: "现状分析", iseyes: false, isshow: true },
-        { label: "三线分析", iseyes: false, isshow: true },
-        // { label: "土地利用规划分析", iseyes: false, isshow: false },
-        { label: "详细规划分析", iseyes: false, isshow: false },
-      ],
+      echarts: [],
       ruleForm: {
         name: "",
         xzmj: "",
@@ -60,6 +65,10 @@ export default {
   mounted() {
     this.ruleForm.name = hgxfx.name;
     this.ruleForm.xzmj = hgxfx.xzmj;
+    hgxfx.treeData.forEach((e) => {
+      if (e.label == "控制性详细规划") e.label = "详细规划分析";
+      this.echarts.push({ ...e, iseyes: false, isshow: true });
+    });
     this.setEchart1();
     this.setEchart2();
     // this.setEchart3();
@@ -68,13 +77,32 @@ export default {
   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);
+      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(hgxfx.xzfxlist);
@@ -82,7 +110,7 @@ export default {
     },
     setEchart2() {
       this.$nextTick(() => {
-        this.$refs.echartRef[1].setOptions(hgxfx.sxfxlist);
+        this.$refs.echartRef[1].setOptions(hgxfx.sxfxlist, true);
       });
     },
     setEchart3() {
@@ -96,12 +124,25 @@ export default {
       });
     },
     // 加载GeoJSON数据
-    addPolygon(label, id) {
+    addPolygon(label, id, colors) {
       let _this = this;
+      console.log(colors);
       // viewer.entities.removeAll();
+      let scolor = colors
+        ? Cesium.Color.fromCssColorString(colors[0])
+        : Cesium.Color.BLUE;
+      let fcolor = colors
+        ? Cesium.Color.fromCssColorString(colors[1])
+        : Cesium.Color.WHITE;
+
       let polygon = Cesium.GeoJsonDataSource.load(
         `/static/data/ghss/${label}.geojson`,
-        { clampToGround: true }
+        {
+          clampToGround: true,
+          stroke: scolor,
+          fill: fcolor.withAlpha(0.3), //注意：颜色必须大写，即不能为blue
+          strokeWidth: 3,
+        }
       );
       polygon.then(function (dataSource) {
         // dataSource.id = id;