Files
fe-manage/src/views/projectcenter/TaskPage.vue

5852 lines
162 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!-- 任务页面 -->
<template>
<div class="taskpage">
<div class="addhead" style="flex-shrink: 0">
<div class="leftimg">
<img class="img" src="../../assets/images/projectadd/picture.png" />
</div>
<div class="imgfor">
<div class="forz">管理者进阶-腾飞班</div>
<div class="fort">项目经理黄华刘俊</div>
<div class="fort">起止时间2022-07-21 00:00至2022-10-21 00:00</div>
</div>
<div class="right">
<img class="img1" src="../../assets/images/leveladd/ma.png" />
<div class="line"></div>
<img class="img2" src="../../assets/images/leveladd/pub.png" />
<div class="pub">发布</div>
<div class="line"></div>
<img
style="margin-right: 15px"
class="img2"
src="../../assets/images/leveladd/more.png"
/>
<div class="more">
<span style="color: #7096e3; cursor: pointer">更多</span>
<div class="moreArrow"></div>
<div class="moreItems">
<div class="sammo">撤回</div>
<div class="sammo">复制</div>
</div>
</div>
<div class="line"></div>
<router-link to="/projectmanage">
<div style="display: flex">
<img class="img2" src="../../assets/images/leveladd/back.png" />
<div class="return">返回</div>
</div>
</router-link>
</div>
</div>
<div class="split" style="flex-shrink: 0"></div>
<div class="content">
<a-tabs
class="tab"
v-model:activeKey="activeKey"
size="large"
:tabBarStyle="{ marginLeft: '10px', marginTop: '5px' }"
@change="tabsChange"
>
<a-tab-pane key="1" tab="概览">
<div class="split"></div>
<!-- 概览无数据 -->
<div style="display: none">
<div class="onerow">
<div class="taskmain">快速创建项目详情</div>
</div>
<div class="second">
<div
class="taskbox"
@click="totask"
style="background: linear-gradient(180deg, #fef3dd, #fffaf0)"
>
<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"
@click="tostudent"
style="background: linear-gradient(180deg, #ddeaff, #f0f8fe)"
>
<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, #e5f6ec, #eef9f3)"
>
<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>
<!-- 概览无数据 -->
<!-- 概览有数据 -->
<div>
<div class="onerow">
<div class="taskmain">项目概览</div>
</div>
<div class="second" style="margin-top: 0">
<div class="nubbox">
<span class="nub1">{{
projectInfoOverview.totalStudentCnt
}}</span>
<div class="nub2">总人数</div>
</div>
<div class="nubbox">
<span class="nub1" style="color: #ff90ae">{{
projectInfoOverview.studyStudentCnt
}}</span>
<div class="nub2">学习人数</div>
</div>
<div class="nubbox">
<span class="nub1" style="color: #a497ff">{{
projectInfoOverview.completeStudentCnt
}}</span>
<div class="nub2">完成人数</div>
</div>
<div class="nubbox">
<div>
<span class="nub1" style="color: #5dc988">{{
projectInfoOverview.onlineCourseCnt
}}</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">{{
projectInfoOverview.offLineCourseCnt
}}</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">{{
projectInfoOverview.completeRatio
}}</span
><span style="color: #a497ff; font-size: 14px">%</span>
</div>
<div class="nub2">总完成率</div>
</div>
</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="stagemess">
<div v-for="item in stageList"
:class= "{ 'stage1': item.stageId == choosedStageId, 'stage2': item.stageId != choosedStageId }"
:key="item.stageId" @click="choosedStageId = item.stageId">
{{item.stage}}
</div>
<!-- <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="stageOverviewList.completeCourseRatio"
:width="140"
/>
<div class="protext">课程完成率</div>
</div>
<div class="stagepro">
<a-progress
type="dashboard"
gapDegree="0"
:percent="stageOverviewList.completeExamRatio"
:width="140"
/>
<div class="protext">考试通过率</div>
</div>
<div class="stagepro" style="margin-right: 0">
<a-progress
type="dashboard"
gapDegree="0"
:percent="stageOverviewList.completeRatio"
:width="140"
/>
<div class="protext">作业完成率</div>
</div>
<div class="proright">
<div class="pronub" style="margin-left: 280px">{{stageOverviewList.totalTaskCnt}}</div>
<div class="proright1">
<span class="textpro">阶段任务总数</span>
<a-progress :percent="stageOverviewList.totalTaskCnt" style="width: 369px" />
</div>
<div class="pronub" style="margin-left: 206px">{{stageOverviewList.totalReqCnt}}</div>
<div class="proright1">
<span class="textpro">必修课</span>
<a-progress :percent="stageOverviewList.totalReqCnt" style="width: 369px" />
</div>
<div class="pronub" style="margin-left: 142px">{{stageOverviewList.totalOptCnt}}</div>
<div class="proright1">
<span class="textpro">选修课</span>
<a-progress :percent="stageOverviewList.totalOptCnt" style="width: 369px" />
</div>
</div>
</div>
</div>
<!-- 概览有数据 -->
</a-tab-pane>
<a-tab-pane key="2" tab="任务" force-render>
<div style="flex: 1">
<div class="split"></div>
<div class="onerow">
<div class="taskmain">任务大纲</div>
<button class="btn" @click="showFaceIn" v-if="morFaceT">
批量面授报名
</button>
<router-link to="/taskadd">
<button to="/taskadd" class="edit">
<img
class="editimg"
src="../../assets/images/projectadd/edit.png"
/>
<span class="editext">编辑</span>
</button>
</router-link>
</div>
<!-- <div class="taskSyllabus">
<a-collapse v-model:activeKey="taskSyllabusActive" accordion>
<template #expandIcon="{ isActive }">
<img
class="editimg"
src="../../assets/images/projectadd/edit.png"
/>
<span class="editext">编辑</span>
</router-link>
</div> -->
<div class="taskSyllabus">
<a-collapse v-model:activeKey="taskSyllabusActive" accordion>
<template #expandIcon="{ isActive }">
<img
:style="{
width: isActive ? 9.1 : 8.1,
height: isActive ? 8.1 : 9.1,
'margin-right': isActive ? '12px' : '13px',
}"
:src="
isActive
? require('../../assets/images/projectadd/open.png')
: require('../../assets/images/projectadd/close.png')
"
/>
<div></div>
</template>
<a-collapse-panel
v-for="(value, index) in taskSyllabus"
:key="index"
:header="value.name"
>
<div
class="course"
v-for="(item, key) in value.taskList"
:key="key"
>
<!-- :style="{width:item.course==='在线'?'28px':
height:item.course==='在线'?'27px':}" -->
<div class="first">
<div class="icon">
<div
style="
width: 31px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
"
>
<img
:src="
item.type == '1'
? require('../../assets/images/leveladd/zai.png')
: item.type == '2'
? require('../../assets/images/leveladd/mian.png')
: item.type == '3'
? require('../../assets/images/leveladd/an.png')
: item.type == '4'
? require('../../assets/images/leveladd/zuo.png')
: item.type == '5'
? require('../../assets/images/leveladd/kao.png')
: item.type == '6'
? require('../../assets/images/leveladd/zhi.png')
: item.type == '7'
? require('../../assets/images/leveladd/wai.png')
: item.type == '8'
? require('../../assets/images/leveladd/tao.png')
: item.type == '9'
? require('../../assets/images/leveladd/huo.png')
: item.type == '10'
? require('../../assets/images/leveladd/ce.png')
: item.type == '11'
? require('../../assets/images/leveladd/diao.png')
: item.type == '12'
? require('../../assets/images/leveladd/tou.png')
: null
"
/>
</div>
</div>
<div>
<div class="iconame">{{ item.name }}</div>
<div class="icontext">{{ item.name }}</div>
</div>
</div>
<div class="type">
<div
:class="item.flag == true ? 'typename1' : 'typename'"
>
<!-- {{ item.classify }} -->
<span v-if="item.flag">必修</span>
<span v-else>选修</span>
</div>
</div>
<div class="time">
<div class="timetext">开始时间</div>
<div class="timetext">{{ item.createTime }}</div>
</div>
<div class="progress">
<div class="progresstext">
{{ item.finishStuCnt }}/{{ item.totalStuCnt }}
</div>
<div style="display: flex">
<a-progress
:showInfo="false"
:percent="item.percent"
strokeColor="#FFC067"
trailColor="rgba(253, 209, 98, 0.2)"
/>
<span class="progresstext" style="margin-left: 10px"
>{{
(item.finishStuCnt / item.totalStuCnt) * 100
}}%</span
>
</div>
</div>
<div class="operations">
<div
class="operation"
style="cursor: pointer"
:style="{
display: item.type == '2' ? 'flex' : 'none',
}"
@click="showFS"
>
学员
</div>
<div
class="operation"
style="cursor: pointer"
@click="showAA(item.type)"
:style="{
display:
item.type == '6' || item.type == '9'
? 'flex'
: 'none',
}"
>
考勤
</div>
<div
class="operation"
style="cursor: pointer"
:style="{
display:
item.type == '6' ||
item.type == '9' ||
item.type == '2'
? 'flex'
: 'none',
}"
@click="
item.type == '2'
? showCopyModal(item.type)
: item.type == '6'
? showzhibModal(item.type)
: item.type == '9'
? showhuodModal(item.type)
: null
"
>
二维码
</div>
<div
class="operation"
style="cursor: pointer; margin-right: 35px"
@click="
item.type == '1' ||
item.type == '3' ||
item.type == '7' ||
item.type == '8' ||
item.type == '6' ||
item.type == '11' ||
item.type == '12' ||
item.type == '9'
? showTime(item.name, item.projectTaskId)
: item.type == '5' || item.type == '10'
? showTest(item.name, item.projectTaskId)
: item.type == '2'
? showFace(item.projectTaskId)
: item.type == '4'
? showWork(item.projectTaskId)
: null
"
>
管理
</div>
</div>
</div>
</a-collapse-panel>
</a-collapse>
<!-- 无数据创建任务 v-if="taskSyllabus.length == 0"-->
<router-link
to="/taskadd"
class="taskbox"
style="
background: linear-gradient(180deg, #ddeaff, #f0f8fe);
display: block;
"
>
<div class="leftt">
<img src="../../assets/images/taskpage/left2.png" />
</div>
<div class="photo">
<img src="../../assets/images/taskpage/picture8.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>
</router-link>
<!-- 无数据创建任务 -->
</div>
<div style="display: flex; height: 20px"></div>
</div>
</a-tab-pane>
<a-tab-pane key="3" tab="学员">
<div class="split"></div>
<div class="content3">
<a-tabs v-model:activeKey="activeKey1">
<a-tab-pane key="8" tab="学员管理">
<div class="group">
<div class="groupleft">
<div
style="
display: flex;
align-items: center;
margin-right: 10px;
margin-bottom: 10px;
"
>
<div class="groupname" style="width: 42px">姓名</div>
<a-input
v-model:value="valuestun"
placeholder="请输入姓名"
/>
</div>
<div
style="
display: flex;
align-items: center;
margin-right: 10px;
margin-bottom: 10px;
"
>
<div class="groupname">小组名称</div>
<a-input
v-model:value="valuestugroup"
placeholder="请输入小组名称"
/>
</div>
<div
style="
display: flex;
align-items: center;
margin-right: 10px;
margin-bottom: 10px;
"
>
<div class="groupname" style="width: 42px">部门</div>
<a-select
v-model:value="valuestub"
placeholder="请选择部门"
:options="bum"
@change="handleChangeBum"
/>
</div>
<div
style="
display: flex;
align-items: center;
margin-bottom: 10px;
"
>
<div class="groupname" style="width: 42px">学员</div>
<a-select
v-model:value="valuegood"
placeholder="是否为优秀学员"
:options="goodstuList"
@change="handleChangeGood"
/>
</div>
</div>
<div class="groupright">
<div class="btn1" @click="searchStu">
<img src="../../assets/images/courseManage/search0.png" />
<span class="btn1text">搜索</span>
</div>
<div class="btn2" @click="resetCancel">
<img src="../../assets/images/courseManage/reset1.png" />
<span class="btn2text">重置</span>
</div>
</div>
</div>
<div class="second2" style="margin-top: 20px">
<div class="btn1" @click="showStuAdd">
<img src="../../assets/images/courseManage/add0.png" />
<span class="btn1text">添加学员</span>
</div>
<div class="btn2" @click="showImportStu">
<img src="../../assets/images/courseManage/reset2.png" />
<span class="btn2text">导入学员</span>
</div>
<div class="btn2" @click="showAllDelete">
<img src="../../assets/images/projectadd/delete.png" />
<span class="btn2text">批量删除</span>
</div>
</div>
<div class="talk">
<img class="im" src="../../assets/images/leveladd/gan.png" />
<div class="xu">
<span class="yi">已选择</span>
<div style="width: 5px; display: inline-block"></div>
<span class="th">{{ choosed }}</span>
<div style="width: 5px; display: inline-block"></div>
<span class="yi"></span>
<span class="zon">列表选项总计</span>
<span class="yi">{{ total }}</span>
<span class="yi"></span>
</div>
<div class="clear" @click="clearChooseStu">清空</div>
</div>
<div class="tab" style="margin: 20px 32px 30px 32px">
<a-table
style="border: 1px solid #f2f6fe"
:columns="studentColumns()"
:data-source="tabledata"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
:scroll="{ x: 1400 }"
@expand="expandTable"
:pagination="false"
:row-selection="{
columnWidth: 30,
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
/>
<div
class="nostu"
:style="{ display: total > 0 ? 'none' : 'block' }"
>
<div class="nostuimg"></div>
</div>
<div class="pa">
<a-pagination
v-if="total > 10"
showSizeChanger="true"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="stupageSize"
:current="currentPageStu"
:total="total"
class="pagination"
@change="changePaginationStu"
/>
</div>
</div>
</a-tab-pane>
<a-tab-pane key="9" tab="小组管理" force-render>
<div class="group">
<div class="groupleft">
<div class="groupname">小组名称</div>
<a-input
v-model:value="valuestugn"
placeholder="请输入小组名称"
/>
</div>
<div class="groupright">
<div class="btn1" @click="searchGroup">
<img src="../../assets/images/courseManage/search0.png" />
<span class="btn1text">搜索</span>
</div>
<div class="btn2" @click="resetGroupName">
<img src="../../assets/images/courseManage/reset1.png" />
<span class="btn2text">重置</span>
</div>
</div>
</div>
<div class="second2">
<div class="btn1" @click="showModal2">
<img src="../../assets/images/courseManage/add0.png" />
<span class="btn1text">创建小组</span>
</div>
<div class="btn2" @click="showSubset">
<img src="../../assets/images/courseManage/reset2.png" />
<span class="btn2text">随机分组</span>
</div>
</div>
<!-- 小组列表 -->
<div class="groupmain">
<div
class="groupbox"
v-for="item in groupList"
:key="item.projectGroupId"
>
<div style="width: 90%">
<div class="grouptitle">
<div class="goodgruop">{{ item.groupName }}</div>
<div class="more">
<span
style="color: rgba(0, 0, 0, 0.45); cursor: pointer"
>. . .</span
>
<div class="moreItems">
<div class="sammo">编辑</div>
<div
class="sammo"
@click="deleteGroupBtn(item.projectGroupId)"
>
删除
</div>
</div>
</div>
</div>
<div class="leader">组长{{ item.leaderName }}</div>
<div class="grocenter">
<div class="leader1">进度</div>
<a-progress :percent="item.completeRatio" />
</div>
<div
class="grofooter"
@click="showMemberList(item.projectGroupId)"
>
<div class="ftext">组员名单 ></div>
<div class="peoples">
<div class="people1">
<img
src="../../assets/images/taskpage/people1.png"
/>
</div>
<div class="people2">
<img
src="../../assets/images/taskpage/people2.png"
/>
</div>
<div class="people3">
<img
src="../../assets/images/taskpage/people3.png"
/>
</div>
<div class="people4">
<img
src="../../assets/images/taskpage/people4.png"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</a-tab-pane>
</a-tabs>
</div>
</a-tab-pane>
<a-tab-pane key="4" tab="公告">
<div class="split"></div>
<a-tabs v-model:activeKey="activeKeyNotice">
<a-tab-pane key="11" tab="公告"
><NoticePub v-model:projectId="projectId"></NoticePub
></a-tab-pane>
<a-tab-pane key="12" tab="历史公告" force-render
><NoticeHis v-model:projectId="projectId"></NoticeHis
></a-tab-pane>
</a-tabs>
</a-tab-pane>
<a-tab-pane key="5" tab="项目积分">
<ProjectScore :projectId="projectId"></ProjectScore>
</a-tab-pane>
<a-tab-pane key="6" tab="排行榜">
<div class="split"></div>
<div class="content6">
<div class="title">排行榜</div>
<div class="line"></div>
<div class="search">
<div class="left">
<div class="name">
<div class="text">姓名</div>
<a-input
v-model:value="valueName"
placeholder="请输入姓名"
style="
width: 264px;
height: 40px;
border-radius: 8px;
margin-left: 5px;
"
/>
</div>
<div class="time">
<div class="text">选择时间</div>
<a-range-picker
v-model:value="valueDate"
style="border-radius: 8px; height: 40px; margin-left: 5px"
:placeholder="[' 开始时间', ' 结束时间']"
@change="rankTimeChange"
/>
</div>
</div>
<div class="right">
<div class="btn btn1" @click="rankSearch">
<div class="img1"></div>
<div class="te">搜索</div>
</div>
<div class="btn btn2" @click="rankReset">
<div class="img2"></div>
<div class="te">重置</div>
</div>
</div>
</div>
<div class="main">
<div class="rank">
<div class="rankhead">
<div class="inhead">
<div class="left">进度排行 Top10</div>
<div class="icon"></div>
<div class="right">
<a-select
v-model:value="valuestu1"
style="width: 80px; margin-right: 16px"
:options="rankjindu"
>
</a-select>
<a-select
v-model:value="valuestu2"
style="width: 112px"
:options="rankjieduan"
></a-select>
</div>
</div>
</div>
<div class="tab">
<a-table
:columns="jindutablecolumns"
:data-source="jindutabledata"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
:scroll="{ y: 330 }"
@expand="expandTable"
:pagination="false"
/>
</div>
</div>
<div class="rank">
<div class="rankhead">
<div class="inhead">
<div class="left">学分排行 Top10</div>
<div class="right">
<a-select
v-model:value="valuestu3"
style="width: 80px"
:options="rankxuefen"
></a-select>
</div>
</div>
</div>
<div class="tab">
<a-table
:columns="xuefentablecolumns"
:data-source="xuefentabledata"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
:scroll="{ y: 330 }"
@expand="expandTable"
:pagination="false"
/>
</div>
</div>
<div class="rank">
<div class="rankhead">
<div class="inhead">
<div class="left">学识排行 Top10</div>
<div class="right">
<a-select
v-model:value="valuestu4"
style="width: 80px"
:options="rankxueshi"
></a-select>
</div>
</div>
</div>
<div class="tab">
<a-table
:columns="xueshitablecolumns"
:data-source="xueshitabledata"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
:scroll="{ y: 330 }"
@expand="expandTable"
:pagination="false"
/>
</div>
</div>
</div>
</div>
</a-tab-pane>
<a-tab-pane key="7" tab="设置">
<div class="split"></div>
<a-tabs v-model:activeKey="activeSetKey">
<a-tab-pane key="12" tab="基本信息">
<div class="content7">
<!-- <div class="set_tit">
<span>基本信息</span>
</div> -->
<!-- <div class="line"></div> -->
<div class="set_body">
<!-- <div class="edit" @click="showEditProj">
<div class="img"></div>
<div class="ed">编辑</div>
</div> -->
<div class="edit">
<div class="img"></div>
<div class="ed">编辑</div>
</div>
<div class="set_content">
<div class="setc_name"><span>项目名称</span></div>
<div class="setc_main">
<span style="color: #999999">{{ name }}</span>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>封面图</span></div>
<div class="setc_main">
<img
style="width: 151px; height: 84px"
:src="picUrl"
alt=""
/>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>项目时间</span></div>
<div class="setc_main">
<span style="color: #999999"
>{{ startTime }} {{ endTime }}</span
>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>项目经理</span></div>
<div class="setc_main">
<span style="color: #999999">{{ manager }}</span>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>资源归属</span></div>
<div class="setc_main">
<span style="color: #999999">{{ sourceBelong }}</span>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>项目说明</span></div>
<div class="setc_main">
<span style="color: #999999">{{ remark }}</span>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>同步学习记录</span></div>
<div class="setc_main">
<a-radio v-model:checked="checkedSty"
><span style="color: #333333"
>同步课程学习记录如学员在课程库中拥有课程的学习记录自动免修该课程</span
></a-radio
>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>项目级别</span></div>
<div class="setc_main">
<span style="color: #999999">{{ level }}</span>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>培训体系</span></div>
<div class="setc_main">
<span style="color: #999999">{{ systemId }}</span>
</div>
</div>
<div class="set_content">
<div class="setc_name"><span>是否BOEU实施</span></div>
<div class="setc_main">
<a-radio v-model:checked="checkedBOEU"
><span style="color: #333333">BOEU实施</span></a-radio
>
</div>
</div>
</div>
</div>
</a-tab-pane>
<a-tab-pane key="13" tab="共享文档">
<div class="sametab">
<div class="Gcon">
<div class="pad"></div>
<div class="Gin">
<div class="headone">
<div class="box"></div>
<div class="onetitle">上传共享文档</div>
<div class="oneedi">
<a-switch v-model:checked="docChecked" ></a-switch>
</div>
</div>
<div class="btnbox" style="margin:20px;">
<a-upload
v-model:file-list="fileList"
name="file"
action="/api/file/upload"
@change="handleChange"
>
<span class="xkbtn" style="cursor: pointer; font-size: 17px" >上传</span>
<img src="@/assets/images/basicinfo/cloud.png" style="cursor: pointer;
width:34px;height:34px;
" alt="">
</a-upload>
<div class="btnbox" style="margin:20px;">
<span style="color: #999999">
支持pdf.ppt.pptx.doc.docx.xls.xlsx.jpeg.png.gif.zip
</span>
</div>
<div v-for="item in docList" :key="item.src" class="docListStyle">
<img src="@/assets/images/basicinfo/download.png" style="cursor: pointer;
width:40px;height:40px;margin-right:40px;
" alt="">
<span style="font: oblique bold 16px Sans-serif">{{item.name}}</span>
<span style="color: #4ea6ff;float:right;">删除</span>
</div>
</div>
</div>
</div>
</div>
</a-tab-pane>
</a-tabs>
</a-tab-pane>
</a-tabs>
</div>
<!-- 时间管理抽屉 -->
<time-manage
v-model:Tvisible.sync="visible"
v-if="visible"
:projectTaskId="projectTaskId"
:title="showTimeText"
/>
<!-- 面授管理抽屉 -->
<face-manage
v-model:Fvisible.sync="FaceVisivle"
v-if="FaceVisivle"
:projectTaskId="projectTaskId"
/>
<!-- 学员小组管理创建小组抽屉 -->
<subset-manage v-model:Svisible="subsetVisivle" />
<!-- 学员管理-添加学员抽屉 -->
<stu-add v-model:Stuvisible="Stuvisible" />
<!-- 学员管理-导入学员抽屉 -->
<import-stu v-model:Importvisible="Importvisible" />
<!-- 查看学员 传入查看学员的id-->
<see-stu
v-model:Seevisible="Seevisible"
v-model:checkStuId="checkStuId"
v-model:projectId="projectId"
/>
<!-- 学员换组 -->
<change-group
v-model:Changevisible="Changevisible"
v-model:projectId="projectId"
/>
<!-- 组员名单抽屉 -->
<member-list
v-model:Lvisible="Lvisible"
v-model:chooseGroupId="chooseGroupId"
v-model:projectId="projectId"
/>
<!-- 面授学员抽屉 -->
<face-stu v-model:FSvisible="FSvisible" />
<!-- 活动考勤抽屉 -->
<active-attendance v-model:AAvisible="AAvisible" :title="showkaoqinText" />
<!-- 作业管理抽屉 -->
<work-manage
v-model:Wvisible.sync="Wvisible"
v-if="Wvisible"
:projectTaskId="projectTaskId"
/>
<!-- 考试管理抽屉 -->
<test-manage
v-model:TMvisible.sync="TMvisible"
v-if="Wvisible"
:title="showTestText"
:projectTaskId="projectTaskId"
/>
<!-- 批量面授报名 -->
<task-imp-stu v-model:TaskFaceImpStuvisible="TaskFaceImpStuvisible" />
<!-- 概览无数据-项目发布弹窗 -->
<div>
<a-modal
v-model:visible="pubproject"
:title="null"
@ok="closeModal"
:footer="null"
:closable="false"
:centered="true"
wrapClassName="pubproject"
width="679px"
height="437px"
>
<div
class="modalHeader"
style="
width: 100%;
height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
"
>
<div class="headerLeft" style="margin-left: 32px">
<span style="width: 15px; height: 15px"
><img src="../../assets/images/taskpage/pub.png"
/></span>
<span
class="headerLeftText"
style="font-size: 16px; margin-left: 10px"
>项目发布</span
>
</div>
<div style="cursor: pointer; margin-right: 32px" @click="closeModal">
<img
style="width: 22px; height: 22px"
src="../../assets/images/basicinfo/close22.png"
/>
</div>
</div>
<div class="modalMain">
<div class="projectname">管理者进阶-腾飞班1</div>
<div class="projecttime">
<span class="timeti">项目时间</span
><span class="timeme">2022/08/01-2022/08/30</span>
</div>
<div class="projectbox">
<div class="promessage">
<div class="messageme">项目信息</div>
<div class="messagege">当前项目共0个阶段0个任务</div>
</div>
<div class="stumessage">
<div class="messageme1">学员信息</div>
<div class="messagege1">项目共0名学员</div>
</div>
</div>
<div class="send">
<a-switch v-model:checked="checked" size="small" />
<span class="sendtext">发送项目通知</span>
</div>
<div class="ckb">
<a-checkbox v-model:checked="checked1"
><span class="sendpeo">发给老师</span></a-checkbox
>
<a-checkbox v-model:checked="checked2"
><span class="sendpeo">发给学员</span></a-checkbox
>
</div>
<div class="pubtn">
<a-button class="pubtn1" @click="closeModal">取消</a-button>
<a-button class="pubtn2" @click="closeModal">发布</a-button>
</div>
</div>
</a-modal>
</div>
<!-- 概览无数据-项目发布弹窗 -->
<!-- 学员-创建小组弹窗 -->
<div>
<a-modal
v-model:visible="stugroup"
:title="null"
@ok="closeModal2"
:footer="null"
:closable="false"
:centered="true"
wrapClassName="doublepro"
width="624px"
height="332px"
>
<div
class="modalHeader"
style="
width: 100%;
height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
"
>
<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="valueaddg"
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; margin-left: 15px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">小组长:</div>
<div class="in">
<a-input
v-model:value="valueaddm"
placeholder="请输入小组长"
style="border-radius: 8px; height: 40px"
/>
</div>
</div>
<div class="pubtn">
<a-button class="pubtn1" @click="closeModal2">取消</a-button>
<a-button class="pubtn2" @click="createG">确定</a-button>
</div>
</div>
</a-modal>
</div>
<!-- 学员-创建小组弹窗 -->
<!-- 取消学员弹窗 -->
<div>
<a-modal
v-model:visible="canclestu"
:footer="null"
:closable="close"
wrapClassName="canclestu"
centered="true"
@cancel="closeModal1"
>
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="icon1"></div>
<span>提示</span>
</div>
<div class="body">
<span>您是否授予此学员优秀学员称号</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="cancelyou">取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="closeModal1">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
</div>
<!-- 取消学员弹窗 -->
<!-- 优秀学员弹窗 -->
<div>
<a-modal
v-model:visible="canclestu1"
:footer="null"
:closable="close"
wrapClassName="canclestu1"
centered="true"
>
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="icon1"></div>
<span>提示</span>
</div>
<div class="body">
<span>您是否取消此学员优学员称号</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="cancelcanyou">取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="closeModal3">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
</div>
<!-- 取消学员弹窗 -->
<!-- 删除学员弹窗 -->
<div>
<a-modal
v-model:visible="deleteOneStu"
:footer="null"
:closable="close"
wrapClassName="canclestu1"
centered="true"
>
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="icon1"></div>
<span>提示</span>
</div>
<div class="body">
<span>您确定要删除此学员吗</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="closeDeleteOne">取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="closeDeleteOneConfirm">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
</div>
<!-- 删除学员弹窗 -->
<!-- 删除弹窗 -->
<div>
<a-modal
v-model:visible="delete_hs"
:footer="null"
:closable="closableQR"
wrapClassName="DelModal"
style="margin-top: 400px"
@cancel="delete_exit"
>
<div class="delete" :style="{ display: delete_hs ? 'block' : 'none' }">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="del-icon"></div>
<span>提示</span>
<div class="close_exit" @click="delete_exit"></div>
</div>
<div class="body">
<span>您确定要删除此课程吗</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="delete_exit">取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="delete_exit">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
</div>
<!-- 删除弹窗 -->
<!-- 面授管理二维码 -->
<a-modal
v-model:visible="copyModal"
:footer="null"
:closable="closeCopy"
wrapClassName="facemanageModal"
centered="true"
>
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="icon"></div>
<span>面授管理</span>
<div class="close_exit" @click="closeCopyModal"></div>
</div>
<div class="body">
<div><img src="../../assets/images/taskpage/erweima.png" /></div>
</div>
<div class="footerr">
<div class="onload">下载二维码</div>
<div class="onloadpx">200*200</div>
<div class="onloadpx">400*400</div>
<div class="onloadpx">800*800</div>
</div>
</div>
</div>
</a-modal>
<!-- 直播管理二维码 -->
<a-modal
v-model:visible="zhibModal"
:footer="null"
:closable="closeCopy"
wrapClassName="facemanageModal"
centered="true"
>
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="icon"></div>
<span>直播管理</span>
<div class="close_exit" @click="closezhibModal"></div>
</div>
<div class="body">
<div><img src="../../assets/images/taskpage/erweima.png" /></div>
</div>
<div class="footerr">
<div class="onload">下载二维码</div>
<div class="onloadpx">200*200</div>
<div class="onloadpx">400*400</div>
<div class="onloadpx">800*800</div>
</div>
</div>
</div>
</a-modal>
<!-- 活动管理二维码 -->
<a-modal
v-model:visible="huodModal"
:footer="null"
:closable="closeCopy"
wrapClassName="facemanageModal"
centered="true"
>
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="icon"></div>
<span>活动管理</span>
<div class="close_exit" @click="closehuodModal"></div>
</div>
<div class="body">
<div><img src="../../assets/images/taskpage/erweima.png" /></div>
</div>
<div class="footerr">
<div class="onload">下载二维码</div>
<div class="onloadpx">200*200</div>
<div class="onloadpx">400*400</div>
<div class="onloadpx">800*800</div>
</div>
</div>
</div>
</a-modal>
<!-- 批量删除弹窗 -->
<div>
<a-modal
v-model:visible="allDelete"
:footer="null"
:closable="close"
wrapClassName="canclestu1"
centered="true"
>
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="icon1"></div>
<span>提示</span>
</div>
<div class="body">
<span>您确定批量删除吗</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="closeCancelDelete">取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="closeAllDelete">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
</div>
<!-- 编辑项目弹窗 -->
<proj-set v-model:editHs="editHs" v-model:projectId="projectId" />
</div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue";
import { useRoute } from "vue-router";
// import { CaretRightOutlined } from "@ant-design/icons-vue";
import TimeManage from "../../components/drawers/TimeManage";
import FaceManage from "../../components/drawers/FaceManage";
import SubsetManage from "../../components/drawers/SubsetManage";
import MemberList from "../../components/drawers/MemberList";
import ActiveAttendance from "../../components/drawers/ActiveAttendance";
import WorkManage from "../../components/drawers/WorkManage";
import FaceStu from "../../components/drawers/FaceStu";
import TestManage from "../../components/drawers/TestManage";
import StuAdd from "../../components/drawers/StuAdd";
import ImportStu from "../../components/drawers/ImportStu";
import SeeStu from "../../components/drawers/SeeStu";
import ChangeGroup from "../../components/drawers/ChangeGroup";
import NoticePub from "../../components/drawers/NoticePub";
import NoticeHis from "../../components/drawers/NoticeHis";
import ProjectScore from "../../components/drawers/ProjectScore";
import TaskImpStu from "../../components/drawers/TaskFaceIn";
import { storage } from "../../api/storage";
import * as api from "../../api/index1";
import {
getProjStu,
deleteStu,
getGroupList,
deleteGroup,
editGroup,
topStudent,
} from "../../api/indexProjStu";
import { message } from "ant-design-vue";
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: {
// CaretRightOutlined,
TimeManage,
FaceManage,
SubsetManage,
MemberList,
FaceStu,
ActiveAttendance,
WorkManage,
TestManage,
StuAdd,
ImportStu,
SeeStu,
ChangeGroup,
NoticePub,
ProjectScore,
TaskImpStu,
projSet,
NoticeHis,
},
setup() {
const state = reactive({
projectId: storage.get("projectId")
? JSON.parse(storage.get("projectId"))
: null,
goodstuList: [
{
id: 1,
value: "全部",
label: "全部",
},
{
id: 2,
value: "普通学员",
label: "普通学员",
},
{
id: 3,
value: "优秀学员",
label: "优秀学员",
},
],
bum: [
{
id: 1,
value: "",
label: "",
},
],
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: [
// {
// key: 1,
// name: "sss",
// bum: "c",
// gangw: "ss",
// group: "sss",
// progress: "sss",
// diploma: "0",
// stutime: "20202",
// putin: "shs",
// excellent: true,
// studentId: 22,
// },
],
//小组信息列表
groupList: [],
// stuName: "", //搜索的学员姓名
// stuGroup: "", //搜索的学员小组名称
// stuBum: "", //搜索的学员小组部门
// stuGood: "", //搜索的学员是否优秀
total: 0, //学员列表数据总条数
stupageSize: 10,
currentPageStu: 1, //当前页
choosed: 0, //勾选的学员总数
selectedRowKeys: [], //选择的学员
selectedRows: [], //选择的学员的id值
chooseDeleteOne: [], //删除的单个学员id
// projectId:"", //项目任务id
projectTaskId: "", //项目任务任务id
//进度排行学员
rankjindu: [{ value: "学员", label: "学员" }],
valuestu1: "学员",
//进度排行阶段
rankjieduan: [{ value: "第一阶段", label: "第一阶段" }],
valuestu2: "第一阶段",
//学分排行
rankxuefen: [{ value: "学员", label: "学员" }],
valuestu3: "学员",
//学识排行
rankxueshi: [{ value: "学员", label: "学员" }],
valuestu4: "学员",
visible: false, //时间管理
FaceVisivle: false, //面授管理
subsetVisivle: false, //随机小组
Lvisible: false, //组员名单
FSvisible: false, //面授学员
AAvisible: false, //活动考勤
Wvisible: false, //作业管理
TMvisible: false, //考试管理
Stuvisible: false, //添加学员
Importvisible: false, //导入学员
Seevisible: false, //查看学员
Changevisible: false, //学员换组
editHs: false, //编辑弹窗
delete_hs: false, //删除弹窗
copyModal: false, //面授二维码弹窗
closeCopy: false, //面授二维码关闭图标
zhibModal: false, //直播二维码弹窗
huodModal: false, //活动二维码弹窗
allDelete: false, //批量删除弹窗
pubproject: false,
stugroup: false,
canclestu: false,
canclestu1: false,
deleteOneStu: false, //删除单个学员弹窗
checked: false,
checked1: true,
checked2: false,
checkedSty: false, //同步学习记录
checkedBOEU: false, //是否BOEU实施
radioV1: "",
radioV2: "",
activeKey: "4", //1:概览 2.任务...
activeKey1: "8", //8:学员管理 9小组管理
activeKey2: "3",
activeKeyNotice: "11",
inputValue: 5,
inputValue2: 5,
inputValue3: 5,
valueaddm: "", //创建小组输入小组长
valueaddg: "", //创建小组输入名称
valuestun: "", //学员管理姓名
valuegood: "",
valuestub: "", //学员管理部门
valuestug: "", //学员小组管理名称
valuestugroup: "", //学员管理小组名称
valueDate: "", //排行榜输入日期
noticeChecked: true,
noticeContent: "",
TaskFaceImpStuvisible: false, //批量面授报名
valuestugn: "", //小组管理的输入的小组名称
checkStuId: null, //要查看的学员id
chooseGroupId: null,
morFaceT: false, //批量面授报名按钮
faceArr: [], //任务大纲列表所有name
//进度排行表
jindutabledata: [
{
rank: "1",
name: "哈哈",
jd: "80%",
},
{
rank: "2",
name: "哈哈",
jd: "70%",
},
{
rank: "3",
name: "哈哈",
jd: "70%",
},
{
rank: "4",
name: "哈哈",
jd: "70%",
},
{
rank: "5",
name: "哈哈",
jd: "70%",
},
{
rank: "6",
name: "哈哈",
jd: "70%",
},
{
rank: "7",
name: "哈哈",
jd: "70%",
},
{
rank: "8",
name: "哈哈",
jd: "70%",
},
{
rank: "9",
name: "哈哈",
jd: "70%",
},
{
rank: "10",
name: "哈哈",
jd: "70%",
},
],
jindutablecolumns: [
{
title: "排名",
dataIndex: "rank",
key: "rank",
width: 50,
align: "center",
className: "h",
customRender: (text) => {
if (text.record.rank == "1") {
return (
<img
style={{ width: 24, height: 24 }}
src={require("../../assets/images/taskpage/one.png")}
/>
);
} else if (text.record.rank == "2") {
return (
<img
style={{ width: 24, height: 24 }}
src={require("../../assets/images/taskpage/two.png")}
/>
);
} else if (text.record.rank == "3") {
return (
<img
style={{ width: 24, height: 24 }}
src={require("../../assets/images/taskpage/three.png")}
/>
);
} else {
return <div>{text.record.rank}</div>;
}
},
},
{
title: "名称",
dataIndex: "name",
key: "name",
width: 50,
align: "center",
className: "h",
},
{
title: "进度",
dataIndex: "jd",
key: "jd",
width: 50,
align: "center",
className: "h",
},
],
//学分排行表
xuefentabledata: [
{
rank: "1",
name: "哈哈",
jd: "80%",
},
{
rank: "2",
name: "哈哈",
jd: "70%",
},
{
rank: "3",
name: "哈哈",
jd: "70%",
},
{
rank: "4",
name: "哈哈",
jd: "70%",
},
{
rank: "5",
name: "哈哈",
jd: "70%",
},
{
rank: "6",
name: "哈哈",
jd: "70%",
},
{
rank: "7",
name: "哈哈",
jd: "70%",
},
{
rank: "8",
name: "哈哈",
jd: "70%",
},
{
rank: "9",
name: "哈哈",
jd: "70%",
},
{
rank: "10",
name: "哈哈",
jd: "70%",
},
],
xuefentablecolumns: [
{
title: "排名",
dataIndex: "rank",
key: "rank",
width: 50,
align: "center",
className: "h",
customRender: (text) => {
if (text.record.rank == "1") {
return (
<img
style={{ width: 24, height: 24 }}
src={require("../../assets/images/taskpage/one.png")}
/>
);
} else if (text.record.rank == "2") {
return (
<img
style={{ width: 24, height: 24 }}
src={require("../../assets/images/taskpage/two.png")}
/>
);
} else if (text.record.rank == "3") {
return (
<img
style={{ width: 24, height: 24 }}
src={require("../../assets/images/taskpage/three.png")}
/>
);
} else {
return <div>{text.record.rank}</div>;
}
},
},
{
title: "名称",
dataIndex: "name",
key: "name",
width: 50,
align: "center",
className: "h",
},
{
title: "进度",
dataIndex: "jd",
key: "jd",
width: 50,
align: "center",
className: "h",
},
],
//学识排行表
xueshitabledata: [
{
rank: "1",
name: "哈哈",
jd: "80%",
},
{
rank: "2",
name: "哈哈",
jd: "70%",
},
{
rank: "3",
name: "哈哈",
jd: "70%",
},
{
rank: "4",
name: "哈哈",
jd: "70%",
},
{
rank: "5",
name: "哈哈",
jd: "70%",
},
{
rank: "6",
name: "哈哈",
jd: "70%",
},
{
rank: "7",
name: "哈哈",
jd: "70%",
},
{
rank: "8",
name: "哈哈",
jd: "70%",
},
{
rank: "9",
name: "哈哈",
jd: "70%",
},
{
rank: "10",
name: "哈哈",
jd: "70%",
},
],
xueshitablecolumns: [
{
title: "排名",
dataIndex: "rank",
key: "rank",
width: 50,
align: "center",
className: "h",
customRender: (text) => {
if (text.record.rank == "1") {
return (
<img
style={{ width: 24, height: 24 }}
src={require("../../assets/images/taskpage/one.png")}
/>
);
} else if (text.record.rank == "2") {
return (
<img
style={{ width: 24, height: 24 }}
src={require("../../assets/images/taskpage/two.png")}
/>
);
} else if (text.record.rank == "3") {
return (
<img
style={{ width: 24, height: 24 }}
src={require("../../assets/images/taskpage/three.png")}
/>
);
} else {
return <div>{text.record.rank}</div>;
}
},
},
{
title: "名称",
dataIndex: "name",
key: "name",
width: 50,
align: "center",
className: "h",
},
{
title: "进度",
dataIndex: "jd",
key: "jd",
width: 50,
align: "center",
className: "h",
},
],
//任务大纲列表
taskSyllabus: [
// {
// text: "阶段1腾飞班阶段1",
// children: [
// {
// course: "在线",
// name: "时间管理",
// classify: "选修",
// beginTime: "2022-09-10 14:03",
// total: 50, //总人数
// complete: 20, //完成人数
// percent: 40,
// },
// {
// course: "直播",
// name: "管理直播间",
// classify: "必修",
// beginTime: "2022-09-12 14:03",
// total: 50, //总人数
// complete: 10, //完成人数
// percent: 20,
// },
// {
// course: "面授",
// name: "管理面授课",
// classify: "必修",
// beginTime: "2022-09-16 14:03",
// total: 80, //总人数
// complete: 0, //完成人数
// percent: 0,
// },
// {
// course: "活动",
// name: "管理活动",
// classify: "必修",
// beginTime: "2022-09-16 14:03",
// total: 50, //总人数
// complete: 40, //完成人数
// percent: 80,
// },
// {
// course: "作业",
// name: "管理者作业",
// classify: "选修",
// beginTime: "2022-09-16 14:03",
// total: 50, //总人数
// complete: 30, //完成人数
// percent: 60,
// },
// {
// course: "考试",
// name: "管理者考试",
// classify: "必修",
// beginTime: "2022-09-16 14:03",
// total: 50, //总人数
// complete: 50, //完成人数
// percent: 100,
// },
// {
// course: "案例",
// name: "管理直播间",
// classify: "必修",
// beginTime: "2022-09-16 14:03",
// total: 50, //总人数
// complete: 10, //完成人数
// percent: 20,
// },
// {
// course: "外链",
// name: "管理直播间",
// classify: "必修",
// beginTime: "2022-09-16 14:03",
// total: 50, //总人数
// complete: 10, //完成人数
// percent: 20,
// },
// ],
// },
// {
// text: "阶段2腾飞班阶段2",
// children: [
// {
// course: "讨论",
// name: "时间管理",
// classify: "选修",
// beginTime: "2022-09-16 14:03",
// total: 50, //总人数
// complete: 20, //完成人数
// percent: 40,
// },
// {
// course: "测评",
// name: "管理直播间",
// classify: "必修",
// beginTime: "2022-09-16 14:03",
// total: 50, //总人数
// complete: 10, //完成人数
// percent: 20,
// },
// {
// course: "调研",
// name: "管理直播间",
// classify: "必修",
// beginTime: "2022-09-16 14:03",
// total: 50, //总人数
// complete: 10, //完成人数
// percent: 20,
// },
// {
// course: "投票",
// name: "管理直播间",
// classify: "必修",
// beginTime: "2022-09-16 14:03",
// total: 50, //总人数
// complete: 10, //完成人数
// percent: 20,
// },
// ],
// },
],
taskSyllabusActive: 0,
//在线管理等页面传递参数
showTimeText: "",
//考试、测评页面传递参数
showTestText: "",
//直播、活动页面传递参数
showkaoqinText: "",
//排行榜时间
rankStartTime: null,
rankEndTime: null,
valueName: "", //排行榜输入姓名
//设置
name: null, //项目名称
startTime: null, //开始时间
endTime: null, //结束时间
manager: null, //项目经理
sourceBelong: null, //资源归属
remark: null, //项目说明
level: null, //项目级别
systemId: null, //培训体系
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();
console.log("route:", router.query.id);
// 输入接入 -- start --
//任务大纲渲染
const getTaskList = () => {
let objtl = {
projectId: 27,
};
apitl
.getProjectDetail(objtl)
.then((res) => {
if (res.status == 200) {
console.log("阶段列表", res.data.data.stageList);
for (let i = 0; i < res.data.data.stageList.length; i++) {
for (
let k = 0;
k < res.data.data.stageList[i].taskList.length;
k++
) {
if (res.data.data.stageList[i].taskList[k].name == "面授") {
state.morFaceT = true;
break;
}
}
}
//暂时传个固定的id用 到时候看数据里面是否有在更换
// state.projectTaskId = res.data.data.stageList[0].taskList[0].projectTaskId
let leng = res.data.data.stageList.length;
if (leng > 0) {
let taskarr = res.data.data.stageList;
state.taskSyllabus = taskarr;
}
}
})
.catch((err) => {
console.log("获取任务列表失败", err);
});
};
//学员学员管理渲染
// const getTableDate = () => {
// let datas = state.tabledata;
// datas.map((value) => {
// {
// //单层项目
// value.operations = (
// <div class="operation">
// <div class="nSelect">
// <div class="nselect">
// <div
// class="jc"
// onClick={() => {
// // state.QR_hs = true;
// // state.ftsQR_hs = true;
// state.canclestu = true;
// }}
// >
// 优秀学员
// </div>
// <div
// class="jc"
// onClick={() => {
// state.Seevisible = true;
// }}
// >
// 查看
// </div>
// <div class="tableSelect">
// <a-select
// style="width: 50px;margin-top:2px;margin-left:25px"
// value="更多"
// // options={state.projectNameList}
// dropdownClassName="tabledropdown"
// >
// <a-select-option
// value="换组"
// label="换组"
// style="padding-left:35px"
// >
// <div
// onClick={() => {
// // state.copy_hs = true;
// }}
// >
// 复制
// </div>
// </a-select-option>
// <a-select-option
// value="删除"
// label="删除"
// style="padding-left:35px"
// >
// <div
// onClick={() => {
// state.delete_hs = true;
// }}
// >
// 删除
// </div>
// </a-select-option>
// </a-select>
// </div>
// </div>
// </div>
// </div>
// );
// }
// });
// state.tableData = datas;
// };
// getTableDate();
const totask = () => {
state.activeKey = "2";
};
const tostudent = () => {
state.activeKey = "3";
state.activeKey1 = "8";
};
const showModal = () => {
state.pubproject = true;
};
const closeModal = () => {
state.pubproject = false;
};
const showModal1 = () => {
state.canclestu = true;
};
//点击确定授予优秀学员后
const closeModal1 = () => {
let obj = {
projectId: state.projectId,
studentIds: state.changeGoods,
topFlag: 1,
};
topStudent(obj)
.then((res) => {
console.log(`优秀学员授予成功${res.data}`);
message.success("优秀学员称号授予成功");
getStu();
})
.catch((err) => {
console.log(`优秀学员授予成功${err}`);
message.warning("优秀学员称号授予失败");
});
state.changeGoods = [];
state.canclestu = false;
};
//点击取消授予优秀学员后
const cancelyou = () => {
state.changeGoods = [];
state.canclestu = false;
};
const showModal3 = () => {
state.canclestu1 = true;
};
//点击确定取消优秀学员称号
const closeModal3 = () => {
let obj = {
projectId: state.projectId,
studentIds: state.changeGoods,
topFlag: 0,
};
topStudent(obj)
.then((res) => {
console.log(`取消优秀学员称号成功${res}`);
message.success("优秀学员称号取消成功");
getStu();
})
.catch((err) => {
console.log(`取消优秀学员称号失败${err}`);
message.warning("优秀学员称号取消失败");
});
state.changeGoods = [];
state.canclestu1 = false;
};
//点击取消取消授予优秀学员后
const cancelcanyou = () => {
state.changeGoods = [];
state.canclestu1 = false;
};
const showModal2 = () => {
state.stugroup = true;
};
const closeModal2 = () => {
state.stugroup = false;
};
//点击确定创建小组
const createG = () => {
if (state.valueaddm == "" || state.valueaddg == "") {
message.destroy();
return message.warning("请输入必填项");
} else {
createGroup();
state.stugroup = false;
}
};
const showCopyModal = () => {
state.copyModal = true;
};
const closeCopyModal = () => {
state.copyModal = false;
};
const showFaceIn = () => {
state.TaskFaceImpStuvisible = true;
};
//新增
const showTime = (name, id) => {
console.log("点击管理并传了id");
state.visible = true;
state.showTimeText = name;
state.projectTaskId = id;
};
//新增
const showFace = (id) => {
//面授管理的抽屉
// console.log("点击管理");
state.FaceVisivle = true;
state.projectTaskId = id;
};
const showSubset = () => {
// 随机分组
state.subsetVisivle = true;
};
//面授学员的弹窗
const showFS = () => {
state.FSvisible = true;
};
//面授学员的弹窗
const showMemberList = (id) => {
state.Lvisible = true;
console.log("ssdsdsdsd", id);
state.chooseGroupId = id;
};
//活动考勤的抽屉
const showAA = (course) => {
state.AAvisible = true;
state.showkaoqinText = "【" + course + "】" + "考勤";
};
//作业管理的抽屉
const showWork = (id) => {
state.Wvisible = true;
state.projectTaskId = id;
};
//考试管理的抽屉
const showTest = (name, id) => {
state.TMvisible = true;
state.showTestText = name;
state.projectTaskId = id;
};
const showStuAdd = () => {
state.Stuvisible = true;
};
const showSeeStu = () => {
state.Seevisible = true;
};
const showImportStu = () => {
state.Importvisible = true;
};
const showChangeGroup = () => {
state.Changevisible = true;
};
const edit_hShow = () => {
state.edit_hs = true;
};
const edit_exit = () => {
state.edit_hs = false;
state.radioV1 = "";
state.radioV2 = "";
};
const cloradio1 = (value) => {
if (value != "") {
state.radioV1 = "";
}
};
const cloradio2 = (value) => {
if (value != "") {
state.radioV2 = "";
}
};
const showzhibModal = () => {
state.zhibModal = true;
};
const showhuodModal = () => {
state.huodModal = true;
};
const closezhibModal = () => {
state.zhibModal = false;
};
const closehuodModal = () => {
state.huodModal = false;
};
const showEditProj = () => {
state.editHs = true;
};
//学员管理列表操作
const studentData = () => {
let arr = state.tabledata;
console.log(arr, "学员管理");
arr.map((value) => {
value.operation = (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<div
class="studentopea1"
onClick={() => {
if (value.excellent === false) {
state.canclestu = true;
console.log("youxiu", value.studentId);
state.changeGoods.push(value.studentId);
} else if (value.excellent === true) {
state.canclestu1 = true;
console.log("youxiu", value.studentId);
state.changeGoods.push(value.studentId);
}
}}
>
{value.excellent ? "取消优秀" : "优秀学员"}
</div>
<div
class="studentopea2"
onClick={() => {
state.Seevisible = true;
console.log(value.studentId, "点击了查看");
state.checkStuId = value.studentId;
}}
>
查看
</div>
<div class="studentSelect">
<a-select
style="width: 50px"
value="更多"
// options={state.projectNameList}
dropdownClassName="tabledropdown"
>
<a-select-option value="换组" label="换组">
<div
onClick={() => {
state.Changevisible = true;
}}
>
换组
</div>
</a-select-option>
<a-select-option value="删除" label="删除">
<div
onClick={() => {
console.log("点击了111", value.studentId);
showDeleteOne(value.studentId);
}}
>
删除
</div>
</a-select-option>
</a-select>
</div>
</div>
);
});
state.tabledata = arr;
};
studentData();
const studentColumns = () => {
const tablecolumns = [
{
title: "姓名",
dataIndex: "name",
key: "name",
// width: 30,
align: "left",
className: "h",
// scopedSlots: { customRender: "action" }, //引入的插槽
customRender: (text) => {
console.log(text.excellent);
return (
<div>
{text.record.excellent ? (
<div
style={{
display: "flex",
alignItems: "center",
}}
>
<span class="stydentName">{text.value}</span>
<div class="studentExcellent">
<img
class="studentExcellentImg"
src={require("../../assets/images/taskpage/excellent.png")}
/>
<span class="studentExcellentT">优秀</span>
</div>
</div>
) : (
<div>
<span>{text.value}</span>
</div>
)}
</div>
);
},
},
{
title: "部门",
dataIndex: "bum",
key: "bum",
// width: 50,
align: "center",
className: "h",
},
{
title: "岗位",
dataIndex: "gangw",
key: "gangw",
// width: 50,
align: "center",
className: "h",
},
{
title: "所属小组",
dataIndex: "group",
key: "group",
// width: 50,
align: "center",
className: "h",
},
{
title: "进度",
dataIndex: "progress",
key: "progress",
// width: 30,
align: "center",
className: "h",
},
{
title: "证书",
dataIndex: "diploma",
key: "diploma",
// width: 30,
align: "center",
className: "h",
},
{
title: "最近学习时间",
dataIndex: "stutime",
key: "stutime",
// width: 50,
align: "center",
className: "h",
// sorter: {
// compare: (a, b) => a.stutime - b.stutime,
// multiple: 3,
// },
},
{
title: "加入方式",
dataIndex: "putin",
key: "putin",
// width: 40,
align: "center",
className: "h",
},
{
title: "操作",
dataIndex: "operation",
key: "operation",
// width: 60,
align: "center",
className: "h",
},
];
return tablecolumns;
};
const delete_exit = () => {
state.delete_hs = false;
};
//tabs切换
const tabsChange = (e) => {
//排行榜
if (e == 6) {
//获取进度榜
getbillboard(1, 1);
//获取学分榜
getbillboard(2, 1);
//获取学时榜
getbillboard(3, 1);
} else {
rankReset();
}
};
// start -------排行榜---------------排行榜------------排行榜------------------排行榜---------
//选择搜索时间
const rankTimeChange = (e, date) => {
let startTime = date[0] + " 00:00:00";
let endTime = date[1] + " 23:59:59";
state.rankStartTime = new Date(startTime).getTime() / 1000;
state.rankEndTime = new Date(endTime).getTime() / 1000;
console.log("e", state.rankStartTime, state.rankEndTime);
};
//获取排行榜 category:榜单类别参数 type:人员类别参数
const getbillboard = (category, type) => {
let obj = {
beginTime: state.rankStartTime,
category: category,
endTime: state.rankEndTime,
name: state.valueName,
projectId: state.projectId,
stageId: 0,
type: type,
};
api
.billboard(obj)
.then((res) => {
console.log("获取成功", res);
})
.catch((err) => {
console.log("获取失败", err);
});
};
//搜索
const rankSearch = () => {
//获取进度榜
getbillboard(1, 1);
//获取学分榜
getbillboard(2, 1);
//获取学时榜
getbillboard(3, 1);
};
//重置
const rankReset = () => {
state.rankStartTime = null;
state.rankEndTime = null;
state.valueDate = null;
state.valueName = null;
};
// end -----排行榜----------------排行榜----------------------排行榜-----------排行榜----------
//start---------学员------
//删除单个学员
const showDeleteOne = (id) => {
state.deleteOneStu = true;
state.chooseDeleteOne.push(id);
};
//点击取消删除单个学员
const closeDeleteOne = () => {
state.deleteOneStu = false;
state.chooseDeleteOne = [];
};
//点击确认删除单个学员
const closeDeleteOneConfirm = () => {
state.deleteOneStu = false;
deleteStu({
projectId: state.projectId,
studentIds: state.chooseDeleteOne,
})
.then((res) => {
console.log(res, "单个删除成功");
message.success("删除成功");
getStu();
})
.catch((err) => {
console.log(err, "单个删除失败");
message.warning("删除失败");
});
state.chooseDeleteOne = [];
};
//批量删除学员弹窗
const showAllDelete = () => {
if (state.selectedRows.length == 0) {
message.destroy();
return message.warning("请选择要删除的学员");
} else {
state.allDelete = true;
}
};
//点击取消的批量删除弹窗
const closeCancelDelete = () => {
state.allDelete = false;
};
//点击确定的批量删除弹窗
const closeAllDelete = () => {
deleteStu({
projectId: state.projectId,
studentIds: state.selectedRows,
})
.then((res) => {
console.log(res, "删除成功");
message.success("删除成功");
state.selectedRows = [];
getStu();
})
.catch((err) => {
console.log(err, "删除失败");
message.warning("删除失败");
});
state.allDelete = false;
};
const handleChangeGood = (value) => {
console.log(value, state.valuegood, 11111);
};
const handleChangeBum = (value) => {
console.log(value, 22222);
};
//把数据放到state里
const getTableDataList = (tableData) => {
let data = tableData;
let array = [];
data.map((value) => {
let obj = {
key: value.studentId,
projectId: value.projectId, //项目id
groupId: value.groupId, //小组id
group: value.groupName, //小组名
studentId: value.studentId, //学生id
currentStageId: value.currentStageId, //当前关卡id
name: value.name, //用户名
bum: value.userInfoBo.deptName, //部门
gangw: value.userInfoBo.jobName, //岗位
completeStageCnt: value.completeStageCnt, //当前完成阶段数
totalStageCnt: value.totalStageCnt, //总阶段数
excellent: value.topFlag == 1 ? true : false, //是否优秀学员
progress: value.completeStageCnt + "/" + value.totalStageCnt,
putin:
value.source == 0
? "报名加入"
: value.source == 1
? "指定添加"
: value.source == 2
? "组织添加"
: value.source == 3
? "受众添加"
: "-", //加入方式
stutime: toDate(value.beginStudyTime / 1000, "Y-M-D"), //开始学习时间
};
array.push(obj);
});
state.tabledata = array;
};
//把小组列表信息放到state里
const setGroupList = (tableData) => {
let data = tableData;
let array = [];
data.map((value) => {
let obj = {
projectId: value.projectId, //项目id
projectGroupId: value.projectGroupId, //小组id
groupName: value.groupName, //小组名称
leaderId: value.leaderId, //组长id
leaderName: value.leaderName, //组长名称
source: value.source == 1 ? "指定添加" : "随机分组",
completeTaskCnt: value.completeTaskCnt, //完成任务数
totalTaskCnt: value.totalTaskCnt, //累计任务数
completeRatio: value.completeRatio, //完成比例
};
array.push(obj);
});
state.groupList = array;
};
//学员搜索
const searchStu = () => {
let obj = {
deptIds: [], //部门
groupName: state.valuestugroup,
name: state.valuestun,
pageNo: state.currentPageStu,
pageSize: 10,
projectId: state.projectId,
topFlag:
state.valuegood == "优秀学员"
? 1
: state.valuegood == "普通学员"
? 0
: state.valuegood == "全部"
? ""
: "",
};
//重新获取列表
getStu(obj);
};
//勾选学员
const onSelectChange = (selectedRowKeys, selectedRows) => {
console.log("selectedRowKeys changed: ", selectedRowKeys);
state.selectedRowKeys = selectedRowKeys;
state.choosed = state.selectedRowKeys.length;
console.log("ssss", selectedRows);
state.selectedRows = [];
console.log("before", state.selectedRows);
// let arr = [];
//遍历 插入到state.selectedRows里
selectedRows.map((item) => {
console.log(item.studentId);
state.selectedRows.push(item.studentId);
// arr.push(item.studentId);
// console.log("asdfasdf", arr);
});
// state.selectedRows = arr;
console.log("after", state.selectedRows);
// console.log(state.selectedRows[0]);
// console.log("dddd",selectedRows.)
//判断是否为数组
// console.log("wwwwww", Object.prototype.toString.call(state.selectedRows));
};
//清空所选的学员
const clearChooseStu = () => {
state.selectedRowKeys = [];
state.choosed = 0;
};
//学员重置
const resetCancel = () => {
(state.valuestun = null),
(state.valuestugroup = null),
(state.valuestub = null),
(state.valuegood = null);
getStu();
};
//获取学员列表
const getStu = (obj) => {
let objf = obj || {
deptIds: [], //部门
groupName: "",
name: "",
pageNo: state.currentPageStu,
pageSize: 10,
projectId: state.projectId,
topFlag: "",
};
getProjStu(objf).then((res) => {
console.log(res.data.data, "获取学员列表");
let leng = res.data.data.rows.length;
state.total = res.data.data.total;
if (leng > 0) {
let arr = res.data.data.rows;
getTableDataList(arr);
studentData();
}
});
};
//获取项目信息
const getTaskInfo = () => {
getTask({
projectId: state.projectId,
}).then((res) => {
console.log("get task", res.data.data);
let info = res.data.data.projectInfo;
let start = toDate(info.beginTime / 1000, "Y-M-D");
let end = toDate(info.endTime / 1000, "Y-M-D");
state.name = info.name;
state.startTime = start;
state.endTime = end;
state.manager = info.manager;
state.remark = info.remark;
state.level =
info.level == 1
? "集团级"
: info.level == 2
? "组织级"
: info.level == 3
? "现地级"
: info.level == 4
? "部门级"
: "-";
state.systemId =
info.systemId == 1
? "集团级"
: info.systemId == 2
? "组织级"
: info.systemId == 3
? "现地级"
: info.systemId == 4
? "部门级"
: "-";
state.checkedSty = info.courseSyncFlag == 1 ? true : false;
state.checkedBOEU = info.boeFlag == 1 ? true : false;
state.picUrl = info.picUrl;
state.sourceBelong =
info.sourceBelongId == 1
? "项目一"
: info.sourceBelongId == 2
? "项目二"
: info.sourceBelongId == 3
? "项目三"
: "-";
});
};
//获取小组列表
const getGroup = (obj) => {
let objf = obj || {
name: "",
pageNo: state.currentPageStu,
pageSize: 10,
projectId: state.projectId,
};
getGroupList(objf)
.then((res) => {
console.log(res.data.data.rows, "获取小组列表成功");
let leng = res.data.data.rows.length;
if (leng > 0) {
let arr = res.data.data.rows;
setGroupList(arr);
}
})
.catch((err) => {
console.log(err, "获取列表失败");
});
};
//删除小组
const deleteGroupBtn = (projectGroupId) => {
deleteGroup({
projectGroupId: projectGroupId,
}).then((res) => {
console.log("删除小组成功", res);
message.success("删除小组成功");
getGroup();
});
};
//创建小组
const createGroup = () => {
let obj = {
groupName: state.valueaddg,
leaderId: 0,
leaderName: state.valueaddm,
projectGroupId: 0,
projectId: state.projectId,
};
editGroup(obj)
.then((res) => {
console.log("小组创建成功", res);
message.success("小组创建成功");
getGroup();
})
.catch((err) => {
console.log("小组创建失败", err);
message.warning("小组创建失败");
});
};
//搜索小组重置
const resetGroupName = () => {
state.valuestugn = null;
getGroup();
};
//小组搜索
const searchGroup = () => {
let obj = {
name: state.valuestugn,
pageNo: 1,
pageSize: 10,
projectId: state.projectId,
};
getGroup(obj);
};
//分页
const changePaginationStu = (page) => {
state.currentPageStu = page;
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,
closeModal,
showModal1,
closeModal1,
showModal2,
closeModal2,
showModal3,
closeModal3,
showDeleteOne,
closeDeleteOne,
showCopyModal,
closeCopyModal,
showTime,
showFace,
showSubset,
showMemberList,
showFS,
showAA,
showWork,
showTest,
showStuAdd,
showImportStu,
showSeeStu,
showChangeGroup,
showFaceIn,
edit_hShow,
edit_exit,
cloradio1,
cloradio2,
studentColumns,
delete_exit,
showzhibModal,
showhuodModal,
closehuodModal,
closezhibModal,
tabsChange,
getTaskList,
rankTimeChange,
getbillboard,
rankSearch,
rankReset,
handleChangeGood,
getStu,
getTableDataList,
searchStu,
handleChangeBum,
resetCancel,
showAllDelete,
closeAllDelete,
onSelectChange,
closeCancelDelete,
clearChooseStu,
closeDeleteOneConfirm,
showEditProj,
getTaskInfo,
getGroup,
getGroupList,
setGroupList,
deleteGroupBtn,
createGroup,
createG,
resetGroupName,
searchGroup,
studentData,
cancelyou,
cancelcanyou,
changePaginationStu,
handleChange,
};
},
};
</script>
<style lang="scss">
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
clear: both;
}
.pubproject {
.ant-modal {
.ant-modal-body {
.modalHeader {
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
padding: 0;
.modalHeader {
background: linear-gradient(
0deg,
rgba(78, 166, 255, 0) 0%,
rgba(78, 166, 255, 0.2) 100%
);
}
.modalMain {
.projectname {
color: rgba(79, 81, 86, 1);
font-size: 14px;
line-height: 36px;
margin-left: 62px;
font-weight: 500;
}
.projecttime {
margin-left: 221px;
.timeti {
color: rgba(153, 155, 163, 1);
font-size: 14px;
line-height: 36px;
}
.timeme {
color: rgba(79, 81, 86, 1);
font-size: 14px;
line-height: 36px;
}
}
.projectbox {
margin-top: 26px;
display: flex;
justify-content: center;
.promessage {
width: 280px;
height: 110px;
background: linear-gradient(
180deg,
rgba(254, 243, 221, 1),
rgba(255, 250, 240, 1)
);
border-radius: 10px;
margin-right: 7px;
.messageme {
color: rgba(255, 182, 78, 1);
font-size: 14px;
line-height: 36px;
margin-top: 17px;
margin-left: 30px;
}
.messagege {
color: rgba(153, 155, 163, 1);
font-size: 14px;
margin-left: 30px;
}
}
.stumessage {
width: 280px;
height: 110px;
background: linear-gradient(
180deg,
rgba(221, 234, 255, 1),
rgba(240, 248, 254, 1)
);
border-radius: 10px;
.messageme1 {
color: rgba(78, 166, 255, 1);
font-size: 14px;
line-height: 36px;
margin-top: 17px;
margin-left: 30px;
}
.messagege1 {
color: rgba(153, 155, 163, 1);
font-size: 14px;
margin-left: 30px;
}
}
}
.send {
margin-top: 30px;
margin-left: 61px;
.sendtext {
margin-left: 11px;
color: rgba(109, 117, 132, 1);
font-size: 14px;
}
}
.ckb {
margin-top: 20px;
margin-left: 62px;
.sendpeo {
color: rgba(109, 117, 132, 1);
font-size: 14px;
}
.ant-checkbox-inner {
border-radius: 4px;
}
}
.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;
}
}
}
}
}
}
.canclestu {
.ant-modal {
width: 424px !important;
height: 258px !important;
.ant-modal-content {
width: 424px !important;
height: 258px !important;
.ant-modal-close {
margin-right: 18px;
margin-top: 5px;
}
.ant-modal-body {
width: 424px !important;
height: 258px !important;
padding: 0 !important;
.delete {
z-index: 999;
width: 424px;
height: 258px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
border-radius: 4px;
// position: absolute;
// left: 50%;
// top: 10%;
// transform: translate(-50%, -50%);
.del_header {
position: absolute;
width: calc(100%);
height: 68px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.del_main {
width: 100%;
position: relative;
.header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.icon1 {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/QR.png);
background-size: 100% 100%;
}
.close_exit {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
}
.body {
width: 100%;
margin: 34px auto 56px auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
// background-color: red;
position: relative;
.back {
position: absolute;
top: 30px;
font-size: 12px;
font-weight: 400;
color: #666666;
}
}
.del_btnbox {
display: flex;
margin: 30px auto;
justify-content: center;
.del_btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
}
.btn1 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4ea6ff;
margin-right: 14px;
}
.btn2 {
background-color: #409eff;
color: #ffffff;
}
}
}
}
}
}
}
}
.canclestu1 {
.ant-modal {
width: 424px !important;
height: 258px !important;
.ant-modal-content {
width: 424px !important;
height: 258px !important;
.ant-modal-close {
margin-right: 18px;
margin-top: 5px;
}
.ant-modal-body {
width: 424px !important;
height: 258px !important;
padding: 0 !important;
.delete {
z-index: 999;
width: 424px;
height: 258px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
border-radius: 4px;
// position: absolute;
// left: 50%;
// top: 10%;
// transform: translate(-50%, -50%);
.del_header {
position: absolute;
width: calc(100%);
height: 68px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.del_main {
width: 100%;
position: relative;
.header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.icon1 {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/notice.png);
background-size: 100% 100%;
}
.close_exit {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
}
.body {
width: 100%;
margin: 34px auto 56px auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
// background-color: red;
position: relative;
.back {
position: absolute;
top: 30px;
font-size: 12px;
font-weight: 400;
color: #666666;
}
}
.del_btnbox {
display: flex;
margin: 30px auto;
justify-content: center;
.del_btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
}
.btn1 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4ea6ff;
margin-right: 14px;
}
.btn2 {
background-color: #409eff;
color: #ffffff;
}
}
}
}
}
}
}
}
.doublepro {
.ant-modal {
.ant-modal-body {
.modalHeader {
background: linear-gradient(
0deg,
rgba(78, 166, 255, 0) 0%,
rgba(78, 166, 255, 0.2) 100%
);
}
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;
}
}
}
}
}
}
.facemanageModal {
.ant-modal {
width: 532px !important;
height: 428px !important;
.ant-modal-content {
width: 532px !important;
height: 428px !important;
.ant-modal-body {
width: 532px !important;
height: 428px !important;
padding: 0 !important;
.delete {
z-index: 999;
width: 532px;
height: 428px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
border-radius: 4px;
// position: absolute;
// left: 50%;
// top: 10%;
// transform: translate(-50%, -50%);
.del_header {
position: absolute;
width: calc(100%);
height: 68px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.del_main {
width: 100%;
position: relative;
.header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/QR.png);
background-size: 100% 100%;
}
.close_exit {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
}
.body {
width: 100%;
margin: 34px auto 56px auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
// background-color: red;
position: relative;
.back {
position: absolute;
top: 30px;
font-size: 12px;
font-weight: 400;
color: #666666;
}
}
.footerr {
display: flex;
justify-content: center;
align-items: center;
.onload {
color: rgba(51, 51, 51, 1);
font-size: 14px;
}
.onloadpx {
width: 80px;
height: 32px;
border: 1px solid rgba(56, 125, 247, 1);
border-radius: 4px;
color: rgba(56, 125, 247, 1);
margin-left: 20px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
}
}
}
}
}
}
}
.taskpage {
width: 100%;
display: flex;
flex-direction: column;
//position: relative;
.addhead {
width: 100%;
height: 130px;
// background-color: lightgreen;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
.leftimg {
width: 151px;
height: 100px;
border: 10px solid #e7f2ff;
border-radius: 8px;
margin-left: 20px;
.img {
width: 100%;
height: 100%;
}
}
.imgfor {
margin-left: 32px;
display: flex;
flex: 1;
flex-direction: column;
.forz {
color: #363636;
font-weight: 600;
font-size: 16px;
}
.fort {
display: flex;
flex-wrap: wrap;
color: #878b92;
font-size: 14px;
margin-top: 2px;
}
}
@media screen and (max-width: 1030px) {
.imgfor {
margin-left: 20px;
}
}
.right {
// width: 500px;
height: 100%;
// background-color: red;
//position: absolute;
//right: 0;
display: flex;
align-items: center;
.img1 {
width: 24px;
height: 24px;
margin-right: 50px;
}
.line {
height: 65%;
width: 1px;
background-color: #e8effa;
margin-right: 28px;
}
.img2 {
width: 42px;
height: 42px;
margin-right: 22px;
}
.pub {
color: #ffb64e;
font-size: 14px;
margin-top: 5px;
margin-right: 30px;
cursor: pointer;
}
.return {
color: #4ea6ff;
font-size: 14px;
margin-top: 10px;
margin-right: 60px;
}
.more {
position: relative;
margin-right: 30px;
height: 30px;
display: flex;
align-items: center;
.moreArrow {
width: 13px;
height: 7px;
display: inline-block;
background-image: url("../../assets/images/navtop/down.png");
background-size: 100%;
margin: 2px;
margin-left: 15px;
}
.moreItems {
width: 110px;
height: 80px;
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: -48px;
top: 30px;
z-index: 100;
cursor: pointer;
.sammo {
text-align: center;
margin-top: 12px;
cursor: pointer;
}
.sammo:hover {
color: #4ea6ff;
}
}
.moreItems:hover {
display: block;
}
}
@media screen and (max-width: 1240px) {
.line {
margin-right: 10px;
}
.img1 {
margin-right: 15px;
}
.img2 {
margin-right: 10px;
}
.return {
margin-right: 10px;
}
.pub {
margin-right: 10px;
}
.more {
margin-right: 10px;
}
}
.more:hover .moreArrow {
background-image: url("../../assets/images/navtop/up.png");
}
.more:hover .moreItems {
display: block;
}
}
}
.tableBox {
margin: 20px 38px 30px;
.ant-table-thead > tr > th {
font-size: 14px;
font-weight: 400;
color: #999ba3;
line-height: 36px;
padding: 5px 16px;
background-color: #eff4fc;
}
}
.split {
width: 100%;
height: 20px;
background-color: #edf0f5;
}
.content {
//margin: 0 37px;
.ant-tabs-top > .ant-tabs-nav::before,
.ant-tabs-bottom > .ant-tabs-nav::before,
.ant-tabs-top > div > .ant-tabs-nav::before,
.ant-tabs-bottom > div > .ant-tabs-nav::before {
border-bottom: 0px;
}
.ant-tabs-nav-wrap {
margin-left: 30px;
margin-top: 10px;
}
.onerow {
//width: 100%;
display: flex;
height: 40px;
position: relative;
margin-top: 15px;
margin-left: 38px;
//margin-right: 38px;
.taskmain {
font-size: 18px;
padding-top: 7px;
color: #000000;
}
.btn {
position: absolute;
top: 0;
right: 168px;
background-color: #409eff;
width: 130px;
height: 40px;
border-radius: 8px;
border: 1px solid #409eff;
color: #ffffff;
cursor: pointer;
}
.edit {
position: absolute;
right: 38px;
top: 0;
color: #409eff;
background: #ffffff;
width: 100px;
height: 40px;
border: 1px solid #409eff;
border-radius: 8px;
.editimg {
width: 15px;
height: 15px;
margin-top: -2px;
margin-right: 5px;
}
.editext {
line-height: 40px;
}
}
.edit:hover {
color: #ffffff;
background-color: #409eff;
cursor: pointer;
.editimg {
background-image: url("../../assets/images/projectadd/edit1.png");
}
}
}
.second {
display: flex;
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-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;
}
}
}
.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;
}
}
}
}
.taskSyllabus {
// flex: 1;
overflow-x: auto;
.ant-collapse {
border: 0px;
background-color: rgba(255, 255, 255, 0);
min-width: 1040px;
}
.ant-collapse-content > .ant-collapse-content-box {
padding-top: 0px;
padding-bottom: 0px;
}
.ant-collapse > .ant-collapse-item {
border: 0px;
}
.ant-collapse-header {
display: flex;
height: 49px;
background-color: #eff4fc;
align-items: center;
margin-top: 20px;
margin-left: 38px;
margin-right: 40px;
font-size: 16px;
font-weight: 400;
color: #409eff;
line-height: 36px;
.ant-collapse-arrow {
margin-left: 15px !important;
}
}
.ant-collapse-content {
border-top: 0px;
}
}
.taskbox {
width: 412px;
height: 160px;
border-radius: 10px;
position: relative;
margin-left: 68px;
margin-bottom: 40px;
margin-top: 32px;
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;
}
}
.stage {
display: flex;
height: 49px;
background-color: #eff4fc;
align-items: center;
margin-top: 20px;
margin-left: 38px;
margin-right: 38px;
.stageimg {
margin-left: 31px;
}
.stagename {
color: #409eff;
font-size: 16px;
padding-left: 9px;
line-height: 36px;
}
}
.course {
//width: 100%;
flex-shrink: 0;
margin-right: 24px;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 25px 0px;
margin-left: 22px;
//margin: 0 12px;
border: 1px solid #f2f6fc;
border-top: 0px;
.first {
//position: relative;
display: flex;
flex-grow: 1;
align-items: center;
//height: 71px;
margin-left: 12px;
margin-right: 50px;
.iconame {
//position: absolute;
color: #4f5156;
font-size: 16px;
margin-left: 4px;
}
.icontext {
//positipn: absolute;
color: #999ba3;
font-size: 14px;
margin-left: 12px;
width: 83px;
}
}
.type {
//height: 71px;
display: flex;
flex-grow: 1;
align-items: center;
margin-right: 50px;
.typename {
width: 63px;
height: 23px;
color: #5dc988;
font-size: 14px;
background-color: #f2f6fc;
border-radius: 4px;
text-align: center;
}
.typename1 {
width: 63px;
height: 23px;
color: #f0f4fe;
font-size: 14px;
background-color: #5dc988;
border-radius: 4px;
text-align: center;
}
}
.time {
//height: 71px;
flex-grow: 1;
margin-right: 50px;
.timetext {
font-size: 14px;
color: #999ba3;
}
}
.progress {
width: 168px;
margin-left: 10px;
margin-right: 50px;
flex-grow: 1;
.progresstext {
color: #ffc067;
font-size: 14px;
}
}
.operations {
display: flex;
width: 200px;
//flex-grow: 1;
.operation {
color: #4ea6ff;
font-size: 14px;
padding: 10px;
margin-left: auto;
}
}
}
}
.content3 {
margin-top: 20px;
.ant-tabs-tab-btn {
font-size: 18px;
font-weight: 700;
}
.group {
display: flex;
justify-content: space-between;
.groupleft {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-left: 32px;
.groupname {
height: 22px;
width: 70px;
color: #000000;
font-size: 14px;
}
.ant-input {
border-radius: 8px;
width: 264px;
height: 40px;
}
.ant-select-selector {
border-radius: 8px;
width: 264px;
height: 40px;
padding-top: 5px;
}
}
.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;
}
}
}
}
.second2 {
display: flex;
margin: 30px 0 0 32px;
.btn1 {
width: 130px;
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: 130px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16px;
border: 1px solid #409eff;
border-radius: 8px;
cursor: pointer;
background: #ffffff;
.btn2text {
color: #409eff;
margin-left: 5px;
font-size: 14px;
}
}
}
.talk {
margin-top: 24px;
margin-left: 32px;
margin-right: 32px;
margin-bottom: 11px;
position: relative;
//width: 90%;
height: 40px;
background: #f5faff;
border: 1px solid #4ea6ff;
// opacity: 0.22;
display: flex;
align-items: center;
.im {
width: 14px;
height: 15px;
margin-left: 17px;
}
.xu {
height: 100%;
line-height: 40px;
margin-left: 13px;
.yi {
color: #4f5156;
font-size: 14px;
}
.zon {
color: #999ba3;
font-size: 14px;
margin-left: 34px;
}
.th {
color: #4ea6ff;
}
}
.clear {
cursor: pointer;
font-size: 14px;
color: #387df7;
line-height: 24px;
position: absolute;
right: 20px;
}
}
.tab {
.ant-table-thead > tr > th {
background-color: rgba(239, 244, 252, 1);
color: rgba(0, 0, 0, 0.85);
}
.ant-table-tbody > tr > td {
border-bottom: 1px solid #f0f6fc;
color: rgba(0, 0, 0, 0.65);
}
th.h {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: rgba(250, 250, 250, 1);
}
.nostu {
width: 100%;
.nostuimg {
margin: 75px auto;
width: 412px;
height: 212px;
background-image: url(@/assets/images/taskpage/nostu.png);
background-size: 100% 100%;
}
}
.pa {
// left: 0;
margin-top: 15px;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: right;
// position: absolute;
// bottom: 20px;
}
.operation {
display: flex;
justify-content: center;
align-items: center;
color: #4ea6ff;
.nselect {
justify-content: center;
align-items: center;
display: flex;
.jc {
margin-left: 20px;
cursor: pointer;
white-space: nowrap;
}
}
.tableSelect {
// margin-right: 10px;
margin-left: -5px;
display: flex;
align-items: center;
justify-content: right;
white-space: nowrap;
}
}
.studentName {
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.65);
line-height: 22px;
}
.studentExcellent {
width: 64px;
height: 24px;
border-radius: 2px;
border: 1px solid #ffb64e;
background-color: rgba(255, 182, 78, 0.1);
margin-left: 24px;
display: flex;
align-items: center;
.studentExcellentImg {
width: 16px;
height: 16px;
margin-left: 7px;
}
.studentExcellentT {
font-size: 12px;
font-weight: 400;
color: #ffb64e;
line-height: 17px;
margin-left: 3px;
}
}
.studentopea1 {
font-size: 14px;
font-weight: 400;
color: #387df7;
line-height: 22px;
padding-right: 8px;
border-right: 1px solid #e9e9e9;
cursor: pointer;
}
.studentopea2 {
font-size: 14px;
font-weight: 400;
color: #387df7;
line-height: 22px;
padding-right: 8px;
padding-left: 8px;
border-right: 1px solid #e9e9e9;
cursor: pointer;
}
.studentSelect {
margin-left: 8px;
display: inline-block;
.ant-select:not(.ant-select-customize-input)
.ant-select-selector
.ant-select-selection-search-input {
background-color: rgba(255, 255, 255, 0);
border: none;
}
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
background-color: rgba(255, 255, 255, 0);
border: none;
}
.ant-select-single:not(.ant-select-customize-input)
.ant-select-selector {
padding: 0;
}
.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input)
.ant-select-selector {
box-shadow: none;
}
.ant-select-arrow {
right: 0px;
color: rgba(56, 125, 247, 1);
font-size: 14px;
line-height: 36px;
// top: 17px;
top: 15px;
}
.ant-select-selection-item {
font-size: 14px;
font-weight: 400;
color: rgba(56, 125, 247, 1);
line-height: 33px;
}
.ant-select-single.ant-select-open .ant-select-selection-item {
color: rgba(56, 125, 247, 1);
}
}
}
.groupmain {
display: flex;
flex-wrap: wrap;
margin-left: 32px;
.groupbox {
width: 264px;
height: 181px;
display: flex;
justify-content: center;
border: 1px solid #e9e9e9;
box-shadow: 1px 1px 18px 1px rgba(0, 0, 0, 0.05);
margin-top: 16px;
margin-right: 20px;
.grouptitle {
display: flex;
justify-content: space-between;
margin-top: 5px;
border-bottom: 1px solid rgba(232, 232, 232, 1);
.goodgruop {
color: rgba(0, 0, 0, 0.85);
font-size: 16px;
line-height: 36px;
font-weight: 600;
}
.more {
position: relative;
//margin-right: 30px;
height: 30px;
display: flex;
align-items: center;
.moreItems {
width: 76px;
height: 80px;
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: -48px;
top: 30px;
z-index: 100;
cursor: pointer;
.sammo {
text-align: center;
margin-top: 12px;
cursor: pointer;
}
.sammo:hover {
color: #4ea6ff;
}
}
.moreItems:hover {
display: block;
}
}
@media screen and (max-width: 1240px) {
.line {
margin-right: 10px;
}
.img1 {
margin-right: 15px;
}
.img2 {
margin-right: 10px;
}
.return {
margin-right: 10px;
}
.pub {
margin-right: 10px;
}
.more {
margin-right: 10px;
}
}
.more:hover .moreArrow {
background-image: url("../../assets/images/navtop/up.png");
}
.more:hover .moreItems {
display: block;
}
}
.leader {
color: rgba(0, 0, 0, 1);
font-size: 14px;
margin-top: 16px;
//margin-left: 24px;
}
.grocenter {
display: flex;
margin-top: 14px;
.leader1 {
color: rgba(0, 0, 0, 1);
font-size: 14px;
width: 51px;
}
.ant-progress-outer {
width: 170px;
}
}
.grofooter {
display: flex;
justify-content: space-between;
cursor: pointer;
margin-top: 30px;
.ftext {
color: rgba(56, 139, 225, 1);
font-size: 14px;
}
.peoples {
display: flex;
position: relative;
.people1 {
position: absolute;
right: 22px;
}
.people2 {
position: absolute;
right: 31px;
}
.people3 {
position: absolute;
right: 40px;
}
.people4 {
position: absolute;
right: 49px;
}
}
}
}
}
.projectscore {
.pjc_body {
margin-left: 34px;
margin-right: 34px;
.pjcb_header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 24px auto;
.edit_btn {
width: 100px;
// padding: 0px 26px 0px 26px;
height: 38px;
background: rgb(64, 158, 255);
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
.edit {
width: 15px;
height: 15px;
background-image: url(@/assets/images/coursewareManage/export1.png);
background-size: 100% 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: rgb(255, 255, 255);
line-height: 36px;
margin-left: 5px;
}
}
}
.pjcb_content {
border: 1px solid #388be1;
padding: 32px;
.pjcb_content :last-child {
margin-bottom: 0px;
}
.content {
margin-bottom: 24px;
}
}
}
}
}
.content6 {
margin-top: 20px;
width: 100%;
height: 100%;
// background-color: #bfa;
.title {
font-size: 18px;
font-weight: 500;
color: #333333;
margin-left: 34px;
}
.line {
width: 100%;
height: 1px;
margin-top: 10px;
background: #e8e8e8;
}
.search {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin: 30px 34px 0 34px;
.left {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-right: 10px;
.text {
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
white-space: nowrap;
}
.name {
display: flex;
align-items: center;
margin-bottom: 10px;
margin-right: 56px;
}
.time {
display: flex;
align-items: center;
// margin-left: 56px;
margin-bottom: 10px;
}
}
.right {
display: flex;
.btn {
display: flex;
width: 100px;
height: 40px;
border-radius: 8px;
justify-content: center;
align-items: center;
margin-bottom: 10px;
.img1 {
width: 15px;
height: 17px;
background-image: url(../../assets/images/coursewareManage/search0.png);
background-size: 100%;
margin-right: 5px;
}
.img2 {
width: 16px;
height: 18px;
background-image: url(../../assets/images/coursewareManage/reset1.png);
background-size: 100%;
margin-right: 5px;
}
}
.btn1 {
background: #409eff;
color: #fff;
margin-right: 16px;
}
.btn2 {
border: 1px solid #388be1;
background: #ffffff;
color: #388be1;
}
}
}
.main {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
margin-left: 34px;
margin-bottom: 20px;
.rank {
width: 422px;
height: 506px;
margin-right: 80px;
background: #ffffff;
border-radius: 2px;
border: 1px solid rgba(125, 125, 125, 0.39);
margin-bottom: 20px;
.rankhead {
height: 75px;
width: 100%;
border-bottom: 1px solid #e9e9e9;
// background-color: #bfa;
display: flex;
justify-content: center;
align-items: center;
.ant-select-selector {
color: #388be1 !important;
}
.inhead {
width: 374px;
// background-color: lightblue;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
position: relative;
.icon {
position: absolute;
width: 14px;
height: 14px;
background-image: url(../../assets/images/leveladd/info.png);
background-size: 100%;
left: 120px;
}
.left {
font-size: 16px;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
}
.right {
.ant-select {
.ant-select-selector {
border-radius: 4px !important;
border: 1px solid #388be1;
}
}
}
}
}
.tab {
// margin-top: 20px;
// margin-left: 24px;
border-radius: 4px 4px 0px 0px;
border: 1px solid #e9e9e9;
margin: 20px 24px 0 24px;
th.h {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
}
}
}
}
//设置的基本信息
.content7 {
margin-top: 20px;
.set_tit {
margin-left: 34px;
font-size: 18px;
font-weight: 500;
color: #232425;
}
.line {
width: 100%;
height: 1px;
background-color: #e8e8e8;
margin-top: 10px;
}
.set_body {
margin-left: 34px;
margin-right: 34px;
position: relative;
.edit {
position: absolute;
width: 100px;
height: 40px;
background: #388be1;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
right: 0;
cursor: pointer;
.img {
width: 18px;
height: 18px;
background-image: url(../../assets/images/basicinfo/edit.png);
background-size: 100%;
margin-right: 7px;
}
.ed {
font-size: 14px;
font-weight: 400;
color: #ffffff;
}
}
.set_content {
margin: 32px auto;
display: flex;
// justify-content: end;
.setc_name {
width: 150px;
display: flex;
justify-content: end;
}
.setc_main {
flex: 1;
margin-left: 12px;
}
}
}
}
//设置的共享文档
.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 {
.ant-modal {
.ant-modal-content {
width: 424px !important;
.ant-modal-body {
.delete {
z-index: 9999;
width: 424px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
border-radius: 4px;
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%, -50%);
.del_header {
position: absolute;
width: calc(100%);
height: 40px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.del_main {
width: 100%;
position: relative;
.header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.del-icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/notice.png);
background-size: 100% 100%;
}
.icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/QR.png);
background-size: 100% 100%;
}
.close_exit {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
}
.body {
width: 100%;
margin: 34px auto 56px auto;
display: flex;
justify-content: center;
align-items: center;
}
.del_btnbox {
display: flex;
margin: 30px auto;
justify-content: center;
.del_btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
}
.btn1 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4ea6ff;
}
.btn2 {
background-color: #4ea6ff;
color: #ffffff;
}
}
}
}
}
}
}
}
</style>