refactof: visual board select component

@@ -22,6 +22,7 @@
   } from '../../detail/config/util';
   import { Tooltip } from 'ant-design-vue';
   import { useThrottleFn } from '@vueuse/shared';
+  import { buildUUID } from '/@/utils/uuid';
 
   const props = defineProps({
     add: {
@@ -33,7 +34,7 @@
     },
     value: {
       type: Object as PropType<DashBoardValue>,
-      default: () => ({}),
+      default: () => ({ id: buildUUID() }),
     },
     radio: {
       type: Object as PropType<RadioRecord>,

@@ -16,12 +16,18 @@
   } from '../../detail/config/util';
   import { isNaN } from 'lodash';
 
-  const props = defineProps<{
-    layout: DigitalDashBoardLayout;
-    value: DigitalDashBoardValue;
-    radio?: RadioRecord;
-    random?: boolean;
-  }>();
+  const props = withDefaults(
+    defineProps<{
+      layout?: DigitalDashBoardLayout;
+      value?: DigitalDashBoardValue;
+      radio?: RadioRecord;
+      random?: boolean;
+    }>(),
+    {
+      value: () => ({}),
+      layout: () => ({ max: 5, keepNumber: 2 }),
+    }
+  );
 
   const changeValue = ref(0);
 
@@ -188,11 +194,12 @@
 <style scoped lang="less">
   .digital-wrapper__int {
     border-radius: 1px;
-    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
-    background: url('/@/assets/images/digital-wrapper-bg-int.png') 0px -1px no-repeat;
+    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.7);
+    background: url('/@/assets/images/digital-wrapper-bg-int.png') 0 -1px no-repeat;
     padding: 5px;
     background-size: 100% 100%;
   }
+
   .digital-text_int {
     display: inline-block;
     overflow-wrap: break-word;
@@ -203,11 +210,12 @@
 
   .digital-wrapper__float {
     border-radius: 1px;
-    box-shadow: inset 0px 1px 3px 0px rgba(112, 22, 15, 1);
-    background: url('/@/assets/images/digital-wrapper-bg-float.png') 0px -1px no-repeat;
+    box-shadow: inset 0 1px 3px 0 rgba(112, 22, 15, 1);
+    background: url('/@/assets/images/digital-wrapper-bg-float.png') 0 -1px no-repeat;
     padding: 5px;
     background-size: 100% 100%;
   }
+
   .digital-text_float {
     display: inline-block;
     overflow-wrap: break-word;

@@ -94,7 +94,6 @@ export const instrumentComponent1 = (params?: Partial<ComponentInfo>): EChartsOp
         axisLabel: {
           distance: 0,
           color: '#999',
-          // fontSize: 20,
         },
         anchor: {
           show: false,

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

 import PictureComponent from './PictureComponent.vue';
 
-import { PictureComponentType } from './pictureComponent.config';
-import { Component } from 'vue';
-
-interface PictureComponentList {
-  id: PictureComponentType;
-  component: Component;
-}
-
-const pictureComponentList: PictureComponentList[] = [
-  {
-    id: 'picture-component-1',
-    component: PictureComponent,
-  },
-];
-
-export { PictureComponent, pictureComponentList };
+export { PictureComponent };

@@ -20,7 +20,6 @@ export interface TextComponentValue {
 
 export type TextComponentType =
   | 'text-component-1'
-  | 'text-component-2'
   | 'text-component-3'
   | 'text-component-4'
   | 'text-component-5';
@@ -32,10 +31,6 @@ export const TextComponent1Config: TextComponentDefault = {
   base: true,
 };
 
-export const TextComponent2Config: TextComponentDefault = {
-  id: 'text-component-2',
-  base: false,
-};
 export const TextComponent3Config: TextComponentDefault = {
   id: 'text-component-3',
   base: false,
@@ -62,17 +57,9 @@ export const TextComponentDefaultConfig: Partial<ComponentInfo> = {
   icon: 'shuiwen',
 };
 
-export const textComponentConfig: TextComponentDefault[] = [
-  TextComponent1Config,
-  // TextComponent2Config,
-  TextComponent3Config,
-  TextComponent4Config,
-  TextComponent5Config,
-];
-
 export const transformTextComponentConfig = (
   config: TextComponentDefault,
-  record: DataComponentRecord,
+  _record: DataComponentRecord,
   dataSourceRecord: DataSource
 ) => {
   return {

-import { Component } from 'vue';
-import IndicatorLight from '../cpns/IndicatorLight.vue';
-
-export const dashboardComponentMap = new Map<string, Component>();
-
-dashboardComponentMap.set('IndicatorLight', IndicatorLight);

 <script lang="ts" setup>
   import { Tabs, List } from 'ant-design-vue';
   import VisualWidgetSelect from './VisualWidgetSelect.vue';
-  import TextComponent from '../../components/TextComponent/TextComponent.vue';
-  import { textComponentConfig } from '../../components/TextComponent/config';
-  import { instrumentComponentConfig } from '../../components/InstrumentComponent';
-  import { pictureComponentList } from '../../components/PictureComponent';
-  import { getComponentDefaultConfig } from '../config/help';
+  import {
+    FrontComponentCategory,
+    FrontComponentCategoryName,
+    getComponentDefaultConfig,
+  } from '../config/help';
   import { WidgetComponentType } from '../config/visualOptions';
+  import { frontComponentMap } from '../config/help';
+  import { computed } from 'vue';
+
+  interface DataSource {
+    category: string;
+    categoryName: string;
+    list: Recordable[];
+  }
   const props = defineProps<{
     value: string;
   }>();
@@ -14,6 +22,24 @@
 
   const grid = { gutter: 10, column: 1, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 };
 
+  const getDataSource = computed(() => {
+    const _dataSource = Array.from(frontComponentMap.values());
+    const category = new Map<FrontComponentCategory, DataSource>();
+    for (const item of _dataSource) {
+      if (category.has(item.ComponentCategory)) {
+        const value = category.get(item.ComponentCategory)!;
+        value.list.push(item);
+        continue;
+      }
+      category.set(item.ComponentCategory, {
+        category: item.ComponentCategory,
+        categoryName: FrontComponentCategoryName[item.ComponentCategory],
+        list: [item],
+      });
+    }
+    return Array.from(category.values());
+  });
+
   const handleCheck = (checked: WidgetComponentType) => {
     const defaultConfig = getComponentDefaultConfig(checked);
     emit('update:value', checked);
@@ -24,51 +50,20 @@
 <template>
   <section>
     <Tabs>
-      <Tabs.TabPane key="1" tab="文本组件">
-        <List :grid="grid" :data-source="textComponentConfig">
-          <template #renderItem="{ item }">
-            <List.Item class="!flex !justify-center">
-              <VisualWidgetSelect
-                :checked-id="props.value"
-                :control-id="item.id"
-                @change="handleCheck"
-              >
-                <TextComponent :layout="item" :value="item.value" />
-              </VisualWidgetSelect>
-            </List.Item>
-          </template>
-        </List>
-      </Tabs.TabPane>
-      <Tabs.TabPane key="2" tab="图片组件">
-        <List :grid="grid" :data-source="pictureComponentList">
-          <template #renderItem="{ item }">
-            <List.Item class="!flex !justify-center">
-              <VisualWidgetSelect
-                :checked-id="props.value"
-                :control-id="item.id"
-                @change="handleCheck"
-              >
-                <component :is="item.component" />
-              </VisualWidgetSelect>
-            </List.Item>
-          </template>
-        </List>
-      </Tabs.TabPane>
-      <Tabs.TabPane key="3" tab="仪表组件">
-        <List :grid="grid" :data-source="instrumentComponentConfig">
+      <Tabs.TabPane
+        v-for="category in getDataSource"
+        :key="category.category"
+        :tab="category.categoryName"
+      >
+        <List :grid="grid" :data-source="category.list">
           <template #renderItem="{ item }">
             <List.Item class="!flex !justify-center">
               <VisualWidgetSelect
                 :checked-id="props.value"
-                :control-id="item.id"
+                :control-id="item.ComponentKey"
                 @change="handleCheck"
               >
-                <component
-                  :is="item.component"
-                  :random="true"
-                  :layout="item.layout"
-                  :value="item.value"
-                />
+                <component :is="item.Component" :random="true" :layout="item.ComponentConfig" />
               </VisualWidgetSelect>
             </List.Item>
           </template>

@@ -2,7 +2,6 @@ import { Component } from 'vue';
 import TextComponent from '../../components/TextComponent/TextComponent.vue';
 import {
   TextComponent1Config,
-  TextComponent2Config,
   TextComponent3Config,
   TextComponent4Config,
   TextComponent5Config,
@@ -24,6 +23,23 @@ import {
 } from '../../components/InstrumentComponent/dashBoardComponent.config';
 import DigitalDashBoard from '../../components/InstrumentComponent/DigitalDashBoard.vue';
 import { DigitalComponentDefaultConfig } from '../../components/InstrumentComponent/digitalDashBoard.config';
+
+export enum FrontComponentCategory {
+  TEXT = 'text',
+  PICTURE = 'picture',
+  INSTRUMENT = 'instrument',
+  CONTROL = 'control',
+  MAP = 'map',
+}
+
+export enum FrontComponentCategoryName {
+  text = '文本组件',
+  picture = '图片组件',
+  instrument = '仪表组件',
+  control = '控制组件',
+  map = '地图组件',
+}
+
 export enum FrontComponent {
   TEXT_COMPONENT_1 = 'text-component-1',
   TEXT_COMPONENT_2 = 'text-component-2',
@@ -38,7 +54,9 @@ export enum FrontComponent {
 
 export interface ComponentConfig {
   Component: Component;
-  ComponentConfig: Recordable;
+  ComponentKey: FrontComponent;
+  ComponentConfig?: Recordable;
+  ComponentCategory: FrontComponentCategory;
   transformConfig: (
     ComponentConfig: Recordable,
     record: DataComponentRecord,
@@ -55,66 +73,73 @@ export const frontComponentMap = new Map<WidgetComponentType, ComponentConfig>()
 
 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_1, {
   Component: TextComponent,
+  ComponentKey: FrontComponent.TEXT_COMPONENT_1,
   ComponentConfig: TextComponent1Config,
-  transformConfig: transformTextComponentConfig,
-});
-
-frontComponentMap.set(FrontComponent.TEXT_COMPONENT_2, {
-  Component: TextComponent,
-  ComponentConfig: TextComponent2Config,
+  ComponentCategory: FrontComponentCategory.TEXT,
   transformConfig: transformTextComponentConfig,
 });
 
 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_3, {
   Component: TextComponent,
+  ComponentKey: FrontComponent.TEXT_COMPONENT_3,
   ComponentConfig: TextComponent3Config,
+  ComponentCategory: FrontComponentCategory.TEXT,
   transformConfig: transformTextComponentConfig,
 });
 
 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_4, {
   Component: TextComponent,
+  ComponentKey: FrontComponent.TEXT_COMPONENT_4,
   ComponentConfig: TextComponent4Config,
+  ComponentCategory: FrontComponentCategory.TEXT,
   transformConfig: transformTextComponentConfig,
 });
 
 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_5, {
   Component: TextComponent,
+  ComponentKey: FrontComponent.TEXT_COMPONENT_5,
   ComponentConfig: TextComponent5Config,
+  ComponentCategory: FrontComponentCategory.TEXT,
   transformConfig: transformTextComponentConfig,
 });
 
 frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, {
   Component: DashBoardComponent,
+  ComponentKey: FrontComponent.INSTRUMENT_COMPONENT_1,
   ComponentConfig: {
-    chartOption: instrumentComponent1(),
+    chartOption: instrumentComponent1(Instrument1DefaultConfig),
     componentType: FrontComponent.INSTRUMENT_COMPONENT_1,
   } as DashboardComponentLayout,
+  ComponentCategory: FrontComponentCategory.INSTRUMENT,
   transformConfig: transformDashboardComponentConfig,
 });
 
 frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, {
   Component: DashBoardComponent,
+  ComponentKey: FrontComponent.INSTRUMENT_COMPONENT_2,
   ComponentConfig: {
-    chartOption: instrumentComponent2(),
+    chartOption: instrumentComponent2(Instrument2DefaultConfig),
     componentType: FrontComponent.INSTRUMENT_COMPONENT_2,
   } as DashboardComponentLayout,
+  ComponentCategory: FrontComponentCategory.INSTRUMENT,
   transformConfig: transformDashboardComponentConfig,
 });
 
 frontComponentMap.set(FrontComponent.DIGITAL_DASHBOARD_COMPONENT, {
   Component: DigitalDashBoard,
-  ComponentConfig: {},
+  ComponentKey: FrontComponent.DIGITAL_DASHBOARD_COMPONENT,
+  ComponentCategory: FrontComponentCategory.INSTRUMENT,
   transformConfig: transformDashboardComponentConfig,
 });
 
 frontComponentMap.set(FrontComponent.PICTURE_COMPONENT_1, {
   Component: PictureComponent,
-  ComponentConfig: {},
+  ComponentKey: FrontComponent.PICTURE_COMPONENT_1,
+  ComponentCategory: FrontComponentCategory.PICTURE,
   transformConfig: transformPictureConfig,
 });
 
 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_1, TextComponentDefaultConfig);
-frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_2, TextComponentDefaultConfig);
 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_3, TextComponentDefaultConfig);
 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_4, TextComponentDefaultConfig);
 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_5, TextComponentDefaultConfig);

@@ -309,7 +309,7 @@
   ) => {
     const frontComponent = record.frontId;
     const component = frontComponentMap.get(frontComponent as WidgetComponentType);
-    return component?.transformConfig(component.ComponentConfig, record, dataSourceRecord);
+    return component?.transformConfig(component.ComponentConfig || {}, record, dataSourceRecord);
   };
 
   const handleUpdate = async (id: string) => {