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/WebMVC/wwwroot/components/devices/curtain.vue

55 lines
2.1 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 class="card-tools" v-if="hasDevicePermission()">
<span @click="visible = true" title="操作"><i class="ion ion-md-settings"></i></span>
</div>
</div>
<div class="card-body">
<div class="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" style="line-height:28px;">
<span>
状态:
<span class="status">
{{status}}
</span>
</span>
</div>
</div>
</div>
</div>
<a-modal v-model="visible" :title="device.displayName" :footer="null">
<img style="height:32px;" v-on:click="execApi(device.number,'/Curtain/On')" src="/platform/images/left.svg" />
<img style="height:32px;" v-on:click="execApi(device.number,'/Curtain/Stop')" src="/platform/images/stop.svg" />
<img style="height:32px;" v-on:click="execApi(device.number,'/Curtain/Off')" src="/platform/images/right.svg" />
</a-modal>
</div>
</template>
<script>
export default {
props: ['device'],
data: function () {
return {
visible: false
}
},
computed: {
status: function () {
var value = getIoTDataValue(this.device, '状态');
return value === '0' ? '关' :
(value === '1' ? '开' : '停');
}
}
};
</script>