简柏林 / thingskit-front · Commits

Commit a23a69aeeb5372bab3146671370a7d3002f920b6

Authored by fengtao
2 parents e2b51250 3378ef5b

Merge branch 'main' into f-dev

Inline Side-by-side
Showing 12 changed files with 198 additions and 42 deletions
@@ -18,6 +18,10 @@ @@ -18,6 +18,10 @@
18 config: { 18 config: {
19 type: Object as PropType<ColorPicker.Options>, 19 type: Object as PropType<ColorPicker.Options>,
20 }, 20 },
  21 + defaultValue: {
  22 + type: String,
  23 + default: '',
  24 + },
21 }); 25 });
22 26
23 const emit = defineEmits(['update:value']); 27 const emit = defineEmits(['update:value']);
@@ -47,6 +51,12 @@ @@ -47,6 +51,12 @@
47 unref(picker)?.hide(); 51 unref(picker)?.hide();
48 }; 52 };
49 53
  54 + const onClear = () => {
  55 + emit('update:value', props.defaultValue);
  56 + unref(picker)?.hide();
  57 + unref(picker)?.setColor(props.defaultValue);
  58 + };
  59 +
50 const getOption = computed<ColorPicker.Options>(() => { 60 const getOption = computed<ColorPicker.Options>(() => {
51 const { config = {} } = props; 61 const { config = {} } = props;
52 return { 62 return {
@@ -94,11 +104,13 @@ @@ -94,11 +104,13 @@
94 picker.value = ColorPicker.create(unref(getOption)); 104 picker.value = ColorPicker.create(unref(getOption));
95 unref(picker)?.on('init', onInit); 105 unref(picker)?.on('init', onInit);
96 unref(picker)?.on('save', onSave); 106 unref(picker)?.on('save', onSave);
  107 + unref(picker)?.on('clear', onClear);
97 }); 108 });
98 109
99 onUnmounted(() => { 110 onUnmounted(() => {
100 unref(picker)?.off('init', onInit); 111 unref(picker)?.off('init', onInit);
101 unref(picker)?.off('save', onSave); 112 unref(picker)?.off('save', onSave);
  113 + unref(picker)?.off('clear', onClear);
102 114
103 unref(picker)?.destroyAndRemove(); 115 unref(picker)?.destroyAndRemove();
104 }); 116 });
@@ -60,19 +60,31 @@ @@ -60,19 +60,31 @@
60 } 60 }
61 61
62 const getRadio = computed(() => { 62 const getRadio = computed(() => {
63 - const { radio } = props.radio;  
64 - return radio; 63 + // const { radio } = props.radio;
  64 + return props.radio;
  65 + });
  66 +
  67 + const getChardRadio = computed(() => {
  68 + const realWidth = unref(chartRef)?.getWidth();
  69 + const realHeight = unref(chartRef)?.getHeight();
  70 + const radioRecord = props.radio;
  71 + // const widht
  72 + return {
  73 + ...radioRecord,
  74 + height: realHeight || radioRecord.height,
  75 + width: realWidth || radioRecord.height,
  76 + };
65 }); 77 });
66 78
67 const beforeUpdateFn = (componentType: InstrumentComponentType) => { 79 const beforeUpdateFn = (componentType: InstrumentComponentType) => {
68 if (componentType === 'instrument-component-1') return update_instrument_1_font; 80 if (componentType === 'instrument-component-1') return update_instrument_1_font;
69 if (componentType === 'instrument-component-2') return update_instrument_2_font; 81 if (componentType === 'instrument-component-2') return update_instrument_2_font;
70 - return (_radio: number) => {}; 82 + return (_radio: RadioRecord) => {};
71 }; 83 };
72 84
73 function update() { 85 function update() {
74 const option = beforeUpdateFn(props.layout.componentType); 86 const option = beforeUpdateFn(props.layout.componentType);
75 - unref(chartRef)?.setOption((option(unref(getRadio)) as unknown as EChartsOption) || {}); 87 + unref(chartRef)?.setOption((option(unref(getChardRadio)) as unknown as EChartsOption) || {});
76 unref(chartRef)?.resize(); 88 unref(chartRef)?.resize();
77 } 89 }
78 90
@@ -97,7 +109,7 @@ @@ -97,7 +109,7 @@
97 const updateChartFont = useThrottleFn(() => { 109 const updateChartFont = useThrottleFn(() => {
98 const option = beforeUpdateFn(props.layout.componentType); 110 const option = beforeUpdateFn(props.layout.componentType);
99 setTimeout(() => { 111 setTimeout(() => {
100 - unref(chartRef)?.setOption((option(unref(getRadio)) as unknown as EChartsOption) || {}); 112 + unref(chartRef)?.setOption((option(unref(getChardRadio)) as unknown as EChartsOption) || {});
101 }); 113 });
102 }, 500); 114 }, 500);
103 115
@@ -143,7 +155,10 @@ @@ -143,7 +155,10 @@
143 <div> 155 <div>
144 <div 156 <div
145 class="text-center" 157 class="text-center"
146 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 16, max: 18 }), color: '#666' }" 158 + :style="{
  159 + fontSize: fontSize({ radioRecord: getRadio, basic: 16, max: 18 }),
  160 + color: '#666',
  161 + }"
