首页大屏前端1.4

src/views/datav/Gobal.vue

@@ -34,7 +34,7 @@
             </datav-card>
             <datav-card title="业务类型占比">
               <v-charts
-                  style="height: 340px"
+                  style="height: 360px;"
                   :option="zfbaPieOption"
                   autoresize
               />
@@ -114,13 +114,14 @@
                 <datav-chart-bar-pro
                     :data="tcwtlist"
                     size="small"
+                    :color="colors"
                 />
               </el-scrollbar>
             </datav-card>
 
             <datav-card title="问题类型占比">
               <v-charts
-                  style="height: 350px"
+                  style="height: 360px;"
                   :option="wtlxPieOption"
                   autoresize
               />
@@ -265,18 +266,7 @@ const option = ref({
 
 // endregion
 
-/**
- * gobalTempMapVoList.value.map(item => ({
- *         name: item.name,
- *         value: item.totalPro,
- *         todaysum: item.totalPro,
- *         allsum: item.supervisePro,
- *         completed: item.caseVerifyPro,
- *         completedrate: item.mailPro,
- *         resolvedrate: item.policePro
- *       }))
- * @type {Ref<UnwrapRef<{yAxis: {splitLine: {lineStyle: {color: string}, show: boolean}, type: string}, xAxis: {data: *[], type: string, boundaryGap: boolean}, series: [{areaStyle: {color: LinearGradient}, lineStyle: {color: string, width: number}, data: *[], label: {show: boolean}, type: string, smooth: boolean}], tooltip: {axisPointer: {label: {backgroundColor: string}, type: string}, trigger: string}}>, UnwrapRef<{yAxis: {splitLine: {lineStyle: {color: string}, show: boolean}, type: string}, xAxis: {data: *[], type: string, boundaryGap: boolean}, series: [{areaStyle: {color: LinearGradient}, lineStyle: {color: string, width: number}, data: *[], label: {show: boolean}, type: string, smooth: boolean}], tooltip: {axisPointer: {label: {backgroundColor: string}, type: string}, trigger: string}}> | {yAxis: {splitLine: {lineStyle: {color: string}, show: boolean}, type: string}, xAxis: {data: *[], type: string, boundaryGap: boolean}, series: [{areaStyle: {color: LinearGradient}, lineStyle: {color: string, width: number}, data: *[], label: {show: boolean}, type: string, smooth: boolean}], tooltip: {axisPointer: {label: {backgroundColor: string}, type: string}, trigger: string}}>}
- */
+
 // region问题趋势线状图
 const proTrend = ref({
   grid: {
@@ -337,10 +327,14 @@ const proTrend = ref({
   ],
 });
 
-const years = ref(['2024', '2023']); // 年份列表
-const selectedYear = ref('2024年'); // 当前选中的年份
+const years = ref(['2024', '2023', '2022']); // 年份列表
+const selectedYear = ref('2024'); // 当前选中的年份
 const handleCommand = (year) => {
   selectedYear.value = year; // 更新当前选中的年份
+  getGobalRecentlyTrendByMonth(year).then(res => {
+    proTrend.value.xAxis.data = res.monthList;
+    proTrend.value.series[0].data = res.totalList;
+  });
 };
 
 // endregion
@@ -546,6 +540,7 @@ const colors = [
   padding-top: 6px;
   padding-left: 20px;
   width: 90px;
+  color: #fff;
 }