feat(bpm): 添加处理待阅功能并优化流程实例详情页

- 新增 handleProcessInstanceCC 接口用于处理待阅操作
- 在流程实例详情页初始化时调用待阅处理接口
- 优化页面按钮图标与文字的布局展示
- 调整打印表单相关逻辑及页面结构
- 统一接口请求参数格式并移除多余空格
- 修复表单变量合并逻辑并优化对象展开语法
- 更新组件引用路径及函数调用方式一致性

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/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/config/axios/config.ts

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

src/router/modules/remaining.ts

@@ -88,7 +88,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
           icon: 'ep:home-filled',
           noCache: false,
           hidden: true,
-          affix: true
+          affix: false
         }
       },
       {
@@ -100,7 +100,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
           icon: 'ep:home-filled',
           hidden: true,
           noCache: false,
-          affix: true
+          affix: false
         }
       }
     ]
@@ -399,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/Home/Index10.vue

@@ -8,7 +8,7 @@
           <span>···</span>
         </div>
       </div>
-      <h1 class="header-title">集团视角数据看板</h1>
+      <!-- <h1 class="header-title">集团视角数据看板</h1> -->
       <div class="header-right">
         <div class="date-range-wrapper">
           <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
@@ -261,7 +261,7 @@ const router = useRouter()
 const route = useRoute()
 
 // 区域选择相关
-const currentView = ref('总部')
+const currentView = ref('集团')
 const regionSelectorVisible = ref(false)
 const selectedRegion = ref('')
 const regionOption = ref<RegionItem[]>([])
