<template>
|
<flex-layout class="sites_box">
|
<!-- <content-Box> -->
|
<!-- <div>故障站点</div> -->
|
<div class="table-layout filter-box-table" slot="header">
|
|
</div>
|
<div class="flex-page-content">
|
<!-- 表单 -->
|
<el-table size="small" border :data="table.datas" height="100%" class="tableCent">
|
<el-table-column
|
v-for="(header,i) in table.headers"
|
:key="header.prop"
|
:prop="header.prop"
|
:label="header.label"
|
:width="header.width"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<div>
|
<span v-if="header.prop == 'bz'">{{ scope.row.baojiGroup.baoji_group_name }}</span>
|
<span v-else-if="header.prop == table.headers[i].prop" class="sites_box1">
|
<a v-for="(item,index) in scope.row.battInfList[i-1]" :key="index" :title="item.BattModel||'无故障'" @click="openClick(scope.row,item)" :class="{textColor:item.num == 1}" class="sites_box_span">{{ item.StationName }}</a>
|
</span>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<!-- 底部 -->
|
<div class="flex-page-footer" slot="footer">
|
|
</div>
|
</flex-layout>
|
</template>
|
|
<script>
|
export default {
|
components: {
|
// ContentBox
|
},
|
data() {
|
return {
|
table: {
|
headers: [],
|
datas: []
|
}
|
};
|
},
|
created() {
|
let seft = this;
|
seft.queryList();
|
},
|
methods: {
|
// 跳转实时数据
|
openClick:function(data,obj){
|
console.log(data,obj)
|
},
|
// 查询列表数据
|
queryList:function(){
|
let seft = this;
|
seft.$axios({
|
method: "post",
|
url: "BattInfAction!getBaojiGroupWithBattInfo",
|
data: null
|
}).then((res)=>{
|
let result = JSON.parse(res.data.result);
|
let headers = [];
|
let listData = [];
|
let bzArr = [];
|
result.data.forEach(item => {
|
// debugger
|
// 设置表头
|
let status = true;
|
let fax = true;
|
// 表头去重
|
headers.forEach(list => {
|
if(item.sort == list.label){
|
status = false;
|
}
|
});
|
if(status){
|
let obj = {
|
prop: item.sort,
|
label: item.sort,
|
width: ""
|
}
|
headers.push(obj);
|
}
|
// 班组去重
|
bzArr.forEach(list => {
|
if(item.baojiGroup.baoji_group_id == list.baojiGroup.baoji_group_id){
|
fax = false;
|
}
|
});
|
if(fax){
|
// 确认有几个班组
|
bzArr.push({baojiGroup:item.baojiGroup});
|
}
|
|
});
|
if(headers.length>0){
|
headers.unshift({
|
prop: "bz",
|
label: "班组",
|
width: "300"
|
})
|
}
|
|
// 设置数据结构
|
bzArr.forEach((n,i)=>{
|
n.battInfList = [];
|
result.data.forEach((element,index) => {
|
if(n.baojiGroup.baoji_group_id == element.baojiGroup.baoji_group_id){
|
let thisIndex = 0;
|
for (let o = 0; o < headers.length; o++) {
|
if(element.sort == headers[o].prop){
|
thisIndex = o - 1;
|
break
|
}
|
|
}
|
n.battInfList[thisIndex] = [];
|
|
element.battInfList.forEach(s => {
|
|
n.battInfList[thisIndex].push(s);
|
});
|
}
|
|
});
|
// n.battInfList = n.battInfList.filter(d=>d) //去除数组空元素
|
})
|
// 构造数据
|
this.table.headers = headers;
|
this.table.datas = bzArr;
|
// console.log(result)
|
// console.log(bzArr)
|
})
|
}
|
|
}//methods
|
};
|
</script>
|
|
<style lang="less">
|
.sites_box{
|
.textColor{
|
color: #FFE329;
|
}
|
.el-table td{
|
background: transparent !important;
|
}
|
.el-table th.is-leaf,.el-table td{
|
border-bottom:1px solid #EBEEF5 !important;
|
font-size: 20px;
|
}
|
.el-table td .cell{
|
text-align: left !important;
|
}
|
// .el-table__row:hover > td {
|
// background-color: transparent !important;
|
|
// }
|
|
// .el-table__row--striped:hover > td {
|
// background-color: transparent !important;
|
|
// }
|
.el-table .cell {
|
white-space: pre-line;
|
|
}
|
.sites_box1{
|
display: inline-block;
|
word-break:break-all;
|
.sites_box_span{
|
display: inline-block;
|
margin-right: 30px;
|
margin-bottom: 13px;
|
}
|
}
|
}
|
|
|
</style>
|
