feat:添加大屏页面

web

2025-04-07 6acd20f3f37e988488b681a1a394b37a32f3ffe6

 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 class="content">
            <router-view></router-view>
        </div>
        </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%;
            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;
            justify-content: center;
            font-size: 48px;
            font-weight: 700;
            color: #fff;
            position: relative;
            z-index: 100;
                        .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: center;
                border: 1px solid #fff;
                background-color: rgba(23, 108, 229, 0.3);
                color: #fff;
                font-size: 22px;
                cursor: pointer;
            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: 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>