wip: implement TextComponent && DigitalDashboardComponent font size scale zoom on drag

 <script lang="ts" setup>
   import type { ECharts, EChartsOption } from 'echarts';
-  import type { PropType } from 'vue';
-  import { nextTick, onMounted, onUnmounted, ref, unref } from 'vue';
+  import { PropType } from 'vue';
+  import { nextTick, onMounted, onUnmounted, ref, unref, computed } from 'vue';
   import { init } from 'echarts';
-  import { instrumentComponent1 } from './dashBoardComponent.config';
+  import {
+    DashboardComponentLayout,
+    DashBoardValue,
+    instrumentComponent1,
+    InstrumentComponentType,
+    update_instrument_1_font,
+    update_instrument_2_font,
+  } from './dashBoardComponent.config';
   import { dateUtil } from '/@/utils/dateUtil';
+  import {
+    DEFAULT_RADIO_RECORD,
+    RadioRecord,
+    DEFAULT_DATE_FORMAT,
+    fontSize,
+  } from '../../detail/config/util';
 
   const props = defineProps({
     add: {
       type: Function,
     },
     layout: {
-      type: Object as PropType<Recordable>,
+      type: Object as PropType<DashboardComponentLayout>,
       default: () => ({}),
     },
     value: {
-      type: Object as PropType<Recordable>,
+      type: Object as PropType<DashBoardValue>,
       default: () => ({}),
     },
+    radio: {
+      type: Object as PropType<RadioRecord>,
+      default: () => DEFAULT_RADIO_RECORD,
+    },
   });
 
   const getControlsWidgetId = () => `widget-chart-${props.value.id}`;
@@ -33,8 +50,21 @@
       option && unref(chartRef)?.setOption(option);
     });
   }
+  const getRadio = computed(() => {
+    const { radio } = props.radio;
+    return radio;
+  });
+
+  const beforeUpdateFn = (componentType: InstrumentComponentType) => {
+    if (componentType === 'instrument-component-1') return update_instrument_1_font;
+    if (componentType === 'instrument-component-2') return update_instrument_2_font;
+    return (_radio: number) => {};
+  };
 
   function update() {
+    const option = beforeUpdateFn(props.layout.componentType);
+    console.log(unref(chartRef));
+    unref(chartRef)?.setOption(option(unref(getRadio)) as unknown as EChartsOption);
     unref(chartRef)?.resize();
   }
 
@@ -54,12 +84,15 @@
   <div class="flex flex-col w-full h-full min-w-3 min-h-3">
     <div :id="getControlsWidgetId()" class="widget-charts flex-auto"></div>
     <div>
-      <div class="text-center">{{ props.value.name }}</div>
-      <div class="text-xs text-center text-gray-400">
-        <span>更新时间:</span>
-        <span>
-          {{ props.value.updateTime || dateUtil().format('YYYY-MM-DD HH:mm:ss') }}
-        </span>
+      <div class="text-center" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">{{
+        props.value.name
+      }}</div>
+      <div
+        class="text-xs text-center text-gray-400 truncate"
+        :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
+      >
+        <span class="mr-2">更新时间:</span>
+        <span> {{ props.value.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT) }}</span>
       </div>
     </div>
   </div>

@@ -3,10 +3,17 @@
   import { Space } from 'ant-design-vue';
   import type { DigitalDashBoardLayout, DigitalDashBoardValue } from './digitalDashBoard.config';
   import { dateUtil } from '/@/utils/dateUtil';
+  import {
+    fontSize,
+    RadioRecord,
+    DEFAULT_DATE_FORMAT,
+    DEFAULT_RADIO_RECORD,
+  } from '../../detail/config/util';
 
   const props = defineProps<{
     layout: DigitalDashBoardLayout;
     value: DigitalDashBoardValue;
+    radio: RadioRecord;
   }>();
 
   const integerPart = computed(() => {
@@ -30,6 +37,11 @@
 
     return _value;
   });
+
+  const getRadio = computed(() => {
+    const { radio } = props.radio || DEFAULT_RADIO_RECORD;
+    return radio;
+  });
 </script>
 
 <template>
@@ -37,22 +49,28 @@
     <div class="flex flex-col w-full h-full">
       <div class="flex-1 flex justify-center items-center">
         <div class="flex flex-col">
-          <Space justify="end" class="justify-end">
+          <Space justify="end" class="justify-end" :size="getRadio * 15">
             <div
               v-for="number in integerPart"
               :key="number"
               class="border border-gray-400 p-2"
