修改看板

ruoyi-ui/src/api/board/index1.js

@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+
+export function boardTWTempertureDataList(query) {
+  return request({
+    url: '/ems/record/recordIOTInstant/boardTWTempertureDataList',
+    method: 'get',
+    timeout:1000*60,
+    params: query,
+  })
+}
+
+export function baseMonitorInfoList(query) {
+  return request({
+    url: '/ems/base/baseMonitorInfo/list',
+    method: 'get',
+    timeout:1000*60,
+    params: query
+  })
+}
+
+export function monitorInfoTree(query) {
+  return request({
+    url: '/ems/base/baseMonitorInfo/monitorInfoTree',
+    method: 'post',
+    timeout:1000*60,
+    data: query
+  })
+}
+

ruoyi-ui/src/views/board/index1.vue

@@ -5,55 +5,71 @@
       <!--      <div class="safe">已安全运行 <span style="color: #4667d0;font-size: 1.2vw;padding: 0 0.3vw"> 382 </span> 天</div>-->
       <div class="time">{{ parseTime(new Date(), '{y}.{m}.{d} {h}:{i}:{s} 周{a}') }}</div>
 
-      <div class="list" v-for="(i,k) in list" :style="`left:${i.left}%`">
+      <div class="center">
-        <div class="itemTitle">{{ k + 1 }}#抽屉柜</div>
+        <div class="list" v-for="(i,k) in list" :style="`left:${7.7+12.1*k}%`">
+          <div class="itemTitle">{{ i.label }}</div>
           <div class="items">
-          <div class="item" v-for="(ii,kk) in 100">
+            <div class="item" v-for="(ii,kk) in i.children" @click="getInfo(ii)">
-            <div class="name">{{k+1}}#-{{kk+1}}</div>
+              <div class="name">{{ ii.label }}</div>
-            <div class="tem">温度：22℃</div>
+              <div class="tem">{{ ii.tempreture?`温度：${ii.tempreture}℃`:'' }}</div>
             </div>
           </div>
         </div>
       </div>
+
+      <el-dialog
+        :title="title"
+        :visible.sync="dialogVisible"
+        width="50%">
+        <div class="dialogItem" v-for="i in list1">
+          <div class="name">{{ i.label }}</div>
+          <div class="tem">温度：{{ i.tempreture }}℃</div>
+        </div>
+        <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible = false">取 消</el-button>
+  </span>
+      </el-dialog>
+
+
+    </div>
   </div>
 </template>
 
 <script>
 
+import {baseMonitorInfoList, boardTWTempertureDataList, monitorInfoTree} from "@/api/board/index1";
+import {handleTree} from "@/utils/ruoyi";
+
 export default {
   data() {
     return {
-      list: [
+      list: [],
-        {
+      list1:[],
-          left: 7.7
+      title: '',
-        },
+      dialogVisible: false,
-        {
-          left: 19.8
-        },
-        {
-          left: 31.9
-        },
-        {
-          left: 44.0
-        },
-        {
-          left: 56.1
-        },
-        {
-          left: 68.2
-        },
-        {
-          left: 80.3
-        },
-        {
-          left: 92.4
-        },
-      ]
     }
   },
   mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      monitorInfoTree({monitorType: 1}).then(e => {
+        console.log(e)
+        this.list =e.data
+      })
+      baseMonitorInfoList({monitorType: 1}).then(e => {
+        // console.log(handleTree(e.data, 'objId'))
+        this.list = handleTree(e.data, 'objId')
+      })
     },
-  methods: {}
+    getInfo(e) {
+      this.title = e.label
+      this.dialogVisible = true
+      console.log(e)
+      this.list1 = e.children || []
+    }
+  }
 }
 </script>
 <style scoped>
@@ -100,17 +116,27 @@ export default {
   letter-spacing: 1px;
 }
 
-.list {
+.center {
   position: absolute;
-  width: 11%;
+  width: 100%;
   height: 85%;
   top: 9.3%;
+  left: 0;
+  overflow: auto;
+}
+
+.list {
+  position: absolute;
+  width: 11%;
+  height: 100%;
+  top: 0%;
   transform: translateX(-50%);
   background-image: url("~@/assets/board/item.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
 }
 
+
 .itemTitle {
   position: absolute;
   top: 4.3%;
@@ -141,23 +167,41 @@ export default {
   background-size: 100% 100%;
   background-repeat: no-repeat;
 }
+
 .name {
   position: absolute;
   top: 37.6%;
-  left: 51%;
+  left: 49%;
+  width: 48%;
   transform: translateY(-50%);
   font-size: 0.95vw;
   color: #fefefe;
   letter-spacing: 2px;
 }
+
 .tem {
   position: absolute;
   top: 62.7%;
-  left: 51%;
+  left: 49%;
   transform: translateY(-50%);
   font-size: 0.7vw;
   color: #598fce;
   letter-spacing: 1px;
   white-space: nowrap;
 }
+
+.dialogItem {
+  width: 210px;
+  height: 140px;
+  display: inline-block;
+  margin-right: 12px;
+  background-image: url("~@/assets/board/icon.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+.dialogItem .name {
+  color: #000;
+}
 </style>