Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

src/hooks/system/useMethods.ts

@@ -65,7 +65,7 @@ export function useMethods() {
         debugger;
         if (data.code == 200 && data.result) {
           const messageArr = data.result.split('/');
-          const fileUrl = messageArr[messageArr.length - 1];
+          const fileUrl = encodeURIComponent(messageArr[messageArr.length - 1]);
           if (fileUrl) {
             const baseApiUrl = glob.domainUrl;
             // 下载文件

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/deviceManager/configurationTable/types.ts

@@ -1,3 +1,4 @@
+import { data } from 'emoji-mart-vue-fast/data/apple.json';
 export interface Config {
   /** 模块的名称 */
   moduleName: string;
@@ -271,7 +272,8 @@ export interface ModuleDataChart extends ReadFrom {
     | 'bar_cylinder_wide'
     | 'pie_halo'
     | 'line_enhance'
-    | 'pie_drag';
+    | 'pie_drag'
+    | 'scatter';
   /** 排序依据，该项应配置将配合 readFrom 使用 */
   sortBy?: string;
   /** 排序规则，desc降序，asc升序 */
@@ -305,6 +307,8 @@ export interface ModuleDataChart extends ReadFrom {
    * 则配置一个标准折线图所需的 series 配置类似：[{ label: '${name}', readFrom: 'data', xprop: 'pos', yprop: 'val' }]
    */
   series: {
+    /** 图表系列的类型，若不配置则取 type 的值 */
+    type?: 'pie' | 'bar' | 'line' | 'scatter';
     /** 该系列的数据说明， formatter 格式，将用于 legend 相关的内容 */
     label: string;
     /** 设置 series 系列时的基础路径，配合上级 readFrom 使用，其应指向一个数组，该数组将作为映射系列时的基准 */
@@ -315,6 +319,7 @@ export interface ModuleDataChart extends ReadFrom {
     yprop: string;
 
     color?: string;
+    yAxisIndex?: number;
   }[];
   /** 图表legend配置 */
   legend: {

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/internalManager/index.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="procedure-map">
+    <div class="option-area">
+      <label style="color: var(--vent-font-color)">设备类型：</label>
+      <Select
+        @change="handleChange"
+        :options="deviceKindOption"
+        :fieldNames="{ label: 'label', value: 'value' }"
+        v-model:value="deviceKind"
+        style="width: 200px; color: black"
+        placeholder="请选择设备类型"
+        :allowClear="true"
+      />
+      <a-button type="primary" preIcon="ant-design:search-outlined" style="margin: 0 15px" @click="getSearch">查询</a-button>
+      <a-button preIcon="ant-design:sync-outlined" @click="onReset" style="margin-right: 15px">重置</a-button>
+      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd">新增</a-button>
+      <a-button type="primary" @click="handleLink" style="margin-left: 15px">自动关联</a-button>
+    </div>
+    <a-table size="small" :dataSource="dataSource" :columns="columnsMap" :scroll="{ y: 620 }" :pagination="pagination" @change="pageChange">
+      <template #action="{ record }">
+        <a class="table-action-link" @click="handleEdit(record)">编辑</a>
+        <!-- <a class="table-action-link" @click="handleDel(record)">删除</a> -->
+        <a-popconfirm title="确定删除?" @confirm="handleDel(record)">
+          <a class="table-action-link">删除</a>
+        </a-popconfirm>
+      </template>
+    </a-table>
+    <!-- 添加/编辑弹窗 -->
+    <a-modal v-model:visible="visibleMap" width="1000px" :footer="null" :title="titleMap" centered destroyOnClose>
+      <proceduresModal :isToggle="isToggle" :formState="formState" @close="handleClose" />
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Select, message } from 'ant-design-vue';
+  import { ref, reactive, onMounted } from 'vue';
+  import { getDictItemsByCode } from '/@/utils/dict';
+  import { deleteById, getList, autoLinkReg } from './internalManager.api';
+  import { columnsMap } from './internalManager.data';
+  import proceduresModal from './procedures-modal.vue';
+
+  const dataSource = ref<any[]>([]);
+  const deviceKind = ref<string>('');
+  const deviceKindOption = ref([]);
+  //分页参数配置
+  const pagination = reactive({
+    current: 1, // 当前页码
+    pageSize: 10, // 每页显示条数
+    total: 0, // 总条目数，后端返回
+    // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
+    showSizeChanger: true, // 是否可改变每页显示条数
+    pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
+  });
+  const visibleMap = ref(false);
+  const titleMap = ref('');
+  const isToggle = ref('');
+  const formState = reactive({
+    id: '',
+    regName: '',
+    regType: '',
+    deviceKind: '',
+    monitorDataName: '',
+    regRoute: '',
+  });
+
+  //关闭弹窗
+  function handleClose() {
+    visibleMap.value = false;
+    getListMap();
+  }
+  //添加
+  function handleAdd() {
+    titleMap.value = '新增规程关联表';
+    visibleMap.value = true;
+    isToggle.value = 'add';
+    Object.assign(formState, {
+      id: '',
+      regName: '',
+      regType: '',
+      deviceKind: '',
+      monitorDataName: '',
+      regRoute: '',
+    });
+  }
+  //编辑
+  function handleEdit(record) {
+    titleMap.value = '编辑规程关联表';
+    visibleMap.value = true;
+    isToggle.value = 'edit';
+
+    Object.assign(formState, {
+      id: record.id,
+      regName: record.regName,
+      regType: record.regType,
+      deviceKind: record.deviceKind,
+      monitorDataName: record.monitorDataName,
+      regRoute: record.regRoute,
+    });
+  }
+  //删除
+  async function handleDel(record) {
+    await deleteById({ id: record.id });
+    pagination.current = 1;
+    getListMap();
+  }
+
+  //分页切换
+  function pageChange(val) {
+    pagination.current = val.current;
+    pagination.pageSize = val.pageSize;
+    getListMap();
+  }
+
+  //获取数据列表
+  async function getListMap() {
+    let res = await getList({ deviceKind: deviceKind.value, pageNo: pagination.current, pageSize: pagination.pageSize });
+    if (res.records && res.records.length != 0) {
+      dataSource.value = res.records;
+      pagination.total = res.total;
+    } else {
+      dataSource.value = res.records;
+    }
+  }
+  //查询
+  function getSearch() {
+    pagination.current = 1;
+    getListMap();
+  }
+  //重置
+  function onReset() {
+    pagination.current = 1;
+    getListMap();
+  }
+  // 设备类型切换
+  function handleChange(type) {
+    deviceKind.value = type;
+    getListMap();
+  }
+
+  function handleLink() {
+    if (deviceKind.value) {
+      autoLinkReg({ Devicetype: deviceKind.value });
+      console.log('自动关联设备类型：', deviceKind.value);
+    } else {
+      message.error('请选择设备类型进行自动关联');
+      return;
+    }
+  }
+  onMounted(() => {
+    let dictName = 'devicekind';
+    const res = getDictItemsByCode(dictName);
+    deviceKindOption.value = res;
+    getListMap();
+  });
+</script>
+
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  .procedure-map {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+
+    .option-area {
+      display: flex;
+      height: 60px;
+      align-items: center;
+    }
+  }
+
+  :deep(.zxm-select-selector) {
+    width: 100%;
+    border: 1px solid var(--vent-form-item-border) !important;
+    background-color: #ffffff00 !important;
+  }
+
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
+</style>

src/views/vent/internalManager/internalManager.api.ts

@@ -0,0 +1,66 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  addList = '/ventanaly-device/safety/rdl/add',
+  addBatchList = '/ventanaly-device/safety/rdl/addBatch',
+  deleteById = '/ventanaly-device/safety/rdl/delete',
+  deleteBatch = '/ventanaly-device/safety/rdl/deleteBatch',
+  editList = '/ventanaly-device/safety/rdl/edit',
+  getList = '/ventanaly-device/safety/rdl/list',
+  queryById = '/ventanaly-device/safety/rdl/queryById',
+  autoLinkReg = '/ventanaly-device/safety/rdl/autoMonitorLinkReg',
+}
+/**
+ * 新增规程关联表
+ * @param params
+ */
+export const addList = (params) => defHttp.post({ url: Api.addList, params });
+
+/**
+ * 批量新增规程关联表
+ * @param params
+ */
+export const addBatchList = (params) => defHttp.post({ url: Api.addBatchList, params });
+
+/**
+ * 删除规程关联表
+ * @param params
+ */
+export const deleteById = (params) =>
+  defHttp.delete({ headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, url: Api.deleteById, params });
+
+/**
+ * 批量删除规程关联表
+ * @param params
+ */
+export const deleteBatch = (params) =>
+  defHttp.delete({ headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, url: Api.deleteBatch, params });
+
+/**
+ * 编辑规程关联表
+ * @param params
+ */
+export const editList = (params) => defHttp.post({ url: Api.editList, params });
+
+/**
+ * 规程关联表-分页列表查询
+ * @param params
+ */
+export const getList = (params) =>
+  defHttp.get({
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    url: Api.getList,
+    params,
+  });
+
+/**
+ * 规程关联表-通过id查询
+ * @param params
+ */
+export const queryById = (params) => defHttp.get({ headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, url: Api.queryById, params });
+
+/**
+ * 自动关联规程关联表
+ * @param params
+ */
+export const autoLinkReg = (params) => defHttp.post({ url: Api.autoLinkReg, params });

src/views/vent/internalManager/internalManager.data.ts

@@ -0,0 +1,51 @@
+import { BasicColumn } from '/@/components/Table';
+
+//数据映射报表
+export const columnsMap: BasicColumn[] = [
+  // 规程名称：regName
+  // 规程类型：regType（字典：regType）
+  // 设备种类：deviceKind
+  // 关联监测数据id：dataId（无需显示）
+  // 关联监测数据名称：monitorDataName
+  // 规则路由：regRoute
+
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    customRender: ({ index }: { index: number }) => `${index + 1}`,
+  },
+  {
+    title: '规程名称',
+    dataIndex: 'regName',
+    align: 'center',
+  },
+
+  {
+    title: '规程类型',
+    dataIndex: 'regType',
+    align: 'center',
+  },
+  {
+    title: '设备种类',
+    dataIndex: 'deviceKind',
+    align: 'center',
+  },
+  {
+    title: '关联监测数据名称',
+    dataIndex: 'monitorDataName',
+    align: 'center',
+  },
+  {
+    title: '规则路由',
+    dataIndex: 'regRoute',
+    align: 'center',
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 200,
+    align: 'center',
+    slots: { customRender: 'action' },
+  },
+];

src/views/vent/internalManager/procedures-modal.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="report-add">
+    <a-form :model="formStates" labelAlign="center" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+      <a-form-item label="规程名称：">
+        <a-input v-model:value="formStates.regName" placeholder="请输入规程名称" />
+      </a-form-item>
+      <a-form-item label="规程类型：">
+        <a-input v-model:value="formStates.regType" placeholder="请输入规程类型" />
+      </a-form-item>
+      <a-form-item label="设备种类：">
+        <a-input v-model:value="formStates.deviceKind" placeholder="请输入设备种类" />
+      </a-form-item>
+      <a-form-item label="关联监测数据名称：">
+        <a-input v-model:value="formStates.monitorDataName" placeholder="请输入关联监测数据名称" />
+      </a-form-item>
+      <a-form-item label="规则路由：">
+        <a-input v-model:value="formStates.regRoute" placeholder="请输入规则路由" />
+      </a-form-item>
+    </a-form>
+    <div class="confirm-btn">
+      <a-button type="primary" @click="getConfirm" style="margin-right: 15px">确定</a-button>
+      <a-button type="plain" @click="getCancel">取消</a-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, reactive, onMounted, watch } from 'vue';
+  import { addList, editList } from './internalManager.api';
+
+  let props = defineProps({
+    formState: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    isToggle: {
+      type: String,
+      default: '',
+    },
+  });
+
+  let formStates = reactive({
+    id: '',
+    regName: '',
+    regType: '',
+    deviceKind: '',
+    monitorDataName: '',
+    regRoute: '',
+  });
+  let emit = defineEmits<{
+    (e: 'close'): void;
+  }>();
+
+  async function getConfirm() {
+    const params = {
+      id: formStates.id,
+      regName: formStates.regName,
+      regType: formStates.regType,
+      deviceKind: formStates.deviceKind,
+      monitorDataName: formStates.monitorDataName,
+      regRoute: formStates.regRoute,
+    };
+    if (props.isToggle == 'add') {
+      await addList(params);
+    } else {
+      await editList(params);
+    }
+    emit('close');
+  }
+  function getCancel() {
+    emit('close');
+  }
+  // 监听formState变化，同步到表单
+  watch(
+    () => props.formState,
+    (newVal) => {
+      if (newVal) {
+        Object.assign(formStates, newVal);
+      }
+    },
+    { immediate: true }
+  );
+
+  onMounted(() => {});
+</script>
+
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  .report-add {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+
+  .zxm-form {
+    width: 80%;
+    margin: 0px auto;
+  }
+
+  .confirm-btn {
+    width: 100%;
+    margin: 10px 0px;
+    text-align: center;
+  }
+
+  :deep(.zxm-form-item-label > label) {
+    color: #fff;
+  }
+
+  :deep(.zxm-select-selector) {
+    width: 100%;
+    color: #fff;
+    border: 1px solid var(--vent-form-item-border) !important;
+    background-color: #ffffff00 !important;
+  }
+
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
+
+  :deep(.zxm-select-selection-placeholder) {
+    color: #ccc !important;
+  }
+
+  :deep(.zxm-input) {
+    color: #fff;
+    border: 1px solid var(--vent-form-item-border) !important;
+    background-color: #ffffff00 !important;
+  }
+</style>

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

@@ -12,6 +12,7 @@ enum Api {
   validPassword = '/monitor/demo/avePress/valid/password',
   controlWindow = '/monitor/demo/avePress/controlWindow',
   cancelcontrolWindow = '/monitor/demo/avePress/cancel-controlWindow',
+  getO2PressData = '/safety/ventanalyDevice/getO2PredictData',
 }
 /**
  * 列表接口
@@ -63,3 +64,16 @@ export const validPassword = (params) =>
     if (e.success) return Promise.resolve(e.result);
     throw e.message;
   });
+
+/**
+ * 大气压与氧气浓度关系图
+ * @param params
+ */
+
+export const getO2PressData = (params) => {
+  // 将对象参数转换为query string
+  const queryString = new URLSearchParams(params).toString();
+  return defHttp.post({
+    url: `${Api.getO2PressData}?${queryString}`,
+  });
+};

src/views/vent/monitorManager/balancePressMonitor/balancePressO2.data.ts

@@ -0,0 +1,89 @@
+import { data } from 'emoji-mart-vue-fast/data/apple.json';
+import { reactive, ref } from 'vue';
+import echarts from '/@/utils/lib/echarts';
+import { ModuleDataChart } from '/@/views/vent/deviceManager/configurationTable/types';
+export const PressO2Option: ModuleDataChart = {
+  type: 'scatter',
+  readFrom: '',
+  legend: { show: true },
+  xAxis: [{ show: true }],
+  yAxis: [
+    {
+      show: true,
+      name: '氧气',
+      position: 'left',
+    },
+    {
+      show: true,
+      name: '大气压',
+      position: 'right',
+    },
+  ],
+  series: [
+    {
+      type: 'scatter',
+      readFrom: 'chartData',
+      xprop: 'dateTime',
+      yprop: 'o2Val',
+      label: '氧气',
+      color: '#5470C6',
+      yAxisIndex: 0,
+    },
+    {
+      type: 'line',
+      readFrom: 'chartData',
+      xprop: 'dateTime',
+      yprop: 'o2Val',
+      label: '氧气曲线',
+      color: '#ff7b00ff',
+      yAxisIndex: 0,
+    },
+    {
+      type: 'scatter',
+      readFrom: 'chartData',
+      xprop: 'dateTime',
+      yprop: 'pressureVal',
+      label: '大气压',
+      color: '#EE6666',
+      yAxisIndex: 1,
+    },
+    {
+      type: 'line',
+      readFrom: 'chartData',
+      xprop: 'dateTime',
+      yprop: 'pressureVal',
+      label: '大气压曲线',
+      color: '#0400ffff',
+      yAxisIndex: 1,
+    },
+  ],
+};
+export const mockData1 = {
+  chartData: [
+    {
+      dateTime: '2025-10-14 14:00:00',
+      o2Val: '14.08',
+      pressureVal: '890',
+    },
+    {
+      dateTime: '2025-10-14 15:00:00',
+      o2Val: '14.08',
+      pressureVal: '890',
+    },
+    {
+      dateTime: '2025-10-14 16:00:00',
+      o2Val: '14.08',
+      pressureVal: '890',
+    },
+    {
+      dateTime: '2025-10-14 17:00:00',
+      o2Val: '14.1',
+      pressureVal: '889',
+    },
+    {
+      dateTime: '2025-10-14 18:00:00',
+      o2Val: '14.08',
+      pressureVal: '890',
+    },
+  ],
+};

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

@@ -66,6 +66,12 @@
               </div>
             </template>
           </ventBox1>
+          <ventBox1 class="">
+            <template #title>
+              <div>基于大气压的氧气浓度预测值</div>
+            </template>
+            <template #container> <CustomChart :chart-config="PressO2Option" :chart-data="mockData" height="220px" /> </template>
+          </ventBox1>
         </div>
       </div>
       <div class="lr right-box ml-5px">
@@ -133,238 +139,260 @@
   </a-spin>
 </template>
 <script setup lang="ts" name="balancePressHome">
-  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps, watch } from 'vue';
-  import ventBox1 from '/@/components/vent/ventBox1.vue';
-  import { SvgIcon } from '/@/components/Icon';
-  import { mountedThree, destroy, setModelType, updateText, play } from '../balancePress.threejs';
-  import { settingParam1, settingParam2, settingParam3, windowParam, localFanParam, windrectParam } from '../balancePress.data';
-  import { list, submit, subList, submitEdit } from '../balancePress.api';
-  import { message } from 'ant-design-vue';
-  import { get } from 'lodash-es';
+import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps, watch, computed } from 'vue';
+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 { SvgIcon } from '/@/components/Icon';
+import { mountedThree, destroy, setModelType, updateText, play } from '../balancePress.threejs';
+import { settingParam1, settingParam2, settingParam3, windowParam, localFanParam, windrectParam } from '../balancePress.data';
+import { list, submit, subList, submitEdit, getO2PressData } from '../balancePress.api';
+import { message } from 'ant-design-vue';
+import { get } from 'lodash-es';
+const props = defineProps({
+  deviceId: {
+    type: String,
+    require: true,
+  },
+});
+const loading = ref(false);
+// 默认初始是第一行
+const isAutoControl = ref('1');
+const O2PressDataFetched = ref(false);
+// 监测数据
+const selectData = reactive({
+  frontRearDP: '-',
+  sourcePressure: '-',
+  fault: '-',
+});
+const monitorParam = [
+  {
+    title: '监测值',
+    code: 'readData.ss_analog_value',
+    unit: '',
+  },
+];
+const changeType = (isAutoControl) => {
+  isAutoControl;
+  //
+};
 
-  const props = defineProps({
-    deviceId: {
-      type: String,
-      require: true,
-    },
-  });
+let listData = ref<any[]>([]);
 
-  const loading = ref(false);
-
-  // 默认初始是第一行
-  const isAutoControl = ref('1');
+// 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);
+        }
+        if (timer) {
+          timer = null;
+        }
+        await getMonitor();
+        loading.value = false;
+      },
+      flag ? 0 : 1000
+    );
+  }
+}
 
