smsb-web-develop/src/views/dashboard/v0/index.vue

<template>
  <div class="c-record-dashboard">
    <div
      class="c-record-dashboard__main"
      :style="style"
    >
      <DeviceInfo
        v-if="showDeviceInfo"
        :device="currentDeviceInfo"
        @fullscreenChange="onDeviceInfoClose"
      />
      <AlarmInfo
        v-if="showAlarmInfo"
        :alarm="currentAlarmInfo"
        @fullscreenChange="onAlarmInfoClose"
      />
      <DeviceSort
        v-if="showDeviceSort"
        :list="deviceList"
        @fullscreenChange="onDeviceSortClose"
        @save="onDeviceSortSave"
      />
      <LinkState
        v-if="showLinkState"
        :device="currentLinkState"
        @fullscreenChange="onLinkStateClose"
      />
      <Header />
      <div class="l-flex--col center">
        <div class="l-flex--row">
          <div class="l-flex--col l-flex__none">
            <div
              class="l-flex__none dashboard-item"
              style="width: 404px; height: 281px"
            >
              <DeviceStatus :items="statusData" />
            </div>
            <div
              class="l-flex__none dashboard-item"
              style="width: 404px; height: 281px"
            >
              <Map :device-list="deviceList" />
            </div>
          </div>
          <div class="l-flex--col l-flex__none">
            <div
              class="l-flex__none dashboard-item"
              style="width: 904px; height: 586px"
            >
              <Record
                ref="record"
                @openDeviceInfo="openDeviceInfo"
                @openDeviceSort="openDeviceSort"
                @openLinkState="openLinkState"
              />
            </div>
          </div>
          <div class="l-flex--col l-flex__none">
            <div
              class="l-flex__none dashboard-item"
              style="width: 404px; height: 281px"
            >
              <MessageNotice @openAlarmInfo="openAlarmInfo" />
            </div>
            <div
              class="l-flex__none dashboard-item"
              style="width: 404px; height: 281px"
            >
              <AlarmLevel :items="exceptionLevelStatisticArray" />
            </div>
          </div>
        </div>
        <div class="l-flex--row">
          <div class="l-flex--col l-flex__none">
            <div
              class="l-flex__none dashboard-item"
              style="width: 404px; height: 284px"
            >
              <AlarmType />
            </div>
          </div>
          <div class="l-flex--col l-flex__none">
            <div
              class="l-flex__none dashboard-item"
              style="width: 904px; height: 284px"
            >
              <DeviceCalender :device-list="deviceList" />
            </div>
          </div>
          <div class="l-flex--col l-flex__none">
            <div
              class="l-flex__none dashboard-item"
              style="width: 404px; height: 284px"
            >
              <AlarmRate />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getDevices,
  getDeviceStatistics
} from '@/api/device'
import DeviceStatus from './DeviceStatus'
import DeviceCalender from './DeviceCalender'
import Map from './Map'
import AlarmType from './AlarmType'
import AlarmRate from './AlarmRate'
import AlarmLevel from './AlarmLevel'
import DeviceInfo from './DeviceInfo'
import AlarmInfo from './AlarmInfo'
import MessageNotice from './MessageNotice'
import Record from './Record'
import DeviceSort from './DeviceSort'
import Header from './Header'
import LinkState from './LinkState'

export default {
  components: {
    DeviceSort,
    DeviceInfo,
    AlarmInfo,
    DeviceStatus,
    Map,
    AlarmType,
    AlarmRate,
    MessageNotice,
    Record,
    DeviceCalender,
    AlarmLevel,
    Header,
    LinkState
  },
  data () {
    return {
      loading: false,
      style: null,
      statusData: [
        { label: '设备总数', value: '-' },
        { label: '设备在线数', value: '-' },
        { label: '设备离线数', value: '-' },
        { label: '设备未启用数', value: '-' }
      ],
      exceptionLevelStatisticArray: [
        { label: '预警等级总数', value: '-' },
        { label: '紧急等级', value: '-' },
        { label: '提示等级', value: '-' },
        { label: '普通等级', value: '-' }
      ],
      deviceList: [],
      showDeviceInfo: false,
      currentDeviceInfo: null,
      showAlarmInfo: false,
      currentAlarmInfo: null,
      showDeviceSort: false,
      currentDeviceSort: null,
      showLinkState: false,
      currentLinkState: null
    }
  },
  created () {
    this.getDeviceStatistics()
    this.$timer = setInterval(this.getDeviceStatistics, 60000)
  },
  mounted () {
    this.checkScale()
    window.addEventListener('resize', this.checkScale)
  },
  beforeDestroy () {
    clearInterval(this.$timer)
    window.removeEventListener('resize', this.checkScale)
  },
  methods: {
    checkScale () {
      this.style = {
        transform: `scale(${window.innerWidth / 1920}, ${window.innerHeight / 1080})`
      }
    },
    openLinkState (item) {
      this.currentLinkState = item
      this.showLinkState = true
    },
    onLinkStateClose () {
      this.currentLinkState = null
      this.showLinkState = false
    },
    openDeviceInfo (item) {
      this.showDeviceInfo = true
      this.currentDeviceInfo = item
    },
    onDeviceInfoClose () {
      this.currentDeviceInfo = null
      this.showDeviceInfo = false
    },
    openDeviceSort () {
      this.showDeviceSort = true
    },
    onDeviceSortClose () {
      this.showDeviceSort = false
    },
    onDeviceSortSave (deviceList) {
      this.deviceList = deviceList
      this.showDeviceSort = false
      this.$refs.record.refresh()
    },
    openAlarmInfo (alarm) {
      this.currentAlarmInfo = alarm
      this.showAlarmInfo = true
    },
    onAlarmInfoClose () {
      this.currentAlarmInfo = null
      this.showAlarmInfo = false
    },
    getDeviceStatistics () {
      getDeviceStatistics().then(({ data }) => {
        const { deactivatedTotal, notConnectedTotal, offLineTotal, onLineTotal, total } = data
        this.statusData = [
          { label: '设备总数', value: total },
          { label: '设备在线数', value: onLineTotal },
          { label: '设备离线数', value: offLineTotal + notConnectedTotal },
          { label: '设备未启用数', value: deactivatedTotal }
        ]
        this.getDevices(total - deactivatedTotal)
      })
    },
    getDevices (total) {
      getDevices({
        pageNum: 1,
        pageSize: total,
        activate: 1
      }, { custom: true }).then(({ data }) => {
        this.deviceList = data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.c-record-dashboard {
  height: 100%;
  overflow: hidden;

  &__main {
    width: 1920px;
    height: 1080px;
    background: url("~@/assets/v0/bg.png");
    transform-origin: left top;
  }
}
.dashboard-item {
  & ~ & {
    margin-top: 24px;
  }
}
.l-flex--row {
  & ~ & {
    margin-top: 24px;
  }
}
.l-flex--col {
  & ~ & {
    margin-left: 24px;
  }
}
</style>