yudao-admin-yiqun/yudao-ui-admin-vue3/src/views/Home/Index.vue

<template>
  <el-row :gutter="24">
    <el-col :span="16">
      <el-card class="box-card" v-loading="auditLoading">
        <template #header>
          <div class="card-header">
            <span>
              <img :src="ywdbIcon" alt="" />
              待办
            </span>
            <!--            <el-button link type="default"-->
            <!--              >查看更多 <el-icon><ArrowRight /></el-icon-->
            <!--            ></el-button>-->
          </div>
        </template>
        <div v-if="showTodoList" class="audit-list">
          <template v-for="todo in todoList" :key="todo.title">
            <div
              v-show="todo.task > 0"
              class="audit-item cursor-pointer"
              @click="() => handleRouteTo(todo)"
            >
              <img :src="todo.iconUrl" alt="" />
              <div>
                <i v-if="typeof todo.task === 'number'">{{ todo.task }}</i>
                <span class="todo-title-row">
                  <span v-if="todo.equipType === 'boiler'" class="equip-tag-boiler">[锅]</span>
                  <span v-if="todo.equipType === 'pipe'" class="equip-tag-pipe">[管]</span>
                  {{ todo.title }}
                </span>
              </div>
            </div>
          </template>
        </div>
        <el-empty v-else description="暂无待办数据" />
      </el-card>
      <el-card class="box-card" v-loading="auditLoading">
        <template #header>
          <div class="card-header">
            <span>
              <img :src="ywdbIcon" alt="" />
              审批
            </span>
            <!--            <el-button link type="default"-->
            <!--              >查看更多 <el-icon><ArrowRight /></el-icon-->
            <!--            ></el-button>-->
          </div>
        </template>
        <div v-if="showAuditList" class="audit-list">
          <template v-for="todo in auditTodoList" :key="todo.title">
            <div
              v-show="todo.task > 0"
              class="audit-item cursor-pointer"
              @click="() => handleRouteTo(todo)"
            >
              <img :src="todo.iconUrl" alt="" />
              <div>
                <i>{{ todo.task }}</i>
                <span class="todo-title-row">
                  <span v-if="todo.equipType === 'boiler'" class="equip-tag-boiler">[锅]</span>
                  <span v-if="todo.equipType === 'pipe'" class="equip-tag-pipe">[管]</span>
                  {{ todo.title }}
                </span>
              </div>
            </div>
          </template>
        </div>
        <el-empty v-else description="暂无审批数据" />
      </el-card>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>
              <img :src="tzIcon" alt="" />
              通知公告
            </span>
            <!--            <el-button v-if="noticeList.length" link type="default" @click="toMoreNotice"-->
            <!--              >查看更多 <el-icon><ArrowRight /></el-icon-->
            <!--            ></el-button>-->
          </div>
        </template>
        <div class="todo-list">
          <template v-if="noticeList.length">
            <div
              class="notice-item"
              v-for="notice in noticeList"
              :key="notice.title"
              @click="
                toPage(
                  '/fwpt/noticeMgn/detail',
                  {
                    id: notice.id
                  },
                  1
                )
              "
            >
              <div class="title ellipsis1" style="min-width: 0">
                <span class="newFlag color-#fff text-12px" v-if="notice.readStatus == 0">NEW</span>
                {{ notice.title }}
              </div>
              <div class="sub-info">
                <span
                  >来自于 <i>{{ msgTypeMap[notice.type] || '未知' }}</i></span
                >
                <span>{{
                  notice.createTime ? dayJs(notice.createTime).format('YYYY-MM-DD HH:mm:ss') : '-'
                }}</span>
              </div>
            </div>
          </template>
          <template v-else>
            <el-empty style="flex: 1" description="暂无公告" />
          </template>
        </div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <div class="risk-alert-wrap">
        <RiskAlertCard
          equip-type="boiler"
          :fetch-my="getBoilerMyAlert"
          :fetch-dept="getBoilerDeptAlert"
        />
        <RiskAlertCard
          equip-type="pipe"
          :fetch-my="getPipeMyAlert"
          :fetch-dept="getPipeDeptAlert"
        />
      </div>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>
              <img :src="kjrkIcon" alt="" />
              快捷入口
            </span>
          </div>
        </template>
        <div class="todo-list quick-access-list">
          <div
            v-for="todo in quickAccessList"
            :key="todo.title"
            class="todo-item quick-access-item cursor-pointer"
            @click="() => handleRouteTo(todo)"
          >
            <img :src="todo.iconUrl" alt="" />
            <div>
              <span>{{ todo.title }}</span>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/store/modules/user'
