xq
/
maotu-webtopo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

使用自己的数据源

Browse Source
dev_xq_0.0.1
谢庆 1 week ago
parent 8a3837f511
commit ce92769b3a
7 changed files with 126 additions and 93 deletions
Show Stats Download Patch File Download Diff File

5
src/App.vue
Unescape Escape View File

@ -471,6 +471,11 @@ leftAsideStore.registerConfig('vue公共组件', [
label: '火灾报警主机' label: '火灾报警主机'
} }
] ]
},
isSwitch: {
type: 'switch',
val: true,
title: '辅助框'
} }
} }
}, },

8
src/components/mt-edit/components/layout/right-aside/select-item-props-setting.vue
Unescape Escape View File

@ -194,6 +194,7 @@ import { ref, computed, onMounted } from 'vue';
import { modelApi, BASE_URL } from '@/utils/request'; import { modelApi, BASE_URL } from '@/utils/request';
import imageModel from '@/components/mt-edit/components/layout/base-panel/imageModel.vue'; import imageModel from '@/components/mt-edit/components/layout/base-panel/imageModel.vue';
import { globalStore } from '@/components/mt-edit/store/global'; import { globalStore } from '@/components/mt-edit/store/global';
import { type DataItem } from '@/components/mt-edit/store/types';
type SelectItemPropsSettingProps = { type SelectItemPropsSettingProps = {
propsInfo: ILeftAsideConfigItemPublicProps | undefined; propsInfo: ILeftAsideConfigItemPublicProps | undefined;
}; };
@ -215,7 +216,7 @@ interface RecServiceType {
} }
interface ExtendedParentWindow extends Window { interface ExtendedParentWindow extends Window {
Rec?: RecServiceType; globalData: Map<string, DataItem> | Record<string, DataItem>;
} }
const selectItemPropsSettingProps = withDefaults(defineProps<SelectItemPropsSettingProps>(), {}); const selectItemPropsSettingProps = withDefaults(defineProps<SelectItemPropsSettingProps>(), {});
@ -327,14 +328,15 @@ const filteredData = computed(() => {
}); });
}); });
// 获取数据源
function assembleList() { function assembleList() {
// debugger; // debugger;
let code: number | undefined; let code: number | undefined;
if (inputTypeTagValue.value !== undefined) code = getNameForNode(inputTypeTagValue.value); if (inputTypeTagValue.value !== undefined) code = getNameForNode(inputTypeTagValue.value);
gridData.splice(0, gridData.length); gridData.splice(0, gridData.length);
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 类型 // 安全地访问 globalData，兼容对象和 Map 类型
// const globalDataRaw = (window as any).globalData; // const globalDataRaw = (window as any).globalData;

82
src/components/vue-xq-test/vue-run-info.vue
Unescape Escape View File

@ -4,45 +4,45 @@
<h2 class="cardHead">运行信息</h2> <h2 class="cardHead">运行信息</h2>
<div class="cardBody" v-if="globalOverviewBool"> <div class="cardBody" v-if="globalOverviewBool">
<el-row :gutter="0" style="display: flex; align-items: center"> <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
<el-col :span="8" :offset="4"> 设备状态： </el-col> <el-col :span="9" :offset="4"> 设备状态： </el-col>
<el-col :span="4"> <el-col :span="4">
<el-tag type="primary">正常/中断</el-tag> <el-tag type="primary" v-if="isSwitch">正常/中断</el-tag>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="0" style="display: flex; align-items: center"> <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
<el-col :span="8" :offset="4"> 温度： </el-col> <el-col :span="9" :offset="4"> 温度： </el-col>
<el-col :span="4"> <el-col :span="4">
<el-tag type="primary">23℃</el-tag> <el-tag type="primary" v-if="isSwitch">23℃</el-tag>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="0" style="display: flex; align-items: center"> <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
<el-col :span="8" :offset="4"> 湿度： </el-col> <el-col :span="9" :offset="4"> 湿度： </el-col>
<el-col :span="4"> <el-col :span="4">
<el-tag type="primary">45%RH</el-tag> <el-tag type="primary" v-if="isSwitch">45%RH</el-tag>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="0" style="display: flex; align-items: center"> <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
<el-col :span="8" :offset="4"> 风力： </el-col> <el-col :span="9" :offset="4"> 风力： </el-col>
<el-col :span="4"> <el-col :span="4">
<el-tag type="primary">三级（5m/s）</el-tag> <el-tag type="primary" v-if="isSwitch">三级（5m/s）</el-tag>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="0" style="display: flex; align-items: center"> <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
<el-col :span="8" :offset="4"> 风向： </el-col> <el-col :span="9" :offset="4"> 风向： </el-col>
<el-col :span="4"> <el-col :span="4">
<el-tag type="primary">东风</el-tag> <el-tag type="primary" v-if="isSwitch">东风</el-tag>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="0" style="display: flex; align-items: center"> <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
<el-col :span="8" :offset="4"> 雨量： </el-col> <el-col :span="9" :offset="4"> 雨量： </el-col>
<el-col :span="4"> <el-col :span="4">
<el-tag type="primary">20mm</el-tag> <el-tag type="primary" v-if="isSwitch">20mm</el-tag>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -51,18 +51,18 @@
<el-row style="display: flex; align-items: center"> <el-row style="display: flex; align-items: center">
<el-col :span="24">火灾报警系统</el-col> <el-col :span="24">火灾报警系统</el-col>
</el-row> </el-row>
<el-row :gutter="0" style="display: flex; align-items: center"> <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
<el-col :span="8" :offset="1" <el-col :span="9" :offset="1"
>设备状态 >设备状态
<el-tag type="primary">正常/故障</el-tag> <el-tag type="primary" v-if="isSwitch">正常/故障</el-tag>
</el-col> </el-col>
<el-col :span="8" :offset="2" <el-col :span="9" :offset="2"
>通信状态 >通信状态
<el-tag type="primary">正常/中断</el-tag> <el-tag type="primary" v-if="isSwitch">正常/中断</el-tag>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="0" style="display: flex; align-items: center"> <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
<el-col :span="22" :offset="1" <el-col :span="22" :offset="1"
>火灾总告警 >火灾总告警
<!-- 带边框的蓝色圆 --> <!-- 带边框的蓝色圆 -->
@ -76,22 +76,22 @@
<el-col :span="24">2号主变灭火系统（排油注氮灭火）</el-col> <el-col :span="24">2号主变灭火系统（排油注氮灭火）</el-col>
</el-row> </el-row>
<el-row :gutter="0" style="display: flex; align-items: center"> <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
<el-col :span="7" :offset="1"> <el-col :span="7" :offset="1">
启动方式 启动方式
<el-tag type="primary">自动/手动</el-tag> <el-tag type="primary" v-if="isSwitch">自动/手动</el-tag>
</el-col> </el-col>
<el-col :span="7" :offset="1" <el-col :span="7" :offset="1"
>设备状态 >设备状态
<el-tag type="primary">正常/故障</el-tag> <el-tag type="primary" v-if="isSwitch">正常/故障</el-tag>
</el-col> </el-col>
<el-col :span="7" :offset="1" <el-col :span="7" :offset="1"
>通信状态 >通信状态
<el-tag type="primary">正常/中断</el-tag> <el-tag type="primary" v-if="isSwitch">正常/中断</el-tag>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="0" style="display: flex; align-items: center"> <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
<el-col :span="7" :offset="1" <el-col :span="7" :offset="1"
>火灾总告警 >火灾总告警
<div class="blue-circle redBordered"></div> <div class="blue-circle redBordered"></div>
@ -117,7 +117,7 @@
</el-row> </el-row>
<el-row :gutter="0" style="display: flex; align-items: center; margin-top: 8px"> <el-row :gutter="0" style="display: flex; align-items: center; margin-top: 8px">
<el-col :span="5" :offset="1">灭火手动操作</el-col> <el-col :span="7" :offset="1">灭火手动操作</el-col>
<el-col :span="12"> <el-col :span="12">
<el-button type="primary" size="small">手动启动</el-button> <el-button type="primary" size="small">手动启动</el-button>
<el-button type="primary" size="small">紧急停止</el-button> <el-button type="primary" size="small">紧急停止</el-button>
@ -126,25 +126,25 @@
</div> </div>
<div class="cardBody" v-if="firePoliceBool"> <div class="cardBody" v-if="firePoliceBool">
<el-row :gutter="0" style="display: flex; align-items: center"> <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
<el-col :span="8" :offset="4"> 设备状态： </el-col> <el-col :span="9" :offset="4"> 设备状态： </el-col>
<el-col :span="4"> <el-col :span="4">
<el-tag type="primary">正常/故障</el-tag> <el-tag type="primary" v-if="isSwitch">正常/故障</el-tag>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="0" style="display: flex; align-items: center"> <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
<el-col :span="8" :offset="4"> 通信状态： </el-col> <el-col :span="9" :offset="4"> 通信状态： </el-col>
<el-col :span="4"> <el-col :span="4">
<el-tag type="primary">正常/中断</el-tag> <el-tag type="primary" v-if="isSwitch">正常/中断</el-tag>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="0" style="display: flex; align-items: center"> <el-row :gutter="0" style="display: flex; align-items: center; margin-bottom: 2%">
<el-col :span="8" :offset="4"> 电源状态：</el-col> <el-col :span="9" :offset="4"> 电源状态：</el-col>
<el-col :span="4"> <el-col :span="4">
<!-- 主供电源工作/备供电源工作/电源中断 --> <!-- 主供电源工作/备供电源工作/电源中断 -->
<el-tag type="primary">主供电源工作</el-tag> <el-tag type="primary" v-if="isSwitch"> 主供电源工作 </el-tag>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -206,6 +206,10 @@ const props = defineProps({
dataSource: { dataSource: {
type: String, type: String,
default: '--' default: '--'
},
isSwitch: {
type: Boolean,
default: true
} }
}); });

