huoran
/
FE_occupationlab_client
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

赛事修复

Browse Source
dev_202412
yujialong 11 months ago
parent 85486b3a33
commit 3e4e9f5329
4 changed files with 564 additions and 622 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      src/pages/match/details/index.vue
  2. 4
      src/pages/match/list/index.vue
  3. 16
      src/pages/record/show/index.vue
  4. 420
      src/pages/station/preview/index.vue

30
src/pages/match/details/index.vue
Unescape View File

@ -76,7 +76,7 @@
</template> </template>
<template v-if="form.completeCompetitionSetup.competitionType"> <template v-if="form.completeCompetitionSetup.competitionType">
<p>每个团队参赛人数限制：{{ rule.customNumber || '不限制' }}</p> <p>每个团队参赛人数限制：{{ rule.teamNumLimit ? rule.customNumber : '不限制' }}</p>
<p>团队成绩计算方式：{{ teamCalculationMethods.find(e => e.id == rule.teamCalculationMethod) && <p>团队成绩计算方式：{{ teamCalculationMethods.find(e => e.id == rule.teamCalculationMethod) &&
teamCalculationMethods.find(e => e.id == rule.teamCalculationMethod).name }}</p> teamCalculationMethods.find(e => e.id == rule.teamCalculationMethod).name }}</p>
</template> </template>
@ -272,7 +272,8 @@
<th width="110">参赛人数限制</th> <th width="110">参赛人数限制</th>
<th> <th>
允许参赛人员 允许参赛人员
<el-tooltip v-if="stageTip" effect="dark" :content="stageTip" placement="bottom"> <el-tooltip v-if="stageTip" effect="dark" content="阶段参赛人员异常，请尽快按照阶段赛规则调整，否则可能影响比赛成绩！"
placement="bottom">
<i class="info el-icon-warning" style="margin-right: 10px;color: #ff1650;"></i> <i class="info el-icon-warning" style="margin-right: 10px;color: #ff1650;"></i>
</el-tooltip> </el-tooltip>
</th> </th>
@ -285,7 +286,7 @@
<td>{{ i + 1 }}</td> <td>{{ i + 1 }}</td>
<td>{{ item.stageName || form.name }}</td> <td>{{ item.stageName || form.name }}</td>
<template v-if="form.completeCompetitionSetup.competitionType"> <template v-if="form.completeCompetitionSetup.competitionType">
<td>{{ item.customNumber || '不限制' }}</td> <td>{{ item.teamNumLimit ? item.customNumber : '不限制' }}</td>
<td> <td>
<template v-if="item.participants"> <template v-if="item.participants">
<el-tag v-for="tag in item.participants" :key="tag.name" class="m-r-5 m-b-5" <el-tag v-for="tag in item.participants" :key="tag.name" class="m-r-5 m-b-5"
@ -296,7 +297,7 @@
<span v-else class="m-r-5">无</span> <span v-else class="m-r-5">无</span>
<i v-if="info.team.captain === 0 && status < 4" class="el-icon-edit icon" <i v-if="info.team.captain === 0 && status < 4" class="el-icon-edit icon"
@click="selectPar(item)"></i> @click="selectPar(item)"></i>
<el-tooltip v-if="stageTips.length && stageTips[i]" effect="dark" :content="stageTips[i]" <el-tooltip v-if="stageTip.length && stageTip[i]" effect="dark" :content="stageTip[i]"
placement="bottom"> placement="bottom">
<el-tag type="danger" class="m-l-5">异常</el-tag> <el-tag type="danger" class="m-l-5">异常</el-tag>
</el-tooltip> </el-tooltip>
@ -651,8 +652,7 @@ export default {
now: '', now: '',
allocated: 0, allocated: 0,
teamErrors: [], teamErrors: [],
stageTip: '', stageTip: null,
stageTips: [],
showButton: false, showButton: false,
assignRecord: {}, assignRecord: {},
allocating: false, allocating: false,
@ -911,9 +911,8 @@ export default {
teamId: this.info.teamId teamId: this.info.teamId
}) })
this.teamErrors = res.teamTip.split(';').filter(e => e) this.teamErrors = res.teamTip.split(';').filter(e => e)
if (res.stageTip) { if (Object.keys(res.stageTip)) {
this.stageTip = res.stageTip this.stageTip = res.stageTip
this.stageTips = res.stageTip.split(';').filter(e => e)
} }
}, },
// 编辑保存 // 编辑保存
@ -1211,8 +1210,8 @@ export default {
chooseSubmit () { chooseSubmit () {
const accountIds = this.checkedMembers const accountIds = this.checkedMembers
if (!accountIds.length) return Util.errorMsg('请选择参赛成员！') if (!accountIds.length) return Util.errorMsg('请选择参赛成员！')
const limit = this.curRow.teamNumLimit // 参赛人数限制 const { customNumber, teamNumLimit } = this.curRow // 参赛人数限制
if (limit && accountIds.length > limit) return Util.errorMsg(`请选择${this.curRow.customNumber}个以下参赛成员！`) // 选择的参赛人员个数不能大于参赛人数限制 if (teamNumLimit && accountIds.length > customNumber) return Util.errorMsg(`请选择${this.curRow.customNumber}个以下参赛成员！`) // 选择的参赛人员个数不能大于参赛人数限制
this.$post(this.api.stageSelectParticipants, { this.$post(this.api.stageSelectParticipants, {
accountIds, accountIds,
competitionId: this.id, competitionId: this.id,
@ -1324,10 +1323,10 @@ export default {
afterCreateTeam () { afterCreateTeam () {
// 赛事自动分配状态为开启，则直接提示；否则弹框询问是否要启用团队自动分配 // 赛事自动分配状态为开启，则直接提示；否则弹框询问是否要启用团队自动分配
if (this.allocated) { if (this.allocated) {
Util.successMsg('团队创建成功，系统将自动帮您分配阶段参赛成员，您也可以到参数信息进行指定') Util.successMsg('团队创建成功，系统将在报名结束后自动帮您分配阶段参赛成员，您也可以到参数信息进行指定')
} else { } else {
// 未分配 // 未分配
this.$confirm('是否要启用自动分配成员参加阶段赛项', '提示', { this.$confirm('报名成功！是否要启用自动分配成员参加阶段赛项？启用后，将在报名结束后给团队成员自动分配阶段参赛人员。', '提示', {
cancelButtonText: '否', cancelButtonText: '否',
confirmButtonText: '是', confirmButtonText: '是',
type: 'success', type: 'success',
@ -1348,7 +1347,12 @@ export default {
// 自动分配 // 自动分配
automaticAllocationMember () { automaticAllocationMember () {
const whether = this.assignRecord.assignOrNot && this.status < 3 const whether = this.assignRecord.assignOrNot && this.status < 3
this.$confirm(`确定${whether ? '取消' : ''}自动分配阶段成员`, '提示', { const tips = this.status < 3 ?
whether ?
'确定取消自动分配阶段成员？' :
'是否要启用自动分配成员参加阶段赛项？启用后，将在报名结束后给团队成员自动分配阶段参赛人员。'
: '确定立即自动分配阶段成员？'
this.$confirm(tips, '提示', {
cancelButtonText: '否', cancelButtonText: '否',
confirmButtonText: '是', confirmButtonText: '是',
type: 'success', type: 'success',

4
src/pages/match/list/index.vue
Unescape View File

@ -661,10 +661,10 @@ export default {
const res = await this.$post(`${this.api.viewEventAllocationInformation}?competitionId=${this.teamForm.competitionId}`) const res = await this.$post(`${this.api.viewEventAllocationInformation}?competitionId=${this.teamForm.competitionId}`)
// 赛事自动分配状态为开启，则直接提示；否则弹框询问是否要启用团队自动分配 // 赛事自动分配状态为开启，则直接提示；否则弹框询问是否要启用团队自动分配
if (res.data && res.data.assignOrNot) { if (res.data && res.data.assignOrNot) {
Util.successMsg('团队创建成功，系统将自动帮您分配阶段参赛成员，您也可以到参数信息进行指定') Util.successMsg('团队创建成功，系统将在报名结束后自动帮您分配阶段参赛成员，您也可以到参数信息进行指定')
} else { } else {
// 未分配 // 未分配
this.$confirm('是否要启用自动分配成员参加阶段赛项', '提示', { this.$confirm('报名成功！是否要启用自动分配成员参加阶段赛项？启用后，将在报名结束后给团队成员自动分配阶段参赛人员。', '提示', {
cancelButtonText: '否', cancelButtonText: '否',
confirmButtonText: '是', confirmButtonText: '是',
type: 'success', type: 'success',

16
src/pages/record/show/index.vue
Unescape View File

@ -263,16 +263,19 @@ export default {
let index = 1 let index = 1
e.lcRuleRecords.map((n, i) => { e.lcRuleRecords.map((n, i) => {
n.index = index n.index = index
// 下面几行是导出的时候后端需要的字段
e.assessmentPoint += `${index}.${n.name};${n.ruleOperation === '或' ? '\n或\n' : ''}`
e.referenceAnswer += `${index}.${n.ruleAnswer};${n.ruleOperation === '或' ? '\n或\n' : ''}`
if (!n.userAnswer) n.userAnswer = '未填写'
if (n.ruleOperation === '或') { if (n.ruleOperation === '或') {
index = 1 index = 1
} else { } else {
index++ index++
} }
e.assessmentPoint += `${i + 1}.${n.name}` })
e.referenceAnswer += `${i + 1}.${n.ruleAnswer}` e.lcStudentAnswer.map((n, i) => {
if (!n.userAnswer) n.userAnswer = '未填写' e.answer += `${i + 1}.${n.userAnswer};`
e.answer += `${i + 1}.${n.userAnswer}`
}) })
}) })
} else { // python系统显示图片（从userScores里取） } else { // python系统显示图片（从userScores里取）
@ -301,10 +304,9 @@ export default {
e.id = i + 1 e.id = i + 1
if (e.referenceAnswer && typeof e.referenceAnswer === 'string') e.referenceAnswer = e.referenceAnswer.replace(/<[^>]+>/g, '').replace(/(&nbsp;|&amp;|%s)/g, '').replace(/>/g, '&gt;').replace(/</g, '&lt;') if (e.referenceAnswer && typeof e.referenceAnswer === 'string') e.referenceAnswer = e.referenceAnswer.replace(/<[^>]+>/g, '').replace(/(&nbsp;|&amp;|%s)/g, '').replace(/>/g, '&gt;').replace(/</g, '&lt;')
if (e.answer && typeof e.answer === 'string') e.answer = e.answer.replace(/<[^>]+>/g, '').replace(/(&nbsp;|&amp;|%s)/g, '').replace(/>/g, '&gt;').replace(/</g, '&lt;') if (e.answer && typeof e.answer === 'string') e.answer = e.answer.replace(/<[^>]+>/g, '').replace(/(&nbsp;|&amp;|%s)/g, '').replace(/>/g, '&gt;').replace(/</g, '&lt;')
delete e.lcRuleRecords
delete e.lcStudentAnswer
}) })
// for (const i in form) {
// if (form[i] && typeof form[i] === 'string') form[i] = form[i].replace(/<[^>]+>/g, '')
// }
form.purpose = form.purpose.replace(/<[^>]+>/g, '') form.purpose = form.purpose.replace(/<[^>]+>/g, '')
this.$post(this.isLc ? this.api.exportBankExperimentReport : this.api.exportLabReport, { this.$post(this.isLc ? this.api.exportBankExperimentReport : this.api.exportLabReport, {
...form, ...form,

420
src/pages/station/preview/index.vue
Unescape View File

@ -2,153 +2,88 @@
<div class="wrap"> <div class="wrap">
<breadcrumb :routes.sync="routes" /> <breadcrumb :routes.sync="routes" />
<div class="flex"> <div class="flex">
<div class="cover" <div class="cover" :class="{ 'is-word': showMask1 }">
:class="{'is-word': showMask1}">
<!--实验台不显示课程封面--> <!--实验台不显示课程封面-->
<img v-if="coverUrl" <img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%">
:src="coverUrl"
alt=""
width="100%"
height="100%">
<template v-else-if="iframeSrc"> <template v-else-if="iframeSrc">
<iframe class="inner fileIframe" <iframe class="inner fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
id="fileIframe"
:src="iframeSrc"
frameborder="0"></iframe>
<template v-if="showMask"> <template v-if="showMask">
<div class="mask" <div class="mask" style="top: 0;width:100%;height: 48px;"></div>
style="top: 0;width:100%;height: 48px;"></div> <div class="mask" style="top: 53px;width:100%;height: 30px;"></div>
<div class="mask" <div class="mask" style="bottom: 0;right: 0;width:280px;height: 22px;background-color: #444;"></div>
style="top: 53px;width:100%;height: 30px;"></div>
<div class="mask"
style="bottom: 0;right: 0;width:280px;height: 22px;background-color: #444;"></div>
</template> </template>
<template v-if="showMask1"> <template v-if="showMask1">
<div class="word-mask" <div class="word-mask" style="height: 40px;"></div>
style="height: 40px;"></div> <div class="word-mask2" style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
<div class="word-mask2"
style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
</template> </template>
<template v-if="showMask2"> <template v-if="showMask2">
<div class="excel-mask1" <div class="excel-mask1" style="height: 48px;"></div>
style="height: 48px;"></div>
</template> </template>
</template> </template>
<div class="pdf" <div class="pdf" v-else-if="pdfSrc">
v-else-if="pdfSrc"> <img class="full" src="@/assets/img/screen/full.png" alt="" @click="fullScreen">
<img class="full"
src="@/assets/img/screen/full.png"
alt=""
@click="fullScreen">
<p class="arrow"> <p class="arrow">
<span @click="changePdfPage(0)" <span @click="changePdfPage(0)" class="turn el-icon-arrow-left" :class="{ grey: currentPage == 1 }"></span>
class="turn el-icon-arrow-left"
:class="{grey: currentPage==1}"></span>
{{ currentPage }} / {{ pageCount }} {{ currentPage }} / {{ pageCount }}
<span @click="changePdfPage(1)" <span @click="changePdfPage(1)" class="turn el-icon-arrow-right"
class="turn el-icon-arrow-right"
:class="{ grey: currentPage == pageCount }"></span> :class="{ grey: currentPage == pageCount }"></span>
</p> </p>
<div style='color:#393A3D;height: 30px;background: #393A3D;'></div> <div style='color:#393A3D;height: 30px;background: #393A3D;'></div>
<pdf class="pdf-wrap" <pdf class="pdf-wrap" :src="pdfSrc" :page="currentPage" @num-pages="pageCount = $event"
:src="pdfSrc" @page-loaded="currentPage = $event" @loaded="loadPdfHandler">
:page="currentPage"
@num-pages="pageCount=$event"
@page-loaded="currentPage=$event"
@loaded="loadPdfHandler">
</pdf> </pdf>
</div> </div>
<div class="inner" <div class="inner" v-else-if="playAuth">
v-else-if="playAuth"> <div class="video_wid" id="player"></div>
<div class="video_wid"
id="player"></div>
</div> </div>
<div class="inner" <div class="inner" v-else-if="videoSrc">
v-else-if="videoSrc"> <video class="video" :key="videoSrc" width="100%" height="100%" autoplay controls>
<video class="video" <source :src="videoSrc" type="video/mp4">
:key="videoSrc"
width="100%"
height="100%"
autoplay
controls>
<source :src="videoSrc"
type="video/mp4">
您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
</video> </video>
</div> </div>
</div> </div>
<div class="catalog"> <div class="catalog">
<el-button v-if="!overdue" <el-button v-if="!overdue" class="renew" type="primary" size="small" @click="showBuy">续费</el-button>
class="renew" <a v-else class="entry" @click="entry">进入实验</a>
type="primary"
size="small"
@click="showBuy">续费</el-button>
<a v-else
class="entry"
@click="entry">进入实验</a>
<div class="list"> <div class="list">
<h4 class="title">{{ curriculumName || courseName }}</h4> <h4 class="title">{{ curriculumName || courseName }}</h4>
<div> <div>
<h6 class="pro-title">我的学习进度</h6> <h6 class="pro-title">我的学习进度</h6>
<el-progress :stroke-width="12" <el-progress :stroke-width="12" :percentage="schedule" :format="percentFormat"
:percentage="schedule"
:format="percentFormat"
:text-color="'#fff'"></el-progress> :text-color="'#fff'"></el-progress>
</div> </div>
<div class="types"> <div class="types">
<div :class="['item', { active: type === 1 }]" <div :class="['item', { active: type === 1 }]" @click="typeChange(1)">
@click="typeChange(1)">
<i class="icon el-icon-notebook-2"></i> 目录 <i class="icon el-icon-notebook-2"></i> 目录
</div> </div>
<div :class="['item', { active: type === 2 }]" <div :class="['item', { active: type === 2 }]" @click="typeChange(2)">
@click="typeChange(2)">
<i class="icon el-icon-timer"></i> 学习进度 <i class="icon el-icon-timer"></i> 学习进度
</div> </div>
</div> </div>
<div class="chapters"> <div class="chapters">
<template v-if="type === 1"> <template v-if="type === 1">
<template v-if="chapterList.length"> <template v-if="chapterList.length">
<div class="chapter" <div class="chapter" v-for="(item, i) in chapterList" :key="i">
v-for="(item,index) in chapterList"
:key="index">
<div class="chapterName">{{ item.name }}</div> <div class="chapterName">{{ item.name }}</div>
<div class="section" <div class="section" v-if="item.subsectionList.length">
v-if="item.subsectionList.length"> <p class="sectionName" :class="{ active: curLink === `${item.name}${section.name}` }"
<p class="sectionName" v-for="(section, i) in item.subsectionList" :key="i" @click="preview(section, item.name)">
:class="{active: curLink === `${item.name}${section.name}`}" <img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt="">
v-for="(section,i) in item.subsectionList" <img v-else-if="section.fileType === 'mp4'" src="@/assets/img/exts/video.png" alt="">
:key="i"
@click="preview(section, item.name)">
<img v-if="section.fileType === 'pptx'"
src="@/assets/img/exts/ppt.png"
alt="">
<img v-else-if="section.fileType === 'mp4'"
src="@/assets/img/exts/video.png"
alt="">
<img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'" <img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'"
src="@/assets/img/exts/word.png" src="@/assets/img/exts/word.png" alt="">
alt=""> <img v-else-if="section.fileType === 'txt'" src="@/assets/img/exts/txt.png" alt="">
<img v-else-if="section.fileType === 'txt'" <img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt="">
src="@/assets/img/exts/txt.png" <img v-else src="@/assets/img/exts/pic.png" alt="">
alt="">
<img v-else-if="section.fileType === 'pdf'"
src="@/assets/img/exts/pdf.png"
alt="">
<img v-else
src="@/assets/img/exts/pic.png"
alt="">
{{ section.name }} {{ section.name }}
</p> </p>
</div> </div>
</div> </div>
</template> </template>
</template> </template>
<div v-else <div v-else class="section">
class="section"> <p class="sectionName" v-for="(item, i) in progressList" :key="i" :title="item.projectName">
<p class="sectionName"
v-for="(item, i) in progressList"
:key="i"
:title="item.projectName">
{{ i + 1 }}. {{ i + 1 }}.
{{ item.projectName }} {{ item.projectName }}
<i :class="['icon', item.whetherToStudyOrNot ? 'el-icon-success' : 'circle']" <i :class="['icon', item.whetherToStudyOrNot ? 'el-icon-success' : 'circle']"
@ -161,45 +96,30 @@
</div> </div>
<div class="tabs"> <div class="tabs">
<a class="item" <a class="item" v-for="(item, i) in tabs" :key="i" :class="{ active: item.id == active }"
v-for="(item, i) in tabs" @click="tabChange(item)">{{
:key="i" item.name }}</a>
:class="{active: item.id == active}"
@click="tabChange(item)">{{ item.name }}</a>
</div> </div>
<div class="flex"> <div class="flex">
<div class="tab-content"> <div class="tab-content">
<div v-if="active === 1" <div v-if="active === 1" class="page">
class="page"> <div class="des" v-html="briefIntroduction"></div>
<div class="des"
v-html="briefIntroduction"></div>
</div> </div>
<div v-if="active === 2" <div v-if="active === 2" class="page">
class="page">
<template v-if="showNoteAdd || !notes.length"> <template v-if="showNoteAdd || !notes.length">
<el-form class="form" <el-form class="form" ref="form" label-width="120px" center>
ref="form" <el-form-item class="required" label="笔记标题">
label-width="120px" <el-input placeholder="请输入笔记标题" v-model="noteForm.noteName" maxlength="30"
center>
<el-form-item class="required"
label="笔记标题">
<el-input placeholder="请输入笔记标题"
v-model="noteForm.noteName"
maxlength="30"
style="width: 400px"></el-input> style="width: 400px"></el-input>
</el-form-item> </el-form-item>
<el-form-item class="required" <el-form-item class="required" label="笔记内容">
label="笔记内容"> <Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="noteForm.noteContent"
<Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda'
v-model="noteForm.noteContent"
:init="editorConfig" /> :init="editorConfig" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="text-right"> <div class="text-right">
<el-button v-if="notes.length" <el-button v-if="notes.length" @click="showNoteAdd = false">取消</el-button>
@click="showNoteAdd = false">取消</el-button> <el-button type="primary" @click="submitNote">保存</el-button>
<el-button type="primary"
@click="submitNote">保存</el-button>
</div> </div>
</template> </template>
<template v-else> <template v-else>
@ -207,71 +127,49 @@
<ul class="filter"> <ul class="filter">
<li> <li>
<label>搜索：</label> <label>搜索：</label>
<el-input placeholder="请输入标题" <el-input placeholder="请输入标题" v-model="noteKeyword" clearable></el-input>
v-model="noteKeyword"
clearable></el-input>
</li> </li>
</ul> </ul>
<div> <div>
<el-button type="primary" <el-button type="primary" @click="addNote">新增笔记</el-button>
@click="addNote">新增笔记</el-button>
</div> </div>
</div> </div>
<el-timeline class="timeline"> <el-timeline class="timeline">
<el-timeline-item placement="top" <el-timeline-item placement="top" v-for="(item, i) in notes" :key="i">
v-for="(item, i) in notes"
:key="i">
<p class="sign">{{ item.createTime }}</p> <p class="sign">{{ item.createTime }}</p>
<div class="ver"> <div class="ver">
{{ item.noteName }} {{ item.noteName }}
<span class="action"> <span class="action">
<i class="el-icon-edit-outline" <i class="el-icon-edit-outline" @click="editNote(item)"></i>
@click="editNote(item)"></i> <i class="el-icon-delete" @click="delNote(item)"></i>
<i class="el-icon-delete"
@click="delNote(item)"></i>
</span> </span>
</div> </div>
<div class="des" <div class="des" v-html="item.noteContent"></div>
v-html="item.noteContent"></div>
</el-timeline-item> </el-timeline-item>
</el-timeline> </el-timeline>
</template> </template>
</div> </div>
<div v-if="active === 4" <div v-if="active === 4" class="page">
class="page"> <quill ref="quill" :border="true" v-model="comment" :height="150" :toTop="false" />
<quill ref="quill"
:border="true"
v-model="comment"
:height="150"
:toTop="false" />
<div class="m-t-10 text-right"> <div class="m-t-10 text-right">
<el-button type="primary" <el-button type="primary" size="mini" @click="submitComment(0)">提交</el-button>
size="mini"
@click="submitComment(0)">提交</el-button>
</div> </div>
<ul class="msg"> <ul class="msg">
<li v-for="(item, i) in comments" <li v-for="(item, i) in comments" :key="i" :id="'comment' + item.commentId">
:key="i"
:id="'comment' + item.commentId">
<div class="li-wrap"> <div class="li-wrap">
<img :src="item.createUserAvatars" <img :src="item.createUserAvatars" alt="" class="avatar">
alt=""
class="avatar">
<div class="texts"> <div class="texts">
<h6> <h6>
<span class="name">{{ item.createUsername }}</span> <span class="name">{{ item.createUsername }}</span>
发表于 {{ item.createTime }} 发表于 {{ item.createTime }}
</h6> </h6>
<div class="m-t-8" <div class="m-t-8" v-html="item.content"></div>
v-html="item.content"></div>
</div> </div>
<div class="action"> <div class="action">
<i class="icon el-icon-chat-dot-square" <i class="icon el-icon-chat-dot-square" @click="showReplay(item)"></i>
@click="showReplay(item)"></i>
<!-- 当前用户是管理员 || 当前用户的account==该条评论的创建人accountId --> <!-- 当前用户是管理员 || 当前用户的account==该条评论的创建人accountId -->
<i v-if="(item.currentRoleName && item.currentRoleName.includes('管理员')) || item.currentAccountId == item.createAccountId" <i v-if="(item.currentRoleName && item.currentRoleName.includes('管理员')) || item.currentAccountId == item.createAccountId"
class="icon el-icon-delete" class="icon el-icon-delete" @click="delComment(item)"></i>
@click="delComment(item)"></i>
<!-- <div class="like-wrap" <!-- <div class="like-wrap"
@click="like($event, item)"> @click="like($event, item)">
<img v-if="item.isLike" <img v-if="item.isLike"
@ -286,27 +184,16 @@
</div> --> </div> -->
</div> </div>
</div> </div>
<div class="reply" <div class="reply" v-if="item.showReply">
v-if="item.showReply"> <quill :border="true" v-model="item.replyContent" :toTop="false" :height="150" />
<quill :border="true"
v-model="item.replyContent"
:toTop="false"
:height="150" />
<div class="m-t-10 text-right"> <div class="m-t-10 text-right">
<el-button type="primary" <el-button type="primary" size="mini" @click="submitComment(item)">提交</el-button>
size="mini"
@click="submitComment(item)">提交</el-button>
</div> </div>
</div> </div>
<ul class="msg children" <ul class="msg children" v-if="item.showChildren">
v-if="item.showChildren"> <li v-for="(reply, i) in item.children" :key="i" :id="'comment' + reply.commentId">
<li v-for="(reply,i) in item.children"
:key="i"
:id="'comment' + reply.commentId">
<div class="li-wrap"> <div class="li-wrap">
<img class="avatar" <img class="avatar" :src="reply.createUserAvatars" alt="">
:src="reply.createUserAvatars"
alt="">
<div class="texts"> <div class="texts">
<div class="name">{{ reply.createUsername }}</div> <div class="name">{{ reply.createUsername }}</div>
<div class="flex m-v-8"> <div class="flex m-v-8">
@ -314,18 +201,15 @@
回复 回复
<span class="reply-name">@{{ reply.replyUsername }}：</span> <span class="reply-name">@{{ reply.replyUsername }}：</span>
</template> </template>
<div class="des" <div class="des" v-html="reply.content"></div>
v-html="reply.content"></div>
</div> </div>
<div class="date">{{ reply.createTime }}</div> <div class="date">{{ reply.createTime }}</div>
</div> </div>
<div class="action"> <div class="action">
<i class="icon el-icon-chat-dot-square" <i class="icon el-icon-chat-dot-square" @click="showReplay(reply)"></i>
@click="showReplay(reply)"></i>
<!-- 当前用户是管理员 || 当前用户的account==该条评论的创建人accountId --> <!-- 当前用户是管理员 || 当前用户的account==该条评论的创建人accountId -->
<i v-if="(reply.currentRoleName && reply.currentRoleName.includes('管理员')) || reply.currentAccountId == reply.createAccountId" <i v-if="(reply.currentRoleName && reply.currentRoleName.includes('管理员')) || reply.currentAccountId == reply.createAccountId"
class="icon el-icon-delete" class="icon el-icon-delete" @click="delComment(reply)"></i>
@click="delComment(reply)"></i>
<!-- <div class="like-wrap" <!-- <div class="like-wrap"
@click="like($event, item, reply)"> @click="like($event, item, reply)">
<img v-if="reply.isLike" <img v-if="reply.isLike"
@ -340,97 +224,64 @@
</div> --> </div> -->
</div> </div>
</div> </div>
<div class="reply" <div class="reply" v-if="reply.showReply">
v-if="reply.showReply"> <quill :border="true" v-model="reply.replyContent" :toTop="false" :height="150" />
<quill :border="true"
v-model="reply.replyContent"
:toTop="false"
:height="150" />
<div class="m-t-10 text-right"> <div class="m-t-10 text-right">
<el-button type="primary" <el-button type="primary" size="mini" @click="submitComment(item, reply)">提交</el-button>
size="mini"
@click="submitComment(item, reply)">提交</el-button>
</div> </div>
</div> </div>
</li> </li>
</ul> </ul>
<div v-if="item.children" <div v-if="item.children" class="toggle"><span @click="item.showChildren = !item.showChildren">{{
class="toggle"><span @click="item.showChildren = !item.showChildren">{{item.showChildren ? '收起所有回复' : `查看所有${item.children.length}条回复`}} <i class="el-icon-arrow-down"></i></span></div> item.showChildren ? '收起所有回复' :
`查看所有${item.children.length}条回复`}} <i class="el-icon-arrow-down"></i></span></div>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="rank"> <div class="rank">
<h6 class="title">练习成绩排行</h6> <h6 class="title">练习成绩排行</h6>
<el-select style="width: 100%" <el-select style="width: 100%" v-model="archProject" placeholder="请选择" @change="getMaximumScore">
v-model="archProject" <el-option v-for="(item, i) in progressList" :key="i" :label="item.projectName"
placeholder="请选择"
@change="getMaximumScore">
<el-option v-for="(item, i) in progressList"
:key="i"
:label="item.projectName"
:value="item.projectId"></el-option> :value="item.projectId"></el-option>
</el-select> </el-select>
<div v-if="maximumScores.length" <div v-if="maximumScores.length" class="arches">
class="arches"> <div v-for="(item, i) in maximumScores" :key="i" class="line">
<div v-for="(item, i) in maximumScores"
:key="i"
class="line">
<div> <div>
<img :src="item.userAvatars" <img :src="item.userAvatars" alt="" class="avatar">
alt=""
class="avatar">
<span class="name">{{ item.userName }}</span> <span class="name">{{ item.userName }}</span>
</div> </div>
<span class="point">{{ item.highestScore }}分</span> <span class="point">{{ item.highestScore }}分</span>
</div> </div>
</div> </div>
<p v-else <p v-else class="none">暂无数据</p>
class="none">暂无数据</p>
</div> </div>
</div> </div>
<el-dialog title="请选择项目" <el-dialog title="请选择项目" v-loading="loading" :visible.sync="projectVisible" width="828px" custom-class="project-dia"
v-loading="loading"
:visible.sync="projectVisible"
width="828px"
custom-class="project-dia"
:close-on-click-modal="false"> :close-on-click-modal="false">
<ul class="projects"> <ul class="projects">
<li v-for="(item, i) in projects" <li v-for="(item, i) in projects" :key="i" :class="{ active: curProject == item.projectId }"
:key="i"
:class="{active: curProject == item.projectId}"
@click="selectProject(item)"> @click="selectProject(item)">
<img src="@/assets/img/project.png" <img src="@/assets/img/project.png" alt="">
alt="">
<span>{{ i + 1 }}. {{ item.projectName }}</span> <span>{{ i + 1 }}. {{ item.projectName }}</span>
</li> </li>
</ul> </ul>
<span slot="footer" <span slot="footer" class="dialog-footer">
class="dialog-footer"> <el-button size="small" @click="projectVisible = false">取 消</el-button>
<el-button size="small" <el-button size="small" type="primary" @click="toSub">确 定</el-button>
@click="projectVisible = false">取 消</el-button>
<el-button size="small"
type="primary"
@click="toSub">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
<!-- 购买弹框 --> <!-- 购买弹框 -->
<el-dialog title="温馨提示" <el-dialog title="温馨提示" :visible.sync="buyVisible" width="420px" center :close-on-click-modal="false">
:visible.sync="buyVisible"
width="420px"
center
:close-on-click-modal="false">
<div class="buy"> <div class="buy">
<p class="tips">该课程订阅期限已到期，请联系院校管理员续费</p> <p class="tips">该课程订阅期限已到期，请联系院校管理员续费</p>
</div> </div>
</el-dialog> </el-dialog>
<pdfDia :key="pdfVisible" <pdfDia :key="pdfVisible" :visible.sync="pdfVisible" :src.sync="pdfSrc" />
:visible.sync="pdfVisible"
:src.sync="pdfSrc" />
</div> </div>
</template> </template>
@ -1036,6 +887,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../../styles/page/station.scss'; @import '../../../styles/page/station.scss';
$height: 700px; $height: 700px;
.video_wid, .video_wid,
.cover { .cover {
position: relative; position: relative;
@ -1043,9 +895,11 @@ $height: 700px;
height: $height !important; height: $height !important;
border: 0; border: 0;
} }
.page { .page {
/deep/.des { /deep/.des {
overflow: auto; overflow: auto;
div, div,
p, p,
span { span {
@ -1053,22 +907,28 @@ $height: 700px;
} }
} }
} }
.l-title { .l-title {
font-size: 17px; font-size: 17px;
} }
.cover { .cover {
flex: 1; flex: 1;
background-color: #252528; background-color: #252528;
img { img {
border-radius: 8px; border-radius: 8px;
} }
&.is-word { &.is-word {
overflow: hidden; overflow: hidden;
} }
} }
.fileIframe { .fileIframe {
height: $height !important; height: $height !important;
} }
.video_wid, .video_wid,
.inner { .inner {
width: 100%; width: 100%;
@ -1076,25 +936,30 @@ $height: 700px;
border: 0; border: 0;
overflow: auto; overflow: auto;
} }
.cover.is-word { .cover.is-word {
.inner { .inner {
height: calc(100% + 38px) !important; height: calc(100% + 38px) !important;
margin-top: -38px; margin-top: -38px;
} }
} }
.video_wid:focus { .video_wid:focus {
outline: none; outline: none;
} }
.catalog { .catalog {
width: 296px; width: 296px;
padding: 16px; padding: 16px;
margin-left: 12px; margin-left: 12px;
background-color: #252528; background-color: #252528;
.renew { .renew {
width: 100%; width: 100%;
margin-bottom: 16px; margin-bottom: 16px;
font-size: 17px; font-size: 17px;
} }
.entry { .entry {
display: block; display: block;
width: 100%; width: 100%;
@ -1106,13 +971,16 @@ $height: 700px;
line-height: 34px; line-height: 34px;
background: url(../../../assets/img/entry.png) 0 0/100% 100% no-repeat; background: url(../../../assets/img/entry.png) 0 0/100% 100% no-repeat;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: 0.9; opacity: 0.9;
} }
} }
.types { .types {
display: flex; display: flex;
margin: 15px 0; margin: 15px 0;
.item { .item {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
@ -1123,53 +991,66 @@ $height: 700px;
background-color: #4e4e4e; background-color: #4e4e4e;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
&:first-child { &:first-child {
margin-right: 10px; margin-right: 10px;
} }
&:hover { &:hover {
background-color: #377be3; background-color: #377be3;
} }
&.active { &.active {
background-color: $main-color; background-color: $main-color;
} }
} }
.icon { .icon {
margin-right: 5px; margin-right: 5px;
font-size: 18px; font-size: 18px;
} }
} }
} }
.list { .list {
height: calc(700px - 82px); height: calc(700px - 82px);
overflow-y: auto; overflow-y: auto;
.title { .title {
margin-bottom: 11px; margin-bottom: 11px;
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
} }
.pro-title { .pro-title {
margin-bottom: 5px; margin-bottom: 5px;
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
} }
/deep/.el-progress-bar { /deep/.el-progress-bar {
width: 92%; width: 92%;
} }
/deep/.el-progress__text { /deep/.el-progress__text {
color: #fff; color: #fff;
} }
.desc-wrap { .desc-wrap {
position: relative; position: relative;
.desc { .desc {
font-size: 12px; font-size: 12px;
color: rgba(0, 0, 0, 0.65); color: rgba(0, 0, 0, 0.65);
line-height: 22px; line-height: 22px;
@include mul-ellipsis(2); @include mul-ellipsis(2);
&.active { &.active {
display: block; display: block;
overflow: visible; overflow: visible;
} }
} }
.arrow { .arrow {
position: absolute; position: absolute;
bottom: 2px; bottom: 2px;
@ -1178,41 +1059,50 @@ $height: 700px;
justify-content: space-between; justify-content: space-between;
width: 46px; width: 46px;
background-color: #fff; background-color: #fff;
span { span {
font-size: 14px; font-size: 14px;
color: rgba(0, 0, 0, 0.65); color: rgba(0, 0, 0, 0.65);
} }
img { img {
width: 16px; width: 16px;
cursor: pointer; cursor: pointer;
} }
&.active { &.active {
span { span {
opacity: 0; opacity: 0;
} }
img { img {
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
} }
} }
.chapters { .chapters {
margin-top: 16px; margin-top: 16px;
max-height: calc(100% - 53px); max-height: calc(100% - 53px);
overflow: auto; overflow: auto;
} }
.chapter { .chapter {
margin-bottom: 20px; margin-bottom: 20px;
} }
.chapterName { .chapterName {
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
} }
.section { .section {
padding: 5px 15px; padding: 5px 15px;
margin-top: 12px; margin-top: 12px;
background-color: #121214; background-color: #121214;
} }
.sectionName { .sectionName {
position: relative; position: relative;
padding-right: 15px; padding-right: 15px;
@ -1221,36 +1111,44 @@ $height: 700px;
color: #999; color: #999;
cursor: pointer; cursor: pointer;
@include ellipsis; @include ellipsis;
img { img {
margin-right: 8px; margin-right: 8px;
} }
.icon { .icon {
position: absolute; position: absolute;
right: 0; right: 0;
font-size: 14px; font-size: 14px;
color: #00c935; color: #00c935;
} }
.circle { .circle {
width: 14px; width: 14px;
height: 14px; height: 14px;
border-radius: 50%; border-radius: 50%;
border: 1px solid #ccc; border: 1px solid #ccc;
} }
&.active { &.active {
color: #fff; color: #fff;
} }
} }
} }
.buy { .buy {
text-align: center; text-align: center;
.tips { .tips {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 14px; font-size: 14px;
} }
img { img {
width: 85%; width: 85%;
} }
} }
.el-image-viewer__wrapper { .el-image-viewer__wrapper {
transform: translateY(-10px); transform: translateY(-10px);
transition: transform 0.5s; transition: transform 0.5s;
@ -1259,19 +1157,23 @@ $height: 700px;
transform: translateY(0); transform: translateY(0);
} }
} }
.el-image-viewer__close { .el-image-viewer__close {
z-index: 2000; z-index: 2000;
top: 15px; top: 15px;
right: 15px; right: 15px;
&.doc-close { &.doc-close {
i { i {
color: #000 !important; color: #000 !important;
} }
} }
} }
.list::-webkit-scrollbar { .list::-webkit-scrollbar {
width: 4px; width: 4px;
} }
.list::-webkit-scrollbar-thumb { .list::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: 10px;
background: rgba(0, 0, 0, 0.06); background: rgba(0, 0, 0, 0.06);
@ -1282,6 +1184,7 @@ $height: 700px;
position: absolute; position: absolute;
background-color: rgb(57, 58, 61); background-color: rgb(57, 58, 61);
} }
.word-mask { .word-mask {
z-index: 9; z-index: 9;
position: absolute; position: absolute;
@ -1290,6 +1193,7 @@ $height: 700px;
width: 100%; width: 100%;
background-color: rgb(243, 242, 241); background-color: rgb(243, 242, 241);
} }
.word-mask1 { .word-mask1 {
z-index: 9; z-index: 9;
position: absolute; position: absolute;
@ -1298,11 +1202,13 @@ $height: 700px;
width: 100%; width: 100%;
background-color: #185abd; background-color: #185abd;
} }
.word-mask2 { .word-mask2 {
z-index: 9; z-index: 9;
position: absolute; position: absolute;
background-color: transparent; background-color: transparent;
} }
.excel-mask1 { .excel-mask1 {
z-index: 9; z-index: 9;
position: absolute; position: absolute;
@ -1311,30 +1217,38 @@ $height: 700px;
width: 60%; width: 60%;
background-color: #107c41; background-color: #107c41;
} }
/deep/.pdf-dia { /deep/.pdf-dia {
border-radius: 0 !important; border-radius: 0 !important;
.el-dialog__header { .el-dialog__header {
display: none; display: none;
} }
.el-dialog__body { .el-dialog__body {
padding: 0; padding: 0;
} }
.el-dialog__headerbtn { .el-dialog__headerbtn {
top: 10px; top: 10px;
.el-dialog__close { .el-dialog__close {
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
} }
} }
} }
.pdf { .pdf {
position: relative; position: relative;
.full { .full {
position: absolute; position: absolute;
top: 7px; top: 7px;
right: 10px; right: 10px;
cursor: pointer; cursor: pointer;
} }
.arrow { .arrow {
padding: 10px 0; padding: 10px 0;
display: flex; display: flex;
@ -1343,27 +1257,32 @@ $height: 700px;
font-size: 16px; font-size: 16px;
color: #fff; color: #fff;
background-color: #333; background-color: #333;
.turn { .turn {
margin: 0 10px; margin: 0 10px;
font-size: 18px; font-size: 18px;
cursor: pointer; cursor: pointer;
} }
} }
.pdf-wrap { .pdf-wrap {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
} }
} }
/deep/.project-dia { /deep/.project-dia {
.el-dialog__body { .el-dialog__body {
padding: 28px 32px; padding: 28px 32px;
} }
} }
.projects { .projects {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
max-height: 400px; max-height: 400px;
overflow: auto; overflow: auto;
li { li {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -1373,21 +1292,26 @@ $height: 700px;
background-color: #f6f8fa; background-color: #f6f8fa;
border-radius: 16px; border-radius: 16px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
span { span {
color: #007eff; color: #007eff;
} }
} }
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
&.active { &.active {
background-color: #f2f7ff; background-color: #f2f7ff;
span { span {
color: #3988ff; color: #3988ff;
} }
} }
} }
span { span {
max-width: 140px; max-width: 140px;
margin-left: 14px; margin-left: 14px;
@ -1395,10 +1319,12 @@ $height: 700px;
color: #333; color: #333;
} }
} }
.tabs { .tabs {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 10px 0; margin: 10px 0;
.item { .item {
padding: 0 10px; padding: 0 10px;
margin-right: 16px; margin-right: 16px;
@ -1408,46 +1334,55 @@ $height: 700px;
line-height: 50px; line-height: 50px;
border-bottom: 3px solid transparent; border-bottom: 3px solid transparent;
cursor: pointer; cursor: pointer;
&.active { &.active {
color: #007eff; color: #007eff;
border-color: #007eff; border-color: #007eff;
} }
} }
} }
.tab-content { .tab-content {
width: calc(100% - 308px); width: calc(100% - 308px);
} }
.rank { .rank {
width: 296px; width: 296px;
padding: 20px; padding: 20px;
margin-left: 12px; margin-left: 12px;
background-color: #fff; background-color: #fff;
.title { .title {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 15px; font-size: 15px;
font-weight: 400; font-weight: 400;
} }
.arches { .arches {
max-height: 223px; max-height: 223px;
padding-right: 10px; padding-right: 10px;
margin-top: 20px; margin-top: 20px;
overflow: auto; overflow: auto;
} }
.line { .line {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
} }
.avatar { .avatar {
width: 35px; width: 35px;
height: 35px; height: 35px;
margin-right: 10px; margin-right: 10px;
} }
.point { .point {
font-weight: 600; font-weight: 600;
color: #007eff; color: #007eff;
} }
.none { .none {
margin-top: 10px; margin-top: 10px;
text-align: center; text-align: center;
@ -1455,6 +1390,7 @@ $height: 700px;
color: #727272; color: #727272;
} }
} }
@media (max-width: 1700px) { @media (max-width: 1700px) {
.wrap { .wrap {
padding: 12px 5% 20px; padding: 12px 5% 20px;

Write Preview
Loading…
Cancel
Save