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 11:25:26 +08:00
parent 761ad3c2f8
commit 178054426d
1 changed files with 52 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,6 @@
<div v-for="corner in corners" :key="corner.id" :class="['corner', corner.className]">
<div class="content">
<div class="title">{{ corner.title }}</div>
{{ corner.data }}
<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>
@@ -22,6 +21,11 @@
import { ref, onMounted, nextTick } from 'vue'
import { Close } from '@element-plus/icons-vue'
// 定义 emits
const emit = defineEmits<{
(e: 'lineListChange', lineList: string[]): void
}>()
// 定义接收的 props
const props = defineProps<{
eventList?: []
@@ -83,63 +87,6 @@ const props = defineProps<{
]
}>()
// const 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'
// }
// ]
// 定义四个角落的数据
const corners = ref([
{
@@ -161,6 +108,7 @@ const corners = ref([
])
const displayOrder = ref<number[]>([])
const lineList = ref<string[]>([]) // 缓存打开的lineId
// 处理稳态指标数据
const processSteadyStateData = (cornerIndex: number, elementId: string) => {
@@ -237,21 +185,21 @@ const showNextCorner = (elementId: string, lineName: string) => {
return
}
// 确保 props.eventList 是数组并且过滤掉 null/undefined 元素
if (!Array.isArray(props.eventList)) {
console.warn('props.eventList 不是数组格式:', props.eventList)
return
}
// // 确保 props.eventList 是数组并且过滤掉 null/undefined 元素
// if (!Array.isArray(props.eventList)) {
// console.warn('props.eventList 不是数组格式:', props.eventList)
// return
// }
// 过滤掉 null 和 undefined 元素，然后查找匹配项
const validItems = props.eventList.filter(item => item !== null && item !== undefined)
const dataItem = validItems.find(item => item.lineId === elementId)
// // 过滤掉 null 和 undefined 元素，然后查找匹配项
// const validItems = props.eventList.filter(item => item !== null && item !== undefined)
// const dataItem = validItems.find(item => item.lineId === elementId)
// 如果没有找到匹配的数据项，则不更新数据
if (!dataItem) {
console.warn('未找到匹配的数据项:', elementId)
return
}
// // 如果没有找到匹配的数据项，则不更新数据
// if (!dataItem) {
// console.warn('未找到匹配的数据项:', elementId)
// return
// }
// 查找一个未显示的角落
const availableCornerIndex = corners.value.findIndex(corner => !corner.show)
@@ -270,12 +218,27 @@ const showNextCorner = (elementId: string, lineName: string) => {
// 将替换的索引重新加入队列末尾
displayOrder.value.push(replaceIndex)
}
// 更新 lineList，去重并触发事件
updateLineList(elementId)
}
// 更新 lineList，去重并触发事件
const updateLineList = (elementId: string) => {
// 检查是否已存在
if (!lineList.value.includes(elementId)) {
lineList.value.push(elementId)
// 触发事件，传递更新后的 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记录
@@ -284,6 +247,14 @@ const closeCorner = (id: string) => {
if (orderIndex !== -1) {
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])
}
}
}
@@ -294,13 +265,15 @@ const closeAllCorners = () => {
corner.elementId = ''
})
displayOrder.value = []
lineList.value = [] // 清空 lineList
// 触发事件，传递清空后的 lineList
emit('lineListChange', [])
}
onMounted(() => {
// nextTick(() => {
// showNextCorner('00B78D0171091', '在线设备 / 灿能测试 / EMC实验室 / 装置一 / 监测点1')
// })
nextTick(() => {
showNextCorner('00B78D0171091', '在线设备 / 灿能测试 / EMC实验室 / 装置一 / 监测点1')
})
})
// 暴露方法给父组件使用
@@ -311,42 +284,7 @@ defineExpose({
})
</script>
<style scoped>
/* 走马灯样式 - 支持逐条显示 */
.simple-marquee {
width: 230px;
height: 24px;
overflow: hidden;
position: relative;
white-space: nowrap;
}
.marquee-content {
display: inline-block;
padding-left: 100%;
animation: marquee-single var(--marquee-duration, 25s) linear infinite;
line-height: 24px;
text-decoration: underline;
text-decoration-color: #4877f6;
}
@keyframes marquee-single {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
/* 鼠标悬停时暂停动画 */
.simple-marquee:hover .marquee-content {
animation-play-state: paused;
cursor: pointer;
}
</style>
<style scoped lang="scss">
<style scoped lang="less">
.container {
position: relative;
}
@@ -376,7 +314,7 @@ defineExpose({
.top-right {
top: 10px;
right: 0px;
right: 10px;
}
.bottom-left {
@@ -429,7 +367,7 @@ defineExpose({
top: 10px;
right: 10px;
width: 14px;
color: white;
color: #000;
font-size: 14px;
font-weight: bold;
cursor: pointer;
@@ -438,4 +376,4 @@ defineExpose({
.indicator {
display: flex;
}
</style>
</style>