Commit 4ba5ef5377502f5132f7fb5ca8da0ee716296468
1 parent
8c8d92d4
fix: chart not correct render font color
Showing
5 changed files
with
44 additions
and
9 deletions
... | ... | @@ -26,6 +26,10 @@ enum DataComponentUrl { |
26 | 26 | UPDATE_DATA_COMPONENT = '/data_component', |
27 | 27 | } |
28 | 28 | |
29 | +enum DeviceUrl { | |
30 | + GET_DEVICE = '/device/list', | |
31 | +} | |
32 | + | |
29 | 33 | /** |
30 | 34 | * @description 获取数据看板 |
31 | 35 | * @param params |
... | ... | @@ -132,3 +136,15 @@ export const updateDataComponent = (params: UpdateDataComponentParams) => { |
132 | 136 | params: params.record, |
133 | 137 | }); |
134 | 138 | }; |
139 | + | |
140 | +/** | |
141 | + * @description 获取所有设备 | |
142 | + * @param params | |
143 | + * @returns | |
144 | + */ | |
145 | +export const getAllAvailableDeviceByOrgId = (params: string) => { | |
146 | + return defHttp.get({ | |
147 | + url: `${DeviceUrl.GET_DEVICE}/DIRECT_CONNECTION`, | |
148 | + params: { organizationId: params }, | |
149 | + }); | |
150 | +}; | ... | ... |
... | ... | @@ -36,7 +36,11 @@ export interface DashboardComponentLayout { |
36 | 36 | componentType: InstrumentComponentType; |
37 | 37 | } |
38 | 38 | |
39 | -export const instrumentComponent1 = (params?: { value: number; unit: string }): EChartsOption => { | |
39 | +export const instrumentComponent1 = (params?: { | |
40 | + value: number; | |
41 | + unit: string; | |
42 | + fontColor: string; | |
43 | +}): EChartsOption => { | |
40 | 44 | const { value = 10, unit = '°C' } = params || {}; |
41 | 45 | return { |
42 | 46 | series: [ |
... | ... | @@ -98,8 +102,8 @@ export const instrumentComponent1 = (params?: { value: number; unit: string }): |
98 | 102 | offsetCenter: [0, '-15%'], |
99 | 103 | // fontSize: 16, |
100 | 104 | fontWeight: 'bolder', |
101 | - formatter: `{value} ${unit}`, | |
102 | - color: 'inherit', | |
105 | + formatter: `{value} ${unit ?? '°C'}`, | |
106 | + color: params?.fontColor || 'inherit', | |
103 | 107 | }, |
104 | 108 | data: [ |
105 | 109 | { |
... | ... | @@ -153,6 +157,7 @@ export const instrumentComponent2 = (params?: { |
153 | 157 | gradient: GradientInfo[]; |
154 | 158 | value: number; |
155 | 159 | unit: string; |
160 | + fontColor: string; | |
156 | 161 | }): EChartsOption => { |
157 | 162 | const { gradient = [], value = 0, unit = 'km/h' } = params || {}; |
158 | 163 | const firstRecord = getGradient(Gradient.FIRST, gradient); |
... | ... | @@ -212,7 +217,7 @@ export const instrumentComponent2 = (params?: { |
212 | 217 | detail: { |
213 | 218 | valueAnimation: true, |
214 | 219 | formatter: `{value} ${unit}`, |
215 | - color: 'inherit', | |
220 | + color: params?.fontColor || 'inherit', | |
216 | 221 | fontSize: 14, |
217 | 222 | }, |
218 | 223 | data: [ |
... | ... | @@ -291,6 +296,7 @@ function setGradientInfo(dataSource: DataSource) { |
291 | 296 | unit: componentInfo.unit, |
292 | 297 | value: 0, |
293 | 298 | gradient: componentInfo.gradientInfo, |
299 | + fontColor: componentInfo.fontColor, | |
294 | 300 | }); |
295 | 301 | } |
296 | 302 | |
... | ... | @@ -303,6 +309,14 @@ export const transformDashboardComponentConfig = ( |
303 | 309 | if (config.componentType === 'instrument-component-2') { |
304 | 310 | chartOption = setGradientInfo(dataSourceRecord); |
305 | 311 | } |
312 | + if (config.componentType === 'instrument-component-1') { | |
313 | + const componentInfo = dataSourceRecord.componentInfo; | |
314 | + chartOption = instrumentComponent1({ | |
315 | + unit: componentInfo.unit, | |
316 | + value: 0, | |
317 | + fontColor: componentInfo.fontColor, | |
318 | + }); | |
319 | + } | |
306 | 320 | return { |
307 | 321 | layout: { |
308 | 322 | chartOption: chartOption, | ... | ... |
1 | -import { byOganizationIdGetMasterDevice, getAttribute } from '/@/api/ruleengine/ruleengineApi'; | |
1 | +import { getAllAvailableDeviceByOrgId } from '/@/api/dataBoard'; | |
2 | +import { getAttribute } from '/@/api/ruleengine/ruleengineApi'; | |
2 | 3 | import { getOrganizationList } from '/@/api/system/system'; |
3 | 4 | import { FormSchema } from '/@/components/Form'; |
4 | 5 | import { copyTransFun } from '/@/utils/fnUtils'; |
... | ... | @@ -43,7 +44,7 @@ export const dataSourceSchema: FormSchema[] = [ |
43 | 44 | return data; |
44 | 45 | }, |
45 | 46 | onChange() { |
46 | - setFieldsValue({ device: null, attr: null }); | |
47 | + setFieldsValue({ deviceId: null, attribute: null }); | |
47 | 48 | }, |
48 | 49 | getPopupContainer: () => document.body, |
49 | 50 | }; |
... | ... | @@ -61,14 +62,14 @@ export const dataSourceSchema: FormSchema[] = [ |
61 | 62 | api: async () => { |
62 | 63 | if (orgId) { |
63 | 64 | const [, data] = await to<Record<'id' | 'name', string>[]>( |
64 | - byOganizationIdGetMasterDevice(orgId) | |
65 | + getAllAvailableDeviceByOrgId(orgId) | |
65 | 66 | ); |
66 | 67 | if (data) return data.map((item) => ({ label: item.name, value: item.id })); |
67 | 68 | } |
68 | 69 | return []; |
69 | 70 | }, |
70 | 71 | onChange() { |
71 | - setFieldsValue({ attr: null }); | |
72 | + setFieldsValue({ attribute: null }); | |
72 | 73 | }, |
73 | 74 | placeholder: '请选择设备', |
74 | 75 | getPopupContainer: () => document.body, | ... | ... |
... | ... | @@ -57,7 +57,7 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) { |
57 | 57 | server: `${import.meta.env.VITE_WEB_SOCKET}${token}`, |
58 | 58 | }; |
59 | 59 | |
60 | - const getNeedUpdateValueById = (componentId: string, deviceId: string) => {}; | |
60 | + // const getNeedUpdateValueById = (componentId: string, deviceId: string) => {}; | |
61 | 61 | |
62 | 62 | const getNeedUpdateValueByIndex = (recordIndex: number, dataSourceIndex: number) => { |
63 | 63 | return unref(dataSourceRef)[recordIndex].record.dataSource[dataSourceIndex]; | ... | ... |