From b2fdf4f25251229adbe9a6963cb35fb7fc868172 Mon Sep 17 00:00:00 2001 From: surprise <15810472099@163.com> Date: 星期二, 02 一月 2024 18:29:14 +0800 Subject: [PATCH] GLB模型添加.修改,删除 --- src/components/left/layerTree/Layer.vue | 513 ++++++++++++++++++++++++++++++-------------------------- 1 files changed, 271 insertions(+), 242 deletions(-) diff --git a/src/components/left/layerTree/Layer.vue b/src/components/left/layerTree/Layer.vue index a5b04d2..389efd2 100644 --- a/src/components/left/layerTree/Layer.vue +++ b/src/components/left/layerTree/Layer.vue @@ -8,127 +8,62 @@ <div class="treeContainer"> <div class="treeTitle"> <span class="closePanel" @click="closeLayer">脳</span> - <el-upload - class="button-group" - action="" - :auto-upload="false" - :show-file-list="false" - :on-change="loadJsonFromFile" - accept=".json" - > - <el-button - class="button-user" - type="primary" - slot="trigger" - icon="el-icon-folder-opened" - title="鎵撳紑鏈湴閰嶇疆鏂囦欢" - ></el-button> - <el-button - class="button-user" - type="primary" - icon="el-icon-download" - title="淇濆瓨涓烘湰鍦伴厤缃枃浠�" - @click.stop="save" - ></el-button> - <el-button - class="button-user" - type="primary" - icon="el-icon-delete" - title="娓呴櫎鎵�鏈夋爣缁�" - @click.stop="deleteAllPlot" - ></el-button> - <el-button - class="button-user" - type="primary" - icon="el-icon-upload" - title="涓婁紶鑷虫湇鍔″櫒" - @click.stop="saveHistoryPlot" - ></el-button> + <el-upload class="button-group" action="" :auto-upload="false" :show-file-list="false" + :on-change="loadJsonFromFile" accept=".json"> + <el-button class="button-user" type="primary" slot="trigger" icon="el-icon-folder-opened" + title="鎵撳紑鏈湴閰嶇疆鏂囦欢"></el-button> + <el-button class="button-user" type="primary" icon="el-icon-download" title="淇濆瓨涓烘湰鍦伴厤缃枃浠�" + @click.stop="save"></el-button> + <!-- <el-button class="button-user" type="primary" icon="el-icon-delete" title="娓呴櫎鎵�鏈夋爣缁�" + @click.stop="deleteAllPlot"></el-button> --> + <el-button class="button-user" type="primary" icon="el-icon-upload" title="涓婁紶鑷虫湇鍔″櫒" + @click.stop="saveHistoryPlot"></el-button> - <el-button - class="button-user historyBtn" - type="primary" - icon="el-icon-s-order" - title="鍘嗗彶璁板綍" - @click.stop="histotyPlotting" - ></el-button> + <!-- <el-button class="button-user historyBtn" type="primary" icon="el-icon-s-order" title="鍘嗗彶璁板綍" + @click.stop="histotyPlotting"></el-button> --> </el-upload> </div> - <el-tree - ref="tree" - :data="treeData" - show-checkbox - node-key="id" - draggable - :allow-drop="allowDrop" - :expand-on-click-node="false" - :auto-expand-parent="false" - :default-expanded-keys="defaultExpanded" - :default-checked-keys="defaultCheck" - @node-expand="changeNodeExpand($event, true)" - @node-collapse="changeNodeExpand($event, false)" - @check="check" - @node-contextmenu="rightClick" - > - <span - class="custom-tree-node" - slot-scope="{ data }" - @dblclick="flyTo(data)" - @click="select(data)" - > + <el-tree ref="tree" :data="treeData" show-checkbox node-key="id" draggable :allow-drop="allowDrop" + :expand-on-click-node="false" :auto-expand-parent="false" :default-expanded-keys="defaultExpanded" + :default-checked-keys="defaultCheck" @node-expand="changeNodeExpand($event, true)" + @node-collapse="changeNodeExpand($event, false)" @check="check" @node-contextmenu="rightClick"> + <span class="custom-tree-node" slot-scope="{ data }" @dblclick="flyTo(data)" @click="select(data)"> <span> <i v-if="data.children" class="el-icon-folder"></i> - <i - v-else - :class=" - data.sourceType === 'location' - ? 'el-icon-location-outline' - : '' - " - ></i> - <el-input - v-if="data.rename" - v-model="data.name" - size="mini" - placeholder="璇疯緭鍏ュ悕绉�" - @change="rename(data)" - @blur="rename(data)" - ></el-input> + <i v-else :class="data.sourceType === 'location' + ? 'el-icon-location-outline' + : '' + "></i> + <el-input v-if="data.rename" v-model="data.name" size="mini" placeholder="璇疯緭鍏ュ悕绉�" @change="rename(data)" + @blur="rename(data)"></el-input> <span v-else>{{ data.name }}</span> </span> </span> </el-tree> </div> - <div - class="rightClickMenu" - v-if="rightClickMenuDisplay" - @click.stop="closeRightClick" - :style="{ ...rightClickMenuStyle }" - > + <div class="rightClickMenu" v-if="rightClickMenuDisplay" @click.stop="closeRightClick" + :style="{ ...rightClickMenuStyle }"> <ul> - <li @click="addFold"><i class="el-icon-plus"></i>娣诲姞鐩綍</li> - <li @click="addLayer"><i class="el-icon-plus"></i>娣诲姞鍥惧眰</li> - <li @click="editDemoAnimation"> + <!-- <li @click="addFold"><i class="el-icon-plus"></i>娣诲姞鐩綍</li> + <li @click="addLayer"><i class="el-icon-plus"></i>娣诲姞鍥惧眰</li> --> + <!-- <li @click="editDemoAnimation"> <i class="el-icon-plus"></i>娣诲姞鍔ㄧ敾 - </li> - <li @click="addPosition"> + </li> --> + <!-- <li @click="addPosition"> <i class="el-icon-location-outline"></i>娣诲姞瀹氫綅 - </li> + </li> --> <li v-if="!isClickParent" @click="editTreeNode"> <i class="el-icon-edit"></i>缂栬緫 </li> - <li @click="openRename"><i class="el-icon-edit"></i>閲嶅懡鍚�</li> + <!-- <li @click="openRename"><i class="el-icon-edit"></i>閲嶅懡鍚�</li> --> <li @click="deleteTreeNode"><i class="el-icon-delete"></i>鍒犻櫎</li> </ul> </div> <add-terrain ref="addTerrain" @success="addSceneData" /> - <add-online-map - ref="addOnlineMap" - @success="addOtherData('褰卞儚', $event)" - /> + <add-online-map ref="addOnlineMap" @success="addOtherData('褰卞儚', $event)" /> <add-image ref="addImage" @success="addSceneData" /> <add-model ref="addModel" @success="addSceneData" /> <add-pathLayer ref="addPathLayer" @success="addSceneData" /> @@ -139,11 +74,7 @@ <get-scene ref="getScene" @success="openScene" /> <save-scene ref="saveScene" @success="saveScene" /> <select-data ref="select" @success="openThisTypePop" /> - <animationEdit - ref="animationEdit" - @success="updateAnimation" - @setAnimation="setAnimation" - /> + <animationEdit ref="animationEdit" @success="updateAnimation" @setAnimation="setAnimation" /> </div> </div> </template> @@ -166,6 +97,8 @@ import AddOnlineMap from "./AddOnlineMap.vue"; import GetScene from "./GetScene.vue"; import SaveScene from "./SaveScene.vue"; +import { Op_SelectByPage, Op_Insert, Op_UpdateById } from '../../../api/api.js' +import model from "../../../assets/js/Layer/model"; // 宸ョ▼鏍戝伐鍏� let _treeTool; function arrGroup(arr, fn) { @@ -214,6 +147,9 @@ isNewFold: false, newFoldName: undefined, serverURL: "http://192.168.109.128:8080", + uploading: false, + layersId: null + }; }, mounted() { @@ -231,19 +167,25 @@ } else if (this.treeData.length) { // 瀛樺湪缂撳瓨鏁版嵁 // 鍔犺浇鍦烘櫙鏁版嵁 - this.loadDataToScene(); + // this.loadDataToScene(); + this.setTreeData([]); + this.initData({}); } else { // 榛樿鏍戠粨鏋� // this.setTreeData([{ id: "82A0C3DE", name: "鎴戠殑璧勬簮", children: [] }]); this.setTreeData([]); + this.initData({}); // 鍔犺浇鍦烘櫙鏁版嵁 - this.loadDataToScene(); + // this.loadDataToScene(); } // 鎵撳紑寮圭獥 //this.$refs.layer.open(); - - // 瀹氫箟涓浆绔欎簨浠� - this.initBusEvent(); + this.initData({}); + this.$nextTick(() => { + this.histotyPlotting(); + // 瀹氫箟涓浆绔欎簨浠� + this.initBusEvent(); + }) }, destroyed() { _treeTool = undefined; @@ -358,138 +300,184 @@ // 鏍囩粯涓婁紶鑷虫湇鍔″櫒 saveHistoryPlot() { if (this.treeData.length == 0) { - this.$message.error("璇峰厛杩涜鏍囩粯"); + this.$message.error("璇峰厛杩涜鏁版嵁鍔犺浇"); return; } else if (this.treeData.length > 1) { this.$message.error("鏍煎紡涓嶆纭紝璇蜂慨鏀瑰悗閲嶆柊淇濆瓨"); return; } - this.$confirm("鏄惁灏嗗綋鍓嶄細璁繚闅滄爣缁樻暟鎹笂浼犺嚦鏈嶅姟鍣�?", "涓婁紶", { - confirmButtonText: "纭畾", - cancelButtonText: "鍙栨秷", - type: "warning", - }) - .then(() => { - let oricontent = JSON.stringify(this.treeData); - let content = oricontent.replace( - /"checked":true/g, - '"checked":false' - ); - const uploading = this.$loading({ - lock: true, - text: "浼氳淇濋殰鏍囩粯鏁版嵁涓婁紶涓紝璇风◢鍚�", - spinner: "el-icon-loading", - background: "rgba(0, 0, 0, 0.7)", - }); - axios({ - method: "POST", - url: "http://10.10.4.121:8070/PM20221203225_OpenAPI3_Service-0.0.1-SNAPSHOT/biaoHui/add", - data: { - userId: this.$store.state.userId, - userName: this.$store.state.userName, - geojsonName: this.treeData[0].name, - geojsonString: content, - }, - }).then( - (response) => { - uploading.close(); - if (response.data.code == 200) { - this.$message({ - message: "淇濆瓨鎴愬姛", - type: "success", - }); - } else { - this.$message.error("淇濆瓨澶辫触锛�"); - } - }, - (error) => { - uploading.close(); - this.$message.error("鏁版嵁涓婁紶澶辫触"); - // console.log("閿欒", error.message); - } - ); - }) - .catch(() => { - this.$message({ - type: "info", - message: "宸插彇娑堜笂浼�", - }); - }); + var that = this; + // this.$confirm("鏄惁灏嗗綋鍓嶅満鏅暟鎹笂浼犺嚦鏈嶅姟鍣�?", "涓婁紶", { + // confirmButtonText: "纭畾", + // cancelButtonText: "鍙栨秷", + // type: "warning", + // }) + // .then(() => { + let oricontent = JSON.stringify(this.treeData); + let content = oricontent.replace( + /"checked":true/g, + '"checked":false' + ); + this.uploading = this.$loading({ + lock: true, + text: "鍦烘櫙鏁版嵁涓婁紶涓紝璇风◢鍚�", + spinner: "el-icon-loading", + background: "rgba(0, 0, 0, 0.7)", + }); + if (this.layersId) { + var obj = { + name: "姹熻嫃浜ゆ帶鏅烘収楂橀��", + json: oricontent, + id: this.layersId, + } + this.editLayerData(obj); + } else { + var obj = { + name: "姹熻嫃浜ゆ帶鏅烘収楂橀��", + json: oricontent + } + this.addLayerData(obj); + } + + + // axios({ + // method: "POST", + // url: "http://10.10.4.121:8070/PM20221203225_OpenAPI3_Service-0.0.1-SNAPSHOT/biaoHui/add", + // data: { + // userId: this.$store.state.userId, + // userName: this.$store.state.userName, + // geojsonName: this.treeData[0].name, + // geojsonString: content, + // }, + // }).then( + // (response) => { + // uploading.close(); + // if (response.data.code == 200) { + // this.$message({ + // message: "淇濆瓨鎴愬姛", + // type: "success", + // }); + // } else { + // this.$message.error("淇濆瓨澶辫触锛�"); + // } + // }, + // (error) => { + // uploading.close(); + // this.$message.error("鏁版嵁涓婁紶澶辫触"); + // // console.log("閿欒", error.message); + // } + // ); + // }) + // .catch(() => { + // this.$message({ + // type: "info", + // message: "宸插彇娑堜笂浼�", + // }); + // }); + }, + async addLayerData(res) { + const data = await Op_Insert(res); + if (data.status == 200) { + this.uploading.close(); + } + }, + async editLayerData(res) { + const data = await Op_UpdateById(res); + if (data.status == 200) { + this.uploading.close(); + } }, // 鍔犺浇鍘嗗彶鏍囩粯鏁版嵁 - histotyPlotting() { - this.$confirm( - "璇ユ搷浣滃皢浼氬鑷村綋鍓嶆爣缁樻暟鎹瑕嗙洊锛屾槸鍚︾户缁�?", - "浼氳淇濋殰鍘嗗彶鏁版嵁", - { - confirmButtonText: "纭畾", - cancelButtonText: "鍙栨秷", - type: "warning", - // customClass: "msgbox", + async histotyPlotting() { + const data = await Op_SelectByPage({ pageSize: 1000000, pageIndex: 1, name: '' }); + if (data.status == 200 && data.data.length > 0) { + var val_data = data.data; + for (var i in val_data) { + var json = val_data[i].json; + var val = JSON.parse(json) + if (val.length > 0) { + this.layersId = val_data[i].id; + let plottingArr = []; + plottingArr.push(val[0]); + const newArr = arrGroup(plottingArr, (item) => item.name); + let finalPlotting = []; + newArr.map((a) => { + let newObj = {}; + a.map((b) => { + if (newObj.children) { + newObj.children = newObj.children.concat(b.children); + } else { + newObj = b; + } + }); + finalPlotting.push(newObj); + }); + let json = { + name: "姹熻嫃浜ゆ帶鏅烘収楂橀��", + id: 1, + open: true, + children: finalPlotting, + }; + this.initData(json); + } } - ) - .then(() => { - const downloading = this.$loading({ - lock: true, - text: "浼氳淇濋殰鍘嗗彶鏁版嵁鍔犺浇涓紝璇风◢鍚�", - spinner: "el-icon-loading", - background: "rgba(0, 0, 0, 0.7)", - }); - let that = this; - axios({ - method: "GET", - // method: "POST", - // url: "/api/PM20221203225_OpenAPI3_Service-0.0.1-SNAPSHOT/biaoHui/list", - url: "http://10.10.4.121:8070/PM20221203225_OpenAPI3_Service-0.0.1-SNAPSHOT/biaoHui/list", - // data: { - // userId: this.$store.state.userId, - // }, - }).then( - (response) => { - setTimeout(() => { - downloading.close(); - let plottingArr = []; - response.data.result.forEach((item) => { - let geoJsonObj = JSON.parse(item.geojsonString); - plottingArr.push(geoJsonObj[0]); - }); - const newArr = arrGroup(plottingArr, (item) => item.name); - let finalPlotting = []; - newArr.map((a) => { - let newObj = {}; - a.map((b) => { - if (newObj.children) { - newObj.children = newObj.children.concat(b.children); - } else { - newObj = b; - } - }); - finalPlotting.push(newObj); - }); - let json = { - name: "涓�寮犲浘", - id: 1, - open: true, - children: finalPlotting, - }; - that.initData(json); - }, 2000); - }, - (error) => { - setTimeout(() => { - downloading.close(); - // console.log("閿欒", error.message); - this.$message.error("鏁版嵁璇锋眰澶辫触"); - }, 2000); - } - ); - }) - .catch(() => { - this.$message({ - type: "info", - message: "宸插彇娑堝姞杞�", - }); - }); + } + // const downloading = this.$loading({ + // lock: true, + // text: "浼氳淇濋殰鍘嗗彶鏁版嵁鍔犺浇涓紝璇风◢鍚�", + // spinner: "el-icon-loading", + // background: "rgba(0, 0, 0, 0.7)", + // }); + // let that = this; + // axios({ + // method: "GET", + // // method: "POST", + // // url: "/api/PM20221203225_OpenAPI3_Service-0.0.1-SNAPSHOT/biaoHui/list", + // url: "http://10.10.4.121:8070/PM20221203225_OpenAPI3_Service-0.0.1-SNAPSHOT/biaoHui/list", + // // data: { + // // userId: this.$store.state.userId, + // // }, + // }).then( + // (response) => { + // setTimeout(() => { + // downloading.close(); + // + // response.data.result.forEach((item) => { + // let geoJsonObj = JSON.parse(item.geojsonString); + // plottingArr.push(geoJsonObj[0]); + // }); + // const newArr = arrGroup(plottingArr, (item) => item.name); + // let finalPlotting = []; + // newArr.map((a) => { + // let newObj = {}; + // a.map((b) => { + // if (newObj.children) { + // newObj.children = newObj.children.concat(b.children); + // } else { + // newObj = b; + // } + // }); + // finalPlotting.push(newObj); + // }); + // let json = { + // name: "姹熻嫃浜ゆ帶鏅烘収楂橀��", + // id: 1, + // open: true, + // children: finalPlotting, + // }; + // that.initData(json); + // }, 2000); + // }, + // (error) => { + // setTimeout(() => { + // downloading.close(); + // // console.log("閿欒", error.message); + // this.$message.error("鏁版嵁璇锋眰澶辫触"); + // }, 2000); + // } + // ); + + }, // 娓呴櫎鏈湴鎵�鏈夋爣缁樹俊鎭� deleteAllPlot() { @@ -541,7 +529,7 @@ } // 鍒濆瀹氫綅 - document.title = sessionStorage.getItem("SmartEarthTitle") || "涓�寮犲浘"; + document.title = sessionStorage.getItem("SmartEarthTitle") || "姹熻嫃浜ゆ帶鏅烘収楂橀��"; } else { setTimeout(() => { this.loadDataToScene(); @@ -562,9 +550,12 @@ if (addData && node._children) { node._children.forEach((item) => { _treeTool.addData(item); + this.setAddGLBLayer(item); }); } else { + addData && _treeTool.addData(node); + this.setAddGLBLayer(node); } } if (node.children && node.children.length) { @@ -584,11 +575,19 @@ // 鍕鹃�� check(treeNode, data) { let isCheck = data.checkedKeys.indexOf(treeNode.id) > -1; + // 鍕鹃�夎妭鐐� this.checkTreeNode({ id: treeNode.id, checked: isCheck }); // 鏇存柊鍦烘櫙鏁版嵁 _treeTool.checkNode(treeNode, isCheck); + if (treeNode.sourceType === 'GLB') { + if (isCheck) { + model.addModelLayer(treeNode); + } else { + model.setDelGLBModel(treeNode); + } + } // 鍙兘鍚屾椂鍔犺浇涓�涓湴褰� if ( isCheck && @@ -648,7 +647,7 @@ }; this.addData(data, newChild); }) - .catch(() => {}); + .catch(() => { }); }, // 閫夋嫨鏁版嵁 selectData(data) { @@ -705,6 +704,8 @@ case "pathLayer": this.$refs.addPathLayer.open(type, editData, defaultData); break; + + } }, openScene(filedata) { @@ -716,7 +717,7 @@ let json = data.data; this.initData(json); }) - .catch(() => {}); + .catch(() => { }); }, saveScene(data) { let fileName = data.name; @@ -739,7 +740,7 @@ alert("淇濆瓨鎴愬姛锛�"); } }) - .catch(() => {}); + .catch(() => { }); }, // 娣诲姞鏁版嵁鍒板満鏅� addSceneData(data, isEdit) { @@ -765,6 +766,7 @@ // 娣诲姞鏍戣妭鐐� addData(data, value) { !value.rename && (value.rename = false); + this.addTreeChildren({ pid: data && data.id, item: value }); this.expandedNode(data); @@ -784,7 +786,7 @@ addOtherData(parentName, data) { let parentNode = this.getParentNodeByName(parentName); data.checked = true; - + this.setAddGLBLayer(data); if (!parentNode) { parentNode = { id: window.sgworld.Core.getuid(), @@ -799,6 +801,14 @@ } else { this.addData(parentNode, { ...data, item: undefined }); _treeTool.treeData && _treeTool.treeData.set(data.id, data.item); + } + + }, + setAddGLBLayer(res) { + + if (res.sourceType == "GLB" && res.checked) { + + model.addModelLayer(res); } }, // 娣诲姞婕旂ず鍔ㄧ敾 @@ -820,7 +830,7 @@ this.addOtherData("婕旂ず鍔ㄧ敾", data); this.$refs.animationEdit.open(id); }) - .catch(() => {}); + .catch(() => { }); }, //鏇存柊鍔ㄧ敾 updateAnimation(id, data) { @@ -848,7 +858,12 @@ if (treeNode.animationDatas) { this.$refs.animationEdit.start(treeNode.animationDatas); } else { - _treeTool.flyTo(treeNode); + if (treeNode.sourceType === 'GLB') { + model.flyTo(treeNode); + } else { + + _treeTool.flyTo(treeNode); + } } }, select() { @@ -913,7 +928,6 @@ rightClick(e, data, node, comp) { this.isClickParent = !!data.children; this.selectNode = data; - console.log(this.selectNode); this.rightClickMenuStyle = { top: e.pageY + "px", left: e.pageX + "px" }; this.rightClickMenuDisplay = true; document.onclick = (e) => { @@ -926,9 +940,15 @@ }, // 鍙抽敭鍒犻櫎鎸夐挳鐐瑰嚮浜嬩欢 deleteTreeNode() { + if (this.selectNode.sourceType === "GLB") { + model.setDelGLBModel(this.selectNode) + } + this.remove(this.selectNode); this.$refs.tree && this.$refs.tree.setCurrentKey(null); this.selectNode = undefined; + + }, // 鍙抽敭缂栬緫鎸夐挳缂栬緫鏍戣妭鐐� editTreeNode() { @@ -948,6 +968,8 @@ this.selectNode.id, this.selectNode.animationDatas ); + } else if (this.selectNode.sourceType === "GLB") { + model.getEditModelLayer(this.selectNode); } else { this.openThisTypePop(this.selectNode.sourceType, this.selectNode); } @@ -1032,9 +1054,11 @@ /deep/.button-user i { color: #ffffff !important; } + .historyBtn { margin-left: 10px; } + .closeBtn { color: white; position: relative; @@ -1074,6 +1098,7 @@ padding: 10px 0px; box-sizing: border-box; } + .closePanel { position: absolute; right: 12px; @@ -1089,12 +1114,14 @@ z-index: 999; color: white; } + .treeContainer { width: 100%; height: 100%; .treeTitle { margin: 0px 0px 10px 10px; + button { background-color: rgba(155, 155, 155, 0.7) !important; width: 30px; @@ -1103,6 +1130,7 @@ padding: 5px 3px !important; border: none; } + /deep/ .el-upload { margin-right: 10px; } @@ -1119,7 +1147,7 @@ background-color: rgba(245, 247, 250, 0.2); } - /deep/ .el-tree-node:focus > .el-tree-node__content { + /deep/ .el-tree-node:focus>.el-tree-node__content { background-color: rgba(245, 247, 250, 0.2); } @@ -1136,7 +1164,7 @@ } } - /deep/ .el-checkbox > .is-disabled { + /deep/ .el-checkbox>.is-disabled { display: none; } } @@ -1170,6 +1198,7 @@ .rightClickMenu ul li:hover { background-color: #ebeef5; } + .wdzy::-webkit-scrollbar { /*婊氬姩鏉℃暣浣撴牱寮�*/ width: 5px; -- Gitblit v1.9.3