import { defineComponent, nextTick, onBeforeUpdate, onMounted, onUnmounted, ref } from 'vue';import ChartWrapper from '@/components/chart-wrapper';import props from './props';import { AddChartType, PanelModel, IGridPos } from '@/typings';
import { DashboardModule, sortGridPanels } from '@modules/dashboard';import { getPluginTypes, handleInitChartPlugin, handleInitDataSource } from '@/utils/dashboard';import Loading from '@/components/loading';import { GRID_COL_NUM, GRID_ROW_HEIGHT, GRID_ROW_MARGIN, initPanel } from '@/constants';import { debounce } from 'lodash';import { deepClone } from '@/utils';import AddPanel from '@dashboard/grid-panel/add-panel';import TabPanel from '@dashboard/tab-panel/index';import { GridItem, GridLayout } from 'v3-grid-layout';import 'v3-grid-layout/dist/style.css';import './index.scss';import Row from './Row';import EventBus from '@/utils/eventBus';
export default defineComponent({ name: 'GridPanelPlugin', props, emits: ['ready', 'delete', 'mounted'], setup(props, { emit }) { const layout = ref<IGridPos[]>([]); const gridLayout = ref<InstanceType<typeof GridLayout>>(null); const gridItem = ref<InstanceType<typeof GridItem>[]>([]); const dashboardPanel = ref<Element>(null); onBeforeUpdate(() => { gridItem.value = []; }); function drag(e: DragEvent) { const parentRect = dashboardPanel.value.getBoundingClientRect(); let mouseInGrid = false; if ( ((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) { mouseInGrid = true; } if (mouseInGrid === true && (layout.value.findIndex(item => item.i === 'drop')) === -1) { layout.value.push({ x: (layout.value.length * 2) % (GRID_COL_NUM || 12), y: layout.value.length + (GRID_COL_NUM || 12), // puts it at the bottom w: 1, h: 1, i: 'drop', }); } const index = layout.value.findIndex(item => item.i === 'drop'); if (index !== -1) { const el = gridItem.value[index]; el.dragging.data = { top: mouseXY.y - parentRect.top, left: mouseXY.x - parentRect.left }; const new_pos = el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left); if (mouseInGrid === true) { gridLayout.value.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 1, 1); DragPos.i = String(index); DragPos.x = layout.value[index].x; DragPos.y = layout.value[index].y; } if (mouseInGrid === false) { gridLayout.value.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 1, 1); layout.value = layout.value.filter(obj => obj.i !== 'drop'); } } }
function dragend(e: DragEvent) { // const parentRect = document.getElementById('dashboard-panel').getBoundingClientRect(); const parentRect = dashboardPanel.value.getBoundingClientRect(); let mouseInGrid = false; if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) { mouseInGrid = true; } if (mouseInGrid === true) { gridLayout.value.dragEvent('dragend', 'drop', DragPos.x, DragPos.y, 1, 1); layout.value = layout.value.filter(obj => obj.i !== 'drop'); // UNCOMMENT below if you want to add a grid-item this.layout.push({ x: DragPos.x, y: DragPos.y, w: 1, h: 1, i: DragPos.i, }); this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,1,1); try { this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block"; } catch { } } }
return { gridLayout, gridItem, dashboardPanel, layout, movedId, inited, isLayoutReady, isShowEditRowDialog, rowForm, }; }, render() { if (!this.inited) { return (<Loading/>); } return ( <div ref='dashboardPanel' id='dashboard-panel' class={'dashboard-panel flex-1'}> <GridLayout ref='gridLayout' layout={this.layout} col-num={GRID_COL_NUM} row-height={GRID_ROW_HEIGHT} is-resizabl={this.editable} is-draggable={this.editable} vertical-compact={true} use-css-transforms={false} margin={GRID_ROW_MARGIN} on-layout-updated={this.handleLayoutUpdated} on-layout-ready={this.onLayoutReady} > { this.layout.map((item) => { return ( <GridItem ref={(el: any) => { if (el) { this.gridItem.push(el); } }} {{...item}} > {chart} </GridItem> ); }) } </GridLayout> </div> ); },});
评论