遥控器汉化

Web/src/pages/page-pilot/pilot-home.vue

@@ -7,110 +7,122 @@
             <a-avatar :size="60" :src="cloudapi">
             </a-avatar>
           </a-layout-sider>
-          <a-layout-content style="margin-left: 1vw;" @click="showStatus">
+          <a-layout-content style="margin-left: 1vw;">
             <div style="height: 50%;">
-              <span style="font-size: 16px; font-weight: bolder">{{ workspaceName }}</span>
-              <RightOutlined style="float: right; margin-top: 5px; color: #8894a0" />
+              <a-dropdown :trigger="['click']">
+                <span style="font-size: 16px; font-weight: bolder">{{ workspaceName }}</span>
+                <template #overlay>
+                  <a-menu>
+                    <a-menu-item key="1">
+                      项目编号0001
+                    </a-menu-item>
+                    <a-menu-item key="2">
+                      项目编号0002
+                    </a-menu-item>
+                    <a-menu-item key="3">
+                      项目编号0003
+                    </a-menu-item>
+                  </a-menu>
+                </template>
+              </a-dropdown>
+              <RightOutlined style="float: right; margin-top: 5px; color: #8894a0" @click="showStatus" />
             </div>
             <div style="height: 50%;">
               <CloudSyncOutlined v-if="thingState === EStatusValue.CONNECTED" style="color: #75c5f6" />
-              <SyncOutlined spin v-else/>
+              <SyncOutlined spin v-else />
               <span style="color: #737373; margin-left: 3px;">{{ thingState }}</span>
             </div>
-            <a-drawer  placement="right" v-model:visible="drawerVisible" width="340px">
+            <a-drawer placement="right" v-model:visible="drawerVisible" width="340px">
               <div class="mb10 flex-row flex-justify-center flex-align-center">
-                <p class="fz14" style="font-weight: 100;">Module State</p>
+                <p class="fz14" style="font-weight: 100;">
+                  模块状态
+                </p>
               </div>
-              <div class= "width-100 mb10 flex-align-start" v-for="m in modules" :key="m.name" style="height: 30px;">
-
-                <div class="ml5" style="float: left; color: #000000;">{{m.name}}：</div>
+              <div class="width-100 mb10 flex-align-start" v-for="m in modules" :key="m.name" style="height: 30px;">
+                <div class="ml5" style="float: left; color: #000000;">{{ m.name }}：</div>
                 <div class="ml10" style="float: right; margin-bottom: 8px;">
-                  <span :key="m.state" :class="m.state.value === EStatusValue.CONNECTED ? 'green' : 'red'">{{ m.state.value }}&nbsp;</span>
-                  <a-button-group >
-                  <a-button class="ml5" type="primary" size="small" @click.stop="moduleInstall(m)">install</a-button>
-                  <a-button class="ml5 mr5" type="danger" size="small" @click.stop="moduleUninstall(m)">uninstall</a-button>
+                  <span :key="m.state" :class="m.state.value === EStatusValue.CONNECTED ? 'green' : 'red'">{{
+                    m.state.value }}&nbsp;</span>
+                  <a-button-group>
+                    <a-button class="ml5" type="primary" size="small" @click.stop="moduleInstall(m)">安装</a-button>
+                    <a-button class="ml5 mr5" type="danger" size="small" @click.stop="moduleUninstall(m)">卸载</a-button>
                   </a-button-group>
                 </div>
                 <a-divider />
-
               </div>
             </a-drawer>
           </a-layout-content>
-
         </a-layout>
-        <a-divider  style="height: 2px; background-color: #f5f5f5; margin-top: 3vh;" />
-
+        <a-divider style="height: 2px; background-color: #f5f5f5; margin-top: 3vh;" />
         <a-button id="exitBtn" class="fz18" @click="confirmAgain"
-        style="width: 10vw; height: 10vh; position: fixed; bottom: 13vh; left: 15vw; background-color: #e6e6e6; color: red; border: 0;"
-        type="primary">Exit
+          style="width: 10vw; height: 10vh; position: fixed; bottom: 13vh; left: 15vw; background-color: #e6e6e6; color: red; border: 0;"
+          type="primary">
+          退出
         </a-button>
         <a-modal v-model:visible="exitVisible" width="300px" :closable="false">
           <template #footer>
