hyzl-frontEnd/ntrip-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

删除无用组件

Browse Source
This commit is contained in:
qubiaobiao
2026-06-05 17:33:24 +08:00
parent 75ce13c768
commit f5706f8c61
22 changed files with 15 additions and 1052 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/code/changeMode.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1006 B

BIN
src/assets/img/code/codeGuide.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.1 KiB

BIN
src/assets/img/code/codeScience.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/img/code/codeType.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

BIN
src/assets/img/code/fontGuide.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.3 KiB

BIN
src/assets/img/code/showType.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

BIN
src/assets/img/code/transCode.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.6 KiB

BIN
src/assets/img/code/transFont.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.0 KiB

BIN
src/assets/img/xor/errorMsg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/img/xor/input.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.6 KiB

BIN
src/assets/img/xor/xor.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.0 KiB

BIN
src/assets/img/xor/xorGuide.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.2 KiB

115
src/components/calculationXOR/calculationXOR.vue
View File

@@ -1,115 +0,0 @@
<template>
<div>
<div class="m-2 font-bold">
<el-text class="mx-1 font-bold"> 校验数据 : </el-text>
<el-input
v-model="check"
:style="style"
placeholder="请输入将要校验的数据"
clearable
@input="handleInput"
/>
</div>
<div class="m-2 font-bold">
<el-text> 校验结果（十六进制）: {{ resultHex }} </el-text>
</div>
<div class="m-2 font-bold">
<el-text> 校验结果（十进制）: {{ resultDec }} </el-text>
</div>
<div class="m-2 font-bold">
<el-text> 校验结果（二进制）: {{ resultBin }} </el-text>
</div>
<div class="flex justify-center">
<el-button style="font-weight: bold; width: 25%;" type="primary" size="small" @click="calculation">
校验
</el-button>
<el-button style="font-weight: bold; width: 25%;" type="primary" size="small" @click="clear">
清除
</el-button>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
const style = ref("width: 80%;");
const check = ref("");
const resultHex = ref("");
const resultDec = ref("");
const resultBin = ref("");
const clear = () => {
style.value = "width: 80%";
check.value = "";
resultHex.value = "";
resultBin.value = "";
resultDec.value = "";
};
// 判断字符是否为简体汉字
const isChinese = (s) => {
return /[\u4e00-\u9fa5]/.test(s);
};
const inputFilter = (inputData) => {
let infilter = [];
inputData.forEach((item) => {
if (!isChinese(item)) {
infilter.push(item);
}
});
return infilter.join("");
};
const handleInput = () => {
check.value = inputFilter(check.value.split(""));
};
const checkit = (acheck) => {
let checkArr = acheck.split("");
let resultBox;
checkArr.forEach((element) => {
if (resultBox == undefined) {
resultBox = element.charCodeAt();
} else {
resultBox = resultBox ^ element.charCodeAt();
}
});
let toOverHex, toOverDec, toOverBin;
toOverHex = resultBox.toString(16).toUpperCase();
if (resultBox.toString(16).toUpperCase().length < 2) {
toOverHex = "0" + toOverHex;
}
toOverDec = resultBox.toString().toUpperCase();
if (resultBox.toString().toUpperCase().length < 2) {
toOverDec = "0" + toOverDec;
}
toOverBin = resultBox.toString(2);
if (resultBox.toString(2).length < 8) {
for (let i = 0; i < 8 - resultBox.toString(2).length; i++) {
toOverBin = "0" + toOverBin;
}
}
return { hex: toOverHex, dec: toOverDec, bin: toOverBin };
};
const calculation = () => {
resultHex.value = "";
resultBin.value = "";
resultDec.value = "";
if (check.value == "") {
style.value = "width: 80%; border-width: 2px; border-color: rgb(239 68 68);";
ElMessage.error("校验数据不能为空");
} else {
const { hex, dec, bin } = checkit(check.value);
style.value = "width: 80%;";
resultHex.value = hex;
resultDec.value = dec;
resultBin.value = bin;
}
};
</script>
<style scoped></style>

92
src/components/guide/code.vue
View File

