Merge branch 'master' of https://git.cocorobo.cn/CocoRoboLabs/pbl-teacher-table

src/components/pages/components/report/courseInfo.vue

@@ -57,12 +57,12 @@ export default {
             bottom: "20%",
             name: "学习活动时间分配图",
             type: "pie",
-            radius: [10, "80%"],
+            // radius: [10, "80%"],
             center: ["50%", "50%"],
-            roseType: "area",
-            itemStyle: {
-              borderRadius: 8,
-            },
+            // roseType: "area",
+            // itemStyle: {
+            //   borderRadius: 8,
+            // },
             label: {
               show: true,
               position: "inside",

src/components/pages/components/report/studentAbility.vue

@@ -7,12 +7,13 @@
         <!-- <span @click="setType(3)" :class="{ active: type == 3 }">其他项目</span> -->
       </div>
       <div style="display: flex; width: 100%; height: calc(100% - 50px)">
-        <div id="person_canvas1" class="echart" v-if="type == 1"
+        <div id="person_canvas1" class="echart" v-show="type == 1"
           style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;">
           <span v-if="!eJson">暂无数据</span>
         </div>
-        <div id="person_canvas2" class="echart" v-if="type == 2" style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;">
-          <div class="box2" v-if="work.length">
+        <div id="person_canvas2" class="echart" v-show="type == 2"
+          style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;">
+          <!-- <div class="box2" v-show="work.length ? true : false">
             <div v-for="(item,index) in work" :key="index" class="target_box">
               <div class="target_task">
                 <span>第{{item.stage+1}}阶段</span>
@@ -31,7 +32,9 @@
 
             </div>
           </div>
-          <span v-if="!work.length">暂无数据</span>
+          <span v-show="!work.length ? true : false">暂无数据</span> -->
+          <span v-show="!randarJson.length ? true : false">暂无数据</span>
+
 
         </div>
       </div>
@@ -40,14 +43,14 @@
 </template>
 
 <script>
-import { L } from 'caniuse-lite/data/browserVersions';
 
 
 export default {
   props: ["userid", "courseid"],
   data() {
     return {
-      isloading:false,
+      randarJson: [],
+      isloading: false,
       chartObj2: null,
       chartObj3: null,
       color: [],
@@ -171,6 +174,85 @@ export default {
           },
         ],
       },
+      radarOption: {
+        splitNumber: 5,
+        tooltip: {
+          triggerOn: "mousemove",
+          //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
+          confine: true,
+          enterable: true, //鼠标是否可以移动到tooltip区域内
+          backgroundColor: "rgba(255,255,255,0.7)",
+          textStyle: {
+            // 文字样式
+            align: "left",
+          },
+          left: "right",
+          top: "bottom",
+        },
+        radar: {
+          radius: ["0%", "70%"],
+          shape: "circle",
+          center: ["50%", "50%"],
+          axisName: {
+            textStyle: {
+              // 文字样式
+              color: "#58a5e6",
+            },
+            formatter: function (value, indicator) {
+              // value = value.replace(/\S{2}/g, function (match) {
+              //   return match + "\n";
+              // });
+              return value;
+            },
+          },
+          indicator: [
+            // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
+          ],
+        },
+        // 雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
+        splitArea: {
+          show: true,
+          areaStyle: {
+            color: "rgba(255,0,0,0)", // 图表背景的颜色
+          },
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            width: 1,
+            color: "rgba(131,141,158,.1)", // 设置网格的颜色
+          },
+        },
+        series: [
+          {
+            name: "目标得分占比", // tooltip中的标题
+            type: "radar", // 表示是雷达图
+            symbol: "circle", // 拐点的样式，还可以取值'rect','angle'等
+            symbolSize: 8, // 拐点的大小
+            areaStyle: {
+              normal: {
+                width: 1,
+                opacity: 0.2,
+              },
+            },
+            data: [
+              {
+                // 设置各个指标原始值
+                value: [],
+                // 设置区域边框和区域的颜色
+                itemStyle: {
+                  normal: {
+                    color: "#58a5e6",
+                    lineStyle: {
+                      color: "#58a5e6",
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
     };
   },
   methods: {
@@ -307,23 +389,43 @@ export default {
           // this.option3.series[2].data = _array23;
           // this.option3.series[3].data = _array24;
           // this.option3.series[4].data = _array25;
-
-          // this.chartObj3 = chartObj3;
-          // this.chartObj3.setOption(this.option3);
-          var _work = []
-
-          for (var i = 0; i < this.workW.length; i++) {
-            _work[i] = { stage: this.workW[i].stage, task: this.workW[i].task, work: [], count: 0 }
-            for (var j = 0; j < this.workW[i].work.length; j++) {
-              for (var k = 0; k < this.workW[i].work[j].target.length; k++) {
-                this.color.push(this.color16())
-                _work[i].work.push(this.workW[i].work[j].target[k])
-                _work[i].count += this.workW[i].work[j].target[k].count
-              }
+          if (this.randarJson.length) {
+            const chartObj3 = this.$echarts.init(
+              //劳动课程
+              this.$el.querySelector("#person_canvas2")
+            );
+            let radarOption = JSON.parse(JSON.stringify(this.radarOption))
+            for (var i = 0; i < this.randarJson.length; i++) {
+              radarOption.radar.indicator.push({
+                name: this.randarJson[i].target,
+                max: 5,
+              });
+              radarOption.series[0].data[0].value.push(this.randarJson[i].value / this.randarJson[i].count);
             }
+
+
+            this.chartObj3 = chartObj3;
+            this.chartObj3.setOption(radarOption);
+
           }
-          this.work = _work;
-          console.log(_work);
+
+          // var _work = []
+          // this.color = []
+          // for (var i = 0; i < this.workW.length; i++) {
+          //   _work[i] = { stage: this.workW[i].stage, task: this.workW[i].task, work: [], count: 0 }
+          //   for (var j = 0; j < this.workW[i].work.length; j++) {
+          //     for (var k = 0; k < this.workW[i].work[j].target.length; k++) {
+          //       this.color.push(this.color16())
+          //       _work[i].work.push(this.workW[i].work[j].target[k])
+          //       _work[i].count += this.workW[i].work[j].target[k].count
+          //     }
+          //   }
+          // }
+          // this.work = _work;
+          // console.log(_work);
+          // this.$forceUpdate();
+
+
         }
       });
       let _this = this;
@@ -376,6 +478,8 @@ export default {
           let _allWork = res.data[4];
           let _allComment = res.data[5];
           let _isWorks = res.data[6];
+          var randarJson = []
+          var randarAarray = []
 
           this.eJson = res.data[2][0].content ? JSON.parse(res.data[2][0].content) : "";
 
@@ -444,95 +548,120 @@ export default {
           for (var i = 0; i < _isWorks.length; i++) {
             if (chapters[_isWorks[i].stage].chapterInfo[0].taskJson[_isWorks[i].task].eList) {
               _workW.push({ stage: _isWorks[i].stage, task: _isWorks[i].task, rate: JSON.parse(_isWorks[i].rate), elist: chapters[_isWorks[i].stage].chapterInfo[0].taskJson[_isWorks[i].task].eList })
-            } else {
-              let elist = [
-                {
-                  "value": "意识能力",
-                  "score": 5,
-                  "target": [
-                    {
-                      "name": "意识能力1",
-                      "per": 0.5
-                    },
-                    {
-                      "name": "意识能力2",
-                      "per": 0.5
-                    }
-                  ]
-                },
-                {
-                  "value": "科学探究能力",
-                  "score": 5,
-                  "target": [
-                    {
-                      "name": "科学探究能力1",
-                      "per": 0.5
-                    },
-                    {
-                      "name": "科学探究能力2",
-                      "per": 0.5
-                    }
-                  ]
-                },
-                {
-                  "value": "实践创新能力",
-                  "score": 5,
-                  "target": [
-                    {
-                      "name": "实践创新能力1",
-                      "per": 0.5
-                    },
-                    {
-                      "name": "实践创新能力2",
-                      "per": 0.5
-                    }
-                  ]
-                },
-                {
-                  "value": "学习反思能力",
-                  "score": 5,
-                  "target": [
-                    {
-                      "name": "学习反思能力1",
-                      "per": 0.5
-                    },
-                    {
-                      "name": "学习反思能力2",
-                      "per": 0.5
-                    }
-                  ]
-                },
-                {
-                  "value": "工程思维能力",
-                  "score": 5,
-                  "target": [
-                    {
-                      "name": "工程思维能力1",
-                      "per": 0.5
-                    },
-                    {
-                      "name": "工程思维能力2",
-                      "per": 0.5
-                    }
-                  ]
-                }
-              ]
-              _workW.push({ stage: _isWorks[i].stage, task: _isWorks[i].task, rate: JSON.parse(_isWorks[i].rate), elist: elist })
             }
+            // else {
+            //   let elist = [
+            //     {
+            //       "value": "意识能力",
+            //       "score": 5,
+            //       "target": [
+            //         {
+            //           "name": "意识能力1",
+            //           "per": 0.5
+            //         },
+            //         {
+            //           "name": "意识能力2",
+            //           "per": 0.5
+            //         }
+            //       ]
+            //     },
+            //     {
+            //       "value": "科学探究能力",
+            //       "score": 5,
+            //       "target": [
+            //         {
+            //           "name": "科学探究能力1",
+            //           "per": 0.5
+            //         },
+            //         {
+            //           "name": "科学探究能力2",
+            //           "per": 0.5
+            //         }
+            //       ]
+            //     },
+            //     {
+            //       "value": "实践创新能力",
+            //       "score": 5,
+            //       "target": [
+            //         {
+            //           "name": "实践创新能力1",
+            //           "per": 0.5
+            //         },
+            //         {
+            //           "name": "实践创新能力2",
+            //           "per": 0.5
+            //         }
+            //       ]
+            //     },
+            //     {
+            //       "value": "学习反思能力",
+            //       "score": 5,
+            //       "target": [
+            //         {
+            //           "name": "学习反思能力1",
+            //           "per": 0.5
+            //         },
+            //         {
+            //           "name": "学习反思能力2",
+            //           "per": 0.5
+            //         }
+            //       ]
+            //     },
+            //     {
+            //       "value": "工程思维能力",
+            //       "score": 5,
+            //       "target": [
+            //         {
+            //           "name": "工程思维能力1",
+            //           "per": 0.5
+            //         },
+            //         {
+            //           "name": "工程思维能力2",
+            //           "per": 0.5
+            //         }
+            //       ]
+            //     }
+            //   ]
+            //   _workW.push({ stage: _isWorks[i].stage, task: _isWorks[i].task, rate: JSON.parse(_isWorks[i].rate), elist: elist })
+            // }
           }
-          for (var i = 0; i < _workW.length; i++) {
-            _workW[i].work = []
-            for (var j = 0; j < _workW[i].elist.length; j++) {
-              for (var k = 0; k < _workW[i].elist[j].target.length; k++) {
-                _workW[i].elist[j].target[k].count = _workW[i].rate[_workW[i].elist[j].value] * _workW[i].elist[j].target[k].per
+
+          if (_workW[0].elist[0].target) {
+            for (var i = 0; i < _workW.length; i++) {
+              _workW[i].work = []
+              for (var j = 0; j < _workW[i].elist.length; j++) {
+                if (randarAarray.indexOf(_workW[i].elist[j].target) == -1) {
+                  randarAarray.push(_workW[i].elist[j].target)
+                }
+                // for (var k = 0; k < _workW[i].elist[j].target.length; k++) {
+                //   _workW[i].elist[j].target[k].count = _workW[i].rate[_workW[i].elist[j].value] * _workW[i].elist[j].target[k].per
+                // }
+                _workW[i].work.push({ name: _workW[i].elist[j].value, target: _workW[i].elist[j].target })
+                _workW[i].work[_workW[i].work.length - 1][_workW[i].elist[j].value] = _workW[i].rate[_workW[i].elist[j].value]
+                _workW[i].work[_workW[i].work.length - 1].value = _workW[i].rate[_workW[i].elist[j].value]
+              }
+            }
+            for (var k = 0; k < randarAarray.length; k++) {
+              randarJson.push({ target: randarAarray[k], count: 0, value: 0 })
+              for (var i = 0; i < _workW.length; i++) {
+                for (var j = 0; j < _workW[i].work.length; j++) {
+                  if (_workW[i].work[j].target == randarAarray[k]) {
+                    randarJson[k].count++
+                    randarJson[k].value += _workW[i].work[j].value
+                  }
+                }
               }
-              _workW[i].work.push({ name: _workW[i].elist[j].value, target: _workW[i].elist[j].target })
-              _workW[i].work[_workW[i].work.length - 1][_workW[i].elist[j].value] = _workW[i].rate[_workW[i].elist[j].value]
             }
           }
+
           console.log('chapter=-----', chapters);
           console.log('_workW=-----', _workW);
+          console.log('randarAarray=-----', randarAarray);
+          console.log('randarJson=-----', randarJson);
+
           this.workW = _workW
+          this.randarJson = randarJson
+
         })
         .catch((err) => {
           this.isloading = false
@@ -550,80 +679,6 @@ export default {
 
       }
       this.getInfo();
-      // this.option2.series.data = [
-      //   {
-      //     name: "信息意识",
-      //     value: 15,
-      //     children: [
-      //       {
-      //         name: "信息应用意识",
-      //         value: this.randomNum(1, 5),
-      //       },
-      //       {
-      //         name: "信息安全意识",
-      //         value: this.randomNum(1, 5),
-      //       },
-      //       {
-      //         name: "信息感知意识",
-      //         value: this.randomNum(1, 5),
-      //       },
-      //     ],
-      //   },
-      //   {
-      //     name: "信息社会责任",
-      //     value: 15,
-      //     children: [
-      //       {
-      //         name: "信息伦理道德",
-      //         value: this.randomNum(1, 5),
-      //       },
-      //       {
-      //         name: "信息法律法规",
-      //         value: this.randomNum(1, 10),
-      //       },
-      //     ],
-      //   },
-      //   {
-      //     name: "信息知识与技能",
-      //     value: 15,
-      //     children: [
-      //       {
-      //         name: "信息应用技能",
-      //         value: 5,
-      //       },
-      //       {
-      //         name: "信息科学知识",
-      //         value: 10,
-      //       },
-      //     ],
-      //   },
-      //   {
-      //     name: "信息思维与行为2",
-      //     value: 15,
-      //     children: [
-      //       {
-      //         name: "信息思维",
-      //         value: this.randomNum(1, 10),
-      //       },
-      //       {
-      //         name: "信息行为",
-      //         value: this.randomNum(1, 5),
-      //       },
-      //     ],
-      //   },
-      // ];
-      // this.chartObj2.setOption(this.option2);
-      // let data = [];
-      // for (var i = 1; i < 10; i++) {
-      //   for (var j = 0; j < 9; j++) {
-      //     var x = i;
-      //     var y = j;
-      //     var z = this.randomNum(0, 10);
-      //     data.push([x, y, z]);
-      //   }
-      // }
-      // this.option3.series[0].data = data;
-      // this.chartObj3.setOption(this.option3);
     },
     color16() {//十六进制颜色随机
       var r = Math.floor(Math.random() * 256);