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.
887 lines
43 KiB
887 lines
43 KiB
<template> |
|
<div class="box"> |
|
<div class="exp-header"> |
|
<div class="flex-between"> |
|
<div class="per_title" v-preventReClick @click="goback()"> |
|
<i class="el-icon-arrow-left"></i> |
|
<span class="per_back">返回</span> |
|
<span class="per_school">查看报告</span> |
|
</div> |
|
<div> |
|
<el-button type="primary" size="mini" @click="exportPage">导出实验报告</el-button> |
|
</div> |
|
</div> |
|
</div> |
|
<el-row :gutter="200"> |
|
<el-col :span="24"> |
|
<div id="pdfDom"> |
|
<h6 style="text-align: center;font-size: 20px">标准实验报告</h6> |
|
<div class="flex-center mgb20 user_header"> |
|
<p class="addhr_tag"></p> |
|
<span style="font-size: 18px">基本信息</span> |
|
</div> |
|
|
|
<div> |
|
<el-table :data="infoData" class="info-table" style="margin-bottom: 40px" header-align="center"> |
|
<el-table-column prop="userName" label="学生姓名" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="workNumber" label="学生学号" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="className" label="学生班级" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="teacherName" label="指导老师" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="period" label="实验学时" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="laboratory" label="实验室名称" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="startTime" label="实验时间" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="score" label="实验成绩" align="center"> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
|
|
<div class="mgb20"> |
|
<div class="meta-title-wrap"> |
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验项目名称</p> |
|
</div> |
|
<el-input v-model="form.projectName" type="textarea" :disabled="true" rows="5"></el-input> |
|
</div> |
|
|
|
<div class="mgb20"> |
|
<div class="meta-title-wrap"> |
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验目的</p> |
|
</div> |
|
<el-input v-model="form.purpose" type="textarea" :disabled="true" rows="5"></el-input> |
|
</div> |
|
|
|
<div class="mgb20"> |
|
<div class="meta-title-wrap"> |
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验原理</p> |
|
</div> |
|
<el-input v-model="form.principle" type="textarea" :disabled="true" rows="5"></el-input> |
|
</div> |
|
|
|
<div class="mgb20"> |
|
<div class="meta-title-wrap"> |
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验内容</p> |
|
</div> |
|
<el-input v-model="form.content" type="textarea" :disabled="true" rows="5"></el-input> |
|
</div> |
|
|
|
<div class="mgb20"> |
|
<div class="meta-title-wrap"> |
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验器材（设备、元器件）</p> |
|
</div> |
|
<el-input v-model="form.equipment" type="textarea" :disabled="true" rows="5"></el-input> |
|
</div> |
|
|
|
<div class="mgb20"> |
|
<div class="meta-title-wrap"> |
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验步骤</p> |
|
</div> |
|
<el-input v-model="form.step" type="textarea" :disabled="true" rows="5"></el-input> |
|
</div> |
|
|
|
<div class="mgb20"> |
|
<div class="meta-title-wrap"> |
|
<p class="meta-title">实验数据</p> |
|
<!-- <span>得分：50/60</span> --> |
|
</div> |
|
<el-table :data="sjData" class="table" stripe header-align="center"> |
|
<el-table-column type="index" width="100" label="序号" align="center"> |
|
<template slot-scope="scope"> |
|
{{scope.$index + 1}} |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="judgmentPointsName" label="考核点" align="center"> |
|
</el-table-column> |
|
<el-table-column prop="userAnswers" label="学生答案" align="center"> |
|
<template slot-scope="scope"> |
|
<pre v-html="scope.row.userAnswers"></pre> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="referenceAnswer" label="参考答案" align="center"> |
|
<template slot-scope="scope"> |
|
<div v-html="scope.row.referenceAnswer"></div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="score" label="得分" align="center"> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
|
|
<div class="mgb20"> |
|
<div class="meta-title-wrap"> |
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验数据及结果分析</p> |
|
</div> |
|
<div class="reportCard_view reportCard_bck mat20" v-if="pattern == 0"> |
|
<div class="reportCard_bor mat20"> |
|
<div class="flex-between "> |
|
<div> |
|
<div class="flex-between"> |
|
<div class="flex-center"> |
|
<p class="hr_tag"></p> |
|
<span class="hr_text"> 现货盈亏</span> |
|
</div> |
|
</div> |
|
<el-table :data="patternOne.goodsData" :span-method="objectSpanMethod" stripe header-align="center" class="mat10"> |
|
<el-table-column prop="name" label="现货" align="center"></el-table-column> |
|
<el-table-column prop="num" label="数量" align="center"></el-table-column> |
|
<el-table-column prop="time" label="时间" align="center"></el-table-column> |
|
<el-table-column prop="price" label="价格" align="center"></el-table-column> |
|
<el-table-column prop="marketValue" label="现货市值" align="center"></el-table-column> |
|
<el-table-column prop="proftAndLoss" label="累计盈亏" align="center"></el-table-column> |
|
</el-table> |
|
</div> |
|
<div class="add_img"> |
|
<img src="../../assets/img/add.png" alt=""> |
|
</div> |
|
<div> |
|
<div class="flex-between"> |
|
<div class="flex-center"> |
|
<p class="hr_tag"></p> |
|
<span class="hr_text"> 期权盈亏</span> |
|
</div> |
|
</div> |
|
<el-table :data="patternOne.futuresData" :span-method="objectSpanMethod1" stripe header-align="center" class="mat10"> |
|
<el-table-column prop="name" label="期权名称" align="center"></el-table-column> |
|
<el-table-column prop="dir" label="交易方向" align="center"></el-table-column> |
|
<el-table-column prop="num" label="数量" align="center"></el-table-column> |
|
<el-table-column prop="time" label="时间" align="center"></el-table-column> |
|
<el-table-column prop="price" label="价格" align="center"></el-table-column> |
|
<el-table-column prop="marketValue" label="期权市值" align="center"></el-table-column> |
|
<el-table-column prop="proftAndLoss" label="累计盈亏" align="center"></el-table-column> |
|
</el-table> |
|
</div> |
|
<div class="add_img"> |
|
<img src="../../assets/img/equal.png" alt=""> |
|
</div> |
|
<div> |
|
<div class="flex-between"> |
|
<div class="flex-center"> |
|
<p class="hr_tag"></p> |
|
<span class="hr_text"> 策略总盈亏</span> |
|
</div> |
|
</div> |
|
<el-table :data="patternOne.futuresLoss" stripe header-align="center" class="mat10"> |
|
<el-table-column prop="futuresLoss" width="110" label="策略总盈亏" align="center"></el-table-column> |
|
</el-table> |
|
</div> |
|
</div> |
|
<div class="mat20"> |
|
<div class="flex-between"> |
|
<div class="flex-center"> |
|
<p class="hr_tag"></p> |
|
<span class="hr_text"> 套期保值率</span> |
|
</div> |
|
</div> |
|
<el-table :data="patternOne.hisPositionData1" stripe header-align="center" class="mat10" > |
|
<el-table-column prop="percent" label="套期保值率" align="center"></el-table-column> </el-table> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="reportCard_bor mat20" v-if="pattern == 1"> |
|
<div class="history_content"> |
|
<div > |
|
<div class="flex-between"> |
|
<div class="flex-center"> |
|
<p class="hr_tag"></p> |
|
<span class="hr_text"> 现货盈亏情况</span> |
|
</div> |
|
</div> |
|
<div> |
|
<el-table |
|
:data="patternTwo.goodsData" |
|
stripe |
|
header-align="center" |
|
class="mat10" |
|
> |
|
<el-table-column prop="endTime" label="数据时间" width="180" align="center"></el-table-column> |
|
<el-table-column prop="timeForStock" label="持仓时间段" align="center"></el-table-column> |
|
<el-table-column prop="stackName" label="现货" align="center"></el-table-column> |
|
<el-table-column prop="trading" label="头寸" align="center"></el-table-column> |
|
<el-table-column prop="num" label="数量" align="center"></el-table-column> |
|
<el-table-column prop="startPrice" label="启始价格" align="center"></el-table-column> |
|
<el-table-column prop="stockPrice" label="当日价格" align="center"></el-table-column> |
|
<el-table-column prop="stageLoss" label="阶段盈亏" align="center"></el-table-column> |
|
<el-table-column prop="totalLossDto" label="累计盈亏" align="center"></el-table-column> |
|
</el-table> |
|
</div> |
|
</div> |
|
</div> |
|
<div> |
|
<div> |
|
<div class="flex-between"> |
|
<div class="flex-center"> |
|
<p class="hr_tag"></p> |
|
<span class="hr_text"> 期权持仓与盈亏情况</span> |
|
</div> |
|
</div> |
|
<div> |
|
<el-table |
|
:data="patternTwo.hisPositionData" |
|
stripe |
|
header-align="center" |
|
class="mat10" |
|
> |
|
<el-table-column prop="openTime" label="数据时间" width="180" align="center"></el-table-column> |
|
<el-table-column prop="endTime" label="持仓时间段" align="center"></el-table-column> |
|
<el-table-column prop="optionName" label="期权合约名称" align="center"></el-table-column> |
|
<el-table-column prop="trading" label="交易方向" align="center"></el-table-column> |
|
<el-table-column prop="num" label="数量（手）" align="center"></el-table-column> |
|
<el-table-column prop="openPrice" label="启始价格" align="center"></el-table-column> |
|
<el-table-column prop="endPrice" label="当日价格" align="center"></el-table-column> |
|
<el-table-column prop="totalLoss" label="阶段盈亏" align="center"></el-table-column> |
|
<el-table-column prop="delta" label="当日delta" align="center"></el-table-column> |
|
<el-table-column prop="totalLoss" label="累计盈亏" align="center"></el-table-column> |
|
</el-table> |
|
</div> |
|
</div> |
|
<div> |
|
<el-table |
|
:data="patternTwo.hisPositionData1" |
|
stripe |
|
header-align="center" |
|
class="mat10" |
|
> |
|
<el-table-column prop="totalLoss" label="总盈亏" align="center"></el-table-column> |
|
<el-table-column prop="percent" label="套期保值率" align="center"></el-table-column> |
|
</el-table> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="reportCard_view reportCard_bck mat20" v-if="pattern == 2"> |
|
<div class="flex-center"> |
|
<p class="hr_tag"></p> |
|
<span class="hr_text">实验数据</span> |
|
</div> |
|
<div class="reportCard_bor mat20"> |
|
<div class="flex-between "> |
|
<div> |
|
<div class="flex-between"> |
|
<div class="flex-center"> |
|
<p class="hr_tag"></p> |
|
<span class="hr_text"> 现货盈亏</span> |
|
</div> |
|
</div> |
|
<el-table :data="patternThree.goodsData" :span-method="objectSpanMethod" stripe header-align="center" class="mat10"> |
|
<el-table-column prop="name" label="现货" align="center"></el-table-column> |
|
<el-table-column prop="num" label="数量" align="center"></el-table-column> |
|
<el-table-column prop="time" label="时间" align="center"></el-table-column> |
|
<el-table-column prop="price" label="价格" align="center"></el-table-column> |
|
<el-table-column prop="marketValue" label="现货市值" align="center"></el-table-column> |
|
<el-table-column prop="proftAndLoss" label="累计盈亏" align="center"></el-table-column> |
|
</el-table> |
|
</div> |
|
<div class="add_img"> |
|
<img src="../../assets/img/add.png" alt=""> |
|
</div> |
|
<div> |
|
<div class="flex-between"> |
|
<div class="flex-center"> |
|
<p class="hr_tag"></p> |
|
<span class="hr_text"> 期货盈亏</span> |
|
</div> |
|
</div> |
|
<el-table :data="patternThree.futuresData" :span-method="objectSpanMethod1" stripe header-align="center" class="mat10"> |
|
<el-table-column prop="name" label="期货名称" align="center"></el-table-column> |
|
<el-table-column prop="dir" label="交易方向" align="center"></el-table-column> |
|
<el-table-column prop="num" label="数量" align="center"></el-table-column> |
|
<el-table-column prop="time" label="时间" align="center"></el-table-column> |
|
<el-table-column prop="price" label="价格" align="center"></el-table-column> |
|
<el-table-column prop="marketValue" label="期货市值" align="center"></el-table-column> |
|
<el-table-column prop="proftAndLoss" label="累计盈亏" align="center"></el-table-column> |
|
</el-table> |
|
</div> |
|
<div class="add_img"> |
|
<img src="../../assets/img/equal.png" alt=""> |
|
</div> |
|
<div> |
|
<div class="flex-between"> |
|
<div class="flex-center"> |
|
<p class="hr_tag"></p> |
|
<span class="hr_text"> 策略总盈亏</span> |
|
</div> |
|
</div> |
|
<el-table :data="patternThree.futuresLoss" stripe header-align="center" class="mat10"> |
|
<el-table-column prop="futuresLoss" width="110" label="策略总盈亏" align="center"></el-table-column> |
|
</el-table> |
|
</div> |
|
</div> |
|
<div class="mat20"> |
|
<div class="flex-between"> |
|
<div class="flex-center"> |
|
<p class="hr_tag"></p> |
|
<span class="hr_text"> 套期保值率</span> |
|
</div> |
|
</div> |
|
<el-table :data="patternThree.hisPositionData1" stripe header-align="center" class="mat10" > |
|
<el-table-column prop="level" label="套期保值率" align="center"></el-table-column> |
|
</el-table> |
|
</div> |
|
</div> |
|
</div> |
|
<div v-if="pattern == 3"> |
|
<div v-for="item in patternFour.reportList" :key="item.id" class="item_wrap"> |
|
<div class="select_wrap"> |
|
{{item.id + 1}} |
|
</div> |
|
<div class="table_wrap"> |
|
<el-table :data="item.tableData" stripe header-align="center" border :span-method="mergeColumn"> |
|
<el-table-column prop="arbitrageDirection" align="center" label="套利方向" ></el-table-column> |
|
<el-table-column prop="futureName" align="center" label="合约" ></el-table-column> |
|
<el-table-column prop="transactionTime" align="center" label="开仓时间" ></el-table-column> |
|
<el-table-column align="center" label="开仓方向" > |
|
<template slot-scope="scope">{{scope.row.tradeDirection == 'BUY'?'买入':'卖出'}}</template> |
|
</el-table-column> |
|
<el-table-column align="center" label="开仓价" > |
|
<template slot-scope="scope"> |
|
{{scope.row.price}}元/吨 |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="closeTime" align="center" label="平仓时间" ></el-table-column> |
|
<el-table-column prop="closeType" align="center" label="平仓方式" ></el-table-column> |
|
<el-table-column prop="closePrice" align="center" label="平仓价" ></el-table-column> |
|
<el-table-column prop="count" align="center" label="数量" > |
|
<template slot-scope="scope"> |
|
{{scope.row.futureName.includes('现货')? `${scope.row.quantity}(吨)`:`${scope.row.quantity}(手)`}} |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="profit" align="center" label="合约盈亏" ></el-table-column> |
|
<el-table-column prop="closeProfit" align="center" label="持仓成本损益" ></el-table-column> |
|
<el-table-column prop="totalProfit" align="center" label="总盈亏" ></el-table-column> |
|
<el-table-column prop="annualizedRate" align="center" label="年化收益率" ></el-table-column> |
|
</el-table> |
|
<!-- 折线图区域 --> |
|
<div class="chart_wrap"> |
|
<div class="chart_one"> |
|
<div class="line_wrap"> |
|
<div :id="'line_contentOne' + item.id" class="line_content"></div> |
|
</div> |
|
</div> |
|
<div class="chart_two"> |
|
<div class="chart_two_title">无套利区间</div> |
|
<div class="line_wrap"> |
|
<div :id="'line_contentTwo' + item.id" class="line_content"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<el-input style="margin-top: 20px" v-model="form.analysis" type="textarea" :disabled="true" rows="5"></el-input> |
|
</div> |
|
|
|
<div class="mgb20"> |
|
<div class="meta-title-wrap"> |
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验结论</p> |
|
</div> |
|
<el-input type="textarea" v-model="form.conclusion" rows="5" disabled></el-input> |
|
</div> |
|
|
|
<div class="mgb20"> |
|
<div class="meta-title-wrap"> |
|
<p class="meta-title"><i class="el-icon-discount"></i> 总结及心得体会</p> |
|
</div> |
|
<el-input type="textarea" v-model="form.summarize" rows="5" disabled></el-input> |
|
</div> |
|
|
|
<div class="mgb20"> |
|
<div class="meta-title-wrap"> |
|
<p class="meta-title"><i class="el-icon-discount"></i> 对本实验过程及方法、手段的改进建议</p> |
|
</div> |
|
<el-input type="textarea" rows="5" v-model="form.improvement" disabled></el-input> |
|
</div> |
|
|
|
<div class="mgb20"> |
|
<div class="meta-title-wrap"> |
|
<p class="meta-title"><i class="el-icon-discount"></i> 老师评语</p> |
|
</div> |
|
<el-input type="textarea" rows="5" v-model="form.comment" disabled></el-input> |
|
</div> |
|
|
|
<div class="mgb20" v-if="form.isSignature"> |
|
<div class="meta-title-wrap"> |
|
<p class="meta-title"><i class="el-icon-discount"></i> 老师签名</p> |
|
</div> |
|
<img :src="signSrc" alt="" style="max-width: 400px;"> |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import echarts from 'echarts/lib/echarts'; |
|
import html2Canvas from 'html2canvas' |
|
import JsPDF from 'jspdf' |
|
export default { |
|
data (){ |
|
return { |
|
id: this.$route.query.id, |
|
title: '实验报告', |
|
userId: this.$store.state.userId, |
|
studentId: this.$store.state.studentId, |
|
userName: this.$store.state.userName, |
|
pattern:Number(sessionStorage.getItem('pattern')), |
|
form: { |
|
analysis: '', |
|
conclusion: '', |
|
content: '', |
|
equipment: '', |
|
data: '', |
|
purpose: '', |
|
experimentId: '', |
|
experimentalClassName: '', |
|
improvement: '', |
|
laboratory: '', |
|
period: '', |
|
principle: '', |
|
projectName: '', |
|
score: 0, |
|
step: '', |
|
submitTime: '', |
|
summarize: '', |
|
teacherName: '', |
|
userId: this.userId, |
|
userName: this.userName, |
|
workNumber: '', |
|
analysis: '', |
|
comment: '' |
|
}, |
|
signSrc: '', |
|
patternOne:{ |
|
goodsData:[], |
|
futuresData:[], |
|
futuresLoss:[], |
|
hisPositionData1:[] |
|
}, |
|
patternTwo:{ |
|
goodsData:[], |
|
hisPositionData:[], |
|
hisPositionData1:[] |
|
}, |
|
patternThree:{ |
|
goodsData:[], |
|
futuresData:[], |
|
futuresLoss:[], |
|
hisPositionData1:[] |
|
}, |
|
patternFour:{ |
|
reportList:[] |
|
}, |
|
sjData: [], |
|
infoData: [], |
|
expData: [], |
|
} |
|
}, |
|
mounted(){ |
|
this.getData() |
|
this.getSgin() |
|
}, |
|
methods: { |
|
//合并持仓指定列 |
|
mergeColumn({ row, column, rowIndex, columnIndex }){ |
|
if(columnIndex == 0 || columnIndex == 11 || columnIndex == 12){ |
|
if (rowIndex % 2 === 0) { |
|
return { |
|
rowspan: 2, |
|
colspan: 1 |
|
}; |
|
} else { |
|
return { |
|
rowspan: 0, |
|
colspan: 0 |
|
}; |
|
} |
|
} |
|
}, |
|
//渲染echart表单 |
|
drawChart(){ |
|
this.patternFour.reportList.forEach(item =>{ |
|
setTimeout(() => { |
|
let myChart = echarts.init(document.getElementById('line_contentOne' + item.id)); |
|
let myChartTwo = echarts.init(document.getElementById('line_contentTwo' + item.id)); |
|
myChart.setOption(item.option); |
|
myChartTwo.setOption(item.optionTwo); |
|
}, 500); |
|
}) |
|
}, |
|
getData(){ |
|
let data = { |
|
reportId: this.id, |
|
userId: this.userId, |
|
} |
|
this.$get(this.api.getReport,data).then(res => { |
|
let report = res.data.experimentalReportEntity |
|
let steps = [] |
|
for(let i in report){ |
|
if(i.includes('steps') && report[i]) steps.push(JSON.parse(report[i])) |
|
} |
|
this.form = report |
|
switch(this.pattern) |
|
{ |
|
case 0: |
|
if(report.steps9){ |
|
let steps9 = JSON.parse(report.steps9) |
|
this.patternOne.goodsData = steps9.goodsData ? steps9.goodsData: [] |
|
this.patternOne.futuresData = steps9.futuresData ? steps9.futuresData: [] |
|
this.patternOne.futuresLoss = steps9.futuresLoss ? steps9.futuresLoss: [] |
|
this.patternOne.hisPositionData1 = steps9.hisPositionData1 ? steps9.hisPositionData1: [] |
|
} |
|
break; |
|
case 1: |
|
if(report.steps9){ |
|
let steps9 = JSON.parse(report.steps9) |
|
this.patternTwo.goodsData = steps9.goodsData ? steps9.goodsData: [] |
|
this.patternTwo.hisPositionData = steps9.hisPositionData ? steps9.hisPositionData: [] |
|
this.patternTwo.hisPositionData1 = steps9.hisPositionData1 ? steps9.hisPositionData1: [] |
|
} |
|
break; |
|
case 2: |
|
if(report.steps9){ |
|
let steps9 = JSON.parse(report.steps9) |
|
this.patternThree.goodsData = steps9.goodsData ? steps9.goodsData: [] |
|
this.patternThree.futuresData = steps9.futuresData ? steps9.futuresData: [] |
|
this.patternThree.futuresLoss = steps9.futuresLoss ? steps9.futuresLoss: [] |
|
this.patternThree.hisPositionData1 = steps9.hisPositionData1 ? steps9.hisPositionData1: [] |
|
} |
|
break; |
|
case 3: |
|
if(report.steps6){ |
|
let steps6 = JSON.parse(report.steps6) |
|
console.log(steps6); |
|
|
|
this.patternFour.reportList = steps6 ? steps6: [] |
|
console.log(this.patternFour.reportList); |
|
|
|
this.drawChart() |
|
} |
|
break |
|
|
|
} |
|
|
|
|
|
|
|
let score = res.data.score |
|
let answerList = [] |
|
for(let i in res.data.userAnswersList){ |
|
answerList = answerList.concat(res.data.userAnswersList[i]) |
|
} |
|
let sjData = [] |
|
answerList.map(n => { |
|
if(n.type == 1){ |
|
this.$post(this.api.queryItem,n.levelThree) |
|
.then((res) => { |
|
n.levelFour = res.subject.find(e => e.id == n.levelFour).itemDescription |
|
}).catch((err) => {}) |
|
} |
|
}) |
|
let ids = [] |
|
setTimeout(() => { |
|
score.map(n => { |
|
let item = answerList.find(e => e.tradingJudgmentPointsId == n.tradingJudgmentPointsId) |
|
sjData.push({ |
|
judgmentPointsName: item.judgmentPointsName, |
|
userAnswers: n.userAnswers, |
|
referenceAnswer: item.levelFour, |
|
score: n.userScore, |
|
type: n.type |
|
}) |
|
n.type == 1 && ids.push(`ids=${n.userAnswers}`) |
|
}) |
|
this.$get(`${this.api.getItemContentByIds}?${ids.join('&')}`).then((res) => { |
|
let list = res.data |
|
sjData.map(n => { |
|
if(n.type == 1){ |
|
let item = list.find(e => e.id == n.userAnswers) |
|
if(item) n.userAnswers = item.itemDescription |
|
} |
|
}) |
|
}).catch((err) => {}) |
|
},500) |
|
|
|
this.sjData = sjData |
|
this.infoData.push({ |
|
workNumber: report.workNumber, |
|
className: report.className, |
|
teacherName: report.teacherName, |
|
period: report.period, |
|
laboratory: report.laboratory, |
|
startTime: report.creationTime, |
|
score: report.score, |
|
userName: this.userName |
|
}) |
|
}).catch(res => {}) |
|
}, |
|
//合并行 |
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) { |
|
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 5) { |
|
if (rowIndex % 2 === 0) { |
|
return { |
|
rowspan: 2, |
|
colspan: 1 |
|
}; |
|
} else { |
|
return { |
|
rowspan: 0, |
|
colspan: 0 |
|
}; |
|
} |
|
} |
|
}, |
|
//合并行 |
|
objectSpanMethod1({ row, column, rowIndex, columnIndex }) { |
|
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 6) { |
|
if (rowIndex % 2 === 0) { |
|
return { |
|
rowspan: 2, |
|
colspan: 1 |
|
}; |
|
} else { |
|
return { |
|
rowspan: 0, |
|
colspan: 0 |
|
}; |
|
} |
|
} |
|
}, |
|
getSgin(){ |
|
let data = { |
|
reportId: this.id |
|
} |
|
this.$get(this.api.reportSignature,data).then(res => { |
|
this.signSrc = res.data.signatureUrl |
|
}).catch(res => {}) |
|
}, |
|
goback(){ |
|
this.$router.go(-1) |
|
}, |
|
exportPage(){ |
|
var title = this.title; |
|
html2Canvas(document.querySelector('#pdfDom'), { |
|
allowTaint: true |
|
}).then(function (canvas) { |
|
let contentWidth = canvas.width |
|
let contentHeight = canvas.height |
|
let pageHeight = contentWidth / 592.28 * 841.89 |
|
let leftHeight = contentHeight |
|
let position = 0 |
|
let imgWidth = 595.28 |
|
let imgHeight = 592.28 / contentWidth * contentHeight |
|
let pageData = canvas.toDataURL('image/jpeg', 1.0) |
|
let PDF = new JsPDF('', 'pt', 'a4') |
|
if (leftHeight < pageHeight) { |
|
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) |
|
} else { |
|
while (leftHeight > 0) { |
|
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) |
|
leftHeight -= pageHeight |
|
position -= 841.89 |
|
if (leftHeight > 0) { |
|
PDF.addPage() |
|
} |
|
} |
|
} |
|
PDF.save(title + '.pdf') |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.chart_two_title{ |
|
height: 60px; |
|
line-height: 60px; |
|
width: 100%; |
|
text-align: center; |
|
font-size: 18px; |
|
color: #3D8BF7; |
|
} |
|
.chart_one{ |
|
padding: 50px 120px; |
|
box-sizing: border-box; |
|
} |
|
.chart_two{ |
|
margin: 20px 40px; |
|
padding: 10px 50px; |
|
border: 3px solid #3D8BF7; |
|
box-sizing: border-box; |
|
} |
|
.chart_wrap{ |
|
box-sizing: border-box; |
|
border: 2px solid #3D8BF7; |
|
border-left: none; |
|
} |
|
.line_wrap{ |
|
height: 400px; |
|
width: 100%; |
|
background: rgb(248, 245, 245); |
|
.line_content{ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
.design_chart_empty{ |
|
background: url(../../assets/img/offshelf.png) 58% 50% no-repeat; |
|
background-size: 250px ; |
|
} |
|
} |
|
.item_wrap{ |
|
display: flex; |
|
// justify-content: center; |
|
margin-left:60px ; |
|
align-items: center; |
|
padding: 0px 20px; |
|
position: relative; |
|
.table_wrap{ |
|
width: 90%; |
|
box-sizing: border-box; |
|
margin-left: 80px; |
|
} |
|
|
|
} |
|
.select_wrap{ |
|
text-align: center; |
|
width: 80px; |
|
height: 100%; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
position: absolute; |
|
box-sizing: border-box; |
|
border: 2px solid #3D8BF7; |
|
} |
|
.mat10{ |
|
margin-top: 10px; |
|
margin-bottom: 10px; |
|
} |
|
.reportCard_view { |
|
padding: 20px 40px; |
|
} |
|
.reportCard_bck { |
|
background-color: #f9f9f9; |
|
} |
|
.add_img{ |
|
img{ |
|
width: 80px; |
|
min-width: 50px; |
|
max-width: 100px; |
|
} |
|
} |
|
.reportCard_bor { |
|
width: 100%; |
|
overflow: auto; |
|
border: 1px solid #b2b2b2; |
|
border-radius: 6px; |
|
padding: 20px 10px; |
|
} |
|
.box{ |
|
background-color: #fff; |
|
} |
|
.exp-header{ |
|
padding: 20px 100px; |
|
box-shadow:0px 0px 25px 2px rgba(48,115,248,0.14); |
|
z-index: 999; |
|
margin-top: 2px; |
|
} |
|
/deep/.el-textarea.is-disabled .el-textarea__inner{ |
|
background-color: #ebfafd; |
|
} |
|
#pdfDom{ |
|
padding: 100px; |
|
/deep/.info-table{ |
|
border: 0; |
|
th{ |
|
background-color: #fff !important; |
|
.cell{ |
|
color: #444; |
|
} |
|
} |
|
tr{ |
|
border: 0; |
|
} |
|
tr:hover,tr:hover>td{ |
|
background-color: #c6f2f8 !important; |
|
} |
|
td{ |
|
border: { |
|
left: 4px solid #fff; |
|
right: 4px solid #fff; |
|
} |
|
&:first-child{ |
|
border-left: 0; |
|
} |
|
&:last-child{ |
|
border-right: 0; |
|
} |
|
background-color: #c6f2f8; |
|
border-bottom: 0; |
|
} |
|
} |
|
/deep/.table th{ |
|
background-color: #a2a2a2 !important; |
|
} |
|
} |
|
|
|
/deep/.cell{ |
|
font-size: 12px; |
|
} |
|
/deep/.el-row{ |
|
padding-top: 20px; |
|
margin: 0 !important; |
|
} |
|
.form-item{ |
|
display: flex; |
|
align-items: center; |
|
} |
|
.form-item .el-input{ |
|
width: auto; |
|
} |
|
.form-item span{ |
|
margin-right: 10px; |
|
} |
|
.meta-title-wrap{ |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
span{ |
|
font-size: 13px; |
|
color: #444; |
|
} |
|
} |
|
.flex-between{ |
|
span{ |
|
font-size: 13px; |
|
color: #444; |
|
} |
|
} |
|
.meta-title{ |
|
display: flex; |
|
align-items: center; |
|
padding: 10px 20px; |
|
margin-bottom: 10px; |
|
font-size: 16px; |
|
color: #fff; |
|
background-color: #328aff; |
|
i{ |
|
margin-right: 10px; |
|
} |
|
} |
|
.step-title{ |
|
margin-bottom: 10px; |
|
font-size: 16px; |
|
color: #328aff; |
|
} |
|
.bd-title{ |
|
padding-top: 20px; |
|
border-top: 1px dashed #ccc; |
|
} |
|
/deep/.data-wrap{ |
|
display: flex; |
|
|
|
} |
|
</style> |