fd_dwgz_zhyw_nx/src/App.vue

<template>
  <div
    v-if="!showSisView"
    id="screen"
    :style="{
      width: `${style.width}px`,
      height: `${style.height}px`,
      transform: `${style.transform}`,
    }"
  >
    <div v-if="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: isFixed ? true : isShowMenu }"
        @mouseenter="showMenu"
        @mouseleave="hideMenu"
        v-show="
          $store.state.themeName === 'dark' && $store.state.menuData.length
        "
        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' && $store.state.menuData.length"
        >
          <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="{ paddingLeft: isFixed && menuLength > 0 ? '52px' : 0 }"
      >
        <router-view />
      </div>
      <!-- <alarmBadge /> -->
    </div>
    <div v-else class="login"><login-page @onLogin="login" /></div>
  </div>
</template>

<script>
// 导入header.vue文件
import alarmBadge from "@/components/alarm-badge/index.vue";
import Menu from "@/views/layout/Menu.vue";
import Header from "@/views/layout/Header.vue";
import LoginPage from "./views/layout/login-page.vue";
import { GetBoosterlist } from "@/api/factoryMonitor/index.js";
import { getApiWeatherstation } from "@/api/monthlyPerformanceAnalysis";
import SvgIcon from "@com/coms/icon/svg-icon.vue";
import { GetDeviceTableData } from "@/api/zhbj/index.js";
import dayjs from "dayjs";
import $ from "jquery";
export default {
  components: {
    Menu,
    Header,
    LoginPage,
    alarmBadge,
    SvgIcon,
  },

  data() {
    return {
      isShowMenu: false,
      // 当前子系统
      root: "",
      //   isLogined: localStorage.getItem("loginState") || false,
      showSisView: false,
      memuCloseTimeout: null,
      menuData: [],
      hideMenus: "0",
      hideHeard: "0",
      style: {
        width: "1920",
        height: "1080",
        fontsize: "16px",
        transform: "scaleY(1) scaleX(1) translate(-50%, -50%)",
      },
    };
  },
  computed: {
    isLogined() {
      return this.$store.state.user?.loginState;
    },
    isFixed() {
      return this.$store.state.isFixed;
    },
    menuLength() {
      return this.$store.state.menuData.length;
    },
  },
  created() {},
  mounted() {
    let that = this;
    that.setScale();
    /*窗口改变事件*/
    $(window).resize(() => {
      that.setScale();
    });
  },
  unmounted() {
    console.log("离开标记", this.socketLeaveFlag);
  },
  methods: {
    getScale() {
      const w = window.innerWidth / this.style.width;
      const h = window.innerHeight / this.style.height;
      const d = window.devicePixelRatio;
      //   let f = 16;
      //   if (d > 1) {
      //     f = 18;
      //   }
      return { x: w, y: h };
    },
    setScale() {
      let scale = this.getScale();
      this.style.transform =
        "scaleY(" + scale.y + ") scaleX(" + scale.x + ") translate(-50%, -50%)";
    },
    // 切换子系统事件
    HeaderMenuClick(data) {
      this.root = data.id;
    },
    showMenu() {
      if (!this.isFixed) {
        this.isShowMenu = true;
        this.memuCloseTimeout && clearTimeout(this.memuCloseTimeout);
      }
    },
    hideMenu() {
      if (!this.isFixed) {
        const that = this;
        this.memuCloseTimeout = setTimeout(function () {
          that.isShowMenu = false;
        }, 500);
      }
    },
    getBooster() {
      GetBoosterlist().then((res) => {
        if (res.data && res.data.code == 200) {
          this.$store.commit("changeBooster", res.data.data);
        }
      });
    },
    // 获取测风塔
    async getCftlist() {
      const { data: datas } = await getApiWeatherstation();
      this.$store.commit("changeCft", datas.data);
    },
    login() {
      this.$store.commit("user/SET_LOGINSTATE", true);

      // websocket启动
      //   this.createWebSocket();
    },
    selectMenu(menuIndex) {
      this.menuIndex = menuIndex;
    },
  },

  watch: {
    "$store.state.menuData"(res) {
      this.menuData = res;
    },
    isLogined: {
      handler(res) {
        if (!res && this.socketObj) {
          // 离开标记
          this.socketLeaveFlag = true;
          // 关闭WebSocket
          this.socketObj.close();
        } else {
          this.getBooster();
          this.getCftlist();
        }
        if (res) {
          this.getBooster();
          this.getCftlist();
        }
      },
      immediate: true,
    },
    "$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";
#screen {
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transition: 0.3s;
}
.alarmDeligo {
  z-index: 2003;
  position: relative;

  img {
    width: 43px;
    max-width: 43px;
    height: 43px;
    z-index: 3;
  }

  img:first-child {
    width: 53px;
    height: 57px;
    max-width: 53px;
    top: -7px;
    left: -5px;
    position: absolute;
    z-index: 3;
  }
}

* {
  box-sizing: border-box;

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

  &::-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: 51.28px;
@headerHeight: 59px;
.main {
  width: 100%;
  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;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    flex: 0 0 @menuWidth;
    width: @menuWidth;
    height: calc(100% - @headerHeight);
    // height: calc(100vh - 59px);
    top: @headerHeight;
    // top: 59px;
    background-color: fade(#192a26, 75%);
    z-index: 2002;
    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 100%;
    max-width: 100%;
    height: calc(100% - @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;
  }
}
.login {
  width: 100%;
  height: 100%;
  background: url("~@/assets/login-bg.png") no-repeat;
  background-size: cover;
  position: relative;
}
.el-badge {
  &.active {
    .el-badge__content--danger {
      opacity: 0 !important;
    }
  }
}
.el-badge__content--danger {
  background: #ff4e00 !important;
  border: none !important;
}
.el-badge__content.is-fixed {
  top: 7px !important;
  right: 14px !important;
  z-index: 2003 !important;
}

.trans {
  animation: circleProgess 3s linear infinite;
}

@keyframes circleProgess {
  0% {
    transform: rotateZ(360deg);
  }

  25% {
    transform: rotateZ(270deg);
  }

  50% {
    transform: rotateZ(180deg);
  }

  75% {
    transform: rotateZ(90deg);
  }

  100% {
    transform: rotateZ(0deg);
  }
}
.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;
}
.main-body {
  .query {
    display: flex;
    // justify-content: space-between;

    &.left {
      justify-content: flex-start;
    }

    .query-items {
      flex: 0 0 auto;
      display: flex;

      .query-item {
        flex: 0 0 auto;
        display: flex;
        margin: 0 1.4815vh;

        .el-input {
          &.placeholder-left {
            input {
              &::placeholder {
                text-align: left;
              }
            }
          }
        }
        .placeholder-left {
          .el-input {
            input {
              height: 33px !important;
              &::placeholder {
                text-align: left;
              }
            }
          }
        }

        .lable {
          flex: 0 0 auto;
          margin-right: 1.4815vh;
          line-height: 33px;
          color: @gray-l;
        }

        .search-input {
          position: relative;

          // input {
          //   box-sizing: border-box;
          //   flex: 0 0 200px;
          //   border: 0px solid @darkgray;
          //   color: @white;
          //   outline: unset;
          //   border-radius: 0%;
          //   padding-right: 40px;
          //   background: fade(#536268, 20);
          //   height: 33px;
          //   line-height: 33px;

          //   &::placeholder {
          //     font-size: 12px;
          //     text-align: right;
          //     color: @darkgray;
          //   }
          // }

          // .unit {
          //   position: absolute;
          //   right: 12px;
          //   top: 6px;
          //   line-height: 33px;
          //   margin: auto;
          // }
        }
      }
    }

    .query-actions {
      flex: 0 0 auto;
      margin-left: 50px;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .btn {
        cursor: pointer;
      }
    }
  }

  input {
    box-sizing: border-box;
    flex: 0 0 200px;
    border: 0px solid @darkgray;
    color: @white;
    outline: unset;
    border-radius: 0%;
    padding-right: 40px;
    background: fade(#536268, 20);
    height: 33px;
    line-height: 33px;

    &::placeholder {
      font-size: 12px;
      text-align: right;
      color: @darkgray;
    }
  }

  input[type="checkbox"] {
    position: relative;
    display: inline-block;
    appearance: none;
    width: 14px;
    height: 14px;
    outline: none;
    border: 1px solid @gray;
    background-color: #000;
    border-radius: 20%;
    margin: 0;
    padding: 0;

    &:checked {
      border-color: @green;
      background: @green;
    }

    &::after {
      display: inline-block;
      content: " ";
      position: absolute;
      left: 30%;
      top: 5%;
      width: 3px;
      height: 7px;
      border-color: #fff;
      border-style: solid;
      border-width: 0px 2px 2px 0px;
      transform: rotate(45deg);
      opacity: 0;
    }

    &:checked::after {
      content: "";
      opacity: 1;
      transition: opacity 0.3s ease-out;
    }
  }
}
</style>