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

193
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,
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'
// 在父页面中添加事件监听器
window.addEventListener('message', function (event) {
const { action, data } = event.data
// 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)
@@ -235,7 +268,7 @@ const sendKeysToIframe = (keyList: string[]) => {
padding: 10px;
height: 100%;
.buttonBox {
display: flex;
display: flex;
width: 150px;
align-items: center;
justify-content: center;