原文链接:原文链接
<template>
<div>
<el-dialog
title="潮流数据"
:visible.sync="dialogVisible"
class="invoice-list"
width="90%"
:modal-append-to-body="false"
:before-close="dialogClose"
>
<!-- 树形控件 -->
<ul class="invoice-header">
<li class="invoice-item">名称</li>
<li class="invoice-item">类型</li>
<li class="invoice-item">电压</li>
</ul>
<el-tree
:props="props"
:data="treeTableData1"
show-checkbox
node-key="id"
ref="treeData"
@check-change="handleCheckChange"
@check="handleCheck"
>
<!-- 使用自定义,需要加slot-scope,返回两个值,node是当前节点指定的对象
data是当前节点的数据 -->
<div class="custom-tree-node" slot-scope="{ data }">
<div class="total_info_box" v-if="data.span1">
<span><i>设备类型:</i> {{ data.description }}</span>
</div>
<span v-else class="table_info_node">
<span class="table_info_item">{{ data.name }}</span>
<span class="table_info_item">{{ data.type }}</span>
<span class="table_info_item">{{ data.voltage }}</span>
</span>
</div>
</el-tree>
<!-- 分页区域 -->
<el-pagination
@size-change="handleSizeChange"
style="
background-color: #cccbcb;
width: 99.5%;
position: absolute;
bottom: 0px;
left: 0px;
magin-top: 52px;
"
@current-change="handleCurrentChange"
:current-page="queryInfo.num"
:page-sizes="[10, 50, 100, 500]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
<div slot="footer" style="margin-bottom: 35px" class="dialog-footer">
<el-button type="info" @click="dialogClose">取 消</el-button>
<el-button type="primary" @click="bpaConfirm">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
czType: '', //搜索厂站类型
belongarea: '', //搜索所属调度机构
belongPartition: '', //搜索所属分区
areaData: [], //所属分区对应的选择数据
starttime: '', //搜索开始时间
endtime: '', //搜索结束时间
dispatchData: [], //调度机构数组
dyGrade: '', //搜索电压等级
czName: '', //搜索厂站名字
datOrSwi: 'DAT', //查询时候参数,默认DAT
total: 0, //总条数
queryInfo: {
num: 1, //页数
pagesize: 10, //每页条数
},
// 点击选中的bpa或swi数据的id
idArr: [],
// 判断手动点击勾选框还是循环后自动选中
check: 0,
props: {
label: 'name', // 需要指定的节点渲染对象属性
children: 'children', // 指定的子级
},
treeTableData: [],
treeTableData1: [
{
id: '001',
name: '伍次元界',
type: '异性',
voltage: 220,
span1: false,
description: '南天机器最强界',
children: [
{
id: '002',
name: '11',
type: 'qq',
voltage: 'ss',
span1: true,
description: '天空第一',
children: [
{
id: '003',
name: '流星界',
type: '烟花',
voltage: 110,
span1: false,
description: '南天机器最强界',
children: [
{
id: '004',
name: '琉璃界',
type: '烟花',
voltage: 110,
span1: false,
description: '南天机器最强界',
},
{
id: '005',
name: '古荥界',
type: '烟花',
voltage: 110,
span1: false,
description: '南天机器最强界',
},
],
},
],
},
],
},
{
id: '0001',
name: '沧浪界',
type: '仙人',
voltage: 220,
span1: false,
description: '北部第一界',
},
],
}
},
async mounted() {},
watch: {},
methods: {
bpaConfirm() {},
// tree组件选择改变事件
handleCheckChange(value, check, value1) {
// 使用getCheckedNodes可以获取当前被选中的节点数据
// let selected = this.$refs.treeData.getCheckedNodes()
},
handleCheck(value, value1) {
this.idArr = value1.checkedKeys.filter((item) => {
if (item != undefined) {
return item
}
})
},
// 监听pagesize
handleSizeChange(newSize) {
this.queryInfo.num = 1
this.queryInfo.pagesize = newSize
this.queryPlantTree()
},
// 监听num
handleCurrentChange(newnum) {
this.queryInfo.num = newnum
this.queryPlantTree()
},
// 查询厂站的数据树
async queryPlantTree() {
this.treeTableData = []
const res = await this.$http.get('/plantstation/bpainsertquery', {
params: {
plantkey: this.SelectType,
name: this.czName,
num: this.queryInfo.num - 1,
pagesize: this.queryInfo.pagesize,
voltage: this.dyGrade,
belongarea: this.belongarea,
blaerea: this.belongPartition,
starttime: this.starttime,
endtime: this.endtime,
plantvalue: this.czType,
bpatype: this.datOrSwi,
},
})
this.total = res.data.totalElements
if (res.status == 200) {
res.data.content.forEach((item, index) => {
// 一级循环
this.treeTableData.push({
id: item._id,
name: item.plantStationName,
type: item.plantStationType,
voltage: item.plantStationVoltage,
children: [],
})
// 二级循环发电机
if (item.plantStationAlternatorlist.length !== 0) {
this.treeTableData[index].children.push({
id: 1,
span1: true,
description: '发电机',
children: [],
})
item.plantStationAlternatorlist.forEach((value, ind) => {
this.treeTableData[index].children[0].children.push({
id: value._id,
name: value.alternatorName,
type: value.busLineWiringMode,
voltage: value.alternatorRatedVoltage,
children: [],
})
// 三级循环
if (value.alternatorDatdataList.length !== 0) {
value.alternatorDatdataList.forEach((valueDat, i) => {
this.treeTableData[index].children[0].children[
ind
].children.push({
sid: valueDat._id,
name: valueDat.model_name_cn,
type: valueDat.modeldata,
voltage: valueDat._id,
})
})
}
})
}
// 二级循环变压器
if (item.plantStationTransformerlist.length !== 0) {
let len = this.treeTableData[index].children.length
this.treeTableData[index].children.push({
id: 2,
span1: true,
description: '变压器',
children: [],
})
item.plantStationTransformerlist.forEach((value, ind) => {
//获取前一次push后当前treeTableData的长度,再次进行第三次循环时从(i+ind)开始push
let len1 = this.treeTableData[index].children[len].children.length
this.treeTableData[index].children[len].children.push({
id: value._id,
name: value.transformerName,
type: value.transformerWindingNum,
voltage: value.transformerHVSRateVoltage,
children: [],
})
// 三级循环
if (value.transformerDatdataList.length !== 0) {
value.transformerDatdataList.forEach((valueDat, i) => {
this.treeTableData[index].children[len].children[
len1
].children.push({
sid: valueDat._id,
name: valueDat.model_name_cn,
type: valueDat.modeldata,
voltage: valueDat._id,
})
})
}
})
}
// 二级循环线路
if (item.plantStationOutLinelist.length !== 0) {
let len = this.treeTableData[index].children.length
this.treeTableData[index].children.push({
id: 3,
span1: true,
description: '线路',
children: [],
})
item.plantStationOutLinelist.forEach((value, ind) => {
let len1 = this.treeTableData[index].children[len].children.length
//获取前一次push后当前treeTableData的长度,再次进行第三次循环时cong(i+ind)开始push
this.treeTableData[index].children[len].children.push({
id: value._id,
name: value.aclineName,
type: value.aclineLength,
voltage: value.aclineVoltage,
children: [],
})
// 三级循环
if (value.aclineDatdataList.length !== 0) {
value.aclineDatdataList.forEach((valueDat, i) => {
this.treeTableData[index].children[len].children[
len1
].children.push({
sid: valueDat._id,
name: valueDat.model_name_cn,
type: valueDat.modeldata,
voltage: valueDat._id,
})
})
}
})
}
// 二级循环负荷
if (item.plantStationWeightlist.length !== 0) {
let len = this.treeTableData[index].children.length
this.treeTableData[index].children.push({
id: 4,
span1: true,
description: '负荷',
children: [],
})
item.plantStationWeightlist.forEach((value, ind) => {
//获取前一次push后当前treeTableData的长度,再次进行第三次循环时cong(i+ind)开始push
let len1 = this.treeTableData[index].children[len].children.length
this.treeTableData[index].children[len].children.push({
id: value._id,
name: value.weightName,
type: value.weightProTime,
voltage: value.weightRateVoltage,
children: [],
})
// 三级循环
if (value.weightDatdataList.length !== 0) {
value.weightDatdataList.forEach((valueDat, i) => {
this.treeTableData[index].children[len].children[
len1
].children.push({
sid: valueDat._id,
name: valueDat.model_name_cn,
type: valueDat.modeldata,
voltage: valueDat._id,
})
})
}
})
}
// 二级循环母线
if (item.plantStationBusLinelist.length !== 0) {
let len = this.treeTableData[index].children.length
this.treeTableData[index].children.push({
id: 5,
span1: true,
description: '母线',
children: [],
})
//获取前一次push后当前treeTableData的长度,再次进行第三次循环时cong(i+ind)开始push
item.plantStationBusLinelist.forEach((value, ind) => {
let len1 = this.treeTableData[index].children[len].children.length
this.treeTableData[index].children[len].children.push({
id: value._id,
name: value.busLineName,
type: value.busLineWiringMode,
voltage: value.busLineRateVoltage,
children: [],
})
// 三级循环
if (value.datdataList.length !== 0) {
value.datdataList.forEach((valueDat, i) => {
this.treeTableData[index].children[len].children[
len1
].children.push({
sid: valueDat._id,
name: valueDat.model_name_cn,
type: valueDat.modeldata,
voltage: valueDat._id,
})
})
}
})
}
// 二级循环新能源
if (item.plantStationEnergyunitlist.length !== 0) {
let len = this.treeTableData[index].children.length
this.treeTableData[index].children.push({
id: 5,
span1: true,
description: '新能源',
children: [],
})
//获取前一次push后当前treeTableData的长度,再次进行第三次循环时cong(i+ind)开始push
item.plantStationEnergyunitlist.forEach((value, ind) => {
let len1 = this.treeTableData[index].children[len].children.length
this.treeTableData[index].children[len].children.push({
id: value._id,
name: value.energyunitName,
type: value.energyunitType,
voltage: value.energyunitVoltage,
children: [],
})
// 三级循环
if (value.energyunitDatdataList.length !== 0) {
value.energyunitDatdataList.forEach((valueDat, i) => {
this.treeTableData[index].children[len].children[
len1
].children.push({
sid: valueDat._id,
name: valueDat.model_name_cn,
type: valueDat.modeldata,
voltage: valueDat._id,
})
})
}
})
}
})
}
},
async dialogClose() {
this.dialogVisible = false
// 关闭前将表格数的data置为空
this.treeTableData = []
this.idArr = []
},
},
}
</script>
<style lang="less" >
.el-tree {
overflow-y: auto;
height: 183px !important;
border-left: 1px solid rgb(202, 201, 201);
border-right: 1px solid rgb(202, 201, 201);
border-bottom: 1px solid rgb(202, 201, 201);
}
.invoice-list {
border: 1px solid rgb(202, 201, 201);
margin-top: 10px;
height: 100%;
.invoice-header {
border: 1px solid rgb(202, 201, 201);
background-color: transparent;
display: flex;
list-style: none;
padding-left: 61px;
margin: 0;
border-bottom: 1px solid rgb(202, 201, 201);
.invoice-item {
padding: 10px;
padding-right: 0;
flex: 1;
border-left: 1px solid rgb(202, 201, 201);
padding-left: 10px;
}
}
.el-tree-node__content {
background: transparent;
border-bottom: 1px solid rgb(202, 201, 201);
padding-left: 15px !important;
height: 40px;
}
.el-tree-node__children {
.el-tree-node__content {
background: transparent;
border-bottom: 1px solid rgb(202, 201, 201);
}
}
.custom-tree-node {
width: 100%;
height: 100%;
.total_info_box {
background: #f2f2f2;
line-height: 40px;
span {
float: left;
font-size: 12px;
margin: 0 15px;
i {
display: inline-block;
margin-right: 3px;
}
}
}
.table_info_node {
display: flex;
height: 100%;
.table_info_item {
flex: 1;
height: 100%;
border-left: 1px solid rgb(202, 201, 201);
padding-left: 10px;
line-height: 40px;
}
}
}
}
</style>