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.
46 lines
2.3 KiB
46 lines
2.3 KiB
<template>
|
|
<div class="card" style="box-sizing:border-box;height:150px;margin: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:250px;margin: 0 auto;">
|
|
<div class="col-3 align-self-center">
|
|
<img class="mh-100" :src="device.product.image" style="width:48px;" />
|
|
</div>
|
|
<div class="col-2 align-self-center">
|
|
<div class="row" style="line-height:28px;">
|
|
<img class="pointer" v-if="getDeviceDataValue(device,'状态')==='开'"
|
|
@click="execApi(device.number,'/Socket/Off')" src="images/on.svg" />
|
|
<img class="pointer" v-else="getDeviceDataValue(device,'状态')==='关'"
|
|
@click="execApi(device.number,'/Socket/On')" src="images/off.svg" />
|
|
</div>
|
|
</div>
|
|
<div class="col-7 align-self-center">
|
|
<div class="row" style="height: 25px; line-height: 25px;"><span
|
|
style="line-height:26px; margin-right: 10px;" v-if="isSmart">{{electricity}} kW‧h</span>
|
|
</div>
|
|
<div class="row" style="height: 25px; line-height: 20px;"> <span
|
|
style="line-height:26px; margin-right: 10px;" v-if="isSmart">{{power}} W</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ['device'],
|
|
computed: {
|
|
isSmart: function () {
|
|
return Enumerable.from(this.device.data).any(function (o) { return o.name === "电量"; });
|
|
},
|
|
electricity: function () {
|
|
return parseFloat(this.getDeviceDataValue(this.device, '电量') || 0).toFixed(2);
|
|
},
|
|
power: function () {
|
|
return parseFloat(this.getDeviceDataValue(this.device, '功率') || 0).toFixed(2);
|
|
}
|
|
}
|
|
};</script> |