wanggang
/
iot
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'ce2600d7e6'
${ noResults }
iot/projects/IoT/IoT.Shared/Views/Home/Node.cshtml

459 lines
31 KiB
Raw Blame History

@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 ? "Admin" : "")" class="link external" data-panel="left">@(isNode ? "管理" : "首页")</a>
</div>
<div class="title">{{model.Name}}-控制面板</div>
<div class="right"><a href="@Url.Action("Index","Device",new { id=Model.Id})" class="link external">设备列表</a></div>
</div>
</div>
<div class="page-content">
<div class="card" v-if="model.Sences.length>0">
<div class="card-header">
<div class="left">
场景
</div>
</div>
<div class="card-content">
<div class="row">
<div class="col" v-for="sence in _.orderBy(model.Sences,['DisplayOrder','Name'])">
<div><a href="javascript: ;" v-on:click="sendSence(sence.Id)" v-if="isAdmin"><img class="btn" src="~/iot/button.png" /></a></div>
<div class="btn">{{sence.Name}} </div>
</div>
</div>
</div>
</div>
<div class="card" v-if="getCount('温湿度检测器','二氧化碳监测器','光强检测器','粉尘检测器','烟雾感应器','红外感应器')>0">
<div class="card-header">
<div class="left">
监测
</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 class="card-content">
<div class="row">
<div class="col" v-for="d in getDevices('温湿度检测器')">
<div><img class="icon" src="~/iot/temperature.png" /></div>
<div><i :class="d.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="d.IsOnline?'color:green;':'color:red;'"></i></div>
<div>{{getDeviceDataValue(d,"温度")}} {{getDeviceDataValue(d,"湿度")}}</div>
</div>
<div class="col" v-for="d in getDevices('二氧化碳监测器')">
<div><img class="icon" :src="'/iot/'+d.Icon+'.png'" /></div>
<div><i :class="d.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="d.IsOnline?'color:green;':'color:red;'"></i></div>
<div>{{getDeviceDataValue(d,"二氧化碳")}}</div>
</div>
<div class="col" v-for="d in getDevices('光强检测器')">
<div><img class="icon" :src="'/iot/'+d.Icon+'.png'" /></div>
<div><i :class="d.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="d.IsOnline?'color:green;':'color:red;'"></i></div>
<div>{{getDeviceDataValue(d,"光照强度")}}</div>
</div>
<div class="col" v-for="d in getDevices('粉尘检测器')">
<div><img class="icon" :src="'/iot/'+d.Icon+'.png'" /></div>
<div><i :class="d.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="d.IsOnline?'color:green;':'color:red;'"></i></div>
<div>{{getDeviceDataValue(d,"粉尘")}}</div>
</div>
<div class="col" v-for="d in getDevices('烟雾感应器')">
<div><img class="icon" :src="'/iot/'+d.Icon+'.png'" /></div>
<div><i :class="d.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="d.IsOnline?'color:green;':'color:red;'"></i></div>
<div>{{getDeviceDataValue(d,"状态")}} </div>
</div>
<div class="col" v-for="d in getDevices('红外感应器')">
<div><img class="icon" :src="'/iot/'+d.Icon+'.png'" /></div>
<div><i :class="d.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="d.IsOnline?'color:green;':'color:red;'"></i></div>
<div>{{getDeviceDataValue(d,"状态")}}</div>
</div>
</div>
</div>
</div>
<div class="card" v-if="getCount('主机')">
<div class="card-header">
<div class="left">
主机
</div>
<div class="right" v-if="isAdmin">
<a href="javascript: ;" v-on:click="sendAll('主机','21boot')"><img class="btn" src="~/iot/on.png" /></a>
<a href="javascript: ;" v-on:click="sendAll('主机','22shutdown')"><img class="btn" src="~/iot/off.png" /></a>
</div>
</div>
<div class="card-content">
<div class="row">
<div class="col" v-for="d in getDevices('主机')">
<div><img class="icon" src="~/iot/pc.png" /></div>
<div><i :class="d.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="d.IsOnline?'color:green;':'color:red;'"></i></div>
<div>
<div>{{getDeviceDataValue(d,"计算机名")}}</div>
<div>{{getDeviceDataValue(d,"操作系统")}}</div>
<div>CPU {{getDeviceDataValue(d,"CPU")}} 内存 {{getDeviceDataValue(d,"内存")}}</div>
<div>{{getDeviceDataValue(d,"IP")}}</div>
<div>发送：{{getDeviceDataValue(d,"发送")}} 接收{{getDeviceDataValue(d,"接收")}}</div>
</div>
<div v-if="isAdmin">
<a href="javascript: ;" v-on:click="send(d.Id,'21boot')"><img class="btn" src="~/iot/on.png" /></a>
<a href="javascript: ;" v-on:click="send(d.Id,'23shot')"><img class="btn" src="~/iot/shot.png" /></a>
<a href="javascript: ;" v-on:click="send(d.Id,'22shutdown')"><img class="btn" src="~/iot/off.png" /></a>
</div>
</div>
</div>
</div>
</div>
<div class="card" v-if="getCount('AP')">
<div class="card-header">
<div class="left">
AP
</div>
</div>
<div class="card-content">
<div class="row">
<div class="col" v-for="d in getDevices('AP')">
<div><img class="icon" src="~/iot/ap.png" /></div>
<div><i :class="d.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="d.IsOnline?'color:green;':'color:red;'"></i></div>
<div>{{getDeviceDataValue(d,"名称")}}</div>
<div>
<div>CPU {{getDeviceDataValue(d,"CPU")}} 内存 {{getDeviceDataValue(d,"内存")}} 连接数：{{getDeviceDataValue(d,"连接数")}}</div>
<div>IP {{getDeviceDataValue(d,"IP")}} 子网掩码 {{getDeviceDataValue(d,"子网掩码")}} 网关 {{getDeviceDataValue(d,"网关")}} DNS {{getDeviceDataValue(d,"DNS")}}</div>
<div class="row" v-if="isAdmin">
<a class="col button button-fill" href="javascript: ;" v-on:click="send(d.Id,'21dhcps')">在线IP</a>
<a class="col button button-fill" href="javascript: ;" v-on:click="send(d.Id,'22getnet')">网络信息</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card" v-if="getCount('一路可调窗帘')">
<div class="card-header">
<div class="left">
窗帘
</div>
<div class="right" v-if="isAdmin">
<a href="javascript: ;" v-on:click="sendAll('一路可调窗帘','21on')"><img class="btn" src="~/iot/left.png" /></a>
<a href="javascript: ;" v-on:click="sendAll('一路可调窗帘','23stop')"><img class="btn" src="~/iot/stop.png" /></a>
<a href="javascript: ;" v-on:click="sendAll('一路可调窗帘','22off')"><img class="btn" src="~/iot/right.png" /></a>
</div>
</div>
<div class="row">
<div class="col" v-for="d in getDevices('一路可调窗帘')">
<div><img class="icon" :src="'/iot/'+d.Icon+'.png'" /></div>
<div><i :class="d.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="d.IsOnline?'color:green;':'color:red;'"></i></div>
<div>{{d.DisplayName}} {{getDeviceDataValue(d,"状态")}}</div>
<div v-if="isAdmin">
<a href="javascript: ;" v-on:click="send(d.Id,'21on')"><img class="btn" src="~/iot/left.png" /></a>
<a href="javascript: ;" v-on:click="send(d.Id,'23stop')"><img class="btn" src="~/iot/stop.png" /></a>
<a href="javascript: ;" v-on:click="send(d.Id,'22off')"><img class="btn" src="~/iot/right.png" /></a>
</div>
</div>
</div>
</div>
<div class="card" v-if="getCount('一路照明开关')+getCount('三路照明开关')+getCount('计量开关')+getCount('二路灯开关')+getCount('一路插座')+getCount('二路插座')>0">
<div class="card-header">
<div class="left">
开关
</div>
<div class="right" v-if="isAdmin">
<a href="javascript: ;" v-on:click="sendGroup('开关','21on')"><img class="btn" src="~/iot/on.png" /></a>
<a href="javascript: ;" v-on:click="sendGroup('开关','22off')"><img class="btn" src="~/iot/off.png" /></a>
</div>
</div>
<div class="row">
<div class="col" v-for="d in getDevices('计量开关')">
<div><img class="icon" :src="'/iot/'+d.Icon+'.png'" /></div>
<div><i :class="d.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="d.IsOnline?'color:green;':'color:red;'"></i></div>
<div>{{d.DisplayName}} {{getDeviceDataValue(d,"状态")}}</div>
<div v-if="isAdmin">
<a href="javascript: ;" v-if="getDeviceDataValue(d,'状态')==='关'" v-on:click="send(d.Id,'21on')"><img class="btn" src="~/iot/off.png" /></a>
<a href="javascript: ;" v-else v-on:click="send(d.Id,'22off')"><img class="btn" src="~/iot/on.png" /></a>
</div>
</div>
</div>
<div class="row">
<div class="col" v-for="d in getDevices('一路照明开关')">
<div><img class="icon" :src="'/iot/'+d.Icon+'.png'" /></div>
<div><i :class="d.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="d.IsOnline?'color:green;':'color:red;'"></i></div>
<div>{{d.DisplayName}} {{getDeviceDataValue(d,"状态")}}</div>
<div v-if="isAdmin">
<a href="javascript: ;" v-if="getDeviceDataValue(d,'状态')==='关'" v-on:click="send(d.Id,'21on')"><img class="btn" src="~/iot/off.png" /></a>
<a href="javascript: ;" v-else v-on:click="send(d.Id,'22off')"><img class="btn" src="~/iot/on.png" /></a>
</div>
</div>
</div>
<div class="row">
<div class="col" v-for="d in getDevices('二路灯开关')">
<div><img class="icon" :src="'/iot/'+d.Icon+'.png'" /></div>
<div><i :class="d.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="d.IsOnline?'color:green;':'color:red;'"></i></div>
<div>{{d.DisplayName}}</div>
<div v-if="isAdmin">
<a href="javascript: ;" v-on:click="send(d.Id,'21on')"><img class="btn" src="~/iot/on.png" /></a>
<a href="javascript: ;" v-on:click="send(d.Id,'22off')"><img class="btn" src="~/iot/off.png" /></a>
</div>
<div v-if="isAdmin">
<a v-if="getDeviceDataValue(d,'L1状态')==='关'" v-on:click="send(d.Id,'23l1on')"><img class="btn" src="~/iot/off.png" /></a>
<a v-else v-on:click="send(d.Id,'24l1off')"><img class="btn" src="~/iot/on.png" /></a>
<a v-if="getDeviceDataValue(d,'L2状态')==='关'" v-on:click="send(d.Id,'25l2on')"><img class="btn" src="~/iot/off.png" /></a>
<a v-else v-on:click="send(d.Id,'26l2off')"><img class="btn" src="~/iot/on.png" /></a>
</div>
</div>
</div>
<div class="row">
<div class="col" v-for="d in getDevices('三路照明开关')">
<div><img class="icon" :src="'/iot/'+d.Icon+'.png'" /></div>
<div><i :class="d.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="d.IsOnline?'color:green;':'color:red;'"></i></div>
<div>{{d.DisplayName}}</div>
<div v-if="isAdmin">
<a href="javascript: ;" v-on:click="send(d.Id,'21on')"><img class="btn" src="~/iot/on.png" /></a>
<a href="javascript: ;" v-on:click="send(d.Id,'22off')"><img class="btn" src="~/iot/off.png" /></a>
</div>
<div v-if="isAdmin">
<a v-if="getDeviceDataValue(d,'状态4')==='关'" v-on:click="send(d.Id,'23on')"><img class="btn" src="~/iot/off.png" /></a>
<a v-else v-on:click="send(d.Id,'24off')"><img class="btn" src="~/iot/on.png" /></a>
<a v-if="getDeviceDataValue(d,'状态5')==='关'" v-on:click="send(d.Id,'25on')"><img class="btn" src="~/iot/off.png" /></a>
<a v-else v-on:click="send(d.Id,'26off')"><img class="btn" src="~/iot/on.png" /></a>
<a v-if="getDeviceDataValue(d,'状态6')==='关'" v-on:click="send(d.Id,'27on')"><img class="btn" src="~/iot/off.png" /></a>
<a v-else v-on:click="send(d.Id,'28off')"><img class="btn" src="~/iot/on.png" /></a>
</div>
</div>
</div>
</div>
<div class="card" v-if="getCount('墙面插座')">
<div class="card-header">
<div class="left">
插座
</div>
<div class="right" v-if="isAdmin">
<a href="javascript: ;" v-on:click="sendAll('墙面插座','21on')"><img class="btn" src="~/iot/on.png" /></a>
<a href="javascript: ;" v-on:click="sendAll('墙面插座','22off')"><img class="btn" src="~/iot/off.png" /></a>
</div>
</div>
<div class="row">
<div class="col" v-for="d in getDevices('墙面插座')">
<div><img class="icon" :src="'/iot/'+d.Icon+'.png'" /></div>
<div><i :class="d.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="d.IsOnline?'color:green;':'color:red;'"></i></div>
<div>{{d.DisplayName}} {{getDeviceDataValue(d,"状态")}}</div>
<div v-if="isAdmin">
<a href="javascript: ;" v-if="getDeviceDataValue(d,'状态')==='关'" v-on:click="send(d.Id,'21on')"><img class="btn" src="~/iot/off.png" /></a>
<a href="javascript: ;" v-else v-on:click="send(d.Id,'22off')"><img class="btn" src="~/iot/on.png" /></a>
</div>
</div>
</div>
</div>
<div class="card" v-if="getCount('一路插座')">
<div class="card-header">
<div class="left">
插座
</div>
<div class="right" v-if="isAdmin">
<a href="javascript: ;" v-on:click="sendAll('一路插座','21on')"><img class="btn" src="~/iot/on.png" /></a>
<a href="javascript: ;" v-on:click="sendAll('一路插座','22off')"><img class="btn" src="~/iot/off.png" /></a>
</div>
</div>
<div class="row">
<div class="col" v-for="d in getDevices('一路插座')">
<div><img class="icon" :src="'/iot/'+d.Icon+'.png'" /></div>
<div><i :class="d.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="d.IsOnline?'color:green;':'color:red;'"></i></div>
<div>{{d.DisplayName}} {{getDeviceDataValue(d,"状态")}}</div>
<div v-if="isAdmin">
<a href="javascript: ;" v-if="getDeviceDataValue(d,'状态')==='关'" v-on:click="send(d.Id,'21on')"><img class="btn" src="~/iot/off.png" /></a>
<a href="javascript: ;" v-else v-on:click="send(d.Id,'22off')"><img class="btn" src="~/iot/on.png" /></a>
</div>
</div>
</div>
</div>
<div class="card" v-if="getCount('二路插座')">
<div class="card-header">
<div class="left">
插座
</div>
<div class="right" v-if="isAdmin">
<a href="javascript: ;" v-on:click="sendAll('二路插座','21on')"><img class="btn" src="~/iot/on.png" /></a>
<a href="javascript: ;" v-on:click="sendAll('二路插座','22off')"><img class="btn" src="~/iot/off.png" /></a>
</div>
</div>
<div class="row">
<div class="col" v-for="d in getDevices('二路插座')">
<div><img class="icon" :src="'/iot/'+d.Icon+'.png'" /></div>
<div><i :class="d.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="d.IsOnline?'color:green;':'color:red;'"></i></div>
<div>{{d.DisplayName}} {{getDeviceDataValue(d,"状态")}}</div>
<div v-if="isAdmin">
<a href="javascript: ;" v-if="getDeviceDataValue(d,'状态')==='关'" v-on:click="send(d.Id,'21on')"><img class="btn" src="~/iot/off.png" /></a>
<a href="javascript: ;" v-else v-on:click="send(d.Id,'22off')"><img class="btn" src="~/iot/on.png" /></a>
</div>
</div>
</div>
</div>
<div class="card" v-if="getCount('密码门锁')">
<div class="card-header">
<div class="left">
门锁
</div>
<div class="right" v-if="isAdmin">
<a href="javascript: ;" v-on:click="sendAll('密码门锁','21open')"><img class="btn" src="~/iot/open.png" /></a>
</div>
</div>
<div class="row">
<div class="col" v-for="d in getDevices('密码门锁')">
<div><img class="icon" :src="'/iot/'+d.Icon+'.png'" /></div>
<div><i :class="d.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="d.IsOnline?'color:green;':'color:red;'"></i></div>
<div>{{d.DisplayName}} {{getDeviceDataValue(d,"状态")}}</div>
<div v-if="isAdmin">
<a href="javascript: ;" v-on:click="send(d.Id,'21open')"><img class="btn" src="~/iot/open.png" /></a>
</div>
</div>
</div>
</div>
<div class="card" v-if="getCount('红外转发器')">
<div class="card-header">
<div class="left">
红外遥控
</div>
</div>
<div class="row">
<div class="col" v-for="d in getDevices('红外转发器')">
<div><img class="icon" :src="'/iot/'+d.Icon+'.png'" /></div>
<div><i :class="d.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="d.IsOnline?'color:green;':'color:red;'"></i></div>
<div>{{d.DisplayName}}</div>
<div class="row" v-if="isAdmin">
<template v-for="data in _.orderBy(d.Data,['DisplayOrder','Name'])">
<template v-if="data.Key==='code[]'">
<div class="col" v-for="key in JSON.parse(data.Value)">
<div><a href="javascript: ;" v-on:click="send(d.Id,'22call','code='+key.value)"><img class="btn" src="~/iot/button.png" /></a></div>
<div class="btn">
{{key.text}}
</div>
</div>
</template>
</template>
</div>
</div>
</div>
</div>
<div class="card" v-if="getCount('串口控制器')">
<div class="card-header">
<div class="left">
串口遥控
</div>
</div>
<div class="row">
<div class="col" v-for="d in getDevices('串口控制器')">
<div><img class="icon" :src="'/iot/'+d.Icon+'.png'" /></div>
<div><i :class="d.IsOnline?'fa fa-toggle-on':'fa fa-toggle-off'" :style="d.IsOnline?'color:green;':'color:red;'"></i></div>
<div>{{d.DisplayName}}</div>
<div class="row" v-if="isAdmin">
<template v-for="data in _.orderBy(d.Data,['DisplayOrder','Name'])">
<template v-if="data.Key==='code[]'">
<div class="col" v-for="(value, key, index) in _.chain(JSON.parse(data.Value)).groupBy(o => o.text.split('-')[0]).value()">
<div>{{key}}</div>
<div class="row">
<div class="col" v-for="btn in value">
<div><a href="javascript: ;" v-on:click="send(d.Id,'send','code='+btn.value)"><img class="btn" src="~/iot/button.png" /></a></div>
<div class="btn">
{{btn.text.indexOf('-')>0?btn.text.split('-')[1]:btn.text}}
</div>
</div>
</div>
</div>
</template>
</template>
</div>
</div>
</div>
</div>
<div class="card" v-if="getCount('摄像头')">
<div class="card-header">
<div class="left">
摄像头
</div>
<div v-if="navigator.userAgent.indexOf('Windows')>-1&&!navigator.plugins['Shockwave Flash']" class="right">
<a href="http://www.adobe.com/go/getflashplayer" rel="nofollow" target="_blank" class="link external"><i class="fa fa-facebook"></i></a>
</div>
</div>
<div class="row">
<div class="col" v-for="d in getDevices('摄像头')">
<div><img class="icon" :src="'/iot/'+d.Icon+'.png'" /></div>
<div>{{d.DisplayName}}</div>
<div class="row" v-if="isAdmin">
<div class="col">
<a href="javascript: ;" v-on:click="play(d.Id)"><img class="btn" src="~/iot/play.png" /></a>
</div>
<div class="col">
<a href="javascript: ;" v-on:click="send(d.Id,'20shot')"><img class="btn" src="~/iot/shot.png" /></a>
</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 id="video-container" 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>
var isNode =@(isNode?"true":"false");
var isList = true;
var updateUrl = '/Home/GetNode/@Model.Id';
var wsUrl = '/hub?group=node-@Model.Number';
var isAdmin=@(User.IsInRole("EditDevice")?"true":"false");
var model = {
Name: '',
Sences: [],
Devices: []
};
function load() {
$.getJSON(updateUrl, function (response) {
vm.model = response;
});
}
</script>
<script src="~/js/iot.js"></script>
</body>
</html>
Reference in new issue View Git Blame Copy Permalink