<script setup name="alarmRt">
|
import { ref, reactive, onActivated, watchEffect, nextTick } from "vue";
|
import useWebSocket from "@/hooks/useWebsocket.js";
|
import useElement from "@/hooks/useElement.js";
|
import { confirmAlm, cancelAlm, delAlm } from '@/api/alarm.js';
|
import {
|
getLinfById
|
} from '@/api/lockManager.js';
|
|
import useStation from "@/hooks/useStationList.js";
|
const { stationName1, stationName2, stationName3, stationName4,
|
stationList1, stationList2, stationList3, stationList4, lockList
|
} = useStation();
|
|
const { $loading, $message, $confirm } = useElement();
|
const { sendData, message: listMessage } = useWebSocket("lockAlmRt");
|
const pageCurr = ref(1);
|
const pageSize = ref(10);
|
const total = ref(0);
|
const lockName = ref();
|
const confirmFlag = ref(0);
|
const datas = reactive({
|
tableData: [],
|
keyInfo: {},
|
});
|
|
const checkAll = ref(true)
|
const isIndeterminate = ref(false);
|
// [ 119001-通信故障 119002-开锁失败]
|
const checkedTypes = ref([119001, 119002]);
|
const types = [{
|
value: 119001,
|
label: '通信故障'
|
}, {
|
value: 119002,
|
label: '开锁失败'
|
}
|
];
|
|
const handleCheckAllChange = (val) => {
|
checkedTypes.value = val ? types.map(v => v.value) : []
|
isIndeterminate.value = false
|
}
|
const handleCheckedCitiesChange = (value) => {
|
const checkedCount = value.length
|
checkAll.value = checkedCount === types.length
|
isIndeterminate.value = checkedCount > 0 && checkedCount < types.length
|
sendMessage();
|
}
|
|
function handleSizeChange(val) {
|
pageSize.value = val;
|
sendMessage();
|
}
|
|
function handleCurrentChange(val) {
|
pageCurr.value = val;
|
sendMessage();
|
}
|
|
function sendMessage() {
|
const params = {
|
pageNum: pageCurr.value,
|
pageSize: pageSize.value,
|
lockName: lockName.value || undefined,
|
almIds: checkedTypes.value?.length ? checkedTypes.value.join(',') : 0,
|
confirmFlag: confirmFlag.value,
|
stationName1: stationName1.value || undefined,
|
stationName2: stationName2.value || undefined,
|
stationName3: stationName3.value || undefined,
|
stationName4: stationName4.value || undefined
|
};
|
sendData(JSON.stringify(params));
|
}
|
|
async function getLocks() {
|
if (!areaId.value.length) {
|
$message.error('请选择区域');
|
return false;
|
}
|
let res = await getLinfById(areaId.value[areaId.value.length - 1]);
|
let { code, data, data2 } = res;
|
let _list = [];
|
if (code && data) {
|
_list = data2;
|
}
|
lockList.value = _list;
|
|
}
|
|
watchEffect(() => {
|
if (listMessage.value) {
|
let {
|
total: _total,
|
list
|
} = JSON.parse(listMessage.value).data2;
|
// 告警来源[1-平台触发 2-手机APP触发 3-锁具触发]
|
datas.tableData = list.map(v => ({
|
...v,
|
lockName: v.lockName,
|
almName: types.find(t => t.value == v.almId).label,
|
alarmSource: v.almSource == 1 ? '平台触发' : v.almSource == 2 ? '手机APP触发' : '锁具触发',
|
almConfirmedTime: v.almIsConfirmed ? v.almConfirmedTime : '--',
|
almIsConfirmedStr: v.almIsConfirmed ? '已确认' : '未确认',
|
}));
|
|
total.value = _total;
|
}
|
});
|
|
function confirmAlarm(scope) {
|
$confirm('确认告警', () => {
|
|
confirmAlm(scope.row.num).then(res => {
|
let { code, data } = res;
|
if (code && data) {
|
$message({
|
type: 'success',
|
message: '确认成功!'
|
});
|
sendMessage();
|
} else {
|
$message({
|
type: 'error',
|
message: '确认失败!'
|
});
|
}
|
}).catch(err => {
|
console.log(err);
|
});
|
});
|
}
|
|
function cancelAlarm(scope) {
|
$confirm('取消确认', () => {
|
cancelAlm(scope.row.num).then(res => {
|
let { code, data } = res;
|
if (code && data) {
|
$message({
|
type: 'success',
|
message: '取消成功!'
|
});
|
sendMessage();
|
} else {
|
$message({
|
type: 'error',
|
message: '取消失败!'
|
});
|
}
|
}).catch(err => {
|
console.log(err);
|
})
|
});
|
}
|
|
function areaChange() {
|
sendMessage();
|
// if (!areaId.value.length) {
|
// return false;
|
// }
|
// getLocks();
|
}
|
|
|
function delAlarm(scope) {
|
$confirm('删除告警', () => {
|
delAlm(scope.row.num).then(res => {
|
let { code, data } = res;
|
if (code && data) {
|
$message({
|
type: 'success',
|
message: '删除成功!'
|
});
|
sendMessage();
|
} else {
|
$message({
|
type: 'error',
|
message: '删除失败!'
|
});
|
}
|
}).catch(err => {
|
console.log(err);
|
})
|
});
|
}
|
|
onActivated(() => {
|
sendMessage();
|
});
|
</script>
|
|
<template>
|
<div class="page-wrapper">
|
<div class="page-header"></div>
|
<div class="page-content">
|
<yc-card is-full>
|
<div class="page-content-wrapper">
|
<div class="page-content-tools">
|
<div class="tools-filter">
|
<div class="tools-filter-item">
|
<div class="filter-label">省：</div>
|
<div class="filter-content">
|
<el-select v-model="stationName1" clearable placeholder="请选择" @change="() => nextTick(() => sendMessage())" size="small"
|
style="width: 180px">
|
<el-option v-for="(item, idx) in stationList1" :key="'province_' + idx" :label="item" :value="item" />
|
</el-select>
|
</div>
|
</div>
|
<div class="tools-filter-item">
|
<div class="filter-label">市：</div>
|
<div class="filter-content">
|
<el-select v-model="stationName2" clearable placeholder="请选择" @change="() => nextTick(() => sendMessage())" size="small"
|
style="width: 180px">
|
<el-option v-for="(item, idx) in stationList2" :key="'city_' + idx" :label="item" :value="item" />
|
</el-select>
|
</div>
|
</div>
|
<div class="tools-filter-item">
|
<div class="filter-label">区县：</div>
|
<div class="filter-content">
|
<el-select v-model="stationName3" clearable placeholder="请选择" @change="() => nextTick(() => sendMessage())" size="small"
|
style="width: 180px">
|
<el-option v-for="(item, idx) in stationList3" :key="'list2_' + idx" :label="item" :value="item" />
|
</el-select>
|
</div>
|
</div>
|
<div class="tools-filter-item">
|
<div class="filter-label">机房：</div>
|
<div class="filter-content">
|
<el-select v-model="stationName4" clearable placeholder="请选择" @change="() => nextTick(() => sendMessage())" size="small"
|
style="width: 180px">
|
<el-option v-for="(item, idx) in stationList4" :key="'list3_' + idx" :label="item" :value="item" />
|
</el-select>
|
</div>
|
</div>
|
|
<div class="tools-filter-item">
|
<div class="filter-label">锁具名称：</div>
|
<div class="filter-content">
|
<el-select v-model="lockName" clearable filterable placeholder="请选择" @change="() => nextTick(() => sendMessage())" size="small"
|
style="width: 180px">
|
<el-option v-for="(item, idx) in lockList" :key="'list3_' + idx" :label="item.lockName" :value="item.lockName" />
|
</el-select>
|
</div>
|
</div>
|
<div class="tools-filter-item flex-row">
|
<div class="filter-label">告警类型</div>
|
<el-checkbox
|
class="select-all"
|
v-model="checkAll"
|
:indeterminate="isIndeterminate"
|
@change="handleCheckAllChange"
|
>
|
全选
|
</el-checkbox>
|
<el-checkbox-group
|
v-model="checkedTypes"
|
@change="handleCheckedCitiesChange"
|
>
|
<el-checkbox
|
v-for="(item, idx) in types"
|
:key="'type_' + idx"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-checkbox>
|
</el-checkbox-group>
|
</div>
|
<div class="tools-filter-item flex-row">
|
<div class="filter-label">确认状态</div>
|
<div class="filter-content">
|
<el-radio-group v-model="confirmFlag" @change="sendMessage">
|
<el-radio :value="0">未确认</el-radio>
|
<el-radio :value="1">已确认</el-radio>
|
</el-radio-group>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="page-content-table">
|
<div class="pos-rel">
|
<div class="pos-abs">
|
<el-table
|
:data="datas.tableData"
|
border
|
style="width: 100%; height: 100%"
|
>
|
<el-table-column type="index" fixed="left" width="50" />
|
<el-table-column
|
prop="lockId"
|
align="center"
|
label="锁具ID"
|
width="120"
|
/>
|
<el-table-column
|
prop="lockName"
|
align="center"
|
label="锁具名称"
|
width="140"
|
/>
|
<el-table-column
|
prop="stationName"
|
align="center"
|
label="机房"
|
min-width="180"
|
/>
|
<el-table-column
|
prop="almName"
|
align="center"
|
label="告警名称"
|
width="180"
|
/>
|
<el-table-column
|
prop="alarmSource"
|
align="center"
|
label="告警来源"
|
width="180"
|
/>
|
<el-table-column
|
prop="almIsConfirmedStr"
|
align="center"
|
label="是否确认"
|
width="180"
|
/>
|
<el-table-column
|
prop="almStartTime"
|
width="160"
|
label="告警开始时间"
|
/>
|
<el-table-column
|
prop="almEndTime"
|
width="160"
|
label="告警结束时间"
|
/>
|
<el-table-column
|
prop="almConfirmedTime"
|
width="160"
|
label="告警确认时间"
|
/>
|
<el-table-column
|
align="center"
|
fixed="right"
|
label="操作"
|
width="220"
|
>
|
<template #default="scope">
|
<el-button
|
type="primary"
|
v-if="scope.row.almIsConfirmed == 0"
|
size="small"
|
@click="confirmAlarm(scope)"
|
>确认</el-button
|
>
|
<el-button
|
type="warning"
|
v-else
|
size="small"
|
@click="cancelAlarm(scope)"
|
>取消</el-button
|
>
|
<el-button
|
type="danger"
|
size="small"
|
@click="delAlarm(scope)"
|
>删除</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<div class="page-content-page">
|
<div class="page-tool"></div>
|
<div class="el-page-container">
|
<el-pagination
|
v-model:current-page="pageCurr"
|
v-model:page-size="pageSize"
|
:page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]"
|
size="small"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
<div class="page-tool"></div>
|
</div>
|
</div>
|
</yc-card>
|
</div>
|
<div class="page-footer"></div>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.page-wrapper {
|
display: flex;
|
flex-direction: row;
|
padding: 8px;
|
height: 100%;
|
|
.page-content {
|
flex: 1;
|
}
|
}
|
|
.page-content-wrapper {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
|
.page-content-tools {
|
padding-bottom: 8px;
|
}
|
|
.page-content-table {
|
flex: 1;
|
margin-left: -8px;
|
margin-right: -8px;
|
}
|
|
.page-content-page {
|
padding: 8px 8px 0 8px;
|
text-align: center;
|
|
.el-page-container {
|
display: inline-block;
|
padding: 0 16px;
|
}
|
|
.page-tool {
|
display: inline-block;
|
}
|
}
|
}
|
|
.hdw-card-container {
|
width: 240px;
|
padding-right: 8px;
|
height: 100%;
|
}
|
|
.pos-rel {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
.pos-abs {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.tools-filter {
|
display: inline-block;
|
font-size: 14px;
|
|
.tools-filter-item {
|
display: inline-block;
|
margin-right: 8px;
|
|
&.flex-row {
|
display: inline-flex;
|
align-items: center;
|
|
.select-all {
|
margin: 0 16px;
|
}
|
}
|
|
.filter-label {
|
display: inline-block;
|
margin-right: 0.4em;
|
}
|
|
.filter-content {
|
min-width: 160px;
|
display: inline-block;
|
}
|
}
|
}
|
</style>
|