import { useWatermark } from '@/hooks/web/useWatermark'
import { ArrowRight, List } from '@element-plus/icons-vue'
import {
  getTodoList,
  getAuditTodoList,
  getBoilerMyAlert,
  getBoilerDeptAlert,
  getPipeMyAlert,
  getPipeDeptAlert
} from '@/api/common/home'
import { IndexTodoApi } from '@/api/pressure2/indextodo'
import RiskAlertCard from './components/RiskAlertCard.vue'

import yjIcon from '@/assets/imgs/index_imgs/约检@2x.png'
import jhpqIcon from '@/assets/imgs/index_imgs/计划排期@2x.png'
import jhdtIcon from '@/assets/imgs/index_imgs/计划待调@2x.png'
import zlfpIcon from '@/assets/imgs/index_imgs/资料分配@2x.png'
import zlshIcon from '@/assets/imgs/index_imgs/资料审核@2x.png'
import rwdshIcon from '@/assets/imgs/index_imgs/任务单审核@2x.png'
import rwdzfIcon from '@/assets/imgs/index_imgs/任务单作废@2x.png'
import jljhIcon from '@/assets/imgs/index_imgs/记录校合@2x.png'
import bgspIcon from '@/assets/imgs/index_imgs/报告审批@2x.png'
import jjgqbgIcon from '@/assets/imgs/index_imgs/部门快要过期的报告@2x.png'
import lqapIcon from '@/assets/imgs/index_imgs/临期临安排计划的企业.png'
import ywdbIcon from '@/assets/imgs/index_imgs/业务待办@2x.png'
import fxIcon from '@/assets/imgs/index_imgs/风险@2x.png'
import tzIcon from '@/assets/imgs/index_imgs/通知@2x.png'
import zldjIcon from '@/assets/imgs/index_imgs/资料登记@2x.png'
import qtyjIcon from '@/assets/imgs/index_imgs/前台约检@2x.png'
import shzxIcon from '@/assets/imgs/index_imgs/审核中心@2x.png'
import gdyyIcon from '@/assets/imgs/index_imgs/更多应用@2x.png'
import kjrkIcon from '@/assets/imgs/index_imgs/快捷入口@2x.png'

import { noticeApi } from '@/api/laboratory/noticeService'
import dayJs from 'dayjs'

import { useRouter } from 'vue-router'
const router = useRouter()
const userStore = useUserStore()

const msgTypeMap = {
  1: '系统公告',
  2: '系统消息'
}

