更新

src/api/index.js

@@ -1,9 +1,26 @@
 import axios from "@/utils/axios.js";
 
+export const getStreet = (data) => {
+    return axios.get('city/get_street', { params: data });
+}
+
 export const orderList = (data) => {
     return axios.get('dataview/curr_order_info', { params: data });
 }
 
 export const orderRanking = (data) => {
     return axios.get('dataview/order_ranking', { params: data });
+}
+
+
+export const deliveredProductRanking = (data) => {
+    return axios.get('dataview/delivered_product_ranking', { params: data });
+}
+
+export const vehicleList = (data) => {
+    return axios.get('dataview/vehicle_list', { params: data });
+}
+
+export const latestLogistics = (data) => {
+    return axios.get('dataview/latest_logistics', { params: data });
 }

src/components/areaList.vue

@@ -1,48 +1,67 @@
 <script setup>
 import { defineProps, defineEmits, ref, nextTick, onMounted, } from "vue"
 import { useRouter } from 'vue-router'
+import { useAppStore } from "@/store/app.js";
+
 const router = useRouter()
 const emit = defineEmits(['offAreaList']);
 const choseArea = ref(false);
-import { useAppStore } from "@/store/app.js";
 
-const list = ref([
-  {
-    name: '泸县',
-    pinyin: 'luxian',
-  },
-  {
-    name: '江阳区',
-    pinyin: 'jiangyang',
-  },
-  {
-    name: '龙马潭区',
-    pinyin: 'longma',
-  },
-  {
-    name: '纳溪区',
-    pinyin: 'naxi',
-  },
-  {
-    name: '合江县',
-    pinyin: 'hejiang',
-  },
-  {
-    name: '叙永县',
-    pinyin: 'xuyong',
-  },
-  {
-    name: '古蔺县',
-    pinyin: 'gulin',
-  },
-])
+const props = defineProps({
+  list: {
+    type: Object,
+    default: () => []
+  }
+})
+
+// const list = ref([
+//   {
+//     name: '泸县',
+//     pinyin: 'luxian',
+//   },
+//   // {
+//   //   name: '江阳区',
+//   //   pinyin: 'jiangyang',
+//   // },
+//   // {
+//   //   name: '龙马潭区',
+//   //   pinyin: 'longma',
+//   // },
+//   // {
+//   //   name: '纳溪区',
+//   //   pinyin: 'naxi',
+//   // },
+//   // {
+//   //   name: '合江县',
+//   //   pinyin: 'hejiang',
+//   // },
+//   // {
+//   //   name: '叙永县',
+//   //   pinyin: 'xuyong',
+//   // },
+//   // {
+//   //   name: '古蔺县',
+//   //   pinyin: 'gulin',
+//   // },
+// ])
 
 const appStore = useAppStore();
 
 // 选镇
 const choseTownFn = (item) => {
   emit('offAreaList', item);
-  appStore.setMapInfo(item.pinyin);
+  if (item.code.length == 6) {
+    appStore.setMapInfo('luxian');
+    appStore.setAddress({
+      areaCode: item.code,
+      streetCode: ''
+    })
+  } else {
+    appStore.setAddress({
+      areaCode: appStore.address.areaCode,
+      streetCode: item.code
+    })
+  }
 }
 
 const open = () => {
@@ -62,11 +81,11 @@ defineExpose({
 })
 
 onMounted(() => {
-  list.value.forEach(item => {
-    if (item.pinyin == appStore.map_info) {
-      choseTownFn(item)
-    }
-  })
+  // list.value.forEach(item => {
+  //   if (item.pinyin == appStore.map_info) {
+  //     choseTownFn(item)
+  //   }
+  // })
 })
 
 </script>

src/components/headView.vue

@@ -3,12 +3,16 @@ import { reactive, ref, provide, nextTick, onMounted } from "vue";
 import areaList from "./areaList.vue";
 import { useRoute, useRouter } from "vue-router";
 import mitt from "@/utils/mitt";
+import { getStreet } from "@/api/index.js"
+import { useAppStore } from "@/store/app.js";
 
 const info = reactive({
   address: '泸县',
   pinyin: 'luxian'
 })
 
+const appStore = useAppStore();
+
 const areaListRef = ref(null);
 
 // 选择镇
@@ -27,11 +31,29 @@ const offAreaList = (e) => {
   mitt.emit('map_info', info);
 }
 
+const list = ref([])
+const initList = () => {
+  getStreet({
+    area_code: appStore.address.areaCode
+  }).then(res => {
+    list.value = res.data;
+    appStore.setAddress({
+      areaCode: appStore.address.appStore,
+      streetCode: res.data[0].code
+    })
+    info.address = res.data[0].name
+  })
+}
+
+
 const router = useRouter()
 const route = useRoute()
 
 const navToDelivery = () => {
-  if (route.path == '/') router.push('/delivery');
+  if (route.path == '/') {
+    // router.push('/delivery');
+    return;
+  }
   else router.back();
 }
 
@@ -57,6 +79,8 @@ onMounted(() => {
 
   mitt.emit('map_info', info);
 
+  initList();
+
   // 每秒钟更新一次时间
   setInterval(updateClock, 1000);
 })
@@ -81,6 +105,7 @@ onMounted(() => {
         {{ info.address }}  
         <areaList
           ref="areaListRef"
+          :list="list"
           :choseArea="choseArea"
           @offAreaList="offAreaList"
           style="position: absolute; top: 100%; left: 0"

src/store/app.js

@@ -4,13 +4,26 @@ import { ref } from "vue"
 export const useAppStore = defineStore('app', () => {
     const map_info = ref(localStorage.getItem('map_info') || 'luxian');
 
+    const address = ref(JSON.parse(localStorage.getItem('address') || '{}'));
+    if (!address.value.areaCode) {
+        address.value = { areaCode: 510521, streetCode: 510521100 };
+    }
+
     const setMapInfo = (e) => {
         map_info.value = e;
         localStorage.setItem('map_info', e);
     }
 
+    const setAddress = (e) => {
+        address.value.areaCode = e.areaCode;
+        address.value.streetCode = e.streetCode;
+        localStorage.setItem('address', JSON.stringify(e));
+    }
+
     return {
         map_info,
-        setMapInfo
+        address,
+        setMapInfo,
+        setAddress
     }
 })

src/view/delivery/components/bottom.vue

@@ -192,7 +192,7 @@ const initEcahrts = () => {
       seriesData.push(obj3);
     }
   });
-  console.log(seriesData);
+  // console.log(seriesData);
   const option = {
     backgroundColor: "rgba(0,0,0,0)",
     grid: {

src/view/delivery/components/left.vue

@@ -3,18 +3,19 @@ import { onMounted, reactive, ref } from "vue"
 import border from "@/components/border.vue";
 import AMapLeft from "./AMapLeft.vue";
 import * as echarts from 'echarts';
+import { useRoute } from "vue-router"
+import { latestLogistics } from "@/api/index.js";
 
+const route = useRoute();
 
-var fontColor = "#000";
-var seriesName = "";
 let noramlSize = 16;
 var datas = {
   textValue: "100%",
   colors: ["#31829d", "#009cff", "#4b5fdb"],
-  legendArr: ["待取货", "待配送", "已送达"],
+  legendArr: ["待取货", "配送中", "已送达"],
   dataArr: [
     { value: 335, name: "待取货" },
-    { value: 210, name: "待配送" },
+    { value: 210, name: "配送中" },
     { value: 410, name: "已送达" },
   ],
   company: "个"
@@ -121,8 +122,20 @@ const initEcahrts = () => {
   chart.setOption(option);
 }
 
+const info = ref({});
+
+const loadInfo = () => {
+  latestLogistics({
+    areaCode: 510524,
+    streetCode: 510524100,
+  }).then(res => {
+    info.value = res.data;
+  })
+}
+
 onMounted(() => {
-  initEcahrts()
+  loadInfo();
+  initEcahrts();
 })
 
 </script>
@@ -136,11 +149,9 @@ onMounted(() => {
         <div class="top">
           <div>
             订单编号
-            <span style="margin-left: 1rem"
-              >bzj20230923163643650ea39ba256c</span
-            >
+            <span style="margin-left: 1rem">{{ info.order_sn }}</span>
           </div>
-          <div>23-11-20</div>
+          <div>{{ info.create_time?.split(" ")[0] }}</div>
         </div>
         <div class="line">
           <div class="c"></div>
@@ -156,7 +167,7 @@ onMounted(() => {
               <div>商户名称</div>
             </div>
             <div class="name2">
-              <div>天天超市</div>
+              <div>{{ info.mer_name }}</div>
             </div>
           </div>
           <div class="name">
@@ -164,7 +175,7 @@ onMounted(() => {
               <div>商品名称</div>
             </div>
             <div class="name2">
-              <div>山花纯牛奶100ml</div>
+              <div>{{ info.store_name || "-" }}</div>
             </div>
           </div>
           <div>
@@ -183,7 +194,7 @@ onMounted(() => {
               <div>收件人</div>
             </div>
             <div class="name2">
-              <div>王**</div>
+              <div>{{ info.real_name }}</div>
             </div>
           </div>
           <div class="name">
@@ -191,7 +202,7 @@ onMounted(() => {
               <div>收件人电话</div>
             </div>
             <div class="name2">
-              <div>159****3366</div>
+              <div>{{ info.user_phone }}</div>
             </div>
           </div>
           <div>
@@ -209,7 +220,7 @@ onMounted(() => {
               <div>收件地址</div>
             </div>
             <div class="name2">
-              <div>泸县草芥幸福小区一号楼10-22</div>
+              <div>{{ info.user_address }}</div>
             </div>
           </div>
           <div class="name">
@@ -217,7 +228,7 @@ onMounted(() => {
               <div>当前状态</div>
             </div>
             <div class="name2">
-              <div>订单已完成</div>
+              <div>{{ info.status }}</div>
             </div>
           </div>
           <div>

src/view/delivery/components/right.vue

@@ -151,6 +151,7 @@ onUnmounted(() => {
         height: 0.8rem;
         background-color: #0a385b;
         border-radius: 0.8rem;
+        overflow: hidden;
         .line-body {
           height: 100%;
           border-radius: 0.8rem;

src/view/index/components/centerMap.vue

@@ -186,8 +186,13 @@ const initMap = () => {
       {
         type: "map",
         map: mapType.name,
+        label: {
+          emphasis: {
+            show: false
+          }
+        },
         emphasis: {
-          disabled: true
+          disabled: false,
         },
         select: {
           disabled: true

src/view/index/components/leftItme2.vue

@@ -145,6 +145,7 @@ onUnmounted(() => {
         height: 0.8rem;
         background-color: #0a385b;
         border-radius: 0.8rem;
+        overflow: hidden;
         .line-body {
           height: 100%;
           border-radius: 0.8rem;

src/view/index/components/rightItem1.vue

@@ -1,6 +1,42 @@
 <script setup>
-import border from "../../../components/border.vue"
+import border from "@/components/border.vue"
+import { vehicleList } from "@/api/index.js";
+import { onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 
+const list = ref([])
+const count = ref(0);
+
+const loadList = () => {
+  vehicleList({
+    eaCode: '510524',
+    streetCode: '510524100',
+  }).then(res => {
+    list.value = res.data.list;
+    count.value = res.data.count;
+    // for (let i = 0; i < 2; i++) {
+    //   list.value = [...list.value, ...res.data.list];
+    // }
+  })
+}
+
+const router = useRouter()
+const route = useRoute()
+
+const navToDelivery = (id) => {
+  if (route.path == '/') router.push({
+    path: '/delivery',
+    query: {
+      id
+    }
+  });
+  else router.back();
+}
+
+
+onMounted(() => {
+  loadList()
+})
 </script>
 
 <template>
@@ -9,7 +45,7 @@ import border from "../../../components/border.vue"
       <div class="title">三轮车列表</div>
       <div class="car-box">
         <div class="car">
-          <div class="count">13</div>
+          <div class="count">{{ count }}</div>
           <div class="name">三轮车总数</div>
         </div>
         <div class="list">
@@ -21,12 +57,20 @@ import border from "../../../components/border.vue"
             <div
               class="car-item"
               :class="{ 'car-item2': index > 1 }"
-              v-for="(item, index) in 4"
+              v-for="(item, index) in list.slice(0, 4)"
               :key="index"
+              @click="navToDelivery(item.id)"
             >
               <img class="img" src="/src/assets/img/icon-car.png" />
-              <div>川A E792P</div>
+              <div>{{ item.license }}</div>
             </div>
+            <div
+              class="car-item"
+              :class="{ 'car-item2': index > 2 && index < 5 }"
+              v-for="(item, index) in 4 - list.length"
+              :key="'em' + index"
+              style="background-image: none"
+            ></div>
           </div>
         </div>
       </div>
@@ -35,12 +79,20 @@ import border from "../../../components/border.vue"
           <div
             class="car-item"
             :class="{ 'car-item2': index > 2 && index < 5 }"
-            v-for="(item, index) in 9"
+            v-for="(item, index) in list.slice(4, 13)"
             :key="index"
+            @click="navToDelivery(item.id)"
           >
             <img class="img" src="/src/assets/img/icon-car.png" />
-            <div>川A E792P</div>
+            <div>{{ item.license }}</div>
           </div>
+          <div
+            class="car-item"
+            :class="{ 'car-item2': index > 2 && index < 5 }"
+            v-for="(item, index) in 13 - list.length"
+            :key="'em' + index"
+            style="background-image: none"
+          ></div>
         </div>
       </div>
     </div>
@@ -119,6 +171,11 @@ import border from "../../../components/border.vue"
           display: flex;
           justify-content: center;
           align-items: center;
+          div {
+            max-width: 60%;
+            overflow: hidden;
+            white-space: nowrap;
+          }
         }
       }
     }
@@ -127,7 +184,8 @@ import border from "../../../components/border.vue"
       display: flex;
       width: 100%;
       flex-wrap: wrap;
-      justify-content: space-evenly;
+      justify-content: flex-start;
+      align-items: flex-start;
       .car-item {
         height: 33%;
         width: 33.33%;
@@ -136,6 +194,11 @@ import border from "../../../components/border.vue"
         display: flex;
         justify-content: center;
         align-items: center;
+        div {
+          max-width: 60%;
+          overflow: hidden;
+          white-space: nowrap;
+        }
       }
     }
     .car-item {

src/view/index/components/rightItem2.vue

@@ -1,28 +1,10 @@
 <script setup>
 import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
 import border from "../../../components/border.vue"
-const items = reactive([
-  { id: 1, text: '莲花池 1' },
-  { id: 2, text: '莲花池 2' },
-  { id: 3, text: '莲花池 3' },
-  { id: 3, text: '莲花池 4' },
-  { id: 3, text: '莲花池 5' },
-  { id: 3, text: '莲花池 6' },
-  { id: 3, text: '莲花池 7' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-])
+import { deliveredProductRanking } from "@/api/index.js"
+
+const items = ref([]);
+const max = ref(0);
 const scrollContainerRef = ref(null);
 let timer = null;
 const autoScroll = () => {
@@ -39,7 +21,27 @@ const autoScroll = () => {
     }, 50)
   }, 1000)
 }
+
+const loadList = () => {
+  deliveredProductRanking({
+    areaCode: 510524,
+    streetCode: 510524100,
+  }).then((res) => {
+    items.value = res.data;
+    res.data.forEach(e => {
+      if (+e.total_quantity >= max.value) {
+        max.value = +e.total_quantity;
+      }
+    });
+  })
+}
+
+const cWidth = (e) => {
+  return (e / max.value * 100).toFixed(0);
+}
+
 onMounted(() => {
+  loadList()
   nextTick(() => {
     autoScroll();
   })
@@ -70,15 +72,17 @@ onUnmounted(() => {
             <div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
               {{ index + 1 }}
             </div>
-            <div class="name">{{ item.text }}</div>
+            <div class="name">
+              <div>{{ item.store_name }}</div>
+            </div>
             <div class="line">
               <div
                 class="line-body"
-                :style="{ width: '80%' }"
+                :style="{ width: cWidth(item.total_quantity) + '%' }"
                 :class="{ 'line-body2': index >= 3 }"
               ></div>
             </div>
-            <div class="count">6000</div>
+            <div class="count">{{ item.total_quantity }}</div>
           </div>
         </div>
       </div>
@@ -128,6 +132,7 @@ onUnmounted(() => {
       justify-content: space-between;
       align-items: center;
       padding: 0 10px;
+
       .rank {
         width: 50px;
         height: 1.5em;
@@ -142,12 +147,24 @@ onUnmounted(() => {
       }
       .name {
         flex: 5;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        div {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2; /* 这里的数字表示要显示的行数 */
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
       }
       .line {
         width: 50%;
         height: 0.8rem;
         background-color: #0a385b;
         border-radius: 0.8rem;
+        overflow: hidden;
         .line-body {
           height: 100%;
           border-radius: 0.8rem;