iot/projects/Platform/wwwroot/components/devices/collector.vue

<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>
    export default {
        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>