总部左下角接口对接

src/views/screen/components/RiskStatisticsPanel copy.vue

@@ -0,0 +1,591 @@
+<template>
+  <div class="left-bottom">
+    <div class="panel-title">
+      <div class="tabs">
+        <span class="tab" :class="{ active: activeTab === '高危作业' }" @click="handleTabClick('高危作业')">高危作业</span>
+        <span class="divider">|</span>
+        <span class="tab" :class="{ active: activeTab === '安全培训考试' }" @click="handleTabClick('安全培训考试')">安全培训考试</span>
+        <span class="divider">|</span>
+        <span class="tab" :class="{ active: activeTab === '应急预案及演练' }" @click="handleTabClick('应急预案及演练')">应急预案及演练</span>
+      </div>
+    </div>
+    <img style="margin: 8px 0" src="@/assets/images/title_border_line.png" />
+    <div class="bottom-card-risk">
+      <div class="bottom-card-title">
+        <span>{{ activeTab === '高危作业' ? '各园区统计' : activeTab === '安全培训考试' ? '安全培训考试' : '园区演练完成率' }}</span>
+        <img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
+      </div>
+    </div>
+    <!-- <Echart v-if="activeTab !== '高危作业'" :options="riskChartOption" class="donut-chart-with-labels" height="30vh" /> -->
+
+    <AlertList maxHeight="40vh" v-if="activeTab === '安全培训考试'" :table-title="tableTitle" style="margin-left: 1vw;"
+      :list-data="dataList" />
+
+    <div style="width: 80%; padding-left: 1vw;">
+      <Echart v-if="activeTab === '高危作业'" style="height: 30vh" :options="barChartOption" class="bar-chart" />
+    </div>
+
+    <div ref="riskChart" class="risk-chart" v-if="activeTab === '应急预案及演练'"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, nextTick } from 'vue'
+import AlertList from './AlertList.vue'
+import { rgbToHex } from '@/utils/color'
+import * as echarts from 'echarts'
+import { getDrillSum, getExamSum, getZBDangerSum } from '../report'
+type TabType = '高危作业' | '安全培训考试' | '应急预案及演练'
+const activeTab = ref<TabType>('高危作业')
+const emit = defineEmits<{
+  tabChange: [tab: TabType]
+}>()
+interface AlertItem {
+  description: string
+  alarm_level_code: string
+  alarm_status: string
+  alarm_biz_id: string
+}
+interface Props {
+  riskStatistics?: any
+  dangerDetail?: AlertItem[]
+  park?: string
+  campus_id?: string
+}
+
+const tableTitle = [
+  {
+    name: '园区名称',
+    key: 'campus_name'
+  },
+  {
+    name: '累计培训次数',
+    key: 'examtimes'
+  },
+  {
+    name: '参与总人次',
+    key: 'exampeoplenum'
+  },
+  {
+    name: '累计培训时长',
+    key: 'examduration'
+  },
+  {
+    name: '平均通过率',
+    key: 'exampassrate'
+  }
+]
+
+// 图表引用
+const barChartOption = ref({
+  legend: {
+    top: '10%',
+    right: '12%',
+    orient: 'vertical' as const,
+    textStyle: {
+      color: '#ffffff',
+      fontSize: '11px'
+    }
+  },
+  grid: {
+    left: '5%',
+    right: '30%',
+    top: '10%',
+    bottom: '15%'
+  },
+  xAxis: {
+    type: 'category' as const,
+    data: [],
+    axisLabel: {
+      color: '#ffffff',
+      fontSize: 10
+    },
+    axisLine: {
+      lineStyle: { color: '#334155' }
+    }
+  },
+  yAxis: {
+    type: 'value' as const,
+    axisLabel: {
+      color: '#ffffff',
+      fontSize: 10
+    },
+    axisLine: {
+      lineStyle: { color: '#334155' }
+    },
+    splitLine: {
+      lineStyle: { color: '#334155' }
+    }
+  },
+  series: [
+    {
+      name: '未开始数量',
+      type: 'bar' as const,
+      data: [],
+      itemStyle: { color: rgbToHex(99, 196, 251) },
+      barWidth: '8%',
+      label: {
+        show: true,
+        position: 'top' as const,
+        color: '#ffffff',
+        fontSize: 12,
+        fontWeight: 'bold' as const,
+        formatter: '{c}'
+      }
+    },
+    {
+      name: '进行中数量',
+      type: 'bar' as const,
+      data: [],
+      itemStyle: { color: rgbToHex(251, 246, 85) },
+      barWidth: '8%',
+      label: {
+        show: true,
+        position: 'top' as const,
+        color: '#ffffff',
+        fontSize: 12,
+        fontWeight: 'bold' as const,
+        formatter: '{c}'
+      }
+    },
+    {
+      name: '已完成数量',
+      type: 'bar' as const,
+      data: [],
+      itemStyle: { color: rgbToHex(200, 69, 237) },
+      barWidth: '8%',
+      label: {
+        show: true,
+        position: 'top' as const,
+        color: '#ffffff',
+        fontSize: 12,
+        fontWeight: 'bold' as const,
+        formatter: '{c}'
+      }
+    }
+  ]
+})
+
+const dataList = ref<AlertItem[]>([
+])
+
+const props = defineProps<Props>()
+
+// 图表引用
+const riskChart = ref<HTMLElement | null>(null)
+let chartInstance: echarts.ECharts | null = null
+
+
+
+// 初始化饼图
+const initPieChart = async () => {
+  if (!riskChart.value) return
+
+  chartInstance = echarts.init(riskChart.value)
+
+  const colors = [
+    [
+      { offset: 0, color: '#ffb74d' },
+      { offset: 0.3, color: '#ff9800' },
+      { offset: 0.7, color: '#f57c00' },
+      { offset: 1, color: '#e65100' }
+    ],
+    [
+      { offset: 0, color: '#64b5f6' },
+      { offset: 0.3, color: '#42a5f5' },
+      { offset: 0.7, color: '#2196f3' },
+      { offset: 1, color: '#1976d2' }
+    ],
+    [
+      { offset: 0, color: '#81c784' },
+      { offset: 0.3, color: '#66bb6a' },
+      { offset: 0.7, color: '#4caf50' },
+      { offset: 1, color: '#388e3c' }
+    ]
+
+  ]
+
+  const res = await getDrillSum(props.campus_id || '')
+
+  const option = {
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      borderColor: '#4a9eff',
+      borderWidth: 1,
+      textStyle: {
+        color: '#ffffff'
+      },
+      formatter: function (params: any) {
+        return `${params.data.name}<br/>完成率: ${params.data.value}%`
+      }
+    },
+    series: [
+      {
+        name: '园区演练完成率',
+        type: 'pie',
+        radius: ['30%', '70%'],
+        center: ['50%', '50%'],
+        data: res.records.map((item, index) => (
+          {
+            value: item.rate,
+            name: item.campus_name,
+            itemStyle: {
+              color: {
+                type: 'radial',
+                x: 0.5,
+                y: 0.5,
+                r: 0.8,
+                colorStops: colors[index % 3]
+              }
+            }
+          }
+        ))
+        // [
+        //   {
+        //     value: 100,
+        //     name: '西安创新院',
+        //     itemStyle: {
+        //       color: {
+        //         type: 'radial',
+        //         x: 0.5,
+        //         y: 0.5,
+        //         r: 0.8,
+        //         colorStops: [
+        //           { offset: 0, color: '#ffb74d' },
+        //           { offset: 0.3, color: '#ff9800' },
+        //           { offset: 0.7, color: '#f57c00' },
+        //           { offset: 1, color: '#e65100' }
+        //         ]
+        //       }
+        //     }
+        //   },
+        //   {
+        //     value: 63,
+        //     name: '北京横毅大厦',
+        //     itemStyle: {
+        //       color: {
+        //         type: 'radial',
+        //         x: 0.5,
+        //         y: 0.5,
+        //         r: 0.8,
+        //         colorStops: [
+        //           { offset: 0, color: '#64b5f6' },
+        //           { offset: 0.3, color: '#42a5f5' },
+        //           { offset: 0.7, color: '#2196f3' },
+        //           { offset: 1, color: '#1976d2' }
+        //         ]
+        //       }
+        //     }
+        //   },
+        //   {
+        //     value: 60,
+        //     name: '重庆产业大厦',
+        //     itemStyle: {
+        //       color: {
+        //         type: 'radial',
+        //         x: 0.5,
+        //         y: 0.5,
+        //         r: 0.8,
+        //         colorStops: [
+        //           { offset: 0, color: '#81c784' },
+        //           { offset: 0.3, color: '#66bb6a' },
+        //           { offset: 0.7, color: '#4caf50' },
+        //           { offset: 1, color: '#388e3c' }
+        //         ]
+        //       }
+        //     }
+        //   }
+        // ]
+        ,
+        label: {
+          show: true,
+          position: 'inside',
+          formatter: function (params: any) {
+            return `${params.data.name}\n${params.data.value}%`
+          },
+          fontSize: 12,
+          color: '#ffffff',
+          fontWeight: 'bold',
+          textShadowColor: 'rgba(0, 0, 0, 0.8)',
+          textShadowBlur: 2
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ]
+  }
+
+  chartInstance.setOption(option)
+}
+
+// 销毁图表
+const destroyChart = () => {
+  if (chartInstance) {
+    chartInstance.dispose()
+    chartInstance = null
+  }
+}
+
+const initBarChart = async () => {
+  try {
+    const res = await getZBDangerSum(props.campus_id || '')
+
+    // 更新图表数据
+    const newOption = {
+      ...barChartOption.value,
+      xAxis: {
+        ...barChartOption.value.xAxis,
+        data: res.records.map((item: any) => item.campus_name)
+      },
+      series: [
+        {
+          ...barChartOption.value.series[0],
+          data: res.records.map((item: any) => item.ywc)
+        },
+        {
+          ...barChartOption.value.series[1],
+          data: res.records.map((item: any) => item.jxz)
+        },
+        {
+          ...barChartOption.value.series[2],
+          data: res.records.map((item: any) => item.wks)
+        }
+      ]
+    }
+
+    barChartOption.value = newOption
+
+    console.log('Bar chart data updated:', {
+      xAxis: barChartOption.value.xAxis.data,
+      series: barChartOption.value.series.map(s => ({ name: s.name, data: s.data }))
+    })
+  } catch (error) {
+    console.error('Failed to load bar chart data:', error)
+  }
+}
+
+// 监听标签页切换
+watchEffect(async () => {
+  if (activeTab.value === '应急预案及演练') {
+    initPieChart()
+  } else {
+    destroyChart()
+  }
+
+  if (activeTab.value === '高危作业') {
+    initBarChart()
+  }
+
+  if (activeTab.value === '安全培训考试') {
+    const res = await getExamSum(props.campus_id || '')
+
+    dataList.value = res.records
+  }
+})
+
+// 监听数据变化，更新图表
+watch(() => props.riskStatistics, (newVal) => {
+  console.log('riskStatistics changed:', { newVal })
+  if (newVal) {
+    refreshCharts(newVal)
+  }
+}, { deep: true })
+
+// 监听数据变化，更新图表
+watch(() => props.dangerDetail, (newVal) => {
+  console.log('dangerDetail changed:', { newVal })
+
+}, { deep: true })
+
+// 监听数据变化，更新图表
+watch(() => props.dangerDetail, (newVal) => {
+  console.log('dangerDetail changed:', { newVal })
+  if (newVal) {
+    dataList.value = newVal
+  }
+}, { deep: true })
+
+// 更新图表数据
+const refreshCharts = (riskStatistics: any): void => {
+  if (!riskStatistics || !Array.isArray(riskStatistics)) {
+    console.warn('riskStatistics is undefined, null, or not an array')
+    return
+  }
+
+  // 计算各园区的完成率
+  const chartData = riskStatistics.map((item: any, index: number) => {
+    const finishCount = Number(item.finishCount) || 0
+    const participateCount = Number(item.participateCount) || 0
+    const completionRate = participateCount > 0 ? Math.round((finishCount / participateCount) * 100) : 0
+
+    // 为每个园区分配不同的颜色
+    const colors = ['#ef4444', '#10b981', '#eab308', '#3b82f6', '#8b5cf6', '#f59e0b', '#06b6d4', '#84cc16']
+    const color = colors[index % colors.length]
+
+    return {
+      value: completionRate,
+      name: item.csmpus_name || `园区${index + 1}`,
+      finishCount: finishCount,
+      participateCount: participateCount,
+      itemStyle: { color: color }
+    }
+  })
+
+  console.log("Updated chart data:", chartData)
+}
+
+const handleTabClick = async (tab: TabType) => {
+  activeTab.value = tab
+  emit('tabChange', tab)
+}
+
+onMounted(() => {
+  // 如果没有传入数据，设置默认数据
+  if (!props.riskStatistics) {
+    const defaultData = [
+      {
+        csmpus_name: "雄安新区总部",
+        finishCount: "234",
+        participateCount: "300"
+      },
+      {
+        csmpus_name: "雄安二区总部",
+        finishCount: "180",
+        participateCount: "250"
+      },
+      {
+        csmpus_name: "雄安三区总部",
+        finishCount: "156",
+        participateCount: "200"
+      }
+    ]
+    refreshCharts(defaultData)
+  }
+
+  // 如果当前是高危作业标签页，初始化柱状图
+  if (activeTab.value === '高危作业') {
+    nextTick(() => {
+      initBarChart()
+    })
+  }
+})
+
+// 组件卸载时销毁图表
+onUnmounted(() => {
+  destroyChart()
+})
+</script>
+
+<style scoped lang="scss">
+.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');
+  background-position: top center, left center, bottom center;
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-size: 100% 90px, cover, 100% 68px;
+  flex: 1;
+
+  .panel-title {
+    margin: 4px 20px 0;
+    font-size: 0.8rem;
+    font-weight: bold;
+    color: #fff;
+  }
+
+  .tabs {
+    display: inline-flex;
+    align-items: center;
+    column-gap: 8px;
+  }
+
+  .tab {
+    padding: 2px 10px;
+    color: #fff;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s ease-in-out;
+    user-select: none;
+  }
+
+  .tab:hover {
+    color: #1afb8f;
+  }
+
+  .tab.active {
+    color: #1afb8f;
+    background: rgb(26 251 143 / 12%);
+    border: 1px solid rgb(26 251 143 / 35%);
+  }
+
+  .divider {
+    margin: 0 2px;
+    color: #94a3b8;
+  }
+
+  .bottom-card-risk {
+    display: flex;
+    flex-direction: column;
+
+    .bottom-card-title {
+      display: flex;
+      margin-top: 5px;
+      margin-left: -15%;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+
+  .donut-chart-with-labels {
+    width: 30vw;
+    height: 30vh;
+    margin-left: 2vw;
+  }
+
+  .risk-chart {
+    width: 30vw;
+    height: 30vh;
+    margin-left: 2vw;
+  }
+}
+
+@media (width <=1024px) {
+
+  .left-bottom .donut-chart-with-labels,
+  .left-bottom .risk-chart {
+    width: 35vw;
+    height: 35vh;
+  }
+}
+
+@media (width <=768px) {
+  .left-bottom {
+    .tabs .tab {
+      padding: 1px 8px;
+      font-size: 0.7rem;
+    }
+
+    .donut-chart-with-labels,
+    .risk-chart {
+      width: 40vw;
+      height: 40vh;
+      margin-left: 1vw;
+    }
+  }
+}
+
+@media (width <=480px) {
+
+  .left-bottom .donut-chart-with-labels,
+  .left-bottom .risk-chart {
+    width: 45vw;
+    height: 45vh;
+    margin-left: 0.5vw;
+  }
+}
+</style>

src/views/screen/components/RiskStatisticsPanel.vue

@@ -2,485 +2,130 @@
   <div class="left-bottom">
     <div class="panel-title">
       <div class="tabs">
-        <span class="tab" :class="{ active: activeTab === '高危作业' }" @click="handleTabClick('高危作业')">高危作业</span>
+        <span class="tab" :class="{ active: activeTab === '安全类' }" @click="handleTabClick('安全类')">安全类</span>
         <span class="divider">|</span>
-        <span class="tab" :class="{ active: activeTab === '安全培训考试' }" @click="handleTabClick('安全培训考试')">安全培训考试</span>
+        <span class="tab" :class="{ active: activeTab === '工程类' }" @click="handleTabClick('工程类')">工程类</span>
-        <span class="divider">|</span>
-        <span class="tab" :class="{ active: activeTab === '应急预案及演练' }" @click="handleTabClick('应急预案及演练')">应急预案及演练</span>
       </div>
     </div>
-    <img style="margin: 8px 0" src="@/assets/images/title_border_line.png" />
+    <img class="title-line" src="@/assets/images/title_border_line.png" />
-    <div class="bottom-card-risk">
+
-      <div class="bottom-card-title">
+    <div class="chart-grid">
-        <span>{{ activeTab === '高危作业' ? '各园区统计' : activeTab === '安全培训考试' ? '安全培训考试' : '园区演练完成率' }}</span>
+      <div class="chart-card" v-for="item in currentCharts" :key="item.title">
-        <img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
+        <div class="chart-title">{{ item.title }}</div>
+        <div class="chart-content">
+          <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>
+          </div>
+        <div class="legend">
+          <div class="legend-label-row">
+            <ElTooltip v-for="status in statusList" :key="status.key" :content="status.label" effect="dark" placement="right">
+              <div class="legend-item">
+                <span class="legend-dot" :style="{ background: status.color }"></span>
+                <span class="legend-label">{{ status.label }}</span>
+                <div class="legend-value">
+                  {{ item.status[status.key] }}
+                </div>
+              </div>
+            </ElTooltip>
+          </div>
+          <div class="legend-value-row">
+            <div class="legend-value" v-for="status in statusList" :key="`${status.key}-value`">
+              {{ item.status[status.key] }}
+            </div>
+          </div>
+        </div>
+      </div>
       </div>
     </div>
-    <!-- <Echart v-if="activeTab !== '高危作业'" :options="riskChartOption" class="donut-chart-with-labels" height="30vh" /> -->
-
-    <AlertList maxHeight="40vh" v-if="activeTab === '安全培训考试'" :table-title="tableTitle" style="margin-left: 1vw;"
-      :list-data="dataList" />
-
-    <div style="width: 80%; padding-left: 1vw;">
-      <Echart v-if="activeTab === '高危作业'" style="height: 30vh" :options="barChartOption" class="bar-chart" />
-    </div>
-
-    <div ref="riskChart" class="risk-chart" v-if="activeTab === '应急预案及演练'"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, nextTick } from 'vue'
+import { computed, ref, watch } from 'vue'
-import AlertList from './AlertList.vue'
+import { ElTooltip } from 'element-plus'
-import { rgbToHex } from '@/utils/color'
+import type { EChartsOption } from 'echarts'
-import * as echarts from 'echarts'
+
-import { getDrillSum, getExamSum, getZBDangerSum } from '../report'
+type TabType = '安全类' | '工程类'
-type TabType = '高危作业' | '安全培训考试' | '应急预案及演练'
+type StatusKey = 'notStarted' | 'inProgress' | 'done' | 'voided'
-const activeTab = ref<TabType>('高危作业')
+
-const emit = defineEmits<{
+interface ChartItem {
-  tabChange: [tab: TabType]
+  title: string
-}>()
+  total: number
-interface AlertItem {
+  status: Record<StatusKey, number>
-  description: string
-  alarm_level_code: string
-  alarm_status: string
-  alarm_biz_id: string
-}
-interface Props {
-  riskStatistics?: any
-  dangerDetail?: AlertItem[]
-  park?: string
-  campus_id?: string
 }
 
-const tableTitle = [
+const statusList: { key: StatusKey; label: string; color: string }[] = [
-  {
+  { key: 'notStarted', label: '未开始', color: '#2a59ff' },
-    name: '园区名称',
+  { key: 'inProgress', label: '进行中', color: '#ff8a00' },
-    key: 'campus_name'
+  { key: 'done', label: '已完成', color: '#1bd9ff' },
-  },
+  { key: 'voided', label: '已作废', color: '#9fa0a6' }
-  {
-    name: '累计培训次数',
-    key: 'examtimes'
-  },
-  {
-    name: '参与总人次',
-    key: 'exampeoplenum'
-  },
-  {
-    name: '累计培训时长',
-    key: 'examduration'
-  },
-  {
-    name: '平均通过率',
-    key: 'exampassrate'
-  }
 ]
 
-// 图表引用
+const defaultChart: ChartItem[] = [
-const barChartOption = ref({
+  { title: '每日检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
-  legend: {
+  { title: '每月检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
-    top: '10%',
+  { title: '每年检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
-    right: '12%',
+  { title: '每日检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
-    orient: 'vertical' as const,
+  { title: '每月检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
-    textStyle: {
+  { title: '每年检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } }
-      color: '#ffffff',
+]
-      fontSize: '11px'
+
+const tabCharts = ref<Record<TabType, ChartItem[]>>({
+  安全类: [...defaultChart],
+  工程类: [...defaultChart]
+})
+
+const props = defineProps<{
+  riskStatistics?: Record<TabType, ChartItem[]>
+}>()
+
+const activeTab = ref<TabType>('安全类')
+const emit = defineEmits<{ tabChange: [tab: TabType] }>()
+
+// 监听props变化，更新图表数据
+watch(() => props.riskStatistics, (newData) => {
+  if (newData) {
+    tabCharts.value = {
+      安全类: newData['安全类'] ? JSON.parse(JSON.stringify(newData['安全类'])) : [...defaultChart],
+      工程类: newData['工程类'] ? JSON.parse(JSON.stringify(newData['工程类'])) : [...defaultChart]
     }
-  },
+  }
-  grid: {
+}, { deep: true, immediate: true })
-    left: '5%',
+
-    right: '30%',
+const currentCharts = computed(() => tabCharts.value[activeTab.value])
-    top: '10%',
+
-    bottom: '15%'
+const buildOption = (item: ChartItem): EChartsOption => ({
-  },
+  backgroundColor: 'transparent',
-  xAxis: {
+  tooltip: { show: false },
-    type: 'category' as const,
-    data: [],
-    axisLabel: {
-      color: '#ffffff',
-      fontSize: 10
-    },
-    axisLine: {
-      lineStyle: { color: '#334155' }
-    }
-  },
-  yAxis: {
-    type: 'value' as const,
-    axisLabel: {
-      color: '#ffffff',
-      fontSize: 10
-    },
-    axisLine: {
-      lineStyle: { color: '#334155' }
-    },
-    splitLine: {
-      lineStyle: { color: '#334155' }
-    }
-  },
   series: [
     {
-      name: '未开始数量',
+      type: 'pie' as const,
-      type: 'bar' as const,
+      radius: ['40%', '60%'],
-      data: [],
+      center: ['50%', '50%'],
-      itemStyle: { color: rgbToHex(99, 196, 251) },
+      startAngle: 90,
-      barWidth: '8%',
+      avoidLabelOverlap: false,
-      label: {
+      label: { show: false },
-        show: true,
+      labelLine: { show: false },
-        position: 'top' as const,
+      data: [
-        color: '#ffffff',
+        { value: item.status.notStarted, name: '未开始', itemStyle: { color: '#2a59ff' }, label: { show: false } },
-        fontSize: 12,
+        { value: item.status.inProgress, name: '进行中', itemStyle: { color: '#ff8a00' }, label: { show: false } },
-        fontWeight: 'bold' as const,
+        { value: item.status.done, name: '已完成', itemStyle: { color: '#1bd9ff' }, label: { show: false } },
-        formatter: '{c}'
+        { value: item.status.voided, name: '已作废', itemStyle: { color: '#9fa0a6' }, label: { show: false } }
-      }
+      ],
-    },
+      emphasis: { scale: true, scaleSize: 4 }
-    {
-      name: '进行中数量',
-      type: 'bar' as const,
-      data: [],
-      itemStyle: { color: rgbToHex(251, 246, 85) },
-      barWidth: '8%',
-      label: {
-        show: true,
-        position: 'top' as const,
-        color: '#ffffff',
-        fontSize: 12,
-        fontWeight: 'bold' as const,
-        formatter: '{c}'
-      }
-    },
-    {
-      name: '已完成数量',
-      type: 'bar' as const,
-      data: [],
-      itemStyle: { color: rgbToHex(200, 69, 237) },
-      barWidth: '8%',
-      label: {
-        show: true,
-        position: 'top' as const,
-        color: '#ffffff',
-        fontSize: 12,
-        fontWeight: 'bold' as const,
-        formatter: '{c}'
-      }
     }
   ]
 })
 
-const dataList = ref<AlertItem[]>([
+const handleTabClick = (tab: TabType) => {
-])
+  if (activeTab.value === tab) return
-
-const props = defineProps<Props>()
-
-// 图表引用
-const riskChart = ref<HTMLElement | null>(null)
-let chartInstance: echarts.ECharts | null = null
-
-
-
-// 初始化饼图
-const initPieChart = async () => {
-  if (!riskChart.value) return
-
-  chartInstance = echarts.init(riskChart.value)
-
-  const colors = [
-    [
-      { offset: 0, color: '#ffb74d' },
-      { offset: 0.3, color: '#ff9800' },
-      { offset: 0.7, color: '#f57c00' },
-      { offset: 1, color: '#e65100' }
-    ],
-    [
-      { offset: 0, color: '#64b5f6' },
-      { offset: 0.3, color: '#42a5f5' },
-      { offset: 0.7, color: '#2196f3' },
-      { offset: 1, color: '#1976d2' }
-    ],
-    [
-      { offset: 0, color: '#81c784' },
-      { offset: 0.3, color: '#66bb6a' },
-      { offset: 0.7, color: '#4caf50' },
-      { offset: 1, color: '#388e3c' }
-    ]
-
-  ]
-
-  const res = await getDrillSum(props.campus_id || '')
-
-  const option = {
-    backgroundColor: 'transparent',
-    tooltip: {
-      trigger: 'item',
-      backgroundColor: 'rgba(0, 0, 0, 0.8)',
-      borderColor: '#4a9eff',
-      borderWidth: 1,
-      textStyle: {
-        color: '#ffffff'
-      },
-      formatter: function (params: any) {
-        return `${params.data.name}<br/>完成率: ${params.data.value}%`
-      }
-    },
-    series: [
-      {
-        name: '园区演练完成率',
-        type: 'pie',
-        radius: ['30%', '70%'],
-        center: ['50%', '50%'],
-        data: res.records.map((item, index) => (
-          {
-            value: item.rate,
-            name: item.campus_name,
-            itemStyle: {
-              color: {
-                type: 'radial',
-                x: 0.5,
-                y: 0.5,
-                r: 0.8,
-                colorStops: colors[index % 3]
-              }
-            }
-          }
-        ))
-        // [
-        //   {
-        //     value: 100,
-        //     name: '西安创新院',
-        //     itemStyle: {
-        //       color: {
-        //         type: 'radial',
-        //         x: 0.5,
-        //         y: 0.5,
-        //         r: 0.8,
-        //         colorStops: [
-        //           { offset: 0, color: '#ffb74d' },
-        //           { offset: 0.3, color: '#ff9800' },
-        //           { offset: 0.7, color: '#f57c00' },
-        //           { offset: 1, color: '#e65100' }
-        //         ]
-        //       }
-        //     }
-        //   },
-        //   {
-        //     value: 63,
-        //     name: '北京横毅大厦',
-        //     itemStyle: {
-        //       color: {
-        //         type: 'radial',
-        //         x: 0.5,
-        //         y: 0.5,
-        //         r: 0.8,
-        //         colorStops: [
-        //           { offset: 0, color: '#64b5f6' },
-        //           { offset: 0.3, color: '#42a5f5' },
-        //           { offset: 0.7, color: '#2196f3' },
-        //           { offset: 1, color: '#1976d2' }
-        //         ]
-        //       }
-        //     }
-        //   },
-        //   {
-        //     value: 60,
-        //     name: '重庆产业大厦',
-        //     itemStyle: {
-        //       color: {
-        //         type: 'radial',
-        //         x: 0.5,
-        //         y: 0.5,
-        //         r: 0.8,
-        //         colorStops: [
-        //           { offset: 0, color: '#81c784' },
-        //           { offset: 0.3, color: '#66bb6a' },
-        //           { offset: 0.7, color: '#4caf50' },
-        //           { offset: 1, color: '#388e3c' }
-        //         ]
-        //       }
-        //     }
-        //   }
-        // ]
-        ,
-        label: {
-          show: true,
-          position: 'inside',
-          formatter: function (params: any) {
-            return `${params.data.name}\n${params.data.value}%`
-          },
-          fontSize: 12,
-          color: '#ffffff',
-          fontWeight: 'bold',
-          textShadowColor: 'rgba(0, 0, 0, 0.8)',
-          textShadowBlur: 2
-        },
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.5)'
-          }
-        }
-      }
-    ]
-  }
-
-  chartInstance.setOption(option)
-}
-
-// 销毁图表
-const destroyChart = () => {
-  if (chartInstance) {
-    chartInstance.dispose()
-    chartInstance = null
-  }
-}
-
-const initBarChart = async () => {
-  try {
-    const res = await getZBDangerSum(props.campus_id || '')
-
-    // 更新图表数据
-    const newOption = {
-      ...barChartOption.value,
-      xAxis: {
-        ...barChartOption.value.xAxis,
-        data: res.records.map((item: any) => item.campus_name)
-      },
-      series: [
-        {
-          ...barChartOption.value.series[0],
-          data: res.records.map((item: any) => item.ywc)
-        },
-        {
-          ...barChartOption.value.series[1],
-          data: res.records.map((item: any) => item.jxz)
-        },
-        {
-          ...barChartOption.value.series[2],
-          data: res.records.map((item: any) => item.wks)
-        }
-      ]
-    }
-
-    barChartOption.value = newOption
-
-    console.log('Bar chart data updated:', {
-      xAxis: barChartOption.value.xAxis.data,
-      series: barChartOption.value.series.map(s => ({ name: s.name, data: s.data }))
-    })
-  } catch (error) {
-    console.error('Failed to load bar chart data:', error)
-  }
-}
-
-// 监听标签页切换
-watchEffect(async () => {
-  if (activeTab.value === '应急预案及演练') {
-    initPieChart()
-  } else {
-    destroyChart()
-  }
-
-  if (activeTab.value === '高危作业') {
-    initBarChart()
-  }
-
-  if (activeTab.value === '安全培训考试') {
-    const res = await getExamSum(props.campus_id || '')
-
-    dataList.value = res.records
-  }
-})
-
-// 监听数据变化，更新图表
-watch(() => props.riskStatistics, (newVal) => {
-  console.log('riskStatistics changed:', { newVal })
-  if (newVal) {
-    refreshCharts(newVal)
-  }
-}, { deep: true })
-
-// 监听数据变化，更新图表
-watch(() => props.dangerDetail, (newVal) => {
-  console.log('dangerDetail changed:', { newVal })
-
-}, { deep: true })
-
-// 监听数据变化，更新图表
-watch(() => props.dangerDetail, (newVal) => {
-  console.log('dangerDetail changed:', { newVal })
-  if (newVal) {
-    dataList.value = newVal
-  }
-}, { deep: true })
-
-// 更新图表数据
-const refreshCharts = (riskStatistics: any): void => {
-  if (!riskStatistics || !Array.isArray(riskStatistics)) {
-    console.warn('riskStatistics is undefined, null, or not an array')
-    return
-  }
-
-  // 计算各园区的完成率
-  const chartData = riskStatistics.map((item: any, index: number) => {
-    const finishCount = Number(item.finishCount) || 0
-    const participateCount = Number(item.participateCount) || 0
-    const completionRate = participateCount > 0 ? Math.round((finishCount / participateCount) * 100) : 0
-
-    // 为每个园区分配不同的颜色
-    const colors = ['#ef4444', '#10b981', '#eab308', '#3b82f6', '#8b5cf6', '#f59e0b', '#06b6d4', '#84cc16']
-    const color = colors[index % colors.length]
-
-    return {
-      value: completionRate,
-      name: item.csmpus_name || `园区${index + 1}`,
-      finishCount: finishCount,
-      participateCount: participateCount,
-      itemStyle: { color: color }
-    }
-  })
-
-  console.log("Updated chart data:", chartData)
-}
-
-const handleTabClick = async (tab: TabType) => {
   activeTab.value = tab
   emit('tabChange', tab)
 }
-
-onMounted(() => {
-  // 如果没有传入数据，设置默认数据
-  if (!props.riskStatistics) {
-    const defaultData = [
-      {
-        csmpus_name: "雄安新区总部",
-        finishCount: "234",
-        participateCount: "300"
-      },
-      {
-        csmpus_name: "雄安二区总部",
-        finishCount: "180",
-        participateCount: "250"
-      },
-      {
-        csmpus_name: "雄安三区总部",
-        finishCount: "156",
-        participateCount: "200"
-      }
-    ]
-    refreshCharts(defaultData)
-  }
-
-  // 如果当前是高危作业标签页，初始化柱状图
-  if (activeTab.value === '高危作业') {
-    nextTick(() => {
-      initBarChart()
-    })
-  }
-})
-
-// 组件卸载时销毁图表
-onUnmounted(() => {
-  destroyChart()
-})
 </script>
 
 <style scoped lang="scss">
@@ -528,64 +173,212 @@ onUnmounted(() => {
     color: #94a3b8;
   }
 
-  .bottom-card-risk {
+  .title-line {
+    margin: 8px 0;
+  }
+
+  .chart-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 12px;
+    padding: 0 12px 12px;
+    width: 66%;
+    // margin: 0 auto;
+  }
+
+  .chart-card {
+    background: rgba(18, 34, 63, 0.65);
+    border: 1px solid rgba(58, 112, 179, 0.55);
+    border-radius: 10px;
+    padding: 5px;
     display: flex;
     flex-direction: column;
-
+    align-items: center;
-    .bottom-card-title {
+    box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
-      display: flex;
-      margin-top: 5px;
-      margin-left: -15%;
-      flex-direction: column;
-      align-items: center;
-    }
   }
 
-  .donut-chart-with-labels {
+  .chart-title {
-    width: 30vw;
+    width: 100%;
-    height: 30vh;
+    color: #ffffff;
-    margin-left: 2vw;
+    font-size: 13px;
+    text-align: center;
+    margin-bottom: 6px;
   }
 
-  .risk-chart {
+  .chart-content {
-    width: 30vw;
+    display: flex;
-    height: 30vh;
+    align-items: center;
-    margin-left: 2vw;
+    // justify-content: flex-start;
+    // gap: 10px;
+    width: 100%;
+  }
+
+  .chart-wrapper {
+    position: relative;
+    flex: 0 0 90px;
+    width: 90px;
+    height: 90px;
+  }
+
+  .donut-chart {
+    width: 100%;
+    height: 100% !important; // 强制覆盖 EChart 默认高度，避免过高
+  }
+
+  .chart-center {
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+    text-align: center;
+    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
+  }
+
+  .legend {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-top: 0;
+    width: auto;
+  }
+
+  .legend-label-row {
+    flex-wrap: nowrap;
+    gap: 10px;
+    justify-content: flex-start;
+    align-items: center;
+    color: #cbd5e1;
+    font-size: 12px;
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+  }
+
+  .legend-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    // display: inline-block;
+  }
+
+  .legend-label {
+    color: #cbd5e1;
+    white-space: nowrap;
+  }
+
+  .legend-value-row {
+    display: none;
+    gap: 20px;
+    color: #ffffff;
+    font-size: 14px;
+    font-weight: 600;
+    justify-content: flex-start;
+  }
+
+  .legend-value {
+    min-width: 14px;
+    text-align: center;
+  }
+}
+
+@media (width <=1280px) {
+  .left-bottom .legend-label-row {
+    gap: 8px;
+  }
+
+  .left-bottom .legend-label {
+    display: none;
+  }
+
+  .left-bottom .legend-item {
+    gap: 4px;
+  }
+
+  .left-bottom .chart-wrapper {
+    flex-basis: 80px;
+    width: 80px;
+    height: 80px;
+  }
+}
+
+@media (width <=3000px) {
+  .left-bottom .legend-label {
+    display: none;
+  }
+}
+
+@media (width >3000px) {
+  .left-bottom .chart-content {
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .left-bottom .legend {
+    align-items: center;
+    width: 100%;
+  }
+
+  .left-bottom .legend-label {
+    display: inline;
+  }
+
+  .left-bottom .legend-label-row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 18px;
+  }
+
+  .left-bottom .legend-item {
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+  }
+
+  .left-bottom .legend-label-row .legend-value {
+    display: block;
+  }
+
+  .left-bottom .legend-value-row {
+    display: none;
+  }
+
+  .left-bottom .chart-wrapper {
+    flex-basis: 110px;
+    width: 110px;
+    height: 110px;
   }
 }
 
 @media (width <=1024px) {
+  .left-bottom .chart-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 
-  .left-bottom .donut-chart-with-labels,
+  .left-bottom .donut-chart {
-  .left-bottom .risk-chart {
+    height: 80px !important;
-    width: 35vw;
-    height: 35vh;
   }
 }
 
 @media (width <=768px) {
-  .left-bottom {
+  .left-bottom .chart-grid {
-    .tabs .tab {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
-      padding: 1px 8px;
-      font-size: 0.7rem;
-    }
-
-    .donut-chart-with-labels,
-    .risk-chart {
-      width: 40vw;
-      height: 40vh;
-      margin-left: 1vw;
-    }
   }
-}
 
-@media (width <=480px) {
+  .left-bottom .chart-card {
-
+    padding: 5px;
-  .left-bottom .donut-chart-with-labels,
-  .left-bottom .risk-chart {
-    width: 45vw;
-    height: 45vh;
-    margin-left: 0.5vw;
   }
 }
 </style>
+

src/views/screen/mainScreen.vue

@@ -15,52 +15,46 @@
       </div>
     </div>
     <!-- 天气预报 -->
-    <WeatherWarning/>
+    <WeatherWarning />
     <!-- 主内容区 -->
     <div class="content-container">
       <div class="left-wrapper">
-        <OverviewPanel
+        <OverviewPanel :totalCount="dashboardData?.totalCount || 0"
-          :totalCount="dashboardData?.totalCount || 0"
           :formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
-          :externalStaffCount="dashboardData?.externalStaffCount || 0"
+          :externalStaffCount="dashboardData?.externalStaffCount || 0" :visitorCount="dashboardData?.visitorCount || 0"
-          :visitorCount="dashboardData?.visitorCount || 0"
+          :parkStatistics="dashboardData?.parkStatistics" />
-          :parkStatistics="dashboardData?.parkStatistics"/>
+        <RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
-        <RiskStatisticsPanel
+          @tab-change="handleRiskTabChange" :campus_id="query.campus_id" />
-          :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
-          @tab-change="handleRiskTabChange" :campus_id="query.campus_id"/>
       </div>
       <div class="right-wrapper">
-        <HighRiskAlertPanel
+        <HighRiskAlertPanel :alertData="dashboardData?.alertData" :alertDetails="dashboardData?.alertData.details"
-          :alertData="dashboardData?.alertData" :alertDetails="dashboardData?.alertData.details"
+          :sourceIndex="sourceIndex" />
-          :sourceIndex="sourceIndex"/>
+        <TimeoutWorkOrderPanel :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
-        <TimeoutWorkOrderPanel
+          :alertDetails="dashboardData?.timeoutWorkOrders.details" :sourceIndex="sourceIndex" />
-          :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
-          :alertDetails="dashboardData?.timeoutWorkOrders.details" :sourceIndex="sourceIndex"/>
       </div>
-      <HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData"/>
+      <HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData" />
     </div>
   </div>
 
   <!-- 区域选择弹窗 -->
-  <RegionSelector
+  <RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedRegion" :regions="regionOption"
-    v-model="regionSelectorVisible" :modelSelected="selectedRegion" :regions="regionOption"
+    @change="onRegionChange" />
-    @change="onRegionChange"/>
 </template>
 
 <script setup lang="ts">
-import {getTableList, getTableData} from './report'
+import { getTableList, getTableData, getWorkOrderStatistics } from './report'
-import {ref, onMounted, watch, onUnmounted} from 'vue'
+import { ref, onMounted, watch, onUnmounted } from 'vue'
-import {useRouter} from 'vue-router'
+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 {
@@ -73,7 +67,7 @@ interface RegionItem {
   code: string
 }
 
-type TabType = '高危作业' | '安全培训考试' | '安全培训考试'
+type TabType = '安全类' | '工程类'
 
 // 响应式数据
 const currentDateTime = ref<string>('')
@@ -95,7 +89,10 @@ const visitorCount = ref<number>(0)
 // 总体概览-各园区统计
 const parkStatistics = ref<any>()
 // 高危作业/安全培训考试/安全培训考试
-const riskStatistics = ref<any>()
+const riskStatistics = ref<any>({
+  安全类: [],
+  工程类: []
+})
 const dangerDetail = ref<any>()
 
 // 动画相关的状态
@@ -220,7 +217,7 @@ onMounted(async () => {
   timeUpdateTimerId.value = setInterval(updateTime, 1000)
   // 
   try {
-    let {records} = await getTableList(
+    let { records } = await getTableList(
       'park_info_list'
     )
     // records = [
@@ -395,7 +392,7 @@ const loadDashboardData = async (): Promise<void> => {
   } catch (error) {
     console.error('获取超期工单数据失败:', error)
   }
-  handleRiskTabChange('高危作业')
+  handleRiskTabChange('安全类')
   handleHiddenDangerPannelData(query)
   console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
 }
@@ -567,93 +564,82 @@ const handleHiddenDangerPannelData = (query) => {
 const handleRiskTabChange = async (tab: TabType) => {
   console.log('Tab changed to:', tab)
   try {
-    let code = ''
+    let workOrderType = ''
     switch (tab) {
-      case '高危作业':
+      case '安全类':
-        code = 'hazardous_operations'
+        workOrderType = '安全生产'
         break
-      case '安全培训考试':
+      case '工程类':
-        code = 'safety_assessment'
+        workOrderType = '物业服务-工程'
-        break
-      case '安全培训考试':
-        code = 'security_training'
         break
       default:
-        code = 'hazardous_operations'
+        workOrderType = '安全生产'
     }
 
-    if (code == 'hazardous_operations') {
+    // 同时获取维保任务和巡检任务的数据
-      // 根据不同的tab请求不同的接口
+    const [maintenanceResponse, inspectionResponse] = await Promise.all([
-      getTableList(
+      getWorkOrderStatistics(workOrderType, '维保任务').catch(error => {
-        code,
+        console.error('获取维保任务数据失败:', error)
-        {...query, activeTab: tab}
+        return { records: [] }
-      ).then(response => {
+      }),
-        // 更新风险统计数据 - 传递完整的数组数据用于饼图显示
+      getWorkOrderStatistics(workOrderType, '巡检任务').catch(error => {
-        if (response.records && response.records.length > 0) {
+        console.error('获取巡检任务数据失败:', error)
-          dangerDetail.value = response.records
+        return { records: [] }
-        }
-      }).catch(error => {
-        console.error('获取风险统计数据失败:', error)
-        if (isFirstLoad.value) {
-          // dangerDetail.value = [
-          //   {
-          //     description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
-          //     alarm_level_code: 'general',
-          //     alarm_status: '已关闭',
-          //     alarm_biz_id: '20250827164305283937'
-          //   },
-          //   {
-          //     description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
-          //     alarm_level_code: 'general',
-          //     alarm_status: '已关闭',
-          //     alarm_biz_id: '20250827164305283937'
-          //   }, {
-          //     description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
-          //     alarm_level_code: 'general',
-          //     alarm_status: '已关闭',
-          //     alarm_biz_id: '20250827164305283937'
-          //   }, {
-          //     description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
-          //     alarm_level_code: 'general',
-          //     alarm_status: '已关闭',
-          //     alarm_biz_id: '20250827164305283937'
-          //   }, {
-          //     description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
-          //     alarm_level_code: 'general',
-          //     alarm_status: '已关闭',
-          //     alarm_biz_id: '20250827164305283937'
-          //   }, {
-          //     description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
-          //     alarm_level_code: 'general',
-          //     alarm_status: '已关闭',
-          //     alarm_biz_id: '20250827164305283937'
-          //   }
-          // ]
-        }
-      })
-    } else {
-      // 根据不同的tab请求不同的接口
-      getTableList(
-        code,
-        {...query, activeTab: tab}
-      ).then(response => {
-        // 更新风险统计数据 - 传递完整的数组数据用于饼图显示
-        if (response.records && response.records.length > 0) {
-          riskStatistics.value = response.records
-        } else {
-          // 如果没有数据，设置默认值
-          riskStatistics.value = [
-            {
-              csmpus_name: "雄安新区总部",
-              finishCount: "0",
-              participateCount: "0"
-            }
-          ]
-        }
-      }).catch(error => {
-        console.error('获取风险统计数据失败:', error)
       })
+    ])
+
+    // 周期映射
+    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)
   }
@@ -664,7 +650,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 }
   })
 }
 
@@ -1231,19 +1217,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_center_img.png'),
-      url('@/assets/images/screen/left_bottom_img.png');
+        url('@/assets/images/screen/left_bottom_img.png');
       background-position: top center,
-      left center,
+        left center,
-      bottom center;
+        bottom center;
 
       /* 设置大小，注意中间的背景图应该覆盖整个容器 */
       background-repeat: no-repeat, no-repeat, no-repeat;
 
       /* 设置位置 */
       background-size: 100% 90px,
-      cover,
+        cover,
-      100% 68px;
+        100% 68px;
       flex: 1;
 
       /* 设置重复方式 */
@@ -1405,19 +1391,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_center_img.png'),
-      url('@/assets/images/screen/left_bottom_img.png');
+        url('@/assets/images/screen/left_bottom_img.png');
       background-position: top center,
-      left center,
+        left center,
-      bottom center;
+        bottom center;
 
       /* 设置大小，注意中间的背景图应该覆盖整个容器 */
       background-repeat: no-repeat, no-repeat, no-repeat;
 
       /* 设置位置 */
       background-size: 100% 90px,
-      cover,
+        cover,
-      100% 68px;
+        100% 68px;
       flex: 1;
 
       /* 设置重复方式 */

src/views/screen/report/index.ts

@@ -122,4 +122,21 @@ export const batchGetTableList = (reportCodes: string, data?) => {
   return request.post({ url: `/jeelowcode/report-data/batch/list/${reportCodes}`, data })
 }
 
+// 总部安全类 /jeelowcode/report-data/list/report_work_order_statistics
+
+// report_work_order_statistics
+// 场景一：安全类，维保
+// 参数：workOrderType：'安全生产'，taskType：'维保任务'
+// 场景二：安全类，巡检
+// 参数：workOrderType：'安全生产'，taskType：'巡检任务'
+// 场景三：工程类，维保
+// 参数：workOrderType：'物业服务-工程'，taskType：'维保任务'
+// 场景四：工程类，巡检
+// 参数：workOrderType：'物业服务-工程'，taskType：'巡检任务'
+// 统计周期 cycle: day，month，year  对应月日年
+
+export const getWorkOrderStatistics = (workOrderType: string, taskType: string) => {
+  return request.post({ url: '/jeelowcode/report-data/list/report_work_order_statistics', data: {workOrderType, taskType, page: 1, paseSize: 1} })
+}
+