手寫魚骨圖
阿新 • • 發佈：2020-08-12
效果圖:
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> ); } }.box{ display:flex; align-items:center; padding:140px0; .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:2pxsolid#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:2pxsolid#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.5pxsolid#999999; border-bottom:1.5pxsolid#999999; width:100%; } } .arrows{ color:#999999; font-size:20px; } } .division{ border-top:2px#dfdfdfdashed; }