-              :style="{ color: props.value.valueColor }"
+              :style="{
+                color: props.value.valueColor,
+                fontSize: fontSize({ radio: getRadio, basic: 20 }),
+              }"
             >
               {{ number }}
             </div>
           </Space>
-          <Space justify="end" class="justify-end mt-2">
+          <Space justify="end" class="justify-end mt-2" :size="getRadio * 15">
             <div
               v-for="number in decimalPart"
               :key="number"
               class="border border-gray-400 p-1"
-              :style="{ color: props.value.valueColor }"
+              :style="{
+                color: props.value.valueColor,
+                fontSize: fontSize({ radio: getRadio, basic: 18 }),
+              }"
             >
               {{ number }}
             </div>
@@ -60,13 +78,19 @@
         </div>
       </div>
 
-      <div class="text-center">
+      <div
+        class="text-center truncate"
+        :style="{ fontSize: fontSize({ radio: getRadio, basic: 18 }) }"
+      >
         <span>{{ props.value.name || '电表' }}</span>
         <span class="px-1">({{ props.value.unit || 'kw/h' }})</span>
       </div>
-      <div class="text-center mt-1 text-gray-400 text-xs">
+      <div
+        class="text-center mt-1 text-gray-400 text-xs truncate"
+        :style="{ fontSize: fontSize({ radio: getRadio, basic: 12 }) }"
+      >
         <span class="mr-1">更新时间:</span>
-        <span>{{ props.value.updateTime || dateUtil().format('YYYY-MM-DD HH:mm:ss') }}</span>
+        <span>{{ props.value.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT) }}</span>
       </div>
     </div>
     <div></div>

 import { EChartsOption } from 'echarts';
+import { fontSize } from '../../detail/config/util';
 import { visualOptionField } from '../../detail/config/visualOptions';
 import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
 import { buildUUID } from '/@/utils/uuid';
