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]; |