147 > 162 >
148 {{ props.value.name }} 163 {{ props.value.name }}
149 </div> 164 </div>
@@ -157,7 +172,10 @@ @@ -157,7 +172,10 @@
157 > 172 >
158 <div 173 <div
159 class="text-xs text-center truncate p-5" 174 class="text-xs text-center truncate p-5"
160 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 12 }), color: '#999' }" 175 + :style="{
  176 + fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }),
  177 + color: '#999',
  178 + }"
161 > 179 >
162 <span class="mr-2">更新时间:</span> 180 <span class="mr-2">更新时间:</span>
163 <span> 181 <span>
@@ -53,8 +53,9 @@ @@ -53,8 +53,9 @@
53 }); 53 });
54 54
55 const getRadio = computed(() => { 55 const getRadio = computed(() => {
56 - const { radio } = props.radio || DEFAULT_RADIO_RECORD;  
57 - return radio; 56 + // const { radio } = props.radio || DEFAULT_RADIO_RECORD;
  57 + // return radio;
  58 + return props.radio || DEFAULT_RADIO_RECORD;
58 }); 59 });
59 60
60 let timeout: Nullable<number> = null; 61 let timeout: Nullable<number> = null;
@@ -91,7 +92,7 @@ @@ -91,7 +92,7 @@
91 :size="4" 92 :size="4"
92 :style="{ 93 :style="{
93 backgroundColor: '#585357', 94 backgroundColor: '#585357',
94 - padding: fontSize({ radio: getRadio, basic: 10 }), 95 + padding: fontSize({ radioRecord: getRadio, basic: 10 }),
95 }" 96 }"
96 > 97 >
97 <div 98 <div
@@ -100,8 +101,8 @@ @@ -100,8 +101,8 @@
100 class="digital-wrapper__int" 101 class="digital-wrapper__int"
101 :style="{ 102 :style="{
102 color: getPropsValue.fontColor, 103 color: getPropsValue.fontColor,
103 - fontSize: fontSize({ radio: getRadio, basic: 20, max: 20 }),  
104 - padding: fontSize({ radio: getRadio, basic: 5 }), 104 + fontSize: fontSize({ radioRecord: getRadio, basic: 20, max: 20 }),
  105 + padding: fontSize({ radioRecord: getRadio, basic: 5 }),
105 }" 106 }"
106 > 107 >
107 <div class="digital-text__int p-1 text-light-50"> {{ number }}</div> 108 <div class="digital-text__int p-1 text-light-50"> {{ number }}</div>
@@ -118,7 +119,7 @@ @@ -118,7 +119,7 @@
118 :size="4" 119 :size="4"
119 :style="{ 120 :style="{
120 backgroundColor: '#b74940', 121 backgroundColor: '#b74940',
121 - padding: fontSize({ radio: getRadio, basic: 10 }), 122 + padding: fontSize({ radioRecord: getRadio, basic: 10 }),
122 }" 123 }"
123 > 124 >
124 <div 125 <div
@@ -127,8 +128,8 @@ @@ -127,8 +128,8 @@
127 class="digital-wrapper__float" 128 class="digital-wrapper__float"
128 :style="{ 129 :style="{
129 color: getPropsValue.fontColor, 130 color: getPropsValue.fontColor,
130 - fontSize: fontSize({ radio: getRadio, basic: 20, max: 20 }),  
131 - padding: fontSize({ radio: getRadio, basic: 5 }), 131 + fontSize: fontSize({ radioRecord: getRadio, basic: 20, max: 20 }),
  132 + padding: fontSize({ radioRecord: getRadio, basic: 5 }),
132 }" 133 }"
133 > 134 >
134 <div class="digital-text__float p-1 text-light-50"> 135 <div class="digital-text__float p-1 text-light-50">
@@ -137,8 +138,8 @@ @@ -137,8 +138,8 @@
137 </div> 138 </div>
138 </Space> 139 </Space>
139 <div 140 <div
140 - class="px-1"  
141 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 18, max: 18 }) }" 141 + class="px-1 font-bold"
  142 + :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 18, max: 18 }) }"
