fix: widget updateDate overflow hidden problem

@@ -63,7 +63,6 @@
 
   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();
   }

@@ -55,7 +55,7 @@
               :key="number"
               class="border border-gray-400 p-2"
               :style="{
-                color: props.value.valueColor,
+                color: props.value.fontColor,
                 fontSize: fontSize({ radio: getRadio, basic: 20 }),
               }"
             >
@@ -68,7 +68,7 @@
               :key="number"
               class="border border-gray-400 p-1"
               :style="{
-                color: props.value.valueColor,
+                color: props.value.fontColor,
                 fontSize: fontSize({ radio: getRadio, basic: 18 }),
               }"
             >
@@ -83,11 +83,11 @@
         :style="{ fontSize: fontSize({ radio: getRadio, basic: 18 }) }"
       >
         <span>{{ props.value.name || '电表' }}</span>
-        <span class="px-1">({{ props.value.unit || 'kw/h' }})</span>
+        <span class="px-1">({{ 'kw/h' }})</span>
       </div>
       <div
         class="text-center mt-1 text-gray-400 text-xs truncate"
-        :style="{ fontSize: fontSize({ radio: getRadio, basic: 12 }) }"
+        :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
       >
         <span class="mr-1">更新时间:</span>
         <span>{{ props.value.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT) }}</span>

 import { EChartsOption } from 'echarts';
 import { fontSize } from '../../detail/config/util';
-import { visualOptionField } from '../../detail/config/visualOptions';
-import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
+import { Gradient, visualOptionField } from '../../detail/config/visualOptions';
+import { DataComponentRecord, DataSource, GradientInfo } from '/@/api/dataBoard/model';
 import { buildUUID } from '/@/utils/uuid';
 
 export type InstrumentComponentType = 'instrument-component-1' | 'instrument-component-2';
