[Feat 0000]数据中心功能优化

.env

@@ -1,5 +1,5 @@
 # port
-VITE_PORT = 3100
+VITE_PORT = 8062
 
 #  网站标题
 VITE_GLOB_APP_TITLE = 智能通风管控系统

src/views/monitor/quartz/quartz.api.ts

@@ -15,16 +15,8 @@ enum Api {
   deleteBatch = '/ventanaly/quartzJob/deleteBatch',
   //数据中心
   dataCenterList = '/dataCenter/ventanaly/quartzJob/list',
-  //数据采集 collect  数据分析  compute  应用  monitor    ------启动  resume   停止  pause  立即执行 execute
-  collect = '/dataCenter/collect/quartzJob/resume',
-  compute = '/dataCenter/compute/quartzJob/pause',
   dataCentersave = '/dataCenter/ventanaly/quartzJob/add',
   dataCenteredit = '/dataCenter/ventanaly/quartzJob/edit',
-  dataCenterget = '/dataCenter/ventanaly/quartzJob/queryById',
-  dataCenterdelete = '/dataCenter/ventanaly/quartzJob/delete',
-  dataCenterexportXlsUrl = '/dataCenter/ventanaly/quartzJob/exportXls',
-  dataCenterimportExcelUrl = '/dataCenter/ventanaly/quartzJob/importExcel',
-  dataCenterdeleteBatch = '/dataCenter/ventanaly/quartzJob/deleteBatch',
 }
 
 /**
@@ -123,21 +115,9 @@ export const batchDeleteQuartz = (params, handleSuccess) => {
  */
 export const getDataCenterList = (params) =>
   defHttp.get({
-    headers: {
-      'X-Access-Token':
-        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNzU5ODQxMTcwfQ.fHaM3l-d88tUSLOs8sstXsDuSCn6Agbj_EMZMgV6waw',
-    },
     url: Api.dataCenterList,
     params,
   });
