<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__search">
|
<el-input size="mini" placeholder="请输入内容" v-model="searchName" @change="handleSearchChange(item)">
|
<el-button slot="append" icon="el-icon-search"></el-button>
|
</el-input>
|
</div>
|
<div class="popover-content__list">
|
<div class="popover-content__list__item" v-for="(child, i) in currMenuList" :key="child.id + i"
|
: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('yx')" title="影像图" />
|
<img :src="xrImg" @click="ChangeBaseLayer('xr')" title="晕渲图"/>
|
</div>
|
</div>
|
<div class="bottom2">
|
<img src="../../assets/img/Screen/bottombg.png" />
|
</div>
|
</div>
|
</template>
|
<script>
|
let yunxuanLayer = null
|
import PipeLine from "@/assets/json/pipeline.json"
|
import {
|
countProjectTour,
|
countProjectDisplay,
|
countProjectLocation,
|
} from "@/api/screen.js"
|
import { wktToGeoJSON } from "@terraformer/wkt"
|
|
export default {
|
data() {
|
return {
|
YXState: true,
|
XRState: true,
|
yunxuanLayer: null,//全球眩晕图
|
yxImg: require("../../assets/img/Screen/yximg.png"),
|
xrImg: require("../../assets/img/Screen/bdimg.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",
|
},
|
],
|
},
|
],
|
}
|
},
|
computed: {
|
currMenuList() {
|
const menu = this.menuList.find(item => item.menuName == this.currMenu)
|
const filterChildren = []
|
const value = this.searchName
|
menu.children.forEach(item => {
|
if (item.name && item.name.includes(value)) {
|
filterChildren.push(item)
|
}
|
})
|
return filterChildren
|
},
|
},
|
created() {
|
this.getCountProjectDisplay()
|
this.getCountProjectTour()
|
},
|
methods: {
|
ChangeBaseLayer(parm) {
|
if (parm == 'yx') {
|
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
|
}
|
|
if (parm == 'xr') {
|
if (yunxuanLayer == null) {
|
var urls = "https://tiles3.geovisearth.com/base/v1/ter"
|
// 星图地球地形晕渲
|
yunxuanLayer = sgworld.Creator.createUrlTemplateImageryProvider(
|
"星图地球地形晕渲",
|
{
|
url:
|
urls +
|
"/{z}/{x}/{y}?format=webp&token=486dac3bec56d7d7c2a581c150be2bd937462f1e8f3bc9c78b5658b396122405",
|
},
|
"0",
|
undefined,
|
true,
|
""
|
)
|
}
|
if (this.XRState) {
|
yunxuanLayer.item.show = true;
|
} else {
|
yunxuanLayer.item.show = false;
|
}
|
this.XRState = !this.XRState;
|
}
|
|
|
|
},
|
handleMenuClick(menu) {
|
this.currMenu = menu.menuName
|
},
|
handlePopoverClick(child) {
|
this.currProject = child.name
|
const currMenu = this.currMenu
|
switch (currMenu) {
|
case "工程巡视":
|
this.showPathLine(child)
|
break
|
case "项目展示":
|
this.DisplayCurrentProject(child)
|
this.changeProject(child)
|
break
|
case "专题展示":
|
this.changeProject(child)
|
break
|
default:
|
break
|
}
|
},
|
|
//工程巡视
|
async showPathLine(params) {
|
const line = wktToGeoJSON(params.wkt)
|
const position = line.coordinates[0]
|
const result = []
|
position.forEach(pos => {
|
// 添加漫游高度，后续修改SDK源码可以适配为地面高程
|
pos.push(1000)
|
result.push(...pos)
|
})
|
// console.log("line", position)
|
|
window.sgworld.Creator.getFlyData(result, data => {
|
data.showPoint = false
|
data.showLine = true
|
data.mode = 0
|
data.height = 5000
|
|
// 弹窗数据
|
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/ProjectPath.html",
|
end: function () {
|
PathAnimationData.fly && PathAnimationData.fly.exit()
|
},
|
})
|
})
|
},
|
|
//项目展示
|
DisplayCurrentProject(params) {
|
|
|
//打开或者加载图层
|
|
//飞到指定位置
|
const point = wktToGeoJSON(params.wkt)
|
const position = point.coordinates
|
|
Viewer.camera.flyTo({
|
destination: Cesium.Cartesian3.fromDegrees(...position, 7000),
|
})
|
},
|
|
//工程漫游飞行
|
FlyCurrentProject(prams) {
|
console.log(prams)
|
//打开或者加载图层
|
|
//开始飞行
|
},
|
filterChildList(menuName) {
|
const menuList = this.menuList
|
const searchName = this.searchName
|
|
// console.log(menuList.find(item => item.menuName == menuName));
|
const menu = menuList.find(item => item.menuName == menuName)
|
return menu.children
|
// return menu.children.filter(item => item.name.indexOf(searchName) > -1)
|
},
|
handleSearchChange(currMenu) { },
|
async getCountProjectDisplay() {
|
const res = await countProjectLocation()
|
if (res.code === 200) {
|
const menu = this.menuList.find(item => item.menuName == "项目展示")
|
menu.children = res.result.map(item => {
|
return {
|
name: item.projname,
|
id: item.projname,
|
wkt: item.wkt,
|
}
|
})
|
|
}
|
},
|
async getCountProjectTour() {
|
const res = await countProjectTour()
|
if (res.code === 200) {
|
const menu = this.menuList.find(item => item.menuName == "工程巡视")
|
menu.children = res.result.map(item => {
|
return {
|
name: item.projname,
|
id: item.projname,
|
wkt: item.wkt,
|
}
|
})
|
|
}
|
},
|
//专题展示
|
changeProject(params) {
|
this.$bus.$emit('changeProject', params.name)
|
}
|
},
|
}
|
</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;
|
}
|
}
|
|
&__search {
|
margin-top: 8px;
|
width: 145px;
|
text-align: center;
|
|
.el-input {
|
width: 125px;
|
height: 21px;
|
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;
|
padding: 0 5px;
|
color: #fff;
|
}
|
|
.el-input-group__append {
|
width: 32px;
|
border: none;
|
border-radius: inherit;
|
height: 20px;
|
padding: 0;
|
text-align: center;
|
background: #3a93c7;
|
color: #fff;
|
}
|
}
|
}
|
|
&__list {
|
display: flex;
|
flex-direction: column;
|
// justify-content: space-evenly;
|
align-items: center;
|
width: 145px;
|
height: 155px;
|
overflow-x: hidden;
|
|
&__item {
|
margin-top: 8px;
|
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>
|
