tianmucloudmobile/pages/device/detail.vue

<template>
  <view class="content">
    <view class="header">
      <view style="position: absolute;right:10rpx;top:30rpx;z-index: 9999">
        <u-button @click="reportError" text="上报异常" type="error" size="mini"></u-button>
      </view>
  <u--form>
    <u-form-item   style="border:0px"
                   label="设备名称:"
                   labelWidth="auto"
                   :borderBottom="false"
    >
      <u--input disabled
                placeholder="请选择分组"
                border="none"
                color="gray"
                disabledColor="white"
                v-model="deviceInfo.deviceName"
      ></u--input>
    </u-form-item>
    <u-form-item   style="border:0px"
                   label="所属机构:"
                   labelWidth="auto"
                   :borderBottom="false"
    >
      <u--input v-if="sysDept != null" disabled
                placeholder="请选择分组22"
                border="none"
                color="gray"
                disabledColor="white"
                :value="sysDept.deptName"
      ></u--input>

      <u--input v-else-if="deviceInfo.deptId == -1" disabled
                placeholder="请选择分组11"
                border="none"
                color="gray"
                disabledColor="white"
                value="已注销"
      ></u--input>
      <u--input v-else disabled
                placeholder="未绑定"
                border="none"
                color="gray"
                disabledColor="white"
                value="未绑定"
      ></u--input>
    </u-form-item>

    <u-form-item   style="border:0px"
                   label="设备编号:"
                   labelWidth="auto"
                   :borderBottom="false"
                   ref="item1"
    >
      <u--input disabled
                border="none"
                color="gray"
                disabledColor="white"
                v-model="deviceInfo.serialNumber"
      ></u--input>
    </u-form-item>

    <u-form-item   style="border:0px"
                   label="二维码ID:"
                   labelWidth="auto"
                   :borderBottom="false"
                   ref="item1"
    >
      <u--input disabled
                border="none"
                color="gray"
                disabledColor="white"
                v-model="deviceInfo.qrcodeId"
      ></u--input>
    </u-form-item>

    <u-form-item   style="border:0px"
                   label="激活时间:"
                   labelWidth="auto"
                   :borderBottom="false"
                   ref="item1"
    >
      <u--input disabled
                border="none"
                color="gray"
                disabledColor="white"
                :value="deviceInfo.activeTime"
      ></u--input>
    </u-form-item>


    <u-form-item   style="border:0px"
                  label="运行时长:"
                  labelWidth="auto"
                  :borderBottom="false"
                  ref="item1"
    >
      <view style="width: 20%">
        <u-button @click="seeTime()" type="primary" size="mini" text="查看时长"></u-button>
      </view>
    </u-form-item>


    <u-form-item   style="border:0px"
                   label="位置信息:"
                   labelWidth="auto"
                   :borderBottom="false"
                   ref="item1"
    >
      <view style="width: 20%">
        <u-button @click="openLocation(deviceInfo)" type="primary" size="mini" text="查看位置"></u-button>


      </view>
    </u-form-item>

    <u-form-item   style="border:0px"
                   label="设备信号:"
                   labelWidth="auto"
                   :borderBottom="false"
    >
      <u--input disabled
                border="none"
                color="gray"
                disabledColor="white"
                :value="deviceInfo.rssi"
      ></u--input>
    </u-form-item>

    <u-form-item v-if="deviceInfo.networkAddress != null"   style="border:0px"
                   label="设备网络:"
                   labelWidth="auto"
                   :borderBottom="false"
                   ref="item1"
    >
      <u--input disabled
                border="none"
                color="gray"
                disabledColor="white"
                :value="deviceInfo.networkAddress+'('+deviceInfo.networkIp+')'"
      ></u--input>
    </u-form-item>

    <u-form-item   style="border:0px"
                   label="设备状态:"
                   labelWidth="auto"
                   :borderBottom="false"
    >
       <view style="width:90rpx">
         <u-tag v-if="deviceInfo.status === 4" text="离线"  size="mini" type="info"></u-tag>
         <u-tag v-if="deviceInfo.status === 3" text="在线"  size="mini" type="success"></u-tag>
         <u-tag v-if="deviceInfo.status === 2" text="禁用"  size="mini" type="error"></u-tag>
         <u-tag v-if="deviceInfo.status === 1" text="未激活"  size="mini" type="error"></u-tag>

       </view>

    </u-form-item>


  </u--form>
    </view>
    <view class="text-area">
      <u-tabs :list="summary" keyName="tabName" @change="getDeviceStatus"></u-tabs>

      <view class="prop-container" style="background: white;padding:10px ">
        <u-form>
          <u-form-item   style="border:0px;position: relative"
                         label=" "
                         labelWidth="auto"
                         :borderBottom="false"
          >
            <uni-row class="demo-uni-row">
              <uni-col :span="12">
                开机： <u-switch v-model="power.value" :loading ="power.loading" @change="changeProp('PowerControl')"></u-switch>
              </uni-col>
              <uni-col :span="12">
                锁定： <u-switch v-model="lock.value" :loading ="lock.loading" @change="changeProp('LockControl')"></u-switch>
              </uni-col>
            </uni-row>

          </u-form-item>

         <view v-for="item in inputProp"  v-if="checkCommonProp(item)">
           <uni-row class="demo-uni-row" v-if="item.type === 'integer'">
             <uni-col :span="10">
               <view class="item">{{item.name}}</view>
             </uni-col>
             <uni-col :span="10">
               <view style="padding:0 10rpx">
                 <u-input placeholder="请输入整数"   v-model="item.shadow">
                 </u-input>
               </view>
             </uni-col>
             <uni-col :span="4">
               <view class="item" style="padding-top:14rpx">
                 <u-button v-if="deviceInfo.status==3"
                           @tap="send(item)"
                           text="发送"
                           type="success"
                           size="mini"
                 ></u-button>
                 <u-button v-if="deviceInfo.status!=3"
                           @tap="send(item)"
                           text="发送"
                           type="info"
                           size="mini"
                 ></u-button>
               </view>
             </uni-col>
           </uni-row>


           <uni-row class="demo-uni-row" v-if="item.type === 'string'">
             <uni-col :span="10">
               <view class="item">{{item.name}}</view>
             </uni-col>
             <uni-col :span="10">
               <view style="padding:0 10rpx">
                 <u-input  placeholder="请输入字符串"  v-model="item.shadow">
                 </u-input>
               </view>
             </uni-col>
             <uni-col :span="4">
               <view class="item" style="padding-top:14rpx">
                 <u-button v-if="deviceInfo.status==3"
                           @tap="send(item)"
                           text="发送"
                           type="success"
                           size="mini"
                 ></u-button>
                 <u-button v-if="deviceInfo.status!=3"
                           @tap="send(item)"
                           text="发送"
                           type="info"
                           size="mini"
                 ></u-button>
               </view>
             </uni-col>
           </uni-row>


           <uni-row class="demo-uni-row" v-if="item.type === 'array'">
             <uni-col :span="10">
               <view class="item">{{item.name}}</view>
             </uni-col>
             <uni-col :span="10">
               <view style="padding:0 10rpx">
                 <u-input  placeholder="请使用英文逗号分隔的字符串"  v-model="item.shadow">
                 </u-input>
               </view>
             </uni-col>
             <uni-col :span="4">
               <view class="item" style="padding-top:14rpx">
                 <u-button v-if="deviceInfo.status==3"
                           @tap="send(item)"
                           text="发送"
                           type="success"
                           size="mini"
                 ></u-button>
                 <u-button v-if="deviceInfo.status!=3"
                           @tap="send(item)"
                           text="发送"
                           type="info"
                           size="mini"
                 ></u-button>
               </view>
             </uni-col>
           </uni-row>

           <uni-row class="demo-uni-row" v-if="item.type === 'enum'">
             <uni-col :span="10">
               <view class="item">{{item.name}}</view>
             </uni-col>
             <uni-col :span="10">
               <view style="padding:0 10rpx">

                 <u-cell customStyle="border:0px;" size="mini" @click="chooseItemData(item)" arrow-direction="left" v-if="item.text != null && item.text.length>0" :title="item.text">
                   <u-icon slot="icon" size="12" name="arrow-down"></u-icon>

                 </u-cell>

                 <u-cell customStyle="border:0px;" size="mini" @click="chooseItemData(item)" arrow-direction="down" v-else title="请选择">
                   <u-icon slot="icon" size="12" name="arrow-down"></u-icon>

                 </u-cell>

               </view>
             </uni-col>
             <uni-col :span="4">
               <view class="item" style="padding-top:14rpx">
                 <u-button v-if="deviceInfo.status==3"
                           @tap="send(item)"
                           text="发送"
                           type="success"
                           size="mini"
                 ></u-button>
                 <u-button v-if="deviceInfo.status!=3"
                           @tap="send(item)"
                           text="发送"
                           type="info"
                           size="mini"
                 ></u-button>
               </view>
             </uni-col>
           </uni-row>




         </view>

          <u-line></u-line>
          <u--text text="属性监控" style="margin-top:20px"></u--text>

          <view>


            <uni-row class="demo-uni-row"  v-if="checkCommonProp(item)"  v-for="item in deviceInfo.readOnlyList">
              <uni-col :span="10">
                <view class="item">{{item.name}}</view>
              </uni-col>
              <uni-col :span="10">
                <view style="padding:0 10rpx">
                  <u-input  placeholder="请输入字符串" disabled=""  :value="item.shadow+' '+item.unit">
                  </u-input>
                </view>
              </uni-col>
            </uni-row>

          </view>
        </u-form>

      </view>
      <u-picker @cancel="show=null" :show="show!=null" :columns="columns" @confirm="confirmItemData" keyName="text"></u-picker>
      <u-modal @cancel="cancel" :show="showErrDlg" title="异常上报" :showCancelButton="true" @confirm="doReportError" >
        <view class="slot-content">

          <view style="margin:10px">
            <textarea auto-height	="true"  v-model="errorMsg" placeholder="请输入异常内容" ></textarea>


          </view>
        </view>
      </u-modal>

      <u-modal  :show="showTimeDlg" title="查看时长"  @confirm="closeTime" >
        <view class="slot-content">
            <view v-if="timeobj!=null && deviceInfo.status == 3">本次运行时长：{{ timeobj.runtime }}</view>
          <view v-if="timeobj!=null ">累计时长：{{ timeobj.alltime }}</view>

             <view v-if="timeobj!=null ">平均每天运行时长：{{ timeobj.avgtime }}</view>

        </view>
      </u-modal>
    </view>
  </view>
