修改看板接口

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

@@ -4,7 +4,7 @@ import request from '@/utils/request'
 export function treeList(query) {
   return request({
     // baseURL:'/monitoring-api',
-    url: '/business/monitorPlatform/treeList',
+    url: '/business/monitorPlatform/treeList/1',
     method: 'get',
   })
 }
@@ -12,8 +12,8 @@ export function treeList(query) {
 export function selectDeviceByDeviceModeByMonitorUnitId(query) {
   return request({
     // baseURL:'/monitoring-api',
-    url: '/business/monitorPlatform/selectDeviceByDeviceModeByMonitorUnitId',
+    url: '/business/monitorPlatform/selectDevicesByMonitorUnitId/1/1',
-    method: 'post',
+    method: 'get',
     data:query
   })
 }
@@ -21,8 +21,17 @@ export function selectDeviceByDeviceModeByMonitorUnitId(query) {
 export function selectDeviceModeFunctionByFunctionType(query) {
   return request({
     // baseURL:'/monitoring-api',
-    url: '/business/monitorPlatform/selectDeviceModeFunctionByFunctionType',
+    url: '/business/monitorPlatform/selectLatestDataByDeviceMode',
     method: 'post',
     data:query
   })
 }
+// 中上
+export function getMonitorById(query) {
+  return request({
+    // baseURL:'/monitoring-api',
+    url: '/business/monitorPlatform/getMonitorById/1',
+    method: 'get',
+    data:query
+  })
+}

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

@@ -1,19 +1,28 @@
 import request from '@/utils/request'
 
-// 查询定时任务调度列表
+// 右
-export function listJob(query) {
+export function selectLatestDataByDeviceMode(query) {
   return request({
-    url: '/schedule/job/list',
+    url: '/business/monitorPlatform/selectLatestDataByDeviceMode',
-    method: 'get',
+    method: 'post',
-    params: query
+    data: {
+      "sceneId": 1,
+      "deviceModeId": 1,
+      "startTime": 1222222222222,
+      "offset": 0,
+      "limit": 10
+    }
+
   })
 }
 
-// 新增定时任务调度
+// 左
-export function addJob(data) {
+export function getDeviceModesBySceneId(data) {
   return request({
-    url: '/schedule/job',
+    url: '/business/monitorPlatform/getDeviceModesBySceneId',
     method: 'post',
-    data: data
+    data: {
+      "sceneId": 1,
+    }
   })
 }

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

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 上
+export function selectSecnes(query) {
+  return request({
+    // baseURL:'/monitoring-api',
+    url: '/business/monitorPlatform/selectSecnes',
+    method: 'get',
+  })
+}

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

@@ -0,0 +1,34 @@
+import request from '@/utils/request'
+
+// 上
+export function getDeviceInfo(query) {
+  return request({
+    // baseURL:'/monitoring-api',
+    url: '/business/monitorPlatform/getDeviceInfo/1',
+    method: 'get',
+  })
+}
+// 中
+export function getHistoryData(query) {
+  return request({
+    // baseURL:'/monitoring-api',
+    url: '/business/monitorPlatform/getHistoryData',
+    method: 'post',
+    data:{
+      "sceneId": 1,
+      "deviceId": 2,
+      "offset": 0,
+      "limit": 5,
+      "startTime": 1266666666666
+    }
+
+  })
+}
+// 下
+export function getLinkDevices(query) {
+  return request({
+    // baseURL:'/monitoring-api',
+    url: '/business/monitorPlatform/getLinkDevices/1',
+    method: 'get',
+  })
+}

ruoyi-ui/src/components/BoardTopNav/index.vue

@@ -13,11 +13,7 @@
                         智慧场景 <i class="el-icon-arrow-down el-icon--right"></i>
                     </span>
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item>黄金糕</el-dropdown-item>
+            <el-dropdown-item v-for="i in selectSecnesList">{{ i.sceneName }}</el-dropdown-item>
-            <el-dropdown-item>狮子头</el-dropdown-item>
-            <el-dropdown-item>螺蛳粉</el-dropdown-item>
-            <el-dropdown-item>双皮奶</el-dropdown-item>
-            <el-dropdown-item>蚵仔煎</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -33,22 +29,27 @@
       </div>
     </div>
 
-    <div class="right" >
+    <div class="right">
                 <span>
                     管 理
                 </span>
     </div>
 
-    <div class="rightImg" >
+    <div class="rightImg">
     </div>
   </div>
 </template>
 
 <script>
+import {
+  selectSecnes
+} from '@/api/board/nav'
 
 export default {
   data() {
-    return {}
+    return {
+      selectSecnesList: []
+    }
   },
   props: {
     nowMenu: {
@@ -58,8 +59,14 @@ export default {
   },
 
   mounted() {
+    this.setSelectSecnes()
   },
-  methods: {}
+  methods: {
+    async setSelectSecnes() {
+      const {data} = await selectSecnes()
+      this.selectSecnesList = data
+    }
+  }
 };
 </script>
 <style lang="less" scoped>
@@ -97,7 +104,8 @@ export default {
   transform: translate(-50%, -50%);
   color: #f6f6f6;
 }
-.rightImg{
+
+.rightImg {
   transform: rotateX(180deg);
   background-image: url('~@/assets/board/common/subheadClick1.png');
   background-repeat: no-repeat;
@@ -108,7 +116,8 @@ export default {
   top: 3.8%;
   left: 71%;
 }
-.right{
+
+.right {
   position: absolute;
   width: 8vw;
   height: 1.66vw;

ruoyi-ui/src/views/board/equipment/index.vue

@@ -9,8 +9,8 @@
         :data="treeData"
         :props="{label:'monitorUnitName',children:'child',value:'monitorUnitId'}"
         accordion
-        @node-click="treeClick"
+        node-key="id"
-        node-key="id">
+        @node-click="treeClick">
       <span slot-scope="{ node, data }" class="custom-tree-node">
         <span>{{ node.label }}</span>
       </span>
@@ -18,20 +18,20 @@
     </div>
     <div class="equipmentInfo">
       <p>
-        <span>设备编码：</span>
+        <span>设备名称：</span>
-        <span style="color: #d9dee3">王秀1#变</span>
+        <span style="color: #d9dee3">{{ MonitorInfo.monitorUnitName }}</span>
       </p>
       <p>
-        <span>设备编码：</span>
+        <span>设备id：</span>
-        <span style="color: #d9dee3">王秀1#变</span>
+        <span style="color: #d9dee3">{{ MonitorInfo.monitorUnitId }}</span>
       </p>
       <p>
-        <span>设备编码：</span>
+        <span>设备状态：</span>
-        <span style="color: #d9dee3">王秀1#变</span>
+        <span style="color: #d9dee3">{{ MonitorInfo.monitorUnitStatus === 1 ? '正常' : '异常' }}</span>
       </p>
       <p>
-        <span>设备编码：</span>
+        <span>设备类型：</span>
-        <span style="color: #d9dee3">王秀1#变</span>
+        <span style="color: #d9dee3">{{ MonitorInfo.monitorUnitTypeId }}</span>
       </p>
     </div>
     <div class="img"></div>
@@ -42,9 +42,9 @@
         </el-form-item>
       </el-form>
       <div class="terminalList">
-        <div v-for="i in 10" class="item">
+        <div v-for="i in controlList" class="item">
           <div class="icon"></div>
-          <div class="title">车间-阀门</div>
+          <div class="title">{{ i.deviceName }}</div>
           <div class="switch">
             <el-switch
               v-model="data1"
@@ -56,16 +56,16 @@
       </div>
     </div>
     <div class="right">
-      <div v-for="i in 10" class="item">
+      <div v-for="i in acquisitionList" class="item">
         <div class="iconBg"></div>
         <div class="icon"></div>
         <div class="rightBg">
-          <div class="title">大厅-温度</div>
+          <div class="title">{{ i.deviceName }}</div>
           <div style="position: absolute;left: 24%;top: 0px;width: 75%;height: 100%;">
-            <div v-for="i in 3" class="infoItem">
+            <div v-for="val in Object.keys(i.deviceDataMaps[0]).slice(0,3)" class="infoItem">
-              <div class="span">温度:</div>
+              <div class="span">{{ val }}:</div>
               <div class="spanBg"></div>
-              <div class="num">47.5℃</div>
+              <div class="num">{{ i.deviceDataMaps[0][val] }}</div>
             </div>
           </div>
           <div class="btn">
@@ -87,7 +87,8 @@
 import {
   treeList,
   selectDeviceByDeviceModeByMonitorUnitId,
-  selectDeviceModeFunctionByFunctionType
+  selectDeviceModeFunctionByFunctionType,
+  getMonitorById
 } from '@/api/board/equipment'
 
 import BoardTopNav from '@/components/BoardTopNav'
@@ -98,16 +99,22 @@ export default {
   },
   data() {
     return {
-      monitorUnitId:'',
+      monitorUnitId: '',
       data1: true,
       form: {
         data1: ''
       },
-      treeData: []
+      treeData: [],
+      controlList: [],
+      acquisitionList: [],
+      MonitorInfo:{}
     }
   },
   mounted() {
     this.getTree()
+    this.getDevice()
+    this.getRightDevice()
+    this.setMonitorById()
   },
   methods: {
     async getTree() {
@@ -115,23 +122,31 @@ export default {
       console.log(data)
       this.treeData = data
     },
-    treeClick(e){
+    treeClick(e) {
-      if(e.child.length === 0){
+      if (e.child.length === 0) {
         this.monitorUnitId = e.monitorUnitId
         this.getDevice(e.monitorUnitId)
         this.getRightDevice(e.monitorUnitId)
       }
     },
-    getDevice(e){
+    async getDevice(e) {
-      selectDeviceByDeviceModeByMonitorUnitId({monitorUnitId:e}).then(val=>{
+      const {data} = await selectDeviceByDeviceModeByMonitorUnitId({monitorUnitId: e})
-        console.log(val)
+      this.controlList = data.control
-      })
+      this.acquisitionList = data.acquisition
     },
-    getRightDevice(e){
+    async getRightDevice(e) {
-      selectDeviceModeFunctionByFunctionType({monitorUnitId:e}).then(val=>{
+      const data = await selectDeviceModeFunctionByFunctionType({
-        console.log(val)
+        "sceneId": 1,
+        "deviceModeId": 1,
+        "startTime": 1222222222222,
+        "offset": 0,
+        "limit": 1
       })
     },
+    async setMonitorById() {
+      const {data} = await getMonitorById()
+      this.MonitorInfo = data
+    }
   }
 };
 </script>

ruoyi-ui/src/views/board/equipmentMonitoring/index.vue

@@ -3,8 +3,8 @@
     <div class="centerImg"></div>
     <BoardTopNav nowMenu="3"></BoardTopNav>
     <div class="leftMenu">
-      <div v-for="i in 10" class="item">
+      <div v-for="i in deviceList" class="item">
-        <span>温度传感器</span>
+        <span>{{ i.deviceModeName }}</span>
       </div>
     </div>
     <div ref="right" class="right">
@@ -38,40 +38,32 @@
           :max-height="maxHeight">
           style="width: 100%">
           <el-table-column
-            label="序号"
+            label="rssi"
-            prop="data1">
+            prop="rssi">
           </el-table-column>
           <el-table-column
-            label="传感器ID"
+            label="value1"
-            prop="data2">
+            prop="value1">
           </el-table-column>
           <el-table-column
-            label="传感器名称"
+            label="编号"
-            prop="data3">
+            prop="devicecode">
           </el-table-column>
           <el-table-column
-            label="标号"
+            label="alias"
-            prop="data4">
+            prop="alias">
           </el-table-column>
           <el-table-column
-            label="温度"
+            label="设备名称"
-            prop="data4">
+            prop="devicename">
           </el-table-column>
           <el-table-column
-            label="排名"
+            label="ts"
-            prop="data6">
+            prop="ts">
           </el-table-column>
           <el-table-column
-            label="湿度"
+            label="voltage"
-            prop="data7">
+            prop="voltage">
-          </el-table-column>
-          <el-table-column
-            label="压力"
-            prop="data8">
-          </el-table-column>
-          <el-table-column
-            label="传感器"
-            prop="data9">
           </el-table-column>
         </el-table>
       </div>
@@ -84,7 +76,10 @@
 </template>
 
 <script>
-
+import {
+  selectLatestDataByDeviceMode,
+  getDeviceModesBySceneId,
+} from '@/api/board/equipmentMonitoring'
 import BoardTopNav from '@/components/BoardTopNav'
 
 export default {
@@ -100,354 +95,15 @@ export default {
         data3: null
       },
       maxHeight: 0,
-      tableData: [
+      tableData: [],
-        {
+      deviceList:[]
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-        {
-          data1: 'data1',
-          data2: 'data2',
-          data3: 'data3',
-          data4: 'data4',
-          data5: 'data5',
-          data6: 'data6',
-          data7: 'data7',
-          data8: 'data8',
-          data9: 'data9',
-        },
-      ]
     }
   },
   mounted() {
     this.maxHeight = this.$refs.right.clientHeight - this.$refs.search.clientHeight - this.$refs.pagination.clientHeight - 12
     this.tableShow = true
+    this.setSelectLatestDataByDeviceMode()
+    this.setDeviceModesBySceneId()
   },
   methods: {
     setStyle(e) {
@@ -456,6 +112,15 @@ export default {
       } else {
         return {textAlign: 'center', backgroundColor: '#063468', color: '#05aaba'}
       }
+    },
+    async setSelectLatestDataByDeviceMode(){
+      const {data} = await selectLatestDataByDeviceMode()
+      this.tableData = data.latestData.rows
+      console.log(this.tableData)
+    },
+    async setDeviceModesBySceneId(){
+      const {data} = await getDeviceModesBySceneId()
+      this.deviceList = data
     }
   }
 };

ruoyi-ui/src/views/board/senso/index.vue

@@ -3,218 +3,84 @@
     <div class="centerImg"></div>
     <BoardTopNav nowMenu="4"></BoardTopNav>
     <div class="collapse">
-      <el-collapse v-model="activeName" accordion>
+      <div style="margin-bottom: 24px">
-        <el-collapse-item name="1">
+        <el-collapse v-model="activeName" accordion>
-          <template slot="title">
+          <el-collapse-item name="1">
-            <div class="itemBg">
+            <template slot="title">
-              <div class="icon"></div>
+              <div class="itemBg">
-              <div class="icon1"></div>
+                <div class="icon"></div>
-              <div class="icon2"></div>
+                <div class="icon1"></div>
-              <div class="title"> 大厅-摄像头</div>
+                <div :style="'background-image: url('+topData.devicePic+')'" class="icon2"></div>
-              <div class="info">
+                <div class="title"> {{ topData.monitorUnitName }}</div>
-                <div class="info1">所属区域</div>
+                <div class="info">
-                <div class="info2">大厅</div>
+                  <div class="info1">所属区域</div>
+                  <div class="info2"> {{ topData.deviceName }}</div>
+                </div>
+                <div class="info" style="left: 70vh;">
+                  <div class="info1">位置:</div>
+                  <div class="info2">深圳</div>
+                </div>
+                <div class="info" style="left: 80vh;">
+                  <div class="info1">日期:</div>
+                  <div class="info2">2023-01-01 00:00:00</div>
+                </div>
               </div>
-              <div class="info" style="left: 70vh;">
+            </template>
-                <div class="info1">位置:</div>
-                <div class="info2">深圳</div>
-              </div>
-              <div class="info" style="left: 80vh;">
-                <div class="info1">日期:</div>
-                <div class="info2">2023-01-01 00:00:00</div>
-              </div>
-            </div>
-          </template>
-          <div>
             <div>
-              <el-row :gutter="24">
+              <div>
-                <el-col :span="12">
+                <!--              <el-row :gutter="24">-->
-                  <el-radio-group v-model="radio">
+                <!--                <el-col :span="12">-->
-                    <el-radio-button label="日统计报表"></el-radio-button>
+                <!--                                    <el-radio-group v-model="radio">-->
-                    <el-radio-button label="月统计报表"></el-radio-button>
+                <!--                                      <el-radio-button label="日统计报表"></el-radio-button>-->
-                  </el-radio-group>
+                <!--                                      <el-radio-button label="月统计报表"></el-radio-button>-->
-                </el-col>
+                <!--                                    </el-radio-group>-->
-                <el-col :span="12">
+                <!--                </el-col>-->
-                  <div style="position: absolute; right: 30px;">
+                <!--                <el-col :span="12">-->
-                    <span style="color: #fff;"> 开始时间：</span>
+                <!--                  <div style="position: absolute; right: 30px;">-->
-                    <div style="display: inline-block;width: 200px;margin-right: 12px;">
+                <!--                    <span style="color: #fff;"> 开始时间：</span>-->
-                      <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
+                <!--                    <div style="display: inline-block;width: 200px;margin-right: 12px;">-->
-                    </div>
+                <!--                      <el-date-picker placeholder="选择日期" style="width: 100%;" type="date"></el-date-picker>-->
-                    <el-button type="primary">搜索</el-button>
+                <!--                    </div>-->
-                    <el-button>重置</el-button>
+                <!--                    <el-button type="primary">搜索</el-button>-->
-                    <el-button>导出</el-button>
+                <!--                    <el-button>重置</el-button>-->
-
+                <!--                    <el-button>导出</el-button>-->
-                  </div>
+                <!--                  </div>-->
-                </el-col>
+                <!--                </el-col>-->
-              </el-row>
+                <!--              </el-row>-->
-              <el-table :data="tableData" style="width: 100%;margin-top: 12px;"
+                <el-table :cell-style="setStyle" :data="tableData"
-                :header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }"
+                          :header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }"
-                :cell-style="setStyle">
+                          style="width: 100%;margin-top: 12px;">
-                <el-table-column prop="date1" label="设备ID">
+                  <el-table-column label="设备ID" prop="columnName">
-                </el-table-column>
+                  </el-table-column>
-                <el-table-column prop="date2" label="传感器编号">
+                  <el-table-column label="传感器编号" prop="columnKey">
-                </el-table-column>
+                  </el-table-column>
-                <el-table-column prop="date3" label="xx">
+                  <el-table-column label="alias" prop="alias">
-                </el-table-column>
+                  </el-table-column>
-                <el-table-column prop="date4" label="编号">
+                  <el-table-column label="rssi" prop="rssi">
-                </el-table-column>
+                  </el-table-column>
-                <el-table-column prop="date5" label="xx">
+                  <el-table-column label="ts" prop="ts">
-                </el-table-column>
+                  </el-table-column>
-                <el-table-column prop="date6" label="温度">
+                  <el-table-column label="value1" prop="value1">
-                </el-table-column>
+                  </el-table-column>
-                <el-table-column prop="date7" label="湿度">
+                  <el-table-column label="voltage" prop="voltage">
-                </el-table-column>
+                  </el-table-column>
-                <el-table-column prop="date8" label="时间">
+                </el-table>
-                </el-table-column>
+                <el-pagination :total="1000" background layout="prev, pager, next">
-              </el-table>
+                </el-pagination>
-              <el-pagination background layout="prev, pager, next" :total="1000">
-              </el-pagination>
-            </div>
-          </div>
-        </el-collapse-item>
-        <el-collapse-item name="2">
-          <template slot="title">
-            <div class="itemBg">
-              <div class="icon"></div>
-              <div class="icon1"></div>
-              <div class="icon2"></div>
-              <div class="title"> 大厅-摄像头</div>
-              <div class="info">
-                <div class="info1">所属区域</div>
-                <div class="info2">大厅</div>
-              </div>
-              <div class="info" style="left: 70vh;">
-                <div class="info1">位置:</div>
-                <div class="info2">深圳</div>
-              </div>
-              <div class="info" style="left: 80vh;">
-                <div class="info1">日期:</div>
-                <div class="info2">2023-01-01 00:00:00</div>
               </div>
             </div>
-          </template>
+          </el-collapse-item>
-          <div>
+        </el-collapse>
-            <div>
+      </div>
-              <el-row :gutter="24">
-                <el-col :span="12">
-                  <el-radio-group v-model="radio">
-                    <el-radio-button label="日统计报表"></el-radio-button>
-                    <el-radio-button label="月统计报表"></el-radio-button>
-                  </el-radio-group>
-                </el-col>
-                <el-col :span="12">
-                  <div style="position: absolute; right: 30px;">
-                    <span style="color: #fff;"> 开始时间：</span>
-                    <div style="display: inline-block;width: 200px;margin-right: 12px;">
-                      <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
-                    </div>
-                    <el-button type="primary">搜索</el-button>
-                    <el-button>重置</el-button>
-                    <el-button>导出</el-button>
 
-                  </div>
+      <el-collapse v-model="activeName" accordion>
-                </el-col>
+        <el-collapse-item v-for="i in bottomData">
-              </el-row>
-              <el-table :data="tableData" style="width: 100%;margin-top: 12px;"
-                :header-cell-style="{ textAlign: 'center' }"
-                :cell-style="{ textAlign: 'center',backgroundColor:'#08406f' }">
-                <el-table-column prop="date1" label="设备ID">
-                </el-table-column>
-                <el-table-column prop="date2" label="传感器编号">
-                </el-table-column>
-                <el-table-column prop="date3" label="xx">
-                </el-table-column>
-                <el-table-column prop="date4" label="编号">
-                </el-table-column>
-                <el-table-column prop="date5" label="xx">
-                </el-table-column>
-                <el-table-column prop="date6" label="温度">
-                </el-table-column>
-                <el-table-column prop="date7" label="湿度">
-                </el-table-column>
-                <el-table-column prop="date8" label="时间">
-                </el-table-column>
-              </el-table>
-              <el-pagination background layout="prev, pager, next" :total="1000">
-              </el-pagination>
-            </div>
-          </div>
-        </el-collapse-item>
-        <el-collapse-item name="3">
-          <template slot="title">
-            <div class="itemBg">
-              <div class="icon"></div>
-              <div class="icon1"></div>
-              <div class="icon2"></div>
-              <div class="title"> 大厅-摄像头</div>
-              <div class="info">
-                <div class="info1">所属区域</div>
-                <div class="info2">大厅</div>
-              </div>
-              <div class="info" style="left: 70vh;">
-                <div class="info1">位置:</div>
-                <div class="info2">深圳</div>
-              </div>
-              <div class="info" style="left: 80vh;">
-                <div class="info1">日期:</div>
-                <div class="info2">2023-01-01 00:00:00</div>
-              </div>
-            </div>
-          </template>
-          <div>
-            <div>
-              <el-row :gutter="24">
-                <el-col :span="12">
-                  <el-radio-group v-model="radio">
-                    <el-radio-button label="日统计报表"></el-radio-button>
-                    <el-radio-button label="月统计报表"></el-radio-button>
-                  </el-radio-group>
-                </el-col>
-                <el-col :span="12">
-                  <div style="position: absolute; right: 30px;">
-                    <span style="color: #fff;"> 开始时间：</span>
-                    <div style="display: inline-block;width: 200px;margin-right: 12px;">
-                      <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
-                    </div>
-                    <el-button type="primary">搜索</el-button>
-                    <el-button>重置</el-button>
-                    <el-button>导出</el-button>
-
-                  </div>
-                </el-col>
-              </el-row>
-              <el-table :data="tableData" style="width: 100%;margin-top: 12px;"
-                :header-cell-style="{ textAlign: 'center' }"
-                :cell-style="{ textAlign: 'center',backgroundColor:'#08406f' }">
-                <el-table-column prop="date1" label="设备ID">
-                </el-table-column>
-                <el-table-column prop="date2" label="传感器编号">
-                </el-table-column>
-                <el-table-column prop="date3" label="xx">
-                </el-table-column>
-                <el-table-column prop="date4" label="编号">
-                </el-table-column>
-                <el-table-column prop="date5" label="xx">
-                </el-table-column>
-                <el-table-column prop="date6" label="温度">
-                </el-table-column>
-                <el-table-column prop="date7" label="湿度">
-                </el-table-column>
-                <el-table-column prop="date8" label="时间">
-                </el-table-column>
-              </el-table>
-              <el-pagination background layout="prev, pager, next" :total="1000">
-              </el-pagination>
-            </div>
-          </div>
-        </el-collapse-item>
-        <el-collapse-item name="4">
           <template slot="title">
             <div class="itemBg">
               <div class="icon"></div>
               <div class="icon1"></div>
               <div class="icon2"></div>
-              <div class="title"> 大厅-摄像头</div>
+              <div class="title"> {{ i.deviceName }}</div>
               <div class="info">
                 <div class="info1">所属区域</div>
                 <div class="info2">大厅</div>
@@ -229,52 +95,6 @@
               </div>
             </div>
           </template>
-          <div>
-            <div>
-              <el-row :gutter="24">
-                <el-col :span="12">
-                  <el-radio-group v-model="radio">
-                    <el-radio-button label="日统计报表"></el-radio-button>
-                    <el-radio-button label="月统计报表"></el-radio-button>
-                  </el-radio-group>
-                </el-col>
-                <el-col :span="12">
-                  <div style="position: absolute; right: 30px;">
-                    <span style="color: #fff;"> 开始时间：</span>
-                    <div style="display: inline-block;width: 200px;margin-right: 12px;">
-                      <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
-                    </div>
-                    <el-button type="primary">搜索</el-button>
-                    <el-button>重置</el-button>
-                    <el-button>导出</el-button>
-
-                  </div>
-                </el-col>
-              </el-row>
-              <el-table :data="tableData" style="width: 100%;margin-top: 12px;"
-                :header-cell-style="{ textAlign: 'center' }"
-                :cell-style="{ textAlign: 'center',backgroundColor:'#08406f' }">
-                <el-table-column prop="date1" label="设备ID">
-                </el-table-column>
-                <el-table-column prop="date2" label="传感器编号">
-                </el-table-column>
-                <el-table-column prop="date3" label="xx">
-                </el-table-column>
-                <el-table-column prop="date4" label="编号">
-                </el-table-column>
-                <el-table-column prop="date5" label="xx">
-                </el-table-column>
-                <el-table-column prop="date6" label="温度">
-                </el-table-column>
-                <el-table-column prop="date7" label="湿度">
-                </el-table-column>
-                <el-table-column prop="date8" label="时间">
-                </el-table-column>
-              </el-table>
-              <el-pagination background layout="prev, pager, next" :total="1000">
-              </el-pagination>
-            </div>
-          </div>
         </el-collapse-item>
       </el-collapse>
     </div>
@@ -282,6 +102,11 @@
 </template>
 
 <script>
+import {
+  getDeviceInfo,
+  getHistoryData,
+  getLinkDevices
+} from '@/api/board/senso'
 import BoardTopNav from '@/components/BoardTopNav'
 
 export default {
@@ -290,55 +115,42 @@ export default {
   },
   data() {
     return {
+      topData: {},
+      bottomData: [],
       radio: '日统计报表',
-      tableData: [{
+      tableData: []
-        date1: '1233454576',
-        date2: '1233454576',
-        date3: 'DFHDGHJK',
-        date4: '12',
-        date5: 'QSD',
-        date6: '111',
-        date7: '222',
-        date8: new Date().getDate(),
-      }, {
-        date1: '1233454576',
-        date2: '1233454576',
-        date3: 'DFHDGHJK',
-        date4: '12',
-        date5: 'QSD',
-        date6: '111',
-        date7: '222',
-        date8: new Date().getDate(),
-      }, {
-        date1: '1233454576',
-        date2: '1233454576',
-        date3: 'DFHDGHJK',
-        date4: '12',
-        date5: 'QSD',
-        date6: '111',
-        date7: '222',
-        date8: new Date().getDate(),
-      }, {
-        date1: '1233454576',
-        date2: '1233454576',
-        date3: 'DFHDGHJK',
-        date4: '12',
-        date5: 'QSD',
-        date6: '111',
-        date7: '222',
-        date8: new Date().getDate(),
-      }]
     }
   },
   mounted() {
+    this.setDeviceInfo()
+    this.setHistoryData()
+    this.setLinkDevices()
   },
   methods: {
     setStyle(e) {
       if (e.rowIndex % 2 === 0) {
         return {textAlign: 'center', backgroundColor: '#08406f', color: '#05aaba'}
-      }else{
+      } else {
         return {textAlign: 'center', backgroundColor: '#063468', color: '#05aaba'}
       }
+    },
+    async setDeviceInfo() {
+      const {data} = await getDeviceInfo()
+      this.topData = data
+    },
+    async setHistoryData() {
+      const {data} = await getHistoryData()
+      this.tableData = data.historyData.rows.map((e, i) => {
+        return {
+          ...e,
+          ...data.deviceDataColumns[i]
+        }
+      })
+    },
+    async setLinkDevices() {
+      const {data} = await getLinkDevices()
+      console.log(data)
+      this.bottomData = data
     }
   }
 };
@@ -361,37 +173,43 @@ export default {
   height: 87%;
   overflow: auto;
 
-  /deep/.el-collapse-item__wrap {
+  /deep/ .el-collapse-item__wrap {
     background-color: #0000;
     border-color: #0000;
   }
 
-  /deep/.el-table {
+  /deep/ .el-table {
     background-color: #FFF0 !important;
     color: #fff;
   }
 
-  /deep/.el-table tr {
+  /deep/ .el-table tr {
     background-color: #FFF0 !important;
   }
-  /deep/.el-table th.el-table__cell.is-leaf,{
+
+  /deep/ .el-table th.el-table__cell.is-leaf, {
     border-color: #0000;
   }
-  /deep/.el-table::before, .el-table--group::after, .el-table--border::after{
+
+  /deep/ .el-table::before, .el-table--group::after, .el-table--border::after {
     background-color: #0000;
   }
-  /deep/.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
+
+  /deep/ .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
     background-color: #0000;
   }
-  /deep/.el-collapse-item__header {
+
+  /deep/ .el-collapse-item__header {
     background-color: #0000;
     border-color: #0000;
     height: auto;
   }
-  /deep/.el-collapse {
+
+  /deep/ .el-collapse {
     border-color: #0000;
   }
-  /deep/ .el-table td.el-table__cell{
+
+  /deep/ .el-table td.el-table__cell {
     border-color: #0000;
   }