多级树结构显示优化调整，单个图斑显隐控制

src/views/complianceAnalysis/components/collRecursiveTree.vue

@@ -1,13 +1,11 @@
 <template>
-  <div>
+  <div class="collapse-item">
     <el-collapse-item
       v-for="litem in data"
       :key="litem.scxbsm"
       :name="litem.title"
     >
-      <template slot="title">
-        {{ litem.scxname }}
-      </template>
+      <template slot="title"> {{ litem.scxname }} </template>
       <div v-if="litem.scxstyle == '1'">
         <div v-for="ldata in litem.dataList" :key="ldata.scxbsm">
           <el-tooltip
@@ -15,9 +13,10 @@
             :content="ldata.yslx_name"
             placement="bottom-start"
           >
-            <span class="legLabel">{{ ldata.yslx_name }} </span>
+            <span class="name">{{ ldata.yslx_name }} </span>
           </el-tooltip>
-          <span> {{ compute(ldata.mj) }}亩</span>
+          <span class="value"> {{ compute(ldata.mj) }}</span>
+          亩
           <span class="tools">
             <i
               class="header-icon el-icon-place"
@@ -29,6 +28,7 @@
       <recursive-tree
         v-if="litem.children"
         :data="litem.children"
+        :piseyes="piseyes"
         @mapview="mapview"
       />
     </el-collapse-item>
@@ -41,6 +41,10 @@ export default {
   props: {
     data: {
       type: Array
+    },
+    piseyes: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -52,8 +56,9 @@ export default {
       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);
+      this.mapview({ ...ldata, id: ldata.yslx });
     },
     mapview(data) {
       this.$emit("mapview", data);
@@ -62,9 +67,26 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.tools {
-  position: absolute;
-  right: 30px;
-  cursor: pointer;
+.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>