real3d-portalsite/src/views/map3d.vue

<template>
  <div id="app">
    <div class="header">
      <div class="menuClass" id="menuClass">
        <!-- <div
          v-for="(item, index) in menu"
          :key="index"
          :class="activeMenuId == index ? 'activemenu' : 'menu'"
          @click="chooseMenu(item, index)"
        >
          {{ item.title }}
        </div> -->
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleMenuSelect"
          background-color="rgb(4,16,36)"
          text-color="white"
          active-text-color="white"
        >
          <template v-for="(item, index) in menu">
            <el-menu-item v-if="!item.children" :index="item.path">{{
              item.title
            }}</el-menu-item>
            <el-submenu
              :index="index"
              v-if="item.children && item.children.length > 0"
            >
              <template slot="title">{{ item.title }}</template>

              <template v-for="(subitem, subindex) in item.children">
                <el-menu-item
                  v-if="!subitem.children"
                  popper-class="el-menu-item-popper"
                  :index="subitem.path"
                  >{{ subitem.title }}</el-menu-item
                >
                <el-submenu
                  :index="index + '-' + subindex"
                  v-if="subitem.children && subitem.children.length > 0"
                >
                  <template slot="title">{{ subitem.title }}</template>
                  <el-menu-item
                    :index="submenu.path"
                    v-for="(submenu, sunindex) in subitem.children"
                    :key="sunindex"
                    >{{ submenu.title }}</el-menu-item
                  >
                </el-submenu>
              </template>
            </el-submenu>
          </template>
        </el-menu>
      </div>
      <div class="systemTitle">海南省国土空间智慧治理试点</div>
      <tool-bar></tool-bar>
      <div class="timeline">
        <div class="timeline-item" v-html="formattedText"></div>
        <div
          class="timeline-item timeline-item-time"
          v-html="formattedTime"
        ></div>
      </div>
      <div class="user">
        <i
          class="exit el-icon-switch-button"
          @click="exit"
          :title="Resource.exit"
        ></i>
      </div>
    </div>
    <div class="routerContainer">
      <router-view ref="routeViewRef"></router-view>
    </div>
    <sm-viewer @viewerChange="viewerChange"> </sm-viewer>
  </div>
</template>

<script>
import { getRouters } from "@/api/menu";
export default {
  name: "app",
  data() {
    return {
      menu: [],
      activeIndex: 0,
      formattedText: "",
      formattedTime: "",
      activeMenuId: 0,
    };
  },
  created() {
    this.GetRouters();
  },
  computed: {},
  mounted() {
    //动态时间回显
    setInterval(() => {
      this.updateTime();
    }, 1000);
    this.updateTime();
  },
  methods: {
    viewerChange(isbig){
      this.$refs.routeViewRef[ isbig ? 'switchPack_down':'switchPack_up']()
    },
    handleMenuSelect(item) {
      this.$router.push({ path: item });
    },
    updateTime() {
      let s = new Date().toLocaleString().split(" ");
      this.formattedText = s[0];
      this.formattedTime = s[1];
    },
    chooseMenu(item, index) {
      if (this.activeMenuId == index) {
        return;
      }
      console.log(item);
      this.activeMenuId = index;
      this.$router.push({ path: item.path });
    },
    GetRouters() {
      getRouters().then((res) => {
        this.menu = res.data[0].children;
        // console.log(this.menu);
        let curRouter = this.$router.currentRoute.path;
        if (curRouter == "/") {
          this.activeIndex = this.menu[0].path;
          this.$router.push({ path: this.menu[0].path });
        } else {
          this.activeIndex = curRouter;
          this.$router.push({ path: curRouter });
          // for (let i = 0; i < this.menu.length; i++) {
          //   if (this.menu[i].path == curRouter) {
          //     this.activeMenuId = i;
          //     this.$router.push({ path: this.menu[i].path });
          //     break;
          //   }
          // }
        }
      });
    },
    getDayOfWeek() {
      const days = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      const date = new Date();
      return days[date.getDay()];
    },
    exit() {
      this.$alert("确认退出登录吗？", "提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action != "cancel") {
            this.$store.dispatch("LogOut").then(() => {
              location.href = "/login";
            });
          }
        },
      });
    },
  },
};
</script>

