简柏林 / thingskit-front · Commits

Commit 20cb11fd0399d44ca60d9587344be916935db325

Authored by ww
1 parent 27a900c7

perf: visual board select component new display component name

Inline Side-by-side
Showing 4 changed files with 24 additions and 3 deletions
@@ -37,6 +37,7 @@ export const frontComponentMap = new Map<FrontComponent, ComponentConfig>(); @@ -37,6 +37,7 @@ export const frontComponentMap = new Map<FrontComponent, ComponentConfig>();
37 37
38 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_1, { 38 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_1, {
39 Component: TextComponent, 39 Component: TextComponent,
  40 + ComponentName: '文本组件1',
40 ComponentKey: FrontComponent.TEXT_COMPONENT_1, 41 ComponentKey: FrontComponent.TEXT_COMPONENT_1,
41 ComponentConfig: TextComponent1Config, 42 ComponentConfig: TextComponent1Config,
42 ComponentCategory: FrontComponentCategory.TEXT, 43 ComponentCategory: FrontComponentCategory.TEXT,
@@ -45,6 +46,7 @@ frontComponentMap.set(FrontComponent.TEXT_COMPONENT_1, { @@ -45,6 +46,7 @@ frontComponentMap.set(FrontComponent.TEXT_COMPONENT_1, {
45 46
46 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_3, { 47 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_3, {
47 Component: TextComponent, 48 Component: TextComponent,
  49 + ComponentName: '文本组件2',
48 ComponentKey: FrontComponent.TEXT_COMPONENT_3, 50 ComponentKey: FrontComponent.TEXT_COMPONENT_3,
49 ComponentConfig: TextComponent3Config, 51 ComponentConfig: TextComponent3Config,
50 ComponentCategory: FrontComponentCategory.TEXT, 52 ComponentCategory: FrontComponentCategory.TEXT,
@@ -53,6 +55,7 @@ frontComponentMap.set(FrontComponent.TEXT_COMPONENT_3, { @@ -53,6 +55,7 @@ frontComponentMap.set(FrontComponent.TEXT_COMPONENT_3, {
53 55
54 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_4, { 56 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_4, {
55 Component: TextComponent, 57 Component: TextComponent,
  58 + ComponentName: '文本组件3',
56 ComponentKey: FrontComponent.TEXT_COMPONENT_4, 59 ComponentKey: FrontComponent.TEXT_COMPONENT_4,
57 ComponentConfig: TextComponent4Config, 60 ComponentConfig: TextComponent4Config,
58 ComponentCategory: FrontComponentCategory.TEXT, 61 ComponentCategory: FrontComponentCategory.TEXT,
@@ -61,6 +64,7 @@ frontComponentMap.set(FrontComponent.TEXT_COMPONENT_4, { @@ -61,6 +64,7 @@ frontComponentMap.set(FrontComponent.TEXT_COMPONENT_4, {
61 64
62 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_5, { 65 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_5, {
63 Component: TextComponent, 66 Component: TextComponent,
  67 + ComponentName: '文本组件4',
64 ComponentKey: FrontComponent.TEXT_COMPONENT_5, 68 ComponentKey: FrontComponent.TEXT_COMPONENT_5,
65 ComponentConfig: TextComponent5Config, 69 ComponentConfig: TextComponent5Config,
66 ComponentCategory: FrontComponentCategory.TEXT, 70 ComponentCategory: FrontComponentCategory.TEXT,
@@ -69,6 +73,7 @@ frontComponentMap.set(FrontComponent.TEXT_COMPONENT_5, { @@ -69,6 +73,7 @@ frontComponentMap.set(FrontComponent.TEXT_COMPONENT_5, {
69 73
70 frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, { 74 frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, {
71 Component: DashBoardComponent, 75 Component: DashBoardComponent,
  76 + ComponentName: '仪表盘',
72 ComponentKey: FrontComponent.INSTRUMENT_COMPONENT_1, 77 ComponentKey: FrontComponent.INSTRUMENT_COMPONENT_1,
73 ComponentConfig: { 78 ComponentConfig: {
74 chartOption: instrumentComponent1(Instrument1DefaultConfig), 79 chartOption: instrumentComponent1(Instrument1DefaultConfig),
@@ -80,6 +85,7 @@ frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, { @@ -80,6 +85,7 @@ frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, {
80 85
81 frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, { 86 frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, {
82 Component: DashBoardComponent, 87 Component: DashBoardComponent,
  88 + ComponentName: '阶段仪表盘',
83 ComponentKey: FrontComponent.INSTRUMENT_COMPONENT_2, 89 ComponentKey: FrontComponent.INSTRUMENT_COMPONENT_2,
84 ComponentConfig: { 90 ComponentConfig: {
85 chartOption: instrumentComponent2(Instrument2DefaultConfig), 91 chartOption: instrumentComponent2(Instrument2DefaultConfig),
@@ -91,6 +97,7 @@ frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, { @@ -91,6 +97,7 @@ frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, {
91 97
92 frontComponentMap.set(FrontComponent.DIGITAL_DASHBOARD_COMPONENT, { 98 frontComponentMap.set(FrontComponent.DIGITAL_DASHBOARD_COMPONENT, {
93 Component: DigitalDashBoard, 99 Component: DigitalDashBoard,
  100 + ComponentName: '数字仪表盘',
94 ComponentKey: FrontComponent.DIGITAL_DASHBOARD_COMPONENT, 101 ComponentKey: FrontComponent.DIGITAL_DASHBOARD_COMPONENT,
95 ComponentCategory: FrontComponentCategory.INSTRUMENT, 102 ComponentCategory: FrontComponentCategory.INSTRUMENT,
96 transformConfig: transformDashboardComponentConfig, 103 transformConfig: transformDashboardComponentConfig,
@@ -98,6 +105,7 @@ frontComponentMap.set(FrontComponent.DIGITAL_DASHBOARD_COMPONENT, { @@ -98,6 +105,7 @@ frontComponentMap.set(FrontComponent.DIGITAL_DASHBOARD_COMPONENT, {
98 105
99 frontComponentMap.set(FrontComponent.PICTURE_COMPONENT_1, { 106 frontComponentMap.set(FrontComponent.PICTURE_COMPONENT_1, {
100 Component: PictureComponent, 107 Component: PictureComponent,
  108 + ComponentName: '图片组件',
101 ComponentKey: FrontComponent.PICTURE_COMPONENT_1, 109 ComponentKey: FrontComponent.PICTURE_COMPONENT_1,
102 ComponentCategory: FrontComponentCategory.PICTURE, 110 ComponentCategory: FrontComponentCategory.PICTURE,
103 transformConfig: transformPictureConfig, 111 transformConfig: transformPictureConfig,
@@ -105,6 +113,7 @@ frontComponentMap.set(FrontComponent.PICTURE_COMPONENT_1, { @@ -105,6 +113,7 @@ frontComponentMap.set(FrontComponent.PICTURE_COMPONENT_1, {
105 113
106 frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_SWITCH_WITH_ICON, { 114 frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_SWITCH_WITH_ICON, {
107 Component: SwitchWithIcon, 115 Component: SwitchWithIcon,
  116 + ComponentName: '控制按钮1',
108 ComponentKey: FrontComponent.CONTROL_COMPONENT_SWITCH_WITH_ICON, 117 ComponentKey: FrontComponent.CONTROL_COMPONENT_SWITCH_WITH_ICON,
109 ComponentCategory: FrontComponentCategory.CONTROL, 118 ComponentCategory: FrontComponentCategory.CONTROL,
110 transformConfig: transformControlConfig, 119 transformConfig: transformControlConfig,
@@ -112,6 +121,7 @@ frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_SWITCH_WITH_ICON, { @@ -112,6 +121,7 @@ frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_SWITCH_WITH_ICON, {
112 121
113 frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_SLIDING_SWITCH, { 122 frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_SLIDING_SWITCH, {
114 Component: SlidingSwitch, 123 Component: SlidingSwitch,
  124 + ComponentName: '控制按钮2',
115 ComponentKey: FrontComponent.CONTROL_COMPONENT_SLIDING_SWITCH, 125 ComponentKey: FrontComponent.CONTROL_COMPONENT_SLIDING_SWITCH,
116 ComponentCategory: FrontComponentCategory.CONTROL, 126 ComponentCategory: FrontComponentCategory.CONTROL,
117 transformConfig: transformControlConfig, 127 transformConfig: transformControlConfig,
@@ -119,6 +129,7 @@ frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_SLIDING_SWITCH, { @@ -119,6 +129,7 @@ frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_SLIDING_SWITCH, {
119 129
120 frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH, { 130 frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH, {
121 Component: ToggleSwitch, 131 Component: ToggleSwitch,
  132 + ComponentName: '控制按钮3',
122 ComponentKey: FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH, 133 ComponentKey: FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH,
123 ComponentCategory: FrontComponentCategory.CONTROL, 134 ComponentCategory: FrontComponentCategory.CONTROL,
124 transformConfig: transformControlConfig, 135 transformConfig: transformControlConfig,
@@ -126,6 +137,7 @@ frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH, { @@ -126,6 +137,7 @@ frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH, {
126 137
127 frontComponentMap.set(FrontComponent.MAP_COMPONENT_TRACK, { 138 frontComponentMap.set(FrontComponent.MAP_COMPONENT_TRACK, {
128 Component: MapComponent, 139 Component: MapComponent,
  140 + ComponentName: '实时轨迹',
129 ComponentKey: FrontComponent.MAP_COMPONENT_TRACK, 141 ComponentKey: FrontComponent.MAP_COMPONENT_TRACK,
130 ComponentCategory: FrontComponentCategory.MAP, 142 ComponentCategory: FrontComponentCategory.MAP,
131 transformConfig: transfromMapComponentConfig, 143 transformConfig: transfromMapComponentConfig,
@@ -63,7 +63,12 @@ @@ -63,7 +63,12 @@
63 :control-id="item.ComponentKey" 63 :control-id="item.ComponentKey"
64 @change="handleCheck" 64 @change="handleCheck"
65 > 65 >
66 - <component :is="item.Component" :random="true" :layout="item.ComponentConfig" /> 66 + <template #default>
  67 + <component :is="item.Component" :random="true" :layout="item.ComponentConfig" />
  68 + </template>
  69 + <template #description>
  70 + {{ item.ComponentName || '选择' }}
  71 + </template>
67 </VisualWidgetSelect> 72 </VisualWidgetSelect>
68 </List.Item> 73 </List.Item>
69 </template> 74 </template>
@@ -30,16 +30,19 @@ @@ -30,16 +30,19 @@
30 <slot></slot> 30 <slot></slot>
31 </div> 31 </div>
32 <Card.Meta> 32 <Card.Meta>
33 - <template #description> 选择 </template> 33 + <template #description>
  34 + <slot name="description"></slot>
  35 + </template>
34 </Card.Meta> 36 </Card.Meta>
35 </Card> 37 </Card>
36 </template> 38 </template>
37 39
38 <style scoped> 40 <style scoped>
39 .widget-select { 41 .widget-select {
40 - box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1); 42 + box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
41 border-width: 2px; 43 border-width: 2px;
42 } 44 }
  45 +
43 .widget-select:deep(.ant-card-body) { 46 .widget-select:deep(.ant-card-body) {
44 /* height: 240px; */ 47 /* height: 240px; */
45 width: 240px; 48 width: 240px;
@@ -14,6 +14,7 @@ export type DataBoardLayoutInfo = Layout & { @@ -14,6 +14,7 @@ export type DataBoardLayoutInfo = Layout & {
14 14
15 export interface ComponentConfig { 15 export interface ComponentConfig {
16 Component: Component; 16 Component: Component;
  17 + ComponentName?: string;
17 ComponentKey: FrontComponent; 18 ComponentKey: FrontComponent;
18 ComponentConfig?: Recordable; 19 ComponentConfig?: Recordable;
19 ComponentCategory: FrontComponentCategory; 20 ComponentCategory: FrontComponentCategory;