project-neic/src/App.vue

<template class="app">
  <div style="background-color: #000000" ref="imageTofile">
    <div v-if="lockMaskDisplay" class="lockMask"></div>
    <!-- <div class="warningMask"></div> -->
    <TitleBar class="titleBar" />
    <div class="left">
      <Menu :lockMaskDisplay="lockMaskDisplay" :temperatureNum="temperatureNum" @handleChange="handleChange"
        @handleSearch="handleSearch" />
    </div>
    <div class="right">
      <el-col>
        <el-row>
          <el-col>
            <ModeControl ref="modeControl" :current="current" @clicks="handleClick"></ModeControl>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <FocusArea />
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <WarningArea></WarningArea>
          </el-col>
        </el-row>
      </el-col>
    </div>
    <div class="Dialog" v-show="state">
      <div class="D-" @click="none">-</div>
    </div>
    <StatusBar class="statusBar" @getData="getData" />
    <router-view />
    <AllMatrices v-model="matricesDisplay" />
    <SYZDetails v-model="syzDialogShow" :activeTabStation="activeTabStation"></SYZDetails>
    <AGCDetails v-model="agcDisplay"></AGCDetails>
    <TemperatureMatrix v-model="temperatureDisplay" />
    <Fault v-model="faultDisplay" />
    <Warning v-model="warningDisplay" />
    <Status v-model="statusDisplay" />
    <Action v-model="actionDisplay" />
    <Calendar v-model="calendarDisplay" />
    <Record v-model="recordDisplay" />
    <State v-model="stateDisplay" />
    <Setting v-model="settingDisplay" />
    
  </div>
