feat: 摇杆接入

iframe/src/App.vue

@@ -35,7 +35,7 @@ export default {
         baseUrl: "/",
         wsUrl: "wss://tmj.mmcuav.cn/websocket",
         mqttUrl: "wss://fkzx.mmcuav.cn:8884/mqtt",
-        mqttToken: '',
+        mqttToken: "",
       },
       scene: 0, // 场景类型 1: 无人机 2: 机库
       account: "mmctest@admin",
@@ -69,7 +69,7 @@ export default {
      * 给父窗口发送消息
      */
     postTop(data) {
-      console.log('iframe postMessage', data);
+      console.log("iframe postMessage", data);
       window.top.postMessage(
         {
           module: "MMCFlightControlCenter",
@@ -85,9 +85,16 @@ export default {
       window.addEventListener("message", (event) => {
         if (event.data.module === "MMCFlightControlCenter") {
           console.log("iframe收到数据", event.data);
-          this.paramHandler(event.data);
-          this.callbackHandler(event.data);
-          this.logHandler(event.data);
+          if (event.type === "window") {
+            this.postTop({
+              event: "window",
+              data: window,
+            });
+          } else {
+            this.paramHandler(event.data);
+            this.callbackHandler(event.data);
+            this.logHandler(event.data);
+          }
         }
       });
     },
@@ -146,32 +153,6 @@ export default {
      */
     dispatchEvent(event, data) {
       // 回调函数不能通过postMessage传递
-      /* switch (event) {
-        case "hangarTaskAdd":
-          this.hangarTaskAddCB = data.callback;
-          delete data.callback;
-          break;
-
-        case "uavTaskAdd":
-          this.uavTaskAddCB = data.callback;
-          delete data.callback;
-          break;
-
-        case "airwayPageChange":
-          this.airwayPageChangeCB = data.callback;
-          delete data.callback;
-          break;
-
-        case "airwayGet":
-          this.airwayGetCB = data.callback;
-          delete data.callback;
-          break;
-
-        case "taskListGet":
-          this.taskListGetCB = data.callback;
-          delete data.callback;
-          break;
-      } */
       if (data?.callback) {
         this.callbackList[event] = data.callback;
         delete data.callback;

src/components/MMCFlightControlCenter/components/hangar/index.vue

@@ -29,7 +29,7 @@ export default {
     "uavRealTimeData.isFlying"(newVal, oldVal) {
       // 监听飞机降落然后进行任务结束的提示
       if (oldVal === true && newVal === false) {
-        if (!this.uav.deviceId.include("mock")) {
+        if (!this.uav.deviceId.includes("mock")) {
           this.$alert("当前任务已结束", "提示", {
             type: "success ",
             confirmButtonText: "确定",

src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlBottom/index.vue

@@ -50,9 +50,11 @@
 import { mapState, mapActions } from "vuex";
 import { flightTaskAPI, Control_API } from "../../../../../../api";
 import KeyControl from "./components/keyControl";
+import joystick from "../../../../../../mixins/joystick";
 
 export default {
   name: "ControlBottom",
+  mixins: [joystick],
   components: {
     KeyControl,
   },
@@ -165,6 +167,13 @@ export default {
           isOk && (this.controlType = 1);
         },
       });
+      // 打开软件
+      let a = document.createElement("a");
+      a.href = "JoystickTools://";
+      a.click();
+      setTimeout(() => {
+        this.initJoystick();
+      }, 5000);
     },
 
     /**
@@ -181,6 +190,7 @@ export default {
           isOk && (this.controlType = 0);
         },
       });
+      this.closeJoystick();
     },
     /**
      * 键盘模式

src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/index.vue

@@ -18,15 +18,16 @@ import Moment from "moment";
 import ControlBottom from "./components/controlBottom";
 import ControlRight from "./components/controlRight";
 import ControlLeft from "./components/controlLeft";
-import ControlTop from './components/controlTop';
+import ControlTop from "./components/controlTop";
 
 export default {
   name: "ControlPanel",
+  mixins: ["joystick"],
   components: {
     ControlBottom,
     ControlRight,
     ControlLeft,
-    ControlTop
+    ControlTop,
   },
   data() {
     return {

src/components/MMCFlightControlCenter/components/uavApplications/index.vue

@@ -39,7 +39,7 @@ export default {
     "uavRealTimeData.isFlying"(newVal, oldVal) {
       // 监听飞机降落然后进行任务结束的提示
       if (oldVal === true && newVal === false) {
-        if (!this.uav.deviceId.include("mock")) {
+        if (!this.uav.deviceId.includes("mock")) {
           this.$alert("当前任务已结束", "提示", {
             type: "success ",
             confirmButtonText: "确定",

src/components/MMCFlightControlCenter/index.vue

@@ -146,6 +146,10 @@ export default {
           key: "mqttToken",
           value: newVal.mqttToken,
         });
+        this.$store.commit("MMCFlightControlCenter/setState", {
+          key: "mqttIP",
+          value: newVal.mqttIP,
+        });
       },
     },
     useSTLAirway: {
@@ -189,6 +193,12 @@ export default {
     window.$mmc_stl.state = () => {
       return this.$store.state;
     };
+    window.$debug = localStorage.getItem("$debug") == 1 ? true : false; //全局调试信息展示开关
+    window.$log = function (...args) {
+      if (window.$debug) {
+        console.info(...args);
+      }
+    };
   },
   created() {
     if (this.cesiumViewer) {

src/components/MMCFlightControlCenter/mixins/joystick.js

+import * as mountList from "../../MMCMount/utils.js";
+import { mapState } from "vuex";
+
+export default {
+  data() {
+    return {
+      wsJoystick: null,
+      control_speed: 3, //控制速度
+      mountList,
+      lastDirection: "stop", //最后一次操控方向
+      str: null,
+      mountCtrlList: null,
+    };
+  },
+  mounted() {
+    this.mountCtrlList = {
+      ...this.mountList,
+    };
+  },
+  computed: {
+    ...mapState("MMCFlightControlCenter", ["mqttIP"]),
+    ...mapState("MMCFlightControlCenter/uav", ["selectMount", "uav"]),
+    mountCtrl() {
+      return this.mountCtrlList[this.selectMount?.gimbalName];
+    },
+  },
+  inject: ["uav_mqtt_fn"],
+  watch: {
+    str: function (val) {
+      this.uav_mqtt_fn(
+        {
+          type: 513,
+          data: val,
+        },
+        "wrj",
+        this.uav.control.device
+      );
+    },
+  },
+  beforeDestroy() {
+    console.log("closeJoystick.........................");
+    this.closeJoystick();
+  },
+  methods: {
+    /**
+     * 初始化操纵杆连接
+     */
+    initJoystick() {
+      this.wsJoystick && this.wsJoystick.close();
+      let uavCate = "PX4";
+      let topic = `${uavCate}/OBTAIN/${this.uav.deviceId}`;
+      this.wsJoystick = new WebSocket("ws://127.0.0.1:8802");
+      this.wsJoystick.onopen = () => {
+        console.log(
+          "joystick.js 连接上 ws://127.0.0.1:8802"
+        );
+        this.wsJoystick.send(
+          JSON.stringify({
+            type: 2003,
+            data: {
+              mqttAddr: this.mqttIP,
+              mqttIport: 1883,
+              mqttTopic: topic,
+              vehicleType: uavCate == "PX4" ? 1 : 0,
+            },
+          })
+        );
+        this.wsJoystick.send(JSON.stringify({ type: 2001, data: {} }));
+      };
+      let _this = this;
+      this.wsJoystick.onmessage = (e) => {
+        let reader = new FileReader();
+        reader.onload = (event) => {
+          let obj = JSON.parse(event.currentTarget.result);
+          if (obj.type == 518) {
+          }
+          let data = JSON.parse(event.currentTarget.result).data;
+          window.$log(
+            "joystick.js message",
+            data
+          );
+          let y = data.channel03; //油门值 0-1000
+
+          // console.log(data.channel03,data,"yyyyyyyy");
+          if (y || y == 0) {
+            this.$store.commit("MMCFlightControlCenter/joystick/setState", {
+              key: 'throttleValue',
+              value: y
+            });
+          }
+          if (this.mountCtrl) {
+            //拍照
+            if (data.channel06) {
+              let buffer = this.mountCtrl.take_photo();
+              this.send_mqtt(buffer);
+            }
+            //录像
+            if (data.channel05) {
+              let buffer = null;
+              if (data.channel05 == 1) {
+                buffer = this.mountCtrl.record(true);
+              } else if (data.channel05 == 2) {
+                buffer = this.mountCtrl.record(false);
+              }
+              this.send_mqtt(buffer);
+            }
+            //云台模式
+            // if (data.channel07) {
+            //   let buffer = null
+            //   if (data.channel07 == 1) {
+            //     buffer = this.mountCtrl.gimbal_mode_ctrl(0)
+            //   } else if (data.channel07 == 2) {
+            //     buffer = this.mountCtrl.gimbal_mode_ctrl(2)
+            //   }
+            //   this.send_mqtt(buffer)
+            // } else {
+            //   let buffer = this.mountCtrl.gimbal_mode_ctrl(1)
+            //   this.send_mqtt(buffer)
+            // }
+            //变焦
+            if (data.channel09) {
+              let buffer = null;
+              if (data.channel09 == 1) {
+                buffer = this.mountCtrl.zoom(2, 0);
+              } else if (data.channel09 == 2) {
+                buffer = this.mountCtrl.zoom(0, 0);
+              }
+              this.send_mqtt(buffer);
+              buffer = this.mountCtrl.zoom(1, 0);
+              this.send_mqtt(buffer);
+            }
+          }
+
+          //飞行模式
+          if (data.channel08) {
+            if (data.channel08 == 1) {
+              //定点
+              this.str = "POSITION";
+            } else if (data.channel08 == 2) {
+              //航线
+              this.str = "AUTO_MISSION";
+            } else if (data.channel08 == 3) {
+              //返航
+              this.str = "AUTO_RTL";
+            } else if (data.channel08 == 4) {
+              //保持
+              this.str = "HOLD";
+            }
+          }
+
+          //channel10 云台俯仰 0：没按 1：上 2：下
+          if (data.channel10) {
+            const direction = {
+              1: "up",
+              2: "down",
+            };
+
+            const ctr = direction[data.channel10];
+            // console.log('摇杆按下了channel10', ctr);
+            _this.cameraMountCtr(ctr);
+          }
+          //channel11 云台偏航 0：没按 1：左 2：右
+          if (data.channel11) {
+            const direction = {
+              1: "left",
+              2: "right",
+            };
+
+            const ctr = direction[data.channel11];
+            // console.log('摇杆按下了channel11', ctr);
+            _this.cameraMountCtr(ctr);
+          }
+
+          if (data.channel10 == 0 && data.channel11 == 0) {
+            _this.cameraMountCtr("stop");
+          }
+        };
+        reader.readAsText(e.data);
+      };
+    },
+    /**
+     * 关闭操纵杆
+     */
+    closeJoystick() {
+      if (!this.wsJoystick) {
+        return;
+      }
+      this.cameraMountCtr("stop", this.lastMountCtrl);
+      setTimeout(() => {
+        this.wsJoystick.send(JSON.stringify({ type: 2010, data: {} }));
+        this.wsJoystick && this.wsJoystick.close();
+        this.wsJoystick = null;
+      }, 2000);
+    },
+    /**
+     * 相机挂载控制
+     * @param {String} type up: 上，left：打，right：右，down：下
+     */
+    cameraMountCtr(type) {
+      /* if(type !== 'stop'){
+        console.log('cameraMountCtr', !this.wsJoystick, !this.mountCtrl || !type, this.lastDirection === type)
+        console.log('this.mountCtrl', this.mountCtrl, type)
+      } */
+
+      if (!this.wsJoystick) {
+        return;
+      }
+
+      if (!this.mountCtrl || !type) {
+        return;
+      }
+
+      if (this.lastDirection === type) {
+        return;
+      }
+
+      console.log("摇杆按下了", type);
+
+      let buffer = null;
+      switch (type) {
+        case "stop":
+          if (["up", "down"].includes(this.lastDirection)) {
+            buffer = this.mountCtrl.gimbal_pitch_ctrl(0, this.control_speed);
+          } else if (["left", "right"].includes(this.lastDirection)) {
+            buffer = this.mountCtrl.gimbal_yaw_ctrl(0, this.control_speed);
+          }
+          // buffer = this.mountCtrl.gimbal_pitch_ctrl(0, this.control_speed);
+          // buffer = this.mountCtrl.gimbal_yaw_ctrl(0, this.control_speed);
+          break;
+        case "up":
+          buffer = this.mountCtrl.gimbal_pitch_ctrl(1, this.control_speed);
+          break;
+        case "left":
+          buffer = this.mountCtrl.gimbal_yaw_ctrl(-1, this.control_speed);
+          break;
+        case "right":
+          buffer = this.mountCtrl.gimbal_yaw_ctrl(1, this.control_speed);
+          break;
+        case "down":
+          buffer = this.mountCtrl.gimbal_pitch_ctrl(-1, this.control_speed);
+          break;
+      }
+
+      this.lastDirection = type;
+      this.send_mqtt(buffer);
+    },
+    send_mqtt(buffer) {
+      this.$store.dispatch("MMCMQTT/publish", {
+        topic: "PX4/OBTAIN/" + this.uav.deviceId,
+        data: {
+          type: 514,
+          data: {
+            mountId: this.selectMount.mountId,
+            payload: buffer,
+          },
+        },
+        callback() {},
+      });
+    },
+  },
+};

src/components/MMCFlightControlCenter/store/index.js

 import uav from "./uav";
 import hangar from "./hangar";
+import joystick from './joystick';
 import { Control_API } from "../api";
 import { Utils } from "../lib/cesium";
 
@@ -45,6 +46,7 @@ export default {
     wsUrl: '',  //websocket的url
     mqttUrl: '', //无人机的mqtt地址
     mqttUrlHangar: '',  //机库的mqtt地址
+    mqttIP: '', //mqtt ip地址, 给于摇杆程序使用, 不支持域名
     mqttToken: '',  //mqtt token
     showAirwayEdit: false,  //展开航线编辑
   },
@@ -305,5 +307,6 @@ export default {
   modules: {
     uav,
     hangar,
+    joystick
   },
 };

src/components/MMCFlightControlCenter/store/joystick.js

+const state = {
+  throttleValue: 0, //油门值
+};
+
+const mutations = {
+  /**
+   * 单纯的给state赋值
+   * @param {*} param0
+   * @param {*} data {key: '', value}
+   */
+  setState(state, data) {
+    try {
+      state[data.key] = data.value;
+    } catch (e) {
+      console.log("setDate err", e);
+    }
+  },
+};
+
+const actions = {};
+
+const getters = {
+  /**
+   * //油门是否置中
+   * @param {*} state 
+   * @returns 
+   */
+  isThrottleCenter(state){
+    if (state.throttleValue >= 470 && state.throttleValue <= 530) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+};
+
+export default {
+  namespaced: true,
+  name: "uav",
+  state,
+  mutations,
+  actions,
+  getters,
+};

src/components/MMCMount/MMC_Gimbal_Z60R/index.vue

@@ -681,14 +681,14 @@ export default {
           this.position = position;
           // 添加目标点
           if (!targetPoint && this.position) {
-            targetPoint = window.viewer.entities.add({
+            /* targetPoint = window.viewer.entities.add({
               position: new Cesium.CallbackProperty(() => this.position, false),
               billboard: {
                 image: svgMB,
                 width: 32,
                 height: 32,
               },
-            });
+            }); */
           }
         }
       } catch (error) {

src/components/MMCMount/MMC_Gimbal_ZT60R/index.vue

@@ -816,14 +816,14 @@ export default {
           this.position = position;
           // 添加目标点
           if (!targetPoint && this.position) {
-            targetPoint = window.viewer.entities.add({
+            /* targetPoint = window.viewer.entities.add({
               position: new Cesium.CallbackProperty(() => this.position, false),
               billboard: {
                 image: require("./mb.svg"),
                 width: 32,
                 height: 32,
               },
-            });
+            }); */
           }
         }
       } catch (error) {