更新样式穿透语法

Web/src/components/g-map/DroneControlInfoPanel.vue

@@ -1,14 +1,14 @@
 <template>
-<div class="drone-control-info-wrap">
-  <a-textarea v-model:value="info" placeholder="drc info" :rows="5" disabled/>
-</div>
+  <div class="drone-control-info-wrap">
+    <a-textarea v-model:value="info" placeholder="drc info" :rows="5" disabled />
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, defineProps, watch } from 'vue'
 
 const props = defineProps<{
-    message?: string,
+  message?: string,
 }>()
 
 const info = ref('')
@@ -23,12 +23,11 @@ watch(() => props.message, message => {
 
 <style lang="scss" scoped>
 .drone-control-info-wrap {
-  &::v-deep{
-    textarea.ant-input {
-      background-color: #000;
-      color: #fff;
-      white-space: pre-wrap;
-    }
+
+  :deep(.ant-input) {
+    background-color: #000;
+    color: #fff;
+    white-space: pre-wrap;
   }
 }
 </style>

Web/src/components/g-map/DroneControlPanel.vue

@@ -4,145 +4,141 @@
     <div class="drone-control-box">
       <div class="box">
         <div class="row">
-          <div class="drone-control"><Button :ghost="!flightController" size="small"  @click="onClickFightControl">{{ flightController ? 'Exit Remote Control' : 'Enter Remote Control'}}</Button></div>
+          <div class="drone-control"><Button :ghost="!flightController" size="small" @click="onClickFightControl">{{
+            flightController ? 'Exit Remote Control' : 'Enter Remote Control' }}</Button></div>
         </div>
         <div class="row">
           <div class="drone-control-direction">
             <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_Q)" @onmouseup="onMouseUp">
-              <template #icon><UndoOutlined /></template><span class="word">Q</span>
+              <template #icon>
+                <UndoOutlined />
+              </template><span class="word">Q</span>
             </Button>
             <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_W)" @onmouseup="onMouseUp">
-              <template #icon><UpOutlined/></template><span class="word">W</span>
+              <template #icon>
+                <UpOutlined />
+              </template><span class="word">W</span>
             </Button>
             <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_E)" @onmouseup="onMouseUp">
-              <template #icon><RedoOutlined /></template><span class="word">E</span>
+              <template #icon>
+                <RedoOutlined />
+              </template><span class="word">E</span>
             </Button>
             <Button size="small" ghost @mousedown="onMouseDown(KeyCode.ARROW_UP)" @onmouseup="onMouseUp">
-              <template #icon><ArrowUpOutlined /></template>
+              <template #icon>
+                <ArrowUpOutlined />
+              </template>
             </Button>
             <br />
             <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_A)" @onmouseup="onMouseUp">
-              <template #icon><LeftOutlined/></template><span class="word">A</span>
+              <template #icon>
+                <LeftOutlined />
+              </template><span class="word">A</span>
             </Button>
             <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_S)" @onmouseup="onMouseUp">
-              <template #icon><DownOutlined/></template><span class="word">S</span>
+              <template #icon>
+                <DownOutlined />
+              </template><span class="word">S</span>
             </Button>
             <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_D)" @onmouseup="onMouseUp">
-              <template #icon><RightOutlined/></template><span class="word">D</span>
+              <template #icon>
+                <RightOutlined />
+              </template><span class="word">D</span>
             </Button>
             <Button size="small" ghost @mousedown="onMouseDown(KeyCode.ARROW_DOWN)" @onmouseup="onMouseUp">
-              <template #icon><ArrowDownOutlined /></template>
+              <template #icon>
+                <ArrowDownOutlined />
+              </template>
             </Button>
           </div>
-          <Button type="primary" size="small" danger ghost @click="handleEmergencyStop" >
-            <template #icon><PauseCircleOutlined/></template><span>Break</span>
+          <Button type="primary" size="small" danger ghost @click="handleEmergencyStop">
+            <template #icon>
+              <PauseCircleOutlined />
+            </template><span>Break</span>
           </Button>
         </div>
         <div class="row">
-          <DroneControlPopover
-            :visible="flyToPointPopoverData.visible"
-            :loading="flyToPointPopoverData.loading"
-            @confirm="($event) => onFlyToConfirm(true)"
-            @cancel="($event) =>onFlyToConfirm(false)"
-          >
+          <DroneControlPopover :visible="flyToPointPopoverData.visible" :loading="flyToPointPopoverData.loading"
+            @confirm="($event) => onFlyToConfirm(true)" @cancel="($event) => onFlyToConfirm(false)">
             <template #formContent>
               <div class="form-content">
                 <div>
                   <span class="form-label">latitude:</span>
