<script setup name="earlyWarningAnalysis">
|
import { ref, reactive, onMounted, computed, nextTick, watch, onActivated } 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 getQueryString from "@/utils/getQueryString";
|
|
import alarmParams from '@/components/pwrAlarmParams.vue';
|
|
import useStation from "@/hooks/useStationList.js";
|
const { provice, city, country, stationName, stationId, powerId,
|
proviceList, cityList, countryList, stationList, powerList, isManual,
|
getPowerList,
|
whenLoaded,
|
} = 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 moment from 'moment';
|
|
|
import {
|
confirmBattAlm,
|
getBattAlmHis,
|
getPwrAlmParam,
|
getPwrAllAlmParam,
|
} from "@/api/alarm.js";
|
|
import {
|
getPowerAlmIdType,
|
} from "@/api/station.js";
|
|
|
const { $loading, $message, $confirm } = useElement();
|
const flag = ref(Math.random());
|
|
|
const headers = [
|
{
|
prop: "fullName",
|
label: "机房名称",
|
width: "220",
|
},
|
{
|
prop: "powerName",
|
label: "电源名称",
|
width: "80",
|
},
|
{
|
prop: "alarmName",
|
label: "告警名称",
|
width: "160",
|
},
|
{
|
prop: "alarmLimithUpper",
|
label: "上上限阈值",
|
width: "120",
|
},
|
{
|
prop: "alarmLimithUpperLevelStr",
|
label: "上上限等级",
|
width: "120",
|
},
|
{
|
prop: "alarmLimithUpperEnStr",
|
label: "上上限使能",
|
width: "120",
|
},
|
{
|
prop: "alarmLimith",
|
label: "上限阈值",
|
width: "120",
|
},
|
{
|
prop: "alarmLimithLevelStr",
|
label: "上限等级",
|
width: "120",
|
},
|
{
|
prop: "alarmLimithEnStr",
|
label: "上限使能",
|
width: "120",
|
},
|
{
|
prop: "alarmLimitl",
|
label: "下限阈值",
|
width: "120",
|
},
|
{
|
prop: "alarmLimitlLevelStr",
|
label: "下限等级",
|
width: "120",
|
},
|
{
|
prop: "alarmLimitlEnStr",
|
label: "下限使能",
|
width: "120",
|
},
|
{
|
prop: "alarmLimitlLower",
|
label: "下下限阈值",
|
width: "120",
|
},
|
{
|
prop: "alarmLimitlLowerLevelStr",
|
label: "下下限等级",
|
width: "120",
|
},
|
{
|
prop: "alarmLimitlLowerEnStr",
|
label: "下下限使能",
|
width: "120",
|
},
|
];
|
|
// const pageCurr = ref(1);
|
// const pageSize = ref(10);
|
// const total = ref(0);
|
const addEditVisible = ref(false);
|
const dialogTitle = ref("");
|
const datas = reactive({
|
tableData: [],
|
rowData: {},
|
});
|
|
const currentRow = ref({});
|
|
const alarmTypeList = ref([]);
|
|
const alarmId = ref('');
|
|
function getList() {
|
let params = {
|
almIdList: alarmId.value ? [alarmId.value] : undefined,
|
provice: provice.value || undefined,
|
city: city.value || undefined,
|
country: country.value || undefined,
|
stationId: stationId.value || undefined,
|
powerId: powerId.value || undefined,
|
};
|
|
if (!powerId.value) {
|
$message.error('请选择电源');
|
return false;
|
}
|
|
let loading = $loading();
|
getPwrAlmParam(params).then((res) => {
|
let { code, data, data2, data3 } = res;
|
let list = [];
|
// let _total = 0;
|
loading.close();
|
if (code && data) {
|
// console.log(data);
|
let bInf = data3;
|
list = data2.map(v => ({
|
...v,
|
fullName: bInf.fullName,
|
powerName: bInf.powerName,
|
alarmLimithUpperLevelStr: ['', '一级告警', '二级告警', '三级告警', '四级告警'][v.alarmLimithUpperLevel],
|
alarmLimithUpperEnStr: ['不启用', '启用'][v.alarmLimithUpperEn],
|
alarmLimithLevelStr: ['', '一级告警', '二级告警', '三级告警', '四级告警'][v.alarmLimithLevel],
|
alarmLimithEnStr: ['不启用', '启用'][v.alarmLimithEn],
|
alarmLimitlLevelStr: ['', '一级告警', '二级告警', '三级告警', '四级告警'][v.alarmLimitlLevel],
|
alarmLimitlEnStr: ['不启用', '启用'][v.alarmLimitlEn],
|
alarmLimitlLowerLevelStr: ['', '一级告警', '二级告警', '三级告警', '四级告警'][v.alarmLimitlLowerLevel],
|
alarmLimitlLowerEnStr: ['不启用', '启用'][v.alarmLimitlLowerEn],
|
}));
|
// _total = data2.total;
|
}
|
datas.tableData = list;
|
// total.value = _total;
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
}
|
|
|
|
// 查询告警类型
|
async function getAlarmType() {
|
let res = await getPowerAlmIdType();
|
let { code, data, data2 } = res;
|
let list = [];
|
if (code && data) {
|
Object.keys(data2).map((key) => {
|
Object.keys(data2[key]).map((key2) => {
|
list.push({
|
value: key2,
|
label: data2[key][key2]
|
});
|
})
|
});
|
}
|
alarmTypeList.value = list;
|
}
|
|
|
// 展示数据数量
|
// function handleSizeChange(val) {
|
// pageSize.value = val;
|
// getList();
|
// }
|
// 翻页
|
// function handleCurrentChange(val) {
|
// pageCurr.value = val;
|
// getList();
|
// }
|
|
const alarmType = ref(0);
|
|
function edit(record) {
|
dialogTitle.value = `编辑告警参数--${record.alarmName}`;
|
alarmType.value = record.alarmType;
|
addEditVisible.value = true;
|
currentRow.value = record;
|
// console.log('record', record, '=============');
|
|
}
|
|
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, "电源告警参数");
|
}
|
|
async function exportExcelAll() {
|
let res = await getPwrAllAlmParam();
|
let { code, data, data2 } = res;
|
let list = [];
|
if (code && data) {
|
list = data2.map(v => ({
|
...v,
|
alarmLimithUpperLevelStr: ['', '一级告警', '二级告警', '三级告警', '四级告警'][v.alarmLimithUpperLevel],
|
alarmLimithUpperEnStr: ['不启用', '启用'][v.alarmLimithUpperEn],
|
alarmLimithLevelStr: ['', '一级告警', '二级告警', '三级告警', '四级告警'][v.alarmLimithLevel],
|
alarmLimithEnStr: ['不启用', '启用'][v.alarmLimithEn],
|
alarmLimitlLevelStr: ['', '一级告警', '二级告警', '三级告警', '四级告警'][v.alarmLimitlLevel],
|
alarmLimitlEnStr: ['不启用', '启用'][v.alarmLimitlEn],
|
alarmLimitlLowerLevelStr: ['', '一级告警', '二级告警', '三级告警', '四级告警'][v.alarmLimitlLowerLevel],
|
alarmLimitlLowerEnStr: ['不启用', '启用'][v.alarmLimitlLowerEn],
|
}));
|
}
|
let _headers = headers.map(v => {
|
let prop = v.prop;
|
let label = v.label;
|
return {
|
prop,
|
label
|
};
|
});
|
ExportFile(_headers, list, "电源告警参数-全部");
|
}
|
|
onMounted(async () => {
|
await getAlarmType();
|
// getList();
|
console.log('stationList', stationList, '===========1==');
|
});
|
|
onActivated(async () => {
|
let pageFlag = getQueryString("pageFlag");
|
// console.log('pageFlag', pageFlag, flag.value, '=============');
|
await nextTick();
|
await whenLoaded();
|
|
if (pageFlag && pageFlag != flag.value) {
|
// let provice, city, country, stationName, battId;
|
|
if (getQueryString('stationId')) {
|
let statId = getQueryString('stationId');
|
let stat = stationList.value.find(v => v.stationId == statId);
|
if (stat) {
|
isManual.value = true;
|
stationName.value = stat.stationName;
|
await getPowerList();
|
}
|
}
|
if (getQueryString('powerId')) {
|
powerId.value = getQueryString('powerId') * 1;
|
// console.log('battId', battId.value, battList.value, '=============');
|
}
|
getList();
|
flag.value = pageFlag;
|
}
|
});
|
</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': 8}">
|
<div class="grid-item">
|
<div class="label">省</div>
|
<div class="value">
|
<el-select
|
v-model="provice"
|
size="small"
|
clearable
|
placeholder="请选择省"
|
>
|
<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="请选择市"
|
>
|
<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="请选择区县"
|
>
|
<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="请选择站点"
|
>
|
<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="powerId"
|
clearable
|
size="small"
|
placeholder="请选择电源"
|
>
|
<el-option
|
v-for="item in powerList"
|
:key="'l4_' + item.powerId"
|
:label="`${item.stationName}-${item.powerName}`"
|
:value="item.powerId"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="grid-item">
|
<div class="label">告警名称</div>
|
<div class="value">
|
<el-select
|
v-model="alarmId"
|
size="small"
|
clearable
|
filterable
|
placeholder="请选择告警名称"
|
>
|
<el-option
|
v-for="item in alarmTypeList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</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"
|
@click="edit(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="getList"
|
:icon="Search"
|
>查询</el-button
|
>
|
</div>
|
<div class="el-page-container">
|
</div>
|
<div class="page-tool">
|
<el-button type="primary" round size="small" @click="exportExcel"
|
>导出</el-button
|
>
|
<el-button type="primary" round size="small" @click="exportExcelAll"
|
>导出全部</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</yc-card>
|
</div>
|
<div class="page-footer">
|
|
</div>
|
<!-- 弹窗 -->
|
<el-dialog
|
:title="dialogTitle"
|
v-model="addEditVisible"
|
top="0"
|
draggable
|
:close-on-click-modal="false"
|
class="dialog-center"
|
width="860px"
|
center
|
>
|
<alarm-params
|
v-if="addEditVisible"
|
:type="alarmType"
|
:info="currentRow"
|
@change="getList"
|
v-model:visible="addEditVisible"
|
></alarm-params>
|
</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>
|
