update - 能源表具看板改

src/views/energy/LeadershipView/ApparentState/index.vue

@@ -1,7 +1,18 @@
 <template>
   <div id="wrapbg" class="app-container" style="height: 100vh">
+    <div class="zoomButton">
+      缩放比例：
+      <el-button size="small" type="primary" icon="el-icon-minus" @click="reduce"></el-button>
+      {{ zoom }}
+      <el-button size="small" type="primary" icon="el-icon-plus" @click="add"></el-button>
+    </div>
     <div class="aa">
-      <Tree :data="treeData" :index="0" :vw="vw" @itemClick="itemClick"/>
+      <div class="zoom" :style="`transform-origin: 0 0;transform: scale(${zoom})`">
+        <Tree :data="treeData" :index="0" :vw="vw" @itemClick="itemClick" :key="key" v-if="treeShow"/>
+      </div>
+    </div>
+    <div class="menu">
+      <el-tree :data="leftTreeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
     </div>
 
     <div
@@ -283,9 +294,17 @@ export default {
     return {
       vw: document.body.clientWidth / 100,
       treeData: [],
+      leftTreeData:[],
       equipment: {},
-      ModelShow:false,
-      energyType:2,
+      ModelShow: false,
+      energyType: 2,
+      zoom: 1,
+      key:1,
+      treeShow:true,
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      }
     }
   },
   mounted() {
@@ -322,24 +341,83 @@ export default {
         }
       })
       this.treeData = data
+      this.leftTreeData = data
+      console.log(data)
+      this.key +=1
+      this.treeShow = false
+      this.treeShow = true
       // console.log([data[0]])
     })
   },
   created() {
   },
   methods: {
-    itemClick(i){
+    itemClick(i) {
       const nowDate = this.parseTime(new Date(), '{y}-{m}-{d}')
       tablewareDetailsInfo({
         energyType: 2,
         monitorId: i.title,
-        beginCollectTime:nowDate + ' 00:00:00',
-        endCollectTime:nowDate + ' 23:59:59'
+        beginCollectTime: nowDate + ' 00:00:00',
+        endCollectTime: nowDate + ' 23:59:59'
       }).then((response) => {
-        console.log(response)
         this.equipment = response.data.result
         this.ModelShow = true
       })
+    },
+    reduce() {
+      if (this.zoom <= 0.1) {
+        return
+      }
+      if (this.zoom <= 1) {
+        this.zoom = Number((this.zoom - 0.1).toFixed(1))
+      } else if (this.zoom > 1) {
+        this.zoom = Number((this.zoom - 0.5).toFixed(1))
+      }
+    },
+    add() {
+      console.log(this.zoom)
+      if (this.zoom < 1) {
+        this.zoom = Number((this.zoom + 0.1).toFixed(1))
+      } else if (this.zoom >= 1) {
+        this.zoom = Number((this.zoom + 0.5).toFixed(1))
+      }
+    },
+    handleNodeClick(v){
+      const fun = (arr, data) => {
+        let resData = []
+        arr.forEach(v => {
+          if (v.pId === data.id) {
+            resData.push({
+              ...v,
+              children: fun(arr, v)
+            })
+          }
+        })
+        return resData.length === 0 ? null : resData
+      }
+      request({
+        url: '/energy/report/board/fixtureStatus',
+        method: 'get',
+        params: {
+          energyType: 2,
+          objId:v.id
+        }
+      }).then(e => {
+        let data = []
+        e.data.result.forEach(v => {
+          if (v.pId === 0) {
+            let a = {
+              ...v,
+              children: fun(e.data.result, v)
+            }
+            data.push(a)
+          }
+        })
+        this.treeData = data
+        this.key +=1
+        this.treeShow = false
+        this.treeShow = true
+      })
     }
   }
 }