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

微调

Browse Source
This commit is contained in:
guanj
2025-08-27 19:25:29 +08:00
parent e277fd01a3
commit 10e3495a97
3 changed files with 758 additions and 746 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
src/layouts/admin/components/globalPopUp.vue
View File

@@ -1,96 +1,108 @@
<template>
<div>
<!-- 全局暂降事件 -->
<el-drawer v-model="drawer" title="暂降事件" size="1050px" :before-close="handleClose">
<div :style="height">
<vxe-table
v-bind="defaultAttribute"
v-loading="isLoading"
height="100%"
ref="xTable1Ref"
:data="eventList"
>
<vxe-column type="seq" width="70px" title="序号"></vxe-column>
<vxe-column field="time" width="180px" sortable title="发生时刻"></vxe-column>
<vxe-column field="lineName" title="监测点"></vxe-column>
<vxe-column field="powerCompany" title="变电站" width="100px"></vxe-column>
<vxe-column field="powerCompany" title="供电公司" width="100px"></vxe-column>
<vxe-column field="persistTime" width="120px" sortable title="持续时间(s)">
<template #default="{ row }">
{{ Math.floor(row.persistTime * 1000) / 1000 }}
</template>
</vxe-column>
<vxe-column field="eventValue" width="160px" sortable title="暂降(骤升)幅值(%)">
<template #default="{ row }">
{{ Math.floor(row.eventValue * 10000) / 100 }}
</template>
</vxe-column>
<vxe-column field="eventType" width="100px" title="暂降类型">
<template #default="{ row }">
{{ event.filter(item => item.id == row.eventType)[0]?.name || '/' }}
</template>
</vxe-column>
</vxe-table>
</div>
</el-drawer>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { mainHeight } from '@/utils/layout'
import { useDictData } from '@/stores/dictData'
import MQTT from '@/utils/mqtt'
const dictData = useDictData()
const event = dictData.getBasicData('Event_Statis')
import { useAdminInfo } from '@/stores/adminInfo'
const adminInfo = useAdminInfo()
const height = mainHeight(-20)
const drawer = ref(false)
const isLoading = ref(false)
const eventList = ref([])
const open = () => {
drawer.value = true
}
const handleClose = (done: any) => {
drawer.value = false
done()
}
const init = async () => {
const mqttClient = new MQTT('/sendEvent')
// 设置消息接收回调
try {
await mqttClient.init()
// 订阅主题
await mqttClient.subscribe()
// 设置消息接收回调
mqttClient.onMessage((topic, message) => {
const msg = JSON.parse(message.toString())
console.log("🚀 ~ init ~ msg:", msg)
if (msg.deptList.includes(adminInfo.$state.deptId)) {
drawer.value = true
isLoading.value = true
eventList.value.unshift(msg)
setTimeout(() => {
isLoading.value = false
}, 500)
}
})
} catch (error) {
console.error('MQTT 初始化失败:', error)
}
}
onMounted(() => {
// startMqtt('/sendEvent', (topic, message) => {
// const msg = JSON.parse(message.toString())
// console.log(msg)
// })
init()
})
defineExpose({
open,
eventList
})
</script>
<style lang="scss" scoped></style>
<template>
<div>
<!-- 全局暂降事件 -->
<el-drawer v-model="drawer" title="暂降事件" size="1050px" :before-close="handleClose">
<div :style="height">
<vxe-table
v-bind="defaultAttribute"
v-loading="isLoading"
height="100%"
ref="xTable1Ref"
:data="eventList.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
>
<!-- <vxe-column type="seq" width="70px" title="序号"></vxe-column> -->
<vxe-column field="time" width="180px" sortable title="发生时刻"></vxe-column>
<vxe-column field="lineName" title="监测点"></vxe-column>
<vxe-column field="powerCompany" title="变电站" width="100px"></vxe-column>
<vxe-column field="powerCompany" title="供电公司" width="100px"></vxe-column>
<vxe-column field="persistTime" width="120px" sortable title="持续时间(s)">
<template #default="{ row }">
{{ Math.floor(row.persistTime * 1000) / 1000 }}
</template>
</vxe-column>
<vxe-column field="eventValue" width="160px" sortable title="暂降(骤升)幅值(%)">
<template #default="{ row }">
{{ Math.floor(row.eventValue * 10000) / 100 }}
</template>
</vxe-column>
<vxe-column field="eventType" width="100px" title="暂降类型">
<template #default="{ row }">
{{ event.filter(item => item.id == row.eventType)[0]?.name || '/' }}
</template>
</vxe-column>
</vxe-table>
<div class="table-pagination mt10">
<el-pagination
v-model:currentPage="pageNum"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 50, 100, 200]"
background
layout="sizes,total, ->, prev, pager, next, jumper"
:total="eventList.length"
></el-pagination>
</div>
</div>
</el-drawer>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { mainHeight } from '@/utils/layout'
import { useDictData } from '@/stores/dictData'
import MQTT from '@/utils/mqtt'
const dictData = useDictData()
const event = dictData.getBasicData('Event_Statis')
import { useAdminInfo } from '@/stores/adminInfo'
const adminInfo = useAdminInfo()
const height = mainHeight(20)
const drawer = ref(false)
const isLoading = ref(false)
const eventList = ref([])
const pageNum = ref(1)
const pageSize = ref(20)
const open = () => {
drawer.value = true
}
const handleClose = (done: any) => {
drawer.value = false
done()
}
const init = async () => {
const mqttClient = new MQTT('/sendEvent')
// 设置消息接收回调
try {
await mqttClient.init()
// 订阅主题
await mqttClient.subscribe()
// 设置消息接收回调
mqttClient.onMessage((topic, message) => {
const msg = JSON.parse(message.toString())
console.log('🚀 ~ init ~ msg:', msg)
if (msg.deptList.includes(adminInfo.$state.deptId)) {
drawer.value = true
isLoading.value = true
eventList.value.unshift(msg)
setTimeout(() => {
isLoading.value = false
}, 500)
}
})
} catch (error) {
console.error('MQTT 初始化失败:', error)
}
}
onMounted(() => {
// startMqtt('/sendEvent', (topic, message) => {
// const msg = JSON.parse(message.toString())
// console.log(msg)
// })
init()
})
defineExpose({
open,
eventList
})
</script>
<style lang="scss" scoped></style>