From c4d18744b685f03c2fb8cbe2720fec18c97c1e66 Mon Sep 17 00:00:00 2001
From: rain <167982779@qq.com>
Date: Wed, 27 Nov 2024 11:16:58 +0800
Subject: [PATCH] 遥控器上云
---
src/pages/page-pilot/pilot-liveshare.vue | 71 ++++++++++++++++++++---------------
1 files changed, 41 insertions(+), 30 deletions(-)
diff --git a/src/pages/page-pilot/pilot-liveshare.vue b/src/pages/page-pilot/pilot-liveshare.vue
index cc5cc68..a329c09 100644
--- a/src/pages/page-pilot/pilot-liveshare.vue
+++ b/src/pages/page-pilot/pilot-liveshare.vue
@@ -1,18 +1,16 @@
<template>
- <div class="width100 flex-column flex-justify-start flex-align-start" style="background-color: white;">
+ <div class="width100 flex-column flex-justify-start flex-align-start" style="background-color: white;">
+ <!-- 页面顶部提示信息 -->
+ <p class="fz16 ml10 mt15 mb10 color-text-title color-font-bold" style="color: #939393">
+ 在手动开始前，请选择发布模式和直播类型
+ </p>
- <p class="fz16 ml10 mt15 mb10 color-text-title color-font-bold" style="color: #939393">
- Before starting manually, please select the publish mode and livestream type
- </p>
- <div
- class="mt15 flex-row flex-align-center flex-justify-between"
- style="width: 100%;">
- <p class="ml10 mb0 fz16" style="color: black">
- Select Video Publish Mode:
- </p>
+ <!-- 选择视频发布模式 -->
+ <div class="mt15 flex-row flex-align-center flex-justify-between" style="width: 100%;">
+ <p class="ml10 mb0 fz16" style="color: black">选择视频发布模式：</p>
<a-select
style="width: 200px; margin-right: 20px;"
- placeholder="Select Mode"
+ placeholder="选择模式"
@select="onPublishModeSelect"
>
<a-select-option
@@ -25,17 +23,17 @@
</a-select>
</div>
+ <!-- 分割线 -->
<div class="ml10 mr10" style="width: 96%; margin-top: -10px;">
<a-divider />
</div>
- <div
- class="flex-row flex-align-center flex-justify-between"
- style="width: 100%; margin-top: -10px;"
- >
- <p class="ml10 mb0 fz16">Select Livestream Type:</p>
+
+ <!-- 选择直播类型 -->
+ <div class="flex-row flex-align-center flex-justify-between" style="width: 100%; margin-top: -10px;">
+ <p class="ml10 mb0 fz16">选择直播类型：</p>
<a-select
style="width: 200px; margin-right: 20px;"
- placeholder="Select Live Type"
+ placeholder="选择直播类型"
:value="liveStreamStatus.type"
@select="onLiveTypeSelect"
>
@@ -48,62 +46,75 @@
</a-select-option>
</a-select>
</div>
+
+ <!-- 分割线 -->
<div class="ml10 mr10" style="width: 96%; margin-top: -10px;">
<a-divider />
</div>
+
+ <!-- 参数显示 -->
<div class="width-100" style="margin-top: -10px;">
<div class="ml10" style="width: 97%;">
- <span class="fz16">Param: </span>
+ <span class="fz16">参数: </span>
+ <!-- 根据不同的直播类型显示不同的参数 -->
<span v-if="liveStreamStatus.type === ELiveTypeValue.Agora" style="word-break: break-all; color: #75c5f6;">{{ agoraParam }}</span>
<span v-else-if="liveStreamStatus.type === ELiveTypeValue.RTMP" style="word-break: break-all; color: #75c5f6;">{{ rtmpParam }}</span>
<span v-else-if="liveStreamStatus.type === ELiveTypeValue.RTSP" style="word-break: break-all; color: #75c5f6;">{{ rtspParam }}</span>
<span v-else-if="liveStreamStatus.type === ELiveTypeValue.GB28181" style="word-break: break-all; color: #75c5f6;">{{ gb28181Param }}</span>
<span v-else></span>
</div>
-
</div>
+
+ <!-- 分割线 -->
<div class="ml10 mr10" style="width: 96%; margin-top: -10px;">
<a-divider />
</div>
- <div class="mb20 flex-row flex-align-center flex-justify-center"
- style="width: 100%; ">
- <a-button class="flex-column fz20 flex-align-center flex-justify-center" style="width: 100px;" type="ghost" @click="onPlay">Play</a-button>
- <a-button class="flex-column fz20 flex-align-center flex-justify-center ml40" style="width: 100px;" type="ghost" @click="onStop">Stop</a-button>
+
+ <!-- 播放和停止按钮 -->
+ <div class="mb20 flex-row flex-align-center flex-justify-center" style="width: 100%;">
+ <a-button class="flex-column fz20 flex-align-center flex-justify-center" style="width: 100px;" type="ghost" @click="onPlay">播放</a-button>
+ <a-button class="flex-column fz20 flex-align-center flex-justify-center ml40" style="width: 100px;" type="ghost" @click="onStop">停止</a-button>
</div>
+
+ <!-- 固定位置的状态展示按钮 -->
<a-button v-if="playVisiable" class="flex-column flex-align-center" shape="circle" @click="showLivingStatus"
style="position: fixed; top: 13vh; left: 5vw; opacity: 0.8; background-color: rgb(0,0,0,0)">
<template #icon><CaretRightFilled style="font-size: 26px; color: " /></template>
</a-button>
- <a-drawer placement="right" v-model:visible="drawerVisible" width="280px" :mask="false" @close="closeDrawer">
+ <!-- 直播状态信息抽屉 -->
+ <a-drawer placement="right" v-model:visible="drawerVisible" width="280px" :mask="false" @close="closeDrawer">
<div class="fz16 width-100">
+ <!-- 直播状态 -->
<div class="mt20" style=" margin-bottom: -10px;">
<span class="fz20 flex-row flex-align-center flex-justify-center">
<font :color="liveState === EStatusValue.LIVING ? 'green' : liveState === EStatusValue.CONNECTED ? 'blue' : 'red'">{{ liveState }}</font></span>
</div>
<a-divider />
+
+ <!-- 直播详细信息 -->
<div style=" margin-top: -10px; margin-bottom: -15px;">
- <span>Frame Rate:</span><span style="float: right; color: #75c5f6;">{{ liveStreamStatus.fps }}<span v-if="liveStreamStatus.fps != -1"> fps</span></span><br/>
+ <span>帧率：</span><span style="float: right; color: #75c5f6;">{{ liveStreamStatus.fps }}<span v-if="liveStreamStatus.fps != -1"> fps</span></span><br/>
</div>
<a-divider />
<div style=" margin-top: -10px; margin-bottom: -10px;">
- <span>Video Bit Rate:</span><span style="float: right; color: #75c5f6;">{{ liveStreamStatus.videoBitRate }}<span v-if="liveStreamStatus.videoBitRate != -1"> kbps</span></span><br/>
+ <span>视频比特率：</span><span style="float: right; color: #75c5f6;">{{ liveStreamStatus.videoBitRate }}<span v-if="liveStreamStatus.videoBitRate != -1"> kbps</span></span><br/>
</div>
<a-divider />
<div style=" margin-top: -10px; margin-bottom: -10px;">
- <span>Audio Bit Rate:</span><span style="float: right; color: #75c5f6;">{{ liveStreamStatus.audioBitRate }}<span v-if="liveStreamStatus.audioBitRate != -1"> kbps</span></span><br/>
+ <span>音频比特率：</span><span style="float: right; color: #75c5f6;">{{ liveStreamStatus.audioBitRate }}<span v-if="liveStreamStatus.audioBitRate != -1"> kbps</span></span><br/>
</div>
<a-divider />
<div style=" margin-top: -10px; margin-bottom: -10px;">
- <span>Packet Loss Rate:</span><span style="float: right; color: #75c5f6;">{{ liveStreamStatus.dropRate }}<span v-if="liveStreamStatus.dropRate != -1"> %</span></span><br/>
+ <span>丢包率：</span><span style="float: right; color: #75c5f6;">{{ liveStreamStatus.dropRate }}<span v-if="liveStreamStatus.dropRate != -1"> %</span></span><br/>
</div>
<a-divider />
<div style=" margin-top: -10px; margin-bottom: -10px;">
- <span>RTT:</span><span style="float: right; color: #75c5f6;">{{ liveStreamStatus.rtt }}<span v-if="liveStreamStatus.rtt != -1"> ms</span></span><br/>
+ <span>RTT：</span><span style="float: right; color: #75c5f6;">{{ liveStreamStatus.rtt }}<span v-if="liveStreamStatus.rtt != -1"> ms</span></span><br/>
</div>
<a-divider />
<div style=" margin-top: -10px;">
- <span >Jitter:</span><span style="float: right; color: #75c5f6;">{{ liveStreamStatus.jitter }}</span><br/>
+ <span >抖动：</span><span style="float: right; color: #75c5f6;">{{ liveStreamStatus.jitter }}</span><br/>
</div>
</div>
</a-drawer>
--
Gitblit v1.9.3