初始化

# Conflicts:
#	src/components/vue-components/vue-characters.vue
#	src/utils/config.ts

STOMP_INTEGRATION.md

@@ -0,0 +1,175 @@
+# STOMP 集成完成
+
+## 已创建的文件
+
+### 核心文件
+1. **`src/utils/stompService.ts`** - STOMP 核心服务
+   - 完整的 STOMP 客户端封装（基于 @stomp/stompjs）
+   - 支持连接、订阅、发布
+   - 自动重连机制
+   - 服务注册和消息分发
+
+### 示例文件
+2. **`src/utils/STOMP_USAGE.md`** - 详细使用文档
+   - API 文档
+   - 使用示例
+   - 迁移指南
+   - 故障排除
+
+3. **`src/services/nodeService.ts`** - Node 服务示例
+   - 展示如何封装业务服务
+   - 设备节点管理
+   - 消息处理逻辑
+
+4. **`src/components/StompDemo.vue`** - Vue 组件示例
+   - 完整的演示界面
+   - 连接控制
+   - 消息发送和日志
+
+## 快速开始
+
+### 1. 在 main.ts 中初始化
+
+```typescript
+import { createApp } from 'vue';
+import App from './App.vue';
+import { stompService } from './utils/stompService';
+
+const app = createApp(App);
+
+// 连接 STOMP 服务器（默认地址：ws://localhost:8080/stomp-endpoint）
+stompService.connect({
+  // 可选配置
+  // brokerUrl: 'ws://your-server:8080/stomp-endpoint',
+  // username: 'admin',
+  // password: 'password',
+  reconnectDelay: 5000
+});
+
+app.mount('#app');
+```
+
+### 2. 在组件中使用
+
+```vue
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import { stompService, MqttCmd } from '@/utils/stompService';
+
+onMounted(() => {
+  // 注册服务
+  stompService.registerService('myService', {
+    mqttReady() {
+      console.log('STOMP 已就绪');
+    },
+    
+    msgNode(value) {
+      console.log('收到 Node 消息:', value);
+    }
+  });
+});
+
+// 发送消息
+function sendCommand() {
+  stompService.send('/app/web/write', MqttCmd.Control, {
+    nodeId: 'node-001',
+    action: 'turnOn'
+  });
+}
+</script>
+```
+
+### 3. 查看演示
+
+将 `StompDemo.vue` 组件添加到您的路由中：
+
+```typescript
+// router/index.ts
+import StompDemo from '@/components/StompDemo.vue';
+
+{
+  path: '/stomp-demo',
+  name: 'StompDemo',
+  component: StompDemo
+}
+```
+
+然后访问 `/stomp-demo` 查看演示界面。
+
+## 主要特性
+
+✅ **自动重连** - 连接丢失后自动重连（默认 5 秒间隔）  
+✅ **服务注册** - 支持多个业务服务注册  
+✅ **消息分发** - 自动将消息分发到对应服务  
+✅ **TypeScript** - 完整的类型支持  
+✅ **错误处理** - 完善的错误处理和日志  
+✅ **易于扩展** - 可轻松添加新服务
+
+## 消息命令类型
+
+```typescript
+MqttCmd = {
+  Channel: 'channel',           // 通道状态
+  NodeInit: 'nodeInit',         // Node 初始化
+  Node: 'node',                 // Node 更新
+  User: 'user',                 // 用户登录
+  Control: 'control',           // 控制命令
+  VideoInit: 'videoInit',       // 视频初始化
+  VideoCtl: 'videoCtl',         // 视频控制
+  Lock: 'lock',                 // 锁控
+  Alarm: 'alarm',               // 告警
+  Info: 'info',                 // 通知提示
+  SocketDebugger: 'socketDebugger' // 调试
+}
+```
+
+## 从 ExtJS 迁移
+
+### ExtJS 版本
+```javascript
+Rec.mqtt.connect();
+Rec.service.node = { msgNode: function(data) {} };
+Rec.mqtt.send(cmd, value);
+```
+
+### Vue 版本
+```typescript
+import { stompService } from '@/utils/stompService';
+
+stompService.connect();
+stompService.registerService('node', { msgNode: (data) => {} });
+stompService.send('/app/web/write', cmd, value);
+```
+
+## 连接地址
+
+**默认连接地址：**
+- 开发环境：`ws://localhost:8080/stomp-endpoint`
+- 生产环境：`ws://your-domain/stomp-endpoint`
+
+**自定义连接地址：**
+```typescript
+stompService.connect({
+  brokerUrl: 'ws://192.168.1.100:8080/stomp-endpoint'
+});
+```
+
+## 注意事项
+
+1. **连接时机**: 建议在 `main.ts` 中应用启动时连接
+2. **服务注册**: 在组件的 `onMounted` 生命周期注册
+3. **资源清理**: 组件卸载时根据需要清理
+4. **TypeScript**: 所有方法都有完整类型定义
+
+## 需要帮助？
+
+- 查看 `src/utils/STOMP_USAGE.md` 获取详细文档
+- 查看 `src/components/StompDemo.vue` 获取完整示例
+- 查看 `src/services/nodeService.ts` 获取服务封装示例
+
+## 下一步
+
+1. 根据您的业务需求创建相应的服务
+2. 将现有的 ExtJS 服务迁移到新的架构
+3. 添加更多错误处理和日志记录
+4. 实现消息持久化和离线缓存

package.json

@@ -29,6 +29,7 @@
   },
   "typings": "dist/export.d.ts",
   "dependencies": {
+    "@stomp/stompjs": "^7.3.0",
     "@tweenjs/tween.js": "^25.0.0",
     "@vueuse/core": "^10.6.1",
     "ace-builds": "^1.32.0",
@@ -43,19 +44,24 @@
     "html2canvas": "^1.4.1",
     "less": "^4.2.0",
     "mitt": "^3.0.1",
+    "mqtt": "^5.15.0",
     "pinia": "^3.0.4",
+    "sockjs-client": "^1.6.1",
+    "sortablejs": "^1.15.7",
     "stats.js": "^0.17.0",
     "three": "^0.182.0",
     "vue": "^3.3.4",
     "vue-echarts": "^6.6.5",
     "vue-router": "^4.2.5",
-    "vue3-ace-editor": "^2.2.4"
+    "vue3-ace-editor": "^2.2.4",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
     "@tsconfig/node18": "^18.2.2",
     "@types/jsdom": "^21.1.3",
     "@types/node": "^18.18.5",
+    "@types/sortablejs": "^1.15.9",
     "@types/three": "^0.182.0",
     "@vitejs/plugin-vue": "^4.4.0",
     "@vue/eslint-config-prettier": "^8.0.0",

src/api/TableInfoController.ts

@@ -0,0 +1,14 @@
+import axios from '@/utils/axios';
+import type { ApiResponse } from '@/api/types';
+export async function getTableOptionsVOList(options?: { [key: string]: any }) {
+  return axios<ApiResponse<any[]>>('/tableInfo/get/list', {
+    method: 'GET',
+    ...(options || {})
+  });
+}
+export async function getTableInfoVO(options?: { [key: string]: any }) {
+  return axios<ApiResponse<any[]>>('/tableInfo/get/vo', {
+    method: 'GET',
+    ...(options || {})
+  });
+}

src/api/types/index.ts

@@ -0,0 +1,5 @@
+export interface ApiResponse<T = any> {
+  code: number;
+  message: string;
+  data: T;
+}

src/assets/css-vars.css

@@ -45,8 +45,8 @@
   --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
   --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
   --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
-  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000,
-    0px 8px 16px -8px #000000;
+  --el-box-shadow-dark:
+    0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
   --el-bg-color-page: #0a0a0a;
   --el-bg-color: #141414;
   --el-bg-color-overlay: #1d1e1f;

src/components/StompDemo.vue

@@ -0,0 +1,221 @@
+<template>
+  <el-card class="stomp-demo">
+    <template #header>
+      <div class="card-header">
+        <span>STOMP 连接演示</span>
+        <el-tag :type="isConnected ? 'success' : 'danger'">
+          {{ isConnected ? '已连接' : '未连接' }}
+        </el-tag>
+      </div>
+    </template>
+
+    <!-- 连接控制 -->
+    <div class="control-section">
+      <el-tag :type="isConnected ? 'success' : 'danger'" size="large">
+        {{ isConnected ? 'MQTT 已连接' : 'MQTT 未连接' }}
+      </el-tag>
+      <el-button type="primary" @click="reconnect" :disabled="isConnected">重新连接</el-button>
+    </div>
+
+    <!-- 消息发送 -->
+    <div class="message-section">
+      <h3>发送消息</h3>
+      <el-form :model="messageForm" label-width="80px" size="small">
+        <el-form-item label="命令类型">
+          <el-select v-model="messageForm.cmd" style="width: 100%">
+            <el-option
+              v-for="item in cmdOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="消息内容">
+          <el-input
+            v-model="messageForm.value"
+            type="textarea"
+            :rows="4"
+            placeholder='例如：{"nodeId": "node-001", "action": "turnOn"}'
+          />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="sendMessage" :disabled="!isConnected"> 发送 </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 消息日志 -->
+    <div class="log-section">
+      <h3>消息日志</h3>
+      <el-table :data="messageLogs" style="width: 100%" max-height="300" size="small">
+        <el-table-column prop="time" label="时间" width="180" />
+        <el-table-column prop="cmd" label="命令" width="150" />
+        <el-table-column prop="direction" label="方向" width="80">
+          <template #default="{ row }">
+            <el-tag :type="row.direction === '发送' ? 'primary' : 'success'" size="small">
+              {{ row.direction }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="content" label="内容" />
+      </el-table>
+      <el-button size="small" @click="clearLogs" style="margin-top: 10px"> 清空日志 </el-button>
+    </div>
+  </el-card>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { stompService, MqttCmd, type StompMessage } from '../utils/stompService';
+
+// 连接状态
+const isConnected = ref(false);
+
+// 消息表单
+const messageForm = reactive({
+  cmd: MqttCmd.Control,
+  value: ''
+});
+
+// 命令选项
+const cmdOptions = [
+  { label: '控制命令', value: MqttCmd.Control },
+  { label: 'Node 更新', value: MqttCmd.Node },
+  { label: '告警', value: MqttCmd.Alarm },
+  { label: '通知', value: MqttCmd.Info },
+  { label: '通道状态', value: MqttCmd.Channel }
+];
+
+// 消息日志
+const messageLogs = ref<
+  Array<{
+    time: string;
+    cmd: number;
+    direction: string;
+    content: string;
+  }>
+>([]);
+
+// 添加日志
+const addLog = (cmd: string, direction: string, content: string) => {
+  messageLogs.value.unshift({
+    time: new Date().toLocaleTimeString(),
+    cmd,
+    direction,
+    content: typeof content === 'string' ? content : JSON.stringify(content)
+  });
+
+  // 限制日志数量
+  if (messageLogs.value.length > 50) {
+    messageLogs.value.pop();
+  }
+};
+
+// 清空日志
+const clearLogs = () => {
+  messageLogs.value = [];
+};
+
+// 连接 STOMP
+const reconnect = () => {
+  stompService.disconnect();
+  setTimeout(() => {
+    stompService.connect({
+      reconnectDelay: 5000
+    });
+    ElMessage.info('正在重新连接 MQTT...');
+  }, 1000);
+};
+
+// 发送消息
+const sendMessage = () => {
+  if (!isConnected.value) {
+    ElMessage.warning('请先连接 STOMP');
+    return;
+  }
+
+  try {
+    const valueObj = JSON.parse(messageForm.value || '{}');
+    stompService.send('/app/web/write', messageForm.cmd, valueObj);
+    addLog(messageForm.cmd, '发送', valueObj);
+    ElMessage.success('消息已发送');
+  } catch (error) {
+    ElMessage.error('消息格式错误，请输入有效的 JSON');
+  }
+};
+
+// 注册服务
+onMounted(() => {
+  // 监听连接状态
+  stompService.registerService('demoComponent', {
+    mqttReady() {
+      console.log('[Demo] MQTT 已就绪');
+      isConnected.value = true;
+    },
+
+    onConnectionLost() {
+      console.log('[Demo] MQTT 连接丢失');
+      isConnected.value = false;
+      ElMessage.warning('MQTT 连接已断开，正在重连...');
+    }
+  });
+
+  // 监听 Node 消息
+  stompService.registerService('demoNode', {
+    msgNodeInit(value) {
+      addLog(MqttCmd.NodeInit, '接收', value);
+    },
+
+    msgNode(value) {
+      addLog(MqttCmd.Node, '接收', value);
+    }
+  });
+
+  // 监听告警消息
+  stompService.registerService('demoAlarm', {
+    alarm(value) {
+      addLog(MqttCmd.Alarm, '接收', value);
+      ElMessage.warning(`收到告警：${JSON.stringify(value)}`);
+    }
+  });
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+  // 不需要断开连接，因为 MQTT 是全局连接
+  console.log('[Demo] 组件卸载');
+});
+</script>
+
+<style scoped>
+.stomp-demo {
+  margin: 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.control-section {
+  margin-bottom: 20px;
+  display: flex;
+  gap: 10px;
+}
+
+.message-section,
+.log-section {
+  margin-top: 20px;
+}
+
+h3 {
+  margin: 10px 0;
+  font-size: 14px;
+  color: var(--el-text-color-primary);
+}
+</style>

src/components/custom-components/table-vue/StandardDataGrid.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import type { DataGridSchema } from './type';
+import type { PropType } from 'vue';
+const props = defineProps({
+  // 表格的列规范
+  columns: {
+    type: Array as PropType<DataGridSchema>,
+    required: true
+  },
+  // 表格的数据源
+  tableData: {
+    type: Array,
+    required: true
+  },
+  spanMethod: {
+    type: Function as PropType<
+      (
+        row: any,
+        column: any,
+        rowIndex: number,
+        columnIndex: number
+      ) => { rowspan: number; colspan: number } | null
+    >,
+    default: undefined
+  }
+});
+const emit = defineEmits(['on-action']);
+const handleActionClick = (actionKey: string, row: any) => {
+  emit('on-action', {
+    actionKey,
+    row
+  });
+};
+// 状态字典映射
+const getStatusConfig = (statusValue: string | number) => {
+  const dict: Record<string, { label: string; elType: string }> = {
+    normal: { label: '正常', elType: 'success' }, // 绿色
+    fault: { label: '故障', elType: 'warning' }, // 黄色
+    alarm: { label: '报警', elType: 'danger' }, // 红色
+    running: { label: '运行', elType: 'primary' }, // 蓝色
+    turnOn: { label: '开启', elType: 'info' }, // 灰色
+    turnOff: { label: '关闭', elType: 'info' }, // 灰色
+    no_action: { label: '未动作', elType: 'info' } // 灰色
+  };
+  return dict[statusValue] || { label: '未知', elType: 'info' };
+};
+</script>
+
+<template>
+  <div class="standard-data-grid">
+    <el-table :data="tableData" border :span-method="spanMethod">
+      <template v-for="(item, index) in columns" :key="item.key">
+        <el-table-column
+          v-if="item.children && item.children.length > 0"
+          :label="item.title"
+          :prop="item.key"
+          :align="item.align ?? 'center'"
+        >
+          <el-table-column
+            v-for="subItem in item.children"
+            :key="subItem.key"
+            :prop="subItem.key"
+            :label="subItem.title"
+            :align="subItem.align ?? 'center'"
+          >
+            <template #default="scope">
+              <div v-if="subItem.type === 'action'" class="action-btn-group">
+                <template v-for="btn in subItem.actions" :key="btn.actionKey">
+                  <el-button
+                    v-if="!btn.showOn || btn.showOn.values.includes(scope.row[btn.showOn.key])"
+                    :type="btn.btnType || 'primary'"
+                    size="small"
+                    @click="handleActionClick(btn.actionKey, scope.row)"
+                  >
+                    {{ btn.label }}
+                  </el-button>
+                </template>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table-column>
+        <el-table-column
+          v-else
+          :label="item.title"
+          :prop="item.key"
+          :align="item.align"
+          :width="item.width"
+          :min-width="item.minWidth"
+        >
+          <template #default="scope">
+            <span v-if="item.type === 'text'">
+              {{ scope.row[item.key] ?? '--' }}
+            </span>
+            <span v-else-if="item.type === 'number'">
+              {{ scope.row[item.key] }}<span class="unit">{{ item.unit }}</span>
+            </span>
+            <span v-else-if="item.type === 'status'">
+              <el-tag :type="getStatusConfig(scope.row[item.key]).elType">
+                {{ getStatusConfig(scope.row[item.key]).label }}
+              </el-tag>
+            </span>
+            <div v-else-if="item.type === 'action'" class="action-btn-group">
+              <template v-for="btn in item.actions" :key="btn.actionKey">
+                <el-button
+                  v-if="!btn.showOn || btn.showOn.values.includes(scope.row[btn.showOn.key])"
+                  :type="btn.btnType || 'primary'"
+                  :disabled="
+                    !btn.disabledOn || btn.disabledOn.values.includes(scope.row[btn.disabledOn.key])
+                  "
+                  @click="handleActionClick(btn.actionKey, scope.row)"
+                >
+                  {{ btn.label }}
+                </el-button>
+              </template>
+            </div>
+            <div
+              v-if="
+                item.horizontalMergeRule &&
+                scope.row[item.horizontalMergeRule.matchCondition.key] ===
+                  item.horizontalMergeRule.matchCondition.value
+              "
+            >
+              <div
+                v-if="item?.horizontalMergeRule.renderConfig?.type === 'action'"
+                class="merged-action-cell"
+              >
+                <el-button
+                  v-for="btn in item.horizontalMergeRule.renderConfig.actions"
+                  :key="btn.actionKey"
+                  :type="btn.btnType"
+                  @click="handleActionClick(btn.actionKey, scope.row)"
+                >
+                  {{ btn.label }}
+                </el-button>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+  </div>
+</template>
+
+<style scoped></style>

src/components/custom-components/table-vue/type/index.ts

@@ -0,0 +1,75 @@
+/**
+ *  表格列的基本规范
+ */
+interface BaseColumn {
+  // 表头的标题
+  title: string;
+  // 数据源对应的字段名
+  key: string;
+  // 列的宽度
+  width?: number | string;
+  // 单元格的显示位置
+  align?: 'left' | 'center' | 'right';
+  // 固定列
+  fixed?: 'left' | 'right';
+  // 最小宽度,适应不同大小的屏幕
+  minWidth?: number | string;
+  // 标记这个列是否需要纵向合并
+  mergeRow?: boolean;
+  // 标记这个列是否需要横向合并
+  horizontalMergeRule?: {
+    matchCondition: { key: string; value: string | boolean };
+    mergeKeys: string[];
+    renderConfig?: {
+      type: string;
+      actions?: ActionButton[];
+    };
+  };
+  // 多级表头
+  children?: TableColumnSchema[];
+  // 标记合并行时的参考列
+  mergeBy?: string;
+}
+// 纯文本列
+export interface TextColumn extends BaseColumn {
+  type: 'text';
+}
+// 状态列
+export interface StatusColumn extends BaseColumn {
+  type: 'status';
+  dictCode?: string;
+}
+// 数值列
+export interface NumberColumn extends BaseColumn {
+  type: 'number';
+  // 单位后缀
+  unit?: string;
+}
+// 操作列
+export interface ActionColumn extends BaseColumn {
+  type: 'action';
+  // 操作列包含按钮列表
+  actions: ActionButton[];
+}
+// 按钮定义的schema
+export interface ActionButton {
+  // 按钮的文字
+  label: string;
+  //抛出给外层的事件名
+  actionKey: string;
+  // 按钮的视觉类型
+  btnType?: 'primary' | 'default' | 'dashed' | 'danger' | 'link' | 'text';
+  // 根据状态值控制显示
+  showOn?: {
+    key: string; // 依赖哪一列数据
+    values: any[]; // 当值等于数组中的哪些项时，才显示按钮
+  };
+  // 根据状态来控制禁用
+  disabledOn?: {
+    key: string;
+    values: any[];
+  };
+  isRound?: boolean;
+}
+export type TableColumnSchema = TextColumn | StatusColumn | NumberColumn | ActionColumn;
+export type DataGridSchema = TableColumnSchema[];

src/components/custom-components/table-vue/utils/tableUtils.ts

@@ -0,0 +1,118 @@
+// 提取叶子节点列，解决多级表头索引对齐问题
+const getLeafColumns = (columns: any[]) => {
+  let leaves: any[] = [];
+  columns.forEach((col) => {
+    if (col.children && col.children.length > 0) {
+      leaves.push(...getLeafColumns(col.children));
+    } else {
+      leaves.push(col);
+    }
+  });
+  return leaves;
+};
+/**
+ *
+ * @param data 表格的数据源
+ * @param rowMergeConfigs 纵向合并配置 [{ key: 'xxx', mergeBy: 'yyy' }]
+ * @param rawColumns 表格列配置
+ */
+export const createRowSpanMethod = (
+  data: any[],
+  rawColumns: any[],
+  rowMergeConfigs: { key: string; mergeBy: string }[]
+) => {
+  // 1. 拍平获取物理叶子列
+  const columns = getLeafColumns(rawColumns);
+  const rowSpanInfos: Record<string, number[]> = {};
+  rowMergeConfigs.forEach((config) => {
+    const { key, mergeBy } = config;
+    rowSpanInfos[key] = [];
+    let position = 0;
+    data.forEach((item, index) => {
+      if (index === 0) {
+        rowSpanInfos[key].push(1);
+        position = 0;
+      } else {
+        // 如果当前行数据和上一行数据相等，则当前行不显示
+        if (
+          item[mergeBy] === data[index - 1][mergeBy] &&
+          !item.colMergeConfig &&
+          !data[index - 1].colMergeConfig
+        ) {
+          rowSpanInfos[key][position] += 1;
+          rowSpanInfos[key].push(0);
+        } else {
+          rowSpanInfos[key].push(1);
+          position = index;
+        }
+      }
+    });
+  });
+  return ({ row, column, rowIndex, columnIndex }: any) => {
+    // 优先处理横向合并
+    const ruleColumn = columns.find(
+      (col) =>
+        col.horizontalMergeRule &&
+        row[col.horizontalMergeRule.matchCondition.key] ===
+          col.horizontalMergeRule.matchCondition.value
+    );
+    if (ruleColumn) {
+      const rule = ruleColumn.horizontalMergeRule;
+      const targetKeys = rule.mergeKeys;
+      const validIndices = targetKeys
+        .map((key) => columns.findIndex((item) => item.key === key))
+        .filter((index) => index != -1);
+
+      if (validIndices.length > 0) {
+        const minIndex = Math.min(...validIndices);
+        const maxIndex = Math.max(...validIndices);
+        const actualColSpan = maxIndex - minIndex + 1;
+        if (columnIndex == minIndex) {
+          return {
+            rowspan: 1,
+            colspan: actualColSpan
+          };
+        }
+        if (columnIndex > minIndex && columnIndex <= maxIndex) {
+          return {
+            rowspan: 0,
+            colspan: 0
+          };
+        }
+      }
+    }
+    // 再处理纵向合并
+    const mergeTarget = rowMergeConfigs.find((c) => c.key === column.property);
+    if (mergeTarget) {
+      const rowspan = rowSpanInfos[column.property][rowIndex];
+      const colspan = rowspan > 0 ? 1 : 0;
+      return { rowspan, colspan };
+    }
+    return { rowspan: 1, colspan: 1 };
+  };
+};
+
+/**
+ * 通用数组聚合标记函数
+ * @param {Array} list - 原始数组
+ * @param {String} groupKey - 按照哪个字段进行分组统计 (例如 'deviceName')
+ * @param {String} flagName - 生成的布尔值标记名称 (例如 'isMultiNode')
+ */
+export const injectMultiNodeFlag = (list: any[], groupKey: string, flagName: string) => {
+  const countMap = {} as Record<string, number>;
+  // 统计
+  list.forEach((item) => {
+    const val = item[groupKey];
+    if (val) countMap[val] = (countMap[val] || 0) + 1;
+  });
+
+  // 映射
+  return list.map((item) => {
+    const val = item[groupKey];
+    if (!val) return item; // 非目标数据，直接返回
+    return {
+      ...item,
+      [flagName]: countMap[val] > 1 // 动态注入标记
+    };
+  });
+};

src/components/custom-components/table-vue/utils/useTableSpan.ts

@@ -0,0 +1,52 @@
+import { computed, type Ref, unref } from 'vue';
+import { createRowSpanMethod } from '@/components/custom-components/table-vue/utils/tableUtils';
+/**
+ *  只能表格合并 hook
+ * @param tableData 表格数据源
+ * @param tableColumns 表格列配置
+ */
+export function useTableSpan(tableData: Ref<any[]>, tableColumns: any[] | Ref<any[]>) {
+  const flatColumns = computed(() => {
+    const columns = unref(tableColumns); // 兼容普通对象和ref对象
+    const flatten = (cols: any[]): any[] => {
+      let result: any[] = [];
+      cols.forEach((col) => {
+        result.push(col);
+        if (col.children && col.children.length > 0) {
+          result.push(...flatten(col.children));
+        }
+      });
+      return result;
+    };
+    return flatten(columns);
+  });
+  //自动提取需要纵向合并的列配置
+  const rowMergeConfigs = computed(() => {
+    return flatColumns.value
+      .filter((col) => col.mergeRow)
+      .map((col) => {
+        return {
+          key: col.key,
+          mergeBy: col.mergeBy || col.key
+        };
+      });
+  });
+  // 判断表格需不需要开启合并引擎
+  const needSpan = computed(() => {
+    // 有任何列配置了纵向合并
+    const hasRowMerge = rowMergeConfigs.value.length;
+    // 有任何列配置了横向合并
+    const hasColMerge = flatColumns.value.some((col) => !!col.horizontalMergeRule);
+    return hasRowMerge || hasColMerge;
+  });
+  // 动态返回合并函数
+  const spanMethod = computed(() => {
+    if (!needSpan.value) {
+      return undefined;
+    }
+    return createRowSpanMethod(unref(tableData), unref(tableColumns), rowMergeConfigs.value);
+  });
+  return {
+    spanMethod
+  };
+}

src/components/menu/menuDoCreateMenu.vue

@@ -65,7 +65,6 @@
         <el-sub-menu
           :index="menu.children[0].name"
           v-if="menu.children && menu.children.length > 1"
-          @click="handleSubMenuClick(menu.children[0])"
         >
           <template #title>
             <el-icon>
@@ -113,6 +112,7 @@ const props = withDefaults(
 
 function isStairRoute(routeName: string) {
   if (stairRouteNames.includes(routeName)) {
+    console.log('getStairRoute:', routeName);
     emitter.emit('getStairRoute', routeName);
   }
 }
@@ -120,6 +120,7 @@ function isStairRoute(routeName: string) {
 const router = useRouter();
 
 function headerCliek(val: any) {
+  console.log('node01:', val.index);
   if (stairRouteNames.includes(val.index)) {
     isStairRoute(val.index);
   } else {
@@ -136,7 +137,17 @@ function headerCliek(val: any) {
 }
 
 function handleSubMenuTitleClick(menu: any) {
-  isStairRoute(menu.name);
+  console.log('node02:', menu.name);
+
+  if (stairRouteNames.includes(menu.name)) {
+    isStairRoute(menu.name);
+  } else {
+    stairRouteChildrenMap.forEach((children: string[], parent: string) => {
+      if (children.includes(menu.name)) {
+        isStairRoute(parent);
+      }
+    });
+  }
   // 点击子菜单标题时跳转到默认路由或父级路由
   router.push({
     name: menu.name,
@@ -146,6 +157,7 @@ function handleSubMenuTitleClick(menu: any) {
 
 // 处理子菜单点击（用于菜单收起时）
 function handleSubMenuClick(menu: any) {
+  console.log('node03:', menu.name);
   if (stairRouteNames.includes(menu.name)) {
     isStairRoute(menu.name);
     // 菜单收起时点击子菜单，展开菜单并跳转

src/components/mt-edit/components/draw-line-render/index.vue

@@ -83,8 +83,8 @@
                 ? 1000
                 : 0
               : lineRenderProps.itemJson.props.ani_play.val
-              ? 0
-              : 1000
+                ? 0
+                : 1000
           "
           :dur="`${
             lineRenderProps.itemJson.props.ani_dur.val < 1

src/components/mt-edit/components/layout/base-panel/imageModel.vue

@@ -42,10 +42,6 @@
 
         <!-- 按钮 -->
         <el-col :span="3" v-if="isUpload">
-          <!-- <el-form-item>
-              <el-button type="success">上传</el-button>
-            </el-form-item> -->
-
           <el-upload
             accept="image/*"
             :action="BASE_URL + '/fileStorage/saveFile'"
@@ -175,8 +171,6 @@ const props = defineProps({
   }
 });
 
-console.log('dialogImageVisible:', props.dialogImageVisible);
-
 const emit = defineEmits(['updateDialogImageVisible', 'bindingImg']);
 
 const bindingImg = (obj: any) => {
@@ -287,7 +281,6 @@ async function loadFileList() {
     startTime: form.fileDate ? new Date(form.fileDate[0]).getTime() : null,
     endTime: form.fileDate ? new Date(form.fileDate[1]).getTime() : null
   };
-  console.log('endJson:', endJson);
   const response = await modelApi.fileStorage_file_list_post(endJson);
   tableData.value = [];
   if (!response.data) {

src/components/mt-edit/components/layout/header-panel/index.vue

@@ -73,8 +73,8 @@
             </el-icon> </el-button
         ></el-button-group>
 
-        <!-- <el-divider direction="vertical"></el-divider> -->
-        <!-- <el-popover
+        <el-divider direction="vertical"></el-divider>
+        <el-popover
           placement="bottom"
           :width="240"
           trigger="hover"
@@ -131,7 +131,7 @@
               </el-button>
             </el-button-group>
           </div>
-        </el-popover> -->
+        </el-popover>
 
         <!-- <el-divider direction="vertical"></el-divider> -->
 
@@ -332,6 +332,11 @@ const headerPanelProps = withDefaults(defineProps<HeaderPanelProps>(), {
   useThumbnail: false,
   selectedItemsId: () => []
 });
+
+function leftJustify() {
+  emits('alignSelected', 'left');
+}
+
 const emits = defineEmits([
   'update:leftAside',
   'update:rightAside',

src/components/mt-edit/components/layout/main-panel/index.vue

@@ -348,6 +348,7 @@ const onRenderCoreMouseDown = (item: IDoneJson, e: MouseEvent) => {
     globalStore.refreshSelectedItemsId();
   }
 };
+
 const onMouseDown = (e: MouseEvent) => {
   beginListenerKeyDown();
   globalStore.cancelAllSelect();
@@ -376,6 +377,7 @@ const onMouseDown = (e: MouseEvent) => {
   globalStore.setIntention('beginMulSelect');
   selectedAreaRef.value?.onMouseDown(e);
 };
+
 /**
  * 区域选择结束事件 之所以用getBoundingClientRect是为了处理旋转后的坐标
  * @param area_binfo 区域选择的边界信息

src/components/mt-edit/components/layout/right-aside/page-setting.vue

@@ -162,8 +162,8 @@ import { computed, ref } from 'vue';
 import SvgAnalysis from '@/components/mt-edit/components/svg-analysis/index.vue';
 import { blobToBase64 } from '@/components/mt-edit/utils';
 
-function viewGload(){
-  console.log("xxx:",globalStore);
+function viewGload() {
+  console.log('xxx:', globalStore);
 }
 
 type RightAsideProps = {

src/components/mt-edit/components/layout/right-aside/select-item-props-setting.vue

@@ -15,6 +15,7 @@
           :value="item.value"
         />
       </el-select>
+
       <!-- number -->
       <el-input-number
         v-else-if="attr_item.type === 'number' && !attr_item.disabled"
@@ -67,15 +68,6 @@
         </template>
       </el-input-tag>
 
-      <!-- <el-upload
-        v-else-if="attr_item.type === 'upload' && !attr_item.disabled"
-        accept="image/*"
-        :action="BASE_URL + '/fileStorage/saveFile'"
-        :on-success="saveImageSuccess"
-      >
-        <el-button type="primary">绑定图片</el-button>
-      </el-upload> -->
-
       <!-- inputTypeTag 类型标签 -->
       <el-tag v-else-if="attr_item.type === 'inputTypeTag' && !attr_item.disabled">
         {{ attr_item.val }}
@@ -116,6 +108,24 @@
     height="80%"
     width="60%"
   >
+    <div class="m-4">
+      <el-row>
+        <el-col :span="2"> 分区 </el-col>
+        <el-col :span="8">
+          <el-cascader
+            v-model="selectedPartition"
+            :options="options"
+            :props="props2"
+            clearable
+            @change="handlePartitionChange"
+          />
+        </el-col>
+        <el-col :span="14">
+          <el-button type="primary" @click="getDataSource">查询</el-button>
+        </el-col>
+      </el-row>
+    </div>
+
     <el-table :data="filteredData" :max-height="450">
       <el-table-column type="index" label="序号" />
       <el-table-column prop="modeId" label="遥ID" />
@@ -186,6 +196,7 @@ import {
   ElColorPicker,
   ElIcon,
   ElButton,
+  ElMessage,
   type UploadFile
 } from 'element-plus';
 import { Search } from '@element-plus/icons-vue';
@@ -193,6 +204,8 @@ import JsonEdit from './json-edit.vue';
 import { ref, computed, onMounted } from 'vue';
 import { modelApi, BASE_URL } from '@/utils/request';
 import imageModel from '@/components/mt-edit/components/layout/base-panel/imageModel.vue';
+import { globalStore } from '@/components/mt-edit/store/global';
+import { type DataItem } from '@/components/mt-edit/store/types';
 type SelectItemPropsSettingProps = {
   propsInfo: ILeftAsideConfigItemPublicProps | undefined;
 };
@@ -214,7 +227,7 @@ interface RecServiceType {
 }
 
 interface ExtendedParentWindow extends Window {
-  Rec?: RecServiceType;
+  globalData: Map<string, DataItem> | Record<string, DataItem>;
 }
 const selectItemPropsSettingProps = withDefaults(defineProps<SelectItemPropsSettingProps>(), {});
 
@@ -243,24 +256,32 @@ function setInputTagVal() {
     const item = selectItemPropsSettingProps.propsInfo[key];
     if (item.type === 'inputTypeTag') {
       inputTypeTagValue.value = item.val;
+      console.log('inputTypeTagValue:', inputTypeTagValue.value);
+      break;
     }
   }
 }
 
 let attrItem: any;
 const dialogTableVisible = ref(false);
-function handleIconClick(obj: any) {
-  assembleList();
+
+async function handleIconClick(obj: any) {
+  console.log('inputTypeTagValue11:', inputTypeTagValue.value);
+  console.log('handleIconClick:', obj);
   attrItem = obj;
-  dialogTableVisible.value = true;
+  await getAllTree(); // 等待获取树形数据完成
+  assembleList();
+  dialogTableVisible.value = true; // 数据加载完成后再打开弹窗
 }
 
 let attrImg: any;
 // 打开图片模型弹窗
 const onImageDialog = (obj: any) => {
+  console.log('xxxxx:', obj);
   dialogImageVisible.value = true;
   attrImg = obj;
 };
+
 function bindingImg(obj: any) {
   console.log('绑定图片', obj, attrImg);
   attrImg.val = obj.id;
@@ -270,10 +291,24 @@ function bindingImg(obj: any) {
 
 let modelIds = ref<string[]>([]);
 
+// 选中的分区数据
+const selectedPartition = ref<string[]>([]);
+
+// 处理分区选择变化
+const handlePartitionChange = (value: string[]) => {
+  console.log('选中的分区数据:', value);
+  // value 是一个数组，包含选中的层级数据
+  // 例如：['分区 ID', '子分区 ID', ...]
+  // 最后一个值是最后选中的层级
+  if (value && value.length > 0) {
+    const lastValue = value[value.length - 1];
+    console.log('最后选中的值:', lastValue);
+    // 在这里处理你的业务逻辑
+  }
+};
+
 function handleEdit(obj: any) {
-  console.log('绑定', modelIds.value);
   dialogTableVisible.value = false;
-  modelIds.value = [obj.modeId];
   attrItem.val = obj.modeId;
   emits('selectById', obj.modeId);
 }
@@ -316,22 +351,39 @@ const filterTag = (value: number, row: any) => {
 
 // 根据搜索条件过滤数据
 const filteredData = computed(() => {
+  debugger;
   if (!search.value) {
-    return gridData;
+    return gridData.value;
   }
-  return gridData.filter((item) => {
+  return gridData.value.filter((item) => {
     return item.name.toLowerCase().includes(search.value.toLowerCase());
   });
 });
 
+// 获取数据源
 function assembleList() {
-  // debugger;
+  debugger;
   let code: number | undefined;
+  setInputTagVal();
+  // 第一次加载或没有数据时，从 globalDataRaw 加载
+  gridData.value.splice(0, gridData.value.length);
   if (inputTypeTagValue.value !== undefined) code = getNameForNode(inputTypeTagValue.value);
 
-  gridData.splice(0, gridData.length);
+  // 如果已经有数据，直接筛选，不再重新加载
+  if (gridDataSource.value && gridDataSource.value.length > 0) {
+    if (code === undefined) {
+      // code 未定义时，显示所有数据（已经在上一次加载中填充）
+      return;
+    } else {
+      // code 有值时，筛选出符合的数据
+      gridData.value = gridDataSource.value.filter((item) => item.bType === code);
+      console.log('new_gridData:', gridData.value);
+      return;
+    }
+  }
 
-  let globalDataRaw = (window.parent as ExtendedParentWindow).Rec?.service.node.runtimes;
+  let globalDataRaw = (window as unknown as ExtendedParentWindow).globalData;
+  // let globalDataRaw = (window.parent as ExtendedParentWindow).Rec?.service.node.runtimes;
   // 安全地访问 globalData，兼容对象和 Map 类型
   // const globalDataRaw = (window as any).globalData;
 
@@ -345,7 +397,7 @@ function assembleList() {
         let modeId = key;
         let name = data.node.name;
         let bType = data.bType;
-        gridData.push({ modeId, name, bType });
+        gridData.value.push({ modeId, name, bType });
       }
     });
   } else {
@@ -357,7 +409,7 @@ function assembleList() {
           let modeId = key;
           let name = data.node.name;
           let bType = data.bType;
-          gridData.push({ modeId, name, bType });
+          gridData.value.push({ modeId, name, bType });
         }
       }
     }
@@ -370,7 +422,73 @@ interface GridDataItem {
   bType: number;
 }
 
-const gridData: GridDataItem[] = [];
+const gridData = ref<GridDataItem[]>([]);
+const gridDataSource = ref<GridDataItem[]>([]);
+
+const props2 = {
+  multiple: false,
+  checkStrictly: true
+};
+
+async function getDataSource() {
+  debugger;
+  let cls = '-1';
+  if (selectedPartition.value && selectedPartition.value.length > 0)
+    cls = selectedPartition.value[selectedPartition.value.length - 1];
+
+  let response = await modelApi.getNodeByCls_get(cls);
+  if (response.code != 200 || response.data == null) {
+    ElMessage.error(response.message);
+  } else {
+    let code: number | undefined;
+    setInputTagVal();
+    if (inputTypeTagValue.value !== undefined) code = getNameForNode(inputTypeTagValue.value);
+
+    gridDataSource.value.splice(0, gridDataSource.value.length);
+    gridData.value.splice(0, gridData.value.length);
+    response.data.forEach((item: any) => {
+      console.log('item:', item);
+      gridDataSource.value.push({
+        modeId: item.id,
+        name: item.name,
+        bType: item.btype
+      });
+
+      if (code == undefined || code == item.btype) {
+        gridData.value.push({
+          modeId: item.id,
+          name: item.name,
+          bType: item.btype
+        });
+      }
+    });
+
+    ElMessage.success('接口请求成功');
+    console.log('gridData:', gridData.value);
+  }
+}
+
+async function getAllTree() {
+  const response = await modelApi.allTree_get();
+  if (response.code != 200 || response.data == null) {
+    ElMessage.error(response.message);
+  } else {
+    // 转换数据格式，将 id 转换为 value
+    options = convertTreeData(response.data);
+    ElMessage.success('树接口请求成功');
+  }
+}
+
+// 转换树形数据格式
+function convertTreeData(data: any[]): any[] {
+  return data.map((item) => ({
+    value: item.id.toString(), // 将 id 转换为 value
+    label: item.label,
+    children: item.children ? convertTreeData(item.children) : []
+  }));
+}
+
+let options: any[] = [];
 </script>
 
 <style lang="less" scoped>

src/components/mt-edit/components/line-render/index.vue

@@ -83,8 +83,8 @@
                 ? 1000
                 : 0
               : lineRenderProps.itemJson.props.ani_play.val
-              ? 0
-              : 1000
+                ? 0
+                : 1000
           "
           :dur="`${
             lineRenderProps.itemJson.props.ani_dur.val < 1
@@ -147,8 +147,8 @@
                 ? 1000
                 : 0
               : lineRenderProps.itemJson.props.ani_play.val
-              ? 0
-              : 1000
+                ? 0
+                : 1000
           "
           :dur="`${
             lineRenderProps.itemJson.props.ani_dur.val < 1
@@ -534,7 +534,8 @@ watch(
 </script>
 <style scoped>
 .cursor-remove {
-  cursor: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPgoJPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1kYXNoYXJyYXk9IjIyIiBzdHJva2UtZGFzaG9mZnNldD0iMjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIj4KCQk8cGF0aCBkPSJNMTkgNUw1IDE5Ij48YW5pbWF0ZSBmaWxsPSJmcmVlemUiIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNob2Zmc2V0IiBiZWdpbj0iMC4zcyIgZHVyPSIwLjNzIiB2YWx1ZXM9IjIyOzAiLz48L3BhdGg+CgkJPHBhdGggZD0iTTUgNUwxOSAxOSI+PGFuaW1hdGUgZmlsbD0iZnJlZXplIiBhdHRyaWJ1dGVOYW1lPSJzdHJva2UtZGFzaG9mZnNldCIgZHVyPSIwLjNzIiB2YWx1ZXM9IjIyOzAiLz48L3BhdGg+Cgk8L2c+Cjwvc3ZnPg==),
+  cursor:
+    url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPgoJPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1kYXNoYXJyYXk9IjIyIiBzdHJva2UtZGFzaG9mZnNldD0iMjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIj4KCQk8cGF0aCBkPSJNMTkgNUw1IDE5Ij48YW5pbWF0ZSBmaWxsPSJmcmVlemUiIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNob2Zmc2V0IiBiZWdpbj0iMC4zcyIgZHVyPSIwLjNzIiB2YWx1ZXM9IjIyOzAiLz48L3BhdGg+CgkJPHBhdGggZD0iTTUgNUwxOSAxOSI+PGFuaW1hdGUgZmlsbD0iZnJlZXplIiBhdHRyaWJ1dGVOYW1lPSJzdHJva2UtZGFzaG9mZnNldCIgZHVyPSIwLjNzIiB2YWx1ZXM9IjIyOzAiLz48L3BhdGg+Cgk8L2c+Cjwvc3ZnPg==),
     auto;
 }
 </style>

src/components/mt-edit/store/types.ts

@@ -10,7 +10,9 @@ export type ILeftAsideConfigItemPublicPropsType =
   | 'upload'
   | 'inputSelectId'
   | 'inputTypeTag' //inputTypeTag 必须和 inputSelectId 一起使用
-  | 'inputSelectImgId';
+  | 'inputSelectImgId'
+  | 'tableSelect'
+  | 'map'; //使用这个类型 disabled必须为true(必须隐藏)
 // 开放注册配置
 export type ILeftAsideConfigItemPublicProps = Record<
   string,

src/components/my-test.vue

@@ -1,20 +1,50 @@
 <template>
   <div style="width: 100%; height: 100%">
-    <h2 class="my-button" style="width: 100%; height: 100%">{{ props.modelValue }}</h2>
+    <!-- <h2 class="my-button" style="width: 100%; height: 100%">{{ props.modelValue }}</h2> -->
+    <el-text class="my-button">{{ props.modelValue }}</el-text>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue';
 const props = defineProps({
   modelValue: String,
   fontFamily: String,
-  testColor: String
+  testColor: String,
+  fontSize: Number,
+  fontBold: Boolean
+});
+
+let computedSize = computed({
+  // 读取
+  get() {
+    return props.fontSize + 'px';
+  }, // 修改
+  set(val) {}
+});
+
+let computedBold = computed({
+  // 读取
+  get() {
+    return props.fontBold ? 'bold' : 'normal';
+  }, // 修改
+  set(val) {}
 });
 </script>
 
 <style scoped>
 .my-button {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  font-weight: v-bind('computedBold');
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+  text-align: center;
   color: v-bind('props.testColor');
   font-family: v-bind('props.fontFamily');
+  font-size: v-bind('computedSize');
 }
 </style>

src/components/public-compoents/node-list-dialog.vue

@@ -0,0 +1,258 @@
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    @update:model-value="handleUpdate"
+    class="elDialog"
+    top="10vh"
+    title="组件绑定"
+    height="80%"
+    width="60%"
+  >
+    <div class="m-4">
+      <el-row>
+        <el-col :span="2"> 分区 </el-col>
+        <el-col :span="8">
+          <el-cascader
+            v-model="selectedPartition"
+            :options="options"
+            :props="props2"
+            clearable
+            @change="handlePartitionChange"
+          />
+        </el-col>
+        <el-col :span="14">
+          <el-button type="primary" @click="getDataSource">查询</el-button>
+        </el-col>
+      </el-row>
+    </div>
+
+    <el-table :data="filteredData" :max-height="450">
+      <el-table-column type="index" label="序号" />
+      <el-table-column prop="modeId" label="遥ID" />
+      <el-table-column prop="name" label="名称" />
+
+      <el-table-column
+        v-if="inputTypeTagValue == undefined"
+        prop="bType"
+        label="类型筛选"
+        :filters="[
+          { text: '遥信', value: 1 },
+          { text: '遥测', value: 2 },
+          { text: '遥控', value: 3 },
+          { text: '遥调', value: 4 },
+          { text: '其他', value: 0 }
+        ]"
+        :filter-method="filterTag"
+        filter-placement="bottom-end"
+        filter-confirm-button-text="确定"
+        filter-reset-button-text="重置"
+      >
+        <template #default="scope">
+          <el-tag type="primary" v-if="scope.row.bType === 1">{{ '遥信' }}</el-tag>
+          <el-tag type="success" v-else-if="scope.row.bType === 2">{{ '遥测' }}</el-tag>
+          <el-tag type="info" v-else-if="scope.row.bType === 3">{{ '遥控' }}</el-tag>
+          <el-tag type="warning" v-else-if="scope.row.bType === 4">{{ '遥调' }}</el-tag>
+          <el-tag type="danger" v-else>{{ '其他' }}</el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column v-if="inputTypeTagValue != undefined" label="类型">
+        <template #default="scope">
+          <el-tag type="primary" v-if="scope.row.bType === 1">{{ '遥信' }}</el-tag>
+          <el-tag type="success" v-else-if="scope.row.bType === 2">{{ '遥测' }}</el-tag>
+          <el-tag type="info" v-else-if="scope.row.bType === 3">{{ '遥控' }}</el-tag>
+          <el-tag type="warning" v-else-if="scope.row.bType === 4">{{ '遥调' }}</el-tag>
+        </template>
+      </el-table-column>
+
+      <!-- <el-table-column label="操作">
+        <template #default="scope">
+          <el-button type="primary" size="small" @click="handleEdit(scope.row)"> 绑定 </el-button>
+        </template>
+      </el-table-column> -->
+
+      <el-table-column align="center">
+        <template #header>
+          <el-input v-model="search" size="small" placeholder="节点名称" />
+        </template>
+        <template #default="scope">
+          <el-button size="small" @click="console.log(scope.row)"> 绑定 </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ElInput, ElButton, ElMessage } from 'element-plus';
+import { ref, computed, onMounted } from 'vue';
+import { modelApi } from '@/utils/request';
+
+interface GridDataItem {
+  modeId: string;
+  name: string;
+  bType: number;
+}
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const emit = defineEmits({
+  'update:modelValue': (value: boolean) => true
+});
+
+const handleUpdate = (value: boolean) => {
+  emit('update:modelValue', value);
+};
+
+// 选中的分区数据
+const selectedPartition = ref<string[]>([]);
+const gridDataSource = ref<GridDataItem[]>([]);
+const gridData = ref<GridDataItem[]>([]);
+const search = ref('');
+
+let options: any[] = [];
+const props2 = {
+  multiple: false,
+  checkStrictly: true
+};
+
+// 处理分区选择变化
+const handlePartitionChange = (value: string[]) => {
+  console.log('选中的分区数据:', value);
+  // value 是一个数组，包含选中的层级数据
+  // 例如：['分区 ID', '子分区 ID', ...]
+  // 最后一个值是最后选中的层级
+  if (value && value.length > 0) {
+    const lastValue = value[value.length - 1];
+    console.log('最后选中的值:', lastValue);
+    // 在这里处理你的业务逻辑
+  }
+};
+
+// 根据搜索条件过滤数据
+const filteredData = computed(() => {
+  if (!search.value) {
+    return gridData.value;
+  }
+  return gridData.value.filter((item) => {
+    return item.name.toLowerCase().includes(search.value.toLowerCase());
+  });
+});
+
+let inputTypeTagValue = ref<string>();
+async function getDataSource() {
+  let cls = '-1';
+  if (selectedPartition.value && selectedPartition.value.length > 0)
+    cls = selectedPartition.value[selectedPartition.value.length - 1];
+
+  let response = await modelApi.getNodeByCls_get(cls);
+  if (response.code != 200 || response.data == null) {
+    ElMessage.error(response.message);
+  } else {
+    let code: number | undefined;
+    setInputTagVal();
+    if (inputTypeTagValue.value !== undefined) code = getNameForNode(inputTypeTagValue.value);
+
+    gridDataSource.value.splice(0, gridDataSource.value.length);
+    gridData.value.splice(0, gridData.value.length);
+    response.data.forEach((item: any) => {
+      console.log('item:', item);
+      gridDataSource.value.push({
+        modeId: item.id,
+        name: item.name,
+        bType: item.btype
+      });
+
+      if (code == undefined || code == item.btype) {
+        gridData.value.push({
+          modeId: item.id,
+          name: item.name,
+          bType: item.btype
+        });
+      }
+    });
+
+    ElMessage.success('接口请求成功');
+    console.log('gridData:', gridData.value);
+  }
+}
+
+async function getAllTree() {
+  const response = await modelApi.allTree_get();
+  if (response.code != 200 || response.data == null) {
+    ElMessage.error(response.message);
+  } else {
+    // 转换数据格式，将 id 转换为 value
+    options = convertTreeData(response.data);
+    ElMessage.success('树接口请求成功');
+  }
+}
+
+// 转换树形数据格式
+function convertTreeData(data: any[]): any[] {
+  return data.map((item) => ({
+    value: item.id.toString(), // 将 id 转换为 value
+    label: item.label,
+    children: item.children ? convertTreeData(item.children) : []
+  }));
+}
+
+//获取标签栏的值
+function setInputTagVal() {
+  return '遥信';
+  //   for (const key in selectItemPropsSettingProps.propsInfo) {
+  //     const item = selectItemPropsSettingProps.propsInfo[key];
+  //     if (item.type === 'inputTypeTag') {
+  //       inputTypeTagValue.value = item.val;
+  //       console.log('inputTypeTagValue:', inputTypeTagValue.value);
+  //       break;
+  //     }
+  //   }
+}
+
+const filterTag = (value: number, row: any) => {
+  return row.bType === value;
+};
+
+function getNameForNode(nodeName: string): number {
+  switch (nodeName) {
+    case '遥信':
+      return 1;
+    case '遥测':
+      return 2;
+    case '遥控':
+      return 3;
+    case '遥调':
+      return 4;
+    default:
+      return 0;
+  }
+}
+
+onMounted(() => {
+  getAllTree();
+});
+</script>
+
+<style lang="less" scoped>
+.elDialog {
+  padding: 0;
+  margin: 0;
+}
+.demo-form-inline {
+  padding: 15px 0;
+}
+
+.demo-form-inline .el-input {
+  --el-input-width: 150px;
+}
+
+.demo-form-inline .el-select {
+  --el-select-width: 150px;
+}
+</style>

src/components/three-components/vue-three-building.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="container">
+    <!-- 排油注氮 -->
+    <!-- 3D 场景 -->
+    <div class="div3D" ref="div3D" v-show="show3D"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+//导入 threejs
+import {
+  AxesHelper,
+  Color,
+  PerspectiveCamera,
+  Scene,
+  WebGLRenderer,
+  EquirectangularReflectionMapping,
+  Group
+} from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+
+const div3D = ref<HTMLDivElement>();
+//场景
+const scene = new Scene();
+
+// 显示控制
+const show3D = ref(true);
+//相机
+const camera = new PerspectiveCamera(
+  25,
+  div3D.value?.clientWidth! / div3D.value?.clientHeight!,
+  0.05,
+  1000
+); // 初始比例设为1
+camera.position.set(0, 14, 13.5);
+camera.lookAt(0, 0, 0);
+scene.add(camera);
+
+//渲染器
+const render = new WebGLRenderer({ antialias: true }); // 启用抗锯齿
+render.setClearColor(new Color('#131519'));
+
+//添加控制器
+const controls = new OrbitControls(camera, render.domElement);
+// 禁用滚轮缩放
+// controls.enableZoom = false;
+// controls.autoRotate = false;
+// controls.enablePan = false; // 禁用右键平移
+controls.autoRotateSpeed = 1;
+controls.dampingFactor = 0.2;
+controls.rotateSpeed = 0.3; // 降低旋转速度（默认为 1.0）
+controls.enableDamping = true;
+controls.enableRotate = true;
+controls.minDistance = 1; // 允许更近距离观察模型细节
+// 设置视角限制：向上45度，向下45度
+// 从正前方开始计算，向上最大45度，向下最大45度
+controls.minPolarAngle = Math.PI / 4; // 向上最多45度 (π/4)
+controls.maxPolarAngle = (Math.PI * 3) / 4; // 向下最多45度 (3π/4)
+
+const loader = new GLTFLoader();
+const dracoLoader = new DRACOLoader();
+loader.setDRACOLoader(dracoLoader);
+let meshArr: Group[] = [];
+//  F:\vue\workspace\maotu-webtopo\public\models\complexBuilding\complexBuilding.gltf
+loader.load('/models/complexBuilding/complexBuilding.gltf', (gltf: any) => {
+  gltf.scene.position.y = -6;
+  scene.add(gltf.scene);
+});
+
+//环境贴图
+const rgbELoader = new RGBELoader().load(
+  '/models/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr',
+  (envMap: any) => {
+    envMap.mapping = EquirectangularReflectionMapping;
+    scene.environment = envMap;
+  }
+);
+
+//物体
+// const axes = new AxesHelper(20);
+// scene.add(axes);
+
+// 监听容器大小变化
+function handleResize() {
+  if (!div3D.value) return;
+
+  const container = div3D.value;
+  const width = container.clientWidth;
+  const height = container.clientHeight;
+
+  // 更新相机比例
+  camera.aspect = width / height;
+  camera.updateProjectionMatrix();
+
+  // 更新渲染器大小
+  render.setSize(width, height);
+}
+
+function init() {
+  requestAnimationFrame(init);
+  controls.update();
+  render.render(scene, camera);
+}
+
+onMounted(() => {
+  // 初始化时设置正确大小
+  handleResize();
+
+  // 启动渲染循环
+  init();
+
+  // 将渲染器添加到容器
+  div3D.value?.appendChild(render.domElement);
+
+  // 添加容器大小监听
+  const resizeObserver = new ResizeObserver(handleResize);
+  if (div3D.value) {
+    resizeObserver.observe(div3D.value);
+  }
+
+  // 保存观察器引用以便销毁
+  (window as any)._resizeObserver = resizeObserver;
+});
+
+onUnmounted(() => {
+  // 清理资源
+  if ((window as any)._resizeObserver) {
+    (window as any)._resizeObserver.disconnect();
+    delete (window as any)._resizeObserver;
+  }
+});
+</script>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.div3D {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.principle-diagram {
+  position: absolute;
+  top: 10%;
+  right: 0;
+  width: 45%;
+  height: 45%;
+  z-index: 50;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* transition: all 0.3s ease; */
+}
+
+/* 只显示原理图时的样式 */
+.principle-diagram.principle-only {
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.principle-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.control-buttons {
+  position: absolute;
+  top: 2%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: row;
+  gap: 0.5%;
+  z-index: 100;
+}
+</style>

src/components/three-components/vue-three-nitrogen.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="container">
+    <!-- 排油注氮 -->
+    <!-- 3D 场景 -->
+    <div class="div3D" ref="div3D" v-show="show3D"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+//导入 threejs
+import {
+  AxesHelper,
+  Color,
+  PerspectiveCamera,
+  Scene,
+  WebGLRenderer,
+  EquirectangularReflectionMapping,
+  Group
+} from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+
+const div3D = ref<HTMLDivElement>();
+//场景
+const scene = new Scene();
+
+// 显示控制
+const show3D = ref(true);
+//相机
+const camera = new PerspectiveCamera(
+  25,
+  div3D.value?.clientWidth! / div3D.value?.clientHeight!,
+  0.05,
+  1000
+); // 初始比例设为1
+camera.position.set(10, 10, -35);
+camera.lookAt(0, 0, 0);
+scene.add(camera);
+
+//渲染器
+const render = new WebGLRenderer({ antialias: true }); // 启用抗锯齿
+render.setClearColor(new Color('#131519'));
+
+//添加控制器
+const controls = new OrbitControls(camera, render.domElement);
+// 禁用滚轮缩放
+// controls.enableZoom = false;
+// controls.autoRotate = false;
+// controls.enablePan = false; // 禁用右键平移
+controls.autoRotateSpeed = 1;
+controls.dampingFactor = 0.2;
+controls.rotateSpeed = 0.3; // 降低旋转速度（默认为 1.0）
+controls.enableDamping = true;
+controls.enableRotate = true;
+controls.minDistance = 1; // 允许更近距离观察模型细节
+// 设置视角限制：向上45度，向下45度
+// 从正前方开始计算，向上最大45度，向下最大45度
+controls.minPolarAngle = Math.PI / 4; // 向上最多45度 (π/4)
+controls.maxPolarAngle = (Math.PI * 3) / 4; // 向下最多45度 (3π/4)
+
+const loader = new GLTFLoader();
+const dracoLoader = new DRACOLoader();
+loader.setDRACOLoader(dracoLoader);
+let meshArr: Group[] = [];
+//  F:\vue\workspace\maotu-webtopo\public\models\nitrogenInjection\nitrogenInjection.bin
+loader.load('/models/nitrogenInjection/nitrogenInjection.gltf', (gltf: any) => {
+  gltf.scene.position.y = -6;
+  scene.add(gltf.scene);
+});
+
+//环境贴图
+const rgbELoader = new RGBELoader().load(
+  '/models/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr',
+  (envMap: any) => {
+    envMap.mapping = EquirectangularReflectionMapping;
+    scene.environment = envMap;
+  }
+);
+
+//物体
+// const axes = new AxesHelper(20);
+// scene.add(axes);
+
+// 监听容器大小变化
+function handleResize() {
+  if (!div3D.value) return;
+
+  const container = div3D.value;
+  const width = container.clientWidth;
+  const height = container.clientHeight;
+
+  // 更新相机比例
+  camera.aspect = width / height;
+  camera.updateProjectionMatrix();
+
+  // 更新渲染器大小
+  render.setSize(width, height);
+}
+
+function init() {
+  requestAnimationFrame(init);
+  controls.update();
+  render.render(scene, camera);
+}
+
+onMounted(() => {
+  // 初始化时设置正确大小
+  handleResize();
+
+  // 启动渲染循环
+  init();
+
+  // 将渲染器添加到容器
+  div3D.value?.appendChild(render.domElement);
+
+  // 添加容器大小监听
+  const resizeObserver = new ResizeObserver(handleResize);
+  if (div3D.value) {
+    resizeObserver.observe(div3D.value);
+  }
+
+  // 保存观察器引用以便销毁
+  (window as any)._resizeObserver = resizeObserver;
+});
+
+onUnmounted(() => {
+  // 清理资源
+  if ((window as any)._resizeObserver) {
+    (window as any)._resizeObserver.disconnect();
+    delete (window as any)._resizeObserver;
+  }
+});
+</script>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.div3D {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.principle-diagram {
+  position: absolute;
+  top: 10%;
+  right: 0;
+  width: 45%;
+  height: 45%;
+  z-index: 50;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* transition: all 0.3s ease; */
+}
+
+/* 只显示原理图时的样式 */
+.principle-diagram.principle-only {
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.principle-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.control-buttons {
+  position: absolute;
+  top: 2%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: row;
+  gap: 0.5%;
+  z-index: 100;
+}
+</style>

src/components/three-components/vue-three-substation.vue

@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue';
-//导入threejs
+//导入 threejs
 import {
   AxesHelper,
   Color,
@@ -85,45 +85,53 @@ const loader = new GLTFLoader();
 const dracoLoader = new DRACOLoader();
 loader.setDRACOLoader(dracoLoader);
 let meshArr: Group[] = [];
+// public\models\nitrogenInjection\nitrogenInjection.gltf
 loader.load('/models/substation/substation.gltf', (gltf: any) => {
+  // 保存模型引用
+  loadedModel = gltf.scene;
   scene.add(gltf.scene);
   const loadTime = Date.now() - startTime;
 
   // 立即渲染一帧
-  controls.update();
+  // controls.update();
   render.render(scene, camera);
 
   console.log(`大场景模型已加载并显示，总耗时：${loadTime}ms`);
   loading.value = false;
 });
 
-// 环境光：增强整体亮度
-const ambientLight = new AmbientLight('#ffffff', 1.2); // 强度从 0.6 提高到 1.0
-scene.add(ambientLight);
-
-// 平行光
-const directionalLight = new DirectionalLight('#ffffff', 1.4); // 强度从 0.2 提高到 0.8
-scene.add(directionalLight);
-directionalLight.position.set(20, 20, 10);
-
-// // 点光源
-const pointLight = new PointLight('#ffffff', 1.4, 1800); // 强度从 0.5 提高到 1.0
-scene.add(pointLight);
-pointLight.position.set(0, 40, 0);
-
-// //环境贴图
-// const rgbELoader = new RGBELoader().load(
-//   '/models/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr',
-//   (envMap: any) => {
-//     envMap.mapping = EquirectangularReflectionMapping;
-//     scene.environment = envMap;
-//   }
-// );
+// // 环境光：增强整体亮度
+// const ambientLight = new AmbientLight('#ffffff', 1.2); // 强度从 0.6 提高到 1.0
+// scene.add(ambientLight);
+
+// // 平行光
+// const directionalLight = new DirectionalLight('#ffffff', 1.4); // 强度从 0.2 提高到 0.8
+// scene.add(directionalLight);
+// directionalLight.position.set(20, 20, 10);
+
+// // // 点光源
+// const pointLight = new PointLight('#ffffff', 1.4, 1800); // 强度从 0.5 提高到 1.0
+// scene.add(pointLight);
+// pointLight.position.set(0, 40, 0);
+
+// 环境贴图（保存引用以便清理）
+const rgbELoader = new RGBELoader().load(
+  '/models/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr',
+  (envMap: any) => {
+    envMap.mapping = EquirectangularReflectionMapping;
+    scene.environment = envMap;
+    envMapTexture = envMap; // 保存引用
+  }
+);
 
 //补间动画
 const timeline1 = gsap.timeline();
 const timeline2 = gsap.timeline();
 
+// 保存模型引用以便清理
+let loadedModel: any = null;
+let envMapTexture: any = null;
+
 //相机移动
 function tranlate(position: Vector3, target: Vector3) {
   timeline1.to(camera.position, {
@@ -190,11 +198,98 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  // 清理资源
+  console.log('开始清理 Three.js 资源...');
+
+  // 1. 停止渲染循环（通过标记）
+  // requestAnimationFrame 会自动停止
+
+  // 2. 清理 ResizeObserver
   if ((window as any)._resizeObserver) {
     (window as any)._resizeObserver.disconnect();
     delete (window as any)._resizeObserver;
   }
+
+  // 3. 停止 GSAP 动画
+  timeline1.pause();
+  timeline1.clear();
+  timeline2.pause();
+  timeline2.clear();
+  gsap.globalTimeline.clear();
+
+  // 4. 移除 DOM 元素
+  if (div3D.value && render.domElement.parentNode === div3D.value) {
+    div3D.value.removeChild(render.domElement);
+  }
+
+  // 5. 清理控制器
+  controls.dispose();
+
+  // 6. 清理模型
+  if (loadedModel) {
+    loadedModel.traverse((child: any) => {
+      if (child.isMesh) {
+        // 清理几何体
+        if (child.geometry) {
+          child.geometry.dispose();
+        }
+
+        // 清理材质
+        if (child.material) {
+          const materials = Array.isArray(child.material) ? child.material : [child.material];
+
+          materials.forEach((material: any) => {
+            // 清理材质属性
+            [
+              'map',
+              'normalMap',
+              'roughnessMap',
+              'metalnessMap',
+              'emissiveMap',
+              'aoMap',
+              'displacementMap'
+            ].forEach((key) => {
+              if (material[key]) {
+                material[key].dispose();
+              }
+            });
+
+            // 清理材质本身
+            material.dispose();
+          });
+        }
+      }
+    });
+
+    // 从场景中移除模型
+    scene.remove(loadedModel);
+  }
+
+  // 7. 清理环境贴图
+  if (envMapTexture) {
+    envMapTexture.dispose();
+  }
+
+  // 8. 清理灯光
+  scene.traverse((child: any) => {
+    if (child.isLight) {
+      child.dispose();
+    }
+  });
+
+  // 9. 清理场景
+  while (scene.children.length > 0) {
+    scene.remove(scene.children[0]);
+  }
+
+  // 10. 清理渲染器
+  render.dispose();
+  render.forceContextLoss();
+  render.domElement.remove();
+
+  // 11. 清空场景引用
+  scene.clear();
+
+  console.log('Three.js 资源清理完成');
 });
 </script>
 
@@ -214,6 +309,7 @@ onUnmounted(() => {
   top: 50%;
   left: 2%;
   transform: translateY(-50%); /* 垂直居中 */
+  transform: translateZ(0);
   display: flex;
   flex-direction: column;
   gap: 20px;

src/components/three-components/vue-three-substation_edit.vue

@@ -77,15 +77,18 @@ scene.add(camera);
 
 //渲染器
 const render = new WebGLRenderer({
-  antialias: false, // 关闭抗锯齿提升性能
-  powerPreference: 'high-performance', // 使用高性能GPU
-  stencil: false, // 如果不需要模板缓冲区
+  antialias: true, // 开启抗锯齿（性能允许的情况下）
+  powerPreference: 'high-performance',
+  stencil: false,
   depth: true,
-  logarithmicDepthBuffer: true // 对大场景有帮助
+  logarithmicDepthBuffer: true,
+  precision: 'mediump' // 使用中等精度着色器，提升性能
 });
 render.setClearColor(new Color('#131519'));
+render.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // 限制像素比，提升性能
 // 启用渲染优化
-render.shadowMap.enabled = false; // 如果不需要阴影
+render.shadowMap.enabled = false;
+render.shadowMap.autoUpdate = false; // 停止自动更新阴影
 
 //添加控制器
 const controls = new OrbitControls(camera, render.domElement);
@@ -94,15 +97,14 @@ const controls = new OrbitControls(camera, render.domElement);
 // controls.autoRotate = false;
 // controls.enablePan = false; // 禁用右键平移
 controls.autoRotateSpeed = 1;
-controls.dampingFactor = 0.2;
-controls.rotateSpeed = 0.3; // 降低旋转速度（默认为 1.0）
-controls.enableDamping = true;
+controls.dampingFactor = 0.05; // 降低阻尼系数，减少计算量
+controls.rotateSpeed = 0.5; // 提高旋转速度，操作更流畅
+controls.enableDamping = false; // 关闭阻尼，大幅提升性能
 controls.enableRotate = true;
-controls.minDistance = 1; // 允许更近距离观察模型细节
-// 设置视角限制：向上45度，向下45度
-// 从正前方开始计算，向上最大45度，向下最大45度
-controls.minPolarAngle = Math.PI / 4; // 向上最多45度 (π/4)
-controls.maxPolarAngle = (Math.PI * 3) / 4; // 向下最多45度 (3π/4)
+controls.minDistance = 1;
+// 设置视角限制
+controls.minPolarAngle = Math.PI / 4;
+controls.maxPolarAngle = (Math.PI * 3) / 4;
 
 const loader = new GLTFLoader();
 const dracoLoader = new DRACOLoader();
@@ -137,15 +139,28 @@ loader.load(
   async (gltf: any) => {
     console.log('文件下载完成，开始解析模型...');
 
-    // 大场景优化：设置对象渲染顺序
+    // 性能优化：合并几何体
+    const mergedMeshes: any[] = [];
+
     gltf.scene.traverse((child: any) => {
       if (child.isMesh) {
         // 优化大场景渲染
-        child.frustumCulled = true; // 启用视锥体剔除
+        child.frustumCulled = true;
+
         if (child.material) {
           // 优化材质
-          child.material.side = 0; // FrontSide - 只渲染正面
+          child.material.side = 0;
+          child.material.needsUpdate = true;
+
+          // 如果材质有贴图，设置合适的过滤方式
+          if (child.material.map) {
+            child.material.map.minFilter = THREE.LinearMipMapLinearFilter;
+            child.material.map.magFilter = THREE.LinearFilter;
+          }
         }
+
+        // 合并使用相同材质的网格
+        mergedMeshes.push(child);
       }
     });
 
@@ -160,7 +175,8 @@ loader.load(
     }
 
     const loadTime = Date.now() - startTime;
-    console.log(`大场景模型完全加载并显示，总耗时: ${loadTime}ms`);
+    console.log(`大场景模型完全加载并显示，总耗时：${loadTime}ms`);
+    console.log(`模型网格数量：${mergedMeshes.length}`);
   },
   // 真正的流式加载进度
   (xhr) => {
@@ -188,14 +204,17 @@ nextTick(() => {
   }
 });
 
-//环境贴图
-const rgbELoader = new RGBELoader().load(
-  '/models/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr',
-  (envMap: any) => {
-    envMap.mapping = EquirectangularReflectionMapping;
-    scene.environment = envMap;
-  }
-);
+//环境贴图（延迟加载，避免与模型同时加载）
+setTimeout(() => {
+  const rgbELoader = new RGBELoader().load(
+    '/models/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr',
+    (envMap: any) => {
+      envMap.mapping = EquirectangularReflectionMapping;
+      scene.environment = envMap;
+      console.log('环境贴图加载完成');
+    }
+  );
+}, 500); // 延迟 500ms 加载环境贴图
 
 //补间动画
 const timeline1 = gsap.timeline();
@@ -242,7 +261,8 @@ function handleResize() {
 
 function init() {
   requestAnimationFrame(init);
-  controls.update();
+  // 只在需要时更新控制器
+  // controls.update(); // 已关闭阻尼，不需要每帧更新
   render.render(scene, camera);
 }
 

src/components/three-components/vue-three-transformer.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="container">
+    <!-- 3D 场景 -->
+    <div class="div3D" ref="div3D" v-show="show3D"></div>
+
+    <!-- 原理图 -->
+    <div
+      class="principle-diagram"
+      v-if="showPrinciple"
+      :class="{ 'principle-only': showPrincipleOnly }"
+    >
+      <img src="/models/transformer/yuanli.png" alt="原理图" class="principle-img" />
+    </div>
+  </div>
+
+  <!-- 固定位置的控制按钮 -->
+  <div class="control-buttons">
+    <el-button type="primary" @click="toggle3D">三维图切换</el-button>
+    <el-button type="primary" @click="togglePrinciple">原理图切换</el-button>
+    <el-button type="primary" @click="showBoth">三维和原理图</el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+//导入 threejs
+import {
+  AxesHelper,
+  Color,
+  PerspectiveCamera,
+  Scene,
+  WebGLRenderer,
+  EquirectangularReflectionMapping,
+  Group
+} from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+
+const div3D = ref<HTMLDivElement>();
+//场景
+const scene = new Scene();
+
+// 显示控制
+const show3D = ref(true);
+const showPrinciple = ref(false);
+const showPrincipleOnly = ref(false); // 只显示原理图模式
+
+// 切换显示状态
+const toggle3D = () => {
+  console.log('点击三维图切换');
+  show3D.value = true;
+  showPrinciple.value = false;
+  showPrincipleOnly.value = false;
+  console.log('show3D:', show3D.value, 'showPrinciple:', showPrinciple.value);
+};
+
+const togglePrinciple = () => {
+  console.log('点击原理图切换');
+  showPrinciple.value = true;
+  show3D.value = false;
+  showPrincipleOnly.value = true;
+  console.log('show3D:', show3D.value, 'showPrinciple:', showPrinciple.value);
+};
+
+const showBoth = () => {
+  show3D.value = true;
+  showPrinciple.value = true;
+  showPrincipleOnly.value = false;
+};
+
+//相机
+const camera = new PerspectiveCamera(
+  25,
+  div3D.value?.clientWidth! / div3D.value?.clientHeight!,
+  0.05,
+  1000
+); // 初始比例设为1
+camera.position.set(35, 10, 20);
+camera.lookAt(0, 0, 0);
+scene.add(camera);
+
+//渲染器
+const render = new WebGLRenderer({ antialias: true }); // 启用抗锯齿
+render.setClearColor(new Color('#131519'));
+
+//添加控制器
+const controls = new OrbitControls(camera, render.domElement);
+// 禁用滚轮缩放
+// controls.enableZoom = false;
+// controls.autoRotate = false;
+// controls.enablePan = false; // 禁用右键平移
+controls.autoRotateSpeed = 1;
+controls.dampingFactor = 0.2;
+controls.rotateSpeed = 0.3; // 降低旋转速度（默认为 1.0）
+controls.enableDamping = true;
+controls.enableRotate = true;
+controls.minDistance = 1; // 允许更近距离观察模型细节
+// 设置视角限制：向上45度，向下45度
+// 从正前方开始计算，向上最大45度，向下最大45度
+controls.minPolarAngle = Math.PI / 4; // 向上最多45度 (π/4)
+controls.maxPolarAngle = (Math.PI * 3) / 4; // 向下最多45度 (3π/4)
+
+const loader = new GLTFLoader();
+const dracoLoader = new DRACOLoader();
+loader.setDRACOLoader(dracoLoader);
+let meshArr: Group[] = [];
+loader.load('/models/transformer/transformer.gltf', (gltf: any) => {
+  gltf.scene.position.y = -3;
+  scene.add(gltf.scene);
+});
+
+//环境贴图
+const rgbELoader = new RGBELoader().load(
+  '/models/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr',
+  (envMap: any) => {
+    envMap.mapping = EquirectangularReflectionMapping;
+    scene.environment = envMap;
+  }
+);
+
+//物体
+// const axes = new AxesHelper(20);
+// scene.add(axes);
+
+// 监听容器大小变化
+function handleResize() {
+  if (!div3D.value) return;
+
+  const container = div3D.value;
+  const width = container.clientWidth;
+  const height = container.clientHeight;
+
+  // 更新相机比例
+  camera.aspect = width / height;
+  camera.updateProjectionMatrix();
+
+  // 更新渲染器大小
+  render.setSize(width, height);
+}
+
+function init() {
+  requestAnimationFrame(init);
+  controls.update();
+  render.render(scene, camera);
+}
+
+onMounted(() => {
+  // 初始化时设置正确大小
+  handleResize();
+
+  // 启动渲染循环
+  init();
+
+  // 将渲染器添加到容器
+  div3D.value?.appendChild(render.domElement);
+
+  // 添加容器大小监听
+  const resizeObserver = new ResizeObserver(handleResize);
+  if (div3D.value) {
+    resizeObserver.observe(div3D.value);
+  }
+
+  // 保存观察器引用以便销毁
+  (window as any)._resizeObserver = resizeObserver;
+});
+
+onUnmounted(() => {
+  // 清理资源
+  if ((window as any)._resizeObserver) {
+    (window as any)._resizeObserver.disconnect();
+    delete (window as any)._resizeObserver;
+  }
+});
+</script>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.div3D {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.principle-diagram {
+  position: absolute;
+  top: 10%;
+  right: 0;
+  width: 45%;
+  height: 45%;
+  z-index: 50;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* transition: all 0.3s ease; */
+}
+
+/* 只显示原理图时的样式 */
+.principle-diagram.principle-only {
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.principle-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.control-buttons {
+  position: absolute;
+  top: 2%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: row;
+  gap: 0.5%;
+  z-index: 100;
+}
+</style>

src/components/vue-components/vue-3d-base-information.vue

@@ -0,0 +1,293 @@
+<template>
+  <el-card class="card" shadow="hover" :body-style="{ padding: '10px' }">
+    <h2 class="cardHead">{{ dataTitle }}</h2>
+
+    <div class="cardBody">
+      <el-row :gutter="20" style="height: 100%">
+        <el-col :span="12" class="image-col">
+          <div ref="containerRef" class="container" />
+        </el-col>
+
+        <el-col :span="12">
+          <el-row v-for="item in dataObj" :key="item.field" class="info-row">
+            <el-col :span="10" class="info-label">{{ item.field }}</el-col>
+            <el-col :span="12"
+              ><el-tag size="small">{{ item.value }}</el-tag></el-col
+            >
+          </el-row>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, reactive, computed, watch } from 'vue';
+import {
+  AxesHelper,
+  Color,
+  PerspectiveCamera,
+  Scene,
+  WebGLRenderer,
+  AmbientLight,
+  DirectionalLight,
+  PointLight
+} from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { invariant3DObjMap, type Paragraph } from '@/utils/invariable';
+
+const containerRef = ref<HTMLDivElement>();
+// 场景
+const scene = new Scene();
+
+// 创建摄像机
+const camera = new PerspectiveCamera(
+  45,
+  containerRef.value?.clientWidth! / containerRef.value?.clientHeight!,
+  0.1,
+  1000
+);
+camera.position.set(-40, 20, 35);
+camera.lookAt(scene.position);
+
+// 渲染器
+const renderer = new WebGLRenderer({
+  antialias: true, // 启用抗锯齿
+  alpha: true, // 启用透明背景
+  preserveDrawingBuffer: true // 保持绘图缓冲区
+});
+renderer.setClearColor(new Color('#131519'));
+renderer.setSize(containerRef.value?.clientWidth!, containerRef.value?.clientHeight!);
+renderer.shadowMap.enabled = true;
+renderer.setPixelRatio(window.devicePixelRatio || 1); // 设置像素比率
+
+// 轨道摄像机
+const orbitControls = new OrbitControls(camera, renderer.domElement);
+orbitControls.autoRotate = false;
+orbitControls.autoRotateSpeed = 5;
+orbitControls.dampingFactor = 0.1;
+orbitControls.enableDamping = true;
+orbitControls.enableRotate = true;
+orbitControls.minDistance = 10;
+orbitControls.maxPolarAngle = Math.PI * 0.5;
+
+let modelPath = '/models/default/default.glb';
+const loader = new GLTFLoader();
+const dracoLoader = new DRACOLoader();
+loader.setDRACOLoader(dracoLoader);
+
+// 跟踪当前模型
+let currentModel: any = null;
+
+// 加载默认模型
+loader.load(modelPath, (gltf: any) => {
+  gltf.scene.scale.set(1, 1, 1);
+  scene.add(gltf.scene);
+  currentModel = gltf.scene;
+});
+
+// 环境光：增强整体亮度
+const ambientLight = new AmbientLight('#ffffff', 1.8); // 强度从 0.6 提高到 1.0
+scene.add(ambientLight);
+
+// 平行光
+const directionalLight = new DirectionalLight('#ffffff', 3.8); // 强度从 0.2 提高到 0.8
+scene.add(directionalLight);
+directionalLight.position.set(20, 20, 10);
+
+// 点光源
+const pointLight = new PointLight('#ffffff', 1.8, 1800); // 强度从 0.5 提高到 1.0
+scene.add(pointLight);
+pointLight.position.set(0, 40, 0);
+
+function animate() {
+  requestAnimationFrame(animate);
+  orbitControls.update();
+  renderer.render(scene, camera);
+}
+
+// ResizeObserver 监听容器尺寸变化
+let resizeObserver: ResizeObserver | null = null;
+
+onMounted(() => {
+  const container = containerRef.value!;
+  container.appendChild(renderer.domElement);
+
+  // 初始化摄像机和渲染器尺寸
+  camera.aspect = container.clientWidth / container.clientHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(container.clientWidth, container.clientHeight);
+
+  // 监听容器尺寸变化
+  resizeObserver = new ResizeObserver(() => {
+    camera.aspect = container.clientWidth / container.clientHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(container.clientWidth, container.clientHeight);
+  });
+  resizeObserver.observe(container);
+  animate();
+});
+
+function loadingModel() {
+  // 删除旧模型
+  if (currentModel) {
+    scene.remove(currentModel);
+    // 释放资源
+    currentModel.traverse((child: any) => {
+      if (child.geometry) child.geometry.dispose();
+      if (child.material) {
+        if (Array.isArray(child.material)) {
+          child.material.forEach((m: any) => m.dispose());
+        } else {
+          child.material.dispose();
+        }
+      }
+    });
+    currentModel = null;
+  }
+
+  // 加载新模型
+  loader.load(modelPath, (gltf: any) => {
+    gltf.scene.scale.set(1, 1, 1);
+    scene.add(gltf.scene);
+    currentModel = gltf.scene;
+  });
+}
+
+const props = defineProps({
+  dataTitle: {
+    type: String,
+    default: '--'
+  },
+  dataSource: {
+    type: String,
+    default: '--'
+  }
+});
+
+const dataObj = reactive<Paragraph[]>([]);
+
+function getDataBySource() {
+  dataObj.length = 0;
+  modelPath = '/models/default/default.glb';
+  if (props.dataSource != null && props.dataSource !== '' && props.dataSource !== '--') {
+    const dataObjTemp = invariant3DObjMap[props.dataSource];
+    if (!dataObjTemp) {
+      loadingModel();
+      return;
+    }
+
+    dataObjTemp.forEach((item) => {
+      if (item.field == '3D模型') {
+        modelPath = item.value;
+      } else dataObj.push(item);
+    });
+  }
+  loadingModel();
+}
+
+watch(
+  () => props.dataSource,
+  (newVal, oldVal) => {
+    getDataBySource();
+  }
+);
+
+onUnmounted(() => {
+  // 清理模型
+  if (currentModel) {
+    scene.remove(currentModel);
+    currentModel.traverse((child: any) => {
+      if (child.geometry) child.geometry.dispose();
+      if (child.material) {
+        if (Array.isArray(child.material)) {
+          child.material.forEach((m: any) => m.dispose());
+        } else {
+          child.material.dispose();
+        }
+      }
+    });
+    currentModel = null;
+  }
+
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+});
+</script>
+
+<style scoped>
+.card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card :deep(.el-card__body) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 10px;
+}
+
+.cardHead {
+  margin: 0 0 15px 0;
+  padding: 0;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  color: #ffffff;
+  flex-shrink: 0;
+}
+
+.cardBody {
+  width: 100%;
+  height: 100%;
+}
+
+/* el-row 高度继承 */
+.cardBody :deep(.el-row) {
+  /* height: 100%; */
+}
+
+/* el-col 高度继承 */
+.cardBody :deep(.el-col) {
+  /* height: 100%;
+  display: flex;
+  align-items: stretch; */
+}
+
+/* 图片列样式 */
+.image-col {
+  height: 100%;
+  display: flex;
+}
+
+/* 探测器图片样式 */
+.detector-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* 信息行样式 */
+.info-row {
+  margin-bottom: 1%;
+}
+
+/* 标签样式 */
+.info-label {
+  font-size: 12px;
+  color: #ffffff;
+}
+
+/* el-tag 样式 */
+.info-row :deep(.el-tag) {
+  font-size: 11px;
+}
+</style>

src/components/vue-components/vue-base-information.vue

@@ -0,0 +1,101 @@
+<template>
+  <el-card class="card">
+    <h2 class="cardHead">基本信息</h2>
+    <div class="cardBody">
+      <el-scrollbar>
+        <el-row
+          v-for="item in dataObj"
+          :key="item.field"
+          :gutter="0"
+          style="display: flex; align-items: center; margin-bottom: 1%"
+        >
+          <el-col :span="8" :offset="4">{{ item.field }}</el-col>
+          <el-col :span="4">
+            <el-tag type="primary" size="small">{{ item.value }}</el-tag>
+          </el-col>
+        </el-row>
+
+        <!-- <el-row :gutter="0" style="display: flex; align-items: center;margin-bottom: 1%;">
+          <el-col :span="8" :offset="4"> 名称 </el-col>
+          <el-col :span="4">
+            <el-tag type="primary" size="small">{{ data.name }}</el-tag>
+          </el-col>
+        </el-row> -->
+      </el-scrollbar>
+    </div>
+  </el-card>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch, onMounted, reactive } from 'vue';
+import { invariantObjMap, type Paragraph } from '@/utils/invariable';
+import { da } from 'element-plus/es/locales.mjs';
+
+const props = defineProps({
+  dataSource: {
+    type: String,
+    default: '--'
+  }
+});
+const dataObj = reactive<Paragraph[]>([]);
+
+function getDataBySource() {
+  dataObj.length = 0;
+  if (props.dataSource != null && props.dataSource !== '' && props.dataSource !== '--') {
+    const dataObjTemp = invariantObjMap[props.dataSource];
+    if (!dataObjTemp) return;
+    dataObj.push(...dataObjTemp);
+  }
+}
+
+onMounted(() => {
+  loadDataSource(props.dataSource);
+});
+
+watch(
+  () => props.dataSource,
+  (newVal, oldVal) => {
+    loadDataSource(newVal);
+  }
+);
+
+function loadDataSource(val: string) {
+  // 加载对应数据源的数据
+  getDataBySource();
+}
+</script>
+
+<style scoped>
+:deep(.el-card__body) {
+  padding: 0;
+  padding-top: 10px;
+  padding-left: 2%;
+}
+
+.el-row .el-col {
+  margin-bottom: 6px; /* 设置上下间距 */
+}
+
+.card {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  color: #ffffff;
+  font-size: 12px;
+}
+
+.cardHead {
+  margin: 0;
+  padding: 0px;
+  padding-bottom: 5px;
+  text-align: center;
+}
+.cardBody {
+  width: 98%;
+  margin: 0;
+  padding: 0;
+  height: calc(100% - 40px);
+  overflow: hidden;
+}
+</style>

src/components/vue-components/vue-car.vue

@@ -0,0 +1,98 @@
+<template>
+  <!-- <el-button @click="ccc">Default</el-button> -->
+  <el-card class="card">
+    <el-scrollbar height="100%">
+      <h2 class="cardHead">{{ testContent }}</h2>
+
+      <div class="cardBody" v-if="skeletonBool">
+        <el-skeleton :rows="rows" style="margin-top: 4%" />
+      </div>
+    </el-scrollbar>
+  </el-card>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch, onMounted } from 'vue';
+
+const props = defineProps({
+  fontFamily: {
+    type: String,
+    default: 'Segoe UI'
+  },
+  fontSize: {
+    type: Number,
+    default: 14
+  },
+  testColor: {
+    type: String,
+    default: '#000000'
+  },
+  testContent: {
+    type: String,
+    default: '标题内容'
+  },
+  skeletonBool: {
+    type: Boolean,
+    default: true
+  },
+  skeletonRows: {
+    type: Number,
+    default: 5
+  }
+});
+let computedSize = computed({
+  // 读取
+  get() {
+    return props.fontSize + 'px';
+  }, // 修改
+  set(val) {
+    console.log('有人修改了fullName', val);
+  }
+});
+
+let rows = computed({
+  // 读取
+  get() {
+    if (props.skeletonRows >= 1) return props.skeletonRows - 1;
+    else return 0;
+  },
+  set(val) {}
+});
+</script>
+
+<style scoped>
+:deep(.el-card__body) {
+  padding: 0;
+  padding-top: 10px;
+  /* padding-left: 10px; */
+}
+.card {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  /* max-width: 480px; */
+  color: v-bind('props.testColor');
+  font-family: v-bind('props.fontFamily');
+  /* font-family: 'Segoe UI'; */
+  font-size: v-bind('computedSize');
+}
+
+.cardHead {
+  margin: 0;
+  padding: 0px;
+  padding-bottom: 5px;
+  text-align: center;
+}
+.cardBody {
+  width: 90%;
+  height: 100%;
+  margin-left: 5%;
+}
+
+/* 让骨架屏的段落更厚且宽度一致 */
+:deep(.el-skeleton__item) {
+  height: 24px; /* 增加段落高度，默认约 16px */
+  width: 100%; /* 让所有段落宽度一致，填满容器 */
+}
+</style>

src/components/vue-components/vue-characters.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="vue-characters">
+    <div v-if="type == 0" class="color-dot" :style="{ backgroundColor: color }"></div>
+    <div v-else-if="type == 1">
+      <el-tag size="large">{{ text }}</el-tag>
+    </div>
+    <div v-else-if="type == 2" style="background-color: saddlebrown">
+      <el-tag size="large" :style="{ backgroundColor: color }">{{ text }}</el-tag>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useNodeByModelsStore } from '@/components/mt-edit/store/nodeByModels';
+import { getIndex, Rec } from '@/utils/config';
+import emitter from '@/utils/emitter';
+const nodeByModelsStore = useNodeByModelsStore();
+const etype = ref(-1);
+const btype = ref(-1);
+const valInt = ref(0);
+const text = ref('');
+const color = ref('');
+const type = ref();
+const props = defineProps({
+  moduleType: {
+    type: String,
+    default: '--'
+  },
+  moduleId: {
+    type: String,
+    default: '--'
+  },
+  definitionItemJson: {
+    type: Object,
+    default: () => ({})
+  },
+  location: {
+    type: String,
+    default: 'bottom'
+  }
+});
+function getModuleById(moduleId: string) {
+  const globalData = (window as any).globalData;
+  if (!globalData || moduleId == undefined || moduleId == '' || props.moduleId == '--') {
+    console.warn('globalData 未初始化');
+    return null;
+  }
+  // 根据实际类型访问
+  if (globalData instanceof Map) {
+    // 如果是 Map 类型
+    return globalData.get(moduleId);
+  } else {
+    // 如果是普通对象
+    return globalData[moduleId];
+  }
+}
+const getText = () => {
+  switch (type.value) {
+    case 0: {
+      color.value = Rec.EnumTypeValFun![etype.value](valInt.value, getIndex(btype.value));
+      break;
+    }
+    case 1: {
+      text.value = Rec.EnumTypeValFun![etype.value](valInt.value, getIndex(btype.value));
+      break;
+    }
+    case 2: {
+      const temp = Rec.EnumTypeValFun![etype.value](valInt.value, getIndex(btype.value));
+      text.value = temp.split(',')[0];
+      color.value = temp.split(',')[1];
+      console.log(color.value);
+      break;
+    }
+  }
+};
+function loadingModuleById() {
+  let module = getModuleById(props.moduleId);
+  if (props.moduleId !== '' && props.moduleId !== undefined && props.moduleId !== '--' && module) {
+    if (module) {
+      console.log('当前的module', module);
+      etype.value = module.node.etype;
+      btype.value = module.node.btype;
+      valInt.value = module.valInt;
+      type.value = Rec.CONST!.YX.EnumType[etype.value][0];
+      getText();
+    }
+  }
+}
+emitter.on(props.definitionItemJson.id, (value) => {
+  loadingModuleById();
+});
+watch(
+  () => props.moduleId,
+  (newVal, oldVal) => {
+    loadingModuleById();
+    nodeByModelsStore.change(newVal, oldVal, props.definitionItemJson.id);
+  }
+);
+</script>
+
+<style scoped>
+.vue-characters {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.color-dot {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: inline-block;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+  transition: background-color 0.3s ease;
+}
+</style>

src/components/vue-components/vue-extinguisher-table.vue

@@ -0,0 +1,305 @@
+<template>
+  <div class="table-container">
+    <el-card class="card" shadow="hover" :body-style="{ padding: '10px' }">
+      <h2 class="cardHead">运行信息</h2>
+      <div class="table-wrapper" v-loading="tableArr.length === 0">
+        <!-- :span-method="objectSpanMethods" -->
+        <el-table
+          :data="tableArr"
+          style="width: 100%"
+          :span-method="objectSpanMethods"
+          class="full-height-table"
+        >
+          <el-table-column prop="floorArea" label="所在区域" />
+          <el-table-column prop="equipmentPlace" label="配置地点" />
+          <el-table-column prop="equipmentName" label="设备名称" />
+          <el-table-column prop="equipmentSpecification" label="规格型号" />
+          <el-table-column prop="equipmentNumber" label="编号" />
+          <el-table-column prop="vender" label="设备厂家" />
+        </el-table>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { TableColumnCtx } from 'element-plus';
+import { computed, onMounted, onUnmounted, ref, watch, reactive } from 'vue';
+import emitter from '@/utils/emitter';
+import { ro } from 'element-plus/es/locales.mjs';
+
+const props = defineProps({
+  fontFamily: {
+    type: String,
+    default: '黑体'
+  },
+  fontSize: {
+    type: Number,
+    default: 12
+  },
+  testColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  definitionItemJson: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+// 计算属性——既读取又修改
+let computedSize = computed({
+  // 读取
+  get() {
+    return props.fontSize + 'px';
+  }, // 修改
+  set(val) {}
+});
+
+interface Equipment {
+  equipmentPlace: string; //设备地点
+  equipmentName: string; //设备名称
+  equipmentSpecification: string; //规格
+  equipmentNumber: string; //编号
+  vender: string; //厂家
+}
+interface FloorObj {
+  floorArea: string; //区域
+  equipments: Equipment[];
+}
+
+let tableArr = ref<any[]>([]);
+let spanMap = ref<Map<string, number>>(new Map<string, number>());
+
+//数据初始化
+async function dataInit() {
+  floorData.forEach((floor) => {
+    floor.equipments.forEach((equipment) => {
+      tableArr.value.push({
+        floorArea: floor.floorArea,
+        equipmentPlace: equipment.equipmentPlace,
+        equipmentName: equipment.equipmentName,
+        equipmentSpecification: equipment.equipmentSpecification,
+        equipmentNumber: equipment.equipmentNumber,
+        vender: equipment.vender
+      });
+    });
+    if (!spanMap.value.has(floor.floorArea))
+      spanMap.value.set(floor.floorArea, floor.equipments.length);
+  });
+  console.log('spanMap', spanMap.value);
+}
+
+// 记录每个楼层已经处理到第几行
+let floorStartIndex = ref<Map<string, number>>(new Map<string, number>());
+
+// 合并单元格的逻辑
+function objectSpanMethods({ rowIndex, columnIndex }: any) {
+  if (columnIndex === 0) {
+    // 只合并第一列"所在区域"
+    const floorArea = tableArr.value[rowIndex].floorArea;
+
+    // 如果是第一次遇到该楼层，记录起始位置
+    if (!floorStartIndex.value.has(floorArea)) {
+      floorStartIndex.value.set(floorArea, rowIndex);
+    }
+
+    // 如果是该楼层的第一行，显示并合并
+    if (floorStartIndex.value.get(floorArea) === rowIndex) {
+      return [spanMap.value.get(floorArea) || 1, 1];
+    } else {
+      // 不是第一行，隐藏
+      return [0, 0];
+    }
+  }
+  return [1, 1];
+}
+
+// 在 onMounted 中
+onMounted(async () => {
+  await dataInit();
+});
+
+onUnmounted(() => {
+  emitter.off('binding-data-update');
+});
+
+// 数据源头
+const floorData: FloorObj[] = [
+  {
+    floorArea: '生产综合楼1楼',
+    equipments: [
+      {
+        equipmentPlace: '蓄电池室',
+        equipmentName: '干粉灭火器',
+        equipmentSpecification: 'MFZ4',
+        equipmentNumber: '1、2号',
+        vender: '天河消防厂'
+      },
+      {
+        equipmentPlace: '220kV保护室',
+        equipmentName: '氧化碳灭火器',
+        equipmentSpecification: 'MFZ4',
+        equipmentNumber: '1、2号',
+        vender: '天河消防厂'
+      },
+      {
+        equipmentPlace: '380V配电室',
+        equipmentName: '干粉灭火器',
+        equipmentSpecification: 'MFZ4',
+        equipmentNumber: '1、2号',
+        vender: '天河消防厂'
+      },
+      {
+        equipmentPlace: '35kV高压室',
+        equipmentName: '干粉灭火器',
+        equipmentSpecification: 'MFZ4',
+        equipmentNumber: '1、2号',
+        vender: '天河消防厂'
+      },
+      {
+        equipmentPlace: '2号接地变室',
+        equipmentName: '干粉灭火器',
+        equipmentSpecification: 'MFZ4',
+        equipmentNumber: '1、2号',
+        vender: '天河消防厂'
+      },
+      {
+        equipmentPlace: '110kV电缆室',
+        equipmentName: '干粉灭火器',
+        equipmentSpecification: 'MFZ4',
+        equipmentNumber: '1、2号',
+        vender: '天河消防厂'
+      },
+      {
+        equipmentPlace: '2号站用变室',
+        equipmentName: '干粉灭火器',
+        equipmentSpecification: 'MFZ4',
+        equipmentNumber: '1、2号',
+        vender: '天河消防厂'
+      },
+      {
+        equipmentPlace: '生产综合楼1楼走廊',
+        equipmentName: '干粉灭火器',
+        equipmentSpecification: 'MFZ4',
+        equipmentNumber: '1、2号',
+        vender: '天河消防厂'
+      }
+    ]
+  },
+  {
+    floorArea: '生产综合楼2楼',
+    equipments: [
+      {
+        equipmentPlace: '110kVGIS室',
+        equipmentName: '干粉灭火器',
+        equipmentSpecification: 'MFZ4',
+        equipmentNumber: '1、2号',
+        vender: '天河消防厂'
+      },
+      {
+        equipmentPlace: '110kV保护室',
+        equipmentName: '干粉灭火器',
+        equipmentSpecification: 'MFZ4',
+        equipmentNumber: '1、2号',
+        vender: '天河消防厂'
+      },
+      {
+        equipmentPlace: '主控制室',
+        equipmentName: '干粉灭火器',
+        equipmentSpecification: 'MFZ4',
+        equipmentNumber: '1、2号',
+        vender: '天河消防厂'
+      },
+      {
+        equipmentPlace: '生产综合楼2楼',
+        equipmentName: '干粉灭火器',
+        equipmentSpecification: 'MFZ4',
+        equipmentNumber: '1、2号',
+        vender: '天河消防厂'
+      }
+    ]
+  }
+];
+</script>
+
+<style scoped>
+.table-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card :deep(.el-card__body) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 10px;
+}
+
+.table-wrapper {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.full-height-table {
+  flex: 1;
+  height: 100%;
+}
+
+.full-height-table :deep(.el-table__body-wrapper) {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.cardHead {
+  margin: 0 0 15px 0;
+  padding: 0;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  color: #ffffff;
+  flex-shrink: 0;
+}
+
+.operation-btn {
+  width: 60px;
+  min-width: 50px;
+  padding: 8px 12px;
+  height: 30px;
+}
+
+/* 控制表头文字大小 */
+.full-height-table :deep(.el-table__header th) {
+  font-size: 13px;
+  font-weight: bold;
+}
+
+/* 控制表格内容文字大小 */
+.full-height-table :deep(.el-table__body td) {
+  font-size: v-bind('computedSize');
+  color: v-bind('props.testColor');
+}
+
+/* 控制标签文字大小 */
+.full-height-table :deep(.el-tag) {
+  font-size: v-bind('computedSize'); /* 标签内的文字可以稍小一些 */
+}
+
+/* 控制按钮文字大小 */
+.full-height-table :deep(.el-button) {
+  font-size: v-bind('computedSize');
+  color: v-bind('props.testColor');
+}
+</style>

src/components/vue-components/vue-flow-chart.vue

@@ -0,0 +1,174 @@
+<template>
+  <el-card class="card" shadow="hover" :body-style="{ padding: '10px' }">
+    <h2 class="cardHead">操作流程</h2>
+    <div class="cardBody">
+      <el-steps
+        style="max-width: 100%"
+        :active="4"
+        align-center
+        direction="vertical"
+        finish-status="success"
+      >
+        <el-step description="变压器故障起火" />
+        <el-step>
+          <template #description>
+            保护动作
+            <div class="parallel-box">
+              <el-tag type="primary">重瓦斯动作</el-tag>
+              <el-tag type="success">温控器动作</el-tag>
+              <el-tag type="primary">压力释放动作</el-tag>
+              <el-tag type="primary">火灾探测器动作</el-tag>
+            </div>
+          </template>
+        </el-step>
+        <el-step description="排油阀开启" />
+        <el-step description="注氮阀开启" />
+        <el-step description="注氮阀关闭" />
+        <el-step description="注氮 10 分钟以上达到防爆灭火效果" />
+      </el-steps>
+    </div>
+
+    <div class="button-group">
+      <el-button type="primary" size="small">手动启动</el-button>
+      <el-button type="primary" size="small">手动停止</el-button>
+      <el-button type="primary" size="small">紧急停止</el-button>
+    </div>
+  </el-card>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card :deep(.el-card__body) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 10px;
+}
+
+.cardHead {
+  margin: 0 0 15px 0;
+  padding: 0;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  color: #ffffff;
+  flex-shrink: 0;
+}
+
+.cardBody {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  overflow-y: auto;
+}
+
+/* 并行步骤框 */
+.parallel-box {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+/* el-tag 样式调整 */
+.parallel-box :deep(.el-tag) {
+  text-align: left;
+  padding: 8px 16px;
+  width: 60%;
+}
+
+/* 并行步骤样式 */
+.parallel-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 10px;
+  padding: 10px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+}
+
+/* 按钮组样式 */
+.button-group {
+  display: flex;
+  gap: 1%;
+  justify-content: center;
+  margin-top: 15px;
+}
+
+.step-item {
+  padding: 8px 12px;
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  color: #ffffff;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.step-title {
+  font-weight: bold;
+  font-size: 14px;
+}
+
+/* 操作区域 */
+.operation-area {
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  padding: 15px;
+  background: rgba(255, 255, 255, 0.05);
+  margin-top: 20px;
+}
+
+.area-title {
+  margin: 0 0 15px 0;
+  font-size: 14px;
+  font-weight: bold;
+  color: #4facfe;
+  text-align: center;
+}
+
+.buttons {
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+  margin-bottom: 15px;
+}
+
+.notes {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.note {
+  margin: 0;
+  font-size: 11px;
+  color: #f5576c;
+  line-height: 1.6;
+  flex: 1;
+}
+
+.note-label {
+  font-weight: bold;
+  color: #f093fb;
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+  .notes {
+    flex-direction: column;
+  }
+}
+</style>

src/components/vue-components/vue-generate-table.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="generate-table">
+    <StandardDataGrid
+      :columns="tableColumns"
+      :tableData="deviceList"
+      :span-method="spanMethod"
+      @on-action="handleTableAction"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+import type { DataGridSchema } from '@/components/custom-components/table-vue/type';
+import StandardDataGrid from '@/components/custom-components/table-vue/StandardDataGrid.vue';
+import {
+  createRowSpanMethod,
+  injectMultiNodeFlag
+} from '@/components/custom-components/table-vue/utils/tableUtils';
+import { useTableSpan } from '@/components/custom-components/table-vue/utils/useTableSpan';
+import { Rec } from '@/utils/config';
+import emitter from '@/utils/emitter';
+import { useNodeByModelsStore } from '@/components/mt-edit/store/nodeByModels';
+import { getTableInfoVO, getTableOptionsVOList } from '@/api/TableInfoController';
+
+const nodeByModelsStore = useNodeByModelsStore();
+const tableColumns = ref<DataGridSchema>([]);
+const deviceList = ref<any[]>([]);
+const fetchDeviceData = async () => {
+  deviceList.value = [
+    {
+      id: 1,
+      location: '生产综合楼一楼',
+      deviceName: '一楼走廊控制器',
+      deviceStatus: '正常',
+      commStatus: '正常',
+      address: '一楼门厅',
+      switchStatus: 'turnOn'
+    },
+    {
+      id: 2,
+      location: '生产综合楼一楼',
+      deviceName: '一楼走廊控制器', // 🌟 这里和上一行完全一样，会被自动合并
+      deviceStatus: '正常',
+      commStatus: '正常',
+      address: '一楼走廊',
+      switchStatus: 'turnOff'
+    },
+    {
+      id: 3,
+      location: '生产综合楼一楼',
+      deviceName: '安全工器具室控制器', // 名字变了，重新开始渲染新格子
+      deviceStatus: '正常',
+      commStatus: '正常',
+      address: '安全工器具室',
+      switchStatus: 'turnOff'
+    },
+    {
+      id: 4,
+      location: '生产综合楼一楼',
+      deviceName: '220kV 保护室控制器',
+      deviceStatus: '正常',
+      commStatus: '正常',
+      address: '220kV 保护室东侧',
+      switchStatus: 'turnOff'
+    },
+    {
+      id: 5,
+      location: '生产综合楼一楼',
+      deviceName: '220kV 保护室控制器',
+      deviceStatus: '正常',
+      commStatus: '正常',
+      address: '220kV 保护室西侧',
+      switchStatus: 'turnOff'
+    },
+    {
+      type: 'controller',
+      location: '生产综合楼一楼照明：'
+    },
+    // --- 生产综合楼二楼 数据组 ---
+    {
+      id: 6,
+      location: '生产综合楼二楼',
+      deviceName: '二楼走廊控制器',
+      deviceStatus: '正常',
+      commStatus: '正常',
+      address: '二楼走廊',
+      switchStatus: 'turnOff'
+    },
+    {
+      id: 7,
+      location: '生产综合楼二楼',
+      deviceName: '110kV GIS室控制器',
+      deviceStatus: '正常',
+      commStatus: '正常',
+      address: '110kV GIS室东侧',
+      switchStatus: 'turnOff'
+    },
+    {
+      id: 8,
+      location: '生产综合楼二楼',
+      deviceName: '110kV GIS室控制器',
+      deviceStatus: '正常',
+      commStatus: '正常',
+      address: '110kV GIS室西侧',
+      switchStatus: 'turnOn'
+    },
+    // 🌟 二楼的汇总行
+    {
+      type: 'controller',
+      location: '生产综合楼二楼照明：'
+    }
+  ];
+  // 统计设备出现的行数
+  deviceList.value = injectMultiNodeFlag(deviceList.value, 'deviceName', 'isMultiNode');
+};
+const { spanMethod } = useTableSpan(deviceList, tableColumns);
+const handleTableAction = (action: any, data: any) => {
+  console.log('action', action);
+  console.log('data', data);
+};
+const props = defineProps({
+  moduleType: {
+    type: String,
+    default: '--'
+  },
+  moduleId: {
+    type: String,
+    default: '--'
+  },
+  definitionItemJson: {
+    type: Object,
+    default: () => ({})
+  },
+  location: {
+    type: String,
+    default: 'bottom'
+  },
+  dataSource: {
+    type: String,
+    default: '--'
+  }
+});
+const fetchTableColumns = async (type: any) => {
+  const res = await getTableInfoVO({
+    params: {
+      type: type
+    }
+  });
+  if (res.data.code == 200) {
+    tableColumns.value = JSON.parse(res.data.data.tableSchema);
+    await fetchDeviceData();
+  }
+};
+watch(
+  () => props.dataSource,
+  async (newVal, oldVal) => {
+    if (newVal === '--') return;
+    debugger;
+    await fetchTableColumns(newVal);
+  }
+);
+
+onMounted(async () => {
+  if (props.dataSource !== '--' || props.dataSource != null)
+    await fetchTableColumns(props.dataSource);
+});
+</script>
+
+<style scoped>
+div {
+  display: flex;
+  flex-direction: column;
+}
+</style>

src/components/vue-components/vue-illumination-table.vue

@@ -0,0 +1,305 @@
+<template>
+  <div class="table-container">
+    <el-card class="card" shadow="hover" :body-style="{ padding: '10px' }">
+      <h2 class="cardHead">运行信息</h2>
+      <div class="table-wrapper" v-loading="tableArr.length === 0">
+        <!-- :span-method="objectSpanMethods" -->
+        <el-table
+          :data="tableArr"
+          style="width: 100%"
+          :span-method="objectSpanMethods"
+          class="full-height-table"
+        >
+          <el-table-column prop="floorArea" label="所在区域" />
+          <el-table-column prop="equipmentPlace" label="设备地点" />
+          <el-table-column prop="fireproofDoor" label="防火门" />
+          <el-table-column prop="indicate" label="疏散指示" />
+          <el-table-column prop="illumination" label="应急照明" />
+          <el-table-column prop="control" label="应急照明控制" />
+        </el-table>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { TableColumnCtx } from 'element-plus';
+import { computed, onMounted, onUnmounted, ref, watch, reactive } from 'vue';
+import emitter from '@/utils/emitter';
+import { ro } from 'element-plus/es/locales.mjs';
+
+const props = defineProps({
+  fontFamily: {
+    type: String,
+    default: '黑体'
+  },
+  fontSize: {
+    type: Number,
+    default: 12
+  },
+  testColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  definitionItemJson: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+// 计算属性——既读取又修改
+let computedSize = computed({
+  // 读取
+  get() {
+    return props.fontSize + 'px';
+  }, // 修改
+  set(val) {}
+});
+
+interface Equipment {
+  equipmentPlace: string; //设备地点
+  fireproofDoor: string; //防火门
+  indicate: string; //疏散指示
+  illumination: string; //应急照明
+  control: boolean; //应急照明控制 true开启  false关闭
+}
+interface FloorObj {
+  floorArea: string; //区域
+  equipments: Equipment[];
+}
+
+let tableArr = ref<any[]>([]);
+let spanMap = ref<Map<string, number>>(new Map<string, number>());
+
+//数据初始化
+async function dataInit() {
+  floorData.forEach((floor) => {
+    floor.equipments.forEach((equipment) => {
+      tableArr.value.push({
+        floorArea: floor.floorArea,
+        equipmentPlace: equipment.equipmentPlace,
+        fireproofDoor: equipment.fireproofDoor,
+        indicate: equipment.indicate,
+        illumination: equipment.illumination,
+        control: equipment.control
+      });
+    });
+    if (!spanMap.value.has(floor.floorArea))
+      spanMap.value.set(floor.floorArea, floor.equipments.length);
+  });
+  console.log('spanMap', spanMap.value);
+}
+
+// 记录每个楼层已经处理到第几行
+let floorStartIndex = ref<Map<string, number>>(new Map<string, number>());
+
+// 合并单元格的逻辑
+function objectSpanMethods({ rowIndex, columnIndex }: any) {
+  if (columnIndex === 0) {
+    // 只合并第一列"所在区域"
+    const floorArea = tableArr.value[rowIndex].floorArea;
+
+    // 如果是第一次遇到该楼层，记录起始位置
+    if (!floorStartIndex.value.has(floorArea)) {
+      floorStartIndex.value.set(floorArea, rowIndex);
+    }
+
+    // 如果是该楼层的第一行，显示并合并
+    if (floorStartIndex.value.get(floorArea) === rowIndex) {
+      return [spanMap.value.get(floorArea) || 1, 1];
+    } else {
+      // 不是第一行，隐藏
+      return [0, 0];
+    }
+  }
+  return [1, 1];
+}
+
+// 在 onMounted 中
+onMounted(async () => {
+  await dataInit();
+});
+
+onUnmounted(() => {
+  emitter.off('binding-data-update');
+});
+
+// 数据源头
+const floorData: FloorObj[] = [
+  {
+    floorArea: '生产综合楼1楼',
+    equipments: [
+      {
+        equipmentPlace: '蓄电池室',
+        fireproofDoor: '关闭',
+        indicate: '亮',
+        illumination: '不亮',
+        control: true
+      },
+      {
+        equipmentPlace: '220kV保护室',
+        fireproofDoor: '关闭',
+        indicate: '亮',
+        illumination: '不亮',
+        control: true
+      },
+      {
+        equipmentPlace: '380V配电室',
+        fireproofDoor: '关闭',
+        indicate: '亮',
+        illumination: '不亮',
+        control: true
+      },
+      {
+        equipmentPlace: '110kV电缆室',
+        fireproofDoor: '关闭',
+        indicate: '亮',
+        illumination: '不亮',
+        control: true
+      },
+      {
+        equipmentPlace: '220kV保护室',
+        fireproofDoor: '关闭',
+        indicate: '亮',
+        illumination: '不亮',
+        control: true
+      },
+      {
+        equipmentPlace: '380V配电室',
+        fireproofDoor: '关闭',
+        indicate: '亮',
+        illumination: '不亮',
+        control: true
+      },
+      {
+        equipmentPlace: '35kV高压室',
+        fireproofDoor: '关闭',
+        indicate: '亮',
+        illumination: '不亮',
+        control: true
+      },
+      {
+        equipmentPlace: '2号接地变室',
+        fireproofDoor: '关闭',
+        indicate: '亮',
+        illumination: '不亮',
+        control: true
+      },
+      {
+        equipmentPlace: '2号站用变室',
+        fireproofDoor: '关闭',
+        indicate: '亮',
+        illumination: '不亮',
+        control: true
+      }
+    ]
+  },
+  {
+    floorArea: '生产综合楼2楼',
+    equipments: [
+      {
+        equipmentPlace: '110kVGIS室',
+        fireproofDoor: '关闭',
+        indicate: '亮',
+        illumination: '不亮',
+        control: true
+      },
+      {
+        equipmentPlace: '110kV保护室',
+        fireproofDoor: '关闭',
+        indicate: '亮',
+        illumination: '不亮',
+        control: true
+      },
+      {
+        equipmentPlace: '主控制室',
+        fireproofDoor: '关闭',
+        indicate: '亮',
+        illumination: '不亮',
+        control: true
+      }
+    ]
+  }
+];
+</script>
+
+<style scoped>
+.table-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card :deep(.el-card__body) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 10px;
+}
+
+.table-wrapper {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.full-height-table {
+  flex: 1;
+  height: 100%;
+}
+
+.full-height-table :deep(.el-table__body-wrapper) {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.cardHead {
+  margin: 0 0 15px 0;
+  padding: 0;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  color: #ffffff;
+  flex-shrink: 0;
+}
+
+.operation-btn {
+  width: 60px;
+  min-width: 50px;
+  padding: 8px 12px;
+  height: 30px;
+}
+
+/* 控制表头文字大小 */
+.full-height-table :deep(.el-table__header th) {
+  font-size: 13px;
+  font-weight: bold;
+}
+
+/* 控制表格内容文字大小 */
+.full-height-table :deep(.el-table__body td) {
+  font-size: v-bind('computedSize');
+  color: v-bind('props.testColor');
+}
+
+/* 控制标签文字大小 */
+.full-height-table :deep(.el-tag) {
+  font-size: v-bind('computedSize'); /* 标签内的文字可以稍小一些 */
+}
+
+/* 控制按钮文字大小 */
+.full-height-table :deep(.el-button) {
+  font-size: v-bind('computedSize');
+  color: v-bind('props.testColor');
+}
+</style>

src/components/vue-components/vue-img-immobilization.vue

@@ -37,17 +37,12 @@ const props = defineProps({
   }
 });
 
-
-
-
 onUnmounted(() => {
   console.log('组件卸载');
 });
 
 // 页面加载
-onMounted(() => {
-
-});
+onMounted(() => {});
 </script>
 
 <style scoped>

src/components/vue-components/vue-info-detector.vue

@@ -0,0 +1,138 @@
+<template>
+  <el-card class="card" shadow="hover" :body-style="{ padding: '10px' }">
+    <h2 class="cardHead">火灾探测器基本信息</h2>
+    <div class="cardBody">
+      <el-row :gutter="20" style="height: 100%">
+        <el-col :span="12" class="image-col">
+          <img src="/imgs/xianqvan.png" style="width: 100%; height: 100%" />
+        </el-col>
+        <el-col :span="12">
+          <el-row class="info-row">
+            <el-col :span="10" class="info-label">厂家</el-col>
+            <el-col :span="12"><el-tag size="small">海湾公司</el-tag></el-col>
+          </el-row>
+
+          <el-row class="info-row">
+            <el-col :span="10" class="info-label">型号</el-col>
+            <el-col :span="12"><el-tag size="small">CTI-155X</el-tag></el-col>
+          </el-row>
+
+          <el-row class="info-row">
+            <el-col :span="10" class="info-label">投运日期</el-col>
+            <el-col :span="12"><el-tag size="small">2012-08-08</el-tag></el-col>
+          </el-row>
+
+          <el-row class="info-row">
+            <el-col :span="10" class="info-label">使用环境</el-col>
+            <el-col :span="12"><el-tag size="small">温度 -5℃~45℃</el-tag></el-col>
+          </el-row>
+
+          <el-row class="info-row">
+            <el-col :span="10" class="info-label">火灾响应规模</el-col>
+            <el-col :span="12"><el-tag size="small">10mm</el-tag></el-col>
+          </el-row>
+
+          <el-row class="info-row">
+            <el-col :span="10" class="info-label">测量温度精度</el-col>
+            <el-col :span="12"><el-tag size="small">≤1℃</el-tag></el-col>
+          </el-row>
+
+          <el-row class="info-row">
+            <el-col :span="10" class="info-label">定位精度</el-col>
+            <el-col :span="12"><el-tag size="small">≤1 米</el-tag></el-col>
+          </el-row>
+
+          <el-row class="info-row">
+            <el-col :span="10" class="info-label">类型</el-col>
+            <el-col :span="12"><el-tag size="small">定温式</el-tag></el-col>
+          </el-row>
+
+          <el-row class="info-row">
+            <el-col :span="10" class="info-label">报警温度</el-col>
+            <el-col :span="12"><el-tag size="small">85℃</el-tag></el-col>
+          </el-row>
+
+          <el-row class="info-row">
+            <el-col :span="10" class="info-label">标准</el-col>
+            <el-col :span="12"><el-tag size="small">GB16280-2014</el-tag></el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card :deep(.el-card__body) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 10px;
+}
+
+.cardHead {
+  margin: 0 0 15px 0;
+  padding: 0;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  color: #ffffff;
+  flex-shrink: 0;
+}
+
+.cardBody {
+  width: 100%;
+  height: 100%;
+}
+
+/* el-row 高度继承 */
+.cardBody :deep(.el-row) {
+  /* height: 100%; */
+}
+
+/* el-col 高度继承 */
+.cardBody :deep(.el-col) {
+  /* height: 100%;
+  display: flex;
+  align-items: stretch; */
+}
+
+/* 图片列样式 */
+.image-col {
+  height: 100%;
+  display: flex;
+}
+
+/* 探测器图片样式 */
+.detector-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* 信息行样式 */
+.info-row {
+  margin-bottom: 2%;
+}
+
+/* 标签样式 */
+.info-label {
+  font-size: 12px;
+  color: #ffffff;
+}
+
+/* el-tag 样式 */
+.info-row :deep(.el-tag) {
+  font-size: 11px;
+}
+</style>

src/components/vue-components/vue-str-info.vue

@@ -0,0 +1,289 @@
+<template>
+  <!-- 四遥：遥测 -->
+  <!-- <button @click="console.log('data:', nodeByModelsStore.nodeMap)">点击</button> -->
+  <el-row :gutter="20" width="100%">
+    <el-col :span="24" justify="center" align="middle">
+      <el-tag :type="color" effect="plain" style="width: 100%">
+        <div style="display: flex; justify-content: space-around; align-items: center; width: 100%">
+          <el-divider direction="vertical"></el-divider>
+          <div v-if="showStart">
+            {{ nodeStatus }}
+            <el-divider direction="vertical"></el-divider>
+          </div>
+
+          <div v-if="showModel">
+            {{ nodeModel }}
+            <el-divider direction="vertical"></el-divider>
+          </div>
+
+          <div v-if="showVal">
+            {{ nodeValue }}
+            <el-divider direction="vertical"></el-divider>
+          </div>
+        </div>
+      </el-tag>
+    </el-col>
+  </el-row>
+
+  <el-row :gutter="20" v-if="showText">
+    <el-col :span="24" justify="center" align="middle"
+      ><el-tag type="primary">{{ modeName }}</el-tag></el-col
+    >
+  </el-row>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, computed, onUnmounted, watch } from 'vue';
+import { useNodeByModelsStore } from '@/components/mt-edit/store/nodeByModels';
+import emitter from '@/utils/emitter';
+// F:\vue\workspace\maotu-webtopo\src\utils\config.ts
+import { Rec, getIndex, getNodeStatus, getNodeColor } from '@/utils/config';
+
+const nodeByModelsStore = useNodeByModelsStore();
+
+onMounted(() => {
+  loadingModuleById();
+  saveodeByModels();
+});
+
+onUnmounted(() => {
+  console.log('组件卸载');
+  deleteByModels();
+  emitter.off(props.definitionItemJson.id);
+});
+
+const props = defineProps({
+  moduleType: {
+    type: String,
+    default: '--'
+  },
+  moduleId: {
+    type: String,
+    default: '--'
+  },
+  definitionItemJson: {
+    type: Object,
+    default: () => ({})
+  },
+  showStart: {
+    type: Boolean,
+    default: false
+  },
+  showModel: {
+    type: Boolean,
+    default: true
+  },
+  showVal: {
+    type: Boolean,
+    default: false
+  },
+  showText: {
+    type: Boolean,
+    default: false
+  }
+});
+
+console.log('itemjson:', props.definitionItemJson.id);
+
+function saveodeByModels() {
+  if (props.moduleId == '' || props.moduleId == undefined || props.moduleId == '--') return;
+  nodeByModelsStore.saveOrUpdate(props.moduleId, props.definitionItemJson.id);
+}
+
+function deleteByModels() {
+  if (props.moduleId == '' || props.moduleId == undefined || props.moduleId == '--') return;
+  nodeByModelsStore.delete(props.moduleId, props.definitionItemJson.id);
+}
+
+watch(
+  () => props.moduleId,
+  (newVal, oldVal) => {
+    loadingModuleById();
+    nodeByModelsStore.change(newVal, oldVal, props.definitionItemJson.id);
+  }
+);
+
+emitter.on(props.definitionItemJson.id, (value) => {
+  console.log('触发事件', value);
+  loadingModuleById();
+});
+
+let moduleUnit = ref<string>();
+let modeName = ref<string>();
+let percentage = ref<number>();
+let color = ref<string>('info');
+let nodeStatus = ref<string>('未知状态');
+let nodeModel = ref<string>('无模式');
+let nodeValue = ref<string>('--');
+
+function getModuleById(moduleId: string) {
+  const globalData = (window as any).globalData;
+  if (!globalData || moduleId == undefined || moduleId == '' || props.moduleId == '--') {
+    console.warn('globalData 未初始化');
+    return null;
+  }
+  return globalData.get(moduleId);
+}
+
+function loadingModuleById() {
+  // 使用类型断言来访问 globalData
+  let module = getModuleById(props.moduleId);
+  if (props.moduleId !== '' && props.moduleId !== undefined && props.moduleId !== '--' && module) {
+    if (module) {
+      console.log('dddd');
+      modeName.value = module.node.name;
+      percentage.value = module.double;
+      moduleUnit.value = module.node.unit;
+      color.value = getNodeColor(module.sig);
+      nodeStatus.value = getNodeStatus(module.sig);
+      nodeModel.value = computedNodeModel();
+      nodeValue.value = computedVal.value;
+    }
+  }
+}
+
+function computedNodeModel(): string {
+  if (props.moduleId == '' || props.moduleId == undefined || props.moduleId == '--') return '--';
+  let runTimeNode = getModuleById(props.moduleId);
+  if (!runTimeNode) return '--';
+  // 如果后端类型是 缺省  数值 返回数值
+  if (runTimeNode.node.etype == 0 || runTimeNode.node.etype == 2) {
+    return '无模式';
+  }
+  console.log('runTimeNode.node.etype', runTimeNode.node.etype);
+  console.log('runTimeNode.valInt', runTimeNode.valInt);
+  console.log('getIndex(runTimeNode.bType)', getIndex(runTimeNode.bType));
+  let val = Rec.EnumTypeValFun![runTimeNode.node.etype](
+    runTimeNode.valInt,
+    getIndex(runTimeNode.bType)
+  );
+
+  return val;
+}
+
+// 计算模式
+let computedModel = computed({
+  // 读取
+  get() {
+    if (props.moduleId == '' || props.moduleId == undefined || props.moduleId == '--') return '--';
+    let runTimeNode = getModuleById(props.moduleId);
+    if (!runTimeNode) return '--';
+    // 如果后端类型是 缺省  数值 返回数值
+    if (runTimeNode.node.etype == 0 || runTimeNode.node.etype == 2) {
+      return '无模式';
+    }
+    console.log('runTimeNode.node.etype', runTimeNode.node.etype);
+    console.log('runTimeNode.valInt', runTimeNode.valInt);
+    console.log('getIndex(runTimeNode.bType)', getIndex(runTimeNode.bType));
+    let val = Rec.EnumTypeValFun![runTimeNode.node.etype](
+      runTimeNode.valInt,
+      getIndex(runTimeNode.bType)
+    );
+
+    return val;
+  },
+  // 修改
+  set() {}
+});
+
+// 计算状态
+let computedStatus = computed({
+  // 读取
+  get() {
+    if (props.moduleId == '' || props.moduleId == undefined || props.moduleId == '--')
+      return '未知状态';
+    let runTimeNode = getModuleById(props.moduleId);
+    if (!runTimeNode) return '未知状态';
+    let val = getNodeStatus(runTimeNode.sig);
+    return val;
+  },
+  // 修改
+  set() {}
+});
+
+// 计算值
+let computedVal = computed({
+  // 读取
+  get() {
+    if (percentage.value == undefined && moduleUnit.value == undefined) return '--';
+    // 保留两位小数，如果是整数则不显示小数位
+    const formattedValue =
+      percentage.value != null && !Number.isInteger(percentage.value)
+        ? percentage.value.toFixed(2)
+        : (percentage.value?.toString() ?? '--');
+    return formattedValue + '' + moduleUnit.value;
+  },
+  // 修改
+  set() {}
+});
+
+function test() {
+  console.log(getModuleById(props.moduleId));
+}
+
+const customFormat = () => {
+  // 返回您自定义的单位和数值
+  if (percentage.value == undefined && moduleUnit.value == undefined) return '--';
+  return percentage.value + '' + moduleUnit.value;
+};
+</script>
+
+<style scoped>
+/* 设置固定宽度和文本省略 */
+.ellipsis-tag {
+  width: 65px; /* 设置固定宽度 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  align-items: center; /* 水平居中 */
+}
+
+.flex-center {
+  display: flex;
+  flex-direction: column; /* 垂直排列 */
+  justify-content: center; /* 垂直居中 */
+  align-items: center; /* 水平居中 */
+}
+
+.el-statistic {
+  /* 控制文字大小 */
+  --el-statistic-content-font-size: 16px;
+}
+
+.elColInfo {
+  text-align: center;
+}
+
+:deep(.el-progress__text) {
+  /* 控制文字大小 */
+  font-size: 16px !important;
+}
+
+.demo-progress .el-progress--line {
+  margin-bottom: 15px;
+  max-width: 500px;
+}
+.demo-progress .el-progress--circle {
+  margin-right: 15px;
+}
+.fontStyle {
+  color: rgb(51, 126, 204);
+}
+h3 {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  /* padding-top: 5px;
+  padding-bottom: 5px; */
+}
+.demo-radius .radius {
+  height: 28px;
+  min-width: 66px;
+  width: fit-content;
+  border: 2px solid rgba(51, 125, 204, 0.205);
+  border-radius: 0;
+  padding: 0 8px;
+  box-sizing: border-box;
+}
+</style>

src/components/vue-components/vue-table-fire-hydrant-info.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="table-container">
+    <!-- 2号主变 -->
+    <el-card class="card" shadow="hover" :body-style="{ padding: '10px' }">
+      <h2 class="cardHead">消火栓信息</h2>
+      <div class="table-wrapper" v-loading="arr.length === 0">
+        <el-table
+          :data="arr"
+          style="width: 100%"
+          class="full-height-table"
+          @cell-click="handleCellClick"
+        >
+          <el-table-column prop="equipmentName" label="设备名称" />
+          <el-table-column prop="equipmentModel" label="规格型号" />
+          <el-table-column prop="equipmentPlace" label="设备位置" />
+          <el-table-column prop="manufacturers" label="厂家" />
+        </el-table>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted } from 'vue';
+import emitter from '@/utils/emitter';
+
+// 导入全局类型定义
+/// <reference path="../../../global.d.ts" />
+
+function handleCellClick(obj: any) {
+  console.log('点击：', obj);
+  emitter.emit('binding-obj-facility-move', obj.id);
+}
+
+emitter.on('binding-data-update', () => {
+  console.log('@@binding-data-update');
+  dataInit();
+});
+
+const props = defineProps({
+  fontFamily: {
+    type: String,
+    default: '黑体'
+  },
+  fontSize: {
+    type: Number,
+    default: 12
+  },
+  testColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  definitionItemJson: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+console.log('父传子itemjson:', props.definitionItemJson);
+
+// 计算属性——既读取又修改
+let computedSize = computed({
+  // 读取
+  get() {
+    return props.fontSize + 'px';
+  }, // 修改
+  set(val) {}
+});
+
+//数据初始化
+async function dataInit() {}
+
+// 在 onMounted 中
+onMounted(async () => {
+  await dataInit();
+});
+
+onUnmounted(() => {
+  emitter.off('binding-data-update');
+});
+
+//node
+interface EquipmentNode {
+  equipmentName: string; //设备名称
+  equipmentModel: string; //规格型号
+  equipmentPlace: string; //设备位置
+  manufacturers: string; //厂家
+}
+
+// 数据源头
+// equipmentState  0正常 1故障
+// currentState  0未动作 1报警 2动作 3分位  4关闭  5开启  6运行  7正常
+// operation  true屏蔽  false取消屏蔽   null
+const arr: EquipmentNode[] = [
+  {
+    equipmentName: '生产综合楼一楼消火栓1',
+    equipmentModel: 'SN-65',
+    equipmentPlace: '生产综合楼一楼东走廊',
+    manufacturers: '宏达'
+  },
+  {
+    equipmentName: '生产综合楼一楼消火栓2',
+    equipmentModel: 'SN-65',
+    equipmentPlace: '生产综合楼一楼西走廊',
+    manufacturers: '宏达'
+  },
+  {
+    equipmentName: '生产综合楼二楼消火栓1',
+    equipmentModel: 'SN-65',
+    equipmentPlace: '生产综合楼二楼东走廊',
+    manufacturers: '宏达'
+  },
+  {
+    equipmentName: '生产综合楼二楼消火栓2',
+    equipmentModel: 'SN-65',
+    equipmentPlace: '生产综合楼二楼西走廊',
+    manufacturers: '宏达'
+  },
+  {
+    equipmentName: '生产综合楼一楼消火栓1',
+    equipmentModel: 'SN-65',
+    equipmentPlace: '生产综合楼一楼东走廊',
+    manufacturers: '宏达'
+  },
+  {
+    equipmentName: '生产综合楼一楼消火栓2',
+    equipmentModel: 'SN-65',
+    equipmentPlace: '生产综合楼一楼西走廊',
+    manufacturers: '宏达'
+  },
+  {
+    equipmentName: '生产综合楼二楼消火栓1',
+    equipmentModel: 'SN-65',
+    equipmentPlace: '生产综合楼二楼东走廊',
+    manufacturers: '宏达'
+  },
+  {
+    equipmentName: '生产综合楼二楼消火栓2',
+    equipmentModel: 'SN-65',
+    equipmentPlace: '生产综合楼二楼西走廊',
+    manufacturers: '宏达'
+  }
+];
+</script>
+
+<style scoped>
+.table-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card :deep(.el-card__body) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 10px;
+}
+
+.table-wrapper {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.full-height-table {
+  flex: 1;
+  height: 100%;
+}
+
+.full-height-table :deep(.el-table__body-wrapper) {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.cardHead {
+  margin: 0 0 15px 0;
+  padding: 0;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  color: #ffffff;
+  flex-shrink: 0;
+}
+
+.operation-btn {
+  width: 60px;
+  min-width: 50px;
+  padding: 8px 12px;
+  height: 30px;
+}
+
+/* 控制表头文字大小 */
+.full-height-table :deep(.el-table__header th) {
+  font-size: 13px;
+  font-weight: bold;
+}
+
+/* 控制表格内容文字大小 */
+.full-height-table :deep(.el-table__body td) {
+  font-size: v-bind('computedSize');
+  color: v-bind('props.testColor');
+}
+
+/* 控制标签文字大小 */
+.full-height-table :deep(.el-tag) {
+  font-size: v-bind('computedSize'); /* 标签内的文字可以稍小一些 */
+}
+
+/* 控制按钮文字大小 */
+.full-height-table :deep(.el-button) {
+  font-size: v-bind('computedSize');
+  color: v-bind('props.testColor');
+}
+</style>

src/components/vue-components/vue-table-fire-hydrant.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="table-container">
+    <!-- 2号主变 -->
+    <el-card class="card" shadow="hover" :body-style="{ padding: '10px' }">
+      <h2 class="cardHead">运行信息</h2>
+      <div class="table-wrapper" v-loading="arr.length === 0">
+        <el-table
+          :data="arr"
+          style="width: 100%"
+          class="full-height-table"
+          @cell-click="handleCellClick"
+        >
+          <el-table-column prop="equipmentName" label="设备名称" />
+
+          <el-table-column label="设备状态">
+            <template #default="{ row }">
+              <el-tag :type="row.equipmentState === 0 ? 'success' : 'warning'">
+                {{ row.equipmentState === 0 ? '正常' : '故障' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="当前状态">
+            <template #default="{ row }">
+              <el-tag type="primary">{{ row.currentState }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作">
+            <template #default="{ row }">
+              <el-tag v-if="row.operation == null || row.operation === ''" type="info"
+                >无操作</el-tag
+              >
+              <template v-else>
+                <el-button type="primary" size="small">开启</el-button>
+                <el-button type="primary" size="small">关闭</el-button>
+              </template>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted } from 'vue';
+import emitter from '@/utils/emitter';
+
+// 导入全局类型定义
+/// <reference path="../../../global.d.ts" />
+
+function handleCellClick(obj: any) {
+  console.log('点击：', obj);
+  emitter.emit('binding-obj-facility-move', obj.id);
+}
+
+emitter.on('binding-data-update', () => {
+  console.log('@@binding-data-update');
+  dataInit();
+});
+
+const props = defineProps({
+  fontFamily: {
+    type: String,
+    default: '黑体'
+  },
+  fontSize: {
+    type: Number,
+    default: 12
+  },
+  testColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  definitionItemJson: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+console.log('父传子itemjson:', props.definitionItemJson);
+
+// 计算属性——既读取又修改
+let computedSize = computed({
+  // 读取
+  get() {
+    return props.fontSize + 'px';
+  }, // 修改
+  set(val) {}
+});
+
+//数据初始化
+async function dataInit() {}
+
+// 在 onMounted 中
+onMounted(async () => {
+  await dataInit();
+});
+
+onUnmounted(() => {
+  emitter.off('binding-data-update');
+});
+
+//node
+interface EquipmentNode {
+  equipmentName: string; //设备名称
+  equipmentState: number; //设备状态 0正常 1故障
+  currentState: string; //当前状态
+  operation: boolean | null; //操作   true屏蔽  false取消屏蔽   null
+}
+
+// 数据源头
+// equipmentState  0正常 1故障
+// currentState  0未动作 1报警 2动作 3分位  4关闭  5开启  6运行  7正常
+// operation  true屏蔽  false取消屏蔽   null
+const arr: EquipmentNode[] = [
+  {
+    equipmentName: '消防泵控制装置',
+    equipmentState: 0,
+    currentState: '运行',
+    operation: null
+  },
+  {
+    equipmentName: '消防泵主供电源供电',
+    equipmentState: 0,
+    currentState: '关',
+    operation: true
+  },
+  {
+    equipmentName: '消防泵备用电源供电',
+    equipmentState: 0,
+    currentState: '开',
+    operation: true
+  },
+  {
+    equipmentName: '控制装置主供电源供电',
+    equipmentState: 0,
+    currentState: '开',
+    operation: true
+  },
+  {
+    equipmentName: '控制装置备用电源供电',
+    equipmentState: 0,
+    currentState: '关',
+    operation: true
+  },
+  {
+    equipmentName: '深井泵',
+    equipmentState: 0,
+    currentState: '关',
+    operation: true
+  },
+  {
+    equipmentName: '高压侧断路器',
+    equipmentState: 0,
+    currentState: '关',
+    operation: true
+  },
+  {
+    equipmentName: '1号消防泵',
+    equipmentState: 0,
+    currentState: '关',
+    operation: true
+  },
+  {
+    equipmentName: '2号消防泵',
+    equipmentState: 0,
+    currentState: '关',
+    operation: true
+  },
+  {
+    equipmentName: '消防水池水位',
+    equipmentState: 0,
+    currentState: '80%',
+    operation: null
+  },
+  {
+    equipmentName: '管网压力',
+    equipmentState: 0,
+    currentState: '0.4Mpa',
+    operation: null
+  }
+];
+</script>
+
+<style scoped>
+.table-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card :deep(.el-card__body) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 10px;
+}
+
+.table-wrapper {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.full-height-table {
+  flex: 1;
+  height: 100%;
+}
+
+.full-height-table :deep(.el-table__body-wrapper) {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.cardHead {
+  margin: 0 0 15px 0;
+  padding: 0;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  color: #ffffff;
+  flex-shrink: 0;
+}
+
+.operation-btn {
+  width: 60px;
+  min-width: 50px;
+  padding: 8px 12px;
+  height: 30px;
+}
+
+/* 控制表头文字大小 */
+.full-height-table :deep(.el-table__header th) {
+  font-size: 13px;
+  font-weight: bold;
+}
+
+/* 控制表格内容文字大小 */
+.full-height-table :deep(.el-table__body td) {
+  font-size: v-bind('computedSize');
+  color: v-bind('props.testColor');
+}
+
+/* 控制标签文字大小 */
+.full-height-table :deep(.el-tag) {
+  font-size: v-bind('computedSize'); /* 标签内的文字可以稍小一些 */
+}
+
+/* 控制按钮文字大小 */
+.full-height-table :deep(.el-button) {
+  font-size: v-bind('computedSize');
+  color: v-bind('props.testColor');
+}
+</style>

src/components/vue-components/vue-table-nitrogen.vue

@@ -0,0 +1,378 @@
+<template>
+  <div class="table-container">
+    <!-- 2号主变 -->
+    <el-card class="card" shadow="hover" :body-style="{ padding: '10px' }">
+      <h2 class="cardHead">运行信息</h2>
+      <div class="table-wrapper" v-loading="arr.length === 0">
+        <el-table
+          :data="arr"
+          style="width: 100%"
+          class="full-height-table"
+          @cell-click="handleCellClick"
+        >
+          <el-table-column prop="equipmentName" label="设备名称" />
+
+          <el-table-column label="设备状态">
+            <template #default="{ row }">
+              <el-tag :type="row.equipmentState === 0 ? 'success' : 'warning'">
+                {{ row.equipmentState === 0 ? '正常' : '故障' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="当前状态">
+            <template #default="{ row }">
+              <el-tag v-if="row.currentState === 0" type="info">未动作</el-tag>
+              <el-tag v-else-if="row.currentState === 1" type="danger">报警</el-tag>
+              <el-tag v-else-if="row.currentState === 2" type="success">动作</el-tag>
+              <el-tag v-else-if="row.currentState === 3" type="danger">分位</el-tag>
+              <el-tag v-else-if="row.currentState === 4" type="danger">关闭</el-tag>
+              <el-tag v-else-if="row.currentState === 5" type="primary">开启</el-tag>
+              <el-tag v-else-if="row.currentState === 6" type="primary">运行</el-tag>
+              <el-tag v-else-if="row.currentState === 7" type="primary">正常</el-tag>
+              <el-tag v-else type="info">未知状态</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作">
+            <template #default="{ row }">
+              <el-tag v-if="row.operation == null" type="info">无操作</el-tag>
+              <el-button type="primary" class="operation-btn" v-else-if="row.operation">
+                屏蔽
+              </el-button>
+              <el-button type="primary" class="operation-btn" v-else-if="!row.operation">
+                取消屏蔽
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { TableColumnCtx } from 'element-plus';
+import { ElMessage } from 'element-plus';
+import { computed, onMounted, onUnmounted, ref, watch, reactive } from 'vue';
+import { modelApi } from '@/utils/request';
+import emitter from '@/utils/emitter';
+
+const loading = ref(false);
+
+// 导入全局类型定义
+/// <reference path="../../../global.d.ts" />
+interface RecRuntimeData {
+  double: number;
+  node: {
+    name: string;
+  };
+}
+interface RecServiceType {
+  service: {
+    node: {
+      runtimes: Record<string, RecRuntimeData>;
+    };
+  };
+}
+interface ExtendedParentWindow extends Window {
+  Rec?: RecServiceType;
+}
+interface User {
+  id: string;
+  name: string;
+  amount1: string;
+  amount2: string;
+  amount3: number;
+}
+interface Equipment {
+  id: string; //设备ID
+  address?: string; //设备地址
+  name: string; //设备名称
+  eState: number; //设备状态  0正常  1故障
+  currentState: number; //当前状态 0运行  1停止  2报警
+  operation: boolean; //操作  true屏蔽  false取消屏蔽
+}
+interface FloorObj {
+  floorName: string; //地址
+  equipments: Equipment[];
+}
+// node楼层节点
+interface FloorNode {
+  roomId: string;
+  floorName: string;
+  eqpList: EquipmentNode[];
+}
+//node
+// interface EquipmentNode {
+//   id: string; //设备ID
+//   name: string; //设备名称
+//   isBinding: boolean; //是否绑定
+//   eState: number; //设备状态  0正常  1故障
+//   currentState: number; //当前状态 0运行  1停止  2报警
+//   operation: boolean; //操作  true屏蔽  false取消屏蔽
+// }
+
+function handleCellClick(obj: any) {
+  console.log('点击：', obj);
+  emitter.emit('binding-obj-facility-move', obj.id);
+}
+
+emitter.on('binding-data-update', () => {
+  console.log('@@binding-data-update');
+  dataInit();
+});
+
+const props = defineProps({
+  fontFamily: {
+    type: String,
+    default: '黑体'
+  },
+  fontSize: {
+    type: Number,
+    default: 12
+  },
+  testColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  definitionItemJson: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+console.log('父传子itemjson:', props.definitionItemJson);
+
+// 计算属性——既读取又修改
+let computedSize = computed({
+  // 读取
+  get() {
+    return props.fontSize + 'px';
+  }, // 修改
+  set(val) {}
+});
+
+// const arr = ref<any[]>([]);
+let targetDataTable: FloorNode[] = [];
+
+let initArrs: any = {};
+//数据初始化
+async function dataInit() {}
+
+// 将嵌套数据展开为表格数据
+const tableDatas = computed(() => {
+  return targetDataTable.flatMap((floor) =>
+    floor.eqpList.map((equipment) => ({
+      ...equipment,
+      floorName: floor.floorName, // 添加楼层信息到每行
+      roomId: floor.roomId // 添加设备地址到每行
+    }))
+  );
+});
+
+// 在 onMounted 中
+onMounted(async () => {
+  await dataInit();
+});
+
+onUnmounted(() => {
+  emitter.off('binding-data-update');
+});
+
+//node
+interface EquipmentNode {
+  equipmentName: string; //设备名称
+  equipmentState: number; //设备状态 0正常 1故障
+  currentState: number; //当前状态 0未动作 1报警 2动作 3分位  4关闭  5开启  6运行  7正常
+  operation: boolean | null; //操作   true屏蔽  false取消屏蔽   null
+}
+
+// 数据源头
+// equipmentState  0正常 1故障
+// currentState  0未动作 1报警 2动作 3分位  4关闭  5开启  6运行  7正常
+// operation  true屏蔽  false取消屏蔽   null
+const arr: EquipmentNode[] = [
+  {
+    equipmentName: '火灾探测器1',
+    equipmentState: 0,
+    currentState: 1,
+    operation: true
+  },
+  {
+    equipmentName: '火灾探测器2',
+    equipmentState: 0,
+    currentState: 1,
+    operation: true
+  },
+  {
+    equipmentName: '火灾探测器3',
+    equipmentState: 1,
+    currentState: 0,
+    operation: false
+  },
+  {
+    equipmentName: '火灾探测器4',
+    equipmentState: 0,
+    currentState: 0,
+    operation: true
+  },
+  {
+    equipmentName: '重瓦斯保护',
+    equipmentState: 0,
+    currentState: 2,
+    operation: null
+  },
+  {
+    equipmentName: '压力缩放',
+    equipmentState: 0,
+    currentState: 2,
+    operation: null
+  },
+  {
+    equipmentName: '高压侧断路器',
+    equipmentState: 0,
+    currentState: 3,
+    operation: null
+  },
+  {
+    equipmentName: '中压侧断路器',
+    equipmentState: 0,
+    currentState: 3,
+    operation: null
+  },
+  {
+    equipmentName: '低压侧断路器',
+    equipmentState: 0,
+    currentState: 3,
+    operation: null
+  },
+  {
+    equipmentName: '断流阀',
+    equipmentState: 0,
+    currentState: 4,
+    operation: null
+  },
+  {
+    equipmentName: '排油阀',
+    equipmentState: 0,
+    currentState: 5,
+    operation: null
+  },
+  {
+    equipmentName: '注氮阀',
+    equipmentState: 0,
+    currentState: 5,
+    operation: null
+  },
+  {
+    equipmentName: '氮气瓶压力',
+    equipmentState: 0,
+    currentState: 7,
+    operation: null
+  },
+  {
+    equipmentName: '装置电源',
+    equipmentState: 0,
+    currentState: 6,
+    operation: null
+  }
+];
+
+interface SpanMethodProps {
+  row: any;
+  column: TableColumnCtx<User>;
+  rowIndex: number;
+  columnIndex: number;
+}
+// 将嵌套数据展开为表格数据
+const tableData = computed(() => {
+  return floorData.flatMap((floor) =>
+    floor.equipments.map((equipment) => ({
+      ...equipment,
+      floorName: floor.floorName, // 添加楼层信息到每行
+      // 如果有设备地址就显示，没有就显示楼层作为地址
+      address: equipment.address || floor.floorName
+    }))
+  );
+});
+</script>
+
+<style scoped>
+.table-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card :deep(.el-card__body) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 10px;
+}
+
+.table-wrapper {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.full-height-table {
+  flex: 1;
+  height: 100%;
+}
+
+.full-height-table :deep(.el-table__body-wrapper) {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.cardHead {
+  margin: 0 0 15px 0;
+  padding: 0;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  color: #ffffff;
+  flex-shrink: 0;
+}
+
+.operation-btn {
+  width: 60px;
+  min-width: 50px;
+  padding: 8px 12px;
+  height: 30px;
+}
+
+/* 控制表头文字大小 */
+.full-height-table :deep(.el-table__header th) {
+  font-size: 13px;
+  font-weight: bold;
+}
+
+/* 控制表格内容文字大小 */
+.full-height-table :deep(.el-table__body td) {
+  font-size: v-bind('computedSize');
+  color: v-bind('props.testColor');
+}
+
+/* 控制标签文字大小 */
+.full-height-table :deep(.el-tag) {
+  font-size: v-bind('computedSize'); /* 标签内的文字可以稍小一些 */
+}
+
+/* 控制按钮文字大小 */
+.full-height-table :deep(.el-button) {
+  font-size: v-bind('computedSize');
+  color: v-bind('props.testColor');
+}
+</style>

src/components/vue-components/vue-test-controller.vue

@@ -0,0 +1,32 @@
+<template>
+  <!-- 四遥：遥测 -->
+  <el-form :model="form" label-width="auto" style="max-width: 600px">
+    <el-form-item label="节点ID">
+      <el-input v-model="form.nodeId" />
+    </el-form-item>
+
+    <el-form-item label="值">
+      <el-input v-model="form.nodeValue" />
+    </el-form-item>
+
+    <el-form-item>
+      <el-button type="primary" @click="onSubmit">Send</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue';
+
+// do not use same name with ref
+const form = reactive({
+  nodeId: '',
+  nodeValue: ''
+});
+
+const onSubmit = () => {
+  console.log('submit!');
+};
+</script>
+
+<style scoped></style>

src/components/vue-xq-test/vue-assemble-table.vue

@@ -1,58 +1,64 @@
 <template>
-  <el-row :gutter="20" style="display: flex; align-items: center">
-    <el-col :span="24" class="centered-col">
-      <el-text class="mx-1" size="large" style="font-size: 16px; margin-bottom: 15px"
-        >配置说明</el-text
-      >
-    </el-col>
-  </el-row>
+  <el-card
+    style="max-width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden"
+  >
+    <el-row :gutter="20" style="flex-shrink: 0">
+      <el-col :span="24" class="centered-col">
+        <el-text class="mx-1" size="large" style="font-size: 16px; margin-bottom: 15px"
+          >配置说明</el-text
+        >
+      </el-col>
+    </el-row>
 
-  <el-row :gutter="20">
-    <el-col :span="24" class="centered-col">
-      <el-table
-        :data="tableData"
-        :header-cell-style="{ color: '#3b3b3b ' }"
-        :style="{ height: '200px' }"
-      >
-        <!-- 序号 -->
-        <el-table-column
-          type="index"
-          label="序号"
-          :resizable="false"
-          min-width="60"
-          align="center"
-        />
+    <el-row :gutter="20" style="flex: 1; overflow: hidden">
+      <el-col :span="24" style="height: 100%">
+        <el-scrollbar>
+          <el-table
+            :data="tableData"
+            :header-cell-style="{ color: '#3b3b3b ' }"
+            :scrollbar-always-on="true"
+          >
+            <!-- 序号 -->
+            <el-table-column
+              type="index"
+              label="序号"
+              :resizable="false"
+              min-width="60"
+              align="center"
+            />
 
-        <!-- 站端名称 -->
-        <el-table-column
-          prop="pilotLamp"
-          label="指示灯"
-          :resizable="false"
-          width="120"
-          align="center"
-        />
+            <!-- 站端名称 -->
+            <el-table-column
+              prop="pilotLamp"
+              label="指示灯"
+              :resizable="false"
+              width="120"
+              align="center"
+            />
 
-        <el-table-column label="正常时状态" :resizable="false" align="center" min-width="180">
-          <template #default="scope">
-            <el-tag v-if="!scope.row.order" type="info" :style="{ fontSize: computedSize }"
-              >不亮</el-tag
-            >
-            <el-tag v-else type="primary" :style="{ fontSize: computedSize }">亮</el-tag>
-          </template>
-        </el-table-column>
+            <el-table-column label="正常时状态" :resizable="false" align="center" min-width="180">
+              <template #default="scope">
+                <el-tag v-if="!scope.row.order" type="info" :style="{ fontSize: computedSize }"
+                  >不亮</el-tag
+                >
+                <el-tag v-else type="primary" :style="{ fontSize: computedSize }">亮</el-tag>
+              </template>
+            </el-table-column>
 
-        <!-- 事件内容 -->
-        <el-table-column
-          prop="explain"
-          label="说明"
-          :resizable="false"
-          min-width="280"
-          show-overflow-tooltip
-          align="left"
-        />
-      </el-table>
-    </el-col>
-  </el-row>
+            <!-- 事件内容 -->
+            <el-table-column
+              prop="explain"
+              label="说明"
+              :resizable="false"
+              min-width="280"
+              show-overflow-tooltip
+              align="left"
+            />
+          </el-table>
+        </el-scrollbar>
+      </el-col>
+    </el-row>
+  </el-card>
 </template>
 <script lang="ts" setup>
 import { ref, reactive, watch, onMounted, computed } from 'vue';
@@ -167,4 +173,12 @@ let computedSize = computed({
   justify-content: center; /* 水平居中 */
   align-items: center; /* 垂直居中 */
 }
+
+/* 确保滚动条只在 el-scrollbar 中显示 */
+:deep(.el-card__body) {
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
 </style>

src/components/vue-xq-test/vue-essential-information.vue

@@ -3,89 +3,91 @@
     <h2 class="cardHead">基本信息</h2>
 
     <div class="cardBody">
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 名称 </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">火灾报警系统主机</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 产品型号： </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">JB-QB-GST200</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 厂家： </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">海湾公司</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 投运日期： </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">2015-10-10</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 电源电压： </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">220V AC</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 频率： </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">50Hz</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 输出电压： </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">24V DC</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 输出电流： </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">5A</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 环境温度： </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">-5℃ ~ 45℃</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 相对湿度： </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">5% ~ 95%</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 维保单位： </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">陕西消防科技有限公司</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 联系电话： </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">188*****00 </el-tag>
-        </el-col>
-      </el-row>
+      <el-scrollbar>
+        <el-row :gutter="0" style="display: flex; align-items: center">
+          <el-col :span="8" :offset="4"> 名称 </el-col>
+          <el-col :span="4">
+            <el-tag type="primary">火灾报警系统主机</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center">
+          <el-col :span="8" :offset="4"> 产品型号： </el-col>
+          <el-col :span="4">
+            <el-tag type="primary">JB-QB-GST200</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center">
+          <el-col :span="8" :offset="4"> 厂家： </el-col>
+          <el-col :span="4">
+            <el-tag type="primary">海湾公司</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center">
+          <el-col :span="8" :offset="4"> 投运日期： </el-col>
+          <el-col :span="4">
+            <el-tag type="primary">2015-10-10</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center">
+          <el-col :span="8" :offset="4"> 电源电压： </el-col>
+          <el-col :span="4">
+            <el-tag type="primary">220V AC</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center">
+          <el-col :span="8" :offset="4"> 频率： </el-col>
+          <el-col :span="4">
+            <el-tag type="primary">50Hz</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center">
+          <el-col :span="8" :offset="4"> 输出电压： </el-col>
+          <el-col :span="4">
+            <el-tag type="primary">24V DC</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center">
+          <el-col :span="8" :offset="4"> 输出电流： </el-col>
+          <el-col :span="4">
+            <el-tag type="primary">5A</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center">
+          <el-col :span="8" :offset="4"> 环境温度： </el-col>
+          <el-col :span="4">
+            <el-tag type="primary">-5℃ ~ 45℃</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center">
+          <el-col :span="8" :offset="4"> 相对湿度： </el-col>
+          <el-col :span="4">
+            <el-tag type="primary">5% ~ 95%</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center">
+          <el-col :span="8" :offset="4"> 维保单位： </el-col>
+          <el-col :span="4">
+            <el-tag type="primary">陕西消防科技有限公司</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center">
+          <el-col :span="8" :offset="4"> 联系电话： </el-col>
+          <el-col :span="4">
+            <el-tag type="primary">188*****00 </el-tag>
+          </el-col>
+        </el-row>
+      </el-scrollbar>
     </div>
   </el-card>
 
@@ -304,8 +306,9 @@ P:hover {
 }
 .cardBody {
   width: 100%;
-  margin: 0 0%;
-  padding: 0px 0%;
-  /* padding-bottom: 15px; */
+  margin: 0;
+  padding: 0;
+  height: calc(100% - 40px); /* 减去标题高度 */
+  overflow: hidden;
 }
 </style>

src/components/vue-xq-test/vue-nitrogen-injection.vue

@@ -0,0 +1,143 @@
+<template>
+  <el-card class="card">
+    <h3 class="cardHead">2号主变排油注氮灭火</h3>
+
+    <div class="cardBody">
+      <el-row :gutter="0" style="display: flex; align-items: center" class="row-spacing">
+        <el-col :span="12" class="full-width-col">
+          <el-tag type="danger" size="large" class="full-width-tag">火灾探测器1</el-tag>
+        </el-col>
+
+        <el-col :span="12" class="full-width-col">
+          <el-tag type="danger" size="large" class="full-width-tag">火灾探测器2</el-tag>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="0" style="display: flex; align-items: center" class="row-spacing">
+        <el-col :span="12" class="full-width-col">
+          <el-tag type="warning" size="large" class="full-width-tag">火灾探测器3</el-tag>
+        </el-col>
+
+        <el-col :span="12" class="full-width-col">
+          <el-tag type="primary" size="large" class="full-width-tag">火灾探测器4</el-tag>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="0" style="display: flex; align-items: center" class="row-spacing">
+        <el-col :span="12" class="full-width-col">
+          <el-tag type="danger" size="large" class="full-width-tag">注氮阀</el-tag>
+        </el-col>
+
+        <el-col :span="12" class="full-width-col">
+          <el-tag type="danger" size="large" class="full-width-tag">排油阀</el-tag>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="0" style="display: flex; align-items: center" class="row-spacing">
+        <el-col :span="12" class="full-width-col">
+          <el-tag type="danger" size="large" class="full-width-tag">断流阀</el-tag>
+        </el-col>
+
+        <el-col :span="12" class="full-width-col">
+          <el-tag type="primary" size="large" class="full-width-tag">氮气瓶</el-tag>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch, onMounted } from 'vue';
+
+const props = defineProps({
+  fontFamily: {
+    type: String,
+    default: 'Segoe UI'
+  },
+  fontSize: {
+    type: Number,
+    default: 14
+  },
+  testColor: {
+    type: String,
+    default: '#000000'
+  },
+  testBool: {
+    type: Boolean,
+    default: true
+  }
+});
+
+let computedSize = computed({
+  // 读取
+  get() {
+    return props.fontSize + 'px';
+  }, // 修改
+  set(val) {
+    console.log('有人修改了fullName', val);
+  }
+});
+</script>
+
+<style scoped>
+.row-spacing {
+  margin-bottom: 10px; /* 每行之间的间隔 */
+}
+
+.full-width-col {
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+}
+
+.full-width-tag {
+  width: 85%; /* 填满父容器 */
+  text-align: center; /* 文字水平居中 */
+  display: flex; /* 使用 flexbox */
+  justify-content: center; /* 文字水平居中 */
+  align-items: center; /* 文字垂直居中 */
+  font-size: v-bind('computedSize');
+}
+
+/* 闪烁动画 */
+.blinking-tag {
+  animation: blink 1s infinite; /* 1秒一次无限循环 */
+}
+
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1; /* 完全不透明 */
+  }
+  50% {
+    opacity: 0.3; /* 半透明 */
+  }
+}
+
+.card {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  /* max-width: 480px; */
+  color: v-bind('props.testColor');
+  font-family: v-bind('props.fontFamily');
+  /* font-family: 'Segoe UI'; */
+  font-size: v-bind('computedSize' - 1);
+}
+
+.cardHead {
+  margin: 0;
+  padding: 0px;
+  padding-bottom: 20px;
+  text-align: center;
+  color: #ffffff;
+  font-size: v-bind('computedSize' + 2);
+}
+.cardBody {
+  width: 100%;
+  margin: 0 0%;
+  padding: 0px 0%;
+  /* padding-bottom: 15px; */
+}
+</style>

src/components/vue-xq-test/vue-num-info.vue

@@ -1,67 +1,7 @@
 <template>
-  <!-- <div style="display: flex; gap: 10px; align-items: center">
-    <el-popover
-      :width="300"
-      :visible="null"
-      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
-    >
-      <template #reference>
-        <el-text
-          style="font-weight: bold; text-align: center; display: block"
-          type="primary"
-          color="rgb(236, 245, 255)"
-        >
-          {{ computedVal }}
-        </el-text>
-      </template>
-
-      <template #default>
-        <div class="demo-rich-conent" style="display: flex; gap: 2px; flex-direction: column">
-          <div class="demo-progress">
-            <el-progress
-              type="dashboard"
-              :width="100"
-              :percentage="percentage"
-              :color="colors"
-              :format="customFormat"
-            />
-          </div>
-
-          <el-row :gutter="6">
-            <el-col :span="12" :xs="24" :sm="12" :md="6" class="elColInfo">
-              <el-statistic title="绑定ID" :value="null">
-                <template #suffix>
-                  <el-tag size="default" type="primary">{{ moduleId }}</el-tag>
-                </template>
-              </el-statistic>
-            </el-col>
-
-            <el-col :span="12" :xs="24" :sm="12" :md="12" class="elColInfo">
-              <el-statistic title="节点名称" :value="null">
-                <template #suffix>
-                  <el-tag size="default" type="success">{{ modeName }}</el-tag>
-                </template>
-              </el-statistic>
-            </el-col>
-
-            <el-col :span="12" :xs="24" :sm="12" :md="6" class="elColInfo">
-              <el-statistic title="类型" :value="null">
-                <template #suffix>
-                  <el-tag size="default" type="primary">{{ moduleType }}</el-tag>
-                </template>
-              </el-statistic>
-            </el-col>
-          </el-row>
-        </div>
-      </template>
-    </el-popover>
-
-    <el-tag type="primary">{{ modeName }}</el-tag>
-  </div> -->
-
   <el-row v-if="location === 'top'">
     <el-col :span="24" class="flex-center">
-      <el-tag type="primary" size="small" style="opacity: 0.9">
+      <el-tag v-if="showText" type="primary" size="small" style="opacity: 0.9">
         <el-text type="primary" style="max-width: 65px" size="small" truncated>
           {{ modeName }}
         </el-text>
@@ -71,7 +11,7 @@
 
   <el-row justify="center">
     <el-col :span="12" class="flex-center" v-if="location === 'left'">
-      <el-tag type="primary" size="small" style="opacity: 0.9">
+      <el-tag v-if="showText" type="primary" size="small" style="opacity: 0.9">
         <el-text type="primary" style="max-width: 65px" size="small" truncated>
           {{ modeName }}
         </el-text>
@@ -82,7 +22,7 @@
       <div style="display: flex; gap: 10px; align-items: center">
         <el-popover
           :width="300"
-          :disabled="true"
+          :disabled="!showInfo"
           popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
         >
           <template #reference>
@@ -135,7 +75,7 @@
     </el-col>
 
     <el-col :span="12" class="flex-center" v-if="location === 'right'">
-      <el-tag type="primary" size="small" style="opacity: 0.9">
+      <el-tag v-if="showText" type="primary" size="small" style="opacity: 0.9">
         <el-text type="primary" style="max-width: 65px" size="small" truncated>
           {{ modeName }}
         </el-text>
@@ -145,7 +85,7 @@
 
   <el-row v-if="location === 'bottom'">
     <el-col :span="24" class="flex-center">
-      <el-tag type="primary" size="small" style="opacity: 0.9">
+      <el-tag v-if="showText" type="primary" size="small" style="opacity: 0.9">
         <el-text type="primary" style="max-width: 65px; opacity: 1" size="small" truncated>
           {{ modeName }}
         </el-text>
@@ -188,6 +128,14 @@ const props = defineProps({
   location: {
     type: String,
     default: 'bottom'
+  },
+  showInfo: {
+    type: Boolean,
+    default: false
+  },
+  showText: {
+    type: Boolean,
+    default: false
   }
 });
 

src/components/vue-xq-test/vue-run-info.vue

@@ -1,150 +1,155 @@
 <template>
+  <!-- <el-button @click="ccc">Default</el-button> -->
   <el-card class="card">
-    <h2 class="cardHead">运行信息</h2>
-
-    <div class="cardBody" v-if="globalOverviewBool">
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 设备状态： </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">正常/中断</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 温度： </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">23℃</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 湿度： </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">45%RH</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 风力： </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">三级（5m/s）</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 风向： </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">东风</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 雨量： </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">20mm</el-tag>
-        </el-col>
-      </el-row>
-    </div>
-
-    <div class="cardBody" v-if="fireExtinguishingBool">
-      <el-row style="display: flex; align-items: center">
-        <el-col :span="24">火灾报警系统</el-col>
-      </el-row>
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="1"
-          >设备状态
-          <el-tag type="primary">正常/故障</el-tag>
-        </el-col>
-        <el-col :span="8" :offset="2"
-          >通信状态
-          <el-tag type="primary">正常/中断</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="22" :offset="1"
-          >火灾总告警
-          <!-- 带边框的蓝色圆 -->
-          <div class="blue-circle redBordered"></div>
-        </el-col>
-      </el-row>
-
-      <el-divider style="margin-top: 10px; margin-bottom: 10px" />
-
-      <el-row style="display: flex; align-items: center">
-        <el-col :span="24">2号主变灭火系统（排油注氮灭火）</el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="7" :offset="1">
-          启动方式
-          <el-tag type="primary">自动/手动</el-tag>
-        </el-col>
-        <el-col :span="7" :offset="1"
-          >设备状态
-          <el-tag type="primary">正常/故障</el-tag>
-        </el-col>
-        <el-col :span="7" :offset="1"
-          >通信状态
-          <el-tag type="primary">正常/中断</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="7" :offset="1"
-          >火灾总告警
-          <div class="blue-circle redBordered"></div>
-        </el-col>
-        <el-col :span="7" :offset="1">
-          <el-popover placement="top" :width="170" trigger="hover" content="查看灭火允许满足条件">
-            <template #reference>
-              <el-text class="mx-1" type="primary">灭火允许</el-text>
-            </template>
-          </el-popover>
-
-          <!-- 带边框的蓝色圆 -->
-          <div class="blue-circle greenBordered"></div>
-        </el-col>
-        <el-col :span="7" :offset="1" style="display: flex; align-items: center">
-          <el-text class="mx-1" type="primary" @click="dialogTableVisible = true">灭火动作</el-text>
-
-          <!-- 带边框的蓝色圆 -->
-          <div class="blue-circle redBordered"></div>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center; margin-top: 8px">
-        <el-col :span="5" :offset="1">灭火手动操作</el-col>
-        <el-col :span="12">
-          <el-button type="primary" size="small">手动启动</el-button>
-          <el-button type="primary" size="small">紧急停止</el-button>
-        </el-col>
-      </el-row>
-    </div>
-
-    <div class="cardBody" v-if="firePoliceBool">
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 设备状态： </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">正常/故障</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 通信状态： </el-col>
-        <el-col :span="4">
-          <el-tag type="primary">正常/中断</el-tag>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="0" style="display: flex; align-items: center">
-        <el-col :span="8" :offset="4"> 电源状态：</el-col>
-        <el-col :span="4">
-          <!-- 主供电源工作/备供电源工作/电源中断 -->
-          <el-tag type="primary">主供电源工作</el-tag>
-        </el-col>
-      </el-row>
-    </div>
+    <el-scrollbar height="100%">
+      <h2 class="cardHead">运行信息</h2>
+
+      <div class="cardBody" v-if="globalOverviewBool">
+        <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
+          <el-col :span="9" :offset="4"> 设备状态： </el-col>
+          <el-col :span="4">
+            <el-tag type="primary" v-if="isSwitch">正常/中断</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
+          <el-col :span="9" :offset="4"> 温度： </el-col>
+          <el-col :span="4">
+            <el-tag type="primary" v-if="isSwitch">23℃</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
+          <el-col :span="9" :offset="4"> 湿度： </el-col>
+          <el-col :span="4">
+            <el-tag type="primary" v-if="isSwitch">45%RH</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
+          <el-col :span="9" :offset="4"> 风力： </el-col>
+          <el-col :span="4">
+            <el-tag type="primary" v-if="isSwitch">三级（5m/s）</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
+          <el-col :span="9" :offset="4"> 风向： </el-col>
+          <el-col :span="4">
+            <el-tag type="primary" v-if="isSwitch">东风</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
+          <el-col :span="9" :offset="4"> 雨量： </el-col>
+          <el-col :span="4">
+            <el-tag type="primary" v-if="isSwitch">20mm</el-tag>
+          </el-col>
+        </el-row>
+      </div>
+
+      <div class="cardBody" v-if="fireExtinguishingBool">
+        <el-row style="display: flex; align-items: center">
+          <el-col :span="24">火灾报警系统</el-col>
+        </el-row>
+        <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
+          <el-col :span="9" :offset="1"
+            >设备状态
+            <el-tag type="primary" v-if="isSwitch">正常/故障</el-tag>
+          </el-col>
+          <el-col :span="9" :offset="2"
+            >通信状态
+            <el-tag type="primary" v-if="isSwitch">正常/中断</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
+          <el-col :span="22" :offset="1"
+            >火灾总告警
+            <!-- 带边框的蓝色圆 -->
+            <div class="blue-circle redBordered"></div>
+          </el-col>
+        </el-row>
+
+        <el-divider style="margin-top: 10px; margin-bottom: 10px" />
+
+        <el-row style="display: flex; align-items: center">
+          <el-col :span="24">2号主变灭火系统（排油注氮灭火）</el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
+          <el-col :span="7" :offset="1">
+            启动方式
+            <el-tag type="primary" v-if="isSwitch">自动/手动</el-tag>
+          </el-col>
+          <el-col :span="7" :offset="1"
+            >设备状态
+            <el-tag type="primary" v-if="isSwitch">正常/故障</el-tag>
+          </el-col>
+          <el-col :span="7" :offset="1"
+            >通信状态
+            <el-tag type="primary" v-if="isSwitch">正常/中断</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
+          <el-col :span="7" :offset="1"
+            >火灾总告警
+            <div class="blue-circle redBordered"></div>
+          </el-col>
+          <el-col :span="7" :offset="1">
+            <el-popover placement="top" :width="170" trigger="hover" content="查看灭火允许满足条件">
+              <template #reference>
+                <el-text class="mx-1" type="primary">灭火允许</el-text>
+              </template>
+            </el-popover>
+
+            <!-- 带边框的蓝色圆 -->
+            <div class="blue-circle greenBordered"></div>
+          </el-col>
+          <el-col :span="7" :offset="1" style="display: flex; align-items: center">
+            <el-text class="mx-1" type="primary" @click="dialogTableVisible = true"
+              >灭火动作</el-text
+            >
+
+            <!-- 带边框的蓝色圆 -->
+            <div class="blue-circle redBordered"></div>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center; margin-top: 8px">
+          <el-col :span="7" :offset="1">灭火手动操作</el-col>
+          <el-col :span="12">
+            <el-button type="primary" size="small">手动启动</el-button>
+            <el-button type="primary" size="small">紧急停止</el-button>
+          </el-col>
+        </el-row>
+      </div>
+
+      <div class="cardBody" v-if="firePoliceBool">
+        <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
+          <el-col :span="9" :offset="4"> 设备状态： </el-col>
+          <el-col :span="4">
+            <el-tag type="primary" v-if="isSwitch">正常/故障</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
+          <el-col :span="9" :offset="4"> 通信状态： </el-col>
+          <el-col :span="4">
+            <el-tag type="primary" v-if="isSwitch">正常/中断</el-tag>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
+          <el-col :span="9" :offset="4"> 电源状态：</el-col>
+          <el-col :span="4">
+            <!-- 主供电源工作/备供电源工作/电源中断 -->
+            <el-tag type="primary" v-if="isSwitch"> 主供电源工作 </el-tag>
+          </el-col>
+        </el-row>
+      </div>
+    </el-scrollbar>
   </el-card>
 
   <!--     :append-to-body="true" -->
@@ -178,6 +183,7 @@
 </template>
 
 <script lang="ts" setup>
+import { ElButton } from 'element-plus';
 import { computed, ref, watch, onMounted } from 'vue';
 
 let dialogTableVisible = ref(false);
@@ -202,9 +208,26 @@ const props = defineProps({
   dataSource: {
     type: String,
     default: '--'
+  },
+  isSwitch: {
+    type: Boolean,
+    default: true
+  },
+  testStr: {
+    type: String,
+    default: ''
+  },
+  definitionItemJson: {
+    type: Object as any,
+    default: () => ({})
   }
 });
 
+console.log('传递：', props.definitionItemJson);
+
+function ccc() {
+  props.definitionItemJson.props.testStr = 'aaaaaa';
+}
 const activities = [
   {
     content: '灭火允许',
@@ -368,8 +391,9 @@ P:hover {
 }
 .cardBody {
   width: 100%;
+  height: 100%;
   margin: 0 0%;
-  padding: 0px 0%;
+
   /* padding-bottom: 15px; */
 }
 </style>

src/components/vue-xq-test/vue-signal-gaudy.vue

@@ -1,86 +1,5 @@
 <template>
-  <!-- <div style="display: flex; gap: 10px; align-items: center">
-    <el-popover
-      :width="300"
-      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
-    >
-      <template #reference>
-        <el-icon
-          :class="['iconStyle', isAalarm ? 'blink-animation' : '']"
-          :size="22"
-          :style="{ color: isBool ? 'rgb(146, 252, 40)' : 'rgb(252, 40, 40)' }"
-        >
-          <WarningFilled />
-        </el-icon>
-      </template>
-
-      <template #default>
-        <div class="demo-rich-conent" style="display: flex; gap: 20px; flex-direction: column">
-          <el-icon
-            class="iconStyle"
-            :size="60"
-            :style="{ color: isBool ? 'rgb(146, 252, 40)' : 'rgb(252, 40, 40)' }"
-          >
-            <WarningFilled />
-          </el-icon>
-
-          <el-row :gutter="6">
-            <el-col :span="12" :xs="24" :sm="12" :md="6" class="elColInfo">
-              <el-statistic title="绑定ID" :value="null">
-                <template #suffix>
-                  <el-tag size="default" type="primary">{{ moduleId }}</el-tag>
-                </template>
-              </el-statistic>
-            </el-col>
-
-            <el-col :span="12" :xs="24" :sm="12" :md="12" class="elColInfo">
-              <el-statistic title="节点名称" :value="null">
-                <template #suffix>
-                  <el-tag size="default" type="success">{{ modeName }}</el-tag>
-                </template>
-              </el-statistic>
-            </el-col>
-
-            <el-col :span="12" :xs="24" :sm="12" :md="6" class="elColInfo">
-              <el-statistic title="类型" :value="null">
-                <template #suffix>
-                  <el-tag size="default" type="primary">遥信</el-tag>
-                </template>
-              </el-statistic>
-            </el-col>
-          </el-row>
-
-          <el-row :gutter="6">
-            <el-col :span="12" :xs="24" :sm="12" :md="6" class="elColInfo">
-              <el-statistic title="开关情况" :value="null">
-                <template #suffix>
-                  <el-tag size="default" type="primary">{{ isBool }}</el-tag>
-                </template>
-              </el-statistic>
-            </el-col>
-
-            <el-col :span="12" :xs="24" :sm="12" :md="12" class="elColInfo">
-              <el-statistic title="告警" :value="null">
-                <template #suffix>
-                  <el-tag size="default" type="primary">{{ isAalarm }}</el-tag>
-                </template>
-              </el-statistic>
-            </el-col>
-
-            <el-col :span="12" :xs="24" :sm="12" :md="6" class="elColInfo">
-              <el-statistic title="是否可告警" :value="null">
-                <template #suffix>
-                  <el-tag size="default" type="primary">{{ isAlarmable }}</el-tag>
-                </template>
-              </el-statistic>
-            </el-col>
-          </el-row>
-        </div>
-      </template>
-    </el-popover>
-    <el-tag type="primary">{{ modeName }}</el-tag>
-  </div> -->
-
+  <!-- 四遥：遥信 -->
   <!-- <button @click="console.log('data:', nodeByModelsStore.nodeMap)">点击</button> -->
   <el-row v-if="location === 'top'">
     <el-col :span="24" class="flex-center">
@@ -105,7 +24,7 @@
       <div style="display: flex; gap: 10px; align-items: center">
         <el-popover
           :width="300"
-          :disabled="false"
+          :disabled="showInfo"
           popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
         >
           <!-- :style="{ color: isBool ? 'rgb(146, 252, 40)' : 'rgb(252, 40, 40)' }" -->
@@ -225,8 +144,6 @@ onUnmounted(() => {
   emitter.off(props.definitionItemJson.id);
 });
 
-// const props = defineProps(['definitionItemJson']);
-
 const props = defineProps({
   moduleType: {
     type: String,
@@ -240,6 +157,10 @@ const props = defineProps({
     type: Object,
     default: () => ({})
   },
+  showInfo: {
+    type: Boolean,
+    default: false
+  },
   location: {
     type: String,
     default: 'bottom'
@@ -285,24 +206,6 @@ function loadingModuleById() {
   }
 }
 
-// function loadingModuleById() {
-//   const globalData = (window as any).globalData as Map<string, any>;
-//   if (
-//     props.moduleId !== '' &&
-//     props.moduleId !== undefined &&
-//     props.moduleId !== '--' &&
-//     globalData?.has(props.moduleId)
-//   ) {
-//     let module = globalData.get(props.moduleId);
-//     if (module) {
-//       modeName.value = module.node.name;
-//       isBool.value = module.double == 1;
-//       isAalarm.value = module.alarm;
-//       isAlarmable.value = module.alarmable;
-//     }
-//   }
-// }
-
 // 绑定事件
 emitter.on(props.definitionItemJson.id, (value) => {
   console.log('触发事件', value);

src/components/vue-xq-test/vue-synthesize-table.vue

@@ -46,44 +46,6 @@
           </el-table-column>
         </el-table>
       </div>
-
-      <!-- <div class="table-wrapper">
-        <el-table
-          :data="tableData"
-          border
-          :span-method="objectSpanMethod"
-          class="full-height-table"
-          style="width: 100%"
-          @cell-click="handleCellClick"
-        >
-          <el-table-column prop="floorName" label="楼层" />
-          <el-table-column prop="id" label="设备ID" />
-          <el-table-column prop="name" label="设备名称" />
-
-          <el-table-column label="设备状态">
-            <template #default="{ row }">
-              <el-tag :type="row.eState === 0 ? 'success' : 'warning'">
-                {{ row.eState === 0 ? '正常' : '故障' }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="当前状态">
-            <template #default="{ row }">
-              <el-tag v-if="row.currentState === 0" type="success">运行</el-tag>
-              <el-tag v-else-if="row.currentState === 1" type="info">停止</el-tag>
-              <el-tag v-else type="error">报警</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作">
-            <template #default="{ row }">
-              <el-button type="primary" class="operation-btn" v-if="row.operation">
-                屏蔽
-              </el-button>
-              <el-button type="primary" class="operation-btn" v-else> 取消屏蔽 </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div> -->
     </el-card>
   </div>
 </template>
@@ -94,6 +56,7 @@ import { ElMessage } from 'element-plus';
 import { computed, onMounted, onUnmounted, ref, watch, reactive } from 'vue';
 import { modelApi } from '@/utils/request';
 import emitter from '@/utils/emitter';
+import { type DataItem } from '@/components/mt-edit/store/types';
 
 const loading = ref(false);
 
@@ -112,9 +75,14 @@ interface RecServiceType {
     };
   };
 }
+// interface ExtendedParentWindow extends Window {
+//   Rec?: RecServiceType;
+// }
+
 interface ExtendedParentWindow extends Window {
-  Rec?: RecServiceType;
+  globalData: Map<string, DataItem> | Record<string, DataItem>;
 }
+
 interface User {
   id: string;
   name: string;
@@ -196,8 +164,9 @@ let targetDataTable: FloorNode[] = [];
 let initArrs: any = {};
 //数据初始化
 async function dataInit() {
-  debugger;
-  initArrs = (window.parent as ExtendedParentWindow).Rec?.service.node.runtimes;
+  // 从 window 获取 globalData（可能是 Map 或对象）
+  const globalDataRaw = (window as unknown as ExtendedParentWindow).globalData;
+
   // 清空数组
   arr.value = [];
   targetDataTable = [];
@@ -215,18 +184,27 @@ async function dataInit() {
       let eqpList: EquipmentNode[] = [];
       floor.eqpList.forEach((eqp: any) => {
         let currentState = 1;
+        // 根据 globalData 类型选择访问方式
+        const getNodeData = (key: string) => {
+          if (globalDataRaw instanceof Map) {
+            return globalDataRaw.get(key);
+          } else {
+            return (globalDataRaw as Record<string, any>)[key];
+          }
+        };
+
         //故障
-        if (initArrs[eqp.nodes[1]].double != 1) currentState = 1;
-        else if (initArrs[eqp.nodes[2]].double == 1) currentState = 2;
-        else if (initArrs[eqp.nodes[1]].double == 1) currentState = 0;
+        if (getNodeData(eqp.nodes[1])?.double != 1) currentState = 1;
+        else if (getNodeData(eqp.nodes[2])?.double == 1) currentState = 2;
+        else if (getNodeData(eqp.nodes[1])?.double == 1) currentState = 0;
 
         let eqpNode: EquipmentNode = {
           id: eqp.id,
-          name: initArrs[eqp.nodes[0]].node.name || '',
-          eState: initArrs[eqp.nodes[0]].double || 0,
+          name: getNodeData(eqp.nodes[0])?.node?.name || '',
+          eState: getNodeData(eqp.nodes[0])?.double || 0,
           currentState: currentState,
           isBinding: eqp.isBinding,
-          operation: initArrs[eqp.nodes[3]].double == 1
+          operation: getNodeData(eqp.nodes[3])?.double == 1
         };
         eqpList.push(eqpNode);
       });
@@ -508,38 +486,6 @@ const objectSpanMethods = ({ row, columnIndex }: SpanMethodProps) => {
   };
 };
 
-const objectSpanMethod = ({ row, columnIndex }: SpanMethodProps) => {
-  if (columnIndex === 0) {
-    // 查找当前行对应的楼层数据
-    const floor = floorData.find((f) => f.floorName === row.floorName);
-
-    if (floor) {
-      // 找到该楼层下第一个设备的索引
-      const firstEquipmentIndex = floor.equipments.findIndex((e) => e.id === row.id);
-
-      if (firstEquipmentIndex === 0) {
-        // 如果是第一个设备，合并该楼层的所有行
-        return {
-          rowspan: floor.equipments.length,
-          colspan: 1
-        };
-      } else {
-        // 如果不是第一个设备，不显示（被合并）
-        return {
-          rowspan: 0,
-          colspan: 0
-        };
-      }
-    }
-  }
-
-  // 其他列不合并
-  return {
-    rowspan: 1,
-    colspan: 1
-  };
-};
-
 // 将嵌套数据展开为表格数据
 const tableData = computed(() => {
   return floorData.flatMap((floor) =>

src/components/vue-xq-test/vue-three-groundFloor.vue

@@ -776,7 +776,6 @@ loader.load('/models/groundFloor/ground_floor08.gltf', (gltf: any) => {
 
       moveArr.push(child as any);
     } else if (child.name.includes('smokeDetecto')) {
-      console.log('@@aaa:', bindingArr);
       // 烟感报警器
       let smokePosition = child.position;
 

src/layout/view_index.vue

@@ -2,10 +2,9 @@
   <div class="common-layout">
     <el-container>
       <!-- 头部 -->
-      <!-- <el-header class="el-header">
-        <h2>220kV南河变电站辅助设备监控系统(全站总览)</h2>
-      </el-header> -->
-
+      <!--     <el-header class="el-header">-->
+      <!--        <h2>220kV南河变电站辅助设备监控系统(全站总览)</h2>-->
+      <!--      </el-header>-->
       <el-container>
         <!-- 左侧菜单 -->
         <el-aside v-if="true" class="el-aside" :style="{ width: asideWidth }">
@@ -86,7 +85,7 @@ let initArr: any[] = [
   { id: 'testOverview', label: '智能锁控' },
   { id: 'testOverview', label: '智能联动' }
 ];
-
+// TODO 需要修改保存到pinia中
 const isCollapse = ref(false);
 const asideWidth = ref('14%');
 

src/main.ts

@@ -10,6 +10,7 @@ import { createPinia } from 'pinia';
 import 'element-plus/dist/index.css';
 import router from './router/newIndex';
 import '@/utils/globalUtils';
+import { stompService } from '@/utils/stompService';
 
 // 导入 Element Plus 语言包
 // import enLocale from 'element-plus/dist/locale/en.mjs';
@@ -74,4 +75,11 @@ app.component('my-input', MyInput);
 app.component('my-button', MyButton);
 app.component('custom-demo', CustomDemo);
 app.component('pie-charts', PieCharts);
+
+// 项目启动时自动连接 STOMP/MQTT
+stompService.connect({
+  reconnectDelay: 5000 // 5 秒后重连
+});
+console.log('[Main] STOMP/MQTT 服务已启动，正在连接...');
+
 app.mount('#app');

src/router/newIndex.ts

@@ -210,7 +210,6 @@ export const constantRoutes: Readonly<RouteRecordRaw[]> = [
       {
         path: '/fireControl/transformer',
         name: 'fireControlTransformer',
-        component: () => import('@/views/edit/index.vue'),
         meta: {
           title: '变压器排油注氮灭火项目',
           hidden: false,
@@ -222,7 +221,7 @@ export const constantRoutes: Readonly<RouteRecordRaw[]> = [
           {
             path: '/fireControl/transformer/index',
             name: 'fireControlTransformerIndex',
-            component: () => import('@/views/edit/index.vue'),
+            component: () => import('@/views/preview/fireControl/alarm/transformer/index.vue'),
             meta: {
               title: '变压器排油注氮灭火',
               hidden: true,
@@ -234,7 +233,7 @@ export const constantRoutes: Readonly<RouteRecordRaw[]> = [
           {
             path: '/fireFighting/transformer/host',
             name: 'fireFightingTransformerHost',
-            component: () => import('@/views/edit/index.vue'),
+            component: () => import('@/views/preview/fireControl/alarm/transformer/host.vue'),
             meta: {
               title: '主机',
               hidden: false,
@@ -246,7 +245,8 @@ export const constantRoutes: Readonly<RouteRecordRaw[]> = [
           {
             path: '/fireFighting/transformer/floor',
             name: 'fireFightingTransformerFloor',
-            component: () => import('@/views/edit/index.vue'),
+            // // src\views\preview\fireControl\alarm\transformer\nitrogen.vue
+            component: () => import('@/views/preview/fireControl/alarm/transformer/nitrogen.vue'),
             meta: {
               title: '2 号主变排油注氮灭火',
               hidden: false,
@@ -260,7 +260,7 @@ export const constantRoutes: Readonly<RouteRecordRaw[]> = [
       {
         path: '/fireFighting/fireCock',
         name: 'fireFightingFireCock',
-        component: () => import('@/views/edit/index.vue'),
+        component: () => import('@/views/preview/fireControl/alarm/fireHydrant.vue'),
         meta: {
           title: '消火栓系统',
           hidden: false,
@@ -272,7 +272,7 @@ export const constantRoutes: Readonly<RouteRecordRaw[]> = [
       {
         path: '/fireFighting/configuration',
         name: 'fireFightingConfiguration',
-        component: () => import('@/views/edit/index.vue'),
+        component: () => import('@/views/preview/fireControl/alarm/fireExtinguisher.vue'),
         meta: {
           title: '灭火器配置',
           hidden: false,
@@ -284,7 +284,8 @@ export const constantRoutes: Readonly<RouteRecordRaw[]> = [
       {
         path: '/fireFighting/indicate',
         name: 'fireFightingIndicator',
-        component: () => import('@/views/edit/index.vue'),
+        //  F:\vue\workspace\maotu-webtopo\src\views\preview\fireControl\alarm\indicate.vue
+        component: () => import('@/views/preview/fireControl/alarm/indicate.vue'),
         meta: {
           title: '消防应急照明及疏散指示系统',
           hidden: false,
@@ -439,7 +440,7 @@ export const constantRoutes: Readonly<RouteRecordRaw[]> = [
       {
         path: '/monitoring/partialDischarge',
         name: 'mainTransformerPartialDischarge',
-        component: () => import('@/views/edit/index.vue'),
+
         meta: {
           title: '主变局放在线监测项目',
           hidden: false,
@@ -463,7 +464,7 @@ export const constantRoutes: Readonly<RouteRecordRaw[]> = [
           {
             path: '/monitoring/partialDischarge/no2',
             name: 'no2MainTransformerPartialDischarge',
-            component: () => import('@/views/edit/index.vue'),
+            component: () => import('@/views/preview/monitoring/partialDischarge/index.vue'),
             meta: {
               title: '2 号主变局放',
               hidden: false,
@@ -811,8 +812,60 @@ export const constantRoutes: Readonly<RouteRecordRaw[]> = [
         }
       }
     ]
-  }
-  ,
+  },
+  {
+    path: '/classify', //F:\vue\workspace\maotu-webtopo\src\views\preview\classify\index.vue
+    name: 'classify',
+    component: () => import('@/layout/view_index.vue'),
+    meta: {
+      title: '设备分类项目',
+      hidden: false,
+      treeHidden: false,
+      bottomHidden: false,
+      menuIcon: 'Operation'
+    },
+    children: [
+      {
+        path: '/classify/index',
+        name: 'classifyIndex',
+        component: () => import('@/views/preview/classify/index.vue'),
+        meta: {
+          title: '设备分类',
+          hidden: false,
+          treeHidden: false,
+          bottomHidden: false,
+          menuIcon: 'Setting'
+        }
+      }
+    ]
+  },
+  // F:\vue\workspace\maotu-webtopo\src\views\preview\lightBoard\index.vue
+  {
+    path: '/lightBoard', //F:\vue\workspace\maotu-webtopo\src\views\preview\classify\index.vue
+    name: 'lightBoard',
+    component: () => import('@/layout/view_index.vue'),
+    meta: {
+      title: '光字牌项目',
+      hidden: false,
+      treeHidden: false,
+      bottomHidden: false,
+      menuIcon: 'Operation'
+    },
+    children: [
+      {
+        path: '/lightBoard/index',
+        name: 'lightBoardIndex',
+        component: () => import('@/views/preview/lightBoard/index.vue'),
+        meta: {
+          title: '光字牌',
+          hidden: false,
+          treeHidden: false,
+          bottomHidden: false,
+          menuIcon: 'Setting'
+        }
+      }
+    ]
+  },
   {
     path: '/test', //F:\vue\workspace\maotu-webtopo\src\views\preview\systemInfo\index.vue
     name: 'test',

src/services/nodeService.ts

@@ -0,0 +1,135 @@
+/**
+ * Node 服务示例
+ * 处理设备节点相关的 STOMP 消息
+ */
+
+import { stompService } from '@/utils/stompService';
+
+interface NodeData {
+  id: string;
+  name: string;
+  status: string;
+  [key: string]: any;
+}
+
+interface NodeRuntime {
+  node: NodeData;
+  [key: string]: any;
+}
+
+class NodeService {
+  public runtimes: Record<string, NodeRuntime> = {};
+
+  constructor() {
+    // 注册服务
+    stompService.registerService('node', this);
+  }
+
+  /**
+   * STOMP 连接成功后调用
+   */
+  mqttReady(): void {
+    console.log('[NodeService] STOMP 已就绪');
+    // 可以在这里请求初始化数据
+  }
+
+  /**
+   * 连接丢失时调用
+   */
+  onConnectionLost(): void {
+    console.log('[NodeService] STOMP 连接丢失');
+  }
+
+  /**
+   * 处理 Node 初始化消息
+   * @param value 初始化数据
+   */
+  msgNodeInit(value: any): void {
+    console.log('[NodeService] 收到 Node 初始化数据:', value);
+
+    // 处理初始化逻辑
+    if (value && Array.isArray(value.nodes)) {
+      value.nodes.forEach((node: NodeData) => {
+        this.runtimes[node.id] = {
+          node,
+          lastUpdate: new Date()
+        };
+      });
+    }
+  }
+
+  /**
+   * 处理 Node 更新消息
+   * @param value 更新数据
+   */
+  msgNode(value: any): void {
+    console.log('[NodeService] 收到 Node 更新:', value);
+
+    if (value && value.id) {
+      const runtime = this.runtimes[value.id];
+      if (runtime) {
+        // 更新现有节点
+        runtime.node = { ...runtime.node, ...value };
+        runtime.lastUpdate = new Date();
+      } else {
+        // 添加新节点
+        this.runtimes[value.id] = {
+          node: value,
+          lastUpdate: new Date()
+        };
+      }
+
+      // 触发更新事件（可以使用 mitt 或其他事件总线）
+      this.emitNodeUpdate(value.id);
+    }
+  }
+
+  /**
+   * 获取节点数据
+   * @param nodeId 节点 ID
+   */
+  getNode(nodeId: string): NodeData | null {
+    const runtime = this.runtimes[nodeId];
+    return runtime ? runtime.node : null;
+  }
+
+  /**
+   * 获取所有节点
+   */
+  getAllNodes(): NodeData[] {
+    return Object.values(this.runtimes).map((runtime) => runtime.node);
+  }
+
+  /**
+   * 更新节点属性
+   * @param nodeId 节点 ID
+   * @param updates 更新的属性
+   */
+  updateNode(nodeId: string, updates: Partial<NodeData>): void {
+    const runtime = this.runtimes[nodeId];
+    if (runtime) {
+      runtime.node = { ...runtime.node, ...updates };
+      runtime.lastUpdate = new Date();
+
+      // 发送更新到服务器
+      stompService.send('/app/web/write', 'nodeUpdate', {
+        id: nodeId,
+        updates
+      });
+    }
+  }
+
+  /**
+   * 触发节点更新事件
+   * @param nodeId 节点 ID
+   */
+  private emitNodeUpdate(nodeId: string): void {
+    // 这里可以使用 mitt 事件总线
+    // emitter.emit('node-update', nodeId);
+    console.log(`[NodeService] 节点 ${nodeId} 已更新`);
+  }
+}
+
+// 导出单例
+export const nodeService = new NodeService();
+export default nodeService;

src/utils/MQTT_USAGE.md

@@ -0,0 +1,300 @@
+# MQTT 服务使用指南
+
+## 简介
+
+这是一个基于 `mqtt` 库封装的 MQTT 服务，提供了完整的连接、订阅、发布和消息处理功能。
+
+## 主要功能
+
+- ✅ 自动连接和重连
+- ✅ 服务注册机制
+- ✅ 消息自动分发
+- ✅ TypeScript 类型支持
+- ✅ 错误处理和日志记录
+
+## 使用方法
+
+### 1. 在 main.ts 中初始化
+
+```typescript
+import { mqttService } from './utils/mqttService';
+
+// 应用启动时连接 MQTT
+const app = createApp(App);
+
+// 连接 MQTT 服务器
+mqttService.connect({
+  // brokerUrl: 'ws://your-mqtt-broker:8083/mqtt', // 可选，默认使用当前域名
+  // username: 'your-username', // 可选
+  // password: 'your-password', // 可选
+  // clientId: 'your-client-id', // 可选，自动生成
+  reconnectPeriod: 5000 // 重连间隔，默认 5000ms
+});
+
+app.mount('#app');
+```
+
+### 2. 注册服务
+
+```typescript
+// 在您的组件或 store 中
+import { mqttService } from '@/utils/mqttService';
+
+// 注册您的服务
+mqttService.registerService('node', {
+  // 当 MQTT 连接成功时会调用此方法
+  mqttReady() {
+    console.log('Node 服务已就绪');
+  },
+
+  // 处理 Node 初始化消息
+  msgNodeInit(data: any) {
+    console.log('收到 Node 初始化数据:', data);
+  },
+
+  // 处理 Node 更新消息
+  msgNode(data: any) {
+    console.log('收到 Node 更新:', data);
+  },
+
+  // 运行时的数据
+  runtimes: {}
+});
+
+// 注册其他服务
+mqttService.registerService('channel', {
+  online(cid: string, isOnline: boolean) {
+    console.log(`通道 ${cid} 状态：`, isOnline);
+  }
+});
+
+mqttService.registerService('video', {
+  initVideo(data: any) {
+    console.log('初始化视频:', data);
+  },
+  playVideo(data: any) {
+    console.log('播放视频:', data);
+  }
+});
+```
+
+### 3. 发送消息
+
+```typescript
+import { mqttService, MqttCmd } from '@/utils/mqttService';
+
+// 发送控制命令
+mqttService.send('/app/web/write', MqttCmd.Control, {
+  nodeId: 'node-001',
+  action: 'turnOn'
+});
+
+// 发送 Node 更新
+mqttService.send('/app/web/write', MqttCmd.Node, {
+  node: {
+    id: 'node-001',
+    status: 'active'
+  }
+});
+```
+
+### 4. 订阅主题
+
+```typescript
+import { mqttService } from '@/utils/mqttService';
+
+// 订阅自定义主题
+mqttService.subscribe('/topic/custom', (message) => {
+  console.log('收到自定义消息:', message);
+});
+
+// 取消订阅
+mqttService.unsubscribe('/topic/custom');
+```
+
+### 5. 在 Vue 组件中使用
+
+```vue
+<template>
+  <div>
+    <el-button @click="sendCommand">发送命令</el-button>
+    <div>连接状态：{{ isConnected ? '已连接' : '未连接' }}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import { mqttService, MqttCmd } from '@/utils/mqttService';
+
+const isConnected = ref(false);
+
+// 注册服务
+onMounted(() => {
+  mqttService.registerService('myComponent', {
+    mqttReady() {
+      console.log('组件服务已就绪');
+      isConnected.value = true;
+    },
+    onConnectionLost() {
+      isConnected.value = false;
+    }
+  });
+});
+
+// 发送命令
+function sendCommand() {
+  mqttService.send('/app/web/write', MqttCmd.Control, {
+    command: 'test'
+  });
+}
+
+// 组件卸载时清理
+onUnmounted(() => {
+  // 如果需要，可以在这里断开连接
+  // mqttService.disconnect();
+});
+</script>
+```
+
+## 消息命令类型
+
+```typescript
+export const MqttCmd = {
+  Channel: 'channel', // 通道状态
+  NodeInit: 'nodeInit', // Node 初始化
+  Node: 'node', // Node 更新
+  User: 'user', // 用户登录
+  Control: 'control', // 控制命令
+  VideoInit: 'videoInit', // 视频初始化
+  VideoCtl: 'videoCtl', // 视频控制
+  Lock: 'lock', // 锁控
+  Alarm: 'alarm', // 告警
+  Info: 'info', // 通知提示
+  SocketDebugger: 'socketDebugger' // 调试
+};
+```
+
+## API 文档
+
+### mqttService.connect(config?)
+
+连接 MQTT 服务器
+
+**参数:**
+
+- `config?: MqttConfig` - 连接配置
+  - `brokerUrl?: string` - MQTT 服务器地址
+  - `username?: string` - 用户名
+  - `password?: string` - 密码
+  - `clientId?: string` - 客户端 ID
+  - `reconnectPeriod?: number` - 重连间隔（毫秒）
+
+### mqttService.disconnect()
+
+断开 MQTT 连接
+
+### mqttService.send(topic, cmd, value)
+
+发送消息
+
+**参数:**
+
+- `topic: string` - MQTT 主题
+- `cmd: string` - 命令类型
+- `value: any` - 消息内容
+
+### mqttService.subscribe(topic, callback?)
+
+订阅主题
+
+**参数:**
+
+- `topic: string` - 主题
+- `callback?: (message: MqttMessage) => void` - 消息回调
+
+### mqttService.unsubscribe(topic)
+
+取消订阅
+
+**参数:**
+
+- `topic: string` - 主题
+
+### mqttService.registerService(name, service)
+
+注册服务
+
+**参数:**
+
+- `name: string` - 服务名称
+- `service: any` - 服务对象
+
+### mqttService.getClientStatus()
+
+获取客户端状态
+
+**返回:** `{ connected: boolean; client: MqttClient | null }`
+
+## 注意事项
+
+1. **连接时机**: 建议在应用启动时（main.ts）连接 MQTT
+2. **服务注册**: 在组件的 `onMounted` 生命周期注册服务
+3. **清理资源**: 在组件卸载时根据需要断开连接或取消订阅
+4. **错误处理**: 服务已内置重连机制，无需手动处理
+5. **类型安全**: 所有方法都有 TypeScript 类型支持
+
+## 迁移指南
+
+从旧的 ExtJS 版本迁移：
+
+### 旧代码
+
+```javascript
+Rec.mqtt.connect();
+Rec.service.node = { ... };
+Rec.mqtt.send(cmd, value);
+```
+
+### 新代码
+
+```typescript
+import { mqttService } from '@/utils/mqttService';
+
+mqttService.connect();
+mqttService.registerService('node', { ... });
+mqttService.send('/app/web/write', cmd, value);
+```
+
+## 示例项目结构
+
+```
+src/
+├── utils/
+│   └── mqttService.ts          # MQTT 服务
+├── services/
+│   ├── nodeService.ts          # Node 服务
+│   ├── channelService.ts       # 通道服务
+│   └── videoService.ts         # 视频服务
+└── views/
+    └── YourComponent.vue       # 使用 MQTT 的组件
+```
+
+## 故障排除
+
+### 连接失败
+
+- 检查 MQTT 服务器地址是否正确
+- 检查网络连接
+- 查看浏览器控制台日志
+
+### 消息未收到
+
+- 确认服务已注册
+- 检查主题订阅是否正确
+- 查看消息格式是否符合预期
+
+### 重连问题
+
+- 检查 `reconnectPeriod` 设置
+- 查看服务器是否在线
+- 检查认证信息是否正确

src/utils/STOMP_USAGE.md

@@ -0,0 +1,309 @@
+# STOMP 服务使用指南
+
+## 简介
+
+这是一个基于 `@stomp/stompjs` 库封装的 STOMP 服务，提供了完整的连接、订阅、发布和消息处理功能。
+
+**注意：** 您的项目使用的是 **STOMP over WebSocket** 协议，而不是 MQTT。
+
+## 主要功能
+
+- ✅ 自动连接和重连
+- ✅ 服务注册机制
+- ✅ 消息自动分发
+- ✅ TypeScript 类型支持
+- ✅ 错误处理和日志记录
+
+## 使用方法
+
+### 1. 在 main.ts 中初始化
+
+```typescript
+import { stompService } from './utils/stompService';
+
+// 应用启动时连接 STOMP
+const app = createApp(App);
+
+// 连接 STOMP 服务器
+stompService.connect({
+  // brokerUrl: 'ws://your-server:8080/stomp-endpoint', // 可选，默认使用当前域名
+  // username: 'your-username', // 可选
+  // password: 'your-password', // 可选
+  reconnectDelay: 5000 // 重连间隔，默认 5000ms
+});
+
+app.mount('#app');
+```
+
+### 2. 注册服务
+
+```typescript
+// 在您的组件或 store 中
+import { stompService } from '@/utils/stompService';
+
+// 注册您的服务
+stompService.registerService('node', {
+  // 当 STOMP 连接成功时会调用此方法
+  mqttReady() {
+    console.log('Node 服务已就绪');
+  },
+
+  // 处理 Node 初始化消息
+  msgNodeInit(data: any) {
+    console.log('收到 Node 初始化数据:', data);
+  },
+
+  // 处理 Node 更新消息
+  msgNode(data: any) {
+    console.log('收到 Node 更新:', data);
+  },
+
+  // 运行时的数据
+  runtimes: {}
+});
+
+// 注册其他服务
+stompService.registerService('channel', {
+  online(cid: string, isOnline: boolean) {
+    console.log(`通道 ${cid} 状态：`, isOnline);
+  }
+});
+
+stompService.registerService('video', {
+  initVideo(data: any) {
+    console.log('初始化视频:', data);
+  },
+  playVideo(data: any) {
+    console.log('播放视频:', data);
+  }
+});
+```
+
+### 3. 发送消息
+
+```typescript
+import { stompService, MqttCmd } from '@/utils/stompService';
+
+// 发送控制命令
+stompService.send('/app/web/write', MqttCmd.Control, {
+  nodeId: 'node-001',
+  action: 'turnOn'
+});
+
+// 发送 Node 更新
+stompService.send('/app/web/write', MqttCmd.Node, {
+  node: {
+    id: 'node-001',
+    status: 'active'
+  }
+});
+```
+
+### 4. 订阅主题
+
+```typescript
+import { stompService } from '@/utils/stompService';
+
+// 订阅自定义主题
+stompService.subscribe('/topic/custom', (message) => {
+  console.log('收到自定义消息:', message);
+});
+
+// 取消订阅
+stompService.unsubscribe('/topic/custom');
+```
+
+### 5. 在 Vue 组件中使用
+
+```vue
+<template>
+  <div>
+    <el-button @click="sendCommand">发送命令</el-button>
+    <div>连接状态：{{ isConnected ? '已连接' : '未连接' }}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import { stompService, MqttCmd } from '@/utils/stompService';
+
+const isConnected = ref(false);
+
+// 注册服务
+onMounted(() => {
+  stompService.registerService('myComponent', {
+    mqttReady() {
+      console.log('组件服务已就绪');
+      isConnected.value = true;
+    },
+    onConnectionLost() {
+      isConnected.value = false;
+    }
+  });
+});
+
+// 发送命令
+function sendCommand() {
+  stompService.send('/app/web/write', MqttCmd.Control, {
+    command: 'test'
+  });
+}
+
+// 组件卸载时清理
+onUnmounted(() => {
+  // 如果需要，可以在这里断开连接
+  // stompService.disconnect();
+});
+</script>
+```
+
+## 消息命令类型
+
+```typescript
+export const MqttCmd = {
+  Channel: 'channel', // 通道状态
+  NodeInit: 'nodeInit', // Node 初始化
+  Node: 'node', // Node 更新
+  User: 'user', // 用户登录
+  Control: 'control', // 控制命令
+  VideoInit: 'videoInit', // 视频初始化
+  VideoCtl: 'videoCtl', // 视频控制
+  Lock: 'lock', // 锁控
+  Alarm: 'alarm', // 告警
+  Info: 'info', // 通知提示
+  SocketDebugger: 'socketDebugger' // 调试
+};
+```
+
+## API 文档
+
+### stompService.connect(config?)
+
+连接 STOMP 服务器
+
+**参数:**
+
+- `config?: StompServiceConfig` - 连接配置
+  - `brokerUrl?: string` - STOMP 服务器地址
+  - `username?: string` - 用户名
+  - `password?: string` - 密码
+  - `reconnectDelay?: number` - 重连间隔（毫秒）
+
+### stompService.disconnect()
+
+断开 STOMP 连接
+
+### stompService.send(destination, cmd, value)
+
+发送消息
+
+**参数:**
+
+- `destination: string` - STOMP 目标地址
+- `cmd: string` - 命令类型
+- `value: any` - 消息内容
+
+### stompService.subscribe(destination, callback?)
+
+订阅主题
+
+**参数:**
+
+- `destination: string` - 目标地址
+- `callback?: (message: StompMessage) => void` - 消息回调
+
+### stompService.unsubscribe(destination)
+
+取消订阅
+
+**参数:**
+
+- `destination: string` - 目标地址
+
+### stompService.registerService(name, service)
+
+注册服务
+
+**参数:**
+
+- `name: string` - 服务名称
+- `service: any` - 服务对象
+
+### stompService.getClientStatus()
+
+获取客户端状态
+
+**返回:** `{ connected: boolean; client: Client | null }`
+
+## 注意事项
+
+1. **连接时机**: 建议在应用启动时（main.ts）连接 STOMP
+2. **服务注册**: 在组件的 `onMounted` 生命周期注册服务
+3. **清理资源**: 组件卸载时根据需要断开连接或取消订阅
+4. **错误处理**: 服务已内置重连机制，无需手动处理
+5. **类型安全**: 所有方法都有 TypeScript 类型支持
+
+## 迁移指南
+
+从旧的 ExtJS 版本迁移：
+
+### 旧代码
+
+```javascript
+Rec.mqtt.connect();
+Rec.service.node = { ... };
+Rec.mqtt.send(cmd, value);
+```
+
+### 新代码
+
+```typescript
+import { stompService } from '@/utils/stompService';
+
+stompService.connect();
+stompService.registerService('node', { ... });
+stompService.send('/app/web/write', cmd, value);
+```
+
+## 示例项目结构
+
+```
+src/
+├── utils/
+│   └── stompService.ts          # STOMP 服务
+├── services/
+│   ├── nodeService.ts          # Node 服务
+│   ├── channelService.ts       # 通道服务
+│   └── videoService.ts         # 视频服务
+└── views/
+    └── YourComponent.vue       # 使用 STOMP 的组件
+```
+
+## 故障排除
+
+### 连接失败
+
+- 检查 STOMP 服务器地址是否正确
+- 检查 WebSocket 是否可用（某些浏览器需要 HTTPS）
+- 查看浏览器控制台日志
+
+### 消息未收到
+
+- 确认服务已注册
+- 检查主题订阅是否正确
+- 查看消息格式是否符合预期
+
+### 重连问题
+
+- 检查 `reconnectDelay` 设置
+- 查看服务器是否在线
+- 检查认证信息是否正确
+
+## 与 MQTT 的区别
+
+STOMP 是一个简单的文本协议，基于 WebSocket：
+
+- 使用 `destination` 而不是 `topic`
+- 使用 `send/publish` 发送消息
+- 使用 `subscribe` 订阅消息
+- 连接地址格式：`ws://host/stomp-endpoint`

src/utils/axios.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+const myAxios = axios.create({
+  baseURL: 'http://localhost:8080',
+  timeout: 60000,
+  withCredentials: true
+});
+export default myAxios;

src/utils/config.ts

@@ -0,0 +1,270 @@
+import { dayjs } from 'element-plus';
+
+interface RecIn {
+  Node: {
+    InTypeIn: [number, string][];
+    TypeBase: [number, string][];
+  };
+  CONST: {
+    STR: {
+      EnumType: [number, string][];
+    };
+    YX: {
+      EnumType: [number, string][];
+    };
+    UserPage: [string, string][];
+  };
+  EnumTypeVal: [number, string][][];
+  EnumTypeValFun: Function[];
+  regex: any;
+  trans: (val: any, enumArr: [number, string][]) => string;
+}
+export const Rec: Partial<RecIn> = {};
+Rec.Node = {} as RecIn['Node'];
+Rec.CONST = {} as RecIn['CONST'];
+Rec.CONST.STR = {} as RecIn['CONST']['STR'];
+Rec.CONST.YX = {} as RecIn['CONST']['YX'];
+Rec.trans = (index, type) => {
+  for (let i = 0; i < type.length; i++) {
+    if (type[i][0] == index) {
+      return type[i][1];
+    }
+  }
+  return '*未知*';
+};
+// 所有输入类型
+Rec.Node.InTypeIn = [
+  [1, '遥信'],
+  [2, '遥测']
+];
+export const getIndex = (num: number) => {
+  switch (num) {
+    case 1:
+      return 100;
+    case 2:
+      return 0;
+    default:
+      return -1;
+  }
+};
+
+/**
+ * 节点状态
+ * @param num Node里面的sig值
+ * @returns
+ */
+export const getNodeStatus = (sig: number) => {
+  switch (sig) {
+    case -2000:
+      return '未初始化状态';
+    case 0:
+      return '正常';
+    case 1:
+      return '开启';
+    case 5:
+      return '联动关';
+    case 10:
+      return '高联动';
+    case -10:
+      return '低联动';
+    case 20:
+      return '高限告警';
+    case -20:
+      return '低限告警';
+    default:
+      return '未知状态';
+  }
+};
+
+/**
+ * 节点颜色
+ * @param num Node里面的sig值
+ * @returns
+ */
+export const getNodeColor = (sig: number) => {
+  switch (sig) {
+    case -2000:
+      return 'info';
+    case 0:
+    case 1:
+      return 'primary';
+    case 5:
+    case 10:
+    case -10:
+      return 'warning';
+    case 20:
+    case -20:
+      return 'danger';
+    default:
+      return 'info';
+  }
+};
+// 四遥基本类型
+Rec.Node.TypeBase = [
+  [1, '遥信'],
+  [2, '遥测'],
+  [3, '遥控'],
+  [4, '遥调']
+];
+
+// 定值转化的 类型
+Rec.CONST.STR.EnumType = [
+  [0, '缺省'],
+  [1, '普通开关'],
+  [2, '数值'],
+  [3, '时间秒'],
+  [11, 'RY空调模式'],
+  [12, '空调温度'],
+  [13, '空调风速'],
+  [14, '国网空调模式'],
+  [21, 'KTC空调']
+];
+Rec.CONST.YX.EnumType = [
+  [0, '颜色'],
+  [1, '文字'],
+  [2, '颜色+文字']
+];
+
+Rec.EnumTypeVal = []; // 定值类型，用于编辑时的选择
+Rec.EnumTypeValFun = []; // 转换函数，用于显示与控制
+
+Rec.EnumTypeVal[100] = [
+  [0, 'green'],
+  [1, 'yellow'],
+  [2, 'red']
+];
+Rec.EnumTypeVal[101] = [
+  [0, '正常'],
+  [1, '异常'],
+  [2, '故障'],
+  [3, '报警'],
+  [4, '运行'],
+  [5, '关闭']
+];
+Rec.EnumTypeVal[102] = [
+  [0, '正常,green'],
+  [1, '异常,saddlebrown'],
+  [2, '故障,yellow'],
+  [3, '报警,red'],
+  [4, '运行,blue'],
+  [5, '关闭,purple']
+];
+// 缺省
+Rec.EnumTypeVal[0] = [
+  [0, '关闭'],
+  [1, '开启']
+];
+
+Rec.EnumTypeValFun[0] = function (val: any, index: number) {
+  return Rec.trans!(val, Rec.EnumTypeVal![index + 0]);
+};
+//Rec.EnumTypeValFun[etype](val,getIndex(btype));
+
+// 遥控
+Rec.EnumTypeVal[1] = [
+  [0, '关闭'],
+  [1, '开启']
+];
+
+Rec.EnumTypeValFun[1] = function (val: any, index: number) {
+  return Rec.trans!(val, Rec.EnumTypeVal![index + 1]);
+};
+
+// 数值
+Rec.EnumTypeVal[2] = [];
+Rec.EnumTypeValFun[2] = function (val: any, index: number) {
+  return Rec.trans!(val, Rec.EnumTypeVal![index + 2]);
+};
+
+// timestamp 转换成时间
+Rec.EnumTypeValFun[3] = function (val: any) {
+  // Ext.Date.format(val * 1000, 'Y-m-d H:i:s')
+  dayjs.unix(val).format('YYYY-MM-DD HH:mm:ss');
+};
+
+// 国网空调模式
+Rec.EnumTypeVal[14] = [
+  [4, '自动'],
+  [0, '制冷'],
+  [1, '制热'],
+  [3, '除湿'],
+  [2, '送风']
+];
+
+Rec.EnumTypeValFun[14] = function (val: any, index: number) {
+  return Rec.trans!(val, Rec.EnumTypeVal![14]);
+};
+
+// RY空调模式
+Rec.EnumTypeVal[11] = [
+  [0, '自动'],
+  [1, '制冷'],
+  [2, '制热'],
+  [3, '除湿'],
+  [4, '送风']
+];
+
+Rec.EnumTypeValFun[11] = function (val: any, index: number) {
+  return Rec.trans!(val, Rec.EnumTypeVal![11]);
+};
+
+// 空调温度
+Rec.EnumTypeVal[12] = [
+  [16, '16℃'],
+  [17, '17℃'],
+  [18, '18℃'],
+  [19, '19℃'],
+  [20, '20℃'],
+  [21, '21℃'],
+  [22, '22℃'],
+  [23, '23℃'],
+  [24, '24℃'],
+  [25, '25℃'],
+  [26, '26℃'],
+  [27, '27℃'],
+  [28, '28℃'],
+  [29, '29℃'],
+  [30, '30℃']
+];
+
+Rec.EnumTypeValFun[12] = function (val: any, index: number) {
+  return Rec.trans!(val, Rec.EnumTypeVal![12]);
+};
+
+// 空调风速
+Rec.EnumTypeVal[13] = [
+  [0, '自动'],
+  [1, '低'],
+  [2, '中'],
+  [3, '高']
+];
+
+Rec.EnumTypeValFun[13] = function (val: any, index: number) {
+  return Rec.trans!(val, Rec.EnumTypeVal![13]);
+};
+
+// KTC 空调
+Rec.EnumTypeVal[21] = [
+  [0, '关闭'],
+  [1, '制冷'],
+  [2, '制热']
+];
+
+Rec.EnumTypeValFun[21] = function (val: any, index: number) {
+  return Rec.trans!(val, Rec.EnumTypeVal![21]);
+};
+//
+Rec.EnumTypeValFun[21]();
+// 用户的缺省界面
+Rec.CONST.UserPage = [
+  ['Admin', 'Admin'],
+  ['User', 'User']
+];
+
+// 正则表达式
+Rec.regex = {
+  // Modbus 配置的正则表达式
+  modbusCfg:
+    /^(?:25[0-4]|2[0-4]\d|1\d{2}|[1-9]\d|[1-9]):(?:[1-6]|10):(?:6553[0-5]|655[0-2]\d|65[0-4]\d{2}|6[0-4]\d{3}|[1-5]\d{4}|[1-9]\d{0,3}|0)(?::[2-9])?$/,
+  modbusParm: /^(?:\d+(?::\d+){0,2})?$/
+};

src/utils/electricConfig.ts

@@ -0,0 +1,87 @@
+const EnumTypeVal: [number, string][][] = [];
+const EnumTypeValFun: ((val: number) => string)[] = [];
+
+/**
+ *
+ * @param index
+ * @param type
+ * @returns {string|*}
+ */
+const trans = function (index: number, type: any[]) {
+  for (let i = 0; i < type.length; i++) {
+    if (type[i][0] == index) {
+      return type[i][1];
+    }
+  }
+  return '*未知*';
+};
+
+const EnumType = [
+  [0, '缺省'],
+  [1, '普通开关'],
+  [2, '数值'],
+  [3, '时间秒'],
+  [11, 'RY空调模式'],
+  [12, '空调温度'],
+  [13, '空调风速'],
+  [14, '国网空调模式'],
+  [21, 'KTC空调']
+];
+
+// 缺省
+EnumTypeVal[0] = [
+  [0, '关闭'],
+  [1, '开启']
+];
+EnumTypeValFun[0] = function (val: number) {
+  return trans(val, EnumTypeVal[0]);
+};
+
+// 遥控
+EnumTypeVal[1] = [
+  [0, '关闭'],
+  [1, '开启']
+];
+EnumTypeValFun[1] = function (val) {
+  return trans(val, EnumTypeVal[1]);
+};
+
+// 数值
+EnumTypeVal[2] = [];
+EnumTypeValFun[2] = function (val) {
+  return val.toString();
+};
+
+// timestamp 转换成时间
+EnumTypeValFun[3] = function (val) {
+  return format(val * 1000, 'Y-m-d H:i:s');
+};
+
+export { EnumTypeVal, EnumTypeValFun };
+
+const format = function (date: Date, format: string) {
+  var formatFunctions = formatFunctions;
+
+  if (!Ext.isDate(date)) {
+    return '';
+  }
+
+  if (formatFunctions[format] == null) {
+    utilDate.createFormat(format);
+  }
+
+  return formatFunctions[format].call(date) + '';
+};
+
+const formatFunctions: { [key: string]: () => string } = {
+  MS: function () {
+    // UTC milliseconds since Unix epoch (MS-AJAX serialized date format (MRSF))
+    return '\\/Date(' + this.getTime() + ')\\/';
+  },
+  time: function () {
+    return this.getTime().toString();
+  },
+  timestamp: function () {
+    return format(this.getTime(), 'U');
+  }
+};

src/utils/globalUtils.ts

@@ -3,13 +3,12 @@ import { type DataItem } from '@/components/mt-edit/store/types';
 import emitter from '@/utils/emitter';
 import { useNodeByModelsStore } from '@/components/mt-edit/store/nodeByModels';
 
-// 扩展 Window 接口
 declare global {
   interface Window {
-    vueGlobalFunction: (param: any) => void;
-    // 添加其他全局函数
+    vueGlobalFunction: (param: DataItem) => void;
     anotherGlobalFunction: (param: string) => string;
-    globalData: Map<string, DataItem> | Record<string, DataItem>;
+    // globalData: Map<string, DataItem> | Record<string, DataItem>;
+    globalData: Map<string, DataItem>;
     globalNodeIdForModeId: Map<string, Array<string>>;
   }
 }
@@ -31,15 +30,16 @@ function setModuleById(param: DataItem) {
 // 定义全局函数
 function vueGlobalFunction(param: DataItem) {
   console.log('全局函数被调用:', param);
-  debugger;
 
   // 安全访问 globalData
   const globalData = window.globalData;
-  if (globalData instanceof Map) {
-    (globalData as Map<string, DataItem>).set(param.id.toString(), param);
-  } else {
-    (globalData as Record<string, DataItem>)[param.id.toString()] = param;
-  }
+  (globalData as Map<string, DataItem>).set(param.id.toString(), param);
+
+  // if (globalData instanceof Map) {
+  //   (globalData as Map<string, DataItem>).set(param.id.toString(), param);
+  // } else {
+  //   (globalData as Record<string, DataItem>)[param.id.toString()] = param;
+  // }
 
   // 延迟访问 store
   try {
@@ -48,7 +48,7 @@ function vueGlobalFunction(param: DataItem) {
     if (nodeByModelsStore.nodeMap.has(param.id.toString())) {
       const arr = nodeByModelsStore.nodeMap.get(param.id.toString());
       arr?.forEach((nodeId) => {
-        console.log('节点ID:', nodeId);
+        console.log('节点 ID:', nodeId);
         emitter.emit(nodeId, param.id);
       });
     }
@@ -85,16 +85,22 @@ async function getData() {
     if (data && typeof data === 'object') {
       // 判断当前 globalData 类型并相应处理
       const currentGlobalData = window.globalData;
-      if (currentGlobalData instanceof Map) {
-        // 如果当前是 Map，清空并重新设置
-        currentGlobalData.clear();
-        Object.entries(data).forEach(([key, value]) => {
-          currentGlobalData.set(key, value as DataItem);
-        });
-      } else {
-        // 如果当前是对象，直接赋值
-        window.globalData = data as Record<string, DataItem>;
-      }
+
+      currentGlobalData.clear();
+      Object.entries(data).forEach(([key, value]) => {
+        currentGlobalData.set(key, value as DataItem);
+      });
+
+      // if (currentGlobalData instanceof Map) {
+      //   // 如果当前是 Map，清空并重新设置
+      //   currentGlobalData.clear();
+      //   Object.entries(data).forEach(([key, value]) => {
+      //     currentGlobalData.set(key, value as DataItem);
+      //   });
+      // } else {
+      //   // 如果当前是对象，直接赋值
+      //   window.globalData = data as Record<string, DataItem>;
+      // }
     }
 
     console.log('全局数据已更新:', window.globalData);
@@ -110,31 +116,10 @@ if (typeof window !== 'undefined') {
 }
 
 // 监听页面刷新/加载事件
-// window.addEventListener('load', () => {
-//   getData();
-// });
+window.addEventListener('load', () => {
+  getData();
+});
 
 // 也可以直接挂载到全局对象
 // (window as any).myGlobalFunction = myGlobalFunction;
-// (window as any).anotherGlobalFunction = anotherGlobalFunction;
-
-// 接收父页面消息
-window.addEventListener('message', function (event) {
-  if (event.data.type === 'SET_GLOBAL_DATA') {
-    // 接收父页面发送的数据
-    window.globalData = event.data.payload;
-    console.log('接收到父页面数据:', window.globalData);
-  }
-});
-
-// 通知父页面 Vue 已准备就绪
-window.addEventListener('load', () => {
-  if (window.parent !== window) {
-    window.parent.postMessage(
-      {
-        type: 'VUE_APP_READY'
-      },
-      '*'
-    );
-  }
-});
+(window as any).anotherGlobalFunction = anotherGlobalFunction;

src/utils/invariable.ts

@@ -0,0 +1,162 @@
+export interface Paragraph {
+  field: string;
+  value: string;
+}
+
+export const invariantObjMap: Record<string, Paragraph[]> = {
+  // 火灾报警系统主机
+  fireAlarmHost: [
+    { field: '名称', value: '火灾报警系统主机' },
+    { field: '产品型号', value: 'JB-QB-GST200' },
+    { field: '厂商', value: '海湾公司' },
+    { field: '运行日期', value: '2023-04-01' },
+    { field: '电源电压', value: '220V AC' },
+    { field: '频率', value: '50Hz' },
+    { field: '输出电压', value: '24V DC' },
+    { field: '输出电流', value: '5A' },
+    { field: '环境温度', value: '-5℃ ~ 45℃' },
+    { field: '相对湿度', value: '5% ~ 95%' },
+    { field: '维护单位', value: '陕西消防科技有限公司' },
+    { field: '联系电话', value: '188*****00' }
+  ],
+  // 主机
+  host: [
+    { field: '名称', value: 'PAVLN排油注氮智能防护系统控制主机' },
+    { field: '型号', value: 'JB-QB-GST200' },
+    { field: '厂家', value: '海湾公司' },
+    { field: '运行日期', value: '2015-10-10' },
+    { field: '电源电压', value: 'DC 220V 5A/AC 220V 5A' },
+    { field: '频率', value: '27~1600MHz' },
+    { field: '输出电压', value: '24V DC' },
+    { field: '输出电流', value: '5A' },
+    { field: '环境温度', value: '-5℃ ~ 45℃' },
+    { field: '相对湿度', value: '5% ~ 95%' },
+    { field: '维护单位', value: '陕西消防科技有限公司' },
+    { field: '联系电话', value: '188*****00' }
+  ],
+  // 2号主变油色谱
+  oilChromatography: [
+    { field: '厂家', value: '宁波理工' },
+    { field: '型号', value: 'MGA2000-6H' },
+    { field: '投运日期', value: '2015年10月27日' },
+    { field: '工作电源', value: 'AC220V,50Hz' },
+    { field: '工作环境温度', value: '-40°C~+80°C' },
+    { field: '工作相对湿度', value: '5%~95%' }
+  ],
+  //2号主变局放
+  partialDischarge: [
+    { field: '厂家', value: '上海思瑞在线监测技术有限公司' },
+    { field: '型号', value: 'MGA2000-6H' },
+    { field: '投运日期', value: '2015年10月16日' },
+    { field: '局放测量通道', value: '3个局放测量通道+1个噪音测量通道' },
+    { field: '局放传感器频宽', value: '300MHZ~2000MHZ' },
+    { field: '工作环境温度', value: '-25°C~+55°C' },
+    { field: '工作相对湿度', value: '5%~95%' }
+  ],
+  //2215开关间隔
+  switchGap: [
+    { field: '厂家', value: '许继电气股份有限公司' },
+    { field: '型号', value: 'DPD-801' },
+    { field: '投运日期', value: '2015年11月17日' },
+    { field: '局放测量通道', value: '3个局放测量通道+1个噪音测量通道' },
+    { field: '工作环境温度', value: '-40°C~+70°C' },
+    { field: '工作相对湿度', value: '5%~95%' }
+  ]
+};
+
+const threeDPath = {
+  smokeSiren: '/models/smokeSiren/smokeSiren.glb',
+  default: '/models/default/default.glb'
+};
+
+export const invariant3DObjMap: Record<string, Paragraph[]> = {
+  // 烟感报警器
+  smokeSiren: [
+    { field: '3D模型', value: threeDPath.smokeSiren },
+    { field: '厂家', value: '海湾公司' },
+    { field: '型号', value: 'VLP-666-CH标准型' },
+    { field: '投运日期', value: '2014-06-08' },
+    { field: '布设位置', value: '35kV高压室' },
+    { field: '供电电压', value: '18-30VDC' },
+    { field: 'IP等级', value: 'IP30' },
+    { field: '接线方式', value: '两线制(L+、L-)' },
+    { field: '尺寸(长x高x宽)', value: '350mmx225mmx125mm' },
+    { field: '报警灵敏度范围', value: '0.005%至20%obs/m' },
+    { field: '运行条件1', value: '探测器环境(-5°C至45°C)' },
+    { field: '运行条件2', value: '采样空气(-20°C至60°C)' },
+    { field: '运行条件3', value: '湿度(5%至95%RH)' }
+  ],
+  // 温感火灾探测器
+  temperatureFireDetector: [
+    { field: '3D模型', value: threeDPath.default },
+    { field: '厂家', value: '海湾公司' },
+    { field: '型号', value: 'CT1-155X' },
+    { field: '投运日期', value: '2012-08-08' },
+    { field: '使用环境', value: '温度-5°C~45°C' },
+    { field: '火灾响应规模', value: '10mm' },
+    { field: '测量温度精度', value: '≤1°C' },
+    { field: '类型', value: '定温式' },
+    { field: '报警温度', value: '85°C' },
+    { field: '标准', value: 'GB16280-2014' }
+  ],
+  // 消火栓
+  fireHydrant: [
+    { field: '3D模型', value: threeDPath.default },
+    { field: '厂家', value: '宏达消防设备制造有限公司' },
+    { field: '型号', value: 'SN-65' },
+    { field: '投运日期', value: '2016-10-10' },
+    { field: '布设位置', value: '生产综合楼1楼走廊' },
+    { field: '质量保证书类型', value: '型式认证' },
+    { field: '质保证书', value: 'NO2015-2032' },
+    { field: '维保单位', value: '陕西消防科技有限公司' },
+    { field: '联系电话', value: '188*****00' }
+  ],
+  // 灭火器
+  fireExtinguisher: [
+    { field: '3D模型', value: threeDPath.default },
+    { field: '厂家', value: '天河消防厂' },
+    { field: '型号', value: 'MFZ35' },
+    { field: '投运日期', value: '2012-08-08' },
+    { field: '布设位置', value: '生产综合楼1楼35kV高压室' },
+    { field: '名称', value: '推车式干粉灭火器' },
+    { field: '品牌', value: '淮海' },
+    { field: '灭火剂', value: '碳酸铵盐50%、硫酸铵25%、滑石粉25%' },
+    { field: '灭火级别', value: 'ABCD' }
+  ],
+  // 疏散指示灯
+  evacuationSign: [
+    { field: '3D模型', value: threeDPath.default },
+    { field: '厂家', value: 'XXX消防设备有限公司' },
+    { field: '型号', value: 'BSD128F(自带应急照明)' },
+    { field: '投运日期', value: '2013-08-06' },
+    { field: '布设位置', value: '110kV保护室' },
+    { field: '输入电压', value: 'AC220V(+10%)' },
+    { field: '频率', value: '50Hz' },
+    { field: '功率', value: '<3W' },
+    { field: '应急时间', value: '>=90min' },
+    { field: '转换时间', value: '<=10s' },
+    { field: '充电时间', value: '>=24h' },
+    { field: '电池类型', value: 'Ni-Cd 1.2v 800mAh' }
+  ],
+  // 红外对射
+  infraredBeam: [
+    { field: '3D模型', value: threeDPath.default },
+    { field: '厂家', value: 'XX霍尼维尔' },
+    { field: '生产型号', value: 'DT-8041' },
+    { field: '供电电源', value: '9.0-15VDC' },
+    { field: '微波频率', value: '10.525GHz' },
+    { field: '工作温度', value: '-10°C~55°C' },
+    { field: '相对湿度', value: '5至93%' },
+    { field: '探测范围', value: '12m' }
+  ],
+  // 门禁控制器
+  accessController: [
+    { field: '3D模型', value: threeDPath.default },
+    { field: '生产厂家', value: 'Pegasus' },
+    { field: '生产型号', value: 'PP6750V' },
+    { field: '投运日期', value: '2017-05-09' },
+    { field: '电源电压', value: 'DC12V' },
+    { field: '工作电流', value: '100mA' },
+    { field: '管理门数', value: '4' }
+  ]
+};

src/utils/request.ts

@@ -21,7 +21,102 @@ export const buildApiUrl = (path: string) => {
 };
 
 export const modelApi = {
-  // http://localhost:8080/monitor/info
+  // http://localhost:8080/data/lightModel/getLightBoardList
+  getLightBoardList_post(endJson: any): Promise<ApiResponse> {
+    return fetch(buildApiUrl('/data/lightModel/getLightBoardList'), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: '*/*'
+      },
+      body: JSON.stringify(endJson)
+    }).then((response) => {
+      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+      return response.json();
+    });
+  },
+
+  changeNodeClass_post(endJson: any): Promise<ApiResponse> {
+    return fetch(buildApiUrl('/data/tree/changeNodeClass'), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: '*/*'
+      },
+      body: JSON.stringify(endJson)
+    }).then((response) => {
+      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+      return response.json();
+    });
+  },
+
+  getNodeByCls_get(clsId: string): Promise<ApiResponse> {
+    return fetch(buildApiUrl(`/data/tree/getNodeByCls?clsId=${clsId}`), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: '*/*'
+      }
+    }).then((response) => {
+      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+      return response.json();
+    });
+  },
+  deleteTreeNode_post(endJson: any): Promise<ApiResponse> {
+    return fetch(buildApiUrl('/data/tree/deleteTreeNode'), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: '*/*'
+      },
+      body: JSON.stringify(endJson)
+    }).then((response) => {
+      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+      return response.json();
+    });
+  },
+
+  changeTreeNode_post(endJson: any): Promise<ApiResponse> {
+    return fetch(buildApiUrl('/data/tree/changeTreeNode'), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: '*/*'
+      },
+      body: JSON.stringify(endJson)
+    }).then((response) => {
+      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+      return response.json();
+    });
+  },
+
+  addTreeNode_post(endJson: any): Promise<ApiResponse> {
+    return fetch(buildApiUrl('/data/tree/addTreeNode'), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: '*/*'
+      },
+      body: JSON.stringify(endJson)
+    }).then((response) => {
+      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+      return response.json();
+    });
+  },
+
+  allTree_get(): Promise<ApiResponse> {
+    return fetch(buildApiUrl('/data/tree/allTree'), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: '*/*'
+      }
+    }).then((response) => {
+      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+      return response.json();
+    });
+  },
+
   monitor_info_get(): Promise<ApiResponse> {
     return fetch(buildApiUrl('/monitor/info'), {
       method: 'GET',

src/utils/stompService.ts

@@ -0,0 +1,455 @@
+import { Client, Message, IFrame } from '@stomp/stompjs';
+import type { StompConfig } from '@stomp/stompjs';
+
+// 定义消息命令常量
+export const MqttCmd = {
+  Channel: 1, // 通道消息
+  NodeInit: 2, // 节点初始化
+  Node: 3, // 节点消息
+  VideoInit: 4, // 视频初始化
+  VideoCtl: 5, // PTZ 控制
+  VideoPlay: 6, // 视频播放
+  Lock: 7, // 锁控消息
+  Control: 10, // 控制消息反馈
+  Alarm: 20, // 告警消息
+  Info: 100, // 通知
+  Error: 101, // 错误
+  DirVideo: 201, // 视频消息
+  DirLock: 202, // 锁控消息
+  DirLockWeb: 203, // 锁控 WEB 消息
+  User: 1000, // 用户登陆
+  SocketDebugger: 3001 // SocketDebugger 消息
+};
+
+// 定义消息接口
+export interface StompMessage {
+  cmd: number;
+  value: any;
+}
+
+// 定义服务注册表
+export interface ServiceRegistry {
+  [key: string]: any;
+}
+
+// STOMP 配置接口
+export interface StompServiceConfig {
+  brokerUrl?: string;
+  username?: string;
+  password?: string;
+  reconnectDelay?: number;
+}
+
+class StompService {
+  private client: Client | null = null;
+  private isConnected: boolean = false;
+  private services: ServiceRegistry = {};
+  private config: StompServiceConfig = {};
+
+  /**
+   * 注册服务
+   * @param name 服务名称
+   * @param service 服务对象
+   */
+  public registerService(name: string, service: any): void {
+    this.services[name] = service;
+    console.log(`[STOMP] 服务已注册：${name}`);
+  }
+
+  /**
+   * 连接 STOMP 服务器
+   * @param config 连接配置
+   */
+  public connect(config: StompServiceConfig = {}): void {
+    if (this.client) {
+      console.warn('[STOMP] 客户端已存在，跳过连接');
+      return;
+    }
+
+    // 保存配置
+    this.config = config;
+
+    // 构建连接地址
+    const protocol = location.protocol === 'https:' ? 'wss://' : 'ws://';
+    // ${location.host}  localhost:5173
+    const host = 'localhost:8080';
+    const brokerUrl = config.brokerUrl || `${protocol}${host}/stomp-endpoint`;
+
+    // STOMP 配置
+    const stompConfig: StompConfig = {
+      brokerURL: brokerUrl,
+      connectHeaders: {
+        login: config.username || '',
+        passcode: config.password || ''
+      },
+      debug: (str: string) => {}, // 关闭调试日志
+      reconnectDelay: config.reconnectDelay || 5000, // 重连延迟（毫秒）
+
+      // 连接成功回调
+      onConnect: (frame: IFrame) => {
+        this.onConnected(frame);
+      },
+
+      // 连接失败回调
+      onStompError: (frame: IFrame) => {
+        console.error('[STOMP] 服务器错误:', frame);
+      },
+
+      // WebSocket 关闭回调
+      onWebSocketClose: () => {
+        this.onConnectionLost();
+      },
+
+      // WebSocket 错误回调
+      onWebSocketError: (evt: Event) => {
+        console.error('[STOMP] WebSocket 错误:', evt);
+        this.handleConnectionError(evt);
+      }
+    };
+
+    try {
+      // 创建 STOMP 客户端
+      this.client = new Client(stompConfig);
+
+      // 激活连接
+      this.client.activate();
+
+      console.log('[STOMP] 正在连接至:', brokerUrl);
+    } catch (error) {
+      console.error('[STOMP] 连接失败:', error);
+      this.handleConnectionError(error);
+    }
+  }
+
+  /**
+   * 断开连接
+   */
+  public disconnect(): void {
+    if (this.client) {
+      this.client.deactivate();
+      this.client = null;
+      this.isConnected = false;
+      console.log('[STOMP] 已断开连接');
+    }
+  }
+
+  /**
+   * 发送消息
+   * @param destination 目标地址
+   * @param cmd 命令
+   * @param value 值
+   */
+  public send(destination: string, cmd: number, value: any): void {
+    if (!this.client || !this.isConnected) {
+      console.error('[STOMP] 客户端未连接，无法发送消息');
+      return;
+    }
+
+    const message: StompMessage = {
+      cmd,
+      value
+    };
+
+    try {
+      this.client.publish({
+        destination,
+        body: JSON.stringify(message)
+      });
+      // console.log(`[STOMP] 发送消息：${destination}`, message);
+    } catch (error) {
+      console.error('[STOMP] 发送消息失败:', error);
+    }
+  }
+
+  /**
+   * 订阅主题
+   * @param destination 目标地址
+   * @param callback 回调函数
+   */
+  public subscribe(destination: string, callback?: (message: StompMessage) => void): void {
+    if (!this.client || !this.isConnected) {
+      console.error('[STOMP] 客户端未连接，无法订阅');
+      return;
+    }
+
+    try {
+      this.client.subscribe(destination, (message: Message) => {
+        this.onMessageArrived(message);
+      });
+
+      console.log(`[STOMP] 订阅成功：${destination}`);
+
+      // 如果有自定义回调，添加到内部消息处理
+      if (callback) {
+        this.services[`_custom_${destination}`] = { callback };
+      }
+    } catch (error) {
+      console.error('[STOMP] 订阅失败:', error);
+    }
+  }
+
+  /**
+   * 取消订阅
+   * @param destination 目标地址
+   */
+  public unsubscribe(destination: string): void {
+    if (!this.client) {
+      return;
+    }
+
+    try {
+      // STOMP 客户端会自动处理取消订阅
+      delete this.services[`_custom_${destination}`];
+      console.log(`[STOMP] 取消订阅：${destination}`);
+    } catch (error) {
+      console.error('[STOMP] 取消订阅失败:', error);
+    }
+  }
+
+  /**
+   * 连接成功回调
+   * @param frame STOMP 帧
+   */
+  private onConnected(frame: IFrame): void {
+    this.isConnected = true;
+    console.log('[STOMP] 连接成功！');
+
+    // 订阅默认主题
+    this.subscribe('/topic/web/read');
+
+    // 通知所有服务 STOMP 已就绪
+    for (const serviceName in this.services) {
+      if (this.services[serviceName].mqttReady || this.services[serviceName].stompReady) {
+        const callback =
+          this.services[serviceName].mqttReady || this.services[serviceName].stompReady;
+        callback.call(this.services[serviceName]);
+      }
+    }
+  }
+
+  /**
+   * 连接丢失回调
+   */
+  private onConnectionLost(): void {
+    this.isConnected = false;
+    console.log('[STOMP] 连接丢失！');
+
+    // 通知所有服务
+    for (const serviceName in this.services) {
+      if (this.services[serviceName].onConnectionLost) {
+        this.services[serviceName].onConnectionLost();
+      }
+    }
+  }
+
+  /**
+   * 消息到达处理
+   * @param message STOMP 消息
+   */
+  private onMessageArrived(message: Message): void {
+    try {
+      const msgStr = message.body || '';
+      const msgObject: StompMessage = JSON.parse(msgStr);
+
+      // console.log('[STOMP] 收到消息:', message.destination, msgObject);
+
+      // 根据命令类型分发到不同的服务
+      this.dispatchMessage(msgObject);
+
+      // 处理自定义回调
+      const customService = this.services[`_custom_${message.destination}`];
+      if (customService && customService.callback) {
+        customService.callback(msgObject);
+      }
+    } catch (error) {
+      console.error('[STOMP] 消息解析失败:', error);
+    }
+  }
+
+  /**
+   * 消息分发
+   * @param msgObject 消息对象
+   */
+  private dispatchMessage(msgObject: StompMessage): void {
+    switch (msgObject.cmd) {
+      case MqttCmd.Channel:
+        // 通道消息
+        if (this.services.channel) {
+          this.services.channel.online(msgObject.value.cid, msgObject.value.online);
+        }
+        break;
+
+      case MqttCmd.NodeInit:
+        // Node 初始化消息
+        if (this.services.node) {
+          this.services.node.msgNodeInit(msgObject.value);
+        }
+        break;
+
+      case MqttCmd.Node:
+        console.log('[STOMP] 收到 Node 更新消息:', msgObject.value);
+        window.vueGlobalFunction(msgObject.value);
+
+        // 单一 Node 更新消息
+        if (this.services.node) {
+          this.services.nod;
+          console.log('[STOMP] 收到 Node 更新消息:', msgObject.value);
+        }
+        break;
+
+      case MqttCmd.User:
+        // 用户登录消息 - 需要验证
+        const uid = this.getCookie('uid');
+        if (msgObject.value.uid !== uid) return;
+        const clientId = this.getCookie('client-id');
+        if (msgObject.value.clientid === clientId) return;
+        // 退出登录
+        window.location.href = window.location.origin + '/logout';
+        break;
+
+      case MqttCmd.Control:
+        // 控制返回
+        this.showToast(msgObject.value);
+        break;
+
+      case MqttCmd.VideoInit:
+        // 视频初始化
+        if (this.services.video) {
+          this.services.video.initVideo(msgObject.value);
+        }
+        break;
+
+      case MqttCmd.VideoCtl:
+        // 视频 PTZ 控制
+        if (this.services.video) {
+          this.services.video.playVideo(msgObject.value);
+        }
+        break;
+
+      case MqttCmd.Lock:
+        // 锁控消息
+        if (this.services.lock) {
+          this.services.lock.onMsg(msgObject.value);
+        }
+        break;
+
+      case MqttCmd.Alarm:
+        // 告警消息
+        if (this.services.node) {
+          if (!this.services.node.runtimes) {
+            this.services.node.runtimes = {};
+          }
+          this.services.node.runtimes[msgObject.value.node.id] = msgObject.value;
+        }
+        if (this.services.banner) {
+          this.services.banner.alarm(msgObject.value);
+        }
+        break;
+
+      case MqttCmd.Info:
+        // 通知和提示
+        this.showToast(msgObject.value);
+        break;
+
+      case MqttCmd.SocketDebugger:
+        if (this.services.SocketDebugger) {
+          this.services.SocketDebugger.onMsg(msgObject.value);
+        }
+        break;
+
+      default:
+        console.warn('[STOMP] 未知命令类型:', msgObject.cmd);
+    }
+  }
+
+  /**
+   * 处理连接错误
+   * @param error 错误对象
+   */
+  private handleConnectionError(error: any): void {
+    console.error('[STOMP] 连接错误:', error);
+
+    // STOMP 客户端会自动重连，这里只需要通知服务
+    for (const serviceName in this.services) {
+      if (this.services[serviceName].onConnectionError) {
+        this.services[serviceName].onConnectionError(error);
+      }
+    }
+  }
+
+  /**
+   * 生成 UUID
+   */
+  private generateUUID(): string {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+      const r = (Math.random() * 16) | 0;
+      const v = c === 'x' ? r : (r & 0x3) | 0x8;
+      return v.toString(16);
+    });
+  }
+
+  /**
+   * 获取 Cookie
+   */
+  private getCookie(cname: string): string {
+    const name = cname + '=';
+    const ca = document.cookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i].trim();
+      if (c.indexOf(name) === 0) {
+        return c.substring(name.length, c.length);
+      }
+    }
+    return '';
+  }
+
+  /**
+   * 设置 Cookie
+   */
+  private setCookie(cname: string, cvalue: string, exdays: number): void {
+    const d = new Date();
+    d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
+    const expires = 'expires=' + d.toUTCString();
+    document.cookie = cname + '=' + cvalue + '; ' + expires;
+  }
+
+  /**
+   * 清除 Cookie
+   */
+  private clearCookie(name: string): void {
+    this.setCookie(name, '', -1);
+  }
+
+  /**
+   * 显示提示消息
+   */
+  private showToast(message: any): void {
+    console.log('[STOMP Toast]:', message);
+
+    // 如果使用了 Element Plus
+    try {
+      import('element-plus').then(({ ElMessage }) => {
+        ElMessage.info(typeof message === 'string' ? message : JSON.stringify(message));
+      });
+    } catch (e) {
+      // 如果没有 Element Plus，使用 alert
+      alert(typeof message === 'string' ? message : JSON.stringify(message));
+    }
+  }
+
+  /**
+   * 获取客户端状态
+   */
+  public getClientStatus(): { connected: boolean; client: Client | null } {
+    return {
+      connected: this.isConnected,
+      client: this.client
+    };
+  }
+}
+
+// 导出单例
+export const stompService = new StompService();
+
+// 默认导出
+export default stompService;

src/views/edit/index.vue

@@ -7,7 +7,8 @@
       @on-return-click="onReturnClick"
       @on-save-click="onSaveClick"
       @on-thumbnail-click="onThumbnailClick"
-    ></mt-edit>
+    >
+    </mt-edit>
   </div>
 </template>
 

src/views/preview/classify/index.vue

@@ -0,0 +1,668 @@
+<template>
+  <div class="layout-container">
+    <el-row :gutter="10">
+      <el-col :span="6">
+        <el-card style="height: 100%">
+          <template #header>节点分区</template>
+
+          <el-row :gutter="10" style="margin-bottom: 2%">
+            <el-col :span="24">
+              <el-input
+                v-model="filterText"
+                style="width: 80%; height: 30px"
+                placeholder="Filter keyword"
+              />
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="10" style="margin-bottom: 4%">
+            <el-col :span="6">
+              <el-button type="primary" size="small" @click="dialogFormVisible = true"
+                >添加</el-button
+              >
+            </el-col>
+            <el-col :span="6">
+              <el-button type="primary" size="small" @click="getAllTree">刷新</el-button>
+            </el-col>
+          </el-row>
+          <div style="height: 65vh">
+            <el-scrollbar height="100%">
+              <el-tree
+                ref="treeRef"
+                style="max-width: 100%; height: 100%"
+                class="filter-tree"
+                :data="treeData"
+                :props="defaultProps"
+                :filter-node-method="filterNode"
+                highlight-current
+                :expand-on-click-node="false"
+                @node-click="handleNodeClick"
+              >
+                <template #default="{ node, data }">
+                  <div class="tree-node">
+                    <span class="tree-node-label">{{ node.label }}</span>
+                    <span class="tree-node-actions">
+                      <el-button link type="primary" size="small" @click.stop="handleAdd(data)"
+                        >添加</el-button
+                      >
+                      <el-button link type="primary" size="small" @click.stop="handleEdit(data)"
+                        >编辑</el-button
+                      >
+                      <el-button link type="primary" size="small" @click.stop="handleDelete(data)"
+                        >删除</el-button
+                      >
+                    </span>
+                  </div>
+                </template>
+              </el-tree>
+            </el-scrollbar>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="11">
+        <el-card style="height: 100%" class="center-car">
+          <template #header>节点列表</template>
+
+          <el-input
+            v-model="centerSearch"
+            style="width: 60%; height: 25px; margin-bottom: 2%"
+            placeholder="节点名称"
+          />
+          <el-tag type="primary" v-if="treeNodeId">选择树节点：{{ treeNodeName }}</el-tag>
+          <el-tag type="info" v-else>未选择树节点</el-tag>
+
+          <el-table
+            ref="centerTableRef"
+            @selection-change="handleCenterSelectionChange"
+            :data="centerFilteredData"
+            style="width: 100%; height: 73vh"
+            row-key="modeId"
+            class="center-table"
+          >
+            <el-table-column type="selection" width="30" />
+            <el-table-column prop="modeId" label="遥 ID" width="70" />
+            <el-table-column prop="name" label="名称" />
+            <el-table-column prop="bType" label="类型" width="100">
+              <template #default="scope">
+                <el-tag type="primary" v-if="scope.row.bType === 1">{{ '遥信' }}</el-tag>
+                <el-tag type="success" v-else-if="scope.row.bType === 2">{{ '遥测' }}</el-tag>
+                <el-tag type="info" v-else-if="scope.row.bType === 3">{{ '遥控' }}</el-tag>
+                <el-tag type="warning" v-else-if="scope.row.bType === 4">{{ '遥调' }}</el-tag>
+                <el-tag type="danger" v-else>{{ '其他' }}</el-tag>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+
+      <!--  -->
+      <el-col :span="7">
+        <el-card style="height: 100%">
+          <template #header>所有节点</template>
+
+          <el-input
+            v-model="search"
+            style="width: 60%; height: 25px; margin-bottom: 2%"
+            placeholder="节点名称"
+          />
+
+          <el-table
+            ref="rightTableRef"
+            @selection-change="handleSelectionChange"
+            :data="filteredData"
+            style="width: 100%; height: 73vh"
+            class="right-table"
+          >
+            <el-table-column type="selection" width="30" />
+            <el-table-column prop="modeId" label="遥ID" width="70" />
+            <el-table-column prop="name" label="名称" />
+
+            <el-table-column
+              v-if="inputTypeTagValue == undefined"
+              prop="bType"
+              label="类型筛选"
+              width="100"
+              :filters="[
+                { text: '遥信', value: 1 },
+                { text: '遥测', value: 2 },
+                { text: '遥控', value: 3 },
+                { text: '遥调', value: 4 },
+                { text: '其他', value: 0 }
+              ]"
+              :filter-method="filterTag"
+              filter-placement="bottom-end"
+              filter-confirm-button-text="确定"
+              filter-reset-button-text="重置"
+            >
+              <template #default="scope">
+                <el-tag type="primary" v-if="scope.row.bType === 1">{{ '遥信' }}</el-tag>
+                <el-tag type="success" v-else-if="scope.row.bType === 2">{{ '遥测' }}</el-tag>
+                <el-tag type="info" v-else-if="scope.row.bType === 3">{{ '遥控' }}</el-tag>
+                <el-tag type="warning" v-else-if="scope.row.bType === 4">{{ '遥调' }}</el-tag>
+                <el-tag type="danger" v-else>{{ '其他' }}</el-tag>
+              </template>
+            </el-table-column>
+
+            <el-table-column v-if="inputTypeTagValue != undefined" label="类型">
+              <template #default="scope">
+                <el-tag type="primary" v-if="scope.row.bType === 1">{{ '遥信' }}</el-tag>
+                <el-tag type="success" v-else-if="scope.row.bType === 2">{{ '遥测' }}</el-tag>
+                <el-tag type="info" v-else-if="scope.row.bType === 3">{{ '遥控' }}</el-tag>
+                <el-tag type="warning" v-else-if="scope.row.bType === 4">{{ '遥调' }}</el-tag>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+  <el-dialog v-model="dialogFormVisible" title="添加树节点" width="500">
+    <el-form :model="form" :rules="rules" ref="formRef">
+      <el-form-item label="子节点名" prop="label">
+        <el-input v-model="form.label" placeholder="请输入子节点名称" />
+      </el-form-item>
+
+      <el-form-item label="父节点">
+        <el-input-tag
+          v-model="form.parentIdLable"
+          disabled
+          placeholder="默认根节点"
+          :tag-type="'primary'"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="form.label = ''">重置</el-button>
+        <el-button type="primary" @click="handleConfirmAdd"> 提交 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, reactive, computed, nextTick } from 'vue';
+import { modelApi } from '@/utils/request';
+import { ElMessage } from 'element-plus';
+import type { FilterNodeMethodFunction, TreeInstance } from 'element-plus';
+import { type DataItem } from '@/components/mt-edit/store/types';
+import type { AnyColumns } from 'element-plus/es/components/table-v2/src/types.mjs';
+import Sortable from 'sortablejs';
+import { fa } from 'element-plus/es/locales.mjs';
+
+interface Tree {
+  [key: string]: any;
+}
+interface GridDataItem {
+  modeId: string;
+  name: string;
+  bType: number;
+}
+
+interface ExtendedParentWindow {
+  globalData: Map<string, DataItem> | Record<string, DataItem>;
+}
+
+interface ExtendedWindow extends Window {
+  draggingItems?: GridDataItem[];
+}
+
+let dialogFormVisible = ref(false);
+const filterText = ref('');
+const treeRef = ref<TreeInstance>();
+const formRef = ref(); // 表单引用
+let inputTypeTagValue = ref<string>();
+const search = ref('');
+const centerSearch = ref(''); // 中间表格搜索
+const rightTableRef = ref(); // 右侧表格引用
+const centerTableRef = ref(); // 中间表格引用
+const gridData = ref<GridDataItem[]>([]);
+const centerData = ref<GridDataItem[]>([]); // 中间表格数据
+let treeNodeId = ref<string | null>(null);
+let treeNodeName = ref<string | null>(null);
+const filterTag = (value: number, row: any) => {
+  return row.bType === value;
+};
+
+const defaultProps = {
+  children: 'children',
+  label: 'label',
+  parentId: 'parentId'
+};
+
+const form = reactive({
+  nodeId: null,
+  label: '',
+  parentIdLable: [] as string[], // 使用字符串数组，用于 el-input-tag
+  parentId: '' as string
+});
+
+// 表单验证规则
+const rules = {
+  label: [
+    { required: true, message: '请输入子节点名称', trigger: 'blur' },
+    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
+  ]
+};
+
+const multipleSelection = ref<GridDataItem[]>([]);
+const handleSelectionChange = (val: GridDataItem[]) => {
+  multipleSelection.value = val;
+  console.log('右侧表格选中:', multipleSelection.value);
+};
+
+const centerSelection = ref<GridDataItem[]>([]);
+const handleCenterSelectionChange = (val: GridDataItem[]) => {
+  centerSelection.value = val;
+  console.log('中间表格选中:', centerSelection.value);
+};
+
+// 中间表格过滤数据
+const centerFilteredData = computed(() => {
+  if (!centerSearch.value) {
+    return centerData.value;
+  }
+  return centerData.value.filter((item) => {
+    return item.name.toLowerCase().includes(centerSearch.value.toLowerCase());
+  });
+});
+
+// 根据搜索条件过滤数据
+const filteredData = computed(() => {
+  if (!search.value) {
+    return gridData.value;
+  }
+  return gridData.value.filter((item) => {
+    return item.name.toLowerCase().includes(search.value.toLowerCase());
+  });
+});
+
+// 获取数据源
+function assembleList() {
+  let code: number | undefined;
+  if (inputTypeTagValue.value !== undefined) code = getNameForNode(inputTypeTagValue.value);
+  gridData.value.splice(0, gridData.value.length);
+
+  let globalDataRaw = (window as unknown as ExtendedParentWindow).globalData;
+
+  if (!globalDataRaw) return;
+
+  // 判断 globalData 是 Map 还是普通对象
+  if (globalDataRaw instanceof Map) {
+    // 如果是 Map 类型
+    globalDataRaw.forEach((data, key) => {
+      if (code == undefined || code == data.bType) {
+        let modeId = key;
+        let name = data.node.name;
+        let bType = data.bType;
+        gridData.value.push({ modeId, name, bType });
+      }
+    });
+  } else {
+    // 如果是普通对象
+    for (const key in globalDataRaw) {
+      if (Object.prototype.hasOwnProperty.call(globalDataRaw, key)) {
+        const data = globalDataRaw[key];
+        if (data && (code == undefined || code == data.bType)) {
+          let modeId = key;
+          let name = data.node.name;
+          let bType = data.bType;
+          gridData.value.push({ modeId, name, bType });
+        }
+      }
+    }
+  }
+}
+
+function getNameForNode(nodeName: string): number {
+  switch (nodeName) {
+    case '遥信':
+      return 1;
+    case '遥测':
+      return 2;
+    case '遥控':
+      return 3;
+    case '遥调':
+      return 4;
+    default:
+      return 0;
+  }
+}
+
+watch(filterText, (val) => {
+  treeRef.value!.filter(val);
+});
+
+const filterNode: FilterNodeMethodFunction = (value: string, data: Tree) => {
+  if (!value) return true;
+  return data.label.includes(value);
+};
+
+// 添加子节点
+const handleAdd = (data: Tree) => {
+  console.log('添加子节点:', data);
+  let tag = ' 父节点： ' + data.label;
+  form.parentIdLable = [tag]; // 赋值给正确的属性
+  form.parentId = data.id;
+  dialogFormVisible.value = true;
+  // addTreeNode(data.parentId, data.label);
+};
+
+const handleEdit = (data: Tree) => {
+  console.log('编辑节点:', data);
+  form.nodeId = data.id;
+  form.label = data.label;
+  dialogFormVisible.value = true;
+};
+
+// 确认添加节点
+const handleConfirmAdd = async () => {
+  if (!formRef.value) return;
+
+  await formRef.value.validate(async (valid: boolean) => {
+    if (!valid) return;
+
+    try {
+      // 从 tag 中提取 parentId
+      if (!form.nodeId) {
+        const parentId = form.parentId ? form.parentId : '0';
+        await addTreeNode(parentId, form.label);
+      } else {
+        await changeTreeNode(form.nodeId, form.label);
+      }
+      dialogFormVisible.value = false;
+      form.label = ''; // 清空表单
+      form.parentId = '';
+      form.nodeId = null;
+      form.parentIdLable = [];
+    } catch (error) {
+      ElMessage.error('添加失败');
+    }
+  });
+};
+
+// 删除节点
+const handleDelete = (data: Tree) => {
+  deleteTreeNode(data.id);
+};
+
+async function getNodeByCls(nodeClassId: string) {
+  let response = await modelApi.getNodeByCls_get(nodeClassId);
+  if (response.code == 200 && response.data != null) {
+    centerData.value.splice(0, centerData.value.length);
+    let globalDataRaw = (window as unknown as ExtendedParentWindow).globalData as Map<
+      string,
+      DataItem
+    >;
+    response.data.forEach((item: any) => {
+      let dataItem = globalDataRaw.get(item.id.toString());
+      if (dataItem) {
+        let data: GridDataItem = {
+          modeId: dataItem.id.toString(),
+          name: dataItem.node.name,
+          bType: dataItem.bType
+        };
+        centerData.value.push(data);
+      }
+    });
+  }
+}
+
+const handleNodeClick = (data: Tree) => {
+  console.log('点击节点:', data);
+  treeNodeId.value = data.id;
+  treeNodeName.value = data.label;
+  getNodeByCls(data.id);
+};
+
+const treeData = ref<Tree[]>([]);
+
+async function changeTreeNode(id: string, label: string) {
+  const response = await modelApi.changeTreeNode_post({ id, label });
+  if (response.code != 200 || response.data == null) {
+    ElMessage.error(response.message);
+  } else {
+    ElMessage.success('修改成功');
+    getAllTree();
+  }
+}
+
+async function deleteTreeNode(id: string) {
+  const response = await modelApi.deleteTreeNode_post({ id });
+  if (response.code != 200 || response.data == null) {
+    ElMessage.error(response.message);
+  } else {
+    ElMessage.success('删除成功');
+    getAllTree();
+  }
+}
+
+async function addTreeNode(parentId: string, label: string) {
+  const response = await modelApi.addTreeNode_post({ parentId, label });
+  if (response.code != 200 || response.data == null) {
+    ElMessage.error(response.message);
+  } else {
+    ElMessage.success('添加成功1');
+    getAllTree();
+  }
+}
+
+async function getAllTree() {
+  const response = await modelApi.allTree_get();
+  if (response.code != 200 || response.data == null) {
+    ElMessage.error(response.message);
+  } else {
+    treeData.value = response.data;
+    // ElMessage.success('接口请求成功');
+  }
+}
+
+async function changeNodeClass(nodeClassId: string, nodeIds: string[]) {
+  const response = await modelApi.changeNodeClass_post({ nodeClassId, nodeIds });
+  if (response.code != 200 || response.data == null) {
+    ElMessage.error(response.message);
+  } else {
+    getNodeByCls(nodeClassId);
+    ElMessage.success('操作成功');
+  }
+}
+
+onMounted(async () => {
+  assembleList();
+  getAllTree();
+  // 初始化拖拽
+  await nextTick();
+  initDraggable();
+});
+
+// 初始化拖拽功能
+const initDraggable = () => {
+  // 使用 class 选择器获取正确的表格 body
+  const rightTableBody = document.querySelector('.right-table .el-table__body-wrapper tbody');
+  const centerTableBody = document.querySelector('.center-table .el-table__body-wrapper tbody');
+
+  console.log('右侧表格 body:', rightTableBody);
+  console.log('中间表格 body:', centerTableBody);
+
+  if (!rightTableBody || !centerTableBody) {
+    console.error('未找到表格元素');
+    return;
+  }
+
+  // 右侧表格拖拽（只能拖出）
+  Sortable.create(rightTableBody as HTMLElement, {
+    group: {
+      name: 'shared',
+      pull: 'clone', // 克隆模式
+      put: false // 不允许放入
+    },
+    animation: 150,
+    ghostClass: 'sortable-ghost',
+    chosenClass: 'sortable-chosen',
+    dragClass: 'sortable-drag',
+    onEnd: (evt: any) => {
+      console.log('右侧表格拖拽结束', evt);
+
+      if (!treeNodeId.value || treeNodeId.value == '') {
+        ElMessage.warning('请先选择树节点');
+        return;
+      }
+
+      // 修复 Sortable.js clone 模式的 bug：
+      // Sortable 会把原响应式节点拖走，留下克隆的 DOM
+      // 需要将响应式节点插回原位置，移除克隆的节点
+      const { target, clone, item } = evt;
+      if (target && clone && item) {
+        // 将原响应式节点插回原位置
+        target.insertBefore(item, clone);
+        // 移除克隆的节点
+        target.removeChild(clone);
+      }
+
+      // 判断是否从右侧表格拖到中间表格
+      const isFromRightTable = evt.from === rightTableBody;
+      const isToCenterTable = evt.to === centerTableBody;
+
+      // 如果是从右侧表格拖出，并且拖到了中间表格
+      if (isFromRightTable && isToCenterTable) {
+        // 优先使用选中的数据，如果没有选中则使用拖拽的行
+        const itemsToAdd =
+          multipleSelection.value.length > 0
+            ? multipleSelection.value
+            : [gridData.value[evt.oldIndex]];
+
+        let addedCount = 0;
+        let nodeIds: string[] = [];
+
+        itemsToAdd.forEach((item) => {
+          if (!centerData.value.find((d) => d.modeId === item.modeId)) {
+            // 添加数据到中间表格
+            // centerData.value.push({ ...item });
+            nodeIds.push(item.modeId);
+            addedCount++;
+          }
+        });
+
+        if (addedCount > 0) {
+          // 已添加的节点 ID:
+          console.log('已添加的节点 ID:', nodeIds);
+          changeNodeClass(treeNodeId.value, nodeIds);
+          ElMessage.success(`已添加 ${addedCount} 项到节点列表`);
+          // 清空右侧表格的选中状态
+          if (rightTableRef.value) {
+            rightTableRef.value.clearSelection();
+          }
+        } else {
+          ElMessage.info('所有选中项已存在');
+        }
+      }
+    }
+  });
+
+  // 中间表格拖拽（可以拖出）
+  Sortable.create(centerTableBody as HTMLElement, {
+    group: {
+      name: 'shared',
+      pull: false, // 允许拖出
+      put: true // 允许放入
+    },
+    // animation: 150,
+    // ghostClass: 'sortable-ghost',
+    // chosenClass: 'sortable-chosen',
+    // dragClass: 'sortable-drag',
+    onAdd: (evt: any) => {
+      console.log('中间表格 onAdd', evt);
+      // 只处理从外部表格（右侧表格）拖入的情况
+      // 中间表格内部拖拽不处理
+      if (evt.from !== centerTableBody) {
+        // 移除 Sortable 自动添加的 DOM 元素
+        // 因为我们会通过 Vue 响应式数据添加
+        const draggedElement = evt.item;
+        if (draggedElement && draggedElement.parentNode) {
+          draggedElement.parentNode.removeChild(draggedElement);
+        }
+      }
+    },
+    onEnd: (evt: any) => {
+      console.log('中间表格拖拽结束', evt);
+      if (evt.from === centerTableBody && evt.to !== centerTableBody) {
+        // 从中间表格拖出
+        centerData.value.splice(evt.oldIndex, 1);
+        ElMessage.info('已移除');
+      }
+    }
+  });
+};
+</script>
+
+<style scoped>
+.layout-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* 修复 el-row gutter 导致的横向滚动条 */
+:deep(.el-row) {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+/* 树节点样式 */
+.tree-node {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-right: 8px;
+}
+
+.tree-node-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tree-node-actions {
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+/* 鼠标悬停时显示操作按钮 */
+.tree-node:hover .tree-node-actions {
+  opacity: 1;
+}
+
+/* 拖拽样式 */
+.sortable-ghost {
+  opacity: 0.4;
+  background-color: #f5f7fa;
+  border: 2px dashed #409eff;
+}
+
+.sortable-chosen {
+  background-color: #ecf5ff;
+  cursor: grabbing !important;
+}
+
+.sortable-drag {
+  opacity: 0.8;
+}
+
+/* 表格行可拖拽样式 */
+:deep(.right-table .el-table__row),
+:deep(.center-car .el-table__row),
+:deep(.center-table .el-table__row) {
+  cursor: grab;
+}
+
+:deep(.right-table .el-table__row:hover),
+:deep(.center-car .el-table__row:hover),
+:deep(.center-table .el-table__row:hover) {
+  /* background-color: #f5f7fa; */
+}
+</style>

src/views/preview/fireControl/alarm/fireExtinguisher.vue

@@ -0,0 +1,201 @@
+<template>
+  <mt-preview ref="MtPreviewRef" @on-event-call-back="onEventCallBack"></mt-preview>
+</template>
+
+<script setup lang="ts">
+// 定义组件名称用于 keep-alive
+defineOptions({
+  name: 'PreviewIndex'
+});
+
+import { MtPreview } from '@/export';
+import { onMounted, ref, reactive, onUnmounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { globalStore } from '@/components/mt-edit/store/global';
+import { genExportJson, useExportJsonToDoneJson } from '@/components/mt-edit/composables';
+import { objectDeepClone, randomString } from '@/components/mt-edit/utils/index';
+import { useRoute } from 'vue-router';
+import { modelApi } from '@/utils/request';
+import type { IDoneJson } from '@/components/mt-edit/store/types';
+const route = useRoute();
+
+console.log('参数：', route.query.screen);
+
+let drawerVisible = ref(false);
+let fileNames: Array<{ id: string; name: string }> = reactive([]);
+let radio = ref('-1');
+// 用于调试：跟踪组件是否被重新创建
+let randomString1 = randomString();
+
+//文件读取
+function fileRead() {
+  fetch('/dataModes/index.json')
+    .then((response) => response.json())
+    .then((data) => {
+      fileNames = Object.assign(data);
+    })
+    .catch((error) => {
+      console.error('获取JSON文件错误：', error);
+    });
+}
+
+const MtPreviewRef = ref<InstanceType<typeof MtPreview>>();
+const onEventCallBack = (type: string, item_id: string) => {
+  console.log(type, item_id);
+
+  if (type == 'test-dialog') {
+    ElMessage.success(`获取到了id:${item_id}`);
+  }
+};
+
+//属性抽取
+function extractValFromProps(props: any) {
+  const result: Record<string, any> = {};
+
+  for (const key in props) {
+    if (props[key] && typeof props[key] === 'object' && 'val' in props[key]) {
+      result[key] = props[key].val;
+    }
+  }
+
+  return result;
+}
+
+//获取组数据
+function loadModeData() {
+  console.log('文件', route.query.screen);
+  console.log('xx:', globalStore.group_ids.get(route.query.screen as string));
+
+  if (globalStore.group_ids.get(route.query.screen as string)) {
+    let json: Array<IDoneJson> = objectDeepClone(
+      globalStore.group_ids.get(route.query.screen as string) || []
+    );
+    console.log('json1', json);
+
+    let endJson = {
+      canvasCfg: globalStore.canvasCfg,
+      gridCfg: globalStore.gridCfg,
+      json: json
+    };
+
+    console.log('endJson：', endJson);
+
+    MtPreviewRef.value?.setImportJson(endJson);
+  }
+}
+
+function initLoad() {
+  let canvasCfg = globalStore.canvasCfg;
+  let gridCfg = globalStore.gridCfg;
+  // let json = globalStore.done_json;
+  let json: Array<any> = objectDeepClone(globalStore.done_json);
+  globalStore.done_json.forEach((item) => {
+    const extractedProps = extractValFromProps(item.props);
+    json.forEach((obj) => {
+      if (obj.id === item.id) {
+        obj.props = extractedProps;
+      }
+    });
+  });
+
+  let endJson = {
+    canvasCfg: canvasCfg,
+    gridCfg: gridCfg,
+    json: json
+  };
+
+  console.log('endJson：', endJson);
+
+  MtPreviewRef.value?.setImportJson(endJson);
+}
+
+async function newLoadModel() {
+  let endJson = {
+    menuType: route.query.screen
+  };
+
+  try {
+    const response = await modelApi.model_getModelData_post(endJson);
+
+    if (response.code == 200) {
+      const result = response.data;
+      const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(result);
+
+      // 对 importDoneJson 集合中每个元素的 props 属性使用 reactive 包装
+      const processedImportDoneJson = importDoneJson.map((item) => {
+        if (item.props) {
+          return {
+            ...item,
+            props: reactive(item.props || {})
+          };
+        }
+        return {
+          ...item,
+          props: reactive(item.props || {})
+        };
+      });
+
+      console.log('processedImportDoneJson:', processedImportDoneJson);
+      MtPreviewRef.value?.setNewImportJson({ canvasCfg, gridCfg, json: processedImportDoneJson });
+      if (globalStore.group_ids.has(route.query.screen as string)) {
+        globalStore.group_ids.delete(route.query.screen as string);
+      }
+      // globalStore.group_ids.set(route.query.screen as string, processedImportDoneJson);
+
+      ElMessage.success('数据模型加载成功');
+    } else {
+      ElMessage.error(`数据模型加载失败: ${response.code} - ${response.message}`);
+    }
+  } catch (error) {
+    console.error('请求错误：', error);
+    ElMessage.error('网络请求失败');
+  }
+}
+
+onUnmounted(() => {
+  console.log('view卸载完毕');
+});
+
+onMounted(() => {
+  console.log('view挂载完毕');
+  newLoadModel();
+});
+
+//加载数据模型
+function loadModel() {
+  console.log('选中：', radio.value, radio);
+  if (!radio.value || radio.value == '-1') {
+    ElMessage.warning('请先选择一个模型文件');
+  }
+  fileNames.forEach((item) => {
+    if (item.id == radio.value) {
+      fetch(`/dataModes/${item.name}`)
+        .then((response) => response.json())
+        .then((data) => {
+          console.log('文件内容：', data);
+          const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(data);
+          globalStore.canvasCfg = canvasCfg;
+          globalStore.gridCfg = gridCfg;
+          globalStore.setGlobalStoreDoneJson(importDoneJson);
+          initLoad();
+        })
+        .catch((error) => {
+          ElMessage.error('获取文件错误：', error);
+        });
+    }
+  });
+}
+
+function test2() {
+  console.log('test3：', globalStore);
+}
+</script>
+
+<style scoped>
+.vertical-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  align-items: flex-start;
+}
+</style>

src/views/preview/fireControl/alarm/fireHydrant.vue

@@ -0,0 +1,202 @@
+<template>
+  <!-- <button @click="test2">查看容器</button> -->
+  <mt-preview ref="MtPreviewRef" @on-event-call-back="onEventCallBack"></mt-preview>
+</template>
+
+<script setup lang="ts">
+// 定义组件名称用于 keep-alive
+defineOptions({
+  name: 'PreviewIndex'
+});
+
+import { MtPreview } from '@/export';
+import { onMounted, ref, reactive, onUnmounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { globalStore } from '@/components/mt-edit/store/global';
+import { genExportJson, useExportJsonToDoneJson } from '@/components/mt-edit/composables';
+import { objectDeepClone, randomString } from '@/components/mt-edit/utils/index';
+import { useRoute } from 'vue-router';
+import { modelApi } from '@/utils/request';
+import type { IDoneJson } from '@/components/mt-edit/store/types';
+const route = useRoute();
+
+console.log('参数：', route.query.screen);
+
+let drawerVisible = ref(false);
+let fileNames: Array<{ id: string; name: string }> = reactive([]);
+let radio = ref('-1');
+// 用于调试：跟踪组件是否被重新创建
+let randomString1 = randomString();
+
+//文件读取
+function fileRead() {
+  fetch('/dataModes/index.json')
+    .then((response) => response.json())
+    .then((data) => {
+      fileNames = Object.assign(data);
+    })
+    .catch((error) => {
+      console.error('获取JSON文件错误：', error);
+    });
+}
+
+const MtPreviewRef = ref<InstanceType<typeof MtPreview>>();
+const onEventCallBack = (type: string, item_id: string) => {
+  console.log(type, item_id);
+
+  if (type == 'test-dialog') {
+    ElMessage.success(`获取到了id:${item_id}`);
+  }
+};
+
+//属性抽取
+function extractValFromProps(props: any) {
+  const result: Record<string, any> = {};
+
+  for (const key in props) {
+    if (props[key] && typeof props[key] === 'object' && 'val' in props[key]) {
+      result[key] = props[key].val;
+    }
+  }
+
+  return result;
+}
+
+//获取组数据
+function loadModeData() {
+  console.log('文件', route.query.screen);
+  console.log('xx:', globalStore.group_ids.get(route.query.screen as string));
+
+  if (globalStore.group_ids.get(route.query.screen as string)) {
+    let json: Array<IDoneJson> = objectDeepClone(
+      globalStore.group_ids.get(route.query.screen as string) || []
+    );
+    console.log('json1', json);
+
+    let endJson = {
+      canvasCfg: globalStore.canvasCfg,
+      gridCfg: globalStore.gridCfg,
+      json: json
+    };
+
+    console.log('endJson：', endJson);
+
+    MtPreviewRef.value?.setImportJson(endJson);
+  }
+}
+
+function initLoad() {
+  let canvasCfg = globalStore.canvasCfg;
+  let gridCfg = globalStore.gridCfg;
+  // let json = globalStore.done_json;
+  let json: Array<any> = objectDeepClone(globalStore.done_json);
+  globalStore.done_json.forEach((item) => {
+    const extractedProps = extractValFromProps(item.props);
+    json.forEach((obj) => {
+      if (obj.id === item.id) {
+        obj.props = extractedProps;
+      }
+    });
+  });
+
+  let endJson = {
+    canvasCfg: canvasCfg,
+    gridCfg: gridCfg,
+    json: json
+  };
+
+  console.log('endJson：', endJson);
+
+  MtPreviewRef.value?.setImportJson(endJson);
+}
+
+async function newLoadModel() {
+  let endJson = {
+    menuType: route.query.screen
+  };
+
+  try {
+    const response = await modelApi.model_getModelData_post(endJson);
+
+    if (response.code == 200) {
+      const result = response.data;
+      const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(result);
+
+      // 对 importDoneJson 集合中每个元素的 props 属性使用 reactive 包装
+      const processedImportDoneJson = importDoneJson.map((item) => {
+        if (item.props) {
+          return {
+            ...item,
+            props: reactive(item.props || {})
+          };
+        }
+        return {
+          ...item,
+          props: reactive(item.props || {})
+        };
+      });
+
+      console.log('processedImportDoneJson:', processedImportDoneJson);
+      MtPreviewRef.value?.setNewImportJson({ canvasCfg, gridCfg, json: processedImportDoneJson });
+      if (globalStore.group_ids.has(route.query.screen as string)) {
+        globalStore.group_ids.delete(route.query.screen as string);
+      }
+      // globalStore.group_ids.set(route.query.screen as string, processedImportDoneJson);
+
+      ElMessage.success('数据模型加载成功');
+    } else {
+      ElMessage.error(`数据模型加载失败: ${response.code} - ${response.message}`);
+    }
+  } catch (error) {
+    console.error('请求错误：', error);
+    ElMessage.error('网络请求失败');
+  }
+}
+
+onUnmounted(() => {
+  console.log('view卸载完毕');
+});
+
+onMounted(() => {
+  console.log('view挂载完毕');
+  newLoadModel();
+});
+
+//加载数据模型
+function loadModel() {
+  console.log('选中：', radio.value, radio);
+  if (!radio.value || radio.value == '-1') {
+    ElMessage.warning('请先选择一个模型文件');
+  }
+  fileNames.forEach((item) => {
+    if (item.id == radio.value) {
+      fetch(`/dataModes/${item.name}`)
+        .then((response) => response.json())
+        .then((data) => {
+          console.log('文件内容：', data);
+          const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(data);
+          globalStore.canvasCfg = canvasCfg;
+          globalStore.gridCfg = gridCfg;
+          globalStore.setGlobalStoreDoneJson(importDoneJson);
+          initLoad();
+        })
+        .catch((error) => {
+          ElMessage.error('获取文件错误：', error);
+        });
+    }
+  });
+}
+
+function test2() {
+  console.log('test3：', globalStore);
+}
+</script>
+
+<style scoped>
+.vertical-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  align-items: flex-start;
+}
+</style>

src/views/preview/fireControl/alarm/indicate.vue

@@ -0,0 +1,168 @@
+<template>
+  <mt-preview ref="MtPreviewRef" @on-event-call-back="onEventCallBack"></mt-preview>
+</template>
+
+<script setup lang="ts">
+// 定义组件名称用于 keep-alive
+defineOptions({
+  name: 'PreviewIndex'
+});
+
+import { MtPreview } from '@/export';
+import { onMounted, ref, reactive, onUnmounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { globalStore } from '@/components/mt-edit/store/global';
+import { genExportJson, useExportJsonToDoneJson } from '@/components/mt-edit/composables';
+import { objectDeepClone, randomString } from '@/components/mt-edit/utils/index';
+import { useRoute } from 'vue-router';
+import { modelApi } from '@/utils/request';
+import type { IDoneJson } from '@/components/mt-edit/store/types';
+
+const route = useRoute();
+console.log('参数：', route.query.screen);
+let drawerVisible = ref(false);
+let fileNames: Array<{ id: string; name: string }> = reactive([]);
+let radio = ref('-1');
+// 用于调试：跟踪组件是否被重新创建
+let randomString1 = randomString();
+
+//文件读取
+function fileRead() {
+  fetch('/dataModes/index.json')
+    .then((response) => response.json())
+    .then((data) => {
+      fileNames = Object.assign(data);
+    })
+    .catch((error) => {
+      console.error('获取JSON文件错误：', error);
+    });
+}
+
+//获取组数据
+function loadModeData() {
+  console.log('文件', route.query.screen);
+  console.log('xx:', globalStore.group_ids.get(route.query.screen as string));
+
+  if (globalStore.group_ids.get(route.query.screen as string)) {
+    let json: Array<IDoneJson> = objectDeepClone(
+      globalStore.group_ids.get(route.query.screen as string) || ([] as IDoneJson[])
+    );
+    console.log('json1', json);
+
+    let endJson = {
+      canvasCfg: globalStore.canvasCfg,
+      gridCfg: globalStore.gridCfg,
+      json: json
+    };
+
+    console.log('endJson：', endJson);
+
+    MtPreviewRef.value?.setImportJson(endJson);
+  }
+}
+
+const MtPreviewRef = ref<InstanceType<typeof MtPreview>>();
+const onEventCallBack = (type: string, item_id: string) => {
+  console.log(type, item_id);
+
+  if (type == 'test-dialog') {
+    ElMessage.success(`获取到了id:${item_id}`);
+  }
+};
+
+//属性抽取
+function extractValFromProps(props: any) {
+  const result: Record<string, any> = {};
+
+  for (const key in props) {
+    if (props[key] && typeof props[key] === 'object' && 'val' in props[key]) {
+      result[key] = props[key].val;
+    }
+  }
+
+  return result;
+}
+
+function initLoad() {
+  let canvasCfg = globalStore.canvasCfg;
+  let gridCfg = globalStore.gridCfg;
+  // let json = globalStore.done_json;
+  let json: Array<any> = objectDeepClone(globalStore.done_json);
+  globalStore.done_json.forEach((item) => {
+    const extractedProps = extractValFromProps(item.props);
+    json.forEach((obj) => {
+      if (obj.id === item.id) {
+        obj.props = extractedProps;
+      }
+    });
+  });
+
+  let endJson = {
+    canvasCfg: canvasCfg,
+    gridCfg: gridCfg,
+    json: json
+  };
+
+  MtPreviewRef.value?.setImportJson(endJson);
+}
+
+async function newLoadModel() {
+  let endJson = {
+    menuType: route.query.screen
+  };
+
+  try {
+    const response = await modelApi.model_getModelData_post(endJson);
+    if (response.code == 200) {
+      const result = await response.data;
+      const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(result);
+
+      // 对 importDoneJson 集合中每个元素的 props 属性使用 reactive 包装
+      const processedImportDoneJson = importDoneJson.map((item) => {
+        if (item.props) {
+          return {
+            ...item,
+            props: reactive(item.props || {})
+          };
+        }
+        return {
+          ...item,
+          props: reactive(item.props || {})
+        };
+      });
+
+      console.log('processedImportDoneJson:', processedImportDoneJson);
+      MtPreviewRef.value?.setNewImportJson({ canvasCfg, gridCfg, json: processedImportDoneJson });
+      if (globalStore.group_ids.has(route.query.screen as string)) {
+        globalStore.group_ids.delete(route.query.screen as string);
+      }
+      // globalStore.group_ids.set(route.query.screen as string, processedImportDoneJson);
+
+      ElMessage.success('数据模型加载成功');
+    } else {
+      ElMessage.error(`数据模型加载失败: ${response.code} - ${response.message}`);
+    }
+  } catch (error) {
+    console.error('请求错误：', error);
+    ElMessage.error('网络请求失败');
+  }
+}
+
+onUnmounted(() => {
+  console.log('view卸载完毕');
+});
+
+onMounted(() => {
+  console.log('view挂载完毕');
+  newLoadModel();
+});
+</script>
+
+<style scoped>
+.vertical-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  align-items: flex-start;
+}
+</style>

src/views/preview/fireControl/alarm/transformer/host.vue

@@ -0,0 +1,91 @@
+<template>
+  <mt-preview ref="MtPreviewRef" @on-event-call-back="onEventCallBack"></mt-preview>
+</template>
+
+<script setup lang="ts">
+// 定义组件名称用于 keep-alive
+defineOptions({
+  name: 'PreviewIndex'
+});
+
+import { MtPreview } from '@/export';
+import { onMounted, ref, reactive, onUnmounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { globalStore } from '@/components/mt-edit/store/global';
+import { useExportJsonToDoneJson } from '@/components/mt-edit/composables';
+import { useRoute } from 'vue-router';
+import { modelApi } from '@/utils/request';
+const route = useRoute();
+
+const MtPreviewRef = ref<InstanceType<typeof MtPreview>>();
+const onEventCallBack = (type: string, item_id: string) => {
+  console.log(type, item_id);
+
+  if (type == 'test-dialog') {
+    ElMessage.success(`获取到了id:${item_id}`);
+  }
+};
+onUnmounted(() => {
+  console.log('view卸载完毕');
+});
+
+async function newLoadModel() {
+  let endJson = {
+    menuType: route.query.screen
+  };
+
+  try {
+    const response = await modelApi.model_getModelData_post(endJson);
+
+    if (response.code == 200) {
+      const result = await response.data;
+      const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(result);
+
+      // 对 importDoneJson 集合中每个元素的 props 属性使用 reactive 包装
+      const processedImportDoneJson = importDoneJson.map((item) => {
+        if (item.props) {
+          return {
+            ...item,
+            props: reactive(item.props || {})
+          };
+        }
+        return {
+          ...item,
+          props: reactive(item.props || {})
+        };
+      });
+
+      console.log('processedImportDoneJson:', processedImportDoneJson);
+      MtPreviewRef.value?.setNewImportJson({ canvasCfg, gridCfg, json: processedImportDoneJson });
+      if (globalStore.group_ids.has(route.query.screen as string)) {
+        globalStore.group_ids.delete(route.query.screen as string);
+      }
+      globalStore.group_ids.set(
+        route.query.screen as string,
+        processedImportDoneJson.map((item) => item.id)
+      );
+
+      ElMessage.success('数据模型加载成功');
+    } else {
+      ElMessage.error(`数据模型加载失败: ${response.code} - ${response.message}`);
+    }
+  } catch (error) {
+    console.error('请求错误：', error);
+    ElMessage.error('网络请求失败');
+  }
+}
+
+onMounted(() => {
+  console.log('view挂载完毕');
+  newLoadModel();
+});
+</script>
+
+<style scoped>
+.vertical-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  align-items: flex-start;
+}
+</style>

src/views/preview/fireControl/alarm/transformer/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <mt-preview ref="MtPreviewRef" @on-event-call-back="onEventCallBack"></mt-preview>
+</template>
+
+<script setup lang="ts">
+// 定义组件名称用于 keep-alive
+defineOptions({
+  name: 'PreviewIndex'
+});
+
+import { MtPreview } from '@/export';
+import { onMounted, ref, reactive, onUnmounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { globalStore } from '@/components/mt-edit/store/global';
+import { useExportJsonToDoneJson } from '@/components/mt-edit/composables';
+import { useRoute } from 'vue-router';
+import { modelApi } from '@/utils/request';
+const route = useRoute();
+
+const MtPreviewRef = ref<InstanceType<typeof MtPreview>>();
+const onEventCallBack = (type: string, item_id: string) => {
+  console.log(type, item_id);
+
+  if (type == 'test-dialog') {
+    ElMessage.success(`获取到了id:${item_id}`);
+  }
+};
+onUnmounted(() => {
+  console.log('view卸载完毕');
+});
+
+async function newLoadModel() {
+  let endJson = {
+    menuType: route.query.screen
+  };
+
+  try {
+    const response = await modelApi.model_getModelData_post(endJson);
+
+    if (response.code == 200) {
+      const result = await response.data;
+      const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(result);
+
+      // 对 importDoneJson 集合中每个元素的 props 属性使用 reactive 包装
+      const processedImportDoneJson = importDoneJson.map((item) => {
+        if (item.props) {
+          return {
+            ...item,
+            props: reactive(item.props || {})
+          };
+        }
+        return {
+          ...item,
+          props: reactive(item.props || {})
+        };
+      });
+
+      console.log('processedImportDoneJson:', processedImportDoneJson);
+      MtPreviewRef.value?.setNewImportJson({ canvasCfg, gridCfg, json: processedImportDoneJson });
+      if (globalStore.group_ids.has(route.query.screen as string)) {
+        globalStore.group_ids.delete(route.query.screen as string);
+      }
+      globalStore.group_ids.set(
+        route.query.screen as string,
+        processedImportDoneJson.map((item) => item.id)
+      );
+
+      ElMessage.success('数据模型加载成功');
+    } else {
+      ElMessage.error(`数据模型加载失败: ${response.code} - ${response.message}`);
+    }
+  } catch (error) {
+    console.error('请求错误：', error);
+    ElMessage.error('网络请求失败');
+  }
+}
+
+onMounted(() => {
+  console.log('view挂载完毕');
+  newLoadModel();
+});
+</script>
+
+<style scoped>
+.vertical-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  align-items: flex-start;
+}
+</style>

src/views/preview/fireControl/alarm/transformer/nitrogen.vue

@@ -0,0 +1,93 @@
+<template>
+  <mt-preview ref="MtPreviewRef" @on-event-call-back="onEventCallBack"></mt-preview>
+</template>
+
+<!-- 2号主变 -->
+
+<script setup lang="ts">
+// 定义组件名称用于 keep-alive
+defineOptions({
+  name: 'PreviewIndex'
+});
+
+import { MtPreview } from '@/export';
+import { onMounted, ref, reactive, onUnmounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { globalStore } from '@/components/mt-edit/store/global';
+import { useExportJsonToDoneJson } from '@/components/mt-edit/composables';
+import { useRoute } from 'vue-router';
+import { modelApi } from '@/utils/request';
+const route = useRoute();
+
+const MtPreviewRef = ref<InstanceType<typeof MtPreview>>();
+const onEventCallBack = (type: string, item_id: string) => {
+  console.log(type, item_id);
+
+  if (type == 'test-dialog') {
+    ElMessage.success(`获取到了id:${item_id}`);
+  }
+};
+onUnmounted(() => {
+  console.log('view卸载完毕');
+});
+
+async function newLoadModel() {
+  let endJson = {
+    menuType: route.query.screen
+  };
+
+  try {
+    const response = await modelApi.model_getModelData_post(endJson);
+
+    if (response.code == 200) {
+      const result = await response.data;
+      const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(result);
+
+      // 对 importDoneJson 集合中每个元素的 props 属性使用 reactive 包装
+      const processedImportDoneJson = importDoneJson.map((item) => {
+        if (item.props) {
+          return {
+            ...item,
+            props: reactive(item.props || {})
+          };
+        }
+        return {
+          ...item,
+          props: reactive(item.props || {})
+        };
+      });
+
+      console.log('processedImportDoneJson:', processedImportDoneJson);
+      MtPreviewRef.value?.setNewImportJson({ canvasCfg, gridCfg, json: processedImportDoneJson });
+      if (globalStore.group_ids.has(route.query.screen as string)) {
+        globalStore.group_ids.delete(route.query.screen as string);
+      }
+      globalStore.group_ids.set(
+        route.query.screen as string,
+        processedImportDoneJson.map((item) => item.id)
+      );
+
+      ElMessage.success('数据模型加载成功');
+    } else {
+      ElMessage.error(`数据模型加载失败: ${response.code} - ${response.message}`);
+    }
+  } catch (error) {
+    console.error('请求错误：', error);
+    ElMessage.error('网络请求失败');
+  }
+}
+
+onMounted(() => {
+  console.log('view挂载完毕');
+  newLoadModel();
+});
+</script>
+
+<style scoped>
+.vertical-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  align-items: flex-start;
+}
+</style>

src/views/preview/lightBoard/index.vue

@@ -0,0 +1,253 @@
+<template>
+  <div class="layout-container">
+    <el-row :gutter="10" style="margin-bottom: 2vh">
+      <el-col :span="24">
+        <el-card class="card-form">
+          <el-form :inline="true" class="form-inline" label-width="auto">
+            <el-form-item label="光字牌 ID">
+              <el-input v-model="formInline.lightBoardId" placeholder="光字牌 ID" clearable />
+            </el-form-item>
+
+            <el-form-item label="光字牌名称">
+              <el-input v-model="formInline.lightBoardName" placeholder="光字牌名称" clearable />
+            </el-form-item>
+
+            <el-form-item style="margin-left: auto">
+              <el-button type="primary">清除</el-button>
+              <el-button type="primary">查询</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="10">
+      <el-col :span="24">
+        <el-card class="card-table">
+          <el-button @click="getLightBoardList" style="margin-bottom: 10px">刷新</el-button>
+          <div style="height: calc(85%)">
+            <el-table
+              :data="lightBoardList"
+              :border="true"
+              :preserve-expanded-content="preserveExpanded"
+              :tooltip-formatter="tableRowFormatter"
+              show-overflow-tooltip
+              style="width: 100%; height: 500px"
+            >
+              <el-table-column type="expand">
+                <template #default="props">
+                  <div m="4">
+                    <p style="display: flex; align-items: center">
+                      实际绑定节点：<el-link style="margin: 0; padding: 0" type="primary">{{
+                        props.row.lightBoardStartNum - 1
+                      }}</el-link>
+                    </p>
+                    <el-button @click="bindStatus(props.row)">绑定状态</el-button>
+
+                    <h3>状态列表</h3>
+                    <el-table :data="props.row.lightBoardStatusVOList" :border="false">
+                      <el-table-column label="状态ID" prop="id" />
+
+                      <el-table-column label="节点ID" prop="nodeId">
+                        <template #default="scope">
+                          <el-tag v-if="scope.row.nodeId" type="primary">{{
+                            scope.row.nodeId
+                          }}</el-tag>
+                          <el-tag v-else type="info">无节点ID</el-tag>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="状态名称" prop="lightBoardStart" />
+                      <el-table-column label="状态权重" prop="weightNum" />
+                      <el-table-column label="当前信号" prop="currentSignal">
+                        <template #default="item">
+                          <el-tag v-if="item.row.currentSignal == false" type="success"
+                            >无信号</el-tag
+                          >
+                          <el-tag v-else type="danger">出现信号</el-tag>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column label="光字牌ID" prop="id" />
+              <el-table-column label="光字牌名称" prop="lightBoardName" />
+              <el-table-column label="绑定状态数量" prop="lightBoardStartNum" />
+
+              <el-table-column
+                prop="lightBoardTags"
+                label="绑定状态名称-tag"
+                width="240"
+                :tooltip-formatter="tableRowTooltipFormatter"
+              >
+                <template #default="{ row }">
+                  <el-tag
+                    v-for="tag in row.lightBoardTags"
+                    :key="tag"
+                    class="tag-item"
+                    type="primary"
+                  >
+                    {{ tag }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+
+              <el-table-column label="权重样式" prop="currentStatarTag" />
+            </el-table>
+          </div>
+
+          <div style="margin-top: 10px">
+            <el-pagination
+              v-model:current-page="currentPage"
+              v-model:page-size="pageSize"
+              :page-sizes="[10, 15, 20]"
+              :pager-count="3"
+              size="default"
+              layout="total,sizes,-> ,prev, pager, next"
+              :total="pageTotal"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+            />
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+
+  <NodeListDialog v-model="dialogTableVisible" />
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElLink, type TableTooltipData } from 'element-plus';
+import { modelApi } from '@/utils/request';
+import NodeListDialog from '@/components/public-compoents/node-list-dialog.vue';
+const dialogTableVisible = ref(false);
+
+let currentPage = ref(1); //当前页
+let pageSize = ref(10); //每页数量
+let pageTotal = ref(0); //总数量
+
+const handleSizeChange = (val: number) => {
+  console.log('size点击:', `${val} items per page`);
+  getLightBoardList();
+};
+const handleCurrentChange = (val: number) => {
+  console.log('Current点击:', `current page: ${val}`);
+  getLightBoardList();
+};
+
+const tableRowFormatter = (data: TableTooltipData<LightBoardList>) => {
+  return `${data.cellValue}: table formatter`;
+};
+
+const tableRowTooltipFormatter = ({ row }: { row: LightBoardList }) => {
+  return row.lightBoardTags.join(', ');
+};
+
+const bindStatus = (row: LightBoardList) => {
+  console.log('key:', dialogTableVisible.value);
+  console.log('绑定状态:', row);
+  dialogTableVisible.value = true;
+};
+
+// 定义光字牌列表接口
+interface LightBoardList {
+  id: string;
+  lightBoardName: string; //光字牌名称
+  stalightBoardStartNumte: string; // 绑定状态数量
+  lightBoardTags: string[]; // 绑定状态名称
+  currentStatarTag: string; // 当前权重的样式
+  lightBoardStatusVOList: LightBoardStatusVO[]; // 绑定状态列表
+}
+
+interface LightBoardStatusVO {
+  id: string; //状态ID
+  lightBoardId: string; //光字牌ID
+  nodeId: string; //节点ID
+  lightBoardStart: string; // 状态名称
+  weightNum: string; // 权重
+  currentSignal: string; // 当前信号
+}
+
+const preserveExpanded = ref(false);
+const formInline = reactive({
+  lightBoardId: '', //光字牌ID
+  lightBoardName: '' //光字牌名称
+});
+
+const lightBoardList = ref<LightBoardList[]>([]);
+async function getLightBoardList() {
+  let endJson = {
+    pageNum: currentPage.value,
+    pageSize: pageSize.value
+  };
+  const response = await modelApi.getLightBoardList_post(endJson);
+  if (response.code != 200 || response.data == null) {
+    ElMessage.error(response.message);
+  } else {
+    lightBoardList.value.length = 0;
+    lightBoardList.value = response.data.list;
+    pageTotal.value = response.data.total;
+    // pageSize.value = response.data.pageSize;
+    currentPage.value = response.data.current;
+    ElMessage.success('接口请求成功');
+  }
+}
+
+onMounted(() => {
+  getLightBoardList();
+});
+</script>
+
+<style lang="less" scoped>
+.layout-container {
+  width: 99%;
+  height: 94vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.form-inline {
+  width: 100%;
+  height: 45px;
+  display: flex;
+  align-items: center; /* 垂直居中 el-form-item */
+}
+
+/* 强制 el-form-item 垂直居中 */
+:deep(.el-form-item) {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+:deep(.el-card__body) {
+  padding: 5px;
+}
+
+.tag-item + .tag-item {
+  margin-left: 5px;
+}
+
+.card-form {
+  //  margin-right: 1vh;
+  padding: 0;
+}
+
+.card-table {
+  height: calc(100% - 60px);
+  overflow: hidden;
+}
+
+/* 第二个卡片容器占满剩余空间 */
+.el-row:nth-child(2) {
+  flex: 1;
+  height: 0;
+}
+
+/* 第二个卡片高度 100% */
+.el-row:nth-child(2) .el-card {
+  height: 100%;
+}
+</style>

src/views/preview/monitoring/partialDischarge/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <mt-preview ref="MtPreviewRef" @on-event-call-back="onEventCallBack"></mt-preview>
+</template>
+
+<script setup lang="ts">
+// 定义组件名称用于 keep-alive
+defineOptions({
+  name: 'homeOverrunMessage'
+});
+
+import { MtPreview } from '@/export';
+import { onMounted, ref, reactive, onUnmounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { globalStore } from '@/components/mt-edit/store/global';
+import { useExportJsonToDoneJson } from '@/components/mt-edit/composables';
+import { useRoute } from 'vue-router';
+import { modelApi } from '@/utils/request';
+const route = useRoute();
+
+const MtPreviewRef = ref<InstanceType<typeof MtPreview>>();
+const onEventCallBack = (type: string, item_id: string) => {
+  console.log(type, item_id);
+
+  if (type == 'test-dialog') {
+    ElMessage.success(`获取到了id:${item_id}`);
+  }
+};
+
+//属性抽取
+function extractValFromProps(props: any) {
+  const result: Record<string, any> = {};
+  for (const key in props) {
+    if (props[key] && typeof props[key] === 'object' && 'val' in props[key]) {
+      result[key] = props[key].val;
+    }
+  }
+
+  return result;
+}
+
+onUnmounted(() => {
+  console.log('view卸载完毕');
+});
+
+onMounted(() => {
+  newLoadModel();
+});
+
+async function newLoadModel() {
+  let endJson = {
+    menuType: route.query.screen
+  };
+
+  try {
+    const response = await modelApi.model_getModelData_post(endJson);
+
+    if (response.code == 200) {
+      const result = await response.data;
+      const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(result);
+
+      // 对 importDoneJson 集合中每个元素的 props 属性使用 reactive 包装
+      const processedImportDoneJson = importDoneJson.map((item) => {
+        if (item.props) {
+          return {
+            ...item,
+            props: reactive(item.props || {})
+          };
+        }
+        return {
+          ...item,
+          props: reactive(item.props || {})
+        };
+      });
+
+      console.log('processedImportDoneJson:', processedImportDoneJson);
+      MtPreviewRef.value?.setNewImportJson({ canvasCfg, gridCfg, json: processedImportDoneJson });
+      if (globalStore.group_ids.has(route.query.screen as string)) {
+        globalStore.group_ids.delete(route.query.screen as string);
+      }
+      globalStore.group_ids.set(
+        route.query.screen as string,
+        processedImportDoneJson.map((item) => item.id)
+      );
+
+      ElMessage.success('数据模型加载成功');
+    } else {
+      ElMessage.error(`数据模型加载失败: ${response.code} - ${response.message}`);
+    }
+  } catch (error) {
+    console.error('请求错误：', error);
+    ElMessage.error('网络请求失败');
+  }
+}
+</script>
+
+<style scoped>
+.vertical-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  align-items: flex-start;
+}
+</style>

src/views/preview/test/index.vue

@@ -51,7 +51,6 @@ const onEventCallBack = (type: string, item_id: string) => {
 //属性抽取
 function extractValFromProps(props: any) {
   const result: Record<string, any> = {};
-
   for (const key in props) {
     if (props[key] && typeof props[key] === 'object' && 'val' in props[key]) {
       result[key] = props[key].val;

webVue/assets/floor-9dacccdc.css

@@ -1 +0,0 @@
-.vertical-radio-group[data-v-67a3c190]{display:flex;flex-direction:column;gap:5px;align-items:flex-start}

webVue/assets/floor-e48b0d0d.js

@@ -1 +0,0 @@
-import{d as q,aP as N,r as C,x as y,$ as R,Z as S,a as b,g as m,h as p,w as _,av as M,F as k,aw as F,O as r,I as d,as as v,o as J,b as L,q as x,t as D,A as T,X as U,i as $,Y as A,_ as O}from"./index-9847718b.js";import{u as E}from"./index-fd059ba6.js";import{M as G}from"./index-868f5209.js";const X={class:"drawer-footer"},Y=q({name:"PreviewIndex",__name:"floor",setup(Z){const g=N();console.log("参数：",g.query.screen);let u=C(!1),V=y([]),a=C("-1");U();const w=C(),h=(s,e)=>{console.log(s,e),s=="test-dialog"&&d.success(`获取到了id:${e}`)};function I(s){const e={};for(const o in s)s[o]&&typeof s[o]=="object"&&"val"in s[o]&&(e[o]=s[o].val);return e}function P(){var l;let s=r.canvasCfg,e=r.gridCfg,o=A(r.done_json);r.done_json.forEach(c=>{const n=I(c.props);o.forEach(i=>{i.id===c.id&&(i.props=n)})});let t={canvasCfg:s,gridCfg:e,json:o};console.log("endJson：",t),(l=w.value)==null||l.setImportJson(t)}async function j(){var e;let s={menuType:g.query.screen};try{const o=await F.model_getModelData_post(s);if(o.code==200){const t=o.data,{canvasCfg:l,gridCfg:c,importDoneJson:n}=E(t),i=n.map(f=>f.props?{...f,props:y(f.props||{})}:{...f,props:y(f.props||{})});console.log("processedImportDoneJson:",i),(e=w.value)==null||e.setNewImportJson({canvasCfg:l,gridCfg:c,json:i}),r.group_ids.has(g.query.screen)&&r.group_ids.delete(g.query.screen),d.success("数据模型加载成功")}else d.error(`数据模型加载失败: ${o.code} - ${o.message}`)}catch(o){console.error("请求错误：",o),d.error("网络请求失败")}}R(()=>{console.log("view卸载完毕")}),S(()=>{console.log("view挂载完毕"),j()});function B(){console.log("选中：",a.value,a),(!a.value||a.value=="-1")&&d.warning("请先选择一个模型文件"),V.forEach(s=>{s.id==a.value&&fetch(`/dataModes/${s.name}`).then(e=>e.json()).then(e=>{console.log("文件内容：",e);const{canvasCfg:o,gridCfg:t,importDoneJson:l}=E(e);r.canvasCfg=o,r.gridCfg=t,r.setGlobalStoreDoneJson(l),P()}).catch(e=>{d.error("获取文件错误：",e)})})}return(s,e)=>{const o=v("el-radio"),t=v("el-radio-group"),l=v("el-button"),c=v("el-drawer");return J(),b(k,null,[m(p(G),{ref_key:"MtPreviewRef",ref:w,onOnEventCallBack:h},null,512),m(c,{modelValue:p(u),"onUpdate:modelValue":e[1]||(e[1]=n=>M(u)?u.value=n:u=n),modal:!1,title:"数据模型文件","modal-penetrable":""},{footer:_(()=>[L("div",X,[m(l,{onClick:B},{default:_(()=>[...e[2]||(e[2]=[x("加载模型11",-1)])]),_:1})])]),default:_(()=>[m(t,{class:"vertical-radio-group",modelValue:p(a),"onUpdate:modelValue":e[0]||(e[0]=n=>M(a)?a.value=n:a=n)},{default:_(()=>[x(D(p(u))+" ",1),(J(!0),b(k,null,T(p(V),n=>(J(),$(o,{key:n.id,label:n.id},{default:_(()=>[x(D(n.name),1)]),_:2},1032,["label"]))),128))]),_:1},8,["modelValue"])]),_:1},8,["modelValue"])],64)}}});const Q=O(Y,[["__scopeId","data-v-67a3c190"]]);export{Q as default};

webVue/assets/globalMessage-6b7e4986.css

@@ -1 +0,0 @@
-.vertical-radio-group[data-v-bdccb96b]{display:flex;flex-direction:column;gap:5px;align-items:flex-start}

webVue/assets/globalMessage-c4d3facd.js

@@ -1 +0,0 @@
-import{d as m,aP as v,r as M,$ as b,Z as y,aw as w,x as p,O as c,I as a,i as J,h as x,o as k,_ as q}from"./index-9847718b.js";import{u as C}from"./index-fd059ba6.js";import{M as D}from"./index-868f5209.js";const I=m({name:"globalMessage",__name:"globalMessage",setup(h){const r=v();console.log("参数11：",r.query.screen);const l=M(),u=(n,o)=>{console.log(n,o),n=="test-dialog"&&a.success(`获取到了id:${o}`)};b(()=>{console.log("view卸载完毕")}),y(()=>{d()});async function d(){var o;let n={menuType:r.query.screen};try{const s=await w.model_getModelData_post(n);if(s.code==200){const _=await s.data,{canvasCfg:g,gridCfg:i,importDoneJson:f}=C(_),t=f.map(e=>e.props?{...e,props:p(e.props||{})}:{...e,props:p(e.props||{})});console.log("processedImportDoneJson:",t),(o=l.value)==null||o.setNewImportJson({canvasCfg:g,gridCfg:i,json:t}),c.group_ids.has(r.query.screen)&&c.group_ids.delete(r.query.screen),c.group_ids.set(r.query.screen,t.map(e=>e.id)),a.success("数据模型加载成功")}else a.error(`数据模型加载失败: ${s.code} - ${s.message}`)}catch(s){console.error("请求错误：",s),a.error("网络请求失败")}}return(n,o)=>(k(),J(x(D),{ref_key:"MtPreviewRef",ref:l,onOnEventCallBack:u},null,512))}});const $=q(I,[["__scopeId","data-v-bdccb96b"]]);export{$ as default};

webVue/assets/homeExceptionFacility-39dc115d.js

@@ -1 +0,0 @@
-import{d as g,aP as v,r as y,$ as w,Z as x,aw as M,x as l,O as c,I as a,i as h,h as E,o as J,_ as k}from"./index-9847718b.js";import{u as C}from"./index-fd059ba6.js";import{M as D}from"./index-868f5209.js";const I=g({__name:"homeExceptionFacility",setup(q){const n=v(),p=y(),d=(r,o)=>{console.log(r,o),r=="test-dialog"&&a.success(`获取到了id:${o}`)};w(()=>{console.log("view卸载完毕")}),x(()=>{i()});async function i(){var o;let r={menuType:n.query.screen};try{const s=await M.model_getModelData_post(r);if(s.code==200){const u=await s.data,{canvasCfg:_,gridCfg:f,importDoneJson:m}=C(u),t=m.map(e=>e.props?{...e,props:l(e.props||{})}:{...e,props:l(e.props||{})});console.log("processedImportDoneJson:",t),(o=p.value)==null||o.setNewImportJson({canvasCfg:_,gridCfg:f,json:t}),c.group_ids.has(n.query.screen)&&c.group_ids.delete(n.query.screen),c.group_ids.set(n.query.screen,t.map(e=>e.id)),a.success("数据模型加载成功")}else a.error(`数据模型加载失败: ${s.code} - ${s.message}`)}catch(s){console.error("请求错误：",s),a.error("网络请求失败")}}return(r,o)=>(J(),h(E(D),{ref_key:"MtPreviewRef",ref:p,onOnEventCallBack:d},null,512))}});const b=k(I,[["__scopeId","data-v-d872abad"]]);export{b as default};

webVue/assets/homeExceptionFacility-5fec4994.css

@@ -1 +0,0 @@
-.vertical-radio-group[data-v-d872abad]{display:flex;flex-direction:column;gap:5px;align-items:flex-start}

webVue/assets/homeOverrunMessage-0e75fc3b.js

@@ -1 +0,0 @@
-import{d as g,aP as v,r as M,$ as w,Z as y,aw as h,x as u,O as c,I as a,i as J,h as x,o as O,_ as k}from"./index-9847718b.js";import{u as C}from"./index-fd059ba6.js";import{M as D}from"./index-868f5209.js";const I=g({name:"homeOverrunMessage",__name:"homeOverrunMessage",setup(q){const n=v(),p=M(),l=(r,o)=>{console.log(r,o),r=="test-dialog"&&a.success(`获取到了id:${o}`)};w(()=>{console.log("view卸载完毕")}),y(()=>{d()});async function d(){var o;let r={menuType:n.query.screen};try{const s=await h.model_getModelData_post(r);if(s.code==200){const _=await s.data,{canvasCfg:f,gridCfg:i,importDoneJson:m}=C(_),t=m.map(e=>e.props?{...e,props:u(e.props||{})}:{...e,props:u(e.props||{})});console.log("processedImportDoneJson:",t),(o=p.value)==null||o.setNewImportJson({canvasCfg:f,gridCfg:i,json:t}),c.group_ids.has(n.query.screen)&&c.group_ids.delete(n.query.screen),c.group_ids.set(n.query.screen,t.map(e=>e.id)),a.success("数据模型加载成功")}else a.error(`数据模型加载失败: ${s.code} - ${s.message}`)}catch(s){console.error("请求错误：",s),a.error("网络请求失败")}}return(r,o)=>(O(),J(x(D),{ref_key:"MtPreviewRef",ref:p,onOnEventCallBack:l},null,512))}});const $=k(I,[["__scopeId","data-v-436f0bc5"]]);export{$ as default};

webVue/assets/homeOverrunMessage-ebd2f52c.css

@@ -1 +0,0 @@
-.vertical-radio-group[data-v-436f0bc5]{display:flex;flex-direction:column;gap:5px;align-items:flex-start}

webVue/assets/host-60fa1e0a.js

@@ -1 +0,0 @@
-import{d as B,aP as N,r as C,x as y,$ as R,Z as S,a as b,g as m,h as _,w as g,av as h,F as M,aw as F,O as a,I as i,as as v,o as J,b as L,q as x,t as k,A as T,X as U,i as $,Y as A,_ as O}from"./index-9847718b.js";import{u as D}from"./index-fd059ba6.js";import{M as G}from"./index-868f5209.js";const X={class:"drawer-footer"},Y=B({name:"PreviewIndex",__name:"host",setup(Z){const f=N();console.log("参数：",f.query.screen);let p=C(!1),V=y([]),r=C("-1");U();const w=C(),E=(s,e)=>{console.log(s,e),s=="test-dialog"&&i.success(`获取到了id:${e}`)};function I(s){const e={};for(const o in s)s[o]&&typeof s[o]=="object"&&"val"in s[o]&&(e[o]=s[o].val);return e}function P(){var l;let s=a.canvasCfg,e=a.gridCfg,o=A(a.done_json);a.done_json.forEach(c=>{const n=I(c.props);o.forEach(u=>{u.id===c.id&&(u.props=n)})});let t={canvasCfg:s,gridCfg:e,json:o};console.log("endJson：",t),(l=w.value)==null||l.setImportJson(t)}async function j(){var e;let s={menuType:f.query.screen};try{const o=await F.model_getModelData_post(s);if(o.code==200){const t=o.data,{canvasCfg:l,gridCfg:c,importDoneJson:n}=D(t),u=n.map(d=>d.props?{...d,props:y(d.props||{})}:{...d,props:y(d.props||{})});console.log("processedImportDoneJson:",u),(e=w.value)==null||e.setNewImportJson({canvasCfg:l,gridCfg:c,json:u}),a.group_ids.has(f.query.screen)&&a.group_ids.delete(f.query.screen),a.group_ids.set(f.query.screen,u.map(d=>d.id)),i.success("数据模型加载成功")}else i.error(`数据模型加载失败: ${o.code} - ${o.message}`)}catch(o){console.error("请求错误：",o),i.error("网络请求失败")}}R(()=>{console.log("view卸载完毕")}),S(()=>{console.log("view挂载完毕"),j()});function q(){console.log("选中：",r.value,r),(!r.value||r.value=="-1")&&i.warning("请先选择一个模型文件"),V.forEach(s=>{s.id==r.value&&fetch(`/dataModes/${s.name}`).then(e=>e.json()).then(e=>{console.log("文件内容：",e);const{canvasCfg:o,gridCfg:t,importDoneJson:l}=D(e);a.canvasCfg=o,a.gridCfg=t,a.setGlobalStoreDoneJson(l),P()}).catch(e=>{i.error("获取文件错误：",e)})})}return(s,e)=>{const o=v("el-radio"),t=v("el-radio-group"),l=v("el-button"),c=v("el-drawer");return J(),b(M,null,[m(_(G),{ref_key:"MtPreviewRef",ref:w,onOnEventCallBack:E},null,512),m(c,{modelValue:_(p),"onUpdate:modelValue":e[1]||(e[1]=n=>h(p)?p.value=n:p=n),modal:!1,title:"数据模型文件","modal-penetrable":""},{footer:g(()=>[L("div",X,[m(l,{onClick:q},{default:g(()=>[...e[2]||(e[2]=[x("加载模型11",-1)])]),_:1})])]),default:g(()=>[m(t,{class:"vertical-radio-group",modelValue:_(r),"onUpdate:modelValue":e[0]||(e[0]=n=>h(r)?r.value=n:r=n)},{default:g(()=>[x(k(_(p))+" ",1),(J(!0),b(M,null,T(_(V),n=>(J(),$(o,{key:n.id,label:n.id},{default:g(()=>[x(k(n.name),1)]),_:2},1032,["label"]))),128))]),_:1},8,["modelValue"])]),_:1},8,["modelValue"])],64)}}});const Q=O(Y,[["__scopeId","data-v-d0f0d48f"]]);export{Q as default};

webVue/assets/host-bce9ed75.css

@@ -1 +0,0 @@
-.vertical-radio-group[data-v-d0f0d48f]{display:flex;flex-direction:column;gap:5px;align-items:flex-start}

webVue/assets/index-00692901.js

@@ -1 +0,0 @@
-import{d as D,r as p,x as N,$ as I,Z as O,a as M,q as u,t as v,h as i,b as j,g as f,w as c,av as C,F as y,O as s,Y as R,as as g,o as x,A as F,X as U,I as w,i as L,_ as T}from"./index-9847718b.js";import{u as $}from"./index-fd059ba6.js";import{M as q}from"./index-868f5209.js";const A={class:"drawer-footer"},G=D({name:"PreviewIndex",__name:"index",setup(X){let l=p(!1),m=N([]),a=p("-1"),E=U();function J(){fetch("/dataModes/index.json").then(o=>o.json()).then(o=>{m=Object.assign(o)}).catch(o=>{console.error("获取JSON文件错误：",o)})}const b=p(),B=(o,e)=>{console.log(o,e),o=="test-dialog"&&w.success(`获取到了id:${e}`)};function P(o){const e={};for(const n in o)o[n]&&typeof o[n]=="object"&&"val"in o[n]&&(e[n]=o[n].val);return e}function k(){var d;let o=s.canvasCfg,e=s.gridCfg,n=R(s.done_json);s.done_json.forEach(_=>{const t=P(_.props);n.forEach(V=>{V.id===_.id&&(V.props=t)})});let r={canvasCfg:o,gridCfg:e,json:n};console.log("endJson：",r),(d=b.value)==null||d.setImportJson(r)}I(()=>{console.log("view卸载完毕")}),O(()=>{console.log("view挂载完毕"),J(),k()});function S(){console.log("选中：",a.value,a),(!a.value||a.value=="-1")&&w.warning("请先选择一个模型文件"),m.forEach(o=>{o.id==a.value&&fetch(`/dataModes/${o.name}`).then(e=>e.json()).then(e=>{console.log("文件内容：",e);const{canvasCfg:n,gridCfg:r,importDoneJson:d}=$(e);s.canvasCfg=n,s.gridCfg=r,s.setGlobalStoreDoneJson(d),k()}).catch(e=>{w.error("获取文件错误：",e)})})}function h(){console.log("test3：",s)}return(o,e)=>{const n=g("el-button"),r=g("el-radio"),d=g("el-radio-group"),_=g("el-drawer");return x(),M(y,null,[u(v(i(E))+" ",1),j("button",{onClick:h},"查看pina数据"),f(n,{type:"primary",onClick:e[0]||(e[0]=t=>C(l)?l.value=!0:l=!0)},{default:c(()=>[...e[3]||(e[3]=[u(" 数据文件222 ",-1)])]),_:1}),f(i(q),{ref_key:"MtPreviewRef",ref:b,onOnEventCallBack:B},null,512),f(_,{modelValue:i(l),"onUpdate:modelValue":e[2]||(e[2]=t=>C(l)?l.value=t:l=t),modal:!1,title:"数据模型文件","modal-penetrable":""},{footer:c(()=>[j("div",A,[f(n,{onClick:S},{default:c(()=>[...e[4]||(e[4]=[u("加载模型11",-1)])]),_:1})])]),default:c(()=>[f(d,{class:"vertical-radio-group",modelValue:i(a),"onUpdate:modelValue":e[1]||(e[1]=t=>C(a)?a.value=t:a=t)},{default:c(()=>[u(v(i(l))+" ",1),(x(!0),M(y,null,F(i(m),t=>(x(),L(r,{key:t.id,label:t.id},{default:c(()=>[u(v(t.name),1)]),_:2},1032,["label"]))),128))]),_:1},8,["modelValue"])]),_:1},8,["modelValue"])],64)}}});const H=T(G,[["__scopeId","data-v-d1648c7a"]]);export{H as default};

webVue/assets/index-05e1f753.css

@@ -1 +0,0 @@
-.common-layout[data-v-635be2c1]{height:100vh;display:flex;align-items:center;justify-content:center}.layout-container[data-v-635be2c1]{width:100%;height:100vh;display:flex;flex-direction:column}.header-part[data-v-635be2c1]{height:18.75vh;background-color:#b3c0d1;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:#333}.main-part[data-v-635be2c1]{height:74.21875vh;background-color:#e9eef3;display:flex;align-items:center;justify-content:center;font-size:18px;color:#333}.footer-part[data-v-635be2c1]{height:7.03125vh;background-color:#d3dce6;padding:0!important;margin:0!important;color:#333;margin-top:0}.footer-part-col[data-v-635be2c1]{height:100%;background-color:#333;color:#606266;border:3px solid rgb(206,12,12);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}