4.0/src/renderer/components/Tree/index.vue

<template>
  <div class="TreeIndex">
    <div class="arrowTree" @click="isShowTree">
      <img :src="arrowTree" alt="" />
    </div>
    <svg-icon icon-class="LayerBorder" :class-name="['absolute', 'zIndex-1']"></svg-icon>
    <div class="box1" v-on:mouseleave="treeMouseOver">
      <div class="title">
        <svg-icon icon-class="layerTitleBg" :class-name="['absolute', 'layerTitleBg']"></svg-icon>
        <div>
          <span></span>
          {{ $t("tree.title") }}
        </div>
        <div class="border"></div>
      </div>
      <div class="ztreeBox custom_scroll_bar">
        <ul id="treeDemo" class="ztree" :setting="setting" @click="cancel"></ul>
      </div>
      <div class="search" id="search">
        <div class="searchUp">
          <el-select v-model="select" @change="selectChange" style="width: 24%;" size="small">
            <el-option value="tree" :label="$t('tree.layer')"></el-option>
            <el-option value="poi" :label="$t('tree.location')"></el-option>
          </el-select>
          <input v-bind="searchKey" style="width: 50px;" id="keyword" type="text"
            :placeholder="$t('btn.treePlaceholder')" @input="clearResult" @change="searchPlace" />
          <el-button type="primary" plain id="queryButton" size="small" @click="searchPlace" :loading="loading">{{
            $t("btn.search") }}
          </el-button>
        </div>
        <div id="selectorBox">
          <el-select ref="select1" @change="locationChange" v-model="value" size="small"
            :placeholder="$t('btn.selectPlaceholder')" :no-data-text="$t('btn.selectNoText')">
            <el-option v-for="(item, index) in poiOptions" :key="item.search_key + index" :label="item.search_key"
              :value="item.address">
            </el-option>
          </el-select>
        </div>
      </div>
      <rightMenu ref="rightMenu" class="absolute zIndex99"></rightMenu>
    </div>
    <el-dialog title="提示" :append-to-body="true" :visible.sync="dialogVisible" width="30%" :before-close="closeDialog">
      <!-- 选择全景还是图片 -->
      <span>请选择全景还是图片</span>
      <el-radio-group v-model="radio" size="small">
        <el-radio-button label="全景"></el-radio-button>
        <el-radio-button label="图片"></el-radio-button>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="confirmType">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { ipcRenderer } from "electron";
