fd_dwgz_zhyw/src/App.vue

<template>
  <div v-if="!showSisView && isLogined" class="main">
    <div class="header-body" v-if="hideHeard === '0'">
      <div class="header-title" @click="handleClickJump()">
        <!-- <img v-if="$store.state.themeName === 'dark'" src="./assets/projectLogo.png" alt="" />
        <img v-if="$store.state.themeName === 'light'" src="./assets/light-projectLogo.png" alt="" /> -->
        <span
          :style="
            $store.state.themeName === 'dark'
              ? 'color:#fff; font-size:18px;font-family: SimHei'
              : 'color:#000'
          "
        >
          >>发电场站生产实时运营管理平台</span
        >
      </div>
      <div class="header-menu-body">
        <Header @onMenuClick="HeaderMenuClick" />
      </div>
    </div>
    <div
      class="menu-body"
      :class="{ hover: isShowMenu }"
      @mouseenter="showMenu"
      @mouseleave="hideMenu"
      v-show="$store.state.themeName === 'dark'"
      v-if="hideMenus === '0'"
    >
      <Menu :root="root" />
    </div>
    <div>
      <el-menu
        class="lightMenu"
        :class="$store.state.themeName === 'light' ? 'show' : 'hidden'"
        :collapse="true"
        text-color="#ffffff"
        active-text-color="#6262a2"
        background-color="#36348e"
        @select="selectMenu"
        v-if="hideMenus === '0'"
      >
        <el-sub-menu
          :index="index"
          :title="item.text"
          v-for="(item, index) in menuData"
          :key="index"
        >
          <template #title>
            <router-link :to="item.path">
              <el-icon>
                <SvgIcon :svgid="item.icon" />
              </el-icon>
            </router-link>
          </template>
          <el-menu-item-group
            v-for="(menu, idx) in item.children"
            :index="idx"
            :key="idx"
          >
            <router-link :to="menu.path">
              <el-menu-item :index="index + '-' + idx">{{
                menu.text
              }}</el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
    </div>
    <div
      class="main-body"
      :style="
        $store.state.themeName === 'light' && hideMenus === '0'
          ? 'margin-left: 75px; max-width  : calc(100vw - 54px - 25px);'
          : ''
      "
    >
      <router-view />
    </div>
  </div>
  <login-page v-if="!showSisView && !isLogined" @onLogin="login" />
  <div v-else-if="!isLogined" class="login">
    <login-page />
  </div>
  <!-- <login-page v-if="!showSisView && !isLogined" @onLogin="login" /> -->
  <!-- <div v-else-if="token == ''">
    {{token}}
 <login-page  @onLogin="login" />
   </div> -->

  <sisView v-else-if="showSisView" />
</template>

<script>
// 导入header.vue文件
import Menu from "@/views/layout/Menu.vue";
import Header from "@/views/layout/Header.vue";
import LoginPage from "./views/layout/login-page.vue";
import sisView from "./views/sisView/index.vue";

import SvgIcon from "@com/coms/icon/svg-icon.vue";
import $ from "jquery";
export default {
  components: {
    Menu,
    Header,
    LoginPage,
    sisView,
    SvgIcon,
  },

  data() {
    return {
      isShowMenu: false,
      // 当前子系统
      root: "",
      isLogined: true,
      showSisView: false,
      memuCloseTimeout: null,
      menuData: [],
      hideMenus: "0",
      hideHeard: "0",
    };
  },

  created() {
    let that = this;
    const themeName = that.$store.state.themeName;
    $("#appBody").attr(
      "class",
      themeName === "dark" || themeName === "light" ? themeName : "dark"
    );

    // that.$nextTick(() => {
    //   that.API.requestData({
    //     isMust: false, // 请求是否携带 token ，默认为 true ，可缺省
    //     method: "POST", // 请求方式，默认为 GET ，可缺省
    //     subUrl: "admin/loginvue", // 请求接口地址，必传项
    //     data: {
    //       username: "admin",
    //       password: "admin",
    //     },
    //     success(res) {
    //       localStorage.setItem("authToken", res.data.authToken);
    //       localStorage.setItem("username", res.data.user.laborName);

    //       that.API.requestData({
    //         method: "POST", // 请求方式，默认为 GET ，可缺省
    //         subUrl: "admin/usermenu", // 请求接口地址，必传项
    //         success() {
    //           // that.BASE.showMsg({
    //           //   msg: "登陆成功",
    //           //   type: "success",
    //           // });
    //           // that.$router.push('/'); // 跳转到首页
    //         },
    //       });
    //     },
    //   });
    // });
  },

  methods: {
    // 切换子系统事件
    HeaderMenuClick(data) {
      this.root = data.id;
    },
    showMenu() {
      this.isShowMenu = true;
      this.memuCloseTimeout && clearTimeout(this.memuCloseTimeout);
    },
    hideMenu() {
      const that = this;
      this.memuCloseTimeout = setTimeout(function () {
        that.isShowMenu = false;
      }, 500);
    },
    login(params) {
      if (params.username && params.password) this.isLogined = true;
    },
    selectMenu(menuIndex) {
      this.menuIndex = menuIndex;
    },

    // clearBackground() {
    //   return;
    //   let body = $("body.light");
    //   if (!body) body = $("body.dark");
    //   body.css({
    //     // background: "transparent",
    //     background: "#fff",
    //   });
    //   body.find("#app").css({
    //     // background: "transparent",
    //     background: "#fff",
    //   });
    // },
  },

  watch: {
    $route(res) {
      this.showSisView = res.fullPath === "/sisView";

      this.hideHeard = res.query.hideheard || "0";
      this.hideMenus = res.query.hidemenus || "0";
      if (res.query.theme) {
        const theme = res.query.theme === "dark" ? "dark" : "light";
        this.$store.dispatch("changeTheme", theme);
        $("#appBody").attr("class", theme);
      }

      if (res.query.fn) {
        this[res.query.fn] && this[res.query.fn]();
      }

      let ActiveModule = null;
      this.menuData.forEach((pEle) => {
        if (pEle.path === res.fullPath) {
          ActiveModule = pEle;
        }
        pEle?.children?.forEach((cEle) => {
          if (cEle.path === res.fullPath) {
            ActiveModule = cEle;
          }
        });
      });
      if (ActiveModule) {
        this.$store.dispatch("changeModuleName", ActiveModule.text);
      }
    },
    "$store.state.menuData"(res) {
      this.menuData = res;
    },
    "$store.state.moudleName"(msg) {
      if (window.__MODE__.showModuleName && msg) {
        this.BASE.showMsg({
          type: this.$store.state.themeName === "dark" ? "success" : "warning",
          showClose: true,
          msg,
        });
      }
    },
  },
};
</script>

