iot/projects/Platform/wwwroot/components/views/home/index.html

<template>
    <div class="row" style="padding-top:1rem;">
        <div class="col-sm-2">
            <div class="card" v-if="model.organ">
                <div class="card-header">建筑列表</div>
                <div class="card-body">
                    <a-tree :tree-data="tree"
                            :replace-fields="{title:'name',key:'id'}"
                            block-node
                            show-line
                            @select="onSelect">
                    </a-tree>
                </div>
            </div>
        </div>
        <div class="col-sm-10">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">
                        当前：{{model.building?model.building.building.name:model.organ.organ.name}}
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="position-relative p-3 bg-gray">
                                <div class="ribbon-wrapper">
                                    <div class="ribbon bg-primary">
                                        光照
                                    </div>
                                </div>
                                <p>
                                    最大值：
                                    <template v-if="model.building">
                                        {{model.building.maxLight}}
                                    </template>
                                    <template v-else>
                                        {{model.organ.maxLight}}
                                    </template>
                                </p>
                                <p>
                                    最小值：
                                    <template v-if="model.building">
                                        {{model.building.minLight}}
                                    </template>
                                    <template v-else>
                                        {{model.organ.minLight}}
                                    </template>
                                </p>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="position-relative p-3 bg-gray">
                                <div class="ribbon-wrapper">
                                    <div class="ribbon bg-primary">
                                        温度
                                    </div>
                                </div>
                                <p>
                                    最大值：
                                    <template v-if="model.building">
                                        {{model.building.maxTemperature}}
                                    </template>
                                    <template v-else>
                                        {{model.organ.maxTemperature}}
                                    </template>
                                    ℃
                                </p>
                                <p>
                                    最小值：
                                    <template v-if="model.building">
                                        {{model.building.minTemperature}}
                                    </template>
                                    <template v-else>
                                        {{model.organ.minTemperature}}
                                    </template> 
                                    ℃
                                </p>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="position-relative p-3 bg-gray">
                                <div class="ribbon-wrapper">
                                    <div class="ribbon bg-primary">
                                        湿度
                                    </div>
                                </div>
                                <p>
                                    最大值：
                                    <template v-if="model.building">
                                        {{model.building.maxHumidity}}
                                    </template>
                                    <template v-else>
                                        {{model.organ.maxHumidity}}
                                    </template>
                                    RH%"
                                </p>
                                <p>
                                    最小值：
                                    <template v-if="model.building">
                                        {{model.building.minHumidity}}
                                    </template>
                                    <template v-else>
                                        {{model.organ.minHumidity}}
                                    </template>  
                                    RH%"
                                </p>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="position-relative p-3 bg-gray">
                                <div class="ribbon-wrapper">
                                    <div class="ribbon bg-primary">
                                        用电
                                    </div>
                                </div>
                                <p>
                                    开：
                                    <template v-if="model.building">
                                        {{model.building.deviceOpenCount}}
                                    </template>
                                    <template v-else>
                                        {{model.organ.deviceOpenCount}}
                                    </template>
                                </p>
                                <p>
                                    关：
                                    <template v-if="model.building">
                                        {{model.building.deviceCloseCount}}
                                    </template>
                                    <template v-else>
                                        {{model.organ.deviceCloseCount}}
                                    </template>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">下级建筑</div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-2" v-for="item in buildings">
                            <div class="card bg-gray">
                                <div class="card-body  bg-gray text-center">
                                    <img class="card-img-top" :src="item.image" :alt="item.name" style="width:64px;height:64px;margin:0 auto;">
                                    <br />
                                    <a class="btn btn-block btn-primary btn-sm" href="@Url.Action(null,null,new { buildingId = item.Id})">{{item.name}}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                url: config.baseUrl + '/Home/GetOrgan',
                model: {
                    organ: null,
                    building:null
                },
                events: ['OrganEntityInserted',
                    'OrganEntityUpdated',
                    'OrganEntityDeleted',
                    'BuildingEntityInserted',
                    'BuildingEntityUpdated',
                    'BuildingEntityDeleted']
            };
        },
        mounted: function () {
            this.subscribe();
            this.load();
        },
        beforeDestroy: function () {
            PubSub.unsubscribes(this.events);
        },
        methods: {
            subscribe: function () {
                var parent = this;
                PubSub.subscribes(this.events, function (method, data) {
                    parent.load();
                });
            },
            load: function () {
                var parent = this;
                axios.post(this.url).then(function (response) {
                    parent.model.organ = response.data;
                });
            },
            onSelect(selectedKeys, info) {
                var url = config.baseUrl + '/Home/GetBuilding/' + selectedKeys[0];
                axios.get(url).then(function (response) {
                    parent.model.building = response.data;
                });
            },
            findBuilding: function (buildings, id) {
                for (var i in buildings) {
                    var item = buildings[i];
                    if (item.id == id) {
                        return item.children;
                    }
                    if (item.children.length > 0) {
                        this.findBuilding(item.children, id);
                    }
                }
            }
        },
        computed: {
            tree: function () {
                return this.model.organ.organ.buildings;
            },
            buildings: function () {
                console.log(this.model.buildingId);
                if (!this.model.buildingId) {
                    return this.model.organ.organ.buildings;
                }
                else {
                    return this.findBuilding(this.model.organ.organ.buildings, this.model.buildingId);
                }
            }
        }
    };
</script>