统一换成Vant组件和修改列表点击事件范围

chenyao

2025-02-26 31b7e874bac09e8a82c938c75e36452580dfddd6

统一换成Vant组件和修改列表点击事件范围

 src/api/drone-control/payload.ts

@@ -8,7 +8,7 @@
 * Copyright (c) 2024 by GuLiMmo, All Rights Reserved.
 */
import request from '@/api/http/request';
import { ElMessage } from 'element-plus';
import { showNotify } from 'vant';


const API_PREFIX = '/control/api/v1';
@@ -72,7 +72,7 @@
    data: data,
  });
  if (code === 0) {
    ElMessage.success('万向节复位成功');
    showNotify({ type: 'success', message: '万向节复位成功' })
  }
}

@@ -83,8 +83,8 @@
    data: data,
  });
  if (isZoom) {
    ElMessage.success('放大成功');
    showNotify({ type: 'success', message: '放大成功' })
  } else {
    ElMessage.success('缩小成功');
    showNotify({ type: 'success', message: '缩小成功' })
  }
}

 src/api/http/request.ts

@@ -11,7 +11,7 @@
import router from '@/router';
import { serialize } from '@/utils/common'
import { getToken } from '@/utils/auth';
import { ElMessage } from 'element-plus';
import { showNotify } from 'vant';
import website from '@/config/website';
import { Base64 } from 'js-base64'
// import NProgress from 'nprogress';
@@ -126,7 +126,7 @@
        return Promise.reject(new Error(message))
      }
      if (message === '缺失令牌,鉴权失败') {
        ElMessage.warning('登录信息已过期，请重新登录')
        showNotify({ type: 'warning', message: '登录信息已过期，请重新登录' })
      }
      if (
        ![
@@ -138,7 +138,7 @@
          '缺失令牌,鉴权失败',
        ].includes(message)
      ) {
        ElMessage.warning(message)
        showNotify({ type: 'warning', message: message })
      }
      return Promise.reject(new Error(message))
    }
