列车曲线图调整

src/components/line-app/infos/TrainInfo.vue

@@ -118,7 +118,7 @@ const list2: DynamicKeyType[] = [
   { label: '尾车速传2速度值', key: 'tailSensorSpeed2', formatFn: speedFormat },
   { label: '头车雷达速度值', key: 'headRadarSpeed', formatFn: speedFormat },
   { label: '尾车雷达速度值', key: 'tailRadarSpeed', formatFn: speedFormat },
-  { label: '加速', key: 'acceleration', formatFn: accelerationFormat },
+  { label: '加速度', key: 'acceleration', formatFn: accelerationFormat },
 ];
 const list3: VobcStateType[] = [
   // 动力学信息
@@ -192,7 +192,7 @@ function slopeFormat(v: number) {
 }
 function resistanceFormat(v: number) {
   const n = floatDecimal(v);
-  return `${n} KN`;
+  return `${n} kn`;
 }
 function speedFormat(v: number) {
   let n: string | number = '';
@@ -218,7 +218,7 @@ function floatDecimal(v: number, x = 2) {
 
 function tractionForceFormat(v: number) {
   const n = floatDecimal(v / 100);
-  return `${n} KN`;
+  return `${n} kn`;
 }
 function trainLoadFormat(v: number) {
   const n = floatDecimal(v / 100);

src/components/line-app/infos/TrainInfoEcharts.vue

@@ -59,6 +59,37 @@ function getDataList() {
   });
 }
 
+let series = [
+  {
+    name: '速度',
+    type: 'line',
+    showSymbol: false,
+    data: speedList,
+    unit: 'km/h',
+  },
+  {
+    name: '加速度',
+    type: 'line',
+    showSymbol: false,
+    data: accelerationList,
+    unit: 'm/s',
+  },
+  {
+    name: '牵引力',
+    type: 'line',
+    showSymbol: false,
+    data: tractionForceList,
+    unit: 'kn',
+  },
+  {
+    name: '制动力',
+    type: 'line',
+    showSymbol: false,
+    data: brakeForceList,
+    unit: 'kn',
+  },
+];
+
 let myChart: echarts.EChartsType;
 function initEcharts() {
   const dom = document.getElementById('train-echarts');
@@ -73,7 +104,53 @@ function initEcharts() {
     },
     tooltip: {
       trigger: 'axis',
-      valueFormatter: (value: number) => value.toFixed(2),
+      formatter: function (params: any) {
+        let title = params[0].axisValueLabel;
+        let result = `<div
+                  style="height:100%;
+                  min-height:${30 + 28 * params.length}px;
+                  width: 200px;
+                  background: rgba(255, 255, 255, 0.27);
+                  "
+                >
+                <div
+                  style="width: 100%;
+                    height: 30px;
+                    padding-left:10px;
+                    font-size: 14px;
+                    line-height: 30px;
+                  "
+                >
+                  ${title}
+                </div>
+                <div
+                  style="
+                      height: 100%;
+                      padding-left:10px;
+                      width: 100%;
+                      border-radius: 3px;
+                  "
+                >
+              `;
+        params.forEach((item: any, index: number) => {
+          result +=
+            "<div style='height: 28px;line-height:28px'>" +
+            '<span style="display:inline-block;margin-right:5px;border-radius:20px;width:10px;height:10px;background-color:' +
+            item.color +
+            '"></span>' +
+            item.seriesName +
+            ' : ' +
+            '<span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:bold">' +
+            item.value[1].toFixed(2) +
+            ' ' +
+            series[index].unit +
+            '</span>' +
+            '<div style="clear:both"></div>' +
+            '</div>';
+        });
+        result += '</div>';
+        return result;
+      },
     },
     legend: {
       data: ['速度', '加速度', '牵引力', '制动力'],
@@ -90,32 +167,7 @@ function initEcharts() {
       type: 'value',
       boundaryGap: [0, '100%'],
     },
-    series: [
+    series: series,
-      {
-        name: '速度',
-        type: 'line',
-        showSymbol: false,
-        data: speedList,
-      },
-      {
-        name: '加速度',
-        type: 'line',
-        showSymbol: false,
-        data: accelerationList,
-      },
-      {
-        name: '牵引力',
-        type: 'line',
-        showSymbol: false,
-        data: tractionForceList,
-      },
-      {
-        name: '制动力',
-        type: 'line',
-        showSymbol: false,
-        data: brakeForceList,
-      },
-    ],
   };
 
   myChart.setOption(option);