You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
836 lines
28 KiB
836 lines
28 KiB
<template> |
|
<div class="panel"> |
|
<el-container class="scrollbar" v-if="pannelVisible"> |
|
<el-header> |
|
<div class="panel-header"> |
|
<div class="project"> |
|
<p>实训项目</p> |
|
<el-select |
|
v-model="projectId" |
|
placeholder="请选择" |
|
class="select" |
|
:disabled="projectPermissions != 0" |
|
@change="selectProject" |
|
style="flex: 1" |
|
> |
|
<el-option |
|
v-for="item in projectList" |
|
:key="item.projectId" |
|
:label="item.projectName" |
|
:value="item.projectId" |
|
></el-option> |
|
</el-select> |
|
</div> |
|
<div class="item"> |
|
<div class="count"> |
|
实训{{text}}时间 |
|
<span>{{day}}</span>天 |
|
<span>{{hour}}</span>小时 |
|
<span>{{minutes}}</span>分 |
|
<span>{{seconds}}</span>秒 |
|
</div> |
|
</div> |
|
<div class="item"> |
|
<div> |
|
总得分： |
|
<span class="total-score">{{grade}}</span> |
|
</div> |
|
</div> |
|
<div> |
|
<el-button class="reload" @click="reload" v-show="projectPermissions == 0">重新开始</el-button> |
|
<el-button type="primary" class="submit btn" @click="confirmSubmit" :disabled="isSubmit || !projectList.length">提交</el-button> |
|
</div> |
|
</div> |
|
</el-header> |
|
<el-container> |
|
<el-aside width="30%"> |
|
<div class="aside-header"> |
|
<div :class="['p-title color', 'system' + systemId]"> |
|
<i class="el-icon-s-order"></i> |
|
<p>实验目标</p> |
|
</div> |
|
<div class="goal"> |
|
<div class="break-all" v-html="experimentTarget"></div> |
|
</div> |
|
</div> |
|
<div class="aside-footer"> |
|
<div :class="['p-title color', 'system' + systemId]"> |
|
<i class="el-icon-s-management"></i> |
|
<p>实验任务</p> |
|
</div> |
|
<div> |
|
<el-row> |
|
<el-col :span="24"> |
|
<el-card shadow="hover"> |
|
<el-table :data="taskList" :stripe="true"> |
|
<el-table-column type="index"></el-table-column> |
|
<el-table-column prop="name" label="判分点" align="center"></el-table-column> |
|
<el-table-column prop="score" label="分值" width="60" align="center"></el-table-column> |
|
<el-table-column label="结果" width="60" align="center"> |
|
<template slot-scope="scope"> |
|
<template v-if="isSubmit"> |
|
<i |
|
v-if="scope.row.finishedResult" |
|
class="el-icon-check right" |
|
></i> |
|
<i |
|
v-else |
|
class="el-icon-close wrong" |
|
></i> |
|
</template> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="score" label="得分" width="60" align="center"> |
|
<template slot-scope="scope"> |
|
<template v-if="isSubmit">{{ scope.row.examScore }}</template> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</el-card> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
</div> |
|
</el-aside> |
|
<el-main> |
|
<el-tabs v-model="pannelTab" type="card"> |
|
<el-tab-pane label="案例" name="first"> |
|
<div class="break-all des" v-html="experimentDescription"></div> |
|
</el-tab-pane> |
|
<el-tab-pane label="实验要求" name="second"> |
|
<el-collapse v-model="curReq"> |
|
<el-collapse-item v-for="item in points" :name="item.judgmentId" :key="item.judgmentId"> |
|
<template slot="title"> |
|
<i class="el-icon-s-ticket"></i> |
|
<div class="break-all des" v-html="item.name"></div> |
|
</template> |
|
<div class="break-all des" v-html="item.experimentalRequirements"></div> |
|
</el-collapse-item> |
|
</el-collapse> |
|
</el-tab-pane> |
|
<el-tab-pane label="实验提示" name="fifth" v-if="hintOpen"> |
|
<div class="break-all des" v-html="experimentHint"></div> |
|
</el-tab-pane> |
|
</el-tabs> |
|
</el-main> |
|
</el-container> |
|
</el-container> |
|
|
|
<div :class="['toggle-panel', {active: pannelVisible}]"> |
|
<div @click="togglePannel"> |
|
<img :src="require(`@/assets/images/system/${$config.defaultSystem}/left.png`)" alt class="c-p" v-if="pannelVisible" /> |
|
<img :src="require(`@/assets/images/system/${$config.defaultSystem}/right.png`)" alt class="c-p" v-if="!pannelVisible" /> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import newmain from "../util/newMain"; |
|
import util from '@/util' |
|
import Config from '@/config' |
|
import Cookie from 'js-cookie' |
|
export default { |
|
data() { |
|
return { |
|
token: Cookie.get('admin-token'), |
|
systemId: Cookie.get('admin-systemId') || 1, |
|
classId: Cookie.get('admin-classId'), |
|
className: Cookie.get('admin-className') ? decodeURI(Cookie.get('admin-className')) : '', |
|
courseId: Cookie.get('admin-courseId'), |
|
projectId: Cookie.get('admin-projectId') ? Number(Cookie.get('admin-projectId')) : '', |
|
assessmentId: Cookie.get('admin-assessmentId'), |
|
curriculumName: Cookie.get('admin-curriculumName') ? unescape(Cookie.get('admin-curriculumName')) : 'python', // 课程名称 |
|
curSystemId: 1, |
|
projectPermissions: 0, // 项目权限(0、练习 1、考核 2、竞赛) |
|
isSubmit: false, // 是否提交的标识 |
|
entryTime: new Date(), |
|
startTime: Cookie.get('admin-startTime'), |
|
endTime: Cookie.get('admin-stopTime'), |
|
pannelVisible: true, // 实验面板显示标识 |
|
grade: '00', // 得分 |
|
text: '', // 倒计时前面的文字，练习：所用；考核：剩余。练习是计时，考核是倒计时 |
|
counterTimer: null, // 获取setInterval对象值 |
|
day: 0, // 天数 |
|
seconds: 0, // 秒数 |
|
minutes: 0, // 分钟数 |
|
hour: 0, // 小时数 |
|
projectList: [], // 项目列表 |
|
experimentTarget: '', //实验目标 |
|
experimentDescription: '', //案例描述 |
|
experimentHint: '', //实验提示 |
|
hintOpen: 1, // 是否显示实验提示 |
|
points: [], // 判分点列表 |
|
judgmentId: '', // 当前判分点id |
|
curReq: [], // 当前实验要求 |
|
taskList: [], // 实验任务列表 |
|
pannelTab: 'first', // 面板信息切换值 |
|
isSelected: false, // 是否选择过项目的标识，选择了会置为true |
|
statusTimer: null // 查询考核状态定时器 |
|
}; |
|
}, |
|
mounted() { |
|
this.projectPermissions = this.assessmentId ? 1 : 0 // 1：考核，0：练习 |
|
if(this.assessmentId){ // 考核（考核才会从外面带进来assessmentId，练习是默认显示第一个项目) |
|
this.getAssList() |
|
}else{ // 练习 |
|
// 获取项目列表 |
|
this.getList().then(() => { |
|
let cache = localStorage.getItem('codeCache') // 获取本地缓存 |
|
// 如果有缓存，再调接口取上次运行的代码 |
|
if (cache) { |
|
this.getCache(JSON.parse(cache)) |
|
} else { |
|
this.getCache() |
|
} |
|
}).catch(res => {}) |
|
} |
|
}, |
|
methods: { |
|
// 获取项目列表 |
|
getList(){ |
|
let data = { |
|
systemId: this.systemId, |
|
cId: this.courseId, // 课程id |
|
permissions: this.projectPermissions // 练习/考核 |
|
} |
|
return new Promise((resolve, reject) => { |
|
this.$get(`${this.api.queryTestProject}`,data).then(res => { |
|
const list = res.projects |
|
this.projectList = list |
|
if (!this.projectPermissions && !this.projectId) this.projectId = list ? list[0].projectId : 0 // 默认取第一个项目 |
|
this.getProDetail().then(() => { |
|
resolve() |
|
}).catch(res => { |
|
reject() |
|
}) |
|
}).catch(res => { |
|
reject() |
|
}) |
|
}) |
|
}, |
|
// 获取项目详情 |
|
getProDetail() { |
|
const projectId = this.projectId |
|
return new Promise((resolve, reject) => { |
|
this.$get(this.api.getProjectDetail, { |
|
projectId, |
|
stuAssessent: 1 |
|
}).then(res => { |
|
const points = res.projectJudgmentVos |
|
const project = res.projectManage |
|
const curReq = [] |
|
// 跳转银行 |
|
if (project.systemId == 11) { |
|
return location.href = `${Config.bankPath}/#/index/list?curriculumName=${this.curriculumName}&token=${this.token}&cid=${this.courseId}&systemId=${this.systemId}&projectId=${projectId}&assessmentId=&classId=&stopTime=&test=true` |
|
} |
|
if (!points.length) { |
|
this.$message.error('该项目没有判分点，请换个项目重试') |
|
this.projectId = this.projectList[0].projectId |
|
this.getProDetail() |
|
} |
|
points.map((e, i) => { |
|
e.code = '' // 后端返回的字段没有code，要手动加上以存储运行的代码 |
|
e.codeId = '' // 代码通过接口传给后端运行后，接口会返回一个codeId，提交的时候需要传这个codeId |
|
e.answer = '' // 代码运行结果 |
|
e.retResult = '' // 返回结果(1为正确 0为错误) |
|
curReq.push(e.judgmentId) |
|
}) |
|
if (this.projectPermissions) { |
|
this.projectList = [{ |
|
projectId, |
|
projectName: project.projectName |
|
}] |
|
} |
|
const { systemId } = project |
|
this.curSystemId = systemId |
|
this.$parent.getModelStatus(systemId) |
|
this.curReq = curReq // 实验要求默认全部展开，通过judgmentId来选中item |
|
this.points = points |
|
this.taskList = points // 实验任务 |
|
this.judgmentId = points[0].judgmentId // 默认取第一个判分点 |
|
this.experimentTarget = project.experimentTarget |
|
this.experimentDescription = project.experimentDescription |
|
this.experimentHint = project.experimentHint |
|
this.hintOpen = !res.projectManage.hintOpen // 0显示，1不显示 |
|
this.$emit('tell', projectId, systemId, this.points) |
|
const isAss = this.projectPermissions == 1 // 是否是考核 |
|
this.text = isAss ? '剩余' : '已用' |
|
this.countVal = isAss ? (new Date(this.endTime).getTime() - Date.now()) / 1000 : 0 // 如果是考核，取考核的结束时间减去当前时间去做倒计时，练习则直接给0做计时 |
|
this.startCount() |
|
resolve() |
|
}).catch(err => { |
|
reject() |
|
}) |
|
}) |
|
}, |
|
// 关闭父页面的loading，并置加载完成状态为true |
|
closeLoad() { |
|
this.$parent.loadIns.close() |
|
this.$parent.loaded = true |
|
}, |
|
// 获取考核列表来查询该考核是否已经考过 |
|
getAssList(){ |
|
this.$post(`${this.api.pageStuAssessment}`, { |
|
pageNum: 1, |
|
pageSize: 10000 |
|
}).then(res => { |
|
const list = res.list |
|
const assessmentId = this.assessmentId |
|
let done = false |
|
const classId = this.classId |
|
// 匹配到该考核，并且已经提交过（有reportId则说明有实验记录），并且classId跟当前用户的classId相同，就提示提交了考核然后返回上一页 |
|
if (list.find(e => e.assessmentId == assessmentId && e.reportId && e.classId == classId)) { |
|
done = true |
|
this.isSubmit = true |
|
newmain.$emit('isSubmit', this.isSubmit) |
|
this.$message.error('你已经提交过该考核！') |
|
setTimeout(_ => { |
|
history.back() // 直接返回上一页面 |
|
}, 1500) |
|
} |
|
// 如果该考核没有提交过，则取获取项目列表进行考核 |
|
if (!done) { |
|
this.getList().then(() => { |
|
this.getCache() |
|
}).catch(res => {}) |
|
// 查询考核状态定时器 |
|
this.statusTimer = setInterval(_ => { |
|
this.getStatus() |
|
}, 1000) |
|
} |
|
}).catch(res => {}) |
|
}, |
|
// 获取上次缓存记录 |
|
getCache(cache) { |
|
const pId = cache ? cache.projectId : '' |
|
const projectId = Number(pId || this.projectId) |
|
const cid = this.courseId |
|
const assessmentId = this.assessmentId |
|
const list = this.projectList |
|
let points = [] |
|
if (pId && cache.judgmentIdList && !Cookie.get('admin-projectId')) { |
|
cache.judgmentIdList.map(e => { |
|
points.push({ |
|
judgmentId: e |
|
}) |
|
}) |
|
} else { |
|
// 深拷贝判分列表，下面接口获取到有缓存代码就直接存进去，如果用户选择了恢复代码，再用这个列表替换原来的判分列表 |
|
points = JSON.parse(JSON.stringify(this.points)) |
|
} |
|
// 如果是没有代码的缓存，则只需要恢复项目，否则，就调接口查询缓存代码 |
|
if (cache && cache.empty && list.find(e => e.projectId === projectId) && !Cookie.get('admin-projectId')) { |
|
if (Cookie.get('admin-projectId')) { |
|
Cookie.remove('admin-projectId') |
|
} else { |
|
this.projectId = projectId |
|
this.getProDetail() |
|
} |
|
this.closeLoad() |
|
localStorage.removeItem('codeCache') |
|
} else { |
|
if (Cookie.get('admin-projectId')) { |
|
Cookie.remove('admin-projectId') |
|
} |
|
let newJudgmentId = '' // 要恢复到第一个有代码的判分规则，因为有代码的规则可能不是第一个，所以要判断如果这个为空，才把索引赋给该变量 |
|
const promiseList = [] // promise数组 |
|
let hasCache = 0 // 是否有缓存 |
|
points.map((e, i) => { |
|
const judgmentId = e.judgmentId |
|
promiseList.push(new Promise((resolve,reject) => { |
|
this.$post(this.api.getLastCache, { |
|
assessmentId: assessmentId ? Number(assessmentId) : '', |
|
bcId: judgmentId, |
|
projectId, // 项目id，同上 |
|
cid // 课程id |
|
}).then(res => { |
|
this.closeLoad() |
|
const code = res.getLastCache |
|
// 如果有缓存代码 |
|
if (code) { |
|
hasCache = 1 |
|
if (newJudgmentId === '') newJudgmentId = i |
|
e.code = code |
|
} |
|
resolve() |
|
}).catch(res => { |
|
reject() |
|
this.closeLoad() |
|
}) |
|
})) |
|
}) |
|
// 如果有缓存代码，再提示用户是否要继续上次的实验 |
|
Promise.all(promiseList).then(_ => { |
|
hasCache && this.$confirm('是否要继续上次的实验？', '提示', { |
|
confirmButtonText: '是', |
|
cancelButtonText: '否', |
|
type: 'success' |
|
}).then(() => { |
|
localStorage.removeItem('codeCache') // 恢复代码后清除本地缓存 |
|
this.projectId = projectId |
|
// 如果是本地缓存里有项目id，则要再次获取项目详情，取判分列表再次赋值；本地没有缓存则取只恢复第一个判分点的代码 |
|
if (pId) { |
|
this.getProDetail().then(() => { |
|
this.points.map(e => { |
|
const item = points.find(n => n.judgmentId === e.judgmentId) |
|
if (item && item.code) this.$set(e, 'code', item.code) |
|
}) |
|
this.$emit('tell', projectId, this.curSystemId, this.points) |
|
this.$emit('recoveryCode', newJudgmentId + '') // 切换为缓存的判分点，tab索引值要为字符串 |
|
}).catch(res => {}) |
|
} else { |
|
this.points.map(e => { |
|
const item = points.find(n => n.judgmentId === e.judgmentId) |
|
if (item && item.code) this.$set(e, 'code', item.code) |
|
}) |
|
this.$emit('tell', projectId, this.curSystemId, this.points) |
|
this.$emit('recoveryCode') |
|
} |
|
}).catch(() => { |
|
// 选择了不继续上次的实验，则清除本地缓存，并删除服务器里缓存的代码 |
|
localStorage.removeItem('codeCache') |
|
// 删除该项目下所有判分规则的缓存代码 |
|
points.map(e => { |
|
e.code && this.$post(this.api.delCache, { |
|
assessmentId, |
|
bcId: e.judgmentId, |
|
projectId, |
|
cid |
|
}).then(res => {}).catch(() => {}) |
|
}) |
|
}) |
|
}) |
|
} |
|
}, |
|
// 定时查询考核状态（只有考核才需要定时查，查到考核如果结束后，直接提交考核） |
|
getStatus() { |
|
// 未提交才需要查询状态 |
|
this.isSubmit || this.$get(this.api.getDetailById, { |
|
id: this.assessmentId |
|
}).then(res => { |
|
const done = res.data ? res.data.status === 2 : false // 状态(0、待开始 1、进行中 2、已结束) |
|
// 如果考核已结束，则清除查询考核状态的定时器，并且自动提交 |
|
if (done) { |
|
clearInterval(this.statusTimer) |
|
this.$alert('考核时间已到，系统已自动交卷', '提示', { |
|
confirmButtonText: '确定' |
|
}) |
|
this.submit() |
|
} |
|
}).catch(res => {}) |
|
}, |
|
// 项目选择回调 |
|
selectProject(){ |
|
this.isSelected = true |
|
this.getProDetail().then(() => { |
|
this.getCache() |
|
}).catch(res => {}) |
|
this.isSubmit = false |
|
this.countVal = 0 |
|
this.grade = '00' |
|
this.pannelTab = 'first' |
|
this.$emit('recoveryCode') // 切换实训项目后回到第一个判分点 |
|
newmain.$emit('isSubmit', this.isSubmit) // 选择项目后把提交状态重置为未提交 |
|
}, |
|
//重新开始 |
|
reload() { |
|
this.reloadCount() |
|
this.grade = '00' |
|
localStorage.removeItem('codeCache') |
|
this.isSubmit = false |
|
newmain.$emit('isSubmit', this.isSubmit) |
|
const points = this.points |
|
// code和codeId,还有运行结果全部清空 |
|
points.map(e => { |
|
e.code = '' |
|
e.codeId = '' |
|
e.answer = '' |
|
e.retResult = '' |
|
}) |
|
this.$emit('tell', this.projectId, this.curSystemId, points) |
|
this.$emit('recoveryCode') |
|
this.startCount() |
|
}, |
|
// 提交询问 |
|
confirmSubmit() { |
|
const pointList = this.$parent.workbench |
|
let msg = '此操作将视为结束考试，是否继续？' |
|
if(pointList.find(e => !e.codeId && e.code)) msg = '有代码没有运行，该代码将不得分，确定提交？' |
|
this.$confirm(msg, '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning', |
|
center: true |
|
}).then(() => { |
|
this.submit() |
|
}).catch(() => {}) |
|
}, |
|
// 提交 |
|
submit() { |
|
if (this.isSubmit) return false |
|
const pointList = this.$parent.workbench |
|
const date = new Date() |
|
const entryTime = this.entryTime |
|
const timeSum = Math.ceil((date.getTime() - entryTime.getTime()) / 60000) // 计算实验用时（分钟），向上取整 |
|
const submitTime = util.formatDate('yyyy-MM-dd hh:mm:ss', date) |
|
const projectId = this.projectId |
|
const projectName = this.projectList.find(e => e.projectId == projectId).projectName // 获取项目名称 |
|
this.reloadCount() |
|
// 判分点参数 |
|
const attributesReqList = [] |
|
pointList.map(e => { |
|
attributesReqList.push({ |
|
codeId: e.codeId, |
|
bcId: e.judgmentId, |
|
isSubmit: e.codeId ? 1 : 0, |
|
answer: e.answer, |
|
retResult: e.retResult |
|
}) |
|
}) |
|
const data = { |
|
classId: this.classId ? this.classId : '', |
|
className: this.className ? this.className : '', |
|
curriculumId: this.courseId, |
|
startTime: this.projectPermissions ? this.startTime : util.formatDate('yyyy-MM-dd hh:mm:ss', entryTime), // 开始时间（考核：直接从职站取考核的开始时间；练习：取页面进入的时间） |
|
endTime: this.projectPermissions ? this.endTime : submitTime, // 结束时间（考核：直接从职站取考核的结束时间；练习：取提交时间） |
|
submitTime, // 提交时间，即当前时间（这3个时间都是传完整的日期时间格式） |
|
timeSum, |
|
projectId, |
|
projectName, |
|
assessmentId: this.assessmentId ? this.assessmentId : '', |
|
totalScore: 100, // 判分点总分固定为100 |
|
systemId: this.curSystemId, |
|
purpose: this.experimentTarget, // 实验目的 |
|
attributesReqList |
|
} |
|
this.$post(this.api.submit, data).then(res => { |
|
localStorage.removeItem('codeCache') |
|
this.isSubmit = true |
|
newmain.$emit('isSubmit', this.isSubmit) |
|
clearInterval(this.statusTimer) |
|
let list = res.retInfo |
|
let taskList = this.taskList |
|
let score = 0 |
|
// 给判分列表添加分数和运行结果 |
|
taskList.map(e => { |
|
let item = list.find(n => n.judgmentPointsId === e.judgmentId) |
|
if (item) { |
|
e.examScore = item.score |
|
e.finishedResult = item.finishedResult // 1：正确，2：错误 |
|
} else { |
|
e.examScore = 0 |
|
} |
|
score += e.examScore // 计算总分 |
|
}) |
|
this.grade = util.handleZero(score) // 前置加0 |
|
this.editReport(res.reportId) |
|
}).catch(err => {}) |
|
}, |
|
// 编辑实验报告 |
|
editReport(reportId) { |
|
const data = [] |
|
const ans = [] |
|
const promises = [] |
|
this.taskList.map(e => { |
|
promises.push(new Promise((resolve, reject) => { |
|
data.push({ |
|
judgmentId: e.judgmentId, |
|
judgmentName: e.name, |
|
answer: e.code, |
|
score: e.examScore, |
|
}) |
|
// 获取参考答案 |
|
this.$get(this.api.queryBcJudgmentPointByBcId, { |
|
bcId: e.judgmentId |
|
}).then(({ judgmentPoint }) => { |
|
ans.push(judgmentPoint) |
|
resolve() |
|
}).catch(err => { |
|
reject() |
|
}) |
|
})) |
|
}) |
|
Promise.all(promises).then(_ => { |
|
data.map(e => { |
|
const item = ans.find(n => n.bcId === e.judgmentId) |
|
e.referenceAnswer = item.experimentCode |
|
}) |
|
this.$post(this.api.editExperimentalData, { |
|
reportId, |
|
data: JSON.stringify(data) |
|
}).then(res => {}).catch(err => {}) |
|
}) |
|
}, |
|
// 实验面板显示隐藏 |
|
togglePannel() { |
|
this.pannelVisible = !this.pannelVisible |
|
}, |
|
// 倒计时 |
|
timeFormat(param) { |
|
return param < 10 ? '0' + param : param |
|
}, |
|
// 清除时间 |
|
reloadCount() { |
|
clearInterval(this.counterTimer) |
|
this.countVal = '' |
|
this.day = '00' |
|
this.seconds = '00' |
|
this.minutes = '00' |
|
this.hour = '00' |
|
}, |
|
// 计时器（考核是倒计时，练习是计时） |
|
counter(counterTime) { |
|
let leave1 = counterTime % (24 * 3600) //计算天数后剩余的毫秒数 |
|
let leave2 = leave1 % 3600 //计算小时数后剩余的毫秒数 |
|
let leave3 = leave2 % 60 //计算分钟数后剩余的毫秒数 |
|
let day = Math.floor(counterTime / (24 * 3600)) //计算相差天数 |
|
let hour = Math.floor(leave1 / 3600) //计算相差小时 |
|
let minutes = Math.floor(leave2 / 60) //计算相差分钟 |
|
let seconds = Math.round(leave3) //计算相差秒 |
|
day = this.timeFormat(day) |
|
hour = this.timeFormat(hour) |
|
minutes = this.timeFormat(minutes) |
|
seconds = this.timeFormat(seconds) |
|
this.day = day |
|
this.hour = hour |
|
this.minutes = minutes |
|
this.seconds = seconds |
|
}, |
|
// 启动倒计时 |
|
startCount() { |
|
clearInterval(this.counterTimer) |
|
this.counterTimer = setInterval(() => { |
|
this.counter(this.projectPermissions ? this.countVal-- : this.countVal++) |
|
}, 1000) |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.el-main { |
|
width: 60%; |
|
background-color: #fff; |
|
color: #333; |
|
padding: 0; |
|
font-size: 16px; |
|
margin: 0px 20px 10px 10px; |
|
white-space: pre-wrap; |
|
overflow: hidden; |
|
} |
|
.toggle-panel { |
|
position: fixed; |
|
top: 50%; |
|
&.active { |
|
left: 85%; |
|
} |
|
img { |
|
height: 150px; |
|
} |
|
} |
|
.panel-header { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
.project { |
|
display: inline-flex; |
|
align-items: center; |
|
width: 28%; |
|
} |
|
.item { |
|
font-size: 16px; |
|
margin: 0 10px; |
|
padding: 20px 0; |
|
} |
|
.count { |
|
margin-left: -40px; |
|
span { |
|
padding: 5px 15px; |
|
margin: 0 5px; |
|
color: #333; |
|
font-size: 14px; |
|
text-align: center; |
|
background: #fff; |
|
border-radius: 18px; |
|
} |
|
} |
|
.total-score { |
|
padding: 10px; |
|
font-size: 14px; |
|
text-align: center; |
|
border-radius: 6px; |
|
} |
|
.submit { |
|
width: 106px; |
|
font-size: 16px; |
|
} |
|
.reload { |
|
color: #d0d0d0; |
|
font-size: 16px; |
|
background-color: #202020; |
|
} |
|
} |
|
/deep/.des { |
|
font-size: 16px; |
|
font-family: "Microsoft YaHei"; |
|
img { |
|
max-width: 100%; |
|
} |
|
} |
|
/deep/.el-collapse-item__wrap { |
|
border-bottom: none; |
|
} |
|
/deep/.el-collapse-item__header { |
|
border-bottom: none; |
|
} |
|
/deep/.el-tabs__content { |
|
margin: 0 20px; |
|
max-height: calc(60vh - 70px); |
|
overflow: auto; |
|
} |
|
/deep/.el-icon-s-ticket:before { |
|
padding: 5px; |
|
font-size: 16px; |
|
} |
|
/deep/.el-collapse-item__arrow { |
|
margin: 0 5px 0 0; |
|
} |
|
/deep/.el-tabs__item { |
|
font-size: 16px; |
|
} |
|
/deep/.el-tabs--card > .el-tabs__header .el-tabs__nav { |
|
border: none; |
|
} |
|
/deep/.el-tabs--card > .el-tabs__header .el-tabs__item { |
|
border-left: none; |
|
} |
|
/deep/.el-tabs--card > .el-tabs__header { |
|
border-bottom: none; |
|
} |
|
/deep/.el-collapse { |
|
border-bottom: none; |
|
border-top: none; |
|
} |
|
/deep/.el-tabs__item.is-active { |
|
color: #fff; |
|
} |
|
/deep/.el-tabs__header { |
|
padding: 5px 20px; |
|
} |
|
.el-aside { |
|
margin-bottom: 10px; |
|
color: #333; |
|
background-color: #fff; |
|
} |
|
.el-aside /deep/[class*=" el-icon-"], |
|
[class^="el-icon-"] { |
|
line-height: 40px; |
|
font-size: 16px; |
|
} |
|
.aside-header { |
|
margin: 0px 10px 10px 10px; |
|
background-color: #fff; |
|
} |
|
.aside-footer { |
|
margin: 0px 10px 10px 10px; |
|
background-color: #fff; |
|
} |
|
.p-title { |
|
display: flex; |
|
justify-content: center; |
|
height: 40px; |
|
&.system4 { |
|
background-size: 100% 58px; |
|
} |
|
&.system5, &.system7, &.system9 { |
|
background-size: 100% 57px; |
|
} |
|
&.system8, &.system6 { |
|
background-size: 100% 61px; |
|
} |
|
&.system10 { |
|
background-size: 104% 61px; |
|
} |
|
p { |
|
padding-left: 10px; |
|
line-height: 40px; |
|
font-size: 16px; |
|
color: #fff; |
|
} |
|
i { |
|
color: #fff; |
|
} |
|
} |
|
/deep/.el-card__body { |
|
padding: 0; |
|
} |
|
/deep/.el-table { |
|
font-size: 12px; |
|
thead { |
|
color: #fff; |
|
font-size: 10px; |
|
} |
|
th > .cell { |
|
font-weight: 100; |
|
} |
|
td, |
|
th.is-leaf { |
|
border-bottom: 0 !important; |
|
} |
|
} |
|
.goal { |
|
padding: 10px 0; |
|
margin: 0 10px; |
|
text-indent: 2em; |
|
font-size: 14px; |
|
} |
|
/deep/.select { |
|
.el-select__caret:before { |
|
content: "\e78f"; |
|
padding: 3px; |
|
font-size: 16px; |
|
color: #fff; |
|
border-radius: 50%; |
|
} |
|
.el-input__icon { |
|
line-height: 60px; |
|
} |
|
.el-input { |
|
padding: 10px 0; |
|
} |
|
.el-input--suffix .el-input__inner { |
|
height: 40px !important; |
|
padding-right: 50px; |
|
margin-left: 15px; |
|
color: #333; |
|
font-size: 14px; |
|
border-radius: 30px; |
|
border: none; |
|
background-color: #fff; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
} |
|
} |
|
/deep/.el-container { |
|
height: 80%; |
|
&.is-vertical { |
|
background-color: #f5f5f5; |
|
width: 85%; |
|
height: 70%; |
|
position: fixed; |
|
top: 200px; |
|
bottom: 20px; |
|
left: 0; |
|
} |
|
} |
|
.right { |
|
color: #00af00; |
|
font-size: 20px; |
|
} |
|
.wrong { |
|
color: #f00; |
|
font-size: 20px; |
|
} |
|
</style> |