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