<template>
|
<div class="synthesis">
|
<el-tabs type="border-card">
|
<el-tab-pane v-if="menuStatus.menu1" :label="$t('synthesis.coverage')">
|
<coverage />
|
</el-tab-pane>
|
<el-tab-pane v-if="menuStatus.menu2" :label="$t('synthesis.viewport')">
|
<viewport />
|
</el-tab-pane>
|
<el-tab-pane v-if="menuStatus.menu3" :label="$t('synthesis.wander')">
|
<wander />
|
</el-tab-pane>
|
<el-tab-pane v-if="menuStatus.menu4" :label="$t('synthesis.analyse')">
|
<analyse />
|
</el-tab-pane>
|
<el-tab-pane v-if="menuStatus.menu5" :label="$t('synthesis.iqyery')">
|
<iqyery />
|
</el-tab-pane>
|
<el-tab-pane v-if="menuStatus.menu6" :label="$t('synthesis.orientation')">
|
<orientation />
|
</el-tab-pane>
|
<el-tab-pane v-if="menuStatus.menu7" :label="$t('synthesis.measurement')">
|
<measurement />
|
</el-tab-pane>
|
<el-tab-pane v-if="menuStatus.menu8" :label="$t('synthesis.plotting')">
|
<plotting @drawing="showBtn" />
|
</el-tab-pane>
|
</el-tabs>
|
<el-card class="box-card">
|
<map-div></map-div>
|
</el-card>
|
<div class="plotBox">
|
<el-collapse-transition>
|
<div class="transition-box" v-show="showBtnBox">
|
<ul>
|
<li
|
@click="changePlot(item)"
|
v-for="item in itemsOne"
|
:key="item.id"
|
>
|
<div class="divli">
|
<div :class="item.class" class="backimge8"></div>
|
</div>
|
<div class="div_li">{{ $t(item.name) }}</div>
|
</li>
|
</ul>
|
</div>
|
</el-collapse-transition>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import coverage from "./coverage.vue"; //图层
|
import viewport from "./viewport.vue"; //视图
|
import wander from "./wander.vue"; //漫游
|
import analyse from "./analyse.vue"; //分析
|
import iqyery from "./inquire.vue"; //查询
|
import orientation from "./orientation.vue"; //定位
|
import measurement from "./measurement.vue"; //测量
|
import plotting from "./plotting.vue"; //标绘
|
import MapDiv from "../../components/MapDiv";
|
import { getPerms } from "../../api/api";
|
export default {
|
components: {
|
coverage,
|
viewport,
|
wander,
|
analyse,
|
iqyery,
|
orientation,
|
measurement,
|
plotting,
|
MapDiv,
|
},
|
data() {
|
return {
|
showBtnBox: false,
|
itemsOne: [
|
{
|
id: "1",
|
name: "synthesis.point",
|
class: "h1",
|
},
|
{
|
id: "2",
|
name: "synthesis.line",
|
class: "h2",
|
},
|
// {
|
// id: "3",
|
// name: "synthesis.rectangle",
|
// class: "h3",
|
// },
|
{
|
id: "4",
|
name: "synthesis.polygon",
|
class: "h4",
|
},
|
// {
|
// id: "7",
|
// name: "synthesis.symboliclabel",
|
// class: "h7",
|
// },
|
// {
|
// id: "5",
|
// name: "synthesis.flatterrain",
|
// class: "h5",
|
// },
|
// {
|
// id: "6",
|
// name: "synthesis.terrainexcavation",
|
// class: "h6",
|
// },
|
{
|
id: "8",
|
name: "synthesis.removepaint",
|
class: "h8",
|
},
|
// {
|
// id: "9",
|
// name: "synthesis.openFile",
|
// class: "h6",
|
// },
|
// {
|
// id: "10",
|
// name: "synthesis.saveFile",
|
// class: "h8",
|
// },
|
],
|
iframeSrc: null,
|
messageName: null,
|
permsId: null,
|
menuStatus: {
|
menu1: false,
|
menu2: false,
|
menu3: false,
|
menu4: false,
|
menu5: false,
|
menu6: false,
|
menu7: false,
|
menu8: false,
|
},
|
};
|
},
|
watch: {},
|
created() {},
|
methods: {
|
showBtn() {
|
this.showBtnBox = !this.showBtnBox;
|
},
|
changePlot(res) {
|
sgworld.Creator.SimpleGraphic.edit(true, { editProp: true });
|
switch (res.id) {
|
case "1":
|
sgworld.Creator.createSimpleGraphic(
|
"point",
|
{},
|
function (entity) {}
|
);
|
break;
|
case "2":
|
sgworld.Creator.createSimpleGraphic(
|
"polyline",
|
{},
|
function (entity) {}
|
);
|
break;
|
case "3":
|
sgworld.Creator.createSimpleGraphic(
|
"rectangle",
|
{},
|
function (entity) {}
|
);
|
break;
|
case "4":
|
sgworld.Creator.createSimpleGraphic(
|
"polygon",
|
{},
|
function (entity) {}
|
);
|
break;
|
case "6":
|
if (window.Excavation) {
|
window.Excavation.clear();
|
window.Excavation = null;
|
} else {
|
this.$refs.terrainDig.open();
|
}
|
break;
|
case "5":
|
if (window.TerrainFlattening) {
|
window.TerrainFlattening.remove();
|
window.TerrainFlattening = null;
|
} else {
|
this.$refs.modelPress.open();
|
}
|
break;
|
case "7":
|
sgworld.Creator.createModelLibrary();
|
break;
|
case "8":
|
this.clearAll();
|
break;
|
case "10":
|
|
break;
|
}
|
},
|
|
clearAll() {
|
sgworld.Creator.SimpleGraphic.clear();
|
if (window.Excavation) {
|
window.Excavation.clear();
|
window.Excavation = null;
|
}
|
if (window.TerrainFlattening) {
|
window.TerrainFlattening.remove();
|
window.TerrainFlattening = null;
|
}
|
},
|
tepostmessage(res) {
|
const msg = {
|
message: "changeTool",
|
data: res,
|
};
|
document
|
.getElementById("sunIframe")
|
.contentWindow.postMessage(msg, this.iframeSrc);
|
},
|
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) {
|
switch (res.cnName) {
|
case "图层":
|
this.menuStatus.menu1 = true;
|
break;
|
case "视图":
|
this.menuStatus.menu2 = true;
|
break;
|
case "漫游":
|
this.menuStatus.menu3 = true;
|
break;
|
case "分析":
|
this.menuStatus.menu4 = true;
|
break;
|
case "查询":
|
this.menuStatus.menu5 = true;
|
break;
|
case "定位":
|
this.menuStatus.menu6 = true;
|
break;
|
case "测量":
|
this.menuStatus.menu7 = true;
|
break;
|
case "标绘":
|
this.menuStatus.menu8 = true;
|
break;
|
}
|
},
|
getPermsMenu() {
|
let val;
|
if (this.$store.state.currentPerms) {
|
val = this.$store.state.currentPerms;
|
} else {
|
val = "/comprehensive";
|
}
|
var permsEntity = this.$store.state.permsEntity;
|
|
if (permsEntity.length == 0) {
|
getPerms().then((res) => {
|
if (res.code == 200) permsEntity = res.result;
|
for (var i = 0; i < permsEntity.length; i++) {
|
if (permsEntity[i].perms == val) {
|
this.showMenuChange(permsEntity[i], permsEntity);
|
}
|
}
|
});
|
} else {
|
for (var i = 0; i < permsEntity.length; i++) {
|
if (permsEntity[i].perms == val) {
|
this.showMenuChange(permsEntity[i], permsEntity);
|
}
|
}
|
}
|
},
|
},
|
mounted() {
|
//this.messageName = this.$store.state.teNmme;
|
this.$bus.$on("changetool", (e) => {
|
this.tepostmessage(e);
|
});
|
},
|
|
created() {
|
this.getPermsMenu();
|
},
|
};
|
</script>
|
|
<style >
|
.synthesis .el-card {
|
border: transparent !important;
|
}
|
.synthesis {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
.synthesis .el-tabs__item {
|
color: white !important;
|
text-align: center;
|
|
background: rgb(55, 77, 110) !important;
|
}
|
.synthesis .is-active {
|
color: white !important;
|
background-color: #586884 !important;
|
border: #586884 !important;
|
}
|
.synthesis .el-tabs__nav-scroll {
|
background: rgb(55, 77, 110) !important;
|
}
|
.synthesis .el-tabs__content {
|
color: white !important;
|
background-color: #586884 !important;
|
padding: 0px !important;
|
}
|
.synthesis .box-card {
|
height: 88%;
|
position: relative;
|
|
border-radius: 0px;
|
}
|
.synthesis .el-card .el-card__body {
|
padding: 0px;
|
}
|
.synthesis .cardbox {
|
width: 98%;
|
height: 86%;
|
position: absolute;
|
}
|
.synthesis .el-tabs--border-card {
|
border: transparent;
|
background: transparent;
|
}
|
.synthesis .divli {
|
width: 100%;
|
height: 50%;
|
position: relative;
|
}
|
.synthesis li {
|
list-style: none;
|
float: left;
|
height: 60px;
|
text-align: center;
|
margin: 2px;
|
position: relative;
|
cursor: pointer;
|
margin-top: 5px;
|
}
|
.synthesis .backimge8 {
|
width: 30px;
|
height: 30px;
|
position: absolute;
|
background-size: 100% 100%;
|
margin: 0% 30%;
|
}
|
.synthesis .plotBox {
|
width: 160px;
|
/* height:; */
|
position: absolute;
|
top: 115px;
|
left: 5px;
|
background-color: #596882;
|
}
|
.synthesis .plotBox .transition-box ul {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-evenly;
|
align-items: center;
|
width: 100%;
|
border-radius: 4px;
|
text-align: center;
|
color: #fff;
|
/* background-color: #bfa; */
|
box-sizing: border-box;
|
}
|
.synthesis .plotBox .transition-box li {
|
margin: 5px;
|
width: 46%;
|
margin-left: 0;
|
/* background-color: #fff; */
|
justify-content: space-between;
|
}
|
</style>
|
