Skip to content

W
wisdom-components
Commit 8d167bbb authored by 崔佳豪's avatar 崔佳豪
Browse files
Options

fix(EC_hisotryView): 历史曲线优化

- 优化曲线表格配置项显示 - 添加默认显示模式配置 - 添加显示模式配置, 支持显示一种面板
parent c00464af
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 80 deletions
packages/base-components/BasicChart/src/utils/default.js
View file @ 8d167bbb
...@@ -107,7 +107,7 @@ export const buildDefaultXAxis = (axis) => { ...@@ -107,7 +107,7 @@ export const buildDefaultXAxis = (axis) => {
}, },
}, },
}; };
if (axis.type === 'time') { if (axis && axis.type === 'time') {
cfg.axisLabel.formatter = { cfg.axisLabel.formatter = {
year: '{yyyy}', year: '{yyyy}',
month: '{MM}月', month: '{MM}月',
......
packages/extend-components/EC_HistoryView/src/EC_HistoryView.md
View file @ 8d167bbb
...@@ -34,6 +34,8 @@ group: ...@@ -34,6 +34,8 @@ group:
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| grid | 是否为分组模式 | boolean | false | - | | grid | 是否为分组模式 | boolean | false | - |
| title | 标题 | string | 指标曲线 | - | | title | 标题 | string | 指标曲线 | - |
| defaultModel | 默认显示模式 | string | `curve` | `curve`/`table` |
| showModels | 显示模式 | array | `['curve', 'table']` | `curve`/`table` |
| defaultChecked | 默认选中自定义时间 key | string | `oneHour` | `oneHour`/`fourHour`/`twelveHours`/`roundClock`/`yesterday` | | defaultChecked | 默认选中自定义时间 key | string | `oneHour` | `oneHour`/`fourHour`/`twelveHours`/`roundClock`/`yesterday` |
| tableProps | 表格其他 props | object | { } | - | | tableProps | 表格其他 props | object | { } | - |
| deviceParams | 设备参数信息 | array | - | - | | deviceParams | 设备参数信息 | array | - | - |
......
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @ 8d167bbb
...@@ -24,7 +24,7 @@ const deviceParams = [ ...@@ -24,7 +24,7 @@ const deviceParams = [
const Demo = () => { const Demo = () => {
return ( return (
<div style={{ height: 700 }}> <div style={{ height: 700 }}>
<HistoryView deviceParams={deviceParams} /> <HistoryView deviceParams={deviceParams} defaultModel="table" />
</div> </div>
); );
}; };
......
packages/extend-components/EC_HistoryView/src/index.js
View file @ 8d167bbb
...@@ -205,10 +205,10 @@ const HistoryView = (props) => { ...@@ -205,10 +205,10 @@ const HistoryView = (props) => {
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('history-view'); 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 [loading, setLoading] = useState(false);
const [activeTabKey, setActiveTabKey] = useState('curve'); const [activeTabKey, setActiveTabKey] = useState(defaultModel);
// 时间模式: 自定义模式/同期对比模式 // 时间模式: 自定义模式/同期对比模式
const [timeValue, setTimeValue] = useState('customer'); const [timeValue, setTimeValue] = useState('customer');
...@@ -414,7 +414,7 @@ const HistoryView = (props) => { ...@@ -414,7 +414,7 @@ const HistoryView = (props) => {
const tableAccess = activeTabKey === 'table' && child.showInTable; const tableAccess = activeTabKey === 'table' && child.showInTable;
const gridOptions = ['curveCenter']; const gridOptions = ['curveCenter'];
if (grid && gridOptions.indexOf(child.key) === -1) return null; if (grid && curveAccess && gridOptions.indexOf(child.key) === -1) return null;
return ( return (
(curveAccess || tableAccess) && ( (curveAccess || tableAccess) && (
<> <>
...@@ -435,13 +435,15 @@ const HistoryView = (props) => { ...@@ -435,13 +435,15 @@ const HistoryView = (props) => {
return ( return (
<div className={classNames(`${prefixCls}-cover`)}> <div className={classNames(`${prefixCls}-cover`)}>
<div className={classNames(`${prefixCls}-label`)}>曲线设置</div> <div className={classNames(`${prefixCls}-label`)}>曲线设置</div>
{checkboxData.map((child) => ( {checkboxData.map((child) => {
<div key={child.key}> const box = renderCheckbox(child);
{renderCheckbox(child)} if (!box) return null;
{/* {activeTabKey === 'curve' && child.key === 'curveCenter' && renderCheckbox(child)} */} return (
{/* {activeTabKey === 'table' && child.key !== 'curveCenter' && renderCheckbox(child)} */} <div key={child.key} className={`${prefixCls}-cover-item`}>
</div> {box}
))} </div>
);
})}
{activeTabKey === 'table' && ( {activeTabKey === 'table' && (
<Select <Select
value={dataThinKey} value={dataThinKey}
...@@ -636,77 +638,99 @@ const HistoryView = (props) => { ...@@ -636,77 +638,99 @@ const HistoryView = (props) => {
}); });
}, [dateRange, dataConfig, deviceParams]); }, [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 ( return (
<div className={classNames(prefixCls)}> <div className={classNames(prefixCls)}>
<Spin spinning={loading} wrapperClassName={classNames(`${prefixCls}-spin`)}> <Spin spinning={loading} wrapperClassName={classNames(`${prefixCls}-spin`)}>
<Tabs {showModels.length === 1 && (
activeKey={activeTabKey} <div className={`${prefixCls}-single-panel`}>{renderPanel(showModels[0])}</div>
onChange={(key) => setActiveTabKey(key)} )}
centered {showModels.length > 1 && (
tabBarExtraContent={{ <Tabs
left: <h3>{title}</h3>, activeKey={activeTabKey}
right: ( onChange={(key) => setActiveTabKey(key)}
<div className={`${prefixCls}-extra-right`}> centered
{/* {activeTabKey === 'table' && ( tabBarExtraContent={{
<Button onClick={exportExcelBtn}> left: <h3>{title}</h3>,
<DownloadOutlined /> right: (
下载 <div className={`${prefixCls}-extra-right`}>
</Button> {/* {activeTabKey === 'table' && (
)} */} <Button onClick={exportExcelBtn}>
</div> <DownloadOutlined />
), 下载
}} </Button>
> )} */}
<Tabs.TabPane key="curve" tab="曲线"> </div>
<div className={`${prefixCls}-options`}> ),
{renderTimeOption()} }}
{renderCurveOption()} >
</div> <Tabs.TabPane key="curve" tab="曲线">
<div className={`${prefixCls}-content`}> {renderPanel('curve')}
{!chartDataSource.length ? ( </Tabs.TabPane>
<PandaEmpty /> <Tabs.TabPane key="table" tab="表格">
) : grid === true ? ( {renderPanel('table')}
<GridChart </Tabs.TabPane>
curveCenter={curveCenter} </Tabs>
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>
</Spin> </Spin>
</div> </div>
); );
...@@ -731,6 +755,8 @@ HistoryView.propTypes = { ...@@ -731,6 +755,8 @@ HistoryView.propTypes = {
pointAddressID: PropTypes.number, // 可选，配置了将会查询相关报警方案配置 pointAddressID: PropTypes.number, // 可选，配置了将会查询相关报警方案配置
}), }),
), ),
defaultModel: PropTypes.oneOf(['curve', 'table']),
showModels: PropTypes.arrayOf(PropTypes.oneOf(['curve', 'table'])),
}; };
HistoryView.defaultProps = { HistoryView.defaultProps = {
...@@ -738,6 +764,8 @@ HistoryView.defaultProps = { ...@@ -738,6 +764,8 @@ HistoryView.defaultProps = {
title: '指标曲线', title: '指标曲线',
defaultChecked: 'oneHour', defaultChecked: 'oneHour',
tableProps: {}, tableProps: {},
defaultModel: 'curve',
showModels: ['curve', 'table'],
}; };
export default HistoryView; export default HistoryView;
packages/extend-components/EC_HistoryView/src/index.less
View file @ 8d167bbb
...@@ -35,6 +35,12 @@ ...@@ -35,6 +35,12 @@
height: 100%; height: 100%;
} }
.@{history-view}-single-panel {
display: flex;
flex-direction: column;
height: 100%;
}
.@{ant-prefix}-tabs-tabpane-active { .@{ant-prefix}-tabs-tabpane-active {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -106,6 +112,10 @@ ...@@ -106,6 +112,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
&-item {
margin-right: 8px;
}
} }
.@{history-view}-content { .@{history-view}-content {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment