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-10-21 14:56:27 +08:00
parent a236693cf6
commit 987441f2df
1 changed files with 239 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,243 @@
<template>
<div class="main">
<!-- 实时数据 -->
<div>123</div>
<!-- 添加加载事件监听 -->
<div class="iframe-container" style="border: #1c3068 solid 1px">
<iframe
:src="iframeSrc"
width="100%"
height="100%"
frameborder="0"
scrolling="no"
id="iframeLeft"
@load="onIframeLoad"
></iframe>
</div>
<div class="bottom-container">
<div>
<el-button size="small">复位</el-button>
</div>
<div>
<Table ref="tableRef" isGroup height="100%"></Table>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ref, watch, onMounted, onUnmounted, provide } from 'vue'
import Table from '@/components/table/index.vue'
import TableStore from '@/utils/tableStore'
import { mainHeight } from '@/utils/layout'
// import { getActive } from "@/api/manage_wx/index";
// const props = defineProps<{
// project: { id: string; name: string } | null
// }>()
const prop = defineProps({
width: { type: String },
height: { type: String },
timeKey: { type: String },
timeValue: { type: Object }
})
const tableStore: any = new TableStore({
url: '/user-boot/role/selectRoleDetail?id=0',
method: 'POST',
showPage: false,
exportName: '主要监测点列表',
column: [
{
field: 'index',
title: '序号',
width: '60',
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)
provide('tableStore', tableStore)
const iframeSrc = ref('')
// 监听 props 变化
// watch(
// () => props.project,
// newVal => {
// if (newVal && newVal.id && newVal.name) {
// // window.location.origin
// // iframeSrc.value =
// // "http://192.168.1.179:4001" +
// // `/zutai/?id=${newVal.id}&&name=${encodeURIComponent(
// // newVal.name
// // )}&&preview=true&&display=true&&graphicDisplay=wx#/preview`;
// iframeSrc.value =
// 'http://192.168.1.179:4001' +
// `/zutai/?id=4b4f7f4260198776594f5f9d93a532e8&&name=stt&&preview=true&&display=true#/preview_YPT`
// // console.log("更新 iframeSrc:", iframeSrc.value);
// }
// },
// { immediate: true, deep: true }
// )
onMounted(() => {
iframeSrc.value =
'http://192.168.1.179:4001' +
`/zutai/?id=4b4f7f4260198776594f5f9d93a532e8&&name=stt&&preview=true&&display=true#/preview_YPT`
tableStore.index()
// 监听来自 eventStatistics 组件的消息
window.addEventListener('message', handleMessage)
// getActive({}).then((res: any) => {
// if (res.code == "A0000") {
// // window.location.origin
// iframeSrc.value =
// "http://192.168.1.179:4001" +
// `/zutai/?id=${res.data.id}&&name=${encodeURIComponent(
// res.data.name
// )}&&preview=true&&display=true&&graphicDisplay=wx#/preview`;
// }
// });
})
onUnmounted(() => {
// 清理事件监听器
window.removeEventListener('message', handleMessage)
})
// iframe 加载完成回调 添加加载事件监听
const onIframeLoad = () => {
// console.log("iframe 加载完成");
// 通知 securityDetail.vue 组件 iframe 已加载完成
window.postMessage(
{
type: 'IFRAME_LOADED',
data: { loaded: true }
},
'*'
)
}
// 处理来自 eventStatistics 组件的消息
const handleMessage = (event: MessageEvent) => {
// 验证消息来源（在生产环境中应该验证 origin）
// if (event.origin !== 'trusted-origin') return;
const { type, payload } = event.data
if (type === 'SEND_KEYS_TO_IFRAME') {
// 将数据转发给 iframe
sendKeysToIframe(payload)
}
}
// 向 iframe 发送 keyList 数据
const sendKeysToIframe = (keyList: string[]) => {
const iframe = document.getElementById('iframeLeft') as HTMLIFrameElement
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage(
{
type: 'ANALYSIS_KEYS',
payload: keyList
},
'*'
) // 在生产环境中应该指定具体的域名而不是 '*'
}
}
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.main {
width: 100%;
height: 100%;
padding: 5px;
display: flex;
flex-direction: column;
overflow: hidden; /* 添加这行 */
}
.iframe-container {
flex: 3.5;
overflow: hidden; /* 添加这行 */
}
.bottom-container {
flex: 0.5;
display: flex;
// align-items: stretch;
padding: 5px 0;
overflow: hidden; /* 添加这行 */
}
.bottom-container > div:first-child {
display: flex;
// width: 6%;
flex: 1;
align-items: center;
}
.bottom-container > div:last-child {
flex: 18;
// width: 94%;
height: 100%;
overflow: auto; /* 添加这行，关键点 */
}
</style>