<template>
|
<flex-layout direction="row" style="color:#ffffff">
|
<content-Box>
|
<div slot="title">电池告警实时查询 显示与隐藏查询条件</div>
|
<div class="headrs">
|
<table class="table-head" width="100%" border="1" cellspacing="0">
|
<thead>
|
<tr>
|
<th>维护区</th>
|
<th>机房站点</th>
|
<th>蓄电池组</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td width="300px">
|
<el-select v-model="value" placeholder="全部(共17种)" class="weihu">
|
<el-option
|
v-for="item in vindicate"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</td>
|
<td width="500px">
|
<el-select v-model="value" placeholder="全部(共14种)" class="rooms">
|
<el-option
|
v-for="item in setions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</td>
|
<td width="300px">
|
<el-select v-model="value" placeholder="全部(共14种)" class="dainchi">
|
<el-option
|
v-for="item in options"
|
:key="item.BattGroupId"
|
:label="item.BattGroupName"
|
:value="item.BattGroupId"
|
></el-option>
|
</el-select>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
|
<!-- 告警状态警示灯 -->
|
<table class="condiOpt" border="1">
|
<tr class="trTitle">
|
<td>
|
<center>告警状态警示灯</center>
|
</td>
|
<td>
|
<center>告警条件过滤</center>
|
</td>
|
<td>
|
<center>告警阀值过滤</center>
|
</td>
|
<td>
|
<center>告警等级过滤</center>
|
</td>
|
</tr>
|
<tr class="trBody">
|
<td class="tdOne">
|
<ul class="light">
|
|
<li>
|
<el-tooltip class="item" effect="dark" content="一级警告" placement="bottom-end">
|
<img src="../../assets/images/eleOff.gif"></el-tooltip>
|
</li>
|
<li>
|
<el-tooltip class="item" effect="dark" content="二级警告" placement="bottom-end">
|
<img src="../../assets/images/eleOn.gif"></el-tooltip>
|
</li>
|
<li>
|
<el-tooltip class="item" effect="dark" content="三级警告" placement="bottom-end">
|
<img src="../../assets/images/eleOff.gif"></el-tooltip>
|
</li>
|
<li>
|
<el-tooltip class="item" effect="dark" content="四级警告" placement="bottom-end">
|
<img src="../../assets/images/eleOff.gif"></el-tooltip>
|
</li>
|
</ul>
|
</td>
|
<td class="tdTwo">
|
<ul class="inputOne">
|
<li>
|
<input type="checkbox">在线电压
|
</li>
|
<li>
|
<input type="checkbox">组端电压
|
</li>
|
<li>
|
<input type="checkbox">充电电压
|
</li>
|
<li>
|
<input type="checkbox">放电电压
|
</li>
|
<br>
|
|
<li>
|
<input type="checkbox">单体电压
|
</li>
|
<li>
|
<input type="checkbox">单体内阻
|
</li>
|
<li>
|
<input type="checkbox">单体温度
|
</li>
|
</ul>
|
</td>
|
<td class="tdTree">
|
<input type="checkbox">上限告警
|
<br>
|
<input type="checkbox">
|
下限告警
|
</td>
|
<td class="tdFrou">
|
<input type="checkbox">一级告警
|
<input type="checkbox">二级告警
|
<br>
|
<input type="checkbox">三级告警
|
<input type="checkbox">
|
四级告警
|
</td>
|
</tr>
|
</table>
|
|
<!-- 表单 -->
|
<el-table border size="small" :data="table.datas" height="67%" class="tableCent">
|
<el-table-column
|
v-for="header in table.headers"
|
:key="header.prop"
|
:prop="header.prop"
|
:label="header.label"
|
:width="header.width"
|
align="center"
|
></el-table-column>
|
<el-table-column label="确认告警">
|
<input type="checkbox">
|
</el-table-column>
|
</el-table>
|
|
<!-- 底部分页 -->
|
<div class="paginations">
|
<ul>
|
<li>查询</li>
|
<li>导出</li>
|
<li>表格选项</li>
|
</ul>
|
<el-pagination
|
class="pagess"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:page-sizes="[2, 5, 10, 20]"
|
:page-size="100"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="20"
|
></el-pagination>
|
</div>
|
</content-Box>
|
</flex-layout>
|
</template>
|
|
<script>
|
import ContentBox from "../../components/ContentBox";
|
import {
|
dataType /* 维护区 */,
|
roomsStation /* 机房站点 */,
|
batterySeach /* 蓄电池组 */
|
} from "@/assets/js/alarmAdmian/batteryrTimequery.js";
|
export default {
|
components: {
|
ContentBox
|
},
|
data() {
|
return {
|
/* 维护区 */
|
vindicate: [
|
{
|
value: "选项1",
|
label: null
|
}
|
],
|
/* 机房站点 */
|
setions: [
|
{
|
value: "选项2",
|
label: null
|
}
|
],
|
/* 蓄电池租 */
|
options: [
|
{
|
value: "选项3",
|
label: null
|
}
|
],
|
value: "", //select的值
|
/* 表单 */
|
table: {
|
headers: [
|
{
|
prop: "room1",
|
label: "编号",
|
width: ""
|
},
|
{
|
prop: "battery1",
|
label: "机房名称",
|
width: ""
|
},
|
{
|
prop: "tes1",
|
label: "电池组名称",
|
width: ""
|
},
|
{
|
prop: "tester1",
|
label: "告警名称",
|
width: ""
|
},
|
{
|
prop: "current1",
|
label: "单体编号",
|
width: ""
|
},
|
{
|
prop: "capacity1",
|
label: "告警值",
|
width: ""
|
},
|
{
|
prop: "monomer1",
|
label: "告警等级",
|
width: ""
|
},
|
/* {
|
prop: "number1",
|
label: "确认告警",
|
width: ""
|
}, */
|
{
|
prop: "alarm1",
|
label: "告警确认时间",
|
width: ""
|
},
|
{
|
prop: "start1",
|
label: "告警开始时间",
|
width: ""
|
},
|
{
|
prop: "end1",
|
label: "告警结束时间",
|
width: ""
|
}
|
],
|
datas: [
|
{
|
room1: 0,
|
battery1: 0,
|
tes1: 0,
|
tester1: 0,
|
current1: 0,
|
capacity1: 0,
|
monomer1: 0,
|
number1: 0,
|
vol1: 0,
|
alarm1: 0,
|
start1: 0,
|
end1: 0
|
}
|
]
|
}
|
}
|
},
|
mounted() {
|
this.vindicateData(); /* 维护区 */
|
this.computerSite(); /*机房站点 */
|
this.storageBatterys(); /* 蓄电池组 */
|
},
|
methods: {
|
/* 维护区 */
|
async vindicateData() {
|
const resType = await dataType();
|
const typeList = JSON.parse(resType.data.result).data.map(item => {
|
return { label: item };
|
});
|
const mmm = typeList.map((item, index) => {
|
/* 生成index */
|
item.value = index + 1;
|
return item;
|
});
|
/* console.log('mmm',mmm); */
|
this.vindicate = mmm;
|
},
|
/* 机房站点 */
|
async computerSite() {
|
const roomsSeation = await roomsStation({ UNote: "" });
|
if (roomsSeation.data.result) {
|
/* console.log("roomsSeation", roomsSeation); */
|
const newRoms = JSON.parse(roomsSeation.data.result).data.map(item => {
|
return { label: item };
|
});
|
const sss = newRoms.map((item, index) => {
|
item.value = index + 1;
|
return item;
|
});
|
/* console.log("sss", sss); */
|
this.setions = sss;
|
}
|
},
|
/* 蓄电池租 */
|
async storageBatterys() {
|
const batteryss = await batterySeach({ UNote: "", UName: "" });
|
/* console.log("batteryss", batteryss); */
|
if (batteryss.data.result) {
|
this.options = JSON.parse(batteryss.data.result).data.map(item => {
|
item.BattGroupName = `${item.BattGroupName}-${item.MonCount}节`;
|
return item;
|
});
|
console.log('this.options',this.options)
|
}
|
},
|
|
handleSizeChange(val) {
|
/* console.log(`每页 ${val} 条`); */
|
},
|
handleCurrentChange(val) {
|
/* console.log(`当前页: ${val}`); */
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.headrs {
|
font-weight: 900;
|
height: 80px;
|
width: 100%;
|
position: relative;
|
.table-head {
|
color: #ffff;
|
position: absolute;
|
top: 3%;
|
border: 1px solid #ffffff;
|
thead tr {
|
height: 35px;
|
}
|
|
tbody tr {
|
height: 70%;
|
}
|
}
|
|
.weihu {
|
width: 100%;
|
}
|
|
.dainchi {
|
width: 100%;
|
}
|
|
.rooms {
|
width: 100%;
|
}
|
}
|
|
/* 表单 */
|
.tableCent {
|
margin-top: 3px;
|
}
|
|
/* 底部 */
|
.paginations {
|
/* border: 1px solid red; */
|
width: 100%;
|
position: relative;
|
|
ul {
|
position: absolute;
|
top: 5px;
|
left: 26%;
|
}
|
ul li {
|
display: inline-block;
|
margin: 2px;
|
}
|
|
.pagess {
|
margin: 2px auto;
|
width: 30%;
|
/* border: 1px solid blue; */
|
}
|
}
|
|
/* 条件选择 */
|
.condiOpt {
|
border: 1px solid #ffffff;
|
width: 100%;
|
margin-top: 3px;
|
|
.trTitle {
|
height: 35px;
|
}
|
|
/* 告警状态警示灯 */
|
.tdOne {
|
width: 15%;
|
|
.light li {
|
display: inline-block;
|
margin: 20px;
|
}
|
|
.light li img {
|
margin-left: 32px;
|
}
|
}
|
/* 告警条件过滤 */
|
.tdTwo {
|
width: 30%;
|
.inputOne li {
|
display: inline-block;
|
margin-left: 95px;
|
padding: 3px;
|
}
|
}
|
|
/* 告警阀值过滤 */
|
.tdTree {
|
width: 10%;
|
|
input {
|
margin-left: 35%;
|
margin-top: 10px;
|
}
|
}
|
|
/* 告警等级过滤 */
|
.tdFrou {
|
width: 15%;
|
input {
|
margin-left: 20%;
|
margin-top: 10px;
|
}
|
}
|
}
|
</style>
|
