导出列参数

- 将'安全类'和'工程类'统一改为'安全类事项'和'工程类事项'
- 更新companyScreen.vue中的类型定义和数据结构
- 更新mainScreen.vue中的标签处理逻辑
- 更新regionScreen.vue中的类型定义和数据初始化
- 修正所有相关组件中的switch语句匹配条件

src/App.vue

@@ -63,7 +63,7 @@ watch(
 </script>
 <template>
   <ConfigGlobal :size="currentSize">
-    <div class="h-100% w-100%" :class="greyMode ? `${prefixCls}-grey-mode` : ''">
+    <div class="h-100% w-100%" style="overflow-y: auto;" :class="greyMode ? `${prefixCls}-grey-mode` : ''">
       <RouterView />
     </div>
     <routerSearch />

src/api/bpm/processInstance/index.ts

@@ -68,3 +68,7 @@ export const createProcessInstanceCC = async (data) => {
 export const getProcessInstanceCCPage = async (params) => {
   return await request.get({url: '/bpm/process-instance/cc/my-page', params})
 }
+
+export const handleProcessInstanceCC = async (processInstanceId: string) => {
+  return await request.post({url: '/bpm/process-instance/cc/process-current-user-copy/' + processInstanceId})
+}

src/api/design/table/index.ts

@@ -1,5 +1,6 @@
 import request from '@/config/axios'
 import { encryptAES } from '@/components/LowDesign/src/utils/aes'
+import download from '@/utils/download'
 
 //获取表单开发列表
 export const getDbList = (data) => {
@@ -158,6 +159,11 @@ export const exportExcelData = (tableId, data) => {
   return request.download({ url: `/jeelowcode/excel/exportExcel/${tableId}`, method: 'POST', data })
 }
 
+//导出Excel表数据
+export const exportExcelDataCustom = (explain,tableId, data) => {
+  return request.download({ url: `/jeelowcode/excel/exportExcelCustom/${tableId}`, method: 'POST', data }).then((data) => download.excel(data, explain, 'xlsx'))
+}
+
 //下载导入模板
 export const downloadImportTemplate = (tableId) => {
   return request.download({ url: `/jeelowcode/excel/exportExcelTemplate/${tableId}` })

src/api/index.ts

@@ -0,0 +1,141 @@
+import request from '@/config/axios'
+
+// 获取集团外协管理数据
+export const getOutsourcingManagementData = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_wx_jt', data })
+}
+
+// 获取集团风险管理数据
+export const getRiskManagementData = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_fx_jt', data })
+}
+
+// 数据看板-隐患管理-集团(天) /jeelowcode/report-data/list/kb_yh_jt_d
+export const getHiddenDangerManagementData = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_yh_jt_d', data })
+}
+
+// 数据看板-隐患管理-集团(周) /jeelowcode/report-data/list/kb_yh_jt_w
+export const getHiddenDangerManagementDataWeek = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_yh_jt_w', data })
+}
+
+// 数据看板-隐患管理-集团(月) /jeelowcode/report-data/list/kb_yh_jt_m
+export const getHiddenDangerManagementDataMonth = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_yh_jt_m', data })
+}
+
+// 数据看板-高危作业-集团 /jeelowcode/report-data/list/kb_gw_jt
+export const getHighRiskManagementData = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_gw_jt', data })
+}
+
+// 数据看板-应急预案-集团 /jeelowcode/report-data/list/kb_yj_jt
+export const getEmergencyPlanManagementData = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_yj_jt', data })
+}
+
+// 数据看板-培训-集团 /jeelowcode/report-data/list/kb_px_jt
+export const getTrainingManagementData = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_px_jt', data })
+}
+
+// 数据看板-外协管理-区域 /jeelowcode/report-data/list/kb_wx_qy
+export const getOutsourcingManagementDataRegion = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_wx_qy', data })
+}
+
+// 数据看板-外协管理-园区 /jeelowcode/report-data/list/kb_wx_yq
+export const getOutsourcingManagementDataPark = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_wx_yq', data })
+}
+
+// 数据看板-风险管理-区域 /jeelowcode/report-data/list/kb_fx_qy
+export const getRiskManagementDataRegion = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_fx_qy', data })
+}
+
+// 数据看板-风险管理-园区 /jeelowcode/report-data/list/kb_fx_yq
+export const getRiskManagementDataPark = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_fx_yq', data })
+}
+
+// 数据看板-隐患管理-区域(天) /jeelowcode/report-data/list/kb_yh_qy_d
+export const getHiddenDangerManagementDataRegion = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_yh_qy_d', data })
+}
+
+// 数据看板-隐患管理-区域(周) /jeelowcode/report-data/list/kb_yh_qy_w
+export const getHiddenDangerManagementDataRegionWeek = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_yh_qy_w', data })
+}
+
+// 数据看板-隐患管理-区域(月) /jeelowcode/report-data/list/kb_yh_qy_m
+export const getHiddenDangerManagementDataRegionMonth = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_yh_qy_m', data })
+}
+
+// 数据看板-隐患管理-园区(天)
+export const getHiddenDangerManagementDataPark = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_gw_qy_d', data })
+}
+
+// 数据看板-隐患管理-园区(周) /jeelowcode/report-data/list/kb_yh_yq_w
+export const getHiddenDangerManagementDataParkWeek = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_yh_yq_w', data })
+}
+
+// 数据看板-隐患管理-园区(月) /jeelowcode/report-data/list/kb_yh_yq_m
+export const getHiddenDangerManagementDataParkMonth = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_yh_yq_m', data })
+}
+
+// 数据看板-高危作业-区域 /jeelowcode/report-data/list/kb_gw_dq
+export const getHighRiskManagementDataRegion = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_gw_dq', data })
+}
+
+// 数据看板-高危作业-园区 /jeelowcode/report-data/list/kb_gw_yq
+export const getHighRiskManagementDataPark = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_gw_yq', data })
+}
+
+// 数据看板-应急预案-区域 /jeelowcode/report-data/list/kb_yj_dq
+export const getEmergencyPlanManagementDataRegion = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_yj_dq', data })
+}
+
+// 数据看板-应急预案-园区 /jeelowcode/report-data/list/kb_yj_yq
+export const getEmergencyPlanManagementDataPark = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_yj_yq', data })
+}
+
+// 数据看板-安全培训-区域 /jeelowcode/report-data/list/kb_px_qy
+export const getTrainingManagementDataRegion = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_px_qy', data })
+}
+
+// 数据看板-安全培训-园区 /jeelowcode/report-data/list/kb_px_yq
+export const getTrainingManagementDataPark = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_px_yq', data })
+}
+
+// 动环监控-总设备数 /jeelowcode/power_env_device_totol_num
+export const getPowerEnvDeviceTotalNum = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/power_env_device_totol_num', data })
+}
+
+// 动环监控-告警设备类型分布 /jeelowcode/power_env_device_alarm_distribution
+export const getPowerEnvDeviceAlarmDistribution = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/power_env_device_alarm_distribution', data })
+}
+
+// 动环监控-当月告警趋势 /jeelowcode/power_env_alarm_trend
+export const getPowerEnvAlarmTrend = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/power_env_alarm_trend', data })
+}
+
+// 动环监控-园区信息列表 /jeelowcode/power_env_device_group_type_campus
+export const getPowerEnvDeviceGroupTypeCampus = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/power_env_device_group_type_campus', data })
+}

src/assets/svgs/trend.svg

@@ -0,0 +1,3 @@
+            <svg class="trend-icon" viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor">
+              <path d="M868 545.5L536.1 163a31.96 31.96 0 0 0-48.3 0L156 545.5a7.97 7.97 0 0 0 6 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"></path>
+            </svg>

src/components/BpmTaskAssign/TaskSelectAssigneeForm.vue

@@ -0,0 +1,107 @@
+<template>
+  <ContentWrap>
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
+      <div v-for="taskAssignRule in props?.taskAssignRules" :key="taskAssignRule.taskDefinitionKey">
+        <el-divider content-position="left">审批节点：{{ taskAssignRule?.taskDefinitionName }}</el-divider>
+        <el-form-item :label="'候选人'"
+                      :prop="taskAssignRule.taskDefinitionKey"
+                      label-width="122">
+          <UserSelect
+            v-model="formData[taskAssignRule.taskDefinitionKey]"
+            :column="userSelectColumn"
+            :prop="taskAssignRule.taskDefinitionKey"
+            type="edit"
+            :func="(value)=>{console.log(JSON.stringify(value))}"
+          >
+          </UserSelect>
+        </el-form-item>
+      </div>
+    </el-form>
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+// 从 UserSelect 组件导入 Column 类型
+import type {Column} from '@/components/LowDesign/src/shareControl/UserSelect.vue'
+
+// 定义组件选项
+defineOptions({
+  name: "BpmTaskSelectAssigneeForm"
+})
+
+interface TaskAssignRule {
+  id: number
+  modelId: string
+  processDefinitionId: string
+  taskDefinitionKey: string
+  taskDefinitionName: string
+  type: number
+  options: number[]
+}
+
+const props = defineProps<{
+  taskAssignRules: TaskAssignRule[]
+  modelValue: {}
+}>()
+
+const formRef = ref()
+const formData = ref(props.modelValue)
+const formRules = ref({})
+const userSelectColumn: Column = {
+  label: '候选人',
+  findType: 'all',
+  multiple: false,
+  columnKey: ['sex', 'post', 'deptName']
+}
+
+const emit = defineEmits(['updateModelValue'])
+
+watch(
+  () => props.modelValue,
+  (val: {}) => {
+    formData.value = val
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+)
+
+watch(
+  () => formData.value,
+  (val: {}) => {
+    emit('updateModelValue', val)
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+)
+
+const validateAssignee = (successCallBack: () => void, failCallback: () => void) => {
+  formRef.value.validate((valid: boolean) => {
+    if (valid) successCallBack()
+    else failCallback()
+  })
+}
+
+defineExpose({validateAssignee})
+
+// 初始化 formData
+onMounted(() => {
+  if (props.taskAssignRules) {
+    props.taskAssignRules.forEach(rule => {
+      formData.value[rule.taskDefinitionKey] = ''
+      formRules.value[rule.taskDefinitionKey] = [
+        {
+          required: true,
+          message: '请选择候选人',
+          trigger: 'blur'
+        }
+      ]
+    })
+  }
+})
+
+</script>
+
+

src/components/LowDesign/src/LowTable/components/ColumnConfigDialog.vue

@@ -0,0 +1,179 @@
+<template>
+  <ElDrawer
+    v-model="drawerVisible"
+    title="列显隐"
+    direction="rtl"
+    size="560px"
+    :z-index="3000"
+  >
+    <div class="column-config-drawer">
+      <el-table
+        :data="columnConfigList"
+        border
+        stripe
+        max-height="calc(100vh - 200px)"
+        style="width: 100%"
+      >
+        <el-table-column prop="label" label="列名" width="200" fixed="left">
+          <template #default="{ row }">
+            <span>{{ row.label }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="隐藏" width="80" align="center">
+          <template #default="{ row }">
+            <el-checkbox
+              v-model="row.hide"
+              @change="handleConfigChange"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="冻结" width="80" align="center">
+          <template #default="{ row }">
+            <el-checkbox
+              :model-value="row.fixed === 'left'"
+              @change="(val) => { row.fixed = val ? 'left' : false; handleConfigChange() }"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="排序" width="80" align="center">
+          <template #default="{ row }">
+            <el-checkbox
+              :model-value="row.sortable === 'custom'"
+              @change="(val) => { row.sortable = val ? 'custom' : false; handleConfigChange() }"
+            />
+          </template>
+        </el-table-column>
+        <!-- 导出 -->
+        <el-table-column label="导出" width="80" align="center">
+          <template #default="{ row }">
+            <el-checkbox
+              :model-value="row.isExport === 'Y'"
+              @change="(val) => { row.isExport = val ? 'Y' : 'N'; handleConfigChange() }"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </ElDrawer>
+</template>
+
+<script setup lang="ts">
+import { debounce } from 'lodash-es'
+
+defineOptions({ name: 'ColumnConfigDialog' })
+
+interface ColumnConfig {
+  prop: string
+  label: string
+  hide: boolean
+  fixed: string | boolean
+  sortable: string | boolean
+  showColumn: boolean
+  sortNum?: number
+  isExport?: string // 'Y' 表示导出，'N' 表示不导出
+}
+
+interface Props {
+  modelValue: boolean
+  columns: Record<string, any>
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'confirm': [config: Record<string, any>]
+}>()
+
+const drawerVisible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const columnConfigList = ref<ColumnConfig[]>([])
+
+const initColumnConfig = () => {
+  if (!props.columns) return
+  
+  columnConfigList.value = Object.keys(props.columns)
+    .map(key => {
+      const column = props.columns[key]
+      return {
+        prop: column.prop || key,
+        label: column.label || key,
+        hide: column.hide || false,
+        fixed: column.fixed || false,
+        sortable: column.sortable || false,
+        showColumn: column.showColumn !== false,
+        sortNum: column.sortNum,
+        // 默认全部勾选导出，如果已有配置则使用配置值
+        isExport: column.isExport !== undefined ? column.isExport : 'Y'
+      }
+    })
+    .sort((a, b) => {
+      // 优先按 sortNum 排序（从小到大）
+      if (a.sortNum !== undefined && b.sortNum !== undefined) {
+        return a.sortNum - b.sortNum
+      }
+      if (a.sortNum !== undefined) return -1
+      if (b.sortNum !== undefined) return 1
+      // 如果都没有 sortNum，则按 label 排序
+      const labelA = a.label || ''
+      const labelB = b.label || ''
+      return labelA.localeCompare(labelB, 'zh-CN')
+    })
+}
+
+// 防抖保存配置
+const saveConfig = debounce(() => {
+  const config: Record<string, any> = {}
+  
+  columnConfigList.value.forEach(item => {
+    config[item.prop] = {
+      hide: item.hide,
+      fixed: item.fixed,
+      sortable: item.sortable,
+      isExport: item.isExport || 'Y' // 默认导出
+    }
+  })
+  
+  emit('confirm', config)
+}, 300)
+
+const handleConfigChange = () => {
+  // 配置变化时直接触发保存（防抖处理）
+  saveConfig()
+}
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) {
+      initColumnConfig()
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.columns,
+  () => {
+    if (props.modelValue) {
+      initColumnConfig()
+    }
+  },
+  { deep: true }
+)
+</script>
+
+<style lang="scss" scoped>
+.column-config-drawer {
+  :deep(.el-table) {
+    .el-table__header {
+      th {
+        background-color: var(--el-fill-color-light);
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>

src/components/LowDesign/src/LowTable/index.vue

@@ -1,140 +1,73 @@
 <template>
-  <div
-    class="low-table relative"
-    :class="[
+  <div class="low-table relative" :class="[
     `low-table__${tableId}`,
     {
       summary: tableOption.showSummary,
       'low-table-grid': tableOption.grid,
       'no-menu': !tableOption.menu
     }
-    ]"
-  >
+  ]">
     <span prop="delegateUserId" style="display:none">
 
-        <userSelect
-          id="costomUserSelect" 
-          v-model="formData"
-          v-bind="userVBind"
-          class="w-100%"
-        ></userSelect>
+      <userSelect id="costomUserSelect" v-model="formData" v-bind="userVBind" class="w-100%"></userSelect>
+    </span>
+    <span prop="delegateDictId" style="display:none">
+
+      <DicTableSelect id="costomDictSelect" :column="distSelectColumn" size="default" type="add" prop="fields_7897245"
+        :scope="dictSelectScope" @set-form-data="handleSetFormData"></DicTableSelect>
     </span>
     <!-- 顶部统计 -->
-    <div
-      v-if="summaryTop.show"
-      class="low-table-summary absolute left-0 top-0 w-100% h-auto z-999"
-      v-hasResize="onSummaryTopResize"
-    >
-      <SummaryTop
-        ref="summaryTopRef"
-        v-if="tableSummary.topList?.length"
-        :summaryList="tableSummary.topList"
-      ></SummaryTop>
+    <div v-if="summaryTop.show" class="low-table-summary absolute left-0 top-0 w-100% h-auto z-999"
+      v-hasResize="onSummaryTopResize">
+      <SummaryTop ref="summaryTopRef" v-if="tableSummary.topList?.length" :summaryList="tableSummary.topList">
+      </SummaryTop>
     </div>
-    <div
-      class="low-table-content gap-x-10px w-100%"
-      :class="{
+    <div class="low-table-content gap-x-10px w-100%" :class="{
       show_fixed_bar: isShowFixedBar,
       [`low-table-grid__${tableInfo.singleCardSpan}`]: tableOption.grid
-      }"
-      :style="{ paddingTop: summaryTop.height + 'px' }"
-    >
+    }" :style="{ paddingTop: summaryTop.height + 'px' }">
       <!-- 左树右表（树表） -->
-      <div
-        class="left-tree-box flex-basis-200px flex-shrink-0"
-        v-if="tableInfo.tableType == 'treeAround'"
-      >
-        <avue-tree
-          ref="treeRef"
-          :option="treeAroundOption"
-          :data="treeAroundData"
-          @node-click="treeAroundNodeClick"
-        >
+      <div class="left-tree-box flex-basis-200px flex-shrink-0" v-if="tableInfo.tableType == 'treeAround'">
+        <avue-tree ref="treeRef" :option="treeAroundOption" :data="treeAroundData" @node-click="treeAroundNodeClick">
           <template #default="{ data }">
-            <span
-              class="el-tree-node__label"
-              :class="{
+            <span class="el-tree-node__label" :class="{
               active:
                 data[treeAroundOption.props.value] == treeAroundRow[treeAroundOption.props.value]
-              }"
-            >
+            }">
               {{ data[treeAroundOption.props.label] }}
             </span>
           </template>
         </avue-tree>
       </div>
-      <div
-        class="flex-1 w-100%"
-        :class="{ 'table-content': tableInfo.tableType == 'treeAround' }"
-        v-if="isInit"
-      >
+       <!-- 列配置抽屉 -->
+       <ColumnConfigDialog v-if="props.model === 'default'" v-model="showColumnConfigDrawer"
+         :columns="tableOption.column" @confirm="handleColumnConfigConfirm" />
+      <div class="flex-1 w-100%" :class="{ 'table-content': tableInfo.tableType == 'treeAround' }" v-if="isInit">
         <!-- 主体表格 -->
-        <avue-crud
-          ref="crudRef"
-          v-model="tableForm"
-          v-model:search="tableSearch"
-          v-bind="crudBind"
-          :table-loading="loading"
-          :data="tableData"
-          :option="tableOption"
-          :before-open="beforeOpen"
-          :before-close="beforeClose"
-          :row-style="tableDefaultFun.rowStyle"
-          :cell-style="tableDefaultFun.cellStyle"
-          :summary-method="tableDefaultFun.summaryMethod"
-          :span-method="tableDefaultFun.spanMethod"
-          @search-change="searchChange"
-          @search-reset="resetChange"
-          @row-save="rowSave"
-          @row-update="rowUpdate"
-          @row-del="rowDel"
-          @refresh-change="refreshChange"
-          @size-change="sizeChange"
-          @current-change="currentChange"
-          @selection-change="selectionChange"
-          @sort-change="sortChange"
-          @select-all="selectAll"
-          @row-click="tableDefaultFun.rowClick"
-          @row-dblclick="tableDefaultFun.rowDblclick"
-          @cell-click="tableDefaultFun.cellClick"
-          @cell-dblclick="tableDefaultFun.cellDblclick"
-          @tree-load="treeLoad"
-          @expand-change="expandChanges"
-          :upload-before="uploadBefore"
-          :upload-exceed="uploadExceed"
-          :upload-sized="uploadSized"
-          :upload-preview="uploadPreview"
-        >
+        <avue-crud ref="crudRef" v-model="tableForm" v-model:search="tableSearch" v-bind="crudBind"
+          :table-loading="loading" :data="tableData" :option="tableOption" :before-open="beforeOpen"
+          :before-close="beforeClose" :row-style="tableDefaultFun.rowStyle" :cell-style="tableDefaultFun.cellStyle"
+          :summary-method="tableDefaultFun.summaryMethod" :span-method="tableDefaultFun.spanMethod"
+          @search-change="searchChange" @search-reset="resetChange" @row-save="rowSave" @row-update="rowUpdate"
+          @row-del="rowDel" @refresh-change="refreshChange" @size-change="sizeChange" @current-change="currentChange"
+          @selection-change="selectionChange" @sort-change="sortChange" @select-all="selectAll"
+          @row-click="tableDefaultFun.rowClick" @row-dblclick="tableDefaultFun.rowDblclick"
+          @cell-click="tableDefaultFun.cellClick" @cell-dblclick="tableDefaultFun.cellDblclick" @tree-load="treeLoad"
+          @expand-change="expandChanges" :upload-before="uploadBefore" :upload-exceed="uploadExceed"
+          :upload-sized="uploadSized" :upload-preview="uploadPreview">
           <!-- 自定义表格头部操作 -->
           <template #menu-left="{ size }">
-            <TableButton
-              v-show="menuLeftShow"
-              type="header"
-              :size="size"
-              :buttonObj="buttonObj"
-              :selectLength="tableSelect.length"
-              @menu-left-handle="menuLeftHandle"
-            ></TableButton>
+            <TableButton v-show="menuLeftShow" type="header" :size="size" :buttonObj="buttonObj"
+              :selectLength="tableSelect.length" @menu-left-handle="menuLeftHandle"></TableButton>
           </template>
           <!-- 自定义操作列 -->
           <template #menu="{ size, row, index }">
-            <TableButton
-              :type="tableInfo.menuStyle == 'more' ? 'more' : 'menu'"
-              :max-num="tableInfo.maxMenuNum"
-              :size="size"
-              :buttonObj="buttonObj"
-              :row="row"
-              :index="index"
-              @menu-handle="menuHandle"
-            ></TableButton>
+            <TableButton :type="tableInfo.menuStyle == 'more' ? 'more' : 'menu'" :max-num="tableInfo.maxMenuNum"
+              :size="size" :buttonObj="buttonObj" :row="row" :index="index" @menu-handle="menuHandle"></TableButton>
           </template>
           <!-- 自定义多选提示 -->
           <template #tip>
-            <span
-              class="inline-block pl-10px c-#999"
-              v-if="model == 'dicTable' && dicMaxLimit"
-              type="danger"
-            >
+            <span class="inline-block pl-10px c-#999" v-if="model == 'dicTable' && dicMaxLimit" type="danger">
               {{ t('Avue.crud.selectMaxPrepend') }}
               {{ dicMaxLimit }}
               {{ t('Avue.crud.selectMaxAppend') }}
@@ -142,42 +75,22 @@
           </template>
           <!-- 单选 -->
           <template #lowSelectRadio="{ row, index }">
-            <el-radio
-              class="low-select-radio"
-              v-model="radioValue"
-              :label="row[tableOption.rowKey || 'id']"
-              :disabled="!tableOption.selectable(row, index)"
-              @click.stop="radioClick(row, index)"
-            />
+            <el-radio class="low-select-radio" v-model="radioValue" :label="row[tableOption.rowKey || 'id']"
+              :disabled="!tableOption.selectable(row, index)" @click.stop="radioClick(row, index)" />
           </template>
           <!-- 自定义表头 -->
           <template v-for="prop in inlineSearch" :key="prop" #[`${prop}-header`]="{ column }">
-            <InlineSearch
-              v-model="tableSearch[prop]"
-              :prop="prop"
-              :column="column"
-              :crudRef="crudRef"
-              @execute-search="searchChange"
-            ></InlineSearch>
+            <InlineSearch v-model="tableSearch[prop]" :prop="prop" :column="column" :crudRef="crudRef"
+              @execute-search="searchChange"></InlineSearch>
           </template>
           <!-- 自定义表单 -->
           <template v-for="c in slotData.form" :key="c.prop" #[`${c.prop}-form`]="scope">
             <!-- <div>{{scope}}</div> -->
-            <AvueSlot
-              slotType="form"
-              :scope="scope"
-              :control="c"
-              v-model="tableForm[c.prop]"
-            ></AvueSlot>
+            <AvueSlot slotType="form" :scope="scope" :control="c" v-model="tableForm[c.prop]"></AvueSlot>
           </template>
           <!-- 自定义搜索 -->
           <template v-for="c in slotData.search" :key="c.prop" #[`${c.prop}-search`]="scope">
-            <AvueSlot
-              slotType="search"
-              :scope="scope"
-              :control="c"
-              v-model="tableSearch[c.prop]"
-            ></AvueSlot>
+            <AvueSlot slotType="search" :scope="scope" :control="c" v-model="tableSearch[c.prop]"></AvueSlot>
           </template>
           <!-- 自定义列 -->
           <template v-for="c in slotData.list" :key="c.prop" #[c.prop]="scope">
@@ -185,36 +98,18 @@
           </template>
           <!-- 自定义附表表单 -->
           <template #lowCustomSubTable-form="{ type, disabled, column }">
-            <avue-tabs
-              ref="subTabsRef"
-              :option="column.tabsOption"
-              @change="(tab) => (subTabsValue = tab)"
-            ></avue-tabs>
+            <avue-tabs ref="subTabsRef" :option="column.tabsOption" @change="(tab) => (subTabsValue = tab)"></avue-tabs>
             <template v-for="sub in column.tabsOption.column" :key="sub.prop">
               <template v-if="sub.subType == 'many'">
-                <SubTable
-                  :ref="(el) => (subTableRef[sub.prop] = el)"
-                  v-model="tableForm[sub.prop]"
-                  v-show="sub.prop == subTabsValue.prop"
-                  :prop="sub.prop"
-                  :tableId="sub.tableId"
-                  :optionData="subTableObj[sub.tableId]"
-                  :type="type"
-                  :disabled="disabled"
-                  @execute-custom-btn-enhance="executeCustomBtnEnhance"
-                ></SubTable>
+                <SubTable :ref="(el) => (subTableRef[sub.prop] = el)" v-model="tableForm[sub.prop]"
+                  v-show="sub.prop == subTabsValue.prop" :prop="sub.prop" :tableId="sub.tableId"
+                  :optionData="subTableObj[sub.tableId]" :type="type" :disabled="disabled"
+                  @execute-custom-btn-enhance="executeCustomBtnEnhance"></SubTable>
               </template>
               <template v-if="sub.subType == 'one'">
-                <SubForm
-                  :ref="(el) => (subFormRef[sub.prop] = el)"
-                  v-model="tableForm[sub.prop]"
-                  v-show="sub.prop == subTabsValue.prop"
-                  :prop="sub.prop"
-                  :tableId="sub.tableId"
-                  :optionData="subTableObj[sub.tableId]"
-                  :type="type"
-                  :disabled="disabled"
-                ></SubForm>
+                <SubForm :ref="(el) => (subFormRef[sub.prop] = el)" v-model="tableForm[sub.prop]"
+                  v-show="sub.prop == subTabsValue.prop" :prop="sub.prop" :tableId="sub.tableId"
+                  :optionData="subTableObj[sub.tableId]" :type="type" :disabled="disabled"></SubForm>
               </template>
             </template>
           </template>
@@ -222,18 +117,11 @@
             <!-- 主附表内嵌 -->
             <template v-if="tableInfo.subTemplate == 'innerTable'">
               <div class="p-20px pt-0 pb-10px" v-if="tableOption.expandRowKeys.includes(row.id)">
-                <avue-tabs
-                  :option="innerTabsOption"
-                  @change="(tab) => (innerTabsValue = tab)"
-                ></avue-tabs>
+                <avue-tabs :option="innerTabsOption" @change="(tab) => (innerTabsValue = tab)"></avue-tabs>
                 <template v-for="sub in innerTabsOption.column" :key="sub.prop">
                   <div class="w-100%" v-show="sub.prop == innerTabsValue.prop">
-                    <LowTable
-                      :ref="(el) => (innerTableRef[sub.prop] = el)"
-                      :tableId="sub.tableId"
-                      v-bind="sub.vBind"
-                      :fixedSearch="{ ...(innerSubSearch[row.id]?.[sub.prop] || {}) }"
-                    ></LowTable>
+                    <LowTable :ref="(el) => (innerTableRef[sub.prop] = el)" :tableId="sub.tableId" v-bind="sub.vBind"
+                      :fixedSearch="{ ...(innerSubSearch[row.id]?.[sub.prop] || {}) }"></LowTable>
                   </div>
                 </template>
               </div>
@@ -242,11 +130,7 @@
             <template v-if="tableInfo.singleStyle == 'expand'">
               <div class="expand-table-box px-20px py-10px">
                 <el-row>
-                  <el-form-item
-                    v-for="prop in expandProp"
-                    :key="prop"
-                    :label="tableOption.column[prop].label + '：'"
-                  >
+                  <el-form-item v-for="prop in expandProp" :key="prop" :label="tableOption.column[prop].label + '：'">
                     {{ row[`$${prop}`] || row[prop] }}
                   </el-form-item>
                 </el-row>
@@ -259,11 +143,8 @@
           <avue-tabs :option="erpTabsOption" @change="(tab) => (subTabsValue = tab)"></avue-tabs>
           <template v-for="sub in erpTabsOption.column" :key="sub.prop">
             <div class="w-100%" v-show="sub.prop == subTabsValue.prop">
-              <LowTable
-                :ref="(el) => (erpTableRef[sub.prop] = el)"
-                :tableId="sub.tableId"
-                v-bind="sub.vBind"
-              ></LowTable>
+              <LowTable :ref="(el) => (erpTableRef[sub.prop] = el)" :tableId="sub.tableId" v-bind="sub.vBind">
+              </LowTable>
             </div>
           </template>
         </div>
@@ -272,67 +153,32 @@
     </div>
   </div>
   <!-- 代码编辑器 -->
-  <DesignPopup
-    v-if="popShowObj.mEditor"
-    v-model="MEDialog.value"
-    v-bind="MEDialog.params"
-    :isBodyFull="true"
-  >
+  <DesignPopup v-if="popShowObj.mEditor" v-model="MEDialog.value" v-bind="MEDialog.params" :isBodyFull="true">
     <template #default>
       <MonacoEditor v-model="MEData.value" v-bind="MEData.params"></MonacoEditor>
     </template>
   </DesignPopup>
   <!-- 导入 -->
-  <DesignPopup
-    v-if="popShowObj.import"
-    v-model="importDialog"
-    :title="t('Avue.crud.importTitle')"
-    width="80%"
-    :dialog-params="{ alignCenter: true }"
-    :handleClose="importRef?.handleClose"
-  >
+  <DesignPopup v-if="popShowObj.import" v-model="importDialog" :title="t('Avue.crud.importTitle')" width="80%"
+    :dialog-params="{ alignCenter: true }" :handleClose="importRef?.handleClose">
     <template #default="{ isFull }">
-      <ImportData
-        ref="importRef"
-        :importId="tableId"
-        :columns="tableOption.column"
-        :tableDescribe="tableInfo.tableDescribe"
-        :show="importDialog"
-        :isFull="isFull"
-        @close-popup="importDialog = false"
-        @reset-change="resetData"
-      ></ImportData>
+      <ImportData ref="importRef" :importId="tableId" :columns="tableOption.column"
+        :tableDescribe="tableInfo.tableDescribe" :show="importDialog" :isFull="isFull"
+        @close-popup="importDialog = false" @reset-change="resetData"></ImportData>
     </template>
   </DesignPopup>
   <!-- 自定义表单 -->
-  <DesignPopup
-    v-if="popShowObj.form"
-    v-model="customForm.open"
-    :controlType="tableOption.dialogType || 'dialog'"
-    :title="tableOption[`${customForm.formType}Title`] || customForm.title"
-    :width="tableOption.dialogWidth || '60%'"
-    :footer-btn="customForm.footerBtn"
-    :fullscreen = "true"
-  >
-    <LowForm
-      v-if="customForm.open"
-      ref="customFormRef"
-      :formType="customForm.formType"
-      :formOption="customForm.formOption"
-      :defaultData="customForm.defaultData"
-      :formId="tableInfo.formId"
-      handleType="returnData"
-      :beforeClose="customFormClose"
-    ></LowForm>
+  <DesignPopup v-if="popShowObj.form" v-model="customForm.open" :controlType="tableOption.dialogType || 'dialog'"
+    :title="tableOption[`${customForm.formType}Title`] || customForm.title" :width="tableOption.dialogWidth || '60%'"
+    :footer-btn="customForm.footerBtn" :fullscreen="true">
+    <LowForm v-if="customForm.open" ref="customFormRef" :formType="customForm.formType"
+      :formOption="customForm.formOption" :defaultData="customForm.defaultData" :formId="tableInfo.formId"
+      handleType="returnData" :beforeClose="customFormClose"></LowForm>
   </DesignPopup>
   <!-- 增强注册的控件 -->
   <template v-for="item in rendControlData" :key="item.key">
