|
|
|
|
@ -22,98 +22,100 @@
|
|
|
|
|
<div id="app">
|
|
|
|
|
<f7-app :params="$root.f7params">
|
|
|
|
|
<f7-view main>
|
|
|
|
|
<f7-page>
|
|
|
|
|
<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>
|
|
|
|
|
<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 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>
|
|
|
|
|
<div class="card-content">
|
|
|
|
|
<div style="width:100%;height:186px;margin:0;padding:0;background:#000;text-align:center;">
|
|
|
|
|
<video id="video" class="video" controls autoplay muted style="width:100%;max-width:100%;height:100%;" v-on:volumechange="VolumeChange($event)"></video>
|
|
|
|
|
<div class="card-content">
|
|
|
|
|
<div style="width:100%;height:186px;margin:0;padding:0;background:#000;text-align:center;">
|
|
|
|
|
<video id="video" class="video" controls autoplay muted style="width:100%;max-width:100%;height:100%;" v-on:volumechange="VolumeChange($event)"></video>
|
|
|
|
|
</div>
|
|
|
|
|
</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 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>
|
|
|
|
|
</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}}</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>
|
|
|
|
|
</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}}</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>
|
|
|
|
|
</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="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>
|
|
|
|
|
<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,'色调')" />
|
|
|
|
|
</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>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</f7-page>
|
|
|
|
|
</f7-view>
|
|
|
|
|
</f7-app>
|
|
|
|
|
@ -129,6 +131,132 @@
|
|
|
|
|
<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>
|
|
|
|
|
var server = localStorage.getItem('server');
|
|
|
|
|
var token = localStorage.getItem('token');
|
|
|
|
|
var data;
|
|
|
|
|
function loadData() {
|
|
|
|
|
var url = server + '/IoTCenter/App/GetNode';
|
|
|
|
|
var formData = new FormData();
|
|
|
|
|
formData.append('number', new URI().search(true).number);
|
|
|
|
|
formData.append('token', token);
|
|
|
|
|
axios.post(url, formData)
|
|
|
|
|
.then(function (response) {
|
|
|
|
|
console.log(response);
|
|
|
|
|
data = response.data;
|
|
|
|
|
if (data.Template) {
|
|
|
|
|
loadTemplate();
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
init();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(function (error) {
|
|
|
|
|
alert(error, '警告', function () { })
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
function loadTemplate() {
|
|
|
|
|
var url = server + '/IoTCenter/App/GetTemplate?template=' + data.Template;
|
|
|
|
|
axios.post(url, { crossDomain: true })
|
|
|
|
|
.then(function (response) {
|
|
|
|
|
var html = response.data;
|
|
|
|
|
$(html).each(function (i, n) {
|
|
|
|
|
if (n.tagName === 'STYLE') {
|
|
|
|
|
$('head').append(n);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
$('#template').html(html);
|
|
|
|
|
init();
|
|
|
|
|
})
|
|
|
|
|
.catch(function (error) {
|
|
|
|
|
alert(error, '警告', function () { })
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
function init() {
|
|
|
|
|
vm = new Vue({
|
|
|
|
|
el: '#app',
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
f7params: {
|
|
|
|
|
routes: [],
|
|
|
|
|
name: 'My App',
|
|
|
|
|
id: 'com.myapp.test',
|
|
|
|
|
theme: 'ios',
|
|
|
|
|
},
|
|
|
|
|
server: localStorage.getItem('server'),
|
|
|
|
|
token: localStorage.getItem('token'),
|
|
|
|
|
model: null
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
if (!this.server) {
|
|
|
|
|
location.href = "config.html";
|
|
|
|
|
}
|
|
|
|
|
if (!this.token) {
|
|
|
|
|
location.href = "login.html";
|
|
|
|
|
}
|
|
|
|
|
this.$f7ready((f7) => {
|
|
|
|
|
app = this.$f7;
|
|
|
|
|
});
|
|
|
|
|
this.load();
|
|
|
|
|
connect();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
load: function () {
|
|
|
|
|
var url = this.server + '/IoTCenter/App/GetNode';
|
|
|
|
|
var data = new FormData();
|
|
|
|
|
data.append('number', new URI().search(true).number);
|
|
|
|
|
data.append('token', this.token);
|
|
|
|
|
axios.post(url, data)
|
|
|
|
|
.then(function (response) {
|
|
|
|
|
console.log(response);
|
|
|
|
|
var data = response.data;
|
|
|
|
|
vm.model = data;
|
|
|
|
|
Vue.nextTick(function () {
|
|
|
|
|
UpdateCamera();
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
.catch(function (error) {
|
|
|
|
|
app.dialog.alert(error, '警告', function () { })
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
HasDevices(name) {
|
|
|
|
|
return Enumerable
|
|
|
|
|
.from(vm.model.Devices)
|
|
|
|
|
.any(function (o) { return o.Name === name });
|
|
|
|
|
},
|
|
|
|
|
GetDevices(name) {
|
|
|
|
|
return Enumerable.from(vm.model.Devices)
|
|
|
|
|
.where(function (o) { return o.Name == name; })
|
|
|
|
|
.toArray();
|
|
|
|
|
},
|
|
|
|
|
GetDataValue(number, name) {
|
|
|
|
|
var device = Enumerable.from(vm.model.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 != null) {
|
|
|
|
|
return data.Value;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return null;
|
|
|
|
|
},
|
|
|
|
|
CameraSelected() {
|
|
|
|
|
console.log('camera selected:' + new Date());
|
|
|
|
|
UpdateCamera();
|
|
|
|
|
},
|
|
|
|
|
VolumeChange(e) {
|
|
|
|
|
muted = e.target.muted;
|
|
|
|
|
volume = e.target.volume;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
var flvPlayer;
|
|
|
|
|
var timer;
|
|
|
|
|
@ -319,87 +447,8 @@
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
Framework7.use(Framework7Vue);
|
|
|
|
|
var app;
|
|
|
|
|
var vm = new Vue({
|
|
|
|
|
el: '#app',
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
f7params: {
|
|
|
|
|
routes: [],
|
|
|
|
|
name: 'My App',
|
|
|
|
|
id: 'com.myapp.test',
|
|
|
|
|
theme: 'ios',
|
|
|
|
|
},
|
|
|
|
|
server: localStorage.getItem('server'),
|
|
|
|
|
token: localStorage.getItem('token'),
|
|
|
|
|
model: null
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
if (!this.server) {
|
|
|
|
|
location.href = "config.html";
|
|
|
|
|
}
|
|
|
|
|
if (!this.token) {
|
|
|
|
|
location.href = "login.html";
|
|
|
|
|
}
|
|
|
|
|
this.$f7ready((f7) => {
|
|
|
|
|
app = this.$f7;
|
|
|
|
|
});
|
|
|
|
|
this.load();
|
|
|
|
|
connect();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
load: function () {
|
|
|
|
|
var url = this.server + '/IoTCenter/App/GetNode';
|
|
|
|
|
var data = new FormData();
|
|
|
|
|
data.append('number', new URI().search(true).number);
|
|
|
|
|
data.append('token', this.token);
|
|
|
|
|
axios.post(url, data)
|
|
|
|
|
.then(function (response) {
|
|
|
|
|
console.log(response);
|
|
|
|
|
var data = response.data;
|
|
|
|
|
vm.model = data;
|
|
|
|
|
Vue.nextTick(function () {
|
|
|
|
|
UpdateCamera();
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
.catch(function (error) {
|
|
|
|
|
app.dialog.alert(error, '警告', function () { })
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
HasDevices(name) {
|
|
|
|
|
return Enumerable
|
|
|
|
|
.from(vm.model.Devices)
|
|
|
|
|
.any(function (o) { return o.Name === name });
|
|
|
|
|
},
|
|
|
|
|
GetDevices(name) {
|
|
|
|
|
return Enumerable.from(vm.model.Devices)
|
|
|
|
|
.where(function (o) { return o.Name == name; })
|
|
|
|
|
.toArray();
|
|
|
|
|
},
|
|
|
|
|
GetDataValue(number, name) {
|
|
|
|
|
var device = Enumerable.from(vm.model.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 != null) {
|
|
|
|
|
return data.Value;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return null;
|
|
|
|
|
},
|
|
|
|
|
CameraSelected() {
|
|
|
|
|
console.log('camera selected:' + new Date());
|
|
|
|
|
UpdateCamera();
|
|
|
|
|
},
|
|
|
|
|
VolumeChange(e) {
|
|
|
|
|
muted = e.target.muted;
|
|
|
|
|
volume = e.target.volume;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
var vm;
|
|
|
|
|
loadData();
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
