Commit 4ba5ef5377502f5132f7fb5ca8da0ee716296468

Authored by ww
1 parent 8c8d92d4

fix: chart not correct render font color

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