From 301d47368d613de762f0d780a962656896a9f213 Mon Sep 17 00:00:00 2001
From: yang chen <yangchenjj@isoftstone.com>
Date: Wed, 24 Dec 2025 10:18:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(screen):=20=E6=9B=B4=E6=96=B0=E4=B8=BB?=
 =?UTF-8?q?=E5=B1=8F=E5=B9=95=E7=BB=84=E4=BB=B6=E5=92=8C=E9=A3=8E=E9=99=A9?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E9=9D=A2=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整了组件标签格式，移除多余空格
- 修复了导入语句的空格格式问题
- 更新了JSON解析的空格格式
- 修改了工作订单类型从"安全生产"为"物业服务-安全"
- 增加了API响应数据的rate字段支持
- 将图表中心显示从总数改为完成率百分比
- 将状态标签从"已作废"更新为"已关闭"
- 优化了背景图片的CSS配置
- 添加了空行以提高代码可读性
---
 .../screen/components/RiskStatisticsPanel.vue |  21 +-
 src/views/screen/mainScreen.vue               | 195 ++++++++++--------
 2 files changed, 115 insertions(+), 101 deletions(-)

diff --git a/src/views/screen/components/RiskStatisticsPanel.vue b/src/views/screen/components/RiskStatisticsPanel.vue
index 6636a80..13054ee 100644
--- a/src/views/screen/components/RiskStatisticsPanel.vue
+++ b/src/views/screen/components/RiskStatisticsPanel.vue
@@ -16,8 +16,8 @@
           <div class="chart-wrapper">
             <Echart class="donut-chart" :options="buildOption(item)" />
             <div class="chart-center">
-              <div class="center-title">总数</div>
-              <div class="center-value">{{ item.total }}</div>
+              <div class="center-title">完成率</div>
+              <div class="center-value">{{ item.rate }}%</div>
             </div>
           </div>
         <div class="legend">
@@ -55,6 +55,7 @@ type StatusKey = 'notStarted' | 'inProgress' | 'done' | 'voided'
 interface ChartItem {
   title: string
   total: number
+  rate: number
   status: Record<StatusKey, number>
 }
 