@@ -19,6 +20,7 @@ export interface GradientInfoRecord {
 }
 
 export interface DashBoardValue {
+  id: string;
   unit?: string;
   name?: string;
   updateTime?: string;
@@ -29,6 +31,7 @@ export interface DashBoardValue {
 
 export interface DashboardComponentLayout {
   chartOption: EChartsOption;
+  componentType: InstrumentComponentType;
 }
 
 export const instrumentComponent1 = (params?: { value: number; unit: string }): EChartsOption => {
@@ -199,14 +202,14 @@ export const instrumentComponent2 = (params?: {
         },
         axisLabel: {
           color: 'auto',
-          distance: 40,
-          fontSize: 14,
+          distance: 35,
+          fontSize: 6,
         },
         detail: {
           valueAnimation: true,
           formatter: `{value} ${unit}`,
           color: 'auto',
-          fontSize: '16',
+          fontSize: 14,
         },
         data: [
           {
@@ -222,6 +225,38 @@ export const getGradientValue = (key: GradientKey, record: GradientInfoRecord[])
   return record.find((item) => item.key === key)?.value;
 };
 
+export const update_instrument_1_font = (radio: number) => {
+  console.log(fontSize({ radio, basic: 14 }));
+  return {
+    series: [
+      {
+        axisLabel: {
+          fontSize: fontSize({ radio, basic: 14 }),
+        },
+        detail: {
+          fontSize: fontSize({ radio, basic: 14 }),
+        },
+      },
+    ],
+  } as EChartsOption;
+};
+
+export const update_instrument_2_font = (radio: number) => {
+  const axisLabelFontSize = fontSize({ radio, basic: 10, max: 25 });
+  return {
+    series: [
+      {
+        axisLabel: {
+          fontSize: axisLabelFontSize,
+        },
+        detail: {
+          fontSize: axisLabelFontSize,
+        },
+      },
+    ],
+  } as EChartsOption;
+};
+
 export const transformDashboardComponentConfig = (
   config: DashboardComponentLayout,
   record: DataComponentRecord,
@@ -229,7 +264,8 @@ export const transformDashboardComponentConfig = (
 ) => {
   return {
     layout: {
-      chartOption: config,
+      chartOption: config.chartOption,
+      componentType: config.componentType,
     } as DashboardComponentLayout,
     value: {
       id: buildUUID(),

 <script lang="ts" setup>
   import { computed } from '@vue/reactivity';
   import { Statistic } from 'ant-design-vue';
+  import { fontSize, RadioRecord, DEFAULT_RADIO_RECORD } from '../../detail/config/util';
   import type { TextComponentLayout, TextComponentValue } from './config';
   import { SvgIcon } from '/@/components/Icon';
   const props = defineProps({
@@ -12,6 +13,10 @@
       type: Object as PropType<TextComponentValue>,
       default: () => ({ name: '温度', value: 123 } as TextComponentValue),
     },
+    radio: {
+      type: Object as PropType<RadioRecord>,
+      default: () => DEFAULT_RADIO_RECORD as RadioRecord,
+    },
   });
 
   const getIsColumnLayout = computed(() => {
@@ -33,6 +38,11 @@
     const { showUnit, base } = props.layout;
     return base ? false : showUnit;
   });
+
+  const getRadio = computed(() => {
+    const { radio } = props.radio;
+    return radio;
+  });
 </script>
 
 <template>
@@ -47,23 +57,34 @@
             <SvgIcon
               :name="props.value.icon || 'CO2'"
               prefix="iconfont"
-              class="!w-1/2 !h-[2em]"
-              :style="{ color: props.value.iconColor }"
+              :style="{
+                color: props.value.iconColor,
+                width: fontSize({ radio: getRadio, basic: 40 }),
+                height: fontSize({ radio: getRadio, basic: 40 }),
+              }"
             />
           </div>
-          <div>{{ props.value.name }}</div>
+          <div class="truncate" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">{{
+            props.value.name
+          }}</div>
         </div>
       </div>
       <div class="w-1/2 flex justify-center">
         <Statistic
           :value="props.value.value || '123'"
           :suffix="getShowUnit ? props.value.unit : ''"
-          :value-style="{ fontSize: '1.3em', color: props.value.fontColor }"
+          class="truncate"
+          :value-style="{
+            fontSize: fontSize({ radio: getRadio, basic: 16 }),
+            color: props.value.fontColor,
+          }"
         />
       </div>
     </div>
-    <div v-if="getShowUpdate" class="text-center text-xs text-gray-400">
-      <span> 更新时间: {{ props.value.updateTime }}</span>
+    <div v-if="getShowUpdate" class="text-center text-xs text-gray-400 truncate">
+      <span :style="{ fontSize: fontSize({ radio: getRadio, basic: 12 }) }" class="truncate">
+        更新时间: {{ props.value.updateTime }}</span
+      >
     </div>
   </div>
 </template>

 <script lang="ts" setup>
   import { onMounted, useSlots } from 'vue';
   import { useUpdateCenter } from '../../hook/useUpdateCenter';
-  import type { DataSource, WidgetWrapperRegister } from './type';
+  import { DataBoardLayoutInfo } from '../../types/type';
+  import type { WidgetWrapperRegister } from './type';
+  import { DataSource } from '/@/api/dataBoard/model';
 
   const props = defineProps<{
-    dataSource: DataSource[];
+    dataSource: DataBoardLayoutInfo['record'][];
     register?: WidgetWrapperRegister;
   }>();
 

-import { DataComponentRecord } from '/@/api/dataBoard/model';
+import { DataBoardLayoutInfo } from '../../types/type';
+import { DataSource } from '/@/api/dataBoard/model';
 
-export interface DataSource {
-  id: number | string;
-  width: number;
-  height: number;
+// export interface DataSource {
+//   id: number | string;
+//   width: number;
+//   height: number;
 
-  [key: string]: any;
-}
+//   [key: string]: any;
+// }
 
-export type WidgetWrapperRegister = (dataSource: DataComponentRecord[]) => any;
+export type WidgetWrapperRegister = (dataSource: DataBoardLayoutInfo['record'][]) => any;

@@ -12,6 +12,7 @@ import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
 import DashBoardComponent from '../../components/InstrumentComponent/DashBoardComponent.vue';
 import { WidgetComponentType } from './visualOptions';
 import {
+  DashboardComponentLayout,
   instrumentComponent1,
   instrumentComponent2,
   transformDashboardComponentConfig,
@@ -72,13 +73,19 @@ frontComponentMap.set(FrontComponent.TEXT_COMPONENT_5, {
 
 frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, {
   Component: DashBoardComponent,
-  ComponentConfig: instrumentComponent1(),
+  ComponentConfig: {
+    chartOption: instrumentComponent1(),
+    componentType: FrontComponent.INSTRUMENT_COMPONENT_1,
+  } as DashboardComponentLayout,
   transformConfig: transformDashboardComponentConfig,
 });
 
 frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, {
   Component: DashBoardComponent,
-  ComponentConfig: instrumentComponent2(),
+  ComponentConfig: {
+    chartOption: instrumentComponent2(),
+    componentType: FrontComponent.INSTRUMENT_COMPONENT_2,
+  } as DashboardComponentLayout,
   transformConfig: transformDashboardComponentConfig,
 });
 

+export interface RadioRecord {
+  width: number;
+  height: number;
+  isLess: boolean;
+  radio: number;
+}
+
+export const DEFAULT_RADIO_RECORD: RadioRecord = {
+  width: 300,
+  height: 300,
+  isLess: false,
+  radio: 1,
+};
+
+export const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+
+export const calcScale = (
+  width: number,
+  height: number,
+  widthRadio: number,
+  heightRadio: number
+): RadioRecord => {
+  width = width * (widthRadio / 100);
+  height = height * (heightRadio / 100);
+
+  const temp = width * height;
+
+  const isLess = temp < 300 * 300;
+
+  const radio = temp / (300 * 300);
+
+  return {
+    width,
+    height,
+    isLess,
+    radio,
+  };
+};
+
+export const fontSize = ({ radio, basic, max }: { radio: number; basic: number; max?: number }) => {
+  let res = basic * radio;
+  if (max && res > max) res = max;
+  return res + 'px';
+};

@@ -17,9 +17,11 @@
   import { useRoute } from 'vue-router';
   import { computed, unref } from '@vue/reactivity';
   import { DataComponentRecord, DataSource, Layout } from '/@/api/dataBoard/model';
-  import { frontComponentMap, FrontComponentType } from './config/help';
+  import { frontComponentMap } from './config/help';
+  import { calcScale } from './config/util';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { DataBoardLayoutInfo } from '../types/type';
+  import { WidgetComponentType } from './config/visualOptions';
 
   const ROUTE = useRoute();
 
@@ -41,7 +43,7 @@
   const defaultWidth = 6;
   const defaultHeight = 6;
 
-  function updateSize(i: string, newH: number, newW: number, newHPx: number, newWPx: number) {
+  function updateSize(i: string, _newH: number, _newW: number, newHPx: number, newWPx: number) {
     newWPx = Number(newWPx);
     newHPx = Number(newHPx);
 
@@ -71,6 +73,7 @@
         ...item,
         width,
         height,
+        radio: calcScale(newWPx, newHPx, width, height),
       };
     });
 
@@ -82,7 +85,6 @@
 
   const itemResize = (i: string, newH: number, newW: number, newHPx: number, newWPx: number) => {
     updateSize(i, newH, newW, newHPx, newWPx);
-    console.log({ i, newH, newW, newHPx, newWPx });
   };
 
   const itemResized = (i: string, newH: number, newW: number, newHPx: number, newWPx: number) => {
@@ -157,6 +159,7 @@
 
   const getDataBoardComponent = async () => {
     try {
+      // dataBoardList.value = [];
       const data = await getDataComponent(unref(getBoardId));
       dataBoardList.value = data.data.componentData.map((item) => {
         const index = data.data.componentLayout.findIndex((each) => item.id === each.id);
@@ -184,13 +187,16 @@
 
   const getComponent = (record: DataComponentRecord) => {
     const frontComponent = record.frontId;
-    const component = frontComponentMap.get(frontComponent as FrontComponentType);
+    const component = frontComponentMap.get(frontComponent as WidgetComponentType);
     return component?.Component;
   };
 
-  const getComponentConfig = (record: DataComponentRecord, dataSourceRecord: DataSource) => {
+  const getComponentConfig = (
+    record: DataBoardLayoutInfo['record'],
+    dataSourceRecord: DataSource
+  ) => {
     const frontComponent = record.frontId;
-    const component = frontComponentMap.get(frontComponent as FrontComponentType);
+    const component = frontComponentMap.get(frontComponent as WidgetComponentType);
     return component?.transformConfig(component.ComponentConfig, record, dataSourceRecord);
   };
 
@@ -289,6 +295,7 @@
                 :add="add"
                 :remove="remove"
                 :update="update"
+                :radio="record.radio"
                 v-bind="getComponentConfig(item.record, record)"
               />
             </template>

@@ -2,5 +2,5 @@ import { Layout } from 'vue3-grid-layout';
 import { DataComponentRecord } from '/@/api/dataBoard/model';
 
 export type DataBoardLayoutInfo = Layout & {
-  record: DataComponentRecord & { width: number; height: number };
+  record: DataComponentRecord & { width: number; height: number; radio?: number };
 };