zhgdyun/src/components/layout.vue

<template>
  <div class="fullHeight pages">
    <vhead showR="true"></vhead>
    <!-- 点击标题跳转项目概况首页，菜单导航栏渲染的数据是vuex中的projectManageMenuList -->
    <div
      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) }"
    >
      <el-menu
        :default-active="$route.path"
        class="el-menu-demo"
        :class="{ isIframe: isIframe }"
        mode="horizontal"
        @select="handleSelect"
        active-text-color="#5181F6"
        router
      >
        <div class="wrapper" ref="wrapper">
          <div class="cont" ref="cont">
            <div
              v-for="(item, index) in $store.state.projectManageMenuList"
              :key="index"
              @click="clickItem(item)"
              class="menuInnerBox"
              v-if="
                company != 'xingxuan' &&
                item.target != '_blank' &&
                (item.menuName != 'LED大屏显示器' || company != 'nanchang')
              "
            >
              <el-menu-item
                class="firstLevelMenu"
                v-if="!hasSubMenu(item.menuList)"
                :index="item.modulePath ? item.modulePath : item.path"
              >
                {{ item.moduleName ? item.moduleName : item.menuName }}
              </el-menu-item>
              <el-submenu
                :index="item.modulePath ? item.modulePath : item.path"
                v-else
              >
                <template slot="title">{{
                  item.moduleName ? item.moduleName : item.menuName
                }}</template>
                <el-menu-item
                  :index="data.path"
                  v-for="(data, i) in item.menuList"
                  :key="i"
                  >{{ data.menuName }}</el-menu-item
                >
              </el-submenu>
            </div>
          </div>
        </div>
      </el-menu>

      <el-button
        v-show="$store.state.isShowBackIndex"
        class="backtoIndex"
        type="primary"
        plain
        @click="backtoIndex()"
        size="mini"
        >返回主菜单</el-button
      >
    </div>
    <div
      v-else
      class="menuBox"
      :class="{ big: ($route.path.indexOf('/firm/') != -1 || $route.path.indexOf('/page') != -1) }"
    >
      <el-menu
        :default-active="$route.path"
        class="el-menu-demo"
        :class="{ isIframe: isIframe }"
        mode="horizontal"
        @select="handleSelect"
        active-text-color="#5181F6"
        router
      >
        <div class="wrapper" ref="wrapper">
          <div class="cont" ref="cont">
            <div
              v-for="(item, index) in $store.state.menuList"
              :key="index"
              @click="clickItem(item)"
              class="menuInnerBox"
              v-if="
                company != 'xingxuan' &&
                item.target != '_blank' &&
                (item.menuName != 'LED大屏显示器' || company != 'nanchang')
              "
            >
              <el-menu-item
                class="firstLevelMenu"
                v-if="!hasSubMenu(item.menuList)"
                :index="item.modulePath ? item.modulePath : item.path"
              >
                {{ item.moduleName ? item.moduleName : item.menuName }}
              </el-menu-item>
              <el-submenu
                :index="item.modulePath ? item.modulePath : item.path"
                v-else
              >
                <template slot="title">{{
                  item.moduleName ? item.moduleName : item.menuName
                }}</template>
                <el-menu-item
                  :index="data.path"
                  v-for="(data, i) in item.menuList"
                  :key="i"
                  >{{ data.menuName }}</el-menu-item
                >
              </el-submenu>
            </div>
          </div>
        </div>
        <!-- <el-menu-item v-show="item.target!='_blank'" :index="item.modulePath?item.modulePath:item.path" v-for="(item,index) in $store.state.menuList" :key="index">
          {{item.moduleName?item.moduleName:item.menuName}}
          </el-menu-item> -->
        <!-- <el-submenu :index="item.modulePath?item.modulePath:item.path" v-show="item.target!='_blank'" v-for="(item,index) in $store.state.menuList" :key="index">
            <template slot="title">{{item.moduleName?item.moduleName:item.menuName}}</template>
            <el-menu-item v-if="item.menuList" :index="data.path" v-for="(data,i) in item.menuList" :key="i">{{data.menuName}}</el-menu-item>

          </el-submenu> -->
      </el-menu>

      <el-button
        v-show="$store.state.isShowBackIndex"
        class="backtoIndex"
        type="primary"
        plain
        @click="backtoIndex()"
        size="mini"
        >返回主菜单</el-button
      >
    </div>
    <div class="pageContainer">
      <div class="pageDataContainer">
        <template v-if="moduleData.pathType == 1 || !moduleData.pathType">
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
          <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>
        </template>
      </div>
    </div>
    <!-- <el-backtop target=".pages"></el-backtop> -->
  </div>
