Files
fe-manage/src/views/learningpath/LevelAdd.vue

4397 lines
121 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="addwrapper">
<div class="addhead">
<div class="leftimg">
<!-- <img class="img" :src="picUrl" /> -->
<img class="img" :src="picUrl" />
</div>
<div class="imgfor">
<div class="forz">{{ styTitle }}</div>
<div class="fort">创建时间{{ cretime }}</div>
</div>
<div class="right">
<!--
<img
class="img1"
src="../../assets/images/leveladd/ma.png"
@click="showCodeModel2()"
/>
<div v-if="action == 1 || action == 0" class="line"></div>-->
<div
class="pubIcon"
v-if="action == 1 || action == 0"
@click="pubIcon(action)"
>
<img class="img2" src="../../assets/images/leveladd/pub.png" />
<!-- 已发布的显示 -->
<div class="pub" style="width: 28px">
{{ act }}
</div>
</div>
<div class="line"></div>
<router-link to="/learningpath"
><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"></div>
<div class="bom clearfix">
<a-tabs
class="tab"
v-model:activeKey="activeKey"
size="large"
@change="changeTabs"
:tabBarStyle="{ marginLeft: '10px' }"
>
<a-tab-pane key="1" tab="概览">
<div class="split"></div>
<!-- 概览无数据 -->
<div :style="{ display: 'block' }">
<div class="onerow">
<div class="taskmain">快速创建项目详情</div>
</div>
<div class="second">
<div @click="totask">
<div
class="taskbox"
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>
<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>
<!-- 2022-12-2注释 后面放开 -->
<div
class="taskbox"
@click="showPub"
style="background: linear-gradient(180deg, #e5f6ec, #eef9f3)"
v-if="action === 0"
>
<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 :style="{ display: 'none' }">
<div class="onerow">
<div class="taskmain">关卡概览</div>
</div>
<div class="second" style="margin-top: 0">
<div class="nubbox">
<span class="nub1">{{
routerInfoOverview.totalStudentCnt
}}</span>
<div class="nub2">总人数</div>
</div>
<div class="nubbox">
<span class="nub1" style="color: #ff90ae">{{
routerInfoOverview.studyStudentCnt
}}</span>
<div class="nub2">学习人数</div>
</div>
<div class="nubbox">
<span class="nub1" style="color: #a497ff">{{
routerInfoOverview.completeStudentCnt
}}</span>
<div class="nub2">完成人数</div>
</div>
<div class="nubbox">
<div>
<span class="nub1" style="color: #5dc988">{{
routerInfoOverview.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">{{
routerInfoOverview.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">{{
routerInfoOverview.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
v-for="item in stageList"
:class="{
stage1: item.stageId == choosedStageId,
stage2: item.stageId != choosedStageId,
}"
:key="item.stageId"
@click="stageChange(item.name, item.stageId)"
>
关卡{{ item.stageId }}
</div>
<!-- <div class="stage1">阶段1</div>
<div class="stage2">阶段2</div> -->
</div>
<div class="stagesecond">
<div class="staname">关卡名称</div>
<div class="stamess">{{ stateName }}</div>
</div>
<div class="stagelast">
<div class="stagepro">
<a-progress
type="dashboard"
gapDegree="0"
:percent="chapterOverviewList.completeCourseRatio"
:width="140"
/>
<div class="protext">课程完成率</div>
</div>
<div class="stagepro">
<a-progress
type="dashboard"
gapDegree="0"
:percent="chapterOverviewList.completeExamRatio"
:width="140"
/>
<div class="protext">考试通过率</div>
</div>
<div class="stagepro" style="margin-right: 0">
<a-progress
type="dashboard"
gapDegree="0"
:percent="chapterOverviewList.completeRatio"
:width="140"
/>
<div class="protext">作业完成率</div>
</div>
<div class="proright">
<div class="pronub" style="margin-left: 280px">
{{ chapterOverviewList.totalTaskCnt }}
</div>
<div class="proright1">
<span class="textpro">关卡任务总数</span>
<a-progress
:percent="chapterOverviewList.totalTaskCnt"
style="width: 369px"
/>
</div>
<div class="pronub" style="margin-left: 206px">
{{ chapterOverviewList.totalReqCnt }}
</div>
<div class="proright1">
<span class="textpro">必修课</span>
<a-progress
:percent="chapterOverviewList.totalReqCnt"
style="width: 369px"
/>
</div>
<div class="pronub" style="margin-left: 142px">
{{ chapterOverviewList.totalOptCnt }}
</div>
<div class="proright1">
<span class="textpro">选修课</span>
<a-progress
:percent="chapterOverviewList.totalOptCnt"
style="width: 369px"
/>
</div>
</div>
</div>
</div>
<!-- 概览有数据 -->
</a-tab-pane>
<a-tab-pane key="2" tab="路径管理">
<div class="split"></div>
<!-- <div class="cont">
<div class="pad"></div>
<div class="sametab">
<div class="Lhead">
<a-input
v-model:value="gatename"
style="width: 270px; height: 40px; border-radius: 8px"
placeholder="关卡名称"
/>
<div class="btns">
<div class="btn btn1">
<div class="search"></div>
<div class="btnText">搜索</div>
</div>
<div class="btn btn2">
<div class="search"></div>
<div class="btnText">重置</div>
</div>
<router-link to="/leveladddetail">
<div class="btn btn3" @click="handleOut">
<div class="search"></div>
<div class="btnText">创建关卡</div>
</div>
</router-link>
</div>
</div>
<div class="Lbom">
<div>
<div class="create"></div>
</div>
</div>
</div>
<div class="pad"></div>
</div> -->
<!-- 路径管理 -->
<div style="flex: 1">
<div class="onerow">
<div class="taskmain">任务大纲</div>
<router-link to="/leveladddetail" class="editright">
<img
class="editimg"
src="../../assets/images/leveladd/edit.png"
/>
<span class="editextb">编辑</span>
</router-link>
</div>
<!-- 无数据显示快速创建 -->
<div v-show="!taskSyllabus.length">
<router-link :to="{ path: '/leveladddetail' }">
<div
class="taskbox"
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>
</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/pinggu.png')
: item.type == 12
? require('../../assets/images/leveladd/tou.png')
: item.type == 13
? require('../../assets/images/leveladd/xiangmu.png')
: require('../../assets/images/leveladd/tou.png')
"
/>
</div>
</div>
<div>
<div class="iconame">
{{ checkType(item.type) }}
</div>
<div class="icontext" :title="item.name">
{{ item.name }}
</div>
</div>
</div>
<div class="type">
<div :class="item.flag ? 'typename1' : 'typename'">
{{ item.flag ? "必修" : "选修" }}
</div>
</div>
<div class="time">
<div class="timetext">开始时间</div>
<div class="timetext">
{{ item.startTime !== null ? item.startTime : "-" }}
</div>
</div>
<div class="progress">
<div class="progresstext">
{{ item.finishStuNum }}/{{ item.totalStuNum }}
</div>
<div style="display: flex">
<a-progress
:showInfo="false"
:percent="
parseInt(
(item.finishStuNum / item.totalStuNum) * 100
)
"
strokeColor="#FFC067"
trailColor="rgba(253, 209, 98, 0.2)"
/>
<span class="progresstext" style="margin-left: 10px"
>{{
item.totalStuNum == 0 ? 0 :
item.finishStuNum == 0 ? 0 :
parseInt(
(item.finishStuNum / item.totalStuNum) * 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, item.name)"
:style="{
display:
item.type === 6 || item.type === 9
? 'flex'
: 'none',
}"
>
考勤
</div>
<div
class="operation"
style="cursor: pointer"
@click="showCodeModel(item)"
>
二维码
</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
? commonModel(item, value.name)
: item.type === 2
? faceTeachModel(item)
: item.type === 4
? homeworkModel(item)
: item.type === 5
? examinationModel(item, value.name)
: item.type === 10
? evaluationModel(item, value.name)
: null
"
>
管理
</div>
</div>
</div>
</a-collapse-panel>
</a-collapse>
</div>
<!-- 有数据-->
<div style="display: flex; height: 20px"></div>
</div>
</a-tab-pane>
<a-tab-pane key="3" tab="学员管理" force-render>
<TableStudent
:type="2"
:id="routerId"
:stage="stage"
:columns="tableDataFunc()"
></TableStudent>
</a-tab-pane>
<!--1211注释 待开放
<a-tab-pane key="4" tab="设置">
<div class="split"></div>
<a-tabs>
<a-tab-pane key="1" 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" @click="showbtn" v-show="twobtn">
编辑
</div>
<div v-show="twobtnn" class="twobtn">
<div class="btnone" @click="closebtn">取消</div>
<div class="btntwo" @click="editLearnInfo">确定</div>
</div>
</div>
<div class="onemain clearfix">
<div class="checkcon">
<a-checkbox
class="in"
:disabled="number"
v-model:checked="previewSelect"
></a-checkbox>
<span class="yulan">预览其他关卡</span><br />
<div style="width: 10px; height: 4px"></div>
<div style="display: flex; align-items: center">
<span class="yulan2">学员可预览第</span>
<span style="color: #4ea6ff" v-show="number">{{
previewStartNum
}}</span>
<a-input-number
v-model:value="previewStartNum"
v-show="inputbox"
:controls="false"
:autofocus="true"
:min="0"
:precision="0"
/>
<span>-</span
><span style="color: #4ea6ff" v-show="number">{{
previewEndNum
}}</span>
<a-input-number
v-model:value="previewEndNum"
v-show="inputbox"
:controls="false"
:autofocus="true"
:min="0"
:precision="0"
/>
<span>关内容</span>
</div>
</div>
<div class="checkcon" style="margin-top: 20px">
<a-checkbox
class="in"
:disabled="number"
v-model:checked="studySelect"
></a-checkbox>
<span class="yulan">学习其他关卡</span><br />
<div style="width: 10px; height: 4px"></div>
<div style="display: flex; align-items: center">
<span class="yulan2">学员可学习第</span>
<span style="color: #4ea6ff" v-show="number">{{
studyStartNum
}}</span>
<a-input-number
v-model:value="studyStartNum"
v-show="inputbox"
:controls="false"
:autofocus="true"
:min="0"
:precision="0"
/>
<span>-</span
><span style="color: #4ea6ff" v-show="number">{{
studyEndNum
}}</span>
<a-input-number
v-model:value="studyEndNum"
v-show="inputbox"
:controls="false"
:autofocus="true"
:min="0"
:precision="0"
/>
<span>关内容</span>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
</a-tab-pane>
<a-tab-pane key="2" 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"
@change="checkedClose"
></a-switch>
</div>
</div>
<div class="btnbox" style="margin: 20px">
<a-upload
v-if="docChecked == true"
v-model:file-list="fileList"
name="file"
action="/manageApi/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
v-if="docChecked == true"
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 fileList"
:key="item.uid"
style="
width: 500px;
display: flex;
justify-content: space-between;
align-items: center;
"
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;
width: 300px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
>{{ item.name }}</span
>
<span
style="color: #4ea6ff; cursor: pointer"
@click="deFile(item.uid)"
>删除</span
>
</div>
</div>
</div>
</div>
</div>
</a-tab-pane>
</a-tabs>
</a-tab-pane>
-->
</a-tabs>
<a-modal
style="padding: 0"
:closable="sh"
v-model:visible="visiblene"
:footer="null"
centered="true"
wrapClassName="changeModal"
>
<div class="con">
<div class="header">
<div class="inhe">
<div class="mod"></div>
<div class="tz">调整关卡</div>
<div class="mg" @click="closeChangeModal"></div>
</div>
</div>
<div class="mid">
<div class="inher">
<div class="cur">当前关卡关卡2</div>
<div class="select">
<a-select
v-model:value="curLevel"
style="width: 100%"
placeholder="请选择关卡"
:options="projectNameList4"
@change="selectProjectName4"
allowClear
showSearch
></a-select>
</div>
<div class="btn">
<button class="sameb btn1">取消</button>
<button class="sameb btn2">确定</button>
</div>
</div>
</div>
</div>
</a-modal>
<!-- 查看学员 传入查看学员的id-->
<see-stu
v-model:Seevisible="Seevisible"
v-model:checkStuId="checkStuId"
v-model:projectId="projectId"
/>
<!-- 批量删除学员弹窗 -->
<a-modal
v-model:visible="deleteAll"
:footer="null"
:closable="closeDeleteAll"
wrapClassName="CopyModal"
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="closeDeleteALLModal"></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>
<!-- 面授管理二维码 -->
<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>
<!-- 添加学员抽屉 -->
<!-- <path-add-stu v-model:Stuvisible="Stuvisible" /> -->
<!-- 添加学员抽屉 -->
<proj-check-ship
v-model:ProjCheckvisible="Stuvisible"
:selectProjectId="routerId"
v-model:addAuthList="addAuthList"
:authClassify="authClassify"
classify="learnPath"
:type="2"
/>
<!-- 导入学员抽屉 -->
<imp-stu v-model:AddImpStuvisible="AddImpStuvisible" />
<!-- 学员管理查看抽屉 -->
<check-stu
v-model:CheckStuvisible="CheckStuvisible"
v-model:studentId="studentId"
/>
<!-- 面授学员抽屉 -->
<face-stu v-model:FSvisible="FSvisible" />
<!-- 活动考勤抽屉 -->
<active-attendance
v-model:AAvisible="AAvisible"
:title="showKaoqinText"
/>
<!-- 时间管理抽屉 -->
<time-manage v-model:Tvisible="visible" :title="showTimeText" />
<!-- 考试管理抽屉 -->
<test-manage v-model:TMvisible="TMvisible" :title="showTestText" />
<!-- 面授管理抽屉 -->
<face-manage v-model:Fvisible="FaceVisivle" />
<!-- 作业管理抽屉 -->
<work-manage v-model:Wvisible="Wvisible" />
</div>
<!-- 加载动画 -->
<div class="aeLoading" :style="{ display: addLoading ? 'flex' : 'none' }">
<a-spin :spinning="addLoading" tip="" />
</div>
<!-- 发布弹窗 -->
<a-modal
v-model:visible="pub"
:title="null"
:footer="null"
:closable="false"
wrapClassName="pub"
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="closePub">
<img
style="width: 22px; height: 22px"
src="../../assets/images/basicinfo/close22.png"
/>
</div>
</div>
<div class="modalMain">
<div class="projectname">{{ styTitle }}</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">
当前路径共{{ routeChapters }}个关卡{{ routeTasks }}个任务
</div>
</div>
<div class="stumessage">
<div class="messageme1">学员信息</div>
<div class="messagege1">路径共{{ routeStudentsNum }}名学员</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="checkedTeacher"
><span class="sendpeo">发给老师</span></a-checkbox
>
<a-checkbox v-model:checked="checkStu"
><span class="sendpeo">发给学员</span></a-checkbox
>
</div> -->
<div class="pubtn">
<a-button class="pubtn1" @click="closePub">取消</a-button>
<a-button class="pubtn2" @click="releaseLearnPath">发布</a-button>
</div>
</div>
<!-- 加载动画 -->
<div class="aeLoading" :style="{ display: pubLoading ? 'flex' : 'none' }">
<a-spin :spinning="pubLoading" />
</div>
</a-modal>
<!-- 撤回路径弹窗 -->
<a-modal
v-model:visible="backModal"
:footer="null"
:closable="closeBack"
wrapClassName="CopyModal"
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="closeBackModal"></div>
</div>
<div class="body">
<span>是否撤回路径</span>
<div class="back">路径撤回后学员进度保留发布后可继续学习</div>
</div>
<div class="del_btnbox">
<div class="del_btn btn1" @click="closeBackModal">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2" @click="recallPath">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!-- 复制路径弹窗 -->
<a-modal
v-model:visible="dcopyModal"
:footer="null"
:closable="dcloseCopy"
wrapClassName="CopyModal"
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="closeCopy"></div>
</div>
<div class="body">
<span>您确定要复制此路径吗</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1" @click="closeCopy">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2" @click="sureCopy">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!-- 结束路径弹窗 -->
<a-modal
v-model:visible="stopModal"
:footer="null"
:closable="dicloseStop"
wrapClassName="CopyModal"
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="closeStopModal"></div>
</div>
<div class="body">
<!-- <span>您确定要停用此路径吗</span> -->
<span>是否结束项目</span>
<div class="back">
项目结束后学员将无法继续学习此操作不可逆
</div>
</div>
<div class="del_btnbox">
<div class="del_btn btn1" @click="closeStopModal">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2" @click="stopLearnPath">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!-- 二维码弹窗 -->
<two-dimensional-code
v-model:codevisible="codevisible"
:codeInfo="codeInfo"
index="0"
type="课程二维码"
/>
<!-- 二维码弹窗 -->
<!-- 面授管理抽屉 开始 -->
<router-face-teach-manage v-model:FaceTeachModelVisible="faceTeachModelVisible" :title="faceTeachModelVisibleTitle" :datasource="faceData" />
<!-- 面授管理抽屉 结束-->
<!-- 考试管理抽屉 开始-->
<router-examination-manage v-model:ExaminationModelVisible="examinationModelVisible" :title="examinationModelVisibleTitle" :datasource="examinationData" :levelName="examLevelName"/>
<!-- 考试管理抽屉 结束-->
<!-- 测评管理抽屉 开始-->
<router-evaluation-manage v-model:EvaluationModelVisible="evaluationModelVisible" :title="evaluationModelVisibleTitle" :datasource="evaluationData" :levelName="evaluationLevelName" />
<!-- 测评管理抽屉 结束-->
<!-- 作业管理抽屉 开始-->
<router-homework-manage v-model:HomeworkModelVisible="homeworkModelVisible" :title="homeworkModelVisibleTitle" :datasource="homeworkData" />
<!-- 作业管理抽屉 结束-->
<!-- 公共管理抽屉 开始-->
<router-common-manage v-model:CommonModelVisible="commonModelVisible" :title="commonModelVisibleTitle" :datasource="commonData" :levelName="commonLevelName" />
<!-- 公共管理抽屉 结束-->
</div>
</template>
<script>
import { ref, reactive, toRefs, onMounted, createVNode, watch } from "vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { message, Modal } from "ant-design-vue";
// import PathAddStu from "../../components/drawers/pathStuAdd";
import ProjCheckShip from "../../components/drawers/ProjCheckPower";
import ImpStu from "../../components/drawers/AddLevelImportStu";
import CheckStu from "../../components/drawers/CheckStu";
import FaceStu from "../../components/drawers/FaceStu";
import ActiveAttendance from "../../components/drawers/ActiveAttendance";
import TimeManage from "../../components/drawers/TimeManage";
import TestManage from "../../components/drawers/TestManage";
import FaceManage from "../../components/drawers/FaceManage";
import WorkManage from "../../components/drawers/WorkManage";
import SeeStu from "../../components/drawers/SeeStu";
import { useRouter } from "vue-router";
// import { useStore } from "vuex";
import { storage } from "../../api/storage";
import { getRouterOverview } from "@/api/indexLearningPath";
import { handleLearnPath } from "../../api/index1";
import { GetRouterDetail } from "@/api/indexTask";
import * as api from "../../api/index1";
import { editRoutered } from "../../api/indexLearningPath";
import { codeUrl } from "../../api/method";
import TwoDimensionalCode from "../../components/TwoDimensionalCode.vue";
import TableStudent from "@/components/student/TableStudent";
// import * as student from "@/api/student";
import { getStuPage } from "@/api/index1";
import RouterFaceTeachManage from "../../components/drawers/router/RouterFaceTeachManage";
import RouterExaminationManage from "../../components/drawers/router/RouterExaminationManage";
import RouterEvaluationManage from "../../components/drawers/router/RouterEvaluationManage";
import RouterHomeworkManage from "../../components/drawers/router/RouterHomeworkManage";
import RouterCommonManage from "../../components/drawers/router/RouterCommonManage";
export default {
name: "LevelAdd",
components: {
// PathAddStu,
ProjCheckShip,
ImpStu,
CheckStu,
FaceStu,
ActiveAttendance,
TimeManage,
TestManage,
FaceManage,
WorkManage,
SeeStu,
TwoDimensionalCode,
TableStudent,
RouterFaceTeachManage,
RouterExaminationManage,
RouterEvaluationManage,
RouterHomeworkManage,
RouterCommonManage
},
setup() {
const router = useRouter();
// const store = useStore();
const state = reactive({
stage: [],
routerId: storage.get("routerId")
? JSON.parse(storage.get("routerId"))
: null, //学习路径页面传的学习路径id
gatename: null, //关卡名称
gatenamee: null, //学员管理关卡名称
action: null,
act: null,
pub: false, //发布弹窗
pubLoading: false, //发布loading
backModal: false, //撤回弹窗
dcopyModal: false, //复制弹窗
closeBack: false,
routeStudentsNum: null,
routeChapters: null,
routeTasks: null,
dcloseCopy: false,
dicloseCopy: false,
stopModal: false, //结束弹窗
deleteAll: false, //批量删除学员弹窗
Stuvisible: false, //添加学员抽屉
AddImpStuvisible: false, //导入学员抽屉
CheckStuvisible: false, //学员管理的查看抽屉
addLoading: false, // 加载动画
choosedStageId: 1, // 选择的阶段id
selectedRowKeys: [],
twobtn: true,
number: true,
twobtnn: false,
Seevisible: false,
checkStuId: null,
inputbox: false,
Wvisible: false, //作业管理
studentId: null,
styTitle: null,
cretime: null,
picUrl: null,
remark: null,
projectNameList: [
// 2022-11-30注释 后面放开
// {
// value: "1",
// label: "导出信息",
// },
// {
// value: "2",
// label: "批量调整关卡",
// },
{
value: "3",
label: "批量删除",
},
],
// 共享文档列表
docList: [
// {
// name: "测试文档1.doc",
// src: "",
// },
// {
// name: "测试文档2.doc",
// src: "",
// },
// {
// name: "测试文档3.doc",
// src: "",
// },
],
huodModal: false,
zhibModal: false,
//任务大纲列表
taskSyllabus: [
// {
// name: "关卡1 初级产品经理",
// taskList: [
// {
// course: "在线",
// name: "时间管理",
// classify: "选修",
// beginTime: "2022-09-10 14:03",
// total: 50, //总人数
// complete: 20, //完成人数
// percent: 40,
// routerTaskId: 0,
// },
// ],
// },
],
activeKey: ref("1"),
value: ref(" "),
nubvalue: ref("1"),
nubvalue2: ref("1"),
nubvalue3: ref("4"),
nubvalue1: ref("4"),
fileList: [],
docChecked: true,
currentPage: 1,
tableDataTotal: -1,
stuTotal: 0,
pageSize: 10,
visiblene: false,
sh: false,
nodata: true,
closeDeleteAll: false,
curLevel: "",
taskSyllabusActive: 0,
//在线管理等页面传递参数
showTimeText: "",
//考试、测评页面传递参数
showTestText: "",
//直播、活动页面传递参数
showKaoqinText: "",
FSvisible: false, //面授学员
AAvisible: false, //活动/直播考勤
copyModal: false, //面授二维码弹窗
closeCopy: false, //面授二维码关闭图标
visible: false, //时间管理
TMvisible: false, //考试管理
FaceVisivle: false, //面授管理
stateName: null, // 关卡名称
//关卡的数据
level: [
// {
// id: 1,
// lev: "关卡2",
// name: "中级产品经理",
// count: 3,
// online: 5,
// homework: 1,
// juan: 1,
// ballot: 1,
// test: 1,
// },
// {
// id: 2,
// lev: "关卡2",
// name: "初级产品经理",
// count: 3,
// online: 5,
// homework: 1,
// juan: 1,
// ballot: 1,
// test: 1,
// },
],
tableData: [],
authClassify: 3,
addAuthList: [],
codevisible: false, //二维码是否显示
codeInfo: null, //二维码内容
levelTotal: 0, //设置基本信息需判断的关卡总数
previewSelect: 0,
studySelect: 0,
previewStartNum: 0,
previewEndNum: 0,
studyStartNum: 0,
studyEndNum: 0,
faceTeachModelVisible: false,
examinationModelVisible: false,
evaluationModelVisible: false,
homeworkModelVisible: false,
commonModelVisible: false,
faceTeachModelVisibleTitle: '',
examinationModelVisibleTitle: '',
evaluationModelVisibleTitle: '',
homeworkModelVisibleTitle: '',
commonModelVisibleTitle: '',
faceData: '',
examinationData: '',
evaluationData: '',
homeworkData: '',
commonData: '',
commonLevelName: '',
examLevelName: '',
evaluationLevelName: ''
});
const levelList = reactive({
routerInfoOverview: {
// 路径图整体数据概览
totalStudentCnt: 0,
studyStudentCnt: 0,
completeStudentCnt: 0,
onlineCourseCnt: 0,
offLineCourseCnt: 0,
completeRatio: 0,
},
chapterOverviewList: {
// 路径图阶段数据概览
completeCourseRatio: 0,
completeExamRatio: 0,
completeRatio: 0,
totalTaskCnt: 0,
totalReqCnt: 0,
totalOptCnt: 0,
},
stageList: [
// 阶段列表
{
stageId: 1,
name: "关卡一xx",
},
{
stageId: 2,
name: "关卡二xx",
},
],
});
const tableDataFunc = () => {
const columns = [
// {
// title: "姓名",
// dataIndex: "name",
// // width: "30%",
// key: "name",
// width: 110,
// align: "left",
// className: "classify",
// scopedSlots: { customRender: "action" }, //引入的插槽
// customRender: (text) => {
// // console.log(text.record.checked1);
// return (
// <div class="racona">
// <span> {text.record.name}</span>
// {/**
// <div class="img"></div>
// <a-checkbox class="ch" checked={text.record.checkedd}>
// {text.record.lei}
// </a-checkbox>
// */}
// </div>
// );
// },
// },
// {
// title: "部门",
// dataIndex: "com",
// // width: "30%",
// key: "com",
// width: 110,
// align: "center",
// className: "h",
// },
// // {
// // title: "岗位",
// // dataIndex: "gang",
// // key: "gang",
// // width: 110,
// // align: "center",
// // className: "h",
// // },
{
title: "当前关卡",
dataIndex: "currentStageName",
key: "currentStageName",
width: 110,
align: "center",
className: "h",
},
{
title: "进度",
dataIndex: "jin",
key: "jin",
width: 110,
align: "center",
className: "h",
customRender: ({ record }) => (
<div>
{record.finishTaskNum}/{record.totalTaskNum}
</div>
),
},
// {
// title: "开始时间",
// dataIndex: "time",
// key: "time",
// width: 120,
// align: "center",
// className: "h",
// },
// {
// title: "操作",
// className: "h",
// dataIndex: "opacation",
// key: "opacation",
// width: 140,
// align: "center",
// fixed: "right",
// scopedSlots: { customRender: "action" }, //引入的插槽
// customRender: (text) => {
// return (
// <div class="opa">
// <div class="opacation">
// {/**
// 2022-11-30注释 后面放开
// <span
// onClick={() => {
// showCheckStu(text.record.studentId);
// state.Seevisible = true;
// }}
// style="color:#4EA6FF;margin-right:25px;cursor:pointer"
// >
// 查看
// </span>
// */}
// {/**
// 2022-11-30注释 后面放开
// <span
// onClick={() => {
// state.visiblene = true;
// console.log(text.record.cur);
// }}
// style="color:#4EA6FF;margin-right:25px;cursor:pointer"
// >
// 调整
// </span>
// */}
// <span
// style="color:#4EA6FF;cursor:pointer"
// onClick={() => {
// delConfirm(text.record.studentId);
// }}
// >
// 删除
// </span>
// </div>
// </div>
// );
// },
// },
];
return columns;
};
const onSelectChange = (selectedRowKeys) => {
console.log("selectedRowKeys changed: ", selectedRowKeys);
state.selectedRowKeys = selectedRowKeys;
};
const showDeleteALLModal = () => {
state.deleteAll = true;
};
const closeDeleteALLModal = () => {
state.deleteAll = false;
};
const showModal = () => {
state.visible = true;
};
const closeChangeModal = () => {
state.visiblene = false;
};
const showAddStu = () => {
state.Stuvisible = true;
};
const showImpStu = () => {
state.AddImpStuvisible = true;
};
const showCheckStu = (id) => {
state.CheckStuvisible = true;
state.studentId = id;
};
const showbtn = () => {
state.twobtn = false;
state.twobtnn = true;
state.number = false;
state.inputbox = true;
};
const closebtn = () => {
state.twobtnn = false;
state.twobtn = true;
state.number = true;
state.inputbox = false;
myGetRouterDetail();
};
const showCopyModal = () => {
state.copyModal = true;
};
const closeCopyModal = () => {
state.copyModal = false;
};
//面授学员的弹窗
const showFS = () => {
state.FSvisible = true;
};
//考勤的抽屉
const showAA = (course) => {
state.AAvisible = true;
state.showKaoqinText = "【" + course + "】" + "考勤";
console.log(state.showKaoqinText, 1111);
};
// 时间管理
const showTime = (course) => {
console.log("点击管理", course);
state.visible = true;
state.showTimeText = "【" + course + "】" + "管理";
// console.log("state.showTimeText", state.showTimeText);
};
//考试管理的抽屉
const showTest = (course, name) => {
state.TMvisible = true;
state.showTestText = "【" + course + "】" + name;
};
//新增
const showFace = () => {
//面授管理的抽屉
// console.log("点击管理");
state.FaceVisivle = true;
};
//作业管理的抽屉
const showWork = () => {
state.Wvisible = true;
};
const showzhibModal = () => {
state.zhibModal = true;
};
const showhuodModal = () => {
state.huodModal = true;
};
const closezhibModal = () => {
state.zhibModal = false;
};
const closehuodModal = () => {
state.huodModal = false;
};
const stageChange = (name, id) => {
state.choosedStageId = id;
state.stateName = name;
};
const changeTabs = (e) => {
console.log("切换tabs", e, state.routerId);
if (e == 2) {
myGetRouterDetail();
}
//学员管理
if (e == 3) {
getStudent();
}
};
// 面授课点击管理弹框
const faceTeachModel = (data) => {
console.log(data)
state.faceTeachModelVisible = true;
state.faceTeachModelVisibleTitle = data.name;
state.faceData = data;
// 面授课弹框名称 RouterFaceTeachManage
}
// 考试点击管理弹框
const examinationModel = (data, levelname) => {
console.log(data)
state.examLevelName = levelname;
state.examinationModelVisible = true;
state.examinationModelVisibleTitle = data.name;
state.examinationData = data;
// 考试弹框名称 RouterExaminationManage
}
// 测评点击管理弹框
const evaluationModel = (data, levelname) => {
console.log(data)
state.evaluationLevelName = levelname;
state.evaluationModelVisible = true;
state.evaluationModelVisibleTitle = data.name;
state.evaluationData = data;
// 测评弹框名称 RouterEvaluationManage
}
// 作业点击管理弹框
const homeworkModel = (data) => {
console.log(data)
state.homeworkModelVisible = true;
state.homeworkModelVisibleTitle = data.name;
state.homeworkData = data;
// 作业弹框名称 RouterHomeworkManage
}
// 在线、案例、外链、评估、直播、活动点击管理弹框
const commonModel = (data, levelname) => {
state.commonLevelName = levelname;
console.log(data)
state.commonModelVisible = true;
state.commonModelVisibleTitle = data.name;
state.commonData = data;
// 公共模块弹框名称 RouterCommonManage
}
//学员管理------------------------------------------------
//获取学员列表
const getStudent = () => {
let obj = {
name: state.gatenamee,
pageNo: state.currentPage,
pageSize: 10,
routerId: state.routerId,
};
api
.getStudent(obj)
.then((res) => {
console.log("获取学员列表", res);
let data = res.data.data.rows || null;
state.tableDataTotal = res.data.data.total;
state.stuTotal = res.data.data.total;
state.tableData = [];
if (data.length) {
for (let i in data) {
let _time = new Date(data[i].beginStudyTime * 1000);
state.tableData.push({
key: data[i].studentId,
com: data[i].userInfoBo.deptName,
name: data[i].name,
gang: data[i].userInfoBo.jobName,
cur: data[i].currentChapterName || "0",
jin: data[i].completeChapterCnt + "/" + data[i].totalChapterCnt,
time: _time.toLocaleDateString(),
studentId: data[i].studentId,
});
// state.tableData[i].key = i+1;
// state.tableData[i].com = data[i].userInfoBo.deptName;
// state.tableData[i].name = data[i].userInfoBo.userName
// state.tableData[i].gang = data[i].userInfoBo.jobName
// state.tableData[i].cur = data[i].currentChapterName || '0'
// state.tableData[i].jin = data[i].completeChapterCnt+'/'+ data[i].totalChapterCnt
// state.tableData[i].time = _time.toLocaleDateString()
}
}
})
.catch((err) => {
console.log("获取学员列表失败", err);
});
};
const checkType = (type) => {
let typeRules = [
"",
"在线",
"面授",
"案例",
"作业",
"考试",
"直播",
"外链",
"讨论",
"活动",
"测评",
"评估",
"投票",
"项目",
];
return typeRules[type];
};
//学员管理------------------------------------------------
onMounted(() => {
state.addLoading = true;
getOverview();
myGetRouterDetail();
reget();
});
const closePub = () => {
state.pub = false;
};
//确定发布
const releaseLearnPath = () => {
// console.log("state.releasePathId", state.releasePathId);
let obj = {
routerId: state.routerId,
type: 1,
};
handleLearnPath(obj)
.then((res) => {
if (res.data.code === 200) {
console.log("发布成功", res);
message.destroy();
message.success("发布成功");
state.pub = false;
state.nodata = false;
// getLearnPath();
}
if (res.data.code === -1) {
message.warning(res.data.msg);
}
reget();
})
.catch((err) => {
console.log("发布失败", err);
});
};
//显示发布弹窗
const showPub = () => {
state.pub = true;
state.pubLoading = true;
// state.releasePathId = routerId;
api
.getLearnCount(state.routerId)
.then((res) => {
if (res.status === 200) {
// console.log("获取关卡、任务、学员统计数据", res.data);
// state.routeStudentsNum = res.data.students;
state.routeChapters = res.data.data.chapters;
state.routeTasks = res.data.data.tasks;
}
})
.catch((err) => {
console.log("err", err);
});
//获取学员列表
let stuobj = {
pageNo: 1,
pageSize: 10,
pid: state.routerId,
type: 2,
};
getStuPage(stuobj)
.then((res) => {
console.log("获取学员列表", res.data.data.total);
if (res.data.code === 200) {
state.routeStudentsNum = res.data.data.total;
state.pubLoading = false;
}
})
.catch((err) => {
console.log("获取学员列表失败", err);
});
};
const pubIcon = (action) => {
if (action == 1) {
showBackModal();
} else {
showPub();
}
};
//显示撤回弹窗
const showBackModal = () => {
state.backModal = true;
};
//关闭撤回弹窗
const closeBackModal = () => {
state.backModal = false;
};
//确定撤回
const recallPath = () => {
let obj = {
routerId: state.routerId,
type: 0,
};
api
.handleLearnPath(obj)
.then((res) => {
console.log("撤回成功", res);
message.destroy();
message.success("撤回成功");
state.backModal = false;
reget();
state.nodata = true;
})
.catch((err) => {
console.log("撤回失败", err);
});
};
//显示复制弹窗
const showCopy = () => {
state.dcopyModal = true;
};
//关闭复制弹窗
const closeCopy = () => {
state.dcopyModal = false;
};
//确认复制
const sureCopy = () => {
let obj = {
routerId: state.routerId,
type: 2,
};
api
.handleLearnPath(obj)
.then((res) => {
console.log("复制成功", res);
message.destroy();
message.success("复制成功");
state.dcopyModal = false;
reget();
})
.catch((err) => {
console.log("复制失败", err);
});
};
const showStop = () => {
state.stopModal = true;
};
//关闭结束窗口
const closeStopModal = () => {
state.stopModal = false;
};
//确认结束
const stopLearnPath = () => {
let obj = {
routerId: state.routerId,
type: -1,
};
api
.handleLearnPath(obj)
.then((res) => {
console.log("停用成功", res);
message.destroy();
message.success("停用成功");
state.stopModal = false;
reget();
// getLearnPath();
})
.catch((err) => {
console.log("停用失败", err);
});
};
const reget = () => {
GetRouterDetail(state.routerId, "N").then((res) => {
// console.log("获取路径图详情", res);
state.styTitle = res.data.data.routerInfo.name;
state.cretime = res.data.data.routerInfo.createTime;
state.picUrl = res.data.data.routerInfo.picUrl;
state.action = res.data.data.routerInfo.status;
state.remark = res.data.data.routerInfo.remark;
state.act =
state.action == 0
? "发布"
: state.action == 1
? "撤回"
: state.action == -1
? ""
: "-";
});
};
// 获取项目概览
const getOverview = () => {
getRouterOverview(state.routerId)
.then((res) => {
console.log(res);
Object.keys(res.data.data.routerInfoOverview).forEach((item) => {
levelList.routerInfoOverview[item] =
res.data.data.routerInfoOverview[item] || 0;
});
Object.keys(res.data.data.chapterOverviewList).forEach((item) => {
levelList.chapterOverviewList[item] =
res.data.data.chapterOverviewList[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);
});
};
// 设置上传图片开关
const checkedClose = (data, a) => {
console.log(data, a);
state.docChecked = data;
console.log({
routerId: state.routerId,
status: state.action,
attachSwitch: data ? 1 : -1,
});
// 更新开关状态
editRoutered({
attach: JSON.stringify(state.fileList),
name: state.styTitle,
picUrl: state.picUrl,
remark: state.remark,
routerId: state.routerId,
status: state.action,
attachSwitch: data ? 1 : -1,
})
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
};
// 获取路径列表
const myGetRouterDetail = () => {
console.log("执行-------myGetRouterDetail");
GetRouterDetail(state.routerId)
.then((res) => {
console.log("router-list", res);
state.fileList = JSON.parse(res.data.data.routerInfo.attach);
state.docChecked =
res.data.data.routerInfo.attachSwitch == 1 ? true : false;
if (res.data.data.routerInfo.status == 1) {
state.nodata = false;
}
let data = res.data.data.chapterList;
state.stage = res.data.data.chapterList.map((e) => ({
id: e.chapterId,
name: e.name,
}));
state.taskSyllabus = data;
// for(let i in data) {
// state.taskSyllabus[i].name = data[i].name
// if(data[i].taskList.length > 0) {
// for(let j in data[i].taskList) {
// Object.keys(data[i].taskList[j]).forEach(item => {
// state.taskSyllabus[i].taskList[j][item] = data[i].taskList[j][item] || 0
// })
// }
// }
levelList.stageList = [];
for (let i in data) {
if (i == 0) {
state.stateName = data[0].name;
}
levelList.stageList.push({
stageId: Number(i) + 1,
name: data[i].name,
});
}
//获取设置信息
if (res.data.code === 200) {
//previewSetting studySetting
if (res.data.data.chapterList) {
state.levelTotal = res.data.data.chapterList.length;
}
state.previewSelect = res.data.data.routerInfo.enablePreview;
state.studySelect = res.data.data.routerInfo.enableStudy;
if (res.data.data.routerInfo.previewSetting) {
let arr = res.data.data.routerInfo.previewSetting.split(",");
if (arr.length === 2) {
state.previewStartNum = arr[0];
state.previewEndNum = arr[1];
}
}
if (res.data.data.routerInfo.studySetting) {
let arr = res.data.data.routerInfo.studySetting.split(",");
if (arr.length === 2) {
state.studyStartNum = arr[0];
state.studyEndNum = arr[1];
}
}
}
})
.catch((err) => {
console.log(err);
message.error("获取路径列表失败" + err);
});
};
const handleChange = (info) => {
if (info.file.status !== "uploading") {
console.log(info.file, info.fileList);
let list = state.fileList;
let str = JSON.stringify(list);
console.log(str);
//要编辑路径图
editRoutered({
attach: str,
name: state.styTitle,
picUrl: state.picUrl,
remark: state.remark,
routerId: state.routerId,
status: state.action,
attachSwitch: state.docChecked ? 1 : -1,
})
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
}
if (info.file.status === "done") {
message.success(`${info.file.name} 文件上传成功`);
} else if (info.file.status === "error") {
message.error(`${info.file.name} 文件上传失败.`);
}
};
const delConfirm = (id) => {
Modal.confirm({
title: "是否确认删除",
icon: createVNode(ExclamationCircleOutlined),
content: "",
okText: "确认",
cancelText: "取消",
onOk() {
api
.delStudent({ routerId: state.routerId, studentIds: [id] })
.then((res) => {
message.success("删除成功");
getStudent();
console.log(res);
})
.catch((err) => {
message.error("删除失败" + err);
console.log(err);
});
},
});
};
const searchLevel = () => {
// const result = state.tableData.filter(
// (item) => item.cur == state.gatenamee
// );
// state.tableData = result;
state.currentPage = 1;
getStudent();
};
const resetLevel = () => {
state.gatenamee = "";
getStudent();
};
const handleStuChange = (value) => {
console.log(value);
if (value == 2) {
state.visiblene = true;
}
if (value == 3) {
deleteStu();
}
};
const deleteStu = () => {
if (state.selectedRowKeys.length == 0) {
message.warning("请选择成员");
return;
}
let obj = {
routerId: state.routerId,
studentIds: state.selectedRowKeys,
};
api
.delStudent(obj)
.then((res) => {
console.log(res);
getStudent();
message.success("批量删除成功");
})
.catch((err) => {
message.error("批量删除失败" + err);
console.log(err);
});
};
const pageChange = (value) => {
state.currentPage = value;
getStudent();
};
const setconfig = () => {
let obj = {
autoJoinFlag: 0,
deptBoList: [
{
deptId: 0,
deptName: "",
},
],
preLearnFlag: 0,
previewFlag: 0,
routerId: 0,
showFlag: 0,
};
api
.setConfig(obj)
.then((res) => {
message.success("编辑成功");
console.log(res);
})
.catch((err) => {
console.log(err);
message.error("编辑失败");
});
};
const deFile = (id) => {
console.log(id);
let index = state.fileList.findIndex((item) => {
item.uid == id;
});
state.fileList.splice(index, 1);
let str = JSON.stringify(state.fileList);
//要编辑路径图
editRoutered({
attach: str,
name: state.styTitle,
picUrl: state.picUrl,
remark: state.remark,
routerId: state.routerId,
status: state.action,
})
.then((res) => {
console.log(res);
message.destroy();
return message.success("删除成功");
})
.catch((err) => {
console.log(err);
message.warning("删除失败");
});
};
// 设置start------------------------------------------------------
//编辑基本信息
const editLearnInfo = () => {
let obj = {
routerId: state.routerId,
enablePreview: state.previewSelect ? 1 : 0,
enableStudy: state.studySelect ? 1 : 0,
previewSetting: state.previewStartNum + "," + state.previewEndNum,
studySetting: state.studyStartNum + "," + state.studyEndNum,
};
if (
state.previewStartNum > state.levelTotal ||
state.previewEndNum > state.levelTotal ||
state.studyStartNum > state.levelTotal ||
state.studyEndNum > state.levelTotal
)
return message.warning("关卡数超过范围");
console.log("编辑设置基本信息obj", obj);
api
.editLearnInfo(obj)
.then((res) => {
console.log("编辑设置基本信息成功", res);
if (res.data.code === 200) {
message.success("修改成功");
closebtn();
}
})
.catch((err) => {
console.log("编辑设置基本信息失败", err);
});
};
// 设置end-----------------------------------------------------
//添加学员
watch(
() => state.addAuthList,
(res) => {
console.log("res", res, state.addAuthList);
let obj = {
deptList: res[1],
groupList: res[2],
routerId: state.routerId,
studentList: res[0],
};
console.log("obj", obj);
api
.addStudent(obj)
.then((res) => {
console.log("添加学员成功", res);
message.success("添加学员成功");
getStudent();
})
.catch((err) => {
console.log("添加学员失败", err);
});
}
);
const totask = () => {
// console.log("state.taskSyllabus", state.taskSyllabus);
router.push({
path: "/leveladddetail",
});
// if (state.taskSyllabus.length===1) {
// if(state.taskSyllabus[0].taskList.length===0){
// // /leveladddetail
// }
// }
// state.activeKey = "2";
};
const tostudent = () => {
state.activeKey = "3";
getStudent();
// state.activeKey1 = "8";
};
//显示二维码弹窗
const showCodeModel = (item) => {
state.codevisible = true;
let obj = {
title: "[" + checkType(item.type) + "]二维码",
name: item.name,
url: codeUrl,
};
state.codeInfo = obj;
};
//显示二维码弹窗
const showCodeModel2 = () => {
state.codevisible = true;
let obj = {
title: "[学习路径]二维码",
name: state.styTitle,
url: codeUrl,
};
state.codeInfo = obj;
};
//清空所选的学员
const clearChooseStu = () => {
Modal.confirm({
title: "确定清空所有学员吗?",
onOk: async () => {
state.addAuthList = [];
// student.studentDelAll({id: state.routerId, type: 2})
// state.tabledata = []
// state.tableDataTotal = 0;
},
bodyStyle: "margin-top:70%",
});
};
return {
...toRefs(state),
...toRefs(levelList),
clearChooseStu,
showDeleteALLModal,
closeDeleteALLModal,
tableDataFunc,
onSelectChange,
showModal,
closeChangeModal,
showAddStu,
showImpStu,
showCheckStu,
showbtn, //设置-编辑
closebtn,
showFS,
showAA,
showCopyModal,
closeCopyModal,
showTime,
showTest,
showFace,
showWork,
showzhibModal,
showhuodModal,
closehuodModal,
closezhibModal,
changeTabs,
checkType,
handleChange,
handleStuChange,
delConfirm,
searchLevel,
resetLevel,
closePub,
releaseLearnPath,
showPub,
showBackModal,
closeBackModal,
recallPath,
showCopy,
closeCopy,
sureCopy,
closeStopModal,
stopLearnPath,
showStop,
reget,
stageChange,
pageChange,
setconfig,
deFile,
deleteStu,
totask,
tostudent,
checkedClose,
showCodeModel,
showCodeModel2,
editLearnInfo,
pubIcon,
faceTeachModel,
examinationModel,
evaluationModel,
homeworkModel,
commonModel
};
},
};
</script>
<style lang="scss">
.clear {
cursor: pointer;
font-size: 14px;
color: #387df7;
line-height: 24px;
position: absolute;
right: 60px;
}
.pub {
.ant-modal {
.ant-modal-body {
padding: 0;
.modalHeader {
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 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 #4ea6ff;
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 #4ea6ff;
border-radius: 4px;
color: #ffffff;
font-size: 14px;
align-items: center;
//line-height: 36px;
background: #4ea6ff;
}
}
}
}
}
}
.clearfix:before,
.clearfix:after {
content: " ";
display: block;
clear: both;
}
.CopyModal {
.ant-modal {
width: 424px !important;
height: 258px !important;
.ant-modal-close-x {
display: none;
}
.ant-modal-content {
width: 424px !important;
height: 258px !important;
.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: 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;
.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;
}
}
.docListStyle {
display: flex;
width: 500px !important;
align-items: center;
justify-content: space-between;
}
.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: #4ea6ff;
color: #ffffff;
}
}
}
}
}
}
}
}
.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;
}
}
}
}
}
}
}
}
.changeModal {
.ant-modal {
width: 549px !important;
height: 245px !important;
.ant-modal-close-x {
display: none;
}
.ant-modal-content {
width: 549px !important;
height: 245px !important;
.ant-modal-body {
padding: 0 !important;
width: 549px !important;
height: 245px !important;
.con {
// background-color: #bfa;
width: 100%;
height: 100%;
.header {
width: 100%;
display: flex;
height: 68px;
position: relative;
justify-content: center;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
.inhe {
width: 80%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.mod {
left: 30px;
top: 27px;
position: absolute;
width: 18px;
height: 17px;
background-image: url(../../assets/images/leveladd/mod.png);
}
.tz {
color: #000000;
font-weight: 400;
font-size: 16px;
}
.mg {
width: 20px;
height: 20px;
background-image: url(../../assets/images/basicinfo/close22.png);
background-size: 100% 100%;
cursor: pointer;
}
}
}
.mid {
width: 100%;
display: flex;
height: 100%;
justify-content: center;
.inher {
width: 80%;
height: 100%;
.cur {
color: #6f6f6f;
font-size: 14px;
}
.select {
margin-top: 10px;
}
.btn {
width: 100%;
display: flex;
justify-content: center;
margin-top: 30px;
.sameb {
width: 100px;
height: 40px;
font-size: 14px;
border-radius: 8px;
}
.btn1 {
color: #4ea6ff;
background: #ffffff;
border: 1px solid #4ea6ff;
}
.btn2 {
margin-left: 16px;
border: 0;
color: #ffffff;
background: #4ea6ff;
}
}
}
}
}
}
}
}
}
.addwrapper {
width: 100%;
height: 100%;
.addhead {
width: 100%;
height: 130px;
// background-color: lightgreen;
display: flex;
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;
.forz {
color: #363636;
font-size: 16px;
}
.fort {
color: #878b92;
font-size: 14px;
margin-top: 20px;
}
}
@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;
}
.pubIcon {
display: flex;
align-items: center;
.img2 {
width: 42px;
height: 42px;
margin-right: 22px;
}
.pub {
color: #ffb64e;
font-size: 14px;
margin-top: 5px;
margin-right: 30px;
cursor: pointer;
}
}
.img2 {
width: 42px;
height: 42px;
margin-right: 22px;
}
.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;
padding-bottom: 12px;
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;
}
}
}
.split {
width: 100%;
height: 20px;
background-color: #edf0f5;
}
.bom {
.tab {
margin-top: 10px;
// margin-left: 10px;
}
.ant-tabs > .ant-tabs-nav,
.ant-tabs > div > .ant-tabs-nav {
margin-left: 0px !important;
padding-left: 32px !important;
}
.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: #4ea6ff;
width: 130px;
height: 40px;
border-radius: 8px;
border: 1px solid #4ea6ff;
color: #ffffff;
cursor: pointer;
}
.editright {
position: absolute;
right: 38px;
top: 0;
width: 110px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
.editimg {
width: 15px;
height: 15px;
}
.editextb {
color: #fff;
margin-left: 10px;
}
}
// .edit:hover {
// color: #ffffff;
// background-color: #4ea6ff;
// 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;
}
}
}
}
.sametab {
// margin-left: 30px;
// margin-right: 30px;
margin-top: 30px;
width: 100%;
// background-color: green;
.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: #4ea6ff;
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;
}
}
}
}
}
.cont {
display: flex;
.pad {
height: 100%;
width: 40px;
// background-color: red;
}
}
.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: #4ea6ff;
width: 130px;
height: 40px;
border-radius: 8px;
border: 1px solid #4ea6ff;
color: #ffffff;
cursor: pointer;
}
.edit {
position: absolute;
right: 38px;
top: 0;
color: #4ea6ff;
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
.editimg {
width: 15px;
height: 15px;
margin-top: -2px;
margin-left: 25px;
margin-right: 5px;
}
.editext {
line-height: 40px;
}
}
.edit:hover {
color: #ffffff;
background-color: #4ea6ff;
cursor: pointer;
.editimg {
background-image: url("../../assets/images/projectadd/edit1.png");
}
}
}
.taskbox {
width: 412px;
height: 160px;
border-radius: 10px;
position: relative;
margin-left: 40px;
margin-bottom: 10px;
margin-top: 10px;
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;
}
}
.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: #4ea6ff;
line-height: 36px;
.ant-collapse-arrow {
margin-left: 15px !important;
}
}
.ant-collapse-content {
border-top: 0px;
}
}
.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;
width: 120px;
.iconame {
//position: absolute;
color: #4f5156;
font-size: 16px;
margin-left: 4px;
}
.icontext {
//positipn: absolute;
color: #999ba3;
font-size: 14px;
margin-left: 12px;
width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.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;
width: 100px;
.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;
}
}
}
.xwid {
// width: 100%;
// height: 100%;
// background-color: #bfa;
position: relative;
margin-top: 30px;
display: flex;
margin-bottom: 20px;
// overflow-x: auto;
.pad {
height: 100%;
width: 40px;
flex-shrink: 0;
}
.xin {
width: 100%;
.xhead {
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;
}
}
}
}
.xheadb {
display: flex;
margin-top: 30px;
.addx {
width: 130px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
color: #fff;
border: 0;
cursor: pointer;
margin-right: 20px;
}
.addd {
width: 130px;
height: 40px;
background: #fff;
border-radius: 8px;
border: 1px solid #4ea6ff;
color: #4ea6ff;
cursor: pointer;
margin-right: 20px;
}
.select {
.ant-select {
//
// border: 0 !important;
border-radius: 11px;
.ant-select-selector {
border: 1px solid #4ea6ff !important;
.ant-select-selection-placeholder {
padding-left: 15px;
color: #4ea6ff;
}
}
}
.ant-select-selection-item {
padding-left: 15px;
color: #4ea6ff;
}
}
}
.talk {
margin-top: 24px;
margin-bottom: 11px;
width: 100%;
height: 50px;
background: #f5faff;
border: 1px solid #4ea6ff;
// opacity: 0.22;
display: flex;
align-items: center;
.im {
width: 14px;
height: 15px;
margin-left: 27px;
margin-top: -3px;
}
.xu {
height: 100%;
line-height: 50px;
margin-left: 13px;
.yi {
color: #4f5156;
font-size: 14px;
}
.zon {
color: #999ba3;
font-size: 14px;
margin-left: 34px;
}
.th {
color: #4ea6ff;
}
}
}
.tableBox {
margin-bottom: 80px;
.classify {
margin-left: 11px !important;
padding-left: 9px !important;
}
.ant-checkbox-wrapper {
align-items: center;
margin-top: -2px;
}
.ant-table-selection-column {
padding: 0px !important;
padding-left: 38px !important;
}
.ant-table-thead > tr > th {
background-color: rgba(239, 244, 252, 1);
}
th.h {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
.pa {
left: 0;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
position: absolute;
bottom: 0px;
}
}
}
}
.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: #4ea6ff;
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: #4ea6ff;
cursor: pointer;
}
}
}
.btnbox {
.ant-upload-list {
display: none !important;
}
}
.onemain {
margin-top: 20px;
margin-left: 55px;
color: #6f6f6f;
font-size: 14px;
.checkcon {
position: relative;
.in {
position: absolute;
// margin-top: 10px;
left: 0;
top: 0px;
}
.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: #4ea6ff;
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;
}
}
}
}
}
}
}
}
}
</style>