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 66 additions and 51 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,43 +161,46 @@ ...@@ -161,43 +161,46 @@
</div> </div>
<div v-else> <div v-else>
<livePlayer ref="vionPlayer" @screenshotEnd="screenshotEnd"></livePlayer> <livePlayer ref="vionPlayer" @screenshotEnd="screenshotEnd"></livePlayer>
<div class="tour-btns" v-if="paramObj.type == 'titem'"> <!--TODO: 暂时不需要了-->
<van-button @click="navBackTour" type="primary">返回上一页</van-button> <div style="display: none">
<van-button @click="goCaptureImg" type="primary">确认并截图</van-button> <div class="tour-btns" v-if="paramObj.type == 'titem'">
</div> <van-button @click="navBackTour" type="primary">返回上一页</van-button>
<div class="tour-btns" v-else-if="paramObj.type == 'view'"> <van-button @click="goCaptureImg" type="primary">确认并截图</van-button>
<van-button block @click="navBack" type="primary" </div>
>查看其他监控点</van-button <div class="tour-btns" v-else-if="paramObj.type == 'view'">
> <van-button block @click="navBack" type="primary"
</div> >查看其他监控点</van-button
<div class="tour-btns1" v-else>
<div class="box gate-name-box">
<span
@click="navBack"
class=""
style="display: inline-flex; align-items: center"
> >
<span class="text-ellipsis">{{ gateEditName }}</span>
<van-icon class="icon" name="play" />
</span>
<!--修改监控点名称-->
<!--<img
src="../src/assets/edit.png"
alt=""
class="gate-name-edit-img"
@click="gateEdit"
/>-->
</div> </div>
<div class="box box1"> <div class="tour-btns1" v-else>
<span v-if="bookmark" @click="delCollectGate"> <div class="box gate-name-box">
<van-icon class="iconMargin" color="#F7B500" name="star" />收藏 <span
</span> @click="navBack"
<span v-else @click="collectGate"> class=""
<van-icon class="iconMargin" name="star-o" />收藏 style="display: inline-flex; align-items: center"
</span> >
<span @click="goCaptureImg" style="display: none"> <span class="text-ellipsis">{{ gateEditName }}</span>
<van-icon class="iconMargin" name="photograph" />巡检 <van-icon class="icon" name="play" />
</span> </span>
<!--修改监控点名称-->
<!--<img
src="../src/assets/edit.png"
alt=""
class="gate-name-edit-img"
@click="gateEdit"
/>-->
</div>
<div class="box box1">
<span v-if="bookmark" @click="delCollectGate">
<van-icon class="iconMargin" color="#F7B500" name="star" />收藏
</span>
<span v-else @click="collectGate">
<van-icon class="iconMargin" name="star-o" />收藏
</span>
<span @click="goCaptureImg" style="display: none">
<van-icon class="iconMargin" name="photograph" />巡检
</span>
</div>
</div> </div>
</div> </div>
<!-- 监控点选择器 --> <!-- 监控点选择器 -->
...@@ -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!