<template>
|
<div class="themaic">
|
<mapsdk></mapsdk>
|
<top class="title" ref="title"></top>
|
<left
|
class="mapleft"
|
:style="{ width: leftWidth, left: leftWidth == '22%' ? '-19px' : '0' }"
|
ref="mapleft"
|
></left>
|
|
<project-tree class="project-tree" v-if="ProjectreeDisplay"></project-tree>
|
|
<right
|
class="mapright"
|
:style="{ width: rightWidth }"
|
ref="mapright"
|
></right>
|
<bottom class="mapbottom" ref="mapbottom"></bottom>
|
</div>
|
</template>
|
|
<script>
|
import mapsdk from "@/components/Screen/mapsdk.vue"
|
import top from "../../components/Screen/top.vue"
|
import left from "@/components/Screen/left.vue"
|
import right from "../../components/Screen/right.vue"
|
import bottom from "../../components/Screen/bottom.vue"
|
import ProjectTree from "../../components/Screen/ProjectTree.vue"
|
import axios from "axios"
|
export default {
|
components: { mapsdk, top, left, right, bottom, ProjectTree },
|
data() {
|
return {
|
leftWidth: "22%",
|
rightWidth: "22%",
|
leftTree: false,
|
currTree: false,
|
ProjectreeDisplay: false,
|
}
|
},
|
mounted() {},
|
created() {
|
this.$bus.$on("changeTree", key => {
|
this.ProjectreeDisplay = key
|
})
|
},
|
methods: {
|
//修改左侧宽度
|
ChangeWidth(parm) {
|
if (parm == "left") {
|
if (this.leftWidth == "22%") {
|
this.leftWidth = "8px"
|
} else {
|
this.leftWidth = "22%"
|
}
|
}
|
|
if (parm == "leftView" || parm == "leftTree") {
|
this.leftWidth = "22%"
|
this.rightWidth = "22%"
|
}
|
// if (parm == "leftView") {
|
// this.leftTree = false
|
// }
|
// if (parm == "leftTree") {
|
// this.leftTree = true
|
// }
|
|
if (parm == "right") {
|
if (this.rightWidth == "22%") {
|
this.rightWidth = "45px"
|
} else {
|
this.rightWidth = "22%"
|
}
|
}
|
},
|
},
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.themaic {
|
height: 100%;
|
width: 100%;
|
position: absolute;
|
display: flex;
|
}
|
|
.title {
|
position: absolute;
|
top: 0;
|
left: 0;
|
height: 86px;
|
width: 100%;
|
z-index: 999;
|
}
|
|
.mapleft {
|
position: absolute;
|
top: 90px;
|
left: 0px;
|
// width: 20%;
|
height: calc(100% - 180px);
|
z-index: 999;
|
}
|
|
.mapright {
|
position: absolute;
|
top: 90px;
|
right: -20px;
|
// width: 20%;
|
height: calc(100% - 180px);
|
z-index: 999;
|
}
|
|
.mapbottom {
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
height: 90px;
|
width: 100%;
|
z-index: 999;
|
}
|
.project-tree {
|
position: absolute;
|
top: 90px;
|
right: 22%;
|
width: 15%;
|
height: calc(100% - 180px);
|
z-index: 999;
|
}
|
</style>
|
|
<style lang="less">
|
.themaic {
|
.aside-title {
|
box-sizing: border-box;
|
padding-left: 30px;
|
// height: 27px;
|
// line-height: 27px;
|
// background: linear-gradient(0deg, #9cd2ff 0%, #ffffff 100%);
|
font-size: 15px;
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
|
// -webkit-background-clip: text;
|
color: #fff;
|
width: 100%;
|
|
height: 30px;
|
line-height: 30px;
|
background: url(~@/assets/img/Screen/asideTitleBg.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
}
|
}
|
</style>
|