// 业务待办列表（锅炉和管道分别显示）
const todoList = ref([
  {
    title: '计划表',
    key: 'boilerScheduleCount',
    equipType: 'boiler',
    iconUrl: zlfpIcon,
    task: 0,
    routerName: 'ScheduleBoiler'
  },
  {
    title: '任务确认',
    key: 'boilerTaskOrderConfirmCount',
    equipType: 'boiler',
    iconUrl: jhpqIcon,
    task: 0,
    routerName: 'BoilerCheckerTaskList',
  },
  {
    title: '检验录入',
    key: 'boilerMyTaskCount',
    equipType: 'boiler',
    iconUrl: jhdtIcon,
    task: 0,
    routerName: 'BoilerMyTask',
  },
  {
    title: '报告编制',
    key: 'boilerPrepareReportCount',
    equipType: 'boiler',
    iconUrl: zlfpIcon,
    task: 0,
    routerName: 'BoilerReportPreparationList'
  },
  {
    title: '计划表',
    key: 'pipeScheduleCount',
    equipType: 'pipe',
    iconUrl: zlfpIcon,
    task: 0,
    routerName: 'SchedulePipe'
  },
  {
    title: '任务确认',
    key: 'pipeTaskOrderConfirmCount',
    equipType: 'pipe',
    iconUrl: jhpqIcon,
    task: 0,
    routerName: 'PipeCheckerTaskList',
  },
  {
    title: '检验录入',
    key: 'pipeMyTaskCount',
    equipType: 'pipe',
    iconUrl: jhdtIcon,
    task: 0,
    routerName: 'PipeMyTask',
  },
  {
    title: '报告编制',
    key: 'pipePrepareReportCount',
    equipType: 'pipe',
    iconUrl: zlfpIcon,
    task: 0,
    routerName: 'PipeReportPreparationList'
  }
])

// 业务审批列表（锅炉和管道分别显示）
const auditLoading = ref(false)
const auditTodoList = ref([
  {
    title: '模板审核',
    key: 'reportTemplateCount',
    iconUrl: bgspIcon,
    task: 0,
    routerName: 'TemplateAudit'
  },

  {
    title: '记录校核',
    key: 'boilerRecheckOrderItemCount',
    equipType: 'boiler',
    iconUrl: jljhIcon,
    task: 0,
    routerName: 'BoilerCheckerRecordCheck'
  },
  {
    title: '上报市局审核',
    key: 'boilerReportCityBureauCount',
    equipType: 'boiler',
    iconUrl: rwdshIcon,
    task: 0,
    routerName: 'appointmentconfirmorderCityBureauListPressure2'
  },
  {
    title: '受理单审核',
    key: 'boilerAcceptOrderCount',
    equipType: 'boiler',
    iconUrl: jljhIcon,
    task: 0,
    routerName: 'AcceptOrderAuditBoiler'
  },
  {
    title: '缴费单待校核',
    key: 'boilerPressureNonTaxCount',
    equipType: 'boiler',
    iconUrl: zlshIcon,
    task: 0,
    routerName: 'PaymentReceiptApprovePressure2'
  },
  {
    title: '任务单修改审核',
    key: 'boilerTaskOrderCount',
    equipType: 'boiler',
    iconUrl: rwdshIcon,
    task: 0,
    routerName: 'TaskOrderReviewBoiler'
  },
  {
    title: '检验意见通知书审核',
    key: 'boilerPressureInspectionOpinionNoticeCount',
    equipType: 'boiler',
    iconUrl: jljhIcon,
    task: 0,
    routerName: 'AuditInspectionCommentsNoticeBoiler'
  },
  {
    title: '检验方案审核',
    key: 'boilerPressureInspectionSchemeCount',
    equipType: 'boiler',
    iconUrl: zlshIcon,
    task: 0,
    routerName: 'InspectionPlanAuditBoiler'
  },
  {
    title: '操作指导书审核',
    key: 'boilerPressureWorkingInstructionCount',
    equipType: 'boiler',
    iconUrl: rwdshIcon,
    task: 0,
    routerName: 'WorkInstructionAuditBoiler'
  },
  // OA流程：锅炉审核/审批
  { title: '锅炉审核', key: 'boilerCheckCount', equipType: 'boiler', iconUrl: bgspIcon, task: 0, routerPath: '/gljy/report-check-boiler', oaType: true },
  { title: '锅炉审批', key: 'boilerRatifyCount', equipType: 'boiler', iconUrl: bgspIcon, task: 0, routerPath: '/gljy/report-ratify-boiler', oaType: true },

  {
    title: '记录校核',
    key: 'pipeRecheckOrderItemCount',
    equipType: 'pipe',
    iconUrl: jljhIcon,
    task: 0,
    routerName: 'PipeCheckerRecordCheck'
  },
  {
    title: '上报市局审核',
    key: 'pipeReportCityBureauCount',
    equipType: 'pipe',
    iconUrl: rwdshIcon,
    task: 0,
    routerName: 'appointmentconfirmorderCityBureauListPressure2'
  },
  {
    title: '受理单审核',
    key: 'pipeAcceptOrderCount',
    equipType: 'pipe',
    iconUrl: jljhIcon,
    task: 0,
    routerName: 'AcceptOrderAuditPipe'
  },
  {
    title: '缴费单待校核',
    key: 'pipePressureNonTaxCount',
    equipType: 'pipe',
    iconUrl: zlshIcon,
    task: 0,
    routerName: 'PaymentReceiptApprovePressure2'
  },
  {
    title: '任务单修改审核',
    key: 'pipeTaskOrderCount',
    equipType: 'pipe',
    iconUrl: rwdshIcon,
    task: 0,
    routerName: 'TaskOrderReviewPipe'
  },
  {
    title: '检验意见通知书审核',
    key: 'pipePressureInspectionOpinionNoticeCount',
    equipType: 'pipe',
    iconUrl: jljhIcon,
    task: 0,
    routerName: 'AuditInspectionCommentsNoticePipe'
  },
  {
    title: '检验方案审核',
    key: 'pipePressureInspectionSchemeCount',
    equipType: 'pipe',
    iconUrl: zlshIcon,
    task: 0,
    routerName: 'InspectionPlanAuditPipe'
  },
  {
    title: '操作指导书审核',
    key: 'pipePressureWorkingInstructionCount',
    equipType: 'pipe',
    iconUrl: rwdshIcon,
    task: 0,
    routerName: 'WorkInstructionAuditPipe'
  },
  // OA流程：管道审核/审批
  { title: '管道审核', key: 'pipeCheckCount', equipType: 'pipe', iconUrl: bgspIcon, task: 0, routerPath: '/gdjy/report-check-pipe', oaType: true },
  { title: '管道审批', key: 'pipeRatifyCount', equipType: 'pipe', iconUrl: bgspIcon, task: 0, routerPath: '/gdjy/report-ratify-pipe', oaType: true },
])

