feat(uart) import and export settings
This commit is contained in:
parent
85864823af
commit
aa4e83937a
|
|
@ -1,6 +1,19 @@
|
|||
<template>
|
||||
<div class="flex items-center mb-2">
|
||||
<el-button class="mr-2" type="primary" @click="() => {
|
||||
<div class="flex items-center mb-2 flex-wrap gap-2">
|
||||
<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">
|
||||
<el-button type="primary" @click="() => {
|
||||
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>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue