github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-14 11:21:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add options data

Browse Source
This commit is contained in:
Qiuxia Fan
2021-12-24 16:53:58 +08:00
parent 7627a8a15c
commit f3e7b56d56
5 changed files with 48 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/views/dashboard/Edit.vue
View File

@@ -38,29 +38,27 @@ limitations under the License. -->
<script lang="ts" setup>
import { ElButton } from "element-plus";
import GridLayout from "./panel/Layout.vue";
import { GridItemData } from "@/types/dashboard";
import { LayoutConfig } from "@/types/dashboard";
import { useDashboardStore } from "@/store/modules/dashboard";
const dashboardStore = useDashboardStore();
// fetch layout data from serve side
const layout: GridItemData[] = [
{ x: 0, y: 0, w: 2, h: 12, i: "0" },
{ x: 2, y: 0, w: 2, h: 12, i: "1" },
{ x: 4, y: 0, w: 2, h: 15, i: "2" },
{ x: 6, y: 0, w: 2, h: 9, i: "3" },
{ x: 8, y: 0, w: 2, h: 9, i: "4" },
{ x: 10, y: 0, w: 2, h: 9, i: "5" },
{ x: 0, y: 5, w: 2, h: 15, i: "6" },
{ x: 2, y: 5, w: 2, h: 15, i: "7" },
{ x: 4, y: 5, w: 2, h: 15, i: "8" },
{ x: 6, y: 3, w: 2, h: 12, i: "9" },
{ x: 8, y: 4, w: 2, h: 12, i: "10" },
{ x: 10, y: 4, w: 2, h: 12, i: "11" },
{ x: 0, y: 10, w: 2, h: 15, i: "12" },
{ x: 2, y: 10, w: 2, h: 15, i: "13" },
{ x: 4, y: 8, w: 2, h: 12, i: "14" },
{ x: 6, y: 8, w: 2, h: 12, i: "15" },
{ x: 8, y: 10, w: 2, h: 15, i: "16" },
const layout: LayoutConfig[] = [
{ x: 0, y: 0, w: 4, h: 12, i: "0" },
{ x: 4, y: 0, w: 4, h: 12, i: "1" },
{ x: 8, y: 0, w: 4, h: 15, i: "2" },
{ x: 12, y: 0, w: 4, h: 9, i: "3" },
{ x: 16, y: 0, w: 4, h: 9, i: "4" },
{ x: 20, y: 0, w: 4, h: 9, i: "5" },
{ x: 0, y: 12, w: 4, h: 15, i: "7" },
{ x: 4, y: 12, w: 4, h: 15, i: "8" },
{ x: 8, y: 15, w: 4, h: 12, i: "9" },
{ x: 12, y: 9, w: 4, h: 12, i: "10" },
{ x: 16, y: 9, w: 4, h: 12, i: "11" },
{ x: 20, y: 9, w: 4, h: 15, i: "12" },
{ x: 0, y: 27, w: 4, h: 12, i: "14" },
{ x: 4, y: 8, w: 4, h: 12, i: "15" },
{ x: 8, y: 10, w: 4, h: 15, i: "16" },
];
dashboardStore.setLayout(layout);
document.addEventListener("click", setConfig, true);

6
src/views/dashboard/panel/Layout.vue
View File

@@ -15,7 +15,7 @@ limitations under the License. -->
<template>
<grid-layout
v-model:layout="dashboardStore.layout"
:col-num="12"
:col-num="24"
:row-height="10"
:is-draggable="true"
:is-resizable="true"
@@ -36,11 +36,11 @@ limitations under the License. -->
</template>
<script lang="ts" setup>
import { useDashboardStore } from "@/store/modules/dashboard";
import { GridItemData } from "@/types/dashboard";
import { LayoutConfig } from "@/types/dashboard";
import Widget from "./Widget.vue";
const dashboardStore = useDashboardStore();
function layoutUpdatedEvent(newLayout: GridItemData) {
function layoutUpdatedEvent(newLayout: LayoutConfig) {
dashboardStore.setLayout(newLayout);
}
</script>

4
src/views/dashboard/panel/Widget.vue
View File

@@ -32,11 +32,11 @@ limitations under the License. -->
<script lang="ts" setup>
import { defineProps } from "vue";
import type { PropType } from "vue";
import { GridItemData } from "@/types/dashboard";
import { LayoutConfig } from "@/types/dashboard";
import { useDashboardStore } from "@/store/modules/dashboard";
const props = defineProps({
item: { type: Object as PropType<GridItemData> },
item: { type: Object as PropType<LayoutConfig> },
});
const dashboardStore = useDashboardStore();
function removeWidget() {