wanda-bm-guide/src/components/menuList.vue

<template>
  <!-- 顶部路由 -->
  <div class="menu">
    <div class="home" @click="$emit('update:modelNum', 0)">
      <div class="downright"></div>
      <div class="home-box">
        <img src="@/assets/imgs/logo.png" alt />
        <span>{{plazas.length>0?formatter(plazaId,plazas):'--'}}</span>
      </div>
    </div>
    <div>
      <div
        v-for="(item, index) in list"
        :key="index"
        :class="{ 'is-active': item.state }"
        @click="clickEventAcitve(item, index)"
      >{{ item.name }}</div>
    </div>
    <div class="home-right">
      <span @click="dumpLegend">
        <img class="img1" src="../assets/imgs/scj.png" alt />
        <span class="span1">图例库</span>
      </span>

      <span @click="toDrafts" class="span-out">
        <img class="img2" src="../assets/imgs/cgx.png" alt />
        <span class="span2">草稿箱</span>
        <span class="span2-num" v-if="value<=99">{{value}}</span>
        <span class="span2-num" style="line-height:10px" v-else>...</span>
      </span>
      <span>
        <img class="img3" src="../assets/imgs/clock.png" alt />
        <span class="span3">{{times}}</span>
      </span>
    </div>
  </div>
</template>

<script>
import { formatTime } from "@/utils/format.js";
import { mapGetters } from "vuex";
import moment from "moment";
export default {
  data() {
    return {
      state: "",
      list: [
        { name: "首页", state: false, route: "first" },
        { name: "项目概况", state: false, route: "overview" },
        { name: "楼层功能", state: false, route: "floorFunc" }, //楼层功能
        { name: "设备设施", state: false, route: "equipment" }, //设备设施
        { name: "其他事项", state: false, route: "other" }, //其他
        { name: "分析 | 报表", state: false, route: "analysis" }
      ],
      times: `${new Date().getFullYear()}.${formatTime(
        new Date().getMonth() + 1
      )}.${formatTime(new Date().getDate())} ${formatTime(
        new Date().getHours()
      )}:${formatTime(new Date().getMinutes())}`,
      value: 190,
      // 路由词典
      dict: {
        first: 1,
        overview: 2,
        floorFunc: 3,
        equipment: 4,
        other: 5,
        analysis: 6
      }
    };
  },
  computed: {
    ...mapGetters(["plazas", "plazaId"])
  },
  watch: {
    $route: "handleRoute"
  },
  created() {
    this.currentTime();
  },
  mounted() {
    window.vm = this;
    this.handleRoute(this.$route);
  },
  methods: {
    currentTime() {
      this.times = moment().format("YYYY.MM.DD HH:mm");
      setTimeout(this.currentTime, 1000);
    },
    handleRoute(newRouter) {
      if (!newRouter) {
        return false;
      }
      const { path } = newRouter;
      let router = path.split("home/")[1];
      this.modelNum(this.dict[router]);
    },
    formatter(str, arrv) {
      if (str && arrv) {
        const Objs = arrv.find(e => e && e.plazaid == str);
        return Objs ? Objs.plazaname : "--";
      } else {
        return "";
      }
    },
    modelNum(val) {
      this.list = this.list.map((item, index) => {
        if (val == index + 1) {
          item.state = true;
        } else {
          item.state = false;
        }
        return item;
      });
    },
    clickEventAcitve(item) {
      if (item.name == "楼层功能") {
        this.$cookie.set("categoryId", "LCGN", 3);
      } else {
        this.$cookie.set("categoryId", "GDXT", 3);
      }
      this.list.forEach(ele => {
        ele.state = false;
      });
      item.state = true;
      this.state = item.state;
      this.$router.push({ path: `/home/${item.route}` });
    },

        dumpLegend() {
            const { conf } = window.__systemConf,
                { wandaBmGuideUrl } = conf
            window.open(`${wandaBmGuideUrl}home/legendLibrary`, true)
        }
    },
    //入草稿箱
    toDrafts() {
      const { conf } = window.__systemConf,
        { editerUrl } = conf;
      let data = `projectId=${this.plazaId}&fmapID=${this.fmapID}`;
      let url = editerUrl + "drafts?" + encodeURIComponent(data);
      window.open(url, true);
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
.menu {
  height: 48px;
  min-width: 1366px;
  color: #1f2429;
  font-size: 16px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
  overflow: hidden;
  .home {
    width: 265px;
    height: 48px;
    // line-height: 48px;
    text-align: center;
    cursor: pointer;
    color: #ffffff;
    float: left;
    margin-right: 83px;
    // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
    background: linear-gradient(
      180deg,
      rgba(54, 156, 247, 1) 0%,
      rgba(2, 91, 170, 1) 100%
    );
    position: relative;
    .downright {
      position: absolute;
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-bottom: 48px solid #fff;
      right: 0px;
      top: 0;
    }
    .home-box {
      height: 100%;
      display: flex;
      align-items: center;
      img {
        width: 28px;
        height: 28px;
        margin-left: 20px;
        margin-right: 24px;
        margin-top: -3px;
      }
      span {
        font-size: 20px;
        font-family: MicrosoftYaHei;
        height: 27px;
        line-height: 27px;
        margin-top: -4px;
        &:after {
          content: "|";
          position: absolute;
          left: 60px;
        }
      }
    }
  }
  & > div:nth-of-type(2) {
    & > div {
      line-height: 48px;
      text-align: center;
      //background: url('../assets/images/topbar1.png') no-repeat;
      float: left;
      width: 80px;
      height: 48px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .is-active {
      color: #025baa;
      font-weight: bolder;
      border-bottom: 2px solid #025baa;
      background: linear-gradient(
        180deg,
        rgba(2, 91, 170, 0) 0%,
        rgba(2, 91, 170, 0.2) 100%
      );
    }
  }
  .home-right {
    float: right;
    margin-right: 20px;
    line-height: 48px;
    color: #646c73;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-content: center;
    img {
      margin-top: -2px;
    }
    .span-out {
      position: relative;
      margin: 0 16px;
      .span2-num {
        position: absolute;
        right: -5px;
        top: 5px;
        display: inline-block;
        width: 18px;
        height: 18px;
        background: red;
        border-radius: 90px;
        font-size: 12px;
        text-align: center;
        line-height: 18px;
        color: #ffffff;
      }
    }
  }
  .span1,
  .span2 {
    padding: 0 6px 0 3px;
  }

  .span3 {
    padding-left: 3px;
  }
}
</style>
<style lang="less">
.menu {
  .el-badge__content.is-fixed {
    top: 10px;
  }
}
</style>