<template>
|
<!-- <title>事件总表</title> -->
|
<flex-layout>
|
<div class="table-layout filter-box-table" slot="header">
|
|
<div class="table-row">
|
<!-- 省 -->
|
<div class="table-cell text-right">省:</div>
|
<div class="table-cell">
|
<el-select v-model="searchParams.province" size="small" @change="resetData(1)" placeholder="请选择省">
|
<el-option
|
v-for="item in provinceList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<!-- 市 -->
|
<div class="table-cell text-right">市:</div>
|
<div class="table-cell">
|
<el-select v-model="searchParams.city" size="small" @change="resetData(2)" placeholder="请选择市">
|
<el-option
|
v-for="item in cityList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<!-- 县 -->
|
<div class="table-cell text-right">县:</div>
|
<div class="table-cell">
|
<el-select v-model="searchParams.county" size="small" @change="resetData(3)" placeholder="请选择县">
|
<el-option
|
v-for="item in countyList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<!-- 站点名称 -->
|
<div class="table-cell text-right">站点名称:</div>
|
<div class="table-cell">
|
<el-select v-model="searchParams.dev_id" size="small" @change="resetData(4,searchParams.dev_id)" placeholder="请选择站点名称">
|
<el-option
|
v-for="item in stationNameList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div class="table-row">
|
<!-- 设备名称 -->
|
<div class="table-cell text-right">设备名称:</div>
|
<div class="table-cell">
|
<el-select v-model="searchParams.BattGroupId" @change="resetData(5,searchParams.BattGroupId)" size="small" placeholder="请选择设备名称">
|
<el-option
|
v-for="item in BattGroupNameList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<!-- 事件类型 -->
|
<div class="table-cell text-right">事件类型:</div>
|
<div class="table-cell">
|
<el-select ref="selecetEvent" v-model="searchParams.event_type" size="small" placeholder="请选择事件类型">
|
<el-option label="全部" :value="0"></el-option>
|
<el-option label="继电器K告警" :value="1"></el-option>
|
<el-option label="通讯告警" :value="2"></el-option>
|
<el-option label="设备过温告警" :value="3"></el-option>
|
<el-option label="二极管D1告警" :value="4"></el-option>
|
<el-option label="干接点告警" :value="5"></el-option>
|
<el-option label="设备状态切换" :value="10"></el-option>
|
</el-select>
|
</div>
|
<div class="table-cell text-right">操作记录时间段：</div>
|
<div class="table-cell">
|
<el-date-picker v-model="searchParams.record_time" size="small" class="time_box" :picker-options="pickerOptions0" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
|
- <el-date-picker v-model="searchParams.record_time1" size="small" class="time_box" :picker-options="pickerOptions1" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
|
</div>
|
<div class="table-cell"></div>
|
<div class="table-cell"></div>
|
</div>
|
</div>
|
<div class="flex-page-content">
|
<!-- 表单 -->
|
<el-table stripe size="small" :data="dataList" height="100%" class="tableCent">
|
<el-table-column prop="stationName" align="center" label="机房名称"></el-table-column>
|
<el-table-column prop="text" align="center" label="事件类型"></el-table-column>
|
<el-table-column prop="record_time" align="center" label="事件记录日期"></el-table-column>
|
</el-table>
|
</div>
|
<!-- 底部 -->
|
<div class="flex-page-footer" slot="footer">
|
<!-- 底部分页 -->
|
<div class="el-pagination-btns">
|
<el-button type="primary" round size="mini" @click="queryList(1)" icon="el-icon-search">查询</el-button>
|
<!-- <el-button type="primary" round size="mini" icon="el-icon-wallet">导出</el-button> -->
|
<!-- <el-button type="primary" round size="mini" icon="el-icon-wallet">表格选项</el-button> -->
|
</div>
|
<el-pagination
|
class="pagess"
|
:current-page="searchParams.page.pageCurr"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:page-sizes="[10, 20, 30, 50, 100]"
|
:page-size="searchParams.page.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="searchParams.page.pageAll"
|
></el-pagination>
|
</div>
|
</flex-layout>
|
</template>
|
<script>
|
import { searchProvince , searchCity , searchCounty , searchStation , searchBattInfo} from '../../assets/js/api.js'
|
import { const_61850 } from '../../assets/js/const'
|
import eventTotalPage from '../../assets/js/apis/dataMager/eventTotalPage'
|
export default {
|
data(){
|
return {
|
workstate:const_61850.workstates,
|
dataList:[],
|
provinceList:[],
|
cityList:[],
|
countyList:[],
|
stationNameList:[],
|
BattGroupNameList:[],
|
searchParams: {
|
province:'',//省
|
city:'',//市
|
county:'',//县
|
// BattGroupName:'',//站点名称
|
BattGroupId:'',//设备名称ID
|
event_type:0,//事件类型
|
dev_id: '',//站点名称Id
|
record_time: '2000-01-01 00:00:00',
|
record_time1: new Date().format('yyyy-MM-dd') + " 00:00:00",
|
page: {
|
pageCurr:1,
|
pageSize:10,
|
pageAll:0,
|
}
|
},
|
pickerOptions0: {
|
disabledDate: (time) => {
|
let vm = this;
|
if (vm.searchParams.record_time1) {
|
return new Date(time.getTime()) > new Date(vm.searchParams.record_time1);
|
} else {
|
// return time.getTime() > Date.now();
|
}
|
}
|
},
|
pickerOptions1: {
|
disabledDate: (time) => {
|
return new Date(time.getTime()+24*60*60*1000) < new Date(this.searchParams.record_time);
|
}
|
},
|
|
}
|
},
|
mounted() {
|
let vm = this;
|
vm.queryProvince();
|
},
|
methods: {
|
// 重置参数
|
resetData:function(status,data){
|
let vm = this;
|
switch (status) {
|
case 1:
|
// 重置
|
vm.searchParams.city = '';
|
vm.searchParams.county = '';
|
vm.searchParams.dev_id = '';
|
vm.searchParams.BattGroupId = '';
|
|
vm.queryCity();
|
break;
|
case 2:
|
vm.searchParams.county = '';
|
vm.searchParams.dev_id = '';
|
vm.searchParams.BattGroupId = '';
|
|
vm.queryCounty();
|
break;
|
case 3:
|
vm.searchParams.dev_id = '';
|
vm.searchParams.BattGroupId = '';
|
|
vm.queryStationName();
|
break;
|
case 4:
|
vm.searchParams.BattGroupId = '';
|
if(data!=''){
|
vm.queryBattGroupName();
|
}else{
|
vm.BattGroupNameList = [
|
{label:'请先选择站点',value:''}
|
]
|
}
|
break;
|
case 5:
|
if(data!=''){
|
vm.queryList();
|
}
|
break;
|
default:
|
break;
|
}
|
|
},
|
// 展示数据数量
|
handleSizeChange(val) {
|
let vm = this;
|
vm.searchParams.page.pageSize = val;
|
vm.queryList();
|
},
|
// 翻页
|
handleCurrentChange(val) {
|
let vm = this;
|
vm.searchParams.page.pageCurr = val;
|
vm.queryList();
|
},
|
// 查询省
|
queryProvince:function(){
|
let vm = this;
|
searchProvince().then((res)=>{
|
let result = JSON.parse(res.data.result);
|
let params = [];
|
if(result.code == 1){
|
params = result.data.map((item)=>{
|
let obj = {
|
label:item,
|
value:item
|
}
|
return obj;
|
})
|
}
|
params.unshift({
|
label:'全部 (共'+ params.length + '种)',
|
value:''
|
})
|
vm.provinceList = params;
|
//
|
vm.queryCity();
|
}).catch((err)=>{
|
vm.provinceList = [];
|
})
|
},
|
// 查询市
|
queryCity:function(status){
|
let vm = this;
|
let data = {
|
StationName1:vm.searchParams.province
|
}
|
searchCity(data).then((res)=>{
|
let result = JSON.parse(res.data.result);
|
let params = [];
|
if(result.code == 1){
|
params = result.data.map((item)=>{
|
let obj = {
|
label:item,
|
value:item
|
}
|
return obj;
|
})
|
}
|
params.unshift({
|
label:'全部 (共'+ params.length + '种)',
|
value:''
|
})
|
vm.cityList = params;
|
|
|
//
|
vm.queryCounty();
|
}).catch((err)=>{
|
vm.cityList = [];
|
})
|
},
|
// 查询县
|
queryCounty:function(){
|
let vm = this;
|
let data = {
|
StationName1:vm.searchParams.province,
|
StationName2:vm.searchParams.city
|
}
|
searchCounty(data).then((res)=>{
|
let result = JSON.parse(res.data.result);
|
let params = [];
|
if(result.code == 1){
|
params = result.data.map((item)=>{
|
let obj = {
|
label:item,
|
value:item
|
}
|
return obj;
|
})
|
}
|
|
params.unshift({
|
label:'全部 (共'+ params.length + '种)',
|
value:''
|
})
|
vm.countyList = params;
|
|
vm.queryStationName();
|
}).catch((err)=>{
|
vm.CountyList = [];
|
})
|
},
|
// 站点名称
|
queryStationName:function(){
|
let vm = this;
|
let data = {
|
StationName1:vm.searchParams.province,
|
StationName2:vm.searchParams.city,
|
StationName5:vm.searchParams.county
|
}
|
searchStation(data).then((res)=>{
|
let result = JSON.parse(res.data.result);
|
let params = [];
|
if(result.code == 1){
|
params = result.data.map((item)=>{
|
let obj = {
|
label:item.StationName,
|
value:item.FBSDeviceId,
|
StationName3:item.StationName3
|
}
|
return obj;
|
})
|
}
|
|
params.unshift({
|
label:'全部 (共'+ params.length + '种)',
|
value:'',
|
StationName3:''
|
})
|
vm.stationNameList = params;
|
|
vm.queryBattGroupName();
|
}).catch((err)=>{
|
vm.StationNameList = [];
|
})
|
},
|
// 设备名称
|
queryBattGroupName:function(){
|
let vm = this;
|
if(vm.searchParams.dev_id ==''){
|
vm.BattGroupNameList = [
|
{label:'请先选择站点',value:''}
|
]
|
return
|
}
|
let data = {
|
StationName1:vm.searchParams.province,
|
StationName2:vm.searchParams.city,
|
StationName5:vm.searchParams.county
|
}
|
// 回去ID对应的名称
|
let thisStationName = '';
|
for(let i=0;i<vm.stationNameList.length;i++){
|
if(vm.stationNameList[i].value == vm.searchParams.dev_id){
|
thisStationName = vm.stationNameList[i].StationName3
|
}
|
}
|
data.StationName3 = thisStationName;
|
searchBattInfo(data).then((res)=>{
|
let result = JSON.parse(res.data.result);
|
let params = [];
|
if(result.code == 1){
|
params = result.data.map((item)=>{
|
let obj = {
|
label:item.BattGroupName,
|
value:item.BattGroupId
|
}
|
return obj;
|
})
|
}
|
|
params.unshift({
|
label:'全部 (共'+ params.length + '种)',
|
value:''
|
})
|
vm.BattGroupNameList = params;
|
}).catch((err)=>{
|
vm.BattGroupNameList = [];
|
})
|
},
|
|
|
|
|
// 查询列表
|
queryList:function(status){
|
let vm = this;
|
if(status && vm.searchParams.BattGroupId == ''){
|
vm.$layer.msg('请先选择设备');
|
return false;
|
}
|
let loading = this.$layer.loading(1);
|
vm.searchParams.pageCurr = vm.searchParams.page.pageCurr;
|
eventTotalPage.elentSearch(this.searchParams).then((res)=>{
|
let vm = this;
|
// 关闭等待框
|
vm.$layer.close(loading);
|
let result = JSON.parse(res.data.result);
|
let params = [];
|
if(result.code == 1) {
|
// 格式化数据
|
for(let i=0; i<result.data.length; i++) {
|
let _data = result.data[i];
|
let text = this.getText(_data);
|
_data.text = text;
|
}
|
params = result.data;
|
vm.searchParams.page.pageAll = params[params.length - 1].page.pageAll;
|
}else{
|
vm.searchParams.page.pageAll = 0;
|
}
|
vm.dataList = params;
|
}).catch((err)=>{
|
// 关闭等待框
|
vm.$layer.close(loading);
|
vm.$layer.msg('查询失败');
|
})
|
},
|
getText: function(data) {
|
var label = this.getLabel(data);
|
|
if(data.event_type != 10) {
|
if(data.now_state == 1) {
|
label += '开始';
|
}else {
|
label += '消失';
|
}
|
}
|
return label;
|
},
|
getLabel: function(data) {
|
var rs="";
|
|
if(data.event_type == 10) {
|
rs = '由'+this.workstate[data.last_state]+'转到'+this.workstate[data.now_state];
|
}else {
|
let eventTypes = this.$refs.selecetEvent.options;
|
for(var i=0; i<eventTypes.length; i++) {
|
var eventType = eventTypes[i];
|
if(data.event_type == eventType.value) {
|
rs = eventType.label;
|
break
|
}
|
}
|
}
|
return rs;
|
},
|
},//methods
|
}
|
</script>
|
<style lang="less" scoped>
|
.time_box{
|
width: 48%;
|
}
|
</style>
|
