简柏林 / thingskit-front · Commits

Commit 27a900c7e4573a906e64f89835f1ccec87a64d39

Authored by ww
1 parent 444958fc

perf: visual board out of const && types

Inline Side-by-side
Showing 11 changed files with 84 additions and 79 deletions
@@ -4,11 +4,18 @@ @@ -4,11 +4,18 @@
4 }; 4 };
5 </script> 5 </script>
6 <script lang="ts" setup> 6 <script lang="ts" setup>
7 - import { ControlComponentValue } from './control.config'; 7 + import { RadioRecord } from '../../detail/config/util';
8 8
9 - const props = defineProps<{  
10 - value?: ControlComponentValue;  
11 - }>(); 9 + interface VisualComponentProps<Layout = Recordable, Value = Recordable> {
  10 + value?: Value;
  11 + layout?: Layout;
  12 + radio?: RadioRecord;
  13 + random?: boolean;
  14 + add?: (key: string, method: Fn) => void;
  15 + update?: () => void;
  16 + remove?: (key: string) => void;
  17 + }
  18 + const props = defineProps<VisualComponentProps>();
12 19
13 const emit = defineEmits(['update:value', 'change']); 20 const emit = defineEmits(['update:value', 'change']);
14 21
1 import { EChartsOption } from 'echarts'; 1 import { EChartsOption } from 'echarts';
2 -import { FrontComponent } from '../help'; 2 +import { FrontComponent } from '../../const/const';
3 import { fontSize, RadioRecord } from '../../detail/config/util'; 3 import { fontSize, RadioRecord } from '../../detail/config/util';
4 import { Gradient, visualOptionField } from '../../detail/config/visualOptions'; 4 import { Gradient, visualOptionField } from '../../detail/config/visualOptions';
5 import { 5 import {
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import { useSlots } from 'vue';  
3 import { useUpdateCenter } from '../../hook/useUpdateCenter'; 2 import { useUpdateCenter } from '../../hook/useUpdateCenter';
4 import { FrontDataSourceRecord } from '../../types/type'; 3 import { FrontDataSourceRecord } from '../../types/type';
5 4
@@ -7,10 +6,8 @@ @@ -7,10 +6,8 @@
7 dataSource: FrontDataSourceRecord[]; 6 dataSource: FrontDataSourceRecord[];
8 }>(); 7 }>();
9 8
10 - const slot = useSlots();  
11 -  
12 const { update, add, remove } = useUpdateCenter(); 9 const { update, add, remove } = useUpdateCenter();
13 - console.log({ dataSource: props.dataSource }); 10 +
14 defineExpose({ update }); 11 defineExpose({ update });
15 </script> 12 </script>
16 13
@@ -21,15 +18,12 @@ @@ -21,15 +18,12 @@
21 <div class="widget-content"> 18 <div class="widget-content">
22 <div 19 <div
23 v-for="item in props.dataSource" 20 v-for="item in props.dataSource"
24 - :key="item.uuid" 21 + :key="item.id"
25 :style="{ width: `${item.width || 100}%`, height: `${item.height || 100}%` }" 22 :style="{ width: `${item.width || 100}%`, height: `${item.height || 100}%` }"
26 class="widget-item" 23 class="widget-item"
27 > 24 >
28 <div class="widget-box"> 25 <div class="widget-box">
29 - <div  
30 - class="widget-controls-container"  
31 - :style="{ height: slot.footer ? 'calc(100% - 20px)' : '100%' }"  
32 - > 26 + <div class="widget-controls-container">
33 <slot 27 <slot
34 name="controls" 28 name="controls"
35 :record="item" 29 :record="item"
@@ -38,12 +32,6 @@ @@ -38,12 +32,6 @@
38 :update="update" 32 :update="update"
39 ></slot> 33 ></slot>
40 </div> 34 </div>
41 - <div class="widget-value">  
42 - <slot name="value" :record="item"></slot>  
43 - </div>  
44 - <div class="widget-label">  
45 - <slot name="label" :record="item"></slot>  
46 - </div>  
47 </div> 35 </div>
48 </div> 36 </div>
49 </div> 37 </div>
@@ -92,7 +80,7 @@ @@ -92,7 +80,7 @@
92 .widget-controls-container { 80 .widget-controls-container {
93 flex: 1 1 auto; 81 flex: 1 1 auto;
94 width: 100%; 82 width: 100%;
95 - height: calc(100% - 20px); 83 + height: 100%;
96 display: flex; 84 display: flex;
97 align-items: center; 85 align-items: center;
98 justify-content: center; 86 justify-content: center;
1 -import { Component } from 'vue';  
2 import { 1 import {
3 TextComponent1Config, 2 TextComponent1Config,
4 TextComponent3Config, 3 TextComponent3Config,
@@ -7,7 +6,7 @@ import { @@ -7,7 +6,7 @@ import {
7 TextComponentDefaultConfig, 6 TextComponentDefaultConfig,
8 transformTextComponentConfig, 7 transformTextComponentConfig,
9 } from './TextComponent/config'; 8 } from './TextComponent/config';
10 -import { ComponentInfo, DataComponentRecord, DataSource } from '/@/api/dataBoard/model'; 9 +import { ComponentInfo } from '/@/api/dataBoard/model';
11 import { transformPictureConfig } from './PictureComponent/pictureComponent.config'; 10 import { transformPictureConfig } from './PictureComponent/pictureComponent.config';
12 import { 11 import {
13 DashboardComponentLayout, 12 DashboardComponentLayout,
@@ -29,50 +28,8 @@ import SlidingSwitch from './ControlComponent/SlidingSwitch.vue'; @@ -29,50 +28,8 @@ import SlidingSwitch from './ControlComponent/SlidingSwitch.vue';
29 import SwitchWithIcon from './ControlComponent/SwitchWithIcon.vue'; 28 import SwitchWithIcon from './ControlComponent/SwitchWithIcon.vue';
30 import MapComponent from './MapComponent/MapComponent.vue'; 29 import MapComponent from './MapComponent/MapComponent.vue';
31 import { transfromMapComponentConfig } from './MapComponent/map.config'; 30 import { transfromMapComponentConfig } from './MapComponent/map.config';
32 -  
33 -export enum FrontComponentCategory {  
34 - TEXT = 'text',  
35 - PICTURE = 'picture',  
36 - INSTRUMENT = 'instrument',  
37 - CONTROL = 'control',  
38 - MAP = 'map',  
39 -}  
40 -  
41 -export const FrontComponentCategoryName = {  
42 - [FrontComponentCategory.TEXT]: '文本组件',  
43 - [FrontComponentCategory.INSTRUMENT]: '仪表组件',  
44 - [FrontComponentCategory.CONTROL]: '控制组件',  
45 - [FrontComponentCategory.PICTURE]: '图片组件',  
46 - [FrontComponentCategory.MAP]: '地图组件',  
47 -};  
48 -  
49 -export enum FrontComponent {  
50 - TEXT_COMPONENT_1 = 'text-component-1',  
51 - TEXT_COMPONENT_2 = 'text-component-2',  
52 - TEXT_COMPONENT_3 = 'text-component-3',  
53 - TEXT_COMPONENT_4 = 'text-component-4',  
54 - TEXT_COMPONENT_5 = 'text-component-5',  
55 - INSTRUMENT_COMPONENT_1 = 'instrument-component-1',  
56 - INSTRUMENT_COMPONENT_2 = 'instrument-component-2',  
57 - DIGITAL_DASHBOARD_COMPONENT = 'digital-dashboard-component',  
58 - PICTURE_COMPONENT_1 = 'picture-component-1',  
59 - CONTROL_COMPONENT_TOGGLE_SWITCH = 'control-component-toggle-switch',  
60 - CONTROL_COMPONENT_SWITCH_WITH_ICON = 'control-component-switch-with-icon',  
61 - CONTROL_COMPONENT_SLIDING_SWITCH = 'control-component-sliding-switch',  
62 - MAP_COMPONENT_TRACK = 'map-component-track',  
63 -}  
64 -  
65 -export interface ComponentConfig {  
66 - Component: Component;  
67 - ComponentKey: FrontComponent;  
68 - ComponentConfig?: Recordable;  
69 - ComponentCategory: FrontComponentCategory;  
70 - transformConfig: (  
71 - componentConfig: Recordable,  
72 - record: DataComponentRecord,  
73 - dataSourceRecord: DataSource  
74 - ) => Recordable;  
75 -} 31 +import { ComponentConfig } from '../types/type';
  32 +import { FrontComponent, FrontComponentCategory } from '../const/const';
76 33
77 export const frontComponentDefaultConfigMap = new Map<FrontComponent, Partial<ComponentInfo>>(); 34 export const frontComponentDefaultConfigMap = new Map<FrontComponent, Partial<ComponentInfo>>();
78 35
  1 +export enum FrontComponentCategory {
  2 + TEXT = 'text',
  3 + PICTURE = 'picture',
  4 + INSTRUMENT = 'instrument',
  5 + CONTROL = 'control',
  6 + MAP = 'map',
  7 +}
  8 +
  9 +export const FrontComponentCategoryName = {
  10 + [FrontComponentCategory.TEXT]: '文本组件',
  11 + [FrontComponentCategory.INSTRUMENT]: '仪表组件',
  12 + [FrontComponentCategory.CONTROL]: '控制组件',
  13 + [FrontComponentCategory.PICTURE]: '图片组件',
  14 + [FrontComponentCategory.MAP]: '地图组件',
  15 +};
  16 +
  17 +export enum FrontComponent {
  18 + TEXT_COMPONENT_1 = 'text-component-1',
  19 + TEXT_COMPONENT_2 = 'text-component-2',
  20 + TEXT_COMPONENT_3 = 'text-component-3',
  21 + TEXT_COMPONENT_4 = 'text-component-4',
  22 + TEXT_COMPONENT_5 = 'text-component-5',
  23 + INSTRUMENT_COMPONENT_1 = 'instrument-component-1',
  24 + INSTRUMENT_COMPONENT_2 = 'instrument-component-2',
  25 + DIGITAL_DASHBOARD_COMPONENT = 'digital-dashboard-component',
  26 + PICTURE_COMPONENT_1 = 'picture-component-1',
  27 + CONTROL_COMPONENT_TOGGLE_SWITCH = 'control-component-toggle-switch',
  28 + CONTROL_COMPONENT_SWITCH_WITH_ICON = 'control-component-switch-with-icon',
  29 + CONTROL_COMPONENT_SLIDING_SWITCH = 'control-component-sliding-switch',
  30 + MAP_COMPONENT_TRACK = 'map-component-track',
  31 +}
@@ -11,8 +11,8 @@ @@ -11,8 +11,8 @@
11 import type { ComponentInfo, DataSource } from '/@/api/dataBoard/model'; 11 import type { ComponentInfo, DataSource } from '/@/api/dataBoard/model';
12 import { useMessage } from '/@/hooks/web/useMessage'; 12 import { useMessage } from '/@/hooks/web/useMessage';
13 import { DataBoardLayoutInfo } from '../../types/type'; 13 import { DataBoardLayoutInfo } from '../../types/type';
14 - import { FrontComponent } from '../../components/help';  
15 import { getDataSourceComponent } from './DataSourceForm/help'; 14 import { getDataSourceComponent } from './DataSourceForm/help';
  15 + import { FrontComponent } from '../../const/const';
16 16
17 type DataSourceFormEL = { [key: string]: Nullable<FormActionType> }; 17 type DataSourceFormEL = { [key: string]: Nullable<FormActionType> };
18 18
@@ -12,7 +12,7 @@ @@ -12,7 +12,7 @@
12 import { decode } from '../../config/config'; 12 import { decode } from '../../config/config';
13 import { ComponentInfo } from '/@/api/dataBoard/model'; 13 import { ComponentInfo } from '/@/api/dataBoard/model';
14 import { useCalcGridLayout } from '../../hook/useCalcGridLayout'; 14 import { useCalcGridLayout } from '../../hook/useCalcGridLayout';
15 - import { FrontComponent } from '../../components/help'; 15 + import { FrontComponent } from '../../const/const';
16 16
17 interface DataComponentRouteParams extends RouteParams { 17 interface DataComponentRouteParams extends RouteParams {
18 id: string; 18 id: string;
@@ -23,8 +23,6 @@ @@ -23,8 +23,6 @@
23 }>(); 23 }>();
24 24
25 const emit = defineEmits(['update', 'create', 'register']); 25 const emit = defineEmits(['update', 'create', 'register']);
26 - const activeKey = ref('basicConfig');  
27 -  
28 const ROUTE = useRoute(); 26 const ROUTE = useRoute();
29 27
30 const { createMessage } = useMessage(); 28 const { createMessage } = useMessage();
@@ -70,7 +68,6 @@ @@ -70,7 +68,6 @@
70 unref(isEdit) ? handleUpdateComponent(value) : handleAddComponent(value); 68 unref(isEdit) ? handleUpdateComponent(value) : handleAddComponent(value);
71 resetForm(); 69 resetForm();
72 } catch (error: unknown) { 70 } catch (error: unknown) {
73 - if (unref(activeKey) !== 'basicConfig') activeKey.value = 'basicConfig';  
74 window.console.error(error); 71 window.console.error(error);
75 } 72 }
76 }; 73 };
@@ -138,7 +135,7 @@ @@ -138,7 +135,7 @@
138 @cancel="resetForm" 135 @cancel="resetForm"
139 > 136 >
140 <section> 137 <section>
141 - <Tabs v-model:activeKey="activeKey" type="card"> 138 + <Tabs type="card">
142 <Tabs.TabPane key="basicConfig" tab="基础配置"> 139 <Tabs.TabPane key="basicConfig" tab="基础配置">
143 <BasicConfiguration 140 <BasicConfiguration
144 ref="basicConfigurationEl" 141 ref="basicConfigurationEl"
1 import { Component } from 'vue'; 1 import { Component } from 'vue';
2 -import { FrontComponent } from '../../../components/help'; 2 +import { FrontComponent } from '../../../const/const';
3 import BasicDataSourceForm from './BasicDataSourceForm.vue'; 3 import BasicDataSourceForm from './BasicDataSourceForm.vue';
4 import ControlDataSourceForm from './ControlDataSourceForm.vue'; 4 import ControlDataSourceForm from './ControlDataSourceForm.vue';
5 5
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { Tabs, List } from 'ant-design-vue'; 2 import { Tabs, List } from 'ant-design-vue';
3 import VisualWidgetSelect from './VisualWidgetSelect.vue'; 3 import VisualWidgetSelect from './VisualWidgetSelect.vue';
  4 + import { getComponentDefaultConfig } from '../../components/help';
  5 + import { frontComponentMap } from '../../components/help';
  6 + import { computed } from 'vue';
4 import { 7 import {
5 FrontComponent, 8 FrontComponent,
6 FrontComponentCategory, 9 FrontComponentCategory,
7 FrontComponentCategoryName, 10 FrontComponentCategoryName,
8 - getComponentDefaultConfig,  
9 - } from '../../components/help';  
10 - import { frontComponentMap } from '../../components/help';  
11 - import { computed } from 'vue'; 11 + } from '../../const/const';
12 12
13 interface DataSource { 13 interface DataSource {
14 category: string; 14 category: string;
@@ -44,7 +44,7 @@ @@ -44,7 +44,7 @@
44 import trendIcon from '/@/assets/svg/trend.svg'; 44 import trendIcon from '/@/assets/svg/trend.svg';
45 import backIcon from '/@/assets/images/back.png'; 45 import backIcon from '/@/assets/images/back.png';
46 import { useCalcGridLayout } from '../hook/useCalcGridLayout'; 46 import { useCalcGridLayout } from '../hook/useCalcGridLayout';
47 - import { FrontComponent } from '../components/help'; 47 + import { FrontComponent } from '../const/const';
48 48
49 const ROUTE = useRoute(); 49 const ROUTE = useRoute();
50 50
  1 +import { Component } from 'vue';
1 import { Layout } from 'vue3-grid-layout'; 2 import { Layout } from 'vue3-grid-layout';
  3 +import { FrontComponent, FrontComponentCategory } from '../const/const';
  4 +import { RadioRecord } from '../detail/config/util';
2 import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model'; 5 import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
3 6
4 export type FrontDataSourceRecord = DataSource; 7 export type FrontDataSourceRecord = DataSource;
@@ -8,3 +11,25 @@ export type DataBoardLayoutInfo = Layout & { @@ -8,3 +11,25 @@ export type DataBoardLayoutInfo = Layout & {
8 width?: number; 11 width?: number;
9 height?: number; 12 height?: number;
10 }; 13 };
  14 +
  15 +export interface ComponentConfig {
  16 + Component: Component;
  17 + ComponentKey: FrontComponent;
  18 + ComponentConfig?: Recordable;
  19 + ComponentCategory: FrontComponentCategory;
  20 + transformConfig: (
  21 + componentConfig: Recordable,
  22 + record: DataComponentRecord,
  23 + dataSourceRecord: DataSource
  24 + ) => Recordable;
  25 +}
  26 +
  27 +export interface VisualComponentProps<Layout = Recordable, Value = Recordable> {
  28 + value?: Value;
  29 + layout?: Layout;
  30 + radio?: RadioRecord;
  31 + random?: boolean;
  32 + add?: (key: string, method: Fn) => void;
  33 + update?: () => void;
  34 + remove?: (key: string) => void;
  35 +}