<template>
|
<div class="AlarmReset">
|
<div style="width: 100%; text-align: center; font-size: 5rem; color: blue"> 报警复位 </div>
|
<div style="margin-top: 3rem">
|
<el-table :data="tableData" style="width: 100%" height="800">
|
<el-table-column prop="Id" label="序号" />
|
<el-table-column prop="AlarmContent" label="报警内容" />
|
<el-table-column prop="ResetStatus" label="复位状态" />
|
<el-table-column prop="AlarmTime" label="报警时间">
|
<template #default="scope">
|
{{ formatTime(scope.row.AlarmTime) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="ResetTime" label="复位时间">
|
<template #default="scope">
|
{{ formatTime(scope.row.ResetTime) }}
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div style="width: 100%; display: flex; justify-content: center; margin-top: 2rem">
|
<el-pagination
|
size="large"
|
:page-size="10"
|
layout="prev, pager, next"
|
:total="total"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
class="mt-4"
|
background
|
/>
|
</div>
|
<div style="width: 100%; display: flex; justify-content: center; margin-top: 4rem">
|
<el-button type="primary" style="width: 10rem; height: 3rem" @click="handleBecomeTrue"
|
>报警复位</el-button
|
>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import { ref, onMounted, onUnmounted } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import { BecomeTrue } from '@/api/newapi/AlarmReset.js'
|
import { formatTime } from '@/utils/index'
|
|
const timer = ref(null)
|
const client = ref(null)
|
const tableData = ref([])
|
const pageSize = ref(10) // 每页显示的条数
|
const currentPage = ref(0) // 当前页码
|
const total = ref(0) // 总条数
|
const isStart = ref(false) // 是否开始
|
const createSocket = (url) => {
|
clearInterval(timer.value)
|
// 创建WebSocket连接
|
//"ws://127.0.0.1:9295/admin"
|
client.value = new WebSocket('ws://192.168.1.103:5174/')
|
client.value.onopen = function () {
|
console.log('WebSocket 连接成功')
|
}
|
client.value.onmessage = function (event) {
|
const data = JSON.parse(event.data)
|
tableData.value = data.Data.slice(
|
currentPage.value * pageSize.value,
|
(currentPage.value + 1) * pageSize.value
|
)
|
total.value = data.Data.length // 更新总条数
|
console.log('WebSocket 接收到消息', tableData.value)
|
}
|
client.value.onclose = function () {
|
console.log('WebSocket 连接关闭')
|
if (isStart.value) {
|
timer.value = setTimeout(createSocket, 1000)
|
}
|
}
|
|
client.value.onerror = function () {}
|
}
|
const handleCurrentChange = (val) => {
|
currentPage.value = val - 1 // 更新当前页码
|
}
|
const account = JSON.parse(localStorage.getItem('user')).userInfo.userName // 获取账号
|
//复位按钮方法
|
const handleBecomeTrue = (val) => {
|
const loadingMessage = ElMessage({
|
message: "正在检查复位中，请稍等...",
|
type: "info",
|
duration: 4000, // 4 秒后自动关闭
|
});
|
BecomeTrue({
|
account: account
|
}).then((res) => {
|
if (res.status == true) {
|
if (res.code == 0) {
|
ElMessage({
|
message: '复位成功',
|
type: 'success'
|
})
|
} else {
|
ElMessage({
|
message: '复位失败',
|
type: 'error'
|
})
|
}
|
} else {
|
ElMessage({
|
message: res.message,
|
type: 'warning'
|
})
|
}
|
})
|
}
|
|
onMounted(() => {
|
isStart.value = true
|
createSocket()
|
})
|
//切换横屏/竖屏
|
// onMounted(() => {
|
// // 统一判断函数
|
// const checkIsMobile = () => {
|
// isMobile.value = window.innerWidth <= 1200; // 假设<=1200是移动端
|
// };
|
|
// // 初始化检查
|
// checkIsMobile();
|
|
// // 监听窗口变化
|
// window.addEventListener('resize', checkIsMobile);
|
|
// // 记得在onUnmounted中移除监听器
|
// onUnmounted(() => {
|
// window.removeEventListener('resize', checkIsMobile);
|
// });
|
// });
|
|
onUnmounted(() => {
|
console.log('WebSocket 连接关闭')
|
isStart.value = false
|
clearInterval(timer.value)
|
if (client.value) {
|
client.value.close()
|
}
|
})
|
</script>
|
<style lang="scss" scoped>
|
.AlarmReset {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
box-sizing: border-box;
|
}
|
</style>
|