const showAuditList = computed(() => {
  return auditTodoList.value.some((item: any) => item.task > 0)
})

const showTodoList = computed(() => {
  return todoList.value.some((item: any) => item.task > 0)
})

// 风险预警列表
const riskTodoList = ref([
  {
    title: '部门快要过期的报告',
    iconUrl: jjgqbgIcon,
    task: 0
  },
  {
    title: '临期临安排计划的企业',
    iconUrl: lqapIcon,
    task: 0
  }
])

// 快捷入口
const quickAccessList = ref([
  {
    title: '锅炉档案',
    iconUrl: zldjIcon,
    routerUrl: '',
    routerName: 'EquipBoiler'
  },
  {
    title: '管道档案',
    iconUrl: shzxIcon,
    routerUrl: '',
    routerName: 'PipeEquipment'
  },
  {
    title: '前台约检',
    iconUrl: qtyjIcon,
    routerUrl: '',
    routerName: 'NewPressurePlan'
  },
  {
    title: '更多应用',
    iconUrl: gdyyIcon,
    routerUrl: ''
  }
])

const handleRouteTo = (item: any) => {
  const { id } = userStore.getUser

  // 支持直接路径跳转（OA审批卡片等）
  if (item.routerPath) {
    router.push({ path: item.routerPath })
    return
  }

  if (item.routerName) {
    // 检查路由是否存在（无菜单权限时路由不会被注册）
    const routeExists = router.getRoutes().some(r => r.name === item.routerName)
    if (!routeExists) {
      ElMessage.warning('暂无权限访问该页面')
      return
    }

    // 特殊处理任务单跳转：默认带上 inspectorIds 和 taskStatusList 参数
    const query: any = {
      searchUserId: id,
      ...(item.routerQuery || {})
    }

    router.push({
      name: item.routerName,
      query
    })
  }
}

