|
|
|
@ -1,94 +1,157 @@
|
|
|
|
|
import { InfoCircleOutlined } from '@ant-design/icons';
|
|
|
|
|
import { useEffect, useRef, useState } from 'react';
|
|
|
|
|
import { TinyArea, TinyColumn } from '@ant-design/charts';
|
|
|
|
|
import { Card, Col, Progress, Row, Tabs, DatePicker } from 'antd';
|
|
|
|
|
|
|
|
|
|
import { Card, Col, Progress, Row, Tabs, DatePicker, Select, Form, Statistic } from 'antd';
|
|
|
|
|
import numeral from 'numeral';
|
|
|
|
|
import { ChartCard, Field } from './Charts';
|
|
|
|
|
import type { DataItem } from '../data.d';
|
|
|
|
|
import Trend from './Trend';
|
|
|
|
|
import Yuan from '../utils/Yuan';
|
|
|
|
|
|
|
|
|
|
import { getAsyncOrgTree } from '../service';
|
|
|
|
|
const { Option } = Select;
|
|
|
|
|
|
|
|
|
|
import styles from '../style.less';
|
|
|
|
|
import ProForm, { ProFormSelect } from '@ant-design/pro-form';
|
|
|
|
|
const { RangePicker } = DatePicker;
|
|
|
|
|
const topColResponsiveProps = {
|
|
|
|
|
xs: 24,
|
|
|
|
|
sm: 12,
|
|
|
|
|
md: 12,
|
|
|
|
|
lg: 12,
|
|
|
|
|
xl: 12,
|
|
|
|
|
sm: 4,
|
|
|
|
|
md: 4,
|
|
|
|
|
lg: 4,
|
|
|
|
|
xl: 4,
|
|
|
|
|
offset: 1,
|
|
|
|
|
style: { marginBottom: 24 },
|
|
|
|
|
};
|
|
|
|
|
const cityData = await getAsyncOrgTree({
|
|
|
|
|
org_id: 100025,
|
|
|
|
|
org_type: 1,
|
|
|
|
|
get_next: 1
|
|
|
|
|
});
|
|
|
|
|
const layout = {
|
|
|
|
|
labelCol: { span: 8 },
|
|
|
|
|
wrapperCol: { span: 16 },
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: DataItem[] }) => {
|
|
|
|
|
const [cityList, setCityList] = useState([]);
|
|
|
|
|
const [areaList, setAreaList] = useState([]);
|
|
|
|
|
const [form] = Form.useForm();
|
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setCityList(cityData || []);
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const getAreaData = async (e) => {
|
|
|
|
|
// console.log(e, 'eeeeeeeeeeeee2ee');
|
|
|
|
|
const areaData = await getAsyncOrgTree({
|
|
|
|
|
org_id: e,
|
|
|
|
|
org_type: 2,
|
|
|
|
|
get_next: 1
|
|
|
|
|
});
|
|
|
|
|
form.setFieldsValue({ area: "" })
|
|
|
|
|
// console.log(form.setFieldsValue({ area: "" }), 'form');
|
|
|
|
|
|
|
|
|
|
setAreaList(areaData || []);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const getSchoolData = async (e) => {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: DataItem[] }) => (
|
|
|
|
|
const onFinish = (values: any) => {
|
|
|
|
|
console.log(values);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const onGenderChange = (value: string) => {
|
|
|
|
|
|
|
|
|
|
// const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
|
|
|
|
|
|
|
|
|
|
<Card loading={loading} bordered={false} bodyStyle={{ padding: 0, marginBottom: '24px' }}>
|
|
|
|
|
<div className={styles.salesCard}>
|
|
|
|
|
<Tabs
|
|
|
|
|
tabBarExtraContent={
|
|
|
|
|
<div className={styles.salesExtraWrap}>
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
return (
|
|
|
|
|
<Card loading={loading} bordered={false} bodyStyle={{ padding: 0, marginBottom: '24px' }}>
|
|
|
|
|
<div className={styles.salesCard}>
|
|
|
|
|
<Tabs
|
|
|
|
|
tabBarExtraContent={<div className={styles.salesExtraWrap}>
|
|
|
|
|
<div className={styles.salesExtra}>
|
|
|
|
|
{/* <a className={isActive('today')} onClick={() => selectDate('today')}>
|
|
|
|
|
今日
|
|
|
|
|
</a>
|
|
|
|
|
<a className={isActive('week')} onClick={() => selectDate('week')}>
|
|
|
|
|
本周
|
|
|
|
|
</a>
|
|
|
|
|
<a className={isActive('month')} onClick={() => selectDate('month')}>
|
|
|
|
|
本月
|
|
|
|
|
</a>
|
|
|
|
|
<a className={isActive('year')} onClick={() => selectDate('year')}>
|
|
|
|
|
本年
|
|
|
|
|
</a> */}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
|
|
|
|
|
|
|
|
|
|
<Form.Item name="city" label="市" style={{ float: "left" }}>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Select
|
|
|
|
|
style={{ width: 120 }}
|
|
|
|
|
onChange={(id) => { getAreaData(id) }}
|
|
|
|
|
>
|
|
|
|
|
{cityList.map((e, i) => {
|
|
|
|
|
|
|
|
|
|
return <Option key={e.id} value={e.id}>{e.name}</Option>
|
|
|
|
|
})}
|
|
|
|
|
</Select>
|
|
|
|
|
</Form.Item>
|
|
|
|
|
|
|
|
|
|
<Form.Item name="area" label="区" style={{ float: "left" }}>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Select
|
|
|
|
|
style={{ width: 120 }}
|
|
|
|
|
onChange={(id) => { getSchoolData(id) }}
|
|
|
|
|
>
|
|
|
|
|
{areaList.map((e, i) => {
|
|
|
|
|
|
|
|
|
|
return <Option key={e.id} value={e.id}>{e.name}</Option>
|
|
|
|
|
})}
|
|
|
|
|
</Select>
|
|
|
|
|
|
|
|
|
|
</Form.Item>
|
|
|
|
|
|
|
|
|
|
<Form.Item name="school" label="学校">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Select
|
|
|
|
|
showSearch
|
|
|
|
|
style={{ width: 220 }}
|
|
|
|
|
// value={this.state.value}
|
|
|
|
|
// placeholder={this.props.placeholder}
|
|
|
|
|
// style={this.props.style}
|
|
|
|
|
defaultActiveFirstOption={false}
|
|
|
|
|
showArrow={false}
|
|
|
|
|
filterOption={false}
|
|
|
|
|
// onSearch={this.handleSearch}
|
|
|
|
|
// onChange={this.handleChange}
|
|
|
|
|
notFoundContent={null}
|
|
|
|
|
>
|
|
|
|
|
{/* {options} */}
|
|
|
|
|
</Select>
|
|
|
|
|
</Form.Item>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Form>
|
|
|
|
|
</div>
|
|
|
|
|
<RangePicker
|
|
|
|
|
// value={rangePickerValue}
|
|
|
|
|
// onChange={handleRangePickerChange}
|
|
|
|
|
style={{ width: 256 }}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
size="large"
|
|
|
|
|
tabBarStyle={{ marginBottom: 24 }}
|
|
|
|
|
>
|
|
|
|
|
<Col {...topColResponsiveProps}>
|
|
|
|
|
<ChartCard
|
|
|
|
|
bordered={false}
|
|
|
|
|
loading={loading}
|
|
|
|
|
title="资质考试数"
|
|
|
|
|
action={false}
|
|
|
|
|
total={numeral(6560).format('0,0')}
|
|
|
|
|
footer={false}
|
|
|
|
|
contentHeight={50}
|
|
|
|
|
>
|
|
|
|
|
<TinyColumn xField="x" height={46} forceFit yField="y" data={visitData} />
|
|
|
|
|
</ChartCard>
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
size="large"
|
|
|
|
|
tabBarStyle={{ marginBottom: 24 }}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<Row />
|
|
|
|
|
<Row gutter={16}>
|
|
|
|
|
<Col {...topColResponsiveProps}>
|
|
|
|
|
<Statistic title="资质考试数" value={93} />
|
|
|
|
|
</Col>
|
|
|
|
|
<Col {...topColResponsiveProps}>
|
|
|
|
|
<ChartCard
|
|
|
|
|
bordered={false}
|
|
|
|
|
loading={loading}
|
|
|
|
|
title="累计报名人数"
|
|
|
|
|
action={false}
|
|
|
|
|
total={numeral(6560).format('0,0')}
|
|
|
|
|
footer={false}
|
|
|
|
|
contentHeight={50}
|
|
|
|
|
>
|
|
|
|
|
<TinyColumn xField="x" height={46} forceFit yField="y" data={visitData} />
|
|
|
|
|
</ChartCard>
|
|
|
|
|
<Col {...topColResponsiveProps}>
|
|
|
|
|
<Statistic title="累计报名人数" value={93} suffix="人" />
|
|
|
|
|
</Col>
|
|
|
|
|
<Col {...topColResponsiveProps}>
|
|
|
|
|
<ChartCard
|
|
|
|
|
bordered={false}
|
|
|
|
|
loading={loading}
|
|
|
|
|
title="取得证书人数"
|
|
|
|
|
action={false}
|
|
|
|
|
total={numeral(6560).format('0,0')}
|
|
|
|
|
footer={false}
|
|
|
|
|
contentHeight={50}
|
|
|
|
|
>
|
|
|
|
|
<TinyColumn xField="x" height={46} forceFit yField="y" data={visitData} />
|
|
|
|
|
</ChartCard>
|
|
|
|
|
<Col {...topColResponsiveProps}>
|
|
|
|
|
<Statistic title="取得证书人数" value={93} suffix="人" />
|
|
|
|
|
</Col>
|
|
|
|
|
<Col {...topColResponsiveProps}>
|
|
|
|
|
<ChartCard
|
|
|
|
@ -96,7 +159,7 @@ const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: Dat
|
|
|
|
|
loading={loading}
|
|
|
|
|
title={`通过率`}
|
|
|
|
|
action={false}
|
|
|
|
|
total={`${numeral(6560).format('0,0')}`}
|
|
|
|
|
// total={`${numeral(6560).format('0,0')}`}
|
|
|
|
|
footer={false}
|
|
|
|
|
contentHeight={92}
|
|
|
|
|
style={{ textAlign: 'center', marginBottom: 0 }}
|
|
|
|
@ -104,12 +167,10 @@ const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: Dat
|
|
|
|
|
<Progress type="circle" percent={75} width={80} strokeWidth={10} style={{ position: 'relative', margin: '15px auto 0 auto' }} />
|
|
|
|
|
</ChartCard>
|
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
|
|
</Tabs>
|
|
|
|
|
</div>
|
|
|
|
|
</Card>
|
|
|
|
|
</Row>
|
|
|
|
|
</Card >)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default IntroduceRow;
|
|
|
|
|