feat: 添加隐患数量选项卡切换功能

hejianhao

2026-04-02 1c8c22f4419ff0be5346c2c186d9c4c5f851057f

feat: 添加隐患数量选项卡切换功能

 screen/src/view/projectHome/index.vue

@@ -336,14 +336,29 @@
        <div class="flex a--center">
          <div @click.stop="toHiddenDanger(2)" class="mid-title">隐患数量</div>
          <div class="flex a--center tab-border">
            <div class="mid-tab">所有隐患数</div>
            <div class="mid-tab active-tab">重大隐患数</div>
            <div
              class="mid-tab"
              :class="{ 'active-tab': dangerCountTab === 'all' }"
              @click.stop="handleDangerTabChange('all')"
            >
              所有隐患数
            </div>
            <div
              class="mid-tab"
              :class="{ 'active-tab': dangerCountTab === 'serious' }"
              @click.stop="handleDangerTabChange('serious')"
            >
              重大隐患数
            </div>
          </div>
        </div>
        <div class="mid-content">
        <div
          class="mid-content"
          :class="{ 'mid-content-switching': dangerCountLoading }"
        >
          <div class="mid-img">
            <div class="number">{{ dangerCount.serious || 0 }}</div>
            <div class="name">所有隐患数</div>
            <div class="name">{{ dangerCountTabName }}</div>
          </div>
          <div class="mid-total">
            <div class="mid-item">
@@ -356,6 +371,7 @@
            </div>
          </div>
        </div>

      </div>
      <div
        v-if="permissionProject.includes('12')"
@@ -605,6 +621,7 @@
  getProjectDetail,
  getProjectDeviceCount,
  getDangerCount,
  getDangerCountAll,
  deviceTypes,
  getProjectPersonInfo,
  getProjectSource,
@@ -612,6 +629,7 @@
  getProjectDangerousTrend,
  getProjectLatestProgress
} from './service.js'

import { transformRiskSourceData } from '@/utils/riskSourceMap.js'
import * as echarts from 'echarts'
export default {
@@ -648,6 +666,13 @@
        rectified: 0,
        unRectified: 0
      }, // 危险源统计
      dangerCountTab: 'serious',
      dangerCountLoading: false,
      dangerCountCache: {
        all: null,
        serious: null
      },

      deviceTypeList: [], // 设备类型列表
      equipment: 0, // 设备数量
      peopleList: [], // 人员列表
@@ -685,7 +710,11 @@
    }
  },
  computed: {
    dangerCountTabName () {
      return this.dangerCountTab === 'all' ? '所有隐患数' : '重大隐患数'
    },
    // 处理风险源数据，添加合并单元格的逻辑

    riskSourceList () {
      if (!this.riskSourceData || this.riskSourceData.length === 0) {
        return []
@@ -1065,8 +1094,51 @@
      console.error('视频加载失败:', e)
      // 可以在这里添加视频加载失败的处理逻辑
    },
    normalizeDangerCount (res) {
      return {
        serious: res && res.serious !== undefined ? res.serious : 0,
        rectified: res && res.rectified !== undefined ? res.rectified : 0,
        unRectified: res && res.unRectified !== undefined
          ? res.unRectified
          : 0
      }
    },
    async loadDangerCount (tab = this.dangerCountTab, force = false) {
      const cacheData = this.dangerCountCache[tab]
      if (!force && cacheData) {
        this.dangerCount = { ...cacheData }
        return
      }

      this.dangerCountLoading = true
      try {
        const requestApi = tab === 'all' ? getDangerCountAll : getDangerCount
        const res = await requestApi(this.projectId)
        const countData = this.normalizeDangerCount(res)
        this.dangerCount = countData
        this.dangerCountCache[tab] = { ...countData }
      } catch (err) {
        console.error(
          `获取${tab === 'all' ? '所有隐患数量' : '重大隐患数量'}失败:`,
          err
        )
        this.dangerCount = this.normalizeDangerCount()
      } finally {
        this.dangerCountLoading = false
      }
    },
    handleDangerTabChange (tab) {
      if (this.dangerCountTab === tab) return
      this.dangerCountTab = tab
      this.loadDangerCount(tab)
    },
    // 获取项目详情
    getDetail () {
      this.dangerCountCache = {
        all: null,
        serious: null
      }

      // 设备类型 - 添加错误处理
      deviceTypes()
        .then((res) => {
@@ -1147,21 +1219,10 @@
          this.legendData = []
        })

      // 隐患数量 - 添加错误处理
      getDangerCount(this.projectId)
        .then((res) => {
          this.dangerCount = res
        })
        .catch((err) => {
          console.error('获取隐患数量失败:', err)
          this.dangerCount = {
            serious: 0,
            rectified: 0,
            unRectified: 0
          }
        })
      this.loadDangerCount(this.dangerCountTab, true)

      // 项目人员信息 - 添加错误处理

      getProjectPersonInfo({ projectId: this.projectId })
        .then((res) => {
          this.peopleList = res || []
@@ -2776,14 +2837,24 @@

    .tab-border {
      border: 1px solid rgba(50, 197, 255, 0.22);
      border-radius: 4px;
      overflow: hidden;
    }

    .mid-tab {
      cursor: pointer;
      user-select: none;
      border-radius: 4px;
      padding: 6px 5px;
      padding: 6px 8px;
      font-weight: 400;
      font-size: 12px;
      color: #ffffff;
      transition: background 0.25s ease, box-shadow 0.25s ease,
        transform 0.25s ease;

      &:hover {
        background: rgba(6, 0, 228, 0.2);
      }
    }

    .active-tab {
@@ -2796,8 +2867,15 @@
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.25s ease, transform 0.25s ease;

      &.mid-content-switching {
        opacity: 0.68;
        transform: translateY(4px);
      }

      .mid-img {

        width: 90px;
        height: 90px;
        margin-right: 20px;

 screen/src/view/projectHome/service.js

@@ -31,13 +31,23 @@
  })
}

// 获取项目隐患数量
// 获取项目重大隐患数量
export const getDangerCount = async (id) => {
  return request(`/project/getProjectHiddenDangerCount/${id}`, {
    method: 'get'
  })
}

// 获取项目所有隐患数量
export const getDangerCountAll = async (id) => {
  return request(`/project/getProjectHiddenDangerCountAll/${id}`, {
    method: 'get'
  })
}

// 获取大屏人员在岗信息


export const getProjectPersonInfo = async (params) => {
  return request(`/project/getProjectPersonInfo`, {
    method: 'get', params