更新

src/App.vue

@@ -1,24 +1,58 @@
 <script setup>
 import { Push } from '@/common/push'
 import mitt from "@/utils/mitt";
-import {useRoute} from "vue-router";
+import {useRoute, useRouter} from "vue-router";
+import { useAppStore } from "@/store/app.js";
+
 
 const route = useRoute();
+const router = useRouter();
 
-console.log(route);
+const appSotre = useAppStore();
 
-var connection = new Push({
+const refresh = ()=>{ //刷新命令
-  url: 'ws://192.168.1.24:3131', // websocket地址
+  console.log(route.path=='/index');
+  if(route.path=='/index'){
+      if(appSotre.address.areaCode) router.push({
+        path: '/index',
+        query:{
+          areaCode: appSotre.address.areaCode
+        }
+      })
+      else router.push({
+        path: '/index'
+      })
+    }else location.reload();
+}
+
+const back = ()=>{
+  if(route.path!='/index'){
+      if(appSotre.address.areaCode) router.push({
+        path: '/index',
+        query:{
+          areaCode: appSotre.address.areaCode
+        }
+      })
+      else router.push({
+        path: '/index'
+      })
+  }
+}
+
+const connection = new Push({
+  url: 'wss://chat.lihaink.cn/tts', // websocket地址
   app_key: 'aaea61749929eb53a4bd75a1474c1d27',
 });
 // 假设用户uid为1
-var uid = 5;
+const uid = 5;
 // 浏览器监听user-2频道的消息，也就是用户uid为1的用户消息
-var user_channel = connection.subscribe('user-' + uid);
+const user_channel = connection.subscribe('user-' + uid);
 
 // 当user-2频道有message事件的消息时
 user_channel.on('message', function (data) {
-  mitt.emit(data.content.event, data.content.data);
+  if(data.content.event=='refresh') refresh();
+  if(data.content.event=='back') back();
+  else mitt.emit(data.content.event, data.content.data);
 
   console.log("收到消息--",data)
 

src/components/areaList.vue

@@ -2,6 +2,7 @@
 import { defineProps, defineEmits, ref, nextTick, onMounted, onUnmounted, } from "vue"
 import { useRouter } from 'vue-router'
 import { useAppStore } from "@/store/app.js";
+import mitt from "@/utils/mitt";
 
 const router = useRouter()
 const emit = defineEmits(['offAreaList']);
@@ -79,6 +80,14 @@ const show = () => {
   choseArea.value = !choseArea.value;
 }
 
+mitt.on("choseTown", (data) => {
+  console.log(data, ...props.list);
+  let town = props.list.find((item) => item.name == data.name);
+  if (town && town.code) {
+    choseTownFn(town)
+  }
+});
+
 defineExpose({
   open, close, show
 })

src/components/headView.vue

@@ -8,12 +8,12 @@ import { useAppStore } from "@/store/app.js";
 import { useUserStore } from "@/store/user.js";
 import axios from "axios";
 
-const reload = inject('reload');
+const reload = inject("reload");
 
 const info = reactive({
-  address: '泸县',
+  address: "泸县",
-  pinyin: 'luxian'
+  pinyin: "luxian",
-})
+});
 
 const appStore = useAppStore();
 const userSotre = useUserStore();
@@ -21,80 +21,79 @@ const userSotre = useUserStore();
 const areaListRef = ref(null);
 
 // 选择镇
-const choseArea = ref(null)
+const choseArea = ref(null);
 const open = () => {
   if (list.value.length > 0) areaListRef.value.show();
-}
+};
 // 关闭
 const offAreaList = (e) => {
-  Object.keys(e).forEach(key => {
+  Object.keys(e).forEach((key) => {
     if (e[key]) {
       info[key] = e[key];
     }
-  })
+  });
   info.address = e.name;
-  mitt.emit('map_info', info);
+  mitt.emit("map_info", info);
   reload();
-}
+};
 
