From 8fb277ad9289b50f58b7771ca2d59d44211c5273 Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Sat, 2 Dec 2023 19:04:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                               |   6 -
 src/api/index.js                          |   8 +-
 src/components/Businesses.vue             |  97 ++++---
 src/components/paging.vue                 |  51 +++-
 src/utils/axios.js                        |   8 +-
 src/view/index/components/centerItem2.vue | 302 ++++++++++++----------
 src/view/index/components/centerMap.vue   |  24 +-
 src/view/index/components/leftItme1.vue   | 182 +++++++++----
 src/view/index/components/leftItme2.vue   |  75 +++---
 src/view/index/components/rightItem1.vue  |   1 +
 vite.config.js                            |   4 +-
 11 files changed, 450 insertions(+), 308 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4a15f6f..d24c6a0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,6 @@
 <script setup>
 import headView from "@/components/headView.vue";
 import Businesses from "@/components/Businesses.vue";
-import { test } from "@/api/index.js";
-test().then(res => {
-  console.log(res);
-}).catch(e => {
-  console.log(e);
-})
 </script>
 
 <template>
diff --git a/src/api/index.js b/src/api/index.js
index cd75d54..c33feec 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,5 +1,9 @@
 import axios from "@/utils/axios.js";
 
-export const test = () => {
-    return axios.get('/common/home');
+export const orderList = (data) => {
+    return axios.get('dataview/curr_order_info', { params: data });
+}
+
+export const orderRanking = (data) => {
+    return axios.get('dataview/order_ranking', { params: data });
 }
\ No newline at end of file
diff --git a/src/components/Businesses.vue b/src/components/Businesses.vue
index c356b69..dae74b4 100644
--- a/src/components/Businesses.vue
+++ b/src/components/Businesses.vue
@@ -4,6 +4,7 @@ import { ref, reactive, onMounted } from "vue"
 import { useRouter } from 'vue-router'
 import paging from "./paging.vue"
 import mitt from "@/utils/mitt"
+import { orderList } from "@/api/index.js"
 const route = useRouter()
 
 const ShwostoreType = ref(false)
@@ -22,43 +23,31 @@ const hdClick = (e) => {
 
 
 }
-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 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: '',
@@ -78,8 +67,28 @@ const configs = reactive({
   data: [
   ]
 })
+
+const pages = ref({
+  areaCode: 510524,
+  streetCode: 510524100,
+  page: 1,
+  limit: 30,
+  total: 0,
+  pageAll: 0
+})
+
+const loadOrderList = (pramas) => {
+  orderList(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(() => {
-  a(configs);
+  // loadOrderList();
   mitt.on('showBusinesses', () => {
     isShow.value = !isShow.value;
   })
@@ -95,12 +104,13 @@ onMounted(() => {
           <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></paging>
+          <paging :page="pages" @loadList="loadOrderList"></paging>
         </div>
       </div>
     </div>
@@ -152,6 +162,21 @@ onMounted(() => {
   }
 }
 
+: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: 5px;
diff --git a/src/components/paging.vue b/src/components/paging.vue
index 743f84b..3cab8a9 100644
--- a/src/components/paging.vue
+++ b/src/components/paging.vue
@@ -1,31 +1,56 @@
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
+
+const props = defineProps({
+  page: {
+    type: Object,
+    default: null
+  }
+});
+
+const emit = defineEmits(['loadList']);
 
 const pages = ref({
   page: 1,
-  total: 63,
-  pageSize: 30,
-  pageAll: 7
+  total: 0,
+  limit: 10,
+  pageAll: 1,
 })
 
+watch(() => props.page, (n, o) => {
+  Object.keys(n).forEach(key => {
+    pages.value[key] = n[key];
+  })
+}, { deep: true, immediate: true })
+
+
+
 const prev = () => {
   if (pages.value.page > 1) pages.value.page--;
+  emit('loadList', pages.value);
 }
 const next = () => {
   if (pages.value.page < pages.value.pageAll) pages.value.page++;
+  emit('loadList', pages.value)
 }
 const setPage = (page = 1) => {
   pages.value.page = page;
+  emit('loadList', pages.value)
 }
-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;
+const blur = (e) => {
+  let value = pages.value.page;
+  if (typeof value === 'number' || (typeof value === 'string' && !isNaN(Number(value)))) {
+    if (value > pages.value.pageAll) pages.value.page = pages.value.pageAll;
+    if (value < 1) pages.value.page = 1;
+    emit('loadList', pages.value)
+  } else {
+    pages.value.page = 1;
+    emit('loadList', pages.value)
+  }
 }
+
+emit('loadList', pages.value)
+
 </script>
   
 <template>
@@ -85,7 +110,7 @@ const input = (e) => {
     <div class="num" @click="next">{{ ">" }}</div>
     <div class="btn">
       <div>前往</div>
-      <input v-model="pages.page" @input="input" />
+      <input v-model="pages.page" @blur="blur" @keyup.enter="blur" />
       <div>页</div>
     </div>
   </div>
diff --git a/src/utils/axios.js b/src/utils/axios.js
index 2f0c9a4..553fa28 100644
--- a/src/utils/axios.js
+++ b/src/utils/axios.js
@@ -5,10 +5,16 @@ const request = axios.create({
     timeout: 5000
 })
 
+function convertParamsToQueryString (params) {
+    const queryString = Object.keys(params)
+        .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
+        .join('&');
+    return queryString;
+}
+
 // 请求拦截器
 request.interceptors.request.use(
     config => {
-        // 在发送请求之前做些什么，例如添加token、修改请求头等
         return config;
     },
     error => {
diff --git a/src/view/index/components/centerItem2.vue b/src/view/index/components/centerItem2.vue
index c5d4018..b06918e 100644
--- a/src/view/index/components/centerItem2.vue
+++ b/src/view/index/components/centerItem2.vue
@@ -2,143 +2,12 @@
 import { onMounted, reactive, ref } from "vue";
 import * as echarts from 'echarts';
 import border from "../../../components/border.vue"
-const xData2 = reactive(["福集镇", "嘉明镇", "喻寺镇", "得胜镇", "牛滩镇", "兆雅镇",
-  "太伏镇", "云龙镇", "石桥镇", "毗卢镇", "奇峰镇", "潮河镇", "云锦镇"]);
-const data1 = reactive([200, 100, 200, 200, 100, 120, 150, 164, 153, 140, 255, 284, 230]);
-const data_bottom = reactive([]);
+import { orderRanking } from "@/api/index.js"
 
-const option = reactive({
-  backgroundColor: 'rgba(0,0,0,0)',
-  tooltip: {
-    trigger: 'item',
-    backgroundColor: 'rgba(91, 219, 246, 0.7)',
-    textStyle: {
-      color: '#fff'
-    }
-  },
-  grid: {
-    left: 60,
-    bottom: 50
-  },
-  xAxis: {
-    data: xData2,
-    axisTick: {
-      show: false
-    },
-    axisLine: {
-      show: false
-    },
-    axisLabel: {
-      interval: 0,
-      textStyle: {
-        color: '#fff',
-        fontSize: 10,
-      },
-      margin: 20, //刻度标签与轴线之间的距离。
-    },
-
-  },
-  yAxis: {
-    splitLine: {
-      show: true,
-      lineStyle: {
-        color: 'rgba(0, 156, 255, 0.10)'   // 设置分隔线颜色
-      }
-    },
-    axisTick: {
-      show: false
-    },
-    axisLine: {
-      show: false
-    },
-    axisLabel: {
-      textStyle: {
-        color: '#fff',
-        fontSize: 10,
-      },
-    }
-  },
-  series: [
-    {//三个最低下的圆片
-      "name": "",
-      "type": "pictorialBar",
-      "symbolSize": [10, 4],
-      "symbolOffset": [0, 2],
-      "z": 12,
-      itemStyle: {
-        opacity: 1,
-        color: function (params) {
-          return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-            offset: 0,
-            color: '#0E60B2' // 0% 处的颜色
-          }, {
-            offset: 1,
-            color: '#5BDBF6'// 100% 处的颜色
-          }], false)
-        }
-      },
-      "data": data_bottom
-    },
-
-
-    //下半截柱状图
-    {
-      name: '2020',
-      type: 'bar',
-      barWidth: 10,
-      barGap: '-100%',
-      itemStyle: {//lenged文本
-        opacity: .7,
-        color: function (params) {
-          return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-            offset: 0,
-            color: '#0E60B2' // 0% 处的颜色
-          }, {
-            offset: 1,
-            color: '#5BDBF6'// 100% 处的颜色
-          }], false)
-        }
-      },
-
-      data: data1
-    },
-
-    { // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
-      type: 'bar',
-      barWidth: 10,
-      barGap: '-100%',
-      stack: '广告',
-      itemStyle: {
-        color: 'transparent'
-      },
-      data: data1
-    },
-
-    {
-      "name": "",
-      "type": "pictorialBar",
-      "symbolSize": [10, 4],
-      "symbolOffset": [0, -2],
-      "z": 12,
-      itemStyle: {
-        opacity: 1,
-        color: function (params) {
-          return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-            offset: 0,
-            color: '#0E60B2' // 0% 处的颜色
-          }, {
-            offset: 1,
-            color: '#5BDBF6'// 100% 处的颜色
-          }], false)
-        }
-      },
-      "symbolPosition": "end",
-      "data": data1
-    },
-
-
-  ]
-})
+const xData2 = ref([]);
+const data1 = ref([]);
+const data_bottom = ref([]);
+const orderCount = ref(0);
 
 const echartsRef = ref(null);
 const initMap = () => {
@@ -146,15 +15,166 @@ const initMap = () => {
   // 基于DOM元素初始化echarts实例
   const chart = echarts.init(echartsRef.value);
 
-  data1.forEach(item => {
-    data_bottom.push(1)
-  })
+  let option = {
+    backgroundColor: 'rgba(0,0,0,0)',
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(91, 219, 246, 0.7)',
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    grid: {
+      left: 60,
+      bottom: 50
+    },
+    xAxis: {
+      data: xData2.value,
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        // interval: 0,
+        textStyle: {
+          color: '#fff',
+          fontSize: 10,
+        },
+        margin: 20, //刻度标签与轴线之间的距离。
+        formatter: function (value) {
+          return value.split("").slice(0, 3).join("\n"); // 将文字逐个字符换行显示
+        }
+      },
+
+    },
+    yAxis: {
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(0, 156, 255, 0.10)'   // 设置分隔线颜色
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#fff',
+          fontSize: 10,
+        },
+      }
+    },
+    series: [
+      {//三个最低下的圆片
+        "name": "",
+        "type": "pictorialBar",
+        "symbolSize": [10, 4],
+        "symbolOffset": [0, 2],
+        "z": 12,
+        itemStyle: {
+          opacity: 1,
+          color: function (params) {
+            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              offset: 0,
+              color: '#0E60B2' // 0% 处的颜色
+            }, {
+              offset: 1,
+              color: '#5BDBF6'// 100% 处的颜色
+            }], false)
+          }
+        },
+        "data": data_bottom.value
+      },
+
+
+      //下半截柱状图
+      {
+        name: '2020',
+        type: 'bar',
+        barWidth: 10,
+        barGap: '-100%',
+        itemStyle: {//lenged文本
+          opacity: .7,
+          color: function (params) {
+            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              offset: 0,
+              color: '#0E60B2' // 0% 处的颜色
+            }, {
+              offset: 1,
+              color: '#5BDBF6'// 100% 处的颜色
+            }], false)
+          }
+        },
+
+        data: data1.value
+      },
+
+      { // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
+        type: 'bar',
+        barWidth: 10,
+        barGap: '-100%',
+        stack: '广告',
+        itemStyle: {
+          color: 'transparent'
+        },
+        data: data1.value
+      },
+
+      {
+        "name": "",
+        "type": "pictorialBar",
+        "symbolSize": [10, 4],
+        "symbolOffset": [0, -2],
+        "z": 12,
+        itemStyle: {
+          opacity: 1,
+          color: function (params) {
+            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              offset: 0,
+              color: '#0E60B2' // 0% 处的颜色
+            }, {
+              offset: 1,
+              color: '#5BDBF6'// 100% 处的颜色
+            }], false)
+          }
+        },
+        "symbolPosition": "end",
+        "data": data1.value
+      },
+
+
+    ]
+  }
 
   // 使用配置项显示图表
   chart.setOption(option);
 }
