real3d-portalsite/src/views/map3d.vue

<template>
  <div id="app">
    <div class="header">
      <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="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="rgba(4,16,36,0)" text-color="white" active-text-color="white">
          <template v-for="(item, index) in menu_left">
            <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>

        <el-menu :default-active="activeIndex" class="el-menu-demo1" mode="horizontal" @select="handleMenuSelect1"
          background-color="rgb(4,16,36)" text-color="white" active-text-color="white">
          <template v-for="(item, index) in menu_right">
            <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> -->
      <el-tooltip class="item" effect="dark" content="智能会话" placement="top">
        <i class="ai el-icon-chat-dot-round" @click="drawer = !drawer"></i>
      </el-tooltip>
      <div class="user">
        <span>admin</span>
        <el-tooltip class="item" effect="dark" content="退出" placement="top">
          <i style="width: 24px;height: 24px;background-image: url('/static/images/overview/icon_LogOut.png'); cursor: pointer;"
            @click="exit"></i>
        </el-tooltip>
      </div>
    </div>
    <div class="routerContainer">
      <router-view ref="routeViewRef"></router-view>
    </div>
    <sm-viewer @viewerChange="viewerChange"> </sm-viewer>
    <!-- <div class="masking_top">
      <div class="top_left"></div>
      <div class="top_right"></div>
asdasd
    </div>
    <div class="masking_left"></div>
    <div class="masking_bottom"></div>
    <div class="masking_right"></div>
    <div class="masking_right"></div> -->
    <el-drawer :visible.sync="drawer" :with-header="false" :append-to-body="true" :show-close="false">
      <iframe :src="aiModel" style="width: 100%; height: 100%; position: absolute"></iframe>
    </el-drawer>

  </div>
</template>

