[Feat 0000]数据中心-设备、分站管理静态页面

src/views/vent/dataCenter/deviceCenter/device.api.ts

@@ -0,0 +1,67 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/monitor/device',
+  baseList = '/safety/ventanalyDeviceInfo/list',
+  // deviceTypeList = '/safety/ventanalyDeviceInfo/DeviceKind/query',
+  // deviceTypeList = '/sys/dict/DeviceKind/queryBySystem',
+  deviceTypeList = '/safety/ventanalyDeviceInfo/DeviceKind/queryBySystem',
+  itemList = '/sys/dictItem/list',
+  devPosition = '/sys/dict/getDictItems/devPosVisible',
+  getDepartmentInfo = '/monitor/getDepartmentInfo',
+  listdays = '/safety/ventanalyMonitorData/listdays',
+  getHistoryData = '/monitor/history/getHistoryData',
+  safetyDeviceList = '/monitor/codeDict',
+  exportXlsUrl = '/monitor/exportXls',
+  queryNowGasInsInfo = '/safety/gasDayReport/queryNowGasInsInfo', //查询当前各班瓦斯巡检信息
+  queryNowGasSta = '/safety/gasDayReport/queryNowGasSta',
+  queryReportData = '/safety/reportLocalData/queryReportData', //查询瓦斯日报列表
+  getDeviceListBySubId = '/safety/ventanalyDeviceInfo/getDeviceListBySubId', //查询分站
+  getDeviceHistoryData = '/safety/ventanalyMonitorData/getRealHistoryData', //查询设备历史数据
+  getRegulation = '/monitor/getDeviceRegulation',
+}
+//分站全部列表
+export const getListAll = () => defHttp.post({ url: Api.getDeviceListBySubId });
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.post({ url: Api.list, params });
+
+/**
+ * 保存或者更新用户
+ * @param params
+ */
+export const getDeviceList = (params) => defHttp.get({ url: Api.baseList, params });
+
+export const getDeviceTypeList = (params) => defHttp.get({ url: Api.deviceTypeList, params });
+
+export const itemList = (params) => defHttp.get({ url: Api.itemList, params });
+export const devPosition = (params) => defHttp.get({ url: Api.devPosition, params });
+
+export const getDepartmentInfo = (params) => defHttp.get({ url: Api.getDepartmentInfo, params });
+
+export const listdays = (params) => defHttp.get({ url: Api.listdays, params });
+export const getHistoryData = (params) => defHttp.post({ url: Api.getHistoryData, params });
+export const safetyDeviceList = (params) => defHttp.post({ url: Api.safetyDeviceList, params });
+export const queryNowGasInsInfo = (params) => defHttp.post({ url: Api.queryNowGasInsInfo, params });
+
+export const getExportUrl = Api.exportXlsUrl;
+/**
+ * 列表接口
+ * @param params
+ */
+export const queryNowGasSta = (params) => defHttp.post({ url: Api.queryNowGasSta, params });
+/**
+ * 瓦斯日报列表
+ * @param params
+ */
+export const queryReportData = (params) => defHttp.post({ url: Api.queryReportData, params });
+
+/**
+ * 设备历史数据接口
+ * @param params
+ */
+export const getDeviceHistoryData = (params) => defHttp.post({ url: Api.getDeviceHistoryData, data: params });
+
+export const getRegulation = (params) => defHttp.post({ url: Api.getRegulation, params });

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

