From 429d2748a322169dcd217c2bb18fe9590c649d99 Mon Sep 17 00:00:00 2001
From: ruancuihong <2806986110@qq.com>
Date: Thu, 13 Mar 2025 18:08:47 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9B=BE=E8=A1=A8=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E8=81=94=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components.d.ts                         |   6 +-
 src/views/Main/DailyPatrolCard/index.vue    |  30 ++++--
 src/views/Main/ProjectCountCard/index.vue   |   1 +
 src/views/Main/RiskInspectionCard/index.vue |  29 +++++-
 src/views/Main/SafetyAppraise/index.vue     | 109 +++++++++++++++++---
 src/views/Main/SafetyOverviewCard/index.vue |  70 ++++++++++---
 6 files changed, 201 insertions(+), 44 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index c932a33..f41ccac 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -10,6 +10,9 @@ declare module 'vue' {
     Card: typeof import('./components/Card/index.vue')['default']
     Dialog: typeof import('./components/Dialog/index.vue')['default']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPopover: typeof import('element-plus/es')['ElPopover']
@@ -27,7 +30,4 @@ declare module 'vue' {
     UploadImage: typeof import('./components/Upload/UploadImage.vue')['default']
     Video: typeof import('./components/Video/index.vue')['default']
   }
-  export interface ComponentCustomProperties {
-    vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']
-  }
 }
diff --git a/src/views/Main/DailyPatrolCard/index.vue b/src/views/Main/DailyPatrolCard/index.vue
index 435e59d..88ebde3 100644
--- a/src/views/Main/DailyPatrolCard/index.vue
+++ b/src/views/Main/DailyPatrolCard/index.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
 import * as echarts from 'echarts';
 import { useChartStore } from '@/store/modules/chart';
 
@@ -23,6 +23,16 @@ const chartStore = useChartStore();
 defineOptions({
   name: 'DailyPatrolCard'
 });
