feat: 添加计算grid位置

apps/shalu-bigscreen-designer/src/views/designer/component/ComponentWrapper.vue

@@ -57,7 +57,7 @@ const { componentData } = defineProps<{ componentData: CustomElement }>();
 const component =
   componentData.componentType === "group"
     ? ""
-    : defineAsyncComponent(asyncComponentAll[componentData.componentType]);
+    : defineAsyncComponent(asyncComponentAll[componentData.componentType as keyof typeof asyncComponentAll]);
 
 const componentWrapperRef = ref<HTMLElement | null>(null);
 const stageStore = useStageStore();

apps/shalu-bigscreen-designer/src/views/designer/component/MenuBar.vue

@@ -236,7 +236,7 @@ useKeyPress('ctrl.shift.z', () => !actionStore.redoDisabled && actionStore.actio
 useKeyPress('ctrl.g', () => projectStore.selectedElementKeys.length > 1 && actionStore.actionGroup(), { exactMatch: true });
 useKeyPress('ctrl.shift.g', () => !ungroupDisabled.value && actionStore.actionUngroup(), { exactMatch: true });
 // 删除
-useKeyPress('del', () => projectStore.selectedElementKeys.length && handleDeleteElements(), { exactMatch: true });
+useKeyPress('delete', () => projectStore.selectedElementKeys.length && handleDeleteElements(), { exactMatch: true });
 // 调整层级
 useKeyPress('ctrl.up', () => projectStore.selectedElementKeys.length && actionStore.actionLayer(LayerEnum.UP), { exactMatch: true });
 useKeyPress('ctrl.down', () => projectStore.selectedElementKeys.length && actionStore.actionLayer(LayerEnum.DOWN), { exactMatch: true });

apps/shalu-bigscreen-designer/src/views/view/component/RenderComponent.vue

@@ -9,13 +9,13 @@
 <script setup lang="ts">
 import type { CustomElement } from '#/project';
 import { defineProps, ref, defineAsyncComponent } from 'vue';
-import { asyncComponentAll } from 'shalu-dashboard-ui';
+import { asyncComponentAll } from '@shalu/dashboard-ui';
 import Container from '@/components/Container/index.vue';
 
 const props = defineProps<{
   element: CustomElement;
 }>();
-const component = defineAsyncComponent(asyncComponentAll[props.element.componentType]);
+const component = defineAsyncComponent(asyncComponentAll[props.element.componentType  as keyof typeof asyncComponentAll]);
 const containerStyle = ref({
   width: `${props.element.container.props.width}px`,
   height: `${props.element.container.props.height}px`,

packages/shalu-dashboard-ui/components/charts/Bar/BasicBar/src/props.ts

@@ -57,7 +57,7 @@ series['bar' as unknown as number] = {
   // @ts-ignore
   fixedBarWidth: false,
   barWidth: 'auto',
-  barGap: '30%',
+  barGap: '10%',
   barCategoryGap: '20%',
   itemStyle: {
     borderColor: '#ccc',
@@ -90,17 +90,16 @@ export const defaultPropsValue: EChartsOption = {
     dataSource: {
       sourceType: DataSourceType.STATIC,
       data: {
-        xData: ['轴标签A', '轴标签B', '轴标签C', '轴标签D'],
         series: [
           {
             type: 'bar',
             name: '系列1',
-            data: [89.3, 92.1, 94.4, 85.4]
+            data: [10, 30, 20, 40]
           },
           {
             type: 'bar',
             name: '系列2',
-            data: [95.8, 89.4, 91.2, 76.9]
+            data: [15, 35, 25, 45]
           },
         ]
       },

packages/shalu-dashboard-ui/components/charts/config/index.ts

@@ -47,12 +47,15 @@ export const chartDefaultConfig: EChartsOption = {
       color: "#FFFFFFFF",
     },
     top: 32,
+    bottom: 'auto',
+    left: 'center',
+    right: 'auto',
   },
   // 布局
   grid: {
     bottom: 34,
     right: 20,
-    left: 50,
+    left: 20,
     top: 60,
   },
   // x轴
@@ -100,7 +103,7 @@ export const chartDefaultConfig: EChartsOption = {
         color: "#36485f",
       },
     },
-    type: "category",
+    type: "value",
     name: '',
     nameLocation: "middle",
     nameTruncate: {

packages/shalu-dashboard-ui/components/charts/hooks/useChartOptions.ts

@@ -24,6 +24,8 @@ export const useChartOptions = (chartProps: Record<string, any>) => {
   const { run, refresh, cancel, data, loading } = useRequest(server.value, {
     defaultParams: chartProps.dataSource.params,
     manual: true,
+    cacheKey: chartProps.dataSource.url,
+    cacheTime: (chartProps.dataSource?.refreshTime || 0) * 1000,
     pollingInterval: (chartProps.dataSource?.refreshTime || 0) * 1000, // 刷新时间
     onError: (error) => {
       console.error(error);
@@ -81,6 +83,43 @@ export const useChartOptions = (chartProps: Record<string, any>) => {
     }
   );
 
+  // 获取grid
+  const getGrid = (opt: EChartsOption) => {
+    let bottom = 34, right = 20, left = 30, top = 20;
+    // 有标题
+    if(!Array.isArray(opt.title) && opt.title?.show) {
+      top += 20;
+    }
+    // 图例位置
+    if(!Array.isArray(opt.legend) && opt.legend?.show) {
+      if(opt.legend.left === 'center' && opt.legend.top !== 'auto') {
+        top += 20;
+      }
+      if(opt.legend.left === 'center' && opt.legend.bottom !== 'auto') {
+        bottom += 20;
+      }
+      if(opt.legend.top === 'center' && opt.legend.left !== 'auto') {
+        left += 70;
+      }
+      if(opt.legend.top === 'center' && opt.legend.right !== 'auto') {
+        right += 50;
+      }
+    }
+    if(!Array.isArray(opt.xAxis) && opt.xAxis?.name) {
+      bottom += 20;
+    }
+    if(!Array.isArray(opt.yAxis) && opt.yAxis?.name) {
+      left += 20;
+    }
+
+    return {
+      bottom,
+      left,
+      right,
+      top
+    }
+  }
+
   const options = computed((): EChartsOption => {
     const opt = omit(chartProps, [
       "width",
@@ -88,6 +127,10 @@ export const useChartOptions = (chartProps: Record<string, any>) => {
       "dataSource",
     ]) as EChartsOption;
 
+    if(!Array.isArray(opt.title) && !opt.title?.show && !Array.isArray(opt.legend) && opt.legend) {
+      opt.legend.top = 12;
+    }
+
     // 通用标签
     const label = opt?.label || {};
     const result = defaultsDeep(
@@ -97,13 +140,13 @@ export const useChartOptions = (chartProps: Record<string, any>) => {
         series: (series.value as any[])?.map((item: any) => {
           // 每个类型的图，可以单独设置series.类型
           const customSet = (opt.series as EChartsOption)?.[item.type] || {};
-          // TODO 动态计算上下左右距离
           return {
             ...label,
             ...item,
-            ...customSet
+            ...customSet,
           }
         }),
+        grid: getGrid(opt)
       },
       opt
     );