首页构建

public/test/wells.json

@@ -0,0 +1,46 @@
+[
+	{
+			"label": "第一油田",
+			"children": [{
+				"label": "采油1厂",
+				"children": [{
+					"label": "杜1井"
+				}]
+			}]
+		},
+		{
+			"label": "第二油田",
+			"children": [{
+					"label": "采油2厂",
+					"children": [{
+						"label": "杜2井"
+					}]
+				},
+				{
+					"label": "采油3厂",
+					"children": [{
+						"label": "杜3井"
+					}]
+				}
+			]
+		},
+		{
+			"label": "第三油田",
+			"children": [{
+					"label": "采油4厂",
+					"children": [{
+						"label": "杜4井",
+						"leaf":true
+					}]
+				},
+				{
+					"label": "采油5厂",
+					"children": [{
+						"label": "杜5井",
+						"leaf":true
+					}]
+				}
+			]
+		}
+	
+]

src/api/sidetree.js

@@ -0,0 +1,9 @@
+import request from '../utils/request';
+
+export const fetchData = query => {
+    return request({
+        url: './test/wells.json',
+        method: 'get',
+        params: query
+    });
+};

src/assets/css/main.css

@@ -23,11 +23,11 @@ a {
 
 .content-box {
     position: absolute;
-    left: 250px;
+    left: 222px;
     right: 0;
-    top: 70px;
+    top: 60px;
     bottom: 0;
-    padding-bottom: 30px;
+    padding-bottom: 2px;
     -webkit-transition: left .3s ease-in-out;
     transition: left .3s ease-in-out;
     background: #f0f0f0;
@@ -42,7 +42,7 @@ a {
 }
 
 .content-collapse {
-    left: 65px;
+    left: 2px;
 }
 
 .container {

src/components/Header.vue

@@ -14,31 +14,7 @@
 			    text-color="#bfcbd9"
 			    active-text-color="#20a0ff"
 			  >
-			    <!-- <el-menu-item index="1">Processing Center</el-menu-item>
-			    <el-sub-menu index="2">
-			        <template #title>Workspace</template>
-			        <el-menu-item index="2-1">item one</el-menu-item>
-			        <el-menu-item index="2-2">item two</el-menu-item>
-			        <el-menu-item index="2-3">item three</el-menu-item>
-			        <el-sub-menu index="2-4">
-			          <template #title>item four</template>
-			          <el-menu-item index="2-4-1">item one</el-menu-item>
-			          <el-menu-item index="2-4-2">item two</el-menu-item>
-			          <el-menu-item index="2-4-3">item three</el-menu-item>
-			        </el-sub-menu>
-			    </el-sub-menu>
-			    <el-menu-item index="3" disabled>Info</el-menu-item>
-			    <el-menu-item index="4">OrdersOrders</el-menu-item>
-				<el-menu-item index="5">OrdersOrders</el-menu-item>
-				<el-menu-item index="6">OrdersOrders</el-menu-item>
-				<el-menu-item index="7">OrdersOrders</el-menu-item>
-				<el-menu-item index="8">OrdersOrders2</el-menu-item>
-				<el-menu-item index="9">OrdersOrders3</el-menu-item>
-				<el-menu-item index="9">OrdersOrders4</el-menu-item>
-				<el-sub-menu index="10">
-					<template #title>Workspace10</template>
-					<el-menu-item index="10-1">item one00</el-menu-item>
-				</el-sub-menu> -->
+			   
 				<navmenu-item v-for="menu in menus" :key="menu.menuId" :item="menu"></navmenu-item>
 			</el-menu>
 			

src/components/Sidetree.vue

@@ -0,0 +1,144 @@
+<template>
+	<div class="sideTree" :class="{'sideTree-collapse':collapse}">
+		<div class="side-header">
+			<el-icon color="#f2f2f2" size="25" style="width:50px">
+				<Histogram />
+			</el-icon>
+			<div style="flex:1;">系统井</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">
+					    <template #default="{ node, data }">
+					        <span class="custom-tree-node">
+							  <block v-if="node.isLeaf">
+								 <el-icon><help-filled/></el-icon><span style="margin-left:2px;">{{ node.label }}</span> 
+							  </block>
+					          
+							  <span v-else>{{ node.label }}</span>
+					          
+					        </span>
+					    </template>
+				</el-tree>
+			</el-scrollbar>
+		</div>
+
+	</div>
+
+</template>
+
+<script setup>
+	import {ref} from 'vue'
+	import {storeToRefs} from 'pinia'
+	import {useHomeStore} from "../store/home.js"
+	import { fetchData } from "../api/sidetree.js"
+
+
+	const store = useHomeStore()
+	const {collapse} = storeToRefs(store)
+
+	const changeTree = () => {
+		alert();
+	}
+	
+	
+	
+	const defaultProps = {
+		children: 'children',
+		label: 'label',
+		isLeaf:'leaf'
+	}
+	
+	const treedatas = ref([])
+	
+	const getData = () => {
+	    fetchData({}).then((res) => {
+	        treedatas.value=res
+	    });
+	};
+	getData();
+</script>
+
+<style scoped>
+	
+	:root{
+		--el-color-primary-light-9:#598fbe;
+	}
+	
+	.sideTree {
+		display: block;
+		position: absolute;
+		left: 0;
+		top: 60px;
+		bottom: 0;
+		width: 220px;
+		-webkit-transition: left .3s ease-in-out;
+		transition: left .3s ease-in-out;
+
+		background-color: #324157;
+
+
+	}
+
+	.sideTree-collapse {
+		left: -220px;
+
+	}
+
+
+	.sideTree::-webkit-scrollbar {
+		width: 0;
+	}
+
+	.sideTree:deep(.el-scrollbar__thumb) {
+		background-color: #7294c5;
+	}
+
+	.side-header {
+		height: 45px;
+		box-sizing: border-box;
+		background-color: #3c4c68;
+		line-height: 45px;
+		color: #f2f2f2;
+		text-align: center;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+	}
+
+	.side-body {
+		position: absolute;
+		top: 45px;
+		bottom: 0;
+		width: 100%;
+
+		box-sizing: border-box;
+	}
+
+	.tree {
+		background-color: #324157;
+		color: #c2c2d2;
+	}
+
+
+	.side-body:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
+
+		background-color: #659ed6 !important;
+		color: #e2e2e2;
+
+	}
+
+   
+	.side-body:deep(.el-tree-node__content:hover) {
+		background-color: #4b7ba2 !important;
+		color: #e2e2e2;
+	}
+	.side-body:deep(.el-tree-node:focus>.el-tree-node__content){
+		background-color: #598fbe !important;
+		color: #e2e2e2;
+	}
+</style>

src/pages/Home.vue

@@ -1,16 +1,20 @@
 <template>
 	<div class="about">
 		<v-header />
-		<v-sidebar />
+		<v-sidetree />
+		<div class="content-box" :class="{ 'content-collapse': collapse }">
+		</div>
 	</div>
 </template>
 
 <script setup>
-	import { computed } from "vue";
+	import { computed } from "vue"
 	
 	import vHeader from "../components/Header.vue"
-	import vSidebar from "../components/Sidebar.vue"
+	import vSidetree from "../components/Sidetree.vue"
 	//import vTags from "../components/Tags.vue";
+	import { storeToRefs } from 'pinia'
+	import { useHomeStore } from "../store/home.js"
 	
 	/*
 	const store = useStore();
@@ -19,6 +23,9 @@
 	);
 	const collapse = computed(() => store.state.collapse);
 	*/
+   
+   const store=useHomeStore()
+   const  { collapse } = storeToRefs(store)
 </script>
 
 <style scoped>