-/**
- * 导出api
- */
-export const getDataCenterExportUrl = Api.exportXlsUrl;
-/**
- * 导入api
- */
-export const getDataCenterImportUrl = Api.importExcelUrl;
 
 /**
  * 保存或者更新任务
@@ -146,10 +126,6 @@ export const getDataCenterImportUrl = Api.importExcelUrl;
 export const dataCenterSaveOrUpdateQuartz = (params, isUpdate) => {
   let url = isUpdate ? Api.dataCenteredit : Api.dataCentersave;
   return defHttp.post({
-    headers: {
-      'X-Access-Token':
-        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNzU5ODQxMTcwfQ.fHaM3l-d88tUSLOs8sstXsDuSCn6Agbj_EMZMgV6waw',
-    },
     url: url,
     params,
   });
@@ -161,10 +137,6 @@ export const dataCenterSaveOrUpdateQuartz = (params, isUpdate) => {
  */
 export const getDataCenterQuartzById = (params) => {
   return defHttp.get({
-    headers: {
-      'X-Access-Token':
-        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNzU5ODQxMTcwfQ.fHaM3l-d88tUSLOs8sstXsDuSCn6Agbj_EMZMgV6waw',
-    },
     url: Api.get,
     params,
   });
@@ -178,10 +150,6 @@ export const deleteDataCenterQuartz = (params, handleSuccess) => {
   return defHttp
     .delete(
       {
-        headers: {
-          'X-Access-Token':
-            'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNzU5ODQxMTcwfQ.fHaM3l-d88tUSLOs8sstXsDuSCn6Agbj_EMZMgV6waw',
-        },
         url: Api.delete,
         data: params,
       },
@@ -205,10 +173,6 @@ export const batchDataCenterDeleteQuartz = (params, handleSuccess) => {
       return defHttp
         .delete(
           {
-            headers: {
-              'X-Access-Token':
-                'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNzU5ODQxMTcwfQ.fHaM3l-d88tUSLOs8sstXsDuSCn6Agbj_EMZMgV6waw',
-            },
             url: Api.deleteBatch,
             data: params,
           },
@@ -231,10 +195,6 @@ export const resumeDataCenterJob = (params: any, sysType: string, operation: str
   const apiPath = generateApiPath(currentModule, operation);
   return defHttp
     .get({
-      headers: {
-        'X-Access-Token':
-          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNzU5ODQxMTcwfQ.fHaM3l-d88tUSLOs8sstXsDuSCn6Agbj_EMZMgV6waw',
-      },
       url: apiPath,
       params,
     })
@@ -249,10 +209,6 @@ export const pauseDataCenterJob = (params: any, sysType: String, operation: Stri
   const apiPath = generateApiPath(currentModule, operation);
   return defHttp
     .get({
-      headers: {
-        'X-Access-Token':
-          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNzU5ODQxMTcwfQ.fHaM3l-d88tUSLOs8sstXsDuSCn6Agbj_EMZMgV6waw',
-      },
       url: apiPath,
       params,
     })
@@ -267,10 +223,6 @@ export const excuteDataCenterJob = (params: any, sysType: String, operation: Str
   const apiPath = generateApiPath(currentModule, operation);
   return defHttp
     .get({
-      headers: {
-        'X-Access-Token':
-          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNzU5ODQxMTcwfQ.fHaM3l-d88tUSLOs8sstXsDuSCn6Agbj_EMZMgV6waw',
-      },
       url: apiPath,
       params,
     })

src/views/vent/dataCenter/deviceCenter/index.vue

@@ -54,7 +54,6 @@
                   <RightCircleTwoTone v-else />
                 </a-button>
               </template>
-
               <!-- 嵌套表格 -->
               <template #expandedRowRender="{ record }">
                 <a-table
@@ -75,6 +74,21 @@
                   </template>
                 </a-table>
               </template>
+              <template #bodyCell="{ column, record }">
+                <template v-if="column.key === 'netStatus'">
+                  <span
+                    :style="{
+                      color: record.netStatus ? '#52c41a' : '#ddd',
+                      fontWeight: '500',
+                    }"
+                  >
+                    {{ record.netStatus ? '在线' : '断开' }}
+                  </span>
+                </template>
+                <template v-else>
+                  {{ record[column.dataIndex] }}
+                </template>
+              </template>
             </a-table>
           </div>
           <div class="right-box" v-else-if="activeKey == 'history'">
@@ -99,7 +113,8 @@ import { RightCircleTwoTone, DownCircleTwoTone } from '@ant-design/icons-vue';
 import { alignElement } from 'dom-align';
 import { active } from 'sortablejs';
 import { stubTrue } from 'lodash';
-
+import { useRoute } from 'vue-router';
+let route = useRoute();
 const { hasPermission } = usePermission();
 let activeKey = ref('device');
 const treeData = ref<TreeProps['treeData']>([]);
@@ -211,10 +226,13 @@ const onSelect: TreeProps['onSelect'] = (keys, e) => {
   getDeviceList(deviceType.value);
 };
 // 获取所有节点key的函数
-const getAllNodeKeys = (nodes) => {
+const getAllNodeKeys = (nodes, type) => {
   const keys = [];
   const traverse = (nodeList) => {
     nodeList.forEach((node) => {
+      if (node.type === type) {
+        selectedKeys.value.push(node.key);
+      }
       keys.push(node.key);
       if (node.children && node.children.length > 0) {
         traverse(node.children);
@@ -226,8 +244,9 @@ const getAllNodeKeys = (nodes) => {
 };
 
 // 获取树形菜单数据
-async function getDeviceType() {
+async function getDeviceType(type?) {
   const result = await getDeviceTypeList({});
+
   if (result.length > 0) {
     const dataSource = [];
     let key = '0';
@@ -247,21 +266,38 @@ async function getDeviceType() {
 
     treeData.value = getData(result, dataSource, key);
     // 数据就绪后设置展开key数组
-    expandedKeys.value = getAllNodeKeys(treeData.value);
+    expandedKeys.value = getAllNodeKeys(treeData.value, type);
+    console.log(expandedKeys.value, '22222');
   }
 }
+// 获取当前选择节点
 // 根据选择设备获取设备列表
-async function getDeviceList(deviceTypeVal?) {
-  if (!deviceTypeVal) return;
+async function getDeviceList(deviceTypeVal?: any) {
+  // 1. 如果没有设备类型值，停止定时器并返回（不再重复请求）
+  if (!deviceTypeVal) {
+    if (timer) {
+      clearInterval(timer);
+      timer = undefined;
+    }
+    return;
+  }
   if (timer) {
     clearInterval(timer);
     timer = undefined;
   }
-  const params: any = {
-    devKind: deviceTypeVal,
+  const fetchDeviceData = async () => {
+    const params: any = {
+      devKind: deviceTypeVal,
+    };
+    try {
+      const result = await getDeviceListByType(params);
+      deviceList.value = result.records; // 更新设备列表
+    } catch (error) {
+      console.error('定时请求设备列表失败：', error);
+    }
   };
-  const result = await getDeviceListByType(params);
-  deviceList.value = result.records;
+  await fetchDeviceData();
+  timer = setInterval(fetchDeviceData, 2000); // 2000ms = 2秒
 }
 
 // 外层表格列配置
@@ -289,10 +325,6 @@ const outerColumns = [
     dataIndex: 'netStatus',
     key: 'netStatus',
     align: 'center',
-    customRender: ({ text }) => {
-      text = '在线';
-      return `${text}`;
-    },
   },
 ];
 
@@ -370,7 +402,13 @@ async function refreshData(deviceId: string) {
 }
 
 onMounted(() => {
-  getDeviceType();
+  const path = route.query.deviceType;
+  if (path) {
+    getDeviceType(path);
+    getDeviceList(path);
+  } else {
+    getDeviceType();
+  }
 });
 onUnmounted(() => {
   if (timer) {
@@ -458,6 +496,8 @@ watch(
           box-sizing: border-box;
           background: url('/@/assets/images/fire/bj1.png') no-repeat center;
           background-size: 100% 100%;
+          border: 3px, solid, #0b69b6;
+          border-radius: 5px;
         }
 
         .right-box {
@@ -467,6 +507,8 @@ watch(
           box-sizing: border-box;
           background: url('/@/assets/images/fire/bj1.png') no-repeat center;
           background-size: 100% 100%;
+          border: 3px, solid, #0b69b6;
+          border-radius: 5px;
 
           .right-title {
             display: flex;
@@ -557,8 +599,8 @@ watch(
 }
 
 .device-select-box {
-  margin-top: 60px;
-  width: 220px;
+  margin-top: 30px;
+  width: 300px;
   height: calc(100% - 70px);
   overflow-y: auto;
   color: #fff;
@@ -606,6 +648,17 @@ watch(
   pointer-events: auto;
   padding: 20px 10px 30px 10px;
 }
+/* 在线状态 - 绿色 */
+.status-online {
+  color: #36d399; /* 可替换为其他绿色，如 #00C48C */
+  font-weight: 500;
+}
+
+/* 断开状态 - 灰色（可选调整为红色） */
+.status-offline {
+  color: #999;
+  /* 若想断开显示红色：color: #F5222D; */
+}
 </style>
 <style>
 div[aria-hidden='true'] {

src/views/vent/dataCenter/infoCenter/index.vue

@@ -85,277 +85,280 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, onMounted, reactive } from 'vue';
-  import customHeader from '/@/components/vent/customHeader.vue';
-  import infoBox from './components/infoBox.vue';
-  import { sysDataColumn, accessStatusColumn, dailyNumOption } from './infoCenter.data';
-  import CustomChart from '@/views/vent/home/configurable/components/detail/CustomChart.vue';
-  import { getDeviceAll, getHomepageSummaryIndexes } from './infoCenter.api';
-  let mainTitle = ref('智能通风数据中心');
-  //分页参数配置
-  const pagination = reactive({
-    current: 1, // 当前页码
-    pageSize: 5, // 每页显示条数
-    total: 0, // 总条目数，后端返回
-    // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
-  });
-  // 设备接入情况数据
-  const accessStatusData = ref([]);
-  // 数据中心首页设备数据
-  const deviceData = ref({
-    monitorParamsCount: 0,
-    deviceCount: 0,
-    databaseDiskUsage: {
-      total_size_bytes: 0,
-      total_size_mb: 0,
-      total_size_gb: 0,
+import { ref, onMounted, reactive } from 'vue';
+import customHeader from '/@/components/vent/customHeader.vue';
+import infoBox from './components/infoBox.vue';
+import { sysDataColumn, accessStatusColumn, dailyNumOption } from './infoCenter.data';
+import CustomChart from '@/views/vent/home/configurable/components/detail/CustomChart.vue';
+import { getDeviceAll, getHomepageSummaryIndexes } from './infoCenter.api';
+import { useRouter } from 'vue-router';
+let mainTitle = ref('智能通风数据中心');
+let router = useRouter();
+//分页参数配置
+const pagination = reactive({
+  current: 1, // 当前页码
+  pageSize: 5, // 每页显示条数
+  total: 0, // 总条目数，后端返回
+  // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
+});
+// 设备接入情况数据
+const accessStatusData = ref([]);
+// 数据中心首页设备数据
+const deviceData = ref({
+  monitorParamsCount: 0,
+  deviceCount: 0,
+  databaseDiskUsage: {
+    total_size_bytes: 0,
+    total_size_mb: 0,
+    total_size_gb: 0,
+  },
+  collectTotalNum: 0,
+  summaryShareAPINum: 0,
+  collectDataByStationList: [
+    {
+      sub_id: '1',
+      strName: '测试分站',
+      total_num: 0,
+    },
+  ],
+  collectDataByDayList: [
+    {
+      day: '2025-10-29',
+      total_count: 0,
+    },
+  ],
+  collectGroupByDevKindList: [
+    {
+      devKind: 'bundletube',
+      devNum: 0,
+      dataCount: 0,
     },
-    collectTotalNum: 0,
-    summaryShareAPINum: 0,
-    collectDataByStationList: [
-      {
-        sub_id: '1',
-        strName: '测试分站',
-        total_num: 0,
-      },
-    ],
-    collectDataByDayList: [
-      {
-        day: '2025-10-29',
-        total_count: 0,
-      },
-    ],
-    collectGroupByDevKindList: [
-      {
-        devKind: 'bundletube',
-        devNum: 0,
-        dataCount: 0,
-      },
-    ],
+  ],
+});
+// 查看数据
+function viewData(record) {
+  console.log(record.devicekind, '设备类型');
+  router.push(`/sjzx/deviceCenter/home?deviceType=${record.devicekind}`);
+}
+//分页切换
+const pageChange = async (val) => {
+  pagination.current = val.current;
+  pagination.pageSize = val.pageSize;
+  const res = await getDeviceAll({
+    pageNo: pagination.current,
+    pageSize: pagination.pageSize,
   });
-  // 查看数据
-  function viewData(record) {
-    console.log(record);
+  accessStatusData.value = res.records; // 赋值给响应式变量
+  pagination.total = res.total; // 更新总条数
+};
+// 获取设备数据接口
+const fetchDeviceData = async () => {
+  try {
+    const summaryRes = await getHomepageSummaryIndexes();
+    deviceData.value = summaryRes;
+  } catch (error) {
+    console.error('获取首页汇总指标数据失败:', error);
   }
-  //分页切换
-  const pageChange = async (val) => {
-    pagination.current = val.current;
-    pagination.pageSize = val.pageSize;
-    const res = await getDeviceAll({
+
+  try {
+    const deviceRes = await getDeviceAll({
       pageNo: pagination.current,
       pageSize: pagination.pageSize,
     });
-    accessStatusData.value = res.records; // 赋值给响应式变量
-    pagination.total = res.total; // 更新总条数
-  };
-  // 获取设备数据接口
-  const fetchDeviceData = async () => {
-    try {
-      const summaryRes = await getHomepageSummaryIndexes();
-      deviceData.value = summaryRes;
-    } catch (error) {
-      console.error('获取首页汇总指标数据失败:', error);
-    }
-
-    try {
-      const deviceRes = await getDeviceAll({
-        pageNo: pagination.current,
-        pageSize: pagination.pageSize,
-      });
-      accessStatusData.value = deviceRes.records;
-      pagination.total = deviceRes.total;
-    } catch (error) {
-      console.error('获取设备接入情况数据失败:', error);
-    }
-  };
+    accessStatusData.value = deviceRes.records;
+    pagination.total = deviceRes.total;
+  } catch (error) {
+    console.error('获取设备接入情况数据失败:', error);
+  }
+};
 
-  // 数字千位分隔格式化函数
-  const formatNumber = (num: number | string): string => {
-    // 处理非数字或空值的情况
-    if (!num && num !== 0) return '0';
-    // 转换为数字后再处理，避免字符串类型的数字出现问题
-    const number = typeof num === 'number' ? num : parseFloat(num);
-    // 利用正则表达式实现千位分隔
-    return number.toLocaleString('zh-CN');
-  };
+// 数字千位分隔格式化函数
+const formatNumber = (num: number | string): string => {
+  // 处理非数字或空值的情况
+  if (!num && num !== 0) return '0';
+  // 转换为数字后再处理，避免字符串类型的数字出现问题
+  const number = typeof num === 'number' ? num : parseFloat(num);
+  // 利用正则表达式实现千位分隔
+  return number.toLocaleString('zh-CN');
+};
 
-  // 页面挂载时调用接口获取数据
-  onMounted(async () => {
-    await fetchDeviceData();
-  });
+// 页面挂载时调用接口获取数据
+onMounted(async () => {
+  await fetchDeviceData();
+});
 </script>
 <style lang="less" scoped>
-  @font-face {
-    font-family: 'douyuFont';
-    src: url('@/assets/font/douyuFont.otf');
-  }
+@font-face {
+  font-family: 'douyuFont';
+  src: url('@/assets/font/douyuFont.otf');
+}
 
-  .company-home {
-    width: 100%;
-    height: 100%;
-    position: relative;
+.company-home {
+  width: 100%;
+  height: 100%;
+  position: relative;
 
-    :deep(.vent-home-header) {
-      height: 50px;
-      background: url('@/assets/images/vent/home/modal-top.png') no-repeat center;
-      background-size: 100% 100%;
-    }
+  :deep(.vent-home-header) {
+    height: 50px;
+    background: url('@/assets/images/vent/home/modal-top.png') no-repeat center;
+    background-size: 100% 100%;
+  }
 
-    .company-content {
-      position: absolute;
-      left: 0;
+  .company-content {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: calc(100% - 50px);
+    padding: 20px 20px 10px 20px;
+    --image-border1: url('/@/assets/images/dataCenter/infoCenter/info-border1.png');
+    --image-border2: url('/@/assets/images/dataCenter/infoCenter/info-border2.png');
+    --image-border3: url('/@/assets/images/dataCenter/infoCenter/info-border3.png');
+    --image-border4: url('/@/assets/images/dataCenter/infoCenter/info-border4.png');
+    --image-split-line: url('/@/assets/images/dataCenter/infoCenter/split-line.png');
+    --image-rank: url('/@/assets/images/dataCenter/infoCenter/rank-bg.png');
+    .content-item {
       width: 100%;
-      height: calc(100% - 50px);
-      padding: 20px 20px 10px 20px;
-      --image-border1: url('/@/assets/images/dataCenter/infoCenter/info-border1.png');
-      --image-border2: url('/@/assets/images/dataCenter/infoCenter/info-border2.png');
-      --image-border3: url('/@/assets/images/dataCenter/infoCenter/info-border3.png');
-      --image-border4: url('/@/assets/images/dataCenter/infoCenter/info-border4.png');
-      --image-split-line: url('/@/assets/images/dataCenter/infoCenter/split-line.png');
-      --image-rank: url('/@/assets/images/dataCenter/infoCenter/rank-bg.png');
-      .content-item {
-        width: 100%;
-        overflow: hidden;
-        padding-bottom: 20px;
-      }
-      .item-1 {
-        height: 20%;
-      }
-      .item-2 {
-        height: 40%;
-        grid-template-columns: 6fr 4fr;
-        gap: 20px;
-        :deep(table) {
-          border-collapse: separate !important;
-          border-spacing: 0 10px !important;
-          .zxm-table-thead {
-            height: 35px;
-            background-color: unset !important;
-            .zxm-table-cell {
-              color: #66ffff !important;
-            }
-          }
-          .zxm-table-tbody {
-            background-color: unset !important;
+      overflow: hidden;
+      padding-bottom: 20px;
+    }
+    .item-1 {
+      height: 20%;
+    }
+    .item-2 {
+      height: 40%;
+      grid-template-columns: 6fr 4fr;
+      gap: 20px;
+      :deep(table) {
+        border-collapse: separate !important;
+        border-spacing: 0 10px !important;
+        .zxm-table-thead {
+          height: 35px;
+          background-color: unset !important;
+          .zxm-table-cell {
+            color: #66ffff !important;
           }
+        }
+        .zxm-table-tbody {
+          background-color: unset !important;
+        }
+        .zxm-table-cell {
+          border: none !important;
+          background: none !important;
+          padding: 0px;
+        }
+        tr {
+          background: var(--image-rank) no-repeat !important;
+          background-size: 100% 100% !important;
+        }
+      }
+    }
+    .item-3 {
+      height: 40%;
+      padding-bottom: 0;
+      :deep(table) {
+        border-collapse: collapse !important;
+        // border-spacing: 0 10px !important;
+        .zxm-table-thead {
+          height: 35px;
+          background-color: #0b2542 !important;
+          border: 1px solid #1f7eb5;
           .zxm-table-cell {
             border: none !important;
-            background: none !important;
-            padding: 0px;
-          }
-          tr {
-            background: var(--image-rank) no-repeat !important;
-            background-size: 100% 100% !important;
+            color: #37e0eb !important;
           }
         }
-      }
-      .item-3 {
-        height: 40%;
-        padding-bottom: 0;
-        :deep(table) {
-          border-collapse: collapse !important;
-          // border-spacing: 0 10px !important;
-          .zxm-table-thead {
-            height: 35px;
-            background-color: #0b2542 !important;
-            border: 1px solid #1f7eb5;
-            .zxm-table-cell {
-              border: none !important;
-              color: #37e0eb !important;
-            }
+        .zxm-table-tbody {
+          .zxm-table-row:nth-child(odd) {
+            background-color: #0e3455;
           }
-          .zxm-table-tbody {
-            .zxm-table-row:nth-child(odd) {
-              background-color: #0e3455;
-            }
 
-            /* 偶数行背景色 */
-            .zxm-table-row:nth-child(even) {
-              background-color: #114268 !important;
-            }
-            .zxm-table-cell {
-              border: none !important;
-              background: none !important;
-            }
+          /* 偶数行背景色 */
+          .zxm-table-row:nth-child(even) {
+            background-color: #114268 !important;
+          }
+          .zxm-table-cell {
+            border: none !important;
+            background: none !important;
           }
         }
-        .box-container {
-          overflow: hidden;
-        }
-      }
-      .infoBox1 {
-        background-color: var(--image-border1) no-repeat;
-      }
-      .infoBox2 {
-        background-color: var(--image-border2) no-repeat;
       }
-      .infoBox3 {
-        background-color: var(--image-border3) no-repeat;
-      }
-      .infoBox4 {
-        background-color: var(--image-border4) no-repeat;
+      .box-container {
+        overflow: hidden;
       }
     }
-    .wrapper-1 {
-      grid-template-columns: repeat(5, 1fr);
-      .data-item {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        &::after {
-          position: absolute;
-          right: 1px;
-          top: 5px;
-          display: block;
-          width: 2px;
-          height: 100%;
-          background: var(--image-split-line);
-          content: '';
-        }
-        &:last-child::after {
-          display: none;
-        }
-        .value {
-          font-family: 'douyuFont';
-          color: #66ffff;
-          margin-top: 20px;
-        }
-        .item-icon {
-          width: 80px;
-          height: 80px;
-          background-size: 100% 100%;
-          margin-right: 15px;
-        }
-        .icon1 {
-          background-image: url('/@/assets/images/dataCenter/infoCenter/icon1.png');
-        }
-        .icon2 {
-          background-image: url('/@/assets/images/dataCenter/infoCenter/icon2.png');
-        }
-        .icon3 {
-          background-image: url('/@/assets/images/dataCenter/infoCenter/icon3.png');
-        }
-        .icon4 {
-          background-image: url('/@/assets/images/dataCenter/infoCenter/icon4.png');
-        }
-        .icon5 {
-          background-image: url('/@/assets/images/dataCenter/infoCenter/icon5.png');
-        }
-      }
+    .infoBox1 {
+      background-color: var(--image-border1) no-repeat;
     }
-    .option-cont {
+    .infoBox2 {
+      background-color: var(--image-border2) no-repeat;
+    }
+    .infoBox3 {
+      background-color: var(--image-border3) no-repeat;
+    }
+    .infoBox4 {
+      background-color: var(--image-border4) no-repeat;
+    }
+  }
+  .wrapper-1 {
+    grid-template-columns: repeat(5, 1fr);
+    .data-item {
       display: flex;
-      justify-content: center;
       align-items: center;
-      .view-icon {
-        width: 20px;
-        height: 20px;
-        background-image: url('/@/assets/images/dataCenter/infoCenter/view-icon.png');
-        background-repeat: no-repeat;
-        background-size: contain;
-        background-position: center;
+      justify-content: center;
+      position: relative;
+      &::after {
+        position: absolute;
+        right: 1px;
+        top: 5px;
+        display: block;
+        width: 2px;
+        height: 100%;
+        background: var(--image-split-line);
+        content: '';
+      }
+      &:last-child::after {
+        display: none;
+      }
+      .value {
+        font-family: 'douyuFont';
+        color: #66ffff;
+        margin-top: 20px;
       }
+      .item-icon {
+        width: 80px;
+        height: 80px;
+        background-size: 100% 100%;
+        margin-right: 15px;
+      }
+      .icon1 {
+        background-image: url('/@/assets/images/dataCenter/infoCenter/icon1.png');
+      }
+      .icon2 {
+        background-image: url('/@/assets/images/dataCenter/infoCenter/icon2.png');
+      }
+      .icon3 {
+        background-image: url('/@/assets/images/dataCenter/infoCenter/icon3.png');
+      }
+      .icon4 {
+        background-image: url('/@/assets/images/dataCenter/infoCenter/icon4.png');
+      }
+      .icon5 {
+        background-image: url('/@/assets/images/dataCenter/infoCenter/icon5.png');
+      }
+    }
+  }
+  .option-cont {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .view-icon {
+      width: 20px;
+      height: 20px;
+      background-image: url('/@/assets/images/dataCenter/infoCenter/view-icon.png');
+      background-repeat: no-repeat;
+      background-size: contain;
+      background-position: center;
     }
   }
+}
 </style>

src/views/vent/dataCenter/stationCenter/index.vue

@@ -384,6 +384,8 @@ onUnmounted(() => {
           box-sizing: border-box;
           background: url('/@/assets/images/fire/bj1.png') no-repeat center;
           background-size: 100% 100%;
+          border: 3px, solid, #0b69b6;
+          border-radius: 5px;
           .left-content {
             display: flex;
             justify-content: flex-start;
@@ -483,7 +485,8 @@ onUnmounted(() => {
           box-sizing: border-box;
           background: url('/@/assets/images/fire/bj1.png') no-repeat center;
           background-size: 100% 100%;
-
+          border: 3px, solid, #0b69b6;
+          border-radius: 5px;
           .right-title {
             display: flex;
             height: 30px;