-                  <a-input-number v-model:value="flyToPointPopoverData.latitude"/>
+                  <a-input-number v-model:value="flyToPointPopoverData.latitude" />
                 </div>
                 <div>
                   <span class="form-label">longitude:</span>
-                  <a-input-number v-model:value="flyToPointPopoverData.longitude"/>
+                  <a-input-number v-model:value="flyToPointPopoverData.longitude" />
                 </div>
                 <div>
                   <span class="form-label">height(m):</span>
-                  <a-input-number v-model:value="flyToPointPopoverData.height"/>
+                  <a-input-number v-model:value="flyToPointPopoverData.height" />
                 </div>
               </div>
             </template>
-            <Button size="small" ghost @click="onShowFlyToPopover" >
+            <Button size="small" ghost @click="onShowFlyToPopover">
               <span>Fly to</span>
             </Button>
           </DroneControlPopover>
-          <Button size="small" ghost @click="onStopFlyToPoint" >
+          <Button size="small" ghost @click="onStopFlyToPoint">
             <span>Stop Fly to</span>
           </Button>
-          <DroneControlPopover
-            :visible="takeoffToPointPopoverData.visible"
-            :loading="takeoffToPointPopoverData.loading"
-            @confirm="($event) => onTakeoffToPointConfirm(true)"
-            @cancel="($event) =>onTakeoffToPointConfirm(false)"
-          >
+          <DroneControlPopover :visible="takeoffToPointPopoverData.visible" :loading="takeoffToPointPopoverData.loading"
+            @confirm="($event) => onTakeoffToPointConfirm(true)" @cancel="($event) => onTakeoffToPointConfirm(false)">
             <template #formContent>
               <div class="form-content">
                 <div>
                   <span class="form-label">latitude:</span>
-                  <a-input-number v-model:value="takeoffToPointPopoverData.latitude"/>
+                  <a-input-number v-model:value="takeoffToPointPopoverData.latitude" />
                 </div>
                 <div>
                   <span class="form-label">longitude:</span>
-                  <a-input-number v-model:value="takeoffToPointPopoverData.longitude"/>
+                  <a-input-number v-model:value="takeoffToPointPopoverData.longitude" />
                 </div>
                 <div>
                   <span class="form-label">height(m):</span>
-                  <a-input-number v-model:value="takeoffToPointPopoverData.height"/>
+                  <a-input-number v-model:value="takeoffToPointPopoverData.height" />
                 </div>
                 <div>
                   <span class="form-label">Safe Takeoff Altitude(m):</span>
-                  <a-input-number v-model:value="takeoffToPointPopoverData.securityTakeoffHeight"/>
+                  <a-input-number v-model:value="takeoffToPointPopoverData.securityTakeoffHeight" />
                 </div>
                 <div>
                   <span class="form-label">Return-to-Home Altitude(m):</span>
-                  <a-input-number v-model:value="takeoffToPointPopoverData.rthAltitude"/>
+                  <a-input-number v-model:value="takeoffToPointPopoverData.rthAltitude" />
                 </div>
                 <div>
                   <span class="form-label">Lost Action:</span>
-                  <a-select
-                    v-model:value="takeoffToPointPopoverData.rcLostAction"
-                    style="width: 120px"
-                    :options="LostControlActionInCommandFLightOptions"
-                  ></a-select>
+                  <a-select v-model:value="takeoffToPointPopoverData.rcLostAction" style="width: 120px"
+                    :options="LostControlActionInCommandFLightOptions"></a-select>
                 </div>
                 <div>
                   <span class="form-label">Wayline Lost Action:</span>
-                  <a-select
-                    v-model:value="takeoffToPointPopoverData.exitWaylineWhenRcLost"
-                    style="width: 120px"
-                    :options="WaylineLostControlActionInCommandFlightOptions"
-                  ></a-select>
+                  <a-select v-model:value="takeoffToPointPopoverData.exitWaylineWhenRcLost" style="width: 120px"
+                    :options="WaylineLostControlActionInCommandFlightOptions"></a-select>
                 </div>
                 <div>
                   <span class="form-label">Return-to-Home Mode:</span>
-                  <a-select
-                    v-model:value="takeoffToPointPopoverData.rthMode"
-                    style="width: 120px"
-                    :options="RthModeInCommandFlightOptions"
-                  ></a-select>
+                  <a-select v-model:value="takeoffToPointPopoverData.rthMode" style="width: 120px"
+                    :options="RthModeInCommandFlightOptions"></a-select>
                 </div>
                 <div>
                   <span class="form-label">Commander Mode Lost Action:</span>
