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>

      <!-- v-show="$store.state.isShowBackIndex" -->
      <el-button
        v-if="$store.state.userInfo.accountType == 11 && $store.state.selectedGroupSn"
        class="backtoIndex"
        type="primary"
        plain
        @click="backtoIndex()"
        size="mini"
        >返回主菜单</el-button
      >
      <el-button
        v-if="$store.state.userInfo.accountType != 11 && $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 filterMenuList"
              :key="index"
              @click="clickItem(item)"
              class="menuInnerBox"
            >
              <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-if="$store.state.userInfo.accountType == 11 && $store.state.selectedGroupSn"
        class="backtoIndex"
        type="primary"
        plain
        @click="backtoIndex()"
        size="mini"
        >返回主菜单</el-button
      >
      <el-button
        v-if="$store.state.userInfo.accountType != 11 && $store.state.isShowBackIndex"
        class="backtoIndex"
        type="primary"
        plain
        @click="backtoIndex()"
        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">
        <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(),
      showLeftArrow: false,
      showRightArrow: false,
    };
  },
  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");
  },
  computed: {
    filterMenuList() {
      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;
      } else {
        return list.filter((item) => !item.menuEquipment);
      }
    },
  },

  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"));
    }
    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);
      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;
      // this.$router.push("/workSpace");
      if (url.indexOf("equipmentCenter.html") != -1) {
        this.$router.push("/equipmentCenterIndx");
      } else if (url.indexOf("/supplier/") != -1) {
        this.$router.push("/supplierIndex");
      } 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 * 150// 动态计算出滚动区域的大小，前面已经说过了，产生滚动的原因是滚动区域宽度大于父盒子宽度
        // this.$refs.cont.style.width = width + 'px'
        this.$refs.cont.style.width = "max-content";
        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: 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;
  }
}
.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>