@@ -62,16 +63,16 @@ const statusList: { key: StatusKey; label: string; color: string }[] = [
   { key: 'notStarted', label: '未开始', color: '#2a59ff' },
   { key: 'inProgress', label: '进行中', color: '#ff8a00' },
   { key: 'done', label: '已完成', color: '#1bd9ff' },
-  { key: 'voided', label: '已作废', color: '#9fa0a6' }
+  { key: 'voided', label: '已关闭', color: '#9fa0a6' }
 ]
 
 const defaultChart: ChartItem[] = [
-  { title: '每日检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
-  { title: '每月检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
-  { title: '每年检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
-  { title: '每日检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
-  { title: '每月检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
-  { title: '每年检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } }
+  { title: '每日检查(维保类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
+  { title: '每月检查(维保类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
+  { title: '每年检查(维保类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
+  { title: '每日检查(巡检类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
+  { title: '每月检查(巡检类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
+  { title: '每年检查(巡检类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } }
 ]
 
 const tabCharts = ref<Record<TabType, ChartItem[]>>({
@@ -114,7 +115,7 @@ const buildOption = (item: ChartItem): EChartsOption => ({
         { value: item.status.notStarted, name: '未开始', itemStyle: { color: '#2a59ff' }, label: { show: false } },
         { value: item.status.inProgress, name: '进行中', itemStyle: { color: '#ff8a00' }, label: { show: false } },
         { value: item.status.done, name: '已完成', itemStyle: { color: '#1bd9ff' }, label: { show: false } },
-        { value: item.status.voided, name: '已作废', itemStyle: { color: '#9fa0a6' }, label: { show: false } }
+        { value: item.status.voided, name: '已关闭', itemStyle: { color: '#9fa0a6' }, label: { show: false } }
       ],
       emphasis: { scale: true, scaleSize: 4 }
     }
diff --git a/src/views/screen/mainScreen.vue b/src/views/screen/mainScreen.vue
index de25be5..f3e6610 100644
--- a/src/views/screen/mainScreen.vue
+++ b/src/views/screen/mainScreen.vue
@@ -15,46 +15,50 @@
       </div>
     </div>
     <!-- 天气预报 -->
-    <WeatherWarning />
+    <WeatherWarning/>
     <!-- 主内容区 -->
     <div class="content-container">
       <div class="left-wrapper">
         <OverviewPanel :totalCount="dashboardData?.totalCount || 0"
-          :formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
-          :externalStaffCount="dashboardData?.externalStaffCount || 0" :visitorCount="dashboardData?.visitorCount || 0"
-          :parkStatistics="dashboardData?.parkStatistics" />
+                       :formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
+                       :externalStaffCount="dashboardData?.externalStaffCount || 0"
+                       :visitorCount="dashboardData?.visitorCount || 0"
+                       :parkStatistics="dashboardData?.parkStatistics"/>
         <RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
-          @tab-change="handleRiskTabChange" :campus_id="query.campus_id" />
+                             @tab-change="handleRiskTabChange" :campus_id="query.campus_id"/>
       </div>
       <div class="right-wrapper">
-        <HighRiskAlertPanel :alertData="dashboardData?.alertData" :alertDetails="dashboardData?.alertData.details"
-          :sourceIndex="sourceIndex" />
+        <HighRiskAlertPanel :alertData="dashboardData?.alertData"
+                            :alertDetails="dashboardData?.alertData.details"
+                            :sourceIndex="sourceIndex"/>
         <TimeoutWorkOrderPanel :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
-          :alertDetails="dashboardData?.timeoutWorkOrders.details" :sourceIndex="sourceIndex" />
+                               :alertDetails="dashboardData?.timeoutWorkOrders.details"
+                               :sourceIndex="sourceIndex"/>
       </div>
-      <HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData" />
+      <HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData"/>
     </div>
   </div>
 
   <!-- 区域选择弹窗 -->
-  <RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedRegion" :regions="regionOption"
-    @change="onRegionChange" />
+  <RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedRegion"
+                  :regions="regionOption"
+                  @change="onRegionChange"/>
 </template>
 
 <script setup lang="ts">
-import { getTableList, getTableData, getWorkOrderStatistics } from './report'
-import { ref, onMounted, watch, onUnmounted } from 'vue'
-import { useRouter } from 'vue-router'
+import {getTableList, getTableData, getWorkOrderStatistics} from './report'
+import {ref, onMounted, watch, onUnmounted} from 'vue'
+import {useRouter} from 'vue-router'
 import RegionSelector from './components/RegionSelector.vue'
 import WeatherWarning from './components/WeatherWarning.vue'
-import { getDashboardData, getAlertDetails, type DashboardData } from '@/api/dashboard'
+import {getDashboardData, getAlertDetails, type DashboardData} from '@/api/dashboard'
 
 import OverviewPanel from './components/OverviewPanel.vue'
 import RiskStatisticsPanel from './components/RiskStatisticsPanel.vue'
 import HighRiskAlertPanel from './components/HighRiskAlertPanel.vue'
 import TimeoutWorkOrderPanel from './components/TimeoutWorkOrderPanel.vue'
 import HiddenDangerPanel from './components/HiddenDangerPanel.vue'
-import { error } from "echarts/types/src/util/log";
+import {error} from "echarts/types/src/util/log";
 
 // 类型定义
 interface AlertItem {
@@ -224,7 +228,7 @@ const getCachedRegionOption = (): CacheData | null => {
   try {
     const cached = sessionStorage.getItem(CACHE_KEY)
     if (cached) {
-      const { data, timestamp } = JSON.parse(cached)
+      const {data, timestamp} = JSON.parse(cached)
       const now = Date.now()
       // 检查缓存是否在有效期内
       if (now - timestamp < CACHE_DURATION) {
@@ -263,7 +267,7 @@ const setCachedRegionOption = (regionOption: RegionItem[], campus_id: string) =>
 onMounted(async () => {
   updateTime()
   timeUpdateTimerId.value = setInterval(updateTime, 1000)
-  
+
   // 先检查缓存
   const cachedData = getCachedRegionOption()
   if (cachedData && cachedData.regionOption && cachedData.regionOption.length > 0) {
@@ -273,62 +277,62 @@ onMounted(async () => {
   } else {
     // 缓存不存在或已过期，调用接口
     try {
-      let { records } = await getTableList(
+      let {records} = await getTableList(
         'park_info_list'
       )
-    // records = [
-    //   {
-    //     "region_id": "130601",
-    //     "park_code": "1825468527486140416",
-    //     "region": "北京",
-    //     "park_name": "雄安新区总部"
-    //   },
-    //   {
-    //     "region_id": "130601",
-    //     "park_code": "1825468527486140417",
-    //     "region": "北京",
-    //     "park_name": "雄安地面站"
-    //   },
-    //   {
-    //     "region_id": "130603",
-    //     "park_code": "1825468527486140426",
-    //     "region": "武汉",
-    //     "park_name": "花山新区总部"
-    //   }
-    // ]
-    if (records && records.length > 0) {
-      // 去重region字段，使用Map来确保唯一性
-      const regionMap = new Map()
-      records.forEach(el => {
-        if (!regionMap.has(el.region)) {
-          regionMap.set(el.region, {
-            name: el.region,
-            code: el.region_id // 使用region_code作为code
-          })
-        }
-      })
-      // 转换为数组
-      regionOption.value = Array.from(regionMap.values())
+      // records = [
+      //   {
+      //     "region_id": "130601",
+      //     "park_code": "1825468527486140416",
+      //     "region": "北京",
+      //     "park_name": "雄安新区总部"
+      //   },
+      //   {
+      //     "region_id": "130601",
+      //     "park_code": "1825468527486140417",
+      //     "region": "北京",
+      //     "park_name": "雄安地面站"
+      //   },
+      //   {
+      //     "region_id": "130603",
+      //     "park_code": "1825468527486140426",
+      //     "region": "武汉",
+      //     "park_name": "花山新区总部"
+      //   }
+      // ]
+      if (records && records.length > 0) {
+        // 去重region字段，使用Map来确保唯一性
+        const regionMap = new Map()
+        records.forEach(el => {
+          if (!regionMap.has(el.region)) {
+            regionMap.set(el.region, {
+              name: el.region,
+              code: el.region_id // 使用region_code作为code
+            })
+          }
+        })
+        // 转换为数组
+        regionOption.value = Array.from(regionMap.values())
 
-      console.log('regionOption.value>>>>', regionOption.value);
+        console.log('regionOption.value>>>>', regionOption.value);
 
-      // 将园区信息去重
-      const parkMap = new Map();
-      records.forEach(el => {
-        if (!parkMap.has(el.park_code)) {
-          parkMap.set(el.park_code, {
-            name: el.park_name,
-            code: el.park_code
-          })
-        }
-      })
-      // 将parkMap转换为数组
-      query.campus_id = Array.from(parkMap.values()).map(e1 => e1.code).join();
-      
-      // 保存到缓存
-      setCachedRegionOption(regionOption.value, query.campus_id)
+        // 将园区信息去重
+        const parkMap = new Map();
+        records.forEach(el => {
+          if (!parkMap.has(el.park_code)) {
+            parkMap.set(el.park_code, {
+              name: el.park_name,
+              code: el.park_code
+            })
+          }
+        })
+        // 将parkMap转换为数组
+        query.campus_id = Array.from(parkMap.values()).map(e1 => e1.code).join();
 
-    }
+        // 保存到缓存
+        setCachedRegionOption(regionOption.value, query.campus_id)
+
+      }
     } catch (error) {
       console.error('初始化园区数据失败:', error)
     }
@@ -527,7 +531,7 @@ const handleHiddenDangerPannelData = (query) => {
                 processingCnt = totalCnt > 0 ? ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2) : '0.00'
                 pendingCnt = totalCnt > 0 ? ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2) : '0.00'
               }
-              
+
               dashboardData.value.hiddenDangerData.progress = {
                 overdue: overdueCnt,
                 processed: processedCnt,
@@ -646,24 +650,32 @@ const handleRiskTabChange = async (tab: TabType) => {
     let workOrderType = ''
     switch (tab) {
       case '安全类':
-        workOrderType = '安全生产'
+        workOrderType = '物业服务-安全'
         break
       case '工程类':
         workOrderType = '物业服务-工程'
         break
       default:
-        workOrderType = '安全生产'
+        workOrderType = '物业服务-安全'
     }
 
     // 同时获取维保任务和巡检任务的数据
     const [maintenanceResponse, inspectionResponse] = await Promise.all([
-      getWorkOrderStatistics({workOrderType, taskType: '维保任务',campus_id: query.campus_id}).catch(error => {
+      getWorkOrderStatistics({
+        workOrderType,
+        taskType: '维保任务',
+        campus_id: query.campus_id
+      }).catch(error => {
         console.error('获取维保任务数据失败:', error)
-        return { records: [] }
+        return {records: []}
       }),
-      getWorkOrderStatistics({workOrderType, taskType: '巡检任务',campus_id: query.campus_id}).catch(error => {
+      getWorkOrderStatistics({
+        workOrderType,
+        taskType: '巡检任务',
+        campus_id: query.campus_id
+      }).catch(error => {
         console.error('获取巡检任务数据失败:', error)
-        return { records: [] }
+        return {records: []}
       })
     ])
 
@@ -677,7 +689,7 @@ const handleRiskTabChange = async (tab: TabType) => {
     // 将API数据转换为图表数据格式
     const convertToChartData = (records: any[], taskTypeName: string): any[] => {
       const charts: any[] = []
-      
+
       // 按周期分组
       const cycleGroups: Record<string, any> = {}
       records.forEach((record: any) => {
@@ -692,10 +704,11 @@ const handleRiskTabChange = async (tab: TabType) => {
       cycles.forEach((cycle) => {
         const data = cycleGroups[cycle] || {}
         const title = `${cycleMap[cycle]}检查(${taskTypeName})`
-        
+
         charts.push({
           title,
           total: Number(data.total) || 0,
+          rate: Number(data.rate) || 0,
           status: {
             notStarted: Number(data.pending) || 0,
             inProgress: Number(data.processing) || 0,
@@ -729,7 +742,7 @@ const onRegionChange = (item: RegionItem): void => {
   selectedRegion.value = item.name
   router.push({
     path: '/screen/region',
-    query: { region: item.name, regionCode: item.code }
+    query: {region: item.name, regionCode: item.code}
   })
 }
 
@@ -1296,19 +1309,19 @@ const timeOut1 = (): void => {
     .left-top {
       padding: 0 5px;
       background-image: url('@/assets/images/screen/left_top_img.png'),
-        url('@/assets/images/screen/left_center_img.png'),
-        url('@/assets/images/screen/left_bottom_img.png');
+      url('@/assets/images/screen/left_center_img.png'),
+      url('@/assets/images/screen/left_bottom_img.png');
       background-position: top center,
-        left center,
-        bottom center;
+      left center,
+      bottom center;
 
       /* 设置大小，注意中间的背景图应该覆盖整个容器 */
       background-repeat: no-repeat, no-repeat, no-repeat;
 
       /* 设置位置 */
       background-size: 100% 90px,
-        cover,
-        100% 68px;
+      cover,
+      100% 68px;
       flex: 1;
 
       /* 设置重复方式 */
@@ -1470,19 +1483,19 @@ const timeOut1 = (): void => {
 
     .left-bottom {
       background-image: url('@/assets/images/screen/left_top_2_img.png'),
-        url('@/assets/images/screen/left_center_img.png'),
-        url('@/assets/images/screen/left_bottom_img.png');
+      url('@/assets/images/screen/left_center_img.png'),
+      url('@/assets/images/screen/left_bottom_img.png');
       background-position: top center,
-        left center,
-        bottom center;
+      left center,
+      bottom center;
 
       /* 设置大小，注意中间的背景图应该覆盖整个容器 */
       background-repeat: no-repeat, no-repeat, no-repeat;
 
       /* 设置位置 */
       background-size: 100% 90px,
-        cover,
-        100% 68px;
+      cover,
+      100% 68px;
       flex: 1;
 
       /* 设置重复方式 */