From 466843c041dbbbaa8d08381a6dc4b6ccd75a9771 Mon Sep 17 00:00:00 2001
From: ruancuihong <2806986110@qq.com>
Date: Thu, 13 Mar 2025 15:59:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9B=BE=E8=A1=A8=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/axios/axiosCancel.ts                |   2 +
 src/api/safety/index.ts                     |  20 ++++
 src/store/modules/chart.ts                  |  39 ++++++++
 src/views/Main/DailyPatrolCard/index.vue    |  63 ++++++++----
 src/views/Main/ProjectCountCard/index.vue   | 100 ++++++++++++--------
 src/views/Main/RiskInspectionCard/index.vue |  99 +++++++++++--------
 vite.config.ts                              |   6 ++
 7 files changed, 232 insertions(+), 97 deletions(-)
 create mode 100644 src/store/modules/chart.ts

diff --git a/src/api/axios/axiosCancel.ts b/src/api/axios/axiosCancel.ts
index 654993c..05180b3 100644
--- a/src/api/axios/axiosCancel.ts
+++ b/src/api/axios/axiosCancel.ts
@@ -21,6 +21,8 @@ export class AxiosCanceler {
     if (url.indexOf('cameras/previewURLs') > 0) return; // 忽略 重复请求获取预览取流地址
     if (url.indexOf('preview/capture') > 0) return; // 忽略 重复请求获取预览取流地址
     if (url.indexOf('/sy-engine-backer/cameraInfo/') > 0) return; // 忽略 重复请求获取预览取流地址
+    if (url.indexOf('/run/statistic/chart') > 0) return;
+    
     // 上传接口忽略重复请求
     if (!url.includes('oss')) {
       config.cancelToken =
diff --git a/src/api/safety/index.ts b/src/api/safety/index.ts
index 57485ed..77b0e48 100644
--- a/src/api/safety/index.ts
+++ b/src/api/safety/index.ts
@@ -1,4 +1,5 @@
 // import axios from 'axios';
+import { he } from 'element-plus/es/locale';
 import { request } from '../axios';
 
 // 预警统计
@@ -85,3 +86,22 @@ export const getObjectStatistic = (params: any) => {
     params
   });
 };
+function getCookie(name: string): string | null {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) return parts.pop()?.split(';').shift() || null;
+  return null;
+}
+export function getlStatisticChart(data: any) {
+  // 获取cookie
+  const shuili = getCookie('Admin-Token');
+  return request({
+    url: `/run/statistic/chart`,
+    method: 'post',
+    data,
+    headers: {
+      // 'Admin-Token': shuili,
+      shuili: 'water ' + shuili
+    }
+  });
+}
diff --git a/src/store/modules/chart.ts b/src/store/modules/chart.ts
new file mode 100644
index 0000000..ef595c1
--- /dev/null
+++ b/src/store/modules/chart.ts
@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia';
+import { store } from '../index';
+import { getlStatisticChart } from '@/api/safety';
+export interface ChartState {
+  chartObject: any;
+}
+
+export const useChartStore = defineStore('chart', {
+  state: (): ChartState => ({
+    chartObject: {
+      endTime: '',
+      startTime: '',
+      adcd: '',
+      group: ''
+    }
+  }),
+  getters: {
+    getChartObject(): object {
+      return this.chartObject;
+    }
+  },
+  actions: {
+    resetChart() {
+      this.chartObject = {};
+    },
+    async initStatisticChart(data: any) {
+      const pramas = {
+        ...this.chartObject,
+        ...data
+      };
+      const res = await getlStatisticChart(pramas);
+      return res;
+    }
+  }
+});
+
+export const useChartStoreWithOut = () => {
+  return useChartStore(store);
+};
diff --git a/src/views/Main/DailyPatrolCard/index.vue b/src/views/Main/DailyPatrolCard/index.vue
index eb34415..9be6d69 100644
--- a/src/views/Main/DailyPatrolCard/index.vue
+++ b/src/views/Main/DailyPatrolCard/index.vue
@@ -16,6 +16,10 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from 'vue';
 import * as echarts from 'echarts';
+import { useChartStore } from '@/store/modules/chart';
+
+const chartStore = useChartStore();
+
 defineOptions({
   name: 'DailyPatrolCard'
 });
@@ -24,20 +28,40 @@ const chartRef = ref();
 const handleResize = () => {
   chart?.resize();
 };
