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 @@
}
}
},
"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": {
"version": "1.0.2",
"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) {
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 @@
<script>
import { randNum } from '@/utils'
import { dept } from '@/api'
import { dept, weather } from '@/api'
export default {
data() {
return {
......@@ -37,16 +37,18 @@ export default {
},
mounted() {
this.axios
.get('https://tianqiapi.com/api', {
/* this.axios.get('https://tianqiapi.com/api', {
params: {
version: 'v6',
appsecret: 'Ml0dXby6',
appid: '31268663',
},
})
.then(res => {
}).then(res => {
this.tian_qi_data = res.data
}) */
weather({}).then(function(res){
console.log('weather ________________ ', res);
})
this.dept()
......
src/components/comm/CommVideo.vue
View file @ 1fed3570
......@@ -9,26 +9,30 @@
<el-tab-pane label="十六分屏" name="4"></el-tab-pane>
</el-tabs>
<div v-loading="loading">
<div v-if="isVideo">
<div :class="!isVideo?'defaultHeight' : ''">
<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 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 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 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 v-if="!isVideo" style="height: 80vh">
<!-- <div v-if="!isVideo" style="height: 80vh">
<div class="player_div" v-if="isIndex == 1">
<LivePlayer class="player" v-for="(item, index) in dataListOne" :key="index" ref="player2" live />
</div>
......@@ -44,23 +48,52 @@
<div class="player_div" v-if="isIndex == 4">
<LivePlayer class="player4" v-for="(item, index) in dataListFour" :key="index" ref="player2" live />
</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>
</div>
</template>
<script>
import "font-awesome/css/font-awesome.css"
import eventBus from "@/utils/eventbus"
import LivePlayer from '@liveqing/liveplayer'
import { grouptree, start } from '@/api'
export default {
components: {
LivePlayer,
},
......@@ -71,12 +104,16 @@ export default {
activeName: '1',
isVideo: false,
dataList: [],
dataListOne: [],
/* dataListOne: [],
dataListTwo: [],
dataListThree: [],
dataListFour: [],
dataListFour: [], */
videoList:[],
isIndex: 1,
loading: true,
activeIdx:0,
commandTimer:0,
videoItem:{},
}
},
......@@ -94,7 +131,7 @@ export default {
this.dataList.push(i)
}
this.loading = false
this.dataListOne = this.dataList.slice(0, 1)
this.videoList = this.dataList.slice(0, 1)
return
}
......@@ -106,11 +143,12 @@ export default {
code: item.code,
}
).then(res => {
if (res.WS_FLV) {
this.dataList.push(res.WS_FLV)
if (res && res.WS_FLV) {
this.dataList.push(res)
}
indexVideo++
let dataLen = data.list.length
let dataLen = data.list.length;
if (dataLen == indexVideo) {
setTimeout(() => {
let len = this.dataList.length
......@@ -118,24 +156,29 @@ export default {
for (let i = 0; i < 16 - len; i++) {
this.dataList.push('')
}
}
};
this.loading = false
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)
}
})
}
});
},
methods: {
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)
}
......@@ -149,8 +192,49 @@ export default {
if (e.name == 4) {
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>
......@@ -160,11 +244,14 @@ export default {
.player_div {
height: 76vh;
.player-wrapper {
.player-event{
display: inline-block;
margin-right: 1%;
margin-bottom: 1%;
}
.player-wrapper {
width:100%;
}
.player {
width: 100%;
......@@ -187,5 +274,34 @@ export default {
display: flex;
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>
\ 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