From 7187952998abf8bd3bcc457ae1159241ad73ee05 Mon Sep 17 00:00:00 2001
From: jinna <jn517618@163.com>
Date: Fri, 5 Sep 2025 16:22:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/index/index.vue                 |  17 ++-
 src/page/index/sidebar/index.vue         | 181 +++++++++++++++++------
 src/page/index/top/index.vue             |  33 ++++-
 src/page/index/top/top-menu.vue          |  10 +-
 src/styles/common.scss                   |   1 +
 src/views/wel/components/efficiency.vue  |  19 ++-
 src/views/wel/components/outputTable.vue |  14 +-
 src/views/wel/components/workbase.vue    |  22 ++-
 8 files changed, 215 insertions(+), 82 deletions(-)

diff --git a/src/page/index/index.vue b/src/page/index/index.vue
index ec277bf..dd0fbd0 100644
--- a/src/page/index/index.vue
+++ b/src/page/index/index.vue
@@ -1,16 +1,17 @@
 <template>
   <el-watermark :content="watermark" style="height: 100%">
     <div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
-      <div class="avue-layout" :class="{ 'avue-layout--horizontal': isHorizontal }">
+    <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' : ''">
+        <div class="avue-sidebar" v-show="validSidebar" :class="setting.styleRadio == '2' ? 'styleRadio' : setting.styleRadio == '3' ? 'thirdBar' : ''">
           <!-- 左侧导航栏 -->
-          <logo v-if="setting.styleRadio == '1' || setting.styleRadio == '3'|| setting.styleRadio == '4'" />
+          <logo v-if="setting.styleRadio == '1' || setting.styleRadio == '4'" />
           <sidebar />
         </div>
         <div class="avue-main">
           <!-- 顶部导航栏 -->
-          <top ref="top" />
+          <top ref="top" v-if="setting.styleRadio != '3'" />
           <!-- 顶部标签卡 -->
           <tags />
           <search class="avue-view" v-show="isSearch"></search>
