project-neic/src/App.vue

<template class="app">
  <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>
  <StatusBar class="statusBar" />
  <router-view />
</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";
  export default {
    components: {
      TitleBar,
      StatusBar,
      ModeControl,
      FocusArea,
      WarningArea
    },
    created: function () {
      this.initData()
    },
    methods: {
      initData: function () {
        var mb = MessageBridge.getInstance();
        var windturbine = [{ key: "/topic/windturbine", action: this.windturbineMessage }];
        var popup = [{ key: "/topic/fault-popup", action: this.faultMessage }];
        var suggestion = [{ key: "/topic/suggestion", action: this.suggestion }];
        var title = [{ key: "/topic/title-info", action: this.titleInfos }];
        mb.register(title);
        mb.register(windturbine);
        mb.register(popup);
        mb.register(suggestion);
      },
      windturbineMessage(msg) {
        var json = JSON.parse(msg);
        this.$store.commit('windturbinelist', json)
      },
      faultMessage(msg){
        var json = JSON.parse(msg);
        this.$store.commit('warning', json)
      },
      suggestion(msg){
        var json = JSON.parse(msg);
        this.$store.commit('suggestion', json)
      },
      // titleInfos(msg){
      //   var json = JSON.parse(msg);
      //   this.$store.commit('titleInfo', json)
      // },
    },
  }
</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;
  } */
  .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;
  }
</style>