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.
44 lines
1.5 KiB
44 lines
1.5 KiB
<template>
|
|
<div class="card device-component">
|
|
<div class="card-header">
|
|
<h3 class="card-title">
|
|
{{device.displayName}}
|
|
<i v-if="device.isOnline" class="text-success ion ion-ios-wifi"></i>
|
|
<i v-else class="text-danger ion ion-ios-wifi"></i>
|
|
</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row device-row">
|
|
<div class="col-4 align-self-center">
|
|
<img class="device-image" :src="device.ioTProduct.image" />
|
|
</div>
|
|
<div class="col-8 align-self-center">
|
|
<div class="row">
|
|
<span :class="cls">
|
|
{{status}} {{unit}} {{desc}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ['device'],
|
|
computed: {
|
|
status: function () {
|
|
return getIoTDataValue(this.device, '光照度');
|
|
},
|
|
unit: function () {
|
|
return getIoTDataUnit(this.device, '光照度');
|
|
},
|
|
desc: function () {
|
|
return getIoTDataDescription(this.device, '光照度');
|
|
},
|
|
cls: function () {
|
|
return this.desc === '适中' ? 'status text-success' : 'status text-danger';
|
|
}
|
|
}
|
|
};
|
|
</script> |