<template>
|
<div class="main">
|
<div class="header">
|
<div class="top">
|
<div class="title">金川水电站生态流量监测系统</div>
|
<div class="time">
|
<span>{{ nowTime.date }}</span>
|
<span>{{ nowTime.time }}</span>
|
</div>
|
<div class="user-image">
|
<div>
|
<img src="../assets/images/screen/userImg.png" alt="">
|
</div>
|
<div class="loginOut">
|
<el-dropdown trigger="click">
|
<img src="../assets/images/screen/loginOut.png" alt="">
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item>
|
<span @click="toUserDetail" >个人中心</span>
|
</el-dropdown-item>
|
<el-dropdown-item divided>
|
<span @click="loginOut">退出登录</span>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</div>
|
</div>
|
<div class="left-icon"><img src="../assets/images/screen/head-left.png" alt=""></div>
|
<div class="right-icon"><img src="../assets/images/screen/head-left.png" alt=""></div>
|
</div>
|
<div class="nav">
|
<div class="nav-content">
|
<div v-for="(item,index) in btnList" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="content"><router-view></router-view></div>
|
</div>
|
</template>
|
<script setup>
|
import{ useRouter,useRoute } from 'vue-router'
|
import {ElMessageBox} from "element-plus";
|
import { removeToken } from '@/utils/auth'
|
|
const router = useRouter()
|
const route = ref(useRoute())
|
const loginOut = () =>{
|
ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then((e) => {
|
removeToken()
|
window.location.reload();
|
|
}).catch(() => { });
|
}
|
const toUserDetail = () =>{
|
router.push('/userCenter')
|
}
|
const btnList = ref([
|
{name:'总览',url:'/overview'},
|
{name:'生态流量',url:'/irrigate'},
|
{name:'图像监测', url:'/dma'},
|
{name:'设备管理',url:'/facility-screen'},
|
{name:'报警管理',url:'/alarm-screen'},
|
{name:'报表管理',url:'/reports'},
|
{name:'系统管理',url:'/user'},
|
])
|
const navTo = (item) =>{
|
router.push(item.url)
|
}
|
//获取当前时间
|
const nowTime = ref({})
|
const now = new Date()
|
const getTime = (now) => {
|
// 获取年月日时分秒
|
const year = now.getFullYear();
|
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
|
const day = String(now.getDate()).padStart(2, '0');
|
const hours = String(now.getHours()).padStart(2, '0');
|
const minutes = String(now.getMinutes()).padStart(2, '0');
|
const seconds = String(now.getSeconds()).padStart(2, '0');
|
|
// 获取星期
|
const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
|
const weekday = weekdays[now.getDay()];
|
|
// 拼接成指定格式的字符串
|
return nowTime.value = {
|
date:`${year}.${month}.${day} ${weekday}`,
|
time:`${hours}:${minutes}:${seconds}`,
|
}
|
}
|
getTime(now)
|
onMounted(()=>{
|
setInterval(()=>{
|
nowTime.value = getTime(new Date())
|
},1000)
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
.main{
|
background-image:url("../assets/images/screen/bcg.png");
|
background-size: 100% 100%;
|
width: 100%;
|
height: 100%;
|
.header{
|
width: 100%;
|
height: 14%;
|
.top{
|
position: relative;
|
width: 100%;
|
height: 82px;
|
background-image: url("../assets/images/screen/head.png");
|
background-size: 100% 100%;
|
.title{
|
width: 916px;
|
height: 39px;
|
position: absolute;
|
left:calc(50% - 458px);
|
text-align: center;
|
font-weight: normal;
|
font-size: 36px;
|
color: #F9FBFF;
|
line-height: 70px;
|
letter-spacing: 9px;
|
text-shadow:0 0 3px rgba(255,255,255,0.7);
|
}
|
.time{
|
position: absolute;
|
width: 200px;
|
top:5px;
|
left:26px;
|
display: flex;
|
justify-content: space-between;
|
line-height: 23px;
|
span{
|
font-weight: 400;
|
font-size: 16px;
|
color: #83D9F3;
|
}
|
span:last-child{
|
text-shadow:0 0 2px rgba(255,255,255,0.6);
|
}
|
}
|
.user-image{
|
position: absolute;
|
width: 55px;
|
height:30px;
|
top:5px;
|
right:26px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.loginOut img{
|
margin-top: 4px;
|
width:14px;
|
height:8px;
|
}
|
}
|
.left-icon{
|
position: absolute;
|
top: 50%;
|
img{
|
width: 452px;
|
height: 30px;
|
}
|
}
|
.right-icon{
|
position: absolute;
|
top: 50%;
|
right: 0;
|
img{
|
width: 459px;
|
height: 30px;
|
transform: scaleX(-1);
|
}
|
}
|
}
|
.nav{
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.nav-content{
|
width: 1758px;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-weight: 400;
|
font-size: 17px;
|
color: #FFFFFF;
|
line-height: 50px;
|
.plain{
|
width: 181px;
|
height: 50px;
|
background-image: url("../assets/images/screen/btnbg.png");
|
text-align: center;
|
}
|
.active{
|
background-image: url("../assets/images/screen/btnbg-active.png");
|
}
|
}
|
}
|
.content{
|
width: 100%;
|
height: 86%;
|
}
|
}
|
</style>
|
