<!--
* @Description:
* @Author: wwf
* @Date: 2022-03-31 14:04:35
* @LastEditTime: 2022-03-31 16:08:59
* @LastEditors: wwf
-->
<template>
<div class="globalHeader">
<div class="globalHeaderContent">
<div class="globalHeaderContent_title">
<img src="../../assets/header/logo.png" alt="" />
<span>南水北调小洪河监测站数字孪生平台</span>
</div>
<div class="globalHeaderContent_tab">
<ul>
<li
:class="{ active: showIndex == index }"
v-for="(item, index) in list"
:key="index"
@click="clickItem(index)"
>
{{ item.name }}
</li>
</ul>
</div>
<div class="globalHeaderContent_date">
<div class="date">
<div class="time">{{ time }}</div>
<div class="dateTime">
<div>{{ week }}</div>
<div>{{ date }}</div>
</div>
</div>
<div class="pm">PM 52</div>
<div class="shidu">湿度 26%RH</div>
<div class="tem">
<img src="../../assets/header/sun.png" alt="" />
17 ℃
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
interface dataType {
date: string
time: string
week: string
showIndex: Number
}
export default defineComponent({
name: 'GlobalHeader',
setup() {
const list: any[] = [
{
name: '监测数据'
},
{
name: '设施调控'
},
{
name: '巡检养护'
},
{
name: '防护预警'
}
]
const state: dataType = reactive({
date: '',
time: '',
week: '',
showIndex: 0
})
// 获取时间接口
const getTime = async () => {
var myDate = new Date()
let month = (myDate.getMonth() + 1).toString().padStart(2, '0')
let day = myDate.getDate().toString().padStart(2, '0')
let hour = myDate.getHours().toString().padStart(2, '0')
let minutes = myDate.getMinutes().toString().padStart(2, '0')
let seconed = myDate.getSeconds().toString().padStart(2, '0')
state.date = myDate.getFullYear() + '-' + month + '-' + day
state.time = hour + ':' + minutes + ':' + seconed
}
// 获取当前星期几
const getWeekDate = () => {
var now = new Date()
var day = now.getDay()
var weeks = [
'星期日',
'星期一',
'星期二',
'星期三',
'星期四',
'星期五',
'星期六'
]
state.week = weeks[day]
}
getTime()
getWeekDate()
setInterval(() => {
getWeekDate()
}, 1000 * 60 * 60 * 24)
setInterval(() => {
getTime()
}, 1000)
const clickItem = (index: any) => {
state.showIndex = index
}
return {
...toRefs(state),
list,
clickItem
}
}
})
</script>
<style scoped lang="scss">
.globalHeader {
position: absolute;
top: 0;
left: 0;
width: 1920px;
height: 80px;
background-color: #717f99;
padding-top: 10px;
.globalHeaderContent {
width: 1920px;
height: 70px;
background: url('../../assets/header/header.png') no-repeat;
background-size: cover;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.globalHeaderContent_title {
flex: 1;
img {
width: 71px;
height: 71px;
margin: 0 20px;
vertical-align: bottom;
}
span {
display: inline-block;
font-size: 30px;
font-family: Source Han Sans SC-Bold, Source Han Sans SC;
font-weight: bold;
color: #ffffff;
line-height: 65px;
text-shadow: 2px 2px 2px #000000;
-webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
}
}
.globalHeaderContent_tab {
flex: 1;
margin-left: 85px;
ul {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
li {
font-size: 20px;
font-family: Source Han Sans SC-Medium, Source Han Sans SC;
font-weight: 500;
color: #ffffff;
line-height: 30px;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.67);
-webkit-background-clip: text;
cursor: pointer;
}
.active {
font-size: 24px;
font-family: Source Han Sans SC-Medium, Source Han Sans SC;
font-weight: 500;
color: #f1feff;
line-height: 65px;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.67);
-webkit-background-clip: text;
cursor: pointer;
border-bottom: 3px solid #24d8b9;
}
}
}
.globalHeaderContent_date {
flex: 1;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
.date {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin-left: 40px;
.time {
font-size: 26px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 0px;
letter-spacing: 2px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
-webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
margin-right: 10px;
}
.dateTime {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
div {
font-size: 12px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 18px;
// -webkit-background-clip: text;
}
}
}
.pm {
width: 100px;
height: 20px;
font-size: 18px;
font-family: Source Han Sans SC-Regular, Source Han Sans SC;
font-weight: 400;
color: #ffffff;
line-height: 20px;
text-align: center;
border-left: 2px solid #b0b4bd;
border-right: 2px solid #b0b4bd;
}
.shidu {
width: 125px;
height: 20px;
font-size: 18px;
font-family: Source Han Sans SC-Regular, Source Han Sans SC;
font-weight: 400;
color: #ffffff;
line-height: 20px;
border-right: 2px solid #b0b4bd;
}
.tem {
img {
width: 28px;
height: 28px;
vertical-align: middle;
}
font-size: 18px;
font-family: Source Han Sans SC-Regular, Source Han Sans SC;
font-weight: 400;
color: #ffc21a;
}
}
}
}
</style>