142 > 143 >
143 {{ getPropsValue.unit }} 144 {{ getPropsValue.unit }}
144 </div> 145 </div>
@@ -147,7 +148,7 @@ @@ -147,7 +148,7 @@
147 148
148 <div 149 <div
149 class="text-center truncate" 150 class="text-center truncate"
150 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 18 }) }" 151 + :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 18 }) }"
151 > 152 >
152 <span>{{ props.value.name || '电表' }}</span> 153 <span>{{ props.value.name || '电表' }}</span>
153 </div> 154 </div>
@@ -161,7 +162,10 @@ @@ -161,7 +162,10 @@
161 > 162 >
162 <div 163 <div
163 class="text-center text-xs truncate p-5" 164 class="text-center text-xs truncate p-5"
164 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }), color: '#999' }" 165 + :style="{
  166 + fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 16 }),
  167 + color: '#999',
  168 + }"
165 > 169 >
166 <span class="mr-1">更新时间:</span> 170 <span class="mr-1">更新时间:</span>
167 <span> 171 <span>
1 import { EChartsOption } from 'echarts'; 1 import { EChartsOption } from 'echarts';
2 -import { fontSize } from '../../detail/config/util'; 2 +import { fontSize, RadioRecord } from '../../detail/config/util';
3 import { Gradient, visualOptionField } from '../../detail/config/visualOptions'; 3 import { Gradient, visualOptionField } from '../../detail/config/visualOptions';
4 import { 4 import {
5 ComponentInfo, 5 ComponentInfo,
@@ -240,8 +240,8 @@ export const getGradient = (key: Gradient, record: GradientInfo[] = []) => { @@ -240,8 +240,8 @@ export const getGradient = (key: Gradient, record: GradientInfo[] = []) => {
240 return record.find((item) => item.key === key); 240 return record.find((item) => item.key === key);
241 }; 241 };
242 242
243 -export const update_instrument_1_font = (radio: number) => {  
244 - const basicFontSize = fontSize({ radio, basic: 16, max: 16, min: 12 }); 243 +export const update_instrument_1_font = (radioRecord: RadioRecord) => {
  244 + const basicFontSize = fontSize({ radioRecord, basic: 16, max: 16, min: 12 });
245 return { 245 return {
246 series: [ 246 series: [
247 { 247 {
@@ -256,9 +256,9 @@ export const update_instrument_1_font = (radio: number) => { @@ -256,9 +256,9 @@ export const update_instrument_1_font = (radio: number) => {
256 } as EChartsOption; 256 } as EChartsOption;
257 }; 257 };
258 258
259 -export const update_instrument_2_font = (radio: number) => {  
260 - const axisLabelFontSize = fontSize({ radio, basic: 10, max: 16 });  
261 - const detailFontSize = fontSize({ radio, basic: 16, max: 16, min: 10 }); 259 +export const update_instrument_2_font = (radioRecord: RadioRecord) => {
  260 + const axisLabelFontSize = fontSize({ radioRecord, basic: 10, max: 16 });
  261 + const detailFontSize = fontSize({ radioRecord, basic: 16, max: 16, min: 10 });
262 return { 262 return {
263 series: [ 263 series: [
264 { 264 {
@@ -22,8 +22,9 @@ @@ -22,8 +22,9 @@
22 const getImagBase64 = ref(fallback); 22 const getImagBase64 = ref(fallback);
23 23
24 const getRadio = computed(() => { 24 const getRadio = computed(() => {
25 - const { radio } = props.radio || DEFAULT_RADIO_RECORD;  
26 - return radio; 25 + // const { radio } = props.radio || DEFAULT_RADIO_RECORD;
  26 + // return radio;
  27 + return props.radio || DEFAULT_RADIO_RECORD;
27 }); 28 });
28 29
29 const getWidth = computed(() => { 30 const getWidth = computed(() => {
@@ -69,7 +70,7 @@ @@ -69,7 +70,7 @@
69 <!-- <Image :style="{ width: `${getWidth}px` }" :src="getImagBase64" /> --> 70 <!-- <Image :style="{ width: `${getWidth}px` }" :src="getImagBase64" /> -->
70 <div 71 <div
71 class="w-full text-center truncate p-5" 72 class="w-full text-center truncate p-5"
72 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 12 }), color: '#999' }" 73 + :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }), color: '#999' }"
73 > 74 >
74 <Tooltip 75 <Tooltip
75 placement="top" 76 placement="top"
@@ -47,8 +47,9 @@ @@ -47,8 +47,9 @@
47 }); 47 });
48 48
49 const getRadio = computed(() => { 49 const getRadio = computed(() => {
50 - const { radio } = props.radio;  
51 - return radio; 50 + // const { radio } = props.radio;
  51 + // return radio;
  52 + return props.radio || DEFAULT_RADIO_RECORD;
52 }); 53 });
53 </script> 54 </script>
54 55
@@ -66,8 +67,8 @@ @@ -66,8 +67,8 @@
66 prefix="iconfont" 67 prefix="iconfont"
67 :style="{ 68 :style="{
68 color: props.value.iconColor, 69 color: props.value.iconColor,
69 - width: fontSize({ radio: getRadio, basic: 50, min: 16 }),  
70 - height: fontSize({ radio: getRadio, basic: 50, min: 16 }), 70 + width: fontSize({ radioRecord: getRadio, basic: 50, min: 16 }),
  71 + height: fontSize({ radioRecord: getRadio, basic: 50, min: 16 }),
71 }" 72 }"
72 /> 73 />
73 </div> 74 </div>
@@ -77,12 +78,12 @@ @@ -77,12 +78,12 @@
77 class="truncate" 78 class="truncate"
78 :suffix="getShowUnit ? props.value.unit : ''" 79 :suffix="getShowUnit ? props.value.unit : ''"
79 :value-style="{ 80 :value-style="{
80 - fontSize: fontSize({ radio: getRadio, basic: 24, min: 16 }), 81 + fontSize: fontSize({ radioRecord: getRadio, basic: 24, min: 16 }),
81 color: props.value.fontColor, 82 color: props.value.fontColor,
82 }" 83 }"
83 /> 84 />
84 </div> 85 </div>
85 - <div :style="{ color: '#666', fontSize: fontSize({ radio: getRadio, basic: 16 }) }"> 86 + <div :style="{ color: '#666', fontSize: fontSize({ radioRecord: getRadio, basic: 16 }) }">
86 <!-- {{ getShowUnit ? props.value.unit : '' }} --> 87 <!-- {{ getShowUnit ? props.value.unit : '' }} -->
87 {{ props.value.name }} 88 {{ props.value.name }}
88 </div> 89 </div>
@@ -103,7 +104,7 @@ @@ -103,7 +104,7 @@
103 > 104 >
104 <div class="text-center text-xs truncate p-5" style="color: #999"> 105 <div class="text-center text-xs truncate p-5" style="color: #999">
105 <div 106 <div
106 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 12 }) }" 107 + :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }) }"
107 class="truncate" 108 class="truncate"
108 > 109 >
109 <span class="mr-1">更新时间:</span> 110 <span class="mr-1">更新时间:</span>
@@ -63,7 +63,7 @@ @@ -63,7 +63,7 @@
63 :key="index" 63 :key="index"
64 > 64 >
65 <Tooltip :title="item.deviceName" placement="top"> 65 <Tooltip :title="item.deviceName" placement="top">
66 - <span> 66 + <span class="font-bold">
67 <!-- <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" /> --> 67 <!-- <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" /> -->
68 <span>{{ item.deviceRename || item.deviceName }}</span> 68 <span>{{ item.deviceRename || item.deviceName }}</span>
69 </span> 69 </span>
  1 +import { getOrganizationList } from '/@/api/system/system';
1 import { FormSchema } from '/@/components/Form'; 2 import { FormSchema } from '/@/components/Form';
  3 +import { copyTransFun } from '/@/utils/fnUtils';
2 export enum ViewType { 4 export enum ViewType {
3 PRIVATE_VIEW = 'PRIVATE_VIEW', 5 PRIVATE_VIEW = 'PRIVATE_VIEW',
4 PUBLIC_VIEW = 'PUBLIC_VIEW', 6 PUBLIC_VIEW = 'PUBLIC_VIEW',
@@ -9,12 +11,29 @@ export const formSchema: FormSchema[] = [ @@ -9,12 +11,29 @@ export const formSchema: FormSchema[] = [
9 field: 'name', 11 field: 'name',
10 label: '名称', 12 label: '名称',
11 component: 'Input', 13 component: 'Input',
12 - required: true, 14 + rules: [{ required: true, message: '请输入看板名称' }],
13 componentProps: { 15 componentProps: {
14 placeholder: '请输入看板名称', 16 placeholder: '请输入看板名称',
15 }, 17 },
16 }, 18 },
17 { 19 {
  20 + field: 'organizationId',
  21 + component: 'ApiTreeSelect',
  22 + label: '组织',
  23 + rules: [{ required: true, message: '组织为必填项' }],
  24 + componentProps() {
  25 + return {
  26 + placeholder: '请选择组织',
  27 + api: async () => {
  28 + const data = await getOrganizationList();
  29 + copyTransFun(data as any as any[]);
  30 + return data;
  31 + },
  32 + getPopupContainer: () => document.body,
  33 + };
  34 + },
  35 + },
  36 + {
18 field: 'viewType', 37 field: 'viewType',
19 label: '名称', 38 label: '名称',
20 component: 'RadioGroup', 39 component: 'RadioGroup',
  1 +import { getOrganizationList } from '/@/api/system/system';
  2 +import { FormSchema } from '/@/components/Form';
  3 +import { ColEx } from '/@/components/Form/src/types';
  4 +import { useGridLayout } from '/@/hooks/component/useGridLayout';
  5 +import { copyTransFun } from '/@/utils/fnUtils';
  6 +
  7 +export const formSchema: FormSchema[] = [
  8 + {
  9 + field: 'name',
  10 + label: '看板名称',
  11 + component: 'Input',
  12 + // colProps: { span: 10 },
  13 + colProps: useGridLayout(2, 3, 4) as unknown as ColEx,
  14 + },
  15 + {
  16 + field: 'organizationId',
  17 + component: 'ApiTreeSelect',
  18 + label: '组织',
  19 + // colProps: { span: 10 },
  20 + colProps: useGridLayout(2, 3, 4) as unknown as ColEx,
  21 + componentProps() {
  22 + return {
  23 + placeholder: '请选择组织',
  24 + api: async () => {
  25 + const data = await getOrganizationList();
  26 + copyTransFun(data as any as any[]);
  27 + return data;
  28 + },
  29 + getPopupContainer: () => document.body,
  30 + };
  31 + },
  32 + },
  33 +];
@@ -25,7 +25,7 @@ export const calcScale = ( @@ -25,7 +25,7 @@ export const calcScale = (
25 width = width * (widthRadio / 100); 25 width = width * (widthRadio / 100);
26 height = height * (heightRadio / 100); 26 height = height * (heightRadio / 100);
27 27
28 - const temp = width * height; 28 + const temp = width > height ? height ** 2 : width ** 2;
29 29
30 const isLess = temp < 300 * 300; 30 const isLess = temp < 300 * 300;
31 31
@@ -40,16 +40,17 @@ export const calcScale = ( @@ -40,16 +40,17 @@ export const calcScale = (
40 }; 40 };
41 41
42 export const fontSize = ({ 42 export const fontSize = ({
43 - radio, 43 + radioRecord,
44 basic, 44 basic,
45 max, 45 max,
46 min, 46 min,
47 }: { 47 }: {
48 - radio: number; 48 + radioRecord: RadioRecord;
49 basic: number; 49 basic: number;
50 max?: number; 50 max?: number;
51 min?: number; 51 min?: number;
52 }) => { 52 }) => {
  53 + const { radio } = radioRecord;
53 let res = basic * radio; 54 let res = basic * radio;
54 if (max && res > max) res = max; 55 if (max && res > max) res = max;
55 if (min && res < min) res = min; 56 if (min && res < min) res = min;
@@ -28,6 +28,11 @@ export enum Gradient { @@ -28,6 +28,11 @@ export enum Gradient {
28 SECOND = 'second', 28 SECOND = 'second',
29 THIRD = 'third', 29 THIRD = 'third',
30 } 30 }
  31 +export enum GradientColor {
  32 + FIRST = '#67e0e3',
  33 + SECOND = '#37a2da',
  34 + THIRD = '#fd666d',
  35 +}
31 36
32 export enum visualOptionField { 37 export enum visualOptionField {
33 FONT_COLOR = 'fontColor', 38 FONT_COLOR = 'fontColor',
@@ -48,6 +53,9 @@ export const modeOne: FormSchema[] = [ @@ -48,6 +53,9 @@ export const modeOne: FormSchema[] = [
48 label: '数值字体颜色', 53 label: '数值字体颜色',
49 component: 'ColorPicker', 54 component: 'ColorPicker',
50 changeEvent: 'update:value', 55 changeEvent: 'update:value',
  56 + componentProps: {
  57 + defaultValue: '#000',
  58 + },
51 }, 59 },
52 ]; 60 ];
53 61
@@ -57,6 +65,9 @@ export const modeTwo: FormSchema[] = [ @@ -57,6 +65,9 @@ export const modeTwo: FormSchema[] = [
57 label: '数值字体颜色', 65 label: '数值字体颜色',
58 component: 'ColorPicker', 66 component: 'ColorPicker',
59 changeEvent: 'update:value', 67 changeEvent: 'update:value',
  68 + componentProps: {
  69 + defaultValue: '#000',
  70 + },
60 }, 71 },
61 { 72 {
62 field: visualOptionField.UNIT, 73 field: visualOptionField.UNIT,
@@ -71,6 +82,9 @@ export const modeTwo: FormSchema[] = [ @@ -71,6 +82,9 @@ export const modeTwo: FormSchema[] = [
71 label: '图标颜色', 82 label: '图标颜色',
72 component: 'ColorPicker', 83 component: 'ColorPicker',
73 changeEvent: 'update:value', 84 changeEvent: 'update:value',
  85 + componentProps: {
  86 + defaultValue: '#367BFF',
  87 + },
74 }, 88 },
75 { 89 {
76 field: visualOptionField.ICON, 90 field: visualOptionField.ICON,
@@ -92,6 +106,9 @@ export const modeThree: FormSchema[] = [ @@ -92,6 +106,9 @@ export const modeThree: FormSchema[] = [
92 label: '数值字体颜色', 106 label: '数值字体颜色',
93 component: 'ColorPicker', 107 component: 'ColorPicker',
94 changeEvent: 'update:value', 108 changeEvent: 'update:value',
  109 + componentProps: {
  110 + defaultValue: '#000',
  111 + },
95 }, 112 },
96 { 113 {
97 field: visualOptionField.UNIT, 114 field: visualOptionField.UNIT,
@@ -106,6 +123,9 @@ export const modeThree: FormSchema[] = [ @@ -106,6 +123,9 @@ export const modeThree: FormSchema[] = [
106 label: '一阶段颜色', 123 label: '一阶段颜色',
107 component: 'ColorPicker', 124 component: 'ColorPicker',
108 changeEvent: 'update:value', 125 changeEvent: 'update:value',
  126 + componentProps: {
  127 + defaultValue: GradientColor.FIRST,
  128 + },
109 }, 129 },
110 { 130 {
111 field: visualOptionField.FIRST_PHASE_VALUE, 131 field: visualOptionField.FIRST_PHASE_VALUE,
@@ -121,6 +141,9 @@ export const modeThree: FormSchema[] = [ @@ -121,6 +141,9 @@ export const modeThree: FormSchema[] = [
121 label: '二阶段颜色', 141 label: '二阶段颜色',
122 component: 'ColorPicker', 142 component: 'ColorPicker',
123 changeEvent: 'update:value', 143 changeEvent: 'update:value',
  144 + componentProps: {
  145 + defaultValue: GradientColor.SECOND,
  146 + },
124 }, 147 },
125 { 148 {
126 field: visualOptionField.SECOND_PHASE_VALUE, 149 field: visualOptionField.SECOND_PHASE_VALUE,
@@ -138,6 +161,9 @@ export const modeThree: FormSchema[] = [ @@ -138,6 +161,9 @@ export const modeThree: FormSchema[] = [
138 label: '三阶段颜色', 161 label: '三阶段颜色',
139 component: 'ColorPicker', 162 component: 'ColorPicker',
140 changeEvent: 'update:value', 163 changeEvent: 'update:value',
  164 + componentProps: {
  165 + defaultValue: GradientColor.THIRD,
  166 + },
141 }, 167 },
142 { 168 {
143 field: visualOptionField.THIRD_PHASE_VALUE, 169 field: visualOptionField.THIRD_PHASE_VALUE,
@@ -158,6 +184,9 @@ export const modeFour: FormSchema[] = [ @@ -158,6 +184,9 @@ export const modeFour: FormSchema[] = [
158 label: '数值字体颜色', 184 label: '数值字体颜色',
159 component: 'ColorPicker', 185 component: 'ColorPicker',
160 changeEvent: 'update:value', 186 changeEvent: 'update:value',
  187 + componentProps: {
  188 + defaultValue: '#000',
  189 + },
161 }, 190 },
162 { 191 {
163 field: visualOptionField.UNIT, 192 field: visualOptionField.UNIT,
@@ -19,6 +19,8 @@ @@ -19,6 +19,8 @@
19 import { computed } from '@vue/reactivity'; 19 import { computed } from '@vue/reactivity';
20 import { usePermission } from '/@/hooks/web/usePermission'; 20 import { usePermission } from '/@/hooks/web/usePermission';
21 import { encode } from './config/config'; 21 import { encode } from './config/config';
  22 + import { useForm, BasicForm } from '/@/components/Form';
  23 + import { formSchema } from './config/searchForm';
22 24
23 const ListItem = List.Item; 25 const ListItem = List.Item;
24 const router = useRouter(); 26 const router = useRouter();
@@ -28,6 +30,21 @@ @@ -28,6 +30,21 @@
28 const listEL = ref(); 30 const listEL = ref();
29 const loading = ref(false); 31 const loading = ref(false);
30 const dataBoardList = ref<DataBoardRecord[]>([]); 32 const dataBoardList = ref<DataBoardRecord[]>([]);
  33 +
  34 + const [searchFormRegister, searchFormMethod] = useForm({
  35 + schemas: formSchema,
  36 + labelWidth: 80,
  37 + layout: 'inline',
  38 + submitButtonOptions: {
  39 + loading: loading,
  40 + },
  41 + submitFunc: async () => {
  42 + try {
  43 + await getDatasource();
  44 + } catch (error) {}
  45 + },
  46 + });
  47 +
31 //分页相关 48 //分页相关
32 const page = ref(1); 49 const page = ref(1);
33 const pageSize = ref(10); 50 const pageSize = ref(10);
@@ -87,9 +104,11 @@ @@ -87,9 +104,11 @@
87 const getDatasource = async () => { 104 const getDatasource = async () => {
88 try { 105 try {
89 loading.value = true; 106 loading.value = true;
  107 + const params = searchFormMethod.getFieldsValue() || {};
90 const { total, items } = await getDataBoardList({ 108 const { total, items } = await getDataBoardList({
91 page: unref(paginationProp).current, 109 page: unref(paginationProp).current,
92 pageSize: unref(paginationProp).pageSize, 110 pageSize: unref(paginationProp).pageSize,
  111 + ...params,
93 }); 112 });
94 dataBoardList.value = items; 113 dataBoardList.value = items;
95 paginationProp.value.total = total; 114 paginationProp.value.total = total;
@@ -176,12 +195,16 @@ @@ -176,12 +195,16 @@
176 195
177 <template> 196 <template>
178 <PageWrapper> 197 <PageWrapper>
179 - <div class="flex mb-6 items-center bg-light-100 h-78px"> 198 + <div class="flex items-center mb-3 bg-light-100 h-78px">
180 <div class="text-lg ml-30px mr-9px font-bold">自定义看板</div> 199 <div class="text-lg ml-30px mr-9px font-bold">自定义看板</div>
181 <Authority value="api:yt:data_board:add:post"> 200 <Authority value="api:yt:data_board:add:post">
182 <Button type="primary" @click="handleOpenDetailModal">创建看板</Button> 201 <Button type="primary" @click="handleOpenDetailModal">创建看板</Button>
183 </Authority> 202 </Authority>
184 </div> 203 </div>
  204 + <div class="bg-light-100 mb-6 w-full p-3 search-form">
  205 + <BasicForm class="flex-auto w-full" @register="searchFormRegister" />
  206 + </div>
  207 + <!-- <div> </div> -->
185 <Spin :spinning="loading"> 208 <Spin :spinning="loading">
186 <List 209 <List
187 ref="listEL" 210 ref="listEL"
@@ -193,7 +216,7 @@ @@ -193,7 +216,7 @@
193 <ListItem> 216 <ListItem>
194 <Card class="data-card cursor-pointer"> 217 <Card class="data-card cursor-pointer">
195 <template #title> 218 <template #title>
196 - <div>{{ item.name }}</div> 219 + <div class="font-bold">{{ item.name }}</div>
197 </template> 220 </template>
198 <template #extra> 221 <template #extra>
199 <Dropdown 222 <Dropdown
@@ -266,4 +289,19 @@ @@ -266,4 +289,19 @@
266 background-image: url('/@/assets/svg/component.svg'); 289 background-image: url('/@/assets/svg/component.svg');
267 } 290 }
268 } 291 }
  292 +
  293 + .search-form {
  294 + width: 100%;
  295 + form {
  296 + width: 100%;
  297 + :deep(.ant-row) {
  298 + width: 100%;
  299 + }
  300 +
  301 + :deep(.ant-row > div:last-child) {
  302 + flex: 1;
  303 + max-width: 100%;
  304 + }
  305 + }
  306 + }
269 </style> 307 </style>