253 lines
6.5 KiB
Vue
253 lines
6.5 KiB
Vue
<template>
|
|
<div>
|
|
<el-form :inline="true" class="demo-form-inline">
|
|
<el-form-item>
|
|
<Area @click="handleNodeClick" ref="area" class="box"></Area>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<Timeinterval :interval="1" ref="interval"></Timeinterval>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="告警类型:" class="box1">
|
|
<el-select
|
|
v-model.trim="form.alarmType"
|
|
placeholder="请选择"
|
|
clearable
|
|
multiple
|
|
collapse-tags
|
|
>
|
|
<el-option
|
|
v-for="item in notify"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="监测点类别:" class="box1">
|
|
<el-select
|
|
v-model="form.monitorSort"
|
|
clearable
|
|
multiple
|
|
collapse-tags
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in typeList"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="监测点:" class="box">
|
|
<el-input
|
|
v-model.trim="form.valuePoint"
|
|
placeholder="请输入"
|
|
clearable
|
|
></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" @click="researchFn"
|
|
>查询</el-button
|
|
>
|
|
<el-button type="primary" icon="el-icon-download">导出</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-table
|
|
stripe
|
|
:data="
|
|
alarmdetailsData.slice(
|
|
(currentPage - 1) * pageSize,
|
|
currentPage * pageSize
|
|
)
|
|
"
|
|
:height="height"
|
|
border
|
|
style="width: 100%"
|
|
v-loading="isLoading"
|
|
header-cell-class-name="table_header"
|
|
:cell-style="cellstyle"
|
|
>
|
|
<template v-for="(item, index) in tableHeaderAlarmdetails">
|
|
<el-table-column
|
|
:prop="item.prop"
|
|
:label="item.label"
|
|
:key="index"
|
|
:width="item.width"
|
|
>
|
|
</el-table-column>
|
|
</template>
|
|
</el-table>
|
|
<el-pagination
|
|
background
|
|
align="right"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="currentPage"
|
|
:page-sizes="[20, 30, 40, 50, 100]"
|
|
:page-size="pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="alarmdetailsData.length"
|
|
class="mt10"
|
|
>
|
|
</el-pagination>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Area from "@/views/components/Area/Area.vue";
|
|
import Timeinterval from "../../../components/Timeinterval.vue";
|
|
import { getAlarmdetailsData } from "@/api/Distributionnetwork-analysis/IndicatorAlarmStatistics/IndicatorAlarmStatistics";
|
|
import { dicData } from "@/assets/commjs/dictypeData";
|
|
export default {
|
|
components: { Area, Timeinterval },
|
|
data() {
|
|
return {
|
|
vh: "",
|
|
height: null,
|
|
isLoading: false,
|
|
form: {
|
|
alarmType: "", //告警类型
|
|
monitorSort: "", //监测点类别
|
|
valuePoint: "", //监测点
|
|
},
|
|
|
|
//监测点类别数据
|
|
typeList: [],
|
|
|
|
//告警类型
|
|
notify: [],
|
|
|
|
tableHeaderAlarmdetails: [
|
|
{ prop: "company", label: "单位", width: 160 },
|
|
{ prop: "substation", label: "所属变电站" },
|
|
{ prop: "stationArea", label: "所属台区" },
|
|
{ prop: "userName", label: "用户名称" },
|
|
{ prop: "monitoringPoint", label: "监测点类别" },
|
|
{ prop: "voltageLevel", label: "监测点电压等级(kV)" },
|
|
{ prop: "monitoringName", label: "监测点名称" },
|
|
{ prop: "hour", label: "时间" },
|
|
{ prop: "typologic", label: "告警类型" },
|
|
{ prop: "describe", label: "告警描述", width: 250 },
|
|
],
|
|
alarmdetailsData: [],
|
|
device: "",
|
|
currentPage: 1, // 当前页码
|
|
total: 20, // 总条数
|
|
pageSize: 18, // 每页的数据条数
|
|
};
|
|
},
|
|
created() {
|
|
this.alarmdetails();
|
|
this.getclassificationData();
|
|
},
|
|
mounted() {
|
|
this.device = window.devicePixelRatio;
|
|
this.height = document.getElementById("app-main-in").offsetHeight - 165;
|
|
},
|
|
computed: {
|
|
//计算表格高度
|
|
// height(){
|
|
// return '100vh'- this.$refs.form.offsetHeight +259;
|
|
// }
|
|
},
|
|
methods: {
|
|
//获取类型
|
|
getclassificationData() {
|
|
//监测点类别
|
|
var code = "Line_Sort";
|
|
this.typeList = dicData(code, []);
|
|
//告警类型
|
|
var code1 = "alarm_Type";
|
|
this.notify = dicData(code1, []);
|
|
},
|
|
|
|
//获取主网运行指标统计数据
|
|
alarmdetails() {
|
|
this.isLoading = true;
|
|
getAlarmdetailsData().then((res) => {
|
|
this.isLoading = false;
|
|
this.alarmdetailsData = res.data;
|
|
});
|
|
},
|
|
// 切换选项
|
|
handleNodeClick(data) {
|
|
// console.log(data);
|
|
},
|
|
//每页条数改变时触发 选择一页显示多少行
|
|
handleSizeChange(val) {
|
|
this.pageSize = val;
|
|
this.alarmdetails();
|
|
},
|
|
//当前页改变时触发 跳转其他页
|
|
handleCurrentChange(val) {
|
|
this.currentPage = val;
|
|
this.alarmdetails();
|
|
},
|
|
//查询
|
|
researchFn() {
|
|
this.alarmdetails();
|
|
},
|
|
cellstyle(row) {
|
|
// console.log(row);
|
|
if (
|
|
row.row.monitoringPoint == "Ⅱ类监测点" ||
|
|
row.row.monitoringPoint == "Ⅲ类监测点"
|
|
) {
|
|
row.row.substation = "/";
|
|
}
|
|
if (
|
|
row.row.monitoringPoint == "Ⅰ类监测点" ||
|
|
row.row.monitoringPoint == "Ⅲ类监测点"
|
|
) {
|
|
row.row.stationArea = "/";
|
|
}
|
|
if (
|
|
row.row.monitoringPoint == "Ⅰ类监测点" ||
|
|
row.row.monitoringPoint == "Ⅱ类监测点"
|
|
) {
|
|
row.row.userName = "/";
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
@import url("../../../../styles/comStyle.less");
|
|
/deep/.el-table .cell {
|
|
text-align: center;
|
|
}
|
|
/deep/.el-tabs--border-card > .el-tabs__content {
|
|
padding: 10px;
|
|
}
|
|
/deep/.el-form-item {
|
|
margin-bottom: 0;
|
|
}
|
|
/deep/.box {
|
|
.el-input {
|
|
width: 150px;
|
|
}
|
|
}
|
|
/deep/.box1 {
|
|
.el-input {
|
|
width: 150px;
|
|
}
|
|
}
|
|
.button {
|
|
float: right;
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|