hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-11 20:06:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:概览(有数据),创建多层项目,创建多层子项目

Browse Source
This commit is contained in:
岳佳鑫
2022-10-17 15:24:51 +08:00
parent 05ac824fc1
commit 3910b2af42
2 changed files with 624 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

392
src/views/projectcenter/ProjectManage.vue
View File

@@ -139,7 +139,7 @@
<div class="rightt"><img src="../../assets/images/taskpage/right2.png"/></div>
<div class="centerbox" style="color: rgba(78, 166, 255, 1)">单层子项目</div>
</div>
<div class="taskbox" style="background:linear-gradient(180deg,rgba(254, 243, 221, 1) 100%,rgba(255, 250, 240, 1) 100%);">
<div class="taskbox" @click="showModal3" style="background:linear-gradient(180deg,rgba(254, 243, 221, 1) 100%,rgba(255, 250, 240, 1) 100%);">
<div class="leftt"><img src="../../assets/images/taskpage/left1.png"/></div>
<div class="photo"><img src="../../assets/images/taskpage/picture5.png"/></div>
<div class="rightt"><img src="../../assets/images/taskpage/right1.png"/></div>
@@ -185,7 +185,7 @@
<div class="centermain">不包含子项目，直接填写项目基础信息后创建任务</div>
</div>
</router-link>
<div class="taskbox" style="margin-bottom: 40px;background:linear-gradient(180deg,rgba(229, 246, 236, 1) 100%,rgba(238, 249, 243, 1) 100%);">
<div class="taskbox" @click="showModal2" style="margin-bottom: 40px;background:linear-gradient(180deg,rgba(229, 246, 236, 1) 100%,rgba(238, 249, 243, 1) 100%);">
<div class="leftt"><img src="../../assets/images/taskpage/left3.png"/></div>
<div class="photo"><img src="../../assets/images/taskpage/picture7.png"/></div>
<div class="rightt"><img src="../../assets/images/taskpage/right3.png"/></div>
@@ -197,6 +197,205 @@
</div>
</div>
<!-- 创建项目弹窗 -->
<!-- 创建多层项目弹窗 -->
<div>
<a-modal
v-model:visible="doublepro"
:title="null"
@ok="closeModal2"
:footer="null"
:closable="false"
wrapClassName="doublepro"
width="624px"
height="476px"
>
<div class="modalHeader"
style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
>
<div class="headerLeft" style="margin-left: 32px">
<span class="headerLeftText" style="font-size: 16px">创建多层项目</span>
</div>
<div style="cursor: pointer;margin-right:32px" @click="closeModal2">
<img
style="width: 22px; height: 22px"
src="../../assets/images/basicinfo/close22.png"
/>
</div>
</div>
<div class="modalMain">
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">项目名称:</div>
<div class="in">
<a-input
v-model:value="value"
show-count :maxlength="30"
placeholder="请输入项目名称"
style="border-radius: 8px"
/>
</div>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">分类:</div>
<div class="in">
<a-select
v-model:value="value"
placeholder="四个养成"
style="border-radius: 8px;height: 40px"
/>
</div>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">项目经理:</div>
<div class="in">
<a-input
v-model:value="value"
placeholder="请选择项目经理"
style="border-radius: 8px;height: 40px"
/>
</div>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">资源归属:</div>
<div class="in">
<a-input
v-model:value="value"
style="border-radius: 8px;height: 40px"
/>
</div>
</div>
<div class="pubtn">
<a-button class="pubtn1" @click="closeModal2">取消</a-button>
<a-button class="pubtn2" @click="closeModal2">确定</a-button>
</div>
</div>
</a-modal>
</div>
<!-- 创建多层项目弹窗 -->
<!-- 创建多层子项目弹窗 -->
<div>
<a-modal
v-model:visible="doublesonpro"
:title="null"
@ok="closeModal3"
:footer="null"
:closable="false"
wrapClassName="doublesonpro"
width="624px"
height="476px"
>
<div class="modalHeader"
style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
>
<div class="headerLeft" style="margin-left: 32px">
<span class="headerLeftText" style="font-size: 16px">创建多层项目</span>
</div>
<div style="cursor: pointer;margin-right:32px" @click="closeModal3">
<img
style="width: 22px; height: 22px"
src="../../assets/images/basicinfo/close22.png"
/>
</div>
</div>
<div class="modalMain">
<div style="margin-left: 40px;margin-top: 40px">
<span style="color: #000000;font-size: 14px">项目归属：</span>
<span style="color:#999999;font-size: 14px; margin-left: 10px">管理者进阶</span>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">子项目名称:</div>
<div class="in">
<a-input
v-model:value="value"
placeholder="请输入项目名称"
style="border-radius: 8px;height: 40px"
/>
</div>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">分类:</div>
<div class="in">
<a-select
v-model:value="value"
placeholder="四个养成"
style="border-radius: 8px;height: 40px"
/>
</div>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">子项目经理:</div>
<div class="in">
<a-input
v-model:value="value"
placeholder="自动带出 可编辑"
style="border-radius: 8px;height: 40px"
/>
</div>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">资源归属:</div>
<div class="in">
<a-input
v-model:value="value"
style="border-radius: 8px;height: 40px"
/>
</div>
</div>
<div class="pubtn">
<a-button class="pubtn1" @click="closeModal3">取消</a-button>
<a-button class="pubtn2" @click="closeModal3">确定</a-button>
</div>
</div>
</a-modal>
</div>
<!-- 创建多层子项目弹窗 -->
</div>
</template>
<script>
@@ -536,6 +735,8 @@ export default {
pageSize: 10,
sonproject: false,
estabish: false,
doublepro: false,
doublesonpro: false,
});
@@ -1378,6 +1579,24 @@ export default {
const closeModal1 = () => {
state.estabish = false;
};
const showModal2 = () => {
state.doublepro = true;
state.estabish = false;
};
const closeModal2 = () => {
state.doublepro = false;
};
const showModal3 = () => {
state.doublesonpro = true;
state.sonproject = false;
};
const closeModal3 = () => {
state.doublesonpro = false;
};
return {
...toRefs(state),
@@ -1388,6 +1607,10 @@ export default {
closeModal,
showModal1,
closeModal1,
showModal2,
closeModal2,
showModal3,
closeModal3,
getTableDate,
};
},
@@ -1556,6 +1779,171 @@ export default {
}
}
}
.doublesonpro {
.ant-modal {
.ant-modal-body {
padding: 0;
.modalMain {
display: flex;
flex-direction: column;
//align-items: center;
margin-left: 60px;
.name {
//width: 90%;
// background-color: lightcoral;
display: flex;
justify-content: right;
margin-top: 32px;
align-items: center;
height: 40px;
// border: 1px solid black;
.inname {
color: #000000;
font-size: 14px;
margin-left: 7px;
}
.in {
margin-left: 14px;
width: 80%;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 80%;
height: 30px;
}
.ant-select {
border-radius: 5px;
// height: 120%;
width: 80%;
height: 40px;
.ant-select-selector {
border-radius: 8px;
// height: 120%;
width: 100%;
height: 40px;
}
}
}
}
.pubtn {
display: flex;
justify-content: center;
margin-top: 25px;
//margin-bottom: 29px;
.pubtn1 {
width: 100px;
height: 40px;
margin-right: 16px;
margin-bottom: 29px;
border: 1px solid #409EFF;
border-radius: 4px;
color: rgba(78, 166, 255, 1);
font-size: 14px;
//line-height: 36px;
align-items: center;
background: rgba(255, 255, 255, 1)
}
.pubtn2 {
width: 100px;
height: 40px;
margin-bottom: 29px;
border: 1px solid #409EFF;
border-radius: 4px;
color: #FFFFFF;
font-size: 14px;
align-items: center;
//line-height: 36px;
background: #409EFF;
}
}
}
}
}
}
.doublepro {
.ant-modal {
.ant-modal-body {
padding: 0;
.modalMain {
display: flex;
flex-direction: column;
align-items: center;
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
justify-content: right;
margin-top: 32px;
align-items: center;
height: 40px;
// border: 1px solid black;
.inname {
color: #000000;
font-size: 14px;
margin-left: 7px;
}
.in {
margin-left: 14px;
width: 81%;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 30px;
}
.ant-select {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
.ant-select-selector {
border-radius: 8px;
// height: 120%;
width: 100%;
height: 40px;
}
}
}
}
.pubtn {
display: flex;
justify-content: center;
margin-top: 25px;
//margin-bottom: 29px;
.pubtn1 {
width: 100px;
height: 40px;
margin-right: 16px;
margin-bottom: 29px;
border: 1px solid #409EFF;
border-radius: 4px;
color: rgba(78, 166, 255, 1);
font-size: 14px;
//line-height: 36px;
align-items: center;
background: rgba(255, 255, 255, 1)
}
.pubtn2 {
width: 100px;
height: 40px;
margin-bottom: 29px;
border: 1px solid #409EFF;
border-radius: 4px;
color: #FFFFFF;
font-size: 14px;
align-items: center;
//line-height: 36px;
background: #409EFF;
}
}
}
}
}
}
.sonproject {
.ant-modal {
.ant-modal-body {

263
src/views/projectcenter/TaskPage.vue
View File

@@ -46,30 +46,111 @@
:tabBarStyle="{ marginLeft: '10px',marginTop: '5px' }">
<a-tab-pane key="1" tab="概览">
<div class="split"></div>
<div class="onerow"><div class="taskmain">快速创建项目详情</div></div>
<div class="second">
<div class="taskbox" style="background:linear-gradient(180deg,rgba(254, 243, 221, 1) 100%,rgba(255, 250, 240, 1) 100%);">
<div class="leftt"><img src="../../assets/images/taskpage/left1.png"/></div>
<div class="photo"><img src="../../assets/images/taskpage/picture1.png"/></div>
<div class="rightt"><img src="../../assets/images/taskpage/right1.png"/></div>
<div class="centerbox" style="color: rgba(255, 182, 78, 1)">添加任务</div>
<div class="centermain">快速添加任务/阶段</div>
<!-- 概览（无数据） -->
<div >
<div class="onerow"><div class="taskmain">快速创建项目详情</div></div>
<div class="second">
<div class="taskbox" style="background:linear-gradient(180deg,rgba(254, 243, 221, 1) 100%,rgba(255, 250, 240, 1) 100%);">
<div class="leftt"><img src="../../assets/images/taskpage/left1.png"/></div>
<div class="photo"><img src="../../assets/images/taskpage/picture1.png"/></div>
<div class="rightt"><img src="../../assets/images/taskpage/right1.png"/></div>
<div class="centerbox" style="color: rgba(255, 182, 78, 1)">添加任务</div>
<div class="centermain">快速添加任务/阶段</div>
</div>
<div class="taskbox" style="background:linear-gradient(180deg,rgba(221, 234, 255, 1) 100%,rgba(240, 248, 254, 1) 100%);">
<div class="leftt"><img src="../../assets/images/taskpage/left2.png"/></div>
<div class="photo"><img src="../../assets/images/taskpage/picture2.png"/></div>
<div class="rightt"><img src="../../assets/images/taskpage/right2.png"/></div>
<div class="centerbox" style="color: rgba(78, 166, 255, 1)">添加学员</div>
<div class="centermain">快速添加学员</div>
</div>
<div class="taskbox" @click="showModal" style="background:linear-gradient(180deg,rgba(229, 246, 236, 1) 100%,rgba(238, 249, 243, 1) 100%);">
<div class="leftt"><img src="../../assets/images/taskpage/left3.png"/></div>
<div class="photo"><img src="../../assets/images/taskpage/picture3.png"/></div>
<div class="rightt"><img src="../../assets/images/taskpage/right3.png"/></div>
<div class="centerbox" style="color: rgba(93, 201, 136, 1)">发布</div>
<div class="centermain">快速发布项目</div>
</div>
</div>
<div class="taskbox" style="background:linear-gradient(180deg,rgba(221, 234, 255, 1) 100%,rgba(240, 248, 254, 1) 100%);">
<div class="leftt"><img src="../../assets/images/taskpage/left2.png"/></div>
<div class="photo"><img src="../../assets/images/taskpage/picture2.png"/></div>
<div class="rightt"><img src="../../assets/images/taskpage/right2.png"/></div>
<div class="centerbox" style="color: rgba(78, 166, 255, 1)">添加学员</div>
<div class="centermain">快速添加学员</div>
</div>
<!-- 概览（无数据） -->
<!-- 概览（有数据） -->
<div style="display: none">
<div class="onerow"><div class="taskmain">项目概览</div></div>
<div class="second" style="margin-top: 0">
<div class="nubbox">
<span class="nub1">200</span>
<div class="nub2">总人数</div>
</div>
<div class="nubbox">
<span class="nub1" style="color: #FF90AE">15</span>
<div class="nub2">必修课</div>
</div>
<div class="nubbox">
<span class="nub1" style="color: #A497FF">15</span>
<div class="nub2">选修课</div>
</div>
<div class="nubbox">
<div>
<span class="nub1" style="color: #5DC988">50</span><span style="color: #5DC988;font-size: 14px">%</span>
</div>
<div class="nub2">完成率</div>
</div>
<div class="nubbox">
<div>
<span class="nub1" style="color: #FF90AE">30</span><span style="color: #FF90AE;font-size: 14px">%</span>
</div>
<div class="nub2">必修完成率</div>
</div>
<div class="nubbox">
<div>
<span class="nub1" style="color: #A497FF">30</span><span style="color: #A497FF;font-size: 14px">%</span>
</div>
<div class="nub2">选修完成率</div>
</div>
</div>
<div class="taskbox" @click="showModal" style="background:linear-gradient(180deg,rgba(229, 246, 236, 1) 100%,rgba(238, 249, 243, 1) 100%);">
<div class="leftt"><img src="../../assets/images/taskpage/left3.png"/></div>
<div class="photo"><img src="../../assets/images/taskpage/picture3.png"/></div>
<div class="rightt"><img src="../../assets/images/taskpage/right3.png"/></div>
<div class="centerbox" style="color: rgba(93, 201, 136, 1)">发布</div>
<div class="centermain">快速发布项目</div>
<div class="onerow"><div class="taskmain">阶段信息</div></div>
<div class="stagemess">
<div class="stage1">阶段1</div>
<div class="stage2">阶段2</div>
</div>
<div class="stagesecond">
<div class="staname">阶段名称：</div>
<div class="stamess">管理者进阶-腾飞班1第一阶段</div>
</div>
<div class="stagelast">
<div class="stagepro">
<a-progress type="dashboard" gapDegree="0" :percent="50" :width="140" />
<div class="protext">课程完成率</div>
</div>
<div class="stagepro">
<a-progress type="dashboard" gapDegree="0" :percent="50" :width="140" />
<div class="protext">考试通过率</div>
</div>
<div class="stagepro" style="margin-right: 0">
<a-progress type="dashboard" gapDegree="0" :percent="50" :width="140" />
<div class="protext">作业合格率</div>
</div>
<div class="proright">
<div class="pronub" style="margin-left: 280px">10</div>
<div class="proright1">
<span class="textpro">阶段任务总数</span>
<a-progress :percent="50" style="width: 369px" />
</div>
<div class="pronub" style="margin-left: 206px">5</div>
<div class="proright1">
<span class="textpro">必修课</span>
<a-progress :percent="25" style="width: 369px"/>
</div>
<div class="pronub" style="margin-left: 142px">1</div>
<div class="proright1">
<span class="textpro">选修课</span>
<a-progress :percent="5" style="width: 369px"/>
</div>
</div>
</div>
</div>
<!-- 概览（有数据） -->
</a-tab-pane>
<a-tab-pane key="2" tab="任务" force-render>
<div class="split"></div>
@@ -266,6 +347,7 @@
<a-tab-pane key="7" tab="设置">Content of Tab Pane 3</a-tab-pane>
</a-tabs>
</div>
<!-- 项目发布弹窗 -->
<div>
<a-modal
v-model:visible="pubproject"
@@ -313,12 +395,13 @@
<a-checkbox v-model:checked="checked2"><span class="sendpeo">发给学员</span></a-checkbox>
</div>
<div class="pubtn">
<a-button class="pubtn1">取消</a-button>
<a-button class="pubtn2">发布</a-button>
<a-button class="pubtn1" @click="closeModal">取消</a-button>
<a-button class="pubtn2" @click="closeModal">发布</a-button>
</div>
</div>
</a-modal>
</div>
<!-- 项目发布弹窗 -->
</div>
</template>
<script>
@@ -635,11 +718,11 @@ export default {
}
}
.split {
width: 100%;
height: 20px;
background-color: #edf0f5;
}
.split {
width: 100%;
height: 20px;
background-color: #edf0f5;
}
.content {
//display: flex;
//margin: 0 37px;
@@ -702,15 +785,37 @@ export default {
}
.second {
display: flex;
justify-content: center;
justify-content: left;
flex-wrap: wrap;
margin-top: 40px;
margin-left: 20px;
.nubbox {
width: 253px;
height: 116px;
margin-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #FAFBFC;
border-radius: 10px;
margin-left: 15px;
.nub1 {
color: #FFB54A;
font-size: 30px;
font-weight: 700;
}
.nub2 {
color: #6D7584;
font-size: 14px;
}
}
.taskbox {
width: 412px;
height: 160px;
border-radius: 10px;
position: relative;
margin-right: 68px;
margin-left: 68px;
margin-bottom: 40px;
cursor: pointer;
.leftt {
@@ -745,6 +850,106 @@ export default {
}
}
}
.stagemess {
display: flex;
margin-left: 38px;
.stage1 {
width: 100px;
height: 33px;
text-align: center;
line-height: 34px;
border-radius: 6px;
color: #FFFFFF;
font-size: 16px;
background: #4EA6FF;
margin-right: 10px;
margin-top: 19px;
cursor: pointer;
}
.stage2 {
width: 100px;
height: 33px;
text-align: center;
line-height: 34px;
border-radius: 6px;
border: 1px solid #EBEEF3;
color: #000000;
font-size: 16px;
background: #FFFFFF;
margin-right: 10px;
margin-top: 19px;
cursor: pointer;
}
}
.stagesecond {
display: flex;
margin-left: 39px;
margin-top: 29px;
.staname {
color: #999BA3;
font-size: 14px;
}
.stamess {
color: #4F5156;
font-size: 14px;
}
}
.stagelast {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 55px;
.stagepro {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 55px;
margin-right: 120px;
.ant-progress-circle-path {
stroke: #4EA6FF;
}
.ant-progress-text {
color: #4EA6FF;
font-weight: 700;
}
.protext {
color: #6D7584;
font-size: 14px;
margin-top: 25px;
}
}
.proright {
width: 500px;
margin-top: 55px;
margin-left: 50px;
.ant-progress-bg {
height: 24px !important;
background: #4EA6FF;
}
.ant-progress-inner {
height: 24px;
}
.pronub {
color: #4EA6FF;
font-size: 14px;
margin: 5px 0;
}
.proright1 {
display: flex;
justify-content: right;
.textpro {
color: #6D7584;
font-size: 14px;
margin-right: 20px;
}
.ant-progress-text {
color: #4EA6FF;
font-size: 14px;
font-weight: 700;
}
}
}
}
.stage {
display: flex;
height: 49px;