优化显示效果，修复GSA语句卫星系统标识错误的BUG，添加软件关闭功能

src/main/api/NMEAHandler.js

@@ -21,6 +21,10 @@ const emit         = (eventName, ...args) => {
   });
 }
 
+const includes = (arr1, arr2) => {
+  return arr2.every(val => arr1.includes(val));
+}
+
 const handle       = (value) => {
   if (value.length <= 0) return
 
@@ -32,6 +36,30 @@ const handle       = (value) => {
     doHandle(element)
   }
   
+  nmeaObj.GSA.forEach(element => {
+    let nmeaCache = {
+      GB:{talker_id:'GB',satellites:[]},
+      GP:{talker_id:'GP',satellites:[]},
+      GL:{talker_id:'GL',satellites:[]},
+      GA:{talker_id:'GA',satellites:[]},
+      GQ:{talker_id:'GQ',satellites:[]}
+    };
+    nmeaObj.GSV.forEach(item => {
+      if(item.talker_id == nmeaCache[item.talker_id].talker_id){
+        item.satellites.forEach(index => {
+          nmeaCache[item.talker_id].satellites.push(Number(index.id));
+        });
+      }
+    });
+    for (const key in nmeaCache) {
+      const nmeaValue = nmeaCache[key];
+      if(includes(nmeaValue.satellites,element.satellites)){
+        element.talker_id = nmeaValue.talker_id;
+      }
+    }
+    nmeaCache = null;
+  });
+  
   emit('handled', nmeaObj)
   nmeaObj = resetNMEAObj()
 }

src/main/app.ts

@@ -67,6 +67,8 @@ async function checkLaunchEnv() {
   }
 }
 