<script>
import { getRouters } from "@/api/menu";
export default {
  name: "app",
  data() {
    return {
      menu_left: [],
      menu_right: [],

      activeIndex: 0,
      formattedText: "",
      formattedTime: "",
      activeMenuId: 0,
      drawer: false,
      aiModel: window.aiModel
    };
  },
  created() {
    this.GetRouters();
  },
  computed: {},
  mounted() {
    //动态时间回显
    setInterval(() => {
      this.updateTime();
    }, 1000);
    this.updateTime();
  },
  methods: {
    viewerChange(isbig) {
      // this.$refs.routeViewRef[ isbig ? 'switchPack_down':'switchPack_up']()
      this.$refs.routeViewRef["switch"]();
    },
    handleMenuSelect(item) {
      this.$router.push({ path: item });

      if (item == "/checkmodel") {
        store.setToolBarShow(true); //显示工具栏
        // this.$refs.routeViewRef["switch"]();

      } else {
        store.setToolBarShow(false); //显示工具栏
        // this.$refs.routeViewRef["switch"]();

      }





      // 菜单切换的时候取消左或者右高亮菜单
      // var lis = document.querySelectorAll('.el-menu-demo1 li');
      // console.log(lis, "lis");

      // lis.forEach(function (li) {
      //   li.classList.remove('is-active');
      // });
    },
    handleMenuSelect1(item) {


      this.$router.push({ path: item });
      // var lis = document.querySelectorAll('.el-menu-demo li');
      // lis.forEach(function (li) {
      //   li.classList.remove('is-active');
      // });
    },
    updateTime() {
      let s = new Date().toLocaleString().split(" ");
      this.formattedText = s[0];
      // this.formattedTime = s[1];

      var index = s[1].lastIndexOf(":");
      this.formattedTime = s[1].substring(0, index);
    },
    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_left = res.data[0].children.slice(0, 3);
        this.menu_right = res.data[0].children.slice(3, 5);

        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 lang="scss" scoped>
.exit {
  font-size: 30px;
  color: cornflowerblue;
  cursor: pointer;
}

.ai {
  position: absolute;
  right: 110px;
  top: 19px;
  color: cornflowerblue;
  font-size: 24px;
}

.user {
  width: 85px;
  height: 40px;
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user span {
  display: inline-block;
  width: 60px;
  height: 24px;
  padding-left: 5px;
  /* background-color: pink; */
  font-size: 14px;
  color: #bcd3e5;
  line-height: 24px;
  text-align: left;
}

.routerContainer {
  position: absolute;
  width: 100%;
  height: calc(100% - 60px);
  top: 60px;
}

.header {
  height: 60px;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 100;
  // background: RGBA(31, 35, 41, 1);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("/static/images/overview/title_new.png");

  background-size: 100% 100%;
}

.masking_top {
  height: 60px;
  position: fixed;
  top: 0px;
  width: 100%;
  background: no-repeat;

  // // background-image: url("/static/images/overview/masking_top.png");
  // .top_left {
  //   height: 100%;
  //   width: 29%;
  //   background: -webkit-linear-gradient(left, RGBA(11, 32, 61, 1), RGBA(8, 40, 60, 1));
  // }

  // .top_right {
  //   background: -webkit-linear-gradient(right, RGBA(8, 40, 60, 1), RGBA(11, 32, 61, 1));

  // }

}

.masking_left {
  width: 415px;
  height: 100%;
  background: no-repeat;
  background-image: url("/static/images/overview/masking_left.png");

}

.masking_bottom {

  width: 100%;
  height: 140px;
  background: no-repeat;
  background-image: url("/static/images/overview/masking_bottom.png");

  position: fixed;
  bottom: 0.1rem;
}

.masking_right {
  width: 415px;
  height: 100%;
  background: no-repeat;
  background-image: url("/static/images/overview/masking_right.png");
  position: fixed;
  right: -1rem;
  top: 1rem;
  z-index: 1;
}

.systemTitle {
  height: 100%;
  width: 430;
  position: absolute;
  top: 0px;
  line-height: 60px;
  font-size: 25px;
  // color: white;
  background: linear-gradient(180deg, rgba(212, 250, 255, 1) 10%, rgba(54, 215, 215, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: auto;
  font-weight: 600;
}

.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;
  left: 11px;
  top: 10px;
  height: 38px;
  line-height: 60px;
  font-size: 14px;
  width: 100px;
  color: white;
  /* background-image: url(/static/images/overview/time.png); */
  background-size: 100% 100%;
  z-index: 20;
}

.timeline-item {
  height: 25px;
  line-height: 25px;
  /* text-align: center; */
  text-align: left;
  width: 100%;
  display: inline-block;
  position: relative;
  top: -21px;
  letter-spacing: 1px;

  font-weight: 400;
  font-size: 14px;
  color: #bcd3e5;
}

.timeline-item-time {
  top: -62px;
  font-size: 14px;
  text-align: left;
}

.el-menu-demo {
  border: none !important;
  height: 5%;
  background-color: transparent;
  position: relative;
  background-color: rgba(4, 16, 36, 0) !important;
  position: fixed;
  left: 9.3rem;

  top: 1rem;
  font-weight: 700;

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

}

.el-menu-demo1 {
  border: none !important;
  height: 5%;
  background-color: transparent;
  position: fixed;
  right: 16.9rem;
  top: 1.1rem;
  background-color: rgba(4, 16, 36, 0) !important;
  font-weight: 700;

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

  .el-menu-item:hover {
    font-weight: bold;
    color: white !important;
    background-image: url("/static/images/overview/right_mune_button_click.png");

  }

  // 暂时隐藏

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

}

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

.el-menu-item:hover {
  font-weight: bold;
  color: white !important;
  background-image: url("/static/images/overview/left_mune_button_click.png");

}

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

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

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


.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: 34px !important;
  line-height: 34px !important;
  color: white !important;
  background-color: transparent !important;
  border: none !important;
  text-align: center !important;
}
</style>