<template>
|
<div class="nav">
|
<div class="logo">
|
<div class="totalBtn">
|
<div
|
class="btns"
|
@click="showaside"
|
:class="btns === true ? 'newpic' : ''"
|
></div>
|
<div
|
class="btns1"
|
@click="showRuler"
|
:class="btns1 === true ? 'newpic1' : ''"
|
></div>
|
<div
|
class="btns2"
|
@click="showgetCheak"
|
:class="btns2 === true ? 'newpic2' : ''"
|
></div>
|
</div>
|
<div class="tq">
|
<div
|
class="btns3"
|
@click="showReturn"
|
:class="btns3 === true ? 'newpic3' : ''"
|
></div>
|
<div class="timefont">{{ time }}</div>
|
<div class="datefont">
|
|
<div>{{ week }}</div>
|
<div>{{ day }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
let tooltip, pickFeature;
|
export default {
|
data() {
|
return {
|
isShow: true,
|
time: "",
|
day: "",
|
week: "",
|
btns: false,
|
btns1: false,
|
btns2: false,
|
btns3: false,
|
measureData: [],
|
handler: null,
|
};
|
},
|
methods: {
|
//边框的显示隐藏
|
//边框的显示隐藏
|
showaside() {
|
this.btns = !this.btns;
|
if (this.isShow) {
|
this.$set(window.tedp.trame.leftStyle, "transition", "all 2.2s");
|
this.$set(window.tedp.trame.leftStyle, "width", 0);
|
this.$set(window.tedp.trame.leftStyle, "opacity", 0);
|
this.$set(
|
window.tedp.trame.leftStyle,
|
"transform",
|
"translateX(-1000px)"
|
);
|
this.$set(window.tedp.trame.rightStyle, "transition", "all 2.2s");
|
this.$set(window.tedp.trame.rightStyle, "width", 0);
|
this.$set(window.tedp.trame.rightStyle, "opacity", 0);
|
this.$set(
|
window.tedp.trame.rightStyle,
|
"transform",
|
"translateX(1000px)"
|
);
|
this.isShow = false;
|
} else {
|
this.$set(window.tedp.trame.leftStyle, "width", "0px");
|
this.$set(window.tedp.trame.leftStyle, "opacity", 1);
|
this.$set(window.tedp.trame.leftStyle, "transform", "translateX(0px)");
|
this.$set(window.tedp.trame.rightStyle, "width", "0px");
|
this.$set(window.tedp.trame.rightStyle, "opacity", 1);
|
this.$set(window.tedp.trame.rightStyle, "transform", "translateX(0px)");
|
this.isShow = true;
|
}
|
},
|
showRuler() {
|
this.btns1 = !this.btns1;
|
if (this.btns1) {
|
window.Sgworld.Analysis.setPointFly({
|
image: "../../../static/img/fly.png",
|
});
|
}
|
},
|
showgetCheak() {
|
this.btns2 = !this.btns2;
|
if (this.btns2) {
|
var selected = {
|
feature: undefined,
|
originalColor: new Cesium.Color(),
|
};
|
var highlighted = {
|
feature: undefined,
|
originalColor: new Cesium.Color(),
|
};
|
//鼠标移动3dtiles变色显示对应的属性信息
|
this.handler = new Cesium.ScreenSpaceEventHandler(
|
window.Viewer.scene.canvas
|
);
|
//let pickFeature
|
// 创建tooltip
|
tooltip = window.Sgworld.Core.CreateTooltip();
|
// 鼠标移动事件
|
this.handler.setInputAction((event) => {
|
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
} else {
|
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
pickFeature = undefined;
|
tooltip.show(false);
|
}
|
},
|
getDate() {
|
var date = new Date();
|
var year = date.getFullYear();
|
var month = date.getMonth() + 1;
|
month = month < 10 ? "0" + month : month;
|
var dates = date.getDate();
|
dates = dates < 10 ? "0" + dates : dates;
|
var arr = [
|
"星期日",
|
"星期一",
|
"星期二",
|
"星期三",
|
"星期四",
|
"星期五",
|
"星期六",
|
];
|
var day = date.getDay();
|
var hour = date.getHours();
|
// var half = hour >= 12 ? "下午" : "上午";
|
// hour = hour <= 12 ? hour : hour - 12;
|
// hour = hour < 10 ? "0" + hour : hour;
|
var min = date.getMinutes();
|
min = min < 10 ? "0" + min : min;
|
var sed = date.getSeconds();
|
sed = sed < 10 ? "0" + sed : sed;
|
this.day = year + "-" + month + "-" + dates;
|
this.week = arr[day];
|
this.time = hour + ":" + min + ":" + sed + "";
|
// return (year + '年' + month + '月' + dates + '日 ' + arr[day] + ' ' + half + hour + '点' + min + '分' + sed + '秒');
|
},
|
showReturn() {
|
this.btns3 = !this.btns3;
|
},
|
},
|
mounted() {
|
this.getDate();
|
setInterval(this.getDate, 1000);
|
},
|
};
|
</script>
|
<style scoped>
|
.logo {
|
position: relative;
|
width: 100%;
|
height: 200px;
|
background-image: url(../../assets/image/subject/top.png);
|
background-position: center;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
cursor: pointer;
|
}
|
.totalBtn{
|
transform: translate(20px,-10px);
|
}
|
.btns {
|
position: absolute;
|
width: 213px;
|
height: 58px;
|
background-image: url(~@/assets/image/test/组169.png);
|
left: 150px;
|
top: 75px;
|
background-size: 100% 100%;
|
|
}
|
.btns1 {
|
position: absolute;
|
width: 213px;
|
height: 58px;
|
background-image: url(~@/assets/image/change/fly.png);
|
left: 350px;
|
top: 75px;
|
background-size: 100% 100%;
|
}
|
.btns2 {
|
position: absolute;
|
width: 213px;
|
height: 58px;
|
background-image: url(~@/assets/image/test/组4.png);
|
left: 550px;
|
top: 75px;
|
background-size: 100% 100%;
|
}
|
.btns3 {
|
position: absolute;
|
width: 213px;
|
height: 58px;
|
background-image: url(~@/assets/image/subject/返回.png);
|
right: 400px;
|
top: 15px;
|
background-size: 100% 100%;
|
margin-right: 20px;
|
}
|
.newpic {
|
background-image: url(~@/assets/image/test/组5-1.png);
|
}
|
.newpic1 {
|
background-image: url(~@/assets/image/change/flya.png);
|
}
|
.newpic2 {
|
background-image: url(~@/assets/image/test/组4-1.png);
|
}
|
.newpic3{
|
|
background-image: url(~@/assets/image/subject/返回2.png);
|
}
|
.tq {
|
transform: translate(-150px, 15px);
|
display: flex;
|
z-index: 2;
|
position: absolute;
|
color: #d8d8d8;
|
top: 45px;
|
right: 50px;
|
}
|
.timefont {
|
margin-right: 40px;
|
font-size: 50px;
|
padding-right: 10px;
|
font-family: "dig";
|
color: rgb(56, 151, 255);
|
}
|
.datefont {
|
font-family: sans-serif;
|
font-size: 23px;
|
margin-top: 4px;
|
}
|
</style>
|
