From 85c3564765f9bc5bfec52fbe67b475c494d3c4b0 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Thu, 15 May 2025 17:05:21 +0800 Subject: [PATCH] feat: dashboard --- frontend/components.d.ts | 3 + .../src/views/dashboard/PreviewDashboard.vue | 23 ++- .../views/dashboard/canvas/DsCanvasCore.vue | 169 +++++++++--------- 3 files changed, 97 insertions(+), 98 deletions(-) diff --git a/frontend/components.d.ts b/frontend/components.d.ts index 505c5408..e8f6eea3 100644 --- a/frontend/components.d.ts +++ b/frontend/components.d.ts @@ -12,6 +12,7 @@ declare module 'vue' { ElButton: typeof import('element-plus/es')['ElButton'] ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] ElDialog: typeof import('element-plus/es')['ElDialog'] + ElDrawer: typeof import('element-plus/es')['ElDrawer'] ElDropdown: typeof import('element-plus/es')['ElDropdown'] ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] @@ -23,10 +24,12 @@ declare module 'vue' { ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElOption: typeof import('element-plus/es')['ElOption'] ElPagination: typeof import('element-plus/es')['ElPagination'] + ElRow: typeof import('element-plus/es')['ElRow'] ElSelect: typeof import('element-plus/es')['ElSelect'] ElSlider: typeof import('element-plus/es')['ElSlider'] ElTable: typeof import('element-plus/es')['ElTable'] ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] + ElTableV2: typeof import('element-plus/es')['ElTableV2'] ElTabPane: typeof import('element-plus/es')['ElTabPane'] ElTabs: typeof import('element-plus/es')['ElTabs'] ElTooltip: typeof import('element-plus/es')['ElTooltip'] diff --git a/frontend/src/views/dashboard/PreviewDashboard.vue b/frontend/src/views/dashboard/PreviewDashboard.vue index 6c726fdd..606a1da8 100644 --- a/frontend/src/views/dashboard/PreviewDashboard.vue +++ b/frontend/src/views/dashboard/PreviewDashboard.vue @@ -6,32 +6,32 @@ const baseWidth = ref(0) const baseHeight = ref(0) const baseMarginLeft = ref(0) const baseMarginTop = ref(0) -const componentData = [ +const componentData = ref([ { id: 4, x: 1, y: 1, - sizex: 2, - sizey: 2, - _dragId:0 + sizeX: 2, + sizeY: 2, + _dragId: 0 }, { id: 10, x: 2, y: 1, - sizex: 2, - sizey: 2, - _dragId:1 + sizeX: 2, + sizeY: 2, + _dragId: 1 }, { id: 7, x: 1, y: 2, - sizex: 2, - sizey: 3, - _dragId:2 + sizeX: 2, + sizeY: 3, + _dragId: 2 } -] +]) onMounted(() => { const screenWidth = window.innerWidth @@ -40,7 +40,6 @@ onMounted(() => { baseHeight.value = 100 * (screenHeight / 638) baseMarginLeft.value = 20 * (screenWidth / 1366) baseMarginTop.value = 20 * (screenHeight / 638) - nextTick(() => { if (cyGridster.value) { // @ts-ignore diff --git a/frontend/src/views/dashboard/canvas/DsCanvasCore.vue b/frontend/src/views/dashboard/canvas/DsCanvasCore.vue index ea0d1a94..5d236be2 100644 --- a/frontend/src/views/dashboard/canvas/DsCanvasCore.vue +++ b/frontend/src/views/dashboard/canvas/DsCanvasCore.vue @@ -69,6 +69,32 @@ const props = defineProps({ } }) +type Coord = { + x1: number + y1: number + x2: number + y2: number + c1: number + c2: number + el: { + x: number + y: number + sizeX: number + sizeY: number + _dragId: string | number + [key: string]: any + } +} + +type Item = { + _dragId: string | number + x: number + y: number + sizeX: number + sizeY: number + [key: string]: any +} + const { canvasComponentData, baseWidth, @@ -97,32 +123,6 @@ let isOverlay = false let itemMaxX = 0 let itemMaxY = 0 -type Coord = { - x1: number - y1: number - x2: number - y2: number - c1: number - c2: number - el: { - x: number - y: number - sizex: number - sizey: number - _dragId: string | number - [key: string]: any - } -} - -type Item = { - _dragId: string | number - x: number - y: number - sizex: number - sizey: number - [key: string]: any -} - const moveTime = 80 function debounce(func: () => void, time: number) { if (!isOverlay) { @@ -179,8 +179,8 @@ function addItemToPositionBox(item: any) { const pb = positionBox.value if (item.x <= 0 || item.y <= 0) return // Traverse the grid at the target location and add the item to it - for (let i = item.x - 1; i < item.x - 1 + item.sizex; i++) { - for (let j = item.y - 1; j < item.y - 1 + item.sizey; j++) { + for (let i = item.x - 1; i < item.x - 1 + item.sizeX; i++) { + for (let j = item.y - 1; j < item.y - 1 + item.sizeY; j++) { if (pb[j] && pb[j][i]) { // Ensure the target location is valid pb[j][i].el = item // Place the item in the corresponding position @@ -215,8 +215,8 @@ function removeItemFromPositionBox(item: any) { const pb = positionBox.value if (item.x <= 0 || item.y <= 0) return // Traverse the area occupied by the item and remove it - for (let i = item.x - 1; i < item.x - 1 + item.sizex; i++) { - for (let j = item.y - 1; j < item.y - 1 + item.sizey; j++) { + for (let i = item.x - 1; i < item.x - 1 + item.sizeX; i++) { + for (let j = item.y - 1; j < item.y - 1 + item.sizeY; j++) { if (pb[j] && pb[j][i]) { // Ensure the target location is valid pb[j][i].el = false // Remove item and set it to false or null @@ -274,15 +274,15 @@ function resizePlayer(item: Item, newSize: any) { } }) - item.sizex = newSize.sizex - item.sizey = newSize.sizey + item.sizeX = newSize.sizeX + item.sizeY = newSize.sizeY - if (item.sizex + item.x - 1 > itemMaxX) { - item.sizex = itemMaxX - item.x + 1 + if (item.sizeX + item.x - 1 > itemMaxX) { + item.sizeX = itemMaxX - item.x + 1 } - if (item.sizey + item.y > itemMaxY) { - fillPositionBox(item.y + item.sizey) + if (item.sizeY + item.y > itemMaxY) { + fillPositionBox(item.y + item.sizeY) } emptyTargetCell(item) @@ -310,21 +310,21 @@ function checkItemPosition(item: any, position: Partial<{ x: number; y: number } if (item.y < 1) item.y = 1 // Limit minimum size - if (item.sizex < 1) item.sizex = 1 - if (item.sizey < 1) item.sizey = 1 + if (item.sizeX < 1) item.sizeX = 1 + if (item.sizeY < 1) item.sizeY = 1 // Limit maximum width - if (item.sizex > itemMaxX) item.sizex = itemMaxX + if (item.sizeX > itemMaxX) item.sizeX = itemMaxX // Limit the right side to not exceed the boundary - if (item.x + item.sizex - 1 > itemMaxX) { - item.x = itemMaxX - item.sizex + 1 + if (item.x + item.sizeX - 1 > itemMaxX) { + item.x = itemMaxX - item.sizeX + 1 if (item.x < 1) item.x = 1 } // If the height of the item exceeds the current maximum number of rows, fill the position table - if (item.y + item.sizey > itemMaxY - 1) { - fillPositionBox(item.y + item.sizey - 1) + if (item.y + item.sizeY > itemMaxY - 1) { + fillPositionBox(item.y + item.sizeY - 1) } } @@ -452,11 +452,11 @@ function findClosetCoords(item: { _dragId: string | number }, tCoord: Coord) { } /** * Generate coordinates - * @param {any} item: The item object to generate coordinates for + * @param {Item} item: The item object to generate coordinates for */ -function makeCoordinate(item: any) { - let width = cellWidth.value * item.sizex - baseMarginLeft.value - let height = cellHeight.value * item.sizey - baseMarginTop.value +function makeCoordinate(item: Item) { + let width = cellWidth.value * item.sizeX - baseMarginLeft.value + let height = cellHeight.value * item.sizeY - baseMarginTop.value let left = cellWidth.value * (item.x - 1) + baseMarginLeft.value let top = cellHeight.value * (item.y - 1) + baseMarginTop.value @@ -478,8 +478,8 @@ function makeCoordinate(item: any) { * @param {any} item: The item object whose coordinates need to be changed */ function changeItemCoord(item: any) { - let width = cellWidth.value * item.sizex - baseMarginLeft.value - let height = cellHeight.value * item.sizey - baseMarginTop.value + let width = cellWidth.value * item.sizeX - baseMarginLeft.value + let height = cellHeight.value * item.sizeY - baseMarginTop.value let left = cellWidth.value * (item.x - 1) + baseMarginLeft.value let top = cellHeight.value * (item.y - 1) + baseMarginTop.value @@ -508,7 +508,7 @@ function emptyTargetCell(item: any) { belowItems.forEach(downItem => { if (downItem._dragId === item._dragId) return - let moveSize = item.y + item.sizey - downItem.y + let moveSize = item.y + item.sizeY - downItem.y if (moveSize > 0) { moveItemDown(downItem, moveSize) } @@ -522,7 +522,7 @@ function emptyTargetCell(item: any) { function canItemGoUp(item: Item) { let upperRows = 0 for (let row = item.y - 2; row >= 0; row--) { - for (let cell = item.x - 1; cell < item.x - 1 + item.sizex; cell++) { + for (let cell = item.x - 1; cell < item.x - 1 + item.sizeX; cell++) { if ( positionBox.value[row] && positionBox.value[row][cell] && @@ -575,8 +575,8 @@ function setPlayerPosition(item: Item, position: { x?: number; y?: number } = {} item.x = targetX item.y = targetY - if (item.y + item.sizey > itemMaxY) { - itemMaxY = item.y + item.sizey + if (item.y + item.sizeY > itemMaxY) { + itemMaxY = item.y + item.sizeY } } @@ -590,10 +590,10 @@ function setPlayerPosition(item: Item, position: { x?: number; y?: number } = {} function calcDiff(parent: Item, son: Item, size: number) { const diffs = [] - for (let i = son.x - 1; i < son.x - 1 + son.sizex; i++) { + for (let i = son.x - 1; i < son.x - 1 + son.sizeX; i++) { let temp_y = 0 - for (let j = parent.y - 1 + parent.sizey; j < son.y - 1; j++) { + for (let j = parent.y - 1 + parent.sizeY; j < son.y - 1; j++) { if (positionBox.value[j][i] && positionBox.value[j][i].el === false) { temp_y++ } @@ -632,7 +632,7 @@ function moveItemUp(item: Item, size: number) { function findBelowItems(item: Item) { const belowItems = {} - for (let cell = item.x - 1; cell < item.x - 1 + item.sizex; cell++) { + for (let cell = item.x - 1; cell < item.x - 1 + item.sizeX; cell++) { for (let row = item.y - 1; row < positionBox.value.length; row++) { const target = positionBox.value[row][cell] if (target && target.el) { @@ -709,18 +709,20 @@ function startMove(e: MouseEvent, item: Item, index: number) { } infoBox.value.cloneItem.classList.add('cloneNode') - document.body.append(infoBox.value.cloneItem) + if( containerRef.value ){ + containerRef.value.append(infoBox.value.cloneItem) + } infoBox.value.originX = infoBox.value.cloneItem.offsetLeft infoBox.value.originY = infoBox.value.cloneItem.offsetTop infoBox.value.oldX = item.x infoBox.value.oldY = item.y - infoBox.value.oldSizeX = item.sizex - infoBox.value.oldSizeY = item.sizey + infoBox.value.oldSizeX = item.sizeX + infoBox.value.oldSizeY = item.sizeY infoBox.value.originWidth = infoBox.value.cloneItem.offsetWidth infoBox.value.originHeight = infoBox.value.cloneItem.offsetHeight - // @ts-ignore - const itemMouseMove = e => { + + const itemMouseMove = (e: MouseEvent) => { const moveItem = _.get(infoBox.value, 'moveItem') const resizeItem = _.get(infoBox.value, 'resizeItem') @@ -731,25 +733,21 @@ function startMove(e: MouseEvent, item: Item, index: number) { const moveXSize = e.pageX - infoBox.value.startX const moveYSize = e.pageY - infoBox.value.startY - const addSizex = - moveXSize % cellWidth.value > (cellWidth.value / 4) * 1 - ? // @ts-ignore - parseInt(moveXSize / cellWidth.value + 1) - : // @ts-ignore - parseInt(moveXSize / cellWidth.value) + const addSizeX = + moveXSize % cellWidth.value > cellWidth.value / 4 + ? parseInt(String(moveXSize / cellWidth.value + 1)) + : parseInt(String(moveXSize / cellWidth.value)) - const addSizey = - moveYSize % cellHeight.value > (cellHeight.value / 4) * 1 - ? // @ts-ignore - parseInt(moveYSize / cellHeight.value + 1) - : // @ts-ignore - parseInt(moveYSize / cellHeight.value) + const addSizeY = + moveYSize % cellHeight.value > cellHeight.value / 4 + ? parseInt(String(moveYSize / cellHeight.value + 1)) + : parseInt(String(moveYSize / cellHeight.value)) - const nowX = Math.max(infoBox.value.oldSizeX + addSizex, 1) - const nowY = Math.max(infoBox.value.oldSizeY + addSizey, 1) + const nowX = Math.max(infoBox.value.oldSizeX + addSizeX, 1) + const nowY = Math.max(infoBox.value.oldSizeY + addSizeY, 1) debounce(() => { - resizePlayer(resizeItem, { sizex: nowX, sizey: nowY }) + resizePlayer(resizeItem, { sizeX: nowX, sizeY: nowY }) }, 10) const nowWidth = Math.max(infoBox.value.originWidth + moveXSize, baseWidth.value) @@ -763,7 +761,6 @@ function startMove(e: MouseEvent, item: Item, index: number) { props.dragging(e, moveItem, moveItem._dragId) moveItem.isPlayer = true - const moveXSize = e.pageX - infoBox.value.startX const moveYSize = e.pageY - infoBox.value.startY @@ -829,8 +826,8 @@ function startMove(e: MouseEvent, item: Item, index: number) { function nowItemStyle(item: Item) { return { - width: cellWidth.value * item.sizex - baseMarginLeft.value + 'px', - height: cellHeight.value * item.sizey - baseMarginTop.value + 'px', + width: cellWidth.value * item.sizeX - baseMarginLeft.value + 'px', + height: cellHeight.value * item.sizeY - baseMarginTop.value + 'px', left: cellWidth.value * (item.x - 1) + baseMarginLeft.value + 'px', top: cellHeight.value * (item.y - 1) + baseMarginTop.value + 'px' } @@ -876,12 +873,12 @@ function addItemBox(item: Item) { addItem(item, canvasComponentData.value.length - 1) }) } -// @ts-ignore -function endMove(e) { + +function endMove() { // do endMove } -// @ts-ignore -function moving(e) { + +function moving() { // do moving } @@ -907,8 +904,8 @@ defineExpose({ class="dragAndResize" ref="containerRef" @mousedown="containerMouseDown($event)" - @mouseup="endMove($event)" - @mousemove="moving($event)" + @mouseup="endMove()" + @mousemove="moving()" >