<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
|
class="bottombtn"
|
:class="showTree ? 'active' : ''"
|
@click="handleTree"
|
>
|
图层管理
|
</div>
|
</div>
|
<div class="bottom13">
|
<div
|
class="bottom13-wrapper"
|
:class="isExpand ? 'expend' : 'fold'"
|
@mouseover="handleMouseOver"
|
@mouseout="handleMouseOut"
|
>
|
<div
|
v-for="item in yxList"
|
yxList
|
:class="item.name == currYX && isExpand ? [item.key, 'active'] : item.key"
|
@click="ChangeBaseLayer(item.name)"
|
:title="item.name"
|
></div>
|
|
<!-- <transition name="slide-fade">
|
<p v-if="show">hello</p>
|
</transition> -->
|
</div>
|
</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,
|
selectProjectFileList,
|
} 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",
|
},
|
],
|
},
|
],
|
showTree: false,
|
currYX: "影像图",
|
yxList: [
|
{
|
name: "影像图",
|
key: "yingxiang",
|
},
|
{
|
name: "注记图",
|
key: "zhuji",
|
},
|
{
|
name: "晕渲图",
|
key: "yunxuan",
|
},
|
],
|
isExpand: false
|
}
|
},
|
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(name) {
|
this.currYX = name
|
|
if (is_production) {
|
Viewer.imageryLayers._layers[1].show = false
|
Viewer.imageryLayers._layers[0].show = false
|
} else {
|
Viewer.imageryLayers._layers[1].show = false
|
|
}
|
|
if (yunxuanLayer) {
|
Viewer.imageryLayers.remove(yunxuanLayer);
|
yunxuanLayer = null
|
}
|
|
switch (name) {
|
case "晕渲图":
|
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,
|
// ""
|
// )
|
var urls = "http://t0.tianditu.com/ter_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ter&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=";
|
var tokne = "94a34772eb88317fcbf8428e10448561"
|
if (is_production) {
|
var baseUrl_yx = window.sceneConfig.baseUrl_yx;
|
if (baseUrl_yx.indexOf('{host}') > -1) {
|
baseUrl_yx = baseUrl_yx.replace("{host}", iisHost)
|
}
|
|
yunxuanLayer = Viewer.imageryLayers.addImageryProvider(
|
new Cesium.UrlTemplateImageryProvider({
|
url: baseUrl_yx,
|
maximumLevel: 22,
|
})
|
);
|
} else {
|
yunxuanLayer = Viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
|
url: urls + tokne,
|
layer: "tdtImgLayer",
|
style: "default",
|
format: "image/jpeg",
|
tileMatrixSetID: "GoogleMapsCompatible",
|
}))
|
}
|
|
|
Viewer.imageryLayers.lowerToBottom(yunxuanLayer);//将图层移到最底层
|
Viewer.imageryLayers.raise(yunxuanLayer);//将图层上移一层
|
}
|
|
|
|
break
|
case "影像图":
|
|
if (is_production) {
|
Viewer.imageryLayers._layers[0].show = true
|
}
|
break
|
case "注记图":
|
if (is_production) {
|
Viewer.imageryLayers._layers[1].show = true
|
} else {
|
Viewer.imageryLayers._layers[1].show = true
|
}
|
break
|
default:
|
break
|
}
|
},
|
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.$bus.$emit("changeProjectLayer", child.id)
|
this.DisplayCurrentProject(child)
|
this.changeProject(child)
|
this.$bus.$emit("changeProjectCode", child.id)
|
break
|
case "专题展示":
|
this.$bus.$emit("changeProjectLayer", child.id)
|
this.changeProject(child)
|
break
|
|
default:
|
break
|
}
|
},
|
|
//工程巡视
|
async showPathLine(params) {
|
|
this.$bus.$emit("closeLeftAndRightMenu", true)
|
|
const line = wktToGeoJSON(params.wkt)
|
const position = line.coordinates[0]
|
const result = []
|
position.forEach(pos => {
|
// 添加漫游高度，后续修改SDK源码可以适配为地面高程
|
pos.push(1000)
|
result.push(...pos)
|
})
|
|
|
window.sgworld.Creator.getFlyData(result, data => {
|
data.showPoint = false
|
data.showLine = true
|
data.mode = 0
|
data.height = 5000
|
|
// 弹窗数据
|
window.PathAnimationData = {
|
flyData: data,
|
}
|
var that = this
|
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()
|
that.$bus.$emit("closeLeftAndRightMenu", false)
|
},
|
})
|
})
|
},
|
|
//项目展示
|
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,
|
// }
|
// })
|
// }
|
const res = await selectProjectFileList()
|
if (res.code === 200) {
|
const menu = this.menuList.find(item => item.menuName == "项目展示")
|
menu.children = res.result.map(item => {
|
return {
|
name: item.name,
|
id: item.code,
|
wkt: item.wkt,
|
}
|
})
|
}
|
selectProjectFileList
|
},
|
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)
|
var lon, lat, height;
|
if (params.name.indexOf("全国") != -1) {
|
height = 20000000;
|
lon = 110;
|
lat = 32;
|
window.viewer.camera.flyTo({
|
destination: new Cesium.Cartesian3.fromDegrees(lon, lat, height),
|
orientation: {
|
heading: Cesium.Math.toRadians(0),
|
pitch: Cesium.Math.toRadians(-90),
|
},
|
})
|
} else if (params.name.indexOf("全球") != -1) {
|
lon = 85;
|
lat = 25;
|
height = 30000000;
|
window.viewer.camera.flyTo({
|
destination: new Cesium.Cartesian3.fromDegrees(lon, lat, height),
|
orientation: {
|
heading: Cesium.Math.toRadians(0),
|
pitch: Cesium.Math.toRadians(-90),
|
},
|
})
|
}
|
|
},
|
handleTree(params) {
|
this.showTree = !this.showTree
|
this.$bus.$emit("changeTree", this.showTree)
|
},
|
handleMouseOver() {
|
this.isExpand = true
|
},
|
handleMouseOut() {
|
this.isExpand = false
|
}
|
},
|
}
|
</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 {
|
display: flex;
|
flex-direction: row-reverse;
|
}
|
-webkit-transition-property: width;
|
.expend {
|
transition-property: width;
|
-webkit-transition-duration: 0.5s;
|
transition-duration: 0.5s;
|
width: 320px !important;
|
}
|
.fold {
|
-webkit-transition-property: width;
|
transition-property: width;
|
-webkit-transition-duration: 0.5s;
|
transition-duration: 0.5s;
|
width: 100px !important;
|
}
|
.bottom13-wrapper {
|
height: 80px;
|
width: 100px;
|
-webkit-transition-property: width;
|
transition-property: width;
|
-webkit-transition-duration: 0.5s;
|
transition-duration: 0.5s;
|
cursor: pointer;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
position: relative;
|
overflow: hidden;
|
&:hover {
|
.zhuji {
|
right: 100px;
|
}
|
.yunxuan {
|
right: 200px;
|
}
|
}
|
|
.yingxiang,
|
.zhuji,
|
.yunxuan {
|
margin-right: 10px;
|
width: 92px;
|
height: 61px;
|
background: url(~@/assets/img/Screen/yximg.png);
|
background-size: 100% 100%;
|
background-position: 0 0;
|
position: absolute;
|
z-index: 3;
|
right: 0;
|
-webkit-transition-property: right;
|
transition-property: right;
|
-webkit-transition-duration: 0.5s;
|
transition-duration: 0.5s;
|
}
|
.zhuji {
|
z-index: 2;
|
background-position: 0px -61px;
|
right: 5px;
|
background: url(~@/assets/img/Screen/bdimg.png);
|
background-size: 100% 100%;
|
}
|
.yunxuan {
|
z-index: 1;
|
background-position: 0 -122px;
|
right: 10px;
|
background: url(~@/assets/img/Screen/geovisearth-ter.png);
|
background-size: 100% 100%;
|
}
|
.active {
|
border: 1px solid #409eff;
|
}
|
img {
|
cursor: pointer;
|
margin-right: 10px;
|
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: 16px;
|
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>
|