-                  <a-select
-                    v-model:value="takeoffToPointPopoverData.commanderModeLostAction"
-                    style="width: 120px"
-                    :options="CommanderModeLostActionInCommandFlightOptions"
-                  ></a-select>
+                  <a-select v-model:value="takeoffToPointPopoverData.commanderModeLostAction" style="width: 120px"
+                    :options="CommanderModeLostActionInCommandFlightOptions"></a-select>
                 </div>
                 <div>
                   <span class="form-label">Commander Flight Mode:</span>
-                  <a-select
-                    v-model:value="takeoffToPointPopoverData.commanderFlightMode"
-                    style="width: 120px"
-                    :options="CommanderFlightModeInCommandFlightOptions"
-                  ></a-select>
+                  <a-select v-model:value="takeoffToPointPopoverData.commanderFlightMode" style="width: 120px"
+                    :options="CommanderFlightModeInCommandFlightOptions"></a-select>
                 </div>
                 <div>
                   <span class="form-label">Commander Flight Height(m):</span>
-                  <a-input-number v-model:value="takeoffToPointPopoverData.commanderFlightHeight"/>
+                  <a-input-number v-model:value="takeoffToPointPopoverData.commanderFlightHeight" />
                 </div>
               </div>
             </template>
-            <Button size="small" ghost @click="onShowTakeoffToPointPopover" >
+            <Button size="small" ghost @click="onShowTakeoffToPointPopover">
               <span>Take off</span>
             </Button>
             <div v-for="(cmdItem) in cmdList" :key="cmdItem.cmdKey" class="control-cmd-item">
@@ -151,115 +147,95 @@
               </Button>
             </div>
             <div>
-              <Button size="small" ghost @click="openLivestreamAgora" >
+              <Button size="small" ghost @click="openLivestreamAgora">
                 <span>Agora Live</span>
               </Button>
-              <Button size="small" ghost @click="openLivestreamOthers" >
+              <Button size="small" ghost @click="openLivestreamOthers">
                 <span>RTMP/GB28181 Live</span>
               </Button>
             </div>
           </DroneControlPopover>
         </div>
-    </div>
-    <div class="box">
-      <div class="row">
-        <Select v-model:value="payloadSelectInfo.value" style="width: 110px; marginRight: 5px" :options="payloadSelectInfo.options" @change="handlePayloadChange"/>
-        <div class="drone-control">
-          <Button type="primary" size="small" @click="onAuthPayload">Payload Control</Button>
-        </div>
       </div>
-      <div class="row">
-        <DroneControlPopover
-          :visible="gimbalResetPopoverData.visible"
-          :loading="gimbalResetPopoverData.loading"
-          @confirm="($event) => onGimbalResetConfirm(true)"
-          @cancel="($event) =>onGimbalResetConfirm(false)"
-        >
-          <template #formContent>
-            <div class="form-content">
-              <div>
-                <span class="form-label">reset mode:</span>
-                <a-select
-                  v-model:value="gimbalResetPopoverData.resetMode"
-                  style="width: 180px"
-                  :options="GimbalResetModeOptions"
-                ></a-select>
+      <div class="box">
+        <div class="row">
+          <Select v-model:value="payloadSelectInfo.value" style="width: 110px; marginRight: 5px"
+            :options="payloadSelectInfo.options" @change="handlePayloadChange" />
+          <div class="drone-control">
+            <Button type="primary" size="small" @click="onAuthPayload">Payload Control</Button>
+          </div>
+        </div>
+        <div class="row">
+          <DroneControlPopover :visible="gimbalResetPopoverData.visible" :loading="gimbalResetPopoverData.loading"
+            @confirm="($event) => onGimbalResetConfirm(true)" @cancel="($event) => onGimbalResetConfirm(false)">
+            <template #formContent>
+              <div class="form-content">
+                <div>
+                  <span class="form-label">reset mode:</span>
+                  <a-select v-model:value="gimbalResetPopoverData.resetMode" style="width: 180px"
+                    :options="GimbalResetModeOptions"></a-select>
+                </div>
               </div>
-            </div>
-          </template>
-          <Button size="small" ghost @click="onShowGimbalResetPopover">
-            <span>Gimbal Reset</span>
+            </template>
+            <Button size="small" ghost @click="onShowGimbalResetPopover">
+              <span>Gimbal Reset</span>
+            </Button>
+          </DroneControlPopover>
+          <Button size="small" ghost @click="onSwitchCameraMode">
+            <span>Camera Mode Switch</span>
           </Button>
