perf(views): 优化“设备工况”页面

1. 支持显示冷水主机 COP 值
2. 优化设备参数曲线的显示

src/constants/device-params.ts

@@ -35,6 +35,7 @@ export const enum DevParamCoolingPump {
  * 冷水主机设备参数
  */
 export const enum DevParamChillerUnit {
+  COP = 'COP',
   制冷量 = 'chillerUnitCoolingCapacity',
   有功功率 = 'outputActivePower',
   负载率 = 'loadRatio',

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

@@ -19,7 +19,7 @@ import { useRequest } from '@/hooks/request';
 import { useViewVisible } from '@/hooks/view-visible';
 import { t } from '@/i18n';
 import { getDevWorkHistoryData } from '@/api';
-import { getEChartsColors } from '@/utils';
+import { getEChartsColors, timeSorter } from '@/utils';
 import { TimeRangePreset } from '@/constants';
 
 import type { Dayjs } from 'dayjs';
@@ -118,6 +118,7 @@ const paramLabel = computed<string>(() => {
 });
 
 const option = computed<EChartsOption>(() => {
+  const unitText = historyData.value[0]?.unit ?? '';
   const source = convertToEChartsDataset();
   const series = source[0].slice(1).map((name) => ({
     type: 'line',
@@ -133,6 +134,21 @@ const option = computed<EChartsOption>(() => {
     tooltip: {
       show: true,
       trigger: 'axis',
+      formatter(params) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const tempParms = params as any[];
+        const time = dayjs(tempParms[0].axisValue).format('MM-DD HH:mm');
+
+        let tableHtml = '<table class="echarts-tooltip-electricity">';
+        tableHtml += `<tr><th>${time}</th></tr>`;
+
+        tempParms.forEach((param) => {
+          tableHtml += `<tr><td>${param.marker}${param.seriesName}</td><td>${param.value[1]}${unitText}</td></tr>`;
+        });
+
+        tableHtml += '</table>';
+        return tableHtml;
+      },
     },
     dataset: {
       source,
@@ -147,6 +163,7 @@ const option = computed<EChartsOption>(() => {
       },
       axisLabel: {
         color: '#999',
+        fontSize: 10,
         formatter(value) {
           return dayjs(value).format('MM-DD HH:mm');
         },
@@ -158,6 +175,7 @@ const option = computed<EChartsOption>(() => {
     yAxis: {
       axisLabel: {
         color: '#999',
+        fontSize: 10,
       },
       splitLine: {
         lineStyle: {
@@ -171,7 +189,8 @@ const option = computed<EChartsOption>(() => {
       top: 10,
       right: 0,
       bottom: 20,
-      left: 30,
+      left: 0,
+      containLabel: true,
     },
   };
 });
@@ -217,6 +236,7 @@ const convertToEChartsDataset = () => {
   });
 
   const source: EChartsDatasetItemValue[][] = [['time', ...Object.keys(dataMap)]];
+  times.sort(timeSorter);
 
   times.forEach((time) => {
     const row: EChartsDatasetItemValue[] = [time];

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

@@ -7,7 +7,7 @@ import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
 import { getDevWorkRealTimeData, getDevWorkTypeCount, queryDevicesList } from '@/api';
 import { DeviceRunningStatus, DeviceStatusQuery } from '@/constants';
-import { DevParamCtrlCabinet } from '@/constants/device-params';
+import { DevParamChillerUnit, DevParamCtrlCabinet } from '@/constants/device-params';
 
 import { deviceCardData, DeviceType } from './device-card';
 import DeviceWorkParams from './DeviceWorkParams.vue';
@@ -216,10 +216,17 @@ const handleDevCardClick = (devId: number, e: Event) => {
               >
                 {{ deviceRealTimeData[item.id][DevParamCtrlCabinet.系统控制模式设定] }}
               </div>
-              <!-- <template v-if="activeDeviceType === DeviceType.冷水主机">
-                <div class="device-cop-value">5.17</div>
-                <div class="device-cop-level">中</div>
-              </template> -->
+              <template
+                v-if="
+                  activeDeviceType === DeviceType.冷水主机 &&
+                  deviceRealTimeData[item.id]?.[DevParamChillerUnit.COP] !== undefined
+                "
+              >
+                <div class="device-cop-value">
+                  {{ deviceRealTimeData[item.id][DevParamChillerUnit.COP] }}
+                </div>
+                <!-- <div class="device-cop-level">中</div> -->
+              </template>
               <span class="device-card-header-time">{{ deviceRealTimeData[item.id]?.time }}</span>
               <SvgIcon class="device-card-header-button" name="adjustment" @click="viewDevParam(item.id, $event)" />
             </div>

src/views/device-work-status/device-card/index.ts

@@ -91,6 +91,7 @@ export const deviceCardData: DeviceCardData = {
   [DeviceType.冷水主机]: {
     component: ChillerUnit,
     paramCodes: [
+      DevParamChillerUnit.COP,
       DevParamChillerUnit.制冷量,
       DevParamChillerUnit.有功功率,
       DevParamChillerUnit.负载率,