smsb-web-develop/src/views/dashboard/v1/Record.vue

<template>
  <box title="大屏实时画面">
    <div
      v-if="options.list.length"
      class="l-flex__auto c-record-grid"
    >
      <div
        v-for="item in options.list"
        :key="item.id"
        :class="{fullscreen:item.id===fullscreenId}"
        class="c-record-wrapper"
      >
        <i
          v-if="item.id===fullscreenId"
          class="el-icon-circle-close c-record-close has-active"
          @click="fullscreenId=''"
        />
        <device-player
          :device="item"
          controls
          autoplay
          retry
          keep
        >
          <!-- <template #header>
          <div class="l-flex--row l-flex__fill">
            <div class="l-flex__fill u-ellipsis">
              温度: {{ item.temperature || '-' }}
            </div>
            <div class="l-flex__fill u-ellipsis u-text--right">
              亮度: {{ item.brightness || '-' }}
            </div>
          </div>
        </template> -->
          <template #controls="{ waitingOrLoading, online, isPlaying }">
            <i
              v-if="item.id!==fullscreenId&&item.onlineStatus===1"
              class="c-sibling-item el-icon-full-screen has-active c-record-full-screen"
              @click="onFullScreen(item.id)"
            />
            <img
              v-if="item.id!==fullscreenId"
              class="c-sibling-item"
              :src="getStatusIcon(waitingOrLoading, online, isPlaying)"
            >
          </template>
        </device-player>
      </div>
    </div>
    <div
      v-else
      class="l-flex__auto l-flex--col jcenter"
    >
      <status-wrapper />
    </div>
  </box>
</template>

<script>
import { getSensorRecords } from '@/api/external'
import { getDeviceAttentionList } from '@/api/device'
import { getSensorMap } from './api'
import {
  createListOptions, parseTime
} from '@/utils'
import { Record } from './config'
import Box from './Box'
import { ThirdPartyDevice } from '@/constant'

const offlineIcon = require('@/assets/v1/icon_offline.svg')
const onlineIcon = require('@/assets/v1/icon_online.svg')
const waitIcon = require('@/assets/v1/icon_wait.svg')

