<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" />
|
</div>
|
</div>
|
<div class="bottom2">
|
<img src="../../assets/img/Screen/bottombg.png" />
|
</div>
|
</div>
|
</template>
|
<script>
|
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,
|
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",
|
},
|
],
|
},
|
],
|
}
|
},
|
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() {
|
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(child)
|
break
|
case "工程展示":
|
this.DisplayCurrentProject(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) {
|
console.log(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.st_astext,
|
}
|
})
|
|
}
|
},
|
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>
|
