From 97420b1cb901adb42317c2bcaa6f04a8e00c4985 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Wed, 25 Dec 2024 14:16:43 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0plc=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/api/business/electronicFence.js | 10 ++ ruoyi-ui/src/components/BoardTopNav/index.vue | 21 --- ruoyi-ui/src/utils/coordinate.js | 153 ++++++++++++++++++ ruoyi-ui/src/views/board/GPS/index.vue | 53 ++++-- .../views/board/equipmentMonitoring/index.vue | 6 +- ruoyi-ui/src/views/board/index/index.vue | 21 ++- ruoyi-ui/src/views/board/senso/index.vue | 4 +- .../electronicFence/editElectronicFence.vue | 28 +++- 8 files changed, 248 insertions(+), 48 deletions(-) create mode 100644 ruoyi-ui/src/utils/coordinate.js diff --git a/ruoyi-ui/src/api/business/electronicFence.js b/ruoyi-ui/src/api/business/electronicFence.js index b6a28ab..bfd62e5 100644 --- a/ruoyi-ui/src/api/business/electronicFence.js +++ b/ruoyi-ui/src/api/business/electronicFence.js @@ -60,3 +60,13 @@ export function getEditedScenes(query) { params: query }) } + + +// 查询设备位置 +export function getDeviceLocation(query) { + return request({ + url: '/business/location/getDeviceLocation', + method: 'get', + params: query + }) +} diff --git a/ruoyi-ui/src/components/BoardTopNav/index.vue b/ruoyi-ui/src/components/BoardTopNav/index.vue index bf27cc8..d95da41 100644 --- a/ruoyi-ui/src/components/BoardTopNav/index.vue +++ b/ruoyi-ui/src/components/BoardTopNav/index.vue @@ -288,25 +288,4 @@ export default { left: 79%; } -.el-dropdown-menu { - padding: 0 !important; - border: none !important; -} - -.topNavScroll::-webkit-scrollbar { - width: 0px; - height: 0px; -} - -.el-dropdown-menu__item:not(.is-disabled):hover span { - color: #053563 !important; -} - -/deep/ .el-upload-dragger { - width: 100%; -} - -/deep/ .el-upload { - width: 100%; -} diff --git a/ruoyi-ui/src/utils/coordinate.js b/ruoyi-ui/src/utils/coordinate.js new file mode 100644 index 0000000..e2df589 --- /dev/null +++ b/ruoyi-ui/src/utils/coordinate.js @@ -0,0 +1,153 @@ +/** + * Created by Wandergis on 2015/7/8. + * 提供了百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换 + */ +//UMD魔法代码 +// if the module has no dependencies, the above pattern can be simplified to +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define([], factory); + } else if (typeof module === 'object' && module.exports) { + // Node. Does not work with strict CommonJS, but + // only CommonJS-like environments that support module.exports, + // like Node. + module.exports = factory(); + } else { + // Browser globals (root is window) + root.coordtransform = factory(); + } +}(this, function () { + //定义一些常量 + var x_PI = 3.14159265358979324 * 3000.0 / 180.0; + var PI = 3.1415926535897932384626; + var a = 6378245.0; + var ee = 0.00669342162296594323; + /** + * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换 + * 即 百度 转 谷歌、高德 + * @param bd_lon + * @param bd_lat + * @returns {*[]} + */ + var bd09togcj02 = function bd09togcj02(bd_lon, bd_lat) { + var bd_lon = +bd_lon; + var bd_lat = +bd_lat; + var x = bd_lon - 0.0065; + var y = bd_lat - 0.006; + var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_PI); + var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_PI); + var gg_lng = z * Math.cos(theta); + var gg_lat = z * Math.sin(theta); + return [gg_lng, gg_lat] + }; + + /** + * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换 + * 即谷歌、高德 转 百度 + * @param lng + * @param lat + * @returns {*[]} + */ + var gcj02tobd09 = function gcj02tobd09(lng, lat) { + var lat = +lat; + var lng = +lng; + var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI); + var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI); + var bd_lng = z * Math.cos(theta) + 0.0065; + var bd_lat = z * Math.sin(theta) + 0.006; + return [bd_lng, bd_lat] + }; + + /** + * WGS84转GCj02 + * @param lng + * @param lat + * @returns {*[]} + */ + var wgs84togcj02 = function wgs84togcj02(lng, lat) { + var lat = +lat; + var lng = +lng; + if (out_of_china(lng, lat)) { + return [lng, lat] + } else { + var dlat = transformlat(lng - 105.0, lat - 35.0); + var dlng = transformlng(lng - 105.0, lat - 35.0); + var radlat = lat / 180.0 * PI; + var magic = Math.sin(radlat); + magic = 1 - ee * magic * magic; + var sqrtmagic = Math.sqrt(magic); + dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI); + dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI); + var mglat = lat + dlat; + var mglng = lng + dlng; + return [mglng, mglat] + } + }; + + /** + * GCJ02 转换为 WGS84 + * @param lng + * @param lat + * @returns {*[]} + */ + var gcj02towgs84 = function gcj02towgs84(lng, lat) { + var lat = +lat; + var lng = +lng; + if (out_of_china(lng, lat)) { + return [lng, lat] + } else { + var dlat = transformlat(lng - 105.0, lat - 35.0); + var dlng = transformlng(lng - 105.0, lat - 35.0); + var radlat = lat / 180.0 * PI; + var magic = Math.sin(radlat); + magic = 1 - ee * magic * magic; + var sqrtmagic = Math.sqrt(magic); + dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI); + dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI); + var mglat = lat + dlat; + var mglng = lng + dlng; + return [lng * 2 - mglng, lat * 2 - mglat] + } + }; + + var transformlat = function transformlat(lng, lat) { + var lat = +lat; + var lng = +lng; + var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng)); + ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0; + ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0; + ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0; + return ret + }; + + var transformlng = function transformlng(lng, lat) { + var lat = +lat; + var lng = +lng; + var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng)); + ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0; + ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0; + ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0; + return ret + }; + + /** + * 判断是否在国内，不在国内则不做偏移 + * @param lng + * @param lat + * @returns {boolean} + */ + var out_of_china = function out_of_china(lng, lat) { + var lat = +lat; + var lng = +lng; + // 纬度3.86~53.55,经度73.66~135.05 + return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55); + }; + + return { + bd09togcj02: bd09togcj02, + gcj02tobd09: gcj02tobd09, + wgs84togcj02: wgs84togcj02, + gcj02towgs84: gcj02towgs84 + } +})); diff --git a/ruoyi-ui/src/views/board/GPS/index.vue b/ruoyi-ui/src/views/board/GPS/index.vue index 229ed0a..564caaf 100644 --- a/ruoyi-ui/src/views/board/GPS/index.vue +++ b/ruoyi-ui/src/views/board/GPS/index.vue @@ -20,7 +20,7 @@ :class-option="{...chart1TableOption,limitMoveNum:4}" :data="table2Data" class="case-item" - style="height: 84%;overflow: hidden;" + style="height: 84%;overflow: auto;" >
0/1 singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 waitTime: 0, + autoPlay: false, + navigation: false }, chart1Option: { grid: { @@ -396,12 +399,12 @@ export default { }, async mounted() { await this.getData() - setInterval(async ()=>{ + setInterval(async () => { await this.setAlarmInfos() await this.getAubDevice() await this.getTable2Data() - },1000*60) + }, 1000 * 60) }, methods: { async getData() { @@ -450,7 +453,7 @@ export default { map = new AMap.Map('map', { // mapStyle: 'amap://styles/blue', zoom: 11, - center: [113.4, 23.35], + center: [104, 36.30], }); }, setText(e) { @@ -482,6 +485,7 @@ export default { let e = position.map(val => { return [val.longitude, val.latitude] }) + console.log(e) let thisPolygon = new AMap.Polygon({ path: e, fillColor: val > 0 ? '#ff0000' : '#1791fc', @@ -555,7 +559,8 @@ export default { async getTable2Data() { const {data} = await selectDeviceLatitudeAndLongitude(this.$store.getters.sceneId) this.table2Data = data - console.log(data) + map.remove(markers) + markers = [] data.forEach(e => { if (e.alarmElectronFence) { this.setMarker1(e) @@ -565,13 +570,20 @@ export default { }) }, - setMarker(e) { + setMarker(v) { + let e = v + let location = wgs84togcj02(v.longitude, v.latitude) + e.longitude = location[0] + e.latitude = location[1] + if(v.deviceName === '吊地沟E1'){ + console.log(location) + } let marker = new AMap.Marker({ position: [e.longitude, e.latitude], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] - title: `信息\n经度：${e.longitude}\n纬度：${e.latitude}\n名称：${e.deviceLocation}\n备注：${e.remark||''}`, + title: `信息\n经度：${e.longitude}\n纬度：${e.latitude}\n名称：${e.deviceLocation}\n备注：${e.remark || ''}`, offset: new AMap.Pixel(-20, -40), content: `
- +
` }); marker.on('click', async () => { @@ -587,7 +599,12 @@ export default { const {data} = await selectMonitorElectronic(e.deviceId) data.map(e => e.hwFenceAreaList).flat(1).forEach(e => { if (e.areaShapeFlag === '1') { - this.setPolygon(e.areaRange.split('_').map(e => e.split(',').map(v => parseFloat(v)))) + this.setPolygon(e.areaRange.split('_').map(e => e.split(',').map(v => parseFloat(v))).map(v => { + return { + longitude: v[0], + latitude: v[1], + } + })) } if (e.areaShapeFlag === '2') { let arr = e.areaRange.split(',') @@ -596,11 +613,15 @@ export default { }) }) map.add(marker); + markers.push(marker) }, - setMarker1(e) { + setMarker1(v) { + let e = v + e.longitude = wgs84togcj02(v.longitude, v.latitude)[0] + e.latitude = wgs84togcj02(v.longitude, v.latitude)[1] let marker = new AMap.Marker({ position: [e.longitude, e.latitude], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] - title: `信息\n经度：${e.longitude}\n纬度：${e.latitude}\n名称：${e.deviceLocation}\n备注：${e.remark||''}`, + title: `信息\n经度：${e.longitude}\n纬度：${e.latitude}\n名称：${e.deviceLocation}\n备注：${e.remark || ''}`, offset: new AMap.Pixel(-15, -30), content: `
@@ -621,7 +642,12 @@ export default { const {data} = await selectMonitorElectronic(e.deviceId) data.map(e => e.hwFenceAreaList).flat(1).forEach(e => { if (e.areaShapeFlag === '1') { - this.setPolygon(e.areaRange.split('_').map(e => e.split(',').map(v => parseFloat(v)))) + this.setPolygon(e.areaRange.split('_').map(e => e.split(',').map(v => parseFloat(v))).map(v => { + return { + longitude: v[0], + latitude: v[1], + } + })) } if (e.areaShapeFlag === '2') { let arr = e.areaRange.split(',') @@ -630,6 +656,7 @@ export default { }) }) map.add(marker); + markers.push(marker) }, mapOrientation(e) { map.setZoomAndCenter(16, [e.longitude, e.latitude]) diff --git a/ruoyi-ui/src/views/board/equipmentMonitoring/index.vue b/ruoyi-ui/src/views/board/equipmentMonitoring/index.vue index 04f2c7c..c2f9c76 100644 --- a/ruoyi-ui/src/views/board/equipmentMonitoring/index.vue +++ b/ruoyi-ui/src/views/board/equipmentMonitoring/index.vue @@ -38,7 +38,7 @@ :data="tableData" :header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }" :max-height="maxHeight"> - style="width: 100%"> + style="width: 100%" > - {{ (tableData[scope.$index][i.columnKey]||'').toString() }} + {{ + i.columnKey === 'ts' ? parseTime((tableData[scope.$index][i.columnKey] || '').toString()) : (tableData[scope.$index][i.columnKey] || '').toString() + }} diff --git a/ruoyi-ui/src/views/board/index/index.vue b/ruoyi-ui/src/views/board/index/index.vue index 18353a5..be3810f 100644 --- a/ruoyi-ui/src/views/board/index/index.vue +++ b/ruoyi-ui/src/views/board/index/index.vue @@ -389,6 +389,7 @@ import { import ChinaMapData from '@/utils/ChinaMapData.json' import gsByMap from '@/utils/map/gs_by.json' import axios from "axios"; +import {wgs84togcj02} from "@/utils/coordinate"; let map = null let markers = [] @@ -1039,7 +1040,10 @@ export default { }) }) }, - setMarker(e) { + setMarker(v) { + let e = v + e.longitude = wgs84togcj02(v.longitude,v.latitude)[0] + e.latitude = wgs84togcj02(v.longitude,v.latitude)[1] if (!this.isRail) { return } @@ -1079,7 +1083,10 @@ export default { map.add(marker); markers.push(marker) }, - setMarker1(e) { + setMarker1(v) { + let e = v + e.longitude = wgs84togcj02(v.longitude,v.latitude)[0] + e.latitude = wgs84togcj02(v.longitude,v.latitude)[1] let marker = new AMap.Marker({ position: [e.longitude, e.latitude], title: `信息\n经度：${e.longitude}\n纬度：${e.latitude}\n名称：${e.deviceName}\n`, @@ -1114,7 +1121,10 @@ export default { map.add(marker); markers.push(marker) }, - setMarker2(e, bl) { + setMarker2(v, bl) { + let e = v + e.longitude = wgs84togcj02(v.longitude,v.latitude)[0] + e.latitude = wgs84togcj02(v.longitude,v.latitude)[1] if (!bl) { if (time1) { clearInterval(time1) @@ -1146,7 +1156,10 @@ export default { map.setFitView(markers) } }, - setMarker3(e) { + setMarker3(v) { + let e = v + e.longitude = wgs84togcj02(v.longitude,v.latitude)[0] + e.latitude = wgs84togcj02(v.longitude,v.latitude)[1] let marker = new AMap.Marker({ position: [e.longitude, e.latitude], title: `信息\n经度：${e.longitude}\n纬度：${e.latitude}\n名称：${e.deviceName}\n`, diff --git a/ruoyi-ui/src/views/board/senso/index.vue b/ruoyi-ui/src/views/board/senso/index.vue index 179a212..bb7dc9e 100644 --- a/ruoyi-ui/src/views/board/senso/index.vue +++ b/ruoyi-ui/src/views/board/senso/index.vue @@ -225,7 +225,9 @@ export default { }); map.add(polyline1); }, - setMarker(e, i) { + setMarker(v, i) { + let e = v + e = wgs84togcj02(v[0],v[1]) let marker = new AMap.Marker({ position: e, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] title: `信息\n经度：${e[0]}\n纬度：${e[1]}\n时间：${i}`, diff --git a/ruoyi-ui/src/views/business/electronicFence/editElectronicFence.vue b/ruoyi-ui/src/views/business/electronicFence/editElectronicFence.vue index a12a84d..a98af46 100644 --- a/ruoyi-ui/src/views/business/electronicFence/editElectronicFence.vue +++ b/ruoyi-ui/src/views/business/electronicFence/editElectronicFence.vue @@ -55,7 +55,6 @@ -
新增多边形 @@ -73,7 +72,8 @@ import { getElectronicFence, addElectronicFence, updateElectronicFence, - getEditedScenes + getEditedScenes, + getDeviceLocation } from "@/api/business/electronicFence"; import { gcj02towgs84, @@ -174,21 +174,34 @@ export default { }) }, methods: { - getDeviceMarket(){ - + getDeviceMarket(e) { + getDeviceLocation({ + deviceId: e + }).then(v => { + this.setMarker({ + longitude: v.data['last(longitude)']|| 0 , + latitude: v.data['last(latitude)']|| 0 , + }) + }) }, - setMarker(e) { + setMarker(v) { + let e = v + e.longitude = wgs84togcj02(v.longitude,v.latitude)[0] + e.latitude = wgs84togcj02(v.longitude,v.latitude)[1] map.remove(markers) - markers=[] + markers = [] let marker = new AMap.Marker({ position: [e.longitude, e.latitude], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] - title: `信息\n经度：${e.longitude}\n纬度：${e.latitude}\n名称：${e.deviceLocation}\n备注：${e.remark||''}`, + title: `信息\n经度：${e.longitude}\n纬度：${e.latitude}\n名称：${e.deviceLocation}\n备注：${e.remark || ''}`, offset: new AMap.Pixel(-20, -40), content: `
` }); map.add(marker); + markers.push(marker) + map.setFitView() + map.setZoom(8) }, getEditedScenes() { getEditedScenes().then(response => { @@ -243,6 +256,7 @@ export default { setPolygon(val, id) { let e = val.map(r => { let [lng, lat] = wgs84togcj02(r[0], r[1]) + // let [lng, lat] = [r[0], r[1]] return [lng, lat] }) let thisPolygon = new AMap.Polygon({path: e, extData: {id: id}});