tab切换渲染

2025-12-15 21:47:12 +08:00
parent e318f4519c
commit 5daba69ee5
3 changed files with 115 additions and 9 deletions
--- a/src/views/screen/companyScreen.vue
+++ b/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>
@@ -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 {
--- a/src/views/screen/components/RiskStatisticsPanel.vue
+++ b/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">
--- a/src/views/screen/regionScreen.vue
+++ b/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);
 }