// 获取首页待办/审核统计数据（新接口：压力2 index-todo 表，锅炉管道分别展示）
const fetchAllCounts = async () => {
  auditLoading.value = true
  try {
    const result = await IndexTodoApi.getTodoCount()
    // 直接映射 API 返回字段到待办/审核列表的 key
    todoList.value = todoList.value.map((item: any) => {
      if (result[item.key] !== undefined) {
        item.task = result[item.key]
      }
      return item
    })
    auditTodoList.value = auditTodoList.value.map((item: any) => {
      // OA类型的卡片（锅炉/管道审核审批）使用独立接口加载数据，此处跳过
      if (item.oaType) return item
      if (result[item.key] !== undefined) {
        item.task = result[item.key]
      }
      return item
    })
  } finally {
    auditLoading.value = false
  }
}

// 获取OA待办中锅炉/管道审核、审批数量（独立接口，不阻塞首页主查询）
const fetchOATodoCount = async () => {
  try {
    const result = await IndexTodoApi.getOATodoCount()
    auditTodoList.value = auditTodoList.value.map((item: any) => {
      if (item.oaType && result[item.key] !== undefined) {
        item.task = result[item.key]
      }
      return item
    })
  } catch (err) {
    console.error('获取OA待办统计失败', err)
  }
}

// 旧逻辑保留（注释）
// const fetchTodoList = ...
// const fetchAuditTodoList = ...

// 通知公告
const noticeList = ref<any>([])

/**
 * 查询公告列表（前5条）
 */
const selectNoticeList = async () => {
  try {
    const res = await noticeApi.getNoticeList({
      pageNo: 1,
      pageSize: 5
    })
    let { list = [] } = res
    noticeList.value = list
  } catch (err) {}
}

/**
 * 跳转页面
 * @param path 跳转路径
 * @param query 跳转参数
 * @param type 跳转类型 1 点击公告进行阅读功能  2 普通跳转
 */
const toPage = async (path = '', query: Record<string, any> = {}, type = 2) => {
  if (!path) {
    ElMessage.warning('暂无配置跳转路径')
    return
  }

  try {
    if (type === 1) {
      const { id } = query
      if (id) {
        await noticeApi.readNotice({ laboratoryAnnouncementId: id, readStatus: 1 })
      }
    }

    await router.push({
      path,
      query
    })
  } catch (error) {
    console.error('页面跳转失败:', error)
    ElMessage.error('页面跳转失败')
  }
}

/**
 * 去往查看更多公告页面
 */
const toMoreNotice = () => {
  if (!noticeList.value.length) {
    ElMessage.warning('暂无更多公告可查看')
    return
  }
  router.push({
    path: '/laboratory/allNotice'
  })
}

// fetchTodoList()
// fetchAuditTodoList()
fetchAllCounts()
fetchOATodoCount()
selectNoticeList()
</script>

