修正ts类型

src/views/workbench/components/repairEcharts.vue

@@ -1,7 +1,10 @@
 <script name="repairEcharts" setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { workSpaceRepairTrendListApi } from '@/api/workflow';
 import Echarts from '@/components/Echarts/index.vue';
-import { getLast7Days } from '@/utils/time';
-import { EChartsOption } from 'echarts';
+import type { EChartsOption } from 'echarts';
+
+// 使用 ref 而不是 shallowRef，以确保深层响应式，或者在更新时重新赋值整个对象
 const chartConfig = shallowRef<EChartsOption>({
   grid: {
     left: '1%',
@@ -11,7 +14,8 @@ const chartConfig = shallowRef<EChartsOption>({
     containLabel: true
   },
   xAxis: {
-    data: getLast7Days()
+    type: 'category', // 建议明确指定类型
+    data: [] as string[]
   },
   yAxis: {
     type: 'value'
@@ -21,7 +25,7 @@ const chartConfig = shallowRef<EChartsOption>({
   },
   series: [
     {
-      data: [100, 140, 230, 100, 130, 180, 173],
+      data: [] as number[],
       type: 'line',
       smooth: true,
       name: '维修单数',
@@ -31,10 +35,10 @@ const chartConfig = shallowRef<EChartsOption>({
           x: 0,
           y: 0,
           x2: 0,
-          y2: 1, // 从上到下渐变
+          y2: 1,
           colorStops: [
-            { offset: 0, color: '#e2edff' }, // 顶部：半透明蓝色
-            { offset: 1, color: '#f2f9ff' } // 底部：极浅蓝/透明
+            { offset: 0, color: '#e2edff' },
+            { offset: 1, color: '#f2f9ff' }
           ]
         }
       },
@@ -52,6 +56,53 @@ const chartConfig = shallowRef<EChartsOption>({
     }
   ]
 });
+
+// 获取维修列表数据
+function getRepairList() {
+  const id = localStorage.getItem('villageid');
+  if (!id) return;
+
+  workSpaceRepairTrendListApi(id)
+    .then((res: any[]) => {
+      if (!res || res.length === 0) {
+        return;
+      }
+      const map = res.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+      // 提取日期和数量
+      const dates = map.map((item) => item.date);
+      const counts = map.map((item) => item.count);
+
+      // 如果使用的是 ref，直接修改属性即可触发响应式
+      chartConfig.value = {
+        grid: chartConfig.value.grid,
+        yAxis: chartConfig.value.yAxis,
+        tooltip: chartConfig.value.tooltip,
+        xAxis: {
+          type: 'category',
+          data: dates
+        },
+        series: [
+          {
+            ...chartConfig.value.series?.[0],
+            type: 'line', // 确保 type 存在
+            data: counts
+          }
+        ]
+      } as EChartsOption;
+
+      // 注意：如果 <Echarts> 组件内部没有正确监听 options 的变化，
+      // 可能需要强制触发更新，例如：
+      // chartConfig.value = { ...chartConfig.value };
+      // 但大多数封装好的 Echarts 组件会 watch options 并调用 setOption
+    })
+    .catch((err) => {
+      console.error('获取维修趋势数据失败:', err);
+    });
+}
+
+onMounted(() => {
+  getRepairList();
+});
 </script>
 
 <template>