Merge branch 'master' into 重构/1078
This commit is contained in:
648540858
98
web_src/src/components/common/mediaInfo.vue
Normal file
98
web_src/src/components/common/mediaInfo.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div id="mediaInfo" >
|
||||
<el-button style="position: absolute; right: 1rem;" icon="el-icon-refresh-right" circle size="mini" @click="getMediaInfo"></el-button>
|
||||
<el-descriptions size="mini" :column="3" title="概况">
|
||||
<el-descriptions-item label="观看人数">{{ info.readerCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="网络">{{ formatByteSpeed() }}</el-descriptions-item>
|
||||
<el-descriptions-item label="持续时间">{{info.aliveSecond}}秒</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr">
|
||||
<el-descriptions size="mini" v-if="info.videoCodec" :column="2" title="视频信息">
|
||||
<el-descriptions-item label="编码">{{ info.videoCodec }}</el-descriptions-item>
|
||||
<el-descriptions-item label="分辨率"
|
||||
>{{ info.width }}x{{ info.height }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="FPS">{{ info.fps }}</el-descriptions-item>
|
||||
<el-descriptions-item label="丢包率">{{ info.loss }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions size="mini" v-if="info.audioCodec" :column="2" title="音频信息">
|
||||
<el-descriptions-item label="编码">
|
||||
{{ info.audioCodec }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="采样率">{{ info.audioSampleRate }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "mediaInfo",
|
||||
props: [ 'app', 'stream', 'mediaServerId'],
|
||||
components: {},
|
||||
created() {
|
||||
this.getMediaInfo()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
info: {}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getMediaInfo: function () {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/server/media_server/media_info`,
|
||||
params: {
|
||||
app: this.app,
|
||||
stream: this.stream,
|
||||
mediaServerId: this.mediaServerId,
|
||||
}
|
||||
}).then((res)=> {
|
||||
console.log(res.data.data);
|
||||
if (res.data.code === 0) {
|
||||
this.info = res.data.data
|
||||
}
|
||||
|
||||
}).catch((error)=> {
|
||||
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
formatByteSpeed: function (){
|
||||
let bytesSpeed = this.info.bytesSpeed
|
||||
let num = 1024.0 //byte
|
||||
if (bytesSpeed < num) return bytesSpeed + ' B/S'
|
||||
if (bytesSpeed < Math.pow(num, 2)) return (bytesSpeed / num).toFixed(2) + ' KB/S' //kb
|
||||
if (bytesSpeed < Math.pow(num, 3))
|
||||
return (bytesSpeed / Math.pow(num, 2)).toFixed(2) + ' MB/S' //M
|
||||
if (bytesSpeed < Math.pow(num, 4))
|
||||
return (bytesSpeed / Math.pow(num, 3)).toFixed(2) + ' G/S' //G
|
||||
return (bytesSpeed / Math.pow(num, 4)).toFixed(2) + ' T/S' //T
|
||||
},
|
||||
formatAliveSecond: function (){
|
||||
let aliveSecond = this.info.aliveSecond
|
||||
const h = parseInt(aliveSecond.value / 3600)
|
||||
const minute = parseInt((aliveSecond.value / 60) % 60)
|
||||
const second = Math.ceil(aliveSecond.value % 60)
|
||||
|
||||
const hours = h < 10 ? '0' + h : h
|
||||
const formatSecond = second > 59 ? 59 : second
|
||||
return `${hours > 0 ? `${hours}小时` : ''}${minute < 10 ? '0' + minute : minute}分${
|
||||
formatSecond < 10 ? '0' + formatSecond : formatSecond
|
||||
}秒`
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.channel-form {
|
||||
display: grid;
|
||||
background-color: #FFFFFF;
|
||||
padding: 1rem 2rem 0 2rem;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
426
web_src/src/components/common/ptzCruising.vue
Normal file
426
web_src/src/components/common/ptzCruising.vue
Normal file
@@ -0,0 +1,426 @@
|
||||
<template>
|
||||
<div id="ptzCruising">
|
||||
<div style="display: grid; grid-template-columns: 80px auto; line-height: 28px">
|
||||
<span>巡航组号: </span>
|
||||
<el-input
|
||||
min="1"
|
||||
max="255"
|
||||
placeholder="巡航组号"
|
||||
addonBefore="巡航组号"
|
||||
addonAfter="(1-255)"
|
||||
v-model="cruiseId"
|
||||
size="mini"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
<p>
|
||||
<el-tag v-for="(item, index) in presetList"
|
||||
key="item.presetId"
|
||||
closable
|
||||
@close="delPreset(item, index)"
|
||||
style="margin-right: 1rem; cursor: pointer"
|
||||
>
|
||||
{{item.presetName?item.presetName:item.presetId}}
|
||||
</el-tag>
|
||||
</p>
|
||||
|
||||
<el-form size="mini" :inline="true" v-if="selectPresetVisible">
|
||||
<el-form-item >
|
||||
<el-select v-model="selectPreset" placeholder="请选择预置点">
|
||||
<el-option
|
||||
v-for="item in allPresetList"
|
||||
:key="item.presetId"
|
||||
:label="item.presetName"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="addCruisePoint">保存</el-button>
|
||||
<el-button type="primary" @click="cancelAddCruisePoint">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button size="mini" v-else @click="selectPresetVisible=true">添加巡航点</el-button>
|
||||
|
||||
<el-form size="mini" :inline="true" v-if="setSpeedVisible">
|
||||
<el-form-item >
|
||||
<el-input
|
||||
min="1"
|
||||
max="4095"
|
||||
placeholder="巡航速度"
|
||||
addonBefore="巡航速度"
|
||||
addonAfter="(1-4095)"
|
||||
v-if="setSpeedVisible"
|
||||
v-model="cruiseSpeed"
|
||||
size="mini"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="setCruiseSpeed">保存</el-button>
|
||||
<el-button @click="cancelSetCruiseSpeed">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button v-else size="mini" @click="setSpeedVisible = true">设置巡航速度</el-button>
|
||||
|
||||
|
||||
|
||||
<el-form size="mini" :inline="true" v-if="setTimeVisible">
|
||||
<el-form-item >
|
||||
<el-input
|
||||
min="1"
|
||||
max="4095"
|
||||
placeholder="巡航停留时间(秒)"
|
||||
addonBefore="巡航停留时间(秒)"
|
||||
addonAfter="(1-4095)"
|
||||
style="width: 100%;"
|
||||
v-model="cruiseTime"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="setCruiseTime">保存</el-button>
|
||||
<el-button @click="cancelSetCruiseTime">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button v-else size="mini" @click="setTimeVisible = true">设置巡航时间</el-button>
|
||||
<el-button size="mini" @click="startCruise">开始巡航</el-button>
|
||||
<el-button size="mini" @click="stopCruise">停止巡航</el-button>
|
||||
<el-button size="mini" type="danger" @click="deleteCruise">删除巡航</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "ptzCruising",
|
||||
props: [ 'channelDeviceId', 'deviceId'],
|
||||
components: {},
|
||||
created() {
|
||||
this.getPresetList()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cruiseId: 1,
|
||||
presetList: [],
|
||||
allPresetList: [],
|
||||
selectPreset: "",
|
||||
inputVisible: false,
|
||||
selectPresetVisible: false,
|
||||
setSpeedVisible: false,
|
||||
setTimeVisible: false,
|
||||
cruiseSpeed: '',
|
||||
cruiseTime: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getPresetList: function () {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/front-end/preset/query/${this.deviceId}/${this.channelDeviceId}`,
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
this.allPresetList = res.data.data;
|
||||
}
|
||||
|
||||
}).catch((error)=> {
|
||||
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
addCruisePoint: function (){
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
fullscreen: true,
|
||||
text: '正在发送指令',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/front-end/cruise/point/add/${this.deviceId}/${this.channelDeviceId}`,
|
||||
params: {
|
||||
cruiseId: this.cruiseId,
|
||||
presetId: this.selectPreset.presetId
|
||||
}
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
this.presetList.push(this.selectPreset)
|
||||
}else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error)=> {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
});
|
||||
}).finally(()=>{
|
||||
this.selectPreset = ""
|
||||
this.selectPresetVisible = false;
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
cancelAddCruisePoint: function () {
|
||||
this.selectPreset = ""
|
||||
this.selectPresetVisible = false;
|
||||
},
|
||||
delPreset: function (preset, index){
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
fullscreen: true,
|
||||
text: '正在发送指令',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/front-end/cruise/point/delete/${this.deviceId}/${this.channelDeviceId}`,
|
||||
params: {
|
||||
cruiseId: this.cruiseId,
|
||||
presetId: preset.presetId
|
||||
}
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
this.presetList.splice(index, 1)
|
||||
}else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error)=> {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
});
|
||||
}).finally(()=>{
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
deleteCruise: function (preset, index){
|
||||
this.$confirm("确定删除此巡航组", '提示', {
|
||||
dangerouslyUseHTMLString: true,
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
fullscreen: true,
|
||||
text: '正在发送指令',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/front-end/cruise/point/delete/${this.deviceId}/${this.channelDeviceId}`,
|
||||
params: {
|
||||
cruiseId: this.cruiseId,
|
||||
presetId: 0
|
||||
}
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
this.presetList = []
|
||||
}else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error)=> {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
});
|
||||
}).finally(()=>{
|
||||
loading.close()
|
||||
})
|
||||
})
|
||||
},
|
||||
setCruiseSpeed: function (){
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
fullscreen: true,
|
||||
text: '正在发送指令',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/front-end/cruise/speed/${this.deviceId}/${this.channelDeviceId}`,
|
||||
params: {
|
||||
cruiseId: this.cruiseId,
|
||||
speed: this.cruiseSpeed
|
||||
}
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: "保存成功",
|
||||
type: 'success'
|
||||
});
|
||||
}else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error)=> {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
});
|
||||
}).finally(()=>{
|
||||
this.cruiseSpeed = ""
|
||||
this.setSpeedVisible = false
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
cancelSetCruiseSpeed: function (){
|
||||
this.cruiseSpeed = ""
|
||||
this.setSpeedVisible = false
|
||||
},
|
||||
setCruiseTime: function (){
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
fullscreen: true,
|
||||
text: '正在发送指令',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/front-end/cruise/time/${this.deviceId}/${this.channelDeviceId}`,
|
||||
params: {
|
||||
cruiseId: this.cruiseId,
|
||||
time: this.cruiseTime
|
||||
}
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: "保存成功",
|
||||
type: 'success'
|
||||
});
|
||||
}else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error)=> {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
});
|
||||
}).finally(()=>{
|
||||
this.setTimeVisible = false;
|
||||
this.cruiseTime = "";
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
cancelSetCruiseTime: function (){
|
||||
this.setTimeVisible = false;
|
||||
this.cruiseTime = "";
|
||||
},
|
||||
startCruise: function (){
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
fullscreen: true,
|
||||
text: '正在发送指令',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/front-end/cruise/start/${this.deviceId}/${this.channelDeviceId}`,
|
||||
params: {
|
||||
cruiseId: this.cruiseId
|
||||
}
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: "发送成功",
|
||||
type: 'success'
|
||||
});
|
||||
}else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error)=> {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
});
|
||||
}).finally(()=>{
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
stopCruise: function (){
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
fullscreen: true,
|
||||
text: '正在发送指令',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/front-end/cruise/stop/${this.deviceId}/${this.channelDeviceId}`,
|
||||
params: {
|
||||
cruiseId: this.cruiseId
|
||||
}
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: "发送成功",
|
||||
type: 'success'
|
||||
});
|
||||
}else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error)=> {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
});
|
||||
}).finally(()=>{
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.channel-form {
|
||||
display: grid;
|
||||
background-color: #FFFFFF;
|
||||
padding: 1rem 2rem 0 2rem;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
212
web_src/src/components/common/ptzPreset.vue
Normal file
212
web_src/src/components/common/ptzPreset.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div id="ptzPreset" style="width: 100%">
|
||||
<el-tag v-for="item in presetList"
|
||||
key="item.presetId"
|
||||
closable
|
||||
@close="delPreset(item)"
|
||||
@click="gotoPreset(item)"
|
||||
size="mini"
|
||||
style="margin-right: 1rem; cursor: pointer; margin-bottom: 0.6rem"
|
||||
>
|
||||
{{item.presetName?item.presetName:item.presetId}}
|
||||
</el-tag>
|
||||
<el-input
|
||||
min="1"
|
||||
max="255"
|
||||
placeholder="预置位编号"
|
||||
addonBefore="预置位编号"
|
||||
addonAfter="(1-255)"
|
||||
style="width: 300px; vertical-align: bottom;"
|
||||
v-if="inputVisible"
|
||||
v-model="ptzPresetId"
|
||||
ref="saveTagInput"
|
||||
size="small"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<el-button @click="addPreset()">保存</el-button>
|
||||
<el-button @click="cancel()">取消</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-button v-else size="small" @click="showInput">+ 添加</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "ptzPreset",
|
||||
props: [ 'channelDeviceId', 'deviceId'],
|
||||
components: {},
|
||||
created() {
|
||||
this.getPresetList()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
presetList: [],
|
||||
inputVisible: false,
|
||||
ptzPresetId: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getPresetList: function () {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/front-end/preset/query/${this.deviceId}/${this.channelDeviceId}`,
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
this.presetList = res.data.data;
|
||||
// 防止出现表格错位
|
||||
this.$nextTick(() => {
|
||||
this.$refs.channelListTable.doLayout();
|
||||
})
|
||||
}
|
||||
|
||||
}).catch((error)=> {
|
||||
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
showInput() {
|
||||
this.inputVisible = true;
|
||||
this.$nextTick(_ => {
|
||||
this.$refs.saveTagInput.$refs.input.focus();
|
||||
});
|
||||
},
|
||||
addPreset: function (){
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
fullscreen: true,
|
||||
text: '正在发送指令',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/front-end/preset/add/${this.deviceId}/${this.channelDeviceId}`,
|
||||
params: {
|
||||
presetId: this.ptzPresetId
|
||||
}
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
setTimeout(()=>{
|
||||
loading.close()
|
||||
this.inputVisible = false;
|
||||
this.ptzPresetId = ""
|
||||
this.getPresetList()
|
||||
}, 1000)
|
||||
}else {
|
||||
loading.close()
|
||||
this.inputVisible = false;
|
||||
this.ptzPresetId = ""
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error)=> {
|
||||
loading.close()
|
||||
this.inputVisible = false;
|
||||
this.ptzPresetId = ""
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
});
|
||||
});
|
||||
},
|
||||
cancel: function () {
|
||||
this.inputVisible = false;
|
||||
this.ptzPresetId = ""
|
||||
},
|
||||
gotoPreset: function (preset){
|
||||
console.log(preset)
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/front-end/preset/call/${this.deviceId}/${this.channelDeviceId}`,
|
||||
params: {
|
||||
presetId: preset.presetId
|
||||
}
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '调用成功',
|
||||
type: 'success'
|
||||
});
|
||||
}else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error)=> {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
});
|
||||
});
|
||||
},
|
||||
delPreset: function (preset){
|
||||
this.$confirm("确定删除此预置位", '提示', {
|
||||
dangerouslyUseHTMLString: true,
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
fullscreen: true,
|
||||
text: '正在发送指令',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/front-end/preset/delete/${this.deviceId}/${this.channelDeviceId}`,
|
||||
params: {
|
||||
presetId: preset.presetId
|
||||
}
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
setTimeout(()=>{
|
||||
loading.close()
|
||||
this.getPresetList()
|
||||
}, 1000)
|
||||
}else {
|
||||
loading.close()
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
|
||||
}).catch((error)=> {
|
||||
loading.close()
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.channel-form {
|
||||
display: grid;
|
||||
background-color: #FFFFFF;
|
||||
padding: 1rem 2rem 0 2rem;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
273
web_src/src/components/common/ptzScan.vue
Normal file
273
web_src/src/components/common/ptzScan.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div id="ptzScan">
|
||||
<div style="display: grid; grid-template-columns: 80px auto; line-height: 28px">
|
||||
<span>扫描组号: </span>
|
||||
<el-input
|
||||
min="1"
|
||||
max="255"
|
||||
placeholder="扫描组号"
|
||||
addonBefore="扫描组号"
|
||||
addonAfter="(1-255)"
|
||||
v-model="scanId"
|
||||
size="mini"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<el-button size="mini" @click="setScanLeft">设置左边界</el-button>
|
||||
<el-button size="mini" @click="setScanRight">设置右边界</el-button>
|
||||
|
||||
<el-form size="mini" :inline="true" v-if="setSpeedVisible">
|
||||
<el-form-item >
|
||||
<el-input
|
||||
min="1"
|
||||
max="4095"
|
||||
placeholder="巡航速度"
|
||||
addonBefore="巡航速度"
|
||||
addonAfter="(1-4095)"
|
||||
v-if="setSpeedVisible"
|
||||
v-model="speed"
|
||||
size="mini"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="setSpeed">保存</el-button>
|
||||
<el-button @click="cancelSetSpeed">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button v-else size="mini" @click="setSpeedVisible = true">设置扫描速度</el-button>
|
||||
|
||||
<el-button size="mini" @click="startScan">开始自动扫描</el-button>
|
||||
<el-button size="mini" @click="stopScan">停止自动扫描</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "ptzScan",
|
||||
props: [ 'channelDeviceId', 'deviceId'],
|
||||
components: {},
|
||||
created() {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scanId: 1,
|
||||
setSpeedVisible: false,
|
||||
speed: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
setSpeed: function (){
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
fullscreen: true,
|
||||
text: '正在发送指令',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/front-end/scan/set/speed/${this.deviceId}/${this.channelDeviceId}`,
|
||||
params: {
|
||||
scanId: this.scanId,
|
||||
speed: this.speed
|
||||
}
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: "保存成功",
|
||||
type: 'success'
|
||||
});
|
||||
}else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error)=> {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
});
|
||||
}).finally(()=>{
|
||||
this.speed = ""
|
||||
this.setSpeedVisible = false
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
cancelSetSpeed: function (){
|
||||
this.speed = ""
|
||||
this.setSpeedVisible = false
|
||||
},
|
||||
setScanLeft: function (){
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
fullscreen: true,
|
||||
text: '正在发送指令',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/front-end/scan/set/left/${this.deviceId}/${this.channelDeviceId}`,
|
||||
params: {
|
||||
scanId: this.scanId,
|
||||
}
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: "保存成功",
|
||||
type: 'success'
|
||||
});
|
||||
}else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error)=> {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
});
|
||||
}).finally(()=>{
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
setScanRight: function (){
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
fullscreen: true,
|
||||
text: '正在发送指令',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/front-end/scan/set/right/${this.deviceId}/${this.channelDeviceId}`,
|
||||
params: {
|
||||
scanId: this.scanId,
|
||||
}
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: "保存成功",
|
||||
type: 'success'
|
||||
});
|
||||
}else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error)=> {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
});
|
||||
}).finally(()=>{
|
||||
this.setSpeedVisible = false;
|
||||
this.speed = "";
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
startScan: function (){
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
fullscreen: true,
|
||||
text: '正在发送指令',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/front-end/scan/start/${this.deviceId}/${this.channelDeviceId}`,
|
||||
params: {
|
||||
scanId: this.scanId
|
||||
}
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: "发送成功",
|
||||
type: 'success'
|
||||
});
|
||||
}else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error)=> {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
});
|
||||
}).finally(()=>{
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
stopScan: function (){
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
fullscreen: true,
|
||||
text: '正在发送指令',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/front-end/scan/stop/${this.deviceId}/${this.channelDeviceId}`,
|
||||
params: {
|
||||
scanId: this.scanId
|
||||
}
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: "发送成功",
|
||||
type: 'success'
|
||||
});
|
||||
}else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error)=> {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
});
|
||||
}).finally(()=>{
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.channel-form {
|
||||
display: grid;
|
||||
background-color: #FFFFFF;
|
||||
padding: 1rem 2rem 0 2rem;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
90
web_src/src/components/common/ptzSwitch.vue
Normal file
90
web_src/src/components/common/ptzSwitch.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div id="ptzScan">
|
||||
<el-form size="mini" :inline="true" >
|
||||
<el-form-item >
|
||||
<el-input
|
||||
min="1"
|
||||
max="4095"
|
||||
placeholder="开关编号"
|
||||
addonBefore="开关编号"
|
||||
addonAfter="(2-255)"
|
||||
v-model="switchId"
|
||||
size="mini"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="mini" @click="open('on')">开启</el-button>
|
||||
<el-button size="mini" @click="open('off')">关闭</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "ptzScan",
|
||||
props: [ 'channelDeviceId', 'deviceId'],
|
||||
components: {},
|
||||
created() {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
switchId: 1,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
open: function (command){
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
fullscreen: true,
|
||||
text: '正在发送指令',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/front-end/auxiliary/${this.deviceId}/${this.channelDeviceId}`,
|
||||
params: {
|
||||
command: command,
|
||||
switchId: this.switchId,
|
||||
}
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: "保存成功",
|
||||
type: 'success'
|
||||
});
|
||||
}else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error)=> {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
});
|
||||
}).finally(()=>{
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.channel-form {
|
||||
display: grid;
|
||||
background-color: #FFFFFF;
|
||||
padding: 1rem 2rem 0 2rem;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
70
web_src/src/components/common/ptzWiper.vue
Normal file
70
web_src/src/components/common/ptzWiper.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div id="ptzWiper">
|
||||
<el-button size="mini" @click="open('on')">开启</el-button>
|
||||
<el-button size="mini" @click="open('off')">关闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "ptzWiper",
|
||||
props: [ 'channelDeviceId', 'deviceId'],
|
||||
components: {},
|
||||
created() {
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
open: function (command){
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
fullscreen: true,
|
||||
text: '正在发送指令',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/front-end/wiper/${this.deviceId}/${this.channelDeviceId}`,
|
||||
params: {
|
||||
command: command,
|
||||
}
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: "保存成功",
|
||||
type: 'success'
|
||||
});
|
||||
}else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error)=> {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: error,
|
||||
type: 'error'
|
||||
});
|
||||
}).finally(()=>{
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.channel-form {
|
||||
display: grid;
|
||||
background-color: #FFFFFF;
|
||||
padding: 1rem 2rem 0 2rem;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -26,6 +26,7 @@
|
||||
|
||||
</div>
|
||||
<div id="shared" style="text-align: right; margin-top: 1rem;">
|
||||
|
||||
<el-tabs v-model="tabActiveName" @tab-click="tabHandleClick">
|
||||
<el-tab-pane label="实时视频" name="media">
|
||||
<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
|
||||
@@ -154,148 +155,84 @@
|
||||
<!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
|
||||
<!--遥控界面-->
|
||||
<el-tab-pane label="云台控制" name="control" v-if="showPtz">
|
||||
<div style="display: flex; justify-content: left;">
|
||||
<div class="control-wrapper">
|
||||
<div class="control-btn control-top" @mousedown="ptzCamera('up')" @mouseup="ptzCamera('stop')">
|
||||
<i class="el-icon-caret-top"></i>
|
||||
<div class="control-inner-btn control-inner"></div>
|
||||
<div style="display: grid; grid-template-columns: 240px auto; height: 180px; overflow: auto">
|
||||
<div style="display: grid; grid-template-columns: 6.25rem auto;">
|
||||
|
||||
<div class="control-wrapper">
|
||||
<div class="control-btn control-top" @mousedown="ptzCamera('up')" @mouseup="ptzCamera('stop')">
|
||||
<i class="el-icon-caret-top"></i>
|
||||
<div class="control-inner-btn control-inner"></div>
|
||||
</div>
|
||||
<div class="control-btn control-left" @mousedown="ptzCamera('left')" @mouseup="ptzCamera('stop')">
|
||||
<i class="el-icon-caret-left"></i>
|
||||
<div class="control-inner-btn control-inner"></div>
|
||||
</div>
|
||||
<div class="control-btn control-bottom" @mousedown="ptzCamera('down')" @mouseup="ptzCamera('stop')">
|
||||
<i class="el-icon-caret-bottom"></i>
|
||||
<div class="control-inner-btn control-inner"></div>
|
||||
</div>
|
||||
<div class="control-btn control-right" @mousedown="ptzCamera('right')" @mouseup="ptzCamera('stop')">
|
||||
<i class="el-icon-caret-right"></i>
|
||||
<div class="control-inner-btn control-inner"></div>
|
||||
</div>
|
||||
<div class="control-round">
|
||||
<div class="control-round-inner"><i class="fa fa-pause-circle"></i></div>
|
||||
</div>
|
||||
<div class="contro-speed" style="position: absolute; left: 4px; top: 7rem; width: 6.25rem;">
|
||||
<el-slider v-model="controSpeed" :max="100"></el-slider>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-btn control-left" @mousedown="ptzCamera('left')" @mouseup="ptzCamera('stop')">
|
||||
<i class="el-icon-caret-left"></i>
|
||||
<div class="control-inner-btn control-inner"></div>
|
||||
</div>
|
||||
<div class="control-btn control-bottom" @mousedown="ptzCamera('down')" @mouseup="ptzCamera('stop')">
|
||||
<i class="el-icon-caret-bottom"></i>
|
||||
<div class="control-inner-btn control-inner"></div>
|
||||
</div>
|
||||
<div class="control-btn control-right" @mousedown="ptzCamera('right')" @mouseup="ptzCamera('stop')">
|
||||
<i class="el-icon-caret-right"></i>
|
||||
<div class="control-inner-btn control-inner"></div>
|
||||
</div>
|
||||
<div class="control-round">
|
||||
<div class="control-round-inner"><i class="fa fa-pause-circle"></i></div>
|
||||
</div>
|
||||
<div style="position: absolute; left: 7.25rem; top: 1.25rem" @mousedown="ptzCamera('zoomin')"
|
||||
@mouseup="ptzCamera('stop')"><i class="el-icon-zoom-in control-zoom-btn"
|
||||
style="font-size: 1.875rem;"></i></div>
|
||||
<div style="position: absolute; left: 7.25rem; top: 3.25rem; font-size: 1.875rem;"
|
||||
@mousedown="ptzCamera('zoomout')" @mouseup="ptzCamera('stop')"><i
|
||||
class="el-icon-zoom-out control-zoom-btn"></i></div>
|
||||
<div class="contro-speed" style="position: absolute; left: 4px; top: 7rem; width: 9rem;">
|
||||
<el-slider v-model="controSpeed" :max="255"></el-slider>
|
||||
<div>
|
||||
<div class="ptz-btn-box">
|
||||
<div style="" @mousedown="ptzCamera('zoomin')" @mouseup="ptzCamera('stop')" title="变倍+">
|
||||
<i class="el-icon-zoom-in control-zoom-btn" style="font-size: 1.5rem;"></i>
|
||||
</div>
|
||||
<div style="" @mousedown="ptzCamera('zoomout')" @mouseup="ptzCamera('stop')" title="变倍-">
|
||||
<i class="el-icon-zoom-out control-zoom-btn" style="font-size: 1.5rem;"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ptz-btn-box">
|
||||
<div @mousedown="focusCamera('near')" @mouseup="focusCamera('stop')" title="聚焦+">
|
||||
<i class="iconfont icon-bianjiao-fangda control-zoom-btn" style="font-size: 1.5rem;"></i>
|
||||
</div>
|
||||
<div @mousedown="focusCamera('far')" @mouseup="focusCamera('stop')" title="聚焦-">
|
||||
<i class="iconfont icon-bianjiao-suoxiao control-zoom-btn" style="font-size: 1.5rem;"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ptz-btn-box">
|
||||
<div @mousedown="irisCamera('in')" @mouseup="irisCamera('stop')" title="光圈+">
|
||||
<i class="iconfont icon-guangquan control-zoom-btn" style="font-size: 1.5rem;"></i>
|
||||
</div>
|
||||
<div @mousedown="pirisCamera('out')" @mouseup="irisCamera('stop')" title="光圈-">
|
||||
<i class="iconfont icon-guangquan- control-zoom-btn" style="font-size: 1.5rem;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: left" >
|
||||
<el-select
|
||||
v-model="ptzMethod"
|
||||
style="width: 100%"
|
||||
size="mini"
|
||||
placeholder="请选择云台功能"
|
||||
>
|
||||
<el-option label="预置点" value="preset"></el-option>
|
||||
<el-option label="巡航组" value="cruise"></el-option>
|
||||
<el-option label="自动扫描" value="scan"></el-option>
|
||||
<el-option label="雨刷" value="wiper"></el-option>
|
||||
<el-option label="辅助开关" value="switch"></el-option>
|
||||
</el-select>
|
||||
|
||||
<div class="control-panel">
|
||||
<el-button-group>
|
||||
<el-tag style="position :absolute; left: 0rem; top: 0rem; width: 5rem; text-align: center"
|
||||
size="medium">预置位编号
|
||||
</el-tag>
|
||||
<el-input-number style="position: absolute; left: 5rem; top: 0rem; width: 6rem" size="mini"
|
||||
v-model="presetPos" controls-position="right" :precision="0" :step="1" :min="1"
|
||||
:max="255"></el-input-number>
|
||||
<el-button style="position: absolute; left: 11rem; top: 0rem; width: 5rem" size="mini"
|
||||
icon="el-icon-add-location" @click="presetPosition(129, presetPos)">设置
|
||||
</el-button>
|
||||
<el-button style="position: absolute; left: 27rem; top: 0rem; width: 5rem" size="mini" type="primary"
|
||||
icon="el-icon-place" @click="presetPosition(130, presetPos)">调用
|
||||
</el-button>
|
||||
<el-button style="position: absolute; left: 16rem; top: 0rem; width: 5rem" size="mini"
|
||||
icon="el-icon-delete-location" @click="presetPosition(131, presetPos)">删除
|
||||
</el-button>
|
||||
<el-tag style="position :absolute; left: 0rem; top: 2.5rem; width: 5rem; text-align: center"
|
||||
size="medium">巡航速度
|
||||
</el-tag>
|
||||
<el-input-number style="position: absolute; left: 5rem; top: 2.5rem; width: 6rem" size="mini"
|
||||
v-model="cruisingSpeed" controls-position="right" :precision="0" :min="1"
|
||||
:max="4095"></el-input-number>
|
||||
<el-button style="position: absolute; left: 11rem; top: 2.5rem; width: 5rem" size="mini"
|
||||
icon="el-icon-loading" @click="setSpeedOrTime(134, cruisingGroup, cruisingSpeed)">设置
|
||||
</el-button>
|
||||
<el-tag style="position :absolute; left: 16rem; top: 2.5rem; width: 5rem; text-align: center"
|
||||
size="medium">停留时间
|
||||
</el-tag>
|
||||
<el-input-number style="position: absolute; left: 21rem; top: 2.5rem; width: 6rem" size="mini"
|
||||
v-model="cruisingTime" controls-position="right" :precision="0" :min="1"
|
||||
:max="4095"></el-input-number>
|
||||
<el-button style="position: absolute; left: 27rem; top: 2.5rem; width: 5rem" size="mini"
|
||||
icon="el-icon-timer" @click="setSpeedOrTime(135, cruisingGroup, cruisingTime)">设置
|
||||
</el-button>
|
||||
<el-tag style="position :absolute; left: 0rem; top: 4.5rem; width: 5rem; text-align: center"
|
||||
size="medium">巡航组编号
|
||||
</el-tag>
|
||||
<el-input-number style="position: absolute; left: 5rem; top: 4.5rem; width: 6rem" size="mini"
|
||||
v-model="cruisingGroup" controls-position="right" :precision="0" :min="0"
|
||||
:max="255"></el-input-number>
|
||||
<el-button style="position: absolute; left: 11rem; top: 4.5rem; width: 5rem" size="mini"
|
||||
icon="el-icon-add-location" @click="setCommand(132, cruisingGroup, presetPos)">添加点
|
||||
</el-button>
|
||||
<el-button style="position: absolute; left: 16rem; top: 4.5rem; width: 5rem" size="mini"
|
||||
icon="el-icon-delete-location" @click="setCommand(133, cruisingGroup, presetPos)">删除点
|
||||
</el-button>
|
||||
<el-button style="position: absolute; left: 21rem; top: 4.5rem; width: 5rem" size="mini"
|
||||
icon="el-icon-delete" @click="setCommand(133, cruisingGroup, 0)">删除组
|
||||
</el-button>
|
||||
<el-button style="position: absolute; left: 27rem; top: 5rem; width: 5rem" size="mini" type="primary"
|
||||
icon="el-icon-video-camera-solid" @click="setCommand(136, cruisingGroup, 0)">巡航
|
||||
</el-button>
|
||||
<el-tag style="position :absolute; left: 0rem; top: 7rem; width: 5rem; text-align: center"
|
||||
size="medium">扫描速度
|
||||
</el-tag>
|
||||
<el-input-number style="position: absolute; left: 5rem; top: 7rem; width: 6rem" size="mini"
|
||||
v-model="scanSpeed" controls-position="right" :precision="0" :min="1"
|
||||
:max="4095"></el-input-number>
|
||||
<el-button style="position: absolute; left: 11rem; top: 7rem; width: 5rem" size="mini"
|
||||
icon="el-icon-loading" @click="setSpeedOrTime(138, scanGroup, scanSpeed)">设置
|
||||
</el-button>
|
||||
<el-tag style="position :absolute; left: 0rem; top: 9rem; width: 5rem; text-align: center"
|
||||
size="medium">扫描组编号
|
||||
</el-tag>
|
||||
<el-input-number style="position: absolute; left: 5rem; top: 9rem; width: 6rem" size="mini"
|
||||
v-model="scanGroup" controls-position="right" :precision="0" :step="1" :min="0"
|
||||
:max="255"></el-input-number>
|
||||
<el-button style="position: absolute; left: 11rem; top: 9rem; width: 5rem" size="mini"
|
||||
icon="el-icon-d-arrow-left" @click="setCommand(137, scanGroup, 1)">左边界
|
||||
</el-button>
|
||||
<el-button style="position: absolute; left: 16rem; top: 9rem; width: 5rem" size="mini"
|
||||
icon="el-icon-d-arrow-right" @click="setCommand(137, scanGroup, 2)">右边界
|
||||
</el-button>
|
||||
<el-button style="position: absolute; left: 27rem; top: 7rem; width: 5rem" size="mini" type="primary"
|
||||
icon="el-icon-video-camera-solid" @click="setCommand(137, scanGroup, 0)">扫描
|
||||
</el-button>
|
||||
<el-button style="position: absolute; left: 27rem; top: 9rem; width: 5rem" size="mini" type="danger"
|
||||
icon="el-icon-switch-button" @click="ptzCamera('stop')">停止
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<ptzPreset :channelDeviceId="channelId" :deviceId="deviceId" v-if="ptzMethod === 'preset'" style="margin-top: 1rem"></ptzPreset>
|
||||
<ptzCruising :channelDeviceId="channelId" :deviceId="deviceId" v-if="ptzMethod === 'cruise'" style="margin-top: 1rem"></ptzCruising>
|
||||
<ptzScan :channelDeviceId="channelId" :deviceId="deviceId" v-if="ptzMethod === 'scan'" style="margin-top: 1rem"></ptzScan>
|
||||
<ptzWiper :channelDeviceId="channelId" :deviceId="deviceId" v-if="ptzMethod === 'wiper'" style="margin-top: 1rem"></ptzWiper>
|
||||
<ptzSwitch :channelDeviceId="channelId" :deviceId="deviceId" v-if="ptzMethod === 'switch'" style="margin-top: 1rem"></ptzSwitch>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="编码信息" name="codec" v-loading="tracksLoading">
|
||||
<p>
|
||||
无法播放或者没有声音?   试一试 
|
||||
<el-button size="mini" type="primary" v-if="!coverPlaying" @click="coverPlay">转码播放</el-button>
|
||||
<el-button size="mini" type="danger" v-if="coverPlaying" @click="convertStopClick">停止转码</el-button>
|
||||
</p>
|
||||
<div class="trank">
|
||||
<p v-if="tracksNotLoaded" style="text-align: center;padding-top: 3rem;">暂无数据</p>
|
||||
<div v-for="(item, index) in tracks" style="width: 50%; float: left" loading>
|
||||
<span>流 {{ index }}</span>
|
||||
<div class="trankInfo" v-if="item.codec_type == 0">
|
||||
<p>格式: {{ item.codec_id_name }}</p>
|
||||
<p>类型: 视频</p>
|
||||
<p>分辨率: {{ item.width }} x {{ item.height }}</p>
|
||||
<p>帧率: {{ item.fps }}</p>
|
||||
</div>
|
||||
<div class="trankInfo" v-if="item.codec_type == 1">
|
||||
<p>格式: {{ item.codec_id_name }}</p>
|
||||
<p>类型: 音频</p>
|
||||
<p>采样位数: {{ item.sample_bit }}</p>
|
||||
<p>采样率: {{ item.sample_rate }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<mediaInfo :app="app" :stream="streamId" :mediaServerId="mediaServerId"></mediaInfo>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="语音对讲" name="broadcast">
|
||||
<div style="padding: 0 10px">
|
||||
@@ -327,11 +264,18 @@ import rtcPlayer from '../dialog/rtcPlayer.vue'
|
||||
import LivePlayer from '@liveqing/liveplayer'
|
||||
import crypto from 'crypto'
|
||||
import jessibucaPlayer from '../common/jessibuca.vue'
|
||||
import PtzPreset from "../common/ptzPreset.vue";
|
||||
import PtzCruising from "../common/ptzCruising.vue";
|
||||
import ptzScan from "../common/ptzScan.vue";
|
||||
import ptzWiper from "../common/ptzWiper.vue";
|
||||
import ptzSwitch from "../common/ptzSwitch.vue";
|
||||
import mediaInfo from "../common/mediaInfo.vue";
|
||||
|
||||
export default {
|
||||
name: 'devicePlayer',
|
||||
props: {},
|
||||
components: {
|
||||
PtzPreset,PtzCruising,ptzScan,ptzWiper,ptzSwitch,mediaInfo,
|
||||
LivePlayer, jessibucaPlayer, rtcPlayer,
|
||||
},
|
||||
computed: {
|
||||
@@ -363,9 +307,10 @@ export default {
|
||||
},
|
||||
showVideoDialog: false,
|
||||
streamId: '',
|
||||
ptzMethod: 'preset',
|
||||
ptzPresetId: '',
|
||||
app: '',
|
||||
mediaServerId: '',
|
||||
convertKey: '',
|
||||
deviceId: '',
|
||||
channelId: '',
|
||||
tabActiveName: 'media',
|
||||
@@ -384,7 +329,6 @@ export default {
|
||||
scanSpeed: 100,
|
||||
scanGroup: 0,
|
||||
tracks: [],
|
||||
coverPlaying: false,
|
||||
tracksLoading: false,
|
||||
showPtz: true,
|
||||
showRrecord: true,
|
||||
@@ -484,63 +428,6 @@ export default {
|
||||
}
|
||||
return this.videoUrl;
|
||||
|
||||
},
|
||||
coverPlay: function () {
|
||||
var that = this;
|
||||
this.coverPlaying = true;
|
||||
this.$refs[this.activePlayer].pause()
|
||||
that.$axios({
|
||||
method: 'post',
|
||||
url: '/api/play/convert/' + that.streamId
|
||||
}).then(function (res) {
|
||||
if (res.data.code === 0) {
|
||||
that.convertKey = res.data.key;
|
||||
setTimeout(() => {
|
||||
that.isLoging = false;
|
||||
that.playFromStreamInfo(false, res.data.data);
|
||||
}, 2000)
|
||||
} else {
|
||||
that.isLoging = false;
|
||||
that.coverPlaying = false;
|
||||
that.$message({
|
||||
showClose: true,
|
||||
message: '转码失败',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch(function (e) {
|
||||
console.log(e)
|
||||
that.coverPlaying = false;
|
||||
that.$message({
|
||||
showClose: true,
|
||||
message: '播放错误',
|
||||
type: 'error'
|
||||
});
|
||||
});
|
||||
},
|
||||
convertStopClick: function () {
|
||||
this.convertStop(() => {
|
||||
this.$refs[this.activePlayer].play(this.videoUrl)
|
||||
});
|
||||
},
|
||||
convertStop: function (callback) {
|
||||
var that = this;
|
||||
that.$refs.videoPlayer.pause()
|
||||
this.$axios({
|
||||
method: 'post',
|
||||
url: '/api/play/convertStop/' + this.convertKey
|
||||
}).then(function (res) {
|
||||
if (res.data.code == 0) {
|
||||
console.log(res.data.msg)
|
||||
} else {
|
||||
console.error(res.data.msg)
|
||||
}
|
||||
if (callback) callback();
|
||||
}).catch(function (e) {
|
||||
});
|
||||
that.coverPlaying = false;
|
||||
that.convertKey = "";
|
||||
// if (callback )callback();
|
||||
},
|
||||
|
||||
playFromStreamInfo: function (realHasAudio, streamInfo) {
|
||||
@@ -562,10 +449,6 @@ export default {
|
||||
this.videoUrl = '';
|
||||
this.coverPlaying = false;
|
||||
this.showVideoDialog = false;
|
||||
if (this.convertKey != '') {
|
||||
this.convertStop();
|
||||
}
|
||||
this.convertKey = ''
|
||||
this.stopBroadcast()
|
||||
},
|
||||
|
||||
@@ -595,8 +478,22 @@ export default {
|
||||
console.log('云台控制：' + command);
|
||||
let that = this;
|
||||
this.$axios({
|
||||
method: 'post',
|
||||
url: '/api/ptz/control/' + this.deviceId + '/' + this.channelId + '?command=' + command + '&horizonSpeed=' + this.controSpeed + '&verticalSpeed=' + this.controSpeed + '&zoomSpeed=' + this.controSpeed
|
||||
method: 'get',
|
||||
url: '/api/front-end/ptz/' + this.deviceId + '/' + this.channelId + '?command=' + command + '&horizonSpeed=' + parseInt(this.controSpeed * 255/100) + '&verticalSpeed=' + parseInt(this.controSpeed * 255/100) + '&zoomSpeed=' + parseInt(this.controSpeed * 16/100)
|
||||
}).then(function (res) {
|
||||
});
|
||||
},
|
||||
irisCamera: function (command) {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: '/api/front-end/fi/iris/' + this.deviceId + '/' + this.channelId + '?command=' + command + '&speed=' + parseInt(this.controSpeed * 255/100)
|
||||
}).then(function (res) {
|
||||
});
|
||||
},
|
||||
focusCamera: function (command) {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: '/api/front-end/fi/focus/' + this.deviceId + '/' + this.channelId + '?command=' + command + '&speed=' + parseInt(this.controSpeed * 255/100)
|
||||
}).then(function (res) {
|
||||
});
|
||||
},
|
||||
@@ -1001,4 +898,14 @@ export default {
|
||||
width: 80%;
|
||||
padding: 0 10%;
|
||||
}
|
||||
.el-dialog__body{
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.ptz-btn-box {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
height: 3rem;
|
||||
line-height: 4rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user