北京经济技术开发区经开区虚拟城市项目-【前端】-Web
lixuliang
2025-02-10 9c2cad000f9279969e76bfc206a7acbb8acc9079
src/components/left/leftmenu.vue
@@ -1,9 +1,6 @@
<template>
  <div
    @click="showLeftMenu"
    :class="{ leftmenu: !isShowLeftPanel, leftmenu_active: isShowLeftPanel }"
    class="leftmenustyle"
  >
  <div @click="showLeftMenu" :class="{ leftmenu: !isShowLeftPanel, leftmenu_active: isShowLeftPanel }"
    class="leftmenustyle">
    <span class="closeLeftMenu" v-if="isShowLeftPanel" @click.stop="hideLeftMenu">×</span>
    <img class="openLeftMenu" v-else src="@/assets/img/left/souselist4.png" />
    <div class="layerTreeContainer" v-show="isShowLeftPanel">
@@ -22,24 +19,21 @@
        <!-- <div @click="setTreeDataChange(1)">业务</div>
        <div @click="setTreeDataChange(2)">业务</div>-->
      </div>
      <hr />
      <!-- <div style="padding: 5px">
        <el-button size="small" @click="setTreeDataChange(1)">图层1</el-button>
        <el-button size="small" @click="setTreeDataChange(2)">图层2</el-button>
      </div>-->
      <div class="layerTree">
        <el-tree
          :data="treeData"
          node-key="id"
          ref="tree"
          :default-checked-keys="arr"
          style="min-width: 160px"
          show-checkbox
          :render-content="renderContent"
          :default-expanded-keys="defaultExpanded"
          @check="check"
          :filter-node-method="filterNode"
        ></el-tree>
        <el-tree :data="treeData" node-key="id" ref="tree" :default-checked-keys="arr" style="min-width: 160px"
          show-checkbox :render-content="renderContent" :default-expanded-keys="defaultExpanded" @check="check"
          @node-click="handleNodeDoubleClick" :filter-node-method="filterNode"></el-tree>
      </div>
      <hr />
      <div class="canelAllCheck">
        <el-link type="info" @click="setClearAllCheck()" style="color:white;font-size: 14px;">取消全部所选</el-link>
      </div>
    </div>
  </div>
@@ -58,6 +52,7 @@
import { getmenu } from "../../api/api";
import keys from "@/assets/poiKeys1";
import store from "@/utils/store";
let colorTool;
let projectTreeData = [];
@@ -847,6 +842,42 @@
      if (treeNode && treeNode.data) {
        this.setVisiable(treeNode.data, isCheck);
      }
    },
    handleNodeDoubleClick(data, node, event) {
      if (data.flyTo) {
        const coord = data.flyTo;
        sgworld.Navigate.flyToPointsInterest({
          destination: Cesium.Cartesian3.fromDegrees(
            coord[0],
            coord[1],
            coord[2]
          ),
          orientation: {
            heading: Cesium.Math.toRadians(coord[3] ? coord[3] : 0),
            pitch: Cesium.Math.toRadians(coord[4] ? coord[4] : -90),
            roll: Cesium.Math.toRadians(0.0)
          },
          duration: 2 //飞行时间8s
        });
      }
    },
    setClearAllCheck() {
      // let treeNode = this.$refs.tree.getNode(1);
      // if (treeNode && treeNode.data) {
      // this.setVisiable(treeNode, false);
      // }
      const nodes = this.$refs.tree.getCheckedNodes();
      const ids = ["18B25A94", "47EC9636"];
      const checkId = [];
      nodes.map(item => {
        if (ids.indexOf(item.id) > -1) {
          checkId.push(item.id)
        } else {
          this.setVisiable(item, false)
        }
      })
      this.$refs.tree.setCheckedKeys(checkId);
    },
    check(treeNode, data) {
      //关闭右侧信息弹窗
@@ -3028,12 +3059,24 @@
  transition: 1s;
  z-index: 9999;
}
.switchbox {
  margin-top: 5px;
}
.closeLeftMenu:hover {
  cursor: pointer;
  transform: rotateZ(90deg);
}
.canelAllCheck {
  flex: end;
}
.layerTree {
  flex: 1;
  overflow-y: auto;
}
.layerTree .el-tree /deep/ .el-checkbox__inner {
@@ -3067,6 +3110,7 @@
.leftmenu:hover {
  background-image: url("~@/assets/img/new/treeClose-y.png");
}
.leftmenu {
  background-image: url("~@/assets/img/new/treeClose.png");
  background-size: 100% 100%;
@@ -3098,6 +3142,8 @@
  width: 270px;
  height: 550px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* margin: 20px 0; */
}