Skip to content

M
mmc-stl-vue2
提交 26338bcf 作者: 温凯
操作

feat(player): 添加调试信息处理并优化显示格式 

- 新增onDebugInfo方法处理来自组件的调试信息
- 优化信息显示区域的代码格式和可读性
- 添加"111"作为临时调试标记
- 统一格式化所有信息显示项的代码结构
上级 0df9f424
正在显示 包含 165 行增加 和 56 行删除
src/components/MMCFlightControlCenter/components/uavApplications/components/player/index.vue
...@@ -37,42 +37,56 @@ ...@@ -37,42 +37,56 @@
:raw_msg="raw_msg" :raw_msg="raw_msg"
:isInfoShow="isInfoShow" :isInfoShow="isInfoShow"
@close="infoflag = false" @close="infoflag = false"
@debugInfo="onDebugInfo"
/> />
<!-- @entryCross="entryCross" --> <!-- @entryCross="entryCross" -->
<div class="info" v-if="showInfo && streamSelect == 'QINGLIU'"> <div class="info" v-if="showInfo && streamSelect == 'QINGLIU'">
<div class="de"> <div class="de">
111
<div class="title">bitrate:</div> <div class="title">bitrate:</div>
<div class="detail">{{ raw_msg ? raw_msg / 1000 : "0" }}kbps</div> <div class="detail">{{ raw_msg ? raw_msg / 1000 : "0" }}kbps</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">venc_avg:</div> <div class="title">venc_avg:</div>
<div class="detail">{{ infoData ? infoData.venc_avg / 1000 : "0" }}ms</div> <div class="detail">
{{ infoData ? infoData.venc_avg / 1000 : "0" }}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">venc_last:</div> <div class="title">venc_last:</div>
<div class="detail">{{ infoData ? infoData.venc_last / 1000 : "0" }}ms</div> <div class="detail">
{{ infoData ? infoData.venc_last / 1000 : "0" }}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">pushrtt_avg:</div> <div class="title">pushrtt_avg:</div>
<div class="detail">{{ infoData ? infoData.pushrtt_avg[0] / 1000 : "0" }}ms</div> <div class="detail">
{{ infoData ? infoData.pushrtt_avg[0] / 1000 : "0" }}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">pushrtt_last:</div> <div class="title">pushrtt_last:</div>
<div class="detail">{{ infoData ? infoData.pushrtt_last[0] / 1000 : "0" }}ms</div> <div class="detail">
{{ infoData ? infoData.pushrtt_last[0] / 1000 : "0" }}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">recvrtt_avg:</div> <div class="title">recvrtt_avg:</div>
<div class="detail">{{ infoData ? infoData.recvrtt_avg[0] / 1000 : "0" }}ms</div> <div class="detail">
{{ infoData ? infoData.recvrtt_avg[0] / 1000 : "0" }}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">recvrtt_last:</div> <div class="title">recvrtt_last:</div>
<div class="detail">{{ infoData ? infoData.recvrtt_last[0] / 1000 : "0" }}ms</div> <div class="detail">
{{ infoData ? infoData.recvrtt_last[0] / 1000 : "0" }}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">pushretrans_avg:</div> <div class="title">pushretrans_avg:</div>
<div class="detail"> <div class="detail">
{{ {{
infoData ? (infoData.pushretrans_avg[0] * 0.1).toFixed(2) : "0" infoData ? (infoData.pushretrans_avg[0] * 0.1).toFixed(2) : "0"
}}% }}%
</div> </div>
</div> </div>
...@@ -80,9 +94,9 @@ ...@@ -80,9 +94,9 @@
<div class="title">pushretrans_last:</div> <div class="title">pushretrans_last:</div>
<div class="detail"> <div class="detail">
{{ {{
infoData infoData
? (infoData.pushretrans_last[0] * 0.1).toFixed(2) ? (infoData.pushretrans_last[0] * 0.1).toFixed(2)
: "0" : "0"
}}% }}%
</div> </div>
</div> </div>
...@@ -90,7 +104,7 @@ ...@@ -90,7 +104,7 @@
<div class="title">recvretrans_avg:</div> <div class="title">recvretrans_avg:</div>
<div class="detail"> <div class="detail">
{{ {{
infoData ? (infoData.recvretrans_avg[0] * 0.1).toFixed(2) : "0" infoData ? (infoData.recvretrans_avg[0] * 0.1).toFixed(2) : "0"
}}% }}%
</div> </div>
</div> </div>
...@@ -98,24 +112,28 @@ ...@@ -98,24 +112,28 @@
<div class="title">recvretrans_last:</div> <div class="title">recvretrans_last:</div>
<div class="detail"> <div class="detail">
{{ {{
infoData infoData
? (infoData.recvretrans_last[0] * 0.1).toFixed(2) ? (infoData.recvretrans_last[0] * 0.1).toFixed(2)
: "0" : "0"
}}% }}%
</div> </div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">vdec:</div> <div class="title">vdec:</div>
<div class="detail">{{ infoData ? infoData.vdec / 1000 : "0" }}ms</div> <div class="detail">
{{ infoData ? infoData.vdec / 1000 : "0" }}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">vbuffer:</div> <div class="title">vbuffer:</div>
<div class="detail">{{ infoData ? infoData.vbuffer / 1000 : "0" }}ms</div> <div class="detail">
{{ infoData ? infoData.vbuffer / 1000 : "0" }}ms
</div>
</div> </div>
</div> </div>
<div <div
class="info_isStatus" class="info_isStatus"
v-if="showInfo && streamSelect == 'QINGLIU'&&isStatus" v-if="showInfo && streamSelect == 'QINGLIU' && isStatus"
v-interact v-interact
> >
<div class="title_box"> <div class="title_box">
...@@ -125,7 +143,9 @@ ...@@ -125,7 +143,9 @@
</div> </div>
<div style="display: flex"> <div style="display: flex">
<div class="icon-box"></div> <div class="icon-box"></div>
<div class="cf ml20 mr10 c70d cp" @click.stop="showInfo = false">关闭</div> <div class="cf ml20 mr10 c70d cp" @click.stop="showInfo = false">
关闭
</div>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
...@@ -135,45 +155,71 @@ ...@@ -135,45 +155,71 @@
</div> </div>
<div class="de"> <div class="de">
<div class="title">venc_avg:</div> <div class="title">venc_avg:</div>
<div <div class="detail">
class="detail" {{
>{{ infoData&&infoData.venc_avg ? infoData.venc_avg / 1000 : "0" }}ms</div> infoData && infoData.venc_avg
? infoData.venc_avg / 1000
: "0"
}}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">venc_last:</div> <div class="title">venc_last:</div>
<div <div class="detail">
class="detail" {{
>{{ infoData&&infoData.venc_last ? infoData.venc_last / 1000 : "0" }}ms</div> infoData && infoData.venc_last
? infoData.venc_last / 1000
: "0"
}}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">pushrtt_avg:</div> <div class="title">pushrtt_avg:</div>
<div <div class="detail">
class="detail" {{
>{{ infoData&&infoData.pushrtt_avg ? infoData.pushrtt_avg[0] / 1000 : "0" }}ms</div> infoData && infoData.pushrtt_avg
? infoData.pushrtt_avg[0] / 1000
: "0"
}}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">pushrtt_last:</div> <div class="title">pushrtt_last:</div>
<div <div class="detail">
class="detail" {{
>{{ infoData&&infoData.pushrtt_last ? infoData.pushrtt_last[0] / 1000 : "0" }}ms</div> infoData && infoData.pushrtt_last
? infoData.pushrtt_last[0] / 1000
: "0"
}}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">recvrtt_avg:</div> <div class="title">recvrtt_avg:</div>
<div <div class="detail">
class="detail" {{
>{{ infoData&&infoData.recvrtt_avg ? infoData.recvrtt_avg[0] / 1000 : "0" }}ms</div> infoData && infoData.recvrtt_avg
? infoData.recvrtt_avg[0] / 1000
: "0"
}}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">recvrtt_last:</div> <div class="title">recvrtt_last:</div>
<div <div class="detail">
class="detail" {{
>{{ infoData&&infoData.recvrtt_last ? infoData.recvrtt_last[0] / 1000 : "0" }}ms</div> infoData && infoData.recvrtt_last
? infoData.recvrtt_last[0] / 1000
: "0"
}}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">pushretrans_avg:</div> <div class="title">pushretrans_avg:</div>
<div class="detail"> <div class="detail">
{{ {{
infoData&&infoData.pushretrans_avg ? (infoData.pushretrans_avg[0] * 0.1).toFixed(2) : "0" infoData && infoData.pushretrans_avg
? (infoData.pushretrans_avg[0] * 0.1).toFixed(2)
: "0"
}}% }}%
</div> </div>
</div> </div>
...@@ -181,7 +227,9 @@ ...@@ -181,7 +227,9 @@
<div class="title">pushretrans_last:</div> <div class="title">pushretrans_last:</div>
<div class="detail"> <div class="detail">
{{ {{
infoData&&infoData.pushretrans_last ? (infoData.pushretrans_last[0] * 0.1).toFixed(2) : "0" infoData && infoData.pushretrans_last
? (infoData.pushretrans_last[0] * 0.1).toFixed(2)
: "0"
}}% }}%
</div> </div>
</div> </div>
...@@ -189,7 +237,9 @@ ...@@ -189,7 +237,9 @@
<div class="title">recvretrans_avg:</div> <div class="title">recvretrans_avg:</div>
<div class="detail"> <div class="detail">
{{ {{
infoData&&infoData.recvretrans_avg ? (infoData.recvretrans_avg[0] * 0.1).toFixed(2) : "0" infoData && infoData.recvretrans_avg
? (infoData.recvretrans_avg[0] * 0.1).toFixed(2)
: "0"
}}% }}%
</div> </div>
</div> </div>
...@@ -197,17 +247,25 @@ ...@@ -197,17 +247,25 @@
<div class="title">recvretrans_last:</div> <div class="title">recvretrans_last:</div>
<div class="detail"> <div class="detail">
{{ {{
infoData&&infoData.recvretrans_last ? (infoData.recvretrans_last[0] * 0.1).toFixed(2) : "0" infoData && infoData.recvretrans_last
? (infoData.recvretrans_last[0] * 0.1).toFixed(2)
: "0"
}}% }}%
</div> </div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">vdec:</div> <div class="title">vdec:</div>
<div class="detail">{{ infoData&&infoData.vdec ? infoData.vdec / 1000 : "0" }}ms</div> <div class="detail">
{{ infoData && infoData.vdec ? infoData.vdec / 1000 : "0" }}ms
</div>
</div> </div>
<div class="de"> <div class="de">
<div class="title">vbuffer:</div> <div class="title">vbuffer:</div>
<div class="detail">{{ infoData&&infoData.vbuffer ? infoData.vbuffer / 1000 : "0" }}ms</div> <div class="detail">
{{
infoData && infoData.vbuffer ? infoData.vbuffer / 1000 : "0"
}}ms
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -232,7 +290,14 @@ ...@@ -232,7 +290,14 @@
<div class="text"> <div class="text">
<span class> <span class>
{{ {{
uavRealTimeData && uavRealTimeData.rtk && uavRealTimeData.rtk.type == 19 && uavRealTimeData.rtk.isMainSensor ? uavRealTimeData.rtk.relativeAlt : uavRealTimeData && uavRealTimeData.gps ? uavRealTimeData.gps.relativeAlt : 0 uavRealTimeData &&
uavRealTimeData.rtk &&
uavRealTimeData.rtk.type == 19 &&
uavRealTimeData.rtk.isMainSensor
? uavRealTimeData.rtk.relativeAlt
: uavRealTimeData && uavRealTimeData.gps
? uavRealTimeData.gps.relativeAlt
: 0
}} }}
</span> </span>
<span class style="color: black">m</span> <span class style="color: black">m</span>
...@@ -262,16 +327,25 @@ ...@@ -262,16 +327,25 @@
alt alt
/> />
</el-tooltip> </el-tooltip>
<el-tooltip content="是否启动瞄准镜" placement="bottom" v-if="!isStatus"> <el-tooltip
<img class="menu-item" src="./assets/images/center.png" @click.stop="showCenterFn" alt /> content="是否启动瞄准镜"
placement="bottom"
v-if="!isStatus"
>
<img
class="menu-item"
src="./assets/images/center.png"
@click.stop="showCenterFn"
alt
/>
</el-tooltip> </el-tooltip>
<el-tooltip <el-tooltip
v-if="!isStatus" v-if="!isStatus"
:content=" :content="
ygisCenterFlag ygisCenterFlag
? `摇杆位于中位 ${(ygValue && ygValue.toFixed(2)) || ''}` ? `摇杆位于中位 ${(ygValue && ygValue.toFixed(2)) || ''}`
: `摇杆未在中位 ${(ygValue && ygValue.toFixed(2)) || ''}` : `摇杆未在中位 ${(ygValue && ygValue.toFixed(2)) || ''}`
" "
placement="bottom" placement="bottom"
> >
<img <img
...@@ -284,7 +358,11 @@ ...@@ -284,7 +358,11 @@
<div class="right"> <div class="right">
<div class="search mr22" v-if="!isStatus"> <div class="search mr22" v-if="!isStatus">
<el-select class="video_type mr24" v-model="streamSelect" placeholder="切换源"> <el-select
class="video_type mr24"
v-model="streamSelect"
placeholder="切换源"
>
<el-option <el-option
v-for="(item, i) in streamOptions" v-for="(item, i) in streamOptions"
:key="i" :key="i"
...@@ -292,7 +370,12 @@ ...@@ -292,7 +370,12 @@
:value="item.value" :value="item.value"
></el-option> ></el-option>
</el-select> </el-select>
<el-select class="big_type" v-model="sizeSelect" placeholder="比例" @change="changeBig"> <el-select
class="big_type"
v-model="sizeSelect"
placeholder="比例"
@change="changeBig"
>
<el-option <el-option
v-for="item in sizeOptions2" v-for="item in sizeOptions2"
:key="item.value" :key="item.value"
...@@ -301,7 +384,10 @@ ...@@ -301,7 +384,10 @@
></el-option> ></el-option>
</el-select> </el-select>
</div> </div>
<div class="pointer iconfont icon-gengxin menu-item" @click.stop="reset"></div> <div
class="pointer iconfont icon-gengxin menu-item"
@click.stop="reset"
></div>
<!-- FPV切换 --> <!-- FPV切换 -->
<el-tooltip content="模式切换" placement="bottom"> <el-tooltip content="模式切换" placement="bottom">
<div <div
...@@ -310,7 +396,11 @@ ...@@ -310,7 +396,11 @@
@click.stop="change" @click.stop="change"
></div> ></div>
</el-tooltip> </el-tooltip>
<div class="pointer iconfont icon-quanping menu-item" @click.stop="screen" v-if="!isStatus"></div> <div
class="pointer iconfont icon-quanping menu-item"
@click.stop="screen"
v-if="!isStatus"
></div>
</div> </div>
</div> </div>
...@@ -321,7 +411,11 @@ ...@@ -321,7 +411,11 @@
<img src="./assets/images/ai.png" /> <img src="./assets/images/ai.png" />
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip v-if="!screenRecordingStatus" content="开始录像" placement="bottom"> <el-tooltip
v-if="!screenRecordingStatus"
content="开始录像"
placement="bottom"
>
<div class="record menu-item" @click.stop="getRecord"> <div class="record menu-item" @click.stop="getRecord">
<img src="./assets/images/record.png" /> <img src="./assets/images/record.png" />
</div> </div>
...@@ -338,7 +432,11 @@ ...@@ -338,7 +432,11 @@
</div> </div>
</el-tooltip> </el-tooltip>
<AiList ref="aiList" @screenShot="onAiScreenShot"></AiList> <AiList ref="aiList" @screenShot="onAiScreenShot"></AiList>
<div class="menu-item" @click.stop="startLinePoint" content="航点动作"> <div
class="menu-item"
@click.stop="startLinePoint"
content="航点动作"
>
<img src="./assets/images/point_small.svg" /> <img src="./assets/images/point_small.svg" />
</div> </div>
</div> </div>
...@@ -659,7 +757,7 @@ export default { ...@@ -659,7 +757,7 @@ export default {
isTakeOverHangar() { isTakeOverHangar() {
return this.$store.dispatch("MMCFlightControlCenter/hangar/isTakeOver"); return this.$store.dispatch("MMCFlightControlCenter/hangar/isTakeOver");
}, },
async isTake(show=true) { async isTake(show = true) {
// 判断是否已接管 // 判断是否已接管
let isTakeOver = this.isTakeOver; let isTakeOver = this.isTakeOver;
if (this.isHangar) { if (this.isHangar) {
...@@ -693,6 +791,17 @@ export default { ...@@ -693,6 +791,17 @@ export default {
this.showFlywayAction = true; this.showFlywayAction = true;
} }
}, },
onDebugInfo(data) {
switch (data.type) {
case "qoeinfo":
this.qoeinfo = data.data;
break;
case "raw_msg":
this.raw_msg = data.data;
break;
}
},
// 全屏
showCenterFn() { showCenterFn() {
this.showCenter = !this.showCenter; this.showCenter = !this.showCenter;
}, },
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论