企业，图层树

lixuliang

2023-11-15 13dd1b9c019b9633f3005f15d4b0e6132189eccc

 src/components/left/layerTree/Layer.vue

@@ -19,18 +19,38 @@
            <el-button
              class="button-user"
              type="primary"
              size="mini"
              slot="trigger"
              icon="el-icon-folder-opened"
              title="打开配置文件"
              title="打开本地配置文件"
            ></el-button>
            <el-button
              class="button-user"
              type="primary"
              size="mini"
              icon="el-icon-download"
              title="保存配置文件"
              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-upload>
        </div>
@@ -148,6 +168,18 @@
import SaveScene from "./SaveScene.vue";
// 工程树工具
let _treeTool;
function arrGroup(arr, fn) {
  const obj = {};
  arr.forEach((item) => {
    const key = JSON.stringify(fn(item));
    obj[key] = obj[key] || [];
    obj[key].push(item);
  });
  return Object.keys(obj).map((k) => {
    return obj[k];
  });
}

export default {
  name: "Layer",
  components: {
@@ -323,12 +355,168 @@
      };
      reader.readAsText(file.raw);
    },
    // 标绘上传至服务器
    saveHistoryPlot() {
      if (this.treeData.length == 0) {
        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: "已取消上传",
          });
        });
    },
    // 加载历史标绘数据
    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",
            // 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: "已取消加载",
          });
        });
    },
    // 清除本地所有标绘信息
    deleteAllPlot() {
      this.$confirm("该操作将清除所有标绘信息，是否继续?", "清除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            message: "标绘数据已清除",
            type: "success",
          });
          this.initData({});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消清除",
          });
        });
    },
    // 初始化数据
    initData(data) {
      if (this.treeData.length) {
        this.removeChildData(this.treeData);
      }

      data.name && sessionStorage.setItem("SmartEarthTitle", data.name);
      // 设置工程树数据
      this.setTreeData(data.children);
@@ -706,8 +894,6 @@
        open: true,
        children: this.treeData,
      };
      console.log(this.treeData);
      debugger;
      let content = JSON.stringify(data);
      let blob = new Blob([content], { type: "" });
      var reader = new FileReader();
@@ -727,6 +913,7 @@
    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) => {
@@ -845,6 +1032,9 @@
/deep/.button-user i {
  color: #ffffff !important;
}
.historyBtn {
  margin-left: 10px;
}
.closeBtn {
  color: white;
  position: relative;
@@ -874,7 +1064,7 @@
}

.wdzy {
  width: 320px;
  width: 335px;
  /* height: 100%; */
  max-height: 360px;
  overflow-y: auto;
@@ -887,7 +1077,7 @@
.closePanel {
  position: absolute;
  right: 12px;
  top: 6px;
  top: 10px;
  font-size: 18px;
  line-height: 30px;
  background-color: rgba(255, 255, 255, 0.5);
@@ -896,7 +1086,7 @@
  height: 30px;
  cursor: pointer;
  text-align: center;
  z-index: 999999;
  z-index: 999;
  color: white;
}
.treeContainer {
@@ -919,6 +1109,8 @@
  }

  .el-tree {
    height: 300px;
    overflow: auto;
    background: transparent;
    color: #fff;
  }