update

src/components/pages/CaseDesignGM.vue

@@ -1,21 +1,14 @@
 <template>
   <div class="cd_body" style="overflow: auto">
-    <div
-      class="pb_content_body"
-      style="
+    <div class="pb_content_body" style="
         background: #fff;
         padding: 0px 25px;
         box-sizing: border-box;
         width: 95%;
         margin: 10px auto 0;
-      "
-    >
+      ">
       <div class="pb_head">
-        <img
-          src="../../assets/case.png"
-          style="margin-right: 10px; width: 45px;"
-          alt=""
-        />
+        <img src="../../assets/case.png" style="margin-right: 10px; width: 45px;" alt="" />
         <span>项目数据看板</span>
       </div>
       <div class="student_head">
@@ -24,41 +17,24 @@
           <el-select v-model="choose" @change="getData">
             <el-option label="默认排序" value=""> </el-option>
             <el-option label="学校名称" value="school"> </el-option>
-            <el-option label="任务数量" value="task"> </el-option>
+            <!-- <el-option label="任务数量" value="task"> </el-option>
             <el-option label="评价" value="eval"> </el-option>
             <el-option label="工具" value="tool"> </el-option>
-            <el-option label="字数" value="font"> </el-option>
+            <el-option label="字数" value="font"> </el-option> -->
           </el-select>
-          <el-input
-            v-model="search"
-            class="student_input"
-            placeholder="请输入教师名称或学校名称"
-            @input="getData"
-          ></el-input>
+          <el-input v-model="search" class="student_input" placeholder="请输入教师名称或学校名称" @input="getData"></el-input>
         </div>
       </div>
     </div>
     <div class="cd_table">
-      <el-table
-        ref="table"
-        :data="tableData"
-        border
-        :fit="true"
-        v-loading="isLoading"
-        style="width: 100%"
-        :header-cell-style="{ background: '#f1f1f1', fontSize: '17px' }"
-        :row-class-name="tableRowClassName"
-        class="table"
-      >
+      <el-table ref="table" :data="tableData" border :fit="true" v-loading="isLoading" style="width: 100%"
+        :header-cell-style="{ background: '#f1f1f1', fontSize: '17px' }" :row-class-name="tableRowClassName"
+        class="table">
         <el-table-column label="课程" min-width="15" align="center">
           <template slot-scope="scope">
             <div style="max-height: 180px; overflow: auto">
-              <div
-                v-for="(item, index) in scope.row.course"
-                :key="index"
-                class="cd_course"
-                @click="jump(item.courseId)"
-              >
+              <div v-for="(item, index) in scope.row.course" :key="index" class="cd_course"
+                @click="jump(item.courseId)">
                 <el-tooltip :content="item.title">
                   <span>{{ item.title }}</span>
                 </el-tooltip>
@@ -66,28 +42,13 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column
-          label="学校"
-          prop="school"
-          min-width="15"
-          align="center"
-        >
+        <el-table-column label="学校" prop="school" min-width="15" align="center">
         </el-table-column>
-        <el-table-column
-          label="负责人"
-          prop="username"
-          min-width="15"
-          align="center"
-        >
+        <el-table-column label="负责人" prop="username" min-width="15" align="center">
         </el-table-column>
-        <el-table-column
-          label="更新时间"
-          prop="time"
-          min-width="15"
-          align="center"
-        >
+        <el-table-column label="更新时间" prop="time" min-width="15" align="center">
         </el-table-column>
-        <el-table-column label="总计" min-width="15" align="center">
+        <!-- <el-table-column label="总计" min-width="15" align="center">
           <template slot-scope="scope">
             <div class="cd_d_span">
               <div>
@@ -260,33 +221,22 @@
             </div>
             <div v-else>—</div>
           </template>
-        </el-table-column>
-        <el-table-column label="操作" min-width="15">
+        </el-table-column> -->
+        <el-table-column label="操作" width="150px">
           <template slot-scope="scope">
             <!-- <div
               @click="getAll(scope.row)"
             >
               查看全部
             </div> -->
