高精度定位服务平台

src/components/guide/guide.vue

@@ -14,7 +14,7 @@
         :id="titleId"
         :class="titleClass"
       >
-        北斗短报文通信服务平台使用帮助
+        高精度定位服务平台使用帮助
       </div>
       <div
         @click="close"
@@ -49,30 +49,45 @@
         :style="activeIndex == '2' ? activeStyle : indexStyle"
         class="border-r-4 border-slate-300"
       >
-        查看消息
+        实时消息
       </el-menu-item>
       <el-menu-item
         index="3"
         :style="activeIndex == '3' ? activeStyle : indexStyle"
         class="border-r-4 border-slate-300"
       >
-        汉字编码
+        查看消息
       </el-menu-item>
       <el-menu-item
         index="4"
         :style="activeIndex == '4' ? activeStyle : indexStyle"
         class="border-r-4 border-slate-300"
       >
-        异或校验
+        汉字编码
       </el-menu-item>
       <el-menu-item
-        v-if="manager"
         index="5"
         :style="activeIndex == '5' ? activeStyle : indexStyle"
         class="border-r-4 border-slate-300"
+      >
+        异或校验
+      </el-menu-item>
+      <el-menu-item
+        v-if="manager"
+        index="6"
+        :style="activeIndex == '6' ? activeStyle : indexStyle"
+        class="border-r-4 border-slate-300"
       >
         单位管理
       </el-menu-item>
+      <el-menu-item
+        v-if="manager"
+        index="7"
+        :style="activeIndex == '7' ? activeStyle : indexStyle"
+        class="border-r-4 border-slate-300"
+      >
+        挂载点设置
+      </el-menu-item>
     </el-menu>
     <el-card>
       <div v-show="activeIndex === '0'">
@@ -82,31 +97,39 @@
         <Header />
       </div>
       <div v-show="activeIndex === '2'">
-        <Msg />
+        <RealTimeMsg />
       </div>
       <div v-show="activeIndex === '3'">
-        <Code />
+        <Msg />
       </div>
       <div v-show="activeIndex === '4'">
-        <Xor />
+        <Code />
       </div>
       <div v-show="activeIndex === '5'">
+        <Xor />
+      </div>
+      <div v-show="activeIndex === '6'">
         <Manager />
       </div>
+      <div v-show="activeIndex === '7'">
+        <MountpointSetting />
+      </div>
     </el-card>
   </el-dialog>
 </template>
 
 <script setup>
-import { ref, reactive, watch } from "vue";
+import { ref } from "vue";
 import { CloseBold } from "@element-plus/icons-vue";
 
 import QA from "./Q&A.vue";
 import Header from "./header.vue";
+import RealTimeMsg from "./realTimeMsg.vue";
 import Msg from "./msg.vue";
 import Code from "./code.vue";
 import Xor from "./xor.vue";
 import Manager from "./manager.vue";
+import MountpointSetting from "./mountpointSetting.vue";
 
 const dialogVisible = ref(false);
 const activeIndex = ref("1");

src/components/guide/header.vue

@@ -8,7 +8,7 @@
     <br />
     <div>
       <span class="text-amber-500 font-black">左侧：</span>
-      展示了平台号码，卡号，绑定/解绑按钮，以及帮助按钮
+      展示了帮助按钮
       <img src="../../assets/img/header/headerGuide.png" alt="" />
     </div>
     <br />

src/components/guide/mountpointSetting.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    挂载点设置指南：
+    <br />
+    <br />
+    <span class="text-amber-500 font-black">Q：</span
+    >为什么要设置挂载点？如果不设置会怎么样？
+    <img src="../../assets/img/mountpointSetting/save.png" alt="" />
+    <br />
+    <span class="text-emerald-500 font-black">A：</span
+    >这是因为连接并挂载到ntrip-caster时需要进行有效性验证，只有在管理员设置挂载点后ntrip-caster才会将ntrip-server使用的挂载点视为有效的连接，如果不进行设置那么连接并挂载到ntrip-caster的请求将会被拒绝。
+    <br />
+    <br />
+    <span class="text-amber-500 font-black">Q：</span
+    >在修改和删除挂载点信息时无法手动输入挂载点，该如何修改我想要修改的挂载点？
+    <img src="../../assets/img/mountpointSetting/edit.png" alt="" />
+    <br />
+    <span class="text-emerald-500 font-black">A：</span
+    >下方的挂载点列表中提供了所有已经设置好的挂载点，鼠标左键点击选择你想要修改的挂载点即可。
+    <img src="../../assets/img/mountpointSetting/mountpointList.png" alt="" />
+    <br />
+    <br />
+    <span class="text-amber-500 font-black">Q：</span
+    >挂载点覆盖记录是什么？
+    <img src="../../assets/img/mountpointSetting/record.png" alt="" />
+    <br />
+    <span class="text-emerald-500 font-black">A：</span
+    >挂载点覆盖记录是对挂载点进行保存、名称修改时留下的数据记录，是为了方便分析和区分手动保存的消息。
+  </div>
+</template>
+
+<script setup>
+import edit from "../../assets/img/mountpointSetting/edit.png";
+import mountpointList from "../../assets/img/mountpointSetting/mountpointList.png";
+import record from "../../assets/img/mountpointSetting/record.png";
+import save from "../../assets/img/mountpointSetting/save.png";
+</script>
+
+<style scoped></style>

