From 67cce3f59b38e7eafda6e7cf7052e5e35e59bb7d Mon Sep 17 00:00:00 2001
From: Rain_ <904416525@qq.com>
Date: Wed, 17 Dec 2025 15:34:38 +0800
Subject: [PATCH] =?UTF-8?q?flx:=E6=96=B0=E5=A2=9E=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E5=B7=A6=E5=8F=B3=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout.vue | 204 ++++++++++++++++++++++++++------------
 1 file changed, 141 insertions(+), 63 deletions(-)

diff --git a/src/components/layout.vue b/src/components/layout.vue
index de1c29a6..6ef71128 100644
--- a/src/components/layout.vue
+++ b/src/components/layout.vue
@@ -3,9 +3,14 @@
     <vhead showR="true"></vhead>
     <!-- 点击标题跳转项目概况首页，菜单导航栏渲染的数据是vuex中的projectManageMenuList -->
     <div
-      v-if="tabsShow && ($route.path.indexOf('/firm/') != -1 || $route.path.indexOf('/page') != -1)"
+      v-if="
+        tabsShow &&
+        ($route.path.indexOf('/firm/') != -1 || $route.path.indexOf('/page') != -1)
+      "
       class="menuBox"
-      :class="{ big: ($route.path.indexOf('/firm/') != -1 || $route.path.indexOf('/page') != -1) }"
+      :class="{
+        big: $route.path.indexOf('/firm/') != -1 || $route.path.indexOf('/page') != -1,
+      }"
     >
       <el-menu
         :default-active="$route.path"
@@ -36,10 +41,7 @@
               >
                 {{ item.moduleName ? item.moduleName : item.menuName }}
               </el-menu-item>
-              <el-submenu
-                :index="item.modulePath ? item.modulePath : item.path"
-                v-else
-              >
+              <el-submenu :index="item.modulePath ? item.modulePath : item.path" v-else>
                 <template slot="title">{{
                   item.moduleName ? item.moduleName : item.menuName
                 }}</template>
@@ -54,6 +56,7 @@
           </div>
         </div>
       </el-menu>
+
       <!-- v-show="$store.state.isShowBackIndex" -->
       <el-button
         v-if="$store.state.userInfo.accountType == 11 && $store.state.selectedGroupSn"
@@ -77,7 +80,9 @@
     <div
       v-else
       class="menuBox"
-      :class="{ big: ($route.path.indexOf('/firm/') != -1 || $route.path.indexOf('/page') != -1) }"
+      :class="{
+        big: $route.path.indexOf('/firm/') != -1 || $route.path.indexOf('/page') != -1,
+      }"
     >
       <el-menu
         :default-active="$route.path"
@@ -103,10 +108,7 @@
               >
                 {{ item.moduleName ? item.moduleName : item.menuName }}
               </el-menu-item>
-              <el-submenu
-                :index="item.modulePath ? item.modulePath : item.path"
-                v-else
-              >
+              <el-submenu :index="item.modulePath ? item.modulePath : item.path" v-else>
                 <template slot="title">{{
                   item.moduleName ? item.moduleName : item.menuName
                 }}</template>
@@ -129,7 +131,6 @@
 
           </el-submenu> -->
       </el-menu>
-
       <el-button
         v-if="$store.state.userInfo.accountType == 11 && $store.state.selectedGroupSn"
         class="backtoIndex"
@@ -148,6 +149,14 @@
         size="mini"
         >返回主菜单</el-button
       >
+      <div v-show="showLeftArrow" class="left_arrow" @click="move_left()">
+        <!-- <icon-svg name="icon-left-arrow"></icon-svg> -->
+        <i class="el-icon-arrow-left"></i>
+      </div>
+      <div v-show="showRightArrow" class="right_arrow" @click="move_right()">
+        <!-- <icon-svg name="icon-right-arrow"></icon-svg> -->
+        <i class="el-icon-arrow-right"></i>
+      </div>
     </div>
     <div class="pageContainer">
       <div class="pageDataContainer">
@@ -158,7 +167,12 @@
           <router-view v-if="!$route.meta.keepAlive"></router-view>
         </template>
         <template v-else>
-          <iframe :key="key" :src="moduleData.embedUrl" frameborder="0" style="width: 100%;height: 100%;"></iframe>
+          <iframe
+            :key="key"
+            :src="moduleData.embedUrl"
+            frameborder="0"
+            style="width: 100%; height: 100%"
+          ></iframe>
         </template>
       </div>
     </div>
