/**
 *生命体征检测

 */
import React from 'react';
import {
    Card, Table, Input, Form, Select, Row, Col, Checkbox, Tabs,
    DatePicker, Button, Radio, Icon, Divider, message, Modal,
} from 'antd';
import {
    G2, Chart, Geom, Axis, Tooltip, Coord, Label,
    Legend, View, Guide, Shape, Facet, Util
} from "bizcharts";
import { dayFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import store from 'store';
import moment from 'moment';
import CommonPagination from 'components/pagination/index';
import '../style/Secondary.less';
const { RangePicker } = DatePicker;
const { Option } = Select;
const { TextArea } = Input;

class VitalSignsDetectionTabPane extends React.Component {
    constructor(props) {
        super(props)
        var userData = JSON.parse(sessionStorage.getItem('userData'))
        var patID = JSON.parse(sessionStorage.getItem('patID'))
        this.state = {
            signsData: [],
            activeKey: '1',
            SelectData:{}, //下拉
            value: '',
            valueText: '',
            visible: false, //异常处理弹框
            page: 1,
            total: 0,
            pageSize: 10,
            loading: false,
            vitalSignList:[],
            columns:[],
            patID: patID,
            userData: userData,
            selectID: '3', //状态id
            startTime: '',
            endTime: '',
            lifeTopList:[], //左上图形
            rightTopList:[], //图形
            rightBottomList:[], //图形
            leftBottomList:[], //图形
            selectedRowKeys:'',
            selectedRows: [],
            PopupData: [],
            regDateFrom:'',
            regDateTo: '',
            RDateFrom:'',
            RDateTo: '',
            LBDateFrom:'',
            LBDateTo: '',
            RBDateFrom:'',
            RBDateTo: '',
            normalQty:'',
            exceptionQty:'',
            qty:'', //总数
            unhandledExceptionQty: '',
            dataSource:[], //图表数据
            normalQtyL:'',
            exceptionQtyL:'',
            qtyL:'', //总数
            unhandledExceptionQtyL: '',
            dataSourceL:[], //图表数据

            normalQtyBL:'',
            exceptionQtyBL:'',
            qtyBL:'', //总数
            unhandledExceptionQtyBL: '',
            dataSourceBL:[], //图表数据
            normalQtyBR:'',
            exceptionQtyBR:'',
            qtyBR:'', //总数
            unhandledExceptionQtyBR: '',
            dataSourceBR:[], //图表数据
            data: {},
            dataRight: {},
            dataLeftBottom: [],
            dataRightBottom: [],
            disposeFlag: 'N',
            ids:[],
            parameterTableCode:'CXWeek',
            parameterTZCode:'TZWeek',
            parameterXLCode:'XLWeek',
            parameterXYCode:'XYWeek',
            parameterXTCode:'XTWeek',
            unit:'',
            unit2:'',
            unit3:'',
            unit4:'',
            totalWidth:'',
        };
        // 随访记录
        this.columns = [
            {
                key: 1,
                title: '测量时间',
                dataIndex: 'stkAdjNO',
                align: "center",
                width: '16%'
            },
            {
                key: 2,
                title: '血压',
                dataIndex: 'locDesc',
                align: "center",
                width: '10%'
            },
            {
                key: 3,
                title: '血糖',
                dataIndex: 'createDate',
                align: "center",
                width: '10%'
            },
            {
                key: 4,
                title: '心率',
                dataIndex: 'stkAdjNO',
                align: "center",
                width: '10%'
            },
            {
                key: 5,
                title: '脉搏',
                dataIndex: 'locDesc',
                align: "center",
                width: '10%'
            },
            {
                key: 6,
                title: '身高',
                dataIndex: 'createDate',
                align: "center",
                width: '8%'
            },
            {
                key: 7,
                title: '体重',
                dataIndex: 'stkAdjNO',
                align: "center",
                width: '8%'
            },
            {
                key: 8,
                title: 'BMI',
                dataIndex: 'locDesc',
                align: "center",
                width: '10%'
            },
            {
                key: 9,
                title: '状态',
                dataIndex: 'createDate',
                align: "center",
                width: '8%'
            },
            {
                key: 10,
                title: '备注',
                dataIndex: 'stkAdjNO',
                align: "center",
                width: '10%'
            },
        ];
    }

    componentDidMount() {
        let listData = document.querySelectorAll('.signs  .ant-table-body');
        if(listData.length>0){
            listData[0].style.height = (store.getState().tableHeight.y)/4 -30+ 'px';
        }
        this.graphicsData();
        this.initData();
        this.thisWeekDate('5', 'CXWeek');
    }
    initData=()=>{
        var params = {
            params: []
        }
        $http.post('urlDeault', this, {
            code: "03070075",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                       PopupData: res.result
                    })
                }
            }
        });
    }
    ///生命体征检测测量记录
    abnormalVitalSignList=()=>{
        this.setState({loading: true})
        var params = {
            params: [{
                patID:this.state.patID,   //病人ID
                dateFrom: this.state.startTime ? moment(this.state.startTime).format('YYYY-MM-DD'):'',
                dateTo: this.state.endTime ? moment(this.state.endTime).format('YYYY-MM-DD'):'',
                statusCode: this.state.selectID
            }],
            pagination: [
                {
                    pageSize:this.state.pageSize,
                    currentPage:this.state.page,
                }
            ],
        }
        $http.post('urlDeault', this, {
            code: "03070024",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        vitalSignList: res.result.list,
                        columns:res.result.table,
                        total: res.result.totalCount,
                        loading: false,
                        totalWidth:res.result.totalWidth
                    })
                }
            }
        });
    };
    ///处理异常接口
    abnormalVitalSignHandle=()=>{
        let arr = [];
        // if(this.state.selectData.length>0){
        //     for(var i =0; i<this.state.selectData.length; i++){
        //         arr.push(this.state.selectData[i].vitalSignID)
        //     }
        // }
        var params = {
            params: [{
                visitRecordIDs:this.state.choseID,
                exceptionMethodID:this.state.value,
                exceptionNote:this.state.valueText,
                exceptionUserID:this.state.userData.userID
            }]
        }
        $http.post('urlDeault', this, {
            code: "03070080",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.abnormalVitalSignList();
                    message.success(res.errorMessage);
                    this.handleCancel();
                    arr = [];
                }
            }
        });
    };

    //图形数据
    graphicsData=()=>{
        var params = {
            params: [{
                patID: this.state.patID ? this.state.patID : ''
            }]
        }
        $http.post('urlDeault', this, {
            code: "03070021",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    let arr = [];
                    let arr2 = [];
                    let arr3 = [];
                    let arr4 = [];
                    if(res.result.length>0){
                         let a = res.result.filter(item => item.vitalSignDesc == '身高'|| item.vitalSignDesc == '体重' || item.vitalSignDesc == 'BMI');
                        let b = res.result.filter(item => item.vitalSignDesc == '心率'|| item.vitalSignDesc == '脉搏');
                        let c = res.result.filter(item => item.vitalSignDesc == '血压');
                        let d = res.result.filter(item => item.vitalSignDesc == '体温');
                            arr.push(a);
                            arr2.push(b);
                            arr3.push(c);
                            arr4.push(d);
                        this.setState({lifeTopList: arr[0],rightTopList:arr2[0],dataLeftBottom: arr3[0] ,dataRightBottom: arr4[0]},()=>{
                            if(this.state.lifeTopList.length>0){
                                this.setState({data:this.state.lifeTopList[0]},()=>{
                                    this.thisWeekDate('1', 'TZWeek');
                                    // this.getgraphicsDetailsLeft();
                                })
                            }
                            if(this.state.rightTopList.length>0){
                                this.setState({dataRight:this.state.rightTopList[0]},()=>{
                                    this.thisWeekDate('2', 'XLWeek');
                                    // this.getgraphicsDetailsRight();
                                })

                            }
                            if(this.state.dataLeftBottom.length>0){
                                this.thisWeekDate('3', 'XYWeek');
                                // this.getgraphicsDetailsLeftBottom();
                            }
                           if(this.state.dataRightBottom.length>0){
                               this.thisWeekDate('4','XTWeek');
                               // this.getgraphicsDetailsRightBottom();
                           }

                        });

                    }
                }
            }
        });
    };

    getgraphicsDetailsLeft=()=>{
        var date = new Date()
        var params = {
            params: [{
                patID: this.state.patID,
                signTypeID: this.state.data.id,
                startDate: this.state.regDateFrom ? moment(this.state.regDateFrom).format(dayFormat) : moment(date).format(dayFormat),
                endDate: this.state.regDateTo ? moment(this.state.regDateTo).format(dayFormat) : moment(date).format(dayFormat),
            }]
        }
        $http.post('urlDeault', this, {
            code: "03070023",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        dataSource: res.result.data,
                        normalQty: res.result.normalQty,//正常
                        exceptionQty: res.result.exceptionQty,//异常
                        unhandledExceptionQty: res.result.unhandledExceptionQty,//待处理异常
                        qty: res.result.qty,//总数
                        unit2:res.result.data.length >0?res.result.data[0].unit:''
                    })
                }
            }
        });
    };
    getgraphicsDetailsRight=()=>{
        var date = new Date()
        var params = {
            params: [{
                patID: this.state.patID,
                signTypeID: this.state.dataRight.id,
                startDate: this.state.RDateFrom ? moment(this.state.RDateFrom).format(dayFormat) : moment(date).format(dayFormat),
                endDate: this.state.RDateTo ? moment(this.state.RDateTo).format(dayFormat) : moment(date).format(dayFormat),
            }]
        }
        $http.post('urlDeault', this, {
            code: "03070023",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        dataSourceL: res.result.data,
                        normalQtyL: res.result.normalQty,//正常
                        exceptionQtyL: res.result.exceptionQty,//异常
                        unhandledExceptionQtyL: res.result.unhandledExceptionQty,//待处理异常
                        qtyL: res.result.qty,//总数
                        unit3:res.result.data.length >0?res.result.data[0].unit:''
                    })
                }
            }
        });
    };
    getgraphicsDetailsLeftBottom=()=>{
        var date = new Date();
        var params = {
            params: [{
                patID: this.state.patID,
                signTypeID: this.state.dataLeftBottom[0].id,
                startDate: this.state.LBDateFrom ? moment(this.state.LBDateFrom).format(dayFormat) : moment(date).format(dayFormat),
                endDate: this.state.LBDateTo ? moment(this.state.LBDateTo).format(dayFormat) : moment(date).format(dayFormat),
            }]
        }
        $http.post('urlDeault', this, {
            code: "03070023",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        dataSourceBL: res.result.data,
                        normalQtyBL: res.result.normalQty,//正常
                        exceptionQtyBL: res.result.exceptionQty,//异常
                        unhandledExceptionQtyBL: res.result.unhandledExceptionQty,//待处理异常
                        qtyBL: res.result.qty,//总数
                        unit:res.result.data.length >0?res.result.data[0].unit:''
                    })
                }
            }
        });
    };
    getgraphicsDetailsRightBottom=()=>{
        var date = new Date()
        var params = {
            params: [{
                patID: this.state.patID,
                signTypeID: this.state.dataRightBottom[0]?this.state.dataRightBottom[0].id: '',
                startDate: this.state.RBDateFrom ? moment(this.state.RBDateFrom).format(dayFormat) : moment(date).format(dayFormat),
                endDate: this.state.RBDateTo ? moment(this.state.RBDateTo).format(dayFormat) : moment(date).format(dayFormat),
            }]
        }
        $http.post('urlDeault', this, {
            code: "03070023",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        dataSourceBR: res.result.data,
                        normalQtyBR: res.result.normalQty,//正常
                        exceptionQtyBR: res.result.exceptionQty,//异常
                        unhandledExceptionQtyBR: res.result.unhandledExceptionQty,//待处理异常
                        qtyBR: res.result.qty,//总数
                        unit4:res.result.data.length >0?res.result.data[0].unit:''
                    })
                }
            }
        });
    };
    showCancel=()=>{
        this.setState({visible: true})
    };
    handleCancel=()=>{
        this.setState({visible: false})
    };

    // 页码改变的回调，参数是改变后的页码及每页条数 入库单
    onChange = (page, pageSize) => {
        this.setState({page: page, pageSize: this.state.pageSize}, () => {
            // 重新调用查询方法
            this.abnormalVitalSignList();
        });
    };

    onShowSizeChange = (current, size) => {
        this.setState({page: current, pageSize: size}, () => {
            // 重新调用查询方法
            this.onChange(current,size);
        })
    };
    onChangeSelect=(v)=>{
        this.setState({selectID: v})
    };
    timeDate=(v)=>{
        this.setState({startTime: v[0], endTime: v[1],parameterTableCode:''},()=>{
            this.abnormalVitalSignList()
        })
    };
    onChangeRadio=(v)=>{
        this.setState({value: v.target.value})
    } ;
    onChangeText=(v)=>{
        this.setState({valueText: v.target.value})
    } ;
    typeTimeDate=(v)=>{
        this.setState({regDateFrom: v[0], regDateTo: v[1],parameterTZCode:''},()=>{
            this.getgraphicsDetailsLeft()
        })
    }
    rightTime=(v)=>{
        this.setState({RDateFrom: v[0], RDateTo: v[1],parameterXLCode:''},()=>{
            this.getgraphicsDetailsRight()
        })
    };
    LeftBottomTime=(v)=>{
        this.setState({LBDateFrom: v[0], LBDateTo: v[1],parameterXYCode:''},()=>{
            this.getgraphicsDetailsLeftBottom()
        })
    };
    rightBottomTime=(v)=>{
        this.setState({RBDateFrom: v[0], RBDateTo: v[1],parameterXTCode:''},()=>{
            this.getgraphicsDetailsRightBottom()
        })
    };

    onClickClass=(num,code)=>{
        if(num == '5'){
            this.setState({parameterTableCode: code});
        }else if(num == '1'){
            this.setState({ parameterTZCode:code});
        }else if(num == '2'){
            this.setState({parameterXLCode:code});
        }else if(num == '3'){
            this.setState({ parameterXYCode:code});
        }else if(num == '4'){
            this.setState({parameterXTCode:code});
        }





    }
    //获取本月
    thisMonthDate=(num,name)=>{
        this.onClickClass(num,name);
        // this.setState({
        //     [name]: name
        // });
        let nowDate = new Date();
        let cloneNowDate = new Date();
        let fullYear = nowDate.getFullYear();
        let month = nowDate.getMonth() + 1; // getMonth 方法返回 0-11，代表1-12月
        let endOfMonth = new Date(fullYear, month, 0).getDate(); // 获取本月最后一天
        function getFullDate(targetDate) {
            let D, y, m, d;
            if (targetDate) {
                D = new Date(targetDate);
                y = D.getFullYear();
                m = D.getMonth() + 1;
                d = D.getDate();
            } else {
                y = fullYear;
                m = month;
                d = date;
            }
            m = m > 9 ? m : '0' + m;
            d = d > 9 ? d : '0' + d;
            return y + '-' + m + '-' + d;
        };
        let endDate = getFullDate(cloneNowDate.setDate(endOfMonth));//当月最后一天
        let startDate = getFullDate(cloneNowDate.setDate(1));//当月第一天
        if(num=='1'){
            this.setState({regDateFrom:startDate, regDateTo: endDate},()=>{
                this.getgraphicsDetailsLeft();
            })
        }else if(num=='2'){
            this.setState({RDateFrom:startDate, RDateTo: endDate},()=>{
                this.getgraphicsDetailsRight();
            })
        }else if(num=='3'){
            this.setState({LBDateFrom:startDate, LBDateTo: endDate},()=>{
                this.getgraphicsDetailsLeftBottom();
            })
        }else if(num=='4'){
            this.setState({RBDateFrom:startDate, RBDateTo: endDate},()=>{
                this.getgraphicsDetailsRightBottom();
            })
        }else if(num=='5'){
            this.setState({startTime:startDate, endTime: endDate},()=>{
                this.abnormalVitalSignList()
            })
        }

    };
    //获取今天
    thisTodayDate=(num,name)=>{
        this.onClickClass(num,name);
        let nowDate = new Date();
        let endDate = moment(nowDate).format(dayFormat);//今天
        let startDate = moment(nowDate).format(dayFormat);//今天
        if(num=='1'){
            this.setState({regDateFrom:startDate, regDateTo: endDate},()=>{
                this.getgraphicsDetailsLeft();
            })
        }else if(num=='2'){
            this.setState({RDateFrom:startDate, RDateTo: endDate},()=>{
                this.getgraphicsDetailsRight();
            })
        }else if(num=='3'){
            this.setState({LBDateFrom:startDate, LBDateTo: endDate},()=>{
                this.getgraphicsDetailsLeftBottom();
            })
        }else if(num=='4'){
            this.setState({RBDateFrom:startDate, RBDateTo: endDate},()=>{
                this.getgraphicsDetailsRightBottom();
            })
        }else if(num=='5'){
            this.setState({startTime:startDate, endTime: endDate},()=>{
                this.abnormalVitalSignList()
            })
        }

    };
    //获取今年
    thisYearDate=(num,name)=>{
        this.onClickClass(num,name);
        let nowDate = new Date();
        var year1 = nowDate.getFullYear();
        var endDate = year1 + '-' + '01' + '-' + '01';
        // let endDate = moment(nowDate).format(dayFormat);//今天
        let startDate = moment(nowDate).format(dayFormat);//今天
        if(num=='1'){
            this.setState({regDateFrom: endDate, regDateTo: startDate},()=>{
                this.getgraphicsDetailsLeft();
            })
        }else if(num=='2'){
            this.setState({RDateFrom:endDate, RDateTo: startDate},()=>{
                this.getgraphicsDetailsRight();
            })
        }else if(num=='3'){
            this.setState({LBDateFrom:endDate, LBDateTo: startDate},()=>{
                this.getgraphicsDetailsLeftBottom();
            })
        }else if(num=='4'){
            this.setState({RBDateFrom:endDate, RBDateTo: startDate},()=>{
                this.getgraphicsDetailsRightBottom();
            })
        }else if(num=='5'){
            this.setState({startTime:endDate, endTime: startDate},()=>{
                this.abnormalVitalSignList()
            })
        }

    };
    //获取本周
    thisWeekDate=(num,name)=>{
        this.onClickClass(num,name);
        var nowTemp = new Date();//当前时间
        var oneDayLong = 24*60*60*1000 ;//一天的毫秒数
        var c_time = nowTemp.getTime() ;//当前时间的毫秒时间
        var c_day = nowTemp.getDay()||7;//当前时间的星期几
        var m_time = c_time - (c_day-1)*oneDayLong;//当前周一的毫秒时间
        var monday = new Date(m_time);//设置周一时间对象
        var m_year = monday.getFullYear();
        var m_month = monday.getMonth()+1;
        var m_date = monday.getDate();
        let endDate = m_year+'-'+m_month+'-'+m_date;
        let startDate = moment(nowTemp).format(dayFormat);//今天
        if(num=='1'){
            this.setState({regDateFrom:endDate, regDateTo: startDate},()=>{
                this.getgraphicsDetailsLeft();
            })
        }else if(num=='2'){
            this.setState({RDateFrom:endDate, RDateTo: startDate},()=>{
                this.getgraphicsDetailsRight();
            })
        }else if(num=='3'){
            this.setState({LBDateFrom:endDate, LBDateTo: startDate},()=>{
                this.getgraphicsDetailsLeftBottom();
            })
        }else if(num=='4'){
            this.setState({RBDateFrom:endDate, RBDateTo: startDate},()=>{
                this.getgraphicsDetailsRightBottom();
            })
        }else if(num=='5'){
            this.setState({startTime:endDate, endTime: startDate},()=>{
                this.abnormalVitalSignList()
            })
        }

    }

      //点击行，渲染当前行样式
      onClickRow = (record) => {
        return {
            onClick: () => {
                if (!Util.isEmpty(this.state.vitalSignID) && this.state.vitalSignID == record.vitalSignID) {
                    this.setState({
                        vitalSignID: '',
                        disposeFlag: 'N'
                    });
                } else {
                    this.setState({
                        vitalSignID: record.vitalSignID,
                        disposeFlag: record.disposeFlag
                    });
                }

            }
        };
    }

    //点击行，渲染当前行样式
    setRowClassName = (record) => {
        return record.vitalSignID === this.state.vitalSignID ? 'clickRowStyle' : '';
    }

    handleOnchange(ids,selectData){
        var code = []
        if(!Util.isEmpty(selectData)){
            for(var i=0;i<selectData.length;i++){
                if(selectData[i].disposeFlag == 'Y'){
                    code.push(selectData[i].vitalSignID)
                }
            }
        }
        this.setState({
            ids:ids,
            choseID:code
        })
    }


    render() {
        let {vitalSignList,columns,ids, totalWidth}=this.state;
        const cols = {
            signValueNumBer: {
                min: 0,
                range:[0,1],
                alias:this.state.unit
            },
            colDateTime: {
                range: [0, 1]
            },
        };
        const style = {
            width: '720px',
            padding:'10px'
        };
        const cols2 = {
            signValueNumBer: {
                min: 0,
                range:[0,1],
                alias:this.state.unit2
            },
            colDateTime: {
                range: [0, 1],
            }
        };
        const cols3 = {
            signValueNumBer: {
                min: 0,
                range:[0,1],
                alias:this.state.unit3
            },
            colDateTime: {
                range: [0, 1],
            }
        };
        const cols4 = {
            signValueNumBer: {
                min: 0,
                range:[0,1],
                alias:this.state.unit4
            },
            colDateTime: {
                range: [0, 1],
            }
        };
        const rowSelection = {
            ids,
            // selectedRowKeys: this.state.selectedRowKeys,
            // selectedRows: this.state.vouchingId,
            // onChange: (selectedRowKeys, selectedRows) => {
            //     this.setState({ selectedRowKeys, selectedRows })
            // }
            onChange:this.handleOnchange.bind(this),
            selectedRowKeys:ids
        };
        return <div className='VitalSignsDetectionTabPane' style={{height: store.getState().tableHeight.y+80 + 'px'}}>
            <Row>
                {/*<div style={{padding: '15px 0',background: '#fff'}}>*/}
                    {/*测量记录*/}
                {/*</div>*/}
                <div className='conditionCheck'>
                    <Col>
                        <span>
                            <a onClick={()=>{this.thisTodayDate('5','CXDay')}} className={this.state.parameterTableCode == 'CXDay' ? 'active' : ''}>今天</a>
                            <a onClick={()=>{this.thisWeekDate('5','CXWeek')}} className={this.state.parameterTableCode == 'CXWeek' ? 'active' : ''}>本周</a>
                            <a onClick={ ()=>{this.thisMonthDate('5','CXMonth')}} className={this.state.parameterTableCode == 'CXMonth' ? 'active' : ''}>本月</a>
                            <a onClick={()=>{this.thisYearDate('5','CXYear')}} className={this.state.parameterTableCode == 'CXYear' ? 'active' : ''}>今年</a>
                            <span>
                                指定日期 <RangePicker value={[moment(this.state.startTime),moment(this.state.endTime)]} style={{width: '16%'}} onChange={this.timeDate} />
                            </span>
                            <span style={{ marginLeft: '15px'}}>
                                状态  <Select allowClear value={this.state.selectID} style={{width: '10%'}} onChange={this.onChangeSelect}>
                                          <Option value='3' key='3'>全部</Option>
                                          <Option value='2' key='2'>异常</Option>
                                          <Option value='1' key='1'>未处理异常</Option>
                                     </Select>
                            </span>
                            <span>
                                <Button style={{margin: '0px 10px'}} type="primary" onClick={()=>this.abnormalVitalSignList()} >查询</Button>
                            </span>
                               <span>
                               <Button type="primary" onClick={this.showCancel} disabled={(this.state.disposeFlag == 'Y' || !Util.isEmpty(this.state.choseID)) ? false : true}>处理异常</Button>
                            </span>
                        </span>
                    </Col>
                    <Col>
                        <Table
                            rowSelection={rowSelection}
                            columns={columns.length>0?columns:this.columns}
                            dataSource={vitalSignList}
                            pagination={false}
                            onRow={this.onClickRow} bordered
                            rowClassName={this.setRowClassName}
                            scroll={{x: totalWidth ? totalWidth: '1000px', y: (store.getState().tableHeight.y)/4 + 'px'}}
                            rowKey={record => record.key}
                            className='signs'
                        />
                        <CommonPagination size='small' current={this.state.page} total={this.state.total} search= 'search'
                                          onShowSizeChange={this.onShowSizeChange.bind(this)} complete={true} dataSource={vitalSignList}
                                          loading={this.state.loading} onChange={this.onChange.bind(this)} />
                    </Col>
                </div>
                <div className='Graphics'>
                    <Col style={{width: '49.5%',float: 'left', background: '#fff',marginTop: '10px'}}>
                        {/*<div style={{padding: '7px 15px', fontWeight: '700', fontSize: '16px'}}>*/}
                            {/*升高/体重/BMI*/}
                        {/*</div>*/}
                        <div className='height'>
                            {this.state.lifeTopList.length>0 && this.state.lifeTopList.map((item, k)=>{
                                return <a key={k} onClick={()=>{
                                    this.setState({data: item},()=>{
                                        this.getgraphicsDetailsLeft();
                                    })
                                    }}>{item.vitalSignDesc}</a>
                            })}
                        </div>
                        <div className='Top'>
                            <span>累计测量次数 <span className='span'>{this.state.qty}</span></span>
                            <span style={{marginLeft: '15%'}}>正常次数 <span className='span'>{this.state.normalQty}</span></span>
                            <span style={{marginLeft: '15%'}}>异常次数 <span className='span T'>{this.state.exceptionQty}</span></span>
                            <span style={{marginLeft: '15%'}}>待处理异常次数 <span className='span T'>{this.state.unhandledExceptionQty}</span></span>
                            <div className='Graphics-top-top'>
                                 <span>
                                <a  onClick={()=>{this.thisTodayDate('1','TZDay')}} className={this.state.parameterTZCode == 'TZDay' ? 'active' : ''}>今天</a>
                                <a onClick={()=>{this.thisWeekDate('1', 'TZWeek')}} className={this.state.parameterTZCode == 'TZWeek' ? 'active' : ''}>本周</a>
                                <a onClick={ ()=>{this.thisMonthDate('1','TZMonth')}} className={this.state.parameterTZCode == 'TZMonth' ? 'active' : ''}>本月</a>
                                <a onClick={()=>{this.thisYearDate('1','TZYear')}} className={this.state.parameterTZCode == 'TZYear' ? 'active' : ''}>今年</a>
                                <span>
                                    指定日期 <RangePicker value={[moment(this.state.regDateFrom),moment(this.state.regDateTo)]} onChange={this.typeTimeDate} style={{width: '30%'}} />
                                </span>
                            </span>
                            </div>
                            <div>
                                <Chart height={320} style={style} width={700} data={this.state.dataSource} scale={cols2} forceFit>
                                    {/*label={{rotate: 50}}*/}
                                    <Axis name="colDateTime"  />
                                    <Axis name="signValueNumBer"
                                          label={{
                                              formatter: val => `${val}${this.state.unit2}`
                                          }}
                                    />
                                    <Tooltip
                                        crosshairs={{
                                            type: "y"
                                        }}
                                    />
                                    <Geom type="line" position="colDateTime*signValueNumBer" size={2} color="signType"/>
                                    <Geom
                                        type="point"
                                        position="colDateTime*signValueNumBer"
                                        size={4}
                                        shape={"circle"}
                                        style={{
                                            stroke: "#fff",
                                            lineWidth: 1
                                        }}
                                    />
                                </Chart>
                            </div>
                        </div>
                    </Col>
                    <Col style={{width: '49%',float: 'left', background: '#fff', marginLeft: '17px', marginTop: '10px'}}>
                        {/*<div style={{padding: '7px 15px', fontWeight: '700', fontSize: '16px'}}>*/}
                            {/*心率/脉搏*/}
                        {/*</div>*/}
                        <div className='height'>
                            {this.state.rightTopList.length>0 && this.state.rightTopList.map((item, k)=>{
                                return <a key={k} onClick={()=>{
                                    this.setState({dataRight: item},()=>{
                                        this.getgraphicsDetailsRight()
                                    });
                                    }}>{item.vitalSignDesc}</a>
                            })}
                            {/*<span>心率</span>*/}
                            {/*<span>脉搏</span>*/}
                        </div>
                        <div className='Top'>
                            <span>累计测量次数 <span className='span'>{this.state.qtyL}</span></span>
                            <span style={{marginLeft: '15%'}}>正常次数 <span className='span'>{this.state.normalQtyL}</span></span>
                            <span style={{marginLeft: '15%'}}>异常次数 <span className='span T'>{this.state.exceptionQtyL}</span></span>
                            <span style={{marginLeft: '15%'}}>待处理异常次数 <span className='span T'>{this.state.unhandledExceptionQtyL}</span></span>
                            <div className='Graphics-top-top'>
                                 <span>
                                <a onClick={()=>{this.thisTodayDate('2', 'XLDay')}}  className={this.state.parameterXLCode == 'XLDay' ? 'active' : ''}>今天</a>
                                <a onClick={()=>{this.thisWeekDate('2','XLWeek')}} className={this.state.parameterXLCode == 'XLWeek' ? 'active' : ''}>本周</a>
                                <a onClick={ ()=>{this.thisMonthDate('2', 'XLMonth')}} className={this.state.parameterXLCode == 'XLMonth' ? 'active' : ''}>本月</a>
                                <a onClick={()=>{this.thisYearDate('2', 'XLYear')}} className={this.state.parameterXLCode == 'XLYear' ? 'active' : ''}>今年</a>
                                <span>
                                    指定日期 <RangePicker value={[moment(this.state.RDateFrom),moment(this.state.RDateTo)]} onChange={this.rightTime} style={{width: '30%'}} />
                                </span>
                            </span>
                            </div>
                            <div>
                                <Chart height={320} style={style} data={this.state.dataSourceL} scale={cols3} forceFit>
                                    <Axis name="colDateTime" />
                                    <Axis name="signValueNumBer"
                                          label={{
                                              formatter: val => `${val}${this.state.unit3}`
                                          }}
                                    />
                                    <Tooltip
                                        crosshairs={{
                                            type: "y"
                                        }}
                                    />
                                    <Geom type="line" position="colDateTime*signValueNumBer" size={2} color="signType" />
                                    <Geom
                                        type="point"
                                        position="colDateTime*signValueNumBer"
                                        size={4}
                                        shape={"circle"}
                                        style={{
                                            stroke: "#fff",
                                            lineWidth: 1
                                        }}
                                    />
                                </Chart>
                            </div>
                        </div>
                    </Col>
                    <Col style={{width: '49.5%',float: 'left', background: '#fff', marginTop: '10px'}}>
                        <a className='BP'>
                            血压
                        </a>
                        <div className='Top'>
                            <span>累计测量次数 <span className='span'>{this.state.qtyBL}</span></span>
                            <span style={{marginLeft: '15%'}}>正常次数 <span className='span'>{this.state.normalQtyBL}</span></span>
                            <span style={{marginLeft: '15%'}}>异常次数 <span className='span T'>{this.state.exceptionQtyBL}</span></span>
                            <span style={{marginLeft: '15%'}}>待处理异常次数 <span className='span T'>{this.state.unhandledExceptionQtyBL}</span></span>
                            <div className='Graphics-top-top'>
                                 <span>
                                <a onClick={()=>{this.thisTodayDate('3', 'XYDay')}} className={this.state.parameterXYCode == 'XYDay' ? 'active' : ''}>今天</a>
                                <a onClick={()=>{this.thisWeekDate('3', 'XYWeek')}} className={this.state.parameterXYCode == 'XYWeek' ? 'active' : ''}>本周</a>
                                <a onClick={ ()=>{this.thisMonthDate('3', 'XYMonth')}} className={this.state.parameterXYCode == 'XYMonth' ? 'active' : ''}>本月</a>
                                <a onClick={()=>{this.thisYearDate('3','XYYear')}} className={this.state.parameterXYCode == 'XYYear' ? 'active' : ''}>今年</a>
                                <span>
                                    指定日期 <RangePicker value={[moment(this.state.LBDateFrom),moment(this.state.LBDateTo)]} onChange={this.LeftBottomTime} style={{width: '30%'}} />
                                </span>
                            </span>
                            </div>
                            <div>
                                <Chart height={320} width={300} style={style} data={this.state.dataSourceBL} scale={cols} forceFit>
                                    <Legend/>
                                    <Axis name="colDateTime"/>
                                    <Axis
                                        name="signValueNumBer"
                                        label={{
                                            formatter: val => `${val}${this.state.unit}`
                                        }}
                                    />
                                    <Tooltip
                                        crosshairs={{
                                            type: "y"
                                        }}
                                        custom={true}
                                        containerTpl={`
                                        <div class="g2-tooltip"><div class="g2-tooltip-title" style="margin-bottom: 4px;"></div>
                                        <table>
                                          <thead>
                                            <tr>
                                              <th>&nbsp;</th>
                                              <th>名称</td>
                                              <th>值</td>
                                            </tr>
                                          <thead>
                                          <tbody
                                            class="g2-tooltip-list"
                                          >
                                          </tbody>
                                        <table>
                                        `}

                                                                    itemTpl={`
                                          <tr data-index={index}>'
                                            <td><span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span></td>
                                            <td>{name}</td>
                                            <td>{value}</td>
                                          </tr>
                                       `}

                                    />
                                    <Geom
                                        type="line"
                                        position="colDateTime*signValueNumBer"
                                        size={2}
                                        color={"signType"}
                                        shape={"smooth"}
                                    />
                                    <Geom
                                        type="point"
                                        position="colDateTime*signValueNumBer"
                                        size={4}
                                        shape={"circle"}
                                        color={"signType"}
                                        style={{
                                            stroke: "#fff",
                                            lineWidth: 1
                                        }}
                                    />
                                </Chart>
                            </div>
                        </div>
                    </Col>
                    <Col style={{width: '49%',float: 'left', background: '#fff', marginLeft: '17px',marginTop: '10px'}}>
                        <a className='BP'>
                            体温
                        </a>
                        <div className='Top'>
                            <span>累计测量次数 <span className='span'>{this.state.qtyBR}</span></span>
                            <span style={{marginLeft: '15%'}}>正常次数 <span className='span'>{this.state.normalQtyBR}</span></span>
                            <span style={{marginLeft: '15%'}}>异常次数 <span className='span T'>{this.state.exceptionQtyBR}</span></span>
                            <span style={{marginLeft: '15%'}}>待处理异常次数 <span className='span T'>{this.state.unhandledExceptionQtyBR}</span></span>
                            <div className='Graphics-top-top'>
                                 <span>
                                <a onClick={()=>{this.thisTodayDate('4', 'XTDay')}} className={this.state.parameterXTCode == 'XTDay' ? 'active' : ''}>今天</a>
                                <a onClick={()=>{this.thisWeekDate('4','XTWeek')}} className={this.state.parameterXTCode == 'XTWeek' ? 'active' : ''}>本周</a>
                                <a onClick={ ()=>{this.thisMonthDate('4','XTMonth')}} className={this.state.parameterXTCode == 'XTMonth' ? 'active' : ''}>本月</a>
                                <a onClick={()=>{this.thisYearDate('4','XTYear')}} className={this.state.parameterXTCode == 'XTYear' ? 'active' : ''}>今年</a>
                                <span>
                                    指定日期 <RangePicker value={[moment(this.state.RBDateFrom),moment(this.state.RBDateTo)]} onChange={this.rightBottomTime} style={{width: '30%'}} />
                                </span>
                            </span>
                            </div>
                            <div>
                                <Chart height={320} style={style} data={this.state.dataSourceBR} scale={cols4} forceFit>

                                    <Axis name="colDateTime" />
                                    <Axis name="signValueNumBer"
                                          label={{
                                              formatter: val => `${val}${this.state.unit4}`
                                          }}
                                    />
                                    <Tooltip
                                        crosshairs={{
                                            type: "y"
                                        }}
                                    />
                                    <Geom type="line" position="colDateTime*signValueNumBer" size={2} color="signType"/>
                                    <Geom
                                        type="point"
                                        position="colDateTime*signValueNumBer"
                                        size={4}
                                        shape={"circle"}
                                        style={{
                                            stroke: "#fff",
                                            lineWidth: 1
                                        }}
                                    />
                                </Chart>
                            </div>
                        </div>
                    </Col>
                </div>
            </Row>
            <Modal
                visible={this.state.visible}
                onCancel={this.handleCancel}
                width={500}
                height = {400}
                className="dealWith"
                footer={null}
                title='处理异常'
            >
                <Row>
                    <Radio.Group onChange={this.onChangeRadio} value={this.state.value}>
                        {this.state.PopupData.length>0 && this.state.PopupData.map((item, k)=>{
                           return <Radio value={item.id} key={k}>{item.descripts}</Radio>
                        })}
                        {/*<Radio value={1}>联系本人</Radio>*/}
                        {/*<Radio value={2}>联系家庭成员</Radio>*/}
                        {/*<Radio value={3}>调整健康管理计划</Radio>*/}
                        {/*<Radio value={4}>其他</Radio>*/}
                    </Radio.Group>
                </Row>
                <Row style={{ marginTop: '20px'}} >
                    <span>备注</span>
                    <TextArea rows={4} onChange={this.onChangeText} />
                </Row>
                <Row className='Button'>
                    <Button onClick={this.handleCancel}>取消</Button>
                    <Button onClick={this.abnormalVitalSignHandle}>确定</Button>
                </Row>
            </Modal>
        </div>
    }

}

export default VitalSignsDetectionTabPane;
