github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-02 20:33:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add grid items

Browse Source
This commit is contained in:
Qiuxia Fan 2021-12-21 13:55:43 +08:00
parent d8ff29fac5
commit 9fd5b41c3e
4 changed files with 60 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
package-lock.json generated
View File

@ -18789,24 +18789,16 @@
} }
}, },
"vue-grid-layout": { "vue-grid-layout": {
"version": "3.0.0-beta1", "version": "2.3.12",
"resolved": "https://registry.npmjs.org/vue-grid-layout/-/vue-grid-layout-3.0.0-beta1.tgz", "resolved": "https://registry.npmjs.org/vue-grid-layout/-/vue-grid-layout-2.3.12.tgz",
"integrity": "sha512-MsW0yfYNtnAO/uDhfZvkP6effxSJxvhAFbIL37x6Rn3vW9xf0WHVefKaSbQMLpSq3mXnR6ut0pg2Cd5lqIIZzg==", "integrity": "sha512-x9l4KxfH0MeB4xImanrnnTihksq8LYk3f40hm1sdiTHF2bYM+Xhae6eQsvFWEFwbYq7RVNvB80qwis1vInB+WQ==",
"requires": { "requires": {
"@interactjs/actions": "^1.10.2", "@interactjs/actions": "^1.10.2",
"@interactjs/auto-start": "^1.10.2", "@interactjs/auto-start": "^1.10.2",
"@interactjs/dev-tools": "^1.10.2", "@interactjs/dev-tools": "^1.10.2",
"@interactjs/interactjs": "^1.10.2", "@interactjs/interactjs": "^1.10.2",
"@interactjs/modifiers": "^1.10.2", "@interactjs/modifiers": "^1.10.2",
"element-resize-detector": "^1.2.1", "element-resize-detector": "^1.2.1"
"mitt": "^2.1.0"
},
"dependencies": {
"mitt": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
"integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
}
} }
}, },
"vue-hot-reload-api": { "vue-hot-reload-api": {

2
package.json
View File

@ -16,7 +16,7 @@
"three": "^0.131.3", "three": "^0.131.3",
"three-orbit-controls": "^82.1.0", "three-orbit-controls": "^82.1.0",
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-grid-layout": "^3.0.0-beta1", "vue-grid-layout": "^2.3.12",
"vue-i18n": "^9.1.9", "vue-i18n": "^9.1.9",
"vue-router": "^4.0.0-0", "vue-router": "^4.0.0-0",
"vue-types": "^4.1.1", "vue-types": "^4.1.1",

2
src/store/modules/app.ts
View File

@ -27,7 +27,7 @@ interface AppState {
utcHour: number; utcHour: number;
utcMin: number; utcMin: number;
eventStack: (() => unknown)[]; eventStack: (() => unknown)[];
timer: ReturnType<typeof setInterval> | null; timer: Nullable<any>;
} }
export const appStore = defineStore({ export const appStore = defineStore({

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

@ -20,7 +20,7 @@ limitations under the License. -->
</div> </div>
<div class="flex-h ds-main"> <div class="flex-h ds-main">
<div class="ds-layout"> <div class="ds-layout">
<grid-layout <GridLayout
v-model="layout" v-model="layout"
:col-num="12" :col-num="12"
:row-height="30" :row-height="30"
@ -29,7 +29,7 @@ limitations under the License. -->
:vertical-compact="true" :vertical-compact="true"
:use-css-transforms="true" :use-css-transforms="true"
> >
<grid-item <GridItem
v-for="item in layout" v-for="item in layout"
:static="item.static" :static="item.static"
:x="item.x" :x="item.x"
@ -40,53 +40,66 @@ limitations under the License. -->
:key="item.i" :key="item.i"
> >
<span class="text">{{ itemTitle(item) }}</span> <span class="text">{{ itemTitle(item) }}</span>
</grid-item> </GridItem>
</grid-layout> </GridLayout>
</div> </div>
<div class="ds-config">Configurations</div> <div class="ds-config">Configurations</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts">
import { ref, reactive } from "vue"; import { ref, reactive, defineComponent } from "vue";
import { ElButton } from "element-plus"; import { ElButton } from "element-plus";
import { GridLayout, GridItem, GridItemData } from "vue-grid-layout"; import VueGridLayout, { GridItemData } from "vue-grid-layout";
interface CustomData extends GridItemData { interface CustomData extends GridItemData {
label?: string;
static: boolean; static: boolean;
} }
const layout = reactive<CustomData[]>([
{ x: 0, y: 0, w: 2, h: 2, i: "0", static: false }, console.log(VueGridLayout.GridLayout);
{ x: 2, y: 0, w: 2, h: 4, i: "1", static: true }, export default defineComponent({
{ x: 4, y: 0, w: 2, h: 5, i: "2", static: false }, name: "dashboardEdit",
{ x: 6, y: 0, w: 2, h: 3, i: "3", static: false }, components: {
{ x: 8, y: 0, w: 2, h: 3, i: "4", static: false }, ElButton,
{ x: 10, y: 0, w: 2, h: 3, i: "5", static: false }, GridLayout: VueGridLayout.GridLayout,
{ x: 0, y: 5, w: 2, h: 5, i: "6", static: false }, GridItem: VueGridLayout.GridItem,
{ x: 2, y: 5, w: 2, h: 5, i: "7", static: false }, },
{ x: 4, y: 5, w: 2, h: 5, i: "8", static: false }, setup() {
{ x: 6, y: 3, w: 2, h: 4, i: "9", static: true }, const layout = reactive<CustomData[]>([
{ x: 8, y: 4, w: 2, h: 4, i: "10", static: false }, { x: 0, y: 0, w: 2, h: 2, i: "0", static: false },
{ x: 10, y: 4, w: 2, h: 4, i: "11", static: false }, { x: 2, y: 0, w: 2, h: 4, i: "1", static: true },
{ x: 0, y: 10, w: 2, h: 5, i: "12", static: false }, { x: 4, y: 0, w: 2, h: 5, i: "2", static: false },
{ x: 2, y: 10, w: 2, h: 5, i: "13", static: false }, { x: 6, y: 0, w: 2, h: 3, i: "3", static: false },
{ x: 4, y: 8, w: 2, h: 4, i: "14", static: false }, { x: 8, y: 0, w: 2, h: 3, i: "4", static: false },
{ x: 6, y: 8, w: 2, h: 4, i: "15", static: false }, { x: 10, y: 0, w: 2, h: 3, i: "5", static: false },
{ x: 8, y: 10, w: 2, h: 5, i: "16", static: false }, { x: 0, y: 5, w: 2, h: 5, i: "6", static: false },
{ x: 10, y: 4, w: 2, h: 2, i: "17", static: false }, { x: 2, y: 5, w: 2, h: 5, i: "7", static: false },
{ x: 0, y: 9, w: 2, h: 3, i: "18", static: false }, { x: 4, y: 5, w: 2, h: 5, i: "8", static: false },
{ x: 2, y: 6, w: 2, h: 2, i: "19", static: false }, { x: 6, y: 3, w: 2, h: 4, i: "9", static: true },
]); { x: 8, y: 4, w: 2, h: 4, i: "10", static: false },
console.log(layout); { x: 10, y: 4, w: 2, h: 4, i: "11", static: false },
const draggable = ref(true); { x: 0, y: 10, w: 2, h: 5, i: "12", static: false },
const resizable = ref(true); { x: 2, y: 10, w: 2, h: 5, i: "13", static: false },
const index = ref(0); { x: 4, y: 8, w: 2, h: 4, i: "14", static: false },
function itemTitle(item: any) { { x: 6, y: 8, w: 2, h: 4, i: "15", static: false },
let result = item.i; { x: 8, y: 10, w: 2, h: 5, i: "16", static: false },
if (item.static) { { x: 10, y: 4, w: 2, h: 2, i: "17", static: false },
result += " - Static"; { x: 0, y: 9, w: 2, h: 3, i: "18", static: false },
} { x: 2, y: 6, w: 2, h: 2, i: "19", static: false },
return result; ]);
} console.log(layout);
const draggable = ref(true);
const resizable = ref(true);
const index = ref(0);
function itemTitle(item: any) {
let result = item.i;
if (item.static) {
result += " - Static";
}
return result;
}
return { draggable, resizable, index, layout, itemTitle };
},
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dashboard-tool { .dashboard-tool {