+
+const loadOrderList = () => {
+  orderRanking({
+    areaCode: '510524',
+    streetCode: '510524100',
+    type: 2, // 1表示今日, 2表示总计
+  }).then((res) => {
+    orderCount.value = res.data.orderCount;
+    res.data.townOrderList.forEach(e => {
+      xData2.value.push(e.street_name);
+      data1.value.push(e.order_count);
+      data_bottom.value.push(1)
+    })
+    setTimeout(() => {
+      initMap()
+    })
+  })
+}
+
 onMounted(() => {
-  initMap()
+  loadOrderList();
 })
 </script>
 
@@ -165,7 +185,7 @@ onMounted(() => {
       <div class="box-c">
         <div class="left">
           <div class="img">
-            <div class="text">61258</div>
+            <div class="text">{{ orderCount }}</div>
           </div>
           <div>订单总数</div>
         </div>
diff --git a/src/view/index/components/centerMap.vue b/src/view/index/components/centerMap.vue
index 3f098ec..96167c8 100644
--- a/src/view/index/components/centerMap.vue
+++ b/src/view/index/components/centerMap.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { onMounted, reactive, ref, inject, nextTick } from "vue";
 import * as echarts from 'echarts';
-import 'echarts-gl';
 import mitt from "@/utils/mitt";
 import luxian from "@/assets/json/luxian.json";
 import hejiang from "@/assets/json/hejiang.json";
@@ -101,11 +100,8 @@ const initMap = () => {
     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 piePatternImg = new Image();
+  piePatternImg.src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35e6b202312021115251405.png';
 
 
   let option = {
@@ -211,10 +207,18 @@ const initMap = () => {
             // },
           }
         },
-        // viewControl: { // 用于控制地图的倾斜和旋转
-        //   distance: 120, // 地图与相机的距离
-        //   alpha: 35, // 地图的倾斜角度
-        //   beta: 0 // 地图的旋转角度
+
+        // itemStyle: {
+        //   color: {
+        //     image: piePatternImg,
+        //     repeat: 'no-repeat',
+        //   },
+        //   areaColor: {
+        //     image: piePatternImg,
+        //     repeat: 'no-repeat',
+        //   },
+        //   borderColor: '#bddee6',
+        //   borderWidth: 1,
         // },
       },
       {
diff --git a/src/view/index/components/leftItme1.vue b/src/view/index/components/leftItme1.vue
index 42d9ee1..3c2409f 100644
--- a/src/view/index/components/leftItme1.vue
+++ b/src/view/index/components/leftItme1.vue
@@ -2,37 +2,33 @@
 import { onMounted, reactive, ref } from "vue"
 import border from "@/components/border.vue"
 import mitt from "@/utils/mitt"
+import { orderList } from "@/api/index.js"
 
-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 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}">${i + 1}</div>`,
+        `<div class="${calss}">${data[i].real_name || '-'}</div>`,
+        `<div class="${calss}">${data[i].user_phone || '-'}</div>`,
+        `<div class="${calss}">${data[i].store_name || '-'}</div>`,
+        `<div class="${calss}">${data[i].user_address || '-'}</div>`,
+      ]
+    )
   }
