调整实时数据

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

View File

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

View File

@@ -55,12 +55,12 @@
</el-button> </el-button>
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical"></el-divider>
<el-button-group> <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"> <el-icon title="导入数据模型" :size="20">
<svg-analysis name="import-json"></svg-analysis> <svg-analysis name="import-json"></svg-analysis>
</el-icon> </el-icon>
</el-button> </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"> <el-icon title="导出数据模型" :size="20">
<svg-analysis name="export-json"></svg-analysis> <svg-analysis name="export-json"></svg-analysis>
</el-icon> </el-icon>

View File

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

View File

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

View File

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

View File

@@ -42,7 +42,10 @@
@drag-canvas-mouse-move="dragCanvasMouseMove" @drag-canvas-mouse-move="dragCanvasMouseMove"
@drag-canvas-mouse-up="dragCanvasMouseUp" @drag-canvas-mouse-up="dragCanvasMouseUp"
></drag-canvas> ></drag-canvas>
<!-- </el-scrollbar> --> <!-- 弹框 -->
<div style="position: absolute; top: 0px; right: 0px; left: 0px">
<iframeDia></iframeDia>
</div>
</div> </div>
</div> </div>
</template> </template>
@@ -59,11 +62,10 @@ import DragCanvas from '@/components/mt-edit/components/drag-canvas/index.vue'
import { useDataStore } from '@/stores/menuList' import { useDataStore } from '@/stores/menuList'
import { globalStore } from '../mt-edit/store/global' import { globalStore } from '../mt-edit/store/global'
import type { IDoneJsonEventList } from '../mt-edit/store/types' import type { IDoneJsonEventList } from '../mt-edit/store/types'
import IframeDia from './iframeDia.vue'
import MQTT from '@/utils/mqtt' import MQTT from '@/utils/mqtt'
// 实时数据表格 const tableData = [
const tableData = ref([
{ {
date: '2023-05-03 13:33:44:853', date: '2023-05-03 13:33:44:853',
name: '1#主变分支I', name: '1#主变分支I',
@@ -89,13 +91,9 @@ const tableData = ref([
// name: '110kV加工区变', // name: '110kV加工区变',
// address: 'No. 189, Grove St, Los Angeles' // address: 'No. 189, Grove St, Los Angeles'
// } // }
]) ]
const askCSConfigRtDataList = ref([])
const showDetail = ref(false)
const showDetailClick = () => {
showDetail.value = !showDetail.value
}
// 节流函数实现 (替代lodash减少依赖) // 节流函数实现 (替代lodash减少依赖)
const throttle = (func: (...args: any[]) => void, wait: number) => { const throttle = (func: (...args: any[]) => void, wait: number) => {
let lastTime = 0 let lastTime = 0
@@ -189,11 +187,6 @@ const canvasStyle = computed(() => ({
marginLeft: (document.documentElement.clientWidth - canvas_cfg.value.width * canvas_cfg.value.scale) / 2 + 'px' 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) => { const onMouseDown = (e: MouseEvent) => {
if (mtPreviewProps.canDrag && e.button === 0) { 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[]) => ;(window as any).$mtEventCallBack = (type: string, item_id: string, ...args: any[]) =>
emits('onEventCallBack', type, item_id, ...args) emits('onEventCallBack', type, item_id, ...args)
// 闪烁点 lineId
let keyList = ref<any>([])
onMounted(async () => { onMounted(async () => {
keyList.value = ['00B78D0171092']
// 启动消息监听 iframe传过来的参数 // 启动消息监听 iframe传过来的参数
receiveMessage() receiveMessage()
@@ -367,31 +356,56 @@ onMounted(async () => {
await setImportJson(mtPreviewProps.exportJson) await setImportJson(mtPreviewProps.exportJson)
} }
await sendTableData() await sendTableData()
if (useData.graphicDisplay == 'ypt') { // // 连接mqtt
// // 治理项目连接mqtt await setMqtt()
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 = () => { const sendTableData = () => {
try { 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, name: item.name,
date: item.date, date: item.date,
address: item.address address: item.address
})) }))
// 只发送 useData 中需要的可序列化数据
const serializableUseData = {
display: useData.display,
loading: useData.loading
// 添加其他需要的简单属性
}
window.parent.postMessage( window.parent.postMessage(
{ {
action: 'securityDetailData', action: 'securityDetailData',
data: cleanData 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列表 // 传输设备相关的连接线ID列表
let list_sys = ref<any>([]) let list_sys = ref<any>([])
@@ -423,62 +431,61 @@ const receiveMessage = () => {
const { type, payload } = event.data const { type, payload } = event.data
if (type === 'RESET_EVENT') { if (type === 'ANALYSIS_KEYS') {
// 处理复位事件
handleResetEvent()
} else if (type === 'ANALYSIS_KEYS') {
// 处理 ANALYSIS_KEYS 消息
// 在处理新数据前,先清理现有的动态文字 // 在处理新数据前,先清理现有的动态文字
if (savedExportJson.value) { if (savedExportJson.value) {
savedExportJson.value.json = savedExportJson.value.json =
savedExportJson.value.json?.filter(item => !item.id?.startsWith('auto-text-')) || [] savedExportJson.value.json?.filter(item => !item.id?.startsWith('auto-text-')) || []
done_json.value = done_json.value.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 数据
keyList.value = payload.eventList || payload keyList.value = payload.eventList
list.value = payload.eventList
init() sendColor.value = payload.color
} // 点击行的全部数据
// 对于其他类型的消息,我们仍然调用 init() if (payload.eventListAll) {
else if (type) { eventListAll.value = payload.eventListAll
init() } 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 的函数 //根据 lineId 查找传输设备 ID 的函数
const findTransmissionDeviceIdsByKeyList = (array: any) => { const findTransmissionDeviceIdsByKeyList = (array: any) => {
if (!savedExportJson.value?.json) return [] if (!savedExportJson.value?.json) return []
const deviceIds = savedExportJson.value.json.filter(item => array.includes(item.lineId ?? '')).map(item => item.id) 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 return deviceIds
} }
@@ -546,12 +553,59 @@ const setImportJson = (exportJson: IExportJson) => {
setTimeout(() => { setTimeout(() => {
done_json.value.forEach(item => { done_json.value.forEach(item => {
//报警设备闪烁 //报警设备闪烁
if (findTransmissionDeviceIdsByKeyList(keyList.value).includes(item.id)) { if (findTransmissionDeviceIdsByKeyList(list.value).includes(item.id)) {
item.props.fill.val = 'red' // item.props.fill.val = '#fcfc57'
item.props.fill.val = sendColor.value
item.common_animations.val = 'flash' 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 { } else {
item.common_animations.val = '' 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) }, 1000)
} }
@@ -642,24 +696,6 @@ const findLinesBySwitchId = (switchId: string): string[] => {
return connectedLines 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 // 添加一个新的 ref 来存储当前点击的设备ID
const currentClickedElementId = ref<string | null>(null) const currentClickedElementId = ref<string | null>(null)
@@ -669,22 +705,23 @@ let storedSelectedId = ''
storedSelectedId = localStorage.getItem('selectedId') || '' storedSelectedId = localStorage.getItem('selectedId') || ''
// 当前点击的元素lineId 通过mt-edit/render-core/index.vue传过来的click事件 // 当前点击的元素lineId 通过mt-edit/render-core/index.vue传过来的click事件
const handleElementClick = (elementId: string) => { const handleElementClick = (elementId: string, lineName: string) => {
// 保存当前点击的设备ID // 保存当前点击的设备ID
currentClickedElementId.value = elementId indicator(['00B78D0171091', '00B78D0171092'])
const item = done_json.value.find(item => item.lineId === elementId) // currentClickedElementId.value = elementId
if (item && item.events && item.events.some(event => event.type === 'click')) { // const item = done_json.value.find(item => item.lineId === elementId)
// 发送设备ID到父级iframe // if (item && item.events && item.events.some(event => event.type === 'click')) {
window.parent.postMessage( // // 发送设备ID到父级iframe
{ // window.parent.postMessage(
action: 'coreClick', // {
coreId: elementId.toString(), // 确保是字符串 // action: 'coreClick',
selectedId: storedSelectedId // 新增的字段 // coreId: elementId.toString(), // 确保是字符串
// elementData: item // 可以发送整个元素数据 // selectedId: storedSelectedId // 新增的字段
}, // // elementData: item // 可以发送整个元素数据
'*' // },
) // '*'
} // )
// }
} }
const searchDevicesConnect = (transmissionDeviceIds: string[]) => { const searchDevicesConnect = (transmissionDeviceIds: string[]) => {
// 确保 savedExportJson.value 存在 // 确保 savedExportJson.value 存在
@@ -754,95 +791,6 @@ const searchDevicesConnect = (transmissionDeviceIds: string[]) => {
return connectedLineIds 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 setDoneJson = async (kId: string) => {
const filteredItems = useData.dataTree.filter(item => item.kId == kId) const filteredItems = useData.dataTree.filter(item => item.kId == kId)
@@ -874,8 +822,32 @@ const setDoneJson = async (kId: string) => {
const init = async () => { const init = async () => {
setTimeout(() => { setTimeout(() => {
// 执行动态添加文本的操作
// const updatedDoneJson = addTextNextToTransport()
// 调用函数获取传输设备 ID // 调用函数获取传输设备 ID
transmissionDeviceIds = findTransmissionDeviceIdsByKeyList(keyList.value) 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以触发界面更新 // 重新设置导入的JSON以触发界面更新
setImportJson(savedExportJson.value) setImportJson(savedExportJson.value)
}, 100) }, 100)
@@ -885,51 +857,55 @@ const timer = ref()
// 连接mqtt // 连接mqtt
const mqttClient = ref() const mqttClient = ref()
const setMqtt = async () => { const setMqtt = async () => {
mqttClient.value = new MQTT('/ypt/rtData/#') mqttClient.value = new MQTT('/zl/TemperData/#')
// 设置消息接收回调 // 设置消息接收回调
try { try {
await mqttClient.value.init() 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) => { mqttClient.value.onMessage((subscribe: string, message: any) => {
const msg: any = uint8ArrayToObject(message) const msg: any = uint8ArrayToObject(message)
console.log('🚀 ~ 接受消息:', msg) console.log('🚀 ~ 接受消息:', subscribe, msg)
setTimeout(() => { if (subscribe.split('/')[2] === 'askCSConfigRtData') {
done_json.value.forEach(item => { // 指标数据
msg.forEach((msgValue: any) => { askCSConfigRtDataList.value = JSON.parse(msg.message)
if (item.id == msgValue.id) { }
item.props.text.val = item.props.text.val.replace(/#{3}/g, msgValue.value) //'B相负载电流-CP95:31'
}
})
})
}, 100)
}) })
} catch (error) { } catch (error) {
console.error('MQTT 初始化失败:', error) console.error('MQTT 初始化失败:', error)
} }
} }
const publish = async (id: string) => { 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) { 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, '{}') await mqttClient.value.publish('/zl/askCSConfigRtData/' + useData.dataTree[0].id, `[${ids}]`)
if (timer.value) {
clearInterval(timer.value)
timer.value = null
}
timer.value = setInterval(
() => {
mqttClient.value.publish('/ypt/askRtData/' + id, '{}')
},
3 * 60 * 1000
)
} }
} }
onUnmounted(() => { onUnmounted(() => {
if (timer.value) { if (timer.value) {
clearInterval(timer.value) clearInterval(timer.value)

View File

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