-onMounted(() => {
-  chart = echarts.init(chartRef.value);
-  const pieName = ['一般', '重大', '较大', '紧急'];
-  const pieValue = [545, 21, 300, 64];
-  let count: any = 0;
-
-  const pieData: any = [];
-  for (var i = 0; i < pieName.length; i++) {
-    pieData.push({
-      name: pieName[i],
-      value: pieValue[i]
+const dailyData: any = ref([]);
+const dailyCount = ref(0);
+const getChartData = async () => {
+  dailyCount.value = 0
+  dailyData.value = [];
+  const pramas = {
+    endTime: '',
+    startTime: '',
+    group: 'K6'
+  };
+  const data = await chartStore.initStatisticChart(pramas);
+  if (data?.yaxis?.length) {
+    let newArr = data.yaxis.flatMap((v: any) => v.series);
+    newArr?.forEach((item: any) => {
+      dailyData.value.push({
+        name: item.name || '',
+        value: Number(item.sum)?.toFixed(0) || 0,
+        unit: item.unit || ''
+      });
+      dailyCount.value += Number(item.sum) || 0;
     });
-    count += pieValue[i];
+    // dailyCount.value = newArr
+    //   .map((v: any) => Number(v.sum ?? null))
+    //   .reduce((acc: any, cur: any) => {
+    //     return acc + cur;
+    //   }, 0);
   }
+  await initChart();
+};
+const initChart = () => {
+  chart = echarts.init(chartRef.value);
+  // ['一般', '较大', '重大', '紧急']
+  const pieName = dailyData.value.map((item: any) => item.name);
+
   const legendStyle = {
     type: 'scroll',
     // orient: 'vertical',
@@ -52,8 +76,8 @@ onMounted(() => {
     itemGap: 44, // 44
     formatter: function (name: any) {
       for (var i = 0; i < pieName.length; i++) {
-        if (name == pieData[i].name) {
-          return '{name|' + name + '}{rate|' + pieValue[i] + '}';
+        if (name == dailyData.value[i].name) {
+          return '{name|' + name + '}{rate|' + dailyData.value[i].value + '}';
         }
       }
     },
@@ -82,7 +106,7 @@ onMounted(() => {
   // Chart options
   const option = {
     tooltip: {
-      trigger: 'item',
+      trigger: 'item'
       // formatter: '{a} <br/>{b}: {c} ({d}%)'
     },
     color: ['#4293F4', '#FFDD77', '#FF9A23', '#F26161'],
@@ -118,7 +142,7 @@ onMounted(() => {
         labelLine: {
           show: false
         },
-        data: pieData
+        data: dailyData.value
       },
       {
         name: '待处理问题',
@@ -134,7 +158,7 @@ onMounted(() => {
         label: {
           position: 'center',
           formatter: function () {
-            return ['{total|' + count + '}', '{label|待处理问题}'].join('\n');
+            return ['{total|' + dailyCount.value + '}', '{label|待处理问题}'].join('\n');
           },
           rich: {
             total: {
@@ -152,13 +176,16 @@ onMounted(() => {
             }
           }
         },
-        data: [{ value: 1, name: '', tooltip: { show: false} }]
+        data: [{ value: 1, name: '', tooltip: { show: false } }]
       }
     ]
   };
 
   // Set options and render chart
   chart.setOption(option);
+};
+onMounted(() => {
+  getChartData();
 
   window.addEventListener('resize', handleResize);
 });
diff --git a/src/views/Main/ProjectCountCard/index.vue b/src/views/Main/ProjectCountCard/index.vue
index 994e5e5..49a91af 100644
--- a/src/views/Main/ProjectCountCard/index.vue
+++ b/src/views/Main/ProjectCountCard/index.vue
@@ -8,6 +8,10 @@
 <script setup lang="ts">
 import { onMounted, onBeforeUnmount, ref } from 'vue';
 import * as echarts from 'echarts';
+import { useChartStore } from '@/store/modules/chart';
+
+const chartStore = useChartStore();
+
 defineOptions({
   name: 'ProjectCountCard'
 });
@@ -16,28 +20,34 @@ let chart: echarts.ECharts | undefined;
 const handleResize = () => {
   chart?.resize();
 };
-onMounted(() => {
-  if (!chartRef.value) return;
-  chart = echarts.init(chartRef.value);
-
-  // Total count calculation
-  const reservoirCount = 544;
-  const sluiceCount = 454;
-  const damCount = 154;
-  const totalCount = 406; // Hard-coded total value shown in the center
-
-  const legendName = ['水库', '水闸', '堤防'];
-  const legendValue = [reservoirCount, sluiceCount, damCount];
-  const unit = ['座', '座', '段'];
-
-  const pieData: any = [];
-  for (var i = 0; i < legendName.length; i++) {
-    pieData.push({
-      name: legendName[i],
-      value: legendValue[i],
-      unit: unit[i]
+const projectCount = ref(0);
+const projectData: any = ref([]);
+const getChartData = async () => {
+  projectCount.value = 0
+  projectData.value = [];
+  const pramas = {
+    endTime: '',
+    startTime: '',
+    group: 'K1'
+  };
+  const data = await chartStore.initStatisticChart(pramas);
+  if (data?.yaxis?.length) {
+    let newArr = data.yaxis.flatMap((v: any) => v.series);
+    newArr?.forEach((item: any) => {
+      projectData.value.push({
+        name: item.name || '',
+        value: Number(item.sum)?.toFixed(0) || 0,
+        unit: item.unit || ''
+      });
+      projectCount.value += Number(item.sum || 0);
     });
   }
+  await initChart()
+};
+const initChart = () => {
+  if (!chartRef.value) return;
+  chart = echarts.init(chartRef.value);
+  const legendName = projectData.value.map((item: any) => item.name);
 
   // Chart options
   const option = {
@@ -58,8 +68,10 @@ onMounted(() => {
       data: legendName,
       formatter: function (name: any) {
         for (var i = 0; i < legendName.length; i++) {
-          if (name == pieData[i].name) {
-            return '{name|' + name + '}{rate|' + legendValue[i] + '}{unit|' + unit[i] + '}';
+          if (name == projectData.value[i].name) {
+            return (
+              '{name|' + name + '}{rate|' + projectData.value[i].value + '}{unit|' + projectData.value[i].unit + '}'
+            );
           }
         }
       },
@@ -111,23 +123,25 @@ onMounted(() => {
         label: {
           show: false
         },
-        data: [
-          {
-            value: reservoirCount,
-            name: '水库',
-            itemStyle: { color: '#4293F4' }
-          },
-          {
-            value: sluiceCount,
-            name: '水闸',
-            itemStyle: { color: '#30DFBA' }
-          },
-          {
-            value: damCount,
-            name: '堤防',
-            itemStyle: { color: '#FF755B' }
-          }
-        ]
+        color: ['#4293F4', '#30DFBA', '#FF755B', '#FFF03B', '#FFF03B'],
+        data: projectData.value
+        // [
+        //   {
+        //     value: reservoirCount,
+        //     name: '水库',
+        //     itemStyle: { color: '#4293F4' }
+        //   },
+        //   {
+        //     value: sluiceCount,
+        //     name: '水闸',
+        //     itemStyle: { color: '#30DFBA' }
+        //   },
+        //   {
+        //     value: damCount,
+        //     name: '堤防',
+        //     itemStyle: { color: '#FF755B' }
+        //   }
+        // ]
       },
       {
         name: '总数',
@@ -143,7 +157,7 @@ onMounted(() => {
         label: {
           position: 'center',
           formatter: function () {
-            return ['{total|' + totalCount + '}', '{label|总数}'].join('\n');
+            return ['{total|' + projectCount.value + '}', '{label|总数}'].join('\n');
           },
           rich: {
             total: {
@@ -161,14 +175,16 @@ onMounted(() => {
             }
           }
         },
-        data: [{ value: 1, name: '总数', tooltip: { show: false} }]
+        data: [{ value: 1, name: '总数', tooltip: { show: false } }]
       }
     ]
   };
 
   // Set options and render chart
   chart.setOption(option);
-
+};
+onMounted(() => {
+  getChartData();
   window.addEventListener('resize', handleResize);
 });
 onBeforeUnmount(() => {
diff --git a/src/views/Main/RiskInspectionCard/index.vue b/src/views/Main/RiskInspectionCard/index.vue
index cdbb54b..1666de2 100644
--- a/src/views/Main/RiskInspectionCard/index.vue
+++ b/src/views/Main/RiskInspectionCard/index.vue
@@ -19,6 +19,10 @@ import { ref, onMounted, onBeforeUnmount } from 'vue';
 import * as echarts from 'echarts';
 import 'echarts-liquidfill';
 import 'echarts-liquidfill/src/liquidFill.js';
+import { useChartStore } from '@/store/modules/chart';
+
+const chartStore = useChartStore();
+
 defineOptions({
   name: 'RiskInspectionCard'
 });
@@ -30,7 +34,45 @@ const handleResize = () => {
   leftChart?.resize();
   rightChart?.resize();
 };
-onMounted(() => {
+const problemData: any = ref([]);
+const problemCount = ref(0);
+const taskData: any = ref([]);
+const taskCount = ref(0);
+const getChartData = async () => {
+  problemCount.value = 0;
+  problemData.value = [];
+  taskCount.value = 0;
+  taskData.value = [];
+
+  const pramas = {
+    endTime: '',
+    startTime: '',
+    group: 'K5'
+  };
+  const data = await chartStore.initStatisticChart(pramas);
+  if (data?.yaxis?.length) {
+    let newArr = data.yaxis.flatMap((v: any) => v.series);
+    newArr?.forEach((item: any) => {
+      if (['问题数', '数量'].includes(item.name)) {
+        problemData.value.push({
+          name: item.name || '',
+          value: Number(item.sum)?.toFixed(0) || 0,
+          unit: item.unit || ''
+        });
+        problemCount.value += Number(item.sum) || 0;
+      } else {
+        taskData.value.push({
+          name: item.name || '',
+          value: Number(item.sum)?.toFixed(0) || 0,
+          unit: item.unit || ''
+        });
+        taskCount.value += Number(item.sum) || 0;
+      }
+    });
+  }
+  initChart();
+};
+const initChart = () => {
   leftChart = echarts.init(problemEchartRef.value);
 
   const color = ['#FFBC37', '#429BF4'];
@@ -64,18 +106,10 @@ onMounted(() => {
       show: false
     }
   };
-  const legendName = ['数量', '问题数'];
-  const pieValue = [98, 56];
-  var pieData: any = [];
-  for (var i = 0; i < legendName.length; i++) {
-    pieData.push({
-      name: legendName[i],
-      value: pieValue[i]
-    });
-  }
-  const leftCenterValue = ['50%', '37%']
-
-  // Chart options for the left side (nested pie)
+  const legendName = problemData.value.map((item: any) => item.name);
+  const pieValue = problemData.value.map((item: any) => item.value);
+  const leftCenterValue = ['50%', '37%'];
+  //核查问题
   const leftOption = {
     tooltip: {
       trigger: 'item',
@@ -83,7 +117,7 @@ onMounted(() => {
     },
     color: ['#FFBC37', '#FFBC37'],
     title: {
-      text: pieValue[0],
+      text: problemCount.value,
       subtext: '工程总数',
       x: 'center',
       y: '20%',
@@ -134,8 +168,8 @@ onMounted(() => {
       data: legendName,
       formatter: function (name: any) {
         for (var i = 0; i < legendName.length; i++) {
-          if (name == pieData[i].name) {
-            return '{name|' + name + '}{rate|' + pieValue[i] + '}';
+          if (name == problemData.value[i].name) {
+            return '{name|' + name + '}{rate|' + problemData.value[i].value + '}';
           }
         }
       }
@@ -196,27 +230,15 @@ onMounted(() => {
       }
     ]
   };
-
-  // Set options and render left chart
   leftChart.setOption(leftOption);
 
   rightChart = echarts.init(questEchartRef.value);
-  const li_qu_legend = ['任务数', '已完成'];
-  const taskNum = 98;
-  const accomplishNum = 30;
-  const li_qu_data = [
-    {
-      name: li_qu_legend[0],
-      value: taskNum
-    },
-    {
-      name: li_qu_legend[1],
-      value: accomplishNum
-    }
-  ];
-
+  // ['任务数', '已完成']
+  const li_qu_legend = taskData.value.map((item: any) => item.name);
+  const taskNum = taskData.value.find((item: any) => item.name === '任务数')?.value;
+  const accomplishNum = taskData.value.find((item: any) => item.name === '已完成')?.value;
   // 占比率
-  const li_qu_count: any = accomplishNum / taskNum;
+  const li_qu_count: any = Number(accomplishNum) / Number(taskNum);
 
   const titleStyle = {
     fontSize: 32,
@@ -227,8 +249,8 @@ onMounted(() => {
     textShadowOffsetX: 0,
     textShadowOffsetY: 1
   };
-  const centerValue = ['50%', '37%']
-  // Chart options for the right side (liquidFill)
+  const centerValue = ['50%', '37%'];
+  // 核查任务
   const rightOption = {
     title: [
       {
@@ -280,8 +302,8 @@ onMounted(() => {
       data: li_qu_legend,
       formatter: function (name: any) {
         for (var i = 0; i < li_qu_legend.length; i++) {
-          if (name == li_qu_data[i].name) {
-            return '{name|' + name + '}{rate|' + li_qu_data[i].value + '}';
+          if (name == taskData.value[i].name) {
+            return '{name|' + name + '}{rate|' + taskData.value[i].value + '}';
           }
         }
       }
@@ -376,6 +398,9 @@ onMounted(() => {
 
   // Set options and render right chart
   rightChart.setOption(rightOption);
+};
+onMounted(() => {
+  getChartData();
 
   window.addEventListener('resize', handleResize);
 });
diff --git a/vite.config.ts b/vite.config.ts
index 7065f3f..efc55d0 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -85,6 +85,12 @@ export default defineConfig(({ mode }) => {
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api\/iserver/, '/iserver')
         },
+        '/api/run': {
+          // target: "http://shuili.product.dev.com:30115/",
+          target: 'http://172.16.34.80:18082',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, '/tianhui-admin-web')
+        },
         '/api': {
           target: 'http://shuili.product.dev.com:30115', // 'http://172.16.34.59:18083'
           changeOrigin: true,