fix: DEFECT-685 update component info component not recalculate

 import {
 import {
   AddDataBoardParams,
   AddDataBoardParams,
   AddDataComponentParams,
   AddDataComponentParams,
+  ComponentInfoDetail,
   DataBoardList,
   DataBoardList,
   DataComponentRecord,
   DataComponentRecord,
   GetDataBoardParams,
   GetDataBoardParams,
@@ -103,12 +104,10 @@ export const updateDataBoardLayout = (params: UpdateDataBoardLayoutParams) => {
  * @returns
  * @returns
  */
  */
 export const getDataComponent = (params: string) => {
 export const getDataComponent = (params: string) => {
-  return defHttp.get<{ data: { componentData: DataComponentRecord[]; componentLayout: Layout[] } }>(
-    {
-      url: `${DataComponentUrl.GET_DATA_COMPONENT}/${params}`,
-      // params: { boardId: params },
-    }
-  );
+  return defHttp.get<ComponentInfoDetail>({
+    url: `${DataComponentUrl.GET_DATA_COMPONENT}/${params}`,
+    // params: { boardId: params },
+  });
 };
 };
 
 
 export const addDataComponent = (params: AddDataComponentParams) => {
 export const addDataComponent = (params: AddDataComponentParams) => {
@@ -151,7 +150,7 @@ export const updateDataComponent = (params: UpdateDataComponentParams) => {
  */
  */
 export const getShareBoardComponentInfo = (params: { boardId: string; tenantId: string }) => {
 export const getShareBoardComponentInfo = (params: { boardId: string; tenantId: string }) => {
   const { boardId, tenantId } = params;
   const { boardId, tenantId } = params;
-  return defHttp.get({
+  return defHttp.get<ComponentInfoDetail>({
     url: `${DataBoardShareUrl.GET_DATA_COMPONENT}/${boardId}/${tenantId}`,
     url: `${DataBoardShareUrl.GET_DATA_COMPONENT}/${boardId}/${tenantId}`,
   });
   });
 };
 };

@@ -136,3 +136,7 @@ export interface MasterDeviceList {
   id: string;
   id: string;
   name: string;
   name: string;
 }
 }
+
+export interface ComponentInfoDetail {
+  data: { componentData: DataComponentRecord[]; componentLayout: Layout[] };
+}

@@ -10,6 +10,7 @@
   import { TextComponentDefaultConfig, TextComponentLayout, TextComponentValue } from './config';
   import { TextComponentDefaultConfig, TextComponentLayout, TextComponentValue } from './config';
   import { SvgIcon } from '/@/components/Icon';
   import { SvgIcon } from '/@/components/Icon';
   import { dateUtil } from '/@/utils/dateUtil';
   import { dateUtil } from '/@/utils/dateUtil';
+  import { min } from 'lodash';
   const props = defineProps({
   const props = defineProps({
     layout: {
     layout: {
       type: Object as PropType<TextComponentLayout>,
       type: Object as PropType<TextComponentLayout>,
@@ -66,8 +67,8 @@
               prefix="iconfont"
               prefix="iconfont"
               :style="{
               :style="{
                 color: props.value.iconColor,
                 color: props.value.iconColor,
-                width: fontSize({ radio: getRadio, basic: 50 }),
-                height: fontSize({ radio: getRadio, basic: 50 }),
+                width: fontSize({ radio: getRadio, basic: 50, min: 16 }),
+                height: fontSize({ radio: getRadio, basic: 50, min: 16 }),
               }"
               }"
             />
             />
           </div>
           </div>

@@ -15,7 +15,7 @@
     id: string;
     id: string;
   }
   }
 
 
-  const emit = defineEmits(['submit', 'register']);
+  const emit = defineEmits(['submit', 'update', 'create', 'register']);
 
 
   const ROUTE = useRoute();
   const ROUTE = useRoute();
 
 
@@ -75,7 +75,7 @@
   const handleUpdateComponent = async (value: Recordable) => {
   const handleUpdateComponent = async (value: Recordable) => {
     try {
     try {
       changeOkLoading(true);
       changeOkLoading(true);
-      await updateDataComponent({
+      const res = await updateDataComponent({
         boardId: unref(boardId),
         boardId: unref(boardId),
         record: {
         record: {
           id: unref(componentRecord).i,
           id: unref(componentRecord).i,
@@ -86,7 +86,8 @@
       });
       });
       createMessage.success('修改成功');
       createMessage.success('修改成功');
       closeModal();
       closeModal();
-      emit('submit');
+      // emit('submit');
+      emit('update', res.data.id);
     } catch (error) {
     } catch (error) {
       // createMessage.error('修改失败');
       // createMessage.error('修改失败');
     } finally {
     } finally {

@@ -39,8 +39,19 @@ export const calcScale = (
   };
   };
 };
 };
 
 
-export const fontSize = ({ radio, basic, max }: { radio: number; basic: number; max?: number }) => {
+export const fontSize = ({
+  radio,
+  basic,
+  max,
+  min,
+}: {
+  radio: number;
+  basic: number;
+  max?: number;
+  min?: number;
+}) => {
   let res = basic * radio;
   let res = basic * radio;
   if (max && res > max) res = max;
   if (max && res > max) res = max;
+  if (min && res < min) res = min;
   return res + 'px';
   return res + 'px';
 };
 };

@@ -24,7 +24,12 @@
   } from '/@/api/dataBoard';
   } from '/@/api/dataBoard';
   import { useRoute, useRouter } from 'vue-router';
   import { useRoute, useRouter } from 'vue-router';
   import { computed, unref } from '@vue/reactivity';
   import { computed, unref } from '@vue/reactivity';
-  import { DataComponentRecord, DataSource, Layout } from '/@/api/dataBoard/model';
+  import {
+    ComponentInfoDetail,
+    DataComponentRecord,
+    DataSource,
+    Layout,
+  } from '/@/api/dataBoard/model';
   import { frontComponentMap } from './config/help';
   import { frontComponentMap } from './config/help';
   import { calcScale } from './config/util';
   import { calcScale } from './config/util';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -98,6 +103,9 @@
       width = 100;
       width = 100;
     }
     }
 
 
+    data.width = newWPx;
+    data.height = newHPx;
+
     data.record.dataSource = data?.record.dataSource.map((item) => {
     data.record.dataSource = data?.record.dataSource.map((item) => {
       if (!item.uuid) item.uuid = buildUUID();
       if (!item.uuid) item.uuid = buildUUID();
       return {
       return {
@@ -194,7 +202,7 @@
     try {
     try {
       return await getDataComponent(unref(getBoardId));
       return await getDataComponent(unref(getBoardId));
     } catch (error) {}
     } catch (error) {}
-    return [];
+    return {} as ComponentInfoDetail;
   };
   };
 
 
   const getSharePageComponentData = async () => {
   const getSharePageComponentData = async () => {
@@ -202,7 +210,7 @@
       const params = unref(getSharePageParams);
       const params = unref(getSharePageParams);
       return await getShareBoardComponentInfo(params);
       return await getShareBoardComponentInfo(params);
     } catch (error) {}
     } catch (error) {}
-    return [];
+    return {} as ComponentInfoDetail;
   };
   };
 
 
   const getDataBoradDetail = async () => {
   const getDataBoradDetail = async () => {
@@ -211,7 +219,7 @@
         ? await getSharePageComponentData()
         ? await getSharePageComponentData()
         : await getBasePageComponentData();
         : await getBasePageComponentData();
     } catch (error) {}
     } catch (error) {}
-    return [];
+    return {} as ComponentInfoDetail;
   };
   };
 
 
   const loading = ref(false);
   const loading = ref(false);
@@ -245,6 +253,35 @@
     }
     }
   };
   };
 
 
+  const handleUpdateComponent = async (id: string) => {
+    try {
+      loading.value = true;
+      const data = await getDataBoradDetail();
+      const updateIndex = data.data.componentData.findIndex((item) => item.id === id);
+      const originalIndex = unref(dataBoardList).findIndex((item) => item.i === id);
+
+      const newUpdateData = data.data.componentData[updateIndex];
+      const originalData = unref(dataBoardList)[originalIndex];
+      dataBoardList.value[updateIndex] = {
+        i: id,
+        w: originalData.w || DEFAULT_WIDGET_WIDTH,
+        h: originalData.h || DEFAULT_WIDGET_HEIGHT,
+        x: originalData.x || 0,
+        y: originalData.y || 0,
+        width: originalData.width,
+        height: originalData.height,
+        record: newUpdateData,
+      };
+      console.log(dataBoardList.value[updateIndex]);
+      updateSize(id, 0, 0, originalData.height || 0, originalData.width || 0);
+
+      // beginSendMessage();
+    } catch (error) {
+    } finally {
+      loading.value = false;
+    }
+  };
+
   const getComponent = (record: DataComponentRecord) => {
   const getComponent = (record: DataComponentRecord) => {
     const frontComponent = record.frontId;
     const frontComponent = record.frontId;
     const component = frontComponentMap.get(frontComponent as WidgetComponentType);
     const component = frontComponentMap.get(frontComponent as WidgetComponentType);
@@ -392,7 +429,11 @@
         <Empty v-if="!dataBoardList.length" />
         <Empty v-if="!dataBoardList.length" />
       </Spin>
       </Spin>
     </section>
     </section>
-    <DataBindModal @register="register" @submit="getDataBoardComponent" />
+    <DataBindModal
+      @register="register"
+      @update="handleUpdateComponent"
+      @submit="getDataBoardComponent"
+    />
     <HistoryTrendModal @register="registerHistoryDataModal" />
     <HistoryTrendModal @register="registerHistoryDataModal" />
   </section>
   </section>
 </template>
 </template>

@@ -5,4 +5,6 @@ export type FrontDataSourceRecord = DataSource;
 
 
 export type DataBoardLayoutInfo = Layout & {
 export type DataBoardLayoutInfo = Layout & {
   record: DataComponentRecord;
   record: DataComponentRecord;
+  width?: number;
+  height?: number;
 };
 };