<template>
|
<div class="AlarmReset">
|
<div
|
:style="{
|
width: '100%',
|
textAlign: 'center',
|
fontSize: isMin ? '5rem' : '2rem',
|
color: '#fff',
|
}"
|
>
|
报警复位
|
</div>
|
<div style="margin-top: 3rem">
|
<el-table
|
empty-text="暂无数据"
|
:data="tableData"
|
style="width: 100%"
|
:height="isMin ? '800' : '450'"
|
>
|
<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',
|
justifyContent: 'center',
|
marginTop: isMin ? '4rem' : '2rem',
|
}"
|
>
|
<el-button
|
type="primary"
|
:style="{
|
width: isMin ? '16rem' : '10rem',
|
height: isMin ? '5rem' : '2.5rem',
|
}"
|
@click="handleBecomeTrue"
|
><span :style="{ fontSize: isMin ? '3rem' : '1.5rem' }">
|
报警复位</span
|
></el-button
|
>
|
<el-button
|
type="primary"
|
:style="{
|
width: isMin ? '20rem' : '10rem',
|
height: isMin ? '5rem' : '2.5rem',
|
}"
|
@click="handleClearAlarm"
|
><span :style="{ fontSize: isMin ? '3rem' : '1.5rem' }">
|
清除报警信息</span
|
></el-button
|
>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import { ref, onMounted, onUnmounted } from "vue";
|
import { ElMessage } from "element-plus";
|
import { BecomeTrue, ClearAlarm } 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 isStart = ref(false); // 是否开始
|
const positionvalue = ref({}); // 位置值
|
|
const createSocket = (url) => {
|
clearInterval(timer.value);
|
// 创建WebSocket连接
|
//"ws://127.0.0.1:9295/admin"
|
//192.168.1.103
|
client.value = new WebSocket("ws://192.168.1.103:5173/");
|
client.value.onopen = function () {
|
console.log("WebSocket 连接成功");
|
};
|
client.value.onmessage = function (event) {
|
let data = JSON.parse(event.data);
|
if (data.Status) {
|
tableData.value = data.Data.slice(
|
currentPage.value * pageSize.value,
|
(currentPage.value + 1) * pageSize.value
|
);
|
total.value = data.Data.length; // 更新总条数
|
} else {
|
positionvalue.value = data;
|
}
|
|
console.log("WebSocket 接收到消息", data);
|
};
|
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")).userName; // 获取账号
|
//复位按钮方法
|
const handleBecomeTrue = () => {
|
BecomeTrue().then((res) => {
|
if (res.code == 0) {
|
ElMessage({
|
message: "复位成功",
|
type: "success",
|
});
|
} else {
|
ElMessage({
|
message: "复位失败",
|
type: "error",
|
});
|
}
|
});
|
};
|
//清除报警信息方法
|
const handleClearAlarm = () => {
|
ClearAlarm().then((res) => {
|
if (res.code == 0) {
|
ElMessage({
|
message: "清除成功",
|
type: "success",
|
});
|
}
|
});
|
};
|
const isMin = ref(false); // 是否最小化
|
onMounted(() => {
|
isMin.value = window.innerWidth <= 1080; // 判断是否最小化
|
isStart.value = true; // 设置为开始状态
|
createSocket();
|
});
|
|
onUnmounted(() => {
|
isStart.value = false;
|
clearInterval(timer.value);
|
if (client.value) {
|
client.value.close();
|
}
|
clearInterval(timer.value);
|
});
|
</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>
|
