Former-commit-id: 9d8dbdbf3fad6892d04910727a7b7a7f61b518e3
TangShanKaiPing
wanggang 6 years ago
parent 009d715035
commit 361bed687a

@ -57,6 +57,13 @@ label > * {
padding-right: initial;
}
[class^="col-"] {
padding-left:0;
padding-right:0;
}
.card-body{
padding:10px;
}
[class^="weui"] {
box-sizing: initial;
}
@ -94,17 +101,17 @@ img {
.ir table {
border-collapse: separate;
margin: 8px auto;
padding: 4px;
border: 2px solid #ddd;
border-radius: 15px;
margin: 5px auto;
border: 1px solid #ddd;
border-radius: 5px;
}
.ir table td {
padding: 1px;
text-align: center;
}
.ir table button{
line-height:30px;
}
.weui-grid__icon {
width: 48px;
height: 48px;
@ -114,6 +121,7 @@ img {
.card .weui-bar__item_on {
background-color: #eee;
}
/*
.wxinlineplayer + div {
position:absolute;
height:30px;
@ -128,7 +136,7 @@ img {
}
.wxinlineplayer + div:hover {
display: block;
}
}*/
.control input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: transparent;
@ -137,10 +145,16 @@ img {
border: 6px solid rgba(230,230,230,0.8);
border-radius: 50%;
}
.ptz img{
.camera img{
width:32px;
margin:0 auto;
}
.ptz td{
text-align:center;
.camera td {
padding:2px 0;
text-align: center;
}
.video-container:-webkit-full-screen{
width: 100vw!important;
height: 100vh!important;
max-height: 100vh;
}

@ -1,48 +1,66 @@
<template>
<div class="card" style="box-sizing:border-box;height:450px;margin:10px;">
<div class="card camera" style="box-sizing:border-box;height:490px;margin:10px;">
<div class="card-header">
{{device.displayName}}
</div>
<div class="card-body" style="padding:0;">
<div class="row" style="width:320px;height:240px;margin: 0 auto;background-color:#000;position:relative;">
<div class="row video-container" style="width:100%;height:240px;margin: 0 auto;background-color:#333;position:relative;">
<video controls muted autoplay :class="device.number" v-if="isFlvSupported" v-on:volumechange="volumeChange($event)" style="width:100%;height:100%;object-fit:contain;"></video>
<canvas width="1080" height="720" style="width:100%;height:100%;object-fit:contain;background: black;margin:0 auto;" :class="device.number+' wxinlineplayer'" v-else></canvas>
<div class="control">
<a href="javascript:;" v-on:click="play()" style="color: #fff; margin: 0 10px; line-height: 30px;">
<i class="ion ion-md-pause" v-if="playing"></i>
<i v-else class="ion ion-md-play"></i>
</a>
<template v-if="playing">
<a href="javascript:;" v-on:click="fullScreen()" style="color:#fff;margin:0 10px;line-height:30px;float:right;">
<i class="ion ion-md-expand"></i>
<template v-else>
<canvas width="1080" height="720" style="width:100%;height:100%;object-fit:contain;background: #333;margin:0 auto;" :class="device.number" v-on:click="showControls()"></canvas>
<div :class="'control '+device.number" style="position:absolute;height:30px;left:0;right:0;bottom:0;background-color:#333;display: none;">
<a href="javascript:;" v-on:click="play()" style="color: #fff; margin: 0 10px; line-height: 30px;">
<i class="ion ion-md-pause" v-if="playing"></i>
<i v-else class="ion ion-md-play"></i>
</a>
<a href="javascript:;" v-on:click="mute()" style="color:#fff;margin:0 10px;line-height:30px;float:right;">
<i class="ion ion-md-volume-off" v-if="muted"></i>
<i class="ion ion-md-volume-high" v-else></i>
</a>
<input type="range" min="0" max="1" step="0.1" :value="volume" style="-webkit-appearance:none;float:right;width:80px;height:4px;margin:13px 2px;background:#666;outline:none;" v-on:change=volumeChange2($event) />
</template>
</div>
<template v-if="playing">
<a href="javascript:;" v-on:click="fullScreen()" style="color:#fff;margin:0 10px;line-height:30px;float:right;">
<i class="ion ion-md-expand"></i>
</a>
<a href="javascript:;" v-on:click="mute()" style="color:#fff;margin:0 10px;line-height:30px;float:right;">
<i class="ion ion-md-volume-off" v-if="muted"></i>
<i class="ion ion-md-volume-high" v-else></i>
</a>
<input type="range" min="0" max="1" step="0.1" :value="volume" style="-webkit-appearance:none;float:right;width:80px;height:4px;margin:13px 2px;background:#666;outline:none;" v-on:change=volumeChange2($event) />
</template>
</div>
</template>
</div>
<div style="box-sizing: border-box;width: 320px;height: 140px;margin: 5px auto;" :class="'row ptz '+ device.number">
<table class="ptz" style="width: 100%; height: 100%;">
<div style="box-sizing: border-box;width: 100%;margin: 5px auto;" :class="'row ptz '+ device.number">
<table style="width: 100%; height:100px;">
<tr>
<td colspan="2" style="text-align:center;"><button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(model.number,'/Onvif/StartRecord')">启动推流</button></td>
<td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Up')" src="/IoTCenter/images/up.png" /></td>
<td></td>
<td colspan="2" style="text-align:center;"><button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(model.number,'/Onvif/StopRecord')">停止推流</button></td>
</tr>
<tr>
<td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Zoomin')" src="/IoTCenter/images/zoomin.png" /></td>
<td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Left')" src="/IoTCenter/images/left.png" /></td>
<td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Stop')" src="/IoTCenter/images/stop.png" /></td>
<td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Right')" src="/IoTCenter/images/right.png" /></td>
<td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Zoomout')" src="/IoTCenter/images/zoomout.png" /></td>
</tr>
<tr>
<td colspan="2" style="text-align:center;"><button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(model.number,'/Onvif/StartPush')">开始录像</button></td>
<td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Down')" src="/IoTCenter/images/down.png" /></td>
<td></td>
<td colspan="2" style="text-align:center;"><button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(model.number,'/Onvif/StopPush')">停止录像</button></td>
</tr>
<template v-if="ptz">
<tr>
<td></td>
<td></td>
<td><img v-on:click="execApi(device.number,'/Camera/Up')" src="/IoTCenter/images/up.png" /></td>
<td></td>
<td></td>
</tr>
<tr>
<td><img v-on:click="execApi(device.number,'/Camera/Zoomin')" src="/IoTCenter/images/zoomin.png" /></td>
<td><img v-on:click="execApi(device.number,'/Camera/Left')" src="/IoTCenter/images/left.png" /></td>
<td><img v-on:click="execApi(device.number,'/Camera/Stop')" src="/IoTCenter/images/stop.png" /></td>
<td><img v-on:click="execApi(device.number,'/Camera/Right')" src="/IoTCenter/images/right.png" /></td>
<td><img v-on:click="execApi(device.number,'/Camera/Zoomout')" src="/IoTCenter/images/zoomout.png" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td><img v-on:click="execApi(device.number,'/Camera/Down')" src="/IoTCenter/images/down.png" /></td>
<td></td>
<td></td>
</tr>
</template>
</table>
</div>
</div>
@ -75,6 +93,14 @@
this.stopWxInlinePlayer();
},
methods: {
play: function () {
if (this.playing) {
this.wxInlinePlayer.stop();
}
else {
this.wxInlinePlayer.play();
}
},
playByFlvJs: function () {
var videoElement = $('video.' + this.device.number)[0];
var push = Enumerable.from(this.device.data).where(o => o.name === '推流').firstOrDefault();
@ -141,13 +167,6 @@
this.flvPlayer = null;
}
},
stopWxInlinePlayer: function () {
if (this.wxInlinePlayer) {
this.wxInlinePlayer.stop();
this.wxInlinePlayer.destroy();
this.wxInlinePlayer = null;
}
},
volumeChange: function (e) {
this.muted = e.target.muted;
this.volume = e.target.volume;
@ -165,16 +184,13 @@
muted: true,
autoplay: true,
loop: false,
isLive: false,
isLive: true,
chunkSize: 128 * 1024,
preloadTime: 5e2,
bufferingTime: 1e3,
cacheSegmentCount: 64,
customLoader: null
});
videoElement.addEventListener('click', () => {
vm.wxInlinePlayer.play();
});
vm.wxInlinePlayer.on('loadError', e => {
console.log('>>>>> load error happend: ', e);
});
@ -201,13 +217,15 @@
});
});
},
play: function () {
if (this.playing) {
stopWxInlinePlayer: function () {
if (this.wxInlinePlayer) {
this.wxInlinePlayer.stop();
this.wxInlinePlayer.destroy();
this.wxInlinePlayer = null;
}
else {
this.wxInlinePlayer.play();
}
},
showControls: function (e) {
$('.control.' + this.device.number).toggle();
},
mute: function () {
this.muted = !this.muted;
@ -219,12 +237,28 @@
},
fullScreen: function () {
var videoElement = $('canvas.' + this.device.number)[0];
videoElement.requestFullscreen();
var container = $(videoElement).parents('.video-container')[0];
if (document.fullscreen || document.webkitFullscreenElement) {
if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
else {
document.exitFullscreen();
}
}
else {
if (container.webkitRequestFullScreen) {
container.webkitRequestFullScreen();
}
else {
container.requestFullscreen();
}
}
}
},
computed: {
url: function () {
return 'http://localhost/music.flv';
return location.protocol + '//' + location.hostname + location.pathname + 'music.flv';
//return getDeviceDataValue(this.device, 'flv');
},
isFlvSupported: function () {

@ -7,17 +7,17 @@
</div>
<div class="card-body">
<div class="row" style="height:100%;width:300px;margin: 0 auto;">
<div class="col col-md-2 col-sm-2 align-self-center">
<div class="col-2 align-self-center">
<div class="mh-100" :style="'width:48px;height:48px;border-radius: 10px;background:'+hsl"></div>
</div>
<div class="col col-md-8 col-sm-8 align-self-center">
<div class="col-8 align-self-center">
<div class="row" style="height:58px;">
<input v-on:change="changeHue($event.target.value)" type="range" min="0" step="1" max="255" name="hue" :value="hue" style="height:16px;margin:0 auto;-webkit-appearance:none;background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,#00F 66.66%, #F0F 83.33%, #F00 100%);" />
<input v-on:change="changeSaturation($event.target.value)" type="range" min="0" step="1" max="254" name="saturation" :value="saturation" :style="'height:16px;margin:0 auto;-webkit-appearance:none;background: -webkit-linear-gradient(left, #fff 0%, '+color+' 100%);'"/>
<input v-on:change="changeBrightness($event.target.value)" type="range" min="0" step="1" max="254" name="brightness" :value="brightness" style="height:16px;margin:0 auto;-webkit-appearance:none;background: -webkit-linear-gradient(left, #000 0%, #fff 100%);"/>
</div>
</div>
<div class="col col-md-2 col-sm-2 align-self-center">
<div class="col-2 align-self-center text-center">
<img style="height:32px;" v-if="getDeviceDataValue(device,'状态')==='开'" v-on:click="execApi(device.number,'/Socket/Off')" src="/IoTCenter/images/on.png" />
<img style="height:32px;" v-else="getDeviceDataValue(device,'状态')==='关'" v-on:click="execApi(device.number,'/Socket/On')" src="/IoTCenter/images/off.png" />
</div>

@ -7,10 +7,10 @@
</div>
<div class="card-body">
<div class="row" style="height:100%;width:300px;margin: 0 auto;">
<div class="col col-md-4 col-sm-4 align-self-center">
<div class="col-4 align-self-center">
<img class="mh-100" src="/IoTCenter/images/curtain.png" style="width:48px;" />
</div>
<div class="col col-md-8 col-sm-8 align-self-center">
<div class="col-8 align-self-center">
<div class="row" style="line-height:28px;">
<span class="badge badge-info" style="line-height:26px;">{{getDeviceDataValue(device,'状态')}}</span>
<img style="height:32px;" v-on:click="execApi(device.number,'/Curtain/On')" src="/IoTCenter/images/left.png" />

@ -5,10 +5,10 @@
</div>
<div class="card-body">
<div class="row" style="height:100%;width:300px;margin: 0 auto;">
<div class="col col-md-4 col-sm-4 align-self-center">
<div class="col-4 align-self-center">
<img class="mh-100" src="/IoTCenter/images/gateway.png" style="width:48px;" />
</div>
<div class="col col-md-8 col-sm-8 align-self-center">
<div class="col-8 align-self-center">
<div class="row" style="line-height:25px;">
<button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(device.number,'/Gateway/X9d')">版本</button>
<span class="badge badge-info" style="line-height:26px;">{{getDeviceDataValue(device,'版本')}}</span>

@ -7,10 +7,10 @@
</div>
<div class="card-body">
<div class="row" style="height:100%;width:300px;margin: 0 auto;">
<div class="col col-md-4 col-sm-4 align-self-center">
<div class="col-4 align-self-center">
<img class="mh-100" src="/IoTCenter/images/humiture.png" />
</div>
<div class="col col-md-8 col-sm-8 align-self-center">
<div class="col-8 align-self-center">
<div class="row" style="height:25px;line-height:25px;">
<span>
温度:

@ -1,6 +1,6 @@
<template>
<div>
<div class="card" style="box-sizing:border-box;height:550px;margin:10px;">
<div class="card" style="box-sizing:border-box;height:490px;margin:10px;">
<div class="card-header">
{{device.displayName}}
<span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>

@ -7,10 +7,10 @@
</div>
<div class="card-body">
<div class="row" style="height:100%;width:300px;margin: 0 auto;">
<div class="col col-md-4 col-sm-4 align-self-center">
<div class="col-4 align-self-center">
<img class="mh-100" src="/IoTCenter/images/light.png" />
</div>
<div class="col col-md-8 col-sm-8 align-self-center">
<div class="col-8 align-self-center">
<div class="row" style="line-height:28px;">
<span>
光照度:

@ -7,10 +7,10 @@
</div>
<div class="card-body">
<div class="row" style="height:100%;width:300px;margin: 0 auto;">
<div class="col col-md-4 col-sm-4 align-self-center">
<div class="col-4 align-self-center">
<img class="mh-100" src="/IoTCenter/images/person.png" style="width:48px;" />
</div>
<div class="col col-md-8 col-sm-8 align-self-center">
<div class="col-8 align-self-center">
<div class="row" style="line-height:28px;">
<span>
状态:

@ -1,6 +1,6 @@
<template>
<div>
<div class="card" style="box-sizing:border-box;height:340px;margin:10px;">
<div class="card" style="box-sizing:border-box;height:490px;margin:10px;">
<div class="card-header">
{{device.displayName}}
<span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>

@ -7,10 +7,10 @@
</div>
<div class="card-body">
<div class="row" style="height:100%;width:300px;margin: 0 auto;">
<div class="col col-md-4 col-sm-4 align-self-center">
<div class="col-4 align-self-center">
<img class="mh-100" src="/IoTCenter/images/smoke.png" style="width:48px;" />
</div>
<div class="col col-md-8 col-sm-8 align-self-center">
<div class="col-8 align-self-center">
<div class="row" style="line-height:28px;">
<span>
状态:

@ -7,10 +7,10 @@
</div>
<div class="card-body">
<div class="row" style="height:100%;width:300px;margin: 0 auto;">
<div class="col col-md-4 col-sm-4 align-self-center">
<div class="col-4 align-self-center">
<img class="mh-100" src="/IoTCenter/images/socket.png" style="width:48px;" />
</div>
<div class="col col-md-8 col-sm-8 align-self-center">
<div class="col-8 align-self-center">
<div class="row" style="line-height:28px;">
<span class="badge badge-info" style="line-height:26px;">{{electricity}} kW‧h</span>
<img style="height:32px;" v-if="getDeviceDataValue(device,'状态')==='开'" v-on:click="execApi(device.number,'/Socket/Off')" src="/IoTCenter/images/on.png" />

@ -7,10 +7,10 @@
</div>
<div class="card-body">
<div class="row" style="height:100%;width:300px;margin: 0 auto;">
<div class="col col-md-4 col-sm-4 align-self-center">
<div class="col-4 align-self-center">
<img class="mh-100" src="/IoTCenter/images/switch1.png" style="width:48px;" />
</div>
<div class="col col-md-8 col-sm-8 align-self-center">
<div class="col-8 align-self-center">
<div class="row" style="line-height:28px;">
<img style="height:32px;" v-if="getDeviceDataValue(device,'L1状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L1Off')" src="/IoTCenter/images/on.png" />
<img style="height:32px;" v-if="getDeviceDataValue(device,'L1状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L1On')" src="/IoTCenter/images/off.png" />

@ -6,7 +6,7 @@
<h1 class="weui-header-title">{{node.name}}</h1>
</div>
<!--场景-->
<div class="row">
<div class="row" v-if="scenes.length">
<div class="col col-md-12">
<div class="card">
<div class="card-header">场景</div>
@ -17,7 +17,7 @@
</div>
</div>
<!--环境-->
<div class="col col-md-12 my-2 px-3">环境</div>
<!--<div class="col col-md-12 my-2 px-3">环境</div>-->
<div class="row">
<!--光强检测器-->
<div v-for="device in getDevices('光强检测器')" class="col" style="min-width:320px;">
@ -35,10 +35,9 @@
<div v-for="device in getDevices('人体感应器')" class="col" style="min-width:320px;">
<iot-person v-bind:device="device"></iot-person>
</div>
</div>
<!--电器-->
<!--</div>
<div class="col col-md-12 my-2 px-3">用电</div>
<div class="row">
<div class="row">-->
<!--调色灯-->
<div v-for="device in getDevices('调色灯')" class="col" style="min-width:320px;">
<iot-color-light v-bind:device="device"></iot-color-light>
@ -56,21 +55,17 @@
<iot-socket v-bind:device="device"></iot-socket>
</div>
</div>
<div class="col col-md-12 my-2 px-3">遥控器</div>
<!--红外转发器-->
<div class="row">
<div v-for="device in getDevices('红外转发器')" class="col" style="min-width:320px;">
<iot-ir v-bind:device="device"></iot-ir>
</div>
</div>
<!--红外转发器-->
<!--<div class="col col-md-12 my-2 px-3">遥控器</div>-->
<div class="row">
<!--摄像头-->
<div v-for="device in getDevices('摄像头')" class="col" style="min-width:320px;">
<iot-camera v-bind:device="device"></iot-camera>
</div>
</div>
<!--串口控制器-->
<div class="row">
<!--红外转发器-->
<div v-for="device in getDevices('红外转发器')" class="col" style="min-width:320px;">
<iot-ir v-bind:device="device"></iot-ir>
</div>
<!--串口控制器-->
<div v-for="device in getDevices('串口控制器')" class="col" style="min-width:320px;">
<iot-serial-port v-bind:device="device"></iot-serial-port>
</div>

Loading…
Cancel
Save