1459 lines
61 KiB
Vue
1459 lines
61 KiB
Vue
<template>
|
||
<view class="container">
|
||
<u-loading-page :loading="loading" bg-color="#eef3f7" loadingText="XCWL.cn"></u-loading-page>
|
||
<view class="card" v-show="!loading">
|
||
<view :style="bgStyle">
|
||
<u--text prefixIcon="grid-fill" iconStyle="font-size: 16px;color:#fff;margin-right:5px;" :text="title"
|
||
bold color="#fff"></u--text>
|
||
</view>
|
||
|
||
<view style="padding:10px;">
|
||
<u--form labelPosition="left" labelWidth="100"
|
||
:labelStyle="{ marginRight: '16px', lineHeight: '32px', width: '50px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }">
|
||
<u-form-item :label="$tt('status.deviceVersion')" leftIcon="/static/upgrade.png">
|
||
<u-row>
|
||
<u-col span="8">
|
||
<u--text :text="'Version' + deviceInfo.firmwareVersion"></u--text>
|
||
</u-col>
|
||
<u-col span="4">
|
||
<u-modal :title="$tt('status.deviceFirmware')" :show="show" :showCancelButton="true"
|
||
:showConfirmButton="Object.keys(firmware).length !== 0 && deviceInfo.firmwareVersion < firmware.version"
|
||
:confirmText="$tt('status.grade')" @confirm="confirmUpgrade"
|
||
@cancel="cancelUpgrade">
|
||
<view style="margin-top:10px;">
|
||
<u--text
|
||
v-if="Object.keys(firmware).length === 0 || deviceInfo.firmwareVersion >= firmware.version"
|
||
lineHeight="80" align="center" prefixIcon="checkmark-circle"
|
||
iconStyle="color:#5ac725;margin-right:5px;" type="info"
|
||
:text="$tt('status.noNeedToUpgrade')"></u--text>
|
||
<u--form labelPosition="left" labelWidth="45"
|
||
v-if="Object.keys(firmware).length !== 0 && deviceInfo.firmwareVersion < firmware.version">
|
||
<u--text type="success" prefixIcon="checkmark-circle"
|
||
iconStyle="color:#5ac725;margin-right:5px;"
|
||
:text="$tt('status.upgraded')"></u--text>
|
||
<u-form-item :label="$tt('status.name')">
|
||
<u--text type="info" :text="firmware.firmwareName"></u--text>
|
||
</u-form-item>
|
||
<u-form-item :label="$tt('status.version')">
|
||
<u--text type="info" :text="'Version ' + firmware.version"></u--text>
|
||
</u-form-item>
|
||
<u-form-item :label="$tt('status.description')">
|
||
<u--text type="info" :text="firmware.remark"
|
||
customStyle="font-size:14px;"></u--text>
|
||
</u-form-item>
|
||
</u--form>
|
||
</view>
|
||
</u-modal>
|
||
<!-- <u-button :disabled="deviceInfo.status != 3" @click="selectUpgrade" type="success"
|
||
text="检查更新" customStyle="width:60px;margin:0;" size="mini"></u-button> -->
|
||
</u-col>
|
||
</u-row>
|
||
</u-form-item>
|
||
</u--form>
|
||
</view>
|
||
</view>
|
||
<!-- 属性列表-->
|
||
<view class="card" v-if="this.attributeList.length!=0">
|
||
<view style="padding:10px;">
|
||
<u--text prefixIcon="grid-fill" iconStyle="font-size: 16px; color: #606266;" text="属性" bold
|
||
color="#606266"></u--text>
|
||
<view v-for="item in attributeList" :key="item.id">
|
||
<u-form labelPosition="left" labelWidth="100">
|
||
<u-form-item v-if="item.datatype.type=='bool'" leftIcon="/static/switch.png" :label="item.name">
|
||
<u-switch v-model="item.shadow" @change="mqttPublish(deviceInfo, item)"
|
||
:disabled="(shadowUnEnable || item.isReadonly==1)" inactiveValue="0" activeValue="1"
|
||
activeColor="#3c9cff" inactiveColor="#c4c6c9" size="20"></u-switch>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.type=='enum'" leftIcon="list" :label="item.name">
|
||
<view class="enum-button-wrap"
|
||
v-if="item.datatype.showWay && item.datatype.showWay === 'button'">
|
||
<view class="enum-button" v-for="subItem in item.datatype.enumList"
|
||
:key="subItem.value">
|
||
<u-button size="mini" :disabled="(shadowUnEnable || item.isReadonly === 1)"
|
||
type="primary" :plain="true" :text="subItem.text" :custom-style="{
|
||
backgroundColor: subItem.value === item.shadow ? '#e8f4ff' : '',
|
||
color: subItem.value === item.shadow ? '#1890ff' : '#000'
|
||
}" @click="enumButtonClick(deviceInfo, item, subItem.value)"></u-button>
|
||
</view>
|
||
</view>
|
||
<uni-data-select v-else :class="(shadowUnEnable || item.isReadonly==1) ? 'disabled' : ''"
|
||
:clear="false" v-model="item.shadow" :localdata="item.datatype.enumList"
|
||
@change="dropdownChange(deviceInfo, item, $event)">
|
||
</uni-data-select>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.type=='string'" leftIcon="email" :label="item.name">
|
||
<u-input v-model="item.shadow"
|
||
:placeholder="$tt('status.inputString')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
|
||
:disabled="(shadowUnEnable || item.isReadonly==1)">
|
||
<u-button type="primary" :text="$tt('status.send')" size="mini"
|
||
:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, item)"></u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.type=='decimal'" leftIcon="email" :label="item.name">
|
||
<u-input v-model="item.shadow"
|
||
:placeholder="$tt('status.decimals')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
|
||
:disabled="shadowUnEnable || item.isReadonly==1">
|
||
<u-button type="primary" :text="$tt('status.send')" size="mini"
|
||
:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, item)"></u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.type=='integer'" leftIcon="email" :label="item.name">
|
||
<u-input v-model="item.shadow"
|
||
:placeholder="$tt('status.integer')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
|
||
:disabled="shadowUnEnable || item.isReadonly==1">
|
||
<u-button type="primary" :text="$tt('status.send')" size="mini"
|
||
:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, item)"></u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.type === 'object'">
|
||
<view class="object-wrap">
|
||
<u--text class="object-title" prefixIcon="attach"
|
||
iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
|
||
:text="item.name"></u--text>
|
||
<view class="object-content">
|
||
<u-form labelPosition="left" labelWidth="110"
|
||
:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
|
||
<view v-for="param in item.datatype.params" :key="param.id">
|
||
<u-form-item v-if="param.datatype.type === 'bool'" :label="param.name">
|
||
<u-switch v-model="param.shadow"
|
||
@change="mqttPublish(deviceInfo, param)"
|
||
:disabled="(shadowUnEnable || param.isReadonly === 1)"
|
||
inactiveValue="0" activeValue="1" activeColor="#3c9cff"
|
||
inactiveColor="#c4c6c9" size="20">
|
||
</u-switch>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type === 'enum'" :label="param.name">
|
||
<view class="enum-button-wrap"
|
||
v-if="param.datatype.showWay && param.datatype.showWay === 'button'">
|
||
<view class="enum-button" v-for="subItem in param.datatype.enumList"
|
||
:key="subItem.value">
|
||
<u-button size="mini" :custom-style="{
|
||
backgroundColor: subItem.value === param.shadow ? '#e8f4ff' : '',
|
||
color: subItem.value === param.shadow ? '#1890ff' : '#000'
|
||
}" :disabled="(shadowUnEnable || param.isReadonly === 1)" type="primary" :plain="true"
|
||
:text="subItem.text"
|
||
@click="enumButtonClick(deviceInfo, param, subItem.value)"></u-button>
|
||
</view>
|
||
</view>
|
||
<uni-data-select v-else
|
||
:class="(shadowUnEnable || param.isReadonly === 1) ? 'disabled' : ''"
|
||
:clear="false" v-model="param.shadow"
|
||
:localdata="param.datatype.enumList"
|
||
@change="dropdownChange(deviceInfo, param, $event)">
|
||
</uni-data-select>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type === 'string'" :label="param.name">
|
||
<u-input v-model="param.shadow"
|
||
:placeholder="$tt('status.inputString')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
|
||
:disabled="(shadowUnEnable || param.isReadonly === 1)">
|
||
<u-button type="primary" :text="$tt('status.send')" size="mini"
|
||
:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, param)"></u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type === 'decimal'" :label="param.name">
|
||
<u-input v-model="param.shadow"
|
||
:placeholder="$tt('status.decimals')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
|
||
:disabled="shadowUnEnable || param.isReadonly === 1">
|
||
<u-button type="primary" :text="$tt('status.send')" size="mini"
|
||
:slot="(shadowUnEnable || param.isReadonly==1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, param)"></u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type === 'integer'" :label="param.name">
|
||
<u-input v-model="param.shadow"
|
||
:placeholder="$tt('status.integer')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
|
||
:disabled="shadowUnEnable || param.isReadonly === 1">
|
||
<u-button type="primary" :text="$tt('status.send')" size="mini"
|
||
:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, param)"></u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
</view>
|
||
</u-form>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.type === 'array'">
|
||
<view class="object-wrap" v-if="item.datatype.arrayType !== 'object'">
|
||
<u--text class="object-title" prefixIcon="order"
|
||
iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
|
||
:text="item.name"></u--text>
|
||
<view class="object-content">
|
||
<u--form labelPosition="left" labelWidth="110"
|
||
:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
|
||
<view v-for="(model,index) in item.datatype.arrayModel" :key="model.id">
|
||
<u-form-item v-if="item.datatype.arrayType=='string'"
|
||
:label="item.name+(index+1)">
|
||
<u-input v-model="model.shadow" :placeholder="$tt('status.inputString')"
|
||
:disabled=" (shadowUnEnable || item.isReadonly==1)">
|
||
<u-button type="primary" :text="$tt('status.send')" size="mini"
|
||
:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, model)"></u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.arrayType=='decimal'"
|
||
:label="item.name+(index+1)">
|
||
<u-input v-model="model.shadow" :placeholder="$tt('status.inputString')"
|
||
:disabled=" (shadowUnEnable || item.isReadonly==1)">
|
||
<u-button type="primary" :text="$tt('status.send')" size="mini"
|
||
:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, model)"></u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.arrayType=='integer'"
|
||
:label="item.name+(index+1)">
|
||
<u-input v-model="model.shadow" :placeholder="$tt('status.integer')"
|
||
:disabled="(shadowUnEnable || item.isReadonly==1)">
|
||
<u-button type="primary" :text="$tt('status.send')" size="mini"
|
||
:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, model)"></u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
</view>
|
||
</u--form>
|
||
</view>
|
||
</view>
|
||
<view class="object-wrap" v-if="item.datatype.arrayType === 'object'">
|
||
<u--text class="object-title" prefixIcon="order"
|
||
iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
|
||
:text="item.name"></u--text>
|
||
<view style="padding: 0px 4.5px;" class="object-content">
|
||
<u-collapse :border="true">
|
||
<u-collapse-item v-for="(arrayParam,index) in item.datatype.arrayParams"
|
||
:key="index" :title="item.name+(index+1)" :name="item.id+(index+1)">
|
||
<u--form labelPosition="left" labelWidth="110"
|
||
:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
|
||
<view v-for="param in arrayParam" :key="param.id">
|
||
<u-form-item v-if="param.datatype.type=='bool'" :label="param.name">
|
||
<u-switch v-model="param.shadow"
|
||
@change="mqttPublish(deviceInfo, param)"
|
||
:disabled="(shadowUnEnable || param.isReadonly==1)"
|
||
inactiveValue="0" activeValue="1" activeColor="#3c9cff"
|
||
inactiveColor="#c4c6c9" size="20">
|
||
</u-switch>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type === 'enum'"
|
||
:label="param.name">
|
||
<view class="enum-button-wrap"
|
||
v-if="param.datatype.showWay && param.datatype.showWay === 'button'">
|
||
<view class="enum-button"
|
||
v-for="subItem in param.datatype.enumList"
|
||
:key="subItem.value">
|
||
<u-button size="mini"
|
||
:disabled="(shadowUnEnable || param.isReadonly === 1)"
|
||
type="primary" :plain="true" :text="subItem.text"
|
||
:custom-style="{
|
||
backgroundColor: subItem.value === param.shadow ? '#e8f4ff' : '',
|
||
color: subItem.value === param.shadow ? '#1890ff' : '#000'
|
||
}" @click="enumButtonClick(deviceInfo, param, subItem.value)"></u-button>
|
||
</view>
|
||
</view>
|
||
<uni-data-select v-else
|
||
:class="(shadowUnEnable || param.isReadonly==1) ? 'disabled' : ''"
|
||
:clear="false" v-model="param.shadow"
|
||
:localdata="param.datatype.enumList"
|
||
@change="dropdownChange(deviceInfo, param, $event)">
|
||
</uni-data-select>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type=='string'"
|
||
:label="param.name">
|
||
<u-input v-model="param.shadow"
|
||
:placeholder="$tt('status.inputString')+(param.datatype.unit?'，'+$tt('status.unit')+'：'+param.datatype.unit:'')"
|
||
:disabled="(shadowUnEnable || param.isReadonly==1)">
|
||
<u-button type="primary" :text="$tt('status.send')"
|
||
size="mini"
|
||
:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, param)">
|
||
</u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type=='decimal'"
|
||
:label="param.name">
|
||
<u-input v-model="param.shadow"
|
||
:placeholder="$tt('status.decimals')+(param.datatype.unit?'，'+$tt('status.unit')+'：'+param.datatype.unit:'')"
|
||
:disabled="shadowUnEnable || param.isReadonly==1">
|
||
<u-button type="primary" :text="$tt('status.send')"
|
||
size="mini"
|
||
:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, param)">
|
||
</u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type=='integer'"
|
||
:label="param.name">
|
||
<u-input v-model="param.shadow"
|
||
:placeholder="$tt('status.integer')+(param.datatype.unit?'，'+$tt('status.unit')+'：'+param.datatype.unit:'')"
|
||
:disabled="shadowUnEnable || param.isReadonly==1">
|
||
<u-button type="primary" :text="$tt('status.send')"
|
||
size="mini"
|
||
:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, param)">
|
||
</u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
</view>
|
||
</u--form>
|
||
</u-collapse-item>
|
||
</u-collapse>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
</u-form>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 操作列表-->
|
||
<view class="card" v-if="this.operateList.length!=0">
|
||
<view style="padding:10px;">
|
||
<u--text prefixIcon="grid-fill" iconStyle="font-size: 16px; color: #606266; margin-right: 5px;"
|
||
text="操作" bold color="#606266"></u--text>
|
||
<view v-for="item in operateList" :key="item.id">
|
||
<u-form labelPosition="left" labelWidth="100">
|
||
<u-form-item v-if="item.datatype.type=='bool'" leftIcon="/static/switch.png" :label="item.name">
|
||
<u-switch v-model="item.shadow" @change="mqttPublish(deviceInfo, item)"
|
||
:disabled="(shadowUnEnable || item.isReadonly==1)" inactiveValue="0" activeValue="1"
|
||
activeColor="#3c9cff" inactiveColor="#c4c6c9" size="20"></u-switch>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.type=='enum'" leftIcon="list" :label="item.name">
|
||
<view class="enum-button-wrap"
|
||
v-if="item.datatype.showWay && item.datatype.showWay === 'button'">
|
||
<view class="enum-button" v-for="subItem in item.datatype.enumList"
|
||
:key="subItem.value">
|
||
<u-button size="mini" :disabled="(shadowUnEnable || item.isReadonly === 1)"
|
||
type="primary" :plain="true" :text="subItem.text" :custom-style="{
|
||
backgroundColor: subItem.value === item.shadow ? '#e8f4ff' : '',
|
||
color: subItem.value === item.shadow ? '#1890ff' : '#000'
|
||
}" @click="enumButtonClick(deviceInfo, item, subItem.value)"></u-button>
|
||
</view>
|
||
</view>
|
||
<uni-data-select v-else :class="(shadowUnEnable || item.isReadonly==1) ? 'disabled' : ''"
|
||
:clear="false" v-model="item.shadow" :localdata="item.datatype.enumList"
|
||
@change="dropdownChange(deviceInfo, item, $event)">
|
||
</uni-data-select>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.type=='string'" leftIcon="email" :label="item.name">
|
||
<u-input v-model="item.shadow"
|
||
:placeholder="$tt('status.inputString')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
|
||
:disabled="(shadowUnEnable || item.isReadonly==1)">
|
||
<u-button type="primary" :text="$tt('status.send')" size="mini"
|
||
:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, item)"></u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.type=='decimal'" leftIcon="email" :label="item.name">
|
||
<u-input v-model="item.shadow"
|
||
:placeholder="$tt('status.decimals')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
|
||
:disabled="shadowUnEnable || item.isReadonly==1">
|
||
<u-button type="primary" :text="$tt('status.send')" size="mini"
|
||
:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, item)"></u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.type=='integer'" leftIcon="email" :label="item.name">
|
||
<u-input v-model="item.shadow"
|
||
:placeholder="$tt('status.integer')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
|
||
:disabled="shadowUnEnable || item.isReadonly==1">
|
||
<u-button type="primary" :text="$tt('status.send')" size="mini"
|
||
:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, item)"></u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.type === 'object'">
|
||
<view class="object-wrap">
|
||
<u--text class="object-title" prefixIcon="attach"
|
||
iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
|
||
:text="item.name"></u--text>
|
||
<view class="object-content">
|
||
<u-form labelPosition="left" labelWidth="110"
|
||
:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
|
||
<view v-for="param in item.datatype.params" :key="param.id">
|
||
<u-form-item v-if="param.datatype.type === 'bool'" :label="param.name">
|
||
<u-switch v-model="param.shadow"
|
||
@change="mqttPublish(deviceInfo, param)"
|
||
:disabled="(shadowUnEnable || param.isReadonly === 1)"
|
||
inactiveValue="0" activeValue="1" activeColor="#3c9cff"
|
||
inactiveColor="#c4c6c9" size="20">
|
||
</u-switch>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type === 'enum'" :label="param.name">
|
||
<view class="enum-button-wrap"
|
||
v-if="param.datatype.showWay && param.datatype.showWay === 'button'">
|
||
<view class="enum-button" v-for="subItem in param.datatype.enumList"
|
||
:key="subItem.value">
|
||
<u-button size="mini"
|
||
:disabled="(shadowUnEnable || param.isReadonly === 1)"
|
||
type="primary" :plain="true" :text="subItem.text"
|
||
:custom-style="{
|
||
backgroundColor: subItem.value === param.shadow ? '#e8f4ff' : '',
|
||
color: subItem.value === param.shadow ? '#1890ff' : '#000'
|
||
}" @click="enumButtonClick(deviceInfo, param, subItem.value)"></u-button>
|
||
</view>
|
||
</view>
|
||
<uni-data-select v-else
|
||
:class="(shadowUnEnable || param.isReadonly === 1) ? 'disabled' : ''"
|
||
:clear="false" v-model="param.shadow"
|
||
:localdata="param.datatype.enumList"
|
||
@change="dropdownChange(deviceInfo, param, $event)">
|
||
</uni-data-select>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type === 'string'" :label="param.name">
|
||
<u-input v-model="param.shadow"
|
||
:placeholder="$tt('status.inputString')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
|
||
:disabled="(shadowUnEnable || param.isReadonly === 1)">
|
||
<u-button type="primary" :text="$tt('status.send')" size="mini"
|
||
:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, param)"></u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type === 'decimal'" :label="param.name">
|
||
<u-input v-model="param.shadow"
|
||
:placeholder="$tt('status.decimals')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
|
||
:disabled="shadowUnEnable || param.isReadonly === 1">
|
||
<u-button type="primary" :text="$tt('status.send')" size="mini"
|
||
:slot="(shadowUnEnable || param.isReadonly==1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, param)"></u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type === 'integer'" :label="param.name">
|
||
<u-input v-model="param.shadow"
|
||
:placeholder="$tt('status.integer')+(item.datatype.unit?'，'+$tt('status.unit')+'：'+item.datatype.unit:'')"
|
||
:disabled="shadowUnEnable || param.isReadonly === 1">
|
||
<u-button type="primary" :text="$tt('status.send')" size="mini"
|
||
:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, param)"></u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
</view>
|
||
</u-form>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.type === 'array'">
|
||
<view class="object-wrap" v-if="item.datatype.arrayType !== 'object'">
|
||
<u--text class="object-title" prefixIcon="order"
|
||
iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
|
||
:text="item.name"></u--text>
|
||
<view class="object-content">
|
||
<u--form labelPosition="left" labelWidth="110"
|
||
:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
|
||
<view v-for="(model,index) in item.datatype.arrayModel" :key="model.id">
|
||
<u-form-item v-if="item.datatype.arrayType=='string'"
|
||
:label="item.name+(index+1)">
|
||
<u-input v-model="model.shadow" :placeholder="$tt('status.inputString')"
|
||
:disabled="(shadowUnEnable
|
||
|| item.isReadonly==1)">
|
||
<u-button type="primary" :text="$tt('status.send')" size="mini"
|
||
:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, model)"></u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.arrayType=='decimal'"
|
||
:label="item.name+(index+1)">
|
||
<u-input v-model="model.shadow" :placeholder="$tt('status.inputString')"
|
||
:disabled=" (shadowUnEnable || item.isReadonly==1)">
|
||
<u-button type="primary" :text="$tt('status.send')" size="mini"
|
||
:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, model)"></u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.arrayType=='integer'"
|
||
:label="item.name+(index+1)">
|
||
<u-input v-model="model.shadow" :placeholder="$tt('status.integer')"
|
||
:disabled="(shadowUnEnable || item.isReadonly==1)">
|
||
<u-button type="primary" :text="$tt('status.send')" size="mini"
|
||
:slot="(shadowUnEnable || item.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, model)"></u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
</view>
|
||
</u--form>
|
||
</view>
|
||
</view>
|
||
<view class="object-wrap" v-if="item.datatype.arrayType === 'object'">
|
||
<u--text class="object-title" prefixIcon="order"
|
||
iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
|
||
:text="item.name"></u--text>
|
||
<view style="padding: 0px 4.5px;" class="object-content">
|
||
<u-collapse :border="true">
|
||
<u-collapse-item v-for="(arrayParam,index) in item.datatype.arrayParams"
|
||
:key="index" :title="item.name+(index+1)" :name="item.id+(index+1)">
|
||
<u--form labelPosition="left" labelWidth="110"
|
||
:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
|
||
<view v-for="param in arrayParam" :key="param.id">
|
||
<u-form-item v-if="param.datatype.type=='bool'" :label="param.name">
|
||
<u-switch v-model="param.shadow"
|
||
@change="mqttPublish(deviceInfo, param)"
|
||
:disabled="(shadowUnEnable || param.isReadonly==1)"
|
||
inactiveValue="0" activeValue="1" activeColor="#3c9cff"
|
||
inactiveColor="#c4c6c9" size="20">
|
||
</u-switch>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type === 'enum'"
|
||
:label="param.name">
|
||
<view class="enum-button-wrap"
|
||
v-if="param.datatype.showWay && param.datatype.showWay === 'button'">
|
||
<view class="enum-button"
|
||
v-for="subItem in param.datatype.enumList"
|
||
:key="subItem.value">
|
||
<u-button size="mini"
|
||
:disabled="(shadowUnEnable || param.isReadonly === 1)"
|
||
type="primary" :plain="true" :text="subItem.text"
|
||
:custom-style="{
|
||
backgroundColor: subItem.value === param.shadow ? '#e8f4ff' : '',
|
||
color: subItem.value === param.shadow ? '#1890ff' : '#000'
|
||
}" @click="enumButtonClick(deviceInfo, param, subItem.value)">
|
||
@click="enumButtonClick(deviceInfo, param,
|
||
subItem.value)"></u-button>
|
||
</view>
|
||
</view>
|
||
<uni-data-select v-else
|
||
:class="(shadowUnEnable || param.isReadonly==1) ? 'disabled' : ''"
|
||
:clear="false" v-model="param.shadow"
|
||
:localdata="param.datatype.enumList"
|
||
@change="dropdownChange(deviceInfo, param, $event)">
|
||
</uni-data-select>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type=='string'"
|
||
:label="param.name">
|
||
<u-input v-model="param.shadow"
|
||
:placeholder="$tt('status.inputString')+(param.datatype.unit?'，'+$tt('status.unit')+'：'+param.datatype.unit:'')"
|
||
:disabled="(shadowUnEnable || param.isReadonly==1)">
|
||
<u-button type="primary" :text="$tt('status.send')"
|
||
size="mini"
|
||
:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, param)">
|
||
</u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type=='decimal'"
|
||
:label="param.name">
|
||
<u-input v-model="param.shadow"
|
||
:placeholder="$tt('status.decimals')+(param.datatype.unit?'，'+$tt('status.unit')+'：'+param.datatype.unit:'')"
|
||
:disabled="shadowUnEnable || param.isReadonly==1">
|
||
<u-button type="primary" :text="$tt('status.send')"
|
||
size="mini"
|
||
:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, param)">
|
||
</u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type=='integer'"
|
||
:label="param.name">
|
||
<u-input v-model="param.shadow"
|
||
:placeholder="$tt('status.integer')+(param.datatype.unit?'，'+$tt('status.unit')+'：'+param.datatype.unit:'')"
|
||
:disabled="shadowUnEnable || param.isReadonly==1">
|
||
<u-button type="primary" :text="$tt('status.send')"
|
||
size="mini"
|
||
:slot="(shadowUnEnable || param.isReadonly === 1) ? '' : 'suffix'"
|
||
@click="mqttPublish(deviceInfo, param)">
|
||
</u-button>
|
||
</u-input>
|
||
</u-form-item>
|
||
</view>
|
||
</u--form>
|
||
</u-collapse-item>
|
||
</u-collapse>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
</u-form>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card" :style="loading ? 'visibility:hidden' : 'visibility:visible'"
|
||
v-if="monitorChart.length != 0">
|
||
<view style="padding:10px;">
|
||
<u--text prefixIcon="grid-fill" iconStyle="font-size: 16px; color: #606266; margin-right: 5px;"
|
||
:text="$tt('status.monitior')" bold color="#606266"></u--text>
|
||
</view>
|
||
<view class="wrapper">
|
||
<view class="item" v-for="(chart, index) in monitorChart" :key="index">
|
||
<view class="dashboard">
|
||
<qiun-data-charts type="gauge" :opts="chart.opts" :chartData="chart.data" :canvas2d="false" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card" v-if="!loading && deviceInfo.isShadow == 1 && deviceInfo.status != 3">
|
||
<view style="padding:10px;">
|
||
<u--text prefixIcon="grid-fill" iconStyle="font-size: 16px;color:#606266;margin-right:5px;"
|
||
:text="$tt('status.offline')" bold color="#606266"></u--text>
|
||
</view>
|
||
<view style="background-color:#fff;padding:10px;">
|
||
<u--form labelPosition="left" labelWidth="100"
|
||
:labelStyle="{ marginRight: '16px', width: '50px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }">
|
||
<view v-for="item in deviceInfo.thingsModels" :key="item.id">
|
||
<u-form-item v-if="item.datatype.type=='bool'" leftIcon="/static/switch.png" :label="item.name">
|
||
<u-switch v-model="item.value" @change="mqttPublish(deviceInfo, item)" inactiveValue="0"
|
||
activeValue="1" activeColor="#3c9cff" inactiveColor="#c4c6c9" size="20"
|
||
disabled></u-switch>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.type=='enum'" leftIcon="list" :label="item.name">
|
||
<view class="enum-button-wrap"
|
||
v-if="item.datatype.showWay && item.datatype.showWay === 'button'">
|
||
<view class="enum-button" v-for="subItem in item.datatype.enumList"
|
||
:key="subItem.value">
|
||
<u-button size="mini" :disabled="(shadowUnEnable || item.isReadonly === 1)"
|
||
type="primary" :plain="true" :text="subItem.text" :custom-style="{
|
||
backgroundColor: subItem.value === item.shadow ? '#e8f4ff' : '',
|
||
color: subItem.value === item.shadow ? '#1890ff' : '#000'
|
||
}" @click="enumButtonClick(deviceInfo, item, subItem.value)" disabled></u-button>
|
||
</view>
|
||
</view>
|
||
<uni-data-select v-else class="disabled" :clear="false" v-model="item.value"
|
||
:localdata="item.datatype.enumList" @change="dropdownChange(deviceInfo, item, $event)">
|
||
</uni-data-select>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.type=='string'" leftIcon="email" :label="item.name">
|
||
<u-input v-model="item.value" :placeholder="$tt('status.inputString')" disabled>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.type=='decimal'" leftIcon="email" :label="item.name">
|
||
<u-input v-model="item.value" :placeholder="$tt('status.decimals')" disabled>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.type=='integer'" leftIcon="email" :label="item.name">
|
||
<u-input v-model="item.value" :placeholder="$tt('status.integer')" disabled>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.type=='object'">
|
||
<view class="object-wrap">
|
||
<u--text class="object-title" prefixIcon="attach"
|
||
iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
|
||
:text="item.name"></u--text>
|
||
<view class="object-content">
|
||
<u-form labelPosition="left" labelWidth="110"
|
||
:labelStyle="{ lineHeight: '32px', width: '110px', overflow: 'hidden', textOverflow: 'ellipsis' }">
|
||
<view v-for="param in item.datatype.params" :key="param.id">
|
||
<u-form-item v-if="param.datatype.type=='bool'" :label="param.name">
|
||
<u-switch v-model="param.value" @change="mqttPublish(deviceInfo, param)"
|
||
inactiveValue="0" activeValue="1" activeColor="#3c9cff"
|
||
inactiveColor="#c4c6c9" size="20" disabled>
|
||
</u-switch>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type=='enum'" :label="param.name">
|
||
<view class="enum-button-wrap"
|
||
v-if="param.datatype.showWay && param.datatype.showWay === 'button'">
|
||
<view class="enum-button" v-for="subItem in param.datatype.enumList"
|
||
:key="subItem.value">
|
||
<u-button size="mini"
|
||
:disabled="(shadowUnEnable || param.isReadonly === 1)"
|
||
type="primary" :plain="true" :text="subItem.text"
|
||
@click="enumButtonClick(deviceInfo, param, subItem.value)"
|
||
:custom-style="{
|
||
backgroundColor: subItem.value === param.shadow ? '#e8f4ff' : '',
|
||
color: subItem.value === param.shadow ? '#1890ff' : '#000'
|
||
}" disabled></u-button>
|
||
</view>
|
||
</view>
|
||
<uni-data-select v-else class="disabled" :clear="false"
|
||
v-model="param.value" :localdata="param.datatype.enumList"
|
||
@change="dropdownChange(deviceInfo, param, $event)">
|
||
</uni-data-select>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type=='string'" :label="param.name">
|
||
<u-input v-model="param.value" :placeholder="$tt('status.inputString')"
|
||
disabled>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type=='decimal'" :label="param.name">
|
||
<u-input v-model="param.value" :placeholder="$tt('status.decimals')"
|
||
disabled>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type=='integer'" :label="param.name">
|
||
<u-input v-model="param.value" :placeholder="$tt('status.integer')"
|
||
disabled>
|
||
</u-input>
|
||
</u-form-item>
|
||
</view>
|
||
</u-form>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.type=='array'">
|
||
<view class="object-wrap" v-if="item.datatype.arrayType!='object'">
|
||
<u--text class="object-title" prefixIcon="order"
|
||
iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
|
||
:text="item.name"></u--text>
|
||
<view class="object-content">
|
||
<u--form labelPosition="left" labelWidth="110"
|
||
:labelStyle="{ lineHeight: '32px', width: '110px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }">
|
||
<view v-for="(model,index) in item.datatype.arrayModel" :key="model.id">
|
||
<u-form-item v-if="item.datatype.arrayType=='string'"
|
||
:label="item.name+(index+1)">
|
||
<u-input v-model="model.value" :placeholder="$tt('status.inputString')"
|
||
disabled>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.arrayType=='decimal'"
|
||
:label="item.name+(index+1)">
|
||
<u-input v-model="model.value" :placeholder="$tt('status.decimals')"
|
||
disabled>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="item.datatype.arrayType=='integer'"
|
||
:label="item.name+(index+1)">
|
||
<u-input v-model="model.value" :placeholder="$tt('status.integer')"
|
||
disabled>
|
||
</u-input>
|
||
</u-form-item>
|
||
</view>
|
||
</u--form>
|
||
</view>
|
||
</view>
|
||
<view class="object-wrap" v-if="item.datatype.arrayType=='object'">
|
||
<u--text class="object-title" prefixIcon="order"
|
||
iconStyle="font-size: 16px; margin-right: 4px" bold lineHeight="30"
|
||
:text="item.name"></u--text>
|
||
<view style="padding: 0px 4.5px;" class="object-content">
|
||
<u-collapse :border="true">
|
||
<u-collapse-item v-for="(arrayParam,index) in item.datatype.arrayParams"
|
||
:key="index" :title="item.name+(index+1)" :name="item.id+(index+1)">
|
||
<u--form labelPosition="left" labelWidth="110"
|
||
:labelStyle="{marginRight:'16px',lineHeight:'32px',width:'110px',overflow:'hidden',textOverflow:'ellipsis'}">
|
||
<view v-for="param in arrayParam" :key="param.id">
|
||
<u-form-item v-if="param.datatype.type=='bool'" :label="param.name">
|
||
<u-switch v-model="param.value"
|
||
@change="mqttPublish(deviceInfo, param)" inactiveValue="0"
|
||
activeValue="1" activeColor="#3c9cff"
|
||
inactiveColor="#c4c6c9" size="20" disabled>
|
||
</u-switch>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type=='enum'" :label="param.name">
|
||
<view class="enum-button-wrap"
|
||
v-if="param.datatype.showWay && param.datatype.showWay === 'button'">
|
||
<view class="enum-button"
|
||
v-for="subItem in param.datatype.enumList"
|
||
:key="subItem.value">
|
||
<u-button size="mini"
|
||
:disabled="(shadowUnEnable || param.isReadonly === 1)"
|
||
type="primary" :plain="true" :text="subItem.text"
|
||
@click="enumButtonClick(deviceInfo, param, subItem.value)"
|
||
disabled :custom-style="{
|
||
backgroundColor: subItem.value === param.shadow ? '#e8f4ff' : '',
|
||
color: subItem.value === param.shadow ? '#1890ff' : '#000'
|
||
}"></u-button>
|
||
</view>
|
||
</view>
|
||
<uni-data-select v-else class="disabled" :clear="false"
|
||
v-model="param.value" :localdata="param.datatype.enumList"
|
||
@change="dropdownChange(deviceInfo, param, $event)">
|
||
</uni-data-select>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type=='string'"
|
||
:label="param.name">
|
||
<u-input v-model="param.value"
|
||
:placeholder="$tt('status.inputString')" disabled>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type=='decimal'"
|
||
:label="param.name">
|
||
<u-input v-model="param.value"
|
||
:placeholder="$tt('status.decimals')" disabled>
|
||
</u-input>
|
||
</u-form-item>
|
||
<u-form-item v-if="param.datatype.type=='integer'"
|
||
:label="param.name">
|
||
<u-input v-model="param.value"
|
||
:placeholder="$tt('status.integer')" disabled>
|
||
</u-input>
|
||
</u-form-item>
|
||
</view>
|
||
</u--form>
|
||
</u-collapse-item>
|
||
</u-collapse>
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
</u--form>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import projectConfig from '@/env.config.js';
|
||
import {
|
||
getLatestFirmware,
|
||
relateChannelList
|
||
} from '@/apis/modules/device.js';
|
||
import {
|
||
serviceInvoke
|
||
} from '@/apis/modules/runtime.js';
|
||
import {
|
||
getSipStatusInfo,
|
||
getLocationWayInfo
|
||
} from '@/helpers/common.js'
|
||
|
||
export default {
|
||
name: 'baseStatus',
|
||
props: {
|
||
device: {
|
||
type: Object,
|
||
default: null,
|
||
required: true
|
||
}
|
||
},
|
||
watch: {
|
||
// 兼容小程序
|
||
device: function(newVal, oldVal) {
|
||
if (newVal.deviceName !== '') {
|
||
this.deviceInfo = newVal;
|
||
if (this.deviceInfo.deviceType != 3) {
|
||
//分-属性和操作
|
||
this.operateList = this.deviceInfo.thingsModels && this.deviceInfo.thingsModels.filter((
|
||
item) =>
|
||
item.isReadonly == '0');
|
||
this.attributeList = this.deviceInfo.thingsModels && this.deviceInfo.thingsModels.filter((
|
||
item) =>
|
||
item.isReadonly == '1');
|
||
//排序
|
||
this.attributeList = this.attributeList.sort((a, b) => a.order - b.order);
|
||
this.operateList = this.operateList.sort((a, b) => a.order - b.order);
|
||
}
|
||
this.updateDeviceStatus(this.deviceInfo);
|
||
this.initChart();
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 设备升级模态窗
|
||
show: false,
|
||
// 固件
|
||
firmware: {},
|
||
// 加载图标
|
||
loading: true,
|
||
// 图表数据集合
|
||
monitorChart: [{
|
||
opts: {},
|
||
data: {
|
||
categories: [],
|
||
series: [],
|
||
},
|
||
id: '',
|
||
}],
|
||
// 控制模块标题
|
||
title: this.$tt('status.control'),
|
||
// 未启用设备影子
|
||
shadowUnEnable: false,
|
||
// 控制项标题背景
|
||
statusColor: {
|
||
background: '#67C23A',
|
||
color: '#fff'
|
||
},
|
||
// 模块背景色
|
||
bgStyle: '',
|
||
// 设备信息
|
||
deviceInfo: {
|
||
chartList: [],
|
||
},
|
||
//通道列表
|
||
channelList: [],
|
||
// 设备通道
|
||
channelLoadStatus: 'nomore',
|
||
queryParams: {
|
||
deviceSipId: '', //设备sipid
|
||
},
|
||
//属性列表
|
||
attributeList: [],
|
||
//动作列表
|
||
operateList: [],
|
||
};
|
||
},
|
||
created() {
|
||
// 获取设备状态(兼容H5和APP)
|
||
if (this.device !== null && Object.keys(this.device).length !== 0) {
|
||
this.deviceInfo = this.device;
|
||
this.updateDeviceStatus(this.deviceInfo);
|
||
this.initChart();
|
||
};
|
||
// 回调处理
|
||
this.mqttCallback();
|
||
},
|
||
methods: {
|
||
/* Mqtt回调处理 */
|
||
mqttCallback() {
|
||
this.$mqttTool.client.on('message', (topic, message, buffer) => {
|
||
let topics = topic.split('/');
|
||
let productId = topics[1];
|
||
let deviceNum = topics[2];
|
||
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[4] == 'reply') {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: message,
|
||
})
|
||
}
|
||
if (topics[3] == 'property' || topics[3] == 'function' || topic.endsWith(
|
||
'ws/service')) {
|
||
console.log('接收到【物模型】主题：', topic);
|
||
console.log('接收到【物模型】内容：', message);
|
||
// 更新列表中设备的属性
|
||
if (this.deviceInfo.serialNumber == deviceNum) {
|
||
for (let j = 0; j < message.message.length; j++) {
|
||
let isComplete = false;
|
||
// 设备状态
|
||
for (let k = 0; k < this.deviceInfo.thingsModels.length && !
|
||
isComplete; k++) {
|
||
if (this.deviceInfo.thingsModels[k].id == message.message[j].id) {
|
||
// 普通类型
|
||
this.deviceInfo.thingsModels[k].shadow = message.message[j].value;
|
||
isComplete = true;
|
||
break;
|
||
} else if (this.deviceInfo.thingsModels[k].datatype.type ==
|
||
"object") {
|
||
// 对象类型
|
||
for (let n = 0; n < this.deviceInfo.thingsModels[k]
|
||
.datatype.params
|
||
.length; n++) {
|
||
if (this.deviceInfo.thingsModels[k].datatype.params[n]
|
||
.id == message.message[j]
|
||
.id) {
|
||
this.deviceInfo.thingsModels[k].datatype.params[n]
|
||
.shadow =
|
||
message.message[j].value;
|
||
isComplete = true;
|
||
break;
|
||
}
|
||
}
|
||
} else if (this.deviceInfo.thingsModels[k].datatype.type ==
|
||
"array") {
|
||
// 数组类型
|
||
if (this.deviceInfo.thingsModels[k].datatype.arrayType ==
|
||
"object") {
|
||
// 1.对象类型数组,id为数组中一个元素,例如：array_01_gateway_temperature
|
||
if (String(message.message[j].id).indexOf("array_") == 0) {
|
||
for (let n = 0; n < this.deviceInfo.thingsModels[k]
|
||
.datatype
|
||
.arrayParams.length; n++) {
|
||
for (let m = 0; m < this.deviceInfo
|
||
.thingsModels[k].datatype
|
||
.arrayParams[n].length; m++) {
|
||
if (this.deviceInfo.thingsModels[k]
|
||
.datatype.arrayParams[n]
|
||
[m].id == message.message[j].id) {
|
||
this.deviceInfo.thingsModels[k]
|
||
.datatype.arrayParams[n]
|
||
[m].shadow = message.message[j].value;
|
||
isComplete = true;
|
||
break;
|
||
}
|
||
}
|
||
if (isComplete) {
|
||
break;
|
||
}
|
||
}
|
||
} else {
|
||
// 2.对象类型数组，例如：gateway_temperature,消息ID添加前缀后匹配
|
||
for (let n = 0; n < this.deviceInfo.thingsModels[k]
|
||
.datatype
|
||
.arrayParams.length; n++) {
|
||
for (let m = 0; m < this.deviceInfo
|
||
.thingsModels[k].datatype
|
||
.arrayParams[n].length; m++) {
|
||
let index = n > 9 ? String(n) : '0' + k;
|
||
let prefix = 'array_' + index + '_';
|
||
if (this.deviceInfo.thingsModels[k]
|
||
.datatype.arrayParams[n]
|
||
[m].id == prefix + message.message[j].id) {
|
||
this.deviceInfo.thingsModels[k]
|
||
.datatype.arrayParams[n]
|
||
[m].shadow = message.message[j].value;
|
||
isComplete = true;
|
||
}
|
||
}
|
||
if (isComplete) {
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
// 整数、小数和字符串类型数组
|
||
for (let n = 0; n < this.deviceInfo.thingsModels[k]
|
||
.datatype.arrayModel
|
||
.length; n++) {
|
||
if (this.deviceInfo.thingsModels[k].datatype
|
||
.arrayModel[n].id ==
|
||
message.message[j].id) {
|
||
this.deviceInfo.thingsModels[k].datatype
|
||
.arrayModel[n].shadow =
|
||
message.message[j].value;
|
||
isComplete = true;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
};
|
||
// 监测数据
|
||
for (let k = 0; k < this.deviceInfo.chartList.length && !
|
||
isComplete; k++) {
|
||
if (this.deviceInfo.chartList[k].id.indexOf("array_") == 0) {
|
||
// 数组类型匹配,例如：array_00_gateway_temperature
|
||
if (this.deviceInfo.chartList[k].id == message.message[j].id) {
|
||
// let shadows = message[j].value.split(",");
|
||
this.deviceInfo.chartList[k].shadow = message.message[j].value;
|
||
// 更新图表
|
||
for (let m = 0; m < this.monitorChart.length; m++) {
|
||
if (this.deviceInfo.chartList[k].id == this
|
||
.monitorChart[m].id) {
|
||
// uchart中data取值范围0-1，需要最小数+监测值，然后除于区间值
|
||
let value = (Number(message.message[j].value) + Math
|
||
.abs(this
|
||
.deviceInfo.chartList[k].datatype
|
||
.min)) / (Math.abs(
|
||
this.deviceInfo.chartList[k]
|
||
.datatype.min) + Math
|
||
.abs(this.deviceInfo.chartList[k]
|
||
.datatype.max));
|
||
this.monitorChart[m].data.series[0].data =
|
||
value;
|
||
this.monitorChart[m].opts.title.name = message.message[
|
||
j].value + ' ' +
|
||
this.deviceInfo.chartList[k].datatype.unit;
|
||
break;
|
||
}
|
||
}
|
||
isComplete = true;
|
||
break;
|
||
}
|
||
} else {
|
||
// 普通类型匹配
|
||
if (this.deviceInfo.chartList[k].id == message.message[j].id) {
|
||
this.deviceInfo.chartList[k].shadow = message.message[j].value;
|
||
// 更新图表
|
||
for (let m = 0; m < this.monitorChart.length; m++) {
|
||
if (this.deviceInfo.chartList[k].id == this
|
||
.monitorChart[m].id) {
|
||
// uchart中data取值范围0-1，需要最小数+监测值，然后除于区间值
|
||
let value = (Number(message.message[j].value) + Math
|
||
.abs(this
|
||
.deviceInfo.chartList[k].datatype
|
||
.min)) / (Math.abs(
|
||
this.deviceInfo.chartList[k]
|
||
.datatype.min) + Math
|
||
.abs(this.deviceInfo.chartList[k]
|
||
.datatype.max));
|
||
this.monitorChart[m].data.series[0].data =
|
||
value;
|
||
this.monitorChart[m].opts.title.name = message.message[
|
||
j].value + ' ' +
|
||
this.deviceInfo.chartList[k].datatype.unit;
|
||
break;
|
||
}
|
||
}
|
||
isComplete = true;
|
||
break;
|
||
}
|
||
}
|
||
if (isComplete) {
|
||
break;
|
||
}
|
||
};
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//发送指令
|
||
mqttPublish(device, model) {
|
||
const command = {};
|
||
command[model.id] = model.shadow;
|
||
const data = {
|
||
serialNumber: device.serialNumber,
|
||
productId: device.productId,
|
||
remoteCommand: command,
|
||
identifier: model.id,
|
||
modelName: model.name,
|
||
isShadow: device.status != 3,
|
||
type: model.type,
|
||
}
|
||
serviceInvoke(data).then(response => {
|
||
if (response.code === 200) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: this.$tt('status.service')
|
||
});
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* Mqtt发布消息
|
||
* @device 设备
|
||
* @model 物模型(id/name/type/name/isReadonly/value/shadow)，type 类型(1=属性，2=功能，3=OTA升级，4=实时监测)
|
||
* */
|
||
// mqttPublish (device, model) {
|
||
// let topic = "";
|
||
// let message = ""
|
||
// if (model.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":"' + model.id + '","value":"' + model.shadow + '"}]';
|
||
// } else if (model.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":"' + model.id + '","value":"' + model.shadow + '"}]';
|
||
// } else if (model.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); // 发布
|
||
// }
|
||
// },
|
||
// 获取下载路径前缀
|
||
getDownloadUrl(path) {
|
||
return projectConfig.baseUrl + path;
|
||
},
|
||
/** 检查升级 */
|
||
selectUpgrade() {
|
||
// 获取升级固件
|
||
getLatestFirmware(this.deviceInfo.deviceId).then(response => {
|
||
this.firmware = response.data || {};
|
||
this.show = true;
|
||
});
|
||
this.show = true;
|
||
},
|
||
// 确认升级
|
||
confirmUpgrade() {
|
||
let model = {};
|
||
model.name = this.$tt('status.equip');
|
||
model.type = 3;
|
||
this.mqttPublish(this.deviceInfo, model);
|
||
this.show = false;
|
||
},
|
||
// 取消升级
|
||
cancelUpgrade() {
|
||
this.show = false;
|
||
},
|
||
/** 更新设备状态 */
|
||
updateDeviceStatus(device) {
|
||
if (device.status === 3) {
|
||
this.title = this.$tt('status.online');
|
||
this.bgStyle =
|
||
'background-color:#5ac725;border-top-left-radius:6px;border-top-right-radius:6px;padding:10px;';
|
||
this.shadowUnEnable = false;
|
||
} else {
|
||
if (device.isShadow === 1) {
|
||
this.bgStyle =
|
||
'background-color:#3c9cff;border-top-left-radius:6px;border-top-right-radius:6px;padding:10px;';
|
||
this.title = this.$tt('status.shadow');
|
||
this.shadowUnEnable = false;
|
||
} else {
|
||
this.bgStyle =
|
||
'background-color:#909399;border-top-left-radius:6px;border-top-right-radius:6px;padding:10px;';
|
||
this.title = this.$tt('status.deviceOffline');
|
||
this.shadowUnEnable = true;
|
||
}
|
||
}
|
||
},
|
||
/** 下拉菜单改变事件*/
|
||
dropdownChange(device, model, eventData) {
|
||
model.shadow = eventData;
|
||
// 防止uni-data-select在初始化的时候也触发change，产生不必要的错误
|
||
if (eventData !== "") {
|
||
// 发布物模型
|
||
this.mqttPublish(device, model);
|
||
}
|
||
},
|
||
// 设备通道
|
||
getRelateChannelList() {
|
||
return new Promise((resolve, reject) => {
|
||
relateChannelList(this.deviceInfo.deviceId).then(response => {
|
||
this.channelList = response.data;
|
||
response.data.map(item => {
|
||
item.statusInfo = getSipStatusInfo(item.status);
|
||
return item;
|
||
})
|
||
resolve(response.data);
|
||
}).catch(error => {
|
||
reject(error);
|
||
});
|
||
});
|
||
},
|
||
gotoDevicePlayer(deviceSipId, channelSipId, status) {
|
||
let statusInfo = getSipStatusInfo(status)
|
||
if (status !== 3) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: `无法查看${getSipStatusInfo(status).name}数据`
|
||
});
|
||
return;
|
||
}
|
||
// #ifdef H5
|
||
uni.$u.route('/pages_player/list/devicePlayer', {
|
||
deviceId: deviceSipId,
|
||
channelSipId: channelSipId,
|
||
});
|
||
//#endif
|
||
// #ifdef APP-PLUS
|
||
uni.$u.route('/pages_player/list/devicePlayerApp', {
|
||
deviceId: deviceSipId,
|
||
channelSipId: channelSipId,
|
||
});
|
||
//#endif
|
||
// #ifdef MP-WEIXIN
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: this.$tt('timing.nosupported')
|
||
});
|
||
//#endif
|
||
},
|
||
/**监测图表*/
|
||
initChart() {
|
||
this.monitorChart = [];
|
||
if (this.deviceInfo.chartList && this.deviceInfo.chartList.length !== 0) {
|
||
for (let i = 0; i < this.deviceInfo.chartList.length; i++) {
|
||
let data = {};
|
||
let res = {
|
||
categories: [{
|
||
value: 0.2,
|
||
color: '#409EFF'
|
||
}, {
|
||
value: 0.8,
|
||
color: '#12d09f'
|
||
}, {
|
||
value: 1,
|
||
color: '#F56C6C'
|
||
}],
|
||
series: [{
|
||
name: this.deviceInfo.chartList[i].name,
|
||
// uchart中data取值范围0-1，需要最小数+监测值，然后除于区间值
|
||
data: (Number(this.deviceInfo.chartList[i].shadow) + Math.abs(
|
||
this.deviceInfo
|
||
.chartList[i].datatype.min)) /
|
||
(Math.abs(this.deviceInfo.chartList[i].datatype.min) + Math
|
||
.abs(this
|
||
.deviceInfo
|
||
.chartList[i].datatype.max))
|
||
}]
|
||
};
|
||
data = JSON.parse(JSON.stringify(res));
|
||
|
||
//这里的 opts 是图表类型 type="gauge" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['gauge'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
||
let opts = {
|
||
update: true,
|
||
timing: 'easeOut',
|
||
duration: 1000,
|
||
rotate: false,
|
||
rotateLock: false,
|
||
color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272',
|
||
'#FC8452',
|
||
'#9A60B4',
|
||
'#ea7ccc'
|
||
],
|
||
padding: undefined,
|
||
fontSize: 13,
|
||
fontColor: '#666666',
|
||
dataLabel: true,
|
||
dataPointShape: true,
|
||
dataPointShapeType: 'solid',
|
||
touchMoveLimit: 60,
|
||
enableScroll: false,
|
||
enableMarkLine: false,
|
||
title: {
|
||
name: `${!this.deviceInfo.chartList[i].shadow || this.deviceInfo.chartList[i].shadow == ' ' ? 0 : this.deviceInfo.chartList[i].shadow} ${this.deviceInfo.chartList[i].datatype.unit}`,
|
||
fontSize: 24,
|
||
color: '#2fc25b',
|
||
offsetY: 95,
|
||
offsetX: 0
|
||
},
|
||
subtitle: {
|
||
name: this.deviceInfo.chartList[i].name,
|
||
fontSize: 14,
|
||
color: '#333',
|
||
offsetY: 10,
|
||
offsetX: 0
|
||
},
|
||
extra: {
|
||
gauge: {
|
||
type: 'default',
|
||
width: 10,
|
||
labelColor: '#666666',
|
||
startAngle: 0.75,
|
||
endAngle: 0.25,
|
||
startNumber: this.deviceInfo.chartList[i].datatype.min,
|
||
endNumber: this.deviceInfo.chartList[i].datatype.max,
|
||
format: 'dashboardKeepTwoDecimals',
|
||
labelFormat: '',
|
||
splitLine: {
|
||
fixRadius: 0,
|
||
splitNumber: 10,
|
||
width: 30,
|
||
color: '#FFFFFF',
|
||
childNumber: 5,
|
||
childWidth: 10
|
||
},
|
||
pointer: {
|
||
width: 12,
|
||
color: 'auto'
|
||
},
|
||
labelOffset: 16
|
||
}
|
||
}
|
||
};
|
||
this.monitorChart.push({
|
||
opts: opts,
|
||
data: data,
|
||
id: this.deviceInfo.chartList[i].id
|
||
});
|
||
}
|
||
};
|
||
// 延时1秒执行
|
||
setTimeout(x => {
|
||
this.loading = false;
|
||
}, 1000);
|
||
},
|
||
// 下拉刷新
|
||
deviceStatusRefresh() {
|
||
this.updateDeviceStatus(this.deviceInfo);
|
||
this.monitorChart = [];
|
||
this.initChart();
|
||
uni.stopPullDownRefresh();
|
||
},
|
||
/** 枚举类型按钮单击 */
|
||
enumButtonClick(device, model, value) {
|
||
model.shadow = value;
|
||
this.mqttPublish(device, model);
|
||
},
|
||
getKey(id, index) {
|
||
if (index || index === 0) {
|
||
return `${id}-${index}`;
|
||
} else {
|
||
return id;
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {}
|
||
|
||
.wrapper {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
align-content: flex-start;
|
||
margin-bottom: 20rpx;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.wrapper .item {
|
||
width: 100%;
|
||
height: 250px;
|
||
text-align: center;
|
||
border-top: 1px solid #efefef;
|
||
}
|
||
|
||
.wrapper .item .dashboard {
|
||
width: 60%;
|
||
margin: auto;
|
||
}
|
||
|
||
.card {
|
||
box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.1);
|
||
border-radius: 6px;
|
||
background-color: #fff;
|
||
margin: 10px;
|
||
padding: 0;
|
||
}
|
||
|
||
.disabled {
|
||
pointer-events: none;
|
||
cursor: default;
|
||
background-color: rgb(245, 247, 250);
|
||
}
|
||
|
||
.object-wrap {
|
||
width: 100%;
|
||
|
||
.object-title {}
|
||
|
||
.object-content {
|
||
// border: 1px #f1f3f4 solid;
|
||
padding: 0px 18px;
|
||
border-radius: 5px;
|
||
|
||
/deep/ .u-line:first-child {
|
||
border-bottom: transparent !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.enum-button-wrap {
|
||
.enum-button {
|
||
display: inline-block;
|
||
margin-right: 10px;
|
||
|
||
&:not(:first-child) {
|
||
margin-top: 10px
|
||
}
|
||
}
|
||
}
|
||
|
||
.channel_wrap {
|
||
padding: 6px 0;
|
||
|
||
.item_body {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 6px;
|
||
background: #fff;
|
||
|
||
.img {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 5px;
|
||
width: 90px;
|
||
height: 60px;
|
||
background: #e5e5e5;
|
||
margin: 10px;
|
||
}
|
||
|
||
.status {
|
||
position: absolute;
|
||
right: 13px;
|
||
top: 13px;
|
||
}
|
||
}
|
||
}
|
||
</style> |