admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

flx:新增菜单左右切换

Browse Source
This commit is contained in:
Rain_ 2025-12-17 15:34:38 +08:00
parent 00a42b814e
commit 67cce3f59b
1 changed files with 141 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
src/components/layout.vue
View File

@ -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]
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)`;
}
},
methods: {
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>