折叠层嵌套树数据

src/views/complianceAnalysis/components/collRecursiveTree.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <el-collapse-item
+      v-for="litem in data"
+      :key="litem.scxbsm"
+      :name="litem.title"
+    >
+      <template slot="title">
+        {{ litem.scxname }}
+      </template>
+      <div v-if="litem.scxstyle == '1'">
+        <div v-for="ldata in litem.dataList" :key="ldata.scxbsm">
+          <el-tooltip
+            v-if="ldata.yslx_name.length > 0"
+            :content="ldata.yslx_name"
+            placement="bottom-start"
+          >
+            <span class="legLabel">{{ ldata.yslx_name }} </span>
+          </el-tooltip>
+          <span> {{ compute(ldata.mj) }}亩</span>
+          <span class="tools">
+            <i
+              class="header-icon el-icon-place"
+              @click.stop="mapviewClick(ldata)"
+            ></i>
+          </span>
+        </div>
+      </div>
+      <recursive-tree
+        v-if="litem.children"
+        :data="litem.children"
+        @mapview="mapview"
+      />
+    </el-collapse-item>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "recursive-tree",
+  props: {
+    data: {
+      type: Array
+    }
+  },
+  data() {
+    return {};
+  },
+  components: {},
+  methods: {
+    compute(mj) {
+      return mj ? (mj * 0.0015).toFixed(2) : 0;
+    },
+    mapviewClick(ldata) {
+      this.$set(ldata, "iseyes", !ldata.iseyes);
+      this.mapview(ldata);
+    },
+    mapview(data) {
+      this.$emit("mapview", data);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.tools {
+  position: absolute;
+  right: 30px;
+  cursor: pointer;
+}
+</style>

src/views/complianceAnalysis/components/scjg.vue

@@ -37,13 +37,11 @@
         @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>
+        <collRecursiveTree
+          :data="eitem.lchildren"
+          @mapview="changeDataSources"
+        ></collRecursiveTree>
       </el-collapse>
     </div>
     <!-- <div class="bottomBtns">
@@ -55,8 +53,7 @@
 
 <script>
 import pie from "@/components/echartsTemplate/pie.vue";
-import collapseTree from "./collapseTree.vue";
-import recursiveTree from "./recursive-tree.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";
@@ -74,7 +71,7 @@ let colors = [
   "#DCFFAF"
 ];
 export default {
-  components: { pie, collapseTree, recursiveTree },
+  components: { pie, collRecursiveTree },
   props: {
     scjgObj: {
       type: Object
@@ -170,7 +167,7 @@ export default {
       // viewer.entities.removeAll();
       let scolor = colors
         ? Cesium.Color.fromCssColorString(colors)
-        : Cesium.Color.BLUE;
+        : Cesium.Color.RED;
       let fcolor = colors
         ? Cesium.Color.fromCssColorString(colors)
         : Cesium.Color.WHITE;