mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-10 03:16:44 +08:00
2267 lines
65 KiB
Vue
2267 lines
65 KiB
Vue
<template>
|
||
<div class="path-manage">
|
||
<a-spin :spinning="spinning">
|
||
<div class="addhead">
|
||
<div class="imgfor">
|
||
<div class="fort" style="color: #333333; font-size: 16px">
|
||
{{
|
||
`${basicData?.stdPositionName || ""}${
|
||
basicData?.qualsLevelDesr || ""
|
||
}`
|
||
}}
|
||
</div>
|
||
<div class="fort">创建时间：{{ basicData?.createTime }}</div>
|
||
</div>
|
||
<div class="right">
|
||
<template v-if="basicData.isPublished && checkMenu('growthRevoke')">
|
||
<div class="pubIcon" @click="resize()">
|
||
<img class="img2" src="../../assets/images/leveladd/pub.png" />
|
||
<!-- 已发布的显示 -->
|
||
<div
|
||
class="pub"
|
||
style="width: 28px"
|
||
:style="{
|
||
color: '#ffb64e',
|
||
}"
|
||
>
|
||
撤回
|
||
</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
</template>
|
||
<template v-if="!basicData.isPublished && checkMenu('growthRelease')">
|
||
<div class="pubIcon" @click="releaseLearnPath()">
|
||
<img class="img2" src="../../assets/images/growthpath/push.png" />
|
||
|
||
<!-- 已发布的显示 -->
|
||
<div
|
||
class="pub"
|
||
style="width: 28px"
|
||
:style="{
|
||
color: '#31AF0D',
|
||
}"
|
||
>
|
||
发布
|
||
</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
</template>
|
||
|
||
<div style="display: flex" @click="goBack">
|
||
<img class="img2" src="../../assets/images/leveladd/back.png" />
|
||
<div class="return">返回</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="split"></div>
|
||
<div class="bom clearfix">
|
||
<a-tabs
|
||
class="tab"
|
||
v-model:activeKey="activeKey"
|
||
size="large"
|
||
@change="changeTabs"
|
||
:tabBarStyle="{ marginLeft: '26px' }"
|
||
>
|
||
<a-tab-pane key="1" tab="概览" style="position: relative">
|
||
<!-- 概览（无数据） -->
|
||
<div v-if="!basicData.publishedTaskNum" style="display: flex">
|
||
<div class="secondadd" v-if="checkMenu('growthTaskAdd')">
|
||
<div style="width: 368px; height: 22px" class="addtaskmain">
|
||
快速创建专业力必修任务详情
|
||
</div>
|
||
<div class="addtask_main">
|
||
<img
|
||
class="btn"
|
||
@click="totasks"
|
||
src="../../assets/images/growthpath/add.png"
|
||
alt=""
|
||
/>
|
||
<img
|
||
@click="activeKey = '3'"
|
||
class="btn"
|
||
src="../../assets/images/growthpath/addStudent.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div v-else style="width: 100%; margin-top: 30px">
|
||
<a-empty />
|
||
</div>
|
||
</div>
|
||
<!-- 概览（有数据） -->
|
||
<div v-else>
|
||
<div class="onerow" style="margin-top: 26px">
|
||
<div class="taskmain">任务概览</div>
|
||
</div>
|
||
<div class="second">
|
||
<div class="nubbox">
|
||
<div class="nub1">{{ overviewData?.studentNum || 0 }}</div>
|
||
<div class="nub2">总人数</div>
|
||
</div>
|
||
<div class="nubbox">
|
||
<div class="nub1" style="color: #ff90ae">
|
||
{{ overviewData?.learnNum || 0 }}
|
||
</div>
|
||
<div class="nub2">未完成人数</div>
|
||
</div>
|
||
<div class="nubbox">
|
||
<div class="nub1" style="color: #409eff">
|
||
{{ overviewData?.completedNum || 0 }}
|
||
</div>
|
||
<div class="nub2">完成人数</div>
|
||
</div>
|
||
<div class="nubbox">
|
||
<div class="nub1" style="color: #564aff">
|
||
{{ ((overviewData?.completedRate || 0) * 100).toFixed(2) }}%
|
||
</div>
|
||
<div class="nub2">总完成率</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="onerow">
|
||
<div class="taskmain">任务信息</div>
|
||
</div>
|
||
<div class="stagelast">
|
||
<!-- 圆形统计 -->
|
||
<div class="stagepro" v-for="item of overviewData2">
|
||
<template v-if="TASK_TYPE[item.taskType]">
|
||
<a-progress
|
||
type="dashboard"
|
||
gapDegree="0"
|
||
:percent="fixDoublePer(item.completedRate || 0)"
|
||
:width="140"
|
||
/>
|
||
<div class="protext">
|
||
{{ TASK_TYPE[item.taskType].name }}课程完成率
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<div class="onerow">
|
||
<div class="taskmain">完成率统计</div>
|
||
</div>
|
||
<!-- 条形统计 -->
|
||
<div class="proright">
|
||
<div class="proright1">
|
||
<div class="textpro">
|
||
任务总完成率
|
||
<!-- <span style="margin-left: 16px; color: #409eff">{{
|
||
overviewData3?.totalTaskCompletionNum
|
||
}}</span> -->
|
||
</div>
|
||
<div style="margin-top: 12px; display: flex">
|
||
<a-progress
|
||
:showInfo="true"
|
||
:percent="
|
||
fixDoublePer(
|
||
overviewData3?.totalTaskCompletionRate || 0
|
||
)
|
||
"
|
||
style="width: 369px"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="proright1">
|
||
<div class="textpro">
|
||
必修任务完成率
|
||
<!-- <span style="margin-left: 16px; color: #409eff">{{
|
||
overviewData3?.compulsoryTaskCompletionNum
|
||
}}</span> -->
|
||
</div>
|
||
<div style="margin-top: 12px; display: flex">
|
||
<a-progress
|
||
:showInfo="true"
|
||
:percent="
|
||
fixDoublePer(
|
||
overviewData3?.compulsoryTaskCompletionRate || 0
|
||
)
|
||
"
|
||
style="width: 369px"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="proright1">
|
||
<div class="textpro">
|
||
选修任务完成率
|
||
<!-- <span style="margin-left: 16px; color: #409eff">{{
|
||
overviewData3?.electiveTaskCompletionNum
|
||
}}</span> -->
|
||
</div>
|
||
<div style="margin-top: 12px; display: flex">
|
||
<a-progress
|
||
:showInfo="true"
|
||
:percent="
|
||
fixDoublePer(
|
||
overviewData3?.electiveTaskCompletionRate || 0
|
||
)
|
||
"
|
||
style="width: 369px"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 概览（有数据） -->
|
||
</a-tab-pane>
|
||
<a-tab-pane key="2" tab="任务管理" style="position: relative">
|
||
<!-- 路径管理 -->
|
||
<div style="flex: 1">
|
||
<div class="onerow" style="margin: 0 0 0 26px">
|
||
<div style="display: flex; justify-content: center">
|
||
<div class="taskmain">任务大纲</div>
|
||
</div>
|
||
|
||
<router-link
|
||
:to="{
|
||
path: '/editingtasks',
|
||
query: {
|
||
growId: routerId,
|
||
pre: preId,
|
||
name: basicData?.name,
|
||
},
|
||
}"
|
||
class="editright"
|
||
v-if="checkMenu('growthTaskEdit') && listTaskData.length"
|
||
>
|
||
<span class="editextb">编辑任务</span>
|
||
</router-link>
|
||
</div>
|
||
<div class="tabs">
|
||
<a-radio-group
|
||
button-style="solid"
|
||
v-model:value="courseType"
|
||
@change="tabsChange"
|
||
>
|
||
<a-radio-button value="1">必修</a-radio-button>
|
||
<a-radio-button value="2">选修</a-radio-button>
|
||
</a-radio-group>
|
||
<template v-if="checkMenu('growthSetLearningOrder')">
|
||
<div class="switch">
|
||
<a-switch
|
||
@change="sortSwitchChange"
|
||
v-model:checked="sortSwitch"
|
||
/>
|
||
<div style="margin-left: 5px">是否按顺序学习</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<!-- 无数据显示快速创建 -->
|
||
<div v-if="!listTaskData.length" style="margin-top: 20px">
|
||
<!-- <router-link
|
||
v-if="checkGrowthPer(preId)"
|
||
:to="{
|
||
path: '/editingtasks',
|
||
query: { growId: routerId, pre: preId },
|
||
}"
|
||
> -->
|
||
<div
|
||
@click="addTask('/editingtasks')"
|
||
class="taskbox"
|
||
v-if="checkMenu('growthTaskEdit')"
|
||
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 v-else style="width: 100%; margin-top: 30px">
|
||
<a-empty />
|
||
</div>
|
||
</div>
|
||
<!-- 无数据显示快速创建 -->
|
||
|
||
<!-- 有数据-->
|
||
<div class="taskSyllabus">
|
||
<Draggable
|
||
v-model="listTaskData"
|
||
chosenClass="chosen"
|
||
ghostClass="ghost"
|
||
forceFallback="true"
|
||
group="task"
|
||
animation="500"
|
||
@change="draggableOnEnd"
|
||
>
|
||
<template #item="{ element, index }">
|
||
<div class="course">
|
||
<div
|
||
style="
|
||
text-align: center;
|
||
margin-left: 46px;
|
||
position: relative;
|
||
"
|
||
>
|
||
<div class="racona">
|
||
<a-tooltip>
|
||
<template #title>可拖动排序</template>
|
||
<img
|
||
style="width: 17px; height: 14px"
|
||
src="../../assets/images/leveladd/z1.png"
|
||
/>
|
||
</a-tooltip>
|
||
<img
|
||
style="width: 31px; height: 28px; margin: 0 12px"
|
||
:src="TASK_TYPE[element.taskType]?.img"
|
||
/>
|
||
<div style="margin-top: 2px; margin-left: 8px">
|
||
{{ TASK_TYPE[element.taskType]?.name || "" }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="first">
|
||
<div class="icontext" :title="element.taskName">
|
||
{{ element.taskName }}
|
||
</div>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="progresstext">
|
||
{{ element.completeNum || 0 }}/{{
|
||
element.totalNum || 0
|
||
}}人
|
||
</div>
|
||
<div style="display: flex">
|
||
<a-progress
|
||
:showInfo="false"
|
||
:percent="parseInt(element.progress * 100) || 0"
|
||
strokeColor="#FFC067"
|
||
trailColor="rgba(253, 209, 98, 0.2)"
|
||
/>
|
||
<span class="progresstext" style="margin-left: 10px"
|
||
>{{ parseInt(element.progress * 100) || 0 }}%</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="first"
|
||
v-if="checkMenu('growthPreviousLevelTask')"
|
||
>
|
||
<template v-if="element.superiorTaskName">
|
||
<div style="margin-right: 8px">
|
||
{{ element.superiorTaskName }}
|
||
</div>
|
||
<a-tooltip>
|
||
<template #title> 解绑锁定的上级任务</template>
|
||
<CloseCircleOutlined
|
||
@click="selectSuperiorTask(element)"
|
||
/>
|
||
</a-tooltip>
|
||
</template>
|
||
<template v-else>
|
||
<div @click="handlerSuperiors(element)">
|
||
<a-button type="link">
|
||
选择需解锁的上级任务
|
||
</a-button>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div
|
||
class="operations"
|
||
v-if="
|
||
checkMenu('growthEvaluateQRCode') ||
|
||
checkMenu('growthSignQRCode') ||
|
||
checkMenu('growthFaceTeaching') ||
|
||
checkMenu('growthFaceStudent') ||
|
||
checkMenu('growthQRCode') ||
|
||
checkMenu('growthTaskManage')
|
||
"
|
||
>
|
||
<template
|
||
v-if="
|
||
element.assessmentIds.length > 1 &&
|
||
element.taskType == 2
|
||
"
|
||
>
|
||
<div
|
||
class="operations_dropdown"
|
||
v-if="checkMenu('growthEvaluateQRCode')"
|
||
>
|
||
<a-dropdown
|
||
:getPopupContainer="
|
||
(triggerNode) => triggerNode.parentNode
|
||
"
|
||
:trigger="['click']"
|
||
v-model:visible="visibleEwmpg[element.id]"
|
||
>
|
||
<a
|
||
class="ant-dropdown-link"
|
||
@click="qrcodeAssement(element)"
|
||
>
|
||
评估二维码
|
||
<DownOutlined />
|
||
</a>
|
||
<template #overlay>
|
||
<div
|
||
style="
|
||
height: 200px;
|
||
width: 180px;
|
||
overflow: auto;
|
||
"
|
||
>
|
||
<a-menu @click="handleMenuClickpg">
|
||
<template
|
||
v-for="(item, index) in qrCodeItemspg"
|
||
:key="index"
|
||
>
|
||
<a-menu-item>
|
||
<div>
|
||
<p>{{ item.name }}</p>
|
||
</div>
|
||
</a-menu-item>
|
||
</template>
|
||
</a-menu>
|
||
</div>
|
||
</template>
|
||
</a-dropdown>
|
||
</div>
|
||
</template>
|
||
<template
|
||
v-if="
|
||
element.offcourseIds.length > 1 &&
|
||
element.taskType == 2
|
||
"
|
||
>
|
||
<div
|
||
class="operations_dropdown"
|
||
v-if="checkMenu('growthSignQRCode')"
|
||
>
|
||
<a-dropdown
|
||
:getPopupContainer="
|
||
(triggerNode) => triggerNode.parentNode
|
||
"
|
||
:trigger="['click']"
|
||
v-model:visible="visibleEwm[element.id]"
|
||
>
|
||
<a
|
||
class="ant-dropdown-link"
|
||
@click="qrcodeVisible(element)"
|
||
>
|
||
签到二维码
|
||
<DownOutlined />
|
||
</a>
|
||
<template #overlay>
|
||
<div style="height: 200px; overflow: auto">
|
||
<a-menu @click="handleMenuClick">
|
||
<template
|
||
v-for="(item, index) in qrCodeItems"
|
||
:key="index"
|
||
>
|
||
<a-menu-item>
|
||
<div>
|
||
<p>{{ item.name }}</p>
|
||
</div>
|
||
</a-menu-item>
|
||
</template>
|
||
</a-menu>
|
||
</div>
|
||
</template>
|
||
</a-dropdown>
|
||
</div>
|
||
</template>
|
||
<template
|
||
v-if="
|
||
(element.taskType == 6 || element.taskType == 9) &&
|
||
checkMenu('growthWorkAttendance')
|
||
"
|
||
>
|
||
<div
|
||
class="operation"
|
||
@click="handlerWorkAttendance(element)"
|
||
>
|
||
考勤
|
||
</div>
|
||
</template>
|
||
|
||
<template
|
||
v-if="
|
||
element.assessmentIds.length == 1 &&
|
||
element.taskType == 2
|
||
"
|
||
>
|
||
<div
|
||
class="operations_dropdown"
|
||
v-if="checkMenu('growthEvaluateQRCode')"
|
||
>
|
||
<a
|
||
class="ant-dropdown-link"
|
||
@click="qrcodeAssement(element)"
|
||
>
|
||
评估二维码
|
||
</a>
|
||
</div>
|
||
</template>
|
||
<template
|
||
v-if="
|
||
element.offcourseIds.length == 1 &&
|
||
element.taskType == 2
|
||
"
|
||
>
|
||
<div
|
||
class="operations_dropdown"
|
||
v-if="checkMenu('growthSignQRCode')"
|
||
>
|
||
<a
|
||
class="ant-dropdown-link"
|
||
@click="qrcodeVisible(element)"
|
||
>
|
||
签到二维码
|
||
</a>
|
||
</div>
|
||
</template>
|
||
<template v-if="element.taskType == 2">
|
||
<div
|
||
v-if="checkMenu('growthFaceTeaching')"
|
||
class="operation"
|
||
@click="openCourse(element, index)"
|
||
>
|
||
开课
|
||
</div>
|
||
<div
|
||
v-if="checkMenu('growthFaceStudent')"
|
||
class="operation"
|
||
@click="showFS(element, index)"
|
||
>
|
||
学员
|
||
</div>
|
||
</template>
|
||
|
||
<template
|
||
v-if="
|
||
element.taskType != 3 &&
|
||
element.taskType != 2 &&
|
||
checkMenu('growthQRCode')
|
||
"
|
||
>
|
||
<div
|
||
class="operation"
|
||
style="cursor: pointer"
|
||
@click="showCodeModel(element)"
|
||
>
|
||
二维码
|
||
</div>
|
||
</template>
|
||
<div
|
||
class="operation"
|
||
v-if="checkMenu('growthTaskManage')"
|
||
style="cursor: pointer; margin-right: 35px"
|
||
@click="
|
||
element.taskType == 2
|
||
? faceTeachModel(element)
|
||
: showOnline(element)
|
||
"
|
||
>
|
||
管理
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</Draggable>
|
||
</div>
|
||
<!-- 有数据-->
|
||
<div style="display: flex; height: 20px"></div>
|
||
</div>
|
||
</a-tab-pane>
|
||
<a-tab-pane key="3" tab="学员管理" force-render>
|
||
<StudentManage
|
||
ref="stuRef"
|
||
:type="14"
|
||
title="添加学员"
|
||
:id="routerId"
|
||
:growId="routerId"
|
||
:visable="tabFlag"
|
||
:permissions="preId"
|
||
>
|
||
<template #extension="{ data: { record } }">
|
||
<a-button type="link" @click="showStudent(record)"
|
||
>查看</a-button
|
||
>
|
||
</template>
|
||
</StudentManage>
|
||
</a-tab-pane>
|
||
</a-tabs>
|
||
</div>
|
||
|
||
<!-- 面授管理抽屉 开始 -->
|
||
<GrowthFaceTaskManage
|
||
:permissions="preId"
|
||
:type="4"
|
||
v-model:visible="faceTeachModelVisible"
|
||
:datasource="faceData"
|
||
/>
|
||
<!-- 面授管理抽屉 结束-->
|
||
|
||
<!-- 面授学员抽屉 -->
|
||
<GrowthFaceStu
|
||
:permissions="permissions"
|
||
v-model:FSvisible="FSvisible"
|
||
:datasource="facestudent"
|
||
:type="4"
|
||
:courseName="name"
|
||
/>
|
||
<!-- 查看学员 传入查看学员的id-->
|
||
<seeStu
|
||
v-model:Seevisible="Seevisible"
|
||
v-model:studentId="studentId"
|
||
v-model:growId="growId"
|
||
/>
|
||
|
||
<!-- 在线、案例等管理抽屉 -->
|
||
<GrowthOnlineManage
|
||
:permissions="preId"
|
||
v-model:Tvisible="onlineVisible"
|
||
:title="showTimeText"
|
||
:datasource="commonData"
|
||
/>
|
||
</a-spin>
|
||
</div>
|
||
|
||
<!-- 二维码弹窗 -->
|
||
<two-dimensional-code
|
||
v-model:codevisible="codevisible"
|
||
:codeInfo="codeInfo"
|
||
index="0"
|
||
type="课程二维码"
|
||
/>
|
||
<!-- 考勤 -->
|
||
<GrowthActiveAttendance
|
||
v-model:workAttendanceVisible="workAttendanceVisible"
|
||
:datasource="workAttendanceData"
|
||
/>
|
||
<!-- 二维码弹窗 -->
|
||
<!-- 面授课开课弹框 -->
|
||
<GrowthOpenCourse ref="coursePlanRef" :type="4" @refresh="getListTask" />
|
||
|
||
<a-modal
|
||
v-model:visible="setSuperiorsVisible"
|
||
:footer="null"
|
||
closable="false"
|
||
style="margin-top: 350px"
|
||
@cancel="setSuperiorsVisible = false"
|
||
>
|
||
<div
|
||
class="selectonlineface"
|
||
:style="{ display: setSuperiorsVisible ? 'block' : 'none' }"
|
||
>
|
||
<div class="bg_headers"></div>
|
||
<div class="bg_main">
|
||
<div class="bg_main_header">
|
||
<div class="bg_main_header_icon"></div>
|
||
<div>绑定上级任务</div>
|
||
<div
|
||
class="bg_main_header_close"
|
||
@click="setSuperiorsVisible = false"
|
||
></div>
|
||
</div>
|
||
<div class="bg_body">
|
||
<div
|
||
v-for="(item, key) in listTaskData"
|
||
style="
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
background: rgb(247, 251, 253);
|
||
height: 40px;
|
||
padding: 5px 10px 5px 5px;
|
||
border-radius: 5px;
|
||
"
|
||
>
|
||
<div
|
||
style="
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
width: 220px;
|
||
"
|
||
>
|
||
{{ item.taskName }}
|
||
</div>
|
||
<div
|
||
@click="selectSuperiorTask(setSuperiorsActive, item)"
|
||
style="
|
||
width: 60px;
|
||
height: 30px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
background: #0078fc;
|
||
border-radius: 5px;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
"
|
||
:style="{
|
||
filter:
|
||
setSuperiorsActive.id == item.id
|
||
? 'grayscale(1)'
|
||
: 'grayscale(0)',
|
||
}"
|
||
>
|
||
绑定
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
</template>
|
||
<script lang="jsx">
|
||
import { ref, reactive, toRefs, onMounted, createVNode, watch } from "vue";
|
||
import { message, Modal } from "ant-design-vue";
|
||
import StudentManage from "@/components/growthpath/StudentManage";
|
||
import { useRoute, useRouter } from "vue-router";
|
||
import { getCookieForName } from "@/api/method";
|
||
import seeStu from "@/components/growthpath/StudentSeeStu";
|
||
import GrowthOnlineManage from "@/components/growthpath/GrowthOnlineManage";
|
||
import CommonStudent from "@/components/student/CommonStudent";
|
||
import GrowthOpenCourse from "@/components/growthpath/GrowthOpenCourse.vue";
|
||
import qrCode from "@/utils/qrCode";
|
||
import { fixDoublePer, checkGrowthPer } from "@/utils/utils";
|
||
import dialog from "@/utils/gowthDialog";
|
||
import { TASK_TYPE } from "@/utils/constGrown";
|
||
import Draggable from "vuedraggable";
|
||
import TwoDimensionalCode from "@/components/TwoDimensionalCode.vue";
|
||
import GrowthFaceStu from "@/components/growthpath/GrowthFaceStu";
|
||
import { DownOutlined, CloseCircleOutlined } from "@ant-design/icons-vue";
|
||
import GrowthFaceTaskManage from "../../components/growthpath/GrowthFaceTaskManage";
|
||
import { courseData } from "@/api/index1";
|
||
import { checkMenu } from "@/utils/utils";
|
||
import GrowthActiveAttendance from "@/components/growthpath/GrowthActiveAttendance";
|
||
import {
|
||
getOverview,
|
||
getBasicInfo,
|
||
taskOutline,
|
||
withdrawal,
|
||
getPublishInfo,
|
||
allocationList,
|
||
manangementOverview,
|
||
published,
|
||
toSortTask,
|
||
saveSuperiorTask,
|
||
delSuperiorTask,
|
||
openOrCloseSortSwitch,
|
||
taskInformation,
|
||
taskCompletionRate,
|
||
} from "@/api/growthpath";
|
||
export default {
|
||
name: "pathManage",
|
||
components: {
|
||
StudentManage,
|
||
seeStu,
|
||
GrowthOnlineManage,
|
||
CommonStudent,
|
||
TwoDimensionalCode,
|
||
Draggable,
|
||
GrowthFaceTaskManage,
|
||
GrowthOpenCourse,
|
||
DownOutlined,
|
||
GrowthActiveAttendance,
|
||
CloseCircleOutlined,
|
||
GrowthFaceStu,
|
||
},
|
||
setup() {
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
const stuRef = ref();
|
||
const headers = { token: getCookieForName("token") };
|
||
const state = reactive({
|
||
homeworkModelVisible: false,
|
||
activeKey: "1",
|
||
sortSwitch: false,
|
||
FSvisible: false,
|
||
facestudent: false,
|
||
commonData: null,
|
||
showTimeText: null,
|
||
onlineVisible: false,
|
||
setSuperiorsVisible: false,
|
||
total: 0,
|
||
// 考勤
|
||
workAttendanceVisible: false,
|
||
workAttendanceData: {},
|
||
pageSize: 99999,
|
||
pageNum: 1,
|
||
spinning: false,
|
||
tabFlag: true,
|
||
homeworkData: {},
|
||
TMvisible: false,
|
||
TMvisibleExternal: false,
|
||
showTestText: "",
|
||
examData: null,
|
||
targetId: null,
|
||
routerId: route.query.id,
|
||
preId: route.query.pre,
|
||
Seevisible: false,
|
||
studentId: "",
|
||
codevisible: false, //二维码是否显示
|
||
codeInfo: {
|
||
url: "",
|
||
}, //二维码内容
|
||
growId: "",
|
||
basicData: {},
|
||
listTaskData: [],
|
||
overviewData: {},
|
||
overviewData2: {},
|
||
overviewData3: {},
|
||
TASK_TYPE: TASK_TYPE,
|
||
// 课程类型 1必修 2选修
|
||
courseType: "1",
|
||
// 面授管理
|
||
faceTeachModelVisible: false,
|
||
faceTeachModelVisibleTitle: "",
|
||
faceData: {},
|
||
});
|
||
|
||
watch();
|
||
// () => state.listTaskData,
|
||
// (old, val) => {
|
||
// if (old.length == val.length) {
|
||
// const listIds = old.map((item) => item.id).join(",");
|
||
// listIds && toSortTask(listIds);
|
||
// }
|
||
// },
|
||
// { deep: true }
|
||
// 新增选修任务
|
||
const addTask = (url) => {
|
||
router.push({
|
||
path: url,
|
||
query: { growId: state.routerId, pre: state.preId },
|
||
});
|
||
};
|
||
|
||
// 返回
|
||
const goBack = () => {
|
||
router.go(-1);
|
||
};
|
||
// 列表拖动结束
|
||
const draggableOnEnd = () => {
|
||
// 开启加载弹窗，getListTask请求完成后会关闭弹框
|
||
state.spinning = true;
|
||
const listIds = state.listTaskData.map((item) => item.id).join(",");
|
||
toSortTask(listIds, state.courseType).then((res) => {
|
||
getListTask();
|
||
});
|
||
};
|
||
// 撤回
|
||
const resize = () => {
|
||
dialog({
|
||
content: "确定撤回？",
|
||
contentTwo: "撤回后学员进度保留，发布后可继续学习",
|
||
ok: () => {
|
||
state.spinning = true;
|
||
withdrawal(route.query.id)
|
||
.then((res) => {
|
||
if (res.data.code == 200) {
|
||
message.success("撤回成功");
|
||
getOverviewList();
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
message.error(err.data.msg);
|
||
})
|
||
.finally(() => {
|
||
state.spinning = false;
|
||
});
|
||
},
|
||
});
|
||
};
|
||
// 考勤
|
||
const handlerWorkAttendance = (data) => {
|
||
state.workAttendanceVisible = true;
|
||
state.workAttendanceData = data;
|
||
};
|
||
// 开启绑定上级任务的弹窗
|
||
const setSuperiorsActive = ref(null);
|
||
const handlerSuperiors = (element) => {
|
||
// 保存需要操作的数据
|
||
setSuperiorsActive.value = element;
|
||
state.setSuperiorsVisible = true;
|
||
};
|
||
const qrCodeItems = ref([]);
|
||
const visibleEwm = ref({});
|
||
const qrcodeVisible = async (item) => {
|
||
if (qrCodeItems.value.length != 0) {
|
||
qrCodeItems.value = [];
|
||
}
|
||
visibleEwm.value[item.id] = !visibleEwm.value[item.id];
|
||
const planParams = {
|
||
type: 4,
|
||
offcourseId: item.taskId,
|
||
};
|
||
await courseData(planParams).then((res) => {
|
||
qrCodeItems.value = res.data.data.map((dataItem) => ({
|
||
...dataItem,
|
||
courseName: item.taskName,
|
||
}));
|
||
if (qrCodeItems.value.length == 1) {
|
||
qrCode({
|
||
title: "【签到】二维码",
|
||
courseName: state.basicData.growthName,
|
||
name: qrCodeItems.value[0].name + "课程签到",
|
||
createName:
|
||
qrCodeItems.value[0].offteachers
|
||
.map((teacher) => teacher.teacherName)
|
||
.join(", ") || qrCodeItems.value[0].teacher,
|
||
url: `${location.protocol}//${location.host}${
|
||
process.env.VUE_APP_BASE_API
|
||
}/admin/student/studentSign?taskId=${
|
||
qrCodeItems.value[0].id
|
||
}&taskType=${2}&type=${3}&openCourseId=${qrCodeItems.value[0].id}`,
|
||
});
|
||
}
|
||
if (qrCodeItems.value.length == 0) {
|
||
message.info("暂无签到二维码");
|
||
}
|
||
});
|
||
};
|
||
function handleMenuClick({ key }) {
|
||
const name = qrCodeItems.value[key].name;
|
||
const teacher = qrCodeItems.value[key].teacher;
|
||
const id = qrCodeItems.value[key].id;
|
||
const offteachers = qrCodeItems.value[key].offteachers
|
||
.map((teacher) => teacher.teacherName)
|
||
.join(", ");
|
||
qrCode({
|
||
title: "【签到】二维码",
|
||
courseName: state.basicData.growthName,
|
||
name: name + "课程签到",
|
||
createName: offteachers || teacher,
|
||
url: `${location.protocol}//${location.host}${
|
||
process.env.VUE_APP_BASE_API
|
||
}/admin/student/studentSign?taskId=${id}&taskType=${2}&type=${3}&openCourseId=${id}`,
|
||
});
|
||
}
|
||
const qrCodeItemspg = ref([]);
|
||
const visibleEwmpg = ref({});
|
||
const qrcodeAssement = async (item) => {
|
||
if (qrCodeItemspg.value.length != 0) {
|
||
qrCodeItemspg.value = [];
|
||
}
|
||
visibleEwmpg.value[item.id] = !visibleEwmpg.value[item.id];
|
||
const planParams = {
|
||
type: 4,
|
||
offcourseId: item.taskId,
|
||
};
|
||
await courseData(planParams).then((res) => {
|
||
const qrCodeItemspgItem = res.data.data.map((dataItem) => ({
|
||
...dataItem,
|
||
courseName: item.taskName,
|
||
}));
|
||
qrCodeItemspg.value = qrCodeItemspgItem.filter(
|
||
(item) => item.assessmentId !== null
|
||
);
|
||
if (qrCodeItemspg.value.length == 1) {
|
||
const courseName = state.basicData.growthName;
|
||
qrCode({
|
||
title: "【评估】二维码",
|
||
courseName,
|
||
name: qrCodeItemspg.value[0].name + "课程评估",
|
||
createName:
|
||
qrCodeItemspg.value[0].offteachers
|
||
.map((teacher) => teacher.teacherName)
|
||
.join(", ") || qrCodeItemspg.value[0].teacher,
|
||
url: `${location.protocol}//${location.host}/student-h5/investigatpage?id=${qrCodeItemspg.value[0].id}&type=3&infoId=${qrCodeItemspg.value[0].id}&courseId=${qrCodeItemspg.value[0].assessmentId}&chapterOrStageId=0&level=${courseName}`,
|
||
});
|
||
}
|
||
if (qrCodeItemspg.value.length == 0) {
|
||
message.info("暂无评估二维码");
|
||
}
|
||
});
|
||
};
|
||
|
||
function handleMenuClickpg({ key }) {
|
||
const name = qrCodeItemspg.value[key].name;
|
||
const offteachers = qrCodeItemspg.value[key].offteachers
|
||
.map((teacher) => teacher.teacherName)
|
||
.join(", ");
|
||
const teacher = qrCodeItemspg.value[key].teacher;
|
||
const id = qrCodeItemspg.value[key].id;
|
||
const assessmentId = qrCodeItemspg.value[key].assessmentId;
|
||
const courseName = state.basicData.growthName;
|
||
qrCode({
|
||
title: "【评估】二维码",
|
||
courseName,
|
||
name: name + "课程评估",
|
||
createName: offteachers || teacher,
|
||
url: `${location.protocol}//${location.host}/student-h5/investigatpage?id=${id}&type=3&infoId=${id}&courseId=${assessmentId}&chapterOrStageId=0&level=${courseName}`,
|
||
});
|
||
}
|
||
// 保存/删除上级任务
|
||
const selectSuperiorTask = (element, row) => {
|
||
console.log(element, row);
|
||
|
||
if (row) {
|
||
if (element.id === row.id) {
|
||
message.warning("不可绑定");
|
||
return;
|
||
}
|
||
state.spinning = true;
|
||
// 关闭弹窗
|
||
state.setSuperiorsVisible = false;
|
||
// 保存需解锁的上级任务
|
||
saveSuperiorTask({
|
||
id: element.id,
|
||
superiorTaskId: row.id,
|
||
})
|
||
.then((res) => {
|
||
message.success("操作成功");
|
||
element.superiorTaskName = row.taskName;
|
||
getListTask();
|
||
})
|
||
.finally(() => {
|
||
state.spinning = false;
|
||
});
|
||
} else {
|
||
state.spinning = true;
|
||
// 删除需解锁的上级任务
|
||
delSuperiorTask(element.id)
|
||
.then((res) => {
|
||
message.success("操作成功");
|
||
element.superiorTaskName = null;
|
||
getListTask();
|
||
})
|
||
.finally(() => {
|
||
state.spinning = false;
|
||
});
|
||
}
|
||
};
|
||
// 必修选修切换
|
||
const tabsChange = () => {
|
||
console.log(state.sortSwitch, state.courseType);
|
||
state.courseType === "1"
|
||
? (state.sortSwitch = state.basicData.sortSwitch)
|
||
: (state.sortSwitch = state.basicData.eleSortSwitch);
|
||
getListTask();
|
||
};
|
||
const releaseLearnPath = () => {
|
||
dialog({
|
||
content: "确定发布当前任务？",
|
||
ok: () => {
|
||
state.spinning = true;
|
||
published({
|
||
growId: route.query.id,
|
||
})
|
||
.then((res) => {
|
||
if (res.data.code == 200) {
|
||
message.success("发布成功");
|
||
getOverviewList();
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
message.error(err.data.msg);
|
||
})
|
||
.finally(() => {
|
||
state.spinning = false;
|
||
});
|
||
},
|
||
});
|
||
};
|
||
const changeTabs = (e) => {
|
||
if (e == 3) {
|
||
// 学员
|
||
state.tabFlag = true;
|
||
} else if (e == 1) {
|
||
// 概览
|
||
state.tabFlag = false;
|
||
getOverviewList();
|
||
} else {
|
||
// 任务
|
||
state.tabFlag = false;
|
||
getListTask();
|
||
}
|
||
};
|
||
const showStudent = (record) => {
|
||
state.Seevisible = true;
|
||
state.studentId = record.sid;
|
||
state.growId = state.routerId;
|
||
};
|
||
const showCodeModel = (item) => {
|
||
console.log("二维码任务信息", item);
|
||
let codeUrl = "";
|
||
// 在线课 停用 -- 暂时没有在线课停用标记
|
||
if (item.taskType == 1) {
|
||
// if (item.taskStatus == 1 || item.taskStatus == 2)
|
||
// return message.error("该任务无法学习，请联系管理员进行替换。");
|
||
codeUrl =
|
||
window.location.protocol +
|
||
process.env.VUE_APP_ONLINE_CLASS_URL +
|
||
item.taskId;
|
||
}
|
||
if (item.taskType == 3) return message.error("请在pc端完成");
|
||
|
||
if (item.taskType == 4) {
|
||
let date1 = new Date(item.endTime).getTime();
|
||
let date2 = new Date().getTime();
|
||
if (date1 < date2) return message.warning("当前作业已结束");
|
||
codeUrl =
|
||
window.location.protocol +
|
||
process.env.VUE_APP_H5 +
|
||
"/homeworkpage?courseId=" +
|
||
item.info.id +
|
||
"&type=4&id=" +
|
||
item.id +
|
||
"&chapterOrStageId=" +
|
||
0 +
|
||
"&infoId=" +
|
||
route.query.id;
|
||
}
|
||
// 考试 停用
|
||
if (item.taskType == 5) {
|
||
// if (item.taskStatus == 1 || item.taskStatus == 2)
|
||
// return message.error("该任务无法学习，请联系管理员进行替换。");
|
||
// 此处判断外部考试跳转
|
||
if (item.info.examType == 2) {
|
||
codeUrl =
|
||
window.location.protocol +
|
||
process.env.VUE_APP_H5 +
|
||
"/externalexam?type=4&courseId=" +
|
||
item.info.id +
|
||
"&id=" +
|
||
item.id +
|
||
"&chapterOrStageId=0" +
|
||
"&infoId=" +
|
||
route.query.id;
|
||
} else {
|
||
codeUrl =
|
||
window.location.protocol +
|
||
process.env.VUE_APP_EXAM_DETAIL_URL +
|
||
item.info.examinationPaperId;
|
||
}
|
||
}
|
||
// 直播结束时间
|
||
if (item.taskType == 6) {
|
||
let date1 = new Date(item.info.liveEndTime).getTime();
|
||
let date2 = new Date().getTime();
|
||
if (date1 < date2) return message.warning("当前直播已结束");
|
||
codeUrl =
|
||
window.location.protocol +
|
||
process.env.VUE_APP_H5 +
|
||
"/liveboradcast?courseId=" +
|
||
item.info.id +
|
||
"&type=4&id=" +
|
||
item.id +
|
||
"&chapterOrStageId=0" +
|
||
"&infoId=" +
|
||
route.query.id;
|
||
}
|
||
// 外链
|
||
if (item.taskType == 7) {
|
||
codeUrl =
|
||
window.location.protocol +
|
||
process.env.VUE_APP_H5 +
|
||
"/outerchain?courseId=" +
|
||
item.info.id +
|
||
"&type=4&id=" +
|
||
item.id +
|
||
"&chapterOrStageId=0" +
|
||
"&infoId=" +
|
||
route.query.id;
|
||
}
|
||
//讨论
|
||
if (item.taskType == 8) {
|
||
codeUrl =
|
||
window.location.protocol +
|
||
process.env.VUE_APP_H5 +
|
||
"/discusspage?courseId=" +
|
||
item.info.id +
|
||
"&type=4&id=" +
|
||
item.id +
|
||
"&chapterOrStageId=0" +
|
||
"&infoId=" +
|
||
route.query.id;
|
||
}
|
||
//活动
|
||
if (item.taskType == 9) {
|
||
let date1 = new Date(item.info.activityEndTime).getTime();
|
||
let date2 = new Date().getTime();
|
||
if (date1 < date2) return message.warning("当前活动已结束");
|
||
codeUrl =
|
||
window.location.protocol +
|
||
process.env.VUE_APP_H5 +
|
||
"/activitiespage?courseId=" +
|
||
item.info.id +
|
||
"&type=4&id=" +
|
||
item.id +
|
||
"&chapterOrStageId=0" +
|
||
"&infoId=" +
|
||
route.query.id;
|
||
}
|
||
//测评
|
||
if (item.taskType == 10) {
|
||
codeUrl =
|
||
window.location.protocol +
|
||
process.env.VUE_APP_H5 +
|
||
"/evaluation?courseId=" +
|
||
item.info.id +
|
||
"&type=4&targetId=" +
|
||
item.info.evaluationTypeId +
|
||
"&id=" +
|
||
item.id +
|
||
"&chapterOrStageId=0" +
|
||
"&infoId=" +
|
||
route.query.id;
|
||
}
|
||
|
||
// 评估 停用
|
||
if (item.taskType == 11) {
|
||
// if (item.taskStatus == 1 || item.taskStatus == 2)
|
||
// return message.error("该任务无法学习，请联系管理员进行替换。");
|
||
console.log("item", item);
|
||
codeUrl =
|
||
window.location.protocol +
|
||
process.env.VUE_APP_H5 +
|
||
"/investigatpage?courseId=" +
|
||
item.taskId +
|
||
"&type=4&id=" +
|
||
item.id +
|
||
"&chapterOrStageId=0" +
|
||
"&infoId=" +
|
||
route.query.id;
|
||
}
|
||
// 投票
|
||
if (item.taskType == 12) {
|
||
codeUrl =
|
||
window.location.protocol +
|
||
process.env.VUE_APP_H5 +
|
||
"/ballotpage?courseId=" +
|
||
item.info.id +
|
||
"&btype=2&id=" +
|
||
item.id +
|
||
"&chapterOrStageId=0" +
|
||
"&type=4&infoId=" +
|
||
route.query.id;
|
||
}
|
||
// 项目
|
||
if (item.taskType == 13) {
|
||
codeUrl =
|
||
window.location.protocol +
|
||
process.env.VUE_APP_H5 +
|
||
"/projectdetails?type=2&projectId=" +
|
||
item.taskId +
|
||
"&id=" +
|
||
item.id +
|
||
"&chapterOrStageId=0" +
|
||
"&type=4&infoId=" +
|
||
route.query.id;
|
||
}
|
||
state.codevisible = true;
|
||
let obj = {
|
||
title: "[" + state.TASK_TYPE[item.taskType].name + "]二维码",
|
||
name: item.name,
|
||
url: codeUrl,
|
||
};
|
||
state.codeInfo = obj;
|
||
};
|
||
//面授学员的弹窗
|
||
const showFS = (item) => {
|
||
state.FSvisible = true;
|
||
state.facestudent = item;
|
||
console.log("facestudent", state.facestudent);
|
||
};
|
||
// 作业点击管理弹框
|
||
const homeworkModel = (data) => {
|
||
console.log(data);
|
||
state.homeworkData = data;
|
||
state.homeworkModelVisible = true;
|
||
// 作业弹框名称 RouterHomeworkManage
|
||
};
|
||
// 面授课点击管理弹框
|
||
const faceTeachModel = (data) => {
|
||
console.log(data);
|
||
state.faceTeachModelVisible = true;
|
||
state.faceTeachModelVisibleTitle = data.taskName;
|
||
state.faceData = data;
|
||
// 面授课弹框名称 RouterFaceTeachManage
|
||
};
|
||
const showOnline = (item) => {
|
||
console.log(item, "item");
|
||
item.targetId = route.query.id;
|
||
state.showTimeText = item.name;
|
||
state.commonData = item;
|
||
state.onlineVisible = true;
|
||
};
|
||
//考试管理的抽屉
|
||
const showTest = (data) => {
|
||
if (data.examType == 2) {
|
||
// 外部考试抽屉显示
|
||
state.TMvisibleExternal = true;
|
||
state.examData = data;
|
||
state.showTestText = data.name;
|
||
state.targetId = route.query.id;
|
||
} else {
|
||
// 系统考试抽屉显示
|
||
state.TMvisible = true;
|
||
state.examData = data;
|
||
state.showTestText = data.name;
|
||
state.targetId = route.query.id;
|
||
}
|
||
};
|
||
onMounted(() => {
|
||
if (route.query.routerEdit === "true") {
|
||
state.activeKey = "2";
|
||
}
|
||
getOverviewList();
|
||
getListTask();
|
||
});
|
||
//任务列表
|
||
const getListTask = () => {
|
||
state.spinning = true;
|
||
taskOutline({
|
||
growthId: route.query.id,
|
||
type: state.courseType,
|
||
pageSize: state.pageSize,
|
||
pageNum: state.pageNum,
|
||
})
|
||
.then((res) => {
|
||
if (res.data.code == 200) {
|
||
state.listTaskData = res.data.data.records;
|
||
// state.total = res.data.data.total;
|
||
// state.pageSize = res.data.data.pageSize;
|
||
// state.pageNum = res.data.data.pageNum;
|
||
}
|
||
state.spinning = false;
|
||
})
|
||
.catch((err) => {
|
||
spinning.value = false;
|
||
});
|
||
};
|
||
|
||
const getOverviewList = () => {
|
||
//基本信息
|
||
getBasicInfo({
|
||
growId: state.routerId,
|
||
}).then((res) => {
|
||
if (res.data.code === 200) {
|
||
state.basicData = res.data.data;
|
||
state.basicData.createTime = state.basicData.createTime.split("T")[0];
|
||
state.sortSwitch = state.basicData.sortSwitch;
|
||
}
|
||
});
|
||
//概览
|
||
manangementOverview({
|
||
growId: state.routerId,
|
||
}).then((res) => {
|
||
if (res.data.code == 200) {
|
||
state.overviewData = res.data.data;
|
||
} else {
|
||
message.error(res.msg);
|
||
}
|
||
});
|
||
|
||
//概览统计图数据
|
||
taskInformation(state.routerId).then((res) => {
|
||
if (res.data.code == 200) {
|
||
state.overviewData2 = res.data.data;
|
||
} else {
|
||
message.error(res.msg);
|
||
}
|
||
});
|
||
taskCompletionRate(state.routerId).then((res) => {
|
||
if (res.data.code == 200) {
|
||
state.overviewData3 = res.data.data;
|
||
} else {
|
||
message.error(res.msg);
|
||
}
|
||
});
|
||
};
|
||
const totasks = () => {
|
||
router.push({
|
||
path: "/editingtasks",
|
||
query: {
|
||
growId: state.routerId,
|
||
pre: state.preId,
|
||
},
|
||
});
|
||
};
|
||
// 开课按钮
|
||
const coursePlanRef = ref();
|
||
const openCourse = (ele) => {
|
||
coursePlanRef.value.openDrawer(ele);
|
||
};
|
||
// 是否自动学习开关
|
||
const sortSwitchChange = (val) => {
|
||
dialog({
|
||
content: `
|
||
${
|
||
val
|
||
? "开启后系统将根据排序自动生成学习顺序，"
|
||
: "关闭后系统将自动重置当前学习顺序，"
|
||
}
|
||
请确认是否${val ? "开启" : "关闭"}？
|
||
`,
|
||
ok: () => {
|
||
// 开启加载弹窗，getListTask请求完成后会关闭弹框
|
||
state.spinning = true;
|
||
openOrCloseSortSwitch(state.routerId, state.courseType).then(
|
||
(res) => {
|
||
message.success("操作成功");
|
||
getListTask();
|
||
state.courseType == "1"
|
||
? (state.basicData.sortSwitch = state.sortSwitch)
|
||
: (state.basicData.eleSortSwitch = state.sortSwitch);
|
||
}
|
||
);
|
||
},
|
||
close: () => {
|
||
state.sortSwitch = !state.sortSwitch;
|
||
},
|
||
});
|
||
};
|
||
return {
|
||
...toRefs(state),
|
||
stuRef,
|
||
headers,
|
||
checkMenu,
|
||
coursePlanRef,
|
||
changeTabs,
|
||
resize,
|
||
releaseLearnPath,
|
||
sortSwitchChange,
|
||
tabsChange,
|
||
showStudent,
|
||
showTest,
|
||
showOnline,
|
||
homeworkModel,
|
||
showCodeModel,
|
||
getOverviewList,
|
||
totasks,
|
||
getListTask,
|
||
fixDoublePer,
|
||
checkGrowthPer,
|
||
openCourse,
|
||
faceTeachModel,
|
||
selectSuperiorTask,
|
||
addTask,
|
||
qrcodeAssement,
|
||
handleMenuClickpg,
|
||
draggableOnEnd,
|
||
goBack,
|
||
handleMenuClick,
|
||
qrcodeVisible,
|
||
handlerSuperiors,
|
||
handlerWorkAttendance,
|
||
showFS,
|
||
qrCodeItems,
|
||
visibleEwm,
|
||
qrCodeItemspg,
|
||
visibleEwmpg,
|
||
setSuperiorsActive,
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.clearfix:before,
|
||
.clearfix:after {
|
||
content: " ";
|
||
display: block;
|
||
clear: both;
|
||
}
|
||
.tabs {
|
||
margin: 10px 63px 10px 26px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.switch {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 20px;
|
||
}
|
||
.selectonlineface {
|
||
z-index: 999;
|
||
width: 679px;
|
||
background: #ffffff;
|
||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
|
||
position: absolute;
|
||
left: 50%;
|
||
top: -100%;
|
||
transform: translate(-50%, -50%);
|
||
.bg_headers {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 40px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(103, 64, 255, 0.2) 0%,
|
||
rgba(166, 168, 255, 0) 100%
|
||
);
|
||
}
|
||
.bg_main {
|
||
width: 100%;
|
||
position: relative;
|
||
.bg_main_header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 20px;
|
||
padding-left: 26px;
|
||
font-size: 16px;
|
||
.bg_main_header_icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 10px;
|
||
background-image: url(@/assets/images/evaluation/uploads.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
.bg_main_header_close {
|
||
position: absolute;
|
||
right: 42px;
|
||
cursor: pointer;
|
||
width: 20px;
|
||
height: 20px;
|
||
background-image: url(@/assets/images/coursewareManage/close.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.bg_body {
|
||
width: 80%;
|
||
margin: 20px auto;
|
||
height: 600px;
|
||
overflow-y: auto;
|
||
}
|
||
}
|
||
}
|
||
.path-manage {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.racona {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.addhead {
|
||
width: 100%;
|
||
height: 130px;
|
||
// background-color: lightgreen;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
.imgfor {
|
||
margin-left: 22px;
|
||
padding: 25px 0;
|
||
|
||
.fort {
|
||
font-size: 14px;
|
||
// width: 288px;
|
||
height: 22px;
|
||
margin-bottom: 9px;
|
||
background-color: rgba(255, 255, 255, 0);
|
||
box-sizing: border-box;
|
||
color: #555555;
|
||
text-align: left;
|
||
line-height: normal;
|
||
}
|
||
}
|
||
|
||
@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: 12px;
|
||
}
|
||
.pubIcon {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 12px;
|
||
cursor: pointer;
|
||
|
||
.img2 {
|
||
width: 42px;
|
||
height: 42px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.pub {
|
||
color: #02a7f0;
|
||
font-size: 14px;
|
||
margin-top: 2px;
|
||
margin-right: 9px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.img2 {
|
||
width: 42px;
|
||
height: 42px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.onerow {
|
||
//width: 100%;
|
||
display: flex;
|
||
// height: 40px;
|
||
position: relative;
|
||
// margin-top: 15px;
|
||
margin-left: 38px;
|
||
|
||
//margin-right: 38px;
|
||
.taskmain {
|
||
height: 24px;
|
||
font-size: 18px;
|
||
background-color: rgba(255, 255, 255, 0);
|
||
box-sizing: border-box;
|
||
font-weight: 650;
|
||
color: #333333;
|
||
text-align: left;
|
||
line-height: normal;
|
||
}
|
||
|
||
.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: 51px;
|
||
top: 0;
|
||
width: 80px;
|
||
height: 32px;
|
||
border-radius: 5px;
|
||
background-color: #578afc;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
line-height: normal;
|
||
background: #4ea6ff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.editextb {
|
||
color: #fff;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
}
|
||
.secondadd {
|
||
.addtaskmain {
|
||
width: 368px;
|
||
height: 22px;
|
||
margin: 16px 0 32px 26px;
|
||
font-size: 18px;
|
||
background-color: rgba(255, 255, 255, 0);
|
||
box-sizing: border-box;
|
||
font-weight: 650;
|
||
color: #333333;
|
||
text-align: left;
|
||
line-height: normal;
|
||
}
|
||
|
||
.addtask_main {
|
||
margin-left: 26px;
|
||
display: flex;
|
||
justify-content: left;
|
||
.btn {
|
||
cursor: pointer;
|
||
width: 412px;
|
||
margin-right: 32px;
|
||
}
|
||
}
|
||
}
|
||
.second {
|
||
display: flex;
|
||
justify-content: left;
|
||
flex-wrap: wrap;
|
||
margin-top: 39px;
|
||
margin-left: 33px;
|
||
margin-bottom: 47px;
|
||
|
||
.nubbox {
|
||
width: 253px;
|
||
height: 116px;
|
||
background: #f0f6fc;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 15px;
|
||
margin-top: 20px;
|
||
.nub1 {
|
||
height: 40px;
|
||
font-weight: 600;
|
||
font-size: 28px;
|
||
color: #ffb54a;
|
||
line-height: 40px;
|
||
}
|
||
|
||
.nub2 {
|
||
height: 20px;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #666660;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.stagelast {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
// justify-content: center;
|
||
margin-left: 74px;
|
||
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: 600px;
|
||
margin: 35px 50px;
|
||
|
||
.ant-progress-bg {
|
||
height: 24px !important;
|
||
background: #4ea6ff;
|
||
}
|
||
|
||
.ant-progress-inner {
|
||
height: 24px;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
.onerow {
|
||
//width: 100%;
|
||
display: flex;
|
||
// height: 40px;
|
||
position: relative;
|
||
// margin-top: 15px;
|
||
margin-left: 26px;
|
||
|
||
//margin-right: 38px;
|
||
.taskmain {
|
||
height: 24px;
|
||
font-size: 18px;
|
||
background-color: rgba(255, 255, 255, 0);
|
||
box-sizing: border-box;
|
||
font-weight: 650;
|
||
color: #333333;
|
||
text-align: left;
|
||
line-height: normal;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
.reuse {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 50px;
|
||
// height: 300px;
|
||
.reuse_btn {
|
||
width: 102px;
|
||
height: 42px;
|
||
text-align: center;
|
||
line-height: 34px;
|
||
border-radius: 6px;
|
||
color: #ffffff;
|
||
font-size: 16px;
|
||
background: #4ea6ff;
|
||
margin-right: 38px;
|
||
margin-top: 15px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.taskbox {
|
||
width: 412px;
|
||
height: 160px;
|
||
border-radius: 10px;
|
||
position: relative;
|
||
margin-left: 26px;
|
||
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;
|
||
}
|
||
}
|
||
.taskboxadd {
|
||
width: 436px;
|
||
height: 173px;
|
||
border-radius: 10px;
|
||
position: relative;
|
||
margin-left: 26px;
|
||
background: linear-gradient(-180deg, #facd91 0%, #ffffff 100%);
|
||
margin-bottom: 10px;
|
||
margin-top: 44px;
|
||
cursor: pointer;
|
||
|
||
.leftt {
|
||
position: absolute;
|
||
top: 18px;
|
||
left: 0;
|
||
}
|
||
|
||
.photo {
|
||
position: absolute;
|
||
top: 19px;
|
||
left: 21px;
|
||
.photoimg {
|
||
width: 165px;
|
||
height: 135px;
|
||
}
|
||
}
|
||
|
||
.rightt {
|
||
position: absolute;
|
||
top: 69px;
|
||
right: 26px;
|
||
}
|
||
|
||
.centerbox {
|
||
position: absolute;
|
||
top: 56px;
|
||
left: 210px;
|
||
font-size: 22px;
|
||
width: 88px;
|
||
height: 30px;
|
||
background-color: rgba(255, 255, 255, 0);
|
||
box-sizing: border-box;
|
||
font-weight: 500;
|
||
color: #f59a23;
|
||
text-align: left;
|
||
line-height: normal;
|
||
//line-height: 36px;
|
||
}
|
||
|
||
.centermain {
|
||
width: 128px;
|
||
height: 22px;
|
||
background-color: rgba(255, 255, 255, 0);
|
||
box-sizing: border-box;
|
||
font-weight: 500;
|
||
color: #7f7f7f;
|
||
text-align: left;
|
||
line-height: normal;
|
||
font-size: 16px;
|
||
position: absolute;
|
||
left: 210px;
|
||
bottom: 56px;
|
||
}
|
||
}
|
||
|
||
.taskSyllabus {
|
||
// flex: 1;
|
||
overflow-x: auto;
|
||
min-height: 400px;
|
||
.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: nowrap;
|
||
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;
|
||
justify-content: center;
|
||
width: 120px;
|
||
.iconame {
|
||
//position: absolute;
|
||
color: #4f5156;
|
||
font-size: 16px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.icontext {
|
||
font-size: 14px;
|
||
margin-left: 30px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
width: 240px;
|
||
height: 19px;
|
||
background-color: rgba(255, 255, 255, 0);
|
||
box-sizing: border-box;
|
||
color: #333333;
|
||
text-align: left;
|
||
line-height: normal;
|
||
}
|
||
}
|
||
|
||
.progress {
|
||
width: 70px;
|
||
margin-left: 10px;
|
||
margin-right: 50px;
|
||
flex-grow: 1;
|
||
.img_daoc {
|
||
cursor: pointer;
|
||
width: 16px;
|
||
height: 18px;
|
||
background-image: url(@/assets/images/coursewareManage/export.png);
|
||
background-size: 100% 100%;
|
||
// background-color: #4ea6ff;
|
||
margin-left: 7px;
|
||
}
|
||
.progresstext {
|
||
color: #ffc067;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.operations {
|
||
display: flex;
|
||
width: 280px;
|
||
justify-content: flex-end;
|
||
flex-wrap: wrap;
|
||
.operation {
|
||
color: #4ea6ff;
|
||
font-size: 14px;
|
||
padding: 10px;
|
||
width: 63px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
.operations_dropdown {
|
||
padding: 10px;
|
||
text-align: center;
|
||
position: relative;
|
||
min-width: 90px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.tableBox {
|
||
padding-bottom: 20px;
|
||
margin: 20px 38px 30px;
|
||
::v-deep .ant-select {
|
||
min-height: 32px;
|
||
.ant-select-selector {
|
||
min-height: 32px;
|
||
}
|
||
.ant-select-selection-item {
|
||
line-height: 32px;
|
||
}
|
||
}
|
||
::v-deep .ant-pagination-options .ant-select-arrow {
|
||
display: block;
|
||
}
|
||
::v-deep .ant-select-dropdown {
|
||
display: inline-block;
|
||
}
|
||
::v-deep .ant-select-selection-item {
|
||
margin-left: 3px;
|
||
}
|
||
::v-deep .ant-pagination-options-size-changer.ant-select {
|
||
width: 92px;
|
||
}
|
||
.pa {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
</style>
|