页面测试

src/pages/components/HeadMenu.vue

@@ -1,19 +1,138 @@
 <template>
     <div>
+        <div class="bigBox">
+            <!-- 左侧标题 -->
+            <div class="monyBox">
+                <el-icon class="folders">
+                    <FolderRemove />
+                </el-icon>
+                <span class="headSpan">变电站scd检测</span>
+            </div>
+            <!-- 右侧功能 -->
+            <div class="setBox">
+                <!-- 返回图标 -->
+                <div style="padding-right: 10px;border-right: 1px solid white;">
+                    <span class="outImg">
+                        <img class="backImg" src="../../assets/icon/back_to.png" alt="">
+                    </span>
+                </div>
+                <!-- 时间、日期显示 -->
+                <div>
+                    <span class="date" style="margin-right: 10px;">{{ getDate() }}</span>
+                    <span class="date">{{ times }}</span>
+                </div>
+                <!-- 用户栏 -->
+                <div>
 
+                </div>
+                <!-- 最小化，关闭 -->
+                <div>
+
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
+import { ref, onMounted } from 'vue'
 export default {
-    setup () {
-        
-
-        return {}
+    setup() {
+        let times = ref('')
+        function getDate() {
+            const currentDate = new Date();
+            const year = currentDate.getFullYear();
+            const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1，并补零
+            const day = currentDate.getDate().toString().padStart(2, '0'); // 补零
+            const formattedDate = `${year}.${month}.${day}`;
+            return formattedDate
+        }
+        function getTime() {
+            let currentDate = new Date();
+            let hours = currentDate.getHours().toString().padStart(2, '0');
+            let minutes = currentDate.getMinutes().toString().padStart(2, '0');
+            let seconds = currentDate.getSeconds().toString().padStart(2, '0');
+            let formattedTime = `${hours}:${minutes}:${seconds}`;
+            times.value = formattedTime
+        }
+        onMounted(() => {
+            getTime()
+            setInterval(() => {
+                getTime()
+            }, 1000)
+        })
+        return {
+            getDate,
+            getTime,
+            times,
+        }
     }
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
+.bigBox {
+    width: 97vw;
+    height: 55px;
+    /* border: 1px solid red; */
+    margin: 0 auto;
+    margin-left: -10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
 
+.monyBox {
+    width: 230px;
+    height: 50px;
+    line-height: 50px;
+
+}
+
+.folders {
+    font-size: 26px;
+    color: #BAC0E1;
+}
+
+.headSpan {
+    background: linear-gradient(0deg, #BAC0E1 50%, #EDF2FF 50%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    font-size: 26px;
+}
+
+.setBox {
+    width: 300px;
+    height: 50px;
+    border: 1px solid white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.outImg {
+    display: block;
+    width: 26px;
+    height: 26px;
+    background: linear-gradient(to bottom, #BAC0E1, #EDF2FF);
+    border-radius: 50%;
+    text-align: center;
+    line-height: 26px;
+}
+
+.backImg {
+    width: 14px;
+    height: 14px;
+    z-index: 2;
+}
+
+.date {
+    background: linear-gradient(0deg, #BAC0E1 50%, #EDF2FF 50%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    font-size: 14px;
+    border-bottom: 1px dotted white;
+}
 </style>

src/pages/components/SideMenu.vue

@@ -2,8 +2,10 @@
     <div>
         <div class="bigBox">
             <template v-for="(item, index) in menuList">
-                <div class="menuBox">
-                    <img :src="item.noChoose" alt="">
+                <div class="menuBox" @click="routeBoxClick(item)">
+                    <img :style="{ 'background': item.isChosen ? 'linear-gradient(138deg, #dbdbdb 0%, #cccecf 100%)' : 'none' }"
+                        :src="item.isChosen ? item.isChoose : item.noChoose" class="rImg" alt="">
+                    <p class="rp">{{ item.name }}</p>
                 </div>
             </template>
         </div>
@@ -12,41 +14,101 @@
 
 <script>
 import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 import allImg from "../../../src/utils/allImg.js"
 export default {
     setup() {
         let menuList = ref([
             {
                 name: "检测任务",
-                route: "/checkMession",
+                route: "/home/mission",
                 id: 1,
                 noChoose: allImg.searchGray,
-                isChoose: allImg.searchBlue
+                isChoose: allImg.searchBlue,
+                isChosen: true
             },
             {
                 name: "报告结果",
-                route: "/check",
-                id: 2
+                route: "/home/report",
+                id: 2,
+                noChoose: allImg.reportGray,
+                isChoose: allImg.reportBlue,
+                isChosen: false
             },
             {
                 name: "基础设置",
-                route: "/setting",
-                id: 3
+                route: "/home/setting",
+                id: 3,
+                noChoose: allImg.settingGray,
+                isChoose: allImg.settingBlue,
+                isChosen: false
             },
             {
                 name: "系统管理",
-                route: "/system",
-                id: 4
+                route: "/home/system",
+                id: 4,
+                noChoose: allImg.systemGray,
+                isChoose: allImg.systemBlue,
+                isChosen: false
             },
-        ])
+        ])//路由菜单
+        let router = useRouter()//初始化路由实例
+        // 路由盒子
+        function routeBoxClick(row) {
+            // 设置所有菜单项的 isChosen 为 false
+            menuList.value.forEach((item) => {
+                item.isChosen = false;
+            });
+            // 设置当前点击的菜单项为 isChosen
+            row.isChosen = true;
+            router.push(row.route)
+        }
         onMounted(() => {
 
         })
         return {
-            menuList,
+            menuList,//路由菜单
+            routeBoxClick,//路由盒子点击事件
         }
     }
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped>
+p {
+    margin: 0;
+    padding: 0;
+}
+
+.bigBox {
+    width: 95px;
+    height: 605px;
+    margin: 0 auto;
+    margin-top: 25px;
+    overflow-y: auto;
+}
+
+.menuBox {
+    width: 80px;
+    height: 60px;
+    text-align: center;
+    line-height: 25px;
+    cursor: pointer;
+    margin-bottom: 10px;
+}
+
+.rImg {
+    display: block;
+    width: 28px;
+    height: 28px;
+    border-radius: 5px;
+    margin: 0 auto;
+    /* border-image: linear-gradient(171deg, rgba(215, 237, 255, 1), rgba(158, 210, 253, 1)) 0 0; */
+}
+
+.rp {
+    width: 80px;
+    height: 30px;
+    font-size: 14px;
+}
+</style>

src/pages/home/HomePage.vue

@@ -2,12 +2,16 @@
     <div>
         <div class="bigBox">
             <el-container>
-                <el-header class="headMenu">Header</el-header>
+                <el-header class="headMenu">
+                    <HeadMenu></HeadMenu>
+                </el-header>
                 <el-container>
                     <el-aside class="sideMenu">
                         <SideMenu></SideMenu>
                     </el-aside>
-                    <el-main class="elMain">Main</el-main>
+                    <el-main class="elMain">
+                        <router-view></router-view>
+                    </el-main>
                 </el-container>
             </el-container>
         </div>
@@ -15,16 +19,18 @@
 </template>
 
 <script>
-import { ref,onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
 import SideMenu from "@/pages/components/SideMenu.vue"
+import HeadMenu from '@/pages/components/HeadMenu.vue';
 export default {
     setup() {
 
 
         return {}
     },
-    components:{
+    components: {
         SideMenu,
+        HeadMenu,
     }
 }
 </script>
@@ -37,22 +43,28 @@ export default {
 }
 
 .sideMenu {
-    width: 8vw;
+    width: 110px;
     height: 89vh;
+    text-align: center;
+    line-height: 100px;
     background-image: url('../../assets/image/leftSide.png');
     background-repeat: no-repeat;
-    background-position: 20px 20px;
-    background-size: 65% 95%;
+    background-position: 13px 0px;
+    background-size: 80% 98%;
 }
 
 .headMenu {
     width: 99vw;
     height: 8vh;
-    background-color: red;
+    /* background-color: red; */
 }
 
 .elMain {
     width: 80vw;
     height: 89vh;
+    background-image: url('../../assets/image/rightSide.png');
+    background-repeat: no-repeat;
+    /* background-position: 20px 20px; */
+    background-size: 99% 98%;
 }
 </style>

src/pages/login/LoginNow.vue

@@ -38,6 +38,7 @@ export default {
             username: "",
             userpass: ""
         })
+        let isLogin = ref(false)
         let router = useRouter()
         function encryptPassword(password) {
             let val = SmCrypto.doSm3AndSm2Encrypt(password) + '0000'
@@ -58,6 +59,8 @@ export default {
         }
         function sureLog() {
             let kis = encryptPassword(loginForm.value.userpass)
+            isLogin.value = true
+            localStorage.setItem("loginStatus",isLogin.value)
             // login.LoginNow({
             //     login_account: loginForm.value.username,
             //     pwd: kis
@@ -81,6 +84,7 @@ export default {
             less,
             sureLog,
             loginForm,
+            isLogin,
         }
     }
 }

src/pages/mission/MissionVue.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+        <h1>这里是任务</h1>
+    </div>
+</template>
+
+<script>
+export default {
+    setup() {
+
+
+        return {}
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/pages/report/ReportVue.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <h1>这里是测试</h1>
+    </div>
+</template>
+
+<script>
+export default {
+    setup () {
+        
+
+        return {}
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/router/index.js

@@ -18,17 +18,30 @@ const routes = [
         }
     },
     {
-        path:"/77",
-        component:()=>import("@/pages/mapLoad/FatherMap.vue")
+        path: "/77",
+        component: () => import("@/pages/mapLoad/FatherMap.vue")
     },
     {
-        path:"/home",
-        component:()=>import("@/pages/home/HomePage.vue"),
-        meta:{
-            name:"home"
+        path: "/home",
+        component: () => import("@/pages/home/HomePage.vue"),
+        meta: {
+            name: "home"
         },
-        children:[
-
+        children: [
+            {
+                path:"/home/report",
+                component:()=>import("@/pages/report/ReportVue.vue"),
+                meta:{
+                    name:"report"
+                }
+            },
+            {
+                path:"/home/mission",
+                component:()=>import("@/pages/mission/MissionVue.vue"),
+                meta:{
+                    name:"mission"
+                }
+            }
         ]
     }
 ]
@@ -39,14 +52,18 @@ const router = createRouter({
 })
 router.beforeEach((to, from, next) => {
     // 假设您有一个名为 isAuthenticated 的全局变量来表示用户是否已登录
-    const isAuthenticated = true; // 请替换为实际的登录状态判断逻辑
+    let isAuthenticated = false; // 请替换为实际的登录状态判断逻辑
+    let loginStatus = localStorage.getItem("loginStatus")
+    if (loginStatus === 'true') {
+        isAuthenticated = true
+    }
     // 如果用户已登录，正常导航到目标路由
     if (isAuthenticated) {
         next();
     } else {
         ElMessage({
-            type:"error",
-            message:"您还未登录"
+            type: "error",
+            message: "您还未登录"
         })
         // 如果用户未登录，重定向到登录页
         if (to.path !== '/login') {