<script setup name="alarmRt">
|
import useWebSocket from "@/hooks/useWebSocket";
|
import {
|
ref,
|
reactive,
|
onMounted,
|
watchEffect,
|
computed,
|
onActivated,
|
} from "vue";
|
import { getAllDevs } from "@/views/user/api.js";
|
import { getAllAlmName, confiirmAlm } from "./api.js";
|
|
const { sendData, message } = useWebSocket("dalmSocket");
|
|
const headers = [
|
{
|
prop: "devId",
|
label: "设备ID",
|
width: "",
|
},
|
{
|
prop: "devIdcode",
|
label: "设备编号",
|
width: "",
|
},
|
{
|
prop: "devTypeStr",
|
label: "设备类型",
|
width: "",
|
},
|
// {
|
// prop: "uname",
|
// label: "测试类型",
|
// width: "",
|
// },
|
{
|
prop: "almName",
|
label: "告警名称",
|
width: "",
|
},
|
{
|
prop: "almStarttime",
|
label: "告警开始时间",
|
width: "",
|
},
|
{
|
prop: "isConfirm",
|
label: "告警确认",
|
width: "",
|
},
|
{
|
prop: "confirmedTime",
|
label: "告警确认时间",
|
width: "",
|
},
|
];
|
const pageCurr = ref(1);
|
const pageSize = ref(10);
|
const total = ref(0);
|
const datas = reactive({
|
tableData: [],
|
userInfo: {},
|
});
|
const devType = ref(0);
|
const testType = ref();
|
const almId = ref(0);
|
const alarmList = ref([]);
|
const startTime = ref();
|
const endTime = ref();
|
|
const devId = ref(0);
|
const devList = ref([]);
|
|
function confirmAlarm(params) {
|
confiirmAlm(params.num)
|
.then((res) => {
|
let { code, data } = res.data;
|
if (code && data) {
|
console.log(data);
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
}
|
|
// 展示数据数量
|
function handleSizeChange(val) {
|
pageSize.value = val;
|
sendMessage();
|
}
|
// 翻页
|
function handleCurrentChange(val) {
|
pageCurr.value = val;
|
sendMessage();
|
}
|
|
watchEffect(() => {
|
let _total = 0;
|
let _list = [];
|
if (message.value) {
|
const {
|
code,
|
data2: { total: total0, list },
|
} = JSON.parse(message.value);
|
|
_total = total0;
|
_list = list.map((v) => {
|
v.devIdcode = v.devInf.devIdcode;
|
v.isConfirm = !v.almIsConfirmed ? "未确认" : "已确认";
|
v.devTypeStr = ["", "充放电一体机", "均衡测试仪"][v.devInf.devType];
|
return v;
|
});
|
}
|
total.value = _total;
|
datas.tableData = _list;
|
});
|
|
function sendMessage() {
|
sendData(
|
JSON.stringify({
|
almId: almId.value ? almId.value : undefined,
|
devType: devType.value ? devType.value : undefined,
|
endTime: endTime.value ? endTime.value + " 23:59:59" : undefined,
|
pageNum: pageCurr.value,
|
pageSize: pageSize.value,
|
startTime: startTime.value ? startTime.value + " 00:00:00" : undefined,
|
})
|
);
|
}
|
|
function getDevs(params) {
|
getAllDevs()
|
.then((res) => {
|
let { code, data, data2 } = res.data;
|
let _list = [];
|
if (code && data) {
|
_list = data2.map((v) => ({
|
label: `${v.devIdcode} (${v.devIp})`,
|
key: v.devId,
|
}));
|
}
|
devList.value = _list;
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
}
|
|
function getAlarmNames() {
|
getAllAlmName()
|
.then((res) => {
|
let { code, data, data2 } = res.data;
|
let _list = [];
|
if (code && data) {
|
Object.keys(data2).forEach((v) => {
|
_list.push({
|
id: v,
|
name: data2[v],
|
});
|
});
|
}
|
|
alarmList.value = _list;
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
}
|
|
onActivated(() => {
|
console.log("a", "=============");
|
});
|
|
onMounted(() => {
|
getAlarmNames();
|
sendMessage();
|
getDevs();
|
});
|
</script>
|
|
<template>
|
<div class="page">
|
<div class="filter">
|
<div class="label">设备类型</div>
|
<div class="content select-wrap">
|
<el-select
|
v-model="devType"
|
class="yc-select"
|
@change="sendMessage"
|
placeholder="Select"
|
>
|
<el-option label="全部" :value="0" />
|
<el-option label="充放电一体机" :value="1" />
|
<el-option label="均衡测试仪" :value="2" />
|
</el-select>
|
</div>
|
<div class="label">设备名称</div>
|
<div class="content select-wrap">
|
<el-select v-model="devId" class="yc-select" placeholder="Select">
|
<el-option label="全部" :value="0" />
|
<el-option
|
v-for="dev in devList"
|
:key="dev.key"
|
:label="dev.label"
|
:value="dev.key"
|
/>
|
</el-select>
|
</div>
|
<div class="label">告警名称</div>
|
<div class="content select-wrap">
|
<el-select
|
v-model="almId"
|
class="yc-select"
|
@change="sendMessage"
|
placeholder="Select"
|
>
|
<el-option label="全部" :value="0" />
|
<el-option
|
v-for="item in alarmList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</div>
|
<div class="label">告警开始时间</div>
|
<div class="content">
|
<el-date-picker
|
class="yc-datepicker"
|
v-model="startTime"
|
value-format="YYYY-MM-DD"
|
@change="sendMessage"
|
type="date"
|
placeholder="请选择"
|
/>
|
至
|
<el-date-picker
|
class="yc-datepicker"
|
v-model="endTime"
|
value-format="YYYY-MM-DD"
|
@change="sendMessage"
|
type="date"
|
placeholder="请选择"
|
/>
|
</div>
|
</div>
|
<div class="p-content">
|
<!-- 用户列表 -->
|
<div class="table-wrap">
|
<el-table
|
class="yc-table"
|
stripe
|
height="100%"
|
size="small"
|
:data="datas.tableData"
|
style="width: 100%"
|
>
|
<el-table-column
|
type="index"
|
label="序号"
|
width="80"
|
></el-table-column>
|
<el-table-column
|
v-for="header in headers"
|
:key="header.prop"
|
:prop="header.prop"
|
:label="header.label"
|
:min-width="header.width"
|
align="center"
|
></el-table-column>
|
<el-table-column label="操作" width="360" align="center">
|
<template #default="scope">
|
<el-button
|
v-if="!scope.row.almIsConfirmed"
|
type="primary"
|
size="small"
|
@click="confirmAlarm(scope.row)"
|
>确认</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<!-- 底部 -->
|
<!-- 底部分页 -->
|
<el-pagination
|
class="yc-pagination"
|
:current-page="pageCurr"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:page-sizes="[10, 20, 30, 50, 100]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
></el-pagination>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.page {
|
height: 100%;
|
padding: 0 8px;
|
display: flex;
|
flex-direction: column;
|
.filter {
|
display: grid;
|
grid-template-rows: 1fr;
|
grid-template-columns: 7em 1fr 7em 1fr 7em 1fr 7em 2fr;
|
grid-auto-flow: column;
|
grid-auto-columns: 1fr;
|
gap: 10px;
|
// place-items: end;
|
.label {
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
&::after {
|
content: ":";
|
}
|
}
|
.content {
|
display: flex;
|
align-items: center;
|
}
|
}
|
.p-content {
|
flex: 1;
|
margin-top: 4px;
|
display: flex;
|
flex-direction: column;
|
.table-wrap {
|
flex: 1;
|
margin-top: 6px;
|
margin-bottom: 6px;
|
}
|
}
|
}
|
</style>
|
