增加自选井管理模块，首页选择树增加自选井树

src/api/customWell.js

@@ -0,0 +1,24 @@
+import request from '../utils/request';
+
+const api={}
+
+
+api.saveCustom = (datas)=>{
+	return request({
+		headers:{
+			'Content-Type':'application/json'
+		},
+	    url: '/base/customwell/saveCustom',
+		method: 'post',
+	    data:  datas
+	});
+}
+
+api.loadCustomTree=()=>{
+	return request({
+	    url: '/base/customwell/loadMyCustomWells',
+		method: 'get'
+	});
+}
+
+export  default api

src/api/station.js

@@ -6,7 +6,14 @@ api.loadSubNodes = (data) => {
     return request({
         url: '/station/loadSideTreeSubNodes',
         method: 'post',
-		params:data
+		data:data
+    });
+};
+
+api.loadCustomTree = () => {
+    return request({
+        url: '/station/loadCustomTree',
+        method: 'get'
     });
 };
 

src/components/Sidetree.vue

@@ -4,7 +4,7 @@
 			<el-icon color="#f2f2f2" size="25" style="width:50px">
 				<Histogram />
 			</el-icon>
-			<div style="flex:1;">{{systreeShow?'系统井':'关注井'}}</div>
+			<div style="flex:1;">{{systreeShow?'系统井':'自选井'}}</div>
 			<el-icon color="#f2f2f2" size="25" style="width:50px;cursor:pointer;" @click="changeTree">
 				<DCaret />
 			</el-icon>
@@ -37,10 +37,10 @@
 					    </template>
 				</el-tree>
 				
-				<!-- <el-tree :data="customWells" :props="defNodeProps" :highlight-current="true" class="tree" v-show="!systreeShow">
+				<el-tree :data="customTreeData" :props="defNodeProps" :highlight-current="true" class="tree" v-show="!systreeShow" @node-click="selWellHandle">
 					    <template #default="{ node, data }">
 					        <span class="custom-tree-node">
-							  <template v-if="node.isLeaf">
+							  <template v-if="data.nodeType=='well'">
 								 <el-icon><help-filled/></el-icon><span style="margin-left:2px;">{{ node.label }}</span> 
 							  </template>
 					          
@@ -48,7 +48,7 @@
 					          
 					        </span>
 					    </template>
-				</el-tree> -->
+				</el-tree>
 			</el-scrollbar>
 		</div>
 
@@ -62,12 +62,18 @@
 	import {useHomeStore} from "../store/home.js"
 	import stationAPI from "../api/station.js"
 	import utils from "../utils/utils.js"
+	
+	const customTreeData=ref([])
 
 	const store = useHomeStore()
 	const {collapse,systreeShow} = storeToRefs(store)
 
 	const changeTree = () => {
-		store.systreeShow=!store.systreeShow;
+		store.systreeShow=!store.systreeShow
+		//console.log(systreeShow.value,customTreeData.value.length)
+		if(!systreeShow.value&&customTreeData.value.length==0){
+			loadCustomTree()
+		}
 	}
 	
 	
@@ -81,22 +87,34 @@
 	let rootNode=null
 	
 	const loadSysTree=(node,resolve)=>{
-		//console.log(resolve)
+		//console.log(node)
 		if(node.level == 0){
 			rootNode=node
 		}
 		let srcNode=toRaw(node.data)
-		//console.log(srcNode)
 		let {id,nodeType,typeEnd}=srcNode
-		//srcNode=srcNode==null||srcNode.length==0?null:srcNode
 		stationAPI.loadSubNodes({id,nodeType,typeEnd}).then((resp) => {
-			//console.log(resp.data)
 			if(resp.code===0&&resp.data){
 				resolve(resp.data)
 			}
 		})
 	}
 	
