Skip to content

N
Nei_Meng_An_Jian_4
Commit 1fed3570 authored by 张浩然's avatar 张浩然
Browse files
Options

'updatePTZControll'

parent 1560ca73
Show whitespace changes
Inline Side-by-side
Showing with 189 additions and 55 deletions
package-lock.json
View file @ 1fed3570
...@@ -5264,6 +5264,12 @@ ...@@ -5264,6 +5264,12 @@
} }
} }
}, },
"font-awesome": {
"version": "4.7.0",
"resolved": "https://registry.npm.taobao.org/font-awesome/download/font-awesome-4.7.0.tgz",
"integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=",
"dev": true
},
"for-in": { "for-in": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npm.taobao.org/for-in/download/for-in-1.0.2.tgz", "resolved": "https://registry.npm.taobao.org/for-in/download/for-in-1.0.2.tgz",
......
src/api/index.js
View file @ 1fed3570
...@@ -217,3 +217,12 @@ export function undergroundSeriousHiddenTrouble(data) { ...@@ -217,3 +217,12 @@ export function undergroundSeriousHiddenTrouble(data) {
params: data params: data
}); });
} }
// 气象
export function weather(data) {
return request4({
url: "/api/meteorology",
method: "get",
params: data
});
}
src/components/base/BaseRight.vue
View file @ 1fed3570
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<script> <script>
import { randNum } from '@/utils' import { randNum } from '@/utils'
import { dept } from '@/api' import { dept, weather } from '@/api'
export default { export default {
data() { data() {
return { return {
...@@ -37,16 +37,18 @@ export default { ...@@ -37,16 +37,18 @@ export default {
}, },
mounted() { mounted() {
this.axios /* this.axios.get('https://tianqiapi.com/api', {
.get('https://tianqiapi.com/api', {
params: { params: {
version: 'v6', version: 'v6',
appsecret: 'Ml0dXby6', appsecret: 'Ml0dXby6',
appid: '31268663', appid: '31268663',
}, },
}) }).then(res => {
.then(res => {
this.tian_qi_data = res.data this.tian_qi_data = res.data
}) */
weather({}).then(function(res){
console.log('weather ________________ ', res);
}) })
this.dept() this.dept()
......
src/components/comm/CommVideo.vue
View file @ 1fed3570
...@@ -9,26 +9,30 @@ ...@@ -9,26 +9,30 @@
<el-tab-pane label="十六分屏" name="4"></el-tab-pane> <el-tab-pane label="十六分屏" name="4"></el-tab-pane>
</el-tabs> </el-tabs>
<div v-loading="loading"> <div v-loading="loading">
<div :class="!isVideo?'defaultHeight' : ''">
<div v-if="isVideo">
<div class="player_div" v-if="isIndex == 1"> <div class="player_div" v-if="isIndex == 1">
<LivePlayer class="player" v-for="(item, index) in dataListOne" :key="index" :videoUrl="item" ref="player2" live /> <div class="player-event player" v-for="(item, index) in videoList" @click="checkWindows(item, index, $event)" :key="index" :class="{'active':index === activeIdx}">
<LivePlayer :videoUrl="item.WS_FLV" ref="player1" live />
</div>
</div> </div>
<div class="player_div" v-if="isIndex == 2"> <div class="player_div" v-if="isIndex == 2">
<LivePlayer class="player2" v-for="(item, index) in dataListTwo" :key="index" :videoUrl="item" ref="player2" live /> <div class="player-event player2" v-for="(item, index) in videoList" @click="checkWindows(item, index, $event)" :key="index" :class="{'active':index === activeIdx}">
<LivePlayer :videoUrl="item.WS_FLV" ref="player2" live />
</div>
</div> </div>
<div class="player_div" v-if="isIndex == 3"> <div class="player_div" v-if="isIndex == 3">
<LivePlayer class="player3" v-for="(item, index) in dataListThree" :key="index" :videoUrl="item" ref="player2" live /> <div class="player-event player3" v-for="(item, index) in videoList" @click="checkWindows(item, index, $event)" :key="index" :class="{'active':index === activeIdx}">
<LivePlayer :videoUrl="item.WS_FLV" ref="player3" live />
</div>
</div> </div>
<div class="player_div" v-if="isIndex == 4"> <div class="player_div" v-if="isIndex == 4">
<LivePlayer class="player4" v-for="(item, index) in dataListFour" :key="index" :videoUrl="item" ref="player2" live /> <div class="player-event player4" v-for="(item, index) in videoList" @click="checkWindows(item, index, $event)" :key="index" :class="{'active':index === activeIdx}">
<LivePlayer :videoUrl="item.WS_FLV" ref="player4" live />
</div>
</div> </div>
</div> </div>
<div v-if="!isVideo" style="height: 80vh"> <!-- <div v-if="!isVideo" style="height: 80vh">
<div class="player_div" v-if="isIndex == 1"> <div class="player_div" v-if="isIndex == 1">
<LivePlayer class="player" v-for="(item, index) in dataListOne" :key="index" ref="player2" live /> <LivePlayer class="player" v-for="(item, index) in dataListOne" :key="index" ref="player2" live />
</div> </div>
...@@ -44,23 +48,52 @@ ...@@ -44,23 +48,52 @@
<div class="player_div" v-if="isIndex == 4"> <div class="player_div" v-if="isIndex == 4">
<LivePlayer class="player4" v-for="(item, index) in dataListFour" :key="index" ref="player2" live /> <LivePlayer class="player4" v-for="(item, index) in dataListFour" :key="index" ref="player2" live />
</div> </div>
</div> -->
</div> </div>
</div>
<div class="float-ptz col-md-3 col-lg-2" id="dev-tree-ptz">
<div class="ptz-block" :class="videoItem && videoItem.WS_FLV ? '' : 'disabled'">
<div class="group-1">
<div class="ptz-cell ptz-up" command="up" title="上" @mousedown.prevent="ptzControl" @mouseup.prevent="ptzControl">
<i class="fa fa-chevron-up"></i>
</div>
<div class="ptz-cell ptz-left" command="left" title="左" @mousedown.prevent="ptzControl" @mouseup.prevent="ptzControl">
<i class="fa fa-chevron-left"></i>
</div>
<div class="ptz-cell ptz-center" title="云台控制">
<!-- <i class="fa fa-microphone" title="按住喊话" @mousedown.prevent="talkStart" @mouseup.prevent="talkStart"></i>
<i class="fa fa-microphone-slash" title="由于浏览器安全策略, 非 HTTPS 或 localhost 访问, 对讲不可用" ></i> -->
</div>
<div class="ptz-cell ptz-right" command="right" title="右" @mousedown.prevent="ptzControl" @mouseup.prevent="ptzControl">
<i class="fa fa-chevron-right"></i>
</div>
<div class="ptz-cell ptz-down" command="down" title="下" @mousedown.prevent="ptzControl" @mouseup.prevent="ptzControl">
<i class="fa fa-chevron-down"></i>
</div>
</div>
<div class="group-2">
<div class="ptz-cell ptz-zoomin" command="zoomin" title="放大" @mousedown.prevent="ptzControl" @mouseup.prevent="ptzControl">
<i class="fa fa-plus"></i>
</div>
<div class="ptz-cell ptz-zoomout" command="zoomout" title="缩小" @mousedown.prevent="ptzControl" @mouseup.prevent="ptzControl">
<i class="fa fa-minus"></i>
</div>
</div>
</div>
</div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import "font-awesome/css/font-awesome.css"
import eventBus from "@/utils/eventbus" import eventBus from "@/utils/eventbus"
import LivePlayer from '@liveqing/liveplayer' import LivePlayer from '@liveqing/liveplayer'
import { grouptree, start } from '@/api' import { grouptree, start } from '@/api'
export default { export default {
components: { components: {
LivePlayer, LivePlayer,
}, },
...@@ -71,12 +104,16 @@ export default { ...@@ -71,12 +104,16 @@ export default {
activeName: '1', activeName: '1',
isVideo: false, isVideo: false,
dataList: [], dataList: [],
dataListOne: [], /* dataListOne: [],
dataListTwo: [], dataListTwo: [],
dataListThree: [], dataListThree: [],
dataListFour: [], dataListFour: [], */
videoList:[],
isIndex: 1, isIndex: 1,
loading: true, loading: true,
activeIdx:0,
commandTimer:0,
videoItem:{},
} }
}, },
...@@ -94,7 +131,7 @@ export default { ...@@ -94,7 +131,7 @@ export default {
this.dataList.push(i) this.dataList.push(i)
} }
this.loading = false this.loading = false
this.dataListOne = this.dataList.slice(0, 1) this.videoList = this.dataList.slice(0, 1)
return return
} }
...@@ -106,11 +143,12 @@ export default { ...@@ -106,11 +143,12 @@ export default {
code: item.code, code: item.code,
} }
).then(res => { ).then(res => {
if (res.WS_FLV) { if (res && res.WS_FLV) {
this.dataList.push(res.WS_FLV) this.dataList.push(res)
} }
indexVideo++ indexVideo++
let dataLen = data.list.length let dataLen = data.list.length;
if (dataLen == indexVideo) { if (dataLen == indexVideo) {
setTimeout(() => { setTimeout(() => {
let len = this.dataList.length let len = this.dataList.length
...@@ -118,24 +156,29 @@ export default { ...@@ -118,24 +156,29 @@ export default {
for (let i = 0; i < 16 - len; i++) { for (let i = 0; i < 16 - len; i++) {
this.dataList.push('') this.dataList.push('')
} }
} };
this.loading = false this.loading = false
this.isVideo = true this.isVideo = true
this.dataListOne = this.dataList.slice(0, 1) this.videoList = this.dataList.slice(0, 1);
var item = this.videoList[0];
if(item && res.WS_FLV){
this.videoItem = item;
};
}, 100) }, 100)
} }
}) })
} }
}); });
}, },
methods: { methods: {
handleClick(e) { handleClick(e) {
this.isIndex = e.name this.isIndex = e.name;
var num = [1, 1, 4, 9, 16][this.isIndex] || 1;
this.videoList = this.dataList.slice(0, num);
if (e.name == 1) { /* if (e.name == 1) {
this.dataListOne = this.dataList.slice(0, 1) this.dataListOne = this.dataList.slice(0, 1)
} }
...@@ -149,8 +192,49 @@ export default { ...@@ -149,8 +192,49 @@ export default {
if (e.name == 4) { if (e.name == 4) {
this.dataListFour = this.dataList.slice(0, 16) this.dataListFour = this.dataList.slice(0, 16)
} } */
} },
checkWindows(item, index, e){
if(this.activeIdx !== index){
this.activeIdx = index;
this.videoItem = item
};
},
ptzControl(e) {
var tag = e.target || e.srcElement;
var that = this, player = this.videoItem || {};
tag = tag.nodeName === 'I' ? tag.parentNode : tag;
var command = e.type === 'mousedown' ? tag.getAttribute("command") : 'stop';
// 测试设备
//player.DeviceID = '34020000001110000023';
//player.ChannelID = '34020000001320000096';
if(player && player.FLV && command !== that.command){
clearTimeout(that.commandTimer);
that.command = command;
var FLV = player.FLV;
var http = FLV.match(/(.+?)\:/)[0];
var host = FLV.match(/\/\/(.+?)\//g)[0];
var url = http + host + 'api/v1/control/ptz';
this.axios.get(url, {params:{
serial: player.DeviceID,
code: player.ChannelID,
command: that.command
}});
if(that.command !== 'stop'){
that.commandTimer = setTimeout(function(){ // 3秒后自动停止 (防止浏览器事件异常)
console.log('clear Control ________________ ');
that.command = 'stop';
that.axios.get(url, {params:{
serial: player.DeviceID,
code: player.ChannelID,
command: that.command
}});
}, 3000);
};
};
},
} }
} }
</script> </script>
...@@ -160,11 +244,14 @@ export default { ...@@ -160,11 +244,14 @@ export default {
.player_div { .player_div {
height: 76vh; height: 76vh;
.player-wrapper { .player-event{
display: inline-block; display: inline-block;
margin-right: 1%; margin-right: 1%;
margin-bottom: 1%; margin-bottom: 1%;
} }
.player-wrapper {
width:100%;
}
.player { .player {
width: 100%; width: 100%;
...@@ -187,5 +274,34 @@ export default { ...@@ -187,5 +274,34 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.defaultHeight{height:80vh;}
.player_div {
.active .video-inner {
border: 2px solid red;
}
}
.float-ptz{position:absolute;width:90px;height:120px;top:80px;right:-89px;background:#fff;border-radius:0 10px 10px 0;
.ptz-cell{display:flex;align-items:center;justify-content:center;}
.ptz-cell:active{color:#ccc}
div.disabled{
.ptz-cell{color:#ddd}
}
.group-1{position:absolute;width:100%;height:90px;top:0;left:0;
.ptz-cell{position:absolute;height:30px;width:30px;}
.ptz-up{top:0;left:33.33%;}
.ptz-right{top:33.33%;right:0;}
.ptz-down{bottom:0;right:33.33%;}
.ptz-left{top:33.33%;left:0;}
}
.group-2{position:absolute;width:100%;height:30px;top:90px;left:0px;display:flex;
.ptz-cell{flex:1}
.ptz-zoomin{}
.ptz-zoomout{}
}
.fa{font-size:20px}
}
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment