index.js

import React from 'react'
import {Row ,Card, Col ,Tabs ,Table, notification, Modal } from 'antd'
import './index.less'
import ReactEcharts from 'echarts-for-react';
import WhiteBar from  '../Common/WhiteBar/index'
import arrow from  '@images/arrow.svg'
// import echartTheme from '../../config/echartTheme'
// import echarts from 'echarts'
// 引入饼图和折线图
import 'echarts/lib/chart/line'
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';



const TabPane = Tabs.TabPane;


const gridStyle = {
  textAlign: 'center',
  height:115,
  minWidth:200,
  marginLeft:10
};
function tableChange(key) {
  console.log(key);
}


export default class Contnet extends React.Component{
  state={
    
  }
  componentDidMount(){
    const data = [
      {
          time:'0',
          views:66,
          users:'78',
          visits:'99',
          ip:'24',
          outRate:'22.2%',
          onlineAvgTime:'00:00:22',
      },
      {
        time:'0',
          views:66,
          users:'78',
          visits:'99',
          ip:'24',
          outRate:'22.2%',
          onlineAvgTime:'00:00:22',
      },
      {
        time:'0',
        views:66,
        users:'78',
        visits:'99',
        ip:'24',
        outRate:'22.2%',
        onlineAvgTime:'00:00:22',
      },
    ]

    data.map((item,index)=>{
        item.key = index;
    })

    this.setState({
        dataSource: data
    })
  
  }

 


  getOption = ()=>{
    let option = {
      title: {
          // text: '用户骑行订单'
      },
      tooltip: {
          trigger: 'axis'
      },
      legend: {
        data:['今天','昨天','7天前','30天前']
       },
       grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
      xAxis: {
          data: [
              '周一',
              '周二',
              '周三',
              '周四',
              '周五',
              '周六',
              '周日'
          ]
      },
      yAxis: {
          type: 'value'
      },
      series: [
          {
              name: '今天',
              type: 'line',
              data: [
                  1000,
                  2000,
                  1500,
                  3000,
                  2000,
                  1200,
                  800
              ]
          },
          {
              name: '昨天',
              type: 'line',
              data: [
                  100,
                  2500,
                  1600,
                  200,
                  4500,
                  200,
                  3500
              ]
          },
          {
              name: '7天前',
              type: 'line',
              data: [
                  1100,
                  500,
                  1230,
                  1250,
                  2560,
                  329,
                  495
              ]
          },
          {
              name: '30天前',
              type: 'line',
              data: [
                  100,
                  380,
                  4890,
                  1985,
                  952,
                  2581,
                  487
              ]
          },
      ]
  }
    return option;
  }

 

  onRowClick = (record,index)=>{
    let selectKey = [index];
    // Modal.info({
    //   title:"信息",
    //   content:`用户名：${record.userName}, 用户爱好：${record.interest}`
    // })
    this.setState({
      selectedRowKeys:selectKey,
      selectedItem:record

    })
  }


