Web/svgeditor2.0
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

调整实时数据

Browse Source
This commit is contained in:
guanj
2025-12-05 10:55:28 +08:00
parent c013158f7c
commit ac0774cc74
7 changed files with 238 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/index.ts
View File

@@ -78,6 +78,13 @@ export function targetList(params: any) {
params: params
})
}
// 云平台
export function eleEpdChooseTree_ypt() {
return http.request({
url: '/cs-system-boot/csDictData/eleEpdChooseTree',
method: 'post',
})
}
// 无锡指标列表
export function eleEpdChooseTree_wx() {
return http.request({

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

@@ -55,12 +55,12 @@
</el-button>
<el-divider direction="vertical"></el-divider>
<el-button-group>
<el-button text circle size="small" @click="onImportClick" :disabled="useData.keyName ==''">
<el-button text circle size="small" @click="onImportClick" :disabled="useData.keyName == ''">
<el-icon title="导入数据模型" :size="20">
<svg-analysis name="import-json"></svg-analysis>
</el-icon>
</el-button>
<el-button text circle size="small" @click="onExportClick" :disabled="useData.keyName ==''">
<el-button text circle size="small" @click="onExportClick" :disabled="useData.keyName == ''">
<el-icon title="导出数据模型" :size="20">
<svg-analysis name="export-json"></svg-analysis>
</el-icon>

26
src/components/mt-edit/components/layout/right-aside/select-item-bind-setting/index.vue
View File

@@ -105,7 +105,7 @@ import { ElForm, ElFormItem, ElTreeSelect } from 'element-plus'
import { computed, ref, watch, onMounted, reactive, nextTick, watchEffect } from 'vue'
import type { IDoneJson } from '@/components/mt-edit/store/types'
import { globalStore } from '@/components/mt-edit/store/global'
import { lineTree, targetList, eleEpdChooseTree_wx } from '@/api/index'
import { lineTree, targetList, eleEpdChooseTree_wx, eleEpdChooseTree_ypt } from '@/api/index'
import { useDataStore } from '@/stores/menuList'
import { lineTree_wx } from '@/api/index_wx'
import { templateRef } from '@vueuse/core'
@@ -190,11 +190,11 @@ watch(
if (item_title.value == '绑定指标' && deptIds.value) {
indexList()
}
if (useData.graphicDisplay == 'ypt') {
if (deptIds.value) {
indexList()
}
}
// if (useData.graphicDisplay == 'ypt') {
// if (deptIds.value) {
// indexList()
// }
// }
})
}
})
@@ -267,6 +267,10 @@ const fetchData = async () => {
try {
const response = await lineTree({})
treeData.value = buildLevel3Tree(response.data) // 转换数据格式并赋值给 transformedData
if (useData.graphicDisplay == 'ypt') {
const res = await eleEpdChooseTree_ypt()
treeIndexs.value = res.data // 转换数据格式并赋值给 transformedData
}
} catch (error) {
console.error('Error fetching data:', error)
}
@@ -340,11 +344,11 @@ const handleDeptChange = (deptId: []) => {
}
}
if (useData.graphicDisplay == 'ypt') {
if (deptId) {
indexList()
}
}
// if (useData.graphicDisplay == 'ypt') {
// if (deptId) {
// indexList()
// }
// }
})
}
// 给每一个元件绑定下拉框数据

9
src/components/mt-edit/components/render-core/index.vue
View File

