|
@@ -1,5 +1,8 @@
|
|
|
<style lang="scss" scoped>
|
|
|
.report4{
|
|
|
+ &>div{
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
&>p{
|
|
|
text-align: center;
|
|
|
font-size: 25px;
|
|
@@ -10,6 +13,12 @@
|
|
|
float: left;
|
|
|
}
|
|
|
}
|
|
|
+ .hint-img{
|
|
|
+ position: absolute;
|
|
|
+ width: 360px;
|
|
|
+ bottom: -225px;
|
|
|
+ left: calc(50% + 180px);
|
|
|
+ }
|
|
|
}
|
|
|
.table-common{
|
|
|
width: 1200px;
|
|
@@ -42,85 +51,88 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ &.special1{
|
|
|
+ tbody{
|
|
|
+ tr:nth-child(1){
|
|
|
+ td{
|
|
|
+ color: black;
|
|
|
+ background: #c5d1e9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ tr:nth-child(2){
|
|
|
+ td{
|
|
|
+ background: #ccecff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ tr:nth-child(3){
|
|
|
+ td{
|
|
|
+ background: #dcf4df;
|
|
|
+ span{
|
|
|
+ padding: 2px 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.smallWidth{
|
|
|
+ position: absolute;
|
|
|
+ width: 600px;
|
|
|
+ left: calc(50% - 600px);
|
|
|
+ bottom: -255px;
|
|
|
+ }
|
|
|
}
|
|
|
-// tr:nth-child(2){
|
|
|
- // td{
|
|
|
- // vertical-align: top;
|
|
|
- // div{
|
|
|
- // padding: 8px 0;
|
|
|
- // border-bottom: solid 2px black;
|
|
|
- // p:nth-child(1){
|
|
|
- // font-size: 20px;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // ul{
|
|
|
- // display: flex;
|
|
|
- // justify-content: space-around;
|
|
|
- // margin: 0;
|
|
|
- // li{
|
|
|
- // border-left: solid 2px black;
|
|
|
- // padding: 8px 0;
|
|
|
- // &:first-child{
|
|
|
- // border-left: none;
|
|
|
- // }
|
|
|
- // p{
|
|
|
- // span{
|
|
|
- // color: red;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
</style>
|
|
|
<template>
|
|
|
<div class="report4">
|
|
|
- <table class="table-common" border="1" cellspacing="0" v-for="(root,index) in resultList" :key="index">
|
|
|
- <tbody>
|
|
|
- <tr>
|
|
|
- <td v-for="(node1,a) in root[1]" :key="a" :colspan="node1.lengthNum">
|
|
|
- <p>{{node1.content}}</p>
|
|
|
- <p>掌握率:{{node1.master}}%</p>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td v-for="(node2,a) in root[2]" :key="a" :colspan="node2.lengthNum">
|
|
|
- <p>{{node2.content}}</p>
|
|
|
- <p>掌握率:{{node2.master}}%</p>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td v-for="(node3,a) in root[3]" :key="a">
|
|
|
- <p>{{node3.content}}</p>
|
|
|
- <p>评级:<span :style="{'color':node3.masterStatus == '掌握'?'green':'red'}">{{node3.masterStatus}}</span></p>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- <!-- <table class="table-common" border="1" cellspacing="0" v-for="(root,index) in resultList" :key="index">
|
|
|
- <tbody>
|
|
|
- <tr :style="{'background':root.background}">
|
|
|
- <td :colspan="root.children.length">
|
|
|
- <p>{{root.content}}</p>
|
|
|
- <p>掌握率:{{root.master}}%</p>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td v-for="(child,i) in root.children" :key="i" :style="{'background':child.childBackground}">
|
|
|
- <div :style="{'background':child.background}">
|
|
|
- <p>《{{child.content}}》</p>
|
|
|
- <p>掌握率:{{child.master}}%</p>
|
|
|
- </div>
|
|
|
- <ul>
|
|
|
- <li v-for="(leaf,j) in child.children" :key="j">
|
|
|
- <p>《{{leaf.content}}》</p>
|
|
|
- <p>评级:<span :style="{'color':leaf.masterStatus == '掌握'?'green':'red'}">{{leaf.masterStatus}}</span></p>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table> -->
|
|
|
+ <div v-if="treeToObj[1][0].grade + treeToObj[1][0].subjectId != '9Y2'">
|
|
|
+ <table class="table-common" border="1" cellspacing="0" v-for="(root,index) in resultList" :key="index">
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td v-for="(node1,a) in root[1]" :key="a" :colspan="node1.lengthNum">
|
|
|
+ <p>{{node1.content}}</p>
|
|
|
+ <p>掌握率:{{node1.master}}%</p>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td v-for="(node2,a) in root[2]" :key="a" :colspan="node2.lengthNum">
|
|
|
+ <p>{{node2.content}}</p>
|
|
|
+ <p>掌握率:{{node2.master}}%</p>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td v-for="(node3,a) in root[3]" :key="a">
|
|
|
+ <p>{{node3.content}}</p>
|
|
|
+ <p>评级:<span :style="{'color':node3.masterStatus == '掌握'?'green':'red'}">{{node3.masterStatus}}</span></p>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div v-if="treeToObj[1][0].grade + treeToObj[1][0].subjectId == '9Y2'" style="margin-bottom:300px;">
|
|
|
+ <table class="table-common special1" :class="{'smallWidth':index == 2}" border="1" cellspacing="0" v-for="(root,index) in resultList" :key="index">
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td v-for="(node1,a) in root[1]" :key="a" :colspan="node1.lengthNum">
|
|
|
+ <p>{{node1.content}}</p>
|
|
|
+ <p>掌握率:{{node1.master}}%</p>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td v-for="(node2,a) in root[2]" :key="a" :colspan="node2.lengthNum">
|
|
|
+ <p>{{node2.content}}</p>
|
|
|
+ <p>掌握率:{{node2.master}}%</p>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td v-for="(node3,a) in root[3]" :key="a">
|
|
|
+ <p>{{node3.content}}</p>
|
|
|
+ <p>评级:<span :style="{'background':colorMap[node3.masterStatus]}">{{node3.masterLevel}}</span></p>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <img src="@/images/report/hint.png" class="hint-img">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -134,14 +146,10 @@ export default {
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
- treeToObj:{},
|
|
|
+ treeToObj:{'1':[{}],'2':[{}],'3':[{}]},
|
|
|
resultList:[],
|
|
|
subjectMap:SUBJECT_MAP,
|
|
|
- colorChoose:[
|
|
|
- ['#4c4daa','#cfcdff','#ebedfa','#cfcdff','#ebedfa','#cfcdff','#ebedfa','#cfcdff','#ebedfa','#cfcdff','#ebedfa','#cfcdff','#ebedfa','#cfcdff','#ebedfa','#cfcdff','#ebedfa','#cfcdff','#ebedfa','#cfcdff','#ebedfa'],
|
|
|
- ['#4c4daa','#cfcdff','#ebedfa','#cfcdff','#ebedfa','#cfcdff','#ebedfa','#cfcdff','#ebedfa','#cfcdff','#ebedfa','#cfcdff','#ebedfa','#cfcdff','#ebedfa','#cfcdff','#ebedfa','#cfcdff','#ebedfa','#cfcdff','#ebedfa'],
|
|
|
- ['#4c4daa','#8eaadc','#dbe0f4','#8eaadc','#dbe0f4','#8eaadc','#dbe0f4','#8eaadc','#dbe0f4','#8eaadc','#dbe0f4','#8eaadc','#dbe0f4','#8eaadc','#dbe0f4','#8eaadc','#dbe0f4','#8eaadc','#dbe0f4','#8eaadc','#dbe0f4']
|
|
|
- ]
|
|
|
+ colorMap:{'green':'#00b050','red':'#ff0000','yellow':'#ffc000'}
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
@@ -154,46 +162,9 @@ export default {
|
|
|
this.resultList.push(this.splitTreeList(tree,range,3,[]));
|
|
|
})
|
|
|
console.log(this.resultList);
|
|
|
- // this.resultList = this.splitTreeData([10,-1],result.knowledges[0]);
|
|
|
-
|
|
|
- // let node = Object.assign(JSON.parse(JSON.stringify(result.knowledges[1])),{children:[]});
|
|
|
- // this.cutData(node,-1,result.knowledges[1].children,this.colorChoose[2]);
|
|
|
- // this.resultList.push(node);
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
- splitTreeData(numList,treeData){
|
|
|
- let result = [];
|
|
|
- numList.forEach((num,index) => {
|
|
|
- let node = Object.assign(JSON.parse(JSON.stringify(treeData)),{children:[]});
|
|
|
- this.cutData(node,num,treeData.children,this.colorChoose[index]);
|
|
|
- result.push(node);
|
|
|
- })
|
|
|
- return result;
|
|
|
- },
|
|
|
- cutData(node,num,list,colorList){
|
|
|
- this.$set(node,'countNum',0);
|
|
|
- this.$set(node,'background',colorList[0]);
|
|
|
- let colorCount = 1;
|
|
|
- for(let i = 0;i < list.length;i++){
|
|
|
- if(num == -1 || node.countNum + list[i].children.length <= num){
|
|
|
- node.countNum += list[i].children.length;
|
|
|
- list[i].background = colorList[colorCount++];
|
|
|
- list[i].childBackground = colorList[colorCount++];
|
|
|
- node.children.push(list.shift());
|
|
|
- i--;
|
|
|
- }
|
|
|
- else{
|
|
|
- let tempObj = Object.assign(JSON.parse(JSON.stringify(list[i])),{children:list[i].children.slice(0,num - node.countNum)});
|
|
|
- tempObj.background = colorList[colorCount++];
|
|
|
- tempObj.childBackground = colorList[colorCount++];
|
|
|
- node.children.push(tempObj);
|
|
|
- list[i].children = list[i].children.slice(num - node.countNum,list[i].children.length);
|
|
|
- node.countNum = num;
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
splitNodeLevel(nodeList,level) {
|
|
|
let tempList = [];
|
|
|
this.treeToObj[level] = [];
|
|
@@ -241,6 +212,38 @@ export default {
|
|
|
return this.splitTreeList(tree,parentRange,level - 1,parentCountList);
|
|
|
}
|
|
|
},
|
|
|
+ splitTreeData(numList,treeData){
|
|
|
+ let result = [];
|
|
|
+ numList.forEach((num,index) => {
|
|
|
+ let node = Object.assign(JSON.parse(JSON.stringify(treeData)),{children:[]});
|
|
|
+ this.cutData(node,num,treeData.children,this.colorChoose[index]);
|
|
|
+ result.push(node);
|
|
|
+ })
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+ cutData(node,num,list,colorList){
|
|
|
+ this.$set(node,'countNum',0);
|
|
|
+ this.$set(node,'background',colorList[0]);
|
|
|
+ let colorCount = 1;
|
|
|
+ for(let i = 0;i < list.length;i++){
|
|
|
+ if(num == -1 || node.countNum + list[i].children.length <= num){
|
|
|
+ node.countNum += list[i].children.length;
|
|
|
+ list[i].background = colorList[colorCount++];
|
|
|
+ list[i].childBackground = colorList[colorCount++];
|
|
|
+ node.children.push(list.shift());
|
|
|
+ i--;
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ let tempObj = Object.assign(JSON.parse(JSON.stringify(list[i])),{children:list[i].children.slice(0,num - node.countNum)});
|
|
|
+ tempObj.background = colorList[colorCount++];
|
|
|
+ tempObj.childBackground = colorList[colorCount++];
|
|
|
+ node.children.push(tempObj);
|
|
|
+ list[i].children = list[i].children.slice(num - node.countNum,list[i].children.length);
|
|
|
+ node.countNum = num;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
returnBack(){
|
|
|
this.$router.push({path: '/ctrlApp/ctrlMainPage/paperListSimple'});
|
|
|
}
|