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.
161 lines
9.6 KiB
161 lines
9.6 KiB
@model Node
|
|
@{
|
|
Layout = null;
|
|
HtmlTitle = Model?.Name;
|
|
HideBread = true;
|
|
var isNode = this.ViewContext.ActionDescriptor.DisplayName.Contains("IoTNode");
|
|
}
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>@HtmlTitle-设备列表</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="theme-color" content="#2196f3">
|
|
<link rel="stylesheet" href="~/lib/framework7/css/framework7.bundle.min.css">
|
|
<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.min.css">
|
|
<link rel="stylesheet" href="~/css/iot.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="view view-main view-init">
|
|
<div class="page">
|
|
<div class="navbar">
|
|
<div class="navbar-inner sliding">
|
|
<div class="left">
|
|
<a href="/@(isNode?"":$"Home/Node/{Model.Id}")" class="link external" data-panel="left">控制面板</a>
|
|
</div>
|
|
<div class="title">{{model.Name}}-设备列表</div>
|
|
<div class="right">
|
|
<a href="javascript: ;" id="volumeup"><i class="fa fa-volume-up"></i></a>
|
|
<a href="javascript: ;" id="volumeoff"><i class="fa fa-volume-off"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="page-content">
|
|
<div class="card" v-for="device in _.orderBy(model.Devices,['CategoryName','DisplayOrder','Name'])">
|
|
<div class="card-header">
|
|
<div class="left">
|
|
<img style="display:inline;height:1em;" :src="'/iot/'+device.Icon+'.png'" />{{device.DisplayName}}
|
|
<i :class="device.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="device.IsOnline?'color:green;':'color:red;'"></i>
|
|
</div>
|
|
<div class="right">
|
|
<a class="link external" :href="'/Device/Details/'+device.Id">查看</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="block-title">设备数据</div>
|
|
<div class="list">
|
|
<ul>
|
|
<li v-for="data in device.Data">
|
|
<div class="item-content" v-if="data.Name!='hidden'">
|
|
<div :class="'item-media'+' '+data.Key"><i class="icon icon-f7"></i></div>
|
|
<div class="item-inner">
|
|
<div class="item-title">{{data.Name}}</div>
|
|
<div class="item-after">{{data.Value}} {{data.Unit}} {{data.Description}}</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card-content" v-if="isAdmin">
|
|
<div class="block-title">设备控制</div>
|
|
<div class="block">
|
|
<div class="row">
|
|
<div class="col" v-for="api in _.orderBy(device.Apis,['Command'])">
|
|
<form method="get" action="/Command/Exec">
|
|
<input type="hidden" name="cmd" :value="api.Command" />
|
|
<input type="hidden" name="node" :value="model.Number" />
|
|
<input type="hidden" name="id" :value="device.Id" />
|
|
<div class="row">
|
|
<template v-for="parameter in api.Parameters">
|
|
<template v-if="parameter.Name!='hidden'">
|
|
<template v-if="isSelect(device,parameter.Name)">
|
|
<div class="col">
|
|
<select :name="parameter.Name" style="height:29px;" data-val="true" data-val-required="请选择">
|
|
<option value="">请选择</option>
|
|
<option v-for="option in getSelect(device,parameter.Name)" :value="option.value">{{option.text}}</option>
|
|
</select>
|
|
<span class="field-validation-valid text-danger" :data-valmsg-for="parameter.Name" data-valmsg-replace="true"> </span>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="col">
|
|
<template v-if="parameter.Minimum||parameter.Maximnu">
|
|
<input :name="parameter.Name" :value="getData(device,parameter.Name)" data-val="true" data-val-required="请输入"
|
|
data-val-number="必须输入数字" :data-val-range="'范围:'+parameter.Minimum+'~'+parameter.Maximnu" :data-val-range-min="parameter.Minimum" :data-val-range-max="parameter.Maximnu"
|
|
style="height:29px;" type="text" :placeholder="'请输入'+parameter.Description" />
|
|
</template>
|
|
<template v-else>
|
|
<input :name="parameter.Name" :value="getData(device,parameter.Name)" data-val="true" data-val-required="请输入"
|
|
style="height:29px;" type="text" :placeholder="'请输入'+parameter.Description" />
|
|
</template>
|
|
<span class="field-validation-valid text-danger" :data-valmsg-for="parameter.Name" data-valmsg-replace="true"> </span>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
<div class="col">
|
|
<button class="button button-fill button-outline" type="submit">{{api.Name}}</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="callback" class="popup popup-tablet-fullscreen">
|
|
<div class="page">
|
|
<div class="navbar">
|
|
<div class="navbar-inner">
|
|
<div class="left"></div>
|
|
<div class="title">API调用结果</div>
|
|
<div class="right"><a href="#" class="link popup-close">关闭</a></div>
|
|
</div>
|
|
</div>
|
|
<div class="page-content">
|
|
<div class="block">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<audio id="alarm" muted style="display:none;" src="~/iot/warning.wav"></audio>
|
|
<script src="~/lib/isMobile/isMobile.js"></script>
|
|
<script src="~/lib/jquery/jquery.min.js"></script>
|
|
<script src="~/lib/lodash/lodash.min.js"></script>
|
|
<script src="~/lib/framework7/js/framework7.bundle.min.js"></script>
|
|
<script src="~/lib/clappr/clappr.min.js"></script>
|
|
<script src="~/lib/clappr/clappr-rtmp-plugin/rtmp.min.js"></script>
|
|
<script src="~/lib/flv.js/flv.min.js"></script>
|
|
<script src="~/lib/hls.js/hls.min.js"></script>
|
|
<script src="~/lib/vue/vue.min.js"></script>
|
|
<script src="~/lib/signalr/signalr.min.js"></script>
|
|
<script src="~/lib/jquery-validation/jquery.validate.min.js"></script>
|
|
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
|
|
<script>
|
|
var isNode =@(isNode?"true":"false");
|
|
var isList = true;
|
|
var updateUrl = '/Home/GetNode/@Model.Id';
|
|
var wsUrl = '/hub?group=page';
|
|
var isAdmin=@(User.IsInRole("EditDevice")?"true":"false");
|
|
var model = {
|
|
Name: '',
|
|
Scenes: [],
|
|
Devices: []
|
|
};
|
|
function load() {
|
|
$.getJSON(updateUrl, function (response) {
|
|
vm.model = response;
|
|
});
|
|
}
|
|
</script>
|
|
<script src="~/js/iot.js"></script>
|
|
</body>
|
|
</html> |