feat: basic charts update

 <script lang="ts" setup>
   import type { ECharts, EChartsOption } from 'echarts';
-  import { PropType } from 'vue';
+  import { PropType, watch } from 'vue';
   import { nextTick, onMounted, onUnmounted, ref, unref, computed } from 'vue';
   import { init } from 'echarts';
   import {
@@ -10,6 +10,8 @@
     InstrumentComponentType,
     update_instrument_1_font,
     update_instrument_2_font,
+    update_instrument_1_value,
+    update_instrument_2_value,
   } from './dashBoardComponent.config';
   import { dateUtil } from '/@/utils/dateUtil';
   import {
@@ -69,6 +71,20 @@
     unref(chartRef)?.resize();
   }
 
+  const getUpdateValueFn = (componentType: InstrumentComponentType) => {
+    if (componentType === 'instrument-component-1') return update_instrument_1_value;
+    if (componentType === 'instrument-component-2') return update_instrument_2_value;
+    return (_radio: number) => {};
+  };
+
+  watch(
+    () => props.value.value,
+    (newValue) => {
+      const updateFn = getUpdateValueFn(props.layout.componentType);
+      unref(chartRef)?.setOption((updateFn(newValue || 0) as unknown as EChartsOption) || {});
+    }
+  );
+
   onMounted(() => {
     initChart();
     props.add && props.add(props.value.id, update);

@@ -262,6 +262,29 @@ export const update_instrument_2_font = (radio: number) => {
   } as EChartsOption;
 };
 
+export const update_instrument_1_value = (value) => {
+  return {
+    series: [
+      {
+        data: [{ value }],
+      },
+      {
+        data: [{ value }],
+      },
+    ],
+  } as EChartsOption;
+};
+
+export const update_instrument_2_value = (value) => {
+  return {
+    series: [
+      {
+        data: [{ value }],
+      },
+    ],
+  } as EChartsOption;
+};
+
 function setGradientInfo(dataSource: DataSource) {
   const componentInfo = dataSource.componentInfo;
   return instrumentComponent2({

@@ -77,7 +77,7 @@
       </div>
       <div class="w-1/2 flex justify-center">
         <Statistic
-          :value="props.value.value || '123'"
+          :value="props.value.value || 0"
           :suffix="getShowUnit ? props.value.unit : ''"
           class="truncate"
           :value-style="{

@@ -16,6 +16,7 @@ export interface TextComponentValue {
   updateTime?: string;
   fontColor?: string;
   iconColor?: string;
+  deviceName?: string;
 }
 
 export type TextComponentType =
@@ -88,6 +89,7 @@ export const transformTextComponentConfig = (
     } as TextComponentLayout,
     value: {
       name: dataSourceRecord.attributeRename || dataSourceRecord.attribute,
+      deviceName: dataSourceRecord.deviceRename || dataSourceRecord.deviceId,
       value: dataSourceRecord.componentInfo.value,
       icon: dataSourceRecord.componentInfo.icon,
       unit: dataSourceRecord.componentInfo.unit,

@@ -72,8 +72,9 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
         waitSendQueue.length = 0;
       }
     },
-    onMessage(ws, message) {
+    onMessage(_ws, message) {
       try {
+        // console.log({ dataSource: unref(dataSourceRef), cmdIdMapping });
         const res: ResponseMessage = JSON.parse(message.data);
         const { subscriptionId, data = {} } = res;
         const mappingRecord = cmdIdMapping.get(subscriptionId);
@@ -98,12 +99,13 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
 
   const transformSocketMessageItem = () => {
     const messageList: SocketMessageItem[] = [];
-    console.log(dataSourceRef);
+    let index = 0;
     unref(dataSourceRef).forEach((record, recordIndex) => {
       const componentId = record.record.id;
       record.record.dataSource.forEach((dataSource, dataSourceIndex) => {
         const { deviceId, attribute } = dataSource;
-        const cmdId = recordIndex * dataSourceIndex + recordIndex;
+        const cmdId = index;
+        index++;
         setCmdId(cmdId, {
           componentId,
           deviceId,