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,6 +26,10 @@ enum DataComponentUrl { | ||
26 | UPDATE_DATA_COMPONENT = '/data_component', | 26 | UPDATE_DATA_COMPONENT = '/data_component', |
27 | } | 27 | } |
28 | 28 | ||
29 | +enum DeviceUrl { | ||
30 | + GET_DEVICE = '/device/list', | ||
31 | +} | ||
32 | + | ||
29 | /** | 33 | /** |
30 | * @description 获取数据看板 | 34 | * @description 获取数据看板 |
31 | * @param params | 35 | * @param params |
@@ -132,3 +136,15 @@ export const updateDataComponent = (params: UpdateDataComponentParams) => { | @@ -132,3 +136,15 @@ export const updateDataComponent = (params: UpdateDataComponentParams) => { | ||
132 | params: params.record, | 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,7 +36,11 @@ export interface DashboardComponentLayout { | ||
36 | componentType: InstrumentComponentType; | 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 | const { value = 10, unit = '°C' } = params || {}; | 44 | const { value = 10, unit = '°C' } = params || {}; |
41 | return { | 45 | return { |
42 | series: [ | 46 | series: [ |
@@ -98,8 +102,8 @@ export const instrumentComponent1 = (params?: { value: number; unit: string }): | @@ -98,8 +102,8 @@ export const instrumentComponent1 = (params?: { value: number; unit: string }): | ||
98 | offsetCenter: [0, '-15%'], | 102 | offsetCenter: [0, '-15%'], |
99 | // fontSize: 16, | 103 | // fontSize: 16, |
100 | fontWeight: 'bolder', | 104 | fontWeight: 'bolder', |
101 | - formatter: `{value} ${unit}`, | ||
102 | - color: 'inherit', | 105 | + formatter: `{value} ${unit ?? '°C'}`, |
106 | + color: params?.fontColor || 'inherit', | ||
103 | }, | 107 | }, |
104 | data: [ | 108 | data: [ |
105 | { | 109 | { |
@@ -153,6 +157,7 @@ export const instrumentComponent2 = (params?: { | @@ -153,6 +157,7 @@ export const instrumentComponent2 = (params?: { | ||
153 | gradient: GradientInfo[]; | 157 | gradient: GradientInfo[]; |
154 | value: number; | 158 | value: number; |
155 | unit: string; | 159 | unit: string; |
160 | + fontColor: string; | ||
156 | }): EChartsOption => { | 161 | }): EChartsOption => { |
157 | const { gradient = [], value = 0, unit = 'km/h' } = params || {}; | 162 | const { gradient = [], value = 0, unit = 'km/h' } = params || {}; |
158 | const firstRecord = getGradient(Gradient.FIRST, gradient); | 163 | const firstRecord = getGradient(Gradient.FIRST, gradient); |
@@ -212,7 +217,7 @@ export const instrumentComponent2 = (params?: { | @@ -212,7 +217,7 @@ export const instrumentComponent2 = (params?: { | ||
212 | detail: { | 217 | detail: { |
213 | valueAnimation: true, | 218 | valueAnimation: true, |
214 | formatter: `{value} ${unit}`, | 219 | formatter: `{value} ${unit}`, |
215 | - color: 'inherit', | 220 | + color: params?.fontColor || 'inherit', |
216 | fontSize: 14, | 221 | fontSize: 14, |
217 | }, | 222 | }, |
218 | data: [ | 223 | data: [ |
@@ -291,6 +296,7 @@ function setGradientInfo(dataSource: DataSource) { | @@ -291,6 +296,7 @@ function setGradientInfo(dataSource: DataSource) { | ||
291 | unit: componentInfo.unit, | 296 | unit: componentInfo.unit, |
292 | value: 0, | 297 | value: 0, |
293 | gradient: componentInfo.gradientInfo, | 298 | gradient: componentInfo.gradientInfo, |
299 | + fontColor: componentInfo.fontColor, | ||
294 | }); | 300 | }); |
295 | } | 301 | } |
296 | 302 | ||
@@ -303,6 +309,14 @@ export const transformDashboardComponentConfig = ( | @@ -303,6 +309,14 @@ export const transformDashboardComponentConfig = ( | ||
303 | if (config.componentType === 'instrument-component-2') { | 309 | if (config.componentType === 'instrument-component-2') { |
304 | chartOption = setGradientInfo(dataSourceRecord); | 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 | return { | 320 | return { |
307 | layout: { | 321 | layout: { |
308 | chartOption: chartOption, | 322 | chartOption: chartOption, |
@@ -217,4 +217,8 @@ | @@ -217,4 +217,8 @@ | ||
217 | .data-source-form:deep(.ant-row) { | 217 | .data-source-form:deep(.ant-row) { |
218 | width: 100%; | 218 | width: 100%; |
219 | } | 219 | } |
220 | + | ||
221 | + .data-source-form:deep(.ant-form-item-control-input-content > div > div) { | ||
222 | + width: 100%; | ||
223 | + } | ||
220 | </style> | 224 | </style> |
1 | -import { byOganizationIdGetMasterDevice, getAttribute } from '/@/api/ruleengine/ruleengineApi'; | 1 | +import { getAllAvailableDeviceByOrgId } from '/@/api/dataBoard'; |
2 | +import { getAttribute } from '/@/api/ruleengine/ruleengineApi'; | ||
2 | import { getOrganizationList } from '/@/api/system/system'; | 3 | import { getOrganizationList } from '/@/api/system/system'; |
3 | import { FormSchema } from '/@/components/Form'; | 4 | import { FormSchema } from '/@/components/Form'; |
4 | import { copyTransFun } from '/@/utils/fnUtils'; | 5 | import { copyTransFun } from '/@/utils/fnUtils'; |
@@ -43,7 +44,7 @@ export const dataSourceSchema: FormSchema[] = [ | @@ -43,7 +44,7 @@ export const dataSourceSchema: FormSchema[] = [ | ||
43 | return data; | 44 | return data; |
44 | }, | 45 | }, |
45 | onChange() { | 46 | onChange() { |
46 | - setFieldsValue({ device: null, attr: null }); | 47 | + setFieldsValue({ deviceId: null, attribute: null }); |
47 | }, | 48 | }, |
48 | getPopupContainer: () => document.body, | 49 | getPopupContainer: () => document.body, |
49 | }; | 50 | }; |
@@ -61,14 +62,14 @@ export const dataSourceSchema: FormSchema[] = [ | @@ -61,14 +62,14 @@ export const dataSourceSchema: FormSchema[] = [ | ||
61 | api: async () => { | 62 | api: async () => { |
62 | if (orgId) { | 63 | if (orgId) { |
63 | const [, data] = await to<Record<'id' | 'name', string>[]>( | 64 | const [, data] = await to<Record<'id' | 'name', string>[]>( |
64 | - byOganizationIdGetMasterDevice(orgId) | 65 | + getAllAvailableDeviceByOrgId(orgId) |
65 | ); | 66 | ); |
66 | if (data) return data.map((item) => ({ label: item.name, value: item.id })); | 67 | if (data) return data.map((item) => ({ label: item.name, value: item.id })); |
67 | } | 68 | } |
68 | return []; | 69 | return []; |
69 | }, | 70 | }, |
70 | onChange() { | 71 | onChange() { |
71 | - setFieldsValue({ attr: null }); | 72 | + setFieldsValue({ attribute: null }); |
72 | }, | 73 | }, |
73 | placeholder: '请选择设备', | 74 | placeholder: '请选择设备', |
74 | getPopupContainer: () => document.body, | 75 | getPopupContainer: () => document.body, |
@@ -57,7 +57,7 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) { | @@ -57,7 +57,7 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) { | ||
57 | server: `${import.meta.env.VITE_WEB_SOCKET}${token}`, | 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 | const getNeedUpdateValueByIndex = (recordIndex: number, dataSourceIndex: number) => { | 62 | const getNeedUpdateValueByIndex = (recordIndex: number, dataSourceIndex: number) => { |
63 | return unref(dataSourceRef)[recordIndex].record.dataSource[dataSourceIndex]; | 63 | return unref(dataSourceRef)[recordIndex].record.dataSource[dataSourceIndex]; |