@@ -1,92 +0,0 @@
<template>
<div>
汉字编码使用指南：
<br />
<br />
<div>
<span class="text-sky-500 font-black">编码科普：</span>
如果您不懂汉字编码，建议您先点击链接“<span class="text-sky-500 font-black"
>编码科普</span
>”以了解汉字编码的基本知识。
<img src="../../assets/img/code/codeScience.png" alt="" />
</div>
<br />
<br />
<div>
<span class="text-emerald-500 font-black">汉字转换为编码：</span>
<br />
<span class="text-slate-500 font-black">灰色框</span>为输入区域， 在此区域输入需要转换为编码的汉字
<br />
<span class="text-amber-500 font-black">黄色框</span>为“<span class="text-amber-500 font-black">显示类型</span>”选择下拉框，共提供两种显示类型
<br />
<span class="text-emerald-500 font-black">绿色框</span>为“<span class="text-emerald-500 font-black">转换汉字</span>”按钮，点击此按钮可将输入框的汉字转换为编码并显示在输出区域
<br />
<span class="text-sky-500 font-black">蓝色框</span>为“<span class="text-sky-500 font-black">清除</span>”按钮，点击此按钮可清除输入框和输出区域的内容
<img src="../../assets/img/code/fontGuide.png" alt="" />
</div>
<br />
<br />
<div>
<span class="text-sky-500 font-black">选择显示类型：</span>显示类型分为<span class="text-amber-500 font-black">单字</span>显示和<span class="text-emerald-500 font-black">连续</span>显示两种模式
<img src="../../assets/img/code/showType.png" alt="" />
</div>
<br />
<br />
<div>
<span class="text-emerald-500 font-black">汉字转换为编码的转换结果：</span>
<img src="../../assets/img/code/transFont.png" alt="" />
</div>
<br />
<br />
<div>
点击左上角的<span class="text-red-500 font-black">转换模式</span>按钮可切换编码模式
<img src="../../assets/img/code/changeMode.png" alt="" />
</div>
<br />
<br />
<div>
<span class="text-emerald-500 font-black">编码转换为汉字：</span>
<br />
<span class="text-slate-500 font-black">灰色框</span>为输入区域， 在此区域输入需要转换为汉字的编码
<br />
<span class="text-amber-500 font-black">黄色框</span>为“<span class="text-amber-500 font-black">解码类型</span>”选择下拉框，共提供三种解码类型
<br />
<span class="text-emerald-500 font-black">绿色框</span>为“<span class="text-emerald-500 font-black">显示类型</span>”选择下拉框，共提供两种显示类型
<br />
<span class="text-red-500 font-black">红色框</span>为“<span class="text-red-500 font-black">转换编码</span>”按钮，点击此按钮可将输入框的编码转换为汉字并显示在输出区域
<br />
<span class="text-sky-500 font-black">蓝色框</span>为“<span class="text-sky-500 font-black">清除</span>”按钮，点击此按钮可清除输入框和输出区域的内容
<img src="../../assets/img/code/codeGuide.png" alt="" />
</div>
<br />
<br />
<div>
<span class="text-amber-500 font-black">选择解码类型：</span>解码类型分为<span class="text-amber-500 font-black">十进制</span>解码，<span class="text-emerald-500 font-black">十六进制</span>解码和<span class="text-red-500 font-black">二进制</span>解码三种模式
<img src="../../assets/img/code/codeType.png" alt="" />
</div>
<br />
<br />
<div>
<span class="text-sky-500 font-black">选择显示类型：</span>显示类型分为<span class="text-amber-500 font-black">单字</span>显示和<span class="text-emerald-500 font-black">连续</span>显示两种模式
<img src="../../assets/img/code/showType.png" alt="" />
</div>
<br />
<br />
<div>
<span class="text-emerald-500 font-black">编码转换为汉字的转换结果：</span>
<img src="../../assets/img/code/transCode.png" alt="" />
</div>
</div>
</template>
<script setup>
import codeGuide from "../../assets/img/code/codeGuide.png";
import codeScience from "../../assets/img/code/codeScience.png";
import codeType from "../../assets/img/code/codeType.png";
import fontGuide from "../../assets/img/code/fontGuide.png";
import showType from "../../assets/img/code/showType.png";
import transCode from "../../assets/img/code/transCode.png";
import transFont from "../../assets/img/code/transFont.png";
</script>
<style scoped></style>

30
src/components/guide/guide.vue
View File