import arrowTree from "@/assets/images/arrowTree.png";
import { debounce } from "../../utils";
import tree from "./treeSetting";
import rightMenu from "./components/rightMenu.vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import rightMenuOption from "../Tree/components/rightMenuOption";
import { findParentId } from "@/components/Tree/treeNode";
import { renderTextBox } from "./renderNode";
import {
  get_source_list,
  queryPOI,
  addSource,
  updateLayerIndex,
  addPicture,
  addPanorama
} from "@/api/gisAPI";
import {
  getKeyOfSelectedNode,
  cusAddNodes,
  getNodeData,
} from "./treeNode";
import {
  renderBim,
  renderCzml,
  renderGeojson,
  renderLayer,
  renderShp,
  renderXLSX,
  renderTerrain,
  renderPicture
} from "./renderNode";
import { getNamefromPath2 } from "../../utils/index";
import * as path from "path";
import { GetHomeDir } from "../../../main/back/config";
import {
  shpTotal
} from "./entityClick"
export default {
  name: "index",
  components: {
    rightMenu,
  },
  mixins: [tree, rightMenuOption],
  data() {
    return {
      input3: "",
      select: "poi",
      value: "",
      searchKey: "",
      poiOptions: [],
      left: 0,
      arrowTree,
      isShow: true,
      mapModule: null,
      key:
        (localStorage.getItem("AMapKey") &&
          localStorage.getItem("AMapKey").split("|")[0]) ||
        "d88fcc689d1aa99866b2d0d83fd36677",
      isOnline: false,
      loading: false,
      dialogVisible: false,
      radio: '全景',
      picturePaths: [],
      otherPaths: [],
    };
  },
  mounted() {
    this.$recvChanel("renderNode", () => {
      this.getList();
    });
    $("#search").bind("keydown", function (e) {
      // 兼容FF和IE和Opera
      let theEvent = e || window.event;
      let code = theEvent.keyCode || theEvent.which || theEvent.charCode;
      if (code == 13) {
        //回车执行查询
        $("#queryButton").click();
      }
    });
    if (window.isStandAlone) {
      ipcRenderer.on("DroppedFiles", (event, filePaths) => {
        // filePaths数组中包含图片类型(区分大小写)和其他类型区分开
        this.picturePaths = [];
        this.otherPaths = [];
        // filePaths.forEach((item) => {
        //   if (item.endsWith(".png") || item.endsWith(".jpg") || item.endsWith(".jpeg") || item.endsWith(".PNG") || item.endsWith(".JPG") || item.endsWith(".JPEG")) {
        //     this.picturePaths.push(item);
        //   } else if (item.endsWith(".kml") || item.endsWith(".kmz") || item.endsWith(".czml") || item.endsWith(".geojson") || item.endsWith(".shp") || item.endsWith(".tab") || item.endsWith(".csv") || item.endsWith(".mif") || item.endsWith(".clt") || item.endsWith(".pak") || item.endsWith(".jct") || item.endsWith(".terrain") || item.endsWith(".bim") || item.endsWith(".json")) {
        //     this.otherPaths.push(item);
        //   } else {
        //     this.$message.error("不支持的文件类型！");
        //   }
        // });
        filePaths.forEach((item) => {
          item = item.replace(/\\/g, "/");
          // 使用正则表达式进行不区分大小写的匹配
          if (/\.(png|jpg|jpeg)$/i.test(item)) {
            this.picturePaths.push(item);
          } else if (/\.(kml|kmz|czml|geojson|shp|tab|csv|mif|clt|pak|jct|terrain|bim|json|mbtiles)$/i.test(item)) {
            this.otherPaths.push(item);
          } else {
            this.$message.error("不支持的文件类型！");
          }
        });
        if (this.picturePaths.length > 0) {
          this.dialogVisible = true;
        }
        if (this.otherPaths.length > 0) {
          this.addResource(this.otherPaths);
        }
      });
    }
  },
  methods: {
    // 
    cancel() {
      YJ.Global.splitScreen.setActiveId([]);
    },
    // 关闭dialog
    closeDialog() {
      this.dialogVisible = false;
    },
    // 确认选择
    confirmType() {
      this.dialogVisible = false;
      if (this.radio == '全景') {
        this.panoramaFun(this.picturePaths);
      } else {
        this.addPictureFun(this.picturePaths);
      }
    },
    // 全景定位
    panoramaFun(paths) {
      let p_id = getKeyOfSelectedNode(this.$parent.treeObj, "source_id");
      let source_id = this.$md5(new Date().getTime() + "全景图片");
      const billboard = {
        image: `http://localhost:${window.staticPort}/GEMarker/vr.png`,
        defaultImage: "2",
        show: true,
        scale: 1,
      };
      let DbOption = {
        source_id,
        source_name: "全景图片",
        source_type: "vr",
        p_id,
      };
      addPanorama(
        { list: paths, p_id: DbOption.p_id, billboard: billboard },
        (res) => {
          if (res.whout_list.length > 0) {
            let msg = "";
            let arr = [];
            if (res.whout_list.length > 5) {
              arr = res.whout_list.slice(0, 5);
            } else {
              arr = res.whout_list;
            }

            arr.forEach((item) => {
              msg = msg + item + " ";
            });
            this.$message.warning(msg + "照片已存在或者坐标信息异常！");
          } else {
            this.$message.success("导入成功！");
          }
          res.list.forEach((item) => {
            let entity = renderPicture(item);
            entity.flyTo();
            cusAddNodes(this.$parent.treeObj, DbOption.p_id, [item]);
          });
        }
      );
    },
    // 图片定位
    addPictureFun(paths) {
      let p_id = getKeyOfSelectedNode(this.$parent.treeObj, "source_id");
      // if (selectedNode) {
      let source_id = this.$md5(new Date().getTime() + "图片定位");
      let DbOption = {
        source_id,
        source_name: "图片定位",
        source_type: "picture",
        p_id,
      };
      const billboard = {
        image: `http://localhost:${window.staticPort}/GEMarker/picture.png`,
        defaultImage: "1",
        show: true,
        scale: 1,
      };
      console.log("图片定位", billboard.image);
      addPicture(
        { list: paths, p_id: DbOption.p_id, billboard: billboard },
        (res) => {
          console.log("res.list", res);

          if (res.whout_list.length > 0) {
            let msg = "";
            let arr = [];
            if (res.whout_list.length > 5) {
              arr = res.whout_list.slice(0, 5);
            } else {
              arr = res.whout_list;
            }

            arr.forEach((item) => {
              msg = msg + item + " ";
            });
            this.$message.warning(msg + "照片已存在或者坐标信息异常！");
          } else {
            this.$message.success("导入成功！");
          }
          console.log("res.list", res.list);
          res.list.forEach((item) => {
            let entity = renderPicture(item);
            entity.flyTo();
            cusAddNodes(this.$parent.treeObj, DbOption.p_id, [item]);
          });
        }
      )
      // .catch((err) => {
      //   this.$message.error("导入失败！", err);
      // });
    },
    getLastPathComponent(path, extensionsToRemove = []) {
      // 处理路径分隔符
      const normalizedPath = path.replace(/\\/g, '/');
      const lastComponent = normalizedPath.split('/').pop();

      // 如果没有提供需要移除的后缀列表，直接返回原始名称
      if (extensionsToRemove.length === 0) return lastComponent;

      // 检查是否匹配任何需要移除的后缀
      for (const ext of extensionsToRemove) {
        const extWithDot = ext.startsWith('.') ? ext : `.${ext}`;
        if (lastComponent.endsWith(extWithDot)) {
          return lastComponent.slice(0, -extWithDot.length);
        }
      }

      return lastComponent;
    },

    // 添加资源
    addResource(filePaths) {
      let p_id = getKeyOfSelectedNode(this.$parent.treeObj, "source_id");
      filePaths.forEach((item) => {
        console.log('item', item);
        let name = this.getLastPathComponent(item, ['clt', 'json', 'pak', 'kml', 'kmz', 'shp', 'geojson', 'geoJson', 'czml', 'jct', 'mif', 'tab', 'csv', 'mbtiles']);
        console.log("name", name);
        let source_type = "layer";
        if (item.endsWith(".clt") || item.endsWith(".json")) {
          source_type = "tileset";
        } else if (item.endsWith(".pak")) {
          source_type = "Terrain";
        } else if (item.endsWith(".kml") || item.endsWith(".kmz")) {
          source_type = "kml";
        } else if (item.endsWith(".shp")) {
          source_type = "shp";
        } else if (item.endsWith(".geojson") || item.endsWith(".geoJson")) {
          source_type = "geojson";
        } else if (item.endsWith(".czml")) {
          source_type = "czml";
        } else if (item.endsWith(".jct")) {
          source_type = "bim";
        } else if (item.endsWith(".mif")) {
          source_type = "shp";
        } else if (item.endsWith(".tab")) {
          source_type = "shp";
        } else if (item.endsWith(".csv")) {
          source_type = "csv";
        }
        let params = {
          source_name: name,
          source_type,
          source_id: this.$md5(item),
          source_path: item,
          p_id,
        };
        console.log("params1", params);
        let node = getNodeData(params, {});
        console.log("node", node);
        if (source_type == "bim") {
          this.addBIM(item);
          return;
        }
        if (["shp", "tab", "mif", "kml", "kmz"].includes(source_type)) {
          if (typeof node.detail == "string")
            node.detail = JSON.parse(node.detail);
          node.detail.richText = {};
        }
        let callback = (source_id, tileset) => {
          window._entityMap.set(source_id, tileset);
          tileset.flyTo();
        };
        console.log("addSource", node);
        addSource(node).then(
          (res) => {
            console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~", res);
            /*   if (item.endsWith(".pak") && res.data.tms.url) {
                 node.source_type = "layer"
               }*/
            let key = "";
            if (!["geojson"].includes(node.source_type) && res.data.type) {
              node.source_type = res.data.type;
              switch (res.data.type) {
                case "layer":
                  key = "tms";
                  break;
                case "tileset":
                  key = "tile_set";
                  break;
                case "terrain":
                  key = "terrain";
                  break;
                default:
                  break;
              }
            }
            // if(node.source_type =='Terrain'&&)
            // if (!["shp", "csv", 'kml', 'tab', 'mif', 'geojson', 'pak', "Terrain"].includes(node.source_type)) {

            // }
            if (key) {
              node.source_path = res.data[key].url;
            }
            source_type = node.source_type;
            cusAddNodes(this.$parent.treeObj, p_id, [node]);
            if (source_type == "shp") {
              renderShp(node);
            } else if (source_type == "mif") {
              renderShp(node);
            } else if (source_type == "csv") {
              renderShp(node);
            } else if (source_type == "tab") {
              renderShp(node);
            } else if (source_type == "geojson") {
              renderGeojson(node);
            } else if (source_type == "czml") {
              renderCzml(node);
            } else if (source_type == "kml") {
              renderShp(node);
            } else if (source_type == "layer") {
              renderLayer(node, true);
            } else if (source_type == "tileset" || source_type == "json") {
              renderBim(node, true);
            } else if (source_type == "xlsx") {
              node.detail = res.data.xlsx;
              renderXLSX(node);
            } else {
              renderTerrain(node);
            }
          },
          (err) => {
            console.log(err);
            if (err.code == 50) {
              let source_id = err.message.split(":")[1];
              let node = this.$parent.treeObj.getNodeByParam(
                "source_id",
                source_id,
                null
              );
              this.$parent.treeObj.selectNode(node);
            }
          }
        );
      });
    },
    // 切换清空input值，使用获取当前input节点，然后清空值
    selectChange(val) {
      let input = document.getElementById('keyword');
      treeSearchCb('');
      if (val == "poi") {
        this.searchKey = '';
        input.value = '';
      } else {
        this.searchKey = '';
        this.poiOptions = [];
        this.value = '';
        input.value = '';
      }
      if (window.searchPlaceEntity) {
        window.searchPlaceEntity.remove();
      }
    },
    // 

    //鼠标移出关闭二级菜单
    treeMouseOver() {
      this.$changeComponentShow(".rightMenu", false);
    },
    locationChange() {
      let item = this.poiOptions.find((item) => item.address == this.value);
      let id = new YJ.Tools().randomString();
      this.$nextTick(() => {
        this.$refs.select1.blur();
      });
      if (window.searchPlaceMap === undefined) {
        window.searchPlaceMap = new Map();
      }
      if (window.searchPlaceMap.size) {
        window.searchPlaceMap.forEach((item) => {
          item.remove();
        });
        window.searchPlaceMap.clear();
      }
      let textLenght = item.search_key.length;
      if (textLenght > 17) {
        item.search_key = item.search_key.match(/.{1,17}/g).join('\n');
      }
      // let sg84 = YJ.Global.CoordTransform.GCJ02ToWGS84(item.lng, item.lat);
      let params = {
        id,
        positions: { lng: item.lng, lat: item.lat, alt: item.alt ? item.alt : 0 },
        billboard: {
          show: true,
          image:
            "http://localhost:" +
            window.staticPort +
            "/" +
            "GEMarker1/A-ablu-blank.png",
          width: 320,
          height: 360,
        },
        show: true,
        label: {
          show: true,
          text: item.search_key,
          fontSize: 80,
          color: "#FFF200FF",
          scale: 3,
        },
      };
      let entity = new YJ.Obj.BillboardObject(window.Earth1, params);
      entity.labelFontSize = 75;
      entity.billboardScale = 9;
      entity.far = 42000000;
      entity.entity.billboard.heightReference = 1;
      entity.entity.label.heightReference = 1;
      window.searchPlaceEntity = entity
      entity.picking = false
      // 获取entity

      console.log("entity", entity);
      // entity.entity.label.eyeOffset = new Cesium.Cartesian3(0, 0, -1000);
      // entity.entity.billboard.eyeOffset = new Cesium.Cartesian3(0, 0, -1000)
      window.Earth1.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
          Number(params.positions.lng),
          Number(params.positions.lat),
          14000
        ),
        duration: 3,
        orientation: {
          heading: 0,
          pitch: (-85 * Math.PI) / 180,
          roll: 0,
        },
      });
      window.searchPlaceMap.set(id, entity);
    },
    clearResult() {
      let string = $("#keyword")
        .val()
        .trim();
      if (string == "") {
        let arr = [];
        if (window.searchPlaceMap) {
          arr = Array.from(window.searchPlaceMap);
        }
        if (arr.length) {
          window.searchPlaceMap.get(arr[0][0]).remove();
          window.searchPlaceMap.clear();
        }
        this.poiOptions = [];
        this.value = "";
        window.treeSearchCb();
      }
    },
    searchPlace: debounce(function () {
      if (this.select == "poi") {
        this.poiOptions = [];
        this.value = "";
        let way = localStorage.getItem("searchWay");
        if (way == "net") {
          // treeSearchCb("");
          this.loading = true;
          const doSearch = () => {
            this.mapModule.plugin(
              ["AMap.PlaceSearch", "AMap.AutoComplete"],
              () => {
                this.placeSearch = new AMap.PlaceSearch();
                try {
                  this.placeSearch.search(
                    $("#keyword").val().trim(),
                    (status, result) => {
                      if (result.info && result.info === "OK") {
                        let arr = [];
                        result.poiList.pois.forEach((item) => {
                          const location = YJ.CoordTransform.GCJ02ToWGS84(
                            item.location.lng,
                            item.location.lat
                          );
                          arr.push({
                            address: item.name,
                            search_key: item.name,
                            search_type: item.id,
                            lat: location[1],
                            lng: location[0],
                          });
                        });
                        this.poiOptions = arr;
                        if (this.poiOptions.length) {
                          this.loading = false;
                          this.$refs.select1.toggleMenu();
                        }
                      } else if (status == "error" || result === 'INVALID_PARAMS') {
                        this.$message.error("请填写正确的搜索关键字");
                        this.loading = false;
                      } else if (status == "error") {
                        this.$message.error("网络异常");
                        this.loading = false;
                      } else {
                        this.$message.warning("没有搜索结果");
                        this.loading = false;
                      }
                    }
                  );
                } catch (e) {
                  this.loading = false;
                }
              }
            );
          };
          if (!this.mapModule) {
            this.loadAmp((err) => {
              if (err) {
                this.$message.error("无网络连接，请检查网络");
                this.loading = false;
              } else {
                doSearch();
              }
            });
          } else {
            doSearch();
          }
        } else if (way == "poi") {
          let string = $("#keyword").val().trim();
          if (string)
            queryPOI({ key: string }, (res) => {
              this.poiOptions = res.list;
              if (this.poiOptions.length) {
                this.$refs.select1.toggleMenu();
              }
              this.loading = false;
            });
          else this.$message.warning("请输入搜索关键字");
        }
      } else {
        this.poiOptions = [];
        this.value = "";
        treeSearchCb();
      }
    }, 500),
    loadAmp(cb = () => { }) {
      // console.log("loadAmp", AMapLoader);
      AMapLoader.reset();
      AMapLoader.load({
        key: this.key, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [],
      })
        .then((AMap) => {
          // console.log("AMap", AMap);
          this.mapModule = AMap;
          this.isOnline = true;
          cb();
        })
        .catch((err) => {
          // console.log("amp:err", err);
          this.loading = false;
          this.isOnline = false;
          cb(err ? "err" : "");
        });
    },
    /**
     * 获取树型节点数组
     * @returns {Promise}
     */
    getList() {
      let keycode = localStorage.getItem("AMapKey");
      window._AMapSecurityConfig = {
        securityJsCode:
          (keycode && keycode.split("|")[1]) ||
          "d88fcc689d1aa99866b2d0d83fd36677",
      };
      // console.log("获取图层指挥舱数据");
      //初始化高德地图
      let arr = [
        "ArcgisWXImagery",
        "ArcgisBLUEImagery",
        "ArcgisLWImagery",
        "GDLWImagery",
        "GDWXImagery",
        "GDSLImagery",
        "layer",
      ];
      let that = this;
      return new Promise((resolve, reject) => {
        get_source_list()
          .then((response) => {
            if ([0, 200].includes(response.code)) {
              let data = JSON.parse(JSON.stringify(response.data.list || []));
              let layer = [];
              window.treeSource = data.length;
              data.sort(this.keysort("tree_index"));
              //将模型压平
              window.pressModelMap = new Map();
              data.forEach((node) => {
                if (node.source_type == "pressModel") {
                  // console.log("pressModel", node);
                  let obj = JSON.parse(JSON.stringify(node.detail));
                  if (typeof node.detail == "string") {
                    obj = JSON.parse(node.detail);
                  }
                  console.log('pressModelMap', obj);

                  pressModelMap.set(node.source_id + "_" + obj.model_id, node);
                }
              });
              //给node设置树形如icon；是否允许添加子节点，以及右键菜单
              data.forEach((node) => {
                if (arr.includes(node.source_type)) {
                  layer.push(node);
                  return;
                }
                if (node.detail) node.detail = JSON.parse(node.detail);
                //设置树上图标，并渲染到地球上
                this.setOptions(node);
              });
              // layer排序
              layer.sort((a, b) => {
                return a.layer_index - b.layer_index;
              });
              layer.forEach(async (node) => {
                if (node.detail) node.detail = JSON.parse(node.detail);
                //设置树上图标，并渲染到地球上
                await this.setOptions(node);
              });
              console.log('datatree', layer);

              // this.$removeChanel("renderNode")
              this.treeObj = $.fn.zTree.init(
                $(`#treeDemo`),
                this.setting,
                data
              );
              window.treeObj = this.treeObj;
              window.AllNodes = this.treeObj.getNodes()
              console.log('window.AllNodes', window.AllNodes);

              window.newFuzzySearch(
                `treeDemo`,
                "#keyword",
                ["sonShp", "gdbShp"],
                true,
                "#queryButton"
              ); /**/

              this.$sendChanel("getTreeObj", this.treeObj);
              //更新二维图层的层级
              // console.log("this.setting", this.setting);
              // this.treeObj
              if (window.Earth1) {
                YJ.Global.MouseRightMenu(
                  window.Earth1,
                  true,
                  (text, object) => {

                    switch (text) {
                      case "textBox":
                        this.addTextBox(object.position);
                        break;
                      case "rotateAround":
                        YJ.Global.rotateAround(window.Earth1, object.position);
                        break;
                      case "attribute":
                        if (object.parentId) {
                          // that.showAttr(object.id)
                          shpTotal(null, object.id)
                        } else {
                          that.getNode(object.id);
                        }
                        break;
                    }
                  }
                );
              }

              resolve();
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    // 添加文本框
    addTextBox(position) {
      // this.$sendChanel("textTetlie", "标注");
      // this.$changeComponentShow(".textModelBox", true);
      // this.$recvChanel("textModelContent", (data) => {
      //   console.log(data.text);
        let that = this;
        let source_id = that.$md5(new Date().getTime() + "文本框");
        let textBox = {
          id: source_id,
          position: position,
          text: '',
          show: true,
        };
        let DbOption = {
          source_id,
          source_name: '文本框',
          source_type: "textBox",
          p_id: findParentId(that.treeObj),
        };
        let detailOption = JSON.parse(JSON.stringify(textBox));
        let node = getNodeData(DbOption, detailOption);
        renderTextBox(node);
        addSource(node).then((res) => {
          if ([0, 200].includes(res.code)) {
            cusAddNodes(that.$parent.treeObj, DbOption.p_id, [node]);
          }
        });
      // })
    },

    // 获取当前得node
    getNode(source_id) {
      if (!source_id) {
        return
      }
      // console.log("source_id", source_id);
      let node = this.treeObj.getNodeByParam("source_id", source_id, null);
      console.log('node', node);
      this.rightMenus.edit.callback(node);
    },
    isShowTree: debounce(function () {
      if (this.isShow) {
        this.hideen();
      } else {
        this.show();
      }
    }),
    hideen() {
      const TreeIndex = $(".TreeIndex")[0];
      const animate = () => {
        if (this.left <= -18) {
          const img = $(".arrowTree img")[0];
          img.classList.add("rotate");
          this.isShow = false;
          return;
        }
        TreeIndex.style.right = this.left - 1 + "%";
        this.left = this.left - 1;
        requestAnimationFrame(animate);
      };
      animate();
    },
    show() {
      const TreeIndex = $(".TreeIndex")[0];
      const animate = () => {
        if (this.left >= 0) {
          const img = $(".arrowTree img")[0];
          img.classList.remove("rotate");
          this.isShow = true;
          return;
        }
        TreeIndex.style.right = this.left + 1 + "%";
        this.left = this.left + 1;
        requestAnimationFrame(animate);
      };
      animate();
    },
  },

};
</script>

<style lang="scss" scoped>
.rotate {
  transform: rotateY(180deg);
  transform-style: preserve-3d;
}

// .ztree li a .curSelectedNode {
//   background-color: transparent !important;
//   border: none !important;
//   padding-top: 0;
//   opacity: 1;
// }

.TreeIndex {
  color: #ffffff;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  //width: 18vw; //400
  //height: 65vh; //660
  //width: 355px;
  //height: 648px;
  width: 18vw;
  height: 33vw;

  svg {
    width: 100%;
    height: 100%;
  }

  .arrowTree {
    position: absolute;
    top: 40%;
    left: -70px;

    img {
      height: 50px;
      width: 50px;
      transition: transform 0.5s ease-in-out;
    }
  }

  .box1 {
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 2.2em;
    padding-bottom: 4.4em;
    //position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;

    .title {
      width: 10vw; //400
      height: 4vh;
      position: relative;
      //border: 1px solid red;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      font-size: 1.2em;
      padding-bottom: 0.1em;

      .border {
        align-self: flex-end;
        width: 85%;
        border: 1px solid;
        border-color: var(--svg-baseLineColor);
      }

      span {
        width: 4vh !important;
        display: inline-block;
      }
    }

    .ztreeBox {
      //min-height: 43vh;
      min-height: 22vw;
      overflow-y: auto;
      overflow-x: hidden;

      #treeDemo {
        height: 100%;
      }
    }

    .search {
      //border: 1px solid #007bff;
      flex: auto;
      padding: 0 1vw 0 0.5vw;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .searchUp {
        display: flex;
        margin-bottom: 0.5vh;

        input {
          font-size: 14px;
          flex: auto;
          border-radius: 0;
          -webkit-appearance: none;
          background-color: #fff;
          background-image: none;
          //border-radius: 4px;
          box-sizing: border-box;
          color: #606266;
          display: inline-block;
          height: 32px;
          line-height: 32px;
          outline: 0;
          padding: 0 15px;
          //margin-right: 0.5vw;
          border: none;
        }

        input:first-child {
          border-radius: 17px 0 0 22px;
        }
      }

      .el-select {
        width: 100%;
      }
    }
  }
}

.el-dialog__header {
  padding: 10px !important;
}

.el-dialog__body {
  padding: 10px 20px !important;
}

.el-dialog__footer {
  padding: 10px !important;
}
</style>