@@ -0,0 +1,677 @@
+<template>
+  <div class="safetyList">
+    <customHeader>数据中心-设备管理</customHeader>
+    <div class="content">
+      <a-tabs class="tab-box" v-model:activeKey="activeKey" @change="onChangeTab">
+        <a-tab-pane tab="设备监测" key="device" />
+      </a-tabs>
+      <div class="box-content">
+        <!-- 分站监测 -->
+        <div class="now-content">
+          <div class="left-box">
+            <div class="device-select">
+              <div class="device-select-box">
+                <a-tree
+                  :show-line="true"
+                  :tree-data="treeData"
+                  v-model:selectedKeys="selectedKeys"
+                  :autoExpandParent="true"
+                  v-model:expandedKeys="expandedKeys"
+                  @select="onSelect"
+                >
+                </a-tree>
+              </div>
+            </div>
+          </div>
+          <div class="right-box">
+            <div class="right-title">详细信息：</div>
+            <a-table
+              size="small"
+              :scroll="{ y: 680 }"
+              :columns="outerColumns"
+              :data-source="deviceList"
+              :pagination="pagination"
+              :row-key="(record) => record.id"
+              :expand-row-by-click="true"
+              :expanded-row-keys="expandedRowKeys"
+              @expand="onExpand"
+            >
+              <!-- 自定义展开图标 -->
+              <template #expandIcon="{ expanded, onExpand, record }">
+                <a-button
+                  type="text"
+                  size="small"
+                  @click="
+                    (e) => {
+                      e.stopPropagation();
+                      toggleExpand(record.id);
+                    }
+                  "
+                >
+                  <DownOutlined v-if="expandedRowKeys.includes(record.id)" />
+                  <RightOutlined v-else />
+                </a-button>
+              </template>
+
+              <!-- 嵌套表格 -->
+              <template #expandedRowRender="{ record }">
+                <a-table
+                  size="small"
+                  :columns="innerColumns"
+                  :data-source="record.monitoringFields"
+                  :pagination="false"
+                  :loading="loadingMap[record.id]"
+                  bordered
+                >
+                  <template #bodyCell="{ column, record: innerRecord }">
+                    <template v-if="column.dataIndex === 'value'">
+                      <span :class="getValueClass(innerRecord.value)">
+                        {{ innerRecord.value }}
+                      </span>
+                    </template>
+                  </template>
+                </a-table>
+              </template>
+            </a-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, reactive, onMounted, onUnmounted, inject } from 'vue';
+import { usePermission } from '/@/hooks/web/usePermission';
+import customHeader from '/@/components/vent/customHeader.vue';
+import { AesEncryption } from '/@/utils/cipher';
+import { loginCipher } from '/@/settings/encryptionSetting';
+import { message, TreeProps } from 'ant-design-vue';
+import { list, getDeviceList, getDeviceTypeList, devPosition, getDepartmentInfo, getExportUrl, getRegulation } from './device.api';
+import { DownOutlined, RightOutlined } from '@ant-design/icons-vue';
+
+const { hasPermission } = usePermission();
+let activeKey = ref('device');
+const treeData = ref<TreeProps['treeData']>([]);
+const selectedKeys = ref<string[]>([]);
+const expandedKeys = ref<string[]>([]);
+const systemID = ref(''); // 系统监测时，系统id
+//树形菜单选择事件
+const onSelect: TreeProps['onSelect'] = (keys, e) => {};
+// 获取树形菜单数据
+async function getDeviceType(sysType?) {
+  if (treeData.value?.length > 0) return;
+  const result = await getDeviceTypeList({});
+  if (result.length > 0) {
+    const dataSource = <TreeProps['treeData']>[];
+    let key = '0';
+    const getData = (resultList, dataSourceList, keyVal) => {
+      resultList.forEach((item, index) => {
+        if (item.deviceType != 'sys' && item.children && item.children.length > 0) {
+          const children = getData(item.children, [], `${keyVal}-${index}`);
+          // 判断关键阻力路线
+          if (item.itemValue.startsWith(sysType) && children[0]) {
+            systemID.value = item.children[0]['itemValue'];
+          }
+
+          dataSourceList.push({
+            children: children,
+            title: item.itemText,
+            key: `${keyVal}-${index}`,
+            type: item.itemValue,
+            parentKey: `${keyVal}`,
+          });
+        } else {
+          dataSourceList.push({
+            children: [],
+            title: item.itemText,
+            key: `${keyVal}-${index}`,
+            type: item.itemValue,
+            parentKey: `${keyVal}`,
+          });
+        }
+      });
+      return dataSourceList;
+    };
+    treeData.value = getData(result, dataSource, key);
+  }
+}
+// 设备数据结构
+const deviceList = ref([
+  {
+    id: 'D001',
+    name: '模拟设备1',
+    status: '在线',
+    monitoringFields: [], // 初始为空，点击时加载
+  },
+  {
+    id: 'D002',
+    name: '模拟设备2',
+    status: '离线',
+    monitoringFields: [],
+  },
+  {
+    id: 'D003',
+    name: '模拟设备3',
+    status: '在线',
+    monitoringFields: [],
+  },
+]);
+
+// 当前展开的行key数组
+const expandedRowKeys = ref([]);
+
+// 加载状态映射
+const loadingMap = reactive({});
+
+// 外层表格列配置
+const outerColumns = [
+  {
+    title: '设备ID',
+    dataIndex: 'id',
+    key: 'id',
+  },
+  {
+    title: '设备名称',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    customRender: ({ text }) => {
+      text = '在线';
+      return `${text}`;
+    },
+  },
+];
+
+// 内层表格列配置
+const innerColumns = [
+  {
+    title: '监测字段',
+    dataIndex: 'field',
+    key: 'field',
+    width: '40%',
+  },
+  {
+    title: '当前值',
+    dataIndex: 'value',
+    key: 'value',
+    width: '30%',
+  },
+  {
+    title: '单位',
+    dataIndex: 'unit',
+    key: 'unit',
+    width: '30%',
+  },
+];
+
+// 分页配置
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 3,
+  showSizeChanger: true,
+  pageSizeOptions: ['10', '20', '50'],
+});
+
+// 切换展开状态
+const toggleExpand = (deviceId) => {
+  const index = expandedRowKeys.value.indexOf(deviceId);
+
+  if (index > -1) {
+    // 如果已经展开，则关闭
+    expandedRowKeys.value.splice(index, 1);
+  } else {
+    // 如果未展开，则打开
+    expandedRowKeys.value.push(deviceId);
+    loadMonitoringData(deviceId);
+  }
+};
+// 加载监测数据
+const loadMonitoringData = async (deviceId) => {
+  const device = deviceList.value.find((d) => d.id === deviceId);
+
+  if (device && device.monitoringFields.length === 0) {
+    loadingMap[deviceId] = true;
+    try {
+      // 模拟API请求
+      await new Promise((resolve) => setTimeout(resolve, 800));
+      // 根据设备ID加载对应数据
+      device.monitoringFields = mockFetchMonitoringData(deviceId);
+    } catch (error) {
+      console.error(`加载设备 ${deviceId} 数据失败:`, error);
+    } finally {
+      loadingMap[deviceId] = false;
+    }
+  }
+};
+
+// 值样式分类
+const getValueClass = (value) => {
+  if (value > 30) return 'high-value';
+  if (value < 10) return 'low-value';
+  return 'normal-value';
+};
+
+// 模拟API获取监测数据
+const mockFetchMonitoringData = (deviceId) => {
+  const dataMap = {
+    D001: [
+      { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
+      { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
+    ],
+    D002: [
+      { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
+      { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
+    ],
+    D003: [
+      { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
+      { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
+    ],
+  };
+  return dataMap[deviceId] || [];
+};
+onMounted(async () => {
+  getDeviceType();
+});
+onUnmounted(() => {});
+</script>
+
+<style lang="less" scoped>
+.safetyList {
+  width: calc(100% - 20px);
+  height: calc(100% - 80px);
+  position: relative;
+  margin: 70px 10px 10px 10px;
+
+  .content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .tab-box {
+      display: flex;
+      color: #fff;
+      position: relative;
+      background: linear-gradient(#001325, #012e4f);
+
+      :deep(.zxm-tabs-nav) {
+        margin: 0 !important;
+
+        .zxm-tabs-tab {
+          width: 180px;
+          height: 45px;
+          background: url('/@/assets/images/top-btn.png') center no-repeat;
+          background-size: cover;
+          display: flex;
+          justify-content: center;
+          font-size: 16px;
+        }
+
+        .zxm-tabs-tab-active {
+          width: 180px;
+          position: relative;
+          background: url('/@/assets/images/top-btn-select.png') center no-repeat;
+          background-size: cover;
+
+          .zxm-tabs-tab-btn {
+            color: #fff !important;
+          }
+        }
+
+        .zxm-tabs-ink-bar {
+          width: 0 !important;
+        }
+
+        .zxm-tabs-tab + .zxm-tabs-tab {
+          margin: 0 !important;
+        }
+      }
+    }
+
+    .box-content {
+      height: calc(100% - 50px);
+      padding-top: 10px;
+      box-sizing: border-box;
+
+      .now-content {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .left-box {
+          width: 25%;
+          height: 100%;
+          margin-right: 15px;
+          padding: 10px;
+          box-sizing: border-box;
+          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
+          background-size: 100% 100%;
+        }
+
+        .right-box {
+          width: calc(75% - 15px);
+          height: 100%;
+          padding: 10px;
+          box-sizing: border-box;
+          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
+          background-size: 100% 100%;
+
+          .right-title {
+            display: flex;
+            height: 30px;
+            align-items: center;
+            font-size: 14px;
+            color: #fff;
+            margin-bottom: 10px;
+          }
+        }
+      }
+
+      .detail-content {
+        width: 100%;
+        height: 100%;
+      }
+
+      .history-content {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: url('/@/assets/images/fire/bj1.png') no-repeat center;
+        background-size: 100% 100%;
+        color: #fff;
+
+        .left-box {
+          width: 40%;
+          height: 100%;
+          margin-right: 15px;
+          padding: 10px;
+          box-sizing: border-box;
+          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
+          background-size: 100% 100%;
+
+          .left-title {
+            display: flex;
+            height: 30px;
+            align-items: center;
+            font-size: 14px;
+            margin-bottom: 10px;
+
+            span {
+              color: #fff;
+            }
+
+            .zd-open {
+              color: rgb(0, 242, 255);
+            }
+
+            .zd-close {
+              color: #ff0000;
+            }
+
+            .title-fz {
+              margin-right: 25px;
+            }
+          }
+
+          .left-content {
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            flex-wrap: wrap;
+            height: calc(100% - 40px);
+            overflow-y: auto;
+
+            .card-box {
+              position: relative;
+              // width: 242px;
+              width: 182px;
+              height: 120px;
+              margin-bottom: 15px;
+              display: flex;
+              justify-content: center;
+
+              .card-itemN {
+                position: relative;
+                width: 85px;
+                height: 120px;
+                background: url('/@/assets/images/zd-2.png') no-repeat center;
+                background-size: 100% 100%;
+                cursor: pointer;
+
+                .card-item-label {
+                  width: 100%;
+                  position: absolute;
+                  bottom: 5px;
+                  font-size: 12px;
+                  color: #fff;
+                  text-align: center;
+                }
+              }
+
+              .card-itemL {
+                position: relative;
+                width: 85px;
+                height: 120px;
+                background: url('/@/assets/images/zd-3.png') no-repeat center;
+                background-size: 100% 100%;
+                cursor: pointer;
+
+                .card-item-label {
+                  width: 100%;
+                  position: absolute;
+                  bottom: 5px;
+                  font-size: 12px;
+                  color: #fff;
+                  text-align: center;
+                }
+              }
+
+              .card-itemD {
+                position: relative;
+                width: 85px;
+                height: 120px;
+                background: url('/@/assets/images/zd-1.png') no-repeat center;
+                background-size: 100% 100%;
+                cursor: pointer;
+
+                .card-item-label {
+                  width: 100%;
+                  position: absolute;
+                  bottom: 5px;
+                  font-size: 12px;
+                  color: #fff;
+                  text-align: center;
+                }
+              }
+
+              .card-modal {
+                width: 86px;
+                position: absolute;
+                left: 140px;
+                color: #fff;
+                top: 50%;
+                transform: translate(0, -50%);
+                font-size: 12px;
+              }
+
+              .card-modal1 {
+                width: 86px;
+                position: absolute;
+                left: -42px;
+                color: #fff;
+                top: 50%;
+                transform: translate(0, -50%);
+                font-size: 12px;
+              }
+            }
+          }
+        }
+
+        .right-box {
+          width: calc(60% - 15px);
+          height: 100%;
+          padding: 10px;
+          box-sizing: border-box;
+          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
+          background-size: 100% 100%;
+
+          .historytable {
+            height: 100%;
+          }
+
+          .right-title {
+            display: flex;
+            height: 30px;
+            align-items: center;
+            font-size: 14px;
+            color: #fff;
+            margin-bottom: 10px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.down-btn {
+  line-height: 15px;
+  height: 20px;
+  padding: 0px 17px;
+  font-size: 12px;
+}
+
+.zxm-form {
+  width: 50%;
+  height: 100%;
+  padding-top: 20px !important;
+  box-sizing: border-box;
+}
+
+.zxm-picker,
+.zxm-input {
+  border: 1px solid #3ad8ff77 !important;
+  background-color: #ffffff !important;
+  color: #fff !important;
+}
+
+.card-item.selected {
+  border: 2px solid #3ad8ff77;
+  /* 选中时的边框颜色 */
+}
+
+::v-deep(.zxm-radio-wrapper) {
+  font-size: 12px;
+}
+
+::v-deep(.zxm-input) {
+  font-size: 12px;
+}
+
+::v-deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+  border: 1px solid #3ad8ff77 !important;
+}
+
+// ::v-deep(.zxm-select-selection-item) {
+//   color: #fff ;
+// }
+
+// ::v-deep(.zxm-form-item-label > label) {
+//   color: #fff !important;
+// }
+/* 值样式 */
+.high-value {
+  color: #f5222d;
+  font-weight: bold;
+}
+.low-value {
+  color: #1890ff;
+  font-weight: bold;
+}
+.normal-value {
+  color: #52c41a;
+}
+
+/* 嵌套表格样式 */
+:deep(.ant-table-expanded-row) > td {
+  background-color: #f9f9f9 !important;
+  padding: 0 !important;
+}
+
+:deep(.ant-table-expanded-row .ant-table) {
+  margin: -10px -8px;
+  background: #f9f9f9;
+}
+
+/* 自定义展开按钮 */
+:deep(.ant-table-row-expand-icon) {
+  margin-right: 8px;
+}
+
+.device-select-box {
+  margin-top: 60px;
+  width: 208px;
+  height: calc(100% - 70px);
+  overflow-y: auto;
+  color: #fff;
+
+  :deep(.zxm-tree) {
+    background: transparent !important;
+    color: #fff !important;
+
+    .zxm-tree-switcher {
+      background: transparent !important;
+    }
+
+    .zxm-tree-node-content-wrapper.zxm-tree-node-selected {
+      background-color: var(--tree-node-select);
+    }
+
+    .zxm-tree-node-content-wrapper:hover {
+      background-color: var(--tree-node-hover);
+    }
+
+    input {
+      height: 0px !important;
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    background: #ededed22;
+    height: 100px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #4288a444;
+  }
+}
+.device-select {
+  width: 250px;
+  height: calc(100% - 70px);
+  background: var(--image-tree-bg) no-repeat;
+  position: fixed;
+  top: 100px;
+  left: 55px;
+  background-size: contain;
+  pointer-events: auto;
+  padding: 20px 10px 30px 10px;
+}
+</style>
+<style>
+div[aria-hidden='true'] {
+  display: none !important;
+}
+</style>

src/views/vent/dataCenter/stationCenter/device.api.ts

@@ -0,0 +1,67 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/monitor/device',
+  baseList = '/safety/ventanalyDeviceInfo/list',
+  // deviceTypeList = '/safety/ventanalyDeviceInfo/DeviceKind/query',
+  // deviceTypeList = '/sys/dict/DeviceKind/queryBySystem',
+  deviceTypeList = '/safety/ventanalyDeviceInfo/DeviceKind/queryBySystem',
+  itemList = '/sys/dictItem/list',
+  devPosition = '/sys/dict/getDictItems/devPosVisible',
+  getDepartmentInfo = '/monitor/getDepartmentInfo',
+  listdays = '/safety/ventanalyMonitorData/listdays',
+  getHistoryData = '/monitor/history/getHistoryData',
+  safetyDeviceList = '/monitor/codeDict',
+  exportXlsUrl = '/monitor/exportXls',
+  queryNowGasInsInfo = '/safety/gasDayReport/queryNowGasInsInfo', //查询当前各班瓦斯巡检信息
+  queryNowGasSta = '/safety/gasDayReport/queryNowGasSta',
+  queryReportData = '/safety/reportLocalData/queryReportData', //查询瓦斯日报列表
+  getDeviceListBySubId = '/safety/ventanalyDeviceInfo/getDeviceListBySubId', //查询分站
+  getDeviceHistoryData = '/safety/ventanalyMonitorData/getRealHistoryData', //查询设备历史数据
+  getRegulation = '/monitor/getDeviceRegulation',
+}
+//分站全部列表
+export const getListAll = () => defHttp.post({ url: Api.getDeviceListBySubId });
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.post({ url: Api.list, params });
+
+/**
+ * 保存或者更新用户
+ * @param params
+ */
+export const getDeviceList = (params) => defHttp.get({ url: Api.baseList, params });
+
+export const getDeviceTypeList = (params) => defHttp.get({ url: Api.deviceTypeList, params });
+
+export const itemList = (params) => defHttp.get({ url: Api.itemList, params });
+export const devPosition = (params) => defHttp.get({ url: Api.devPosition, params });
+
+export const getDepartmentInfo = (params) => defHttp.get({ url: Api.getDepartmentInfo, params });
+
+export const listdays = (params) => defHttp.get({ url: Api.listdays, params });
+export const getHistoryData = (params) => defHttp.post({ url: Api.getHistoryData, params });
+export const safetyDeviceList = (params) => defHttp.post({ url: Api.safetyDeviceList, params });
+export const queryNowGasInsInfo = (params) => defHttp.post({ url: Api.queryNowGasInsInfo, params });
+
+export const getExportUrl = Api.exportXlsUrl;
+/**
+ * 列表接口
+ * @param params
+ */
+export const queryNowGasSta = (params) => defHttp.post({ url: Api.queryNowGasSta, params });
+/**
+ * 瓦斯日报列表
+ * @param params
+ */
+export const queryReportData = (params) => defHttp.post({ url: Api.queryReportData, params });
+
+/**
+ * 设备历史数据接口
+ * @param params
+ */
+export const getDeviceHistoryData = (params) => defHttp.post({ url: Api.getDeviceHistoryData, data: params });
+
+export const getRegulation = (params) => defHttp.post({ url: Api.getRegulation, params });

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

@@ -0,0 +1,652 @@
+<template>
+  <div class="safetyList">
+    <customHeader>数据中心-分站管理</customHeader>
+    <div class="content">
+      <a-tabs class="tab-box" v-model:activeKey="activeKey" @change="onChangeTab">
+        <a-tab-pane tab="分站监测" key="device" />
+      </a-tabs>
+      <div class="box-content">
+        <!-- 分站监测 -->
+        <div class="now-content">
+          <div class="left-box">
+            <div class="left-content">
+              <div class="card-box" v-for="(item, index) in cardList" :key="index">
+                <div :class="item.isNewAccess ? 'card-itemN' : item.linkstatus ? 'card-itemL' : 'card-itemD'" @click="cardClick(item, index)">
+                  <div class="card-item-label">{{ item.strname }}</div>
+                </div>
+                <div :class="activeIndex % 4 == 3 ? 'card-modal1' : 'card-modal'" v-if="activeIndex == index && isShow">
+                  <div class="modal-name">站点名称：</div>
+                  <a-input v-model:value="stationName" size="small" placeholder="请输入" @blur="changeName" />
+                  <div class="modal-lj">连接状态：</div>
+                  <a-radio-group v-model:value="stationStatus" size="small" :options="ljList" @change="changeStatus" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="right-box">
+            <div class="right-title">详细信息：</div>
+            <a-table
+              size="small"
+              :scroll="{ y: 680 }"
+              :columns="outerColumns"
+              :data-source="deviceList"
+              :pagination="pagination"
+              :row-key="(record) => record.id"
+              :expand-row-by-click="true"
+              :expanded-row-keys="expandedRowKeys"
+              @expand="onExpand"
+            >
+              <!-- 自定义展开图标 -->
+              <template #expandIcon="{ expanded, onExpand, record }">
+                <a-button
+                  type="text"
+                  size="small"
+                  @click="
+                    (e) => {
+                      e.stopPropagation();
+                      toggleExpand(record.id);
+                    }
+                  "
+                >
+                  <DownOutlined v-if="expandedRowKeys.includes(record.id)" />
+                  <RightOutlined v-else />
+                </a-button>
+              </template>
+
+              <!-- 嵌套表格 -->
+              <template #expandedRowRender="{ record }">
+                <a-table
+                  size="small"
+                  :columns="innerColumns"
+                  :data-source="record.monitoringFields"
+                  :pagination="false"
+                  :loading="loadingMap[record.id]"
+                  bordered
+                >
+                  <template #bodyCell="{ column, record: innerRecord }">
+                    <template v-if="column.dataIndex === 'value'">
+                      <span :class="getValueClass(innerRecord.value)">
+                        {{ innerRecord.value }}
+                      </span>
+                    </template>
+                  </template>
+                </a-table>
+              </template>
+            </a-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, reactive, onMounted, onUnmounted, inject } from 'vue';
+import { usePermission } from '/@/hooks/web/usePermission';
+import customHeader from '/@/components/vent/customHeader.vue';
+import { AesEncryption } from '/@/utils/cipher';
+import { loginCipher } from '/@/settings/encryptionSetting';
+import { message, TreeProps } from 'ant-design-vue';
+import { list, getDeviceList, getDeviceTypeList, devPosition, getDepartmentInfo, getExportUrl, getRegulation } from './device.api';
+import { DownOutlined, RightOutlined } from '@ant-design/icons-vue';
+
+const { hasPermission } = usePermission();
+let activeKey = ref('device');
+const treeData = ref<TreeProps['treeData']>([]);
+const selectedKeys = ref<string[]>([]);
+const expandedKeys = ref<string[]>([]);
+const systemID = ref(''); // 系统监测时，系统id
+//树形菜单选择事件
+const onSelect: TreeProps['onSelect'] = (keys, e) => {};
+// 获取树形菜单数据
+async function getDeviceType(sysType?) {
+  if (treeData.value?.length > 0) return;
+  const result = await getDeviceTypeList({});
+  if (result.length > 0) {
+    const dataSource = <TreeProps['treeData']>[];
+    let key = '0';
+    const getData = (resultList, dataSourceList, keyVal) => {
+      resultList.forEach((item, index) => {
+        if (item.deviceType != 'sys' && item.children && item.children.length > 0) {
+          const children = getData(item.children, [], `${keyVal}-${index}`);
+          // 判断关键阻力路线
+          if (item.itemValue.startsWith(sysType) && children[0]) {
+            systemID.value = item.children[0]['itemValue'];
+          }
+
+          dataSourceList.push({
+            children: children,
+            title: item.itemText,
+            key: `${keyVal}-${index}`,
+            type: item.itemValue,
+            parentKey: `${keyVal}`,
+          });
+        } else {
+          dataSourceList.push({
+            children: [],
+            title: item.itemText,
+            key: `${keyVal}-${index}`,
+            type: item.itemValue,
+            parentKey: `${keyVal}`,
+          });
+        }
+      });
+      return dataSourceList;
+    };
+    treeData.value = getData(result, dataSource, key);
+  }
+}
+// 设备数据结构
+const deviceList = ref([
+  {
+    id: 'D001',
+    name: '模拟设备1',
+    status: '在线',
+    monitoringFields: [], // 初始为空，点击时加载
+  },
+  {
+    id: 'D002',
+    name: '模拟设备2',
+    status: '离线',
+    monitoringFields: [],
+  },
+  {
+    id: 'D003',
+    name: '模拟设备3',
+    status: '在线',
+    monitoringFields: [],
+  },
+]);
+
+// 当前展开的行key数组
+const expandedRowKeys = ref([]);
+
+// 加载状态映射
+const loadingMap = reactive({});
+
+// 外层表格列配置
+const outerColumns = [
+  {
+    title: '设备ID',
+    dataIndex: 'id',
+    key: 'id',
+  },
+  {
+    title: '设备名称',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    customRender: ({ text }) => {
+      text = '在线';
+      return `${text}`;
+    },
+  },
+];
+
+// 内层表格列配置
+const innerColumns = [
+  {
+    title: '监测字段',
+    dataIndex: 'field',
+    key: 'field',
+    width: '40%',
+  },
+  {
+    title: '当前值',
+    dataIndex: 'value',
+    key: 'value',
+    width: '30%',
+  },
+  {
+    title: '单位',
+    dataIndex: 'unit',
+    key: 'unit',
+    width: '30%',
+  },
+];
+
+// 分页配置
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 3,
+  showSizeChanger: true,
+  pageSizeOptions: ['10', '20', '50'],
+});
+
+// 切换展开状态
+const toggleExpand = (deviceId) => {
+  const index = expandedRowKeys.value.indexOf(deviceId);
+
+  if (index > -1) {
+    // 如果已经展开，则关闭
+    expandedRowKeys.value.splice(index, 1);
+  } else {
+    // 如果未展开，则打开
+    expandedRowKeys.value.push(deviceId);
+    loadMonitoringData(deviceId);
+  }
+};
+// 加载监测数据
+const loadMonitoringData = async (deviceId) => {
+  const device = deviceList.value.find((d) => d.id === deviceId);
+
+  if (device && device.monitoringFields.length === 0) {
+    loadingMap[deviceId] = true;
+    try {
+      // 模拟API请求
+      await new Promise((resolve) => setTimeout(resolve, 800));
+      // 根据设备ID加载对应数据
+      device.monitoringFields = mockFetchMonitoringData(deviceId);
+    } catch (error) {
+      console.error(`加载设备 ${deviceId} 数据失败:`, error);
+    } finally {
+      loadingMap[deviceId] = false;
+    }
+  }
+};
+
+// 值样式分类
+const getValueClass = (value) => {
+  if (value > 30) return 'high-value';
+  if (value < 10) return 'low-value';
+  return 'normal-value';
+};
+
+// 模拟API获取监测数据
+const mockFetchMonitoringData = (deviceId) => {
+  const dataMap = {
+    D001: [
+      { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
+      { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
+    ],
+    D002: [
+      { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
+      { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
+    ],
+    D003: [
+      { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
+      { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
+    ],
+  };
+  return dataMap[deviceId] || [];
+};
+onMounted(async () => {
+  getDeviceType();
+});
+onUnmounted(() => {});
+</script>
+
+<style lang="less" scoped>
+.safetyList {
+  width: calc(100% - 20px);
+  height: calc(100% - 80px);
+  position: relative;
+  margin: 70px 10px 10px 10px;
+
+  .content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .tab-box {
+      display: flex;
+      color: #fff;
+      position: relative;
+      background: linear-gradient(#001325, #012e4f);
+
+      :deep(.zxm-tabs-nav) {
+        margin: 0 !important;
+
+        .zxm-tabs-tab {
+          width: 180px;
+          height: 45px;
+          background: url('/@/assets/images/top-btn.png') center no-repeat;
+          background-size: cover;
+          display: flex;
+          justify-content: center;
+          font-size: 16px;
+        }
+
+        .zxm-tabs-tab-active {
+          width: 180px;
+          position: relative;
+          background: url('/@/assets/images/top-btn-select.png') center no-repeat;
+          background-size: cover;
+
+          .zxm-tabs-tab-btn {
+            color: #fff !important;
+          }
+        }
+
+        .zxm-tabs-ink-bar {
+          width: 0 !important;
+        }
+
+        .zxm-tabs-tab + .zxm-tabs-tab {
+          margin: 0 !important;
+        }
+      }
+    }
+
+    .box-content {
+      height: calc(100% - 50px);
+      padding-top: 10px;
+      box-sizing: border-box;
+      .now-content {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .left-box {
+          width: 30%;
+          height: 100%;
+          margin-right: 15px;
+          padding: 10px;
+          box-sizing: border-box;
+          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
+          background-size: 100% 100%;
+        }
+
+        .right-box {
+          width: calc(70% - 15px);
+          height: 100%;
+          padding: 10px;
+          box-sizing: border-box;
+          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
+          background-size: 100% 100%;
+
+          .right-title {
+            display: flex;
+            height: 30px;
+            align-items: center;
+            font-size: 14px;
+            color: #fff;
+            margin-bottom: 10px;
+          }
+        }
+      }
+
+      .detail-content {
+        width: 100%;
+        height: 100%;
+      }
+
+      .history-content {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: url('/@/assets/images/fire/bj1.png') no-repeat center;
+        background-size: 100% 100%;
+        color: #fff;
+
+        .left-box {
+          width: 40%;
+          height: 100%;
+          margin-right: 15px;
+          padding: 10px;
+          box-sizing: border-box;
+          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
+          background-size: 100% 100%;
+
+          .left-content {
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            flex-wrap: wrap;
+            height: calc(100% - 40px);
+            overflow-y: auto;
+
+            .card-box {
+              position: relative;
+              // width: 242px;
+              width: 182px;
+              height: 120px;
+              margin-bottom: 15px;
+              display: flex;
+              justify-content: center;
+
+              .card-itemN {
+                position: relative;
+                width: 85px;
+                height: 120px;
+                background: url('/@/assets/images/zd-2.png') no-repeat center;
+                background-size: 100% 100%;
+                cursor: pointer;
+
+                .card-item-label {
+                  width: 100%;
+                  position: absolute;
+                  bottom: 5px;
+                  font-size: 12px;
+                  color: #fff;
+                  text-align: center;
+                }
+              }
+
+              .card-itemL {
+                position: relative;
+                width: 85px;
+                height: 120px;
+                background: url('/@/assets/images/zd-3.png') no-repeat center;
+                background-size: 100% 100%;
+                cursor: pointer;
+
+                .card-item-label {
+                  width: 100%;
+                  position: absolute;
+                  bottom: 5px;
+                  font-size: 12px;
+                  color: #fff;
+                  text-align: center;
+                }
+              }
+
+              .card-itemD {
+                position: relative;
+                width: 85px;
+                height: 120px;
+                background: url('/@/assets/images/zd-1.png') no-repeat center;
+                background-size: 100% 100%;
+                cursor: pointer;
+
+                .card-item-label {
+                  width: 100%;
+                  position: absolute;
+                  bottom: 5px;
+                  font-size: 12px;
+                  color: #fff;
+                  text-align: center;
+                }
+              }
+
+              .card-modal {
+                width: 86px;
+                position: absolute;
+                left: 140px;
+                color: #fff;
+                top: 50%;
+                transform: translate(0, -50%);
+                font-size: 12px;
+              }
+
+              .card-modal1 {
+                width: 86px;
+                position: absolute;
+                left: -42px;
+                color: #fff;
+                top: 50%;
+                transform: translate(0, -50%);
+                font-size: 12px;
+              }
+            }
+          }
+        }
+
+        .right-box {
+          width: calc(60% - 15px);
+          height: 100%;
+          padding: 10px;
+          box-sizing: border-box;
+          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
+          background-size: 100% 100%;
+
+          .historytable {
+            height: 100%;
+          }
+
+          .right-title {
+            display: flex;
+            height: 30px;
+            align-items: center;
+            font-size: 14px;
+            color: #fff;
+            margin-bottom: 10px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.down-btn {
+  line-height: 15px;
+  height: 20px;
+  padding: 0px 17px;
+  font-size: 12px;
+}
+
+.zxm-form {
+  width: 50%;
+  height: 100%;
+  padding-top: 20px !important;
+  box-sizing: border-box;
+}
+
+.zxm-picker,
+.zxm-input {
+  border: 1px solid #3ad8ff77 !important;
+  background-color: #ffffff !important;
+  color: #fff !important;
+}
+
+.card-item.selected {
+  border: 2px solid #3ad8ff77;
+  /* 选中时的边框颜色 */
+}
+
+::v-deep(.zxm-radio-wrapper) {
+  font-size: 12px;
+}
+
+::v-deep(.zxm-input) {
+  font-size: 12px;
+}
+
+::v-deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+  border: 1px solid #3ad8ff77 !important;
+}
+
+// ::v-deep(.zxm-select-selection-item) {
+//   color: #fff ;
+// }
+
+// ::v-deep(.zxm-form-item-label > label) {
+//   color: #fff !important;
+// }
+/* 值样式 */
+.high-value {
+  color: #f5222d;
+  font-weight: bold;
+}
+.low-value {
+  color: #1890ff;
+  font-weight: bold;
+}
+.normal-value {
+  color: #52c41a;
+}
+
+/* 嵌套表格样式 */
+:deep(.ant-table-expanded-row) > td {
+  background-color: #f9f9f9 !important;
+  padding: 0 !important;
+}
+
+:deep(.ant-table-expanded-row .ant-table) {
+  margin: -10px -8px;
+  background: #f9f9f9;
+}
+
+/* 自定义展开按钮 */
+:deep(.ant-table-row-expand-icon) {
+  margin-right: 8px;
+}
+
+.device-select-box {
+  margin-top: 60px;
+  width: 208px;
+  height: calc(100% - 70px);
+  overflow-y: auto;
+  color: #fff;
+
+  :deep(.zxm-tree) {
+    background: transparent !important;
+    color: #fff !important;
+
+    .zxm-tree-switcher {
+      background: transparent !important;
+    }
+
+    .zxm-tree-node-content-wrapper.zxm-tree-node-selected {
+      background-color: var(--tree-node-select);
+    }
+
+    .zxm-tree-node-content-wrapper:hover {
+      background-color: var(--tree-node-hover);
+    }
+
+    input {
+      height: 0px !important;
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    background: #ededed22;
+    height: 100px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #4288a444;
+  }
+}
+.device-select {
+  width: 250px;
+  height: calc(100% - 70px);
+  background: var(--image-tree-bg) no-repeat;
+  position: fixed;
+  top: 100px;
+  left: 55px;
+  background-size: contain;
+  pointer-events: auto;
+  padding: 20px 10px 30px 10px;
+}
+</style>
+<style>
+div[aria-hidden='true'] {
+  display: none !important;
+}
+</style>