-const list = ref([])
+const list = ref([]);
 const initList = async () => {
   let street = appStore.street;
   if (street?.length == 0) {
     let { data } = await getStreet({
-      area_code: appStore.address.areaCode
+      area_code: appStore.address.areaCode,
-    })
+    });
     street = data;
     appStore.setStreet(street);
   }
   let area = appStore.area;
   if (userSotre.userInfo.street_code) {
-    let data = street.find(item => item.code == appStore.address.streetCode);
+    let data = street.find((item) => item.code == appStore.address.streetCode);
     info.address = data?.name;
     list.value = [];
     appStore.setAddress({
       areaCode: appStore.address.areaCode,
-      streetCode: appStore.address.streetCode
+      streetCode: appStore.address.streetCode,
-    })
+    });
   } else {
-    let data = area.find(item => item.code == appStore.address.areaCode);
+    let data = area.find((item) => item.code == appStore.address.areaCode);
     info.address = data?.name;
     list.value = [data, ...street];
     if (appStore.address.streetCode) {
-      data = street.find(item => item.code == appStore.address.streetCode);
+      data = street.find((item) => item.code == appStore.address.streetCode);
       info.address = data?.name;
     }
     appStore.setAddress({
       areaCode: appStore.address.areaCode,
-      streetCode: appStore.address.streetCode
+      streetCode: appStore.address.streetCode,
-    })
+    });
   }
-  mitt.emit('map_info', info);
+  mitt.emit("map_info", info);
-}
+};
 const initList2 = async () => {
   getArea({
-    city_code: 510500
+    city_code: 510500,
-  }).then(res=>{
+  }).then((res) => {
     console.log(res);
     // list.value = res.data;
     // appStore.setAddress({
     //   areaCode: res.data[0].code,
     //   streetCode: ''
     // })
-  })
+  });
-  mitt.emit('map_info', info);
+  mitt.emit("map_info", info);
-}
+};
 
-const router = useRouter()
+const router = useRouter();
-const route = useRoute()
+const route = useRoute();
 
 const navToDelivery = () => {
-  if (route.path == '/') {
+  if (route.path == "/") {
     // router.push('/delivery');
     return;
-  }
+  } else router.back();
-  else router.back();
+};
-}
 
 let nowTime = ref([]);
 
@@ -107,41 +106,58 @@ const updateClock = () => {
   let m = now.getMonth() + 1;
   let d = now.getDate();
 
-  nowTime.value[0] = y + '.' + m.toString().padStart(2, '0') + '.' + d.toString().padStart(2, '0');
+  nowTime.value[0] =
+    y +
+    "." +
+    m.toString().padStart(2, "0") +
+    "." +
+    d.toString().padStart(2, "0");
 
-  nowTime.value[1] = hours.toString().padStart(2, '0') + ':' +
+  nowTime.value[1] =
-    minutes.toString().padStart(2, '0') + ':' +
+    hours.toString().padStart(2, "0") +
-    seconds.toString().padStart(2, '0');
+    ":" +
-}
+    minutes.toString().padStart(2, "0") +
+    ":" +
+    seconds.toString().padStart(2, "0");
+};
 
 const logout = () => {
   // router.replace('/login')
-  router.push('/login')
+  router.push("/login");
-}
+};
 
-const weather = ref("暂无天气信息")
+const weather = ref("暂无天气信息");
 const initWeather = (city = 510500) => {
-  axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?city=${city}&key=5731d3b4c3f34e09226e084ce556e259`).then((res) => {
+  axios
-    if (res.data.status == 1) {
+    .get(
-      weather.value = res.data.lives[0].weather;
+      `https://restapi.amap.com/v3/weather/weatherInfo?city=${city}&key=5731d3b4c3f34e09226e084ce556e259`
-    }
+    )
-  }).catch((e) => {
+    .then((res) => {
-    console.log(e);
+      if (res.data.status == 1) {
-  })
+        weather.value = res.data.lives[0].weather;
-}
+      }
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+};
 
-mitt.on("choserArea", (data)=>{
+mitt.on("choserArea", (data) => {
-  console.log(data);
+  appStore.setAddress({
-})
+    areaCode: data.code,
+    streetCode: "",
+  });
+  initList();
+});
 
 onMounted(() => {
   console.log(route);
-  if(route.query.areaCode){
+  if (route.query.areaCode) {
-    console.log('route',route.query.areaCode);
+    console.log("route", route.query.areaCode);
     appStore.setAddress({
       areaCode: route.query.areaCode,
-      streetCode: route.query.streetCode||''
+      streetCode: route.query.streetCode || "",
-    })
+    });
   }
   initList();
   initList2();
@@ -150,7 +166,7 @@ onMounted(() => {
   setInterval(updateClock, 1000);
 
   initWeather();
-})
+});
 </script>
 
 <template>