+	const loadCustomTree=()=>{
+		let converDef={id:'id',name:'name',superId:'superId',superName:'superName',children:'children'}
+		stationAPI.loadCustomTree().then(resp=>{
+			if(resp.code===0){
+				let treeDatas=utils.list2Tree(resp.data||[],converDef)
+				customTreeData.value=treeDatas['topNodes']
+			}
+			else{
+				console.log(resp.msg)
+			}
+		})
+	}
+	
+	
+	
 	const systreeref=ref(null)
 	
 	watch(
@@ -123,7 +141,10 @@
 	
 	const selWellHandle = (nodeData, node, nodeComp,evn) =>{
 		//console.log(nodeData)
-		store.currentTreeNode=nodeData
+		if(nodeData.nodeType){
+			store.currentTreeNode=nodeData
+		}
+		
 	}
 </script>
 

src/pages/base/CustomWell.vue

@@ -0,0 +1,308 @@
+<template>
+	<div class="page-container">
+		<el-card class="box-card">
+		    <template #header>
+		      <div class="card-header">
+		        <span>系统井</span>
+		      </div>
+		    </template>
+			<el-tree
+				:load="loadMyDefTree" 
+				lazy
+				:highlight-current="true"  
+				:props="sysTreeProps"  
+				ref="myDefTreeRef" 
+				class="tree"  
+				node-key="id">
+				<template #default="{ node, data }">
+					<span :id="data.id" :draggable="data.nodeType=='well'" @dragstart="sysDragStartHandle">{{ node.label }}</span>
+					
+				</template>
+			</el-tree>
+		</el-card>
+		<el-card class="box-card">
+		    <template #header>
+		      <div class="card-header">
+				  <span>
+					<span @click="showNodes" style="margin-right: 10px;">自选井</span>
+					<el-button type="primary" icon="plus" size="small"/>  
+				  </span>
+		        
+				<el-button type="primary" plain size="small" :loading="isSaving" @click="saveCustomTree">保存</el-button>
+		      </div>
+		    </template>
+		     <el-tree
+		     	:data="customTreeData" 
+		     	:highlight-current="true"  
+		     	:props="customTreeProps"  
+		     	ref="customTreeRef" 
+		     	class="custom-tree" 
+				draggable
+				:default-expand-all="true"
+				node-key="nodeId"
+				>
+				<template #default="{ node, data }">
+					<span class="custom-tree-node"  :class="{'dropping-node':dropId==data.nodeId}" :id="data.nodeId" @dragenter="customDragEnter" @drop="customDropHandle" @dragover="customDragOverHandle">
+						<el-input v-model="data.nodeName" v-if="data.editing" @blur="data.editing=false"/>
+						<span v-else>{{ node.label }}</span>
+						<span>
+							<el-icon :size="20"  title="上移" @click="sortNode(data.nodeId,true)"><SortUp/></el-icon>
+							<el-icon :size="20"  title="下移" @click="sortNode(data.nodeId,false)"><SortDown/></el-icon>
+							<el-icon :size="20" title="重命名" style="margin: 0px 5px;" @click="data.editing=!data.editing" v-if="data.nodeType!='well'"><Edit/></el-icon>
+							<el-icon :size="20"  title="删除" @click="delNodeFront(data.nodeId)"><CloseBold/></el-icon>
+						</span>
+					</span>
+				</template>
+		     </el-tree> 
+		</el-card>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,toRaw,onMounted,nextTick} from 'vue'
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	
+	import customWellAPI from '@/api/customWell.js'
+	import stationAPI from '@/api/station.js'
+	import utils from '../../utils/utils.js'
+	
+	const isSaving=ref(false)
+	
+	const myDefTreeRef=ref(null)
+	
+	const customTreeRef=ref(null)
+	
+	const sysTreeData=ref([])
+	
+	const customTreeData=ref([])
+	
+	const sysTreeProps = {
+		children: 'children',
+		label: 'name',
+		isLeaf:'isLeaf'
+	}
+	
+	const customTreeProps = {
+		children: 'children',
+		label: 'nodeName',
+		isLeaf:'isLeaf'
+	}
+	
+	const dropId=ref('')
+	
+	const customDragEnter=(ev)=>{
+		let inId=ev.target.id
+		dropId.value=inId
+	}
+	
+	const sysDragStartHandle=(ev)=>{
+		ev.dataTransfer.dropEffect="copy"
+		ev.dataTransfer.setData("text/plain",ev.target.id)
+	}
+	
+	const customDragOverHandle=(ev)=>{
+		ev.preventDefault()
+		ev.dataTransfer.dropEffect="link"
+	}
+	
+	const customDropHandle=(ev)=>{
+		ev.preventDefault()
+		let outId=ev.dataTransfer.getData("text/plain");
+		let inId=ev.target.id
+		let hadNode=customTreeRef.value.getNode(outId)
+		if(hadNode){
+			ElMessage.error('该井已添加过')
+			return
+		}
+		let inNode=customTreeRef.value.getNode(inId)
+		if(inNode.data.nodeType=='well'){
+			ElMessage.error('非目录节点')
+			return
+		}
+		
+		
+		// 获取拖拽节点
+		let outNode=myDefTreeRef.value.getNode(outId)
+		outNode.data['nodeName']=outNode.data['name']
+		outNode.data['nodeId']=outNode.data['id']
+		customTreeRef.value.append(outNode.data,inId)
+		
+		
+	}
+	
+	const sortNode=(nodeId,isup)=>{
+		let crtNode=customTreeRef.value.getNode(nodeId)
+		let sibNodes=crtNode.parent.childNodes
+		let idx=null
+		sibNodes.forEach((node,index)=>{
+			if(node.data.nodeId==nodeId){
+				idx=index
+				return false
+			}
+		})
+		
+		
+		if(isup&&(idx-1)>=0){
+			customTreeRef.value.remove(crtNode)
+			customTreeRef.value.insertBefore(crtNode.data,sibNodes[idx-1])
+		}
+		else if(!isup&&(idx+1)<sibNodes.length){
+			customTreeRef.value.remove(crtNode)
+			customTreeRef.value.insertAfter(crtNode.data,sibNodes[idx+1])
+		}
+		
+		
+	}
+	
+	const delNodeFront=(id)=>{
+		customTreeRef.value.remove(customTreeRef.value.getNode(id))
+	}
+	
+	let rootNode=null
+	
+	const loadMyDefTree=(node,resolve)=>{
+		
+		let srcNode=node&&node.data?toRaw(node.data):{}
+		let {id,nodeType,typeEnd}=srcNode
+		stationAPI.loadSubNodes({id,nodeType,typeEnd}).then((resp) => {
+			if(resp.code===0&&resp.data){
+				resolve(resp.data)
+			}
+		})
+	}
+	
+	const loadCustomTree=()=>{
+		let converDef={id:'nodeId',name:'nodeName',superId:'superId',superName:'superName',children:'children'}
+		customWellAPI.loadCustomTree().then(resp=>{
+			if(resp.code===0){
+				let treeDatas=utils.list2Tree(resp.data||[],converDef)
+				customTreeData.value=treeDatas['topNodes']
+			}
+			else{
+				console.log(resp.msg)
+			}
+		})
+	}
+	
+	const addCustomFold=()=>{
+		ElMessageBox.prompt('请输入自定义节点名称(如：重点井)', '新建自定义节点', {
+			confirmButtonText:'确定',
+			cancelButtonText:'取消',
+			inputPattern:/\S{1,32}/,
+			inputErrorMessage:'自定义节点名称应为1-32字符'
+		}).then(({value})=>{
+			
+			customTreeRef.value.append({
+				nodeId:'1111',
+				nodeName:value,
+				children:[]
+			},null)
+			
+			
+		})
+	}
+	
+	const saveCustomTree=()=>{
+		isSaving.value=true
+		let saveDatas=[...customTreeData.value]
+		processSaveNodes(saveDatas)
+		//console.log(saveDatas)
+		customWellAPI.saveCustom(saveDatas).then(resp=>{
+			isSaving.value=false
+			if(resp.code!=0){
+				ElMessage.error(resp.msg||'保存失败')
+				return
+			}
+			ElMessage.success('保存成功')
+			loadCustomTree()
+		}).catch(err=>{
+			isSaving.value=false
+			ElMessage.error('保存出错')
+			console.log(err)
+		})
+	}
+	
+	const processSaveNodes=(datas)=>{
+		let childNodes=[]
+		datas.forEach(data=>{
+			if(data.children&&data.children.length>0){
+				data.children.forEach(child=>{
+					if(child.nodeType=='well'){
+						childNodes.push({wellId:child.id,superId:data.nodeId})  //由左侧拖入的井节点
+					}
+					else{
+						childNodes.push(child)  //本身就存在的子节点
+					}
+				})
+				
+				delete data.children
+			}
+		})
+		
+		datas.splice(0,0,...childNodes)
+	}
+	
+	onMounted(()=>{
+		loadCustomTree()
+	})
+</script>
+
+<style scoped>
+	.page-container{
+		width:100%;
+		height: 100%;
+		padding:20px 10px;
+		box-sizing: border-box;
+		display: grid;
+		grid-template-columns: 50% 50%;
+		grid-column-gap: 10px;
+	}
+	
+	.page-container:deep(.el-card__body){
+		height: calc(100% - 100px);
+		overflow-y: auto;
+	}
+	
+	.card-header{
+		height: 25px;
+		display: flex;
+		flex-flow: row nowrap;
+		align-items: center;
+		justify-content: space-between;
+	}
+	
+	.custom-tree:deep(.el-tree-node__content){
+		height: 35px;
+	}
+	
+	.custom-tree-node{
+		display: flex;
+		flex-flow: row nowrap;
+		justify-content: space-between;
+		flex:1;
+		align-items: center;
+		/* background-color: #f8f8f8; */
+		height: 30px;
+	}
+	
+	.dropping-node{
+		background-color: #d0dbfa;
+	}
+	
+	.custom-tree-node span{
+		
+	}
+	
+	.custom-tree-node span+span{
+		display: none;
+	}
+	
+	.custom-tree-node:hover  span+span{
+		display: inline;
+	}
+	
+	.custom-tree-node .el-input{
+		/* width:200px; */
+		height:28px;
+	}
+</style>