<template>
|
<div class="content">
|
|
<div class="container"
|
id="moved">
|
<el-menu default-active="2"
|
:unique-opened="true"
|
@select="handleSelect"
|
class="el-menu-vertical-demo">
|
<el-submenu index="1">
|
<template slot="title">
|
<i class="el-icon-location"></i>
|
<span>频谱态势分析</span>
|
</template>
|
<el-menu-item-group>
|
<el-menu-item index="1-1">动态播放</el-menu-item>
|
<el-menu-item index="1-2">态势比对</el-menu-item>
|
<el-menu-item index="1-3">态势分析</el-menu-item>
|
</el-menu-item-group>
|
</el-submenu>
|
<el-submenu index="2">
|
<template slot="title">
|
<i class="el-icon-location"></i>
|
<span>频谱使用评估</span>
|
</template>
|
<el-menu-item-group>
|
<el-menu-item index="2-1">用频合规分析</el-menu-item>
|
<el-menu-item index="2-2">空闲频率资源分析</el-menu-item>
|
<el-menu-item index="2-3">信号覆盖率分析</el-menu-item>
|
<el-menu-item index="2-4">用频密度分析</el-menu-item>
|
<el-menu-item index="2-5">频段占用度分析</el-menu-item>
|
<el-menu-item index="2-6">频谱占用度分析</el-menu-item>
|
</el-menu-item-group>
|
</el-submenu>
|
<el-submenu index="3">
|
<template slot="title">
|
<i class="el-icon-location"></i>
|
<span>覆盖能力评估</span>
|
</template>
|
<el-menu-item-group>
|
<el-menu-item index="3-1">监测网覆盖能力评估</el-menu-item>
|
<el-menu-item index="3-2">监测站覆盖能力评估</el-menu-item>
|
<el-menu-item index="3-3">场强覆盖评估(多选)</el-menu-item>
|
<el-menu-item index="3-4">场强覆盖评估</el-menu-item>
|
</el-menu-item-group>
|
</el-submenu>
|
<el-submenu index="4">
|
<template slot="title">
|
<i class="el-icon-location"></i>
|
<span>数据管理</span>
|
</template>
|
<el-menu-item-group>
|
<el-menu-item index="4-1">测试台站管理</el-menu-item>
|
<el-menu-item index="4-2">监测站管理</el-menu-item>
|
<el-menu-item index="4-3">台站管理</el-menu-item>
|
<el-menu-item index="4-4">移动监测数据回放</el-menu-item>
|
<el-menu-item index="4-5">固定监测数据回放</el-menu-item>
|
</el-menu-item-group>
|
</el-submenu>
|
<el-submenu index="5">
|
<template slot="title">
|
<i class="el-icon-location"></i>
|
<span>报告库</span>
|
</template>
|
<el-menu-item-group>
|
<el-menu-item index="5-1">数据分析报告</el-menu-item>
|
|
</el-menu-item-group>
|
</el-submenu>
|
</el-menu>
|
|
</div>
|
<div class="bot">
|
|
<div :class="istrue ? 'botImg1' : 'botImg'"
|
@mousemove="makebig"
|
@mouseout="makeSmall">
|
<span id="img"
|
@click="changeMap">
|
<span class="mapinner">街道图</span>
|
</span>
|
<span id="img1"
|
@click="changeMap1"
|
:style="move1">
|
<span class="mapinner1">影像图</span>
|
</span>
|
<span id="img2"
|
@click="changeMap2"
|
:style="move2">
|
<span class="mapinner2">地形图</span>
|
</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
let gdMap=null;
|
let dxMap=null;
|
import { addMpt } from "../../../utils/work";
|
import bus from "../../../utils/bus";
|
export default {
|
data () {
|
return {
|
move1: {
|
transform: "translateX(-230px)",
|
"z-index": "2",
|
transition: "transform,1s",
|
},
|
move2: {
|
transform: "translateX(-450px)",
|
"z-index": "2",
|
transition: "transform,1s",
|
},
|
nowchoose: null,
|
bot1: [
|
{ img: require("@/assets/image/test/组 163.png") },
|
{ img: require("@/assets/image/test/组 164.png") },
|
{ img: require("@/assets/image/test/组 165.png") },
|
],
|
isshowGD: false,
|
istrue: true,
|
};
|
},
|
methods: {
|
handleSelect (key,keyPath) {
|
var val=keyPath[1]
|
switch(val) {
|
case "1-3":
|
this.nowchoose=2;
|
bus.$emit("showdio",this.nowchoose);
|
break;
|
case "1-2"://null
|
this.nowchoose=7;
|
bus.$emit("showdio",this.nowchoose);
|
break;
|
case "1-1":
|
this.nowchoose=1;
|
bus.$emit("showdio",this.nowchoose);
|
break;
|
case "2-6"://null
|
this.nowchoose=8;
|
bus.$emit("showdio",this.nowchoose);
|
break;
|
case "2-5":
|
this.nowchoose=3;
|
bus.$emit("showdio",this.nowchoose);
|
break;
|
case "2-4"://null
|
this.nowchoose=9;
|
bus.$emit("showdio",this.nowchoose);
|
break;
|
case "2-3"://null
|
this.nowchoose=10;
|
bus.$emit("showdio",this.nowchoose);
|
break;
|
case "2-2":
|
this.nowchoose='1-4';
|
bus.$emit("showdio",this.nowchoose);
|
break;
|
|
case "3-4":
|
this.nowchoose=5;
|
bus.$emit("showdio",this.nowchoose);
|
break;
|
case "3-3":
|
this.nowchoose="1-2";
|
bus.$emit("showdio",this.nowchoose);
|
break;
|
case "3-2":
|
this.nowchoose=4;
|
bus.$emit("showdio",this.nowchoose);
|
break;
|
case "3-1":
|
this.nowchoose=6;
|
bus.$emit("showdio",this.nowchoose);
|
break;
|
}
|
},
|
makebig () {
|
this.istrue=false;
|
this.move1.transform="translateX(0px)";
|
this.move2.transform="translateX(0px)";
|
},
|
makeSmall () {
|
this.istrue=true;
|
this.move1.transform="translateX(-230px)";
|
this.move2.transform="translateX(-450px)";
|
},
|
changeMap1 () {
|
Viewer.imageryLayers._layers[0].show=true;
|
addMpt(true);
|
if(dxMap) {
|
dxMap.setVisibility(false);
|
}
|
if(gdMap) {
|
gdMap.setVisibility(false);
|
|
// this.move1["z-index"]=3;
|
|
} else {
|
return;
|
}
|
},
|
changeMap2 () {
|
Viewer.imageryLayers._layers[0].show=false;
|
if(gdMap) {
|
gdMap.setVisibility(false);
|
}
|
|
addMpt(true);
|
if(dxMap) {
|
dxMap.setVisibility(true);
|
} else {
|
var base={
|
url: "http://t0.tianditu.com/ter_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ter&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561",
|
|
};
|
dxMap=sgworld.Creator.createWebMapTileServerImageLayer(
|
"街道",
|
base,
|
"0",
|
undefined,
|
true,
|
""
|
);
|
}
|
|
},
|
changeMap () {
|
// this.move1["z-index"]=0;
|
// this.move1["z-index"]=1;
|
Viewer.imageryLayers._layers[0].show=false;
|
addMpt(false);
|
if(gdMap) {
|
gdMap.setVisibility(true);
|
} else {
|
var base={
|
url: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer",
|
enablePickFeatures: false,
|
usePreCachedTilesIfAvailable: false, // 是否使用服务的内置的切片方案，偏移纠正需要使用如下自定义的方案
|
tilingScheme: sgworld.Core.getOffsetTilingScheme(), // 偏移纠正
|
};
|
gdMap=sgworld.Creator.createArcGisImageryLayer(
|
"街道",
|
base,
|
"0",
|
undefined,
|
true,
|
""
|
);
|
this.isshowGD=true;
|
}
|
},
|
|
},mounted () {
|
bus.$on("showindex",(e) => {
|
if(this.boxindex==e) {
|
this.boxindex=0;
|
} else {
|
this.boxindex=e;
|
}
|
});
|
},
|
};
|
</script>
|
|
<style scoped>
|
.content {
|
/* height: 2000px; */
|
position: relative;
|
/* background: skyblue; */
|
display: flex;
|
justify-content: space-between;
|
flex-direction: column;
|
}
|
.container {
|
width: 400px;
|
margin-left: 100px;
|
height: 1600px;
|
display: flex;
|
padding: 20px;
|
margin-top: 100px;
|
background: url("../../../assets/image/listbg.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
.el-menu-vertical-demo {
|
width: 100%;
|
background: transparent !important;
|
border: transparent;
|
color: white;
|
}
|
/deep/ .el-submenu__title:hover {
|
background: rgba(255, 255, 255, 0.2) !important;
|
}
|
/deep/ .el-submenu__title {
|
color: white !important;
|
font-size: 32px;
|
}
|
/deep/.el-menu {
|
background: transparent !important;
|
}
|
/deep/.el-menu-item:focus,
|
.el-menu-item:hover {
|
background: rgba(255, 255, 255, 0.2) !important;
|
color: #409eff !important;
|
}
|
/deep/.el-menu-item {
|
color: white !important;
|
font-size: 28px;
|
padding: 0px 40px !important;
|
}
|
/deep/.el-submenu__icon-arrow {
|
font-size: 20px !important;
|
}
|
.bot {
|
width: 100px;
|
height: 310px;
|
margin-top: 200px;
|
bottom: 10px;
|
left: 10%;
|
margin-left: 50px;
|
}
|
.bot > span {
|
display: block;
|
width: 100%;
|
height: 29%;
|
background-size: 100% 100% !important;
|
background-repeat: no-repeat !important;
|
background-position: center !important;
|
}
|
#img,
|
#img1 {
|
display: block;
|
margin: 20px 0;
|
width: 250px;
|
height: 150px;
|
}
|
#img {
|
background: url(../../../assets/image/subject/二维.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
background-position: center;
|
position: absolute;
|
margin: 20px;
|
z-index: 1;
|
}
|
#img1 {
|
background: url(../../../assets/image/change/组182.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
background-position: center;
|
position: absolute;
|
margin: 20px;
|
left: 320px;
|
}
|
#img2 {
|
width: 260px;
|
height: 146px;
|
background: url(../../../assets/image/change/dixing.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
background-position: center;
|
position: absolute;
|
margin: 20px;
|
left: 600px;
|
}
|
.botImg {
|
width: 840px;
|
height: 190px;
|
background: skyblue;
|
background: transparent;
|
}
|
.botImg1 {
|
width: 340px;
|
height: 190px;
|
background: transparent;
|
}
|
</style>
|