+var windows:Array<BrowserWindow> = [];
+
 function createWindow(page: string, display: any) {
   const win = new BrowserWindow({
     fullscreen: true,
@@ -94,6 +96,9 @@ function createWindow(page: string, display: any) {
   } else {
     win.loadFile(`dist/render/${page}.html`)
   }
+
+  windows.push(win);
+  return win;
 }
 
 const sleep = (timeout:number) => {
@@ -128,6 +133,29 @@ async function launch() {
   globalShortcut.register('F11', () => { return })
 }
 
+ipcMain.on('CLOSE', (event) => {
+  const res = dialog.showMessageBox({
+    type: 'warning',
+    title: '警告',
+    message: '确定要关闭软件吗?',
+    detail: '关闭软件',
+    cancelId: 1, // 按esc默认点击索引按钮
+    defaultId: 0, // 默认高亮的按钮下标
+    buttons: ['确认', '取消'], // 按钮按索引从右往左排序
+  })
+  
+  res.then((data)=>{
+    if(data.response == 0){
+      windows.forEach((key:BrowserWindow) => {
+        key.close();
+      });
+      windows = [];
+    }else{
+      console.log('not close software')
+    }
+  })
+})
+
 async function main() {
   // 异步代码
   const checkReault: any = await checkLaunchEnv()

src/render/components/Layout/TheHeader.vue

@@ -3,7 +3,7 @@
 		<Decoration8 class="w-1/4 h-16" />
 		<Decoration5 class="w-2/5 h-16 mt-12" />
 		<Decoration8 class="w-1/4 h-16" :reverse="true" />
-    <div class="absolute left-1/2 transform -translate-x-2/4 text-3xl font-bold top-8 text-white">{{ title }}</div>
+    <div @dblclick="close" class="absolute left-1/2 transform -translate-x-2/4 text-3xl font-bold top-8 text-white">{{ title }}</div>
 	</div>
 </template>
 
@@ -11,6 +11,10 @@
 import Decoration5 from './Decoration5.vue'
 import Decoration8 from './Decoration8.vue'
 
+const close = () => {
+  window.ipcRenderer.send('CLOSE')
+}
+
 defineProps({
 	title: String
 })

src/render/components/NMEAAnimation.vue

@@ -0,0 +1,82 @@
+<template>
+  <div id="animationList" class="animationText mb-2"></div>
+  <div id="newnmeaList" class="animationText"></div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+
+const animationValue = ref("");
+const colorId = ref(0);
+
+var nmeaList;
+var newList;
+
+const animate = (options) => {
+  var start = performance.now();
+
+  requestAnimationFrame(function animate(time) {
+    // timeFraction 的值从 0 到 1 变化
+    var timeFraction = (time - start) / options.duration;
+    if (timeFraction > 1) timeFraction = 1;
+
+    // 动画的当前状态
+    var progress = options.timing(timeFraction);
+
+    options.draw(progress);
+
+    if (timeFraction < 1) {
+      requestAnimationFrame(animate);
+    }
+  });
+};
+
+const add = (timeFraction) => {
+  return 1 - Math.sin(Math.acos(timeFraction));
+};
+
+const animateText = (nmeaNode, nmeaMsg) => {
+  let text = nmeaMsg,
+    textArr = text.split("\r\n"),
+    showText = textArr.slice(0, 20).join("\r\n"),
+    to = showText.length;
+
+  animate({
+    duration: 1000,
+    timing: add,
+    draw: function (progress) {
+      nmeaNode.innerText = text.substr(0, to * progress);
+    },
+  });
+};
+
+let colorPie = ["#DAE3F3", "#FBE5D6", "#EDEDED", "#FFF2CC", "#DEEBF7", "#E2F0D9"];
+
+const update = async (nmeaOrigin) => {
+  if (nmeaOrigin != undefined) {
+    nmeaList.innerText = animationValue.value;
+    nmeaList.style.color = colorPie[colorId.value];
+    animateText(newList, nmeaOrigin);
+    colorId.value++;
+    if (colorId.value == 6) {
+      colorId.value = 0;
+    }
+    newList.style.color = colorPie[colorId.value];
+    animationValue.value = nmeaOrigin;
+  }
+};
+
+defineExpose({ update });
+
+onMounted(() => {
+  nmeaList = document.getElementById("animationList");
+  newList = document.getElementById("newnmeaList");
+});
+</script>
+
+<style scoped>
+.animationText {
+  font-size: 0.5rem;
+  line-height: 1rem;
+}
+</style>

src/render/components/SNRView.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="w-h-full">
+  <div :id="myid" class="w-h-full">
     <v-chart :option="option" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive } from "vue";
+import { reactive, onMounted } from "vue";
 import { use, graphic } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { BarChart } from "echarts/charts";
@@ -18,9 +18,17 @@ use([CanvasRenderer, BarChart, TitleComponent, GridComponent, DataZoomComponent]
 const props = defineProps({
   title: String,
   color: String,
+  myid:  String
 });
+
+onMounted(() => {
+  var mychart = document.getElementById(props.myid);
+  mychart.firstChild.firstChild.firstChild.style.margin = "auto";
+});
+
 let LinearStart!: string;
 let LinearEnd!: string;
+
 switch (props.color) {
   case "rgb(255,50,50)":
     LinearStart = "#ffc864";
@@ -109,7 +117,8 @@ const option = reactive({
       itemStyle: {
         barBorderRadius: [50, 50, 0, 0],
         color: function ({ value }) {
-          return !value || value[1] === 0 ? UN_POSITIONING_COLOR : IN_POSITIONING_COLOR;
+          // return !value || value[1] === 0 ? UN_POSITIONING_COLOR : IN_POSITIONING_COLOR;
+          return !value || value[2] ? IN_POSITIONING_COLOR : UN_POSITIONING_COLOR;
         },
         shadowColor: props.color,
         shadowBlur: 6,

src/render/page/DataMonitorPage.vue

@@ -21,10 +21,7 @@
           <Map ref="map" />
         </div>
         <div class="block-right-content w-1/5 flex flex-col py-2 px-2">
-        <div id="animationList" class="animationText mb-2">
+          <NMEAAnimation ref="nmeaAnimate" />
-        </div>
-        <div id="newnmeaList" class="animationText">
-        </div>
         </div>
       </div>
     </div>
@@ -39,6 +36,7 @@ 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";
@@ -49,9 +47,9 @@ 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 animationValue = ref('');
+
-const colorId = ref(0);
 const stagingObj = reactive({
   dataTime: null,
   longitude: NaN,
@@ -119,64 +117,11 @@ const update = (nmeaStr: string) => {
   clock.value.update(stagingObj.dateTime);
   compass.value.update(stagingObj.variation, stagingObj.variationPole);
   waterLevel.value.update(stagingObj.alt);
-  console.log(deepmsg.value);
   map.value.update(stagingObj.longitude, stagingObj.latitude, deepmsg.value);
 };
 
-var nmeaList;
-var newList;
-
-const animate = (options) => {
-  var start = performance.now();
-
-  requestAnimationFrame(function animate(time) {
-    // timeFraction 的值从 0 到 1 变化
-    var timeFraction = (time - start) / options.duration;
-    if (timeFraction > 1) timeFraction = 1;
-
-    // 动画的当前状态
-    var progress = options.timing(timeFraction);
-
-    options.draw(progress);
-
-    if (timeFraction < 1) {
-      requestAnimationFrame(animate);
-    }
-  });
-};
-
-const add = (timeFraction) => {
-  return 1 - Math.sin(Math.acos(timeFraction));
-};
-
-const animateText = (nmeaNode, nmeaMsg) => {
-  let text = nmeaMsg,
-  textArr = text.split("\r\n"),
-  showText = textArr.slice(0,20).join("\r\n"),
-  to = showText.length;
-
-  animate({
-    duration: 1000,
-    timing: add,
-    draw: function (progress) {
-      nmeaNode.innerText = text.substr(0, to*progress);
-    },
-  });
-};
-
-let colorPie = ['#DAE3F3','#FBE5D6','#EDEDED','#FFF2CC','#DEEBF7','#E2F0D9'];
 const nmeaAnmiation = async (nmeaOrigin: string) => {
-  if (nmeaOrigin != undefined) {
+  nmeaAnimate.value.update(nmeaOrigin);
-    nmeaList.innerText = animationValue.value;
-    nmeaList.style.color = colorPie[colorId.value];
-    animateText(newList, nmeaOrigin);
-    colorId.value++;
-    if(colorId.value == 6){
-      colorId.value = 0;
-    }
-    newList.style.color = colorPie[colorId.value];
-    animationValue.value = nmeaOrigin;
-  }
 };
 
 const deepset = (deepArr: Array<string | boolean>) => {
@@ -188,11 +133,8 @@ onMounted(() => {
     ipcRenderer.receive("deep", deepset);
     ipcRenderer.receive("nmea", update);
     ipcRenderer.receive("NMEA_RECEIVED", nmeaAnmiation);
-
     ipcRenderer.send("APP_MOUNTED");
   }
-  nmeaList = document.getElementById("animationList");
-  newList = document.getElementById("newnmeaList");
 });
 </script>
 

src/render/page/SignalMonitorPage.vue

@@ -4,16 +4,16 @@
 
     <div class="main-content flex-1 grid grid-cols-2 grid-rows-2">
       <div class="w-11/12 justify-self-end">
-        <SNRView ref="BDSNRView" color="rgb(255,50,50)" title="北斗" />
+        <SNRView ref="BDSNRView" color="rgb(255,50,50)" myid="bdBar" title="北斗" />
       </div>
       <div class="w-11/12 justify-self-start">
-        <SNRView ref="GPSNRView" color="rgb(0,204,255)" title="GPS" />
+        <SNRView ref="GPSNRView" color="rgb(0,204,255)" myid="gpsBar" title="GPS" />
       </div>
       <div class="w-11/12 justify-self-end">
-        <SNRView ref="GLSNRView" color="rgb(102,0,255)" title="GLONASS" />
+        <SNRView ref="GLSNRView" color="rgb(102,0,255)" myid="glonassBar" title="GLONASS" />
       </div>
       <div class="w-11/12 justify-self-start">
-        <SNRView ref="GASNRView" color="rgb(0,204,102)" title="Galileo" />
+        <SNRView ref="GASNRView" color="rgb(0,204,102)" myid="galileoBar" title="Galileo" />
       </div>
     </div>
   </full-screen-container>
@@ -42,6 +42,14 @@ const update = (nmeaStr: string) => {
   const lineMax=bd_gp_satellite_count>gl_ga_satellite_count?bd_gp_satellite_count:gl_ga_satellite_count
   
   // TODO: 找到bdgsv语句有7条的原因以及gsa语句配置talker_id为各个卫星导航系统自己的名字
+
+  // 粗细不一致，x轴长度以各数据条目自身为准
+  // BDSNRView.value.update(bd.GSVArr, bd.GSAArr, getSatelliteCount(bd.GSVArr))
+  // GPSNRView.value.update(gp.GSVArr, gp.GSAArr, getSatelliteCount(gp.GSVArr))
+  // GLSNRView.value.update(gl.GSVArr, gl.GSAArr, getSatelliteCount(gl.GSVArr))
+  // GASNRView.value.update(ga.GSVArr, ga.GSAArr, getSatelliteCount(ga.GSVArr))
+
+  // 粗细一致，x轴长度以数据最多的条目为准
   BDSNRView.value.update(bd.GSVArr, bd.GSAArr, lineMax)
   GPSNRView.value.update(gp.GSVArr, gp.GSAArr, lineMax)
   GLSNRView.value.update(gl.GSVArr, gl.GSAArr, lineMax)

src/render/page/StateMonitorPage.vue

@@ -7,13 +7,13 @@
         <PlanisphereView ref="BDPlanisphereView" color="rgb(255,50,50)" title="北斗" baseUrl="beidou" />
       </div>
       <div class="w-5/6 justify-self-start">
-        <PlanisphereView ref="GPPlanisphereView" color="rgb(10,40,100)" title="GPS" baseUrl="gps" />
+        <PlanisphereView ref="GPPlanisphereView" color="rgb(0,204,255)" title="GPS" baseUrl="gps" />
       </div>
       <div class="w-5/6 justify-self-end">
-        <PlanisphereView ref="GLPlanisphereView" color="rgb(10,60,170)" title="GLONASS" baseUrl="glonass" />
+        <PlanisphereView ref="GLPlanisphereView" color="rgb(102,0,255)" title="GLONASS" baseUrl="glonass" />
       </div>
       <div class="w-5/6 justify-self-start">
-        <PlanisphereView ref="GAPlanisphereView" color="rgb(10,60,160)" title="Galileo" baseUrl="galileo" />
+        <PlanisphereView ref="GAPlanisphereView" color="rgb(0,204,102)" title="Galileo" baseUrl="galileo" />
       </div>
     </div>
   </full-screen-container>