提交
This commit is contained in:
@@ -0,0 +1,252 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user