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>

src/views/vent/home/configurable/components/ModuleCommon.vue

@@ -11,98 +11,104 @@
       <template #container>
         <slot>
           <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
-          <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
+          <Content
+            :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }"
+            :moduleData="moduleData"
+            :data="selectedData"
+            :chartData="chartData"
+          />
         </slot>
       </template>
     </ventBox1>
   </Transition>
 </template>
 <script lang="ts" setup>
-  import Header from './header.vue';
-  import Content from './content.vue';
-  // import ModuleLeft from './original/moduleLeft.vue';
-  // import ModuleBottom from './original/moduleBottom.vue';
-  import { computed, ref } from 'vue';
-  import ventBox1 from '/@/components/vent/ventBox1.vue';
-  import { openWindow } from '/@/utils';
-  import { getFormattedText } from '../hooks/helper';
-  // import { ModuleProps } from '../types';
+import Header from './header.vue';
+import Content from './content.vue';
+// import ModuleLeft from './original/moduleLeft.vue';
+// import ModuleBottom from './original/moduleBottom.vue';
+import { computed, ref } from 'vue';
+import ventBox1 from '/@/components/vent/ventBox1.vue';
+import { openWindow } from '/@/utils';
+import { getFormattedText } from '../hooks/helper';
+// import { ModuleProps } from '../types';
 
-  const props = defineProps<{
-    /** 配置的详细模块信息 */
-    moduleData: any;
-    /** 配置的详细样式信息 */
-    showStyle: any;
-    /** 该模块配置中的设备标识符 */
-    deviceType: string;
-    /** api返回的数据 */
-    data: any;
-    moduleName: string;
-    visible: boolean;
-  }>();
-  defineEmits(['close', 'click']);
+const props = defineProps<{
+  /** 配置的详细模块信息 */
+  moduleData: any;
+  /** 配置的详细样式信息 */
+  showStyle: any;
+  /** 该模块配置中的设备标识符 */
+  deviceType: string;
+  /** api返回的数据 */
+  data: any;
+  moduleName: string;
+  visible: boolean;
+  chartData: any;
+}>();
+defineEmits(['close', 'click']);
 
-  const { header } = props.moduleData;
-  const selectedData = ref();
+const { header } = props.moduleData;
+const selectedData = ref();
 
-  const style = computed(() => {
-    const size = props.showStyle.size;
-    const position = props.showStyle.position;
-    return size + position + 'position: absolute; pointer-events: auto; z-index: 1';
-  });
+const style = computed(() => {
+  const size = props.showStyle.size;
+  const position = props.showStyle.position;
+  return size + position + 'position: absolute; pointer-events: auto; z-index: 1';
+});
 
-  const capitalizedPosition = computed(() => {
-    return props.showStyle.position.includes('left') ? 'Left' : 'Right';
-  });
+const capitalizedPosition = computed(() => {
+  return props.showStyle.position.includes('left') ? 'Left' : 'Right';
+});
 
-  // 根据配置里的定位判断应该使用哪个class
-  function getModuleClass({ size, position }) {
-    const [_, width] = size.match(/width:([0-9]+)px/) || [];
-    if (position.includes('bottom') || parseInt(width) > 800) {
-      return 'module-common module-common-longer';
-    }
-    return 'module-common';
+// 根据配置里的定位判断应该使用哪个class
+function getModuleClass({ size, position }) {
+  const [_, width] = size.match(/width:([0-9]+)px/) || [];
+  if (position.includes('bottom') || parseInt(width) > 800) {
+    return 'module-common module-common-longer';
   }
+  return 'module-common';
+}
 
-  function redirectTo() {
-    const { to } = props.moduleData;
-    if (!to) return;
-    openWindow(getFormattedText(selectedData.value, to));
-  }
+function redirectTo() {
+  const { to } = props.moduleData;
+  if (!to) return;
+  openWindow(getFormattedText(selectedData.value, to));
+}
 </script>
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
+@import '/@/design/theme.less';
 
-  .module-common .box1-center {
-    height: calc(100% - 48px);
-  }
+.module-common .box1-center {
+  height: calc(100% - 48px);
+}
 
-  :deep(.box1-center) {
-    height: calc(100% - 48px);
-  }
-  :deep(.box1-center > .box-container) {
-    height: 100%;
-    padding: 0 !important;
-    width: 100% !important;
-  }
-  @{theme-deepblue} {
-    .module-common-longer {
-      :deep(.box1-top) {
-        --image-box1-top: url('/@/assets/images/themify/deepblue/vent/border/box2-top-long.png');
-      }
-      :deep(.box1-bottom) {
-        --image-box1-bottom: none;
-      }
-    }
-  }
+:deep(.box1-center) {
+  height: calc(100% - 48px);
+}
+:deep(.box1-center > .box-container) {
+  height: 100%;
+  padding: 0 !important;
+  width: 100% !important;
+}
+@{theme-deepblue} {
   .module-common-longer {
     :deep(.box1-top) {
-      --image-box1-top: url('/@/assets/images/vent/box-top-bg.png');
-      background-image: var(--image-box1-top);
+      --image-box1-top: url('/@/assets/images/themify/deepblue/vent/border/box2-top-long.png');
     }
     :deep(.box1-bottom) {
-      --image-box1-bottom: url('/@/assets/images/vent/box-bottom-bg.png');
-      background-image: var(--image-box1-bottom);
+      --image-box1-bottom: none;
     }
   }
+}
+.module-common-longer {
+  :deep(.box1-top) {
+    --image-box1-top: url('/@/assets/images/vent/box-top-bg.png');
+    background-image: var(--image-box1-top);
+  }
+  :deep(.box1-bottom) {
+    --image-box1-bottom: url('/@/assets/images/vent/box-bottom-bg.png');
+    background-image: var(--image-box1-bottom);
+  }
+}
 </style>

src/views/vent/home/configurable/components/content.vue

@@ -149,238 +149,240 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed } from 'vue';
-  import {
-    CommonItem,
-    Config,
-    // ModuleDataBoard,
-    // ModuleDataChart,
-    // ModuleDataList,
-    // ModuleDataPreset,
-    // ModuleDataTable,
-  } from '../../../deviceManager/configurationTable/types';
-  import MiniBoard from './detail/MiniBoard.vue';
-  import TimelineList from './detail/TimelineList.vue';
-  import TimelineListNew from './detail/TimelineListNew.vue';
-  import CustomList from './detail/CustomList.vue';
-  import CustomGallery from './detail/CustomGallery.vue';
-  import ComplexList from './detail/ComplexList.vue';
-  import GalleryList from './detail/GalleryList.vue';
-  import CustomTable from './detail/CustomTable.vue';
-  import CustomChart from './detail/CustomChart.vue';
-  import { clone } from 'lodash-es';
-  import { getData, getFormattedText } from '../hooks/helper';
-  import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
-  import QHCurve from './preset/QHCurve.vue';
-  import MeasureDetail from './preset/MeasureDetail.vue';
-  import CustomTabs from './preset/CustomTabs.vue';
-  import AIChat from '/@/components/AIChat/MiniChat.vue';
-  import DeviceAlarm from './preset/DeviceAlarm.vue';
-  import SelectCs from './preset/SelectCs.vue';
-  import MiniBoardNew from './detail/MiniBoard-New.vue';
-  import Partition from './preset/partition.vue';
-  import SelectorDualChart from './preset/selectorDualChart.vue';
-  import RadioLabel from './preset/radioLabel.vue';
-  import ButtonList from './preset/buttonList.vue';
-  // import FIreWarn from './preset/FIreWarn.vue';
-  // import FIreControl from './preset/FIreControl.vue';
+import { computed } from 'vue';
+import {
+  CommonItem,
+  Config,
+  // ModuleDataBoard,
+  // ModuleDataChart,
+  // ModuleDataList,
+  // ModuleDataPreset,
+  // ModuleDataTable,
+} from '../../../deviceManager/configurationTable/types';
+import MiniBoard from './detail/MiniBoard.vue';
+import TimelineList from './detail/TimelineList.vue';
+import TimelineListNew from './detail/TimelineListNew.vue';
+import CustomList from './detail/CustomList.vue';
+import CustomGallery from './detail/CustomGallery.vue';
+import ComplexList from './detail/ComplexList.vue';
+import GalleryList from './detail/GalleryList.vue';
+import CustomTable from './detail/CustomTable.vue';
+import CustomChart from './detail/CustomChart.vue';
+import { clone } from 'lodash-es';
+import { getData, getFormattedText } from '../hooks/helper';
+import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+import QHCurve from './preset/QHCurve.vue';
+import MeasureDetail from './preset/MeasureDetail.vue';
+import CustomTabs from './preset/CustomTabs.vue';
+import AIChat from '/@/components/AIChat/MiniChat.vue';
+import DeviceAlarm from './preset/DeviceAlarm.vue';
+import SelectCs from './preset/SelectCs.vue';
+import MiniBoardNew from './detail/MiniBoard-New.vue';
+import Partition from './preset/partition.vue';
+import SelectorDualChart from './preset/selectorDualChart.vue';
+import RadioLabel from './preset/radioLabel.vue';
+import ButtonList from './preset/buttonList.vue';
+// import FIreWarn from './preset/FIreWarn.vue';
+// import FIreControl from './preset/FIreControl.vue';
 
