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

src/components/DateSearch/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex justify-end gap-2 date-search">
+    <div class="flex gap-2 date-search" :class="{'justify-end': position === 'right', 'justify-start': position === 'left', 'justify-center': position === 'center'}">
         <div class="quick-select">
             <el-button
                 :type="activeQuickSelect === 7 ? 'primary' : ''"
@@ -34,7 +34,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch, nextTick } from "vue";
 import dayjs from "dayjs";
 
 const props = defineProps({
@@ -42,6 +42,10 @@ const props = defineProps({
         type: Array,
         default: () => [],
     },
+    position: {
+        type: String,
+        default: "right",
+    },
 });
 
 const emit = defineEmits(["update:modelValue", "search"]);
@@ -72,15 +76,26 @@ 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 newDateRange = [start.format("YYYY-MM-DD"), end.format("YYYY-MM-DD")];
+    
+    // 先更新日期范围
+    dateRange.value = newDateRange;
+    
+    // 使用 nextTick 确保数据更新后再触发搜索
+    nextTick(() => {
+        emit("search", newDateRange);
+    });
 };
 
 // 日期选择变化
 const handleDateChange = (val) => {
     // 清除快捷选项的选中状态
     activeQuickSelect.value = null;
-    emit("search", val);
+    
+    // 使用 nextTick 确保数据更新后再触发搜索
+    nextTick(() => {
+        emit("search", val);
+    });
 };
 
 // 搜索按钮点击

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

@@ -8,7 +8,7 @@
       />
     </el-col>
     <el-col :sm="10" :xs="24">
-      <rankList :data-list="provinceData" />
+      <rankList :data-list="userCountDataRank" />
     </el-col>
   </el-row>
 </template>
@@ -64,8 +64,11 @@
 
   /** 更新地图数据 */
   const updateMapData = () => {
-    if (!props.provinceData || !props.provinceData.length) return;
-
+    if (!props.provinceData || !props.provinceData.length) {
+      // 如果没有数据，清空排行榜
+      userCountDataRank.value = [];
+      return;
+    }
 
     //特殊省份的映射
     const provinceMap = {
@@ -76,6 +79,10 @@
       '宁夏回族自治区': '宁夏',
       '新疆维吾尔自治区': '新疆',
       '广西壮族自治区': '广西',
+      "北京市":'北京',
+      "天津市":'天津',
+      "上海市":'上海',
+      "重庆市":'重庆',
     };
 
     // 所有省份列表
@@ -118,11 +125,17 @@
     const min = 0; // 设置最小值为0
     const max = Math.max(...temp.map(item => item.value), 1);
 
-    const list = temp.length > 10 ? temp.slice(0, 10) : temp;
+    // 更新排行榜数据，转换为与原始数据结构一致的格式
+    const list = temp.filter(item => item.value > 0).slice(0, 10); // 只显示有数据的省份，最多10个
     userCountDataRank.value = list.map((d) => {
+      // 查找原始数据中对应的省份信息
+      const originalData = props.provinceData.find(item => 
+        (provinceMap[item.provinceName] || item.provinceName) === d.name
+      );
+      
       return {
-        name: d.name,
-        value: d.value,
+        provinceName: originalData ? originalData.provinceName : d.name,
+        orderNum: d.value,
         bookNum: d.bookNum,
         comparisonStr: d.comparisonStr,
       };
@@ -161,7 +174,7 @@
   // 监听provinceData变化
   watch(() => props.provinceData, () => {
     updateMapData();
-  }, { deep: true });
+  }, { deep: true, immediate: true });
 
   registerChinaMap();
 </script>

src/views/statistic/overview/index.vue

@@ -1,7 +1,7 @@
 <template>
     <ele-page flex-table>
         <ele-card flex-table>
-            <date-search class="mb-4" v-model="mapDateRange" @search="fetchProvinceData" />
+            <date-search class="mb-4" v-model="mapDateRange" @search="fetchProvinceData" position="left" />
             <map-card class="flex-1" :province-data="provinceData" />
 
             <div class="flex gap-10">