</template>
<script>
import vhead from "./header";
import BScroll from 'better-scroll'
export default {
  components: { vhead },
  inject: ['reload'],
  data() {
    return {
      selfScrollTop: '',
      tabsShow,
      // menuList: [{ name: "企业注册审核", url: "/registerAudit" }],
      currentUrl: "",
      scroll: '',
      company: COMPANY,
      isIframe: false,
      moduleData: {
        pathType: 1
      }, // 点击的模块数据
      key: new Date().getTime()
    };
  },
  created() {
    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')
  },
  mounted() {
    console.log("mounted", this.$route);
    this.$nextTick(() => {
      let timer = setTimeout(() => {
        if (timer) {
          clearTimeout(timer)
          this.verScroll()
        }
      }, 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'))
    }
  },

  methods: {
    clickItem(item) {
      console.log(item)
      this.moduleData = item;
      //金林湾跳转
      if (this.company == 'jlw') {
        if (item.menuName == '工地可视化') {
          this.$router.push({
            path: item.path,
            // params: {
            //   companyProject: 'jlw'
            // }
          });
          // 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)]);

      }
      this.$forceUpdate();
    },
    hasSubMenu(list) {
      //用于判断有没有下级菜单
      let onoff = false;
      // console.log("list", list);
      if (list && list.length > 0) {
        list.forEach((element) => {
          if (element.menuName) {
            onoff = true;
            return;
          }
        });
      }
      // console.log("onoff", onoff);
      return onoff;
    },
    backtoIndex() {
      // window._paq.push(['trackEvent', '点击', '返回主菜单','返回主菜单' ])
      var url = window.location.href;
      if (url.indexOf("equipmentCenter.html") != -1) {
        this.$router.push("/equipmentCenterIndx");
      } else {
        this.$router.push("/projectIndex");
      }
    },

    handleSelect(key, 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) {
        this.$refs.cont.style.width = "100%";
        return;
      } else {
        let width = this.$store.state.menuList.length * 136// 动态计算出滚动区域的大小，前面已经说过了，产生滚动的原因是滚动区域宽度大于父盒子宽度
        this.$refs.cont.style.width = width + 'px'
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.wrapper, {
              startX: 0,
              click: true,
              mouseWheel: true,
              scrollX: true,
              scrollY: false,
              eventPassthrough: 'vertical'
            })
          } else {
            console.log(this.scroll.refresh())
            this.scroll.refresh() //如果dom结构发生改变调用该方法
          }
          console.log(this.scroll)
        })
      }
      this.reload;
    }
  },
  watch: {
    $route: {
      handler(val) {
        this.key = new Date().getTime();
      },
      immediate: true
    }
  }
};
</script>
<style lang="less" scoped>
// .el-menu.el-menu--horizontal {
//   box-sizing: border-box;
//   padding: 0 100px 4px;
//   border-bottom: none;
// }
.el-menu.el-menu--horizontal {
  box-sizing: border-box;
  // padding: 0 !important;
  border-bottom: none;
  margin-left: 50px;
  margin-right: 120px;
  white-space: nowrap;
  overflow: hidden;
}
.isIframe {
  /deeep/.el-menu.el-menu--horizontal {
    margin: 0;
  }
}
.el-menu--horizontal {
  .el-menu-item,
  /deep/.el-submenu__title {
    font-family: PingFangSC-Medium;
    font-size: 14px;
    letter-spacing: 0;
    height: 44px;
    line-height: 44px;
    padding: 0;
    margin-right: 80px;
    &:hover,
    &:focus {
      background-color: transparent;
    }
    &:hover {
      color: #5181f6;
    }
  }
}
/deep/.el-submenu__title {
  padding-right: 20px !important;
  .el-submenu__icon-arrow {
    right: 0px;
  }
}
.el-menu--horizontal .firstLevelMenu.is-active,
/deep/.is-active .el-submenu__title {
  border-bottom: 3px solid #409eff;
}
.menuInnerBox {
  display: inline-block;
}
.menuBox {
  position: relative;
  &.big {
    .el-menu.el-menu--horizontal {
      padding: 0;
      display: flex;
      .cont {
        display: flex;
      }
      .menuInnerBox {
        width: 100%;
        // flex: 1;
      }
      .el-menu-item {
        flex: 1;
        margin-right: 0;
        text-align: center;
        border-bottom: none;
        height: 48px;
        line-height: 48px;
        &.is-active,
        &:hover {
          background-color: @--color-primary;
          color: #fff !important;
        }
      }
    }
  }
}
.backtoIndex {
  position: absolute;
  right: 20px;
  top: 12px;
  font-size: 14px;
  padding: 4px 5px;
}
.toOverview {
  right: 120px;
}
@media screen and (max-width: 1500px) {
  .el-menu.el-menu--horizontal {
    padding: 0 40px 4px;
  }
}

.big {
  .el-menu.el-menu--horizontal {
    margin: 0;
    width: 100%;
    .wrapper {
      width: 100%;
    }
    .cont {
      width: 100%;
    }
  }
}
</style>