Skip to content

W
wisdom-components
Commit 72739bfb authored by 李纪文's avatar 李纪文
Browse files
Options

fix: 统计查看

parent 2a683881
Hide whitespace changes
Inline Side-by-side
Showing with 183 additions and 37 deletions
packages/extend-components/EC_StatisticalHistoryView/src/demos/Basic.tsx
View file @ 72739bfb
......@@ -10,9 +10,9 @@ const Demo = () => {
// statisticType: '',
// }
const params = {
deviceCode: 'SC00000023',
sensors: '出水累计流量',
deviceType: '水厂',
deviceCode: 'LLJ00000001',
sensors: '今日水量',
deviceType: '流量计',
statisticType: '',
}
return (
......
packages/extend-components/EC_StatisticalHistoryView/src/index.js
View file @ 72739bfb
......@@ -4,7 +4,9 @@ import moment from 'moment';
import Empty from '@wisdom-components/empty';
import LoadBox from '@wisdom-components/loadbox';
import BasicTable from '@wisdom-components/basictable';
import { ConfigProvider, Select, DatePicker, Radio } from 'antd';
import { ExportExcel } from '@wisdom-components/exportexcel';
import { ConfigProvider, Select, DatePicker, Radio, Table, Button } from 'antd';
import { VerticalAlignBottomOutlined } from '@ant-design/icons';
import { BasicChart } from '@wisdom-components/basicchart';
import { getStatisticsInfo } from './apis';
import './index.less';
......@@ -32,7 +34,6 @@ const StatisticalHistoryView = (props) => {
const [picker, setPicker] = useState('day');
const [time, setTime] = useState({ startTime: '', endTime: '' });
const [dateTime, setDateTime] = useState(moment().format('YYYY-MM-DD HH:mm:ss'));
const [hoverIndex, setHoverIndex] = useState(null);
// 时间切换筛选
const onTimeChange = (e) => {
......@@ -55,11 +56,41 @@ const StatisticalHistoryView = (props) => {
setTime({ startDate: start, endDate: end });
};
const exportExcelBtn = (e) => {
if (!dataSource.length) return false;
const sheetFilter = columns.map((item) => {
return item.dataIndex;
});
const sheetHeader = columns.map((item) => {
return item.title;
});
const sheetData = dataSource.map((item) => {
return {
pt: item.pt,
value0: String(item.value0),
value1: String(item.value1),
value2: String(item.value2),
};
});
ExportExcel({
name: `${props?.deviceParams?.sensors || ''}指标数据`,
content: [
{
sheetData: sheetData,
sheetName: 'sheet1',
sheetFilter: sheetFilter,
sheetHeader: sheetHeader,
columnWidths: [10, 10, 10, 10],
},
],
});
};
// 获取历史统计数据
const getHistoryData = async () => {
const { deviceCode = '', sensors = '', deviceType = '', statisticType = '' } = historyParams;
const nameTypeList = [];
if (!deviceCode || !sensors) return setHistoryRender(false);
if (!deviceCode || !sensors) return setOptions(null);
nameTypeList.push({
name: sensors,
type: statisticType || 'Sub',
......@@ -75,13 +106,18 @@ const StatisticalHistoryView = (props) => {
dateType: picker,
};
setLoading(true);
const results = await getStatisticsInfo(params);
let results = null;
try {
results = await getStatisticsInfo(params);
} catch (err) {
return setLoading(false);
}
setLoading(false);
const list = results?.data?.list || [];
const dataList = list.length ? list[0] : {};
const dNameDataList = dataList.dNameDataList ? dataList.dNameDataList : [];
const data = dNameDataList.length ? dNameDataList[0] : null;
if (!data) return setHistoryRender(false);
if (!data) return setOptions(null);
dataMenthod(data);
};
......@@ -134,6 +170,19 @@ const StatisticalHistoryView = (props) => {
if (times === time2) data2.push({ ...item, pt: pt });
});
break;
case 'thisYear':
time0 = moment(time.endDate).subtract(0, 'year').format('YYYY');
time1 = moment(time.endDate).subtract(1, 'year').format('YYYY');
time2 = moment(time.endDate).subtract(2, 'year').format('YYYY');
timeName = [].concat(yearName);
nameDate.forEach((item) => {
const times = moment(item.time).format('YYYY');
const pt = moment(item.time).format('MM月');
if (times === time0) data0.push({ ...item, pt: pt });
if (times === time1) data1.push({ ...item, pt: pt });
if (times === time2) data2.push({ ...item, pt: pt });
});
break;
case 'customer':
const style = picker === 'day' ? 'HH时' : picker === 'month' ? 'DD日' : 'MM月';
const format = picker === 'day' ? 'YYYY-MM-DD' : picker === 'month' ? 'YYYY-MM' : 'YYYY';
......@@ -172,11 +221,11 @@ const StatisticalHistoryView = (props) => {
const series = [];
dataInfo.data.forEach((item, index) => {
const config = !index && dName.indexOf('流量') > -1 ? { areaStyle: {} } : {};
const style = index ? {lineStyle:{normal:{type:'dashed'}}} : {}
const style = index ? { lineStyle: { normal: { type: 'dashed' } } } : {};
const list = {
name: dataInfo.name[index],
type: 'line',
smooth: true,
smooth: true,
...config,
...style,
data: item.map((arr) => {
......@@ -202,7 +251,7 @@ const StatisticalHistoryView = (props) => {
grid: {
containLabel: true,
left: 20,
right: 10,
right: 20,
// top: 20,
bottom: 10,
},
......@@ -218,6 +267,13 @@ const StatisticalHistoryView = (props) => {
axisTick: {
alignWithLabel: true,
},
boundaryGap: false,
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
},
},
},
],
yAxis: [
......@@ -255,7 +311,6 @@ const StatisticalHistoryView = (props) => {
title: item,
dataIndex: dataIndex[index],
align: 'center',
// width: 60,
};
});
const column = column1.concat(column2);
......@@ -290,6 +345,24 @@ const StatisticalHistoryView = (props) => {
}
};
const Summary = (currentData) => {
return (
<Table.Summary.Row>
{columns.map((item, index) => {
let sum = 0;
currentData.reduce((prev, next) => {
sum += next[item.dataIndex] === '-' ? 0 : next[item.dataIndex];
}, 0);
return (
<Table.Summary.Cell key={item.dataIndex} index={index} align={'center'}>
{index === 0 ? '总计' : sum.toFixed(0)}
</Table.Summary.Cell>
);
})}
</Table.Summary.Row>
);
};
useEffect(() => {
setHistoryParams(props.deviceParams || {});
}, [props.deviceParams]);
......@@ -313,6 +386,11 @@ const StatisticalHistoryView = (props) => {
end = moment().endOf('month').format('YYYY-MM-DD 23:59:59');
setPicker('month');
break;
case 'thisYear':
start = moment().startOf('year').subtract(2, 'year').format('YYYY-MM-DD 00:00:00');
end = moment().endOf('year').format('YYYY-MM-DD 23:59:59');
setPicker('year');
break;
case 'customer':
start = moment().startOf(picker).subtract(2, picker).format('YYYY-MM-DD 00:00:00');
end = moment().endOf(picker).format('YYYY-MM-DD 23:59:59');
......@@ -331,32 +409,54 @@ const StatisticalHistoryView = (props) => {
<div className={classNames(prefixCls)}>
<div className={classNames(`${prefixCls}-box`)}>
<div className={classNames(`${prefixCls}-header`)}>
<span>时间选择：</span>
<Radio.Group value={dateValue} defaultValue={dateList[0].key} onChange={onTimeChange}>
{dateList.map((item) => (
<Radio.Button key={item.key} value={item.key}>
{item.name}
</Radio.Button>
))}
</Radio.Group>
{dateValue === 'customer' && (
<>
<Select
defaultValue="day"
value={picker}
options={timeList}
onChange={onPickerChange}
className={classNames(`${prefixCls}-select`)}
/>
<DatePicker onChange={onDateChange} value={moment(dateTime)} picker={picker} />
</>
)}
<div className={classNames(`${prefixCls}-time`)}>
<span>时间选择：</span>
<Radio.Group value={dateValue} defaultValue={dateList[0].key} onChange={onTimeChange}>
{dateList.map((item) => (
<Radio.Button key={item.key} value={item.key}>
{item.name}
</Radio.Button>
))}
</Radio.Group>
{dateValue === 'customer' && (
<>
<Select
defaultValue="day"
value={picker}
options={timeList}
onChange={onPickerChange}
className={classNames(`${prefixCls}-select`)}
/>
<DatePicker onChange={onDateChange} value={moment(dateTime)} picker={picker} />
</>
)}
</div>
<Button
className={classNames(`${prefixCls}-down-load`)}
type="primary"
onClick={exportExcelBtn}
disabled={!dataSource.length}
>
<VerticalAlignBottomOutlined />
下载
</Button>
</div>
<div className={classNames(`${prefixCls}-content`)}>
{
<>
<div className={classNames(`${prefixCls}-chart`)}>
<BasicChart ref={chartRef} option={options} notMerge style={{ width: '100%', height: '100%' }} />
{options ? (
<BasicChart
ref={chartRef}
option={options}
notMerge
style={{ width: '100%', height: '100%' }}
/>
) : (
<div className={classNames(`${prefixCls}-empty`)}>
<Empty />
</div>
)}
</div>
<div className={classNames(`${prefixCls}-table`)}>
<BasicTable
......@@ -364,7 +464,32 @@ const StatisticalHistoryView = (props) => {
columns={columns}
pagination={false}
bordered={true}
onRow={(record, index) => {
return {
onMouseEnter: (event) => {
let seriesIndex = 0;
const dataIndex = ['value0', 'value1', 'value2'];
seriesIndex = dataIndex.findIndex((item) => {
return record[item] !== '-';
});
chartRef?.current?.getEchartsInstance() &&
chartRef?.current?.getEchartsInstance().dispatchAction({
type: 'showTip',
seriesIndex: seriesIndex,
dataIndex: index,
});
}, // 鼠标移入行
onMouseLeave: (event) => {
chartRef?.current?.getEchartsInstance() &&
chartRef?.current?.getEchartsInstance().dispatchAction({
type: 'hideTip',
dataIndex: index,
});
}, // 鼠标移出行
};
}}
scroll={{ x: '100%', y: 'calc(100% - 40px)' }}
summary={Summary}
/>
</div>
</>
......@@ -387,14 +512,18 @@ const dateList = [
key: 'today',
name: '今日',
},
{
key: 'thisWeek',
name: '本周',
},
// {
// key: 'thisWeek',
// name: '本周',
// },
{
key: 'thisMonth',
name: '本月',
},
{
key: 'thisYear',
name: '今年',
},
{
key: 'customer',
name: '自定义',
......@@ -421,3 +550,5 @@ const dayName = ['今日', '昨日', '前日'];
const weekName = ['本周', '上周', '上上周'];
const monthName = ['本月', '上月', '上上月'];
const yearName = ['今年', '去年', '前年'];
packages/extend-components/EC_StatisticalHistoryView/src/index.less
View file @ 72739bfb
......@@ -25,6 +25,8 @@
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
&-box {
......@@ -37,6 +39,19 @@
&-header {
flex: none;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
&-time {
display: flex;
align-items: center;
}
&-down-load {
display: flex;
align-items: center;
}
&-select {
......
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