显示效果全面优化

package.json

@@ -9,16 +9,18 @@
     "build": "vite build",
     "serve": "vite preview",
     "electron:dev": "cross-env NODE_ENV=development electron index.js",
-    "electron:build": "rimraf dist && vite build && tsc -p tsconfig.electron.json && electron-builder"
+    "electron:build": "rimraf dist && vite build && tsc -p tsconfig.electron.json && electron-builder",
+    "fix-memory-limit": "cross-env LIMIT=10000 increase-memory-limit"
   },
   "dependencies": {
-    "echarts": "^5.2.2",
+    "echarts": "^5.4.1",
+    "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "electron-store": "^8.0.1",
     "nmea": "http://git.hwasmart.com/bd_group/node-nmea.git",
-    "serialport": "9.2.4",
+    "serialport": "10.5.0",
     "vue": "^3.0.5",
-    "vue-echarts": "^6.0.0"
+    "vue-echarts": "^6.6.9"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.1.5",

src/main/app.ts

@@ -116,11 +116,11 @@ async function launch() {
       createWindow('satellite-state-monitor-platform', displays[0])
   } else {
     createWindow('satellite-data-monitor-platform', displays[0])
-    await sleep(100);
-    createWindow('satellite-info-monitor-platform', displays[1])
     await sleep(200);
+    createWindow('satellite-info-monitor-platform', displays[1])
+    await sleep(400);
     createWindow('satellite-signal-monitor-platform', displays[2])
-    await sleep(300);
+    await sleep(600);
     createWindow('satellite-state-monitor-platform', displays[3])
   }
 

src/main/load-serialport.js

@@ -1,6 +1,6 @@
 const { ipcMain } = require('electron')
-const SerialPort  = require('serialport')
+const { SerialPort } = require("serialport")
-const InterByteTimeout = require('@serialport/parser-inter-byte-timeout')
+const { InterByteTimeoutParser } = require('@serialport/parser-inter-byte-timeout')
 const config      = require('./config')
 
 const NMEAHandler = require('./api/NMEAHandler')
@@ -52,9 +52,13 @@ SerialPort.list().then((ports, err) => {
   try {
     const { path, baudRate } = getSerialPortConstructorArguments(ports)
     console.log(path, baudRate, '=====================')
-    const serialPort = new SerialPort(path, { baudRate })
+    const serialPort = new SerialPort({ path, baudRate })
 
-    const parser     = serialPort.pipe(new InterByteTimeout({interval: 30}))
+    const parser     = serialPort.pipe(new InterByteTimeoutParser({interval: 30}))
+
+    NMEAHandler.on('received' , (nmeaStr) => {
+      sendMsg('NMEA_RECEIVED', nmeaStr)
+    })
 
     NMEAHandler.on('handled' , (nmeaObj) => {
       sendMsg('nmea', JSON.stringify(nmeaObj))

src/render/assets/geojson/geo.js

@@ -19,15 +19,15 @@ import { city as city_full } from "./city/citygeo_full"
 import { city as city_geo } from "./city/citygeo"
 
 export function intersect(checkPoint, polygonPoints) {
-    for (let j = 0; j < polygonPoints.features.length; j++) {
+    for (let j = 0; j < polygonPoints.features.length-1; j++) {
         var counter = 0;
         var i;
         var xinters;
         var p1, p2;
-        var pointCount = polygonPoints.features[j].geometry.coordinates[0][0].length;
+        var pointCount = polygonPoints.features[j].properties.name == "内蒙古自治区" ? polygonPoints.features[j].geometry.coordinates[0].length : polygonPoints.features[j].geometry.coordinates[0][0].length;
-        p1 = polygonPoints.features[j].geometry.coordinates[0][0][0];
+        p1 = polygonPoints.features[j].properties.name == "内蒙古自治区" ? polygonPoints.features[j].geometry.coordinates[0][0] : polygonPoints.features[j].geometry.coordinates[0][0][0];
         for (i = 1; i <= pointCount; i++) {
-            p2 = polygonPoints.features[j].geometry.coordinates[0][0][i % pointCount];
+            p2 = polygonPoints.features[j].properties.name == "内蒙古自治区" ? polygonPoints.features[j].geometry.coordinates[0][i % pointCount] : polygonPoints.features[j].geometry.coordinates[0][0][i % pointCount];
             if (
                 checkPoint[0] > Math.min(p1[0], p2[0]) &&
                 checkPoint[0] <= Math.max(p1[0], p2[0])
@@ -48,7 +48,7 @@ export function intersect(checkPoint, polygonPoints) {
             p1 = p2;
         }
         if (counter % 2 == 0) {
-            console.log(polygonPoints.features[j].properties.name)
+            console.log(counter)
         } else {
             return polygonPoints.features[j].properties.name;
         }

src/render/components/CenterCmp.vue

@@ -18,23 +18,23 @@
     <div class="cc-main-container">
       <div class="ccmc-left">
         <div class="station-info">
-          <span>　北　斗 {{ bd_satellite_count }}</span>
+          <span id="fontBd" style="text-shadow:0 0 0.5em #ff3232;">　北　斗 {{ bd_satellite_count }}</span>
         </div>
         <div class="station-info">
-          <span>Galileo {{ ga_satellite_count }}</span>
+          <span id="fontGl" style="text-shadow:0 0 0.5em #6600ff;">GLONASS {{ gl_satellite_count }}</span>
         </div>
       </div>
 
       <div class="ccmc-middle">
-        <Ring ref="ring"/>
+        <Ring ref="ring" @changeColor="changeColor"/>
       </div>
 
       <div class="ccmc-right">
         <div class="station-info">
-          <span>{{ gp_satellite_count }} G P S</span>
+          <span id="fontGp" style="text-shadow:0 0 0.5em #00ffff;">{{ gp_satellite_count }} G P S</span>
         </div>
         <div class="station-info">
-          <span>{{ gl_satellite_count }} GLONASS</span>
+          <span id="fontGa" style="text-shadow:0 0 0.5em #00ff66;">{{ ga_satellite_count }} Galileo</span>
         </div>
       </div>
     </div>
@@ -45,7 +45,7 @@
 import Ring from './Ring.vue'
 import Decoration1 from './Layout/Decoration1.vue'
 
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 
 const bd_satellite_count = ref(0)
 const gp_satellite_count = ref(0)
@@ -66,6 +66,28 @@ const update = (bd_satellite_length: number, gp_satellite_length: number, gl_sat
   ring.value.update(bd_satellite_length, gp_satellite_length, gl_satellite_length, ga_satellite_length)
 }
 
+let bdText, glText, gpText, gaText;
+
+onMounted(() => {
+  bdText = document.getElementById("fontBd");
+  gpText = document.getElementById("fontGp");
+  glText = document.getElementById("fontGl");
+  gaText = document.getElementById("fontGa");
+});
+
+
+const changeColor = (change, id) => {
+  let idPie = [bdText, gpText, glText, gaText];
+  let colorPie = ['#ff3232', '#00ffff', '#6600ff', '#00ff66'];
+  if(change){
+    idPie[id].style.color = colorPie[id];
+  }else{
+    idPie.forEach(element => {
+      element.style.color = "#ffffff";
+    });
+  }
+} 
+
 defineExpose({ update })
 </script>
 

src/render/components/Clock.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chart :option="option" />
+  <v-chart id="myClock" :option="option" />
 </template>
 
 <script lang="ts" setup>
@@ -9,7 +9,7 @@ import { TitleComponent } from "echarts/components";
 import { GaugeChart } from "echarts/charts";
 
 import VChart from "vue-echarts";
-import { reactive } from "vue";
+import { reactive, onMounted } from "vue";
 
 use([
   CanvasRenderer,
@@ -17,6 +17,11 @@ use([
   GaugeChart
 ]);
 
+onMounted(() => {
+  var mychart = document.getElementById("myClock");
+  mychart.firstChild.style.margin = "auto";
+});
+
 // TODO: 修复指针转过一圈之后反向旋转的bug
 const option = reactive({
   title: {

src/render/components/Compass.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chart :option="option" />
+  <v-chart id="myCompass" :option="option" />
 </template>
 
 <script lang="ts" setup>
@@ -9,7 +9,7 @@ import { TitleComponent } from "echarts/components";
 import { GaugeChart } from "echarts/charts";
 
 import VChart from "vue-echarts";
-import { reactive } from "vue";
+import { reactive, onMounted } from "vue";
 
 use([
   CanvasRenderer,
@@ -17,6 +17,11 @@ use([
   GaugeChart
 ]);
 
+onMounted(() => {
+  var mychart = document.getElementById("myCompass");
+  mychart.firstChild.style.margin = "auto";
+});
+
 const option = reactive({
   title: {
     text: '航向',

src/render/components/Map.vue

@@ -1,9 +1,9 @@
 <template>
-  <v-chart class="chart w-h-full" :option="option" />
+  <v-chart id="myMap" class="chart w-h-full" :option="option" />
 </template>
 
 <script lang="ts" setup>
-import { reactive } from 'vue'
+import { reactive, onMounted } from 'vue'
 import { use, registerMap } from "echarts/core";
 import { CanvasRenderer } from 'echarts/renderers'
 import { MapChart, ScatterChart } from 'echarts/charts';
@@ -14,6 +14,11 @@ import { intersect, findMap } from "../assets/geojson/geo.js";
 
 use([ CanvasRenderer, MapChart, ScatterChart ]);
 
+onMounted(() => {
+  var mychart = document.getElementById("myMap");
+  mychart.firstChild.style.margin = "auto";
+});
+
 registerMap('nowin', fullMap);
 
 const option = reactive({
@@ -98,13 +103,13 @@ const option = reactive({
 });
 
 const update = (longitude: number, latitude: number, deepset:Array<string|boolean>) => {
-  option.series[0].data[0] = [longitude, latitude]
+  option.series[0].data[0] = [longitude, latitude];
-  let nowpoint = [longitude, latitude]
+  let nowpoint = [longitude, latitude];
-  let nowMap = intersect(nowpoint,fullMap)
+  let nowMap = intersect(nowpoint,fullMap);
-  let findit = findMap(nowpoint,nowMap,deepset)
+  let findit = findMap(nowpoint,nowMap,deepset);
-  registerMap('nowMap', findit)
+  registerMap('nowMap', findit);
-  option.geo[0].map = 'nowMap'
+  option.geo[0].map = 'nowMap';
-  option.geo[1].map = 'nowMap'
+  option.geo[1].map = 'nowMap';
 }
 
 defineExpose({ update })

src/render/components/PlanisphereView.vue

@@ -7,60 +7,77 @@ import { reactive } from "vue";
 import { use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { ScatterChart } from "echarts/charts";
-import {
+import { TitleComponent, PolarComponent } from "echarts/components";
-  TitleComponent,
-  PolarComponent
-} from "echarts/components";
 import VChart from "vue-echarts";
-import { get_in_positioning_id } from '../api/util'
+import { get_in_positioning_id } from "../api/util";
 
-use([
+import beidouImg from "../assets/img/beidou.png";
-  CanvasRenderer,
+import gpsImg from "../assets/img/gps.png";
-    ScatterChart,
+import glonassImg from "../assets/img/glonass.png";
-    TitleComponent,
+import galileoImg from "../assets/img/galileo.png";
-    PolarComponent
+import unbeidouImg from "../assets/img/unbeidou.png";
-]);
+import ungpsImg from "../assets/img/ungps.png";
+import unglonassImg from "../assets/img/unglonass.png";
+import ungalileoImg from "../assets/img/ungalileo.png";
+
+var baseImg = {
+  beidou: beidouImg,
+  gps: gpsImg,
+  glonass: glonassImg,
+  galileo: galileoImg,
+  unbeidou: unbeidouImg,
+  ungps: ungpsImg,
+  unglonass: unglonassImg,
+  ungalileo: ungalileoImg,
+};
+
+use([CanvasRenderer, ScatterChart, TitleComponent, PolarComponent]);
 
 const props = defineProps({
   title: String,
-  color: String
+  color: String,
-})
+  baseUrl: String,
+});
 
 const option = reactive({
   title: {
     text: props.title,
-    left: 'center',
+    left: "center",
     textStyle: {
-      color: 'white',
+      color: "white",
-      fontSize:28,
+      fontSize: 28,
       textBorderColor: props.color,
       textBorderWidth: 2,
       textShadowColor: props.color,
       textShadowBlur: 12,
-    }
     },
+  },
+  animation: false,
   polar: {
-    radius: '72%'
+    radius: "72%",
   },
   angleAxis: {
     min: 0,
     max: 360,
     interval: 45,
     axisTick: {
-      show: false
+      show: false,
     },
     axisLabel: {
       fontSize: 24,
       formatter: function (value: number) {
-        switch (value)
+        switch (value) {
-        {
+          case 0:
-          case 0	 : return '北';
+            return "北";
-          case 90	 : return '东';
+          case 90:
-          case 180 : return '南';
+            return "东";
-          case 270 : return '西';
+          case 180:
+            return "南";
+          case 270:
+            return "西";
         }
       },
-    }
+    },
   },
   radiusAxis: {
     min: -90,
@@ -70,83 +87,174 @@ const option = reactive({
       rotate: -25,
       showMinLabel: false,
       showMaxLabel: false,
-      verticalAlign: 'bottom',
+      verticalAlign: "bottom",
-      formatter: function(value: number){
+      formatter: function (value: number) {
-        return Math.abs(value)
+        return Math.abs(value);
       },
-    }
     },
-  series: [{
+  },
-    nmea: 'un-positioning',
+  series: [
-    coordinateSystem: 'polar',
+    {
-    type: 'scatter',
+      nmea: "un-positioning",
+      coordinateSystem: "polar",
+      type: "scatter",
       symbolSize: 32,
+      symbol: "image://" + baseImg[props.baseUrl],
       label: {
         show: true,
-      color: 'white',
+        color: "white",
         fontSize: 14,
-      textBorderColor: ({ data } : any) => data[3] > 0 ? props.color : '#ccc',
+        offset: [0,30],
+        textBorderColor: props.color,
         textBorderWidth: 2,
-      formatter: '{@[2]}'
+        formatter: "{@[2]}",
       },
       itemStyle: {
-      color: ({ data } : any) => data[3] > 0 ? props.color : '#ccc',
+        color: props.color,
-      borderColor: ({ data } : any) => data[3] > 0 ? 'red' : '#ccc',
+        borderColor: props.color,
-      borderWidth: ({ data } : any) => data[3] > 0 ? 2 : 0,
+        borderWidth: 2,
-      shadowColor: ({ data } : any) => data[3] > 0 ? 'red' : '#ccc',
+        shadowColor: props.color,
-      shadowBlur: ({ data } : any) => data[3] > 0 ? 6 : 0,
+        shadowBlur: 6,
       },
-  }, {
+    },
-    nmea: 'in-positioning',
+    {
-    coordinateSystem: 'polar',
+      nmea: "un-positioning-un",
-    type: 'scatter',
+      coordinateSystem: "polar",
+      type: "scatter",
       symbolSize: 32,
+      symbol: "image://" + baseImg["un" + props.baseUrl],
       label: {
         show: true,
-      color: 'white',
+        color: "white",
-      formatter: '{@[2]}'
+        fontSize: 14,
+        offset: [0,30],
+        textBorderColor: "#ccc",
+        textBorderWidth: 2,
+        formatter: "{@[2]}",
       },
       itemStyle: {
-      color: ({ data } : any) => data[3] > 0 ? props.color : '#ccc'
+        color: "#ccc",
+        borderColor: "#ccc",
+        borderWidth: 0,
+        shadowColor: "#ccc",
+        shadowBlur: 0,
       },
-  }]
+    },
-})
+    {
+      nmea: "in-positioning",
+      coordinateSystem: "polar",
+      type: "scatter",
+      symbolSize: 32,
+      symbol: "image://" + baseImg[props.baseUrl],
+      label: {
+        show: true,
+        color: "white",
+        fontSize: 14,
+        offset: [0,30],
+        textBorderColor: props.color,
+        textBorderWidth: 2,
+        formatter: "{@[2]}",
+      },
+      itemStyle: {
+        color: props.color,
+        borderColor: props.color,
+        borderWidth: 2,
+        shadowColor: props.color,
+        shadowBlur: 6,
+      },
+    },
+    {
+      nmea: "in-positioning-un",
+      coordinateSystem: "polar",
+      type: "scatter",
+      symbolSize: 32,
+      symbol: "image://" + baseImg["un" + props.baseUrl],
+      label: {
+        show: true,
+        color: "white",
+        fontSize: 14,
+        offset: [0,30],
+        textBorderColor: "#ccc",
+        textBorderWidth: 2,
+        formatter: "{@[2]}",
+      },
+      itemStyle: {
+        color: "#ccc",
+        borderColor: "#ccc",
+        borderWidth: 0,
+        shadowColor: "#ccc",
+        shadowBlur: 0,
+      },
+    },
+  ],
+});
 
 const update = (GSVArr: Array<any>, GSAArr: Array<any>) => {
-  const planisphereOption: any = getPlanisphereOption(GSVArr, GSAArr)
+  const planisphereOption: any = getPlanisphereOption(GSVArr, GSAArr);
-    if (!planisphereOption) return
+  if (!planisphereOption) return;
 
-    Object.assign(option, planisphereOption)
+  Object.assign(option, planisphereOption);
-}
+};
 const getPlanisphereOption = (GSVArr: Array<any>, GSAArr: Array<any>) => {
   try {
     let in_positioning_data: Array<any> = [],
-        un_positioning_data: Array<any> = []
+      in_positioning_undata: Array<any> = [],
-    const in_positioning_id = get_in_positioning_id(GSAArr)
+      un_positioning_data: Array<any> = [],
+      un_positioning_undata: Array<any> = [];
+    const in_positioning_id = get_in_positioning_id(GSAArr);
 
     GSVArr.forEach(({ satellites }) => {
       satellites.forEach(({ id, elevationDeg, azimuthTrue, SNRdB }) => {
         if (in_positioning_id.indexOf(parseInt(id)) < 0) {
-          un_positioning_data.push([parseInt(elevationDeg) * -1, azimuthTrue, id, SNRdB])
+          if (SNRdB > 0) {
+            un_positioning_data.push([
+              parseInt(elevationDeg) * -1,
+              azimuthTrue,
+              id,
+              SNRdB,
+            ]);
           } else {
-          in_positioning_data.push([parseInt(elevationDeg) * -1, azimuthTrue, id, SNRdB])
+            un_positioning_undata.push([
+              parseInt(elevationDeg) * -1,
+              azimuthTrue,
+              id,
+              SNRdB,
+            ]);
+          }
+        } else {
+          if (SNRdB > 0) {
+            in_positioning_data.push([
+              parseInt(elevationDeg) * -1,
+              azimuthTrue,
+              id,
+              SNRdB,
+            ]);
+          } else {
+            in_positioning_undata.push([
+              parseInt(elevationDeg) * -1,
+              azimuthTrue,
+              id,
+              SNRdB,
+            ]);
+          }
         }
       });
     });
 
     const planisphereOption = {
-      series: [{
+      series: [
-        data: un_positioning_data
+        { data: un_positioning_data },
-      }, {
+        { data: un_positioning_undata },
-        data: in_positioning_data
+        { data: in_positioning_data },
-      }]
+        { data: in_positioning_undata },
-    }
+      ],
+    };
 
-    return planisphereOption
+    return planisphereOption;
   } catch (error) {
     console.error(error);
   }
-}
+};
 
-defineExpose({ update })
+defineExpose({ update });
 </script>

src/render/components/Ring.vue

@@ -7,15 +7,97 @@ import { use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { LegendComponent } from "echarts/components";
 import { PieChart } from "echarts/charts";
+import "echarts-gl";
 
 import VChart from "vue-echarts";
 import { ref, reactive, onMounted } from "vue";
 
-use([
+use([CanvasRenderer, LegendComponent, PieChart]);
-  CanvasRenderer,
+
-  LegendComponent,
+const emit = defineEmits(['changeColor']);
-  PieChart
+
-]);
+const ring = ref(null);
+
+// 生成环形的曲面参数方程，用于 series-surface.parametricEquation
+const getParametricEquation = (
+  startRatio,
+  endRatio,
+  isSelected,
+  isHovered,
+  k,
+  height,
+  size
+) => {
+  // 计算
+  let midRatio = (startRatio + endRatio) / 2;
+
+  let startRadian = startRatio * Math.PI * 2;
+  let endRadian = endRatio * Math.PI * 2;
+  let midRadian = midRatio * Math.PI * 2;
+
+  // 如果只有一个环形，则不实现选中效果。
+  if (startRatio === 0 && endRatio === 1) {
+    isSelected = false;
+  }
+
+  // 通过环形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+  k = typeof k !== "undefined" ? k : 1 / 3;
+
+  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+  let offsetX = isSelected ? Math.cos(midRadian) * 0.2 : 0;
+  let offsetY = isSelected ? Math.sin(midRadian) * 0.2 : 0;
+  // 计算选中效果在 z 轴方向上的位移（未选中，位移均为 0）
+  let offsetZ = isSelected ? 0.15 : 0;
+  // 计算高亮效果的放大比例（未高亮，则比例为 1）
+  let hoverRate = isHovered ? size[0] : size[1];
+
+  // 返回曲面参数方程
+  return {
+    u: {
+      min: -Math.PI,
+      max: Math.PI * 3,
+      step: Math.PI / 32,
+    },
+
+    v: {
+      min: 0,
+      max: Math.PI * 2,
+      step: Math.PI / 20,
+    },
+
+    x: function (u, v) {
+      if (u < startRadian) {
+        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      if (u > endRadian) {
+        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    },
+
+    y: function (u, v) {
+      if (u < startRadian) {
+        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      if (u > endRadian) {
+        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+    },
+
+    z: function (u, v) {
+      if (u < -Math.PI * 0.5) {
+        return Math.sin(u);
+      }
+      if (u > Math.PI * 2.5) {
+        return Math.sin(u);
+      }
+      return Math.sin(v) > 0 ? 1 * height : -1;
+    },
+  };
+};
+
+const zeroEquation = getParametricEquation(0, 0, false, false, 1 / 2, 0, [0.8, 0.75]);
 
 const option = reactive({
   legend: {
@@ -26,20 +108,151 @@ const option = reactive({
   itemWidth: 35,
   itemHeight: 20,
   textStyle: {
-      color: 'white',
+    color: 'auto',
     fontSize: 16
   }
   },
-  color: ['#FF801C', '#F5FF46', '#00FE65', '#00FEFF', '#ffa800', '#ff5b00', '#ff3000'],
+  xAxis3D: {
+    min: -1,
+    max: 1,
+  },
+  yAxis3D: {
+    min: -1,
+    max: 1,
+  },
+  zAxis3D: {
+    min: -1,
+    max: 1,
+  },
+  grid3D: {
+    show: false,
+    boxHeight: 20, // 厚度
+    top: 0,
+    left: 0,
+    boxWidth: 100,
+    viewControl: {
+      //3d效果可以放大、旋转等，请自己去查看官方配置
+      alpha: 45, // 角度
+      beta: 135, // 环块开始位置角度
+      rotateSensitivity: 0,
+      zoomSensitivity: 0,
+      panSensitivity: 0,
+      autoRotate: false
+    },
+    light: {
+      main: {
+        color: "rgb(85, 84, 84)", // 主光源的颜色。
+        shadow: true, // 主光源是否投射阴影
+        alpha: 80, // 主光源绕 x 轴，即上下旋转的角度
+      },
+    },
+  },
   series: [
     {
+      name: "北  斗",
+      type: "surface",
+      parametric: true,
+      wireframe: {
+        show: false,
+      },
+      shading: "realistic",
+      itemStyle: {
+        color: "#ff3232",
+        opacity: 0.5,
+      },
+      pieData: {
+        name: "北  斗",
+        value: 0,
+        startRatio: 0,
+        endRatio: 0,
+      },
+      pieStatus: {
+        selected: false,
+        hovered: false,
+      },
+      parametricEquation: zeroEquation,
+    },
+    {
+      name: "G P S",
+      type: "surface",
+      parametric: true,
+      wireframe: {
+        show: false,
+      },
+      shading: "realistic",
+      itemStyle: {
+        color: "#00ffff",
+        opacity: 0.5,
+      },
+      pieData: {
+        name: "G P S",
+        value: 0,
+        startRatio: 0,
+        endRatio: 0,
+      },
+      pieStatus: {
+        selected: false,
+        hovered: false,
+      },
+      parametricEquation: zeroEquation,
+    },
+    {
+      name: "GLONASS",
+      type: "surface",
+      parametric: true,
+      wireframe: {
+        show: false,
+      },
+      shading: "realistic",
+      itemStyle: {
+        color: "#6600ff",
+        opacity: 0.5,
+      },
+      pieData: {
+        name: "GLONASS",
+        value: 0,
+        startRatio: 0,
+        endRatio: 0,
+      },
+      pieStatus: {
+        selected: false,
+        hovered: false,
+      },
+      parametricEquation: zeroEquation,
+    },
+    {
+      name: "Galileo",
+      type: "surface",
+      parametric: true,
+      wireframe: {
+        show: false,
+      },
+      shading: "realistic",
+      itemStyle: {
+        color: "#00ff66",
+        opacity: 0.5,
+      },
+      pieData: {
+        name: "Galileo",
+        value: 0,
+        startRatio: 0,
+        endRatio: 0,
+      },
+      pieStatus: {
+        selected: false,
+        hovered: false,
+      },
+      parametricEquation: zeroEquation,
+    },
+    {
+      color: ['#ff323200', '#00ffff00', '#6600ff00', '#00ff6600'],
       type: 'pie',
       radius: ['40%', '70%'],
       startAngle: 180,
       silent: true,
       label: {
         show: false,
-        position: 'center'
+        position: 'center',
       },
       emphasis: {
         scaleSize: 25,
@@ -48,7 +261,9 @@ const option = reactive({
           color: 'white',
           fontSize: '28',
           fontWeight: 'bold',
-          formatter: '{c}\n\n{b}'
+          formatter: '{c}\n\n{b}',
+          textBorderWidth: 1,
+          textShadowBlur: 24,
         }
       },
       labelLine: {
@@ -61,37 +276,84 @@ const option = reactive({
         { value: 0, name: 'Galileo' }
       ]
     }
-  ]
+  ],
 });
 
-const ring = ref(null)
+const getPie3D = (sumValue, pieValue, internalDiameterRatio, height, size) => {
-const COUNT = option.series[0].data.length
+  let startValue = 0;
-let highlightIndex = -1
+  let endValue = 0;
+  // internalDiameterRatio（0~1之间的浮点数）：内径/外径的值（默认值 1/2）
+  let k =
+    typeof internalDiameterRatio !== "undefined"
+      ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+      : 1 / 3;
+  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个环形。
+  for (let i = option.series.length - 2; i >= 0; i--) {
+    endValue = startValue + pieValue[i];
+    option.series[i].pieData.startRatio = startValue / sumValue;
+    option.series[i].pieData.endRatio = endValue / sumValue;
+    option.series[i].parametricEquation = getParametricEquation(
+      option.series[i].pieData.startRatio,
+      option.series[i].pieData.endRatio,
+      option.series[i].pieStatus.selected,
+      option.series[i].pieStatus.hovered,
+      k,
+      height,
+      size
+    );
+    startValue = endValue;
+  }
+};
+
+let highlightIndex = 0;
+let reset = false;
 const highlight = () => {
+  let colorPie = ['#ff3232', '#00ffff', '#6600ff', '#00ff66'];
+  reset = !reset;
+  for (let i = 0; i < option.series.length - 1; i++) {
+    option.series[i].itemStyle.opacity = 0.5;
+    option.series[i].pieStatus.selected = false;
+    option.series[i].pieStatus.hovered = false;
+    emit('changeColor',false);
     ring.value.dispatchAction({
       type: 'downplay',
-    dataIndex: highlightIndex
+      dataIndex: i
     })
-
+  }
-  highlightIndex++
+  if (reset) {
-  if (highlightIndex >= COUNT) highlightIndex = 0
+    option.series[highlightIndex].itemStyle.opacity = 1;
-  
+    option.series[highlightIndex].pieStatus.selected = true;
+    option.series[highlightIndex].pieStatus.hovered = true;
+    emit('changeColor',true,highlightIndex);
     ring.value.dispatchAction({
       type: 'highlight',
       dataIndex: highlightIndex
     })
-}
+    option.series[4].emphasis.label.color = colorPie[highlightIndex];
+    option.series[4].emphasis.label.textBorderColor = colorPie[highlightIndex];
+    option.series[4].emphasis.label.textShadowColor = colorPie[highlightIndex];
+    highlightIndex++;
+    if (highlightIndex >= option.series.length - 1) highlightIndex = 0;
+  }
+};
+
 onMounted(() => {
-  setInterval(highlight, 3000)
+  setInterval(highlight, 2500);
-})
+});
 
 const update = (bd_val: number, gp_val: number, gl_val: number, ga_val: number) => {
-  option.series[0].data[0].value = bd_val
+  option.series[0].pieData.value = bd_val;
-  option.series[0].data[1].value = gp_val
+  option.series[1].pieData.value = gp_val;
-  option.series[0].data[2].value = gl_val
+  option.series[2].pieData.value = gl_val;
-  option.series[0].data[3].value = ga_val
+  option.series[3].pieData.value = ga_val;
-}
+  option.series[4].data[0].value = bd_val;
+  option.series[4].data[1].value = gp_val;
+  option.series[4].data[2].value = gl_val;
+  option.series[4].data[3].value = ga_val;
+  let sum_val = bd_val + gp_val + gl_val + ga_val;
+  let pie_val = [bd_val, gp_val, gl_val, ga_val];
+  getPie3D(sum_val, pie_val, 7 / 10, 1, [0.8, 0.75]);
+};
 
-
+defineExpose({ update });
-defineExpose({ update })
 </script>

src/render/components/SNRView.vue

@@ -5,154 +5,158 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive } from "vue"
+import { reactive } from "vue";
 import { use, graphic } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { BarChart } from "echarts/charts";
 import { TitleComponent, GridComponent, DataZoomComponent } from "echarts/components";
 import VChart from "vue-echarts";
-import { get_in_positioning_id } from '../api/util'
+import { get_in_positioning_id } from "../api/util";
 
-
+use([CanvasRenderer, BarChart, TitleComponent, GridComponent, DataZoomComponent]);
-use([
-  CanvasRenderer,
-  BarChart,
-  TitleComponent,
-  GridComponent,
-  DataZoomComponent
-]);
 
 const props = defineProps({
   title: String,
   color: String,
-})
+});
-let LinearStart!: string
+let LinearStart!: string;
-let LinearEnd!: string
+let LinearEnd!: string;
 switch (props.color) {
-    case 'rgb(0,204,255)':
+  case "rgb(255,50,50)":
-    LinearStart = '#00ffff'
+    LinearStart = "#ffc864";
-    LinearEnd = '#0033ff'
+    LinearEnd = "#ff3232";
     break;
-    case 'rgb(255,255,0)':
+
-    LinearStart = '#ffffcc'
+  case "rgb(0,204,255)":
-    LinearEnd = '#ffff00'
+    LinearStart = "#00ffff";
+    LinearEnd = "#0033ff";
     break;
-    case 'rgb(102,0,255)':
+
-    LinearStart = '#6699ff'
+  case "rgb(102,0,255)":
-    LinearEnd = '#6600ff'
+    LinearStart = "#6699ff";
+    LinearEnd = "#6600ff";
     break;
-    case 'rgb(0,204,102)':
+
-    LinearStart = '#00cccc'
+  case "rgb(0,204,102)":
-    LinearEnd = '#00ff66'
+    LinearStart = "#00cccc";
+    LinearEnd = "#00ff66";
     break;
+
   default:
     break;
-  }
+}
 
-
+const BAR_COUNT = 30;
-const BAR_COUNT			   		 = 30
+const UN_POSITIONING_COLOR = "#9ca3af";
-const UN_POSITIONING_COLOR = '#9ca3af'
+const IN_POSITIONING_COLOR = new graphic.LinearGradient(0, 1, 0, 0, [
-const IN_POSITIONING_COLOR = new graphic.LinearGradient(
+  { offset: 0, color: LinearStart },
-  0, 1, 0, 0,
+  { offset: 1, color: LinearEnd },
-  [
+]);
-    {offset: 0, color: LinearStart},
-    {offset: 1,   color: LinearEnd}
-  ]
-)
 
 const option = reactive({
   title: {
     text: props.title,
-    left: 'center',
+    left: "center",
     top: 36,
     textStyle: {
-      color: 'white',
+      color: "white",
-      fontSize:36,
+      fontSize: 36,
       textBorderColor: props.color,
       textBorderWidth: 2,
       textShadowColor: props.color,
       textShadowBlur: 12,
-    }
+    },
   },
   xAxis: {
-    type: 'category',
+    type: "category",
-    axisTick: {show: false},
+    axisTick: { show: false },
-    axisLine: {show: false},
+    axisLine: { show: false },
     axisLabel: {
-      show:true,
+      show: true,
       textStyle: {
-      color: 'white',
+        color: "white",
-      fontSize:12,
+        fontSize: 12,
         textBorderColor: props.color,
         textBorderWidth: 1,
         textShadowColor: props.color,
-      textShadowBlur: 1
+        textShadowBlur: 1,
-    }
+      },
-    }
+    },
   },
   yAxis: {
     show: false,
-    max: 60
+    max: 60,
   },
 
-  series: [{
+  series: [
-    type: 'bar',
+    {
-    barCategoryGap: '50%',
+      type: "bar",
+      // barMinHeight: 10,
+      barCategoryGap: "50%",
       label: {
         show: true,
-      color: 'white',
+        color: "white",
-      position: 'top',
+        position: "top",
         textBorderColor: props.color,
         textBorderWidth: 1,
         textShadowColor: props.color,
         textShadowBlur: 1,
         formatter: function ({ value }) {
-        return !value || value[1] === 0 ? '' : value[1];
+          // return !value || value[1] === 0 ? '0' : value[1];
-      }
+          return !value || value[1] === 0 ? "" : value[1];
+        },
       },
       itemStyle: {
         barBorderRadius: [50, 50, 0, 0],
-        color: IN_POSITIONING_COLOR,
+        color: function ({ value }) {
-        shadowColor: props.color,
+          return !value || value[1] === 0 ? UN_POSITIONING_COLOR : IN_POSITIONING_COLOR;
-        shadowBlur: 6
         },
-  }]
+        shadowColor: props.color,
-})
+        shadowBlur: 6,
-const update 			 = (GSVArr: Array<any>, GSAArr: Array<any>, lineMax:String) => {
+      },
-  const SNROption: any = getSNROption(GSVArr, GSAArr, lineMax)
+    },
-  if (!SNROption) return
+  ],
+});
+const update = (GSVArr: Array<any>, GSAArr: Array<any>, lineMax: String) => {
+  const SNROption: any = getSNROption(GSVArr, GSAArr, lineMax);
+  if (!SNROption) return;
 
   if (SNROption.xAxis.data.length !== SNROption.series[0].data.length) {
-    return
+    return;
   }
 
-  const length = SNROption.xAxis.data.length
+  const length = SNROption.xAxis.data.length;
   if (length < BAR_COUNT) {
-    const fill_num 			 		 = BAR_COUNT - length
+    const fill_num = BAR_COUNT - length;
-    SNROption.xAxis.data 		 = SNROption.xAxis.data.concat(new Array(fill_num).fill(''))
+    SNROption.xAxis.data = SNROption.xAxis.data.concat(new Array(fill_num).fill(""));
-    SNROption.series[0].data = SNROption.series[0].data.concat(new Array(fill_num).fill(0))
+    SNROption.series[0].data = SNROption.series[0].data.concat(
+      new Array(fill_num).fill(0)
+    );
   }
 
-  Object.assign(option, SNROption)
+  Object.assign(option, SNROption);
-}
+};
-const getSNROption = (GSVArr: Array<any>, GSAArr: Array<any>, lineMax:String) => {
+const descend = (x, y) => {
+  return x[0] - y[0]; //按照数组的第1个值降序排列
+};
+const getSNROption = (GSVArr: Array<any>, GSAArr: Array<any>, lineMax: String) => {
   try {
-    let xAxis_max : String = ''
+    let xAxis_max: String = "";
-    let xAxis_data  : Array<any> = []
+    let xAxis_data: Array<any> = [];
-    let series_data : Array<any> = []
+    let series_data: Array<any> = [];
-    const in_positioning_id = get_in_positioning_id(GSAArr)
+    const in_positioning_id = get_in_positioning_id(GSAArr);
 
     GSAArr.forEach(({ satellites }) => {
-      in_positioning_id.push(...satellites)
+      in_positioning_id.push(...satellites);
     });
 
     GSVArr.forEach(({ satellites }) => {
       satellites.forEach(({ id, SNRdB }) => {
-        xAxis_data.push(id)
+        xAxis_data.push(id);
         if (in_positioning_id.indexOf(parseInt(id)) < 0) {
-          series_data.push([id, SNRdB, false])
+          series_data.push([id, SNRdB, false]);
         } else {
-          series_data.push([id, SNRdB, true])
+          series_data.push([id, SNRdB, true]);
         }
       });
     });
@@ -161,18 +165,20 @@ const getSNROption = (GSVArr: Array<any>, GSAArr: Array<any>, lineMax:String) =>
     const SNROption = {
       xAxis: {
         max: xAxis_max,
-        data: xAxis_data
+        data: xAxis_data.sort(),
       },
-      series: [{
+      series: [
-        data: series_data
+        {
-      }]
+          data: series_data.sort(descend),
-    }
+        },
+      ],
+    };
 
-    return SNROption
+    return SNROption;
   } catch (error) {
     console.error(error);
   }
-}
+};
 
-defineExpose({ update })
+defineExpose({ update });
 </script>

src/render/components/WaterLevel.vue

@@ -1,9 +1,9 @@
 <template>
-  <VChart :option="option" />
+  <VChart id="myWaterLevel" :option="option" />
 </template>
 
 <script lang="ts" setup>
-import { reactive } from "vue";
+import { reactive, onMounted } from "vue";
 import { use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { TitleComponent } from "echarts/components";
@@ -16,6 +16,11 @@ use([
   TitleComponent
 ]);
 
+onMounted(() => {
+  var mychart = document.getElementById("myWaterLevel");
+  mychart.firstChild.style.margin = "auto";
+});
+
 
 const option = reactive({
   title: {

src/render/page/DataMonitorPage.vue

@@ -17,88 +17,194 @@
             <WaterLevel ref="waterLevel" />
           </div>
         </div>
-        <div class="block-right-content ml-2 flex flex-1">
+        <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">
+        <div id="animationList" class="animationText mb-2">
+        </div>
+        <div id="newnmeaList" class="animationText">
+        </div>
+        </div>
       </div>
     </div>
   </full-screen-container>
 </template>
 
 <script lang="ts" setup>
-import FullScreenContainer from '../components/Layout/FullScreenContainer.vue'
+import FullScreenContainer from "../components/Layout/FullScreenContainer.vue";
-import TheHeader from '../components/Layout/TheHeader.vue'
+import TheHeader from "../components/Layout/TheHeader.vue";
-import DigitalFlopContainer from '../components/DigitalFlopContainer.vue'
+import DigitalFlopContainer from "../components/DigitalFlopContainer.vue";
-import Clock from '../components/Clock.vue'
+import Clock from "../components/Clock.vue";
-import Compass from '../components/Compass.vue'
+import Compass from "../components/Compass.vue";
-import WaterLevel from '../components/WaterLevel.vue'
+import WaterLevel from "../components/WaterLevel.vue";
-import Map from '../components/Map.vue'
+import Map from "../components/Map.vue";
 
-import { ref, onMounted } from 'vue'
+import { ref, reactive, onMounted } from "vue";
-import { Helpers } from 'nmea'
+import { Helpers } from "nmea";
-import { getNMEAObj } from '../api/util'
+import { getNMEAObj } from "../api/util";
 
-const digitalFlopContainer = ref(null)
+const digitalFlopContainer = ref(null);
-const clock                = ref(null)
+const clock = ref(null);
-const compass              = ref(null)
+const compass = ref(null);
-const waterLevel           = ref(null)
+const waterLevel = ref(null);
-const map                  = ref(null)
+const map = ref(null);
-const deepmsg = ref(null)
+const deepmsg = ref(null);
-const update               = (nmeaStr: string) => {
+const animationValue = ref('');
-  const data: any = getMonitoringData(nmeaStr)
+const colorId = ref(0);
-  if (!data) return
+const stagingObj = reactive({
+  dataTime: null,
+  longitude: NaN,
+  latitude: NaN,
+  alt: 0,
+  variation: null,
+  variationPole: null,
+  numSat: 0,
+});
 
-  const { dateTime, longitude, latitude, alt, variation, variationPole, numSat } = data
+const getDate = (date, timestamp) => {
-  digitalFlopContainer.value.update(dateTime, longitude, latitude, alt, numSat)
+  const year = date.substring(4);
-  clock.value.update(dateTime)
+  const month = date.substring(2, 4);
-  compass.value.update(variation, variationPole)
+  const day = date.substring(0, 2);
-  waterLevel.value.update(alt)
+  const hours = timestamp.substring(0, 2);
-  console.log(deepmsg.value)
+  const minutes = timestamp.substring(2, 4);
-  map.value.update(longitude, latitude, deepmsg.value)
+  const seconds = timestamp.substring(4, 6);
-}
+  const dateTimeStr = `20${year}-${month}-${day}T${hours}:${minutes}:${seconds}+00:00`;
-
+  const dateTime = new Date(dateTimeStr);
-const deepset = (deepArr: Array<string|boolean>) => {
+  return dateTime;
-  deepmsg.value = deepArr
+};
-}
-
-onMounted(() => {
-  if ('ipcRenderer' in window) {
-    ipcRenderer.receive('deep', deepset)
-    ipcRenderer.receive('nmea', update)
-
-    ipcRenderer.send('APP_MOUNTED')
-  }
-})
 
 const getMonitoringData = (nmeaStr: string) => {
-  const nmeaObj: any = getNMEAObj(nmeaStr)
+  const nmeaObj: any = getNMEAObj(nmeaStr);
-  console.log(nmeaObj, '================')
+  console.log(nmeaObj, "================");
-  if (!nmeaObj || !nmeaObj.RMC || !nmeaObj.GGA) return null
+  if (!nmeaObj || !nmeaObj.RMC || !nmeaObj.GGA) return null;
 
-  const { RMC, GGA } = nmeaObj
+  const { RMC, GGA } = nmeaObj;
   // 日期，时间，磁偏角，磁偏角方向
-  const { date, timestamp, variation, variationPole } = RMC
+  const { date, timestamp, variation, variationPole } = RMC;
   // 经度，经度方向，纬度，纬度方向，海拔，用于定位的卫星数目
-  const { lon, lonPole, lat, latPole, alt, numSat }   = GGA
+  const { lon, lonPole, lat, latPole, alt, numSat } = GGA;
 
-  const year        = date.substring(4)
+  const dateTime = getDate(date, timestamp);
-  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)
 
-  const longitude   = Helpers.parseLongitude(lon, lonPole)
+  const longitude = Helpers.parseLongitude(lon, lonPole);
-  const latitude    = Helpers.parseLatitude(lat, latPole)
+  const latitude = Helpers.parseLatitude(lat, latPole);
 
-  return { dateTime, longitude, latitude, alt, variation, variationPole, numSat }
+  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);
+  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) {
+    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>) => {
+  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");
+  }
+  nmeaList = document.getElementById("animationList");
+  newList = document.getElementById("newnmeaList");
+});
 </script>
 
 <style scoped>
-.clock-content, .compass-content, .water-level-content, .block-right-content {
+.clock-content,
-  background-color: rgba(6,30,93,.5);
+.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>

src/render/page/InfoMonitorPage.vue

@@ -8,7 +8,7 @@
           <ScrollBoardTable ref="BDScrollBoardTable" title="北　　斗" />
         </border-box-3>
         <border-box-3>
-          <ScrollBoardTable ref="GAScrollBoardTable" title="Galileo" />
+          <ScrollBoardTable ref="GLScrollBoardTable" title="GLONASS" />
         </border-box-3>
       </div>
       <div class="w-1/2 px-2">
@@ -21,7 +21,7 @@
           <ScrollBoardTable ref="GPScrollBoardTable" title="G P S" />
         </border-box-3>
         <border-box-3>
-          <ScrollBoardTable ref="GLScrollBoardTable" title="GLONASS" />
+          <ScrollBoardTable ref="GAScrollBoardTable" title="Galileo" />
         </border-box-3>
       </div>
     </div>

src/render/page/SignalMonitorPage.vue

@@ -4,10 +4,10 @@
 
     <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(0,204,255)" title="北斗" />
+        <SNRView ref="BDSNRView" color="rgb(255,50,50)" title="北斗" />
       </div>
       <div class="w-11/12 justify-self-start">
-        <SNRView ref="GPSNRView" color="rgb(255,255,0)" title="GPS" />
+        <SNRView ref="GPSNRView" color="rgb(0,204,255)" title="GPS" />
       </div>
       <div class="w-11/12 justify-self-end">
         <SNRView ref="GLSNRView" color="rgb(102,0,255)" title="GLONASS" />

src/render/page/StateMonitorPage.vue

@@ -4,16 +4,16 @@
 
     <div class="main-content flex-1 grid grid-cols-2 grid-rows-2">
       <div class="w-5/6 justify-self-end">
-        <PlanisphereView ref="BDPlanisphereView" color="rgb(0,204,255)" title="北斗" />
+        <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(255,255,0)" title="GPS" />
+        <PlanisphereView ref="GPPlanisphereView" color="rgb(10,40,100)" title="GPS" baseUrl="gps" />
       </div>
       <div class="w-5/6 justify-self-end">
-        <PlanisphereView ref="GLPlanisphereView" color="rgb(102,0,255)" title="GLONASS" />
+        <PlanisphereView ref="GLPlanisphereView" color="rgb(10,60,170)" title="GLONASS" baseUrl="glonass" />
       </div>
       <div class="w-5/6 justify-self-start">
-        <PlanisphereView ref="GAPlanisphereView" color="rgb(0,204,102)" title="Galileo" />
+        <PlanisphereView ref="GAPlanisphereView" color="rgb(10,60,160)" title="Galileo" baseUrl="galileo" />
       </div>
     </div>
   </full-screen-container>