forked from Gitlink/forgeplus-react
fault
This commit is contained in:
parent
108c4484e8
commit
2bd7a24f98
|
|
@ -88,6 +88,7 @@
|
|||
"react-monaco-editor": "0.37",
|
||||
"react-player": "^1.15.3",
|
||||
"react-redux": "5.0.7",
|
||||
"react-resizable": "^1.10.1",
|
||||
"react-router": "^4.2.0",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-split-pane": "^0.1.91",
|
||||
|
|
|
|||
|
|
@ -20,4 +20,25 @@ export const Tags = (status)=>{
|
|||
<span className="statusColor Preparing">准备中</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const TagsLine = (status)=>{
|
||||
switch(status){
|
||||
case 1:
|
||||
return(
|
||||
<span className="statuslineColor running">运行中</span>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<span className="statuslineColor failed">未通过</span>
|
||||
);
|
||||
case 3:
|
||||
return (
|
||||
<span className="statuslineColor pass">已通过</span>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<span className="statuslineColor Preparing">准备中</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import React from 'react';
|
||||
import { FlexAJ , Blueline , AlignCenter } from '../Component/layout';
|
||||
import styled from 'styled-components';
|
||||
import { Menu } from 'antd';
|
||||
import { TagsLine } from '../Component/OpsStatus';
|
||||
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const Img = styled.img`{
|
||||
width:25px;
|
||||
height:25px;
|
||||
border-radius:50%;
|
||||
margin-right:10px;
|
||||
}`
|
||||
export default (()=>{
|
||||
return(
|
||||
<div>
|
||||
<FlexAJ className="leftheader">
|
||||
<AlignCenter>
|
||||
<Img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2091711702,2468700162&fm=111&gp=0.jpg"/>
|
||||
<span className="nest">开始时间：<span>2020.07.10 15:30</span></span>
|
||||
<span className="nest">运行时间：<span>20s</span></span>
|
||||
</AlignCenter>
|
||||
<Blueline>重新创建</Blueline>
|
||||
</FlexAJ>
|
||||
<div className="leftMainContent">
|
||||
<AlignCenter className="contentBranch">
|
||||
<i className="iconfont icon-fenzhi1"></i>
|
||||
<span>分支：</span>
|
||||
<span className="branchname">master</span>
|
||||
<span className="branchsha">8b3476f5</span>
|
||||
</AlignCenter>
|
||||
</div>
|
||||
<Menu mode='inline' className="leftMenu">
|
||||
<SubMenu title={<div><i className="iconfont icon-gongzuoliu font-14 mr4"></i><span>CI</span></div>}>
|
||||
<Menu.Item>
|
||||
<FlexAJ><span>Build setup 01 {TagsLine(1)}</span><span>20s</span></FlexAJ>
|
||||
</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import React from 'react';
|
||||
import { FlexAJ , AlignCenter } from '../Component/layout';
|
||||
|
||||
export default (()=>{
|
||||
return(
|
||||
<div className="rightMainContent">
|
||||
<div>
|
||||
<FlexAJ className="items">
|
||||
<span>Build setup 01</span>
|
||||
<AlignCenter>20<i className="iconfont icon-triangle"></i></AlignCenter>
|
||||
</FlexAJ>
|
||||
</div>
|
||||
<div>
|
||||
<FlexAJ className="items"></FlexAJ>
|
||||
</div>
|
||||
<div>
|
||||
<FlexAJ className="items"></FlexAJ>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
@ -118,4 +118,150 @@
|
|||
color:#fff;
|
||||
padding:0px 20px;
|
||||
}
|
||||
.opsSection{
|
||||
height:calc( 100% - 60px );
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
section{
|
||||
height: 100%;
|
||||
float: left;
|
||||
&.leftSection{
|
||||
width:100%;
|
||||
.leftheader{
|
||||
background-color: #F1F8FF;
|
||||
padding:10px 20px;
|
||||
.nest{
|
||||
color: #888888;
|
||||
margin-right: 18px;
|
||||
&>span{
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.leftMainContent{
|
||||
padding:14px 20px;
|
||||
.contentBranch{
|
||||
border:1px solid #eee;
|
||||
background-color: #fafafa;
|
||||
padding:0px 18px;
|
||||
height: 40px;
|
||||
border-radius: 3px;
|
||||
color:#888;
|
||||
i{
|
||||
font-size: 16px;
|
||||
color:#BBB;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.branchname{
|
||||
color:#333;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.branchsha{
|
||||
color:#FF6E21;
|
||||
}
|
||||
}
|
||||
}
|
||||
.leftMenu{
|
||||
li.ant-menu-item,.ant-menu-submenu{
|
||||
padding:0px 13px 0px 20px!important;
|
||||
position: relative;
|
||||
color: #333;
|
||||
}
|
||||
.ant-menu-submenu-title{
|
||||
margin:0px;
|
||||
padding:0px 0px 0px 20px!important
|
||||
}
|
||||
.ant-menu-submenu-arrow{
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
}
|
||||
.ant-menu.ant-menu-sub{
|
||||
.ant-menu-item:hover{
|
||||
background-color: #F1F8FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
.statuslineColor{
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
padding:0px 10px;
|
||||
border-radius: 11px;
|
||||
font-size: 12px;
|
||||
margin-left: 6px;
|
||||
&.pass{
|
||||
border:1px solid rgba(40,189,108,1);
|
||||
color:rgba(40,189,108,1);
|
||||
}
|
||||
&.failed{
|
||||
border:1px solid #F73030;
|
||||
color:#F73030;
|
||||
}
|
||||
&.running{
|
||||
border:1px solid #5091FF;
|
||||
color:#5091FF;
|
||||
}
|
||||
&.Preparing{
|
||||
border:1px solid rgba(255,110,33,1);
|
||||
color:rgba(255,110,33,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.rightSection{
|
||||
width:100%;
|
||||
background-color: #081930;
|
||||
.rightMainContent{
|
||||
padding:24px 30px;
|
||||
& > div{
|
||||
margin-bottom: 12px;
|
||||
.items{
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
padding:0px 24px;
|
||||
background:rgba(24,41,62,1);
|
||||
border-radius:5px;
|
||||
color:#fff;
|
||||
cursor: pointer;
|
||||
i{
|
||||
font-size: 13px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.Resizer.vertical{
|
||||
position: relative;
|
||||
}
|
||||
.Resizer.vertical:hover:before{
|
||||
background: #eee;
|
||||
}
|
||||
.Resizer.vertical:before {
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
background: hsla(0,0%,92.2%,.3);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 50%;
|
||||
margin-top: -12px;
|
||||
right: -12px;
|
||||
}
|
||||
.Resizer.vertical::after{
|
||||
position: absolute;
|
||||
content: "\e712";
|
||||
font-family: iconfont;
|
||||
font-size: 10px;
|
||||
transform: scale(.8);
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
color: #666;
|
||||
right: -12px;
|
||||
opacity: .3;
|
||||
z-index: 1000;
|
||||
cursor: col-resize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,10 @@ import React from 'react';
|
|||
import './ops.scss';
|
||||
import { FlexAJ, AlignCenter } from '../Component/layout';
|
||||
import { Tags } from '../Component/OpsStatus';
|
||||
import SplitPane from 'react-split-pane';
|
||||
import LeftPanel from './OpsDetailLeftpanel';
|
||||
import RightPanel from './OpsDetailRightpanel';
|
||||
|
||||
|
||||
export default (()=>{
|
||||
return(
|
||||
|
|
@ -14,6 +18,16 @@ export default (()=>{
|
|||
</AlignCenter>
|
||||
<a style={{color:"#ddd"}}><i className="iconfont icon-yiguanbi font-15 mr5"></i>退出</a>
|
||||
</FlexAJ>
|
||||
<div className="opsSection">
|
||||
<SplitPane className="outer-split-pane" split="vertical" minSize={468} maxSize={-350} defaultSize="40%">
|
||||
<section className="leftSection">
|
||||
<LeftPanel />
|
||||
</section>
|
||||
<section className="rightSection">
|
||||
<RightPanel />
|
||||
</section>
|
||||
</SplitPane>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
});
|
||||
|
|
@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
|
|||
import { Dropdown, Icon, Menu, Pagination, Typography, Popconfirm } from 'antd';
|
||||
import NoneData from '../Nodata';
|
||||
import axios from 'axios';
|
||||
import './order.css';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
|
|
@ -159,9 +160,9 @@ class Milepost extends Component {
|
|||
const Paginations = (
|
||||
<React.Fragment>
|
||||
{
|
||||
data && data.issue_tags_count > limit ?
|
||||
data && data.versions_count > limit ?
|
||||
<div className="mt30 mb50 edu-txt-center">
|
||||
<Pagination simple defaultCurrent={page} total={data && data.issue_tags_count} pageSize={limit} onChange={this.ChangePage}></Pagination>
|
||||
<Pagination simple defaultCurrent={page} total={data && data.versions_count} pageSize={limit} onChange={this.ChangePage}></Pagination>
|
||||
</div> : ""
|
||||
}
|
||||
</React.Fragment>
|
||||
|
|
|
|||
Loading…
Reference in New Issue