setup语法糖去掉宏函数

Web/src/components/LayersTree.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineProps, PropType } from 'vue'
+import { computed, PropType } from 'vue'
 import Icon from '@ant-design/icons-vue';
 import { FolderOutlined, LineOutlined, GatewayOutlined } from '@ant-design/icons-vue';
 import noData from '/@/assets/icons/no-data.png'

Web/src/components/devices/DeviceFirmwareStatus.vue

@@ -13,7 +13,6 @@
 </template>
 
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 import { changeFirmareStatus } from '/@/api/manage'
 import { Firmware, FirmwareStatusEnum } from '/@/types/device-firmware'
 import { commonColor } from '/@/utils/color'

Web/src/components/devices/device-hms/DeviceHmsDrawer.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, defineProps, defineEmits, watch } from 'vue'
+import { reactive, ref, watch } from 'vue'
 import Search from './components/Search.vue'
 import { Device, DeviceHms } from '/@/types/device'
 import { apis } from '/@/api/custom'

Web/src/components/devices/device-log/DeviceLogDetailModal.vue

@@ -1,45 +1,36 @@
 <template>
-  <a-modal
-    title="日志上传详情"
-    v-model:visible="sVisible"
-    width="900px"
-    :footer="null"
-    @update:visible="onVisibleChange">
+  <a-modal title="日志上传详情" v-model:visible="sVisible" width="900px" :footer="null" @update:visible="onVisibleChange">
     <div class="device-log-detail-wrap">
       <div class="device-log-list">
         <div class="log-list-item">
-          <a-button type="primary" class="download-btn" :disabled="!airportTableLogState.logList?.file_id || !airportTableLogState.logList?.object_key"  size="small" @click="onDownloadLog(airportTableLogState.logList.file_id)">
-             下载机场日志
+          <a-button type="primary" class="download-btn"
+            :disabled="!airportTableLogState.logList?.file_id || !airportTableLogState.logList?.object_key" size="small"
+            @click="onDownloadLog(airportTableLogState.logList.file_id)">
+            下载机场日志
           </a-button>
-          <a-table  :columns="airportLogColumns"
-                    :scroll="{ x: '100%', y: 600 }"
-                    :data-source="airportTableLogState.logList?.list"
-                    rowKey="boot_index"
-                    :pagination = "false"
-                    >
-            <template #log_time="{record}">
-              <div>{{getLogTime(record)}}</div>
+          <a-table :columns="airportLogColumns" :scroll="{ x: '100%', y: 600 }"
+            :data-source="airportTableLogState.logList?.list" rowKey="boot_index" :pagination="false">
+            <template #log_time="{ record }">
+              <div>{{ getLogTime(record) }}</div>
             </template>
-            <template #size="{record}">
-              <div>{{getLogSize(record.size)}}</div>
+            <template #size="{ record }">
+              <div>{{ getLogSize(record.size) }}</div>
             </template>
           </a-table>
         </div>
         <div class="log-list-item">
-          <a-button type="primary"  class="download-btn" :disabled="!droneTableLogState.logList?.file_id || !droneTableLogState.logList?.object_key" size="small" @click="onDownloadLog(droneTableLogState.logList.file_id)">
-             下载飞行器日志
+          <a-button type="primary" class="download-btn"
+            :disabled="!droneTableLogState.logList?.file_id || !droneTableLogState.logList?.object_key" size="small"
+            @click="onDownloadLog(droneTableLogState.logList.file_id)">
+            下载飞行器日志
           </a-button>
-          <a-table  :columns="droneLogColumns"
-                    :scroll="{ x: '100%', y: 600 }"
-                    :data-source="droneTableLogState.logList?.list"
-                    rowKey="boot_index"
-                    :pagination = "false"
-          >
-            <template #log_time="{record}">
-              <div>{{getLogTime(record)}}</div>
+          <a-table :columns="droneLogColumns" :scroll="{ x: '100%', y: 600 }"
+            :data-source="droneTableLogState.logList?.list" rowKey="boot_index" :pagination="false">
+            <template #log_time="{ record }">
+              <div>{{ getLogTime(record) }}</div>
             </template>
-            <template #size="{record}">
-              <div>{{getLogSize(record.size)}}</div>
+            <template #size="{ record }">
+              <div>{{ getLogSize(record.size) }}</div>
             </template>
           </a-table>
         </div>
@@ -49,9 +40,8 @@
 </template>
 
 <script lang="ts" setup>