-        </DroneControlPopover>
-        <Button size="small" ghost @click="onSwitchCameraMode">
-          <span>Camera Mode Switch</span>
-        </Button>
-      </div>
-      <div class="row">
-        <Button size="small" ghost @click="onStartCameraRecording">
-          <span>Start Recording</span>
-        </Button>
-        <Button size="small" ghost @click="onStopCameraRecording">
-          <span>Stop Recording</span>
-        </Button>
-      </div>
-      <div class="row">
-        <Button size="small" ghost  @click="onTakeCameraPhoto">
-          <span>Take Photo</span>
-        </Button>
-        <DroneControlPopover
-          :visible="zoomFactorPopoverData.visible"
-          :loading="zoomFactorPopoverData.loading"
-          @confirm="($event) => onZoomFactorConfirm(true)"
-          @cancel="($event) =>onZoomFactorConfirm(false)"
-        >
-          <template #formContent>
-            <div class="form-content">
-              <div>
-                <span class="form-label">camera type:</span>
-                <a-select
-                  v-model:value="zoomFactorPopoverData.cameraType"
-                  style="width: 120px"
-                  :options="ZoomCameraTypeOptions"
-                ></a-select>
-              </div>
-              <div>
-                <span class="form-label">zoom factor:</span>
-                <a-input-number v-model:value="zoomFactorPopoverData.zoomFactor" :min="2" :max="200" />
-              </div>
-            </div>
-          </template>
-          <Button size="small" ghost @click="($event) => onShowZoomFactorPopover()">
-            <span class="word" @click=";">Zoom</span>
+        </div>
+        <div class="row">
+          <Button size="small" ghost @click="onStartCameraRecording">
+            <span>Start Recording</span>
           </Button>
-        </DroneControlPopover>
-        <DroneControlPopover
-            :visible="cameraAimPopoverData.visible"
-            :loading="cameraAimPopoverData.loading"
-            @confirm="($event) => onCameraAimConfirm(true)"
-            @cancel="($event) =>onCameraAimConfirm(false)"
-          >
+          <Button size="small" ghost @click="onStopCameraRecording">
+            <span>Stop Recording</span>
+          </Button>
+        </div>
+        <div class="row">
+          <Button size="small" ghost @click="onTakeCameraPhoto">
+            <span>Take Photo</span>
+          </Button>
+          <DroneControlPopover :visible="zoomFactorPopoverData.visible" :loading="zoomFactorPopoverData.loading"
+            @confirm="($event) => onZoomFactorConfirm(true)" @cancel="($event) => onZoomFactorConfirm(false)">
             <template #formContent>
               <div class="form-content">
                 <div>
                   <span class="form-label">camera type:</span>
-                  <a-select
-                    v-model:value="cameraAimPopoverData.cameraType"
-                    style="width: 120px"
-                    :options="CameraTypeOptions"
-                  ></a-select>
+                  <a-select v-model:value="zoomFactorPopoverData.cameraType" style="width: 120px"
+                    :options="ZoomCameraTypeOptions"></a-select>
+                </div>
+                <div>
+                  <span class="form-label">zoom factor:</span>
+                  <a-input-number v-model:value="zoomFactorPopoverData.zoomFactor" :min="2" :max="200" />
+                </div>
+              </div>
+            </template>
+            <Button size="small" ghost @click="($event) => onShowZoomFactorPopover()">
+              <span class="word" @click=";">Zoom</span>
+            </Button>
+          </DroneControlPopover>
+          <DroneControlPopover :visible="cameraAimPopoverData.visible" :loading="cameraAimPopoverData.loading"
+            @confirm="($event) => onCameraAimConfirm(true)" @cancel="($event) => onCameraAimConfirm(false)">
+            <template #formContent>
+              <div class="form-content">
+                <div>
+                  <span class="form-label">camera type:</span>
+                  <a-select v-model:value="cameraAimPopoverData.cameraType" style="width: 120px"
+                    :options="CameraTypeOptions"></a-select>
                 </div>
                 <div>
                   <span class="form-label">locked:</span>
-                  <a-switch v-model:checked="cameraAimPopoverData.locked"/>
+                  <a-switch v-model:checked="cameraAimPopoverData.locked" />
                 </div>
                 <div>
                   <span class="form-label">x:</span>
-                  <a-input-number v-model:value="cameraAimPopoverData.x" :min="0" :max="1"/>
+                  <a-input-number v-model:value="cameraAimPopoverData.x" :min="0" :max="1" />
                 </div>
                 <div>
                   <span class="form-label">y:</span>
-                  <a-input-number v-model:value="cameraAimPopoverData.y" :min="0" :max="1"/>
+                  <a-input-number v-model:value="cameraAimPopoverData.y" :min="0" :max="1" />
                 </div>
               </div>
             </template>
@@ -267,9 +243,9 @@
               <span class="word" @click=";">AIM</span>
             </Button>
           </DroneControlPopover>
+        </div>
       </div>
     </div>
-    </div>
     <!-- 信息提示 -->
     <DroneControlInfoPanel :message="drcInfo"></DroneControlInfoPanel>
   </div>
