Merge branch 'maxx'

src/views/complianceAnalysis/components/collRecursiveTree.vue

@@ -6,39 +6,26 @@
       :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
+        :ref="`contentRef${litem.scxbsm}`"
+        :litem="litem"
+        :piseyes="piseyes"
+        @echartClick="echartClick"
+        @mapview="mapview"
+      ></scjgContent>
       <recursive-tree
         v-if="litem.children"
         :data="litem.children"
         :piseyes="piseyes"
         @mapview="mapview"
+        @addrefs="addrefs"
       />
     </el-collapse-item>
   </div>
 </template>
 
 <script>
+import scjgContent from "./scjgContent.vue";
 export default {
   name: "recursive-tree",
   props: {
@@ -53,43 +40,25 @@ export default {
   data() {
     return {};
   },
-  components: {},
+  components: { scjgContent },
+  mounted() {
+    this.$nextTick(() => {
+      Object.keys(this.$refs).forEach((key) => {
+        if (this.$refs[key]) {
+          this.addrefs(key, this.$refs[key][0]);
+        }
+      });
+    });
+  },
   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 });
+    addrefs(key, ref) {
+      this.$emit("addrefs", key, ref);
     },
+   
     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,19 +28,18 @@
           @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"
           :piseyes="eitem.iseyes"
+          @addrefs="addrefs"
           @mapview="changeDataSources"
         ></collRecursiveTree>
       </el-collapse>
@@ -53,7 +52,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 +71,7 @@ let colors = [
   "#DCFFAF",
 ];
 export default {
-  components: { pie, collRecursiveTree },
+  components: { scjgContent, collRecursiveTree },
   props: {
     scjgObj: {
       type: Object,
@@ -87,6 +86,7 @@ export default {
         fileList: [],
       },
       fileid: 1,
+      reflist: {},
     };
   },
   mounted() {
@@ -96,6 +96,9 @@ export default {
     compute(mj) {
       return mj ? (mj * 0.0015).toFixed(2) : 0;
     },
+    addrefs(key, ref) {
+      this.reflist[key] = ref;
+    },
     initData() {
       this.echarts = [];
       this.$emit("updateParent", "loading", true);
@@ -107,7 +110,7 @@ export default {
               ci.name = ci.yslx_name || ci.scxname;
               // ci.value = this.compute(ci.mj);
               ci.value = ci.mj;
-              ci.geom = ci.geom || (ci.data ? ci.data.geom : "");
+              ci.geom = ci.geom || "";
               // ci.label = ci.mc_name;
             });
             this.echarts.push({
@@ -120,7 +123,7 @@ export default {
               scxstyle: e.scxstyle,
             });
             if (e.scxstyle == 0) this.setEchart(c, e.scxbsm);
-            // if (e.children) console.log(e.children)
+            if (e.children) this.lForEach(e.children, "echart");
           });
           this.$emit("updateParent", "loading", false);
         }
@@ -132,22 +135,39 @@ export default {
       //   this.changeDataSources(this.echarts[i]);
       // } else {
       let iseyes = this.echarts[i].iseyes;
-      this.echarts[i].dataList.forEach((child, ci) => {
-        this.changeDataSources({ ...child, iseyes }, colors[ci]);
-      });
-      this.lchangeDataSources(this.echarts[i].lchildren, iseyes);
+      if (this.echarts[i].dataList)
+        this.echarts[i].dataList.forEach((child, ci) => {
+          this.changeDataSources({ ...child, iseyes }, colors[ci]);
+        });
+      this.lForEach(this.echarts[i].lchildren, iseyes, "sources");
       // }
       // emit("eyesChaneg");
     },
-    lchangeDataSources(data, iseyes) {
-      data.forEach((child, ci) => {
+    lForEach(data, fun, iseyes) {
+      data.forEach((child) => {
         if (child.dataList) {
           child.dataList.forEach((ld, li) => {
-            this.changeDataSources({ ...ld, iseyes }, colors[li]);
+            if (fun == "sources")
+              this.changeDataSources({ ...ld, iseyes }, colors[li]);
+            else {
+              ld.name = ld.yslx_name;
+              ld.value = ld.mj;
+            }
           });
         }
         if (child.children) {
-          this.lchangeDataSources(child.children, iseyes);
+          this.lForEach(child.children, fun, iseyes);
+        }
+
+        if (
+          fun == "echart" &&
+          child.scxstyle == 0 &&
+          child.scxbsm.indexOf("GGFWSS") >= 0
+        ) {
+          child.id = child.scxbsm;
+          setTimeout(() => {
+            this.setEchart(child.dataList, child.id, child.id);
+          }, 200);
         }
       });
     },
@@ -158,21 +178,13 @@ 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) {
+    setEchart(data, id, childid) {
       this.$nextTick(() => {
         let type = data.length <= 6 ? "horizontal" : "vertical";
-        this.$refs[`echartRef${id}`][0].setOptions({ data, type });
+        if (!childid) this.$refs[`contentRef${id}`][0].setEchart(data, type);
+        else {
+          this.reflist[`contentRef${id}`].setEchart(data, type, childid);
+        }
       });
     },
     // 加载GeoJSON数据
@@ -236,7 +248,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .scjg {
   height: 100%;
   overflow-y: auto;
@@ -295,7 +307,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 && 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>
+