master
zhaoqiang 2024-07-14 15:49:24 +08:00
parent 5c7c8268a3
commit 3c929093f5
1 changed files with 99 additions and 95 deletions

View File

@ -8,25 +8,16 @@
</div> --> </div> -->
<div class="source_tree"> <div class="source_tree">
<div class="tree"> <div class="tree">
<el-tree <el-tree ref="targetTreeRef" :data="treeData" node-key="id" :props="targetProps" :default-expanded-keys="['tongxiang']" lazy :load="loadNode" @node-click="handleTargetInfo"></el-tree>
ref="targetTreeRef"
:data="treeData"
node-key="id"
:props="targetProps"
:default-expanded-keys="['tongxiang']"
lazy
:load="loadNode"
@node-click="handleTargetInfo"
></el-tree>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, watch } from "vue"; import { onMounted, ref, watch } from 'vue'
import { ElTree } from "element-plus"; import { ElTree } from 'element-plus'
import treeDatas from "@/assets/json/tree-right2.json"; import treeDatas from '@/assets/json/tree-right2.json'
import { treeT, treeSecond } from "@/api/ajust/tree"; import { treeT, treeSecond } from '@/api/ajust/tree'
// defineProps<{ // defineProps<{
// elec_list: EList[] // elec_list: EList[]
@ -38,55 +29,55 @@ import { treeT, treeSecond } from "@/api/ajust/tree";
// idflag // idflag
// let idFlag = ref<number>(1) // let idFlag = ref<number>(1)
const label_falg = ref<number>(1); const label_falg = ref<number>(1)
//()labelFlag //()labelFlag
const labelFlag = (id: number) => { const labelFlag = (id: number) => {
label_falg.value = id; label_falg.value = id
if (id == 1) { if (id == 1) {
} else if (id == 2) { } else if (id == 2) {
} else if (id == 3) { } else if (id == 3) {
} else { } else {
} }
}; }
// el-tree // el-tree
// id // id
// let defaultExpanded = ref<string[]>(['tongxiang']) // let defaultExpanded = ref<string[]>(['tongxiang'])
// //
// label childern // label childern
const targetProps = { const targetProps = {
children: "children", children: 'children',
label: "name", label: 'name',
isLeaf: "leaf", isLeaf: 'leaf'
}; }
// tree // tree
interface Tree { interface Tree {
baseVoltageMrid?: string; baseVoltageMrid?: string
name?: string; name?: string
leaf?: boolean; leaf?: boolean
children?: Tree[]; children?: Tree[]
} }
// json // json
interface TreeData { interface TreeData {
name: string; name: string
key?: string; key?: string
leaf?: boolean; leaf?: boolean
children?: TreeData[]; children?: TreeData[]
[otherProps: string]: any; [otherProps: string]: any
} }
let treeDate = ref<Tree[]>([ let treeDate = ref<Tree[]>([
{ {
baseVoltageMrid: "", baseVoltageMrid: '',
name: "", name: '',
children: [], children: []
}, }
]); ])
// //
onMounted(() => { onMounted(() => {
// initTreeAPI(); // initTreeAPI();
}); })
let treeData = ref<any>([]); let treeData = ref<any>([])
// let initTreeDate: any = []; // let initTreeDate: any = [];
// // // //
// const initTreeAPI = async () => { // const initTreeAPI = async () => {
@ -104,57 +95,74 @@ const loadNode = async (node: any, resolve: any) => {
// orgID: "8af8470a47aad8e20147aad92e400335", // orgID: "8af8470a47aad8e20147aad92e400335",
// }); // });
treeT({ treeT({
orgID: "8af8470a47aad8e20147aad92e400335", orgID: '8af8470a47aad8e20147aad92e400335'
}).then((res) => { }).then(res => {
resolve(res.data); //1 resolve(res.data) //1
}); })
} else if (node.level > 0 && node.level < 4) { } else if (node.level > 0 && node.level < 4) {
//,. //,.
resolve(node.data.children); resolve(node.data.children)
} else if (node.level === 4) { } else if (node.level === 4) {
console.log(node, node.level, "4------"); console.log(node, node.level, '4------')
//
// ---------
// ---------
// //
let res = await treeSecond({ let res = await treeSecond({
orgID: "8af8470a47aad8e20147aad92e400335", orgID: '8af8470a47aad8e20147aad92e400335',
transformId: node.key, transformId: node.key
}); })
if ( if (res.data.energySupplyStation.length || res.data.dwellerPile.length) {
res.data.photoVoltaicUnit.length || let datanames = []
res.data.energySupplyStation.length ||
res.data.batteryUnit.length
) {
let datanames = [];
if (res.data.energySupplyStation.length) { if (res.data.energySupplyStation.length) {
datanames.push({ datanames.push({
name: `充电站(${res.data.energySupplyStation.length})`, name: `充电站(${res.data.energySupplyStation.length})`,
id: "chongdianzhan", id: 'chongdianzhan'
}); })
} }
resolve(datanames); if (res.data.dwellerPile.length) {
datanames.push({
name: `居民充电桩(${res.data.dwellerPile.length})`,
id: 'chongdianzhuang'
})
}
resolve(datanames)
} else { } else {
resolve([{ name: "暂无数据", leaf: true }]); resolve([{ name: '暂无数据', leaf: true }])
console.log(res); // console.log(res) //
} }
} else if (node.level === 5) { } else if (node.level === 5) {
console.log(node.parent, node.level); console.log(node.parent, node.level)
// //
let res = await treeSecond({ let res = await treeSecond({
orgID: "8af8470a47aad8e20147aad92e400335", orgID: '8af8470a47aad8e20147aad92e400335',
transformId: node.parent.key, transformId: node.parent.key
// transformId: "ed7d892d4f8af8514b6dc01fde016ded55e58", // transformId: "ed7d892d4f8af8514b6dc01fde016ded55e58",
}); })
// console.log(node, node.parent, '父节点')
if (res.data.energySupplyStation.length) { if (node.key === 'chongdianzhan') {
resolve( if (res.data.energySupplyStation.length) {
res.data.energySupplyStation.map((item) => ({ resolve(
id: item.mrid, res.data.energySupplyStation.map(item => ({
name: item.name, id: item.mrid,
})) name: item.name
); }))
)
}
}
if (node.key === 'chongdianzhuang') {
if (res.data.dwellerPile.length) {
resolve(
res.data.dwellerPile.map(item => ({
id: item.mrid,
name: item.name
}))
)
}
} }
// resolve(); // resolve();
@ -165,30 +173,34 @@ const loadNode = async (node: any, resolve: any) => {
// }, // },
// ]); // ]);
} else { } else {
resolve([{ name: "暂无数据", leaf: true }]); resolve([{ name: '暂无数据', leaf: true }])
} }
}; }
const emits = defineEmits(["update-node-key"]); ////使 const emits = defineEmits(['update-node-key']) ////使
// //
// target // target
const handleTargetInfo = (data: TreeData, e: any) => { const handleTargetInfo = (data: TreeData, node: any) => {
// targetInfo.resultArr = []; // targetInfo.resultArr = [];
// handleTarget(e);
// console.log("zheshishaya111",node.level,data);
// ---------
//4 id if (node.level === 4) {
// emits("update-node-key", node.key); //id, console.log(node.level,'0000',node.key);
// ---------
console.log("zheshishaya");
//4 id
emits("update-node-key", node.key); //id,
}
}; };
const handleTarget = (node: any) => { const handleTarget = (node: any) => {
// target // target
if (!node.parent) return; if (!node.parent) return
// targetInfo.resultArr.unshift(node.data); // targetInfo.resultArr.unshift(node.data);
// handleTarget(node.parent); // handleTarget(node.parent);
}; }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@function changeWidth($width) { @function changeWidth($width) {
@ -312,9 +324,9 @@ const handleTarget = (node: any) => {
// el-input // el-input
/* //有子节点 且未展开 */ /* //有子节点 且未展开 */
:deep(.el-tree .el-tree-node.is-focusable .el-tree-node__expand-icon:before) { :deep(.el-tree .el-tree-node.is-focusable .el-tree-node__expand-icon:before) {
background: url("@/assets/images/tree/icon_off.png") no-repeat 0 3px; background: url('@/assets/images/tree/icon_off.png') no-repeat 0 3px;
// background: url("@/assets/images/tree/icon_off.png") no-repeat 0 changeHeight(15); // background: url("@/assets/images/tree/icon_off.png") no-repeat 0 changeHeight(15);
content: ""; content: '';
display: block; display: block;
// width: 80px; // width: 80px;
// height: 80px; // height: 80px;
@ -336,8 +348,8 @@ const handleTarget = (node: any) => {
/* //有子节点 且已展开 */ /* //有子节点 且已展开 */
:deep(.el-tree .is-expanded .el-tree-node__expand-icon.expanded:before) { :deep(.el-tree .is-expanded .el-tree-node__expand-icon.expanded:before) {
background: url("@/assets/images/tree/icon_on.png") no-repeat 0 3px; background: url('@/assets/images/tree/icon_on.png') no-repeat 0 3px;
content: ""; content: '';
display: block; display: block;
// padding-right: 18px; // padding-right: 18px;
@ -386,18 +398,10 @@ const handleTarget = (node: any) => {
:deep(.el-tree-node__content:hover) { :deep(.el-tree-node__content:hover) {
// background-color: transparent; // background-color: transparent;
background: linear-gradient( background: linear-gradient(90deg, rgba(82, 127, 243, 0.2) 0%, rgba(48, 74, 141, 0) 100%);
90deg,
rgba(82, 127, 243, 0.2) 0%,
rgba(48, 74, 141, 0) 100%
);
} }
:deep( :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content
) {
background-color: transparent; background-color: transparent;
} }