fix: DEFECT-683 component add random value change animation

@@ -38,6 +38,10 @@
       type: Object as PropType<RadioRecord>,
       default: () => DEFAULT_RADIO_RECORD,
     },
+    random: {
+      type: Boolean,
+      default: true,
+    },
   });
 
   const getControlsWidgetId = () => `widget-chart-${props.value.id}`;
@@ -85,13 +89,24 @@
     }
   );
 
+  let timeout: Nullable<number> = null;
+
+  function handleRandomValue() {
+    const newValue = Math.floor(Math.random() * 100);
+    const updateFn = getUpdateValueFn(props.layout.componentType);
+    unref(chartRef)?.setOption((updateFn(newValue) as unknown as EChartsOption) || {});
+  }
+
   onMounted(() => {
     initChart();
     props.add && props.add(props.value.id, update);
+    if (props.random) timeout = setInterval(handleRandomValue, 2000) as unknown as number;
   });
 
   onUnmounted(() => {
     unref(chartRef)?.clear();
+    clearInterval(timeout as number);
+    timeout = null;
   });
 
   defineExpose({ update });

 <script lang="ts" setup>
-  import { computed, unref } from 'vue';
+  import { computed, onMounted, onUnmounted, ref, unref } from 'vue';
   import { Space, Tooltip } from 'ant-design-vue';
   import {
     DigitalComponentDefaultConfig,
@@ -12,6 +12,7 @@
     RadioRecord,
     DEFAULT_DATE_FORMAT,
     DEFAULT_RADIO_RECORD,
+    DEFAULT_ANIMATION_INTERVAL,
   } from '../../detail/config/util';
   import { isNaN } from 'lodash';
 
@@ -19,10 +20,13 @@
     layout: DigitalDashBoardLayout;
     value: DigitalDashBoardValue;
     radio?: RadioRecord;
+    random?: boolean;
   }>();
 
+  const changeValue = ref(0);
+
   const getPropsValue = computed(() => {
-    return { ...DigitalComponentDefaultConfig, ...props.value };
+    return { value: unref(changeValue), ...DigitalComponentDefaultConfig, ...props.value };
   });
 
   const integerPart = computed(() => {
@@ -52,6 +56,23 @@
     const { radio } = props.radio || DEFAULT_RADIO_RECORD;
     return radio;
   });
+
+  let timeout: Nullable<number> = null;
+
+  const handleRandom = () => {
+    const newValue = Math.floor(Math.random() * 100);
+    changeValue.value = newValue;
+  };
+
+  onMounted(() => {
+    if (props.random)
+      timeout = setInterval(handleRandom, DEFAULT_ANIMATION_INTERVAL) as unknown as number;
+  });
+
+  onUnmounted(() => {
+    clearInterval(timeout as number);
+    timeout = null;
+  });
 </script>
 
 <template>

@@ -6,6 +6,7 @@ import {
   Instrument2DefaultConfig,
   instrumentComponent1,
   instrumentComponent2,
+  InstrumentComponentType,
 } from './dashBoardComponent.config';
 import DashBoardComponent from './DashBoardComponent.vue';
 import DigitalDashBoard from './DigitalDashBoard.vue';
@@ -13,6 +14,7 @@ import { buildUUID } from '/@/utils/uuid';
 
 export interface DashboardComponentLayout {
   chartOption: EChartsOption;
+  componentType: InstrumentComponentType;
 }
 
 interface InstrumentComponentConfig {
@@ -25,13 +27,19 @@ interface InstrumentComponentConfig {
 export const instrumentComponentConfig: InstrumentComponentConfig[] = [
   {
     id: 'instrument-component-1',
-    layout: { chartOption: instrumentComponent1(Instrument1DefaultConfig) },
+    layout: {
+      chartOption: instrumentComponent1(Instrument1DefaultConfig),
+      componentType: 'instrument-component-1',
+    },
     component: DashBoardComponent,
     value: { id: buildUUID() },
   },
   {
     id: 'instrument-component-2',
-    layout: { chartOption: instrumentComponent2(Instrument2DefaultConfig) },
+    layout: {
+      chartOption: instrumentComponent2(Instrument2DefaultConfig),
+      componentType: 'instrument-component-2',
+    },
     component: DashBoardComponent,
     value: { id: buildUUID() },
   },

@@ -59,7 +59,12 @@
                 :control-id="item.id"
                 @change="handleCheck"
               >
-                <component :is="item.component" :layout="item.layout" :value="item.value" />
+                <component
+                  :is="item.component"
+                  :random="true"
+                  :layout="item.layout"
+                  :value="item.value"
+                />
               </VisualWidgetSelect>
             </List.Item>
           </template>

@@ -5,6 +5,8 @@ export interface RadioRecord {
   radio: number;
 }
 
+export const DEFAULT_ANIMATION_INTERVAL = 2000;
+
 export const DEFAULT_RADIO_RECORD: RadioRecord = {
   width: 300,
   height: 300,

@@ -383,6 +383,7 @@
                   :update="update"
                   :radio="record.radio || {}"
                   v-bind="getComponentConfig(item.record, record)"
+                  :random="false"
                 />
               </template>
             </WidgetWrapper>