-            <a-button type="text" style="width: 48%; float: left;" @click="onBack">Cancel</a-button>
-            <a-button type="text" style="width: 48%;" @click="onExit">Exit</a-button>
+            <a-button type="text" style="width: 48%; float: left;" @click="onBack">取消</a-button>
+            <a-button type="text" style="width: 48%;" @click="onExit">确定</a-button>
           </template>
-          <p>Data will not be synchronized between DJI Pilot and this server after exiting.</p>
+          <p>退出后，大疆无人机与该服务器之间的数据将不会同步</p>
         </a-modal>
       </div>
     </a-layout-sider>
     <a-layout-content class="right flex-column">
       <div class="mb5">
-        <span class="ml5" style="color: #939393;">Serial Number</span>
+        <span class="ml5" style="color: #939393;">序列号</span>
       </div>
       <div class="fz16" style="background-color: white; border-radius: 4px;">
         <a-row style="border-bottom: 1px solid #f4f8f9; height: 45px;" align="middle">
           <a-col :span="1"></a-col>
-            <a-col :span="9">
-            Remote Control Sn
-            </a-col>
+          <a-col :span="9">
+            遥控器SN
+          </a-col>
           <a-col :span="13" class="flex-align-end flex-column">
             <span style="color: #737373">{{ device.data.gateway_sn }}</span>
           </a-col>
         </a-row>
-        <a-row style="border-bottom: 1px solid #f4f8f9; height: 45px;" align="middle" v-if="device.data.online_status && device.data.sn">
+        <a-row style="border-bottom: 1px solid #f4f8f9; height: 45px;" align="middle"
+          v-if="device.data.online_status && device.data.sn">
           <a-col :span="1"></a-col>
           <a-col :span="9">Aircraft Sn</a-col>
-          <a-col :span="13" class="flex-align-end flex-column" >
+          <a-col :span="13" class="flex-align-end flex-column">
             <span style="color: #737373">{{ device.data.sn }}</span>
           </a-col>
         </a-row>
       </div>
       <div class="mt5 mb5">
-        <span class="ml5" style="color: #939393;">Settings</span>
+        <span class="ml5" style="color: #939393;">设置</span>
       </div>
       <div class="fz16" style="background-color: white; border-radius: 4px;">
-        <a-row v-if="device.data.online_status && device.data.sn" style="border-bottom: 1px solid #f4f8f9; height: 45px;" align="middle" @click="bindingDevice">
+        <a-row v-if="device.data.online_status && device.data.sn"
+          style="border-bottom: 1px solid #f4f8f9; height: 45px;" align="middle" @click="bindingDevice">
           <a-col :span="1"></a-col>
           <a-col :span="11">
-            Device Binding
+            设备绑定
           </a-col>
           <a-col :span="10" style="text-align: right">
             <span v-if="device.data.bound_status" style="color: #737373">Aircraft bound</span>
             <span v-else style="color: #737373">Aircraft not bound</span>
           </a-col>
-          <a-col :span="2" class="flex-align-center flex-column" >
+          <a-col :span="2" class="flex-align-center flex-column">
             <RightOutlined style="color: #8894a0; font-size: 20px;" />
           </a-col>
         </a-row>
         <a-row style="border-bottom: 1px solid #f4f8f9; height: 45px;" align="middle" @click="onMediaSetting">
           <a-col :span="1"></a-col>
           <a-col :span="21">
-            Media File Upload
+            上传媒体
           </a-col>
-          <a-col :span="2" class="flex-align-center flex-column" >
+          <a-col :span="2" class="flex-align-center flex-column">
             <RightOutlined style="color: #8894a0; font-size: 20px;" />
           </a-col>
         </a-row>
         <a-row style="border-bottom: 1px solid #f4f8f9; height: 45px;" align="middle" @click="onLiveshareSetting">
           <a-col :span="1"></a-col>
-          <a-col :span="21">Livestream Manually</a-col>
-          <a-col :span="2" class="flex-align-center flex-column">
-            <RightOutlined style="color: #8894a0; font-size: 20px;" />
+          <a-col :span="21">
+            手动直播
           </a-col>
