<template>
|
<div class="bottom">
|
<div class="bottom1">
|
<div class="bottom11"></div>
|
<div class="bottom12">
|
<div
|
:class="currMenu == item.menuName ? 'active' : ''"
|
v-for="item in menuList"
|
:key="item.menuName"
|
class="bottombtn"
|
@click="handleMenuClick(item)"
|
>
|
<el-popover
|
popper-class="popover"
|
placement="top"
|
width="100"
|
trigger="click"
|
>
|
<!-- 内容 -->
|
<span slot="reference">{{ item.menuName }}</span>
|
<div class="popover-content">
|
<div class="popover-content__header">项目信息</div>
|
<div class="popover-content__list">
|
<el-input
|
v-if="item.children.length > 4"
|
size="mini"
|
placeholder="请输入内容"
|
v-model="searchName"
|
>
|
<el-button slot="append" icon="el-icon-search"></el-button>
|
</el-input>
|
<div
|
class="popover-content__list__item"
|
v-for="child in item.children"
|
:key="child.id"
|
:class="currProject == child.name ? 'active' : ''"
|
@click="handlePopoverClick(child)"
|
:title="child.name"
|
>
|
{{ child.name.slice(0, 8) }}
|
</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>
|
import PipeLine from "@/assets/json/pipeline.json"
|
export default {
|
data() {
|
return {
|
YXState: true,
|
yxImg: require("../../assets/img/Screen/yximg.png"),
|
currMenu: "项目展示",
|
currProject: "全球管网图",
|
searchName: "",
|
menuList: [
|
{
|
menuName: "项目展示",
|
children: [
|
{
|
name: "全国管网图",
|
id: "qggwt",
|
},
|
{
|
name: "全球管网图",
|
id: "qqgwt",
|
},
|
{
|
name: "全国项目",
|
id: "qgxm",
|
},
|
{
|
name: "全球项目",
|
id: "qqxm",
|
},
|
],
|
},
|
{
|
menuName: "工程展示",
|
children: [
|
{
|
name: "中俄东线管道工程",
|
id: "zedx",
|
},
|
{
|
name: "西气东输三线中断管道工程",
|
id: "xqds",
|
},
|
{
|
name: "中缅天然气管道工程",
|
id: "zmtrq",
|
},
|
{
|
name: "山东官网新干线",
|
id: "sdxgx",
|
},
|
],
|
},
|
{
|
menuName: "工程巡视",
|
children: [
|
{
|
name: "中俄东线管道工程",
|
id: "zedx",
|
},
|
{
|
name: "西气东输三线中断管道工程",
|
id: "xqds",
|
},
|
{
|
name: "中缅天然气管道工程",
|
id: "zmtrq",
|
},
|
{
|
name: "山东官网新干线",
|
id: "sdxgx",
|
},
|
{
|
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
|
},
|
handleMenuClick(menu) {
|
this.currMenu = menu.menuName
|
},
|
handlePopoverClick(child) {
|
this.currProject = child.name
|
const currMenu = this.currMenu
|
switch (currMenu) {
|
case "工程巡视":
|
this.showPathLine()
|
break
|
|
default:
|
break
|
}
|
},
|
showPathLine(res) {
|
// 西气东输二线西段干线
|
// console.log("PipeLine", PipeLine)
|
const features = PipeLine.features
|
// features.forEach(item => {
|
// const name = item.properties.pipename
|
// const rawArr = item.geometry.coordinates
|
// })
|
const pipeline = features.find(
|
item => item.properties.pipename == "西气东输一线"
|
)
|
const name = pipeline.properties.pipename
|
const rawArr = pipeline.geometry.coordinates[0]
|
const result = []
|
rawArr.forEach(pos => {
|
pos.push(50)
|
result.push(...pos)
|
})
|
// console.log("result", result);
|
// sgworld.Command.execute(2, 3, "", data => {
|
// data.showPoint = false
|
// data.showLine = true
|
// data.mode = 1
|
// // 弹窗数据
|
// window.PathAnimationData = {
|
// flyData: data,
|
// }
|
// window.PathAnimationData.winIndex = layer.open({
|
// type: 2,
|
// title: "路径动画",
|
// shade: false,
|
// area: ["352px", "690px"],
|
// offset: "r",
|
// skin: "other-class",
|
// content: SmartEarthRootUrl + "Workers/path/Path.html",
|
// end: function () {
|
// PathAnimationData.fly && PathAnimationData.fly.exit()
|
// },
|
// })
|
// })
|
window.sgworld.Creator.getFlyData(result, data => {
|
data.showPoint = false
|
data.showLine = true
|
data.mode = 1
|
data.height = 2000
|
|
// 弹窗数据
|
window.PathAnimationData = {
|
flyData: data,
|
}
|
window.PathAnimationData.winIndex = layer.open({
|
type: 2,
|
title: "路径动画",
|
shade: false,
|
area: ["352px", "690px"],
|
offset: "r",
|
skin: "other-class",
|
content: SmartEarthRootUrl + "Workers/path/Path.html",
|
end: function () {
|
PathAnimationData.fly && PathAnimationData.fly.exit()
|
},
|
})
|
})
|
},
|
|
//项目展示
|
DisplayCurrentProject(parm) {
|
console.log(parm)
|
//打开或者加载图层
|
|
//飞到指定位置
|
},
|
|
//工程漫游飞行
|
FlyCurrentProject(parm) {
|
console.log(parm)
|
//打开或者加载图层
|
|
//开始飞行
|
},
|
filterNode(value, data) {
|
if (!value) return true
|
return children.name.indexOf(value) !== -1
|
},
|
},
|
}
|
</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;
|
&.active {
|
background: url(~@/assets/img/Screen/centerbtnc.png);
|
background-size: 100% 100%;
|
}
|
}
|
}
|
|
.bottom2 {
|
height: 57px;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
img {
|
width: 80%;
|
height: 100%;
|
}
|
}
|
}
|
.popover {
|
display: flex;
|
justify-content: center;
|
width: 163px;
|
height: 218px;
|
background: url(~@/assets/img/Screen/centerTooltipBg.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: 100%;
|
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;
|
}
|
}
|
.el-input {
|
width: 119px;
|
height: 21.5px;
|
background: rgba(0, 48, 111, 0.2);
|
border: 0.25px solid #2a80a9;
|
&__inner {
|
background: rgba(0, 48, 111, 0.2);
|
border-radius: inherit;
|
border: 0.25px solid #2a80a9;
|
}
|
.el-input-group__append {
|
width: 32px;
|
border: none;
|
border-radius: inherit;
|
height: 20px;
|
padding: 0;
|
text-align: center;
|
background: #3a93c7;
|
color: #fff;
|
}
|
}
|
&__list {
|
margin-top: 10px;
|
display: flex;
|
flex-direction: column;
|
// justify-content: space-evenly;
|
align-items: center;
|
width: 145px;
|
height: 180px;
|
overflow-x: hidden;
|
|
&__item {
|
margin-top: 10px;
|
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%;
|
}
|
}
|
}
|
}
|
::-webkit-scrollbar {
|
width: 2px;
|
height: 2px;
|
background: rgba(81, 205, 255, 0.9) 0%;
|
}
|
|
::-webkit-scrollbar-track {
|
background: rgba(76, 104, 135, 0.8);
|
}
|
|
::-webkit-scrollbar-thumb {
|
background: #409eff;
|
border-radius: 5px;
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
background: #409eff;
|
}
|
|
::-webkit-scrollbar-corner {
|
background: #409eff;
|
}
|
}
|
</style>
|