</template>

<script>
import { getDetail,getDeviceStatus,cacheJsonThingsModel,reportError ,getDeviceRunTime} from '@/api/device/device.js'
import UButton from "../../uni_modules/uview-ui/components/u-button/u-button";
import UForm from "../../uni_modules/uview-ui/components/u--form/u--form";
import UInput from "../../uni_modules/uview-ui/components/u--input/u--input";
export default {
  components: {UInput, UForm, UButton},
  data(){
      return {
        modelKey:['PowerControl','LockControl'],
        power:{
          loading:true,
          value:0,
        },
        lock:{
          loading:true,
          value:0,
        },
        showTimeDlg:false,
        showErrDlg:null,
        errorMsg:"asdasdasdasd",
        show:null,
        value:"",
        deviceInfo:{},
        id:0,
        summary:[],
        activeName:0,
        childId:"",
        oneToMul:false,
        inputProp:[],
        watchProp:[],
        columns:[],
        location:{},
        sysDept:null,
        timeobj:null,
      }
  },
  onLoad: function(opt) {
    this.id = opt.id;
   this.connectMqtt();
    this.getDetail();
  },
  destroyed() {
    // 取消订阅主题
    this.mqttUnSubscribe(this.deviceInfo);
  },
  methods:{
    changeProp(key){
      let item = null;
      let obj = null;
        if(key === "LockControl"){
          item = this.lock;
        }else if(key === "PowerControl"){
          item =  this.power;
        }
      let value = item.value;
      obj = item.item;
       if(value){
         obj.value = 1;
         obj.shadow = 1;
       }else{
         obj.value = 0;
         obj.shadow = 0;
       }
       this.publishThingsModel(this.deviceInfo,obj);
    },
    checkCommonProp(item){
      let id =item.id;
      let isCommonKey = this.modelKey.some(res=>{
        return id === res;
      })
      return !isCommonKey;
    },
    getRunTime(){
      let self = this;
      getDeviceRunTime(this.id).then(res=>{
        self.timeobj = res.data;
      })
    },
    seeTime(){
      this.showTimeDlg = true;
      this.getRunTime();
    },
    closeTime(){
      this.showTimeDlg = false;
    },
    cancel(){
      this.showErrDlg = false;
    },
    reportError(){
      this.showErrDlg = true;
    },
    doReportError(){
        if(!this.errorMsg){
          this.$modal.showToast('异常信息不能为空')
        }else{
          let self = this;
            let errObj = {};
          errObj.deviceId = this.deviceInfo.deviceId;
          errObj.deviceName = this.deviceInfo.deviceName
          errObj.desc = this.errorMsg;
          errObj.deptId= this.deviceInfo.deptId;
          reportError(errObj).then(res=>{
            self.$modal.showToast(res.msg)
            self.cancel();
          })
        }
    },
    openLocation(){
      uni.openLocation({
        latitude: this.location.latitude,
        longitude: this.location.longitude,
        success: function () {
          console.log('success');
        }
      });

    },
    confirmItemData(e){
      let data = e.value[0];
      this.show.text = data.text;
      this.show.shadow=data.value;
      this.show = null;
      console.log(data);
    },
    send(item){
      if(this.deviceInfo.status != 3){
        uni.showToast({
          title:"设备暂未上线",
          icon:"error"
        })
        return;
      }
      if(!item.shadow){
        uni.showToast({
          title:"数据不能为空",
          icon:"error"
        })
        return;
      }
      this.publishThingsModel(this.deviceInfo,item)
    },
    /** 更新设备状态 */
    updateDeviceStatus(device) {

    },
    chooseItemData(data){
      if(this.deviceInfo.status != 3){
        uni.showToast({
          title:"设备暂未上线",
          icon:"error"
        })
        return;
      }
      this.columns = [data.enumList];
      this.show =data;
    },
    getDetail(){
      let self = this;
      getDetail(this.id).then(res=>{
        self.deviceInfo = res.data;
        self.location = {
          latitude: self.deviceInfo.latitude,
          longitude: self.deviceInfo.longitude};
        self.sysDept = self.deviceInfo.sysDept;
        self.parseSummay(res.data.summary)
        self.mqttSubscribe(res.data);
        self.getDeviceStatus();
      });
    },
    getDeviceStatus(e){
      let self = this;
      if(!e){
          e = {index:0};
      }
      this.activeName = e.index;
      this.childId = this.summary[this.activeName].id;
      getDeviceStatus(this.id,this.childId).then(res=>{
            let data =res.data;
            this.deviceInfo = data;
            self.parseStatusData(data)
      });
    },
    parseEnumList(){
      let enumList = this.deviceInfo.enumList;
      for (let enumListElement of enumList) {
        let id = enumListElement.id;
        let isCommonKey = this.modelKey.some(res=>{
          return id === res;
        })
        if(isCommonKey){
          if(id.indexOf("LockControl") !=-1){
            let shadow = enumListElement.shadow;
            this.lock.item = enumListElement;
            if(shadow == 1){
              this.lock.value  = true;
              this.lock.loading = false;
            }else if(shadow == 0){
              this.lock.value  = false;
              this.lock.loading = false;
            }else{
              this.lock.loading = true;
            }
          }
          if(id.indexOf("PowerControl") !=-1){
            let shadow = enumListElement.shadow;
            this.power.item = enumListElement;
            if(shadow == 1){
              this.power.value  = true;
              this.power.loading = false;
            }else if(shadow == 0){
              this.power.value  = false;
              this.power.loading = false;
            }else{
              this.power.loading = true;
            }
          }
        }
        let shadow = enumListElement.shadow
        let valueList = enumListElement.enumList;
        for (let valueObj of valueList){
          if(valueObj.value == shadow){
            enumListElement.text = valueObj.text;
          }
        }
      }
    },
    parseStatusData(data){
      let arr = [];
      let arrayList = data.arrayList;
      arr = arr.concat(arrayList);
      let enumList = data.enumList;
      arr = arr.concat(enumList);
      let integerList = data.integerList;
      arr = arr.concat(integerList);
      let stringList = data.stringList;
      arr = arr.concat(stringList);
      this.inputProp = arr;

      let readOnlyList = data.readOnlyList;
      this.watchProp = readOnlyList;
      this.parseEnumList();
    },
    parseSummay(summary){
      let self = this;
      if(!summary){
        summary = "";
      }
      if(summary.length>0){
        this.summary = JSON.parse(summary);
        if(self.summary.length>0){
          this.oneToMul = true;
        }
        for (let i = 0; i < self.summary.length; i++) {
          self.summary[i].tabName = self.summary[i].id+"_"+self.summary[i].name
        }
        let childId = "";
        if(this.oneToMul){
          let info = self.summary[self.activeName];
          childId = info.id;
        }
        this.childId = childId;
      }else{
        this.summary = [{tabName:"详情查看"}]
      }
    },
    goDeviceDetail(id){
      uni.navigateTo({
        url: '/pages/device/detail/detail?id='+id
      });
    },
    async connectMqtt() {
      if (this.$mqttTool.client == null) {
        await this.$mqttTool.connect(this.vuex_token);
      }
      this.mqttCallback();
    },
    /** Mqtt订阅主题 */
    mqttSubscribe(device) {
      // 订阅当前设备状态和实时监测
      let topicStatus = '/' + device.productId + '/' + device.serialNumber + '/status/post';
      let topicProperty = '/' + device.productId + '/' + device.serialNumber + '/property/post';
      let topicFunction = '/' + device.productId + '/' + device.serialNumber + '/function/post';
      let topics = [];
      topics.push(topicStatus);
      topics.push(topicProperty);
      topics.push(topicFunction);
      this.$mqttTool.subscribe(topics);
    },
    /** Mqtt取消订阅主题 */
    mqttUnSubscribe(device) {
      // 订阅当前设备状态和实时监测
      let topicStatus = '/' + device.productId + '/' + device.serialNumber + '/status/post';
      let topicProperty = '/' + device.productId + '/' + device.serialNumber + '/property/post';
      let topicFunction = '/' + device.productId + '/' + device.serialNumber + '/function/post';
      let topics = [];
      topics.push(topicStatus);
      topics.push(topicProperty);
      topics.push(topicFunction);
      console.log('取消订阅', topics);
      this.$mqttTool.unsubscribe(topics);
    },
    /* Mqtt回调处理 */
    mqttCallback() {
      this.$mqttTool.client.on('message', (topic, message, buffer) => {
        let topics = topic.split('/');
        let productId = topics[1];
        let deviceNum = topics[2];
        console.log('接收到内容：'+message);
        message = JSON.parse(message.toString());
        if (topics[3] == 'status') {
          console.log('接收到【设备状态-运行】主题：', topic);
          console.log('接收到【设备状态-运行】内容：', message);
          // 更新列表中设备的状态
          if (this.deviceInfo.serialNumber == deviceNum) {
            this.deviceInfo.status = message.status;
            this.deviceInfo.isShadow = message.isShadow;
            this.deviceInfo.rssi = message.rssi;
            this.updateDeviceStatus(this.deviceInfo);
          }
        }
        if (topics[3] == 'property' || topics[3] == 'function') {
          console.log('接收到【物模型】主题：', topic);
          console.log('接收到【物模型】内容：', message);
          if(this.oneToMul){
            let curTabId = this.summary[this.activeName].id;
            let msg = [];
            for (let i = 0; i < message.length; i++) {
              let curMsg = message[i];
              let id = curMsg.id;
              let ids = id.split("_");
              let value = curMsg.value;
              if(ids.length == 2){
                if(curTabId == ids[1]){
                  msg.push({id:ids[0],value:value});
                }
              }
            }
            message = msg;
          }
          // 更新列表中设备的属性
          if (this.deviceInfo.serialNumber == deviceNum) {
            for (let j = 0; j < message.length; j++) {
              let isComplete = false;
              // 布尔类型
              for (let k = 0; k < this.deviceInfo.boolList.length && !isComplete; k++) {
                if (this.deviceInfo.boolList[k].id == message[j].id) {
                  this.deviceInfo.boolList[k].shadow = message[j].value;
                  isComplete = true;
                  break;
                }
              }
              // 枚举类型
              for (let k = 0; k < this.deviceInfo.enumList.length && !isComplete; k++) {
                if (this.deviceInfo.enumList[k].id == message[j].id) {
                  this.deviceInfo.enumList[k].shadow = message[j].value;
                  isComplete = true;
                  break;
                }
              }
              // 字符串类型
              for (let k = 0; k < this.deviceInfo.stringList.length && !isComplete; k++) {
                if (this.deviceInfo.stringList[k].id == message[j].id) {
                  this.deviceInfo.stringList[k].shadow = message[j].value;
                  isComplete = true;
                  break;
                }
              }
              // 数组类型
              for (let k = 0; k < this.deviceInfo.arrayList.length && !isComplete; k++) {
                if (this.deviceInfo.arrayList[k].id == message[j].id) {
                  this.deviceInfo.arrayList[k].shadow = message[j].value;
                  isComplete = true;
                  break;
                }
              }
              // 整数类型
              for (let k = 0; k < this.deviceInfo.integerList.length && !isComplete; k++) {
                if (this.deviceInfo.integerList[k].id == message[j].id) {
                  this.deviceInfo.integerList[k].shadow = message[j].value;
                  isComplete = true;
                  break;
                }
              }
              // 小数类型
              for (let k = 0; k < this.deviceInfo.decimalList.length && !isComplete; k++) {
                if (this.deviceInfo.decimalList[k].id == message[j].id) {
                  this.deviceInfo.decimalList[k].shadow = message[j].value;
                  isComplete = true;
                  break;
                }
              }
              // 监测数据
              for (let k = 0; k < this.deviceInfo.readOnlyList.length && !isComplete; k++) {
                if (this.deviceInfo.readOnlyList[k].id == message[j].id) {
                  this.deviceInfo.readOnlyList[k].shadow = message[j].value;
                  // 更新图表
                  // for (let m = 0; m < this.monitorChart.length; m++) {
                  //   if (message[j].id == this.monitorChart[m].data.id) {
                  //     let data = [{
                  //       value: message[j].value,
                  //       name: this.monitorChart[m].data.name
                  //     }];
                  //     this.monitorChart[m].chart.setOption({
                  //       series: [{
                  //         data: data
                  //       }]
                  //     });
                  //     break;
                  //   }
                  // }
                  isComplete = true;
                  break;
                }
              }
            }
            this.parseEnumList();
          }
        }
      });
    },
    /** 发布物模型 类型(1=属性，2=功能) */
    publishThingsModel(device, model) {
      // 获取缓存的Json物模型
      cacheJsonThingsModel(device.productId).then(response => {
        let thingsModel = JSON.parse(response.data);
        let type = 0;
        for (let i = 0; i < thingsModel.functions.length; i++) {
          if (model.id == thingsModel.functions[i].id) {
            type = 2;
            break;
          }
        }
        if (type == 0) {
          for (let i = 0; i < thingsModel.properties.length; i++) {
            if (model.id == thingsModel.properties[i].id) {
              type = 1;
              break;
            }
          }
        }
        if (type != 0) {
          this.mqttPublish(type, device, model);
        }
      });
    },
    notifyError(res){
      uni.showToast({
        title:res,
        icon:"error"
      })
    },
    notifySuccess(res){
      uni.showToast({
        title:res,
        icon:"success"
      })
    },
    /**
     * Mqtt发布消息
     * @type 类型(1=属性，2=功能，3=OTA升级，4=实时监测)
     * @device 设备
     * @model 物模型
     * */
    mqttPublish(type, device, model) {
      let topic = "";
      let message = ""
      let oneToMul = false;
      if(this.summary.length>0){
        oneToMul = true;
      }
      let modelId = model.id;
      if(oneToMul){
        let info = this.summary[this.activeName];
        let childId = info.id;
        modelId = modelId+"_"+childId;
      }
      if (type == 1) {
        if (device.status == 3) {
          // 属性,在线模式
          topic = "/" + device.productId + "/" + device.serialNumber + "/property-online/get";
        } else if (device.isShadow) {
          // 属性,离线模式
          topic = "/" + device.productId + "/" + device.serialNumber + "/property-offline/post";
        }
        message = '[{"id":"' + modelId + '","value":"' + model.shadow + '"}]';
      } else if (type == 2) {
        if (device.status == 3) {
          // 功能,在线模式
          topic = "/" + device.productId + "/" + device.serialNumber + "/function-online/get";

        } else if (device.isShadow) {
          // 功能,离线模式
          topic = "/" + device.productId + "/" + device.serialNumber + "/function-offline/post";
        }
        message = '[{"id":"' + modelId + '","value":"' + model.shadow + '"}]';
      } else if (type == 3) {
        // OTA升级
        topic = "/" + device.productId + "/" + device.serialNumber + "/ota/get";
        message = '{"version":' + this.firmware.version + ',"downloadUrl":"' + this.getDownloadUrl(this.firmware.filePath) + '"}';
      } else {
        return;
      }
      if (topic != "") {
        // 发布
        this.$mqttTool.publish(topic, message, model.name).then(res => {
          this.notifySuccess(res);
        }).catch(res => {
          this.notifyError(res);
        });
      }
    },

  }
}
</script>

<style>
.header{
  width: 100%;
  background: white;
  padding:0px 20rpx;
  position: relative;

}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  margin:10px;
  padding-bottom: 10px;
  justify-content: center;
  width: 100%;
}
.grid-text {

  font-size: 14px;
  color: #909399;
  padding: 10rpx 0 20rpx 0rpx;
  /* #ifndef APP-PLUS */
  box-sizing: border-box;
  /* #endif */
}
.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.item{

  height: 80rpx;
  line-height: 80rpx;
}
</style>