  render(){
    const columns = [
      {
          title:'时间',
          key:'time',
          dataIndex:'time'
      },
      {
          title: '浏览量(PV)',
          key: 'views',
          dataIndex: 'views'
      },
      {
          title: '独立用户(UV)',
          key: 'users',
          dataIndex: 'users',
          // render(sex){
          //     return sex ==1 ?'男':'女'
          // }
      },
      {
          title: '访问次数(W)',
          key: 'visits',
          dataIndex: 'visits',
          // render(state){
          //     let config  = {
          //         '1':'咸鱼一条',
          //         '2':'风华浪子',
          //         '3':'北大才子',
          //         '4':'百度FE',
          //         '5':'创业者'
          //     }
          //     return config[state];
          // }
      },
      {
          title: '独立IP',
          key: 'ip',
          dataIndex:'ip'
      },
      {
          title: '跳出率',
          key: 'outRate',
          dataIndex: 'outRate'
      },
      {
          title: '平均在线时长',
          key: 'onlineAvgTime',
          dataIndex: 'onlineAvgTime'
      },
       
    ]

  

    return (
      <div className="bg">
        <Row>
          <div className="realTime">
            <img src={require('../../resource/assets/images/realTime.svg')} alt=''/>
            <span>实时数据    12:00:00</span>
          </div>
          <div className="kpi">
          <WhiteBar title="关键指标" />
          </div>
          <div className='panel' style={{padding:'10px 20px'}} >
            <Row  gutter={15}>
              <Col span={6}>
                <Card style={gridStyle}  bordered={false}>
                  <div className='pv'>浏览量（PV）</div>
                  <div className='desBox'>
                    <img className='img' src={require('../../resource/assets/images/liulan.jpg')} alt=""/>
                    <div className='des'>
                      <div className="number">253</div>
                      <div className='number2'>日112.61%
                        <img className='nimg' src={arrow} alt=""/>
                      </div>

                    </div>
                  </div>
                </Card>
              </Col>
              <Col span={6}>
              <Card style={gridStyle}  bordered={false}>
                  <div className='pv'>独立用户（UV）</div>
                  <div className='desBox'>
                    <img className='img' src={require('../../resource/assets/images/user.jpg')} alt=""/>
                    <div className='des'>
                      <div className="number">253</div>
                      <div className='number2'>日112.61%
                        <img className='nimg' src={arrow} alt=""/>
                      </div>

                    </div>
                  </div>
                </Card>
              </Col>
              <Col span={6}>
              <Card style={gridStyle}  bordered={false}>
                  <div className='pv'>访问次数（W）</div>
                  <div className='desBox'>
                    <img className='img' src={require('../../resource/assets/images/times.jpg')} alt=""/>
                    <div className='des'>
                      <div className="number">253</div>
                      <div className='number2'>日112.61%
                      <img className='nimg' src={arrow} alt=""/>
                      </div>

                    </div>
                  </div>
                </Card>
              </Col>
              <Col span={6}>
              <Card style={gridStyle}  bordered={false}>
                  <div className='pv'>独立IP</div>
                  <div className='desBox'>
                    <img className='img' src={require('../../resource/assets/images/ip.jpg')} alt=""/>
                    <div className='des'>
                      <div className="number">253</div>
                      <div className='number2'>日112.61%
                      <img className='nimg' src={arrow} alt=""/>
                      </div>

                    </div>
                  </div>
                </Card>
              </Col>
              
            </Row>
          </div>

          <div className='tabs' >
            <Tabs className='tab' defaultActiveKey="1" onChange={tableChange}>
              <TabPane   tab="小时指标" key="1" >
              <WhiteBar title="走势图" />
                <div style={{padding:'10px 20px 10px 30px'}}>
                  <Card style={{padding:-20}} >
                    <ReactEcharts option = {this.getOption()} />
                  </Card>
                </div>
              
              </TabPane>
              {/* <TabPane  tab="浏览量" key="2" style={{height:48}}>
              <WhiteBar title="详细数据" />
                
              </TabPane>
              <TabPane tab="独立用户(UV)" key="3">Content of Tab Pane 3</TabPane>
              <TabPane tab="访问次数(W)" key="4">Content of Tab Pane 3</TabPane>
              <TabPane tab="独立IP" key="5">Content of Tab Pane 3</TabPane>
              <TabPane tab="跳出率" key="6">Content of Tab Pane 3</TabPane>
              <TabPane tab="平均在线时长" key="7">Content of Tab Pane 3</TabPane> */}
            </Tabs>
          </div>

          <div className="detailData">
            <WhiteBar title="详细数据" />
            <div style={{backgroundColor:'#fff',margin:'10px 20px 10px 30px'}}>
                <Table 
                    columns={columns}
                    // rowSelection ={rowCheckSelection}
                    // onRow = {(record,index)=>{
                    //    return {
                    //      onClick:()=>{
                    //        this.onRowClick(record,index)
                    //      }
                    //    }
                    // }}
                    dataSource={this.state.dataSource}
                    pagination={false}
                />
            </div>
          </div>

        </Row>
          

      </div>
    )
  }
}