fix(config): 调整接口请求超时时间

- 将请求超时时间从300000毫秒调整为24小时
- 确保长时间运行的请求不会因超时被中断

src/api/bpm/processInstance/index.ts

@@ -27,16 +27,16 @@ export type ProcessInstanceCCVO = {
   processInstanceName: string,
   processInstanceKey: string,
   startUserId: string,
-  options:string [],
+  options: string [],
   reason: string
 }
 
 export const getMyProcessInstancePage = async (params) => {
-  return await request.get({ url: '/bpm/process-instance/my-page', params })
+  return await request.get({url: '/bpm/process-instance/my-page', params})
 }
 
 export const createProcessInstance = async (data) => {
-  return await request.post({ url: '/bpm/process-instance/create', data: data })
+  return await request.post({url: '/bpm/process-instance/create', data: data})
 }
 
 export const cancelProcessInstance = async (id: number, reason: string) => {
@@ -44,11 +44,11 @@ export const cancelProcessInstance = async (id: number, reason: string) => {
     id: id,
     reason: reason
   }
-  return await request.delete({ url: '/bpm/process-instance/cancel', data: data })
+  return await request.delete({url: '/bpm/process-instance/cancel', data: data})
 }
 
 export const getProcessInstance = async (id: number) => {
-  return await request.get({ url: '/bpm/process-instance/get?id=' + id })
+  return await request.get({url: '/bpm/process-instance/get?id=' + id})
 }
 
 /**
@@ -57,7 +57,7 @@ export const getProcessInstance = async (id: number) => {
  * @returns 是否抄送成功
  */
 export const createProcessInstanceCC = async (data) => {
-  return await request.post({ url: '/bpm/process-instance/cc/create', data: data })
+  return await request.post({url: '/bpm/process-instance/cc/create', data: data})
 }
 
 /**
@@ -66,5 +66,9 @@ export const createProcessInstanceCC = async (data) => {
  * @returns
  */
 export const getProcessInstanceCCPage = async (params) => {
-  return await request.get({ url: '/bpm/process-instance/cc/my-page', 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/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

@@ -2,10 +2,10 @@
   <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="taskAssignRule.taskDefinitionName+'候选人'"
+        <el-divider content-position="left">审批节点：{{ taskAssignRule?.taskDefinitionName }}</el-divider>
+        <el-form-item :label="'候选人'"
                       :prop="taskAssignRule.taskDefinitionKey"
-                      label-width="200">
+                      label-width="122">
           <UserSelect
             v-model="formData[taskAssignRule.taskDefinitionKey]"
             :column="userSelectColumn"
@@ -103,3 +103,5 @@ onMounted(() => {
 })
 
 </script>
+
+

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

@@ -402,9 +402,9 @@ const dictSelectScope = {
             "type": "dicTableSelect",
             "controlType": "select",
             "label": "表格选择框",
-            "fixedSearch":{
-              "approveStatusName":"已审批"
-            },
+            // "fixedSearch":{
+            //   "approveStatusName":"已审批"
+            // },
             "separator": " | ",
             "multiple": true,
             "display": true,
@@ -447,9 +447,9 @@ const distSelectColumn = {
         "display": true,
         "span": 12,
         "disabled": false,
-        "fixedSearch":{
-              "approveStatusName":"已审批"
-            },
+        // "fixedSearch":{
+        //       "approveStatusName":"已审批"
+        //     },
         "required": false,
         "hideLabel": false,
         "i18nCode": "fields_7897245",

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' }, { label: '外协单位', value: 'out' }],
+  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/config/axios/config.ts

@@ -16,7 +16,7 @@ const config: {
   /**
    * 接口请求超时时间
    */
-  request_timeout: 30000,
+  request_timeout: 24 * 60 * 60 * 1000,
 
   /**
    * 默认接口请求类型
@@ -30,4 +30,4 @@ const specificApiTimeoutObj = {
   '/infra/file/jeelowcode/upload': 120000,//上传文件接口
 }
 
-export { config, specificApiTimeoutObj }
+export {config, specificApiTimeoutObj}

src/config/axios/service.ts

@@ -6,17 +6,17 @@ import axios, {
   InternalAxiosRequestConfig
 } from 'axios'
 
-import { ElMessage, ElMessageBox, ElNotification, ElButton } from 'element-plus'
+import {ElMessage, ElMessageBox, ElNotification, ElButton} from 'element-plus'
 import qs from 'qs'
-import { config, specificApiTimeoutObj } from '@/config/axios/config'
-import { getAccessToken, getRefreshToken, getTenantId, removeToken, setToken } from '@/utils/auth'
+import {config, specificApiTimeoutObj} from '@/config/axios/config'
+import {getAccessToken, getRefreshToken, getTenantId, removeToken, setToken} from '@/utils/auth'
 import errorCode from './errorCode'
 
-import { resetRouter } from '@/router'
-import { useCache } from '@/hooks/web/useCache'
+import {resetRouter} from '@/router'
+import {useCache} from '@/hooks/web/useCache'
 
 const tenantEnable = import.meta.env.VITE_APP_TENANT_ENABLE
-const { result_code, base_url, request_timeout } = config
+const {result_code, base_url, request_timeout} = config
 
 // 需要忽略的提示。忽略后，自动 Promise.reject('error')
 const ignoreMsgs = [
@@ -24,7 +24,7 @@ const ignoreMsgs = [
   '刷新令牌已过期' // 使用刷新令牌，刷新获取新的访问令牌时，结果因为过期失败，此时需要忽略。否则，会导致继续 401，无法跳转到登出界面
 ]
 // 是否显示重新登录
-export const isRelogin = { show: false }
+export const isRelogin = {show: false}
 // Axios 无感知刷新令牌，参考 https://www.dashingdog.cn/article/11 与 https://segmentfault.com/a/1190000020210980 实现
 // 请求队列
 let requestList: any[] = []
@@ -51,7 +51,7 @@ service.interceptors.request.use(
       }
     })
     if (getAccessToken() && !isToken) {
-      ; (config as Recordable).headers.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token
+      ;(config as Recordable).headers.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token
     }
     // 设置租户
     if (tenantEnable && tenantEnable === 'true') {
@@ -74,7 +74,7 @@ service.interceptors.request.use(
     // get参数编码
     if (config.method?.toUpperCase() === 'GET' && params) {
       config.params = {}
-      const paramsStr = qs.stringify(params, { allowDots: true })
+      const paramsStr = qs.stringify(params, {allowDots: true})
       if (paramsStr) {
         config.url = config.url + '?' + paramsStr
       }
@@ -91,13 +91,13 @@ service.interceptors.request.use(
 // response 拦截器
 service.interceptors.response.use(
   async (response: AxiosResponse<any>) => {
-    let { data } = response
+    let {data} = response
     const config = response.config
     if (!data) {
       // 返回“[HTTP]请求没有返回值”;
       throw new Error()
     }
-    const { t } = useI18n()
+    const {t} = useI18n()
     // 未设置状态码则默认成功状态
     // 二进制数据则直接返回，例如说 Excel 导出
     if (
@@ -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,
@@ -174,10 +176,10 @@ service.interceptors.response.use(
         title: msg,
         dangerouslyUseHTMLString: true,
         message: h(ElButton, {
-          link: true,
-          type: 'primary',
-          onClick: () => handleMoreError(msg, data.data)
-        },
+            link: true,
+            type: 'primary',
+            onClick: () => handleMoreError(msg, data.data)
+          },
           '点击查看具体原因'
         )
       })
@@ -186,7 +188,7 @@ service.interceptors.response.use(
         // hard coding：忽略这个提示，直接登出
         console.log(msg)
       } else {
-        ElNotification.error({ title: msg })
+        ElNotification.error({title: msg})
       }
       return Promise.reject('error')
     } else {
@@ -195,8 +197,8 @@ service.interceptors.response.use(
   },
   (error: AxiosError) => {
     console.log('err' + error) // for debug
-    let { message } = error
-    const { t } = useI18n()
+    let {message} = error
+    const {t} = useI18n()
     if (message === 'Network Error') {
       message = t('sys.api.errorMessage')
     } else if (message.includes('timeout')) {
@@ -214,7 +216,7 @@ const refreshToken = async () => {
   return await axios.post('/system/auth/refresh-token?refreshToken=' + getRefreshToken())
 }
 const handleAuthorized = () => {
-  const { t } = useI18n()
+  const {t} = useI18n()
   if (!isRelogin.show) {
     // 如果已经到重新登录页面则不进行弹窗提示
     if (window.location.href.includes('login?redirect=')) {
@@ -228,7 +230,7 @@ const handleAuthorized = () => {
       confirmButtonText: t('login.relogin'),
       type: 'warning'
     }).then(() => {
-      const { wsCache } = useCache()
+      const {wsCache} = useCache()
       resetRouter() // 重置静态路由表
       wsCache.clear()
       removeToken()
@@ -242,7 +244,7 @@ const handleAuthorized = () => {
 const handleMoreError = (title, message) => {
   ElMessageBox.alert(`<div style="white-space: break-spaces;">${message}</div>`, title, {
     dangerouslyUseHTMLString: true,
-    customStyle: { maxWidth: '40%' }
+    customStyle: {maxWidth: '40%'}
   })
 }
-export { service }
+export {service}

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/views/Login/components/LoginForm.vue

@@ -1,56 +1,31 @@
 <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>
-          <LoginFormTitle style="width: 100%"/>
+          <LoginFormTitle style="width: 100%" />
         </el-form-item>
       </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,26 +41,21 @@
       </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">
                 <el-text type="primary">
                   <span class="text-14px">{{ t('login.otherLogin') }}</span>
-                  <Icon :size="16" icon="iconamoon:arrow-down-2-light"/>
+                  <Icon :size="16" icon="iconamoon:arrow-down-2-light" />
                 </el-text>
               </div>
               <template #dropdown>
                 <el-dropdown-menu>
                   <template v-for="item in easyDropdownList" :key="item.label">
                     <el-dropdown-item :command="item">
-                      <Icon :size="16" :icon="item.icon"/>
+                      <Icon :size="16" :icon="item.icon" />
                       <span>{{ item.label }}</span>
                     </el-dropdown-item>
                   </template>
@@ -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>
@@ -123,19 +88,12 @@
             </el-row>
           </el-form-item> -->
         </el-col>
-       <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>
+        <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>
         <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>
@@ -144,18 +102,18 @@
   </el-form>
 </template>
 <script lang="ts" setup>
-import {ElLoading} from 'element-plus'
+import { ElLoading } from 'element-plus'
 import LoginFormTitle from './LoginFormTitle.vue'
-import type {RouteLocationNormalizedLoaded} from 'vue-router'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
 
-import {useIcon} from '@/hooks/web/useIcon'
+import { useIcon } from '@/hooks/web/useIcon'
 
 import * as authUtil from '@/utils/auth'
-import {usePermissionStore} from '@/store/modules/permission'
+import { usePermissionStore } from '@/store/modules/permission'
 import * as LoginApi from '@/api/login'
-import {LoginStateEnum, useFormValid, useLoginState} from './useLogin'
+import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
 
-defineOptions({name: 'LoginForm'})
+defineOptions({ name: 'LoginForm' })
 
 interface Props {
   loginType?: 'easy'
@@ -163,15 +121,15 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const {t} = useI18n()
+const { t } = useI18n()
 const message = useMessage()
-const iconHouse = useIcon({icon: 'ep:house'})
-const iconAvatar = useIcon({icon: 'ep:avatar'})
-const iconLock = useIcon({icon: 'ep:lock'})
+const iconHouse = useIcon({ icon: 'ep:house' })
+const iconAvatar = useIcon({ icon: 'ep:avatar' })
+const iconLock = useIcon({ icon: 'ep:lock' })
 const formLogin = ref()
-const {validForm} = useFormValid(formLogin)
-const {setLoginState, getLoginState} = useLoginState()
-const {currentRoute, push} = useRouter()
+const { validForm } = useFormValid(formLogin)
+const { setLoginState, getLoginState } = useLoginState()
+const { currentRoute, push } = useRouter()
 const permissionStore = usePermissionStore()
 const redirect = ref<string>('')
 const loginLoading = ref(false)
@@ -203,7 +161,7 @@ const socialList = [
   // { icon: 'ant-design:dingtalk-circle-filled', type: 20 },
   // { icon: 'ant-design:github-filled', type: 0 },
   // { icon: 'ant-design:alipay-circle-filled', type: 0 },
-  {icon: 'bx:planet', type: 100},
+  { icon: 'bx:planet', type: 100 },
 ]
 
 const easyDropdownList = [
@@ -219,15 +177,15 @@ const easyDropdownList = [
     type: LoginStateEnum.QR_CODE,
     code: 'page'
   },
-  {label: t('login.btnWechat'), icon: 'ant-design:wechat-filled', type: 30, code: 'url'},
+  { label: t('login.btnWechat'), icon: 'ant-design:wechat-filled', type: 30, code: 'url' },
   {
     label: t('login.btnDingtalk'),
     icon: 'ant-design:dingtalk-circle-filled',
     type: 20,
     code: 'url'
   },
-  {label: t('login.btnGitHub'), icon: 'ant-design:github-filled', type: 0, code: 'url'},
-  {label: t('login.btnAlipay'), icon: 'ant-design:alipay-circle-filled', type: 0, code: 'url'}
+  { label: t('login.btnGitHub'), icon: 'ant-design:github-filled', type: 0, code: 'url' },
+  { label: t('login.btnAlipay'), icon: 'ant-design:alipay-circle-filled', type: 0, code: 'url' }
 ]
 
 const easyCommand = (row) => {
@@ -308,9 +266,14 @@ const handleLogin = async (params) => {
     if (redirect.value.indexOf('sso') !== -1) {
       window.location.href = window.location.href.replace('/login?redirect=', '')
     } else {
-      push({path: redirect.value || permissionStore.addRouters[0].path})
+      push({ path: redirect.value || permissionStore.addRouters[0].path })
     }
-  } finally {
+  }
+  catch (e) {
+    loginLoading.value = false
+    loading.value?.close()
+  }
+  finally {
     loginLoading.value = false
     loading.value?.close()
   }
@@ -327,7 +290,7 @@ const doSocialLogin = async (type: number) => {
       await getTenantId()
       // 如果获取不到，则需要弹出提示，进行处理
       if (!authUtil.getTenantId()) {
-        await message.prompt('请输入租户名称', t('common.reminder')).then(async ({value}) => {
+        await message.prompt('请输入租户名称', t('common.reminder')).then(async ({ value }) => {
           const res = await LoginApi.getTenantIdByName(value)
           authUtil.setTenantId(res)
         })
@@ -356,7 +319,7 @@ watch(
   }
 )
 onMounted(() => {
-  if(redirect.value && import.meta.env.VITE_DEFAULT_SSO =='true'){
+  if (redirect.value && import.meta.env.VITE_DEFAULT_SSO == 'true') {
     //默认
     doSocialLogin(100)
   }

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

@@ -34,29 +34,29 @@
         </el-form>
         <div style="margin-bottom: 20px; margin-left: 10%; font-size: 14px">
           <el-button type="success" @click="handleAudit(item, true)">
-            <Icon icon="ep:select" />
+            <Icon icon="ep:select"/>
             通过
           </el-button>
           <el-button type="danger" @click="handleAudit(item, false)">
-            <Icon icon="ep:close" />
+            <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 type="primary" @click="handleSign(item)">
+           <Icon icon="ep:plus" />
+           加签
+         </el-button> -->
+
           <el-button type="warning" @click="handleBack(item)">
-            <Icon icon="ep:back" />
+            <Icon icon="ep:back"/>
             回退
           </el-button>
         </div>
@@ -64,28 +64,28 @@
     </el-card>
 
     <div id="Printer">
-    <!-- 申请信息 -->
-    <el-card v-loading="processInstanceLoading" class="box-card" 
+      <!-- 申请信息 -->
+      <el-card v-loading="processInstanceLoading" class="box-card"
       >
-      <template #header>
-        <span class="el-icon-document">申请信息【{{ processInstance.name  }}】</span>
-         <el-button type="success" @click="printPage()">
-            <Icon icon="ep:printer" />
+        <template #header>
+          <span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
+          <el-button type="success" @click="printPage()">
+            <Icon icon="ep:printer"/>
             打印表单
           </el-button>
-      </template>
-      <!-- 情况一：流程表单 -->
-      <el-col v-if="processInstance?.processDefinition?.formType === 10" :span="24">
-        <FormView form-type="view" show-type="view" v-bind="detailForm"></FormView>
-      </el-col>
-      <!-- 情况二：业务表单 -->
-      <div v-if="processInstance?.processDefinition?.formType === 20">
-        <BusinessFormComponent :id="processInstance.businessKey" />
-      </div>
-    </el-card>
+        </template>
+        <!-- 情况一：流程表单 -->
+        <el-col v-if="processInstance?.processDefinition?.formType === 10" :span="24">
+          <FormView form-type="view" show-type="view" v-bind="detailForm"></FormView>
+        </el-col>
+        <!-- 情况二：业务表单 -->
+        <div v-if="processInstance?.processDefinition?.formType === 20">
+          <BusinessFormComponent :id="processInstance.businessKey"/>
+        </div>
+      </el-card>
 
-    <!-- 审批记录 -->
-    <ProcessInstanceTaskList :loading="tasksLoad" :tasks="tasks" />
+      <!-- 审批记录 -->
+      <ProcessInstanceTaskList :loading="tasksLoad" :tasks="tasks"/>
     </div>
     <!-- 高亮流程图 -->
     <ProcessInstanceBpmnViewer
@@ -97,17 +97,18 @@
     />
 
     <!-- 弹窗：转派审批人 -->
-    <TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail" />
+    <TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail"/>
     <!-- 弹窗，回退节点 -->
-    <TaskReturnDialog ref="taskReturnDialogRef" @success="getDetail" />
+    <TaskReturnDialog ref="taskReturnDialogRef" @success="getDetail"/>
     <!-- 委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
-    <TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
+    <TaskDelegateForm ref="taskDelegateForm" @success="getDetail"/>
     <!-- 加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
-    <TaskAddSignDialogForm ref="taskAddSignDialogForm" @success="getDetail" />
+    <TaskAddSignDialogForm ref="taskAddSignDialogForm" @success="getDetail"/>
+    <TaskCCDialogForm ref="taskCCDialogForm"/>
   </ContentWrap>
 </template>
 <script lang="ts" setup>
-import { useUserStore } from '@/store/modules/user'
+import {useUserStore} from '@/store/modules/user'
 import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as TaskApi from '@/api/bpm/task'
@@ -117,19 +118,21 @@ import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
 import TaskReturnDialog from './TaskReturnDialogForm.vue'
 import TaskDelegateForm from './TaskDelegateForm.vue'
 import TaskAddSignDialogForm from './TaskAddSignDialogForm.vue'
-import { registerComponent } from '@/utils/routerHelper'
-import { isEmpty } from '@/utils/is'
+import {registerComponent} from '@/utils/routerHelper'
+import {isEmpty} from '@/utils/is'
 import router from '@/router/index'
-import { $Print } from '@smallwei/avue'
+import {$Print} from '@smallwei/avue'
+import TaskCCDialogForm from '../../processInstance/detail/TaskCCDialogForm.vue'
 
-defineOptions({ name: 'BpmProcessInstanceDetail' })
+defineOptions({name: 'BpmProcessInstanceDetail'})
 
-const { query } = useRoute() // 查询参数
+const {query} = useRoute() // 查询参数
 const message = useMessage() // 消息弹窗
-const { proxy } = getCurrentInstance() as any
+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
@@ -139,7 +142,7 @@ const tasks = ref<any[]>([]) // 任务列表
 const runningTasks = ref<any[]>([]) // 运行中的任务
 const auditForms = ref<any[]>([]) // 审批任务的表单
 const auditRule = reactive({
-  reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
+  reason: [{required: true, message: '审批建议不能为空', trigger: 'blur'}]
 })
 // ========== 申请信息 ==========
 const detailForm = ref({
@@ -175,13 +178,19 @@ 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', 
-                                  query: { id: String(id), isPrint: '1'  }
-                                })
+  const {href} = router.resolve({
+    name: 'BpmProcessInstanceInfo',
+    query: {id: String(id), isPrint: '1'}
+  })
   window.open(href, '_blank', 'noopener,noreferrer')
 }
 
@@ -210,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. 获得流程实例相关
@@ -236,7 +254,7 @@ const getProcessInstance = async () => {
       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 }
+        data.formVariables = {...data.formVariables, ...data.formVariables.jeelowcode_subtable_data}
         delete data.formVariables.jeelowcode_subtable_data
       }
       detailForm.value.defaultData = data.formVariables
@@ -316,7 +334,7 @@ const loadRunningTask = (tasks) => {
       return
     }
     // 2.3 添加到处理任务
-    runningTasks.value.push({ ...task })
+    runningTasks.value.push({...task})
     auditForms.value.push({
       reason: ''
     })
@@ -324,10 +342,11 @@ const loadRunningTask = (tasks) => {
 }
 
 /** 初始化 */
-onMounted(async() => {
+onMounted(async () => {
+  await handleRead()
   await getDetail()
   await nextTick()
- if (query.isPrint === '1') {
+  if (query.isPrint === '1') {
     await new Promise(resolve => setTimeout(resolve, 2000))
     $Print('#Printer')
   }

src/views/bpm/processInstance/index.vue

@@ -38,7 +38,7 @@
         />
       </template>
       <template #menu-left>
-        <el-button type="primary" v-hasPermi="['bpm:process-instance:query']" @click="handleCreate">
+        <el-button type="primary" v-hasPermi="['bpm:process-instance:create']" @click="handleCreate">
           <Icon icon="ep:plus" class="mr-5px"/>
           发起流程
         </el-button>
@@ -48,7 +48,7 @@
         <el-button
           link
           type="primary"
-          v-hasPermi="['bpm:process-instance:cancel']"
+          v-hasPermi="['bpm:process-instance:query']"
           @click="handleDetail(row)"
         >
           详情
@@ -56,8 +56,8 @@
         <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)"
         >
           取消

src/views/lowdesign/tableDesign/index.vue

@@ -41,7 +41,7 @@
       >
         <template #menu-left="{ size }">
           <el-button type="primary" :size="size" @click="menuLeftHandle('aiCreated')">
-            <Icon :size="14" icon="jam:magic-f" />
+            <Icon :size="14" icon="jam:magic-f"/>
             <span class="ml-3px!">AI建表</span>
           </el-button>
           <el-button
@@ -51,12 +51,12 @@
             @click="menuLeftHandle('btn')"
             class="mr-10px"
           >
-            <Icon :size="14" icon="teenyicons:button-outline" />
+            <Icon :size="14" icon="teenyicons:button-outline"/>
             <span class="ml-3px!">自定义按钮</span>
           </el-button>
           <el-dropdown @command="menuLeftHandle" v-hasPermi="['jeelowcode:web']">
             <el-button type="primary" :size="size">
-              <Icon :size="14" icon="teenyicons:webpack-outline" />
+              <Icon :size="14" icon="teenyicons:webpack-outline"/>
               <span class="ml-3px!">前端增强</span>
             </el-button>
             <template #dropdown>
@@ -74,7 +74,7 @@
             @click="menuLeftHandle('sql')"
             v-hasPermi="['jeelowcode:sql']"
           >
-            <Icon :size="14" icon="devicon-plain:sqldeveloper" />
+            <Icon :size="14" icon="devicon-plain:sqldeveloper"/>
             <span class="ml-3px!">SQL增强</span>
           </el-button>
           <el-button
@@ -83,9 +83,20 @@
             @click="menuLeftHandle('java')"
             v-hasPermi="['jeelowcode:java']"
           >
-            <Icon :size="14" icon="hugeicons:java" />
+            <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">
@@ -107,7 +118,7 @@
               <div class="mt--2px cursor-pointer">
                 <el-text :size="size" type="primary">
                   更多
-                  <Icon :size="16" icon="iconamoon:arrow-down-2-light" />
+                  <Icon :size="16" icon="iconamoon:arrow-down-2-light"/>
                 </el-text>
               </div>
               <template #dropdown>
@@ -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>
@@ -300,7 +314,7 @@
         </template>
         <template #optionCondition="{ row }">
           <template v-for="item in row.optionCondition" :key="item.key">
-            <el-tag v-if="item.value !== 0" size="small"> {{ item.label }}{{ item.value }} </el-tag>
+            <el-tag v-if="item.value !== 0" size="small"> {{ item.label }}{{ item.value }}</el-tag>
           </template>
         </template>
       </avue-crud>
@@ -417,7 +431,8 @@
                 size="small"
                 type="primary"
                 @click="copySampleStr(key)"
-                >点击复制</el-button
+              >点击复制
+              </el-button
               >
             </div>
           </div>
@@ -462,32 +477,32 @@ import {
   DataOriginOption,
   AuthConfig
 } from './components'
-import { TipView } from '../general/components/index'
+import {TipView} from '../general/components/index'
 import * as TableApi from '@/api/design/table'
 import * as JsApi from '@/api/design/table/jsEnhance'
-import { dicObj, pageOption, tableInfoOption } from './designData'
-import { scssEnhanceExample, controlInitExample } from '@/components/LowDesign/src/utils/example'
-import { formattingLengStr } from '@/utils/lowDesign'
+import {dicObj, pageOption, tableInfoOption} from './designData'
+import {scssEnhanceExample, controlInitExample} from '@/components/LowDesign/src/utils/example'
+import {formattingLengStr} from '@/utils/lowDesign'
 import controlPath from '@/components/LowDesign/src/controlPath'
 import useMEDialog from '@/hooks/design/useMEDialog'
 import useCopyText from '@/hooks/design/useCopyText'
-import { ElButton, ElLoading } from 'element-plus'
-import { cloneDeep } from 'lodash-es'
-import { useRenderVxeColumn } from '../general/components/useRenderVxeColumn'
-import { useGroup } from '@/hooks/design/useGroup'
-import { checkPermi } from '@/utils/permission'
-import { ElMessage } from 'element-plus'
+import {ElButton, ElLoading} from 'element-plus'
+import {cloneDeep} from 'lodash-es'
+import {useRenderVxeColumn} from '../general/components/useRenderVxeColumn'
+import {useGroup} from '@/hooks/design/useGroup'
+import {checkPermi} from '@/utils/permission'
+import {ElMessage} from 'element-plus'
 
-defineOptions({ name: 'TableDesign' })
+defineOptions({name: 'TableDesign'})
 
-const { MEDialog, MEData, openMEDialog } = useMEDialog()
-const { copyText } = useCopyText()
+const {MEDialog, MEData, openMEDialog} = useMEDialog()
+const {copyText} = useCopyText()
 useRenderVxeColumn()
 
 const message = useMessage() // 消息弹窗
 const router = useRouter() // 路由
-const { t } = useI18n() // 国际化
-const { getCurrPermi } = useCrudPermi()
+const {t} = useI18n() // 国际化
+const {getCurrPermi} = useCrudPermi()
 
 const loading = ref(true) // 列表的加载中
 const saveLoading = ref(false)
@@ -555,7 +570,7 @@ const authPopup = ref({
   show: false,
   vBind: {}
 })
-const aiCreatedObj = ref({ popup: false, loading: false, describe: '', timer: null as any })
+const aiCreatedObj = ref({popup: false, loading: false, describe: '', timer: null as any})
 
 const basicPopup = ref({
   show: false,
@@ -580,9 +595,9 @@ const samplePopup = ref(false)
 const permission = getCurrPermi(['jeelowcode:dbform'])
 
 const tableConfigList = [
-  { label: '表格选择', prop: 'tableSelect', valClass: 'w-75px!' },
-  { label: '搜索样式', prop: 'searchStyle', valClass: 'w-100px!' },
-  { label: '操作栏样式', prop: 'operateMenuStyle', labelWidth: '90px', valClass: 'w-100px!' },
+  {label: '表格选择', prop: 'tableSelect', valClass: 'w-75px!'},
+  {label: '搜索样式', prop: 'searchStyle', valClass: 'w-100px!'},
+  {label: '操作栏样式', prop: 'operateMenuStyle', labelWidth: '90px', valClass: 'w-100px!'},
   {
     label: '操作栏最大横排数',
     prop: 'maxMenuNum',
@@ -598,7 +613,7 @@ const tableConfigList = [
     showKey: 'tableType',
     showVal: 1,
     valClass: 'w-114px!',
-    changeFun: ({ value }) => {
+    changeFun: ({value}) => {
       let dicData = cloneDeep(dicObj.tableConfig)
       if (value == 'card') {
         dicData = dicData.filter(
@@ -632,8 +647,8 @@ const tableConfigList = [
     showVal: 'expand',
     valClass: 'w-90px!'
   },
-  { label: '树表样式', prop: 'treeStyle', showKey: 'tableType', showVal: 2 },
-  { label: '树表模式', prop: 'treeMode', showKey: 'tableType', showVal: 2 }
+  {label: '树表样式', prop: 'treeStyle', showKey: 'tableType', showVal: 2},
+  {label: '树表模式', prop: 'treeMode', showKey: 'tableType', showVal: 2}
 ]
 
 const menuMoreList = [
@@ -642,14 +657,14 @@ const menuMoreList = [
     type: 'sync',
     isShow: (row) => row.isDbSync == 'N' && checkPermi(['jeelowcode:dbform:sync'])
   },
-  { label: '功能测试', type: 'test' },
-  { label: '路由地址', type: 'address' },
-  { label: '接口地址', type: 'apiUrl' },
-  { label: '租户权限配置', type: 'auth' },
-  { label: '复制表', type: 'copy', isShow: () => checkPermi(['jeelowcode:dbform:create']) },
-  { label: 'js增强解锁', type: 'jsUnlock', isShow: () => checkPermi(['jeelowcode:web']) },
-  { label: 'scss增强解锁', type: 'scssUnlock', isShow: () => checkPermi(['jeelowcode:web']) },
-  { label: '删除', type: 'del', isShow: () => checkPermi(['jeelowcode:dbform:delete']) }
+  {label: '功能测试', type: 'test'},
+  {label: '路由地址', type: 'address'},
+  {label: '接口地址', type: 'apiUrl'},
+  {label: '租户权限配置', type: 'auth'},
+  {label: '复制表', type: 'copy', isShow: () => checkPermi(['jeelowcode:dbform:create'])},
+  {label: 'js增强解锁', type: 'jsUnlock', isShow: () => checkPermi(['jeelowcode:web'])},
+  {label: 'scss增强解锁', type: 'scssUnlock', isShow: () => checkPermi(['jeelowcode:web'])},
+  {label: '删除', type: 'del', isShow: () => checkPermi(['jeelowcode:dbform:delete'])}
 ]
 
 useCrudHeight(crudRef)
@@ -747,8 +762,8 @@ const tableFormVerify = (type) => {
     customFormRef.value.validate((bool, done, msg) => {
       done()
       if (!bool) return reject(msg)
-      const { tableName, tableType, tableClassify } = tableForm.value
-      const subTable = { bool: true, len: 0 }
+      const {tableName, tableType, tableClassify} = tableForm.value
+      const subTable = {bool: true, len: 0}
       if (tableClassify == 2 && tableName && tableName.indexOf('view_') != 0) {
         message.warning('视图表的表名请以 view_ 开头')
         return reject('message')
@@ -813,7 +828,7 @@ const tableFormVerify = (type) => {
 
         if (messageText) {
           handleVerifyError(tabKey, item._X_ROW_KEY, index)
-          ElMessage({ dangerouslyUseHTMLString: true, message: messageText })
+          ElMessage({dangerouslyUseHTMLString: true, message: messageText})
           errText = 'message'
           break
         }
@@ -846,7 +861,7 @@ const tableFormVerify = (type) => {
               : ''
           }
           if (key == 'summaryList') {
-            const { sqlType, sqlValue } = item.summaryJson
+            const {sqlType, sqlValue} = item.summaryJson
             itemObj.summaryType = 'bottom'
             itemObj.summarySql = sqlType == 'custom' ? sqlValue : sqlType
             itemObj.summaryJson = JSON.stringify(item.summaryJson)
@@ -938,7 +953,7 @@ const contrastEditData = (infoData) => {
 }
 
 const setApiDetailData = (data) => {
-  apiDetailData.value = { delIdVo: {} }
+  apiDetailData.value = {delIdVo: {}}
   for (const key in data) {
     let listKey = key
     if (['summaryBottomList', 'summaryTopList'].includes(listKey)) listKey = 'summaryList'
@@ -990,9 +1005,9 @@ const menuLeftHandle = (type) => {
     if (aiCreatedObj.value.timer) clearInterval(aiCreatedObj.value.timer)
   }
 }
-const menuHandle = async ({ type, row, index }) => {
+const menuHandle = async ({type, row, index}) => {
   if (type == 'edit') crudRef.value.rowEdit(row, index)
-  else if (type == 'test') router.push({ path: '/low/table/test/' + row.id })
+  else if (type == 'test') router.push({path: '/low/table/test/' + row.id})
   else if (type == 'sync') syncDbTable(row)
   else if (type == 'address') showAddress(row)
   else if (type == 'apiUrl') showApiUrl(row)
@@ -1002,7 +1017,7 @@ const menuHandle = async ({ type, row, index }) => {
   else if (type == 'auth') {
     authPopup.value = {
       show: true,
-      vBind: { dbformId: row.id, tableName: row.tableName, tableDescribe: row.tableDescribe }
+      vBind: {dbformId: row.id, tableName: row.tableName, tableDescribe: row.tableDescribe}
     }
   }
 }
@@ -1014,7 +1029,7 @@ const syncDbTable = (row) => {
     title: '同步数据库',
     width: '400px',
     isCenter: true,
-    dialogParams: { alignCenter: true },
+    dialogParams: {alignCenter: true},
     footerBtn: [
       {
         name: '取 消',
@@ -1023,7 +1038,7 @@ const syncDbTable = (row) => {
       {
         name: '确 定',
         loading: true,
-        params: { type: 'primary' },
+        params: {type: 'primary'},
         clickFun: async (done) => {
           if (syncData.value.value == 'force') {
             await message.prompt(
@@ -1086,7 +1101,7 @@ const showApiUrl = async (row) => {
       value: `/jeelowcode/${isOpen ? 'open' : 'dbform-data'}/save/batch/${row.id}`,
       tipText: '接口参数格式：data:[ { 新增的数据... },{ ... } ]'
     },
-    { label: '编辑数据[put]', value: `/jeelowcode/dbform-data/edit/${row.id}` },
+    {label: '编辑数据[put]', value: `/jeelowcode/dbform-data/edit/${row.id}`},
     {
       label: '批量编辑数据[put]',
       value: `/jeelowcode/dbform-data/edit/batch/${row.id}`,
@@ -1107,19 +1122,19 @@ const showApiUrl = async (row) => {
   let list: VNode[] = []
   apiList.forEach((item) => {
     list.push(
-      h('div', { style: { marginBottom: '10px', border: ' 1px solid #eee', padding: '10px' } }, [
+      h('div', {style: {marginBottom: '10px', border: ' 1px solid #eee', padding: '10px'}}, [
         h('div', [
-          h('span', { style: { fontWeight: 600, fontSize: '14px' } }, item.label + '：'),
+          h('span', {style: {fontWeight: 600, fontSize: '14px'}}, item.label + '：'),
           h(
             ElButton,
-            { size: 'small', type: 'primary', onClick: () => copyText(item.value) },
+            {size: 'small', type: 'primary', onClick: () => copyText(item.value)},
             () => '复制'
           )
         ]),
-        h('div', { style: { fontSize: '12px' } }, item.value),
+        h('div', {style: {fontSize: '12px'}}, item.value),
         h(
           'div',
-          { style: { display: !!item.tipText, fontSize: '12px', color: '#E6A23C' } },
+          {style: {display: !!item.tipText, fontSize: '12px', color: '#E6A23C'}},
           item.tipText
         )
       ])
@@ -1127,11 +1142,11 @@ const showApiUrl = async (row) => {
   })
   message.alert('', '接口地址', {
     message: () => {
-      return h('div', { width: '360px' }, list)
+      return h('div', {width: '360px'}, list)
     },
     confirmButtonText: '关闭',
     dangerouslyUseHTMLString: true,
-    customStyle: { width: '384px' }
+    customStyle: {width: '384px'}
   })
 }
 const copyDbTable = (row) => {
@@ -1146,7 +1161,7 @@ const copyDbTable = (row) => {
         if (!RExp.test(value)) return '表名只能使用小写字母、数字、下划线，并以字母开头'
       }
     })
-    .then(async ({ value }) => {
+    .then(async ({value}) => {
       loading.value = true
       const bool = await TableApi.verifyDbName(value)
       if (bool) {
@@ -1169,7 +1184,7 @@ const unlockEnhance = (type, row) => {
 
 const openWebEnhance = async (enhanceType) => {
   loading.value = true
-  jsEnhanceData.value = { jsJson: '' }
+  jsEnhanceData.value = {jsJson: ''}
   const dbformId = tableSelect.value[0].id
   const detailData = await JsApi.getJsDetail({
     dbformId,
@@ -1217,7 +1232,7 @@ const openWebEnhance = async (enhanceType) => {
     },
     footerBtn: [
       {
-        params: { type: 'primary' },
+        params: {type: 'primary'},
         name: '保 存',
         icon: 'mingcute:save-line',
         loading: true,
@@ -1228,7 +1243,7 @@ const openWebEnhance = async (enhanceType) => {
         }
       },
       {
-        params: { type: 'success' },
+        params: {type: 'success'},
         name: '保存并关闭',
         icon: 'mingcute:save-line',
         loading: true,
@@ -1257,11 +1272,11 @@ const openWebEnhance = async (enhanceType) => {
   }
   if (enhanceType == 'js') {
     params['providerType'] = 'tableJsEnhance'
-    params['otherParams'] = { type: 'simple', width: '300px', tipKeyList: ['TableJsEnhance'] }
+    params['otherParams'] = {type: 'simple', width: '300px', tipKeyList: ['TableJsEnhance']}
     params['language'] = 'javascript'
     params['headerBtn'] = [
       {
-        params: { type: 'success' },
+        params: {type: 'success'},
         name: '控件使用示例',
         icon: 'jam:code-sample',
         clickFun: async () => (samplePopup.value = true)
@@ -1279,7 +1294,7 @@ const openWebEnhance = async (enhanceType) => {
     }
   }
 
-  openMEDialog({ params, prop: 'jsJson' }, jsEnhanceData.value)
+  openMEDialog({params, prop: 'jsJson'}, jsEnhanceData.value)
   isUnload.value = true
 }
 const handleWebEnhance = (dbformId, enhanceType) => {
@@ -1301,16 +1316,16 @@ const handleWebEnhance = (dbformId, enhanceType) => {
   })
 }
 
-const cellStyle = ({ row, columnIndex }) => {
+const cellStyle = ({row, columnIndex}) => {
   if (columnIndex == 6) {
-    return { color: row.isDbSync == 'Y' ? '#67C23A' : '#F56C6C' }
+    return {color: row.isDbSync == 'Y' ? '#67C23A' : '#F56C6C'}
   }
   if (columnIndex == 5) {
     let color = ''
     if (row.tableClassify == 1) color = '#409EFF'
     else if (row.tableClassify == 2) color = '#909399'
     else if (row.tableClassify == 3) color = '#E6A23C'
-    return { color }
+    return {color}
   }
 }
 
@@ -1327,7 +1342,7 @@ const radioClick = (row) => {
 
 const setTreeLabelDicData = (dicData) => {
   if (dicData.length == 0) {
-    dicData = [{ label: '请先添加字段', value: 'low', disabled: true }]
+    dicData = [{label: '请先添加字段', value: 'low', disabled: true}]
   }
   customFormRef.value.updateDic('treeLabelField', dicData)
 }
@@ -1354,7 +1369,7 @@ const openDataOrigin = () => {
   })
   const filedData = [...tableInfoRef.value.infoData.basics, ...tableInfoRef.value.tableInfoDefault]
   dataOriginPopup.value.viewField = filedData.map((item) => {
-    return { label: item.fieldName, value: item.fieldCode }
+    return {label: item.fieldName, value: item.fieldCode}
   })
   dataOriginPopup.value.show = true
 }
@@ -1391,14 +1406,14 @@ const analysisDataOrigin = async () => {
           return item
         })
       }
-      let { infoData } = tableInfoOption.formattingInitData(analysisData)
+      let {infoData} = tableInfoOption.formattingInitData(analysisData)
       infoData = infoData.map((item) => {
         for (const key in item) {
           if (item[key] === null || item[key] === undefined || key == 'fieldList_id') {
             delete item[key]
           }
         }
-        return { ...cloneDeep(tableInfoOption.infoDefaultData.basics), ...item }
+        return {...cloneDeep(tableInfoOption.infoDefaultData.basics), ...item}
       })
       setInfoBasics(infoData)
       message.success('解析成功')
@@ -1422,11 +1437,11 @@ const getSqlFormConfig = async () => {
         (item) => !tableInfoOption.disabledArr.includes(item.fieldCode) || item.fieldCode == 'pid'
       )
       fieldList = fieldList.map((item) => {
-        return { ...cloneDeep(tableInfoOption.infoDefaultData.basics), ...item }
+        return {...cloneDeep(tableInfoOption.infoDefaultData.basics), ...item}
       })
       setInfoBasics(fieldList)
       message.success('生成成功')
-      let { tableName } = customFormOption.value.column
+      let {tableName} = customFormOption.value.column
       tableName['disabled'] = true
     })
     .finally(() => (sqlFormLoading.value = false))
@@ -1457,7 +1472,7 @@ const handleAiCreatedTable = async () => {
       (item) => !tableInfoOption.disabledArr.includes(item.fieldCode) || item.fieldCode == 'pid'
     )
     data.fieldModelList = data.fieldModelList.map((item) => {
-      return { ...cloneDeep(tableInfoOption.infoDefaultData.basics), ...item }
+      return {...cloneDeep(tableInfoOption.infoDefaultData.basics), ...item}
     })
     aiCreatedObj.value.popup = false
     crudRef.value.rowAdd()
@@ -1499,7 +1514,7 @@ const getTableData = async () => {
         if (typeof item[key] == 'number') {
           let val: number | string = item[key]
           if (['jsCou', 'scssCou'].includes(key)) val = val > 0 ? '√' : val
-          item.optionCondition.push({ label: couKey[key], value: val, key })
+          item.optionCondition.push({label: couKey[key], value: val, key})
         }
       }
       return item
@@ -1524,7 +1539,8 @@ const searchChange = (params, done) => {
 
 /** 清空按钮操作 */
 const resetChange = () => {
-  searchChange({}, () => {})
+  searchChange({}, () => {
+  })
 }
 
 const sizeChange = (pageSize) => {
@@ -1542,7 +1558,7 @@ const beforeOpen = async (done, type) => {
   isTableInfo.value = false
   const groupData = cloneDeep(treeData.value)
   customFormOption.value.column.groupDbformId.dicData = groupData[0].children
-  const { tableName, subTableListStr } = customFormOption.value.column
+  const {tableName, subTableListStr} = customFormOption.value.column
   if (['edit', 'view'].includes(type) && tableForm.value.id) {
     loading.value = true
     const data = await TableApi.getDbDetail(tableForm.value.id, ['all'])
@@ -1550,7 +1566,7 @@ const beforeOpen = async (done, type) => {
     data.dbForm.tableConfig = data.dbForm.tableConfig?.split(',') || []
     data.dbForm.dataConfig = data.dbForm.dataConfig?.split(',') || []
     editInfoData.value = data
-    tableForm.value = { ...data.dbForm }
+    tableForm.value = {...data.dbForm}
     tableName['disabled'] = true
     tableName['rules'] = []
     subTableListStr['display'] = tableForm.value.tableType == 3 && tableForm.value.subTableListStr
@@ -1585,7 +1601,7 @@ const beforeOpen = async (done, type) => {
       searchStyle: 'default'
     }
     tableName['disabled'] = false
-    tableName['rules'] = [{ validator: pageOption.tableName_required, trigger: 'blur' }] as any
+    tableName['rules'] = [{validator: pageOption.tableName_required, trigger: 'blur'}] as any
     subTableListStr['display'] = false
     if (groupValue.value) tableForm.value.groupDbformId = groupValue.value
     authValue.value = ''
@@ -1648,8 +1664,8 @@ const rowSave = async (formData, done, loading) => {
   const form = handleApiFormData(formData)
   tableFormVerify('add')
     .then(async (infoData: object) => {
-      const elLoading = ElLoading.service({ fullscreen: true })
-      let bool = await TableApi.saveDbData({ dbForm: { ...form }, ...infoData }).catch(() => false)
+      const elLoading = ElLoading.service({fullscreen: true})
+      let bool = await TableApi.saveDbData({dbForm: {...form}, ...infoData}).catch(() => false)
       if (bool) {
         message.success(t('common.createSuccess'))
         resetChange()
@@ -1662,7 +1678,7 @@ const rowSave = async (formData, done, loading) => {
         let key = Object.keys(error)[0]
         message.info(error[key][0].message)
       } else if (error !== 'message') {
-        message.alert(error, '请修改', { dangerouslyUseHTMLString: true })
+        message.alert(error, '请修改', {dangerouslyUseHTMLString: true})
       }
       loading()
     })
@@ -1680,7 +1696,7 @@ const rowUpdate = async (formData, index?, done?, loading?) => {
   const form = handleApiFormData(formData)
   tableFormVerify('edit')
     .then(async (infoData: object) => {
-      let bool = await TableApi.updateDbData({ dbForm: { ...form }, ...infoData }).catch(
+      let bool = await TableApi.updateDbData({dbForm: {...form}, ...infoData}).catch(
         () => false
       )
       if (bool) {
@@ -1702,7 +1718,7 @@ const rowUpdate = async (formData, index?, done?, loading?) => {
         let key = Object.keys(error)[0]
         message.info(error[key][0].message)
       } else if (error !== 'message') {
-        message.alert(error, '请修改', { dangerouslyUseHTMLString: true })
+        message.alert(error, '请修改', {dangerouslyUseHTMLString: true})
       }
       loading()
     })
@@ -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

@@ -75,13 +75,15 @@
               <img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
             </div>
             <div class="type-wrapper">
-               <div class="type-item">
+              <div class="type-item">
                 <span class="type-btn yellow">重大</span>
-                <span class="type-num">{{ mockData.hiddenDangerData.severityCount }}</span>
+                <span class="type-num cursor-pointer" @click="handleSeverityCountClick">{{
+                  mockData.hiddenDangerData.severityCount }}</span>
               </div>
               <div class="type-item">
                 <span class="type-btn green">一般</span>
-                <span class="type-num">{{ mockData.hiddenDangerData.generalCount }}</span>
+                <span class="type-num cursor-pointer" @click="handleGeneralCountClick">{{
+                  mockData.hiddenDangerData.generalCount }}</span>
               </div>
               <!-- <div class="type-item">
                 <span class="type-btn blue">较大</span>
@@ -96,7 +98,7 @@
                 <div class="legend-item"><span class="dot green"></span>已处理</div>
               </div>
               <div class="progress-legend">
-<!--                <div class="legend-item"><span class="dot yellow"></span>待排查</div>-->
+                <!--                <div class="legend-item"><span class="dot yellow"></span>待排查</div>-->
                 <div class="legend-item"><span class="dot blue"></span>处理中</div>
               </div>
             </div>
@@ -104,66 +106,69 @@
         </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="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  style="padding-top: 10px;display: flex; flex-direction: column; justify-content: start; height: 91%;">
-          <template v-if="activeTab === '高危作业'">
-          <div class="bottom-card">
-            <div class="bottom-card-title" style="margin-top: 0;">
-              <span>各园区统计</span>
-              <img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
-            </div>
-          </div>
-          <div class="row-wrapper">
-            <div class="row-item">
-              <img src="@/assets/images/screen/unfinished.png" width="20" />
-              <span class="row-item-title">未开始数量</span>
-              <span class="row-item-number">{{unfinishedCount}}</span>
-            </div>
-            <div class="row-item">
-              <img src="@/assets/images/screen/inProcess.png" width="20" />
-              <span class="row-item-title">进行中数量</span>
-              <span class="row-item-number">{{inProgressCount}}</span>
-            </div>
-            <div class="row-item">
-              <img src="@/assets/images/screen/finished.png" width="20" />
-              <span class="row-item-title">已完成数量</span>
-              <span class="row-item-number">{{finishedCount}}</span>
-            </div>
-          </div>
-          <div style="display: flex; width: 100%;">
-            <AlertList maxHeight="25vh" style="margin-left: 1vw;" :list-data="dangerList" />
-          </div>
-        </template>
-        <template v-if="activeTab === '安全培训考试'">
-          <div class="bottom-card" style="margin-top: 10px;">
-            <div class="bottom-card-title" style="margin-top: 0;">
-              <span>安全培训考试</span>
-              <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" />
-        </template>
-        <template v-if="activeTab === '应急预案及演练'">
-          <div class="bottom-card">
-            <div class="bottom-card-title" style="margin-top: 0;">
-              <span>应急预案及演练</span>
-              <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" />
-        </template>
-        </div>
+          <div style="padding-top: 10px;display: flex; flex-direction: column; justify-content: start; height: 91%;">
+            <template v-if="activeTab === '高危作业'">
+              <div class="bottom-card">
+                <div class="bottom-card-title" style="margin-top: 0;">
+                  <span>各园区统计</span>
+                  <img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
+                </div>
+              </div>
+              <div class="row-wrapper">
+                <div class="row-item">
+                  <img src="@/assets/images/screen/unfinished.png" width="20" />
+                  <span class="row-item-title">未开始数量</span>
+                  <span class="row-item-number">{{ unfinishedCount }}</span>
+                </div>
+                <div class="row-item">
+                  <img src="@/assets/images/screen/inProcess.png" width="20" />
+                  <span class="row-item-title">进行中数量</span>
+                  <span class="row-item-number">{{ inProgressCount }}</span>
+                </div>
+                <div class="row-item">
+                  <img src="@/assets/images/screen/finished.png" width="20" />
+                  <span class="row-item-title">已完成数量</span>
+                  <span class="row-item-number">{{ finishedCount }}</span>
+                </div>
+              </div>
+              <div style="display: flex; width: 100%;">
+                <AlertList maxHeight="25vh" style="margin-left: 1vw;" :list-data="dangerList" />
+              </div>
+            </template>
+<template v-if="activeTab === '安全培训考试'">
+              <div class="bottom-card" style="margin-top: 10px;">
+                <div class="bottom-card-title" style="margin-top: 0;">
+                  <span>安全培训考试</span>
+                  <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" />
+            </template>
+<template v-if="activeTab === '应急预案及演练'">
+              <div class="bottom-card">
+                <div class="bottom-card-title" style="margin-top: 0;">
+                  <span>应急预案及演练</span>
+                  <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" />
+            </template>
+</div> -->
+          <RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail" :park="parkValue"
+            @tab-change="handleRiskTabChange" :campus_id="query.campus_id" />
         </div>
       </div>
       <div class="right-wrapper">
@@ -192,11 +197,13 @@ class="tab" :class="{ active: activeTab === '安全培训考试' }"
               </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>
+                <span 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>
+                <span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.processing
+                }}</span>
               </div>
             </div>
           </div>
@@ -218,7 +225,8 @@ class="tab" :class="{ active: activeTab === '安全培训考试' }"
               <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>
+                <span style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ mockData.timeoutWorkOrders.total
+                }}</span>
               </div>
             </div>
           </div>
@@ -229,14 +237,12 @@ class="tab" :class="{ active: activeTab === '安全培训考试' }"
       </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>
@@ -249,7 +255,8 @@ import ParkCenter from './components/ParkCenter.vue'
 import PointInfoPopup from './components/PointInfoPopup.vue'
 import WeatherWarning from './components/WeatherWarning.vue'
 import AlertList from './components/AlertList.vue'
-import { getTableList, getTableData, getDangerDetail, getDangerCount, getExamDetail, getDrillDetail } from './report'
+import { getTableList, getTableData, getDangerDetail, getDangerCount, getExamDetail, getDrillDetail, getWorkOrderStatistics } from './report'
+import RiskStatisticsPanel from './components/RiskStatisticsPanel.vue'
 
 interface PointPosition {
   label: string
@@ -283,44 +290,148 @@ 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 tableTitle = [
-    {
-      name: '培训（考试）名称',
-      key: 'examname'
-    },
-    {
-      name: '参与人次',
-      key: 'exampeoplenum'
-    },
-    {
-      name: '培训时长（小时）',
-      key: 'examduration',
-    },
-    {
-      name: '考试通过率(%)',
-      key: 'exampassrate',
+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 trainingTableTitle = [
-    {
-      name: '演练名称',
-      key: 'drill_plan_name'
-    },
-    {
-      name: '完成时间',
-      key: 'drill_time'
-    },
-    {
-      name: '参与人数',
-      key: 'drill_count'
+    // 同时获取维保任务和巡检任务的数据
+    const [maintenanceResponse, inspectionResponse] = await Promise.all([
+      getWorkOrderStatistics({ workOrderType, taskType: '维保任务', campus_id: query.campus_id }).catch(error => {
+        console.error('获取维保任务数据失败:', error)
+        return { records: [] }
+      }),
+      getWorkOrderStatistics({ workOrderType, taskType: '巡检任务', campus_id: query.campus_id }).catch(error => {
+        console.error('获取巡检任务数据失败:', error)
+        return { records: [] }
+      })
+    ])
+
+    // 周期映射
+    const cycleMap: Record<string, string> = {
+      'day': '每日',
+      'month': '每月',
+      'year': '每年'
     }
-  ]
 
-  const examList = ref<any[]>([])
+    // 将API数据转换为图表数据格式
+    const convertToChartData = (records: any[], taskTypeName: string): any[] => {
+      const charts: any[] = []
 
-  const drillList = ref<any[]>([])
+      // 按周期分组
+      const cycleGroups: Record<string, any> = {}
+      records.forEach((record: any) => {
+        const cycle = record.cycle || 'day'
+        if (!cycleGroups[cycle]) {
+          cycleGroups[cycle] = record
+        }
+      })
+
+      // 创建6个图表（3个周期 x 2个任务类型，但这里只处理一种任务类型）
+      const cycles = ['day', 'month', 'year']
+      cycles.forEach((cycle) => {
+        const data = cycleGroups[cycle] || {}
+        const title = `${cycleMap[cycle]}检查(${taskTypeName})`
+
+        charts.push({
+          title,
+          total: Number(data.total) || 0,
+          status: {
+            notStarted: Number(data.pending) || 0,
+            inProgress: Number(data.processing) || 0,
+            done: Number(data.processed) || 0,
+            voided: Number(data.closed) || 0
+          }
+        })
+      })
+
+      return charts
+    }
+
+    // 转换维保和巡检数据
+    const maintenanceCharts = convertToChartData(maintenanceResponse.records || [], '维保类')
+    const inspectionCharts = convertToChartData(inspectionResponse.records || [], '巡检类')
+
+    // 合并为6个图表：先维保（3个），后巡检（3个）
+    const allCharts = [...maintenanceCharts, ...inspectionCharts]
+
+    // 更新riskStatistics
+    riskStatistics.value[tab] = allCharts
+
+    console.log('更新后的riskStatistics:', riskStatistics.value)
+  } catch (error) {
+    console.error('获取风险统计数据失败:', error)
+  }
+}
+
+const tableTitle = [
+  {
+    name: '培训（考试）名称',
+    key: 'examname'
+  },
+  {
+    name: '参与人次',
+    key: 'exampeoplenum'
+  },
+  {
+    name: '培训时长（小时）',
+    key: 'examduration',
+  },
+  {
+    name: '考试通过率(%)',
+    key: 'exampassrate',
+  }
+]
+
+const trainingTableTitle = [
+  {
+    name: '演练名称',
+    key: 'drill_plan_name'
+  },
+  {
+    name: '完成时间',
+    key: 'drill_time'
+  },
+  {
+    name: '参与人数',
+    key: 'drill_count'
+  }
+]
+
+const examList = ref<any[]>([])
+
+const drillList = ref<any[]>([])
 
 
 const query = reactive({
@@ -543,12 +654,14 @@ const initProgressChart = () => {
           labelLayout: function (params: any) {
             const isLeft = params.labelRect.x < width / 2;
             const points = params.labelLinePoints;
-            points[2][0] = isLeft
-              ? params.labelRect.x
-              : params.labelRect.x + params.labelRect.width;
-            return {
-              labelLinePoints: points
-            };
+            if (points && points.length && points[2]) {
+              points[2][0] = isLeft
+                ? params.labelRect.x
+                : params.labelRect.x + params.labelRect.width;
+              return {
+                labelLinePoints: points
+              };
+            }
           },
         }
       ]
@@ -577,6 +690,8 @@ onMounted(async () => {
     query.campus_id = route.query.parkCode as string
   }
 
+  handleRiskTabChange('安全类')
+
   try {
     let { records } = await getTableList(
       'park_info_list'
@@ -844,12 +959,14 @@ const handleHiddenDangerPannelData = (query) => {
         labelLayout: function (params: any) {
           const isLeft = params.labelRect.x < width / 2;
           const points = params.labelLinePoints;
-          points[2][0] = isLeft
-            ? params.labelRect.x
-            : params.labelRect.x + params.labelRect.width;
-          return {
-            labelLinePoints: points
-          };
+          if (points && points.length && points[2]) {
+            points[2][0] = isLeft
+              ? params.labelRect.x
+              : params.labelRect.x + params.labelRect.width;
+            return {
+              labelLinePoints: points
+            };
+          }
         },
       }
     ]
@@ -863,12 +980,17 @@ const handleHiddenDangerPannelData = (query) => {
         // 获取隐患排查治理数据
         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
+            // 接口返回的已经是百分比，直接使用
+            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);
@@ -877,18 +999,31 @@ const handleHiddenDangerPannelData = (query) => {
               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)
+              // 如果第三方数据也是百分比，需要合并；否则使用系统数据
+              // 这里假设系统数据是百分比，第三方数据可能是数量或百分比
+              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
+                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)
               }
@@ -897,17 +1032,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)
               }
@@ -927,56 +1059,56 @@ const handleHiddenDangerPannelData = (query) => {
 
         // 获取隐患排查治理处理进度数据
         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 (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)
         })
@@ -1002,7 +1134,7 @@ const handleTabClick = async (tab: string) => {
       code1 = "fire_drill_detail"
 
       getDangerDetail(query.campus_id).then(res => {
-        const list = res.records.map((item: any) => ({description: item.contenttext}))
+        const list = res.records.map((item: any) => ({ description: item.contenttext }))
         dangerList.value = list
       })
 
@@ -1186,6 +1318,10 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
+.cursor-pointer {
+  cursor: pointer;
+}
+
 /* 响应式设计 - 自动适应不同屏幕尺寸 */
 @media (width <=1200px) {
   .dashboard-container {

src/views/screen/components/AlertList.vue

@@ -15,7 +15,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,7 +24,7 @@
         
         <!-- 列表模式 -->
         <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>
@@ -72,8 +72,12 @@ const listWrapperRef = ref<HTMLElement | null>(null)
 let scrollTimer: NodeJS.Timeout | null = null
 let isScrolling = false
 
+const handleItemClick = (item: AlertItem) => {
+  window.open(`http://10.0.64.20/pms/workorder-list`, '_blank')
+}
+
 // 自动滚动功能
-const startAutoScroll = () => {
+const startAutoScroll = (resetToTop: boolean = false) => {
   if (!props.autoScroll || !listWrapperRef.value) return
 
   const wrapper = listWrapperRef.value
@@ -83,20 +87,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 +143,9 @@ const handleMouseEnter = () => {
 const handleMouseLeave = () => {
   if (props.autoScroll) {
     // 延迟启动滚动，避免鼠标快速进出
+    // 从当前位置继续向下滚动
     setTimeout(() => {
-      startAutoScroll()
+      startAutoScroll(false)
     }, 500)
   }
 }
@@ -133,7 +156,8 @@ watch(() => props.listData, () => {
     if (props.autoScroll) {
       stopAutoScroll()
       setTimeout(() => {
-        startAutoScroll()
+        // 数据更新后从顶部重新开始
+        startAutoScroll(true)
       }, 1000) // 数据更新后1秒开始滚动
     }
   })
@@ -141,9 +165,9 @@ watch(() => props.listData, () => {
 
 onMounted(() => {
   if (props.autoScroll) {
-    // 组件挂载后延迟启动滚动
+    // 组件挂载后延迟启动滚动，从顶部开始
     setTimeout(() => {
-      startAutoScroll()
+      startAutoScroll(true)
     }, 2000)
   }
 })
@@ -154,6 +178,9 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
+.cursor-pointer {
+  cursor: pointer;
+}
 .list-content {
   display: flex;
   width: 68%;

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

@@ -10,11 +10,11 @@
       <div class="type-wrapper">
         <div class="type-item">
           <span class="type-btn">重大</span>
-          <span class="type-num">{{ hiddenDangerData?.major || 0 }}</span>
+          <span 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>
+          <span class="type-num cursor-pointer" @click="handleMajorClick">{{ hiddenDangerData?.general || 0 }}</span>
         </div>
       </div>
 
@@ -61,7 +61,7 @@
       <div class="safe-wrapper">
         <span class="safe-title">
           <img width="22" style="margin: 3px 5px 0 0" src="@/assets/images/ybp_icon.png" />
-          安全指数:
+          安全指数:<p title="安全指数 = 逾期隐患百分比 × 60% + 安全考核通过率 × 20% + 安全培训完成率 × 20%"></p>
         </span>
         <span class="pending-count">{{ hiddenDangerData?.safetyIndex || 0 }}</span>
       </div>
@@ -96,6 +96,12 @@ const props = defineProps<Props>()
 
 // 图表引用
 const progressChartOption = ref<any>({
+  backgroundColor: 'transparent',
+  tooltip: {
+    show: true,
+    trigger: 'item',
+    formatter: '{a} <br/>{b}: {c}% ({d}%)'
+  },
   series: [
     {
       type: 'pie' as const,
@@ -106,6 +112,7 @@ const progressChartOption = ref<any>({
       bottom: 0,
       data: [],
       label: {
+        show: true,
         alignTo: 'edge' as const,
         formatter: '{time|{c} %}\n',
         minMargin: 5,
@@ -119,6 +126,7 @@ const progressChartOption = ref<any>({
         }
       },
       labelLine: {
+        show: true,
         length: 5,
         length2: 0,
         maxSurfaceAngle: 10
@@ -189,24 +197,116 @@ 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')
+}
+
+watch(() => props.hiddenDangerData?.progress, (newVal, oldVal) => {
+  console.log('HiddenDangerPanel watch 触发，progress 数据:', newVal, '旧数据:', oldVal)
+  // 确保每次数据变化都更新图表
+  if (newVal) {
+    refreshProcessCharts(newVal)
+  } else {
+    // 即使数据为空，也要显示空图表
+    refreshProcessCharts(null)
+  }
+}, { deep: true, immediate: true })
+
+// 辅助函数：安全地将值转换为数字，处理 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')
+    // 即使没有数据，也要显示空图表，确保图表容器始终存在
+    const option = { ...progressChartOption.value }
+    option.series[0].data = [
+      { value: 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
+      { value: 0, name: '已处理', itemStyle: { color: '#10b981' } },
+      { value: 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
+    ]
+    progressChartOption.value = option
     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' } }
-  ]
+  
+  const overdue = safeNumber(process.overdue)
+  const processed = safeNumber(process.processed)
+  const processing = safeNumber(process.processing)
+  
+  console.log('refreshProcessCharts 数据:', { overdue, processed, processing })
+  
+  // 创建新的配置对象，确保 Vue 能检测到变化
+  const option = {
+    backgroundColor: 'transparent',
+    tooltip: {
+      show: true,
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c}% ({d}%)'
+    },
+    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()
 }
 
 
@@ -236,7 +336,11 @@ const refreshTop3TypesCharts = (top3Types): void => {
 }
 
 onMounted(() => {
-
+  // 组件挂载时，如果已有数据，立即更新图表
+  if (props.hiddenDangerData?.progress) {
+    console.log('onMounted: 初始化图表数据', props.hiddenDangerData.progress)
+    refreshProcessCharts(props.hiddenDangerData.progress)
+  }
 })
 </script>
 
@@ -382,7 +486,8 @@ onMounted(() => {
     }
   }
 }
-
+p{width:17px;    height:17px;   background-color:rgb(125, 125, 152);    border-radius:50%;    text-align:center;    }
+p:before{content:'?';    color:yellow;    font-weight: bold;}
 .center-container {
   position: fixed;
   top: 55%;
@@ -402,7 +507,7 @@ onMounted(() => {
     display: flex;
     width: 77%;
     height: 77%;
-    overflow: hidden;
+    // overflow: hidden;
     border-radius: 50%;
     align-items: center;
     flex-direction: column;

src/views/screen/components/OverviewPanel.vue

@@ -263,7 +263,7 @@ onMounted(() => {
             line-height: 25px;
             color: #fff;
             text-align: center;
-            background-color: #1afb8f;
+            background-color: #158e56;
             border-radius: 2px;
             transition: all 0.3s ease;
           }

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

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

src/views/screen/components/RiskStatisticsPanel.vue

@@ -2,485 +2,130 @@
   <div class="left-bottom">
     <div class="panel-title">
       <div class="tabs">
-        <span class="tab" :class="{ active: activeTab === '高危作业' }" @click="handleTabClick('高危作业')">高危作业</span>
+        <span class="tab" :class="{ active: activeTab === '安全类' }" @click="handleTabClick('安全类')">安全类</span>
         <span class="divider">|</span>
-        <span class="tab" :class="{ active: activeTab === '安全培训考试' }" @click="handleTabClick('安全培训考试')">安全培训考试</span>
-        <span class="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" />
-    <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" />
+    <img class="title-line" src="@/assets/images/title_border_line.png" />
+
+    <div class="chart-grid">
+      <div class="chart-card" v-for="item in currentCharts" :key="`${activeTab}-${item.title}`">
+        <div class="chart-title">{{ item.title }}</div>
+        <div class="chart-content">
+          <div class="chart-wrapper">
+            <Echart class="donut-chart" :options="buildOption(item)" />
+            <div class="chart-center">
+              <div class="center-title">总数</div>
+              <div class="center-value">{{ item.total }}</div>
+            </div>
+          </div>
+        <div class="legend">
+          <div class="legend-label-row">
+            <div v-for="status in statusList" :key="status.key" :content="status.label" effect="dark" placement="right">
+              <div class="legend-item">
+                <span class="legend-dot" :style="{ background: status.color }"></span>
+                <span class="legend-label">{{ status.label }}</span>
+                <div class="legend-value">
+                  {{ item.status[status.key] }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- <div class="legend-value-row">
+            <div class="legend-value" v-for="status in statusList" :key="`${status.key}-value`">
+              {{ item.status[status.key] }}
+            </div>
+          </div> -->
+        </div>
+      </div>
       </div>
     </div>
-    <!-- <Echart v-if="activeTab !== '高危作业'" :options="riskChartOption" class="donut-chart-with-labels" height="30vh" /> -->
-
-    <AlertList maxHeight="40vh" v-if="activeTab === '安全培训考试'" :table-title="tableTitle" style="margin-left: 1vw;"
-      :list-data="dataList" />
-
-    <div style="width: 80%; padding-left: 1vw;">
-      <Echart v-if="activeTab === '高危作业'" style="height: 30vh" :options="barChartOption" class="bar-chart" />
-    </div>
-
-    <div ref="riskChart" class="risk-chart" v-if="activeTab === '应急预案及演练'"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, nextTick } from 'vue'
-import 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
+import { computed, ref, watch } from 'vue'
+import { ElTooltip } from 'element-plus'
+import type { EChartsOption } from 'echarts'
+
+type TabType = '安全类' | '工程类'
+type StatusKey = 'notStarted' | 'inProgress' | 'done' | 'voided'
+
+interface ChartItem {
+  title: string
+  total: number
+  status: Record<StatusKey, number>
 }
 
-const tableTitle = [
-  {
-    name: '园区名称',
-    key: 'campus_name'
-  },
-  {
-    name: '累计培训次数',
-    key: 'examtimes'
-  },
-  {
-    name: '参与总人次',
-    key: 'exampeoplenum'
-  },
-  {
-    name: '累计培训时长',
-    key: 'examduration'
-  },
-  {
-    name: '平均通过率',
-    key: 'exampassrate'
-  }
+const statusList: { key: StatusKey; label: string; color: string }[] = [
+  { key: 'notStarted', label: '未开始', color: '#2a59ff' },
+  { key: 'inProgress', label: '进行中', color: '#ff8a00' },
+  { key: 'done', label: '已完成', color: '#1bd9ff' },
+  { key: 'voided', label: '已作废', color: '#9fa0a6' }
 ]
 
-// 图表引用
-const barChartOption = ref({
-  legend: {
-    top: '10%',
-    right: '12%',
-    orient: 'vertical' as const,
-    textStyle: {
-      color: '#ffffff',
-      fontSize: '11px'
+const defaultChart: ChartItem[] = [
+  { title: '每日检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
+  { title: '每月检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
+  { title: '每年检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
+  { title: '每日检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
+  { title: '每月检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
+  { title: '每年检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } }
+]
+
+const tabCharts = ref<Record<TabType, ChartItem[]>>({
+  安全类: [...defaultChart],
+  工程类: [...defaultChart]
+})
+
+const props = defineProps<{
+  riskStatistics?: Record<TabType, ChartItem[]>
+}>()
+
+const activeTab = ref<TabType>('安全类')
+const emit = defineEmits<{ tabChange: [tab: TabType] }>()
+
+// 监听props变化，更新图表数据
+watch(() => props.riskStatistics, (newData) => {
+  if (newData) {
+    tabCharts.value = {
+      安全类: newData['安全类'] ? JSON.parse(JSON.stringify(newData['安全类'])) : [...defaultChart],
+      工程类: newData['工程类'] ? JSON.parse(JSON.stringify(newData['工程类'])) : [...defaultChart]
     }
-  },
-  grid: {
-    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' }
-    }
-  },
+  }
+}, { deep: true, immediate: true })
+
+const currentCharts = computed(() => tabCharts.value[activeTab.value])
+
+const buildOption = (item: ChartItem): EChartsOption => ({
+  backgroundColor: 'transparent',
+  tooltip: { show: false },
   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}'
-      }
+      type: 'pie' as const,
+      radius: ['70%', '90%'],
+      center: ['50%', '50%'],
+      startAngle: 90,
+      avoidLabelOverlap: false,
+      label: { show: false },
+      labelLine: { show: false },
+      data: [
+        { value: item.status.notStarted, name: '未开始', itemStyle: { color: '#2a59ff' }, label: { show: false } },
+        { value: item.status.inProgress, name: '进行中', itemStyle: { color: '#ff8a00' }, label: { show: false } },
+        { value: item.status.done, name: '已完成', itemStyle: { color: '#1bd9ff' }, label: { show: false } },
+        { value: item.status.voided, name: '已作废', itemStyle: { color: '#9fa0a6' }, label: { show: false } }
+      ],
+      emphasis: { scale: true, scaleSize: 4 }
     }
   ]
 })
 
-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) => {
+const handleTabClick = (tab: TabType) => {
+  if (activeTab.value === tab) return
   activeTab.value = tab
   emit('tabChange', tab)
 }
-
-onMounted(() => {
-  // 如果没有传入数据，设置默认数据
-  if (!props.riskStatistics) {
-    const defaultData = [
-      {
-        csmpus_name: "雄安新区总部",
-        finishCount: "234",
-        participateCount: "300"
-      },
-      {
-        csmpus_name: "雄安二区总部",
-        finishCount: "180",
-        participateCount: "250"
-      },
-      {
-        csmpus_name: "雄安三区总部",
-        finishCount: "156",
-        participateCount: "200"
-      }
-    ]
-    refreshCharts(defaultData)
-  }
-
-  // 如果当前是高危作业标签页，初始化柱状图
-  if (activeTab.value === '高危作业') {
-    nextTick(() => {
-      initBarChart()
-    })
-  }
-})
-
-// 组件卸载时销毁图表
-onUnmounted(() => {
-  destroyChart()
-})
 </script>
 
 <style scoped lang="scss">
@@ -528,64 +173,241 @@ onUnmounted(() => {
     color: #94a3b8;
   }
 
-  .bottom-card-risk {
+  .title-line {
+    margin: 8px 0;
+  }
+
+  .chart-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 12px;
+    padding: 0 12px 12px;
+    width: 70%;
+    // margin: 0 auto;
+  }
+
+  .chart-card {
+    background: rgba(18, 34, 63, 0.65);
+    border: 1px solid rgba(58, 112, 179, 0.55);
+    border-radius: 10px;
+    padding: 5px 0;
     display: flex;
     flex-direction: column;
+    align-items: center;
+    box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
+  }
 
-    .bottom-card-title {
-      display: flex;
-      margin-top: 5px;
-      margin-left: -15%;
-      flex-direction: column;
-      align-items: center;
+  .chart-title {
+    width: 100%;
+    color: #ffffff;
+    font-size: 13px;
+    text-align: center;
+    margin-bottom: 6px;
+  }
+
+  .chart-content {
+    display: flex;
+    align-items: center;
+    // justify-content: flex-start;
+    // gap: 10px;
+    width: 100%;
+  }
+
+  .chart-wrapper {
+    position: relative;
+  }
+
+  .donut-chart {
+    width: 100%;
+    height: 100% !important; // 强制覆盖 EChart 默认高度，避免过高
+  }
+
+  .chart-center {
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+    text-align: center;
+    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
+  }
+
+  .legend {
+    // display: flex;
+    // flex-direction: column;
+    // gap: 6px;
+    // margin-top: 0;
+    // width: auto;
+    // justify-content: space-between;
+  }
+
+  .legend-label-row {
+    flex-wrap: nowrap;
+    align-items: center;
+    color: #cbd5e1;
+    font-size: 12px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 2px;
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    white-space: nowrap;
+  }
+
+  .legend-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    // display: inline-block;
+  }
+
+  .legend-label {
+    color: #cbd5e1;
+    white-space: nowrap;
+  }
+
+  .legend-value-row {
+    display: none;
+    gap: 20px;
+    color: #ffffff;
+    font-size: 14px;
+    font-weight: 600;
+    justify-content: flex-start;
+  }
+
+  .legend-value {
+    min-width: 14px;
+    text-align: center;
+  }
+}
+
+/* 简化版尺寸适配：只控制字体大小和图表尺寸 */
+@media (width <= 1680px) {
+  .left-bottom {
+    .panel-title {
+      font-size: 0.75rem;
+    }
+
+    .tab {
+      padding: 2px 8px;
+      font-size: 0.78rem;
+    }
+
+    .chart-title {
+      font-size: 12px;
+    }
+
+    .legend-label-row {
+      font-size: 11px;
     }
   }
-
-  .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) {
+@media (width <= 1400px) {
   .left-bottom {
-    .tabs .tab {
-      padding: 1px 8px;
+    .panel-title {
       font-size: 0.7rem;
     }
 
-    .donut-chart-with-labels,
-    .risk-chart {
-      width: 40vw;
-      height: 40vh;
-      margin-left: 1vw;
+    .tab {
+      padding: 1px 6px;
+      font-size: 0.72rem;
+    }
+
+    .chart-title {
+      font-size: 11px;
+    }
+
+    .legend-label-row {
+      font-size: 10px;
     }
   }
 }
 
-@media (width <=480px) {
+@media (width <= 1200px) {
+  .left-bottom {
+    .panel-title {
+      font-size: 0.65rem;
+    }
 
-  .left-bottom .donut-chart-with-labels,
-  .left-bottom .risk-chart {
-    width: 45vw;
-    height: 45vh;
-    margin-left: 0.5vw;
+    .tab {
+      padding: 1px 4px;
+      font-size: 0.68rem;
+    }
+
+    .chart-title {
+      font-size: 10px;
+    }
+
+    .legend-label-row {
+      font-size: 9px;
+    }
   }
 }
+
+// @media (width >3000px) {
+  .left-bottom .chart-content {
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .left-bottom .legend {
+    // align-items: center;
+    width: 100%;
+  }
+
+  .left-bottom .legend-label {
+    display: inline;
+  }
+
+  .left-bottom .legend-item {
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    white-space: nowrap;
+  }
+
+  .left-bottom .legend-label-row .legend-value {
+    display: block;
+  }
+
+  // .left-bottom .legend-value-row {
+  //   display: none;
+  // }
+
+  .left-bottom .chart-wrapper {
+    flex-basis: 60px;
+    width: 60px;
+    height: 60px;
+  }
+// }
+
+// @media (width <=1024px) {
+//   .left-bottom .chart-grid {
+//     grid-template-columns: repeat(2, minmax(0, 1fr));
+//   }
+
+//   .left-bottom .donut-chart {
+//     height: 80px !important;
+//   }
+// }
+
+// @media (width <=768px) {
+//   .left-bottom .chart-grid {
+//     grid-template-columns: repeat(1, minmax(0, 1fr));
+//   }
+
+//   .left-bottom .chart-card {
+//     padding: 5px;
+//   }
+// }
 </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/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

@@ -3,7 +3,7 @@
     <!-- 顶部标题栏 -->
     <div class="header-container">
       <div class="header-left">
-        <div class="back-button" @click="openRegionSelector"> 总部
+        <div class="back-button" @click="openRegionSelector"> 集团
           <span>···</span>
         </div>
       </div>
@@ -15,52 +15,46 @@
       </div>
     </div>
     <!-- 天气预报 -->
-    <WeatherWarning/>
+    <WeatherWarning />
     <!-- 主内容区 -->
     <div class="content-container">
       <div class="left-wrapper">
-        <OverviewPanel
-          :totalCount="dashboardData?.totalCount || 0"
+        <OverviewPanel :totalCount="dashboardData?.totalCount || 0"
           :formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
-          :externalStaffCount="dashboardData?.externalStaffCount || 0"
-          :visitorCount="dashboardData?.visitorCount || 0"
-          :parkStatistics="dashboardData?.parkStatistics"/>
-        <RiskStatisticsPanel
-          :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
-          @tab-change="handleRiskTabChange" :campus_id="query.campus_id"/>
+          :externalStaffCount="dashboardData?.externalStaffCount || 0" :visitorCount="dashboardData?.visitorCount || 0"
+          :parkStatistics="dashboardData?.parkStatistics" />
+        <RiskStatisticsPanel :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"
-          :sourceIndex="sourceIndex"/>
-        <TimeoutWorkOrderPanel
-          :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
-          :alertDetails="dashboardData?.timeoutWorkOrders.details" :sourceIndex="sourceIndex"/>
+        <HighRiskAlertPanel :alertData="dashboardData?.alertData" :alertDetails="dashboardData?.alertData.details"
+          :sourceIndex="sourceIndex" />
+        <TimeoutWorkOrderPanel :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
+          :alertDetails="dashboardData?.timeoutWorkOrders.details" :sourceIndex="sourceIndex" />
       </div>
-      <HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData"/>
+      <HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData" />
     </div>
   </div>
 
   <!-- 区域选择弹窗 -->
-  <RegionSelector
-    v-model="regionSelectorVisible" :modelSelected="selectedRegion" :regions="regionOption"
-    @change="onRegionChange"/>
+  <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 {useRouter} from 'vue-router'
+import { getTableList, getTableData, getWorkOrderStatistics } from './report'
+import { ref, onMounted, watch, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
 import RegionSelector from './components/RegionSelector.vue'
 import WeatherWarning from './components/WeatherWarning.vue'
-import {getDashboardData, getAlertDetails, type DashboardData} from '@/api/dashboard'
+import { getDashboardData, getAlertDetails, type DashboardData } from '@/api/dashboard'
 
 import OverviewPanel from './components/OverviewPanel.vue'
 import RiskStatisticsPanel from './components/RiskStatisticsPanel.vue'
 import HighRiskAlertPanel from './components/HighRiskAlertPanel.vue'
 import TimeoutWorkOrderPanel from './components/TimeoutWorkOrderPanel.vue'
 import HiddenDangerPanel from './components/HiddenDangerPanel.vue'
-import {error} from "echarts/types/src/util/log";
+import { error } from "echarts/types/src/util/log";
 
 // 类型定义
 interface AlertItem {
@@ -73,7 +67,7 @@ interface RegionItem {
   code: string
 }
 
-type TabType = '高危作业' | '安全培训考试' | '安全培训考试'
+type TabType = '安全类' | '工程类'
 
 // 响应式数据
 const currentDateTime = ref<string>('')
@@ -95,7 +89,10 @@ const visitorCount = ref<number>(0)
 // 总体概览-各园区统计
 const parkStatistics = ref<any>()
 // 高危作业/安全培训考试/安全培训考试
-const riskStatistics = ref<any>()
+const riskStatistics = ref<any>({
+  安全类: [],
+  工程类: []
+})
 const dangerDetail = ref<any>()
 
 // 动画相关的状态
@@ -220,7 +217,7 @@ onMounted(async () => {
   timeUpdateTimerId.value = setInterval(updateTime, 1000)
   // 
   try {
-    let {records} = await getTableList(
+    let { records } = await getTableList(
       'park_info_list'
     )
     // records = [
@@ -395,7 +392,7 @@ const loadDashboardData = async (): Promise<void> => {
   } catch (error) {
     console.error('获取超期工单数据失败:', error)
   }
-  handleRiskTabChange('高危作业')
+  handleRiskTabChange('安全类')
   handleHiddenDangerPannelData(query)
   console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
 }
@@ -434,12 +431,17 @@ const handleHiddenDangerPannelData = (query) => {
         // 获取隐患排查治理数据
         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
+            // 接口返回的已经是百分比，直接使用
+            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);
@@ -448,30 +450,44 @@ const handleHiddenDangerPannelData = (query) => {
               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)
+              // 如果第三方数据也是百分比，需要合并；否则使用系统数据
+              // 这里假设系统数据是百分比，第三方数据可能是数量或百分比
+              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
+                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)
             }
           }
         })
@@ -498,46 +514,46 @@ const handleHiddenDangerPannelData = (query) => {
 
         // 获取隐患排查治理处理进度数据
         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 (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)
         })
@@ -567,93 +583,82 @@ const handleHiddenDangerPannelData = (query) => {
 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
-        }
-      }).catch(error => {
-        console.error('获取风险统计数据失败:', error)
-        if (isFirstLoad.value) {
-          // dangerDetail.value = [
-          //   {
-          //     description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
-          //     alarm_level_code: 'general',
-          //     alarm_status: '已关闭',
-          //     alarm_biz_id: '20250827164305283937'
-          //   },
-          //   {
-          //     description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
-          //     alarm_level_code: 'general',
-          //     alarm_status: '已关闭',
-          //     alarm_biz_id: '20250827164305283937'
-          //   }, {
-          //     description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
-          //     alarm_level_code: 'general',
-          //     alarm_status: '已关闭',
-          //     alarm_biz_id: '20250827164305283937'
-          //   }, {
-          //     description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
-          //     alarm_level_code: 'general',
-          //     alarm_status: '已关闭',
-          //     alarm_biz_id: '20250827164305283937'
-          //   }, {
-          //     description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
-          //     alarm_level_code: 'general',
-          //     alarm_status: '已关闭',
-          //     alarm_biz_id: '20250827164305283937'
-          //   }, {
-          //     description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
-          //     alarm_level_code: 'general',
-          //     alarm_status: '已关闭',
-          //     alarm_biz_id: '20250827164305283937'
-          //   }
-          // ]
-        }
-      })
-    } else {
-      // 根据不同的tab请求不同的接口
-      getTableList(
-        code,
-        {...query, activeTab: tab}
-      ).then(response => {
-        // 更新风险统计数据 - 传递完整的数组数据用于饼图显示
-        if (response.records && response.records.length > 0) {
-          riskStatistics.value = response.records
-        } else {
-          // 如果没有数据，设置默认值
-          riskStatistics.value = [
-            {
-              csmpus_name: "雄安新区总部",
-              finishCount: "0",
-              participateCount: "0"
-            }
-          ]
-        }
-      }).catch(error => {
-        console.error('获取风险统计数据失败:', error)
+    // 同时获取维保任务和巡检任务的数据
+    const [maintenanceResponse, inspectionResponse] = await Promise.all([
+      getWorkOrderStatistics({workOrderType, taskType: '维保任务',campus_id: query.campus_id}).catch(error => {
+        console.error('获取维保任务数据失败:', error)
+        return { records: [] }
+      }),
+      getWorkOrderStatistics({workOrderType, taskType: '巡检任务',campus_id: query.campus_id}).catch(error => {
+        console.error('获取巡检任务数据失败:', error)
+        return { records: [] }
       })
+    ])
+
+    // 周期映射
+    const cycleMap: Record<string, string> = {
+      'day': '每日',
+      'month': '每月',
+      'year': '每年'
     }
+
+    // 将API数据转换为图表数据格式
+    const convertToChartData = (records: any[], taskTypeName: string): any[] => {
+      const charts: any[] = []
+      
+      // 按周期分组
+      const cycleGroups: Record<string, any> = {}
+      records.forEach((record: any) => {
+        const cycle = record.cycle || 'day'
+        if (!cycleGroups[cycle]) {
+          cycleGroups[cycle] = record
+        }
+      })
+
+      // 创建6个图表（3个周期 x 2个任务类型，但这里只处理一种任务类型）
+      const cycles = ['day', 'month', 'year']
+      cycles.forEach((cycle) => {
+        const data = cycleGroups[cycle] || {}
+        const title = `${cycleMap[cycle]}检查(${taskTypeName})`
+        
+        charts.push({
+          title,
+          total: Number(data.total) || 0,
+          status: {
+            notStarted: Number(data.pending) || 0,
+            inProgress: Number(data.processing) || 0,
+            done: Number(data.processed) || 0,
+            voided: Number(data.closed) || 0
+          }
+        })
+      })
+
+      return charts
+    }
+
+    // 转换维保和巡检数据
+    const maintenanceCharts = convertToChartData(maintenanceResponse.records || [], '维保类')
+    const inspectionCharts = convertToChartData(inspectionResponse.records || [], '巡检类')
+
+    // 合并为6个图表：先维保（3个），后巡检（3个）
+    const allCharts = [...maintenanceCharts, ...inspectionCharts]
+
+    // 更新riskStatistics
+    riskStatistics.value[tab] = allCharts
+
+    console.log('更新后的riskStatistics:', riskStatistics.value)
   } catch (error) {
     console.error('获取风险统计数据失败:', error)
   }
@@ -664,7 +669,7 @@ const onRegionChange = (item: RegionItem): void => {
   selectedRegion.value = item.name
   router.push({
     path: '/screen/region',
-    query: {region: item.name, regionCode: item.code}
+    query: { region: item.name, regionCode: item.code }
   })
 }
 
@@ -1231,19 +1236,19 @@ const timeOut1 = (): void => {
     .left-top {
       padding: 0 5px;
       background-image: url('@/assets/images/screen/left_top_img.png'),
-      url('@/assets/images/screen/left_center_img.png'),
-      url('@/assets/images/screen/left_bottom_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;
+        left center,
+        bottom center;
 
       /* 设置大小，注意中间的背景图应该覆盖整个容器 */
       background-repeat: no-repeat, no-repeat, no-repeat;
 
       /* 设置位置 */
       background-size: 100% 90px,
-      cover,
-      100% 68px;
+        cover,
+        100% 68px;
       flex: 1;
 
       /* 设置重复方式 */
@@ -1355,7 +1360,7 @@ const timeOut1 = (): void => {
 
               @keyframes typeFlashEffect {
                 0% {
-                  background-color: #1afb8f;
+                  background-color: #158e56;
                 }
 
                 50% {
@@ -1363,7 +1368,7 @@ const timeOut1 = (): void => {
                 }
 
                 100% {
-                  background-color: #1afb8f;
+                  background-color: #158e56;
                 }
               }
 
@@ -1381,14 +1386,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);
               }
 
@@ -1405,19 +1410,19 @@ const timeOut1 = (): void => {
 
     .left-bottom {
       background-image: url('@/assets/images/screen/left_top_2_img.png'),
-      url('@/assets/images/screen/left_center_img.png'),
-      url('@/assets/images/screen/left_bottom_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;
+        left center,
+        bottom center;
 
       /* 设置大小，注意中间的背景图应该覆盖整个容器 */
       background-repeat: no-repeat, no-repeat, no-repeat;
 
       /* 设置位置 */
       background-size: 100% 90px,
-      cover,
-      100% 68px;
+        cover,
+        100% 68px;
       flex: 1;
 
       /* 设置重复方式 */

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/configcenter/console/device-manage'"
+                  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

@@ -49,7 +49,7 @@
 </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'
@@ -73,7 +73,7 @@ interface RegionItem {
   code: string
 }
 
-type TabType = '危险作业' | '安全考核' | '安全、保密培训'
+type TabType = '安全类' | '工程类'
 
 // 响应式数据
 const currentDateTime = ref<string>('')
@@ -95,7 +95,10 @@ 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)
@@ -374,9 +377,9 @@ 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
-      }
+      // if (risk_alert_detail.records && risk_alert_detail.records.length > 0) {
+        dashboardData.value.alertData.details = risk_alert_detail.records || []
+      // }
     }).catch(error => {
       console.error('获取风险预警详情数据失败:', error)
     })
@@ -397,7 +400,7 @@ const loadDashboardData = async (): Promise<void> => {
   } catch (error) {
     console.error('获取超期工单数据失败:', error)
   }
-  handleRiskTabChange('危险作业')
+  handleRiskTabChange('安全类')
   handleHiddenDangerPannelData(query)
   console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
 }
@@ -437,12 +440,17 @@ const handleHiddenDangerPannelData = (query) => {
         // 获取隐患排查治理数据
         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
+            // 接口返回的已经是百分比，直接使用
+            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);
@@ -451,30 +459,44 @@ const handleHiddenDangerPannelData = (query) => {
               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)
+              // 如果第三方数据也是百分比，需要合并；否则使用系统数据
+              // 这里假设系统数据是百分比，第三方数据可能是数量或百分比
+              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
+                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)
             }
           }
         })
@@ -501,46 +523,46 @@ const handleHiddenDangerPannelData = (query) => {
 
         // 获取隐患排查治理处理进度数据
         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 (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)
         })
@@ -569,93 +591,103 @@ 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
-        }
-      }).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}).catch(error => {
+        console.error('获取维保任务数据失败:', error)
+        return { records: [] }
+      }),
+      getWorkOrderStatistics({workOrderType, taskType: '巡检任务', campus_id: query.campus_id}).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
+      }
+      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"
-            }
-          ]
-        }
-      }).catch(error => {
-        console.error('获取风险统计数据失败:', error)
+
+      // 创建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(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)
   }

src/views/screen/report/index.ts

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

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`), ''),