上传电子围栏

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

@@ -4,7 +4,7 @@ import request from '@/utils/request'
 export function alarmStats(query) {
   return request({
     // baseURL:'/monitoring-api',
-    url: '/business/monitorPlatform/alarmStats',
+    url: '/business/monitorPlatform/alarmStats/1',
     method: 'get',
   })
 }
@@ -12,7 +12,23 @@ export function alarmStats(query) {
 export function subDevice(query) {
   return request({
     // baseURL:'/monitoring-api',
-    url: '/business/monitorPlatform/SubDevice',
-    method: 'post',
+    url: '/business/monitorPlatform/subDevice/1',
+    method: 'get',
+  })
+}
+// 左下
+export function getAlarmInfos(query) {
+  return request({
+    // baseURL:'/monitoring-api',
+    url: '/business/monitorPlatform/getAlarmInfos',
+    method: 'get',
+  })
+}
+// 右下
+export function ElectronicNumVo(query) {
+  return request({
+    // baseURL:'/monitoring-api',
+    url: '/business/monitorPlatform/ElectronicNumVo/1',
+    method: 'get',
   })
 }

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

@@ -26,3 +26,21 @@ export function allNums(query) {
     method: 'get',
   })
 }
+
+// 右下
+export function getAlarmInfos(query) {
+  return request({
+    // baseURL:'/monitoring-api',
+    url: '/business/monitorPlatform/getAlarmInfos',
+    method: 'get',
+  })
+}
+
+// 右上
+export function getDeviceOperations(query) {
+  return request({
+    // baseURL:'/monitoring-api',
+    url: '/business/monitorPlatform/getDeviceOperations/1',
+    method: 'get',
+  })
+}

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

@@ -4,7 +4,34 @@ import request from '@/utils/request'
 export function sceneAllNums(query) {
   return request({
     // baseURL:'/monitoring-api',
-    url: '/business/monitorPlatform/sceneAllNums',
+    url: '/business/monitorPlatform/sceneAllNums/1',
+    method: 'get',
+  })
+}
+
+// 右
+export function getLimitSubMonitorUnit(query) {
+  return request({
+    // baseURL:'/monitoring-api',
+    url: '/business/monitorPlatform/limitSubMonitorUnit/1',
+    method: 'get',
+  })
+}
+
+// 左中
+export function getAlarmCountGroupAlarmType(query) {
+  return request({
+    // baseURL:'/monitoring-api',
+    url: '/business/monitorPlatform/getAlarmCountGroupAlarmType/1',
+    method: 'get',
+  })
+}
+
+// 左下
+export function getAlarmInfos(query) {
+  return request({
+    // baseURL:'/monitoring-api',
+    url: '/business/monitorPlatform/getAlarmInfos',
     method: 'get',
   })
 }

ruoyi-ui/src/main.js

@@ -67,7 +67,7 @@ Vue.component('ImagePreview', ImagePreview)
 AMapLoader.load({
   'key': '268909dc36fd438908a64ebe057bfb17',
   'version': '2.0',
-  'plugins': ['AMap.Scale','AMap.GeoJSON']
+  'plugins': ['AMap.Scale','AMap.GeoJSON','AMap.MarkerClusterer','AMap.PolygonEditor','AMap.Polygon','AMap.CircleEditor']
 }).then((AMap) => {
   Vue.use(AMap)
 })

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

@@ -19,7 +19,7 @@
         </div>
       </div>
       <vue-seamless-scroll
-        :class-option="table1Data"
+        :class-option="{...chart1TableOption,limitMoveNum:10}"
         :data="table1Data"
         class="case-item"
         style="height: 84%;overflow: hidden;"
@@ -55,11 +55,11 @@
       <div class="info1">监控单元数量</div>
       <div class="info2">设备数量</div>
       <div class="info3">在线设备数量</div>
-      <div class="num1">20</div>
-      <div class="num2">20</div>
-      <div class="num3">20</div>
+      <div class="num1">{{ num1 }}</div>
+      <div class="num2">{{ num2 }}</div>
+      <div class="num3">{{ num3 }}</div>
     </div>
-    <div class="map" id="map"></div>
+    <div id="map" class="map"></div>
   </div>
 </template>
 
@@ -70,12 +70,15 @@ import vueSeamlessScroll from "vue-seamless-scroll";
 import * as echarts from 'echarts';
 import {
   alarmStats,
-  subDevice
+  subDevice,
+  getAlarmInfos,
+  ElectronicNumVo
 } from '@/api/board/GPS'
-
-let map = null
 import red from '@/assets/board/GPS/red.png'
 import green from '@/assets/board/GPS/green.png'
