wip: implement digitalDashboardComponent && DashboardComponent

@@ -7,6 +7,7 @@ import {
   Layout,
   UpdateDataBoardLayoutParams,
   UpdateDataBoardParams,
+  UpdateDataComponentParams,
 } from './model';
 import { defHttp } from '/@/utils/http/axios';
 
@@ -22,6 +23,7 @@ enum DataComponentUrl {
   GET_DATA_COMPONENT = '/data_component',
   ADD_DATA_COMPONENT = '/data_component',
   DELETE_DATA_COMPONENT = '/data_component',
+  UPDATE_DATA_COMPONENT = '/data_component',
 }
 
 /**
@@ -118,3 +120,15 @@ export const deleteDataComponent = (params: string[]) => {
     },
   });
 };
+
+/**
+ * @description 更新数据组件
+ * @param params
+ * @returns
+ */
+export const updateDataComponent = (params: UpdateDataComponentParams) => {
+  return defHttp.post({
+    url: `${DataComponentUrl.UPDATE_DATA_COMPONENT}/${params.boardId}/update`,
+    params: params.record,
+  });
+};

@@ -111,3 +111,8 @@ export interface UpdateDataBoardLayoutParams {
   boardId: string;
   layout: Layout[];
 }
+
+export interface UpdateDataComponentParams {
+  boardId: string;
+  record: Partial<DataComponentRecord>;
+}

@@ -3,67 +3,31 @@
   import type { PropType } from 'vue';
   import { nextTick, onMounted, onUnmounted, ref, unref } from 'vue';
   import { init } from 'echarts';
-
-  interface DataSource {
-    id: string | number;
-  }
+  import { instrumentComponent1 } from './dashBoardComponent.config';
+  import { dateUtil } from '/@/utils/dateUtil';
 
   const props = defineProps({
-    dataSource: {
-      type: Object as PropType<DataSource>,
-      required: true,
-    },
-    chartOption: {
-      type: Object as PropType<EChartsOption>,
-      // required: true,
-    },
     add: {
       type: Function,
-      required: true,
+    },
+    layout: {
+      type: Object as PropType<Recordable>,
+      default: () => ({}),
+    },
+    value: {
+      type: Object as PropType<Recordable>,
+      default: () => ({}),
     },
   });
 
