wip: implement drag && drop save layou info

@@ -53,6 +53,7 @@ export interface DataBoardList {
 export interface GradientInfo {
   value: number;
   key: string;
+  color: string;
 }
 
 export interface ComponentInfo {

@@ -27,7 +27,7 @@
   function initChart() {
     const chartDom = document.getElementById(getControlsWidgetId())!;
     chartRef.value = init(chartDom);
-    const option: EChartsOption = props.layout || instrumentComponent1();
+    const option: EChartsOption = props.layout.chartOption || instrumentComponent1();
 
     nextTick(() => {
       option && unref(chartRef)?.setOption(option);
@@ -52,13 +52,15 @@
 
 <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>{{}}</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 :id="getControlsWidgetId()" class="widget-charts flex-auto"></div>
+    <div>
+      <div class="text-center">{{ props.value.name }}</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>
   </div>
 </template>

+<script lang="ts" setup>
+  import { Image } from 'ant-design-vue';
+
+  const props = defineProps<{
+    value: {
+      src: string;
+    };
+  }>();
+</script>
+
+<template>
+  <section>
+    <Image
+      :src="
+        props?.value?.src ||
+        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
+      "
+    />
+  </section>
+</template>
+
+<style></style>

 import { EChartsOption } from 'echarts';
 import { visualOptionField } from '../../detail/config/visualOptions';
+import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
+import { buildUUID } from '/@/utils/uuid';
 
 export type InstrumentComponentType = 'instrument-component-1' | 'instrument-component-2';
 
@@ -10,6 +12,7 @@ export type GradientKey =
   | visualOptionField.SECOND_PHASE_VALUE
   | visualOptionField.THIRD_PHASE_COLOR
   | visualOptionField.THIRD_PHASE_VALUE;
+
 export interface GradientInfoRecord {
   key: GradientKey;
   value: number | string;
@@ -24,6 +27,10 @@ export interface DashBoardValue {
   gradientInfo?: GradientInfoRecord[];
 }
 
+export interface DashboardComponentLayout {
+  chartOption: EChartsOption;
+}
+
 export const instrumentComponent1 = (params?: { value: number; unit: string }): EChartsOption => {
   const { value = 10, unit = '°C' } = params || {};
   return {
@@ -214,3 +221,24 @@ export const instrumentComponent2 = (params?: {
 export const getGradientValue = (key: GradientKey, record: GradientInfoRecord[]) => {
   return record.find((item) => item.key === key)?.value;
 };
+
+export const transformDashboardComponentConfig = (
+  config: DashboardComponentLayout,
+  record: DataComponentRecord,
+  dataSourceRecord: DataSource
+) => {
+  return {
+    layout: {
+      chartOption: config,
+    } as DashboardComponentLayout,
+    value: {
+      id: buildUUID(),
+      name: dataSourceRecord.attributeRename || dataSourceRecord.attribute,
+      // value: record.va
+      unit: dataSourceRecord.componentInfo.unit,
+      updateTime: record.updateTime || record.createTime,
+      fontColor: dataSourceRecord.componentInfo.fontColor,
+      gradientInfo: dataSourceRecord.componentInfo.gradientInfo,
+    },
+  };
+};

-export type DigitalDashBoardComponentType = 'digital-dashboard';
+export type DigitalDashBoardComponentType = 'digital-dashboard-component';
 
 export interface DigitalDashBoardLayout {
   max: number;

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

@@ -62,7 +62,7 @@
         />
       </div>
     </div>
-    <div v-if="getShowUpdate" class="h-6 text-center text-xs text-gray-400">
+    <div v-if="getShowUpdate" class="text-center text-xs text-gray-400">
       <span> 更新时间: {{ props.value.updateTime }}</span>
     </div>
   </div>

@@ -35,7 +35,7 @@
     (record: DataBoardLayoutInfo & { isEdit: boolean }) => {
       componentRecord.value = record;
       frontId.value = record.record.frontId;
-      isEdit.value = record.isEdit;
+      isEdit.value = record.isEdit || false;
     }
   );
 

 <script lang="ts" setup>
   import { ref, unref } from 'vue';
-  import { WidgetComponentType, schemasMap } from '../config/visualOptions';
+  import {
+    WidgetComponentType,
+    schemasMap,
+    VisualOptionParams,
+    visualOptionField,
+    Gradient,
+  } from '../config/visualOptions';
   import { useForm, BasicForm } from '/@/components/Form';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { ComponentInfo } from '/@/api/dataBoard/model';
@@ -29,13 +35,44 @@
   const [register, { closeModal }] = useModalInner(
     (data: { recordId: string; componentInfo: ComponentInfo }) => {
       recordId.value = data.recordId;
-      method.setFieldsValue(data.componentInfo || {});
+      console.log(data.componentInfo);
+      const gradientInfo = data.componentInfo.gradientInfo;
+      let gradientRecord = {};
+      if (gradientInfo && gradientInfo.length) {
+        const first = gradientInfo.find((item) => item.key === Gradient.FIRST);
+        const second = gradientInfo.find((item) => item.key === Gradient.SECOND);
+        const third = gradientInfo.find((item) => item.key === Gradient.THIRD);
+        gradientRecord = {
+          [visualOptionField.FIRST_PHASE_COLOR]: first?.color,
+          [visualOptionField.FIRST_PHASE_VALUE]: first?.value,
+          [visualOptionField.SECOND_PHASE_COLOR]: second?.color,
+          [visualOptionField.SECOND_PHASE_VALUE]: second?.value,
+          [visualOptionField.THIRD_PHASE_COLOR]: third?.color,
+          [visualOptionField.THIRD_PHASE_VALUE]: third?.value,
+        };
+      }
+
+      method.setFieldsValue({ ...(data.componentInfo || {}), ...gradientRecord });
     }
   );
 
   const handleGetValue = () => {
     const value = method.getFieldsValue();
-    emit('close', unref(recordId), value);
+    emit('close', unref(recordId), transformValue(value));
+  };
+
+  const transformValue = (value: Partial<VisualOptionParams>) => {
+    return {
+      fontColor: value.fontColor || null,
+      icon: value.icon || null,
+      iconColor: value.iconColor || null,
+      unit: value.unit || null,
+      // gradientInfo: [
+      //   { key: Gradient.FIRST, value: value.firstPhaseValue, color: value.firstPhaseColor },
+      //   { key: Gradient.SECOND, value: value.secondPhaseValue, color: value.secondPhaseColor },
+      //   { key: Gradient.THIRD, value: value.thirdPhaseValue, color: value.thirdPhaseColor },
+      // ],
+    };
   };
 
   const handleClose = () => {
@@ -53,6 +90,12 @@
     title="选项"
     width="60%"
   >
-    <BasicForm @register="registerForm" :schemas="getSchemas" />
+    <BasicForm class="form" @register="registerForm" :schemas="getSchemas" />
   </BasicModal>
 </template>
+
+<style scoped>
+  .form:deep(.ant-input-number) {
+    width: 100%;
+  }
+</style>

@@ -9,21 +9,25 @@ import {
   transformTextComponentConfig,
 } from '../../components/TextComponent/config';
 import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
+import DashBoardComponent from '../../components/InstrumentComponent/DashBoardComponent.vue';
+import { WidgetComponentType } from './visualOptions';
+import {
+  instrumentComponent1,
+  instrumentComponent2,
+  transformDashboardComponentConfig,
+} from '../../components/InstrumentComponent/dashBoardComponent.config';
+import DigitalDashBoard from '../../components/InstrumentComponent/DigitalDashBoard.vue';
 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',
+  INSTRUMENT_COMPONENT_1 = 'instrument-component-1',
+  INSTRUMENT_COMPONENT_2 = 'instrument-component-2',
+  DIGITAL_DASHBOARD_COMPONENT = 'digital-dashboard-component',
 }
 
-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;
@@ -34,7 +38,7 @@ export interface ComponentConfig {
   ) => Recordable;
 }
 
-export const frontComponentMap = new Map<FrontComponentType, ComponentConfig>();
+export const frontComponentMap = new Map<WidgetComponentType, ComponentConfig>();
 
 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_1, {
   Component: TextComponent,
@@ -65,3 +69,21 @@ frontComponentMap.set(FrontComponent.TEXT_COMPONENT_5, {
   ComponentConfig: TextComponent5Config,
   transformConfig: transformTextComponentConfig,
 });
+
+frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, {
+  Component: DashBoardComponent,
+  ComponentConfig: instrumentComponent1(),
+  transformConfig: transformDashboardComponentConfig,
+});
+
+frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, {
+  Component: DashBoardComponent,
+  ComponentConfig: instrumentComponent2(),
+  transformConfig: transformDashboardComponentConfig,
+});
+
+frontComponentMap.set(FrontComponent.DIGITAL_DASHBOARD_COMPONENT, {
+  Component: DigitalDashBoard,
+  ComponentConfig: {},
+  transformConfig: transformDashboardComponentConfig,
+});

@@ -2,15 +2,31 @@ import { InstrumentComponentType } from '../../components/InstrumentComponent/da
 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 interface VisualOptionParams {
+  [visualOptionField.FONT_COLOR]: string;
+  [visualOptionField.UNIT]: string;
+  [visualOptionField.ICON_COLOR]: string;
+  [visualOptionField.ICON]: string;
+  [visualOptionField.FIRST_PHASE_COLOR]: string;
+  [visualOptionField.SECOND_PHASE_COLOR]: string;
+  [visualOptionField.THIRD_PHASE_COLOR]: string;
+  [visualOptionField.FIRST_PHASE_VALUE]: string;
+  [visualOptionField.SECOND_PHASE_VALUE]: string;
+  [visualOptionField.THIRD_PHASE_VALUE]: string;
+}
+
+export enum Gradient {
+  FIRST = 'first',
+  SECOND = 'second',
+  THIRD = 'third',
+}
+
 export enum visualOptionField {
   FONT_COLOR = 'fontColor',
   UNIT = 'unit',
@@ -19,11 +35,9 @@ export enum visualOptionField {
   FIRST_PHASE_COLOR = 'firstPhaseColor',
   SECOND_PHASE_COLOR = 'secondPhaseColor',
   THIRD_PHASE_COLOR = 'thirdPhaseColor',
-  FOURTH_PHASE_COLOR = 'fourthPhaseColor',
   FIRST_PHASE_VALUE = 'firstPhaseValue',
   SECOND_PHASE_VALUE = 'secondPhaseValue',
   THIRD_PHASE_VALUE = 'thirdPhaseValue',
-  FOURTH_PHASE_VALUE = 'fourthPhaseValue',
 }
 
 export const modeOne: FormSchema[] = [
@@ -94,9 +108,10 @@ export const modeThree: FormSchema[] = [
   {
     field: visualOptionField.FIRST_PHASE_VALUE,
     label: '一阶段阀值',
-    component: 'Input',
+    component: 'InputNumber',
     componentProps: {
       placeholder: '请输入一阶段阀值',
+      min: 0,
     },
   },
   {
@@ -108,9 +123,10 @@ export const modeThree: FormSchema[] = [
   {
     field: visualOptionField.SECOND_PHASE_VALUE,
     label: '二阶段阀值',
-    component: 'Input',
+    component: 'InputNumber',
     componentProps: {
       placeholder: '请输入二阶段阀值',
+      min: 0,
     },
   },
   {
@@ -122,9 +138,10 @@ export const modeThree: FormSchema[] = [
   {
     field: visualOptionField.THIRD_PHASE_VALUE,
     label: '三阶段阀值',
-    component: 'Input',
+    component: 'InputNumber',
     componentProps: {
       placeholder: '请输入三阶段阀值',
+      min: 0,
     },
   },
 ];
@@ -155,3 +172,4 @@ schemasMap.set('text-component-4', modeTwo);
 schemasMap.set('text-component-4', modeTwo);
 schemasMap.set('instrument-component-1', modeOne);
 schemasMap.set('instrument-component-2', modeThree);
+schemasMap.set('digital-dashboard-component', modeFour);

@@ -16,7 +16,7 @@
   } from '/@/api/dataBoard';
   import { useRoute } from 'vue-router';
   import { computed, unref } from '@vue/reactivity';
-  import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
+  import { DataComponentRecord, DataSource, Layout } from '/@/api/dataBoard/model';
   import { frontComponentMap, FrontComponentType } from './config/help';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { DataBoardLayoutInfo } from '../types/type';
@@ -79,10 +79,13 @@
       if (updateFn) updateFn();
     });
   }
+  const itemResize = (i: string, newH: number, newW: number, newHPx: number, newWPx: number) => {
+    updateSize(i, newH, newW, newHPx, newWPx);
+  };
 
   const itemResized = (i: string, newH: number, newW: number, newHPx: number, newWPx: number) => {
+    handleSaveLayoutInfo();
     updateSize(i, newH, newW, newHPx, newWPx);
-    console.log({ newH, newW, newHPx, newWPx });
   };
 
   const itemContainerResized = (
@@ -95,6 +98,11 @@
     updateSize(i, newH, newW, newHPx, newWPx);
   };
 
+  const itemMoved = (i: string) => {
+    handleSaveLayoutInfo();
+    updateCharts(i);
+  };
+
   const updateCharts = (i: string) => {
     nextTick(() => {
       const updateFn = widgetEl.get(i);
@@ -126,6 +134,25 @@
     openModal(true);
   };
 
+  const handleSaveLayoutInfo = async () => {
+    try {
+      const layoutInfo = unref(dataBoardList).map((item) => {
+        return {
+          id: item.i,
+          h: item.h,
+          w: item.w,
+          x: item.x,
+          y: item.y,
+        } as Layout;
+      });
+
+      await updateDataBoardLayout({
+        boardId: unref(getBoardId),
+        layout: layoutInfo,
+      });
+    } catch (error) {}
+  };
+
   const getDataBoardComponent = async () => {
     try {
       const data = await getDataComponent(unref(getBoardId));
@@ -150,7 +177,6 @@
           },
         };
       });
-      console.log(unref(dataBoardList));
     } catch (error) {}
   };
 
@@ -173,7 +199,6 @@
 
   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),
@@ -243,8 +268,8 @@
           :style="{ display: 'flex', flexWrap: 'wrap' }"
           class="grid-item-layout"
           @resized="itemResized"
-          @resize="itemResized"
-          @moved="updateCharts"
+          @resize="itemResize"
+          @moved="itemMoved"
           @container-resized="itemContainerResized"
         >
           <WidgetWrapper