export default {
  name: 'Record',
  components: {
    Box
  },
  data () {
    return {
      fullscreenId: '',
      options: createListOptions({ activate: 1, pageSize: 4 })
    }
  },
  created () {
    this.getDevices()
    this.$timer = setInterval(this.getDevices, Record.timer)
  },
  beforeDestroy () {
    clearInterval(this.$timer)
  },
  methods: {
    onFullScreen (id) {
      if (this.fullscreenId === id) {
        this.fullscreenId = ''
      } else {
        this.fullscreenId = id
      }
    },
    transfromData (data) {
      const map = {}
      const arr = []
      data.forEach(sensor => {
        if (!map[sensor.port]) {
          map[sensor.port] = 1
          arr.push(this.transformSensorData(sensor))
        }
      })
      return arr
    },
    transformSensorData (data) {
      const { port, type, value, time } = data
      return {
        port, value, type,
        time: parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}'),
        info: this.transformValue(type, value, data)
      }
    },
    transformValue (type, value, data) {
      switch (type) {
        case ThirdPartyDevice.SMOKE_SENSOR:
          return `${value}ppm`
        case ThirdPartyDevice.TEMPERATURE_SENSOR:
          return `${value}℃`
        case ThirdPartyDevice.LIGHT_SENSOR:
          return `${value}Lux`
        case ThirdPartyDevice.FLOODING_SENSOR:
          return value ? '是' : '否'
        case ThirdPartyDevice.TRANSLOCATION_SENSOR:
          console.log(data)
          return `x ${data.xvalue?.toFixed(3)}  y ${data.yvalue?.toFixed(
            3
          )}  z ${data.zvalue?.toFixed(3)}`
        default:
          return value
      }
    },
    getStatusIcon (waitingOrLoading, online, isPlaying) {
      if (!online) {
        return offlineIcon
      }
      if (waitingOrLoading) {
        return waitIcon
      }
      if (isPlaying) {
        return onlineIcon
      }
      return offlineIcon
    },
    updateDevices (data) {
      data.forEach(device => {
        if (this.$deviceMap[device.id]) {
          this.$deviceMap[device.id].onlineStatus = device.onlineStatus
        }
      })
    },
    getDevices () {
      getDeviceAttentionList(this.options.params, { custom: true }).then(({ data }) => {
        data.sort((a, b) => (a.onlineStatus === 1 && b.onlineStatus !== 1) ? -1 : 1)
        if (this.options.list.length) {
          this.updateDevices(data)
        }
        if (data.length <= 4) {
          this.options.list = data
        } else {
          const devices = []
          const devicesOffline = []
          const length = data.length
          for (let i = 0; i < length; i++) {
            if (data[i].onlineStatus === 1) {
              devices.push(data[i])
            } else {
              devicesOffline.push(data[i])
            }
            if (devices.length === 4) {
              break
            }
          }
          if (devices.length < 4) {
            devices.push(...devicesOffline.slice(0, 4 - devices.length))
          }
          this.options.list = devices
        }
        const map = {}
        this.options.list.forEach(device => {
          map[device.id] = device
        })
        this.$deviceMap = map
        // this.getSensorMap(this.options.list)
      })
    },
    // 单独接口 目前使用
    getSensorMap (deviceList) {
      if (!deviceList.length) {
        return
      }
      const now = Date.now()
      for (const device of deviceList) {
        this.getData(device, ThirdPartyDevice.TEMPERATURE_SENSOR, 'temperature', now)
        this.getData(device, ThirdPartyDevice.LIGHT_SENSOR, 'brightness', now)
      }
    },
    getData (device, type, key, now) {
      getSensorRecords({
        deviceId: device.id,
        sensorType: type,
        startTime: now - 10000,
        endTime: now
      }).then(({ data }) => {
        if (data.length) {
          this.$set(device, key, this.transformSensorData(data[0])?.info)
        }
      })
    },
    // 批量接口 目前不用
    getSensorMapM (deviceList) {
      if (!deviceList.length) { return }
      const now = Date.now()
      function getParams (item, sensorType) {
        return {
          deviceId: item.id,
          sensorType,
          startTime: now - 10000,
          endTime: now
        }
      }

      getSensorMap(
        deviceList
          .map(i => getParams(i, ThirdPartyDevice.TEMPERATURE_SENSOR))
          .concat(
            deviceList.map(i => getParams(i, ThirdPartyDevice.LIGHT_SENSOR))
          )
      ).then(({ data }) => {
        for (const deviceid in data) {
          if (Object.hasOwnProperty.call(data, deviceid)) {
            const map = this.transfromData(data[deviceid])
            for (const device of deviceList) {
              if (device.id === deviceid) {
                this.$set(device, 'temperature', map.filter(i => i.type === ThirdPartyDevice.TEMPERATURE_SENSOR)[0]?.info)
                this.$set(device, 'brightness', map.filter(i => i.type === ThirdPartyDevice.LIGHT_SENSOR)[0]?.info)
                break
              }
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-record-grid {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
.c-record-close{
  font-size: 64px;
  position: absolute;
  top: -60px;
  right: -60px;
}
.c-record-wrapper{
  .c-record-full-screen{
    display: none;
  }
  &:hover{
    .c-record-full-screen{
    display: block;
    }
  }
}
.fullscreen {
  position: fixed;
  width: 3072px;
  height: 1728px;
  top: 50%;
  left: 50%;
  border-bottom: none;
  transform: translate(-50%, -50%);
  overflow: visible;
  z-index: 999;

  &::before {
    content: "";
    position: absolute;
    top: -216px;
    left: -384px;
    width: 3840px;
    height: 2160px;
    background-color: rgba(#000, 0.6);
    z-index: -1;
  }
  ::v-deep.c-footer{
    font-size: 56px;
  }
}
</style>