-        </a-row>
-        <a-row style="border-bottom: 1px solid #f4f8f9; height: 45px;" align="middle" @click="onOpen3rdApp">
-          <a-col :span="1"></a-col>
-          <a-col :span="21">Open 3rd Party APP</a-col>
           <a-col :span="2" class="flex-align-center flex-column">
             <RightOutlined style="color: #8894a0; font-size: 20px;" />
           </a-col>
@@ -120,15 +132,14 @@
   </a-layout>
 </template>
 <script lang="ts" setup>
-import { message, Popconfirm } from 'ant-design-vue'
-import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
-import { CURRENT_CONFIG } from '/@/api/http/config'
+import { message } from 'ant-design-vue'
+import { onMounted, reactive, ref } from 'vue'
 import { BindBody, bindDevice, getDeviceBySn, getPlatformInfo, getUserInfo } from '/@/api/manage'
 import apiPilot, { ApiParam, MapParam, ThingParam, WsParam } from '/@/api/pilot-bridge'
 import { getRoot } from '/@/root'
 import { EBizCode, EComponentName, EDownloadOwner, ELocalStorageKey, ERouterName, EStatusValue } from '/@/types'
 import cloudapi from '/@/assets/icons/cloudapi.png'
-import { RightOutlined, CloudOutlined, CloudSyncOutlined, SyncOutlined } from '@ant-design/icons-vue'
+import { SwapOutlined, RightOutlined, CloudSyncOutlined, SyncOutlined } from '@ant-design/icons-vue'
 import { useMyStore } from '/@/store'
 import { DeviceStatus } from '/@/types/device'
 import { useConnectWebSocket } from '/@/hooks/use-connect-websocket'
@@ -400,7 +411,7 @@ const showStatus = async () => {
   drawerVisible.value = true
 }
 