+const props = defineProps({
+  timeRange: {
+    type: Object,
+    default: () => ({
+      startTime: '',
+      endTime: ''
+    })
+  }
+});
+
 let chart: echarts.ECharts | undefined;
 const chartRef = ref();
 const handleResize = () => {
@@ -30,16 +40,16 @@ const handleResize = () => {
 };
 const dailyData: any = ref([]);
 const dailyCount = ref(0);
-const getChartData = async () => {
+const getChartData = async (time: any) => {
   dailyCount.value = 0
   dailyData.value = [];
   const pramas = {
-    endTime: '',
-    startTime: '',
+    // endTime: '',
+    // startTime: '',
+    ...time,
     group: 'K6'
   };
   const data: any = await chartStore.initStatisticChart(pramas);
-  console.log("🚀 ~ getChartData ~ data:", data)
   if (data?.yaxis?.length) {
     let newArr = data.yaxis.flatMap((v: any) => v.series);
     newArr?.forEach((item: any) => {
@@ -83,6 +93,7 @@ const getChartData = async () => {
   await initChart();
 };
 const initChart = () => {
+  chart?.clear();
   chart = echarts.init(chartRef.value);
   // ['一般', '较大', '重大', '紧急']
   const pieName = dailyData.value.map((item: any) => item.name);
@@ -208,9 +219,14 @@ const initChart = () => {
 
   // Set options and render chart
   chart.setOption(option);
-};
+};watch(
+  () => props.timeRange,
+  (newVal) => {
+    getChartData(newVal);
+  }
+);
 onMounted(() => {
-  getChartData();
+  getChartData(props.timeRange);
 
   window.addEventListener('resize', handleResize);
 });
diff --git a/src/views/Main/ProjectCountCard/index.vue b/src/views/Main/ProjectCountCard/index.vue
index d304c7d..efd8910 100644
--- a/src/views/Main/ProjectCountCard/index.vue
+++ b/src/views/Main/ProjectCountCard/index.vue
@@ -65,6 +65,7 @@ const getChartData = async () => {
 };
 const initChart = () => {
   if (!chartRef.value) return;
+  chart?.clear();
   chart = echarts.init(chartRef.value);
   const legendName = projectData.value.map((item: any) => item.name);
 
diff --git a/src/views/Main/RiskInspectionCard/index.vue b/src/views/Main/RiskInspectionCard/index.vue
index 57a3b28..38811ce 100644
--- a/src/views/Main/RiskInspectionCard/index.vue
+++ b/src/views/Main/RiskInspectionCard/index.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
 import * as echarts from 'echarts';
 import 'echarts-liquidfill';
 import 'echarts-liquidfill/src/liquidFill.js';
@@ -26,6 +26,15 @@ const chartStore = useChartStore();
 defineOptions({
   name: 'RiskInspectionCard'
 });
+const props = defineProps({
+  timeRange: {
+    type: Object,
+    default: () => ({
+      startTime: '',
+      endTime: ''
+    })
+  }
+});
 const problemEchartRef = ref();
 const questEchartRef = ref();
 let leftChart: echarts.ECharts | undefined;
@@ -38,15 +47,16 @@ const problemData: any = ref([]);
 const problemCount = ref(0);
 const taskData: any = ref([]);
 const taskCount = ref(0);
-const getChartData = async () => {
+const getChartData = async (time: any) => {
   problemCount.value = 0;
   problemData.value = [];
   taskCount.value = 0;
   taskData.value = [];
 
   const pramas = {
-    endTime: '',
-    startTime: '',
+    // endTime: '',
+    // startTime: '',
+    ...time,
     group: 'K5'
   };
   const data: any = await chartStore.initStatisticChart(pramas);
@@ -99,6 +109,7 @@ const getChartData = async () => {
   initChart();
 };
 const initChart = () => {
+  leftChart?.clear()
   leftChart = echarts.init(problemEchartRef.value);
 
   const color = ['#FFBC37', '#429BF4'];
@@ -258,6 +269,7 @@ const initChart = () => {
   };
   leftChart.setOption(leftOption);
 
+  rightChart?.clear()
   rightChart = echarts.init(questEchartRef.value);
   // ['任务数', '已完成']
   const li_qu_legend = taskData.value.map((item: any) => item.name);
@@ -425,8 +437,15 @@ const initChart = () => {
   // Set options and render right chart
   rightChart.setOption(rightOption);
 };
+
+watch(
+  () => props.timeRange,
+  (newVal) => {
+    getChartData(newVal);
+  }
+);
 onMounted(() => {
-  getChartData();
+  getChartData(props.timeRange);
 
   window.addEventListener('resize', handleResize);
 });
diff --git a/src/views/Main/SafetyAppraise/index.vue b/src/views/Main/SafetyAppraise/index.vue
index 78e1ba8..e0511e1 100644
--- a/src/views/Main/SafetyAppraise/index.vue
+++ b/src/views/Main/SafetyAppraise/index.vue
@@ -2,7 +2,13 @@
   <div class="safety-appraise">
     <div class="sy-water-cart-second-title">安全鉴定</div>
     <div class="appraise-wrapper">
-      <div class="appraise-item">
+      <div class="appraise-item" v-for="(item, index) in safetyData" :key="index">
+        <div class="count total" :class="[{ wait: item.name === '待鉴定' }, { ok: item.name === '已鉴定' }]">
+          {{ item?.value || '' }}
+        </div>
+        <div class="name">{{ item?.name || '' }}</div>
+      </div>
+      <!-- <div class="appraise-item">
         <div class="count total">456</div>
         <div class="name">任务数</div>
       </div>
@@ -13,26 +19,101 @@
       <div class="appraise-item">
         <div class="count ok">56</div>
         <div class="name">已鉴定</div>
-      </div>
+      </div> -->
     </div>
     <div class="appraise-progress">
       <div class="tips">
-        <div>已完成：<span class="ok">23%</span></div>
-        <div>进行中：<span class="in">23%</span></div>
-        <div>超期未鉴定：<span class="overdue">23%</span></div>
+        <div>
+          已完成：<span class="ok">{{ okNum }}%</span>
+        </div>
+        <div>
+          进行中：<span class="in">{{ 100 - okNum }}%</span>
+        </div>
+        <!-- <div>超期未鉴定：<span class="overdue">23%</span></div> -->
       </div>
       <div class="progress">
-        <div class="progress-bar ok" style="width: 23%"></div>
-        <div class="progress-bar in" style="width: 23%"></div>
-        <div class="progress-bar overdue" style="width: 23%"></div>
+        <div class="progress-bar ok" :style="{ width: `${okNum}%` }"></div>
+        <div class="progress-bar in" :style="{ width: `${100 - okNum}%` }"></div>
+        <!-- <div class="progress-bar overdue" style="width: 23%"></div> -->
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted, watch, computed } from 'vue';
+import { useChartStore } from '@/store/modules/chart';
+
+const chartStore = useChartStore();
+
 defineOptions({
-  name: "safety-appraise",
+  name: 'safety-appraise'
+});
+const props = defineProps({
+  timeRange: {
+    type: Object,
+    default: () => ({
+      startTime: '',
+      endTime: ''
+    })
+  }
+});
+const taskCount = ref(0);
+const safetyData: any = ref([]);
+const okNum = computed(() => {
+  const num = safetyData.value.find((item: any) => item.name === '任务数');
+  return taskCount.value ? (Number(num?.value || 0) / taskCount.value) * 100 : 0;
+});
+// const inNum = computed(() => {
+//   const num = safetyData.value.find((item: any) => item.name === '已完成');
+//   return taskCount.value ? (Number(num?.value || 0) / taskCount.value) * 100 : 0;
+// });
+const getChartData = async (time: any) => {
+  taskCount.value = 0;
+  safetyData.value = [];
+
+  const pramas = {
+    // endTime: '',
+    // startTime: '',
+    ...time,
+    group: 'K4'
+  };
+  const data: any = await chartStore.initStatisticChart(pramas);
+  if (data?.yaxis?.length) {
+    let newArr = data.yaxis.flatMap((v: any) => v.series);
+    newArr?.forEach((item: any) => {
+      safetyData.value.push({
+        name: item.name || '',
+        value: Number(item.sum)?.toFixed(0) || 0,
+        unit: item.unit || ''
+      });
+      taskCount.value += Number(item.sum) || 0;
+    });
+  } else {
+    // 默认数据
+    safetyData.value = [
+      {
+        name: '任务数',
+        value: 0,
+        unit: ''
+      },
+      {
+        name: '已完成',
+        value: 0,
+        unit: ''
+      }
+    ];
+  }
+};
+
+watch(
+  () => props.timeRange,
+  (newVal) => {
+    getChartData(newVal);
+  }
+);
+onMounted(() => {
+  getChartData(props.timeRange);
 });
 </script>
 
@@ -51,7 +132,7 @@ defineOptions({
     .appraise-item {
       width: 104px;
       height: 119px;
-      background: url("@/assets/card/safety-item-bg.png") no-repeat;
+      background: url('@/assets/card/safety-item-bg.png') no-repeat;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -65,8 +146,8 @@ defineOptions({
         text-align: center;
         letter-spacing: 0em;
 
-        font-variation-settings: "opsz" auto;
-        font-feature-settings: "kern" on;
+        font-variation-settings: 'opsz' auto;
+        font-feature-settings: 'kern' on;
         color: #ffffff;
       }
       .count {
@@ -103,7 +184,7 @@ defineOptions({
       line-height: 22px;
       letter-spacing: 0px;
 
-      font-variation-settings: "opsz" auto;
+      font-variation-settings: 'opsz' auto;
       color: rgba(0, 0, 0, 0.55);
       span {
         font-family: DIN;
@@ -112,7 +193,7 @@ defineOptions({
         line-height: 22px;
         letter-spacing: 0px;
 
-        font-variation-settings: "opsz" auto;
+        font-variation-settings: 'opsz' auto;
         &.ok {
           color: #28ce8e;
         }
diff --git a/src/views/Main/SafetyOverviewCard/index.vue b/src/views/Main/SafetyOverviewCard/index.vue
index 6772900..af20475 100644
--- a/src/views/Main/SafetyOverviewCard/index.vue
+++ b/src/views/Main/SafetyOverviewCard/index.vue
@@ -2,33 +2,70 @@
   <div class="safety-overview-card">
     <div class="sy-water-cart-title">
       安全监查情况
-      <el-select class="sy-water-cart-title-select" size="small" @change="timeChange">
+      <el-select  v-model="time" class="sy-water-cart-title-select" size="small" @change="timeChange">
         <el-option label="今日" value="1"></el-option>
         <el-option label="近7日" value="2"></el-option>
         <el-option label="近30日" value="3"></el-option>
         <el-option label="近一年" value="4"></el-option>
       </el-select>
     </div>
-    <SafetyAppraise />
-    <RiskInspectionCard />
-    <DailyPatrolCard />
+    <SafetyAppraise :time-range="timeRange" />
+    <RiskInspectionCard :time-range="timeRange" />
+    <DailyPatrolCard :time-range="timeRange" />
   </div>
 </template>
 
 <script setup lang="ts">
-import SafetyAppraise from "../SafetyAppraise/index.vue";
-import RiskInspectionCard from "../RiskInspectionCard/index.vue";
-import DailyPatrolCard from "../DailyPatrolCard/index.vue";
+import SafetyAppraise from '../SafetyAppraise/index.vue';
+import RiskInspectionCard from '../RiskInspectionCard/index.vue';
+import DailyPatrolCard from '../DailyPatrolCard/index.vue';
+import dayjs from 'dayjs';
+import { ref } from 'vue';
+
 defineOptions({
-  name: "SafetyOverviewCard",
+  name: 'SafetyOverviewCard'
+});
+const timeRange: any = ref({
+  startTime: '',
+  endTime: ''
 });
+const time = ref('2')
 const timeChange = (val: any) => {
-  console.log(val);
+  timeRange.value = getTimeRange(val);
 };
-  // 根据系统时间获取对应的 时间范围
-  // const getTimeRange = () => {
-  // }
+// 根据系统时间获取对应的 时间范围
+const getTimeRange = (type: string) => {
+  const now = dayjs();
+  let startDate: dayjs.Dayjs;
+  let endDate: dayjs.Dayjs;
+
+  switch (type) {
+    case '1': // 今日
+      startDate = now.startOf('day');
+      endDate = now.endOf('day');
+      break;
+    case '2': // 近7日
+      startDate = now.subtract(6, 'day').startOf('day');
+      endDate = now.endOf('day');
+      break;
+    case '3': // 近30日
+      startDate = now.subtract(29, 'day').startOf('day');
+      endDate = now.endOf('day');
+      break;
+    case '4': // 近一年
+      startDate = now.subtract(1, 'year').startOf('day');
+      endDate = now.endOf('day');
+      break;
+    default:
+      startDate = now.startOf('day');
+      endDate = now.endOf('day');
+  }
 
+  return {
+    startTime: startDate.format('YYYY-MM-DD HH:mm:ss'),
+    endTime: endDate.format('YYYY-MM-DD HH:mm:ss')
+  };
+};
 </script>
 
 <style scoped lang="less">
@@ -50,6 +87,9 @@ const timeChange = (val: any) => {
         color: #fff;
       }
     }
+    .sy-input__inner {
+      color: #fff;
+    }
     ::-webkit-input-placeholder {
       color: #fff;
     }
@@ -62,7 +102,7 @@ const timeChange = (val: any) => {
     .appraise-item {
       width: 104px;
       height: 119px;
-      background: url("@/assets/card/safety-item-bg.png") no-repeat;
+      background: url('@/assets/card/safety-item-bg.png') no-repeat;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -76,8 +116,8 @@ const timeChange = (val: any) => {
         text-align: center;
         letter-spacing: 0em;
 
-        font-variation-settings: "opsz" auto;
-        font-feature-settings: "kern" on;
+        font-variation-settings: 'opsz' auto;
+        font-feature-settings: 'kern' on;
         color: #ffffff;
       }
       .count {