@@ -162,16 +162,16 @@
      description = err.response.data.result.message
    }
    if (!err.response || !err.response.status) {
      ElMessage.error('网络异常，请检查后端服务后重试')
      showNotify({ type: 'danger', message: '网络异常，请检查后端服务后重试' })
      return
    }
    if (err.response?.status !== 200) {
      if (err.response.data?.msg) {
        ElMessage.error(err.response.data?.msg)
        showNotify({ type: 'danger', message: err.response.data?.msg })
      } else if (err.response.data?.error_description) {
        ElMessage.error(err.response.data?.error_description)
        showNotify({ type: 'danger', message: err.response.data?.error_description })
      } else {
        ElMessage.error(`错误码: ${err.response?.status}`)
        showNotify({ type: 'danger', message: `错误码: ${err.response?.status}` })
      }
    }
    if (err.response?.status == 401) {

 src/api/media.ts

@@ -1,4 +1,4 @@
import { ElMessage } from 'element-plus';
import { showNotify } from 'vant';
import request, { IPage, IWorkspaceResponse } from '@/api/http/request'
const HTTP_PREFIX = '/media/api/v1'

@@ -33,7 +33,7 @@
    reader.onload = function (e) {
      const text = reader.result as string
      const result = JSON.parse(text)
      ElMessage.error(result.message)
      showNotify({ type: 'warning', message: result.message })
    }
    reader.readAsText(result.data, 'utf-8')
  } else {

 src/api/pilot-bridge.ts

@@ -1,4 +1,4 @@
import { ElMessage } from 'element-plus';
import { showNotify } from 'vant';
import { EComponentName, ELocalStorageKey, EPhotoType, ERouterName } from '../types'
import { CURRENT_CONFIG } from './http/config'
import { EVideoPublishType, LiveStreamStatus } from '@/types/live-stream'
@@ -68,8 +68,7 @@

function errorHint (response: JsResponse): boolean {
  if (response.code !== 0) {
    ElMessage.error(response.message)
    console.error(response.message)
    showNotify({ type: 'warning', message: response.message })
    return false
  }
  return true

 src/api/wayline.ts

@@ -1,4 +1,4 @@
import { ElMessage } from 'element-plus';
import { showNotify } from 'vant';
import request, { IPage, IWorkspaceResponse, IListWorkspaceResponse } from '@/api/http/request'
import { TaskType, TaskStatus, OutOfControlAction } from '@/types/task'
import { WaylineType } from '@/types/wayline'
@@ -21,7 +21,7 @@
    reader.onload = function (e) {
      const text = reader.result as string
      const result = JSON.parse(text)
      ElMessage.error(result.message)
      showNotify({ type: 'warning', message: result.message })
    }
    reader.readAsText(result.data, 'utf-8')
  } else {

 src/store/user.ts

@@ -22,7 +22,7 @@
import { setStore, getStore } from '@/utils/store'
import { validatenull } from '@/utils/validate'
import md5 from 'js-md5'
import { ElMessage } from 'element-plus';
import { showNotify } from 'vant';
import { setToken, setRefreshToken, removeToken, removeRefreshToken } from '@/utils/auth'

const user = {
@@ -59,7 +59,7 @@
          .then((res) => {
            const data = res.data
            if (data.error_description) {
              ElMessage.error(data.error_description)
              showNotify({ type: 'danger', message: data.error_description })
            } else {
              commit('SET_LOGIN_FLAG', true)
              commit('SET_TOKEN', data.access_token)

 src/utils/websocket/drone-ws-control.ts

@@ -1,4 +1,4 @@
import { ElMessage } from 'element-plus';
import { showNotify } from 'vant';
import { onBeforeUnmount, onMounted, ref } from 'vue'
import EventBus from '@/event-bus/'
import { EBizCode, EBizCodeMessage } from '@/types'
@@ -34,9 +34,9 @@

  function handleProgress (key: string, message: string, error: number) {
    if (error !== 0) {
      ElMessage.error(key)
      showNotify({ type: 'danger', message: key })
    } else {
      ElMessage.info(key)
      showNotify({ type: 'danger', message: key })
    }
  }


 src/views/DronePilotDetails.vue

@@ -7,11 +7,11 @@
    />
    <div id="landscapeBox" class="landscape-box" :style="{ width: boxWidth + 'px', height: boxHeight + 'px'}">
      <div id="videoModule" class="l-video" :style="{ width: screenWidthVideo + 'px', height: (screenHeightVideo) + 'px'}">
        <video v-show="videoUrl" ref="videoPlayerBig" :style="{ width: screenWidthVideo + 'px', height: screenHeightVideo + 'px'}" controls autoplay muted playsinline style="text-align: left; object-fit: fill">
        <video v-show="videoUrl && droneInfo.mode_code != 14" ref="videoPlayerBig" :style="{ width: screenWidthVideo + 'px', height: screenHeightVideo + 'px'}" controls autoplay muted playsinline style="text-align: left; object-fit: fill">
          Your browser is too old which doesn't support HTML5 video.
        </video>
        <el-empty v-show="videoUrl == ''" description="当前设备已关机，无法进行直播" :image="imageUrl"></el-empty>
        <div v-if="videoUrl" class="center-point"></div>
        <el-empty v-show="videoUrl == ''&& droneInfo.mode_code == 14" description="当前设备已关机，无法进行直播" :image="imageUrl"></el-empty>
        <div v-if="videoUrl && droneInfo.mode_code != 14" class="center-point"></div>
        <div class="right-box">
          <ptzControl :sn="sn" :osdVisible="sbInfo"/>
          <controlConsole :sn="sn" :osdVisible="sbInfo" :cesiumViewe="globalViewer" />
@@ -286,6 +286,9 @@
  }
}

// 无人机相关信息
const droneInfo = ref({})

// 监听ws
const messageHandler = async (payload: any) => {
  // if (!payload) {
@@ -299,6 +302,8 @@
    case EBizCode.DeviceOsd: {
      store.commit('SET_DEVICE_INFO', payload.data)
      store.commit('SET_WS_MESSAGE', payload)
      // console.log('对对对', payload.data.host.mode_code)
      droneInfo.value = payload.data.host
      getviewDrone(payload)
      break
    }
@@ -308,9 +313,9 @@
    }
    case EBizCode.FlightTaskProgress: { // 获取进度
      // 如果点击列表进入没有获取到航线文件，那么这里重新请求一次
      // if (!ssLinePath || !ssLinePath.value) {
      //   getWrjSsLx()
      // }
      if (!ssLinePath || !ssLinePath.value) {
        getWrjSsLx()
      }
      break
    }
  }

 src/views/DronePilotList.vue

@@ -8,18 +8,18 @@
    <div class="drone-pilot-list">
      <template v-if="droneOrPilotTxt == 'drone'">
      <div class="box-info" v-for="item in cardList" :key="item.sn">
        <div class="info-title">
        <div class="info-title" @touchstart="infoClick(item)">
          <div class="nike-name">{{ item.name }}</div>
          <div @touchstart="infoClick(item)" :class="item.isOnline?'line-status':'not-line-status'">{{ item.isOnline?'在线':'不在线' }}</div>
          <div :class="item.isOnline?'line-status':'not-line-status'">{{ item.isOnline?'在线':'不在线' }}</div>
        </div>
        <div class="info-contain"></div>
      </div>
      </template>
      <template v-if="droneOrPilotTxt == 'pilot'">
      <div class="box-info" v-for="item in ykqList" :key="item.sn">
        <div class="info-title">
        <div class="info-title" @touchstart="infoClick(item)">
          <div class="nike-name">{{ item.name }}</div>
          <div @touchstart="infoClick(item)" :class="item.isOnline?'line-status':'not-line-status'">{{ item.isOnline?'在线':'不在线' }}</div>
          <div :class="item.isOnline?'line-status':'not-line-status'">{{ item.isOnline?'在线':'不在线' }}</div>
        </div>
        <div class="info-contain"></div>
      </div>

 src/views/components/controlConsole.vue

@@ -15,25 +15,12 @@
      <div class="bottom" @touchstart="handlePublish({ h: -HEIGHT })"><div class="xx">下降</div></div>
      <div class="right" @touchstart="handlePublish({ w: W_SPEED })" ><div class="xy">右转</div></div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="提示"
      width="500">
      <span>确认是否接管?</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="sureJg">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <van-dialog v-model:show="dialogVisible" title="确认是否接管?" show-cancel-button @confirm="sureJg"></van-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { showNotify } from 'vant';
import { ref, onMounted, onBeforeUnmount, nextTick, reactive, computed, watch } from 'vue';
import { useMyStore } from '@/store'
import {exitController,droneController,returnHomeCancel,returnHome} from '@/api/drone/drc'
@@ -86,7 +73,7 @@
// const clientId = computed(() => {
//   return localStorage.getItem('clientId') //store.state.clientId
// });
let clientId = ref(localStorage.getItem('clientId'))
let clientId = ref(localStorage.getItem('client_id'))

// {"0":"待机","1":"起飞准备","2":"起飞准备完毕","3":"手动飞行","4":"自动起飞","5":"航线飞行","6":"全景拍照","7":"智能跟随","8":"ADS-B 躲避","9":"自动返航","10":"自动降落","11":"强制降落","12":"三桨叶降落","13":"升级中","14":"未连接","15":"APAS","16":"虚拟摇杆状态","17":"指令飞行","18":"空中 RTK 收敛模式","19":"机场选址中"}
watch(() => store.state.wsMessage, (newValue, oldValue) => {
@@ -142,7 +129,7 @@
const authenticationPwd = (value:any, str:String) => {
  // 提示是否进行人工控制
  if (!isShowKzBtn.value) {
    if (!hasPermission.value) { return ElMessage.warning('暂无无人机控制权限')}
    if (!hasPermission.value) { return showNotify({ type: 'warning', message: '暂无无人机控制权限' })}
    dialogVisible.value = true
  } else {
    isShowKzBtn.value = false
@@ -176,12 +163,12 @@
const onControlsDroneSpeed = (value:Boolean) => {
  if (value) {
    if (droneSeepd.value >= 15) {
      return ElMessage.warning('无人机速度范围应处于0~15m/s之间')
      return showNotify({ type: 'warning', message: '无人机速度范围应处于0~15m/s之间' })
    }
    droneSeepd.value += 1
  } else {
    if (droneSeepd.value <= 0) {
      return ElMessage.warning('无人机速度范围应处于0~15m/s之间')
      return showNotify({ type: 'warning', message: '无人机速度范围应处于0~15m/s之间' })
    }
    droneSeepd.value -= 1
  }
@@ -190,7 +177,7 @@
const mqttHooks =  useMqtt(deviceTopicInfo)
// 字母按键
const handlePublish = (params:Object) => {
  // if (!hasPermission.value) { return ElMessage.warning('暂无无人机控制权限')}
  if (!hasPermission.value) { return showNotify({ type: 'warning', message: '暂无无人机控制权限' });}
  const body = { method: DRC_METHOD.DRONE_CONTROL, data: params}
  mqttHooks?.publishMqtt(deviceTopicInfo.pubTopic, body, {qos: 0})
}

 src/views/components/ptzControl-copy.vue

@@ -45,7 +45,7 @@
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { showNotify } from 'vant';
import { Refresh } from '@element-plus/icons-vue';
import { ControlSource, EModeCode } from '@/types/device'
import { CameraMode } from '@/types/live-stream'

 src/views/components/ptzControl.vue

@@ -38,7 +38,7 @@
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { showNotify } from 'vant';
import { Refresh } from '@element-plus/icons-vue';
import { ControlSource, EModeCode } from '@/types/device'
import { CameraMode } from '@/types/live-stream'
@@ -49,7 +49,6 @@
import { useDroneControlWsEvent } from '@/utils/websocket/drone-ws-control'
import cesiumOperation from '@/utils/cesium-tsa.js';
import { useMyStore } from '@/store'
import { fa } from 'element-plus/es/locale';

const { loadLAYER } = cesiumOperation()

@@ -163,11 +162,11 @@
  }

  if (isActionComplete.value) {
    ElMessage.warning('当前相机动作暂未完成，请勿点击！！')
    showNotify({ type: 'warning', message: '当前相机动作暂未完成，请勿点击！' })
    return
  }
  if (payloadSelectInfo.camera?.recording_state) {
    ElMessage.warning('当前摄像头正在录制视频，请先结束视频录制！！')
    showNotify({ type: 'warning', message: '当前摄像头正在录制视频，请先结束视频录制' })
    return
  }

@@ -191,7 +190,7 @@
const curTaskCameraPhoto =  (time:any) => {
  isActionComplete.value = true

  ElMessage({
  showNotify({
    message: '请稍后，正在拍摄中。。。',
    duration: 2000,
  })
@@ -231,9 +230,9 @@
  authPayload(props.osdVisible.dockSn, payloadSelectInfo.payloadIndex).then(
    (payloadRes:any) => {
      if (payloadRes.code !== 0)
        return ElMessage.error('获得有效载荷控制失败，请稍后重试！！')
        return showNotify({ type: 'danger', message: '获得有效载荷控制失败，请稍后重试！' })
      payloadControlSource.value = ControlSource.A
      ElMessage.success('成功获得有效载荷控制')
      showNotify({ type: 'success', message: '成功获得有效载荷控制' })
    },
  )
}
@@ -243,14 +242,12 @@
    return
  }
  if (isActionComplete.value) {
    ElMessage.warning('当前相机动作暂未完成，请勿点击！！')
    showNotify({ type: 'warning', message: '当前相机动作暂未完成，请勿点击！' })
    return
  }

  if (payloadSelectInfo.camera?.recording_state) {
    return ElMessage.warning(
      '当前摄像头正在录制视频，请勿重复点击！！',
    )
    return showNotify({ type: 'warning', message: '当前摄像头正在录制视频，请勿重复点击！' })
  }

  if (payloadSelectInfo.camera?.camera_mode !== CameraMode.Video) {
@@ -273,7 +270,7 @@
  const curStartCameraRecording = (time:any) => {
    isActionComplete.value = true

    ElMessage({
    showNotify({
      message: '请稍后，正在开启视频录制。。。',
      duration: 2000,
    })
@@ -282,8 +279,8 @@
      startCameraRecording(props.osdVisible.dockSn, payloadSelectInfo.payloadIndex)
        .then((res) => {
          if (res.code !== 0)
            return ElMessage.warning('开始录制失败，请稍后重试！！')
          ElMessage.success('开始录制成功')
            return showNotify({ type: 'warning', message: '开始录制失败，请稍后重试！' })
          showNotify({ type: 'success', message: '开始录制成功！' })
          // 开始录像
          isCameraRecording.value = true
          isActionComplete.value = false
@@ -299,15 +296,15 @@
    return
  }
  if (isActionComplete.value) {
    ElMessage.warning('当前相机动作暂未完成，请勿点击！！')
    showNotify({ type: 'warning', message: '当前相机动作暂未完成，请勿点击！' })
    return
  }
  isActionComplete.value = true
  stopCameraRecording(props.osdVisible.dockSn, payloadSelectInfo.payloadIndex)
    .then((res) => {
      if (res.code !== 0)
        return ElMessage.warning('停止录制失败，请稍后重试！！')
      ElMessage.success('停止录制成功')
        return showNotify({ type: 'warning', message: '停止录制失败，请稍后重试！' })
      showNotify({ type: 'success', message: '停止录制成功' })
      // 停止录像
      isCameraRecording.value = false
      isActionComplete.value = false
@@ -330,7 +327,6 @@
    if (zoom_factor.value <= 2) {
      zoom_factor.value = 2
    }
    console.log('9999', zoom_factor.value)
  }
  switchLivestream({
    video_id: `${props.osdVisible.dockSn}/${payloadSelectInfo.payloadIndex}/normal-0`,

 src/views/components/use-payload-control.ts

@@ -1,4 +1,4 @@
import { ElMessage } from 'element-plus';
import { showNotify } from 'vant';
import {
  postPayloadAuth,
  postPayloadCommands,
@@ -14,7 +14,7 @@
  function checkPayloadAuth(controlSource?: ControlSource) {
    if (controlSource !== ControlSource.A) {
      // Message.error('Get Payload Control first')
      ElMessage.error('请先获取负载控制');
      showNotify({ type: 'danger', message: '请先获取负载控制' })
      return false;
    }
    return true;
@@ -32,7 +32,7 @@
      data: data,
    });
    if (code === 0) {
      ElMessage.success('万向节复位成功');
      showNotify({ type: 'success', message: '万向节复位成功' })
    }
  }

@@ -44,7 +44,7 @@
    if (code === 0) {
      return true;
    } else {
      ElMessage.warning('拍照或者录像失败，请重试！！');
      showNotify({ type: 'warning', message: '拍照或者录像失败，请重试！' })
      return false;
    }
  }
@@ -58,10 +58,10 @@
      },
    });
    if (code === 0) {
      ElMessage.success('拍照成功');
      showNotify({ type: 'success', message: '拍照成功' })
      return true;
    } else {
      ElMessage.warning('拍照失败，请重试！！');
      showNotify({ type: 'warning', message: '拍照失败，请重试！' })
      return false;
    }
  }
@@ -92,9 +92,9 @@
    if (strZoom == '复原' || strZoom == '变焦复原') {
      // ElMessage.success('切换成功');
    } else if (isZoom) {
      ElMessage.success('放大成功');
      showNotify({ type: 'success', message: '放大成功' })
    } else {
      ElMessage.success('缩小成功');
      showNotify({ type: 'success', message: '缩小成功' })
    }
  }

@@ -104,7 +104,7 @@
      data: data,
    });
    if (code === 0) {
      ElMessage.success('缩放目标成功');
      showNotify({ type: 'success', message: '缩放目标成功' })
    }
  }