实时数据页面
This commit is contained in:
stt
@@ -1,8 +1,243 @@
|
|||||||
<template>
|
<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>
|
</template>
|
||||||
<script setup lang="ts">
|
<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>
|
</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>
|
||||||
|
|||||||
Reference in New Issue
Block a user