diff --git a/package.json b/package.json index bc8cd14e..db35dca4 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/forge/Component/OpsStatus.jsx b/src/forge/Component/OpsStatus.jsx index 7d815847..02883bd6 100644 --- a/src/forge/Component/OpsStatus.jsx +++ b/src/forge/Component/OpsStatus.jsx @@ -20,4 +20,25 @@ export const Tags = (status)=>{ 准备中 ); } +} + +export const TagsLine = (status)=>{ + switch(status){ + case 1: + return( + 运行中 + ); + case 2: + return ( + 未通过 + ); + case 3: + return ( + 已通过 + ); + default: + return ( + 准备中 + ); + } } \ No newline at end of file diff --git a/src/forge/DevOps/OpsDetailLeftpanel.jsx b/src/forge/DevOps/OpsDetailLeftpanel.jsx new file mode 100644 index 00000000..427f0c99 --- /dev/null +++ b/src/forge/DevOps/OpsDetailLeftpanel.jsx @@ -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( +
+ + + + 开始时间：2020.07.10 15:30 + 运行时间：20s + + 重新创建 + +
+ + + 分支： + master + 8b3476f5 + +
+ + CI
}> + + Build setup 01 {TagsLine(1)}20s + + + + + ) +}) \ No newline at end of file diff --git a/src/forge/DevOps/OpsDetailRightpanel.jsx b/src/forge/DevOps/OpsDetailRightpanel.jsx new file mode 100644 index 00000000..a7f0f11e --- /dev/null +++ b/src/forge/DevOps/OpsDetailRightpanel.jsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { FlexAJ , AlignCenter } from '../Component/layout'; + +export default (()=>{ + return( +
+
+ + Build setup 01 + 20 + +
+
+ +
+
+ +
+
+ ) +}) \ No newline at end of file diff --git a/src/forge/DevOps/ops.scss b/src/forge/DevOps/ops.scss index 9f4f2a22..b9dcafcc 100644 --- a/src/forge/DevOps/ops.scss +++ b/src/forge/DevOps/ops.scss @@ -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; + } + } } \ No newline at end of file diff --git a/src/forge/DevOps/opsDetail.jsx b/src/forge/DevOps/opsDetail.jsx index 92960e58..efb6f846 100644 --- a/src/forge/DevOps/opsDetail.jsx +++ b/src/forge/DevOps/opsDetail.jsx @@ -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 (()=>{ 退出 +
+ +
+ +
+
+ +
+ +
) }); \ No newline at end of file diff --git a/src/forge/Order/Milepost.js b/src/forge/Order/Milepost.js index 5273c97b..8f8b996b 100644 --- a/src/forge/Order/Milepost.js +++ b/src/forge/Order/Milepost.js @@ -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 = ( { - data && data.issue_tags_count > limit ? + data && data.versions_count > limit ?
- +
: "" }