wip: data board component

 import {
   AddDataBoardParams,
+  AddDataComponentParams,
   DataBoardList,
+  DataComponentRecord,
   GetDataBoardParams,
+  Layout,
+  UpdateDataBoardLayoutParams,
   UpdateDataBoardParams,
 } from './model';
 import { defHttp } from '/@/utils/http/axios';
@@ -11,6 +15,13 @@ enum DataBoardUrl {
   ADD_DATA_BOARD = '/data_board/add',
   DELETE_DATA_BOARD = '/data_board',
   UPDATE_DATA_BOARD = '/data_board/update',
+  UPDATE_DATA_BOARD_LAYOUT = '/data_board',
+}
+
+enum DataComponentUrl {
+  GET_DATA_COMPONENT = '/data_component',
+  ADD_DATA_COMPONENT = '/data_component',
+  DELETE_DATA_COMPONENT = '/data_component',
 }
 
 /**
@@ -60,3 +71,50 @@ export const deleteDataBoard = (params: string[]) => {
     params: { ids: params },
   });
 };
+
+/**
+ * @description 更新数据组件位置
+ * @param params
+ * @returns
+ */
+export const updateDataBoardLayout = (params: UpdateDataBoardLayoutParams) => {
+  return defHttp.post({
+    url: `${DataBoardUrl.UPDATE_DATA_BOARD_LAYOUT}/${params.boardId}/layout/`,
+    params: params.layout,
+  });
+};
+
+/**
+ * @description 获取数据组件
+ * @param params
+ * @returns
+ */
+export const getDataComponent = (params: string) => {
+  return defHttp.get<{ data: { componentData: DataComponentRecord[]; componentLayout: Layout[] } }>(
+    {
+      url: `${DataComponentUrl.GET_DATA_COMPONENT}/${params}`,
+      // params: { boardId: params },
+    }
+  );
+};
+
+export const addDataComponent = (params: AddDataComponentParams) => {
+  return defHttp.post<{ data: DataComponentRecord }>({
+    url: `${DataComponentUrl.ADD_DATA_COMPONENT}/${params.boardId}/add`,
+    params: params.record,
+  });
+};
+
+/**
+ * @description 删除数据组件
+ * @param params
+ * @returns
+ */
+export const deleteDataComponent = (params: string[]) => {
+  return defHttp.delete({
+    url: DataComponentUrl.DELETE_DATA_COMPONENT,
+    params: {
+      ids: params,
+    },
+  });
+};

@@ -23,14 +23,6 @@ export interface Layout {
   y: number;
 }
 
-export interface Layout {
-  h: number;
-  id: string;
-  w: number;
-  x: number;
-  y: number;
-}
-
 export interface DataBoardRecord {
   name: string;
   roleIds: string[];
@@ -57,3 +49,65 @@ export interface DataBoardList {
   items: DataBoardRecord[];
   total: number;
 }
+
+export interface GradientInfo {
+  value: number;
+  key: string;
+}
+
+export interface ComponentInfo {
+  fontColor: string;
+  unit: string;
+  gradientInfo: GradientInfo[];
+  iconColor: string;
+  icon: string;
+}
+
+export interface DataSource {
+  attribute: string;
+  deviceId: string;
+  organizationId: string;
+  attributeRename: string;
+  deviceRename: string;
+  componentInfo: ComponentInfo;
+}
+
+export interface DataComponentRecord {
+  dataBoardId: string;
+  dataSource: DataSource[];
+  frontId: string;
+  name: string;
+  tenantId: string;
+  tenantStatus: string;
+  description: string;
+  roleIds: string[];
+  updater: string;
+  enabled: boolean;
+  id: string;
+  defaultConfig: string;
+  tenantProfileId: string;
+  remark: string;
+  icon: string;
+  tenantExpireTime: string;
+  updateTime: string;
+  creator: string;
+  createTime: string;
+}
+
+export interface AddDataComponentParams {
+  boardId: string;
+  record: Partial<DataComponentRecord>;
+}
+
+export interface Layout {
+  id: string;
+  w: number;
+  h: number;
+  x: number;
+  y: number;
+}
+
+export interface UpdateDataBoardLayoutParams {
+  boardId: string;
+  layout: Layout[];
+}

+/**
+ * @description use to function capture await throw error
+ * @param promise
+ * @param errorExt - Additional Information you can pass to the err object
+ */
+export function to<DATA = any, ERROR = any>(
+  promise: any,
+  errorExt?: string
+): Promise<[ERROR, DATA]> {
+  return promise
+    .then((data) => [null, data])
+    .catch((err) => {
+      if (errorExt) {
+        const parsedError = Object.assign({}, err, errorExt);
+        return [parsedError, undefined];
+      }
+      return [err, undefined];
+    });
+}

+<script lang="ts" setup>
+  import type { ECharts, EChartsOption } from 'echarts';
+  import type { PropType } from 'vue';
+  import { nextTick, onMounted, onUnmounted, ref, unref } from 'vue';
+  import { init } from 'echarts';
+
+  interface DataSource {
+    id: string | number;
+  }
+
+  const props = defineProps({
+    dataSource: {
+      type: Object as PropType<DataSource>,
+      required: true,
+    },
+    chartOption: {
+      type: Object as PropType<EChartsOption>,
+      // required: true,
+    },
+    add: {
+      type: Function,
+      required: true,
+    },
+  });
+
+  const getControlsWidgetId = () => `widget-chart-${props.dataSource.id}`;
+
+  const chartRef = ref<Nullable<ECharts>>(null);
+
+  function initChart() {
+    const chartDom = document.getElementById(getControlsWidgetId())!;
+    chartRef.value = init(chartDom);
+    const option: EChartsOption = props.chartOption || {
+      tooltip: {
+        trigger: 'item',
+        // confine: true,
+        extraCssText: 'position: fixed;',
+        position: (point, params, dom) => {
+          const parentEl = (dom as HTMLDivElement).parentElement!;
+
+          const { top = 0, left = 0 } = parentEl.getBoundingClientRect()!;
+          return [left, top];
+        },
+      },
+      series: [
+        {
+          name: 'Access From',
+          type: 'pie',
+          radius: '50%',
+          data: [
+            { value: 1048, name: 'Search Engine' },
+            { value: 735, name: 'Direct' },
+            { value: 580, name: 'Email' },
+            { value: 484, name: 'Union Ads' },
+            { value: 300, name: 'Video Ads' },
+          ],
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+            },
+          },
+        },
+      ],
+    };
+
+    nextTick(() => {
+      option && unref(chartRef)?.setOption(option);
+    });
+  }
+
+  function update() {
+    unref(chartRef)?.resize();
+  }
+
+  onMounted(() => {
+    initChart();
+    props.add(props.dataSource.id, update);
+  });
+
+  onUnmounted(() => {
+    unref(chartRef)?.clear();
+  });
+
+  defineExpose({ update });
+</script>
+
+<template>
+  <div class="flex flex-col w-full h-full min-w-3 min-h-3">
+    <div :id="getControlsWidgetId()" class="widget-charts w-full h-full"></div>
+    <div class="text-xs text-center text-gray-400">更新时间:</div>
+  </div>
+</template>
+
+<style scoped>
+  .widget-charts > div {
+    width: 100%;
+    height: 100%;
+  }
+</style>

