fix(EC_HistoryView): 优化历史曲线缺省页显示

packages/extend-components/EC_HistoryView/src/GridChart.js

 import React, { memo, useMemo } from 'react';
 import _ from 'lodash';
 import { BasicChart } from '@wisdom-components/basicchart';
+import PandaEmpty from '@wisdom-components/empty';
 import optionGenerator from './utils';
 
+const ChartTitle = ({ prefixCls }) => {
+  const cls = `${prefixCls}-grid-item-title`;
+  return (
+    <div className={cls}>
+      <span className={`${cls}_text`}>进水压力</span>
+      <span className={`${cls}_unit`}>（单位：MPa）</span>
+    </div>
+  );
+};
+
 const GridChart = memo((props) => {
   const {
     dataSource,
@@ -39,7 +50,8 @@ const GridChart = memo((props) => {
       const cusOption = {
         title: {
           show: true,
-          text: `{prefix|}{t|${sensorName}}${unit ? '{suffix|（单位：' + unit + '）}' : ''}`,
+          // text: `{prefix|}{t|${sensorName}}${unit ? '{suffix|（单位：' + unit + '）}' : ''}`,
+          text: ' ',
           textStyle: {
             width: 200,
             overflow: 'truncate',
@@ -68,13 +80,27 @@ const GridChart = memo((props) => {
 
   return (
     <div className={`${prefixCls}-grid`}>
-      {options.map((item) => (
-        <div key={item.key} className={`${prefixCls}-grid-item`}>
-          <div className={`${prefixCls}-grid-item-wrap`}>
-            <BasicChart style={{ width: '100%', height: '100%' }} option={item.option} notMerge />
+      {options.map((item) => {
+        const isEmpty =
+          !item.option.series.length ||
+          !item.option.series.find((e) => e.data && e.data.length > 0);
+        return (
+          <div key={item.key} className={`${prefixCls}-grid-item`}>
+            <div className={`${prefixCls}-grid-item-wrap`}>
+              <ChartTitle prefixCls={prefixCls} />
+              {isEmpty ? (
+                <PandaEmpty />
+              ) : (
+                <BasicChart
+                  style={{ width: '100%', height: '100%' }}
+                  option={item.option}
+                  notMerge
+                />
+              )}
+            </div>
           </div>
-        </div>
-      ))}
+        );
+      })}
     </div>
   );
 });

packages/extend-components/EC_HistoryView/src/SingleChart.js

 import React, { memo, useEffect, useMemo, useRef } from 'react';
 import { BasicChart } from '@wisdom-components/basicchart';
+import PandaEmpty from '@wisdom-components/empty';
 import optionGenerator from './utils';
 
 const SimgleChart = memo((props) => {
@@ -24,7 +25,18 @@ const SimgleChart = memo((props) => {
     chartRef.current?.resize?.();
   }, []);
 
-  return (
+  // 数据都为空显示缺省页
+  const isEmpty = useMemo(
+    () =>
+      !dataSource ||
+      !dataSource.length ||
+      !dataSource.find((e) => e.dataModel && e.dataModel.length > 0),
+    [dataSource],
+  );
+
+  return isEmpty ? (
+    <PandaEmpty />
+  ) : (
     <BasicChart ref={chartRef} option={option} notMerge style={{ width: '100%', height: '100%' }} />
   );
 });

packages/extend-components/EC_HistoryView/src/index.less

@@ -129,10 +129,49 @@
     width: 50%;
     height: 50%;
     padding: 4px;
+
+    &-title {
+      position: absolute;
+      top: 16px;
+      left: 20px;
+      z-index: 2;
+      max-width: 200px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      &::before {
+        display: inline-block;
+        width: 5px;
+        height: 16px;
+        vertical-align: -0.2em;
+        background-color: #1685ff;
+        content: '';
+      }
+
+      &_text {
+        padding-left: 10px;
+        color: '#333333';
+        font-weight: bold;
+        font-size: 15px;
+        font-family: 'Microsoft YaHei';
+      }
+
+      &_unit {
+        padding-left: 5px;
+        color: #999999;
+        font-size: 12px;
+      }
+    }
   }
 
   &-item-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     height: 100%;
+    overflow: hidden;
     background-color: #fff;
     border-radius: 4px;
   }