From cd1ecbca4881ba9d19858562f724aac3d152b901 Mon Sep 17 00:00:00 2001 From: jihongshun <1151753686@qq.com> Date: 星期一, 25 八月 2025 17:23:38 +0800 Subject: [PATCH] 树结构更改逻辑算法 --- src/views/system/shootPoint/components/shootPointDialog.vue | 213 ++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 146 insertions(+), 67 deletions(-) diff --git a/src/views/system/shootPoint/components/shootPointDialog.vue b/src/views/system/shootPoint/components/shootPointDialog.vue index f4fb7ff..0fb2d6b 100644 --- a/src/views/system/shootPoint/components/shootPointDialog.vue +++ b/src/views/system/shootPoint/components/shootPointDialog.vue @@ -10,7 +10,7 @@ <el-col :span="4"> <el-card class="noScroll"> <div class="chooseModel"> - <el-button type="primary" @click='chooseModel'>閫夋嫨妯″瀷</el-button> + <el-button type="primary" @click='chooseModel'>妯″瀷</el-button> <div class="modelType"> 妯″瀷鍚嶇О锛歿{ modelName }} </div> @@ -45,7 +45,7 @@ <!-- 鑸偣鍒楄〃 --> <div class="waypoints"> <div - v-for="(wp, index) in waypoints" + v-for="(wp, index) in treeData" :key="index" class="waypoint-item" :class="{ active: selectedIndex === index }" @@ -55,12 +55,21 @@ <i class="el-icon-success" ></i> - <span> - <span class="waypoint-index">{{ wp.label }}</span> - <i class="el-icon-camera"></i> - <i class="el-icon-video-camera"></i> - <i class="el-icon-picture-outline"></i> - </span> + <div class="waypoint-contnet"> + <span class="waypoint-index">{{ wp.label + wp.children[0].label }}</span> + <span v-for="(action, aIndex) in wp.children[0].actions" + :key="action.id" + class="action-icon" + @click.stop="clickItem(action)"> + + <img src="@/assets/images/xuanting.svg" alt="svg鍥剧墖" v-if="action.type==='鎮仠'" /> + <img src="@/assets/images/photo.svg" alt="svg鍥剧墖" v-if="action.type==='鎷嶇収'" /> + <img src="@/assets/images/startVideo.svg" alt="svg鍥剧墖" v-if="action.type==='寮�濮嬪綍鍍�'" /> + <img src="@/assets/images/stopVideo.svg" alt="svg鍥剧墖" v-if="action.type==='缁撴潫褰曞儚'" /> + <img src="@/assets/images/zoom.svg" alt="svg鍥剧墖" v-if="action.type==='鍙樼劍'" /> + <!-- <i v-if="action.type==='鎷嶇収'" class="el-icon-video-camera"></i> --> + </span> + </div> </div> </div> </div> @@ -72,7 +81,7 @@ </el-card> </el-col> <el-col :span="20"> - <InitMap v-if="showMap" @mergePoint="mergePoint" :towerUrl="towerUrl" :deviceData="deviceData" @dealTreeData="dealTreeData" ref="initMap"></InitMap> + <InitMap v-if="showMap" @mergePoint="mergePoint" :towerUrl="towerUrl" :deviceData="deviceData" @dealTreeData="dealTreeData" ref="initMap" :chooseItem="chooseItem" @dealAction = 'dealAction'></InitMap> </el-col> </el-row> <span slot="footer" class="dialog-footer"> @@ -132,7 +141,9 @@ totalPoints: 11, totalPhotos: 3, waypoints:[], - selectedIndex:null + selectedIndex:null, + chooseItem: null, + lastTableArr:[] } }, mounted(){ @@ -153,23 +164,27 @@ } }, methods:{ - toggleSelect(wq,index) { + toggleSelect(data,index) { + this.chooseItem = data console.log(this.treeData) - console.log(wq) + console.log(data) // 濡傛灉鐐瑰嚮鐨勬槸褰撳墠琛岋紝鍒欏彇娑堥�変腑 if (this.selectedIndex === index) { this.selectedIndex = null } else { this.selectedIndex = index } - const result = this.treeData.filter(item => - item.children && item.children.some(child => child.label === wq.label) - ); - const dataObj = result[0] - const from = [dataObj.children[0]?.longitude,dataObj.children[0]?.latitude, dataObj.children[0]?.height]; - const to = [dataObj.longitude,dataObj.latitude, dataObj.height]; + // const result = this.treeData.filter(item => + // item.children && item.children.some(child => child.label === data.label) + // ); + // const dataObj = result[0] + // const from = [dataObj.children[0]?.longitude,dataObj.children[0]?.latitude, dataObj.children[0]?.height]; + // const to = [dataObj.longitude,dataObj.latitude, dataObj.height]; + const from = [data.children[0].longitude,data.children[0].latitude, data.children[0].height]; + const to = [data.longitude,data.latitude, data.height]; + // this.flyToAndLookAt(from, to); this.flyToAndLookAt(from, to); - this.$refs.initMap.DealVisualCone(dataObj) + this.$refs.initMap.DealVisualCone(data) }, // 璁$畻 heading锛堝亸鑸锛� computeHeading(fromCartesian, toCartesian) { @@ -238,11 +253,21 @@ this.$refs.initMap.DealVisualCone(data,node) }, dealTreeData(arrList){ + console.log(arrList) + console.log(this.treeData) + console.log(this.lastTableArr) this.treeData = arrList const childrenArr = arrList .filter(item => Array.isArray(item.children)) .map(item => item.children) .reduce((acc, cur) => acc.concat(cur), []); + + childrenArr?.forEach((ele)=>{ + if(ele.actions) { + }else { + ele.actions = [] + } + }) this.waypoints = childrenArr console.log(childrenArr) console.log(this.treeData) @@ -390,7 +415,10 @@ }, //鍚堝苟閫昏緫 灏嗛檮杩憂绫宠寖鍥村唴鐨勭偣鍚堝苟 骞朵笖澶勭悊鎴愭暟鎹� mergePoint(arr,mergeNumber,viewer){ - this.treeData = arr + console.log(arr) + console.log(this.treeData) + // this.treeData = arr + this.treeData = this.lastTableArr const result = this.replaceCloseChildrenWithHighestPoint(this.treeData,mergeNumber); // const updated = this.insertRaisedPoints(result, 0,0, 236, 130); const updated = this.insertRaisedPoints(result, globalon, globalat, towerHeight); @@ -452,7 +480,7 @@ const groundA = result[i]; const raisedA = { id: this.generateId(), - label: groundA.label+ "-鍔犻珮", + label: groundA.label+ "-鍔犻珮111", longitude: groundA.longitude, latitude: groundA.latitude, height: groundA.height, @@ -460,8 +488,9 @@ { ...pointA, id: this.generateId(), - label: pointA.label + "-鍔犻珮", - height: pointA.height + 50 + label: pointA.label + "-鍔犻珮2222", + height: pointA.height + 50, + actions:[] } ] }; @@ -479,8 +508,9 @@ { ...pointB, id: this.generateId(), - label: pointB.label + "-鍔犻珮", - height: pointB.height + 50 + label: pointB.label + "-鍔犻珮3333", + height: pointB.height + 50, + actions:[] } ] }; @@ -633,47 +663,50 @@ type: 'warning' }) } + console.log(this.$refs.initMap.preVideoScopePrimitiveArrTie) + console.log(this.treeData) + console.log(this.waypoints) // this.dialogVisible = false // const dealArr = this.submitDealData() - const transformed = this.treeData.map((ground, index) => { - const pointNumber = index + 1; - const child = ground.children?.[0] || {}; + // const transformed = this.treeData.map((ground, index) => { + // const pointNumber = index + 1; + // const child = ground.children?.[0] || {}; - return { - altitude: child.height, - ardGroundPoint: [ - { - height: ground.height, - latitude: ground.latitude, - longitude: ground.longitude, - pointNumber: 1, - targetName: ground.label - } - ], - latitude: child.latitude, - longitude: child.longitude, - pointNumber: pointNumber, - targetName: child.label - }; - }) - console.log(transformed) - let parmas = { - templateName:this.form.templateName, - modelId:this.chooseModelId, - ardListWayPointsLS:transformed - } - addPoint(parmas).then(res=>{ - console.log(res) - if(res.code == 200) { - this.$message({ - message: '鏂板妯℃澘鎴愬姛', - type: 'success' - }) - this.$emit('on-submit') - this.$emit('close') - } - }) - console.log(parmas) + // return { + // altitude: child.height, + // ardGroundPoint: [ + // { + // height: ground.height, + // latitude: ground.latitude, + // longitude: ground.longitude, + // pointNumber: 1, + // targetName: ground.label + // } + // ], + // latitude: child.latitude, + // longitude: child.longitude, + // pointNumber: pointNumber, + // targetName: child.label + // }; + // }) + // console.log(transformed) + // let parmas = { + // templateName:this.form.templateName, + // modelId:this.chooseModelId, + // ardListWayPointsLS:transformed + // } + // addPoint(parmas).then(res=>{ + // console.log(res) + // if(res.code == 200) { + // this.$message({ + // message: '鏂板妯℃澘鎴愬姛', + // type: 'success' + // }) + // this.$emit('on-submit') + // this.$emit('close') + // } + // }) + // console.log(parmas) }, //聽璁$畻鐐笰缁曠偣B閫嗘椂閽堟棆杞寚瀹氳搴﹀悗鐨勬柊浣嶇疆 // 绌轰腑鐐规垨鑰呭湴闈㈢偣绗涘崱灏斿潗鏍� 濉旂殑绗涘崱灏斿潗鏍� 濉旂殑鏈濆悜鍊� @@ -690,11 +723,42 @@ const rotatedZ = localStartPoint.z; //聽Z杞村潗鏍囦繚鎸佷笉鍙� //聽灏嗘棆杞悗鐨勫眬閮ㄥ潗鏍囪浆鎹㈠洖涓栫晫鍧愭爣绯� return Cesium.Matrix4.multiplyByPoint(transformationMatrix,聽new聽Cesium.Cartesian3(rotatedX,聽rotatedY,聽rotatedZ),聽new聽Cesium.Cartesian3()); + }, + dealAction(data){ + console.log(this.treeData) + console.log(this.waypoints) + console.log(data) + const byLabel = this.addOrUpdate(this.lastTableArr, data, 'label', this) + this.waypoints = this.lastTableArr + console.log(byLabel) + console.log(this.lastTableArr) + console.log( this.waypoints) + this.treeData = this.lastTableArr + }, + addOrUpdate(list, newItem, key = 'label', vm = null) { + let index = list.findIndex(item => item[key] === newItem[key]); + console.log(index) + if (index !== -1) { + if (vm) { + vm.$set(list, index, newItem); // Vue2 鍝嶅簲寮忔浛鎹� + } else { + list.splice(index, 1, newItem); + } + } else { + list.push(newItem); + } + }, + clickItem(value){ + this.$refs.initMap.editAction(value); } } } </script> <style scoped> +::v-deep .el-dialog__header { + padding: 10px; /* 淇敼鍐呰竟璺� */ + font-size: 18px; /* 淇敼瀛椾綋澶у皬 */ +} .noScroll{ height: calc(100vh - 175px); overflow: auto; @@ -820,6 +884,9 @@ overflow-y: scroll; /* overflow: scroll; */ } +.waypoint-panel .waypoints { + min-height: 50px; +} .stats { display: flex; @@ -839,7 +906,7 @@ .waypoint-item { border-bottom: 1px solid #333; - height: 40px; + min-height: 40px; line-height: 40px; } @@ -852,15 +919,19 @@ align-items: center; cursor: pointer; padding: 4px 8px; + width: 280px; + word-wrap: break-word; } - .waypoint-header i { margin-right: 6px; height: 36px; line-height: 36x; transition: transform 0.2s; font-size: 24px; + } + + .waypoint-header .waypoint-index { font-size: 24px; } @@ -869,8 +940,16 @@ } .waypoint-content { - padding: 4px 8px; + flex: 1; + background: rgb(73, 76, 128); display: flex; - gap: 8px; + flex-wrap: wrap; + align-items: center; } + +.waypoint-contnet img{ + height: 25px; + margin-left: 5px; +} + </style> -- Gitblit v1.9.3