-import { watchEffect, reactive, ref, defineProps, defineEmits } from 'vue'
-import { ColumnProps, TableState } from 'ant-design-vue/lib/table/interface'
-import { IPage } from '/@/api/http/type'
+import { watchEffect, reactive, ref } from 'vue'
+import { ColumnProps } from 'ant-design-vue/lib/table/interface'
 import { DOMAIN } from '/@/types/device'
 import { DeviceLogFileInfo, GetDeviceUploadLogListRsp, getUploadDeviceLogUrl } from '/@/api/device-log'
 import { useDeviceLogUploadDetail } from './use-device-log-upload-detail'
@@ -72,11 +62,11 @@ watchEffect(() => {
   }
 })
 
-function onVisibleChange (sVisible: boolean) {
+function onVisibleChange(sVisible: boolean) {
   setVisible(sVisible)
 }
 
-function setVisible (v: boolean, e?: Event) {
+function setVisible(v: boolean, e?: Event) {
   sVisible.value = v
   emit('update:visible', v, e)
 }
@@ -100,7 +90,7 @@ const droneTableLogState = reactive({
   logList: {} as DeviceLogFileInfo,
 })
 
-function classifyDeviceLog () {
+function classifyDeviceLog() {
   if (!props.deviceLog) return
   const { device_logs } = props.deviceLog
   const { files } = device_logs || {}
@@ -117,34 +107,34 @@ function classifyDeviceLog () {
 
 const { getLogTime, getLogSize } = useDeviceLogUploadDetail()
 
-async function onDownloadLog (fileId: string) {
+async function onDownloadLog(fileId: string) {
   const { data } = await getUploadDeviceLogUrl({
     file_id: fileId,
     logs_id: props.deviceLog?.logs_id || ''
   })
   if (data) {
     download(data)
-  // download('https:/github.com/dji-sdk/Mobile-SDK-Android-V5/archive/refs/heads/dev-sdk-main.zip')
+    // download('https:/github.com/dji-sdk/Mobile-SDK-Android-V5/archive/refs/heads/dev-sdk-main.zip')
   }
 }
 
 </script>
 
 <style lang="scss" scoped>
-.device-log-detail-wrap{
+.device-log-detail-wrap {
 
-  .device-log-list{
+  .device-log-list {
     display: flex;
     justify-content: space-between;
     padding: 8px 0;
-    .log-list-item{
+
+    .log-list-item {
       width: 420px;
 
-      .download-btn{
+      .download-btn {
         margin-bottom: 10px;
       }
     }
   }
 }
-</style>
->
+</style>

Web/src/components/devices/device-log/DeviceLogUploadModal.vue

@@ -1,44 +1,31 @@
 <template>
-  <a-modal
-    title="设备日志上传"
-    v-model:visible="sVisible"
-    width="900px"
-    :footer="null"
-    @update:visible="onVisibleChange">
+  <a-modal title="设备日志上传" v-model:visible="sVisible" width="900px" :footer="null" @update:visible="onVisibleChange">
     <div class="device-log-upload-wrap">
       <div class="page-action-row">
         <a-button type="primary" :disabled="deviceLogUploadBtnDisabled" @click="uploadDeviceLog">上传日志</a-button>
       </div>
       <div class="device-log-list">
         <div class="log-list-item">
-          <a-table  :columns="airportLogColumns"
-                    :scroll="{ x: '100%', y: 600 }"
-                    :data-source="airportTableLogState.logList?.list"
-                    :loading="airportTableLogState.tableLoading"
-                    :row-selection="airportTableLogState.rowSelection"
-                    rowKey="boot_index"
-                    :pagination = "false">
-            <template #log_time="{record}">
-              <div>{{getLogTime(record)}}</div>
+          <a-table :columns="airportLogColumns" :scroll="{ x: '100%', y: 600 }"
+            :data-source="airportTableLogState.logList?.list" :loading="airportTableLogState.tableLoading"
+            :row-selection="airportTableLogState.rowSelection" rowKey="boot_index" :pagination="false">
+            <template #log_time="{ record }">
+              <div>{{ getLogTime(record) }}</div>
             </template>
-            <template #size="{record}">
-              <div>{{getLogSize(record.size)}}</div>
+            <template #size="{ record }">
+              <div>{{ getLogSize(record.size) }}</div>
             </template>
           </a-table>
         </div>
         <div class="log-list-item">
-          <a-table  :columns="droneLogColumns"
-                    :scroll="{ x: '100%', y: 600 }"
-                    :data-source="droneTableLogState.logList?.list"
-                    :loading="droneTableLogState.tableLoading"
-                    :row-selection="droneTableLogState.rowSelection"
-                    rowKey="boot_index"
-                    :pagination = "false">
-            <template #log_time="{record}">
-              <div>{{getLogTime(record)}}</div>
+          <a-table :columns="droneLogColumns" :scroll="{ x: '100%', y: 600 }"
+            :data-source="droneTableLogState.logList?.list" :loading="droneTableLogState.tableLoading"
+            :row-selection="droneTableLogState.rowSelection" rowKey="boot_index" :pagination="false">
+            <template #log_time="{ record }">
+              <div>{{ getLogTime(record) }}</div>
             </template>
-            <template #size="{record}">
-              <div>{{getLogSize(record.size)}}</div>
+            <template #size="{ record }">
+              <div>{{ getLogSize(record.size) }}</div>
             </template>
           </a-table>
         </div>
@@ -48,11 +35,10 @@
 </template>
 
 <script lang="ts" setup>
-import { watchEffect, reactive, ref, computed, defineProps, defineEmits } from 'vue'
-import { ColumnProps, TableState } from 'ant-design-vue/lib/table/interface'
-import { IPage } from '/@/api/http/type'
+import { watchEffect, reactive, ref, computed } from 'vue'
+import { ColumnProps } from 'ant-design-vue/lib/table/interface'
 import { Device, DOMAIN } from '/@/types/device'
-import { getDeviceLogList, postDeviceUpgrade, DeviceLogFileInfo, UploadDeviceLogBody, DeviceLogItem } from '/@/api/device-log'
+import { getDeviceLogList, postDeviceUpgrade, DeviceLogFileInfo, UploadDeviceLogBody } from '/@/api/device-log'
 import { message } from 'ant-design-vue'
 import { useDeviceLogUploadDetail } from './use-device-log-upload-detail'
 
@@ -72,14 +58,14 @@ watchEffect(() => {
   }
 })
 
-function onVisibleChange (sVisible: boolean) {
+function onVisibleChange(sVisible: boolean) {
   setVisible(sVisible)
   if (!sVisible) {
     resetTableLogState()
   }
 }
 
-function setVisible (v: boolean, e?: Event) {
+function setVisible(v: boolean, e?: Event) {
   sVisible.value = v
   emit('update:visible', v, e)
 }
@@ -102,7 +88,7 @@ const airportTableLogState = reactive({
   rowSelection: {
     columnWidth: 15,
     selectedRowKeys: [] as number[],
-    onChange: (selectedRowKeys:number[], selectedRows: []) => {
+    onChange: (selectedRowKeys: number[], selectedRows: []) => {
       airportTableLogState.rowSelection.selectedRowKeys = selectedRowKeys
       airportTableLogState.selectRow = selectedRows
       console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
@@ -110,7 +96,7 @@ const airportTableLogState = reactive({
   }
 })
 
-function resetTableLogState () {
+function resetTableLogState() {
   airportTableLogState.logList = {} as DeviceLogFileInfo
   airportTableLogState.selectRow = []
   airportTableLogState.tableLoading = false
@@ -133,11 +119,11 @@ const droneTableLogState = reactive({
 
 const deviceLogUploadBtnDisabled = computed(() => {
   return (airportTableLogState.rowSelection.selectedRowKeys && airportTableLogState.rowSelection.selectedRowKeys.length <= 0) &&
-  (droneTableLogState.rowSelection.selectedRowKeys && droneTableLogState.rowSelection.selectedRowKeys.length <= 0)
+    (droneTableLogState.rowSelection.selectedRowKeys && droneTableLogState.rowSelection.selectedRowKeys.length <= 0)
 })
 
 // 获取设备内日志
-async function getDeviceLogInfo () {
+async function getDeviceLogInfo() {
   airportTableLogState.tableLoading = true
   droneTableLogState.tableLoading = true
   try {
@@ -164,7 +150,7 @@ async function getDeviceLogInfo () {
 }
 
 // 日志上传
-async function uploadDeviceLog () {
+async function uploadDeviceLog() {
   const body = {
     device_sn: props.device?.device_sn || '',
     files: [] as any
@@ -196,15 +182,16 @@ const { getLogTime, getLogSize } = useDeviceLogUploadDetail()
 </script>
 
 <style lang="scss" scoped>
-.device-log-upload-wrap{
+.device-log-upload-wrap {
 
-  .device-log-list{
+  .device-log-list {
     display: flex;
     justify-content: space-between;
     padding: 8px 0;
-    .log-list-item{
+
+    .log-list-item {
       width: 420px;
     }
   }
 }
-</style>
+</style>

Web/src/components/devices/device-log/DeviceLogUploadRecordDrawer.vue

@@ -71,9 +71,8 @@
 </template>
 
 <script lang="ts" setup>
-import { watchEffect, reactive, ref, defineProps, defineEmits } from 'vue'
+import { watchEffect, reactive, ref } from 'vue'
 import { ColumnProps, TableState } from 'ant-design-vue/lib/table/interface'
-import { IPage } from '/@/api/http/type'
 import { Device, DOMAIN, DEVICE_NAME } from '/@/types/device'
 import DeviceLogUploadModal from './DeviceLogUploadModal.vue'
 import DeviceLogDetailModal from './DeviceLogDetailModal.vue'

Web/src/components/devices/device-upgrade/DeviceFirmwareUpgrade.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineProps, defineEmits, computed } from 'vue'
+import { computed } from 'vue'
 import { Device, DeviceFirmwareStatusEnum, DeviceFirmwareStatus, DeviceFirmwareStatusColor } from '/@/types/device'
 
 const props = defineProps<{

Web/src/components/devices/device-upgrade/DeviceFirmwareUpgradeModal.vue

@@ -1,20 +1,15 @@
 <template>
-<a-modal :visible="sVisible"
-         :title="title"
-         :closable="false"
-         centered
-         @update:visible="onVisibleChange"
-         @cancel="onCancel"
-         @ok="onConfirm">
-         <div>
-          升级固件版本: {{ deviceUpgradeInfo?.product_version }}
-         </div>
-</a-modal>
+  <a-modal :visible="sVisible" :title="title" :closable="false" centered @update:visible="onVisibleChange"
+    @cancel="onCancel" @ok="onConfirm">
+    <div>
+      升级固件版本: {{ deviceUpgradeInfo?.product_version }}
+    </div>
+  </a-modal>
 </template>
 
 <script lang="ts" setup>
-import { defineProps, defineEmits, ref, Ref, watchEffect } from 'vue'
-import { Device, DeviceFirmwareStatusEnum, DeviceFirmwareStatus, DeviceFirmwareTypeEnum } from '/@/types/device'
+import { ref, Ref, watchEffect } from 'vue'
+import { Device, DeviceFirmwareStatusEnum, DeviceFirmwareTypeEnum } from '/@/types/device'
 import { getDeviceUpgradeInfo, GetDeviceUpgradeInfoRsp, DeviceUpgradeBody } from '/@/api/device-upgrade'
 
 const props = defineProps<{
@@ -25,7 +20,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:visible', 'ok', 'cancel'])
 
-const deviceUpgradeInfo:Ref<GetDeviceUpgradeInfoRsp> = ref({} as GetDeviceUpgradeInfoRsp)
+const deviceUpgradeInfo: Ref<GetDeviceUpgradeInfoRsp> = ref({} as GetDeviceUpgradeInfoRsp)
 const sVisible = ref(false)
 
 watchEffect(() => {
@@ -36,17 +31,17 @@ watchEffect(() => {
   }
 })
 
-function onVisibleChange (sVisible: boolean) {
+function onVisibleChange(sVisible: boolean) {
   setVisible(sVisible)
 }
 
-function setVisible (v: boolean, e?: Event) {
+function setVisible(v: boolean, e?: Event) {
   sVisible.value = v
   emit('update:visible', v, e)
 }
 
 // 获取设备升级信息
-async function initDeviceUpgradeInfo () {
+async function initDeviceUpgradeInfo() {
   if (!props.device?.device_name) {
     return
   }
@@ -57,7 +52,7 @@ async function initDeviceUpgradeInfo () {
 }
 
 // 提交
-function checkConfirm () {
+function checkConfirm() {
   if (!deviceUpgradeInfo.value.product_version) {
     return false
   }
@@ -70,7 +65,7 @@ function checkConfirm () {
   return true
 }
 
-function onConfirm (e: Event) {
+function onConfirm(e: Event) {
   if (!checkConfirm()) {
     return
   }
@@ -83,11 +78,10 @@ function onConfirm (e: Event) {
   }] as DeviceUpgradeBody, e)
 }
 
-function onCancel (e: Event) {
+function onCancel(e: Event) {
   setVisible(false, e)
   emit('cancel', e)
 }
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

Web/src/components/flight-area/FlightAreaActionIcon.vue

@@ -1,26 +1,27 @@
 <template>
   <div @click="selectCurrent">
     <a-dropdown class="height-100 width-100 icon-panel">
-        <FlightAreaIcon :type="actionMap[selectedKey].type" :is-circle="actionMap[selectedKey].isCircle" :hide-title="true"/>
-        <template #overlay>
-          <a-menu @click="selectAction" mode="vertical-right" :selectedKeys="[selectedKey]">
-            <a-menu-item v-for="(v, k) in actionMap" :key="k">
-              <FlightAreaIcon :type="v.type" :is-circle="v.isCircle"/>
-            </a-menu-item>
-          </a-menu>
-        </template>
-      </a-dropdown>
+      <FlightAreaIcon :type="actionMap[selectedKey].type" :is-circle="actionMap[selectedKey].isCircle"
+        :hide-title="true" />
+      <template #overlay>
+        <a-menu @click="selectAction" mode="vertical-right" :selectedKeys="[selectedKey]">
+          <a-menu-item v-for="(v, k) in actionMap" :key="k">
+            <FlightAreaIcon :type="v.type" :is-circle="v.isCircle" />
+          </a-menu-item>
+        </a-menu>
+      </template>
+    </a-dropdown>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, defineEmits } from 'vue'
+import { ref } from 'vue'
 import { EFlightAreaType } from '../../types/flight-area'
 import FlightAreaIcon from './FlightAreaIcon.vue'
 
 const emit = defineEmits(['select-action', 'click'])
 
-const actionMap: Record<string, { type: EFlightAreaType, isCircle: boolean}> = {
+const actionMap: Record<string, { type: EFlightAreaType, isCircle: boolean }> = {
   1: {
     type: EFlightAreaType.DFENCE,
     isCircle: true,
@@ -51,9 +52,9 @@ const selectCurrent = () => {
 </script>
 
 <style lang="scss">
-  .icon-panel {
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-  }
+.icon-panel {
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
 </style>

Web/src/components/flight-area/FlightAreaDevicePanel.vue

@@ -75,7 +75,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineEmits, onMounted, ref, defineProps, computed } from 'vue'
+import { onMounted, ref, computed } from 'vue'
 import { message } from 'ant-design-vue'
 import { CloseOutlined, RobotFilled, CheckOutlined, ApiOutlined, CheckCircleTwoTone, SyncOutlined, ExclamationCircleTwoTone } from '@ant-design/icons-vue'
 import Title from '/@/components/workspace/Title.vue'

Web/src/components/flight-area/FlightAreaIcon.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="flex-row flex-align-center">
     <div class="shape" :class="type" :style="isCircle ? 'border-radius: 50%;' : ''"></div>
-    <div class="ml5" v-if="!hideTitle">{{ FlightAreaTypeTitleMap[type][isCircle ? EGeometryType.CIRCLE : EGeometryType.POLYGON] }}</div>
+    <div class="ml5" v-if="!hideTitle">{{ FlightAreaTypeTitleMap[type][isCircle ? EGeometryType.CIRCLE :
+      EGeometryType.POLYGON] }}</div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 import { EFlightAreaType, EGeometryType, FlightAreaTypeTitleMap } from '../../types/flight-area'
 
 const props = defineProps<{
@@ -14,20 +14,21 @@ const props = defineProps<{
   isCircle: boolean,
   hideTitle?: boolean
 }>()
-
 </script>
 
 <style lang="scss">
-  .nfz {
-    border-color: red;
-  }
-  .dfence {
-    border-color: $tag-green;
-  }
-  .shape {
-    width: 16px;
-    height: 16px;
-    border-width: 3px;
-    border-style: solid;
-  }
-</style>
+.nfz {
+  border-color: red;
+}
+
+.dfence {
+  border-color: $tag-green;
+}
+
+.shape {
+  width: 16px;
+  height: 16px;
+  border-width: 3px;
+  border-style: solid;
+}
+</style>

Web/src/components/flight-area/FlightAreaItem.vue

@@ -1,24 +1,28 @@
 <template>
-  <div class="panel" style="padding-top: 5px;" :class="{disable: !flightArea.status}">
+  <div class="panel" style="padding-top: 5px;" :class="{ disable: !flightArea.status }">
     <div class="title">
       <a-tooltip :title="flightArea.name">
-        <div class="pr10" style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{ flightArea.name }}</div>
+        <div class="pr10" style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{ flightArea.name }}
+        </div>
       </a-tooltip>
     </div>
     <div class="mt5 ml10" style="color: hsla(0,0%,100%,0.35);">
       <span class="mr10">Update at {{ formatDateTime(flightArea.update_time).toLocaleString() }}</span>
     </div>
     <div class="flex-row flex-justify-between flex-align-center ml10 mt5" style="color: hsla(0,0%,100%,0.65);">
-      <FlightAreaIcon :type="flightArea.type" :isCircle="EGeometryType.CIRCLE === flightArea.content.geometry.type"/>
+      <FlightAreaIcon :type="flightArea.type" :isCircle="EGeometryType.CIRCLE === flightArea.content.geometry.type" />
       <div class="mr10 operate">
-        <a-popconfirm v-if="flightArea.status" title="Is it determined to disable the current area?" okText="Disable" @confirm="changeAreaStatus(false)">
+        <a-popconfirm v-if="flightArea.status" title="Is it determined to disable the current area?" okText="Disable"
+          @confirm="changeAreaStatus(false)">
           <stop-outlined />
         </a-popconfirm>
-        <a-popconfirm v-else @confirm="changeAreaStatus(true)" title="Is it determined to enable the current area?" okText="Enable" >
+        <a-popconfirm v-else @confirm="changeAreaStatus(true)" title="Is it determined to enable the current area?"
+          okText="Enable">
           <check-circle-outlined />
         </a-popconfirm>
-        <EnvironmentFilled class="ml10" @click="clickLocation"/>
-        <a-popconfirm title="Is it determined to delete the current area?" okText="Delete" okType="danger" @confirm="deleteArea">
+        <EnvironmentFilled class="ml10" @click="clickLocation" />
+        <a-popconfirm title="Is it determined to delete the current area?" okText="Delete" okType="danger"
+          @confirm="deleteArea">
           <delete-outlined class="ml10" />
         </a-popconfirm>
       </div>
@@ -27,7 +31,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineProps, reactive, defineEmits, computed } from 'vue'
+import { computed } from 'vue'
 import { GetFlightArea, changeFlightAreaStatus } from '../../api/flight-area'
 import FlightAreaIcon from './FlightAreaIcon.vue'
 import { formatDateTime } from '../../utils/time'
@@ -37,9 +41,11 @@ import { StopOutlined, CheckCircleOutlined, DeleteOutlined, EnvironmentFilled }
 const props = defineProps<{
   data: GetFlightArea
 }>()
+
 const emit = defineEmits(['delete', 'update', 'location'])
 
 const flightArea = computed(() => props.data)
+
 const changeAreaStatus = (status: boolean) => {
   changeFlightAreaStatus(props.data.area_id, status).then(res => {
     if (res.code === 0) {
@@ -48,13 +54,14 @@ const changeAreaStatus = (status: boolean) => {
     }
   })
 }
+
 const deleteArea = () => {
   emit('delete', flightArea.value.area_id)
 }
+
 const clickLocation = () => {
   emit('location', flightArea.value.area_id)
 }
-
 </script>
 
 <style lang="scss" scoped>
@@ -77,7 +84,8 @@ const clickLocation = () => {
     font-weight: bold;
     margin: 0px 10px 0 10px;
   }
-  .operate > *{
+
+  .operate>* {
     font-size: 16px;
   }
 }
@@ -85,5 +93,4 @@ const clickLocation = () => {
 .disable {
   opacity: 50%;
 }
-
 </style>

Web/src/components/flight-area/FlightAreaPanel.vue

@@ -4,13 +4,13 @@
       <a-empty :image-style="{ height: '60px', marginTop: '60px' }" />
     </div>
     <div v-else v-for="area in flightAreaList" :key="area.area_id">
-      <FlightAreaItem :data="area" @delete="deleteArea" @update="updateArea" @location="clickLocation(area)"/>
+      <FlightAreaItem :data="area" @delete="deleteArea" @update="updateArea" @location="clickLocation(area)" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { defineProps, defineEmits, ref, computed } from 'vue'
+import { computed } from 'vue'
 import FlightAreaItem from './FlightAreaItem.vue'
 import { GetFlightArea } from '/@/api/flight-area'
 
@@ -36,8 +36,8 @@ const clickLocation = (area: GetFlightArea) => {
 </script>
 
 <style lang="scss" scoped>
-  .flight-area-panel {
-    overflow-y: auto;
-    height: calc(100vh - 150px);
-  }
-</style>
+.flight-area-panel {
+  overflow-y: auto;
+  height: calc(100vh - 150px);
+}
+</style>

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

@@ -152,8 +152,8 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { defineProps, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
 import { DeviceInfoType } from '/@/types/device'
 import { useMyStore } from '/@/store'
 import { cloneDeep } from 'lodash'

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

@@ -1,25 +1,15 @@
 <template>
-  <a-popover :visible="state.sVisible"
-             trigger="click"
-             v-bind="$attrs"
-             :overlay-class-name="overlayClassName"
-             placement="bottom"
-             @visibleChange=";"
-             v-on="$attrs">
+  <a-popover :visible="state.sVisible" trigger="click" v-bind="$attrs" :overlay-class-name="overlayClassName"
+    placement="bottom" @visibleChange=";" v-on="$attrs">
     <template #content>
       <div class="title-content">
       </div>
-      <slot name="formContent" />
+      <slot name="formContent"></slot>
       <div class="uranus-popconfirm-btns">
-        <a-button size="sm"
-           @click="onCancel">
-           {{ cancelText || '取消'}}
+        <a-button size="sm" @click="onCancel">
+          {{ cancelText || '取消' }}
         </a-button>
-        <a-button size="sm"
-          :loading="loading"
-          type="primary"
-          class="confirm-btn"
-          @click="onConfirm">
+        <a-button size="sm" :loading="loading" type="primary" class="confirm-btn" @click="onConfirm">
           {{ okText || '确定' }}
         </a-button>
       </div>
@@ -31,16 +21,16 @@
 </template>
 
 <script lang="ts" setup>
-import { defineProps, defineEmits, reactive, watch, computed } from 'vue'
+import { reactive, watch, computed } from 'vue'
 
 const props = defineProps<{
-    visible?: boolean,
-    loading?: Boolean,
-    disabled?: Boolean,
-    title?: String,
-    okText?: String,
-    cancelText?: String,
-    width?: Number,
+  visible?: boolean,
+  loading?: Boolean,
+  disabled?: Boolean,
+  title?: String,
+  okText?: String,
+  cancelText?: String,
+  width?: Number,
 }>()
 
 const emit = defineEmits(['cancel', 'confirm'])
@@ -66,14 +56,14 @@ const overlayClassName = computed(() => {
   return classList.join(' ')
 })
 
-function onConfirm (e: Event) {
+function onConfirm(e: Event) {
   if (props.disabled) {
     return
   }
   emit('confirm', e)
 }
 
-function onCancel (e: Event) {
+function onCancel(e: Event) {
   state.sVisible = false
   emit('cancel', e)
 }
@@ -84,21 +74,21 @@ function onCancel (e: Event) {
 .device-setting-popconfirm {
   min-width: 300px;
 
-  .uranus-popconfirm-btns{
+  .uranus-popconfirm-btns {
     display: flex;
     padding: 10px 0px;
     justify-content: flex-end;
 
-    .confirm-btn{
+    .confirm-btn {
       margin-left: 10px;
     }
   }
 
-  .form-content{
+  .form-content {
     display: inline-flex;
     align-items: center;
 
-    .form-label{
+    .form-label {
       padding-right: 10px;
     }
   }

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

@@ -41,8 +41,8 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { defineProps, defineEmits, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
 import { CloseOutlined } from '@ant-design/icons-vue'
 import { useDockControl } from './use-dock-control'
 import { DeviceInfoType, EDockModeCode } from '/@/types/device'

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

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, defineProps, watch } from 'vue'
+import { ref, watch } from 'vue'
 
 const props = defineProps<{
   message?: string,

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

@@ -278,7 +278,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, reactive, ref, watch, computed, onMounted, watchEffect } from 'vue'
+import { reactive, ref, watch, computed, onMounted, watchEffect } from 'vue'
 import { Select, message, Button } from 'ant-design-vue'
 import { PayloadInfo, DeviceInfoType, ControlSource, DeviceOsdCamera, DrcStateEnum } from '/@/types/device'
 import { useMyStore } from '/@/store'

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

@@ -1,25 +1,15 @@
 <template>
-  <a-popover :visible="state.sVisible"
-             trigger="click"
-             v-bind="$attrs"
-             :overlay-class-name="overlayClassName"
-             placement="bottom"
-             @visibleChange=";"
-             v-on="$attrs">
+  <a-popover :visible="state.sVisible" trigger="click" v-bind="$attrs" :overlay-class-name="overlayClassName"
+    placement="bottom" @visibleChange=";" v-on="$attrs">
     <template #content>
       <div class="title-content">
       </div>
-      <slot name="formContent" />
+      <slot name="formContent"></slot>
       <div class="uranus-popconfirm-btns">
-        <a-button size="sm"
-           @click="onCancel">
-           {{ cancelText || 'cancel'}}
+        <a-button size="sm" @click="onCancel">
+          {{ cancelText || 'cancel' }}
         </a-button>
-        <a-button size="sm"
-          :loading="loading"
-          type="primary"
-          class="confirm-btn"
-          @click="onConfirm">
+        <a-button size="sm" :loading="loading" type="primary" class="confirm-btn" @click="onConfirm">
           {{ okText || 'ok' }}
         </a-button>
       </div>
@@ -31,16 +21,16 @@
 </template>
 
 <script lang="ts" setup>
-import { defineProps, defineEmits, reactive, watch, computed } from 'vue'
+import { reactive, watch, computed } from 'vue'
 
 const props = defineProps<{
-    visible?: boolean,
-    loading?: Boolean,
-    disabled?: Boolean,
-    title?: String,
-    okText?: String,
-    cancelText?: String,
-    width?: Number,
+  visible?: boolean,
+  loading?: Boolean,
+  disabled?: Boolean,
+  title?: String,
+  okText?: String,
+  cancelText?: String,
+  width?: Number,
 }>()
 
 const emit = defineEmits(['cancel', 'confirm'])
@@ -66,14 +56,14 @@ const overlayClassName = computed(() => {
   return classList.join(' ')
 })
 
-function onConfirm (e: Event) {
+function onConfirm(e: Event) {
   if (props.disabled) {
     return
   }
   emit('confirm', e)
 }
 
-function onCancel (e: Event) {
+function onCancel(e: Event) {
   state.sVisible = false
   emit('cancel', e)
 }
@@ -84,21 +74,21 @@ function onCancel (e: Event) {
 .drone-control-popconfirm {
   min-width: 300px;
 
-  .uranus-popconfirm-btns{
+  .uranus-popconfirm-btns {
     display: flex;
     padding: 10px 0px;
     justify-content: flex-end;
 
-    .confirm-btn{
+    .confirm-btn {
       margin-left: 10px;
     }
   }
 
-  .form-content{
+  .form-content {
     display: flex;
     flex-direction: column;
 
-    > div {
+    >div {
       display: flex;
       margin-bottom: 5px;
 
@@ -107,8 +97,7 @@ function onCancel (e: Event) {
         margin-right: 10px;
       }
 
-      > div {
-      }
+      >div {}
     }
   }
 }

Web/src/components/svgIcon.vue

@@ -5,7 +5,8 @@
 </template>
 
 <script setup>
-import { defineProps, computed } from 'vue'
+import { computed } from 'vue'
+
 const props = defineProps({
   name: {
     type: String,
@@ -19,13 +20,16 @@ const props = defineProps({
     type: Number,
   },
 })
+
 const iconName = computed(() => `#icon-${props.name}`)
+
 const svgClass = computed(() => {
   if (props.name) {
     return `svg-icon icon-${props.name}`
   }
   return 'svg-icon'
 })
+
 const computedWidth = computed(() => {
   const result = props.width || props.size
   return result ? result + 'px' : '1em'

Web/src/components/workspace/Title.vue

@@ -3,19 +3,20 @@
     <a-row>
       <a-col :span="1"></a-col>
       <a-col :span="(23 - (extSpan || 0))">{{ title }}</a-col>
-      <a-col :span="extSpan"><slot /></a-col>
+      <a-col :span="extSpan">
+        <slot />
+      </a-col>
     </a-row>
   </div>
   <DividerLine />
 </template>
 
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 import DividerLine from '/@/components/workspace/DividerLine.vue'
 
-const props = defineProps < {
+const props = defineProps<{
   extSpan?: number,
   title: string,
-} >()
+}>()
 
-</script>
+</script>