级联折叠面板

src/views/complianceAnalysis/components/scjg.vue

@@ -16,7 +16,7 @@
 
     <div v-for="(eitem, i) in echarts" :key="i" class="echars">
       <div class="echartTitle">
-        <div class="block-title">{{ eitem.label }}</div>
+        <div class="block-title">{{ eitem.label }}{{ eitem.one }}</div>
         <div
           class="eicon"
           :class="eitem.iseyes ? 'eyes' : 'close_eyes'"
@@ -29,6 +29,7 @@
         ></div>
       </div>
       <pie
+        v-if="eitem.children.length > 0"
         v-show="eitem.isshow"
         class="echart"
         :class="`echart${eitem.children.length <= 6 ? '' : '_vertical'}`"
@@ -36,6 +37,14 @@
         @echartClick="(name, iseyes) => echartClick(name, iseyes, i)"
         :ref="`echartRef`"
       ></pie>
+      <!-- <collapseTree
+        v-if="eitem.lchildren.length"
+        v-show="eitem.isshow"
+        :treeData="eitem.lchildren"
+      ></collapseTree> -->
+      <el-collapse v-if="eitem.lchildren.length" v-show="eitem.isshow">
+        <recursiveTree :data="eitem.lchildren"></recursiveTree>
+      </el-collapse>
     </div>
     <!-- <div class="bottomBtns">
       <span></span>
@@ -46,7 +55,10 @@
 
 <script>
 import pie from "@/components/echartsTemplate/pie.vue";
+import collapseTree from "./collapseTree.vue";
+import recursiveTree from "./recursive-tree.vue";
 import { GetFxjg } from "@/api/ghss/hgxfx.js";
+import hgxfx from "../../../../static/data/ghss/data.js";
 import parse from "wellknown";
 let dataSourceList = {};
 let colors = [
@@ -59,14 +71,14 @@ let colors = [
   "#FF6969",
   "#27CED9",
   "#DF56F5",
-  "#DCFFAF",
+  "#DCFFAF"
 ];
 export default {
-  components: { pie },
+  components: { pie, collapseTree, recursiveTree },
   props: {
     scjgObj: {
-      type: Object,
-    },
+      type: Object
+    }
   },
   data() {
     return {
@@ -74,12 +86,14 @@ export default {
       ruleForm: {
         name: "",
         xzmj: "",
-        fileList: [],
+        fileList: []
       },
-      fileid: 1,
+      fileid: 1
     };
   },
-  mounted() {},
+  mounted() {
+    this.initData();
+  },
   methods: {
     compute(mj) {
       return mj ? (mj * 0.0015).toFixed(2) : 0;
@@ -87,29 +101,31 @@ export default {
     initData() {
       this.echarts = [];
       this.$emit("updateParent", "loading", true);
-      GetFxjg({ bsm: this.$props.scjgObj.bsm }).then((res) => {
-        if (res.success) {
-          res.data.forEach((e, ei) => {
-            let c = e.dataList || e.child;
-            c.map((ci) => {
-              ci.name = ci.yslx_name || ci.scxname;
-              ci.value = this.compute(ci.mj);
-              ci.id = ci.yslx || ci.scxbsm;
-              ci.geom = ci.geom || (ci.data ? ci.data.geom : "");
-              // ci.label = ci.mc_name;
-            });
-            this.echarts.push({
-              id: e.scxbsm,
-              label: e.scxname,
-              children: c,
-              iseyes: false,
-              isshow: false,
-            });
-            this.setEchart(c, ei);
-          });
-          this.$emit("updateParent", "loading", false);
-        }
+      // GetFxjg({ bsm: this.$props.scjgObj.bsm }).then(res => {
+      //   if (res.success) {
+      hgxfx.jg.data.forEach((e, ei) => {
+        let c = e.dataList || [];
+        c.map(ci => {
+          ci.name = ci.yslx_name || ci.scxname;
+          ci.value = this.compute(ci.mj);
+          ci.id = ci.yslx || ci.scxbsm;
+          ci.geom = ci.geom || (ci.data ? ci.data.geom : "");
+          // ci.label = ci.mc_name;
+        });
+        this.echarts.push({
+          id: e.scxbsm,
+          label: e.scxname,
+          children: c,
+          lchildren: e.children || [],
+          iseyes: false,
+          isshow: false
+        });
+        if (c.length > 0) this.setEchart(c, ei);
+        // if (e.children) console.log(e.children)
       });
+      this.$emit("updateParent", "loading", false);
+      //   }
+      // });
     },
     eyesChaneg(i) {
       this.echarts[i].iseyes = !this.echarts[i].iseyes;
@@ -132,12 +148,12 @@ export default {
     },
     echartClick(name, iseyes, index) {
       if (this.echarts[index].iseyes) {
-        let click = this.echarts[index].children.filter((c) => c.name == name);
+        let click = this.echarts[index].children.filter(c => c.name == name);
         if (click.length > 0)
           this.changeDataSources({
             geom: click[0].geom,
             id: click[0].id,
-            iseyes,
+            iseyes
           });
       }
     },
@@ -163,9 +179,9 @@ export default {
         clampToGround: true,
         stroke: scolor,
         fill: fcolor.withAlpha(0.3), //注意：颜色必须大写，即不能为blue
-        strokeWidth: 3,
+        strokeWidth: 3
       });
-      polygon.then(function (dataSource) {
+      polygon.then(function(dataSource) {
         // dataSource.id = id;
         // 将数据源添加到Cesium Viewer
         viewer.dataSources.add(dataSource);
@@ -188,7 +204,7 @@ export default {
     reset() {
       if (Object.keys(dataSourceList).length) viewer.dataSources.removeAll();
       dataSourceList = {};
-    },
+    }
   },
 
   // watch(
@@ -204,7 +220,7 @@ export default {
     // scjgObj(newValue) {
     //   this.initData();
     // },
-  },
+  }
 };
 </script>