From 4de7cd2eb089169c29370a5f8f2ef634e4ebc7bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Tue, 26 Sep 2023 09:58:19 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9C=B0=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/views/board/GPS/index.vue | 37 +++--- ruoyi-ui/src/views/board/senso/index.vue | 156 ++++++++++++++--------- 2 files changed, 112 insertions(+), 81 deletions(-) diff --git a/ruoyi-ui/src/views/board/GPS/index.vue b/ruoyi-ui/src/views/board/GPS/index.vue index 070f195..ae87eab 100644 --- a/ruoyi-ui/src/views/board/GPS/index.vue +++ b/ruoyi-ui/src/views/board/GPS/index.vue @@ -135,7 +135,7 @@ export default { sceneId: 0, } }, - async mounted() { + async mounted() { await this.getData() }, methods: { @@ -153,15 +153,15 @@ export default { type: 'warning' }).then(() => { handleAlarmInfo({ - alarmInfoId:e.no - }).then(e=>{ - if(e.code === 200){ + alarmInfoId: e.no + }).then(e => { + if (e.code === 200) { this.$message({ type: 'success', message: '已处理!' }); this.setTable3() - }else{ + } else { this.$message({ type: 'info', message: '网络错误' @@ -182,31 +182,31 @@ export default { }); }, setText(e) { - let position = e.areaPoints?.length > 0 ? e.areaPoints:e.centerPoint - if(position.length>0){ + let position = e.areaPoints?.length > 0 ? e.areaPoints : e.centerPoint + if (position.length > 0) { let length = position.length - let longitudes = e.areaPoints.map(e=>e.longitude).reduce((a,b)=>a+b) - let latitudes = e.areaPoints.map(e=>e.latitude).reduce((a,b)=>a+b) - position = [longitudes/length, latitudes/length] - }else{ + let longitudes = e.areaPoints.map(e => e.longitude).reduce((a, b) => a + b) + let latitudes = e.areaPoints.map(e => e.latitude).reduce((a, b) => a + b) + position = [longitudes / length, latitudes / length] + } else { position = [e.centerPoint.longitude, e.centerPoint.latitude] } let text = new AMap.Text({ - text: '总数：'+e.deviceCount + (e.abnormalCount ? ('/异常数量：' + e.abnormalCount) : ''), + text: '总数：' + e.deviceCount + (e.abnormalCount ? ('/异常数量：' + e.abnormalCount) : ''), anchor: 'center', draggable: true, cursor: 'pointer', - position:position + position: position }); map.add(text) }, - setPolygon(position,val) { + setPolygon(position, val) { let e = position.map(val => { return [val.longitude, val.latitude] }) let thisPolygon = new AMap.Polygon({ path: e, - fillColor: val>0 ? '#ff0000' : '#1791fc', + fillColor: val > 0 ? '#ff0000' : '#1791fc', }); map.add(thisPolygon) map.setFitView() @@ -221,7 +221,7 @@ export default { strokeOpacity: 0.2, fillOpacity: 0.4, strokeDasharray: [10, 10], - fillColor: e>0 ? '#ff0000' : '#1791fc', + fillColor: e > 0 ? '#ff0000' : '#1791fc', }) map.add(circle); map.setFitView() @@ -281,8 +281,7 @@ export default { this.num3 = data.onlineDeviceNum }, async setAlarmInfos() { - const {rows: data} = await getAlarmInfos({"sceneId": this.sceneId}) - console.log(data) + const {rows: data} = await getAlarmInfos({"sceneId": this.$store.getters.sceneId}) this.table1Data = data.map((e, i) => { return { value1: e.alarmInfoId, @@ -296,7 +295,7 @@ export default { const {data} = await ElectronicNumVo(this.$store.getters.sceneId) data.forEach(e => { if (e.areaPoints?.length > 0) { - this.setPolygon(e.areaPoints,e.abnormalCount) + this.setPolygon(e.areaPoints, e.abnormalCount) } if (e.centerPoint) { this.setCircle([e.centerPoint.longitude, e.centerPoint.latitude], e.radius, e.abnormalCount) diff --git a/ruoyi-ui/src/views/board/senso/index.vue b/ruoyi-ui/src/views/board/senso/index.vue index b47137e..58ee37e 100644 --- a/ruoyi-ui/src/views/board/senso/index.vue +++ b/ruoyi-ui/src/views/board/senso/index.vue @@ -46,25 +46,14 @@ - - - - - - - - - - - - - - + @@ -72,30 +61,27 @@ - -
- -
-
-
-
-
{{ i.deviceName }}
-
-
设备编号:
-
{{ i.deviceCode }}
-
-
-
设备名称:
-
{{ i.deviceName }}
-
-
-
设备位置:
-
{{ i.deviceLocation }}
-
-
- +
+
+
+
+
+
+
{{ i.deviceName }}
+
+
设备编号:
+
{{ i.deviceCode }}
+
+
+
设备名称:
+
{{ i.deviceName }}
+
+
+
设备位置:
+
{{ i.deviceLocation }}
+
- +
@@ -107,36 +93,57 @@ import { getLinkDevices } from '@/api/board/senso' +let map = null export default { - components: { - }, + components: {}, data() { return { topData: {}, bottomData: [], - collapseNo:'1', + collapseNo: '1', radio: '日统计报表', tableData: [], - sceneId:0, - deviceId:0, - deviceModeId:0, - total:0, - currentPage:1, - deviceDataColumns:[], - show:false + sceneId: 0, + deviceId: 0, + deviceModeId: 0, + total: 0, + currentPage: 1, + deviceDataColumns: [], + show: false, + isMap:false } }, async mounted() { - if(this.$route.query.id){ + map = new AMap.Map('map', { + zoom: 11, + center: [113.4, 23.35], + }); + if (this.$route.query.id) { this.deviceId = this.$route.query.id this.deviceModeId = this.$route.query.deviceModeId } await this.getData() }, methods: { - async currentChange(e){ + setPolyline(e) { + let polyline = new AMap.Polyline({ + path: e, + borderWeight: 2, // 线条宽度，默认为 1 + }); + map.add(polyline); + map.setFitView() + }, + setMarker(e, i) { + let marker = new AMap.Marker({ + position: e, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] + title: i + }); + map.add(marker); + map.setFitView() + }, + async currentChange(e) { this.currentPage = e - await this.setHistoryData() + await this.setHistoryData() }, async getData() { await this.setDeviceInfo() @@ -155,22 +162,42 @@ export default { this.topData = data || {} }, async setHistoryData() { + this.isMap = false + map.clearMap() this.show = false const {data} = await getHistoryData({ - "sceneId":this.$store.getters.sceneId, + "sceneId": this.$store.getters.sceneId, "deviceId": this.deviceId, - deviceModeId:this.deviceModeId, - "offset": this.currentPage -1, - "limit": 1, + deviceModeId: this.deviceModeId, + "offset": this.currentPage - 1, + "limit": 10, "startTime": 0 }) - this.tableData = data.historyData.dataList - this.total = data.historyData.count - this.currentPage = 1 - this.deviceDataColumns = data.deviceDataColumns - this.$nextTick(()=>{ - this.show = true - }) + let dataList = data.historyData.dataList + if (dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).length > 0) { + this.isMap = true + dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).forEach(e => { + this.setMarker([e.longitude, e.latitude], e.ts) + }) + this.setPolyline(dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).map(e => { + return [e.longitude, e.latitude] + })) + this.tableData = data.historyData.dataList + this.total = data.historyData.count + this.currentPage = 1 + this.deviceDataColumns = data.deviceDataColumns + this.$nextTick(() => { + this.show = true + }) + } else { + this.tableData = data.historyData.dataList + this.total = data.historyData.count + this.currentPage = 1 + this.deviceDataColumns = data.deviceDataColumns + this.$nextTick(() => { + this.show = true + }) + } }, async setLinkDevices() { const {data} = await getLinkDevices(this.deviceId) @@ -314,4 +341,9 @@ export default { } } } + +.map { + width: 100%; + height: 50vh; +}