更新

src/api/index.js

@@ -44,3 +44,8 @@ export const dateCangeCrderCount = (data) => {
 export const logisticsMapCount = (data) => {
     return axios.get('dataview/logistics_map_count', { params: data });
 }
+
+// 首页地图镇级统计信息
+export const townMapCoun = (data) => {
+    return axios.get('dataview/town_map_count', { params: data });
+}

src/components/headView.vue

@@ -78,6 +78,11 @@ const updateClock = () => {
     seconds.toString().padStart(2, '0');
 }
 
+const logout = () => {
+  // router.replace('/login')
+  router.push('/login')
+}
+
 onMounted(() => {
 
   mitt.emit('map_info', info);
@@ -120,7 +125,7 @@ onMounted(() => {
         多云
       </div>
       <img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
-      <div class="item">
+      <div class="item" @click="logout">
         <img src="/src/assets/head_img/close.png" alt="" />
       </div>
     </div>

src/view/delivery/components/AMap.vue

@@ -6,11 +6,22 @@ let map = null;
 
 const loading = ref(true);
 
-onMounted(() => {
+const props = defineProps({
+  list: {
+    type: Object,
+    default: () => []
+  },
+  open: {
+    type: String,
+    default: ''
+  }
+})
+
+const initMap = () => {
   AMapLoader.load({
     key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key，首次调用 load 时必填
     version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    plugins: ['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
     Loca: {
       version: '2.0.0'
     }
@@ -32,6 +43,17 @@ onMounted(() => {
       });
       map.setPitch(30);
 
+      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),    // 图标尺寸
@@ -42,7 +64,7 @@ onMounted(() => {
           });
           // 创建一个 Marker 实例：
           const marker = new AMap.Marker({
-        position: new AMap.LngLat(105.441866, 28.87098),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+            position: start,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
             icon: icon,
             offset: new AMap.Pixel(-25, -60), // 图标相对于标记点的位置偏移量
           });
@@ -50,67 +72,66 @@ onMounted(() => {
           // 将创建的点标记添加到已有的地图实例：
           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('获取经纬度失败');
+        }
+      });
+
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+}
+
+const initLine = (start = [], line = []) => {
+
+  let features = [];
+  line.forEach((item => {
+    features.push({
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "LineString",
+        "coordinates": [
+          start,
+          item
+        ]
+      }
+    },)
+  }))
+
   // 创建 Loca 实例
-      var loca = new Loca.Container({
+  let loca = new Loca.Container({
     map: map
   });
 
   // 创建数据源
-      var dataSource = new Loca.GeoJSONSource({
+  let dataSource = new Loca.GeoJSONSource({
     // url: 'xxx.geojson', 或者使用 data 字段
     data: {
       "type": "FeatureCollection",
-          "features": [
+      "features": features
-            {
-              "type": "Feature",
-              "properties": {},
-              "geometry": {
-                "type": "LineString",
-                "coordinates": [
-                  [105.441866, 28.87098],
-                  [105.449866, 28.87998]
-                ]
-              }
-            },
-            {
-              "type": "Feature",
-              "properties": {},
-              "geometry": {
-                "type": "LineString",
-                "coordinates": [
-                  [105.441866, 28.87098],
-                  [105.440866, 28.87658]
-                ]
-              }
-            },
-            {
-              "type": "Feature",
-              "properties": {},
-              "geometry": {
-                "type": "LineString",
-                "coordinates": [
-                  [105.441866, 28.87098],
-                  [105.435866, 28.87658]
-                ]
-              }
-            },
-            {
-              "type": "Feature",
-              "properties": {},
-              "geometry": {
-                "type": "LineString",
-                "coordinates": [
-                  [105.441866, 28.87098],
-                  [105.43, 28.87]
-                ]
-              }
-            }
-          ]
     },
   });
 
   // 弧线
-      var pulseLink = new Loca.PulseLinkLayer({
+  let pulseLink = new Loca.PulseLinkLayer({
     // loca,
     zIndex: 30,
     opacity: 1,
@@ -143,13 +164,14 @@ onMounted(() => {
     headColor: 'rgba(91, 219, 246, 1)',
     trailColor: 'rgba(255, 255,0,0)',
   });
+
+  // 添加到地图上
   loca.add(pulseLink);
   loca.animate.start();
-      // 添加到地图上
+}
-    })
+
-    .catch((e) => {
+onMounted(() => {
-      console.log(e);
+  initMap();
-    });
 });
 
 onUnmounted(() => {

src/view/delivery/components/AMapLeft.vue

@@ -48,7 +48,7 @@ const initMap = () => {
 
 
       let str = props.info.user_address;
-      str = str.replace(/[1-10]队/, '');
+      str = str.replace(/\d+队/, '');
 
       if (props.info.mer_lat && props.info.mer_long) {
         let geocoder = new AMap.Geocoder({

src/view/delivery/components/center.vue

@@ -7,13 +7,22 @@ import { logisticsMapCount } from "@/api/index.js";
 
 const appStore = useAppStore();
 
+const list = ref([]);
+const open = ref({});
 const initInfo = () => {
   logisticsMapCount({
     areaCode: appStore.delivery_address.areaCode,
     streetCode: appStore.delivery_address.streetCode,
     courier_id: appStore.delivery_address.courier_id
   }).then(res => {
-    console.log(res);
+    res.data.latestTenOrder.forEach(item => {
+      list.value.push(item.receiver_address.replace(/\d+队/, ''))
+    })
+    // 测试数据使用, 可删除, 测试前需正则匹配\d+队5353
+    // list.value[0] += '和瑞世纪城';
+    // list.value[1] += '县政府';
+    // list.value[2] += '阳光国际城 ';
+    open.value = res.data.latestOrder.mer_address;
   })
 }
 
@@ -30,7 +39,7 @@ onMounted(() => {
 <template>
   <div class="box">
     <div class="map">
-      <AMap></AMap>
+      <AMap :list="list" :open="open"></AMap>
     </div>
     <div class="border"></div>
     <div class="btn">

src/view/index/components/centerItem1.vue

@@ -1,6 +1,33 @@
 <script setup>
 import ball from "./ball.vue";
 import centerMap from "./centerMap.vue";
+import { townMapCoun } from "@/api/index.js";
+import { useAppStore } from "@/store/app.js"
+import { onMounted, ref } from "vue";
+
+const appStore = useAppStore();
+
+const list = ref([])
+
+const initData = () => {
+  townMapCoun({
+    areaCode: appStore.address.areaCode,
+    streetCode: appStore.address.streetCode,
+  }).then((res) => {
+    res.data.townList.forEach(item => {
+      list.value.push({
+        ...item,
+        ...{
+          value: [item.lng, item.lat]
+        }
+      })
+    });
+  })
+}
+
+onMounted(() => {
+  initData()
+})
 
 </script>
 
@@ -9,7 +36,7 @@ import centerMap from "./centerMap.vue";
     <div class="ball">
       <ball class="ball1"></ball>
     </div>
-    <centerMap class="c-map"></centerMap>
+    <centerMap v-if="list.length > 0" class="c-map" :list="list"></centerMap>
   </div>
 </template>
 

src/view/index/components/centerMap.vue

@@ -11,9 +11,15 @@ import longma from "@/assets/json/longma.json";
 import naxi from "@/assets/json/naxi.json";
 import { useAppStore } from "@/store/app.js";
 
-
 const appStore = useAppStore();
 
+const props = defineProps({
+  list: {
+    type: Object,
+    default: () => []
+  }
+})
+
 const mapType = reactive({
   name: '',
   json: ''
@@ -30,36 +36,14 @@ const changeType = (name = 'luxian') => {
   if (name == 'naxi') mapType.json = naxi;
 }
 
-let dataValue = [
+let dataValue = []
-  {
-    name: '测试一', value: [105.38, 29.15],
-    store: 2065, team: 33,
-  },
-  {
-    name: '测试二', value: [105.62, 29.05],
-    store: 665, team: 895,
-  },
-  {
-    name: '测试三', value: [105.55, 29.10],
-    store: 66, team: 5422,
-  },
-  {
-    name: '测试四', value: [105.70, 29.23],
-    store: 9887, team: 1562,
-  },
-  {
-    name: '泸县', value: [105.372029, 29.141426],
-    store: 9999, team: 1000,
-  },
-
-]
 
 const customFormatter = (params) => {
   // console.log(params.data);
-  return `{img|${params.data.name}}\n{t|店铺${params.data.store}个, 团队${params.data.team}个}`
+  return `{img|${params.data.street_name}}\n{t|店铺${params.data.mer_count}个, 团队${params.data.service_group_count}个}`
 }
 
-const initDateValue = () => {
+const initDataValue = () => {
   dataValue.forEach(item => {
     item.label = {
       show: true, // 显示标签
@@ -279,13 +263,14 @@ const initMap = () => {
 }
 
 onMounted(() => {
-  changeType(appStore.map_info);
+  dataValue = props.list;
-  initDateValue();
+  changeType('xuyong');
+  initDataValue();
   initMap();
   nextTick(() => {
     mitt.on('map_info', e => {
       changeType(e.pinyin);
-      initDateValue();
+      initDataValue();
       initMap();
     })
   })

src/view/login/index.vue

@@ -98,6 +98,7 @@ const submit = () => {
           <button class="btn" @click="submit">登录</button>
         </div>
       </div>
+      <div class="title"><span>吟龙物流信息监控溯源可视化大屏</span></div>
     </div>
   </dv-full-screen-container>
 </template>
@@ -115,6 +116,29 @@ const submit = () => {
   background-image: url(../../assets/login_img/bg.png);
   background-size: 100% 100%;
   overflow: hidden;
+  position: relative;
+  .title {
+    position: absolute;
+    top: 20%;
+    right: 10%;
+    width: 35%;
+    padding-bottom: 0.4rem;
+    height: 4rem;
+    line-height: 4rem;
+    font-size: 2.6rem;
+    font-family: "ifonts";
+    background-image: url(../../assets/login_img/title.png);
+    background-size: 100% 100%;
+
+    span {
+      background-image: -webkit-linear-gradient(top, #061028, #144e8b);
+      -webkit-background-clip: text;
+      /* -webkit-text-fill-color: transparent; */
+      color: rgba(0, 0, 0, 0);
+      -webkit-text-stroke-color: #5fa2ec;
+      -webkit-text-stroke-width: 1px;
+    }
+  }
 }
 
 .form {