From 3c929093f58775989e4d81b2fa04faf5a2c56992 Mon Sep 17 00:00:00 2001
From: zhaoqiang <2117596534@qq.com>
Date: Sun, 14 Jul 2024 15:49:24 +0800
Subject: [PATCH] update

---
 src/views/commonPage/carTree.vue | 194 ++++++++++++++++---------------
 1 file changed, 99 insertions(+), 95 deletions(-)

diff --git a/src/views/commonPage/carTree.vue b/src/views/commonPage/carTree.vue
index 928c98a..f65486b 100644
--- a/src/views/commonPage/carTree.vue
+++ b/src/views/commonPage/carTree.vue
@@ -8,25 +8,16 @@
       </div> -->
     <div class="source_tree">
       <div class="tree">
-        <el-tree
-          ref="targetTreeRef"
-          :data="treeData"
-          node-key="id"
-          :props="targetProps"
-          :default-expanded-keys="['tongxiang']"
-          lazy
-          :load="loadNode"
-          @node-click="handleTargetInfo"
-        ></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>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
-import { ElTree } from "element-plus";
-import treeDatas from "@/assets/json/tree-right2.json";
-import { treeT, treeSecond } from "@/api/ajust/tree";
+import { onMounted, ref, watch } from 'vue'
+import { ElTree } from 'element-plus'
+import treeDatas from '@/assets/json/tree-right2.json'
+import { treeT, treeSecond } from '@/api/ajust/tree'
 
 // defineProps<{
 //   elec_list: EList[]
@@ -38,55 +29,55 @@ import { treeT, treeSecond } from "@/api/ajust/tree";
 
 // idflag样式
 // let idFlag = ref<number>(1)
-const label_falg = ref<number>(1);
+const label_falg = ref<number>(1)
 //通过判断(源网荷储的小标题)的labelFlag值调不同的树数据
 const labelFlag = (id: number) => {
-  label_falg.value = id;
+  label_falg.value = id
   if (id == 1) {
   } else if (id == 2) {
   } else if (id == 3) {
   } else {
   }
-};
+}
 // el-tree相关配置
 // 默认展开节点id
 // let defaultExpanded = ref<string[]>(['tongxiang'])
 // 默认展开指定数据
 // label childern等数据的配置
 const targetProps = {
-  children: "children",
-  label: "name",
-  isLeaf: "leaf",
-};
+  children: 'children',
+  label: 'name',
+  isLeaf: 'leaf'
+}
 // tree数据处理
 interface Tree {
-  baseVoltageMrid?: string;
-  name?: string;
-  leaf?: boolean;
-  children?: Tree[];
+  baseVoltageMrid?: string
+  name?: string
+  leaf?: boolean
+  children?: Tree[]
 }
 
 // json数据
 interface TreeData {
-  name: string;
-  key?: string;
-  leaf?: boolean;
-  children?: TreeData[];
-  [otherProps: string]: any;
+  name: string
+  key?: string
+  leaf?: boolean
+  children?: TreeData[]
+  [otherProps: string]: any
 }
 let treeDate = ref<Tree[]>([
   {
-    baseVoltageMrid: "",
-    name: "",
-    children: [],
-  },
-]);
+    baseVoltageMrid: '',
+    name: '',
+    children: []
+  }
+])
 
 // 判断是否有该节点
 onMounted(() => {
   // initTreeAPI();
-});
-let treeData = ref<any>([]);
+})
+let treeData = ref<any>([])
 // let initTreeDate: any = [];
 // // 初始化设备树的层级
 // const initTreeAPI = async () => {
