From c88f1bbf8313219cd8878f0aaae1b20eb3e99ccb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Mon, 18 Sep 2023 16:51:03 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E7=94=B5=E5=AD=90=E5=9B=B4?= =?UTF-8?q?=E6=A0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/api/board/GPS.js | 22 +- ruoyi-ui/src/api/board/index.js | 18 + ruoyi-ui/src/api/board/smartScene.js | 29 +- ruoyi-ui/src/main.js | 2 +- ruoyi-ui/src/views/board/GPS/index.vue | 183 ++--- ruoyi-ui/src/views/board/index/index.vue | 277 +++---- ruoyi-ui/src/views/board/smartScene/index.vue | 763 ++++++++---------- 7 files changed, 599 insertions(+), 695 deletions(-) diff --git a/ruoyi-ui/src/api/board/GPS.js b/ruoyi-ui/src/api/board/GPS.js index 5bbe4a2..f1a8e40 100644 --- a/ruoyi-ui/src/api/board/GPS.js +++ b/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', }) } diff --git a/ruoyi-ui/src/api/board/index.js b/ruoyi-ui/src/api/board/index.js index 78ce192..37d417b 100644 --- a/ruoyi-ui/src/api/board/index.js +++ b/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', + }) +} diff --git a/ruoyi-ui/src/api/board/smartScene.js b/ruoyi-ui/src/api/board/smartScene.js index 65ab379..7cb2805 100644 --- a/ruoyi-ui/src/api/board/smartScene.js +++ b/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', }) } diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js index fea469d..ccd840b 100644 --- a/ruoyi-ui/src/main.js +++ b/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) }) diff --git a/ruoyi-ui/src/views/board/GPS/index.vue b/ruoyi-ui/src/views/board/GPS/index.vue index 23ff2e5..bf01f0d 100644 --- a/ruoyi-ui/src/views/board/GPS/index.vue +++ b/ruoyi-ui/src/views/board/GPS/index.vue @@ -19,7 +19,7 @@ 监控单元数量
设备数量
在线设备数量
-
20
-
20
-
20
+
{{ num1 }}
+
{{ num2 }}
+
{{ num3 }}
-
+
@@ -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%; diff --git a/ruoyi-ui/src/views/board/index/index.vue b/ruoyi-ui/src/views/board/index/index.vue index ec768b1..3dd8f15 100644 --- a/ruoyi-ui/src/views/board/index/index.vue +++ b/ruoyi-ui/src/views/board/index/index.vue @@ -39,11 +39,11 @@
- {{ item.value2 }} + {{ item.value }}
- {{ item.value }} + {{ item.value2 }}
@@ -83,7 +83,10 @@
传感器数量
-
{{ centerNum.subSum }}
+
{{ + centerNum.subSum + }} +
监控单元数量
{{ centerNum.sum }}
@@ -105,7 +108,7 @@ 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) + }, } } ; diff --git a/ruoyi-ui/src/views/board/smartScene/index.vue b/ruoyi-ui/src/views/board/smartScene/index.vue index 00b32f3..75c147c 100644 --- a/ruoyi-ui/src/views/board/smartScene/index.vue +++ b/ruoyi-ui/src/views/board/smartScene/index.vue @@ -1,518 +1,447 @@