1
src/components/vue-xq-test/vue-signal-gaudy.vue
Unescape Escape View File

@ -1,4 +1,5 @@
<template> <template>
<!-- 四遥：遥信 -->
<!-- <div style="display: flex; gap: 10px; align-items: center"> <!-- <div style="display: flex; gap: 10px; align-items: center">
<el-popover <el-popover
:width="300" :width="300"

34
src/components/vue-xq-test/vue-synthesize-table.vue
Unescape Escape View File

@ -56,6 +56,7 @@ import { ElMessage } from 'element-plus';
import { computed, onMounted, onUnmounted, ref, watch, reactive } from 'vue'; import { computed, onMounted, onUnmounted, ref, watch, reactive } from 'vue';
import { modelApi } from '@/utils/request'; import { modelApi } from '@/utils/request';
import emitter from '@/utils/emitter'; import emitter from '@/utils/emitter';
import { type DataItem } from '@/components/mt-edit/store/types';
const loading = ref(false); const loading = ref(false);
@ -74,9 +75,14 @@ interface RecServiceType {
}; };
}; };
} }
// interface ExtendedParentWindow extends Window {
// Rec?: RecServiceType;
// }
interface ExtendedParentWindow extends Window { interface ExtendedParentWindow extends Window {
Rec?: RecServiceType; globalData: Map<string, DataItem> | Record<string, DataItem>;
} }
interface User { interface User {
id: string; id: string;
name: string; name: string;
@ -158,8 +164,9 @@ let targetDataTable: FloorNode[] = [];
let initArrs: any = {}; let initArrs: any = {};
//数据初始化 //数据初始化
async function dataInit() { async function dataInit() {
debugger; // 从 window 获取 globalData（可能是 Map 或对象）
initArrs = (window.parent as ExtendedParentWindow).Rec?.service.node.runtimes; const globalDataRaw = (window as unknown as ExtendedParentWindow).globalData;
// 清空数组 // 清空数组
arr.value = []; arr.value = [];
targetDataTable = []; targetDataTable = [];
@ -177,18 +184,27 @@ async function dataInit() {
let eqpList: EquipmentNode[] = []; let eqpList: EquipmentNode[] = [];
floor.eqpList.forEach((eqp: any) => { floor.eqpList.forEach((eqp: any) => {
let currentState = 1; 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; if (getNodeData(eqp.nodes[1])?.double != 1) currentState = 1;
else if (initArrs[eqp.nodes[2]].double == 1) currentState = 2; else if (getNodeData(eqp.nodes[2])?.double == 1) currentState = 2;
else if (initArrs[eqp.nodes[1]].double == 1) currentState = 0; else if (getNodeData(eqp.nodes[1])?.double == 1) currentState = 0;
let eqpNode: EquipmentNode = { let eqpNode: EquipmentNode = {
id: eqp.id, id: eqp.id,
name: initArrs[eqp.nodes[0]].node.name || '', name: getNodeData(eqp.nodes[0])?.node?.name || '',
eState: initArrs[eqp.nodes[0]].double || 0, eState: getNodeData(eqp.nodes[0])?.double || 0,
currentState: currentState, currentState: currentState,
isBinding: eqp.isBinding, isBinding: eqp.isBinding,
operation: initArrs[eqp.nodes[3]].double == 1 operation: getNodeData(eqp.nodes[3])?.double == 1
}; };
eqpList.push(eqpNode); eqpList.push(eqpNode);
}); });

49
src/utils/globalUtils.ts
Unescape Escape View File

@ -3,13 +3,12 @@ import { type DataItem } from '@/components/mt-edit/store/types';
import emitter from '@/utils/emitter'; import emitter from '@/utils/emitter';
import { useNodeByModelsStore } from '@/components/mt-edit/store/nodeByModels'; import { useNodeByModelsStore } from '@/components/mt-edit/store/nodeByModels';
// 扩展 Window 接口
declare global { declare global {
interface Window { interface Window {
vueGlobalFunction: (param: any) => void; vueGlobalFunction: (param: DataItem) => void;
// 添加其他全局函数
anotherGlobalFunction: (param: string) => string; 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>>; globalNodeIdForModeId: Map<string, Array<string>>;
} }
} }
@ -31,15 +30,16 @@ function setModuleById(param: DataItem) {
// 定义全局函数 // 定义全局函数
function vueGlobalFunction(param: DataItem) { function vueGlobalFunction(param: DataItem) {
console.log('全局函数被调用:', param); console.log('全局函数被调用:', param);
debugger;
// 安全访问 globalData // 安全访问 globalData
const globalData = window.globalData; const globalData = window.globalData;
if (globalData instanceof Map) { (globalData as Map<string, DataItem>).set(param.id.toString(), param);
(globalData as Map<string, DataItem>).set(param.id.toString(), param);
} else { // if (globalData instanceof Map) {
(globalData as Record<string, DataItem>)[param.id.toString()] = param; // (globalData as Map<string, DataItem>).set(param.id.toString(), param);
} // } else {
// (globalData as Record<string, DataItem>)[param.id.toString()] = param;
// }
// 延迟访问 store // 延迟访问 store
try { try {
@ -48,7 +48,7 @@ function vueGlobalFunction(param: DataItem) {
if (nodeByModelsStore.nodeMap.has(param.id.toString())) { if (nodeByModelsStore.nodeMap.has(param.id.toString())) {
const arr = nodeByModelsStore.nodeMap.get(param.id.toString()); const arr = nodeByModelsStore.nodeMap.get(param.id.toString());
arr?.forEach((nodeId) => { arr?.forEach((nodeId) => {
console.log('节点ID:', nodeId); console.log('节点 ID:', nodeId);
emitter.emit(nodeId, param.id); emitter.emit(nodeId, param.id);
}); });
} }
@ -85,16 +85,23 @@ async function getData() {
if (data && typeof data === 'object') { if (data && typeof data === 'object') {
// 判断当前 globalData 类型并相应处理 // 判断当前 globalData 类型并相应处理
const currentGlobalData = window.globalData; const currentGlobalData = window.globalData;
if (currentGlobalData instanceof Map) { debugger;
// 如果当前是 Map，清空并重新设置
currentGlobalData.clear(); currentGlobalData.clear();
Object.entries(data).forEach(([key, value]) => { Object.entries(data).forEach(([key, value]) => {
currentGlobalData.set(key, value as DataItem); currentGlobalData.set(key, value as DataItem);
}); });
} else {
// 如果当前是对象，直接赋值 // if (currentGlobalData instanceof Map) {
window.globalData = data as Record<string, DataItem>; // // 如果当前是 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); console.log('全局数据已更新:', window.globalData);

40
src/utils/stompService.ts
Unescape Escape View File

@ -3,22 +3,22 @@ import type { StompConfig } from '@stomp/stompjs';
// 定义消息命令常量 // 定义消息命令常量
export const MqttCmd = { export const MqttCmd = {
Channel: 1, // 通道消息 Channel: 1, // 通道消息
NodeInit: 2, // 节点初始化 NodeInit: 2, // 节点初始化
Node: 3, // 节点消息 Node: 3, // 节点消息
VideoInit: 4, // 视频初始化 VideoInit: 4, // 视频初始化
VideoCtl: 5, // PTZ 控制 VideoCtl: 5, // PTZ 控制
VideoPlay: 6, // 视频播放 VideoPlay: 6, // 视频播放
Lock: 7, // 锁控消息 Lock: 7, // 锁控消息
Control: 10, // 控制消息反馈 Control: 10, // 控制消息反馈
Alarm: 20, // 告警消息 Alarm: 20, // 告警消息
Info: 100, // 通知 Info: 100, // 通知
Error: 101, // 错误 Error: 101, // 错误
DirVideo: 201, // 视频消息 DirVideo: 201, // 视频消息
DirLock: 202, // 锁控消息 DirLock: 202, // 锁控消息
DirLockWeb: 203, // 锁控 WEB 消息 DirLockWeb: 203, // 锁控 WEB 消息
User: 1000, // 用户登陆 User: 1000, // 用户登陆
SocketDebugger: 3001 // SocketDebugger 消息 SocketDebugger: 3001 // SocketDebugger 消息
}; };
// 定义消息接口 // 定义消息接口
@ -287,11 +287,11 @@ class StompService {
break; break;
case MqttCmd.Node: case MqttCmd.Node:
debugger debugger;
// 单一 Node 更新消息 // 单一 Node 更新消息
if (this.services.node) { if (this.services.node) {
this.services.nod this.services.nod;
console.log('[STOMP] 收到 Node 更新消息:', msgObject.value); console.log('[STOMP] 收到 Node 更新消息:', msgObject.value);
} }
break; break;
@ -424,8 +424,6 @@ class StompService {
private showToast(message: any): void { private showToast(message: any): void {
console.log('[STOMP Toast]:', message); console.log('[STOMP Toast]:', message);
// 如果使用了 Element Plus // 如果使用了 Element Plus
try { try {
import('element-plus').then(({ ElMessage }) => { import('element-plus').then(({ ElMessage }) => {

Write Preview
Loading…
Cancel
Save