| | |
| | | <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"> |
| | |
| | | <!-- <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> |
| | |
| | | import { getmenu } from "../../api/api"; |
| | | import keys from "@/assets/poiKeys1"; |
| | | import store from "@/utils/store"; |
| | | |
| | | |
| | | let colorTool; |
| | | let projectTreeData = []; |
| | |
| | | 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) { |
| | | //关闭右侧信息弹窗 |
| | |
| | | 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 { |
| | |
| | | .leftmenu:hover { |
| | | background-image: url("~@/assets/img/new/treeClose-y.png"); |
| | | } |
| | | |
| | | .leftmenu { |
| | | background-image: url("~@/assets/img/new/treeClose.png"); |
| | | background-size: 100% 100%; |
| | |
| | | width: 270px; |
| | | height: 550px; |
| | | overflow: hidden; |
| | | display: flex; |
| | | flex-direction: column; |
| | | /* margin: 20px 0; */ |
| | | } |
| | | |