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.
58 lines
2.0 KiB
58 lines
2.0 KiB
<template>
|
|
<div class="card device-component">
|
|
<div class="card-header">
|
|
<h3 class="card-title">
|
|
{{device.displayName}}
|
|
</h3>
|
|
<div class="card-tools">
|
|
<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" style="width:48px;" />
|
|
</div>
|
|
<div class="col-8 align-self-center">
|
|
<div class="row">
|
|
<span>型号：{{type}}</span>
|
|
</div>
|
|
<div class="row">
|
|
<span>设备：{{count}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a-modal v-model="visible" :title="device.displayName" :footer="null" width="50%">
|
|
<div class="row">
|
|
<div class="col-sm-3" v-for="item in list">
|
|
<div class="card">
|
|
<div class="card-body bg-gray">{{item.name}}: {{item.value}} {{item.unit}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
({
|
|
props: ['device'],
|
|
data: function () {
|
|
return {
|
|
visible: false,
|
|
model:null
|
|
}
|
|
},
|
|
computed: {
|
|
type: function () {
|
|
return getIoTDataValue(this.device, '型号');
|
|
},
|
|
count: function () {
|
|
return Enumerable.from(this.device.data).where(o => o.key.indexOf('Device') === 0).count();
|
|
},
|
|
list: function () {
|
|
return Enumerable.from(this.device.data).where(o => o.key.indexOf('Device') === 0).orderBy(o => o.key).toArray();
|
|
}
|
|
}
|
|
});
|
|
</script> |