</template>
<script>
import TitleBar from "views/TitleBar.vue";
import StatusBar from "views/StatusBar.vue";
import Menu from "views/Menu.vue";
import MessageBridge from "utils/MessageBridge";
import ModeControl from "components/modeControl/modeControl.vue";
import FocusArea from "components/focus/focusArea.vue";
import WarningArea from "components/warning/warningArea.vue";
import api from "api/index";
import boxSelect from "components/boxSelect.vue";
import AGCDetails from "components/focus/agcDetails.vue";
import SYZDetails from "components/focus/syzDetails.vue";
import AllMatrices from "components/allMatrices.vue";
import Setting from "components/setting.vue";
import TemperatureMatrix from "components/temperatureMatrix.vue";
import Fault from "components/search/fault.vue";
import Warning from "components/search/warning.vue";
import Status from "components/search/status.vue";
import Action from "components/search/action.vue";
import html2canvas from "html2canvas";
import Calendar from "components/search/calendar.vue";
import Record from "components/search/record.vue";
import State from "components/search/state.vue";
import { debounce } from "lodash";
export default {
  data() {
    return {
      state: false,
      agcDisplay: false, //AGC功能
      matricesDisplay: false, //全部矩阵
      temperatureDisplay: false, //温度矩阵
      faultDisplay: false, //查询-报警/故障查询
      warningDisplay: false, //查询-预警查询
      statusDisplay: false, //查询-状态时间查询
      actionDisplay: false, //查询-动作查询
      lockMaskDisplay: false, //锁屏
      syzDialogShow: false,
      settingDisplay: false,
      recordDisplay: false, //查询-推荐记录
      stateDisplay: false, //查询-状态变化查询
      calendarDisplay: false, //查询-日历查询
      temperatureNum: 0, //温度矩阵故障数
      activeTabStation: '',
    };
  },
  components: {
    TitleBar,
    StatusBar,
    Menu,
    ModeControl,
    FocusArea,
    WarningArea,
    boxSelect,
    AGCDetails,
    SYZDetails,
    AllMatrices,
    TemperatureMatrix,
    Fault,
    Warning,
    Status,
    Action,
    Setting,
    Calendar,
    Record,
    State,
  },
  created: function () {
    this.getStation();
    this.initData();
  },
  methods: {
    getData(val) {
      this.state = val;
    },
    none() {
      this.state = false;
    },

    initData: function () {
      let mb = MessageBridge.getInstance();
      let temperature = [
        { key: "/topic/temperature-count", action: this.debounceTemperatureMessage },
      ];
      let vss = [
        { key: "/topic/voice-control", action: this.windturbineMessage },
      ];
      mb.register(vss);
      mb.register(temperature);
    },
    debounceTemperatureMessage: debounce(function (msg) {
      this.temperatureMessage(msg)
    }, 1000),
    temperatureMessage(msg) {
      let json = JSON.parse(msg);
      this.temperatureNum = json.countOverLimit + json.countCrossingLimit;
    },
    windturbineMessage(msg) {
      let arr = msg.split("-");
      if (msg === "CLOSE") {
        this.handleClosed()
      }
      if (msg === "OPEN_FJJZ-ALL") {
        this.handleChange(2)
      }
      if (msg === "OPEN_WDJZ-ALL") {
        this.handleChange(3)
      }
      if (msg === "OPEN_AGC-ALL") {
        this.handleChange(5)
      }
      if (arr[0] === "OPEN_SYZ") {
        this.activeTabStation = arr[1]
        this.handleClosed()
        setTimeout(() => {
          this.handleChange(4)
        }, 3000);
      }
    },
    getStation() {
      api.getStation().then((res) => {
        let stationList = [];
        res.data.forEach((item) => {
          if (item.type === 1) {
            stationList.push(item);
          }
        });
        this.$store.commit("stationList", stationList);
        let syzArray = [];
        stationList.forEach((item) => {
          let obj = {
            id: item.id, // 升压站 ID
            isWarning: "0", // 升压站是否显示报警小红点
            name: item.name, // 升压站中文名称
            isMute: false, // 升压站报警是否静音
          };
          syzArray.push(obj);
        });
        this.$store.commit("syzArray", syzArray);
        this.$store.commit("activeTab", syzArray[0].name);
      });
    },
    handleChange(val) {
      if (val !== 9) {
        this.matricesDisplay = false;
        this.syzDialogShow = false;
        // this.$store.commit("syzDialogShow", false);
        this.agcDisplay = false;
        this.temperatureDisplay = false;
        this.faultDisplay = false;
        this.warningDisplay = false;
        this.statusDisplay = false;
        this.actionDisplay = false;
        this.settingDisplay = false
        this.calendarDisplay = false;
        this.recordDisplay = false;
        this.stateDisplay = false;
      }

      switch (val) {
        case 2:
          this.matricesDisplay = true;
          break;
        case 3:
          this.temperatureDisplay = true;
          break;
        case 4:
          this.syzDialogShow = true;
          break;
        case 5:
          this.agcDisplay = true;
          break;
        case 7:
          this.lockMaskDisplay = !this.lockMaskDisplay;
          break;
        case 9:
          this.toImage();
          break;
        case 10:
          this.settingDisplay = true;
          break;
        default:
          break;
      }
    },
    handleClosed() {
      this.matricesDisplay = false;
      this.syzDialogShow = false;
      // this.$store.commit("syzDialogShow", false);
      this.agcDisplay = false;
      this.temperatureDisplay = false;
      this.faultDisplay = false;
      this.warningDisplay = false;
      this.statusDisplay = false;
      this.actionDisplay = false;
      this.settingDisplay = false
      this.calendarDisplay = false;
      this.recordDisplay = false;
      this.stateDisplay = false;
    },
    handleSearch(val) {
      this.matricesDisplay = false;
      this.$store.commit("syzDialogShow", false);
      this.agcDisplay = false;
      this.temperatureDisplay = false;
      this.faultDisplay = false;
      this.warningDisplay = false;
      this.statusDisplay = false;
      this.actionDisplay = false;
      this.settingDisplay = false;
      this.calendarDisplay = false;
      this.recordDisplay = false;
      this.stateDisplay = false;
      switch (val) {
        case "fault":
          this.faultDisplay = true;
          break;
        case "warning":
          this.warningDisplay = true;
          break;
        case "status":
          this.statusDisplay = true;
          break;
        case "action":
          this.actionDisplay = true;
          break;
        case "calendar":
          this.calendarDisplay = true;
          break;
        case "record":
          this.recordDisplay = true;
          break;
        case "changeState":
          this.stateDisplay = true;
          break;
        default:
          break;
      }
    },
    // 页面元素转图片
    toImage() {
      // 手动创建一个 canvas 标签
      const canvas = document.createElement("canvas");
      // 获取父标签，意思是这个标签内的 DOM 元素生成图片
      // imageTofile是给截图范围内的父级元素自定义的ref名称
      let canvasBox = this.$refs.imageTofile;
      // 获取父级的宽高
      const width = parseInt(window.getComputedStyle(canvasBox).width);
      const height = parseInt(window.getComputedStyle(canvasBox).height);
      // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
      canvas.width = width * 2;
      canvas.height = height * 2;
      canvas.style.width = width + "px";
      canvas.style.height = height + "px";
      const context = canvas.getContext("2d");
      context.scale(2, 2);
      const options = {
        backgroundColor: null,
        canvas: canvas,
        useCORS: true,
      };
      html2canvas(canvasBox, options).then((canvas) => {
        // toDataURL 图片格式转成 base64
        let dataURL = canvas.toDataURL("image/png");
        console.log(dataURL);
        this.downloadImage(dataURL);
      });
    },
    //下载图片
    downloadImage(url) {
      // 如果是在网页中可以直接创建一个 a 标签直接下载
      let a = document.createElement("a");
      a.href = url;
      a.download = "页面截图";
      a.click();
    },
  },
};
</script>
<style>
@import "../src/assets/styles/main.css";

