<template>
|
<div style="height: 100%; padding: 0px">
|
<div style="padding: 1px 0px">
|
<div class="leftMenuButton" :class="{ leftMeuBottonIsOn: 1 === currentContent.tag }" @click="showContent(1)">
|
<i class="el-icon-message"></i>
|
</div>
|
</div>
|
<div style="padding: 1px 0px">
|
<div class="leftMenuButton" :class="{ leftMeuBottonIsOn: 2 === currentContent.tag }" @click="showContent(2)">
|
<img class="my-icon-layer" />
|
</div>
|
</div>
|
<div style="padding: 1px 0px">
|
<div class="leftMenuButton" :class="{ leftMeuBottonIsOn: 3 === currentContent.tag }" @click="showContent(3)">
|
<span>资源</span>
|
</div>
|
</div>
|
<div style="padding: 1px 0px">
|
<div class="leftMenuButton" :class="{ leftMeuBottonIsOn: 4 === currentContent.tag }" @click="showContent(4)">
|
<span>工程</span>
|
</div>
|
</div>
|
<div style="padding: 1px 0px">
|
<div class="leftMenuButton" :class="{ leftMeuBottonIsOn: 5 === currentContent.tag }" @click="showContent(5)">
|
<span>规划</span>
|
</div>
|
</div>
|
<div style="padding: 1px 0px">
|
<div class="leftMenuButton" :class="{ leftMeuBottonIsOn: 6 === currentContent.tag }" @click="showContent(6)">
|
<span>专题</span>
|
</div>
|
</div>
|
<div style="padding: 1px 0px">
|
<div class="leftMenuButton" :class="{ leftMeuBottonIsOn: 7 === currentContent.tag }" @click="showContent(7)">
|
<span>物联</span>
|
</div>
|
</div>
|
<div class="project" :class="{ showProject: proShow }">
|
<el-card class="opt-card1 scrollbar">
|
<div slot="header">
|
<i class="el-icon-share"></i>
|
<span> {{ currentContent.title }}</span>
|
<div style="cursor: pointer; float: right" @click="hiddenContent">
|
<i class="el-icon-close"></i>
|
</div>
|
</div>
|
<layer-panel ref="layercontrol" :keyString="`id`" @showSubContent="showSubContent" @showBimFList="showBimFList"
|
v-show="currentContent.tag === 2" />
|
<zi-yuan-panel v-show="currentContent.tag === 3"></zi-yuan-panel>
|
<gong-cheng-panel v-show="currentContent.tag === 4"></gong-cheng-panel>
|
<gui-hua-panel v-show="currentContent.tag === 5"></gui-hua-panel>
|
<zhuan-ti-panel v-show="currentContent.tag === 6" ref="zhuantiRefs" @showPopou="showPopou"></zhuan-ti-panel>
|
<wu-lian-panel v-show="currentContent.tag === 7"></wu-lian-panel>
|
</el-card>
|
</div>
|
<div class="projectsub" :class="{ showSubProject: proShowSub }">
|
<el-card class="opt-card2 scrollbar">
|
<div slot="header">
|
<i class="el-icon-share"></i>
|
<span> {{ currentSubContent.title }}</span>
|
<div style="cursor: pointer; float: right" @click="hiddenSubContent">
|
<i class="el-icon-close"></i>
|
</div>
|
</div>
|
<bim-components-tree ref="bimcomponentstree"></bim-components-tree>
|
</el-card>
|
</div>
|
<div class="projectsub" :class="{ showSubProject: proShowBtt }">
|
<el-card class="opt-card2 scrollbar">
|
<div slot="header">
|
<i class="el-icon-share"></i>
|
<span> {{ bimFList.title }}</span>
|
<div style="cursor: pointer; float: right" @click="hiddenSubContent">
|
<i class="el-icon-close"></i>
|
</div>
|
</div>
|
<bim-type-tree ref="bimTypeTree" @hiddenSubContent="hiddenSubContent"></bim-type-tree>
|
<div class="bottom-btn">
|
<el-button type="primary" @click="showBim">确认</el-button>
|
<el-button type="primary" @click="hiddenSubContent">取消</el-button>
|
<el-button type="primary" @click="showBimAll">全显</el-button>
|
</div>
|
</el-card>
|
</div>
|
<my-popou-window ref="popou1" class="pop1" title="基本信息" tag="1" v-if="currentPopou.visiable1"
|
@showHQAnalysis="showPopou" :data="currentPopou.rowData" @closePopou="closePopou(1)" @openFloor="openFloor">
|
</my-popou-window>
|
<my-popou-window ref="popou2" class="pop2" title="火情确认" tag="2" v-if="currentPopou.visiable2"
|
:data="currentPopou.rowData" @closePopou="closePopou(2)">
|
</my-popou-window>
|
<my-popou-window ref="popou3" class="pop3" title="火情分析" tag="3" v-if="currentPopou.visiable3"
|
:data="currentPopou.rowData" @closePopou="closePopou(3)">
|
</my-popou-window>
|
<my-popou-window ref="popou4" class="pop4" title="火情处置" tag="4" v-if="currentPopou.visiable4"
|
:data="currentPopou.rowData" @closePopou="closePopou(4)">
|
</my-popou-window>
|
|
</div>
|
</template>
|
|
<script>
|
import LayerPanel from "../../components/developcenter/mainViewer/LayerPanel.vue";
|
import ZiYuanPanel from "../../components/developcenter/leftViewer/ziyuan.vue";
|
import WuLianPanel from "../../components/developcenter/leftViewer/wulian.vue";
|
import GongChengPanel from "../../components/developcenter/leftViewer/gongcheng.vue";
|
import GuiHuaPanel from "../../components/developcenter/leftViewer/guihua.vue";
|
import ZhuanTiPanel from "../../components/developcenter/leftViewer/zhuanti.vue";
|
|
import MyPopouWindow from "../../components/developcenter/leftViewer/MyPopouWindow.vue";
|
|
import bimComponentsTree from "../../components/developcenter/mainViewer/bimComponentsTree.vue";
|
|
import bimTypeTree from "../../components/developcenter/mainViewer/bimTypeTree.vue";
|
import axios from 'axios';
|
export default {
|
components: {
|
LayerPanel,
|
ZhuanTiPanel,
|
GuiHuaPanel,
|
GongChengPanel,
|
WuLianPanel,
|
ZiYuanPanel,
|
bimComponentsTree,
|
bimTypeTree,
|
MyPopouWindow,
|
},
|
data() {
|
//这里存放数据
|
return {
|
proShow: false,
|
proShowSub: false,
|
proShowBtt: false,
|
btnIsOn: false,
|
currentContent: {
|
tag: 0,
|
title: "",
|
},
|
currentSubContent: {
|
tag: 0,
|
title: "",
|
},
|
bimFList: {
|
tag: 0,
|
title: "",
|
},
|
currentPopou: {
|
visiable1: false,
|
visiable2: false,
|
visiable3: false,
|
|
visiable4: false,
|
tag: 0, rowData: null
|
},
|
bimShowData: {}
|
};
|
},
|
methods: {
|
showContent(tag) {
|
switch (tag) {
|
case 1:
|
this.currentContent = { tag: 1, title: "成果资源" };
|
break;
|
case 2:
|
window.LOAD_FLYTO = true;
|
this.currentContent = { tag: 2, title: "数据目录" };
|
break;
|
case 3:
|
this.currentContent = { tag: 3, title: "资源统计" };
|
break;
|
case 4:
|
this.currentContent = { tag: 4, title: "工程项目展示" };
|
break;
|
case 5:
|
this.currentContent = { tag: 5, title: "规划展示" };
|
break;
|
case 6:
|
this.currentContent = { tag: 6, title: "专题内容" };
|
break;
|
case 7:
|
this.currentContent = { tag: 7, title: "物联感知" };
|
break;
|
default:
|
break;
|
}
|
this.proShow = true;
|
},
|
showSubContent(data) {
|
if (data) {
|
this.currentSubContent.title = data.name;
|
this.$refs.bimcomponentstree.initalComponentsTree(data);
|
}
|
this.proShowSub = true;
|
this.proShowBtt = false;
|
},
|
showBimFList(data) {
|
console.log(data)
|
if (data) {
|
this.bimFList.title = data.name;
|
this.$refs.bimTypeTree.initalComponentsTree(data);
|
}
|
this.proShowBtt = true;
|
this.proShowSub = false;
|
},
|
showBimAll(){
|
window.BIM.CancelOperatingStatus();
|
},
|
showBim() {
|
//设置构件显示隐藏
|
this.$refs.bimTypeTree.showBim()
|
// this.proShowBtt = false;
|
},
|
hiddenSubContent() {
|
this.proShowSub = false;
|
this.proShowBtt = false;
|
},
|
hiddenContent() {
|
this.proShow = false;
|
this.proShowSub = false;
|
this.proShowBtt = false;
|
if (this.$refs.bimTypeTree) {
|
this.$refs.bimTypeTree.offBim()
|
}
|
},
|
showPopou(params) {
|
let tag = params.tag;
|
if (tag === 1) {
|
this.currentPopou.visiable1 = true;
|
} else if (tag === 2) {
|
this.currentPopou.visiable2 = true;
|
} else if (tag === 3) {
|
this.currentPopou.visiable3 = true;
|
} else if (tag === 4) {
|
this.currentPopou.visiable4 = true;
|
}
|
this.currentPopou.rowData = params.rowData;
|
},
|
closePopou(tag) {
|
if (tag === 1) {
|
this.currentPopou.visiable1 = false;
|
} else if (tag === 2) {
|
this.currentPopou.visiable2 = false;
|
} else if (tag === 3) {
|
this.currentPopou.visiable3 = false;
|
} else if (tag === 4) {
|
this.currentPopou.visiable4 = false;
|
}
|
},
|
openFloor(isOn) {
|
this.$refs.zhuantiRefs.openFloor(isOn);
|
}
|
},
|
mounted() {
|
let that = this;
|
//let lurl = BIM_PROPERTY_URL + "";
|
// let lurl = "http://localhost:8083/TestS3M/layers3m.json"
|
// axios.get(lurl).then((res) => {
|
// debugger;
|
// that.$refs.layercontrol.show(null, res.data, "black");
|
// });
|
|
this.$nextTick(() => {
|
that.$refs.layercontrol.show(LAYER_CONFIG_PATH, null, "black");
|
});
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.pop1 {
|
position: absolute;
|
top: 80px;
|
left: 420px;
|
border: 1px solid #fff;
|
border-radius: 4px;
|
background: rgba(255, 255, 255, 0.8);
|
}
|
|
.pop2 {
|
position: absolute;
|
top: 80px;
|
left: 800px;
|
border: 1px solid #fff;
|
border-radius: 4px;
|
background: rgba(255, 255, 255, 0.8);
|
}
|
|
.pop3 {
|
position: absolute;
|
bottom: 80px;
|
left: 420px;
|
border: 1px solid #fff;
|
border-radius: 4px;
|
background: rgba(255, 255, 255, 0.8);
|
}
|
|
.pop4 {
|
position: absolute;
|
bottom: 80px;
|
left: 800px;
|
border: 1px solid #fff;
|
border-radius: 4px;
|
background: rgba(255, 255, 255, 0.8);
|
}
|
|
.leftMenuButton {
|
width: 40px;
|
text-align: center;
|
color: white;
|
background-color: rgb(22, 22, 22);
|
cursor: pointer;
|
padding: 8px 0px;
|
}
|
|
.leftMeuBottonIsOn {
|
background: rgba(73, 73, 73, 0.8);
|
}
|
|
.leftMenuButton:hover {
|
background-color: #2bb8de;
|
}
|
|
.projectsub {
|
position: absolute;
|
left: 40px;
|
top: 60px;
|
z-index: 999;
|
background: rgba(27, 27, 27, 0.8);
|
width: 0px;
|
height: 100%;
|
-webkit-transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
|
.opt-card2 {
|
color: white;
|
border: 0 !important;
|
height: 100%;
|
overflow: auto;
|
border-radius: 0 !important;
|
background: rgba(53, 53, 53, 0.7) !important;
|
|
/deep/ .el-card__header {
|
background: rgba(43, 43, 43) !important;
|
height: 42px;
|
font-size: 16px;
|
font-weight: 400;
|
border-bottom: 0;
|
padding: 10px;
|
}
|
|
/deep/ .el-card__body {
|
padding: 5px;
|
height: calc(100% - 115px);
|
overflow-x: auto;
|
}
|
|
/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;
|
}
|
}
|
}
|
|
.project {
|
position: absolute;
|
left: 40px;
|
top: 60px;
|
z-index: 999;
|
background: rgba(53, 53, 53, 0.8);
|
width: 0px;
|
height: 100%;
|
-webkit-transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
|
.opt-card1 {
|
color: white;
|
border: 0 !important;
|
height: 100%;
|
overflow: auto;
|
border-radius: 0 !important;
|
background: rgba(53, 53, 53, 0.7) !important;
|
|
/deep/ .el-card__header {
|
background: rgba(43, 43, 43) !important;
|
height: 42px;
|
font-size: 16px;
|
font-weight: 400;
|
border-bottom: 0;
|
padding: 10px;
|
}
|
|
/deep/ .el-card__body {
|
padding: 5px;
|
height: calc(100% - 115px);
|
overflow-x: auto;
|
}
|
|
/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;
|
}
|
}
|
}
|
|
.showSubProject {
|
left: 420px;
|
width: 380px;
|
|
.bottom-btn {
|
position: absolute;
|
bottom: 100px;
|
display: flex;
|
margin: 0 20px;
|
justify-content: space-around;
|
z-index: 1;
|
}
|
}
|
|
.showProject {
|
width: 380px;
|
}
|
|
.my-icon-layer {
|
content: url("../../assets/img/icon/u90.svg");
|
width: 16px;
|
height: 16px;
|
}
|
</style>
|
