feature 回收概览的地图展示&历史接口对接

src/api/statistic/overview/index.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request';
+
+// 获取省份排名列表
+export function getProvinceRankList(params) {
+  return request({
+    url: '/order/recycleStatisticOverview/order/recycleStatisticOverview/provinceRankList',
+    method: 'get',
+    params
+  });
+}
+
+// 获取统计概览数据
+export function getOverviewData(params) {
+  return request({
+    url: '/order/recycleStatisticOverview/order/recycleStatisticOverview/overview',
+    method: 'get',
+    params
+  });
+} 

src/components/DateSearch/index.vue

@@ -1,82 +1,101 @@
 <template>
-  <div class="flex items-center">
-    <div class="quick-select">
-      <el-check-tag
-        class="ml-3"
-        :checked="activeValue == item.value"
-        @change="onChange(item)"
-        v-for="item in checkList"
-        >{{ item.label }}</el-check-tag
-      >
+    <div class="flex justify-end gap-2 date-search">
+        <div class="quick-select">
+            <el-button
+                :type="activeQuickSelect === 7 ? 'primary' : ''"
+                @click="handleQuickSelect(7)"
+                >7日</el-button
+            >
+            <el-button
+                :type="activeQuickSelect === 15 ? 'primary' : ''"
+                @click="handleQuickSelect(15)"
+                >15日</el-button
+            >
+            <el-button
+                :type="activeQuickSelect === 30 ? 'primary' : ''"
+                @click="handleQuickSelect(30)"
+                >30日</el-button
+            >
+        </div>
+        <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :disabled-date="disabledDate"
+            value-format="YYYY-MM-DD"
+            @change="handleDateChange"
+            style="max-width: 320px"
+        />
+        <el-button type="primary" @click="handleSearch">搜索</el-button>
+        <el-button @click="handleReset">重置</el-button>
     </div>
-
-    <div class="ml-3">
-      <el-date-picker
-        :style="{ width: dateType == 'daterange' ? '260px' : '360px' }"
-        style="max-width: 360px; margin-right: 16px"
-        v-model="dataRange"
-        :type="dateType"
-        range-separator="-"
-        start-placeholder="开始时间"
-        end-placeholder="结束时间"
-        @change="handleDateChange"
-      />
-      <el-button style="width: 80px" type="primary" @click="search"
-        >查询</el-button
-      >
-      <el-button style="width: 80px" type="info" @click="reset">重置</el-button>
-    </div>
-  </div>
 </template>
 
 <script setup>