<style lang="less">
@import "./assets/styles/main.less";

* {
  box-sizing: border-box;

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-track-piece {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: fade(@gray, 75);
    border-radius: 4px;
    outline: none;
    outline-offset: 0px;
    border: none;
  }
}

body {
  margin: 0;
  background: #fff;
  color: #fff;
  // background-image: url("./assets/background.png");
  background: rgb(4, 12, 11);
  background-size: cover;
  font-size: @fontsize;
  font-family: @defalut-font-family;
}
@menuWidth: 5.37vh;
@headerHeight: 59px;
.main {
  width: 100vw;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;

  .header-body {
    z-index: 2;
    // background: radial-gradient(closest-corner at 22% 40%, #2d5a47, #040d0a, #040d0a);
    // flex: 0 0 100%;

    width: 100%;
    display: flex;
    flex-direction: row;
    height: @headerHeight;
    border-bottom: 1px solid #142b29;
    .header-title {
      padding-left: 20px;
      margin: auto;
      color: #fff;
    }
    .header-menu-body {
      flex-grow: 1;
    }
  }
  .menu-body {
    position: absolute;
    flex: 0 0 @menuWidth;
    width: @menuWidth;
    height: calc(100vh - @headerHeight);
    // height: calc(100vh - 59px);
    top: @headerHeight;
    // top: 59px;
    background-color: fade(#192a26, 75%);
    z-index: 8;
    opacity: 0;
    transition: opacity 0.2s;
    transition-timing-function: ease-in;
    // transform: translate(-@menuWidth);

    &:hover,
    &.hover {
      opacity: 1;
      transition: opacity 0.2s;
      transition-timing-function: ease-out;
      transform: translate(0);
    }
  }
  .main-body {
    flex: 0 0 calc(100vw);
    max-width: calc(100vw);
    height: calc(100vh - @headerHeight);
    // padding: 1.481vh;
    // transition: flex 0.1s, margin-left 0.1s;
    // transition-timing-function: ease-in-out;
    // &.show-menu {
    //   flex: 0 0 calc(100vw - @menuWidth);
    //   margin-left: @menuWidth;
    //   transition: flex 0.1s, margin-left 0.1s;
    //   transition-timing-function: ease-in-out;
    // }
  }
  .el-table__body tr.current-row > td {
    color: #fff;
    background: rgba(66, 66, 66, 0.66) !important;
  }

  .el-transfer-panel {
    width: 450px !important;
    height: 73vh;
    background-color: #111d1c !important;
    border: 1px solid #999999 !important;

    .el-transfer-panel__body {
      height: 100% !important;

      .el-transfer-panel__list {
        height: 100% !important;
      }
    }
  }
  .el-transfer-panel .el-transfer-panel__header {
    background-color: #111d1c !important;
    color: #05bb4c !important;

    .el-checkbox .el-checkbox__label {
      color: #05bb4c !important;
    }
  }
  .el-button--primary.is-disabled,
  .el-button--primary.is-disabled:active,
  .el-button--primary.is-disabled:focus,
  .el-button--primary.is-disabled:hover {
    background-color: #05bb4c;
    border-color: #05bb4c;
  }
}
.el-tree-node__content {
  height: 40px !important;
}
.el-tree-node__label {
  font-size: 14px !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #05bb4c !important;
}
.el-table__body tr.hover-row > td.el-table__cell {
  background-color: rgba(2, 2, 2) !important;
}
#appBody.light .el-table th.el-table__cell > .cell {
  height: 8.2vh !important;
}
.power-benchmarking-page
  .top
  .top-left
  .table.el-table
  thead
  tr:last-child
  th
  .cell {
  height: 116px !important;
}
* {
  -webkit-touch-callout: none; /*系统默认菜单被禁用*/
  -webkit-user-select: none; /*webkit浏览器*/
  -khtml-user-select: none; /*早期浏览器*/
  -moz-user-select: none; /*火狐*/
  -ms-user-select: none; /*IE10*/
  user-select: none;
}
input {
  -webkit-user-select: auto; /*webkit浏览器*/
}
textarea {
  -webkit-user-select: auto; /*webkit浏览器*/
}
.gfSelect .el-input__suffix {
  display: none !important;
}
body .gfSelect .el-input__inner {
  background: rgba(83, 98, 104, 0);
  color: #ffffff;
  font-size: 16px;
}
</style>