Former-commit-id: 110010740cc8fed81bd0db1abd8774996f85319e Former-commit-id: 52f1a4c236d368ad8583d1cbc7f2f60494f3c5b71.0
parent
2768abe4e8
commit
6630b2ec8c
@ -1,237 +1,25 @@
|
|||||||
@model Platform.ViewModels.HomeModel
|
@{
|
||||||
@{
|
|
||||||
HideBread = true;
|
HideBread = true;
|
||||||
}
|
<router-view></router-view>
|
||||||
<br />
|
@section scripts{
|
||||||
<div class="row">
|
<script src="~/js/config.js"></script>
|
||||||
<div class="col-2">
|
|
||||||
<div class="card" style="height:calc(100% - 16px);">
|
|
||||||
<div class="card-header">
|
|
||||||
组织机构
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="jstree">
|
|
||||||
<ul>
|
|
||||||
@RenderOrgans(Model.Organs)
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-10">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h5 class="card-title">
|
|
||||||
当前：
|
|
||||||
@Model.Organ.GetDisplayName()
|
|
||||||
@if (Model.BuildingId.HasValue)
|
|
||||||
{
|
|
||||||
<text> / @Model.Building.GetDisplayName()</text>
|
|
||||||
}
|
|
||||||
</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>最大值：@(Model.MaxLight.HasValue?$"{Model.MaxLight.Value} Lux":"无设备")</p>
|
|
||||||
<p>最小值：@(Model.MinLight.HasValue?$"{Model.MinLight.Value} Lux":"无设备")</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>最大值：@(Model.MaxTemperatures.HasValue?$"{Model.MaxTemperatures.Value.ToString("f2")} ℃":"无设备")</p>
|
|
||||||
<p>最小值：@(Model.MinTemperaturest.HasValue?$"{Model.MinTemperaturest.Value.ToString("f2")} ℃":"无设备")</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>最大值：@(Model.MaxHumidity.HasValue?$"{Model.MaxHumidity.Value.ToString("f2")} RH%" :"无设备")</p>
|
|
||||||
<p>最小值：@(Model.MinHumidity.HasValue?$"{Model.MinHumidity.Value.ToString("f2")} 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>开：@(Model.Open.HasValue?$"{Model.Open.Value}":"无设备")</p>
|
|
||||||
<p>关：@(Model.Close.HasValue?$"{Model.Close.Value}":"无设备")</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@if (Model.Scenes.Any())
|
|
||||||
{
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-header">建筑场景</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="row">
|
|
||||||
@foreach (var item in Model.Scenes)
|
|
||||||
{
|
|
||||||
<div class="col-sm-1">
|
|
||||||
<div class="card bg-light p-2">
|
|
||||||
<a class="card-body text-center" href="#" style="padding:0;">
|
|
||||||
<img class="card-img-top" src="@Url.Content2(item.Image)" alt="@item.Name" style="width:48px;height:48px;">
|
|
||||||
<div>@item.Name</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
@if (Model.Buildings.Any())
|
|
||||||
{<div class="card">
|
|
||||||
<div class="card-header">下级建筑</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="row">
|
|
||||||
@foreach (var item in Model.Buildings)
|
|
||||||
{
|
|
||||||
<div class="col-sm-2">
|
|
||||||
<div class="card bg-gray">
|
|
||||||
<div class="card-body bg-gray text-center">
|
|
||||||
<img class="card-img-top" src="@Url.Content2(item.Image)" alt="@item.Name" style="width:64px;height:64px;margin:0 auto;">
|
|
||||||
@*<div class="row">
|
|
||||||
<div class="col-sm-3"></div>
|
|
||||||
</div>*@
|
|
||||||
<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 class="card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h5 class="card-title">设备</h5>
|
|
||||||
<div class="card-tools">
|
|
||||||
<label style="margin:0;">
|
|
||||||
全部：@Html.CheckBoxFor(o => o.ShowAll, new { style = "width:20px;height:20px;vertical-align:bottom;margin-right:10px;" })
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@if (Model.Deviceses.Any())
|
|
||||||
{
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="row">
|
|
||||||
@foreach (var item in Model.Deviceses.OrderBy(o => o.IoTProductId))
|
|
||||||
{
|
|
||||||
try
|
|
||||||
{
|
|
||||||
@await Html.PartialAsync($"/Views/Shared/Device/{item.Icon}.cshtml", item)
|
|
||||||
}
|
|
||||||
catch
|
|
||||||
{
|
|
||||||
@await Html.PartialAsync($"/Views/Shared/Device/default.cshtml", item)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@if (Model.PageCount() > 1)
|
|
||||||
{
|
|
||||||
<div class="card-footer">@(await Html.PartialAsync("_Paged"))</div>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
@functions{
|
|
||||||
object RenderOrgans(List<Organ> list)
|
|
||||||
{
|
|
||||||
foreach (var item in list)
|
|
||||||
{
|
|
||||||
dynamic data = new System.Dynamic.ExpandoObject();
|
|
||||||
data.selected = !Model.BuildingId.HasValue && Model.OrganId.HasValue && item.Id == Model.OrganId.Value;
|
|
||||||
data.opend = true;
|
|
||||||
|
|
||||||
<li data-jstree='@Html.Raw((data as object).ToJson())'>
|
|
||||||
<a href="@Url.Action(null,null,new { organId=item.Id})">@item.Name</a>
|
|
||||||
@if (item.Children.Any() || item.Buildings.Any())
|
|
||||||
{
|
|
||||||
<ul>
|
|
||||||
@if (item.Children.Any())
|
|
||||||
{
|
|
||||||
@RenderOrgans(item.Children)
|
|
||||||
}
|
|
||||||
@if (item.Buildings.Any())
|
|
||||||
{
|
|
||||||
@RenderBuildings(item.Buildings)
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
}
|
|
||||||
</li>
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
object RenderBuildings(List<Building> list)
|
|
||||||
{
|
|
||||||
foreach (var item in list)
|
|
||||||
{
|
|
||||||
dynamic data = new System.Dynamic.ExpandoObject();
|
|
||||||
data.selected = Model.BuildingId.HasValue && item.Id == Model.BuildingId.Value;
|
|
||||||
data.icon = "jstree-file";
|
|
||||||
|
|
||||||
<li data-jstree='@Html.Raw((data as object).ToJson())'>
|
|
||||||
<a href="@Url.Action(null,null,new { buildingId=item.Id})">@item.Name</a>
|
|
||||||
@if (item.Children.Any())
|
|
||||||
{
|
|
||||||
<ul>
|
|
||||||
@if (item.Children.Any())
|
|
||||||
{
|
|
||||||
@RenderBuildings(item.Children)
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
}
|
|
||||||
</li>
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@section scripts{
|
|
||||||
<script src="~/js/home/building.js"></script>
|
|
||||||
<script>
|
<script>
|
||||||
$('#ShowAll').click(function () {
|
config.razor = true;
|
||||||
var url = new URI(window.location.href).removeSearch('showAll').addSearch('showAll', $('#ShowAll:checked').val() ? true : false);
|
</script>
|
||||||
window.location.href = url;
|
<script src="~/js/app.js"></script>
|
||||||
});
|
<script src="~/js/axios.js"></script>
|
||||||
var tree = $('.jstree').on('changed.jstree', function (e, data) {
|
<script src="~/js/form.js"></script>
|
||||||
if (data.event) {
|
<script>
|
||||||
var url = new URI(data.event.currentTarget.href).removeSearch('showAll').addSearch('showAll', $('#ShowAll:checked').val() ? true : false);
|
const app = new Vue({
|
||||||
window.location.href = url;
|
el: '#app',
|
||||||
}
|
router,
|
||||||
else {
|
store: store,
|
||||||
var parents = data.instance.get_node(data.selected).parents;
|
mounted: function () {
|
||||||
for (var i = 0; i < parents.length; i++) {
|
router.push(config.file('components/views/areas/default/devices.vue'))
|
||||||
var item = parents[i];
|
connect();
|
||||||
data.instance.open_node(item);
|
console.log('app start');
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}).jstree();
|
});
|
||||||
</script>
|
</script>
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -1,169 +0,0 @@
|
|||||||
@section bread{
|
|
||||||
<li class="breadcrumb-item"><a href="@Url.Action("Product","Home",new { number=Context.Request.Query["productNumber"]})">产品</a></li>
|
|
||||||
}
|
|
||||||
<div id="template">
|
|
||||||
<template v-if="device">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col" v-if="device">
|
|
||||||
<iot-gateway v-if="device.name==='网关'" v-bind:device="device"></iot-gateway>
|
|
||||||
<iot-light v-else-if="device.name==='光强检测器'" v-bind:device="device"></iot-light>
|
|
||||||
<iot-humiture v-else-if="device.name==='温湿度传感器'" v-bind:device="device"></iot-humiture>
|
|
||||||
<iot-smoke v-else-if="device.name==='烟雾报警器'" v-bind:device="device"></iot-smoke>
|
|
||||||
<iot-person v-else-if="device.name==='人体感应器'" v-bind:device="device"></iot-person>
|
|
||||||
<iot-curtain v-else-if="device.name==='窗帘电机'" v-bind:device="device"></iot-curtain>
|
|
||||||
<iot-switch v-else-if="device.name==='一路开关'" v-bind:device="device"></iot-switch>
|
|
||||||
<iot-switch3 v-else-if="device.name==='三路开关'" v-bind:device="device"></iot-switch3>
|
|
||||||
<iot-socket v-else-if="device.name==='插座'" v-bind:device="device"></iot-socket>
|
|
||||||
<iot-socket v-else-if="device.name==='智能插座'" v-bind:device="device"></iot-socket>
|
|
||||||
<iot-ir v-else-if="device.name==='红外转发器'" v-bind:device="device" v-bind:edit="true"></iot-ir>
|
|
||||||
<iot-color-light v-else-if="device.name==='调色灯'" v-bind:device="device"></iot-color-light>
|
|
||||||
<iot-door v-else-if="device.name==='门锁'" v-bind:device="device"></iot-door>
|
|
||||||
<iot-camera v-else-if="device.name==='摄像头'" v-bind:device="device"></iot-camera>
|
|
||||||
<iot-serial-port v-else-if="device.name==='串口控制器'" v-bind:device="device" v-bind:edit="true"></iot-serial-port>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--折线图-->
|
|
||||||
<div class="row" v-if="hasChart()">
|
|
||||||
<template v-for="data in device.data">
|
|
||||||
<div class="col-md-12" v-if="data.type===10||data.type===20">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3 class="card-title">{{data.name}}(单位：{{data.unit}})</h3>
|
|
||||||
<ul role="tablist" class="nav nav-tabs card-tools">
|
|
||||||
<li class="nav-item"><a href="#tab_11165f469-8f244804008d1500" data-toggle="tab" class="nav-link active" v-on:click="changeTime(data.key,'1d',data.name)">近24小时</a></li>
|
|
||||||
<li class="nav-item"><a href="#tab_21165f469-8f244804008d1500" data-toggle="tab" class="nav-link" v-on:click="changeTime(data.key,'7d',data.name)">近7日</a></li>
|
|
||||||
<li class="nav-item"><a href="#tab_31165f469-8f244804008d1500" data-toggle="tab" class="nav-link" v-on:click="changeTime(data.key,'30d',data.name)">近30日</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<canvas class="chart" style="width:60%;max-width:100%;" :id="device.number+'-'+data.key"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
@section styles{
|
|
||||||
<style>
|
|
||||||
.camera img {
|
|
||||||
width: 32px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
}
|
|
||||||
@section scripts{
|
|
||||||
<script>
|
|
||||||
var baseUrl = '@Url.Content("~")';
|
|
||||||
var hubUrl = "@Url.Content("~")/hub?group=page";
|
|
||||||
var onMessage = null;
|
|
||||||
</script>
|
|
||||||
<script src="~/lib/WXInlinePlayer/prod.all.wasm.combine.js"></script>
|
|
||||||
<script src="~/lib/WXInlinePlayer/index.js"></script>
|
|
||||||
<script src="~/js/util.js"></script>
|
|
||||||
<script src="~/js/iot.js"></script>
|
|
||||||
<script src="~/js/message.js"></script>
|
|
||||||
<script>
|
|
||||||
var app = new Vue({
|
|
||||||
el: '#app',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
title: "产品",
|
|
||||||
url: '/api/v1/product/getProducts',
|
|
||||||
device: null,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted: function () {
|
|
||||||
connect();
|
|
||||||
this.load();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
load: function () {
|
|
||||||
var vm = this;
|
|
||||||
axios.post(baseUrl + '/api/v1/device/getDevice?number=' + new URI().search(true).number).then(function (response) {
|
|
||||||
vm.device = response.data;
|
|
||||||
vm.$nextTick(function () {
|
|
||||||
vm.updateChart();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
updateChart: function () {
|
|
||||||
var dataList = Enumerable.from(this.device.data).where(function (o) {
|
|
||||||
return o.type === 10 || o.type === 20;
|
|
||||||
}).toArray();
|
|
||||||
for (var i = 0; i < dataList.length; i++) {
|
|
||||||
this.changeTime(dataList[i].key, '1d', dataList[i].name);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
changeTime: function (key, time, title) {
|
|
||||||
var vm = this;
|
|
||||||
var url = '/platform/api/v1/Device/GetChartData';
|
|
||||||
var data = {
|
|
||||||
number: this.device.number,
|
|
||||||
key: key,
|
|
||||||
time: time
|
|
||||||
};
|
|
||||||
axios.post(url, data, { crossDomain: true })
|
|
||||||
.then(function (response) {
|
|
||||||
var data = response.data;
|
|
||||||
vm.UpdateChartInternal(key, data, title);
|
|
||||||
console.log('折线图更新成功');
|
|
||||||
})
|
|
||||||
.catch(function (error) {
|
|
||||||
console.log(error);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
UpdateChartInternal(key, data, title) {
|
|
||||||
var canvas = document.getElementById(this.device.number + '-' + key);
|
|
||||||
var chart;
|
|
||||||
Chart.helpers.each(Chart.instances, function (instance) {
|
|
||||||
if (instance.chart.canvas.id === canvas.id) {
|
|
||||||
chart = instance;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (chart) {
|
|
||||||
chart.data = data;
|
|
||||||
chart.update();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
var ctx = canvas.getContext('2d');
|
|
||||||
var options = {
|
|
||||||
responsive: true,
|
|
||||||
legend: {
|
|
||||||
position: 'bottom'
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
display: false,
|
|
||||||
text: title
|
|
||||||
},
|
|
||||||
animation: {
|
|
||||||
duration: 0
|
|
||||||
}
|
|
||||||
};
|
|
||||||
chart = new Chart(ctx, {
|
|
||||||
type: 'line',
|
|
||||||
data: data,
|
|
||||||
options: options
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
hasChart: function () {
|
|
||||||
var o = this.device;
|
|
||||||
return o.name === '温湿度传感器' || o.name === 'PM2.5感应器' || o.name === '光强检测器' || o.name === '智能插座';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
onMessage = function (method, json, to, from) {
|
|
||||||
console.log(method + ":" + json);
|
|
||||||
var item = JSON.parse(json);
|
|
||||||
if (method === 'IoTDataEntityInserted' ||
|
|
||||||
method === 'IoTDataEntityUpdated' ||
|
|
||||||
method === 'IoTDataEntityDeleted') {
|
|
||||||
if (app.device.id === item.deviceId) {
|
|
||||||
updateById(app.device.data, item);
|
|
||||||
app.updateChart();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
}
|
|
||||||
@ -1,162 +0,0 @@
|
|||||||
@{
|
|
||||||
HideBread = true;
|
|
||||||
}
|
|
||||||
<br />
|
|
||||||
<template v-if="product">
|
|
||||||
<div class="row mb-2">
|
|
||||||
<div class="col-sm-6">
|
|
||||||
<h1>{{product.name}}</h1>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6">
|
|
||||||
<ol class="breadcrumb float-sm-right">
|
|
||||||
<li class="breadcrumb-item"><a href="/">产品列表</a></li>
|
|
||||||
<li class="breadcrumb-item active">{{product.name}}</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-12" v-if="HasBatchCommand()">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-header">
|
|
||||||
<div class="card-title">
|
|
||||||
<input type="checkbox" id="All" class="checkall" v-on:change="SelectDevice($event)" />
|
|
||||||
<label for="All" class="btn btn-sm btn-info" style="height:31px;margin-bottom:0;">全选</label>
|
|
||||||
<button class="btn btn-sm btn-info uncheck" v-on:click="SelectDevice($event)">反选</button>
|
|
||||||
</div>
|
|
||||||
<div class="card-tools">
|
|
||||||
<button class="btn btn-success" v-on:click="CallApiAll('On')">开</button>
|
|
||||||
<button class="btn btn-success" v-on:click="CallApiAll('Stop')" v-if="product.name.indexOf('窗帘电机')>=0">停</button>
|
|
||||||
<button class="btn btn-success" v-on:click="CallApiAll('Off')">关</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-2 col-sm-4 col-xs-6" v-for="item in GetDevices()">
|
|
||||||
<div class="card" debug="12021508">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3 class="card-title">
|
|
||||||
<label style="font-weight:normal;"><input type="checkbox" name="numbers[]" class="item" :value="item.number" v-if="HasBatchCommand()" v-on:change="SelectDevice($event)">{{item.name}}</label>
|
|
||||||
</h3>
|
|
||||||
<template v-if="HasBatchCommand()">
|
|
||||||
<div class="card-tools"> {{GetDataValue(item.number,'状态')}}</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<a class="card-body" :href="'@Url.Content("~")/Home/Device?number='+item.number+'&productNumber='+product.number" style="display:block;text-align:center;">
|
|
||||||
<img :alt="item.name" :src="urlContent(product.image)" style="margin:0 auto;max-width:64px;" />
|
|
||||||
</a>
|
|
||||||
<!-- 设备信息 Start -->
|
|
||||||
|
|
||||||
<div class="card-body" style="font-size: 12px;" v-if="item.name === '温湿度传感器'">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-4">温度</div>
|
|
||||||
<div class="col-md-8">{{GetDataValue(item.number,'温度')}} {{GetDeviceDataAttr(item.number,'温度','Unit')}} {{GetDeviceDataAttr(item.number,'温度','description')}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-4">湿度</div>
|
|
||||||
<div class="col-md-8">{{GetDataValue(item.number,'湿度')}} {{GetDeviceDataAttr(item.number,'湿度','Unit')}} {{GetDeviceDataAttr(item.number,'湿度','description')}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 设备信息 End -->
|
|
||||||
<div class="card-footer">
|
|
||||||
{{item.node.name}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@section scripts{
|
|
||||||
<script>
|
|
||||||
var baseUrl = '@Url.Content("~")';
|
|
||||||
var hubUrl = "@Url.Content("~")/hub?group=page";
|
|
||||||
var onMessage = null;
|
|
||||||
</script>
|
|
||||||
<script src="~/lib/WXInlinePlayer/index.js"></script>
|
|
||||||
<script src="~/js/util.js"></script>
|
|
||||||
<script src="~/js/iot.js"></script>
|
|
||||||
<script src="~/js/message.js"></script>
|
|
||||||
<script>
|
|
||||||
var app = new Vue({
|
|
||||||
el: '#app',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
title: "产品",
|
|
||||||
url: '/api/v1/product/getProducts',
|
|
||||||
product: null,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted: function () {
|
|
||||||
connect();
|
|
||||||
this.load();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
load: function () {
|
|
||||||
var vm = this;
|
|
||||||
axios.post(baseUrl + '/api/v1/product/getProduct?number=' + new URI().search(true).number).then(function (response) {
|
|
||||||
vm.product = response.data;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
HasBatchCommand() {
|
|
||||||
return this.product.name === '调色灯'
|
|
||||||
|| this.product.name.indexOf('窗帘电机') >= 0
|
|
||||||
|| this.product.name.indexOf('开关') >= 0
|
|
||||||
|| this.product.name.indexOf('插座') >= 0;
|
|
||||||
},
|
|
||||||
GetDevices() {
|
|
||||||
return Enumerable.from(this.product.devices).orderBy(function (o) { return o.Order; }).orderBy(function (o) { return o.name; }).toArray();
|
|
||||||
},
|
|
||||||
GetDataValue(number, name) {
|
|
||||||
var device = Enumerable.from(this.product.devices)
|
|
||||||
.where(function (o) { return o.number === number; })
|
|
||||||
.firstOrDefault();
|
|
||||||
if (device !== null) {
|
|
||||||
var data = Enumerable.from(device.data)
|
|
||||||
.where(function (o) { return o.name === name; })
|
|
||||||
.firstOrDefault();
|
|
||||||
if (data) {
|
|
||||||
return data.value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
GetDeviceDataAttr(number, name, attr) {
|
|
||||||
var device = Enumerable.from(this.product.devices).where(function (o) { return o.number === number; }).firstOrDefault();
|
|
||||||
var data = Enumerable.from(device.data).where(o => o.name === name).firstOrDefault();
|
|
||||||
if (data !== null) {
|
|
||||||
return data[attr];
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
SelectDevice: Select,
|
|
||||||
CallApiAll(method) {
|
|
||||||
var numbers = [];
|
|
||||||
$('.item:checked').each(function () {
|
|
||||||
numbers.push($(this).val());
|
|
||||||
});
|
|
||||||
if (numbers.length) {
|
|
||||||
for (var i = 0; i < numbers.length; i++) {
|
|
||||||
execApi(numbers[i], this.product.path + method, null);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
toastr.error('没有选中任何项');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
onMessage = function (method, json, to, from) {
|
|
||||||
var item = JSON.parse(json);
|
|
||||||
if (method === 'IoTDeviceEntityInserted' ||
|
|
||||||
method === 'IoTDeviceEntityUpdated' ||
|
|
||||||
method === 'IoTDeviceEntityDeleted') {
|
|
||||||
loadData();
|
|
||||||
}
|
|
||||||
else if (method === 'DataEntityInserted' ||
|
|
||||||
method === 'IoTDataEntityUpdated' ||
|
|
||||||
method === 'IoTDataEntityDeleted') {
|
|
||||||
var device = Enumerable.from(app.product.devices).firstOrDefault(function (o) { return o.id === item.deviceId; });
|
|
||||||
if (device) {
|
|
||||||
updateById(device.data, item);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
}
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
@section scripts{
|
|
||||||
<script>
|
|
||||||
config.group = "page";
|
|
||||||
var model = {a:'123'};
|
|
||||||
const app = new Vue({
|
|
||||||
el: '#app',
|
|
||||||
data: {
|
|
||||||
model: model
|
|
||||||
},
|
|
||||||
mounted : function () {
|
|
||||||
if (!this.model) {
|
|
||||||
this.load();
|
|
||||||
}
|
|
||||||
alert(this.model);
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
load: function () {
|
|
||||||
this.model = { a: '456' };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue