Commit 6d058620 authored by 陈龙's avatar 陈龙

feat: 优化图表移动端

parent 5bc035d3
import React from 'react';
import React, {useEffect, useState} from 'react';
import {MobileHistoryChart} from "../mobile";
import moment from 'moment'
const deviceParams = [
/* {
deviceCode: 'EGBF00000141',
......@@ -15,11 +15,21 @@ const deviceParams = [
pointAddressID: 208,
},
];
const Demo = () => {
const [date,setData] = useState();
useEffect(()=>{
setTimeout(()=>{
setData({
dateFrom: moment().subtract(4,'days').format('YYYY-MM-DD HH:mm:ss'),
dateTo: moment().subtract(3,'days').format('YYYY-MM-DD HH:mm:ss')
})
},5000)
},[])
return (
<div>
<div style={{height: 400}}>
<MobileHistoryChart deviceParams={deviceParams}/>
<MobileHistoryChart deviceParams={deviceParams} date={date}/>
</div>
</div>
......
......@@ -10,10 +10,7 @@ import styles from './index.less';
const DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
const MobileHistoryChart = (
{
date = {
dateFrom: moment().subtract(1, 'days').format(`${DATE_FORMAT}`),
dateTo: moment().format(`${DATE_FORMAT}`)
},// 默认当天
date,
deviceParams = [], // 设备参数,必传
chartType = 'lineChart', // lineChart boxChart
// ignoreOutliers = true, // 滤波
......@@ -59,7 +56,9 @@ const MobileHistoryChart = (
};
const getDataSource = () => {
let diffDays = moment(date.dateTo).diff(moment(date.dateFrom), 'days');
let dateFrom = date?.dateFrom || moment().subtract(1, 'days').format(`${DATE_FORMAT}`),
dateTo = date?.dateTo || moment().format(`${DATE_FORMAT}`);
let diffDays = moment(dateTo).diff(moment(dateFrom), 'days');
const thinKey = handleDataThinKey(diffDays);
const acrossTables = deviceParams.map(item => {
let _item = {...item};
......@@ -70,7 +69,8 @@ const MobileHistoryChart = (
return _item;
});
let _params = {
...date,
dateFrom,
dateTo,
isBoxPlots,
ignoreOutliers: options.ignoreOutliers,
isDilute,
......@@ -79,7 +79,6 @@ const MobileHistoryChart = (
};
getHistoryInfo({..._params}).then(res => {
let data = [];
const {dateFrom, dateTo} = date;
if (res.code === 0 && res.data.length) {
res.data.forEach((d) => {
d.dateFrom = dateFrom || '';
......@@ -128,24 +127,28 @@ const MobileHistoryChart = (
}, [])
useEffect(() => {
getDataSource();
}, [options.ignoreOutliers])
return deviceAlarmSchemes && chartDataSource ? <div style={{}}>
}, [options.ignoreOutliers, date])
return deviceAlarmSchemes && chartDataSource ? <div style={{width: '100%'}}>
{
chartDataSource.length === 1 ? <div className={styles[`${prefixCls}-item`]}>
<span style={{fontSize: handlePx(16)}}>曲线形态:</span>
<span style={{fontSize: handlePx(14)}}>曲线形态:</span>
<Selector
style={{display: 'inline-block', fontSize: handlePx(14)}}
options={[
{label: '线形图', value: 'lineChart'},
{label: '箱线图', value: 'boxChart'}
]}
defaultValue={lineType}
onChange={(arr, extend) => setLineType(arr)}
onChange={(arr, extend) => {
setLineType(arr)
}}
/>
</div> : ''
}
<div className={styles[`${prefixCls}-item`]}>
<span style={{fontSize: handlePx(16)}}>曲线设置:</span>
<div className={styles[`${prefixCls}-item`]}>
<span style={{fontSize: handlePx(14)}}>曲线设置:</span>
<Checkbox.Group
style={{fontSize: handlePx(14)}}
value={checkBoxOptions}
onChange={val => {
let _arr = Object.keys(options);
......
......@@ -714,7 +714,6 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
tooltip.timeFormat = tooltipTimeFormat;
let _legendData = series.filter(item => !['最大值', '最小值'].includes(item.name)).map(item => item.name);
assignOptions(restOption, xAxis, _legendData);
debugger
return {
yAxis,
grid,
......
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