-  // 监测数据
-  const selectData = reactive({
-    frontRearDP: '-',
-    sourcePressure: '-',
-    fault: '-',
+const safetyMonitorData = ref<any[]>([]);
+const fanlocalMonitorData = ref<any[]>([]);
+const windowMonitorData = ref<any[]>([]);
+const windrectMonitorData = ref<any[]>([]);
+const modelsensorO2Data = ref<any[]>([]);
+const mockData = ref<{ chartData: { dateTime: string; o2Val: string; pressureVal: string }[] }>({
+  chartData: [],
+});
+const chartData1 = ref<any[]>([]);
+async function getDataSource(systemID) {
+  const res = await list({ devicetype: 'sys', systemID });
+  const result = res.msgTxt;
+  safetyMonitorData.value = [];
+  fanlocalMonitorData.value = [];
+  windowMonitorData.value = [];
+  windrectMonitorData.value = [];
+  modelsensorO2Data.value = [];
+  result.forEach((item) => {
+    if (item.type.startsWith('safetymonitor')) {
+      safetyMonitorData.value.push(...item.datalist);
+    }
+    if (item.type.startsWith('fanlocal')) {
+      item.datalist.forEach((e) => {
+        const f1Run = e.readData.Fan1StartStatus == '1';
+        e.FanfHz = f1Run ? e.readData.Fan1_Frequency : e.readData.Fan2_Frequency;
+        e.FanRun = f1Run ? '1#风机' : '2#风机';
+      });
+      fanlocalMonitorData.value.push(...item.datalist);
+    }
+    if (item.type.startsWith('window')) {
+      windowMonitorData.value.push(...item.datalist);
+    }
+    if (item.type.startsWith('windrect')) {
+      windrectMonitorData.value.push(...item.datalist);
+    }
+    if (item.type.startsWith('modelsensor_o2')) {
+      modelsensorO2Data.value.push(...item.datalist);
+    }
   });
-  const monitorParam = [
-    {
-      title: '监测值',
-      code: 'readData.ss_analog_value',
-      unit: '',
-    },
-  ];
-  const changeType = (isAutoControl) => {
-    isAutoControl;
-    //
+  if (!O2PressDataFetched.value) {
+    O2PressDataFetched.value = true;
+    getO2Press(modelsensorO2Data.value);
+  }
+}
+async function getO2Press(params) {
+  const deviceID = params[0].deviceID;
+  const param = {
+    deviceId: deviceID,
   };
+  const res = await getO2PressData(param);
 
-  let listData = ref<any[]>([]);
+  const chartData = [...res.o2HistoryDataList, ...res.o2List];
+  mockData.value = { chartData };
+  O2PressDataFetched.value = true;
+}
 
-  // 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);
-          }
-          if (timer) {
-            timer = null;
-          }
-          await getMonitor();
-          loading.value = false;
-        },
-        flag ? 0 : 1000
-      );
+// 喷粉操作
+async function onSubmit() {
+  if (listData.value.length != 0) {
+    //编辑
+    let res = await submitEdit(listData.value[0]);
+    if (res) {
+      initParamList();
     }
-  }
-
-  const safetyMonitorData = ref<any[]>([]);
-  const fanlocalMonitorData = ref<any[]>([]);
-  const windowMonitorData = ref<any[]>([]);
-  const windrectMonitorData = ref<any[]>([]);
-
-  async function getDataSource(systemID) {
-    const res = await list({ devicetype: 'sys', systemID });
-    const result = res.msgTxt;
-    safetyMonitorData.value = [];
-    fanlocalMonitorData.value = [];
-    windowMonitorData.value = [];
-    windrectMonitorData.value = [];
-    result.forEach((item) => {
-      if (item.type.startsWith('safetymonitor')) {
-        safetyMonitorData.value.push(...item.datalist);
-      }
-      if (item.type.startsWith('fanlocal')) {
-        item.datalist.forEach((e) => {
-          const f1Run = e.readData.Fan1StartStatus == '1';
-          e.FanfHz = f1Run ? e.readData.Fan1_Frequency : e.readData.Fan2_Frequency;
-          e.FanRun = f1Run ? '1#风机' : '2#风机';
-        });
-        fanlocalMonitorData.value.push(...item.datalist);
-      }
-      if (item.type.startsWith('window')) {
-        windowMonitorData.value.push(...item.datalist);
-      }
-      if (item.type.startsWith('windrect')) {
-        windrectMonitorData.value.push(...item.datalist);
-      }
-    });
-  }
-
-  // 喷粉操作
-  async function onSubmit() {
-    if (listData.value.length != 0) {
-      //编辑
-      let res = await submitEdit(listData.value[0]);
-      if (res) {
-        initParamList();
-      }
-    } else {
-      //新增
-      let res = await submit(formData.value);
-      if (res) {
-        initParamList();
-        message.success('提交成功');
-      }
+  } else {
+    //新增
+    let res = await submit(formData.value);
+    if (res) {
+      initParamList();
+      message.success('提交成功');
     }
   }
+}
 
-  //获取低氧参数监测返显列表
-  async function initParamList() {
-    let res = await subList();
-    if (res && res.records && res.records.length != 0) {
-      listData.value = res.records;
-      formData.value = res.records[0];
-    }
+//获取低氧参数监测返显列表
+async function initParamList() {
+  let res = await subList();
+  if (res && res.records && res.records.length != 0) {
+    listData.value = res.records;
+    formData.value = res.records[0];
   }
+}
 
-  watch(
-    () => props.deviceId,
-    (newVal, oldVal) => {
-      if (newVal && oldVal != undefined) {
-        setModelType('balancePressBase');
-      }
-      loading.value = true;
+watch(
+  () => props.deviceId,
+  (newVal, oldVal) => {
+    if (newVal && oldVal != undefined) {
+      setModelType('balancePressBase');
     }
-  );
+    loading.value = true;
+  }
+);
 
-  const formData = ref({
-    id: '',
-    coMaxStart: 0,
-    o2MinStart: 0,
-    coRiseStart: 0,
-    o2DownStart: 0,
-    windowAreaSetGrad: 0,
-    windowSetTime: 0,
-    windowMinArea: 0,
-    windowAreaDef: 0,
-    setMinTime: 0,
-    coEnd: 0,
-    coTimeEnd: 0,
-    o2End: 0,
-    o2TimeEnd: 0,
-  });
+const formData = ref({
+  id: '',
+  coMaxStart: 0,
+  o2MinStart: 0,
+  coRiseStart: 0,
+  o2DownStart: 0,
+  windowAreaSetGrad: 0,
+  windowSetTime: 0,
+  windowMinArea: 0,
+  windowAreaDef: 0,
+  setMinTime: 0,
+  coEnd: 0,
+  coTimeEnd: 0,
+  o2End: 0,
+  o2TimeEnd: 0,
+});
 
-  onBeforeMount(() => {});
+onBeforeMount(() => {});
 
-  onMounted(() => {
-    loading.value = true;
-    mountedThree().then(async () => {
-      await setModelType('balancePressBase'); //balancePressBase
-      loading.value = false;
-      timer = null;
-      await initParamList();
-      await getMonitor(true);
-      play('startSmoke', 'top', 30, 'open', 0);
-    });
+onMounted(() => {
+  loading.value = true;
+  mountedThree().then(async () => {
+    await setModelType('balancePressBase'); //balancePressBase
+    loading.value = false;
+    timer = null;
+    await initParamList();
+    await getMonitor(true);
+    play('startSmoke', 'top', 30, 'open', 0);
   });
+});
 
-  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;
+}
+.auto-control {
+  padding: 10px 8px;
+  margin: 0 4px 4px 4px;
+  border-radius: 4px;
+  border: 1px solid #ffffff05;
+  background-image: linear-gradient(to left, #39deff15, #3977e500, #39deff15);
+}
+.divider-line {
+  position: relative;
+  color: aqua;
+  padding-left: 20px;
+  font-size: 14px;
+  &::before {
+    position: absolute;
+    content: '';
+    display: block;
+    top: 10px;
+    left: 0;
+    height: 1px;
+    width: 15px;
+    background-color: #ffffff33;
   }
-  .lr {
-    width: 340px !important;
+  &::after {
+    position: absolute;
+    content: '';
+    display: block;
+    top: 10px;
+    right: 0;
+    height: 1px;
+    width: calc(100% - 85px);
+    background-color: #ffffff33;
   }
-  .auto-control {
-    padding: 10px 8px;
-    margin: 0 4px 4px 4px;
-    border-radius: 4px;
-    border: 1px solid #ffffff05;
-    background-image: linear-gradient(to left, #39deff15, #3977e500, #39deff15);
-  }
-  .divider-line {
-    position: relative;
-    color: aqua;
-    padding-left: 20px;
-    font-size: 14px;
-    &::before {
-      position: absolute;
-      content: '';
-      display: block;
-      top: 10px;
-      left: 0;
-      height: 1px;
-      width: 15px;
-      background-color: #ffffff33;
-    }
-    &::after {
-      position: absolute;
-      content: '';
-      display: block;
-      top: 10px;
-      right: 0;
-      height: 1px;
-      width: calc(100% - 85px);
-      background-color: #ffffff33;
-    }
-  }
-  .input-value {
-    width: 120px !important;
-  }
-  .unit {
-    text-align: right;
-  }
-  .btn-box {
-    margin: 10px 4px;
-    .btn1 {
-      padding: 4px 0;
-    }
+}
+.input-value {
+  width: 120px !important;
+}
+.unit {
+  text-align: right;
+}
+.btn-box {
+  margin: 10px 4px;
+  .btn1 {
+    padding: 4px 0;
   }
+}
 
-  :deep(.@{ventSpace}-tabs-tabpane-active) {
-    overflow: auto;
-  }
+:deep(.@{ventSpace}-tabs-tabpane-active) {
+  overflow: auto;
+}
 
-  :deep(.@{ventSpace}-input-number) {
-    border-color: #ffffff88 !important;
-  }
+:deep(.@{ventSpace}-input-number) {
+  border-color: #ffffff88 !important;
+}
 </style>

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>

src/views/vent/monitorManager/comment/GroupMonitorTable.vue

@@ -207,7 +207,7 @@
       width: 40,
       align: 'center',
       customCell: (_, index) => {
-        const columnNum = _.modalTyoe === 'lijing_3' ? 3 : 2;
+        const columnNum = _.modalTyoe ? (_.modalTyoe.endsWith('_3') ? 3 : _.modalTyoe.endsWith('_1') ? 1 : 2) : 2;
         if (_.rowIndex % columnNum == 0) {
           return { rowSpan: columnNum };
         } else {
@@ -221,8 +221,7 @@
       width: 80,
       align: 'center',
       customCell: (_, index) => {
-        debugger;
-        const columnNum = _.modalTyoe === 'lijing_3' ? 3 : 2;
+        const columnNum = _.modalTyoe ? (_.modalTyoe.endsWith('_3') ? 3 : _.modalTyoe.endsWith('_1') ? 1 : 2) : 2;
         if (_.rowIndex % columnNum == 0) {
           return { rowSpan: columnNum };
         } else {
@@ -230,7 +229,6 @@
         }
       },
       customRender: ({ text, record, index }) => {
-        const columnNum = record.modalTyoe === 'lijing_3' ? 3 : 2;
         return record.index + 1;
       },
     };
@@ -252,7 +250,8 @@
     });
     if (strinstallpos) {
       strinstallpos.customCell = (_, index) => {
-        const columnNum = _.modalTyoe === 'lijing_3' ? 3 : 2;
+        debugger;
+        const columnNum = _.modalTyoe ? (_.modalTyoe.endsWith('_3') ? 3 : _.modalTyoe.endsWith('_1') ? 1 : 2) : 2;
         if (_.rowIndex % columnNum == 0) {
           return { rowSpan: columnNum };
         } else {
@@ -263,7 +262,7 @@
     columns.value.forEach((item) => {
       if (item.dataIndex === 'strinstallpos' || item.dataIndex === 'strname' || item.dataIndex.endsWith('_merge')) {
         item.customCell = (_, index) => {
-          const columnNum = _.modalTyoe === 'lijing_3' ? 3 : 2;
+          const columnNum = _.modalTyoe ? (_.modalTyoe.endsWith('_3') ? 3 : _.modalTyoe.endsWith('_1') ? 1 : 2) : 2;
           if (_.rowIndex % columnNum == 0) {
             return { rowSpan: columnNum };
           } else {
@@ -290,7 +289,7 @@
           align: 'center',
           slots: { customRender: 'operation' },
           customCell: (_, index) => {
-            const columnNum = _.modalTyoe === 'lijing_3' ? 3 : 2;
+            const columnNum = _.modalTyoe ? (_.modalTyoe.endsWith('_3') ? 3 : _.modalTyoe.endsWith('_1') ? 1 : 2) : 2;
             if (_.rowIndex % columnNum == 0) {
               return { rowSpan: columnNum };
             } else {
@@ -392,6 +391,7 @@
           }
         });
         resultData1['deviceID'] = resultData2['deviceID'] = data['deviceID'];
+        debugger;
         if (props.columnsType.startsWith('fanlocal') && sysOrgCode !== 'zmhjhzmy') {
           resultData1['runDevice'] = '主机';
           resultData2['runDevice'] = '备机';
@@ -415,8 +415,10 @@
           resultData2['index'] = index;
           resultData3['index'] = index;
         }
-        if (modalTyoe === 'lijing_3') {
+        if (modalTyoe && modalTyoe.endsWith('_3')) {
           list.push(resultData1, resultData2, resultData3);
+        } else if (modalTyoe && modalTyoe.endsWith('_1')) {
+          list.push(resultData1);
         } else {
           list.push(resultData1, resultData2);
         }

src/views/vent/monitorManager/deviceMonitor/components/device/index.vue

@@ -941,7 +941,7 @@
         //   deviceActive.value = deviceArr[0].deviceType
         //   monitorChange(0)
         // }
-        deviceActive.value = deviceArr[0].deviceType;
+        // deviceActive.value = route.query['deviceActive'] || deviceArr[0].deviceType;
         monitorChange(0);
       }
     } else {
@@ -1350,6 +1350,7 @@
   function monitorChange(index) {
     dataSource.value = [];
     deviceActive.value = deviceList.value[index].deviceType;
+    router.replace({ path: route.path, query: { ...route.query, deviceactive: deviceActive.value } });
     if (deviceType.value != deviceActive.value) deviceType.value = deviceActive.value;
     if (activeKey.value == 'monitor' && monitorTable.value) {
       monitorTable.value.setLoading(true);
@@ -1400,6 +1401,15 @@
     { immediate: true }
   );
 
+  watch(
+    () => deviceActive.value,
+    async (val) => {
+      if (val) {
+        router.push({ path: route.path, query: { ...route.query, deviceactive: deviceActive.value } });
+      }
+    }
+  );
+
   onMounted(async () => {
     const pageObj = props.pageData;
     if (!pageObj) return;
@@ -1423,7 +1433,6 @@
       locationList.value = await devPosition({});
     }
 
-    router.push({ path: route.path, query: { ...route.query, tabtype: activeKey.value } });
     // safetyOption.value = await safetyDeviceList(null, { devicetype: 'safetymonitor', code: 'dataTypeName' })
   });
 

src/views/vent/monitorManager/deviceMonitor/index.vue

@@ -37,7 +37,7 @@
   };
 
   watch(
-    () => route.fullPath,
+    () => route.query.type + '' + route.query.deviceType,
     () => {
       const { type, deviceType, deviceid } = route.query;
       if (type === 'tunMonitor') {

src/views/vent/monitorManager/gateMonitor/gate.data.ts

@@ -2,6 +2,8 @@ import { defineAsyncComponent } from 'vue';
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { rules } from '/@/utils/helper/validator';
+import EntryThree from './components/entryThree.vue';
+
 export const columns: BasicColumn[] = [
   {
     title: '名称',
@@ -317,10 +319,10 @@ export const chartsColumns = [
 ];
 
 export function getModelComponent(is2DModel: boolean = false, sysOrgCode?: string) {
+  if (!is2DModel) return EntryThree;
   // @ts-ignore
   return defineAsyncComponent(() => {
     // return import('./components/gateTripleSVG.vue');
-    if (!is2DModel) return import('./components/entryThree.vue');
     switch (sysOrgCode) {
       // case '000000':
       //   双道风门

src/views/vent/monitorManager/mainFanMonitor/components/AnalysisTable.vue

@@ -21,7 +21,7 @@ const Warncolumns = ref([
     title: '设备名称',
     align: 'center',
     width: 200,
-    customRender: () => '羊马河主通风机',
+    customRender: () => '特拉布拉主风机',
   },
   {
     title: '故障描述',

src/views/vent/monitorManager/mainFanMonitor/index.vue

@@ -273,11 +273,15 @@
             <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 0 }" @click="selectDevice('dataMonitorRowIndex', 0)"
               >1#风机</div
             >
-            <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 1 }" @click="selectDevice('dataMonitorRowIndex', 1)"
+            <div
+              v-if="currentData && ((currentData['modalTyoe'] && !currentData['modalTyoe'].endsWith('_1')) || !currentData['modalTyoe'])"
+              class="tab-item"
+              :class="{ 'tab-item-active-r': dataMonitorRowIndex == 1 }"
+              @click="selectDevice('dataMonitorRowIndex', 1)"
               >2#风机</div
             >
             <div
-              v-if="currentData && currentData['modalTyoe'] === 'lijing_3'"
+              v-if="currentData && currentData['modalTyoe'] && currentData['modalTyoe'].endsWith('_3')"
               class="tab-item"
               :class="{ 'tab-item-active-r': dataMonitorRowIndex == 2 }"
               @click="selectDevice('dataMonitorRowIndex', 2)"
@@ -329,11 +333,15 @@
             <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 0 }" @click="selectDevice('warningMonitorRowIndex', 0)"
               >1#风机</div
             >
-            <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 1 }" @click="selectDevice('warningMonitorRowIndex', 1)"
+            <div
+              v-if="currentData && ((currentData['modalTyoe'] && !currentData['modalTyoe'].endsWith('_1')) || !currentData['modalTyoe'])"
+              class="tab-item"
+              :class="{ 'tab-item-active-r': warningMonitorRowIndex === 1 }"
+              @click="selectDevice('warningMonitorRowIndex', 1)"
               >2#风机</div
             >
             <div
-              v-if="currentData && currentData['modalTyoe'] === 'lijing_3'"
+              v-if="currentData && currentData['modalTyoe'] && currentData['modalTyoe'].endsWith('_3')"
               class="tab-item"
               :class="{ 'tab-item-active-r': warningMonitorRowIndex === 2 }"
               @click="selectDevice('warningMonitorRowIndex', 2)"
@@ -610,11 +618,11 @@
               <AlarmHistoryTable columns-type="alarm" :device-type="deviceType" designScope="alarm-history" :scroll="scroll" />
             </div>
           </a-tab-pane>
-          <!-- <a-tab-pane key="8" v-if="sysOrgCode === 'hnjtymhmk'" tab="故障诊断分析">
+          <a-tab-pane key="8" v-if="sysOrgCode === 'wljttlbl'" tab="故障诊断分析">
             <div class="tab-item" v-if="activeKey === '8'">
               <AnalysisTable />
             </div>
-          </a-tab-pane> -->
+          </a-tab-pane>
           <a-tab-pane key="6" tab="操作历史" v-if="hasPermission('show:handlerHistory')">
             <div v-if="activeKey == '6' && deviceType" class="tab-item">
               <HandlerHistoryTable
@@ -700,13 +708,16 @@
           <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan1Stop')">停止</div>
           <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan1Reset')">复位</div>
         </div>
-        <div class="startSmoke-select">
+        <div
+          v-if="currentData && ((currentData['modalTyoe'] && !currentData['modalTyoe'].endsWith('_1')) || !currentData['modalTyoe'])"
+          class="startSmoke-select"
+        >
           <div class="label">2#风机：</div>
           <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan2Open')">开启</div>
           <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan2Stop')">停止</div>
           <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan2Reset')">复位</div>
         </div>
-        <div v-if="currentData && currentData['modalTyoe'] === 'lijing_3'" class="startSmoke-select">
+        <div v-if="currentData && currentData['modalTyoe'] && currentData['modalTyoe'].endsWith('_3')" class="startSmoke-select">
           <div class="label">3#风机：</div>
           <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan3Open')">开启</div>
           <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan3Stop')">停止</div>
@@ -720,12 +731,15 @@
           <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan1Open')">开启</div>
           <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan1Stop')">停止</div>
         </div>
-        <div class="startSmoke-select">
+        <div
+          v-if="currentData && ((currentData['modalTyoe'] && !currentData['modalTyoe'].endsWith('_1')) || !currentData['modalTyoe'])"
+          class="startSmoke-select"
+        >
           <div class="label">2#风机：</div>
           <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan2Open')">开启</div>
           <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan2Stop')">停止</div>
         </div>
-        <div v-if="currentData && currentData['modalTyoe'] === 'lijing_3'" class="startSmoke-select">
+        <div v-if="currentData && currentData['modalTyoe'] && currentData['modalTyoe'].endsWith('_3')" class="startSmoke-select">
           <div class="label">3#风机：</div>
           <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan3Open')">开启</div>
           <div :class="{ 'button-box': true, 'button-disable': false }" @click="handleOk('Fan3Stop')">停止</div>
@@ -827,7 +841,7 @@
   <!-- 摄像头显示隐藏图标 -->
   <VideoCameraOutlined class="video-icon" :class="{ 'no-play': !showPlay }" @click="changePlay" />
   <!-- 主风机故障诊断显示隐藏图标 -->
-  <div v-if="hasPermission('mainFan:isOpenAlarm')" class="warn-icon" @click="showModalWarn"></div>
+  <div v-if="hasPermission('mainFan:isOpenAlarm') && sysOrgCode !== 'wljttlbl'" class="warn-icon" @click="showModalWarn"></div>
   <!-- 工况辅助决策 -->
   <ConditionAssistance @register="registerModal" :deviceType="deviceType" :selectData="currentData" />
   <DeviceBaseInfo @register="registerModalDeviceEdit" :device-type="selectData['deviceType']" />
@@ -1184,7 +1198,7 @@
               Object.assign(selectData, dataSource.value[selectRowIndex.value]);
             }
 
-            if (selectData['modalTyoe'] === 'lijing_3') {
+            if (currentData.value && currentData.value['modalTyoe'] && currentData.value['modalTyoe'].endsWith('_3')) {
               if (selectData['Fan1StartStatus'] == 1) {
                 frontMonitorIsShow.value = true;
                 centerMonitorIsShow.value = false;

src/views/vent/monitorManager/windowMonitor/window.data.ts

@@ -2,6 +2,8 @@ import { BasicColumn } from '/@/components/Table';
 import { defineAsyncComponent } from 'vue';
 import { FormSchema } from '/@/components/Table';
 import { rules } from '/@/utils/helper/validator';
+import EntryThree from './components/entryThree.vue';
+
 export const columns: BasicColumn[] = [
   {
     title: '名称',
@@ -306,10 +308,9 @@ export const chartsColumns = [
 
 const componentsCaches = new Map<string, any>();
 export function getModelComponent(is2DModel: boolean = false, type: string = '') {
+  if (!is2DModel) return EntryThree;
   // @ts-ignore
   return defineAsyncComponent(() => {
-    if (!is2DModel) return import('./components/entryThree.vue');
-
     // 为了支持SVG组件切换时不闪烁，先行下载并缓存
     if (!componentsCaches.has('windowSVG')) componentsCaches.set('windowSVG', import('./components/windowSVG.vue'));
     if (!componentsCaches.has('windowDualSVG')) componentsCaches.set('windowDualSVG', import('./components/windowDualSVG.vue'));

src/views/vent/monitorManager/windrectMonitor/windrect.data.ts

@@ -1,7 +1,7 @@
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { rules } from '/@/utils/helper/validator';
-import { reactive } from 'vue';
+import EntryThree from './components/entryThree.vue';
 import { defineAsyncComponent } from 'vue';
 
 export const resultColumns: BasicColumn[] = [
@@ -430,9 +430,9 @@ export const option = {
 };
 const componentsCaches = new Map<string, any>();
 export function getModelComponent(is2DModel: boolean = false, type: string = '') {
+  if (!is2DModel) return EntryThree;
   // @ts-ignore
   return defineAsyncComponent(() => {
-    if (!is2DModel) return import('./components/entryThree.vue');
     // 为了支持SVG组件切换时不闪烁，先行下载并缓存
     if (!componentsCaches.has('scanSVG')) componentsCaches.set('scanSVG', import('./components/scanSVG.vue'));
     if (!componentsCaches.has('fixedSVG')) componentsCaches.set('fixedSVG', import('./components/fixedSVG.vue'));