fix: 总览人员车辆图添加resize&30日抓拍时间调整

src/views/security-confidentiality/overview/charts/OuterPersonChart.vue

@@ -1,12 +1,12 @@
 <template>
-  <div :id="props.id" class="pieChart"></div>
+  <div ref="chartRef" :id="props.id" class="pieChart"></div>
 </template>
 <script setup lang="ts">
   import * as echarts from 'echarts/core';
   import { GraphicComponent } from 'echarts/components';
   import { PieChart } from 'echarts/charts';
   import { CanvasRenderer } from 'echarts/renderers';
-  import { onMounted, ref, watch } from 'vue';
+  import { onMounted, onUnmounted, ref, watch } from 'vue';
   import type { PieChartData } from '../types';
 
   const props = defineProps<{
@@ -15,31 +15,39 @@
   }>();
 
   echarts.use([PieChart, GraphicComponent, CanvasRenderer]);
+  const chartRef = ref<HTMLElement | null>(null);
 
   const sum = ref(props.data.reduce((acc, cur) => acc + cur.value, 0));
-  let doughnut;
+  let chartElement;
 
   onMounted(() => {
-    doughnut = echarts.init(document.getElementById(props.id as string)!);
-    if (doughnut) {
-      initDoughnut(doughnut);
-      drawDoughnut(doughnut);
+    chartElement = echarts.init(chartRef.value!);
+    if (chartElement) {
+      initChart(chartElement);
+      drawChart(chartElement);
     }
   });
 
-  const drawDoughnut = (doughnut) => {
-    const doughnutOption = {
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+    if (chartElement) {
+      chartElement.dispose();
+    }
+  });
+
+  const drawChart = (doughnut: echarts.ECharts) => {
+    const chartOption = {
       series: [
         {
           data: props.data,
         },
       ],
     };
-    doughnut.setOption(doughnutOption);
+    doughnut.setOption(chartOption);
   };
 
-  const initDoughnut = (doughnut) => {
-    const doughnutOption = {
+  const initChart = (doughnut: echarts.ECharts) => {
+    const chartOption = {
       graphic: [
         {
           type: 'group',
@@ -151,14 +159,21 @@
         },
       ],
     };
-    doughnut.setOption(doughnutOption);
+    doughnut.setOption(chartOption);
+    window.addEventListener('resize', handleResize);
+  };
+  // 处理窗口大小变化
+  const handleResize = () => {
+    if (chartElement) {
+      chartElement.resize();
+    }
   };
 
   watch(
     () => props.data,
     () => {
       sum.value = props.data.reduce((acc, cur) => acc + cur.value, 0);
-      drawDoughnut(doughnut);
+      drawChart(chartElement);
     },
   );
 </script>

src/views/security-confidentiality/overview/charts/VehicleChart.vue

@@ -1,12 +1,12 @@
 <template>
-  <div :id="props.id" class="barChart"></div>
+  <div ref="chartRef" :id="props.id" class="barChart"></div>
 </template>
 <script setup lang="ts">
   import * as echarts from 'echarts/core';
   import { TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
   import { BarChart } from 'echarts/charts';
   import { CanvasRenderer } from 'echarts/renderers';
-  import { onMounted, ref, watch } from 'vue';
+  import { onMounted, onUnmounted, ref, watch } from 'vue';
   import type { BarChartData } from '../types';
 
   const props = defineProps<{
@@ -15,19 +15,27 @@
   }>();
 
   echarts.use([TooltipComponent, GridComponent, LegendComponent, BarChart, CanvasRenderer]);
-
-  let doughnut;
+  const chartRef = ref<HTMLElement | null>(null);
+  let chartElement;
 
   onMounted(() => {
-    doughnut = echarts.init(document.getElementById(props.id as string)!);
-    if (doughnut) {
-      initDoughnut(doughnut);
-      drawDoughnut(doughnut);
+    chartElement = echarts.init(chartRef.value!);
+    if (chartElement) {
+      initChart(chartElement);
+      drawChart(chartElement);
+    }
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+    if (chartElement) {
+      chartElement.dispose();
     }
   });
 
-  const drawDoughnut = (doughnut) => {
-    const doughnutOption = {
+  const drawChart = (chart: echarts.ECharts) => {
+    if (!chart) return;
+    const chartOption = {
       xAxis: [
         {
           data: props.data.category,
@@ -39,11 +47,12 @@
         },
       ],
     };
-    doughnut.setOption(doughnutOption);
+    chart.setOption(chartOption);
   };
 
-  const initDoughnut = (doughnut) => {
-    const doughnutOption = {
+  const initChart = (chart: echarts.ECharts) => {
+    if (!chart) return;
+    const chartOption = {
       tooltip: {
         show: true,
         trigger: 'axis',
@@ -116,13 +125,21 @@
         },
       ],
     };
-    doughnut.setOption(doughnutOption);
+    chart.setOption(chartOption);
+    window.addEventListener('resize', handleResize);
+  };
+
+  // 处理窗口大小变化
+  const handleResize = () => {
+    if (chartElement) {
+      chartElement.resize();
+    }
   };
 
   watch(
     () => props.data,
     () => {
-      drawDoughnut(doughnut);
+      drawChart(chartElement);
     },
   );
 </script>

src/views/security-confidentiality/overview/components/ConfidentialityPosition.vue

@@ -139,7 +139,7 @@
   // 计算近30天的时间范围
   const getLast30DaysTimeRange = () => {
     return {
-      startTime: dayjs().subtract(30, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+      startTime: dayjs().subtract(29, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
       endTime: dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
     };
   };