添加截图（快照）功能
This commit is contained in:
panlinlin
@@ -80,7 +80,7 @@ export default {
|
||||
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url:"/api/user/login",
|
||||
url:"/api/user/login",
|
||||
params: loginParam
|
||||
}).then(function (res) {
|
||||
console.log(JSON.stringify(res));
|
||||
|
||||
@@ -30,10 +30,28 @@
|
||||
<el-table ref="channelListTable" :data="deviceChannelList" :height="winHeight" border style="width: 100%">
|
||||
<el-table-column prop="channelId" label="通道编号" width="210">
|
||||
</el-table-column>
|
||||
<el-table-column prop="channelId" label="设备编号" width="210">
|
||||
<el-table-column prop="deviceId" label="设备编号" width="210">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="通道名称">
|
||||
</el-table-column>
|
||||
<el-table-column label="快照" width="80" align="center">
|
||||
<template slot-scope="scope">
|
||||
<img style="max-height: 3rem;max-width: 4rem;"
|
||||
:id="scope.row.deviceId + '_' + scope.row.channelId"
|
||||
:src="getSnap(scope.row)"
|
||||
@error="getSnapErrorEvent($event.target.id)"
|
||||
alt="">
|
||||
<!-- <el-image-->
|
||||
<!-- :id="'snapImg_' + scope.row.deviceId + '_' + scope.row.channelId"-->
|
||||
<!-- :src="getSnap(scope.row)"-->
|
||||
<!-- @error="getSnapErrorEvent($event, scope.row)"-->
|
||||
<!-- :fit="'contain'">-->
|
||||
<!-- <div slot="error" class="image-slot">-->
|
||||
<!-- <i class="el-icon-picture-outline"></i>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-image>-->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="subCount" label="子节点数">
|
||||
</el-table-column>
|
||||
<el-table-column label="开启音频" align="center">
|
||||
@@ -100,7 +118,8 @@ export default {
|
||||
total: 0,
|
||||
beforeUrl: "/deviceList",
|
||||
isLoging: false,
|
||||
autoList: true
|
||||
autoList: true,
|
||||
loadSnap:{}
|
||||
};
|
||||
},
|
||||
|
||||
@@ -122,7 +141,6 @@ export default {
|
||||
} else {
|
||||
this.showSubchannels();
|
||||
}
|
||||
|
||||
},
|
||||
initParam: function () {
|
||||
this.deviceId = this.$route.params.deviceId;
|
||||
@@ -174,8 +192,6 @@ export default {
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
|
||||
//通知设备上传媒体流
|
||||
@@ -190,18 +206,22 @@ export default {
|
||||
method: 'get',
|
||||
url: '/api/play/start/' + deviceId + '/' + channelId
|
||||
}).then(function (res) {
|
||||
console.log(res.data)
|
||||
let streamId = res.data.streamId;
|
||||
that.isLoging = false;
|
||||
if (!!streamId) {
|
||||
// that.$refs.devicePlayer.play(res.data, deviceId, channelId, itemData.hasAudio);
|
||||
that.$refs.devicePlayer.openDialog("media", deviceId, channelId, {
|
||||
streamInfo: res.data,
|
||||
hasAudio: itemData.hasAudio
|
||||
});
|
||||
that.initData();
|
||||
} else {
|
||||
that.$message.error(res.data);
|
||||
if (res.data.code == 0) {
|
||||
|
||||
setTimeout(()=>{
|
||||
console.log("下载截图")
|
||||
let snapId = deviceId + "_" + channelId;
|
||||
that.loadSnap[snapId] = 0;
|
||||
that.getSnapErrorEvent(snapId)
|
||||
},5000)
|
||||
that.$refs.devicePlayer.openDialog("media", deviceId, channelId, {
|
||||
streamInfo: res.data.data,
|
||||
hasAudio: itemData.hasAudio
|
||||
});
|
||||
that.initData();
|
||||
}else {
|
||||
that.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(function (e) {});
|
||||
},
|
||||
@@ -228,7 +248,24 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
getSnap: function (row){
|
||||
return '/static/snap/' + row.deviceId + '_' + row.channelId + '.jpg'
|
||||
},
|
||||
getSnapErrorEvent: function (id){
|
||||
|
||||
if (typeof (this.loadSnap[id]) != "undefined") {
|
||||
console.log("下载截图" + this.loadSnap[id])
|
||||
if (this.loadSnap[id] > 5) {
|
||||
delete this.loadSnap[id];
|
||||
return;
|
||||
}
|
||||
setTimeout(()=>{
|
||||
this.loadSnap[id] ++
|
||||
document.getElementById(id).setAttribute("src", '/static/snap/' + id + '.jpg?' + new Date().getTime())
|
||||
},1000)
|
||||
|
||||
}
|
||||
},
|
||||
showDevice: function () {
|
||||
this.$router.push(this.beforeUrl).then(() => {
|
||||
this.initParam();
|
||||
|
||||
@@ -24,6 +24,9 @@
|
||||
<div v-for="index of timeNode" class="timeQuery-label-cell" :style="'left:' + (100.0/timeNode*index).toFixed(4) + '%'">
|
||||
<div class="timeQuery-label-cell-label">{{24/timeNode * index}}</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="item of allDataList" >{{!!item.name?item.name:item.dname}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -36,6 +39,7 @@ export default {
|
||||
name: "test",
|
||||
data() {
|
||||
return {
|
||||
allDataList:[],
|
||||
timeNode: 24,
|
||||
recordData:[
|
||||
{
|
||||
@@ -58,6 +62,32 @@ export default {
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
var list1 = [{
|
||||
key: Math.random()*10,
|
||||
name: "人1"
|
||||
},{
|
||||
key: Math.random()*10,
|
||||
name: "人2"
|
||||
},{
|
||||
key: Math.random()*10,
|
||||
name: "人3"
|
||||
}]
|
||||
var list2 = [{
|
||||
key: Math.random()*10,
|
||||
dname: "部门1"
|
||||
},{
|
||||
key: Math.random()*10,
|
||||
dname: "部门2"
|
||||
},{
|
||||
key: Math.random()*10,
|
||||
dname: "部门3"
|
||||
}]
|
||||
|
||||
var allData = list1.concat(list2)
|
||||
allData.sort((a, b)=>{
|
||||
return a.key-b.key;
|
||||
})
|
||||
this.allDataList = allData;
|
||||
for (let i = 1; i <= 24; i++) {
|
||||
console.log("<div class=\"timeQuery-label-cell\" style=\"left: " + (100.0/24*i).toFixed(4) + "%\"></div>")
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user