手写鱼骨图

　　效果图:

　　css:

　　

.box {
    display: flex;
    align-items: center;
    padding: 140px 0;
    .target {
        width: 120px;
        height: 120px;
        background: #198ce1;
        border-radius: 50%;
        text-align: center;
        line-height: 120px;
        color: #ffffff;
    }
    .targets {
        width: 120px;
        height: 120px;
        background: #ffffff;
    }
    .center {
        width: 100%;
        position: relative;
        .topIP {
            position: absolute;
            bottom: 100px;
            width: 9%;
            .topIPText {
                color: #198ce1;
            }
            .topFile {
                width:100%;
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
        .bottomIP {
            position: absolute;
            top: 100px;
            width: 9%;
            .bottomIPText {
                color: #198ce1;
            }
            .topFile {
                width:100%;
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
        .longString {
            position: absolute;
            height: 100px;
            bottom: 0;
            display: flex;
            align-items: center;
            width: 10%;
            justify-content: flex-start;
            border-left: 2px solid #999999;
            .topTime {
                margin-left: 6px;
                text-align: left;
            }
            .icondUpDown{
                color: #999999;
                font-size: 20px;
                position: absolute;
                bottom: -2px;
                left: -11px;
            }
            .icondUpUp{
                color: #999999;
                font-size: 20px;
                position: absolute;
                bottom: 86px;
                left: -11px;
            }
        }
        .longStrings {
            position: absolute;
            height: 100px;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            width: 10%;
            border-right: 2px solid #999999;
            .topTimes {
                margin-right: 6px;
                text-align: right;
            }
            .icondDownDown{
                color: #999999;
                font-size: 20px;
                position: absolute;
                bottom: -6px;
                right: -11px;
            }
            .icondDownUp{
                color: #999999;
                font-size: 20px;
                position: absolute;
                bottom: 82px;
                right: -11px;
            }
        }
        .solid {
            border-top: 1.5px solid #999999;
            border-bottom: 1.5px solid #999999;
            width: 100%;
        }
    }
    .arrows {
        color: #999999;
        font-size: 20px;
    }
}
.division {
    border-top: 2px #dfdfdf dashed;
}

 

 

　　js:

export default class IPPage extends PureComponent {

    render() {
        let list = [];
        let list1 = [];
        let list2 = [];
        let list3 = [];
        for (var i = 0; i < 40; i++) {
            list.push(
                {
                    time: '2020-08-04 14:52:45',
                    userIP: '192.168.1.' + `${i}`,
                    fileName: 'XX公司销售部客户花名册',
                    id: i,
                    way: i% 3 === 0?true:false
                }
            )
        }
        if (list.length > 20) {
            list1 = list.splice(20)
            list2 = list.filter((item, index) => index % 2 !== 0)
            list = list.filter((item, index) => index % 2 === 0)
            list3 = list1.filter((item, index) => index % 2 !== 0)
            list1 = list1.filter((item, index) => index % 2 === 0)
            
        }else{
            list2 = list.filter((item, index) => index % 2 !== 0)
            list = list.filter((item, index) => index % 2 === 0)
        }
        return (
            <Fragment>
                <div className={styles.box}>
                    <div className={styles.target}>192.168.1.122</div>
                    <div className={styles.center}>
                        {
                            list.map((item, index) => {
                                return (
                                    <Fragment>
                                        <span style={{ left: `${(index + 1) * 10 - 12 + '%'}` }} className={styles.topIP}>
                                            <Tooltip title={item.fileName}>
                                                <span className={styles.topFile}>{item.fileName}</span>
                                            </Tooltip>
                                            <span className={styles.topIPText}>{item.userIP}</span>
                                            <Button className="operateBtn primary" onClick={() => this.handleAbtain(item)}>{intl.get('Intl_obtain_evidence')}</Button>
                                        </span>
                                        
                                        <div className={styles.longString} style={{ left: `${(index + 1) * 10 - 8 + '%'}` }}>
                                            {item.way?
                                                <Icon type="down" className={styles.icondUpDown} />:
                                                <Icon type="up" className={styles.icondUpUp} />
                                            }
                                            <span className={styles.topTime}>{item.time}</span>
                                        </div>
                                    </Fragment>
                                )
                            })
                        }
                        <div className={styles.solid}></div>
                        {
                            list2.map((item, index) => {
                                return (
                                    <Fragment>
                                        <span style={{ left: `${(index + 1) * 10 - 6.4 + '%'}` }} className={styles.bottomIP}>
                                            <Tooltip title={item.fileName}>
                                                <span className={styles.topFile}>{item.fileName}</span>
                                            </Tooltip>
                                            <span className={styles.bottomIPText}>{item.userIP}</span>
                                            <Button className="operateBtn primary" onClick={() => this.handleAbtain(item)}>{intl.get('Intl_obtain_evidence')}</Button>
                                        </span>
                                        <div className={styles.longStrings} style={{ left: `${index * 10 - 2.4 + '%'}` }}>
                                            {item.way?
                                                <Icon type="down" className={styles.icondDownDown} />:
                                                <Icon type="up" className={styles.icondDownUp} />
                                            }
                                            <span className={styles.topTimes}>{item.time}</span>
                                        </div>
                                    </Fragment>
                                )
                            })
                        }
                    </div>
                    {list2.length===10?
                        <Icon type="right" className={styles.arrows} />:""
                    }
                </div>
                {list1.length > 0 ?
                    <Fragment>
                        <div className={styles.division}></div>
                        <div className={styles.box}>
                            <div className={styles.targets}></div>
                            <div className={styles.center}>
                                {
                                    list1.map((item, index) => {
                                        return (
                                            <Fragment>
                                                <span style={{ left: `${(index + 1) * 10 - 12 + '%'}` }} className={styles.topIP}>
                                                    <Tooltip title={item.fileName}>
                                                        <span className={styles.topFile}>{item.fileName}</span>
                                                    </Tooltip>
                                                    <span className={styles.topIPText}>{item.userIP}</span>
                                                    <Button className="operateBtn primary" onClick={() => this.handleAbtain(item)}>{intl.get('Intl_obtain_evidence')}</Button>
                                                </span>
                                                <div className={styles.longString} style={{ left: `${(index + 1) * 10 - 8 + '%'}` }}>
                                                    {item.way?
                                                        <Icon type="down" className={styles.icondUpDown} />:
                                                        <Icon type="up" className={styles.icondUpUp} />
                                                    }
                                                    <span className={styles.topTime}>{item.time}</span>
                                                </div>
                                            </Fragment>
                                        )
                                    })
                                }
                                <div className={styles.solid}></div>
                                {
                                    list3.map((item, index) => {
                                        return (
                                            <Fragment>
                                                <span style={{ left: `${(index + 1) * 10 - 6.4 + '%'}` }} className={styles.bottomIP}>
                                                    <Tooltip title={item.fileName}>
                                                        <span className={styles.topFile}>{item.fileName}</span>
                                                    </Tooltip>
                                                    <span className={styles.bottomIPText}>{item.userIP}</span>
                                                    <Button className="operateBtn primary" onClick={() => this.handleAbtain(item)}>{intl.get('Intl_obtain_evidence')}</Button>
                                                </span>
                                                <div className={styles.longStrings} style={{ left: `${index * 10 - 2.4 + '%'}` }}>
                                                    {item.way?
                                                        <Icon type="down" className={styles.icondDownDown} />:
                                                        <Icon type="up" className={styles.icondDownUp} />
                                                    }
                                                <span className={styles.topTimes}>{item.time}</span>
                                                    <span className={styles.topTimes}>{item.time}</span>
                                                </div>
                                            </Fragment>
                                        )
                                    })
                                }
                            </div>
                            {list3.length===10?
                                <Icon type="right" className={styles.arrows} />:""
                            }
                        </div>
                    </Fragment> : ''
                }
            </Fragment>
        );
    }
}