smsb-web-develop/src/views/device/detail/components/Gateway/DeviceInfo.vue

<template>
  <div class="wrapper">
    <div class="info">
      <div
        v-for="item in items"
        :key="item.id"
        class="item"
      >
        <div class="label">{{ item.label }}</div>
        <div class="value">{{ device[item.key] }}</div>
      </div>
    </div>
    <div class="buttons">
      <el-button
        class="o-button"
        icon="el-icon-switch-button"
        @click="onSwitch(true)"
      >开机</el-button>
      <el-button
        class="o-button"
        icon="el-icon-switch-button"
        @click="onSwitch(false)"
      >关机</el-button>
      <el-button
        :loading="rebooting"
        class="o-button"
        icon="el-icon-refresh-right"
        @click="invoke"
      >重启</el-button>
    </div>
  </div>
</template>

<script>
import { publish } from '@/utils/mqtt'
import { send } from '../../monitor'
export default {
  props: {
    device: {
      type: Object,
      required: true
    },
    online: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      rebooting: false,
      openFunctionKey: 'bootDevice',
      closeFunctionKey: 'shutdownDevice',
      items: [
        {
          label: '名称',
          key: 'name'
        },
        {
          label: 'MAC',
          key: 'mac'
        },
        {
          label: '序列号',
          key: 'serialNumber'
        },
        {
          label: '分辨率',
          key: 'resolutionRatio'
        }
      ]
    }
  },
  watch: {
    online () {
      this.rebooting = false
    }
  },
  methods: {
    onSwitch (open) {
      if (!this.online) {
        this.$message({
          type: 'warning',
          message: '设备未上线，请稍后再试'
        })
        return
      }
      this.$confirm(`立即${open ? '开机' : '关机'}？`, {
        type: 'warning'
      }).then(() => {
        this.sendTopic(open ? this.openFunctionKey : this.closeFunctionKey)
      })
    },
    invoke () {
      if (this.rebooting) {
        return
      }
      if (!this.online) {
        this.$message({
          type: 'warning',
          message: '设备未上线，请稍后再试'
        })
        return
      }
      this.$confirm(`重启 ${this.device.name} ？`, { type: 'warning' }).then(
        () => {
          send('/restart/ask').then(
            () => {
              this.rebooting = true
            },
            () => {
              this.$message({
                type: 'warning',
                message: '正在连接，请稍后再试'
              })
            }
          )
        }
      )
    },
    sendTopic (invoke, inputs = []) {
      console.log(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>
.wrapper {
  width: 100%;

  display: flex;
  align-items: center;
  .info {
    display: flex;
    align-items: center;
     background-color: #232b45;
     line-height: 40px;
     margin-right: 16px;
    flex: 1;
    .item {
      display: flex;
      flex: 1;
      align-items: center;
      .label {
        text-align: center;
        flex: 1;
        color: #9ea9cd;
      }
      .value {
        text-align: center;
        flex: 1;
        color: #fff;
      }
    }
  }
  .buttons {
    ::v-deep.el-button+.el-button{
      margin-left: 16px;
    }
  }
}
</style>