TheLayout.vue

<template>
  <!-- 告警音频 -->
  <div class="h-all">
    <audio ref="audioAlarm" :src="curAudioSrc" muted="muted"></audio>
    <el-row class="page">
      <el-col :span="24" class="head">
        <the-header></the-header>
      </el-col>
      <el-col :span="24" class="head-nav">
        <the-header1></the-header1>
      </el-col>

      <el-col :span="24" class="page-main">
        <div id="box">
          <div id="left" >
            <div class="sidebar">
              <vue-scroll>
                <the-sidebar :deviceCollection="deviceCollection"
                             :modifyDevice="modifyDevice"
                             :addDevice = "addDevice"
                             :deleteDevice = "deleteDevice"
                             :subnetCollection="subnetCollection"
                             :linkCollection="linkCollection"
                             :alarmCollection="alarmCollection"
                             :alarmLevelConfig="alarmLevelConfig"
                             :curClickSubnetId.sync="curClickSubnetId"
                             :curClickDeviceId.sync="curClickDeviceId">
                </the-sidebar>
              </vue-scroll>
            </div>
          </div>
          <div id="resize">&nbsp;</div>
          <div id="right">
            <div class="page-content">
              <!--<vue-scroll :ops="ops">-->
                <the-main :deviceCollection.sync="deviceCollection"
                          :topologyCollection.sync="topologyCollection"
                          :alarmCollection.sync="alarmCollection"
                          :linkCollection.sync="linkCollection"
                          :subnetCollection.sync="subnetCollection"
                          :alarmLevelConfig.sync="alarmLevelConfig"
                          :curClickSubnetId="curClickSubnetId"
                          :curClickDeviceId.sync="curClickDeviceId"
                          :elineCollection="elineCollection"
                          :discoveryCollection.sync="discoveryCollection"
                          :isdotshow="isdotshow"
                          :configFileDifferenceCollection.sync ="configFileDifferenceCollection"
                          :discoverElementCollection.sync = "discoverElementCollection"
                ></the-main>
              <!--</vue-scroll>-->
            </div>
          </div>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import TheLayoutHeader from './TheLayoutHeader'
import TheLayoutHeader1 from './TheLayoutHeader1'
import TheLayoutSidebar from './TheLayoutSidebar'
import TheLayoutMain from './TheLayoutMain'
import DeviceStateService from '../../domain/services/DeviceStateService'
import AlarmService from '../../domain/services/AlarmService'
import AlarmLevelConfigService from '../../domain/services/AlarmLevelConfigService'
import AlarmFilterConfigService from '../../domain/services/AlarmFilterConfigService'
import DeviceService from '../../domain/services/DeviceService'
import SubnetService from '../../domain/services/SubnetService'
import LinkService from '../../domain/services/LinkService'
import AlarmManager from '../../domain/models/AlarmManager'
import LinkManager from '../../domain/models/LinkManager'
import DeviceStateSocketApi from '../../api/websocketApis/DeviceStateSocketApi'
import WebSocketService from '../../domain/services/WebSocketService'
import ElineService from '../../domain/services/Business/ElineService'
import ServerService from '../../domain/services/ServerService'
import { EventBus } from '../../domain/EventBus'
import HelperUtil from '../../utils/HelperUtil'
import UserService from '../../domain/services/UserService'

