From 6acd20f3f37e988488b681a1a394b37a32f3ffe6 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期一, 07 四月 2025 16:17:41 +0800
Subject: [PATCH] feat:添加大屏页面
---
src/screen/index.vue | 269 ++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 223 insertions(+), 46 deletions(-)
diff --git a/src/screen/index.vue b/src/screen/index.vue
index d22b064..7651e4b 100644
--- a/src/screen/index.vue
+++ b/src/screen/index.vue
@@ -1,91 +1,268 @@
<template>
<div class="main">
<div class="header">
- <div class="top">大屏 </div>
+ <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="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>
<div class="nav">
- <div v-for="(item,index) in btnList" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div>
+ <div class="nav-content">
+ <div class="nav-content-l">
+ <div v-for="(item,index) in btnList.slice(0,4)" :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(4,8)" :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 class="content"><router-view></router-view></div>
</div>
</template>
<script setup>
import{ useRouter,useRoute } from 'vue-router'
-import useUserStore from '@/store/modules/user.js'
-import {onMounted} from "vue";
+import {ElMessageBox} from "element-plus";
+import { removeToken } from '@/utils/auth'
-const userStore = useUserStore()
const router = useRouter()
const route = ref(useRoute())
-const btnList = ref([
- {name:'首页总览',url:'/screen/home'},
- {name:'生态流量',url:'/screen/ecology'},
- {name:'图像监测', url:'/screen/graphic'},
- {name:'设备管理',url:'/screen/shebei'},
- {name:'报警管理',url:'/screen/warning'},
- {name:'报表管理',url:'/screen/report'},
-])
+const loginOut = () =>{
+ ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
+ confirmButtonText: '确定',
+ cancelButtonText: '取消',
+ type: 'warning'
+ }).then((e) => {
+ removeToken()
+ window.location.reload();
+
+ }).catch(() => { });
+}
+
+const toUserDetail = () =>{
+ router.push('/userCenter')
+}
+
+const btnList = ref([])
const navTo = (item) =>{
router.push(item.url)
}
-onMounted(() => {
- if(userStore.userType == 1) {
- btnList.value.push({name:'系统管理',url:'/user'})
- }
-})
+//获取当前时间
+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: 14%;
- background-color: rgb(82, 120, 128);
- position: relative;
+ height: 10%;
.top{
- height: 60%;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 48px;
- font-weight: 700;
- color: #fff;
position: relative;
- z-index: 100;
+ 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{
- display: flex;
- height: 40%;
position: relative;
z-index: 100;
- .plain{
- flex-grow: 1;
- height: 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;
- align-items: center;
- justify-content: center;
- border: 1px solid #fff;
- background-color: rgba(23, 108, 229, 0.3);
- color: #fff;
- font-size: 22px;
- cursor: pointer;
+ }
+ &-r{
+ width: 35%;
+ display: flex;
+ }
+ .plain{
+ width: 10rem;
+ height: 3.5rem;
+ line-height: 3.5rem;
+ background-image: url("../assets/images/screen/btnbg.png");
+ background-size: 100% 100%;
+ text-align: center;
}
.active{
- background-color: #91BDDB;
+ background-image: url("../assets/images/screen/btnbg-active.png");
}
}
}
.content{
width: 100%;
- height: 86%;
+ height: 90%;
+ background: url("@/assets/images/screen/content_bg.png") no-repeat;
+ background-size: 100% 100%;
+ padding: 0 1.5rem 1.5rem;
}
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3