|
|
@@ -13,11 +13,16 @@
|
|
|
float: left;
|
|
|
}
|
|
|
}
|
|
|
+ .sec{
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-bottom:70px;
|
|
|
+ }
|
|
|
.hint-img{
|
|
|
position: absolute;
|
|
|
width: 360px;
|
|
|
- bottom: -225px;
|
|
|
- left: calc(50% + 180px);
|
|
|
+ bottom: 10px;
|
|
|
+ right: 20px;
|
|
|
}
|
|
|
}
|
|
|
.table-common{
|
|
|
@@ -75,10 +80,155 @@
|
|
|
}
|
|
|
}
|
|
|
&.smallWidth{
|
|
|
+ width: 800px;
|
|
|
+ margin: 15px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.problem-part{
|
|
|
+ width: 1200px;
|
|
|
+ height: 670px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ &>ul{
|
|
|
+ position: absolute;
|
|
|
+ li{
|
|
|
+ &:nth-child(1){
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+ &:nth-child(2){
|
|
|
+ height: 215px;
|
|
|
+ }
|
|
|
+ &:nth-child(3){
|
|
|
+ height: 280px;
|
|
|
+ }
|
|
|
+ &:nth-child(4){
|
|
|
+ height: 90px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-child(1){
|
|
|
+ left: 10px;
|
|
|
+ width: 100px;
|
|
|
+ div{
|
|
|
+ position: relative;
|
|
|
+ top:50%;
|
|
|
+ transform:translateY(-50%);
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ span{
|
|
|
+ display: inline-block;
|
|
|
+ padding: 2px 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-child(2){
|
|
|
+ width: 600px;
|
|
|
+ left: 110px;
|
|
|
+ border: solid 2px #acaaab;
|
|
|
+ &>li{
|
|
|
+ border-bottom: solid 2px #acaaab;
|
|
|
+ position: relative;
|
|
|
+ &:nth-child(4){
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ &>div{
|
|
|
+ &:nth-child(1){
|
|
|
+ height: 100%;
|
|
|
+ opacity: 0.4;
|
|
|
+ }
|
|
|
+ &:nth-child(2){
|
|
|
+ width: 450px;
|
|
|
+ position: absolute;
|
|
|
+ left: 600px;
|
|
|
+ top:50%;
|
|
|
+ transform:translateY(-50%);
|
|
|
+ text-align: left;
|
|
|
+ &>i{
|
|
|
+ display: inline-block;
|
|
|
+ width: 50px;
|
|
|
+ height: 2px;
|
|
|
+ background: black;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ &>ul{
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 400px;
|
|
|
+ li{
|
|
|
+ position: relative;
|
|
|
+ height: 40px;
|
|
|
+ i:nth-child(1){
|
|
|
+ display: inline-block;
|
|
|
+ width: 46px;
|
|
|
+ height: 2px;
|
|
|
+ background: black;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ i:nth-child(2){
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-top: 5px solid transparent;
|
|
|
+ border-left: 4px solid black;
|
|
|
+ border-bottom: 5px solid transparent;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 350px;
|
|
|
+ height: 40px;
|
|
|
+ border: solid 2px black;
|
|
|
+ border-bottom: none;
|
|
|
+ span{
|
|
|
+ position: relative;
|
|
|
+ padding: 0 2px;
|
|
|
+ display: inline-block;
|
|
|
+ top:50%;
|
|
|
+ transform:translateY(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &::before{
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ left: 0;
|
|
|
+ width: 2px;
|
|
|
+ height: 100%;
|
|
|
+ background: black;
|
|
|
+ }
|
|
|
+ &:first-child::before{
|
|
|
+ height: 50%;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ &:last-child{
|
|
|
+ &::before{
|
|
|
+ height: 50%;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ border-bottom: solid 2px black;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &>img{
|
|
|
position: absolute;
|
|
|
- width: 600px;
|
|
|
- left: calc(50% - 600px);
|
|
|
- bottom: -255px;
|
|
|
+ left: 140px;
|
|
|
+ top: 6px;
|
|
|
+ }
|
|
|
+ &>.word-list{
|
|
|
+ position: absolute;
|
|
|
+ p{
|
|
|
+ position: absolute;
|
|
|
+ &:nth-child(1){
|
|
|
+ left: 20px;
|
|
|
+ top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
@@ -108,7 +258,7 @@
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
- <div v-if="treeToObj[1][0].grade + treeToObj[1][0].subjectId == '9Y2'" style="margin-bottom:300px;">
|
|
|
+ <div v-if="treeToObj[1][0].grade + treeToObj[1][0].subjectId == '9Y2'" class="sec">
|
|
|
<table class="table-common special1" :class="{'smallWidth':index == 2}" border="1" cellspacing="0" v-for="(root,index) in resultList" :key="index">
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
@@ -133,11 +283,37 @@
|
|
|
</table>
|
|
|
<img src="@/images/report/hint.png" class="hint-img">
|
|
|
</div>
|
|
|
+ <div class="problem-part" v-if="treeToObj[1][0].grade + treeToObj[1][0].subjectId == '9Y2'">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item,index) in problemList" :key="index">
|
|
|
+ <div>
|
|
|
+ <p>{{item.step}}：</p>
|
|
|
+ <p>达成率：<span :style="{'background':colorMap[item.masterStatus]}">{{item.master}}%</span></p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item,index) in problemList" :key="index">
|
|
|
+ <div :style="{'background':colorMap[item.masterStatus]}"></div>
|
|
|
+ <div>
|
|
|
+ <i></i>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(mind,i) in item.minds" :key="i">
|
|
|
+ <i></i>
|
|
|
+ <i></i>
|
|
|
+ <p :style="{'background':mind.mistake?'#f9a0a0':white}"><span>{{mind.content}}</span></p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <img src="@/images/report/report-pic2.png">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getSpecialReport } from '@/api/report';
|
|
|
+import { getSpecialReport ,generateMind } from '@/api/report';
|
|
|
import { SUBJECT_MAP } from '@/services/constant';
|
|
|
|
|
|
export default {
|
|
|
@@ -149,7 +325,8 @@ export default {
|
|
|
treeToObj:{'1':[{}],'2':[{}],'3':[{}]},
|
|
|
resultList:[],
|
|
|
subjectMap:SUBJECT_MAP,
|
|
|
- colorMap:{'green':'#00b050','red':'#ff0000','yellow':'#ffc000'}
|
|
|
+ colorMap:{'green':'#00b050','red':'#ff0000','yellow':'#ffc000'},
|
|
|
+ problemList: [],
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -162,6 +339,11 @@ export default {
|
|
|
this.resultList.push(this.splitTreeList(tree,range,3,[]));
|
|
|
})
|
|
|
console.log(this.resultList);
|
|
|
+ if(this.treeToObj[1][0].grade + this.treeToObj[1][0].subjectId == '9Y2'){
|
|
|
+ generateMind(this.$route.params.pid,this.$route.params.uid).then((result2) => {
|
|
|
+ this.problemList = result2;
|
|
|
+ })
|
|
|
+ }
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
