修改树结构界面

src/views/board/index.vue

@@ -107,35 +107,35 @@
       </div>
 
       <div class="table1">
-        <div class="h1">
-          <div class="scrollTable" style="font-weight: bold;width: calc(100% / 7);">
+        <div class="h1" style="line-height: 1vw">
+          <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 7);">
             设备名称
           </div>
-          <div class="scrollTable" style="font-weight: bold;width: calc(100% / 7);">
+          <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 7);">
             A相电流
           </div>
-          <div class="scrollTable" style="font-weight: bold;width: calc(100% / 7);">
+          <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 7);">
             B相电流
           </div>
-          <div class="scrollTable" style="font-weight: bold;width: calc(100% / 7);">
+          <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 7);">
             C相电流
           </div>
-          <div class="scrollTable" style="font-weight: bold;width: calc(100% / 7);">
+          <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 7);">
             A相电压
           </div>
-          <div class="scrollTable" style="font-weight: bold;width: calc(100% / 7);">
+          <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 7);">
             B相电压
           </div>
-          <div class="scrollTable" style="font-weight: bold;width: calc(100% / 7);">
+          <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 7);">
             C相电压
           </div>
         </div>
         <vue-seamless-scroll
-            :class-option="{...chart1TableOption,limitMoveNum:4}"
+            :class-option="{...chart1TableOption,limitMoveNum:6}"
             :data="table1Data"
             :key="scrollKey1"
             class="case-item"
-            style="height: 84%;overflow: hidden;"
+            style="height: calc(100% - 1vw);overflow: hidden;"
         >
           <div
               v-for="(item, index) in table1Data"
@@ -180,7 +180,7 @@
           </div>
         </div>
         <vue-seamless-scroll
-            :class-option="{...chart1TableOption,limitMoveNum:10}"
+            :class-option="{...chart1TableOption,limitMoveNum:6}"
             :data="realTimeAlarmData"
             :key="scrollKey2"
             class="case-item"
@@ -262,6 +262,7 @@ export default {
   },
   data() {
     return {
+
       selectData: 'year',
       typeData: "2",
       colors: ['#30A0FB', '#00FF89', '#F9E435', '#FB5C2D', '#73c0de'],

src/views/board/index1.vue

@@ -1,10 +1,35 @@
 <template>
   <div>
     <div class="bg">
+
+      <div class="typeSelect">
+        <el-select v-model="typeData" placeholder="请选择" @change="getData" style="width: 120px">
+          <el-option
+              label="电"
+              value="2">
+          </el-option>
+          <el-option
+              label="水"
+              value="3">
+          </el-option>
+          <el-option
+              label="压缩空气"
+              value="4">
+          </el-option>
+          <el-option
+              label="蒸汽"
+              value="5">
+          </el-option>
+          <el-option
+              label="氮气"
+              value="6">
+          </el-option>
+        </el-select>
+      </div>
       <div class="title">正道能源监控系统</div>
       <div class="content">
         <div class="list" v-for="item in list" :key="item.name">
-          <ListItem :itemData="item" :isRoot="true"></ListItem>
+          <ListItem v-if="isShow" :itemData="item" :isRoot="true"></ListItem>
         </div>
       </div>
     </div>
@@ -24,6 +49,14 @@ export default {
   },
   data() {
     return {
+      isShow: true,
+      typeData: '2',
+      fieldUnits: {
+        vA: 'V', vB: 'V', vC: 'V',
+        iA: 'A', iB: 'A', iC: 'A',
+        zxyg: '', fxyg: '',
+      },
+      fieldFilter: ['vA', 'vB', 'vC', 'iA', 'iB', 'iC', 'zxyg', 'fxyg'],
       list1: [
         {
           "name": "root",
@@ -157,22 +190,7 @@ export default {
     }
   },
   async mounted() {
-    const fieldUnits = {
-      vA: 'V', vB: 'V', vC: 'V',
-      iA: 'A', iB: 'A', iC: 'A',
-      zxyg: '', fxyg: '',
-    };
-
-    const fieldFilter = ['vA', 'vB', 'vC', 'iA', 'iB', 'iC', 'zxyg', 'fxyg'];
-
-    realTimeData({
-      monitorType: 2
-    }).then(res => {
-      console.log(res)
-      const tree = this.buildTree(res.data, fieldUnits, fieldFilter);
-      this.list = tree
-      console.log(tree)
-    })
+    this.getData()
   },
   methods: {
     buildTree(data, fieldUnits, fieldFilter) {
@@ -211,6 +229,16 @@ export default {
       });
 
       return tree;
+    },
+    getData() {
+      this.isShow = false
+      realTimeData({
+        monitorType: this.typeData
+      }).then(res => {
+        const tree = this.buildTree(res.data, this.fieldUnits, this.fieldFilter);
+        this.list = tree
+        this.isShow = true
+      })
     }
   }
 }
@@ -255,4 +283,15 @@ export default {
   .list {
   }
 }
+
+.typeSelect {
+  position: absolute;
+  top: 6%;
+  left: 2%;
+
+  /deep/ .el-input__inner {
+    background-color: #0000;
+    color: #fff;
+  }
+}
 </style>