perf(views): 优化“设备工况”模块参数的历史数据曲线

src/types/index.ts

@@ -952,9 +952,16 @@ export interface DevWorkHisDataQuery {
 
 export interface DevWorkHistoryData {
   deviceId: number;
-  deviceParamMapList: {
+  hisVOS: DevWorkHistoryDataItem[];
+}
+
+export interface DevWorkHistoryDataItem {
+  deviceParamCode: string;
+  deviceParamName: string;
+  unit: string;
+  value: {
     time: string;
-    [key: string]: string | number;
+    value: string | number;
   }[];
 }
 

src/views/device-work-status/DevWorkParamData.vue

@@ -30,7 +30,7 @@ import type {
   TooltipComponentOption,
 } from 'echarts/components';
 import type { ComposeOption } from 'echarts/core';
-import type { OptionItem, RangeValue } from '@/types';
+import type { DevWorkHistoryDataItem, OptionItem, RangeValue } from '@/types';
 
 use([
   CanvasRenderer,
@@ -104,9 +104,25 @@ watch(visible, () => {
   }
 });
 
-const historyData = ref<Record<string, string | number>[]>([]);
+const historyData = ref<DevWorkHistoryDataItem[]>([]);
+
+const paramLabel = computed<string>(() => {
+  if (historyData.value.length) {
+    const { deviceParamName, unit } = historyData.value[0];
+    return `${deviceParamName}(${unit})`;
+  }
+
+  return '';
+});
 
 const option = computed<EChartsOption>(() => {
+  const source = convertToEChartsDataset();
+  const series = source[0].slice(1).map((name) => ({
+    type: 'line',
+    seriesLayoutBy: 'column',
+    name,
+  })) as LineSeriesOption;
+
   return {
     color: ['#32BAC0'],
     legend: {
@@ -117,8 +133,7 @@ const option = computed<EChartsOption>(() => {
       trigger: 'axis',
     },
     dataset: {
-      dimensions: ['time', ...props.paramCodes],
-      source: historyData.value,
+      source,
     },
     xAxis: {
       type: 'category',
@@ -149,10 +164,7 @@ const option = computed<EChartsOption>(() => {
         },
       },
     },
-    series: props.paramCodes.map((item) => ({
-      type: 'line',
-      name: item,
-    })),
+    series,
     grid: {
       top: 10,
       right: 0,
@@ -173,13 +185,51 @@ const getParamHistoryData = () => {
     });
 
     if (data.length) {
-      historyData.value = data[0].deviceParamMapList;
+      historyData.value = data[0].hisVOS;
     } else {
       historyData.value = [];
     }
   });
 };
 
+type EChartsDatasetItemValue = string | number | null;
+
+const convertToEChartsDataset = () => {
+  const times: string[] = [];
+  const dataMap: Record<string, { time: string; value: string | number }[]> = {};
+
+  historyData.value.forEach((item) => {
+    const paramName = item.deviceParamName;
+    dataMap[paramName] = [];
+
+    item.value.forEach((val) => {
+      if (!times.includes(val.time)) {
+        times.push(val.time);
+      }
+
+      dataMap[paramName].push({
+        time: val.time,
+        value: val.value,
+      });
+    });
+  });
+
+  const source: EChartsDatasetItemValue[][] = [['time', ...Object.keys(dataMap)]];
+
+  times.forEach((time) => {
+    const row: EChartsDatasetItemValue[] = [time];
+
+    Object.values(dataMap).forEach((values) => {
+      const found = values.find((v) => v.time === time);
+      row.push(found ? found.value : null);
+    });
+
+    source.push(row);
+  });
+
+  return source;
+};
+
 const handleClose = () => {
   historyData.value = [];
   currTimeRangePreset.value = TimeRangePreset.recent1Day;
@@ -223,7 +273,7 @@ defineExpose({
         </template>
       </ARangePicker>
     </div>
-    <span class="param-name-unit">{{ '制冷量(kw)' }}</span>
+    <div class="param-name-unit">{{ paramLabel }}</div>
     <VChart class="param-data-chart" :option="option" />
   </AModal>
 </template>
@@ -275,6 +325,7 @@ defineExpose({
 }
 
 .param-name-unit {
+  height: 17px;
   margin-left: 24px;
   font-size: 12px;
   line-height: 17px;