+
+let map = null
+let polyEditor = null
 export default {
   components: {
     Chart,
@@ -84,28 +87,19 @@ export default {
   },
   data() {
     return {
-      chart1Data: [
-        {
-          value: 12,
-          name: '监控单元1',
-        },
-        {
-          value: 23,
-          name: '监控单元2',
-        },
-        {
-          value: 34,
-          name: '监控单元3',
-        },
-        {
-          value: 45,
-          name: '监控单元4',
-        },
-        {
-          value: 55,
-          name: '监控单元5',
-        }
-      ],
+      num1: 0,
+      num2: 0,
+      num3: 0,
+      chart1TableOption: {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 0,
+      },
       chart1Option: {
         grid: {
           left: "0%",
@@ -138,92 +132,48 @@ export default {
           boundaryGap: [0, 0.01],
         },
       },
-      table1Data: [
-        {
-          value1: '001',
-          value2: '高温预警',
-          value3: '车间',
-        },
-        {
-          value1: '001',
-          value2: '高温预警',
-          value3: '车间',
-        },
-        {
-          value1: '001',
-          value2: '高温预警',
-          value3: '车间',
-        },
-        {
-          value1: '001',
-          value2: '高温预警',
-          value3: '车间',
-        },
-        {
-          value1: '001',
-          value2: '高温预警',
-          value3: '车间',
-        },
-        {
-          value1: '001',
-          value2: '高温预警',
-          value3: '车间',
-        },
-        {
-          value1: '001',
-          value2: '高温预警',
-          value3: '车间',
-        },
-        {
-          value1: '001',
-          value2: '高温预警',
-          value3: '车间',
-        },
-        {
-          value1: '001',
-          value2: '高温预警',
-          value3: '车间',
-        },
-        {
-          value1: '001',
-          value2: '高温预警',
-          value3: '车间',
-        },
-        {
-          value1: '001',
-          value2: '高温预警',
-          value3: '车间',
-        },
-      ]
+      table1Data: []
     }
   },
   mounted() {
     this.createMap()
-    this.setMarker()
     this.getAlarmStats()
+    this.getAubDevice()
+    this.setAlarmInfos()
+    this.setElectronicNumVo()
   },
   methods: {
-    createMap(){
+    createMap() {
       map = new AMap.Map('map', {
         zoom: 11,
-        zooms: [8, 20],
         center: [113.4, 23.35],
       });
     },
-    setMarker(){
-      var marker = new AMap.Marker({
-        position: [113.2, 23.35],
+    setMarker(position) {
+      let marker =new AMap.Marker({
+        position: position,
         icon: red,
-      });
-      var marker1 = new AMap.Marker({
-        position: [113.6, 23.35],
-        icon: green,
-      });
+      })
       map.add(marker)
-      map.add(marker1)
+      map.setFitView()
+    },
+    setCircle(center,radius) {
+      let circle =new AMap.Circle({
+        center,
+        radius,
+        borderWeight: 3,
+        strokeColor: "#FF33FF",
+        strokeWeight: 6,
+        strokeOpacity: 0.2,
+        fillOpacity: 0.4,
+        strokeDasharray: [10, 10],
+        fillColor: '#1791fc',
+      })
+      map.add(circle);
+      map.setFitView()
     },
-    async getAlarmStats(){
-      const {rows:data} = await alarmStats()
+    async getAlarmStats() {
+      const {data} = await alarmStats()
       let option1 = {
         ...this.chart1Option,
         yAxis: {
@@ -270,9 +220,35 @@ export default {
       }
       this.$refs.chart1.setData(option1)
     },
-    async getAubDevice(){
+    async getAubDevice() {
       let data = await subDevice()
+      this.num1 = data.deviceNum
+      this.num2 = data.onlineDeviceNum
+      this.num3 = data.subSum
+    },
+    async setAlarmInfos() {
+      const {rows: data} = await getAlarmInfos()
+      this.table1Data = data.map((e, i) => {
+        return {
+          value1: i,
+          value2: '高温预警',
+          value3: e.monitorUnitName,
+        }
+      })
+    },
+    async setElectronicNumVo() {
+      const {data} = await ElectronicNumVo()
       console.log(data)
+      data.forEach(e => {
+        if (e.areaPoints?.length > 0) {
+          e.areaPoints.forEach(val => {
+            this.setMarker([val.longitude,val.latitude])
+          })
+        }
+        if(e.centerPoint){
+          this.setCircle([e.centerPoint.longitude,e.centerPoint.latitude],e.radius)
+        }
+      })
     }
   }
 };
@@ -387,7 +363,8 @@ export default {
   font-size: 1.4vw;
   color: #fff;
 }
-.map{
+
+.map {
   position: absolute;
   top: 28%;
   left: 31%;

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

@@ -39,11 +39,11 @@
             </div>
             <div
               class="scrollTable">
-              {{ item.value2 }}
+              {{ item.value }}
             </div>
             <div
               class="scrollTable">
-              {{ item.value }}
+              {{ item.value2 }}
             </div>
           </div>
         </div>
@@ -83,7 +83,10 @@
     </div>
     <div>
       <div class="centerInfo">传感器数量</div>
-      <div class="centerInfo" style="font-weight:bold;top:19.3%;left: 42.5%;font-size: 2vw;">{{ centerNum.subSum }}</div>
+      <div class="centerInfo" style="font-weight:bold;top:19.3%;left: 42.5%;font-size: 2vw;">{{
+          centerNum.subSum
+        }}
+      </div>
       <div class="centerInfo" style="left: 56%">监控单元数量</div>
       <div class="centerInfo" style="font-weight:bold;top:19.3%;left: 66%;font-size: 2vw;">{{ centerNum.sum }}</div>
     </div>
@@ -105,7 +108,7 @@
         </div>
       </div>
       <vue-seamless-scroll
-        :class-option="chart1TableOption"
+        :class-option="{...chart1TableOption,limitMoveNum:10}"
         :data="table1Data"
         class="case-item"
         style="height: calc(100% - 33px);overflow: hidden;"
@@ -142,18 +145,21 @@ import * as echarts from 'echarts';
 import {
   monitorUnitPercentage,
   monitorPercentage,
-  allNums
+  allNums,
+  getAlarmInfos,
+  getDeviceOperations
 } from '@/api/board/index'
 
 export default {
   components: {
     vueSeamlessScroll,
     Chart,
-    BoardTopNav
+    BoardTopNav,
+
   },
   data() {
     return {
-      centerNum:{},
+      centerNum: {},
       chart1Option: {
         tooltip: {},
         angleAxis: {
@@ -191,28 +197,7 @@ export default {
         singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
         waitTime: 0,
       },
-      chart2Data: [
-        {
-          value: 111,
-          name: '无源温度传感器',
-        },
-        {
-          value: 111,
-          name: '有源温度传感器',
-        },
-        {
-          value: 111,
-          name: '烟雾传感器',
-        },
-        {
-          value: 111,
-          name: '温湿度传感器',
-        },
-        {
-          value: 111,
-          name: 'CO传感器',
-        }
-      ],
+      chart2Data: [],
       chart2Option: {
         color: ["#22acfd", "#22fe97", "#f9e728", "#ff922b", "#ed1814"],
         legend: {
@@ -263,29 +248,7 @@ export default {
           },
         ],
       },
-      inTransitNum: 1999,
-      chart3Data: [
-        {
-          date: '10-01',
-          value: '100',
-        },
-        {
-          date: '10-02',
-          value: '200',
-        },
-        {
-          date: '10-03',
-          value: '100',
-        },
-        {
-          date: '10-04',
-          value: '300',
-        },
-        {
-          date: '10-05',
-          value: '200',
-        },
-      ],
+      inTransitNum: 0,
       chart3Option: {
         tooltip: {
           trigger: "axis",
@@ -320,126 +283,19 @@ export default {
           },
         },
       },
-      table1Data: [
-        {
-          no: '001',
-          type: '高温警告',
-          location: '车间',
-        },
-        {
-          no: '001',
-          type: '高温警告',
-          location: '车间',
-        },
-        {
-          no: '001',
-          type: '高温警告',
-          location: '车间',
-        },
-        {
-          no: '001',
-          type: '高温警告',
-          location: '车间',
-        },
-        {
-          no: '001',
-          type: '高温警告',
-          location: '车间',
-        },
-        {
-          no: '001',
-          type: '高温警告',
-          location: '车间',
-        },
-        {
-          no: '001',
-          type: '高温警告',
-          location: '车间',
-        },
-        {
-          no: '001',
-          type: '高温警告',
-          location: '车间',
-        },
-        {
-          no: '001',
-          type: '高温警告',
-          location: '车间',
-        },
-        {
-          no: '001',
-          type: '高温警告',
-          location: '车间',
-        },
-        {
-          no: '001',
-          type: '高温警告',
-          location: '车间',
-        },
-      ]
+      table1Data: []
     }
   },
   mounted() {
-    let option3 = {
-      ...this.chart3Option,
-      xAxis: {
-        boundaryGap: false,
-        type: "category",
-        data: this.chart3Data.map(e => e.date),
-
-        splitLine: {
-          show: true,
-          lineStyle: {
-            type: "dashed",
-            color: "#ccc3",
-          },
-        },
-        axisLine: {
-          lineStyle: {
-            color: "#999",
-          },
-        },
-      },
-      series: [
-        {
-          name: "",
-          type: "line",
-          data: this.chart3Data.map(e => e.value),
-          color: "#00dae0",
-          areaStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  {
-                    offset: 0,
-                    color: "#00dae033",
-                  },
-                  {
-                    offset: 1,
-                    color: "rgba(0,202,149,0)",
-                  },
-                ],
-                false
-              ),
-              shadowColor: "rgba(0,202,149, 0.9)",
-              shadowBlur: 20,
-            },
-          },
-        },
-      ],
-    }
-    this.$refs.chart3.setData(option3)
     this.setChart1()
     this.setChart2()
     this.setAllNums()
+    this.setTable3()
+    this.setDeviceOperations()
   },
   methods: {
     async setChart1() {
-      const {rows: data} = await monitorUnitPercentage()
+      const {rows: data} = await monitorPercentage()
       let option1 = {
         ...this.chart1Option,
         series: [
@@ -447,10 +303,10 @@ export default {
             type: "bar",
             data: data.map((e, i) => {
               return {
-                value: e.percentage,
-                name: e.deviceModeName,
+                value: parseFloat(e.percentage),
+                name: e.sceneName,
                 itemStyle: {
-                  color: this.chart1Color[i]
+                  color: this.chart1Color[this.chart1Color.length % i]
                 }
               }
             }),
@@ -466,29 +322,110 @@ export default {
         return {
           value: e.sum || 0,
           value2: e.err || 0,
-          name: e.deviceModeName || '',
+          name: e.sceneName || '',
 
         }
       })
     },
     async setChart2() {
-      const {rows: data} = await monitorPercentage()
+      const {rows: data} = await monitorUnitPercentage()
       let chart2Num = eval(data.map(e => e.sum).join("+"));
       let option2 = {
         ...this.chart2Option,
         dataset: {
           source: [
             ["group", "占比"],
-            ...data.map(e => [e.sceneName, (e.sum / chart2Num) * 100])
+            ...data.map(e => [e.deviceModeName, parseFloat(e.percentage)])
           ],
         }
       }
       this.$refs.chart2.setData(option2)
+      this.chart2Data = data.map(e => {
+        return {
+          value: e.sum,
+          name: e.deviceModeName,
+
+        }
+      })
     },
     async setAllNums() {
       const data = await allNums()
       this.centerNum = data
-    }
+    },
+    async setTable3(){
+      const {rows:data} = await getAlarmInfos()
+      this.table1Data = data.map((e,i) => {
+        return {
+          no: i,
+          type: '高温警告',
+          location: e.monitorUnitName,
+
+        }
+      })
+    },
+    async setDeviceOperations(){
+      const {data:data} = await getDeviceOperations()
+      console.log(data)
+      let x = Object.keys(data)
+      let y = Object.values(data)
+      this.inTransitNum = y.reduce((a,b)=> {
+        return a + b
+      },0)
+
+      let option3 = {
+        ...this.chart3Option,
+        xAxis: {
+          boundaryGap: false,
+          type: "category",
+          data: x,
+
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: "#ccc3",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#999",
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "line",
+            data: y,
+            color: "#00dae0",
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#00dae033",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,202,149,0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,202,149, 0.9)",
+                shadowBlur: 20,
+              },
+            },
+          },
+        ],
+      }
+      this.$refs.chart3.setData(option3)
+    },
   }
 }
 ;

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

@@ -1,518 +1,447 @@
 <template>
-    <div class="container">
-      <BoardTopNav nowMenu="2"></BoardTopNav>
-        <div class="num1">30</div>
-        <div class="num2">216</div>
-        <div class="num3">0</div>
-        <div class="num4">0</div>
-        <div class="num5">0</div>
-        <div class="num6">0</div>
-        <div class="num7">0</div>
-        <div class="num8">0</div>
-        <div class="title1">监控单元</div>
-        <div class="title2">传感器</div>
-        <div class="title3">设备高温</div>
-        <div class="title4">设备振动</div>
-        <div class="title5">烟雾火情</div>
-        <div class="title6">环境大风</div>
-        <div class="title7">柜内温度</div>
-        <div class="title8">柜内冰浸</div>
-        <div class="title9">告警信息</div>
-        <div class="title10">监控单元</div>
-
-        <div class="table1">
-            <div style="background-color: #094170">
-                <div class="scrollTable" style="font-weight: bold;width: 8%">
-                    告警编号
-                </div>
-                <div class="scrollTable" style="font-weight: bold;width: 8%">
-                    告警类型
-                </div>
-                <div class="scrollTable" style="font-weight: bold;width: 15%">
-                    告警单元
-                </div>
-                <div class="scrollTable" style="font-weight: bold;width: 30%">
-                    告警信息
-                </div>
-                <div class="scrollTable" style="font-weight: bold;width: 11%">
-                    告警位置
-                </div>
-                <div class="scrollTable" style="font-weight: bold;width: 20%">
-                    告警时间
-                </div>
-                <div class="scrollTable" style="font-weight: bold;width: 8%">
-                    处理情况
-                </div>
-            </div>
-            <vue-seamless-scroll :class-option="chart1TableOption" :data="table1Data" class="case-item"
-                style="height: calc(100% - 33px);overflow: hidden;">
-                <div v-for="(item, index) in table1Data" :key="index">
-                    <div :style='"background-color:" + ((index % 2 === 0) ? "#053460" : "#032d57")'>
-                        <div class="scrollTable" style="width: 8%">
-                            {{ item.data1 }}
-                        </div>
-                        <div class="scrollTable" style="width: 8%">
-                            {{ item.data2 }}
-                        </div>
-                        <div class="scrollTable" style="width: 15%">
-                            {{ item.data3 }}
-                        </div>
-                        <div class="scrollTable" style="width: 30%">
-                            {{ item.data4 }}
-                        </div>
-                        <div class="scrollTable" style="width: 11%">
-                            {{ item.data5 }}
-                        </div>
-                        <div class="scrollTable" style="width: 20%">
-                            {{ item.data6 }}
-                        </div>
-                        <div class="scrollTable" style="width: 8%">
-                            <span style="color: #67C23A;">已处理</span>
-                        </div>
-                    </div>
-                </div>
-            </vue-seamless-scroll>
+  <div class="container">
+    <BoardTopNav nowMenu="2"></BoardTopNav>
+    <div class="num1">{{ num1 }}</div>
+    <div class="num2">{{ num2 }}</div>
+    <div class="title1">监控单元</div>
+    <div class="title2">传感器</div>
+    <div v-for="(i,k) in alarmCountGroupAlarmType" :class="'num'+(k+3)">
+      {{ i.alarmCount }}
+    </div>
+    <div v-for="(i,k) in alarmCountGroupAlarmType" :class="'title'+(k+3)">
+      {{ i.alarmTypeName }}
+    </div>
+
+    <div class="table1">
+      <div style="background-color: #094170">
+        <div class="scrollTable" style="font-weight: bold;width: 8%">
+          告警编号
+        </div>
+        <div class="scrollTable" style="font-weight: bold;width: 8%">
+          告警类型
+        </div>
+        <div class="scrollTable" style="font-weight: bold;width: 15%">
+          告警单元
+        </div>
+        <div class="scrollTable" style="font-weight: bold;width: 30%">
+          告警信息
+        </div>
+        <div class="scrollTable" style="font-weight: bold;width: 11%">
+          告警位置
+        </div>
+        <div class="scrollTable" style="font-weight: bold;width: 20%">
+          告警时间
+        </div>
+        <div class="scrollTable" style="font-weight: bold;width: 8%">
+          处理情况
         </div>
-        <div class="right">
-            <el-row>
-                <el-col :span="12">
-                    <div class="item">
-                        <div class="titleBg"></div>
-                        <div class="title">
-                            <span style="margin-right: 28px;"> 变压器 </span>
-                            <el-tag type="success">正常</el-tag>
-                        </div>
-                        <div class="img"></div>
-                    </div>
-                </el-col>
-                <el-col :span="12">
-                    <div class="item">
-                        <div class="titleBg"></div>
-                        <div class="title">
-                            <span style="margin-right: 28px;"> 变压器 </span>
-                            <el-tag type="success">正常</el-tag>
-                        </div>
-                        <div class="img"></div>
-                    </div>
-                </el-col>
-            </el-row>
-            <el-row>
-                <el-col :span="12">
-                    <div class="item">
-                        <div class="titleBg"></div>
-                        <div class="title">
-                            <span style="margin-right: 28px;"> 变压器 </span>
-                            <el-tag type="success">正常</el-tag>
-                        </div>
-                        <div class="img"></div>
-                    </div>
-                </el-col>
-                <el-col :span="12">
-                    <div class="item">
-                        <div class="titleBg"></div>
-                        <div class="title">
-                            <span style="margin-right: 28px;"> 变压器 </span>
-                            <el-tag type="success">正常</el-tag>
-                        </div>
-                        <div class="img"></div>
-                    </div>
-                </el-col>
-            </el-row>
-            <div class="pagination">
-                <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000">
-                </el-pagination>
+      </div>
+      <vue-seamless-scroll :class-option="{...chart1TableOption,limitMoveNum:8}" :data="table1Data" class="case-item"
+                           style="height: calc(100% - 33px);overflow: hidden;">
+        <div v-for="(item, index) in table1Data" :key="index">
+          <div :style='"background-color:" + ((index % 2 === 0) ? "#053460" : "#032d57")'>
+            <div class="scrollTable" style="width: 8%">
+              {{ item.data1 }}
             </div>
+            <div class="scrollTable" style="width: 8%">
+              {{ item.data2 }}
+            </div>
+            <div class="scrollTable" style="width: 15%">
+              {{ item.data3 }}
+            </div>
+            <div class="scrollTable" style="width: 30%">
+              {{ item.data4 }}
+            </div>
+            <div class="scrollTable" style="width: 11%">
+              {{ item.data5 }}
+            </div>
+            <div class="scrollTable" style="width: 20%">
+              {{ item.data6 }}
+            </div>
+            <div class="scrollTable" style="width: 8%">
+              <span style="color: #67C23A;">已处理</span>
+            </div>
+          </div>
         </div>
+      </vue-seamless-scroll>
+    </div>
+    <div class="right">
+      <el-row>
+        <el-col v-for="i in tableData" :key="i.monitorUnitId" :span="12">
+          <div class="item">
+            <div class="titleBg"></div>
+            <div class="title">
+              <span style="margin-right: 28px;"> {{ i.monitorUnitName }} </span>
+              <el-tag :type="i.alarmStatus === 1 ?'success' : 'danger'">{{ i.alarmStatus === 1 ? '正常' : '异常' }}</el-tag>
+            </div>
+            <div class="img"></div>
+          </div>
+        </el-col>
+      </el-row>
+      <div class="pagination">
+        <el-pagination :page-size="pageSize" :pager-count="11" :total="total" layout="prev, pager, next"
+                       @current-change="currentChange">
+        </el-pagination>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import vueSeamlessScroll from "vue-seamless-scroll";
 import BoardTopNav from '@/components/BoardTopNav'
 import {
-  sceneAllNums
+  sceneAllNums,
+  getLimitSubMonitorUnit,
+  getAlarmCountGroupAlarmType,
+  getAlarmInfos
 } from '@/api/board/smartScene'
 
 export default {
-    components: {
-        vueSeamlessScroll,
-      BoardTopNav
+  components: {
+    vueSeamlessScroll,
+    BoardTopNav
+  },
+  data() {
+    return {
+      num1: 0,
+      num2: 0,
+      alarmCountGroupAlarmType: [],
+      LimitSubMonitorUnitList: [],
+      tableData: [],
+      pageSize: 4,
+      total: 1,
+      chart1TableOption: {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 0,
+      },
+      table1Data: []
+    }
+  },
+  mounted() {
+    this.setAllNum()
+    this.setLimitSubMonitorUnit()
+    this.setAlarmCountGroupAlarmType()
+    this.setAlarmInfos()
+  },
+  methods: {
+    async setAllNum() {
+      const {subSum, sum} = await sceneAllNums()
+      this.num1 = subSum
+      this.num2 = sum
     },
-    data() {
-        return {
-            table1Data: [
-                {
-                    data1: '001',
-                    data2: '越限',
-                    data3: '123123',
-                    data4: '无线检测 检测值为 21° - 25°',
-                    data5: '设备11233',
-                    data6: '2021.01.01 00:00:00',
-                },
-                {
-                    data1: '001',
-                    data2: '越限',
-                    data3: '123123',
-                    data4: '无线检测 检测值为 21° - 25°',
-                    data5: '设备11233',
-                    data6: '2021.01.01 00:00:00',
-                },
-                {
-                    data1: '001',
-                    data2: '越限',
-                    data3: '123123',
-                    data4: '无线检测 检测值为 21° - 25°',
-                    data5: '设备11233',
-                    data6: '2021.01.01 00:00:00',
-                },
-                {
-                    data1: '001',
-                    data2: '越限',
-                    data3: '123123',
-                    data4: '无线检测 检测值为 21° - 25°',
-                    data5: '设备11233',
-                    data6: '2021.01.01 00:00:00',
-                },
-                {
-                    data1: '001',
-                    data2: '越限',
-                    data3: '123123',
-                    data4: '无线检测 检测值为 21° - 25°',
-                    data5: '设备11233',
-                    data6: '2021.01.01 00:00:00',
-                },
-                {
-                    data1: '001',
-                    data2: '越限',
-                    data3: '123123',
-                    data4: '无线检测 检测值为 21° - 25°',
-                    data5: '设备11233',
-                    data6: '2021.01.01 00:00:00',
-                },
-                {
-                    data1: '001',
-                    data2: '越限',
-                    data3: '123123',
-                    data4: '无线检测 检测值为 21° - 25°',
-                    data5: '设备11233',
-                    data6: '2021.01.01 00:00:00',
-                },
-                {
-                    data1: '001',
-                    data2: '越限',
-                    data3: '123123',
-                    data4: '无线检测 检测值为 21° - 25°',
-                    data5: '设备11233',
-                    data6: '2021.01.01 00:00:00',
-                },
-                {
-                    data1: '001',
-                    data2: '越限',
-                    data3: '123123',
-                    data4: '无线检测 检测值为 21° - 25°',
-                    data5: '设备11233',
-                    data6: '2021.01.01 00:00:00',
-                },
-                {
-                    data1: '001',
-                    data2: '越限',
-                    data3: '123123',
-                    data4: '无线检测 检测值为 21° - 25°',
-                    data5: '设备11233',
-                    data6: '2021.01.01 00:00:00',
-                },
-                {
-                    data1: '001',
-                    data2: '越限',
-                    data3: '123123',
-                    data4: '无线检测 检测值为 21° - 25°',
-                    data5: '设备11233',
-                    data6: '2021.01.01 00:00:00',
-                },
-            ]
-        }
+    async setLimitSubMonitorUnit() {
+      const data = await getLimitSubMonitorUnit()
+      this.LimitSubMonitorUnitList = data.rows
+      this.tableData = data.rows.slice(0, 4)
+      this.total = data.total
     },
-    mounted() {
-      this.setAllNum()
+    currentChange(e) {
+      this.tableData = this.LimitSubMonitorUnitList.slice(4 * (e - 1), 4 * (e - 1) + 4)
     },
-    methods: {
-     async setAllNum(){
-        const data = await sceneAllNums()
-       console.log(data)
-      }
+    async setAlarmCountGroupAlarmType() {
+      let {data: data} = await getAlarmCountGroupAlarmType()
+      data.sort((a, b) => {
+        return b.alarmCount - a.alarmCount
+      })
+      data = data.slice(0, 6)
+      this.alarmCountGroupAlarmType = data
+    },
+    async setAlarmInfos() {
+      const {rows: data} = await getAlarmInfos()
+      console.log(data)
+      this.table1Data = data.map((e,i)=>{
+        return {
+          data1: i,
+          data2: e.alarmLevelName,
+          data3: e.alarmTypeName,
+          data4: '无线检测 检测值为 21° - 25°',
+          data5: e.monitorUnitName,
+          data6: '2021.01.01 00:00:00',
+        }
+      })
     }
+  }
 };
 </script>
 <style lang="less" scoped>
 .container {
-    background-image: url("~@/assets/board/smartScene/bg.jpg");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 100%;
-    height: calc(100vh);
-    position: relative;
+  background-image: url("~@/assets/board/smartScene/bg.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: calc(100vh);
+  position: relative;
 }
 
 .menu {
-    background-image: url("~@/assets/board/common/subheadClick1.png");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    position: absolute;
-    width: 8vw;
-    height: 1.66vw;
-    top: 3.8%;
-    line-height: 1.66vw;
-    font-size: 0.8vw;
-    color: #d4d4d4;
-    text-align: center;
+  background-image: url("~@/assets/board/common/subheadClick1.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  width: 8vw;
+  height: 1.66vw;
+  top: 3.8%;
+  line-height: 1.66vw;
+  font-size: 0.8vw;
+  color: #d4d4d4;
+  text-align: center;
 }
 
 .menu .el-dropdown {
-    font-size: 0.8vw;
-    color: #d4d4d4;
+  font-size: 0.8vw;
+  color: #d4d4d4;
 }
 
 .menuClick {
-    background-image: url("~@/assets/board/common/subheadClick.png");
-    color: #f3f3f3;
+  background-image: url("~@/assets/board/common/subheadClick.png");
+  color: #f3f3f3;
 }
 
 .num1 {
-    position: absolute;
-    top: 21%;
-    left: 18%;
-    transform: translate(-50%, -50%);
-    font-size: 3vw;
-    color: #15d654;
+  position: absolute;
+  top: 21%;
+  left: 18%;
+  transform: translate(-50%, -50%);
+  font-size: 3vw;
+  color: #15d654;
 }
 
 .num2 {
-    position: absolute;
-    top: 21%;
-    left: 33%;
-    transform: translate(-50%, -50%);
-    font-size: 3vw;
-    color: #00fff0;
+  position: absolute;
+  top: 21%;
+  left: 33%;
+  transform: translate(-50%, -50%);
+  font-size: 3vw;
+  color: #00fff0;
 }
 
 .num3 {
-    position: absolute;
-    top: 52%;
-    left: 7.5%;
-    transform: translate(-50%, -50%);
-    font-size: 2vw;
-    color: #d73827;
+  position: absolute;
+  top: 52%;
+  left: 7.5%;
+  transform: translate(-50%, -50%);
+  font-size: 2vw;
+  color: #d73827;
 }
 
 .num4 {
-    position: absolute;
-    top: 52%;
-    left: 15%;
-    transform: translate(-50%, -50%);
-    font-size: 2vw;
-    color: #1ef16d;
+  position: absolute;
+  top: 52%;
+  left: 15%;
+  transform: translate(-50%, -50%);
+  font-size: 2vw;
+  color: #1ef16d;
 }
 
 .num5 {
-    position: absolute;
-    top: 52%;
-    left: 22.5%;
-    transform: translate(-50%, -50%);
-    font-size: 2vw;
-    color: #f2711f;
+  position: absolute;
+  top: 52%;
+  left: 22.5%;
+  transform: translate(-50%, -50%);
+  font-size: 2vw;
+  color: #f2711f;
 }
 
 .num6 {
-    position: absolute;
-    top: 52%;
-    left: 30%;
-    transform: translate(-50%, -50%);
-    font-size: 2vw;
-    color: #2a46f9;
+  position: absolute;
+  top: 52%;
+  left: 30%;
+  transform: translate(-50%, -50%);
+  font-size: 2vw;
+  color: #2a46f9;
 }
 
 .num7 {
-    position: absolute;
-    top: 52%;
-    left: 37.5%;
-    transform: translate(-50%, -50%);
-    font-size: 2vw;
-    color: #00a3fd;
+  position: absolute;
+  top: 52%;
+  left: 37.5%;
+  transform: translate(-50%, -50%);
+  font-size: 2vw;
+  color: #00a3fd;
 }
 
 .num8 {
-    position: absolute;
-    top: 52%;
-    left: 45%;
-    transform: translate(-50%, -50%);
-    font-size: 2vw;
-    color: #eff721;
+  position: absolute;
+  top: 52%;
+  left: 45%;
+  transform: translate(-50%, -50%);
+  font-size: 2vw;
+  color: #eff721;
 }
 
 .title1 {
-    position: absolute;
-    top: 28%;
-    left: 18%;
-    transform: translate(-50%, -50%);
-    font-size: 2vw;
-    color: #62bff2;
+  position: absolute;
+  top: 28%;
+  left: 18%;
+  transform: translate(-50%, -50%);
+  font-size: 2vw;
+  color: #62bff2;
 }
 
 .title2 {
-    position: absolute;
-    top: 28%;
-    left: 33%;
-    transform: translate(-50%, -50%);
-    font-size: 2vw;
-    color: #62bff2;
+  position: absolute;
+  top: 28%;
+  left: 33%;
+  transform: translate(-50%, -50%);
+  font-size: 2vw;
+  color: #62bff2;
 }
 
 .title3 {
-    position: absolute;
-    top: 48%;
-    left: 7.5%;
-    transform: translate(-50%, -50%);
-    font-size: 1vw;
-    color: #fff;
+  position: absolute;
+  top: 48%;
+  left: 7.5%;
+  transform: translate(-50%, -50%);
+  font-size: 1vw;
+  color: #fff;
 }
 
 .title4 {
-    position: absolute;
-    top: 48%;
-    left: 15%;
-    transform: translate(-50%, -50%);
-    font-size: 1vw;
-    color: #fff;
+  position: absolute;
+  top: 48%;
+  left: 15%;
+  transform: translate(-50%, -50%);
+  font-size: 1vw;
+  color: #fff;
 }
 
 .title5 {
-    position: absolute;
-    top: 48%;
-    left: 22.5%;
-    transform: translate(-50%, -50%);
-    font-size: 1vw;
-    color: #fff;
+  position: absolute;
+  top: 48%;
+  left: 22.5%;
+  transform: translate(-50%, -50%);
+  font-size: 1vw;
+  color: #fff;
 }
 
 .title6 {
-    position: absolute;
-    top: 48%;
-    left: 30%;
-    transform: translate(-50%, -50%);
-    font-size: 1vw;
-    color: #fff;
+  position: absolute;
+  top: 48%;
+  left: 30%;
+  transform: translate(-50%, -50%);
+  font-size: 1vw;
+  color: #fff;
 }
 
 .title7 {
-    position: absolute;
-    top: 48%;
-    left: 37.5%;
-    transform: translate(-50%, -50%);
-    font-size: 1vw;
-    color: #fff;
+  position: absolute;
+  top: 48%;
+  left: 37.5%;
+  transform: translate(-50%, -50%);
+  font-size: 1vw;
+  color: #fff;
 }
 
 .title8 {
-    position: absolute;
-    top: 48%;
-    left: 45%;
-    transform: translate(-50%, -50%);
-    font-size: 1vw;
-    color: #fff;
+  position: absolute;
+  top: 48%;
+  left: 45%;
+  transform: translate(-50%, -50%);
+  font-size: 1vw;
+  color: #fff;
 }
 
 .title9 {
-    position: absolute;
-    top: 61%;
-    left: 26.1%;
-    transform: translate(-50%, -50%);
-    font-size: 1vw;
-    color: #fff;
+  position: absolute;
+  top: 61%;
+  left: 26.1%;
+  transform: translate(-50%, -50%);
+  font-size: 1vw;
+  color: #fff;
 }
 
 .title10 {
-    position: absolute;
-    top: 13%;
-    left: 74.3%;
-    transform: translate(-50%, -50%);
-    font-size: 1vw;
-    color: #fff;
+  position: absolute;
+  top: 13%;
+  left: 74.3%;
+  transform: translate(-50%, -50%);
+  font-size: 1vw;
+  color: #fff;
 }
 
 .table1 {
-    position: absolute;
-    top: 63%;
-    left: 3.5%;
-    width: 45.4%;
-    height: 32%;
+  position: absolute;
+  top: 63%;
+  left: 3.5%;
+  width: 45.4%;
+  height: 32%;
 }
 
 .scrollTable {
-    color: rgb(185, 186, 192);
-    margin: auto 0px;
-    padding: 4px 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-align: center;
-    display: inline-block;
+  color: rgb(185, 186, 192);
+  margin: auto 0px;
+  padding: 4px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+  display: inline-block;
 }
 
 .right {
-    position: absolute;
-    top: 16%;
-    left: 52%;
-    width: 44.8%;
-    height: 80%;
-
-    .item {
-        width: 22vw;
-        height: 37vh;
-        position: relative;
-        border: 1px solid #1ea6ec;
-        margin-bottom: 12px;
-
-        .titleBg {
-            position: absolute;
-            top: 0%;
-            left: 0%;
-            width: 100%;
-            height: 10%;
-            background-color: #063b5a;
-        }
+  position: absolute;
+  top: 16%;
+  left: 52%;
+  width: 44.8%;
+  height: 80%;
+
+  .item {
+    width: 22vw;
+    height: 37vh;
+    position: relative;
+    border: 1px solid #1ea6ec;
+    margin-bottom: 12px;
+
+    .titleBg {
+      position: absolute;
+      top: 0%;
+      left: 0%;
+      width: 100%;
+      height: 10%;
+      background-color: #063b5a;
+    }
 
-        .title {
-            position: absolute;
-            top: 5%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            color: #fff9f6;
-            font-size: 0.9vw;
-
-            .el-tag.el-tag--success {
-                vertical-align: top !important;
-            }
-        }
+    .title {
+      position: absolute;
+      top: 5%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      color: #fff9f6;
+      font-size: 0.9vw;
 
-        .img {
-            background-image: url("~@/assets/board/smartScene/device.png");
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
-            position: absolute;
-            width: 100%;
-            height: 90%;
-            top: 10%;
-        }
+      .el-tag.el-tag--success {
+        vertical-align: top !important;
+      }
+    }
 
+    .img {
+      background-image: url("~@/assets/board/smartScene/device.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      width: 100%;
+      height: 90%;
+      top: 10%;
     }
-    .pagination{
-        position: relative;
-        left: 50%;
-        transform: translateX(-50%);
-            display: inline-block;
-        .el-pagination{
-            display: inline-block;
-        }
+
+  }
+
+  .pagination {
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+    display: inline-block;
+
+    .el-pagination {
+      display: inline-block;
     }
+  }
 }
 </style>