From f9ac8fe8cbbb5a91fb047a9e90dec81efca11a01 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期一, 09 六月 2025 17:04:14 +0800
Subject: [PATCH] fix:修改框架
---
src/assets/images/login/login_icon.png | 0
src/assets/images/screen/btnbg-active.png | 0
src/assets/images/login/login_bcg1.png | 0
src/assets/images/screen/head.png | 0
src/assets/images/screen/content_bg.png | 0
src/assets/images/login/login_bcg.png | 0
src/assets/images/screen/btnbg.png | 0
src/assets/images/screen/userImg.png | 0
src/views/screen/home/index.vue | 132 ------------------
/dev/null | 0
src/screen/index.vue | 246 +++++++++++++++++++++++++++++-----
package.json | 2
src/assets/images/screen/loginOut.png | 0
13 files changed, 208 insertions(+), 172 deletions(-)
diff --git a/package.json b/package.json
index 7ae122f..554ac59 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "jc-hydropower-station-web",
"version": "3.8.7",
"description": "管理系统",
- "author": "金川项目",
+ "author": "泾川项目",
"license": "MIT",
"type": "module",
"scripts": {
diff --git a/src/assets/images/login/login_bcg.png b/src/assets/images/login/login_bcg.png
new file mode 100644
index 0000000..2eeb2ff
--- /dev/null
+++ b/src/assets/images/login/login_bcg.png
Binary files differ
diff --git a/src/assets/images/login/login_bcg1.png b/src/assets/images/login/login_bcg1.png
new file mode 100644
index 0000000..db77bff
--- /dev/null
+++ b/src/assets/images/login/login_bcg1.png
Binary files differ
diff --git a/src/assets/images/login/login_icon.png b/src/assets/images/login/login_icon.png
new file mode 100644
index 0000000..6f4e94d
--- /dev/null
+++ b/src/assets/images/login/login_icon.png
Binary files differ
diff --git a/src/assets/images/map-bg.png b/src/assets/images/map-bg.png
deleted file mode 100644
index 474c290..0000000
--- a/src/assets/images/map-bg.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/images/messageInfo-box.png b/src/assets/images/messageInfo-box.png
deleted file mode 100644
index b371547..0000000
--- a/src/assets/images/messageInfo-box.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/images/point.png b/src/assets/images/point.png
deleted file mode 100644
index 6258ce3..0000000
--- a/src/assets/images/point.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/images/screen/btnbg-active.png b/src/assets/images/screen/btnbg-active.png
new file mode 100644
index 0000000..7221d38
--- /dev/null
+++ b/src/assets/images/screen/btnbg-active.png
Binary files differ
diff --git a/src/assets/images/screen/btnbg.png b/src/assets/images/screen/btnbg.png
new file mode 100644
index 0000000..0f38a44
--- /dev/null
+++ b/src/assets/images/screen/btnbg.png
Binary files differ
diff --git a/src/assets/images/screen/content_bg.png b/src/assets/images/screen/content_bg.png
new file mode 100644
index 0000000..96b7f87
--- /dev/null
+++ b/src/assets/images/screen/content_bg.png
Binary files differ
diff --git a/src/assets/images/screen/head.png b/src/assets/images/screen/head.png
new file mode 100644
index 0000000..abfacaf
--- /dev/null
+++ b/src/assets/images/screen/head.png
Binary files differ
diff --git a/src/assets/images/screen/loginOut.png b/src/assets/images/screen/loginOut.png
new file mode 100644
index 0000000..582f66e
--- /dev/null
+++ b/src/assets/images/screen/loginOut.png
Binary files differ
diff --git a/src/assets/images/screen/userImg.png b/src/assets/images/screen/userImg.png
new file mode 100644
index 0000000..3e8ed9c
--- /dev/null
+++ b/src/assets/images/screen/userImg.png
Binary files differ
diff --git a/src/screen/index.vue b/src/screen/index.vue
index e598b10..d1daa78 100644
--- a/src/screen/index.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/screen/home/index.vue b/src/views/screen/home/index.vue
index 5d8d975..a477325 100644
--- a/src/views/screen/home/index.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.3