You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
iot/projects/WebSPA/wwwroot/pages/iot/device/socket.html

37 lines
1.9 KiB

<template>
<div class="card socket" style="box-sizing:border-box;height:150px;margin-top:10px;">
<div class="card-header">
{{device.displayName}}
<span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
<span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
</div>
<div class="card-body">
<div class="row" style="height:100%;width:300px;margin: 0 auto;">
<div class="col-3 align-self-center">
<img class="mh-100" src="/images/socket.svg" style="width:48px;" />
</div>
<div class="col-9 align-self-center">
<div class="row" style="line-height:28px;">
<span class="badge badge-info" style="line-height:26px; margin:0 10px 0 0" v-if="getDeviceDataValue(this.device, '电量')">{{electricity}} kW‧h</span>
<span class="badge badge-info" style="line-height:26px; margin:0 10px 0 0" >{{power}} W</span>
<img style="height:32px;" v-if="getDeviceDataValue(device,'状态')==='开'" v-on:click="execApi(device.number,'/Socket/Off')" :src="config.apigateway+'/IoTCenter/images/on.png'" />
<img style="height:32px;" v-else="getDeviceDataValue(device,'状态')==='关'" v-on:click="execApi(device.number,'/Socket/On')" :src="config.apigateway+'/IoTCenter/images/off.png'" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
({
props: ['device'],
computed: {
electricity: function () {
return parseFloat(getDeviceDataValue(this.device, '电量')||0).toFixed(2);
},
power: function (){
return parseFloat(getDeviceDataValue(this.device, '功率')||0).toFixed(2);
}
}
});
</script>