<style scoped>
.exit {
  font-size: 30px;
  color: cornflowerblue;
  cursor: pointer;
}
.user {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 10px;
  top: 19px;
}
.routerContainer {
  position: absolute;
  width: 100%;
  height: calc(100% - 60px);
  top: 60px;
}
.header {
  height: 60px;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 999999;
  background: rgb(4, 16, 36);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("/static/images/overview/title.png");
  background-size: 100% 100%;
}
.systemTitle {
  height: 100%;
  width: 338px;
  position: absolute;
  top: 0px;
  line-height: 60px;
  font-size: 25px;
  color: white;
}
.menuClass {
  position: absolute;
  left: 40px;
  font-size: 14px;
  height: 32px;
  top: 20px;
}
.menu {
  display: inline-block;
  width: 108px;
  height: 100%;
  line-height: 35px;
  margin-left: 9px;
  cursor: pointer;
  background-image: url("/static/images/overview/menu.png");
  background-size: 100% 100%;
}
.activemenu {
  display: inline-block;
  width: 108px;
  height: 100%;
  line-height: 35px;
  margin-left: 9px;
  cursor: pointer;
  background-image: url("/static/images/overview/menuactive.png");
  background-size: 100% 100%;
}
.menu:hover,
.activemenu:hover {
  /* background: blue; */
  font-weight: bold;
}
.timeline {
  position: absolute;
  right: 53px;
  top: 17px;
  height: 38px;
  line-height: 60px;
  font-size: 14px;
  width: 148px;
  color: white;
  background-image: url(/static/images/overview/time.png);
  background-size: 100% 100%;
}
.timeline-item {
  height: 25px;
  line-height: 25px;
  text-align: center;
  width: 100%;
  display: inline-block;
  font-size: 11px;
  position: relative;
  top: -21px;
  letter-spacing: 1px;
}

.timeline-item-time {
  top: -62px;
  font-size: 19px;
}

.el-menu-demo {
  border: none !important;
  height: 100%;
  background-color: transparent;
}

.el-menu-item {
  background-image: url("/static/images/overview/menu.png");
  background-size: 100% 100%;
  float: left;
  height: 37px;
  line-height: 43px !important;
  margin: 0;
  border: none;
  color: white;
  width: 120px;
}

.el-menu-item:hover {
  font-weight: bold;
  color: white !important;
}

.el-submenu,
.is-opend {
  background-image: url("/static/images/overview/menu.png");
  background-size: 100% 100%;
  height: 37px;
  line-height: 43px !important;
  margin: 0;
  border: none;
  color: white;
  width: 120px;
}

.el-menu--popup .el-submenu {
  width: 100% !important;
}

.el-submenu:hover {
  font-weight: bold;
  color: white !important;
}

.el-menu--horizontal > .el-menu-item.is-active,
.el-menu-item.is-active,
.el-submenu.is-active {
  background-image: url("/static/images/overview/menuactive.png");
  background-size: 100% 100%;
}

.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border: none !important;
  color: white !important;
}

.el-submenu__title {
  height: 39px !important;
  line-height: 43px !important;
  border: none !important;
  color: white !important;
}

/deep/ .el-menu-item.is-active,
/deep/.el-submenu.is-active,
/deep/ .el-submenu.is-active,
/deep/.el-submenu__title {
  border: none;
  color: white;
}

/deep/ .el-menu-item,
/deep/ .el-submenu__title,
/deep/ .is-opened {
  height: 37px !important;
  line-height: 43px !important;
  color: white !important;
  background-color: transparent !important;
  border: none !important;
  text-align: center !important;
}
</style>