jn_sis_zhfx/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>
    </div>
    <div v-else class="login"><login-page @onLogin="login" /></div>
  </div>

  <!-- <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 /> -->
</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 { GetBoosterlist } from "@/api/factoryMonitor/index.js";
import { getApiWeatherstation } from "@/api/monthlyPerformanceAnalysis";
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: 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%)",
      },
      // websocket相关
      socketObj: "", // websocket实例对象
      //心跳检测
      heartCheck: {
        vueThis: this, // vue实例
        timeout: 30000, // 超时时间
        timeoutObj: null, // 计时器对象——向后端发送心跳检测
        serverTimeoutObj: null, // 计时器对象——等待后端心跳检测的回复
        // 心跳检测重置
        reset: function () {
          clearTimeout(this.timeoutObj);
          clearTimeout(this.serverTimeoutObj);
          return this;
        },
        // 心跳检测启动
        start: function () {
          this.timeoutObj && clearTimeout(this.timeoutObj);
          this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
          this.timeoutObj = setTimeout(() => {
            // 这里向后端发送一个心跳检测，后端收到后，会返回一个心跳回复
            this.vueThis.socketObj.send("HeartBeat");
            console.log("发送心跳检测");
            this.serverTimeoutObj = setTimeout(() => {
              // 如果超过一定时间还没重置计时器，说明websocket与后端断开了
              console.log("未收到心跳检测回复");
              // 关闭WebSocket
              this.vueThis.socketObj.close();
            }, this.timeout);
          }, this.timeout);
        },
      },
      socketReconnectTimer: null, // 计时器对象——重连
      socketReconnectLock: false, // WebSocket重连的锁
      socketLeaveFlag: false, // 离开标记（解决 退出登录再登录 时出现的 多次相同推送 问题，出现的本质是多次建立了WebSocket连接）
      alarmList: {},
    };
  },
  computed: {
    isLogined() {
      return this.$store.state.user?.loginState;
    },
    isFixed() {
      return this.$store.state.isFixed;
    },
    menuLength() {
      return this.$store.state.menuData.length;
    },
  },
  created() {
    let that = this;
    const themeName = that.$store.state.themeName;
    $("#appBody").attr(
      "class",
      themeName === "dark" || themeName === "light" ? themeName : "dark"
    );
  },
  mounted() {
    let that = this;
    that.setScale();
    /*窗口改变事件*/
    $(window).resize(() => {
      that.setScale();
    });
    if (!this.socketLeaveFlag) {
      // 没有离开——重连
      // websocket重连
      this.socketReconnect();
    }
  },
  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%)";
      //   this.style.fontsize = scale.f;
    },
    // 切换子系统事件
    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();
      console.log(datas);
      this.$store.commit("changeCft", datas.data);
    },
    login() {
      this.$store.commit("user/SET_LOGINSTATE", true);
      this.getBooster();
      this.getCftlist();
      // websocket启动
      this.createWebSocket();
    },
    selectMenu(menuIndex) {
      this.menuIndex = menuIndex;
    },
    // websocket启动
    createWebSocket() {
      //   let webSocketLink = `ws://192.168.1.102:6014/websocketBt/${this.$store.state.user.userId}_${this.$store.state.user.authToken}`;
      let webSocketLink = `ws://10.81.3.154:6014/websocketBt/${this.$store.state.user.userId}_${this.$store.state.user.authToken}`; // webSocket地址
      try {
        if ("WebSocket" in window) {
          this.socketObj = new WebSocket(webSocketLink);
        }
        // websocket事件绑定
        this.socketEventBind();
      } catch (e) {
        console.log("catch" + e);
        // websocket重连
        this.socketReconnect();
      }
    },
    // websocket事件绑定
    socketEventBind() {
      // 连接成功建立的回调
      this.socketObj.onopen = this.onopenCallback;
      // 连接发生错误的回调
      this.socketObj.onerror = this.onerrorCallback;
      // 连接关闭的回调
      this.socketObj.onclose = this.oncloseCallback;
      // 向后端发送数据的回调
      this.socketObj.onsend = this.onsendCallback;
      // 接收到消息的回调
      this.socketObj.onmessage = this.getMessageCallback;

      //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
      window.onbeforeunload = () => {
        this.socketObj.close();
      };
    },
    // websocket重连
    socketReconnect() {
      if (this.socketReconnectLock) {
        return;
      }
      this.socketReconnectLock = true;
      this.socketReconnectTimer && clearTimeout(this.socketReconnectTimer);
      this.socketReconnectTimer = setTimeout(() => {
        console.log("WebSocket:重连中...");
        this.socketReconnectLock = false;
        // websocket启动
        this.createWebSocket();
      }, 4000);
    },
    // 连接成功建立的回调
    onopenCallback: function (event) {
      console.log("WebSocket:已连接");
      // 心跳检测重置
      this.heartCheck.reset().start();
    },
    // 连接发生错误的回调
    onerrorCallback: function (event) {
      console.log("WebSocket:发生错误");
      // websocket重连
      this.socketReconnect();
    },
    // 连接关闭的回调
    oncloseCallback: function (event) {
      console.log("WebSocket:已关闭");
      // 心跳检测重置
      this.heartCheck.reset();
      if (!this.socketLeaveFlag) {
        // 没有离开——重连
        // websocket重连
        this.socketReconnect();
      }
    },
    // 向后端发送数据的回调
    onsendCallback: function () {
      console.log("WebSocket:发送信息给后端");
    },
    // 接收到消息的回调
    getMessageCallback: function (msg) {
      console.log(msg);
      if (Object.keys(msg) && msg.data == "ok") {
        // 心跳回复——心跳检测重置
        // 收到心跳检测回复就说明连接正常
        console.log("收到心跳检测回复");
        // 心跳检测重置
        this.heartCheck.reset().start();
      } else {
        // 普通推送——正常处理
        console.log("收到推送消息");
        let data = JSON.parse(msg.data);
        // 相关处理
        console.log(data);
        this.alarmList = data;
        this.$store.commit("changeAlarmlist", data);
      }
    },
  },

  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;
    },
    isLogined: {
      handler(res) {
        if (!res && this.socketObj) {
          // 离开标记
          this.socketLeaveFlag = true;
          // 关闭WebSocket
          this.socketObj.close();
        }
      },
      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;
}
* {
  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-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>