MedicalWisdomCheckSys/src/pages/KeepImprove/qualityRating/index.tsx

/*
 * @Author: your name
 * @Date: 2021-09-26 16:56:46
 * @LastEditTime: 2021-10-09 15:55:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /MedicalWisdomCheckSys/src/pages/KeepImprove/ qualityRating/index.tsx
 */


import React, { useState, useEffect } from 'react'
import MccsPageContainer from '@/components/MccsPageContainer/index';
import { Column, DualAxes } from '@ant-design/charts';

import { getTableData, getColumnData } from './serve';
import './index.less';


type QualityRatingType = {

}

type TableDataItemType = {
    typeLevel: string,
    requirements: string,
    site: string,
    target: string,
    self: string,
    system: string
}


const setColor = (type:string) => {
    switch (type) {
        case 'A':
            return '#69D1CC';
            break
        case 'B':
            return '#80ABFF';
            break
        case 'C':
            return '#FFC080';
            break
        case 'D':
            return '#3377FF';
            break
        case 'E':
            return '#690';
            break
    }
}


const QualityRating: React.FC<QualityRatingType> = (props) => {


    const [tableData, setTableData] = useState<TableDataItemType[]>([]);
    const [mapData, setMapData] = useState<any>([]);
    const [lineData, setLineData] = useState<any>([]);

    const getTableDataFunc = async () => {
        const resp = await getTableData();
        if (resp) {
            setTableData(resp);
            const lineArr = resp.map((t: any) => {
                //设置辅助线
                return {
                    type: 'line',
                    start: ['min', Number(t.requirements.replace(/[^0-9]/ig, ""))],
                    end: ['max', Number(t.requirements.replace(/[^0-9]/ig, ""))],
                    text: {
                        content: `要求值${Number(t.requirements.replace(/[^0-9]/ig, ""))}%`,
                        position: 'right',
                        offsetY: 7,
                        offsetX:70,
                        style: { textAlign: 'right', fill:setColor(t.typeLevel)},

                    },
                    style: {
                        lineDash: [5, 5],
                        stroke:setColor(t.typeLevel),
                    },
                }
            });
            setLineData(lineArr);
        }
    }

    const getMapData = async () => {
        const resp = await getColumnData();
        if (resp) {
            const mapData = resp;
            let dataArr: any[] = [];//柱形图数据

            mapData[0].qualityTypeList.forEach((a: any, index: number) => {
                const tempArr = mapData.map((a: any) => {
                    return {
                        name: a.qualityTypeList[index].levelType,
                        xname: a.labelName,
                        value: Number(a.qualityTypeList[index].levelValue.replace("%", ""))
                    }
                });

                dataArr = dataArr.concat([...tempArr]);
            });
            setMapData([...dataArr]);
        }
    }

    useEffect(() => {
        getTableDataFunc();
        getMapData();
    }, []);



    return (
        <MccsPageContainer>
            <div className='QualityRatingContent'>
                <div className='blockTitle'>质量评级统计表单</div>
                <div className='tableWrap'>
                    <div className='columnsWrap'>
                        <div className='list'>类型</div>
                        <div className='list'>要求</div>
                        {/* <div className='list'>现场查核</div> */}
                        <div className='list'>目标</div>
                        <div className='list'>自评</div>
                        <div className='list'>系统评分</div>
                    </div>
                    <div className='row'>
                        {
                            tableData.map((item, index) => {
                                return (
                                    <div className='rowList' key={index}>
                                        <div className='list'>{item.typeLevel}</div>
                                        <div className='list'>{item.requirements}</div>
                                        {/* <div className='list'>{item.site}</div> */}
                                        <div className='list'>{item.target}</div>
                                        <div className='list'>{item.self}</div>
                                        <div className='list'>{item.system}</div>
                                    </div>
                                )
                            })
                        }

                    </div>
                </div>
                <div className='blockTitle'>质量评级分析图</div>

                {
                    lineData && (
                        <Column
                            data={mapData}
                            isGroup={true}
                            xField='xname'
                            yField='value'
                            seriesField='name'
                            annotations={
                                lineData
                                // {
                                //     type: 'line',
                                //     start: ['min', 25],
                                //     end: ['max', 25],
                                //     text: {
                                //       content: '要求值25%',
                                //       position: 'right',
                                //       offsetY: 18,
                                //       style: { textAlign: 'right',fill: '#69D1CC',},

                                //     },
                                //     style: {
                                //       lineDash: [5, 5],
                                //       stroke: '#69D1CC',
                                //     },
                                // },
                                // {
                                //     type: 'line',
                                //     start: ['min', 50],
                                //     end: ['max', 50],
                                //     text: {
                                //       content: '要求值50%',
                                //       position: 'right',
                                //       offsetY: 18,
                                //       style: { textAlign: 'right',fill: '#80ABFF',},

                                //     },
                                //     style: {
                                //       lineDash: [5, 5],
                                //       stroke: '#80ABFF',
                                //     },
                                // },
                                // {
                                //     type: 'line',
                                //     start: ['min', 90],
                                //     end: ['max', 90],
                                //     text: {
                                //       content: '要求值90%',
                                //       position: 'right',
                                //       offsetY: 18,
                                //       style: { textAlign: 'right',fill: '#FFC080',},

                                //     },
                                //     style: {
                                //       lineDash: [5, 5],
                                //       stroke: '#FFC080',
                                //     },
                                // },
                                // {
                                //     type: 'line',
                                //     start: ['min', 25],
                                //     end: ['max', 25],
                                //     text: {
                                //       content: '要求值',
                                //       position: 'right',
                                //       offsetY: 18,
                                //       style: { textAlign: 'right',fill: '#3377FF',},

                                //     },
                                //     style: {
                                //       lineDash: [5, 5],
                                //       stroke: '#3377FF',
                                //     },
                                // },
                                // {
                                //     type: 'line',
                                //     start: ['min', 25],
                                //     end: ['max', 25],
                                //     text: {
                                //       content: '要求值',
                                //       position: 'right',
                                //       offsetY: 18,
                                //       style: { textAlign: 'right',fill: '#690',},

                                //     },
                                //     style: {
                                //       lineDash: [5, 5],
                                //       stroke: '#690',
                                //     },
                                // },
                                // ]
                            }
                            label={{
                                position: 'middle',
                                content: function content(item) {
                                    return '';
                                },
                                layout: [
                                    { type: 'interval-adjust-position' },
                                    { type: 'interval-hide-overlap' },
                                    { type: 'adjust-color' },
                                ],
                            }}
                            tooltip={{
                                formatter: (datum: any) => {
                                    return { name: datum.name, value: datum.value + '%' };
                                },
                            }}
                            color={
                                (_ref) => {
                                    var type = _ref.name;
                                    if (type === 'A') {
                                        return '#69D1CC';
                                    }
                                    if (type === 'B') {
                                        return '#80ABFF';
                                    }
                                    if (type === 'C') {
                                        return '#FFC080';
                                    }
                                    if (type === 'D') {
                                        return '#3377FF';
                                    }
                                    if (type === 'E') {
                                        return '#690';
                                    }
                                    return '#3070F2';
                                }
                            }
                            maxColumnWidth={40}

                        />
                    )
                }
            </div>
        </MccsPageContainer>
    )
}

export default QualityRating