fix(seized-info/num): 修复并优化缴获信息图表展示

1. 调整SeizedNum组件props类型从Object改为Array并修正默认值
2. 重构缴获数据处理逻辑，适配新的数据结构
3. 为x轴标签添加旋转45度避免重叠，增加数据缩放组件
4. 调整图例样式和底部内边距，优化图表整体布局
5. 优化SeizedInfo组件的x轴标签配置

src/views/portraitManagement/components/SeizedInfo.vue

@@ -84,7 +84,7 @@ const setChartsOptionsBar = computed(() => {
     xAxis: {
       type: 'category',
       data: props.chartsData.itemList.map(item => item.name),
-      axisLabel: { color: '#fff', fontSize: 14 },
+      axisLabel: { color: '#fff', fontSize: 14, rotate: 45 },
       axisLine: { lineStyle: { color: '#344067' } }
     },
     yAxis: [

src/views/portraitManagement/components/SeizedNum.vue

@@ -11,8 +11,8 @@
   const bar = ref(null)
   const props = defineProps({
     chartsData: {
-      type: Object,
-      default: () => ([])
+      type: Array,
+      default: () => []
     }
   })
   const countryColors = ['#71B138', '#F801FA', '#6DA6FE', '#95E530', '#9963FB', '#FCE661', '#22C2CC', '#F76723']
@@ -41,39 +41,59 @@
     }
   }
   const setChartsOptionsBar = computed(() => {
-    const group = props.chartsData.reduce((cur,acc) => {
-      let curItem = cur.find(item => item.groupName === acc.groupName)
-      if (curItem) {
-        curItem.seizeNums.push(acc.seizeQuantity)
-        curItem.recordDates.push(acc.recordDate)
-      } else {
-        curItem = {
-          groupName: acc.groupName,
-          seizeNums: [acc.seizeQuantity],
-          recordDates: [acc.recordDate]
-        }
-        cur.push(curItem)
+    const rawData = props.chartsData
+    if (!rawData || rawData.length === 0) return {}
+
+    const dates = rawData.map(item => item.recordDate)
+
+    const groupMap = {}
+    rawData.forEach(day => {
+      if (day.items && day.items.length > 0) {
+        day.items.forEach(item => {
+          if (!groupMap[item.groupName]) {
+            groupMap[item.groupName] = []
+          }
+          groupMap[item.groupName].push(item.seizeQuantity)
+        })
       }
-      return cur
-    }, [])
-    console.log(group);
-    
+    })
+
+    const groupNames = Object.keys(groupMap)
+    const legendData = groupNames.slice(0, 20)
+    const seriesData = groupNames.slice(0, 20)
+
     return {
       grid: {
         top: 40,
-        bottom: 30,
+        bottom: 60,
         left: 60,
         right: 20
       },
       legend: {
-        show: true
+        show: true,
+        textStyle: { color: '#fff', fontSize: 11 }
       },
+      dataZoom: [
+        {
+          type: 'slider',
+          bottom: 10,
+          height: 20,
+          borderColor: 'rgba(112,207,231,0.3)',
+          backgroundColor: 'rgba(13,80,122,0.3)',
+          fillerColor: 'rgba(112,207,231,0.2)',
+          handleStyle: {
+            color: '#70CFE7'
+          },
+          textStyle: { color: '#fff' },
+          labelFormatter: (value) => dates[value] || ''
+        }
+      ],
       xAxis: {
         type: 'category',
-        axisLabel: { show: false },
-        axisLine: { show: false },
+        axisLabel: { color: '#fff', fontSize: 11, rotate: 45 },
+        axisLine: { lineStyle: { color: '#344067' } },
         boundaryGap: false,
-        data: group.length ? group[0].recordDates : []
+        data: dates
       },
       yAxis: [
         {
@@ -84,10 +104,10 @@
           splitLine: { lineStyle: { color: '#344067' } }
         },
       ],
-      series: group.map((item, index) => {
+      series: seriesData.map((name, index) => {
         return {
-          name: item.groupName,
-          data: item.seizeNums,
+          name,
+          data: groupMap[name],
           ...createItemConfig(index)
         }
       }),