-  const props = defineProps<{
-    data: any;
-    moduleData: Config['moduleData'];
-  }>();
+const props = defineProps<{
+  data: any;
+  moduleData: Config['moduleData'];
+  chartData: any;
+}>();
 
-  const { background, layout } = props.moduleData;
+const { background, layout } = props.moduleData;
 
-  // 获取当原始配置带 items 项时的最终 items 配置
-  function getItems(raw, items: CommonItem[]) {
-    return items.map((i) => {
+// 获取当原始配置带 items 项时的最终 items 配置
+function getItems(raw, items: CommonItem[]) {
+  return items.map((i) => {
+    return {
+      ...i,
+      label: getFormattedText(raw, i.label, i.trans),
+      value: getFormattedText(raw, i.value, i.trans),
+    };
+  });
+}
+
+// 获取当 List 组件配置带 items 项时的最终 items 配置
+function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
+  if (mapFromData && Array.isArray(raw)) {
+    return raw.map((data) => {
+      const item = items[0];
       return {
-        ...i,
-        label: getFormattedText(raw, i.label, i.trans),
-        value: getFormattedText(raw, i.value, i.trans),
+        ...item,
+        label: getFormattedText(data, item.label, item.trans),
+        value: getFormattedText(data, item.value, item.trans),
       };
     });
   }
+  return getItems(raw, items);
+}
+
+/** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
+const layoutConfig = computed(() => {
+  const refData = props.data;
+  const board = clone(props.moduleData.board) || [];
+  const list = clone(props.moduleData.list) || [];
+  const gallery = clone(props.moduleData.gallery) || [];
+  const complex_list = clone(props.moduleData.complex_list) || [];
+  const gallery_list = clone(props.moduleData.gallery_list) || [];
+  const tabs = clone(props.moduleData.tabs) || [];
+  const chart = clone(props.moduleData.chart) || [];
+  const table = clone(props.moduleData.table) || [];
+  const preset = clone(props.moduleData.preset) || [];
+  const partition = clone(props.moduleData.partition) || [];
+  const mockData = clone(props.chartData) || [];
+  return layout.items.reduce((arr: any[], item) => {
+    switch (item.name) {
+      case 'board': {
+        const cfg = board.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
 
-  // 获取当 List 组件配置带 items 项时的最终 items 配置
-  function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
-    if (mapFromData && Array.isArray(raw)) {
-      return raw.map((data) => {
-        const item = items[0];
-        return {
+        arr.push({
+          overflow: true,
           ...item,
-          label: getFormattedText(data, item.label, item.trans),
-          value: getFormattedText(data, item.value, item.trans),
-        };
-      });
-    }
-    return getItems(raw, items);
-  }
+          ...cfg,
+          items: getItems(data, cfg.items),
+        });
+        break;
+      }
+      case 'list': {
+        const cfg = list.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
 
-  /** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
-  const layoutConfig = computed(() => {
-    const refData = props.data;
-    const board = clone(props.moduleData.board) || [];
-    const list = clone(props.moduleData.list) || [];
-    const gallery = clone(props.moduleData.gallery) || [];
-    const complex_list = clone(props.moduleData.complex_list) || [];
-    const gallery_list = clone(props.moduleData.gallery_list) || [];
-    const tabs = clone(props.moduleData.tabs) || [];
-    const chart = clone(props.moduleData.chart) || [];
-    const table = clone(props.moduleData.table) || [];
-    const preset = clone(props.moduleData.preset) || [];
-    const partition = clone(props.moduleData.partition) || [];
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getListItems(data, cfg.items, cfg.mapFromData),
+        });
+        break;
+      }
+      case 'gallery': {
+        const cfg = gallery.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
 
-    return layout.items.reduce((arr: any[], item) => {
-      switch (item.name) {
-        case 'board': {
-          const cfg = board.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getItems(data, cfg.items),
+        });
+        break;
+      }
+      case 'complex_list': {
+        const cfg = complex_list.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
 
+        if (cfg.mapFromData) {
+          const firstListItem = cfg.items[0];
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: getItems(data, cfg.items),
+            items: (data || []).map((d) => {
+              return {
+                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                contents: firstListItem.contents.map((e) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(d, e.label, e.trans),
+                    value: getFormattedText(d, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
           });
-          break;
-        }
-        case 'list': {
-          const cfg = list.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-
+        } else {
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: getListItems(data, cfg.items, cfg.mapFromData),
+            items: cfg.items.map((i) => {
+              return {
+                title: getFormattedText(data, i.title, i.trans),
+                contents: i.contents.map((e) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(data, e.label, e.trans),
+                    value: getFormattedText(data, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
           });
-          break;
         }
-        case 'gallery': {
-          const cfg = gallery.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
+        break;
+      }
+      case 'gallery_list': {
+        const cfg = gallery_list.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
 
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getItems(data, cfg.items),
+          galleryItems: getItems(data, cfg.galleryItems),
+        });
+        break;
+      }
+      case 'tabs': {
+        const cfg = tabs.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        if (cfg.mapFromData) {
+          const firstListItem = cfg.items[0];
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: getItems(data, cfg.items),
+            items: (data || []).map((d) => {
+              return {
+                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                contents: firstListItem.contents.map((e) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(d, e.label, e.trans),
+                    value: getFormattedText(d, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
           });
-          break;
-        }
-        case 'complex_list': {
-          const cfg = complex_list.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-
-          if (cfg.mapFromData) {
-            const firstListItem = cfg.items[0];
-            arr.push({
-              overflow: true,
-              ...item,
-              ...cfg,
-              items: (data || []).map((d) => {
-                return {
-                  title: getFormattedText(d, firstListItem.title, firstListItem.trans),
-                  contents: firstListItem.contents.map((e) => {
-                    return {
-                      ...e,
-                      label: getFormattedText(d, e.label, e.trans),
-                      value: getFormattedText(d, e.value, e.trans),
-                    };
-                  }),
-                };
-              }),
-            });
-          } else {
-            arr.push({
-              overflow: true,
-              ...item,
-              ...cfg,
-              items: cfg.items.map((i) => {
-                return {
-                  title: getFormattedText(data, i.title, i.trans),
-                  contents: i.contents.map((e) => {
-                    return {
-                      ...e,
-                      label: getFormattedText(data, e.label, e.trans),
-                      value: getFormattedText(data, e.value, e.trans),
-                    };
-                  }),
-                };
-              }),
-            });
-          }
-          break;
-        }
-        case 'gallery_list': {
-          const cfg = gallery_list.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-
+        } else {
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: getItems(data, cfg.items),
-            galleryItems: getItems(data, cfg.galleryItems),
+            items: cfg.items.map((i) => {
+              return {
+                title: getFormattedText(data, i.title, i.trans),
+                contents: i.contents.map((e) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(data, e.label, e.trans),
+                    value: getFormattedText(data, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
           });
-          break;
-        }
-        case 'tabs': {
-          const cfg = tabs.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-
-          if (cfg.mapFromData) {
-            const firstListItem = cfg.items[0];
-            arr.push({
-              overflow: true,
-              ...item,
-              ...cfg,
-              items: (data || []).map((d) => {
-                return {
-                  title: getFormattedText(d, firstListItem.title, firstListItem.trans),
-                  contents: firstListItem.contents.map((e) => {
-                    return {
-                      ...e,
-                      label: getFormattedText(d, e.label, e.trans),
-                      value: getFormattedText(d, e.value, e.trans),
-                    };
-                  }),
-                };
-              }),
-            });
-          } else {
-            arr.push({
-              overflow: true,
-              ...item,
-              ...cfg,
-              items: cfg.items.map((i) => {
-                return {
-                  title: getFormattedText(data, i.title, i.trans),
-                  contents: i.contents.map((e) => {
-                    return {
-                      ...e,
-                      label: getFormattedText(data, e.label, e.trans),
-                      value: getFormattedText(data, e.value, e.trans),
-                    };
-                  }),
-                };
-              }),
-            });
-          }
-          break;
         }
-        case 'chart': {
-          const cfg = chart.shift();
+        break;
+      }
+      case 'chart': {
+        const cfg = chart.shift();
+        if (cfg?.type == 'scatter') {
           if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
+          const data = getData(mockData, cfg.readFrom, cfg.parser);
 
           arr.push({
             ...item,
@@ -388,151 +390,161 @@
             data,
           });
           break;
-        }
-        case 'table': {
-          const cfg = table.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-
-          arr.push({
-            ...cfg,
-            ...item,
-            columns: cfg.columns,
-            data,
-          });
-          break;
-        }
-        case 'partition': {
-          const cfg = partition.shift();
+        } else {
           if (!cfg) break;
           const data = getData(refData, cfg.readFrom, cfg.parser);
           arr.push({
-            overflow: true,
             ...item,
+            config: cfg,
             data,
-            ...cfg,
           });
           break;
         }
-        default: {
-          const cfg = preset.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
+      }
+      case 'table': {
+        const cfg = table.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
 
-          arr.push({
-            ...item,
-            data,
-            config: cfg,
-          });
-          break;
-        }
+        arr.push({
+          ...cfg,
+          ...item,
+          columns: cfg.columns,
+          data,
+        });
+        break;
       }
-      // console.log(arr,'arr---')
-      return arr;
-    }, []);
-  });
+      case 'partition': {
+        const cfg = partition.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          overflow: true,
+          ...item,
+          data,
+          ...cfg,
+        });
+        break;
+      }
+      default: {
+        const cfg = preset.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        arr.push({
+          ...item,
+          data,
+          config: cfg,
+        });
+        break;
+      }
+    }
+    // console.log(arr,'arr---')
+    return arr;
+  }, []);
+});
 </script>
 <style lang="less" scoped>
-  @import '@/design/theme.less';
+@import '@/design/theme.less';
 
-  .content {
-    height: calc(100% - 30px);
-    position: relative;
-    // z-index: -2;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto; // 这里会导致样式无故添加滚动条
-    overflow-x: hidden;
-  }
+.content {
+  height: calc(100% - 30px);
+  position: relative;
+  // z-index: -2;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto; // 这里会导致样式无故添加滚动条
+  overflow-x: hidden;
+}
 
-  .content__background {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    object-fit: fill;
-  }
+.content__background {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  object-fit: fill;
+}
 
-  .image__background {
-    width: 35%;
-    height: 61%;
-    left: 30%;
-  }
+.image__background {
+  width: 35%;
+  height: 61%;
+  left: 30%;
+}
 
-  .content__module {
-    // margin-top: 5px;
-    // margin-bottom: 5px;
-    width: 100%;
-    height: 100%;
-  }
+.content__module {
+  // margin-top: 5px;
+  // margin-bottom: 5px;
+  width: 100%;
+  height: 100%;
+}
 
-  .content__module1 {
-    background: url('@/assets/images/vent/homeNew/databg/4.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    height: 129px;
-    margin-top: 20%;
-  }
+.content__module1 {
+  background: url('@/assets/images/vent/homeNew/databg/4.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  height: 129px;
+  margin-top: 20%;
+}
 
-  .content__moduleFire {
-    width: 100%;
-    height: 100%;
-    margin-left: -24% !important;
-  }
+.content__moduleFire {
+  width: 100%;
+  height: 100%;
+  margin-left: -24% !important;
+}
 
-  .content__module_dust {
-    background: url('@/assets/images/vent/homeNew/bottomBg.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 100%;
-    height: 100%;
-  }
+.content__module_dust {
+  background: url('@/assets/images/vent/homeNew/bottomBg.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+}
 
-  // .content__module:first-of-type {
-  //   margin-top: 0;
-  // }
-  // .content__module:last-of-type {
-  //   margin-bottom: 0;
-  // }
-  ::-webkit-scrollbar {
-    width: 5px !important;
-  }
+// .content__module:first-of-type {
+//   margin-top: 0;
+// }
+// .content__module:last-of-type {
+//   margin-bottom: 0;
+// }
+::-webkit-scrollbar {
+  width: 5px !important;
+}
 
-  ::-webkit-scrollbar-thumb {
-    width: 5px !important;
-  }
+::-webkit-scrollbar-thumb {
+  width: 5px !important;
+}
 
-  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-    /* background-color: transparent; */
-    color: #fff;
-  }
+:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+  /* background-color: transparent; */
+  color: #fff;
+}
 