@@ -59,31 +59,17 @@
查看消息
</el-menu-item>
<el-menu-item
v-if="manager"
index="4"
:style="activeIndex == '4' ? activeStyle : indexStyle"
class="border-r-4 border-slate-300"
>
汉字编码
</el-menu-item>
<el-menu-item
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"
index="5"
:style="activeIndex == '5' ? activeStyle : indexStyle"
class="border-r-4 border-slate-300"
>
挂载点设置
@@ -103,15 +89,9 @@
<Msg />
</div>
<div v-show="activeIndex === '4'">
<Code />
</div>
<div v-show="activeIndex === '5'">
<Xor />
</div>
<div v-show="activeIndex === '6'">
<Manager />
</div>
<div v-show="activeIndex === '7'">
<div v-show="activeIndex === '5'">
<MountpointSetting />
</div>
</el-card>
@@ -126,8 +106,6 @@ 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";

42
src/components/guide/xor.vue
View File

@@ -1,42 +0,0 @@
<template>
<div>
异或校验指南：
<br />
<br />
<div>
<span class="text-emerald-500 font-black">功能组成：</span>
<br />
<span class="text-sky-500 font-black">蓝色框</span>内为校验数据的输入框
<br />
<span class="text-emerald-500 font-black">绿色区域</span>为校验结果的显示区域
<br />
下方的“<span class="text-amber-500 font-black">校验</span>”按钮用于执行校验
<br />
下方的“<span class="text-red-500 font-black">清除</span
>”按钮用于清除输入框的校验数据和显示区域的校验结果。
<img src="../../assets/img/xor/xorGuide.png" alt="" />
</div>
<br />
<br />
<div>
<span class="text-red-500 font-black">未输入校验数据时的报错示例：</span>
<img src="../../assets/img/xor/input.png" alt="" />
<img src="../../assets/img/xor/errorMsg.png" alt="" />
</div>
<br />
<br />
<div>
<span class="text-amber-500 font-black">校验结果示例：</span>
<img src="../../assets/img/xor/xor.png" alt="" />
</div>
</div>
</template>
<script setup>
import errorMsg from "../../assets/img/xor/errorMsg.png";
import input from "../../assets/img/xor/input.png";
import xor from "../../assets/img/xor/xor.png";
import xorGuide from "../../assets/img/xor/xorGuide.png";
</script>
<style scoped></style>

7
src/components/operate/realTimeMsg.vue
View File

