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>
<div>
<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">
<!-- 日期选择 -->
......@@ -35,6 +29,12 @@
<van-button v-else-if="!isNoBack" type="primary" size="mini" @click="backRealTime">返回实时</van-button>
</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-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 {
<style scoped lang="less">
.time-page {
background: rgba(0, 0, 0, 0.7);
background-color: #FFF;
width: 100%;
height: 22vw;
position: relative;
......@@ -359,7 +359,6 @@ export default {
align-items: center;
justify-content: center;
padding: 0;
border-bottom: 0.27vw solid #666666;
.timeline-icon-box {
display: inline-flex;
align-items: center;
......@@ -385,12 +384,14 @@ export default {
align-items: center;
justify-content: space-between;
padding: 0 3vw;
background-color: #FFF;
color: #000;
.day-select-btn{
display: inline-flex;
align-items: center;
font-size: 3.5vw;
color:#fff;
width: 22vw;
color: #000;
.day-select-btn-icon{
margin-left: 0.54vw;
}
......@@ -398,7 +399,7 @@ export default {
.date-time-box{
display: inline-flex;
align-items: center;
color:#fff;
color: #000;
.date-time-left{
height: 100%;
font-size: 3.2vw;
......@@ -410,7 +411,7 @@ export default {
font-size: 3.2vw;
display: inline-flex;
align-items: center;
color:#aaa;
color: #000;
}
.date-time-right-show{
color:#fff;
......@@ -421,6 +422,9 @@ export default {
margin: 0 0.54vw;
position: relative;
top:-0.27vw;
// TODO: 需要换图片，这个地址要注释
background-color: #000;
display: none;
}
.date-time-content{
width: 16.5vw;
......
h5/src/views/video/controller.vue
<template>
<div class="controller-container">
<van-action-bar>
<van-action-bar-icon icon="video-o" text="场景" @click="onClickIcon" />
<van-action-bar-icon icon="aim" text="云台" @click="onClickIcon" />
<van-action-bar-icon icon="video-o" text="场景" @click="onClickIcon('scene')" />
<!--<van-action-bar-icon icon="aim" text="云台" @click="onClickIcon('ptz')" />-->
<van-action-bar-button type="danger" color="#387CF5" text="截图巡检" @click="onClickButton" />
</van-action-bar>
</div>
......@@ -11,8 +11,13 @@
<script setup>
const emit = defineEmits(['screenshot'])
function onClickIcon() {
console.log('onClickIcon')
function onClickIcon(type) {
console.log('onClickIcon', type)
if (type === 'scene') {
emit('showMonitor')
} else {
emit('showPtz')
}
}
function onClickButton() {
console.log('onClickButton')
......
h5/src/views/video/index.vue
......@@ -161,43 +161,46 @@
</div>
<div v-else>
<livePlayer ref="vionPlayer" @screenshotEnd="screenshotEnd"></livePlayer>
<div class="tour-btns" v-if="paramObj.type == 'titem'">
<van-button @click="navBackTour" type="primary">返回上一页</van-button>
<van-button @click="goCaptureImg" type="primary">确认并截图</van-button>
</div>
<div class="tour-btns" v-else-if="paramObj.type == 'view'">
<van-button block @click="navBack" type="primary"
>查看其他监控点</van-button
>
</div>
<div class="tour-btns1" v-else>
<div class="box gate-name-box">
<span
@click="navBack"
class=""
style="display: inline-flex; align-items: center"
<!--TODO: 暂时不需要了-->
<div style="display: none">
<div class="tour-btns" v-if="paramObj.type == 'titem'">
<van-button @click="navBackTour" type="primary">返回上一页</van-button>
<van-button @click="goCaptureImg" type="primary">确认并截图</van-button>
</div>
<div class="tour-btns" v-else-if="paramObj.type == 'view'">
<van-button block @click="navBack" type="primary"
>查看其他监控点</van-button
>
<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 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 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 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>
<!-- 监控点选择器 -->
......@@ -287,7 +290,10 @@
</div>
<!--底部按钮区-->
<VideoController @screenshot="handleScreenshot"/>
<VideoController
@screenshot="handleScreenshot"
@showMonitor="navBack"
/>
</div>
</template>
<script setup>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!