-  const props = defineProps({
-    startKey: { type: String, default: 'startTime' },
-    endKey: { type: String, default: 'endTime' },
-    formatterKey: { type: String, default: 'YYYY-MM-DD' },
-    dateType: { type: String, default: 'daterange' }
-  });
+import { ref, watch } from "vue";
+import dayjs from "dayjs";
+
+const props = defineProps({
+    modelValue: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+const emit = defineEmits(["update:modelValue", "search"]);
 
-  import { dayjs } from 'element-plus';
+const dateRange = ref(props.modelValue);
+const activeQuickSelect = ref(7); // 默认选中7日
 
-  const activeValue = ref(0);
-  let checkList = reactive([
-    { label: '7日', value: 1, number: 7 },
-    { label: '15日', value: 2, number: 15 },
-    { label: '30日', value: 3, number: 30 }
-  ]);
+// 监听外部值变化
+watch(
+    () => props.modelValue,
+    (newVal) => {
+        dateRange.value = newVal;
+    },
+    { deep: true }
+);
 
-  const emit = defineEmits(['search']);
-  function onChange(item) {
-    activeValue.value = item.value;
-    dataRange.value = getLastDays(item.number);
-  }
+// 监听内部值变化
+watch(
+    dateRange,
+    (newVal) => {
+        emit("update:modelValue", newVal);
+    },
+    { deep: true }
+);
 
-  function getLastDays(number = 7) {
-    const endDate = dayjs();
-    const startDate = endDate.subtract(number - 1, 'day');
-    return [
-      startDate.format(props.formatterKey),
-      endDate.format(props.formatterKey)
-    ];
-  }
+// 快捷选项点击
+const handleQuickSelect = (days) => {
+    activeQuickSelect.value = days;
+    const end = dayjs();
+    const start = dayjs().subtract(days, "day");
+    dateRange.value = [start.format("YYYY-MM-DD"), end.format("YYYY-MM-DD")];
+    emit("search", dateRange.value);
+};
 
-  const dataRange = ref([]);
+// 日期选择变化
+const handleDateChange = (val) => {
+    // 清除快捷选项的选中状态
+    activeQuickSelect.value = null;
+    emit("search", val);
+};
 
-  function search() {
-    let date = {};
-    date[props.startKey] = dataRange.value[0] || '';
-    date[props.endKey] = dataRange.value[1] || '';
-    emit('search', date);
-  }
+// 搜索按钮点击
+const handleSearch = () => {
+    emit("search", dateRange.value);
+};
 
-  function reset() {
-    dataRange.value = [];
-    activeValue.value = 0;
-    emit('search', {});
-  }
+// 重置按钮点击
+const handleReset = () => {
+    // 重置为默认7天
+    handleQuickSelect(7);
+};
 
-  function handleDateChange(value) {
-    activeValue.value = 0;
-  }
+// 禁用未来日期
+const disabledDate = (time) => {
+    return dayjs(time).isAfter(dayjs(), "day");
+};
 </script>

src/views/statistic/overview/components/map-card.vue

@@ -8,13 +8,13 @@
       />
     </el-col>
     <el-col :sm="10" :xs="24">
-      <rankList />
+      <rankList :data-list="provinceData" />
     </el-col>
   </el-row>
 </template>
 
 <script setup>
-  import { ref, reactive } from 'vue';
+  import { ref, reactive, watch } from 'vue';
   import { EleMessage } from 'ele-admin-plus/es';
   import { use, registerMap } from 'echarts/core';
   import { CanvasRenderer } from 'echarts/renderers';
@@ -29,6 +29,13 @@
   import rankList from './rank-list.vue'
   import axios from 'axios';
 
+  const props = defineProps({
+    provinceData: {
+      type: Array,
+      default: () => []
+    }
+  });
+
   use([
     CanvasRenderer,
     MapChart,
@@ -51,49 +58,84 @@
   const registerChinaMap = () => {
     axios.get('/json/china-provinces.geo.json').then((res) => {
       registerMap('china', res.data);
-      getUserCountData();
+      updateMapData();
     });
   };
 
-  /** 获取用户分布数据 */
-  const getUserCountData = () => {
-    let data = [
-      { name: '贵州', value: 570 },
-      { name: '云南', value: 8890 },
-      { name: '重庆', value: 10010 },
-      { name: '吉林', value: 5056 },
-      { name: '山西', value: 2123 },
-      { name: '天津', value: 9130 },
-      { name: '江西', value: 10170 },
-      { name: '广西', value: 6172 },
-      { name: '陕西', value: 9251 },
-      { name: '黑龙江', value: 5125 },
-      { name: '安徽', value: 9530 },
-      { name: '北京', value: 51919 },
-      { name: '福建', value: 3756 },
-      { name: '上海', value: 59190 },
-      { name: '湖北', value: 37109 },
-      { name: '湖南', value: 8966 },
-      { name: '四川', value: 31020 }
+  /** 更新地图数据 */
+  const updateMapData = () => {
+    if (!props.provinceData || !props.provinceData.length) return;
+
+
+    //特殊省份的映射
+    const provinceMap = {
+      '内蒙古自治区': '内蒙古',
+      '香港特别行政区': '香港',
+      '澳门特别行政区': '澳门',
+      '西藏自治区': '西藏',
+      '宁夏回族自治区': '宁夏',
+      '新疆维吾尔自治区': '新疆',
+      '广西壮族自治区': '广西',
+    };
+
+    // 所有省份列表
+    const allProvinces = [
+      '北京', '天津', '河北', '山西', '内蒙古',
+      '辽宁', '吉林', '黑龙江', '上海', '江苏',
+      '浙江', '安徽', '福建', '江西', '山东',
+      '河南', '湖北', '湖南', '广东', '广西',
+      '海南', '重庆', '四川', '贵州', '云南',
+      '西藏', '陕西', '甘肃', '青海', '宁夏',
+      '新疆','台湾','香港','澳门'
     ];
 
+    // 创建所有省份的初始数据
+    const initialData = allProvinces.map(province => ({
+      name: province,
+      value: 0,
+      bookNum: 0,
+      comparisonStr: '-'
+    }));
+
+    // 用实际数据更新初始数据
+    const provinceDataMap = new Map(
+      props.provinceData.map(item => [
+        provinceMap[item.provinceName] || item.provinceName,
+        {
+          value: item.orderNum,
+          bookNum: item.bookNum,
+          comparisonStr: item.comparisonStr
+        }
+      ])
+    );
+
+    const data = initialData.map(item => ({
+      ...item,
+      ...(provinceDataMap.get(item.name) || {})
+    }));
+
     const temp = data.sort((a, b) => b.value - a.value);
-    const min = temp[temp.length - 1].value || 0;
-    const max = temp[0].value || 1;
-    //
-    const list = temp.length > 10 ? temp.slice(0, 15) : temp;
+    const min = 0; // 设置最小值为0
+    const max = Math.max(...temp.map(item => item.value), 1);
+
+    const list = temp.length > 10 ? temp.slice(0, 10) : temp;
     userCountDataRank.value = list.map((d) => {
       return {
         name: d.name,
         value: d.value,
-        percent: (d.value / max) * 100
+        bookNum: d.bookNum,
+        comparisonStr: d.comparisonStr,
       };
     });
-    //
+
     Object.assign(userCountMapOption, {
       tooltip: {
         trigger: 'item',
-        borderWidth: 1
+        borderWidth: 1,
+        formatter: (params) => {
+          const { name, value, bookNum } = params.data;
+          return `${name}<br/>订单数：${value}<br/>本数：${bookNum}`;
+        }
       },
       visualMap: {
         min: min,
@@ -104,7 +146,7 @@
       },
       series: [
         {
-          name: '用户数',
+          name: '订单数',
           label: {
             show: true
           },
@@ -116,6 +158,11 @@
     });
   };
 
+  // 监听provinceData变化
+  watch(() => props.provinceData, () => {
+    updateMapData();
+  }, { deep: true });
+
   registerChinaMap();
 </script>
 

src/views/statistic/overview/components/pie-chart.vue

@@ -1,59 +1,114 @@
 <template>
-  <v-chart class="flex-1" ref="saleChartRef" style="height: 220px" :option="options" />
+    <v-chart
+        class="flex-1"
+        ref="saleChartRef"
+        style="height: 220px"
+        :option="options"
+    />
 </template>
 <script setup>
-  import VChart from 'vue-echarts';
-  import { use } from 'echarts/core';
-  import { CanvasRenderer } from 'echarts/renderers';
-  import { PieChart } from 'echarts/charts';
-  import {
+import VChart from "vue-echarts";
+import { use } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import { PieChart } from "echarts/charts";
+import {
     GridComponent,
     TooltipComponent,
     LegendComponent,
-    TitleComponent
-  } from 'echarts/components';
+    TitleComponent,
+} from "echarts/components";
+import { ref, reactive, watch } from "vue";
 
-  // 按需加载echarts
-  use([
+const props = defineProps({
+    title: {
+        type: String,
+        default: "占比分析",
+    },
+    data: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+// 按需加载echarts
+use([
     CanvasRenderer,
     PieChart,
     GridComponent,
     TooltipComponent,
     LegendComponent,
-    TitleComponent
-  ]);
+    TitleComponent,
+]);
 
-  const options = reactive({
+const options = reactive({
     title: {
-      text: '回收折扣占比',
-      textStyle: {
-        color: '#363636',
-        fontSize: 14,
-        fontWeight: 'normal'
-      }
+        text: props.title,
+        textStyle: {
+            color: "#363636",
+            fontSize: 14,
+            fontWeight: "normal",
+        },
+    },
+    tooltip: {
+        trigger: "item",
+        formatter: "{b}: {c} ({d}%)",
     },
     legend: {
-      right: 'right',
-      orient: 'vertical',
-      top: 'center'
+        right: "right",
+        orient: "vertical",
+        top: "center",
     },
     series: [
-      {
-        name: 'Nightingale Chart',
-        type: 'pie',
-        radius: [15, 40],
-        center: ['35%', '50%'],
-        roseType: 'area',
-        itemStyle: {
-          borderRadius: 8
+        {
+            name: props.title,
+            type: "pie",
+            radius: [15, 40],
+            center: ["36%", "50%"],
+            roseType: "area",
+            itemStyle: {
+                borderRadius: 8,
+            },
+            label: {
+                show: true,
+                formatter: (params) => {
+                    return `${params.name}\n\n${params.value}`;
+                },
+                position: 'outside',
+                alignTo: 'none',
+                minMargin: 5,
+                edgeDistance: 5,
+                lineHeight: 10,
+            },
+            labelLine: {
+                show: true,
+                length: 8,
+                length2: 8,
+                maxSurfaceAngle: 80,
+                minTurnAngle: 45,
+                smooth: 0.2
+            },
+            data: props.data,
         },
-        data: [
-          { value: 40, name: '≥2折' },
-          { value: 38, name: '2<至≥1' },
-          { value: 32, name: '1<至≥0.5' },
-          { value: 30, name: '≤0.5' }
-        ]
-      }
-    ]
-  });
+    ],
+});
+
+// 监听数据变化
+watch(
+    () => props.data,
+    (newVal) => {
+        if (newVal && newVal.length) {
+            options.series[0].data = newVal;
+        }
+    },
+    { deep: true }
+);
+
+// 监听标题变化
+watch(
+    () => props.title,
+    (newVal) => {
+        options.title.text = newVal;
+        options.series[0].name = newVal;
+    }
+);
 </script>

src/views/statistic/overview/components/rank-list.vue

@@ -1,33 +1,24 @@
 <template>
-    <ele-data-table
-      ref="tableRef"
-      class="flex-1"
-      row-key="id"
-      :columns="columns"
-      :data="dataList"
-    ></ele-data-table>
-  </template>
-  
-  <script setup>
-    import SimpleTable from '@/components/CommonPage/SimpleTable.vue';
-    import request from '@/utils/request';
-  
-    const columns = reactive([
-      { label: '排行榜', type: 'index', align: 'center',width:70 },
-      { label: '地区', prop: 'area', align: 'center' },
-      { label: '单量', prop: 'number', align: 'center' },
-      { label: '涨幅', prop: 'up', align: 'center' }
-    ]);
-  
-    const dataList = reactive([
-      { rank: 1, area: '北京', number: 10 },
-      { rank: 2, area: '上海', number: 9 },
-      { rank: 3, area: '广州', number: 8 },
-      { rank: 4, area: '深圳', number: 7 },
-      { rank: 5, area: '成都', number: 6 },
-      { rank: 6, area: '杭州', number: 5 },
-      { rank: 7, area: '武汉', number: 4 },
-      { rank: 8, area: '西安', number: 3 },
-    ]);
-  </script>
-  
+  <ele-data-table ref="tableRef" class="flex-1" row-key="id" :columns="columns" :data="dataList"></ele-data-table>
+</template>
+
+<script setup>
+const props = defineProps({
+  dataList: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const columns = reactive([
+  { label: "排名", type: "index", align: "center", width: 70 },
+  { label: "地区", prop: "provinceName", align: "center" },
+  { label: "单量", prop: "orderNum", align: "center" },
+  { label: "本数", prop: "bookNum", align: "center" },
+  {
+    label: "涨幅",
+    prop: "comparisonStr",
+    align: "center",
+  },
+]);
+</script>

src/views/statistic/overview/index.vue

@@ -1,124 +1,182 @@
 <template>
-  <ele-page flex-table>
-    <ele-card flex-table>
-      <map-card class="flex-1" />
+    <ele-page flex-table>
+        <ele-card flex-table>
+            <date-search class="mb-4" v-model="mapDateRange" @search="fetchProvinceData" />
+            <map-card class="flex-1" :province-data="provinceData" />
 
-      <div class="flex gap-10">
-        <div class="flex-1 stat-card">
-          <el-statistic
-            title="总审核单量"
-            :value="268500"
-            value-style="font-size:30px;color:#409eef"
-          />
-        </div>
-        <div class="flex-1 stat-card">
-          <el-statistic
-            title="总审核本数"
-            :value="268500"
-            value-style="font-size:30px;color:#409eef"
-          />
-        </div>
-        <div class="flex-1 stat-card">
-          <el-statistic
-            title="总审核金额"
-            :value="268500"
-            value-style="font-size:30px;color:#409eef"
-          />
-        </div>
-        <div class="flex-1 stat-card">
-          <el-statistic
-            title="总用户人数"
-            :value="268500"
-            value-style="font-size:30px;color:#409eef"
-          />
-        </div>
-      </div>
-      <el-divider></el-divider>
-      <div class="flex gap-4">
-        <div class="flex-1 stat-card">
-          <stat-card title="回收订单数"></stat-card>
-        </div>
-        <div class="flex-1 stat-card">
-          <stat-card title="回收数量（本）"></stat-card>
-        </div>
-        <div class="flex-1 stat-card">
-          <stat-card title="回收单本均价"></stat-card>
-        </div>
-        <div class="flex-1 stat-card">
-          <stat-card title="待审核订单数"></stat-card>
-        </div>
-        <div class="flex-1 stat-card">
-          <stat-card title="待签收订单数"></stat-card>
-        </div>
-      </div>
-      <div class="flex gap-4 mt-4">
-        <div class="flex-1 stat-card">
-          <stat-card title="今日扫描次数"></stat-card>
-        </div>
-        <div class="flex-1 stat-card">
-          <stat-card title="今日扫描人数"></stat-card>
-        </div>
-        <div class="flex-1 stat-card">
-          <stat-card title="用户增长数"></stat-card>
-        </div>
-        <div class="flex-1 stat-card">
-          <stat-card title="待审核金额"></stat-card>
-        </div>
-        <div class="flex-1 stat-card">
-          <stat-card title="待打款金额"></stat-card>
-        </div>
-      </div>
-      <el-divider></el-divider>
-
-      <div class="flex gap-4">
-        <div style="flex: 4" class="flex flex-col">
-          <div class="flex gap-4">
-            <div class="flex-1 stat-card">
-              <stat-card title="回收订单数"></stat-card>
-            </div>
-            <div class="flex-1 stat-card">
-              <stat-card title="回收数量（本）"></stat-card>
-            </div>
-            <div class="flex-1 stat-card">
-              <stat-card title="回收单本均价"></stat-card>
-            </div>
-            <div class="flex-1 stat-card">
-              <stat-card title="审核订单数"></stat-card>
+            <div class="flex gap-10">
+                <div class="flex-1 stat-card">
+                    <el-statistic title="总审核单量" :value="268500" value-style="font-size:30px;color:#409eef" />
+                </div>
+                <div class="flex-1 stat-card">
+                    <el-statistic title="总审核本数" :value="268500" value-style="font-size:30px;color:#409eef" />
+                </div>
+                <div class="flex-1 stat-card">
+                    <el-statistic title="总审核金额" :value="268500" value-style="font-size:30px;color:#409eef" />
+                </div>
+                <div class="flex-1 stat-card">
+                    <el-statistic title="总用户人数" :value="268500" value-style="font-size:30px;color:#409eef" />
+                </div>
             </div>
-          </div>
-          <div class="flex gap-4 mt-4">
-            <div class="flex-1 stat-card">
-              <stat-card title="签收订单数"></stat-card>
+            <el-divider></el-divider>
+            <div class="flex gap-4">
+                <div class="flex-1 stat-card">
+                    <stat-card title="回收订单数"></stat-card>
+                </div>
+                <div class="flex-1 stat-card">
+                    <stat-card title="回收数量（本）"></stat-card>
+                </div>
+                <div class="flex-1 stat-card">
+                    <stat-card title="回收单本均价"></stat-card>
+                </div>
+                <div class="flex-1 stat-card">
+                    <stat-card title="待审核订单数"></stat-card>
+                </div>
+                <div class="flex-1 stat-card">
+                    <stat-card title="待签收订单数"></stat-card>
+                </div>
             </div>
-            <div class="flex-1 stat-card">
-              <stat-card title="扫描次数"></stat-card>
+            <div class="flex gap-4 mt-4">
+                <div class="flex-1 stat-card">
+                    <stat-card title="今日扫描次数"></stat-card>
+                </div>
+                <div class="flex-1 stat-card">
+                    <stat-card title="今日扫描人数"></stat-card>
+                </div>
+                <div class="flex-1 stat-card">
+                    <stat-card title="用户增长数"></stat-card>
+                </div>
+                <div class="flex-1 stat-card">
+                    <stat-card title="待审核金额"></stat-card>
+                </div>
+                <div class="flex-1 stat-card">
+                    <stat-card title="待打款金额"></stat-card>
+                </div>
             </div>
-            <div class="flex-1 stat-card">
-              <stat-card title="扫描人数"></stat-card>
-            </div>
-            <div class="flex-1 stat-card">
-              <stat-card title="用户增长数"></stat-card>
-            </div>
-          </div>
-        </div>
+            <el-divider></el-divider>
 
-        <div class="flex-1 flex flex-col stat-card">
-            <pie-chart />
-            <pie-chart />
-        </div>
-      </div>
-    </ele-card>
-  </ele-page>
+            <div class="flex-col">
+                <date-search class="mb-4" v-model="dateRange" @search="fetchHistoryData" />
+                <div class="gap-4 flex">
+                    <div style="flex: 4" class="flex flex-col">
+                        <div class="flex gap-4">
+                            <div class="flex-1 stat-card">
+                                <stat-card title="回收订单数"></stat-card>
+                            </div>
+                            <div class="flex-1 stat-card">
+                                <stat-card title="回收数量（本）"></stat-card>
+                            </div>
+                            <div class="flex-1 stat-card">
+                                <stat-card title="回收单本均价"></stat-card>
+                            </div>
+                            <div class="flex-1 stat-card">
+                                <stat-card title="审核订单数"></stat-card>
+                            </div>
+                        </div>
+                        <div class="flex gap-4 mt-4">
+                            <div class="flex-1 stat-card">
+                                <stat-card title="签收订单数"></stat-card>
+                            </div>
+                            <div class="flex-1 stat-card">
+                                <stat-card title="扫描次数"></stat-card>
+                            </div>
+                            <div class="flex-1 stat-card">
+                                <stat-card title="扫描人数"></stat-card>
+                            </div>
+                            <div class="flex-1 stat-card">
+                                <stat-card title="用户增长数"></stat-card>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="flex-1 flex flex-col stat-card">
+                        <pie-chart title="回收折扣占比" :data="recycleDiscountData" />
+                        <pie-chart title="审核品相比例分析" :data="auditRatioData" />
+                    </div>
+                </div>
+            </div>
+        </ele-card>
+    </ele-page>
 </template>
 
 <script setup>
-  import mapCard from '@/views/statistic/overview/components/map-card.vue';
-  import statCard from '@/views/statistic/overview/components/stat-card.vue';
-  import pieChart from '@/views/statistic/overview/components/pie-chart.vue'
+import mapCard from "@/views/statistic/overview/components/map-card.vue";
+import statCard from "@/views/statistic/overview/components/stat-card.vue";
+import pieChart from "@/views/statistic/overview/components/pie-chart.vue";
+import DateSearch from "@/components/DateSearch/index.vue";
+import dayjs from "dayjs";
+import request from "@/utils/request";
+import { onMounted, ref } from "vue";
+
+const provinceData = ref([]);
+const dateRange = ref([
+    dayjs().subtract(6, "day").format("YYYY-MM-DD"),
+    dayjs().format("YYYY-MM-DD"),
+]);
+// 地图数据时间范围
+const mapDateRange = ref([
+    dayjs().subtract(6, "day").format("YYYY-MM-DD"),
+    dayjs().format("YYYY-MM-DD"),
+]);
+
+// 组织回收折扣比例数据
+const recycleDiscountData = ref([
+    { value: 0, name: "≥2折", key: "discount2" },
+    { value: 0, name: "2<至≥1", key: "discount12" },
+    { value: 0, name: "1<至≥0.5", key: "discount051" },
+    { value: 0, name: "≤0.5", key: "discount05" },
+]);
+
+// 组织审核品相比例分析数据
+const auditRatioData = ref([
+    { value: 0, name: "良好", key: "auditGoodNum" },
+    { value: 0, name: "一般", key: "auditGeneralNum" },
+    { value: 0, name: "较差", key: "auditBadNum" },
+]);
+
+//获取历史数据汇总
+const fetchHistoryData = async () => {
+    let params = {
+        statisticDateStart: dateRange.value[0],
+        statisticDateEnd: dateRange.value[1],
+    };
+    request.get("/order/recycleStatisticOverview/order/recycleStatisticOverview/history", { params })
+        .then((res) => {
+            if (res.data.code === 200) {
+                recycleDiscountData.value.forEach((item) => {
+                    item.value = res.data.data[item.key] || 0;
+                });
+                auditRatioData.value.forEach((item) => {
+                    item.value = res.data.data[item.key] || 0;
+                });
+            }
+        });
+};
+
+// 获取省份排名数据 //传入的时间是近7天，结束时间就是今天，使用 dayjs
+const fetchProvinceData = async () => {
+    const params = {
+        statisticDateStart: mapDateRange.value[0],
+        statisticDateEnd: mapDateRange.value[1],
+    };
+    request.get("/order/recycleStatisticOverview/order/recycleStatisticOverview/provinceRankList", {
+        params,
+    }).then((res) => {
+        if (res.data.code === 200) {
+            provinceData.value = res.data.data;
+        }
+    });
+
+};
+
+onMounted(() => {
+    fetchProvinceData();
+    fetchHistoryData();
+});
 </script>
 
 <style lang="scss">
-  .stat-card {
+.stat-card {
     border-radius: 10px;
     background: #f8f7f6;
     padding: 20px;
@@ -126,8 +184,9 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+
     .el-statistic__head {
-      text-align: center;
+        text-align: center;
     }
-  }
+}
 </style>