<template>
|
<div class="bottom">
|
<div class="bottom1">
|
<div class="bottom11"></div>
|
<div class="bottom12">
|
<div class="bottombtn">
|
<el-popover
|
popper-class="popover"
|
placement="top"
|
width="100"
|
trigger="click"
|
>
|
<!-- 内容 -->
|
<span slot="reference">项目展示</span>
|
<div class="popover-content">
|
<div class="popover-content__header">项目信息</div>
|
<div class="popover-content__list">
|
<div
|
class="popover-content__list__item"
|
v-for="item in projectInfoList"
|
:key="item.id"
|
:class="currProject == item.name ? 'active' : ''"
|
@click="handlePopoverClick(item)"
|
>
|
{{ item.name }}
|
</div>
|
</div>
|
</div>
|
</el-popover>
|
</div>
|
<div class="bottombtn">
|
<el-popover placement="top" width="100" trigger="click">
|
<!-- 内容 -->
|
<span slot="reference">工程展示</span>
|
<div class="popover-content">
|
<div class="popover-content__header">项目信息</div>
|
<div class="popover-content__list">
|
<div
|
class="popover-content__list__item"
|
v-for="item in displayProject"
|
:key="item.id"
|
:class="currProject == item.name ? 'active' : ''"
|
:title="item.name"
|
@click="DisplayCurrentProject(item.name)"
|
>
|
{{ item.name.length>8?item.name.substring(0,8):item.name }}
|
</div>
|
</div>
|
</div>
|
</el-popover>
|
</div>
|
<div class="bottombtn">
|
<el-popover placement="top" width="100" trigger="click">
|
<!-- 内容 -->
|
<span slot="reference">工程巡视</span>
|
<div class="popover-content">
|
<div class="popover-content__header">项目信息</div>
|
<div class="popover-content__list">
|
<div
|
class="popover-content__list__item"
|
v-for="item in FlyProject"
|
:key="item.id"
|
:class="currProject == item.name ? 'active' : ''"
|
:title="item.name"
|
@click="FlyCurrentProject(item.name)"
|
>
|
{{ item.name.length>8?item.name.substring(0,8):item.name }}
|
</div>
|
</div>
|
</div>
|
|
</el-popover>
|
</div>
|
</div>
|
<div class="bottom13">
|
<img :src="yxImg" @click="ChangeBaseLayer" />
|
</div>
|
</div>
|
<div class="bottom2">
|
<img src="../../assets/img/Screen/bottombg.png" />
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
YXState: true,
|
yxImg: require("../../assets/img/Screen/yximg.png"),
|
currProject: "全球管网图",
|
projectInfoList: [
|
{
|
name: "全国管网图",
|
id: "qggwt",
|
},
|
{
|
name: "全球管网图",
|
id: "qqgwt",
|
},
|
{
|
name: "全国项目",
|
id: "qgxm",
|
},
|
{
|
name: "全球项目",
|
id: "qqxm",
|
},
|
],
|
|
displayProject:[
|
{
|
name:"中俄东线管道工程",
|
id:"zedx"
|
},
|
{
|
name:"西气东输三线中断管道工程",
|
id:"xqds"
|
},
|
{
|
name:"中缅天然气管道工程",
|
id:"zmtrq"
|
},
|
{
|
name:"山东官网新干线",
|
id:"sdxgx"
|
},
|
],
|
FlyProject:[
|
{
|
name:"中俄东线管道工程",
|
id:"zedx"
|
},
|
{
|
name:"西气东输三线中断管道工程",
|
id:"xqds"
|
},
|
{
|
name:"中缅天然气管道工程",
|
id:"zmtrq"
|
},
|
{
|
name:"山东官网新干线",
|
id:"sdxgx"
|
},
|
]
|
|
|
|
|
}
|
},
|
methods: {
|
ChangeBaseLayer() {
|
if (this.YXState) {
|
this.yxImg = require("../../assets/img/Screen/bdimg.png")
|
//加载百度影像
|
Viewer.imageryLayers._layers[1].show = true
|
Viewer.imageryLayers._layers[2].show = false
|
Viewer.imageryLayers._layers[3].show = false
|
} else {
|
this.yxImg = require("../../assets/img/Screen/yximg.png")
|
Viewer.imageryLayers._layers[1].show = false
|
Viewer.imageryLayers._layers[2].show = true
|
Viewer.imageryLayers._layers[3].show = true
|
}
|
this.YXState = !this.YXState
|
},
|
handlePopoverClick(params) {
|
this.currProject = params.name
|
},
|
|
//项目展示
|
DisplayCurrentProject(parm){
|
console.log(parm);
|
//打开或者加载图层
|
|
//飞到指定位置
|
},
|
|
//工程漫游飞行
|
FlyCurrentProject(parm){
|
console.log(parm);
|
//打开或者加载图层
|
|
//开始飞行
|
}
|
|
|
|
},
|
}
|
</script>
|
<style lang="scss">
|
.bottom {
|
height: 100%;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.bottom1 {
|
height: calc(100% - 36px);
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
|
.bottom11,
|
.bottom13 {
|
height: 100%;
|
width: 40%;
|
}
|
|
.bottom12 {
|
height: 100%;
|
width: 20%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-around;
|
}
|
|
.bottom13 {
|
cursor: pointer;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
|
img {
|
cursor: pointer;
|
margin-right: 30px;
|
width: 92px;
|
height: 61px;
|
}
|
}
|
|
.bottombtn {
|
height: 36px;
|
width: 147px;
|
background: url(~@/assets/img/Screen/centerbtn.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
font-size: 1rem;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #fff;
|
font-weight: 600;
|
cursor: pointer;
|
}
|
}
|
|
.bottom2 {
|
height: 36px;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
img {
|
width: 80%;
|
height: 100%;
|
}
|
}
|
}
|
.popover {
|
display: flex;
|
justify-content: center;
|
width: 163px;
|
height: 239px;
|
background: url(~@/assets/img/Screen/centerTooltip.png);
|
background-size: 100% 100%;
|
border: none;
|
.popper__arrow {
|
display: none;
|
}
|
.popover-content {
|
&__header {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
text-align: center;
|
width: 130px;
|
height: 30px;
|
font-size: 18px;
|
color: #fff;
|
&::before,
|
&::after {
|
margin: 0 5px;
|
content: "";
|
display: inline-block;
|
background-color: #466c99;
|
border-radius: 50%;
|
width: 8px;
|
height: 8px;
|
}
|
}
|
&__list {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-evenly;
|
height: 190px;
|
|
&__item {
|
color: #fff;
|
width: 130px;
|
height: 30px;
|
line-height: 30px;
|
text-align: center;
|
// background-color: orange;
|
cursor: pointer;
|
background: url(~@/assets/img/Screen/btnbg.png);
|
background-size: 100% 100%;
|
|
&.active {
|
// background-color: aqua;
|
background: url(~@/assets/img/Screen/btnc.png);
|
background-size: 100% 100%;
|
|
}
|
}
|
}
|
}
|
}
|
</style>
|