src/router/index.js

@@ -3,12 +3,13 @@ import { createRouter, createWebHistory } from "vue-router"
 const routes = [
     {
         path: '/',
-        name: 'index',
+        name: 'app',
         component: () => import('../layout/index.vue'),
+        redirect: 'index',
         children: [
             {
-                path: '/',
+                path: '/index',
-                name: '',
+                name: 'index',
                 component: () => import('../view/index/index.vue')
             },
             {

src/view/delivery/components/AMap.vue

@@ -9,22 +9,22 @@ const loading = ref(true);
 const props = defineProps({
   list: {
     type: Object,
-    default: () => []
+    default: () => [],
   },
   open: {
     type: String,
-    default: ''
+    default: ()=>"",
-  }
+  },
-})
+});
 
 const initMap = () => {
   AMapLoader.load({
     key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key，首次调用 load 时必填
     version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-    plugins: ['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    plugins: ["AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
     Loca: {
-      version: '2.0.0'
+      version: "2.0.0",
-    }
+    },
   })
     .then((AMap) => {
       map = new AMap.Map("container", {
@@ -35,98 +35,102 @@ const initMap = () => {
         mapStyle: "amap://styles/darkblue",
       });
       // 监听地图加载完成事件
-      map.on('complete', () => {
+      map.on("complete", () => {
         // 地图加载完成后执行的操作
         setTimeout(() => {
           loading.value = false;
-        }, 500)
+        }, 500);
       });
       map.setPitch(30);
 
-      let geocoder = new AMap.Geocoder();
+      if (props.open.length>0) {
+        let geocoder = new AMap.Geocoder();
+        geocoder.getLocation(props.open, function (status, result) {
+          if (status === "complete" && result.info === "OK") {
+            // 获取成功，result.geocodes包含了返回的经纬度信息
+            let latlong = result.geocodes[0].location;
+            let start = [latlong.lng, latlong.lat];
+            let line = [];
+            map.setCenter(start);
 
+            // 创建 AMap.Icon 实例：
+            const icon = new AMap.Icon({
+              size: new AMap.Size(50, 60), // 图标尺寸
+              // vue3/vite 需要用特定的本地图片引入方式，不可require引入
+              image: new URL(
+                "/src/assets/delivery_img/icon10.png",
+                import.meta.url
+              ).href, // Icon的图像
+              imageSize: new AMap.Size(50, 60), // 根据所设置的大小拉伸或压缩图片
+              imageOffset: new AMap.Pixel(0, 0),
+            });
+            // 创建一个 Marker 实例：
+            const marker = new AMap.Marker({
+              position: start, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+              icon: icon,
+              offset: new AMap.Pixel(-25, -60), // 图标相对于标记点的位置偏移量
+            });
 
-      geocoder.getLocation(props.open, function (status, result) {
+            // 将创建的点标记添加到已有的地图实例：
-        if (status === 'complete' && result.info === 'OK') {
+            map.add(marker);
-          // 获取成功，result.geocodes包含了返回的经纬度信息
-          let latlong = result.geocodes[0].location;
-          let start = [latlong.lng, latlong.lat];
-          let line = [];
-          map.setCenter(start);
 
-          // 创建 AMap.Icon 实例：
+            props.list.forEach((item) => {
-          const icon = new AMap.Icon({
+              geocoder.getLocation(item, function (status, result) {
-            size: new AMap.Size(50, 60),    // 图标尺寸
+                if (status === "complete" && result.info === "OK") {
-            // vue3/vite 需要用特定的本地图片引入方式，不可require引入
+                  // 获取成功，result.geocodes包含了返回的经纬度信息
-            image: new URL('/src/assets/delivery_img/icon10.png', import.meta.url).href,  // Icon的图像
+                  let geocodes = result.geocodes[0].location;
-            imageSize: new AMap.Size(50, 60), // 根据所设置的大小拉伸或压缩图片
+                  line.push([geocodes.lng, geocodes.lat]);
-            imageOffset: new AMap.Pixel(0, 0)
+                  if (line.length == props.list.length) {
-          });
+                    initLine(start, line);
-          // 创建一个 Marker 实例：
+                  }
-          const marker = new AMap.Marker({
+                } else {
-            position: start,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+                  // 获取失败，可根据具体需求进行错误处理
-            icon: icon,
+                  console.log("获取经纬度失败");
-            offset: new AMap.Pixel(-25, -60), // 图标相对于标记点的位置偏移量
-          });
-
-          // 将创建的点标记添加到已有的地图实例：
-          map.add(marker);
-
-          props.list.forEach(item => {
-            geocoder.getLocation(item, function (status, result) {
-              if (status === 'complete' && result.info === 'OK') {
-                // 获取成功，result.geocodes包含了返回的经纬度信息
-                let geocodes = result.geocodes[0].location;
-                line.push([geocodes.lng, geocodes.lat]);
-                if (line.length == props.list.length) {
-                  initLine(start, line);
                 }
-              } else {
+              });
-                // 获取失败，可根据具体需求进行错误处理
+            });
-                console.log('获取经纬度失败');
+          } else {
-              }
+            // 获取失败，可根据具体需求进行错误处理
-            })
+            console.log("获取经纬度失败", props);
-          })
+            // setTimeout(() => {
-        } else {
+            //   initMap();
-          // 获取失败，可根据具体需求进行错误处理
+            // }, 2000);
-          console.log('获取经纬度失败');
+          }
-        }
+          setTimeout(() => {
-      });
+            loading.value = false;
-
+          }, 500);
+        });
+      }
     })
     .catch((e) => {
       console.log(e);
     });
-}
+};
 
 const initLine = (start = [], line = []) => {
-
   let features = [];
-  line.forEach((item => {
+  line.forEach((item) => {
     features.push({
-      "type": "Feature",
+      type: "Feature",
-      "properties": {},
+      properties: {},
-      "geometry": {
+      geometry: {
-        "type": "LineString",
+        type: "LineString",
-        "coordinates": [
+        coordinates: [start, item],
-          start,
+      },
-          item
+    });
-        ]
+  });
-      }
-    },)
-  }))
 
   // 创建 Loca 实例
   let loca = new Loca.Container({
-    map: map
+    map: map,
   });
 
   // 创建数据源
   let dataSource = new Loca.GeoJSONSource({
     // url: 'xxx.geojson', 或者使用 data 字段
     data: {
-      "type": "FeatureCollection",
+      type: "FeatureCollection",
-      "features": features
+      features: features,
     },
   });
 
@@ -140,9 +144,9 @@ const initLine = (start = [], line = []) => {
     depth: true,
   });
 