@@ -320,7 +296,7 @@ const {
   sendDockControlCmd
 } = useDockControl()
 
-async function sendControlCmd (cmdItem: DeviceCmdItem, index: number) {
+async function sendControlCmd(cmdItem: DeviceCmdItem, index: number) {
   cmdItem.loading = true
   const result = await sendDockControlCmd({
     sn: props.sn,
@@ -350,7 +326,7 @@ const flyToPointPopoverData = reactive({
   maxSpeed: MAX_SPEED,
 })
 
-function onShowFlyToPopover () {
+function onShowFlyToPopover() {
   flyToPointPopoverData.visible = !flyToPointPopoverData.visible
   flyToPointPopoverData.loading = false
   flyToPointPopoverData.latitude = null
@@ -358,7 +334,7 @@ function onShowFlyToPopover () {
   flyToPointPopoverData.height = null
 }
 
-async function onFlyToConfirm (confirm: boolean) {
+async function onFlyToConfirm(confirm: boolean) {
   if (confirm) {
     if (!flyToPointPopoverData.height || !flyToPointPopoverData.latitude || !flyToPointPopoverData.longitude) {
       message.error('Input error')
@@ -381,7 +357,7 @@ async function onFlyToConfirm (confirm: boolean) {
   flyToPointPopoverData.visible = false
 }
 
-async function onStopFlyToPoint () {
+async function onStopFlyToPoint() {
   await stopFlyToPoint(props.sn)
 }
 
@@ -402,7 +378,7 @@ const takeoffToPointPopoverData = reactive({
   commanderFlightHeight: null as null | number,
 })
 
-function onShowTakeoffToPointPopover () {
+function onShowTakeoffToPointPopover() {
   takeoffToPointPopoverData.visible = !takeoffToPointPopoverData.visible
   takeoffToPointPopoverData.loading = false
   takeoffToPointPopoverData.latitude = null
@@ -417,14 +393,14 @@ function onShowTakeoffToPointPopover () {
   takeoffToPointPopoverData.commanderFlightHeight = null
 }
 
-async function onTakeoffToPointConfirm (confirm: boolean) {
+async function onTakeoffToPointConfirm(confirm: boolean) {
   if (confirm) {
     if (!takeoffToPointPopoverData.height ||
-        !takeoffToPointPopoverData.latitude ||
-        !takeoffToPointPopoverData.longitude ||
-        !takeoffToPointPopoverData.securityTakeoffHeight ||
-        !takeoffToPointPopoverData.rthAltitude ||
-        !takeoffToPointPopoverData.commanderFlightHeight) {
+      !takeoffToPointPopoverData.latitude ||
+      !takeoffToPointPopoverData.longitude ||
+      !takeoffToPointPopoverData.securityTakeoffHeight ||
+      !takeoffToPointPopoverData.rthAltitude ||
+      !takeoffToPointPopoverData.commanderFlightHeight) {
       message.error('Input error')
       return
     }
@@ -463,7 +439,7 @@ useMqtt(deviceTopicInfo)
 // })
 const flightController = ref(false)
 
-async function onClickFightControl () {
+async function onClickFightControl() {
   if (flightController.value) {
     exitFlightCOntrol()
     return
@@ -472,7 +448,7 @@ async function onClickFightControl () {
 }
 
 // 进入飞行控制
-async function enterFlightControl () {
+async function enterFlightControl() {
   try {
     const { code, data } = await postDrcEnter({
       client_id: clientId.value,
@@ -497,7 +473,7 @@ async function enterFlightControl () {
 }
 
 // 退出飞行控制
-async function exitFlightCOntrol () {
+async function exitFlightCOntrol() {
   try {
     const { code } = await postDrcExit({
       client_id: clientId.value,
@@ -522,11 +498,11 @@ const {
   resetControlState,
 } = useManualControl(deviceTopicInfo, flightController)
 
-function onMouseDown (type: KeyCode) {
+function onMouseDown(type: KeyCode) {
   handleKeyup(type)
 }
 
-function onMouseUp () {
+function onMouseUp() {
   resetControlState()
 }
 
@@ -611,7 +587,7 @@ const {
   cameraAim,
 } = usePayloadControl()
 
-async function onAuthPayload () {
+async function onAuthPayload() {
   const result = await authPayload(props.sn, payloadSelectInfo.payloadIndex)
   if (result) {
     payloadControlSource.value = ControlSource.A
@@ -624,13 +600,13 @@ const gimbalResetPopoverData = reactive({
   resetMode: null as null | GimbalResetMode,
 })
 
-function onShowGimbalResetPopover () {
+function onShowGimbalResetPopover() {
   gimbalResetPopoverData.visible = !gimbalResetPopoverData.visible
   gimbalResetPopoverData.loading = false
   gimbalResetPopoverData.resetMode = null
 }
 
-async function onGimbalResetConfirm (confirm: boolean) {
+async function onGimbalResetConfirm(confirm: boolean) {
   if (confirm) {
     if (gimbalResetPopoverData.resetMode === null) {
       message.error('Please select reset mode')
@@ -648,7 +624,7 @@ async function onGimbalResetConfirm (confirm: boolean) {
   gimbalResetPopoverData.visible = false
 }
 
-async function onSwitchCameraMode () {
+async function onSwitchCameraMode() {
   if (!checkPayloadAuth(payloadSelectInfo.controlSource)) {
     return
   }
@@ -659,21 +635,21 @@ async function onSwitchCameraMode () {
   })
 }
 
-async function onTakeCameraPhoto () {
+async function onTakeCameraPhoto() {
   if (!checkPayloadAuth(payloadSelectInfo.controlSource)) {
     return
   }
   await takeCameraPhoto(props.sn, payloadSelectInfo.payloadIndex)
 }
 
-async function onStartCameraRecording () {
+async function onStartCameraRecording() {
   if (!checkPayloadAuth(payloadSelectInfo.controlSource)) {
     return
   }
   await startCameraRecording(props.sn, payloadSelectInfo.payloadIndex)
 }
 
-async function onStopCameraRecording () {
+async function onStopCameraRecording() {
   if (!checkPayloadAuth(payloadSelectInfo.controlSource)) {
     return
   }
@@ -687,14 +663,14 @@ const zoomFactorPopoverData = reactive({
   zoomFactor: null as null | number,
 })
 
-function onShowZoomFactorPopover () {
+function onShowZoomFactorPopover() {
   zoomFactorPopoverData.visible = !zoomFactorPopoverData.visible
   zoomFactorPopoverData.loading = false
   zoomFactorPopoverData.cameraType = null
   zoomFactorPopoverData.zoomFactor = null
 }
 
-async function onZoomFactorConfirm (confirm: boolean) {
+async function onZoomFactorConfirm(confirm: boolean) {
   if (confirm) {
     if (!zoomFactorPopoverData.zoomFactor || zoomFactorPopoverData.cameraType === null) {
       message.error('Please input Zoom Factor')
@@ -722,7 +698,7 @@ const cameraAimPopoverData = reactive({
   y: null as null | number,
 })
 
-function onShowCameraAimPopover () {
+function onShowCameraAimPopover() {
   cameraAimPopoverData.visible = !cameraAimPopoverData.visible
   cameraAimPopoverData.loading = false
   cameraAimPopoverData.cameraType = null
@@ -731,15 +707,15 @@ function onShowCameraAimPopover () {
   cameraAimPopoverData.y = null
 }
 
-function openLivestreamOthers () {
+function openLivestreamOthers() {
   store.commit('SET_LIVESTREAM_OTHERS_VISIBLE', true)
 }
 
-function openLivestreamAgora () {
+function openLivestreamAgora() {
   store.commit('SET_LIVESTREAM_AGORA_VISIBLE', true)
 }
 
-async function onCameraAimConfirm (confirm: boolean) {
+async function onCameraAimConfirm(confirm: boolean) {
   if (confirm) {
     if (cameraAimPopoverData.cameraType === null || cameraAimPopoverData.x === null || cameraAimPopoverData.y === null) {
       message.error('Input error')
@@ -772,10 +748,10 @@ watch(() => errorInfo, (errorInfo) => {
 </script>
 
 <style lang='scss' scoped>
-.drone-control-wrapper{
+.drone-control-wrapper {
   // border-bottom: 1px solid #515151;
 
-  .drone-control-header{
+  .drone-control-header {
     font-size: 14px;
     font-weight: 600;
     padding: 10px 10px 0px;
@@ -784,47 +760,43 @@ watch(() => errorInfo, (errorInfo) => {
   .drone-control-box {
     display: flex;
     flex-wrap: 1;
+
     .box {
       width: 50%;
       padding: 5px;
-      border: 0.5px solid rgba(255,255,255,0.3);
+      border: 0.5px solid rgba(255, 255, 255, 0.3);
 
       .row {
         display: flex;
         flex-wrap: wrap;
         padding: 2px;
 
-        + .row{
+        +.row {
           margin-bottom: 6px;
         }
 
-        &::v-deep{
-          .ant-btn{
-            font-size: 12px;
-            padding: 0px 4px;
-            margin-right: 5px;
-          }
+        :deep(.ant-btn) {
+          font-size: 12px;
+          padding: 0px 4px;
+          margin-right: 5px;
         }
       }
 
-      .drone-control{
-         &::v-deep{
+      .drone-control {
+        :deep(.ant-select-single:not(.ant-select-customize-input) .ant-select-selector) {
+          padding: 0 2px;
 
-          .ant-select-single:not(.ant-select-customize-input) .ant-select-selector{
-           padding: 0 2px;
-          }
         }
       }
 
-      .drone-control-direction{
+      .drone-control-direction {
         margin-right: 10px;
 
         .ant-btn {
-          // padding: 0px 1px;
           margin-right: 0;
         }
 
-        .word{
+        .word {
           width: 12px;
           margin-left: 2px;
           font-size: 12px;

Web/src/components/task/TaskPanel.vue

@@ -20,13 +20,13 @@
       <template #status="{ record }">
         <div>
           <div class="flex-display flex-align-center">
-            <span class="circle-icon" :style="{backgroundColor: formatTaskStatus(record).color}"></span>
+            <span class="circle-icon" :style="{ backgroundColor: formatTaskStatus(record).color }"></span>
             {{ formatTaskStatus(record).text }}
-            <a-tooltip v-if="!!record.code" placement="bottom" arrow-point-at-center >
+            <a-tooltip v-if="!!record.code" placement="bottom" arrow-point-at-center>
               <template #title>
-              <div>{{ getCodeMessage(record.code) }}</div>
+                <div>{{ getCodeMessage(record.code) }}</div>
               </template>
-              <exclamation-circle-outlined class="ml5" :style="{color: commonColor.WARN, fontSize: '16px' }"/>
+              <exclamation-circle-outlined class="ml5" :style="{ color: commonColor.WARN, fontSize: '16px' }" />
             </a-tooltip>
           </div>
           <div v-if="record.status === TaskStatus.Carrying">
@@ -42,20 +42,22 @@
       <template #lostAction="{ record }">
         <div>{{ formatLostAction(record) }}</div>
       </template>
-     <!-- 媒体上传状态 -->
+      <!-- 媒体上传状态 -->
       <template #media_upload="{ record }">
         <div>
           <div class="flex-display flex-align-center">
-            <span class="circle-icon" :style="{backgroundColor: formatMediaTaskStatus(record).color}"></span>
+            <span class="circle-icon" :style="{ backgroundColor: formatMediaTaskStatus(record).color }"></span>
             {{ formatMediaTaskStatus(record).text }}
           </div>
           <div class="pl15">
             {{ formatMediaTaskStatus(record).number }}
-            <a-tooltip v-if="formatMediaTaskStatus(record).status === MediaStatus.ToUpload" placement="bottom" arrow-point-at-center >
+            <a-tooltip v-if="formatMediaTaskStatus(record).status === MediaStatus.ToUpload" placement="bottom"
+              arrow-point-at-center>
               <template #title>
-              <div>Upload now</div>
+                <div>Upload now</div>
               </template>
-              <UploadOutlined class="ml5" :style="{color: commonColor.BLUE, fontSize: '16px' }"  @click="onUploadMediaFileNow(record.job_id)"/>
+              <UploadOutlined class="ml5" :style="{ color: commonColor.BLUE, fontSize: '16px' }"
+                @click="onUploadMediaFileNow(record.job_id)" />
             </a-tooltip>
           </div>
         </div>
@@ -63,31 +65,16 @@
       <!-- 操作 -->
       <template #action="{ record }">
         <div class="action-area">
-          <a-popconfirm
-            v-if="record.status === TaskStatus.Wait"
-            title="Are you sure you want to delete flight task?"
-            ok-text="Yes"
-            cancel-text="No"
-            @confirm="onDeleteTask(record.job_id)"
-          >
+          <a-popconfirm v-if="record.status === TaskStatus.Wait" title="Are you sure you want to delete flight task?"
+            ok-text="Yes" cancel-text="No" @confirm="onDeleteTask(record.job_id)">
             <a-button type="primary" size="small">Delete</a-button>
           </a-popconfirm>
-          <a-popconfirm
-            v-if="record.status === TaskStatus.Carrying"
-            title="Are you sure you want to suspend?"
-            ok-text="Yes"
-            cancel-text="No"
-            @confirm="onSuspendTask(record.job_id)"
-          >
+          <a-popconfirm v-if="record.status === TaskStatus.Carrying" title="Are you sure you want to suspend?"
+            ok-text="Yes" cancel-text="No" @confirm="onSuspendTask(record.job_id)">
             <a-button type="primary" size="small">Suspend</a-button>
           </a-popconfirm>
-          <a-popconfirm
-            v-if="record.status === TaskStatus.Paused"
-            title="Are you sure you want to resume?"
-            ok-text="Yes"
-            cancel-text="No"
-            @confirm="onResumeTask(record.job_id)"
-          >
+          <a-popconfirm v-if="record.status === TaskStatus.Paused" title="Are you sure you want to resume?"
+            ok-text="Yes" cancel-text="No" @confirm="onResumeTask(record.job_id)">
             <a-button type="primary" size="small">Resume</a-button>
           </a-popconfirm>
         </div>
@@ -201,7 +188,7 @@ const plansData = reactive({
 const { formatTaskType, formatTaskTime, formatLostAction, formatTaskStatus, formatMediaTaskStatus } = useFormatTask()
 
 // 设备任务执行进度更新
-function onTaskProgressWs (data: TaskProgressInfo) {
+function onTaskProgressWs(data: TaskProgressInfo) {
   const { bid, output } = data
   if (output) {
     const { status, progress } = output || {}
@@ -220,7 +207,7 @@ function onTaskProgressWs (data: TaskProgressInfo) {
 }
 
 // 媒体上传进度更新
-function onTaskMediaProgressWs (data: MediaStatusProgressInfo) {
+function onTaskMediaProgressWs(data: MediaStatusProgressInfo) {
   const { media_count: mediaCount, uploaded_count: uploadedCount, job_id: jobId } = data
   if (isNaN(mediaCount) || isNaN(uploadedCount) || !jobId) {
     return
@@ -236,7 +223,7 @@ function onTaskMediaProgressWs (data: MediaStatusProgressInfo) {
   taskItem.uploaded_count = uploadedCount
 }
 
-function onoTaskMediaHighestPriorityWS (data: TaskMediaHighestPriorityProgressInfo) {
+function onoTaskMediaHighestPriorityWS(data: TaskMediaHighestPriorityProgressInfo) {
   const { pre_job_id: preJobId, job_id: jobId } = data
   const preTaskItem = plansData.data.find(task => task.job_id === preJobId)
   const taskItem = plansData.data.find(task => task.job_id === jobId)
@@ -248,7 +235,7 @@ function onoTaskMediaHighestPriorityWS (data: TaskMediaHighestPriorityProgressIn
   }
 }
 
-function getCodeMessage (code: number) {
+function getCodeMessage(code: number) {
   return getErrorMessage(code) + `（code: ${code}）`
 }
 
@@ -262,7 +249,7 @@ onMounted(() => {
   getPlans()
 })
 
-function getPlans () {
+function getPlans() {
   getWaylineJobs(workspaceId, body).then(res => {
     if (res.code !== 0) {
       return
@@ -273,14 +260,14 @@ function getPlans () {
   })
 }
 
-function refreshData (page: Pagination) {
+function refreshData(page: Pagination) {
   body.page = page?.current!
   body.page_size = page?.pageSize!
   getPlans()
 }
 
 // 删除任务
-async function onDeleteTask (jobId: string) {
+async function onDeleteTask(jobId: string) {
   const { code } = await deleteTask(workspaceId, {
     job_id: jobId
   })
@@ -291,7 +278,7 @@ async function onDeleteTask (jobId: string) {
 }
 
 // 挂起任务
-async function onSuspendTask (jobId: string) {
+async function onSuspendTask(jobId: string) {
   const { code } = await updateTaskStatus(workspaceId, {
     job_id: jobId,
     status: UpdateTaskStatus.Suspend
@@ -303,7 +290,7 @@ async function onSuspendTask (jobId: string) {
 }
 
 // 解除挂起任务
-async function onResumeTask (jobId: string) {
+async function onResumeTask(jobId: string) {
   const { code } = await updateTaskStatus(workspaceId, {
     job_id: jobId,
     status: UpdateTaskStatus.Resume
@@ -315,7 +302,7 @@ async function onResumeTask (jobId: string) {
 }
 
 // 立即上传媒体
-async function onUploadMediaFileNow (jobId: string) {
+async function onUploadMediaFileNow(jobId: string) {
   const { code } = await uploadMediaFileNow(workspaceId, jobId)
   if (code === 0) {
     message.success('Upload Media File successfully')
@@ -328,17 +315,16 @@ async function onUploadMediaFileNow (jobId: string) {
 .plan-panel-wrapper {
   width: 100%;
   padding: 16px;
+
   .plan-table {
     background: #fff;
     margin-top: 10px;
   }
-  .action-area {
 
-    &::v-deep {
-      .ant-btn {
-        margin-right: 10px;
-        margin-bottom: 10px;
-      }
+  .action-area {
+    :deep(.ant-btn) {
+      margin-right: 10px;
+      margin-bottom: 10px;
     }
   }
 
@@ -352,6 +338,7 @@ async function onUploadMediaFileNow (jobId: string) {
     flex-shrink: 0;
   }
 }
+
 .header {
   width: 100%;
   height: 60px;