@@ -255,10 +255,15 @@ const clearSources = () => {
const sizeConnect = async () => {
try {
const size = await caster.getSize(mountpoint.value);
let sizeCode = '';
while (true) {
const { done, value } = await size.stream.read();
if (done) return;
mountpointSize.value = String.fromCharCode(value);
sizeCode = '';
value.forEach((item) => {
sizeCode = sizeCode +String.fromCharCode(item);
});
mountpointSize.value = sizeCode;
}
} catch (error) {
setTimeout(() => {

49
src/components/pageStructure/main.vue
View File

@@ -25,31 +25,17 @@
查看消息
</el-menu-item>
<el-menu-item
v-if="manager"
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"
index="4"
:style="activeIndex == '4' ? activeStyle : indexStyle"
class="border-r-4 border-slate-300"
>
挂载点设置
@@ -63,25 +49,9 @@
<HistoryMsg ref="historyMsgRef" @getRole="getRole" />
</div>
<div v-show="activeIndex === '3'">
<el-button
style="font-weight: bold"
type="primary"
@click="showModel"
class="mr-4"
>
转换模式
</el-button>
<CodeHelp />
<Encode v-if="showCode" />
<Decode v-if="!showCode" />
</div>
<div v-show="activeIndex === '4'">
<CalculationXOR />
</div>
<div v-show="activeIndex === '5'">
<BsideManager ref="bsideManagerRef" />
</div>
<div v-show="activeIndex === '6'">
<div v-show="activeIndex === '4'">
<SetMountpoint ref="setMountpointRef" @getMountpoint="getMountpoint" />
</div>
</el-card>
@@ -93,10 +63,6 @@ import { ref, watch, onMounted } from "vue";
import RealTimeMsg from "../operate/realTimeMsg.vue";
import HistoryMsg from "../features/historyMsg.vue";
import CodeHelp from "../transcoding/codeHelp.vue";
import Encode from "../transcoding/encode.vue";
import Decode from "../transcoding/decode.vue";
import CalculationXOR from "../calculationXOR/calculationXOR.vue";
import BsideManager from "../features/bsideManager.vue";
import SetMountpoint from "../manager/setMountpoint.vue";
@@ -108,20 +74,13 @@ const activeIndex = ref("1");
const indexStyle = "background-color: rgb(241 245 249);";
const activeStyle = "background-color: rgb(207 250 254);";
const manager = ref(false);
const showCode = ref(true);
const realTimeMsgRef = ref(null);
const historyMsgRef = ref(null);
const bsideManagerRef = ref(null);
const setMountpointRef = ref(null);
const handleSelect = (key, keyPath) => {
activeIndex.value = key;
};
const showModel = () => {
showCode.value = !showCode.value;
};
const historyMsg = () => {
historyMsgRef.value.historyMsg();
};

96
src/components/transcoding/codeHelp.vue
View File

@@ -1,96 +0,0 @@
<template>
<el-text class="mx-1 font-bold">
注: 键盘输入的空格、回车、制表符以及普通英文、数字和标点，将自动转为对应的全角字符进行编码，使用时请注意
</el-text>
<el-link
style="font-weight: bold"
:underline="false"
type="primary"
@click="dialogVisible = true"
>
编码科普
</el-link>
<el-dialog
v-model="dialogVisible"
:show-close="false"
style="width: 80%"
center
align-center
>
<template #header="{ close, titleId, titleClass }">
<div
style="font-size: 2rem"
class="w-full font-bold"
:id="titleId"
:class="titleClass"
>
编码帮助
</div>
<div
@click="close"
class="bg-gray-400 hover:bg-red-600 text-3xl absolute top-0 right-0 cursor-pointer flex justify-center items-center"
>
<el-icon>
<CloseBold />
</el-icon>
</div>
</template>
<el-text class="mx-1">
<h1 class="font-bold text-xl">GB2312 编码表</h1>
<br />
GB 2312 标准由中国国家标准总局 1980 年发布，GB 即国标，共收录
6763个汉字，其中一级汉字 3755 个，二级汉字 3008 个。
<br />
<br />
<ul class="list-disc">
<li class="ml-10">
GB 2312的出现，基本满足了汉字的计算机处理需要，它所收录的汉字已经覆盖中国大陆
99.75% 的使用频率。
</li>
<li class="ml-10">
对于人名、古汉语等方面出现的罕用字，GB 2312 不能处理，这导致了后来 GBK 及 GB
18030 汉字字符集的出现。
</li>
</ul>
<br />
GB 2312收录了包括拉丁字母、希腊字母、日文平假名及片假名字母、俄语西里尔字母在内的
682 个全角字符。
<br />
GB 2312 兼容 ASCII 码（0 -
127），之后对任意一个图形字符都采用两个字节表示，高位字节和低位字节都大于127。
<br />
<br />
GB 2312 字符集分成 94
个区，每区有94个位，分别对应第一字节和第二字节，这种表示方式也称为区位码。
<br />
<br />
<ul class="list-disc">
<li class="ml-10">01-09 区为特殊符号</li>
<li class="ml-10">10-15 区为用户自定义符号区（未编码）</li>
<li class="ml-10">16-55 区为一级汉字，按拼音排序，共 3755 个</li>
<li class="ml-10">56-87 区为二级汉字，按部首/笔画排序，共 3008 个</li>
<li class="ml-10">88-94 区为用户自定义汉字区（未编码）</li>
</ul>
</el-text>
<template #footer>
<div class="dialog-footer">
<el-button style="font-weight: bold" type="primary" @click="back">
返回
</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { CloseBold } from "@element-plus/icons-vue";
const dialogVisible = ref(false);
const back = () => {
dialogVisible.value = false;
};
</script>
<style scoped></style>

328
src/components/transcoding/decode.vue
View File

@@ -1,328 +0,0 @@
<template>
<el-input
placeholder="请输入编码"
v-model="fontcode"
type="textarea"
resize="none"
:rows="10"
style="box-shadow: 0 0px 20px -10px rgb(0 0 0 / 0.5)"
class="mt-4 mb-4"
/>
<div>
<el-select
v-model="decodeType"
clearable
size="small"
placeholder="选择解码类型"
style="width: 106px"
class="mr-4"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select
v-model="showType"
clearable
size="small"
placeholder="选择显示类型"
style="width: 106px"
class="mr-4"
>
<el-option
v-for="item in showOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button style="font-weight: bold;" type="primary" @click="transformcode(fontcode)">
转换编码
</el-button>
<el-button style="font-weight: bold;" type="primary" @click="reset">
清除
</el-button>
</div>
<el-card v-show="showType == 1" class="mt-4 mb-4">
<el-text class="mx-1">
编码（十进制）: {{ fontcodedec ? fontcodedec.join(" , ") : "" }}
</el-text>
<br />
<el-text class="mx-1">
编码（十六进制）: {{ fontcodehex ? fontcodehex.join(" , ") : "" }}
</el-text>
<br />
<el-text class="mx-1">
编码（二进制）: {{ fontcodebin ? fontcodebin.join(" , ") : "" }}
</el-text>
<br />
<el-text v-show="decodeType == 'transcode'" class="mx-1">
汉字: {{ transcode }}
</el-text>
<el-text v-show="decodeType == 'transcodehex'" class="mx-1">
汉字: {{ transcodehex }}
</el-text>
<el-text v-show="decodeType == 'transcodebin'" class="mx-1">
汉字: {{ transcodebin }}
</el-text>
</el-card>
<div class="flex flex-wrap justify-start items-center gap-4 mt-4 mb-4">
<el-card
v-for="(item, index) in chinafont"
v-show="showType == 0"
style="width: 300px"
>
<el-text class="mx-1">
编码（十进制）: {{ fontcodedec ? fontcodedec[index] : "" }}
</el-text>
<br />
<el-text class="mx-1">
编码（十六进制）: {{ fontcodehex ? fontcodehex[index] : "" }}
</el-text>
<br />
<el-text class="mx-1">
编码（二进制）: {{ fontcodebin ? fontcodebin[index] : "" }}
</el-text>
<br />
<el-text v-show="decodeType == 'transcode'" class="mx-1">
汉字: {{ transcode[index] }}
</el-text>
<el-text v-show="decodeType == 'transcodehex'" class="mx-1">
汉字: {{ transcodehex[index] }}
</el-text>
<el-text v-show="decodeType == 'transcodebin'" class="mx-1">
汉字: {{ transcodebin[index] }}
</el-text>
</el-card>
</div>
</template>
<script setup>
import { ref, watch, onMounted } from "vue";
import decodeActiveStore from "../../stores/decode";
import { toFullWidth } from "../../utils/toFullWidth";
import GBK from "gbk.js";
const decodeActive = decodeActiveStore();
const decodeType = ref("transcode");
const showType = ref("1");
const chinafont = ref();
const fontcode = ref();
const fontcodedec = ref();
const fontcodehex = ref();
const fontcodebin = ref();
const transcode = ref();
const transcodehex = ref();
const transcodebin = ref();
const options = [
{
value: "transcode",
label: "十进制",
},
{
value: "transcodehex",
label: "十六进制",
},
{
value: "transcodebin",
label: "二进制",
},
];
const showOptions = [
{
value: "0",
label: "单字",
},
{
value: "1",
label: "连续",
},
];
const decToHex = (dec) => {
let hexArr = [];
dec.forEach((element) => {
let hex = parseInt(element, 10).toString(16).toUpperCase();
if (hex.length == 1) {
hex = "0" + hex;
}
hexArr.push(hex);
});
return hexArr.join(" , ");
};
const decToBinary = (dec) => {
let binaryArr = [];
dec.forEach((element) => {
let binaryString = parseInt(element, 10).toString(2);
while (binaryString.length < 8) {
binaryString = "0" + binaryString;
}
binaryArr.push(binaryString);
});
return binaryArr.join(" , ");
};
const BinaryToDec = (binary) => {
let decArr = [];
binary.forEach((element) => {
let dec = parseInt(element, 2);
decArr.push(dec);
});
return decArr.join(" , ");
};
const BinaryToHex = (binary) => {
let hexArr = [];
binary.forEach((element) => {
let hex = parseInt(element, 2).toString(16).toUpperCase();
if (hex.length == 1) {
hex = "0" + hex;
}
hexArr.push(hex);
});
return hexArr.join(" , ");
};
const transformcode = (fontcode) => {
decodeActive.fontcode = fontcode;
let dec = [], hex = [], bin = [];
fontcode.replace(/\s+/g, '').replace(/，/g, ",").split(",").forEach((element) => {
let newArray;
if(element.length >= 4 && decodeType.value == "transcodehex") {
newArray = element.split("").reduce((acc, curr, index) => {
if (index % 2 === 0 && index + 1 < element.split("").length) {
acc.push([curr, element.split("")[index + 1]].join(""));
}
return acc;
}, []);
if(newArray.length > 2) {
newArray.shift();
newArray = newArray.join(",");
}
} else {
newArray = element;
}
hex.push(parseInt(newArray, 16));
dec.push(newArray);
bin.push(parseInt(newArray, 2));
});
transcode.value = "";
decodeActive.transcode = "";
transcodehex.value = "";
decodeActive.transcodehex = "";
transcodebin.value = "";
decodeActive.transcodebin = "";
switch (decodeType.value) {
case "transcode":
chinafont.value = GBK.decode(dec);
transcode.value = GBK.decode(dec);
decodeActive.transcode = transcode.value;
fontcodedec.value = fontcode.split(",").join(" , ");
decodeActive.fontcodedec = fontcode.split(",").join(" , ");
fontcodehex.value = decToHex(fontcode.split(","));
decodeActive.fontcodehex = decToHex(fontcode.split(","));
fontcodebin.value = decToBinary(fontcode.split(","));
decodeActive.fontcodebin = decToBinary(fontcode.split(","));
break;
case "transcodehex":
chinafont.value = GBK.decode(hex);
transcodehex.value = GBK.decode(hex);
decodeActive.transcodehex = transcodehex.value;
fontcodedec.value = hex.join(" , ");
decodeActive.fontcodedec = hex.join(" , ");
fontcodehex.value = fontcode.split(",").join(" , ");
decodeActive.fontcodehex = fontcode.split(",").join(" , ");
fontcodebin.value = decToBinary(hex);
decodeActive.fontcodebin = decToBinary(hex);
break;
case "transcodebin":
chinafont.value = GBK.decode(bin);
transcodebin.value = GBK.decode(bin);
decodeActive.transcodebin = transcodebin.value;
fontcodedec.value = BinaryToDec(fontcode.split(","));
decodeActive.fontcodedec = BinaryToDec(fontcode.split(","));
fontcodehex.value = BinaryToHex(fontcode.split(","));
decodeActive.fontcodehex = BinaryToHex(fontcode.split(","));
fontcodebin.value = fontcode.split(",").join(" , ");
decodeActive.fontcodebin = fontcode.split(",").join(" , ");
break;
default:
break;
}
let transfont = [];
hex = [], bin = [];
//将半角字符转为全角字符
toFullWidth(chinafont.value).split("").forEach((item) => {
transfont.push(GBK.encode(item).join(" , "));
let hexSingle = [], binSingle = [];
GBK.encode(item).forEach((element) => {
hexSingle.push(element.toString(16).toUpperCase().length < 2 ? "0" + element.toString(16).toUpperCase() : element.toString(16).toUpperCase());
binSingle.push(element.toString(2));
});
hex.push(hexSingle.join(""));
bin.push(binSingle.join(" , "));
});
fontcodedec.value = transfont;
decodeActive.fontcodedec = transfont;
fontcodehex.value = hex;
decodeActive.fontcodehex = hex;
fontcodebin.value = bin;
decodeActive.fontcodebin = bin;
};
const reset = () => {
fontcode.value = "";
fontcodedec.value = "";
fontcodehex.value = "";
fontcodebin.value = "";
transcode.value = "";
transcodehex.value = "";
transcodebin.value = "";
chinafont.value = "";
decodeActive.fontcode = "";
decodeActive.fontcodedec = "";
decodeActive.fontcodehex = "";
decodeActive.fontcodebin = "";
decodeActive.transcode = "";
decodeActive.transcodehex = "";
decodeActive.transcodebin = "";
};
watch(fontcode, (value) => {
decodeActive.fontcode = value;
});
watch(decodeType, (value) => {
decodeActive.decodeType = value;
});
watch(showType, (value) => {
decodeActive.showType = value;
});
onMounted(() => {
decodeType.value = decodeActive.decodeType;
showType.value = decodeActive.showType;
fontcode.value = decodeActive.fontcode;
fontcodedec.value = decodeActive.fontcodedec;
fontcodehex.value = decodeActive.fontcodehex;
fontcodebin.value = decodeActive.fontcodebin;
transcode.value = decodeActive.transcode;
transcodehex.value = decodeActive.transcodehex;
transcodebin.value = decodeActive.transcodebin;
chinafont.value = decodeActive[decodeType.value];
});
</script>
<style scoped></style>

159
src/components/transcoding/encode.vue
View File

@@ -1,159 +0,0 @@
<template>
<el-input
placeholder="请输入汉字"
v-model="inputfont"
type="textarea"
resize="none"
:rows="10"
style="box-shadow: 0 0px 20px -10px rgb(0 0 0 / 0.5);"
class="mt-4 mb-4"
/>
<div>
<el-select
v-model="showType"
clearable
size="small"
placeholder="选择显示类型"
style="width: 106px"
class="mr-4"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button style="font-weight: bold;" type="primary" @click="transformfont(inputfont)">
转换汉字
</el-button>
<el-button style="font-weight: bold;" type="primary" @click="reset">
清除
</el-button>
</div>
<el-card v-show="showType == 1" class="mt-4 mb-4">
<el-text class="mx-1">
汉字: {{ chinafont }}
</el-text>
<br />
<el-text class="mx-1">
编码（十进制）: {{ transfont ? transfont.join(" , ") : "" }}
</el-text>
<br />
<el-text class="mx-1">
编码（十六进制）: {{ transfonthex ? transfonthex.join(" , ") : "" }}
</el-text>
<br />
<el-text class="mx-1">
编码（二进制）: {{ transfontbin ? transfontbin.join(" , ") : "" }}
</el-text>
</el-card>
<div class="flex flex-wrap justify-start items-center gap-4 mt-4 mb-4">
<el-card
v-for="(item, index) in chinafont"
v-show="showType == 0"
style="width: 300px"
>
<el-text class="mx-1">
汉字: {{ item }}
</el-text>
<br />
<el-text class="mx-1">
编码（十进制）: {{ transfont[index] }}
</el-text>
<br />
<el-text class="mx-1">
编码（十六进制）: {{ transfonthex[index] }}
</el-text>
<br />
<el-text class="mx-1">
编码（二进制）: {{ transfontbin[index] }}
</el-text>
</el-card>
</div>
</template>
<script setup>
import { ref, watch, onMounted } from "vue";
import encodeActiveStore from "../../stores/encode";
import { toFullWidth } from "../../utils/toFullWidth";
import GBK from "gbk.js";
const encodeActive = encodeActiveStore();
const showType = ref(1);
const inputfont = ref();
const chinafont = ref();
const transfont = ref();
const transfonthex = ref();
const transfontbin = ref();
const options = [
{
value: 0,
label: "单字",
},
{
value: 1,
label: "连续",
},
];
const transformfont = (inputfont) => {
chinafont.value = inputfont;
encodeActive.inputfont = inputfont;
//将半角字符转为全角字符
let inputfontFullWidth = toFullWidth(inputfont);
transfont.value = [];
let hex = [], bin = [];
inputfontFullWidth.split("").forEach((item) => {
transfont.value.push(GBK.encode(item).join(" , "));
let hexSingle = [], binSingle = [];
GBK.encode(item).forEach((element) => {
hexSingle.push(element.toString(16).toUpperCase().length < 2 ? "0" + element.toString(16).toUpperCase() : element.toString(16).toUpperCase());
binSingle.push(element.toString(2));
});
hex.push(hexSingle.join(""));
bin.push(binSingle.join(" , "));
});
encodeActive.transfont = transfont.value;
transfonthex.value = hex;
encodeActive.transfonthex = transfonthex.value;
transfontbin.value = bin;
encodeActive.transfontbin = transfontbin.value;
};
const reset = () => {
inputfont.value = "";
chinafont.value = "";
transfont.value = "";
transfonthex.value = "";
transfontbin.value = "";
encodeActive.inputfont = "";
encodeActive.transfont = "";
encodeActive.transfonthex = "";
encodeActive.transfontbin = "";
};
watch(inputfont, (value) => {
encodeActive.inputfont = value;
});
watch(showType, (value) => {
encodeActive.showType = value;
});
onMounted(() => {
showType.value = encodeActive.showType;
inputfont.value = encodeActive.inputfont;
chinafont.value = encodeActive.inputfont;
transfont.value = encodeActive.transfont;
transfonthex.value = encodeActive.transfonthex;
transfontbin.value = encodeActive.transfontbin;
});
</script>
<style scoped></style>

149
src/views/Main.vue
View File

@@ -4,8 +4,6 @@
<Header
ref="headerRef"
@allowManager="allowManager"
@connect="connect"
@disconnect="disconnect"
/>
</el-header>
<el-main>
@@ -18,16 +16,7 @@
</template>
<script setup>
import { ref, onMounted, onBeforeMount, onBeforeUnmount } from "vue";
// import io from "socket.io-client";
import GBK from "gbk.js";
import moment from "moment";
import $http from "../api/index";
import $url from "../api/url";
import { ref } from "vue";
import Header from "../components/pageStructure/header.vue";
import Main from "../components/pageStructure/main.vue";
@@ -36,147 +25,11 @@ import Footer from "../components/pageStructure/footer.vue";
const headerRef = ref(null);
const mainRef = ref(null);
//开发/测试环境
// const socket = io("http://127.0.0.1:8010", {
// 生产环境
// const socket = io("http://bdrdserver.hwasmart.com:8010", {
// // path: "/bdrdWebSocket/",
// transports: ["websocket", "polling"],
// reconnection: true,
// reconnectionDelay: 1000,
// reconnectionDelayMax: 6000,
// reconnectionAttempts: 10,
// });
const decode = (data) => {
let arr = [];
data.match(/..?/g).forEach((element) => {
arr.push(parseInt(element, 16));
});
return GBK.decode(arr);
};
const getMsg = () => {
// socket.emit("message", headerRef.value.cardID);
// socket.removeListener(headerRef.value.cardID);
// if (socket.listeners(headerRef.value.cardID).length == 0) {
// socket.on(headerRef.value.cardID, (msg) => {
// const { encode_type, msg_data, created_at } = msg;
// mainRef.value.message = Number(encode_type) == 0 ? decode(msg_data) : msg_data;
// shortMsgActive.message = mainRef.value.message;
// mainRef.value.created_at = moment
// .utc(created_at)
// .add(8, "hours")
// .format("YYYY-MM-DD-HH:mm:ss");
// shortMsgActive.created_at = mainRef.value.created_at;
// mainRef.value.historyMsg();
// });
// }
};
const connect = () => {
// socket.connect();
};
const disconnect = () => {
// socket.disconnect();
};
const allowManager = () => {
if (headerRef.value.manager) {
mainRef.value.manager = true;
}
};
onMounted(() => {
mainRef.value.color = "color: rgb(56 188 248);";
mainRef.value.message = "连接中...";
mainRef.value.created_at = moment
.utc(new Date())
.add(8, "hours")
.format("YYYY-MM-DD-HH:mm:ss");
$http.post($url.getCard, { uid: localStorage.data }).then((res) => {
if (res.data.code === 200) {
headerRef.value.cardID = res.data.cardID;
let connectStatus = false,
reconnectStatus = false;
// socket.on("connect", () => {
// connectStatus = true;
// mainRef.value.color = "color: rgb(16 184 130);";
// mainRef.value.message = "连接成功！";
// mainRef.value.created_at = moment
// .utc(new Date())
// .add(8, "hours")
// .format("YYYY-MM-DD-HH:mm:ss");
// getMsg();
// });
// socket.on("disconnect", (reason) => {
// mainRef.value.color = "color: rgb(240 70 70);";
// mainRef.value.message = "连接断开！请检查网络状态并刷新网页重试！";
// mainRef.value.created_at = moment
// .utc(new Date())
// .add(8, "hours")
// .format("YYYY-MM-DD-HH:mm:ss");
// if (reason === "io server disconnect" || reason === "io client disconnect") {
// if (headerRef.value.cardID !== "") {
// mainRef.value.color = "color: rgb(56 188 248);";
// mainRef.value.message = "连接中...";
// mainRef.value.created_at = moment
// .utc(new Date())
// .add(8, "hours")
// .format("YYYY-MM-DD-HH:mm:ss");
// socket.removeListener(headerRef.value.cardID);
// socket.connect();
// reconnectStatus = true;
// }
// }
// });
// socket.on("connect_error", (err) => {
// // 如果连接异常，修改transports传输方式
// socket.io.opts.transports = ["websocket", "polling"];
// if (reconnectStatus) {
// setTimeout(() => {
// reconnectStatus = false;
// mainRef.value.color = "color: rgb(240 70 70);";
// mainRef.value.message = "连接异常！请检查网络状态并刷新网页重试！";
// mainRef.value.created_at = moment
// .utc(new Date())
// .add(8, "hours")
// .format("YYYY-MM-DD-HH:mm:ss");
// }, socket.io.opts.reconnectionAttempts * socket.io.opts.reconnectionDelayMax);
// }
// });
// setTimeout(() => {
// if (!connectStatus) {
// mainRef.value.color = "color: rgb(240 70 70);";
// mainRef.value.message = "连接异常！请检查网络状态并刷新网页重试！";
// mainRef.value.created_at = moment
// .utc(new Date())
// .add(8, "hours")
// .format("YYYY-MM-DD-HH:mm:ss");
// }
// }, socket.io.opts.reconnectionAttempts * socket.io.opts.reconnectionDelayMax);
} else {
// socket.disconnect();
}
});
});
onBeforeMount(() => {
// if (socket) {
// socket.connect();
// }
});
onBeforeUnmount(() => {
// if (socket) {
// socket.disconnect(); // 组件卸载时断开连接
// }
});
</script>
<style scoped></style>