删除无用组件
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 1006 B |
Binary file not shown.
|
Before Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -59,31 +59,17 @@
|
|||||||
查看消息
|
查看消息
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
<el-menu-item
|
<el-menu-item
|
||||||
|
v-if="manager"
|
||||||
index="4"
|
index="4"
|
||||||
:style="activeIndex == '4' ? activeStyle : indexStyle"
|
:style="activeIndex == '4' ? activeStyle : indexStyle"
|
||||||
class="border-r-4 border-slate-300"
|
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>
|
||||||
<el-menu-item
|
<el-menu-item
|
||||||
v-if="manager"
|
v-if="manager"
|
||||||
index="7"
|
index="5"
|
||||||
:style="activeIndex == '7' ? activeStyle : indexStyle"
|
:style="activeIndex == '5' ? activeStyle : indexStyle"
|
||||||
class="border-r-4 border-slate-300"
|
class="border-r-4 border-slate-300"
|
||||||
>
|
>
|
||||||
挂载点设置
|
挂载点设置
|
||||||
@@ -103,15 +89,9 @@
|
|||||||
<Msg />
|
<Msg />
|
||||||
</div>
|
</div>
|
||||||
<div v-show="activeIndex === '4'">
|
<div v-show="activeIndex === '4'">
|
||||||
<Code />
|
|
||||||
</div>
|
|
||||||
<div v-show="activeIndex === '5'">
|
|
||||||
<Xor />
|
|
||||||
</div>
|
|
||||||
<div v-show="activeIndex === '6'">
|
|
||||||
<Manager />
|
<Manager />
|
||||||
</div>
|
</div>
|
||||||
<div v-show="activeIndex === '7'">
|
<div v-show="activeIndex === '5'">
|
||||||
<MountpointSetting />
|
<MountpointSetting />
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
@@ -126,8 +106,6 @@ import QA from "./Q&A.vue";
|
|||||||
import Header from "./header.vue";
|
import Header from "./header.vue";
|
||||||
import RealTimeMsg from "./realTimeMsg.vue";
|
import RealTimeMsg from "./realTimeMsg.vue";
|
||||||
import Msg from "./msg.vue";
|
import Msg from "./msg.vue";
|
||||||
import Code from "./code.vue";
|
|
||||||
import Xor from "./xor.vue";
|
|
||||||
import Manager from "./manager.vue";
|
import Manager from "./manager.vue";
|
||||||
import MountpointSetting from "./mountpointSetting.vue";
|
import MountpointSetting from "./mountpointSetting.vue";
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -255,10 +255,15 @@ const clearSources = () => {
|
|||||||
const sizeConnect = async () => {
|
const sizeConnect = async () => {
|
||||||
try {
|
try {
|
||||||
const size = await caster.getSize(mountpoint.value);
|
const size = await caster.getSize(mountpoint.value);
|
||||||
|
let sizeCode = '';
|
||||||
while (true) {
|
while (true) {
|
||||||
const { done, value } = await size.stream.read();
|
const { done, value } = await size.stream.read();
|
||||||
if (done) return;
|
if (done) return;
|
||||||
mountpointSize.value = String.fromCharCode(value);
|
sizeCode = '';
|
||||||
|
value.forEach((item) => {
|
||||||
|
sizeCode = sizeCode +String.fromCharCode(item);
|
||||||
|
});
|
||||||
|
mountpointSize.value = sizeCode;
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|||||||
@@ -25,31 +25,17 @@
|
|||||||
查看消息
|
查看消息
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
<el-menu-item
|
<el-menu-item
|
||||||
|
v-if="manager"
|
||||||
index="3"
|
index="3"
|
||||||
:style="activeIndex == '3' ? activeStyle : indexStyle"
|
:style="activeIndex == '3' ? activeStyle : indexStyle"
|
||||||
class="border-r-4 border-slate-300"
|
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>
|
||||||
<el-menu-item
|
<el-menu-item
|
||||||
v-if="manager"
|
v-if="manager"
|
||||||
index="6"
|
index="4"
|
||||||
:style="activeIndex == '6' ? activeStyle : indexStyle"
|
:style="activeIndex == '4' ? activeStyle : indexStyle"
|
||||||
class="border-r-4 border-slate-300"
|
class="border-r-4 border-slate-300"
|
||||||
>
|
>
|
||||||
挂载点设置
|
挂载点设置
|
||||||
@@ -63,25 +49,9 @@
|
|||||||
<HistoryMsg ref="historyMsgRef" @getRole="getRole" />
|
<HistoryMsg ref="historyMsgRef" @getRole="getRole" />
|
||||||
</div>
|
</div>
|
||||||
<div v-show="activeIndex === '3'">
|
<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" />
|
<BsideManager ref="bsideManagerRef" />
|
||||||
</div>
|
</div>
|
||||||
<div v-show="activeIndex === '6'">
|
<div v-show="activeIndex === '4'">
|
||||||
<SetMountpoint ref="setMountpointRef" @getMountpoint="getMountpoint" />
|
<SetMountpoint ref="setMountpointRef" @getMountpoint="getMountpoint" />
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
@@ -93,10 +63,6 @@ import { ref, watch, onMounted } from "vue";
|
|||||||
|
|
||||||
import RealTimeMsg from "../operate/realTimeMsg.vue";
|
import RealTimeMsg from "../operate/realTimeMsg.vue";
|
||||||
import HistoryMsg from "../features/historyMsg.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 BsideManager from "../features/bsideManager.vue";
|
||||||
import SetMountpoint from "../manager/setMountpoint.vue";
|
import SetMountpoint from "../manager/setMountpoint.vue";
|
||||||
|
|
||||||
@@ -108,20 +74,13 @@ const activeIndex = ref("1");
|
|||||||
const indexStyle = "background-color: rgb(241 245 249);";
|
const indexStyle = "background-color: rgb(241 245 249);";
|
||||||
const activeStyle = "background-color: rgb(207 250 254);";
|
const activeStyle = "background-color: rgb(207 250 254);";
|
||||||
const manager = ref(false);
|
const manager = ref(false);
|
||||||
const showCode = ref(true);
|
|
||||||
const realTimeMsgRef = ref(null);
|
const realTimeMsgRef = ref(null);
|
||||||
const historyMsgRef = ref(null);
|
const historyMsgRef = ref(null);
|
||||||
const bsideManagerRef = ref(null);
|
|
||||||
const setMountpointRef = ref(null);
|
|
||||||
|
|
||||||
const handleSelect = (key, keyPath) => {
|
const handleSelect = (key, keyPath) => {
|
||||||
activeIndex.value = key;
|
activeIndex.value = key;
|
||||||
};
|
};
|
||||||
|
|
||||||
const showModel = () => {
|
|
||||||
showCode.value = !showCode.value;
|
|
||||||
};
|
|
||||||
|
|
||||||
const historyMsg = () => {
|
const historyMsg = () => {
|
||||||
historyMsgRef.value.historyMsg();
|
historyMsgRef.value.historyMsg();
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -4,8 +4,6 @@
|
|||||||
<Header
|
<Header
|
||||||
ref="headerRef"
|
ref="headerRef"
|
||||||
@allowManager="allowManager"
|
@allowManager="allowManager"
|
||||||
@connect="connect"
|
|
||||||
@disconnect="disconnect"
|
|
||||||
/>
|
/>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-main>
|
<el-main>
|
||||||
@@ -18,16 +16,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, onBeforeMount, onBeforeUnmount } from "vue";
|
import { ref } 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 Header from "../components/pageStructure/header.vue";
|
import Header from "../components/pageStructure/header.vue";
|
||||||
import Main from "../components/pageStructure/main.vue";
|
import Main from "../components/pageStructure/main.vue";
|
||||||
@@ -36,147 +25,11 @@ import Footer from "../components/pageStructure/footer.vue";
|
|||||||
const headerRef = ref(null);
|
const headerRef = ref(null);
|
||||||
const mainRef = 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 = () => {
|
const allowManager = () => {
|
||||||
if (headerRef.value.manager) {
|
if (headerRef.value.manager) {
|
||||||
mainRef.value.manager = true;
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|||||||
Reference in New Issue
Block a user