Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实时数据页面提交

Browse Source
This commit is contained in:
stt
2025-12-04 16:29:46 +08:00
parent ce9caa8729
commit 1b23355134
2 changed files with 303 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
src/views/pqs/cockpit/realTimeData/iframeDia.vue
View File

@@ -1,27 +1,45 @@
<template>
<div class="container">
<!-- 使用 v-for 遍历四个角落 -->
<div v-for="corner in corners" v-show="corner.show" :key="corner.id" :class="['corner', corner.className]">
<div v-for="corner in corners" :key="corner.id" :class="['corner', corner.className]">
<div class="content">
<div class="title" style="display: flex">
<img src="@/assets/img/lightning.png" class="title_img" />
<span>{{ corner.title }}</span>
</div>
<vxe-table
:data="corner.data"
size="small"
border
show-header
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
height="200"
style="padding: 5px;"
>
<vxe-column field="name" title="名称"></vxe-column>
<vxe-column field="a" title="A" width="40"></vxe-column>
<vxe-column field="b" title="B" width="40"></vxe-column>
<vxe-column field="c" title="C" width="40"></vxe-column>
</vxe-table>
<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" v-if="item.label !== '暂降次数'"></div>
<!-- 跑马灯 -->
<!-- <div v-else style="display: flex">
<div style="width: 30px">{{ corner.raceLists.length }}次</div>
<div class="simple-marquee">
<div class="marquee-content">
<span
style="margin-right: 15px"
v-for="(event, index) in corner.raceLists"
:key="index"
@click="goToRace(event)"
>
{{
index +
1 +
'、' +
event.startTime +
'发生' +
event.eventType +
',' +
'残余电压：' +
(event.featureAmplitude * 100).toFixed(2) +
'%' +
',' +
'持续时间:' +
event.duration +
'S'
}}
</span>
</div>
</div>
</div> -->
</el-descriptions-item>
</el-descriptions>
</div>
<span class="close-btn" @click="closeCorner(corner.id)">
<Close />
@@ -32,10 +50,14 @@
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick, reactive } from 'vue'
// import { clickImage } from "@/api/manage_wx";
import { clickImage } from '@/api/manage_wx'
import { Close } from '@element-plus/icons-vue'
import socketClient from '@/utils/webSocketClient'
// import { useStore } from 'vuex'
// 定义接收的 props
const props = defineProps<{
eventList?: []
}>()
//开始创建webSocket客户端
const dataSocket = reactive({
socketServe: socketClient.Instance
@@ -47,14 +69,7 @@ const corners = ref([
title: '左上',
className: 'top-left',
show: false,
data: [
{ name: '电压', a: 1098, b: 2080, c: 3006 },
{ name: '电流', a: 15, b: 25, c: 35 },
{ name: '电压畸变率', a: 12, b: 22, c: 32 },
{ name: '电流畸变率', a: 18, b: 28, c: 38 },
{ name: '电压偏值', a: 12, b: 22, c: 32 },
{ name: '电压不平衡', a: 18, b: 28, c: 38 }
] as any[],
data: [] as { label: string; value: string }[],
elementId: '', // 记录该角落对应的元素ID
raceLists: [] as any[] // 为每个角落添加独立的跑马灯数据存储
},
@@ -63,7 +78,7 @@ const corners = ref([
title: '右上',
className: 'top-right',
show: false,
data: [] as any[],
data: [] as { label: string; value: string }[],
elementId: '',
raceLists: [] as any[] // 为每个角落添加独立的跑马灯数据存储
}
@@ -84,69 +99,94 @@ const corners = ref([
// elementId: "",
// },
])
interface DataTableItem {
name: string
a: number
b: number
c: number
}
const tableData = ref<DataTableItem[]>([
{ name: '电压', a: 1098, b: 2080, c: 3006 },
{ name: '电流', a: 15, b: 25, c: 35 },
{ name: '电压畸变率', a: 12, b: 22, c: 32 },
{ name: '电流畸变率', a: 18, b: 28, c: 38 },
{ name: '电压偏值', a: 12, b: 22, c: 32 },
{ name: '电压不平衡', a: 18, b: 28, c: 38 }
])
const steadyStateList = ref([])
// const store = useStore()
const selectedId = ref('')
// 内部响应式数据
const eventList = ref<any[]>([])
const eventList = ref([])
// 点击跑马灯展示弹框
const dipDetail = ref(null)
// const handleClickImage = async (elementId: string) => {
// // 检查 elementId 是否有值，没有值则直接返回空数组
// if (!elementId) {
// eventList.value = [];
// return;
// }
// try {
// // 发送点击图片请求
// const res = await clickImage({ lineId: elementId });
// // 确保返回的数据是数组格式，并且过滤掉 null/undefined 元素
// let dataToStore: any[] = [];
// if (Array.isArray(res.data)) {
// dataToStore = res.data.filter(
// (item:any) => item !== null && item !== undefined
// );
// } else if (res.data && Array.isArray(res.data.records)) {
// dataToStore = res.data.records.filter(
// (item:any) => item !== null && item !== undefined
// );
// } else if (res.data) {
// // 如果是单个对象且不为 null
// if (res.data !== null && res.data !== undefined) {
// dataToStore = [res.data];
// }
// // 检查 elementId 是否有值，没有值则直接返回空数组
// if (!elementId) {
// eventList.value = []
// return
// }
// try {
// // 发送点击图片请求
// const res = await clickImage({
// lineId: elementId,
// searchBeginTime: store.state.timeValue[0],
// searchEndTime: store.state.timeValue[1]
// })
// eventList.value = dataToStore;
// } catch (error) {
// console.error("调用 clickImage 接口出错:", error);
// // 出错时设置为空数组，避免后续处理出错
// eventList.value = [];
// }
// };
// // 确保返回的数据是数组格式，并且过滤掉 null/undefined 元素
// let dataToStore: any[] = []
// if (Array.isArray(res.data)) {
// dataToStore = res.data.filter(item => item !== null && item !== undefined)
// } else if (res.data && Array.isArray(res.data.records)) {
// dataToStore = res.data.records.filter(item => item !== null && item !== undefined)
// } else if (res.data) {
// // 如果是单个对象且不为 null
// if (res.data !== null && res.data !== undefined) {
// dataToStore = [res.data]
// }
// }
// eventList.value = dataToStore
// } catch (error) {
// console.error('调用 clickImage 接口出错:', error)
// // 出错时设置为空数组，避免后续处理出错
// eventList.value = []
// }
// }
// 监听 props 变化
// watch(
// () => props.eventList,
// (newVal) => {
// if (newVal && Array.isArray(newVal)) {
// eventList.value = [...newVal];
// dataLoaded.value = true;
// } else {
// dataLoaded.value = false;
// }
// },
// { immediate: true, deep: true }
// );
// 记录显示顺序，用于循环替换
const displayOrder = ref<number[]>([])
// 计算跑马灯动画时长（毫秒）
const calculateMarqueeDuration = corner => {
if (!corner.raceLists || corner.raceLists.length === 0) {
return 25000 // 默认25秒
}
// 计算所有事件文本的总长度
let totalTextLength = 0
corner.raceLists.forEach((event, index) => {
const text = `${index + 1}、${event.startTime}发生${event.eventType},残余电压：${(
event.featureAmplitude * 100
).toFixed(2)}%,持续时间:${event.duration}S`
totalTextLength += text.length
})
// 添加分隔符长度和边距
const separatorLength = corner.raceLists.length > 1 ? (corner.raceLists.length - 1) * 15 : 0 // margin-right: 15px
totalTextLength += separatorLength
// 根据文本长度计算时长（减慢速度）
// 将每字符需要的时间从50ms增加到80ms，最少8秒，最多90秒
const duration = Math.min(Math.max(totalTextLength * 80, 8000), 90000)
return duration
}
// 更新指定角落数据的函数
const updateCornerData = (cornerIndex: number, dataItem: any, elementId: string) => {
// 更新标题为 objName
@@ -177,6 +217,15 @@ const updateCornerData = (cornerIndex: number, dataItem: any, elementId: string)
// 记录该角落对应的元素ID
corners.value[cornerIndex].elementId = elementId
corners.value[cornerIndex].show = true
// 设置动画时长
nextTick(() => {
const duration = calculateMarqueeDuration(corners.value[cornerIndex])
const marqueeElement = document.querySelector(`.${corners.value[cornerIndex].className} .marquee-content`)
if (marqueeElement) {
;(marqueeElement as HTMLElement).style.setProperty('--marquee-duration', `${duration}ms`)
}
})
}
// 显示下一个角落的函数
@@ -276,8 +325,8 @@ const init = () => {
corners.value.forEach((corner, index) => {
let str = ``
steadyState
.filter((item: any) => item.lineId == corner.elementId)
.forEach((item: any) => {
.filter(item => item.lineId == corner.elementId)
.forEach(item => {
if (item.value == 3.1415926) {
str += `<div>${item.statisticalName}：/</div>`
} else {
@@ -288,6 +337,15 @@ const init = () => {
corner.data.length > 0
? (corner.data[2].value = `<div style="max-height: 100px;overflow-y: auto;">${str} </div>`)
: ''
// 更新跑马灯动画时长
nextTick(() => {
const duration = calculateMarqueeDuration(corner)
const marqueeElement = document.querySelector(`.${corner.className} .marquee-content`)
if (marqueeElement) {
;(marqueeElement as HTMLElement).style.setProperty('--marquee-duration', `${duration}ms`)
}
})
})
}
})
@@ -312,6 +370,10 @@ const send = () => {
}, 1000 * 60)
}
const goToRace = row => {
dipDetail.value.open(row.measurementPointId)
}
// 监听来自 iframe 的消息
window.addEventListener('message', async function (event) {
// 安全起见，可以验证消息来源（origin）
@@ -323,7 +385,7 @@ window.addEventListener('message', async function (event) {
selectedId.value = event.data.selectedId
// 调用接口获取最新数据
// await handleClickImage(clickedElementId);
// await handleClickImage(clickedElementId)
// 根据接收到的元素LineId显示对应数据
await showNextCorner(clickedElementId)
@@ -339,6 +401,41 @@ onBeforeUnmount(() => {
})
</script>
<style>
/* 走马灯样式 - 支持逐条显示 */
.simple-marquee {
width: 230px;
height: 24px;
overflow: hidden;
position: relative;
white-space: nowrap;
}
.marquee-content {
display: inline-block;
padding-left: 100%;
/* animation: marquee-single 15s linear infinite; */
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">
.container {
@@ -348,9 +445,9 @@ onBeforeUnmount(() => {
.corner {
width: 240px;
/* height: 135px; */
background-color: #fff;
background-color: #2b2d3a90;
position: absolute;
color: #000;
color: 000;
/* font-weight: bold; */
/* 添加弹出动画 */
opacity: 0;
@@ -396,20 +493,15 @@ onBeforeUnmount(() => {
.title {
font-size: 16px;
// text-align: center;
padding: 5px;
color: #fff;
border-bottom: 1px solid #444;
background-color: var(--el-color-primary);
/* text-align: center; */
/* margin-bottom: 8px; */
padding: 8px;
/* color: #409eff; */
border-bottom: 1px solid #fff;
background-color: #fff;
border-radius: 8px 8px 0 0;
}
.title_img {
width: 25px;
height: 25px;
margin-right: 10px;
}
.data-item {
display: flex;
margin-bottom: 4px;
@@ -444,16 +536,4 @@ onBeforeUnmount(() => {
.indicator {
display: flex;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table th,
.table td {
border: 1px solid #000;
text-align: center;
font-size: 12px;
}
</style>

191
src/views/pqs/cockpit/realTimeData/index.vue
View File

@@ -2,13 +2,13 @@
<div class="default-main" :style="{ padding: prop.height ? '0px !important' : '10px' }">
<!-- 实时数据 -->
<!-- 添加加载事件监听 -->
<div class="dataBox" :style="{ height: prop.height || pageHeight.height }" >
<div class="dataBox" :style="{ height: prop.height || pageHeight.height }">
<div
class="iframe-container"
:style="{
boxShadow: `var(--el-box-shadow-light)`
}"
style="position: relative;"
style="position: relative"
>
<iframe
:src="iframeSrc"
@@ -19,17 +19,21 @@
id="iframeLeft"
@load="onIframeLoad"
></iframe>
<IframeDia
style="position: absolute; top: 0px; right: 0px; left: 0px"
/>
<IframeDia style="position: absolute; top: 0px; right: 0px; left: 0px" />
</div>
<el-card class="bottom-container " style="min-height: 230px;">
<el-card class="bottom-container" style="min-height: 230px">
<div class="buttonBox">
<el-button type="primary" icon="el-icon-Aim" @click="reset">复位</el-button>
</div>
<div class="tableBox">
<Table ref="tableRef" height="100%"></Table>
<!-- <Table ref="tableRef" height="100%"></Table> -->
<vxe-table border auto-resize height="100%" :data="tableData" ref="tableRef">
<vxe-column type="seq" title="序号" align="center" width="80px"></vxe-column>
<vxe-column field="date" align="center" title="时间" width="200px"></vxe-column>
<vxe-column field="name" align="center" title="监测点名" width="200px"></vxe-column>
<vxe-column field="address" align="center" title="事件描述"></vxe-column>
</vxe-table>
</div>
</el-card>
</div>
@@ -48,85 +52,115 @@ import IframeDia from './iframeDia.vue'
// }>()
const prop = defineProps({
width: { type: [String, Number]},
height: { type: [String, Number]},
timeKey: { type: [String, Number]},
width: { type: [String, Number] },
height: { type: [String, Number] },
timeKey: { type: [String, Number] },
timeValue: { type: Object }
})
const tableStore: any = new TableStore({
url: '/user-boot/role/selectRoleDetail?id=0',
method: 'POST',
const tableData = ref()
showPage: false,
// 在父页面中添加事件监听器
window.addEventListener('message', function (event) {
const { action, data } = event.data
column: [
{
field: 'index',
title: '序号',
width: '80',
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{
title: '时间',
field: 'whetherToGovern',
minWidth: '70'
},
{
title: '监测点名',
field: 'name',
minWidth: '90'
// render: 'customTemplate',
// customTemplate: (row: any) => {
// return `<span style='cursor: pointer;text-decoration: underline;'>${row.name}</span>`
// }
},
{ title: '事件描述', field: 'question', minWidth: '200' }
],
beforeSearchFun: () => {
// tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
// tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
},
loadCallback: () => {
tableStore.table.data = [
{
name: '10kV1#电动机',
type: '电动机',
whetherToGovern: '2025-01-01 15:00:00',
question: '3次谐波电压、5次谐波电流、电压不平衡度超标'
},
{
name: '10kV2#(治理后)',
type: '电焊机',
whetherToGovern: '2025-05-01 16:00:00',
question: '所有指标均合格'
},
{
name: '380V电焊机(治理前)',
type: '电焊机',
whetherToGovern: '2025-06-01 15:00:00',
question: '5次谐波电流、电压不平衡度超标'
},
{
name: '380V水泵机',
type: '电动机',
whetherToGovern: '2025-08-01 15:00:00',
question: '所有指标均合格'
}
]
if (action == 'securityDetailData') {
console.log('tableArray:', data)
// 处理接收到的 tableArray 数据
tableData.value = data
}
})
// const tableStore: any = new TableStore({
// url: '/user-boot/role/selectRoleDetail?id=0',
// method: 'POST',
// showPage: false,
// column: [
// {
// field: 'index',
// title: '序号',
// width: '80',
// formatter: (row: any) => {
// return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
// }
// },
// {
// title: '时间',
// field: 'whetherToGovern',
// minWidth: '70'
// },
// {
// title: '监测点名',
// field: 'name',
// minWidth: '90'
// // render: 'customTemplate',
// // customTemplate: (row: any) => {
// // return `<span style='cursor: pointer;text-decoration: underline;'>${row.name}</span>`
// // }
// },
// { title: '事件描述', field: 'question', minWidth: '200' }
// ],
// beforeSearchFun: () => {
// // tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
// // tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
// },
// loadCallback: () => {
// tableStore.table.data = [
// {
// name: '10kV1#电动机',
// type: '电动机',
// whetherToGovern: '2025-01-01 15:00:00',
// question: '3次谐波电压、5次谐波电流、电压不平衡度超标'
// },
// {
// name: '10kV2#(治理后)',
// type: '电焊机',
// whetherToGovern: '2025-05-01 16:00:00',
// question: '所有指标均合格'
// },
// {
// name: '380V电焊机(治理前)',
// type: '电焊机',
// whetherToGovern: '2025-06-01 15:00:00',
// question: '5次谐波电流、电压不平衡度超标'
// },
// {
// name: '380V水泵机',
// type: '电动机',
// whetherToGovern: '2025-08-01 15:00:00',
// question: '所有指标均合格'
// }
// ]
// }
// })
const tableRef = ref()
provide('tableRef', tableRef)
const pageHeight = mainHeight(40)
provide('tableStore', tableStore)
// provide('tableRef', tableRef)
// const pageHeight = mainHeight(40)
// provide('tableStore', tableStore)
const reset = () => {
tableRef.value.reset()
// 向 iframe 发送复位事件
sendResetToIframe();
// 清空表格数据
// tableData.value = [];
}
// 向 iframe 发送复位消息的函数
const sendResetToIframe = () => {
const iframe = document.getElementById('iframeLeft') as HTMLIFrameElement;
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage(
{
type: 'RESET_EVENT',
payload: true
},
'*' // 生产环境中应替换为具体的域名
);
}
}
const iframeSrc = ref('')
@@ -154,10 +188,9 @@ const iframeSrc = ref('')
onMounted(() => {
iframeSrc.value =
'http://192.168.1.179:4001' +
`/zutai/?id=4b4f7f4260198776594f5f9d93a532e8&&name=stt&&preview=true#/preview_YPT`
'http://192.168.1.179:4001' + `/zutai/?id=4b4f7f4260198776594f5f9d93a532e8&&name=stt&&preview=true#/preview_YPT`
tableStore.index()
// tableStore.index()
// 监听来自 eventStatistics 组件的消息
window.addEventListener('message', handleMessage)