<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 class="home">
|
<router-link to="/screen/home"><img src="@/assets/images/screen/homeIcon.png" alt="" /></router-link>
|
</div>
|
<div class="loginOut">
|
<el-dropdown trigger="click">
|
<div class="user">
|
<img class="userImg" src="../assets/images/screen/userImg.png" alt="">
|
<img class="downIcon" src="../assets/images/screen/loginOut.png" alt="">
|
</div>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item>
|
<span @click="loginOut">退出登录</span>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</div>
|
</div>
|
</div>
|
<div class="nav">
|
<div class="nav-content">
|
<div class="nav-content-l">
|
<div v-for="(item,index) in btnList.slice(0,3)" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div>
|
</div>
|
<div class="nav-content-r">
|
<div v-for="(item,index) in btnList.slice(3,6)" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div>
|
</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 btnList = ref([
|
{name:'首页总览',url:'/screen/home'},
|
{name:'数据详情',url:'/screen/pumpInfo'},
|
{name:'泵站监控',url:'/screen/monitor'},
|
{name:'报表管理',url:'/screen/report'},
|
{name:'报警监管',url:'/screen/operation'},
|
{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:rgba(8,28,65,1);
|
background-size: 100% 100%;
|
width: 100%;
|
height: 100%;
|
.header{
|
width: 100%;
|
height: 10%;
|
.top{
|
position: relative;
|
width: 100%;
|
height: 6.5rem;
|
background-image: url("../assets/images/screen/head.png");
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
.title{
|
width: 57rem;
|
height: 2rem;
|
position: absolute;
|
left:calc(50% - 28.5rem);
|
text-align: center;
|
font-size: 1.6rem;
|
font-weight: 800;
|
color: #F9FBFF;
|
line-height: 70px;
|
text-shadow:0 0 3px rgba(255,255,255,0.7);
|
}
|
.time{
|
position: absolute;
|
width: 13rem;
|
top: 0.5rem;
|
left: 2rem;
|
display: flex;
|
justify-content: space-between;
|
line-height: 1.6rem;
|
span{
|
font-weight: 400;
|
color: #83D9F3;
|
}
|
span:last-child{
|
text-shadow:0 0 2px rgba(255,255,255,0.6);
|
}
|
}
|
.select{
|
width: 8rem;
|
height: 2rem;
|
position: absolute;
|
top: 0.1rem;
|
right: 8rem;
|
.select-item {
|
:deep(.el-select__wrapper) {
|
background: rgba(6, 47, 97, 0.8) !important;
|
border: solid #14528f 0.125rem;
|
height: 2rem;
|
}
|
:deep(.el-select__placeholder) {
|
color: #07a4ff;
|
font-size: 0.75rem;
|
}
|
}
|
}
|
.user-image{
|
position: absolute;
|
width: 6rem;
|
height: 2rem;
|
top: 0.5rem;
|
right: 2rem;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.home{
|
img{
|
width: 1.3rem;
|
height: 1.3rem;
|
}
|
}
|
.loginOut{
|
.user{
|
display: flex;
|
align-items: center;
|
.userImg{
|
width: 1.3rem;
|
height: 1.3rem;
|
margin-right: 0.5rem;
|
}
|
.downIcon{
|
margin-top: 0.1rem;
|
width: 0.8rem;
|
height: 0.6rem;
|
}
|
}
|
}
|
}
|
.left-icon{
|
position: absolute;
|
top: 50%;
|
img{
|
width: 28rem;
|
height: 1.87rem;
|
}
|
}
|
.right-icon{
|
position: absolute;
|
top: 50%;
|
right: 0;
|
img{
|
width: 28rem;
|
height: 1.87rem;
|
transform: scaleX(-1);
|
}
|
}
|
}
|
.nav{
|
position: relative;
|
z-index: 100;
|
margin-top: -4.5rem;
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.nav-content{
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-weight: 400;
|
font-size: 1.1rem;
|
color: #FFFFFF;
|
line-height: 3rem;
|
&-l{
|
width: 35%;
|
display: flex;
|
}
|
&-r{
|
width: 35%;
|
display: flex;
|
}
|
.plain{
|
width: 15rem;
|
height: 3.5rem;
|
line-height: 3.5rem;
|
background-image: url("../assets/images/screen/btnbg.png");
|
background-size: 100% 100%;
|
text-align: center;
|
}
|
.active{
|
background-image: url("../assets/images/screen/btnbg-active.png");
|
}
|
}
|
}
|
.content{
|
width: 100%;
|
height: 90%;
|
background: url("@/assets/images/screen/content_bg.png") no-repeat;
|
background-size: 100% 100%;
|
padding: 0 1.5rem 1rem;
|
}
|
}
|
</style>
|
