feat: data dashboard data source add slave device field

+import { RadioRecord } from '/@/views/data/board/detail/config/util';
+
 export interface AddDataBoardParams {
   name: string;
   viewType: string;
@@ -75,6 +77,13 @@ export interface DataSource {
   slaveDeviceId: string;
   isGatewayDevice: boolean;
   componentInfo: ComponentInfo;
+  deviceName?: string;
+
+  // front usage
+  uuid?: string;
+  width?: number;
+  height?: number;
+  radio?: RadioRecord;
 }
 
 export interface DataComponentRecord {

@@ -99,7 +99,7 @@
 
 <template>
   <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 :id="getControlsWidgetId()" class="widget-charts min-w-1 min-h-1 flex-auto"></div>
     <div>
       <div class="text-center" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">{{
         props.value.name

@@ -13,7 +13,7 @@
   const props = defineProps<{
     layout: DigitalDashBoardLayout;
     value: DigitalDashBoardValue;
-    radio: RadioRecord;
+    radio?: RadioRecord;
   }>();
 
   const integerPart = computed(() => {

@@ -13,7 +13,7 @@
   const props = defineProps<{
     layout?: PictureComponentLayout;
     value?: PictureComponentValue;
-    radio: RadioRecord;
+    radio?: RadioRecord;
   }>();
 
   const fallback =

@@ -7,10 +7,12 @@
   import { MoreActionEvent } from '../../config/config';
   import { computed } from '@vue/reactivity';
   import { usePermission } from '/@/hooks/web/usePermission';
+  import { DataSource } from '/@/api/dataBoard/model';
 
   const emit = defineEmits(['action']);
   const props = defineProps<{
     id: string;
+    record: DataSource[];
   }>();
   const { hasPermission } = usePermission();
   const dropMenuList = computed<DropMenu[]>(() => {
@@ -45,20 +47,27 @@
 </script>
 
 <template>
-  <div class="flex justify-between">
-    <div class="flex flex-auto">
-      <div v-for="item in 1" class="flex mx-2" :key="item">
-        <div class="flex items-center">
+  <div class="flex justify-between w-full">
+    <div class="flex" :style="{ width: `calc(100% - 60px)` }">
+      <div
+        v-for="(item, index) in props.record"
+        class="box-border truncate"
+        :style="{ width: `${100 / props.record.length}%` }"
+        :key="index"
+      >
+        <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" />
+        {{ item.deviceName }}
+        <!-- <div class="flex items-center">
           <Tooltip>
             <SvgIcon name="online" prefix="iconfont" class="!fill-emerald-400" />
           </Tooltip>
-          <span class="truncate max-w-25 ml-2">设备名称{{ item }}</span>
-        </div>
+          <div class="truncate">{{ item.deviceName || item.deviceId }}</div>
+        </div> -->
       </div>
     </div>
-    <div class="flex items-center wx-9">
+    <div class="flex items-center w-10">
       <Tooltip title="趋势">
-        <LineChartOutlined class="cursor-pointer mx-2" />
+        <LineChartOutlined class="cursor-pointer mx-1" />
       </Tooltip>
       <Dropdown
         v-if="dropMenuList.length"

 <script lang="ts" setup>
-  import { onMounted, useSlots } from 'vue';
+  import { useSlots } from 'vue';
   import { useUpdateCenter } from '../../hook/useUpdateCenter';
-  import { DataBoardLayoutInfo } from '../../types/type';
-  import type { WidgetWrapperRegister } from './type';
-  import { DataSource } from '/@/api/dataBoard/model';
+  import { FrontDataSourceRecord } from '../../types/type';
+  // import type { WidgetWrapperRegister } from './type';
+  // import { DataSource } from '/@/api/dataBoard/model';
 
   const props = defineProps<{
-    dataSource: DataBoardLayoutInfo['record'][];
-    register?: WidgetWrapperRegister;
+    dataSource: FrontDataSourceRecord[];
   }>();
 
   const slot = useSlots();
 
   const { update, add, remove } = useUpdateCenter();
 
-  onMounted(() => {
-    props.register && props.register(props.dataSource);
-  });
-
   defineExpose({ update });
 </script>
 
@@ -28,7 +23,7 @@
     <div class="widget-content" :style="{ height: slot.header ? 'calc(100% - 22px)' : '100%' }">
       <div
         v-for="item in props.dataSource"
-        :key="item.id"
+        :key="item.uuid"
         :style="{ width: `${item.width}%`, height: `${item.height}%` }"
         class="widget-item"
       >

-import { DataBoardLayoutInfo } from '../../types/type';
+// import { DataBoardLayoutInfo } from '../../types/type';
 
-export type WidgetWrapperRegister = (dataSource: DataBoardLayoutInfo['record'][]) => any;
+// export type WidgetWrapperRegister = (dataSource: DataBoardLayoutInfo['record'][]) => any;

@@ -14,7 +14,7 @@
     id: string;
   }
 
-  const emit = defineEmits(['submit']);
+  const emit = defineEmits(['submit', 'register']);
 
   const ROUTE = useRoute();
 

@@ -12,7 +12,7 @@
   import { ComponentInfo } from '/@/api/dataBoard/model';
   import { computed } from '@vue/reactivity';
 
-  const emit = defineEmits(['close']);
+  const emit = defineEmits(['close', 'register']);
 
   const props = defineProps<{
     value?: string;
@@ -35,8 +35,7 @@
   const [register, { closeModal }] = useModalInner(
     (data: { recordId: string; componentInfo: ComponentInfo }) => {
       recordId.value = data.recordId;
-      console.log(data.componentInfo);
-      const gradientInfo = data.componentInfo.gradientInfo;
+      const gradientInfo = data.componentInfo?.gradientInfo || [];
       let gradientRecord = {};
       if (gradientInfo && gradientInfo.length) {
         const first = gradientInfo.find((item) => item.key === Gradient.FIRST);

 import { getAllDeviceByOrg, getDeviceAttributes, getGatewaySlaveDevice } from '/@/api/dataBoard';
-import { MasterDeviceList } from '/@/api/dataBoard/model';
 import { getOrganizationList } from '/@/api/system/system';
 import { FormSchema } from '/@/components/Form';
 import { copyTransFun } from '/@/utils/fnUtils';

 <script lang="ts" setup>
-  import { Button, PageHeader, Empty } from 'ant-design-vue';
+  import { Button, PageHeader, Empty, Spin } from 'ant-design-vue';
   import { GridItem, GridLayout } from 'vue3-grid-layout';
   import { nextTick, onMounted, ref } from 'vue';
   import WidgetWrapper from '../components/WidgetWrapper/WidgetWrapper.vue';
@@ -24,6 +24,7 @@
   import { WidgetComponentType } from './config/visualOptions';
   import Authority from '/@/components/Authority/src/Authority.vue';
   import { useSocketConnect } from '../hook/useSocketConnect';
+  import { buildUUID } from '/@/utils/uuid';
 
   const ROUTE = useRoute();
 
@@ -74,6 +75,7 @@
     }
 
     data.record.dataSource = data?.record.dataSource.map((item) => {
+      if (!item.uuid) item.uuid = buildUUID();
       return {
         ...item,
         width,
@@ -164,9 +166,11 @@
 
   const { beginSendMessage } = useSocketConnect(dataBoardList);
 
+  const loading = ref(false);
   const getDataBoardComponent = async () => {
     try {
       // dataBoardList.value = [];
+      loading.value = true;
       const data = await getDataComponent(unref(getBoardId));
       dataBoardList.value = data.data.componentData.map((item) => {
         const index = data.data.componentLayout.findIndex((each) => item.id === each.id);
@@ -182,15 +186,15 @@
           h: layout.h || DEFAULT_WIDGET_HEIGHT,
           x: layout.x || 0,
           y: layout.y || 0,
-          record: {
-            ...item,
-            width: 100,
-            height: 100,
-          },
+          record: item,
         };
       });
+
       beginSendMessage();
-    } catch (error) {}
+    } catch (error) {
+    } finally {
+      loading.value = false;
+    }
   };
 
   const getComponent = (record: DataComponentRecord) => {
@@ -258,56 +262,62 @@
       </div>
     </PageHeader>
     <section class="flex-1">
-      <GridLayout
-        v-model:layout="dataBoardList"
-        :col-num="GirdLayoutColNum"
-        :row-height="30"
-        :margin="[GridLayoutMargin, GridLayoutMargin]"
-        :is-draggable="draggable"
-        :is-resizable="resizable"
-        :vertical-compact="true"
-        :use-css-transforms="true"
-        style="width: 100%"
-      >
-        <GridItem
-          v-for="item in dataBoardList"
-          :key="item.i"
-          :static="item.static"
-          :x="item.x"
-          :y="item.y"
-          :w="item.w"
-          :h="item.h"
-          :i="item.i"
-          :style="{ display: 'flex', flexWrap: 'wrap' }"
-          class="grid-item-layout"
-          @resized="itemResized"
-          @resize="itemResize"
-          @moved="itemMoved"
-          @container-resized="itemContainerResized"
+      <Spin :spinning="loading">
+        <GridLayout
+          v-model:layout="dataBoardList"
+          :col-num="GirdLayoutColNum"
+          :row-height="30"
+          :margin="[GridLayoutMargin, GridLayoutMargin]"
+          :is-draggable="draggable"
+          :is-resizable="resizable"
+          :vertical-compact="true"
+          :use-css-transforms="true"
+          style="width: 100%"
         >
-          <WidgetWrapper
+          <GridItem
+            v-for="item in dataBoardList"
             :key="item.i"
-            :ref="(el: Element) => setComponentRef(el, item)"
-            :data-source="item.record.dataSource"
+            :static="item.static"
+            :x="item.x"
+            :y="item.y"
+            :w="item.w"
+            :h="item.h"
+            :i="item.i"
+            :style="{ display: 'flex', flexWrap: 'wrap' }"
+            class="grid-item-layout"
+            @resized="itemResized"
+            @resize="itemResize"
+            @moved="itemMoved"
+            @container-resized="itemContainerResized"
           >
-            <template #header>
-              <!-- <div>header</div> -->
-              <BaseWidgetHeader :id="item.record.id" @action="handleMoreAction" />
-            </template>
-            <template #controls="{ record, add, remove, update }">
-              <component
-                :is="getComponent(item.record)"
-                :add="add"
-                :remove="remove"
-                :update="update"
-                :radio="record.radio"
-                v-bind="getComponentConfig(item.record, record)"
-              />
-            </template>
-          </WidgetWrapper>
-        </GridItem>
-      </GridLayout>
-      <Empty v-if="!dataBoardList.length" />
+            <WidgetWrapper
+              :key="item.i"
+              :ref="(el: Element) => setComponentRef(el, item)"
+              :data-source="item.record.dataSource"
+            >
+              <template #header>
+                <!-- <div>header</div> -->
+                <BaseWidgetHeader
+                  :record="item.record.dataSource"
+                  :id="item.record.id"
+                  @action="handleMoreAction"
+                />
+              </template>
+              <template #controls="{ record, add, remove, update }">
+                <component
+                  :is="getComponent(item.record)"
+                  :add="add"
+                  :remove="remove"
+                  :update="update"
+                  :radio="record.radio || {}"
+                  v-bind="getComponentConfig(item.record, record)"
+                />
+              </template>
+            </WidgetWrapper>
+          </GridItem>
+        </GridLayout>
+        <Empty v-if="!dataBoardList.length" />
+      </Spin>
     </section>
     <DataBindModal @register="register" @submit="getDataBoardComponent" />
   </section>

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