@@ -15,8 +15,9 @@ export type GradientKey =
   | visualOptionField.THIRD_PHASE_VALUE;
 
 export interface GradientInfoRecord {
-  key: GradientKey;
-  value: number | string;
+  key: Gradient;
+  value: number;
+  color: string;
 }
 
 export interface DashBoardValue {
@@ -148,34 +149,42 @@ export const instrumentComponent1 = (params?: { value: number; unit: string }):
 };
 
 export const instrumentComponent2 = (params?: {
-  gradient: GradientInfoRecord[];
+  gradient: GradientInfo[];
   value: number;
   unit: string;
 }): EChartsOption => {
   const { gradient = [], value = 0, unit = 'km/h' } = params || {};
+  const firstRecord = getGradient(Gradient.FIRST, gradient);
+  const secondRecord = getGradient(Gradient.SECOND, gradient);
+  const thirdRecord = getGradient(Gradient.THIRD, gradient);
+
+  let max = thirdRecord?.value || secondRecord?.value || firstRecord?.value || 70;
+  max = Number(1 + Array(String(max).length).fill(0).join(''));
+
+  const firstGradient = firstRecord?.value ? firstRecord.value / max : 0.3;
+  const secondGradient = secondRecord?.value ? secondRecord.value / max : 0.7;
+  // const thirdGradient = thirdRecord?.value ? thirdRecord.value / max : 1;
+
+  console.log();
   return {
     series: [
       {
         type: 'gauge',
+        min: 0,
+        max,
+        // startAngle: 225,
+        // endAngle: -70,
+        // splitNumber: 10,
         axisLine: {
           lineStyle: {
-            width: 30,
+            width: 20,
             color: [
+              [firstGradient, (getGradientValue(Gradient.FIRST, gradient) as string) || '#67e0e3'],
               [
-                0.3,
-                (getGradientValue(visualOptionField.FIRST_PHASE_COLOR, gradient) as string) ||
-                  '#67e0e3',
-              ],
-              [
-                0.7,
-                (getGradientValue(visualOptionField.SECOND_PHASE_COLOR, gradient) as string) ||
-                  '#37a2da',
-              ],
-              [
-                1,
-                (getGradientValue(visualOptionField.THIRD_PHASE_COLOR, gradient) as string) ||
-                  '#fd666d',
+                secondGradient,
+                (getGradientValue(Gradient.SECOND, gradient) as string) || '#37a2da',
               ],
+              [1, (getGradientValue(Gradient.THIRD, gradient) as string) || '#fd666d'],
             ],
           },
         },
@@ -187,6 +196,7 @@ export const instrumentComponent2 = (params?: {
         axisTick: {
           distance: -30,
           length: 8,
+          splitNumber: max / 100,
           lineStyle: {
             color: '#fff',
             width: 2,
@@ -202,7 +212,7 @@ export const instrumentComponent2 = (params?: {
         },
         axisLabel: {
           color: 'auto',
-          distance: 35,
+          distance: 22,
           fontSize: 6,
         },
         detail: {
@@ -221,12 +231,15 @@ export const instrumentComponent2 = (params?: {
   };
 };
 
-export const getGradientValue = (key: GradientKey, record: GradientInfoRecord[]) => {
-  return record.find((item) => item.key === key)?.value;
+export const getGradientValue = (key: Gradient, record: GradientInfo[]) => {
+  return record.find((item) => item.key === key)?.color;
+};
+
+export const getGradient = (key: Gradient, record: GradientInfo[]) => {
+  return record.find((item) => item.key === key);
 };
 
 export const update_instrument_1_font = (radio: number) => {
-  console.log(fontSize({ radio, basic: 14 }));
   return {
     series: [
       {
@@ -242,7 +255,7 @@ export const update_instrument_1_font = (radio: number) => {
 };
 
 export const update_instrument_2_font = (radio: number) => {
-  const axisLabelFontSize = fontSize({ radio, basic: 10, max: 25 });
+  const axisLabelFontSize = fontSize({ radio, basic: 10, max: 20 });
   return {
     series: [
       {
@@ -257,14 +270,27 @@ export const update_instrument_2_font = (radio: number) => {
   } as EChartsOption;
 };
 
+function setGradientInfo(dataSource: DataSource) {
+  const componentInfo = dataSource.componentInfo;
+  return instrumentComponent2({
+    unit: componentInfo.unit,
+    value: 0,
+    gradient: componentInfo.gradientInfo,
+  });
+}
+
 export const transformDashboardComponentConfig = (
   config: DashboardComponentLayout,
   record: DataComponentRecord,
   dataSourceRecord: DataSource
 ) => {
+  let chartOption = config.chartOption;
+  if (config.componentType === 'instrument-component-2') {
+    chartOption = setGradientInfo(dataSourceRecord);
+  }
   return {
     layout: {
-      chartOption: config.chartOption,
+      chartOption: chartOption,
       componentType: config.componentType,
     } as DashboardComponentLayout,
     value: {

@@ -10,5 +10,5 @@ export interface DigitalDashBoardValue {
   name?: string;
   updateTime?: string;
   value?: number;
-  valueColor?: string;
+  fontColor?: string;
 }

@@ -82,7 +82,10 @@
       </div>
     </div>
     <div v-if="getShowUpdate" class="text-center text-xs text-gray-400 truncate">
-      <span :style="{ fontSize: fontSize({ radio: getRadio, basic: 12 }) }" class="truncate">
+      <span
+        :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
+        class="truncate"
+      >
         更新时间: {{ props.value.updateTime }}</span
       >
     </div>

@@ -25,7 +25,7 @@
   <section class="widget">
     <slot name="header"></slot>
 
-    <div class="widget-content">
+    <div class="widget-content" :style="{ height: slot.header ? 'calc(100% - 22px)' : '100%' }">
       <div
         v-for="item in props.dataSource"
         :key="item.id"

@@ -67,11 +67,11 @@
       icon: value.icon || null,
       iconColor: value.iconColor || null,
       unit: value.unit || null,
-      // gradientInfo: [
-      //   { key: Gradient.FIRST, value: value.firstPhaseValue, color: value.firstPhaseColor },
-      //   { key: Gradient.SECOND, value: value.secondPhaseValue, color: value.secondPhaseColor },
-      //   { key: Gradient.THIRD, value: value.thirdPhaseValue, color: value.thirdPhaseColor },
-      // ],
+      gradientInfo: [
+        { key: Gradient.FIRST, value: value.firstPhaseValue, color: value.firstPhaseColor },
+        { key: Gradient.SECOND, value: value.secondPhaseValue, color: value.secondPhaseColor },
+        { key: Gradient.THIRD, value: value.thirdPhaseValue, color: value.thirdPhaseColor },
+      ],
     };
   };
 

@@ -124,9 +124,11 @@ export const modeThree: FormSchema[] = [
     field: visualOptionField.SECOND_PHASE_VALUE,
     label: '二阶段阀值',
     component: 'InputNumber',
-    componentProps: {
-      placeholder: '请输入二阶段阀值',
-      min: 0,
+    componentProps: ({ formModel }) => {
+      return {
+        placeholder: '请输入二阶段阀值',
+        min: formModel[visualOptionField.FIRST_PHASE_VALUE],
+      };
     },
   },
   {
@@ -139,9 +141,11 @@ export const modeThree: FormSchema[] = [
     field: visualOptionField.THIRD_PHASE_VALUE,
     label: '三阶段阀值',
     component: 'InputNumber',
-    componentProps: {
-      placeholder: '请输入三阶段阀值',
-      min: 0,
+    componentProps: ({ formModel }) => {
+      return {
+        placeholder: '请输入三阶段阀值',
+        min: formModel[visualOptionField.SECOND_PHASE_VALUE],
+      };
     },
   },
 ];