store 目录

//actionCreators.js
import * as actionTypes from "./constants";
import {
    GetWST_MiddleList,
    GetTop_LeftList,
    GetWST_Lower_LeftList,
    GetWST_Low_MiddleList,
    GetWST_Right_TopList,
    GetWST_Lower_RightList
} from "../api/api";

export const dispatchRightBottomData = data => ({
    type: actionTypes.RIGHT_BOTTOM,
    data
})
export const dispatchRightTopData = data => ({
    type: actionTypes.RIGHT_TOP,
    data
})
export const dispatchMiddleData = data => ({
    type: actionTypes.MIDDLE_TOP,
    data
})
export const dispatchMiddleBottomData = data => ({
    type: actionTypes.MIDDLE_BOTTOM,
    data
})

export const dispatchLow_LEFT_TOP = data => ({
    type: actionTypes.LEFT_TOP,
    data
})
export const dispatchLow_LEFT_BOTTOM = data => ({
    type: actionTypes.LEFT_BOTTOM,
    data
})

//右下
export const getRightBottomData = (data) => {
    return dispatch => {
        GetWST_Lower_RightList(data).then(res => {
            dispatch(dispatchRightBottomData(res))
        }).catch(err => {})
    }
}

//右上
export const getRightTopData = () => {
    return dispatch => {
        GetWST_Right_TopList().then(res => {
            dispatch(dispatchRightTopData(res))
        }).catch(err => {})
    }
}


//中下
export const getMiddleBottomData = () => {
    return dispatch => {
        GetWST_Low_MiddleList().then(res => {
            dispatch(dispatchMiddleBottomData(res))
        }).catch(err => {})
    }
}

//中间地图
export const getMiddleData = () => {
    return dispatch => {
        GetWST_MiddleList().then(res => {
            dispatch(dispatchMiddleData(res))
        }).catch(err => {})
    }
}
//左上

export const getLeftTopData = (name) => {
    return dispatch => {
        GetTop_LeftList(name).then(res => {
            dispatch(dispatchLow_LEFT_TOP(res))
        }).catch(err => {})
    }
}

//左下
export const getLeftBottomData = () => {
    return dispatch => {
        GetWST_Lower_LeftList().then(res => {
            dispatch(dispatchLow_LEFT_BOTTOM(res))
        }).catch(err => {})
    }
}
//constants.js
export const MIDDLE_TOP = 'MIDDLE_TOP';
export const LEFT_TOP = 'LEFT_TOP';
export const LEFT_BOTTOM = 'LEFT_BOTTOM';
export const MIDDLE_BOTTOM = 'MIDDLE_BOTTOM';
export const RIGHT_TOP = 'RIGHT_TOP';
export const RIGHT_BOTTOM = 'RIGHT_BOTTOM';
//index.js
import { createStore, compose, applyMiddleware } from "redux";
import thunk from "redux-thunk";

import reducer from "./reducer";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)));

export default store;
//reducer.js
import * as actionTypes from "./constants";

const defaultState = {
    middleTopData: [],
    MIDDLE_BOTTOM: [],
    LEFT_TOP: [],
    LEFT_BOTTOM: [],
    RIGHT_TOP: [],
    RIGHT_BOTTOM: []
}

export default (state = defaultState, action) => {
    switch (action.type) {
        case actionTypes.RIGHT_BOTTOM:
            return Object.assign({}, state, {
                RIGHT_BOTTOM: action.data
            })
        case actionTypes.RIGHT_TOP:
            return Object.assign({}, state, {
                RIGHT_TOP: action.data
            })
        case actionTypes.MIDDLE_TOP:
            return Object.assign({}, state, {
                middleTopData: action.data
            })
        case actionTypes.MIDDLE_BOTTOM:
            return Object.assign({}, state, {
                MIDDLE_BOTTOM: action.data
            })
        case actionTypes.LEFT_TOP:
            return Object.assign({}, state, {
                LEFT_TOP: action.data
            })
        case actionTypes.LEFT_BOTTOM:
            return Object.assign({}, state, {
                LEFT_BOTTOM: action.data
            })
        default:
            return state;
    }
}
//main.js
import React, { Component } from 'react'
import { connect } from "react-redux";
import './main.less';

import LeftTop from '../left/left-top'
import LeftBottom from '../left/left-bottom'

import MiddleTop from '../middle/middle-top'
import MiddleBottom from '../middle/middle-bottom'

import RightTop from '../right/right-top'
import RightBottom from '../right/right-bottom'

import { getMiddleData, getMiddleBottomData, getLeftTopData, getLeftBottomData, getRightTopData, getRightBottomData } from "../../store/actionCreators";

class Main extends Component {
    componentDidMount() {
        this.props.getMiddleDataDispatch()
    }

    render() {
        return (
            <div className='main '>
                <div className='header'></div>
                <div className='flex'>
                    <div className='left'>
                        <LeftTop></LeftTop>
                        <LeftBottom></LeftBottom>
                    </div>
                    <div className='middle'>
                        <MiddleTop></MiddleTop>
                        <MiddleBottom></MiddleBottom>
                    </div>
                    <div className='right'>
                        <RightTop></RightTop>
                        <RightBottom></RightBottom>
                    </div>
                </div>
            </div>
        )
    }
}


const mapStateToProps = (state) => ({})

