统计

admin/src/pages/history/analysis/components/IntroduceRow.tsx

@@ -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;