简柏林 / thingskit-front · Commits

Commit d73ce170dd9237c064589e259ac142c5e6fc482d

Authored by ww
1 parent 66e9527e

fix: widget updateDate overflow hidden problem

Inline Side-by-side
Showing 8 changed files with 76 additions and 44 deletions
@@ -63,7 +63,6 @@ @@ -63,7 +63,6 @@
63 63
64 function update() { 64 function update() {
65 const option = beforeUpdateFn(props.layout.componentType); 65 const option = beforeUpdateFn(props.layout.componentType);
66 - console.log(unref(chartRef));  
67 unref(chartRef)?.setOption(option(unref(getRadio)) as unknown as EChartsOption); 66 unref(chartRef)?.setOption(option(unref(getRadio)) as unknown as EChartsOption);
68 unref(chartRef)?.resize(); 67 unref(chartRef)?.resize();
69 } 68 }
@@ -55,7 +55,7 @@ @@ -55,7 +55,7 @@
55 :key="number" 55 :key="number"
56 class="border border-gray-400 p-2" 56 class="border border-gray-400 p-2"
57 :style="{ 57 :style="{
58 - color: props.value.valueColor, 58 + color: props.value.fontColor,
59 fontSize: fontSize({ radio: getRadio, basic: 20 }), 59 fontSize: fontSize({ radio: getRadio, basic: 20 }),
60 }" 60 }"
61 > 61 >
@@ -68,7 +68,7 @@ @@ -68,7 +68,7 @@
68 :key="number" 68 :key="number"
69 class="border border-gray-400 p-1" 69 class="border border-gray-400 p-1"
70 :style="{ 70 :style="{
71 - color: props.value.valueColor, 71 + color: props.value.fontColor,
72 fontSize: fontSize({ radio: getRadio, basic: 18 }), 72 fontSize: fontSize({ radio: getRadio, basic: 18 }),
73 }" 73 }"
74 > 74 >
@@ -83,11 +83,11 @@ @@ -83,11 +83,11 @@
83 :style="{ fontSize: fontSize({ radio: getRadio, basic: 18 }) }" 83 :style="{ fontSize: fontSize({ radio: getRadio, basic: 18 }) }"
84 > 84 >
85 <span>{{ props.value.name || '电表' }}</span> 85 <span>{{ props.value.name || '电表' }}</span>
86 - <span class="px-1">({{ props.value.unit || 'kw/h' }})</span> 86 + <span class="px-1">({{ 'kw/h' }})</span>
87 </div> 87 </div>
88 <div 88 <div
89 class="text-center mt-1 text-gray-400 text-xs truncate" 89 class="text-center mt-1 text-gray-400 text-xs truncate"
90 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 12 }) }" 90 + :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
91 > 91 >
92 <span class="mr-1">更新时间:</span> 92 <span class="mr-1">更新时间:</span>
93 <span>{{ props.value.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT) }}</span> 93 <span>{{ props.value.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT) }}</span>
1 import { EChartsOption } from 'echarts'; 1 import { EChartsOption } from 'echarts';
2 import { fontSize } from '../../detail/config/util'; 2 import { fontSize } from '../../detail/config/util';
3 -import { visualOptionField } from '../../detail/config/visualOptions';  
4 -import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model'; 3 +import { Gradient, visualOptionField } from '../../detail/config/visualOptions';
  4 +import { DataComponentRecord, DataSource, GradientInfo } from '/@/api/dataBoard/model';
