@ -26,6 +26,7 @@
< / f7-view >
< / f7-app >
< / div >
<!-- login -->
< template id = "page-login" >
< f7-page >
< f7-navbar >
@ -88,6 +89,7 @@
< / form >
< / f7-page >
< / template >
<!-- home -->
< template id = "page-home" >
< f7-page :page-content = "false" >
< f7-navbar >
@ -99,6 +101,7 @@
< f7-link tab-link = "#tab-user" icon-ios = "f7:person" icon-md = "f7:person" text = "我的" > < / f7-link >
< / f7-toolbar >
< f7-tabs >
<!-- message -->
< f7-tab id = "tab-message" class = "page-content" >
< template v-for = "message in vm.Messages" >
< template v-if = "message&&message.Data.length" >
@ -133,6 +136,7 @@
< / template >
< / template >
< / f7-tab >
<!-- nodes -->
< f7-tab id = "tab-nodes" class = "page-content" tab-active >
< f7-list >
< f7-list-item icon-ios = "f7:chat" icon-md = "f7:chat" v-for = "node in vm.NodeList" :title = "node.Name" :badge = "node.Count" :link = "'/node/'+node.Number+'/name/'+node.Name" >
@ -140,6 +144,7 @@
< / f7-list-item >
< / f7-list >
< / f7-tab >
<!-- user -->
< f7-tab id = "tab-user" class = "page-content" >
< f7-list >
< f7-list-item title = "用户名" :after = "vm.Home.UserName" > < / f7-list-item >
@ -150,10 +155,11 @@
< / f7-tabs >
< / f7-page >
< / template >
<!-- node -->
< template id = "page-node" >
< f7-page >
< f7-navbar >
< f7-navbar = " Node.Name" back-link = "Back" > < / f7-navbar >
< f7-navbar v-if= "vm.Node" :title= " vm. Node.Name" back-link = "Back" > < / f7-navbar >
< / f7-navbar >
< template v-if = "getDevices('光强检测器').length" >
@ -750,142 +756,12 @@
< / template >
< / f7-page >
< / template >
<!-- device -->
< template id = "page-device" >
< f7-page >
< f7-navbar >
< f7-navbar = " Device.DisplayName||Device.Name" back-link = "Back" > < / f7-navbar >
< f7-navbar v-if= "vm.Device" :title= " vm. Device.DisplayName||vm. Device.Name" back-link = "Back" > < / f7-navbar >
< / f7-navbar >
< div class = "block-title" v-if = "Device.Data.length" > 属性< / div >
< div class = "list" >
< ul v-if = "Device.Data.length" >
< template v-for = "data in Device.Data" >
< li v-if = "showData(data.Name)" >
< div class = "item-content" >
< div class = "item-media" > < i class = "f7-icons" > info< / i > < / div >
< div class = "item-inner" >
< div class = "item-title" > {{data.Name}}< / div >
< div class = "item-after" >
< span class = "badge color-blue" >
{{data.Value}}
< / span >
< span > < / span >
< span class = "badge color-blue" v-if = "data.Unit" >
{{data.Unit}}
< / span >
< span > < / span >
< span class = "badge color-blue" v-if = "data.Description" >
{{data.Description}}
< / span >
< / div >
< / div >
< / div >
< / li >
< / template >
< / ul >
< / div >
< template v-for = "data in Device.Data" >
< div class = "block" v-if = "data.Type === 'Int' || data.Type === 'Float'" >
< div class = "col" >
< canvas :id = "data.Key" :data-label = "data.Name" class = "chart" > < / canvas >
< / div >
< / div >
< / template >
< div class = "block-title" v-if = "Device.Apis.length" > 操作< / div >
< div class = "list no-hairlines-md" v-if = "Device.Apis.length" >
< ul v-if = "Device.Name==='摄像头'" >
< li >
< div class = "block" >
< a v-if = "isApp" class = "button button-large button-fill button-outline color-green external" :href = "getUrl('rtmp')" > 预览< / a >
< a v-else class = "button button-large button-fill button-outline color-green" href = "javascript:;" v-on:click = "flv()" > 预览< / a >
< / div >
< / li >
< / ul >
< template v-for = "api in _.orderBy(Device.Apis,['Command'])" >
< form method = "get" action = "/Command/Exec" v-on:submit . prevent = "call" class = "command" v-if = "showApi(api)" >
< input type = "hidden" name = "cmd" :value = "api.Command" / >
< input type = "hidden" name = "id" :value = "Device.Id" / >
< ul >
< template v-for = "parameter in api.Parameters" >
< template >
< li class = "item-content item-input" v-if = "parameter.Name!='hidden'" >
< div class = "item-inner" >
< div class = "item-title item-label" > {{parameter.Description}}< / div >
< div class = "item-input-wrap" >
< template v-if = "isSelect(Device,parameter.Name)" >
< select :name = "parameter.Name"
data-val="true"
:data-val-required="'请选择'+parameter.Description">
< option value = "" > 请选择< / option >
< option v-for = "option in getSelect(Device,parameter.Name)" :value = "option.value" > {{option.text}}< / option >
< / select >
< span class = "input-clear-button" > < / span >
< / template >
< template v-else >
< template v-if = "parameter.Minimum||parameter.Maximnu" >
< input :name = "parameter.Name" :value = "getParameter(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"
type="text" />
< span class = "input-clear-button" > < / span >
< / template >
< template v-else >
< input :name = "parameter.Name"
:value="getParameter(parameter.Name)"
data-val="true"
:data-val-required="'请输入'+parameter.Description"
type="text" />
< span class = "input-clear-button" > < / span >
< / template >
< / template >
< / div >
< span class = "field-validation-valid text-danger" :data-valmsg-for = "parameter.Name" data-valmsg-replace = "true" > < / span >
< / div >
< / li >
< / template >
< / template >
< li >
< div class = "block" >
< button class = "button button-large button-fill button-outline" type = "submit" > {{api.Name}}< / button >
< / div >
< / li >
< / ul >
< / form >
< / template >
< / div >
< / f7-page >
< / template >
< template id = "page-camera" >
< f7-page >
< f7-navbar >
< f7-navbar :title = "name" back-link = "Back" > < / f7-navbar >
< / f7-navbar >
< div class = "videoContainer" >
< video id = "flvPlayer" class = "video" muted controls autoplay > < / video >
< div id = "ptz" v-if = "ptz" >
< table >
< tr >
< td > < / td >
< td > < / td >
< td > < a href = "javascript:;" v-on:mouseup = "call('23stop')" v-on:mouseleave = "call('23stop')" v-on:mousedown = "call('26up')" > < img src = "images/up.png" / > < / a > < / td >
< td > < / td >
< td > < / td >
< / tr >
< tr >
< td > < / td >
< td > < a href = "javascript:;" v-on:mouseup = "call('23stop')" v-on:mouseleave = "call('23stop')" v-on:mousedown = "call('24left')" > < img src = "images/left.png" / > < / a > < / td >
< td > < / td >
< td > < a href = "javascript:;" v-on:mouseup = "call('23stop')" v-on:mouseleave = "call('23stop')" v-on:mousedown = "call('25right')" > < img src = "images/right.png" / > < / a > < / td >
< td > < / td >
< / tr >
< tr >
< td > < a href = "javascript:;" v-on:mouseup = "call('23stop')" v-on:mouseleave = "call('23stop')" v-on:mousedown = "call('21zoomin')" > < img src = "images/zoomin.png" / > < / a > < / td >
< td > < / td >
< td > < a href = "javascript:;" v-on:mouseup = "call('23stop')" v-on:mouseleave = "call('23stop')" v-on:mousedown = "call('27down')" > < img src = "images/down.png" / > < / a > < / td >
< td > < / td >
< td > < a href = "javascript:;" v-on:mouseup = "call('23stop')" v-on:mouseleave = "call('23stop')" v-on:mousedown = "call('22zoomout')" > < img src = "images/zoomout.png" / > < / a > < / td >
< / tr >
< / table >
< / div >
< / div >
< / f7-page >
< / template >
< template id = "page-not-found" >
@ -1300,6 +1176,92 @@
}
});
Vue.component('page-device', {
template: '#page-device',
data() {
return {
Device: {
Number: null,
Name: null,
Data: [],
Apis: []
}
}
},
mounted() {
var number = this.$f7route.params.number;
vm.Device = _.first(_.filter(vm.Node.Devices, function (o) { return o.Number == number; }));
},
methods: {
isSelect: function (device, key) {
return _.filter(device.Data, function (o) { return o.Key == key + '[]' }).length > 0;
},
getSelect: function (device, key) {
var data = _.first(_.filter(device.Data, function (o) { return o.Key == key + '[]' })).Value;
var result = JSON.parse(data);
return result;
},
getParameter: function (name) {
console.log(name);
var prop = _.chain(this.Device.Data).filter(function (o) { return o.Key == name; }).first().value();
return prop ? prop.Value : '';
},
call: function (e) {
if (!$(e.target).valid()) {
return;
}
var url = vm.IoTServer + '/App/Exec/?connectionId=' + vm.ConnectionId + '& node=' + this.getNodeNumber(this.Device.NodeId) + '& ' + $(e.target).serialize();
ajax(url);
},
getNodeNumber(nodeId) {
return _.chain(vm.Nodes).filter(function (o) {
return o.Id === nodeId;
}).first().value().Number;
},
showData(name) {
if (name === 'hidden' || name.indexOf('rtsp') != -1 || name.indexOf('rtmp') != -1 || name.indexOf('flv') != -1 || name.indexOf('hls') != -1) {
return false;
}
return true;
},
showApi(api) {
if (this.Device.Name === '摄像头') {
if (this.getParameter('Ptz3DZoomSupport') === '否') {
if (api.Name !== '截屏') {
return false;
}
}
}
return true;
},
getUrl(type) {
var url = _.chain(this.Device.Data).filter(function (o) { return o.Name === (type + '2'); }).first().value().Value;
url += '?id=' + this.Device.Id;
url += '& host=' + encodeURIComponent(vm.IoTServer);
url += '& node=' + _.chain(vm.Nodes).filter(function (o) { return o.Id === device.Device.NodeId; }).first().value().Number;
if (this.getParameter('Ptz3DZoomSupport') !== '否') {
url += '&ptz=true';
}
return url;
},
flv() {
this.$f7router.navigate('/camera/', {
props: {
name: this.Device.DisplayName || this.Device.Name,
url: this.getParameter('flv2'),
ptz: this.getParameter('Ptz3DZoomSupport') !== '否',
node: this.getNodeNumber(this.Device.NodeId),
id: this.Device.Id,
hls: this.getParameter('hls2')
}
});
}
},
destroyed() {
device = null;
},
});
Vue.component('page-not-found', {
template: '#page-not-found'
});
@ -1326,6 +1288,10 @@
path: '/node/:number/name/:name',
component: 'page-node'
},
{
path: '/device/:number/name/:name',
component: 'page-device'
},
{
path: '(.*)',
component: 'page-not-found',
