<template>
|
<div class="AlarmReset">
|
<div style="width: 100%; text-align: center; font-size: 5rem; color: #fff">
|
报警复位
|
</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.js";
|
|
const timer = ref(null);
|
const client = ref(null);
|
const tableData = ref([]);
|
const pageSize = ref(10); // 每页显示的条数
|
const currentPage = ref(0); // 当前页码
|
const total = ref(0); // 总条数
|
const createSocket = (url) => {
|
clearInterval(timer.value);
|
// 创建WebSocket连接
|
//"ws://127.0.0.1:9295/admin"
|
client.value = new WebSocket("ws://192.168.0.80:5173/");
|
client.value.onopen = function () {
|
console.log("WebSocket 连接成功");
|
};
|
client.value.onmessage = function (event) {
|
let 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 连接关闭");
|
timer.value = setTimeout(createSocket, 1000);
|
};
|
|
client.value.onerror = function () {};
|
};
|
const handleCurrentChange = (val) => {
|
currentPage.value = val - 1; // 更新当前页码
|
};
|
const account = JSON.parse(localStorage.getItem("user")).userName; // 获取账号
|
//复位按钮方法
|
const handleBecomeTrue = (val) => {
|
BecomeTrue({
|
account: account,
|
}).then((res) => {
|
if (res.code == 0) {
|
ElMessage({
|
message: "复位成功",
|
type: "success",
|
});
|
} else {
|
ElMessage({
|
message: "复位失败",
|
type: "error",
|
});
|
}
|
});
|
};
|
|
onMounted(() => {
|
createSocket();
|
});
|
|
onUnmounted(() => {
|
clearInterval(timer.value);
|
if (client.value) {
|
client.value.close();
|
}
|
});
|
</script>
|
<style lang="scss" scoped>
|
.AlarmReset {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
background-color: rgba(0, 0, 0, 0.2);
|
box-sizing: border-box;
|
}
|
</style>
|
