<template>
|
<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="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 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 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>
|
</div>
|
<div class="flex-page-content">
|
<el-table stripe size="mini" header-row-class-name="header-primary" height="100%" :data="table.datas">
|
<el-table-column :prop="item.prop" :label="item.label" :min-width="item.minWidth" :resizable="false"
|
align="center" v-for="(item,index) in table.headers" :key="index">
|
</el-table-column>
|
<el-table-column fixed="right" label="操作" width="180" align="center">
|
<template slot-scope="scope">
|
<el-button :disabled="!isCanEdit" @click="handleClick(scope.row)" type="primary" size="mini">
|
编辑
|
</el-button>
|
<el-button :disabled="!isCanEdit" type="danger" size="mini" @click="confirmDelHome(scope.row)">
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="flex-page-footer" slot="footer">
|
<div class="el-pagination-btns">
|
<el-button type="primary" @click="searchData" round size="mini" icon="el-icon-search">查询</el-button>
|
<el-button type="primary" round size="mini" icon="el-icon-wallet" @click="exportFile">导出</el-button>
|
</div>
|
<el-pagination size="mini" :current-page="page.pageCurr" :page-sizes="[10, 20, 30, 50, 100]"
|
:page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
|
:total="page.pageAll"
|
@current-change="currentChange" @size-change="sizeChange"></el-pagination>
|
<div class="el-pagination-btns">
|
<el-button :disabled="!isCanEdit" type="primary" @click="addHome()" round size="mini"
|
icon="el-icon-plus">新建机房
|
</el-button>
|
</div>
|
</div>
|
<!-- 添加电源设备 -->
|
<el-dialog title="添加电源设备" width="800px" :visible.sync="addDialog" :close-on-click-modal="false" top="0"
|
class="dialog-center" :modal-append-to-body="false">
|
<add-power-mager v-if="addDialog" @success="addSuccess"></add-power-mager>
|
</el-dialog>
|
<!-- 编辑电源设备 -->
|
<el-dialog :title="editTitle" width="800px" :visible.sync="editDialog" :close-on-click-modal="false" top="0"
|
class="dialog-center" :modal-append-to-body="false">
|
<edit-power-mager v-if="editDialog" :batt="batt" @success="editSuccess"></edit-power-mager>
|
</el-dialog>
|
</flex-layout>
|
</template>
|
|
<script>
|
import {
|
searchProvince,
|
searchCity,
|
searchCounty,
|
searchStation as searchHome
|
} from '../../assets/js/api.js'
|
import AddPowerMager from '@/pages/dataMager/dialog/AddPowerMager'
|
import EditPowerMager from '@/pages/dataMager/dialog/EditPowerMager'
|
// 引入导出表格
|
import {
|
export_json_to_excel
|
} from '../../assets/js/excel/Export2Excel.js'
|
import {
|
isHasPermit
|
} from "@/assets/js/tools";
|
|
export default {
|
components: {
|
AddPowerMager,
|
EditPowerMager
|
},
|
data() {
|
let permits = this.$store.state.user.permits;
|
let isCanEdit = isHasPermit('batttest_data_edit_permit', permits);
|
return {
|
isCanEdit: isCanEdit,
|
batt: {},
|
loading: '',
|
table: {
|
headers: [{
|
prop: "stationId",
|
label: "机房编号",
|
minWidth: 160
|
},
|
{
|
prop: "stationName1",
|
label: "省",
|
minWidth: 120
|
},
|
{
|
prop: "stationName2",
|
label: "市",
|
minWidth: 120
|
},
|
{
|
prop: "stationName5",
|
label: "区县",
|
minWidth: 120
|
},
|
{
|
prop: "stationName3",
|
label: "机房名称",
|
minWidth: 280
|
},
|
{
|
prop: "stationIP",
|
label: "机房IP",
|
minWidth: 150
|
},
|
{
|
prop: "powerDeviceId",
|
label: "电源设备ID",
|
minWidth: 120
|
},
|
{
|
prop: "powerDeviceIp",
|
label: "电源设备IP",
|
minWidth: 150
|
},
|
{
|
prop: "powerDeviceName",
|
label: "电源设备名称",
|
minWidth: 160
|
},
|
{
|
prop: "protocolName",
|
label: "协议名称",
|
minWidth: 120
|
},
|
{
|
prop: "powerProducer",
|
label: "生产厂家",
|
minWidth: 140
|
},
|
{
|
prop: "powerProductDate",
|
label: "生产日期",
|
minWidth: 160
|
},
|
{
|
prop: "powerInUseDate",
|
label: "投入使用日期",
|
minWidth: 160
|
},
|
{
|
prop: "runCompany",
|
label: "运维单位",
|
minWidth: 160
|
}
|
],
|
datas: []
|
},
|
filters: {
|
values: {
|
province: '',
|
city: '',
|
county: '',
|
home: '',
|
},
|
data: {
|
province: [],
|
city: [],
|
county: [],
|
home: [],
|
},
|
},
|
page: {
|
pageCurr: 1,
|
pageSize: 10,
|
pageAll: 0,
|
},
|
addDialog: false,
|
editDialog: false,
|
}
|
},
|
methods: {
|
addHome() {
|
this.batt = {};
|
this.addDialog = true;
|
},
|
handleAddClick(row) {
|
this.batt = row;
|
this.addDialog = true;
|
},
|
// 导出表格
|
exportFile() {
|
let tHeader = [];
|
let filterVal = [];
|
this.table.headers.map((item, index) => {
|
tHeader.push(item.label)
|
filterVal.push(item.prop)
|
})
|
let list = this.table.datas;
|
let excelData = this.formatJson(filterVal, list);
|
export_json_to_excel(tHeader, excelData, "电源信息配置");
|
},
|
formatJson(filterVal, jsonData) {
|
return jsonData.map(v => filterVal.map(j => v[j]));
|
},
|
searchProvince() { // 查询省
|
this.loading = this.$layer.loading(1);
|
this.$apis.dataMager.powerMager.searchProvince().then((res) => {
|
var rs = JSON.parse(res.data.result);
|
var data = [];
|
console.log(rs);
|
if (rs.code == 1) {
|
if (rs.data) {
|
var rsData = rs.data;
|
// 遍历结果集
|
for (var i = 0; i < rsData.length; i++) {
|
var _rsData = rsData[i];
|
var tmp = {
|
label: _rsData.stationName1,
|
value: _rsData.stationName1
|
};
|
data.push(tmp);
|
}
|
}
|
}
|
// 设置第一笔数据
|
data.unshift({
|
label: "全部（共" + data.length + "种)",
|
value: ''
|
});
|
// 设置省
|
this.filters.data.province = data;
|
// 查询市
|
this.searchCity();
|
});
|
},
|
searchCity() { // 查询市
|
// 重置值
|
this.filters.values.city = "";
|
this.filters.values.county = "";
|
this.filters.values.home = "";
|
// 构造查询条件
|
let searchParams = {
|
stationName1: this.filters.values.province
|
};
|
// 请求后台
|
this.$apis.dataMager.powerMager.searchCity(searchParams).then((res) => {
|
var rs = JSON.parse(res.data.result);
|
var data = [];
|
if (rs.code == 1) {
|
if (rs.data) {
|
var rsData = rs.data;
|
if (rsData && rsData.length > 0) {
|
// 遍历结果集
|
for (var i = 0; i < rsData.length; i++) {
|
var _rsData = rsData[i];
|
var tmp = {
|
label: _rsData.stationName1,
|
value: _rsData.stationName1
|
};
|
data.push(tmp);
|
}
|
}
|
}
|
}
|
// 设置第一笔数据
|
data.unshift({
|
label: "全部（共" + data.length + "种)",
|
value: ''
|
});
|
// 设置市
|
this.filters.data.city = data;
|
// 查询区县
|
this.searchCounty();
|
});
|
},
|
searchCounty() {
|
// 重置值
|
this.filters.values.county = "";
|
this.filters.values.home = "";
|
// 构造查询条件
|
let searchParams = {
|
stationName1: this.filters.values.province,
|
stationName2: this.filters.values.city
|
};
|
// 请求后台
|
this.$apis.dataMager.powerMager.searchCounty(searchParams).then((res) => {
|
var rs = JSON.parse(res.data.result);
|
var data = [];
|
if (rs.code == 1) {
|
if (rs.data) {
|
var rsData = rs.data;
|
if (rsData && rsData.length > 0) {
|
// 遍历结果集
|
for (var i = 0; i < rsData.length; i++) {
|
var _rsData = rsData[i];
|
var tmp = {
|
label: _rsData.stationName1,
|
value: _rsData.stationName1
|
};
|
data.push(tmp);
|
}
|
}
|
}
|
}
|
// 设置第一笔数据
|
data.unshift({
|
label: "全部（共" + data.length + "种)",
|
value: ''
|
});
|
// 设置区县
|
this.filters.data.county = data;
|
// 查询机房
|
this.searchHome();
|
});
|
},
|
searchHome() {
|
// 重置分页信息
|
this.page.pageCurr = 1;
|
// 重置值
|
this.filters.values.home = ""; // 构造查询条件
|
var 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.searchData(true);
|
return;
|
}
|
|
// 请求后台
|
this.$apis.dataMager.powerMager.getStations(searchParams).then((res) => {
|
let rs = JSON.parse(res.data.result);
|
console.log(rs)
|
let data = [];
|
if (rs.code == 1) {
|
if (rs.data) {
|
let rsData = rs.data;
|
// 遍历结果集
|
for (let i = 0; i < rsData.length; i++) {
|
let _rsData = rsData[i];
|
let index = this.checkValIsIn(_rsData.stationName1, data);
|
if (index == -1) {
|
let tmp = {
|
label: _rsData.stationName1,
|
value: _rsData.stationName1
|
};
|
data.push(tmp);
|
}
|
}
|
}
|
}
|
// 设置第一笔数据
|
data.unshift({
|
label: "全部（共" + data.length + "种)",
|
value: ''
|
});
|
// 设置机房
|
this.filters.data.home = data;
|
|
// 查询数据
|
this.searchData(true);
|
});
|
},
|
checkValIsIn(val, arr) {
|
for (let i = 0; i < arr.length; i++) {
|
if (arr[i].label == val) {
|
return i;
|
}
|
}
|
return -1;
|
},
|
changeHome: function () {
|
// 重置分页信息
|
this.page.pageCurr = 1;
|
// 查询数据
|
this.searchData();
|
},
|
searchData(noLoading) {
|
if (!noLoading) {
|
this.loading = this.$layer.loading(1);
|
}
|
let filters = this.filters.values;
|
// 构造查询条件
|
let searchParams = {
|
stationName1: filters.province, // 省
|
stationName2: filters.city, // 市
|
stationName5: filters.county, // 区/县
|
stationId: filters.home, // 站点
|
pageInfo: {
|
pageNum: this.page.pageCurr,
|
pageSize: this.page.pageSize,
|
},
|
};
|
// 请求后台
|
this.$apis.dataMager.powerMager.searchData(searchParams).then(res => {
|
// 关闭弹出框
|
this.$layer.close(this.loading);
|
// 处理数据
|
let rs = JSON.parse(res.data.result);
|
let data = [];
|
if (rs.code == 1) {
|
data = rs.data;
|
// 设置数据总数
|
this.page.pageAll = data.totalSize;
|
} else {
|
this.page.pageCurr = 1;
|
this.page.pageAll = 0;
|
}
|
console.log(rs);
|
// 设置表格数据
|
this.table.datas = data.obj;
|
|
}).catch(error => {
|
console.log(error);
|
// 关闭弹出框
|
this.$layer.close(this.loading);
|
})
|
},
|
dateSub: function (row, column, cellValue) {
|
return cellValue.substr(0, 10);
|
},
|
currentChange(value) {
|
this.page.pageCurr = value;
|
this.searchData();
|
},
|
sizeChange(value) {
|
this.page.pageCurr = 1;
|
this.page.pageSize = value;
|
this.searchData();
|
},
|
addSuccess() {
|
// 关闭弹出面板
|
this.addDialog = false
|
// 从新查询数据
|
this.searchData();
|
},
|
confirmDelHome(batt) {
|
var self = this;
|
this.$layer.confirm('确定删除' + batt.stationName3, {
|
icon: 3
|
}, function (index) {
|
// 关闭询问框
|
self.$layer.close(index);
|
// 删除机房
|
self.delHome(batt);
|
});
|
},
|
delHome(batt) {
|
let loading = this.$layer.loading(1);
|
let data = {
|
powerDeviceId: batt.powerDeviceId
|
}
|
// 请求后台
|
this.$apis.dataMager.powerMager.deletePower(data).then(res => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
this.$message({
|
type: 'success',
|
message: '删除' + batt.stationName3 + '成功！'
|
});
|
this.searchData();
|
} else {
|
this.$message({
|
type: 'error',
|
message: '删除' + batt.stationName3 + '失败！'
|
});
|
}
|
// 关闭等待框
|
this.$layer.close(loading);
|
}).catch(error => {
|
console.log(error);
|
// 关闭等待框
|
this.$layer.close(loading);
|
});
|
},
|
handleClick(batt) {
|
this.batt = batt;
|
this.editDialog = true;
|
},
|
editSuccess() {
|
// 关闭弹出面板
|
this.editDialog = false
|
// 从新查询数据
|
this.searchData();
|
}
|
},
|
computed: {
|
editTitle() {
|
let batt = this.batt;
|
return "编辑" + batt.stationName1 + '-' + batt.stationName2 +
|
'-' + batt.stationName5 + '-' + batt.stationName3 +
|
'-' + batt.stationName4
|
}
|
},
|
mounted() {
|
// 查询省-市-区县-机房
|
this.searchProvince();
|
},
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
