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

feat:增加项目排行榜,项目积分榜单接口获取数据

Browse Source
This commit is contained in:
lixg
2022-11-06 19:23:44 +08:00
parent 3461fd3e98
commit 58652aa012
7 changed files with 628 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

531
src/components/drawers/ProjectScore.vue
View File

@@ -2,12 +2,13 @@
<template>
<div class="split"></div>
<div class="contentscore">
<a-tabs v-model:activeKey="activeKeyScore">
<a-tabs v-model:activeKey="activeKeyScore" @change="tabsChange">
<a-tab-pane key="1" tab="学员获取">
<div class="group">
<div class="groupleft">
<div class="groupname" style="width: 42px">姓名：</div>
<a-input class="ant-input"
<a-input
class="ant-input"
v-model:value="value"
placeholder="请输入姓名"
/>
@@ -24,7 +25,7 @@
</div>
</div>
<div class="tableBox" style="margin: 20px 32px 30px 32px">
<a-table
<a-table
style="border: 1px solid #f2f6fe"
:columns="tablecolumnStu"
:data-source="tabledataStu"
@@ -49,32 +50,39 @@
<a-tab-pane key="2" tab="榜单" force-render>
<div class="scorelist">
<div class="grouprightscore">
<div class="sbutton" @click="stuValue = !stuValue">
<img v-if=stuValue src="../../assets/images/taskpage/stu0.png"/>
<img v-else src="../../assets/images/taskpage/stu.png"/>
<div :class="stuValue ? '' : 'btn1'">学员积分榜</div>
<div class="sbutton" @click="typeChange(1)">
<img
v-if="stuValue===2"
src="../../assets/images/taskpage/stu0.png"
/>
<img v-else src="../../assets/images/taskpage/stu.png" />
<div :class="stuValue===2 ? '' : 'btn1'">学员积分榜</div>
</div>
<div class="sbutton" @click="stuValue = !stuValue">
<img v-if=stuValue src="../../assets/images/taskpage/group.png"/>
<img v-else src="../../assets/images/taskpage/group0.png"/>
<div :class="stuValue ? 'btn1' : ''">小组积分榜</div>
<div class="sbutton" @click="typeChange(2)">
<img
v-if="stuValue===2"
src="../../assets/images/taskpage/group.png"
/>
<img v-else src="../../assets/images/taskpage/group0.png" />
<div :class="stuValue===2 ? 'btn1' : ''">小组积分榜</div>
</div>
</div>
<div class="group" style="justify-content: center">
<div class="groupleft">
<div class="groupname">姓名：</div>
<a-input class="ant-input" style="width:152px"
v-model:value="value"
<a-input
class="ant-input"
style="width: 152px"
v-model:value="searchRankName"
placeholder="请输入姓名"
/>
</div>
<div class="groupright">
<div class="btn1" style="margin-left: 16px ;">
<div class="btn1" style="margin-left: 16px" @click="searchRank">
<img src="../../assets/images/courseManage/search0.png" />
<span class="btn1text">搜索</span>
</div>
<div class="btn2">
<div class="btn2" @click="rankReset">
<img src="../../assets/images/courseManage/reset1.png" />
<span class="btn2text">重置</span>
</div>
@@ -91,8 +99,9 @@
<a-radio-button class="today" value="3">近一个月</a-radio-button>
</a-radio-group>
</div>
<div class="listdiv"> <div class="slist">
<a-list :data-source="stuValue ? datascoreg : datascore">
<div class="listdiv">
<div class="slist">
<a-list :data-source="stuValue ===1? datascoreg : datascore">
<template #renderItem="{ item }">
<div class="item">
<div v-if="item.id == 1" class="itemleft">
@@ -132,39 +141,55 @@
<div class="groupright">
<div class="spandiv"><span class="spantext">规则</span></div>
<div v-if="edit" class="btns">
<div class="btn1" @click="edit=!edit">
<img src="../../assets/images/projectadd/edit1.png" />
<span class="btn1text">编辑</span>
</div>
<div class="btn1" @click="edit = !edit">
<img src="../../assets/images/projectadd/edit1.png" />
<span class="btn1text">编辑</span>
</div>
</div>
<div v-else class="btns">
<div class="btn1" @click="edit=!edit">
<span class="btn1text">保存</span>
</div>
<div class="btn1" @click="edit = !edit">
<span class="btn1text">保存</span>
</div>
</div>
</div>
<div v-if="edit" class="pjcb_content">
<div class="content content1">
<span>当前设计下，学员可以获得 </span><span class="scoretext">{{scoresum}}</span><span>积分</span>
<span>当前设计下，学员可以获得 </span
><span class="scoretext">{{ scoresum }}</span
><span>积分</span>
</div>
<div class="content content2">
<span>完成【必修/选修】获得 </span><span class="scoretext">{{score1}} </span><span>积分</span>
<span>完成【必修/选修】获得 </span
><span class="scoretext">{{ score1 }} </span><span>积分</span>
</div>
<div class="content">
<span>优秀学员可获得 </span><span class="scoretext">{{score2}}</span><span>积分</span>
<span>优秀学员可获得 </span
><span class="scoretext">{{ score2 }}</span
><span>积分</span>
</div>
</div>
<div v-else class="pjcb_content">
<div class="content content1">
<span>当前设计下，学员可以获得 </span><span class="scoretext">{{scoresum}}</span><span>积分</span>
<span>当前设计下，学员可以获得 </span
><span class="scoretext">{{ scoresum }}</span
><span>积分</span>
</div>
<div class="content content2">
<span>完成【必修/选修】获得 </span><span ><a-input v-model:value="score1" :bordered="false" @change="getScore"/> </span><span>积分</span>
<span>完成【必修/选修】获得 </span
><span
><a-input
v-model:value="score1"
:bordered="false"
@change="getScore"
/> </span
><span>积分</span>
</div>
<div class="content ">
<span>优秀学员可获得 </span><span ><a-input v-model:value="score2" :bordered="false" /></span><span>积分</span>
<div class="content">
<span>优秀学员可获得 </span
><span
><a-input v-model:value="score2" :bordered="false" /></span
><span>积分</span>
</div>
</div>
</div>
@@ -178,12 +203,19 @@
<script>
import StuScoreDetail from "../../components/drawers/StuScoreDetail";
import { reactive, toRefs } from "vue";
import * as api from "../../api/index1";
export default {
name: "ProjectScore",
components:{
components: {
StuScoreDetail,
},
setup() {
props: {
projectId: {
type: Number,
default: null,
},
},
setup(props) {
const state = reactive({
tabledataStu: [
{
@@ -194,7 +226,6 @@ export default {
group: "好好学习",
diploma: "0",
operation: "查看",
},
{
key: 2,
@@ -204,7 +235,6 @@ export default {
group: "天天向上",
diploma: "0",
operation: "查看",
},
{
key: 3,
@@ -214,7 +244,6 @@ export default {
group: "好好学习",
diploma: "0",
operation: "查看",
},
{
key: 4,
@@ -224,7 +253,6 @@ export default {
group: "天天向上",
diploma: "0",
operation: "查看",
},
],
@@ -336,15 +364,16 @@ export default {
valueDate: "", //排行榜输入日期
noticeChecked: true,
noticeContent: "请输入要发布的公告",
activeKeyScore: "1",
activeKeyScore: "2",
stuName: "请输入姓名",
todayvalue: "1",
tableDataTotal: 30,
stuValue: false,
Svisible:false,
score1:5,
score2:5,
edit:true,
Svisible: false,
score1: 5,
score2: 5,
edit: true,
searchRankName:null,//榜单搜索名称
});
const getTableData = () => {
let datas = state.tabledataStu;
@@ -360,7 +389,7 @@ export default {
}}
>
查看
</div>
</div>
</div>
);
}
@@ -368,139 +397,190 @@ export default {
state.tabledataStu = datas;
};
getTableData();
const tabsChange = (e) => {
if (e == 2) {
// console.log('获取项目积分-榜单')
scoreRank(1, 1);
}
rankReset()
state.todayvalue='1'
state.stuValue=1
};
//重置
const rankReset=()=>{
state.searchRankName=null
}
// start -------榜单---------------榜单------------榜单------------------榜单---------
//学员积分还是小组积分
const typeChange = (num) => {
state.stuValue = num;
scoreRank(state.stuValue , state.todayvalue);
};
//选择时间
const changeday = (e) => {
state.todayvalue = e.target.value;
scoreRank(state.stuValue , state.todayvalue);
};
//搜索
const searchRank = () => {
scoreRank(state.stuValue , state.todayvalue)
};
//项目积分榜单
const scoreRank = (period, type) => {
console.log("projectId", props.projectId);
let obj = {
name: state.searchRankName,
pageNo: 1,
pageSize: 5,
period: Number(period),
projectId: props.projectId,
type: Number(type),
};
api
.scoreRank(obj)
.then((res) => {
console.log("获取项目积分-榜单", res);
})
.catch((err) => {
console.log("获取项目积分-榜单失败", err);
});
};
// end -----榜单----------------榜单----------------------榜单-----------榜单----------
return {
...toRefs(state),
typeChange,
changeday,
searchRank,
rankReset,
tabsChange,
scoreRank,
};
},
computed: {
// 计算属性的 getter
scoresum: function () {
return Number(this.score1)+Number(this.score2);
}
}
return Number(this.score1) + Number(this.score2);
},
},
};
</script>
<style lang="scss">
.contentscore {
margin-top: 20px;
margin-bottom: 100px;
.ant-tabs-nav-wrap{
border-bottom:1px solid #ededed;
.ant-tabs-nav-wrap {
border-bottom: 1px solid #ededed;
}
.ant-tabs-tab-btn {
font-size: 18px;
font-weight: 700;
}
.ant-input {
border-radius: 8px;
width: 264px;
height: 40px;
}
border-radius: 8px;
width: 264px;
height: 40px;
}
.group {
display: flex;
justify-content: space-between;
.groupleft {
display: flex;
justify-content: space-between;
.groupleft {
align-items: center;
margin-left: 32px;
.groupname {
height: 22px;
width: 42px;
color: #000000;
font-size: 14px;
}
}
.groupright {
display: flex;
.btn1 {
width: 100px;
height: 40px;
display: flex;
align-items: center;
margin-left: 32px;
.groupname {
height: 22px;
width: 42px;
color: #000000;
justify-content: center;
margin-right: 16px;
border: 1px solid #409eff;
border-radius: 8px;
background: #409eff;
cursor: pointer;
.btn1text {
color: #ffffff;
margin-left: 5px;
font-size: 14px;
}
}
.groupright {
display: flex;
.btn1 {
width: 100px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16px;
border: 1px solid #409eff;
border-radius: 8px;
background: #409eff;
cursor: pointer;
.btn1text {
color: #ffffff;
margin-left: 5px;
font-size: 14px;
}
}
.btn2 {
width: 100px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 32px;
border: 1px solid #409eff;
border-radius: 8px;
cursor: pointer;
background: #ffffff;
.btn2text {
color: #409eff;
margin-left: 5px;
font-size: 14px;
}
}
}
}
.tableBox {
.ant-table-selection-column {
padding: 0px !important;
// padding-left: 45px !important;
}
.ant-table-thead > tr > th {
background-color: rgba(239, 244, 252, 1) !important;
color: rgba(0, 0, 0, 0.8500);
}
.ant-table-cell {
color: rgba(0, 0, 0, 0.6500);
}
.ant-table-selection-column {
padding: 0 !important;
}
th.h {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
.ant-table-tbody > tr > td {
border-bottom: 1px solid rgba(240, 244, 254, 1);
padding: 16px 16px;
.operation {
color: rgba(56, 125, 247, 1);
cursor: pointer;
}
}
.pa {
margin-top: 15px;
// height: 20px;
// background-color: red;
.btn2 {
width: 100px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
// bottom: 20px;
margin-right: 32px;
border: 1px solid #409eff;
border-radius: 8px;
cursor: pointer;
background: #ffffff;
.btn2text {
color: #409eff;
margin-left: 5px;
font-size: 14px;
}
}
}
}
.tableBox {
.ant-table-selection-column {
padding: 0px !important;
// padding-left: 45px !important;
}
.ant-table-thead > tr > th {
background-color: rgba(239, 244, 252, 1) !important;
color: rgba(0, 0, 0, 0.85);
}
.ant-table-cell {
color: rgba(0, 0, 0, 0.65);
}
.ant-table-selection-column {
padding: 0 !important;
}
th.h {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
.ant-table-tbody > tr > td {
border-bottom: 1px solid rgba(240, 244, 254, 1);
padding: 16px 16px;
.operation {
color: rgba(56, 125, 247, 1);
cursor: pointer;
}
}
.pa {
margin-top: 15px;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
// bottom: 20px;
}
}
.scorelist {
padding-bottom: 100px;
padding-top: 50px;
.grouprightscore {
@@ -522,7 +602,6 @@ export default {
}
}
.radiobutton {
margin-top: 23px;
margin-bottom: 23px;
justify-content: center;
@@ -533,75 +612,75 @@ export default {
height: 32px;
}
}
.listdiv{
display: flex;
justify-content: space-evenly;
text-align: center;
.listdiv {
display: flex;
justify-content: space-evenly;
text-align: center;
.slist {
width: 736px;
background-color: #f5f8fc;
padding-left: 28px;
padding-right: 28px;
padding-bottom: 20px;
padding-top: 16px;
font-size: 18px;
width: 736px;
background-color: #f5f8fc;
padding-left: 28px;
padding-right: 28px;
padding-bottom: 20px;
padding-top: 16px;
font-size: 18px;
.item {
display: flex;
justify-content: space-evenly;
text-align: center;
border-bottom: none;
height: 56px;
align-items: center;
background-color: white;
border-radius: 21px;
margin-top: 10px;
.itemleft {
justify-content: center;
.item {
display: flex;
justify-content: space-evenly;
text-align: center;
border-bottom: none;
height: 56px;
align-items: center;
width: 150px;
.itemid {
font-size: 40px;
font-family: math;
font-style: italic;
font-weight: 700;
color: #409eff;
margin-left: 5px;
background-color: white;
border-radius: 21px;
margin-top: 10px;
.itemleft {
justify-content: center;
display: flex;
align-items: center;
width: 150px;
.itemid {
font-size: 40px;
font-family: math;
font-style: italic;
font-weight: 700;
color: #409eff;
margin-left: 5px;
}
.elseid {
font-size: 26px;
font-family: math;
font-weight: 500;
margin-left: 40px;
}
}
.elseid {
font-size: 26px;
font-family: math;
font-weight: 500;
margin-left: 40px;
.itemcenter {
width: 300px;
}
.itemright {
width: 150px;
}
}
.itemcenter {
width: 300px;
}
.itemright {
width: 150px;
}
}
}
}
}
.projectscore {
.pjc_body {
margin-left: 34px;
margin-right: 34px;
.spandiv{
position: relative;
/* height: 100%; */
width: 40px;
.spantext{
position: absolute;
left: 0;
bottom: 0px;
.pjc_body {
margin-left: 34px;
margin-right: 34px;
.spandiv {
position: relative;
/* height: 100%; */
width: 40px;
.spantext {
position: absolute;
left: 0;
bottom: 0px;
}
}
}
.groupright {
.groupright {
display: flex;
justify-content: space-between;
.btn1 {
@@ -639,34 +718,32 @@ export default {
}
}
}
.pjcb_content {
border: 1px solid #409eff;
padding: 20px;
margin-top: 10px;
.ant-input{
.pjcb_content {
border: 1px solid #409eff;
padding: 20px;
margin-top: 10px;
.ant-input {
width: 46px;
font-size: 16px;
color: #409eff;
}
.scoretext{
color: #409eff;
font-size: 16px;
margin-left: 3px;
margin-right: 4px;
.scoretext {
color: #409eff;
font-size: 16px;
margin-left: 3px;
margin-right: 4px;
}
.pjcb_content :last-child {
margin-bottom: 0px;
}
.content {
align-items: center;
height: 50px;
display: flex;
}
margin-bottom: 130px;
}
.pjcb_content :last-child {
margin-bottom: 0px;
}
.content {
align-items: center;
height: 50px;
display: flex;
}
margin-bottom: 130px;
}
}
}
}
</style>