From 6868ca1b3fbdc43f164a53b3963d52d9fa92a086 Mon Sep 17 00:00:00 2001
From: zhangdi <15053473693@163.com>
Date: Mon, 8 Sep 2025 14:08:59 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A3=8E=E6=A0=BC=E4=BA=94=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/index/index.vue                      |  15 +-
 src/page/index/logo.vue                       |   8 +-
 src/page/index/setting.vue                    |  41 ++-
 src/page/index/sidebar/index.vue              |   4 +-
 src/page/index/sidebar/leftMenu_sec.vue       | 347 ++++++++++++++++++
 src/styles/theme/go.scss                      |   2 +-
 src/styles/theme/white.scss                   |   4 +
 .../statisticalAnalysis/productionReport.vue  |   5 +-
 8 files changed, 397 insertions(+), 29 deletions(-)
 create mode 100644 src/page/index/sidebar/leftMenu_sec.vue

diff --git a/src/page/index/index.vue b/src/page/index/index.vue
index dd0fbd0..7942846 100644
--- a/src/page/index/index.vue
+++ b/src/page/index/index.vue
@@ -1,12 +1,13 @@
 <template>
   <el-watermark :content="watermark" style="height: 100%">
     <div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
-    <top ref="top" v-if="setting.styleRadio == '3'" />
-      <div class="avue-layout" :class="{ 'avue-layout--horizontal': isHorizontal }" :style="{height: setting.styleRadio == '3' ? 'calc(100% - 50px)'  : '100%'}">
-        <!-- :style="{ width: setting.styleRadio == '3' && '195px',background: setting.styleRadio == '3' && '#f7fafc'}" -->
-        <div class="avue-sidebar" v-show="validSidebar" :class="setting.styleRadio == '2' ? 'styleRadio' : setting.styleRadio == '3' ? 'thirdBar' : ''">
+      <top ref="top" v-if="setting.styleRadio == '3'" />
+      <div class="avue-layout" :class="{ 'avue-layout--horizontal': isHorizontal }"
+        :style="{ height: setting.styleRadio == '3' ? 'calc(100% - 50px)' : '100%' }">
+        <div class="avue-sidebar" v-show="validSidebar"
+          :class="setting.styleRadio == '2' ? 'styleRadio' : setting.styleRadio == '3' || setting.styleRadio == '5' ? 'thirdBar' : ''">
           <!-- 左侧导航栏 -->
-          <logo v-if="setting.styleRadio == '1' || setting.styleRadio == '4'" />
+          <logo v-if="setting.styleRadio == '1' || setting.styleRadio == '4' || setting.styleRadio == '5'" />
           <sidebar />
         </div>
         <div class="avue-main">
