|
|
|
|
@ -5,59 +5,45 @@ |
|
|
|
|
<el-container v-show="showIt"> |
|
|
|
|
<el-header> |
|
|
|
|
<div class="flex a-center j-between"> |
|
|
|
|
<div class="flex a-center" |
|
|
|
|
style="width: 28%"> |
|
|
|
|
<div class="flex a-center" style="width: 28%"> |
|
|
|
|
<p>实训项目</p> |
|
|
|
|
<el-select v-model.trim="projectId" |
|
|
|
|
placeholder="请选择" |
|
|
|
|
class="select" |
|
|
|
|
disabled |
|
|
|
|
@change="selectProject"> |
|
|
|
|
<el-option v-for="item in topicList" |
|
|
|
|
:key="item.projectId" |
|
|
|
|
:label="item.projectName" |
|
|
|
|
<el-select v-model.trim="projectId" placeholder="请选择" class="select" disabled @change="selectProject"> |
|
|
|
|
<el-option v-for="item in topicList" :key="item.projectId" :label="item.projectName" |
|
|
|
|
:value="item.projectId"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</div> |
|
|
|
|
<div class="countDownBox"> |
|
|
|
|
<div style="margin-left: -40px;"> |
|
|
|
|
<div :sendSync="sendSync" |
|
|
|
|
:autoStart="autoStart" |
|
|
|
|
:defaultVal="defaultVal"> |
|
|
|
|
实训{{text}}时间 |
|
|
|
|
<span class="timeSpan">{{day}}</span>天 |
|
|
|
|
<span class="timeSpan">{{hour}}</span>小时 |
|
|
|
|
<span class="timeSpan">{{minutes}}</span>分 |
|
|
|
|
<span class="timeSpan">{{seconds}}</span>秒 |
|
|
|
|
<div :sendSync="sendSync" :autoStart="autoStart" :defaultVal="defaultVal"> |
|
|
|
|
实训{{ text }}时间 |
|
|
|
|
<span class="timeSpan">{{ day }}</span>天 |
|
|
|
|
<span class="timeSpan">{{ hour }}</span>小时 |
|
|
|
|
<span class="timeSpan">{{ minutes }}</span>分 |
|
|
|
|
<span class="timeSpan">{{ seconds }}</span>秒 |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="countDownBox"> |
|
|
|
|
<div> |
|
|
|
|
总得分： |
|
|
|
|
<span class="gradeSpan">{{grade}}</span> |
|
|
|
|
<span class="gradeSpan">{{ grade }}</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<el-button @click="toReport" |
|
|
|
|
v-if="popContainer">查看实验报告</el-button> |
|
|
|
|
<el-button style="background: #202020;color: #d0d0d0;font-size:16px;" |
|
|
|
|
v-show="projectPermissions == 0" |
|
|
|
|
<el-button @click="toReport" v-if="popContainer">查看实验报告</el-button> |
|
|
|
|
<el-button style="background: #202020;color: #d0d0d0;font-size:16px;" v-show="projectPermissions == 0" |
|
|
|
|
@click="reload" |
|
|
|
|
:disabled="popContainer && (assessmentId!='' && assessmentId!='null' && assessmentId!=null)"> |
|
|
|
|
:disabled="popContainer && (assessmentId != '' && assessmentId != 'null' && assessmentId != null)"> |
|
|
|
|
重新开始 |
|
|
|
|
</el-button> |
|
|
|
|
<el-button class="submit-btn" |
|
|
|
|
style="margin-right:7px" |
|
|
|
|
@click="Submit()" |
|
|
|
|
<el-button class="submit-btn" style="margin-right:7px" @click="Submit()" |
|
|
|
|
:disabled="popContainer || requires.length == 0">提交</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-header> |
|
|
|
|
|
|
|
|
|
<el-container> |
|
|
|
|
<el-aside width="30%" |
|
|
|
|
class="flex flex-col"> |
|
|
|
|
<el-aside width="30%" class="flex flex-col"> |
|
|
|
|
<div class="aside-header"> |
|
|
|
|
<div class="header_h flex a-center"> |
|
|
|
|
<i class="el-icon-s-order"></i> |
|
|
|
|
@ -65,9 +51,7 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="font_css"> |
|
|
|
|
<div class="experimentalGoal"> |
|
|
|
|
<div class="break-all" |
|
|
|
|
v-html="projectManage.experimentTarget" |
|
|
|
|
style="font-size: 0.875rem;"> |
|
|
|
|
<div class="break-all" v-html="projectManage.experimentTarget" style="font-size: 0.875rem;"> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -81,37 +65,19 @@ |
|
|
|
|
<el-row> |
|
|
|
|
<el-col :span="24"> |
|
|
|
|
<el-card shadow="hover"> |
|
|
|
|
<el-table :data="requires" |
|
|
|
|
height="43.5vh" |
|
|
|
|
v-loading="loading" |
|
|
|
|
ref='testTable'> |
|
|
|
|
<el-table :data="requires" height="43.5vh" v-loading="loading" ref='testTable'> |
|
|
|
|
<el-table-column type="index"></el-table-column> |
|
|
|
|
<el-table-column prop="name" |
|
|
|
|
label="判分点" |
|
|
|
|
align="left"> |
|
|
|
|
<el-table-column prop="name" label="判分点" align="left"> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="score" |
|
|
|
|
label="分值" |
|
|
|
|
width="60" |
|
|
|
|
align="center"> |
|
|
|
|
<el-table-column prop="score" label="分值" width="60" align="center"> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="right" |
|
|
|
|
label="完成结果" |
|
|
|
|
width="80" |
|
|
|
|
align="center"> |
|
|
|
|
<el-table-column prop="right" label="完成结果" width="80" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<i v-if="scope.row.right==true" |
|
|
|
|
class="el-icon-check" |
|
|
|
|
style="color:green;"></i> |
|
|
|
|
<i v-else-if="scope.row.right==false" |
|
|
|
|
class="el-icon-close" |
|
|
|
|
style="color:red;"></i> |
|
|
|
|
<i v-if="scope.row.right == true" class="el-icon-check" style="color:green;"></i> |
|
|
|
|
<i v-else-if="scope.row.right == false" class="el-icon-close" style="color:red;"></i> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="scores" |
|
|
|
|
label="得分" |
|
|
|
|
width="60" |
|
|
|
|
align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="scores" label="得分" width="60" align="center"></el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
</el-card> |
|
|
|
|
</el-col> |
|
|
|
|
@ -120,36 +86,24 @@ |
|
|
|
|
</div> |
|
|
|
|
</el-aside> |
|
|
|
|
<el-main> |
|
|
|
|
<el-tabs v-model.trim="activeName" |
|
|
|
|
type="card"> |
|
|
|
|
<el-tab-pane label="案例" |
|
|
|
|
name="first"> |
|
|
|
|
<div class="break-all" |
|
|
|
|
v-html="projectManage.experimentDescription"></div> |
|
|
|
|
<el-tabs v-model.trim="activeName" type="card"> |
|
|
|
|
<el-tab-pane label="案例" name="first"> |
|
|
|
|
<div class="break-all" v-html="projectManage.experimentDescription"></div> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
<el-tab-pane label="实验要求" |
|
|
|
|
name="second"> |
|
|
|
|
<el-collapse :value="activeNames" |
|
|
|
|
accordion> |
|
|
|
|
<el-collapse-item v-for="(item,index) in requires" |
|
|
|
|
:key="index" |
|
|
|
|
:name="item.id"> |
|
|
|
|
<template slot="title" |
|
|
|
|
style='line-height: 0px;'> |
|
|
|
|
<el-tab-pane label="实验要求" name="second"> |
|
|
|
|
<el-collapse :value="activeNames" accordion> |
|
|
|
|
<el-collapse-item v-for="(item, index) in requires" :key="index" :name="item.id"> |
|
|
|
|
<template slot="title" style='line-height: 0px;'> |
|
|
|
|
<i class='el-icon-s-ticket'></i> |
|
|
|
|
<span style="margin: 0px 10px;font-size: 1rem;">{{ item.name }}</span> |
|
|
|
|
</template> |
|
|
|
|
<div class="break-all" |
|
|
|
|
v-html="item.experimentalRequirements"></div> |
|
|
|
|
<div class="break-all" v-html="item.experimentalRequirements"></div> |
|
|
|
|
</el-collapse-item> |
|
|
|
|
<!-- <p ref="scrollTag" style="font-size:16px;"></p> --> |
|
|
|
|
</el-collapse> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
<el-tab-pane label="实验提示" |
|
|
|
|
name="fifth" |
|
|
|
|
v-if="hintOpen == 0"> |
|
|
|
|
<div class="break-all" |
|
|
|
|
v-html="projectManage.experimentHint"></div> |
|
|
|
|
<el-tab-pane label="实验提示" name="fifth" v-if="hintOpen == 0"> |
|
|
|
|
<div class="break-all" v-html="projectManage.experimentHint"></div> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
</el-tabs> |
|
|
|
|
</el-main> |
|
|
|
|
@ -157,32 +111,21 @@ |
|
|
|
|
</el-container> |
|
|
|
|
<!-- </transition> --> |
|
|
|
|
<!-- </div> --> |
|
|
|
|
<div class="panel" |
|
|
|
|
:class="{active: showIt}"> |
|
|
|
|
<div class="panel" :class="{ active: showIt }"> |
|
|
|
|
<div @click="toggleCase"> |
|
|
|
|
<img src="../../assets/img/case/left.png" |
|
|
|
|
alt |
|
|
|
|
v-if="showIt" /> |
|
|
|
|
<img src="../../assets/img/case/right.png" |
|
|
|
|
alt |
|
|
|
|
v-else /> |
|
|
|
|
<img src="../../assets/img/case/left.png" alt v-if="showIt" /> |
|
|
|
|
<img src="../../assets/img/case/right.png" alt v-else /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class='popContainer' |
|
|
|
|
v-if='popContainer'></div> |
|
|
|
|
<div class='popContainer' v-if='popContainer'></div> |
|
|
|
|
|
|
|
|
|
<!-- 遮罩层 --> |
|
|
|
|
<div class="absolute z-50 h-screen bg-transparent inset-0" |
|
|
|
|
v-show="showIt"></div> |
|
|
|
|
<div class="absolute z-50 h-screen bg-transparent inset-0" v-show="showIt"></div> |
|
|
|
|
|
|
|
|
|
<el-dialog title="提示" |
|
|
|
|
:visible.sync="closePaneJudge" |
|
|
|
|
width="30%" |
|
|
|
|
center> |
|
|
|
|
<el-dialog title="提示" :visible.sync="closePaneJudge" width="30%" center> |
|
|
|
|
<h4 class="antialiased text-center text-2xl">请选择你将进行的操作</h4> |
|
|
|
|
<span slot="footer" |
|
|
|
|
class="dialog-footer"> |
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
|
<el-button @click="closePane()">再试一次</el-button> |
|
|
|
|
<!-- <el-button type="primary" @click="closePane(true)">其他业务</el-button> --> |
|
|
|
|
</span> |
|
|
|
|
@ -1002,7 +945,8 @@ $togetherFontSize: 16px; |
|
|
|
|
|
|
|
|
|
.popContainer { |
|
|
|
|
position: absolute; |
|
|
|
|
width: 100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/ |
|
|
|
|
width: 100%; |
|
|
|
|
/*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/ |
|
|
|
|
height: 100%; |
|
|
|
|
z-index: 1000; |
|
|
|
|
top: 0; |
|
|
|
|
@ -1011,8 +955,10 @@ $togetherFontSize: 16px; |
|
|
|
|
bottom: 0; |
|
|
|
|
background: rgba(0, 0, 0, 0.3); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/.el-container { |
|
|
|
|
height: 80%; |
|
|
|
|
|
|
|
|
|
&.is-vertical { |
|
|
|
|
position: fixed; |
|
|
|
|
top: 200px; |
|
|
|
|
@ -1023,6 +969,7 @@ $togetherFontSize: 16px; |
|
|
|
|
background-color: #f5f5f5; |
|
|
|
|
z-index: 1001; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-header { |
|
|
|
|
color: #333; |
|
|
|
|
padding: 0 12px 0 20px; |
|
|
|
|
@ -1041,9 +988,11 @@ $togetherFontSize: 16px; |
|
|
|
|
background: $main-color url(../../assets/img/case/btn.png) 0 0/100% 100% no-repeat; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-aside { |
|
|
|
|
font-size: $togetherFontSize; |
|
|
|
|
color: #333; |
|
|
|
|
|
|
|
|
|
[class*=' el-icon-'], |
|
|
|
|
[class^='el-icon-'] { |
|
|
|
|
line-height: 40px; |
|
|
|
|
@ -1051,6 +1000,7 @@ $togetherFontSize: 16px; |
|
|
|
|
font-size: $togetherFontSize; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-main { |
|
|
|
|
width: 60%; |
|
|
|
|
background-color: #fff; |
|
|
|
|
@ -1062,22 +1012,27 @@ $togetherFontSize: 16px; |
|
|
|
|
background: #fff url(../../assets/img/case/bg.png) top right no-repeat; |
|
|
|
|
// overflow: visible; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.aside-header { |
|
|
|
|
margin: 0px 10px 10px 10px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
font-size: 0.875rem; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.aside-footer { |
|
|
|
|
margin: 0px 10px 10px 10px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.header_h { |
|
|
|
|
height: 40px; |
|
|
|
|
background: url(../../assets/img/case/header.png) 0 0/100% 100% no-repeat; |
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
|
|
i { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
line-height: 40px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
@ -1085,21 +1040,27 @@ $togetherFontSize: 16px; |
|
|
|
|
padding-left: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-card { |
|
|
|
|
border: 0; |
|
|
|
|
border-radius: 0; |
|
|
|
|
|
|
|
|
|
.el-card__body { |
|
|
|
|
padding: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.select { |
|
|
|
|
flex: 1; |
|
|
|
|
|
|
|
|
|
input::-webkit-input-placeholder { |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-input__icon { |
|
|
|
|
line-height: 60px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-select__caret:before { |
|
|
|
|
content: '\e78f'; |
|
|
|
|
font-size: 16px; |
|
|
|
|
@ -1108,6 +1069,7 @@ $togetherFontSize: 16px; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
color: #ffffff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-input--suffix .el-input__inner { |
|
|
|
|
color: #333; |
|
|
|
|
font-size: $togetherFontSize; |
|
|
|
|
@ -1119,6 +1081,7 @@ $togetherFontSize: 16px; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-input { |
|
|
|
|
padding: 10px 0; |
|
|
|
|
} |
|
|
|
|
@ -1136,6 +1099,7 @@ $togetherFontSize: 16px; |
|
|
|
|
margin: 0 10px; |
|
|
|
|
padding: 20px 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.timeSpan { |
|
|
|
|
color: #333333; |
|
|
|
|
padding: 5px 15px; |
|
|
|
|
@ -1145,6 +1109,7 @@ $togetherFontSize: 16px; |
|
|
|
|
margin: 0 5px; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.gradeSpan { |
|
|
|
|
color: #878787; |
|
|
|
|
padding: 10px; |
|
|
|
|
@ -1153,6 +1118,7 @@ $togetherFontSize: 16px; |
|
|
|
|
border-radius: 6px; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-header /deep/.el-button:hover, |
|
|
|
|
.el-button:focus, |
|
|
|
|
.el-button:active { |
|
|
|
|
@ -1162,16 +1128,20 @@ $togetherFontSize: 16px; |
|
|
|
|
|
|
|
|
|
/deep/.el-table { |
|
|
|
|
font-size: 12px; |
|
|
|
|
|
|
|
|
|
thead { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-table__cell { |
|
|
|
|
padding: 12px 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.cell { |
|
|
|
|
font-weight: 100; |
|
|
|
|
font-size: 12px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
td, |
|
|
|
|
th.is-leaf { |
|
|
|
|
border-bottom: 0 !important; |
|
|
|
|
@ -1182,47 +1152,58 @@ $togetherFontSize: 16px; |
|
|
|
|
thead { |
|
|
|
|
color: #ffffff; |
|
|
|
|
font-size: 12px; |
|
|
|
|
|
|
|
|
|
th { |
|
|
|
|
font-weight: 100; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
th, |
|
|
|
|
tr { |
|
|
|
|
background-color: #badfff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-table__row--striped { |
|
|
|
|
td { |
|
|
|
|
background-color: #badfff !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/ .el-collapse { |
|
|
|
|
font-size: 0.875rem; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-collapse-item__content { |
|
|
|
|
padding-left: 10px; |
|
|
|
|
padding-right: 10px; |
|
|
|
|
font-size: $togetherFontSize; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-collapse-item__wrap { |
|
|
|
|
border-bottom: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/.el-collapse-item__header { |
|
|
|
|
font-size: 1rem; |
|
|
|
|
|
|
|
|
|
border-bottom: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__content { |
|
|
|
|
margin: 0 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-icon-s-ticket:before { |
|
|
|
|
font-size: togetherFontSize; |
|
|
|
|
//padding: 5px; |
|
|
|
|
color: $main-color; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-collapse-item__arrow { |
|
|
|
|
margin: 0 5px 0 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-icon-arrow-right:before { |
|
|
|
|
font-size: 12px; |
|
|
|
|
font-size: $togetherFontSize; |
|
|
|
|
@ -1232,18 +1213,23 @@ $togetherFontSize: 16px; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
color: #ffffff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__item { |
|
|
|
|
font-size: 16px; |
|
|
|
|
} |
|
|
|
|
.el-tabs--card > .el-tabs__header .el-tabs__nav { |
|
|
|
|
|
|
|
|
|
.el-tabs--card>.el-tabs__header .el-tabs__nav { |
|
|
|
|
border: none; |
|
|
|
|
} |
|
|
|
|
.el-tabs--card > .el-tabs__header .el-tabs__item { |
|
|
|
|
|
|
|
|
|
.el-tabs--card>.el-tabs__header .el-tabs__item { |
|
|
|
|
border-left: none; |
|
|
|
|
} |
|
|
|
|
.el-tabs--card > .el-tabs__header { |
|
|
|
|
|
|
|
|
|
.el-tabs--card>.el-tabs__header { |
|
|
|
|
border-bottom: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-collapse { |
|
|
|
|
border-bottom: none; |
|
|
|
|
border-top: none; |
|
|
|
|
@ -1251,32 +1237,39 @@ $togetherFontSize: 16px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
overflow-y: auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/.el-collapse-item { |
|
|
|
|
font-size: $togetherFontSize; |
|
|
|
|
background-color: red; |
|
|
|
|
color: red; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__item.is-active { |
|
|
|
|
color: #fff; |
|
|
|
|
background-color: $main-color; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-tabs__header { |
|
|
|
|
padding: 5px 20px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.break-all { |
|
|
|
|
font-size: 16px; |
|
|
|
|
word-break: break-all; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.panel { |
|
|
|
|
position: fixed; |
|
|
|
|
z-index: 10010000; |
|
|
|
|
top: 50%; |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
//z-index: 10; |
|
|
|
|
left: 85%; |
|
|
|
|
z-index: 1001; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
height: 175px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