@@ -104,57 +95,74 @@ const loadNode = async (node: any, resolve: any) => {
     //   orgID: "8af8470a47aad8e20147aad92e400335",
     // });
     treeT({
-      orgID: "8af8470a47aad8e20147aad92e400335",
-    }).then((res) => {
-      resolve(res.data); //默认加载第1层
-    });
+      orgID: '8af8470a47aad8e20147aad92e400335'
+    }).then(res => {
+      resolve(res.data) //默认加载第1层
+    })
   } else if (node.level > 0 && node.level < 4) {
     //默认展开的层级,需要默认几层就判断一下.
-    resolve(node.data.children);
+    resolve(node.data.children)
   } else if (node.level === 4) {
-    console.log(node, node.level, "4------");
+    console.log(node, node.level, '4------')
+    // 利用设备中的信息调用接口
+    // ---------
 
+    // ---------
     //懒加载
     let res = await treeSecond({
-      orgID: "8af8470a47aad8e20147aad92e400335",
-      transformId: node.key,
-    });
-    if (
-      res.data.photoVoltaicUnit.length ||
-      res.data.energySupplyStation.length ||
-      res.data.batteryUnit.length
-    ) {
-      let datanames = [];
+      orgID: '8af8470a47aad8e20147aad92e400335',
+      transformId: node.key
+    })
+    if (res.data.energySupplyStation.length || res.data.dwellerPile.length) {
+      let datanames = []
 
       if (res.data.energySupplyStation.length) {
         datanames.push({
           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 {
-      resolve([{ name: "暂无数据", leaf: true }]);
-      console.log(res); //需要将上一级的加号去掉
+      resolve([{ name: '暂无数据', leaf: true }])
+      console.log(res) //需要将上一级的加号去掉
     }
   } else if (node.level === 5) {
-    console.log(node.parent, node.level);
+    console.log(node.parent, node.level)
     //懒加载
     let res = await treeSecond({
-      orgID: "8af8470a47aad8e20147aad92e400335",
-      transformId: node.parent.key,
+      orgID: '8af8470a47aad8e20147aad92e400335',
+      transformId: node.parent.key
       // transformId: "ed7d892d4f8af8514b6dc01fde016ded55e58",
-    });
-    // 二级服务只挂充电桩
+    })
+    console.log(node, node.parent, '父节点')
 
-    if (res.data.energySupplyStation.length) {
-      resolve(
-        res.data.energySupplyStation.map((item) => ({
-          id: item.mrid,
-          name: item.name,
-        }))
-      );
+    if (node.key === 'chongdianzhan') {
+      if (res.data.energySupplyStation.length) {
+        resolve(
+          res.data.energySupplyStation.map(item => ({
+            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();
@@ -165,30 +173,34 @@ const loadNode = async (node: any, resolve: any) => {
     //   },
     // ]);
   } else {
-    resolve([{ name: "暂无数据", leaf: true }]);
+    resolve([{ name: '暂无数据', leaf: true }])
   }
-};
+}
 
-const emits = defineEmits(["update-node-key"]); ////接收父组件的事件，子组件中触发父组件使用
+const emits = defineEmits(['update-node-key']) ////接收父组件的事件，子组件中触发父组件使用
 
 // 点击树节点
 // 处理选中target数据，最终得到由高层到底层的数组
-const handleTargetInfo = (data: TreeData, e: any) => {
+const handleTargetInfo = (data: TreeData,  node: any) => {
   // targetInfo.resultArr = [];
-  // handleTarget(e);
-  // 利用设备中的信息调用接口
-  // ---------
-  //点中第4层 为台区时 去返回id到父组件 并让父组件获取可调资源的相关信息和表格
-  // emits("update-node-key", node.key); //获取id,用于二级接口服务返回接口给可调资源列表
-  // ---------
+
+  console.log("zheshishaya111",node.level,data);
+
+  if (node.level === 4) {
+    console.log(node.level,'0000',node.key);
+    
+    console.log("zheshishaya");
+    //点中第4层 为台区时 去返回id到父组件 并让父组件获取可调资源的相关信息和表格
+    emits("update-node-key", node.key); //获取id,用于二级接口服务返回接口给可调资源列表
+  }
 };
 const handleTarget = (node: any) => {
   // 递归得到target结果数组
-  if (!node.parent) return;
+  if (!node.parent) return
 
   // targetInfo.resultArr.unshift(node.data);
   // handleTarget(node.parent);
-};
+}
 </script>
 <style scoped lang="scss">
 @function changeWidth($width) {
@@ -312,9 +324,9 @@ const handleTarget = (node: any) => {
 // el-input中图标设置大小
 /* //有子节点 且未展开 */
 :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);
-  content: "";
+  content: '';
   display: block;
   // width: 80px;
   // height: 80px;
@@ -336,8 +348,8 @@ const handleTarget = (node: any) => {
 
 /* //有子节点 且已展开 */
 :deep(.el-tree .is-expanded .el-tree-node__expand-icon.expanded:before) {
-  background: url("@/assets/images/tree/icon_on.png") no-repeat 0 3px;
-  content: "";
+  background: url('@/assets/images/tree/icon_on.png') no-repeat 0 3px;
+  content: '';
   display: block;
 
   // padding-right: 18px;
@@ -386,18 +398,10 @@ const handleTarget = (node: any) => {
 :deep(.el-tree-node__content:hover) {
   // background-color: transparent;
 
-  background: linear-gradient(
-    90deg,
-    rgba(82, 127, 243, 0.2) 0%,
-    rgba(48, 74, 141, 0) 100%
-  );
+  background: linear-gradient(90deg, rgba(82, 127, 243, 0.2) 0%, rgba(48, 74, 141, 0) 100%);
 }
 
-:deep(
-    .el-tree--highlight-current
-      .el-tree-node.is-current
-      > .el-tree-node__content
-  ) {
+:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
   background-color: transparent;
 }