+  list.data = arr;
+  scrollBoardRef.value.updateRows(list.data);
 }
 
+const scrollBoardRef = ref(null);
 const list = reactive({
   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));'>ID</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>`,
@@ -45,28 +41,92 @@ const list = reactive({
   // evenRowBGC: 'rgba(0, 168, 255, 0.16)',
   oddRowBGC: '',
   evenRowBGC: "",
-  //   columnWidth: [50],
+  columnWidth: [40, 80],
   align: ['center'],
   rowNum: 7
 })
-const cell1 = reactive({
-  value: 66,
-  label: '66.66%',
-  count: 66542,
-  borderWidth: 1,
-  borderGap: 1,
-  borderRadius: 3,
-  colors: ['#66FFFF', '#FEDB65']
-})
-
+const cell = reactive([
+  {
+    value: 0,
+    label: '0%',
+    count: 0,
+    borderWidth: 1,
+    borderGap: 1,
+    borderRadius: 3,
+    colors: ['#66FFFF', '#FEDB65']
+  },
+  {
+    value: 0,
+    label: '0%',
+    count: 0,
+    borderWidth: 1,
+    borderGap: 1,
+    borderRadius: 3,
+    colors: ['#66FFFF', '#FEDB65']
+  },
+  {
+    value: 0,
+    label: '0%',
+    count: 0,
+    borderWidth: 1,
+    borderGap: 1,
+    borderRadius: 3,
+    colors: ['#66FFFF', '#FEDB65']
+  }
+])
+const initCell = () => {
+  let all = pendingOrderCount.value + undeliveredOrderCount.value + doneOrderCountQuery.value;
+  cell[0].value = (pendingOrderCount.value / all * 100).toFixed(0);
+  cell[0].label = (pendingOrderCount.value / all * 100).toFixed(2) + '%';
+  cell[0].count = pendingOrderCount.value;
+  cell[1].value = (undeliveredOrderCount.value / all * 100).toFixed(0);
+  cell[1].label = (undeliveredOrderCount.value / all * 100).toFixed(2) + '%';
+  cell[1].count = undeliveredOrderCount.value;
+  cell[2].value = (doneOrderCountQuery.value / all * 100).toFixed(0);
+  cell[2].label = (doneOrderCountQuery.value / all * 100).toFixed(2) + '%';
+  cell[2].count = doneOrderCountQuery.value;
+}
 
 
 const openList = () => {
   mitt.emit('showBusinesses')
 }
 
