配置socket，移除永久存储插件

.env.production

@@ -1,3 +1,3 @@
 VITE_SERVER_URL=https://jkbj.scrbg.com:5013
-VITE_SOCKET_API=wss://eas.any8.cc:8010/websocket
+VITE_SOCKET_API=ws://55p9w6.natappfree.cc/websocket
 # VITE_SERVER_URL=https://eas.any8.cc:8010

package.json

@@ -13,7 +13,6 @@
     "echarts": "^5.4.3",
     "naive-ui": "^2.36.0",
     "pinia": "^2.1.7",
-    "pinia-plugin-persist": "^1.0.0",
     "vue": "^3.3.11",
     "vue-router": "^4.2.5",
     "vue3-marquee": "^4.1.0"

src/components/map.vue

@@ -7,7 +7,7 @@
 
 <script setup lang='ts'>
 import AMapLoader from '@amap/amap-jsapi-loader'
-import { onMounted, ref } from 'vue'
+import { onMounted, watch } from 'vue'
 import useStore from '@/pages/store/index'
 import { useNotification } from 'naive-ui'
 import img36 from '@/assets/img/36.png'
@@ -58,6 +58,19 @@ function addMark(position:number[], icon:string, size?:{w:number, h:number}) {
   Maps.add(mark)
 }
 
