tab切换渲染

src/views/screen/companyScreen.vue

@@ -77,11 +77,13 @@
             <div class="type-wrapper">
               <div class="type-item">
                 <span class="type-btn yellow">重大</span>
-                <span class="type-num cursor-pointer" @click="handleSeverityCountClick">{{ mockData.hiddenDangerData.severityCount }}</span>
+                <span class="type-num cursor-pointer" @click="handleSeverityCountClick">{{
+                  mockData.hiddenDangerData.severityCount }}</span>
               </div>
               <div class="type-item">
                 <span class="type-btn green">一般</span>
-                <span class="type-num cursor-pointer"  @click="handleGeneralCountClick">{{ mockData.hiddenDangerData.generalCount }}</span>
+                <span class="type-num cursor-pointer" @click="handleGeneralCountClick">{{
+                  mockData.hiddenDangerData.generalCount }}</span>
               </div>
               <!-- <div class="type-item">
                 <span class="type-btn blue">较大</span>
@@ -104,7 +106,7 @@
         </div>
         <!-- 左下区域 -->
         <div class="left-bottom">
-          <div class="panel-title">
+          <!-- <div class="panel-title">
             <div class="tabs">
               <span class="tab" :class="{ active: activeTab === '高危作业' }" @click="handleTabClick('高危作业')">高危作业</span>
               <span class="divider">|</span>
@@ -145,7 +147,7 @@
                 <AlertList maxHeight="25vh" style="margin-left: 1vw;" :list-data="dangerList" />
               </div>
             </template>
-            <template v-if="activeTab === '安全培训考试'">
+<template v-if="activeTab === '安全培训考试'">
               <div class="bottom-card" style="margin-top: 10px;">
                 <div class="bottom-card-title" style="margin-top: 0;">
                   <span>安全培训考试</span>
@@ -154,7 +156,7 @@
               </div>
               <AlertList maxHeight="40vh" style="margin-left: 1vw;" :table-title="tableTitle" :list-data="examList" />
             </template>
-            <template v-if="activeTab === '应急预案及演练'">
+<template v-if="activeTab === '应急预案及演练'">
               <div class="bottom-card">
                 <div class="bottom-card-title" style="margin-top: 0;">
                   <span>应急预案及演练</span>
@@ -164,7 +166,9 @@
               <AlertList maxHeight="40vh" style="margin-left: 1vw;" :table-title="trainingTableTitle"
                 :list-data="drillList" />
             </template>
-          </div>
+</div> -->
+          <RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail" :park="parkValue"
+            @tab-change="handleRiskTabChange" :campus_id="query.campus_id" />
         </div>
       </div>
       <div class="right-wrapper">
@@ -251,7 +255,8 @@ import ParkCenter from './components/ParkCenter.vue'
 import PointInfoPopup from './components/PointInfoPopup.vue'
 import WeatherWarning from './components/WeatherWarning.vue'
 import AlertList from './components/AlertList.vue'
