smsb-web-develop/src/views/visualization/v0/DeviceInfo.vue

<template>
  <box
    title="信息"
    can-full-screen
    fullscreen
    v-on="$listeners"
  >
    <div
      v-for="(row, index) in rows"
      :key="index"
      class="l-flex--row c-sibling-item--v far c-info__row"
    >
      <div
        v-for="item in row"
        :key="item.key"
        class="l-flex--row l-flex__fill"
      >
        <div class="l-flex__fill l-flex--row center row__label">
          {{ item.label }}
        </div>
        <div class="l-flex__fill">{{ device[item.key] }}</div>
      </div>
    </div>

    <div class="l-flex--row l-flex__fill center">
      <button
        class="l-flex__none  o-button"
        @click="onReboot"
      >
        <i
          class="o-button__icon"
          :class="{
            'el-icon-loading': rebooting,
            'el-icon-refresh-right': !rebooting,
          }"
        />
        重启
      </button>
    </div>
  </box>
</template>

<script>
import {
  publish,
  subscribe,
  unsubscribe
} from '@/utils/mqtt'
import Box from './Box'

export default {
  name: 'DeviceInfo',
  components: {
    Box
  },
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      online: this.device.onlineStatus === 1,
      rebooting: false,
      rows: [
        [
          {
            label: '名称',
            key: 'name'
          },
          {
            label: 'MAC',
            key: 'mac'
          }
        ],
        [
          {
            label: '序列号',
            key: 'serialNumber'
          },
          {
            label: '分辨率',
            key: 'resolutionRatio'
          }
        ],
        [
          {
            label: '配置',
            key: 'productName'
          },
          {
            label: '位置',
            key: 'address'
          }
        ]
      ]
    }
  },
  created () {
    subscribe([
      `${this.device.productId}/${this.device.id}/online`,
      `${this.device.productId}/${this.device.id}/offline`
    ], this.onMessage)
  },
  beforeDestroy () {
    unsubscribe([
      `${this.device.productId}/${this.device.id}/online`,
      `${this.device.productId}/${this.device.id}/offline`
    ], this.onMessage)
  },
  methods: {
    onMessage (topic) {
      const result = topic.match(/^(\d+)\/(\d+)\/(online|offline)$/)
      if (result && this.device.productId === result[1] && this.device.id === result[2]) {
        this.rebooting = false
        this.online = result[3] === 'online'
      }
    },
    onReboot () {
      if (!this.online) {
        this.$message({
          type: 'warning',
          message: '设备未上线'
        })
        return
      }
      if (this.rebooting) {
        return
      }
      this.$confirm(
        `立即重启？`,
        { type: 'warning' }
      ).then(() => {
        publish(
          `${this.device.productId}/${this.deviceId}/restart/ask`,
          JSON.stringify({ timestamp: `${Date.now()}` })
        ).then(
          () => {
            this.rebooting = true
            this.$message({
              type: 'success',
              message: '执行成功'
            })
          },
          () => {
            this.$message({
              type: 'warning',
              message: '正在连接，请稍后重试'
            })
          }
        )
      })
    },
    sendTopic (invoke, inputs = []) {
      publish(
        `${this.device.productId}/${this.deviceId}/function/invoke`,
        JSON.stringify({
          timestamp: `${Date.now()}`,
          function: invoke,
          inputs
        }),
        true
      ).then(
        () => {
          this.$message({
            type: 'success',
            message: '执行成功'
          })
        },
        () => {
          this.$message({
            type: 'warning',
            message: '正在连接，请稍后重试'
          })
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.c-info {
  &__row {
    height: 80px;
    background: #313a5a;

    .row__label {
      color: #9ea9cd;
    }
  }
}

.o-button {
  width: 200px;
  height: 80px;
  font-size: 36px;

  & ~ & {
    margin-left: 150px;
  }

  &__icon {
    font-size: 36px;
  }
}
</style>