GLB模型添加.修改，删除

surprise

2024-01-02 b2fdf4f25251229adbe9a6963cb35fb7fc868172

 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'
              <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>
              <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.initData({});
    this.$nextTick(() => {
      this.histotyPlotting();
    // 定义中转站事件
    this.initBusEvent();
    })
  },
  destroyed() {
    _treeTool = undefined;
@@ -358,101 +300,105 @@
    // 标绘上传至服务器
    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(() => {
      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'
          );
          const uploading = this.$loading({
      this.uploading = this.$loading({
            lock: true,
            text: "会议保障标绘数据上传中，请稍后",
        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",
                });
      if (this.layersId) {
        var obj = {
          name: "江苏交控智慧高速",
          json: oricontent,
          id: this.layersId,
        }
        this.editLayerData(obj);
              } else {
                this.$message.error("保存失败！");
        var obj = {
          name: "江苏交控智慧高速",
          json: oricontent
              }
            },
            (error) => {
              uploading.close();
              this.$message.error("数据上传失败");
              // console.log("错误", error.message);
        this.addLayerData(obj);
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消上传",
          });
        });
    },
    // 加载历史标绘数据
    histotyPlotting() {
      this.$confirm(
        "该操作将会导致当前标绘数据被覆盖，是否继续?",
        "会议保障历史数据",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          // customClass: "msgbox",
        }
      )
        .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",


      // axios({
            // 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",
      //   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) => {
              setTimeout(() => {
                downloading.close();
      // }).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();
      }
    },
    // 加载历史标绘数据
    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 = [];
                response.data.result.forEach((item) => {
                  let geoJsonObj = JSON.parse(item.geojsonString);
                  plottingArr.push(geoJsonObj[0]);
                });
            plottingArr.push(val[0]);
                const newArr = arrGroup(plottingArr, (item) => item.name);
                let finalPlotting = [];
                newArr.map((a) => {
@@ -467,29 +413,71 @@
                  finalPlotting.push(newObj);
                });
                let json = {
                  name: "一张图",
              name: "江苏交控智慧高速",
                  id: 1,
                  open: true,
                  children: finalPlotting,
                };
                that.initData(json);
              }, 2000);
            },
            (error) => {
              setTimeout(() => {
                downloading.close();
                // console.log("错误", error.message);
                this.$message.error("数据请求失败");
              }, 2000);
            this.initData(json);
            }
          );
        })
        .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 &&
@@ -705,6 +704,8 @@
        case "pathLayer":
          this.$refs.addPathLayer.open(type, editData, defaultData);
          break;


      }
    },
    openScene(filedata) {
@@ -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);
      }
    },
    // 添加演示动画
@@ -848,7 +858,12 @@
      if (treeNode.animationDatas) {
        this.$refs.animationEdit.start(treeNode.animationDatas);
      } else {
        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;
    }
@@ -1170,6 +1198,7 @@
.rightClickMenu ul li:hover {
  background-color: #ebeef5;
}

.wdzy::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px;