body {
  /* 设置内容不可选中 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* .app{
    background-color: #000000;
  } */
.Dialog {
  width: 520px;
  height: 800px;
  background-color: rgb(250, 249, 249);
  position: absolute;
  right: 30px;
  z-index: 999;
  bottom: 50px;
  /* display: none; */
}

.D- {
  width: 30px;
  height: 30px;
  background-color: rgb(167, 204, 192);
  font-size: 30px;
  position: absolute;
  top: 5px;
  right: 10px;
  line-height: 30px;
  text-align: center;
}

.D-:hover {
  background-color: #999999;
}

.left {
  width: 40px;
  position: absolute;
  left: 0px;
  height: 100%;
  z-index: 9999;
  background-color: #242424;
  margin-left: 7px;
  border-radius: 8px;
}

.right {
  width: 31%;
  position: absolute;
  right: 20px;
  z-index: 99;
}

.statusBar {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9999;
}

.titleBar {
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  z-index: 999;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #999999;
  border-radius: 8px;
}

.el-collapse-item__wrap {
  background-color: #000000 !important;
  box-sizing: border-box !important;
  padding-left: 27px !important;
}

.el-collapse-item__header {
  background-color: rgb(20, 20, 20) !important;
  font-size: 12px !important;
  color: #bfbfbf !important;
  box-sizing: border-box !important;
  padding-left: 30px !important;
  margin-bottom: 2px !important;
}

.el-collapse {
  border: none !important;
}

.el-collapse-item__header {
  border: none !important;
}

.el-collapse-item__wrap {
  border: none !important;
}

.lockMask {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 9998;
}

.warningMask {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: radial-gradient(circle,
      rgb(255, 0, 0, 0),
      rgb(255, 0, 0, 0),
      rgb(255, 0, 0, 0),
      rgb(255, 0, 0));
  animation: fade 2000ms infinite;
  -webkit-animation: fade 2000ms infinite;
  z-index: 999;
  pointer-events: none;
}

@keyframes fade {
  from {
    opacity: 0.7;
  }

  50% {
    opacity: 0.3;
  }

  to {
    opacity: 0.7;
  }
}

@-webkit-keyframes fade {
  from {
    opacity: 0.7;
  }

  50% {
    opacity: 0.3;
  }

  to {
    opacity: 0.7;
  }
}
</style>
<style lang="less">
#app {
  .currentScroll::-webkit-scrollbar {
    width: 8px;
    height: 0px;
    background-color: black;
  }

  .currentScroll::-webkit-scrollbar-thumb {
    background-color: #999999;
    border-radius: 6px;
  }
}

::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
  background-color: black !important;
}

::-webkit-scrollbar-thumb {
  background-color: #999999 !important;
  border-radius: 6px !important;
}

.el-table--enable-row-hover .el-table__body tr:hover>td {
  color: rgba(37, 116, 219, 0.8) !important;
}

.el-table__body tr.current-row>td {
  color: rgba(37, 116, 219, 0.8) !important;
}
</style>