<template>
|
<content-box title="站点列表"
|
titleLeft
|
toggle
|
@toggleChange="toggleChange"
|
class="siteList context-box-w">
|
<flex-layout>
|
<div slot="header">
|
<el-select
|
style="width: 98%; margin-left: 1%;"
|
size="small"
|
v-model="filterText"
|
filterable
|
:filter-method="homeFilter"
|
placeholder="请选择"
|
clearable
|
@change="filterChange">
|
<el-option
|
v-for="item in homeList"
|
:key="item.key"
|
:label="item.label"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</div>
|
<my-el-tree
|
:data="data"
|
:default-expanded-keys="expandedKeys"
|
:current-node-key="getCurrentKey"
|
@node-click="nodeClick"
|
@leaf-click="leafClick"></my-el-tree>
|
</flex-layout>
|
</content-box>
|
</template>
|
|
<script>
|
import pinyinMatch from 'pinyin-match'
|
import ContentBox from '../../components/ContentBox'
|
import MyElTree from '../../components/MyElTree'
|
|
import {
|
searchBattInfo
|
} from '../../assets/js/api'
|
|
import {
|
getTreeDataByKey,
|
getQueryString,
|
} from '../../assets/js/tools'
|
|
export default {
|
components: {
|
ContentBox,
|
MyElTree,
|
},
|
data() {
|
// 默认展开的节点
|
let defaultExpandedKeys = [
|
getQueryString("province"),
|
getQueryString("city"),
|
getQueryString("county"),
|
getQueryString("home")
|
];
|
// 默认激活的电池组
|
let currentNodeKey = getQueryString("batt") ? getQueryString("batt") : "";
|
return {
|
defaultExpandedKeys,
|
currentNodeKey,
|
data: [],
|
expanded: [],
|
currentKey: '',
|
filterText: '',
|
homeList: [],
|
homeListCopy: [],
|
batt: {},
|
nibian: {
|
show: false,
|
},
|
}
|
},
|
methods: {
|
homeFilter(value) {
|
if (value) { //value存在
|
this.homeList = this.homeListCopy.filter((item) => {
|
return pinyinMatch.match(item.label, value);
|
})
|
} else { //val为空时，还原数组
|
this.homeList = this.homeListCopy;
|
}
|
},
|
toggleChange() {
|
this.$emit('toggleChange');
|
},
|
// 查询机房的信息
|
searchStation() {
|
this.$apis.dataTest.historyAio.getA059StationList({
|
StationName1: "",
|
StationName2: "",
|
StationName5: ""
|
}).then((res) => {
|
res = JSON.parse(res.data.result);
|
// console.log(res, '8059');
|
// 格式化数据
|
this.formatData(res.data);
|
});
|
},
|
formatData(data) {
|
let result = [];
|
let homeList = [];
|
// 遍历数据构造树状
|
data.forEach(item=>{
|
let tmp = {};
|
tmp.label = item.StationName1+"-"+item.StationName2+"-"+item.StationName5+"-"+item.StationName3;
|
tmp.key = item.FBSDeviceId+Math.random();
|
tmp.id = item.FBSDeviceId;
|
tmp.data = item;
|
let index = this.checkValIsIn(tmp.label, homeList);
|
if(index == -1) {
|
homeList.push(tmp);
|
}
|
|
// 省
|
let provice = this.addData(result, item.StationName1);
|
// 市
|
let city = this.addData(provice.children, item.StationName2, provice);
|
// 区县
|
let county = this.addData(city.children, item.StationName5, city);
|
// 机房
|
let home = this.addData(county.children, item.StationName3, county, item);
|
|
// 添加空白位置占位
|
home.children.push({
|
id: home.id+Math.random(),
|
label: '数据加载中...'
|
});
|
});
|
// 设置树状列表
|
this.data = result;
|
// 设置搜索的下拉框
|
this.homeList = homeList;
|
this.homeListCopy = homeList.filter(item=>{
|
return true;
|
})
|
// 设置默认展开的节点
|
if(data.length>0) {
|
let item = data[0];
|
this.expanded = [
|
item.StationName1,
|
item.StationName2,
|
item.StationName5,
|
item.StationName3,
|
];
|
}
|
let expandedNode = getTreeDataByKey(this.expandedKeys[0], result);
|
if(expandedNode != -1) {
|
this.nodeClick(expandedNode);
|
}
|
},
|
addData(list, val, parent, data) {
|
let item;
|
let index = this.checkValIsIn(val, list);
|
let parentId = parent?parent.id+'-':"";
|
if(index == -1) {
|
item = {
|
id: parentId+val,
|
label: val,
|
children: [],
|
data: data,
|
};
|
list.push(item);
|
}else {
|
item = list[index];
|
}
|
return item;
|
},
|
checkValIsIn(val, arr) {
|
for(let i=0; i<arr.length; i++) {
|
if(arr[i].label == val) {
|
return i;
|
}
|
}
|
return -1;
|
},
|
nodeClick(data, node) {
|
if(data.children && data.children[0] && data.children[0].label == "数据加载中...") {
|
this.searchBattInfo(data, node);
|
}else if(!node){
|
let batt = data.children[0];
|
this.currentKey = batt.BattGroupId;
|
this.leafClick(batt);
|
}
|
},
|
searchBattInfo(data, node) {
|
// 加载等待
|
if(node) {
|
node.loading=true;
|
}
|
|
searchBattInfo(data.data).then((res)=>{
|
// 关闭等待
|
if(node) {
|
node.loading=false;
|
}
|
|
let rs = JSON.parse(res.data.result);
|
let result=[{
|
id: Math.random(),
|
label: '暂无电池组',
|
}];
|
// 查询到结果
|
if(rs.code == 1) {
|
result = rs.data.map(item=>{
|
item.id = item.BattGroupId;
|
item.label = item.StationName4+"-"+item.BattGroupName;
|
item.leaf = true;
|
return item;
|
});
|
}
|
data.children = result;
|
// 根据node的值判断不是通过点击触发的
|
if(!node) {
|
let acIndex = 0;
|
for(let i=1; i<result.length; i++) {
|
if(result[i].BattGroupId == this.currentNodeKey) {
|
acIndex = i;
|
break;
|
}
|
}
|
this.currentKey = result[acIndex].id;
|
this.batt = result[acIndex];
|
this.$emit('leaf-click', result[acIndex]);
|
}
|
}).catch(error=>{
|
console.log(error);
|
});
|
},
|
leafClick(data) {
|
if(data.leaf) {
|
this.batt = data;
|
this.$emit('leaf-click', data);
|
}
|
|
},
|
filterChange(id) {
|
if(id) {
|
let homeInfo = this.homeList.filter(item=>{
|
return item.id == id;
|
});
|
// 获取到home的信息
|
if(homeInfo.length>0) {
|
let item = homeInfo[0].data;
|
this.defaultExpandedKeys = [
|
item.StationName1,
|
item.StationName2,
|
item.StationName5,
|
item.StationName3,
|
];
|
|
let expandedNode = getTreeDataByKey(this.expandedKeys[0], this.data);
|
if(expandedNode != -1) {
|
this.nodeClick(expandedNode);
|
}
|
}
|
}
|
}
|
},
|
computed: {
|
expandedKeys() {
|
let parentKey = this.defaultExpandedKeys.join("-");
|
if(parentKey.length>0 && parentKey != '---') {
|
return [parentKey];
|
}else {
|
let expanded = this.expanded.join("-");
|
return [expanded];
|
}
|
},
|
getCurrentKey() {
|
return this.currentNodeKey?this.currentNodeKey:this.currentKey;
|
}
|
},
|
mounted() {
|
// 查询电池组
|
this.searchStation();
|
}
|
}
|
</script>
|
|
<style scoped>
|
.context-box-w {
|
width: 320px;
|
}
|
.box-tools {
|
width: 200px;
|
text-align: right;
|
line-height: 32px;
|
}
|
.box-tools .iconfont {
|
margin-left: 8px;
|
font-size: 20px;
|
}
|
.box-tools .iconfont:hover {
|
cursor: pointer;
|
color: #cfcfcf;
|
}
|
.box-tools .iconfont:active {
|
color: #FF0000;
|
}
|
</style>
|
