feat(uart) import and export settings
This commit is contained in:
parent
85864823af
commit
aa4e83937a
|
|
@ -1,6 +1,19 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex items-center mb-2">
|
<div class="flex items-center mb-2 flex-wrap gap-2">
|
||||||
<el-button class="mr-2" type="primary" @click="() => {
|
<el-button type="primary" @click="importSettings">导入</el-button>
|
||||||
|
<el-button type="warning" @click="exportSettings">导出</el-button>
|
||||||
|
|
||||||
|
<el-tooltip
|
||||||
|
effect="light"
|
||||||
|
placement="top"
|
||||||
|
>
|
||||||
|
<template #content>
|
||||||
|
<p>刷新页面后生效</p>
|
||||||
|
</template>
|
||||||
|
<el-button type="info" @click="resetSettings">重置</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center mb-2 flex-wrap gap-2">
|
<div class="flex items-center mb-2 flex-wrap gap-2">
|
||||||
<el-button type="primary" @click="() => {
|
<el-button type="primary" @click="() => {
|
||||||
macroData.push({
|
macroData.push({
|
||||||
|
|
@ -112,6 +125,220 @@ function onSendClick(val: string) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface DataViewerState {
|
||||||
|
macroButtons: any; // Specify more precise types
|
||||||
|
configTab: string;
|
||||||
|
showText: boolean;
|
||||||
|
showHex: boolean;
|
||||||
|
showHexdump: boolean;
|
||||||
|
showTimestamp: boolean;
|
||||||
|
lineWrap: boolean;
|
||||||
|
RxHexdumpColor: string;
|
||||||
|
TxHexdumpColor: string;
|
||||||
|
frameBreakSequence: string;
|
||||||
|
frameBreakAfterSequence: boolean;
|
||||||
|
frameBreakDelay: number;
|
||||||
|
frameBreakSize: number;
|
||||||
|
frameBreak: any[]; // Specify more precise types
|
||||||
|
decodeANSI: boolean;
|
||||||
|
frameFilterValue: string;
|
||||||
|
autoUpdate: boolean;
|
||||||
|
updateInterval: number;
|
||||||
|
sendFramePrefix: string;
|
||||||
|
sendFrameSuffix: string;
|
||||||
|
loopSendInterval: number;
|
||||||
|
sendBoxIsText: boolean;
|
||||||
|
sendBox: string;
|
||||||
|
winLeft: any;
|
||||||
|
winRight: any;
|
||||||
|
winAutoLayout: boolean;
|
||||||
|
winLayoutMode: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function isKeyOfDataViewerState(key: any): key is keyof DataViewerState {
|
||||||
|
return key in useDataViewerStore().$state;
|
||||||
|
}
|
||||||
|
|
||||||
|
function importSettings() {
|
||||||
|
const input = document.createElement('input');
|
||||||
|
input.type = 'file';
|
||||||
|
input.accept = 'application/json';
|
||||||
|
|
||||||
|
input.onchange = (event: Event) => {
|
||||||
|
const target = event.target as HTMLInputElement;
|
||||||
|
if (!target.files) return;
|
||||||
|
const file = target.files[0];
|
||||||
|
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = (e: ProgressEvent<FileReader>) => {
|
||||||
|
const text = e.target?.result;
|
||||||
|
if (typeof text !== 'string') return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(text) as Partial<DataViewerState>;
|
||||||
|
|
||||||
|
|
||||||
|
if (data.macroButtons) {
|
||||||
|
macroData.value = data.macroButtons;
|
||||||
|
}
|
||||||
|
if (data.configTab) {
|
||||||
|
viewerStore.configPanelTab = data.configTab;
|
||||||
|
}
|
||||||
|
if (data.showText) {
|
||||||
|
viewerStore.showText = data.showText;
|
||||||
|
}
|
||||||
|
if (data.showHex) {
|
||||||
|
viewerStore.showHex = data.showHex;
|
||||||
|
}
|
||||||
|
if (data.showHexdump) {
|
||||||
|
viewerStore.showHexdump = data.showHexdump;
|
||||||
|
}
|
||||||
|
if (data.showTimestamp) {
|
||||||
|
viewerStore.showTimestamp = data.showTimestamp;
|
||||||
|
}
|
||||||
|
if (data.lineWrap) {
|
||||||
|
viewerStore.enableLineWrap = data.lineWrap;
|
||||||
|
}
|
||||||
|
if (data.RxHexdumpColor) {
|
||||||
|
viewerStore.RxHexdumpColor = data.RxHexdumpColor;
|
||||||
|
}
|
||||||
|
if (data.TxHexdumpColor) {
|
||||||
|
viewerStore.TxHexdumpColor = data.TxHexdumpColor;
|
||||||
|
}
|
||||||
|
if (data.frameBreakSequence) {
|
||||||
|
viewerStore.frameBreakSequence = data.frameBreakSequence;
|
||||||
|
}
|
||||||
|
if (data.frameBreakAfterSequence) {
|
||||||
|
viewerStore.frameBreakAfterSequence = data.frameBreakAfterSequence;
|
||||||
|
}
|
||||||
|
if (data.frameBreakDelay) {
|
||||||
|
viewerStore.frameBreakDelay = data.frameBreakDelay;
|
||||||
|
}
|
||||||
|
if (data.frameBreakSize) {
|
||||||
|
viewerStore.frameBreakSize = data.frameBreakSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.frameBreak) {
|
||||||
|
viewerStore.frameBreakRules = data.frameBreak;
|
||||||
|
}
|
||||||
|
if (data.decodeANSI) {
|
||||||
|
viewerStore.enableAnsiDecode = data.decodeANSI;
|
||||||
|
}
|
||||||
|
if (data.frameFilterValue) {
|
||||||
|
viewerStore.filterValue = data.frameFilterValue;
|
||||||
|
}
|
||||||
|
if (data.autoUpdate) {
|
||||||
|
viewerStore.dataFilterAutoUpdate = data.autoUpdate;
|
||||||
|
}
|
||||||
|
if (data.updateInterval) {
|
||||||
|
viewerStore.batchUpdateTime = data.updateInterval;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.sendFramePrefix) {
|
||||||
|
viewerStore.textPrefixValue = data.sendFramePrefix;
|
||||||
|
}
|
||||||
|
if (data.sendFrameSuffix) {
|
||||||
|
viewerStore.textSuffixValue = data.sendFrameSuffix;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.loopSendInterval) {
|
||||||
|
viewerStore.loopSendFreq = data.loopSendInterval;
|
||||||
|
}
|
||||||
|
if (data.sendBoxIsText) {
|
||||||
|
viewerStore.isSendTextFormat = data.sendBoxIsText;
|
||||||
|
}
|
||||||
|
if (data.sendBox) {
|
||||||
|
viewerStore.uartInputTextBox = data.sendBox;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.winLeft) {
|
||||||
|
viewerStore.winLeft = data.winLeft;
|
||||||
|
}
|
||||||
|
if (data.winRight) {
|
||||||
|
viewerStore.winRight = data.winRight;
|
||||||
|
}
|
||||||
|
if (data.winAutoLayout !== undefined) {
|
||||||
|
viewerStore.winAutoLayout = data.winAutoLayout;
|
||||||
|
}
|
||||||
|
if (data.winLayoutMode) {
|
||||||
|
viewerStore.winLayoutMode = data.winLayoutMode;
|
||||||
|
}
|
||||||
|
|
||||||
|
viewerStore.reloadFrameBreak();
|
||||||
|
emit('winSizeRefresh', '');
|
||||||
|
} catch (error) {
|
||||||
|
globalNotifyRightSide('导入失败', "error");
|
||||||
|
console.log("error", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
reader.readAsText(file);
|
||||||
|
};
|
||||||
|
|
||||||
|
input.click();
|
||||||
|
}
|
||||||
|
|
||||||
|
const viewerStore = useDataViewerStore();
|
||||||
|
|
||||||
|
function exportSettings() {
|
||||||
|
let obj = {
|
||||||
|
version: "v0.1.0",
|
||||||
|
|
||||||
|
/* Macro Window */
|
||||||
|
macroButtons: macroData.value,
|
||||||
|
|
||||||
|
/* Config Window */
|
||||||
|
configTab: viewerStore.configPanelTab,
|
||||||
|
showText: viewerStore.showText,
|
||||||
|
showHex: viewerStore.showHex,
|
||||||
|
showHexdump: viewerStore.showHexdump,
|
||||||
|
showTimestamp: viewerStore.showTimestamp,
|
||||||
|
lineWrap: viewerStore.enableLineWrap,
|
||||||
|
RxHexdumpColor: viewerStore.RxHexdumpColor,
|
||||||
|
TxHexdumpColor: viewerStore.TxHexdumpColor,
|
||||||
|
frameBreak: viewerStore.frameBreakRules,
|
||||||
|
frameBreakSequence: viewerStore.frameBreakSequence,
|
||||||
|
frameBreakAfterSequence: viewerStore.frameBreakAfterSequence,
|
||||||
|
frameBreakDelay: viewerStore.frameBreakDelay,
|
||||||
|
frameBreakSize: viewerStore.frameBreakSize,
|
||||||
|
|
||||||
|
decodeANSI: viewerStore.enableAnsiDecode,
|
||||||
|
frameFilterValue: viewerStore.filterValue,
|
||||||
|
autoUpdate: viewerStore.dataFilterAutoUpdate,
|
||||||
|
updateInterval: viewerStore.batchUpdateTime,
|
||||||
|
|
||||||
|
sendFramePrefix: viewerStore.textPrefixValue,
|
||||||
|
sendFrameSuffix: viewerStore.textSuffixValue,
|
||||||
|
|
||||||
|
/* Viewer Window */
|
||||||
|
loopSendInterval: viewerStore.loopSendFreq,
|
||||||
|
sendBoxIsText: viewerStore.isSendTextFormat,
|
||||||
|
sendBox: viewerStore.uartInputTextBox,
|
||||||
|
|
||||||
|
/* layout settings */
|
||||||
|
winLeft: viewerStore.winLeft,
|
||||||
|
winRight: viewerStore.winRight,
|
||||||
|
winAutoLayout: viewerStore.winAutoLayout,
|
||||||
|
winLayoutMode: viewerStore.winLayoutMode,
|
||||||
|
};
|
||||||
|
|
||||||
|
const dataStr = JSON.stringify(obj, null, 2);
|
||||||
|
const blob = new Blob([dataStr], { type: 'application/json' });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.download = "settingsBackup.json";
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetSettings() {
|
||||||
|
localStorage.clear();
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue