更新

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>

src/api/index.js

@@ -1,5 +1,9 @@
 import axios from "@/utils/axios.js";
 
-export const test = () => {
+export const orderList = (data) => {
-    return axios.get('/common/home');
+    return axios.get('dataview/curr_order_info', { params: data });
+}
+
+export const orderRanking = (data) => {
+    return axios.get('dataview/order_ranking', { params: data });
 }

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) => {
+const initData = (data) => {
-  for (let i = 0; i < 100; i++) {
+  let arr = [];
-    if (i % 2 == 0) {
+  for (let i = 0; i < data.length; i++) {
-      aaa.data.push(
+    let calss = 'div';
+    if (i % 2 != 0) {
+      calss = 'div div2'
+    }
+    arr.push(
       [
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
+        `<div class="${calss}">${data[i].order_sn || '-'}</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);' >排sd序</div>`,
+        `<div class="${calss}">${data[i].real_name || '-'}</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
+        `<div class="${calss}">${data[i].user_phone || '-'}</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
+        `<div class="${calss}">${data[i].user_address || '-'}</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
+        `<div class="${calss}">${data[i].store_name || '-'}</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
+        `<div class="${calss}">${data[i].mer_name || '-'}</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
+        `<div class="${calss}">${data[i].create_time || '-'}</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
+        `<div class="${calss}">${data[i].status || '-'}</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
+        `<div class="${calss}">${data[i].courier || '-'}</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>`,
-        ]
-
-
     )
   }
-
+  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;

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,
+  total: 0,
-  pageSize: 30,
+  limit: 10,
-  pageAll: 7
+  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 = () => {
+const blur = (e) => {
-  console.log(pages.value.page);
+  let value = pages.value.page;
-  if (pages.value.page < 0) pages.value.page = 1;
+  if (typeof value === 'number' || (typeof value === 'string' && !isNaN(Number(value)))) {
-  if (pages.value.page > pages.value.pageAll) pages.value.page = pages.value.pageAll;
+    if (value > pages.value.pageAll) pages.value.page = pages.value.pageAll;
-}
+    if (value < 1) pages.value.page = 1;
-const input = (e) => {
+    emit('loadList', pages.value)
-  if (e.data >= 0 && e.data <= 9) return getPage();
+  } 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>

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 => {

src/view/index/components/centerItem2.vue

@@ -2,12 +2,20 @@
 import { onMounted, reactive, ref } from "vue";
 import * as echarts from 'echarts';
 import border from "../../../components/border.vue"
-const xData2 = reactive(["福集镇", "嘉明镇", "喻寺镇", "得胜镇", "牛滩镇", "兆雅镇",
+import { orderRanking } from "@/api/index.js"
-  "太伏镇", "云龙镇", "石桥镇", "毗卢镇", "奇峰镇", "潮河镇", "云锦镇"]);
-const data1 = reactive([200, 100, 200, 200, 100, 120, 150, 164, 153, 140, 255, 284, 230]);
-const data_bottom = reactive([]);
 
-const option = reactive({
+const xData2 = ref([]);
+const data1 = ref([]);
+const data_bottom = ref([]);
+const orderCount = ref(0);
+
+const echartsRef = ref(null);
+const initMap = () => {
+
+  // 基于DOM元素初始化echarts实例
+  const chart = echarts.init(echartsRef.value);
+
+  let option = {
     backgroundColor: 'rgba(0,0,0,0)',
     tooltip: {
       trigger: 'item',
@@ -21,7 +29,7 @@ const option = reactive({
       bottom: 50
     },
     xAxis: {
-    data: xData2,
+      data: xData2.value,
       axisTick: {
         show: false
       },
@@ -29,12 +37,15 @@ const option = reactive({
         show: false
       },
       axisLabel: {
-      interval: 0,
+        // interval: 0,
         textStyle: {
           color: '#fff',
           fontSize: 10,
         },
         margin: 20, //刻度标签与轴线之间的距离。
+        formatter: function (value) {
+          return value.split("").slice(0, 3).join("\n"); // 将文字逐个字符换行显示
+        }
       },
 
     },
@@ -77,7 +88,7 @@ const option = reactive({
             }], false)
           }
         },
-      "data": data_bottom
+        "data": data_bottom.value
       },
 
 
@@ -100,7 +111,7 @@ const option = reactive({
           }
         },
 
-      data: data1
+        data: data1.value
       },
 
       { // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
@@ -111,7 +122,7 @@ const option = reactive({
         itemStyle: {
           color: 'transparent'
         },
-      data: data1
+        data: data1.value
       },
 
       {
@@ -133,29 +144,38 @@ const option = reactive({
           }
         },
         "symbolPosition": "end",
-      "data": data1
+        "data": data1.value
       },
 
 
     ]
-})
+  }
-
-const echartsRef = ref(null);
-const initMap = () => {
-
-  // 基于DOM元素初始化echarts实例
-  const chart = echarts.init(echartsRef.value);
-
-  data1.forEach(item => {
-    data_bottom.push(1)
-  })
 
   // 使用配置项显示图表
   chart.setOption(option);
 }
-onMounted(() => {
+
+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(() => {
+  loadOrderList();
+})
 </script>
 
 <template>
@@ -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>

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 piePatternImg = new Image();
-  let domImg = document.createElement("img");
+  piePatternImg.src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35e6b202312021115251405.png';
-  domImg.style.height = '1000px';
-  domImg.style.width = "1000px";
-  domImg.src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6b962202311291338462283.png';
 
 
   let option = {
@@ -211,10 +207,18 @@ const initMap = () => {
             // },
           }
         },
-        // viewControl: { // 用于控制地图的倾斜和旋转
+
-        //   distance: 120, // 地图与相机的距离
+        // itemStyle: {
-        //   alpha: 35, // 地图的倾斜角度
+        //   color: {
-        //   beta: 0 // 地图的旋转角度
+        //     image: piePatternImg,
+        //     repeat: 'no-repeat',
+        //   },
+        //   areaColor: {
+        //     image: piePatternImg,
+        //     repeat: 'no-repeat',
+        //   },
+        //   borderColor: '#bddee6',
+        //   borderWidth: 1,
         // },
       },
       {

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) => {
+const initData = (data) => {
-  for (let i = 0; i < 20; i++) {
+  let arr = [];
-    if (i % 2 == 0) {
+  for (let i = 0; i < data.length; i++) {
-      aaa.data.push(
+    let calss = 'div';
+    if (i % 2 != 0) {
+      calss = 'div div2'
+    }
+    arr.push(
       [
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+        `<div class="${calss}">${i + 1}</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)' >排sd序</div>`,
+        `<div class="${calss}">${data[i].real_name || '-'}</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+        `<div class="${calss}">${data[i].user_phone || '-'}</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+        `<div class="${calss}">${data[i].store_name || '-'}</div>`,
-          `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
+        `<div class="${calss}">${data[i].user_address || '-'}</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>`,
       ]
     )
   }
-
+  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({
+const cell = reactive([
-  value: 66,
+  {
-  label: '66.66%',
+    value: 0,
-  count: 66542,
+    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" v-for="(item, index) in cOrder()" :key="index">
-        <div class="my-num-item">0</div>
+          {{ item }}
-        <div class="my-num-item">5</div>
+        </div>
-        <div class="my-num-item">2</div>
-        <div class="my-num-item">4</div>
-        <div class="my-num-item">1</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">
+            <div>
-              已完成<span class="sapn">{{ cell1.label }}</span>
+              占比<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;

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({
+import { orderRanking } from "@/api/index.js"
-  data: [
+const items = ref([])
-    [`<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' },
-])
 const scrollContainerRef = ref(null);
 let timer = null;
 const autoScroll = () => {
@@ -51,11 +19,32 @@ const autoScroll = () => {
     }, 50)
   }, 1000)
 }
-onMounted(() => {
+
+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
+          <div v-for="(item, index) in items" :key="index" class="b-list-item">
-            v-for="(item, index) in items"
-            :key="item.id"
-            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>

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;

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: [