-function setWorkspaceInfo () {
+function setWorkspaceInfo() {
   if (localStorage.getItem(ELocalStorageKey.WorkspaceName)) {
     apiPilot.setPlatformMessage(
       '' + localStorage.getItem(ELocalStorageKey.PlatformName),
@@ -427,7 +438,7 @@ function setWorkspaceInfo () {
   })
 }
 
-function refreshStatus () {
+function refreshStatus() {
   thingState.value = apiPilot.thingGetConnectState() ? EStatusValue.CONNECTED : EStatusValue.DISCONNECT
   apiState.value = apiPilot.isComponentLoaded(EComponentName.Api) ? EStatusValue.CONNECTED : EStatusValue.DISCONNECT
   liveState.value = apiPilot.isComponentLoaded(EComponentName.Liveshare) ? EStatusValue.CONNECTED : EStatusValue.DISCONNECT
@@ -440,7 +451,7 @@ function refreshStatus () {
   waylineState.value = apiPilot.isComponentLoaded(EComponentName.Mission) ? EStatusValue.CONNECTED : EStatusValue.DISCONNECT
 }
 
-function moduleInstall (m: any) {
+function moduleInstall(m: any) {
   let param
   switch (m.module) {
     case EComponentName.Thing:
@@ -476,13 +487,13 @@ function moduleInstall (m: any) {
   refreshStatus()
 }
 
-function moduleUninstall (m: any) {
+function moduleUninstall(m: any) {
   message.info('uninstall ' + m.module)
   apiPilot.unloadComponent(m.module)
   refreshStatus()
 }
 
-function getDeviceInfo () {
+function getDeviceInfo() {
   if (!device.data.sn || device.data.sn === EStatusValue.DISCONNECT) {
     return
   }
@@ -501,18 +512,21 @@ function getDeviceInfo () {
 
 <style lang="scss" scoped>
 @import '/@/styles/index.scss';
+
 .page {
   display: flex;
   position: absolute;
   transition: width 0.2s ease;
   height: 100%;
   width: 100%;
+
   .left {
     height: 90%;
     background-color: white;
     margin-top: 6vh;
     margin-left: 2vh;
   }
+
   .right {
     height: 90%;
     margin-top: 6vh;
@@ -520,12 +534,15 @@ function getDeviceInfo () {
     margin-right: 5vh;
   }
 }
+
 .green {
   color: green
 }
+
 .red {
   color: red;
 }
+
 #exitBtn:hover :active {
   background-color: rgb(77, 75, 75);
   width: 10vw;
@@ -535,5 +552,4 @@ function getDeviceInfo () {
   left: 15vw;
   line-height: 10vh;
 }
-
 </style>

Web/src/pages/page-pilot/pilot-index.vue

@@ -1,42 +1,26 @@
 <template>
   <div class="login flex-column flex-justify-center flex-align-center m0 b0">
-    <a-image
-      style="width: 17vw; height: 10vw; margin-bottom: 50px"
-      :src="djiLogo"
-    />
-    <p class="logo fz35 pb50">Pilot Cloud API Demo</p>
-    <a-form
-      layout="inline"
-      :model="formState"
-      class="flex-row flex-justify-center flex-align-center"
-    >
+    <a-image style="width: 17vw; height: 10vw; margin-bottom: 50px" :src="djiLogo" />
+    <p class="logo fz35 pb50">无人机管理系统</p>
+    <a-form layout="inline" :model="formState" class="flex-row flex-justify-center flex-align-center">
       <a-form-item>
-        <a-input v-model:value="formState.username" placeholder="Username">
-          <template #prefix
-            ><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
-          /></template>
+        <a-input v-model:value="formState.username" placeholder="账号">
+          <template #prefix>
+            <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
+          </template>
         </a-input>
       </a-form-item>
       <a-form-item>
-        <a-input
-          v-model:value="formState.password"
-          type="password"
-          placeholder="Password"
-        >
-          <template #prefix
-            ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
-          /></template>
+        <a-input v-model:value="formState.password" type="password" placeholder="密码">
+          <template #prefix>
+            <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
+          </template>
         </a-input>
       </a-form-item>
       <a-form-item>
-        <a-button
-          class="m0"
-          type="primary"
-          html-type="submit"
-          :disabled="formState.user === '' || formState.password === ''"
-          @click="onSubmit"
-        >
-          Login
+        <a-button class="m0" type="primary" html-type="submit"
+          :disabled="formState.user === '' || formState.password === ''" @click="onSubmit">
+          登录
         </a-button>
       </a-form-item>
     </a-form>
@@ -81,7 +65,7 @@ onMounted(async () => {
         })
         const jsres = apiPilot.loadComponent(EComponentName.Api, apiPilot.getComponentParam(EComponentName.Api))
         if (!jsres) {
-          message.error('Failed to load api module.')
+          message.error('加载api模块失败')
           return
         }
         apiPilot.setToken(res.data.access_token)
@@ -97,7 +81,7 @@ const onSubmit = async (e: any) => {
   await login(formState)
     .then(res => {
       if (!isVerified.value) {
-        message.error('Please verify the license firstly.')
+        message.error('请先核实license')
         return
       }
       console.log('login res:', res)
@@ -117,7 +101,7 @@ const onSubmit = async (e: any) => {
         localStorage.setItem(ELocalStorageKey.UserId, res.data.user_id)
         localStorage.setItem(ELocalStorageKey.Username, res.data.username)
         localStorage.setItem(ELocalStorageKey.Flag, EUserType.Pilot.toString())
-        message.success('Login Success')
+        message.success('登录成功')
         root.$router.push(ERouterName.PILOT_HOME)
       }
     })
@@ -126,23 +110,25 @@ const onSubmit = async (e: any) => {
     })
 }
 
-function verifyLicense () {
+function verifyLicense() {
   isVerified.value = apiPilot.platformVerifyLicense(CURRENT_CONFIG.appId, CURRENT_CONFIG.appKey, CURRENT_CONFIG.appLicense) &&
     apiPilot.isPlatformVerifySuccess()
   if (isVerified.value) {
-    message.success('The license verification is successful.')
+    message.success('license认证成功')
   } else {
-    message.error('Filed to verify the license. Please check license whether the license is correct, or apply again.')
+    message.error('申请license验证。请检查license是否正确，或者重新申请')
   }
 }
 </script>
 
 <style lang="scss" scoped>
 @import '/@/styles/index.scss';
+
 .login {
   // background-color: $dark-highlight;
   height: 100vh;
 }
+
 .logo {
   color: $primary;
 }

Web/src/pages/page-pilot/pilot-liveshare.vue

@@ -1,25 +1,14 @@
 <template>
-    <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">
-        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%;">
+  <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>
+    <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>
-      <a-select
-        style="width: 200px; margin-right: 20px;"
-        placeholder="Select Mode"
-        @select="onPublishModeSelect"
-      >
-        <a-select-option
-          v-for="item in publishModeList"
-          :key="item.label"
-          :value="item.value"
-        >
+      <a-select style="width: 200px; margin-right: 20px;" placeholder="发布模式" @select="onPublishModeSelect">
+        <a-select-option v-for="item in publishModeList" :key="item.label" :value="item.value">
           {{ item.label }}
         </a-select-option>
       </a-select>
@@ -28,22 +17,13 @@
     <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>
-      <a-select
-        style="width: 200px; margin-right: 20px;"
-        placeholder="Select Live Type"
-        :value="liveStreamStatus.type"
-        @select="onLiveTypeSelect"
-      >
-        <a-select-option
-          v-for="item in liveTypeList"
-          :key="item.label"
-          :value="item.value"
-        >
+    <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="直播类型" :value="liveStreamStatus.type"
+        @select="onLiveTypeSelect">
+        <a-select-option v-for="item in liveTypeList" :key="item.label" :value="item.value">
           {{ item.label }}
         </a-select-option>
       </a-select>
@@ -53,76 +33,80 @@
     </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;">
           <div class="flex-col flex-justify-center flex-align-center">
             <div>
               <span class="ml10">Token:</span>
-              <a-input
-                class="ml10"
-                v-model:value="agoraParam.token"
-                placeholder="Token"
-              ></a-input>
+              <a-input class="ml10" v-model:value="agoraParam.token" placeholder="Token"></a-input>
             </div>
             <div>
               <span class="ml10">Channel:</span>
-              <a-input
-                class="ml10"
-                v-model:value="agoraParam.channelId"
-                placeholder="Channel"
-              ></a-input>
+              <a-input class="ml10" v-model:value="agoraParam.channelId" placeholder="Channel"></a-input>
             </div>
           </div>
         </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-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>
+      <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>
+            <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>Frame Rate:</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>Video Bit Rate:</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>Audio Bit Rate:</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>Packet Loss Rate:</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>Jitter:</span><span style="float: right; color: #75c5f6;">{{ liveStreamStatus.jitter }}</span><br />
         </div>
       </div>
     </a-drawer>
@@ -245,7 +229,7 @@ const liveStatusCallback = async (arg: LiveStreamStatus) => {
       liveState.value = EStatusValue.DISCONNECT
   }
 }
-function refreshLiveType () {
+function refreshLiveType() {
   switch (liveStreamStatus.type) {
     case ELiveTypeValue.Agora:
       liveTypeSelected.value = ELiveTypeName.Agora
@@ -274,11 +258,11 @@ const onPublishModeSelect = (val: string) => {
 const onPlay = () => {
   console.info(JSON.stringify(agoraParam))
   if (!publishModeSelected.value) {
-    message.warn('Please select publish mode!')
+    message.warn('请选择发布模式!')
     return
   }
   if (liveTypeSelected.value === ELiveTypeName.Unknown) {
-    message.warn('Please select livestream type!')
+    message.warn('请选择直播类型!')
     return
   }
   switch (liveStreamStatus.type) {
@@ -303,7 +287,7 @@ const onPlay = () => {
   if (status) {
     playVisiable.value = true
     drawerVisible.value = true
-    message.success('success')
+    message.success('成功')
   }
 }
 
@@ -314,7 +298,7 @@ const showLivingStatus = () => {
 const onStop = () => {
   const status = apiPilot.stopLiveshare()
   if (status) {
-    message.success('success')
+    message.success('成功')
     playVisiable.value = false
     drawerVisible.value = false
     setTimeout(() => {
@@ -331,5 +315,4 @@ const onStop = () => {
 </script>
 
 <style lang="scss" scoped>
-// @import '/@/styles/index.scss';
-</style>
+// @import '/@/styles/index.scss';</style>

Web/src/pages/page-pilot/pilot-media.vue

@@ -1,69 +1,44 @@
 <template>
   <a-layout>
-  <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">
-      When enabled, photos and videos will be automatically uploaded to this server
-    </p>
-    <div
-      class="flex-row flex-align-center mt20"
-      style="width: 100%;"
-    >
-      <p class="ml10 mb0 fz16" style="margin-right: 73vw;">Auto Photo Upload</p>
-      <a-switch
-        v-model:checked="enablePhotoUpload"
-        @change="onPhotoUpload"
-      ></a-switch>
-    </div>
-    <div
-      class="flex-row flex-align-center flex-justify-between"
-      style="width: 100%"
-    >
-      <a-radio-group
-        class="mt10 ml20"
-        v-if="enablePhotoUpload === true"
-        v-model:value="photoType"
-        defaultChecked="0"
-        @change="onPhototype"
-      >
-        <a-radio :value="EPhotoType.Original">Original Photo</a-radio>
-        <a-radio class="ml20" :value="EPhotoType.Preview">Preview Photo</a-radio>
-      </a-radio-group>
-    </div>
-    <div class="ml10 mr10" style="width: 96%; margin-top: -10px;">
-      <a-divider />
-    </div>
-    <div
-      class="flex-row flex-align-center"
-      style="width: 100%; margin-top: -10px;"
-    >
-      <p class="ml10 mb0 fz16" style="margin-right: 73vw;">Auto Video Upload</p>
-      <a-switch
-        @change="onVideoUpload"
-        v-model:checked="enableVideoUpload"
-      ></a-switch>
-    </div>
-    <div class="ml10 mr10" style="width: 96%; margin-top: -10px;">
-      <a-divider />
-    </div>
-    <div
-      class="flex-row flex-align-center flex-justify-between mb15"
-      style="width: 100%; margin-top: -10px;"
-    >
-      <p class="ml10 mb0 fz16 color-font-bold">
-        Path for uploading media resources in dual-controller mode
+    <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>
-      <a-radio-group
-        class="mt0 mb0"
-        v-model:value="uploadPath"
-        button-style="solid"
-        @change="onUploadPath"
-      >
-        <a-radio-button :value="EDownloadOwner.Mine">Mine</a-radio-button>
-        <a-radio-button :value="EDownloadOwner.Others">Another</a-radio-button>
-      </a-radio-group>
+      <div class="flex-row flex-align-center mt20" style="width: 100%;">
+        <p class="ml10 mb0 fz16" style="margin-right: 73vw;">自动上传照片 </p>
+        <a-switch v-model:checked="enablePhotoUpload" @change="onPhotoUpload"></a-switch>
+      </div>
+      <div class="flex-row flex-align-center flex-justify-between" style="width: 100%">
+        <a-radio-group class="mt10 ml20" v-if="enablePhotoUpload === true" v-model:value="photoType" defaultChecked="0"
+          @change="onPhototype">
+          <a-radio :value="EPhotoType.Original">
+            原图
+          </a-radio>
+          <a-radio class="ml20" :value="EPhotoType.Preview">
+            缩略图
+          </a-radio>
+        </a-radio-group>
+      </div>
+      <div class="ml10 mr10" style="width: 96%; margin-top: -10px;">
+        <a-divider />
+      </div>
+      <div class="flex-row flex-align-center" style="width: 100%; margin-top: -10px;">
+        <p class="ml10 mb0 fz16" style="margin-right: 73vw;">自动上传视频</p>
+        <a-switch @change="onVideoUpload" v-model:checked="enableVideoUpload"></a-switch>
+      </div>
+      <div class="ml10 mr10" style="width: 96%; margin-top: -10px;">
+        <a-divider />
+      </div>
+      <div class="flex-row flex-align-center flex-justify-between mb15" style="width: 100%; margin-top: -10px;">
+        <p class="ml10 mb0 fz16 color-font-bold">
+          用于双控模式下上传媒体资源
+        </p>
+        <a-radio-group class="mt0 mb0" v-model:value="uploadPath" button-style="solid" @change="onUploadPath">
+          <a-radio-button :value="EDownloadOwner.Mine">我的</a-radio-button>
+          <a-radio-button :value="EDownloadOwner.Others">其它</a-radio-button>
+        </a-radio-group>
+      </div>
     </div>
-  </div>
   </a-layout>
 </template>
 
@@ -100,5 +75,4 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-// @import '/@/styles/index.scss';
-</style>
+// @import '/@/styles/index.scss';</style>