smsb-web-develop/src/views/debug/index.vue

<template>
  <div class="l-flex--col c-debug has-padding">
    <div class="l-flex__none l-flex--row has-bottom-padding">
      <div class="l-flex__auto l-flex--row c-sibling-item">
        <span>开启：</span>
        <el-switch
          v-model="opend"
          class="l-flex__none c-sibling-item"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="onChange"
        />
        <button
          v-if="opend"
          class="l-flex__none c-sibling-item o-button"
          @click="publish"
        >
          <i class="o-button__icon el-icon-share" />
          发送消息
        </button>
      </div>
      <el-select
        v-model="device"
        class="l-flex__none c-sibling-item"
        placeholder="请选择设备"
      >
        <el-option
          v-for="item in devices"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <button
        class="l-flex__none c-sibling-item o-button"
        @click="clear"
      >
        <i class="o-button__icon el-icon-delete" />
        清空
      </button>
    </div>
    <div class="l-flex__auto">
      <div
        v-for="message in messages"
        :key="message.id"
      >
        <div v-if="message.topic">
          {{ message.time }} {{ message.topic }}
        </div>
        <div>{{ message.desc }}</div>
      </div>
    </div>
    <el-dialog
      title="发送消息"
      :visible.sync="mqtt.show"
      custom-class="c-dialog"
    >
      <div class="c-form">
        <div class="c-form__section">
          <span class="c-form__label required">topic：</span>
          <el-input
            v-model.trim="mqtt.topic"
            class="c-form__item"
          />
        </div>
        <div class="c-form__section">
          <span class="c-form__label">message：</span>
          <el-input
            v-model.trim="mqtt.message"
            class="c-form__item"
            type="textarea"
          />
        </div>
        <div class="c-form__section">
          <span class="c-form__label">加密：</span>
          <el-switch
            v-model="mqtt.encode"
            class="c-form__item"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </div>
      </div>
      <template #footer>
        <button
          class="o-button"
          @click="send"
        >
          发送
        </button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  devices,
  deviceMessage,
  start,
  stop,
  clear,
  send
} from './debug'

export default {
  name: 'Debug',
  data () {
    return {
      opend: true,
      device: 'all',
      devices,
      deviceMessage,
      mqtt: {
        show: false,
        topic: '',
        message: '',
        encode: true
      }
    }
  },
  computed: {
    messages () {
      if (this.device === 'all') {
        return this.deviceMessage.map(item => {
          return {
            id: item.id,
            desc: `${item.name}共${item.list.length}条消息`
          }
        })
      }
      return this.deviceMessage.find(item => item.id === this.device).list
    }
  },
  created () {
    start()
  },
  beforeDestroy () {
    stop()
  },
  methods: {
    onChange () {
      if (this.opend) {
        start()
      } else {
        stop()
      }
    },
    clear () {
      clear()
    },
    publish () {
      this.mqtt = {
        show: true,
        topic: '',
        message: '',
        encode: true
      }
    },
    send () {
      if (!this.mqtt.topic) {
        this.$message({
          type: 'warning',
          message: '请填写topic'
        })
        return
      }
      send(this.mqtt.topic, this.mqtt.message, this.mqtt.encode).then(() => {
        this.$message({
          type: 'success',
          message: '发送成功'
        })
      }, () => {
        this.$message({
          type: 'error',
          message: '发送失败'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-debug {
  color: $black;
  font-size: 14px;
  line-height: 24px;
  overflow-y: auto;
}
</style>