-  :deep(.zxm-select-arrow) {
-    color: #fff;
-  }
+:deep(.zxm-select-arrow) {
+  color: #fff;
+}
 
-  :deep(.zxm-select-selection-item) {
-    color: #fff !important;
-  }
+:deep(.zxm-select-selection-item) {
+  color: #fff !important;
+}
 
-  :deep(.zxm-select-selection-placeholder) {
-    color: #fff !important;
-  }
+:deep(.zxm-select-selection-placeholder) {
+  color: #fff !important;
+}
 
-  :deep(.dialog-overlay) {
-    width: 100%;
-    height: 100%;
-    position: unset;
-    box-shadow: unset;
-  }
+:deep(.dialog-overlay) {
+  width: 100%;
+  height: 100%;
+  position: unset;
+  box-shadow: unset;
+}
 
-  ::-webkit-scrollbar {
-    width: 5px !important;
-  }
+::-webkit-scrollbar {
+  width: 5px !important;
+}
 
-  ::-webkit-scrollbar-thumb {
-    width: 5px !important;
-  }
+::-webkit-scrollbar-thumb {
+  width: 5px !important;
+}
 </style>

src/views/vent/monitorManager/balancePressMonitor/balancePress.api.ts

@@ -73,7 +73,7 @@ export const validPassword = (params) =>
 export const getO2PressData = (params) => {
   // 将对象参数转换为query string
   const queryString = new URLSearchParams(params).toString();
-  return defHttp.get({
+  return defHttp.post({
     url: `${Api.getO2PressData}?${queryString}`,
   });
 };

src/views/vent/monitorManager/balancePressMonitor/components/balancePressHome2.vue

@@ -9,559 +9,593 @@
         :module-name="cfg.moduleName"
         :device-type="cfg.deviceType"
         :data="selectData"
+        :chartData="mockData"
         :visible="true"
       /> </div
   ></a-spin>
 </template>
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted, defineProps } from 'vue';
-  import { mountedThree, destroy, setModelType, updateText, play } from '../balancePress.threejs';
-  import { list } from '../balancePress.api';
-  import ModuleCommon from '../../../home/configurable/components/ModuleCommon.vue';
-  import { useInitConfigs } from '../../../home/configurable/hooks/useInit';
-  import { useGlobSetting } from '/@/hooks/setting';
-  // import { Config } from '../../../deviceManager/configurationTable/types';
+import { ref, onMounted, onUnmounted, defineProps } from 'vue';
+import { mountedThree, destroy, setModelType, updateText, play } from '../balancePress.threejs';
+import { list, getO2PressData } from '../balancePress.api';
+import ModuleCommon from '../../../home/configurable/components/ModuleCommon.vue';
+import { useInitConfigs } from '../../../home/configurable/hooks/useInit';
+import { useGlobSetting } from '/@/hooks/setting';
+import ventBox1 from '/@/components/vent/ventBox1.vue';
+import CustomChart from '@/views/vent/home/configurable/components/detail/CustomChart.vue';
+import { PressO2Option, mockData1 } from '../balancePressO2.data';
+// import { Config } from '../../../deviceManager/configurationTable/types';
 
-  const props = defineProps({
-    deviceId: {
-      type: String,
-      require: true,
-    },
-  });
-
-  const { sysOrgCode } = useGlobSetting();
-
-  const loading = ref(false);
+const props = defineProps({
+  deviceId: {
+    type: String,
+    require: true,
+  },
+});
 
-  // 监测数据
-  const selectData = ref();
+const { sysOrgCode } = useGlobSetting();
 
-  // https获取监测数据
-  let timer: any = null;
-  function getMonitor(flag?) {
-    if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = setTimeout(
-        async () => {
-          if (props.deviceId) {
-            const data = await getDataSource(props.deviceId);
-            // Object.assign(selectData, data);
-            updateText(selectData);
-            selectData.value = data;
-          }
-          if (timer) {
-            timer = null;
-          }
-          await getMonitor();
-          loading.value = false;
-        },
-        flag ? 0 : 1000
-      );
-    }
-  }
+const loading = ref(false);
 
