|
@@ -21,6 +21,7 @@
|
|
|
td{
|
|
|
padding: 10px 0;
|
|
|
color: white;
|
|
|
+ background: #4c4daa;
|
|
|
p:nth-child(1){
|
|
|
font-size: 28px;
|
|
|
}
|
|
@@ -28,40 +29,75 @@
|
|
|
}
|
|
|
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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ padding: 8px 0;
|
|
|
+ background: #cfcdff;
|
|
|
+ p:nth-child(1){
|
|
|
+ font-size: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ tr:nth-child(3){
|
|
|
+ td{
|
|
|
+ padding: 8px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+// 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">
|
|
|
- <!-- <a><a @click="returnBack">返回</a></p> -->
|
|
|
<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">
|
|
@@ -78,18 +114,19 @@
|
|
|
<ul>
|
|
|
<li v-for="(leaf,j) in child.children" :key="j">
|
|
|
<p>《{{leaf.content}}》</p>
|
|
|
- <p>评级:<span>{{leaf.masterStatus}}</span></p>
|
|
|
+ <p>评级:<span :style="{'color':leaf.masterStatus == '掌握'?'green':'red'}">{{leaf.masterStatus}}</span></p>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
- </table>
|
|
|
+ </table> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getSpecialReport } from '@/api/report';
|
|
|
+import { SUBJECT_MAP } from '@/services/constant';
|
|
|
|
|
|
export default {
|
|
|
name: 'Knowledge',
|
|
@@ -97,7 +134,9 @@ export default {
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
+ treeToObj:{},
|
|
|
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'],
|
|
@@ -109,11 +148,17 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
getSpecialReport(this.$route.params.pid,this.$route.params.uid).then((result) => {
|
|
|
- this.resultList = this.splitTreeData([10,-1],result.knowledges[0]);
|
|
|
+ this.splitNodeLevel(result.knowledges,1);
|
|
|
+ this.subjectMap[this.treeToObj[1][0].grade + this.treeToObj[1][0].subjectId].forEach((range) => {
|
|
|
+ let tree = JSON.parse(JSON.stringify(this.treeToObj));
|
|
|
+ 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);
|
|
|
+ // 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: {
|
|
@@ -149,6 +194,53 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ splitNodeLevel(nodeList,level) {
|
|
|
+ let tempList = [];
|
|
|
+ this.treeToObj[level] = [];
|
|
|
+ nodeList.forEach((item) => {
|
|
|
+ if(item.children){
|
|
|
+ tempList = tempList.concat(item.children);
|
|
|
+ }
|
|
|
+ this.treeToObj[level].push(Object.assign(JSON.parse(JSON.stringify(item)),{children:[]}));
|
|
|
+ })
|
|
|
+ if(tempList.length){
|
|
|
+ this.splitNodeLevel(tempList,level + 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitTreeList(tree,range,level,countList){
|
|
|
+ let parentRange = {start:0,end:0};
|
|
|
+ let parentCountList = [];
|
|
|
+ range.end = range.end == -1?tree[level].length - 1:range.end;
|
|
|
+ tree[level] = tree[level].slice(range.start,range.end + 1);
|
|
|
+ if(!countList.length){
|
|
|
+ countList = new Array(tree[level].length).fill(1);
|
|
|
+ }
|
|
|
+ let parentCount = 0;
|
|
|
+ for(let i = 0;i < tree[level].length;i++){
|
|
|
+ tree[level][i].lengthNum = countList[i];
|
|
|
+ if(i == 0){
|
|
|
+ parentCount = countList[i];
|
|
|
+ }
|
|
|
+ else if(tree[level][i].parentId == tree[level][i - 1].parentId){
|
|
|
+ parentCount += countList[i];
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ parentCountList.push(parentCount);
|
|
|
+ parentCount = countList[i];
|
|
|
+ }
|
|
|
+ if(i == tree[level].length - 1){
|
|
|
+ parentCountList.push(parentCount);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(level == 1){
|
|
|
+ return tree;
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ parentRange.start = tree[level - 1].findIndex((value) => value.id == tree[level][0].parentId);
|
|
|
+ parentRange.end = tree[level - 1].findIndex((value) => value.id == tree[level][tree[level].length - 1].parentId);
|
|
|
+ return this.splitTreeList(tree,parentRange,level - 1,parentCountList);
|
|
|
+ }
|
|
|
+ },
|
|
|
returnBack(){
|
|
|
this.$router.push({path: '/ctrlApp/ctrlMainPage/paperListSimple'});
|
|
|
}
|