|
|
|
@ -4,7 +4,9 @@
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="card-header">建筑列表</div>
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<a-tree :tree-data="tree"
|
|
|
|
|
<a-tree ref="tree"
|
|
|
|
|
auto-expand-parent="true"
|
|
|
|
|
:tree-data="tree"
|
|
|
|
|
:default-expanded-keys="expanded"
|
|
|
|
|
:replace-fields="{title:'name',key:'id'}"
|
|
|
|
|
block-node
|
|
|
|
@ -74,7 +76,7 @@
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
{{model.organ.minTemperature}}
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
℃
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
@ -103,7 +105,7 @@
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
{{model.organ.minHumidity}}
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
RH%"
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
@ -138,7 +140,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="card" v-if="buildings.length>0">
|
|
|
|
|
<div class="card-header">下级建筑</div>
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<div class="row">
|
|
|
|
@ -147,15 +149,27 @@
|
|
|
|
|
<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>
|
|
|
|
|
<a class="btn btn-block btn-primary btn-sm" v-on:click="selectBuilding(item.id)" href="javascript:;">{{item.name}}</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card">
|
|
|
|
|
|
|
|
|
|
<div class="card" v-if="scenes.length>0">
|
|
|
|
|
<div class="card-header">场景</div>
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-sm-1" v-for="item in scenes">
|
|
|
|
|
<div class="card bg-light p-2">
|
|
|
|
|
<a class="card-body text-center" href="#" style="padding:0;">
|
|
|
|
|
<img class="card-img-top" :src="item.image" :alt="item.name" style="width:64px;height:64px;margin:0 auto;">
|
|
|
|
|
<div>{{item.name}}</div>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -168,7 +182,7 @@
|
|
|
|
|
model: {
|
|
|
|
|
organ: null,
|
|
|
|
|
building: null,
|
|
|
|
|
expanded:[],
|
|
|
|
|
expanded: [],
|
|
|
|
|
},
|
|
|
|
|
events: ['OrganEntityInserted',
|
|
|
|
|
'OrganEntityUpdated',
|
|
|
|
@ -198,20 +212,29 @@
|
|
|
|
|
parent.model.organ = response.data;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
onSelect(selectedKeys, info) {
|
|
|
|
|
var parent = this;
|
|
|
|
|
var key = selectedKeys[0];
|
|
|
|
|
if (key === this.model.organ.organ.id) {
|
|
|
|
|
this.model.building = null;
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
var url = config.baseUrl + '/Home/GetBuilding/' + key;
|
|
|
|
|
axios.get(url).then(function (response) {
|
|
|
|
|
parent.model.building = response.data;
|
|
|
|
|
});
|
|
|
|
|
selectBuilding: function (id) {
|
|
|
|
|
var keys = [id];
|
|
|
|
|
this.$refs.tree.selectedKeys = keys;
|
|
|
|
|
this.$refs.tree.expandedKeys = keys;
|
|
|
|
|
this.onSelect(keys);
|
|
|
|
|
},
|
|
|
|
|
onSelect: function (selectedKeys, info) {
|
|
|
|
|
if (selectedKeys.length > 0) {
|
|
|
|
|
this.$refs.tree.selectedKeys = selectedKeys;
|
|
|
|
|
var parent = this;
|
|
|
|
|
var id = selectedKeys[0];
|
|
|
|
|
if (id === this.model.organ.organ.id) {
|
|
|
|
|
this.model.building = null;
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
var url = config.baseUrl + '/Home/GetBuilding/' + id;
|
|
|
|
|
axios.get(url).then(function (response) {
|
|
|
|
|
parent.model.building = response.data;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
findBuildings: function (buildings,id) {
|
|
|
|
|
findBuildings: function (buildings, id) {
|
|
|
|
|
for (var i in buildings) {
|
|
|
|
|
var item = buildings[i];
|
|
|
|
|
if (item.id == id) {
|
|
|
|
@ -228,14 +251,14 @@
|
|
|
|
|
var result = [];
|
|
|
|
|
if (this.model.organ != null) {
|
|
|
|
|
result.push({
|
|
|
|
|
id:this.model.organ.organ.id,
|
|
|
|
|
name:this.model.organ.organ.name,
|
|
|
|
|
id: this.model.organ.organ.id,
|
|
|
|
|
name: this.model.organ.organ.name,
|
|
|
|
|
children: this.model.organ.organ.buildings
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
return result;
|
|
|
|
|
},
|
|
|
|
|
expanded : function () {
|
|
|
|
|
expanded: function () {
|
|
|
|
|
var result = [];
|
|
|
|
|
if (this.model.organ != null) {
|
|
|
|
|
result.push(this.model.organ.organ.id);
|
|
|
|
@ -243,13 +266,19 @@
|
|
|
|
|
return result;
|
|
|
|
|
},
|
|
|
|
|
buildings: function () {
|
|
|
|
|
//console.log(this.model.buildingId);
|
|
|
|
|
if (!this.model.building) {
|
|
|
|
|
return this.model.organ.organ.buildings;
|
|
|
|
|
if (this.model.building) {
|
|
|
|
|
return this.findBuildings(this.model.organ.organ.buildings, this.model.building.building.id);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
return this.findBuildings(this.model.organ.organ.buildings,this.model.building.building.id);
|
|
|
|
|
return this.model.organ.organ.buildings;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
scenes: function () {
|
|
|
|
|
var result = [];
|
|
|
|
|
if (this.model.building) {
|
|
|
|
|
result = Enumerable.from(this.model.building.building.scenes).orderBy(o => o.displayOrder).toArray();
|
|
|
|
|
}
|
|
|
|
|
return result;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|