fix(EC_hisotryView): 历史曲线优化

packages/base-components/BasicChart/src/utils/default.js

@@ -107,7 +107,7 @@ export const buildDefaultXAxis = (axis) => {
       },
     },
   };
-  if (axis.type === 'time') {
+  if (axis && axis.type === 'time') {
     cfg.axisLabel.formatter = {
       year: '{yyyy}',
       month: '{MM}月',

packages/extend-components/EC_HistoryView/src/EC_HistoryView.md

@@ -34,6 +34,8 @@ group:
 | --- | --- | --- | --- | --- |
 | grid | 是否为分组模式 | boolean | false | - |
 | title | 标题 | string | 指标曲线 | - |
+| defaultModel | 默认显示模式 | string | `curve` | `curve`/`table` |
+| showModels | 显示模式 | array | `['curve', 'table']` | `curve`/`table` |
 | defaultChecked | 默认选中自定义时间 key | string | `oneHour` | `oneHour`/`fourHour`/`twelveHours`/`roundClock`/`yesterday` |
 | tableProps | 表格其他 props | object | { } | - |
 | deviceParams | 设备参数信息 | array | - | - |

packages/extend-components/EC_HistoryView/src/demos/index.js

@@ -24,7 +24,7 @@ const deviceParams = [
 const Demo = () => {
   return (
     <div style={{ height: 700 }}>
-      <HistoryView deviceParams={deviceParams} />
+      <HistoryView deviceParams={deviceParams} defaultModel="table" />
     </div>
   );
 };

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

@@ -205,10 +205,10 @@ const HistoryView = (props) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('history-view');
 
-  const { title, grid, defaultChecked, tableProps, deviceParams } = props;
+  const { title, grid, defaultChecked, tableProps, deviceParams, defaultModel, showModels } = props;
 
   const [loading, setLoading] = useState(false);
-  const [activeTabKey, setActiveTabKey] = useState('curve');
+  const [activeTabKey, setActiveTabKey] = useState(defaultModel);
 
   // 时间模式: 自定义模式/同期对比模式
   const [timeValue, setTimeValue] = useState('customer');
@@ -414,7 +414,7 @@ const HistoryView = (props) => {
     const tableAccess = activeTabKey === 'table' && child.showInTable;
     const gridOptions = ['curveCenter'];
 
-    if (grid && gridOptions.indexOf(child.key) === -1) return null;
+    if (grid && curveAccess && gridOptions.indexOf(child.key) === -1) return null;
     return (
       (curveAccess || tableAccess) && (
         <>
@@ -435,13 +435,15 @@ const HistoryView = (props) => {
     return (
       <div className={classNames(`${prefixCls}-cover`)}>
         <div className={classNames(`${prefixCls}-label`)}>曲线设置</div>
-        {checkboxData.map((child) => (
-          <div key={child.key}>
-            {renderCheckbox(child)}
-            {/* {activeTabKey === 'curve' && child.key === 'curveCenter' && renderCheckbox(child)} */}
-            {/* {activeTabKey === 'table' && child.key !== 'curveCenter' && renderCheckbox(child)} */}
-          </div>
-        ))}
+        {checkboxData.map((child) => {
+          const box = renderCheckbox(child);
+          if (!box) return null;
+          return (
+            <div key={child.key} className={`${prefixCls}-cover-item`}>
+              {box}
+            </div>
+          );
+        })}
         {activeTabKey === 'table' && (
           <Select
             value={dataThinKey}
@@ -636,77 +638,99 @@ const HistoryView = (props) => {
     });
   }, [dateRange, dataConfig, deviceParams]);
 
+  const renderPanel = (model) => {
+    if (model === 'curve') {
+      return (
+        <>
+          <div className={`${prefixCls}-options`}>
+            {renderTimeOption()}
+            {renderCurveOption()}
+          </div>
+          <div className={`${prefixCls}-content`}>
+            {!chartDataSource.length ? (
+              <PandaEmpty />
+            ) : grid === true ? (
+              <GridChart
+                curveCenter={curveCenter}
+                prefixCls={prefixCls}
+                dataSource={chartDataSource}
+                contrast={timeValue === 'contrast'}
+                contrastOption={contrastOption}
+                deviceAlarmSchemes={deviceAlarmSchemes}
+              />
+            ) : (
+              <SimgleChart
+                curveCenter={curveCenter}
+                showGridLine={chartGrid}
+                prefixCls={prefixCls}
+                dataSource={chartDataSource}
+                contrast={timeValue === 'contrast'}
+                contrastOption={contrastOption}
+                deviceAlarmSchemes={deviceAlarmSchemes}
+              />
+            )}
+          </div>
+        </>
+      );
+    }
+    if (model === 'table') {
+      return (
+        <>
+          <div className={`${prefixCls}-options`}>
+            {renderTimeOption()}
+            {renderCurveOption()}
+          </div>
+          <div className={`${prefixCls}-content`}>
+            {chartDataSource.length > 0 ? (
+              <BasicTable
+                dataSource={tableData}
+                columns={columns}
+                {...tableProps}
+                pagination={false}
+                onChange={() => {}}
+              />
+            ) : (
+              <PandaEmpty />
+            )}
+          </div>
+        </>
+      );
+    }
+  };
+
   return (
     <div className={classNames(prefixCls)}>
       <Spin spinning={loading} wrapperClassName={classNames(`${prefixCls}-spin`)}>
-        <Tabs
-          activeKey={activeTabKey}
-          onChange={(key) => setActiveTabKey(key)}
-          centered
-          tabBarExtraContent={{
-            left: <h3>{title}</h3>,
-            right: (
-              <div className={`${prefixCls}-extra-right`}>
-                {/* {activeTabKey === 'table' && (
-                  <Button onClick={exportExcelBtn}>
-                    <DownloadOutlined />
-                    下载
-                  </Button>
-                )} */}
-              </div>
-            ),
-          }}
-        >
-          <Tabs.TabPane key="curve" tab="曲线">
-            <div className={`${prefixCls}-options`}>
-              {renderTimeOption()}
-              {renderCurveOption()}
-            </div>
-            <div className={`${prefixCls}-content`}>
-              {!chartDataSource.length ? (
-                <PandaEmpty />
-              ) : grid === true ? (
-                <GridChart
-                  curveCenter={curveCenter}
-                  prefixCls={prefixCls}
-                  dataSource={chartDataSource}
-                  contrast={timeValue === 'contrast'}
-                  contrastOption={contrastOption}
-                  deviceAlarmSchemes={deviceAlarmSchemes}
-                />
-              ) : (
-                <SimgleChart
-                  curveCenter={curveCenter}
-                  showGridLine={chartGrid}
-                  prefixCls={prefixCls}
-                  dataSource={chartDataSource}
-                  contrast={timeValue === 'contrast'}
-                  contrastOption={contrastOption}
-                  deviceAlarmSchemes={deviceAlarmSchemes}
-                />
-              )}
-            </div>
-          </Tabs.TabPane>
-          <Tabs.TabPane key="table" tab="表格">
-            <div className={`${prefixCls}-options`}>
-              {renderTimeOption()}
-              {renderCurveOption()}
-            </div>
-            <div className={`${prefixCls}-content`}>
-              {chartDataSource.length > 0 ? (
-                <BasicTable
-                  dataSource={tableData}
-                  columns={columns}
-                  {...tableProps}
-                  pagination={false}
-                  onChange={() => {}}
-                />
-              ) : (
-                <PandaEmpty />
-              )}
-            </div>
-          </Tabs.TabPane>
-        </Tabs>
+        {showModels.length === 1 && (
+          <div className={`${prefixCls}-single-panel`}>{renderPanel(showModels[0])}</div>
+        )}
+        {showModels.length > 1 && (
+          <Tabs
+            activeKey={activeTabKey}
+            onChange={(key) => setActiveTabKey(key)}
+            centered
+            tabBarExtraContent={{
+              left: <h3>{title}</h3>,
+              right: (
+                <div className={`${prefixCls}-extra-right`}>
+                  {/* {activeTabKey === 'table' && (
+                    <Button onClick={exportExcelBtn}>
+                      <DownloadOutlined />
+                      下载
+                    </Button>
+                  )} */}
+                </div>
+              ),
+            }}
+          >
+            <Tabs.TabPane key="curve" tab="曲线">
+              {renderPanel('curve')}
+            </Tabs.TabPane>
+            <Tabs.TabPane key="table" tab="表格">
+              {renderPanel('table')}
+            </Tabs.TabPane>
+          </Tabs>
+        )}
       </Spin>
     </div>
   );
@@ -731,6 +755,8 @@ HistoryView.propTypes = {
       pointAddressID: PropTypes.number, // 可选，配置了将会查询相关报警方案配置
     }),
   ),
+  defaultModel: PropTypes.oneOf(['curve', 'table']),
+  showModels: PropTypes.arrayOf(PropTypes.oneOf(['curve', 'table'])),
 };
 
 HistoryView.defaultProps = {
@@ -738,6 +764,8 @@ HistoryView.defaultProps = {
   title: '指标曲线',
   defaultChecked: 'oneHour',
   tableProps: {},
+  defaultModel: 'curve',
+  showModels: ['curve', 'table'],
 };
 
 export default HistoryView;

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

@@ -35,6 +35,12 @@
     height: 100%;
   }
 
+  .@{history-view}-single-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
   .@{ant-prefix}-tabs-tabpane-active {
     display: flex;
     flex-direction: column;
@@ -106,6 +112,10 @@
   display: flex;
   align-items: center;
   white-space: nowrap;
+
+  &-item {
+    margin-right: 8px;
+  }
 }
 
 .@{history-view}-content {