+<script lang="ts" setup></script>
+
+<template> </template>

@@ -44,16 +44,21 @@
       <div class="w-1/2">
         <div>
           <div v-if="getShowIcon">
-            <SvgIcon name="CO2" prefix="iconfont" class="!w-1/2 !h-[2em]" />
+            <SvgIcon
+              :name="props.value.icon || 'CO2'"
+              prefix="iconfont"
+              class="!w-1/2 !h-[2em]"
+              :style="{ color: props.value.iconColor }"
+            />
           </div>
           <div>{{ props.value.name }}</div>
         </div>
       </div>
       <div class="w-1/2 flex justify-center">
         <Statistic
-          value="123"
+          :value="props.value.value || '123'"
           :suffix="getShowUnit ? props.value.unit : ''"
-          :value-style="{ fontSize: '1.3em' }"
+          :value-style="{ fontSize: '1.3em', color: props.value.fontColor }"
         />
       </div>
     </div>

 import { formatToDateTime } from '/@/utils/dateUtil';
-
+import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
 export interface TextComponentLayout {
   id: string;
   base?: boolean;
@@ -20,37 +20,73 @@ export interface TextComponentValue {
 
 type TextComponentDefault = TextComponentLayout & { value: TextComponentValue };
 
-export const textComponentConfig: TextComponentDefault[] = [
-  { id: 'text-component-1', base: true, value: { value: 123, name: '温度' } },
-  { id: 'text-component-2', base: false, value: { value: 123, name: '温度' } },
-  {
-    id: 'text-component-3',
-    base: false,
-    showUpdate: true,
-    value: {
-      value: 123,
-      name: '温度',
-      updateTime: formatToDateTime(new Date(), 'YYYY-MM-DD HH:mm:ss'),
-    },
-  },
-  {
-    id: 'text-component-4',
-    base: false,
-    showIcon: true,
-    showUpdate: true,
-    showUnit: true,
-    value: {
-      value: 123,
-      name: '温度',
-      updateTime: formatToDateTime(new Date(), 'YYYY-MM-DD HH:mm:ss'),
-      unit: '℃',
-    },
+export const TextComponent1Config: TextComponentDefault = {
+  id: 'text-component-1',
+  base: true,
+  value: { value: 123, name: '温度' },
+};
+
+export const TextComponent2Config: TextComponentDefault = {
+  id: 'text-component-2',
+  base: false,
+  value: { value: 123, name: '温度' },
+};
+export const TextComponent3Config: TextComponentDefault = {
+  id: 'text-component-3',
+  base: false,
+  showUpdate: true,
+  value: {
+    value: 123,
+    name: '温度',
+    updateTime: formatToDateTime(new Date(), 'YYYY-MM-DD HH:mm:ss'),
   },
-  {
-    id: 'text-component-5',
-    base: false,
-    showIcon: true,
-    showUnit: true,
-    value: { value: 123, name: '温度', unit: '℃' },
+};
+export const TextComponent4Config: TextComponentDefault = {
+  id: 'text-component-4',
+  base: false,
+  showIcon: true,
+  showUpdate: true,
+  showUnit: true,
+  value: {
+    value: 123,
+    name: '温度',
+    updateTime: formatToDateTime(new Date(), 'YYYY-MM-DD HH:mm:ss'),
+    unit: '℃',
   },
+};
+export const TextComponent5Config: TextComponentDefault = {
+  id: 'text-component-5',
+  base: false,
+  showIcon: true,
+  showUnit: true,
+  value: { value: 123, name: '温度', unit: '℃' },
+};
+
+export const textComponentConfig: TextComponentDefault[] = [
+  TextComponent1Config,
+  TextComponent2Config,
+  TextComponent3Config,
+  TextComponent4Config,
+  TextComponent5Config,
 ];
+
+export const transformTextComponentConfig = (
+  config: TextComponentDefault,
+  record: DataComponentRecord,
+  dataSourceRecord: DataSource
+) => {
+  return {
+    layout: {
+      ...config,
+    } as TextComponentLayout,
+    value: {
+      name: dataSourceRecord.attributeRename || dataSourceRecord.attribute,
+      // value: record.va
+      icon: dataSourceRecord.componentInfo.icon,
+      unit: dataSourceRecord.componentInfo.unit,
+      updateTime: record.updateTime || record.createTime,
+      fontColor: dataSourceRecord.componentInfo.fontColor,
+      iconColor: dataSourceRecord.componentInfo.iconColor,
+    } as TextComponentValue,
+  };
+};

@@ -7,6 +7,9 @@
   import { MoreActionEvent } from '../../config/config';
 
   const emit = defineEmits(['action']);
+  const props = defineProps<{
+    id: string;
+  }>();
 
   const dropMenuList: DropMenu[] = [
     {
@@ -27,14 +30,14 @@
   ];
 
   const handleMenuEvent = (event: DropMenu) => {
-    emit('action', event);
+    emit('action', event, props.id);
   };
 </script>
 
 <template>
   <div class="flex justify-between">
     <div class="flex flex-auto">
-      <div v-for="item in 3" class="flex mx-2" :key="item">
+      <div v-for="item in 1" class="flex mx-2" :key="item">
         <div class="flex items-center">
           <Tooltip>
             <SvgIcon name="online" prefix="iconfont" class="!fill-emerald-400" />

 <script lang="ts" setup>
-  import { onMounted } from 'vue';
+  import { onMounted, useSlots } from 'vue';
   import { useUpdateCenter } from '../../hook/useUpdateCenter';
   import type { DataSource, WidgetWrapperRegister } from './type';
 
@@ -8,6 +8,10 @@
     register?: WidgetWrapperRegister;
   }>();
 
+  const slot = useSlots();
+
+  console.log({ dataSource: props.dataSource });
+
   const { update, add, remove } = useUpdateCenter();
 
   onMounted(() => {
@@ -29,7 +33,10 @@
         class="widget-item"
       >
         <div class="widget-box">
-          <div class="widget-controls-container">
+          <div
+            class="widget-controls-container"
+            :style="{ height: slot.footer ? 'calc(100% - 20px)' : '100%' }"
+          >
             <slot
               name="controls"
               :record="item"

+import { DataComponentRecord } from '/@/api/dataBoard/model';
+
 export interface DataSource {
-  id: number | string
-  width: number
-  height: number
+  id: number | string;
+  width: number;
+  height: number;
 
-  [key: string]: any
+  [key: string]: any;
 }
 
-export type WidgetWrapperRegister = (dataSource: DataSource[]) => any
+export type WidgetWrapperRegister = (dataSource: DataComponentRecord[]) => any;

@@ -5,3 +5,6 @@ export enum MoreActionEvent {
 }
 
 // export enum
+
+export const DEFAULT_WIDGET_WIDTH = 6;
+export const DEFAULT_WIDGET_HEIGHT = 6;

 <script lang="ts" setup>
   import { CopyOutlined, DeleteOutlined, SettingOutlined } from '@ant-design/icons-vue';
   import { Tooltip, Button } from 'ant-design-vue';
-  import { useForm } from '/@/components/Form';
+  import { FormActionType, useForm } from '/@/components/Form';
   import { basicSchema, dataSourceSchema } from '../config/basicConfiguration';
   import BasicForm from '/@/components/Form/src/BasicForm.vue';
-  import { ref, unref } from 'vue';
+  import { onMounted, reactive, ref, shallowReactive, unref, nextTick } from 'vue';
   import VisualOptionsModal from './VisualOptionsModal.vue';
   import { useModal } from '/@/components/Modal';
   import { buildUUID } from '/@/utils/uuid';
+  import type { DataComponentRecord, ComponentInfo, DataSource } from '/@/api/dataBoard/model';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
-  const props = defineProps();
+  type DataSourceFormEL = { [key: string]: Nullable<FormActionType> };
 
-  const dataSource = ref([{ id: 'string' }]);
+  type DataSourceEl = DataSource & { id: string };
+
+  const props = defineProps<{
+    record: DataComponentRecord;
+    frontId?: string;
+  }>();
+
+  const { createMessage } = useMessage();
+
+  const componentRecord = reactive<DataComponentRecord>({
+    id: 'string',
+  } as unknown as DataComponentRecord);
+
+  const dataSource = ref<DataSourceEl[]>([{ id: buildUUID() } as unknown as DataSourceEl]);
 
   const [basicRegister, basicMethod] = useForm({
     schemas: basicSchema,
@@ -19,70 +34,157 @@
     labelWidth: 96,
   });
 
-  const [dataSourceRegister, dataSourceMethod] = useForm({
-    schemas: dataSourceSchema,
-    showActionButtonGroup: false,
-    layout: 'inline',
-    labelCol: {
-      span: 0,
-    },
-    baseColProps: {
-      span: 4,
-    },
-  });
+  const dataSourceEl = shallowReactive<DataSourceFormEL>({} as unknown as DataSourceFormEL);
+
+  const setFormEl = (el: any, id: string) => {
+    if (!dataSourceEl[id] && el) {
+      console.log({ el, id });
+      const { formActionType } = el as unknown as { formActionType: FormActionType };
+      dataSourceEl[id] = formActionType;
+    }
+  };
+
+  const getAllDataSourceFieldValue = () => {
+    const _dataSource = getDataSourceField();
+    const basicInfo = basicMethod.getFieldsValue();
+    return {
+      ...basicInfo,
+      dataSource: _dataSource,
+    };
+  };
+
+  const getDataSourceField = () => {
+    const hasExistEl = Object.keys(dataSourceEl).filter((key) => dataSourceEl[key]);
+    const _dataSource: DataSource[] = [];
+    for (const id of hasExistEl) {
+      const index = unref(dataSource).findIndex((item) => item.id === id);
+      const value = (dataSourceEl[id] as FormActionType).getFieldsValue() as DataSource;
+      const componentInfo = unref(dataSource)[index].componentInfo || {};
+      ~index &&
+        _dataSource.push({
+          ...value,
+          componentInfo: { ...componentInfo },
+        });
+    }
+    return _dataSource;
+  };
+
+  const handleCopy = async (data: DataSourceEl) => {
+    const value = (dataSourceEl[data.id] as FormActionType).getFieldsValue() as DataSource;
+    const index = unref(dataSource).findIndex((item) => item.id === data.id);
 
-  const handleCopy = (data: Recordable) => {
+    const componentInfo = ~index
+      ? unref(dataSource)[index].componentInfo
+      : ({} as unknown as ComponentInfo);
+
+    const copyRecordId = buildUUID();
     unref(dataSource).push({
-      id: data.id + 1,
+      ...value,
+      id: copyRecordId,
+      componentInfo,
     });
+    await nextTick();
+    (dataSourceEl[copyRecordId] as FormActionType).setFieldsValue(value);
   };
 
   const [registerVisualOptionModal, { openModal }] = useModal();
 
-  const handleSetting = () => {
-    openModal(true);
+  const handleSetting = (item: DataSourceEl) => {
+    if (!props.frontId) {
+      createMessage.warning('请先选择可视化组件');
+      return;
+    }
+    openModal(true, {
+      recordId: item.id,
+      componentInfo: item.componentInfo,
+    });
   };
 
-  const handleDelete = (data: Recordable) => {
+  const handleDelete = (data: DataSourceEl) => {
     const index = unref(dataSource).findIndex((item) => item.id === data.id);
-
     ~index && unref(dataSource).splice(index, 1);
+    dataSourceEl[data.id] = null;
   };
 
   const handleAdd = () => {
     unref(dataSource).push({
       id: buildUUID(),
-    });
+    } as unknown as DataSourceEl);
+  };
+
+  const echoDataSource = () => {
+    basicMethod.setFieldsValue(props.record);
+    // dataSourceMethod.setFieldsValue(props.record);
+  };
+
+  const handleRowComponentInfo = (recordId: string, value: ComponentInfo) => {
+    const index = unref(dataSource).findIndex((item) => item.id === recordId);
+    ~index && (unref(dataSource)[index].componentInfo = value);
   };
+
+  onMounted(() => {
+    echoDataSource();
+  });
+
+  defineExpose({
+    getAllDataSourceFieldValue,
+  });
 </script>
 
 <template>
   <section>
     <h3 class="w-24 text-right pr-2 my-4">基础信息</h3>
     <div class="w-3/4">
-      <BasicForm @register="basicRegister" />
+      <BasicForm @register="basicRegister" class="w-full" />
     </div>
     <h3 class="w-24 flex-shrink-0 text-right pr-2 my-4">选择数据源</h3>
     <div v-for="item in dataSource" :key="item.id" class="flex">
-      <div class="w-24 text-right" style="flex: 0 0 96px; padding-right: 8px">选择设备</div>
+      <div
+        class="w-24 text-right leading-30px pr-8px flex right"
+        style="flex: 0 0 96px; justify-content: right"
+      >
+        选择设备
+      </div>
       <div class="pl-2 flex-auto">
-        <BasicForm @register="dataSourceRegister" />
+        <BasicForm
+          :ref="(el) => setFormEl(el, item.id)"
+          :schemas="dataSourceSchema"
+          class="w-full flex-1 data-source-form"
+          :show-action-button-group="false"
+          :row-props="{
+            gutter: 10,
+          }"
+          layout="inline"
+          :label-col="{ span: 0 }"
+        />
       </div>
-      <div class="flex justify-center gap-3 w-18">
+      <div class="flex justify-center gap-3 w-24">
         <Tooltip title="复制">
-          <CopyOutlined @click="handleCopy(item)" class="cursor-pointer text-lg" />
+          <CopyOutlined @click="handleCopy(item)" class="cursor-pointer text-lg !leading-30px" />
         </Tooltip>
         <Tooltip title="设置">
-          <SettingOutlined @click="handleSetting()" class="cursor-pointer text-lg" />
+          <SettingOutlined
+            @click="handleSetting(item)"
+            class="cursor-pointer text-lg !leading-30px"
+          />
         </Tooltip>
         <Tooltip title="删除">
-          <DeleteOutlined @click="handleDelete(item)" class="cursor-pointer text-lg" />
+          <DeleteOutlined
+            @click="handleDelete(item)"
+            class="cursor-pointer text-lg !leading-30px"
+          />
         </Tooltip>
       </div>
     </div>
     <div class="text-center">
       <Button type="primary" @click="handleAdd">添加数据源</Button>
     </div>
-    <VisualOptionsModal @register="registerVisualOptionModal" />
+    <VisualOptionsModal @close="handleRowComponentInfo" @register="registerVisualOptionModal" />
   </section>
 </template>
+
+<style scoped>
+  .data-source-form:deep(.ant-row) {
+    width: 100%;
+  }
+</style>

@@ -3,26 +3,77 @@
   import BasicModal from '/@/components/Modal/src/BasicModal.vue';
   import BasicConfiguration from './BasicConfiguration.vue';
   import VisualConfiguration from './VisualConfiguration.vue';
-  import { ref } from 'vue';
+  import { computed, ref, unref } from 'vue';
+  import type { DataComponentRecord } from '/@/api/dataBoard/model';
+  import { RouteParams, useRoute } from 'vue-router';
+  import { addDataComponent, updateDataBoardLayout } from '/@/api/dataBoard';
+  import { useModalInner } from '/@/components/Modal';
+  import { DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH } from '../../config/config';
 
-  const componentId = ref('');
-
-  interface SettingOption {
-    color?: string;
+  interface DataComponentRouteParams extends RouteParams {
+    id: string;
   }
 
-  const handleSettingUpdate = (value: SettingOption) => {};
+  const emit = defineEmits(['submit']);
+
+  const ROUTE = useRoute();
+
+  const [register, { closeModal }] = useModalInner();
+
+  const basicConfigurationEl = ref<{
+    getAllDataSourceFieldValue: Fn<any, Recordable>;
+  }>();
+
+  const boardId = computed(() => {
+    return (ROUTE.params as DataComponentRouteParams).id;
+  });
+
+  const frontId = ref('');
+
+  const componentRecord = ref<DataComponentRecord>({} as unknown as DataComponentRecord);
+
+  const handleSubmit = () => {
+    const { getAllDataSourceFieldValue } = unref(basicConfigurationEl)!;
+    const value = getAllDataSourceFieldValue();
+    handleAddComponent(value);
+  };
+
+  const handleAddComponent = async (value: Recordable) => {
+    try {
+      const data = await addDataComponent({
+        boardId: unref(boardId),
+        record: { dataBoardId: unref(boardId), frontId: unref(frontId), ...value },
+      });
+      const id = data.data.id;
+      await updateDataBoardLayout({
+        boardId: unref(boardId),
+        layout: [{ id, w: DEFAULT_WIDGET_WIDTH, h: DEFAULT_WIDGET_HEIGHT, x: 0, y: 0 }],
+      });
+      closeModal();
+      emit('submit');
+    } catch (error) {}
+  };
 </script>
 
 <template>
-  <BasicModal v-bind="$attrs" title="自定义组件" width="70%">
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    title="自定义组件"
+    width="70%"
+    @ok="handleSubmit"
+  >
     <section>
       <Tabs type="card">
         <Tabs.TabPane key="1" tab="基础配置">
-          <BasicConfiguration @change="handleSettingUpdate" />
+          <BasicConfiguration
+            ref="basicConfigurationEl"
+            :front-id="frontId"
+            :record="componentRecord"
+          />
         </Tabs.TabPane>
         <Tabs.TabPane key="2" tab="可视化配置">
-          <VisualConfiguration v-model:value="componentId" />
+          <VisualConfiguration v-model:value="frontId" />
         </Tabs.TabPane>
       </Tabs>
     </section>

@@ -22,7 +22,7 @@
           :data-source="textComponentConfig"
         >
           <template #renderItem="{ item }">
-            <List.Item>
+            <List.Item class="!flex !justify-center">
               <VisualWidgetSelect
                 :checked-id="props.value"
                 :control-id="item.id"

 <script lang="ts" setup>
+  import { onMounted, ref, unref } from 'vue';
   import { modeOne, modeTwo, modeThree, modeFour } from '../config/visualOptions';
   import { useForm, BasicForm } from '/@/components/Form';
   import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { ComponentInfo } from '/@/api/dataBoard/model';
+
+  const emit = defineEmits(['close']);
+
+  const recordId = ref('');
 
   const [registerForm, method] = useForm({
     schemas: modeTwo,
@@ -12,11 +18,16 @@
     },
   });
 
-  const [register, { closeModal }] = useModalInner();
+  const [register, { closeModal }] = useModalInner(
+    (data: { recordId: string; componentInfo: ComponentInfo }) => {
+      recordId.value = data.recordId;
+      method.setFieldsValue(data.componentInfo || {});
+    }
+  );
 
   const handleGetValue = () => {
     const value = method.getFieldsValue();
-    console.log(value);
+    emit('close', unref(recordId), value);
   };
 
   const handleClose = () => {
@@ -26,7 +37,14 @@
 </script>
 
 <template>
-  <BasicModal v-bind="$attrs" @register="register" @ok="handleClose" title="选项" width="60%">
+  <BasicModal
+    v-bind="$attrs"
+    destroy-on-close
+    @register="register"
+    @ok="handleClose"
+    title="选项"
+    width="60%"
+  >
     <BasicForm @register="registerForm" />
   </BasicModal>
 </template>

+import { byOganizationIdGetMasterDevice, getAttribute } from '/@/api/ruleengine/ruleengineApi';
 import { getOrganizationList } from '/@/api/system/system';
 import { FormSchema } from '/@/components/Form';
+import { copyTransFun } from '/@/utils/fnUtils';
+import { to } from '/@/utils/to';
+
+export enum DataSourceField {
+  DEVICE_ID = 'deviceId',
+}
 
 export const basicSchema: FormSchema[] = [
   {
     field: 'name',
     label: '组件名称',
     component: 'Input',
+    componentProps: {
+      placeholder: '请输入组件名称',
+    },
   },
   {
     field: 'remake',
     label: '组件备注',
     component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入组件备注',
+    },
   },
 ];
 
 export const dataSourceSchema: FormSchema[] = [
   {
-    field: 'org',
+    field: 'organizationId',
     component: 'ApiTreeSelect',
     label: '组织',
     colProps: { span: 6 },
-    componentProps() {
+    componentProps({ formActionType }) {
+      const { setFieldsValue } = formActionType;
       return {
         placeholder: '请选择组织',
         api: async () => {
           const data = await getOrganizationList();
+          copyTransFun(data as any as any[]);
           return data;
         },
-
-        onChange() {},
+        onChange() {
+          setFieldsValue({ device: null, attr: null });
+        },
+        getPopupContainer: () => document.body,
       };
     },
   },
   {
-    field: 'device',
-    component: 'Select',
+    field: 'deviceId',
+    component: 'ApiSelect',
     label: '设备',
     colProps: { span: 5 },
-    componentProps: {
-      placeholder: '请选择设备',
+    componentProps({ formModel, formActionType }) {
+      const { setFieldsValue } = formActionType;
+      const orgId = formModel['organizationId'];
+      return {
+        api: async () => {
+          if (orgId) {
+            const [, data] = await to<Record<'id' | 'name', string>[]>(
+              byOganizationIdGetMasterDevice(orgId)
+            );
+            if (data) return data.map((item) => ({ label: item.name, value: item.id }));
+          }
+          return [];
+        },
+        onChange() {
+          setFieldsValue({ attr: null });
+        },
+        placeholder: '请选择设备',
+        getPopupContainer: () => document.body,
+      };
     },
   },
   {
-    field: 'attr',
-    component: 'Select',
+    field: 'attribute',
+    component: 'ApiSelect',
     label: '属性',
     colProps: { span: 5 },
-    componentProps: {
-      placeholder: '请选择属性',
+    componentProps({ formModel }) {
+      const orgId = formModel['organizationId'];
+      const deviceId = formModel['deviceId'];
+      return {
+        api: async () => {
+          if (orgId && deviceId) {
+            const [, data] = await to<string[]>(getAttribute(orgId, deviceId));
+            // TODO attribute exist null
+            if (data) return data.filter(Boolean).map((item) => ({ label: item, value: item }));
+          }
+          return [];
+        },
+        placeholder: '请选择属性',
+        getPopupContainer: () => document.body,
+      };
     },
   },
   {
@@ -60,7 +107,7 @@ export const dataSourceSchema: FormSchema[] = [
     },
   },
   {
-    field: 'attrRename',
+    field: 'attributeRename',
     component: 'Input',
     label: '属性',
     colProps: { span: 4 },

+import { Component } from 'vue';
+import TextComponent from '../../components/TextComponent/TextComponent.vue';
+import {
+  TextComponent1Config,
+  TextComponent2Config,
+  TextComponent3Config,
+  TextComponent4Config,
+  TextComponent5Config,
+  transformTextComponentConfig,
+} from '../../components/TextComponent/config';
+import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
+export enum FrontComponent {
+  TEXT_COMPONENT_1 = 'text-component-1',
+  TEXT_COMPONENT_2 = 'text-component-2',
+  TEXT_COMPONENT_3 = 'text-component-3',
+  TEXT_COMPONENT_4 = 'text-component-4',
+  TEXT_COMPONENT_5 = 'text-component-5',
+}
+
+export type FrontComponentType =
+  | 'text-component-1'
+  | 'text-component-2'
+  | 'text-component-3'
+  | 'text-component-4'
+  | 'text-component-5';
+
+export interface ComponentConfig {
+  Component: Component;
+  ComponentConfig: Recordable;
+  transformConfig: (
+    ComponentConfig: Recordable,
+    record: DataComponentRecord,
+    dataSourceRecord: DataSource
+  ) => Recordable;
+}
+
+export const frontComponentMap = new Map<FrontComponentType, ComponentConfig>();
+
+frontComponentMap.set(FrontComponent.TEXT_COMPONENT_1, {
+  Component: TextComponent,
+  ComponentConfig: TextComponent1Config,
+  transformConfig: transformTextComponentConfig,
+});
+
+frontComponentMap.set(FrontComponent.TEXT_COMPONENT_2, {
+  Component: TextComponent,
+  ComponentConfig: TextComponent2Config,
+  transformConfig: transformTextComponentConfig,
+});
+
+frontComponentMap.set(FrontComponent.TEXT_COMPONENT_3, {
+  Component: TextComponent,
+  ComponentConfig: TextComponent3Config,
+  transformConfig: transformTextComponentConfig,
+});
+
+frontComponentMap.set(FrontComponent.TEXT_COMPONENT_4, {
+  Component: TextComponent,
+  ComponentConfig: TextComponent4Config,
+  transformConfig: transformTextComponentConfig,
+});
+
+frontComponentMap.set(FrontComponent.TEXT_COMPONENT_5, {
+  Component: TextComponent,
+  ComponentConfig: TextComponent5Config,
+  transformConfig: transformTextComponentConfig,
+});

 <script lang="ts" setup>
   import { Button, PageHeader } from 'ant-design-vue';
   import { GridItem, GridLayout, Layout } from 'vue3-grid-layout';
-  import { nextTick, ref } from 'vue';
+  import { nextTick, onMounted, ref } from 'vue';
   import WidgetWrapper from '../components/WidgetWrapper/WidgetWrapper.vue';
   import BaseWidgetHeader from '../components/WidgetHeader/BaseWidgetHeader.vue';
-  import InformationPanel from '../components/Other/InformationPanel.vue';
   import { DropMenu } from '/@/components/Dropdown';
   import DataBindModal from './components/DataBindModal.vue';
   import { useModal } from '/@/components/Modal';
   import { MoreActionEvent } from '../config/config';
+  import { deleteDataComponent, getDataComponent } from '/@/api/dataBoard';
+  import { useRoute } from 'vue-router';
+  import { computed, unref } from '@vue/reactivity';
+  import { DataComponentRecord, DataSource, Layout as LayoutRecord } from '/@/api/dataBoard/model';
+  import { frontComponentMap, FrontComponentType } from './config/help';
+  import { useMessage } from '/@/hooks/web/useMessage';
   const handleBack = () => {};
 
-  interface ChartAttr {
-    id: string | number;
-    width: number;
-    height: number;
-  }
+  type DataBoardRecord = DataComponentRecord & { layout: LayoutRecord };
 
-  interface ChartSetting extends Layout {
-    chart: ChartAttr[];
-  }
+  type DataBoardLayoutInfo = Layout & {
+    record: DataComponentRecord & { width: number; height: number };
+  };
+
+  const ROUTE = useRoute();
+
+  const { createMessage } = useMessage();
+  const getBoardId = computed(() => {
+    return (ROUTE.params as { id: string }).id;
+  });
 
   const widgetEl = new Map<string, Fn>();
 
-  const id = '296Charts';
-  // GridItem.
-  const layout = ref<ChartSetting[]>([
-    {
-      x: 0,
-      y: 0,
-      w: 6,
-      h: 6,
-      i: id,
-      static: false,
-      chart: [
-        { id: 'a', width: 100, height: 100 },
-        { id: 'b', width: 100, height: 100 },
-        // { id: 'c', width: 100, height: 100 },
-        // { id: 'd', width: 100, height: 100 },
-        // { id: 'e', width: 100, height: 100 },
-        // { id: 'f', width: 100, height: 100 },
-        // { id: 'g', width: 100, height: 100 },
-        // { id: 'h', width: 100, height: 100 },
-        // { id: 'i', width: 100, height: 100 },
-      ],
-    },
-    {
-      x: 0,
-      y: 0,
-      w: 6,
-      h: 6,
-      i: 'sdasdf',
-      static: false,
-      chart: [
-        { id: 'j', width: 100, height: 100 },
-        { id: 'k', width: 100, height: 100 },
-        { id: 'l', width: 100, height: 100 },
-        // { id: 'm', width: 100, height: 100 },
-        // { id: 'n', width: 100, height: 100 },
-        // { id: 'o', width: 100, height: 100 },
-        // { id: 'p', width: 100, height: 100 },
-        // { id: 'q', width: 100, height: 100 },
-        // { id: 'r', width: 100, height: 100 },
-      ],
-    },
-  ]);
+  const dataBoardList = ref<DataBoardLayoutInfo[]>([]);
+
   const draggable = ref(true);
   const resizable = ref(true);
 
   const GirdLayoutColNum = 24;
-
   const GridLayoutMargin = 10;
 
+  const defaultWidth = 6;
+  const defaultHeight = 6;
+
   function updateSize(i: string, newH: number, newW: number, newHPx: number, newWPx: number) {
     newWPx = Number(newWPx);
     newHPx = Number(newHPx);
 
-    const data = layout.value.find((item) => item.i === i)!;
-    const border = 2;
-    const length = data.chart.length || 0;
+    const data = dataBoardList.value.find((item) => item.i === i)!;
+    const length = data.record.dataSource.length || 0;
 
     const row = Math.floor(Math.pow(length, 0.5));
     const col = Math.floor(length / row);
@@ -98,13 +67,14 @@
       width = 100;
     }
 
-    data.chart = data?.chart.map((item) => {
+    data.record.dataSource = data?.record.dataSource.map((item) => {
       return {
         ...item,
         width,
         height,
       };
     });
+    console.log(unref(dataBoardList));
     nextTick(() => {
       const updateFn = widgetEl.get(i);
       if (updateFn) updateFn();
@@ -132,7 +102,7 @@
     });
   };
 
-  const setComponentRef = (el: Element, record: ChartSetting) => {
+  const setComponentRef = (el: Element, record: DataBoardLayoutInfo) => {
     if (widgetEl.has(record.i)) widgetEl.delete(record.i);
     if (el && (el as unknown as { update: Fn }).update)
       widgetEl.set(record.i, (el as unknown as { update: Fn }).update);
@@ -140,28 +110,75 @@
 
   const [register, { openModal }] = useModal();
 
-  const handleMoreAction = (event: DropMenu) => {
+  const handleMoreAction = (event: DropMenu, id: string) => {
     if (event.event === MoreActionEvent.EDIT) openModal(true);
+    if (event.event === MoreActionEvent.DELETE) handleDelete(id);
   };
+
+  const handleOpenCreatePanel = () => {
+    openModal(true);
+  };
+
+  const getDataBoardComponent = async () => {
+    try {
+      const data = await getDataComponent(unref(getBoardId));
+      dataBoardList.value = data.data.componentData.map((item) => {
+        const index = data.data.componentLayout.findIndex((each) => item.id === each.id);
+        const layout = data.data.componentLayout[index];
+        return {
+          i: item.id,
+          w: layout.w || defaultWidth,
+          h: layout.h || defaultHeight,
+          x: layout.x || 0,
+          y: layout.y || 0,
+          record: {
+            ...item,
+            width: 100,
+            height: 100,
+          },
+        };
+      });
+    } catch (error) {}
+  };
+
+  const getComponent = (record: DataComponentRecord) => {
+    const frontComponent = record.frontId;
+    const component = frontComponentMap.get(frontComponent as FrontComponentType);
+    return component?.Component;
+  };
+
+  const getComponentConfig = (record: DataComponentRecord, dataSourceRecord: DataSource) => {
+    const frontComponent = record.frontId;
+    const component = frontComponentMap.get(frontComponent as FrontComponentType);
+    return component?.transformConfig(component.ComponentConfig, record, dataSourceRecord);
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      await deleteDataComponent([id]);
+      createMessage.success('删除成功');
+      await getDataBoardComponent();
+    } catch (error) {
+      createMessage.error('删除失败');
+    }
+  };
+
+  onMounted(() => {
+    getDataBoardComponent();
+  });
 </script>
 
 <template>
-  <!-- <PageWrapper title="水电表看板" @back="handleBack" content="已创建组件: 3个">
-    <template #extra>
-      <Button type="primary">创建组件</Button>
-    </template>
-
-  </PageWrapper> -->
   <section class="bg-light-50 flex flex-col overflow-hidden h-full w-full">
     <PageHeader title="水电表看板" @back="handleBack">
       <template #extra>
-        <Button type="primary">创建组件</Button>
+        <Button type="primary" @click="handleOpenCreatePanel">创建组件</Button>
       </template>
       <div>已创建组件: 3个</div>
     </PageHeader>
     <section class="flex-1">
       <GridLayout
-        v-model:layout="layout"
+        v-model:layout="dataBoardList"
         :col-num="GirdLayoutColNum"
         :row-height="30"
         :margin="[GridLayoutMargin, GridLayoutMargin]"
@@ -172,7 +189,7 @@
         style="width: 100%"
       >
         <GridItem
-          v-for="item in layout"
+          v-for="item in dataBoardList"
           :key="item.i"
           :static="item.static"
           :x="item.x"
@@ -190,24 +207,27 @@
           <WidgetWrapper
             :key="item.i"
             :ref="(el: Element) => setComponentRef(el, item)"
-            :data-source="item.chart"
+            :data-source="item.record.dataSource"
           >
             <template #header>
               <!-- <div>header</div> -->
-              <BaseWidgetHeader @action="handleMoreAction" />
+              <BaseWidgetHeader :id="item.record.id" @action="handleMoreAction" />
             </template>
-            <template #controls="{ record, add }">
-              <InformationPanel />
-              <!-- <LightBulbSwitch @change="handleChange" /> -->
-              <!-- <div :id="getControlsWidgetId(record.id)" class="widget-charts" /> -->
-              <!-- <BaseDashboard :data-source="record" :add="add" /> -->
+            <template #controls="{ record, add, remove, update }">
+              <component
+                :is="getComponent(item.record)"
+                :add="add"
+                :remove="remove"
+                :update="update"
+                v-bind="getComponentConfig(item.record, record)"
+              />
             </template>
           </WidgetWrapper>
         </GridItem>
       </GridLayout>
     </section>
   </section>
-  <DataBindModal @register="register" />
+  <DataBindModal @register="register" @submit="getDataBoardComponent" />
 </template>
 
 <style>

 <script lang="ts" setup>
-  import { List, Card, Statistic, Button, Tooltip } from 'ant-design-vue';
+  import { List, Card, Statistic, Button, Tooltip, Spin } from 'ant-design-vue';
   import { onMounted, ref, unref } from 'vue';
   import { PageWrapper } from '/@/components/Page';
   import { MoreOutlined, ShareAltOutlined } from '@ant-design/icons-vue';
@@ -20,6 +20,7 @@
 
   const { createMessage } = useMessage();
 
+  const loading = ref(false);
   const dataBoardList = ref<DataBoardRecord[]>([]);
   //分页相关
   const page = ref(1);
@@ -65,6 +66,7 @@
 
   const getDatasource = async () => {
     try {
+      loading.value = true;
       const { total, items } = await getDataBoardList({
         page: unref(paginationProp).current,
         pageSize: unref(paginationProp).pageSize,
@@ -73,6 +75,7 @@
       paginationProp.value.total = total;
     } catch (error) {
     } finally {
+      loading.value = false;
     }
   };
 
@@ -120,53 +123,55 @@
       <div class="text-lg mr-6 font-bold">自定义看板</div>
       <Button type="primary" @click="handleOpenDetailModal">创建看板</Button>
     </div>
-    <List
-      :pagination="paginationProp"
-      :data-source="dataBoardList"
-      :grid="{ gutter: 5, column: 4, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 3 }"
-    >
-      <template #renderItem="{ item }">
-        <ListItem>
-          <Card class="data-card cursor-pointer" @click="handleViewBoard(item)">
-            <template #extra>
-              <Dropdown
-                :trigger="['click']"
-                @menu-event="(event) => handleMenuEvent(event, item)"
-                :drop-menu-list="dropMenuList"
-              >
-                <MoreOutlined class="rotate-90 transform cursor-pointer" />
-              </Dropdown>
-            </template>
-            <!-- <template #cover>title</template> -->
-            <section>
-              <div class="flex justify-between items-center">
-                <div>{{ item.name }}</div>
-                <div class="flex content-center">
-                  <Statistic value="12">
-                    <template #suffix>
-                      <span class="text-sm">个组件</span>
-                    </template>
-                  </Statistic>
+    <Spin :spinning="loading">
+      <List
+        :pagination="paginationProp"
+        :data-source="dataBoardList"
+        :grid="{ gutter: 5, column: 4, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 3 }"
+      >
+        <template #renderItem="{ item }">
+          <ListItem>
+            <Card class="data-card cursor-pointer">
+              <template #extra>
+                <Dropdown
+                  :trigger="['click']"
+                  @menu-event="(event) => handleMenuEvent(event, item)"
+                  :drop-menu-list="dropMenuList"
+                >
+                  <MoreOutlined class="rotate-90 transform cursor-pointer" />
+                </Dropdown>
+              </template>
+              <!-- <template #cover>title</template> -->
+              <section @click="handleViewBoard(item)">
+                <div class="flex justify-between items-center">
+                  <div>{{ item.name }}</div>
+                  <div class="flex content-center">
+                    <Statistic value="12">
+                      <template #suffix>
+                        <span class="text-sm">个组件</span>
+                      </template>
+                    </Statistic>
+                  </div>
                 </div>
-              </div>
-              <div class="flex justify-between mt-4">
-                <div>
-                  <span>
-                    {{ item.viewType === ViewType.PRIVATE_VIEW ? '私有看板' : '公共看板' }}
-                  </span>
-                  <span v-if="item.viewType === ViewType.PUBLIC_VIEW">
-                    <Tooltip title="分享链接">
-                      <ShareAltOutlined class="ml-2" @click="handleCopyShareUrl(item)" />
-                    </Tooltip>
-                  </span>
+                <div class="flex justify-between mt-4">
+                  <div>
+                    <span>
+                      {{ item.viewType === ViewType.PRIVATE_VIEW ? '私有看板' : '公共看板' }}
+                    </span>
+                    <span v-if="item.viewType === ViewType.PUBLIC_VIEW">
+                      <Tooltip title="分享链接">
+                        <ShareAltOutlined class="ml-2" @click="handleCopyShareUrl(item)" />
+                      </Tooltip>
+                    </span>
+                  </div>
+                  <div>{{ item.updateTime || item.createTime }}</div>
                 </div>
-                <div>{{ item.updateTime || item.createTime }}</div>
-              </div>
-            </section>
-          </Card>
-        </ListItem>
-      </template>
-    </List>
+              </section>
+            </Card>
+          </ListItem>
+        </template>
+      </List>
+    </Spin>
     <PanelDetailModal @register="registerModal" @change="getDatasource" />
   </PageWrapper>
 </template>