|
@@ -37,11 +37,77 @@
|
|
<p class="count">60 <span>个</span></p>
|
|
<p class="count">60 <span>个</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="item">
|
|
|
|
+ <div class="title">
|
|
|
|
+ <img src="@/assets/work.png" alt="" class="iconImg">
|
|
|
|
+ <span>我发起的</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="itemBody">
|
|
|
|
+ <p class="count">60 <span>个</span></p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item">
|
|
|
|
+ <div class="title">
|
|
|
|
+ <img src="@/assets/work.png" alt="" class="iconImg">
|
|
|
|
+ <span>我发起的</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="itemBody">
|
|
|
|
+ <p class="count">60 <span>个</span></p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item">
|
|
|
|
+ <div class="title">
|
|
|
|
+ <img src="@/assets/work.png" alt="" class="iconImg">
|
|
|
|
+ <span>我发起的</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="itemBody">
|
|
|
|
+ <p class="count">60 <span>个</span></p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item">
|
|
|
|
+ <div class="title">
|
|
|
|
+ <img src="@/assets/work.png" alt="" class="iconImg">
|
|
|
|
+ <span>我发起的</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="itemBody">
|
|
|
|
+ <p class="count">60 <span>个</span></p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item">
|
|
|
|
+ <div class="title">
|
|
|
|
+ <img src="@/assets/work.png" alt="" class="iconImg">
|
|
|
|
+ <span>我发起的</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="itemBody">
|
|
|
|
+ <p class="count" >60 <span>个</span></p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="leftBottom">
|
|
<div class="leftBottom">
|
|
<div class="sectionHead">
|
|
<div class="sectionHead">
|
|
订单进度
|
|
订单进度
|
|
|
|
+ <a-button type="link" class="allOrder" @click="allOrder">全部订单</a-button>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="orderProgress">
|
|
|
|
+ <ul class="orderProgress-list">
|
|
|
|
+ <li v-for="(item,index) in orderProgressList" :key="index" class="orderProgress-list-item">
|
|
|
|
+ <div style="display:flex;width:80%; align-items: center;">
|
|
|
|
+ <span class="item-icon"></span>
|
|
|
|
+ <div class="content">
|
|
|
|
+ <p class="name">我是一个任务名称嗷嗷嗷啊</p>
|
|
|
|
+ <p class="desc">这是对这个任务的简介,所以得好好寻…</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="progress">
|
|
|
|
+ <a-progress type="circle" :percent="75" :width='30' :showInfo='false' :strokeWidth='10' />
|
|
|
|
+ <span style="margin-left:15px">75%</span>
|
|
|
|
+ </div>
|
|
|
|
+ </li>
|
|
|
|
+ </ul>
|
|
|
|
+ <!-- hideOnSinglePage -->
|
|
|
|
+ <a-pagination size="small" :total="totalPage" :current='currentPage' class="fenye" :change='pageChange' show-size-changer show-quick-jumper hideOnSinglePage />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -50,11 +116,53 @@
|
|
<div class="sectionHead">
|
|
<div class="sectionHead">
|
|
操作记录
|
|
操作记录
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="optionRecordList">
|
|
|
|
+ <a-timeline>
|
|
|
|
+ <a-timeline-item color='#F0F2F5' style="height:30px">
|
|
|
|
+ <p style="margin-bottom:0px">
|
|
|
|
+ Create a services site 2015-09-01
|
|
|
|
+ <span style="float:right">1分钟前</span>
|
|
|
|
+ </p>
|
|
|
|
+ </a-timeline-item>
|
|
|
|
+ <a-timeline-item color='#F0F2F5' style="height:30px">
|
|
|
|
+ <p style="margin-bottom:0px">
|
|
|
|
+ Create a services site 2015-09-01
|
|
|
|
+ <span style="float:right">1分钟前</span>
|
|
|
|
+ </p>
|
|
|
|
+ </a-timeline-item>
|
|
|
|
+ <a-timeline-item color='#F0F2F5' style="height:30px">
|
|
|
|
+ <p style="margin-bottom:0px">
|
|
|
|
+ Create a services site 2015-09-01
|
|
|
|
+ <span style="float:right">1分钟前</span>
|
|
|
|
+ </p>
|
|
|
|
+ </a-timeline-item>
|
|
|
|
+ <a-timeline-item color='#F0F2F5' style="height:30px">
|
|
|
|
+ <p style="margin-bottom:0px">
|
|
|
|
+ Create a services site 2015-09-01
|
|
|
|
+ <span style="float:right">1分钟前</span>
|
|
|
|
+ </p>
|
|
|
|
+ </a-timeline-item>
|
|
|
|
+
|
|
|
|
+ </a-timeline>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<div class="rightBottom">
|
|
<div class="rightBottom">
|
|
<div class="sectionHead">
|
|
<div class="sectionHead">
|
|
本周项目燃尽图
|
|
本周项目燃尽图
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="burnDown">
|
|
|
|
+ <a-progress type="circle" :percent="75" :width='150' :strokeWidth='6' />
|
|
|
|
+ <div class="tip">
|
|
|
|
+ <p class="done">
|
|
|
|
+ <span class="item-icon"></span>
|
|
|
|
+ <span>已完成订单:{{}}个</span>
|
|
|
|
+ </p>
|
|
|
|
+ <p class="all">
|
|
|
|
+ <span class="item-icon"></span>
|
|
|
|
+ <span>未完成订单:{{}}个</span>
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@@ -68,18 +176,54 @@ import moment from 'moment';
|
|
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
|
|
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
|
|
|
|
|
|
export default {
|
|
export default {
|
|
-
|
|
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ // 订单进度
|
|
|
|
+ orderProgressList:[
|
|
|
|
+ {},
|
|
|
|
+ {},
|
|
|
|
+ {}
|
|
|
|
+ ],
|
|
|
|
+
|
|
|
|
+ // 操作记录
|
|
|
|
+ optionRecord:[],
|
|
|
|
+
|
|
|
|
+ // 本周项目燃尽图
|
|
|
|
+ burnDownChart:[],
|
|
|
|
+
|
|
|
|
+ // 分页参数
|
|
|
|
+ totalPage:0,
|
|
|
|
+ currentPage:1,
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 分页页码改变
|
|
|
|
+ pageChange(page, pageSize){
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ // 全部订单
|
|
|
|
+ allOrder() {
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ },
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
.workBench{
|
|
.workBench{
|
|
|
|
+ ul,li{
|
|
|
|
+ margin: 0;
|
|
|
|
+ padding: 0;
|
|
|
|
+ }
|
|
width: 100%;
|
|
width: 100%;
|
|
.topBody{
|
|
.topBody{
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 146px;
|
|
height: 146px;
|
|
background: #FFFFFF;
|
|
background: #FFFFFF;
|
|
margin-bottom: 24px;
|
|
margin-bottom: 24px;
|
|
|
|
+ padding: 20px;
|
|
|
|
+ box-sizing: border-box;
|
|
.breadcrumb{
|
|
.breadcrumb{
|
|
width: 42px;
|
|
width: 42px;
|
|
height: 22px;
|
|
height: 22px;
|
|
@@ -92,7 +236,7 @@ export default {
|
|
.bottom{
|
|
.bottom{
|
|
display: flex;
|
|
display: flex;
|
|
position: relative;
|
|
position: relative;
|
|
- padding: 20px;
|
|
|
|
|
|
+ // padding: 20px;
|
|
.touxiang{
|
|
.touxiang{
|
|
width: 72px;
|
|
width: 72px;
|
|
height: 72px;
|
|
height: 72px;
|
|
@@ -119,8 +263,8 @@ export default {
|
|
}
|
|
}
|
|
.mybtn{
|
|
.mybtn{
|
|
position: absolute;
|
|
position: absolute;
|
|
- top: 50%;
|
|
|
|
- margin-left: -18px;
|
|
|
|
|
|
+ // top: 50%;
|
|
|
|
+ // margin-left: -18px;
|
|
right: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -138,21 +282,32 @@ export default {
|
|
color: rgba(0, 0, 0, 0.85);
|
|
color: rgba(0, 0, 0, 0.85);
|
|
line-height: 24px;
|
|
line-height: 24px;
|
|
border-bottom: 1px solid #E9E9E9;;
|
|
border-bottom: 1px solid #E9E9E9;;
|
|
|
|
+ .allOrder{
|
|
|
|
+ float: right;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.sectionLeftBox{
|
|
.sectionLeftBox{
|
|
- width: 60%;
|
|
|
|
|
|
+ width: 70%;
|
|
|
|
+
|
|
.leftTop{
|
|
.leftTop{
|
|
height: 370px;
|
|
height: 370px;
|
|
|
|
+ background: white;
|
|
}
|
|
}
|
|
.zhanshiBox{
|
|
.zhanshiBox{
|
|
display: flex;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
.item{
|
|
.item{
|
|
- flex: 4;
|
|
|
|
- background: brown;
|
|
|
|
- padding: 20px;
|
|
|
|
|
|
+ width: 33.33%;
|
|
|
|
+ // background: brown;
|
|
|
|
+ padding: 20px ;
|
|
|
|
+ border-right: 1px solid #E9E9E9;
|
|
|
|
+ border-bottom: 1px solid #E9E9E9;
|
|
.title{
|
|
.title{
|
|
- padding-bottom: 20px;
|
|
|
|
|
|
+ padding-bottom: 34px;
|
|
|
|
+ .iconImg{
|
|
|
|
+ width: 24px;
|
|
|
|
+ margin-right: 8px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.itemBody{
|
|
.itemBody{
|
|
text-align: center;
|
|
text-align: center;
|
|
@@ -163,8 +318,10 @@ export default {
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
color: #000000;
|
|
line-height: 32px;
|
|
line-height: 32px;
|
|
|
|
+ cursor: pointer;
|
|
span{
|
|
span{
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
|
+ cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.count:hover{
|
|
.count:hover{
|
|
@@ -172,15 +329,127 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .item:nth-child(3n){
|
|
|
|
+ border-right: 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .leftBottom{
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+ background: white;
|
|
|
|
+ .orderProgress{
|
|
|
|
+ padding: 0 20px;
|
|
|
|
+ .orderProgress-list-item{
|
|
|
|
+ padding: 10px 0;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ border-bottom: 1px solid #E9E9E9;;
|
|
|
|
+ justify-content:space-between;
|
|
|
|
+ .item-icon{
|
|
|
|
+ width: 8px;
|
|
|
|
+ height: 8px;
|
|
|
|
+ background: #3BA0FF;
|
|
|
|
+ margin-right: 15px;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ }
|
|
|
|
+ .content{
|
|
|
|
+ width: 70%;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ .name{
|
|
|
|
+ height: 22px;
|
|
|
|
+ color: rgba(0, 0, 0, 0.65);
|
|
|
|
+ line-height: 22px;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ margin-bottom: 0px;
|
|
|
|
+ }
|
|
|
|
+ .desc{
|
|
|
|
+ height: 22px;
|
|
|
|
+ color: rgba(0, 0, 0, 0.25);
|
|
|
|
+ line-height: 22px;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ margin-bottom: 0px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .progress{
|
|
|
|
+ float: right;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .fenye{
|
|
|
|
+ padding: 20px 0;
|
|
|
|
+ text-align: right;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sectionRightBox{
|
|
.sectionRightBox{
|
|
- width: 40%;
|
|
|
|
|
|
+ width: 29%;
|
|
|
|
+ // background: white;
|
|
|
|
+ margin-left: 20px;
|
|
.rightTop{
|
|
.rightTop{
|
|
height: 370px;
|
|
height: 370px;
|
|
|
|
+ background: white;
|
|
|
|
+ .optionRecordList{
|
|
|
|
+ padding: 20px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .rightBottom{
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+ background: white;
|
|
|
|
+ .burnDown{
|
|
|
|
+ padding: 30px 20px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ .tip{
|
|
|
|
+ margin-top: 40px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+
|
|
|
|
+ height: 22px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ color: rgba(0, 0, 0, 0.65);
|
|
|
|
+ line-height: 22px;
|
|
|
|
+ .done{
|
|
|
|
+ .item-icon{
|
|
|
|
+ width: 8px;
|
|
|
|
+ height: 8px;
|
|
|
|
+ background: #3BA0FF;
|
|
|
|
+ margin-right: 15px;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .all{
|
|
|
|
+ .item-icon{
|
|
|
|
+ width: 8px;
|
|
|
|
+ height: 8px;
|
|
|
|
+ background: #F0F2F5;
|
|
|
|
+ margin-right: 15px;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+</style>
|
|
|
|
+
|
|
|
|
+<style lang="less">
|
|
|
|
+ .workBench{
|
|
|
|
+ .ant-timeline-item-head{
|
|
|
|
+ background: rgb(240,242,245);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|