Skip to content

蒋秀川 / miniProject

Go to a project
Commit fbc2bd3e by Tianqing Liu
Options

feat: 云台的显隐控制

1 parent 16c51cab
Inline Side-by-side
Showing 4 changed files with 32 additions and 11 deletions
h5/src/components/extension/index.vue
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<videoTime v-if="params.gateUnid" ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" :dateFormatType="dateFormatType" :magnification="magnification" :ptzEnable="params.ptzEnable" :gateUnid="params.gateUnid"/> <videoTime v-if="params.gateUnid" ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" :dateFormatType="dateFormatType" :magnification="magnification" :ptzEnable="params.ptzEnable" :gateUnid="params.gateUnid"/>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
...@@ -70,6 +70,9 @@ export default { ...@@ -70,6 +70,9 @@ export default {
mounted() { mounted() {
}, },
methods: { methods: {
setPTZEnable(status) {
this.$refs.videoTime.setPTZEnable(status)
},
// 播放倍率改变 // 播放倍率改变
magnificationChange(val) { magnificationChange(val) {
this.magnification = val this.magnification = val
...@@ -109,8 +112,8 @@ export default { ...@@ -109,8 +112,8 @@ export default {
}) })
} }
}, },
playWebVideo(obj) { playWebVideo(obj) {
this.params = obj this.params = obj
this.params.ptzEnable = ''+this.params.ptzEnable this.params.ptzEnable = ''+this.params.ptzEnable
...@@ -135,7 +138,7 @@ export default { ...@@ -135,7 +138,7 @@ export default {
}) })
}, },
// 初始化视频 // 初始化视频
// 暴露方法 // 暴露方法
// 截图方法 // 截图方法
......
h5/src/components/extension/videoTime.vue
...@@ -27,8 +27,9 @@ ...@@ -27,8 +27,9 @@
</div> </div>
<!-- 操作按钮 --> <!-- 操作按钮 -->
<div class="operating-box"> <div class="operating-box">
<van-button v-if="isNoBack&&ptzEnable==='1'" type="primary" size="mini" @click="ptzControlChange">{{ptzControlShow?'隐藏云台':'打开云台'}}</van-button> <!--<van-button v-if="isNoBack&&ptzEnable==='1'" type="primary" size="mini" @click="ptzControlChange">{{ptzControlShow?'隐藏云台':'打开云台'}}</van-button>-->
<van-button v-else-if="!isNoBack" type="primary" size="mini" @click="backRealTime">返回实时</van-button> <!--v-else-if="!isNoBack"-->
<van-button type="primary" size="mini" @click="backRealTime">返回实时</van-button>
</div> </div>
</div> </div>
<!-- 时间轴 --> <!-- 时间轴 -->
...@@ -38,7 +39,7 @@ ...@@ -38,7 +39,7 @@
</div> </div>
</div> </div>
<!-- 云台控制模块 --> <!-- 云台控制模块 -->
<div v-if="ptzControlShow" class="ptz-control-box"> <div v-if="ptzControlShowByButton && ptzControlShow" class="ptz-control-box">
<div class="ptz-control-left-box" :class="[ptzControlType=='left'?'ptz-left':ptzControlType=='up'?'ptz-top':ptzControlType=='right'?'ptz-right':ptzControlType=='down'?'ptz-bottom':'']"> <div class="ptz-control-left-box" :class="[ptzControlType=='left'?'ptz-left':ptzControlType=='up'?'ptz-top':ptzControlType=='right'?'ptz-right':ptzControlType=='down'?'ptz-bottom':'']">
<div class="ptz-control-base ptz-control-left" @mousedown="ptzControlOneClick('left')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('left')" @touchend="ptzControlStop"></div> <div class="ptz-control-base ptz-control-left" @mousedown="ptzControlOneClick('left')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('left')" @touchend="ptzControlStop"></div>
<div class="ptz-control-base ptz-control-top" @mousedown="ptzControlOneClick('up')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('up')" @touchend="ptzControlStop"></div> <div class="ptz-control-base ptz-control-top" @mousedown="ptzControlOneClick('up')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('up')" @touchend="ptzControlStop"></div>
...@@ -63,6 +64,7 @@ ...@@ -63,6 +64,7 @@
</template> </template>
<script> <script>
import { Toast } from "vant";
import TimeLineCanvas from "./timeline-canvas-wx.vue"; import TimeLineCanvas from "./timeline-canvas-wx.vue";
import moment from "moment"; import moment from "moment";
import tourApi from '@/api'; import tourApi from '@/api';
...@@ -92,6 +94,7 @@ export default { ...@@ -92,6 +94,7 @@ export default {
minDay: new Date(2023,1,1), minDay: new Date(2023,1,1),
ptzControlShow:false, ptzControlShow:false,
ptzControlShowByButton: false, // 按钮控制显隐，默认隐藏
isCanFastRight:false, isCanFastRight:false,
timeColumns:[], timeColumns:[],
ptzControlType:'', ptzControlType:'',
...@@ -116,6 +119,14 @@ export default { ...@@ -116,6 +119,14 @@ export default {
this.stopPlay() this.stopPlay()
}, },
methods: { methods: {
setPTZEnable(status) {
// 提示云台是否可用
if (this.ptzControlShow) {
this.ptzControlShowByButton = status
} else {
Toast('设备不支持云台功能');
}
},
// 获取播放日期录像回放时间 // 获取播放日期录像回放时间
getDateBackTime(startDay) { getDateBackTime(startDay) {
let stopTime = startDay == moment().format(this.dateFormatType)?moment().format(this.dateFormatType + ' HH:mm:ss'):moment(startDay).format(this.dateFormatType + ' 23:59:59'); let stopTime = startDay == moment().format(this.dateFormatType)?moment().format(this.dateFormatType + ' HH:mm:ss'):moment(startDay).format(this.dateFormatType + ' 23:59:59');
......
h5/src/views/video/controller.vue
...@@ -2,13 +2,14 @@ ...@@ -2,13 +2,14 @@
<div class="controller-container"> <div class="controller-container">
<van-action-bar> <van-action-bar>
<van-action-bar-icon icon="video-o" text="场景" @click="onClickIcon('scene')" /> <van-action-bar-icon icon="video-o" text="场景" @click="onClickIcon('scene')" />
<van-action-bar-icon icon="aim" text="云台" @click="onClickIcon('ptz')" /> <van-action-bar-icon v-if="props.ptzEnable" icon="aim" text="云台" @click="onClickIcon('ptz')" />
<van-action-bar-button type="danger" color="#387CF5" text="截图巡检" @click="onClickButton" /> <van-action-bar-button type="danger" color="#387CF5" text="截图巡检" @click="onClickButton" />
</van-action-bar> </van-action-bar>
</div> </div>
</template> </template>
<script setup> <script setup>
const props = defineProps(['ptzEnable'])
const emit = defineEmits(['screenshot']) const emit = defineEmits(['screenshot'])
function onClickIcon(type) { function onClickIcon(type) {
...@@ -16,7 +17,7 @@ function onClickIcon(type) { ...@@ -16,7 +17,7 @@ function onClickIcon(type) {
if (type === 'scene') { if (type === 'scene') {
emit('showMonitor') emit('showMonitor')
} else { } else {
emit('showPtz') emit('showPTZ')
} }
} }
function onClickButton() { function onClickButton() {
......
h5/src/views/video/index.vue
...@@ -291,6 +291,7 @@ ...@@ -291,6 +291,7 @@
<!--底部按钮区--> <!--底部按钮区-->
<VideoController <VideoController
:ptz-enable="ptzEnableInController"
@screenshot="handleScreenshot" @screenshot="handleScreenshot"
@showMonitor="navBack" @showMonitor="navBack"
@showPTZ="handleShowPTZ" @showPTZ="handleShowPTZ"
...@@ -298,7 +299,7 @@ ...@@ -298,7 +299,7 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, getCurrentInstance } from "vue"; import { ref, onMounted } from "vue";
import { Toast } from "vant"; import { Toast } from "vant";
import livePlayer from "@/components/extension/index.vue"; import livePlayer from "@/components/extension/index.vue";
import VideoController from './controller.vue' import VideoController from './controller.vue'
...@@ -347,8 +348,13 @@ const navBack = () => { ...@@ -347,8 +348,13 @@ const navBack = () => {
pointPopupShow.value = true; pointPopupShow.value = true;
console.log(paramObj); console.log(paramObj);
}; };
const ptzEnableInController = ref(paramObj.ptzEnable === '1') // 是否展示云台
const showPTZStatus = ref(false);
const handleShowPTZ = () => { const handleShowPTZ = () => {
// console.log('handleShowPTZ')
showPTZStatus.value = !showPTZStatus.value;
vionPlayer.value.setPTZEnable(showPTZStatus.value);
} }
// 监控场景编辑 // 监控场景编辑
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!