zls

config/config.js

@@ -329,6 +329,11 @@ export default {
                   name: '报表',
                   component: './indexEcharts/index',
                 },
+                {
+                  path: '/indexEcharts/userSource',
+                  name: '用户来源',
+                  component: './indexEcharts/userSource',
+                },
                 {
                   path: '/system/intention',
                   name: '意向值',

src/components/EchartsTest/EChart.jsx

@@ -3,17 +3,20 @@ import React, { Component } from 'react';
 // 引入 ECharts 主模块
 import echarts from 'echarts/lib/echarts';
 // 引入柱状图
-import  'echarts/lib/chart/bar';
+import 'echarts/lib/chart/bar';
+import 'echarts/lib/chart/pie';
 // 引入提示框和标题组件
 import 'echarts/lib/component/tooltip';
+import 'echarts/lib/component/legend';
 import 'echarts/lib/component/title';
 
+
 class EchartsTest extends Component {
-    chartRef = undefined
+    chartRef = React.createRef();
     chart = undefined
     defaultChartOption = {}
 
-    componentDidMount() {
+    componentDidMount () {
         this.chart = echarts.init(this.chartRef.current)
 
         // 绘制图表
@@ -23,25 +26,28 @@ class EchartsTest extends Component {
         });
     }
 
-    componentDidUpdate(preProps) {
+    componentDidUpdate (preProps) {
         if (preProps.options != this.props.options) {
-            this.chart.setOption({
+            const options = {
                 ...this.defaultChartOption,
                 ...this.props.options || {},
-            });
+            }
+
+            console.log(options)
+
+            this.chart.setOption(options);
         }
     }
 
-    handleDom = ref => this.chartRef = ref
-
-    render() {
+    render () {
         const style = {
             width: '600px',
+            height: '400px',
             ...this.props.style || {}
         }
 
         return (
-            <div ref={this.handleDom} style={style}></div>
+            <div ref={this.chartRef} style={style}></div>
         );
     }
 }

src/pages/indexEcharts/components/UserSource.jsx

@@ -1,160 +1,180 @@
 import React, { Component, useState, useEffect } from 'react';
 
-// 引入 ECharts 主模块
-import echarts from 'echarts/lib/echarts';
-// 引入环形图
-import 'echarts/lib/chart/pie';
-import 'echarts/lib/chart/bar'
-
-// 引入提示框和标题组件
-import 'echarts/lib/component/tooltip';
-import 'echarts/lib/component/title';
-import 'echarts/lib/component/visualMap';
+import EChart from '../../../components/EchartsTest/EChart';
 import request from '../../../utils/request';
 import apis from '../../../services/apis';
 import dayjs from 'dayjs';
+import router from 'umi/router';
+import {Table, Select, Row, Col, Menu, Dropdown, Button, Icon, message } from 'antd';
+// import UserSource from './mmm';
 
 
-// 
-class UserSource extends React.Component {
-
-  state = {
-    piedata: {},
-    loading: false,
-    dataset: {},
-    reportOpts: {
-      legend: {},
-      color: ['#286DD0', '#8565CE', '#6A96F8', '#F5749E', '#8B7FE2'],
-      tooltip: {},
-      yAxis: {},
-      grid: [
-        { right: '50%' },
-        { right: '5%' }
-      ],
-    },
-    userType: 'all',
-    tableTitle: ['日期'],
-  }
-
-
+const UserSource = (props) => {
 
-  initCharts = () => {
+  const [data, setData] = useState({ records: [] })
+  //柱图
 
+  useEffect(() => {
+    userResource()
+  }, [])
 
+  function userResource () {
+    request({
+      ...apis.indexEcharts.userResource,
+      params: { pageNum: 1, pageSize: 9999 }
+    }).then((data) => {
+      // console.log(data , '3333')
+      setData(data)
+    })
+  }
 
-    console.log(this.dataset, '5555')
-    // 基于准备好的dom，初始化echarts实例
-    var myChart = echarts.init(document.getElementById('usersourcebar'));
-    const source = this.dataset.columnar || [];
-
-    // 柱图
-    const barOptions = {
-
-
-      xAxis: { type: 'category' },
-      legend: {
-        left: '20%',
-        data: ['所有用户', '注册用户'],
-      },
-      series: [
-        { type: 'bar', name: '所有用户', datasetIndex: 0 },
-        { type: 'bar', name: '注册用户' },
-      ],
-      dataset: {
-        id: 'bar',
-        dimensions: ['fromName', 'userCount', 'registered'],
-        source: source,
-      },
+  function toEdit () {
+    router.push({
+      pathname: '/indexEcharts/userSource',
+      // query: {
+      //   a: 'b',
+      // },
+    });
+  }
 
-    };
-    const { person_estate_agent = 0, person_null = 0, person_realty_consultant = 0 } = this.dataset.pie || {};
-    const pieOptions = {
+  const dataset = data || {};
+  const source = dataset.columnar || [];
+
+  // const source = this.dataset.columnar || [];
+  const subtitle = '最近7天';
+  const baroptions = {
+    color: ['#286DD0', '#8565CE', '#6A96F8', '#F5749E', '#8B7FE2'],
+    xAxis: { type: 'category' },
+    legend: {
+      left: '20%',
+      data: ['所有用户', '注册用户'],
+    },
 
+    tooltip: {},
+
+    yAxis: {},
+    series: [
+      { type: 'bar', name: '所有用户', datasetIndex: 0 },
+      { type: 'bar', name: '注册用户' },
+    ],
+    dataset: {
+      id: 'bar',
+      dimensions: ['fromName', 'userCount', 'registered'],
+      source: source,
+    },
 
-      xAxis: {},
-      legend: {
-        left: '70%',
-        data: ['来源置业顾问', '来源全民经纪人', '自主进入'],
-      },
-      series: [
-        {
-          type: 'pie',
-          datasetIndex: 1,
-          center: ['75%', '50%'],
-          radius: [0, '50%'],
-        },
-      ],
-      dataset: {
-        id: 'pie',
-        source: [
-          { form: '来源置业顾问', value: person_realty_consultant },
-          { form: '来源全民经纪人', value: person_estate_agent },
-          { form: '自主进入', value: person_null },
-        ]
+  }
+  const { person_estate_agent = 0, person_null = 0, person_realty_consultant = 0 } = dataset.pie || {};
+  const pieoptions = {
+    // xAxis: {},
+    color: ['#286DD0', '#8565CE', '#6A96F8', '#F5749E', '#8B7FE2'],
+    legend: {
+      // left: '70%',
+      data: ['来源置业顾问', '来源全民经纪人', '自主进入'],
+    },
+    tooltip: {},
+    // yAxis: {},
+
+    series: [
+      {
+        type: 'pie',
+        // datasetIndex: 1,
+        center: ['50%', '50%'],
+        radius: [0, '50%'],
       },
+    ],
+    dataset: {
+      id: 'pie',
+      source: [
+        { form: '来源置业顾问', value: person_realty_consultant },
+        { form: '来源全民经纪人', value: person_estate_agent },
+        { form: '自主进入', value: person_null },
+      ]
+    },
 
-    };
-    // 绘制图表
-    myChart.setOption({
-      // ...this.reportOpts,
-      xAxis: { type: 'category' },
-        legend: {
-          left: '20%',
-          data: ['所有用户', '注册用户'],
-        },
-        series: [
-          { type: 'bar', name: '所有用户', datasetIndex: 0 },
-          { type: 'bar', name: '注册用户' },
-        ],
-        dataset: {
-          id: 'bar',
-          dimensions: [ 'fromName', 'userCount', 'registered' ],
-          source: source,
-        },
-    });
 
 
-  }
 
 
-  componentDidMount () {
-    this.initCharts();
   }
-  componentDidUpdate () {  //当图表切换的时候，重新执行
-    this.initCharts();
+  function handleSelectChange (e) {
+    // eslint-disable-next-line no-console
+    console.log(e)
   }
 
+  //表格
+  const dataSource = [
+    {
+      name: '置业顾问',
+      status: '1',//显示停用
+    },
+    {
+      name: '置业经理',
+      status: '1',//停用
+    },
+  ];
+
+  const columns = [
+    // {
+    //   title: '商品图片',
+    //   dataIndex: 'img',
+    //   key: 'img',
+    //   align: 'center',
+  
+    //   render: (text, record) => <img src={record.img} className={channels.touxiang} />,
+    // },
+    {
+      title: '角色名称',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center',
+      render: text => <a>{text}</a>,
+    },
+  
+    {
+      title: '操作  ',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+  
+      render: () => <>11</>
+       
+    },
+  ];
 
+  const style = {
+    width: '100%',
+    height: '400px',
 
-  render () {
-    this.piedata = this.props.data;
-    this.dataset = this.piedata || {};
+  }
+  const styles = {
+    width: '100%',
+    height: '400px',
 
-    return (
+  }
 
 
+  return (
+    <>
       <div>
-        {/* 饼图 */}
-
-        {/* <div class="chart-box" v-if="mode == 'all' || mode == 'report'">
-      <h3>用户来源 <small>{{subtitle}}</small></h3>
-      <v-chart v-loading="loading" class="chart" options="options" />
-    </div>
-    <div class="chart-box" v-if="mode == 'all' || mode == 'table'">
-      <el-select v-model="userType">
-        <el-option label="所有用户" value="all"></el-option>
-        <el-option label="注册用户" value="registered"></el-option>
-      </el-select>
-      <el-table v-loading="loading" data="tableData"  border  center  style="width: 100%; margin-top: 16px" height="400">
-        <el-table-column v-for="(item, index) in tableTitle" key="index" label="item" prop="index == 0 ? 'label' : item"></el-table-column>
-      </el-table>
-    </div> */}
-
-        <div id="usersourcebar" style={{ width: '1060px', height: '560px' }}></div>
-
+        <h3>用户来源 <small>{subtitle}</small></h3>
+        <Row>
+          <Col span={16}>
+            <EChart options={baroptions} style={style} /></Col>
+          <Col span={8}>
+            <EChart options={pieoptions} style={styles} /></Col>
+        </Row>
       </div>
-    );
-  }
+      <Select style={{ width: '180px' }} placeholder="所有用户" onChange={handleSelectChange}>
+        <Option value={0}>所有用户</Option>
+        <Option value={1}>注册用户</Option>
+      </Select>
+
+
+      <Table dataSource={dataSource} columns={columns} />
+
+    </>
+  )
 }
 
 export default UserSource;

src/pages/indexEcharts/index.jsx

@@ -1,7 +1,7 @@
 
 import React, { useState, useEffect }  from 'react';
 import { Form, Input, Button, Icon, Select, message, Table, Divider, Row, Col, Tag, Pagination, Modal, DatePicker } from 'antd';
-import { FormattedMessage } from 'umi-plugin-react/locale';
+
 // import styles from '../../style/GoodsList.less';
 import router from 'umi/router';
 
@@ -11,40 +11,17 @@ import apis from '../../services/apis';
 import UserSource from './components/UserSource.jsx';
 
 
+const header = (props) => {
 
 
-const header = (props) => {
-  const [ data, setData ] = useState({records: []})
-  //柱图
-  
-  useEffect(() => {
-    userResource()
-  }, [])
-  
-  function userResource() {
-        request({
-          ...apis.indexEcharts.userResource,
-           params: { pageNum: 1, pageSize:9999}
-        }).then((data) => {
-            // console.log(data , '3333')
-            setData(data)
-        })
-      }
-
-  
-
-  
-
-
-
-  const { getFieldDecorator } = props.form
   return (
 
     <>
-     <UserSource data={data} ></UserSource>
+    {/* <div>2222</div> */}
+     <UserSource  ></UserSource>
     </>
   )
 }
-const WrappedHeader = Form.create({ name: 'header' })(header);
 
-export default WrappedHeader
+
+export default  header

src/pages/indexEcharts/userSource.jsx

@@ -0,0 +1,77 @@
+import dayjs from 'dayjs';
+import React from 'react';
+import {Radio, DatePicker,  Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, Breadcrumb } from 'antd';
+
+import UserSource from './components/UserSource.jsx';
+// import XForm, { FieldTypes } from '../../components/XForm';
+import moment from 'moment';
+
+
+const header = props => {
+  const { RangePicker } = DatePicker;
+  function onChange(dates, dateStrings) {
+    console.log('From: ', dates[0], ', to: ', dates[1]);
+    console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
+  }
+
+
+  const handleSubmit = (e, props) => {
+    e.preventDefault();
+    // props.form.validateFields((err, values) => {
+    //   if (!err) {
+    //     getList({ pageNum: 1, pageSize: 10, ...values })
+    //   }
+    // });
+  }
+
+
+  function getDataOf(days){      
+    // const endDate = new Date()
+    // const startDate = dayjs().subtract(days, 'day').toDate()
+
+    // this.$refs.chart.getData({ startDate, endDate })
+  }
+
+  function onChange(e) {
+    console.log(`radio checked:${e.target.value}`);
+  }
+
+  return (<>
+  {/* <el-button type="text" @click="() => getDataOf(7)">最近7天</el-button>
+      <el-button type="text" @click="() => getDataOf(30)">最近1月</el-button>
+      <el-date-picker
+        v-model="dateRange"
+        type="daterange"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        style="margin-left: 16px">
+      </el-date-picker>
+      <el-button type="primary" icon="el-icon-search" style="margin-left: 32px" @click="search">查询</el-button>
+    </div>
+    <user-source ref="chart" mode="all"></user-source> */}
+  <Radio.Group onChange={onChange} defaultValue="a">
+        <Radio.Button value="a" onClick={getDataOf(7)}>最近7天</Radio.Button>
+        <Radio.Button value="b" onClick={getDataOf(30)}>最近1月</Radio.Button>
+      </Radio.Group>
+      <RangePicker
+      ranges={{
+        Today: [moment(), moment()],
+        'This Month': [moment().startOf('month'), moment().endOf('month')],
+      }}
+      showTime
+      format="YYYY/MM/DD HH:mm:ss"
+      // onChange={onChange}
+    />
+     <Button type="primary" htmlType="submit" >
+            查询
+          </Button>
+  <div>
+    
+
+    <UserSource ></UserSource>
+  </div>
+  </>
+  )
+}
+
+export default header