src/components/guide/msg.vue

@@ -3,13 +3,6 @@
     查看消息指南：
     <br />
     <br />
-    <div>
-      <span class="text-emerald-500 font-black">实时短报文消息：</span>
-      左侧为接收到的实时短报文消息的内容，右侧为接收到实时短报文消息时的时间
-      <img src="../../assets/img/msg/msg.png" alt="" />
-    </div>
-    <br />
-    <br />
     <div>
       <span class="text-sky-500 font-black">查看历史消息的全部内容：</span>
       消息内容过长时，可以点击右侧的“<span class="text-sky-500 font-black"
@@ -63,7 +56,6 @@
 </template>
 
 <script setup>
-import msg from "../../assets/img/msg/msg.png";
 import operateSelect from "../../assets/img/msg/operateSelect.png";
 import operateType from "../../assets/img/msg/operateType.png";
 import showMsg from "../../assets/img/msg/showMsg.png";

src/components/guide/realTimeMsg.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    实时消息指南：
+    <br />
+    <br />
+    <span class="text-amber-500 font-black">Q：</span
+    >为什么要设置挂载点？如果不设置会怎么样？
+    <img src="../../assets/img/realTimeMsg/settings.png" alt="" />
+    <br />
+    <span class="text-emerald-500 font-black">A：</span
+    >这是因为连接到ntrip-caster时需要进行有效性验证，只有在设置挂载点密码后ntrip-caster才会将请求连接到指定挂载点的ntrip-clinet视为有效的，如果不进行设置那么连接到挂载点的请求将会被拒绝。
+    <br />
+    <br />
+    <span class="text-amber-500 font-black">Q：</span
+    >在设置挂载点密码时无法手动输入挂载点，该如何选择我想要的挂载点？
+    <br />
+    <span class="text-emerald-500 font-black">A：</span
+    >下方的挂载点列表中提供了所有可连接到的挂载点，鼠标左键点击选择你想要的挂载点即可，选择挂载点后还会显示出已经连接到该挂载点的ntrip-client数量。
+    <img src="../../assets/img/realTimeMsg/mountpointList.png" alt="" />
+    <br />
+    <br />
+    <span class="text-amber-500 font-black">Q：</span
+    >消息队列是什么？
+    <img src="../../assets/img/realTimeMsg/msgList.png" alt="" />
+    <br />
+    <span class="text-emerald-500 font-black">A：</span
+    >当设置好挂载点密码并连接到ntrip-caster后，ntrip-caster会将接收到的实时消息推送到消息队列中。
+    <br />
+    <br />
+    <span class="text-amber-500 font-black">Q：</span
+    >红色按钮“原始数据”/绿色按钮“转换数据”是做什么的？
+    <img src="../../assets/img/realTimeMsg/originMsgList.png" alt="" />
+    <br />
+    <span class="text-emerald-500 font-black">A：</span
+    >红色按钮“原始数据”/绿色按钮“转换数据”是将接收到的实时消息以原始数据流/简单处理后的数据进行显示的切换按钮。
+    <br />
+    <span class="text-amber-500 font-black">Q：</span
+    >蓝色按钮“保存”是做什么的？
+    <img src="../../assets/img/realTimeMsg/saveButton.png" alt="" />
+    <br />
+    <span class="text-emerald-500 font-black">A：</span
+    >蓝色按钮“保存”会将它对应的这一条消息保存到数据库，在“查看消息”这一页可以看到保存的消息。
+    <img src="../../assets/img/realTimeMsg/saveMsg.png" alt="" />
+    <br />
+    <br />
+    <span class="text-amber-500 font-black">Q：</span
+    >源列表是什么？
+    <img src="../../assets/img/realTimeMsg/sourceTable.png" alt="" />
+    <br />
+    <span class="text-emerald-500 font-black">A：</span
+    >源列表会显示出已经连接到ntrip-caster上的所有挂载点，可以看到每个挂载点各项信息。
+  </div>
+</template>
+
+<script setup>
+import mountpointList from "../../assets/img/realTimeMsg/mountpointList.png";
+import msgList from "../../assets/img/realTimeMsg/msgList.png";
+import originMsgList from "../../assets/img/realTimeMsg/originMsgList.png";
+import saveButton from "../../assets/img/realTimeMsg/saveButton.png";
+import saveMsg from "../../assets/img/realTimeMsg/saveMsg.png";
+import settings from "../../assets/img/realTimeMsg/settings.png";
+import sourceTable from "../../assets/img/realTimeMsg/sourceTable.png";
+</script>
+
+<style scoped></style>