@@ -167,77 +181,121 @@
 </template>
 <script>
 import vhead from "./header";
-import BScroll from 'better-scroll'
+import BScroll from "better-scroll";
 export default {
   components: { vhead },
-  inject: ['reload'],
+  inject: ["reload"],
   data() {
     return {
-      selfScrollTop: '',
+      selfScrollTop: "",
       tabsShow,
       // menuList: [{ name: "企业注册审核", url: "/registerAudit" }],
       currentUrl: "",
-      scroll: '',
+      scroll: "",
       company: COMPANY,
       isIframe: false,
       moduleData: {
-        pathType: 1
+        pathType: 1,
       }, // 点击的模块数据
-      key: new Date().getTime()
+      key: new Date().getTime(),
+      showLeftArrow: false,
+      showRightArrow: false,
     };
   },
   created() {
-    this.moduleData = this.$store.state.menuList[0]
-    if(this.$route.path != this.$store.state.menuList[0].modulePath){
+    this.moduleData = this.$store.state.menuList[0];
+    if (this.$route.path != this.$store.state.menuList[0].modulePath) {
       this.$router.push(this.$store.state.menuList[0].modulePath);
     }
-    console.log(this.$store.state.menuList,'7778888')
-    console.log(this.moduleData,'7778888')
+    console.log(this.$store.state.menuList, "7778888");
+    console.log(this.moduleData, "7778888");
   },
   computed: {
     filterMenuList() {
-      let list = this.$store.state.menuList.filter(item => {
-        return this.company != 'xingxuan' &&
-                item.target != '_blank' &&
-                (item.menuName != 'LED大屏显示器' || this.company != 'nanchang');
-      })
+      let list = this.$store.state.menuList.filter((item) => {
+        return (
+          this.company != "xingxuan" &&
+          item.target != "_blank" &&
+          (item.menuName != "LED大屏显示器" || this.company != "nanchang")
+        );
+      });
       // 非数据中台页面，过滤数据中台菜单
-      if(this.$route.path.includes('equipmentCenter')) {
-        return list
+      if (this.$route.path.includes("equipmentCenter")) {
+        return list;
       } else {
-        return list.filter(item => !item.menuEquipment) ;
+        return list.filter((item) => !item.menuEquipment);
       }
-    }
+    },
   },
+
   mounted() {
     console.log("mounted", this.$route);
     this.$nextTick(() => {
       let timer = setTimeout(() => {
         if (timer) {
-          clearTimeout(timer)
-          this.verScroll()
+          clearTimeout(timer);
+          this.verScroll();
         }
-      }, 0)
-    })
-    if (window.localStorage.getItem('isIframe')) {
-      if (window.localStorage.getItem('isIframe') == '1') {
-        this.isIframe = true
+      }, 0);
+    });
+    if (window.localStorage.getItem("isIframe")) {
+      if (window.localStorage.getItem("isIframe") == "1") {
+        this.isIframe = true;
         // this.$nextTick(()=>{
         //   setOffset(2180,360)
         // })
-
       }
-      console.log(window.localStorage.getItem('isIframe'))
+      console.log(window.localStorage.getItem("isIframe"));
     }
+    this.$nextTick(() => {
+      const dh_li = document.querySelector(".el-menu-demo .cont");
+      const menudemo = document.querySelector(".el-menu-demo");
+      const style = window.getComputedStyle(dh_li);
+      const menudemoStyle = window.getComputedStyle(menudemo);
+      setTimeout(() => {
+        // console.log(style.width, menudemoStyle.width);
+        if (parseInt(style.width) > parseInt(menudemoStyle.width)) {
+          this.showLeftArrow = true;
+          this.showRightArrow = true;
+        } else {
+          this.showLeftArrow = false;
+          this.showRightArrow = false;
+        }
+      });
+    });
   },
