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 '710b6c0b6b'
${ noResults }
iot/projects/IoTClient/Assets/StreamingAssets/wwwroot/node.html

145 lines
10 KiB
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<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">
<link rel="stylesheet" href="lib/framework7/css/framework7.bundle.min.css">
<link rel="stylesheet" href="css/framework7-icons.css">
<link rel="stylesheet" href="css/app.css">
<style>
table.ptz {
padding-top: 7px;
}
table.ptz td {
padding: 0 12px;
}
</style>
</head>
<body>
<div class="statusbar"></div>
<div id="app">
<f7-app :params="$root.f7params">
<f7-view main>
<f7-page page-content="false">
<f7-navbar :title="model?model.Name:'节点'">
<a href="nodes.html" slot="nav-left" class="link external"><i class="icon icon-back"></i></a>
</f7-navbar>
<div class="page-content" id="template">
<template v-if="model">
<template v-if="HasDevices('摄像头')">
<div class="card">
<div class="card-header">
<div class="item-input-wrap input-dropdown-wrap" style="width:100%;">
<select class="input-with-value" id="camera" @change="CameraSelected" style="width:100%;">
<option v-for="c in GetDevices('摄像头')" :value="c.Number">{{c.DisplayName||c.Name}}</option>
</select>
</div>
</div>
<div class="card-content">
<div style="width:100%;height:186px;margin:0;padding:0;background:#000;text-align:center;">
<video id="liveVideo" class="video" controls autoplay muted style="width:100%;max-width:100%;height:100%;" v-on:volumechange="VolumeChange($event)"></video>
</div>
</div>
</div>
<div class="card" id="ptz">
<div class="card-header with-border">云台</div>
<div class="card-content" style="height:178px;text-align:center;">
<table class="ptz" style="margin:0 auto;">
<tr>
<td></td>
<td></td>
<td><img class="ajax camera Up" :src="server+'/IoTCenter/images/up.png'" /></td>
<td></td>
<td></td>
</tr>
<tr>
<td><img class="ajax camera Zoomin" :src="server+'/IoTCenter/images/zoomin.png'" /></td>
<td><img class="ajax camera Left" :src="server+'/IoTCenter/images/left.png'" /></td>
<td><img class="ajax camera Stop" :src="server+'/IoTCenter/images/stop.png'" /></td>
<td><img class="ajax camera Right" :src="server+'/IoTCenter/images/right.png'" /></td>
<td><img class="ajax camera Zoomout" :src="server+'/IoTCenter/images/zoomout.png'" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td><img class="ajax camera Down" :src="server+'/IoTCenter/images/down.png'" /></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</template>
<template v-for="device in GetDevices('色暖灯')">
<div class="row">
<div class="col-md-12">
<div class="box box-solid btns">
<div class="box-header with-border">
<h3 class="box-title">
<img :src="server+'/IoTCenter/images/light2.png'" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}<span :style="{
display:'inline-block',
color:'#eee',
backgroundColor:getLightColor(GetDataValue(device.Number,'色调'),GetDataValue(device.Number,'饱和度'),GetDataValue(device.Number,'亮度'))}">{{getLightColor(GetDataValue(device.Number,'色调'),GetDataValue(device.Number,'饱和度'),GetDataValue(device.Number,'亮度'))}}</span>
</h3>
<div class="box-tools pull-right">
<img v-if="GetDataValue(device.Number,'状态')=='开'" @click="CallApi(device.Number,'/WarmLight/Off')" :src="server+'/IoTCenter/images/on.png'" />
<img v-if="GetDataValue(device.Number,'状态')=='关'" @click="CallApi(device.Number,'/WarmLight/On')" :src="server+'/IoTCenter/images/off.png'" />
</div>
</div>
<div class="box-body" style="height:178px;">
<form method="get" action="/App/ExecApi">
<input type="hidden" name="Number" :value="device.Number" />
<input type="hidden" name="Method" value="/WarmLight/SetBrightness" />
<div class="row">
<div class="col-md-2 col-xs-4">
<span class="label1">亮度</span>
</div>
<div class="col-md-10 col-xs-8">
<input @change="AjaxSubmit($event,device.Number,'亮度')" type="range" min="0" step="1" max="255" name="Brightness" :value="GetDataValue(device.Number,'亮度')" />
</div>
</div>
</form>
<form method="get" action="/App/ExecApi">
<input type="hidden" name="Number" :value="device.Number" />
<input type="hidden" name="Method" value="/WarmLight/SetColor" />
<input type="hidden" name="Saturation" :value="GetDataValue(device.Number,'饱和度')" />
<div class="row">
<div class="col-md-2 col-xs-4">
<span class="label1">色调</span>
</div>
<div class="col-md-10 col-xs-8">
<input @change="AjaxSubmit($event,device.Number,'色调')" type="range" min="0" step="1" max="255" name="Hue" :value="GetDataValue(device.Number,'色调')" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
</template>
</div>
</f7-page>
</f7-view>
</f7-app>
</div>
<script type="text/javascript" src="lib/signalr/signalr.min.js"></script>
<script type="text/javascript" src="lib/axios/axios.min.js"></script>
<script type="text/javascript" src="lib/URI.js/URI.min.js"></script>
<script type="text/javascript" src="lib/linq.js/linq.min.js"></script>
<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.validation/jquery.validate.min.js"></script>
<script type="text/javascript" src="lib/jquery.validation.unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="lib/vue/vue.min.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.bundle.min.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7-vue.bundle.min.js"></script>
<script type="text/javascript" src="lib/flv.js/flv.min.js"></script>
<script type="text/javascript" src="js/node.js"></script>
<script>
var debug = true;
loadData();
</script>
</body>
</html>
Reference in new issue View Git Blame Copy Permalink