gnss-tool-kit/src/render/page/DataMonitorPage.vue

<template>
  <full-screen-container>
    <TheHeader title="卫星数据监控平台" />

    <div class="main-content flex flex-1 flex-col">
      <DigitalFlopContainer ref="digitalFlopContainer" />

      <div class="block-left-right-content flex flex-1 mt-5">
        <div class="block-left-content w-1/5 flex flex-col">
          <div class="clock-content mb-2 flex-1">
            <Clock ref="clock" />
          </div>
          <div class="compass-content mb-2 flex-1">
            <Compass ref="compass" />
          </div>
          <div class="water-level-content flex-1">
            <WaterLevel ref="waterLevel" />
          </div>
        </div>
        <div class="block-right-content mx-2 flex flex-1">
          <Map ref="map" />
        </div>
        <div class="block-right-content w-1/5 flex flex-col py-2 px-2">
          <NMEAAnimation ref="nmeaAnimate" />
        </div>
        <div class="text-white fixed bottom-0 right-0">
          四大系统卫星运行状态监控系统V1.0
        </div>
      </div>
    </div>
  </full-screen-container>
</template>

<script lang="ts" setup>
import FullScreenContainer from "../components/Layout/FullScreenContainer.vue";
import TheHeader from "../components/Layout/TheHeader.vue";
import DigitalFlopContainer from "../components/DigitalFlopContainer.vue";
import Clock from "../components/Clock.vue";
import Compass from "../components/Compass.vue";
import WaterLevel from "../components/WaterLevel.vue";
import Map from "../components/Map.vue";
import NMEAAnimation from "../components/NMEAAnimation.vue";

import { ref, reactive, onMounted } from "vue";
import { Helpers } from "nmea";
import { getNMEAObj } from "../api/util";

const digitalFlopContainer = ref(null);
const clock = ref(null);
const compass = ref(null);
const waterLevel = ref(null);
const map = ref(null);
const nmeaAnimate = ref(null);
const deepmsg = ref(null);

const stagingObj = reactive({
  dataTime: null,
  longitude: NaN,
  latitude: NaN,
  alt: 0,
  variation: null,
  variationPole: null,
  numSat: 0,
});

const getDate = (date, timestamp) => {
  const year = date.substring(4);
  const month = date.substring(2, 4);
  const day = date.substring(0, 2);
  const hours = timestamp.substring(0, 2);
  const minutes = timestamp.substring(2, 4);
  const seconds = timestamp.substring(4, 6);
  const dateTimeStr = `20${year}-${month}-${day}T${hours}:${minutes}:${seconds}+00:00`;
  const dateTime = new Date(dateTimeStr);
  return dateTime;
};

const getMonitoringData = (nmeaStr: string) => {
  const nmeaObj: any = getNMEAObj(nmeaStr);
  // console.log(nmeaObj, "================");
  if (!nmeaObj || !nmeaObj.RMC || !nmeaObj.GGA) return null;

  const { RMC, GGA } = nmeaObj;
  // 日期，时间，磁偏角，磁偏角方向
  const { date, timestamp, variation, variationPole } = RMC;
  // 经度，经度方向，纬度，纬度方向，海拔，用于定位的卫星数目
  const { lon, lonPole, lat, latPole, alt, numSat } = GGA;

  const dateTime = getDate(date, timestamp);

  const longitude = Helpers.parseLongitude(lon, lonPole);
  const latitude = Helpers.parseLatitude(lat, latPole);

  return { dateTime, longitude, latitude, alt, variation, variationPole, numSat };
};

const update = (nmeaStr: string) => {
  const data: any = getMonitoringData(nmeaStr);
  if (!data) return;

  const { dateTime, longitude, latitude, alt, variation, variationPole, numSat } = data;
  if (longitude != NaN && latitude != NaN && longitude != "NaN" && latitude != "NaN") {
    stagingObj.dateTime = dateTime;
    stagingObj.longitude = longitude;
    stagingObj.latitude = latitude;
    stagingObj.alt = alt;
    stagingObj.variation = variation;
    stagingObj.variationPole = variationPole;
    stagingObj.numSat = numSat;
  } else {
    stagingObj.dateTime = new Date();
  }
  digitalFlopContainer.value.update(
    stagingObj.dateTime,
    stagingObj.longitude,
    stagingObj.latitude,
    stagingObj.alt,
    stagingObj.numSat
  );
  clock.value.update(stagingObj.dateTime);
  compass.value.update(stagingObj.variation, stagingObj.variationPole);
  waterLevel.value.update(stagingObj.alt);
  map.value.update(stagingObj.longitude, stagingObj.latitude, deepmsg.value);
};

const nmeaAnmiation = async (nmeaOrigin: string) => {
  nmeaAnimate.value.update(nmeaOrigin);
};

const deepset = (deepArr: Array<string | boolean>) => {
  deepmsg.value = deepArr;
};

onMounted(() => {
  if ("ipcRenderer" in window) {
    ipcRenderer.receive("deep", deepset);
    ipcRenderer.receive("nmea", update);
    ipcRenderer.receive("NMEA_RECEIVED", nmeaAnmiation);
    ipcRenderer.send("APP_MOUNTED");
  }
});
</script>

<style scoped>
.clock-content,
.compass-content,
.water-level-content,
.block-right-content {
  background-color: rgba(6, 30, 93, 0.5);
}
.animationText {
  font-size: 0.5rem;
  line-height: 1rem;
}
</style>