-    <component
-      :ref="(el) => (componentRef[item.key] = el)"
-      :is="componentObj[item.random]"
-      v-bind="item.params || {}"
-      v-model="item.show"
-    ></component>
+    <component :ref="(el) => (componentRef[item.key] = el)" :is="componentObj[item.random]" v-bind="item.params || {}"
+      v-model="item.show"></component>
   </template>
 </template>
 <script lang="ts" setup>
@@ -365,6 +211,8 @@ import * as Vue from 'vue'
 import { useAppStore } from '@/store/modules/app'
 import { Value } from 'sass'
 import { object } from 'vue-types'
+import ColumnConfigDialog from './components/ColumnConfigDialog.vue'
+import { saveColumnConfig, getColumnConfig, type ColumnConfig } from '@/utils/indexedDB'
 defineOptions({ name: 'LowTable' })
 
 let funcInteface = (value1, value2) => { }
@@ -383,12 +231,108 @@ interface Props {
   dicRowKey?: string //dicTable模式 行数据的 Key
 }
 
+const dictSelectScope = {
+  "key": 0,
+  "value": "",
+  "column": {
+    "type": "dicTableSelect",
+    "controlType": "select",
+    "label": "表格选择框",
+    // "fixedSearch":{
+    //   "approveStatusName":"已审批"
+    // },
+    "separator": " | ",
+    "multiple": true,
+    "display": true,
+    "span": 12,
+    "disabled": false,
+    "required": false,
+    "hideLabel": false,
+    "i18nCode": "fields_7897245",
+    "dictTable": "1959187451673116674",
+    "dictCode": "id",
+    "dictText": "personName",
+    "dictTableColumn": [
+      "personName",
+      "personAge",
+      "personSex",
+      "mobile",
+      "approveStatusName"
+    ],
+    "prop": "fields_7897245",
+    "dataType": "string",
+    "className": "control-dicTableSelect control-fields_7897245 ",
+    "props": {
+      "lable": "personName",
+      "value": "id"
+    },
+    "rules": [
+
+    ]
+  },
+  "size": "default",
+  "disabled": false
+}
+
+const distSelectColumn = {
+  "type": "dicTableSelect",
+  "controlType": "select",
+  "multiple": true,
+  "label": "表格选择框",
+  "separator": " | ",
+  "display": true,
+  "span": 12,
+  "disabled": false,
+  // "fixedSearch":{
+  //       "approveStatusName":"已审批"
+  //     },
+  "required": false,
+  "hideLabel": false,
+  "i18nCode": "fields_7897245",
+  "dictTable": "1959187451673116674",
+  "dictCode": "id",
+  "dictText": "personName",
+  "dictTableColumn": [
+    "personName",
+    "personAge",
+    "personSex",
+    "mobile",
+    "approveStatusName"
+  ]
+  ,
+  "prop": "fields_7897245",
+  "dataType": "string",
+  "className": "control-dicTableSelect control-fields_7897245 ",
+  "props": {
+    "lable": "personName",
+    "value": "id"
+  },
+  "rules": [
+
+  ]
+}
+
 const props = withDefaults(defineProps<Props>(), {
   model: 'default',
   fixedSearch: () => {
     return {}
   }
 })
