增加plc页面

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
+  })
+}

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%;
-}
 </style>

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
+  }
+}));

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;"
       >
         <div
           v-for="(item, index) in table2Data"
@@ -72,7 +72,6 @@
         <div
           v-for="(item, index) in table1Data"
           :key="index"
-
         >
           <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
             <div
@@ -315,8 +314,10 @@ import {handleAlarmInfo} from "@/api/board/index";
 import {selectBeaconDevicesHistory} from "../../../api/board/GPS";
 import {selectMonitorElectronic} from "../../../api/board";
 import gif from "@/assets/board/index/dot.png";
+import {wgs84togcj02} from '@/utils/coordinate'
 
 let map = null
+let markers=[]
 let polyEditor = null
 let texts = []
 let polygons = []
@@ -351,6 +352,8 @@ export default {
         singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 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: `<div>
-            <img src="${gif}" alt="" width=" 40px" style="animation:an1 2s ease-in-out infinite;"  >
+            <img src="${gif}" alt="" width=" 40px"   >
             </div>`
       });
       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: `<div >
  <svg t="1718261114618" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4305" style="width: 30px;height: 30px;">
@@ -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])

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%" >
           <el-table-column
             type="index"
             label="序号"
@@ -49,7 +49,9 @@
               <img v-if="(tableData[scope.$index][i.columnKey]||'').toString().includes('http')"
                    :src="tableData[scope.$index][i.columnKey]" alt="" height="100px"
                    width="100px">
-              <span v-else> {{ (tableData[scope.$index][i.columnKey]||'').toString() }}</span>
+              <span v-else> {{
+                  i.columnKey === 'ts' ? parseTime((tableData[scope.$index][i.columnKey] || '').toString()) : (tableData[scope.$index][i.columnKey] || '').toString()
+                }}</span>
             </template>
           </el-table-column>
           <!--          <el-table-column-->

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`,

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}`,

ruoyi-ui/src/views/business/electronicFence/editElectronicFence.vue

@@ -55,7 +55,6 @@
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
         </el-form-item>
 
-
       </el-form>
       <div>
         <el-button type="primary" @click="createPolygon">新增多边形</el-button>
@@ -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: `<div>
             <img src="${gif}" alt="" width=" 40px" style="animation:an1 2s ease-in-out infinite;"  >
             </div>`
       });
       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}});