192 lines
3.5 KiB
TypeScript
192 lines
3.5 KiB
TypeScript
import PageTools from '@/components/page-tools';
|
|
import { Column } from '@ant-design/plots';
|
|
import { DatePicker, Select, Space } from 'antd';
|
|
import { useState } from 'react';
|
|
|
|
const { RangePicker } = DatePicker;
|
|
|
|
const ModelBills: React.FC = () => {
|
|
const [selectName, setSelectName] = useState('model1');
|
|
const handleNameChange = (value: string) => {
|
|
setSelectName(value);
|
|
};
|
|
const models = [
|
|
{
|
|
value: 'model1',
|
|
label: 'model1'
|
|
},
|
|
{
|
|
value: 'model2',
|
|
label: 'model2'
|
|
},
|
|
{
|
|
value: 'model3',
|
|
label: 'model3'
|
|
}
|
|
];
|
|
const config = {
|
|
data: [
|
|
{
|
|
time: '2021-01',
|
|
name: 'model1',
|
|
value: 3.9
|
|
},
|
|
{
|
|
time: '2021-01',
|
|
name: 'model2',
|
|
value: 4.3
|
|
},
|
|
{
|
|
time: '2021-01',
|
|
name: 'model3',
|
|
value: 3.8
|
|
},
|
|
{
|
|
time: '2021-02',
|
|
name: 'model1',
|
|
value: 4.1
|
|
},
|
|
{
|
|
time: '2021-02',
|
|
name: 'model2',
|
|
value: 5.7
|
|
},
|
|
{
|
|
time: '2021-02',
|
|
name: 'model3',
|
|
value: 3.9
|
|
},
|
|
{
|
|
time: '2021-03',
|
|
name: 'model1',
|
|
value: 5.6
|
|
},
|
|
{
|
|
time: '2021-03',
|
|
name: 'model2',
|
|
value: 7.3
|
|
},
|
|
{
|
|
time: '2021-03',
|
|
name: 'model3',
|
|
value: 4.9
|
|
},
|
|
{
|
|
time: '2021-04',
|
|
name: 'model1',
|
|
value: 7.2
|
|
},
|
|
{
|
|
time: '2021-04',
|
|
name: 'model2',
|
|
value: 9.6
|
|
},
|
|
{
|
|
time: '2021-04',
|
|
name: 'model3',
|
|
value: 6.3
|
|
},
|
|
{
|
|
time: '2021-05',
|
|
name: 'model1',
|
|
value: 9.3
|
|
},
|
|
{
|
|
time: '2021-05',
|
|
name: 'model2',
|
|
value: 11.9
|
|
},
|
|
{
|
|
time: '2021-05',
|
|
name: 'model3',
|
|
value: 8.6
|
|
},
|
|
{
|
|
time: '2021-06',
|
|
name: 'model1',
|
|
value: 10.3
|
|
},
|
|
{
|
|
time: '2021-06',
|
|
name: 'model2',
|
|
value: 13.9
|
|
},
|
|
{
|
|
time: '2021-06',
|
|
name: 'model3',
|
|
value: 9.6
|
|
}
|
|
],
|
|
xField: 'time',
|
|
yField: 'value',
|
|
colorField: 'name',
|
|
group: true,
|
|
legend: {
|
|
color: {
|
|
position: 'top',
|
|
layout: {
|
|
justifyContent: 'center'
|
|
}
|
|
}
|
|
},
|
|
axis: {
|
|
x: {
|
|
xAxis: true
|
|
}
|
|
},
|
|
|
|
split: {
|
|
type: 'line',
|
|
line: {
|
|
color: 'red',
|
|
style: {
|
|
color: 'red',
|
|
lineDash: [4, 5]
|
|
}
|
|
}
|
|
},
|
|
|
|
style: {
|
|
radiusTopLeft: 10,
|
|
radiusTopRight: 10,
|
|
width: 25
|
|
}
|
|
};
|
|
|
|
const handleSelectDate = (value: any) => {
|
|
console.log(value);
|
|
};
|
|
return (
|
|
<>
|
|
<PageTools
|
|
marginBottom={10}
|
|
marginTop={0}
|
|
left={false}
|
|
right={
|
|
<Space>
|
|
<Select
|
|
size="middle"
|
|
options={models}
|
|
value={selectName}
|
|
style={{ width: 300, height: 34 }}
|
|
onChange={handleNameChange}
|
|
></Select>
|
|
<RangePicker
|
|
showTime={false}
|
|
format="YYYY-MM-DD"
|
|
onChange={(value, dateString) => {
|
|
console.log('Selected Time: ', value);
|
|
console.log('Formatted Selected Time: ', dateString);
|
|
}}
|
|
onOk={handleSelectDate}
|
|
/>
|
|
</Space>
|
|
}
|
|
></PageTools>
|
|
<Column {...config} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ModelBills;
|