From cc195aa972e48e1aa00d8c3a51676258e5a78b2f Mon Sep 17 00:00:00 2001 From: jianglinjun Date: Thu, 11 Jul 2024 17:11:12 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0BI=E5=9B=BE?= =?UTF-8?q?=E8=A1=A8=E6=94=AF=E6=8C=81=E6=95=B0=E6=8D=AE=E4=B8=8B=E9=92=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/control/chart/chart.scss | 30 ++++++++++++ src/control/chart/chart.tsx | 93 +++++++++++++++++++++++++++++++++++- src/locale/en/index.ts | 1 + src/locale/zh-CN/index.ts | 1 + 4 files changed, 123 insertions(+), 2 deletions(-) diff --git a/src/control/chart/chart.scss b/src/control/chart/chart.scss index 38a5c81f..6dc0f9d7 100644 --- a/src/control/chart/chart.scss +++ b/src/control/chart/chart.scss @@ -27,6 +27,7 @@ $control-chart: (); } } @include e('chart-grid-container') { + position: relative; flex: 1; height: 50%; @include when('bottom') { @@ -59,6 +60,35 @@ $control-chart: (); width: 100%; height: 100%; } + @include e('drill-down') { + position: absolute; + top: 0; + left: 0; + width: 150px; + padding: getCssVar('spacing', 'tight') 0; + background: getCssVar('color', 'bg', 1); + border: 1px solid getCssVar(color, border); + border-radius: getCssVar('border-radius', small); + box-shadow: getCssVar(color, elevated); + + @include m('item') { + display: flex; + gap: getCssVar('spacing', 'tight'); + align-items: center; + height: 40px; + padding: getCssVar('spacing', 'tight') getCssVar('spacing', 'base-loose'); + font-size: getCssVar('font-size', 'regular'); + cursor: pointer; + + &:hover { + background-color: getCssVar(color, fill, 1); + } + } + + @include m('item-text') { + margin-bottom: getCssVar('spacing', 'super-tight'); + } + } @include e('grid') { flex: 1; height: auto; diff --git a/src/control/chart/chart.tsx b/src/control/chart/chart.tsx index 359c45b9..14509dcc 100644 --- a/src/control/chart/chart.tsx +++ b/src/control/chart/chart.tsx @@ -1,4 +1,8 @@ -import { useControlController, useNamespace } from '@ibiz-template/vue3-util'; +import { + useControlController, + useNamespace, + useClickOutside, +} from '@ibiz-template/vue3-util'; import { defineComponent, nextTick, @@ -26,13 +30,20 @@ const ChartControl = defineComponent({ isSimple: { type: Boolean, required: false }, data: { type: Array, required: false }, }, - setup(props) { + emits: ['drillDown'], + setup(props, { emit }) { const c = useControlController((...args) => new ChartController(...args)); const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`); const chartRef = ref(); const maxHeight = ref(0); // 图表表格的高度,后续会根据表格位置进行计算 const uuid = createUUID(); + const showCheck = ref(false); + const contextMenuPos = ref({}); // 右键菜单位置 + const contextMenuRef = ref(); // 右键菜单 + let func: { stop: () => void }; + let tempParams: IData; // 点击的图表回调事件参数 + // 本地数据模式 const initSimpleData = (): void => { if (!props.data) { @@ -83,6 +94,19 @@ const ChartControl = defineComponent({ return c.state.gridData || []; }; + const clickContextMenu = (params: IParams) => { + if (params.event) { + const event: PointerEvent = params.event.event; + event.stopPropagation(); + event.preventDefault(); + const { offsetX, offsetY } = params.event; + contextMenuPos.value = { + top: `${offsetY}px`, + left: `${offsetX + 16}px`, + }; + } + }; + // 容器大小变化监听器 let resizeObserver: ResizeObserver; @@ -97,8 +121,34 @@ const ChartControl = defineComponent({ resizeObserver.observe(chartRef.value); } setHeight(); + if (props.modelData.controlParam?.ctrlParams?.ENABLEDRILLDOWN) { + // 开启数据钻取，重写chart的click事件 + chart.on('click', (params: IData) => { + tempParams = params; + chart.dispatchAction({ type: 'hideTip' }); + showCheck.value = true; + c.changeTooltipState(false); + func = useClickOutside(contextMenuRef, () => { + showCheck.value = false; + c.changeTooltipState(true); + func.stop(); + }); + clickContextMenu(params); + }); + } }); + // 查看明细 + const openDrillDown = (_event: MouseEvent) => { + showCheck.value = false; + if (func) { + func.stop(); + } + c.changeTooltipState(true); + const param = c.handleDrillDownParam(tempParams); + emit('drillDown', param); + }; + // 表格显示时计算表格的高度 watch( () => c.state.showGrid, @@ -144,6 +194,10 @@ const ChartControl = defineComponent({ ns, chartRef, uuid, + showCheck, + contextMenuPos, + contextMenuRef, + openDrillDown, renderGrid, }; }, @@ -179,6 +233,41 @@ const ChartControl = defineComponent({
{ibiz.i18n.t('control.chart.chartPlaceholder')}
+ {this.showCheck ? ( +
+
+ + + + + +
+ {ibiz.i18n.t('control.chart.drillDown')} +
+
+
+ ) : null} {this.c.state.showGrid ? (
{this.renderGrid()}
diff --git a/src/locale/en/index.ts b/src/locale/en/index.ts index 9fef7069..48380a1b 100644 --- a/src/locale/en/index.ts +++ b/src/locale/en/index.ts @@ -327,6 +327,7 @@ export default { }, chart: { chartPlaceholder: 'Chart', + drillDown: 'DrillDown', }, dashboard: { customDashboardContainer: { diff --git a/src/locale/zh-CN/index.ts b/src/locale/zh-CN/index.ts index c17c6225..eed64bcc 100644 --- a/src/locale/zh-CN/index.ts +++ b/src/locale/zh-CN/index.ts @@ -299,6 +299,7 @@ export default { }, chart: { chartPlaceholder: '图表', + drillDown: '检查明细', }, dashboard: { customDashboardContainer: { -- Gitee From 922b39b29b9bf3a00fcd8a5abe0b363bede74aaa Mon Sep 17 00:00:00 2001 From: jianglinjun Date: Thu, 11 Jul 2024 18:53:22 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/control/chart/chart.tsx | 33 ++++++++++++++++++++++----------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/src/control/chart/chart.tsx b/src/control/chart/chart.tsx index 14509dcc..c3713044 100644 --- a/src/control/chart/chart.tsx +++ b/src/control/chart/chart.tsx @@ -39,8 +39,8 @@ const ChartControl = defineComponent({ const uuid = createUUID(); const showCheck = ref(false); - const contextMenuPos = ref({}); // 右键菜单位置 - const contextMenuRef = ref(); // 右键菜单 + const drillDownPos = ref({}); // 数据下钻框位置 + const drillDownRef = ref(); // 数据下钻框 let func: { stop: () => void }; let tempParams: IData; // 点击的图表回调事件参数 @@ -94,13 +94,13 @@ const ChartControl = defineComponent({ return c.state.gridData || []; }; - const clickContextMenu = (params: IParams) => { + const computedDrillDownPos = (params: IParams) => { if (params.event) { const event: PointerEvent = params.event.event; event.stopPropagation(); event.preventDefault(); const { offsetX, offsetY } = params.event; - contextMenuPos.value = { + drillDownPos.value = { top: `${offsetY}px`, left: `${offsetX + 16}px`, }; @@ -128,12 +128,12 @@ const ChartControl = defineComponent({ chart.dispatchAction({ type: 'hideTip' }); showCheck.value = true; c.changeTooltipState(false); - func = useClickOutside(contextMenuRef, () => { + func = useClickOutside(drillDownRef, () => { showCheck.value = false; c.changeTooltipState(true); func.stop(); }); - clickContextMenu(params); + computedDrillDownPos(params); }); } }); @@ -145,7 +145,7 @@ const ChartControl = defineComponent({ func.stop(); } c.changeTooltipState(true); - const param = c.handleDrillDownParam(tempParams); + const param = c.computedDrillDownParam(tempParams); emit('drillDown', param); }; @@ -160,6 +160,17 @@ const ChartControl = defineComponent({ }, ); + watch( + () => c.state.items, + () => { + console.log(888, c.state.items); + }, + { + immediate: true, + deep: true, + }, + ); + // 绘制表格 const renderGrid = () => { return ( @@ -195,8 +206,8 @@ const ChartControl = defineComponent({ chartRef, uuid, showCheck, - contextMenuPos, - contextMenuRef, + drillDownPos, + drillDownRef, openDrillDown, renderGrid, }; @@ -235,9 +246,9 @@ const ChartControl = defineComponent({ {this.showCheck ? (