简柏林 / thingskit-front · Commits

Commit e644b8dfb0db08a3fd6c50f0a183e6d2b79d4793

Authored by ww
1 parent 128a5ebd

wip: implement drag && drop save layou info

Inline Side-by-side
Showing 12 changed files with 207 additions and 41 deletions
@@ -53,6 +53,7 @@ export interface DataBoardList { @@ -53,6 +53,7 @@ export interface DataBoardList {
53 export interface GradientInfo { 53 export interface GradientInfo {
54 value: number; 54 value: number;
55 key: string; 55 key: string;
  56 + color: string;
56 } 57 }
57 58
58 export interface ComponentInfo { 59 export interface ComponentInfo {
@@ -27,7 +27,7 @@ @@ -27,7 +27,7 @@
27 function initChart() { 27 function initChart() {
28 const chartDom = document.getElementById(getControlsWidgetId())!; 28 const chartDom = document.getElementById(getControlsWidgetId())!;
29 chartRef.value = init(chartDom); 29 chartRef.value = init(chartDom);
30 - const option: EChartsOption = props.layout || instrumentComponent1(); 30 + const option: EChartsOption = props.layout.chartOption || instrumentComponent1();
31 31
32 nextTick(() => { 32 nextTick(() => {
33 option && unref(chartRef)?.setOption(option); 33 option && unref(chartRef)?.setOption(option);
@@ -52,13 +52,15 @@ @@ -52,13 +52,15 @@
52 52
53 <template> 53 <template>
54 <div class="flex flex-col w-full h-full min-w-3 min-h-3"> 54 <div class="flex flex-col w-full h-full min-w-3 min-h-3">
55 - <div :id="getControlsWidgetId()" class="widget-charts w-full h-full"></div>  
56 - <div>{{}}</div>  
57 - <div class="text-xs text-center text-gray-400">  
58 - <span>更新时间:</span>  
59 - <span>  
60 - {{ props.value.updateTime || dateUtil().format('YYYY-MM-DD HH:mm:ss') }}  
61 - </span> 55 + <div :id="getControlsWidgetId()" class="widget-charts flex-auto"></div>
  56 + <div>
  57 + <div class="text-center">{{ props.value.name }}</div>
  58 + <div class="text-xs text-center text-gray-400">
  59 + <span>更新时间:</span>
  60 + <span>
  61 + {{ props.value.updateTime || dateUtil().format('YYYY-MM-DD HH:mm:ss') }}
  62 + </span>
  63 + </div>
62 </div> 64 </div>
63 </div> 65 </div>
64 </template> 66 </template>
  1 +<script lang="ts" setup>
  2 + import { Image } from 'ant-design-vue';
  3 +
  4 + const props = defineProps<{
  5 + value: {
  6 + src: string;
  7 + };
  8 + }>();
  9 +</script>
  10 +
  11 +<template>
  12 + <section>
  13 + <Image
  14 + :src="
  15 + props?.value?.src ||
  16 + 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
  17 + "
  18 + />
  19 + </section>
  20 +</template>
  21 +
  22 +<style></style>
1 import { EChartsOption } from 'echarts'; 1 import { EChartsOption } from 'echarts';
2 import { visualOptionField } from '../../detail/config/visualOptions'; 2 import { visualOptionField } from '../../detail/config/visualOptions';
  3 +import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
  4 +import { buildUUID } from '/@/utils/uuid';
3 5
4 export type InstrumentComponentType = 'instrument-component-1' | 'instrument-component-2'; 6 export type InstrumentComponentType = 'instrument-component-1' | 'instrument-component-2';
5 7
@@ -10,6 +12,7 @@ export type GradientKey = @@ -10,6 +12,7 @@ export type GradientKey =
10 | visualOptionField.SECOND_PHASE_VALUE 12 | visualOptionField.SECOND_PHASE_VALUE
11 | visualOptionField.THIRD_PHASE_COLOR 13 | visualOptionField.THIRD_PHASE_COLOR
12 | visualOptionField.THIRD_PHASE_VALUE; 14 | visualOptionField.THIRD_PHASE_VALUE;
  15 +
13 export interface GradientInfoRecord { 16 export interface GradientInfoRecord {
14 key: GradientKey; 17 key: GradientKey;
15 value: number | string; 18 value: number | string;
@@ -24,6 +27,10 @@ export interface DashBoardValue { @@ -24,6 +27,10 @@ export interface DashBoardValue {
24 gradientInfo?: GradientInfoRecord[]; 27 gradientInfo?: GradientInfoRecord[];
25 } 28 }
26 29
  30 +export interface DashboardComponentLayout {
  31 + chartOption: EChartsOption;
  32 +}
  33 +
27 export const instrumentComponent1 = (params?: { value: number; unit: string }): EChartsOption => { 34 export const instrumentComponent1 = (params?: { value: number; unit: string }): EChartsOption => {
28 const { value = 10, unit = '°C' } = params || {}; 35 const { value = 10, unit = '°C' } = params || {};
29 return { 36 return {
@@ -214,3 +221,24 @@ export const instrumentComponent2 = (params?: { @@ -214,3 +221,24 @@ export const instrumentComponent2 = (params?: {
214 export const getGradientValue = (key: GradientKey, record: GradientInfoRecord[]) => { 221 export const getGradientValue = (key: GradientKey, record: GradientInfoRecord[]) => {
215 return record.find((item) => item.key === key)?.value; 222 return record.find((item) => item.key === key)?.value;
216 }; 223 };
  224 +
  225 +export const transformDashboardComponentConfig = (
  226 + config: DashboardComponentLayout,
  227 + record: DataComponentRecord,
  228 + dataSourceRecord: DataSource
  229 +) => {
  230 + return {
  231 + layout: {
  232 + chartOption: config,
  233 + } as DashboardComponentLayout,
  234 + value: {
  235 + id: buildUUID(),
  236 + name: dataSourceRecord.attributeRename || dataSourceRecord.attribute,
  237 + // value: record.va
  238 + unit: dataSourceRecord.componentInfo.unit,
  239 + updateTime: record.updateTime || record.createTime,
  240 + fontColor: dataSourceRecord.componentInfo.fontColor,
  241 + gradientInfo: dataSourceRecord.componentInfo.gradientInfo,
  242 + },
  243 + };
  244 +};
1 -export type DigitalDashBoardComponentType = 'digital-dashboard'; 1 +export type DigitalDashBoardComponentType = 'digital-dashboard-component';
2 2
3 export interface DigitalDashBoardLayout { 3 export interface DigitalDashBoardLayout {
4 max: number; 4 max: number;
  1 +import { EChartsOption } from 'echarts';
1 import { Component } from 'vue'; 2 import { Component } from 'vue';
2 import { WidgetComponentType } from '../../detail/config/visualOptions'; 3 import { WidgetComponentType } from '../../detail/config/visualOptions';
3 import { instrumentComponent1, instrumentComponent2 } from './dashBoardComponent.config'; 4 import { instrumentComponent1, instrumentComponent2 } from './dashBoardComponent.config';
@@ -5,9 +6,13 @@ import DashBoardComponent from './DashBoardComponent.vue'; @@ -5,9 +6,13 @@ import DashBoardComponent from './DashBoardComponent.vue';
5 import DigitalDashBoard from './DigitalDashBoard.vue'; 6 import DigitalDashBoard from './DigitalDashBoard.vue';
6 import { buildUUID } from '/@/utils/uuid'; 7 import { buildUUID } from '/@/utils/uuid';
7 8
  9 +export interface DashboardComponentLayout {
  10 + chartOption: EChartsOption;
  11 +}
  12 +
8 interface InstrumentComponentConfig { 13 interface InstrumentComponentConfig {
9 id: WidgetComponentType; 14 id: WidgetComponentType;
10 - layout: Recordable; 15 + layout: DashboardComponentLayout;
11 component: Component; 16 component: Component;
12 value: Recordable; 17 value: Recordable;
13 } 18 }
@@ -15,18 +20,18 @@ interface InstrumentComponentConfig { @@ -15,18 +20,18 @@ interface InstrumentComponentConfig {
15 export const instrumentComponentConfig: InstrumentComponentConfig[] = [ 20 export const instrumentComponentConfig: InstrumentComponentConfig[] = [
16 { 21 {
17 id: 'instrument-component-1', 22 id: 'instrument-component-1',
18 - layout: instrumentComponent1(), 23 + layout: { chartOption: instrumentComponent1() },
19 component: DashBoardComponent, 24 component: DashBoardComponent,
20 value: { id: buildUUID() }, 25 value: { id: buildUUID() },
21 }, 26 },
22 { 27 {
23 id: 'instrument-component-2', 28 id: 'instrument-component-2',
24 - layout: instrumentComponent2(), 29 + layout: { chartOption: instrumentComponent2() },
25 component: DashBoardComponent, 30 component: DashBoardComponent,
26 value: { id: buildUUID() }, 31 value: { id: buildUUID() },
27 }, 32 },
28 { 33 {
29 - id: 'digital-dashboard', 34 + id: 'digital-dashboard-component',
30 layout: {}, 35 layout: {},
31 component: DigitalDashBoard, 36 component: DigitalDashBoard,
32 value: {}, 37 value: {},
@@ -62,7 +62,7 @@ @@ -62,7 +62,7 @@
62 /> 62 />
63 </div> 63 </div>
64 </div> 64 </div>
65 - <div v-if="getShowUpdate" class="h-6 text-center text-xs text-gray-400"> 65 + <div v-if="getShowUpdate" class="text-center text-xs text-gray-400">
66 <span> 更新时间: {{ props.value.updateTime }}</span> 66 <span> 更新时间: {{ props.value.updateTime }}</span>
67 </div> 67 </div>
68 </div> 68 </div>
@@ -35,7 +35,7 @@ @@ -35,7 +35,7 @@
35 (record: DataBoardLayoutInfo & { isEdit: boolean }) => { 35 (record: DataBoardLayoutInfo & { isEdit: boolean }) => {
36 componentRecord.value = record; 36 componentRecord.value = record;
37 frontId.value = record.record.frontId; 37 frontId.value = record.record.frontId;
38 - isEdit.value = record.isEdit; 38 + isEdit.value = record.isEdit || false;
39 } 39 }
40 ); 40 );
41 41
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { ref, unref } from 'vue'; 2 import { ref, unref } from 'vue';
3 - import { WidgetComponentType, schemasMap } from '../config/visualOptions'; 3 + import {
  4 + WidgetComponentType,
  5 + schemasMap,
  6 + VisualOptionParams,
  7 + visualOptionField,
  8 + Gradient,
  9 + } from '../config/visualOptions';
4 import { useForm, BasicForm } from '/@/components/Form'; 10 import { useForm, BasicForm } from '/@/components/Form';
5 import { BasicModal, useModalInner } from '/@/components/Modal'; 11 import { BasicModal, useModalInner } from '/@/components/Modal';
6 import { ComponentInfo } from '/@/api/dataBoard/model'; 12 import { ComponentInfo } from '/@/api/dataBoard/model';
@@ -29,13 +35,44 @@ @@ -29,13 +35,44 @@
29 const [register, { closeModal }] = useModalInner( 35 const [register, { closeModal }] = useModalInner(
30 (data: { recordId: string; componentInfo: ComponentInfo }) => { 36 (data: { recordId: string; componentInfo: ComponentInfo }) => {
31 recordId.value = data.recordId; 37 recordId.value = data.recordId;
32 - method.setFieldsValue(data.componentInfo || {}); 38 + console.log(data.componentInfo);
  39 + const gradientInfo = data.componentInfo.gradientInfo;
  40 + let gradientRecord = {};
  41 + if (gradientInfo && gradientInfo.length) {
  42 + const first = gradientInfo.find((item) => item.key === Gradient.FIRST);
  43 + const second = gradientInfo.find((item) => item.key === Gradient.SECOND);
  44 + const third = gradientInfo.find((item) => item.key === Gradient.THIRD);
  45 + gradientRecord = {
  46 + [visualOptionField.FIRST_PHASE_COLOR]: first?.color,
  47 + [visualOptionField.FIRST_PHASE_VALUE]: first?.value,
  48 + [visualOptionField.SECOND_PHASE_COLOR]: second?.color,
  49 + [visualOptionField.SECOND_PHASE_VALUE]: second?.value,
  50 + [visualOptionField.THIRD_PHASE_COLOR]: third?.color,
  51 + [visualOptionField.THIRD_PHASE_VALUE]: third?.value,
  52 + };
  53 + }
  54 +
  55 + method.setFieldsValue({ ...(data.componentInfo || {}), ...gradientRecord });
33 } 56 }
34 ); 57 );
35 58
36 const handleGetValue = () => { 59 const handleGetValue = () => {
37 const value = method.getFieldsValue(); 60 const value = method.getFieldsValue();
38 - emit('close', unref(recordId), value); 61 + emit('close', unref(recordId), transformValue(value));
  62 + };
  63 +
  64 + const transformValue = (value: Partial<VisualOptionParams>) => {
  65 + return {
  66 + fontColor: value.fontColor || null,
  67 + icon: value.icon || null,
  68 + iconColor: value.iconColor || null,
  69 + unit: value.unit || null,
  70 + // gradientInfo: [
  71 + // { key: Gradient.FIRST, value: value.firstPhaseValue, color: value.firstPhaseColor },
  72 + // { key: Gradient.SECOND, value: value.secondPhaseValue, color: value.secondPhaseColor },
  73 + // { key: Gradient.THIRD, value: value.thirdPhaseValue, color: value.thirdPhaseColor },
  74 + // ],
  75 + };
39 }; 76 };
40 77
41 const handleClose = () => { 78 const handleClose = () => {
@@ -53,6 +90,12 @@ @@ -53,6 +90,12 @@
53 title="选项" 90 title="选项"
54 width="60%" 91 width="60%"
55 > 92 >
56 - <BasicForm @register="registerForm" :schemas="getSchemas" /> 93 + <BasicForm class="form" @register="registerForm" :schemas="getSchemas" />
57 </BasicModal> 94 </BasicModal>
58 </template> 95 </template>
  96 +
  97 +<style scoped>
  98 + .form:deep(.ant-input-number) {
  99 + width: 100%;
  100 + }
  101 +</style>
@@ -9,21 +9,25 @@ import { @@ -9,21 +9,25 @@ import {
9 transformTextComponentConfig, 9 transformTextComponentConfig,
10 } from '../../components/TextComponent/config'; 10 } from '../../components/TextComponent/config';
11 import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model'; 11 import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
  12 +import DashBoardComponent from '../../components/InstrumentComponent/DashBoardComponent.vue';
  13 +import { WidgetComponentType } from './visualOptions';
  14 +import {
  15 + instrumentComponent1,
  16 + instrumentComponent2,
  17 + transformDashboardComponentConfig,
  18 +} from '../../components/InstrumentComponent/dashBoardComponent.config';
  19 +import DigitalDashBoard from '../../components/InstrumentComponent/DigitalDashBoard.vue';
12 export enum FrontComponent { 20 export enum FrontComponent {
13 TEXT_COMPONENT_1 = 'text-component-1', 21 TEXT_COMPONENT_1 = 'text-component-1',
14 TEXT_COMPONENT_2 = 'text-component-2', 22 TEXT_COMPONENT_2 = 'text-component-2',
15 TEXT_COMPONENT_3 = 'text-component-3', 23 TEXT_COMPONENT_3 = 'text-component-3',
16 TEXT_COMPONENT_4 = 'text-component-4', 24 TEXT_COMPONENT_4 = 'text-component-4',
17 TEXT_COMPONENT_5 = 'text-component-5', 25 TEXT_COMPONENT_5 = 'text-component-5',
  26 + INSTRUMENT_COMPONENT_1 = 'instrument-component-1',
  27 + INSTRUMENT_COMPONENT_2 = 'instrument-component-2',
  28 + DIGITAL_DASHBOARD_COMPONENT = 'digital-dashboard-component',
18 } 29 }
19 30
20 -export type FrontComponentType =  
21 - | 'text-component-1'  
22 - | 'text-component-2'  
23 - | 'text-component-3'  
24 - | 'text-component-4'  
25 - | 'text-component-5';  
26 -  
27 export interface ComponentConfig { 31 export interface ComponentConfig {
28 Component: Component; 32 Component: Component;
29 ComponentConfig: Recordable; 33 ComponentConfig: Recordable;
@@ -34,7 +38,7 @@ export interface ComponentConfig { @@ -34,7 +38,7 @@ export interface ComponentConfig {
34 ) => Recordable; 38 ) => Recordable;
35 } 39 }
36 40
37 -export const frontComponentMap = new Map<FrontComponentType, ComponentConfig>(); 41 +export const frontComponentMap = new Map<WidgetComponentType, ComponentConfig>();
38 42
39 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_1, { 43 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_1, {
40 Component: TextComponent, 44 Component: TextComponent,
@@ -65,3 +69,21 @@ frontComponentMap.set(FrontComponent.TEXT_COMPONENT_5, { @@ -65,3 +69,21 @@ frontComponentMap.set(FrontComponent.TEXT_COMPONENT_5, {
65 ComponentConfig: TextComponent5Config, 69 ComponentConfig: TextComponent5Config,
66 transformConfig: transformTextComponentConfig, 70 transformConfig: transformTextComponentConfig,
67 }); 71 });
  72 +
  73 +frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, {
  74 + Component: DashBoardComponent,
  75 + ComponentConfig: instrumentComponent1(),
  76 + transformConfig: transformDashboardComponentConfig,
  77 +});
  78 +
  79 +frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, {
  80 + Component: DashBoardComponent,
  81 + ComponentConfig: instrumentComponent2(),
  82 + transformConfig: transformDashboardComponentConfig,
  83 +});
  84 +
  85 +frontComponentMap.set(FrontComponent.DIGITAL_DASHBOARD_COMPONENT, {
  86 + Component: DigitalDashBoard,
  87 + ComponentConfig: {},
  88 + transformConfig: transformDashboardComponentConfig,
  89 +});
@@ -2,15 +2,31 @@ import { InstrumentComponentType } from '../../components/InstrumentComponent/da @@ -2,15 +2,31 @@ import { InstrumentComponentType } from '../../components/InstrumentComponent/da
2 import { DigitalDashBoardComponentType } from '../../components/InstrumentComponent/digitalDashBoard.config'; 2 import { DigitalDashBoardComponentType } from '../../components/InstrumentComponent/digitalDashBoard.config';
3 import { TextComponentType } from '../../components/TextComponent/config'; 3 import { TextComponentType } from '../../components/TextComponent/config';
4 import { FormSchema } from '/@/components/Form'; 4 import { FormSchema } from '/@/components/Form';
5 -export enum defaultOptions {  
6 - fontColor = '#rer',  
7 -}  
8 5
9 export type WidgetComponentType = 6 export type WidgetComponentType =
10 | TextComponentType 7 | TextComponentType
11 | InstrumentComponentType 8 | InstrumentComponentType
12 | DigitalDashBoardComponentType; 9 | DigitalDashBoardComponentType;
13 10
  11 +export interface VisualOptionParams {
  12 + [visualOptionField.FONT_COLOR]: string;
  13 + [visualOptionField.UNIT]: string;
  14 + [visualOptionField.ICON_COLOR]: string;
  15 + [visualOptionField.ICON]: string;
  16 + [visualOptionField.FIRST_PHASE_COLOR]: string;
  17 + [visualOptionField.SECOND_PHASE_COLOR]: string;
  18 + [visualOptionField.THIRD_PHASE_COLOR]: string;
  19 + [visualOptionField.FIRST_PHASE_VALUE]: string;
  20 + [visualOptionField.SECOND_PHASE_VALUE]: string;
  21 + [visualOptionField.THIRD_PHASE_VALUE]: string;
  22 +}
  23 +
  24 +export enum Gradient {
  25 + FIRST = 'first',
  26 + SECOND = 'second',
  27 + THIRD = 'third',
  28 +}
  29 +
14 export enum visualOptionField { 30 export enum visualOptionField {
15 FONT_COLOR = 'fontColor', 31 FONT_COLOR = 'fontColor',
16 UNIT = 'unit', 32 UNIT = 'unit',
@@ -19,11 +35,9 @@ export enum visualOptionField { @@ -19,11 +35,9 @@ export enum visualOptionField {
19 FIRST_PHASE_COLOR = 'firstPhaseColor', 35 FIRST_PHASE_COLOR = 'firstPhaseColor',
20 SECOND_PHASE_COLOR = 'secondPhaseColor', 36 SECOND_PHASE_COLOR = 'secondPhaseColor',
21 THIRD_PHASE_COLOR = 'thirdPhaseColor', 37 THIRD_PHASE_COLOR = 'thirdPhaseColor',
22 - FOURTH_PHASE_COLOR = 'fourthPhaseColor',  
23 FIRST_PHASE_VALUE = 'firstPhaseValue', 38 FIRST_PHASE_VALUE = 'firstPhaseValue',
24 SECOND_PHASE_VALUE = 'secondPhaseValue', 39 SECOND_PHASE_VALUE = 'secondPhaseValue',
25 THIRD_PHASE_VALUE = 'thirdPhaseValue', 40 THIRD_PHASE_VALUE = 'thirdPhaseValue',
26 - FOURTH_PHASE_VALUE = 'fourthPhaseValue',  
27 } 41 }
28 42
29 export const modeOne: FormSchema[] = [ 43 export const modeOne: FormSchema[] = [
@@ -94,9 +108,10 @@ export const modeThree: FormSchema[] = [ @@ -94,9 +108,10 @@ export const modeThree: FormSchema[] = [
94 { 108 {
95 field: visualOptionField.FIRST_PHASE_VALUE, 109 field: visualOptionField.FIRST_PHASE_VALUE,
96 label: '一阶段阀值', 110 label: '一阶段阀值',
97 - component: 'Input', 111 + component: 'InputNumber',
98 componentProps: { 112 componentProps: {
99 placeholder: '请输入一阶段阀值', 113 placeholder: '请输入一阶段阀值',
  114 + min: 0,
100 }, 115 },
101 }, 116 },
102 { 117 {
@@ -108,9 +123,10 @@ export const modeThree: FormSchema[] = [ @@ -108,9 +123,10 @@ export const modeThree: FormSchema[] = [
108 { 123 {
109 field: visualOptionField.SECOND_PHASE_VALUE, 124 field: visualOptionField.SECOND_PHASE_VALUE,
110 label: '二阶段阀值', 125 label: '二阶段阀值',
111 - component: 'Input', 126 + component: 'InputNumber',
112 componentProps: { 127 componentProps: {
113 placeholder: '请输入二阶段阀值', 128 placeholder: '请输入二阶段阀值',
  129 + min: 0,
114 }, 130 },
115 }, 131 },
116 { 132 {
@@ -122,9 +138,10 @@ export const modeThree: FormSchema[] = [ @@ -122,9 +138,10 @@ export const modeThree: FormSchema[] = [
122 { 138 {
123 field: visualOptionField.THIRD_PHASE_VALUE, 139 field: visualOptionField.THIRD_PHASE_VALUE,
124 label: '三阶段阀值', 140 label: '三阶段阀值',
125 - component: 'Input', 141 + component: 'InputNumber',
126 componentProps: { 142 componentProps: {
127 placeholder: '请输入三阶段阀值', 143 placeholder: '请输入三阶段阀值',
  144 + min: 0,
128 }, 145 },
129 }, 146 },
130 ]; 147 ];
@@ -155,3 +172,4 @@ schemasMap.set('text-component-4', modeTwo); @@ -155,3 +172,4 @@ schemasMap.set('text-component-4', modeTwo);
155 schemasMap.set('text-component-4', modeTwo); 172 schemasMap.set('text-component-4', modeTwo);
156 schemasMap.set('instrument-component-1', modeOne); 173 schemasMap.set('instrument-component-1', modeOne);
157 schemasMap.set('instrument-component-2', modeThree); 174 schemasMap.set('instrument-component-2', modeThree);
  175 +schemasMap.set('digital-dashboard-component', modeFour);
@@ -16,7 +16,7 @@ @@ -16,7 +16,7 @@
16 } from '/@/api/dataBoard'; 16 } from '/@/api/dataBoard';
17 import { useRoute } from 'vue-router'; 17 import { useRoute } from 'vue-router';
18 import { computed, unref } from '@vue/reactivity'; 18 import { computed, unref } from '@vue/reactivity';
19 - import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model'; 19 + import { DataComponentRecord, DataSource, Layout } from '/@/api/dataBoard/model';
20 import { frontComponentMap, FrontComponentType } from './config/help'; 20 import { frontComponentMap, FrontComponentType } from './config/help';
21 import { useMessage } from '/@/hooks/web/useMessage'; 21 import { useMessage } from '/@/hooks/web/useMessage';
22 import { DataBoardLayoutInfo } from '../types/type'; 22 import { DataBoardLayoutInfo } from '../types/type';
@@ -79,10 +79,13 @@ @@ -79,10 +79,13 @@
79 if (updateFn) updateFn(); 79 if (updateFn) updateFn();
80 }); 80 });
81 } 81 }
  82 + const itemResize = (i: string, newH: number, newW: number, newHPx: number, newWPx: number) => {
  83 + updateSize(i, newH, newW, newHPx, newWPx);
  84 + };
82 85
83 const itemResized = (i: string, newH: number, newW: number, newHPx: number, newWPx: number) => { 86 const itemResized = (i: string, newH: number, newW: number, newHPx: number, newWPx: number) => {
  87 + handleSaveLayoutInfo();
84 updateSize(i, newH, newW, newHPx, newWPx); 88 updateSize(i, newH, newW, newHPx, newWPx);
85 - console.log({ newH, newW, newHPx, newWPx });  
86 }; 89 };
87 90
88 const itemContainerResized = ( 91 const itemContainerResized = (
@@ -95,6 +98,11 @@ @@ -95,6 +98,11 @@
95 updateSize(i, newH, newW, newHPx, newWPx); 98 updateSize(i, newH, newW, newHPx, newWPx);
96 }; 99 };
97 100
  101 + const itemMoved = (i: string) => {
  102 + handleSaveLayoutInfo();
  103 + updateCharts(i);
  104 + };
  105 +
98 const updateCharts = (i: string) => { 106 const updateCharts = (i: string) => {
99 nextTick(() => { 107 nextTick(() => {
100 const updateFn = widgetEl.get(i); 108 const updateFn = widgetEl.get(i);
@@ -126,6 +134,25 @@ @@ -126,6 +134,25 @@
126 openModal(true); 134 openModal(true);
127 }; 135 };
128 136
  137 + const handleSaveLayoutInfo = async () => {
  138 + try {
  139 + const layoutInfo = unref(dataBoardList).map((item) => {
  140 + return {
  141 + id: item.i,
  142 + h: item.h,
  143 + w: item.w,
  144 + x: item.x,
  145 + y: item.y,
  146 + } as Layout;
  147 + });
  148 +
  149 + await updateDataBoardLayout({
  150 + boardId: unref(getBoardId),
  151 + layout: layoutInfo,
  152 + });
  153 + } catch (error) {}
  154 + };
  155 +
129 const getDataBoardComponent = async () => { 156 const getDataBoardComponent = async () => {
130 try { 157 try {
131 const data = await getDataComponent(unref(getBoardId)); 158 const data = await getDataComponent(unref(getBoardId));
@@ -150,7 +177,6 @@ @@ -150,7 +177,6 @@
150 }, 177 },
151 }; 178 };
152 }); 179 });
153 - console.log(unref(dataBoardList));  
154 } catch (error) {} 180 } catch (error) {}
155 }; 181 };
156 182
@@ -173,7 +199,6 @@ @@ -173,7 +199,6 @@
173 199
174 const handleCopy = async (id: string) => { 200 const handleCopy = async (id: string) => {
175 const record = unref(dataBoardList).find((item) => item.i === id); 201 const record = unref(dataBoardList).find((item) => item.i === id);
176 - console.log({ record });  
177 try { 202 try {
178 const data = await addDataComponent({ 203 const data = await addDataComponent({
179 boardId: unref(getBoardId), 204 boardId: unref(getBoardId),
@@ -243,8 +268,8 @@ @@ -243,8 +268,8 @@
243 :style="{ display: 'flex', flexWrap: 'wrap' }" 268 :style="{ display: 'flex', flexWrap: 'wrap' }"
244 class="grid-item-layout" 269 class="grid-item-layout"
245 @resized="itemResized" 270 @resized="itemResized"
246 - @resize="itemResized"  
247 - @moved="updateCharts" 271 + @resize="itemResize"
  272 + @moved="itemMoved"
248 @container-resized="itemContainerResized" 273 @container-resized="itemContainerResized"
249 > 274 >
250 <WidgetWrapper 275 <WidgetWrapper