src/components/manager/setMountpoint.vue

@@ -9,7 +9,7 @@
       placeholder="请输入挂载点名称"
       maxlength="100"
       clearable
-      @input="handleInputMountpoint(mountpoint, 'save')"
+      @input="handleInputMountpointFilter(mountpoint, 'save')"
     />
     <div style="width: 1%"></div>
     <el-input
@@ -19,7 +19,7 @@
       minlentgth="8"
       maxlength="16"
       clearable
-      @input="handleInputPassword(password, 'save')"
+      @input="handleInputPasswordFilter(password, 'save')"
     />
     <div style="width: 20%" class="flex justify-center">
       <el-button
@@ -74,9 +74,9 @@
       class="flex-1"
       placeholder="请输入修改后的挂载点密码"
       minlentgth="8"
-      maxlength="100"
+      maxlength="16"
       clearable
-      @input="handleInputPassword(editPassword, 'change')"
+      @input="handleInputPasswordFilter(editPassword, 'edit')"
     />
     <div style="width: 20%" class="flex justify-center">
       <el-button
@@ -116,7 +116,7 @@
       placeholder="请输入修改后的挂载点名称"
       maxlength="100"
       clearable
-      @input="handleInputMountpoint(afterEdit, 'edit')"
+      @input="handleInputMountpointFilter(afterEdit, 'edit')"
     />
     <div style="width: 20%" class="flex justify-center">
       <el-button
@@ -188,7 +188,6 @@ import MountpointRecord from "../features/mountpointRecord.vue";
 
 const emit = defineEmits(["getMountpoint"]);
 
-const timeout = ref(null);
 const mountpoint = ref("");
 const password = ref("");
 const save = ref(true);
@@ -201,28 +200,21 @@ const del = ref(true);
 const MountpointListRef = ref(null);
 const MountpointRecordRef = ref(null);
 
