首页树，菜单 点击节点状态存储

public/test/customWells.json

@@ -0,0 +1,28 @@
+[
+	{
+			"label": "关注井",
+			"children": [{
+				"label": "采油1厂",
+				"children": [{
+					"label": "杜1井"
+				}]
+			}]
+		},
+		{
+			"label": "重点井",
+			"children": [{
+					"label": "采油2厂",
+					"children": [{
+						"label": "杜2井"
+					}]
+				},
+				{
+					"label": "采油3厂",
+					"children": [{
+						"label": "杜3井"
+					}]
+				}
+			]
+		}
+	
+]

public/test/wells.json

@@ -4,7 +4,8 @@
 			"children": [{
 				"label": "采油1厂",
 				"children": [{
-					"label": "杜1井"
+					"label": "杜1井",
+					"nodeType":"well"
 				}]
 			}]
 		},
@@ -13,13 +14,15 @@
 			"children": [{
 					"label": "采油2厂",
 					"children": [{
-						"label": "杜2井"
+						"label": "杜2井",
+						"nodeType":"well"
 					}]
 				},
 				{
 					"label": "采油3厂",
 					"children": [{
-						"label": "杜3井"
+						"label": "杜3井",
+						"nodeType":"well"
 					}]
 				}
 			]
@@ -30,14 +33,16 @@
 					"label": "采油4厂",
 					"children": [{
 						"label": "杜4井",
-						"leaf":true
+						"leaf":true,
+						"nodeType":"well"
 					}]
 				},
 				{
 					"label": "采油5厂",
 					"children": [{
 						"label": "杜5井",
-						"leaf":true
+						"leaf":true,
+						"nodeType":"well"
 					}]
 				}
 			]

src/api/sidetree.js

@@ -6,4 +6,12 @@ export const fetchData = query => {
         method: 'get',
         params: query
     });
+};
+
+export const fetchCustomData = query => {
+    return request({
+        url: './test/customWells.json',
+        method: 'get',
+        params: query
+    });
 };

src/components/Header.vue

@@ -13,9 +13,10 @@
 				background-color="#242f42"
 			    text-color="#bfcbd9"
 			    active-text-color="#20a0ff"
+				
 			  >
 			   
-				<navmenu-item v-for="menu in menus" :key="menu.menuId" :item="menu"></navmenu-item>
+				<navmenu-item v-for="menu in menus" :key="menu.menuId" :item="menu" @clickMenuItem="menuClickHandle"></navmenu-item>
 			</el-menu>
 			
 		</div>
@@ -96,6 +97,11 @@
 	    }
 	};
 	
+	const menuClickHandle = (item) =>{
+		console.log(item)
+		store.currentMenu=item
+	}
+	
 </script>
 <style scoped>
 .header {

src/components/NavmenuItem.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-menu-item :index="item?item.menuId:''" v-if="!item || !item.subMenus || item.subMenus.length ===0">
+	<el-menu-item :index="item?item.menuId:''" v-if="!item || !item.subMenus || item.subMenus.length ===0" @click="(menucomp)=>{clickHandle(item)}">
 		<el-icon v-if="item.icon">
 			<component :is="item.icon"></component>
 		</el-icon>
@@ -25,8 +25,9 @@
 </template>
 
 <script setup>
-	import {toRefs} from 'vue';
+	import {toRefs,defineEmits} from 'vue';
 	
+	const emit = defineEmits(['clickMenuItem'])
 	
 	const props=defineProps({
 		item:{
@@ -37,6 +38,11 @@
 	})
 	
 	const { item } = toRefs(props);
+	
+	const clickHandle = (menuItem) =>{
+		//console.log(menuItem)
+		emit("clickMenuItem",menuItem)
+	}
 </script>
 
 <style scoped>

src/components/Sidetree.vue

@@ -4,19 +4,32 @@
 			<el-icon color="#f2f2f2" size="25" style="width:50px">
 				<Histogram />
 			</el-icon>
-			<div style="flex:1;">系统井</div>
+			<div style="flex:1;">{{systreeShow?'系统井':'关注井'}}</div>
 			<el-icon color="#f2f2f2" size="25" style="width:50px;cursor:pointer;" @click="changeTree">
 				<DCaret />
 			</el-icon>
 		</div>
 		<div class="side-body">
 			<el-scrollbar style="height:100%;padding:5px;box-sizing: border-box;">
-				<el-tree :data="treedatas" :props="defaultProps" :highlight-current="true" class="tree">
+				<el-tree :data="sysWells" :props="defaultProps" :highlight-current="true" class="tree" v-show="systreeShow" @node-click="selWellHandle">
 					    <template #default="{ node, data }">
 					        <span class="custom-tree-node">
-							  <block v-if="node.isLeaf">
+							  <template v-if="node.isLeaf">
 								 <el-icon><help-filled/></el-icon><span style="margin-left:2px;">{{ node.label }}</span> 
-							  </block>
+							  </template>
+					          
+							  <span v-else>{{ node.label }}</span>
+					          
+					        </span>
+					    </template>
+				</el-tree>
+				
+				<el-tree :data="customWells" :props="defaultProps" :highlight-current="true" class="tree" v-show="!systreeShow">
+					    <template #default="{ node, data }">
+					        <span class="custom-tree-node">
+							  <template v-if="node.isLeaf">
+								 <el-icon><help-filled/></el-icon><span style="margin-left:2px;">{{ node.label }}</span> 
+							  </template>
 					          
 							  <span v-else>{{ node.label }}</span>
 					          
@@ -34,14 +47,14 @@
 	import {ref} from 'vue'
 	import {storeToRefs} from 'pinia'
 	import {useHomeStore} from "../store/home.js"
-	import { fetchData } from "../api/sidetree.js"
+	import { fetchData,fetchCustomData } from "../api/sidetree.js"
 
 
 	const store = useHomeStore()
-	const {collapse} = storeToRefs(store)
+	const {collapse,systreeShow} = storeToRefs(store)
 
 	const changeTree = () => {
-		alert();
+		store.systreeShow=!store.systreeShow;
 	}
 	
 	
@@ -52,14 +65,28 @@
 		isLeaf:'leaf'
 	}
 	
-	const treedatas = ref([])
+	const sysWells = ref([])
+	
+	const customWells = ref([])
 	
 	const getData = () => {
 	    fetchData({}).then((res) => {
-	        treedatas.value=res
+	        sysWells.value=res
 	    });
 	};
 	getData();
+	
+	const getCustomData = () => {
+	    fetchCustomData({}).then((res) => {
+	        customWells.value=res
+	    });
+	};
+	getCustomData();
+	
+	const selWellHandle = (nodeData, node, nodeComp,evn) =>{
+		console.log(nodeData)
+		store.currentTreeNode=nodeData
+	}
 </script>
 
 <style scoped>

src/store/home.js

@@ -4,6 +4,9 @@ export const useHomeStore = defineStore('home', {
   state: () => {
     return {
       collapse: false,
+	  systreeShow:true,
+	  currentTreeNode:null,
+	  currentMenu:null
     }
   },
   getters:{},