Skip to content

W
wisdom-components
Commit 9396e391 authored by 陈龙's avatar 陈龙
Browse files
Options

feat: 优化图表代码

parent cc9c46c4
Hide whitespace changes
Inline Side-by-side
Showing with 54 additions and 9 deletions
packages/extend-components/EC_HistoryView/src/SingleChart.js
View file @ 9396e391
......@@ -14,7 +14,8 @@ const SimgleChart = memo((props) => {
showGridLine = true,
deviceAlarmSchemes,
chartType,
justLine
justLine,
showBoxOption
} = props;
const chartRef = useRef();
......@@ -27,7 +28,8 @@ const SimgleChart = memo((props) => {
showMarkLine: true,
showPoint: true,
chartType,
justLine
justLine,
showBoxOption
};
return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config);
}, [dataSource, smooth, curveCenter]);
......
packages/extend-components/EC_HistoryView/src/index.js
View file @ 9396e391
......@@ -256,6 +256,7 @@ const HistoryView = (props) => {
const [chartDataSource, setChartDataSource] = useState([]);
const [chartType, setChartType] = useState('lineChart');
const [showBoxOption, setShowBoxOption] = useState(true);
// 选择的时间范围值
const dateRange = useMemo(() => {
if (timeValue === 'customer') {
......@@ -357,9 +358,13 @@ const HistoryView = (props) => {
if (e.target.value === 'contrast') {
// 同期对比
onContrastChange(contrastOption);
setShowBoxOption(false);
setChartType('lineChart');
onCheckboxChange({target: {value: false}}, 'chartType')
} else {
// 自定义
// 不需要处理
setShowBoxOption(true)
}
};
......@@ -475,7 +480,7 @@ const HistoryView = (props) => {
return (
<div className={classNames(`${prefixCls}-cover`)} style={isChart && isSingle ? {width: '100%'} : {}}>
{
isChart && isSingle ? <>
isChart && isSingle && showBoxOption ? <>
<div className={classNames(`${prefixCls}-label`)}>曲线形态</div>
<Radio.Group value={chartType} style={{marginRight: 16}} onChange={(e) => {
let _value = e.target.value;
......@@ -770,6 +775,7 @@ const HistoryView = (props) => {
/>
) : (
<SimgleChart
showBoxOption={showBoxOption}
curveCenter={curveCenter}
showGridLine={chartGrid}
prefixCls={prefixCls}
......
packages/extend-components/EC_HistoryView/src/utils.js
View file @ 9396e391
......@@ -41,7 +41,8 @@ const nameFormatter = (data, contrast, contrastOption, nameWithSensor) => {
*/
const dataAccessor = (data, contrast, contrastOption) => {
const {dataModel} = data;
const formatStr = contrastOption === 'day' ? '2020-01-01 HH:mm:00' : '2020-01-DD HH:mm:00';
let _currentYear = moment().format('YYYY');
const formatStr = contrastOption === 'day' ? `${_currentYear}-01-01 HH:mm:00` : `${_currentYear}-01-DD HH:mm:00`;
return dataModel.filter(item => item.sensorName !== '是否在线').map((item) => {
const time = contrast ? moment(item.pt).format(formatStr) : item.pt;
return [moment(time).valueOf(), item.pv];
......@@ -258,6 +259,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
const deviceAlarmSchemes = _.get(config, 'deviceAlarmSchemes', []);
const chartType = _.get(config, 'chartType', null);
const justLine = _.get(config, 'justLine', false);
const showBoxOption = _.get(config, 'showBoxOption', false);
// 自定义属性
const restOption = _.pick(cusOption, ['title', 'legend']);
......@@ -331,6 +333,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
};
const seriesTemplate = (param, unit) => {
if (!param) return '';
console.log(param);
const {value, encode} = param;
// const val = value[encode.y[0]];
const _unit = unit || 'Mpa';
......@@ -340,7 +343,11 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
<span style="color:${color};margin: 0 5px 0 auto;">${value?.toFixed(3) ?? '-'}</span>
<span style="font-size: 12px;">${_unit}</span>
</div>`;
return `
return param.componentSubType !== 'candlestick' ? `<div style="display: flex; align-items: center;">
<span>${param.seriesName}</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.AVG};margin: 0 5px 0 auto;">${value[1] ?? '-'}</span>
<span style="font-size: 12px;">${_unit}</span>
</div>` : `
<div style="display: flex; align-items: center;">
<span>首值</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.AVG};margin: 0 5px 0 auto;">${value[1] ?? '-'}</span>
......@@ -366,6 +373,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
const tooltipAccessor = (unit) => {
return {
formatter: function (params, ticket, callback) {
debugger
let tooltipHeader = '';
let tooltipContent = '';
if (isArray(params)) {
......@@ -377,7 +385,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
tooltipHeader = headTemplate(params);
tooltipContent += seriesTemplate(params, unit);
}
debugger
return `
<div>
${tooltipHeader}
......@@ -463,7 +471,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
// }
};
// 增加箱线图的逻辑，单曲线才存在
if (!justLine && chartType) {
if (!justLine && chartType && showBoxOption) {
if (chartType === 'boxChart') {
const otherData = dataSource?.[0]?.dataModel.map(item => {
const {firstPV, lastPV, maxPV, minPV, pt} = item;
......@@ -497,17 +505,22 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
} else {
let _maxData = [];
let _minData = [];
const formatStr = contrastOption === 'day' ? '2020-01-01 HH:mm:00' : '2020-01-DD HH:mm:00';// 用来做同期对比，把日期拉到同一区间
let _currentYear = moment().format('YYYY');
const formatStr = contrastOption === 'day' ? `${_currentYear}-01-01 HH:mm:00` : `${_currentYear}-01-DD HH:mm:00`;// 用来做同期对比，把日期拉到同一区间
let _maxValues = [];
dataSource?.[0]?.dataModel.forEach(item => {
const {firstPV, lastPV, maxPV, minPV, pt} = item;
_maxValues.push(maxPV);
let time = contrast ? moment(pt).format(formatStr) : pt;
_maxData.push([moment(time).valueOf(), maxPV - minPV]);
_maxData.push([moment(time).valueOf(), (maxPV - minPV).toFixed(2)]);
_minData.push([moment(time).valueOf(), minPV]);
}); //当存在othersData的时候，只是单曲线
// xAxis = {type: 'category', data: series[0].data.map(item => moment(item[0]).format('YYYY-MM-DD HH:mm:ss'))};
xAxis = {type: 'time'};
decorateAxisGridLine(xAxis, showGridLine);
let _unit = ''
series = series.map(item => {
_unit = item.unit;
let _item = {...item, symbol: 'none'};
/* _item.data = _item?.data?.map(d => {
return d[1] || null
......@@ -533,6 +546,30 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
symbol: 'none'
});
})
tooltip = {
formatter: (e) => {
return `<div>
${headTemplate(e[0])}
<div>
<div style="display: flex; align-items: center;">
<span>${e[0].seriesName}</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.NORMAL};margin: 0 5px 0 auto;">${e[0]?.value?.[1] ?? '-'}</span>
<span style="font-size: 12px;">${_unit}</span>
</div>
<div style="display: flex; align-items: center;">
<span>最小值</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.AVG};margin: 0 5px 0 auto;">${e[1]?.value?.[1] ?? '-'}</span>
<span style="font-size: 12px;">${_unit}</span>
</div>
<div style="display: flex; align-items: center;">
<span>最大值</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.AVG};margin: 0 5px 0 auto;">${_maxValues[e[2].dataIndex] ?? '-'}</span>
<span style="font-size: 12px;">${_unit}</span>
</div>
</div>
</div>`
}
}
}
}
restOption.dataZoom = [
......
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