-  async function getDataSource(systemID) {
-    const res = await list({ devicetype: 'sys', systemID });
+// 监测数据
+const selectData = ref();
+const mockData = ref<{ chartData: { dateTime: string; o2Val: string; pressureVal: string }[] }>({
+  chartData: [],
+});
+const O2PressDataFetched = ref(false);
+const modelsensorO2Data = ref<any[]>([]);
 
-    const result = Array.from(res.msgTxt).reduce(
-      (obj: any, e: any) => {
-        // if (true) {
-        if (sysOrgCode === 'sdmtjtswmk') {
-          if (e.type.startsWith('fanlocal')) {
-            obj.fanlocal.datalist.push(...e.datalist);
-          }
-          if (e.type.startsWith('safetymonitor')) {
-            e.datalist.forEach((ele) => {
-              if (ele.strinstallpos.includes('风门')) {
-                obj.gate.datalist.push(ele);
-              } else if (ele.strinstallpos.includes('风窗')) {
-                obj.window.datalist.push(ele);
-              } else if (ele.strinstallpos.includes('工作面')) {
-                obj.work_surface.datalist.push(ele);
-              } else {
-                obj.others.datalist.push(ele);
-              }
-            });
-          }
-          if (e.type.startsWith('avgpressure_lowoxygen')) {
-            e.datalist.forEach((ele) => {
-              ele.strinstallpos = ele.strinstallpos.replaceAll(' ', '');
-              ele.strname = ele.strname.replaceAll(' ', '');
-            });
-          }
+// https获取监测数据
+let timer: any = null;
+function getMonitor(flag?) {
+  if (Object.prototype.toString.call(timer) === '[object Null]') {
+    timer = setTimeout(
+      async () => {
+        if (props.deviceId) {
+          const data = await getDataSource(props.deviceId);
+          // Object.assign(selectData, data);
+          updateText(selectData);
+          selectData.value = data;
         }
-
-        obj[e.type] = e;
-        return obj;
+        if (timer) {
+          timer = null;
+        }
+        await getMonitor();
+        loading.value = false;
       },
-      {
-        /** 用于归类fanlocal */
-        fanlocal: { datalist: [] },
-        /** 用于归类gate */
-        gate: { datalist: [] },
-        /** 用于归类window */
-        window: { datalist: [] },
-        /** 用于归类work_surface */
-        work_surface: { datalist: [] },
-        others: { datalist: [] },
-      }
+      flag ? 0 : 1000
     );
-    return result;
   }
+}
+
+async function getDataSource(systemID) {
+  const res = await list({ devicetype: 'sys', systemID });
+  const result = Array.from(res.msgTxt).reduce(
+    (obj: any, e: any) => {
+      // if (true) {
+      modelsensorO2Data.value = [];
+      if (sysOrgCode === 'sdmtjtswmk') {
+        if (e.type.startsWith('fanlocal')) {
+          obj.fanlocal.datalist.push(...e.datalist);
+        }
+        if (e.type.startsWith('safetymonitor')) {
+          e.datalist.forEach((ele) => {
+            if (ele.strinstallpos.includes('风门')) {
+              obj.gate.datalist.push(ele);
+            } else if (ele.strinstallpos.includes('风窗')) {
+              obj.window.datalist.push(ele);
+            } else if (ele.strinstallpos.includes('工作面')) {
+              obj.work_surface.datalist.push(ele);
+            } else {
+              obj.others.datalist.push(ele);
+            }
+          });
+        }
+        if (e.type.startsWith('avgpressure_lowoxygen')) {
+          e.datalist.forEach((ele) => {
+            ele.strinstallpos = ele.strinstallpos.replaceAll(' ', '');
+            ele.strname = ele.strname.replaceAll(' ', '');
+          });
+        }
+      }
+      if (e.type.includes('modelsensor_o2')) {
+        modelsensorO2Data.value.push(...e.datalist);
+        console.log(modelsensorO2Data.value, '氧气数据');
+        if (!O2PressDataFetched.value) {
+          O2PressDataFetched.value = true;
+          getO2Press(modelsensorO2Data.value);
+        }
+      }
+      obj[e.type] = e;
+      return obj;
+    },
+    {
+      /** 用于归类fanlocal */
+      fanlocal: { datalist: [] },
+      /** 用于归类gate */
+      gate: { datalist: [] },
+      /** 用于归类window */
+      window: { datalist: [] },
+      /** 用于归类work_surface */
+      work_surface: { datalist: [] },
+      others: { datalist: [] },
+    }
+  );
+  return result;
+}
 
-  // const configs = ref<Config[]>([
-  //   {
-  //     deviceType: 'fanlocal',
-  //     moduleName: '局部风机',
-  //     pageType: 'balancePressHome',
-  //     moduleData: {
-  //       header: {
-  //         show: true,
-  //         readFrom: 'datalist',
-  //         selector: {
-  //           show: true,
-  //           value: '${deviceID}',
-  //           trans: {
-  //             '1910221332833665026': '主机',
-  //             '1910221283626090497': '备机',
-  //           },
-  //         },
-  //         slot: {
-  //           show: false,
-  //           value: '',
-  //         },
-  //       },
-  //       background: {
-  //         show: false,
-  //         type: 'image',
-  //         link: '',
-  //       },
-  //       layout: {
-  //         direction: 'column',
-  //         items: [
-  //           {
-  //             name: 'tabs',
-  //             basis: '100%',
-  //           },
-  //         ],
-  //       },
-  //       complex_list: [],
-  //       chart: [],
-  //       table: [],
-  //       gallery: [],
-  //       list: [],
-  //       tabs: [
-  //         {
-  //           type: 'K',
-  //           readFrom: '',
-  //           mapFromData: false,
-  //           items: [
-  //             {
-  //               title: '电机1',
-  //               contents: [
-  //                 {
-  //                   label: '输出功率',
-  //                   value: '${readData.Fan1StartStatus}',
-  //                   color: 'blue',
-  //                 },
-  //                 {
-  //                   label: '输出电压',
-  //                   value: '${readData.Fan1StartStatus}',
-  //                   color: 'blue',
-  //                 },
-  //               ],
-  //             },
-  //             {
-  //               title: '电机2',
-  //               contents: [
-  //                 {
-  //                   label: '输出功率',
-  //                   value: '${readData.Fan2StartStatus}',
-  //                   color: 'blue',
-  //                 },
-  //                 {
-  //                   label: '输出电压',
-  //                   value: '${readData.Fan2StartStatus}',
-  //                   color: 'blue',
-  //                 },
-  //                 {
-  //                   label: '输出电压',
-  //                   value: '${readData.Fan2StartStatus}',
-  //                   color: 'blue',
-  //                 },
-  //                 {
-  //                   label: '输出电压',
-  //                   value: '${readData.Fan2StartStatus}',
-  //                   color: 'blue',
-  //                 },
-  //               ],
-  //             },
-  //           ],
-  //         },
-  //       ],
-  //       gallery_list: [],
-  //       preset: [],
-  //       to: '',
-  //     },
-  //     showStyle: {
-  //       size: 'width:470px;height:260px;',
-  //       version: '原版',
-  //       position: 'top:20px;left:0;',
-  //     },
-  //   },
-  //   {
-  //     deviceType: '',
-  //     moduleName: '风门',
-  //     pageType: 'balancePressHome',
-  //     moduleData: {
-  //       header: {
-  //         show: false,
-  //         readFrom: '',
-  //         selector: {
-  //           show: false,
-  //           value: '',
-  //         },
-  //         slot: {
-  //           show: false,
-  //           value: '',
-  //         },
-  //       },
-  //       background: {
-  //         show: false,
-  //         type: 'image',
-  //         link: '',
-  //       },
-  //       layout: {
-  //         direction: 'column',
-  //         items: [
-  //           {
-  //             name: 'complex_list',
-  //             basis: '100%',
-  //           },
-  //         ],
-  //       },
-  //       complex_list: [
-  //         {
-  //           type: 'G',
-  //           readFrom: 'gate.datalist',
-  //           mapFromData: true,
-  //           items: [
-  //             {
-  //               title: '${deviceID}',
-  //               trans: {
-  //                 '1915631893453004802': '22107胶运顺槽入口自动风门2',
-  //                 '1915631893478170626': '22107胶运顺槽入口自动风门1',
-  //                 '1915631897043329025': '22107辅回撤通道自动风门1',
-  //                 '1915631895088783362': '22107辅回撤通道自动风门2',
-  //               },
-  //               contents: [
-  //                 {
-  //                   label: '状态',
-  //                   value: '${readData.V}',
-  //                   color: 'blue',
-  //                 },
-  //               ],
-  //             },
-  //           ],
-  //         },
-  //       ],
-  //       chart: [],
-  //       table: [],
-  //       gallery: [],
-  //       list: [],
-  //       gallery_list: [],
-  //       preset: [],
-  //       to: '',
-  //     },
-  //     showStyle: {
-  //       size: 'width:470px;height:320px;',
-  //       version: '原版',
-  //       position: 'top:290px;left:0;',
-  //     },
-  //   },
-  //   {
-  //     deviceType: '',
-  //     moduleName: '综采工作面推进度',
-  //     pageType: 'balancePressHome',
-  //     moduleData: {
-  //       header: {
-  //         show: false,
-  //         readFrom: '',
-  //         selector: {
-  //           show: false,
-  //           value: '',
-  //         },
-  //         slot: {
-  //           show: false,
-  //           value: '',
-  //         },
-  //       },
-  //       background: {
-  //         show: false,
-  //         type: 'image',
-  //         link: '',
-  //       },
-  //       layout: {
-  //         direction: 'column',
-  //         items: [
-  //           {
-  //             name: 'list',
-  //             basis: '100%',
-  //           },
-  //         ],
-  //       },
-  //       complex_list: [],
-  //       chart: [],
-  //       table: [],
-  //       gallery: [],
-  //       list: [
-  //         {
-  //           type: 'K',
-  //           readFrom: '',
-  //           items: [
-  //             {
-  //               label: '进度',
-  //               value: '50%',
-  //               color: 'blue',
-  //             },
-  //             {
-  //               label: '埋深',
-  //               value: '2000km',
-  //               color: 'blue',
-  //             },
-  //           ],
-  //         },
-  //       ],
-  //       gallery_list: [],
-  //       preset: [],
-  //       to: '',
-  //     },
-  //     showStyle: {
-  //       size: 'width:470px;height:130px;',
-  //       version: '原版',
-  //       position: 'top:620px;left:0;',
-  //     },
-  //   },
-  //   {
-  //     deviceType: '',
-  //     moduleName: '重点监控传感器',
-  //     pageType: 'balancePressHome',
-  //     moduleData: {
-  //       header: {
-  //         show: false,
-  //         readFrom: '',
-  //         selector: {
-  //           show: false,
-  //           value: '',
-  //         },
-  //         slot: {
-  //           show: false,
-  //           value: '',
-  //         },
-  //       },
-  //       background: {
-  //         show: false,
-  //         type: 'image',
-  //         link: '',
-  //       },
-  //       layout: {
-  //         direction: 'column',
-  //         items: [
-  //           {
-  //             name: 'complex_list',
-  //             basis: '100%',
-  //           },
-  //         ],
-  //       },
-  //       complex_list: [
-  //         {
-  //           type: 'G',
-  //           readFrom: 'avgpressure_lowoxygen_normal.datalist',
-  //           mapFromData: true,
-  //           items: [
-  //             {
-  //               title: '${strinstallpos}',
-  //               contents: [
-  //                 {
-  //                   label: '网络状态',
-  //                   value: '${readData.netStatus_str}',
-  //                   color: 'blue',
-  //                 },
-  //               ],
-  //             },
-  //           ],
-  //         },
-  //       ],
-  //       chart: [],
-  //       table: [],
-  //       gallery: [],
-  //       list: [],
-  //       gallery_list: [],
-  //       preset: [],
-  //       to: '',
-  //     },
-  //     showStyle: {
-  //       size: 'width:470px;height:230px;',
-  //       version: '原版',
-  //       position: 'top:20px;right:0;',
-  //     },
-  //   },
-  //   {
-  //     deviceType: '',
-  //     moduleName: '辅助巡检传感器',
-  //     pageType: 'balancePressHome',
-  //     moduleData: {
-  //       header: {
-  //         show: false,
-  //         readFrom: '',
-  //         selector: {
-  //           show: false,
-  //           value: '',
-  //         },
-  //         slot: {
-  //           show: false,
-  //           value: '',
-  //         },
-  //       },
-  //       background: {
-  //         show: false,
-  //         type: 'image',
-  //         link: '',
-  //       },
-  //       layout: {
-  //         direction: 'column',
-  //         items: [
-  //           {
-  //             name: 'complex_list',
-  //             basis: '100%',
-  //           },
-  //         ],
-  //       },
-  //       complex_list: [
-  //         {
-  //           type: 'G',
-  //           readFrom: 'others.datalist',
-  //           mapFromData: true,
-  //           items: [
-  //             {
-  //               title: '${strinstallpos}',
-  //               contents: [
-  //                 {
-  //                   label: '网络状态',
-  //                   value: '${readData.netStatus_str}',
-  //                   color: 'blue',
-  //                 },
-  //               ],
-  //             },
-  //           ],
-  //         },
-  //       ],
-  //       chart: [],
-  //       table: [],
-  //       gallery: [],
-  //       list: [],
-  //       gallery_list: [],
-  //       preset: [],
-  //       to: '',
-  //     },
-  //     showStyle: {
-  //       size: 'width:470px;height:230px;',
-  //       version: '原版',
-  //       position: 'top:260px;right:0;',
-  //     },
-  //   },
-  //   {
-  //     deviceType: '',
-  //     moduleName: '地面大气压',
-  //     pageType: 'balancePressHome',
-  //     moduleData: {
-  //       header: {
-  //         show: false,
-  //         readFrom: '',
-  //         selector: {
-  //           show: false,
-  //           value: '',
-  //         },
-  //         slot: {
-  //           show: false,
-  //           value: '',
-  //         },
-  //       },
-  //       background: {
-  //         show: false,
-  //         type: 'image',
-  //         link: '',
-  //       },
-  //       layout: {
-  //         direction: 'column',
-  //         items: [
-  //           {
-  //             name: 'chart',
-  //             basis: '100%',
-  //           },
-  //         ],
-  //       },
-  //       complex_list: [],
-  //       chart: [
-  //         {
-  //           type: 'line_smooth',
-  //           readFrom: 'surface_history.datalist',
-  //           legend: { show: true },
-  //           xAxis: [{ show: true }],
-  //           yAxis: [
-  //             { show: true, name: '压力1(Pa)', position: 'left' },
-  //             { show: true, name: '压力2(Pa)', position: 'right' },
-  //           ],
-  //           series: [
-  //             { readFrom: '', xprop: 'time', yprop: 'pressure1', label: '压力1' },
-  //             // { readFrom: 'datalist', xprop: 'strinstallpos', yprop: 'readData.va', label: '风速' },
-  //           ],
-  //         },
-  //       ],
-  //       table: [],
-  //       gallery: [],
-  //       list: [],
-  //       gallery_list: [],
-  //       preset: [],
-  //       to: '',
-  //     },
-  //     showStyle: {
-  //       size: 'width:470px;height:250px;',
-  //       version: '原版',
-  //       position: 'top:500px;right:0;',
-  //     },
-  //   },
-  // ]);
+// const configs = ref<Config[]>([
+//   {
+//     deviceType: 'fanlocal',
+//     moduleName: '局部风机',
+//     pageType: 'balancePressHome',
+//     moduleData: {
+//       header: {
+//         show: true,
+//         readFrom: 'datalist',
+//         selector: {
+//           show: true,
+//           value: '${deviceID}',
+//           trans: {
+//             '1910221332833665026': '主机',
+//             '1910221283626090497': '备机',
+//           },
+//         },
+//         slot: {
+//           show: false,
+//           value: '',
+//         },
+//       },
+//       background: {
+//         show: false,
+//         type: 'image',
+//         link: '',
+//       },
+//       layout: {
+//         direction: 'column',
+//         items: [
+//           {
+//             name: 'tabs',
+//             basis: '100%',
+//           },
+//         ],
+//       },
+//       complex_list: [],
+//       chart: [],
+//       table: [],
+//       gallery: [],
+//       list: [],
+//       tabs: [
+//         {
+//           type: 'K',
+//           readFrom: '',
+//           mapFromData: false,
+//           items: [
+//             {
+//               title: '电机1',
+//               contents: [
+//                 {
+//                   label: '输出功率',
+//                   value: '${readData.Fan1StartStatus}',
+//                   color: 'blue',
+//                 },
+//                 {
+//                   label: '输出电压',
+//                   value: '${readData.Fan1StartStatus}',
+//                   color: 'blue',
+//                 },
+//               ],
+//             },
+//             {
+//               title: '电机2',
+//               contents: [
+//                 {
+//                   label: '输出功率',
+//                   value: '${readData.Fan2StartStatus}',
+//                   color: 'blue',
+//                 },
+//                 {
+//                   label: '输出电压',
+//                   value: '${readData.Fan2StartStatus}',
+//                   color: 'blue',
+//                 },
+//                 {
+//                   label: '输出电压',
+//                   value: '${readData.Fan2StartStatus}',
+//                   color: 'blue',
+//                 },
+//                 {
+//                   label: '输出电压',
+//                   value: '${readData.Fan2StartStatus}',
+//                   color: 'blue',
+//                 },
+//               ],
+//             },
+//           ],
+//         },
+//       ],
+//       gallery_list: [],
+//       preset: [],
+//       to: '',
+//     },
+//     showStyle: {
+//       size: 'width:470px;height:260px;',
+//       version: '原版',
+//       position: 'top:20px;left:0;',
+//     },
+//   },
+//   {
+//     deviceType: '',
+//     moduleName: '风门',
+//     pageType: 'balancePressHome',
+//     moduleData: {
+//       header: {
+//         show: false,
+//         readFrom: '',
+//         selector: {
+//           show: false,
+//           value: '',
+//         },
+//         slot: {
+//           show: false,
+//           value: '',
+//         },
+//       },
+//       background: {
+//         show: false,
+//         type: 'image',
+//         link: '',
+//       },
+//       layout: {
+//         direction: 'column',
+//         items: [
+//           {
+//             name: 'complex_list',
+//             basis: '100%',
+//           },
+//         ],
+//       },
+//       complex_list: [
+//         {
+//           type: 'G',
+//           readFrom: 'gate.datalist',
+//           mapFromData: true,
+//           items: [
+//             {
+//               title: '${deviceID}',
+//               trans: {
+//                 '1915631893453004802': '22107胶运顺槽入口自动风门2',
+//                 '1915631893478170626': '22107胶运顺槽入口自动风门1',
+//                 '1915631897043329025': '22107辅回撤通道自动风门1',
+//                 '1915631895088783362': '22107辅回撤通道自动风门2',
+//               },
+//               contents: [
+//                 {
+//                   label: '状态',
+//                   value: '${readData.V}',
+//                   color: 'blue',
+//                 },
+//               ],
+//             },
+//           ],
+//         },
+//       ],
+//       chart: [],
+//       table: [],
+//       gallery: [],
+//       list: [],
+//       gallery_list: [],
+//       preset: [],
+//       to: '',
+//     },
+//     showStyle: {
+//       size: 'width:470px;height:320px;',
+//       version: '原版',
+//       position: 'top:290px;left:0;',
+//     },
+//   },
+//   {
+//     deviceType: '',
+//     moduleName: '综采工作面推进度',
+//     pageType: 'balancePressHome',
+//     moduleData: {
+//       header: {
+//         show: false,
+//         readFrom: '',
+//         selector: {
+//           show: false,
+//           value: '',
+//         },
+//         slot: {
+//           show: false,
+//           value: '',
+//         },
+//       },
+//       background: {
+//         show: false,
+//         type: 'image',
+//         link: '',
+//       },
+//       layout: {
+//         direction: 'column',
+//         items: [
+//           {
+//             name: 'list',
+//             basis: '100%',
+//           },
+//         ],
+//       },
+//       complex_list: [],
+//       chart: [],
+//       table: [],
+//       gallery: [],
+//       list: [
+//         {
+//           type: 'K',
+//           readFrom: '',
+//           items: [
+//             {
+//               label: '进度',
+//               value: '50%',
+//               color: 'blue',
+//             },
+//             {
+//               label: '埋深',
+//               value: '2000km',
+//               color: 'blue',
+//             },
+//           ],
+//         },
+//       ],
+//       gallery_list: [],
+//       preset: [],
+//       to: '',
+//     },
+//     showStyle: {
+//       size: 'width:470px;height:130px;',
+//       version: '原版',
+//       position: 'top:620px;left:0;',
+//     },
+//   },
+//   {
+//     deviceType: '',
+//     moduleName: '重点监控传感器',
+//     pageType: 'balancePressHome',
+//     moduleData: {
+//       header: {
+//         show: false,
+//         readFrom: '',
+//         selector: {
+//           show: false,
+//           value: '',
+//         },
+//         slot: {
+//           show: false,
+//           value: '',
+//         },
+//       },
+//       background: {
+//         show: false,
+//         type: 'image',
+//         link: '',
+//       },
+//       layout: {
+//         direction: 'column',
+//         items: [
+//           {
+//             name: 'complex_list',
+//             basis: '100%',
+//           },
+//         ],
+//       },
+//       complex_list: [
+//         {
+//           type: 'G',
+//           readFrom: 'avgpressure_lowoxygen_normal.datalist',
+//           mapFromData: true,
+//           items: [
+//             {
+//               title: '${strinstallpos}',
+//               contents: [
+//                 {
+//                   label: '网络状态',
+//                   value: '${readData.netStatus_str}',
+//                   color: 'blue',
+//                 },
+//               ],
+//             },
+//           ],
+//         },
+//       ],
+//       chart: [],
+//       table: [],
+//       gallery: [],
+//       list: [],
+//       gallery_list: [],
+//       preset: [],
+//       to: '',
+//     },
+//     showStyle: {
+//       size: 'width:470px;height:230px;',
+//       version: '原版',
+//       position: 'top:20px;right:0;',
+//     },
+//   },
+//   {
+//     deviceType: '',
+//     moduleName: '辅助巡检传感器',
+//     pageType: 'balancePressHome',
+//     moduleData: {
+//       header: {
+//         show: false,
+//         readFrom: '',
+//         selector: {
+//           show: false,
+//           value: '',
+//         },
+//         slot: {
+//           show: false,
+//           value: '',
+//         },
+//       },
+//       background: {
+//         show: false,
+//         type: 'image',
+//         link: '',
+//       },
+//       layout: {
+//         direction: 'column',
+//         items: [
+//           {
+//             name: 'complex_list',
+//             basis: '100%',
+//           },
+//         ],
+//       },
+//       complex_list: [
+//         {
+//           type: 'G',
+//           readFrom: 'others.datalist',
+//           mapFromData: true,
+//           items: [
+//             {
+//               title: '${strinstallpos}',
+//               contents: [
+//                 {
+//                   label: '网络状态',
+//                   value: '${readData.netStatus_str}',
+//                   color: 'blue',
+//                 },
+//               ],
+//             },
+//           ],
+//         },
+//       ],
+//       chart: [],
+//       table: [],
+//       gallery: [],
+//       list: [],
+//       gallery_list: [],
+//       preset: [],
+//       to: '',
+//     },
+//     showStyle: {
+//       size: 'width:470px;height:230px;',
+//       version: '原版',
+//       position: 'top:260px;right:0;',
+//     },
+//   },
+//   {
+//     deviceType: '',
+//     moduleName: '地面大气压',
+//     pageType: 'balancePressHome',
+//     moduleData: {
+//       header: {
+//         show: false,
+//         readFrom: '',
+//         selector: {
+//           show: false,
+//           value: '',
+//         },
+//         slot: {
+//           show: false,
+//           value: '',
+//         },
+//       },
+//       background: {
+//         show: false,
+//         type: 'image',
+//         link: '',
+//       },
+//       layout: {
+//         direction: 'column',
+//         items: [
+//           {
+//             name: 'chart',
+//             basis: '100%',
+//           },
+//         ],
+//       },
+//       complex_list: [],
+//       chart: [
+//         {
+//           type: 'line_smooth',
+//           readFrom: 'surface_history.datalist',
+//           legend: { show: true },
+//           xAxis: [{ show: true }],
+//           yAxis: [
+//             { show: true, name: '压力1(Pa)', position: 'left' },
+//             { show: true, name: '压力2(Pa)', position: 'right' },
+//           ],
+//           series: [
+//             { readFrom: '', xprop: 'time', yprop: 'pressure1', label: '压力1' },
+//             // { readFrom: 'datalist', xprop: 'strinstallpos', yprop: 'readData.va', label: '风速' },
+//           ],
+//         },
+//       ],
+//       table: [],
+//       gallery: [],
+//       list: [],
+//       gallery_list: [],
+//       preset: [],
+//       to: '',
+//     },
+//     showStyle: {
+//       size: 'width:470px;height:250px;',
+//       version: '原版',
+//       position: 'top:500px;right:0;',
+//     },
+//   },
+// ]);
 
-  const { configs, fetchConfigs } = useInitConfigs();
+async function getO2Press(params) {
+  console.log(params[0]?.deviceID, 'ID数据');
+  const deviceID = params[0]?.deviceID;
+  const param = {
+    deviceId: deviceID,
+  };
+  const res = await getO2PressData(param);
+  const chartData = [...res?.o2HistoryDataList, ...res?.o2List];
+  mockData.value = { chartData };
+  O2PressDataFetched.value = true;
+}
+const { configs, fetchConfigs } = useInitConfigs();
 
-  onMounted(async () => {
-    // getMonitor()
-    fetchConfigs('balancePressHome');
-    loading.value = true;
-    // mountedThree().then(async () => {
-    //   await setModelType('balancePressTun'); //balancePressBase
-    //   loading.value = false;
-    //   timer = null;
-    //   await getMonitor(true);
-    //   play('startSmoke', 'top', 30, 'open', 0);
-    // });
-    timer = null;
-    await getMonitor(true);
-    loading.value = false;
-  });
+onMounted(async () => {
+  // getMonitor()
+  fetchConfigs('balancePressHome');
+  loading.value = true;
+  // mountedThree().then(async () => {
+  //   await setModelType('balancePressTun'); //balancePressBase
+  //   loading.value = false;
+  //   timer = null;
+  //   await getMonitor(true);
+  //   play('startSmoke', 'top', 30, 'open', 0);
+  // });
+  timer = null;
+  await getMonitor(true);
+  loading.value = false;
+});
 
-  onUnmounted(() => {
-    destroy();
-    if (timer) {
-      clearTimeout(timer);
-    }
-  });
+onUnmounted(() => {
+  destroy();
+  if (timer) {
+    clearTimeout(timer);
+  }
+});
 </script>
 <style lang="less" scoped>
-  @import '/@/design/vent/modal.less';
-  @import '../../comment/less/workFace.less';
-  @ventSpace: zxm;
-  .monitor-container {
-    margin-top: 60px;
-  }
+@import '/@/design/vent/modal.less';
+@import '../../comment/less/workFace.less';
+@ventSpace: zxm;
+.monitor-container {
+  margin-top: 60px;
+}
+.lr {
+  width: 340px !important;
+}
+.fix-box {
+  margin-right: 19% !important;
+  margin-top: 1% !important;
+}
 </style>