@@ -569,7 +569,7 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
     },
     legend: {
       data: ['一般隐患', '重大隐患'],
-      top: 10,
+      top: 0,
       textStyle: {
         fontSize: 12
       }
@@ -578,7 +578,7 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
       left: '3%',
       right: '4%',
       bottom: '3%',
-      top: '25%',
+      top: '12%',
       containLabel: true
     },
     xAxis: {
@@ -1431,15 +1431,15 @@ onMounted(async () => {
       display: inline-flex;
       align-items: center;
       padding: 8px 16px;
-      background: #f3f4f6;
+      background: #409eff;
       border: 1px solid #e5e7eb;
       border-radius: 6px;
       cursor: pointer;
       transition: all 0.3s;
-      font-size: 14px;
+      font-size: 16px;
-      color: #333;
+      color: white;
       user-select: none;
-
+      font-weight: 600;
       span {
         margin-left: 8px;
         font-size: 18px;
@@ -1614,8 +1614,8 @@ onMounted(async () => {
 
 .donut-chart-wrapper,
 .donut-chart-wrapper-small {
-  height: 280px;
+  height: 200px;
-  min-height: 280px;
+  min-height: 200px;
 }
 
 .line-chart-wrapper,
@@ -1627,9 +1627,13 @@ onMounted(async () => {
   box-sizing: border-box;
 }
 
+.bar-chart-wrapper {
+  height: 215px;
+}
+
 .progress-chart-wrapper {
-  height: 280px;
+  height: 200px;
-  min-height: 280px;
+  min-height: 200px;
 }
 
 .high-risk-top {
@@ -1714,7 +1718,7 @@ onMounted(async () => {
 .operation-distribution,
 .park-operation-distribution,
 .regional-progress {
-  margin-top: 10px;
+  margin-top: 8px;
 
   .distribution-title {
     font-size: 14px;

src/views/Home/Index12.vue

@@ -11,7 +11,7 @@
           <span>···</span>
         </div>
             </div>
-      <h1 class="header-title">区域视角数据看板</h1>
+      <!-- <h1 class="header-title">区域视角数据看板</h1> -->
       <div class="header-right">
         <div class="date-range-wrapper">
           <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
@@ -1500,8 +1500,8 @@ onMounted(() => {
 
 .donut-chart-wrapper,
 .donut-chart-wrapper-small {
-  height: 280px;
+  height: 200px;
-  min-height: 280px;
+  min-height: 200px;
 }
 
 .line-chart-wrapper,
@@ -1513,9 +1513,13 @@ onMounted(() => {
   box-sizing: border-box;
 }
 
+.bar-chart-wrapper {
+  margin-bottom: 15px;
+}
+
 .progress-chart-wrapper {
-  height: 280px;
+  height: 200px;
-  min-height: 280px;
+  min-height: 200px;
 }
 
 .region-distribution,

src/views/Home/Index13.vue

@@ -8,7 +8,7 @@
         </el-icon>
         <div class="park-name">{{ selectedPark }}</div>
               </div>
-      <h1 class="header-title">园区视角数据看板</h1>
+      <!-- <h1 class="header-title">园区视角数据看板</h1> -->
       <div class="header-right">
         <div class="date-range-wrapper">
           <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
@@ -1321,7 +1321,7 @@ onMounted(() => {
   color: white;
   border-radius: 4px;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .header-title {
@@ -1406,8 +1406,8 @@ onMounted(() => {
 
 .donut-chart-wrapper,
 .donut-chart-wrapper-small {
-  height: 280px;
+  height: 200px;
-  min-height: 280px;
+  min-height: 200px;
 }
 
 .line-chart-wrapper,
@@ -1419,9 +1419,13 @@ onMounted(() => {
   box-sizing: border-box;
 }
 
+.bar-chart-wrapper {
+  margin-bottom: 15px;
+}
+
 .progress-chart-wrapper {
-  height: 280px;
+  height: 200px;
-  min-height: 280px;
+  min-height: 200px;
 }
 
 .region-distribution,

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)">
+          <el-button type="primary" @click="handleCC(item)">
-            <Icon icon="ep:edit" />
+            <Icon icon="ep:position"/>
-            转办
+            抄送
           </el-button>
-          <el-button type="primary" @click="handleDelegate(item)">
+          <!-- <el-button type="primary" @click="handleDelegate(item)">
             <Icon icon="ep:position" />
             委派
           </el-button>
          <el-button type="primary" @click="handleSign(item)">
            <Icon icon="ep:plus" />
            加签
-         </el-button>
+         </el-button> -->
-         -->
+
           <el-button type="warning" @click="handleBack(item)">
-            <Icon icon="ep:back" />
+            <Icon icon="ep:back"/>
             回退
           </el-button>
         </div>
@@ -70,7 +70,7 @@
         <template #header>
           <span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
           <el-button type="success" @click="printPage()">
-            <Icon icon="ep:printer" />
+            <Icon icon="ep:printer"/>
             打印表单
           </el-button>
         </template>
@@ -80,12 +80,12 @@
         </el-col>
         <!-- 情况二：业务表单 -->
         <div v-if="processInstance?.processDefinition?.formType === 20">
-        <BusinessFormComponent :id="processInstance.businessKey" />
+          <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 {registerComponent} from '@/utils/routerHelper'
-import { isEmpty } from '@/utils/is'
+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,12 +178,18 @@ const handleAudit = async (task, pass) => {
   getDetail()
 }
 
+const taskCCDialogForm = ref()
+/** 处理抄送按钮 */
+const handleCC = (row) => {
+  taskCCDialogForm.value.open(row)
+}
 
 
 const printPage = async () => {
 
- const { href } = router.resolve({ name: 'BpmProcessInstanceInfo', 
+  const {href} = router.resolve({
-                                  query: { id: String(id), isPrint: '1'  }
+    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,7 +342,8 @@ const loadRunningTask = (tasks) => {
 }
 
 /** 初始化 */
-onMounted(async() => {
+onMounted(async () => {
+  await handleRead()
   await getDetail()
   await nextTick()
   if (query.isPrint === '1') {

src/views/screen/powerMonitoring.vue

@@ -0,0 +1,862 @@
+<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)"
+                >
+                  <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';
+
+// 定义园区信息类型
+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(1286);
+const totalDevicesGrowth = ref(5.2);
+const onlineDevices = ref(1254);
+const onlineRate = ref(97.5);
+
+// 图表引用
+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[]>([
+  {
+    key: '1',
+    parkName: '雄安总部',
+    totalDevices: 156,
+    upsStatus: '3个告警',
+    airConditionStatus: '正常',
+    temperatureStatus: '正常',
+    otherStatus: '正常',
+    hasAlarm: true
+  },
+  {
+    key: '2',
+    parkName: '恒毅大厦',
+    totalDevices: 98,
+    upsStatus: '正常',
+    airConditionStatus: '正常',
+    temperatureStatus: '正常',
+    otherStatus: '正常',
+    hasAlarm: false
+  },
+  {
+    key: '3',
+    parkName: '丰台创新中心',
+    totalDevices: 124,
+    upsStatus: '正常',
+    airConditionStatus: '正常',
+    temperatureStatus: '正常',
+    otherStatus: '正常',
+    hasAlarm: false
+  },
+  {
+    key: '4',
+    parkName: '重庆产业大厦',
+    totalDevices: 92,
+    upsStatus: '正常',
+    airConditionStatus: '2个告警',
+    temperatureStatus: '正常',
+    otherStatus: '正常',
+    hasAlarm: true
+  },
+  {
+    key: '5',
+    parkName: '海南园区',
+    totalDevices: 78,
+    upsStatus: '正常',
+    airConditionStatus: '正常',
+    temperatureStatus: '正常',
+    otherStatus: '正常',
+    hasAlarm: false
+  },
+  {
+    key: '6',
+    parkName: '崇左地面站',
+    totalDevices: 64,
+    upsStatus: '正常',
+    airConditionStatus: '正常',
+    temperatureStatus: '正常',
+    otherStatus: '正常',
+    hasAlarm: false
+  },
+  {
+    key: '7',
+    parkName: '铜川地面站',
+    totalDevices: 58,
+    upsStatus: '正常',
+    airConditionStatus: '正常',
+    temperatureStatus: '正常',
+    otherStatus: '正常',
+    hasAlarm: false
+  },
+  {
+    key: '8',
+    parkName: '佳木斯地面站',
+    totalDevices: 72,
+    upsStatus: '正常',
+    airConditionStatus: '正常',
+    temperatureStatus: '正常',
+    otherStatus: '正常',
+    hasAlarm: false
+  },
+  {
+    key: '9',
+    parkName: '库尔勒地面站',
+    totalDevices: 68,
+    upsStatus: '正常',
+    airConditionStatus: '正常',
+    temperatureStatus: '正常',
+    otherStatus: '正常',
+    hasAlarm: false
+  },
+  {
+    key: '10',
+    parkName: '澄迈地面站',
+    totalDevices: 56,
+    upsStatus: '正常',
+    airConditionStatus: '正常',
+    temperatureStatus: '正常',
+    otherStatus: '正常',
+    hasAlarm: false
+  },
+  {
+    key: '11',
+    parkName: '文昌地面站',
+    totalDevices: 60,
+    upsStatus: '正常',
+    airConditionStatus: '正常',
+    temperatureStatus: '正常',
+    otherStatus: '正常',
+    hasAlarm: false
+  }
+]);
+
+// 更新日期时间
+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 = () => {
+  if (!alarmTrendChartRef.value) return;
+
+  alarmTrendChart = echarts.init(alarmTrendChartRef.value);
+
+  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: 25,
+      interval: 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: [
+            { name: '峰值1', coord: [2, 20] }, // 15日的告警峰值
+            { name: '峰值2', coord: [4, 21] }  // 25日的告警峰值
+          ]
+        }
+      }
+    ]
+  };
+
+  alarmTrendChart.setOption(option);
+};
+
+// 初始化设备类型分布饼图
+const initDeviceTypePieChart = () => {
+  if (!deviceTypePieChartRef.value) return;
+
+  deviceTypePieChart = echarts.init(deviceTypePieChartRef.value);
+
+  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: 实现详情页面跳转或弹窗
+};
+
+// 定时器
+let dateTimeTimer: number | null = null;
+
+// 组件挂载
+onMounted(() => {
+  // 更新日期时间
+  updateDateTime();
+  dateTimeTimer = window.setInterval(updateDateTime, 1000);
+
+  // 初始化图表
+  setTimeout(() => {
+    initAlarmTrendChart();
+    initDeviceTypePieChart();
+  }, 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>

vite.config.ts

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