-
   methods: {
+    move_left() {
+      const dh_li = document.querySelector(".el-menu-demo .cont");
+      const style = window.getComputedStyle(dh_li);
+      const matrix = new WebKitCSSMatrix(style.transform);
+      if (matrix.m41 < 0) {
+        const numberCount = matrix.m41 + 140;
+        dh_li.style.transform = `translateX(${
+          numberCount > 0 ? 0 : numberCount
+        }px) translateY(0px) translateZ(1px)`;
+      }
+    },
+    move_right() {
+      const dh_li = document.querySelector(".el-menu-demo .cont");
+      const menudemo = document.querySelector(".el-menu-demo");
+      const style = window.getComputedStyle(dh_li);
+      const menudemoStyle = window.getComputedStyle(menudemo);
+      const matrix = new WebKitCSSMatrix(style.transform);
+      if (matrix.m41 <= 0) {
+        const numberCount = matrix.m41 - 140;
+        const width = parseInt(style.width + 1) - parseInt(menudemoStyle.width);
+        dh_li.style.transform = `translateX(${
+          numberCount <= -width ? -width : numberCount
+        }px) translateY(0px) translateZ(1px)`;
+      }
+    },
     clickItem(item) {
-      console.log(item)
+      console.log(item);
       this.moduleData = item;
       //金林湾跳转
-      if (this.company == 'jlw') {
-        if (item.menuName == '工地可视化') {
+      if (this.company == "jlw") {
+        if (item.menuName == "工地可视化") {
           this.$router.push({
             path: item.path,
             // params: {
@@ -247,8 +305,12 @@ export default {
           // window.open(this.$router.resolve(item.path).href, '_self');
         }
       } else {
-        window._paq.push(['trackEvent', '点击', item.moduleName ? item.moduleName : item.menuName, '切换到' + (item.moduleName ? item.moduleName : item.menuName)]);
-
+        window._paq.push([
+          "trackEvent",
+          "点击",
+          item.moduleName ? item.moduleName : item.menuName,
+          "切换到" + (item.moduleName ? item.moduleName : item.menuName),
+        ]);
       }
       this.$forceUpdate();
     },
@@ -281,21 +343,24 @@ export default {
     },
 
     handleSelect(key, keyPath) {
-      console.log(key)
-      console.log(keyPath)
+      console.log(key);
+      console.log(keyPath);
       // console.log(index)
       // this.$store.commit('setCurrentUrl',url)
       // this.$store.dispatch('currentUrl',url)
     },
     verScroll() {
       // console.log(this.$route.path)
-      if (this.$route.path.indexOf('/firm/') != -1 || this.$route.path.indexOf('/page') != -1) {
+      if (
+        this.$route.path.indexOf("/firm/") != -1 ||
+        this.$route.path.indexOf("/page") != -1
+      ) {
         this.$refs.cont.style.width = "100%";
         return;
       } else {
         // let width = this.$store.state.menuList.length * 150// 动态计算出滚动区域的大小，前面已经说过了，产生滚动的原因是滚动区域宽度大于父盒子宽度
         // this.$refs.cont.style.width = width + 'px'
-        this.$refs.cont.style.width = 'max-content';
+        this.$refs.cont.style.width = "max-content";
         this.$nextTick(() => {
           if (!this.scroll) {
             this.scroll = new BScroll(this.$refs.wrapper, {
@@ -304,26 +369,26 @@ export default {
               mouseWheel: true,
               scrollX: true,
               scrollY: false,
-              eventPassthrough: 'vertical'
-            })
+              eventPassthrough: "vertical",
+            });
           } else {
-            console.log(this.scroll.refresh())
-            this.scroll.refresh() //如果dom结构发生改变调用该方法
+            console.log(this.scroll.refresh());
+            this.scroll.refresh(); //如果dom结构发生改变调用该方法
           }
-          console.log(this.scroll)
-        })
+          console.log(this.scroll);
+        });
       }
       this.reload;
-    }
+    },
   },
   watch: {
     $route: {
       handler(val) {
         this.key = new Date().getTime();
       },
-      immediate: true
-    }
-  }
+      immediate: true,
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -337,10 +402,24 @@ export default {
   // padding: 0 !important;
   border-bottom: none;
   margin-left: 50px;
-  margin-right: 120px;
+  margin-right: 150px;
   white-space: nowrap;
   overflow: hidden;
 }
+.left_arrow {
+  position: absolute;
+  top: 50%;
+  left: 20px;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+.right_arrow {
+  position: absolute;
+  top: 50%;
+  right: 120px;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
 .isIframe {
   /deeep/.el-menu.el-menu--horizontal {
     margin: 0;
@@ -436,4 +515,3 @@ export default {
   }
 }
 </style>
-