5 import { buildUUID } from '/@/utils/uuid'; 5 import { buildUUID } from '/@/utils/uuid';
6 6
7 export type InstrumentComponentType = 'instrument-component-1' | 'instrument-component-2'; 7 export type InstrumentComponentType = 'instrument-component-1' | 'instrument-component-2';
@@ -15,8 +15,9 @@ export type GradientKey = @@ -15,8 +15,9 @@ export type GradientKey =
15 | visualOptionField.THIRD_PHASE_VALUE; 15 | visualOptionField.THIRD_PHASE_VALUE;
16 16
17 export interface GradientInfoRecord { 17 export interface GradientInfoRecord {
18 - key: GradientKey;  
19 - value: number | string; 18 + key: Gradient;
  19 + value: number;
  20 + color: string;
20 } 21 }
21 22
22 export interface DashBoardValue { 23 export interface DashBoardValue {
@@ -148,34 +149,42 @@ export const instrumentComponent1 = (params?: { value: number; unit: string }): @@ -148,34 +149,42 @@ export const instrumentComponent1 = (params?: { value: number; unit: string }):
148 }; 149 };
149 150
150 export const instrumentComponent2 = (params?: { 151 export const instrumentComponent2 = (params?: {
151 - gradient: GradientInfoRecord[]; 152 + gradient: GradientInfo[];
152 value: number; 153 value: number;
153 unit: string; 154 unit: string;
154 }): EChartsOption => { 155 }): EChartsOption => {
155 const { gradient = [], value = 0, unit = 'km/h' } = params || {}; 156 const { gradient = [], value = 0, unit = 'km/h' } = params || {};
  157 + const firstRecord = getGradient(Gradient.FIRST, gradient);
  158 + const secondRecord = getGradient(Gradient.SECOND, gradient);
  159 + const thirdRecord = getGradient(Gradient.THIRD, gradient);
  160 +
  161 + let max = thirdRecord?.value || secondRecord?.value || firstRecord?.value || 70;
  162 + max = Number(1 + Array(String(max).length).fill(0).join(''));
  163 +
  164 + const firstGradient = firstRecord?.value ? firstRecord.value / max : 0.3;
  165 + const secondGradient = secondRecord?.value ? secondRecord.value / max : 0.7;
  166 + // const thirdGradient = thirdRecord?.value ? thirdRecord.value / max : 1;
  167 +
  168 + console.log();
156 return { 169 return {
157 series: [ 170 series: [
158 { 171 {
159 type: 'gauge', 172 type: 'gauge',
  173 + min: 0,
  174 + max,
  175 + // startAngle: 225,
  176 + // endAngle: -70,
  177 + // splitNumber: 10,
160 axisLine: { 178 axisLine: {
161 lineStyle: { 179 lineStyle: {
162 - width: 30, 180 + width: 20,
163 color: [ 181 color: [
  182 + [firstGradient, (getGradientValue(Gradient.FIRST, gradient) as string) || '#67e0e3'],
164 [ 183 [
165 - 0.3,  
166 - (getGradientValue(visualOptionField.FIRST_PHASE_COLOR, gradient) as string) ||  
167 - '#67e0e3',  
168 - ],  
169 - [  
170 - 0.7,  
171 - (getGradientValue(visualOptionField.SECOND_PHASE_COLOR, gradient) as string) ||  
172 - '#37a2da',  
173 - ],  
174 - [  
175 - 1,  
176 - (getGradientValue(visualOptionField.THIRD_PHASE_COLOR, gradient) as string) ||  
177 - '#fd666d', 184 + secondGradient,
  185 + (getGradientValue(Gradient.SECOND, gradient) as string) || '#37a2da',
178 ], 186 ],
  187 + [1, (getGradientValue(Gradient.THIRD, gradient) as string) || '#fd666d'],
179 ], 188 ],
180 }, 189 },
181 }, 190 },
@@ -187,6 +196,7 @@ export const instrumentComponent2 = (params?: { @@ -187,6 +196,7 @@ export const instrumentComponent2 = (params?: {
187 axisTick: { 196 axisTick: {
188 distance: -30, 197 distance: -30,
189 length: 8, 198 length: 8,
  199 + splitNumber: max / 100,
190 lineStyle: { 200 lineStyle: {
191 color: '#fff', 201 color: '#fff',
192 width: 2, 202 width: 2,
@@ -202,7 +212,7 @@ export const instrumentComponent2 = (params?: { @@ -202,7 +212,7 @@ export const instrumentComponent2 = (params?: {
202 }, 212 },
203 axisLabel: { 213 axisLabel: {
204 color: 'auto', 214 color: 'auto',
205 - distance: 35, 215 + distance: 22,
206 fontSize: 6, 216 fontSize: 6,
207 }, 217 },
208 detail: { 218 detail: {
@@ -221,12 +231,15 @@ export const instrumentComponent2 = (params?: { @@ -221,12 +231,15 @@ export const instrumentComponent2 = (params?: {
221 }; 231 };
222 }; 232 };
223 233
224 -export const getGradientValue = (key: GradientKey, record: GradientInfoRecord[]) => {  
225 - return record.find((item) => item.key === key)?.value; 234 +export const getGradientValue = (key: Gradient, record: GradientInfo[]) => {
  235 + return record.find((item) => item.key === key)?.color;
  236 +};
  237 +
  238 +export const getGradient = (key: Gradient, record: GradientInfo[]) => {
  239 + return record.find((item) => item.key === key);
226 }; 240 };
227 241
228 export const update_instrument_1_font = (radio: number) => { 242 export const update_instrument_1_font = (radio: number) => {
229 - console.log(fontSize({ radio, basic: 14 }));  
230 return { 243 return {
231 series: [ 244 series: [
232 { 245 {
@@ -242,7 +255,7 @@ export const update_instrument_1_font = (radio: number) => { @@ -242,7 +255,7 @@ export const update_instrument_1_font = (radio: number) => {
242 }; 255 };
243 256
244 export const update_instrument_2_font = (radio: number) => { 257 export const update_instrument_2_font = (radio: number) => {
245 - const axisLabelFontSize = fontSize({ radio, basic: 10, max: 25 }); 258 + const axisLabelFontSize = fontSize({ radio, basic: 10, max: 20 });
246 return { 259 return {
247 series: [ 260 series: [
248 { 261 {
@@ -257,14 +270,27 @@ export const update_instrument_2_font = (radio: number) => { @@ -257,14 +270,27 @@ export const update_instrument_2_font = (radio: number) => {
257 } as EChartsOption; 270 } as EChartsOption;
258 }; 271 };
259 272
  273 +function setGradientInfo(dataSource: DataSource) {
  274 + const componentInfo = dataSource.componentInfo;
  275 + return instrumentComponent2({
  276 + unit: componentInfo.unit,
  277 + value: 0,
  278 + gradient: componentInfo.gradientInfo,
  279 + });
  280 +}
  281 +
260 export const transformDashboardComponentConfig = ( 282 export const transformDashboardComponentConfig = (
261 config: DashboardComponentLayout, 283 config: DashboardComponentLayout,
262 record: DataComponentRecord, 284 record: DataComponentRecord,
263 dataSourceRecord: DataSource 285 dataSourceRecord: DataSource
264 ) => { 286 ) => {
  287 + let chartOption = config.chartOption;
  288 + if (config.componentType === 'instrument-component-2') {
  289 + chartOption = setGradientInfo(dataSourceRecord);
  290 + }
265 return { 291 return {
266 layout: { 292 layout: {
267 - chartOption: config.chartOption, 293 + chartOption: chartOption,
268 componentType: config.componentType, 294 componentType: config.componentType,
269 } as DashboardComponentLayout, 295 } as DashboardComponentLayout,
270 value: { 296 value: {
@@ -10,5 +10,5 @@ export interface DigitalDashBoardValue { @@ -10,5 +10,5 @@ export interface DigitalDashBoardValue {
10 name?: string; 10 name?: string;
11 updateTime?: string; 11 updateTime?: string;
12 value?: number; 12 value?: number;
13 - valueColor?: string; 13 + fontColor?: string;
14 } 14 }
@@ -82,7 +82,10 @@ @@ -82,7 +82,10 @@
82 </div> 82 </div>
83 </div> 83 </div>
84 <div v-if="getShowUpdate" class="text-center text-xs text-gray-400 truncate"> 84 <div v-if="getShowUpdate" class="text-center text-xs text-gray-400 truncate">
85 - <span :style="{ fontSize: fontSize({ radio: getRadio, basic: 12 }) }" class="truncate"> 85 + <span
  86 + :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
  87 + class="truncate"
  88 + >
86 更新时间: {{ props.value.updateTime }}</span 89 更新时间: {{ props.value.updateTime }}</span
87 > 90 >
88 </div> 91 </div>
@@ -25,7 +25,7 @@ @@ -25,7 +25,7 @@
25 <section class="widget"> 25 <section class="widget">
26 <slot name="header"></slot> 26 <slot name="header"></slot>
27 27
28 - <div class="widget-content"> 28 + <div class="widget-content" :style="{ height: slot.header ? 'calc(100% - 22px)' : '100%' }">
29 <div 29 <div
30 v-for="item in props.dataSource" 30 v-for="item in props.dataSource"
31 :key="item.id" 31 :key="item.id"
@@ -67,11 +67,11 @@ @@ -67,11 +67,11 @@
67 icon: value.icon || null, 67 icon: value.icon || null,
68 iconColor: value.iconColor || null, 68 iconColor: value.iconColor || null,
69 unit: value.unit || 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 - // ], 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 }; 75 };
76 }; 76 };
77 77
@@ -124,9 +124,11 @@ export const modeThree: FormSchema[] = [ @@ -124,9 +124,11 @@ export const modeThree: FormSchema[] = [
124 field: visualOptionField.SECOND_PHASE_VALUE, 124 field: visualOptionField.SECOND_PHASE_VALUE,
125 label: '二阶段阀值', 125 label: '二阶段阀值',
126 component: 'InputNumber', 126 component: 'InputNumber',
127 - componentProps: {  
128 - placeholder: '请输入二阶段阀值',  
129 - min: 0, 127 + componentProps: ({ formModel }) => {
  128 + return {
  129 + placeholder: '请输入二阶段阀值',
  130 + min: formModel[visualOptionField.FIRST_PHASE_VALUE],
  131 + };
130 }, 132 },
131 }, 133 },
132 { 134 {
@@ -139,9 +141,11 @@ export const modeThree: FormSchema[] = [ @@ -139,9 +141,11 @@ export const modeThree: FormSchema[] = [
139 field: visualOptionField.THIRD_PHASE_VALUE, 141 field: visualOptionField.THIRD_PHASE_VALUE,
140 label: '三阶段阀值', 142 label: '三阶段阀值',
141 component: 'InputNumber', 143 component: 'InputNumber',
142 - componentProps: {  
143 - placeholder: '请输入三阶段阀值',  
144 - min: 0, 144 + componentProps: ({ formModel }) => {
  145 + return {
  146 + placeholder: '请输入三阶段阀值',
  147 + min: formModel[visualOptionField.SECOND_PHASE_VALUE],
  148 + };
145 }, 149 },
146 }, 150 },
147 ]; 151 ];