检查结果图表循环嵌套显示

src/views/complianceAnalysis/components/collRecursiveTree.vue

@@ -6,28 +6,12 @@
       :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="name">{{ ldata.yslx_name }} </span>
-          </el-tooltip>
-          <span class="value"> {{ ldata.mj }}</span>
-          米
-          <span class="tools">
-            <i
-              class="header-icon el-icon-place"
-              @click.stop="mapviewClick(ldata)"
-            ></i>
-          </span>
-        </div>
-      </div>
-      <div v-else-if="litem.scxstyle == 0">
-        <!-- 图表 -->
-      </div>
+      <scjgContent
+        :litem="litem"
+        :piseyes="piseyes"
+        @echartClick="echartClick"
+        @mapview="mapview"
+      ></scjgContent>
       <recursive-tree
         v-if="litem.children"
         :data="litem.children"
@@ -39,6 +23,7 @@
 </template>
 
 <script>
+import scjgContent from "./scjgContent.vue";
 export default {
   name: "recursive-tree",
   props: {
@@ -53,43 +38,12 @@ export default {
   data() {
     return {};
   },
-  components: {},
+  components: { scjgContent },
   methods: {
-    compute(mj) {
-      return mj ? (mj * 0.0015).toFixed(2) : 0;
-    },
-    mapviewClick(ldata) {
-      if (ldata.iseyes == undefined || !this.piseyes) ldata.iseyes = true;
-      this.$set(ldata, "iseyes", !ldata.iseyes);
-      this.mapview({ ...ldata });
-    },
     mapview(data) {
       this.$emit("mapview", data);
     },
   },
 };
 </script>
-<style lang="scss" scoped>
-.collapse-item {
-  .name {
-    // width: 100px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .value {
-    width: 40px;
-    color: #64daff;
-    padding: 0px 4px;
-    text-align: center;
-  }
-  .tools {
-    position: absolute;
-    right: 30px;
-    cursor: pointer;
-  }
-  .highcolor {
-    color: #64daff;
-  }
-}
-</style>
+

src/views/complianceAnalysis/components/scjg.vue

@@ -28,15 +28,13 @@
           @click="eitem.isshow = !eitem.isshow"
         ></div>
       </div>
-      <pie
-        v-if="eitem.scxstyle == 0"
+      <scjgContent
+        :ref="`contentRef${eitem.id}`"
         v-show="eitem.isshow"
-        class="echart"
-        :class="`echart${eitem.dataList.length <= 6 ? '' : '_vertical'}`"
-        unit="亩"
-        @echartClick="(name, iseyes) => echartClick(name, iseyes, i)"
-        :ref="`echartRef${eitem.id}`"
-      ></pie>
+        :litem="eitem"
+        :piseyes="eitem.iseyes"
+        @mapview="changeDataSources"
+      ></scjgContent>
       <el-collapse v-if="eitem.lchildren.length" v-show="eitem.isshow">
         <collRecursiveTree
           :data="eitem.lchildren"
@@ -53,7 +51,7 @@
 </template>
 
 <script>
-import pie from "@/components/echartsTemplate/pie.vue";
+import scjgContent from "./scjgContent.vue";
 import collRecursiveTree from "./collRecursiveTree.vue";
 import { GetFxjg } from "@/api/ghss/hgxfx.js";
 // import hgxfx from "../../../../static/data/ghss/data.js";
@@ -72,7 +70,7 @@ let colors = [
   "#DCFFAF",
 ];
 export default {
-  components: { pie, collRecursiveTree },
+  components: { scjgContent, collRecursiveTree },
   props: {
     scjgObj: {
       type: Object,
@@ -158,21 +156,14 @@ export default {
         this.addPolygon(geom, id, color);
       }
     },
-    echartClick(name, iseyes, index) {
-      if (this.echarts[index].iseyes) {
-        let click = this.echarts[index].dataList.filter((c) => c.name == name);
-        if (click.length > 0)
-          this.changeDataSources({
-            geom: click[0].geom,
-            id: click[0].id,
-            iseyes,
-          });
-      }
-    },
     setEchart(data, id) {
       this.$nextTick(() => {
         let type = data.length <= 6 ? "horizontal" : "vertical";
-        this.$refs[`echartRef${id}`][0].setOptions({ data, type });
+        // this.$refs[`contentRef${id}`][0].$refs.echartRef.setOptions({
+        //   data,
+        //   type,
+        // });
+        this.$refs[`contentRef${id}`][0].setEchart(data, type);
       });
     },
     // 加载GeoJSON数据
@@ -236,7 +227,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .scjg {
   height: 100%;
   overflow-y: auto;
@@ -295,7 +286,6 @@ export default {
         background-image: url("/static/images/ghzc/to_right.png");
       }
     }
-
     .echart {
       width: 380px;
       height: 220px;

src/views/complianceAnalysis/components/scjgContent.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="content">
+    <!-- 图表 -->
+    <pie
+      v-if="litem.scxstyle == 0"
+      :class="`echart${litem.dataList.length <= 6 ? '' : '_vertical'}`"
+      unit="亩"
+      @echartClick="(name, iseyes) => echartClick(name, iseyes)"
+      :ref="`echartRef`"
+    ></pie>
+    <div v-else-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="name">{{ ldata.yslx_name }} </span>
+        </el-tooltip>
+        <span class="value"> {{ ldata.mj }}</span>
+        米
+        <span class="tools">
+          <i
+            class="header-icon el-icon-place"
+            @click.stop="mapviewClick(ldata)"
+          ></i>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import pie from "@/components/echartsTemplate/pie.vue";
+
+export default {
+  name: "scjgContent",
+  props: {
+    litem: {
+      type: Object,
+    },
+    piseyes: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {};
+  },
+  components: { pie },
+  mounted() {},
+  methods: {
+    setEchart(data, type) {
+      this.$nextTick(() => {
+        this.$refs.echartRef.setOptions({ data, type });
+      });
+    },
+    echartClick(name, iseyes) {
+      if (this.piseyes) {
+        let click = this.litem.dataList.filter((c) => c.name == name);
+        if (click.length > 0) this.mapview({ ...click[0], iseyes });
+      }
+    },
+    mapviewClick(ldata) {
+      if (ldata.iseyes == undefined || !this.piseyes) ldata.iseyes = true;
+      this.$set(ldata, "iseyes", !ldata.iseyes);
+      this.mapview(ldata);
+    },
+    mapview(data) {
+      this.$emit("mapview", data);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.content {
+  .name {
+    // width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .value {
+    width: 40px;
+    color: #64daff;
+    padding: 0px 4px;
+    text-align: center;
+  }
+  .tools {
+    position: absolute;
+    right: 30px;
+    cursor: pointer;
+  }
+  .highcolor {
+    color: #64daff;
+  }
+}
+</style>
+