<style lang="scss" scoped>
.newFlag {
  background: linear-gradient(270deg, #ff6341 0%, #ff3618 100%);
  border-radius: 4px 0px 4px 0px;
  line-height: 22px;
  padding: 2px 6px;
  margin-right: 8px;
}

.ellipsis1 {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.box-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0px 2px 14px 0px rgba(43, 99, 255, 0.1);
  padding: 17px 22px 24px;
  :deep(.el-card__header) {
    padding: 0 0 8px 0;
  }
  :deep(.el-card__body) {
    padding: 0;
    padding-top: 16px;
    .todo-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
      gap: 16px;
      .todo-item {
        display: flex;
        align-items: flex-end;
        flex: 1 0 calc(25% - 16px);
        padding: 15px 13px 11px;
        background: rgba(73, 120, 246, 0.05);
        border-radius: 4px;
        img {
          width: 54px;
          height: 54px;
        }
        div {
          padding-left: 9px;
          padding-bottom: 5px;
          i,
          span {
            display: block;
            font-style: initial;
          }
          i {
            font-family: Arial, Arial;
            color: #4978f6;
            font-size: 20px;
          }
          span {
            font-weight: 600;
            font-size: 14px;
            color: #41475c;
            line-height: 20px;
          }
        }
        &:nth-child(5) {
          flex: 0 0 calc(25% - 12px);
        }
        &:last-child {
          flex-grow: 1;
          max-width: 100%;
          margin-right: 0;
        }
        &:hover {
          transform: translateY(-3px); // 轻微上浮效果
          box-shadow: 0 4px 12px rgba(73, 120, 246, 0.15); // 添加阴影
          background: rgba(73, 120, 246, 0.1); // 背景色加深

          img {
            transform: scale(1.05); // 图片轻微放大
          }

          span {
            color: #2c64ff; // 文字颜色变化
          }
        }
      }
      // .task-todo-item:last-child {
      //   justify-content: center;
      //   align-items: center;
      //   div {
      //     display: flex;
      //     align-items: center;
      //     span {
      //       color: #4978f6;
      //     }
      //   }
      // }

      .risk-todo-item {
        position: relative;
        height: 110px;
        align-items: center;
        padding-left: 24px;
        box-sizing: border-box;
        img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
        div {
          position: relative;
          z-index: 2;
          padding: 0;
          span {
            margin-bottom: 8px;
            font-size: 18px;
            color: #41475c;
            line-height: 28px;
            font-weight: 600;
          }
          i {
            font-size: 20px;
            color: #e0534e;
            line-height: 28px;
            font-weight: 600;
          }
        }
      }

      .quick-access-item {
        transition: all 0.3s ease;
        flex: 1 0 calc(50% - 16px);
        flex-direction: column;
        align-items: flex-start;

        &:hover {
          transform: translateY(-3px); // 轻微上浮效果
          box-shadow: 0 4px 12px rgba(73, 120, 246, 0.15); // 添加阴影
          background: rgba(73, 120, 246, 0.1); // 背景色加深

          img {
            transform: scale(1.05); // 图片轻微放大
          }

          span {
            color: #2c64ff; // 文字颜色变化
          }
        }

        span {
          transition: color 0.3s ease; // 文字颜色过渡
        }

        img {
          width: auto;
          height: 44px;
          object-fit: cover;
          transition: transform 0.3s ease; // 图片过渡效果
        }
        div {
          padding: 0;
          padding-top: 13px;
        }
      }
      .notice-item {
        padding: 12px;
        background: rgba(73, 120, 246, 0.05);
        border-radius: 4px;
        width: 100%;
        cursor: pointer;
        &:hover {
          background: rgba(73, 120, 246, 0.1); // 悬停时背景色加深
          transform: translateY(-2px); // 轻微上浮效果
          box-shadow: 0 2px 8px rgba(73, 120, 246, 0.1); // 添加阴影

          .title {
            color: #2c64ff; // 标题颜色变化
          }

          .sub-info {
            i {
              color: #4978f6; // 来源文字颜色变化
            }
          }
        }
        .title {
          font-family:
            PingFangSC,
            PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
          line-height: 22px;
          text-align: left;
          font-style: normal;
        }
        .sub-info {
          display: flex;
          justify-content: space-between;
          margin-top: 12px;
          font-size: 12px;
          color: rgba(0, 0, 0, 0.5);
          i {
            font-style: normal;
            color: #2c64ff;
          }
        }
      }
    }
    .audit-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      width: 100%;
      gap: 16px;
      .audit-item {
        display: flex;
        align-items: flex-end;
        padding: 15px 13px 11px;
        background: rgba(73, 120, 246, 0.05);
        border-radius: 4px;
        img {
          width: 54px;
          height: 54px;
        }
        div {
          padding-left: 9px;
          padding-bottom: 5px;
          i,
          span {
            display: block;
            font-style: initial;
          }
          i {
            font-family: Arial, Arial;
            color: #4978f6;
            font-size: 20px;
          }
          span {
            font-weight: 600;
            font-size: 14px;
            color: #41475c;
            line-height: 20px;
          }
        }
        &:hover {
          transform: translateY(-3px); // 轻微上浮效果
          box-shadow: 0 4px 12px rgba(73, 120, 246, 0.15); // 添加阴影
          background: rgba(73, 120, 246, 0.1); // 背景色加深

          img {
            transform: scale(1.05); // 图片轻微放大
          }

          span {
            color: #2c64ff; // 文字颜色变化
          }
        }
      }
      .task-todo-item:last-child {
        justify-content: center;
        align-items: center;
        div {
          display: flex;
          align-items: center;
          span {
            color: #4978f6;
          }
        }
      }

      .risk-todo-item {
        position: relative;
        height: 110px;
        align-items: center;
        padding-left: 24px;
        box-sizing: border-box;
        img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
        div {
          position: relative;
          z-index: 2;
          padding: 0;
          span {
            margin-bottom: 8px;
            font-size: 18px;
            color: #41475c;
            line-height: 28px;
            font-weight: 600;
          }
          i {
            font-size: 20px;
            color: #e0534e;
            line-height: 28px;
            font-weight: 600;
          }
        }
      }

      .quick-access-item {
        transition: all 0.3s ease;
        flex: 1 0 calc(50% - 16px);
        flex-direction: column;
        align-items: flex-start;

        &:hover {
          transform: translateY(-3px); // 轻微上浮效果
          box-shadow: 0 4px 12px rgba(73, 120, 246, 0.15); // 添加阴影
          background: rgba(73, 120, 246, 0.1); // 背景色加深

          img {
            transform: scale(1.05); // 图片轻微放大
          }

          span {
            color: #2c64ff; // 文字颜色变化
          }
        }

        span {
          transition: color 0.3s ease; // 文字颜色过渡
        }

        img {
          width: auto;
          height: 44px;
          object-fit: cover;
          transition: transform 0.3s ease; // 图片过渡效果
        }
        div {
          padding: 0;
          padding-top: 13px;
        }
      }
      .notice-item {
        padding: 12px;
        background: rgba(73, 120, 246, 0.05);
        border-radius: 4px;
        width: 100%;
        cursor: pointer;
        &:hover {
          background: rgba(73, 120, 246, 0.1); // 悬停时背景色加深
          transform: translateY(-2px); // 轻微上浮效果
          box-shadow: 0 2px 8px rgba(73, 120, 246, 0.1); // 添加阴影

          .title {
            color: #2c64ff; // 标题颜色变化
          }

          .sub-info {
            i {
              color: #4978f6; // 来源文字颜色变化
            }
          }
        }
        .title {
          font-family:
            PingFangSC,
            PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
          line-height: 22px;
          text-align: left;
          font-style: normal;
        }
        .sub-info {
          display: flex;
          justify-content: space-between;
          margin-top: 12px;
          font-size: 12px;
          color: rgba(0, 0, 0, 0.5);
          i {
            font-style: normal;
            color: #2c64ff;
          }
        }
      }
    }
  }
}
.card-header {
  display: flex;
  justify-content: space-between;
  span {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    img {
      width: 24px;
      height: 24px;
      margin-right: 4px;
    }
    :deep(.el-button) {
      font-size: 14px;
    }
  }
}
.todo-title-row {
  display: flex !important;
  align-items: center;
  gap: 4px;
}
.equip-tag-boiler {
  color: #f56c6c !important;
}
.equip-tag-pipe {
  color: #67c23a !important;
}
.risk-alert-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}
</style>