-const handleInputMountpoint = (name, type) => {
-  clearTimeout(timeout.value);
-  timeout.value = setTimeout(() => {
-    const isValid = /^[a-zA-Z0-9\-_\.]$/.test(name) && name.length <= 100;
-      if (type == "save") {
-        save.value = isValid;
-      } else if (type == "edit") {
-        edit.value = isValid;
-      }
-  }, 100);
+const handleInputMountpointFilter = (value, type) => {
+  if (type == "save") {
+    mountpoint.value = value.replace(/[^a-zA-Z0-9\-_\.]/g, '');
+  } else if (type == "edit") {
+    afterEdit.value = value.replace(/[^a-zA-Z0-9\-_\.]/g, '');
+  }
 };
 
-const handleInputPassword = (name, type) => {
-  clearTimeout(timeout.value);
-  timeout.value = setTimeout(() => {
-    const isValid = /^[a-zA-Z0-9].{8,16}$/.test(name);
-      if (type == "save") {
-        save.value = isValid;
-      } else if (type == "change") {
-        change.value = isValid;
-      }
-  }, 100);
+
+const handleInputPasswordFilter = (value, type) => {
+  if (type == "save") {
+    password.value = value.replace(/[^a-zA-Z0-9]/g, '');
+  } else if (type == "edit") {
+    editPassword.value = value.replace(/[^a-zA-Z0-9]/g, '');
+  }
 };
 
 const clearSave = () => {
@@ -340,10 +332,63 @@ const selectMountpoint = (selectedMountpoint) => {
   beforEdit.value = selectedMountpoint;
 };
 
-watch(beforEdit, (value) => {
-  if (value !== '') {
-    del.value = false;
+const allowCheckSave = () => {
+  const mountpointValid = /^[a-zA-Z0-9\-_\.]/.test(mountpoint.value);
+  const passwordValid = /^[a-zA-Z0-9].{7,16}$/.test(password.value);
+  console.log(mountpointValid, passwordValid)
+  if (mountpointValid && passwordValid) {
+    save.value = false;
+  } else {
+    save.value = true;
   }
+};
+
+watch(mountpoint, (value) => {
+  allowCheckSave();
+});
+
+watch(password, (value) => {
+  allowCheckSave();
+});
+
+const allowCheckEdit = (type) => {
+  if (type == 'mountpoint') {
+    const mountpointValid = /^[a-zA-Z0-9\-_\.]/.test(afterEdit.value);
+    if (beforEdit.value !== '' && mountpointValid) {
+      edit.value = false;
+    } else {
+      edit.value = true;
+    }
+  } else if (type == 'password') {
+    const passwordValid = /^[a-zA-Z0-9].{7,16}$/.test(editPassword.value);
+    if (beforEdit.value !== '' && passwordValid) {
+      change.value = false;
+    } else {
+      change.value = true;
+    }
+  }
+};
+
+const allowCheckDel = () => {
+  if (beforEdit.value !== '') {
+    del.value = false;
+  } else {
+    del.value = true;
+  }
+};
+
+watch(editPassword, (value) => {
+  allowCheckEdit('password');
+});
+
+watch(afterEdit, (value) => {
+  allowCheckEdit('mountpoint');
+});
+
+watch(beforEdit, (value) => {
+  allowCheckEdit('password');
+  allowCheckEdit('mountpoint');
+  allowCheckDel();
 });
 
 </script>

src/components/operate/realTimeMsg.vue

@@ -21,7 +21,7 @@
       minlength="8"
       maxlength="16"
       clearable
-      @input="handleInputPassword(password)"
+      @input="handleInputFilter(password)"
     />
     <div style="width: 20%" class="flex justify-center items-center">
       <el-button
@@ -185,7 +185,6 @@ const timeout = ref(null);
 const mountpoint = ref("");
 const mountpointSize = ref(0);
 const password = ref("");
-const allow = ref(false);
 const allowConnect = ref(true);
 const MountpointListRef = ref(null);
 const dataSwitch = ref(false);
@@ -196,12 +195,8 @@ const getTime = (time) => {
   return moment.utc(time).add(8, "hours").format("YYYY-MM-DD-HH:mm:ss");
 };
 
-const handleInputPassword = (name) => {
-  clearTimeout(timeout.value);
-  timeout.value = setTimeout(() => {
-    const isValid = /^[a-zA-Z0-9].{8,16}$/.test(name);
-    allow.value = !isValid;
-  }, 100);
+const handleInputFilter = (value) => {
+  password.value = value.replace(/[^a-zA-Z0-9]/g, '');
 };
 
 const formatAsExample = (bytes) => {
@@ -217,6 +212,7 @@ const formatAsExample = (bytes) => {
 
 const clear = () => {
   mountpoint.value = "";
+  password.value = "";
   MountpointListRef.value.resetSelect();
 };
 
@@ -357,13 +353,20 @@ const clearMsg = () => {
   msgList.value = [];
 };
 
+const allowCheck = () => {
+  const isValid = /^[a-zA-Z0-9].{7,16}$/.test(password.value);
+  if (mountpoint.value !== "" && isValid) {
+    allowConnect.value = false;
+  } else {
+    allowConnect.value = true;
+  }
+};
+
 defineExpose({ getMountpoint });
 
 watch(mountpoint, (value) => {
-  if (value == "") {
-    allowConnect.value = true;
-  } else {
-    allowConnect.value = false;
+  allowCheck();
+  if (value !== "") {
     clearTimeout(timeout.value);
     timeout.value = setTimeout(() => {
       const data = { mountpoint: mountpoint.value };
@@ -383,6 +386,10 @@ watch(mountpoint, (value) => {
   }
 });
 
+watch(password, (value) => {
+  allowCheck();
+});
+
 watch(() => msgList.value.length, () => {
   nextTick(() => {
     const wrap = scrollbarRef.value.$el.querySelector('.el-scrollbar__wrap');