@@ -68,7 +68,12 @@
@set-intention="val => renderCoreEmits('setIntention', val)"
@line-mouse-up="onLineMouseUp"
v-on="renderCoreProps.preivewMode ? eventToVOn(item, externalMethod) : {}"
@click="() => renderCoreProps.onElementClick && item.lineId && renderCoreProps.onElementClick(item.lineId)"
@click="
() =>
renderCoreProps.onElementClick &&
item.lineId &&
renderCoreProps.onElementClick(item.lineId, item.lineName)
"
></render-item>
</mt-dzr>
</template>
@@ -130,7 +135,7 @@ type RenderCoreProps = {
preivewMode?: boolean
lineAppendEnable?: boolean
showPopover?: boolean
onElementClick?: (elementId: string) => void
onElementClick?: (elementId: string, lineName?: string) => void
}
const renderCoreProps = withDefaults(defineProps<RenderCoreProps>(), {
doneJson: () => [],

2
src/components/mt-edit/utils/index.ts
View File

@@ -817,7 +817,9 @@ export const eventToVOn = (item: IDoneJson, externalMethod: (kid?: string) => vo
code_str += event.jump_to
}
}
if (!Object.prototype.hasOwnProperty.call(event_obj, event.type)) {
event_obj[event.type] = code_str
} else {
event_obj[event.type] += code_str

424
src/components/mt-preview-ypt/index.vue
View File

@@ -42,7 +42,10 @@
@drag-canvas-mouse-move="dragCanvasMouseMove"
@drag-canvas-mouse-up="dragCanvasMouseUp"
></drag-canvas>
<!-- </el-scrollbar> -->
<!-- 弹框 -->
<div style="position: absolute; top: 0px; right: 0px; left: 0px">
<iframeDia></iframeDia>
</div>
</div>
</div>
</template>
@@ -59,11 +62,10 @@ import DragCanvas from '@/components/mt-edit/components/drag-canvas/index.vue'
import { useDataStore } from '@/stores/menuList'
import { globalStore } from '../mt-edit/store/global'
import type { IDoneJsonEventList } from '../mt-edit/store/types'
import IframeDia from './iframeDia.vue'
import MQTT from '@/utils/mqtt'
// 实时数据表格
const tableData = ref([
const tableData = [
{
date: '2023-05-03 13:33:44:853',
name: '1#主变分支I',
@@ -89,13 +91,9 @@ const tableData = ref([
// name: '110kV加工区变',
// address: 'No. 189, Grove St, Los Angeles'
// }
])
]
const askCSConfigRtDataList = ref([])
const showDetail = ref(false)
const showDetailClick = () => {
showDetail.value = !showDetail.value
}
// 节流函数实现 (替代lodash，减少依赖)
const throttle = (func: (...args: any[]) => void, wait: number) => {
let lastTime = 0
@@ -189,11 +187,6 @@ const canvasStyle = computed(() => ({
marginLeft: (document.documentElement.clientWidth - canvas_cfg.value.width * canvas_cfg.value.scale) / 2 + 'px'
}))
const onScroll = ({ scrollLeft, scrollTop }: { scrollLeft: number; scrollTop: number }) => {
scroll_info.left = scrollLeft
scroll_info.top = scrollTop
}
// 鼠标按下事件 - 开始拖拽
const onMouseDown = (e: MouseEvent) => {
if (mtPreviewProps.canDrag && e.button === 0) {
@@ -355,11 +348,7 @@ const setItemAttrByIDAsync = (id: string, key: string, val: any) => {
;(window as any).$mtEventCallBack = (type: string, item_id: string, ...args: any[]) =>
emits('onEventCallBack', type, item_id, ...args)
// 闪烁点 lineId
let keyList = ref<any>([])
onMounted(async () => {
keyList.value = ['00B78D0171092']
// 启动消息监听 iframe传过来的参数
receiveMessage()
@@ -367,31 +356,56 @@ onMounted(async () => {
await setImportJson(mtPreviewProps.exportJson)
}
await sendTableData()
if (useData.graphicDisplay == 'ypt') {
// // 治理项目连接mqtt
await setMqtt()
}
// // 连接mqtt
await setMqtt()
// window.parent.postMessage({ action: useData, data: tableData }, '*') // 发送数据给父页面
})
// 无锡大屏通过iframe传过来的数据
// let keyList = [
// '5f99b9ba4e563439ec8490a0c598da8d',
// '401a696fe9918bb4cce7d9393d0d5df7',
// '74203b186428c1684aa450ad05257b06'
// ]
// 无锡大屏通过iframe传过来的数据 lineId
let keyList = ref<any>([])
// 闪烁点 lineId
let list = ref<any>([])
// 最大点闪烁点lineId
let listMax = ref<any>([])
// 初始颜色
let sendColor = ref<any>('')
// 最大监测点颜色
let sendMaxColor = ref<any>('')
// 背景色
let backgroundPointId = ref<any>([])
let backgroundPointColor = ref<any>('')
const sendTableData = () => {
try {
// 类型检查，确保 tableData.value 是数组
if (!Array.isArray(tableData.value)) {
console.warn('tableData is not an array, current value:', tableData.value)
return
}
// 确保只传输可序列化的数据
const cleanData = tableData.value.map(item => ({
const cleanData = tableData.map(item => ({
name: item.name,
date: item.date,
address: item.address
}))
// 只发送 useData 中需要的可序列化数据
const serializableUseData = {
display: useData.display,
loading: useData.loading
// 添加其他需要的简单属性
}
window.parent.postMessage(
{
action: 'securityDetailData',
data: cleanData
// data1: serializableUseData
},
'*'
)
@@ -400,12 +414,6 @@ const sendTableData = () => {
}
}
let message = [
{ id: 'c53cccb8c65201c192d8c57fbdb4d993-RdNsoqHYOZ', text: '发生时刻:2023-07-05 12:00:00' },
{ id: 'c53cccb8c65201c192d8c57fbdb4d993-O4jAyCBz1A', text: '传输中1111......' }
// { id: 'c53cccb8c65201c192d8c57fbdb4d993-XBd70oZ3kH', text: '发生时刻:2023-07-06 14:20:00' }
]
// 传输设备相关的连接线ID列表
let list_sys = ref<any>([])
@@ -423,62 +431,61 @@ const receiveMessage = () => {
const { type, payload } = event.data
if (type === 'RESET_EVENT') {
// 处理复位事件
handleResetEvent()
} else if (type === 'ANALYSIS_KEYS') {
// 处理 ANALYSIS_KEYS 消息
if (type === 'ANALYSIS_KEYS') {
// 在处理新数据前，先清理现有的动态文字
if (savedExportJson.value) {
savedExportJson.value.json =
savedExportJson.value.json?.filter(item => !item.id?.startsWith('auto-text-')) || []
done_json.value = done_json.value.filter(item => !item.id?.startsWith('auto-text-'))
}
// console.log('payload1111', payload)
// 处理接收到的 keyList 数据
keyList.value = payload.eventList || payload
init()
}
// 对于其他类型的消息，我们仍然调用 init()
else if (type) {
init()
keyList.value = payload.eventList
list.value = payload.eventList
sendColor.value = payload.color
// 点击行的全部数据
if (payload.eventListAll) {
eventListAll.value = payload.eventListAll
} else {
eventListAll.value = []
}
if (payload.maxColor) {
sendMaxColor.value = payload.maxColor
} else {
sendMaxColor.value = ''
}
if (payload.maxResponsibilityMonitorId) {
listMax.value = payload.maxResponsibilityMonitorId
} else {
listMax.value = []
}
if (payload.backgroundPointId) {
backgroundPointId.value = payload.backgroundPointId
} else {
backgroundPointId.value = []
}
if (payload.backgroundPointColor) {
backgroundPointColor.value = payload.backgroundPointColor
} else {
backgroundPointColor.value = ''
}
if (payload.flagValue) {
flagValue.value = payload.flagValue
} else {
flagValue.value = ''
}
}
init()
})
}
// 复位事件处理函数
const handleResetEvent = () => {
// 清空或重置 表格数据
if (tableData.value && Array.isArray(tableData.value)) {
tableData.value = []
} else {
// 确保 tableData 是一个空数组
tableData.value = []
}
// 接线图数据
keyList.value = []
setTimeout(() => {
// 表格数据
sendTableData()
// 接线图数据
if (savedExportJson.value) {
setImportJson(savedExportJson.value)
}
}, 100)
console.log('执行复位操作完成')
}
//根据 lineId 查找传输设备 ID 的函数
const findTransmissionDeviceIdsByKeyList = (array: any) => {
if (!savedExportJson.value?.json) return []
const deviceIds = savedExportJson.value.json.filter(item => array.includes(item.lineId ?? '')).map(item => item.id)
//console.log('传输设备 ID 列表:', deviceIds)
// console.log('传输设备 ID 列表:', deviceIds)
return deviceIds
}
@@ -546,12 +553,59 @@ const setImportJson = (exportJson: IExportJson) => {
setTimeout(() => {
done_json.value.forEach(item => {
//报警设备闪烁
if (findTransmissionDeviceIdsByKeyList(keyList.value).includes(item.id)) {
item.props.fill.val = 'red'
if (findTransmissionDeviceIdsByKeyList(list.value).includes(item.id)) {
// item.props.fill.val = '#fcfc57'
item.props.fill.val = sendColor.value
item.common_animations.val = 'flash'
if (findTransmissionDeviceIdsByKeyList(listMax.value).includes(item.id)) {
item.props.fill.val = sendMaxColor.value
item.common_animations.val = 'flash'
}
// 查找与该设备连接的线
const connectedLines = searchDevicesConnect([item.id!])
// console.log('该设备连接的线:', connectedLines)
// 通过连接的线找到开关，再找到开关连接的所有线
const allRelatedLines: string[] = [...connectedLines]
for (const lineId of connectedLines) {
// 通过线找到连接的开关
const switchId = findSwitchByLineEndpoint(lineId)
if (switchId) {
// console.log('找到连接的开关:', switchId)
// 找到开关连接的所有线
const switchLines = findLinesBySwitchId(switchId)
// console.log('开关连接的线:', switchLines)
// 合并所有相关的线
switchLines.forEach(line => {
if (!allRelatedLines.includes(line)) {
allRelatedLines.push(line)
}
})
}
}
//console.log('所有相关的线:', allRelatedLines)
} else {
item.common_animations.val = ''
}
if (findTransmissionDeviceIdsByKeyList(backgroundPointId.value).includes(item.id)) {
item.props.fill.val = backgroundPointColor.value
item.common_animations.val = 'flash'
}
// 报警设备连线电流
// if (list_sys.value.includes(item.id)) {
// item.props.ani_type.val = 'electricity'
// item.props.ani_color.val = '#d0e20a'
// }
// if(item.id=='sys-line-vertical-v9oPMlvQL1'){
// item.props.ani_color.val = '#8c0ae2'
// }
})
}, 1000)
}
@@ -642,24 +696,6 @@ const findLinesBySwitchId = (switchId: string): string[] => {
return connectedLines
}
// 高亮显示连线的函数
const highlightLines = (lineIds: string[]) => {
lineIds.forEach(id => {
const line = done_json.value.find(item => item.id === id)
if (line) {
line.props.ani_type.val = 'electricity'
line.props.ani_color.val = '#d0e20a'
// 置顶显示 - 将连线元素移到数组末尾（因为渲染顺序是按数组顺序）
const index = done_json.value.findIndex(item => item.id === id)
if (index !== -1) {
const [item] = done_json.value.splice(index, 1)
done_json.value.push(item)
}
}
})
}
// 添加一个新的 ref 来存储当前点击的设备ID
const currentClickedElementId = ref<string | null>(null)
@@ -669,22 +705,23 @@ let storedSelectedId = ''
storedSelectedId = localStorage.getItem('selectedId') || ''
// 当前点击的元素lineId 通过mt-edit/render-core/index.vue传过来的click事件
const handleElementClick = (elementId: string) => {
const handleElementClick = (elementId: string, lineName: string) => {
// 保存当前点击的设备ID
currentClickedElementId.value = elementId
const item = done_json.value.find(item => item.lineId === elementId)
if (item && item.events && item.events.some(event => event.type === 'click')) {
// 发送设备ID到父级iframe
window.parent.postMessage(
{
action: 'coreClick',
coreId: elementId.toString(), // 确保是字符串
selectedId: storedSelectedId // 新增的字段
// elementData: item // 可以发送整个元素数据
},
'*'
)
}
indicator(['00B78D0171091', '00B78D0171092'])
// currentClickedElementId.value = elementId
// const item = done_json.value.find(item => item.lineId === elementId)
// if (item && item.events && item.events.some(event => event.type === 'click')) {
// // 发送设备ID到父级iframe
// window.parent.postMessage(
// {
// action: 'coreClick',
// coreId: elementId.toString(), // 确保是字符串
// selectedId: storedSelectedId // 新增的字段
// // elementData: item // 可以发送整个元素数据
// },
// '*'
// )
// }
}
const searchDevicesConnect = (transmissionDeviceIds: string[]) => {
// 确保 savedExportJson.value 存在
@@ -754,95 +791,6 @@ const searchDevicesConnect = (transmissionDeviceIds: string[]) => {
return connectedLineIds
}
// 添加针对传输设备旁边添加文字的方法
const addTextNextToTransport = () => {
// 确保 savedExportJson.value 存在后再进行操作
if (!savedExportJson.value) {
console.warn('savedExportJson.value is undefined')
return []
}
let transportDevices = []
// 查找传输设备图元并添加文字图元
transportDevices =
savedExportJson.value.json?.filter(item =>
findTransmissionDeviceIdsByKeyList(keyList.value).includes(item.id)
) || []
// 为每个传输设备添加旁边的文字图元
const textElementsToAdd: IExportDoneJson[] = []
const idsToRemove: string[] = []
transportDevices.forEach((device, index) => {
// 构造预期的旧文本图元 ID 模式 (基于设备 ID)
const expectedIdPrefix = `auto-text-${device.id}-`
// 查找所有与当前设备关联的现有文本图元
const existingTextElements =
savedExportJson.value?.json?.filter(item => item.id?.startsWith(expectedIdPrefix)) || []
// 将这些旧图元的 ID 添加到待删除列表
idsToRemove.push(...existingTextElements.map(item => item.id!))
// 获取对应的消息文本
const deviceMessage =
eventListAll.value[0].find((m: any) => m.monitorId === device.lineId)?.responsibilityData || 0
// 创建新的文本图元
const textElement: IExportDoneJson = {
id: `auto-text-${device.id}-${index}`, // 使用时间戳确保唯一性
title: '动态文字',
type: 'vue',
tag: 'text-vue',
props: {
// text: deviceMessage.toFixed(1) + '%',
text: '占比:' + Math.floor(deviceMessage * 10) / 10 + '%',
fontFamily: '黑体',
fontSize: 14,
fill: 'red',
vertical: false
},
common_animations: {
val: '',
delay: 'delay-0s',
speed: 'slow',
repeat: 'infinite'
},
binfo: {
left: (device.binfo?.left || 0) + (device.binfo?.width / 2 || 0) + 10,
//top: (device.binfo?.top || 0) + (device.binfo?.height || 0) / 2 - 10 + (index % 2 === 0 ? 20 : -20),
top: (device.binfo?.top || 0) + (device.binfo?.height || 0) - 10,
width: 200,
height: 50,
angle: 0
},
resize: true,
rotate: true,
lock: false,
active: false,
hide: false,
UIDName: '',
UIDNames: [],
events: []
}
textElementsToAdd.push(textElement)
})
// 从 savedExportJson.value.json 中移除旧的文本图元
if (savedExportJson.value.json) {
done_json.value = savedExportJson.value.json.filter(item => !idsToRemove.includes(item.id!))
}
// 合并原始图元和新增的文字图元
const updatedJson = [...done_json.value, ...textElementsToAdd]
// 更新 savedExportJson.value
if (savedExportJson.value) {
savedExportJson.value.json = updatedJson
}
return updatedJson
}
// 预览时候绑定指标等的点击事件
const setDoneJson = async (kId: string) => {
const filteredItems = useData.dataTree.filter(item => item.kId == kId)
@@ -874,8 +822,32 @@ const setDoneJson = async (kId: string) => {
const init = async () => {
setTimeout(() => {
// 执行动态添加文本的操作
// const updatedDoneJson = addTextNextToTransport()
// 调用函数获取传输设备 ID
transmissionDeviceIds = findTransmissionDeviceIdsByKeyList(keyList.value)
//传入参数: transmissionDeviceIds - 一个包含传输设备ID的数组
// 功能: 查找与这些传输设备相关的连接线（包括直接连接和间接连接的线）
list_sys.value = searchDevicesConnect(transmissionDeviceIds)
// 将结果赋值给 savedExportJson.value
// if (savedExportJson.value) {
// // 创建一个新的对象，避免直接修改原始对象
// savedExportJson.value = {
// ...savedExportJson.value,
// json: updatedDoneJson
// }
// } else {
// // 如果 savedExportJson.value 不存在，创建一个新的对象
// savedExportJson.value = {
// canvasCfg: canvas_cfg.value,
// gridCfg: grid_cfg.value,
// json: updatedDoneJson
// }
// }
// 重新设置导入的JSON以触发界面更新
setImportJson(savedExportJson.value)
}, 100)
@@ -885,51 +857,55 @@ const timer = ref()
// 连接mqtt
const mqttClient = ref()
const setMqtt = async () => {
mqttClient.value = new MQTT('/ypt/rtData/#')
mqttClient.value = new MQTT('/zl/TemperData/#')
// 设置消息接收回调
try {
await mqttClient.value.init()
// 订阅主题
await mqttClient.value.subscribe('/ypt/rtData/#')
await mqttClient.value.subscribe('/zl/TemperData/#') //实时数据
await mqttClient.value.subscribe('/zl/csConfigRtData/#') //指标
// 设置消息接收回调
mqttClient.value.onMessage((subscribe: string, message: any) => {
const msg: any = uint8ArrayToObject(message)
console.log('🚀 ~ 接受消息:', msg)
setTimeout(() => {
done_json.value.forEach(item => {
msg.forEach((msgValue: any) => {
if (item.id == msgValue.id) {
item.props.text.val = item.props.text.val.replace(/#{3}/g, msgValue.value) //'B相负载电流-CP95:31'
}
})
})
}, 100)
console.log('🚀 ~ 接受消息:', subscribe, msg)
if (subscribe.split('/')[2] === 'askCSConfigRtData') {
// 指标数据
askCSConfigRtDataList.value = JSON.parse(msg.message)
}
})
} catch (error) {
console.error('MQTT 初始化失败:', error)
}
}
const publish = async (id: string) => {
if (useData.graphicDisplay != 'ypt') return //质量项目进入
// if (mqttClient.value) {
// await mqttClient.value.subscribe('zl/askCSConfigWarnData/' + id)
// // 发送消息
// await mqttClient.value.publish('/zl/askCSConfigWarnData/' + id, '{}')
// if (timer.value) {
// clearInterval(timer.value)
// timer.value = null
// }
// timer.value = setInterval(
// () => {
// mqttClient.value.publish('/zl/askCSConfigWarnData/' + id, '{}')
// },
// 3 * 60 * 1000
// )
// }
}
// 绑定指标
const indicator = async (ids: string[]) => {
if (mqttClient.value) {
await mqttClient.value.subscribe('ypt/askRtData/' + id)
// await mqttClient.value.subscribe('zl/askCSConfigRtData/' + useData.dataTree[0].id)
// 发送消息
await mqttClient.value.publish('/ypt/askRtData/' + id, '{}')
if (timer.value) {
clearInterval(timer.value)
timer.value = null
}
timer.value = setInterval(
() => {
mqttClient.value.publish('/ypt/askRtData/' + id, '{}')
},
3 * 60 * 1000
)
await mqttClient.value.publish('/zl/askCSConfigRtData/' + useData.dataTree[0].id, `[${ids}]`)
}
}
onUnmounted(() => {
if (timer.value) {
clearInterval(timer.value)

10
src/utils/mqtt.ts
View File

@@ -52,11 +52,11 @@ class MQTT {
}
try {
// const mqttUrl = 'ws://192.168.1.103:8083/mqtt'
const mqttUrl =
localStorage.getItem('MQTTZUTAI') == 'null'
? 'ws://192.168.1.103:8083/mqtt'
: localStorage.getItem('MQTTZUTAI')
const mqttUrl = 'ws://192.168.1.103:8083/mqtt'
// const mqttUrl =
// localStorage.getItem('MQTTZUTAI') == 'null'
// ? 'ws://192.168.1.103:8083/mqtt'
// : localStorage.getItem('MQTTZUTAI')
console.log('🚀 ~ MQTT ~ init ~ mqttUrl:', mqttUrl)
this.client = mqtt.connect(mqttUrl, this.defaultOptions as IClientOptions)
this.setupEventListeners()