-  const getControlsWidgetId = () => `widget-chart-${props.dataSource.id}`;
+  const getControlsWidgetId = () => `widget-chart-${props.value.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)',
-            },
-          },
-        },
-      ],
-    };
+    const option: EChartsOption = props.layout || instrumentComponent1();
 
     nextTick(() => {
       option && unref(chartRef)?.setOption(option);
@@ -76,7 +40,7 @@
 
   onMounted(() => {
     initChart();
-    props.add(props.dataSource.id, update);
+    props.add && props.add(props.value.id, update);
   });
 
   onUnmounted(() => {
@@ -89,7 +53,13 @@
 <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>{{}}</div>
+    <div class="text-xs text-center text-gray-400">
+      <span>更新时间:</span>
+      <span>
+        {{ props.value.updateTime || dateUtil().format('YYYY-MM-DD HH:mm:ss') }}
+      </span>
+    </div>
   </div>
 </template>
 

-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { Space } from 'ant-design-vue';
+  import type { DigitalDashBoardLayout, DigitalDashBoardValue } from './digitalDashBoard.config';
+  import { dateUtil } from '/@/utils/dateUtil';
 
-<template> </template>
+  const props = defineProps<{
+    layout: DigitalDashBoardLayout;
+    value: DigitalDashBoardValue;
+  }>();
+
+  const integerPart = computed(() => {
+    const { value = 0 } = props.value;
+    const { max = 5 } = props.layout;
+    let _value = value?.toFixed(2).split('.')[0];
+    if (_value.length < max) _value = _value.padStart(5, '0');
+
+    if (_value.length > max) _value = ''.padStart(5, '9');
+
+    return _value;
+  });
+
+  const decimalPart = computed(() => {
+    const { value = 0 } = props.value;
+    const { keepNumber = 2 } = props.layout;
+    let _value = value?.toFixed(2).split('.')[1];
+    if (_value.length < keepNumber) _value = _value.padStart(5, '0');
+
+    if (_value.length > keepNumber) _value = ''.padStart(5, '0');
+
+    return _value;
+  });
+</script>
+
+<template>
+  <section class="w-full h-full">
+    <div class="flex flex-col w-full h-full">
+      <div class="flex-1 flex justify-center items-center">
+        <div class="flex flex-col">
+          <Space justify="end" class="justify-end">
+            <div
+              v-for="number in integerPart"
+              :key="number"
+              class="border border-gray-400 p-2"
+              :style="{ color: props.value.valueColor }"
+            >
+              {{ number }}
+            </div>
+          </Space>
+          <Space justify="end" class="justify-end mt-2">
+            <div
+              v-for="number in decimalPart"
+              :key="number"
+              class="border border-gray-400 p-1"
+              :style="{ color: props.value.valueColor }"
+            >
+              {{ number }}
+            </div>
+          </Space>
+        </div>
+      </div>
+
+      <div class="text-center">
+        <span>{{ props.value.name || '电表' }}</span>
+        <span class="px-1">({{ props.value.unit || 'kw/h' }})</span>
+      </div>
+      <div class="text-center mt-1 text-gray-400 text-xs">
+        <span class="mr-1">更新时间:</span>
+        <span>{{ props.value.updateTime || dateUtil().format('YYYY-MM-DD HH:mm:ss') }}</span>
+      </div>
+    </div>
+    <div></div>
+  </section>
+</template>

+import { EChartsOption } from 'echarts';
+import { visualOptionField } from '../../detail/config/visualOptions';
+
+export type InstrumentComponentType = 'instrument-component-1' | 'instrument-component-2';
+
+export type GradientKey =
+  | visualOptionField.FIRST_PHASE_COLOR
+  | visualOptionField.FIRST_PHASE_VALUE
+  | visualOptionField.SECOND_PHASE_COLOR
+  | visualOptionField.SECOND_PHASE_VALUE
+  | visualOptionField.THIRD_PHASE_COLOR
+  | visualOptionField.THIRD_PHASE_VALUE;
+export interface GradientInfoRecord {
+  key: GradientKey;
+  value: number | string;
+}
+
+export interface DashBoardValue {
+  unit?: string;
+  name?: string;
+  updateTime?: string;
+  value?: number;
+  valueColor?: string;
+  gradientInfo?: GradientInfoRecord[];
+}
+
+export const instrumentComponent1 = (params?: { value: number; unit: string }): EChartsOption => {
+  const { value = 10, unit = '°C' } = params || {};
+  return {
+    series: [
+      {
+        type: 'gauge',
+        center: ['50%', '60%'],
+        startAngle: 200,
+        endAngle: -20,
+        min: 0,
+        max: 60,
+        splitNumber: 12,
+        itemStyle: {
+          color: '#FFAB91',
+        },
+        progress: {
+          show: true,
+          width: 30,
+        },
+        pointer: {
+          show: false,
+        },
+        axisLine: {
+          lineStyle: {
+            width: 30,
+          },
+        },
+        axisTick: {
+          distance: -45,
+          splitNumber: 5,
+          lineStyle: {
+            width: 2,
+            color: '#999',
+          },
+        },
+        splitLine: {
+          distance: -52,
+          length: 14,
+          lineStyle: {
+            width: 3,
+            color: '#999',
+          },
+        },
+        axisLabel: {
+          distance: -20,
+          color: '#999',
+          fontSize: 20,
+        },
+        anchor: {
+          show: false,
+        },
+        title: {
+          show: false,
+        },
+        detail: {
+          valueAnimation: true,
+          width: '60%',
+          lineHeight: 40,
+          borderRadius: 8,
+          offsetCenter: [0, '-15%'],
+          fontSize: 16,
+          fontWeight: 'bolder',
+          formatter: `{value} ${unit}`,
+          color: 'auto',
+        },
+        data: [
+          {
+            value: value,
+          },
+        ],
+      },
+      {
+        type: 'gauge',
+        center: ['50%', '60%'],
+        startAngle: 200,
+        endAngle: -20,
+        min: 0,
+        max: 60,
+        itemStyle: {
+          color: '#FD7347',
+        },
+        progress: {
+          show: true,
+          width: 8,
+        },
+        pointer: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        detail: {
+          show: false,
+        },
+        data: [
+          {
+            value: value,
+          },
+        ],
+      },
+    ],
+  };
+};
+
+export const instrumentComponent2 = (params?: {
+  gradient: GradientInfoRecord[];
+  value: number;
+  unit: string;
+}): EChartsOption => {
+  const { gradient = [], value = 0, unit = 'km/h' } = params || {};
+  return {
+    series: [
+      {
+        type: 'gauge',
+        axisLine: {
+          lineStyle: {
+            width: 30,
+            color: [
+              [
+                0.3,
+                (getGradientValue(visualOptionField.FIRST_PHASE_COLOR, gradient) as string) ||
+                  '#67e0e3',
+              ],
+              [
+                0.7,
+                (getGradientValue(visualOptionField.SECOND_PHASE_COLOR, gradient) as string) ||
+                  '#37a2da',
+              ],
+              [
+                1,
+                (getGradientValue(visualOptionField.THIRD_PHASE_COLOR, gradient) as string) ||
+                  '#fd666d',
+              ],
+            ],
+          },
+        },
+        pointer: {
+          itemStyle: {
+            color: 'auto',
+          },
+        },
+        axisTick: {
+          distance: -30,
+          length: 8,
+          lineStyle: {
+            color: '#fff',
+            width: 2,
+          },
+        },
+        splitLine: {
+          distance: -30,
+          length: 30,
+          lineStyle: {
+            color: '#fff',
+            width: 4,
+          },
+        },
+        axisLabel: {
+          color: 'auto',
+          distance: 40,
+          fontSize: 14,
+        },
+        detail: {
+          valueAnimation: true,
+          formatter: `{value} ${unit}`,
+          color: 'auto',
+          fontSize: '16',
+        },
+        data: [
+          {
+            value: value,
+          },
+        ],
+      },
+    ],
+  };
+};
+
+export const getGradientValue = (key: GradientKey, record: GradientInfoRecord[]) => {
+  return record.find((item) => item.key === key)?.value;
+};

+export type DigitalDashBoardComponentType = 'digital-dashboard';
+
+export interface DigitalDashBoardLayout {
+  max: number;
+  keepNumber: number;
+}
+
+export interface DigitalDashBoardValue {
+  unit?: string;
+  name?: string;
+  updateTime?: string;
+  value?: number;
+  valueColor?: string;
+}

+import { Component } from 'vue';
+import { WidgetComponentType } from '../../detail/config/visualOptions';
+import { instrumentComponent1, instrumentComponent2 } from './dashBoardComponent.config';
+import DashBoardComponent from './DashBoardComponent.vue';
+import DigitalDashBoard from './DigitalDashBoard.vue';
+import { buildUUID } from '/@/utils/uuid';
+
+interface InstrumentComponentConfig {
+  id: WidgetComponentType;
+  layout: Recordable;
+  component: Component;
+  value: Recordable;
+}
+
+export const instrumentComponentConfig: InstrumentComponentConfig[] = [
+  {
+    id: 'instrument-component-1',
+    layout: instrumentComponent1(),
+    component: DashBoardComponent,
+    value: { id: buildUUID() },
+  },
+  {
+    id: 'instrument-component-2',
+    layout: instrumentComponent2(),
+    component: DashBoardComponent,
+    value: { id: buildUUID() },
+  },
+  {
+    id: 'digital-dashboard',
+    layout: {},
+    component: DigitalDashBoard,
+    value: {},
+  },
+];

@@ -18,6 +18,13 @@ export interface TextComponentValue {
   iconColor?: string;
 }
 
+export type TextComponentType =
+  | 'text-component-1'
+  | 'text-component-2'
+  | 'text-component-3'
+  | 'text-component-4'
+  | 'text-component-5';
+
 type TextComponentDefault = TextComponentLayout & { value: TextComponentValue };
 
 export const TextComponent1Config: TextComponentDefault = {

@@ -10,8 +10,6 @@
 
   const slot = useSlots();
 
-  console.log({ dataSource: props.dataSource });
-
   const { update, add, remove } = useUpdateCenter();
 
   onMounted(() => {

@@ -4,27 +4,28 @@
   import { FormActionType, useForm } from '/@/components/Form';
   import { basicSchema, dataSourceSchema } from '../config/basicConfiguration';
   import BasicForm from '/@/components/Form/src/BasicForm.vue';
-  import { onMounted, reactive, ref, shallowReactive, unref, nextTick } from 'vue';
+  import { reactive, ref, shallowReactive, unref, nextTick, watch } 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 type { ComponentInfo, DataSource } from '/@/api/dataBoard/model';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { DataBoardLayoutInfo } from '../../types/type';
 
   type DataSourceFormEL = { [key: string]: Nullable<FormActionType> };
 
   type DataSourceEl = DataSource & { id: string };
 
   const props = defineProps<{
-    record: DataComponentRecord;
+    record: DataBoardLayoutInfo;
     frontId?: string;
   }>();
 
   const { createMessage } = useMessage();
 
-  const componentRecord = reactive<DataComponentRecord>({
-    id: 'string',
-  } as unknown as DataComponentRecord);
+  // const componentRecord = reactive<DataBoardLayoutInfo>({
+  //   ...props.record,
+  // } as unknown as DataBoardLayoutInfo);
 
   const dataSource = ref<DataSourceEl[]>([{ id: buildUUID() } as unknown as DataSourceEl]);
 
@@ -38,7 +39,6 @@
 
   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;
     }
@@ -59,12 +59,12 @@
     for (const id of hasExistEl) {
       const index = unref(dataSource).findIndex((item) => item.id === id);
       const value = (dataSourceEl[id] as FormActionType).getFieldsValue() as DataSource;
+      if (!~index) continue;
       const componentInfo = unref(dataSource)[index].componentInfo || {};
-      ~index &&
-        _dataSource.push({
-          ...value,
-          componentInfo: { ...componentInfo },
-        });
+      _dataSource.push({
+        ...value,
+        componentInfo: { ...componentInfo },
+      });
     }
     return _dataSource;
   };
@@ -113,19 +113,38 @@
   };
 
   const echoDataSource = () => {
-    basicMethod.setFieldsValue(props.record);
-    // dataSourceMethod.setFieldsValue(props.record);
+    basicMethod.setFieldsValue(props.record.record);
+    dataSource.value = [];
+    dataSource.value = props.record.record.dataSource.map((item) => {
+      const id = buildUUID();
+
+      dataSource.value.push({
+        id,
+        ...item,
+      });
+
+      nextTick(() => {
+        (dataSourceEl[id] as FormActionType).setFieldsValue(item);
+      });
+      return {
+        id,
+        ...item,
+      };
+    });
   };
 
+  watch(
+    () => props.record,
+    () => {
+      if (Object.keys(props.record).length) echoDataSource();
+    }
+  );
+
   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,
   });
@@ -179,7 +198,11 @@
     <div class="text-center">
       <Button type="primary" @click="handleAdd">添加数据源</Button>
     </div>
-    <VisualOptionsModal @close="handleRowComponentInfo" @register="registerVisualOptionModal" />
+    <VisualOptionsModal
+      :value="props.frontId"
+      @close="handleRowComponentInfo"
+      @register="registerVisualOptionModal"
+    />
   </section>
 </template>
 

@@ -4,11 +4,12 @@
   import BasicConfiguration from './BasicConfiguration.vue';
   import VisualConfiguration from './VisualConfiguration.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 { addDataComponent, updateDataBoardLayout, updateDataComponent } from '/@/api/dataBoard';
   import { useModalInner } from '/@/components/Modal';
   import { DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH } from '../../config/config';
+  import { DataBoardLayoutInfo } from '../../types/type';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
   interface DataComponentRouteParams extends RouteParams {
     id: string;
@@ -18,11 +19,7 @@
 
   const ROUTE = useRoute();
 
-  const [register, { closeModal }] = useModalInner();
-
-  const basicConfigurationEl = ref<{
-    getAllDataSourceFieldValue: Fn<any, Recordable>;
-  }>();
+  const { createMessage } = useMessage();
 
   const boardId = computed(() => {
     return (ROUTE.params as DataComponentRouteParams).id;
@@ -30,12 +27,26 @@
 
   const frontId = ref('');
 
-  const componentRecord = ref<DataComponentRecord>({} as unknown as DataComponentRecord);
+  const isEdit = ref(false);
+
+  const componentRecord = ref<DataBoardLayoutInfo>({} as unknown as DataBoardLayoutInfo);
+
+  const [register, { closeModal }] = useModalInner(
+    (record: DataBoardLayoutInfo & { isEdit: boolean }) => {
+      componentRecord.value = record;
+      frontId.value = record.record.frontId;
+      isEdit.value = record.isEdit;
+    }
+  );
+
+  const basicConfigurationEl = ref<{
+    getAllDataSourceFieldValue: Fn<any, Recordable>;
+  }>();
 
   const handleSubmit = () => {
     const { getAllDataSourceFieldValue } = unref(basicConfigurationEl)!;
     const value = getAllDataSourceFieldValue();
-    handleAddComponent(value);
+    unref(isEdit) ? handleUpdateComponent(value) : handleAddComponent(value);
   };
 
   const handleAddComponent = async (value: Recordable) => {
@@ -44,6 +55,7 @@
         boardId: unref(boardId),
         record: { dataBoardId: unref(boardId), frontId: unref(frontId), ...value },
       });
+      createMessage.success('创建成功');
       const id = data.data.id;
       await updateDataBoardLayout({
         boardId: unref(boardId),
@@ -51,7 +63,28 @@
       });
       closeModal();
       emit('submit');
-    } catch (error) {}
+    } catch (error) {
+      // createMessage.error('创建失败');
+    }
+  };
+
+  const handleUpdateComponent = async (value: Recordable) => {
+    try {
+      await updateDataComponent({
+        boardId: unref(boardId),
+        record: {
+          id: unref(componentRecord).i,
+          dataBoardId: unref(boardId),
+          frontId: unref(frontId),
+          ...value,
+        },
+      });
+      createMessage.success('修改成功');
+      closeModal();
+      emit('submit');
+    } catch (error) {
+      // createMessage.error('修改失败');
+    }
   };
 </script>
 
@@ -61,6 +94,7 @@
     @register="register"
     title="自定义组件"
     width="70%"
+    destroy-on-close
     @ok="handleSubmit"
   >
     <section>

@@ -3,6 +3,7 @@
   import VisualWidgetSelect from './VisualWidgetSelect.vue';
   import TextComponent from '../../components/TextComponent/TextComponent.vue';
   import { textComponentConfig } from '../../components/TextComponent/config';
+  import { instrumentComponentConfig } from '../../components/InstrumentComponent';
   const props = defineProps<{
     value: string;
   }>();
@@ -35,7 +36,22 @@
         </List>
       </Tabs.TabPane>
       <Tabs.TabPane key="2" tab="仪表组件">
-        <div>仪表组件</div>
+        <List
+          :grid="{ gutter: 10, column: 3, xs: 3, sm: 3, md: 3, lg: 3, xl: 3, xxl: 3 }"
+          :data-source="instrumentComponentConfig"
+        >
+          <template #renderItem="{ item }">
+            <List.Item class="!flex !justify-center">
+              <VisualWidgetSelect
+                :checked-id="props.value"
+                :control-id="item.id"
+                @change="handleCheck"
+              >
+                <component :is="item.component" :layout="item.layout" :value="item.value" />
+              </VisualWidgetSelect>
+            </List.Item>
+          </template>
+        </List>
       </Tabs.TabPane>
     </Tabs>
   </section>

 <script lang="ts" setup>
-  import { onMounted, ref, unref } from 'vue';
-  import { modeOne, modeTwo, modeThree, modeFour } from '../config/visualOptions';
+  import { ref, unref } from 'vue';
+  import { WidgetComponentType, schemasMap } from '../config/visualOptions';
   import { useForm, BasicForm } from '/@/components/Form';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { ComponentInfo } from '/@/api/dataBoard/model';
+  import { computed } from '@vue/reactivity';
 
   const emit = defineEmits(['close']);
 
+  const props = defineProps<{
+    value?: string;
+  }>();
+
   const recordId = ref('');
 
+  const getSchemas = computed(() => {
+    return schemasMap.get((props.value as WidgetComponentType) || 'text-component-1');
+  });
+
   const [registerForm, method] = useForm({
-    schemas: modeTwo,
     showActionButtonGroup: false,
     labelWidth: 120,
     baseColProps: {
@@ -45,6 +53,6 @@
     title="选项"
     width="60%"
   >
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm" :schemas="getSchemas" />
   </BasicModal>
 </template>

+import { InstrumentComponentType } from '../../components/InstrumentComponent/dashBoardComponent.config';
+import { DigitalDashBoardComponentType } from '../../components/InstrumentComponent/digitalDashBoard.config';
+import { TextComponentType } from '../../components/TextComponent/config';
 import { FormSchema } from '/@/components/Form';
 export enum defaultOptions {
   fontColor = '#rer',
 }
 
+export type WidgetComponentType =
+  | TextComponentType
+  | InstrumentComponentType
+  | DigitalDashBoardComponentType;
+
 export enum visualOptionField {
   FONT_COLOR = 'fontColor',
   UNIT = 'unit',
@@ -137,3 +145,13 @@ export const modeFour: FormSchema[] = [
     },
   },
 ];
+
+export const schemasMap = new Map<WidgetComponentType, FormSchema[]>();
+
+schemasMap.set('text-component-1', modeOne);
+schemasMap.set('text-component-2', modeOne);
+schemasMap.set('text-component-3', modeOne);
+schemasMap.set('text-component-4', modeTwo);
+schemasMap.set('text-component-4', modeTwo);
+schemasMap.set('instrument-component-1', modeOne);
+schemasMap.set('instrument-component-2', modeThree);

 <script lang="ts" setup>
   import { Button, PageHeader } from 'ant-design-vue';
-  import { GridItem, GridLayout, Layout } from 'vue3-grid-layout';
+  import { GridItem, GridLayout } from 'vue3-grid-layout';
   import { nextTick, onMounted, ref } from 'vue';
   import WidgetWrapper from '../components/WidgetWrapper/WidgetWrapper.vue';
   import BaseWidgetHeader from '../components/WidgetHeader/BaseWidgetHeader.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 { DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH, MoreActionEvent } from '../config/config';
+  import {
+    addDataComponent,
+    deleteDataComponent,
+    getDataComponent,
+    updateDataBoardLayout,
+  } 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 { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
   import { frontComponentMap, FrontComponentType } from './config/help';
   import { useMessage } from '/@/hooks/web/useMessage';
-  const handleBack = () => {};
-
-  type DataBoardRecord = DataComponentRecord & { layout: LayoutRecord };
-
-  type DataBoardLayoutInfo = Layout & {
-    record: DataComponentRecord & { width: number; height: number };
-  };
+  import { DataBoardLayoutInfo } from '../types/type';
 
   const ROUTE = useRoute();
 
-  const { createMessage } = useMessage();
+  const { createMessage, createConfirm } = useMessage();
   const getBoardId = computed(() => {
     return (ROUTE.params as { id: string }).id;
   });
@@ -74,7 +73,7 @@
         height,
       };
     });
-    console.log(unref(dataBoardList));
+
     nextTick(() => {
       const updateFn = widgetEl.get(i);
       if (updateFn) updateFn();
@@ -83,6 +82,7 @@
 
   const itemResized = (i: string, newH: number, newW: number, newHPx: number, newWPx: number) => {
     updateSize(i, newH, newW, newHPx, newWPx);
+    console.log({ newH, newW, newHPx, newWPx });
   };
 
   const itemContainerResized = (
@@ -111,8 +111,15 @@
   const [register, { openModal }] = useModal();
 
   const handleMoreAction = (event: DropMenu, id: string) => {
-    if (event.event === MoreActionEvent.EDIT) openModal(true);
-    if (event.event === MoreActionEvent.DELETE) handleDelete(id);
+    if (event.event === MoreActionEvent.DELETE) {
+      createConfirm({
+        iconType: 'warning',
+        content: '是否确认删除?',
+        onOk: () => handleDelete(id),
+      });
+    }
+    if (event.event === MoreActionEvent.EDIT) handleUpdate(id);
+    if (event.event === MoreActionEvent.COPY) handleCopy(id);
   };
 
   const handleOpenCreatePanel = () => {
@@ -124,7 +131,12 @@
       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];
+        let layout;
+        if (!~index) {
+          layout = {};
+        } else {
+          layout = data.data.componentLayout[index];
+        }
         return {
           i: item.id,
           w: layout.w || defaultWidth,
@@ -138,6 +150,7 @@
           },
         };
       });
+      console.log(unref(dataBoardList));
     } catch (error) {}
   };
 
@@ -153,13 +166,40 @@
     return component?.transformConfig(component.ComponentConfig, record, dataSourceRecord);
   };
 
+  const handleUpdate = async (id: string) => {
+    const record = unref(dataBoardList).find((item) => item.i === id);
+    openModal(true, { isEdit: true, ...record });
+  };
+
+  const handleCopy = async (id: string) => {
+    const record = unref(dataBoardList).find((item) => item.i === id);
+    console.log({ record });
+    try {
+      const data = await addDataComponent({
+        boardId: unref(getBoardId),
+        record: {
+          dataBoardId: unref(getBoardId),
+          frontId: record?.record.frontId,
+          dataSource: record?.record.dataSource,
+        },
+      });
+      createMessage.success('复制成功');
+      const id = data.data.id;
+      await updateDataBoardLayout({
+        boardId: unref(getBoardId),
+        layout: [{ id, w: DEFAULT_WIDGET_WIDTH, h: DEFAULT_WIDGET_HEIGHT, x: 0, y: 0 }],
+      });
+      getDataBoardComponent();
+    } catch (error) {}
+  };
+
   const handleDelete = async (id: string) => {
     try {
       await deleteDataComponent([id]);
       createMessage.success('删除成功');
       await getDataBoardComponent();
     } catch (error) {
-      createMessage.error('删除失败');
+      // createMessage.error('删除失败');
     }
   };
 
@@ -170,11 +210,14 @@
 
 <template>
   <section class="bg-light-50 flex flex-col overflow-hidden h-full w-full">
-    <PageHeader title="水电表看板" @back="handleBack">
+    <PageHeader title="水电表看板">
       <template #extra>
         <Button type="primary" @click="handleOpenCreatePanel">创建组件</Button>
       </template>
-      <div>已创建组件: 3个</div>
+      <div>
+        <span class="mr-3 text-gray-400">已创建组件:</span>
+        <span class="text-cyan-400"> {{ dataBoardList.length }}个</span>
+      </div>
     </PageHeader>
     <section class="flex-1">
       <GridLayout

@@ -159,7 +159,7 @@
                       {{ item.viewType === ViewType.PRIVATE_VIEW ? '私有看板' : '公共看板' }}
                     </span>
                     <span v-if="item.viewType === ViewType.PUBLIC_VIEW">
-                      <Tooltip title="分享链接">
+                      <Tooltip title="点击复制分享链接">
                         <ShareAltOutlined class="ml-2" @click="handleCopyShareUrl(item)" />
                       </Tooltip>
                     </span>

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