周边设备

src/store/modules/gis.ts

@@ -13,8 +13,8 @@ import CzwStyle from "@/views/gis/map-info/style/czw";
 import HczStyle from "@/views/gis/map-info/style/hcz";
 import store from "@/store";
 import axios from "axios";
-import {geometry} from "@turf/turf";
 import {formatPosition} from "@/utils/easyMap";
+import * as turf from "@turf/turf";
 
 const formatWkt = (wkt) => {
   return wkt.split(',').join('\\\,')
@@ -101,6 +101,8 @@ const state = {
     ],
     layer: null,
   },
+  l: null,
+  s: null
 }
 
 const getters = {
@@ -119,6 +121,30 @@ const mutations = {
   },
   SET_GIS_MAP(state, {map, defaultDom, qyDom}) {
     state.map = map
+    state.s = new source.Vector()
+    state.l = new layer.Vector({
+      source: state.s,
+      zIndex: 99999,
+      style: new style.Style({ //图层样式
+        fill: new style.Fill({
+          color: 'rgba(46,129,255,0.15)' //填充颜色
+        }),
+        stroke: new style.Stroke({
+          color: '#2E81FF',  //边框颜色
+          width: 2,   // 边框宽度
+          lineDash: [10, 10]
+        }),
+        image: new style.Circle({
+          radius: 5,
+          fill: new style.Fill({
+            color: '#ffcc33'
+          })
+        })
+      })
+    })
+    state.map.addLayer(state.l)
+
+
     state.element.layer = new layer.Tile({
       zIndex: 10,
     })
@@ -365,6 +391,41 @@ const mutations = {
       state.gisParams.qy.analysisWKT = formatPosition.cpnTwpn(state.gisParams.qy.analysisCircle.getGeometry().getCoordinates())
       store.commit('gis/SET_GIS_ELEMENT')
       store.commit('gis/SET_GIS_ANALYSIS_ELEMENT')
+      state.gisParams.qy.info['5'].tableData = []
+      state.gisParams.qy.info['5'].loading = true
+      axios({
+        url: state.gisParams.qy.analysisDeviceLayer.getSource().getUrls()[0],
+        method: 'get',
+        params: {
+          service: 'WFS',
+          version: '1.0.0',
+          request: 'GetFeature',
+          typename: 'mysqlGeo:stg_view_deviceinfo_df_value1,mysqlGeo:stg_view_deviceinfo_df_value2,mysqlGeo:stg_view_deviceinfo_df_value3',
+          srsName: 'EPSG:4326',
+          outputFormat: 'application/json',
+          CQL_FILTER: `INTERSECTS(location, ${state.gisParams.qy.analysisWKT})`
+        }
+      }).then(res => {
+        state.gisParams.qy.info['5'].tableData = res.data.features.map(v => {
+          let type = ''
+          switch (v.properties.typeValue) {
+            case 'gal': type = '公安类'
+                  break
+            case 'myl': type = '民用类'
+                  break
+            case 'shl': type = '社会类'
+                  break
+          }
+          return {
+            name: v.properties.name,
+            status: v.properties.online == '1' ? true : false,
+            type: type,
+            distanceValue: turf.distance(state.gisParams.qy.info['5'].center, [Number(v.geometry.coordinates[0]), Number(v.geometry.coordinates[1])], {units: 'kilometers'}).toFixed(3),
+            distance: turf.distance(state.gisParams.qy.info['5'].center, [Number(v.geometry.coordinates[0]), Number(v.geometry.coordinates[1])], {units: 'kilometers'}).toFixed(2) + 'km'
+          }
+        }).sort((a, b) => a.distanceValue - b.distanceValue)
+        state.gisParams.qy.info['5'].loading = false
+      })
     }
   },
   SET_GIS_PARAMS_DEFAULT_SB(state, {wkt, id, info, config = {}}: any) {

src/views/gis/map-info/overlay/default/sb.vue

@@ -13,7 +13,7 @@
       </div>
       <div class="sb-item">
         <div class="sb-item-label">状态：</div>
-        <div class="sb-item-value">{{$store.state.gis.gisParams.default.info?.ONLINE === '0' ? '在线' : '离线'}}</div>
+        <div class="sb-item-value">{{$store.state.gis.gisParams.default.info?.online === '1' ? '在线' : '离线'}}</div>
       </div>
       <div class="play-button __hover" @click="$store.commit('gis/SET_VIDEO_PARAMS', {
         show: true,

src/views/gis/map-info/overlay/qy/index.vue

@@ -44,16 +44,10 @@
           <div class="tips" v-if="qyInfoCpt['5'].radiusTips"><SvgIcon name="tips" size="16" color="#FFB878"/>请输入1~60的正整数！</div>
         </div>
         <div class="qy-main-content-5-table" :style="`height: ${25 + (qyInfoCpt['5'].tableData.length > 5 ? 5 * 25 : qyInfoCpt['5'].tableData.length * 25)}px;`" v-loading="qyInfoCpt[qyInfoCpt.tab].loading" element-loading-background="rgba(0, 0, 0, 0.3)">
-          <el-auto-resizer>
-            <template #default="{ height, width }">
-              <V2Table
-                  :width="width"
-                  :height="height"
-                  :data="qyInfoCpt['5'].tableData"
-                  :center="qyInfoCpt['5'].center"
-              />
-            </template>
-          </el-auto-resizer>
+          <V2Table
+              :data="qyInfoCpt['5'].tableData"
+              :center="qyInfoCpt['5'].center"
+          />
         </div>
       </div>
     </div>
@@ -129,56 +123,6 @@ export default defineComponent({
         store.state.gis.gisParams.qy.analysisSource.addFeature(store.state.gis.gisParams.qy.analysisCircle)
         setCircle()
         store.commit('gis/SET_GIS_PARAMS_QY_ANALYSIS')
-        qyInfoCpt.value['5'].tableData = []
-        // qyInfoCpt.value['5'].loading = true
-        // that.$api.deviceQuery({
-        //   lon: qyInfoCpt.value['5'].center[0],
-        //   lat: qyInfoCpt.value['5'].center[1],
-        //   radius: qyInfoCpt.value['5'].radius
-        // }).then((res: any) => {
-        //   console.log(res.datas?.length)
-        //   // if (res.resp_code === 0 && res.datas?.length > 0) {
-        //   //   console.log(res.datas?.length)
-        //   //   const features: any = []
-        //   //   res.datas?.forEach(v => {
-        //   //     try {
-        //   //       const feat: any = new format.WKT().readFeature(`POINT(${v.longitude} ${v.latitude})`)
-        //   //       let type = ''
-        //   //       if (v.type === '公安类') {
-        //   //         type = 'galsb'
-        //   //       } else if (v.type === '社会类') {
-        //   //         type = 'shlsb'
-        //   //       } else if (v.type === '民用类') {
-        //   //         type = 'mylsb'
-        //   //       }
-        //   //       feat.set('defaultStyle', SbStyle.sbStyle(type))
-        //   //       feat.set('activeStyle', [...CommonStyle.activeStyle(), ...SbStyle.sbStyle(type)])
-        //   //       feat.set('analysisStyle', [...CommonStyle.analysisStyle(), ...SbStyle.sbStyle(type)])
-        //   //       feat.set('analysisActiveStyle', [...CommonStyle.activeStyle(), ...CommonStyle.analysisStyle(), ...SbStyle.sbStyle(type)])
-        //   //       feat.set('isAnalysis', true)
-        //   //       feat.set('resetStyle', () => {
-        //   //         if (feat.get('isAnalysis')) {
-        //   //           feat.setStyle(feat.get('analysisStyle'))
-        //   //         } else {
-        //   //           feat.setStyle(feat.get('defaultStyle'))
-        //   //         }
-        //   //       })
-        //   //       feat.setStyle(feat.get('analysisStyle'))
-        //   //       feat.set('featureType', 'sb')
-        //   //       feat.set('info', v)
-        //   //       feat.setId(v.deviceid)
-        //   //       features.push(feat)
-        //   //       state.qyParams.qyInfo['5'].tableData.push(v)
-        //   //     } catch (e) {
-        //   //       console.error('异常设备', v)
-        //   //     }
-        //   //   })
-        //   //   state.qyParams.analysisSource.addFeatures(features)
-        //   // }
-        //   qyInfoCpt.value['5'].loading = false
-        // }).catch(() => {
-        //   qyInfoCpt.value['5'].loading = true
-        // })
       }
     }
     const onRadiusReset = () => {
@@ -403,36 +347,6 @@ export default defineComponent({
       .qy-main-content-5-table {
         margin-top: 10px;
         width: 440px;
-        :deep(.__gis-overlay_table-v2) {
-          .el-table-v2__header-cell{
-            justify-content: center;
-            &:nth-child(2) {
-              color: #00C6FC;
-            }
-          }
-          .el-table-v2__header-cell, .el-table-v2__row-cell {
-            width: 60px !important;
-            $w1: 60px;
-            $w3: 60px;
-            $w4: 60px;
-            $w5: 60px;
-            &:nth-child(1) {
-              width: $w1 !important;
-            }
-            &:nth-child(2) {
-              width: calc(100% - #{$w1} - #{$w3} - #{$w4} - #{$w5} - 6px) !important;
-            }
-            &:nth-child(3) {
-              width: $w3 !important;
-            }
-            &:nth-child(4) {
-              width: $w4 !important;
-            }
-            &:nth-child(5) {
-              width: $w5 !important;
-            }
-          }
-        }
       }
     }
   }

src/views/gis/map-info/overlay/qy/v2-table.vue

@@ -1,16 +1,20 @@
 <template>
-  <el-table-v2
-      class="__gis-overlay_table-v2"
-      :columns="columns"
-      :data="data"
-      :width="width"
-      :height="height"
-      fixed
-      :row-height="25"
-      :header-height="25"
-  >
-    <template #empty></template>
-  </el-table-v2>
+  <el-auto-resizer>
+    <template #default="{ height, width }">
+      <el-table-v2
+          class="__gis-overlay_table-v2"
+          :columns="columns"
+          :data="data"
+          :width="width"
+          :height="height"
+          fixed
+          :row-height="25"
+          :header-height="25"
+      >
+        <template #empty></template>
+      </el-table-v2>
+    </template>
+  </el-auto-resizer>
 </template>
 
 <script lang="tsx">
@@ -35,10 +39,7 @@ export default defineComponent({
   name: '',
   components: {},
   props: {
-    head: {},
     data: {},
-    width: {},
-    height: {},
     center: {}
   },
   setup(props, {emit}) {
@@ -52,16 +53,10 @@ export default defineComponent({
       {width: 1, title: '序号', align: 'center', cellRenderer: ({ rowIndex }) => `${rowIndex + 1}`},
       {width: 1, title: '名称', dataKey: 'name'},
       {width: 1, title: '状态', align: 'center', cellRenderer: ({rowData}) => (
-          <span style={rowData.online == '1' ? "color: #4CFFFF;" : ""}>{rowData.online === '1' ? '在线' : '离线'}</span>
-        )},
+        <span style={rowData.status ? "color: #4CFFFF;" : ""}>{rowData.status ? '在线' : '离线'}</span>
+      )},
       {width: 1, title: '类型', align: 'center', dataKey: 'type'},
-      {width: 1, title: '距离', align: 'right', cellRenderer: ({rowData}) => {
-          // const start = props.feat.getGeometry().getCoordinates()
-          // const end = that.$easyMap.formatPosition.wptTcpt(rowData.wkt)
-          const end = [Number(rowData.longitude), Number(rowData.latitude)]
-          return turf.distance(props.center, end, {units: 'kilometers'}).toFixed(2) + 'km';
-        }
-      },
+      {width: 1, title: '距离', align: 'right', dataKey: 'distance'},
     ]
     onMounted(() => {
     })
@@ -74,4 +69,34 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-</style>
+:deep(.__gis-overlay_table-v2) {
+  .el-table-v2__header-cell{
+    justify-content: center;
+    &:nth-child(2) {
+      color: #00C6FC;
+    }
+  }
+  .el-table-v2__header-cell, .el-table-v2__row-cell {
+    width: 60px !important;
+    $w1: 60px;
+    $w3: 60px;
+    $w4: 60px;
+    $w5: 70px;
+    &:nth-child(1) {
+      width: $w1 !important;
+    }
+    &:nth-child(2) {
+      width: calc(100% - #{$w1} - #{$w3} - #{$w4} - #{$w5} - 6px) !important;
+    }
+    &:nth-child(3) {
+      width: $w3 !important;
+    }
+    &:nth-child(4) {
+      width: $w4 !important;
+    }
+    &:nth-child(5) {
+      width: $w5 !important;
+    }
+  }
+}
+</style>