更新

2023-11-28 18:35:14 +08:00 · 2023-11-28 18:35:14 +08:00 · 6e8853f757
parent 38b81da321
commit 6e8853f757
22 changed files with 13918 additions and 96 deletions
--- a/index.html
+++ b/index.html
@ -5,6 +5,11 @@
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
+    <style>
+      html{
+        font-size: 16px;
+      }
+    </style>
  </head>
  <body>
    <div id="app"></div>
--- a/src/App.vue
+++ b/src/App.vue
@ -12,6 +12,7 @@
  margin: 0;
  padding: 0;
 }
+
 .body {
  background-image: url("/src/assets/img/bg.png");
  background-size: 100% 100%;
--- a/src/assets/head_img/close.png
+++ b/src/assets/head_img/close.png
--- a/src/assets/head_img/icon.png
+++ b/src/assets/head_img/icon.png
--- a/src/assets/head_img/location.png
+++ b/src/assets/head_img/location.png
--- a/src/assets/head_img/logo.png
+++ b/src/assets/head_img/logo.png
--- a/src/assets/head_img/weather.png
+++ b/src/assets/head_img/weather.png
--- a/src/assets/json/hejiang.json
+++ b/src/assets/json/hejiang.json
--- a/src/assets/json/luxian.json
+++ b/src/assets/json/luxian.json
--- a/src/assets/json/xuyong.json
+++ b/src/assets/json/xuyong.json
--- a/src/components/areaList.vue
+++ b/src/components/areaList.vue
@ -0,0 +1,101 @@
+<script setup>
+import { defineProps, defineEmits, ref } from "vue"
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const emit = defineEmits(['offAreaList'])
+const props = defineProps({
+  choseArea: Boolean,
+})
+
+const list = ref([
+  {
+    name: '泸县'
+  },
+  {
+    name: '江阳'
+  },
+  {
+    name: '龙马潭'
+  },
+  {
+    name: '通滩'
+  },
+  {
+    name: '纳溪'
+  },
+  {
+    name: '合面'
+  },
+  {
+    name: '叙永'
+  },
+])
+
+// 选镇
+const choseTownFn = (item) => {
+  emit('offAreaList', item);
+  props.choseArea = false;
+}
+
+</script>
+
+<template>
+  <transition name="fade">
+    <div class="address" v-if="props.choseArea">
+      <div
+        class="address-li"
+        @click="choseTownFn(item)"
+        v-for="(item, index) in list"
+        :key="index"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style lang="scss" scoped>
+.address {
+  left: 1vw;
+  top: 18px;
+  position: absolute;
+  width: 10vw;
+  height: 18vh;
+  background-color: #001e32;
+  color: #c7dbe3;
+  z-index: 9999;
+  overflow-y: auto;
+  box-sizing: border-box;
+  padding: 5px;
+
+  .address-li {
+    padding: 2px 5px;
+    cursor: pointer;
+
+    border-bottom: 0.1px solid #0e293c;
+  }
+}
+
+.address::-webkit-scrollbar {
+  width: 10px;
+  background-color: #153041;
+}
+
+.address::-webkit-scrollbar-track {
+  background-color: #153041;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #4ab9d0;
+  border-radius: 5px;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
--- a/src/components/headView.vue
+++ b/src/components/headView.vue
@ -1,16 +1,50 @@
 <script setup>
+import { reactive, ref } from "vue";
+import areaList from "./areaList.vue";
+
+const info = reactive({
+  address: '泸县'
+})
+
+// 选择镇
+const choseArea = ref(null)
+const open = () => {
+  choseArea.value = !choseArea.value;
+}
+// 关闭
+const offAreaList = (e) => {
+  info.address = e.name;
+}
 </script>

 <template>
  <div class="header">
    <div class="left">
+      <img class="logo item" src="/src/assets/head_img/logo.png" />
      <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>
    </div>
    <div class="head-title">吟龙物流信息监控溯源可视化大屏</div>
    <div class="right">
-      <div class="item">泸县</div>
-      <div class="item">多云</div>
+      <div class="item" @click="open" style="position: relative">
+        <img src="/src/assets/head_img/location.png" alt="" />
+        {{ info.address }}  
+        <areaList
+          :choseArea="choseArea"
+          @offAreaList="offAreaList"
+          style="position: absolute; top: 100%; left: 0"
+        ></areaList>
+      </div>
+      <img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
+      <div class="item">
+        <img src="/src/assets/head_img/weather.png" alt="" />
+        多云
+      </div>
+      <img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
+      <div class="item">
+        <img src="/src/assets/head_img/close.png" alt="" />
+      </div>
    </div>
    <img class="img" src="/src/assets/img/shiler.png" alt="" />
  </div>
@ -35,6 +69,10 @@
    height: 100%;
    transform: translate(-50%, 50%);
  }
+  .icon {
+    width: 0.8rem;
+    height: 2rem;
+  }
  .head-title {
    /* font-weight: bold; */
    font-family: "ifonts", sans-serif;
@ -45,9 +83,15 @@
  .left {
    display: flex;
    justify-content: left;
+    align-items: center;
    flex: 1;
+    .logo {
+      width: 2rem;
+      height: 2rem;
+    }
    .item {
      margin-left: 1rem;
+      cursor: pointer;
    }
  }
  .right {
@ -56,6 +100,15 @@
    justify-content: right;
    .item {
      margin-right: 1rem;
+      display: flex;
+      align-items: center;
+      margin-right: 1rem;
+      cursor: pointer;
+      img {
+        width: 1rem;
+        height: 1rem;
+        margin-right: 0.5rem;
+      }
    }
  }
 }
--- a/src/view/delivery/components/bottom.vue
+++ b/src/view/delivery/components/bottom.vue
@ -1,6 +1,332 @@
 <script setup>
-import { reactive, ref } from "vue"
+import { onMounted, reactive, ref } from "vue"
 import border from "@/components/border.vue";
+import * as echarts from 'echarts';
+
+const list = reactive({
+  header: ['ID', '收件人', '收件人电话', '商品信息', '收货地址'],
+  data: [
+    ['<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>'],
+    ['<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>'],
+  ],
+  //   index: true,
+  headerBGC: 'rgba(0, 168, 255, 0.56)',
+  oddRowBGC: 'rgba(91, 219, 246, 0.20)',
+  evenRowBGC: 'rgba(0, 168, 255, 0.16)',
+  //   columnWidth: [50],
+  align: ['center'],
+  rowNum: 7
+})
+
+const orderList = reactive([
+  {
+    name: '今日订单',
+    value: '988'
+  },
+  {
+    name: '已取货订单',
+    value: '1523'
+  },
+  {
+    name: '未配送订单',
+    value: '55'
+  },
+  {
+    name: '已完成订单',
+    value: '3'
+  },
+])
+
+const cOrderValue = (e) => {
+  let str = e;
+  if (str > 9999) str = 9999 + '';
+  else str = str + '';
+  str = str.split('');
+  if (str.length < 4) {
+    let t = 4 - str.length;
+    for (let i = 0; i < t; i++) {
+      str.unshift('0');
+    }
+  }
+  str.splice(-3, 0, ',');
+  return str;
+}
+
+
+const echartsRef = ref(null)
+
+const initEcahrts = () => {
+
+  let xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
+    yData1 = [400, 410, 350, 320, 280, 340, 360, 400, 420, 410],
+    yData2 = [350, 320, 260, 240, 220, 280, 300, 360, 340, 340],
+    yData3 = [200, 260, 200, 190, 180, 220, 260, 300, 280, 300],
+    yData4 = [120, 300, 230, 240, 190, 290, 103, 456, 230, 270],
+    borderData = [],
+    legend = ["已取货订单", "未配送订单", "已完成订单", "小时订单数"],
+    colorArr = [{
+      start: "rgba(0, 168, 255,",
+      end: "rgba(0, 168, 255, 1)"
+    },
+    {
+      start: "rgba(91, 219, 246,",
+      end: "rgba(91, 219, 246, 1)"
+    },
+    {
+      start: "rgba(75, 95, 219,",
+      end: "rgba(75, 95, 219, 1)"
+    },
+    {
+      color: "rgba(91, 219, 246, 1)"
+    }
+    ];
+  let normalColor = "#DEEBFF";
+  //   let fontSize = 20;
+  let seriesData = [];
+  let borderHeight = 4;
+  xData.forEach(element => {
+    borderData.push(borderHeight);
+  });
+  [yData1, yData2, yData3, yData4].forEach((item, index) => {
+    let obj1 = {};
+    if (index < 3) {
+      obj1 = {
+        name: legend[index],
+        type: "bar",
+        stack: legend[index],
+        data: item,
+        barWidth: "15%",
+        itemStyle: {
+          normal: {
+            color: {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [{
+                offset: 0,
+                color: colorArr[index].start + "0.3)"
+              },
+              {
+                offset: 0.5,
+                color: colorArr[index].start + "0.4)"
+              },
+              {
+                offset: 1,
+                color: colorArr[index].end
+              }
+              ],
+              globalCoord: false
+            }
+          }
+        }
+      };
+      seriesData.push(obj1);
+    } else {
+      let obj3 = {
+        name: legend[index],
+        type: "line",
+        yAxisIndex: 1,
+        smooth: false,
+        showBackground: true,
+        backgroundStyle: {
+          color: 'rgba(255,255,255, 0.8)'
+        },
+        symbol: "circle",
+        symbolSize: 16,
+        lineStyle: {
+          normal: {
+            width: 2
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: colorArr[index].color,
+            borderColor: "#fff",
+            borderWidth: 1
+          }
+        },
+        data: item,
+        label: {
+          normal: {
+            show: false
+          }
+        }
+      };
+      seriesData.push(obj3);
+    }
+  });
+  console.log(seriesData);
+  const option = {
+    backgroundColor: "rgba(0,0,0,0)",
+    grid: {
+      left: "3%",
+      top: "12%",
+      right: "12%",
+      bottom: '2%',
+      containLabel: true
+    },
+    legend: {
+      show: true,
+      // icon: "rect",
+      orient: 'vertical', // 将图例竖直布局
+
+      itemWidth: 16,
+      itemHeight: 10,
+      right: "right",
+      bottom: "center",
+      textStyle: {
+        color: "#fff"
+      },
+      data: legend
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
+      textStyle: {
+        color: '#fff'
+      },
+      borderColor: "rgba(18, 57, 60, .8)",
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: 'rgba(0, 11, 34, .4)',
+        }
+      },
+      formatter: function (params) {
+        let str = "";
+        for (let i = 0; i < params.length; i++) {
+          if (params[i].seriesName !== "") {
+            str +=
+              params[i].name +
+              ':' +
+              params[i].seriesName +
+              '-' +
+              params[i].value +
+              "<br/>";
+          }
+        }
+        return str;
+      }
+    },
+    xAxis: [{
+      type: "category",
+      data: xData,
+      name: '小时(工作时间)',
+      nameTextStyle: {
+        color: '#fff',
+        fontSize: 12
+      },
+      axisPointer: {
+        type: "shadow"
+      },
+      axisLabel: {
+        interval: 0,
+        align: 'center',
+        textStyle: {
+          color: normalColor,
+          fontSize: 12
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#1C82C5'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      }
+    }],
+    yAxis: [{
+      type: "value",
+      // name: "亿千瓦时",
+      // nameTextStyle: {
+      //     color: normalColor,
+      //     fontSize: 12
+      // },
+      // "min": 0,
+      // "max": 50,
+      axisLabel: {
+        formatter: "{value}",
+        textStyle: {
+          color: normalColor,
+          fontSize: 14
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#1C82C5'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "solid",
+          color: 'rgba(28, 130, 197, .3)'
+        }
+      }
+    },
+    {
+      type: "value",
+      // name: "%",
+      // nameTextStyle: {
+      //     color: normalColor,
+      //     fontSize: 12
+      // },
+      // min: -100,
+      // max: 100,
+      axisLabel: {
+        show: false,
+        formatter: "{value}",
+        textStyle: {
+          color: normalColor,
+          fontSize: 12
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#1C82C5'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(255,255,255,0.2)"
+        }
+      }
+    }
+    ],
+    series: seriesData
+  };
+
+  // 基于DOM元素初始化echarts实例
+  const chart = echarts.init(echartsRef.value);
+
+  // 使用配置项显示图表
+  chart.setOption(option);
+}
+
+onMounted(() => {
+  initEcahrts()
+})

 </script>

@ -11,19 +337,30 @@ import border from "@/components/border.vue";
      <div class="body-box">
        <div class="left">
          <div class="top">
-            <div class="view" v-for="(item, index) in 4" :key="index">
+            <div class="view" v-for="(item, index) in orderList" :key="index">
              <div class="num">
-                <div>6</div>
-                <div>,</div>
-                <div>5</div>
-                <div>8</div>
-                <div>1</div>
+                <div v-for="(t, i) in cOrderValue(item.value)" :key="i">
+                  {{ t }}
                </div>
+              </div>
+              <div>{{ item.name }}</div>
+            </div>
+          </div>
+          <div class="bottom echarts" ref="echartsRef"></div>
+        </div>
+        <div class="right">
+          <div class="top">
+            <div class="t-right">
+              <img src="/src/assets/img/item.png" />
              <div>今日订单</div>
            </div>
+            <div class="flex">
+              <div>查看更多</div>
+              <div>{{ "〉" }}</div>
            </div>
          </div>
-        <div class="right"></div>
+          <dv-scroll-board :config="list" style="width: 100%; height: 90%" />
+        </div>
      </div>
    </div>
  </border>
@ -56,9 +393,12 @@ import border from "@/components/border.vue";
  .body-box {
    flex: 1;
    display: flex;
+    justify-content: space-between;
+    align-items: center;
    width: 100%;
    .left {
      width: 60%;
+      height: 100%;
      .top {
        display: flex;
        justify-content: space-evenly;
@ -87,9 +427,44 @@ import border from "@/components/border.vue";
          }
        }
      }
+      .bottom {
+        height: 70%;
+        width: 100%;
+      }
    }
    .right {
      width: 38%;
+      height: 95%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      align-items: center;
+      .top {
+        height: 10%;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .t-right {
+          display: flex;
+          align-items: center;
+          img {
+            width: 1rem;
+            height: 1rem;
+            margin-right: 0.5rem;
+          }
+        }
+        .flex {
+          display: flex;
+          cursor: pointer;
+          div {
+            margin-left: 0.5rem;
+          }
+        }
+      }
+      ::v-deep .dv-scroll-board .rows .row-item {
+        margin-bottom: 0.6rem;
+      }
    }
  }
 }