+const orderCount = ref(0);
+const pendingOrderCount = ref(0);
+const undeliveredOrderCount = ref(0);
+const doneOrderCountQuery = ref(0);
+const cOrder = () => {
+  orderCount.value = orderCount.value + '';
+  let c = 6 - orderCount.value.length;
+  for (let i = 0; i < c; i++) {
+    orderCount.value = '0' + orderCount.value;
+  }
+  return orderCount.value.split('');
+}
+
+const pages = ref({
+  areaCode: 510524,
+  streetCode: 510524100,
+  page: 1,
+  limit: 30
+})
+
+const loadOrderList = () => {
+  orderList(pages.value).then((res) => {
+    initData(res.data.currOrderList);
+    orderCount.value = res.data.currOrderCount;
+    pendingOrderCount.value = res.data.pendingOrderCount;
+    undeliveredOrderCount.value = res.data.undeliveredOrderCount;
+    doneOrderCountQuery.value = res.data.doneOrderCountQuery;
+    initCell();
+  }).catch(err => {
+    console.error(err);
+  })
+}
+
 onMounted(() => {
-  initData(list);
+  loadOrderList();
 })
 
 </script>
@@ -76,12 +136,9 @@ onMounted(() => {
     <div class="box">
       <div class="title">今日订单数</div>
       <div class="my-day-num">
-        <div class="my-num-item">0</div>
-        <div class="my-num-item">0</div>
-        <div class="my-num-item">5</div>
-        <div class="my-num-item">2</div>
-        <div class="my-num-item">4</div>
-        <div class="my-num-item">1</div>
+        <div class="my-num-item" v-for="(item, index) in cOrder()" :key="index">
+          {{ item }}
+        </div>
       </div>
       <div class="order-list">
         <div class="top">
@@ -94,38 +151,42 @@ onMounted(() => {
             <div>{{ "〉" }}</div>
           </div>
         </div>
-        <dv-scroll-board :config="list" style="width: 100%; height: 90%" />
+        <dv-scroll-board
+          ref="scrollBoardRef"
+          :config="list"
+          style="width: 100%; height: 90%"
+        />
       </div>
 
       <div class="cylinder">
         <div class="cy">
           <div class="text">
-            <div class="top">
-              已完成<span class="sapn">{{ cell1.label }}</span>
+            <div>
+              占比<span class="sapn">{{ cell[0].label }}</span>
             </div>
-            <div class="num">{{ cell1.count }}</div>
+            <div class="num">{{ cell[0].count }}</div>
           </div>
-          <dv-percent-pond :config="cell1" class="cell" />
+          <dv-percent-pond :config="cell[0]" class="cell" />
           <div class="type">待取货订单数</div>
         </div>
         <div class="cy">
           <div class="text">
             <div>
-              已完成<span class="sapn">{{ cell1.label }}</span>
+              占比<span class="sapn">{{ cell[1].label }}</span>
             </div>
-            <div class="num">{{ cell1.count }}</div>
+            <div class="num">{{ cell[1].count }}</div>
           </div>
-          <dv-percent-pond :config="cell1" class="cell" />
+          <dv-percent-pond :config="cell[1]" class="cell" />
           <div class="type">未配送订单数</div>
         </div>
         <div class="cy">
           <div class="text">
             <div>
-              已完成<span class="sapn">{{ cell1.label }}</span>
+              占比<span class="sapn">{{ cell[2].label }}</span>
             </div>
-            <div class="num">{{ cell1.count }}</div>
+            <div class="num">{{ cell[2].count }}</div>
           </div>
-          <dv-percent-pond :config="cell1" class="cell" />
+          <dv-percent-pond :config="cell[2]" class="cell" />
           <div class="type">已完成订单数</div>
         </div>
       </div>
@@ -202,6 +263,21 @@ onMounted(() => {
       }
     }
 
+    :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: 5px;
diff --git a/src/view/index/components/leftItme2.vue b/src/view/index/components/leftItme2.vue
index 8c770d6..412e90e 100644
--- a/src/view/index/components/leftItme2.vue
+++ b/src/view/index/components/leftItme2.vue
@@ -1,40 +1,8 @@
 <script setup>
 import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
 import border from "../../../components/border.vue"
-const list = reactive({
-  data: [
-    [`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
-    [`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
-    [`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
-    [`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
-    [`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
-    [`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
-    [`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
-    [`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
-    [`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
-  ],
-  //   index: true,
-  headerBGC: 'rgba(0, 168, 255, 0)',
-  oddRowBGC: 'rgba(91, 219, 246, 0)',
-  evenRowBGC: 'rgba(0, 168, 255, 0)',
-  //   columnWidth: [50],
-  align: ['center']
-})
-const items = reactive([
-  { id: 1, text: '莲花池 1' },
-  { id: 2, text: '莲花池 2' },
-  { id: 3, text: '莲花池 3' },
-  { id: 3, text: '莲花池 4' },
-  { id: 3, text: '莲花池 5' },
-  { id: 3, text: '莲花池 6' },
-  { id: 3, text: '莲花池 7' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-  { id: 3, text: '莲花池 8' },
-])
+import { orderRanking } from "@/api/index.js"
+const items = ref([])
 const scrollContainerRef = ref(null);
 let timer = null;
 const autoScroll = () => {
@@ -51,10 +19,31 @@ const autoScroll = () => {
     }, 50)
   }, 1000)
 }
-onMounted(() => {
-  nextTick(() => {
-    autoScroll();
+
+const max = ref(0);
+
+const loadOrderList = () => {
+  orderRanking({
+    areaCode: '510524',
+    streetCode: '510524100',
+    type: 1, // 1表示今日, 2表示总计
+  }).then((res) => {
+    items.value = res.data.townOrderList;
+    items.value.forEach(e => {
+      if (e.order_count > max.value) max.value = e.order_count;
+    })
+    nextTick(() => {
+      autoScroll();
+    })
   })
+}
+
+const cWidth = (e) => {
+  return (e / max.value * 100).toFixed(0);
+}
+
+onMounted(() => {
+  loadOrderList();
 })
 onUnmounted(() => {
   clearInterval(timer);
@@ -74,23 +63,19 @@ onUnmounted(() => {
         "
       >
         <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="index" class="b-list-item">
             <div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
               {{ index + 1 }}
             </div>
-            <div class="name">{{ item.text }}</div>
+            <div class="name">{{ item.street_name }}</div>
             <div class="line">
               <div
                 class="line-body"
-                :style="{ width: '80%' }"
+                :style="{ width: cWidth(item.order_count) + '%' }"
                 :class="{ 'line-body2': index >= 3 }"
               ></div>
             </div>
-            <div class="count">6000</div>
+            <div class="count">{{ item.order_count }}</div>
           </div>
         </div>
       </div>
diff --git a/src/view/index/components/rightItem1.vue b/src/view/index/components/rightItem1.vue
index ec75b91..e71fed5 100644
--- a/src/view/index/components/rightItem1.vue
+++ b/src/view/index/components/rightItem1.vue
@@ -141,6 +141,7 @@ import border from "../../../components/border.vue"
     .car-item {
       display: flex;
       align-items: center;
+      cursor: pointer;
       .img {
         width: 1.3rem;
         height: 1.3rem;
diff --git a/vite.config.js b/vite.config.js
index b2a7bd2..2e3d686 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,7 +5,9 @@ import path from 'path';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
-  // ... 省略其他配置
+  server: {
+    host: '0.0.0.0'
+  },
   optimizeDeps: {
     // 开发时 解决这些commonjs包转成esm包
     include: [