From f332356ea343e4e56a9907db028ddfbe61c0369e Mon Sep 17 00:00:00 2001
From: jianglinjun <JLJ05024111@163.com>
Date: Mon, 8 Apr 2024 16:36:37 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E5=9B=BE=E8=A1=A8=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=B1=95=E7=A4=BA=E8=A1=A8=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/control/chart/chart.scss |  69 +++++++++++++++++--
 src/control/chart/chart.tsx  | 128 ++++++++++++++++++++++++++++++-----
 2 files changed, 176 insertions(+), 21 deletions(-)

diff --git a/src/control/chart/chart.scss b/src/control/chart/chart.scss
index 8d1e792ad..da5e4069b 100644
--- a/src/control/chart/chart.scss
+++ b/src/control/chart/chart.scss
@@ -4,14 +4,75 @@ $control-chart: ();
   width: 100%;
   height: 100%;
 
-  @include e(chart) {
+  @include e(chart-grid) {
     width: 100%;
-    height: 100%;
-
+    height: 100%;    
+    @include when('show-grid') {
+      display: flex;
+      height: calc(100% - 16px);
+    }
+    @include m('bottom') {
+      flex-direction: column;
+    }
+    @include m('top') {
+      flex-direction: column-reverse;
+    }
+    @include m('left') {
+      flex-direction: row-reverse;
+    }
+    @include m('right') {
+      flex-direction: row;
+    }
     @include when('no-data') {
       display: none;
     }
   }
+  @include e('chart-container') {
+    flex: 1;
+    height: 50%;
+    @include when('bottom') {
+      width: 100%;
+      height: 50%;
+      min-height: 50%;
+    }
+    @include when('top') {
+      width: 100%;
+      height: 50%;
+      min-height: 50%;
+    }
+    @include when('left') {
+      width: 50%;
+      min-width: 50%;
+      height: 100%;
+    }
+    @include when('right') {
+      width: 50%;
+      min-width: 50%;
+      height: 100%;
+    }
+    @include when('no-grid') {
+      flex: unset;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  @include e('chart') {
+    width: 100%;
+    height: 100%;
+  }
+  @include e('grid') {
+    flex: 1;
+    height: auto;
+
+    .cell {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .el-table__body-wrapper {
+      border-bottom: 1px solid getCssVar(color, border);
+    }
+  }
 
   @include e('empty') {
     display: none;
@@ -21,4 +82,4 @@ $control-chart: ();
       display: flex;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/control/chart/chart.tsx b/src/control/chart/chart.tsx
index 02d8c0bc7..0ef363a9d 100644
--- a/src/control/chart/chart.tsx
+++ b/src/control/chart/chart.tsx
@@ -1,9 +1,18 @@
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
-import { defineComponent, onMounted, PropType, ref } from 'vue';
+import {
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  PropType,
+  ref,
+  watch,
+} from 'vue';
 import { IDEChart } from '@ibiz/model-core';
 import { init } from 'echarts';
-import './chart.scss';
+import { createUUID } from 'qx-util';
 import { ChartController, IControlProvider } from '@ibiz-template/runtime';
+import './chart.scss';
 
 const ChartControl = defineComponent({
   name: 'IBizChartControl',
@@ -19,36 +28,121 @@ const ChartControl = defineComponent({
     const c = useControlController((...args) => new ChartController(...args));
     const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
     const chartRef = ref();
+    const maxHeight = ref(320); // 图表表格的高度
+    const uuid = createUUID();
+
+    // 设置表格的高
+    const setHeight = async () => {
+      await nextTick();
+      const el = document.getElementById(uuid);
+      if (el) {
+        if (
+          c.state.gridPosition === 'bottom' ||
+          c.state.gridPosition === 'top'
+        ) {
+          maxHeight.value = el.offsetHeight / 2 - 8;
+        } else {
+          maxHeight.value = el.offsetHeight - 16;
+        }
+      }
+    };
+
+    // 获取表格的数据
+    const handleGridData = () => {
+      return c.state.gridData || [];
+    };
 
     onMounted(() => {
       const chart = init(chartRef.value);
       c.initChart(chart);
+      window.addEventListener('resize', setHeight);
+      setHeight();
+    });
+
+    // 表格显示时计算表格的高度
+    watch(
+      () => c.state.showGrid,
+      () => {
+        setHeight();
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    // 绘制表格
+    const renderGrid = () => {
+      return (
+        <el-table
+          ref='tableRef'
+          data={handleGridData()}
+          border
+          style={{ width: '100%' }}
+          max-height={maxHeight.value}
+          header-row-class-name={ns.e('grid-header')}
+        >
+          {c.state.gridHeaders.map((column: IData) => {
+            return (
+              <el-table-column
+                prop={column.id}
+                align='center'
+                label={column.name}
+              ></el-table-column>
+            );
+          })}
+        </el-table>
+      );
+    };
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('resize', setHeight);
     });
 
     return {
       c,
       ns,
       chartRef,
+      uuid,
+      renderGrid,
     };
   },
   render() {
     return (
       <iBizControlBase controller={this.c}>
-        <el-empty
-          class={[
-            this.ns.e('empty'),
-            this.ns.is('no-data', this.c.state.items.length === 0),
-          ]}
-          description='暂无数据'
-        />
-        <div
-          ref='chartRef'
-          class={[
-            this.ns.e('chart'),
-            this.ns.is('no-data', this.c.state.items.length === 0),
-          ]}
-        >
-          {ibiz.i18n.t('control.chart.chartPlaceholder')}
+        <div id={this.uuid} style={{ width: '100%', height: '100%' }}>
+          <el-empty
+            class={[
+              this.ns.e('empty'),
+              this.ns.is('no-data', this.c.state.items.length === 0),
+            ]}
+            description='暂无数据'
+          />
+          <div
+            class={[
+              this.ns.e('chart-grid'),
+              this.ns.is('no-data', this.c.state.items.length === 0),
+              this.ns.is('show-grid', this.c.state.showGrid),
+              {
+                [this.ns.em('chart-grid', this.c.state.gridPosition)]:
+                  this.c.state.showGrid,
+              },
+            ]}
+          >
+            <div
+              class={[
+                this.ns.e('chart-container'),
+                this.ns.is(this.c.state.gridPosition, this.c.state.showGrid),
+                this.ns.is('no-grid', !this.c.state.showGrid),
+              ]}
+            >
+              <div ref='chartRef' class={[this.ns.e('chart')]}>
+                {ibiz.i18n.t('control.chart.chartPlaceholder')}
+              </div>
+            </div>
+            {this.c.state.showGrid ? (
+              <div class={this.ns.e('grid')}>{this.renderGrid()}</div>
+            ) : null}
+          </div>
         </div>
       </iBizControlBase>
     );
-- 
Gitee


From e79effda605e160733c29d40948ba14c2067cee9 Mon Sep 17 00:00:00 2001
From: jianglinjun <JLJ05024111@163.com>
Date: Mon, 8 Apr 2024 16:38:36 +0800
Subject: [PATCH 2/2] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0changelog?=
 =?UTF-8?q?=E8=AF=B4=E6=98=8E=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e5c974465..8d9ad57a9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 
 ### Added
 
+- 图表支持展示表格
 - 界面逻辑支持全局和路由会话变量
 
 ### Fixed
-- 
Gitee