@@ -129,7 +130,7 @@ export default {
         if (data.length !== 0) {
           this.$router.$avueRouter.formatRoutes(data, true);
         }
-        
+
         //当点击顶部菜单后默认打开第一个菜单
         /*if (!this.validatenull(item)) {
           let itemActive = {},
@@ -165,7 +166,7 @@ export default {
   margin-right: 8px !important;
 }
 
-.thirdBar{
+.thirdBar {
   width: auto !important;
 }
 </style>
\ No newline at end of file
diff --git a/src/page/index/logo.vue b/src/page/index/logo.vue
index 1bda913..c37844e 100644
--- a/src/page/index/logo.vue
+++ b/src/page/index/logo.vue
@@ -3,7 +3,7 @@
     <transition name="fade">
       <span class="avue-logo_subtitle" key="0">
         <img class="logo-img" src="@/assets/logo.png" v-if="setting.styleRadio == '2'" />
-        <img class="logo-img" src="@/assets/logo_bai.png" v-else />
+        <img class="logo-img logo-img-bai" src="@/assets/logo_bai.png" v-else />
       </span>
     </transition>
     <!-- <transition-group name="fade">
@@ -52,6 +52,12 @@ export default {
   // margin: 20px 10px;
   margin-top:15px
 }
+.logo-img-bai {
+  width: calc(100% - 90px);
+  height:calc(100% - 80px);
+  // margin: 20px 10px;
+  margin-top:10px
+}
 
 .logo_bg {
   background: #000 !important;
diff --git a/src/page/index/setting.vue b/src/page/index/setting.vue
index 6065e3d..d07aef9 100644
--- a/src/page/index/setting.vue
+++ b/src/page/index/setting.vue
@@ -8,6 +8,7 @@
         <el-radio value="2">风格二</el-radio>
         <el-radio value="3">风格三</el-radio>
         <el-radio value="4">风格四</el-radio>
+        <el-radio value="5">风格五</el-radio>
       </el-radio-group>
       <!-- <h5>导航模式</h5>
       <div class="setting-checkbox">
@@ -100,35 +101,39 @@ export default {
   },
   methods: {
     styleRadioChange(val) {
-      if (val == '3') {
+      if (val == '3' || val == '5') {
         this.$store.commit('SET_THEME_NAME', 'theme-white');
         setTheme('theme-white');
-        if (this.$store.getters.isMacOs) {
-          this.$router.push(this.tagWel);
-          setTimeout(() => location.reload());
-        }
+        // if (this.$store.getters.isMacOs) {
+        //   this.$router.push(this.tagWel);
+        //   setTimeout(() => location.reload());
+        // }
       } else if (val == '4') {
         this.$store.commit('SET_THEME_NAME', 'theme-white');
         setTheme('theme-white');
-        if (this.$store.getters.isMacOs) {
-          this.$router.push(this.tagWel);
-          setTimeout(() => location.reload());
-        }
+        // if (this.$store.getters.isMacOs) {
+        //   this.$router.push(this.tagWel);
+        //   setTimeout(() => location.reload());
+        // }
       } else if (val == '1') {
         this.$store.commit('SET_THEME_NAME', 'theme-bule');
         setTheme('theme-bule');
-        if (this.$store.getters.isMacOs) {
-          this.$router.push(this.tagWel);
-          setTimeout(() => location.reload());
-        }
-      }else{
+        // if (this.$store.getters.isMacOs) {
+        //   this.$router.push(this.tagWel);
+        //   setTimeout(() => location.reload());
+        // }
+      } else if (val == '2') {
         this.$store.commit('SET_THEME_NAME', 'theme-go');
         setTheme('theme-go');
-        if (this.$store.getters.isMacOs) {
-          this.$router.push(this.tagWel);
-          setTimeout(() => location.reload());
-        }
       }
+      // else{
+      // this.$store.commit('SET_THEME_NAME', 'theme-go');
+      // setTheme('theme-go');
+      // // if (this.$store.getters.isMacOs) {
+      // //   this.$router.push(this.tagWel);
+      // //   setTimeout(() => location.reload());
+      // // }
+      // }
     }
   }
 
diff --git a/src/page/index/sidebar/index.vue b/src/page/index/sidebar/index.vue
index a4b1ab7..32352bd 100644
--- a/src/page/index/sidebar/index.vue
+++ b/src/page/index/sidebar/index.vue
@@ -10,6 +10,7 @@
   </el-menu>
 
   <left-menu :menulist="menu" v-if="setting.styleRadio == '2'"></left-menu>
+  <leftMenuSec :menulist="menu" v-if="setting.styleRadio == '5'"></leftMenuSec>
   <div class="left_menu_box" :class="leftMenu[selectIndex].children ? 'right_box' : ''" style="display: flex;height: 100%;background: #fff;" v-if="setting.styleRadio == '3'">
     <div :class="leftMenu.find(item => item.children) ? 'children' : 'no_child'">
       <!-- <div class="top_title">{{ this.menu.find(item => item.id == this.leftMenu[selectIndex].parentId).name }}</div> -->
@@ -70,10 +71,11 @@ import { mapGetters } from 'vuex';
 import sidebarItem from './sidebarItem.vue';
 import { setStore, getStore } from '@/utils/store';
 import leftMenu from './leftMenu.vue';
+import leftMenuSec from './leftMenu_sec.vue'
 
 export default {
   name: 'sidebar',
-  components: { sidebarItem, leftMenu },
+  components: { sidebarItem, leftMenu,leftMenuSec },
   data() {
     return {
       isCollapse: false,
diff --git a/src/page/index/sidebar/leftMenu_sec.vue b/src/page/index/sidebar/leftMenu_sec.vue
new file mode 100644
index 0000000..bb3ac0b
--- /dev/null
+++ b/src/page/index/sidebar/leftMenu_sec.vue
@@ -0,0 +1,347 @@
+<template>
+    <div class="menu_flex">
+        <div class="first_menu">
+            <div class="first_menu_bg">
+                <div class="menu_item" v-for="(item, index) in newMneu" :class="item.activeMenu == true ? 'xz_bg' : ''"
+                    @click="slectMenu(item, index)" :title="item.name">
+                    <span><i :class="item.source"></i></span>
+                    <span>{{ item.name }}</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="second_menu">
+            <!-- <transition name="fade">
+                <span class="avue-logo_subtitle" key="0">
+                    <img class="logo-img" src="@/assets/logo.png" />
+                </span>
+            </transition>
+            <transition name="fade">
+                <span class="logo-name">电镀智能化生产管理{{ setting.styleRadio }}</span>
+            </transition>
+            <transition name="fade">
+                <span class="logo-version">版本V2.1.8</span>
+            </transition> -->
+            <div class="menu-name">{{ slectMneuData.name }}</div>
+            <el-menu unique-opened :default-active="activeMenu" :mode="setting.sidebar" :collapse="true">
+                <sidebar-item-left :menu="slectMneuData.children"></sidebar-item-left>
+            </el-menu>
+            <!-- <div v-for="(v, j) in slectMneuData.children">
+                <div class="second_item" :class="v.activeMenu2 == true ? 'active_second' : ''" @click="secondMenu(v, j)"
+                    v-if="!v.children">
+                    <div class="second_title second_hover" :title="v.name">{{ v.name }}</div>
+                </div>
+                <div v-else class="second_item">
+                    <el-popover placement="right-start" :show-arrow="true" :offset="0" :hide-after='0'
+                        popper-class="log-popover"
+                        popper-style="visibility: visible;width:auto;border:none;  transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;">
+                        <template #reference>
+                            <span class="right_menu_item_box second_title" @click='open(item)'
+                                style="display:block;height: 50px;line-height: 50px;padding-left: 12px;">
+                                <div>{{ v.name }}
+                                    <el-icon>
+                                        <ArrowRight />
+                                    </el-icon>
+                                </div>
+                            </span>
+                        </template>
+                        <template #default v-if="v.children && v.children.length != 0">
+                            <div class="third_box" v-if="v.children && v.children.length != 0">
+                                <div class="third_box_item second_title" v-for="third in v.children" :key="third.id"
+                                    style="display:block;height: 40px;line-height: 40px;padding-left: 12px;"
+                                    @click='open(third)'>
+                                    {{ third.name }}
+                                </div>
+                            </div>
+                        </template>
+                    </el-popover>
+                </div>
+            </div> -->
+        </div>
+    </div>
+</template>
+<script setup>
+import { computed, ref, onMounted } from 'vue'
+import { mapState, useStore } from "vuex"
+import { useRoute, useRouter } from 'vue-router'
+import logo from '../logo.vue';
+import sidebarItemLeft from './sidebarItem_left.vue';
+const store = useStore()
+const { setting } = mapGetters(['setting'])
+const visible = ref(false)
+const router = useRouter()
+const route = useRoute()
+const myProps = defineProps({
+    menulist: {
+        type: Array,
+        default: []
+    },
+})
+const newMneu = ref([])
+// 初始化页面
+const initMenu = () => {
+    myProps.menulist.forEach(item => {
+        newMneu.value.push({ ...item, activeMenu: false })
+    });
+    slectMenu(newMneu.value[0], 0)
+}
+// 选中一级菜单
+const slectMneuData = ref({})
+const slectMenu = (item, v) => {
+    slectMneuData.value = item
+    if (slectMneuData.value.children) {
+        slectMneuData.value.children.forEach(v => {
+            v.activeMenu2 = false
+        })
+    }
+    newMneu.value.forEach((item, index) => {
+        if (index == v) {
+            item.activeMenu = true
+        } else {
+            item.activeMenu = false
+        }
+    })
+}
+// 选中二级三级菜单
+const secondMenu = (v, j) => {
+    slectMneuData.value.children.forEach((item, index) => {
+        if (index == j) {
+            item.activeMenu2 = true
+        } else {
+            item.activeMenu2 = false
+        }
+    })
+    open(v)
+}
+const activeMenu = computed(() => {
+    const { meta, path } = route;
+    if (meta.activeMenu) {
+        return meta.activeMenu;
+    }
+    return path;
+})
+
+// 跳转页面
+const pathKey = ref('')
+const getPath = (item) => {
+    return item[pathKey.value];
+}
+
+// 打开页面
+const queryKey = ref({})
+const open = (item) => {
+    router.push({
+        path: item.path,
+    });
+}
+
+onMounted(() => {
+    initMenu()
+})
+</script>
+<style lang="scss" scoped>
+.menu_flex {
+    display: flex;
+    height: 100%;
+    overflow: hidden;
+
+    .first_menu {
+        width: 65px;
+        // background: url(@/assets/menu_bg.jpg) no-repeat center;
+        background-color: #409eff;
+        background-size: auto 100%;
+        min-height: 100%;
+        overflow: auto;
+
+        box-shadow: none;
+        // border-radius: 0px 60px 0px 0px;
+        color: rgb(190, 194, 201);
+        background-position-x: 13%;
+
+        .first_menu_bg {
+            // padding-top: 60px;
+            // background: url(@/assets/menu_bg.svg) no-repeat center;
+            background-size: 100% 100%;
+            background-position-Y: 40%;
+        }
+
+        .menu_item {
+            width: 100%;
+            height: 65px;
+            display: flex;
+            flex-direction: column;
+            cursor: pointer;
+            padding: 18px auto 0;
+
+            &:hover {
+                background: rgba($color: #000000, $alpha: 0.3);
+            }
+
+            span {
+                color: #fff;
+
+                &:nth-child(1) {
+                    width: 20px;
+                    height: 20px;
+                    margin: 8px auto 0;
+                }
+
+                &:nth-child(2) {
+                    font-size: 12px;
+                    text-align: center;
+                    padding-top: 12px;
+                }
+            }
+        }
+
+        .xz_bg {
+            background: rgba(255, 140, 25, 0.5);
+        }
+    }
+
+    .second_menu {
+        flex: 1;
+        height: 100%;
+        overflow: auto;
+        // padding-top: 20px;
+
+        .avue-logo_subtitle {
+            padding: 0 12px;
+
+            .logo-img {
+                display: block;
+                width: 100%;
+                margin-top: 9px !important;
+            }
+        }
+
+        .logo-name {
+            color: rgb(102, 102, 102);
+            font-size: 13px;
+            font-weight: 600;
+            line-height: 27px;
+            text-align: center;
+            display: block;
+            margin-top: 24px;
+            margin-bottom: 5px;
+            font-style: italic;
+        }
+
+        .logo-version {
+            color: rgba(66, 66, 66, 0.7);
+            font-size: 11px;
+            font-weight: 400;
+            line-height: 20px;
+            display: block;
+            text-align: center;
+        }
+
+        .menu-name {
+            text-align: center;
+            color: rgb(102, 102, 102);
+            font-size: 18px;
+            font-weight: 550;
+            line-height: 25px;
+            margin-top: 18px;
+            position: relative;
+            margin-bottom: 10px;
+
+            &::after {
+                content: '';
+                width: 25px;
+                height: 2px;
+                background: rgba(187, 187, 187, 1);
+                position: absolute;
+                left: 10px;
+                top: 14px;
+            }
+
+            &::before {
+                content: '';
+                width: 25px;
+                height: 2px;
+                background: rgba(187, 187, 187, 1);
+                position: absolute;
+                right: 10px;
+                top: 14px;
+            }
+        }
+
+        .second_item {
+            text-align: center;
+            color: rgb(102, 102, 102);
+
+            .second_title {
+                height: 50px;
+                line-height: 50px;
+                cursor: pointer;
+                font-size: 14px;
+                color: rgb(102, 102, 102);
+            }
+
+
+
+            .second_ch {
+                height: 40px;
+                line-height: 40px;
+                cursor: pointer;
+
+                &:hover {
+                    background: rgba($color: #000000, $alpha: 0.3);
+
+                }
+            }
+        }
+
+        .three_menu {
+            height: 40px;
+            line-height: 40px;
+            cursor: pointer;
+            font-size: 14px;
+            color: rgb(102, 102, 102);
+            text-align: center;
+        }
+
+        .second_title_all {
+            position: relative;
+            z-index: 2;
+
+            &::after {
+                content: '';
+                width: 100%;
+                height: 1px;
+                background: #ccc;
+                position: absolute;
+                top: 35px;
+                left: 0;
+            }
+        }
+
+        .second_hover {
+            &:hover {
+                background: rgba($color: #000000, $alpha: 0.3);
+            }
+        }
+
+        .active_second {
+            background: rgb(193, 210, 255);
+
+            .second_title {
+                color: rgba(0, 68, 251, 1);
+            }
+        }
+    }
+
+    .third_box {
+        background: #000;
+    }
+
+}
+
+:deep(.iconfont) {
+    font-size: 16px;
+}
+:deep(.el-menu){
+  width: 180px;
+}
+</style>
\ No newline at end of file
diff --git a/src/styles/theme/go.scss b/src/styles/theme/go.scss
index ddaa75f..546ad1f 100644
--- a/src/styles/theme/go.scss
+++ b/src/styles/theme/go.scss
@@ -18,7 +18,7 @@
 
     .el-menu-item, .el-sub-menu__title {
       i, span {
-        color: #FFF;
+        color: #000 ;
       }
 
       &:hover {
diff --git a/src/styles/theme/white.scss b/src/styles/theme/white.scss
index 8c17ce8..357e1eb 100644
--- a/src/styles/theme/white.scss
+++ b/src/styles/theme/white.scss
@@ -140,4 +140,8 @@
       color: #fff;
     }
   }
+  .el-menu--collapse>.el-menu-item .el-sub-menu__icon-arrow, .el-menu--collapse>.el-menu-item-group>ul>.el-sub-menu>.el-sub-menu__title .el-sub-menu__icon-arrow, .el-menu--collapse>.el-sub-menu>.el-sub-menu__title .el-sub-menu__icon-arrow{
+    display: block !important;
+    margin-top: -5px;
+  }
 }
diff --git a/src/views/statisticalAnalysis/productionReport.vue b/src/views/statisticalAnalysis/productionReport.vue
index ec0b62c..79a525d 100644
--- a/src/views/statisticalAnalysis/productionReport.vue
+++ b/src/views/statisticalAnalysis/productionReport.vue
@@ -114,7 +114,8 @@ export default {
                 searchShowBtn: false,
                 header: false,
                 column: []
-            }
+            },
+            data:[]
         }
     },
     methods: {
@@ -126,6 +127,8 @@ export default {
     mounted() {
         this.formInline.type = this.productionData.rebiao[0].value
         this.option.column = productionCol[this.formInline.type]
+
+        this.data=[]
     },
 }
 </script>