更新

src/api/index.js

@@ -1,6 +1,16 @@
 import axios from "@/utils/axios.js";
 
-// 获取街道
+// 登录
+export const login = (data) => {
+    return axios.post('dataview/login', data);
+}
+
+// 区县
+export const getArea = (data) => {
+    return axios.get('city/get_area', { params: data });
+}
+
+// 乡镇
 export const getStreet = (data) => {
     return axios.get('city/get_street', { params: data });
 }
@@ -10,6 +20,12 @@ export const orderList = (data) => {
     return axios.get('dataview/curr_order_info', { params: data });
 }
 
+// 订单列表
+export const logisticsList = (data) => {
+    return axios.get('dataview/logistics_list', { params: data });
+}
+
+
 // 订单排行
 export const orderRanking = (data) => {
     return axios.get('dataview/order_ranking', { params: data });

src/components/Businesses.vue

@@ -11,22 +11,16 @@ const appStore = useAppStore();
 
 const route = useRouter()
 
-const ShwostoreType = ref(false)
-const test = () => {
-  console.log(6)
-}
-
 const isShow = ref(false);
 
 const hdClick = (e) => {
   // console.log(e)
-  if (e.columnIndex == 10) {
+  // if (e.columnIndex == 10) {
-    // alert(45)
+  //   // alert(45)
-    route.replace('/storeLogin')
+  //   route.replace('/storeLogin')
-  }
+  // }
-
-
 }
+
 const initData = (data) => {
   let arr = [];
   for (let i = 0; i < data.length; i++) {
@@ -78,7 +72,8 @@ const pages = ref({
   page: 1,
   limit: 30,
   total: 0,
-  pageAll: 0
+  pageAll: 0,
+  type: '', //类型 1-待取货, 2-配送中, 3-已完成
 })
 
 const loadOrderList = (pramas) => {

src/components/Businesses2.vue

@@ -0,0 +1,198 @@
+<script setup>
+// 102B3
+import { ref, reactive, onMounted } from "vue"
+import { useRouter } from 'vue-router'
+import paging from "./paging.vue"
+import mitt from "@/utils/mitt"
+import { logisticsList } from "@/api/index.js"
+import { useAppStore } from "@/store/app.js"
+
+const appStore = useAppStore();
+
+const route = useRouter()
+
+const isShow = ref(false);
+
+const hdClick = (e) => {
+  // console.log(e)
+  // if (e.columnIndex == 10) {
+  //   // alert(45)
+  //   route.replace('/storeLogin')
+  // }
+}
+
+const initData = (data) => {
+  let arr = [];
+  for (let i = 0; i < data.length; i++) {
+    let calss = 'div';
+    if (i % 2 != 0) {
+      calss = 'div div2'
+    }
+    arr.push(
+      [
+        `<div class="${calss}">${data[i].order_sn || '-'}</div>`,
+        `<div class="${calss}">${data[i].real_name || '-'}</div>`,
+        `<div class="${calss}">${data[i].user_phone || '-'}</div>`,
+        `<div class="${calss}">${data[i].user_address || '-'}</div>`,
+        `<div class="${calss}">${data[i].store_name || '-'}</div>`,
+        `<div class="${calss}">${data[i].mer_name || '-'}</div>`,
+        `<div class="${calss}">${data[i].create_time || '-'}</div>`,
+        `<div class="${calss}">${data[i].status || '-'}</div>`,
+        `<div class="${calss}">${data[i].courier || '-'}</div>`,
+      ]
+    )
+  }
+  configs.data = arr;
+  scrollBoardRef.value?.updateRows(configs.data);
+}
+const scrollBoardRef = ref(null);
+const configs = reactive({
+  headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
+  oddRowBGC: '',
+  evenRowBGC: "",
+  rowNum: 20,
+  header: [
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>订单编号</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人电话</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人地址</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>商品名称</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>店铺名称</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>下单时间</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>订单状态</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>配送人员</div>`,
+  ],
+  data: [
+  ]
+})
+
+const pages = ref({
+  areaCode: appStore.address.areaCode,
+  streetCode: appStore.address.streetCode,
+  page: 1,
+  limit: 30,
+  total: 0,
+  pageAll: 0,
+  type: 1, //类型 1-待取货, 2-配送中, 3-已完成
+})
+
+const loadOrderList = (pramas) => {
+  logisticsList(pramas).then((res) => {
+    initData(res.data.currOrderList);
+    pages.value.total = res.data.currOrderCount;
+    pages.value.pageAll = Math.ceil(res.data.currOrderCount / pages.value.limit);
+  }).catch(err => {
+    console.error(err);
+  })
+}
+
+onMounted(() => {
+  // loadOrderList();
+  mitt.on('showBusinesses2', (e) => {
+    pages.type = e.type;
+    isShow.value = !isShow.value;
+  })
+})
+</script>
+
+<template>
+  <transition name="fade">
+    <div class="bus" v-if="isShow">
+      <div class="c-list-box">
+        <div class="c-l-top">
+          <div class="title">订单列表</div>
+          <div class="close" @click="isShow = false">关闭</div>
+        </div>
+        <dv-scroll-board
+          ref="scrollBoardRef"
+          :config="configs"
+          @click="hdClick"
+          style="width: 100%; height: 92%"
+        />
+        <div class="c-l-bottom">
+          <paging :page="pages" @loadList="loadOrderList"></paging>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style lang="scss" scoped>
+.bus {
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.c-list-box {
+  width: 94%;
+  height: 94%;
+  position: relative;
+  background-image: url(../assets/img/list-box.png);
+  background-size: 100% 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  box-sizing: border-box;
+  padding: 3rem;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: center;
+  .c-l-top {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .title {
+      font-size: 1.2rem;
+      font-family: "ifonts";
+    }
+    .close {
+      font-size: 0.8rem;
+      padding: 0.1rem 1.5rem;
+      background-color: rgba(0, 156, 255, 0.3);
+      border: 0.07rem solid rgba(91, 219, 246, 1);
+      border-radius: 0.2rem;
+      cursor: pointer;
+    }
+  }
+  .c-l-bottom {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+:deep(.div) {
+  width: 100%;
+  text-align: center;
+  height: 100%;
+  color: aliceblue;
+  background: rgba(91, 219, 246, 0.2);
+  white-space: nowrap; /* 防止文本换行 */
+  overflow: hidden; /* 溢出部分隐藏 */
+  text-overflow: ellipsis; /* 显示省略号 */
+}
+
+:deep(.div2) {
+  background: rgba(0, 168, 255, 0.16);
+}
+
+:deep(.ceil) {
+  padding: 0 !important;
+  margin-bottom: 0.3rem;
+  margin-right: 0.1rem;
+}
+
+:deep(.header-item) {
+  padding: 0 !important;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/components/headView.vue

@@ -3,8 +3,9 @@ import { reactive, ref, provide, nextTick, onMounted, inject } 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 { getStreet } from "@/api/index.js";
 import { useAppStore } from "@/store/app.js";
+import { useUserStore } from "@/store/user.js";
 
 const reload = inject('reload');
 
@@ -14,13 +15,14 @@ const info = reactive({
 })
 
 const appStore = useAppStore();
+const userSotre = useUserStore();
 
 const areaListRef = ref(null);
 
 // 选择镇
 const choseArea = ref(null)
 const open = () => {
-  areaListRef.value.show();
+  if (list.value.length > 0) areaListRef.value.show();
 }
 // 关闭
 const offAreaList = (e) => {
@@ -35,20 +37,40 @@ const offAreaList = (e) => {
 }
 
 const list = ref([])
-const initList = () => {
+const initList = async () => {
-  getStreet({
+  let street = appStore.street;
-    area_code: appStore.address.areaCode
+  if (street?.length == 0) {
-  }).then(res => {
+    let { data } = await getStreet({
-    list.value = res.data;
+      area_code: appStore.address.areaCode
-    appStore.setAddress({
-      areaCode: appStore.address.appStore,
-      streetCode: res.data[0].code
     })
-    info.address = res.data[0].name
+    street = data;
-  })
+    appStore.setStreet(street);
+  }
+  let area = appStore.area;
+  if (userSotre.userInfo.street_code) {
+    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
+    })
+  } else {
+    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);
+      info.address = data?.name;
+    }
+    appStore.setAddress({
+      areaCode: appStore.address.areaCode,
+      streetCode: appStore.address.streetCode
+    })
+  }
+  mitt.emit('map_info', info);
 }
 
-
 const router = useRouter()
 const route = useRoute()
 
@@ -84,9 +106,6 @@ const logout = () => {
 }
 
 onMounted(() => {
-
-  mitt.emit('map_info', info);
-
   initList();
 
   // 每秒钟更新一次时间

src/layout/index.vue

@@ -1,9 +1,11 @@
 <script setup>
 import headView from "@/components/headView.vue";
 import Businesses from "@/components/Businesses.vue";
-import { ref, nextTick, provide, onMounted, onUnmounted } from "vue";
+import Businesses2 from "@/components/Businesses2.vue";
+import { ref, nextTick, provide, watch, onMounted, onUnmounted } from "vue";
+import mitt from "@/utils/mitt";
 
-const show = ref(true);
+const show = ref(false);
 const reload = () => {
   show.value = false;
   nextTick(() => {
@@ -23,10 +25,13 @@ const startReLoad = () => {
 }
 
 onMounted(() => {
-  startReLoad();
+  mitt.on('map_info', e => {
-  window.addEventListener('mousemove', startReLoad);
+    reload();
-  window.addEventListener('keypress', startReLoad);
+    startReLoad();
-  window.addEventListener('click', startReLoad);
+    window.addEventListener('mousemove', startReLoad);
+    window.addEventListener('keypress', startReLoad);
+    window.addEventListener('click', startReLoad);
+  })
 })
 
 onUnmounted(() => {
@@ -40,10 +45,15 @@ onUnmounted(() => {
 <template>
   <dv-full-screen-container class="body">
     <headView></headView>
-    <div style="height: calc(100% - 3.75rem)">
+    <div style="height: calc(100% - 3.75rem)" v-if="show">
-      <router-view v-if="show"></router-view>
+      <router-view v-slot="{ Component }">
+        <transition name="fade">
+          <component :is="Component"></component>
+        </transition>
+      </router-view>
     </div>
     <Businesses class="businesses"></Businesses>
+    <Businesses2 class="businesses"></Businesses2>
   </dv-full-screen-container>
 </template>
 
@@ -63,4 +73,14 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>

src/store/app.js

@@ -1,5 +1,6 @@
 import { defineStore } from "pinia"
 import { ref } from "vue"
+import areaList from "@/utils/areaList.js"
 
 export const useAppStore = defineStore('app', () => {
     const map_info = ref(localStorage.getItem('map_info') || 'luxian');
@@ -15,11 +16,12 @@ export const useAppStore = defineStore('app', () => {
     }
 
     // 测试使用的初始化配置
-    address.value = { areaCode: 510524, streetCode: 510524100 };
+    // address.value = { areaCode: 510524, streetCode: 510524100 };
 
     const setAddress = (e) => {
-        e.areaCode ? address.value.areaCode = e.areaCode : null;
+        console.log('更新', e);
-        e.streetCode ? address.value.streetCode = e.streetCode : null;
+        address.value.areaCode = e.areaCode;
+        address.value.streetCode = e.streetCode;
         localStorage.setItem('address', JSON.stringify(e));
     }
 
@@ -39,23 +41,37 @@ export const useAppStore = defineStore('app', () => {
 
     const delivery_address = ref(JSON.parse(localStorage.getItem('delivery_address') || '{}'));
 
-    if (!delivery_address.value.areaCode) {
+    // if (!delivery_address.value.areaCode) {
-        delivery_address.value = { areaCode: 510524, streetCode: 510524100 };
+    //     delivery_address.value = { areaCode: 510524, streetCode: 510524100 };
-    }
+    // }
 
     const setDeliveryAddress = (e) => {
         delivery_address.value = e;
         localStorage.setItem('delivery_address', JSON.stringify(e));
     }
 
+    const area = ref(areaList);
+    const setArea = (data) => {
+        area.value = data;
+    }
+
+    const street = ref([]);
+    const setStreet = (data) => {
+        street.value = data;
+    }
+
     return {
         map_info,
         address,
         delivery,
         delivery_address,
+        area,
+        street,
         setMapInfo,
         setAddress,
         setDelivery,
-        setDeliveryAddress
+        setDeliveryAddress,
+        setArea,
+        setStreet
     }
 })

src/store/user.js

@@ -0,0 +1,26 @@
+import { defineStore } from "pinia"
+import { ref } from "vue"
+
+export const useUserStore = defineStore('user', () => {
+
+    const userInfo = ref(JSON.parse(localStorage.getItem('userInfo') || '{}'));
+
+    const setUserInfo = (data) => {
+        userInfo.value = data;
+        localStorage.setItem('userInfo', JSON.stringify(data));
+    }
+
+    const token = ref(localStorage.getItem('token') || '');
+
+    const setToken = (data) => {
+        token.value = data;
+        localStorage.setItem('token', data);
+    }
+
+    return {
+        userInfo,
+        token,
+        setUserInfo,
+        setToken
+    }
+})

src/utils/areaList.js

@@ -0,0 +1,39 @@
+const areaList = [
+    {
+        "id": 2043,
+        "code": "510502",
+        "name": "江阳区"
+    },
+    {
+        "id": 2044,
+        "code": "510503",
+        "name": "纳溪区"
+    },
+    {
+        "id": 2045,
+        "code": "510504",
+        "name": "龙马潭区"
+    },
+    {
+        "id": 2046,
+        "code": "510521",
+        "name": "泸县"
+    },
+    {
+        "id": 2047,
+        "code": "510522",
+        "name": "合江县"
+    },
+    {
+        "id": 2048,
+        "code": "510524",
+        "name": "叙永县"
+    },
+    {
+        "id": 2049,
+        "code": "510525",
+        "name": "古蔺县"
+    }
+]
+
+export default areaList;

src/view/delivery/components/AMap.vue

@@ -193,9 +193,13 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
   position: relative;
+  overflow: hidden;
   #container {
+    position: absolute;
+    top: -10%;
+    left: 0;
     width: 100%;
-    height: 100%;
+    height: 130%;
   }
   .loading {
     width: 100%;

src/view/delivery/components/AMapLeft.vue

@@ -119,9 +119,13 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
   position: relative;
+  overflow: hidden;
   #container-left {
+    position: absolute;
+    top: -10%;
+    left: 0;
     width: 100%;
-    height: 100%;
+    height: 130%;
   }
   .loading {
     width: 100%;

src/view/delivery/components/bottom.vue

@@ -145,7 +145,7 @@ const initEcahrts = (yData1 = [], yData2 = [], yData3 = [], yData4 = []) => {
               y2: 1,
               colorStops: [{
                 offset: 0,
-                color: colorArr[index].start + "0.3)"
+                color: colorArr[index].start + "0.2)"
               },
               {
                 offset: 0.5,
@@ -157,7 +157,9 @@ const initEcahrts = (yData1 = [], yData2 = [], yData3 = [], yData4 = []) => {
               }
               ],
               globalCoord: false
-            }
+            },
+            borderWidth: 1,
+            borderColor: colorArr[index].end,
           }
         }
       };

src/view/delivery/components/center.vue

@@ -2,8 +2,10 @@
 import { onMounted, reactive, ref } from "vue"
 import border from "@/components/border.vue";
 import AMap from "./AMap.vue";
+import mitt from "@/utils/mitt";
 import { useAppStore } from "@/store/app.js"
 import { logisticsMapCount } from "@/api/index.js";
+import Businesses2 from "@/components/Businesses2.vue";
 
 const appStore = useAppStore();
 
@@ -28,6 +30,7 @@ const initInfo = () => {
 
 const clickItem = () => {
   console.log('点击按钮');
+  mitt.emit('showBusinesses2', { type: 1 })
 }
 
 onMounted(() => {
@@ -43,22 +46,23 @@ onMounted(() => {
     </div>
     <div class="border"></div>
     <div class="btn">
-      <div class="c-b" @click.stop="clickItem">
+      <div class="c-b" @click.stop="clickItem(1)">
         <div class="text">
           待取货({{ appStore.delivery.pending_order_count }})单
         </div>
       </div>
-      <div class="c-b" @click.stop="clickItem">
+      <div class="c-b" @click.stop="clickItem(2)">
         <div class="text">
           配送中({{ appStore.delivery.delivering_order_count }})单
         </div>
       </div>
-      <div class="c-b" @click.stop="clickItem">
+      <div class="c-b" @click.stop="clickItem(3)">
         <div class="text">
           已完成({{ appStore.delivery.finished_order_count }})单
         </div>
       </div>
     </div>
+    <Businesses2 :isShow="isShow"></Businesses2>
   </div>
 </template>
 

src/view/index/components/centerMap.vue

@@ -9,9 +9,14 @@ import gulin from "@/assets/json/gulin.json";
 import jiangyang from "@/assets/json/jiangyang.json";
 import longma from "@/assets/json/longma.json";
 import naxi from "@/assets/json/naxi.json";
+import luxian_geo from "@/utils/luxian_geo.js";
+import xuyong_geo from "@/utils/xuyong_geo.js";
+import jiangyang_geo from "@/utils/jiangyang_geo.js";
 import { useAppStore } from "@/store/app.js";
+import { useUserStore } from "@/store/user.js";
 
 const appStore = useAppStore();
+const userStore = useUserStore();
 
 const props = defineProps({
   list: {
@@ -40,7 +45,8 @@ let dataValue = []
 
 const customFormatter = (params) => {
   // console.log(params.data);
-  return `{img|${params.data.street_name}}\n{t|店铺${params.data.mer_count}个, 团队${params.data.service_group_count}个}`
+  // return `{img|${params.data.street_name}}\n{t|店铺${params.data.mer_count}个, 团队${params.data.service_group_count}个}`
+  return ''
 }
 
 const initDataValue = () => {
@@ -84,12 +90,18 @@ const initMap = () => {
     chart = echarts.init(echartsRef.value);
   }
   echarts.registerMap(mapType.name, mapType.json);
-  let piePatternImg = new Image();
-  piePatternImg.src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35e6b202312021115251405.png';
-
 
   let option = {
     animation: false,
+    title: {
+      text: mapType.name,
+      textStyle: {
+        color: '#fff',
+        fontSize: 20
+      },
+      top: '10%',
+      left: '10%'
+    },
     //geo方式地理坐标系组件。
     geo: [
       {
@@ -97,23 +109,7 @@ const initMap = () => {
         zoom: 1.0,
         label: {
           show: false,
-          disabled: true,
-          color: '#fff',
-          fontSize: 25,
-          // 高亮状态下的多边形和标签样式。
-
         },
-        //   选中状态下的多边形和标签样式
-        // emphasis: {
-        //   itemStyle: {
-        //     // color: '#546686', //地图背景色
-        //     borderColor: '#fff', //省市边界线00fcff 516a89
-        //     borderWidth: 1,
-        //   },
-        //   label: {
-        //     color: '#fff'
-        //   }
-        // },
         emphasis: {
           disabled: true
         },
@@ -143,6 +139,12 @@ const initMap = () => {
         zoom: 1.01, //当前视角的缩放比例
         roam: false, //是否开启平游或缩放
         show: true,
+        tooltip: {
+          show: false  // 取消鼠标移上去时的文字提示
+        },
+        label: {
+          show: false
+        },
         emphasis: {
           disabled: true
         },
@@ -166,6 +168,39 @@ const initMap = () => {
         },
       },
     ],
+    tooltip: {
+      trigger: 'item',
+      formatter: function (params) {
+        let obj = dataValue.find(item => item.street_name == params.name);
+        if (!obj) {
+          obj = params.data
+        }
+        if (obj) {
+          return `<div 
+                    style="background-image: url(\'/src/assets/img/item-box.png\');
+                    background-size: 100% 100%;
+                    display: flex;
+                    justify-content: space-evenly;
+                    align-items: center;
+                    width: 180px;
+                    height: 80px;">
+                      <div style="font-size: 15px;font-family: 'ifonts';">${obj?.street_name || ''}</div>
+                      <div style="font-size: 12px;">
+                        <p style="padding: 0;margin: 0">店铺:${obj?.mer_count || '0'}个</p>  
+                        <p style="padding: 0;margin: 0">团队:${obj?.service_group_count || '0'}个</p>  
+                      </div>
+                    </div>`;
+        } else return '';
+      },
+      position: 'top',
+      // extraCssText: 'background-color: transparent; border: none;pdding: 0;', // 设置额外的 CSS 样式
+      backgroundColor: 'rgba(0, 156, 255, 0)', //设置背景颜色
+      borderColor: "rgba(0, 156, 255, 0)",
+      padding: 0,
+      textStyle: {
+        color: '#fff'
+      }
+    },
     series: [
       {
         type: "map",
@@ -173,7 +208,8 @@ const initMap = () => {
         label: {
           emphasis: {
             show: false
-          }
+          },
+          color: 'rgba(0,0,0,0)'
         },
         emphasis: {
           disabled: false,
@@ -184,31 +220,13 @@ const initMap = () => {
         itemStyle: {
           normal: {
             areaColor: "#3f5171",
-            borderColor: "#fff",
+            borderColor: "#5bdbf6",
             borderWidth: 1,
-            // shadowColor: "#5bdbf6",
+          },
-            // shadowOffsetX: 5,
+          emphasis: {
-            // shadowOffsetY: 10,
+            areaColor: '#0680ca',  // 鼠标经过时的背景色
-            // shadowBlur: 30,
-            // areaColor: {
-            //   image: domImg,
-            //   repeat: 'no-repeat',
-            // },
           }
         },
-
-        // itemStyle: {
-        //   color: {
-        //     image: piePatternImg,
-        //     repeat: 'no-repeat',
-        //   },
-        //   areaColor: {
-        //     image: piePatternImg,
-        //     repeat: 'no-repeat',
-        //   },
-        //   borderColor: '#bddee6',
-        //   borderWidth: 1,
-        // },
       },
       {
         name: "",
@@ -223,19 +241,6 @@ const initMap = () => {
           position: "center",
           show: false
         },
-        // tooltip: {
-        //   formatter (value) {
-        //     console.log(value);
-        //     return "";
-        //   },
-        //   show: true
-        // },
-        // encode: {
-        //   value: 2
-        // },
-        // itemStyle: {
-        //   color: "#0efacc"
-        // },
         emphasis: {
           label: {
             show: false
@@ -246,34 +251,37 @@ const initMap = () => {
   }
   // 使用配置项显示图表
   chart.setOption(option);
+}
 
-  // 添加自定义图形，实现地图倾斜效果
+const mapInfo = () => {
-  chart.dispatchAction({
+  let area = appStore.area.find(item => item.code == appStore.address.areaCode);
-    type: 'updateLayout',
+  let map;
-    rotation: Math.PI / 4,  // 设置旋转角度
+  if (area.name == "泸县") map = luxian_geo;
-  });
+  if (area.name == "江阳区") map = jiangyang_geo;
+  if (area.name == "叙永县") map = xuyong_geo;
+  map = JSON.parse(JSON.stringify(map));
 
-  // 设置3D效果，实现地图立体效果
+  if (appStore.address.streetCode) {
-  chart.setOption({
+    let street = appStore.street.find(item => item.code == appStore.address.streetCode);
-    grid3D: {},
+    initStreetMap(street, map);
-    xAxis3D: {},
+  } else {
-    yAxis3D: {},
+    mapType.name = area.name;
-    zAxis3D: {}
+    mapType.json = map;
-  });
+  }
+}
+
+const initStreetMap = (street, map) => {
+  map.features = map.features.filter(item => item.properties.name == street.name);
+  mapType.name = street.name;
+  mapType.json = map;
 }
 
 onMounted(() => {
   dataValue = props.list;
   changeType('xuyong');
+  mapInfo();
   initDataValue();
   initMap();
-  nextTick(() => {
-    mitt.on('map_info', e => {
-      changeType(e.pinyin);
-      initDataValue();
-      initMap();
-    })
-  })
 })
 
 </script>

src/view/login/index.vue

@@ -1,16 +1,21 @@
 <script setup>
 import { ref, reactive } from "vue"
 import { useRouter } from "vue-router";
-import { loginAPI } from "@/api/api.js"
+import { login } from "@/api/index.js";
+import { getArea, getStreet } from "@/api/index.js"
+import { useUserStore } from "@/store/user.js";
+import { useAppStore } from "@/store/app.js";
 const router = useRouter()
 const show = ref(false)
-const account = ref('')
+const account = ref('叙永镇')
-const password = ref('')
+const password = ref('xuyongzhen')
 const isAccount = ref(false)
 const isPassword = ref(false)
 
-const submit = () => {
+const userStore = useUserStore();
+const appStore = useAppStore();
 
+const submit = () => {
   if (!account.value) {
     isAccount.value = true;
     return
@@ -18,23 +23,28 @@ const submit = () => {
   else isAccount.value = false;
   if (!password.value) {
     isPassword.value = true;
-
     return
   }
   else isPassword.value = false;
 
-
+  login({
-  loginAPI({
     account: account.value,
     password: password.value
-  }).then(res => {
+  }).then(async (res) => {
-    console.log(res);
+    userStore.setUserInfo(res.data.user);
-    // localStorage.setItem("TOKEN", 15455465465465)
+    userStore.setToken(res.data.token);
-    // router.replace('/')
+    appStore.setAddress({
+      areaCode: res.data.user.area_code,
+      streetCode: res.data.user.street_code
+    });
+    let street = await getStreet({
+      area_code: res.data.user.area_code
+    })
+    appStore.setStreet(street.data);
+    router.push('/');
+  }).catch(e => {
+    console.log(e);
   })
-  return
-
-
 }
 
 </script>