let _this = null
export default {
  name: 'TheLayout',
  data () {
    return {
      // 设备集合(含状态)
      deviceCollection: null,
      // 修改的设备
      modifyDevice: [],
      // 新建设备集合
      addDevice: [],
      // 删除设备集合
      deleteDevice: [],
      // 子网集合(含deviceCollection)
      subnetCollection: null,
      // 告警集合
      alarmCollection: null,
      // 链路集合(含状态)
      linkCollection: null,
      // 拓扑集合(含状态)
      topologyCollection: null,
      // 告警配置对象
      alarmLevelConfig: null,
      // 当前告警音频URL
      curAudioSrc: '',
      // 当前所点击的子网ID
      curClickSubnetId: '',
      // 当前所点击的设备ID
      curClickDeviceId: '',
      // webSocket对象
      webSocket: null,
      // 告警音频定时器
      intervalAlarmVoice: null,
      // websocket 心跳机制
      intervalWebSocketHeartBeat: null,
      // eline业务集合
      elineCollection: null,
      // 网元发现集合
      discoveryCollection: null,
      // 配置差异性文件集合
      configFileDifferenceCollection:null,

      // 网元发现集合
      discoverElementCollection:null,

      isdotshow: [
        true, // 默认值不可删
        true // 默认值不可删
      ],
      isMonitor: false
    }
  },

  methods: {

    /**
     * @description（临时）模拟网元发现WebSocket接口
     * @author weixin
     * @date 2020/7/21 23:28
     */
    fakeDiscoveryWebsocket (templateKey) {
      console.log(`选择的模板：${templateKey}`)
      // 设置定时器，每 5s 返回一个网元发现对象
      this.intervalDiscovery && clearInterval(this.intervalDiscovery)
      const fakeReturnObj = [
        {
          findPercent: 0,
          checkFindIsEnd: false,
          devicesInDb: [],
          linksInDb: [],
          devicesNew: [],
          linksNew: []
        },
        {
          findPercent: 20,
          checkFindIsEnd: false,
          devicesInDb: [],
          linksInDb: [],
          devicesNew: [],
          linksNew: []
        },
        {
          findPercent: 50,
          checkFindIsEnd: false,
          devicesInDb: [],
          linksInDb: [],
          devicesNew: [],
          linksNew: []
        },
        {
          findPercent: 80,
          checkFindIsEnd: false,
          devicesInDb: [],
          linksInDb: [],
          devicesNew: [],
          linksNew: []
        },
        {
          findPercent: 100,
          checkFindIsEnd: true,
          devicesInDb: [
            {"deviceKey":"15948880548541140","uuid":"235","hostName":"","displayName":"235","deviceTypeKey":"SWITCH","deviceModel":"CZ.T-T65D.C.30W.T","deviceVersion":"1.0.0","deviceDesc":"","description":"","subnetKey":"15874354140291166","subnetName":null,"station":"11","ipAddress":"1.21.2.244","bussIpAddress":"3.21.2.244","mac":"","snmpVersion":0,"snmpPort":161,"trapPort":162,"snmpGroup":"public","ipmiUserName":"","ipmiPassword":"","deviceStatus":0,"startTime":"20200717.162354","delFlag":0,"firmwareKey":"","firmwareFileName":"","configFileKey":"","configFileName":"","locationName":"11","manageType":0,"bussManageType":0,"brand":"","manufacturerLiaison":"","manufacturerPhone":"","manager":"","managerPhone":"","modifyTime":"20200722.164421.141","status":2},
            {"deviceKey":"15948880548551189","uuid":"287","hostName":"","displayName":"287","deviceTypeKey":"SWITCH","deviceModel":"CZ.T-T65D.C.30W.T","deviceVersion":"1.0.0","deviceDesc":"","description":"","subnetKey":"15874354140291166","subnetName":null,"station":"11","ipAddress":"1.21.3.50","bussIpAddress":"3.21.3.50","mac":"","snmpVersion":0,"snmpPort":161,"trapPort":162,"snmpGroup":"public","ipmiUserName":"","ipmiPassword":"","deviceStatus":0,"startTime":"20200717.162354","delFlag":0,"firmwareKey":"","firmwareFileName":"","configFileKey":"","configFileName":"","locationName":"11","manageType":0,"bussManageType":0,"brand":"","manufacturerLiaison":"","manufacturerPhone":"","manager":"","managerPhone":"","modifyTime":"20200722.164421.313","status":2},
          ],
          linksInDb: [
            {"linkKey":"15954907078581847","linkName":"111","startDeviceKey":"15948880548541140","startDeviceName":"__vue_devtool_undefined__","startPortName":"1","endDeviceKey":"15948880548551189","endDeviceName":"__vue_devtool_undefined__","endPortName":"2","linkStatus":0,"linkType":0,"modifyTime":"20200723.155147.858","startGroupID":"","endGroupID":"","delFlag":0,"status":"-1","bandwidthUsed":"0","bandwidthMax":"0","source":{"topologyKey":"15964465736933386","elementKey":"15948880548541140","topologyName":"235","nodeType":0,"belongSubnet":"15874354140291166","horizontalAxis":525,"verticalAxis":42,"modifyTime":null,"delFlag":0,"timestamp":null,"status":2},"target":{"topologyKey":"15964465736933387","elementKey":"15948880548551189","topologyName":"287","nodeType":0,"belongSubnet":"15874354140291166","horizontalAxis":220,"verticalAxis":43,"modifyTime":null,"delFlag":0,"timestamp":null,"status":2}},
            {"linkKey":"15954908276312949","linkName":"222","startDeviceKey":"15948880548541140","startDeviceName":"__vue_devtool_undefined__","startPortName":"4","endDeviceKey":"15948880548551189","endDeviceName":"__vue_devtool_undefined__","endPortName":"5","linkStatus":0,"linkType":0,"modifyTime":"20200723.155347.631","startGroupID":"","endGroupID":"","delFlag":0,"status":"-1","bandwidthUsed":"0","bandwidthMax":"0","source":{"topologyKey":"15964465736933386","elementKey":"15948880548541140","topologyName":"235","nodeType":0,"belongSubnet":"15874354140291166","horizontalAxis":525,"verticalAxis":42,"modifyTime":null,"delFlag":0,"timestamp":null,"status":2},"target":{"topologyKey":"15964465736933387","elementKey":"15948880548551189","topologyName":"287","nodeType":0,"belongSubnet":"15874354140291166","horizontalAxis":220,"verticalAxis":43,"modifyTime":null,"delFlag":0,"timestamp":null,"status":2}},
            {"linkKey":"15954908434912980","linkName":"333","startDeviceKey":"15948880548541140","startDeviceName":"__vue_devtool_undefined__","startPortName":"6","endDeviceKey":"15948880548551189","endDeviceName":"__vue_devtool_undefined__","endPortName":"7","linkStatus":0,"linkType":0,"modifyTime":"20200723.155403.491","startGroupID":"","endGroupID":"","delFlag":0,"status":"-1","bandwidthUsed":"0","bandwidthMax":"0","source":{"topologyKey":"15964465736933386","elementKey":"15948880548541140","topologyName":"235","nodeType":0,"belongSubnet":"15874354140291166","horizontalAxis":525,"verticalAxis":42,"modifyTime":null,"delFlag":0,"timestamp":null,"status":2},"target":{"topologyKey":"15964465736933387","elementKey":"15948880548551189","topologyName":"287","nodeType":0,"belongSubnet":"15874354140291166","horizontalAxis":220,"verticalAxis":43,"modifyTime":null,"delFlag":0,"timestamp":null,"status":2}},
          ],
          devicesNew: [
            {
              uuid: '132435645',
              deviceKey: '123124565464',
              hostName: '主机名称1',
              displayName: '网元名称1',
              deviceTypeKey: 'SWITCH',
              deviceModel: '网元型号1',
              deviceVersion: '网元版本1',
              deviceDesc: '网元描述信息1',
              description: '描述信息1',
              subnetKey: '所属子网1',
              station: '所属车站1',
              ipAddress: '1.21.3.50',
              bussIpAddress: '业务口IP地址1',
              mac: 'mac地址1',
              snmpVersion: 0,
              snmpPort: 22,
              trapPort: 23,
              snmpGroup: 'snmp团体名1',
              ipmiUserName: 'IPMI用户名1',
              ipmiPassword: 'IPMI密码1',
              deviceStatus: 0,
              startTime: '开站时间1',
              delFlag: 0,
            },
            {
              uuid: '132435645',
              deviceKey: '123124524356564',
              hostName: '主机名称2',
              displayName: '网元名称2',
              deviceTypeKey: 'SWITCH',
              deviceModel: '网元型号2',
              deviceVersion: '网元版本2',
              deviceDesc: '网元描述信息2',
              description: '描述信息2',
              subnetKey: '所属子网2',
              station: '所属车站2',
              ipAddress: '1.21.2.244',
              bussIpAddress: '业务口IP地址2',
              mac: 'mac地址2',
              snmpVersion: 0,
              snmpPort: 22,
              trapPort: 23,
              snmpGroup: 'snmp团体名2',
              ipmiUserName: 'IPMI用户名2',
              ipmiPassword: 'IPMI密码2',
              deviceStatus: 0,
              startTime: '开站时间2',
              delFlag: 0,
            },
            {
              uuid: '132435645',
              deviceKey: '123124567564',
              hostName: '主机名称2',
              displayName: '网元名称2',
              deviceTypeKey: 'SWITCH',
              deviceModel: '网元型号2',
              deviceVersion: '网元版本2',
              deviceDesc: '网元描述信息2',
              description: '描述信息2',
              subnetKey: '所属子网2',
              station: '所属车站2',
              ipAddress: '2',
              bussIpAddress: '业务口IP地址2',
              mac: 'mac地址2',
              snmpVersion: 0,
              snmpPort: 22,
              trapPort: 23,
              snmpGroup: 'snmp团体名2',
              ipmiUserName: 'IPMI用户名2',
              ipmiPassword: 'IPMI密码2',
              deviceStatus: 0,
              startTime: '开站时间2',
              delFlag: 0,
            },
            {
              uuid: '132435645',
              deviceKey: '123128959564',
              hostName: '主机名称2',
              displayName: '网元名称2',
              deviceTypeKey: 'SWITCH',
              deviceModel: '网元型号2',
              deviceVersion: '网元版本2',
              deviceDesc: '网元描述信息2',
              description: '描述信息2',
              subnetKey: '所属子网2',
              station: '所属车站2',
              ipAddress: '3',
              bussIpAddress: '业务口IP地址2',
              mac: 'mac地址2',
              snmpVersion: 0,
              snmpPort: 22,
              trapPort: 23,
              snmpGroup: 'snmp团体名2',
              ipmiUserName: 'IPMI用户名2',
              ipmiPassword: 'IPMI密码2',
              deviceStatus: 0,
              startTime: '开站时间2',
              delFlag: 0,
            },
            {
              uuid: '132435645',
              deviceKey: '123124564593564',
              hostName: '主机名称2',
              displayName: '网元名称2',
              deviceTypeKey: 'SWITCH',
              deviceModel: '网元型号2',
              deviceVersion: '网元版本2',
              deviceDesc: '网元描述信息2',
              description: '描述信息2',
              subnetKey: '所属子网2',
              station: '所属车站2',
              ipAddress: '4',
              bussIpAddress: '业务口IP地址2',
              mac: 'mac地址2',
              snmpVersion: 0,
              snmpPort: 22,
              trapPort: 23,
              snmpGroup: 'snmp团体名2',
              ipmiUserName: 'IPMI用户名2',
              ipmiPassword: 'IPMI密码2',
              deviceStatus: 0,
              startTime: '开站时间2',
              delFlag: 0,
            },
            {
              uuid: '132435645',
              deviceKey: '123122467564',
              hostName: '主机名称2',
              displayName: '网元名称2',
              deviceTypeKey: 'SWITCH',
              deviceModel: '网元型号2',
              deviceVersion: '网元版本2',
              deviceDesc: '网元描述信息2',
              description: '描述信息2',
              subnetKey: '所属子网2',
              station: '所属车站2',
              ipAddress: '5',
              bussIpAddress: '业务口IP地址2',
              mac: 'mac地址2',
              snmpVersion: 0,
              snmpPort: 22,
              trapPort: 23,
              snmpGroup: 'snmp团体名2',
              ipmiUserName: 'IPMI用户名2',
              ipmiPassword: 'IPMI密码2',
              deviceStatus: 0,
              startTime: '开站时间2',
              delFlag: 0,
            },
            {
              uuid: '132435645',
              deviceKey: '965845824567564',
              hostName: '主机名称2',
              displayName: '网元名称2',
              deviceTypeKey: 'SWITCH',
              deviceModel: '网元型号2',
              deviceVersion: '网元版本2',
              deviceDesc: '网元描述信息2',
              description: '描述信息2',
              subnetKey: '所属子网2',
              station: '所属车站2',
              ipAddress: '6',
              bussIpAddress: '业务口IP地址2',
              mac: 'mac地址2',
              snmpVersion: 0,
              snmpPort: 22,
              trapPort: 23,
              snmpGroup: 'snmp团体名2',
              ipmiUserName: 'IPMI用户名2',
              ipmiPassword: 'IPMI密码2',
              deviceStatus: 0,
              startTime: '开站时间2',
              delFlag: 0,
            },
            {
              uuid: '132435645',
              deviceKey: '12323957968564',
              hostName: '主机名称2',
              displayName: '网元名称2',
              deviceTypeKey: 'SWITCH',
              deviceModel: '网元型号2',
              deviceVersion: '网元版本2',
              deviceDesc: '网元描述信息2',
              description: '描述信息2',
              subnetKey: '所属子网2',
              station: '所属车站2',
              ipAddress: '7',
              bussIpAddress: '业务口IP地址2',
              mac: 'mac地址2',
              snmpVersion: 0,
              snmpPort: 22,
              trapPort: 23,
              snmpGroup: 'snmp团体名2',
              ipmiUserName: 'IPMI用户名2',
              ipmiPassword: 'IPMI密码2',
              deviceStatus: 0,
              startTime: '开站时间2',
              delFlag: 0,
            },
          ],
          linksNew: [
            {
              linkName: '链路名称1',
              startDeviceKey: '15948880548551189',
              startPortName: '1.21.3.50',
              endDeviceKey: '123124565464',
              endPortName: '1.21.3.50',
              linkKey: '124354657665734'
            },
          ]
        },
      ]
      this.discoveryCollection = fakeReturnObj[0]
      let index = 1
      this.intervalDiscovery = setInterval(() => {
        // 新的网元发现进度赋值给discoveryCollection
        this.discoveryCollection = fakeReturnObj[index]
        // index增加模拟返回新进度
        index = index + 1
        // WebSocket返回完毕后清除此定时器
        if (index === fakeReturnObj.length) {
          clearInterval(this.intervalDiscovery)
          delete this.intervalDiscovery
        }
      }, 200)
    },
    /**
     * @Description  ：处理对流量监控按钮的打开与否的响应
     * @author       : yjz
     * @param        :
     * @return       :
     * @exception    :
     * @date         :
     */
    handleMonitor (monitoring) {
      if (monitoring) { // 流量监控按钮打开
        _this.openMonitor()
      } else {
        _this.closeMonitor()
      }
    },
    handle1: function (lan) {
      this.webSocket.send(lan)
    },
    /**
    * @Description  ：处理对点击设备ID的监听
    * @author       : yjz
    * @param        :
    * @return       :
    * @exception    :
    * @date         :
    */
    handleTestClickDeviceId (clickDeviceId) {
      _this.curClickDeviceId = clickDeviceId
    },
    /**
     * 处理对点击子网的监听
     */
    handleClickSubnet (clickSubnetId) {
      _this.curClickSubnetId = clickSubnetId
    },
    /**
    * @Description  ：处理对同步按钮的监听
    * @author       : yjz
    * @param        :
    * @return       :
    * @exception    :
    * @date         :
    */
    handleTestSync (syncAllDataFlag) {
      if (syncAllDataFlag) {
        _this.syncData()
      }
    },

    drag: function () {
      $(document).ready(function () {
        var resize = document.getElementById('resize')
        var left = document.getElementById('left')
        var right = document.getElementById('right')
        var box = document.getElementById('box')
        resize.onmousedown = function (e) {
          var startX = e.clientX
          resize.left = resize.offsetLeft
          document.onmousemove = function (e) {
            var endX = e.clientX
            var moveLen = resize.left + (endX - startX)
            var maxT = box.clientWidth - resize.offsetWidth
            if (moveLen < 30) moveLen = 30
            if (moveLen > maxT - 30) moveLen = maxT - 30
            resize.style.left = moveLen
            left.style.width = moveLen + 'px'
            // right.style.width = (box.clientWidth - moveLen - 5) + "px";
            // 触发告警列表高度的计算
            EventBus.$emit('cal-table-height')
          }
          document.onmouseup = function (evt) {
            document.onmousemove = null
            document.onmouseup = null
            resize.releaseCapture && resize.releaseCapture()
          }
          resize.setCapture && resize.setCapture()
          return false
        }
      }
      )
    },

    // 设置页面状态更新标志
    setUpdateFlag: function (flag) {
      if (_this.$store.state.activeIndex == '/TheLayout/main' && flag == 0) {
        return
      }
      if (_this.$store.state.activeIndex == '/TheLayout/ServiceStatusUpdate' && flag == 1) {
        return
      }
      _this.isdotshow[flag] = false
    },

    // 同步操作
    syncData: function () {
      // _this.systemModeAdapter[_this.$store.state.systemMode].unregisterWebSocketEvent(_this);
      // _this.systemModeAdapter[_this.$store.state.systemMode].syncDeviceState(_this);
      // _this.systemModeAdapter[_this.$store.state.systemMode].registerWebSocketEvent(_this);
      _this.closeWebSocket()
      _this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.OTHERS_CODE))
      _this.initAllDate()
    },

    // 若告警列表中 存在未被确认的告警信息，则一直播放提示音
    alarmVoice: function () {
      let _this = this
      for (var alarmKey in _this.alarmCollection) {
        if ((_this.alarmCollection[alarmKey].alarmStatus === 0 || _this.alarmCollection[alarmKey].alarmStatus === 1 || _this.alarmCollection[alarmKey].alarmStatus === 2) && _this.alarmCollection[alarmKey].alarmStatus === 0) {
          // let src = _this.curAudioSrc;
          // let src1 = _this.alarmLevelConfig;
          //TODO 一直报错，先注释掉
          // _this.$refs.audioAlarm.play();
          break
        }
      }
    },
    // 设置告警音频定时器
    setAlarmAudioInterval: function () {
      let _this = this
      // 设置定时器，每 1s 播放一次
      if (_this.intervalAlarmVoice != null) return
      _this.intervalAlarmVoice = setInterval(() => {
        _this.alarmVoice()
      }, 1000)
    },

    setWebSocketHeartBeat: function () {
      let _this = this
      // 设置定时器，每 30s 发送一次消息
      if (_this.intervalWebSocketHeartBeat != null) return
      _this.intervalWebSocketHeartBeat = setInterval(() => {
        _this.webSocket.send('websocket')
      }, 30000)
    },

    // 销毁告警音频定时器
    destroyAlarmAudioInterval: function () {
      clearInterval(_this.intervalAlarmVoice)
      _this.intervalAlarmVoice = null
    },

    // 销毁websocket心跳定时器
    destroyWebSocketHeartBeatInterval: function () {
      clearInterval(_this.intervalWebSocketHeartBeat)
      _this.intervalWebSocketHeartBeat = null
    },

    // 开启websocket服务
    openWebSocket: function () {
      _this.systemModeAdapter[_this.$store.state.systemMode].openWebSocket(_this)
    },

    // 关闭webSocket服务
    closeWebSocket: function () {
      _this.systemModeAdapter[_this.$store.state.systemMode].closeWebSocket(_this)
    },

    // 页面数据初始化
    initAllDate: function () {
      _this.systemModeAdapter[_this.$store.state.systemMode].initAllDate(_this)
    },

    // 开启流量监控
    openMonitor: function () {
      ElineService.getAllTunnelWidthCollection().then(result => {
        var linkManager = LinkManager(_this.linkCollection)
        _this.linkCollection = linkManager.getLinkListWithBandWidth(result)
        // 开启 流量监控的 websocket 请求
        if (_this.webSocket !== null) {
          ElineService(_this.webSocket).subscribeBandWidth(_this.linkCollection)
        }
      })
    },

    // 关闭流量监控
    closeMonitor: function () {
      if (_this.webSocket !== null) {
        ElineService(_this.webSocket).unsubscribeBandWidth(_this.linkCollection)
      }
    },
    /***
     * @Description  : 用户退出
     * @author       : zf
     * @date         : 2019/05/06 16:29
     */
    beforeunloadHandler (e) {
      let _this = this
      UserService.logout().then((result) => {
        HelperUtil.toLoginPage()
        _this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.OTHERS_CODE))
      }).catch((err) => {
        _this.InfoTip.errorTip(_this, err)
      })
    }
  },
  components: {
    'the-header': TheLayoutHeader,
    'the-header1': TheLayoutHeader1,
    'the-sidebar': TheLayoutSidebar,
    'the-main': TheLayoutMain
  },
  watch: {
    alarmLevelConfig: {
      handler (newVal, OldVal) {
        _this.alarmLevelConfig = newVal
        let alarmManager = AlarmManager(_this.alarmCollection)
        _this.curAudioSrc = alarmManager.getCurAudioSrc(_this.alarmLevelConfig)
      },
      deep: true
    },
    alarmCollection: {
      handler (newVal, OldVal) {
        _this.alarmCollection = newVal
        let alarmManager = AlarmManager(_this.alarmCollection)
        _this.curAudioSrc = alarmManager.getCurAudioSrc(_this.alarmLevelConfig)
      },
      deep: true
    },
    curClickDeviceId: {
      handler (newVal, OldVal) {
        _this.curClickDeviceId = newVal
      },
      deep: true
    },
    deviceCollection: {
      handler (newVal, OldVal) {
        _this.deviceCollection = newVal
      },
      deep: true
    },
    subnetCollection: {
      handler (newVal, OldVal) {
        _this.subnetCollection = newVal
      },
      deep: true
    },
    linkCollection: {
      handler (newVal, OldVal) {
        _this.linkCollection = newVal
      },
      deep: true
    },
    topologyCollection: {
      handler (newVal, OldVal) {
        let time = new Date()
        console.log('1数据刚来============' + time.getMinutes() + 'm' + time.getSeconds() + 's' + time.getMilliseconds() + 'ms')
        console.log('layout local data !!');
        _this.topologyCollection = newVal
      },
      deep: true
    },
    discoveryCollection: {
      handler (newVal, OldVal) {
        _this.discoveryCollection = newVal ? newVal : null
      },
      deep: true
    },

    discoverElementCollection: {
      handler (newVal, OldVal) {
        _this.discoverElementCollection = newVal
      },
      deep: true
    },

    configFileDifferenceCollection: {
      handler (newVal, OldVal) {
        _this.configFileDifferenceCollection = newVal
      },
      deep: true
    }
  },
  created () {
    _this = this
    // 页面数据初始化
    _this.initAllDate()
    // 设置 websocket 心跳
    _this.setWebSocketHeartBeat()
    // 设置告警音频定时器
    _this.setAlarmAudioInterval()
  },
  mounted () {
    let _this = this
    _this.drag()
    EventBus.$on('i-got-syncFlag', _this.handleTestSync)
    EventBus.$on('i-got-clickDeviceId', _this.handleTestClickDeviceId)
    EventBus.$on('i-got-clickSubnetId', _this.handleClickSubnet)
    EventBus.$on('i-got-isMonitor', _this.handleMonitor)// 通过全局事件总线将按钮的开关传送给顶层组件
    EventBus.$on('ws', _this.handle1)
    // （临时）添加一个假的模拟网元发现websocket返回数据的监听
    EventBus.$on('fake-discovery', _this.fakeDiscoveryWebsocket)
    // 关闭确认：跳转其它网址、关闭窗口
    window.onbeforeunload = function (e) {
      e = e || window.event
      // 兼容IE8和Firefox 4之前的版本
      if (e) {
        e.returnValue = HelperUtil.getCheckStatusCodeObjectByCode(_this.SYSTEM_EXIT_CODE)
      }
      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
      return e.returnValue
    }
    window.onresize = function () {
      var cliWidth = document.body.scrollWidth
      var cliHeight = document.body.scrollHeight
      var resize = document.getElementById('resize')
      var left = document.getElementById('left')
      var right = document.getElementById('right')
      var box = document.getElementById('box')
      // $('#box').css("width", cliWidth+"px");
      // $('#left').css("width", cliWidth * 0.14 +"px");
      // $('#right').css("width", cliWidth * 0.86 - 5 +"px");
    }
  },
  destroyed () {
    // 销毁告警音频定时器
    _this.destroyAlarmAudioInterval()
    // 销毁websocket心跳定时器
    _this.destroyWebSocketHeartBeatInterval()
    // 关闭websocket连接
    _this.closeWebSocket()
    window.onresize = null
  }
}
</script>

<style scoped lang="scss">
  #box{
    width:100%;
    height:100%;
    overflow:hidden;
  }
  #left{
    width:200px;
    height:100%;
    float: left;
    border: #e6e6e6 0px;
  }

  #resize{
    width:5px;
    float: left;
    height:100%;
    cursor: w-resize;
  }

  #right{
    height:100%;
  }
  .page {
      height: 100%;
      width: 100%;
  }
  .head{
    height:50px;
    position: absolute;
    top:0;
  }
  .head-nav {
    position: absolute;
    top: 50px;
  }
  .page-main {
    margin-top: 100px;
    height: calc(100% - 100px);
  }
  .sidebar {
    height: 100%;
    width: 100%;
    border-right: 0px solid gainsboro;
    user-select: none;
  }
  .page-content {
    height: 100%;
  }
</style>