<script setup name="devAlarm">
|
import { ref, reactive, onMounted, computed, nextTick, watch, } from "vue";
|
import { storeToRefs } from "pinia";
|
import { Search, Plus } from "@element-plus/icons-vue";
|
import ycCard from "@/components/ycCard/index.vue";
|
// import addEdit from "./addEdit.vue";
|
import { ElMessage } from "element-plus";
|
import useElement from "@/hooks/useElement.js";
|
import { useUserStore } from '@/store/user';
|
|
import useStation from "@/hooks/useStationList.js";
|
const { provice, city, country, stationName,
|
proviceList, cityList, countryList, stationList,
|
} = useStation();
|
|
import powerTypes from '@/utils/const/const_powerType.js';
|
import { ExportFile } from '@/utils/exportFile.js';
|
import { useRouter } from "vue-router";
|
const router = useRouter();
|
|
const userStore = useUserStore();
|
const { uid, uname } = storeToRefs(userStore);
|
|
import useWebSocket from "@/hooks/useWebSocket.js";
|
const { message, sendData } = useWebSocket("devAlmReal");
|
|
import {
|
confirmDevAlm,
|
} from "@/api/alarm.js";
|
|
import {
|
getDevAlmIdType,
|
} from "@/api/station.js";
|
|
const { $loading, $message, $confirm } = useElement();
|
|
const alarmLevel = ref();
|
const alarmLevels = [
|
{
|
label: '一级告警',
|
value: 1,
|
},
|
{
|
label: '二级告警',
|
value: 2,
|
},
|
{
|
label: '三级告警',
|
value: 3,
|
},
|
{
|
label: '四级告警',
|
value: 4,
|
},
|
];
|
|
const headers = [
|
// {
|
// prop: "provice",
|
// label: "省",
|
// width: "80",
|
// },
|
// {
|
// prop: "city",
|
// label: "市",
|
// width: "80",
|
// },
|
// {
|
// prop: "country",
|
// label: "区县",
|
// width: "80",
|
// },
|
{
|
prop: "fullName",
|
label: "机房名称",
|
width: "160",
|
},
|
// {
|
// prop: "stationType",
|
// label: "电压等级",
|
// width: "80",
|
// },
|
{
|
prop: "devName",
|
label: "设备名称",
|
width: "120",
|
},
|
{
|
prop: "almId",
|
label: "告警类型",
|
width: "120",
|
},
|
{
|
prop: "almValue",
|
label: "告警值",
|
width: "120",
|
},
|
{
|
prop: "almLevelStr",
|
label: "告警等级",
|
width: "120",
|
},
|
{
|
prop: "almStartTime",
|
label: "告警开始时间",
|
width: "120",
|
},
|
{
|
prop: "almIsConfirmed",
|
label: "告警是否确认",
|
width: "120",
|
},
|
{
|
prop: "almConfirmedTime",
|
label: "告警确认时间",
|
width: "120",
|
},
|
];
|
|
const background = ref(true);
|
const disabled = ref(false);
|
const pageCurr = ref(1);
|
const pageSize = ref(10);
|
const total = ref(0);
|
const addEditVisible = ref(false);
|
const dialogTitle = ref("");
|
const currentAreaId = ref();
|
const currentAreaIds = ref([]);
|
const datas = reactive({
|
tableData: [],
|
rowData: {},
|
});
|
|
const almIds = ref([]);
|
const alarmTypeList = ref([]);
|
|
// const tableData = reactive([]);
|
// const rowData = reactive({});
|
|
// const userStore = useUserStore();
|
// const { uid, uname } = storeToRefs(userStore);
|
const checkAll = ref(true);
|
const isIndeterminate = ref(false);
|
|
function handleCheckAllChange (val) {
|
almIds.value = val ? alarmTypeList.value.map(v => v.value) : []
|
isIndeterminate.value = false
|
}
|
function handleCheckedChange (value) {
|
const checkedCount = value.length
|
checkAll.value = checkedCount === alarmTypeList.value.length
|
isIndeterminate.value = checkedCount > 0 && checkedCount < alarmTypeList.value.length
|
}
|
|
// 查询告警类型
|
async function getAlarmType() {
|
let res = await getDevAlmIdType();
|
let { code, data, data2 } = res;
|
let list = [];
|
if (code && data) {
|
list = Object.keys(data2).map((key) => ({value: key, label: data2[key]}));
|
}
|
alarmTypeList.value = list;
|
almIds.value = list.map(v => v.value);
|
}
|
|
// almIds: [119001],
|
// almLevel: "1",
|
// city: "武汉市",
|
// country: "东西湖区",
|
// pageNum: 1,
|
// pageSize: 10,
|
// provice: "湖北省",
|
// stationName: "测试机房6",
|
function sendMessage() {
|
let params = {
|
almIds: almIds.value,
|
almLevel: alarmLevel.value || undefined,
|
provice: provice.value || undefined,
|
city: city.value || undefined,
|
country: country.value || undefined,
|
stationName: stationName.value || undefined,
|
pageNum: pageCurr.value,
|
pageSize: pageSize.value,
|
};
|
sendData(JSON.stringify(params));
|
}
|
|
function selectChange() {
|
nextTick(() => {
|
sendMessage();
|
});
|
}
|
|
watch(
|
() => message.value,
|
(n) => {
|
if (n) {
|
let {code, data, data2} = JSON.parse(n);
|
let list = [];
|
let _total = 0;
|
if (code && data) {
|
// console.log(data);
|
list = data2.list.map(v => ({
|
...v,
|
almLevelStr: ['', '一级告警', '二级告警', '三级告警', '四级告警'][v.almLevel],
|
almIsConfirmedStr: ['未确认', '已确认'][v.almIsConfirmed],
|
// roleName: roles[v.role],
|
}));
|
_total = data2.total;
|
}
|
datas.tableData = list;
|
total.value = _total;
|
}
|
}
|
);
|
|
|
// 展示数据数量
|
function handleSizeChange(val) {
|
pageSize.value = val;
|
sendMessage();
|
}
|
// 翻页
|
function handleCurrentChange(val) {
|
pageCurr.value = val;
|
sendMessage();
|
}
|
|
function confirmAlarm(record) {
|
$confirm("确认告警", () => {
|
let loading = $loading();
|
confirmDevAlm(record.num)
|
.then((res) => {
|
let { code, data } = res;
|
loading.close();
|
if (code && data) {
|
$message.success("操作成功");
|
sendMessage();
|
} else {
|
$message.success("操作失败");
|
}
|
})
|
.catch((err) => {
|
loading.close();
|
console.log(err);
|
});
|
});
|
}
|
|
function onOk() {
|
addEditVisible.value = false;
|
handleCurrentChange(1);
|
}
|
function onCanel() {
|
addEditVisible.value = false;
|
}
|
|
function exportExcel() {
|
let _headers = headers.map(v => {
|
let prop = v.prop;
|
let label = v.label;
|
if (prop == 'almIsConfirmed') {
|
prop = 'almIsConfirmedStr';
|
}
|
return {
|
prop,
|
label
|
};
|
});
|
ExportFile(_headers, datas.tableData, "电池实时告警");
|
}
|
|
function goRt (row) {
|
router.push({
|
path: '/datas/realtime',
|
query: {
|
id: row.battgroupId
|
}
|
});
|
}
|
|
|
onMounted(async () => {
|
await getAlarmType();
|
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 page-filter">
|
<div class="grid-container" :style="{'--counter': 5}">
|
<div class="grid-item">
|
<div class="label">省</div>
|
<div class="value">
|
<el-select
|
v-model="provice"
|
size="small"
|
clearable
|
placeholder="请选择省"
|
@change="selectChange"
|
>
|
<el-option
|
v-for="item in proviceList"
|
:key="'l0_' + item"
|
:label="item"
|
:value="item"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="grid-item">
|
<div class="label">市</div>
|
<div class="value">
|
<el-select
|
v-model="city"
|
size="small"
|
clearable
|
placeholder="请选择市"
|
@change="selectChange"
|
>
|
<el-option
|
v-for="item in cityList"
|
:key="'l1_' + item"
|
:label="item"
|
:value="item"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="grid-item">
|
<div class="label">区县</div>
|
<div class="value">
|
<el-select
|
v-model="country"
|
clearable
|
size="small"
|
placeholder="请选择区县"
|
@change="selectChange"
|
>
|
<el-option
|
v-for="item in countryList"
|
:key="'l2_' + item"
|
:label="item"
|
:value="item"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="grid-item">
|
<div class="label">站点</div>
|
<div class="value">
|
<el-select
|
v-model="stationName"
|
clearable
|
size="small"
|
placeholder="请选择站点"
|
@change="selectChange"
|
>
|
<el-option
|
v-for="item in stationList"
|
:key="'l3_' + item.stationId"
|
:label="item.stationName"
|
:value="item.stationName"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="grid-item">
|
<div class="label">告警等级</div>
|
<div class="value">
|
<el-select
|
v-model="alarmLevel"
|
clearable
|
size="small"
|
placeholder="请选择告警等级"
|
@change="selectChange"
|
>
|
<el-option
|
v-for="item in alarmLevels"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="grid-item">
|
<div class="label">告警类型</div>
|
<div class="value flex-row" style="grid-column: span 9;">
|
<el-checkbox
|
v-model="checkAll"
|
:indeterminate="isIndeterminate"
|
@change="handleCheckAllChange"
|
>全选
|
</el-checkbox>
|
<el-checkbox-group
|
class="group"
|
v-model="almIds"
|
@change="handleCheckedChange"
|
>
|
<el-checkbox v-for="(item, idx) in alarmTypeList" :key="'list0_' + idx" :label="item.label" :value="item.value">
|
</el-checkbox>
|
</el-checkbox-group>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="page-content-table">
|
<div class="pos-rel">
|
<div class="pos-abs">
|
<el-table class="yc-table" stripe height="100%" size="small" :data="datas.tableData" style="width: 100%">
|
<el-table-column type="index" fixed="left" label="序号" width="60"></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">
|
<template #default="scope">
|
<template v-if="header.prop == 'almIsConfirmed'">
|
<el-checkbox disabled :checked="scope.row[header.prop] == 1"></el-checkbox>
|
</template>
|
<template v-else>
|
{{ scope.row[header.prop] || '--' }}
|
</template>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" fixed="right" width="240" align="center">
|
<template #default="scope">
|
<el-button type="primary" size="small" v-if="!scope.row.almIsConfirmed"
|
@click="confirmAlarm(scope.row)">确认告警</el-button>
|
<el-button type="warning" size="small" @click="goRt(scope.row)">实时监测</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<div class="page-content-page">
|
<div class="page-tool">
|
<el-button type="primary" round size="small" @click="sendMessage" :icon="Search">查询</el-button>
|
</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" :disabled="disabled"
|
:background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
|
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
</div>
|
<div class="page-tool">
|
<el-button type="primary" round size="small" @click="exportExcel" >导出</el-button>
|
</div>
|
</div>
|
</div>
|
</yc-card>
|
</div>
|
<div class="page-footer"></div>
|
<!-- 弹窗 -->
|
<!-- <el-dialog :title="dialogTitle" v-model="addEditVisible" top="0" :close-on-click-modal="false" class="dialog-center"
|
width="860px" center>
|
<add-edit v-if="addEditVisible" @success="onOk" :info="datas.rowData" @cancel="onCanel"></add-edit>
|
</el-dialog> -->
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.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;
|
.flex-row {
|
display: flex;
|
align-items: center;
|
:deep(.el-checkbox) {
|
color: #fff;
|
}
|
.group {
|
margin-left: 30px;
|
}
|
}
|
}
|
|
.page-content-table {
|
// border-top: 1px solid var(--border-light-color);
|
box-sizing: border-box;
|
flex: 1;
|
margin-left: 26px;
|
margin-right: 26px;
|
}
|
|
.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;
|
|
.filter-label {
|
display: inline-block;
|
}
|
|
.filter-content {
|
display: inline-block;
|
}
|
}
|
}
|
</style>
|
