添加 HTTP 数据导入导出功能
This commit is contained in:
fangxiang
parent
7d84ef3cbc
commit
9ff6a45888
|
|
@ -387,6 +387,10 @@ export default class ClientConnection {
|
|||
);
|
||||
}
|
||||
|
||||
public restartDevice() {
|
||||
this.ws?.send(JSON.stringify(new Protocol.RestartDeviceRequestEntity()));
|
||||
}
|
||||
|
||||
private _destoryed = false;
|
||||
public destory() {
|
||||
this._destoryed = true;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,204 @@
|
|||
<template>
|
||||
<q-dialog persistent v-model="show_dialog" @before-hide="resetData">
|
||||
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 35vw">
|
||||
<q-form @submit="onSubmit">
|
||||
<q-card-section class="q-ma-none q-pa-sm">
|
||||
<div class="row">
|
||||
<div class="col-11 text-h6">
|
||||
{{ $t("data import") }}
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<q-btn
|
||||
:loading="loading"
|
||||
flat
|
||||
round
|
||||
icon="close"
|
||||
color="red"
|
||||
v-close-popup
|
||||
>
|
||||
<q-tooltip>
|
||||
{{ $t("close") }}
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-card-section style="max-height: 50vh; width: 35vw" class="scroll">
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-uploader
|
||||
class="full-width"
|
||||
ref="uploader"
|
||||
:url="upload_url"
|
||||
method="post"
|
||||
:headers="generatorFileUploadHeaders"
|
||||
:label="$t('select data(DBP) file') + ':'"
|
||||
accept=".dbp"
|
||||
:hide-upload-btn="true"
|
||||
@uploaded="onUploaded"
|
||||
@failed="onFailed"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
:loading="loading"
|
||||
flat
|
||||
:label="$t('Cancel')"
|
||||
color="primary"
|
||||
v-close-popup
|
||||
/>
|
||||
<q-btn
|
||||
ref="accept"
|
||||
flat
|
||||
:label="$t('Accept')"
|
||||
:loading="loading"
|
||||
type="submit"
|
||||
color="primary"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, watch, computed } from "vue";
|
||||
import { useStore } from "src/store";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import GlobalData from "src/common/GlobalData";
|
||||
import { HttpProtocol } from "src/entities/HttpProtocol";
|
||||
import { api as viewerApi } from "v-viewer";
|
||||
|
||||
export default defineComponent({
|
||||
name: "ComponentRecoveryDatabaseDialog",
|
||||
|
||||
setup() {
|
||||
let $store = useStore();
|
||||
let $q = useQuasar();
|
||||
let $t = useI18n();
|
||||
|
||||
let show_dialog = ref(false);
|
||||
let uploader: any = ref(null);
|
||||
let loading = ref(false);
|
||||
let upload_url = ref("");
|
||||
|
||||
let select_options = [1, 2, 3, 4, 5, 6, 7, 8, 9];
|
||||
|
||||
return {
|
||||
show_dialog,
|
||||
loading,
|
||||
upload_url,
|
||||
uploader,
|
||||
select_options,
|
||||
generatorFileUploadHeaders(files: File[]) {
|
||||
if (files.length > 0) {
|
||||
return [
|
||||
{
|
||||
name: HttpProtocol.kHeaderXProductName,
|
||||
value: HttpProtocol.kHeaderDefaultValueXProductName,
|
||||
},
|
||||
{
|
||||
name: HttpProtocol.kHeaderXFileLength,
|
||||
value: files[0].size,
|
||||
},
|
||||
];
|
||||
}
|
||||
return [];
|
||||
},
|
||||
showDialog() {
|
||||
show_dialog.value = true;
|
||||
let client = GlobalData.getInstance().getCurrentClient();
|
||||
if (client) {
|
||||
let url = new URL(client.url);
|
||||
url.port =
|
||||
GlobalData.getInstance().applicationConfig?.httpserver_port ??
|
||||
HttpProtocol.DefaultHttpPort.toString();
|
||||
url.pathname = HttpProtocol.RequestUploadFile;
|
||||
url.protocol = "http:";
|
||||
url.searchParams.append("type", HttpProtocol.HttpUploadTypeDatabase);
|
||||
upload_url.value = url.toString();
|
||||
}
|
||||
},
|
||||
resetData() {
|
||||
loading.value = false;
|
||||
upload_url.value = "";
|
||||
},
|
||||
async onSubmit() {
|
||||
loading.value = true;
|
||||
try {
|
||||
$q.dialog({
|
||||
title: "Confirm",
|
||||
message: $t.t("use this file to recovery data") + "?",
|
||||
cancel: true,
|
||||
persistent: true,
|
||||
})
|
||||
.onOk(() => {
|
||||
uploader.value.upload();
|
||||
})
|
||||
.onCancel(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
} catch {}
|
||||
},
|
||||
onUploaded() {
|
||||
$q.notify({
|
||||
type: "positive",
|
||||
message: $t.t("data import") + $t.t("success") + "!",
|
||||
position: "top",
|
||||
timeout: 1000,
|
||||
});
|
||||
$q.dialog({
|
||||
title: "Confirm",
|
||||
message: $t.t(
|
||||
$t.t("data changes will take effect after the restart") +
|
||||
"!" +
|
||||
"<p class='text-red'>" +
|
||||
$t.t("reboot now") +
|
||||
"?" +
|
||||
"</p>"
|
||||
),
|
||||
html: true,
|
||||
cancel: true,
|
||||
persistent: true,
|
||||
})
|
||||
.onOk(() => {
|
||||
GlobalData.getInstance().getCurrentClient()?.restartDevice();
|
||||
$q.notify({
|
||||
type: "positive",
|
||||
message: $t.t("reboot device command sended") + "!",
|
||||
position: "top",
|
||||
timeout: 1000,
|
||||
});
|
||||
})
|
||||
.onDismiss(() => {
|
||||
loading.value = false;
|
||||
show_dialog.value = false;
|
||||
});
|
||||
},
|
||||
onFailed(info: any) {
|
||||
console.log(info);
|
||||
$q.notify({
|
||||
type: "warning",
|
||||
message: $t.t("data import") + $t.t("fail") + "!",
|
||||
position: "top",
|
||||
timeout: 1000,
|
||||
});
|
||||
loading.value = false;
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,9 +1,13 @@
|
|||
export namespace HttpProtocol {
|
||||
export const DefaultHttpPort = 61429;
|
||||
export const RequestUploadFile = "/upload_file";
|
||||
export const RequestPathUpdateDBBackupFile = "/common/update_db_backup_file";
|
||||
export const RequestPathDBBackup = "/db_backup";
|
||||
|
||||
export const UploadTypeBackgroundImage = "U_T_BACKGROUND_IMAGE";
|
||||
export const UploadTypeMedia = "U_T_MEDIA";
|
||||
export const HttpUploadTypeDatabase = "U_T_DATABASE";
|
||||
|
||||
export const UploadTypeRootFS = "U_T_ROOT_FS";
|
||||
|
||||
export const kHeaderXFileLength = "X-File-Length";
|
||||
|
|
|
|||
|
|
@ -93,6 +93,10 @@ export namespace Protocol {
|
|||
return Commands.PROTOCOL_PREFIX + "SetApplicationConfig";
|
||||
}
|
||||
|
||||
public static get kRestartDeviceCommand() {
|
||||
return Commands.PROTOCOL_PREFIX + "RestartDeviceCommand";
|
||||
}
|
||||
|
||||
static _all_commands = new Set([
|
||||
Commands.kUnKnowCommand,
|
||||
Commands.kSearchDevice,
|
||||
|
|
@ -500,4 +504,15 @@ export namespace Protocol {
|
|||
key: string = "";
|
||||
value: string = "";
|
||||
}
|
||||
|
||||
export class RestartDeviceRequestEntity extends Protocol.PacketEntity {
|
||||
timestamp: number;
|
||||
constructor() {
|
||||
super();
|
||||
this.timestamp = new Date().getUTCMilliseconds();
|
||||
this.command = Protocol.Commands.kRestartDeviceCommand;
|
||||
this.flag = Protocol.PacketEntity.FLAG_REQUEST;
|
||||
this.rpc_id = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,4 +71,9 @@ export default {
|
|||
"use this image to background image": "确定使用这张图片作为背景图片吗",
|
||||
"upload background image": "上传图片",
|
||||
"view current background image": "查看当前底图",
|
||||
"select data(DBP) file": "选择数据(DBP)文件",
|
||||
"use this file to recovery data": "使用这个文件恢复数据",
|
||||
"data changes will take effect after the restart": "数据更改将在重启后生效",
|
||||
"reboot now": "现在重启",
|
||||
"reboot device command sended": "重启指令已发送",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@
|
|||
icon="backup"
|
||||
:label="$t('data import')"
|
||||
class="q-mr-sm"
|
||||
@click="$refs.recovery_database_dialog.showDialog()"
|
||||
/>
|
||||
<q-btn
|
||||
stretch
|
||||
|
|
@ -38,6 +39,7 @@
|
|||
icon="restore"
|
||||
:label="$t('data export')"
|
||||
class="q-mr-sm"
|
||||
@click="backupDB"
|
||||
/>
|
||||
|
||||
<q-space />
|
||||
|
|
@ -61,6 +63,7 @@
|
|||
</div>
|
||||
<grid-setting-dialog ref="grid_setting_dialog" />
|
||||
<background-image-dialog ref="background_image_dialog" />
|
||||
<recovery-database-dialog ref="recovery_database_dialog" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -69,18 +72,29 @@ import { useStore } from "src/store";
|
|||
|
||||
import GridSettingDialog from "src/components/GridSettingDialog.vue";
|
||||
import BackgroundImageDialog from "src/components/BackgroundImageDialog.vue";
|
||||
import RecoveryDatabaseDialog from "src/components/RecoveryDatabaseDialog.vue";
|
||||
|
||||
import EventBus, { EventNamesDefine } from "src/common/EventBus";
|
||||
import { Protocol } from "src/entities/WSProtocol";
|
||||
import GlobalData from "src/common/GlobalData";
|
||||
import { api } from "boot/axios";
|
||||
import { HttpProtocol } from "src/entities/HttpProtocol";
|
||||
import { openURL, useQuasar } from "quasar";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
export default defineComponent({
|
||||
name: "PageTopToolBar",
|
||||
|
||||
components: { GridSettingDialog, BackgroundImageDialog },
|
||||
components: {
|
||||
GridSettingDialog,
|
||||
BackgroundImageDialog,
|
||||
RecoveryDatabaseDialog,
|
||||
},
|
||||
|
||||
setup() {
|
||||
let $store = useStore();
|
||||
let $q = useQuasar();
|
||||
let $t = useI18n();
|
||||
|
||||
interface _ResponseMessage {
|
||||
packet: Protocol.PacketEntity;
|
||||
|
|
@ -119,7 +133,34 @@ export default defineComponent({
|
|||
}
|
||||
);
|
||||
|
||||
return {};
|
||||
return {
|
||||
async backupDB() {
|
||||
let client = GlobalData.getInstance().getCurrentClient();
|
||||
if (client) {
|
||||
let url = new URL(client.url);
|
||||
url.port =
|
||||
GlobalData.getInstance().applicationConfig?.httpserver_port ??
|
||||
HttpProtocol.DefaultHttpPort.toString();
|
||||
url.pathname = HttpProtocol.RequestPathUpdateDBBackupFile;
|
||||
url.protocol = "http:";
|
||||
console.log(url.toString());
|
||||
let response = await api.get(url.toString());
|
||||
console.log(response.data);
|
||||
if (response.status == 200 && response && response.data) {
|
||||
url.pathname =
|
||||
HttpProtocol.RequestPathDBBackup + "/" + response.data;
|
||||
openURL(url.toString());
|
||||
} else {
|
||||
$q.notify({
|
||||
type: "warning",
|
||||
message: $t.t("data export ") + $t.t("fail") + "!",
|
||||
position: "top",
|
||||
timeout: 1000,
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue