160 lines
3.8 KiB
Vue
160 lines
3.8 KiB
Vue
<template>
|
||
<div class="body">
|
||
<div class="head">
|
||
<div class="left">{{ time }}</div>
|
||
<div class="center">
|
||
<img src="@/assets/images/newimg.png" />
|
||
<div>
|
||
<img src="@/assets/images/jt.png" />
|
||
<p>区间测速统计大屏</p>
|
||
<img
|
||
src="@/assets/images/jt.png"
|
||
style="transform: rotate(-180deg)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="user">
|
||
<div style="text-align: right;">
|
||
<span class="user-nickname"> {{ userStore.nickName }} </span>
|
||
<span class="typename">{{ deptName }}</span>
|
||
</div>
|
||
<img :src="userStore.avatar" class="user-avatar" />
|
||
</div>
|
||
<div class="signOut" @click="logout">退出登录</div>
|
||
</div>
|
||
</div>
|
||
<statisticalTable />
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { useFullscreen } from '@vueuse/core'
|
||
|
||
const { isFullscreen, enter, exit, toggle } = useFullscreen()
|
||
|
||
|
||
|
||
import statisticalTable from "../statisticalTable/index.vue";
|
||
import useUserStore from "@/store/modules/user";
|
||
const userStore = useUserStore();
|
||
import { ElMessageBox } from "element-plus";
|
||
|
||
const deptName=ref("")
|
||
userStore.getInfo().then(r=>{
|
||
deptName.value=r.deptName;
|
||
})
|
||
// if(!isFullscreen){
|
||
// document.querySelector("body").requestFullscreen()
|
||
// }
|
||
function logout() {
|
||
ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(() => {
|
||
userStore.logOut().then(() => {
|
||
location.href = "/index";
|
||
});
|
||
})
|
||
.catch(() => {});
|
||
}
|
||
const time = ref("");
|
||
formatTime();
|
||
setInterval(() => {
|
||
formatTime();
|
||
}, 1000);
|
||
function formatTime() {
|
||
function formatDateTime(date) {
|
||
let year = date.getFullYear();
|
||
let month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以要加1，并且需要补零
|
||
let day = ("0" + date.getDate()).slice(-2); // 日期补零
|
||
let hours = ("0" + date.getHours()).slice(-2); // 小时补零
|
||
let minutes = ("0" + date.getMinutes()).slice(-2); // 分钟补零
|
||
let seconds = ("0" + date.getSeconds()).slice(-2); // 秒补零
|
||
return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
|
||
}
|
||
time.value = formatDateTime(new Date());
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.body{
|
||
background: #F6F6F6;
|
||
min-width: 1500px;
|
||
overflow: auto;
|
||
}
|
||
.head {
|
||
background: linear-gradient(#4f8aff 0%, #1235ca 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0px 15px;
|
||
justify-content: space-between;
|
||
height: 60px;
|
||
margin-bottom: 10px;
|
||
color: #fff;
|
||
.center {
|
||
position: relative;
|
||
& > img {
|
||
height: 100px;
|
||
// width: 556px;
|
||
}
|
||
div {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
img{
|
||
width: 30px;
|
||
}
|
||
p {
|
||
margin: 0px 15px;
|
||
font-weight: 500;
|
||
font-size: 29px;
|
||
letter-spacing: 4px;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100%;
|
||
.signOut {
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
|
||
}
|
||
.user {
|
||
display: flex;
|
||
align-items: center;
|
||
border-right: 1px solid rgba(255,255,255,0.4);
|
||
margin-right: 15px;
|
||
height: 100%;
|
||
img {
|
||
width: 38px;
|
||
height: 38px;
|
||
object-fit: cover;
|
||
border-radius: 38px;
|
||
margin: 0px 15px;
|
||
}
|
||
div {
|
||
|
||
.user-nickname {
|
||
font-weight: 800;
|
||
font-size: 12px;
|
||
display: block;
|
||
}
|
||
.typename {
|
||
font-size: 12px;
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|