<template>
|
<div class="topMain">
|
<div class="leftImg">
|
<div class="leftbox">
|
<div class="timebox">
|
<div class="timeY">{{ timeY }}</div>
|
<div class="timeH">{{ timeH }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="centerImg" :text="titleMain">{{titleMain}}
|
<!-- <div class="text">西安CIM基础平台</div> -->
|
<!-- 主场馆片区综合数据平台 -->
|
</div>
|
<div class="rightImg">
|
<div class="rightbox">
|
<div class="query" @click="openQuery()"></div>
|
<div class="home" @click="toHome()"></div>
|
<div class="segmentation"></div>
|
<!-- <div class="weather"></div> -->
|
<div class="touXiang"></div>
|
<div class="nameBG">
|
{{ username }}
|
</div>
|
<div class="close" @click="logOut"></div>
|
</div>
|
</div>
|
<IdentifyTool ref="IdentifyTool" />
|
</div>
|
|
</template>
|
|
<script>
|
import { removeToken } from "@/utils/auth";
|
import { mapState } from "vuex";
|
import IdentifyTool from '../../../components/developcenter/mainViewer/IdentifyTool.vue'
|
import identifyTool from '@/utils/identifyTools.js'
|
import * as SmartEarth from "../../../../public/CimSDK/index.js";
|
let Cesium = SmartEarth.Cesium;
|
let selected = {
|
feature: undefined,
|
originalColor: new Cesium.Color(),
|
};
|
let highlighted = {
|
feature: undefined,
|
originalColor: new Cesium.Color(),
|
};
|
export default {
|
data() {
|
return {
|
timeY: "",
|
timeH: "",
|
query:false,
|
start:0,
|
titleMain:""
|
}
|
},
|
components: { IdentifyTool },
|
methods: {
|
updateNameOverlay(pickedFeature, position) {
|
if (!Cesium.defined(pickedFeature)) {
|
nameOverlay.style.display = "none";
|
return;
|
}
|
// A feature was picked, so show its overlay content
|
nameOverlay.style.display = "block";
|
nameOverlay.style.bottom = `${
|
viewer.canvas.clientHeight - position.y
|
}px`;
|
nameOverlay.style.left = `${position.x}px`;
|
const name = pickedFeature.getProperty("BIN");
|
nameOverlay.textContent = name;
|
},
|
openQuery(){
|
// console.log(Viewer.camera)
|
// return
|
this.query = !this.query
|
let that = this
|
if(this.query){
|
|
window.identifyToolHandle = new Cesium.ScreenSpaceEventHandler(sgworld._Viewer.canvas);
|
window.identifyToolHandle.setInputAction(function onMouseMove(movement){
|
if (Cesium.defined(highlighted.feature)) {
|
highlighted.feature.color = highlighted.originalColor;
|
highlighted.feature = undefined;
|
}
|
const pickedFeature = Viewer.scene.pick(movement.endPosition);
|
if (!Cesium.defined(pickedFeature)) {
|
return;
|
}
|
if (pickedFeature !== selected.feature) {
|
highlighted.feature = pickedFeature;
|
Cesium.Color.clone(
|
pickedFeature.color,
|
highlighted.originalColor
|
);
|
pickedFeature.color = Cesium.Color.YELLOW;
|
}
|
},
|
Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
window.identifyToolHandle.setInputAction(function onLeftClick(click) {
|
let pickedFeature = Viewer.scene.pick(click.position);
|
if (Cesium.defined(selected.feature)) {
|
selected.feature.color = selected.originalColor;
|
selected.feature = undefined;
|
}
|
if (!Cesium.defined(pickedFeature)) {
|
return;
|
}
|
if (selected.feature === pickedFeature) {
|
return;
|
}
|
selected.feature = pickedFeature;
|
if (pickedFeature === highlighted.feature) {
|
Cesium.Color.clone(
|
highlighted.originalColor,
|
selected.originalColor
|
);
|
highlighted.feature = undefined;
|
} else {
|
Cesium.Color.clone(pickedFeature.color, selected.originalColor);
|
}
|
pickedFeature.color = Cesium.Color.LIME;
|
|
let pick,type
|
if (pickedFeature._content._model) {
|
pick = pickedFeature;
|
type = pickedFeature._content._model.type
|
}
|
that.$refs.IdentifyTool.open(pick, type)
|
sgworld.coreMap.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
}else {
|
if (Cesium.defined(selected.feature)) {
|
selected.feature.color = selected.originalColor;
|
selected.feature = undefined;
|
}
|
window.identifyToolHandle.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
window.identifyToolHandle.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
window.identifyToolHandle = null
|
}
|
},
|
toHome(){
|
// console.log(sgworld.Viewer.scene.camera)
|
if (SET_DEFAULT_CAMERA) {
|
let initialPoint = DEFAULT_CAMERA_POINT.split(",");
|
let x = Number(initialPoint[0]), y = Number(initialPoint[1]), z = Number(initialPoint[2]);
|
let h = Number(initialPoint[3]), p = Number(initialPoint[4]), r = Number(initialPoint[5]);
|
sgworld.camera.flyTo(x, y, z, h, p, r, 2);
|
}
|
},
|
updateTime() {
|
let date = new Date();
|
let year = date.getFullYear();
|
let month = date.getMonth() + 1;
|
let strDate = date.getDate();
|
let Hour = date.getHours(); // 获取当前小时数(0-23)
|
let Minute = date.getMinutes(); // 获取当前分钟数(0-59)
|
let Second = date.getSeconds();
|
this.timeY = year + " " + month + " " + strDate
|
this.timeH = Hour + ":" + Minute + ":" + Second
|
},
|
logOut() {
|
this.$confirm("确认要退出系统么?", "退出", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
removeToken();
|
this.$router.push("/login");
|
// this.$router.go(0);
|
})
|
.catch(() => { });
|
}
|
},
|
computed: {
|
...mapState(["username"]),
|
},
|
|
mounted() {
|
this.titleMain = APP_NAME
|
setInterval(() => {
|
this.updateTime()
|
}, 1000)
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.topMain {
|
height: 84px;
|
width: 100%;
|
background-size: 100% 84px;
|
background-image: url("../../../assets/img/矩形 1 拷贝 2.png");
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
.centerImg {
|
width: 982px;
|
height: 68px;
|
background-image: url("../../../assets/img/中间LOGO.png");
|
background-size: 982px 68px;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
line-height: 1.5;
|
color: #fff;
|
font-size:34px;
|
letter-spacing:2px;
|
font-weight: 600;
|
text-shadow: 2px 2px 1px rgb(61, 81, 110),0px 0px 5px rgb(242, 250, 255),;
|
}
|
.centerImg::before {
|
content: attr(text);
|
position: absolute;
|
z-index: 10;
|
color: #FEFEFE;
|
// 渐变样式
|
background: linear-gradient(0deg, #57b9ff 0%, #f7fcff 70%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
// 去除继承父级样式
|
text-shadow: none;
|
}
|
|
.leftImg {
|
width: 467px;
|
height: 101px;
|
background-image: url("../../../assets/img/组1zuo.png");
|
background-size: 467px 101px;
|
margin-right: auto;
|
pointer-events: none;
|
|
.leftbox {
|
width: 280px;
|
height: 26px;
|
// background-color:#fff;
|
// border: 1px solid #FFFFFF;
|
position: absolute;
|
left: 76px;
|
top: 39px;
|
|
.timebox {
|
margin-left: 2px;
|
width: 65px;
|
height: 26px;
|
position: absolute;
|
// right: 128px;
|
top: 3px;
|
|
.timeY {
|
// padding-top: 2px;
|
width: 85px;
|
height: 26px;
|
line-height: 26px;
|
font-size: 16px;
|
font-family: PangMenZhengDao;
|
font-weight: 400;
|
color: #FFFFFF;
|
position: absolute;
|
left: 5px;
|
top: -5px;
|
text-shadow: 0px 1px 1px rgba(5, 12, 25, 0.54);
|
}
|
|
.timeH {
|
width: 70px;
|
height: 26px;
|
font-size: 18px;
|
line-height: 26px;
|
position: absolute;
|
left: 100px;
|
top: -5px;
|
font-family: PangMenZhengDao;
|
font-weight: 400;
|
color: #9ecdfd;
|
text-shadow: 0px 1px 1px rgba(5, 12, 25, 0.54);
|
}
|
}
|
}
|
}
|
|
.rightImg {
|
width: 467px;
|
height: 101px;
|
margin-left: auto;
|
background-size: 467px 101px;
|
background-image: url("../../../assets/img/组1 拷贝.png");
|
|
.rightbox {
|
width: 280px;
|
height: 26px;
|
// background-color:#fff;
|
// border: 1px solid #FFFFFF;
|
position: absolute;
|
right: 76px;
|
top: 39px;
|
.query{
|
width: 30px;
|
height: 30px;
|
background-image: url("../../../assets/img/i.png");
|
background-size: 30px 30px;
|
position:absolute;
|
cursor: pointer;
|
right: 180px;
|
margin-top:0px;
|
pointer-events: all
|
};
|
.home{
|
width: 26px;
|
height: 26px;
|
background-image: url("../../../assets/img/fangzi.png");
|
background-size: 26px 26px;
|
position:absolute;
|
cursor: pointer;
|
right: 140px;
|
margin-top:2px;
|
pointer-events: all
|
}
|
|
// float:right;
|
.segmentation {
|
width: 2px;
|
height: 19px;
|
// display:inline-block;
|
position: absolute;
|
right: 126px;
|
top: 7px;
|
background-size: 2px 19px;
|
background-image: url("../../../assets/img/segmentation.png");
|
}
|
|
.weather {
|
width: 31px;
|
height: 32px;
|
position: absolute;
|
right: 126px;
|
top: 0px;
|
// background-size: 31px 32px;
|
// background-image: url("../../../assets/img/touXiang.png");
|
}
|
|
.touXiang {
|
width: 31px;
|
height: 32px;
|
margin-top: -2px;
|
position: absolute;
|
right: 85px;
|
top: 0px;
|
background-size: 31px 32px;
|
background-image: url("../../../assets/img/touXiang.png");
|
}
|
|
.nameBG {
|
width: 80px;
|
height: 28px;
|
position: absolute;
|
right: 20px;
|
top: 0px;
|
background-size: 80px 28px;
|
background-image: url("../../../assets/img/nameBG.png");
|
font-size: 15.5px;
|
color: #aecaf5;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.close {
|
width: 26px;
|
height: 26px;
|
position: absolute;
|
right: 0px;
|
top: 1px;
|
background-size: 26px 26px;
|
background-image: url("../../../assets/img/close.png");
|
cursor: pointer;
|
pointer-events: all
|
}
|
}
|
|
}
|
}
|
</style>
|