--- a/src/view/delivery/components/center.vue
+++ b/src/view/delivery/components/center.vue
@ -30,9 +30,8 @@ import AMap from "./AMap.vue";
    pointer-events: none;
  }
  .map {
-    height: 98%;
+    height: 100%;
    width: 100%;
-    margin: 0.5rem 0;
  }
 }
 </style>
--- a/src/view/delivery/components/left.vue
+++ b/src/view/delivery/components/left.vue
@ -132,7 +132,7 @@ onMounted(() => {
    <div class="box">
      <div class="title">配送详情</div>
      <div class="head-box b-box">商品信息</div>
-      <div class="order">
+      <div class="order_h">
        <div class="top">
          <div>
            订单编号
@ -278,23 +278,63 @@ onMounted(() => {
    text-align: left;
    padding: 0.5rem 0;
    padding-left: 1rem;
-    margin-bottom: 0.5rem;
  }
  .order {
+    width: 100%;
+    background-image: url(../../../assets/delivery_img/box2.png);
+    background-size: 100% 100%;
+    height: 10%;
+    .bottom {
+      width: 90%;
+      height: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 0 auto;
+      .img {
+        height: 4rem;
+        width: 3.5rem;
+      }
+      .name {
+        height: 60%;
+        flex: 1;
+        padding: 0.2rem 1.2rem;
+        text-align: left;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .name2 {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+        }
+        div {
+          margin-left: 0.4rem;
+        }
+      }
+    }
+  }
+  .order_h {
    width: 100%;
    background-image: url(../../../assets/delivery_img/box3.png);
    background-size: 100% 100%;
+    height: 15%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
    .top {
-      width: calc(100% - 40px);
-      padding: 20px;
-      padding-bottom: 10px;
+      width: 90%;
+      box-sizing: border-box !important;
+      padding-top: 1rem;
      display: flex;
      justify-content: space-between;
    }
    .line {
      display: flex;
-      width: calc(100% - 40px);
-      padding: 0 20px;
+      width: 90%;
      align-items: center;
      .c {
        width: 0.2rem;
@ -309,15 +349,18 @@ onMounted(() => {
      }
    }
    .bottom {
-      width: calc(100% - 60px);
-      padding: 20px 30px 30px 30px;
+      width: 90%;
      display: flex;
      justify-content: space-between;
+      align-items: center;
+      box-sizing: border-box !important;
+      padding-bottom: 1rem;
      .img {
        height: 4rem;
        width: 3.5rem;
      }
      .name {
+        height: 80%;
        flex: 1;
        padding: 0.2rem 1.2rem;
        text-align: left;
@ -338,8 +381,8 @@ onMounted(() => {
    }
  }
  .map {
-    height: 12rem;
-    width: 90%;
+    height: 16%;
+    width: 96%;
    margin: 0.5rem 0;
    border: 1px solid rgba(91, 219, 246, 1);
    position: relative;
@ -356,15 +399,18 @@ onMounted(() => {
  .delivery {
    display: flex;
    width: 100%;
+    height: 20%;
    .left {
      flex: 1;
+      height: 100%;
      .left-item {
+        height: 50%;
        display: flex;
        align-items: center;
-        padding: 1.2rem 0;
-        padding-left: 1.2rem;
        background-image: url(../../../assets/delivery_img/box1.png);
        background-size: 100% 100%;
+        box-sizing: border-box;
+        padding-left: 10%;
        .img {
          height: 4rem;
          width: 3.5rem;
--- a/src/view/index/components/ball.vue
+++ b/src/view/index/components/ball.vue
@ -0,0 +1,202 @@
+<template>
+  <div class="box-a">
+    <div class="star">
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+      <div class="starline"></div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.box-a {
+  transform-style: preserve-3d;
+  height: 100%;
+  height: 100%;
+  transform: rotateX(70deg) rotateY(-20deg);
+}
+.star {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 80vh;
+  height: 80vh;
+  transform-style: preserve-3d;
+  /*border: 1px solid #fff;*/
+  animation: starrotate 10s linear;
+  animation-iteration-count: infinite;
+}
+.starline {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #3870b4;
+  border-radius: 50%;
+}
+.starline:nth-child(1) {
+  transform: rotateY(10deg);
+}
+.starline:nth-child(2) {
+  transform: rotateY(20deg);
+}
+.starline:nth-child(3) {
+  transform: rotateY(30deg);
+}
+.starline:nth-child(4) {
+  transform: rotateY(40deg);
+}
+.starline:nth-child(5) {
+  transform: rotateY(500deg);
+}
+.starline:nth-child(6) {
+  transform: rotateY(60deg);
+}
+.starline:nth-child(7) {
+  transform: rotateY(70deg);
+}
+.starline:nth-child(8) {
+  transform: rotateY(80deg);
+}
+.starline:nth-child(9) {
+  transform: rotateY(90deg);
+}
+.starline:nth-child(10) {
+  transform: rotateY(100deg);
+}
+.starline:nth-child(11) {
+  transform: rotateY(110deg);
+}
+.starline:nth-child(12) {
+  transform: rotateY(120deg);
+}
+.starline:nth-child(13) {
+  transform: rotateY(130deg);
+}
+.starline:nth-child(14) {
+  transform: rotateY(140deg);
+}
+.starline:nth-child(15) {
+  transform: rotateY(150deg);
+}
+.starline:nth-child(16) {
+  transform: rotateY(160deg);
+}
+.starline:nth-child(17) {
+  transform: rotateY(170deg);
+}
+.starline:nth-child(18) {
+  transform: rotateY(180deg);
+}
+.starline:nth-child(19) {
+  transform: rotateX(10deg);
+}
+.starline:nth-child(20) {
+  transform: rotateX(20deg);
+}
+.starline:nth-child(21) {
+  transform: rotateX(30deg);
+}
+.starline:nth-child(22) {
+  transform: rotateX(40deg);
+}
+.starline:nth-child(23) {
+  transform: rotateX(50deg);
+}
+.starline:nth-child(24) {
+  transform: rotateX(60deg);
+}
+.starline:nth-child(25) {
+  transform: rotateX(70deg);
+}
+.starline:nth-child(26) {
+  transform: rotateX(80deg);
+}
+.starline:nth-child(27) {
+  transform: rotateX(90deg);
+}
+.starline:nth-child(28) {
+  transform: rotateX(100deg);
+}
+.starline:nth-child(29) {
+  transform: rotateX(110deg);
+}
+.starline:nth-child(30) {
+  transform: rotateX(120deg);
+}
+.starline:nth-child(31) {
+  transform: rotateX(130deg);
+}
+.starline:nth-child(32) {
+  transform: rotateX(140deg);
+}
+.starline:nth-child(33) {
+  transform: rotateX(150deg);
+}
+.starline:nth-child(34) {
+  transform: rotateX(160deg);
+}
+.starline:nth-child(35) {
+  transform: rotateX(170deg);
+}
+.starline:nth-child(36) {
+  transform: rotateX(180deg);
+}
+.starline:nth-child(36) {
+  transform: rotateX(180deg);
+}
+@keyframes starrotate {
+  from {
+    transform: rotateZ(0deg);
+  }
+  to {
+    transform: rotateZ(360deg);
+  }
+}
+</style>
--- a/src/view/index/components/centerItem1.vue
+++ b/src/view/index/components/centerItem1.vue
@ -1,10 +1,15 @@
 <script setup>
+import ball from "./ball.vue";
+import centerMap from "./centerMap.vue";

 </script>

 <template>
  <div class="box">
-    <div class="ball"></div>
+    <div class="ball">
+      <ball class="ball1"></ball>
+    </div>
+    <centerMap class="c-map"></centerMap>
  </div>
 </template>

@ -15,11 +20,18 @@
  display: flex;
  justify-content: center;
  align-items: center;
+  position: relative;
  .ball {
-    width: 40rem;
-    height: 40rem;
-    background-image: url(../../../assets/img/ball.png);
-    background-size: 100% 100%;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+  .c-map {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
  }
 }
 </style>
--- a/src/view/index/components/centerMap.vue
+++ b/src/view/index/components/centerMap.vue
@ -0,0 +1,156 @@
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import * as echarts from 'echarts';
+import luxian from "@/assets/json/luxian.json";
+import hejiang from "@/assets/json/hejiang.json";
+import xuyong from "@/assets/json/xuyong.json";
+
+const mapType = reactive({
+  name: '',
+  json: ''
+})
+
+const changeType = (name) => {
+  mapType.name = name;
+  if (name == 'luxian') mapType.json = luxian;
+  if (name == 'hejiang') mapType.json = hejiang;
+  if (name == 'xuyong') mapType.json = xuyong;
+}
+changeType('luxian');
+
+const dataValue = [
+  { name: '北京', value: [105.38, 29.15] },
+  { name: '上海', value: [105.32, 29.15] },
+]
+
+const echartsRef = ref(null);
+const initMap = () => {
+  // 基于DOM元素初始化echarts实例
+  const chart = echarts.init(echartsRef.value);
+  echarts.registerMap(mapType.name, mapType.json);
+  let option = {
+    animation: false,
+    //geo方式地理坐标系组件。
+    geo: {
+      map: mapType.name,
+      zoom: 1.0,
+      label: {
+        show: true,
+        color: '#fff',
+        fontSize: 25,
+        // 高亮状态下的多边形和标签样式。
+
+      },
+      //   选中状态下的多边形和标签样式
+      emphasis: {
+        itemStyle: {
+          color: '#546686', //地图背景色
+          borderColor: '#fff', //省市边界线00fcff 516a89
+          borderWidth: 1,
+        },
+        label: {
+          color: '#fff'
+        }
+      },
+      // aspectScale:0.75, //长宽比
+      //   roam: true, //是否允许缩放
+      itemStyle: {
+        normal: {
+          color: '#546686', //地图背景色          
+          borderColor: '#fff', //省市边界线00fcff 516a89
+          borderWidth: 1,
+          areaColor: "#3f5171",
+          shadowColor: "#5bdbf6",
+          shadowOffsetX: 4,
+          shadowOffsetY: 8,
+          //   shadowBlur: 2
+        },
+      },
+    },
+    series: [
+      {
+        type: "map",
+        map: mapType.name,
+        emphasis: {
+          disabled: true
+        },
+        select: {
+          disabled: true
+        },
+        itemStyle: {
+          normal: {
+            areaColor: "#3f5171",
+            borderColor: "#fff",
+            borderWidth: 1,
+            shadowColor: "#5bdbf6",
+            shadowOffsetX: 5,
+            shadowOffsetY: 10,
+            shadowBlur: 30
+          }
+        }
+      },
+      {
+        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],
+        tooltip: {
+          formatter (value) {
+            console.log(value);
+            return "";
+          },
+          show: true
+        },
+        encode: {
+          value: 2
+        },
+        label: {
+          formatter: "{b}",
+          position: "right",
+          show: false
+        },
+        itemStyle: {
+          color: "#0efacc"
+        },
+        emphasis: {
+          label: {
+            show: false
+          }
+        }
+      },
+    ]
+  }
+  // 使用配置项显示图表
+  chart.setOption(option);
+}
+onMounted(() => {
+  initMap();
+})
+</script>
+
+<template>
+  <div class="map">
+    <div class="echarts" ref="echartsRef"></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.map {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* background-color: rgba($color: #fff, $alpha: 0.3); */
+  .echarts {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
--- a/src/view/index/components/leftItme1.vue
+++ b/src/view/index/components/leftItme1.vue
@ -1,6 +1,7 @@
 <script setup>
 import { reactive, ref } from "vue"
 import border from "../../../components/border.vue"
+import { useRoute, useRouter } from "vue-router";
 const list = reactive({
  header: ['ID', '收件人', '收件人电话', '商品信息', '收货地址'],
  data: [
@ -31,11 +32,18 @@ const cell1 = reactive({
  borderRadius: 3,
  colors: ['#66FFFF', '#FEDB65']
 })
+
+const route = useRouter()
+
+const navToDelivery = () => {
+  route.push('/delivery')
+}
+
 </script>

 <template>
  <border>
-    <div class="box">
+    <div class="box" @click="navToDelivery">
      <div class="title">今日订单数</div>
      <div class="my-day-num">
        <div class="my-num-item">0</div>
@ -46,14 +54,12 @@ const cell1 = reactive({
        <div class="my-num-item">1</div>
      </div>
      <div class="order-list">
-        <div class="head">
-          <div class="item">
-            <div class="c-circle">
-              <div class="c"></div>
+        <div class="top">
+          <div class="t-right">
+            <img src="/src/assets/img/item.png" />
+            <div>今日订单</div>
          </div>
-            <div>订单列表</div>
-          </div>
-          <div class="item">
+          <div class="flex">
            <div>查看更多</div>
            <div>{{ "〉" }}</div>
          </div>
@ -99,7 +105,7 @@ const cell1 = reactive({

 <style scoped lang="scss">
 .box {
-  height: 92%;
+  height: calc(100% - 40px);
  width: 100%;
  padding: 20px 20px;
  font-size: 0.8rem;
@ -125,6 +131,7 @@ const cell1 = reactive({
    display: flex;
    justify-content: center;
    width: 100%;
+    height: 10%;
    margin-top: 10px;
    .my-num-item {
      margin-right: 10px;
@ -143,32 +150,26 @@ const cell1 = reactive({
    height: 55%;
    width: 100%;
    margin-top: 10px;
-    .head {
-      /* width: 100%; */
+    .top {
+      height: 10%;
+      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
-      .item {
+      .t-right {
        display: flex;
        align-items: center;
-        & > div {
-          margin: 5px;
+        img {
+          width: 1rem;
+          height: 1rem;
+          margin-right: 0.5rem;
        }
-        .c-circle {
-          border: 2px solid #5bdbf6;
-          width: 16px;
-          height: 16px;
-          border-radius: 50%;
-          background-color: rgba($color: #5bdbf6, $alpha: 0.1);
+      }
+      .flex {
        display: flex;
-          align-items: center;
-          justify-content: center;
-          .c {
-            background-color: #5bdbf6;
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-          }
+        cursor: pointer;
+        div {
+          margin-left: 0.5rem;
        }
      }
    }
--- a/src/view/index/components/leftItme2.vue
+++ b/src/view/index/components/leftItme2.vue
@ -60,14 +60,8 @@ onUnmounted(() => {
  <border>
    <div class="box">
      <div class="title">订单排行榜</div>
-      <div class="list">
-        <!-- <dv-scroll-board :config="list" style="width: 100%; height: 300px" /> -->
      <div class="scroll-container" ref="scrollContainerRef">
-          <div
-            v-for="(item, index) in items"
-            :key="item.id"
-            class="b-list-item"
-          >
+        <div v-for="(item, index) in items" :key="item.id" class="b-list-item">
          <div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
            {{ index + 1 }}
          </div>
@ -83,19 +77,19 @@ onUnmounted(() => {
        </div>
      </div>
    </div>
-    </div>
  </border>
 </template>

 <style scoped lang="scss">
 .box {
-  padding: 20px;
+  height: 100%;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
-  justify-content: space-between;
+  justify-content: space-around;
  align-items: center;
-  width: calc(100% - 40px);
+  padding: 0 20px;
+
  .title {
    width: 100%;
    background-image: url(../../../assets/img/title.png);
@ -107,16 +101,9 @@ onUnmounted(() => {
    font-family: "ifonts";
    font-size: 1.2rem;
  }
-  .list {
-    margin-top: 20px;
-    width: 100%;
-    height: 80%;
-    .list-span1 {
-      background-color: red;
-    }
-  }
  .scroll-container {
-    height: 300px;
+    height: 80%;
+    width: 100%;
    overflow-y: auto;
    /* 隐藏滚动条 */
    scrollbar-width: none;
--- a/src/view/index/components/rightItem2.vue
+++ b/src/view/index/components/rightItem2.vue
@ -49,7 +49,7 @@ onUnmounted(() => {
 <template>
  <border>
    <div class="box">
-      <div class="title">订单排行榜</div>
+      <div class="title">配送商品排行榜</div>
      <div class="list">
        <!-- <dv-scroll-board :config="list" style="width: 100%; height: 300px" /> -->
        <div class="scroll-container" ref="scrollContainerRef">
--- a/src/view/index/index.vue
+++ b/src/view/index/index.vue
@ -6,7 +6,6 @@ import centerItme1 from "./components/centerItem1.vue";
 import centerItme2 from "./components/centerItem2.vue";
 import rightItem1 from "./components/rightItem1.vue";
 import rightItem2 from "./components/rightItem2.vue";
-
 </script>

 <template>
@ -14,7 +13,7 @@ import rightItem2 from "./components/rightItem2.vue";
  <div class="center">
    <div class="item">
      <leftItme1 style="height: 58%"></leftItme1>
-      <leftItme2 style="height: 38%"></leftItme2>
+      <leftItme2 style="height: 40%"></leftItme2>
    </div>
    <div class="item item_c">
      <centerItme1 style="height: 66%"></centerItme1>
@ -37,7 +36,7 @@ import rightItem2 from "./components/rightItem2.vue";
    height: 100%;
    display: flex;
    flex-direction: column;
-    justify-content: space-around;
+    justify-content: space-evenly;
    align-content: center;
    /* border: 1px solid red; */
    & > .div {