-  pulseLink.setSource(dataSource)
+  pulseLink.setSource(dataSource);
   pulseLink.setStyle({
-    unit: 'meter',
+    unit: "meter",
     dash: [80, 0, 80, 0],
     lineWidth: function () {
       return [30, 5];
@@ -158,17 +162,21 @@ const initLine = (start = [], line = []) => {
     },
     flowLength: 300,
     lineColors: function (index, feat) {
-      return ['rgba(47, 194, 250, 0.20)', 'rgba(91, 219, 246, 0.70)', 'rgba(0, 156, 255, 0.20)'];
+      return [
+        "rgba(47, 194, 250, 0.20)",
+        "rgba(91, 219, 246, 0.70)",
+        "rgba(0, 156, 255, 0.20)",
+      ];
     },
     maxHeightScale: 0.4, // 弧顶位置比例
-    headColor: 'rgba(91, 219, 246, 1)',
+    headColor: "rgba(91, 219, 246, 1)",
-    trailColor: 'rgba(255, 255,0,0)',
+    trailColor: "rgba(255, 255,0,0)",
   });
 
   // 添加到地图上
   loca.add(pulseLink);
   loca.animate.start();
-}
+};
 
 onMounted(() => {
   initMap();
@@ -182,13 +190,13 @@ onUnmounted(() => {
 <template>
   <div class="c-box">
     <div id="container"></div>
-    <div class="loading" v-if="loading">
+    <div class="loading" v-show="loading">
       <dv-loading>加载中...</dv-loading>
     </div>
   </div>
 </template>
 
-<style scoped lang ="scss">
+<style scoped lang="scss">
 .c-box {
   width: 100%;
   height: 100%;