@@ -114,7 +115,7 @@ export default {
         if (item.children.length !== 0) {
           this.$store.commit('SET_LEFT_MENU', item.children);
           let tmpIndex = item.children.findIndex(item1 => item1.id == this.selectedIndex)
-          let index = tmpIndex == -1 ? 0 : tmpIndex
+          let index = tmpIndex == '-1' ? 0 : tmpIndex
           this.$store.commit('SET_SELECT_INDEX', index);
           // setStore({ name: 'left_menu', content: item.children });
           // this.$router.$avueRouter.formatRoutes(item.children, true);
@@ -125,8 +126,6 @@ export default {
     //打开菜单
     openMenu(item = {}) {
       this.$store.dispatch('GetMenu', item.id).then(data => {
-        console.log('data=================', data)
-        console.log('item.id--------------------', item.id)
         if (data.length !== 0) {
           this.$router.$avueRouter.formatRoutes(data, true);
         }
@@ -165,4 +164,8 @@ export default {
 .styleRadio {
   margin-right: 8px !important;
 }
+
+.thirdBar{
+  width: auto !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/page/index/sidebar/index.vue b/src/page/index/sidebar/index.vue
index 13660cd..dd95365 100644
--- a/src/page/index/sidebar/index.vue
+++ b/src/page/index/sidebar/index.vue
@@ -10,39 +10,22 @@
   </el-menu>
 
   <left-menu :menulist="menu" v-if="setting.styleRadio == '2'"></left-menu>
-  <div class="left_menu_box" style="display: flex;" v-if="setting.styleRadio == '3'">
+  <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>
-      <div class="left_menu" @click="clickItem(item, index)" v-for="(item, index) in leftMenu" :key="item.id"
-        :class="item.id == selectedIndex ? 'active' : ''">
-        <el-popover placement="right-start" :show-arrow="false" :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>
-              <div class="left_menu_item">
-                <div style="display: flex;align-items: center;">
+      <!-- <div class="top_title">{{ this.menu.find(item => item.id == this.leftMenu[selectIndex].parentId).name }}</div> -->
+      <div class="left_menu" @click="clickItem(item, index)" v-for="(item, index) in leftMenu" :key="item.id" @mouseenter="mouseEnter(item,index)" 
+        :class="index == selectIndex ? 'active' : ''">
+        <div class="left_menu_item">
                   <i :class="item.source" ></i>
-                  <span class="name_text">{{ item.name }}</span>
-                </div>
-                <div class="img_box" v-if="item.children"></div>
+                  <span class="name_text">{{ item.name.substring(0,2) }}</span>
               </div>
-            </template>
-             <template #default v-if="item.children && item.children.length != 0">
-              <div class="third_box" v-if="item.children && item.children.length != 0">
-                  <div class="third_box_item" v-for="third in item.children" :key="third.id"  @click='clickPage(third)'>
-                    {{ third.name }}
-                  </div>
-                </div>
-             </template>
-        </el-popover>
-          
       </div>
     </div>
-    <!-- <div style="flex: 1;">
+    <div style="flex: 1;height: 100%;background: #fff;" v-show="leftMenu[selectIndex].children">
       <div
         v-if="leftMenu && leftMenu.length != 0 && leftMenu[selectIndex].children && leftMenu[selectIndex].children.length != 0">
         <div class="left_top">{{ leftMenu[selectIndex].name }} </div>
-        <div class="right_menu" v-for="item in leftMenu[selectIndex].children" :key="item.id">
+        <div class="right_menu" v-for="item in leftMenu[selectIndex].children" :key="item.id"  @mouseleave="mounseLeave(leftMenu[selectIndex],item)">
           <div class="right_menu_item">
             <el-popover placement="right-start" :show-arrow="false" :offset="0" :hide-after='0'
               popper-class="log-popover"
@@ -55,18 +38,28 @@
                   </el-icon>
                 </div>
               </template>
-              <template #default v-if="item.children && item.children.length != 0">
-                <div class="third_box" v-if="item.children && item.children.length != 0">
-                  <div class="third_box_item" v-for="third in item.children" :key="third.id">
+              <template #default >
+                <div class="third_box" v-if="item.children && item.children.length != 0 && !item.children.find(item1 => item1.children)">
+                  <div class="third_box_item" v-for="third in item.children" :key="third.id" @click="handleClick(third)">
                     {{ third.name }}
                   </div>
                 </div>
+                <div class="four_box" v-if="item.children && item.children.length != 0 && item.children.find(item1 => item1.children)">
+                  <div class="four_box_item" v-for="third in item.children" :key="third.id">
+                    <div class="third_name"  @click="handleClick(third)"><span></span>{{ third.name }}</div>
+                    <div class="four_con_box" v-if="third.children">
+                      <div class="four_con_item" v-for="four in third.children" :key="four.id"  @click="handleClick(four)">
+                        {{ four.name }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </template>
             </el-popover>
           </div>
         </div>
       </div>
-    </div> -->
+    </div>
   </div>
 </template>
 
@@ -82,6 +75,7 @@ export default {
   data() {
     return {
       isCollapse: false,
+      showRight:false
       // selectIndex:0
     }
   },
@@ -100,6 +94,7 @@ export default {
   mounted() {
     console.log('left--------------------------',this.leftMenu)
     console.log('menu--------------------------',this.menu)
+    console.log('selectIndex--------------------------',this.selectIndex)
     if(this.setting.styleRadio=='3'){
       this.index.openMenu2();
     }else{
@@ -113,9 +108,9 @@ export default {
           path: item.path,
           query: item.query,
         });
+        this.$store.commit('SET_SELECT_INDEX', index);
+        this.$store.commit('SET_SELECTED_INDEX', item.id + '');
       }
-      this.$store.commit('SET_SELECTED_INDEX', item.id + '');
-      this.$store.commit('SET_SELECT_INDEX', index);
       // this.selectIndex = index
     },
     clickPage(item) {
@@ -124,24 +119,72 @@ export default {
           path: item.path,
           query: item.query,
         });
-        this.$store.commit('SET_SELECTED_INDEX', item.parentId + '');
+        // this.$store.commit('SET_SELECTED_INDEX', item.parentId + '');
+      }
+    },
+    mouseEnter(item,index){
+      this.$store.commit('SET_SELECT_INDEX', index);
+      if(item.children){
+        this.showRight = true
+      }else{
+        this.showRight = false
+      }
+    },
+    mounseLeave(item,item1){
+      console.log('item----------------------',item)
+      console.log('item1----------------------',item1)
+      console.log('tmp-------------------',item.children.find(item1 => item1.children))
+      if(!item1.children){
+        if(item.id != this.selectedIndex){
+          let tmp = this.leftMenu.find(item => item.id == this.selectedIndex)
+          let tmpIndex = this.leftMenu.findIndex(item => item.id == this.selectedIndex)
+          this.$store.commit('SET_SELECT_INDEX', tmpIndex == -1 ? 0 : tmpIndex);
+          if(tmp && tmp.children){
+            this.showRight = true
+          }else{
+            this.showRight = false
+          }
+        }
+      }
+      
+    },
+    handleClick(item){
+      console.log('item000000000000000000000000',item)
+      if(!item.children){
+        this.$router.push({
+          path: item.path,
+          query: item.query,
+        });
       }
     }
   },
 
+ 
+
 };
 </script>
 <style lang="scss" scoped>
 
 .left_menu_box{
-  // background: #f7fafc;
+  width: 48px !important;
+
+  &.right_box{
+    width: 200px !important;
+    background: #fff;
+  }
 }
 .no_child {
-  width: 195px;
+  width: 48px;
 }
 
 .children {
-  width: 195px;
+  width: 48px;
+  height: 100%;
+
+  &:hover{
+    transition: all .5s;
+    box-shadow: 5px 5px 30px #afaeae;
+  }
 }
 .top_title{
   font-size: 14px;
@@ -174,9 +217,9 @@ export default {
   .left_menu_item {
     cursor: pointer;
     display: flex;
+    flex-direction: column;
     justify-content: space-between;
-    padding: 0 10px;
-    height: 46px;
+    padding: 10px 0px;
     align-items: center;
     font-size: 12px;
     font-family: Microsoft YaHei-Regular, Microsoft YaHei;
@@ -196,12 +239,17 @@ export default {
     }
 
     .name_text{
-      // display: inline-block;
-      // width: 52px;
-      margin-left: 10px;
-      // overflow: hidden;
-      // text-overflow: ellipsis;  /* 超出宽度200px后显示省略号 */
-      // white-space: nowrap;  /* 限制不允许换行 */
+      font-size: 12px;
+      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+      font-weight: 500;
+      color: var(--header-bkColor-hover);
+      padding-top: 5px;
+      text-align: center;
+      width: 45px;
+      word-break: keep-all;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     
@@ -296,7 +344,7 @@ export default {
     padding-left: 15px;
     padding-right: 15px;
     position: relative;
-    font-weight: bolder;
+    // font-weight: normal;
     word-break: keep-all;
     white-space: nowrap;
     box-sizing: border-box;
@@ -311,4 +359,49 @@ export default {
 .log-popover {
   border: none;
 }
+
+.four_box{
+  display: flex;
+
+  .four_box_item{
+    display: flex;
+    flex-direction: column;
+    // line-height: 46px;
+    min-width: 140px;
+    padding-left: 15px;
+    padding-top: 15px;
+    cursor: pointer;
+    
+    .third_name{
+      line-height: 46px;
+      display: flex;
+      align-items: center;
+
+      span{
+        width: 3px;
+        height: 15px;
+        margin-right: 5px;
+        display: inline-block;
+        background:#0066ff ;
+      }
+
+    }
+    .four_con_box{
+        display: flex;
+        flex-direction: column;
+        
+        
+        .four_con_item{
+          line-height: 46px;
+          padding-left: 10px;
+
+          &:hover{
+            background: #0066ff;
+            color: #fff;
+          }
+
+        }
+      }
+  }
+}
 </style>
diff --git a/src/page/index/top/index.vue b/src/page/index/top/index.vue
index 1dd7b73..382dab3 100644
--- a/src/page/index/top/index.vue
+++ b/src/page/index/top/index.vue
@@ -1,15 +1,19 @@
 <template>
-  <div class="avue-top" :class="setting.styleRadio == '4' ? 'logo_bg' : ''">
+  <div class="avue-top" :class="setting.styleRadio == '4' ? 'logo_bg' : setting.styleRadio == '3' ? 'third_bg' : ''">
+     <div class="top_bag" v-if="setting.styleRadio == 3">
+      <img src="@/assets/logo_bai.png" class="logo_img" />
+       <!-- <logo></logo> -->
+    </div>
     <div class="top-bar__left">
       <div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': isCollapse }]"
         v-if="setting.collapse && !isHorizontal">
         <i class="icon-navicon" @click="setCollapse"></i>
       </div>
     </div>
-    <div class="top-bar__title" :class="setting.styleRadio == '1' ? 'bar__title_fff' : ''">
+    <div class="top-bar__title" :class="setting.styleRadio == '1' ? 'bar__title_fff' : setting.styleRadio == '3' ? 'bar_title_third' : ''">
       <top-menu ref="topMenu"
         v-if="setting.menu && (setting.styleRadio == '3' || setting.styleRadio == '4')"></top-menu>
-      <top-search class="top-bar__item" v-if="setting.search"></top-search>
+      <top-search class="top-bar__item" v-if="setting.search" :style="{left:setting.styleRadio == '3' && '225px'}"></top-search>
     </div>
     <div class="top-bar__right">
       <!-- <div v-if="setting.color" class="top-bar__item">
@@ -358,6 +362,25 @@ export default {
   background: #000 !important;
 }
 
+.third_bg{
+  display: flex;
+  background: #1881FF !important;
+  align-items: center;
+
+  .top_bag{
+    display: flex;
+    align-items: center;
+    margin-left: 30px;
+    .logo_img{
+      width: calc(100% - 70px);
+      height: calc(100% - 60px);
+      // margin-top: 15px
+    }
+  }
+
+  
+}
+
 :deep(.el-sub-menu .el-icon.el-sub-menu__icon-more) {
   color: #fff !important;
 }
@@ -365,4 +388,8 @@ export default {
 .bar__title_fff {
   background-color: #fff
 }
+
+.bar_title_third{
+  margin-left: 120px;
+}
 </style>
diff --git a/src/page/index/top/top-menu.vue b/src/page/index/top/top-menu.vue
index de08c9d..e8f53dd 100644
--- a/src/page/index/top/top-menu.vue
+++ b/src/page/index/top/top-menu.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    
     <el-menu class="top-menu custom-menu" :default-active="activeIndex" mode="horizontal"  ellipsis
       style="width: 900px" >
       <!-- <el-menu-item index="0" @click="openHome(itemHome)">
@@ -8,9 +9,8 @@
         <span>{{ itemHome.name }}</span>
       </template>
 </el-menu-item> -->
-
       <template v-for="(item, index) in items" :key="index">
-        <el-menu-item :index="item.id + ''" @click="openMenu(item)">
+        <el-menu-item :index="item.id + ''" @click="openMenu(item)" >
           <template #title>
             <i :class="item.source" style="padding-right: 5px"></i>
             <span>{{ item.name }}</span>
@@ -52,6 +52,8 @@
 </template>
 
 <script>
+import { color } from 'echarts';
+import { set } from 'nprogress';
 import { mapGetters } from 'vuex';
 
 export default {
@@ -77,7 +79,6 @@ export default {
   },
   methods: {
     openMenu(item) {
-      console.log('item------------------------', item)
       if (this.setting.styleRadio == '3' || this.setting.styleRadio == '4') {
         this.index.openMenu2(item);
       } else {
@@ -95,15 +96,12 @@ export default {
       this.$router.push(this.tagWel);
     },
     interval() {
-      console.log('1111111111111111111111111111111111111')
       this.timer = setInterval(() => {
         this.getMenu()
       }, 1000)
     },
     getMenu() {
       this.items = this.menu
-      console.log('menu222-------------------------------------', this.menu)
-      console.log('items-------------------------------------', this.items)
       if (this.menu.length != 0) {
         clearInterval(this.timer)
       }
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 11cce9c..91c1f41 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -78,6 +78,7 @@ a {
   background: #f0f2f5;
   background-size: 100%;
   background-repeat: no-repeat;
+  overflow: hidden;
 }
 
 .avue--collapse {
diff --git a/src/views/wel/components/efficiency.vue b/src/views/wel/components/efficiency.vue
index 7381061..8f38ae8 100644
--- a/src/views/wel/components/efficiency.vue
+++ b/src/views/wel/components/efficiency.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="bar_box">
+    <div class="bar_box" >
         <!-- 生产效率 -->
         <div class="title_bar">生产订单</div>
-        <div class="bar_chart_box" ref="bar_chart"></div>
+        <div class="bar_chart_box" ref="bar_chart" ></div>
     </div>
 </template>
 
@@ -15,8 +15,13 @@ export default {
             okNum: [1500, 1000, 2000, 1500, 2100, 1800, 1200, 2600, 1200, 0, 0, 0]
         }
     },
+    
     mounted() {
         this.createBarChart()
+         // 监听屏幕宽度变化：当浏览器发生resize事件的时候，触发echart的resize事件，重绘canvas
+        window.addEventListener("resize", () => {
+            this.createBarChart();
+        })
     },
     methods: {
         createBarChart() {
@@ -109,11 +114,11 @@ export default {
             };
 
             // 使用制定的配置项和数据显示图表
-            mapBoxEchart.setOption(option);
-            // echart图表自适应
-            // window.addEventListener('resize', function() {
-            //   mapBoxEchart.resize();
-            // });
+            mapBoxEchart.setOption(option,true);
+            // // 窗口大小改变时，重新渲染图表
+            window.addEventListener('resize',function() {
+                mapBoxEchart.resize();
+            }, 200);
         },
     }
 }
diff --git a/src/views/wel/components/outputTable.vue b/src/views/wel/components/outputTable.vue
index 3116ac4..5bee5f5 100644
--- a/src/views/wel/components/outputTable.vue
+++ b/src/views/wel/components/outputTable.vue
@@ -47,18 +47,8 @@ export default {
                     name:'王新宽',
                     time:'2025-08-10 15:23:05'
                 },
-                {
-                    no:'21E8-154-1524-E6',
-                    num:15,
-                    name:'崔殿龙',
-                    time:'2025-08-08 11:21:23'
-                },
-                {
-                    no:'21E8-154-1524-E5',
-                    num:8,
-                    name:'范东辉',
-                    time:'2025-08-04 11:12:23'
-                }
+              
+                
             ]
         }
     }
diff --git a/src/views/wel/components/workbase.vue b/src/views/wel/components/workbase.vue
index 64dd640..d2336df 100644
--- a/src/views/wel/components/workbase.vue
+++ b/src/views/wel/components/workbase.vue
@@ -4,12 +4,12 @@
       <div class="left_top">
         <!-- <div class="top_title">欢迎回来！</div> -->
         <statistics-data></statistics-data>
-        <efficiency></efficiency>
+        <efficiency v-if="showEcharts"></efficiency>
       </div>
       <div class="left_bottom">
         <div class="left_box">
           <output-table></output-table>
-        </div>
+        </div> 
         <div class="right_box">
           <order-detail></order-detail>
         </div>
@@ -36,6 +36,7 @@ import quickAccess from './quickAccess.vue';
 import statisticsTable from './statisticsTable.vue';
 import notice from './notice.vue';
 import outputTable from './outputTable.vue';
+// import { setting } from '@/api/system/tenant';
 export default {
   components:{
     statisticsData,
@@ -48,9 +49,23 @@ export default {
   },
   data(){
     return{
-      
+      showEcharts:true
     }
   },
+  computed: {
+        styleRadio() {
+            console.log('this.$store.state.setting.styleRadio',this.$store.state.common.setting)
+            return this.$store.state.common.setting.styleRadio;
+        },
+    },
+    watch:{
+        styleRadio(newVal,oldVal){
+            this.showEcharts = false
+            this.$nextTick(() =>{
+              this.showEcharts = true
+            })
+        }
+    },
   mounted(){
   },
   methods:{
@@ -63,6 +78,7 @@ export default {
   .container{
     width: 98%;
     height: 100%;
+    overflow: hidden;
     // background: #fff;
     margin: 0 auto;
     display: flex;