project-neic/src/App.vue

<template class="app">
  <div>
    <TitleBar class="titleBar" />
    <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 />
  </div>
</template>
<script>
import TitleBar from "views/TitleBar.vue";
import StatusBar from "views/StatusBar.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";
export default {
  data() {
    return {
      state: false,
    };
  },
  components: {
    TitleBar,
    StatusBar,
    ModeControl,
    FocusArea,
    WarningArea,
    boxSelect,
  },
  created: function () {
    this.getStation();
    this.initData();
    this.subscribe();
  },
  methods: {
    getData(val) {
      console.log(val);
      this.state = val;
    },
    none() {
      this.state = false;
    },

    initData: function () {
      let mb = MessageBridge.getInstance();
      let windturbine = [
        { key: "/topic/windturbine", action: this.windturbineMessage },
      ];
      mb.register(windturbine);
    },
    windturbineMessage(msg) {
      let json = JSON.parse(msg);
      this.$store.commit("windturbinelist", json);
      // console.log(json);
    },
    getStation() {
      api.getStation().then((res) => {
        this.$store.commit("stationList", res.data);
      });
    },
    subscribe() {
      setTimeout(() => {
        this.subscribe();
      }, 20000);
      if (!this.$store.state.observers) {
        let mb = MessageBridge.getInstance();
        let windturbine = [
          { key: "/topic/windturbine", action: this.windturbineMessage },
        ];
        let popup = [{ key: "/topic/fault-popup", action: this.faultMessage }];
        let title = [{ key: "/topic/title-info", action: this.titleInfos }];
        let suggestion = [
          { key: "/topic/suggestion", action: this.suggestion },
        ];
        mb.register(suggestion);
        mb.register(title);
        mb.register(windturbine);
        mb.register(popup);
        this.$store.commit("observers", true);
      }
    },
  },
};
</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;
}
.right {
  width: 32%;
  position: absolute;
  right: 20px;
  z-index: 99;
}

.statusBar {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.titleBar {
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}
.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;
}
</style>
<style lang="less">
#app {
  .currentScroll::-webkit-scrollbar {
    width: 8px;
    height: 0px;
    background-color: black;
  }

  .currentScroll::-webkit-scrollbar-thumb {
    background-color: #292929;
    border-radius: 6px;
  }
}
</style>