const mapDispatchToProps = (dispatch) => {
    return {
        getMiddleDataDispatch() {
            dispatch(getMiddleData());
            dispatch(getMiddleBottomData());
            dispatch(getLeftTopData());
            dispatch(getLeftBottomData());
            dispatch(getRightTopData());
            dispatch(getRightBottomData());
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Main);
left-top.js
import React, { Component } from 'react'
import './left-top.less'
import Echarts from 'echarts'
import { connect } from 'react-redux'
import { Pagination } from 'antd';


class lefTtop extends Component {

    constructor() {
        super()
        this.state = {
            show: false,
            data: []
        }
    }
    getHeight = () => {
        var innerHeight = window.innerHeight;
        return innerHeight;
    }

    shouldComponentUpdate(nextProps, nextState) {
        this.setMap(nextProps.LEFT_TOP)
        return true
    }
    setMap = (data) => {

        var pie = Echarts.init(document.getElementById('pie'));
        pie.setOption({
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)',

            },
            color: ['#57f780', '#578cf7', '#dbf757', '#ffad56', '#f86467'],
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 20,
                top: 30,
                bottom: 20,
                data: ['一年以上', '6-12月', '3-6月', '1-3月', '1个月之内'],
                textStyle: {
                    color: '#ffffff'
                }
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    magicType: {
                        show: true,
                        type: ['pie']
                    },
                }
            },
            series: [
                {
                    name: '面积模式',
                    type: 'pie',
                    radius: [this.getHeight() * 0.06, this.getHeight() * 0.16],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    data: [
                        { value: parseInt(data[0].value), name: '1个月之内' },
                        { value: parseInt(data[1].value), name: '1-3月' },
                        { value: parseInt(data[2].value), name: '3-6月' },
                        { value: parseInt(data[3].value), name: '6-12月' },
                        { value: parseInt(data[4].value), name: '一年以上' },
                    ]
                }
            ]
        })
        window.addEventListener('resize', () => {
            pie.resize();
        });
        pie.on('click', (params) => {
            this.setState({
                show: true,
            })
        })
    }
    Show = () => {
        this.setState({
            show: false,
        })
    }

    render() {

        return (
            <div className='lefTtop'>
                <div className='leftTop-header flex'>
                    <div className='leftTop-header-left flex-1'>应收款回收比例各区排名</div>
                </div>
                <div id="pie" className="pie" style={{ width: '100%', height: '100%' }}></div>
                {this.state.show ? <div className='pop-up'>
                    <div className='pop-center'>
                        <div className='pop-header tc flex'>
                            <div className='pop-derive '>导出</div>
                            <div onClick={() => { this.Show() }} className='pop-clone'>Х</div>
                        </div>
                        <div className='pop-container'>
                            <div className='flex tc flex-title'>
                                <div className='flex-1'>序号</div>
                                <div className='flex-1'>地址</div>
                                <div className='flex-1'>工程名称</div>
                                <div className='flex-1'>工程类型</div>
                                <div className='flex-1'>项目经理</div>
                                <div className='flex-1'>验收时间</div>
                                <div className='flex-1'>标准时间</div>
                                <div className='flex-1'>已用时间</div>
                            </div>
                            <div className='flex-center flex tc'>
                                <div className='flex-1'>序号</div>
                                <div className='flex-1'>地址</div>
                                <div className='flex-1'>工程名称</div>
                                <div className='flex-1'>工程类型</div>
                                <div className='flex-1'>项目经理</div>
                                <div className='flex-1'>验收时间</div>
                                <div className='flex-1'>标准时间</div>
                                <div className='flex-1'>已用时间</div>
                            </div>
                        </div>
                        <Pagination className='Pagination' defaultCurrent={1} total={50} />
                    </div>
                </div> : ''}

            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        LEFT_TOP: state.LEFT_TOP
    }
}
export default connect(mapStateToProps)(lefTtop)
//main.js
import React, { Component } from 'react'
import { connect } from "react-redux";
import './main.less';

import LeftTop from '../left/left-top'
import LeftBottom from '../left/left-bottom'

import MiddleTop from '../middle/middle-top'
import MiddleBottom from '../middle/middle-bottom'

import RightTop from '../right/right-top'
import RightBottom from '../right/right-bottom'

import { getMiddleData, getMiddleBottomData, getLeftTopData, getLeftBottomData, getRightTopData, getRightBottomData } from "../../store/actionCreators";

class Main extends Component {
    componentDidMount() {
        this.props.getMiddleDataDispatch()
    }

    render() {
        return (
            <div className='main '>
                <div className='header'></div>
                <div className='flex'>
                    <div className='left'>
                        <LeftTop></LeftTop>
                        <LeftBottom></LeftBottom>
                    </div>
                    <div className='middle'>
                        <MiddleTop></MiddleTop>
                        <MiddleBottom></MiddleBottom>
                    </div>
                    <div className='right'>
                        <RightTop></RightTop>
                        <RightBottom></RightBottom>
                    </div>
                </div>
            </div>
        )
    }
}


const mapStateToProps = (state) => ({})

const mapDispatchToProps = (dispatch) => {
    return {
        getMiddleDataDispatch() {
            dispatch(getMiddleData());
            dispatch(getMiddleBottomData());
            dispatch(getLeftTopData());
            dispatch(getLeftBottomData());
            dispatch(getRightTopData());
            dispatch(getRightBottomData());
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Main);

Lifelong learning lifelong benefit