huoran
/
FE_python_trial
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 8 Wiki Activity

去掉localStorage里的代码缓存，只保留接口缓存

Browse Source
master
yujialong 6 months ago
parent ac1914bf1d
commit ac88afa39b
4 changed files with 320 additions and 428 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. 35
      src/api/index.js
  2. 552
      src/components/TestPanel.vue
  3. 1
      src/components/codemirror.vue
  4. 160
      src/views/Home.vue

35
src/api/index.js
Unescape View File

@ -1,6 +1,6 @@
import config from '@/config' import config from '@/config'
export default { export default {
getCurrentTime : `competition/competition/management/getCurrentTime`, getCurrentTime: `competition/competition/management/getCurrentTime`,
getProjectDetail: 'occupationlab/occupationlab/projectManage/getProjectDetail', getProjectDetail: 'occupationlab/occupationlab/projectManage/getProjectDetail',
submit: 'python/python/submit', submit: 'python/python/submit',
runPythonCode: 'python/python/runPythonCode', runPythonCode: 'python/python/runPythonCode',
@ -14,10 +14,10 @@ export default {
getPurchasedTableByCategory: `data/data/myDate/getPurchasedTableByCategory`, getPurchasedTableByCategory: `data/data/myDate/getPurchasedTableByCategory`,
previewData: `data/data/preview`, previewData: `data/data/preview`,
lookupTableFile: `occupationlab/python/table/data/lookupTableFile`, lookupTableFile: `occupationlab/python/table/data/lookupTableFile`,
downloadData:`${config.host}data/data/download`, downloadData: `${config.host}data/data/download`,
getDetailById: 'occupationlab/occupationlab/assessment/getDetailById', getDetailById: 'occupationlab/occupationlab/assessment/getDetailById',
pageStuAssessment: 'occupationlab/occupationlab/assessment/pageStuAssessment', pageStuAssessment: 'occupationlab/occupationlab/assessment/pageStuAssessment',
queryUserInfoDetails: `users/users/userAccount/queryUserInfoDetails`, queryUserInfoDetails: `users/users/userAccount/queryUserInfoDetails`,
modelClassList: `nakadai/nakadai/model/reference/modelClassList`, modelClassList: `nakadai/nakadai/model/reference/modelClassList`,
studentModelList: `nakadai/nakadai/model/student/studentModelList`, studentModelList: `nakadai/nakadai/model/student/studentModelList`,
referenceDemoList: `nakadai/nakadai/model/reference/demo/referenceDemoList`, referenceDemoList: `nakadai/nakadai/model/reference/demo/referenceDemoList`,
@ -32,18 +32,19 @@ export default {
exportLabReport: `occupationlab/occupationlab/achievement/exportLabReport`, exportLabReport: `occupationlab/occupationlab/achievement/exportLabReport`,
reportDetail: `occupationlab/occupationlab/achievement/reportDetail`, reportDetail: `occupationlab/occupationlab/achievement/reportDetail`,
getCompetition: `competition/competition/management/getCompetition`, getCompetition: `competition/competition/management/getCompetition`,
whetherCanPaste: `nakadai/nakadai/model/demo/whetherCanPaste`, whetherCanPaste: `nakadai/nakadai/model/demo/whetherCanPaste`,
displayListOrNotByStudent: `nakadai/nakadai/model/demo/displayListOrNotByStudent`, displayListOrNotByStudent: `nakadai/nakadai/model/demo/displayListOrNotByStudent`,
modelClassListByStudent: `nakadai/nakadai/model/student/modelClassListByStudent`, modelClassListByStudent: `nakadai/nakadai/model/student/modelClassListByStudent`,
studentModelListBySystem: `nakadai/nakadai/model/student/studentModelListBySystem`, studentModelListBySystem: `nakadai/nakadai/model/student/studentModelListBySystem`,
detailsOfGoods: `nakadai/mall/detailsOfGoods`, detailsOfGoods: `nakadai/mall/detailsOfGoods`,
importCode: `occupationlab/occupationlab/experimentalReport/importCode`, importCode: `occupationlab/occupationlab/experimentalReport/importCode`,
removeImport: `occupationlab/occupationlab/experimentalReport/removeImport`, removeImport: `occupationlab/occupationlab/experimentalReport/removeImport`,
getStartTime: `python/python/getStartTime`, getStartTime: `python/python/getStartTime`,
getProductSystemTheme: `nakadai/mall/getProductSystemTheme`, getProductSystemTheme: `nakadai/mall/getProductSystemTheme`,
heartbeatDetection : `nakadai/message/heartbeatDetection`, heartbeatDetection: `nakadai/message/heartbeatDetection`,
heartbeatDetectionRabbit : `python/rabbitMessage/heartbeatDetection`, heartbeatDetectionRabbit: `python/rabbitMessage/heartbeatDetection`,
createQueue : `python/rabbitMessage/createQueue`, createQueue: `python/rabbitMessage/createQueue`,
endRunningProcess : `python/python/endRunningProcess`, endRunningProcess: `python/python/endRunningProcess`,
sendMessageToUser : `python/rabbitMessage/sendMessageToUser`, sendMessageToUser: `python/rabbitMessage/sendMessageToUser`,
deleteTheLastUncommittedRecord: `python/python/deleteTheLastUncommittedRecord`,
} }

552
src/components/TestPanel.vue
Unescape View File

@ -1,123 +1,75 @@
<template> <template>
<div :class="['panel', {active: pannelVisible}]" <div :class="['panel', { active: pannelVisible }]" id="panel">
id="panel"> <el-container class="scrollbar" id="container" v-show="pannelVisible">
<el-container class="scrollbar" <el-header class="panel-header" id="panelHeader">
id="container" <div class="project">
v-show="pannelVisible"> <div class="inline-center">
<el-header class="panel-header" <p class="whitespace-nowrap">实训项目</p>
id="panelHeader"> <el-tooltip effect="dark" content="点击右侧“下三角”按钮可切换实验项目" placement="bottom">
<div class="project"> <i class="info el-icon-warning" style="margin-left: 10px"></i>
<div class="inline-center"> </el-tooltip>
<p class="whitespace-nowrap">实训项目</p> </div>
<el-tooltip effect="dark" <el-select v-model="projectId" placeholder="请选择" class="select" :disabled="projectPermissions != 0"
content="点击右侧“下三角”按钮可切换实验项目" @change="selectProject" style="flex: 1">
placement="bottom"> <el-option v-for="(item, i) in projectList" :key="item.projectId" :label="i + 1 + '. ' + item.projectName"
<i class="info el-icon-warning" :value="item.projectId"></el-option>
style="margin-left: 10px"></i> </el-select>
</el-tooltip> </div>
</div> <div class="item">
<el-select v-model="projectId" <div class="count">
placeholder="请选择" 实训{{ text }}时间
class="select" <span>{{ day }}</span>天
:disabled="projectPermissions != 0" <span>{{ hour }}</span>小时
@change="selectProject" <span>{{ minutes }}</span>分
style="flex: 1"> <span>{{ seconds }}</span>秒
<el-option v-for="(item, i) in projectList" </div>
:key="item.projectId" </div>
:label="i + 1 + '. ' + item.projectName" <div v-if="!competitionId" class="item">
:value="item.projectId"></el-option> <div>
</el-select> 总得分：
</div> <span class="total-score">{{ grade }}</span>
<div class="item"> </div>
<div class="count"> </div>
实训{{text}}时间 <div class="actions">
<span>{{day}}</span>天 <el-button @click="toggleReport" v-if="$parent.language && !isSubmit && !competitionId">填写实验报告</el-button>
<span>{{hour}}</span>小时 <el-button @click="toReport" v-if="isSubmit && !competitionId">查看实验报告</el-button>
<span>{{minutes}}</span>分 <el-button class="reload" @click="reloadConfirm" v-show="projectPermissions == 0">重新开始</el-button>
<span>{{seconds}}</span>秒 <el-button type="primary" class="submit btn" @click="confirmSubmit"
</div> :disabled="isSubmit || !projectList.length">提交</el-button>
</div> </div>
<div v-if="!competitionId"
class="item">
<div>
总得分：
<span class="total-score">{{grade}}</span>
</div>
</div>
<div class="actions">
<el-button @click="toggleReport"
v-if="$parent.language && !isSubmit && !competitionId">填写实验报告</el-button>
<el-button @click="toReport"
v-if="isSubmit && !competitionId">查看实验报告</el-button>
<el-button class="reload"
@click="reloadConfirm"
v-show="projectPermissions == 0">重新开始</el-button>
<el-button type="primary"
class="submit btn"
@click="confirmSubmit"
:disabled="isSubmit || !projectList.length">提交</el-button>
</div>
</el-header> </el-header>
<div class="report-wrap" <div class="report-wrap" v-if="reportVisible">
v-if="reportVisible">
<i class="el-icon-caret-top close-report"></i> <i class="el-icon-caret-top close-report"></i>
<el-table class="report-table" <el-table class="report-table" :data="taskList" :max-height="tableHeight">
:data="taskList" <el-table-column prop="name" label="判分点" width="210" align="center"></el-table-column>
:max-height="tableHeight"> <el-table-column prop="score" label="答案" align="center">
<el-table-column prop="name"
label="判分点"
width="210"
align="center"></el-table-column>
<el-table-column prop="score"
label="答案"
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<codemirror v-model="scope.row.code" <codemirror v-model="scope.row.code" :options="cmOption" class="code-mirror"
:options="cmOption" :ref="'codemirror' + scope.$index" @ready="() => ready(scope.$index)"></codemirror>
class="code-mirror"
:ref="'codemirror' + scope.$index"
@ready="() => ready(scope.$index)"></codemirror>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="score" <el-table-column prop="score" label="运行结果" align="center">
label="运行结果"
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<quill class="quill" <quill class="quill" :tools="false" :border="true" v-model="scope.row.codeResult" :height="300"
:tools="false" :index="1" />
:border="true"
v-model="scope.row.codeResult"
:height="300"
:index="1" />
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<el-container id="infoContainer" <el-container id="infoContainer" v-else>
v-else> <el-aside id="aside" width="30%">
<el-aside id="aside"
width="30%">
<div class="aside-header"> <div class="aside-header">
<div :class="['p-title color', 'system' + $themeId]"> <div :class="['p-title color', 'system' + $themeId]">
<i class="el-icon-s-order"></i> <i class="el-icon-s-order"></i>
<p>实验目标</p> <p>实验目标</p>
</div> </div>
<div class="goal"> <div class="goal">
<div v-if="pd.experimentTargetType == 0 || !pd.experimentTargetType" <div v-if="pd.experimentTargetType == 0 || !pd.experimentTargetType" class="ql-snow">
class="ql-snow"> <div class="ql-editor" v-html="pd.experimentTarget"></div>
<div class="ql-editor"
v-html="pd.experimentTarget"></div>
</div> </div>
<mavon-editor v-else <mavon-editor v-else class="md" v-model="pd.experimentTarget" defaultOpen="preview" :ishljs="true"
class="md" :subfield="false" :editable="false" :toolbarsFlag="false" boxShadowStyle="none" />
v-model="pd.experimentTarget"
defaultOpen="preview"
:ishljs="true"
:subfield="false"
:editable="false"
:toolbarsFlag="false"
boxShadowStyle="none" />
</div> </div>
</div> </div>
<div class="aside-footer"> <div class="aside-footer">
@ -128,39 +80,24 @@
<div> <div>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-card shadow="never" <el-card shadow="never" :border="false">
:border="false"> <el-table class="task-table" :data="taskList" :stripe="true">
<el-table class="task-table"
:data="taskList"
:stripe="true">
<el-table-column type="index"></el-table-column> <el-table-column type="index"></el-table-column>
<el-table-column prop="name" <el-table-column prop="name" label="判分点" align="center"></el-table-column>
label="判分点" <el-table-column prop="score" label="分值" width="60" align="center"></el-table-column>
align="center"></el-table-column>
<el-table-column prop="score"
label="分值"
width="60"
align="center"></el-table-column>
<template v-if="!competitionId"> <template v-if="!competitionId">
<el-table-column label="结果" <el-table-column label="结果" width="60" align="center">
width="60"
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<template v-if="isSubmit"> <template v-if="isSubmit">
<template v-if="!competitionId"> <template v-if="!competitionId">
<i v-if="scope.row.finishedResult" <i v-if="scope.row.finishedResult" class="el-icon-check right"></i>
class="el-icon-check right"></i> <i v-else class="el-icon-close wrong"></i>
<i v-else
class="el-icon-close wrong"></i>
</template> </template>
<template v-else>-</template> <template v-else>-</template>
</template> </template>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="score" <el-table-column prop="score" label="得分" width="60" align="center">
label="得分"
width="60"
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<template v-if="isSubmit">{{ competitionId ? '-' : scope.row.examScore }}</template> <template v-if="isSubmit">{{ competitionId ? '-' : scope.row.examScore }}</template>
</template> </template>
@ -174,93 +111,52 @@
</div> </div>
</el-aside> </el-aside>
<el-main id="main"> <el-main id="main">
<el-tabs class="info-tab" <el-tabs class="info-tab" v-model="pannelTab" type="card">
v-model="pannelTab" <el-tab-pane label="项目背景" name="first">
type="card"> <div v-if="pd.experimentDescriptionType == 0 || !pd.experimentDescriptionType" class="ql-snow">
<el-tab-pane label="项目背景" <div class="ql-editor" v-html="pd.experimentDescription"></div>
name="first">
<div v-if="pd.experimentDescriptionType == 0 || !pd.experimentDescriptionType"
class="ql-snow">
<div class="ql-editor"
v-html="pd.experimentDescription"></div>
</div> </div>
<mavon-editor v-else <mavon-editor v-else class="md" v-model="pd.experimentDescription" defaultOpen="preview" :subfield="false"
class="md" :editable="false" :toolbarsFlag="false" boxShadowStyle="none" />
v-model="pd.experimentDescription"
defaultOpen="preview"
:subfield="false"
:editable="false"
:toolbarsFlag="false"
boxShadowStyle="none" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="实验要求" <el-tab-pane label="实验要求" name="second">
name="second">
<el-collapse v-model="curReq"> <el-collapse v-model="curReq">
<el-collapse-item v-for="item in points" <el-collapse-item v-for="item in points" :name="item.judgmentId" :key="item.judgmentId">
:name="item.judgmentId"
:key="item.judgmentId">
<template slot="title"> <template slot="title">
<i class="el-icon-s-ticket"></i> <i class="el-icon-s-ticket"></i>
<div class="break-all des" <div class="break-all des" v-html="item.name"></div>
v-html="item.name"></div>
</template> </template>
<div v-if="item.experimentalRequirementsType == 0 || !item.experimentalRequirementsType" <div v-if="item.experimentalRequirementsType == 0 || !item.experimentalRequirementsType"
class="ql-snow"> class="ql-snow">
<div class="ql-editor" <div class="ql-editor" v-html="item.experimentalRequirements"></div>
v-html="item.experimentalRequirements"></div>
</div> </div>
<mavon-editor v-else <mavon-editor v-else class="md" v-model="item.experimentalRequirements" defaultOpen="preview"
class="md" :ishljs="true" :subfield="false" :editable="false" :toolbarsFlag="false" boxShadowStyle="none" />
v-model="item.experimentalRequirements"
defaultOpen="preview"
:ishljs="true"
:subfield="false"
:editable="false"
:toolbarsFlag="false"
boxShadowStyle="none" />
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="实验提示" <el-tab-pane label="实验提示" name="third" v-if="hintOpen">
name="third" <div v-if="pd.experimentHintType == 0 || !pd.experimentHintType" class="ql-snow">
v-if="hintOpen"> <div class="ql-editor" v-html="pd.experimentHint"></div>
<div v-if="pd.experimentHintType == 0 || !pd.experimentHintType"
class="ql-snow">
<div class="ql-editor"
v-html="pd.experimentHint"></div>
</div> </div>
<mavon-editor v-else <mavon-editor v-else class="md" v-model="pd.experimentHint" defaultOpen="preview" :ishljs="true"
class="md" :subfield="false" :editable="false" :toolbarsFlag="false" boxShadowStyle="none" />
v-model="pd.experimentHint"
defaultOpen="preview"
:ishljs="true"
:subfield="false"
:editable="false"
:toolbarsFlag="false"
boxShadowStyle="none" />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-main> </el-main>
</el-container> </el-container>
</el-container> </el-container>
<div :class="['toggle-panel', {active: pannelVisible}]"> <div :class="['toggle-panel', { active: pannelVisible }]">
<!-- <div @click="togglePannel"> --> <!-- <div @click="togglePannel"> -->
<i class="el-icon-rank drag-icon" <i class="el-icon-rank drag-icon" id="drag"></i>
id="drag"></i> <img :src="require(`@/assets/images/system/${$themeId}/left.png`)" alt class="c-p" @click="togglePannel"
<img :src="require(`@/assets/images/system/${$themeId}/left.png`)" v-if="pannelVisible" />
alt <img :src="require(`@/assets/images/system/${$themeId}/right.png`)" alt class="c-p" @click="togglePannel"
class="c-p" v-if="!pannelVisible" />
@click="togglePannel"
v-if="pannelVisible" />
<img :src="require(`@/assets/images/system/${$themeId}/right.png`)"
alt
class="c-p"
@click="togglePannel"
v-if="!pannelVisible" />
</div> </div>
</div> </div>
</template> </template>
@ -440,13 +336,7 @@ export default {
// 获取项目列表 // 获取项目列表
this.getList().then(() => { this.getList().then(() => {
if (!this.isSubmit) { if (!this.isSubmit) {
let cache = localStorage.getItem('codeCache') // 获取本地缓存 this.getCache()
// 如果有缓存，再调接口取上次运行的代码
if (cache) {
this.getCache(JSON.parse(cache))
} else {
this.getCache()
}
} else { } else {
this.closeLoad() this.closeLoad()
} }
@ -620,120 +510,85 @@ export default {
}).catch(res => { }) }).catch(res => { })
}, },
// 获取上次缓存记录 // 获取上次缓存记录
async getCache (cache) { async getCache () {
if (this.isSubmit) { if (this.isSubmit) {
this.closeLoad() this.closeLoad()
return false return false
} }
const pId = cache ? cache.projectId : '' const projectId = +this.projectId
const projectId = Number(pId || this.projectId)
const cid = this.courseId const cid = this.courseId
const { assessmentId } = this const { assessmentId } = this
const list = this.projectList const points = JSON.parse(JSON.stringify(this.points))
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') && this.projectPermissions == 0) {
if (Cookie.get('admin-projectId') && !this.competitionId) { Cookie.remove('admin-projectId')
Cookie.remove('admin-projectId') }
} else { 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, {
competitionId: this.competitionId,
assessmentId: assessmentId ? Number(assessmentId) : '',
bcId: judgmentId,
projectId, // 项目id，同上
cid // 课程id
}).then(res => {
this.closeLoad()
const result = res.runRecord
// 如果有缓存代码
if (result) {
hasCache = 1
if (newJudgmentId === '') newJudgmentId = i
e.finalCode = result.code
e.code = result.code
e.codeId = result.id
e.answer = result.runResult
e.retResult = result.retResult
e.photoUrl = result.runPhotoUrl
}
resolve()
}).catch(res => {
reject()
this.closeLoad()
})
}))
})
// 如果有缓存代码，再提示用户是否要继续上次的实验
Promise.all(promiseList).then(_ => {
hasCache && this.$confirm('是否要继续上次的操作记录？', '提示', {
confirmButtonText: '是',
cancelButtonText: '否',
type: 'success',
closeOnClickModal: false
}).then(() => {
this.projectId = projectId this.projectId = projectId
this.getProDetail() // 恢复第一个判分点的代码
} this.points.map(e => {
this.closeLoad() const item = points.find(n => n.judgmentId === e.judgmentId)
localStorage.removeItem('codeCache') item.finalCode && this.$set(e, 'finalCode', item.finalCode)
} else { item.code && this.$set(e, 'code', item.code)
if (Cookie.get('admin-projectId') && this.projectPermissions == 0) { item.codeId && this.$set(e, 'codeId', item.codeId)
Cookie.remove('admin-projectId') item.answer && this.$set(e, 'answer', item.answer)
} item.photoUrl && this.$set(e, 'photoUrl', item.photoUrl)
let newJudgmentId = '' // 要恢复到第一个有代码的判分规则，因为有代码的规则可能不是第一个，所以要判断如果这个为空，才把索引赋给该变量 this.$set(e, 'retResult', isNaN(item.retResult) ? '' : item.retResult)
const promiseList = [] // promise数组 })
let hasCache = 0 // 是否有缓存 this.$emit('tell', projectId, this.curSystemId, this.points)
points.map((e, i) => { this.$emit('recoveryCode')
const judgmentId = e.judgmentId }).catch(() => {
promiseList.push(new Promise((resolve, reject) => { points.map(async (e) => {
this.$post(this.api.getLastCache, { await this.$post(this.api.deleteTheLastUncommittedRecord, {
competitionId: this.competitionId, competitionId: this.competitionId,
assessmentId: assessmentId ? Number(assessmentId) : '', assessmentId: assessmentId ? Number(assessmentId) : '',
bcId: judgmentId, bcId: e.judgmentId,
projectId, // 项目id，同上 projectId, // 项目id，同上
cid // 课程id cid // 课程id
}).then(res => {
this.closeLoad()
const result = res.runRecord
// 如果有缓存代码
if (result) {
hasCache = 1
if (newJudgmentId === '') newJudgmentId = i
e.finalCode = result.code
e.code = result.code
e.codeId = result.id
e.answer = result.runResult
e.retResult = result.retResult
e.photoUrl = result.runPhotoUrl
}
resolve()
}).catch(res => {
reject()
this.closeLoad()
}) })
}))
})
// 如果有缓存代码，再提示用户是否要继续上次的实验
Promise.all(promiseList).then(_ => {
hasCache && this.$confirm('是否要继续上次的操作记录？', '提示', {
confirmButtonText: '是',
cancelButtonText: '否',
type: 'success',
closeOnClickModal: false
}).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.finalCode && this.$set(e, 'finalCode', item.finalCode)
item.code && this.$set(e, 'code', item.code)
item.codeId && this.$set(e, 'codeId', item.codeId)
item.answer && this.$set(e, 'answer', item.answer)
item.photoUrl && this.$set(e, 'photoUrl', item.photoUrl)
this.$set(e, 'retResult', isNaN(item.retResult) ? '' : item.retResult)
}
})
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)
item.finalCode && this.$set(e, 'finalCode', item.finalCode)
item.code && this.$set(e, 'code', item.code)
item.codeId && this.$set(e, 'codeId', item.codeId)
item.answer && this.$set(e, 'answer', item.answer)
item.photoUrl && this.$set(e, 'photoUrl', item.photoUrl)
this.$set(e, 'retResult', isNaN(item.retResult) ? '' : item.retResult)
})
this.$emit('tell', projectId, this.curSystemId, this.points)
this.$emit('recoveryCode')
}
}).catch(() => {
// 选择了不继续上次的实验，则清除本地缓存，并删除服务器里缓存的代码
localStorage.removeItem('codeCache')
}) })
}) })
} })
}, },
// 查询考核状态（查到考核如果结束后，直接提交考核） // 查询考核状态（查到考核如果结束后，直接提交考核）
getAssStatus () { getAssStatus () {
@ -822,7 +677,6 @@ export default {
async reload () { async reload () {
this.reloadCount() this.reloadCount()
this.grade = '00' this.grade = '00'
localStorage.removeItem('codeCache')
this.setSubmit(false) this.setSubmit(false)
const points = this.points const points = this.points
// code和codeId,还有运行结果全部清空 // code和codeId,还有运行结果全部清空
@ -870,7 +724,6 @@ export default {
} }
}, },
vscodeRunCode (data) { vscodeRunCode (data) {
console.log("🚀 ~ vscodeRunCode ~ data:", data, this.$parent.workbench)
const i = +data.sort const i = +data.sort
this.$parent.workbench[i].codeId = data.codeId this.$parent.workbench[i].codeId = data.codeId
this.$parent.workbench[i].retResult = 1 this.$parent.workbench[i].retResult = 1
@ -995,7 +848,6 @@ export default {
} }
this.$post(this.api.submit, data).then(({ retInfo, reportId }) => { this.$post(this.api.submit, data).then(({ retInfo, reportId }) => {
localStorage.removeItem('codeCache')
this.setSubmit(true) this.setSubmit(true)
this.reportVisible = false this.reportVisible = false
let list = retInfo let list = retInfo
@ -1316,24 +1168,29 @@ export default {
margin: 0px 20px 10px 10px; margin: 0px 20px 10px 10px;
overflow: hidden; overflow: hidden;
} }
.panel-header { .panel-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
height: auto !important; height: auto !important;
.project { .project {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
width: 28%; width: 28%;
} }
.item { .item {
font-size: 16px; font-size: 16px;
margin: 0 10px; margin: 0 10px;
padding: 20px 0; padding: 20px 0;
} }
.count { .count {
margin-left: -40px; margin-left: -40px;
span { span {
padding: 5px 15px; padding: 5px 15px;
margin: 0 5px; margin: 0 5px;
@ -1344,149 +1201,187 @@ export default {
border-radius: 18px; border-radius: 18px;
} }
} }
.total-score { .total-score {
padding: 10px; padding: 10px;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
border-radius: 6px; border-radius: 6px;
} }
.submit { .submit {
width: 106px; width: 106px;
font-size: 16px; font-size: 16px;
} }
.reload { .reload {
color: #d0d0d0; color: #d0d0d0;
font-size: 16px; font-size: 16px;
background-color: #202020; background-color: #202020;
} }
} }
.whitespace-nowrap { .whitespace-nowrap {
white-space: nowrap; white-space: nowrap;
} }
/deep/.des { /deep/.des {
font-size: 16px; font-size: 16px;
font-family: 'Microsoft YaHei'; font-family: 'Microsoft YaHei';
img { img {
max-width: 100%; max-width: 100%;
} }
} }
/deep/.ql-editor { /deep/.ql-editor {
font-family: 'Microsoft Yahei'; font-family: 'Microsoft Yahei';
font-size: 13px; font-size: 13px;
.ql-syntax { .ql-syntax {
font-family: 'Microsoft Yahei'; font-family: 'Microsoft Yahei';
} }
} }
/deep/.el-collapse-item__wrap { /deep/.el-collapse-item__wrap {
border-bottom: none; border-bottom: none;
} }
/deep/.el-collapse-item__header { /deep/.el-collapse-item__header {
border-bottom: none; border-bottom: none;
} }
/deep/.el-icon-s-ticket:before { /deep/.el-icon-s-ticket:before {
padding: 5px; padding: 5px;
font-size: 16px; font-size: 16px;
} }
/deep/.el-collapse-item__arrow { /deep/.el-collapse-item__arrow {
margin: 0 5px 0 0; margin: 0 5px 0 0;
} }
/deep/.info-tab.el-tabs--card { /deep/.info-tab.el-tabs--card {
.el-tabs__item { .el-tabs__item {
font-size: 16px; font-size: 16px;
} }
.el-tabs__item.is-active { .el-tabs__item.is-active {
color: #fff; color: #fff;
} }
.el-tabs__header .el-tabs__nav { .el-tabs__header .el-tabs__nav {
border: none; border: none;
} }
.el-tabs__header .el-tabs__item { .el-tabs__header .el-tabs__item {
border-left: none; border-left: none;
} }
.el-tabs__header { .el-tabs__header {
padding: 5px 20px; padding: 5px 20px;
border-bottom: none; border-bottom: none;
} }
& > .el-tabs__content {
&>.el-tabs__content {
margin: 0 20px; margin: 0 20px;
max-height: calc(60vh - 70px); max-height: calc(60vh - 70px);
overflow: auto; overflow: auto;
} }
} }
/deep/.el-collapse { /deep/.el-collapse {
border-bottom: none; border-bottom: none;
border-top: none; border-top: none;
} }
.el-aside { .el-aside {
margin-bottom: 10px; margin-bottom: 10px;
color: #333; color: #333;
background-color: #fff; background-color: #fff;
} }
.el-aside /deep/[class*=' el-icon-'], .el-aside /deep/[class*=' el-icon-'],
[class^='el-icon-'] { [class^='el-icon-'] {
line-height: 40px; line-height: 40px;
font-size: 16px; font-size: 16px;
} }
.aside-header { .aside-header {
margin: 0px 10px 10px 10px; margin: 0px 10px 10px 10px;
background-color: #fff; background-color: #fff;
} }
.aside-footer { .aside-footer {
margin: 0px 10px 10px 10px; margin: 0px 10px 10px 10px;
background-color: #fff; background-color: #fff;
} }
.p-title { .p-title {
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 40px; height: 40px;
&.system4 { &.system4 {
background-size: 100% 58px; background-size: 100% 58px;
} }
&.system7, &.system7,
&.system9 { &.system9 {
background-size: 100% 40px; background-size: 100% 40px;
} }
&.system8, &.system8,
&.system6 { &.system6 {
background-size: 100% 61px; background-size: 100% 61px;
} }
p { p {
padding-left: 10px; padding-left: 10px;
line-height: 40px; line-height: 40px;
font-size: 16px; font-size: 16px;
color: #fff; color: #fff;
} }
i { i {
color: #fff; color: #fff;
} }
} }
/deep/.el-card__body { /deep/.el-card__body {
padding: 0; padding: 0;
} }
/deep/.task-table { /deep/.task-table {
font-size: 12px; font-size: 12px;
thead { thead {
color: #fff; color: #fff;
font-size: 10px; font-size: 10px;
} }
th > .cell {
th>.cell {
font-weight: 100; font-weight: 100;
} }
td, td,
th.is-leaf { th.is-leaf {
border-bottom: 0 !important; border-bottom: 0 !important;
} }
.el-table__cell { .el-table__cell {
padding: 6px 0; padding: 6px 0;
} }
} }
.goal { .goal {
padding: 10px 0; padding: 10px 0;
margin: 0 10px; margin: 0 10px;
font-size: 14px; font-size: 14px;
} }
/deep/.select { /deep/.select {
min-width: 180px; min-width: 180px;
.el-select__caret:before { .el-select__caret:before {
content: '\e78f'; content: '\e78f';
padding: 3px; padding: 3px;
@ -1494,12 +1389,15 @@ export default {
color: #fff; color: #fff;
border-radius: 50%; border-radius: 50%;
} }
.el-input__icon { .el-input__icon {
line-height: 60px; line-height: 60px;
} }
.el-input { .el-input {
padding: 10px 0; padding: 10px 0;
} }
.el-input--suffix .el-input__inner { .el-input--suffix .el-input__inner {
height: 40px !important; height: 40px !important;
padding-right: 50px; padding-right: 50px;
@ -1514,6 +1412,7 @@ export default {
white-space: nowrap; white-space: nowrap;
} }
} }
.panel { .panel {
z-index: 1000; z-index: 1000;
position: relative; position: relative;
@ -1522,16 +1421,20 @@ export default {
left: 0; left: 0;
width: 0; width: 0;
height: 0; height: 0;
.toggle-panel { .toggle-panel {
position: absolute; position: absolute;
top: 60%; top: 60%;
text-align: center; text-align: center;
&.active { &.active {
left: 100%; left: 100%;
} }
img { img {
height: 150px; height: 150px;
} }
.drag-icon { .drag-icon {
font-size: 20px; font-size: 20px;
line-height: 1; line-height: 1;
@ -1539,45 +1442,56 @@ export default {
cursor: pointer; cursor: pointer;
} }
} }
&.active { &.active {
position: fixed; position: fixed;
width: 85%; width: 85%;
height: 70%; height: 70%;
.toggle-panel { .toggle-panel {
top: 38%; top: 38%;
} }
} }
} }
/deep/.el-container { /deep/.el-container {
height: 100%; height: 100%;
&.is-vertical { &.is-vertical {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
} }
.right { .right {
color: #00af00; color: #00af00;
font-size: 20px; font-size: 20px;
} }
.wrong { .wrong {
color: #f00; color: #f00;
font-size: 20px; font-size: 20px;
} }
.info { .info {
color: #bfbfbf; color: #bfbfbf;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: 0.9; opacity: 0.9;
} }
} }
/deep/.report-table.el-table { /deep/.report-table.el-table {
th { th {
background-color: #c6daff !important; background-color: #c6daff !important;
} }
} }
.report-wrap { .report-wrap {
position: relative; position: relative;
padding-top: 5px; padding-top: 5px;
} }
.close-report { .close-report {
z-index: 2; z-index: 2;
position: absolute; position: absolute;
@ -1587,41 +1501,47 @@ export default {
color: #c6daff; color: #c6daff;
cursor: pointer; cursor: pointer;
} }
/deep/.v-note-wrapper { /deep/.v-note-wrapper {
min-height: 0; min-height: 0;
height: auto; height: auto;
font-family: 'Microsoft Yahei'; font-family: 'Microsoft Yahei';
.v-note-panel .v-note-show { .v-note-panel .v-note-show {
font-family: 'Microsoft Yahei'; font-family: 'Microsoft Yahei';
overflow: visible; overflow: visible;
.v-show-content { .v-show-content {
font-family: 'Microsoft Yahei'; font-family: 'Microsoft Yahei';
overflow: visible; overflow: visible;
} }
pre, pre,
code { code {
font-family: 'Microsoft Yahei'; font-family: 'Microsoft Yahei';
} }
} }
} }
.text-danger { .text-danger {
color: #f56c6c; color: #f56c6c;
} }
@media (max-width: 1550px) { @media (max-width: 1550px) {
.panel-header { .panel-header {
.count { .count {
margin-left: 0; margin-left: 0;
} }
} }
} }
@media (max-width: 1400px) { @media (max-width: 1400px) {
.panel-header { .panel-header {
.actions { .actions {
position: absolute; position: absolute;
top: 70px; top: 70px;
right: 30px; right: 30px;
} }
} }
} }
</style> </style>

1
src/components/codemirror.vue
Unescape View File

@ -704,7 +704,6 @@ export default {
if (data) { if (data) {
const photo = data.photoUrl const photo = data.photoUrl
const result = data.runResult || '' const result = data.runResult || ''
// this.$emit('cache') // 每次运行代码都要把代码传给后端做缓存
if (this.loadIns) this.loadIns.close() if (this.loadIns) this.loadIns.close()
this.picSrcList = [] this.picSrcList = []
this.$emit('update:photoUrl', '') this.$emit('update:photoUrl', '')

160
src/views/Home.vue
Unescape View File

@ -1,93 +1,47 @@
<template> <template>
<div v-show="loaded"> <div v-show="loaded">
<div class="header" <div class="header" :class="{ hh: $config.isHh }">
:class="{hh: $config.isHh}"> <img v-if="$config.isHh" src="@/assets/images/logo-hh.png" alt="" class="logo">
<img v-if="$config.isHh" <p v-else>{{ curriculumName }}</p>
src="@/assets/images/logo-hh.png" <el-button class="back btn" type="primary" @click="back">退出实验</el-button>
alt=""
class="logo">
<p v-else>{{curriculumName}}</p>
<el-button class="back btn"
type="primary"
@click="back">退出实验</el-button>
</div> </div>
<div class="top"> <div class="top">
<div class="language"> <div class="language">
<p v-if="$config.isHh" <p v-if="$config.isHh" style="font-size: 18px">{{ $config.title }}</p>
style="font-size: 18px">{{$config.title}}</p>
<p>编程语言</p> <p>编程语言</p>
<el-select v-model="language" <el-select v-model="language" @change="languageChange">
@change="languageChange"> <el-option v-for="(item, i) in languages" :key="i" :label="item.name" :value="item.id"></el-option>
<el-option v-for="(item, i) in languages"
:key="i"
:label="item.name"
:value="item.id"></el-option>
</el-select> </el-select>
<el-button v-if="language" <el-button v-if="language" class="open-vs" type="primary" size="small"
class="open-vs" @click="openVscode">打开Vscode新窗口</el-button>
type="primary"
size="small"
@click="openVscode">打开Vscode新窗口</el-button>
</div> </div>
<div class="inline-center"> <div class="inline-center">
<el-tooltip class="item" <el-tooltip class="item" effect="dark" content="支持导入其它数据用于实验，总上传的文件大小不可以超过10M" placement="bottom">
effect="dark" <i class="info el-icon-warning" style="margin-right: 10px"></i>
content="支持导入其它数据用于实验，总上传的文件大小不可以超过10M"
placement="bottom">
<i class="info el-icon-warning"
style="margin-right: 10px"></i>
</el-tooltip> </el-tooltip>
<el-button type="primary" <el-button type="primary" size="small" icon="el-icon-document" @click="toData">我的数据</el-button>
size="small"
icon="el-icon-document"
@click="toData">我的数据</el-button>
</div> </div>
</div> </div>
<div class="tab"> <div class="tab">
<el-tabs v-model="curTab" <el-tabs v-model="curTab" type="card" @tab-click="judChange">
type="card" <el-tab-pane v-for="(item, i) in workbench" :key="item.judgmentId" :label="item.name" :value="item.judgmentId">
@tab-click="judChange"> <codemirror v-if="!language" :ref="'code' + i" :key="codeKey" :projectId.sync="projectId"
<el-tab-pane v-for="(item, i) in workbench" :systemId.sync="systemId" :code.sync="item.code" :finalCode.sync="item.finalCode"
:key="item.judgmentId" :judgmentId="item.judgmentId" :codeId.sync="item.codeId" :answer.sync="item.answer"
:label="item.name" :retResult.sync="item.retResult" :photoUrl.sync="item.photoUrl" :index="i" :curTab.sync="curTab"
:value="item.judgmentId"> :modelIsShow.sync="modelIsShow"></codemirror>
<codemirror v-if="!language" <iframe v-else class="vscode" :src="Config.vscodeUrl" frameborder="0" width="100%"></iframe>
:ref="'code' + i"
:key="codeKey"
:projectId.sync="projectId"
:systemId.sync="systemId"
:code.sync="item.code"
:finalCode.sync="item.finalCode"
:judgmentId="item.judgmentId"
:codeId.sync="item.codeId"
:answer.sync="item.answer"
:retResult.sync="item.retResult"
:photoUrl.sync="item.photoUrl"
:index="i"
:curTab.sync="curTab"
:modelIsShow.sync="modelIsShow"
@cache="leavePage"></codemirror>
<iframe v-else
class="vscode"
:src="Config.vscodeUrl"
frameborder="0"
width="100%"></iframe>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<div class="menu"> <div class="menu">
<testPanel @tell="setPoints" <testPanel @tell="setPoints" @recoveryCode="recoveryCode" ref="mainindex" :workbench.sync="workbench"></testPanel>
@recoveryCode="recoveryCode"
ref="mainindex"
:workbench.sync="workbench"></testPanel>
</div> </div>
<div v-if="isSubmit" <div v-if="isSubmit" class="mask"></div>
class="mask"></div>
</div> </div>
</template> </template>
@ -136,6 +90,22 @@ export default {
testPanel testPanel
}, },
mounted () { mounted () {
const opened = localStorage.getItem('opened')
if (opened || opened === '0') {
localStorage.setItem('opened', +opened + 1)
} else {
localStorage.setItem('opened', 1)
}
window.addEventListener('unload', function () {
const opened = localStorage.getItem('opened')
if (opened) {
localStorage.setItem('opened', +opened - 1)
} else {
localStorage.removeItem('opened')
}
});
console.log(11, localStorage.getItem('opened'))
document.onkeydown = function (event) { document.onkeydown = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0]; var e = event || window.event || arguments.callee.caller.arguments[0];
@ -153,31 +123,8 @@ export default {
this.isSubmit = isSubmit this.isSubmit = isSubmit
}) })
this.autoLogout() this.autoLogout()
// 绑定页面离开监听
window.onbeforeunload = () => {
this.leavePage()
}
},
beforeRouteLeave (to, from, next) {
next(this.leavePage())
}, },
methods: { methods: {
// 页面离开的时候缓存未提交的代码（只有未提交状态下才会调用该接口）
leavePage () {
const list = this.workbench
// 未提交，且有判分点，才需要缓存
if (!this.$refs.mainindex.isSubmit && list.length) {
const cache = {
projectId: Number(this.projectId),
judgmentIdList: this.workbench.map(e => e.judgmentId)
}
// 如果有输入代码，则要入库，否则，只保存到本地
if (!list.some(e => e.code)) {
cache.empty = true // 没有输入代码的，加个标识，回到页面的时候不需要调接口了，只需要恢复项目和判分点即可
}
localStorage.setItem('codeCache', JSON.stringify(cache)) // 在本地缓存里保存项目id和判分点id，下次进来通过这两个id去查找缓存代码。之所以不在前端缓存代码是预防更换了浏览器或电脑后依然可以找回缓存代码，只不过更换了客户端后本地缓存就消失了，这种情况就做一个向下处理，就切换项目的时候去恢复代码
}
},
// 获取导入模型按钮展示状态 // 获取导入模型按钮展示状态
getModelStatus (systemId) { getModelStatus (systemId) {
this.$post(`${this.api.displayListOrNotByStudent}?systemId=${systemId}`).then(res => { this.$post(`${this.api.displayListOrNotByStudent}?systemId=${systemId}`).then(res => {
@ -195,6 +142,7 @@ export default {
}, },
// 跳转我的数据 // 跳转我的数据
toData () { toData () {
return console.log(11, localStorage.getItem('opened'))
this.$router.push('/data') this.$router.push('/data')
}, },
// 长时间未点击页面，就自动退出页面 // 长时间未点击页面，就自动退出页面
@ -262,31 +210,37 @@ export default {
[v-cloak] { [v-cloak] {
display: none; display: none;
} }
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 58px; height: 58px;
line-height: 58px; line-height: 58px;
background-color: #f8f8f8; background-color: #f8f8f8;
&.hh { &.hh {
padding: 10px 0; padding: 10px 0;
line-height: normal; line-height: normal;
} }
p { p {
margin-left: 18px; margin-left: 18px;
font-size: 20px; font-size: 20px;
color: rgba(51, 51, 51, 1); color: rgba(51, 51, 51, 1);
} }
.logo { .logo {
width: 200px; width: 200px;
margin-left: 10px; margin-left: 10px;
} }
.back { .back {
padding: 23px 50px; padding: 23px 50px;
border: none; border: none;
border-radius: 0; border-radius: 0;
} }
} }
/deep/.top { /deep/.top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -294,20 +248,25 @@ export default {
height: 60px; height: 60px;
padding: 0 15px; padding: 0 15px;
line-height: 60px; line-height: 60px;
.language { .language {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
p { p {
font-size: 16px; font-size: 16px;
margin-right: 15px; margin-right: 15px;
} }
.el-input { .el-input {
width: 200px; width: 200px;
} }
.el-input .el-input__inner { .el-input .el-input__inner {
border-radius: 30px; border-radius: 30px;
} }
.open-vs { .open-vs {
margin-left: 20px; margin-left: 20px;
} }
@ -316,47 +275,60 @@ export default {
.vscode { .vscode {
height: calc(100vh - 186px); height: calc(100vh - 186px);
} }
.menu { .menu {
position: relative; position: relative;
z-index: 1000; z-index: 1000;
} }
::v-deep .el-dialog--center { ::v-deep .el-dialog--center {
width: 400px; width: 400px;
} }
::v-deep .el-dialog__headerbtn .el-icon-close:before { ::v-deep .el-dialog__headerbtn .el-icon-close:before {
padding: 3px; padding: 3px;
border-radius: 50%; border-radius: 50%;
} }
/deep/.tab { /deep/.tab {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
.el-tabs__header { .el-tabs__header {
margin-bottom: 0; margin-bottom: 0;
} }
.el-tabs__item.is-active { .el-tabs__item.is-active {
color: #333; color: #333;
} }
.el-icon-circle-plus-outline:before { .el-icon-circle-plus-outline:before {
font-size: 16px; font-size: 16px;
} }
.el-tabs--card > .el-tabs__header {
.el-tabs--card>.el-tabs__header {
border-bottom: none; border-bottom: none;
} }
.el-tabs--card > .el-tabs__header .el-tabs__nav {
.el-tabs--card>.el-tabs__header .el-tabs__nav {
border: none; border: none;
} }
.el-tabs--card > .el-tabs__header .el-tabs__item {
.el-tabs--card>.el-tabs__header .el-tabs__item {
border-left: none; border-left: none;
border-bottom: none; border-bottom: none;
} }
} }
.info { .info {
color: #bfbfbf; color: #bfbfbf;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: 0.9; opacity: 0.9;
} }
} }
.mask { .mask {
z-index: 999; z-index: 999;
position: absolute; position: absolute;

Write Preview
Loading…
Cancel
Save