fix:修改框架

web

2025-06-09 f9ac8fe8cbbb5a91fb047a9e90dec81efca11a01

fix:修改框架

 package.json

@@ -2,7 +2,7 @@
  "name": "jc-hydropower-station-web",
  "version": "3.8.7",
  "description": "管理系统",
  "author": "金川项目",
  "author": "泾川项目",
  "license": "MIT",
  "type": "module",
  "scripts": {

 src/assets/images/login/login_bcg.png

 src/assets/images/login/login_bcg1.png

 src/assets/images/login/login_icon.png

 src/assets/images/map-bg.png

Binary files differ

 src/assets/images/messageInfo-box.png

Binary files differ

 src/assets/images/point.png

Binary files differ

 src/assets/images/screen/btnbg-active.png

 src/assets/images/screen/btnbg.png

 src/assets/images/screen/content_bg.png

 src/assets/images/screen/head.png

 src/assets/images/screen/loginOut.png

 src/assets/images/screen/userImg.png

 src/screen/index.vue

@@ -1,86 +1,252 @@
<template>
    <div class="main">
        <div class="header">
            <div class="top">大屏 </div>
            <div class="top">
                <div class="title">xxxxxxxxxxxxx大屏</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>
            <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";

const userStore = useUserStore()
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:'/screen/home'}
    {name:'首页总览',url:'/screen/home'},
    {name:'系统监管',url:'/user'},
])

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-image:url("../assets/images/screen/bcg.png");
    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: 3rem;
                height: 2rem;
                top: 0.5rem;
                right: 2rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .loginOut img{
                    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>

 src/views/screen/home/index.vue

@@ -1,146 +1,16 @@
<template>
    <div class="home">
        <div class="home-bg"></div>
        <div class="home-c">
            <div class="point">
                <div class="point-address"></div>
                <div class="point-message">
                    <div class="video-box">
                        <el-icon><VideoPlay /></el-icon>
                    </div>
                    <div class="info-box">
                        <div class="info-t">水电站流量监测点</div>
                        <div class="info-sw">水位：<span>500</span>m</div>
                        <div class="info-ls">流速：<span>15</span>m/s</div>
                        <div class="info-ssls">瞬时流速：<span>150</span>m/s</div>
                        <div class="info-ljll">
                            累计流量：
                            <el-select
                                v-model="selectll"
                                class="m-2"
                                placeholder="Select"
                                size="small"
                                style="width: 240px"
                            >
                                <el-option
                                    v-for="(item, idx) in liuliangOptions"
                                    :key="idx"
                                    :label="item.label"
                                    :value="idx"
                                />
                            </el-select>
                            <span>{{ liuliangOptions[selectll].value }}</span>m/s
                        </div>
                    </div>
                </div>
            </div>
        </div>
        11111
    </div>
</template>


<script setup>

import {ref} from "vue";

const selectll = ref(0)

const liuliangOptions = [
    { label: '总计流量', value: 500 },
    { label: '日累计流量', value: 1000 },
    { label: '周累计流量', value: 10000 },
    { label: '月累计流量', value: 300000 },
    { label: '年累计流量', value: 3600000 },
]

</script>


<style scoped lang="scss">
.home{
    height: 100%;
    .home-bg{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: url("@/assets/images/map-bg.png") no-repeat;
        background-size: 100% 100%;
        z-index: 11;
    }
    .home-c{
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 20;
        .point{
            position: absolute;
            left: 58%;
            top: 30%;
            .point-address{
                width: 35px;
                height: 40px;
                background: url("@/assets/images/point.png") no-repeat;
                background-size: 100% 100%;
            }
            .point-message{
                width: 600px;
                height: 200px;
                background: url("@/assets/images/messageInfo-box.png") no-repeat;
                background-size: 100% 100%;
                position: absolute;
                left: -600px;
                top: -100px;
                padding: 30px 50px 30px 30px;
                color: #fff;
                display: flex;
                align-items: center;
                gap: 20px;
                .video-box{
                    flex-shrink: 0;
                    width: 200px;
                    height: 138px;
                    line-height: 138px;
                    text-align: center;
                    font-size: 38px;
                    background: #cccb40;
                }
                .info-box{
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .info-t{
                        font-size: 20px;
                    }
                    .info-ljll{
                        display: flex;
                        align-items: center;
                        :deep(.el-select){
                            width: 100px !important;
                            .el-select__wrapper{
                                color: #fff;
                                background: transparent;
                                .el-select__selected-item{
                                    color: #fff;
                                }
                                .el-select__suffix .el-icon{
                                    color: #fff;
                                }
                                &:hover{
                                    box-shadow: none;
                                }
                            }
                        }
                    }
                    span{
                        display: inline-block;
                        padding: 0 10px;
                    }
                }
            }
        }
    }
}
</style>