<template>
|
<flex-layout>
|
<div slot="header">
|
<div class="table-layout filter-box-table">
|
<div class="table-row">
|
<div class="table-cell text-right">省：</div>
|
<div class="table-cell">
|
<el-select
|
filterable
|
v-model="filters.values.province"
|
@change="searchCity"
|
size="small"
|
placeholder="请选择省"
|
>
|
<el-option
|
v-for="item in filters.data.province"
|
: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
|
filterable
|
v-model="filters.values.city"
|
@change="searchCounty"
|
size="small"
|
placeholder="请选择市"
|
>
|
<el-option
|
v-for="item in filters.data.city"
|
: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
|
filterable
|
v-model="filters.values.county"
|
@change="searchHome"
|
size="small"
|
placeholder="请选择区/县"
|
>
|
<el-option
|
v-for="item in filters.data.county"
|
: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 w360">
|
<el-select
|
filterable
|
v-model="filters.values.home"
|
@change="changeHome"
|
size="small"
|
placeholder="请选择机房名称"
|
>
|
<el-option
|
v-for="item in filters.data.home"
|
: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="alarmType" @change="verifyHisList" size="small">
|
<el-option label="全部" :value="undefined"> </el-option>
|
<el-option label="电池告警" :value="1"> </el-option>
|
<el-option label="设备告警" :value="2"> </el-option>
|
<el-option label="电源告警" :value="3"> </el-option>
|
</el-select>
|
</div>
|
<div class="table-cell text-right">处理时间：</div>
|
<div class="table-cell">
|
<el-date-picker
|
v-model="startDrsj"
|
size="small"
|
class="time_box"
|
:picker-options="pickerOptions0"
|
type="date"
|
placeholder="选择日期"
|
value-format="yyyy-MM-dd"
|
></el-date-picker
|
>-
|
<el-date-picker
|
v-model="endDrsj"
|
size="small"
|
class="time_box"
|
:picker-options="pickerOptions1"
|
type="date"
|
placeholder="选择日期"
|
value-format="yyyy-MM-dd"
|
></el-date-picker>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 表单 -->
|
<div class="flex-page-content">
|
<div class="batteryrHistoryquery" style="width: 100%; height: 100%">
|
<el-table
|
stripe
|
size="small"
|
:data="table.datas"
|
height="100%"
|
class="tableCent"
|
ref="goodsDetailTable"
|
tooltip-effect="light"
|
>
|
<el-table-column :width="50" type="index" label="编号">
|
</el-table-column>
|
<el-table-column
|
v-for="header in table.headers"
|
:key="header.prop"
|
:prop="header.prop"
|
:label="header.label"
|
:width="header.width"
|
:min-width="header.minWidth"
|
align="center"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
prop="cztime"
|
fixed="right"
|
width="180px"
|
align="center"
|
label="操作"
|
>
|
<template slot-scope="scope">
|
<el-button
|
:disabled="!isCanDel"
|
type="danger"
|
size="mini"
|
@click="viewDetails(scope.row)"
|
>详情</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<!-- 底部分页 -->
|
<div class="flex-page-footer" slot="footer">
|
<div class="el-pagination-btns">
|
<el-button
|
type="primary"
|
@click="verifyHisList(false)"
|
round
|
size="mini"
|
icon="el-icon-search"
|
>查询</el-button
|
>
|
</div>
|
<el-pagination
|
class="pagess"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="pageNum"
|
:page-sizes="[10, 20, 30, 50, 100]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
></el-pagination>
|
<!-- <el-button type="primary" round size="mini" icon="el-icon-wallet">全部选中</el-button> -->
|
</div>
|
<!-- 详情 -->
|
<el-dialog
|
title="处理详情"
|
width="640px"
|
:visible.sync="detailsVisible"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center dialog-verify"
|
:modal-append-to-body="false"
|
>
|
<div class="label">处理描述</div>
|
<div class="value">{{ rowData.reason }}</div>
|
<template v-if="rowData.fileUrl">
|
<div class="label">相关图片</div>
|
<div class="value">
|
<el-image
|
style="width: 100px; height: 100px"
|
v-for="(url, idx) in rowData.fileList"
|
:src="url"
|
:key="'img_' + idx"
|
:preview-src-list="rowData.fileList"
|
>
|
</el-image>
|
</div>
|
</template>
|
</el-dialog>
|
</flex-layout>
|
</template>
|
|
<script>
|
import {
|
getProvinces,
|
searchCity,
|
searchCounty,
|
getStations,
|
} from "@/views/dataMager/js/power";
|
import { verifyHisList } from "@/views/alarmMager/js/verify";
|
// 引入导出表格
|
import getWebUrl from "@/assets/js/tools/getWebUrl";
|
import { isHasPermit } from "@/assets/js/tools";
|
const ALARMTYPE = ["", "电池告警", "设备告警", "电源告警"];
|
export default {
|
name: "batteryrHistoryquery",
|
components: {},
|
data() {
|
let permits = this.$store.state.user.permits;
|
let isCanDel = isHasPermit("batt_alm_delete_permit", permits);
|
let thistime = new Date();
|
let yy = thistime.getFullYear();
|
let MM = thistime.getMonth() + 1;
|
let dd = thistime.getDate();
|
let day1 = yy + "-" + MM + "-" + dd;
|
let startD = new Date(thistime.getTime() - 7 * 24 * 3600 * 1000).format(
|
"yyyy-MM-dd"
|
);
|
let baseUrl = getWebUrl();
|
return {
|
baseUrl,
|
detailsVisible: false,
|
rowData: {},
|
isCanDel: isCanDel,
|
usr_ids: "119001",
|
pageNum: 1,
|
pageSize: 10,
|
total: 0,
|
/* 日期 */
|
startDrsj: startD,
|
endDrsj: day1,
|
pickerOptions0: {
|
disabledDate: (time) => {
|
if (this.endDrsj) {
|
return new Date(time.getTime()) > new Date(this.endDrsj);
|
}
|
},
|
},
|
pickerOptions1: {
|
disabledDate: (time) => {
|
return (
|
new Date(time.getTime() + 24 * 60 * 60 * 1000) <
|
new Date(this.startDrsj)
|
);
|
},
|
},
|
alarmType: undefined,
|
filters: {
|
values: {
|
province: "",
|
city: "",
|
county: "",
|
home: "",
|
},
|
data: {
|
province: [],
|
city: [],
|
county: [],
|
home: [],
|
},
|
},
|
/* 表单 */
|
table: {
|
headers: [
|
{
|
prop: "stationNamex",
|
label: "机房名称",
|
minWidth: 320,
|
},
|
{
|
prop: "alarmTypeName",
|
label: "告警类型",
|
width: 120,
|
},
|
{
|
prop: "alarmName",
|
label: "告警名称",
|
width: 162,
|
},
|
{
|
prop: "almStartTime",
|
label: "告警开始时间",
|
width: 180,
|
},
|
{
|
prop: "createTime",
|
label: "告警处理时间",
|
width: 180,
|
},
|
{
|
prop: "reason",
|
label: "处理描述",
|
width: 180,
|
},
|
],
|
datas: [],
|
},
|
};
|
},
|
mounted() {
|
this.searchProvince();
|
this.verifyHisList();
|
},
|
computed: {},
|
methods: {
|
viewDetails(obj) {
|
console.log(obj);
|
this.rowData = obj;
|
if (obj.fileUrl) {
|
this.rowData.fileList = obj.fileUrl
|
.split(";")
|
.map((v) => this.baseUrl + v);
|
}
|
this.detailsVisible = true;
|
},
|
changeHome() {
|
// 重置分页信息
|
this.pageNum = 1;
|
// 查询数据
|
this.verifyHisList();
|
},
|
verifyHisList() {
|
let param = {
|
pageNum: this.pageNum,
|
pageSize: this.pageSize,
|
stationName1: this.filters.values.province,
|
stationName2: this.filters.values.city,
|
stationName3: this.filters.values.home,
|
stationName5: this.filters.values.county,
|
dealTimeStart: this.startDrsj + " 00:00:00",
|
dealTimeEnd: this.endDrsj + " 23:59:59",
|
alarmType: this.alarmType,
|
};
|
verifyHisList(param)
|
.then((res) => {
|
|
let { code, data } = res.data;
|
let list = [];
|
let total = 0;
|
if (code) {
|
total = data.total;
|
list = data.list.map((v) => {
|
v.stationNamex = v.stationName5 + "-" + v.stationName3;
|
v.alarmTypeName = ALARMTYPE[v.alarmType] || "未知";
|
return v;
|
});
|
}
|
this.table.datas = list;
|
this.total = total;
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
searchProvince() {
|
// 查询省
|
// this.loading = this.$layer.loading(1);
|
getProvinces().then((res) => {
|
res = res.data;
|
var data = [];
|
if (res.code) {
|
data = res.data.map((v) => {
|
return {
|
label: v,
|
value: v,
|
};
|
});
|
}
|
let len = data.length;
|
// 设置第一笔数据
|
data.unshift({
|
label: "全部(共" + len + "种)",
|
value: "",
|
});
|
// 设置省
|
this.filters.data.province = data;
|
// 查询市
|
this.searchCity();
|
});
|
},
|
searchCity() {
|
// 查询市
|
// 重置值
|
this.filters.values.city = this.isAutoLoad ? this.$route.query.city : "";
|
this.filters.values.county = this.isAutoLoad
|
? this.$route.query.county
|
: "";
|
this.filters.values.home = this.isAutoLoad ? this.$route.query.home : "";
|
// 构造查询条件
|
let searchParams = {
|
stationName1: this.filters.values.province,
|
};
|
// 请求后台
|
searchCity(searchParams).then((res) => {
|
res = res.data;
|
// console.log(res, 'res 市========');
|
var data = [];
|
if (res.code) {
|
data = res.data.map((v) => {
|
return {
|
label: v,
|
value: v,
|
};
|
});
|
}
|
let len = data.length;
|
// 设置第一笔数据
|
data.unshift({
|
label: "全部(共" + len + "种)",
|
value: "",
|
});
|
// 设置市
|
this.filters.data.city = data;
|
// 查询区县
|
this.searchCounty();
|
});
|
},
|
searchCounty() {
|
//查询区县
|
// 重置值
|
this.filters.values.county = this.isAutoLoad
|
? this.$route.query.county
|
: "";
|
this.filters.values.home = this.isAutoLoad ? this.$route.query.home : "";
|
// 构造查询条件
|
let searchParams = {
|
stationName1: this.filters.values.province,
|
stationName2: this.filters.values.city,
|
};
|
// 请求后台
|
searchCounty(searchParams).then((res) => {
|
res = res.data;
|
var data = [];
|
// console.log(res, 'res 区县========');
|
if (res.code) {
|
data = res.data.map((v) => {
|
return {
|
label: v,
|
value: v,
|
};
|
});
|
}
|
let len = data.length;
|
// 设置第一笔数据
|
data.unshift({
|
label: "全部(共" + len + "种)",
|
value: "",
|
});
|
// 设置区县
|
this.filters.data.county = data;
|
// 查询机房
|
this.searchHome();
|
});
|
},
|
searchHome() {
|
//查询机房
|
// 重置分页信息
|
this.pageNum = 1;
|
// 重置值
|
this.filters.values.home = this.isAutoLoad ? this.$route.query.home : "";
|
let searchParams = {
|
stationName1: this.filters.values.province,
|
stationName2: this.filters.values.city,
|
stationName5: this.filters.values.county,
|
};
|
// 未选择区县
|
if (searchParams.stationName5 == "") {
|
// 设置机房
|
this.filters.data.home = [
|
{
|
label: "请选择机房名称",
|
value: "",
|
},
|
];
|
// 查询数据
|
this.verifyHisList();
|
return;
|
}
|
|
// 请求后台
|
getStations(searchParams).then((res) => {
|
res = res.data;
|
// console.log(res, 'res 机房========');
|
let data = [];
|
if (res.code) {
|
data = res.data.map((v) => {
|
return {
|
label: v.stationName3,
|
value: v.stationName3,
|
};
|
});
|
}
|
let len = data.length;
|
// 设置第一笔数据
|
data.unshift({
|
label: "全部(共" + len + "种)",
|
value: "",
|
});
|
// 设置机房
|
this.filters.data.home = data;
|
|
// 查询数据
|
this.verifyHisList();
|
});
|
},
|
|
handleSizeChange(val) {
|
this.pageSize = val;
|
/* console.log(`每页 ${newSize} 条`); */
|
this.verifyHisList();
|
},
|
handleCurrentChange(val2) {
|
this.pageNum = val2;
|
/* console.log(`当前页: ${val2}`); */
|
this.verifyHisList();
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
|
.dialog-verify {
|
/deep/ .el-dialog__body {
|
background: #fff;
|
padding: 10px 0;
|
color: #333;
|
}
|
.label {
|
width: 6em;
|
padding-right: 0.5em;
|
text-align: right;
|
float: left;
|
&::after {
|
content: ':';
|
}
|
}
|
.value {
|
padding-left: 5em;
|
margin-bottom: 10px;
|
font-weight: bold;
|
}
|
}
|
</style>
|
