Skip to content

蒋秀川 / miniProject

Go to a project
Commit 978207af by Tianqing Liu
Options

feat: 直播，优化收藏和场景UI

1 parent 42a6f9bd
Inline Side-by-side
Showing 3 changed files with 31 additions and 16 deletions
h5/src/components/extension/videoTime.vue
<template> <template>
<div> <div>
<div class="time-page"> <div class="time-page">
<!-- 时间轴 -->
<div class="time-axis">
<div class="timeline-canvas-box">
<TimeLineCanvas id="timeline-canvas" ref="time_line" @clickTime="clickCanvas" @changeTime="changeDate" :mark-time="markTime" :time-range="timeRange" :isAutoPlay="isAutoPlay" :startMeddleTime="startMeddleTime" @mouseMove="mouseMoveDate" :dateFormatType="dateFormatType"/>
</div>
</div>
<!-- 日期操作区 --> <!-- 日期操作区 -->
<div class="date-axis"> <div class="date-axis">
<!-- 日期选择 --> <!-- 日期选择 -->
...@@ -35,6 +29,12 @@ ...@@ -35,6 +29,12 @@
<van-button v-else-if="!isNoBack" type="primary" size="mini" @click="backRealTime">返回实时</van-button> <van-button v-else-if="!isNoBack" type="primary" size="mini" @click="backRealTime">返回实时</van-button>
</div> </div>
</div> </div>
<!-- 时间轴 -->
<div class="time-axis">
<div class="timeline-canvas-box">
<TimeLineCanvas id="timeline-canvas" ref="time_line" @clickTime="clickCanvas" @changeTime="changeDate" :mark-time="markTime" :time-range="timeRange" :isAutoPlay="isAutoPlay" :startMeddleTime="startMeddleTime" @mouseMove="mouseMoveDate" :dateFormatType="dateFormatType"/>
</div>
</div>
<!-- 云台控制模块 --> <!-- 云台控制模块 -->
<div class="ptz-control-box" v-if="ptzControlShow"> <div class="ptz-control-box" v-if="ptzControlShow">
<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':'']">
...@@ -350,7 +350,7 @@ export default { ...@@ -350,7 +350,7 @@ export default {
<style scoped lang="less"> <style scoped lang="less">
.time-page { .time-page {
background: rgba(0, 0, 0, 0.7); background-color: #FFF;
width: 100%; width: 100%;
height: 22vw; height: 22vw;
position: relative; position: relative;
...@@ -359,7 +359,6 @@ export default { ...@@ -359,7 +359,6 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0; padding: 0;
border-bottom: 0.27vw solid #666666;
.timeline-icon-box { .timeline-icon-box {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
...@@ -385,12 +384,14 @@ export default { ...@@ -385,12 +384,14 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 3vw; padding: 0 3vw;
background-color: #FFF;
color: #000;
.day-select-btn{ .day-select-btn{
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
font-size: 3.5vw; font-size: 3.5vw;
color:#fff;
width: 22vw; width: 22vw;
color: #000;
.day-select-btn-icon{ .day-select-btn-icon{
margin-left: 0.54vw; margin-left: 0.54vw;
} }
...@@ -398,7 +399,7 @@ export default { ...@@ -398,7 +399,7 @@ export default {
.date-time-box{ .date-time-box{
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
color:#fff; color: #000;
.date-time-left{ .date-time-left{
height: 100%; height: 100%;
font-size: 3.2vw; font-size: 3.2vw;
...@@ -410,7 +411,7 @@ export default { ...@@ -410,7 +411,7 @@ export default {
font-size: 3.2vw; font-size: 3.2vw;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
color:#aaa; color: #000;
} }
.date-time-right-show{ .date-time-right-show{
color:#fff; color:#fff;
...@@ -421,6 +422,9 @@ export default { ...@@ -421,6 +422,9 @@ export default {
margin: 0 0.54vw; margin: 0 0.54vw;
position: relative; position: relative;
top:-0.27vw; top:-0.27vw;
// TODO: 需要换图片，这个地址要注释
background-color: #000;
display: none;
} }
.date-time-content{ .date-time-content{
width: 16.5vw; width: 16.5vw;
......
h5/src/views/video/controller.vue
<template> <template>
<div class="controller-container"> <div class="controller-container">
<van-action-bar> <van-action-bar>
<van-action-bar-icon icon="video-o" text="场景" @click="onClickIcon" /> <van-action-bar-icon icon="video-o" text="场景" @click="onClickIcon('scene')" />
<van-action-bar-icon icon="aim" text="云台" @click="onClickIcon" /> <!--<van-action-bar-icon 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>
...@@ -11,8 +11,13 @@ ...@@ -11,8 +11,13 @@
<script setup> <script setup>
const emit = defineEmits(['screenshot']) const emit = defineEmits(['screenshot'])
function onClickIcon() { function onClickIcon(type) {
console.log('onClickIcon') console.log('onClickIcon', type)
if (type === 'scene') {
emit('showMonitor')
} else {
emit('showPtz')
}
} }
function onClickButton() { function onClickButton() {
console.log('onClickButton') console.log('onClickButton')
......
h5/src/views/video/index.vue
...@@ -161,6 +161,8 @@ ...@@ -161,6 +161,8 @@
</div> </div>
<div v-else> <div v-else>
<livePlayer ref="vionPlayer" @screenshotEnd="screenshotEnd"></livePlayer> <livePlayer ref="vionPlayer" @screenshotEnd="screenshotEnd"></livePlayer>
<!--TODO: 暂时不需要了-->
<div style="display: none">
<div class="tour-btns" v-if="paramObj.type == 'titem'"> <div class="tour-btns" v-if="paramObj.type == 'titem'">
<van-button @click="navBackTour" type="primary">返回上一页</van-button> <van-button @click="navBackTour" type="primary">返回上一页</van-button>
<van-button @click="goCaptureImg" type="primary">确认并截图</van-button> <van-button @click="goCaptureImg" type="primary">确认并截图</van-button>
...@@ -200,6 +202,7 @@ ...@@ -200,6 +202,7 @@
</span> </span>
</div> </div>
</div> </div>
</div>
<!-- 监控点选择器 --> <!-- 监控点选择器 -->
<van-popup v-model:show="pointPopupShow" round position="bottom"> <van-popup v-model:show="pointPopupShow" round position="bottom">
<van-picker <van-picker
...@@ -287,7 +290,10 @@ ...@@ -287,7 +290,10 @@
</div> </div>
<!--底部按钮区--> <!--底部按钮区-->
<VideoController @screenshot="handleScreenshot"/> <VideoController
@screenshot="handleScreenshot"
@showMonitor="navBack"
/>
</div> </div>
</template> </template>
<script setup> <script setup>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!