<template>
|
<div
|
class="synthesis"
|
v-loading="$store.state.loading"
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
>
|
<div class="lefIcon">
|
<div
|
v-for="item in showMenuList"
|
class="MenuIcon"
|
:class="{ lefMenuActive: showMenuFlag == item.id }"
|
>
|
<div class="menuDiv" :title="item.name" @click="setMenuChange(item)">
|
<div class="menuImage" :class="item.class"></div>
|
</div>
|
</div>
|
<div
|
class="MenuIcon menu-class"
|
:class="{ lefMenuActive: showMenuFlag == menuItem.id }"
|
>
|
<div
|
class="menuDiv"
|
:title="menuItem.name"
|
@click="setMenuChange(menuItem)"
|
>
|
<div class="menuImage" :class="menuItem.class"></div>
|
</div>
|
</div>
|
</div>
|
<div class="rightContent">
|
<div class="left_main" :class="{ left_main_show: !openStatus }">
|
<div class="right_Map">
|
<left-menu></left-menu>
|
</div>
|
</div>
|
<div class="right_main">
|
<div class="right_Map">
|
<mapdiv></mapdiv>
|
</div>
|
</div>
|
</div>
|
<maplayer ref="maplayer" />
|
</div>
|
</template>
|
|
<script>
|
import { getPerms } from "../../api/api"
|
import mapdiv from "../../components/MapDiv.vue"
|
import leftMenu from "./LeftMenu.vue"
|
import maplayer from "../Tools/maplayer.vue"
|
export default {
|
components: {
|
mapdiv,
|
leftMenu,
|
maplayer,
|
},
|
data() {
|
return {
|
showMenuFlag: null,
|
openStatus: false,
|
isActive: false,
|
showMenuList: [],
|
menuOption: [
|
// {
|
// id: 1,
|
// name: "菜单",
|
// class: "menu_img1",
|
// show: true,
|
// },
|
{
|
id: 2,
|
name: "图层",
|
class: "menu_img2",
|
show: true,
|
// show: false,
|
},
|
// {
|
// id: 3,
|
// name: "视图",
|
// class: "menu_img3",
|
// show: false,
|
// },
|
{
|
id: 4,
|
name: "漫游",
|
class: "menu_img4",
|
show: false,
|
},
|
{
|
id: 5,
|
name: "分析",
|
class: "menu_img5",
|
show: false,
|
},
|
{
|
id: 6,
|
name: "查询",
|
class: "menu_img6",
|
show: false,
|
},
|
{
|
id: 7,
|
name: "定位",
|
class: "menu_img7",
|
show: false,
|
},
|
{
|
id: 8,
|
name: "测量",
|
class: "menu_img8",
|
show: false,
|
},
|
{
|
id: 9,
|
name: "标绘",
|
class: "menu_img9",
|
show: false,
|
},
|
{
|
id: 10,
|
name: "场景",
|
class: "menu_img10",
|
show: false,
|
},
|
],
|
menuItem: {
|
id: 1,
|
name: "折叠",
|
class: "menu_img1",
|
show: true,
|
},
|
}
|
},
|
watch: {},
|
|
methods: {
|
//左侧菜单滑动显隐
|
setMenuChange(res) {
|
if (res.id == this.showMenuFlag) {
|
return
|
}
|
//清除查询弹窗
|
this.$store.state.mapMenuBoolean = false
|
this.$store.state.mapMenuBoxFlag = ""
|
//清除分析模块的全局变量
|
ClearAlayse()
|
switch (res.id) {
|
case 1:
|
if (this.showMenuFlag == null) return
|
this.openStatus = !this.openStatus
|
// 点击左侧菜单是调整
|
setTimeout(() => {
|
window.map.updateSize()
|
}, 1000)
|
break
|
case 10:
|
if (this.showMenuFlag == null) {
|
this.openStatus = false
|
}
|
this.$bus.$emit("setChangeTwoMenu", res.id - 2)
|
break
|
default: {
|
this.openStatus = true
|
this.$bus.$emit("setChangeTwoMenu", res.id - 2)
|
this.showMenuFlag = res.id
|
}
|
}
|
},
|
//初始化菜单授权
|
async getPermsMenu() {
|
if (
|
this.$store.state.currentPerms == "" ||
|
this.$store.state.currentPerms != "/comprehensive"
|
) {
|
this.$store.state.currentPerms = "/comprehensive"
|
}
|
if (this.$store.state.permsEntity.length == 0) {
|
const data = await getPerms()
|
this.$store.state.permsEntity = data.result
|
}
|
var val = this.$store.state.currentPerms
|
var permsEntity = this.$store.state.permsEntity
|
|
for (var i = 0; i < permsEntity.length; i++) {
|
if (permsEntity[i].perms == val) {
|
this.showMenuChange(permsEntity[i], permsEntity)
|
}
|
}
|
for (var i in this.menuOption) {
|
if (this.menuOption[i].show != false) {
|
this.showMenuList.push(this.menuOption[i])
|
}
|
}
|
//初始化二级菜单
|
if (this.showMenuList.length > 1) {
|
var index = this.showMenuList[1].id
|
this.$bus.$emit("setChangeTwoMenu", index - 2)
|
}
|
},
|
showMenuChange(res, result) {
|
var permsId = res.id
|
this.$store.state.syntiesis.menu = res.id
|
for (var i = 0; i < result.length; i++) {
|
if (result[i].pid == permsId) {
|
this.showMenuStatus(result[i])
|
}
|
}
|
},
|
showMenuStatus(res) {
|
var std = []
|
std.push(this.menuOption[0])
|
for (var i = 1; i < this.menuOption.length; i++) {
|
if (this.menuOption[i].name == res.cnName) {
|
this.menuOption[i].show = true
|
}
|
}
|
},
|
},
|
mounted() {
|
// this.$bus.$emit('showLeftMenu', true);
|
window.sgworld.navControl("nav", true)
|
this.$store.state.mapMenuBoolean = false
|
this.$store.state.mapMenuBoxFlag = null
|
this.$store.state.mapPopBoolean = false
|
this.$store.state.mapPopBoxFlag = null
|
},
|
//初始化菜单授权
|
created() {
|
this.getPermsMenu()
|
},
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.synthesis {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
.lefIcon {
|
width: 63px;
|
height: 100%;
|
overflow-y: auto;
|
background: #3b4d6e;
|
position: absolute;
|
z-index: 30;
|
.MenuIcon {
|
width: calc(100% - 2px);
|
height: 50px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border: 1px solid rgba(53, 53, 53, 0);
|
}
|
.menuDiv {
|
width: 60px;
|
height: 50px;
|
border: 1px solid rgba(53, 53, 53, 0);
|
|
.menuImage {
|
width: 40px;
|
height: 40px;
|
margin-left: 8px;
|
margin-top: 6px;
|
}
|
|
.menu_img1 {
|
background: url("../../assets/img/synthesis/系统菜单.png") no-repeat
|
center;
|
}
|
.menu_img2 {
|
background: url("../../assets/img/synthesis/矩形 8 拷贝 2.png")
|
no-repeat center;
|
}
|
.menu_img3 {
|
background: url("../../assets/img/synthesis/图层 6 拷贝.png") no-repeat
|
center;
|
}
|
.menu_img4 {
|
background: url("../../assets/img/synthesis/图层 3.png") no-repeat
|
center;
|
}
|
.menu_img5 {
|
background: url("../../assets/img/synthesis/图层 4.png") no-repeat
|
center;
|
}
|
.menu_img6 {
|
background: url("../../assets/img/synthesis/图层 9 拷贝 4.png")
|
no-repeat center;
|
}
|
.menu_img7 {
|
background: url("../../assets/img/synthesis/图层 7 拷贝 5.png")
|
no-repeat center;
|
}
|
.menu_img8 {
|
background: url("../../assets/img/synthesis/图层 5 拷贝 6.png")
|
no-repeat center;
|
}
|
.menu_img9 {
|
background: url("../../assets/img/synthesis/矩形 8 拷贝 11.png")
|
no-repeat center;
|
}
|
.menu_img10 {
|
background: url("../../assets/img/synthesis/场景打开1.png") no-repeat
|
center;
|
}
|
}
|
// li {
|
// background: rgba(53, 53, 53, 0);
|
// }
|
.lefMenuActive {
|
background: linear-gradient(180deg, #002992, #080472);
|
}
|
li:hover {
|
background: linear-gradient(180deg, #002992, #080472);
|
}
|
}
|
|
.rightContent {
|
width: calc(100% - 63px);
|
height: 100%;
|
float: right;
|
display: flex;
|
.left_main {
|
margin: 0;
|
//width: 255px;
|
width: 140px;
|
// padding-bottom: 10px;
|
height: 100%;
|
|
overflow-y: auto;
|
//height: auto;
|
transition: width 1s;
|
// background: #f4f8ff;
|
}
|
|
.right_main {
|
flex: 1;
|
height: 100%;
|
position: relative;
|
}
|
.right_Map {
|
width: 100%;
|
height: 100%;
|
}
|
.left_main_show {
|
width: 0px;
|
}
|
.bottomChageLayer {
|
height: 40px;
|
width: 60px;
|
z-index: 40;
|
position: absolute;
|
flex-direction: column;
|
justify-content: space-between;
|
box-shadow: 3px 3px 6px #666;
|
border: 1px solid rgba(204, 204, 204, 0.76);
|
border-radius: 5px;
|
cursor: pointer;
|
bottom: 1%;
|
left: 1%;
|
}
|
.bottomChageLayer:hover {
|
border: 1px solid #409eff;
|
}
|
.active {
|
width: 100%;
|
height: 100%;
|
background: url("../../assets/img/Layer/imgLayer2.png") no-repeat center;
|
position: absolute;
|
background-size: 100% 100%;
|
border-radius: 5px;
|
}
|
.menuLayer {
|
width: 100%;
|
height: 100%;
|
background: url("../../assets/img/Layer/imgLayer1.png") no-repeat center;
|
position: absolute;
|
background-size: 100% 100%;
|
border-radius: 5px;
|
}
|
}
|
|
.menu-class {
|
position: absolute;
|
bottom: 10px;
|
left: 0;
|
}
|
/deep/.el-loading-spinner i {
|
color: #1890ff;
|
}
|
}
|
</style>
|
