314 lines
9.8 KiB
Vue
314 lines
9.8 KiB
Vue
<template>
|
||
<div class="default-main" :style="{ padding: prop.height ? '0px !important' : '10px' }">
|
||
<!-- 实时数据 -->
|
||
<!-- 实时数据 走驾驶舱-->
|
||
<!-- 添加加载事件监听 -->
|
||
<div class="dataBox" :style="{ height: prop.height ? prop.height : pageHeight.height }">
|
||
<div
|
||
class="iframe-container"
|
||
:style="{
|
||
boxShadow: `var(--el-box-shadow-light)`
|
||
}"
|
||
style="position: relative"
|
||
>
|
||
<iframe
|
||
v-if="bindId"
|
||
:key="bindId"
|
||
:src="iframeSrc"
|
||
width="100%"
|
||
height="100%"
|
||
frameborder="0"
|
||
scrolling="no"
|
||
id="iframeLeft"
|
||
@load="onIframeLoad"
|
||
></iframe>
|
||
<el-empty v-else description="暂无绑定页面" style="height: 100%" />
|
||
</div>
|
||
</div>
|
||
<div class="bottom-container">
|
||
<el-button
|
||
type="primary"
|
||
:icon="show ? 'el-icon-ArrowDownBold' : 'el-icon-ArrowUpBold'"
|
||
@click="show = !show"
|
||
style="width: 100%"
|
||
>
|
||
事件列表
|
||
</el-button>
|
||
<!-- <el-button class="bindBut" type="primary" icon="el-icon-Sort" @click="bindClick">绑定</el-button> -->
|
||
|
||
<el-icon class="bindBut">
|
||
<Sort style="width: 30px; height: 30px" color="#fff" @click="bindClick" />
|
||
</el-icon>
|
||
<!-- <div class="buttonBox">
|
||
<el-button type="primary" icon="el-icon-Aim" @click="reset">复位</el-button>
|
||
</div> -->
|
||
|
||
<transition name="table-fade">
|
||
<div class="tableBox" v-if="show">
|
||
<vxe-table
|
||
border
|
||
auto-resize
|
||
height="230px"
|
||
:data="tableData"
|
||
ref="tableRef"
|
||
v-bind="defaultAttribute"
|
||
>
|
||
<vxe-column type="seq" title="序号" align="center" width="80px"></vxe-column>
|
||
<vxe-column field="date" align="center" sortable 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>
|
||
</transition>
|
||
</div>
|
||
<!--绑定实时数据 -->
|
||
<Bind ref="bindRef" @bindClick="info" />
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
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 { defaultAttribute } from '@/components/table/defaultAttribute'
|
||
import { Sort } from '@element-plus/icons-vue'
|
||
import { useAdminInfo } from '@/stores/adminInfo'
|
||
import { audit, add, coFqueryPage, getByUserId } from '@/api/cs-harmonic-boot/mxgraph'
|
||
import Bind from './bind.vue'
|
||
// import { getActive } from "@/api/manage_wx/index";
|
||
|
||
// const props = defineProps<{
|
||
// project: { id: string; name: string } | null
|
||
// }>()
|
||
const adminInfo = useAdminInfo()
|
||
const show = ref(false)
|
||
const prop = defineProps({
|
||
width: { type: [String, Number] },
|
||
height: { type: [String, Number] },
|
||
timeKey: { type: Array as () => string[] },
|
||
timeValue: { type: Object }
|
||
})
|
||
const bindRef = ref()
|
||
const tableData = ref([])
|
||
const bindId = ref('')
|
||
|
||
// 在父页面中添加事件监听器
|
||
window.addEventListener('message', function (event) {
|
||
const { action, data } = event.data
|
||
|
||
if (action == 'securityDetailData') {
|
||
// 处理接收到的 tableArray 数据
|
||
tableData.value = data
|
||
}
|
||
})
|
||
|
||
const tableRef = ref()
|
||
|
||
const pageHeight = mainHeight(40)
|
||
const bindClick = () => {
|
||
bindRef.value.open()
|
||
}
|
||
|
||
const 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('')
|
||
|
||
// 监听 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(async () => {
|
||
info()
|
||
// tableStore.index()
|
||
// 监听来自 eventStatistics 组件的消息
|
||
// 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`;
|
||
// }
|
||
// });
|
||
})
|
||
const info = async () => {
|
||
iframeSrc.value = ''
|
||
await getByUserId({ userId: adminInfo.id })
|
||
.then(res => {
|
||
bindId.value = res.data.pageId
|
||
})
|
||
.catch(async err => {
|
||
// bindId.value = '4b4f7f4260198776594f5f9d93a532e8'
|
||
await coFqueryPage({
|
||
currentUserId: adminInfo.id,
|
||
roleCode: adminInfo.roleCode.join(','),
|
||
searchValue: '',
|
||
pageNum: 1,
|
||
pageSize: 1000
|
||
}).then(res => {
|
||
bindId.value = res.data.records.filter(item => item.scope == 1)[0]?.id || null
|
||
})
|
||
})
|
||
await setTimeout(() => {
|
||
iframeSrc.value = window.location.origin + `/zutai/?id=${bindId.value}&&name=stt&&preview=true#/preview_YPT`
|
||
// iframeSrc.value = `http://192.168.2.128:4001/zutai/?id=${bindId.value}&&name=stt&&preview=true#/preview_YPT`
|
||
window.addEventListener('message', handleMessage)
|
||
}, 0)
|
||
}
|
||
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>
|
||
.dataBox {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.iframe-container {
|
||
flex: 3.5;
|
||
}
|
||
|
||
.bottom-container {
|
||
position: absolute;
|
||
width: 100%;
|
||
bottom: 0px;
|
||
|
||
.buttonBox {
|
||
display: flex;
|
||
width: 150px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.tableBox {
|
||
flex: 1;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.tableBox {
|
||
/* 必须：初始高度/overflow 配合动画 */
|
||
overflow: hidden;
|
||
/* 与表格高度一致，保证展开后高度正确 */
|
||
height: 230px;
|
||
// margin-top: 10px;
|
||
}
|
||
|
||
/* 过渡动画核心样式 */
|
||
.table-fade-enter-from,
|
||
.table-fade-leave-to {
|
||
/* 关闭时：高度收为0 + 透明度0 */
|
||
height: 0;
|
||
opacity: 0;
|
||
}
|
||
|
||
.table-fade-enter-to,
|
||
.table-fade-leave-from {
|
||
/* 展开时：高度恢复 + 透明度1 */
|
||
height: 230px;
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 动画过渡时长 + 曲线（可自定义） */
|
||
.table-fade-enter-active,
|
||
.table-fade-leave-active {
|
||
transition: all 0.3s ease;
|
||
/* 防止动画过程中出现滚动条 */
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 解决动画结束后瞬间闪回的问题 */
|
||
.table-fade-enter-active {
|
||
transition-delay: 0.05s;
|
||
}
|
||
|
||
.bindBut {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 7px;
|
||
cursor: pointer;
|
||
font-size: 18px;
|
||
}
|
||
</style>
|