+const handleSetFormData = (key, val) => {
+  const cleaned = val.split('|').map(s => s.trim()).join(','); // "1975577437793124352 | 1965778349088899074"
+  console.log(cleaned);
+  // 在这里添加其他处理逻辑
+  useFun.requestApi('get', '/jeelowcode/outsidePerson/importOutside?tableId=' + props.tableId + '&ids=' + cleaned, {
+  }).then(res => {
+    if (res.length > 0) {
+      message.success('下发成功')
+      useFun.refreshChange()
+    } else {
+      message.error(res.message)
+    }
+  })
+};
+
 const userVBind = {
   prop: 'delegateUserId',
   type: 'edit',
@@ -440,6 +384,17 @@ const userVBind = {
     } else if (props.tableId == '1968562717683908610') { // 考试计划
       useFun.requestApi('get', '/jeelowcode/examIssus/addRecord?tableId=' + props.tableId + '&ids=' + ids + '&userIds=' + resultValue, {
 
+      }).then(res => {
+        if (res.length > 0) {
+          message.success('下发成功')
+          useFun.refreshChange()
+        } else {
+          message.error(res.message)
+        }
+      })
+    } else if (props.tableId == '1983351353033953281') { // 工作事项
+      useFun.requestApi('get', '/jeelowcode/itemIssus/addResult?tableId=' + props.tableId + '&ids=' + ids + '&userIds=' + resultValue, {
+
       }).then(res => {
         if (res.length > 0) {
           message.success('下发成功')
@@ -523,6 +478,10 @@ const crudRef = ref()
 const componentRef = ref({})
 const summaryTopRef = ref()
 
+// 列配置相关
+const showColumnConfigDrawer = ref(false)
+const fieldListRef = ref<any[]>([]) // 保存 fieldList 的引用，用于修改 webEntity.isShowColumn
+
 const { uploadBefore, uploadExceed, uploadSized, uploadPreview } = useAvueUpload(jsEnhanceObj)
 
 const isShowFixedBar = computed(() => {
@@ -613,7 +572,7 @@ const fixed_bar_left = computed(() => {
 const initTable = async () => {
   isInit.value = false
   loading.value = true
-  let data = {}
+  let data: any = {}
   if (props.model == 'default') {
     data = await TableApi.getWebConfig(props.tableId)
   } else if (props.model == 'erpTable' || props.model == 'innerTable') {
@@ -621,6 +580,15 @@ const initTable = async () => {
   } else if (isDicTable.value) {
     data = await getDicTableConfig(props.tableId, props.dicConfigStr)
   }
+  
+  // 保存 fieldList 的引用，用于列配置时修改 webEntity.isShowColumn
+  if (props.model === 'default' && data.fieldList) {
+    fieldListRef.value = data.fieldList
+    
+    // 在初始化 tableOption 之前，先从 IndexedDB 加载列配置并应用到 fieldList
+    await loadColumnConfigToFieldList()
+  }
+  
   const optionData = initTableOption(data, {
     tableId: props.tableId,
     calcHeight: props.calcHeight,
@@ -736,10 +704,24 @@ const initTable = async () => {
   initInlineSearch()
   initExpandTable()
   isInit.value = true
+
+  // 从 IndexedDB 加载列配置并应用到 crudRef（此时 tableOption 已初始化，需要同步到 crudRef）
+  if (props.model === 'default') {
+    await loadColumnConfigToCrudRef()
+  }
+
   if (optionData.tableInfo.isGetData || isDicTable.value) {
     getTableData(true, { type: 'init', isGetSummary: true })
   } else loading.value = false
   initTableLayout()
+
+  // 初始化完成后，尝试替换列显隐按钮
+  if (props.model === 'default') {
+    await nextTick()
+    setTimeout(() => {
+      replaceColumnButton()
+    }, 300)
+  }
   if (optionData.tableInfo.subTable?.length) {
     optionData.tableInfo.subTable.forEach(
       (id, index) => (subTableObj.value[id] = { tableId: id, index })
@@ -1413,6 +1395,273 @@ const refreshChange = () => {
   getTableData(true, { isGetSummary: true })
 }
 
+// 替换列显隐按钮
+let buttonReplaced = false
+let observerInstance: MutationObserver | null = null
+
+const replaceColumnButton = () => {
+  if (buttonReplaced || props.model !== 'default') return
+
+  const tryReplace = () => {
+    const originalButton = document.querySelector('.avue-crud__columnBtn:not([data-custom-replaced])')
+    if (originalButton && !buttonReplaced) {
+      buttonReplaced = true
+
+      // 创建新按钮
+      const newButton = originalButton.cloneNode(true) as HTMLElement
+      newButton.setAttribute('data-custom-replaced', 'true')
+
+      // 清除原按钮的所有事件监听器
+      const newButtonClone = newButton.cloneNode(true) as HTMLElement
+      newButtonClone.setAttribute('data-custom-replaced', 'true')
+
+      // 添加新的事件监听器
+      newButtonClone.addEventListener('click', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        showColumnConfigDrawer.value = true
+      })
+
+      // 替换原按钮
+      if (originalButton.parentNode) {
+        originalButton.parentNode.replaceChild(newButtonClone, originalButton)
+      }
+
+      // 停止观察
+      if (observerInstance) {
+        observerInstance.disconnect()
+        observerInstance = null
+      }
+    }
+  }
+
+  // 立即尝试一次
+  tryReplace()
+
+  // 如果还没替换成功，使用观察者
+  if (!buttonReplaced) {
+    observerInstance = new MutationObserver(() => {
+      if (!buttonReplaced) {
+        tryReplace()
+      }
+    })
+
+    // 只观察 crudRef 所在的区域，避免观察整个 body
+    const crudElement = crudRef.value?.$el
+    if (crudElement) {
+      observerInstance.observe(crudElement, {
+        childList: true,
+        subtree: true
+      })
+    } else {
+      // 如果 crudRef 还没准备好，观察 body 但限制范围
+      observerInstance.observe(document.body, {
+        childList: true,
+        subtree: true
+      })
+    }
+
+    // 设置超时，避免无限观察
+    setTimeout(() => {
+      if (observerInstance) {
+        observerInstance.disconnect()
+        observerInstance = null
+      }
+    }, 10000) // 10秒后停止观察
+  }
+}
+
+// 列配置确认处理
+const handleColumnConfigConfirm = async (config: Record<string, ColumnConfig>) => {
+  if (props.model !== 'default') return
+
+  // 修改 fieldList 中的 webEntity.isShowColumn
+  if (fieldListRef.value && fieldListRef.value.length > 0) {
+    fieldListRef.value.forEach((field: any) => {
+      if (field.webEntity && field.fieldCode && config[field.fieldCode] !== undefined) {
+        const colConfig = config[field.fieldCode]
+        // hide === true 表示 checkbox 选中，对应 isShowColumn = 'N'
+        // hide === false 表示 checkbox 不选中，对应 isShowColumn = 'Y'
+        if (colConfig.hide !== undefined) {
+          field.webEntity.isShowColumn = colConfig.hide ? 'N' : 'Y'
+        }
+      }
+    })
+  }
+
+  // 应用列配置到 tableOption
+  Object.keys(config).forEach(prop => {
+    if (tableOption.value.column[prop]) {
+      const colConfig = config[prop]
+      if (colConfig.hide !== undefined) {
+        tableOption.value.column[prop].hide = colConfig.hide
+      }
+      if (colConfig.fixed !== undefined) {
+        tableOption.value.column[prop].fixed = colConfig.fixed
+      }
+      if (colConfig.sortable !== undefined) {
+        tableOption.value.column[prop].sortable = colConfig.sortable
+      }
+      if (colConfig.isExport !== undefined) {
+        tableOption.value.column[prop].isExport = colConfig.isExport
+      }
+    }
+  })
+
+  // 同步到 crudRef
+  await nextTick()
+  if (crudRef.value && crudRef.value.columnOption) {
+    crudRef.value.columnOption.forEach((column: any) => {
+      if (config[column.prop]) {
+        const colConfig = config[column.prop]
+        if (colConfig.hide !== undefined) {
+          column.hide = colConfig.hide
+        }
+        if (colConfig.fixed !== undefined) {
+          column.fixed = colConfig.fixed
+        }
+        if (colConfig.sortable !== undefined) {
+          column.sortable = colConfig.sortable
+        }
+        if (colConfig.isExport !== undefined) {
+          column.isExport = colConfig.isExport
+        }
+      }
+    })
+
+    // 强制更新表格布局和配置
+    await nextTick()
+    if (crudRef.value && crudRef.value.$refs && crudRef.value.$refs.table) {
+      // 强制更新表格布局
+      crudRef.value.$refs.table.doLayout()
+      // 强制 Vue 重新渲染列配置
+      await nextTick()
+    }
+  }
+
+  // 保存到 IndexedDB（保存 isShowColumn 的值）
+  const pageId = (route.params.id as string) || props.tableId
+  const saveConfig: Record<string, ColumnConfig> = {}
+  Object.keys(config).forEach(prop => {
+    saveConfig[prop] = {
+      ...config[prop],
+      isShowColumn: config[prop].hide ? 'N' : 'Y', // hide=true checkbox选中→'N'，hide=false checkbox不选中→'Y'
+      isExport: config[prop].isExport || 'Y' // 默认导出
+    }
+  })
+  await saveColumnConfig(pageId, saveConfig)
+}
+
+// 从 IndexedDB 加载列配置并应用到 fieldList（在 initTableOption 之前调用）
+const loadColumnConfigToFieldList = async () => {
+  if (props.model !== 'default' || !fieldListRef.value || fieldListRef.value.length === 0) return
+ 
+  try {
+    const pageId = (route.params.id as string) || props.tableId
+    const savedConfig = await getColumnConfig(pageId)
+ 
+    if (savedConfig) {
+      // 修改 fieldList 中的 webEntity.isShowColumn
+      fieldListRef.value.forEach((field: any) => {
+        if (field.webEntity && field.fieldCode && savedConfig[field.fieldCode] !== undefined) {
+          const colConfig = savedConfig[field.fieldCode]
+          // 优先使用 isShowColumn，如果没有则使用 hide 转换
+          if (colConfig.isShowColumn !== undefined) {
+            field.webEntity.isShowColumn = colConfig.isShowColumn
+          } else if (colConfig.hide !== undefined) {
+            // hide=true checkbox选中→'N'，hide=false checkbox不选中→'Y'
+            field.webEntity.isShowColumn = colConfig.hide ? 'N' : 'Y'
+          }
+        }
+      })
+    }
+  } catch (error) {
+    console.error('加载列配置到 fieldList 失败:', error)
+  }
+}
+
+// 从 IndexedDB 加载列配置并应用到 crudRef（在 tableOption 初始化之后调用）
+const loadColumnConfigToCrudRef = async () => {
+  if (props.model !== 'default' || !tableOption.value.column) return
+ 
+  try {
+    const pageId = (route.params.id as string) || props.tableId
+    const savedConfig = await getColumnConfig(pageId)
+ 
+    if (savedConfig && tableOption.value.column) {
+      // 应用配置到 tableOption.column
+      Object.keys(savedConfig).forEach(prop => {
+        if (tableOption.value.column[prop]) {
+          const colConfig = savedConfig[prop]
+          // 优先使用 isShowColumn 转换，如果没有则使用 hide
+          // isShowColumn='Y' 表示 checkbox 未选中，所以 hide=false
+          // isShowColumn='N' 表示 checkbox 选中，所以 hide=true
+          if (colConfig.isShowColumn !== undefined) {
+            tableOption.value.column[prop].hide = colConfig.isShowColumn === 'N'
+          } else if (colConfig.hide !== undefined) {
+            tableOption.value.column[prop].hide = colConfig.hide
+          }
+          if (colConfig.fixed !== undefined) {
+            tableOption.value.column[prop].fixed = colConfig.fixed
+          }
+          if (colConfig.sortable !== undefined) {
+            tableOption.value.column[prop].sortable = colConfig.sortable
+          }
+          if (colConfig.isExport !== undefined) {
+            tableOption.value.column[prop].isExport = colConfig.isExport
+          }
+        }
+      })
+ 
+      // 等待 DOM 更新后同步到 crudRef
+      await nextTick()
+      await nextTick()
+      
+      // 使用重试机制确保 crudRef 准备好
+      let retryCount = 0
+      const maxRetries = 10
+      const tryApplyToCrudRef = () => {
+        if (crudRef.value && crudRef.value.columnOption) {
+          crudRef.value.columnOption.forEach((column: any) => {
+            if (savedConfig[column.prop]) {
+              const colConfig = savedConfig[column.prop]
+              // isShowColumn='Y' 表示 checkbox 未选中，所以 hide=false
+              // isShowColumn='N' 表示 checkbox 选中，所以 hide=true
+              if (colConfig.isShowColumn !== undefined) {
+                column.hide = colConfig.isShowColumn === 'N'
+              } else if (colConfig.hide !== undefined) {
+                column.hide = colConfig.hide
+              }
+              if (colConfig.fixed !== undefined) {
+                column.fixed = colConfig.fixed
+              }
+              if (colConfig.sortable !== undefined) {
+                column.sortable = colConfig.sortable
+              }
+              if (colConfig.isExport !== undefined) {
+                column.isExport = colConfig.isExport
+              }
+            }
+          })
+ 
+          if (crudRef.value.$refs && crudRef.value.$refs.table) {
+            crudRef.value.$refs.table.doLayout()
+          }
+          return true
+        }
+        return false
+      }
+      
+      while (retryCount < maxRetries && !tryApplyToCrudRef()) {
+        retryCount++
+        await new Promise(resolve => setTimeout(resolve, 100))
+      }
+    }
+  } catch (error) {
+    console.error('加载列配置到 crudRef 失败:', error)
+  }
+}
+
 const subDataFormatting = (data, type) => {
   if (tabsColumn.value) {
     tabsColumn.value.forEach((item) => {
@@ -1739,15 +1988,34 @@ const expandChanges = (row, expendList) => {
   }
 }
 
+// 计算需要导出的列字段（英文字段名）
+const exportFields = computed(() => {
+  if (!tableOption.value.column) return []
+  
+  const fields: string[] = []
+  Object.keys(tableOption.value.column).forEach(prop => {
+    const column = tableOption.value.column[prop]
+    // 如果 isExport 为 'Y' 或者未设置（默认导出），则添加到导出列表
+    if (column.isExport === 'Y' || (column.isExport === undefined && !column.hide)) {
+      fields.push(prop)
+    }
+  })
+  
+  return fields
+})
+
 const exportTableData = async () => {
   const exportBtn = buttonObj.value.header.exportBtn
   const isSelect = tableSelect.value.length
   await message.confirm(isSelect ? t('Avue.crud.exportTip') : t('Avue.crud.exportAllTip'))
   exportBtn.params.loading = true
-  const searchObj = isSelect
+  const searchObj: any = isSelect
     ? { jeeLowCode_export_ids: selectIds.value }
     : await getSearchData('search')
-  TableApi.exportExcelData(props.tableId, searchObj)
+  TableApi.exportExcelData(props.tableId, {
+    ...searchObj,
+    jeeLowCode_export_fields: exportFields.value
+  })
     .then((data) => download.excel(data, tableInfo.value.tableDescribe, 'xlsx'))
     .finally(() => (exportBtn.params.loading = false))
 }
@@ -2018,6 +2286,11 @@ const beforeUnload = (event) => {
 
 onMounted(async () => {
   window.addEventListener('beforeunload', beforeUnload)
+
+  // 监听并替换列显隐按钮
+  if (props.model === 'default') {
+    replaceColumnButton()
+  }
 })
 
 onBeforeUnmount(() => {
@@ -2062,15 +2335,7 @@ defineExpose({
       max-width: calc(100% - 210px);
     }
 
-    &.show_fixed_bar
-      > div
-      > ::v-deep(.avue-crud)
-      > .avue-crud__body
-      > .el-card__body
-      > .el-form
-      > div
-      > .el-table__inner-wrapper
-      > .el-table__body-wrapper {
+    &.show_fixed_bar>div> ::v-deep(.avue-crud)>.avue-crud__body>.el-card__body>.el-form>div>.el-table__inner-wrapper>.el-table__body-wrapper {
       .el-scrollbar__bar.is-horizontal {
         position: fixed;
         bottom: 0;
@@ -2185,6 +2450,7 @@ defineExpose({
 
             .el-form--default {
               .el-table--border {
+
                 &::before,
                 &::after {
                   width: 0;

src/components/LowDesign/src/shareControl/DicTableSelect.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="dic-table-select-box w-100%">
+    {{ JSON.stringify(props) }}
     <div
       class="table-input pos-relative"
       :class="[{ disabled }, type, size]"
@@ -273,9 +274,9 @@ const getCurrTableSelect = (type?) => {
   const dicObj = {}
   const textList: string[] = []
   const ids = tableRef.value.tableSelect.map((item) => {
-    if (item[props.column.dictText]) {
-      dicObj[item[dicCode.value]] = item[props.column.dictText]
-      textList.push(item[props.column.dictText])
+    if (item[props.column.dictCode]) {
+      dicObj[item[dicCode.value]] = item[props.column.dictCode]
+      textList.push(item[props.column.dictCode])
     }
     return item[dicCode.value]
   })

src/components/LowDesign/src/shareControl/UserSelect.vue

@@ -217,7 +217,7 @@ defineOptions({ name: 'UserSelect' })
  * all_sub 所有下级
  */
 
-interface Column {
+export interface Column {
   label: string
   findType: 'all' | 'now' | 'sub' | 'all_sub' | 'direct_sub' //查询类型
   columnKey: Array<'mobile' | 'email' | 'sex' | 'post' | 'deptName'> //扩展显示列

src/components/LowDesign/src/utils/controlOption.ts

@@ -34,7 +34,7 @@ const dicObj = {
     { label: '邮箱', value: 'email' }, { label: '性别', value: 'sex' }, { label: '岗位', value: 'post' }, { label: '部门', value: 'deptName' }
   ],
   userFindType: [{ label: '全部用户', value: 'all' }, { label: '本级用户', value: 'now' }, { label: '本级及下级用户', value: 'sub' }],
-  deptFindType: [{ label: '全部部门', value: 'all' }, { label: '本级部门', value: 'now' }, { label: '本级及下级部门', value: 'sub' }],
+  deptFindType: [{ label: '全部部门', value: 'all' }, { label: '本级部门', value: 'now' }, { label: '本级及下级部门', value: 'sub' }, { label: '外协单位', value: 'out' }, { label: '内部单位', value: 'internal' }],
   customControlType: [{ label: '未全局注册', value: false }, { label: '已全局注册', value: true }],
   regionType: [{ label: '全球-国家', value: 'gj' }, { label: '中国-省市区', value: 'ssq' }, { label: '中国-省市', value: 'ss' }, { label: '中国-省', value: 's' }],
   dictTextFormatter: [

src/components/LowDesign/src/utils/defaultUseUtil.ts

@@ -7,6 +7,7 @@ import { encryptAES, decryptAES } from '@/components/LowDesign/src/utils/aes'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import { useI18n } from '@/hooks/web/useI18n';
 import router from '@/router/index'
+import {exportExcelDataCustom} from '@/api/design/table'
 
 const message = useMessage() // 消息弹窗
 
@@ -18,6 +19,7 @@ export default {
    * @param options 请求配置 如：{ params:{ text:'测试' } }
   */
   requestApi: (Method, url, options) => callApiFun(Method, url, options),
+  exportExcelCustom: (explain,tableId, data) => exportExcelDataCustom(explain,tableId, data),
   cloneDeep, //深拷贝
   listToTree,//列表转树结构
   formatDate,//时间格式化

src/components/LowDesign/src/utils/formUtil.ts

@@ -546,13 +546,15 @@ export const formDataFormatting = (formOption, formData, formType) => {
           echoObj[dicKey].push(...data[key].split(','))
         }
       } else echoObj[type].push(...data[key].split(','))
-    } else if (column[key]?.controlType == 'date') {
+    } else if (column[key]?.controlType == 'date'||key=='create_time') {
+      
       if (data[key]) {
         if (typeof data[key] == 'number' || typeof data[key] == 'string') {
           data[key] = data[key] + ''
           if (!(/[-|\/]/g.test(data[key]))) {
             //如果是时间戳强制转换
-            data[key] = formatDate(new Date(data[key]), column[key].valueFormat || 'YYYY-MM-DD HH:mm:ss')
+            const timestamp = parseInt(data[key], 10)
+            data[key] = formatDate(new Date(timestamp), column[key].valueFormat || 'YYYY-MM-DD HH:mm:ss')
           }
         }
       }

src/components/LowDesign/src/utils/tableUtil.ts

@@ -116,7 +116,7 @@ const initColumn = (data, componentData, columnParams) => {
   const summaryBottom = {}
   const tableDic = {}
   data.forEach(item => {
-    const { dictEntity, webEntity, queryEntity, exportEntity, summaryEntity, fieldCode, fieldName, fieldType, fieldLen, fieldPointLen, fieldDefaultVal } = item
+    const { dictEntity, webEntity, queryEntity, exportEntity, summaryEntity, fieldCode, fieldName, fieldType, fieldLen, fieldPointLen, fieldDefaultVal, sortNum } = item
     const { cellWidthType, cellWidth, controlsConfig, verifyConfig, isShowForm, isShowList, isDbSelect, isShowColumn, isShowSort, isRequired } = webEntity
     let controlType = webEntity.controlType || 'input'
     const { queryIsWeb, queryMode, queryConfig, queryDefaultVal } = queryEntity
@@ -140,7 +140,8 @@ const initColumn = (data, componentData, columnParams) => {
       dataType: ['Integer', 'BigInt', 'BigDecimal'].includes(fieldType) || controlType == 'number' ? 'number' : 'string',
       overHidden: isCardTable ? false : true,
       className: `low-field__${fieldCode} control-${controlType}`,
-      labelClassName: `low-header__${fieldCode}`
+      labelClassName: `low-header__${fieldCode}`,
+      sortNum: sortNum
     }
 
     //租户字段的列表、表单权限控制

src/config/axios/config.ts

@@ -16,7 +16,7 @@ const config: {
   /**
    * 接口请求超时时间
    */
-  request_timeout: 30000,
+  request_timeout: 24 * 60 * 60 * 1000,
 
   /**
    * 默认接口请求类型

src/config/axios/service.ts

@@ -159,6 +159,8 @@ service.interceptors.response.use(
     } else if (code === 500) {
       ElMessage.error(t('sys.api.errMsg500'))
       return Promise.reject(new Error(msg))
+    } else if (code === 504) {
+      return Promise.reject(new Error(msg))
     } else if (code === 901) {
       ElMessage.error({
         offset: 300,
@@ -168,6 +170,7 @@ service.interceptors.response.use(
           t('sys.api.errMsg901') +
           '</div>'
       })
+      console.log(msg);
       return Promise.reject(new Error(msg))
     } else if (code === 1600001003) {
       ElNotification({

src/permission.ts

@@ -102,10 +102,17 @@ router.beforeEach(async (to, from, next) => {
     } else {
       if(import.meta.env.VITE_DEFAULT_SSO =='true'){
         authUtil.setTenantId("1")
+        // 正确构造包含查询参数的重定向URL
+        let redirectUrl = to.fullPath;
+        if (Object.keys(to.query).length > 0) {
+          const queryParams = new URLSearchParams(to.query as Record<string, string>).toString();
+          redirectUrl = `${to.path}?${queryParams}`;
+        }
+        
         const redirectUri =
         location.origin +
         '/social-login?' +
-       `type=100&redirect=${to.fullPath}`
+        `type=100&redirect=${encodeURIComponent(redirectUrl)}`
 
     // 进行跳转
         const res = await LoginApi.socialAuthRedirect(100, encodeURIComponent(redirectUri))

src/plugins/echarts/index.ts

@@ -7,7 +7,8 @@ import {
   MapChart,
   PictorialBarChart,
   RadarChart,
-  GaugeChart
+  GaugeChart,
+  CandlestickChart
 } from 'echarts/charts'
 
 import {
@@ -41,7 +42,8 @@ echarts.use([
   CanvasRenderer,
   PictorialBarChart,
   RadarChart,
-  GaugeChart
+  GaugeChart,
+  CandlestickChart
 ])
 
 export default echarts

src/router/modules/remaining.ts

@@ -57,6 +57,17 @@ const remainingRouter: AppRouteRecordRaw[] = [
     name: 'Home',
     meta: {},
     children: [
+      // {
+      //   path: 'index',
+      //   component: () => import('@/views/Home/Index10.vue'),
+      //   name: 'Index',
+      //   meta: {
+      //     title: t('router.home'),
+      //     icon: 'ep:home-filled',
+      //     noCache: false,
+      //     affix: true
+      //   }
+      // },
       {
         path: 'index',
         component: () => import('@/views/Home/Index10.vue'),
@@ -67,6 +78,30 @@ const remainingRouter: AppRouteRecordRaw[] = [
           noCache: false,
           affix: true
         }
+      },
+      {
+        path: 'region', // 区域数据看板
+        component: () => import('@/views/Home/Index12.vue'),
+        name: 'RegionIndex',
+        meta: {
+          title: '区域视角数据看板',
+          icon: 'ep:home-filled',
+          noCache: false,
+          hidden: true,
+          affix: false
+        }
+      },
+      {
+        path: 'park', // 园区数据看板
+        component: () => import('@/views/Home/Index13.vue'),
+        name: 'ParkIndex',
+        meta: {
+          title: '园区视角数据看板',
+          icon: 'ep:home-filled',
+          hidden: true,
+          noCache: false,
+          affix: false
+        }
       }
     ]
   },
@@ -364,6 +399,17 @@ const remainingRouter: AppRouteRecordRaw[] = [
       catalogue: true,
     }
   },
+  {
+    path: '/screen/powerMonitoring',
+    component: () => import('@/views/screen/powerMonitoring.vue'),
+    name: 'powerMonitoring',
+    meta: {
+      hidden: true,
+      title: '动环监控大屏',
+      noTagsView: true,
+      catalogue: true,
+    }
+  },
   {
     path: '/screen/main',
     component: () => import('@/views/screen/mainScreen.vue'),

src/utils/indexedDB.ts

@@ -0,0 +1,243 @@
+/**
+ * IndexedDB 工具类
+ * 用于存储和读取表格列配置（显隐/冻结/过滤/排序）
+ */
+
+const DB_NAME = 'lc_frontend_db'
+const DB_VERSION = 1
+const STORE_NAME = 'table_column_config'
+
+let dbInstance: IDBDatabase | null = null
+
+/**
+ * 打开数据库并确保对象存储存在
+ */
+const openDBWithStore = (version: number): Promise<IDBDatabase> => {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, version)
+
+    request.onerror = () => {
+      reject(request.error)
+    }
+
+    request.onsuccess = () => {
+      const db = request.result
+      
+      // 检查对象存储是否存在
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        // 对象存储不存在，需要升级数据库
+        db.close()
+        
+        // 用更高版本打开以触发升级
+        const upgradeRequest = indexedDB.open(DB_NAME, db.version + 1)
+        
+        upgradeRequest.onerror = () => {
+          reject(upgradeRequest.error)
+        }
+        
+        upgradeRequest.onupgradeneeded = (event) => {
+          const upgradeDb = (event.target as IDBOpenDBRequest).result
+          // 如果对象存储不存在，创建它
+          if (!upgradeDb.objectStoreNames.contains(STORE_NAME)) {
+            upgradeDb.createObjectStore(STORE_NAME, { keyPath: 'key' })
+          }
+        }
+        
+        upgradeRequest.onsuccess = () => {
+          resolve(upgradeRequest.result)
+        }
+      } else {
+        resolve(db)
+      }
+    }
+
+    request.onupgradeneeded = (event) => {
+      const db = (event.target as IDBOpenDBRequest).result
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME, { keyPath: 'key' })
+      }
+    }
+  })
+}
+
+/**
+ * 初始化 IndexedDB
+ */
+const initDB = (): Promise<IDBDatabase> => {
+  return new Promise((resolve, reject) => {
+    if (dbInstance) {
+      // 检查对象存储是否存在
+      if (dbInstance.objectStoreNames.contains(STORE_NAME)) {
+        resolve(dbInstance)
+        return
+      } else {
+        // 对象存储不存在，需要重新初始化
+        dbInstance.close()
+        dbInstance = null
+      }
+    }
+
+    // 先尝试获取当前数据库版本（不指定版本号打开）
+    const checkRequest = indexedDB.open(DB_NAME)
+
+    checkRequest.onsuccess = () => {
+      const checkDb = checkRequest.result
+      const currentVersion = checkDb.version
+      checkDb.close()
+
+      // 使用当前版本或更高版本打开
+      const targetVersion = Math.max(currentVersion, DB_VERSION)
+      openDBWithStore(targetVersion)
+        .then((db) => {
+          dbInstance = db
+          resolve(dbInstance)
+        })
+        .catch(reject)
+    }
+
+    checkRequest.onerror = () => {
+      // 如果检查失败，直接使用默认版本尝试打开
+      openDBWithStore(DB_VERSION)
+        .then((db) => {
+          dbInstance = db
+          resolve(dbInstance)
+        })
+        .catch(reject)
+    }
+  })
+}
+
+/**
+ * 列配置接口
+ */
+export interface ColumnConfig {
+  hide?: boolean
+  fixed?: string | boolean
+  sortable?: string | boolean
+  isShowColumn?: string // 'Y' 表示显示，'N' 表示隐藏
+  isExport?: string // 'Y' 表示导出，'N' 表示不导出
+}
+
+/**
+ * 保存列配置
+ * @param key 唯一标识（通常是 route.params.id）
+ * @param config 列配置对象，格式：{ prop: { hide, fixed, sortable, isExport } }
+ */
+export const saveColumnConfig = async (key: string, config: Record<string, ColumnConfig>): Promise<void> => {
+  try {
+    const db = await initDB()
+    const transaction = db.transaction([STORE_NAME], 'readwrite')
+    const store = transaction.objectStore(STORE_NAME)
+    
+    await new Promise<void>((resolve, reject) => {
+      const request = store.put({ key, config, updateTime: Date.now() })
+      request.onsuccess = () => resolve()
+      request.onerror = () => reject(request.error)
+    })
+  } catch (error) {
+    console.error('保存列配置失败:', error)
+  }
+}
+
+/**
+ * 读取列配置
+ * @param key 唯一标识（通常是 route.params.id）
+ * @returns 列配置对象，格式：{ prop: { hide, fixed, sortable, isExport } }
+ */
+export const getColumnConfig = async (key: string): Promise<Record<string, ColumnConfig> | null> => {
+  try {
+    const db = await initDB()
+    const transaction = db.transaction([STORE_NAME], 'readonly')
+    const store = transaction.objectStore(STORE_NAME)
+    
+    return new Promise<Record<string, ColumnConfig> | null>((resolve, reject) => {
+      const request = store.get(key)
+      request.onsuccess = () => {
+        const result = request.result
+        resolve(result ? result.config : null)
+      }
+      request.onerror = () => reject(request.error)
+    })
+  } catch (error) {
+    console.error('读取列配置失败:', error)
+    return null
+  }
+}
+
+/**
+ * 删除列配置
+ * @param key 唯一标识（通常是 route.params.id）
+ */
+export const deleteColumnConfig = async (key: string): Promise<void> => {
+  try {
+    const db = await initDB()
+    const transaction = db.transaction([STORE_NAME], 'readwrite')
+    const store = transaction.objectStore(STORE_NAME)
+    
+    await new Promise<void>((resolve, reject) => {
+      const request = store.delete(key)
+      request.onsuccess = () => resolve()
+      request.onerror = () => reject(request.error)
+    })
+  } catch (error) {
+    console.error('删除列配置失败:', error)
+  }
+}
+
+/**
+ * 保存搜索区域显示状态
+ * @param key 唯一标识（通常是 route.params.id）
+ * @param visible 是否显示
+ */
+export const saveSearchVisible = async (key: string, visible: boolean): Promise<void> => {
+  try {
+    const db = await initDB()
+    const transaction = db.transaction([STORE_NAME], 'readwrite')
+    const store = transaction.objectStore(STORE_NAME)
+    
+    const data = await new Promise<any>((resolve, reject) => {
+      const request = store.get(key)
+      request.onsuccess = () => resolve(request.result)
+      request.onerror = () => reject(request.error)
+    })
+    
+    const config = data?.config || {}
+    await new Promise<void>((resolve, reject) => {
+      const request = store.put({ 
+        key, 
+        config,
+        searchVisible: visible,
+        updateTime: Date.now() 
+      })
+      request.onsuccess = () => resolve()
+      request.onerror = () => reject(request.error)
+    })
+  } catch (error) {
+    console.error('保存搜索区域显示状态失败:', error)
+  }
+}
+
+/**
+ * 读取搜索区域显示状态
+ * @param key 唯一标识（通常是 route.params.id）
+ * @returns 是否显示
+ */
+export const getSearchVisible = async (key: string): Promise<boolean | null> => {
+  try {
+    const db = await initDB()
+    const transaction = db.transaction([STORE_NAME], 'readonly')
+    const store = transaction.objectStore(STORE_NAME)
+    
+    return new Promise<boolean | null>((resolve, reject) => {
+      const request = store.get(key)
+      request.onsuccess = () => {
+        const result = request.result
+        resolve(result && result.searchVisible !== undefined ? result.searchVisible : null)
+      }
+      request.onerror = () => reject(request.error)
+    })
+  } catch (error) {
+    console.error('读取搜索区域显示状态失败:', error)
+    return null
+  }
+}

src/views/Login/components/LoginForm.vue

@@ -1,14 +1,6 @@
 <template>
-  <el-form
-    v-show="getShow"
-    ref="formLogin"
-    :model="loginData.loginForm"
-    :rules="LoginRules"
-    class="login-form login-form-default"
-    label-position="top"
-    label-width="120px"
-    size="large"
-  >
+  <el-form v-show="getShow" ref="formLogin" :model="loginData.loginForm" :rules="LoginRules"
+    class="login-form login-form-default" label-position="top" label-width="120px" size="large">
     <el-row style="margin-right: -10px; margin-left: -10px">
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
@@ -17,40 +9,23 @@
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
-          <el-input
-            v-model="loginData.loginForm.tenantName"
-            :placeholder="t('login.tenantNamePlaceholder')"
-            :prefix-icon="iconHouse"
-            link
-            type="primary"
-          />
+          <el-input v-model="loginData.loginForm.tenantName" :placeholder="t('login.tenantNamePlaceholder')"
+            :prefix-icon="iconHouse" link type="primary" />
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="username">
-          <el-input
-            v-model="loginData.loginForm.username"
-            :placeholder="t('login.usernamePlaceholder')"
-            :prefix-icon="iconAvatar"
-          />
+          <el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')"
+            :prefix-icon="iconAvatar" />
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="password">
-          <el-input
-            v-model="loginData.loginForm.password"
-            :placeholder="t('login.passwordPlaceholder')"
-            :prefix-icon="iconLock"
-            show-password
-            type="password"
-            @keyup.enter="getCode()"
-          />
+          <el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')"
+            :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" />
         </el-form-item>
       </el-col>
-      <el-col
-        :span="24"
-        style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px"
-      >
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px">
         <el-form-item>
           <el-row justify="space-between" style="width: 100%">
             <el-col :span="6">
@@ -66,13 +41,8 @@
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px" class="login-btn-col">
         <el-form-item>
-          <XButton
-            :loading="loginLoading"
-            :title="t('login.login')"
-            class="w-[100%]"
-            type="primary"
-            @click="getCode()"
-          />
+          <XButton :loading="loginLoading" :title="t('login.login')" class="w-[100%]" type="primary"
+            @click="getCode()" />
           <div v-if="loginType == 'easy'" class="w-100% mt-6px flex justify-end">
             <el-dropdown @command="easyCommand">
               <div class="mt--2px cursor-pointer">
@@ -95,13 +65,8 @@
           </div>
         </el-form-item>
       </el-col>
-      <Verify
-        ref="verify"
-        :captchaType="captchaType"
-        :imgSize="{ width: '400px', height: '200px' }"
-        mode="pop"
-        @success="handleLogin"
-      />
+      <Verify ref="verify" :captchaType="captchaType" :imgSize="{ width: '400px', height: '200px' }" mode="pop"
+        @success="handleLogin" />
       <template v-if="!loginType">
         <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
           <!-- <el-form-item>
@@ -127,15 +92,8 @@
         <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
           <el-form-item>
             <div class="w-[100%] flex justify-center">
-              <Icon
-                v-for="(item, key) in socialList"
-                :key="key"
-                :icon="item.icon"
-                :size="50"
-                class="anticon cursor-pointer"
-                color="#999"
-                @click="doSocialLogin(item.type)"
-              />
+              <Icon v-for="(item, key) in socialList" :key="key" :icon="item.icon" :size="50"
+                class="anticon cursor-pointer" color="#999" @click="doSocialLogin(item.type)" />
             </div>
           </el-form-item>
         </el-col>
@@ -310,7 +268,12 @@ const handleLogin = async (params) => {
     } else {
       push({ path: redirect.value || permissionStore.addRouters[0].path })
     }
-  } finally {
+  }
+  catch (e) {
+    loginLoading.value = false
+    loading.value?.close()
+  }
+  finally {
     loginLoading.value = false
     loading.value?.close()
   }

src/views/bpm/processInstance/detail/TaskCCDialogForm.vue

@@ -14,7 +14,7 @@
         <el-input v-model="formData.processInstanceKey" disabled placeholder="请输入流程标识" />
       </el-form-item>
       <el-form-item label="规则类型" prop="type">
-        <el-select v-model="formData.type" clearable style="width: 100%">
+        <el-select v-model="formData.type" clearable style="width: 100%" disabled>
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE)"
             :key="dict.value"
@@ -165,7 +165,7 @@ const open = async (row) => {
   resetForm()
   // 2. 再设置表单
   if (row != null) {
-    formData.value.type = undefined as unknown as number
+    formData.value.type = 30
     formData.value.taskName = row.name
     formData.value.taskId = row.id
     formData.value.processInstanceName = row.processInstance.name

src/views/bpm/processInstance/detail/index.vue

@@ -41,18 +41,20 @@
             <Icon icon="ep:close"/>
             不通过
           </el-button>
-          <el-button type="primary" @click="openTaskUpdateAssigneeForm(item.id)">
-            <Icon icon="ep:edit" />
-            转办
+
+          <el-button type="primary" @click="handleCC(item)">
+            <Icon icon="ep:position"/>
+            抄送
           </el-button>
-          <el-button type="primary" @click="handleDelegate(item)">
+          <!-- <el-button type="primary" @click="handleDelegate(item)">
             <Icon icon="ep:position" />
             委派
           </el-button>
          <el-button type="primary" @click="handleSign(item)">
            <Icon icon="ep:plus" />
            加签
-          </el-button>
+         </el-button> -->
+
           <el-button type="warning" @click="handleBack(item)">
             <Icon icon="ep:back"/>
             回退
@@ -102,6 +104,7 @@
     <TaskDelegateForm ref="taskDelegateForm" @success="getDetail"/>
     <!-- 加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
     <TaskAddSignDialogForm ref="taskAddSignDialogForm" @success="getDetail"/>
+    <TaskCCDialogForm ref="taskCCDialogForm"/>
   </ContentWrap>
 </template>
 <script lang="ts" setup>
@@ -119,6 +122,7 @@ import { registerComponent } from '@/utils/routerHelper'
 import {isEmpty} from '@/utils/is'
 import router from '@/router/index'
 import {$Print} from '@smallwei/avue'
+import TaskCCDialogForm from '../../processInstance/detail/TaskCCDialogForm.vue'
 
 defineOptions({name: 'BpmProcessInstanceDetail'})
 
@@ -128,6 +132,7 @@ const { proxy } = getCurrentInstance() as any
 
 const userId = useUserStore().getUser.id // 当前登录的编号
 const id = query.id as unknown as number // 流程实例的编号
+const read = query.read as unknown as boolean // 是否是待阅的标记
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref<any>({}) // 流程实例
 const bpmnXML = ref('') // BPMN XML
@@ -173,9 +178,17 @@ const handleAudit = async (task, pass) => {
   getDetail()
 }
 
+const taskCCDialogForm = ref()
+/** 处理抄送按钮 */
+const handleCC = (row) => {
+  taskCCDialogForm.value.open(row)
+}
+
+
 const printPage = async () => {
 
- const { href } = router.resolve({ name: 'BpmProcessInstanceInfo', 
+  const {href} = router.resolve({
+    name: 'BpmProcessInstanceInfo',
     query: {id: String(id), isPrint: '1'}
   })
   window.open(href, '_blank', 'noopener,noreferrer')
@@ -206,6 +219,15 @@ const handleSign = async (task) => {
   taskAddSignDialogForm.value.open(task.id)
 }
 
+// 处理待阅的操作
+const handleRead = async () => {
+  if (read) {
+    // 向后端发送接口，让后端发起已阅接口
+    const data = await ProcessInstanceApi.handleProcessInstanceCC(id + '')
+    console.log(JSON.stringify(data))
+  }
+}
+
 /** 获得详情 */
 const getDetail = () => {
   // 1. 获得流程实例相关
@@ -231,6 +253,10 @@ const getProcessInstance = async () => {
     if (processDefinition.formType === 10) {
       detailForm.value.formId = processDefinition.formId
       detailForm.value.optionsData = JSON.parse(processDefinition.formConf)
+      if (data.formVariables.jeelowcode_subtable_data) {
+        data.formVariables = {...data.formVariables, ...data.formVariables.jeelowcode_subtable_data}
+        delete data.formVariables.jeelowcode_subtable_data
+      }
       detailForm.value.defaultData = data.formVariables
       // setConfAndFields2(
       //   detailForm,
@@ -317,6 +343,7 @@ const loadRunningTask = (tasks) => {
 
 /** 初始化 */
 onMounted(async () => {
+  await handleRead()
   await getDetail()
   await nextTick()
   if (query.isPrint === '1') {
@@ -325,3 +352,27 @@ onMounted(async() => {
   }
 })
 </script>
+<style>
+/* 打印样式 */
+@media print {
+  /* 设置页面大小 */
+  @page {
+    size: auto; /* 自动适应页面大小 */
+    margin: 10mm; /* 设置页面边距 */
+  }
+ 
+  /* 重置页面元素的样式 */
+  body, html, div {
+    height: auto !important; /* 确保内容高度自动调整 */
+    width: auto !important; /* 确保内容宽度自动调整 */
+    overflow: visible !important; /* 允许内容超出页面 */
+    page-break-inside: avoid; /* 避免内容被分页拆分 */
+  }
+ 
+  /* 添加分页符 */
+  .page-break {
+    display: block;
+    page-break-before: always; /* 在每个分页符之前强制分页 */
+  }
+}
+</style>

src/views/bpm/processInstance/index.vue

@@ -38,8 +38,9 @@
         />
       </template>
       <template #menu-left>
-        <el-button type="primary" v-hasPermi="['bpm:process-instance:query']" @click="handleCreate">
-          <Icon icon="ep:plus" class="mr-5px" /> 发起流程
+        <el-button type="primary" v-hasPermi="['bpm:process-instance:create']" @click="handleCreate">
+          <Icon icon="ep:plus" class="mr-5px"/>
+          发起流程
         </el-button>
       </template>
       <!-- 自定义操作栏 -->
@@ -47,20 +48,20 @@
         <el-button
           link
           type="primary"
-          v-hasPermi="['bpm:process-instance:cancel']"
+          v-hasPermi="['bpm:process-instance:query']"
           @click="handleDetail(row)"
         >
           详情
         </el-button>
-        <!-- <el-button
+        <el-button
           link
           type="danger"
-          v-if="row.result === 1"
-          v-hasPermi="['bpm:process-instance:query']"
+          v-if="row.result === 1|| row.result === 2"
+          v-hasPermi="['bpm:process-instance:cancel']"
           @click="handleCancel(row)"
         >
           取消
-        </el-button> -->
+        </el-button>
       </template>
     </avue-crud>
   </ContentWrap>
@@ -203,7 +204,8 @@ const searchChange = (params, done) => {
 
 /** 清空按钮操作 */
 const resetChange = () => {
-  searchChange({}, () => {})
+  searchChange({}, () => {
+  })
 }
 
 const sizeChange = (pageSize) => {

src/views/bpm/task/copy/index.vue

@@ -0,0 +1,175 @@
+<!-- 工作流，抄送我的流程 -->
+<template>
+  <ContentWrap>
+    <avue-crud
+      ref="crudRef"
+      v-model="tableForm"
+      v-model:page="tablePage"
+      v-model:search="tableSearch"
+      :data="tableData"
+      :option="tableOption"
+      :permission="permission"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+      @refresh-change="getTableData"
+      @size-change="sizeChange"
+      @current-change="currentChange"
+    >
+      <template #menu="{ row }">
+        <el-button link type="primary" @click="handleAudit(row)">流程</el-button>
+      </template>
+    </avue-crud>
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import {dateFormatter} from '@/utils/formatTime'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+
+defineOptions({
+  name: 'BpmCopyTask'
+})
+
+// 路由
+const {push} = useRouter()
+// 列表的加载中
+const loading = ref(true)
+
+const {getCurrPermi} = useCrudPermi()
+
+// 表格的配置
+const tableOption = reactive({
+  addBtn: false,
+  editBtn: false,
+  delBtn: false,
+  viewBtn: true,
+  viewBtnText: '详情',
+  viewBtnIcon: 'none',
+  align: 'center',
+  headerAlign: 'center',
+  searchMenuSpan: 6,
+  searchMenuPosition: 'left',
+  labelSuffix: ' ',
+  span: 24,
+  dialogWidth: '50%',
+  column: {
+    taskId: {
+      label: '任务编号'
+    },
+    taskName: {
+      label: '任务名称'
+    },
+    processInstanceId: {
+      label: '流程编号',
+      search: true,
+    },
+    processInstanceName: {
+      label: '所属流程',
+      search: true,
+    },
+    startUserNickname: {
+      label: '流程发起人',
+    },
+    reason: {
+      label: '抄送原因'
+    },
+    creatorNickname: {
+      label: '抄送人'
+    },
+    createTime: {
+      label: '抄送时间',
+      type: 'datetime',
+      width: 180,
+      formatter: (row: any, value: any, rowv: any, column: any) => {
+        return dateFormatter(row, column, value)
+      }
+    },
+    searchCreateTime: {
+      label: '抄送时间',
+      display: false,
+      hide: true,
+      search: true,
+      searchType: 'datetimerange',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      startPlaceholder: '开始时间',
+      endPlaceholder: '结束时间',
+      searchRange: true,
+    }
+  }
+})
+
+const tableForm = ref<any>({})
+const tableData = ref([])
+const tableSearch = ref<any>({})
+const tablePage = ref({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
+})
+
+const permission = getCurrPermi(['bpm:task'])
+
+const crudRef = ref()
+useCrudHeight(crudRef)
+
+const getTableData = async () => {
+  // 列表的加载中...
+  loading.value = true
+  // 拼接查询参数
+  let searchObj = {
+    ...tableSearch.value,
+    pageNo: tablePage.value.currentPage,
+    pageSize: tablePage.value.pageSize
+  }
+  // 处理时间参数，如果为空则去掉这个属性
+  if (!searchObj.createTime?.length) delete searchObj.createTime
+  // 去掉空字符串属性
+  for (let key in searchObj) if (searchObj[key] === '') delete searchObj[key]
+
+  // 请求我的待阅数据
+  try {
+    const data = await ProcessInstanceApi.getProcessInstanceCCPage(searchObj)
+    tableData.value = data.list
+    tablePage.value.total = data.total
+  } finally {
+    // 无论请求成功或者失败，这里都需要将加载中关闭
+    loading.value = false
+  }
+
+}
+
+const searchChange = (params: any, done: any) => {
+  tablePage.value.currentPage = 1
+  // 获取数据
+  getTableData().finally(() => done())
+}
+
+const resetChange = () => {
+  searchChange({}, () => {
+  })
+}
+
+const sizeChange = (pageSize) => {
+  tablePage.value.pageSize = pageSize
+  resetChange()
+}
+
+const currentChange = (currentPage) => {
+  tablePage.value.currentPage = currentPage
+  getTableData()
+}
+
+const handleAudit = (row: any) => {
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstanceId
+    }
+  })
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getTableData()
+})
+
+</script>

src/views/bpm/task/todo/index.vue

@@ -26,7 +26,7 @@
       </template>
       <template #menu="{ row }">
         <el-button link type="primary" @click="handleAudit(row)">审批</el-button>
-<!--        <el-button link type="primary" @click="handleCC(row)">抄送</el-button>-->
+        <el-button link type="primary" @click="handleCC(row)">抄送</el-button>
       </template>
     </avue-crud>
     <TaskCCDialogForm ref="taskCCDialogForm" />

src/views/bpm/taskAssignRule/index.vue

@@ -65,6 +65,7 @@ const getUserKey = (val) => {
   else if ([20, 21].includes(val)) key = 'deptIds'
   else if (val == 22) key = 'postIds'
   else if ([30, 31, 32].includes(val)) key = 'userIds'
+  else if (val == 35) key = 'userSelects'
   else if (val == 40) key = 'userGroupIds'
   else if (val == 50) key = 'scripts'
   return key
@@ -95,7 +96,8 @@ const tableOption = reactive({
           postIds: {display: false},
           userIds: {display: false},
           userGroupIds: {display: false},
-          scripts: { display: false }
+          scripts: {display: false},
+          userSelects: {display: false},
         }
         const key = getUserKey(val)
         if (key) columnObj[key].display = true
@@ -112,6 +114,7 @@ const tableOption = reactive({
         let arr = row.options.map((id) => {
           if (key == 'deptIds') return lowStore.dicObj.deptSelect?.[id] || id
           else if (key == 'userIds') return lowStore.dicObj.userSelect?.[id] || id
+          else if (key == 'userSelects') return ''
           else return dicObj.value[key][id]
         })
 
@@ -198,7 +201,7 @@ const rowUpdate = async (form, index, done, loading) => {
   const delKey = ['roleIds', 'deptIds', 'postIds', 'userIds', 'userGroupIds', 'scripts']
   if (key) {
     if (typeof form[key] == 'number') form[key] = form[key] + ''
-    const value = form[key]
+    const value = key === 'userSelects' ? '' : form[key]
     form.options = typeof value == 'string' ? value.split(',') : value
   }
   delKey.forEach((prop) => delete form[prop])

src/views/document/TabsCardDocument.vue

@@ -61,6 +61,13 @@ const tabsPaneList = ref([
     calcHeight: 200,
     fixedSearch: {file_main_type: 4}
   },
+  {
+    label: '工作档案',
+    name: 'workArchive',
+    formId: '1966386366515343361',
+    calcHeight: 200,
+    fixedSearch: {file_main_type: 5}
+  },
 ])
 
 // 定义点击tab的事件动作

src/views/lowdesign/tableDesign/index.vue

@@ -86,6 +86,17 @@
             <Icon :size="14" icon="hugeicons:java"/>
             <span class="ml-3px!">JAVA增强</span>
           </el-button>
+          <!-- 批量同步 -->
+          <el-button
+            type="primary"
+            :size="size"
+            @click="handleBatchSync"
+            v-hasPermi="['jeelowcode:dbform:sync']"
+          >
+            <Icon :size="14" icon="simple-icons:oracle"/>
+            <span class="ml-3px!">批量同步</span>
+          </el-button>
+
         </template>
         <template #menu="{ size, row }">
           <div class="flex justify-center flex-items-center">
@@ -190,7 +201,8 @@
                   @click="openDataOrigin"
                   :disabled="!tableForm.dataOrigin"
                 >
-                  <Icon :size="14" icon="lucide:text-search"></Icon> <span>数据源SQL配置</span>
+                  <Icon :size="14" icon="lucide:text-search"></Icon>
+                  <span>数据源SQL配置</span>
                 </el-button>
                 <el-button
                   type="primary"
@@ -211,10 +223,12 @@
                   <span>表格扩展配置</span>
                 </el-button>
                 <el-button @click="sortPopup = true">
-                  <Icon :size="14" icon="mdi:sort"></Icon> <span>默认排序</span>
+                  <Icon :size="14" icon="mdi:sort"></Icon>
+                  <span>默认排序</span>
                 </el-button>
                 <el-button @click="searchPopup = true">
-                  <Icon :size="14" icon="lucide:text-search"></Icon> <span>默认搜索</span>
+                  <Icon :size="14" icon="lucide:text-search"></Icon>
+                  <span>默认搜索</span>
                 </el-button>
               </div>
             </template>
@@ -417,7 +431,8 @@
                 size="small"
                 type="primary"
                 @click="copySampleStr(key)"
-                >点击复制</el-button
+              >点击复制
+              </el-button
               >
             </div>
           </div>
@@ -1524,7 +1539,8 @@ const searchChange = (params, done) => {
 
 /** 清空按钮操作 */
 const resetChange = () => {
-  searchChange({}, () => {})
+  searchChange({}, () => {
+  })
 }
 
 const sizeChange = (pageSize) => {
@@ -1738,13 +1754,35 @@ const rowDel = async (form) => {
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getTableData()
-  } catch {}
+  } catch {
+  }
 }
 
 const beforeUnload = (event) => {
   if (isUnload.value) return (event.returnValue = '您确定要关闭页面吗？')
 }
 
+/** 批量同步 **/
+const handleBatchSync = async () => {
+  // 首先需要查询有没有需要同步的表单，如果没有则提示消息并结束，如果有则打开弹窗
+  let searchObj = {
+    isDbSync: 'N',
+    pageNo: tablePage.value.currentPage,
+    pageSize: -1
+  }
+  const data = await TableApi.getDbList(searchObj)
+  if (data?.records?.length > 0) {
+    // 将data.records取出来，每个记录的id作为row.id，并且发起普通同步
+    const promises = data.records.map((row) => TableApi.asyncDbData(row.id, 'default'))
+    await Promise.all(promises).catch(() => message.alert('同步失败'))
+    // 刷新列表
+    getTableData()
+  } else {
+    // 没有需要同步的表单，提示信息并结束方法
+    message.info('没有需要同步的表单')
+  }
+}
+
 /** 初始化 **/
 onMounted(async () => {
   window.addEventListener('beforeunload', beforeUnload)

src/views/screen/companyScreen.vue

@@ -2,10 +2,15 @@
   <div class="dashboard-container">
     <!-- 顶部标题栏 -->
     <div class="header-container">
-      <div class="header-left">
-        <img class="back-img" @click="returnToHeadquarters" src="@/assets/images/screen/back_image.png" />
-        <div class="back-button"> {{ selectedPark }} </div>
-      </div>
+      <HeaderSelector
+        back-button-type="image"
+        :show-back-button="true"
+        :on-back="returnToHeadquarters"
+        :display-text="selectedPark"
+        :clickable="false"
+        :show-selector-indicator="false"
+        selector-type="none"
+      />
       <h1 class="header-title">{{ selectedPark }}综合监控大屏</h1>
       <div class="date-wrapper">
         <span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
@@ -29,7 +34,10 @@
               </div>
               <span>总计</span>
               <div class="number-wrapper">
-                <span class="total-number" v-for="(digit, index) in totalCountDigits" :key="index">
+                <div v-if="isFirstLoading" class="skeleton-number-wrapper">
+                  <div v-for="i in 4" :key="i" class="skeleton-number skeleton-pulse"></div>
+                </div>
+                <span v-else class="total-number" v-for="(digit, index) in totalCountDigits" :key="index">
                   {{ digit }}
                 </span>
               </div>
@@ -37,50 +45,76 @@
             </div>
             <div class="top-card-right">
               <div class="top-card-right-item">
+                <div>
                   <img width="18px" src="@/assets/images/v2_rel0n8.png" />
                   <span>正式员工</span>
-                <div class="type-number-wrapper" style="margin-left: 2vw">
+                </div>
+                <div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
+                  <div v-if="isFirstLoading" class="skeleton-type-number-wrapper">
+                    <div v-for="i in formalEmployeeDigits.length" :key="i" class="skeleton-type-number skeleton-pulse"></div>
+                  </div>
+                  <div v-else class="type-number-wrapper">
                     <span class="type-number" v-for="(digit, index) in formalEmployeeDigits" :key="index">
                       {{ digit }}
                     </span>
                   </div>
+                </div>
                 <span>人</span>
               </div>
               <div class="top-card-right-item">
+                <div>
                   <img width="18px" src="@/assets/images/v2_rel0n23.png" />
                   <span>外协人员</span>
-                <div class="type-number-wrapper" style="margin-left: 1vw">
+                </div>
+                <div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
+                  <div v-if="isFirstLoading" class="skeleton-type-number-wrapper">
+                    <div v-for="i in externalStaffDigits.length" :key="i" class="skeleton-type-number skeleton-pulse"></div>
+                  </div>
+                  <div v-else class="type-number-wrapper">
                     <span class="type-number" v-for="(digit, index) in externalStaffDigits" :key="index">
                       {{ digit }}
                     </span>
                   </div>
+                </div>
                 <span>人</span>
               </div>
               <div class="top-card-right-item">
+                <div>
                   <img width="18px" src="@/assets/images/24508_654.png" />
                   <span>访客</span>
-                <div class="type-number-wrapper">
+                </div>
+                <div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
+                  <div v-if="isFirstLoading" class="skeleton-type-number-wrapper">
+                    <div v-for="i in visitorDigits.length" :key="i" class="skeleton-type-number skeleton-pulse"></div>
+                  </div>
+                  <div v-else class="type-number-wrapper">
                     <span class="type-number" v-for="(digit, index) in visitorDigits" :key="index">
                       {{ digit }}
                     </span>
                   </div>
+                </div>
                 <span>人</span>
               </div>
             </div>
           </div>
           <div class="bottom-card">
             <div class="bottom-card-title">
-              <span>隐患排查治理</span>
+              <!-- 隐患排查治理 标题需要隐藏 2025-10-31 -->
+              <span></span>
               <img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
             </div>
             <div class="type-wrapper">
               <div class="type-item">
                 <span class="type-btn yellow">重大</span>
-                <span class="type-num">{{ mockData.hiddenDangerData.severityCount }}</span>
+                <div v-if="isFirstLoading" class="type-num skeleton-pulse"></div>
+                <span v-else 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">{{ mockData.hiddenDangerData.generalCount }}</span>
+                <div v-if="isFirstLoading" class="type-num skeleton-pulse"></div>
+                <span v-else class="type-num cursor-pointer" @click="handleGeneralCountClick">{{
+                  mockData.hiddenDangerData.generalCount }}</span>
               </div>
               <!-- <div class="type-item">
                 <span class="type-btn blue">较大</span>
@@ -89,6 +123,7 @@
 
             </div>
             <div class="hazard-wrapper">
+              <!-- <div v-if="isFirstLoading" class="skeleton-chart skeleton-pulse"></div> -->
               <div ref="progressChartRef" class="progress-chart"></div>
               <div class="progress-legend">
                 <div class="legend-item"><span class="dot red"></span>已逾期</div>
@@ -103,15 +138,15 @@
         </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>
-              <span
-class="tab" :class="{ active: activeTab === '安全培训考试' }"
+              <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>
             </div>
           </div>
           <img style="margin: 8px 0" src="@/assets/images/title_border_line.png" />
@@ -151,7 +186,12 @@ class="tab" :class="{ active: activeTab === '安全培训考试' }"
                   <img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
                 </div>
               </div>
-          <AlertList maxHeight="40vh" style="margin-left: 1vw;" :table-title="tableTitle" :list-data="examList" />
+              <AlertList
+                maxHeight="40vh"
+                style="margin-left: 1vw;"
+                :table-title="tableTitle"
+                :list-data="examList"
+              />
             </template>
 <template v-if="activeTab === '应急预案及演练'">
               <div class="bottom-card">
@@ -160,9 +200,12 @@ class="tab" :class="{ active: activeTab === '安全培训考试' }"
                   <img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
                 </div>
               </div>
-          <AlertList maxHeight="40vh" style="margin-left: 1vw;" :table-title="trainingTableTitle" :list-data="drillList" />
+              <AlertList maxHeight="40vh" style="margin-left: 1vw;" :table-title="trainingTableTitle"
+                :list-data="drillList" />
             </template>
-        </div>
+</div> -->
+          <RiskStatisticsPanel :loading="isFirstLoading" :riskStatistics="riskStatistics" :dangerDetail="dangerDetail" :park="parkValue"
+            @tab-change="handleRiskTabChange" :campus_id="query.campus_id" />
         </div>
       </div>
       <div class="right-wrapper">
@@ -175,32 +218,39 @@ class="tab" :class="{ active: activeTab === '安全培训考试' }"
           <div class="tip-container">
             <div class="tip-image">
               <img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
-              <span class="number">{{ mockData.alertData.total }}</span>
+              <div v-if="isFirstLoading" style="width: 20px; height: 20px" class="number skeleton-pulse"></div>
+              <span v-else class="number">{{ mockData.alertData.total }}</span>
             </div>
             <img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
             <div class="tip-content">
               <div class="col-item">
                 <img src="@/assets/images/screen/warning_img.png" width="23" />
                 <span>告警总数</span>
-                <span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.total }}</span>
+                <div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+                <span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.total }}</span>
               </div>
               <div class="col-item">
                 <span>已处理</span>
-                <span style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ mockData.alertData.processed
+                <div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+                <span v-else style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ mockData.alertData.processed
                 }}</span>
               </div>
               <div class="col-item" style=" display: flex;margin-left: 2vw; align-items: center;">
                 <span>待处理</span>
-                <span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.pending }}</span>
+                <div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+                <span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.pending
+                }}</span>
               </div>
               <div class="col-item" style=" display: flex;margin-left: 2vw; align-items: center;">
                 <span>处理中</span>
-                <span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.processing }}</span>
+                <div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+                <span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.processing
+                }}</span>
               </div>
             </div>
           </div>
           <div style=" display: flex; width: 100%;margin-top: 1vw; flex: 1; justify-content: flex-end;">
-            <AlertList style="margin-right: 1vw;" title="告警详情" :list-data="mockData.alertData.details" />
+            <AlertList :loading="isFirstLoading" linkUrl="http://10.0.64.20/security/console/command-center?p=tabl" style="margin-right: 1vw;" title="告警详情" :list-data="mockData.alertData.details" />
           </div>
         </div>
         <!-- 右下区域 -->
@@ -210,32 +260,41 @@ class="tab" :class="{ active: activeTab === '安全培训考试' }"
           <div class="tip-container">
             <div class="tip-image">
               <img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
-              <span class="number">{{ mockData.timeoutWorkOrders.total }}</span>
+              <div v-if="isFirstLoading" style="width: 20px; height: 20px" class="number skeleton-pulse"></div>
+              <span v-else class="number">{{ mockData.timeoutWorkOrders.total }}</span>
             </div>
             <img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
             <div class="tip-content">
               <div class="col-item">
                 <img src="@/assets/images/screen/warning_img.png" width="23" />
                 <span>超时工单数</span>
-                <span style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ mockData.timeoutWorkOrders.total }}</span>
+                <div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+                <span
+                  v-else
+                  style="font-size: 1.2rem; marker-start: 2vw; color: red;"
+                >{{ mockData.timeoutWorkOrders.total }}</span>
               </div>
             </div>
           </div>
           <div style=" display: flex; width: 100%;margin-top: 1vw; flex: 1; justify-content: flex-end;">
-            <AlertList style="margin-right: 1vw;" title="工单详情" :list-data="mockData.timeoutWorkOrders.details" />
+            <AlertList
+              :loading="isFirstLoading"
+              linkUrl="http://10.0.64.20/pms/workorder-list"
+              style="margin-right: 1vw;"
+              title="工单详情"
+              :list-data="mockData.timeoutWorkOrders.details"
+            />
           </div>
         </div>
       </div>
       <div class="center-container">
         <!-- 中部区域 -->
-        <ParkCenter
-:parkName="selectedPark" :backgroundImage="backgroundImage" @point-hover="handlePointHover"
+        <ParkCenter :parkName="selectedPark" :backgroundImage="backgroundImage" @point-hover="handlePointHover"
           @point-leave="handlePointLeave" />
       </div>
 
       <!-- 点位信息弹窗 -->
-      <PointInfoPopup
-v-if="showPointPopup" :visible="showPointPopup" :point-info="currentPoint"
+      <PointInfoPopup v-if="showPointPopup" :visible="showPointPopup" :point-info="currentPoint"
         :park-name="selectedPark || '雄安园区'" />
     </div>
   </div>
@@ -243,12 +302,17 @@ v-if="showPointPopup" :visible="showPointPopup" :point-info="currentPoint"
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+
+// 创建 AbortController 用于取消请求
+const abortController = new AbortController()
 import * as echarts from 'echarts'
 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'
+import HeaderSelector from './components/HeaderSelector.vue'
 
 interface PointPosition {
   label: string
@@ -261,6 +325,17 @@ const totalCountDigits = computed(() => String(mockData.totalCount).split('').ma
 const formalEmployeeDigits = computed(() => String(mockData.formalEmployeeCount).split('').map(Number))
 const externalStaffDigits = computed(() => String(mockData.externalStaffCount).split('').map(Number))
 const visitorDigits = computed(() => String(mockData.visitorCount).split('').map(Number))
+
+// 计算数字区域的最大宽度
+// 每个数字框宽度 14px，gap 2px
+const maxNumberWidth = computed(() => {
+  const formalLen = formalEmployeeDigits.value.length
+  const externalLen = externalStaffDigits.value.length
+  const visitorLen = visitorDigits.value.length
+  const maxLen = Math.max(formalLen, externalLen, visitorLen)
+  // 宽度 = 数字个数 * 14px + (数字个数 - 1) * 2px
+  return maxLen > 0 ? maxLen * 14 + (maxLen - 1) * 2 : 0
+})
 const route = useRoute()
 const router = useRouter()
 
@@ -273,6 +348,9 @@ const currentTime = ref<string>('')
 const activeTab = ref<string>('高危作业')
 const showPointPopup = ref(false)
 const currentPoint = ref<PointPosition | null>(null)
+
+// 首次加载状态
+const isFirstLoading = ref<boolean>(true)
 const progressChart = ref<echarts.ECharts | null>(null)
 const progressChartRef = ref<HTMLElement | null>(null)
 const timeUpdateTimerId = ref<ReturnType<typeof setInterval> | null>(null)
@@ -282,6 +360,110 @@ const unfinishedCount = ref<number>(0)
 const inProgressCount = ref<number>(0)
 const finishedCount = ref<number>(0)
 
+const handleSeverityCountClick = () => {
+  window.open('http://10.0.64.20/pms/workorder-list', '_blank')
+}
+const handleGeneralCountClick = () => {
+  window.open('http://10.0.64.20/pms/workorder-list', '_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 }, { signal: abortController.signal }).catch(error => {
+        console.error('获取维保任务数据失败:', error)
+        return { records: [] }
+      }),
+      getWorkOrderStatistics({ workOrderType, taskType: '巡检任务', campus_id: query.campus_id }, { signal: abortController.signal }).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 = [
   {
@@ -542,12 +724,14 @@ const initProgressChart = () => {
           labelLayout: function (params: any) {
             const isLeft = params.labelRect.x < width / 2;
             const points = params.labelLinePoints;
+            if (points && points.length && points[2]) {
               points[2][0] = isLeft
                 ? params.labelRect.x
                 : params.labelRect.x + params.labelRect.width;
               return {
                 labelLinePoints: points
               };
+            }
           },
         }
       ]
@@ -566,43 +750,83 @@ interface RegionItem {
   code: string
   pic_url: string
 }
+// 缓存工具函数 - 三个页面共享的缓存
+const CACHE_KEY = 'shared_regionOption_cache'
+const CACHE_DURATION = 5 * 60 * 1000 // 5分钟
+
+interface CacheData {
+  records: any[] // 原始接口返回的数据
+  timestamp: number
+}
+
+const getCachedRegionOption = (): any[] | null => {
+  try {
+    const cached = sessionStorage.getItem(CACHE_KEY)
+    if (cached) {
+      const cacheData: CacheData = JSON.parse(cached)
+      const now = Date.now()
+      // 检查缓存是否在有效期内
+      if (now - cacheData.timestamp < CACHE_DURATION) {
+        console.log('使用缓存的 regionOption 数据')
+        return cacheData.records
+      } else {
+        console.log('缓存已过期，清除缓存')
+        sessionStorage.removeItem(CACHE_KEY)
+      }
+    }
+  } catch (error) {
+    console.error('读取缓存失败:', error)
+    sessionStorage.removeItem(CACHE_KEY)
+  }
+  return null
+}
+
+const setCachedRegionOption = (records: any[]) => {
+  try {
+    const cacheData: CacheData = {
+      records,
+      timestamp: Date.now()
+    }
+    sessionStorage.setItem(CACHE_KEY, JSON.stringify(cacheData))
+    console.log('regionOption 数据已缓存')
+  } catch (error) {
+    console.error('保存缓存失败:', error)
+  }
+}
+
 const regionOption = ref<RegionItem[]>([])
 onMounted(async () => {
   updateTime()
   timeUpdateTimerId.value = setInterval(updateTime, 1000)
 
+  try {
     if (typeof route.query.parkName === 'string') {
       selectedPark.value = route.query.parkName
       query.campus_id = route.query.parkCode as string
     }
 
+    handleRiskTabChange('安全类事项')
+
+    // 先检查缓存
+    const cachedRecords = getCachedRegionOption()
+    let records = cachedRecords
+
+    if (!records || records.length === 0) {
+      // 缓存不存在或已过期，调用接口
       try {
-    let { records } = await getTableList(
-      'park_info_list'
-    )
-    // records = [
-    //   {
-    //     "region_id": "130601",
-    //     "park_code": "1825468527486140416",
-    //     "region": "北京",
-    //     "park_name": "雄安新区总部",
-    //     "pic_url": "1"
-    //   },
-    //   {
-    //     "region_id": "130601",
-    //     "park_code": "1825468527486140417",
-    //     "region": "北京",
-    //     "park_name": "雄安地面站",
-    //     "pic_url": "2"
-    //   },
-    //   {
-    //     "region_id": "130603",
-    //     "park_code": "1825468527486140426",
-    //     "region": "武汉",
-    //     "park_name": "花山新区总部",
-    //     "pic_url": "3"
-    //   }
-    // ]
+        let result = await getTableList('park_info_list', {}, false, { signal: abortController.signal })
+        records = result.records || []
+
+        if (records && records.length > 0) {
+          // 保存到缓存
+          setCachedRegionOption(records)
+        }
+      } catch (error) {
+        console.error('初始化园区数据失败:', error)
+        records = []
+      }
+    }
+
     if (records && records.length > 0) {
       // 更新为新的数据格式
       regionOption.value = records.map(el => ({
@@ -618,16 +842,27 @@ onMounted(async () => {
         }
       }
     }
-  } catch (error) {
-    console.error('初始化园区数据失败:', error)
-  }
     // 初始化数据
     await loadDashboardData()
 
   // 添加周期性动画演示
   dashboardTimerId.value = setInterval(async () => {
+    try {
       await loadDashboardData()
+    } catch (error) {
+      console.error('定时数据更新失败:', error)
+    }
   }, 2 * 60 * 1000) // 每2分钟更新一次
+  } catch (error) {
+    console.error('页面初始化失败:', error)
+    // 即使出错也要隐藏骨架屏，避免界面一直处于加载状态
+    setTimeout(() => {
+      if (isFirstLoading.value) {
+        isFirstLoading.value = false
+        console.log('因错误隐藏骨架屏')
+      }
+    }, 1000)
+  }
 })
 
 const loadDashboardData = () => {
@@ -635,7 +870,7 @@ const loadDashboardData = () => {
     isFirstLoad.value = false
   }
   // 获取总体概览数据
-  getTableList('generalTotal', query).then(generalTotal => {
+  getTableList('generalTotal', query, false, { signal: abortController.signal }).then(generalTotal => {
     if (generalTotal.records && generalTotal.records.length > 0) {
       mockData.totalCount = Number(generalTotal.records[0].totalCount)
       mockData.formalEmployeeCount = Number(generalTotal.records[0].formalEmployeeCount)
@@ -743,7 +978,7 @@ const loadDashboardData = () => {
   handleTabClick("高危作业")
 
   // 获取风险预警数据
-  getTableList('risk_alert_data', query).then(risk_alert_data => {
+  getTableList('risk_alert_data', query, false, { signal: abortController.signal }).then(risk_alert_data => {
     if (risk_alert_data.records && risk_alert_data.records.length > 0) {
       mockData.alertData.total = risk_alert_data.records[0].total
       mockData.alertData.processed = risk_alert_data.records[0].processed
@@ -754,7 +989,7 @@ const loadDashboardData = () => {
     console.error('获取风险预警数据失败:', error)
   })
   // 获取风险预警详情数据
-  getTableList('risk_alert_detail', query).then(risk_alert_detail => {
+  getTableList('risk_alert_detail', query, false, { signal: abortController.signal }).then(risk_alert_detail => {
     if (risk_alert_detail.records && risk_alert_detail.records.length > 0) {
       mockData.alertData.details = risk_alert_detail.records
     }
@@ -763,8 +998,8 @@ const loadDashboardData = () => {
   })
 
   // 获取超期工单数据
-  getTableList('timeout_work_order', query).then(timeout_work_order => {
-    if (timeout_work_order.records && timeout_work_order.records.length > 0) {
+  getTableList('timeout_work_order', query, false, { signal: abortController.signal }).then(timeout_work_order => {
+    if (timeout_work_order.records && timeout_work_order.records.length >= 0) {
       mockData.timeoutWorkOrders.total = timeout_work_order.records.length
       mockData.timeoutWorkOrders.details = timeout_work_order.records
     }
@@ -773,7 +1008,7 @@ const loadDashboardData = () => {
   })
 
   // 获取超期工单数据
-  getTableList('park_build_info', query).then(res => {
+  getTableList('park_build_info', query, false, { signal: abortController.signal }).then(res => {
     if (res.records && res.records.length > 0) {
 
     }
@@ -781,11 +1016,22 @@ const loadDashboardData = () => {
     console.error('获取超期工单数据失败:', error)
   })
 
+  // 调用数据处理函数
   handleHiddenDangerPannelData(query)
+
+  // 延迟一段时间等待异步操作完成，然后隐藏骨架屏
+  setTimeout(() => {
+    if (isFirstLoading.value) {
+      isFirstLoading.value = false
+      console.log('隐藏骨架屏')
+    }
+  }, 2000) // 2秒后隐藏骨架屏
 }
 
 
-const handleHiddenDangerPannelData = (query) => {
+const handleHiddenDangerPannelData = async (query) => {
+  const promises = []
+
   let _data = {
     flag: false,
     general: 0,
@@ -805,6 +1051,8 @@ const handleHiddenDangerPannelData = (query) => {
     processing: 0,
     pending: 0
   }
+
+  // 初始化图表
   progressChart.value = echarts.init(progressChartRef.value)
   const width = progressChart.value.getWidth()
   const progressOption = {
@@ -843,31 +1091,38 @@ const handleHiddenDangerPannelData = (query) => {
         labelLayout: function (params: any) {
           const isLeft = params.labelRect.x < width / 2;
           const points = params.labelLinePoints;
+          if (points && points.length && points[2]) {
             points[2][0] = isLeft
               ? params.labelRect.x
               : params.labelRect.x + params.labelRect.width;
             return {
               labelLinePoints: points
             };
+          }
         },
       }
     ]
   }
   try {
     // 获取隐患排查治理数据
-    getTableList('risk_level_count', query).then(res => {
+    getTableList('risk_level_count', query, false, { signal: abortController.signal }).then(res => {
       if (res.records && res.records.length > 0) {
         _data.general = _data.general + Number(res.records[0].general_count)
         _data.major = _data.major + Number(res.records[0].major_count)
         // 获取隐患排查治理数据
-        getTableList('risk_status_count', query).then(res => {
+        getTableList('risk_status_count', query, false, { signal: abortController.signal }).then(res => {
           if (res.records && res.records.length > 0) {
-            _data.overdue = _data.overdue + Number(res.records[0].overdueCnt)
-            _data.processed = _data.processed + Number(res.records[0].processedCnt)
-            _data.processing = _data.processing + Number(res.records[0].processingCnt)
-            _data.pending = _data.pending
+            // 接口返回的已经是百分比，直接使用
+            const record = res.records[0]
+            _data.overdue = Number(record.overdueCnt) || 0
+            _data.processed = Number(record.processedCnt) || 0
+            _data.processing = Number(record.processingCnt) || 0
+            _data.pending = 0 // 接口没有返回pending，设为0
             _data.flag = true
 
+            console.log('risk_status_count 接口返回数据:', record)
+            console.log('处理后的 _data:', _data)
+
             if (_data2.flag) {
               // 合并数据
               console.log("请求系统和第三方成功，合并数据", _data, _data2);
@@ -876,18 +1131,31 @@ const handleHiddenDangerPannelData = (query) => {
               mockData.hiddenDangerData.generalCount = generalCnt
               mockData.hiddenDangerData.severityCount = majorCnt
 
+              // 如果第三方数据也是百分比，需要合并；否则使用系统数据
+              // 这里假设系统数据是百分比，第三方数据可能是数量或百分比
+              let overdueCnt, processedCnt, processingCnt, pendingCnt
+              if (_data2.overdue > 1 || _data2.processed > 1 || _data2.processing > 1) {
+                // 第三方数据可能是百分比，直接使用系统数据（因为系统数据更准确）
+                overdueCnt = _data.overdue.toFixed(2)
+                processedCnt = _data.processed.toFixed(2)
+                processingCnt = _data.processing.toFixed(2)
+                pendingCnt = _data.pending.toFixed(2)
+              } else {
+                // 第三方数据可能是数量，需要计算百分比
                 let totalCnt = generalCnt + majorCnt
-              let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
-              let processedCnt = ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2)
-              let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
-              let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
+                overdueCnt = totalCnt > 0 ? ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2) : '0.00'
+                processedCnt = totalCnt > 0 ? ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2) : '0.00'
+                processingCnt = totalCnt > 0 ? ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2) : '0.00'
+                pendingCnt = totalCnt > 0 ? ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2) : '0.00'
+              }
 
               progressOption.series[0].data = [
-                { value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
-                { value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } },
-                { value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } },
-                { value: processingCnt || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
+                { value: Number(overdueCnt) || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
+                { value: Number(processedCnt) || 0, name: '已处理', itemStyle: { color: '#10b981' } },
+                { value: Number(pendingCnt) || 0, name: '待排查', itemStyle: { color: '#eab308' } },
+                { value: Number(processingCnt) || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
               ]
+              console.log('合并后的图表数据:', progressOption.series[0].data)
               if (progressChart.value != null) {
                 progressChart.value.setOption(progressOption)
               }
@@ -896,17 +1164,14 @@ const handleHiddenDangerPannelData = (query) => {
               mockData.hiddenDangerData.generalCount = _data.general
               mockData.hiddenDangerData.severityCount = _data.major
 
-              let totalCnt = _data.general + _data.major
-              let overdueCnt = (_data.overdue / totalCnt * 100).toFixed(2)
-              let processedCnt = (_data.processed / totalCnt * 100).toFixed(2)
-              let processingCnt = (_data.processing / totalCnt * 100).toFixed(2)
-              let pendingCnt = (_data.pending / totalCnt * 100).toFixed(2)
+              // 接口返回的已经是百分比，直接使用
               progressOption.series[0].data = [
-                { value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
-                { value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } },
-                { value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } },
-                { value: processingCnt || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
+                { value: _data.overdue || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
+                { value: _data.processed || 0, name: '已处理', itemStyle: { color: '#10b981' } },
+                { value: _data.pending || 0, name: '待排查', itemStyle: { color: '#eab308' } },
+                { value: _data.processing || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
               ]
+              console.log('系统数据图表数据:', progressOption.series[0].data)
               if (progressChart.value != null) {
                 progressChart.value.setOption(progressOption)
               }
@@ -919,63 +1184,63 @@ const handleHiddenDangerPannelData = (query) => {
 
 
     // 获取隐患排查治理数据
-    getTableList('hidden_danger_investigation', query).then(res => {
+    getTableList('hidden_danger_investigation', query, false, { signal: abortController.signal }).then(res => {
       if (res.records && res.records.length > 0) {
         _data2.general = Number(res.records[0].general)
         _data2.major = Number(res.records[0].major)
 
         // 获取隐患排查治理处理进度数据
-        getTableList('hidden_danger_process_progress', query).then(res => {
-          if (res.records && res.records.length > 0) {
-            _data2.flag = true
-            _data2.overdue = Number(res.records[0].overdue) / 100 * (_data2.general + _data2.major)
-            _data2.processed = Number(res.records[0].processed) / 100 * (_data2.general + _data2.major)
-            _data2.processing = Number(res.records[0].processing) / 100 * (_data2.general + _data2.major)
-            _data2.pending = Number(res.records[0].pending) / 100 * (_data2.general + _data2.major)
+        getTableList('hidden_danger_process_progress', query, false, { signal: abortController.signal }).then(res => {
+          // if (res.records && res.records.length > 0) {
+          //   _data2.flag = true
+          //   _data2.overdue = Number(res.records[0].overdue) / 100 * (_data2.general + _data2.major)
+          //   _data2.processed = Number(res.records[0].processed) / 100 * (_data2.general + _data2.major)
+          //   _data2.processing = Number(res.records[0].processing) / 100 * (_data2.general + _data2.major)
+          //   _data2.pending = Number(res.records[0].pending) / 100 * (_data2.general + _data2.major)
 
-            if (_data.flag) {
-              console.log("请求第三方和系统成功，合并数据", _data, _data2);
-              // 合并数据
-              let generalCnt = _data.general + _data2.general
-              let majorCnt = _data.major + _data2.major
-              mockData.hiddenDangerData.generalCount = generalCnt
-              mockData.hiddenDangerData.severityCount = majorCnt
+          //   if (_data.flag) {
+          //     console.log("请求第三方和系统成功，合并数据", _data, _data2);
+          //     // 合并数据
+          //     let generalCnt = _data.general + _data2.general
+          //     let majorCnt = _data.major + _data2.major
+          //     mockData.hiddenDangerData.generalCount = generalCnt
+          //     mockData.hiddenDangerData.severityCount = majorCnt
 
-              let totalCnt = generalCnt + majorCnt
-              let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
-              let processedCnt = ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2)
-              let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
-              let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
-              progressOption.series[0].data = [
-                { value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
-                { value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } },
-                { value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } },
-                { value: processingCnt || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
-              ]
-              if (progressChart.value != null) {
-                progressChart.value.setOption(progressOption)
-              }
-            } else {
-              //显示三方数据
-              console.log("请求第三方成功，展示数据", _data, _data2);
-              mockData.hiddenDangerData.generalCount = _data2.general
-              mockData.hiddenDangerData.severityCount = _data2.major
+          //     let totalCnt = generalCnt + majorCnt
+          //     let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
+          //     let processedCnt = ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2)
+          //     let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
+          //     let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
+          //     progressOption.series[0].data = [
+          //       { value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
+          //       { value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } },
+          //       { value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } },
+          //       { value: processingCnt || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
+          //     ]
+          //     if (progressChart.value != null) {
+          //       progressChart.value.setOption(progressOption)
+          //     }
+          //   } else {
+          //     //显示三方数据
+          //     console.log("请求第三方成功，展示数据", _data, _data2);
+          //     mockData.hiddenDangerData.generalCount = _data2.general
+          //     mockData.hiddenDangerData.severityCount = _data2.major
 
-              let overdueCnt = res.records[0].overdue
-              let processedCnt = res.records[0].processed
-              let processingCnt = res.records[0].processing
-              let pendingCnt = res.records[0].pending
-              progressOption.series[0].data = [
-                { value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
-                { value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } },
-                { value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } },
-                { value: processingCnt || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
-              ]
-              if (progressChart.value != null) {
-                progressChart.value.setOption(progressOption)
-              }
-            }
-          }
+          //     let overdueCnt = res.records[0].overdue
+          //     let processedCnt = res.records[0].processed
+          //     let processingCnt = res.records[0].processing
+          //     let pendingCnt = res.records[0].pending
+          //     progressOption.series[0].data = [
+          //       { value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
+          //       { value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } },
+          //       { value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } },
+          //       { value: processingCnt || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
+          //     ]
+          //     if (progressChart.value != null) {
+          //       progressChart.value.setOption(progressOption)
+          //     }
+          //   }
+          // }
         }).catch(error => {
           console.error('获取隐患排查治理处理进度数据失败:', error)
         })
@@ -1000,12 +1265,12 @@ const handleTabClick = async (tab: string) => {
       code = "fire_drill"
       code1 = "fire_drill_detail"
 
-      getDangerDetail(query.campus_id).then(res => {
+      getDangerDetail(query.campus_id, { signal: abortController.signal }).then(res => {
         const list = res.records.map((item: any) => ({ description: item.contenttext }))
         dangerList.value = list
       })
 
-      getDangerCount(query.campus_id).then(res => {
+      getDangerCount(query.campus_id, { signal: abortController.signal }).then(res => {
         unfinishedCount.value = res.records[0].wks
         inProgressCount.value = res.records[0].jxz
         finishedCount.value = res.records[0].ywc
@@ -1016,7 +1281,7 @@ const handleTabClick = async (tab: string) => {
       code = 'security_training_count'
       code1 = 'security_training_detail'
 
-      const res = await getExamDetail(query.campus_id)
+      const res = await getExamDetail(query.campus_id, { signal: abortController.signal })
 
       examList.value = res.records
 
@@ -1025,7 +1290,7 @@ const handleTabClick = async (tab: string) => {
       code = 'security_training_count'
       code1 = 'security_training_detail'
 
-      const res1 = await getDrillDetail(query.campus_id)
+      const res1 = await getDrillDetail(query.campus_id, { signal: abortController.signal })
 
       drillList.value = res1.records
 
@@ -1173,6 +1438,9 @@ const updateTime = (): void => {
 }
 
 onUnmounted(() => {
+  // 取消所有正在进行的请求
+  abortController.abort()
+
   if (dashboardTimerId.value) {
     clearInterval(dashboardTimerId.value)
     dashboardTimerId.value = null
@@ -1185,6 +1453,10 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
+.cursor-pointer {
+  cursor: pointer;
+}
+
 /* 响应式设计 - 自动适应不同屏幕尺寸 */
 @media (width <=1200px) {
   .dashboard-container {
@@ -1572,17 +1844,25 @@ onUnmounted(() => {
             .top-card-right-item {
               display: flex;
               align-items: center;
-              column-gap: 5px;
               padding: 0 10px;
               font-size: 0.7rem;
               color: #fff;
 
+              > :first-child {
+                display: flex;
+                align-items: center;
+                column-gap: 5px;
+                width: 100px;
+              }
+
               .type-number-wrapper {
                 display: flex;
                 align-items: center;
+                justify-content: flex-start;
                 gap: 2px;
                 font-size: 0.8rem;
                 color: #fff;
+                margin-left: 8px;
 
                 .type-number {
                   display: inline-block;
@@ -1596,6 +1876,10 @@ onUnmounted(() => {
                   border-radius: 2px;
                 }
               }
+
+              > span:last-child {
+                margin-left: 4px;
+              }
             }
           }
         }
@@ -1869,4 +2153,44 @@ onUnmounted(() => {
     }
   }
 }
+
+// 骨架屏样式
+.skeleton-pulse {
+  animation: skeleton-loading-company 1.5s ease-in-out infinite;
+  background-color: #444;
+  border-radius: 4px;
+}
+
+.skeleton-number-wrapper {
+  display: flex;
+  gap: 2px;
+}
+
+.skeleton-number {
+  width: 14px;
+  height: 24px;
+}
+
+.skeleton-type-number {
+  width: 14px;
+  height: 16px;
+}
+
+.skeleton-chart {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+}
+
+@keyframes skeleton-loading-company {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 </style>

src/views/screen/components/AlertList.vue

@@ -5,6 +5,32 @@
       <img width="50%" src="@/assets/images/line_1.png" />
     </div>
     <div class="list" :style="{ maxHeight: maxHeight }">
+      <!-- 骨架屏 -->
+      <template v-if="props.loading">
+        <!-- 表格模式骨架屏 -->
+        <template v-if="tableTitle && tableTitle.length > 0">
+          <div class="table-header">
+            <div class="header-item skeleton-pulse" v-for="(title, index) in tableTitle" :key="`header-skeleton-${index}`"></div>
+          </div>
+          <div class="list-wrapper">
+            <div class="table-row skeleton-row" v-for="i in 10" :key="`table-skeleton-${i}`">
+              <div class="table-cell skeleton-pulse" v-for="(title, cellIndex) in tableTitle" :key="`cell-skeleton-${i}-${cellIndex}`"></div>
+            </div>
+          </div>
+        </template>
+
+        <!-- 列表模式骨架屏 -->
+        <template v-else>
+          <div class="list-wrapper">
+            <div class="list-item skeleton-item" v-for="i in 10" :key="`list-skeleton-${i}`">
+              <div class="alert-text skeleton-pulse"></div>
+            </div>
+          </div>
+        </template>
+      </template>
+
+      <!-- 实际内容 -->
+      <template v-else>
         <!-- 表格头部 -->
         <div v-if="tableTitle && tableTitle.length > 0" class="table-header">
           <div class="header-item" v-for="(title, index) in tableTitle" :key="index">
@@ -15,7 +41,7 @@
         <div class="list-wrapper" ref="listWrapperRef" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
           <!-- 表格模式 -->
           <template v-if="tableTitle && tableTitle.length > 0">
-          <div class="table-row" v-for="(item, index) in listData" :key="`table-${index}`"  @mouseenter="handleMouseEnter">
+            <div @click="handleItemClick(item)" class="table-row cursor-pointer" v-for="(item, index) in listData" :key="`table-${index}`"  @mouseenter="handleMouseEnter">
               <div class="table-cell" v-for="(title, cellIndex) in tableTitle" :key="`cell-${index}-${cellIndex}`">
                 {{ item[title.key] || '-' }}
               </div>
@@ -24,13 +50,14 @@
 
           <!-- 列表模式 -->
           <template v-else>
-          <div class="list-item" v-for="(item, index) in listData" :key="`list-${index}`"  @mouseenter="handleMouseEnter">
+            <div @click="handleItemClick(item)" class="list-item cursor-pointer" v-for="(item, index) in listData" :key="`list-${index}`"  @mouseenter="handleMouseEnter">
               <span class="alert-text" :class="[{ error: item.alarm_level_code == 'severity' }, { warn: item.alarm_level_code == 'major' }]">
                 {{ (index + 1) }} {{ item.description }}
               </span>
             </div>
           </template>
         </div>
+      </template>
     </div>
   </div>
 </template>
@@ -51,6 +78,7 @@ interface TableTitle {
 }
 
 interface Props {
+  loading?: boolean
   title?: string
   listData: AlertItem[]
   maxHeight?: string
@@ -58,6 +86,7 @@ interface Props {
   scrollSpeed?: number
   scrollInterval?: number,
   tableTitle?: TableTitle[]
+  linkUrl?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -72,8 +101,12 @@ const listWrapperRef = ref<HTMLElement | null>(null)
 let scrollTimer: NodeJS.Timeout | null = null
 let isScrolling = false
 
+const handleItemClick = (item: AlertItem) => {
+  window.open(props.linkUrl, '_blank')
+}
+
 // 自动滚动功能
-const startAutoScroll = () => {
+const startAutoScroll = (resetToTop: boolean = false) => {
   if (!props.autoScroll || !listWrapperRef.value) return
 
   const wrapper = listWrapperRef.value
@@ -83,20 +116,38 @@ const startAutoScroll = () => {
   // 只有当内容高度超过容器高度时才启动滚动
   if (scrollHeight <= clientHeight) return
 
+  // 如果是首次启动或需要重置，从顶部开始
+  if (resetToTop) {
+    wrapper.scrollTop = 0
+  }
+  
   isScrolling = true
-  let currentScrollTop = listWrapperRef.value.scrollTop
 
   const scroll = () => {
     if (!isScrolling || !wrapper) return
 
-    currentScrollTop += props.scrollSpeed
+    const currentScrollTop = wrapper.scrollTop
+    const maxScrollTop = scrollHeight - clientHeight
 
-    // 如果滚动到底部，重置到顶部
-    if (currentScrollTop >= scrollHeight - clientHeight) {
-      currentScrollTop = 0
+    // 向下滚动
+    const nextScrollTop = currentScrollTop + props.scrollSpeed
+    
+    if (nextScrollTop >= maxScrollTop) {
+      // 滚动到底部，瞬间跳转到顶部
+      // 先移除平滑滚动效果，实现瞬间跳转
+      const originalScrollBehavior = wrapper.style.scrollBehavior
+      wrapper.style.scrollBehavior = 'auto'
       wrapper.scrollTop = 0
+      // 恢复平滑滚动效果
+      setTimeout(() => {
+        wrapper.style.scrollBehavior = originalScrollBehavior || 'smooth'
+      }, 0)
+      
+      // 短暂延迟后继续滚动
+      scrollTimer = setTimeout(scroll, 100)
+      return
     } else {
-      wrapper.scrollTop = currentScrollTop
+      wrapper.scrollTop = nextScrollTop
     }
 
     scrollTimer = setTimeout(scroll, 50) // 每50ms滚动一次，实现平滑效果
@@ -121,8 +172,9 @@ const handleMouseEnter = () => {
 const handleMouseLeave = () => {
   if (props.autoScroll) {
     // 延迟启动滚动，避免鼠标快速进出
+    // 从当前位置继续向下滚动
     setTimeout(() => {
-      startAutoScroll()
+      startAutoScroll(false)
     }, 500)
   }
 }
@@ -133,7 +185,8 @@ watch(() => props.listData, () => {
     if (props.autoScroll) {
       stopAutoScroll()
       setTimeout(() => {
-        startAutoScroll()
+        // 数据更新后从顶部重新开始
+        startAutoScroll(true)
       }, 1000) // 数据更新后1秒开始滚动
     }
   })
@@ -141,9 +194,9 @@ watch(() => props.listData, () => {
 
 onMounted(() => {
   if (props.autoScroll) {
-    // 组件挂载后延迟启动滚动
+    // 组件挂载后延迟启动滚动，从顶部开始
     setTimeout(() => {
-      startAutoScroll()
+      startAutoScroll(true)
     }, 2000)
   }
 })
@@ -154,6 +207,9 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
+.cursor-pointer {
+  cursor: pointer;
+}
 .list-content {
   display: flex;
   width: 68%;
@@ -285,4 +341,31 @@ onUnmounted(() => {
     }
   }
 }
+
+// 骨架屏样式
+.skeleton-pulse {
+  animation: skeleton-loading-alertlist 1.5s ease-in-out infinite;
+  background-color: #444;
+  border-radius: 4px;
+}
+
+.skeleton-row {
+  margin-bottom: 4px;
+}
+
+.skeleton-item {
+  margin-bottom: 4px;
+}
+
+@keyframes skeleton-loading-alertlist {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 </style>

src/views/screen/components/AlertPanel.vue

@@ -52,7 +52,7 @@
               class="alert-text" 
               :class="[{ error: item.error }, { warn: item.warn }]"
             >
-              {{ (index + 1) }} {{ item.text }}
+              <a href="'http://10.0.64.20/pms/workorder-list'">{{ (index + 1) }} {{ item.text }}</a>
             </span>
           </div>
         </div>

src/views/screen/components/HeaderSelector.vue

@@ -0,0 +1,398 @@
+<template>
+  <div :class="['header-left', `theme-${theme}`]">
+    <!-- 返回按钮 - PNG图片类型（暗色系主题使用，保持原样） -->
+    <img
+      v-if="backButtonType === 'image' && showBackButton && theme === 'dark'"
+      class="back-img"
+      @click="handleBack"
+      src="@/assets/images/screen/back_image.png"
+    />
+    <!-- 返回按钮 - SVG图片类型（亮色系主题使用，支持主题颜色） -->
+    <svg
+      v-if="backButtonType === 'image' && showBackButton && theme === 'light'"
+      class="back-svg"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      @click="handleBack"
+    >
+      <path
+        d="M620.8 348.16H276.48l102.4-102.4c10.24-10.24 10.24-25.6 0-35.84-10.24-10.24-25.6-10.24-35.84 0L197.12 354.56c-5.12 5.12-7.68 11.52-7.68 17.92 0 6.4 2.56 12.8 7.68 17.92l144.64 144.64c10.24 10.24 25.6 10.24 35.84 0 10.24-10.24 10.24-25.6 0-35.84L277.76 399.36h343.04C716.8 399.36 793.6 476.16 793.6 572.16S716.8 744.96 620.8 744.96H358.4c-14.08 0-25.6 11.52-25.6 25.6s11.52 25.6 25.6 25.6h262.4a223.4368 223.4368 0 0 0 224-224A223.4368 223.4368 0 0 0 620.8 348.16z"
+        :fill="svgFillColor"
+      />
+    </svg>
+    <!-- 返回按钮 - 图标类型 -->
+    <el-icon
+      v-if="backButtonType === 'icon' && showBackButton"
+      class="back-arrow"
+      @click="handleBack"
+    >
+      <ArrowLeft />
+    </el-icon>
+    <!-- 文本按钮/显示 -->
+    <div
+      v-if="displayText"
+      :class="[
+        'back-button',
+        {
+          'clickable': clickable,
+          'non-clickable': !clickable
+        }
+      ]"
+      @click="handleTextClick"
+    >
+      {{ displayText }}
+      <span v-if="showSelectorIndicator">···</span>
+    </div>
+  </div>
+
+  <!-- 区域/园区选择弹窗 -->
+  <RegionSelector
+    v-model="selectorVisible"
+    :modelSelected="selectedValue"
+    :regions="options"
+    @change="handleSelectorChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { ArrowLeft } from '@element-plus/icons-vue'
+import RegionSelector from './RegionSelector.vue'
+import { getTableList } from '@/api/design/report'
+
+interface OptionItem {
+  name: string
+  code: string
+}
+
+interface Props {
+  // 返回按钮类型：'image' | 'icon' | 'none'
+  backButtonType?: 'image' | 'icon' | 'none'
+  // 是否显示返回按钮
+  showBackButton?: boolean
+  // 返回按钮点击事件
+  onBack?: () => void
+  // 显示的文本
+  displayText?: string
+  // 文本是否可点击
+  clickable?: boolean
+  // 是否显示选择器指示器（···）
+  showSelectorIndicator?: boolean
+  // 选择器类型：'region' | 'park' | 'none'
+  selectorType?: 'region' | 'park' | 'none'
+  // 选择器选项（如果不提供，会根据 selectorType 自动获取）
+  options?: OptionItem[]
+  // 当前选中的值
+  selectedValue?: string
+  // 选择器变化事件
+  onSelectorChange?: (item: OptionItem) => void
+  // 区域代码（用于获取园区列表）
+  regionCode?: string
+  // 主题：'light' | 'dark'
+  theme?: 'light' | 'dark'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  backButtonType: 'none',
+  showBackButton: false,
+  clickable: true,
+  showSelectorIndicator: false,
+  selectorType: 'none',
+  options: () => [],
+  selectedValue: '',
+  regionCode: '',
+  theme: 'dark'
+})
+
+const emit = defineEmits<{
+  selectorChange: [item: OptionItem]
+}>()
+
+const router = useRouter()
+
+const selectorVisible = ref(false)
+const options = ref<OptionItem[]>(props.options || [])
+
+// 根据主题计算 SVG 填充颜色
+const svgFillColor = computed(() => {
+  return props.theme === 'light' ? '#409eff' : '#ffffff'
+})
+
+// 监听 props.options 的变化
+watch(() => props.options, (newOptions) => {
+  if (newOptions && newOptions.length > 0) {
+    options.value = newOptions
+  }
+}, { immediate: true, deep: true })
+
+// 缓存工具函数
+const CACHE_KEY = 'shared_regionOption_cache'
+
+interface CacheData {
+  records: any[]
+  timestamp: number
+}
+
+const getCachedRegionOption = (): any[] | null => {
+  try {
+    const cached = sessionStorage.getItem(CACHE_KEY)
+    if (cached) {
+      const cacheData: CacheData = JSON.parse(cached)
+      return cacheData.records
+    }
+  } catch (error) {
+    console.error('读取缓存失败:', error)
+    sessionStorage.removeItem(CACHE_KEY)
+  }
+  return null
+}
+
+const setCachedRegionOption = (records: any[]) => {
+  try {
+    const cacheData: CacheData = {
+      records,
+      timestamp: Date.now()
+    }
+    sessionStorage.setItem(CACHE_KEY, JSON.stringify(cacheData))
+    console.log('regionOption 数据已缓存')
+  } catch (error) {
+    console.error('保存缓存失败:', error)
+  }
+}
+
+// 初始化选项数据 - 统一从内部获取，不再依赖外部传入
+const initOptions = async () => {
+  // 如果外部传入了 options，优先使用（保留兼容性）
+  if (props.options && props.options.length > 0) {
+    options.value = props.options
+    return
+  }
+
+  if (props.selectorType === 'none') {
+    return
+  }
+
+  try {
+    // 先检查缓存
+    const cachedRecords = getCachedRegionOption()
+    let records = cachedRecords
+
+    if (!records || records.length === 0) {
+      // 缓存不存在或已过期，调用接口
+      const result = await getTableList('park_info_list')
+      records = result.records || []
+
+      if (records && records.length > 0) {
+        // 保存到缓存
+        setCachedRegionOption(records)
+      }
+    }
+
+    if (records && records.length > 0) {
+      if (props.selectorType === 'region') {
+        // 区域选择：去重region字段
+        const regionMap = new Map()
+        records.forEach((el: any) => {
+          if (!regionMap.has(el.region)) {
+            regionMap.set(el.region, {
+              name: el.region,
+              code: el.region_id
+            })
+          }
+        })
+        options.value = Array.from(regionMap.values())
+      } else if (props.selectorType === 'park') {
+        // 园区选择：根据regionCode过滤，去重park_name字段
+        if (!props.regionCode) {
+          // 如果 regionCode 还没有值，等待它被设置
+          console.log('等待 regionCode 设置...')
+          return
+        }
+        const parkMap = new Map()
+        const filteredRecords = records.filter((el: any) => el.region_id == props.regionCode)
+        if (filteredRecords.length === 0) {
+          console.warn(`未找到 regionCode 为 ${props.regionCode} 的园区数据`)
+        }
+        filteredRecords.forEach((el: any) => {
+          if (!parkMap.has(el.park_name)) {
+            parkMap.set(el.park_name, {
+              name: el.park_name,
+              code: el.park_code
+            })
+          }
+        })
+        options.value = Array.from(parkMap.values())
+        console.log('园区选项已更新:', options.value)
+      }
+    }
+  } catch (error) {
+    console.error('初始化选项数据失败:', error)
+  }
+}
+
+// 处理返回按钮点击
+const handleBack = () => {
+  if (props.onBack) {
+    props.onBack()
+  } else {
+    router.back()
+  }
+}
+
+// 处理文本点击
+const handleTextClick = () => {
+  if (!props.clickable) {
+    return
+  }
+
+  if (props.selectorType !== 'none') {
+    selectorVisible.value = true
+  }
+}
+
+// 处理选择器变化
+const handleSelectorChange = (item: OptionItem) => {
+  if (props.onSelectorChange) {
+    props.onSelectorChange(item)
+  }
+  // 同时发出事件，供父组件使用 @selector-change 监听
+  emit('selectorChange', item)
+}
+
+onMounted(() => {
+  initOptions()
+})
+
+// 监听 regionCode 的变化，当它变化时重新初始化选项（用于园区选择）
+watch(() => props.regionCode, (newRegionCode) => {
+  if (props.selectorType === 'park' && newRegionCode) {
+    initOptions()
+  }
+}, { immediate: false })
+</script>
+
+<style scoped lang="scss">
+.header-left {
+  display: flex;
+  padding-left: 1vw;
+  line-height: 80px;
+  flex: 1;
+  align-items: center;
+
+  .back-img {
+    height: 3vh;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  .back-svg {
+    height: 3vh;
+    width: auto;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  .back-arrow {
+    font-size: 20px;
+    color: #409eff;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      color: #79bbff;
+      transform: translateX(-2px);
+    }
+  }
+
+  .back-button {
+    display: inline-flex;
+    height: 2vh;
+    min-width: 6vw;
+    padding: 4px 16px;
+    margin-left: 0.5vw;
+    font-size: 0.9rem;
+    transition: all 0.3s ease;
+    align-items: center;
+    justify-content: space-between;
+    color: white;
+
+    &.clickable {
+      cursor: pointer;
+    }
+
+    &.non-clickable {
+      cursor: default;
+    }
+
+    span {
+      font-size: 18px;
+      line-height: 1;
+    }
+  }
+
+  // 暗色系主题（默认）
+  &.theme-dark {
+    .back-button {
+      background: rgb(13 24 84 / 80%);
+      border: 1px solid rgb(59 130 246 / 40%);
+
+      &:hover {
+        background: rgb(59 130 246 / 30%);
+        border-color: rgb(59 130 246 / 60%);
+      }
+    }
+  }
+
+  // 亮色系主题 - 只改颜色，保持UI结构
+  &.theme-light {
+    .back-button {
+      background: #409eff;
+      border: 1px solid #e5e7eb;
+
+      &:hover {
+        background: #79bbff;
+        border-color: #cbd5e1;
+      }
+    }
+  }
+}
+
+/* 响应式设计 */
+@media (width <= 1024px) {
+  .header-left .back-button {
+    min-width: 8vw;
+    font-size: 0.8rem;
+  }
+}
+
+@media (width <= 768px) {
+  .header-left {
+    line-height: 70px;
+
+    .back-button {
+      min-width: 12vw;
+      padding: 3px 12px;
+      font-size: 0.7rem;
+    }
+  }
+}
+
+@media (width <= 480px) {
+  .header-left {
+    line-height: 60px;
+
+    .back-button {
+      min-width: 15vw;
+      padding: 2px 10px;
+      font-size: 0.65rem;
+    }
+  }
+}
+</style>
+

src/views/screen/components/HiddenDangerPanel.vue

@@ -1,19 +1,22 @@
 <template>
-  <div class="center-container">
+  <div class="center-container" :data-window-width="windowWidth">
     <div class="center-content">
-      <span class="title">隐患排查治理</span>
+      <!-- 隐患排查治理 这个标题需要隐藏 2025-10-31 -->
+      <span class="title"></span>
       <img class="bottom-border-line" src="@/assets/images/title_border_line_1.png" />
-      <span class="sub-title">分类风险</span>
+      <span class="sub-title">隐患等级</span>
       <img width="50%" src="@/assets/images/line_1.png" />
 
       <div class="type-wrapper">
         <div class="type-item">
           <span class="type-btn">重大</span>
-          <span class="type-num">{{ hiddenDangerData?.major || 0 }}</span>
+          <div style="width: 20px; height: 20px" v-if="props.loading" class="type-num skeleton-pulse"></div>
+          <span v-else class="type-num cursor-pointer" @click="handleMajorClick">{{ hiddenDangerData?.major || 0 }}</span>
         </div>
         <div class="type-item">
           <span class="type-btn active">一般</span>
-          <span class="type-num">{{ hiddenDangerData?.general || 0 }}</span>
+          <div style="width: 20px; height: 20px" v-if="props.loading" class="type-num skeleton-pulse"></div>
+          <span v-else class="type-num cursor-pointer" @click="handleMajorClick">{{ hiddenDangerData?.general || 0 }}</span>
         </div>
       </div>
 
@@ -29,7 +32,8 @@
       </div>
       <div class="echart-wrapper">
         <div class="lf-rt">
-          <Echart :options="progressChartOption" class="progress-chart" height="80%" />
+          <div v-if="props.loading" class="skeleton-chart-circle skeleton-pulse"></div>
+          <Echart v-else :options="progressChartOption" class="progress-chart" height="80%" />
           <div class="progress-legend">
             <div class="legend-item"><span class="dot red"></span>已逾期</div>
             <div class="legend-item"><span class="dot green"></span>已处理</div>
@@ -40,39 +44,45 @@
           </div>
         </div>
         <div class="lf-rt">
-          <Echart :options="top3TypesChartOption" class="progress-chart" height="80%" />
+          <div v-if="props.loading" class="skeleton-chart-circle skeleton-pulse"></div>
+          <Echart v-else :options="top3TypesChartOption" class="progress-chart" height="80%" />
           <div class="progress-legend-column">
             <div class="legend-item">
               <span class="dot blue"></span>
-              <span class="legend-text">{{ props.hiddenDangerData?.top3Types?.[0]?.order_type_path_name || "--" }}</span>
+              <span class="legend-text" :title="props.hiddenDangerData?.top3Types?.[0]?.order_type_path_name || '--'">{{ props.hiddenDangerData?.top3Types?.[0]?.order_type_path_name || "--" }}</span>
             </div>
             <div class="legend-item">
               <span class="dot green"></span>
-              <span class="legend-text">{{ props.hiddenDangerData?.top3Types?.[1]?.order_type_path_name || "--" }}</span>
+              <span class="legend-text" :title="props.hiddenDangerData?.top3Types?.[1]?.order_type_path_name || '--'">{{ props.hiddenDangerData?.top3Types?.[1]?.order_type_path_name || "--" }}</span>
             </div>
             <div class="legend-item">
               <span class="dot yellow"></span>
-              <span class="legend-text">{{ props.hiddenDangerData?.top3Types?.[2]?.order_type_path_name || "--" }}</span>
+              <span class="legend-text" :title="props.hiddenDangerData?.top3Types?.[2]?.order_type_path_name || '--'">{{ props.hiddenDangerData?.top3Types?.[2]?.order_type_path_name || "--" }}</span>
             </div>
           </div>
         </div>
       </div>
       <div class="safe-wrapper">
         <span class="safe-title">
-          <img width="22" style="margin: 3px 5px 0 0" src="@/assets/images/ybp_icon.png" />
-          安全指数:
+          <img class="safe-icon" src="@/assets/images/ybp_icon.png" />
+          <span class="safe-title-text">安全指数:</span>
+          <p class="safe-tooltip" title="安全指数 = (1-逾期隐患百分比) × 40% + 安全考核通过率 × 10% + 安全培训完成率 × 10%
+   + 安全类工单完成率 × 20%  +  工程类工单完成率 × 20%"></p>
         </span>
-        <span class="pending-count">{{ hiddenDangerData?.safetyIndex || 0 }}</span>
+        <span v-if="props.loading" class="pending-count skeleton-pulse"></span>
+        <span v-else class="pending-count">{{ hiddenDangerData?.safetyIndex || 0 }}</span>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import echarts from '@/plugins/echarts'
 
 
 interface Props {
+  loading?: boolean
   hiddenDangerData?: {
     general: number
     major: number
@@ -93,8 +103,124 @@ interface Props {
 
 const props = defineProps<Props>()
 
+// 窗口尺寸响应式变量，用于强制响应式更新
+const windowWidth = ref(window.innerWidth)
+const windowHeight = ref(window.innerHeight)
+
+// 防抖函数
+let resizeTimer: ReturnType<typeof setTimeout> | null = null
+
+// 手动触发 ECharts 图表 resize
+const resizeEcharts = () => {
+  nextTick(() => {
+    // 查找所有 ECharts 容器并触发 resize
+    // Echart 组件会在内部创建 div，class 包含 progress-chart
+    const chartContainers = document.querySelectorAll('.center-container .progress-chart')
+    chartContainers.forEach((container) => {
+      try {
+        const chartInstance = echarts.getInstanceByDom(container as HTMLElement)
+        if (chartInstance) {
+          chartInstance.resize()
+        }
+      } catch (error) {
+        console.warn('ECharts resize 失败:', error)
+      }
+    })
+    
+    // 如果上面的选择器找不到，尝试更通用的方式
+    if (chartContainers.length === 0) {
+      const allContainers = document.querySelectorAll('.center-container [class*="echart"]')
+      allContainers.forEach((container) => {
+        try {
+          const chartInstance = echarts.getInstanceByDom(container as HTMLElement)
+          if (chartInstance) {
+            chartInstance.resize()
+          }
+        } catch (error) {
+          // 忽略错误
+        }
+      })
+    }
+  })
+}
+
+// 监听窗口尺寸变化
+const handleResize = () => {
+  // 立即更新窗口尺寸（用于响应式绑定）
+  windowWidth.value = window.innerWidth
+  windowHeight.value = window.innerHeight
+  
+  // 立即触发一次 ECharts resize（快速响应）
+  resizeEcharts()
+  
+  // 清除之前的定时器
+  if (resizeTimer) {
+    clearTimeout(resizeTimer)
+  }
+  
+  // 使用防抖，延迟执行样式重新计算（优化性能）
+  resizeTimer = setTimeout(() => {
+    // 强制触发样式重新计算 - 通过读取 offsetHeight 触发重排
+    const container = document.querySelector('.center-container') as HTMLElement
+    if (container) {
+      // 触发重排，强制浏览器重新计算样式
+      void container.offsetHeight
+    }
+    // 再次触发 ECharts resize（确保完全更新）
+    resizeEcharts()
+  }, 100) // 100ms 防抖延迟
+}
+
+// 全屏切换处理函数（立即执行，不使用防抖）
+const handleFullscreenChange = () => {
+  // 立即更新窗口尺寸
+  windowWidth.value = window.innerWidth
+  windowHeight.value = window.innerHeight
+  // 延迟一点确保 DOM 已更新
+  setTimeout(() => {
+    resizeEcharts()
+    // 强制触发样式重新计算
+    const container = document.querySelector('.center-container') as HTMLElement
+    if (container) {
+      void container.offsetHeight
+    }
+  }, 150) // 稍微延迟确保全屏切换完成
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+  // 监听全屏变化 - 立即执行，不使用防抖
+  document.addEventListener('fullscreenchange', handleFullscreenChange)
+  document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
+  document.addEventListener('mozfullscreenchange', handleFullscreenChange)
+  document.addEventListener('MSFullscreenChange', handleFullscreenChange)
+  
+  // 组件挂载时，如果已有数据，立即更新图表
+  if (props.hiddenDangerData?.progress) {
+    console.log('onMounted: 初始化图表数据', props.hiddenDangerData.progress)
+    refreshProcessCharts(props.hiddenDangerData.progress)
+  }
+})
+
+onUnmounted(() => {
+  if (resizeTimer) {
+    clearTimeout(resizeTimer)
+  }
+  window.removeEventListener('resize', handleResize)
+  document.removeEventListener('fullscreenchange', handleFullscreenChange)
+  document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
+  document.removeEventListener('mozfullscreenchange', handleFullscreenChange)
+  document.removeEventListener('MSFullscreenChange', handleFullscreenChange)
+})
+
 // 图表引用
 const progressChartOption = ref<any>({
+  backgroundColor: 'transparent',
+  tooltip: {
+    show: true,
+    trigger: 'item',
+    formatter: '{b}: {c}%'
+  },
   series: [
     {
       type: 'pie' as const,
@@ -105,6 +231,7 @@ const progressChartOption = ref<any>({
       bottom: 0,
       data: [],
       label: {
+        show: true,
         alignTo: 'edge' as const,
         formatter: '{time|{c} %}\n',
         minMargin: 5,
@@ -118,6 +245,7 @@ const progressChartOption = ref<any>({
         }
       },
       labelLine: {
+        show: true,
         length: 5,
         length2: 0,
         maxSurfaceAngle: 10
@@ -188,30 +316,106 @@ const top3TypesChartOption = ref<any>({
   ]
 })
 
-watch(() => props.hiddenDangerData?.progress, (newVal) => {
-  refreshProcessCharts(newVal)
-}, { deep: true })
+const handleMajorClick = () => {
+  window.open('http://10.0.64.20/pms/workorder-list', '_blank')
+}
+
+// 辅助函数：安全地将值转换为数字，处理 NaN 和字符串 "NaN" 的情况
+const safeNumber = (val: any): number => {
+  if (val === null || val === undefined || val === '' || val === 'NaN') {
+    return 0
+  }
+  const num = Number(val)
+  return isNaN(num) ? 0 : num
+}
 
 // 更新图表数据
 const refreshProcessCharts = (process): void => {
-  if (!props.hiddenDangerData?.progress) {
+  if (!process) {
     console.warn('process is undefined or null')
-    return
-  }
+    // 即使没有数据，也要显示空图表，确保图表容器始终存在
     const option = { ...progressChartOption.value }
     option.series[0].data = [
-    { value: process.overdue || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
-    { value: process.processed || 0, name: '已处理', itemStyle: { color: '#10b981' } },
-    // { value: process.pending || 0, name: '待排查', itemStyle: { color: '#eab308' } },
-    { value: process.processing || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
+      { value: 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
+      { value: 0, name: '已处理', itemStyle: { color: '#10b981' } },
+      { value: 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
     ]
     progressChartOption.value = option
+    return
   }
   
+  const overdue = safeNumber(process.overdue)
+  const processed = safeNumber(process.processed)
+  const processing = safeNumber(process.processing)
   
-watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
-  refreshTop3TypesCharts(newVal)
-}, { deep: true })
+  console.log('refreshProcessCharts 数据:', { overdue, processed, processing })
+  
+  // 创建新的配置对象，确保 Vue 能检测到变化
+  const option = {
+    backgroundColor: 'transparent',
+    tooltip: {
+      show: true,
+      trigger: 'item',
+      formatter: '{b}: {c}%'
+    },
+    series: [
+      {
+        type: 'pie' as const,
+        radius: '55%',
+        center: ['50%', '50%'],
+        left: 0,
+        top: 0,
+        bottom: 0,
+        data: [
+          { value: overdue, name: '已逾期', itemStyle: { color: '#ef4444' } },
+          { value: processed, name: '已处理', itemStyle: { color: '#10b981' } },
+          { value: processing, name: '处理中', itemStyle: { color: '#3b82f6' } }
+        ],
+        label: {
+          show: true,
+          alignTo: 'edge' as const,
+          formatter: '{time|{c} %}\n',
+          minMargin: 5,
+          edgeDistance: 10,
+          lineHeight: 15,
+          rich: {
+            time: {
+              fontSize: 10,
+              color: '#fff'
+            }
+          }
+        },
+        labelLine: {
+          show: true,
+          length: 5,
+          length2: 0,
+          maxSurfaceAngle: 10
+        },
+        labelLayout: function (params: any) {
+          const isLeft = params.labelRect.x < (params.labelRect.width ? params.labelRect.width : 200) / 2;
+          const points = params.labelLinePoints;
+
+          // 添加安全检查
+          if (points && points.length >= 3 && points[2]) {
+            points[2][0] = isLeft
+              ? params.labelRect.x
+              : params.labelRect.x + params.labelRect.width;
+          }
+
+          return {
+            labelLinePoints: points
+          };
+        },
+      }
+    ]
+  }
+  
+  console.log('更新后的图表数据:', option.series[0].data)
+  // 更新图表配置
+  progressChartOption.value = option
+  // 更新 key 以强制重新渲染（可选，通常不需要）
+  // chartKey.value = Date.now()
+}
 
 // 更新图表数据
 const refreshTop3TypesCharts = (top3Types): void => {
@@ -234,21 +438,54 @@ const refreshTop3TypesCharts = (top3Types): void => {
   top3TypesChartOption.value = option
 }
 
-onMounted(() => {
+watch(() => props.hiddenDangerData?.progress, (newVal, oldVal) => {
+  console.log('HiddenDangerPanel watch 触发，progress 数据:', newVal, '旧数据:', oldVal)
+  // 确保每次数据变化都更新图表
+  if (newVal) {
+    refreshProcessCharts(newVal)
+  } else {
+    // 即使数据为空，也要显示空图表
+    refreshProcessCharts(null)
+  }
+}, { deep: true, immediate: true })
 
-})
+watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
+  refreshTop3TypesCharts(newVal)
+}, { deep: true })
 </script>
 
 <style scoped lang="scss">
 /* 响应式设计 */
-@media (width <=1200px) {
+@media (max-width: 1200px) {
   .center-container {
     width: 60vh;
     height: 60vh;
+
+    .center-content {
+      .echart-wrapper {
+        .lf-rt {
+          .progress-legend-column {
+            padding: 0 4px;
+
+            .legend-item {
+              .legend-text {
+                font-size: 0.68rem;
+              }
+            }
+          }
         }
       }
 
-@media (width <=1024px) {
+      .safe-wrapper {
+        .safe-title {
+          font-size: 0.75rem;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1024px) {
   .center-container {
     width: 55vh;
     height: 55vh;
@@ -270,11 +507,34 @@ onMounted(() => {
           font-size: 0.65rem;
         }
       }
+
+      .echart-wrapper {
+        .lf-rt {
+          .progress-legend-column {
+            padding: 0 3px;
+
+            .legend-item {
+              .legend-text {
+                font-size: 0.65rem;
+              }
+            }
           }
         }
       }
 
-@media (width <=768px) {
+      .safe-wrapper {
+        .safe-title {
+          .safe-icon {
+            width: 20px;
+            height: 20px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
   .center-container {
     top: 60%;
     width: 50vh;
@@ -318,16 +578,45 @@ onMounted(() => {
       .echart-wrapper {
         width: 90%;
 
-        .lf-rt .progress-legend .legend-item {
+        .lf-rt {
+          .progress-legend .legend-item {
             font-size: 0.6rem;
           }
+
+          .progress-legend-column {
+            padding: 0 2px;
+
+            .legend-item {
+              gap: 3px;
+
+              .legend-text {
+                font-size: 0.6rem;
+              }
+            }
+          }
+        }
       }
 
       .safe-wrapper {
         width: 50%;
+        flex-direction: column;
+        gap: 0.5vh;
 
         .safe-title {
           font-size: 0.7rem;
+          margin-left: 0;
+          justify-content: center;
+
+          .safe-icon {
+            width: 18px;
+            height: 18px;
+            margin: 2px 3px 0 0;
+          }
+
+          .safe-tooltip {
+            width: 15px;
+            height: 15px;
+          }
         }
 
         .pending-count {
@@ -338,7 +627,7 @@ onMounted(() => {
   }
 }
 
-@media (width <=480px) {
+@media (max-width: 480px) {
   .center-container {
     top: 65%;
     width: 45vh;
@@ -365,13 +654,43 @@ onMounted(() => {
 
       .echart-wrapper {
         width: 95%;
+
+        .lf-rt {
+          .progress-legend-column {
+            padding: 0 1px;
+            gap: 6px;
+
+            .legend-item {
+              gap: 2px;
+
+              .legend-text {
+                font-size: 0.55rem;
+              }
+            }
+          }
+        }
       }
 
       .safe-wrapper {
         width: 60%;
+        flex-direction: column;
+        gap: 0.3vh;
 
         .safe-title {
           font-size: 0.65rem;
+          margin-left: 0;
+          justify-content: center;
+
+          .safe-icon {
+            width: 16px;
+            height: 16px;
+            margin: 2px 2px 0 0;
+          }
+
+          .safe-tooltip {
+            width: 14px;
+            height: 14px;
+          }
         }
 
         .pending-count {
@@ -381,7 +700,11 @@ onMounted(() => {
     }
   }
 }
-
+.safe-tooltip:before {
+  content: '?';
+  color: yellow;
+  font-weight: bold;
+}
 .center-container {
   position: fixed;
   top: 55%;
@@ -401,7 +724,7 @@ onMounted(() => {
     display: flex;
     width: 77%;
     height: 77%;
-    overflow: hidden;
+    // overflow: hidden;
     border-radius: 50%;
     align-items: center;
     flex-direction: column;
@@ -513,14 +836,19 @@ onMounted(() => {
           flex-direction: column;
           display: flex;
           justify-content: center;
-          align-items: center;
+          align-items: flex-start;
           gap: 8px;
+          width: 100%;
+          padding: 0 5px;
+          box-sizing: border-box;
 
           .legend-item {
             display: flex;
-            width: 60%;
+            width: 100%;
+            max-width: 100%;
             align-items: center;
             gap: 4px;
+            min-width: 0; // 允许 flex 子元素收缩
 
             .legend-text {
               overflow: hidden;
@@ -528,6 +856,7 @@ onMounted(() => {
               text-overflow: ellipsis;
               white-space: nowrap;
               flex: 1;
+              min-width: 0; // 关键：允许文本收缩
             }
           }
         }
@@ -537,15 +866,47 @@ onMounted(() => {
     .safe-wrapper {
       display: flex;
       width: 40%;
+      min-width: 0; // 允许收缩
       height: 20%;
       margin-bottom: 5%;
       align-items: center;
       column-gap: 1vw;
+      flex-wrap: wrap; // 允许换行
+      justify-content: center;
 
       .safe-title {
         display: flex;
         align-items: center;
         margin-left: 1vw;
+        flex-wrap: wrap;
+        gap: 2px;
+        min-width: 0;
+        flex: 1;
+        max-width: 100%;
+
+        .safe-icon {
+          width: 22px;
+          height: 22px;
+          margin: 3px 5px 0 0;
+          flex-shrink: 0;
+        }
+
+        .safe-title-text {
+          white-space: nowrap;
+          flex-shrink: 0;
+        }
+
+        .safe-tooltip {
+          width: 17px;
+          height: 17px;
+          background-color: rgb(125, 125, 152);
+          border-radius: 50%;
+          text-align: center;
+          flex-shrink: 0;
+          margin: 0;
+          padding: 0;
+          display: inline-block;
+        }
       }
 
       .pending-count {
@@ -553,6 +914,7 @@ onMounted(() => {
         font-size: 1.6rem;
         font-weight: 500;
         color: yellow;
+        flex-shrink: 0;
       }
     }
   }
@@ -580,4 +942,32 @@ onMounted(() => {
 .dot.blue {
   background-color: #3b82f6;
 }
+
+// 骨架屏动画
+.skeleton-pulse {
+  animation: skeleton-loading-hiddendanger 1.5s ease-in-out infinite;
+  background-color: #444;
+  border-radius: 4px;
+}
+
+// 圆形饼图骨架屏
+.skeleton-chart-circle {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  margin: 30px auto 50px auto;
+  background-color: #444;
+}
+
+@keyframes skeleton-loading-hiddendanger {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 </style>

src/views/screen/components/HighRiskAlertPanel.vue

@@ -4,29 +4,37 @@
     <div>
       <img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
     </div>
+    <!-- 骨架屏 -->
+
+    <!-- 实际内容 -->
     <div class="tip-container">
       <div class="tip-image">
         <img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
-        <span class="number">{{ alertData?.total || 0 }}</span>
+        <div v-if="props.loading" style="width: 20px; height: 20px;" class="number skeleton-pulse"></div>
+        <span v-else class="number">{{ alertData?.total || 0 }}</span>
       </div>
       <img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
       <div class="tip-content">
         <div class="col-item">
           <img src="@/assets/images/screen/warning_img.png" width="23" />
           <span>告警总数</span>
-          <span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.total || 0 }}</span>
+          <div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+          <span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.total || 0 }}</span>
         </div>
         <div class="col-item">
           <span>已处理</span>
-          <span style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ alertData?.processed || 0 }}</span>
+          <div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+          <span v-else style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ alertData?.processed || 0 }}</span>
         </div>
         <div class="col-item" style="display: flex; margin-left: 1vw; align-items: center;">
           <span>待处理</span>
-          <span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.pending || 0 }}</span>
+          <div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+          <span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.pending || 0 }}</span>
         </div>
         <div class="col-item" style="display: flex; margin-left: 1vw; align-items: center;">
           <span>处理中</span>
-          <span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.processing }}</span>
+          <div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+          <span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.processing }}</span>
         </div>
       </div>
     </div>
@@ -45,7 +53,7 @@
         </div>
       </div>
     </div> -->
-    <AlertList style="margin-right: 1vw;" title="告警详情" :list-data="alertDetails" ></AlertList>
+    <AlertList style="margin-right: 1vw;" title="告警详情" :list-data="alertDetails" :linkUrl="linkUrl" :loading="props.loading"></AlertList>
   </div>
 </template>
 
@@ -72,6 +80,8 @@ interface Props {
   alertData?: AlertData
   alertDetails?: AlertItem[]
   sourceIndex?: number
+  linkUrl?: string
+  loading?: boolean
 }
 
 // 默认值
@@ -83,7 +93,8 @@ const props = withDefaults(defineProps<Props>(), {
     processing: 0
   }),
   alertDetails: () => [],
-  sourceIndex: 1
+  sourceIndex: 1,
+  loading: false
 })
 </script>
 
@@ -264,5 +275,104 @@ const props = withDefaults(defineProps<Props>(), {
       }
     }
   }
+
+  // 骨架屏样式
+  .skeleton-container {
+    .skeleton-tip-container {
+      position: relative;
+      width: 100%;
+      height: 70px;
+
+      .skeleton-tip-image {
+        position: absolute;
+        top: -5px;
+        right: 10px;
+        z-index: 2;
+
+        .skeleton-circle {
+          width: 80px;
+          height: 80px;
+          background-color: #3a3a3a;
+          border-radius: 50%;
+        }
+
+        .skeleton-number {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 30px;
+          height: 20px;
+          background-color: #3a3a3a;
+          border-radius: 4px;
+        }
+      }
+
+      .skeleton-bg {
+        width: 100%;
+        height: 70px;
+        background-color: #3a3a3a;
+        border-radius: 4px;
+      }
+
+      .skeleton-tip-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        padding: 8px 15px;
+
+        .skeleton-col-item {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .skeleton-icon {
+            width: 23px;
+            height: 23px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+          }
+
+          .skeleton-text {
+            flex: 1;
+            height: 16px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+          }
+
+          .skeleton-value {
+            width: 40px;
+            height: 18px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+  }
+
+  // 骨架屏动画
+  .skeleton-pulse {
+    animation: skeleton-loading-highrisk 1.5s ease-in-out infinite;
+    background-color: #444;
+    border-radius: 4px;
+  }
+
+  @keyframes skeleton-loading-highrisk {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 }
 </style>

src/views/screen/components/OverviewPanel.vue

@@ -3,7 +3,34 @@
     <div class="panel-title">人员管理</div>
     <img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
 
-    <div class="top-card">
+    <!-- 骨架屏 -->
+    <div v-if="props.loading" class="skeleton-container">
+      <div class="skeleton-card">
+        <div class="skeleton-left">
+          <div class="skeleton-icon skeleton-pulse"></div>
+          <div class="skeleton-text skeleton-pulse"></div>
+          <div class="skeleton-numbers">
+            <div class="skeleton-number skeleton-pulse" v-for="i in 6" :key="i"></div>
+          </div>
+          <div class="skeleton-text skeleton-pulse"></div>
+        </div>
+        <div class="skeleton-right">
+          <div class="skeleton-item" v-for="i in 3" :key="i">
+            <div class="skeleton-row">
+              <div class="skeleton-icon-small skeleton-pulse"></div>
+              <div class="skeleton-text skeleton-pulse"></div>
+            </div>
+            <div class="skeleton-numbers">
+              <div class="skeleton-number-small skeleton-pulse" v-for="j in 4" :key="j"></div>
+            </div>
+            <div class="skeleton-text skeleton-pulse"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 实际内容 -->
+    <div v-else class="top-card">
       <div class="top-card-left">
         <div>
           <img width="33px" src="@/assets/images/1_224520_821.png" />
@@ -19,9 +46,11 @@
 
       <div class="top-card-right">
         <div class="top-card-right-item">
+          <div>
             <img width="18px" src="@/assets/images/v2_rel0n8.png" />
             <span>正式员工</span>
-          <div class="type-number-wrapper" style="margin-left: 2vw">
+          </div>
+          <div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
             <span class="type-number" v-for="(digit, index) in formalEmployeeDigits" :key="index">
               {{ digit }}
             </span>
@@ -30,9 +59,11 @@
         </div>
 
         <div class="top-card-right-item">
+          <div>
             <img width="18px" src="@/assets/images/v2_rel0n23.png" />
             <span>外协人员</span>
-          <div class="type-number-wrapper" style="margin-left: 1vw">
+          </div>
+          <div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
             <span class="type-number" v-for="(digit, index) in externalStaffDigits" :key="index">
               {{ digit }}
             </span>
@@ -41,9 +72,11 @@
         </div>
 
         <div class="top-card-right-item">
+          <div>
             <img width="18px" src="@/assets/images/24508_654.png" />
             <span>访客</span>
-          <div class="type-number-wrapper">
+          </div>
+          <div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
             <span class="type-number" v-for="(digit, index) in visitorDigits" :key="index">
               {{ digit }}
             </span>
@@ -58,6 +91,7 @@
         <span>各园区统计</span>
         <img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
       </div>
+      <!-- <div v-if="props.loading" class="skeleton-chart-circle skeleton-pulse"></div> -->
       <Echart :options="barChartOption" class="bar-chart" height="17.5vh" />
     </div>
   </div>
@@ -68,6 +102,7 @@ import { ref, onMounted, watch, computed } from 'vue'
 import { rgbToHex } from '@/utils/color'
 
 interface Props {
+  loading?: boolean
   totalCount: number
   formalEmployeeCount: number
   externalStaffCount: number
@@ -87,6 +122,17 @@ const formalEmployeeDigits = computed(() => String(props.formalEmployeeCount).sp
 const externalStaffDigits = computed(() => String(props.externalStaffCount).split('').map(Number))
 const visitorDigits = computed(() => String(props.visitorCount).split('').map(Number))
 
+// 计算数字区域的最大宽度
+// 每个数字框宽度 14px，gap 2px
+const maxNumberWidth = computed(() => {
+  const formalLen = formalEmployeeDigits.value.length
+  const externalLen = externalStaffDigits.value.length
+  const visitorLen = visitorDigits.value.length
+  const maxLen = Math.max(formalLen, externalLen, visitorLen)
+  // 宽度 = 数字个数 * 14px + (数字个数 - 1) * 2px
+  return maxLen > 0 ? maxLen * 14 + (maxLen - 1) * 2 : 0
+})
+
 // 图表引用
 const barChartOption = ref({
   legend: {
@@ -243,17 +289,25 @@ onMounted(() => {
       .top-card-right-item {
         display: flex;
         align-items: center;
-        column-gap: 5px;
         padding: 0 10px;
         font-size: 0.7rem;
         color: #fff;
 
+        > :first-child {
+          display: flex;
+          align-items: center;
+          column-gap: 5px;
+          width: 100px;
+        }
+
         .type-number-wrapper {
           display: flex;
           align-items: center;
+          justify-content: flex-start;
           gap: 2px;
           font-size: 0.8rem;
           color: #fff;
+          margin-left: 8px;
 
           .type-number {
             display: inline-block;
@@ -263,11 +317,15 @@ onMounted(() => {
             line-height: 25px;
             color: #fff;
             text-align: center;
-            background-color: #1afb8f;
+            background-color: #158e56;
             border-radius: 2px;
             transition: all 0.3s ease;
           }
         }
+
+        > span:last-child {
+          margin-left: 4px;
+        }
       }
     }
   }
@@ -290,5 +348,141 @@ onMounted(() => {
       min-height: 17.5vh;
     }
   }
+
+  // 骨架屏样式
+  .skeleton-container {
+    .skeleton-card {
+      display: flex;
+      padding: 0 20px;
+      column-gap: 15px;
+      font-size: 0.8rem;
+
+      .skeleton-left {
+        display: flex;
+        height: 12vh;
+        min-width: 15vw;
+        padding: 0 10px;
+        background-image: url('@/assets/imgs/total_count_card_bg.png');
+        background-size: cover;
+        column-gap: 6px;
+        align-items: center;
+
+        .skeleton-icon {
+          width: 33px;
+          height: 33px;
+          background-color: #3a3a3a;
+          border-radius: 4px;
+        }
+
+        .skeleton-text {
+          background-color: #3a3a3a;
+          border-radius: 4px;
+        }
+
+        .skeleton-numbers {
+          display: flex;
+          align-items: center;
+          gap: 2px;
+          font-size: 0.8rem;
+
+          .skeleton-number {
+            width: 26px;
+            height: 50px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+          }
+        }
+      }
+
+      .skeleton-right {
+        display: flex;
+        height: 12vh;
+        min-width: 20vw;
+        background-image: url('@/assets/imgs/staff_types_bg.png');
+        background-position: top center;
+        background-size: cover;
+        flex-direction: column;
+        justify-content: center;
+        row-gap: 4px;
+
+        .skeleton-item {
+          display: flex;
+          align-items: center;
+          column-gap: 5px;
+          padding: 0 10px;
+
+          .skeleton-row {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            flex: 1;
+
+            .skeleton-icon-small {
+              width: 18px;
+              height: 18px;
+              background-color: #3a3a3a;
+              border-radius: 4px;
+            }
+
+            .skeleton-text {
+              height: 16px;
+              width: 60px;
+              background-color: #3a3a3a;
+              border-radius: 4px;
+            }
+          }
+
+          .skeleton-numbers {
+            display: flex;
+            align-items: center;
+            gap: 2px;
+            font-size: 0.8rem;
+
+            .skeleton-number-small {
+              width: 14px;
+              height: 25px;
+              background-color: #3a3a3a;
+              border-radius: 2px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 骨架屏动画
+  .skeleton-pulse {
+    animation: skeleton-loading-overview 1.5s ease-in-out infinite;
+
+  }
+
+  // 圆形饼图骨架屏
+  .skeleton-chart-circle {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    margin: 30px auto 50px auto;
+    background-color: #444;
+  }
+
+  // 柱状图骨架屏
+  // .skeleton-chart-bar {
+  //   width: 100%;
+  //   height: 17.5vh;
+  //   background-color: #444;
+  //   border-radius: 8px;
+  // }
+
+  @keyframes skeleton-loading-overview {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 }
 </style>

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/ScreenFrame.vue

@@ -11,12 +11,12 @@
         {{ currentTime }}
       </div>
     </div>
-    <span class="weather-warning">
+    <!-- <span class="weather-warning">
       天气预警:
       <span style="color: red">
         2025年08月19日13:25分中央气象台发布雄安地区于17时至夜间将有200毫米强降雨，并伴有10级大风......
       </span>
-    </span>
+    </span> -->
     <!-- 主内容区 -->
     <div class="content-container">
       <div class="left-wrapper">

src/views/screen/components/TimeoutWorkOrderPanel.vue

@@ -3,17 +3,21 @@
     <div class="panel-title">超时工单</div>
     <img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
 
+    <!-- 骨架屏 -->
+    <!-- 实际内容 -->
     <div class="tip-container">
       <div class="tip-image">
         <img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
-        <span class="number">{{ timeoutWorkOrders?.total || 0 }}</span>
+        <div v-if="props.loading" style="width: 20px; height: 20px;" class="number skeleton-pulse"></div>
+        <span v-else class="number">{{ timeoutWorkOrders?.total || 0 }}</span>
       </div>
       <img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
       <div class="tip-content">
         <div class="col-item">
           <img src="@/assets/images/screen/warning_img.png" width="23" />
           <span>超时工单数</span>
-          <span style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ timeoutWorkOrders?.total || 0 }}</span>
+          <div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+          <span v-else style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ timeoutWorkOrders?.total || 0 }}</span>
         </div>
       </div>
     </div>
@@ -32,7 +36,7 @@
         </div>
       </div>
     </div> -->
-    <AlertList style="margin-right: 1vw;" title="工单详情" :list-data="alertDetails" ></AlertList>
+    <AlertList :linkUrl="linkUrl" style="margin-right: 1vw;" title="工单详情" :list-data="alertDetails" :loading="props.loading" ></AlertList>
   </div>
 </template>
 
@@ -52,9 +56,11 @@ interface TimeoutWorkOrders {
 
 // Props定义
 interface Props {
+  loading?: boolean
   timeoutWorkOrders?: TimeoutWorkOrders
   alertDetails?: AlertItem[]
   sourceIndex?: number
+  linkUrl?: string
 }
 
 // 默认值
@@ -246,5 +252,104 @@ const props = withDefaults(defineProps<Props>(), {
       }
     }
   }
+
+  // 骨架屏样式
+  .skeleton-container {
+    .skeleton-tip-container {
+      position: relative;
+      width: 100%;
+      height: 70px;
+
+      .skeleton-tip-image {
+        position: absolute;
+        top: -5px;
+        right: 10px;
+        z-index: 2;
+
+        .skeleton-circle {
+          width: 80px;
+          height: 80px;
+          background-color: #3a3a3a;
+          border-radius: 50%;
+        }
+
+        .skeleton-number {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 30px;
+          height: 20px;
+          background-color: #3a3a3a;
+          border-radius: 4px;
+        }
+      }
+
+      .skeleton-bg {
+        width: 100%;
+        height: 70px;
+        background-color: #3a3a3a;
+        border-radius: 4px;
+      }
+
+      .skeleton-tip-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 8px 15px;
+
+        .skeleton-col-item {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .skeleton-icon {
+            width: 23px;
+            height: 23px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+          }
+
+          .skeleton-text {
+            flex: 1;
+            height: 16px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+          }
+
+          .skeleton-value {
+            width: 40px;
+            height: 18px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+  }
+
+  // 骨架屏动画
+  .skeleton-pulse {
+    animation: skeleton-loading-timeout 1.5s ease-in-out infinite;
+    background-color: #444;
+    border-radius: 4px;
+  }
+
+  @keyframes skeleton-loading-timeout {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 }
 </style>

src/views/screen/components/WeatherWarning.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="weather-warning">
-    <span>天气预警:</span>
+    <!-- <span>天气预警:</span> -->
     <!-- 预报内容 -->
-    <div class="weather-scroll-container" @mouseenter="stopWeatherScroll" @mouseleave="startWeatherScroll">
+    <!-- <div class="weather-scroll-container" @mouseenter="stopWeatherScroll" @mouseleave="startWeatherScroll">
       <div class="weather-scroll-content" :style="{ transform: `translateX(${scrollPosition}px)` }">
         <span v-for="(item, index) in weatherData" :key="index" class="weather-item"
           :style="{ color: getLevelColor(item.level_code) }">
           {{ item.content }}
         </span>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 

src/views/screen/mainScreen.vue

@@ -2,11 +2,16 @@
   <div class="dashboard-container">
     <!-- 顶部标题栏 -->
     <div class="header-container">
-      <div class="header-left">
-        <div class="back-button" @click="openRegionSelector"> 总部
-          <span>···</span>
-        </div>
-      </div>
+      <HeaderSelector
+        back-button-type="none"
+        :show-back-button="false"
+        display-text="集团"
+        :clickable="true"
+        :show-selector-indicator="true"
+        selector-type="region"
+        :selected-value="selectedRegion"
+        @selector-change="onRegionChange"
+      />
       <h1 class="header-title">总部综合监控大屏</h1>
       <div class="date-wrapper">
         <span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
@@ -19,39 +24,41 @@
     <!-- 主内容区 -->
     <div class="content-container">
       <div class="left-wrapper">
-        <OverviewPanel
+        <OverviewPanel :loading="isFirstLoading"
                        :totalCount="dashboardData?.totalCount || 0"
                        :formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
                        :externalStaffCount="dashboardData?.externalStaffCount || 0"
                        :visitorCount="dashboardData?.visitorCount || 0"
                        :parkStatistics="dashboardData?.parkStatistics"/>
-        <RiskStatisticsPanel
-          :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
+        <RiskStatisticsPanel :loading="isFirstLoading" :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
                              @tab-change="handleRiskTabChange" :campus_id="query.campus_id"/>
       </div>
       <div class="right-wrapper">
-        <HighRiskAlertPanel
-          :alertData="dashboardData?.alertData" :alertDetails="dashboardData?.alertData.details"
+        <HighRiskAlertPanel :loading="isFirstLoading"
+                            :alertData="dashboardData?.alertData"
+                            :alertDetails="dashboardData?.alertData.details"
+                            linkUrl="http://10.0.64.20/security/console/command-center?p=tabl"
                             :sourceIndex="sourceIndex"/>
-        <TimeoutWorkOrderPanel
+        <TimeoutWorkOrderPanel :loading="isFirstLoading"
                                :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
-          :alertDetails="dashboardData?.timeoutWorkOrders.details" :sourceIndex="sourceIndex"/>
+                               :alertDetails="dashboardData?.timeoutWorkOrders.details"
+                               linkUrl="http://10.0.64.20/pms/workorder-list"
+                               :sourceIndex="sourceIndex"/>
       </div>
-      <HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData"/>
+      <HiddenDangerPanel :loading="isFirstLoading" :hiddenDangerData="dashboardData?.hiddenDangerData"/>
     </div>
   </div>
 
-  <!-- 区域选择弹窗 -->
-  <RegionSelector
-    v-model="regionSelectorVisible" :modelSelected="selectedRegion" :regions="regionOption"
-    @change="onRegionChange"/>
 </template>
 
 <script setup lang="ts">
-import {getTableList, getTableData} from './report'
-import {ref, onMounted, watch, onUnmounted} from 'vue'
+import {getTableList, getTableData, getWorkOrderStatistics} from './report'
+import {ref, reactive, onMounted, watch, onUnmounted} from 'vue'
 import {useRouter} from 'vue-router'
-import RegionSelector from './components/RegionSelector.vue'
+
+// 创建 AbortController 用于取消请求
+const abortController = new AbortController()
+import HeaderSelector from './components/HeaderSelector.vue'
 import WeatherWarning from './components/WeatherWarning.vue'
 import {getDashboardData, getAlertDetails, type DashboardData} from '@/api/dashboard'
 
@@ -72,14 +79,13 @@ interface RegionItem {
   code: string
 }
 
-type TabType = '高危作业' | '安全培训考试' | '安全培训考试'
+type TabType = '安全类事项' | '工程类事项'
 
 // 响应式数据
 const currentDateTime = ref<string>('')
 const currentDate = ref<string>('')
 const currentWeek = ref<string>('')
 const currentTime = ref<string>('')
-const regionSelectorVisible = ref<boolean>(false)
 const selectedRegion = ref<string>('')
 const sourceIndex = ref<number>(1)
 
@@ -94,9 +100,15 @@ const visitorCount = ref<number>(0)
 // 总体概览-各园区统计
 const parkStatistics = ref<any>()
 // 高危作业/安全培训考试/安全培训考试
-const riskStatistics = ref<any>()
+const riskStatistics = ref<any>({
+  安全类事项: [],
+  工程类事项: []
+})
 const dangerDetail = ref<any>()
 
+// 加载状态
+const isFirstLoading = ref<boolean>(true)
+
 // 动画相关的状态
 const isAnimating = ref<boolean>(false)
 const animationDuration = 2000 // 动画持续时间（毫秒）
@@ -197,7 +209,6 @@ const updateAllCounts = (counts: {
 // 路由
 const router = useRouter()
 
-const regionOption = ref<RegionItem[]>([])
 // 定时器ID
 const dashboardTimerId = ref<ReturnType<typeof setInterval> | null>(null)
 const timeUpdateTimerId = ref<ReturnType<typeof setInterval> | null>(null)
@@ -213,51 +224,69 @@ const query = reactive({
   campus_id: "",
 })
 
+// 缓存工具函数 - 三个页面共享的缓存
+const CACHE_KEY = 'shared_regionOption_cache'
+const CACHE_DURATION = 5 * 60 * 1000 // 5分钟
+
+interface CacheData {
+  records: any[] // 原始接口返回的数据
+  timestamp: number
+}
+
+const getCachedRegionOption = (): any[] | null => {
+  try {
+    const cached = sessionStorage.getItem(CACHE_KEY)
+    if (cached) {
+      const cacheData: CacheData = JSON.parse(cached)
+      // 检查缓存是否在有效期内
+      return cacheData.records
+    }
+  } catch (error) {
+    console.error('读取缓存失败:', error)
+    sessionStorage.removeItem(CACHE_KEY)
+  }
+  return null
+}
+
+const setCachedRegionOption = (records: any[]) => {
+  try {
+    const cacheData: CacheData = {
+      records,
+      timestamp: Date.now()
+    }
+    sessionStorage.setItem(CACHE_KEY, JSON.stringify(cacheData))
+    console.log('regionOption 数据已缓存')
+  } catch (error) {
+    console.error('保存缓存失败:', error)
+  }
+}
+
 // 生命周期
 onMounted(async () => {
   updateTime()
   timeUpdateTimerId.value = setInterval(updateTime, 1000)
-  // 
+
+  // 先检查缓存
+  const cachedRecords = getCachedRegionOption()
+  let records = cachedRecords
+
+  if (!records || records.length === 0) {
+    // 缓存不存在或已过期，调用接口
     try {
-    let {records} = await getTableList(
-      'park_info_list'
-    )
-    // records = [
-    //   {
-    //     "region_id": "130601",
-    //     "park_code": "1825468527486140416",
-    //     "region": "北京",
-    //     "park_name": "雄安新区总部"
-    //   },
-    //   {
-    //     "region_id": "130601",
-    //     "park_code": "1825468527486140417",
-    //     "region": "北京",
-    //     "park_name": "雄安地面站"
-    //   },
-    //   {
-    //     "region_id": "130603",
-    //     "park_code": "1825468527486140426",
-    //     "region": "武汉",
-    //     "park_name": "花山新区总部"
-    //   }
-    // ]
+      let result = await getTableList('park_info_list', {}, false, { signal: abortController.signal })
+      records = result.records || []
+
       if (records && records.length > 0) {
-      // 去重region字段，使用Map来确保唯一性
-      const regionMap = new Map()
-      records.forEach(el => {
-        if (!regionMap.has(el.region)) {
-          regionMap.set(el.region, {
-            name: el.region,
-            code: el.region_id // 使用region_code作为code
-          })
+        // 保存到缓存
+        setCachedRegionOption(records)
+      }
+    } catch (error) {
+      console.error('初始化园区数据失败:', error)
+      records = []
+    }
   }
-      })
-      // 转换为数组
-      regionOption.value = Array.from(regionMap.values())
-
-      console.log('regionOption.value>>>>', regionOption.value);
 
+  if (records && records.length > 0) {
     // 将园区信息去重
     const parkMap = new Map();
     records.forEach(el => {
@@ -270,15 +299,21 @@ onMounted(async () => {
     })
     // 将parkMap转换为数组
     query.campus_id = Array.from(parkMap.values()).map(e1 => e1.code).join();
-
   }
-  } catch (error) {
-    console.error('初始化园区数据失败:', error)
-  }
-
-  // 初始化数据
+  // 初始化数据，loadDashboardData()既然是包含初始化的逻辑，所以并不适合定时调用，不然每次都要初始化。
   await loadDashboardData()
   
+  // 将初始化的逻辑放在这里（在loadDashboardData之后，确保dashboardData.value已初始化）
+  if (dashboardData.value && dashboardData.value.hiddenDangerData) {
+    dashboardData.value.hiddenDangerData.general = dashboardData.value.hiddenDangerData.general || 0
+    dashboardData.value.hiddenDangerData.major = dashboardData.value.hiddenDangerData.major || 0
+    if (dashboardData.value.hiddenDangerData.progress) {
+      dashboardData.value.hiddenDangerData.progress.overdue = dashboardData.value.hiddenDangerData.progress.overdue || 0
+      dashboardData.value.hiddenDangerData.progress.processed = dashboardData.value.hiddenDangerData.progress.processed || 0
+      dashboardData.value.hiddenDangerData.progress.processing = dashboardData.value.hiddenDangerData.progress.processing || 0
+    }
+  }
+
   // 启动定时器
   timeOut1()
 
@@ -288,8 +323,11 @@ onMounted(async () => {
   }, 2 * 60 * 1000) // 每2分钟更新一次
 })
 
-// 组件卸载时清理定时器
+// 组件卸载时清理定时器并取消所有请求
 onUnmounted(() => {
+  // 取消所有正在进行的请求
+  abortController.abort()
+
   if (dashboardTimerId.value) {
     clearInterval(dashboardTimerId.value)
     dashboardTimerId.value = null
@@ -306,6 +344,11 @@ onUnmounted(() => {
 let isFirstLoad = ref<boolean>(true)
 // 数据初始化方法
 const loadDashboardData = async (): Promise<void> => {
+  // 第一次加载时显示骨架屏
+  if (isFirstLoading.value) {
+    console.log('第一次加载，显示骨架屏');
+  }
+
   const data = await getDashboardData()
   if (isFirstLoad.value) {
     console.log('第一次加载');
@@ -314,9 +357,12 @@ const loadDashboardData = async (): Promise<void> => {
   }
   console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
 
-  try {
+  // 收集所有异步请求
+  const promises = []
+
   // 获取总体概览数据
-    getTableList('generalTotal', query).then(generalTotal => {
+  promises.push(
+    getTableList('generalTotal', query, false, { signal: abortController.signal }).then(generalTotal => {
       if (generalTotal.records && generalTotal.records.length > 0) {
         dashboardData.value.totalCount = Number(generalTotal.records[0].totalCount)
         dashboardData.value.formalEmployeeCount = Number(generalTotal.records[0].formalEmployeeCount)
@@ -329,14 +375,14 @@ const loadDashboardData = async (): Promise<void> => {
         external: Number(dashboardData.value.externalStaffCount),
         visitor: Number(dashboardData.value.visitorCount)
       })
-    })
-  } catch (error) {
+    }).catch(error => {
       console.error('获取总体概览数据失败:', error)
-  }
+    })
+  )
 
-  try {
   // 获取各园区统计数据
-    getTableList('parkscreen_user_info', query).then(parkscreen_user_info => {
+  promises.push(
+    getTableList('parkscreen_user_info', query, false, { signal: abortController.signal }).then(parkscreen_user_info => {
       if (parkscreen_user_info.records && parkscreen_user_info.records.length > 0) {
         dashboardData.value.parkStatistics = parkscreen_user_info.records.map(el => {
           return {
@@ -347,14 +393,14 @@ const loadDashboardData = async (): Promise<void> => {
           }
         })
       }
-    })
-  } catch (error) {
+    }).catch(error => {
       console.error('获取各园区统计数据失败:', error)
-  }
+    })
+  )
 
-  try {
   // 获取风险预警数据
-    getTableList('risk_alert_data', query).then(risk_alert_data => {
+  promises.push(
+    getTableList('risk_alert_data', query, false, { signal: abortController.signal }).then(risk_alert_data => {
       if (risk_alert_data.records && risk_alert_data.records.length > 0) {
         dashboardData.value.alertData.total = risk_alert_data.records[0].total
         dashboardData.value.alertData.processed = risk_alert_data.records[0].processed
@@ -364,286 +410,213 @@ const loadDashboardData = async (): Promise<void> => {
     }).catch(error => {
       console.error('获取风险预警数据失败:', error)
     })
-  } catch (error) {
-    console.error('获取风险预警数据失败:', error)
-  }
+  )
 
-  try {
   // 获取风险预警详情数据
-    getTableList('risk_alert_detail', query).then(risk_alert_detail => {
+  promises.push(
+    getTableList('risk_alert_detail', query, false, { signal: abortController.signal }).then(risk_alert_detail => {
       if (risk_alert_detail.records && risk_alert_detail.records.length > 0) {
         dashboardData.value.alertData.details = risk_alert_detail.records
       }
     }).catch(error => {
       console.error('获取风险预警详情数据失败:', error)
     })
-  } catch (error) {
-    console.error('获取风险预警详情数据失败:', error)
-  }
+  )
 
-  try {
   // 获取超期工单数据
-    getTableList('timeout_work_order', query).then(timeout_work_order => {
-      if (timeout_work_order.records && timeout_work_order.records.length > 0) {
+  promises.push(
+    getTableList('timeout_work_order', query, false, { signal: abortController.signal }).then(timeout_work_order => {
+      if (timeout_work_order.records && timeout_work_order.records.length >= 0) {
         dashboardData.value.timeoutWorkOrders.total = timeout_work_order.records.length
         dashboardData.value.timeoutWorkOrders.details = timeout_work_order.records
       }
     }).catch(error => {
       console.error('获取超期工单数据失败:', error)
     })
-  } catch (error) {
-    console.error('获取超期工单数据失败:', error)
-  }
-  handleRiskTabChange('高危作业')
+  )
+
+  // 处理风险统计和隐患数据（这些是异步的）
+  promises.push(
+    Promise.all([
+      handleRiskTabChange('安全类事项'),
       handleHiddenDangerPannelData(query)
-  console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
-}
+    ]).catch(error => {
+      console.error('处理风险统计和隐患数据失败:', error)
+    })
+  )
 
-const handleHiddenDangerPannelData = (query) => {
-  let _data = {
-    flag: false,
-    general: 0,
-    major: 0,
-    overdue: 0,
-    processed: 0,
-    processing: 0,
-    pending: 0
-  }
-
-  let _data2 = {
-    flag: false,
-    general: 0,
-    major: 0,
-    overdue: 0,
-    processed: 0,
-    processing: 0,
-    pending: 0
-  }
+  // 等待所有异步操作完成
   try {
-    dashboardData.value.hiddenDangerData.general = 0
-    dashboardData.value.hiddenDangerData.major = 0
-    dashboardData.value.hiddenDangerData.progress.overdue = 0
-    dashboardData.value.hiddenDangerData.progress.processed = 0
-    dashboardData.value.hiddenDangerData.progress.processing = 0
-    // 获取隐患排查治理数据
-    getTableList('risk_level_count', query).then(res => {
-      if (res.records && res.records.length > 0) {
-        _data.general = _data.general + Number(res.records[0].general_count)
-        _data.major = _data.major + Number(res.records[0].major_count)
-        // 获取隐患排查治理数据
-        getTableList('risk_status_count', query).then(res => {
-          if (res.records && res.records.length > 0) {
-            _data.overdue = _data.overdue + Number(res.records[0].overdueCnt)
-            _data.processed = _data.processed + Number(res.records[0].processedCnt)
-            _data.processing = _data.processing + Number(res.records[0].processingCnt)
-            _data.pending = _data.pending
-            _data.flag = true
+    await Promise.all(promises)
+    console.log('所有数据加载完成')
 
-            if (_data2.flag) {
-              // 合并数据
-              console.log("请求系统和第三方成功，合并数据", _data, _data2);
-              let generalCnt = _data.general + _data2.general
-              let majorCnt = _data.major + _data2.major
-              dashboardData.value.hiddenDangerData.general = generalCnt
-              dashboardData.value.hiddenDangerData.major = majorCnt
-
-              let totalCnt = generalCnt + majorCnt
-              let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
-              let processedCnt = ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2)
-              let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
-              let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
-              dashboardData.value.hiddenDangerData.progress = {
-                overdue: overdueCnt,
-                processed: processedCnt,
-                processing: processingCnt,
-                pending: pendingCnt,
+    // 第一次加载完成后，隐藏骨架屏
+    if (isFirstLoading.value) {
+      isFirstLoading.value = false
+      console.log('隐藏骨架屏')
     }
-            } else {
-              console.log("请求系统成功，展示数据", _data, _data2);
-              dashboardData.value.hiddenDangerData.general = _data.general
-              dashboardData.value.hiddenDangerData.major = _data.major
-
-              let totalCnt = _data.general + _data.major
-              // 显示系统数据
-              dashboardData.value.hiddenDangerData.progress = {
-                overdue: (_data.overdue / totalCnt * 100).toFixed(2),
-                processed: (_data.processed / totalCnt * 100).toFixed(2),
-                processing: (_data.processing / totalCnt * 100).toFixed(2),
-                pending: (_data.pending / totalCnt * 100).toFixed(2),
-              }
-            }
-          }
-        })
-      }
-    })
-
-
-    // 获取隐患排查治理数据
-    getTableList('hidden_danger_investigation', query).then(res => {
-      if (res.records && res.records.length > 0) {
-        _data2.general = Number(res.records[0].general)
-        _data2.major = Number(res.records[0].major)
-
-        dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
-
-        // 获取隐患排查治理处理进度数据
-        getTableList('hidden_danger_process_progress', query).then(res => {
-          if (res.records && res.records.length > 0) {
-            _data2.flag = true
-            _data2.overdue = Number(res.records[0].overdue) / 100 * (_data2.general + _data2.major)
-            _data2.processed = Number(res.records[0].processed) / 100 * (_data2.general + _data2.major)
-            _data2.processing = Number(res.records[0].processing) / 100 * (_data2.general + _data2.major)
-            _data2.pending = Number(res.records[0].pending) / 100 * (_data2.general + _data2.major)
-
-            if (_data.flag) {
-              console.log("请求第三方和系统成功，合并数据", _data, _data2);
-              // 合并数据
-              let generalCnt = _data.general + _data2.general
-              let majorCnt = _data.major + _data2.major
-              dashboardData.value.hiddenDangerData.general = generalCnt
-              dashboardData.value.hiddenDangerData.major = majorCnt
-
-              let totalCnt = generalCnt + majorCnt
-              let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
-              let processedCnt = ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2)
-              let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
-              let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
-              dashboardData.value.hiddenDangerData.progress = {
-                overdue: overdueCnt,
-                processed: processedCnt,
-                processing: processingCnt,
-                pending: pendingCnt,
-              }
-            } else {
-              //显示三方数据
-              console.log("请求第三方成功，展示数据", _data, _data2);
-              dashboardData.value.hiddenDangerData.general = _data2.general
-              dashboardData.value.hiddenDangerData.major = _data2.major
-
-              dashboardData.value.hiddenDangerData.progress = {
-                overdue: res.records[0].overdue,
-                processed: res.records[0].processed,
-                processing: res.records[0].processing,
-                pending: res.records[0].pending,
-              }
-            }
-          }
-        }).catch(error => {
-          console.error('获取隐患排查治理处理进度数据失败:', error)
-        })
-      }
-    }).catch(error => {
-      console.error('获取隐患排查治理数据失败:', error)
-    })
   } catch (error) {
-    console.error('获取隐患排查治理数据失败:', error)
+    console.error('数据加载过程中出现错误:', error)
+    // 即使出错也要隐藏骨架屏，避免界面一直处于加载状态
+    if (isFirstLoading.value) {
+      isFirstLoading.value = false
+    }
+  }
 }
 
-  try {
+const handleHiddenDangerPannelData = async (query) => {
+  const promises = []
+
+  // 获取隐患排查治理数据 - 系统数据
+  promises.push(
+    getTableList('risk_level_count', query, false, { signal: abortController.signal }).then(res => {
+      if (res.records && res.records.length > 0) {
+        dashboardData.value.hiddenDangerData.general = Number(res.records[0].general_count)
+        dashboardData.value.hiddenDangerData.major = Number(res.records[0].major_count)
+      }
+      return getTableList('risk_status_count', query, false, { signal: abortController.signal })
+    }).then(res => {
+      if (res.records && res.records.length > 0) {
+        const record = res.records[0]
+        dashboardData.value.hiddenDangerData.progress = {
+          overdue: Number(record.overdueCnt).toFixed(2),
+          processed: Number(record.processedCnt).toFixed(2),
+          processing: Number(record.processingCnt).toFixed(2),
+          pending: '0.00'
+        }
+      }
+    }).catch(error => {
+      console.error('获取系统隐患数据失败:', error)
+    })
+  )
+
+  // 获取第三方隐患排查治理数据
+  promises.push(
+    getTableList('hidden_danger_investigation', query, false, { signal: abortController.signal }).then(res => {
+      if (res.records && res.records.length > 0) {
+        // 获取安全指数
+        return getTableList('hidden_danger_safety_index', query, false, { signal: abortController.signal })
+      }
+    }).then(res => {
+      if (res.records && res.records.length > 0) {
+        dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
+      }
+    }).catch(error => {
+      console.error('获取第三方隐患数据失败:', error)
+    })
+  )
+
   // 获取隐患排查治理TOP3类型数据
-    getTableList('hidden_danger_top', query).then(hidden_danger_top => {
+  promises.push(
+    getTableList('hidden_danger_top', query, false, { signal: abortController.signal }).then(hidden_danger_top => {
       if (hidden_danger_top.records && hidden_danger_top.records.length > 0) {
         dashboardData.value.hiddenDangerData.top3Types = hidden_danger_top.records
       }
     }).catch(error => {
       console.error('获取隐患排查治理TOP3类型数据失败:', error)
     })
-  } catch (error) {
-    console.error('获取隐患排查治理TOP3类型数据失败:', error)
-  }
+  )
+
+  return Promise.all(promises)
 }
 
 // 处理风险统计tab切换
-const handleRiskTabChange = async (tab: TabType) => {
+const handleRiskTabChange = async (tab: TabType | '安全类事项' | '工程类事项') => {
   console.log('Tab changed to:', tab)
   try {
-    let code = ''
-    switch (tab) {
-      case '高危作业':
-        code = 'hazardous_operations'
-        break
-      case '安全培训考试':
-        code = 'safety_assessment'
-        break
-      case '安全培训考试':
-        code = 'security_training'
-        break
-      default:
-        code = 'hazardous_operations'
+    // 处理类型映射：组件可能传入 '安全类事项' 或 '工程类事项'
+    let normalizedTab: TabType = '安全类事项'
+    if (tab === '安全类事项' || tab === '安全类事项') {
+      normalizedTab = '安全类事项'
+    } else if (tab === '工程类事项' || tab === '工程类事项') {
+      normalizedTab = '工程类事项'
     }
     
-    if (code == 'hazardous_operations') {
-      // 根据不同的tab请求不同的接口
-      getTableList(
-        code,
-        {...query, activeTab: tab}
-      ).then(response => {
-        // 更新风险统计数据 - 传递完整的数组数据用于饼图显示
-        if (response.records && response.records.length > 0) {
-          dangerDetail.value = response.records
+    let workOrderType = ''
+    switch (tab) {
+      case '安全类事项':
+        workOrderType = '物业服务-安全'
+        break
+      case '工程类事项':
+        workOrderType = '物业服务-工程'
+        break
+      default:
+        workOrderType = '物业服务-安全'
     }
-      }).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'
-          //   }
-          // ]
+
+    // 同时获取维保任务和巡检任务的数据
+    const [maintenanceResponse, inspectionResponse] = await Promise.all([
+      getWorkOrderStatistics({
+        workOrderType,
+        taskType: '维保任务',
+        campus_id: query.campus_id
+      }, { signal: abortController.signal }).catch(error => {
+        console.error('获取维保任务数据失败:', error)
+        return {records: []}
+      }),
+      getWorkOrderStatistics({
+        workOrderType,
+        taskType: '巡检任务',
+        campus_id: query.campus_id
+      }, { signal: abortController.signal }).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
         }
       })
-    } 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"
+
+      // 创建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,
+          rate: Number(data.rate) || 0,
+          status: {
+            notStarted: Number(data.pending) || 0,
+            inProgress: Number(data.processing) || 0,
+            done: Number(data.processed) || 0,
+            voided: Number(data.closed) || 0
           }
-          ]
-        }
-      }).catch(error => {
-        console.error('获取风险统计数据失败:', error)
         })
+      })
+
+      return charts
     }
+
+    // 转换维保和巡检数据
+    const maintenanceCharts = convertToChartData(maintenanceResponse.records || [], '维保类')
+    const inspectionCharts = convertToChartData(inspectionResponse.records || [], '巡检类')
+
+    // 合并为6个图表：先维保（3个），后巡检（3个）
+    const allCharts = [...maintenanceCharts, ...inspectionCharts]
+
+    // 更新riskStatistics（使用标准化后的tab）
+    riskStatistics.value[normalizedTab] = allCharts
+
+    console.log('更新后的riskStatistics:', riskStatistics.value)
   } catch (error) {
     console.error('获取风险统计数据失败:', error)
   }
@@ -658,11 +631,6 @@ const onRegionChange = (item: RegionItem): void => {
   })
 }
 
-// 打开区域选择器
-const openRegionSelector = (): void => {
-  regionSelectorVisible.value = true
-}
-
 // 更新时间
 const updateTime = (): void => {
   const now = new Date()
@@ -1345,7 +1313,7 @@ const timeOut1 = (): void => {
 
               @keyframes typeFlashEffect {
                 0% {
-                  background-color: #1afb8f;
+                  background-color: #158e56;
                 }
 
                 50% {
@@ -1353,7 +1321,7 @@ const timeOut1 = (): void => {
                 }
 
                 100% {
-                  background-color: #1afb8f;
+                  background-color: #158e56;
                 }
               }
 
@@ -1371,14 +1339,14 @@ const timeOut1 = (): void => {
                 line-height: 25px;
                 color: #fff;
                 text-align: center;
-                background-color: #1afb8f;
+                background-color: #158e56;
                 border-radius: 2px;
                 animation: typeNumberPulse 1.5s ease-in-out infinite;
                 transition: all 0.3s ease;
               }
 
               .type-number:hover {
-                background-color: #16d47a;
+                background-color: #158e56;
                 transform: scale(1.2);
               }
 

src/views/screen/mainScreenV1.vue

@@ -33,9 +33,10 @@
 
       <div class="center-container">
         <div class="center-content">
-          <span class="title">隐患排查治理</span>
+          <!-- 隐患排查治理 -->
+          <span class="title"></span>
           <img class="bottom-border-line" src="@/assets/images/title_border_line_1.png" />
-          <span class="sub-title">分类风险</span>
+          <span class="sub-title">隐患等级</span>
           <img width="50%" src="@/assets/images/line_1.png" />
           <div class="type-wrapper">
             <div class="type-item">

src/views/screen/parkScreen.vue

@@ -60,7 +60,8 @@
           </div>
           <div class="bottom-card">
             <div class="bottom-card-title">
-              <span>隐患排查治理</span>
+              <!--隐患排查治理-->
+              <span></span>
               <img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
             </div>
             <div class="type-wrapper">

src/views/screen/powerMonitoring.vue

@@ -0,0 +1,948 @@
+<template>
+  <div class="big-screen-container">
+    <!-- 标题栏 -->
+    <div class="screen-header">
+      <h1 class="screen-title">动环监控大屏</h1>
+      <div class="screen-datetime">{{ currentDateTime }}</div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="screen-content">
+      <!-- 第一行：统计卡片 -->
+      <div class="stats-row">
+        <!-- 总设备数卡片 -->
+        <div class="stat-card">
+          <div class="card-title">总设备数</div>
+          <div class="card-value">{{ totalDevices.toLocaleString() }}</div>
+          <div class="card-trend growth">
+            <!-- <svg class="trend-icon" viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor">
+              <path d="M868 545.5L536.1 163a31.96 31.96 0 0 0-48.3 0L156 545.5a7.97 7.97 0 0 0 6 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z" />
+            </svg> -->
+            <!-- <span>较上月增长 {{ totalDevicesGrowth }}%</span> -->
+          </div>
+        </div>
+
+        <!-- 在线设备数卡片 -->
+        <div class="stat-card">
+          <div class="card-title">在线设备数</div>
+          <div class="card-value">{{ onlineDevices.toLocaleString() }}</div>
+          <div class="card-trend online-rate">
+            <!-- <span>在线率 {{ onlineRate }}%</span> -->
+          </div>
+        </div>
+      </div>
+
+      <!-- 第二行：图表 -->
+      <div class="charts-row">
+        <!-- 告警趋势折线图 -->
+        <div class="chart-card">
+          <div class="chart-title">当月告警趋势</div>
+          <div ref="alarmTrendChartRef" class="chart-container"></div>
+        </div>
+
+        <!-- 设备类型分布饼图 -->
+        <div class="chart-card">
+          <div class="chart-title">告警设备类型分布</div>
+          <div ref="deviceTypePieChartRef" class="chart-container"></div>
+        </div>
+      </div>
+
+      <!-- 第三行：园区信息列表 -->
+      <div class="table-row">
+        <div class="table-card">
+          <div class="table-title">园区信息列表</div>
+          <el-table
+            :data="parkList"
+            :style="{ width: '100%' }"
+            class="park-table"
+            height="calc(100% - 50px)"
+            :header-cell-style="{
+              background: '#1a3a52',
+              color: '#ffffff',
+              borderBottom: '1px solid rgba(78, 155, 248, 0.15)',
+              fontWeight: '500',
+              padding: '12px 8px'
+            }"
+            :row-style="getRowStyle"
+            :cell-style="{
+              borderBottom: '1px solid rgba(78, 155, 248, 0.08)',
+              color: '#ffffff',
+              padding: '12px 8px'
+            }"
+          >
+            <el-table-column prop="parkName" label="园区名称" min-width="200" align="left" />
+            <el-table-column prop="totalDevices" label="设备总数" min-width="120" align="center">
+              <template #default="{ row }">
+                <span class="device-count">{{ row.totalDevices }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="upsStatus" label="UPS" min-width="140" align="center">
+              <template #default="{ row }">
+                <span :class="['status-text', row.upsStatus === '正常' ? 'status-normal' : 'status-alarm']">
+                  {{ row.upsStatus }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="airConditionStatus" label="精密空调" min-width="140" align="center">
+              <template #default="{ row }">
+                <span :class="['status-text', row.airConditionStatus === '正常' ? 'status-normal' : 'status-alarm']">
+                  {{ row.airConditionStatus }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="temperatureStatus" label="温湿度" min-width="140" align="center">
+              <template #default="{ row }">
+                <span :class="['status-text', row.temperatureStatus === '正常' ? 'status-normal' : 'status-alarm']">
+                  {{ row.temperatureStatus }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="otherStatus" label="其他" min-width="140" align="center">
+              <template #default="{ row }">
+                <span :class="['status-text', row.otherStatus === '正常' ? 'status-normal' : 'status-alarm']">
+                  {{ row.otherStatus }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column label="详情" min-width="180" align="center">
+              <template #default="{ row }">
+                <a
+                  :class="['detail-link', row.hasAlarm ? 'detail-alarm' : 'detail-normal']"
+                  @click="handleViewDetail(row)"
+                  :href="'http://10.0.64.20/ibms/render/configure/render?formUuid=LCC-1840031646260649984'"
+                  target="_blank"
+                >
+                  <span v-if="row.hasAlarm" class="alarm-badge">异常</span>
+                  <span v-else class="normal-badge">正常</span>
+                  查看详情
+                </a>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import * as echarts from 'echarts';
+import type { EChartsOption } from 'echarts';
+import { 
+  getPowerEnvDeviceTotalNum,
+  getPowerEnvDeviceAlarmDistribution,
+  getPowerEnvAlarmTrend,
+  getPowerEnvDeviceGroupTypeCampus
+} from '@/api/index';
+
+// 定义园区信息类型
+interface ParkInfo {
+  key: string;
+  parkName: string;
+  totalDevices: number;
+  upsStatus: string;
+  airConditionStatus: string;
+  temperatureStatus: string | number;
+  otherStatus: string;
+  hasAlarm: boolean;
+}
+
+// 当前日期时间
+const currentDateTime = ref('');
+
+// 统计数据
+const totalDevices = ref(0);
+const onlineDevices = ref(0);
+const onlineRate = ref(100); // 在线率写死100%
+
+// 图表引用
+const alarmTrendChartRef = ref<HTMLDivElement>();
+const deviceTypePieChartRef = ref<HTMLDivElement>();
+
+// 图表实例
+let alarmTrendChart: echarts.ECharts | null = null;
+let deviceTypePieChart: echarts.ECharts | null = null;
+
+// 告警趋势数据
+const alarmTrendData = ref({
+  dates: ['5日', '10日', '15日', '20日', '25日', '30日'],
+  values: [8, 4, 20, 16, 21, 9]
+});
+
+// 设备类型分布数据
+const deviceTypeData = ref([
+  { name: 'UPS', value: 35 },
+  { name: '精密空调', value: 25 },
+  { name: '温湿度检测', value: 20 },
+  { name: '其他', value: 20 }
+]);
+
+// 园区信息列表数据
+const parkList = ref<ParkInfo[]>([]);
+
+// 分页参数
+const parkListPage = ref({
+  pageNo: 1,
+  pageSize: 10,
+  total: 0
+});
+
+// 更新日期时间
+const updateDateTime = () => {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0');
+  const day = String(now.getDate()).padStart(2, '0');
+  const hours = String(now.getHours()).padStart(2, '0');
+  const minutes = String(now.getMinutes()).padStart(2, '0');
+  const seconds = String(now.getSeconds()).padStart(2, '0');
+  currentDateTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+};
+
+// 初始化告警趋势图表
+const initAlarmTrendChart = (yAxisMax: number = 25) => {
+  if (!alarmTrendChartRef.value) return;
+
+  if (!alarmTrendChart) {
+    alarmTrendChart = echarts.init(alarmTrendChartRef.value);
+  }
+
+  // 计算峰值点（找出最大值）
+  const maxValue = Math.max(...alarmTrendData.value.values, 0);
+  const maxIndex = alarmTrendData.value.values.indexOf(maxValue);
+  const markPointData = maxValue > 0 ? [{ name: '峰值', coord: [maxIndex, maxValue] }] : [];
+
+  const option: EChartsOption = {
+    grid: {
+      top: '15%',
+      left: '8%',
+      right: '5%',
+      bottom: '12%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: alarmTrendData.value.dates,
+      axisLine: {
+        lineStyle: {
+          color: '#3a5165'
+        }
+      },
+      axisLabel: {
+        color: '#8b9bb3',
+        fontSize: 12
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#1e3a52',
+          type: 'dashed'
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      min: 0,
+      max: yAxisMax,
+      interval: yAxisMax / 5,
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        color: '#8b9bb3',
+        fontSize: 12
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#1e3a52',
+          type: 'dashed'
+        }
+      }
+    },
+    series: [
+      {
+        data: alarmTrendData.value.values,
+        type: 'line',
+        smooth: true,
+        lineStyle: {
+          color: '#4e9bf8',
+          width: 2
+        },
+        itemStyle: {
+          color: '#4e9bf8',
+          borderWidth: 2
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(78, 155, 248, 0.3)' },
+              { offset: 1, color: 'rgba(78, 155, 248, 0.05)' }
+            ]
+          }
+        },
+        markPoint: {
+          symbol: 'circle',
+          symbolSize: 8,
+          itemStyle: {
+            color: '#ff5555',
+            borderWidth: 2,
+            borderColor: '#ff5555'
+          },
+          data: markPointData
+        }
+      }
+    ]
+  };
+
+  alarmTrendChart.setOption(option);
+};
+
+// 更新告警趋势图表
+const updateAlarmTrendChart = (yAxisMax: number = 25) => {
+  if (!alarmTrendChart) {
+    initAlarmTrendChart(yAxisMax);
+    return;
+  }
+  
+  // 计算峰值点
+  const maxValue = Math.max(...alarmTrendData.value.values, 0);
+  const maxIndex = alarmTrendData.value.values.indexOf(maxValue);
+  const markPointData = maxValue > 0 ? [{ name: '峰值', coord: [maxIndex, maxValue] }] : [];
+
+  alarmTrendChart.setOption({
+    xAxis: {
+      data: alarmTrendData.value.dates
+    },
+    yAxis: {
+      max: yAxisMax,
+      interval: yAxisMax / 5
+    },
+    series: [
+      {
+        data: alarmTrendData.value.values,
+        markPoint: {
+          data: markPointData
+        }
+      }
+    ]
+  });
+};
+
+// 初始化设备类型分布饼图
+const initDeviceTypePieChart = () => {
+  if (!deviceTypePieChartRef.value) return;
+
+  if (!deviceTypePieChart) {
+    deviceTypePieChart = echarts.init(deviceTypePieChartRef.value);
+  }
+
+  updateDeviceTypePieChart();
+};
+
+// 更新设备类型分布饼图
+const updateDeviceTypePieChart = () => {
+  if (!deviceTypePieChart) {
+    initDeviceTypePieChart();
+    return;
+  }
+
+  const total = deviceTypeData.value.reduce((sum, item) => sum + item.value, 0);
+
+  const option: EChartsOption = {
+    legend: {
+      orient: 'vertical',
+      right: '10%',
+      top: 'center',
+      textStyle: {
+        color: '#ffffff',
+        fontSize: 13
+      },
+      formatter: (name: string) => {
+        const item = deviceTypeData.value.find(d => d.name === name);
+        return `${name} (${item?.value || 0})`;
+      }
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['45%', '70%'],
+        center: ['35%', '50%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: true,
+          position: 'center',
+          formatter: () => {
+            return `{value|${total}}\n{label|告警}`;
+          },
+          rich: {
+            value: {
+              color: '#ffffff',
+              fontSize: 28,
+              fontWeight: 'bold',
+              lineHeight: 40
+            },
+            label: {
+              color: '#8b9bb3',
+              fontSize: 14,
+              lineHeight: 20
+            }
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: deviceTypeData.value.map((item, index) => {
+          const colors = ['#4e9bf8', '#52c41a', '#fa8c16', '#8c8c8c'];
+          return {
+            name: item.name,
+            value: item.value,
+            itemStyle: {
+              color: colors[index]
+            }
+          };
+        })
+      }
+    ]
+  };
+
+  deviceTypePieChart.setOption(option);
+};
+
+// 获取行样式（条纹效果）
+const getRowStyle = ({ rowIndex }: { rowIndex: number }) => {
+  if (rowIndex % 2 === 0) {
+    return {
+      background: 'rgba(78, 155, 248, 0.03)',
+      color: '#ffffff'
+    };
+  }
+  return {
+    background: 'transparent',
+    color: '#ffffff'
+  };
+};
+
+// 查看详情
+const handleViewDetail = (record: ParkInfo) => {
+  console.log('查看园区详情:', record);
+  // TODO: 实现详情页面跳转或弹窗
+};
+
+// 获取总设备数
+const fetchTotalDevices = async () => {
+  try {
+    const params = {
+      pageNo: 1,
+      pageSize: 10
+    };
+    const response = await getPowerEnvDeviceTotalNum(params);
+    
+    if (response.records?.length > 0) {
+      
+      const total = parseInt(response.records[0].total || '0', 10);
+      totalDevices.value = total;
+      onlineDevices.value = total; // 在线设备数也用total
+    }
+  } catch (error) {
+    console.error('获取总设备数失败:', error);
+  }
+};
+
+// 获取告警设备类型分布
+const fetchAlarmDistribution = async () => {
+  try {
+    const params = {
+      pageNo: 1,
+      pageSize: 10
+    };
+    const response = await getPowerEnvDeviceAlarmDistribution(params);
+    debugger
+    if (response.records?.length > 0) {
+      const record = response.records[0];
+      deviceTypeData.value = [
+        { name: 'UPS', value: parseInt(record.ups_num || '0', 10) },
+        { name: '精密空调', value: parseInt(record.jmkt_num || '0', 10) },
+        { name: '温湿度检测', value: parseInt(record.wsd_num || '0', 10) },
+        { name: '其他', value: parseInt(record.other_num || '0', 10) }
+      ];
+      // 更新饼图
+      updateDeviceTypePieChart();
+    }
+  } catch (error) {
+    console.error('获取告警设备类型分布失败:', error);
+  }
+};
+
+// 获取当月告警趋势
+const fetchAlarmTrend = async () => {
+  try {
+    const params = {
+      pageNo: 1,
+      pageSize: 100 // 可能需要获取更多数据
+    };
+    const response = await getPowerEnvAlarmTrend(params);
+    debugger
+    if (response.records?.length > 0) {
+      const records = response.records;
+      // 处理日期格式：从 "2025-12-10" 转换为 "10日"
+      const dates = records.map((item: any) => {
+        const date = new Date(item.alarm_date);
+        return `${date.getDate()}日`;
+      });
+      const values = records.map((item: any) => parseInt(item.alarm_count || '0', 10));
+      
+      alarmTrendData.value = {
+        dates,
+        values
+      };
+      
+      // 计算最大值用于设置y轴
+      const maxValue = Math.max(...values, 0);
+      const yAxisMax = maxValue > 0 ? Math.ceil(maxValue / 5) * 5 : 25;
+      
+      // 更新折线图
+      updateAlarmTrendChart(yAxisMax);
+    }
+  } catch (error) {
+    console.error('获取当月告警趋势失败:', error);
+  }
+};
+
+// 格式化状态显示：如果数量>0显示"X个告警"，否则"正常"
+const formatStatus = (count: string | number): string => {
+  const num = typeof count === 'string' ? parseInt(count || '0', 10) : count;
+  return num > 0 ? `${num}个告警` : '正常';
+};
+
+// 获取园区信息列表
+const fetchParkList = async () => {
+  try {
+    const params = {
+      pageNo: parkListPage.value.pageNo,
+      pageSize: parkListPage.value.pageSize
+    };
+    const response = await getPowerEnvDeviceGroupTypeCampus(params);
+    
+    if (response.records?.length>0) {
+      parkListPage.value.total = response.records?.length || 0;
+      
+      if (response.records && response.records.length > 0) {
+        parkList.value = response.records.map((item: any) => {
+          const upsCount = parseInt(item.ups || '0', 10);
+          const jmktCount = parseInt(item.jmkt || '0', 10);
+          const wsdCount = parseInt(item.wsd || '0', 10);
+          const otherCount = parseInt(item.other || '0', 10);
+          const alarmCount = parseInt(item.alarm || '0', 10);
+          
+          return {
+            key: item.campus_id || item.row_id,
+            parkName: item.campus_name || '',
+            totalDevices: parseInt(item.total || '0', 10),
+            upsStatus: formatStatus(upsCount),
+            airConditionStatus: formatStatus(jmktCount),
+            temperatureStatus: formatStatus(wsdCount),
+            otherStatus: formatStatus(otherCount),
+            hasAlarm: alarmCount > 0
+          };
+        });
+      } else {
+        parkList.value = [];
+      }
+    }
+  } catch (error) {
+    console.error('获取园区信息列表失败:', error);
+  }
+};
+
+// 定时器
+let dateTimeTimer: number | null = null;
+
+// 组件挂载
+onMounted(async () => {
+  // 更新日期时间
+  updateDateTime();
+  dateTimeTimer = window.setInterval(updateDateTime, 1000);
+
+  // 获取总设备数
+  fetchTotalDevices();
+
+  // 获取园区信息列表
+  fetchParkList();
+
+  // 初始化图表（先用默认数据）
+  setTimeout(() => {
+    initAlarmTrendChart();
+    initDeviceTypePieChart();
+    
+    // 图表初始化后再获取数据并更新
+    fetchAlarmDistribution();
+    fetchAlarmTrend();
+  }, 100);
+
+  // 监听窗口大小变化
+  window.addEventListener('resize', handleResize);
+});
+
+// 组件卸载
+onBeforeUnmount(() => {
+  if (dateTimeTimer) {
+    clearInterval(dateTimeTimer);
+  }
+  if (alarmTrendChart) {
+    alarmTrendChart.dispose();
+  }
+  if (deviceTypePieChart) {
+    deviceTypePieChart.dispose();
+  }
+  window.removeEventListener('resize', handleResize);
+});
+
+// 处理窗口大小变化
+const handleResize = () => {
+  alarmTrendChart?.resize();
+  deviceTypePieChart?.resize();
+};
+</script>
+
+<style scoped lang="scss">
+.big-screen-container {
+  width: 100%;
+  min-height: 100vh;
+  background: linear-gradient(180deg, #0a1929 0%, #0d1e2f 100%);
+  padding: 20px;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+// 标题栏
+.screen-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 0 10px;
+
+  .screen-title {
+    font-size: 32px;
+    font-weight: bold;
+    color: #ffffff;
+    margin: 0;
+    letter-spacing: 2px;
+  }
+
+  .screen-datetime {
+    font-size: 18px;
+    color: #8b9bb3;
+    font-family: 'Courier New', monospace;
+  }
+}
+
+// 主要内容区域
+.screen-content {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+// 统计卡片行
+.stats-row {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+}
+
+.stat-card {
+  background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
+  border-radius: 12px;
+  padding: 30px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(78, 155, 248, 0.1);
+
+  .card-title {
+    font-size: 16px;
+    color: #8b9bb3;
+    margin-bottom: 15px;
+  }
+
+  .card-value {
+    font-size: 48px;
+    font-weight: bold;
+    color: #ffffff;
+    margin-bottom: 12px;
+    font-family: 'Arial', sans-serif;
+  }
+
+  .card-trend {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+
+    &.growth {
+      color: #52c41a;
+
+      .trend-icon {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+      }
+    }
+
+    &.online-rate {
+      color: #13c2c2;
+    }
+  }
+}
+
+// 图表行
+.charts-row {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+}
+
+.chart-card {
+  background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(78, 155, 248, 0.1);
+  height: 350px;
+
+  .chart-title {
+    font-size: 16px;
+    color: #ffffff;
+    margin-bottom: 15px;
+    font-weight: 500;
+  }
+
+  .chart-container {
+    width: 100%;
+    height: calc(100% - 40px);
+  }
+}
+
+// 表格行
+.table-row {
+  width: 100%;
+}
+
+.table-card {
+  background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(78, 155, 248, 0.1);
+  height: 450px;
+
+  .table-title {
+    font-size: 16px;
+    color: #ffffff;
+    margin-bottom: 15px;
+    font-weight: 500;
+  }
+
+  :deep(.park-table) {
+    background: transparent !important;
+    
+    // 表格主体背景
+    .el-table__inner-wrapper {
+      background: transparent !important;
+      
+      &::before {
+        display: none;
+      }
+    }
+
+    .el-table__body-wrapper {
+      background: transparent !important;
+      
+      // 滚动条样式
+      scrollbar-width: thin;
+      scrollbar-color: rgba(78, 155, 248, 0.3) transparent;
+
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: rgba(78, 155, 248, 0.3);
+        border-radius: 3px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+    }
+
+    .el-table__header-wrapper,
+    .el-table__footer-wrapper {
+      background: transparent !important;
+    }
+
+    // 表格行悬浮效果
+    .el-table__row {
+      &:hover > td {
+        background: rgba(78, 155, 248, 0.1) !important;
+      }
+    }
+
+    // 空数据样式
+    .el-table__empty-block {
+      background: transparent !important;
+      
+      .el-table__empty-text {
+        color: #8b9bb3;
+      }
+    }
+
+    .device-count {
+      color: #ffffff;
+      font-weight: 500;
+    }
+
+    .status-text {
+      padding: 2px 8px;
+      border-radius: 4px;
+      font-size: 13px;
+
+      &.status-normal {
+        color: #52c41a;
+      }
+
+      &.status-alarm {
+        color: #ff4d4f;
+      }
+    }
+
+    .detail-link {
+      cursor: pointer;
+      font-size: 13px;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      text-decoration: none;
+      color: #4e9bf8;
+
+      .alarm-badge,
+      .normal-badge {
+        display: inline-block;
+        padding: 4px 12px;
+        border-radius: 4px;
+        font-size: 12px;
+        color: #ffffff;
+        font-weight: 500;
+      }
+
+      .alarm-badge {
+        background: #ff4d4f;
+      }
+
+      .normal-badge {
+        background: #52c41a;
+      }
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+}
+
+// 响应式布局
+@media screen and (max-width: 1600px) {
+  .screen-header {
+    .screen-title {
+      font-size: 28px;
+    }
+
+    .screen-datetime {
+      font-size: 16px;
+    }
+  }
+
+  .stat-card {
+    padding: 25px;
+
+    .card-value {
+      font-size: 42px;
+    }
+  }
+
+  .chart-card {
+    height: 320px;
+  }
+
+  .table-card {
+    height: 400px;
+  }
+}
+
+@media screen and (max-width: 1280px) {
+  .screen-header {
+    .screen-title {
+      font-size: 26px;
+    }
+
+    .screen-datetime {
+      font-size: 15px;
+    }
+  }
+
+  .stat-card {
+    padding: 20px;
+
+    .card-title {
+      font-size: 14px;
+    }
+
+    .card-value {
+      font-size: 38px;
+    }
+
+    .card-trend {
+      font-size: 13px;
+    }
+  }
+
+  .chart-card {
+    height: 300px;
+    padding: 15px;
+
+    .chart-title {
+      font-size: 14px;
+    }
+  }
+
+  .table-card {
+    height: 380px;
+    padding: 15px;
+
+    .table-title {
+      font-size: 14px;
+    }
+  }
+}
+
+// 仅在非常小的屏幕（小于1024px）才改为单列
+@media screen and (max-width: 1024px) {
+  .stats-row,
+  .charts-row {
+    grid-template-columns: 1fr;
+  }
+
+  .chart-card {
+    height: 280px;
+  }
+
+  .table-card {
+    height: 360px;
+  }
+}
+</style>

src/views/screen/regionScreen.vue

@@ -2,12 +2,18 @@
   <div class="dashboard-container">
     <!-- 顶部标题栏 -->
     <div class="header-container">
-      <div class="header-left">
-        <img class="back-img" @click="returnToHeadquarters" src="@/assets/images/screen/back_image.png" />
-        <div class="back-button" @click="openRegionSelector"> {{ selectedRegion }}
-          <span>···</span>
-        </div>
-      </div>
+      <HeaderSelector
+        back-button-type="image"
+        :show-back-button="true"
+        :on-back="returnToHeadquarters"
+        :display-text="selectedRegion"
+        :clickable="true"
+        :show-selector-indicator="true"
+        selector-type="park"
+        :selected-value="selectedPark"
+        :region-code="query.regionCode"
+        @selector-change="onRegionChange"
+      />
       <h1 class="header-title">{{ selectedRegion }}综合监控大屏</h1>
       <div class="date-wrapper">
         <span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
@@ -20,33 +26,42 @@
     <!-- 主内容区 -->
     <div class="content-container">
       <div class="left-wrapper">
-        <OverviewPanel :totalCount="dashboardData?.totalCount || 0"
+        <OverviewPanel :loading="isFirstLoading"
+                       :totalCount="dashboardData?.totalCount || 0"
                        :formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
-          :externalStaffCount="dashboardData?.externalStaffCount || 0" :visitorCount="dashboardData?.visitorCount || 0"
+                       :externalStaffCount="dashboardData?.externalStaffCount || 0"
+                       :visitorCount="dashboardData?.visitorCount || 0"
                        :parkStatistics="dashboardData?.parkStatistics"/>
-        <RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail" :park="parkValue"
+        <RiskStatisticsPanel :loading="isFirstLoading" :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
+                             :park="parkValue"
                              @tab-change="handleRiskTabChange" :campus_id="query.campus_id"/>
       </div>
       <div class="right-wrapper">
-        <HighRiskAlertPanel :alertData="dashboardData?.alertData" :alertDetails="dashboardData?.alertData.details"
+        <HighRiskAlertPanel :loading="isFirstLoading"
+                            :alertData="dashboardData?.alertData"
+                            :alertDetails="dashboardData?.alertData.details"
+                            linkUrl="http://10.0.64.20/security/console/command-center?p=tabl"
+                            :sourceIndex="sourceIndex"/>
+        <TimeoutWorkOrderPanel :loading="isFirstLoading"
+                               :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
+                               :alertDetails="dashboardData?.timeoutWorkOrders.details"
+                               linkUrl="http://10.0.64.20/pms/workorder-list"
                                :sourceIndex="sourceIndex"/>
-        <TimeoutWorkOrderPanel :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
-          :alertDetails="dashboardData?.timeoutWorkOrders.details" :sourceIndex="sourceIndex" />
       </div>
-      <HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData" />
+      <HiddenDangerPanel :loading="isFirstLoading" :hiddenDangerData="dashboardData?.hiddenDangerData"/>
     </div>
   </div>
 
-  <!-- 区域选择弹窗 -->
-  <RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedPark" :regions="regionOption"
-    @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 {useRoute, useRouter} from 'vue-router'
-import RegionSelector from './components/RegionSelector.vue'
+
+// 创建 AbortController 用于取消请求
+const abortController = new AbortController()
+import HeaderSelector from './components/HeaderSelector.vue'
 import WeatherWarning from './components/WeatherWarning.vue'
 import {getDashboardData, getAlertDetails, type DashboardData} from '@/api/dashboard'
 
@@ -67,14 +82,13 @@ interface RegionItem {
   code: string
 }
 
-type TabType = '危险作业' | '安全考核' | '安全、保密培训'
+type TabType = '安全类事项' | '工程类事项'
 
 // 响应式数据
 const currentDateTime = ref<string>('')
 const currentDate = ref<string>('')
 const currentWeek = ref<string>('')
 const currentTime = ref<string>('')
-const regionSelectorVisible = ref<boolean>(false)
 const selectedRegion = ref<string>('')
 const sourceIndex = ref<number>(1)
 
@@ -89,12 +103,18 @@ const visitorCount = ref<number>(0)
 // 总体概览-各园区统计
 const parkStatistics = ref<any>()
 // 危险作业/安全考核/安全、保密培训
-const riskStatistics = ref<any>()
+const riskStatistics = ref<Record<TabType, any[]>>({
+  安全类事项: [],
+  工程类事项: []
+})
 const dangerDetail = ref<any>()
 // 动画相关的状态
 const isAnimating = ref<boolean>(false)
 const animationDuration = 2000 // 动画持续时间（毫秒）
 
+// 首次加载状态
+const isFirstLoading = ref<boolean>(true)
+
 // 数字变化时的闪烁效果
 const flashNumbers = () => {
   const numberElements = document.querySelectorAll('.total-number, .type-number')
@@ -191,7 +211,6 @@ const updateAllCounts = (counts: {
 const router = useRouter()
 const route = useRoute()
 
-const regionOption = ref<RegionItem[]>([])
 const selectedPark = ref<string>('')
 const parkValue = ref<string>('')
 // 定时器ID
@@ -212,6 +231,43 @@ const query = reactive({
   regionCode: ""
 })
 
+// 缓存工具函数 - 三个页面共享的缓存
+const CACHE_KEY = 'shared_regionOption_cache'
+const CACHE_DURATION = 5 * 60 * 1000 // 5分钟
+
+interface CacheData {
+  records: any[] // 原始接口返回的数据
+  timestamp: number
+}
+
+const getCachedRegionOption = (): any[] | null => {
+  try {
+    const cached = sessionStorage.getItem(CACHE_KEY)
+    if (cached) {
+      const cacheData: CacheData = JSON.parse(cached)
+      // 检查缓存是否在有效期内
+      return cacheData.records
+    }
+  } catch (error) {
+    console.error('读取缓存失败:', error)
+    sessionStorage.removeItem(CACHE_KEY)
+  }
+  return null
+}
+
+const setCachedRegionOption = (records: any[]) => {
+  try {
+    const cacheData: CacheData = {
+      records,
+      timestamp: Date.now()
+    }
+    sessionStorage.setItem(CACHE_KEY, JSON.stringify(cacheData))
+    console.log('regionOption 数据已缓存')
+  } catch (error) {
+    console.error('保存缓存失败:', error)
+  }
+}
+
 // 生命周期
 onMounted(async () => {
   updateTime()
@@ -224,55 +280,52 @@ onMounted(async () => {
     console.log("区域>>>>>", selectedRegion.value, query.regionCode);
   }
 
+  // 先检查缓存
+  const cachedRecords = getCachedRegionOption()
+  let records = cachedRecords
+
+  if (!records || records.length === 0) {
+    // 缓存不存在或已过期，调用接口
     try {
-    let { records } = await getTableList(
-      'park_info_list'
-    )
-    // records = [
-    //   {
-    //     "region_id": "130601",
-    //     "park_code": "1825468527486140416",
-    //     "region": "北京",
-    //     "park_name": "雄安新区总部"
-    //   },
-    //   {
-    //     "region_id": "130601",
-    //     "park_code": "1825468527486140417",
-    //     "region": "北京",
-    //     "park_name": "雄安地面站"
-    //   },
-    //   {
-    //     "region_id": "130603",
-    //     "park_code": "1825468527486140426",
-    //     "region": "武汉",
-    //     "park_name": "花山新区总部"
-    //   }
-    // ]
+      let result = await getTableList('park_info_list', {}, false, { signal: abortController.signal })
+      records = result.records || []
+
       if (records && records.length > 0) {
-      // 去重region字段，使用Map来确保唯一性
+        // 保存到缓存
+        setCachedRegionOption(records)
+      }
+    } catch (error) {
+      console.error('初始化园区数据失败:', error)
+      records = []
+    }
+  }
+
+  if (records && records.length > 0) {
+    // 根据regionCode过滤，去重park_name字段
     const regionMap = new Map()
     records.filter((el) => el.region_id == query.regionCode)
-        .map(el => { return el })
       .forEach(el => {
         if (!regionMap.has(el.park_name)) {
           regionMap.set(el.park_name, {
             name: el.park_name,
-              code: el.park_code // 使用region_code作为code
+            code: el.park_code
           })
         }
       })
-      // // 转换为数组
-      regionOption.value = Array.from(regionMap.values())
-      console.log('regionOption.value>>>>', regionOption.value);
-
-      query.campus_id = regionOption.value.map(el => el.code).join()
+    // 转换为数组并设置 campus_id
+    const regionArray = Array.from(regionMap.values())
+    query.campus_id = regionArray.map(el => el.code).join()
   }
-  } catch (error) {
-    console.error('初始化园区数据失败:', error)
-  }
-
-  // 初始化数据
+  // 初始化数据 - 先加载数据，再设置初始值
   await loadDashboardData()
+  // 暂时先放在这里 - 确保 dashboardData.value 已初始化后再访问
+  if (dashboardData.value && dashboardData.value.hiddenDangerData) {
+    dashboardData.value.hiddenDangerData.general = 0
+    dashboardData.value.hiddenDangerData.major = 0
+    dashboardData.value.hiddenDangerData.progress.overdue = 0
+    dashboardData.value.hiddenDangerData.progress.processed = 0
+    dashboardData.value.hiddenDangerData.progress.processing = 0
+  }
 
   // 启动定时器
   timeOut1()
@@ -283,8 +336,11 @@ onMounted(async () => {
   }, 2 * 60 * 1000) // 每2分钟更新一次
 })
 
-// 组件卸载时清理定时器
+// 组件卸载时清理定时器并取消所有请求
 onUnmounted(() => {
+  // 取消所有正在进行的请求
+  abortController.abort()
+
   if (dashboardTimerId.value) {
     clearInterval(dashboardTimerId.value)
     dashboardTimerId.value = null
@@ -311,7 +367,7 @@ const loadDashboardData = async (): Promise<void> => {
 
   try {
     // 获取总体概览数据
-    getTableList('generalTotal', query).then(generalTotal => {
+    getTableList('generalTotal', query, false, { signal: abortController.signal }).then(generalTotal => {
       if (generalTotal.records && generalTotal.records.length > 0) {
         dashboardData.value.totalCount = generalTotal.records.reduce((sum, item) => sum + Number(item.totalCount || 0), 0)
         dashboardData.value.formalEmployeeCount = generalTotal.records.reduce((sum, item) => sum + Number(item.formalEmployeeCount || 0), 0)
@@ -331,7 +387,7 @@ const loadDashboardData = async (): Promise<void> => {
 
   try {
     // 获取各园区统计数据
-    getTableList('parkscreen_user_info', query).then(parkscreen_user_info => {
+    getTableList('parkscreen_user_info', query, false, { signal: abortController.signal }).then(parkscreen_user_info => {
       if (parkscreen_user_info.records && parkscreen_user_info.records.length > 0) {
         dashboardData.value.parkStatistics = parkscreen_user_info.records.map(el => {
           return {
@@ -349,7 +405,7 @@ const loadDashboardData = async (): Promise<void> => {
 
   try {
     // 获取风险预警数据
-    getTableList('risk_alert_data', query).then(risk_alert_data => {
+    getTableList('risk_alert_data', query, false, { signal: abortController.signal }).then(risk_alert_data => {
       if (risk_alert_data.records && risk_alert_data.records.length > 0) {
         dashboardData.value.alertData.total = risk_alert_data.records.reduce((sum, item) => sum + Number(item.total || 0), 0)
         dashboardData.value.alertData.processed = risk_alert_data.records.reduce((sum, item) => sum + Number(item.processed || 0), 0)
@@ -365,10 +421,10 @@ const loadDashboardData = async (): Promise<void> => {
 
   try {
     // 获取风险预警详情数据
-    getTableList('risk_alert_detail', query).then(risk_alert_detail => {
-      if (risk_alert_detail.records && risk_alert_detail.records.length > 0) {
-        dashboardData.value.alertData.details = risk_alert_detail.records
-      }
+    getTableList('risk_alert_detail', query, false, { signal: abortController.signal }).then(risk_alert_detail => {
+      // if (risk_alert_detail.records && risk_alert_detail.records.length > 0) {
+      dashboardData.value.alertData.details = risk_alert_detail.records || []
+      // }
     }).catch(error => {
       console.error('获取风险预警详情数据失败:', error)
     })
@@ -378,8 +434,8 @@ const loadDashboardData = async (): Promise<void> => {
 
   try {
     // 获取超期工单数据
-    getTableList('timeout_work_order', query).then(timeout_work_order => {
-      if (timeout_work_order.records && timeout_work_order.records.length > 0) {
+    getTableList('timeout_work_order', query, false, { signal: abortController.signal }).then(timeout_work_order => {
+      if (timeout_work_order.records && timeout_work_order.records.length >= 0) {
         dashboardData.value.timeoutWorkOrders.total = timeout_work_order.records.length
         dashboardData.value.timeoutWorkOrders.details = timeout_work_order.records
       }
@@ -389,7 +445,7 @@ const loadDashboardData = async (): Promise<void> => {
   } catch (error) {
     console.error('获取超期工单数据失败:', error)
   }
-  handleRiskTabChange('危险作业')
+  handleRiskTabChange('安全类事项')
   handleHiddenDangerPannelData(query)
   console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
 }
@@ -416,25 +472,25 @@ const handleHiddenDangerPannelData = (query) => {
     pending: 0
   }
   try {
-    dashboardData.value.hiddenDangerData.general = 0
-    dashboardData.value.hiddenDangerData.major = 0
-    dashboardData.value.hiddenDangerData.progress.overdue = 0
-    dashboardData.value.hiddenDangerData.progress.processed = 0
-    dashboardData.value.hiddenDangerData.progress.processing = 0
     // 获取隐患排查治理数据
-    getTableList('risk_level_count', query).then(res => {
+    getTableList('risk_level_count', query, false, { signal: abortController.signal }).then(res => {
       if (res.records && res.records.length > 0) {
         _data.general = _data.general + Number(res.records[0].general_count)
         _data.major = _data.major + Number(res.records[0].major_count)
         // 获取隐患排查治理数据
-        getTableList('risk_status_count', query).then(res => {
+        getTableList('risk_status_count', query, false, { signal: abortController.signal }).then(res => {
           if (res.records && res.records.length > 0) {
-            _data.overdue = _data.overdue + Number(res.records[0].overdueCnt)
-            _data.processed = _data.processed + Number(res.records[0].processedCnt)
-            _data.processing = _data.processing + Number(res.records[0].processingCnt)
-            _data.pending = _data.pending
+            // 接口返回的已经是百分比，直接使用
+            const record = res.records[0]
+            _data.overdue = Number(record.overdueCnt) || 0
+            _data.processed = Number(record.processedCnt) || 0
+            _data.processing = Number(record.processingCnt) || 0
+            _data.pending = 0 // 接口没有返回pending，设为0
             _data.flag = true
 
+            console.log('risk_status_count 接口返回数据:', record)
+            console.log('处理后的 _data:', _data)
+
             if (_data2.flag) {
               // 合并数据
               console.log("请求系统和第三方成功，合并数据", _data, _data2);
@@ -443,30 +499,44 @@ const handleHiddenDangerPannelData = (query) => {
               dashboardData.value.hiddenDangerData.general = generalCnt
               dashboardData.value.hiddenDangerData.major = majorCnt
 
+              // 如果第三方数据也是百分比，需要合并；否则使用系统数据
+              // 这里假设系统数据是百分比，第三方数据可能是数量或百分比
+              let overdueCnt, processedCnt, processingCnt, pendingCnt
+              if (_data2.overdue > 1 || _data2.processed > 1 || _data2.processing > 1) {
+                // 第三方数据可能是百分比，直接使用系统数据（因为系统数据更准确）
+                overdueCnt = _data.overdue.toFixed(2)
+                processedCnt = _data.processed.toFixed(2)
+                processingCnt = _data.processing.toFixed(2)
+                pendingCnt = _data.pending.toFixed(2)
+              } else {
+                // 第三方数据可能是数量，需要计算百分比
                 let totalCnt = generalCnt + majorCnt
-              let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
-              let processedCnt = ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2)
-              let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
-              let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
+                overdueCnt = totalCnt > 0 ? ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2) : '0.00'
+                processedCnt = totalCnt > 0 ? ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2) : '0.00'
+                processingCnt = totalCnt > 0 ? ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2) : '0.00'
+                pendingCnt = totalCnt > 0 ? ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2) : '0.00'
+              }
+
               dashboardData.value.hiddenDangerData.progress = {
                 overdue: overdueCnt,
                 processed: processedCnt,
                 processing: processingCnt,
                 pending: pendingCnt,
               }
+              console.log('合并后的 progress:', dashboardData.value.hiddenDangerData.progress)
             } else {
               console.log("请求系统成功，展示数据", _data, _data2);
               dashboardData.value.hiddenDangerData.general = _data.general
               dashboardData.value.hiddenDangerData.major = _data.major
 
-              let totalCnt = _data.general + _data.major
-              // 显示系统数据
+              // 接口返回的已经是百分比，直接使用
               dashboardData.value.hiddenDangerData.progress = {
-                overdue: (_data.overdue / totalCnt * 100).toFixed(2),
-                processed: (_data.processed / totalCnt * 100).toFixed(2),
-                processing: (_data.processing / totalCnt * 100).toFixed(2),
-                pending: (_data.pending / totalCnt * 100).toFixed(2),
+                overdue: _data.overdue.toFixed(2),
+                processed: _data.processed.toFixed(2),
+                processing: _data.processing.toFixed(2),
+                pending: _data.pending.toFixed(2),
               }
+              console.log('系统数据 progress:', dashboardData.value.hiddenDangerData.progress)
             }
           }
         })
@@ -475,55 +545,64 @@ const handleHiddenDangerPannelData = (query) => {
 
 
     // 获取隐患排查治理数据
-    getTableList('hidden_danger_investigation', query).then(res => {
+    getTableList('hidden_danger_investigation', query, false, { signal: abortController.signal }).then(res => {
       if (res.records && res.records.length > 0) {
         _data2.general = Number(res.records[0].general)
         _data2.major = Number(res.records[0].major)
 
+        // 安全指数另算，再起一个报表
+        // dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
+        // 在这里添加获取安全指数的逻辑
+        getTableList('hidden_danger_safety_index', query, false, { signal: abortController.signal }).then(res => {
+          if (res.records && res.records.length > 0) {
             dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
+          }
+        }).catch(error => {
+          console.error('获取隐患排查治理数据失败:', error)
+        })
 
         // 获取隐患排查治理处理进度数据
-        getTableList('hidden_danger_process_progress', query).then(res => {
-          if (res.records && res.records.length > 0) {
-            _data2.flag = true
-            _data2.overdue = Number(res.records[0].overdue) / 100 * (_data2.general + _data2.major)
-            _data2.processed = Number(res.records[0].processed) / 100 * (_data2.general + _data2.major)
-            _data2.processing = Number(res.records[0].processing) / 100 * (_data2.general + _data2.major)
-            _data2.pending = Number(res.records[0].pending) / 100 * (_data2.general + _data2.major)
+        getTableList('hidden_danger_process_progress', query, false, { signal: abortController.signal }).then(res => {
+          // if (res.records && res.records.length > 0) {
+          //   _data2.flag = true
+          //   _data2.overdue = Number(res.records[0].overdue) / 100 * (_data2.general + _data2.major)
+          //   _data2.processed = Number(res.records[0].processed) / 100 * (_data2.general + _data2.major)
+          //   _data2.processing = Number(res.records[0].processing) / 100 * (_data2.general + _data2.major)
+          //   _data2.pending = Number(res.records[0].pending) / 100 * (_data2.general + _data2.major)
 
-            if (_data.flag) {
-              console.log("请求第三方和系统成功，合并数据", _data, _data2);
-              // 合并数据
-              let generalCnt = _data.general + _data2.general
-              let majorCnt = _data.major + _data2.major
-              dashboardData.value.hiddenDangerData.general = generalCnt
-              dashboardData.value.hiddenDangerData.major = majorCnt
+          //   if (_data.flag) {
+          //     console.log("请求第三方和系统成功，合并数据", _data, _data2);
+          //     // 合并数据
+          //     let generalCnt = _data.general + _data2.general
+          //     let majorCnt = _data.major + _data2.major
+          //     dashboardData.value.hiddenDangerData.general = generalCnt
+          //     dashboardData.value.hiddenDangerData.major = majorCnt
 
-              let totalCnt = generalCnt + majorCnt
-              let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
-              let processedCnt = ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2)
-              let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
-              let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
-              dashboardData.value.hiddenDangerData.progress = {
-                overdue: overdueCnt,
-                processed: processedCnt,
-                processing: processingCnt,
-                pending: pendingCnt,
-              }
-            } else {
-              //显示三方数据
-              console.log("请求第三方成功，展示数据", _data, _data2);
-              dashboardData.value.hiddenDangerData.general = _data2.general
-              dashboardData.value.hiddenDangerData.major = _data2.major
+          //     let totalCnt = generalCnt + majorCnt
+          //     let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
+          //     let processedCnt = ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2)
+          //     let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
+          //     let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
+          //     dashboardData.value.hiddenDangerData.progress = {
+          //       overdue: overdueCnt,
+          //       processed: processedCnt,
+          //       processing: processingCnt,
+          //       pending: pendingCnt,
+          //     }
+          //   } else {
+          //     //显示三方数据
+          //     console.log("请求第三方成功，展示数据", _data, _data2);
+          //     dashboardData.value.hiddenDangerData.general = _data2.general
+          //     dashboardData.value.hiddenDangerData.major = _data2.major
 
-              dashboardData.value.hiddenDangerData.progress = {
-                overdue: res.records[0].overdue,
-                processed: res.records[0].processed,
-                processing: res.records[0].processing,
-                pending: res.records[0].pending,
-              }
-            }
-          }
+          //     dashboardData.value.hiddenDangerData.progress = {
+          //       overdue: res.records[0].overdue,
+          //       processed: res.records[0].processed,
+          //       processing: res.records[0].processing,
+          //       pending: res.records[0].pending,
+          //     }
+          //   }
+          // }
         }).catch(error => {
           console.error('获取隐患排查治理处理进度数据失败:', error)
         })
@@ -537,7 +616,7 @@ const handleHiddenDangerPannelData = (query) => {
 
   try {
     // 获取隐患排查治理TOP3类型数据
-    getTableList('hidden_danger_top', query).then(res => {
+    getTableList('hidden_danger_top', query, false, { signal: abortController.signal }).then(res => {
       if (res.records && res.records.length > 0) {
         dashboardData.value.hiddenDangerData.top3Types = res.records
       }
@@ -552,96 +631,120 @@ const handleHiddenDangerPannelData = (query) => {
 // 处理风险统计tab切换
 const handleRiskTabChange = async (tab: TabType) => {
   console.log('Tab changed to:', tab)
+
   try {
-    let code = ''
+    let workOrderType = ''
     switch (tab) {
-      case '危险作业':
-        code = 'hazardous_operations'
+      case '安全类事项':
+        workOrderType = '安全生产'
         break
-      case '安全考核':
-        code = 'safety_assessment'
-        break
-      case '安全、保密培训':
-        code = 'security_training'
+      case '工程类事项':
+        workOrderType = '物业服务-工程'
         break
       default:
-        code = 'hazardous_operations'
+        workOrderType = '安全生产'
     }
-    if (code == 'hazardous_operations') {
-      // 根据不同的tab请求不同的接口
-      getTableList(
-        code,
-        { ...query, activeTab: tab }
-      ).then(response => {
-        // 更新风险统计数据 - 传递完整的数组数据用于饼图显示
-        if (response.records && response.records.length > 0) {
-          dangerDetail.value = response.records
+
+    // 同时获取维保任务和巡检任务的数据
+    const [maintenanceResponse, inspectionResponse] = await Promise.all([
+      getWorkOrderStatistics({
+        workOrderType,
+        taskType: '维保任务',
+        campus_id: query.campus_id
+      }, { signal: abortController.signal }).catch(error => {
+        console.error('获取维保任务数据失败:', error)
+        return {records: []}
+      }),
+      getWorkOrderStatistics({
+        workOrderType,
+        taskType: '巡检任务',
+        campus_id: query.campus_id
+      }, { signal: abortController.signal }).catch(error => {
+        console.error('获取巡检任务数据失败:', error)
+        return {records: []}
+      })
+    ])
+
+    // 处理接口返回的数据结构：可能是数组或对象
+    const getRecords = (response: any): any[] => {
+      if (Array.isArray(response)) {
+        return response
+      } else if (response && Array.isArray(response.records)) {
+        return response.records
+      } else if (response && response.data && Array.isArray(response.data)) {
+        return response.data
       }
-      }).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'
-          //   }
-          // ]
+      return []
+    }
+
+    const maintenanceRecords = getRecords(maintenanceResponse)
+    const inspectionRecords = getRecords(inspectionResponse)
+
+    console.log('维保任务数据:', maintenanceResponse, '提取的records:', maintenanceRecords)
+    console.log('巡检任务数据:', inspectionResponse, '提取的records:', inspectionRecords)
+
+    // 周期映射
+    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
         }
       })
-    } 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"
+
+      // 创建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
           }
-          ]
-        }
-      }).catch(error => {
-        console.error('获取风险统计数据失败:', error)
         })
+      })
+
+      return charts
     }
+
+    // 转换维保和巡检数据
+    const maintenanceCharts = convertToChartData(maintenanceRecords, '维保类')
+    const inspectionCharts = convertToChartData(inspectionRecords, '巡检类')
+
+    // 合并为6个图表：先维保（3个），后巡检（3个）
+    const allCharts = [...maintenanceCharts, ...inspectionCharts]
+
+    // 更新riskStatistics
+    riskStatistics.value[tab] = allCharts
+
+    console.log('更新后的riskStatistics:', riskStatistics.value)
+    console.log('当前tab的图表数据:', allCharts)
   } catch (error) {
     console.error('获取风险统计数据失败:', error)
   }
+
+  // 第一次加载完成后，隐藏骨架屏
+  if (isFirstLoading.value) {
+    isFirstLoading.value = false
+    console.log('隐藏骨架屏')
+  }
 }
 
 // 方法定义
@@ -654,11 +757,6 @@ const onRegionChange = (item: RegionItem): void => {
   })
 }
 
-// 打开区域选择器
-const openRegionSelector = (): void => {
-  regionSelectorVisible.value = true
-}
-
 // 更新时间
 const updateTime = (): void => {
   const now = new Date()
@@ -1219,12 +1317,10 @@ const timeOut1 = (): void => {
 
     .left-top {
       padding: 0 5px;
-      background-image:
-        url('@/assets/images/screen/left_top_img.png'),
+      background-image: url('@/assets/images/screen/left_top_img.png'),
       url('@/assets/images/screen/left_center_img.png'),
       url('@/assets/images/screen/left_bottom_img.png');
-      background-position:
-        top center,
+      background-position: top center,
       left center,
       bottom center;
 
@@ -1232,8 +1328,7 @@ const timeOut1 = (): void => {
       background-repeat: no-repeat, no-repeat, no-repeat;
 
       /* 设置位置 */
-      background-size:
-        100% 90px,
+      background-size: 100% 90px,
       cover,
       100% 68px;
       flex: 1;
@@ -1396,12 +1491,10 @@ const timeOut1 = (): void => {
     }
 
     .left-bottom {
-      background-image:
-        url('@/assets/images/screen/left_top_2_img.png'),
+      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,
+      background-position: top center,
       left center,
       bottom center;
 
@@ -1409,8 +1502,7 @@ const timeOut1 = (): void => {
       background-repeat: no-repeat, no-repeat, no-repeat;
 
       /* 设置位置 */
-      background-size:
-        100% 90px,
+      background-size: 100% 90px,
       cover,
       100% 68px;
       flex: 1;
@@ -1462,8 +1554,6 @@ const timeOut1 = (): void => {
     row-gap: 1rem;
 
 
-
-
   }
 
   .center-container {

src/views/screen/report/index.ts

@@ -73,24 +73,24 @@ export const exportExcelData = (reportCode, data?) => {
 }
 
 //获取报表数据
-export const getTableList = (reportCode, data?, isOpen?) => {
-  return request.post({ url: `/jeelowcode/${isOpen ? 'open/report' : 'report-data'}/list/${reportCode}`, data })
+export const getTableList = (reportCode, data?, isOpen?, options = {}) => {
+  return request.post({ url: `/jeelowcode/${isOpen ? 'open/report' : 'report-data'}/list/${reportCode}`, data, ...options })
 }
 
-export const getDangerDetail = (campus_id: string) => {
-  return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_detail', data: {campus_id} })
+export const getDangerDetail = (campus_id: string, options = {}) => {
+  return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_detail', data: {campus_id}, ...options })
 }
 
 export const getZBDangerSum = (campus_id: string) => {
   return request.post({ url: '/jeelowcode/report-data/list/dp_zb_danger_sum', data: {campus_id} })
 }
 
-export const getDangerCount = (campus_id: string) => {
-  return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_sum', data: {campus_id} })
+export const getDangerCount = (campus_id: string, options = {}) => {
+  return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_sum', data: {campus_id}, ...options })
 }
 
-export const getExamDetail = (campus_id: string) => {
-  return request.post({ url: '/jeelowcode/report-data/list/dp_yq_exam_detail', data: {campus_id} })
+export const getExamDetail = (campus_id: string, options = {}) => {
+  return request.post({ url: '/jeelowcode/report-data/list/dp_yq_exam_detail', data: {campus_id}, ...options })
 }
 
 export const getExamSum = (campus_id: string) => {
@@ -101,13 +101,13 @@ export const getDrillSum = (campus_id: string) => {
     return request.post({ url: '/jeelowcode/report-data/list/dp_zb_drill_sum', data: {campus_id} })
 }
 
-export const getDrillDetail = (campus_id: string) => {
-    return request.post({ url: '/jeelowcode/report-data/list/dp_yq_drill_detail', data: {campus_id} })
+export const getDrillDetail = (campus_id: string, options = {}) => {
+    return request.post({ url: '/jeelowcode/report-data/list/dp_yq_drill_detail', data: {campus_id}, ...options })
 }
 
 //获取报表数据
-export const getTableData = (tableId, data?) => {
-  return request.post({ url: `/jeelowcode/dbform-data/list/${tableId}`, data })
+export const getTableData = (tableId, data?, options = {}) => {
+  return request.post({ url: `/jeelowcode/dbform-data/list/${tableId}`, data, ...options })
 }
 
 /**
@@ -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 = (data: {workOrderType: string, taskType: string, campus_id?: string}, options = {}) => {
+  return request.post({ url: '/jeelowcode/report-data/list/report_work_order_statistics', data: {...data, pageNo: 1, pageSize: 10}, ...options })
+}
+
 

vite.config.ts

@@ -32,7 +32,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       // 本地跨域代理. 目前注释的原因：暂时没有用途，server 端已经支持跨域
       proxy: {
         ['/admin-api']: {
-          target: env.VITE_BASE_URL,
+          target: 'http://carson.wang:48080',
           ws: false,
           changeOrigin: true,
           rewrite: (path) => path.replace(new RegExp(`^/admin-api`), ''),