smsb-web-develop/src/views/visualization/v1/index.vue

<template>
  <div class="c-monitor-dashboard">
    <audio
      v-show="false"
      ref="alarmNormal"
      muted
      src="@/assets/v1/alarmNormal.mp3"
    />
    <audio
      v-show="false"
      ref="alarmUrgent"
      muted
      src="@/assets/v1/alarmUrgent.mp3"
    />
    <div
      class="c-monitor-dashboard__main"
      :style="style"
    >
      <department-drawer
        ref="departmentDrawer"
        @change="onGroupChanged"
      />
      <Header ref="Header">
        <template #content>
          <div
            class="c-monitor-dashboard__mode has-active"
            @click="onClickBusiness"
          >
            切换为运营大数据
          </div>
        </template>
      </Header>
      <NewNotice
        class="new-notice"
        :class="{ active: showNotice }"
        :notice="curNotice"
        :count="noticeCount"
      />
      <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-block"
              style="width: 1040px; height: 450px"
            >
              <MessageNotice
                ref="MessageNotice"
                @new-alarm="onNewAlarm"
              />
            </div>
            <div class="l-flex__none dashboard-block l-flex--row">
              <div
                class="l-flex__none l-flex--col block-item"
                style="width: 510px; height: 450px"
              >
                <AssetStatistic />
              </div>
              <div
                class="l-flex__none l-flex--col block-item"
                style="width: 510px; height: 450px"
              >
                <ProgramStatistic />
              </div>
            </div>
            <div class="l-flex__none dashboard-block l-flex--row">
              <div
                class="l-flex__none l-flex--col block-item"
                style="width: 510px; height: 450px"
              >
                <ProgramRate />
              </div>
              <div
                class="l-flex__none l-flex--col block-item"
                style="width: 510px; height: 450px"
              >
                <ProgramTop />
              </div>
            </div>
          </div>
          <div class="l-flex--col l-flex__none">
            <div
              class="l-flex__none dashboard-block"
              style="width: 1480px; height: 1390px"
            >
              <Map
                ref="map"
                :status-data="statusData"
                :device-list="deviceList"
                @closeAlarm="onCloseAlarm"
              >
                <template #default>
                  <div
                    class="c-department-button has-active"
                    @click="onShowDepatment"
                  >
                    概况
                  </div>
                </template>
              </Map>
            </div>
          </div>
          <div class="l-flex--col l-flex__none">
            <div
              class="l-flex__none dashboard-block"
              style="width: 1040px; height: 685px"
            >
              <Record ref="record" />
            </div>
            <div
              class="l-flex__none dashboard-block"
              style="width: 1040px; height: 685px"
            >
              <CameraScreen />
            </div>
          </div>
        </div>
        <div class="l-flex--row">
          <div class="l-flex--col l-flex__none">
            <div
              v-if="false"
              class="l-flex__none dashboard-block"
              style="width: 1040px; height: 450px"
            >
              <DeviceCalender :device-list="deviceList" />
            </div>
            <div
              v-else
              class="l-flex__none dashboard-block l-flex--row"
            >
              <div
                class="l-flex__none l-flex--col block-item"
                style="width: 510px; height: 450px"
              >
                <ProgramTop type="getTopOnlineSeconds" />
              </div>
              <div
                class="l-flex__none l-flex--col block-item"
                style="width: 510px; height: 450px"
              >
                <ProgramTop
                  :type="topMap[topIndex]"
                  @click.native="topIndex=(topIndex+1)%topMap.length"
                />
              </div>
            </div>
          </div>
          <div
            class="l-flex__none l-flex--col"
            style="width: 730px; height: 450px"
          >
            <AlarmLevel />
          </div>
          <div
            class="l-flex__none l-flex--col"
            style="width: 730px; height: 450px"
          >
            <AlarmRate />
          </div>
          <div class="l-flex--col l-flex__none">
            <div
              class="l-flex__none dashboard-block"
              style="width: 1040px; height: 450px"
            >
              <AlarmType />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Index } from './config'
import {
  getDevicesByQuery,
  getDeviceStatisticsByPath
} from '@/api/device'
import DeviceCalender from './DeviceCalender'
import Map from './Map'
import AlarmType from './AlarmType'
import AlarmRate from './AlarmRate'
import AlarmLevel from './AlarmLevel'
import MessageNotice from './MessageNotice'
import Record from './Record'
// import SystemLoad from './SystemLoad'
import Header from './Header'
import ProgramRate from './ProgramRate'
import ProgramTop from './ProgramTop'
import AssetStatistic from './AssetStatistic'
import ProgramStatistic from './ProgramStatistic'
import CameraScreen from './CameraScreen'
import NewNotice from './NewNotice'

