dji-drone-h5/src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import WebSocketUtil from '@/utils/WebSocketUtil';
import { Toast, Dialog } from 'vant';
import config from '@/utils/config'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    status: 0, // 连接状态：0-未连接，1-连接中，2-已连接
    // 全局状态
    width: 0,
    height: 0,
    apiToken: "",
    webSocket: WebSocketUtil,
    // wsUrl: "ws://192.168.0.19:9002/socket/flight",
    wsUrl: config.socketUrl,
    userId: '',  // 用户名称
    orderInfo: null, // 订单信息
    flightTaskUuid: '', // 无人机飞行任务id
    loading: null,  // loading
    taskNum: 0,  // 重新创建任务次数
    takeOffShow: false,  // 是否可以起飞

    flightData: {
      capacityPercent: 100, // 电池的总剩余电量
      homeDistance: 0, //与起飞点的水平距离
      height: 0, // 绝对高度
      verticalSpeed: 0,  // 垂直速度
      horizontalSpeed: 0,  // 水平速度
      quality: 0,  // 网络质量 0:无信号 1:差 2:较差 3:一般 4:较好 5:好
    },  // 无人机飞行数据

    currentPage: 1, // 1: 订单详情页，2：无人机详情页
    router: null,  // 路由数据
    currentPosition: {
      latitude: 0,  // 当前位置纬度
      longitude: 0, // 当前位置经度
    },
    attitudeHead: 0,  // 偏航轴角度(Z轴 0到6点钟方向为正值，6到12点钟方向为负值)
  },
  mutations: {
    // 全局状态修改方法
    SET_APP_VERSION(state, version) {
      // console.log(version)
      state[version.type] = version.value;
      // console.log(this.state.status)
      // console.log('初始化WebSocket', this.state.orderInfo.businessProductId)

    }
  },
  actions: {
    // 全局异步操作
    updateAppVersion({ commit }, value) {
      this.apiToken = value
    },
    // 初始化WebSocket
    initWebSocketUtil({ commit }, value) {
      // console.log('初始化WebSocket', this.$router)
      // console.log('初始化WebSocket', this.state.orderInfo)
      // return
      if (this.state.status != 0) return;
      if (!this.state.orderInfo) return;
      if (!this.state.userId) return;
      // console.log('11111');
      this.state.status = 1; // 标记为连接中
      const url = `${this.state.wsUrl}/${this.state.orderInfo.businessProductId}/${this.state.userId}`
      // console.log('初始化WebSocket_url', url)
      // 初始化WebSocket
      this.state.webSocket.init({
        url,
        heartbeatInterval: 5000, // 10秒发送一次心跳，方便演示
        reconnectInterval: 3000, // 3秒重连一次
        reconnectMaxTimes: 5 // 最多重连5次
      });
      this.dispatch('addWebSocketListeners');
    },
    // 添加WebSocket事件监听
    addWebSocketListeners() {
      // console.log('添加WebSocket事件监听');
      // 连接打开事件
      this.state.webSocket.addEventListener('open', (event) => {
        this.state.status = 2;
        // Toast('WebSocket连接已打开');
        // console.log('WebSocket连接已打开');
        // this.addMessage('system', '连接已建立');
      });

      // 消息接收事件
      this.state.webSocket.addEventListener('message', ({ data }) => {
        // console.log('收到消息:', data);
        // 如果是心跳消息
        if (data && data.type === 'heartbeat') {
          // this.lastHeartbeat = this.formatTime(new Date());
          // this.addMessage('heartbeat', `收到心跳响应: ${JSON.stringify(data)}`);
          return;
        }
        // 排队完成可以起飞 
        if (data.msgType == 1) {
          // Toast('可以起飞');
          // if (this.state.loading) this.state.loading.clear();
          // this.state.loading = null;
          // Router.push(`/droneOperation?flightTaskUuid=${this.state.flightTaskUuid}`);
          setTimeout(() => {
            this.state.takeOffShow = true;
          }, 1000);
        }
        // 飞行结束
        if (data.msgType == 2) {
          Toast('飞行结束，即将退出');
          setTimeout(() => {
            this.state.router.replace(`/?orderNumber=${this.state.orderInfo.orderNumber}&t=${new Date().getTime()}`);
          }, 1000);
          this.dispatch('disconnect');
        }
        // 创建任务失败，是否重新创建
        if (data.msgType == 3) {
          if (this.state.currentPage == 2) {
            // Toast('飞行任务创建失败');
            setTimeout(() => {
              try {
                this.state.router.replace(`/?orderNumber=${this.state.orderInfo.orderNumber}&t=${new Date().getTime()}`);
              } catch (e) {
                console.log(e);
              }
            }, 2000);
            return
          }

          Dialog.confirm({
            title: '提示',
            message: '飞行任务创建失败，是否重新创建飞行任务？',
          }).then(() => {
            this.state.taskNum++;
          }).catch(() => {
            this.state.taskNum = 0;
            if (this.state.currentPage == 2) {
              // this.state.router.back();
              this.state.router.replace(`/?orderNumber=${this.state.orderInfo.orderNumber}&t=${new Date().getTime()}`);
            }
          });
        }
        // 飞行任务创建结束，可以起飞
        if (data.msgType == 4) {
          this.state.taskNum = 0;
          if (this.state.loading) this.state.loading.clear();
          this.state.loading = null;
          // Toast('飞行任务创建成功，即将起飞');
          // this.state.router.replace(`/droneOperation?flightTaskUuid=${this.state.flightTaskUuid}&t=${new Date().getTime()}`);
          if (this.state.flightTaskUuid == '') {

            return
          }
          // console.log("flightTaskUuid===》", this.state.flightTaskUuid);
          // console.log("跳转页面vuex====>")
          this.state.router.replace(`/droneOperation?t=${new Date().getTime()}&flightTaskUuid=${this.state.flightTaskUuid}`);
        }

        // 收到无人机数据
        if (data.msgType == 10) {
          if (data.data) {
            let obj = JSON.parse(data.data) || {};
            // console.log('obj==>', obj);
            let flightData = this.state.flightData;
            let currentPosition = this.state.currentPosition ? { ...this.state.currentPosition } : {};
            if (obj.battery && obj.battery.capacityPercent != null) flightData.capacityPercent = obj.battery.capacityPercent;
            if (obj.homeDistance != null) flightData.homeDistance = (obj.homeDistance * 1).toFixed(2);
            if (obj.height != null) flightData.height = (obj.height * 1).toFixed(2);
            if (obj.verticalSpeed != null) flightData.verticalSpeed = (obj.verticalSpeed * 1).toFixed(2);
            if (obj.horizontalSpeed != null) flightData.horizontalSpeed = (obj.horizontalSpeed * 2).toFixed(2);
            if (obj.networkState && obj.networkState.quality != null) flightData.quality = obj.networkState.quality;
            if (obj.latitude != null) currentPosition.latitude = obj.latitude;
            if (obj.longitude != null) currentPosition.longitude = obj.longitude;
            if (obj.attitudeHead != null) this.state.attitudeHead = obj.attitudeHead;
            this.state.currentPosition = { ...currentPosition };
            this.state.flightData = flightData;
          }
        }

        // 普通消息
        // this.addMessage('received', typeof data === 'object' ? JSON.stringify(data) : data);
      });

      // 错误事件
      this.state.webSocket.addEventListener('error', (event) => {
        this.status = 0;
        console.log('WebSocket连接错误:', event);
        // Toast('WebSocket连接错误');
      });

      // 关闭事件
      this.state.webSocket.addEventListener('close', (event) => {
        this.state.status = 0;
        // Toast('WebSocket连接关闭');
        console.log('WebSocket连接关闭:', event);
      });
    },
    // 断开WebSocket连接
    disconnect() {
      if (this.state.status == 0) return;
      this.state.webSocket.close();
      this.state.status = 0;
    },
  },
  modules: {


  }
})