<template>
|
<el-container class="box">
|
<el-aside style="width:46px;background-color: black;padding:0px">
|
<left-content></left-content>
|
</el-aside>
|
<el-main>
|
<el-container>
|
<el-main style="margin: 0px;margin-right:5px; padding: 5px; display: flex">
|
<div id="2dviewer" style="display: none">
|
<two-d-viewer ref="twodviewer" />
|
</div>
|
<div id="3dviewerex" style="display: none">
|
<three-d-viewer-ex />
|
</div>
|
<three-d-viewer id="3dviewer" style="width: 100%; padding: 0px 5px" :btnClick="showPanel" ref="_3dviewer">
|
</three-d-viewer>
|
</el-main>
|
<el-aside v-show="toolpanelvisible" style="width: 350px; padding: 5px; height: 99%">
|
<el-card class="opt-card scrollbar">
|
<div slot="header" class="header_box">
|
<i class="el-icon-s-home"></i>
|
<span>{{ panelindex.title }}</span>
|
<div style="cursor: pointer; float: right" @click="hiddenPanel">
|
<i class="el-icon-close"></i>
|
</div>
|
</div>
|
<location-panel @hiddenPanel="hiddenPanel" ref="locationpanel" v-show="panelindex.id === 5" />
|
<!-- <layer-panel ref="layercontrol" :keyString="`id`" @hiddenPanel="hiddenPanel" v-show="panelindex.id === 6" /> -->
|
<scene-panel @hiddenPanel="hiddenPanel" v-show="panelindex.id === 7" @ldcontrol="showPanel" />
|
<operate-panel v-show="panelindex.id === 8" />
|
<analysis-panel @pmfxshow="pmfxshow" v-show="panelindex.id === 9" />
|
</el-card>
|
</el-aside>
|
</el-container>
|
</el-main>
|
</el-container>
|
</template>
|
<script>
|
import ThreeDViewer from "../../components/developcenter/mainViewer/ThreeDViewer.vue";
|
import ThreeDViewerEx from "../../components/developcenter/mainViewer/ThreeDViewerEx.vue";
|
import LocationPanel from "../../components/developcenter/mainViewer/LocationPanel.vue";
|
import LayerPanel from "../../components/developcenter/mainViewer/LayerPanel.vue";
|
import ScenePanel from "../../components/developcenter/mainViewer/ScenePanel.vue";
|
import AnalysisPanel from "../../components/developcenter/mainViewer/AnalysisPanel.vue";
|
import OperatePanel from "../../components/developcenter/mainViewer/OperatePanel.vue";
|
import TwoDViewer from "../../components/developcenter/mainViewer/TwoDViewer.vue";
|
|
import LeftContent from "./LeftContent.vue"
|
|
export default {
|
name: "developcenter",
|
components: {
|
ThreeDViewer,
|
ThreeDViewerEx,
|
LocationPanel,
|
LayerPanel,
|
ScenePanel, AnalysisPanel,
|
OperatePanel,
|
TwoDViewer,
|
LeftContent
|
},
|
data() {
|
return {
|
toolpanelvisible: false,
|
panelindex: { title: "", id: 0 },
|
hasinital: false,
|
show3d: false,
|
showtag: "",
|
};
|
},
|
methods: {
|
showPanel(val) {
|
if (val.id === 3) {
|
//处理2 3 维联动
|
let _sdiv = val.showtag === "2d" ? "#2dviewer" : "#3dviewerex";
|
if (val.isOn === true) {
|
if (this.showtag !== "" && this.showtag !== val.showtag) {
|
this.$alert("请先关闭");
|
return;
|
}
|
$(_sdiv).css("display", "block");
|
$(_sdiv).css("width", "50%");
|
$("#3dviewer").css("width", "50%");
|
this.showtag = val.showtag;
|
if (this.hasinital === false && val.showtag === "2d") {
|
// this.$refs.twodviewer.init();
|
debugger
|
let _linkage = this.$store.state._linkage; // 重新赋值
|
this.$store.commit("CHANGE_LINKAGE", !_linkage);
|
this.hasinital = true;
|
} else {
|
this.$refs._3dviewer.isDoubleOn = true;
|
}
|
} else {
|
$(_sdiv).css("display", "none");
|
$("#3dviewer").css("width", "100%");
|
this.showtag = "";
|
this.$refs._3dviewer.isDoubleOn = false;
|
}
|
} else {
|
this.toolpanelvisible = true;
|
this.panelindex = val;
|
}
|
},
|
hiddenPanel() {
|
this.toolpanelvisible = false;
|
},
|
pmfxshow(option) {
|
this.$refs._3dviewer.initalEcharts(option);
|
},
|
},
|
mounted() {
|
let that = this;
|
this.$nextTick(() => {
|
this.$refs.locationpanel.startKeyCamera();
|
})
|
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.box {
|
height: 100%;
|
background-color: rgb(0, 19, 32);
|
|
.el-container {
|
height: 100%;
|
padding: 5px;
|
padding-bottom: 0px;
|
padding-top: 15px;
|
}
|
|
.el-main {
|
height: 100%;
|
padding: 0px;
|
}
|
|
.el-aside {
|
height: 100%;
|
}
|
|
.divbtn {
|
width: 30px;
|
height: 30px;
|
margin: 5px;
|
background-color: rgb(150, 237, 150);
|
color: white;
|
cursor: pointer;
|
}
|
|
.opt-card {
|
color: white;
|
border: 0 !important;
|
overflow: auto;
|
height: 100%;
|
border-radius: 0 !important;
|
background: rgb(53, 53, 53);
|
|
/deep/ .el-card__header {
|
background: rgba(53, 53, 53, 0.6) !important;
|
height: 42px;
|
font-size: 16px;
|
font-weight: 400;
|
border-bottom: 0;
|
padding: 10px;
|
}
|
|
/deep/ .el-card__body {
|
padding: 10px;
|
}
|
|
/deep/ .el-collapse {
|
border: 0px !important;
|
}
|
|
/deep/ .el-collapse-item__header {
|
background: rgba(146, 146, 146, 0.6) !important;
|
padding-left: 10px;
|
color: white;
|
height: 36px;
|
font-weight: 400;
|
}
|
|
/deep/ .el-collapse-item__wrap {
|
background: rgba(77, 77, 77, 0.6) !important;
|
border: 0px !important;
|
}
|
|
/deep/.el-form-item__label {
|
color: #ffffff;
|
}
|
}
|
}
|
</style>
|
