1111

src/layout/index.scss

@@ -1,3 +1,38 @@
+.hc-layout-main {
+    position: relative;
+    height: 100vh;
+    width: 100%;
+    .hc-layout-aside {
+        position: relative;
+        .hc-layout-aside-body .hc-new-main-body_content {
+            color: #E6E6E6;
+            background: #101010;
+            padding: 0 !important;
+            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
+        }
+        .hc-layout-aside-logo {
+            border-bottom: 1px solid #434343;
+            span {
+                margin-top: 1px;
+            }
+            .hc-header-upload-file-bar {
+                display: none;
+            }
+        }
+        .hc-layout-aside-menu {
+
+        }
+        .hc-layout-aside-user {
+            border-top: 1px solid #434343;
+        }
+    }
+    .hc-layout-page {
+        position: relative;
+        padding: 0;
+    }
+}
+
+
 .hc-layout-box {
     position: relative;
     height: 100vh;

src/layout/index.vue

@@ -1,24 +1,26 @@
 <template>
-    <el-container class="hc-layout-box">
-        <el-header class="hc-layout-header">
-            <div class="header-content-bar">
-                <hc-upload-bar />
-                <HcRefresh />
-                <UserInfoBar @load="userInfoLoad" />
-            </div>
-        </el-header>
-        <el-container class="hc-layout-container">
-            <el-aside class="hc-layout-aside" width="200px">
-                <MenuBar :cur="menuBarKey" :datas="menuBarData" @change="menuBarChange" />
-            </el-aside>
-            <el-main class="hc-layout-main">
-                <div id="hc-main-box" class="hc-main-page">
-                    <hc-body>
-                        <router-view />
-                    </hc-body>
+    <el-container class="hc-layout-main">
+        <el-aside class="hc-layout-aside" width="200px">
+            <hc-body class="hc-layout-aside-body">
+                <div class="hc-layout-aside-logo hc-flex-center h-[46px]">
+                    <img :src="logoPng" alt="logo" class="w-[26px]">
+                    <span class="ml-[6px] text-[22px] font-bold">数据分析系统</span>
+                    <hc-upload-bar />
                 </div>
-            </el-main>
-        </el-container>
+                <div class="hc-layout-aside-menu">
+                    2222
+                    <!-- MenuBar :cur="menuBarKey" :datas="menuBarData" @change="menuBarChange" / -->
+                </div>
+                <div class="hc-layout-aside-user">
+                    <UserInfoBar @load="userInfoLoad" />
+                </div>
+            </hc-body>
+        </el-aside>
+        <el-main class="hc-layout-page">
+            <hc-body id="hc-main-box">
+                <router-view />
+            </hc-body>
+        </el-main>
     </el-container>
 </template>
 
@@ -28,6 +30,9 @@ import { useAppStore } from '~src/store'
 import { useRouter } from 'vue-router'
 import { initButtons } from '~store/app'
 
+//logo文件
+import logoPng from '~src/assets/logo/logo.png'
+
 //初始组合式
 const router = useRouter()
 const store = useAppStore()

src/layout/modules/MenuBar.vue

@@ -1,9 +1,9 @@
 <template>
-    <hc-body padding="0px" scrollbar>
+    <el-scrollbar>
         <el-menu :collapse="isCollapse" :default-active="curKey" class="hc-aside-menu" unique-opened text-color="#fff">
             <MenuItem :collapse="isCollapse" :cur="curKey" :datas="datas" :msg-count="msgCount" @change="MenuClick" />
         </el-menu>
-    </hc-body>
+    </el-scrollbar>
 </template>
 
 <script setup>

src/layout/modules/UserInfoBar.vue

@@ -2,7 +2,7 @@
     <el-dropdown size="large">
         <div class="header-bar user-info-bar">
             <img :alt="userInfo.account" :src="userInfo.avatar || avatarPng" class="user-avatar">
-            <span class="user-name">{{ userInfo.real_name }}</span>
+            <span class="user-name">{{ userInfo.real_name || '还未登录' }}</span>
             <hc-icon name="arrow-down-s" ui="arrow-icon" />
         </div>
         <template #dropdown>
@@ -34,11 +34,11 @@ const emit = defineEmits(['load'])
 //变量
 const router = useRouter()
 const store = useAppStore()
-const userInfo = ref(store.getUserInfo)
+const userInfo = ref(store.userInfo)
 const refreshLock = ref(false)
 
 //监听
-watch(() => store.getUserInfo, (info) => {
+watch(() => store.userInfo, (info) => {
     userInfo.value = info
     emit('load', info)
 })

src/store/index.js

@@ -1,13 +1,13 @@
 import { defineStore } from 'pinia'
 import pinia from '~src/store/init'
 import { clearStoreAll, getStore, removeRefreshToken, removeToken, setStore } from 'hc-vue3-ui'
-
 export const useAppStore = defineStore('main', {
     state: () => ({
         //用户信息
         userInfo: getStore('userInfo') || {},
         //菜单信息
         menus: getStore('menus') || [],
+        home: getStore('home') || 'anomaly-invest',
         buttons: getStore('buttons') || {},
     }),
     actions: {
@@ -25,6 +25,10 @@ export const useAppStore = defineStore('main', {
             this.buttons = value
             setStore('buttons', value)
         },
+        setHomePage(value) {
+            this.home = value
+            setStore('home', value)
+        },
         getButtonsVal(value) {
             return this.buttons[value] || false
         },

src/styles/view/datav.scss

@@ -23,8 +23,12 @@
             .name {
                 font-size: 32px;
                 font-weight: bold;
-                text-shadow: 0 0 10px rgba(255, 255, 255, .5);
                 cursor: pointer;
+                text-shadow: 0 0 10px rgba(255, 255, 255, .5);
+                transition: text-shadow .3s;
+                &:hover {
+                    text-shadow: 3px 2px 8px rgb(52 227 255);
+                }
             }
             i {
                 margin-right: 10px;

src/views/home/datav.vue

@@ -4,7 +4,7 @@
         <div class="hc-datav-header">
             <img id="datav-header-bg" :src="png2" alt="头部图">
             <div class="header-title hc-flex-center w-full">
-                <div class="name hc-flex">
+                <div class="name hc-flex" @click="toHomePage">
                     <i class="i-solar-graph-outline" />
                     项目数据看板
                 </div>
@@ -21,11 +21,19 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
+import router from '~src/router/index'
+import { useAppStore } from '~src/store'
 import bgPng from '~src/assets/images/datav-bg.png'
 import png2 from '~src/assets/images/datav-2.png'
 import HcDatavSelect from './modules/select.vue'
 
+const store = useAppStore()
+
+onMounted(() => {
+
+})
+
 //搜索表单
 const searchForm = ref({ year: '2024', quarter: '1', level: '0', stage: '1', type: '1' })
 const yearArr = [{ id: '2024', name: '2024年' }, { id: '2023', name: '2023年' }, { id: '2022', name: '2022年' }]
@@ -33,6 +41,11 @@ const quarterArr = [{ id: '1', name: '一季度' }, { id: '2', name: '二季度'
 const levelArr = [{ id: '1', name: '一级' }, { id: '2', name: '二级' }, { id: '3', name: '三级' }, { id: '0', name: '所有' }]
 const stageArr = [{ id: '1', name: '项目阶段' }, { id: '2', name: '在建项目' }, { id: '3', name: '新开工项目' }, { id: '4', name: '建成项目' }]
 const typeArr = [{ id: '1', name: '公路' }, { id: '2', name: '水利' }, { id: '3', name: '房建' }, { id: '4', name: '铁路' }]
+
+//跳转到首页
+const toHomePage = () => {
+    router.push({ name: store.home })
+}
 </script>
 
 <style lang="scss">

src/views/login/index.vue

@@ -33,15 +33,16 @@
 
 <script setup>
 import { onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import router from '~src/router/index'
 import { useAppStore } from '~src/store'
 import { formValidate } from 'js-fast-way'
+
+//图片文件
 import bg1Png from '~src/assets/login/bg1.png'
 import bgPng from '~src/assets/login/bg.png'
 import imgPng from '~src/assets/login/img.png'
 
 //初始化
-const router = useRouter()
 const store = useAppStore()
 
 onMounted(() => {