export default {
  components: {
    AssetStatistic,
    ProgramStatistic,
    Map,
    AlarmType,
    AlarmRate,
    MessageNotice,
    Record,
    DeviceCalender,
    AlarmLevel,
    Header,
    ProgramRate,
    ProgramTop,
    // SystemLoad,
    CameraScreen,
    NewNotice
  },
  data () {
    this.topMap = ['getPagePriceRank', 'getPageDurationRank', 'getPageCountRank']
    return {
      topIndex: 0,
      style: null,
      statusData: [
        { label: '设备总数', value: '-' },
        { label: '设备在线数', value: '-' },
        { label: '设备离线数', value: '-' },
        { label: '设备未启用数', value: '-' }
      ],
      deviceList: [],
      showNotice: false,
      curNotice: {},
      noticeCount: Index.noticeTimer,
      group: { path: this.$store.getters.org }
    }
  },
  computed: {
    mapDeviceList () {
      return this.deviceList.filter(i => i.longitude && i.latitude)
    }
  },
  created () {
    this.getDeviceStatistics()
    this.$timer = setInterval(this.getDeviceStatistics, Index.deviceTimer)
  },
  mounted () {
    this.checkScale()
    window.addEventListener('resize', this.checkScale)
    document.querySelector('body').setAttribute('version', '')
  },
  beforeDestroy () {
    clearInterval(this.$timer)
    clearInterval(this.$newAlarmTimer)
    window.removeEventListener('resize', this.checkScale)
    document.querySelector('body').setAttribute('version', __VERSION__)
  },
  methods: {
    onGroupChanged ({ path, name }) {
      if (!this.group || this.group.path !== path) {
        this.group = { path, name }
        this.getDeviceStatistics()
      }
    },
    onShowDepatment () {
      this.$refs.departmentDrawer.show()
    },
    checkScale () {
      this.style = {
        transform: `scale(${window.innerWidth / 3840}, ${
          window.innerHeight / 2160
        })`
      }
    },
    playAlarm (type) {
      const audio = this.$refs[type]
      if (!audio) { return }
      if (!audio.paused) {
        audio.currentTime = 0
      }
      audio.play()
    },
    onCloseAlarm (alarm) {
      this.$refs.MessageNotice.closeNewAlarm(alarm)
    },
    onNewAlarm (alarm) {
      const onlineMap = [32, 9]
      const offlineMap = [1, 15, 16, 17]
      if (onlineMap.includes(alarm.deviceErrorId)) {
        this.getDeviceStatistics()
        this.$refs.map?.closeOfflineAlarm(alarm, offlineMap)
      }
      if (offlineMap.includes(alarm.deviceErrorId)) {
        this.getDeviceStatistics()
      }

      if (alarm.level > 1) {
        this.$refs.map?.setNewAlarm(alarm)
        this.playAlarm('alarmUrgent')
      } else {
        this.playAlarm('alarmNormal')
        this.showNotice = true
        this.curNotice = alarm
        clearInterval(this.$newAlarmTimer)
        this.noticeCount = Index.noticeTimer / 1000
        this.$newAlarmTimer = setInterval(() => {
          this.noticeCount--
          if (this.noticeCount <= 0) {
            this.showNotice = false
            this.noticeCount = 0
            clearInterval(this.$newAlarmTimer)
          }
        }, 1000)
      }
    },
    getDeviceStatistics () {
      getDeviceStatisticsByPath(this.group.path).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) {
      getDevicesByQuery(
        {
          pageNum: 1,
          pageSize: total,
          activate: 1,
          org: this.group.path
        },
        { custom: true }
      ).then(({ data }) => {
        this.deviceList = data
      })
    },
    onClickBusiness () {
      this.$router.push({
        name: 'v-business',
        params: { isFullScreen: this.$refs.Header.getFullScreen() ? '1' : '' }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-monitor-dashboard {
  height: 100%;
  overflow: hidden;

  &__main {
    width: 3840px;
    height: 2160px;
    background: url("~@/assets/v1/monitor_bg.png");
    transform-origin: left top;
  }

  &__mode {
    position: absolute;
    left: 135px;
    bottom: 10px;
    font-size: 32px;
    z-index: 999;
  }
}

.dashboard-block {
  & ~ & {
    margin-top: 20px;
  }
}

.l-flex--row {
  & ~ & {
    margin-top: 20px;
  }
}

.l-flex--col {
  & ~ & {
    margin-left: 20px;
  }
}

.new-notice {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 640px;
  min-height: 360px;
  transition: all 1s;
  z-index: 999;
  transform: translateY(100%);

  &.active {
    transform: translateY(0);
  }
}

.c-department-button {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 32px;
  line-height: 64px;
  z-index: 1;
}
</style>