diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts index 3c7740d1..35d65d50 100644 --- a/src/locales/lang/en.ts +++ b/src/locales/lang/en.ts @@ -100,6 +100,8 @@ const msg = { id: "ID", setRoot: "Set this to root", setNormal: "Set this to normal", + export: "Export Dashboard Templates", + import: "Import Dashboard Templates", hourTip: "Select Hour", minuteTip: "Select Minute", secondTip: "Select Second", diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts index 9f950a96..ba53623b 100644 --- a/src/locales/lang/zh.ts +++ b/src/locales/lang/zh.ts @@ -100,6 +100,8 @@ const msg = { id: "编号", setRoot: "设置成为根", setNormal: "设置成为普通", + export: "导出仪表板模板", + import: "导入仪表板模板", hourTip: "选择小时", minuteTip: "选择分钟", secondTip: "选择秒数", diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index d00a43e3..19019a2d 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -413,8 +413,8 @@ export const dashboardStore = defineStore({ this.dashboards.push({ id: json.id, name: this.currentDashboard.name, - layer: this.layerId, - entity: this.entity, + layer: this.currentDashboard.layer, + entity: this.currentDashboard.entity, isRoot: true, }); const key = [ diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts index b0104a75..1ade1404 100644 --- a/src/types/dashboard.ts +++ b/src/types/dashboard.ts @@ -16,7 +16,7 @@ */ export type DashboardItem = { - id: string; + id?: string; entity: string; layer: string; isRoot: string; diff --git a/src/utils/file.ts b/src/utils/file.ts new file mode 100644 index 00000000..0902bf8d --- /dev/null +++ b/src/utils/file.ts @@ -0,0 +1,44 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export const readFile = (event: any) => { + return new Promise((resolve) => { + const { files } = event.target; + if (files.length < 1) { + return; + } + const file = files[0]; + const reader: FileReader = new FileReader(); + reader.readAsText(file); + reader.onload = function () { + if (typeof this.result === "string") { + resolve(JSON.parse(this.result)); + } + }; + }); +}; +export const saveFile = (data: any, name: string) => { + const newData = JSON.stringify(data); + const tagA = document.createElement("a"); + tagA.download = name; + tagA.style.display = "none"; + const blob = new Blob([newData]); + tagA.href = URL.createObjectURL(blob); + document.body.appendChild(tagA); + tagA.click(); + document.body.removeChild(tagA); +}; diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue index 6f7ce640..0f047482 100644 --- a/src/views/dashboard/List.vue +++ b/src/views/dashboard/List.vue @@ -36,12 +36,13 @@ limitations under the License. -->
+ @@ -59,7 +60,7 @@ limitations under the License. --> @confirm="setRoot(scope.row)" > @@ -77,6 +78,27 @@ limitations under the License. --> +
+ + + {{ t("export") }} + + + + + +
@@ -89,6 +111,7 @@ import { useAppStoreWithOut } from "@/store/modules/app"; import { useDashboardStore } from "@/store/modules/dashboard"; import router from "@/router"; import { DashboardItem } from "@/types/dashboard"; +import { saveFile, readFile } from "@/utils/file"; const appStore = useAppStoreWithOut(); const dashboardStore = useDashboardStore(); @@ -109,19 +132,58 @@ const dashboards = ref([]); const searchText = ref(""); const loading = ref(false); const multipleTableRef = ref>(); +const multipleSelection = ref([]); +const handleSelectionChange = (val: DashboardItem[]) => { + multipleSelection.value = val; +}; setList(); - async function setList() { await dashboardStore.setDashboards(); dashboards.value = dashboardStore.dashboards; } -const handleView = (row: DashboardItem) => { +async function importTemplates(event: any) { + const arr: any = await readFile(event); + loading.value = true; + for (const item of arr) { + const { layer, name, entity, isRoot, children } = item.configuration; + const index = dashboardStore.dashboards.findIndex( + (d: DashboardItem) => d.id === item.id + ); + const p: DashboardItem = { + name: name, + layer: layer, + entity: entity, + isRoot: isRoot, + }; + if (index > -1) { + p.id = item.id; + } + dashboardStore.setCurrentDashboard(p); + dashboardStore.setLayout(children); + await dashboardStore.saveDashboard(); + } + dashboards.value = dashboardStore.dashboards; + loading.value = false; + const el: any = document.getElementById("dashboard-file"); + el!.value = ""; +} +function exportTemplates() { + const templates = multipleSelection.value.map((d: DashboardItem) => { + const key = [d.layer, d.entity, d.name.split(" ").join("-")].join("_"); + const layout = JSON.parse(sessionStorage.getItem(key) || "{}"); + return layout; + }); + const name = `dashboards.json`; + saveFile(templates, name); +} +function handleView(row: DashboardItem) { dashboardStore.setCurrentDashboard(row); router.push( `/dashboard/${row.layer}/${row.entity}/${row.name.split(" ").join("-")}` ); -}; +} + async function setRoot(row: DashboardItem) { const items: any[] = []; loading.value = true; @@ -285,4 +347,24 @@ function searchDashboards() { box-shadow: 0px 1px 4px 0px #00000029; border-radius: 5px; } + +.toggle-selection { + margin-top: 20px; + background-color: #fff; +} + +.btn { + width: 220px; + font-size: 13px; +} + +.import-template { + display: none; +} + +.input-label { + display: inline; + line-height: inherit; + cursor: pointer; +}