From bc6a15bbf575c2d60627fb7a1f20a7758b8c7c22 Mon Sep 17 00:00:00 2001 From: songwc Date: Mon, 14 Nov 2022 11:24:48 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E9=A1=B9=E7=9B=AE=E6=A6=82?= =?UTF-8?q?=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/indexProjStu.js | 5 +- src/views/projectcenter/TaskPage.vue | 649 +++++++++++++++++++++++++-- 2 files changed, 619 insertions(+), 35 deletions(-) diff --git a/src/api/indexProjStu.js b/src/api/indexProjStu.js index 28d77063..392664b7 100644 --- a/src/api/indexProjStu.js +++ b/src/api/indexProjStu.js @@ -19,4 +19,7 @@ export const editGroup = (obj) => http.post('/admin/project/editGroup', obj) export const studentProcess = (obj) => http.get('/admin/project/studentProcess', { params: obj }) //是否优秀学员 -export const topStudent = (obj) => http.post('/admin/project/topStudent', obj) \ No newline at end of file +export const topStudent = (obj) => http.post('/admin/project/topStudent', obj) + +//项目概览 +export const overview = (obj) => http.get('/admin/project/overview', { params: obj }) \ No newline at end of file diff --git a/src/views/projectcenter/TaskPage.vue b/src/views/projectcenter/TaskPage.vue index b1f03ad5..f3538b06 100644 --- a/src/views/projectcenter/TaskPage.vue +++ b/src/views/projectcenter/TaskPage.vue @@ -50,7 +50,7 @@
-
+
快速创建项目详情
@@ -116,51 +116,72 @@
-
+
项目概览
- 200 + {{ + projectInfoOverview.totalStudentCnt + }}
总人数
- 15 -
必修课
+ {{ + projectInfoOverview.studyStudentCnt + }} +
学习人数
- 15 -
选修课
+ {{ + projectInfoOverview.completeStudentCnt + }} +
完成人数
- 50{{ + projectInfoOverview.onlineCourseCnt + }}%
-
完成率
+
在线课程数
- 30{{ + projectInfoOverview.offLineCourseCnt + }}%
-
必修完成率
+
面授课程数
- 30{{ + projectInfoOverview.completeRatio + }}%
-
选修完成率
+
总完成率
阶段信息
-
+ +
+
+ {{item.stage}} +
+
阶段名称：
@@ -171,7 +192,7 @@
课程完成率
@@ -180,7 +201,7 @@
考试通过率
@@ -189,26 +210,26 @@ -
作业合格率
+
作业完成率
-
10
+
{{stageOverviewList.totalTaskCnt}}
阶段任务总数 - +
-
5
+
{{stageOverviewList.totalReqCnt}}
必修课 - +
-
1
+
{{stageOverviewList.totalOptCnt}}
选修课 - +
@@ -696,10 +717,12 @@
- + + > @@ -834,15 +857,21 @@
-
-
+ + + +
+ -
+
--> + +
-
+ +
编辑
@@ -920,6 +949,49 @@
+ + +
+
+
+
+
+
+
上传共享文档
+
+ +
+
+
+ + 上传 + + +
+ + 支持：pdf.ppt.pptx.doc.docx.xls.xlsx.jpeg.png.gif.zip + +
+
+ + {{item.name}} + 删除 +
+
+
+
+
+ +
@@ -1415,6 +1487,7 @@ import * as apitl from "../../api/index"; import { getTask } from "../../api/indexTaskadd"; import { toDate } from "../../api/method"; import projSet from "../../components/Modals/projSet"; +import { overview } from "../../api/indexProjStu"; export default { name: "taskPage", components: { @@ -1467,6 +1540,23 @@ export default { }, ], changeGoods: [], //更改是否优秀的id数组 + choosedStageId:1, // 选择的阶段id + activeSetKey:"12",//12-基础信息 13-共享文档 + docChecked:true, + docList:[ + { + name:'测试文档1.doc', + src:"", + }, + { + name:'测试文档2.doc', + src:"", + }, + { + name:'测试文档3.doc', + src:"", + } + ], //学员信息列表 tabledata: [ // { @@ -2034,6 +2124,37 @@ export default { picUrl: null, }); + const levelList = reactive({ + projectInfoOverview: { + // 整体数据概览 + totalStudentCnt: 0, + studyStudentCnt: 0, + completeStudentCnt: 0, + onlineCourseCnt: 0, + offLineCourseCnt: 0, + completeRatio: 0, + }, + stageOverviewList: { + // 阶段数据概览 + completeCourseRatio: 0, + completeExamRatio: 0, + completeRatio: 0, + totalTaskCnt: 0, + totalReqCnt: 0, + totalOptCnt: 0, + }, + stageList: [ + // 阶段列表 + { + stageId: 1, + stage: "阶段一", + }, + { + stageId: 2, + stage: "阶段二", + }, + ], + }); // 输入接入 -- start -- const router = useRoute(); @@ -2911,14 +3032,55 @@ export default { getStu(); }; //end---------学员------ + + //start---------项目概览 + // 获取项目概览 + const getOverview = () => { + overview({projectId:state.projectId}) + .then((res) => { + Object.keys(res.data.data.projectInfoOverview).forEach((item) => { + levelList.projectInfoOverview[item] = + res.data.data.projectInfoOverview[item] || 0; + }); + Object.keys(res.data.data.stageOverviewList).forEach((item) => { + levelList.stageOverviewList[item] = + res.data.data.stageOverviewList[item] || 0; + }); + // res.data.data.routerInfoOverview.forEach((r) => { + // console.log(r) + // }) + // state.addLoading = false; + console.log("项目概览--" + res); + }) + .catch((err) => { + // state.addLoading = false; + message.error("概览获取失败"); + console.log("获取失败" + err); + }); + }; + //end---------项目概览 + + const handleChange = (info) => { + if (info.file.status !== "uploading") { + console.log(info.file, info.fileList); + } + + if (info.file.status === "done") { + message.success(`${info.file.name} 文件上传成功`); + } else if (info.file.status === "error") { + message.error(`${info.file.name} 文件上传失败.`); + } + }; onMounted(() => { getStu(); getTaskList(); getTaskInfo(); getGroup(); + getOverview(); }); return { ...toRefs(state), + ...toRefs(levelList), totask, tostudent, showModal, @@ -2991,6 +3153,7 @@ export default { cancelyou, cancelcanyou, changePaginationStu, + handleChange, }; }, }; @@ -5085,6 +5248,7 @@ export default { } } + //设置的基本信息 .content7 { margin-top: 20px; @@ -5152,6 +5316,423 @@ export default { } } } + //设置的共享文档 + .sametab { + // margin-left: 30px; + // margin-right: 30px; + margin-top: 30px; + width: 100%; + // background-color: green; + .Gcon { + display: flex; + .pad { + height: 100%; + width: 40px; + } + .Gin { + // background-color: #bfa; + margin-top: 30px; + .headone { + // background-color: red; + display: flex; + text-align: center; + .box { + width: 4px; + height: 20px; + background-color: #409eff; + border-radius: 2px; + } + .onetitle { + margin-left: 15px; + color: #333333; + font-size: 14px; + } + .oneedi { + margin-left: 15px; + color: #4ea6ff; + cursor: pointer; + } + .twobtn { + display: flex; + .btnone { + width: 42px; + height: 24px; + border: 1px solid rgba(64, 158, 255, 1); + border-radius: 4px; + color: rgba(64, 158, 255, 1); + margin-left: 20px; + cursor: pointer; + } + .btntwo { + width: 42px; + height: 24px; + border: 1px solid rgba(64, 158, 255, 1); + border-radius: 4px; + color: #ffffff; + margin-left: 20px; + background: #409eff; + cursor: pointer; + } + } + } + .onemain { + margin-top: 20px; + margin-left: 55px; + color: #6f6f6f; + font-size: 14px; + .checkcon { + position: relative; + .in { + position: absolute; + // margin-top: 10px; + left: 0; + top: 3px; + } + .yulan { + // color: yellow; + margin-left: 22px; + // display: inline-block; + } + .yulan2 { + margin-left: 22px; + } + .ant-input-number { + height: 24px; + width: 24px; + margin: 10px; + border-radius: 4px; + border: 1px solid #6d7584; + .ant-input-number-input { + width: 100%; + height: 100%; + font-size: 14px; + padding: 0; + color: #409eff; + text-align: center; + } + } + } + } + .twomain { + margin-left: 20px; + margin-top: 20px; + .ant-switch-checked { + background-color: #5dc988; + } + .info { + margin-left: 10px; + color: #6f6f6f; + font-size: 14px; + // margin-top: 10px; + } + .infor { + margin-left: 38px; + margin-top: 10px; + color: #c7cbd2; + font-size: 14px; + } + .chooseshow { + // background-color: red; + margin-left: 38px; + margin-top: 12px; + .fane { + color: #6f6f6f; + font-size: 14px; + } + } + .choo { + display: none; + } + .btm { + margin-left: 38px; + margin-top: 20px; + .bmo { + color: #6f6f6f; + font-size: 14px; + } + .bmt { + color: #c7cbd2; + font-size: 14px; + margin-top: 3px; + } + .chosecon { + display: flex; + margin-top: 6px; + margin-bottom: 20px; + .chose { + position: relative; + .inl { + position: absolute; + top: 2px; + } + .sh { + margin-left: 23px; + color: #6f6f6f; + } + } + } + } + } + } + } + .Lhead { + display: flex; + .btns { + display: flex; + margin-left: 20px; + // flex-wrap: wrap; + .btn { + padding: 0px 26px 0px 26px; + height: 38px; + background: rgba(64, 158, 255, 0); + border-radius: 8px; + border: 1px solid rgba(64, 158, 255, 1); + display: flex; + align-items: center; + justify-content: center; + margin-right: 14px; + flex-shrink: 0; + cursor: pointer; + .search { + background-size: 100%; + } + .btnText { + font-size: 14px; + font-weight: 400; + color: rgba(64, 158, 255, 1); + line-height: 36px; + margin-left: 5px; + } + } + .btn1 { + .search { + width: 15px; + height: 17px; + background-image: url("../../assets/images/courseManage/search1.png"); + } + } + .btn2 { + .search { + width: 16px; + height: 18px; + background-image: url("../../assets/images/courseManage/reset1.png"); + } + } + .btn3 { + margin-right: 0px; + .search { + width: 17px; + height: 18px; + background-image: url("../../assets/images/courseManage/add1.png"); + } + } + .btn1:hover { + background: rgba(64, 158, 255, 1); + .search { + background-image: url("../../assets/images/courseManage/search0.png"); + } + .btnText { + color: #ffffff; + } + } + .btn2:hover { + background: rgba(64, 158, 255, 1); + .search { + background-image: url("../../assets/images/courseManage/reset0.png"); + } + .btnText { + color: #ffffff; + } + } + .btn3:hover { + background: rgba(64, 158, 255, 1); + .search { + background-image: url("../../assets/images/courseManage/add0.png"); + } + .btnText { + color: #ffffff; + } + } + } + } + .Lbom { + position: relative; + margin-bottom: 20px; + .item { + width: 100%; + height: 200px; + // background-color: green; + margin-top: 40px; + border-radius: 8px; + border: 1px solid #f0f4fe; + .itemhead { + height: 50px; + width: 100%; + background-color: #f0f4fe; + display: flex; + align-items: center; + position: relative; + .lev { + margin-left: 27px; + margin-right: 16px; + line-height: 100%; + color: #409eff; + font-size: 16px; + } + .lin { + width: 1px; + height: 35%; + background-color: #c7cbd2; + } + .nam { + margin-left: 16px; + color: #4f5156; + line-height: 100%; + font-size: 16px; + } + .count { + position: absolute; + line-height: 100%; + color: #4f5156; + font-size: 14px; + right: 40px; + span:nth-child(2) { + color: #63ca8c; + } + } + } + .itembomm { + display: flex; + align-items: center; + height: 150px; + .it { + // margin-left: 110px; + // margin-right: 110px; + width: 13%; + text-align: center; + .on { + font-size: 30px; + } + .ittext { + color: #4f5156; + margin-top: 16px; + margin-left: -5px; + } + } + .linee { + background-color: #ecf2fb; + width: 1px; + height: 55%; + } + .itright { + position: absolute; + right: 45px; + display: flex; + .te { + color: #4ea6ff; + font-size: 14px; + cursor: pointer; + } + .more { + position: relative; + height: 30px; + display: flex; + .moreArrow { + width: 13px; + height: 7px; + display: inline-block; + background-image: url("../../assets/images/navtop/down.png"); + background-size: 100%; + margin: 2px; + margin-left: 7px; + margin-top: 6px; + } + .moreItems { + width: 80px; + height: 70px; + display: none; + background: #ffffff; + box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05); + border-radius: 3px; + border: 0px solid #dcdcdc; + position: absolute; + left: 0px; + top: 20px; + z-index: 100; + .roleItem { + font-size: 14px; + font-weight: 400; + color: rgba(79, 81, 86, 1); + line-height: 36px; + display: flex; + justify-content: center; + cursor: pointer; + } + .roleItem:hover { + color: #4ea6ff; + } + } + } + .more:hover .moreArrow { + background-image: url("../../assets/images/navtop/up.png"); + } + .more:hover .moreItems { + display: block; + } + } + } + + .show { + color: blue; + } + .noshow { + display: none; + } + } + .create { + margin-top: 40px; + .taskbox { + width: 412px; + height: 160px; + border-radius: 10px; + position: relative; + // margin-left: 68px; + margin-bottom: 40px; + cursor: pointer; + .leftt { + position: absolute; + top: 18px; + left: 0; + } + .photo { + position: absolute; + top: 42px; + left: 37px; + } + .rightt { + position: absolute; + top: 69px; + right: 26px; + } + .centerbox { + position: absolute; + top: 52px; + left: 145px; + font-size: 20px; + font-weight: 700; + //line-height: 36px; + } + .centermain { + color: rgba(135, 139, 146, 1); + font-size: 14px; + position: absolute; + left: 144px; + bottom: 49px; + } + } + } + } + } } .DelModal {