轨迹

src/stores/ship-map/ship-map.ts

@@ -6,9 +6,10 @@ import * as layer from "ol/layer";
 import * as source from "ol/source";
 import MapStyle from "./map-style";
 import * as ol from "ol";
-import {randomColor, YMDHms} from "@/utils/util";
+import {formatGetParam, randomColor, YMDHms} from "@/utils/util";
 import {formatPosition, getShapeView} from "@/utils/easyMap";
 import { v4 } from "uuid";
+import {shipArchiveDetail} from "@/api/modules/web/archive";
 
 export const useShipMapStore = defineStore('shipMap', () => {
   const state: any = reactive({
@@ -25,7 +26,7 @@ export const useShipMapStore = defineStore('shipMap', () => {
       overlayTrack: null,
     },
     trackHoverData: null,
-    trackMap: new Map()
+    trackMap: new Map(),
     //   [['123', {
     //   data: {
     //     targetSourceJson: '[]'
@@ -52,6 +53,19 @@ export const useShipMapStore = defineStore('shipMap', () => {
     //     tab: 1,
     //   }
     // }]]
+    trackKeys: {
+      lon: 'target_longitude',
+      lat: 'target_latitude',
+      speed: 'target_speed',
+      course: 'target_course',
+      mergeType: 'merge_type',
+      mergeTime: 'merge_time',
+      mergeTarget: 'merge_target',
+      mergeId: 'merge_id',
+      targetName: 'target_name',
+      targetSourceJson: 'target_source',
+      shipId: 'ship_archive_id',
+    }
   })
   const initMap = (map, mapFunc, {trackPointDom}) => {
     state.map = map
@@ -109,11 +123,11 @@ export const useShipMapStore = defineStore('shipMap', () => {
           real: [d],
           trackId: feature.get('_trackId'),
           moveToTrack: () => {
-            const position = []
+            const position: any = []
             const t = state.trackMap.get(feature.get('_id'))
             const arr = [...t.history, ...t.real]
             arr.forEach(v => {
-              position.push([v.targetLongitude, v.targetLatitude])
+              position.push([v[state.trackKeys.lon], v[state.trackKeys.lat]])
             })
             getShapeView(state.map, position)
           },
@@ -141,13 +155,13 @@ export const useShipMapStore = defineStore('shipMap', () => {
             if (arr.length > 1) {
               arr.forEach((v, i) => {
                 if (i === 0) {
-                  lineWkt += `LINESTRING(${v.targetLongitude} ${v.targetLatitude}`
+                  lineWkt += `LINESTRING(${v[state.trackKeys.lon]} ${v[state.trackKeys.lat]}`
                 } else if (i === arr.length - 1) {
-                  lineWkt += `,${v.targetLongitude} ${v.targetLatitude})`
+                  lineWkt += `,${v[state.trackKeys.lon]} ${v[state.trackKeys.lat]})`
                 } else {
-                  lineWkt += `,${v.targetLongitude} ${v.targetLatitude}`
+                  lineWkt += `,${v[state.trackKeys.lon]} ${v[state.trackKeys.lat]}`
                 }
-                v.wkt = `POINT(${v.targetLongitude} ${v.targetLatitude})`
+                v.wkt = `POINT(${v[state.trackKeys.lon]} ${v[state.trackKeys.lat]})`
               })
             }
             if (lineWkt) {
@@ -190,8 +204,19 @@ export const useShipMapStore = defineStore('shipMap', () => {
           },
           archiveParams: {
             tab: 1,
+            data: null
           }
         })
+        if (d[state.trackKeys.shipId]) {
+          // shipArchiveDetail(formatGetParam({id: d[state.trackKeys.shipId]})).then(res => {
+          shipArchiveDetail(formatGetParam({id: '01d64e98bd904d2880ecd0e74d35383c'})).then(res => {
+            if (res.code == 0) {
+              state.trackMap.get(feature.get('_id')).archiveParams.data = res.data
+            } else {
+              ElMessage.error(res.msg)
+            }
+          })
+        }
         const lineLayer = new layer.Vector({
           zIndex: 4000,
           __layerName: state.trackMap.get(feature.get('_id')).lineLayer
@@ -203,38 +228,38 @@ export const useShipMapStore = defineStore('shipMap', () => {
         })
         state.map.addLayer(lineLayer)
         state.map.addLayer(pointsLayer)
-        const ws = new WebSocket(`ws://${location.host}/history-track-ws-api/history-fkShips-track`)
-        ws.onopen = (e) => {
-          const str = {
-            shipId: feature.get('_id'),
-            startTime: YMDHms(new Date(d.mergeTime).getTime() - 1000 * 60 * 60),
-            endTime: YMDHms(d.mergeTime),
-            searchType: 1,
-            sendInterval: 1
-          }
-          ws.send(JSON.stringify(str))
-        }
-        ws.onmessage = (e) => {
-          try {
-            const json = JSON.parse(e.data)
-            if (json.message === '查询结束') {
-              ws.close()
-            } else if (json.data?.length > 0) {
-              state.trackMap.get(feature.get('_id')).history.push(...json.data.map(v => ({
-                targetName: v.shipName,
-                mergeTarget: v.shipId,
-                targetLongitude: v.shipLon,
-                targetLatitude: v.shipLat,
-                targetCourse: v.shipCourse,
-                targetSpeed: v.shipSpeed,
-                mergeTime: v.trackTime,
-                targetSourceJson: v.targetSource,
-              })))
-              state.trackMap.get(feature.get('_id')).refreshTrackStyle()
-            }
-          } catch (e) {
-          }
-        }
+        // const ws = new WebSocket(`ws://${location.host}/history-track-ws-api/history-fkShips-track`)
+        // ws.onopen = (e) => {
+        //   const str = {
+        //     shipId: feature.get('_id'),
+        //     startTime: YMDHms(new Date(d[state.trackKeys.mergeTime]).getTime() - 1000 * 60 * 60),
+        //     endTime: YMDHms(d[state.trackKeys.mergeTime]),
+        //     searchType: 1,
+        //     sendInterval: 1
+        //   }
+        //   ws.send(JSON.stringify(str))
+        // }
+        // ws.onmessage = (e) => {
+        //   try {
+        //     const json = JSON.parse(e.data)
+        //     if (json.message === '查询结束') {
+        //       ws.close()
+        //     } else if (json.data?.length > 0) {
+        //       state.trackMap.get(feature.get('_id')).history.push(...json.data.map(v => ({
+        //         targetName: v.shipName,
+        //         mergeTarget: v.shipId,
+        //         targetLongitude: v.shipLon,
+        //         targetLatitude: v.shipLat,
+        //         targetCourse: v.shipCourse,
+        //         targetSpeed: v.shipSpeed,
+        //         mergeTime: v.trackTime,
+        //         targetSourceJson: v.targetSource,
+        //       })))
+        //       state.trackMap.get(feature.get('_id')).refreshTrackStyle()
+        //     }
+        //   } catch (e) {
+        //   }
+        // }
         initWebSocket()
       }
     }
@@ -299,8 +324,8 @@ export const useShipMapStore = defineStore('shipMap', () => {
   const getWSParams = () => {
     const param = {
       cql: '',
-      realCql: '',
-      userId: "18889231165"
+      // realCql: '',
+      // userId: "18889231165"
     }
     let idCql = ''
     if (state.trackMap.size > 0) {
@@ -308,27 +333,29 @@ export const useShipMapStore = defineStore('shipMap', () => {
       state.trackMap.forEach((v, k) => {
         arr.push(`'${k}'`)
       })
-      idCql = `mergeTarget in (${arr.join(',')})`
+      idCql = `${state.trackKeys.mergeTarget} in (${arr.join(',')})`
     }
     if (zoomWMS.value) {
       param.cql = idCql
     } else {
       param.cql = getBBOX()
-      param.realCql = idCql
+      // if (idCql) {
+      //   param.cql += ` or (${idCql})`
+      // }
+      // param.realCql = idCql
     }
     return JSON.stringify(param)
   }
   const initWebSocket = () => {
     if (!state.ws.instance) {
-      state.ws.instance = new WebSocket(`ws://${location.host}/rh-ws-api/webSocket`)
+      state.ws.instance = new WebSocket(`ws://${location.host}/ws-api/realtimeshiptrack`)
       state.ws.instance.onopen = (e) => {
         state.ws.instance.send(getWSParams())
       }
       state.ws.instance.onmessage = (e) => {
         try {
           const json = JSON.parse(e.data)
-          const shipData = json.data
-          initShip(shipData)
+          initShip(json)
         } catch (e) {
         }
       }
@@ -357,13 +384,13 @@ export const useShipMapStore = defineStore('shipMap', () => {
     //  动态拼接数据的唯一标识DATA，不可修改
     const features = data.map(v => {
       try {
-        const feat: any = new format.WKT().readFeature(`POINT(${v.targetLongitude} ${v.targetLatitude})`)
-        feat.set('_course', v.targetCourse || 0)
-        feat.set('_speed', v.targetSpeed || 0)
-        feat.set('_head', v.targetHeading)
-        feat.set('_mergeType', v.mergeType)
-        feat.set('_id', v.mergeTarget)
-        feat.set('_trackId', v.mergeId)
+        const feat: any = new format.WKT().readFeature(`POINT(${v[state.trackKeys.lon]} ${v[state.trackKeys.lat]})`)
+        feat.set('_course', v[state.trackKeys.course] || 0)
+        feat.set('_speed', v[state.trackKeys.speed] || 0)
+        // feat.set('_head', v.targetHeading)
+        feat.set('_mergeType', v[state.trackKeys.mergeType])
+        feat.set('_id', v[state.trackKeys.mergeTarget])
+        feat.set('_trackId', v[state.trackKeys.mergeId])
         feat.set('_data', v)
         feat.set('_featureType', 'ship')
         // 实时轨迹

src/views/web/track/archive.vue

@@ -11,7 +11,7 @@
       <div class="track-archive">
         <div class="tabs">
           <div class="__hover" :class="{active: value.archiveParams.tab == 1}" @click="value.archiveParams.tab = 1">轨迹信息</div>
-          <div class="__hover" :class="{active: value.archiveParams.tab == 2}" @click="value.archiveParams.tab = 2">船档信息</div>
+          <div v-if="value.archiveParams.data" class="__hover" :class="{active: value.archiveParams.tab == 2}" @click="value.archiveParams.tab = 2">船档信息</div>
         </div>
         <div class="imgs">
           <el-carousel
@@ -61,35 +61,35 @@
                     <span>未知</span>
                   </template>
                 </div>
-                <div>融合批次号:<span>{{ d.mergeTarget }}</span></div>
+                <div>融合批次号:<span>{{ value.data[ShipMapStore.trackKeys.mergeTarget] }}</span></div>
               </template>
             </template>
             <template v-else>
-              <div>北斗号:<span>1</span></div>
-              <div>MMSI:<span>1</span></div>
+              <div>北斗号:<span>{{ value.archiveParams.data?.beidouId }}</span></div>
+              <div>MMSI:<span>{{ value.archiveParams.data?.mmsi }}</span></div>
             </template>
           </div>
           <div class="line"/>
           <div class="other">
             <template v-if="value.archiveParams.tab == 1">
-              <div>经度:{{ Number(value.data.targetLongitude).toFixed(6) }}</div>
-              <div>纬度:{{ Number(value.data.targetLatitude).toFixed(6) }}</div>
-              <div>船迹向:{{ Number(value.data.targetCourse).toFixed(2) }}°</div>
-              <div>船艏向:{{ value.data.targetHeading ? (Number(value.data.targetHeading.toFixed(2) + '°')) : '未知' }}</div>
-              <div>航速:{{ Number(value.data.targetSpeed).toFixed(1) }}节</div>
+              <div>经度:{{ Number(value.data[ShipMapStore.trackKeys.lon]).toFixed(6) }}</div>
+              <div>纬度:{{ Number(value.data[ShipMapStore.trackKeys.lat]).toFixed(6) }}</div>
+              <div>船迹向:{{ Number(value.data[ShipMapStore.trackKeys.course]).toFixed(2) }}°</div>
+<!--              <div>船艏向:{{ value.data.[ShipMapStore.trackKeys.targetName] ? (Number(value.data.targetHeading.toFixed(2) + '°')) : '未知' }}</div>-->
+              <div>航速:{{ Number(value.data[ShipMapStore.trackKeys.speed]).toFixed(1) }}节</div>
             </template>
             <template v-else>
-              <div>船舶类型:1</div>
-              <div>持证类型:1</div>
-              <div>最大航速:1</div>
-              <div>船长:1</div>
-              <div>船宽:1</div>
-              <div>重点船舶:1</div>
+              <div>船舶类型:{{ DictionaryStore.shipTypeMap.get(value.archiveParams.data?.type) }}</div>
+              <div>持证类型:{{ DictionaryStore.certTypeMap.get(value.archiveParams.data?.certType) }}</div>
+              <div>最大航速:{{ value.archiveParams.data?.maxSpeed }}</div>
+              <div>船长:{{ value.archiveParams.data?.length }}</div>
+              <div>船宽:{{ value.archiveParams.data?.width }}</div>
+              <div>重点船舶:{{ DictionaryStore.certTypeMap.get(value.archiveParams.data?.important) }}</div>
             </template>
           </div>
         </div>
         <div class="update">
-          更新时间:2024-33-33 99:99:99
+          更新时间:{{ $util.YMDHms(value.data[ShipMapStore.trackKeys.mergeTime]) }}
         </div>
       </div>
     </DragWindow>
@@ -106,10 +106,11 @@
 <script setup lang="ts">
 import {computed, getCurrentInstance, markRaw, nextTick, onMounted, reactive, ref, watch} from "vue";
 import DragWindow from '../components/drag-window.vue'
-import {useShipMapStore} from "@/stores";
+import {useDictionaryStore, useShipMapStore} from "@/stores";
 import DefaultShipImg from "@/assets/images/web/track-archive-ship-default.png";
 
 const ShipMapStore = useShipMapStore()
+const DictionaryStore = useDictionaryStore()
 const {proxy} = getCurrentInstance()
 const props = defineProps({
   show: {},
@@ -121,7 +122,7 @@ const state: any = reactive({
   initialIndex: 0
 })
 const getTitle = (data) => {
-  return data.targetName || data.mergeTarget
+  return data[ShipMapStore.trackKeys.targetName] || data[ShipMapStore.trackKeys.mergeTarget]
 }
 const getShipImg = (data) => {
   const arr = []
@@ -150,7 +151,7 @@ const getNumbers = (data) => {
     mmsi: [],
     mergeTarget: data.mergeTarget
   }
-  const s = JSON.parse(data.targetSourceJson)
+  const s = JSON.parse(data[ShipMapStore.trackKeys.targetSourceJson])
   const {RadarbeidouNumber, faultRadarNum, faultmmsiNum} = filterShipNum(s)
   obj.radar = faultRadarNum
   obj.beidou = RadarbeidouNumber

src/views/web/track/index.vue

@@ -68,13 +68,15 @@ const state: any = reactive({
   },
 })
 const getDuration = (value) => {
-  let start = null
-  const end = value.real[value.real.length - 1].mergeTime
-  if (value.history.length > 0) {
-    start = value.history[0].mergeTime
-  } else if (value.real.length > 0) {
-    start = value.real[0].mergeTime
-  }
+  // let start = null
+  // const end = value.real[value.real.length - 1].mergeTime
+  // if (value.history.length > 0) {
+  //   start = value.history[0].mergeTime
+  // } else if (value.real.length > 0) {
+  //   start = value.real[0].mergeTime
+  // }
+  const end = new Date().getTime()
+  const start = end - 1000 * 60 * 60
   return comTimeByArea(start, end, true)
 }
 const handleColor = (value) => {

src/views/web/track/track-point.vue

@@ -2,8 +2,8 @@
   <div class="track-point-overlay">
     <template v-if="ShipMapStore.trackHoverData">
       <div class="name">
-        <template v-if="ShipMapStore.trackHoverData.targetName">
-          {{ShipMapStore.trackHoverData.targetName}}
+        <template v-if="ShipMapStore.trackHoverData[ShipMapStore.trackKeys.targetName]">
+          {{ShipMapStore.trackHoverData[ShipMapStore.trackKeys.targetName]}}
         </template>
         <template v-else>
           船名号未知
@@ -13,7 +13,7 @@
         <div class="item">
           <div class="option">
             <span>融合批次号:</span>
-            <span>{{ShipMapStore.trackHoverData.mergeTarget}}</span>
+            <span>{{ShipMapStore.trackHoverData[ShipMapStore.trackKeys.mergeTarget]}}</span>
           </div>
         </div>
         <div class="item">
@@ -56,21 +56,21 @@
         <div class="item">
           <div class="option">
             <span>经度:</span>
-            <span>{{Number(ShipMapStore.trackHoverData.targetLongitude).toFixed(6)}}</span>
+            <span>{{Number(ShipMapStore.trackHoverData[ShipMapStore.trackKeys.lon]).toFixed(6)}}</span>
           </div>
           <div class="option">
             <span>纬度:</span>
-            <span>{{Number(ShipMapStore.trackHoverData.targetLatitude).toFixed(6)}}</span>
+            <span>{{Number(ShipMapStore.trackHoverData[ShipMapStore.trackKeys.lat]).toFixed(6)}}</span>
           </div>
         </div>
         <div class="item">
           <div class="option">
             <span>航向:</span>
-            <span>{{Number(ShipMapStore.trackHoverData.targetCourse).toFixed(2)}}°</span>
+            <span>{{Number(ShipMapStore.trackHoverData[ShipMapStore.trackKeys.course]).toFixed(2)}}°</span>
           </div>
           <div class="option">
             <span>航速:</span>
-            <span>{{Number(ShipMapStore.trackHoverData.targetSpeed).toFixed(1)}}节</span>
+            <span>{{Number(ShipMapStore.trackHoverData[ShipMapStore.trackKeys.speed]).toFixed(1)}}节</span>
           </div>
         </div>
         <div class="item">
@@ -81,7 +81,7 @@
         </div>
       </div>
       <div class="time">
-        {{ $util.YMDHms(ShipMapStore.trackHoverData.mergeTime) }}
+        {{ $util.YMDHms(ShipMapStore.trackHoverData[ShipMapStore.trackKeys.mergeTime]) }}
       </div>
     </template>
   </div>
@@ -100,7 +100,7 @@ const formatDataCpt = computed(() => {
     source: ''
   }
   if (ShipMapStore.trackHoverData) {
-    const s = JSON.parse(ShipMapStore.trackHoverData.targetSourceJson)
+    const s = JSON.parse(ShipMapStore.trackHoverData[ShipMapStore.trackKeys.targetSourceJson])
     obj.source = getShipSourceNew(s)
     const {RadarbeidouNumber, faultRadarNum, faultmmsiNum} = filterShipNum(s)
     obj.radar = faultRadarNum

vite.config.ts

@@ -53,7 +53,7 @@ export default defineConfig({
     strictPort: false,
     proxy: {
       '/sww-api': {
-        target: 'http://192.168.242.21:8080/',
+        target: 'http://192.168.242.21:9099/',
         changeOrigin: true,
         rewrite: (path) => {
           return path.replace(/^\/sww-api/, '')
@@ -62,7 +62,7 @@ export default defineConfig({
       },
       '/ws-api': {
         // target: 'ws://8.130.72.63:18073/',
-        target: 'ws://10.110.45.26:18069/ws-api',
+        target: 'ws://192.168.242.21:9099/',
         ws: true,
         changeOrigin: true,
         rewrite: path => {