+function addLine(path:number[][], color?:string, width?:number) {
+  if (!Maps) return
+  const polyline = new AMaps.Polyline({
+    path,
+    strokeWeight: width || 5,
+    borderWeight: width || 5, // 线条宽度，默认为 1
+    strokeColor: color || 'red', // 线条颜色
+    lineJoin: 'bevel', // 折线拐点连接处样式
+    geodesic: true
+  })
+  Maps.add(polyline)
+}
+
 onMounted(() => {
   AMapLoader.load({
     key: '0c5c83112cafefa77154769b4433c3df',
@@ -95,22 +108,6 @@ onMounted(() => {
       }
       store.setWeather(data)
     })
-    // 添加mark
-    const mark = new AMap.Marker({
-      title: 'test',
-      position: [ 103.006916, 29.983835 ],
-      cursor: 'pointer',
-      icon: new AMap.Icon({
-        image: img36,
-        imageSize: new AMap.Size(36, 36)
-      }),
-      autoRotation: true,
-      offset: new AMap.Pixel(-5, -20),
-      angle: 0,
-      anchor: 'center',
-      extData: '1'// 设置自定义属性
-    })
-    map.add(mark)
     // 镂空雅安 511800 adcode
     AMapUI.loadUI([ 'geo/DistrictExplorer' ], (DistrictExplorer: any) => {
       const districtExplorer = new DistrictExplorer({ map })
@@ -139,37 +136,72 @@ onMounted(() => {
         })
       })
     })
-    // 增加路线
-    const driving = new AMap.Driving({
-      map
+
+    // 添加mark
+    const mark = new AMap.Marker({
+      title: 'test',
+      position: [ 103.006916, 29.983835 ],
+      cursor: 'pointer',
+      icon: new AMap.Icon({
+        image: img36,
+        imageSize: new AMap.Size(36, 36)
+      }),
+      autoRotation: true,
+      offset: new AMap.Pixel(-5, -20),
+      angle: 0,
+      anchor: 'center',
+      extData: '1'// 设置自定义属性
     })
+    map.add(mark)
 
-    // 根据起终点名称规划驾车导航路线
-    driving.search([
-      { keyword: '鑫源大厦', city: '雅安市' },
-      { keyword: '雅安农业大学', city: '雅安市' }
-    ], (status:string, result:Any) => {
-      if (status === 'complete') {
-        // const { routes } = result
-        // const paths = routes[0].steps.map((el: { path: Any }) => (el.path))
-        console.log('导航数据获取成功', result)
-        // const polyline = new AMap.Polyline({
-        //   path: paths,
-        //   strokeWeight: 5,
-        //   borderWeight: 5, // 线条宽度，默认为 1
-        //   strokeColor: 'red', // 线条颜色
-        //   lineJoin: 'bevel', // 折线拐点连接处样式
-        //   geodesic: true
-        // })
-        // map.add(polyline)
-      } else {
-        console.error(`获取驾车数据失败：${result}`)
-      }
+    const polyline = new AMap.Polyline({
+      path: [],
+      strokeWeight: 5,
+      borderWeight: 5, // 线条宽度，默认为 1
+      strokeColor: 'red', // 线条颜色
+      lineJoin: 'bevel', // 折线拐点连接处样式
+      geodesic: true
     })
+    map.add(polyline)
+    console.log(6666, polyline)
+
+    // 增加路线
+    // const driving = new AMap.Driving({
+    //   map
+    // })
+
+    // 根据起终点名称规划驾车导航路线
+    // driving.search([
+    //   { keyword: '鑫源大厦', city: '雅安市' },
+    //   { keyword: '雅安农业大学', city: '雅安市' }
+    // ], (status:string, result:Any) => {
+    //   if (status === 'complete') {
+    //     // const { routes } = result
+    //     // const paths = routes[0].steps.map((el: { path: Any }) => (el.path))
+    //     console.log('导航数据获取成功', result)
+    //     // const polyline = new AMap.Polyline({
+    //     //   path: paths,
+    //     //   strokeWeight: 5,
+    //     //   borderWeight: 5, // 线条宽度，默认为 1
+    //     //   strokeColor: 'red', // 线条颜色
+    //     //   lineJoin: 'bevel', // 折线拐点连接处样式
+    //     //   geodesic: true
+    //     // })
+    //     // map.add(polyline)
+    //   } else {
+    //     console.error(`获取驾车数据失败：${result}`)
+    //   }
+    // })
     Maps = map
     AMaps = AMap
   })
 })
+
+watch(() => store.socektData, (v) => {
+  if (v && v.BUS_LINE_INFO) {
+    console.log('line', v)
+  }
+}, { deep: true })
 </script>
 
 <style lang="scss" scoped>

src/pages/App.vue

@@ -25,7 +25,5 @@ const socket = new SocketService()
 const store = useStore()
 const show = computed(() => store.loading)
 const themeOverrides = Theme
-onMounted(()=>{
-  socket.connect()
-})
+onMounted(() => socket.connect())
 </script>

src/pages/main.ts

@@ -2,13 +2,11 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import { createPinia } from 'pinia'
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
-import piniaPersist from 'pinia-plugin-persist'
 import Icon from '@/components/icon.vue'
 import 'virtual:svg-icons-register'
 import naive from '@/assets/native-plugin'
 
 const store = createPinia()
-store.use(piniaPersist)
 
 // 动态路由
 const routes = Object.values(import.meta.glob('./views/*/route.ts', { eager: true, import: 'default' })) as unknown as RouteRecordRaw[]

src/pages/views/home/components/HomePage.vue

@@ -290,7 +290,7 @@
 
 <script setup lang='ts'>
 import Layout from '@/components/layout.vue'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import Box from '@/components/box.vue'
 import { Vue3Marquee } from 'vue3-marquee'
 import { graphic } from 'echarts'

src/services/socket.service.ts

@@ -21,7 +21,7 @@ export default class SocketService extends Service {
    *  连接
    */
   private _connect() {
-    const token = this._store.token
+    const { token } = this._store
     if (!token) return null
     const url = `${import.meta.env.VITE_SOCKET_API}/${token}`
     const socket = new WebSocket(url)
@@ -62,14 +62,13 @@ export default class SocketService extends Service {
     * 心跳检测
     */
   private _heartbeat(iTime: number, pTime: number) {
+    const t = new Date().getTime()
     if (this._heartInterval) clearInterval(this._heartInterval)
-    return setInterval(() => {
-      const t = new Date().getTime()
+    return setTimeout(() => {
       if ((t - this._messageTime) > pTime) {
         this._reConnect()
-      } else {
-        if (this._socket?.readyState === 1) this._socket?.send(this._ping)
       }
+      this._socket?.send(this._ping)
     }, iTime)
   }
 
@@ -84,7 +83,7 @@ export default class SocketService extends Service {
       const pTime = data.content.ping_timeout * 1000
       this._heartInterval = this._heartbeat(iTime, pTime)
     } else {
-      this._store.setSocketMSg(data)
+      this._store.setSocketData(data)
     }
   }
 
@@ -105,7 +104,7 @@ export default class SocketService extends Service {
   /** 关闭 */
   public close() {
     if (this._socket) this._socket.close()
-    this._store.setSocketMSg(null)
+    this._store.setSocketData(null)
     this._onClose()
   }