-            <el-button
-              type="primary"
-              size="small"
-              style="background: rgb(147, 125, 223); border: none"
-              @click="getAll(scope.row)"
-              >查看详情</el-button
-            >
+            <el-button type="primary" size="small" style="background: rgb(147, 125, 223); border: none"
+              @click="getAll(scope.row)">查看详情</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
-    <el-dialog
-      title="查看"
-      :visible.sync="dialogVisible"
-      :append-to-body="true"
-      width="620px"
-      :before-close="handleClose"
-      class="dialog_diy"
-    >
+    <!-- <el-dialog title="查看" :visible.sync="dialogVisible" :append-to-body="true" width="620px" :before-close="handleClose"
+      class="dialog_diy">
       <div v-if="dataArray.length">
         <div class="cd_d_jd2">
           <div class="cd_d_box">
@@ -297,28 +247,20 @@
           </div>
         </div>
         <div class="cd_d_jd">
-          <div
-            v-for="(item, index) in dataArray"
-            :key="index"
-            class="cd_d_jd_box"
-          >
+          <div v-for="(item, index) in dataArray" :key="index" class="cd_d_jd_box">
             <div class="cd_d_jd_name">{{ "阶段" + (index + 1) }}</div>
             <div class="cd_d_jd_content cd_d_span">
               <div>
-                <span>{{ data[item].taskC }}</span
-                ><span>任务</span>
+                <span>{{ data[item].taskC }}</span><span>任务</span>
               </div>
               <div>
-                <span>{{ data[item].toolC }}</span
-                ><span>工具</span>
+                <span>{{ data[item].toolC }}</span><span>工具</span>
               </div>
               <div>
-                <span>{{ data[item].evalC }}</span
-                ><span>评价</span>
+                <span>{{ data[item].evalC }}</span><span>评价</span>
               </div>
               <div>
-                <span>{{ data[item].fontC }}</span
-                ><span>字</span>
+                <span>{{ data[item].fontC }}</span><span>字</span>
               </div>
             </div>
           </div>
@@ -326,36 +268,39 @@
             <div class="cd_d_jd_name">总计</div>
             <div class="cd_d_jd_content cd_d_span" style="background: #d4d4d4">
               <div>
-                <span>{{ data["jdz"].taskC }}</span
-                ><span>任务</span>
+                <span>{{ data["jdz"].taskC }}</span><span>任务</span>
               </div>
               <div>
-                <span>{{ data["jdz"].toolC }}</span
-                ><span>工具</span>
+                <span>{{ data["jdz"].toolC }}</span><span>工具</span>
               </div>
               <div>
-                <span>{{ data["jdz"].evalC }}</span
-                ><span>评价</span>
+                <span>{{ data["jdz"].evalC }}</span><span>评价</span>
               </div>
               <div>
-                <span>{{ data["jdz"].fontC }}</span
-                ><span>字</span>
+                <span>{{ data["jdz"].fontC }}</span><span>字</span>
               </div>
             </div>
           </div>
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false" class="cancelbtnGM"
-          >关闭</el-button
-        >
+        <el-button @click="dialogVisible = false" class="cancelbtnGM">关闭</el-button>
       </span>
-    </el-dialog>
+    </el-dialog> -->
+    <div v-if="dialogVisible" class="vbody">
+      <CourseCase :data="data"></CourseCase>
+      <el-button class="btn" @click="dialogVisible = false" type="primary" size="small"
+        style="background: rgb(147, 125, 223); border: none">关闭</el-button>
+    </div>
   </div>
 </template>
 
 <script>
