<template>
|
<div class="synthesis">
|
<div class="lefIcon">
|
<ul>
|
<li
|
v-for="item in showMenuList"
|
:class="{ lefMenuActive: showMenuFlag == item.id }"
|
>
|
<div class="menuDiv" :title="item.name" @click="setMenuChange(item)">
|
<div class="menuImage" :class="item.class"></div>
|
</div>
|
</li>
|
</ul>
|
</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: 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,
|
},
|
],
|
};
|
},
|
watch: {},
|
created() {},
|
methods: {
|
//左侧菜单滑动显隐
|
setMenuChange(res) {
|
switch (res.id) {
|
case 1:
|
this.openStatus = !this.openStatus;
|
break;
|
default: {
|
this.openStatus = true;
|
this.$bus.$emit('setChangeTwoMenu', res.id - 2);
|
this.showMenuFlag = res.id;
|
}
|
}
|
},
|
//初始化菜单授权
|
getPermsMenu() {
|
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.$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%;
|
background: #353535;
|
position: absolute;
|
z-index: 30;
|
|
.menuDiv {
|
width: 60px;
|
height: 60px;
|
border: 1px solid rgba(53, 53, 53, 0);
|
|
.menuImage {
|
width: 26px;
|
height: 26px;
|
margin-left: 17px;
|
margin-top: 17px;
|
}
|
|
.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/图层 8 拷贝 2.png')
|
no-repeat center;
|
}
|
.menu_img5 {
|
background: url('../../assets/img/synthesis/矢量智能对象 拷贝 3.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;
|
}
|
}
|
// 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: 300px;
|
height: auto;
|
transition: width 2s;
|
}
|
|
.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;
|
}
|
}
|
}
|
</style>
|
