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:
stt
2025-12-05 14:10:29 +08:00
parent be63b12db7
commit d586f19bd9
2 changed files with 47 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
src/components/mt-preview-ypt/iframeDia.vue
View File

@@ -1,12 +1,19 @@
<template>
<div class="container">
<!-- 使用 v-for 遍历四个角落 -->
<div v-for="corner in corners" :key="corner.id" :class="['corner', corner.className]">
<div v-for="corner in corners" v-show="corner.show" :key="corner.id" :class="['corner', corner.className]">
<div class="content">
<div class="title">{{ corner.title }}</div>
<el-descriptions :column="1" size="small" label-width="70px" border>
<el-descriptions-item v-for="(item, index) in corner.data" :key="index" :label="item.label">
<div v-html="item.value"></div>
<el-descriptions-item label="指标数据">
<div style="max-height: 120px; overflow-y: auto">
<div
v-for="item in props.steadyState?.filter(k => k.lineId === corner.elementId)"
:key="item.id"
>
{{ item.statisticalName }}: {{ item.value === 3.1415926 ? '/' : item.value }}
</div>
</div>
</el-descriptions-item>
</el-descriptions>
</div>
@@ -18,7 +25,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { ref, onMounted, watch } from 'vue'
import { Close } from '@element-plus/icons-vue'
// 定义 emits
@@ -28,63 +35,7 @@ const emit = defineEmits<{
// 定义接收的 props
const props = defineProps<{
eventList?: []
steadyState?: [
{
id: 'c53cccb8c65201c192d8c57fbdb4d993-W1O31AjTAx'
lineId: '00B78D0171091'
phaseType: 'Pq_RmsU'
statisticalName: '统计数据 / 相电压总有效值 / A / 平均值'
target: '统计数据$Pq_RmsU$A'
value: 45
valueType: 'A'
},
{
id: 'c53cccb8c65201c192d8c57fbdb4d993-W1O31AjTAx'
lineId: '00B78D0171091'
phaseType: 'Pq_RmsU'
statisticalName: '统计数据 / 相电压总有效值 / A / CP95'
target: '统计数据$Pq_RmsU$A'
value: 3.1415926
valueType: 'A'
},
{
id: 'c53cccb8c65201c192d8c57fbdb4d993-W1O31AjTAx'
lineId: '00B78D0171091'
phaseType: 'Pq_RmsU'
statisticalName: '统计数据 / 相电压总有效值 / A / 最大值'
target: '统计数据$Pq_RmsU$A'
value: 3.1415926
valueType: 'A'
},
{
id: 'c53cccb8c65201c192d8c57fbdb4d993-W1O31AjTAx'
lineId: '00B78D0171091'
phaseType: 'Pq_RmsU'
statisticalName: '统计数据 / 相电压总有效值 / A / 最小值'
target: '统计数据$Pq_RmsU$A'
value: 3.1415926
valueType: 'A'
},
{
id: 'c53cccb8c65201c192d8c57fbdb4d993-zOXUxFQ6Vt'
lineId: '00B78D0171092'
phaseType: 'Pq_RmsLU'
statisticalName: '统计数据 / 线电压总有效值 / BC / 平均值'
target: '统计数据$Pq_RmsLU$BC'
value: 3.1415926
valueType: 'BC'
},
{
id: 'c53cccb8c65201c192d8c57fbdb4d993-zOXUxFQ6Vt'
lineId: '00B78D0171092'
phaseType: 'Pq_RmsLU'
statisticalName: '统计数据 / 线电压总有效值 / BC / CP95'
target: '统计数据$Pq_RmsLU$BC'
value: 3.1415926
valueType: 'BC'
}
]
steadyState?: any[]
}>()
// 定义四个角落的数据
@@ -110,41 +61,7 @@ const corners = ref([
const displayOrder = ref<number[]>([])
const lineList = ref<string[]>([]) // 缓存打开的lineId
// 处理稳态指标数据
const processSteadyStateData = (cornerIndex: number, elementId: string) => {
nextTick(() => {
if (!props.steadyState || props.steadyState.length == 0) {
if (corners.value[cornerIndex].data.length > 0) {
corners.value[cornerIndex].data[0].value = '暂无稳态指标数据'
}
return
}
let str = ``
props.steadyState
.filter(item => item.lineId === elementId)
.forEach(item => {
if (item.value == 3.1415926) {
str += `<div>${item.statisticalName}：/</div>`
} else {
str += `<div>${item.statisticalName}：${item.value}</div>`
}
})
if (str) {
if (corners.value[cornerIndex].data.length > 0) {
corners.value[cornerIndex].data[0].value =
`<div style="max-height: 100px;overflow-y: auto;">${str}</div>`
}
} else {
if (corners.value[cornerIndex].data.length > 0) {
corners.value[cornerIndex].data[0].value = '暂无稳态指标数据'
}
}
})
}
// 截取线路名称的最后一部分作为标题
// 截取名称的最后一部分作为标题
const extractTitleFromLineName = (lineName: string): string => {
if (!lineName) return '未知监测点'
@@ -169,9 +86,6 @@ const updateCornerData = (cornerIndex: number, elementId: string, lineName: stri
// 记录该角落对应的元素ID
corners.value[cornerIndex].elementId = elementId
corners.value[cornerIndex].show = true
// 处理稳态指标数据
processSteadyStateData(cornerIndex, elementId)
}
// 显示下一个角落的函数
@@ -204,25 +118,25 @@ const showNextCorner = (elementId: string, lineName: string) => {
}
// 更新 lineList，去重并触发事件
updateLineList(elementId)
// updateLineList()
}
// 更新 lineList，去重并触发事件
const updateLineList = (elementId: string) => {
// 检查是否已存在
if (!lineList.value.includes(elementId)) {
lineList.value.push(elementId)
// 触发事件，传递更新后的 lineList
emit('lineListChange', [...lineList.value])
}
// 更新 lineList，根据 corners 的 show 状态来维护
const updateLineList = () => {
// 根据 corners 中 show 为 true 的项来构建 lineList
const newLineList = corners.value.filter(corner => corner.show && corner.elementId).map(corner => corner.elementId)
// 更新 lineList
lineList.value = newLineList
// 触发事件，传递更新后的 lineList
emit('lineListChange', [...lineList.value])
}
// 关闭指定角落的函数
const closeCorner = (id: string) => {
const cornerIndex = corners.value.findIndex(c => c.id === id)
if (cornerIndex !== -1) {
const elementId = corners.value[cornerIndex].elementId
corners.value[cornerIndex].show = false
corners.value[cornerIndex].elementId = '' // 清空元素ID记录
@@ -232,13 +146,8 @@ const closeCorner = (id: string) => {
displayOrder.value.splice(orderIndex, 1)
}
// 从 lineList 中移除对应的 elementId
const lineIndex = lineList.value.indexOf(elementId)
if (lineIndex !== -1) {
lineList.value.splice(lineIndex, 1)
// 触发事件，传递更新后的 lineList
emit('lineListChange', [...lineList.value])
}
// 更新 lineList
// updateLineList()
}
}
@@ -249,16 +158,24 @@ const closeAllCorners = () => {
corner.elementId = ''
})
displayOrder.value = []
lineList.value = [] // 清空 lineList
// 触发事件，传递清空后的 lineList
emit('lineListChange', [])
// 更新 lineList
updateLineList()
}
onMounted(() => {
nextTick(() => {
showNextCorner('00B78D0171091', '在线设备 / 灿能测试 / EMC实验室 / 装置一 / 监测点1')
})
})
// 监听 corners 的变化，特别是 show 状态的变化
watch(
() => corners.value.map(corner => ({ id: corner.id, show: corner.show, elementId: corner.elementId })),
(newCorners, oldCorners) => {
// 检查是否有 show 状态的变化
const showStateChanged = newCorners.some((corner, index) => corner.show !== oldCorners[index]?.show)
if (showStateChanged) {
updateLineList()
}
},
{ deep: true }
)
// 暴露方法给父组件使用
defineExpose({
@@ -269,9 +186,8 @@ defineExpose({
</script>
<style scoped lang="less">
.corner {
width: 240px;
width: 260px;
background-color: #2b2d3a90;
position: absolute;
color: 000;

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

@@ -44,7 +44,7 @@
></drag-canvas>
</div>
<!-- 弹框 -->
<iframeDia :steadyState="dataList" ref="iframeDiaRef"></iframeDia>
<iframeDia :steadyState="dataList" ref="iframeDiaRef" @lineListChange="indicator"></iframeDia>
</div>
</template>
@@ -704,9 +704,9 @@ storedSelectedId = localStorage.getItem('selectedId') || ''
// 当前点击的元素lineId 通过mt-edit/render-core/index.vue传过来的click事件
const handleElementClick = (elementId: string, lineName: string) => {
iframeDiaRef.value .showNextCorner(elementId, lineName)
iframeDiaRef.value.showNextCorner(elementId, lineName)
// 保存当前点击的设备ID
indicator(['00B78D0171091', '00B78D0171092'])
// 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')) {
@@ -869,8 +869,7 @@ const setMqtt = async () => {
// 设置消息接收回调
mqttClient.value.onMessage((subscribe: string, message: any) => {
const msg: any = uint8ArrayToObject(message)
console.log('🚀 ~ 接受消息:', subscribe, msg)
if (subscribe.split('/')[2] === 'askCSConfigRtData') {
if (subscribe.split('/')[2] === 'csConfigRtData') {
// 指标数据
dataList.value = JSON.parse(msg.message)
}