完成水电表列表

src/views/workbench/index2.vue

@@ -53,7 +53,7 @@
                 </div>
               </div>
               <div class="echartsbody">
-                <repairEcharts />
+                <Echarts :options="chartConfig" />
               </div>
             </div>
           </div>
@@ -65,8 +65,8 @@
               <el-image :src="summicon"></el-image>
             </div>
             <div class="villageinfo">
-              <div class="villagename">北境碧桂园小区</div>
-              <div class="week">2025-08-20 星期三</div>
+              <div class="villagename">{{ villageinfo.villageName }}</div>
+              <div class="week">{{ new Date().toLocaleDateString().replaceAll('/', '-') }} {{ numToWeek2(new Date().getDay()) }}</div>
             </div>
           </div>
           <div class="tabsbox">
@@ -208,6 +208,22 @@
 import summicon from '@/assets/images/index/summer.png';
 import repairEcharts from './components/repairEcharts.vue';
 import { listResident } from '@/api/system/resident';
+import { useHouseStore } from '@/store/modules/house';
+
+const houseStore = useHouseStore();
+
+const villageinfo = ref({
+  'villageId': null,
+  'villageName': ''
+});
+function getVillageinfo() {
+  const id = Number(localStorage.getItem('villageid'));
+  getVillageByIdAPI(id).then((res) => {
+    villageinfo.value = res.data;
+    houseStore.updateVilageinfo(res.data);
+  });
+}
+getVillageinfo();
 
 import icon1 from '@/assets/images/index/1.png';
 import icon2 from '@/assets/images/index/2.png';
@@ -215,6 +231,9 @@ import icon3 from '@/assets/images/index/3.png';
 import icon5 from '@/assets/images/index/5.png';
 import icon6 from '@/assets/images/index/6.png';
 import { UploadUserFile } from 'element-plus';
+import { getVillageByIdAPI } from '@/api/system/community';
+import { getLast7Days, numToWeek2 } from '@/utils/time';
+import { EChartsOption } from 'echarts';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { com_resident_type } = toRefs<any>(proxy?.useDict('com_resident_type'));
@@ -244,6 +263,92 @@ const actions = ref([
 function changeActive_index(val: number) {
   active_index.value = val;
 }
+
+const chartConfig = shallowRef<EChartsOption>({
+  grid: {
+    left: '1%',
+    right: '1%',
+    top: '10%',
+    bottom: '1%',
+    containLabel: true
+  },
+  tooltip: {
+    trigger: 'axis'
+  },
+  legend: {
+    top: 0,
+    data: ['收入', '支出']
+  },
+  xAxis: {
+    data: getLast7Days()
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      data: [87, 23, 105, 41, 69, 12, 94],
+      type: 'line',
+      smooth: true,
+      name: '收入',
+      itemStyle: {
+        color: '#1a75ff'
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1, // 从上到下渐变
+          colorStops: [
+            { offset: 0, color: '#e2edff' }, // 顶部：半透明蓝色
+            { offset: 1, color: '#f2f9ff' } // 底部：极浅蓝/透明
+          ]
+        }
+      },
+      lineStyle: {
+        color: '#1a75ff'
+      },
+      label: {
+        show: true,
+        color: '#3f8afc',
+        position: 'top'
+      }
+    },
+    {
+      data: [216, 150, 192, 210, 191, 219, 175].reverse(),
+      type: 'line',
+
+      smooth: true,
+      name: '支出',
+      itemStyle: {
+        color: '#46d3a4'
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1, // 从上到下渐变
+          colorStops: [
+            { offset: 0, color: '#e2edff' }, // 顶部：半透明蓝色
+            { offset: 1, color: '#f2f9ff' } // 底部：极浅蓝/透明
+          ]
+        }
+      },
+      lineStyle: {
+        color: '#46d3a4'
+      },
+      label: {
+        show: true,
+        color: '#46d3a4',
+        position: 'top'
+      }
+    }
+  ]
+});
 // ! echarts 切换
 // ! 侧边栏
 const Sideactive = ref(1);
@@ -397,14 +502,14 @@ getList();
           .infoTitle {
             height: 18px;
             font-weight: 400;
-            font-size: 14px;
             color: #4e5969;
             line-height: 18px;
+            font-size: 14px;
           }
           .infoNum {
             height: 35px;
             font-weight: 600;
-            font-size: 28px;
+            font-size: 24px;
             color: #303133;
             line-height: 39px;
           }
@@ -631,9 +736,9 @@ getList();
       }
     }
     .body {
-      font-size: 16px;
       color: #222222;
       padding: 20px;
+      font-size: 0.7rem;
       .quicly_box {
         display: flex;
         align-items: center;
@@ -645,6 +750,7 @@ getList();
           min-width: 30%;
           max-width: 33%;
           margin-bottom: 20px;
+          text-align: center;
           height: 56px;
           background: #ffffff;
           border-radius: 12px 12px 12px 12px;
@@ -661,7 +767,6 @@ getList();
             width: 64px;
             height: 23px;
             font-weight: 500;
-            font-size: 16px;
             color: #222222;
             line-height: 23px;
           }