更新

package-lock.json

@@ -11,6 +11,7 @@
         "@amap/amap-jsapi-loader": "^1.0.1",
         "@jiaminghi/data-view": "^2.10.0",
         "echarts": "^5.4.3",
+        "mitt": "^3.0.1",
         "vue": "^3.3.8",
         "vue-router": "^4.2.5"
       },
@@ -941,6 +942,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz",

package.json

@@ -12,6 +12,7 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@jiaminghi/data-view": "^2.10.0",
     "echarts": "^5.4.3",
+    "mitt": "^3.0.1",
     "vue": "^3.3.8",
     "vue-router": "^4.2.5"
   },

src/App.vue

@@ -1,9 +1,11 @@
 <script setup>
+import Businesses from "@/components/Businesses.vue"
 </script>
 
 <template>
   <dv-full-screen-container class="body">
     <router-view></router-view>
+    <Businesses class="businesses"></Businesses>
   </dv-full-screen-container>
 </template>
 
@@ -19,4 +21,13 @@
   color: #fff;
   background-color: rgba($color: #000000, $alpha: 0.8);
 }
+.businesses {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 999999;
+  width: 100%;
+  height: 100%;
+}
 </style>

src/components/Businesses.vue

@@ -0,0 +1,173 @@
+<script setup>
+// 102B3
+import { ref, reactive, onMounted } from "vue"
+import { useRouter } from 'vue-router'
+import paging from "./paging.vue"
+import mitt from "@/utils/mitt"
+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) {
+    // alert(45)
+    route.replace('/storeLogin')
+  }
+
+
+}
+const a = (aaa) => {
+  for (let i = 0; i < 100; i++) {
+    if (i % 2 == 0) {
+      aaa.data.push(
+        [
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);' >排sd序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
+        ]
+      )
+    } else {
+      aaa.data.push(
+        [
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排sd序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
+        ]
+
+
+      )
+    }
+
+
+  }
+}
+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: [
+  ]
+})
+onMounted(() => {
+  a(configs);
+  mitt.on('showBusinesses', () => {
+    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
+          :config="configs"
+          @click="hdClick"
+          style="width: 100%; height: 92%"
+        />
+        <div class="c-l-bottom">
+          <paging></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(.ceil) {
+  padding: 0 !important;
+  margin-bottom: 5px;
+  margin-right: 2px;
+}
+
+: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/areaList.vue

@@ -1,47 +1,67 @@
 <script setup>
-import { defineProps, defineEmits, ref } from "vue"
+import { defineProps, defineEmits, ref, nextTick, } from "vue"
 import { useRouter } from 'vue-router'
 const router = useRouter()
-const emit = defineEmits(['offAreaList'])
+const emit = defineEmits(['offAreaList']);
-const props = defineProps({
+const choseArea = ref(false);
-  choseArea: Boolean,
-})
 
 const list = ref([
   {
-    name: '泸县'
+    name: '泸县',
+    pinyin: 'luxian',
   },
   {
-    name: '江阳'
+    name: '江阳区',
+    pinyin: 'jiangyang',
   },
   {
-    name: '龙马潭'
+    name: '龙马潭区',
+    pinyin: 'longma',
   },
   {
-    name: '通滩'
+    name: '纳溪区',
+    pinyin: 'naxi',
   },
   {
-    name: '纳溪'
+    name: '合江县',
+    pinyin: 'hejiang',
   },
   {
-    name: '合面'
+    name: '叙永县',
+    pinyin: 'xuyong',
   },
   {
-    name: '叙永'
+    name: '古蔺县',
+    pinyin: 'gulin',
   },
 ])
 
 // 选镇
 const choseTownFn = (item) => {
   emit('offAreaList', item);
-  props.choseArea = false;
 }
 
+const open = () => {
+  choseArea.value = true;
+}
+
+const close = () => {
+  choseArea.value = false;
+}
+
+const show = () => {
+  choseArea.value = !choseArea.value;
+}
+
+defineExpose({
+  open, close, show
+})
+
 </script>
 
 <template>
   <transition name="fade">
-    <div class="address" v-if="props.choseArea">
+    <div class="address" v-show="choseArea == true">
       <div
         class="address-li"
         @click="choseTownFn(item)"

src/components/headView.vue

@@ -1,26 +1,53 @@
 <script setup>
-import { reactive, ref } from "vue";
+import { reactive, ref, provide, nextTick, onMounted } from "vue";
 import areaList from "./areaList.vue";
+import { useRoute, useRouter } from "vue-router";
+import mitt from "@/utils/mitt";
 
 const info = reactive({
-  address: '泸县'
+  address: '泸县',
+  pinyin: 'luxian'
 })
 
+const areaListRef = ref(null);
+
 // 选择镇
 const choseArea = ref(null)
 const open = () => {
-  choseArea.value = !choseArea.value;
+  areaListRef.value.show();
 }
 // 关闭
 const offAreaList = (e) => {
+  Object.keys(e).forEach(key => {
+    if (e[key]) {
+      info[key] = e[key];
+    }
+  })
   info.address = e.name;
+  mitt.emit('map_info', info);
 }
+
+const router = useRouter()
+const route = useRoute()
+
+const navToDelivery = () => {
+  if (route.path == '/') router.push('/delivery');
+  else router.back();
+}
+
+onMounted(() => {
+  mitt.emit('map_info', info);
+})
 </script>
 
 <template>
   <div class="header">
     <div class="left">
-      <img class="logo item" src="/src/assets/head_img/logo.png" />
+      <img
+        class="logo item"
+        src="/src/assets/head_img/logo.png"
+        @click="navToDelivery"
+      />
       <div class="item">2023.11.17</div>
       <img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
       <div class="item">11:30:20</div>
@@ -31,6 +58,7 @@ const offAreaList = (e) => {
         <img src="/src/assets/head_img/location.png" alt="" />
         {{ info.address }}  
         <areaList
+          ref="areaListRef"
           :choseArea="choseArea"
           @offAreaList="offAreaList"
           style="position: absolute; top: 100%; left: 0"

src/components/paging.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { ref } from "vue";
+
+const pages = ref({
+  page: 1,
+  total: 63,
+  pageSize: 30,
+  pageAll: 7
+})
+
+const prev = () => {
+  if (pages.value.page > 1) pages.value.page--;
+}
+const next = () => {
+  if (pages.value.page < pages.value.pageAll) pages.value.page++;
+}
+const setPage = (page = 1) => {
+  pages.value.page = page;
+}
+const getPage = () => {
+  console.log(pages.value.page);
+  if (pages.value.page < 0) pages.value.page = 1;
+  if (pages.value.page > pages.value.pageAll) pages.value.page = pages.value.pageAll;
+}
+const input = (e) => {
+  if (e.data >= 0 && e.data <= 9) return getPage();
+  pages.value.page = 1;
+}
+</script>
+  
+<template>
+  <div class="pad-box">
+    <div class="total">共 {{ pages.total }} 条</div>
+    <div class="num" @click="prev">{{ "<" }}</div>
+    <div class="num" :class="{ c_num: pages.page == 1 }" @click="setPage(1)">
+      1
+    </div>
+    <div
+      class="num"
+      :class="{ c_num: pages.page == 2 }"
+      v-if="pages.pageAll > 1"
+      @click="setPage(2)"
+    >
+      2
+    </div>
+    <div
+      class="num"
+      :class="{ c_num: pages.page == 3 }"
+      v-if="pages.pageAll > 2"
+      @click="setPage(3)"
+    >
+      3
+    </div>
+    <div
+      class="num"
+      :class="{ c_num: pages.page == '' }"
+      v-if="pages.pageAll - 3 > 3"
+    >
+      ...
+    </div>
+    <div
+      class="num"
+      :class="{ c_num: pages.page == pages.pageAll - 2 }"
+      v-if="pages.pageAll - 2 > 3"
+      @click="setPage(pages.pageAll - 2)"
+    >
+      {{ pages.pageAll - 2 }}
+    </div>
+    <div
+      class="num"
+      :class="{ c_num: pages.page == pages.pageAll - 1 }"
+      v-if="pages.pageAll - 1 > 3"
+      @click="setPage(pages.pageAll - 1)"
+    >
+      {{ pages.pageAll - 1 }}
+    </div>
+    <div
+      class="num"
+      :class="{ c_num: pages.page == pages.pageAll }"
+      v-if="pages.pageAll > 3"
+      @click="setPage(pages.pageAll)"
+    >
+      {{ pages.pageAll }}
+    </div>
+    <div class="num" @click="next">{{ ">" }}</div>
+    <div class="btn">
+      <div>前往</div>
+      <input v-model="pages.page" @input="input" />
+      <div>页</div>
+    </div>
+  </div>
+</template>
+      
+<style scoped lang="scss">
+.pad-box {
+  display: flex;
+  cursor: pointer;
+  div {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+  }
+  .total {
+    margin: 0 0.5rem;
+  }
+  .num {
+    margin: 0 0.5rem;
+  }
+  .c_num {
+    color: rgba(91, 219, 246, 1);
+  }
+  .btn {
+    display: flex;
+    margin-left: 0.5rem;
+    align-items: center;
+    input {
+      background-color: rgba(0, 156, 255, 0.2);
+      border: 1px solid rgba(91, 219, 246, 0.4);
+      border-radius: 0.2rem;
+      width: 2rem;
+      margin: 0 1rem;
+      text-align: center;
+      color: #fff;
+    }
+  }
+}
+</style>

src/utils/mitt.js

@@ -0,0 +1,5 @@
+import mitt from "mitt"
+
+const m = mitt();
+
+export default m;

src/view/delivery/components/AMap.vue

@@ -1,9 +1,11 @@
 <script setup>
-import { onMounted, onUnmounted } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 import AMapLoader from "@amap/amap-jsapi-loader";
 
 let map = null;
 
+const loading = ref(true);
+
 onMounted(() => {
   AMapLoader.load({
     key: "f14dcaeb4df441ab84ed0a0768f04f95", // 申请好的Web端开发者Key，首次调用 load 时必填
@@ -18,6 +20,13 @@ onMounted(() => {
         center: [105.441866, 28.87098], // 初始化地图中心点位置
         mapStyle: "amap://styles/darkblue",
       });
+      // 监听地图加载完成事件
+      map.on('complete', () => {
+        // 地图加载完成后执行的操作
+        setTimeout(() => {
+          loading.value = false;
+        }, 500)
+      });
     })
     .catch((e) => {
       console.log(e);
@@ -30,12 +39,30 @@ onUnmounted(() => {
 </script>
 
 <template>
+  <div class="c-box">
     <div id="container"></div>
+    <div class="loading" v-if="loading">
+      <dv-loading>加载中...</dv-loading>
+    </div>
+  </div>
 </template>
 
-<style scoped>
+<style scoped lang ="scss">
-#container {
+.c-box {
   width: 100%;
   height: 100%;
+  position: relative;
+  #container {
+    width: 100%;
+    height: 100%;
+  }
+  .loading {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: #05273d;
+  }
 }
 </style>

src/view/delivery/components/AMapLeft.vue

@@ -1,9 +1,11 @@
 <script setup>
-import { onMounted, onUnmounted } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 import AMapLoader from "@amap/amap-jsapi-loader";
 
 let map = null;
 
+const loading = ref(true);
+
 onMounted(() => {
   AMapLoader.load({
     key: "f14dcaeb4df441ab84ed0a0768f04f95", // 申请好的Web端开发者Key，首次调用 load 时必填
@@ -11,13 +13,20 @@ onMounted(() => {
     plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
   })
     .then((AMap) => {
-      map = new AMap.Map("container_left", {
+      map = new AMap.Map("container-left", {
         // 设置地图容器id
         viewMode: "2D", // 是否为3D地图模式
         zoom: 15, // 初始化地图级别
         center: [105.441866, 28.87098], // 初始化地图中心点位置
         mapStyle: "amap://styles/darkblue",
       });
+      // 监听地图加载完成事件
+      map.on('complete', () => {
+        // 地图加载完成后执行的操作
+        setTimeout(() => {
+          loading.value = false;
+        }, 500)
+      });
     })
     .catch((e) => {
       console.log(e);
@@ -30,12 +39,30 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div id="container_left"></div>
+  <div class="c-box">
+    <div id="container-left"></div>
+    <div class="loading" v-if="loading">
+      <dv-loading>加载中...</dv-loading>
+    </div>
+  </div>
 </template>
 
-<style scoped>
+<style scoped lang ="scss">
-#container_left {
+.c-box {
   width: 100%;
   height: 100%;
+  position: relative;
+  #container-left {
+    width: 100%;
+    height: 100%;
+  }
+  .loading {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: #05273d;
+  }
 }
 </style>

src/view/delivery/components/bottom.vue

@@ -2,6 +2,7 @@
 import { onMounted, reactive, ref } from "vue"
 import border from "@/components/border.vue";
 import * as echarts from 'echarts';
+import mitt from "@/utils/mitt"
 
 const list = reactive({
   header: ['ID', '收件人', '收件人电话', '商品信息', '收货地址'],
@@ -324,6 +325,10 @@ const initEcahrts = () => {
   chart.setOption(option);
 }
 
+const openList = () => {
+  mitt.emit('showBusinesses')
+}
+
 onMounted(() => {
   initEcahrts()
 })
@@ -354,7 +359,7 @@ onMounted(() => {
               <img src="/src/assets/img/item.png" />
               <div>今日订单</div>
             </div>
-            <div class="flex">
+            <div class="flex" @click="openList">
               <div>查看更多</div>
               <div>{{ "〉" }}</div>
             </div>

src/view/delivery/components/center.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { reactive, ref } from "vue"
 import border from "@/components/border.vue";
-
 import AMap from "./AMap.vue";
 </script>
 

src/view/index/components/ball.vue

@@ -61,8 +61,8 @@
   right: 0;
   bottom: 0;
   margin: auto;
-  width: 80vh;
+  width: 50vh;
-  height: 80vh;
+  height: 50vh;
   transform-style: preserve-3d;
   /*border: 1px solid #fff;*/
   animation: starrotate 10s linear;

src/view/index/components/centerMap.vue

@@ -1,62 +1,141 @@
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, inject } from "vue";
 import * as echarts from 'echarts';
+import mitt from "@/utils/mitt";
 import luxian from "@/assets/json/luxian.json";
 import hejiang from "@/assets/json/hejiang.json";
 import xuyong from "@/assets/json/xuyong.json";
+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";
 
 const mapType = reactive({
   name: '',
   json: ''
 })
 
-const changeType = (name) => {
+
+const changeType = (name = 'luxian') => {
   mapType.name = name;
   if (name == 'luxian') mapType.json = luxian;
   if (name == 'hejiang') mapType.json = hejiang;
   if (name == 'xuyong') mapType.json = xuyong;
+  if (name == 'gulin') mapType.json = gulin;
+  if (name == 'jiangyang') mapType.json = jiangyang;
+  if (name == 'longma') mapType.json = longma;
+  if (name == 'naxi') mapType.json = naxi;
 }
-changeType('luxian');
+changeType()
 
-const dataValue = [
+let dataValue = [
-  { name: '北京', value: [105.38, 29.15] },
+  {
-  { name: '上海', value: [105.32, 29.15] },
+    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,
+  },
 ]
 
+const customFormatter = (params) => {
+  console.log(params.data);
+  return `{img|${params.data.name}}\n{t|店铺${params.data.store}个, 团队${params.data.team}个}`
+}
+
+const initDateValue = () => {
+  dataValue.forEach(item => {
+    item.label = {
+      show: true, // 显示标签
+      formatter: customFormatter, // 标签内容，这里使用{name}表示数据项的name属性
+      fontSize: 12, // 字体大小
+      fontWeight: 'bold', // 字体粗细
+      color: '#fff', // 字体颜色
+      offset: [-50, -40], // 标签偏移量，可根据需要调整
+      rich: {
+        img: {
+          backgroundColor: {
+            image: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/205f0202311291015185408.png'
+          },
+          height: 40,
+          width: 140,
+          color: '#fff',
+          fontSize: 14,
+          lineHeight: 14,
+          fontFamily: 'ifonts',
+          align: 'center',
+          padding: [0, 0, 20, 0]
+        },
+        t: {
+          fontSize: 10,
+          align: 'center'
+        }
+      }
+    };
+  })
+}
+
 const echartsRef = ref(null);
+let chart = null;
 const initMap = () => {
   // 基于DOM元素初始化echarts实例
-  const chart = echarts.init(echartsRef.value);
+  if (chart == null) {
+    chart = echarts.init(echartsRef.value);
+  }
   echarts.registerMap(mapType.name, mapType.json);
+
+  let domImg = document.createElement("img");
+  domImg.style.height = '1000px';
+  domImg.style.width = "1000px";
+  domImg.src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6b962202311291338462283.png';
+
+
   let option = {
     animation: false,
     //geo方式地理坐标系组件。
-    geo: {
+    geo: [
+      {
         map: mapType.name,
         zoom: 1.0,
         label: {
-        show: true,
+          show: false,
+          disabled: true,
           color: '#fff',
           fontSize: 25,
           // 高亮状态下的多边形和标签样式。
 
         },
         //   选中状态下的多边形和标签样式
+        // emphasis: {
+        //   itemStyle: {
+        //     // color: '#546686', //地图背景色
+        //     borderColor: '#fff', //省市边界线00fcff 516a89
+        //     borderWidth: 1,
+        //   },
+        //   label: {
+        //     color: '#fff'
+        //   }
+        // },
         emphasis: {
-        itemStyle: {
+          disabled: true
-          color: '#546686', //地图背景色
-          borderColor: '#fff', //省市边界线00fcff 516a89
-          borderWidth: 1,
         },
-        label: {
+        select: {
-          color: '#fff'
+          disabled: true
-        }
         },
         // aspectScale:0.75, //长宽比
         //   roam: true, //是否允许缩放
         itemStyle: {
           normal: {
-          color: '#546686', //地图背景色          
+            // color: '#546686', //地图背景色    
             borderColor: '#fff', //省市边界线00fcff 516a89
             borderWidth: 1,
             areaColor: "#3f5171",
@@ -67,6 +146,36 @@ const initMap = () => {
           },
         },
       },
+      //第一层投影
+      {
+        map: mapType.name,
+        zlevel: -1,
+        zoom: 1.01, //当前视角的缩放比例
+        roam: false, //是否开启平游或缩放
+        show: true,
+        emphasis: {
+          disabled: true
+        },
+        select: {
+          disabled: true
+        },
+        itemStyle: {
+          normal: {
+            borderJoin: "round",
+            borderColor: "rgba(176,228,252,1)",
+            borderWidth: 3,
+            areaColor: "rgba(133,188,232,1)",
+            shadowColor: "rgba(133,188,232,.7)",
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowBlur: 25,
+          },
+          emphasis: {
+            show: false,
+          },
+        },
+      },
+    ],
     series: [
       {
         type: "map",
@@ -85,51 +194,67 @@ const initMap = () => {
             shadowColor: "#5bdbf6",
             shadowOffsetX: 5,
             shadowOffsetY: 10,
-            shadowBlur: 30
+            shadowBlur: 30,
-          }
+            // areaColor: {
+            //   image: domImg,
+            //   repeat: 'no-repeat',
+            // },
           }
         },
+      },
       {
         name: "",
         type: "scatter",
         coordinateSystem: "geo",
         data: dataValue,
-        //   symbolSize: function(val) {
-        //     return val[2] / 10;
-        //   },
         symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6eb37202311281655342626.png",
         symbolSize: [40, 30],
-        hoverSymbolSize: [120, 90],
+        hoverSymbolSize: [60, 45],
-        tooltip: {
-          formatter (value) {
-            console.log(value);
-            return "";
-          },
-          show: true
-        },
-        encode: {
-          value: 2
-        },
         label: {
-          formatter: "{b}",
+          formatter: "",
-          position: "right",
+          position: "center",
           show: false
         },
-        itemStyle: {
+        // tooltip: {
-          color: "#0efacc"
+        //   formatter (value) {
-        },
+        //     console.log(value);
+        //     return "";
+        //   },
+        //   show: true
+        // },
+        // encode: {
+        //   value: 2
+        // },
+        // itemStyle: {
+        //   color: "#0efacc"
+        // },
         emphasis: {
           label: {
             show: false
           }
         }
       },
-    ]
+    ],
+    graphic: [{
+      type: 'image',
+      left: 0,
+      top: 0,
+      z: 10,
+      // bounding: 'raw',
+      style: {
+        image: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6b962202311291338462283.png', // 纹理图片 URL
+        width: '100%',
+        height: '100%'
+      }
+    }]
   }
   // 使用配置项显示图表
   chart.setOption(option);
 }
-onMounted(() => {
+mitt.on('map_info', e => {
+  console.log(e);
+  changeType(e.pinyin);
+  initDateValue()
   initMap();
 })
 </script>

src/view/index/components/leftItme1.vue

@@ -1,24 +1,50 @@
 <script setup>
-import { reactive, ref } from "vue"
+import { onMounted, reactive, ref } from "vue"
-import border from "../../../components/border.vue"
+import border from "@/components/border.vue"
-import { useRoute, useRouter } from "vue-router";
+import mitt from "@/utils/mitt"
+
+const initData = (aaa) => {
+  for (let i = 0; i < 20; i++) {
+    if (i % 2 == 0) {
+      aaa.data.push(
+        [
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)' >排sd序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+        ]
+      )
+    } else {
+      aaa.data.push(
+        [
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)' >排sd序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
+          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
+        ]
+      )
+    }
+
+  }
+}
+
 const list = reactive({
-  header: ['ID', '收件人', '收件人电话', '商品信息', '收货地址'],
+  header: [
-  data: [
+    `<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));'>ID</div>`,
-    ['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
+    `<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>`,
-    ['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
+    `<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>`,
-    ['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
+    `<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>`,
-    ['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
+    `<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>`,
-    ['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
-    ['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
-    ['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
-    ['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
-    ['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
   ],
+  data: [],
   //   index: true,
-  headerBGC: 'rgba(0, 168, 255, 0.76)',
+  // headerBGC: 'rgba(0, 168, 255, 0.76)',
-  oddRowBGC: 'rgba(91, 219, 246, 0.20)',
+  // oddRowBGC: 'rgba(91, 219, 246, 0.20)',
-  evenRowBGC: 'rgba(0, 168, 255, 0.16)',
+  // evenRowBGC: 'rgba(0, 168, 255, 0.16)',
+  oddRowBGC: '',
+  evenRowBGC: "",
   //   columnWidth: [50],
   align: ['center'],
   rowNum: 7
@@ -33,17 +59,21 @@ const cell1 = reactive({
   colors: ['#66FFFF', '#FEDB65']
 })
 
-const route = useRouter()
 
-const navToDelivery = () => {
+
-  route.push('/delivery')
+const openList = () => {
+  mitt.emit('showBusinesses')
 }
 
+onMounted(() => {
+  initData(list);
+})
+
 </script>
 
 <template>
   <border>
-    <div class="box" @click="navToDelivery">
+    <div class="box">
       <div class="title">今日订单数</div>
       <div class="my-day-num">
         <div class="my-num-item">0</div>
@@ -59,7 +89,7 @@ const navToDelivery = () => {
             <img src="/src/assets/img/item.png" />
             <div>今日订单</div>
           </div>
-          <div class="flex">
+          <div class="flex" @click="openList">
             <div>查看更多</div>
             <div>{{ "〉" }}</div>
           </div>
@@ -173,8 +203,14 @@ const navToDelivery = () => {
         }
       }
     }
-    ::v-deep .dv-scroll-board .rows .row-item {
+
-      margin-bottom: 0.6rem;
+    :deep(.ceil) {
+      padding: 0 !important;
+      margin-bottom: 5px;
+    }
+
+    :deep(.header-item) {
+      padding: 0 !important;
     }
   }
   .cylinder {