-import { getTableList, getTableData, getDangerDetail, getDangerCount, getExamDetail, getDrillDetail } from './report'
+import { getTableList, getTableData, getDangerDetail, getDangerCount, getExamDetail, getDrillDetail, getWorkOrderStatistics } from './report'
+import RiskStatisticsPanel from './components/RiskStatisticsPanel.vue'
 
 interface PointPosition {
   label: string
@@ -292,6 +297,104 @@ const handleGeneralCountClick = () => {
   window.open('http://10.0.64.20/configcenter/console/device-manage', '_blank')
 }
 
+const riskStatistics = ref<any>({
+  '安全类': [],
+  '工程类': []
+})
+const dangerDetail = ref<any>({
+  '安全类': [],
+  '工程类': []
+})
+const parkValue = ref<string>('')
+
+type TabType = '安全类' | '工程类'
+
+
+const handleRiskTabChange = async (tab: TabType) => {
+  console.log('Tab changed to:', tab)
+
+  try {
+    let workOrderType = ''
+    switch (tab) {
+      case '安全类':
+        workOrderType = '安全生产'
+        break
+      case '工程类':
+        workOrderType = '物业服务-工程'
+        break
+      default:
+        workOrderType = '安全生产'
+    }
+
+    // 同时获取维保任务和巡检任务的数据
+    const [maintenanceResponse, inspectionResponse] = await Promise.all([
+      getWorkOrderStatistics({ workOrderType, taskType: '维保任务', campus_id: query.campus_id }).catch(error => {
+        console.error('获取维保任务数据失败:', error)
+        return { records: [] }
+      }),
+      getWorkOrderStatistics({ workOrderType, taskType: '巡检任务', campus_id: query.campus_id }).catch(error => {
+        console.error('获取巡检任务数据失败:', error)
+        return { records: [] }
+      })
+    ])
+
+    // 周期映射
+    const cycleMap: Record<string, string> = {
+      'day': '每日',
+      'month': '每月',
+      'year': '每年'
+    }
+
+    // 将API数据转换为图表数据格式
+    const convertToChartData = (records: any[], taskTypeName: string): any[] => {
+      const charts: any[] = []
+
+      // 按周期分组
+      const cycleGroups: Record<string, any> = {}
+      records.forEach((record: any) => {
+        const cycle = record.cycle || 'day'
+        if (!cycleGroups[cycle]) {
+          cycleGroups[cycle] = record
+        }
+      })
+
+      // 创建6个图表（3个周期 x 2个任务类型，但这里只处理一种任务类型）
+      const cycles = ['day', 'month', 'year']
+      cycles.forEach((cycle) => {
+        const data = cycleGroups[cycle] || {}
+        const title = `${cycleMap[cycle]}检查(${taskTypeName})`
+
+        charts.push({
+          title,
+          total: Number(data.total) || 0,
+          status: {
+            notStarted: Number(data.pending) || 0,
+            inProgress: Number(data.processing) || 0,
+            done: Number(data.processed) || 0,
+            voided: Number(data.closed) || 0
+          }
+        })
+      })
+
+      return charts
+    }
+
+    // 转换维保和巡检数据
+    const maintenanceCharts = convertToChartData(maintenanceResponse.records || [], '维保类')
+    const inspectionCharts = convertToChartData(inspectionResponse.records || [], '巡检类')
+
+    // 合并为6个图表：先维保（3个），后巡检（3个）
+    const allCharts = [...maintenanceCharts, ...inspectionCharts]
+
+    // 更新riskStatistics
+    riskStatistics.value[tab] = allCharts
+
+    console.log('更新后的riskStatistics:', riskStatistics.value)
+  } catch (error) {
+    console.error('获取风险统计数据失败:', error)
+  }
+}
+
 const tableTitle = [
   {
     name: '培训（考试）名称',
@@ -587,6 +690,8 @@ onMounted(async () => {
     query.campus_id = route.query.parkCode as string
   }
 
+  handleRiskTabChange('安全类')
+
   try {
     let { records } = await getTableList(
       'park_info_list'
@@ -1201,6 +1306,7 @@ onUnmounted(() => {
 .cursor-pointer {
   cursor: pointer;
 }
+
 /* 响应式设计 - 自动适应不同屏幕尺寸 */
 @media (width <=1200px) {
   .dashboard-container {

src/views/screen/components/RiskStatisticsPanel.vue

@@ -10,7 +10,7 @@
     <img class="title-line" src="@/assets/images/title_border_line.png" />
 
     <div class="chart-grid">
-      <div class="chart-card" v-for="item in currentCharts" :key="item.title">
+      <div class="chart-card" v-for="item in currentCharts" :key="`${activeTab}-${item.title}`">
         <div class="chart-title">{{ item.title }}</div>
         <div class="chart-content">
           <div class="chart-wrapper">

src/views/screen/regionScreen.vue

@@ -397,7 +397,7 @@ const loadDashboardData = async (): Promise<void> => {
   } catch (error) {
     console.error('获取超期工单数据失败:', error)
   }
-  handleRiskTabChange('危险作业')
+  handleRiskTabChange('安全类')
   handleHiddenDangerPannelData(query)
   console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
 }