+import CourseCase from './components/courseCase.vue';
 export default {
+  components: {
+    CourseCase,
+  },
   data() {
     return {
       tableData: [],
@@ -395,16 +340,29 @@ export default {
           let _res = res.data[0];
           let _res2 = res.data[1];
           for (var i = 0; i < _res.length; i++) {
-            let taskC = 0;
-            let toolC = 0;
-            let evalC = 0;
-            let fontC = 0;
             let course = [];
+            var ck = 0
             for (var j = 0; j < _res2.length; j++) {
               if (_res[i].userid == _res2[j].userid) {
+                let taskC = 0;
+                let toolC = 0;
+                let evalC = 0;
+                let fontC = 0;
+
+
+                let wang = 0;//7
+                let si = 0;//3
+                let dian = 0;//1
+                let xuan = 0;//45
+                let wen = 0;//4
+                let ti = 0;//16
+                let other = 0;
                 course.push({
                   title: _res2[j].title,
                   courseId: _res2[j].courseId,
+                  jd: [],
+                  jdz: {},
+                  course: {}
                 });
                 var _chapter = JSON.parse(_res2[j].chapters);
                 for (var k = 0; k < _chapter.length; k++) {
@@ -412,6 +370,7 @@ export default {
                   let toolC2 = 0;
                   let evalC2 = 0;
                   let fontC2 = 0;
+
                   fontC2 += _chapter[k].dyName.length;
                   taskC2 = _chapter[k].chapterInfo[0].taskJson.length;
                   let _tasks = _chapter[k].chapterInfo[0].taskJson;
@@ -430,30 +389,72 @@ export default {
                     for (var tool = 0; tool < _tools.length; tool++) {
                       fontC2 += _tools[tool].toolDetail.length;
                     }
+                    for (var toolci = 0; toolci < _tasks[task].toolChoose.length; toolci++) {
+                      if (_tasks[task].toolChoose[toolci].tool.indexOf(7) != -1) {
+                        wang++
+                      } else if (_tasks[task].toolChoose[toolci].tool.indexOf(3) != -1) {
+                        si++
+                      } else if (_tasks[task].toolChoose[toolci].tool.indexOf(1) != -1) {
+                        dian++
+                      } else if (_tasks[task].toolChoose[toolci].tool.indexOf(4) != -1) {
+                        wen++
+                      } else if (_tasks[task].toolChoose[toolci].tool.indexOf(45) != -1) {
+                        xuan++
+                      } else if (_tasks[task].toolChoose[toolci].tool.indexOf(16) != -1) {
+                        ti++
+                      } else {
+                        other++
+                      }
+                    }
                   }
-                  if (_res[i]["jd" + (k + 1)]) {
-                    _res[i]["jd" + (k + 1)].taskC += taskC2;
-                    _res[i]["jd" + (k + 1)].toolC += toolC2;
-                    _res[i]["jd" + (k + 1)].evalC += evalC2;
-                    _res[i]["jd" + (k + 1)].fontC += fontC2;
-                  } else {
-                    _res[i]["jd" + (k + 1)] = {};
-                    _res[i]["jd" + (k + 1)].taskC = taskC2;
-                    _res[i]["jd" + (k + 1)].toolC = toolC2;
-                    _res[i]["jd" + (k + 1)].evalC = evalC2;
-                    _res[i]["jd" + (k + 1)].fontC = fontC2;
-                  }
+                  // if (_res[i]["jd" + (k + 1)]) {
+                  //   _res[i]["jd" + (k + 1)].taskC += taskC2;
+                  //   _res[i]["jd" + (k + 1)].toolC += toolC2;
+                  //   _res[i]["jd" + (k + 1)].evalC += evalC2;
+                  //   _res[i]["jd" + (k + 1)].fontC += fontC2;
+                  // } else {
+                  //   _res[i]["jd" + (k + 1)] = {};
+                  //   _res[i]["jd" + (k + 1)].taskC = taskC2;
+                  //   _res[i]["jd" + (k + 1)].toolC = toolC2;
+                  //   _res[i]["jd" + (k + 1)].evalC = evalC2;
+                  //   _res[i]["jd" + (k + 1)].fontC = fontC2;
+                  // }
+                  _res[i]["jd" + (k + 1)] = {};
+                  _res[i]["jd" + (k + 1)].taskC = taskC2;
+                  _res[i]["jd" + (k + 1)].toolC = toolC2;
+                  _res[i]["jd" + (k + 1)].evalC = evalC2;
+                  _res[i]["jd" + (k + 1)].fontC = fontC2;
+                  course[ck].jd.push(_res[i]["jd" + (k + 1)])
+
                   taskC += taskC2;
                   toolC += toolC2;
                   evalC += evalC2;
                   fontC += fontC2;
                 }
+                _res[i]["jdz"] = {};
+                _res[i]["jdz"].taskC = taskC;
+                _res[i]["jdz"].toolC = toolC;
+                _res[i]["jdz"].evalC = evalC;
+                _res[i]["jdz"].fontC = fontC;
+                course[ck].jdz = _res[i]["jdz"]
+
+                var _course = {
+                  wang,
+                  si,
+                  dian,
+                  xuan,
+                  wen,
+                  ti,
+                  other,
+                }
+                course[ck].course = _course
+                ck++
               }
-              _res[i]["jdz"] = {};
-              _res[i]["jdz"].taskC = taskC;
-              _res[i]["jdz"].toolC = toolC;
-              _res[i]["jdz"].evalC = evalC;
-              _res[i]["jdz"].fontC = fontC;
+              // _res[i]["jdz"] = {};
+              // _res[i]["jdz"].taskC = taskC;
+              // _res[i]["jdz"].toolC = toolC;
+              // _res[i]["jdz"].evalC = evalC;
+              // _res[i]["jdz"].fontC = fontC;
               _res[i].course = course;
             }
           }
@@ -533,70 +534,85 @@ export default {
   font-size: 13px;
   padding: 0 10px;
 }
+
 .cd_body {
   height: 100%;
   width: 100%;
 }
+
 .pb_head {
   margin: 0 !important;
   width: 100% !important;
   display: flex;
   align-items: center;
 }
+
 .student_head {
   margin-top: 10px;
   padding-bottom: 10px;
   display: flex;
   justify-content: space-between;
 }
+
 .head_left {
   display: flex;
   align-items: center;
 }
+
 .cd_title span {
   font-size: 25px;
   font-weight: 700;
 }
+
 .cd_table {
   width: 95%;
   margin: 0 auto;
   padding: 0 0 10px;
 }
 
-.el-table >>> .even_row {
+.el-table>>>.even_row {
   background-color: #f1f1f1 !important;
 }
-.dialog_diy >>> .el-dialog {
+
+.dialog_diy>>>.el-dialog {
   background: #fafafa;
 }
-.dialog_diy >>> .el-dialog__header {
+
+.dialog_diy>>>.el-dialog__header {
   background: #454545 !important;
   padding: 15px 20px;
 }
-.dialog_diy >>> .el-dialog__body,
-.dialog_diy >>> .el-dialog__footer {
+
+.dialog_diy>>>.el-dialog__body,
+.dialog_diy>>>.el-dialog__footer {
   background: rgb(184, 181, 202);
 }
-.dialog_diy >>> .el-dialog__body {
+
+.dialog_diy>>>.el-dialog__body {
   padding: 30px 10px;
 }
-.dialog_diy >>> .el-dialog__title {
+
+.dialog_diy>>>.el-dialog__title {
   color: #fff;
 }
-.dialog_diy >>> .el-dialog__headerbtn {
+
+.dialog_diy>>>.el-dialog__headerbtn {
   top: 19px;
 }
-.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
+
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
   color: #fff;
 }
-.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
+
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
   color: #fff;
 }
 
 .cd_d_box {
   font-size: 16px;
 }
-.cd_d_box + .cd_d_box {
+
+.cd_d_box+.cd_d_box {
   margin-top: 10px;
 }
 
@@ -608,11 +624,13 @@ export default {
   padding: 10px 15px 25px;
   box-sizing: border-box;
 }
+
 .cd_d_jd2 {
   background: #fff;
   padding: 10px 15px;
   box-sizing: border-box;
 }
+
 .cd_d_jd_box {
   width: 100px;
   display: flex;
@@ -622,8 +640,9 @@ export default {
   border-radius: 5px;
   margin: 10px 14px 0 0;
 }
-.cd_d_jd_box {
-}
+
+.cd_d_jd_box {}
+
 .cd_d_jd_content {
   width: 100px;
   display: flex;
@@ -633,23 +652,28 @@ export default {
   border-radius: 5px;
   padding: 5px 0;
 }
-.cd_d_jd_content div + div {
+
+.cd_d_jd_content div+div {
   margin-top: 5px;
 }
 
-.cd_d_jd_content div span + span {
+.cd_d_jd_content div span+span {
   margin-left: 5px;
 }
+
 .cd_d_jd_name {
   margin-bottom: 5px;
   color: #222;
 }
+
 .cd_d_span div:nth-child(1) span:nth-child(1) {
   color: rgb(147, 125, 223);
 }
+
 .cd_d_span div:nth-child(2) span:nth-child(1) {
   color: #fe3987;
 }
+
 .cd_d_span div:nth-child(3) span:nth-child(1) {
   color: #10bb6e;
 }
@@ -657,6 +681,7 @@ export default {
 .cd_d_span div:nth-child(4) span:nth-child(1) {
   color: rgb(147, 125, 223);
 }
+
 .cd_d_span div span:nth-child(1) {
   margin-right: 5px;
 }
@@ -666,6 +691,7 @@ export default {
   width: 100%;
   display: flex;
 }
+
 .cd_course span {
   width: 100%;
   white-space: nowrap;
@@ -673,10 +699,25 @@ export default {
   text-overflow: ellipsis;
 }
 
-.table >>> .cell {
+.table>>>.cell {
   padding: 0px 3px !important;
 }
+
 /* .table >>> .el-table .cell, .table >>> .el-table--border td:first-child .cell, .table >>> .el-table--border th:first-child .cell{
   padding: 0 3px;
 } */
+
+.vbody {
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  z-index: 99999;
+}
+
+.vbody .btn {
+  position: absolute;
+  top: 20px;
+  right: 65px;
+}
 </style>

src/components/pages/components/courseCase.vue

@@ -0,0 +1,333 @@
+<template>
+    <div class="body">
+        <div class="c_top">
+            <div class="poster"><img src="../../../assets/avatar2.png" alt=""></div>
+            <div>
+                <div class="c_top_box">
+                    <span style="font-size:26px">{{ data.school }}</span>
+                </div>
+                <div class="c_top_box">
+                    <span>教师：</span><span>{{ data.username }}</span>
+                </div>
+            </div>
+        </div>
+        <div class="c_box" v-for="(item, index) in data.course" :key="index">
+            <div class="c_title"><b>项目名称：</b>{{ item.title }}</div>
+            <div class="line_box">
+                <div :class="'line' + index"></div>
+                <div :class="'line' + index"></div>
+                <div :class="'line' + index"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    props: ['data'],
+    data() {
+        return {
+            option: {
+                title: {
+                    text: '阶段总数',
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        // Use axis to trigger tooltip
+                        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['任务', '工具', '评价']
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [
+                    {
+                        data: [],
+                        type: 'bar',
+                        showBackground: true,
+                        label: {
+                            show: true
+                        },
+                        backgroundStyle: {
+                            color: 'rgba(180, 180, 180, 0.2)'
+                        }
+                    }
+                ]
+            },
+            option2: {
+                title: {
+                    text: '各个阶段总数',
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        // Use axis to trigger tooltip
+                        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+                    }
+                },
+
+                xAxis: {
+                    type: 'value'
+                },
+                yAxis: {
+                    type: 'category',
+                    data: [],
+                    inverse: true
+                },
+                series: [
+                    {
+                        name: '任务',
+                        type: 'bar',
+                        stack: 'total',
+                        label: {
+                            show: true
+                        },
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        data: []
+                    },
+                    {
+                        name: '工具',
+                        type: 'bar',
+                        stack: 'total',
+                        label: {
+                            show: true
+                        },
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        data: []
+                    },
+                    {
+                        name: '评价',
+                        type: 'bar',
+                        stack: 'total',
+                        label: {
+                            show: true
+                        },
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        data: []
+                    },
+                    // {
+                    //     name: '字数',
+                    //     type: 'bar',
+                    //     stack: 'total',
+                    //     label: {
+                    //         show: true
+                    //     },
+                    //     emphasis: {
+                    //         focus: 'series'
+                    //     },
+                    //     data: []
+                    // }
+                ]
+            },
+            option3: {
+                title: {
+                    text: '工具占比',
+                },
+                tooltip: {
+                    trigger: 'item',
+                    formatter: (params) => {
+                        // marker 为一个HTML标签
+                        var res = params.marker + params.name + ":" + params.value + "%";
+                        return res;
+                    },
+
+                },
+                toolbox: {
+                    show: true,
+                },
+                grid: {},
+                series: [
+                    {
+                        name: "工具占比",
+                        type: "pie",
+                        // radius: [10, "80%"],
+                        center: ["50%", "50%"],
+                        label: {
+                            show: true,
+                            position: "inside",
+                            formatter: "{b}\n{d}%",
+                        },
+                        data: [
+                            { value: 0, name: "思维网格" },
+                            { value: 0, name: "思维导图" },
+                            { value: 0, name: "电子白板" },
+                            { value: 0, name: "选择题" },
+                            { value: 0, name: "问卷调查" },
+                            { value: 0, name: "提交作业" },
+                            { value: 0, name: "其他" },
+                        ],
+                    },
+                ],
+            },
+            chartObj: []
+        }
+    },
+    watch: {
+        data: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                this.setChart();
+            }
+        }
+    },
+    methods: {
+        setChart() {
+            // 雷达图显示的标签
+            let newPromise = new Promise((resolve) => {
+                resolve();
+            });
+            //然后异步执行echarts的初始化函数
+            newPromise.then(() => {
+                for (var i = 0; i < this.data.course.length; i++) {
+                    let el = this.data.course[i]
+                    this.chartObj[i] = [1, 2, 3]
+                    const chartObj = this.$echarts.init(
+                        //劳动课程
+                        // this.$el.querySelector(".line" + i)[0]
+                        document.getElementsByClassName('line' + i)[0]
+                        //   document.getElementById("#charts_canvas")
+                    );
+                    let a = JSON.parse(JSON.stringify(this.option))
+                    a.series[0].data = [el.jdz.taskC, el.jdz.toolC, el.jdz.evalC]//, el.jdz.fontC
+                    this.chartObj[i][0] = chartObj;
+                    this.chartObj[i][0].setOption(a);
+
+                    let c = JSON.parse(JSON.stringify(this.option3))
+                    const chartObj2 = this.$echarts.init(
+                        //劳动课程
+                        // this.$el.querySelector(".line" + i)[0]
+                        document.getElementsByClassName('line' + i)[1]
+                        //   document.getElementById("#charts_canvas")
+                    );
+                    c.series[0].data[0].value = el.course.wang
+                    c.series[0].data[1].value = el.course.si
+                    c.series[0].data[2].value = el.course.dian
+                    c.series[0].data[3].value = el.course.xuan
+                    c.series[0].data[4].value = el.course.wen
+                    c.series[0].data[5].value = el.course.ti
+                    c.series[0].data[6].value = el.course.other
+                    this.chartObj[i][1] = chartObj2;
+                    this.chartObj[i][1].setOption(c);
+
+
+                    let b = JSON.parse(JSON.stringify(this.option2))
+                    for (var j = 0; j < el.jd.length; j++) {
+                        b.yAxis.data.push('阶段' + (j + 1))
+                        b.series[0].data.push(el.jd[j].taskC)
+                        b.series[1].data.push(el.jd[j].toolC)
+                        b.series[2].data.push(el.jd[j].evalC)
+                        // b.series[3].data.push(el.jd[j].fontC)
+                    }
+                    const chartObj3 = this.$echarts.init(
+                        //劳动课程
+                        // this.$el.querySelector(".line" + i)[0]
+                        document.getElementsByClassName('line' + i)[2]
+                        //   document.getElementById("#charts_canvas")
+                    );
+
+                    this.chartObj[i][2] = chartObj3;
+                    this.chartObj[i][2].setOption(b);
+
+                    console.log(this.chartObj);
+                }
+            });
+            let _this = this;
+            window.addEventListener("resize", () => {
+                for (var i = 0; i < _this.data.course.length; i++) {
+                    if (_this.chartObj[i].length) {
+                        _this.chartObj[i][0].resize();
+                        _this.chartObj[i][1].resize();
+                        _this.chartObj[i][2].resize();
+                    }
+                }
+            });
+        }
+    },
+    mounted() {
+        this.setChart();
+    }
+}
+</script>
+
+<style scoped>
+.body {
+    height: 100%;
+    width: 100%;
+    background: #f1f1f1;
+    overflow: auto;
+}
+
+.c_top {
+    font-size: 20px;
+    background: #fff;
+    display: flex;
+    width: 95%;
+    margin: 10px auto;
+    padding: 20px;
+    border-radius: 5px;
+    align-items: center;
+    box-sizing: border-box;
+}
+
+.c_top .poster {
+    width: 100px;
+    height: 100px;
+    border-radius: 100%;
+    /* background: rgb(0 0 0); */
+    margin-right: 10px;
+    overflow: hidden;
+}
+
+.c_top .poster img{
+    width: 100%;
+    object-fit: cover;
+}
+
+.c_top_box+.c_top_box {
+    margin-top: 20px;
+}
+
+.c_box {
+    width: 95%;
+    margin: 10px auto;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    padding: 20px;
+    box-sizing: border-box;
+    border-radius: 5px;
+}
+
+.c_title {
+    font-size: 18px;
+    margin-bottom: 20px;
+}
+
+.line_box {
+    width: 100%;
+    display: flex;
+    min-height: 500px;
+    justify-content: space-around;
+    flex-wrap: wrap;
+}
+
+.line_box>div {
+    width: 32%;
+    margin: 10px 0;
+    height: 500px;
+    min-width: 300px;
+}
+</style>

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

@@ -340,7 +340,7 @@ export default {
             _array.push({ name: _item.name, value: count, children: [] });
             let j = 0;
             for (var item2 in _item.child) {
-              let num2 = Object.keys(res);
+              let num2 = Object.keys(_item.child);
               let count2 = count / num2.length;
               let _item2 = _item.child[item2];
               _array[i].children.push({
@@ -349,7 +349,7 @@ export default {
                 children: [],
               });
               for (var item3 in _item2.child) {
-                let num3 = Object.keys(res);
+                let num3 = Object.keys(_item2.child);
                 let count3 = count2 / num3.length;
                 let _item3 = _item2.child[item3];
                 _array[i].children[j].children.push({

src/components/pages/components/report/studentAbilityGM.vue

@@ -340,7 +340,7 @@ export default {
             _array.push({ name: _item.name, value: count, children: [] });
             let j = 0;
             for (var item2 in _item.child) {
-              let num2 = Object.keys(res);
+              let num2 = Object.keys(_item.child);
               let count2 = count / num2.length;
               let _item2 = _item.child[item2];
               _array[i].children.push({
@@ -349,7 +349,7 @@ export default {
                 children: [],
               });
               for (var item3 in _item2.child) {
-                let num3 = Object.keys(res);
+                let num3 = Object.keys(_item2.child);
                 let count3 = count2 / num3.length;
                 let _item3 = _item2.child[item3];
                 _array[i].children[j].children.push({

src/components/tools/seeBoard.vue

@@ -80,7 +80,7 @@ export default {
         _array.push({ name: _item.name, value: count, children: [] });
         let j = 0;
         for (var item2 in _item.child) {
-          let num2 = Object.keys(res);
+          let num2 = Object.keys(_item.child);
           let count2 = count / num2.length;
           let _item2 = _item.child[item2];
           _array[i].children.push({
@@ -89,7 +89,7 @@ export default {
             children: [],
           });
           for (var item3 in _item2.child) {
-            let num3 = Object.keys(res);
+            let num3 = Object.keys(_item2.child);
             let count3 = count2 / num3.length;
             let _item3 = _item2.child[item3];
             _array[i].children[j].children.push({

src/components/tools/sunburst.vue

@@ -52,6 +52,8 @@ export default {
       });
     },
     setData() {
+      debugger
+
       if (!Object.keys(this.Josn).length) {
         this.mindV = true;
       } else {
@@ -67,7 +69,7 @@ export default {
         _array.push({ name: _item.name, value: count, children: [] });
         let j = 0;
         for (var item2 in _item.child) {
-          let num2 = Object.keys(res);
+          let num2 = Object.keys( _item.child);
           let count2 = count / num2.length;
           let _item2 = _item.child[item2];
           _array[i].children.push({
@@ -76,7 +78,7 @@ export default {
             children: [],
           });
           for (var item3 in _item2.child) {
-            let num3 = Object.keys(res);
+            let num3 = Object.keys( _item2.child);
             let count3 = count2 / num3.length;
             let _item3 = _item2.child[item3];
             _array[i].children[j].children.push({