update

src/App.vue

@@ -7,6 +7,7 @@
         $route.path == '/note' ||
         $route.path == '/works',
       appNoHeight: $route.path == '/liveRoom',
+      GMBg:this.$route.query.org=='eb2af5e9-ac3d-46b6-9fe3-3c1c364f0217' && ( $route.path != '/courseGM' &&  $route.path != '/course/addCourseGM')
     }"
   >
     <!-- <div class="app_head" :class="{stuWidth:$route.path == '/student'}"> -->
@@ -71,10 +72,12 @@ export default {
       navTabs: [
         "/class",
         "/course",
+        "/courseGM",
         "/data",
         "/notice",
         "/student",
         "/works",
+        "/worksGM",
         "/worksDetail",
         "/course/courseDetail",
         "/library",
@@ -86,9 +89,9 @@ export default {
         "/wordList",
         "/Ttype",
         "/banner",
-        "eventCenter",
-        "addRace",
-        "anliDetail",
+        // "/eventCenter",
+        // "/addRace",
+        // "/anliDetail",
         // "/course/addCourse",
         // "/ask",
         // "/ask/askList",
@@ -361,4 +364,18 @@ html::-webkit-scrollbar-thumb {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   background-color: rgba(0, 0, 0, 0.1);
 }
+
+.btnClassGM {
+  background: #8681b7;
+  border-color: #8681b7;
+}
+
+.btnClassGM:focus, .btnClassGM:hover{
+  background: #8681b7;
+  border-color: #8681b7;
+}
+
+.GMBg{
+  background: rgb(184, 181, 202) !important;
+}
 </style>

src/components/pages/addCourse.vue

@@ -4068,6 +4068,7 @@ export default {
               _this.unitJson[unitIndex].chapterInfo[0].taskJson[
                 itemTaskIndex
               ].proVisible = false;
+              this.$forceUpdate();
             }, 1000);
             _this.inputShow = true;
             if (err) {
@@ -8107,7 +8108,7 @@ ol {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 20000;
+  z-index: 90;
   display: flex;
   align-items: center;
   justify-content: center;

src/components/pages/addCourse2.vue → src/components/pages/addCourseGM.vue

@@ -17,7 +17,7 @@
                 <el-breadcrumb-item
                   :to="{
                     path:
-                      '/course?userid=' +
+                      '/courseGM?userid=' +
                       userid +
                       '&oid=' +
                       oid +
@@ -117,7 +117,7 @@
                         </div>
                         <div style="display: flex; margin-right: 20px">
                           <img
-                            src="../../assets/icon/projectName.png"
+                            src="../../assets/icon/projectNameGM.png"
                             alt
                             style="margin-right: 8px"
                           />
@@ -132,7 +132,7 @@
                       <div class="both">
                         <div class="choose">
                           <div
-                            class="all_choose"
+                            class="all_choose all_choose2"
                             v-for="(item, index) in CourseType[0]"
                             :key="index"
                           >
@@ -264,7 +264,7 @@
                   active-color="#5c549f"
                   v-model="isTeacherSee"
                   active-text="是否公开此项目"
-                  style="padding-bottom: 30px;"
+                  style="padding-bottom: 30px"
                   class="s_switch"
                 ></el-switch>
               </div>
@@ -372,10 +372,10 @@
                       <span>当前使用目标管理</span>
                       <span>{{ eTitle }}</span>
                       <img
-                        src="../../assets/line.png"
+                        src="../../assets/lineGM.png"
                         class="cru_line"
                         style="
-                          width: 125px;
+                          width: 110px;
                           height: 20px;
                           bottom: -10px;
                           left: 155px;
@@ -550,7 +550,7 @@
                     第{{ index + 1 }}阶段
                   </div>
                   <img
-                    src="../../assets/line.png"
+                    src="../../assets/lineGM.png"
                     class="cru_line"
                     :style="{
                       left: offsetLetfPx + 'px',
@@ -1973,7 +1973,7 @@
                             <span>当前使用目标管理</span>
                             <span>{{ eTitle }}</span>
                             <img
-                              src="../../assets/line.png"
+                              src="../../assets/lineGM.png"
                               class="cru_line"
                               style="
                                 width: 125px;
@@ -2065,10 +2065,7 @@
               </div>
             </div>
           </div>
-          <div
-            class="rightBox"
-            v-if="this.steps == 4"
-          >
+          <div class="rightBox" v-if="this.steps == 4">
             <div class="basic_box_success">
               <div class="right_img">
                 <img src="../../assets/icon/right.png" alt />
@@ -2143,11 +2140,19 @@
         <editor-bar v-model="tdetail" @change="change"></editor-bar>
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible1 = false">取 消</el-button>
-        <el-button type="primary" @click="addWord" v-if="!updateBoolean2"
+        <el-button @click="dialogVisible1 = false" class="cancel_button"
+          >取 消</el-button
+        >
+        <el-button
+          type="primary"
+          @click="addWord"
+          v-if="!updateBoolean2"
+          class="confirm_button"
           >添加</el-button
         >
-        <el-button type="primary" @click="upWord" v-else>修 改</el-button>
+        <el-button type="primary" @click="upWord" class="confirm_button" v-else
+          >修 改</el-button
+        >
       </span>
     </el-dialog>
     <el-dialog
@@ -2170,8 +2175,10 @@
         <editor-bar v-model="cTemplate" @change="change"></editor-bar>
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="clearChoose">取 消</el-button>
-        <el-button type="primary" @click="wordNext()">确定</el-button>
+        <el-button @click="clearChoose" class="cancel_button">取 消</el-button>
+        <el-button type="primary" @click="wordNext()" class="confirm_button"
+          >确定</el-button
+        >
       </span>
     </el-dialog>
     <el-dialog
@@ -2195,8 +2202,13 @@
         <editor-bar v-model="AttText.text" @change="change"></editor-bar>
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="clearAttText">取 消</el-button>
-        <el-button type="primary" @click="isAddOrUpdateAttText">确定</el-button>
+        <el-button @click="clearAttText" class="cancel_button">取 消</el-button>
+        <el-button
+          type="primary"
+          @click="isAddOrUpdateAttText"
+          class="confirm_button"
+          >确定</el-button
+        >
       </span>
     </el-dialog>
     <el-dialog
@@ -2220,8 +2232,13 @@
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="clearLine">取 消</el-button>
-        <el-button type="primary" @click="isAddOrUpdateLine">确定</el-button>
+        <el-button @click="clearLine" class="cancel_button">取 消</el-button>
+        <el-button
+          type="primary"
+          @click="isAddOrUpdateLine"
+          class="confirm_button"
+          >确定</el-button
+        >
       </span>
     </el-dialog>
     <el-dialog
@@ -2248,7 +2265,10 @@
             </div>
           </div>
         </div>
-        <el-checkbox-group v-model="checkboxList" class="people_name">
+        <el-checkbox-group
+          v-model="checkboxList"
+          class="people_name all_choose2"
+        >
           <el-checkbox
             v-for="item in studentJuri"
             :key="item.userid"
@@ -2258,8 +2278,12 @@
         </el-checkbox-group>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible3 = false">取 消</el-button>
-        <el-button type="primary" @click="isAddPP">确定</el-button>
+        <el-button @click="dialogVisible3 = false" class="cancel_button"
+          >取 消</el-button
+        >
+        <el-button type="primary" @click="isAddPP" class="confirm_button"
+          >确定</el-button
+        >
       </span>
     </el-dialog>
     <el-dialog
@@ -2275,7 +2299,10 @@
         <div class="people_top">
           <div class="people_nav">选择班级</div>
         </div>
-        <el-checkbox-group v-model="checkboxList2" class="people_name">
+        <el-checkbox-group
+          v-model="checkboxList2"
+          class="people_name all_choose2"
+        >
           <div v-for="(item, index) in grade" :key="item.id">
             <el-checkbox :label="item.id">
               {{ item.name ? item.name : "暂无班级可选" }}
@@ -2287,8 +2314,12 @@
         </el-checkbox-group>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisibleClass = false">取 消</el-button>
-        <el-button type="primary" @click="isAddClass">确定</el-button>
+        <el-button @click="dialogVisibleClass = false" class="cancel_button"
+          >取 消</el-button
+        >
+        <el-button type="primary" @click="isAddClass" class="confirm_button"
+          >确定</el-button
+        >
       </span>
     </el-dialog>
     <el-dialog
@@ -2318,7 +2349,7 @@
         </div>
         <el-checkbox-group
           v-model="checkboxList3"
-          class="people_name"
+          class="people_name all_choose2"
           v-if="teacherJuri.length"
         >
           <el-checkbox
@@ -2332,8 +2363,12 @@
         <div style="text-align: center; margin-top: 10px" v-else>暂无数据</div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisibleMember = false">取 消</el-button>
-        <el-button type="primary" @click="isAddPPTeacher">确定</el-button>
+        <el-button @click="dialogVisibleMember = false" class="cancel_button"
+          >取 消</el-button
+        >
+        <el-button type="primary" @click="isAddPPTeacher" class="confirm_button"
+          >确定</el-button
+        >
       </span>
     </el-dialog>
     <el-dialog
@@ -2379,7 +2414,11 @@
                 </el-input>
               </div>
               <div class="a_add_head_div">
-                <el-button type="primary" size="small" @click="addAskList()"
+                <el-button
+                  type="primary"
+                  size="small"
+                  @click="addAskList()"
+                  class="confirm_button"
                   >添加</el-button
                 >
                 <el-button
@@ -2387,6 +2426,7 @@
                   size="small"
                   @click="deleteAskList(index1)"
                   v-if="askJson.askCount != 1"
+                  class="confirm_button"
                   >删除</el-button
                 >
               </div>
@@ -2407,6 +2447,7 @@
                   type="primary"
                   size="small"
                   @click="addcheckList(askJson.askJson[index1])"
+                  class="confirm_button"
                   >添加</el-button
                 >
                 <el-button
@@ -2415,6 +2456,7 @@
                   style="margin: 10px 0 0 0"
                   @click="deletecheckList(askJson.askJson[index1])"
                   v-if="askJson.askJson[index1].askItem != 1"
+                  class="confirm_button"
                   >删除
                 </el-button>
               </div>
@@ -2423,8 +2465,12 @@
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible5 = false">取 消</el-button>
-        <el-button type="primary" @click="addAsk">确 定</el-button>
+        <el-button @click="dialogVisible5 = false" class="cancel_button"
+          >取 消</el-button
+        >
+        <el-button type="primary" @click="addAsk" class="confirm_button"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
     <el-dialog
@@ -2482,7 +2528,11 @@
                 </el-input>
               </div>
               <div class="a_add_head_div">
-                <el-button type="primary" size="small" @click="addTestList()"
+                <el-button
+                  type="primary"
+                  size="small"
+                  @click="addTestList()"
+                  class="confirm_button"
                   >添加</el-button
                 >
                 <el-button
@@ -2490,6 +2540,7 @@
                   size="small"
                   @click="deleteTestList(index1)"
                   v-if="testJson.testCount != 1"
+                  class="confirm_button"
                   >删除</el-button
                 >
               </div>
@@ -2514,10 +2565,11 @@
                   </el-radio>
                 </el-radio-group>
                 <el-checkbox-group
+                  class="all_choose2"
                   v-model="testJson.testJson[index1].answer"
                   v-if="testJson.testJson[index1].type == '2'"
                 >
-                  <el-checkbox                    
+                  <el-checkbox
                     v-for="(item2, checkIndex) in testJson.testJson[index1]
                       .testItem"
                     :key="checkIndex"
@@ -2536,6 +2588,7 @@
                   type="primary"
                   size="small"
                   @click="addTcheckList(testJson.testJson[index1])"
+                  class="confirm_button"
                   >添加</el-button
                 >
                 <el-button
@@ -2543,6 +2596,7 @@
                   size="small"
                   @click="deleteTcheckList(testJson.testJson[index1])"
                   v-if="testJson.testJson[index1].testItem != 1"
+                  class="confirm_button"
                   >删除
                 </el-button>
               </div>
@@ -2551,8 +2605,12 @@
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisibleChoice = false">取 消</el-button>
-        <el-button type="primary" @click="addTest">确 定</el-button>
+        <el-button @click="dialogVisibleChoice = false" class="cancel_button"
+          >取 消</el-button
+        >
+        <el-button type="primary" @click="addTest" class="confirm_button"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
     <el-dialog
@@ -2779,8 +2837,15 @@
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible4 = false">取 消</el-button>
-        <el-button type="primary" @click="addChaptersDataTools">确定</el-button>
+        <el-button @click="dialogVisible4 = false" class="cancel_button"
+          >取 消</el-button
+        >
+        <el-button
+          type="primary"
+          @click="addChaptersDataTools"
+          class="confirm_button"
+          >确定</el-button
+        >
       </span>
     </el-dialog>
     <el-dialog
@@ -2809,8 +2874,12 @@
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible8 = false">取 消</el-button>
-        <el-button type="primary" @click="addAnswer">确 定</el-button>
+        <el-button @click="dialogVisible8 = false" class="cancel_button"
+          >取 消</el-button
+        >
+        <el-button type="primary" @click="addAnswer" class="confirm_button"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
     <el-dialog
@@ -2839,8 +2908,12 @@
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisibleMp3 = false">取 消</el-button>
-        <el-button type="primary" @click="addMp3Answer">确 定</el-button>
+        <el-button @click="dialogVisibleMp3 = false" class="cancel_button"
+          >取 消</el-button
+        >
+        <el-button type="primary" @click="addMp3Answer" class="confirm_button"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
     <el-dialog
@@ -2884,7 +2957,9 @@
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="choosePicVisible = false">取 消</el-button>
+        <el-button @click="choosePicVisible = false" class="cancel_button"
+          >取 消</el-button
+        >
         <el-button type="primary" @click="choosePicVisible = false"
           >确 定</el-button
         >
@@ -2934,8 +3009,10 @@
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="sysPicVisible = false">取 消</el-button>
-        <el-button type="primary">确 定</el-button>
+        <el-button @click="sysPicVisible = false" class="cancel_button"
+          >取 消</el-button
+        >
+        <el-button type="primary" class="confirm_button">确 定</el-button>
       </span>
     </el-dialog>
     <el-dialog
@@ -2993,6 +3070,7 @@
                   type="primary"
                   size="small"
                   @click="addSelectList(selectJson)"
+                  class="confirm_button"
                 >
                   添加</el-button
                 >
@@ -3002,6 +3080,7 @@
                   style="margin: 10px 0 0 0"
                   @click="deleteSelectList(selectJson)"
                   v-if="selectJson.select && selectJson.select.length > 0"
+                  class="confirm_button"
                   >删除</el-button
                 >
               </div>
@@ -3046,6 +3125,7 @@
           type="primary"
           @click="nextSelectSteps()"
           v-if="selectSteps == 1"
+          class="confirm_button"
           >下一步</el-button
         >
         <el-button @click="selectSteps--" v-if="selectSteps == 2"
@@ -3055,6 +3135,7 @@
           type="primary"
           @click="addSelectAnswer"
           v-if="selectSteps == 2"
+          class="confirm_button"
           >确 定</el-button
         >
       </span>
@@ -3115,8 +3196,12 @@
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisibleRate = false">取 消</el-button>
-        <el-button type="primary" @click="addRateAnswer">确 定</el-button>
+        <el-button @click="dialogVisibleRate = false" class="cancel_button"
+          >取 消</el-button
+        >
+        <el-button type="primary" @click="addRateAnswer" class="confirm_button"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
   </div>
@@ -4069,6 +4154,7 @@ export default {
               _this.unitJson[unitIndex].chapterInfo[0].taskJson[
                 itemTaskIndex
               ].proVisible = false;
+              this.$forceUpdate();
             }, 1000);
             _this.inputShow = true;
             if (err) {
@@ -4197,8 +4283,8 @@ export default {
         homeworkList: [],
       });
       setTimeout(() => {
-              this.checkEva(this.checkId);
-            }, 0);
+        this.checkEva(this.checkId);
+      }, 0);
     },
     add(e, i) {
       var el = e.currentTarget;
@@ -6280,7 +6366,7 @@ export default {
   bottom: 0px;
   transition: all 0.5s;
   left: 0px;
-  width: 125px;
+  width: 110px;
   margin-left: -25px;
 }
 
@@ -6293,7 +6379,7 @@ export default {
 }
 
 .cru_selected {
-  color: #0b7fc2 !important;
+  color: #5c549f !important;
 }
 
 .chapter_contentbox {
@@ -6851,7 +6937,7 @@ ol {
 .stepBg {
   width: calc(100% - 50px);
   display: flex;
-  justify-content:center;
+  justify-content: center;
   align-items: center;
   flex-wrap: nowrap;
   background: #fff;
@@ -7112,8 +7198,8 @@ ol {
   margin-left: 10px;
 }
 .a_add_checkType .active {
-  border-bottom: 2px solid #409eff;
-  color: #409eff;
+  border-bottom: 2px solid #5c549f;
+  color: #5c549f;
 }
 .a_add_head .a_add_head_input {
   width: 300px;
@@ -7227,14 +7313,35 @@ ol {
   align-items: center;
 }
 
-/* .all_choose >  .el-checkbox-group >>>  .el-checkbox__input.is-checked .el-checkbox__inner, .all_choose >  .el-checkbox-group >>>  .el-checkbox__input.is-indeterminate .el-checkbox__inner1{
+.all_choose2
+  > .el-checkbox-group
+  >>> .el-checkbox__input.is-checked
+  .el-checkbox__inner,
+.all_choose2
+  > .el-checkbox-group
+  >>> .el-checkbox__input.is-indeterminate
+  .el-checkbox__inner1 {
   background: #5c549f;
   border-color: #5c549f;
 }
 
-.all_choose >  .el-checkbox-group >>>  .el-checkbox__input.is-checked+.el-checkbox__label{
+.all_choose2
+  > .el-checkbox-group
+  >>> .el-checkbox__input.is-checked
+  + .el-checkbox__label {
   color: #5c549f;
-} */
+}
+
+.all_choose2 > .el-checkbox-group >>> .el-checkbox__inner:hover {
+  border-color: #5c549f;
+}
+
+.all_choose2
+  > .el-checkbox-group
+  >>> .el-checkbox__input.is-focus
+  .el-checkbox__inner {
+  border-color: #5c549f;
+}
 
 .all_choose > .el-checkbox-group > .el-checkbox >>> .el-checkbox__label {
   min-width: 80px;
@@ -7820,7 +7927,7 @@ ol {
 
 .type_content .active {
   color: #5c549f;
-    border-bottom: 2px solid #5c549f;
+  border-bottom: 2px solid #5c549f;
 }
 
 .e_add_list_pbox_content {
@@ -8119,7 +8226,7 @@ ol {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 20000;
+  z-index: 90;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -8165,7 +8272,24 @@ ol {
   margin-right: 20px;
 }
 
-.s_switch >>> .el-switch__label.is-active{
+.s_switch >>> .el-switch__label.is-active {
+  color: #5c549f;
+}
+
+.cancel_button >>> .el-button:focus,
+.cancel_button >>> .el-button:hover {
+  color: rgb(92, 84, 159);
+  border-color: #5c549f;
+  background-color: #dbd7ff;
+}
+
+.confirm_button {
+  background: #5c549f;
+  border-color: #5c549f;
+}
+
+.stepsNav >>> .el-breadcrumb__inner a:hover,
+.stepsNav >>> .el-breadcrumb__inner.is-link:hover {
   color: #5c549f;
 }
 </style>

src/components/pages/components/report/courseInfoGM.vue

@@ -0,0 +1,271 @@
+<template>
+  <div v-loading="isloading">
+    <div class="ci_info" v-if="Object.keys(courseInfo).length">
+      <div class="ci_info_box">
+        <span>项目名称：</span><span>{{ courseInfo.title }}</span>
+      </div>
+      <div class="ci_info_box">
+        <span>创建人：</span><span>{{ courseInfo.name }}</span>
+      </div>
+      <div class="ci_info_box">
+        <span>协同人员：</span><span>{{ teacher ? teacher : "无协同人员" }}</span>
+      </div>
+      <div class="ci_info_box2">
+        <div>
+          阶段<span>{{ tool.stage }}</span>个
+        </div>
+        <div>
+          任务<span>{{ tool.task }}</span>个
+        </div>
+        <div>
+          工具<span>{{ tool.tool }}</span>个
+        </div>
+      </div>
+    </div>
+    <div style="width: 90%; height: calc(100% - 130px); margin: 10px auto 0">
+      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+      <div id="charts_canvas" class="echart" style="width: 100%; height: 100%"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["courseid"],
+  data() {
+    return {
+      isloading:false,
+      chartJson: {},
+      courseInfo: {},
+      teacher: "",
+      chartObj: null,
+      tool: {
+        stage: 0,
+        task: 0,
+        tool: 0,
+      },
+      option: {
+        legend: {
+          top: "bottom",
+        },
+        toolbox: {
+          show: true,
+        },
+        grid: {},
+        series: [
+          {
+            bottom: "20%",
+            name: "学习活动时间分配图",
+            type: "pie",
+            // radius: [10, "80%"],
+            center: ["50%", "50%"],
+            // roseType: "area",
+            // itemStyle: {
+            //   borderRadius: 8,
+            // },
+            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: "其他" },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    randomNum(minNum, maxNum) {
+      switch (arguments.length) {
+        case 1:
+          return parseInt(Math.random() * minNum + 1, 10);
+          break;
+        case 2:
+          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+          break;
+        default:
+          return 0;
+          break;
+      }
+    },
+    getInfo() {
+      this.isloading = true
+      let params = {
+        cid: this.courseid,
+      };
+      console.log(this.courseid);
+      if (!this.courseid) {
+        return;
+      }
+      this.ajax
+        .get(this.$store.state.api + "getCourseInfo", params)
+        .then((res) => {
+          this.isloading = false
+          this.courseInfo = res.data[0][0];
+          let teachers = res.data[1];
+          let teacher = [];
+          for (var i = 0; i < teachers.length; i++) {
+            teacher.push(teachers[i].name);
+          }
+          this.teacher = teacher.join("、");
+
+          let chapters = JSON.parse(res.data[0][0].chapters);
+          var task = 0;
+          var tool = 0;
+
+          var wang = 0;//7
+          var si = 0;//3
+          var dian = 0;//1
+          var xuan = 0;//4
+          var other = 0;
+          for (var i = 0; i < chapters.length; i++) {
+            task += chapters[i].chapterInfo[0].taskJson.length;
+            for (
+              var j = 0;
+              j < chapters[i].chapterInfo[0].taskJson.length;
+              j++
+            ) {
+              if (chapters[i].chapterInfo[0].taskJson[j].toolChoose.length) {
+                for (var k = 0; k < chapters[i].chapterInfo[0].taskJson[j].toolChoose.length; k++) {
+                  if (chapters[i].chapterInfo[0].taskJson[j].toolChoose[k].tool.indexOf(7) != -1) {
+                    wang++
+                  } else if (chapters[i].chapterInfo[0].taskJson[j].toolChoose[k].tool.indexOf(3) != -1) {
+                    si++
+                  } else if (chapters[i].chapterInfo[0].taskJson[j].toolChoose[k].tool.indexOf(1) != -1) {
+                    dian++
+                  } else if (chapters[i].chapterInfo[0].taskJson[j].toolChoose[k].tool.indexOf(4) != -1) {
+                    xuan++
+                  } else {
+                    other++
+                  }
+                }
+              }
+
+              tool += chapters[i].chapterInfo[0].taskJson[j].toolChoose.length;
+            }
+          }
+          this.chartJson = {
+            wang,
+            si,
+            dian,
+            xuan,
+            other
+          }
+          this.tool.stage = chapters.length;
+          this.tool.task = task;
+          this.tool.tool = tool;
+          this.$nextTick(() => {
+            this.setChart();
+          });
+        })
+        .catch((err) => {
+          this.isloading = false
+          console.error(err);
+        });
+    },
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+          //   document.getElementById("#charts_canvas")
+        );
+        let _array = [];
+        // for (var i = 0; i < 5; i++) {
+        //   this.option.series[0].data[i].value = this.randomNum(30, 80);
+        //   // _array.push(this.randomNum(0, 80));
+        // }
+        this.option.series[0].data[0].value = this.chartJson.wang
+        this.option.series[0].data[1].value = this.chartJson.si
+        this.option.series[0].data[2].value = this.chartJson.dian
+        this.option.series[0].data[3].value = this.chartJson.xuan
+        this.option.series[0].data[4].value = this.chartJson.other
+
+        // this.option.series[0].data[0].value = _array;
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+      let _this = this;
+      window.addEventListener("resize", () => {
+        if (_this.chartObj) {
+          _this.chartObj.resize();
+        }
+      });
+    },
+  },
+  watch: {
+    courseid(newValue, oldValue) {
+      this.getInfo();
+    },
+  },
+  created() {
+    this.getInfo();
+  },
+};
+</script>
+
+<style scoped>
+.ci_info {
+  font-size: 14px;
+}
+
+.ci_info_box {
+  width: 90%;
+  margin: 0 auto;
+  display: flex;
+}
+
+.ci_info_box span {
+  white-space: nowrap;
+}
+
+.ci_info_box span+span {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ci_info_box+.ci_info_box {
+  margin-top: 10px;
+}
+
+.ci_info_box2 {
+  width: 90%;
+  margin: 0 auto;
+  display: flex;
+  margin-top: 10px;
+  font-size: 16px;
+  justify-content: space-between;
+  color: #5c549f;
+  align-items: center;
+}
+
+.ci_info_box2 div {
+  display: flex;
+  align-items: center;
+}
+
+.ci_info_box2 span {
+  color: rgb(234, 146, 59);
+  width: 30px;
+  font-size: 25px;
+  text-align: center;
+  font-weight: 700;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/components/pages/components/report/coursePieGM.vue

@@ -0,0 +1,317 @@
+<template>
+  <div v-loading="isloading">
+    <div style="width: 95%; height: calc(100% - 40px); margin: 20px auto;"  ref="innder">
+      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+      <!-- <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div> -->
+      <div id="charts_canvas3" class="echart" ref="table">
+        <!-- <div style="font-size: 13px; font-weight: 600">
+          项目综合评估：各个阶段评价平均分
+        </div> -->
+        <el-table class="table" :data="tdata" :height="tableHeight" :fit="true" style="width: 100%" :header-cell-style="{
+          background: '#fff',
+          fontSize: '12px',
+          fontWeight: 'unset',
+          padding: '0',
+          border: 'unset',
+        }" :row-class-name="tableRowClassName" header-row-class-name="header_row_class">
+          <el-table-column label="排名" min-width="29px" align="center">
+            <template slot-scope="scope">
+              <div style="font-weight: 600">{{ scope.$index + 1 }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="name" label="名称" min-width="39px" align="center">
+            <template slot-scope="scope">
+              <div style="color: rgb(96, 96, 96); font-weight: 600">
+                {{ scope.row.name }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="rate" label="完成度" min-width="39px" align="center"><template slot-scope="scope">
+              <div style="color: #5c549f; font-weight: 600">
+                {{ scope.row.rate }}
+              </div>
+            </template></el-table-column>
+          <el-table-column prop="rate1" label="活跃度" min-width="39px" align="center"><template slot-scope="scope">
+              <div style="color: #5c549f; font-weight: 600">
+                {{ scope.row.rate1 }}
+              </div>
+            </template></el-table-column>
+          <el-table-column prop="rate2" label="参与度" min-width="39px" align="center"><template slot-scope="scope">
+              <div style="color: #5c549f; font-weight: 600">
+                {{ scope.row.rate2 }}
+              </div>
+            </template></el-table-column>
+          <el-table-column prop="rate3" label="综合表现" min-width="49px" align="center"><template slot-scope="scope">
+              <div style="color: rgb(233, 140, 148);font-weight: 600">{{ scope.row.rate3 }}</div>
+            </template></el-table-column>
+          <!-- <el-table-column prop="ratez" label="综合" min-width="29px" align="center"><template slot-scope="scope">
+              <div style="color: rgb(233, 140, 148);font-weight: 600">{{ scope.row.ratez }}</div>
+            </template></el-table-column> -->
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["userid", "courseid"],
+  data() {
+    return {
+      isloading:false,
+      workJson: [],
+      chartObj: null,
+      tdata: [],
+      tableHeight: 0,
+      option: {
+        legend: {
+          top: "bottom",
+        },
+        toolbox: {
+          show: true,
+        },
+        grid: {},
+        series: [
+          {
+            bottom: "10%",
+            name: "学习活动时间分配图",
+            type: "pie",
+            radius: [10, "80%"],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 8,
+            },
+            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: "其他" },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row row_class";
+      } else {
+        return "row_class";
+      }
+    },
+    randomNum(minNum, maxNum) {
+      switch (arguments.length) {
+        case 1:
+          return parseInt(Math.random() * minNum + 1, 10);
+          break;
+        case 2:
+          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+          break;
+        default:
+          return 0;
+          break;
+      }
+    },
+    getInfo() {
+      this.isloading = true
+      let params = {
+        uid: this.userid,
+        cid: this.courseid,
+      };
+      console.log(this.userid);
+      if (!this.userid) {
+        return;
+      }
+      this.ajax
+        .get(this.$store.state.api + "getUserInfo", params)
+        .then((res) => {
+          this.isloading = false
+          let chapters = JSON.parse(res.data[2][0].chapters);
+          var tool = 0;
+          let workJson = []
+          let _pWork = res.data[3];
+          let _allWork = res.data[4];
+          let _allComment = res.data[5];
+
+          for (var i = 0; i < chapters.length; i++) {
+            workJson[i] = { tool: 0, ptool: 0, work: 0, ishuo: 0, isCan: 0 }
+            for (
+              var j = 0;
+              j < chapters[i].chapterInfo[0].taskJson.length;
+              j++
+            ) {
+              // 1、电子白板，3、思维导图，6协同文档，7思维网格 16、作业提交,40.项目-学生互评 41.项目-下拉选择题 42.项目-录音功能
+              let _toolsAarry = [1, 3, 6, 7, 16, 15, 4, 40, 41, 42];
+              for (
+                var k = 0;
+                k < chapters[i].chapterInfo[0].taskJson[j].toolChoose.length;
+                k++
+              ) {
+                if (
+                  _toolsAarry.indexOf(
+                    chapters[i].chapterInfo[0].taskJson[j].toolChoose[k].tool[0]
+                  ) != -1
+                ) {
+                  tool++;
+                  workJson[i].tool++
+                }
+              }
+            }
+
+            for (var k = 0; k < _pWork.length; k++) {
+              if (_pWork[k].stage == i) {
+                workJson[i].ptool++
+              }
+            }
+            for (var k = 0; k < _allComment.length; k++) {
+              if (_allComment[k].stage == i) {
+                workJson[i].ishuo++
+              }
+            }
+
+
+          }
+          this.userinfo = res.data[0][0];
+          this.ccount = tool;
+          this.islearn = tool - parseInt(res.data[1][0].vcount);
+
+          this.iscount = res.data[1][0].vcount;
+          this.vcount = 0;
+
+          for (var i = 0; i < workJson.length; i++) {
+            if (workJson[i].ptool > workJson[i].tool) {
+              workJson[i].work = 5
+            } else if( workJson[i].tool === 0){
+              workJson[i].work = 5
+            }else{
+              workJson[i].work = Math.round(workJson[i].ptool / workJson[i].tool * 100 / 20)
+            }
+            if (workJson[i].ptool) {
+              workJson[i].isCan = 1
+            }
+          }
+          this.workJson = workJson
+
+          console.log(workJson);
+          this.setChart();
+        })
+        .catch((err) => {
+          this.isloading = false
+          console.error(err);
+        });
+    },
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        // const chartObj = this.$echarts.init(
+        //   //劳动课程
+        //   this.$el.querySelector("#charts_canvas")
+        //   //   document.getElementById("#charts_canvas")
+        // );
+        // let _array = [];
+        // for (var i = 0; i < 6; i++) {
+        //   this.option.series[0].data[i].value = this.randomNum(30, 80);
+        //   // _array.push(this.randomNum(0, 80));
+        // }
+        // // this.option.series[0].data[0].value = _array;
+        // // 初始化雷达图
+        // this.chartObj = chartObj;
+        // this.chartObj.setOption(this.option);
+
+        this.tdata = [];
+        for (var i = 0; i < this.workJson.length; i++) {
+          var _rate = this.workJson[i].work < 3 ? 3 : this.workJson[i].work;
+          var _rate1 = this.workJson[i].ishuo ? 5 : 3;
+          var _rate2 = this.workJson[i].isCan ? 5 : 3;
+          var _rate3 = (_rate + _rate1 + _rate2) / 3;
+          var _ratez = (_rate + _rate1 + _rate2 + _rate3) / 4;
+          this.tdata.push({
+            name: "阶段" + (i + 1),
+            rate: _rate.toFixed(1),
+            rate1: _rate1.toFixed(1),
+            rate2: _rate2.toFixed(1),
+            rate3: _rate3.toFixed(1),
+            ratez: _ratez.toFixed(1),
+          });
+        }
+        this.tdata.sort(this.sortId);
+        this.$nextTick(() => {
+          this.setTableHeight();
+        });
+      });
+      // let _this = this;
+      // window.addEventListener("resize", () => {
+      //   if (_this.chartObj) {
+      //     _this.chartObj.resize();
+      //   }
+      // });
+    },
+    sortId(a, b) {
+      return b.ratez - a.ratez;
+    },
+    setTableHeight() {
+      console.log(this.$refs.innder.offsetHeight);
+      this.tableHeight = this.$refs.innder.offsetHeight
+        // window.innerHeight - this.$refs.table.offsetHeight - 600;
+      // 监听窗口大小变化
+    },
+  },
+  watch: {
+    userid(newValue, oldValue) {
+      this.getInfo();
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getInfo();
+    });
+  },
+};
+</script>
+
+<style scoped>
+.el-table>>>.even_row {
+  background-color: rgb(238, 243, 250) !important;
+}
+
+.el-table>>>.row_class td {
+  padding: 8px 0;
+  border: unset;
+}
+
+.el-table>>>.row_class {
+  background: rgb(249, 249, 249);
+}
+
+.el-table>>>.row_class .cell {
+  padding: 0;
+  white-space: nowrap;
+  font-size: 12px;
+}
+
+.el-table>>>.header_row_class .cell {
+  padding: 0;
+  white-space: nowrap;
+}
+
+.el-table::before {
+  height: 0;
+}
+</style>

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

@@ -0,0 +1,769 @@
+<template>
+  <div v-loading="isloading">
+    <div style="background: #fff; padding: 10px 0; height: 100%">
+      <div class="sd_person_button">
+        <span @click="setType(1)" :class="{ active: type == 1 }">项目目标设置</span>
+        <span @click="setType(2)" :class="{ active: type == 2 }">班级项目评价得分占比</span>
+        <!-- <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-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-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>
+                <span>任务{{item.task+1}}</span>
+              </div>
+              <div class="target_content_box">
+                <div v-for="(target,k) in item.work" :key="index+'-'+k"
+                  :style="{width:(target.count / item.count * 100)+'%',backgroundColor:color[k]}">
+
+                  <el-tooltip :content="target.name+' '+target.count">
+                    <span class="targetA">{{target.count}}</span>
+                  </el-tooltip>
+                </div>
+
+              </div>
+
+            </div>
+          </div>
+          <span v-show="!work.length ? true : false">暂无数据</span> -->
+          <span v-show="!randarJson.length ? true : false">暂无数据</span>
+
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  props: ["userid", "courseid"],
+  data() {
+    return {
+      randarJson: [],
+      isloading: false,
+      chartObj2: null,
+      chartObj3: null,
+      color: [],
+      workW: [],
+      work: [],
+      eJson: "",
+      type: 1,
+      option2: {
+        //color:colors,
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          left: "50",
+          top: "center",
+        },
+        series: {
+          type: "sunburst",
+          data: [],
+          radius: [20, "80%"],
+          itemStyle: {
+            borderRadius: 7,
+            borderWidth: 2,
+          },
+          label: {
+            show: true,
+            fontSize: 10
+          },
+        },
+      },
+      option3: {
+        // title: {
+        //   text: "项目活跃度:不同任务的学习时间占比",
+        //   textStyle: {
+        //     fontSize: 13,
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        grid: {
+          left: "15%",
+          right: "15%",
+          bottom: "15%",
+          top: "15%",
+        },
+        xAxis: {
+          type: "value",
+        },
+        yAxis: {
+          type: "category",
+          data: ["阶段1", "阶段2", "阶段3", "阶段4", "阶段5"],
+        },
+        legend: {
+          show: false
+        },
+        series: [
+          {
+            name: "任务1",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [0, 0, 0, 0, 0],
+          },
+          {
+            name: "任务2",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [0, 0, 0, 0, 0],
+          },
+          {
+            name: "任务3",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [0, 0, 0, 0, 0],
+          },
+          {
+            name: "任务4",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [0, 0, 0, 0, 0],
+          },
+          {
+            name: "任务5",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [0, 0, 0, 0, 0],
+          },
+        ],
+      },
+      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: "#5c549f",
+                    lineStyle: {
+                      color: "#5c549f",
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        if (this.type == 1 && this.eJson) {
+          const chartObj2 = this.$echarts.init(
+            //劳动课程
+            this.$el.querySelector("#person_canvas1")
+          );
+          // 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: "信息思维与行为",
+          //     value: 15,
+          //     children: [
+          //       {
+          //         name: "信息思维",
+          //         value: this.randomNum(1, 10),
+          //       },
+          //       {
+          //         name: "信息行为",
+          //         value: this.randomNum(1, 5),
+          //       },
+          //     ],
+          //   },
+          // ];
+          var res = this.eJson;
+          var _array = [];
+          let i = 0;
+          for (var item in res) {
+            let num = Object.keys(res);
+            let count = 10 / num.length;
+            let _item = res[item];
+            _array.push({ name: _item.name, value: count, children: [] });
+            let j = 0;
+            for (var item2 in _item.child) {
+              let num2 = Object.keys(res);
+              let count2 = count / num2.length;
+              let _item2 = _item.child[item2];
+              _array[i].children.push({
+                name: _item2.name,
+                value: count2,
+                children: [],
+              });
+              for (var item3 in _item2.child) {
+                let num3 = Object.keys(res);
+                let count3 = count2 / num3.length;
+                let _item3 = _item2.child[item3];
+                _array[i].children[j].children.push({
+                  name: _item3.name,
+                  value: count3,
+                });
+              }
+              j++;
+            }
+            i++;
+            console.log(item);
+          }
+          this.option2.series.data = _array
+          // 初始化雷达图
+          this.chartObj2 = chartObj2;
+          this.chartObj2.setOption(this.option2);
+        } else if (this.type == 2) {
+          // const chartObj3 = this.$echarts.init(
+          //   //劳动课程
+          //   this.$el.querySelector("#person_canvas2")
+          // );
+          // let _array21 = [];
+          // let _array22 = [];
+          // let _array23 = [];
+          // let _array24 = [];
+          // let _array25 = [];
+          // for (var i = 0; i < 5; i++) {
+          //   //   this.option.series[0].data[i].value = this.randomNum(30, 80);
+          //   _array21.push(this.randomNum(2, 20));
+          //   _array22.push(this.randomNum(2, 20));
+          //   _array23.push(this.randomNum(2, 20));
+          //   _array24.push(this.randomNum(2, 20));
+          //   _array25.push(this.randomNum(2, 20));
+          // }
+          // this.option3.series[0].data = _array21;
+          // this.option3.series[1].data = _array22;
+          // this.option3.series[2].data = _array23;
+          // this.option3.series[3].data = _array24;
+          // this.option3.series[4].data = _array25;
+          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).toFixed(1));
+            }
+
+
+            this.chartObj3 = chartObj3;
+            this.chartObj3.setOption(radarOption);
+
+          }
+
+          // 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;
+      window.addEventListener("resize", () => {
+        // if (_this.chartObj2) {
+        //   _this.chartObj2.resize();
+        //   _this.chartObj3.resize();
+        // }
+
+        if (_this.chartObj2) {
+          _this.chartObj2.resize();
+
+        }
+        if (_this.chartObj3) {
+          _this.chartObj3.resize();
+        }
+      });
+    },
+    randomNum(minNum, maxNum) {
+      switch (arguments.length) {
+        case 1:
+          return parseInt(Math.random() * minNum + 1, 10);
+          break;
+        case 2:
+          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+          break;
+        default:
+          return 0;
+          break;
+      }
+    },
+    getInfo() {
+      this.isloading = true
+      let params = {
+        uid: this.userid,
+        cid: this.courseid,
+      };
+      console.log(this.userid);
+      if (!this.userid) {
+        return;
+      }
+      this.ajax
+        .get(this.$store.state.api + "getUserInfo", params)
+        .then((res) => {
+          this.isloading = false
+          let chapters = JSON.parse(res.data[2][0].chapters);
+          var tool = 0;
+          let workJson = []
+          let _pWork = res.data[3];
+          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) : "";
+
+          for (var i = 0; i < chapters.length; i++) {
+            workJson[i] = { tool: 0, ptool: 0, work: 0, ishuo: 0, isCan: 0 }
+            for (
+              var j = 0;
+              j < chapters[i].chapterInfo[0].taskJson.length;
+              j++
+            ) {
+              // 1、电子白板，3、思维导图，6协同文档，7思维网格 16、作业提交,40.项目-学生互评 41.项目-下拉选择题 42.项目-录音功能
+              let _toolsAarry = [1, 3, 6, 7, 16, 15, 4, 40, 41, 42];
+              for (
+                var k = 0;
+                k < chapters[i].chapterInfo[0].taskJson[j].toolChoose.length;
+                k++
+              ) {
+                if (
+                  _toolsAarry.indexOf(
+                    chapters[i].chapterInfo[0].taskJson[j].toolChoose[k].tool[0]
+                  ) != -1
+                ) {
+                  tool++;
+                  workJson[i].tool++
+                }
+              }
+            }
+
+            for (var k = 0; k < _pWork.length; k++) {
+              if (_pWork[k].stage == i) {
+                workJson[i].ptool++
+              }
+            }
+            for (var k = 0; k < _allComment.length; k++) {
+              if (_allComment[k].stage == i) {
+                workJson[i].ishuo++
+              }
+            }
+
+
+          }
+          this.userinfo = res.data[0][0];
+          this.ccount = tool;
+          this.islearn = tool - parseInt(res.data[1][0].vcount);
+
+          this.iscount = res.data[1][0].vcount;
+          this.vcount = 0;
+
+          for (var i = 0; i < workJson.length; i++) {
+            if (workJson[i].ptool > workJson[i].tool) {
+              workJson[i].work = 5
+            } else if (workJson[i].tool === 0) {
+              workJson[i].work = 5
+            } else {
+              workJson[i].work = Math.round(workJson[i].ptool / workJson[i].tool * 100 / 20)
+            }
+            if (workJson[i].ptool) {
+              workJson[i].isCan = 1
+            }
+          }
+          this.workJson = workJson
+
+          console.log(workJson);
+          this.setChart();
+          let _workW = []
+          for (var i = 0; i < _isWorks.length; i++) {
+            if (chapters[_isWorks[i].stage].chapterInfo[0].taskJson[_isWorks[i].task].eList && chapters[_isWorks[i].stage].chapterInfo[0].taskJson[_isWorks[i].task].eList.length) {
+              _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 })
+            // }
+          }
+          for (var i = 0; i < _workW.length; i++) {
+            _workW[i].work = []
+            for (var j = 0; j < _workW[i].elist.length; j++) {
+              if (_workW[i].elist[j].target) {
+                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
+                }
+              }
+            }
+          }
+
+          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
+          console.error(err);
+        });
+    },
+    setType(type) {
+      this.type = type;
+      if (this.chartObj2) {
+        this.chartObj2.dispose();
+
+      }
+      if (this.chartObj3) {
+        this.chartObj3.dispose();
+
+      }
+      this.getInfo();
+    },
+    color16() {//十六进制颜色随机
+      var r = Math.floor(Math.random() * 256);
+      var g = Math.floor(Math.random() * 256);
+      var b = Math.floor(Math.random() * 256);
+      var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
+      return color;
+    }
+  },
+  watch: {
+    userid(newValue, oldValue) {
+      this.getInfo();
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getInfo();
+    });
+  },
+};
+</script>
+
+<style scoped>
+.sd_person_button {
+  font-size: 16px;
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.sd_person_button span {
+  margin-left: 20px;
+  padding: 0 0 6px;
+  cursor: pointer;
+}
+
+.sd_person_button .active {
+  border-bottom: 2px solid #5c549f;
+  color: #5c549f;
+}
+
+
+.target_box {
+  display: flex;
+  align-items: center;
+  width: 80%;
+  margin: 0 auto;
+}
+
+.target_box+.target_box {
+  margin-top: 10px;
+}
+
+.target_task {
+  width: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: rgb(91, 91, 91);
+}
+
+.target_content_box {
+  display: flex;
+  align-items: center;
+  width: calc(100% - 100px);
+}
+
+.target_content_box div {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.box2 {
+  margin-top: 40px;
+  height: 80%;
+  width: 100%;
+  overflow: auto;
+}
+
+.targetA {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/components/pages/components/reportGM.vue

@@ -0,0 +1,518 @@
+<template>
+  <div class="r_box">
+    <div class="r_cbox">
+      <span>学生姓名</span>
+      <el-select
+        multiple
+        collapse-tags
+        class="r_select"
+        v-model="uname"
+        placeholder="全部"
+        filterable
+      >
+        <el-option
+          v-for="item in userAarray"
+          :key="item.userid"
+          :label="item.username"
+          :value="item.userid"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="r_cbox">
+      <span>选择阶段</span>
+      <el-select
+        class="r_select"
+        v-model="chap"
+        multiple
+        collapse-tags
+        placeholder="全部"
+        @change="changeChap"
+      >
+        <el-option
+          v-for="(item, index) in dyList"
+          :key="index"
+          :label="item.name"
+          :value="item.id"
+        ></el-option>
+      </el-select>
+    </div>
+    <div class="r_cbox">
+      <span>任务内容</span>
+      <el-select
+        class="r_select"
+        v-model="task"
+        multiple
+        collapse-tags
+        placeholder="全部"
+      >
+        <el-option-group
+          v-for="(group, index) in dyAarray"
+          :key="index"
+          :label="group.name"
+        >
+          <el-option
+            v-for="(item, index2) in group.taskList"
+            :key="index + '-' + index2"
+            :label="item.name"
+            :value="group.id + '-' + item.id"
+          >
+          </el-option>
+        </el-option-group>
+      </el-select>
+    </div>
+    <div class="btn_box">
+      <el-button class="btn btnClassGM" type="primary" @click="confirm">确定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import htmlDocx from "html-docx-js/dist/html-docx";
+import saveAs from "file-saver";
+export default {
+  props: ["cid"],
+  data() {
+    return {
+      uname: [],
+      chap: [],
+      task: [],
+      dyAarray: [],
+      dyList: [],
+      userAarray: [],
+      imgList: [],
+      askList: [],
+      questList: [],
+      wordList: [],
+      course: {},
+    };
+  },
+  methods: {
+    getCourseDetail() {
+      let params = {
+        cid: this.cid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getCourseWorksReport", params)
+        .then((res) => {
+          this.course = res.data[0][0];
+          var dyJSON = JSON.parse(res.data[0][0].chapters);
+          let dyList = [];
+          for (var i = 0; i < dyJSON.length; i++) {
+            dyList.push({ name: dyJSON[i].dyName, id: i, taskList: [] });
+            var a = dyJSON[i].chapterInfo[0].taskJson;
+            for (var j = 0; j < a.length; j++) {
+              dyList[i].taskList.push({ name: a[j].task, id: j });
+            }
+          }
+          this.dyList = dyList;
+          this.userAarray = res.data[1];
+          console.log(res.data[0][1]);
+          this.imgList = res.data[2];
+          this.askList = res.data[3];
+          this.questList = res.data[4];
+          this.wordList = res.data[5];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    confirm() {
+      var _uname = [];
+      var _userA = this.userAarray;
+      var _chap = JSON.parse(JSON.stringify(this.chap));
+      var _task = this.task;
+      if (this.uname.length) {
+        for (var i = 0; i < _userA.length; i++) {
+          if (this.uname.join(",").indexOf(_userA[i].userid) != -1) {
+            _uname.push(_userA[i]);
+          }
+        }
+      } else {
+        for (var i = 0; i < _userA.length; i++) {
+          _uname.push(_userA[i]);
+        }
+      }
+
+      if (!_chap.length) {
+        for (var i = 0; i < this.dyList.length; i++) {
+          _chap.push(this.dyList[i].id);
+        }
+      }
+
+      let imgList = this.imgList;
+      let askList = this.askList;
+      let questList = this.questList;
+      let wordList = this.wordList;
+
+      let workArray = [];
+
+      // json{
+      //       img: [],
+      //       askList: [],
+      //       questList: {},
+      //       wordList: [],
+      //       chapName: "",
+      //       taskName: "",
+      //       username:""
+      //     }
+
+      for (let i = 0; i < _uname.length; i++) {
+        for (let chapI = 0; chapI < _chap.length; chapI++) {
+          if (_task.length) {
+            for (let taskI = 0; taskI < _task.length; taskI++) {
+              let _tI = _task[taskI].split("-");
+              if (_tI[0] == _chap[chapI]) {
+                let _workjson = {
+                  img: [],
+                  askList: [],
+                  questList: [],
+                  wordList: [],
+                  chapName:
+                    "第" +
+                    (parseInt(_chap[chapI]) + 1) +
+                    "阶段 " +
+                    this.dyList[_chap[chapI]].name,
+                  taskName:
+                    "任务" +
+                    (parseInt(_tI[1]) + 1) +
+                    this.dyList[_chap[chapI]].taskList[_tI[1]].name,
+                  username: _uname[i].username,
+                };
+                // imgList;askList;questList;wordList;
+                for (let a = 0; a < imgList.length; a++) {
+                  if (
+                    imgList[a].stage == _chap[chapI] &&
+                    imgList[a].task == _tI[1] &&
+                    imgList[a].userid == _uname[i].userid
+                  ) {
+                    _workjson.img.push({ src: imgList[a].content });
+                  }
+                }
+                for (let b = 0; b < askList.length; b++) {
+                  if (
+                    askList[b].stage == _chap[chapI] &&
+                    askList[b].task == _tI[1] &&
+                    askList[b].userid == _uname[i].userid
+                  ) {
+                    const element = askList[b];
+                    let a1 = JSON.parse(element.content)[0];
+                    let b1 = a1.anwer.split(",");
+                    let c1 = [];
+                    for (var j1 = 0; j1 < b1.length; j1++) {
+                      c1.push(parseInt(b1[j1]));
+                    }
+                    a1.askJson.radio = c1;
+                    a1.askJson.time = element.time;
+                    _workjson.askList.push(a1.askJson);
+                  }
+                }
+                for (let c = 0; c < questList.length; c++) {
+                  if (
+                    questList[c].stage == _chap[chapI] &&
+                    questList[c].task == _tI[1] &&
+                    questList[c].userid == _uname[i].userid
+                  ) {
+                    const element = questList[c];
+                    _workjson.questList.push(JSON.parse(element.content)[0]);
+                  }
+                }
+                for (let d = 0; d < wordList.length; d++) {
+                  if (
+                    wordList[d].stage == _chap[chapI] &&
+                    wordList[d].task == _tI[1] &&
+                    wordList[d].userid == _uname[i].userid
+                  ) {
+                    const element = wordList[d];
+                    _workjson.wordList.push(element.content);
+                  }
+                }
+                workArray.push(_workjson);
+              }
+            }
+          } else {
+            for (
+              let taskI = 0;
+              taskI < this.dyList[_chap[chapI]].taskList.length;
+              taskI++
+            ) {
+              let _tI = [
+                _chap[chapI],
+                this.dyList[_chap[chapI]].taskList[taskI].id,
+              ];
+              if (_tI[0] == _chap[chapI]) {
+                let _workjson = {
+                  img: [],
+                  askList: [],
+                  questList: [],
+                  wordList: [],
+                  chapName:
+                    "第" +
+                    (parseInt(_chap[chapI]) + 1) +
+                    "阶段 " +
+                    this.dyList[_chap[chapI]].name,
+                  taskName:
+                    "任务" +
+                    (parseInt(_tI[1]) + 1) +
+                    this.dyList[_chap[chapI]].taskList[_tI[1]].name,
+                  username: _uname[i].username,
+                };
+                // imgList;askList;questList;wordList;
+                for (let a = 0; a < imgList.length; a++) {
+                  if (
+                    imgList[a].stage == _chap[chapI] &&
+                    imgList[a].task == _tI[1] &&
+                    imgList[a].userid == _uname[i].userid
+                  ) {
+                    _workjson.img.push({ src: imgList[a].content });
+                  }
+                }
+                for (let b = 0; b < askList.length; b++) {
+                  if (
+                    askList[b].stage == _chap[chapI] &&
+                    askList[b].task == _tI[1] &&
+                    askList[b].userid == _uname[i].userid
+                  ) {
+                    const element = askList[b];
+                    let a1 = JSON.parse(element.content)[0];
+                    let b1 = a1.anwer.split(",");
+                    let c1 = [];
+                    for (var j1 = 0; j1 < b1.length; j1++) {
+                      c1.push(parseInt(b1[j1]));
+                    }
+                    a1.askJson.radio = c1;
+                    a1.askJson.time = element.time;
+                    _workjson.askList.push(a1.askJson);
+                  }
+                }
+                for (let c = 0; c < questList.length; c++) {
+                  if (
+                    questList[c].stage == _chap[chapI] &&
+                    questList[c].task == _tI[1] &&
+                    questList[c].userid == _uname[i].userid
+                  ) {
+                    const element = questList[c];
+                    _workjson.questList.push(JSON.parse(element.content)[0]);
+                  }
+                }
+                for (let d = 0; d < wordList.length; d++) {
+                  if (
+                    wordList[d].stage == _chap[chapI] &&
+                    wordList[d].task == _tI[1] &&
+                    wordList[d].userid == _uname[i].userid
+                  ) {
+                    const element = wordList[d];
+                    _workjson.wordList.push(element.content);
+                  }
+                }
+                workArray.push(_workjson);
+              }
+            }
+          }
+        }
+      }
+      var _course = `<h1>${this.course.title}</h1>`;
+      let html = "";
+      for (let i = 0; i < workArray.length; i++) {
+        let _html = this.setHtml(workArray[i]);
+        html += _html;
+      }
+
+      this.generate(_course + html);
+      console.log(workArray);
+    },
+    setHtml(workJson) {
+      var _title =
+      // style='display:flex;align-items:center'
+        "<div >" +
+        "<h2>" +
+        workJson.chapName +
+        "-" +
+        workJson.username;
+      ("</h2>");
+      ("</div>");
+      var _subtitle = "<h3>" + workJson.taskName + "</h3>";
+      var _img = "";
+      if (workJson.img.length > 0) {
+        for (var i = 0; i < workJson.img.length; i++) {
+          // _img+=`<div style="margin-top:10px"><div>图片${
+          //   i + 1
+          // }:<a href='${ workJson.img[i].src}'>${ workJson.img[i].src}</a></div>`
+          _img += `<div style="margin-top:10px"><div>图片${
+            i + 1
+          }</div><img style="max-width:500px" src="${
+            workJson.img[i].src
+          }"/></div>`;
+        }
+      }
+
+      var _ask = "";
+      if (workJson.askList.length > 0) {
+        var _ask = "<h3>问卷调查</h3>";
+        for (var i = 0; i < workJson.askList.length; i++) {
+          var _div = document.createElement("div");
+          _div.innerHTML = `<h4>问卷标题:${workJson.askList[i].askTitle}</h4>`;
+          for (var j = 0; j < workJson.askList[i].askJson.length; j++) {
+            var _div2 = document.createElement("div");
+            _div2.innerHTML = `<h5>第${j + 1}题:${
+              workJson.askList[i].askJson[j].askstitle
+            }  选择:${workJson.askList[i].radio[j] + 1}</h5> `;
+            var _div3 = document.createElement("div");
+            for (
+              var z = 0;
+              z < workJson.askList[i].askJson[j].checkList.length;
+              z++
+            ) {
+              _div3.innerHTML += `<span style="margin-right:5px">${z + 1}.${
+                workJson.askList[i].askJson[j].checkList[z]
+              }</span>`;
+            }
+            _div2.innerHTML += `<div>${_div3.innerHTML}</div>`;
+            _div.innerHTML += `<div>${_div2.innerHTML}</div>`;
+          }
+          _ask += `<div>${_div.innerHTML}</div>`;
+        }
+      }
+
+      var _answer = "";
+      if (workJson.questList.length > 0) {
+        var _answer = "<h3>问答</h3>";
+        for (var i = 0; i < workJson.questList.length; i++) {
+          var _div = document.createElement("div");
+          _div.innerHTML = `<h4>问答：${workJson.questList[i].answerTitle}</h4>`;
+          _div.innerHTML += `<div>${workJson.questList[i].answer}</div>`;
+          _answer += `<div>${_div.innerHTML}</div>`;
+        }
+      }
+
+      var _link = "";
+      if (workJson.wordList.length > 0) {
+        for (var i = 0; i < workJson.wordList.length; i++) {
+          _link += `<div style="margin-top:10px"><a href='${workJson.wordList[i]}'>${workJson.wordList[i]}</a></div>`;
+        }
+      }
+
+      if (
+        !workJson.img.length &&
+        !workJson.askList.length &&
+        !workJson.questList.length &&
+        !workJson.wordList.length
+      ) {
+        return "";
+      }
+      return _title + _subtitle + _img + _ask + _answer + _link;
+    },
+    async generate(a) {
+      // 将html文件中需要用到的数据挂载到store上
+      this.$store.commit("update", ["report", a]);
+      console.log(this.$store.state.report);
+      const content = `<!DOCTYPE html>
+      <html lang="en">
+      <head>
+          <meta charset="UTF-8">
+          <meta http-equiv="X-UA-Compatible" content="IE=edge">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>报告</title>
+      </head>
+      <body>
+      ${this.$store.state.report}
+      </body>
+      </html>`;
+      // debugger
+      //生成报告
+      const link = document.createElement("a");
+      // link.download = "报告.html"; // 文件名
+      let dname = this.course.title+'-'
+      var _uname = [];
+      var _userA = this.userAarray;
+      if (this.uname.length) {
+        for (var i = 0; i < _userA.length; i++) {
+          if (this.uname.join(",").indexOf(_userA[i].userid) != -1) {
+            _uname.push(_userA[i].username);
+          }
+        }
+        dname+=_uname.join('、')+'.html'
+      } else {
+        dname+='全部学生.html'
+      }
+      link.download = dname; // 文件名
+      link.style.display = "none";
+      // 创建文件流
+      // 创建bolb实例时，内容一定要放在[]中
+      const blob = new Blob([content], {
+        type: "text/plain;charset='utf-8'",
+      });
+      link.href = window.URL.createObjectURL(blob);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      // saveAs(
+      //   htmlDocx.asBlob(content, {
+      //     orientation: "landscape", //跨域设置
+      //   }),
+      //   //文件名
+      //   "报告.doc"
+      // );
+    },
+    changeChap() {
+      let _dyList = this.dyList;
+      this.dyAarray = [];
+      this.task = [];
+      for (var i = 0; i < _dyList.length; i++) {
+        if (this.chap.indexOf(_dyList[i].id) != -1) {
+          this.dyAarray.push(_dyList[i]);
+        }
+      }
+    },
+  },
+  watch: {
+    cid(newValue, oldValue) {
+      this.getCourseDetail();
+    },
+  },
+  mounted() {
+    this.getCourseDetail();
+  },
+};
+</script>
+
+<style scoped>
+.r_box {
+}
+.r_cbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+.r_cbox span {
+  margin-right: 20px;
+}
+
+.r_box .r_select {
+  width: 400px;
+}
+
+.btn_box {
+  margin: 40px 0 0 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.btn_box .btn {
+  width: 60%;
+  /* background: rgb(14, 114, 230); */
+}
+
+.r_cbox >>> .el-select .el-input.is-focus .el-input__inner {
+  border-color: #5c549f;
+}
+.r_cbox.student_search >>> .el-select .el-input__inner:focus {
+  border-color: #5c549f;
+}
+
+.el-select-dropdown__item.selected {
+  color: #5c549f !important;
+}
+
+</style>

src/components/pages/components/studentReportGM.vue

@@ -0,0 +1,191 @@
+<template>
+  <div style="width: 100%; height: 100%">
+    <div class="sr_head">学生成长报告</div>
+    <div class="sr_body">
+      <div class="sr_box">
+        <div class="sr_first">
+          <div class="first">
+            <div class="sub_title"><span>学生基本信息</span></div>
+            <StudentInfo class="r_box" :userid="userid" :courseid="courseid"></StudentInfo>
+          </div>
+          <div class="second">
+            <div class="sub_title"><span>项目基本信息</span></div>
+            <CourseInfo class="r_box" :courseid="courseid"></CourseInfo>
+          </div>
+        </div>
+        <div class="sr_second">
+          <div class="first">
+            <div class="sub_title"><span>学生综合能力评估</span></div>
+            <StudentAbility class="r_box"  :userid="userid" :courseid="courseid"></StudentAbility>
+          </div>
+          <!-- <div class="second">
+            <div class="sub_title"><span>项目详细报告</span></div>
+            <CourseDetailReport class="r_box"></CourseDetailReport>
+          </div> -->
+        </div>
+        <div class="sr_third">
+          <div class="first">
+            <div class="sub_title"><span>阶段完成情况</span></div>
+            <CourseRadar class="r_box" :userid="userid" :courseid="courseid"></CourseRadar>
+          </div>
+          <div class="second">
+            <div class="sub_title"><span>阶段评价平均分</span></div>
+            <CoursePie class="r_box" :userid="userid" :courseid="courseid"></CoursePie>
+          </div>
+        </div>
+      </div>
+      <div style="height:100%;min-width: 1100px;">
+        <worksDetail3 class="r_box" :cid="courseid" :uid="userid" :ooid="scoid"></worksDetail3>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import StudentInfo from "./report/studentInfo.vue";
+import CourseInfo from "./report/courseInfoGM.vue";
+import StudentAbility from "./report/studentAbilityGM.vue";
+import CourseRadar from "./report/courseRadar.vue";
+import CoursePie from "./report/coursePieGM.vue";
+import CourseDetailReport from "./report/courseDetailReport.vue";
+import worksDetail3 from "./worksDetail3GM.vue";
+export default {
+  props: ["checkCourse", "checkStudent","oid"],
+  components: {
+    StudentInfo,
+    CourseInfo,
+    StudentAbility,
+    CourseRadar,
+    CoursePie,
+    CourseDetailReport,
+    worksDetail3
+  },
+  data() {
+    return {
+      userid: "",
+      courseid: "",
+      scoid:"",
+    };
+  },
+  watch: {
+    checkStudent(newValue, oldValue) {
+      this.userid = this.checkStudent;
+      this.courseid = this.checkCourse;
+      this.scoid = this.oid;
+    },
+  },
+  created() {
+    this.userid = this.checkStudent;
+    this.courseid = this.checkCourse;
+    this.scoid = this.oid;
+  },
+};
+</script>
+
+<style scoped>
+.sr_head {
+  color: #5c549f;
+  font-size: 30px;
+  font-weight: bolder;
+  text-align: center;
+  margin-bottom: 15px;
+}
+.sr_body {
+  width: 100%;
+  height: calc(100% - 55px);
+  overflow: auto;
+}
+
+.sr_box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  min-width: 1100px;
+  min-height: 700px;
+}
+
+.sr_first {
+  width: calc(100% / 3.75);
+  height: 100%;
+}
+
+.sr_second {
+  width: calc(100% / 3.75 * 2);
+  height: 100%;
+}
+.sr_third {
+  width: calc(100% / 3.75 * 0.75);
+  height: 100%;
+}
+.sr_first,
+.sr_second,
+.sr_third {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.sr_first .first,
+.sr_first .second,
+.sr_second .first,
+.sr_second .second,
+.sr_third .first,
+.sr_third .second {
+  background: #fff;
+  border-radius: 10px;
+  width: 98%;
+  overflow: hidden;
+}
+.sr_first .first {
+  height: calc(100% / 3 * 1.1);
+  margin-bottom: 20px;
+}
+.sr_first .second {
+  height: calc(100% / 3 * 1.9);
+}
+
+.sr_second .first {
+  /* height: calc(100% / 3.5 * 2); */
+  height: calc(100%);
+  /* margin-bottom: 20px; */
+}
+.sr_second .second {
+  /* height: calc(100% / 3.5 * 1.5); */
+}
+.sr_third .first {
+  height: calc(100% / 2.25 * 1.25);
+  margin-bottom: 20px;
+}
+.sr_third .second {
+  height: calc(100% / 2.25);
+}
+.sub_title {
+  display: flex;
+  color: #5c549f;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+  width: 200px;
+  margin: 0 auto;
+}
+.sub_title span {
+}
+.sub_title::after {
+  content: "";
+  width: 20px;
+  height: 20px;
+  background-image: url(../../../assets/report/left_coinGM.png);
+  background-size: 100% 100%;
+}
+.sub_title::before {
+  content: "";
+  width: 20px;
+  height: 20px;
+  background-image: url(../../../assets/report/right_coinGM.png);
+  background-size: 100% 100%;
+}
+
+.r_box {
+  height: calc(100% - 40px);
+  width: 100%;
+}
+</style>

src/components/pages/components/workDataGM.vue

@@ -0,0 +1,1014 @@
+<template>
+  <div>
+    <div class="cp_title" v-if="false">
+      <span>{{ this.dataJson.title }}</span>
+    </div>
+    <div class="cp_title" v-if="false">
+      <span>{{ "教师姓名:" + this.dataJson.uname }}</span>
+    </div>
+    <div class="data_body" v-if="false">
+      <div class="data_c">
+        <WorkData :workJson="workJson" :chapters="chapters"></WorkData>
+      </div>
+      <div class="data_c">
+        <ProblelmData
+          :problemJson="problemJson"
+          :chapters="chapters"
+        ></ProblelmData>
+      </div>
+      <div class="data_c">
+        <ToolsData :toolsJson="toolsJson" :tools="tools"></ToolsData>
+      </div>
+      <div class="data_c">
+        <ScoreData :scoreJson="scoreJson"></ScoreData>
+      </div>
+    </div>
+    <div class="sd_class" v-if="false">
+      <div class="sd_tTitle">课堂表现</div>
+      <div class="wd_class_body">
+        <div class="wd_module">
+          <div class="sd_module_content">
+            <div
+              class="sd_module_children"
+              style="
+                font-size: 25px;
+                padding: 0 25px;
+                box-sizing: border-box;
+                text-align: center;
+              "
+            >
+              <span>课程人数:共100人,已完成人数{{ randomNum(50, 100) }}人</span>
+            </div>
+            <div class="sd_module_children">
+              <span class="s">课堂时长</span>
+              <span class="s2">
+                <span>{{ randomNum(5, 15) }}</span
+                >次 <span>{{ randomNum(1, 60) }}</span
+                >分 <span>{{ randomNum(1, 59) }}</span
+                >秒
+              </span>
+              <span>已经击败99%教师</span>
+            </div>
+            <div class="sd_module_children">
+              <span class="s">课堂节数</span>
+              <span class="s2">
+                <span>{{ randomNum(5, 20) }}</span
+                >节
+              </span>
+              <span>已经击败99%教师</span>
+            </div>
+          </div>
+          <div style="width: 45%; position: relative">
+            <div
+              id="gauge_canvas"
+              class="echart"
+              style="width: 100%; height: 100%"
+            ></div>
+            <div
+              style="
+                position: absolute;
+                bottom: 25px;
+                display: flex;
+                justify-content: space-between;
+                font-size: 20px;
+                width: 100%;
+                padding: 0 100px;
+                box-sizing: border-box;
+              "
+            >
+              <span>教师为中心</span>
+              <span>学生为中心</span>
+            </div>
+          </div>
+          <div class="sd_module_content">
+            <div class="sd_module_children">
+              <span class="s">课堂互动</span>
+              <span class="s2">
+                <span>{{ randomNum(10, 20) }}</span
+                >次
+              </span>
+              <span>已经击败99%教师</span>
+            </div>
+            <div class="sd_module_children">
+              <span class="s">课堂生成</span>
+              <span class="s2">
+                <span>{{ randomNum(7, 15) }}</span
+                >节
+              </span>
+              <span>已经击败99%教师</span>
+            </div>
+            <div class="sd_module_children">
+              <span class="s">自主活动</span>
+              <span class="s2">
+                <span>{{ randomNum(10, 20) }}</span
+                >分 <span>{{ randomNum(10, 59) }}</span
+                >秒
+              </span>
+              <span>已经击败99%教师</span>
+            </div>
+          </div>
+        </div>
+        <div class="wd_bottom">
+          <div class="bdiv">
+            <div
+              id="line_canvas"
+              class="echart"
+              style="width: 100%; height: 100%"
+            ></div>
+          </div>
+          <div class="bdiv">
+            <div
+              id="bar_canvas"
+              class="echart"
+              style="width: 100%; height: 100%"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <!-- <img src="../../../assets/data/tu1.png" alt style="width:100%" /> -->
+    </div>
+    <div class="sd_class">
+      <div class="sd_tTitle" v-if="false">班级学生能力分析</div>
+      <div style="background: #fff; padding: 10px 0">
+        <div class="sd_person_button" v-if="false">
+          <span @click="setType(1)" :class="{ active: type == 1 }">语文</span>
+          <span @click="setType(2)" :class="{ active: type == 2 }">数学</span>
+          <span @click="setType(3)" :class="{ active: type == 3 }">英语</span>
+          <span @click="setType(4)" :class="{ active: type == 4 }"
+            >信息科技</span
+          >
+          <span @click="setType(5)" :class="{ active: type == 5 }">艺术</span>
+          <span @click="setType(6)" :class="{ active: type == 6 }"
+            >跨学科素养</span
+          >
+        </div>
+        <div style="display: flex; flex-wrap: wrap">
+          <div style="width: 50%; height: 500px"  v-if="false">
+            <div
+              id="sunburst_canvas"
+              class="echart"
+              style="width: 100%; height: 100%"
+            ></div>
+          </div>
+          <div style="width: 50%; height: 500px" v-if="false">
+            <div
+              id="scatter_canvas"
+              class="echart"
+              style="width: 100%; height: 100%"
+            ></div>
+          </div>
+          <div style="width: 100%">
+            <WorksDetail2 :cid="cid" :uid="uid" :ooid="ooid"></WorksDetail2>
+            <!-- <el-table
+              ref="table"
+              :data="tableData"
+              border
+              :height="500"
+              :fit="true"
+              style="width: 100%; height: 60%"
+              :header-cell-style="{ background: '#f1f1f1' }"
+              :row-class-name="tableRowClassName"
+            >
+              <el-table-column prop="name" label="姓名" min-width="20%" align="center"></el-table-column>
+              <el-table-column prop="number" label="学号" min-width="20%" align="center"></el-table-column>
+              <el-table-column prop="class" label="班级" min-width="20%" align="center"></el-table-column>
+              <el-table-column prop="score" label="分数" min-width="20%" align="center"></el-table-column>
+              <el-table-column label="操作" min-width="20%">
+                <template>
+                  <el-button type="primary" size="small">查看</el-button>
+                </template>
+              </el-table-column>
+            </el-table>-->
+          </div>
+          <!-- <img src="../../../assets/data/tu3.png" alt style="width:50%" />
+          <img src="../../../assets/data/tu2.png" alt style="width:50%" />-->
+          <!-- <img src="../../../assets/data/tu4.png" alt style="width:100%" /> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import WorkData from "./data/workData";
+import ProblelmData from "./data/problelmData";
+import ToolsData from "./data/toolsData";
+import ScoreData from "./data/scoreData";
+import WorksDetail2 from "./worksDetail2GM";
+
+export default {
+  props: ["dataJson", "cid", "uid", "ooid"],
+  components: {
+    WorkData,
+    ProblelmData,
+    ToolsData,
+    ScoreData,
+    WorksDetail2,
+  },
+  data() {
+    return {
+      tableData: [
+        {
+          name: "卓曾向",
+          number: "202205311",
+          class: "三年级七班",
+          score: "100",
+        },
+        {
+          name: "王志成",
+          number: "202205411",
+          class: "四年级一班",
+          score: "99",
+        },
+        {
+          name: "李沛郡",
+          number: "202205361",
+          class: "三年级六班",
+          score: "89",
+        },
+        {
+          name: "李世昌",
+          number: "202205321",
+          class: "三年级二班",
+          score: "88",
+        },
+        {
+          name: "李佳薇",
+          number: "202205471",
+          class: "四年级七班",
+          score: "69",
+        },
+        {
+          name: "叶玉卿",
+          number: "202205671",
+          class: "六年级七班",
+          score: "78",
+        },
+        {
+          name: "冯翊泽",
+          number: "202205571",
+          class: "五年级七班",
+          score: "68",
+        },
+        { name: "乐舞", number: "202205372", class: "三年级七班", score: "77" },
+        {
+          name: "关晓辉",
+          number: "202205475",
+          class: "四年级七班",
+          score: "68",
+        },
+        {
+          name: "谭晶陈",
+          number: "202205271",
+          class: "二年级七班",
+          score: "79",
+        },
+      ],
+      Course: this.dataJson,
+      courseId: "",
+      tools: [],
+      chapters: [],
+      workJson: [], //多少人提交作业数据
+      scoreJson: [], //量规评分数据
+      problemJson: [], //问答数据
+      toolsJson: [], //工具数据
+      type: 6,
+      chartObj: null,
+      chartObj2: null,
+      chartObj3: null,
+      chartObj4: null,
+      chartObj5: null,
+      gaugeOption: {
+        series: [
+          {
+            type: "gauge",
+            radius: "100%",
+            axisLine: {
+              lineStyle: {
+                width: 10,
+                color: [
+                  [
+                    100,
+                    {
+                      type: "linear",
+                      x: 0,
+                      y: 0,
+                      x2: 0,
+                      y2: 1,
+                      colorStops: [
+                        {
+                          offset: 1,
+                          color: "rgb(240,50,243)", // 0% 处的颜色
+                        },
+
+                        {
+                          offset: 0,
+                          color: "rgb(37,61,249)", // 100% 处的颜色
+                        },
+                      ],
+                      global: false, // 缺省为 false
+                    },
+                  ],
+                ],
+              },
+            },
+            pointer: {
+              width: 8,
+              length: "65%",
+              itemStyle: {
+                color: "auto",
+              },
+            },
+
+            axisLabel: {
+              color: "auto",
+              distance: 20,
+              fontSize: 20,
+            },
+            detail: {
+              valueAnimation: true,
+              formatter: "{value}",
+            },
+            data: [
+              {
+                value: 60,
+                name: "課堂類型",
+                title: {
+                  offsetCenter: [0, "80%"],
+                  fontSize: 30,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      lineOption: {
+        title: {
+          text: "課堂時間",
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["課堂時長", "麻吉星時長"],
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        toolbox: {
+          // feature: {
+          //   saveAsImage: {},
+          // },
+        },
+        xAxis: {
+          type: "category",
+          data: ["05-25", "05-26", "05-27", "05-28", "05-29", "05-30", "05-31"],
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            formatter: "{value}M",
+          },
+        },
+        series: [
+          {
+            name: "課堂時長",
+            type: "line",
+            data: [10, 20, 30, 11, 15, 16, 18],
+          },
+          {
+            name: "麻吉星時長",
+            type: "line",
+            data: [22, 16, 18, 15, 19, 28, 17],
+          },
+        ],
+      },
+      barOption: {
+        title: {
+          text: "任教班級",
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {},
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: ["中山五年5班", "中山五年5班"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            name: "圖片",
+            type: "bar",
+            data: [220, 150],
+          },
+          {
+            name: "視頻",
+            type: "bar",
+            data: [120, 132],
+          },
+          {
+            name: "互動",
+            type: "bar",
+            data: [110, 132],
+          },
+          {
+            name: "投票",
+            type: "bar",
+
+            data: [120, 132],
+          },
+          {
+            name: "挑戰",
+            type: "bar",
+            data: [221, 110],
+          },
+          {
+            name: "評估",
+            type: "bar",
+            data: [120, 133],
+          },
+          {
+            name: "棄權",
+            type: "bar",
+            data: [105, 132],
+          },
+        ],
+      },
+      sunburstOption: {
+        //color:colors,
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          left: "50",
+          top: "center",
+        },
+        series: {
+          type: "sunburst",
+          data: [],
+          radius: [20, "90%"],
+          itemStyle: {
+            borderRadius: 7,
+            borderWidth: 2,
+          },
+          label: {
+            show: true,
+            color: "#fff",
+          },
+        },
+      },
+      scatterOption: {
+        xAxis: {
+          type: "category",
+          data: ["问题意识", "科学探究", "实践创新", "工程思维", "学习反思"],
+          splitLine: {
+            show: true,
+          },
+          axisLine: {
+            show: false,
+          },
+          name: "能力指标",
+        },
+        yAxis: {
+          type: "value",
+          name: "分值",
+          minInterval: 1,
+          max: 5,
+          axisLine: {
+            show: false,
+          },
+        },
+        grid: {
+          left: 100,
+          bottom: 50,
+          right: 100,
+          top: 70,
+        },
+        legend: {
+          color: "rgb(222,126,62)",
+          left: "right",
+          top: "0%",
+        },
+        series: [
+          {
+            name: "学生百分数(单位：%)",
+            type: "scatter",
+            symbolSize: function (val) {
+              return val[2] * 1.5;
+            },
+            color: "rgb(222,126,62,.5)",
+            data: [[1, 2, 50]],
+            label: {
+              color: "rgb(222,126,62)",
+              show: true,
+              position: "inside",
+              fontSize: 16,
+              formatter: function (a, b, c) {
+                return a.data[2];
+              },
+            },
+            animationDelay: function (idx) {
+              return idx * 5;
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    getData() {
+      let params = {
+        cid: this.courseId,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getWorkData", params)
+        .then((res) => {
+          let _data = res.data[1]; //所有作业数据
+          let _data2 = res.data[2]; //问答提交数据
+          let _data3 = res.data[3]; //工具使用数据
+          let workJson = [];
+          let scoreJson = [];
+          let problemJson = [];
+          let toolsJson = [];
+          _data.forEach((item, index) => {
+            workJson.push({ stage: item.stage, userid: item.userid });
+            scoreJson.push({ rate: JSON.parse(item.rate) });
+          });
+          _data2.forEach((item, index) => {
+            problemJson.push({ stage: item.chapterid });
+          });
+          _data3.forEach((item, index) => {
+            toolsJson.push({ tools: item.tools, count: item.count });
+          });
+          this.workJson = workJson;
+          this.scoreJson = scoreJson;
+          this.problemJson = problemJson;
+          this.toolsJson = toolsJson;
+          this.$forceUpdate();
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#gauge_canvas")
+        );
+        this.gaugeOption.series[0].data[0].value = this.randomNum(10, 100);
+        const chartObj2 = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#line_canvas")
+        );
+        var _array1 = [];
+        var _array2 = [];
+        for (let index = 0; index < 7; index++) {
+          _array1.push(this.randomNum(40, 50));
+          _array2.push(this.randomNum(40, 50));
+        }
+        this.lineOption.series[0].data = _array1;
+        this.lineOption.series[1].data = _array2;
+        const chartObj3 = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#bar_canvas")
+        );
+        var _arraybar1 = [];
+        var _arraybar2 = [];
+        var _arraybar3 = [];
+        var _arraybar4 = [];
+        var _arraybar5 = [];
+        var _arraybar6 = [];
+        var _arraybar7 = [];
+        for (let index = 0; index < 7; index++) {
+          _arraybar1.push(this.randomNum(20, 70));
+          _arraybar2.push(this.randomNum(20, 70));
+          _arraybar3.push(this.randomNum(20, 70));
+          _arraybar4.push(this.randomNum(20, 70));
+          _arraybar5.push(this.randomNum(20, 70));
+          _arraybar6.push(this.randomNum(20, 70));
+          _arraybar7.push(this.randomNum(20, 70));
+        }
+        this.barOption.series[0].data = _arraybar1;
+        this.barOption.series[1].data = _arraybar2;
+        this.barOption.series[2].data = _arraybar3;
+        this.barOption.series[3].data = _arraybar4;
+        this.barOption.series[4].data = _arraybar5;
+        this.barOption.series[5].data = _arraybar6;
+        this.barOption.series[6].data = _arraybar7;
+        const chartObj4 = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#sunburst_canvas")
+        );
+        this.sunburstOption.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, 15),
+              },
+            ],
+          },
+          {
+            name: "实践创新能力",
+            value: 15,
+            children: [
+              {
+                name: "实践创新能力",
+                value: this.randomNum(5, 15),
+              },
+            ],
+          },
+          {
+            name: "科学探究能力",
+            value: 15,
+            children: [
+              {
+                name: "科学探究能力",
+                value: this.randomNum(5, 15),
+              },
+            ],
+          },
+          {
+            name: "问题意识",
+            value: 15,
+            children: [
+              {
+                name: "问题意识",
+                value: this.randomNum(5, 15),
+              },
+            ],
+          },
+        ];
+        const chartObj5 = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#scatter_canvas")
+        );
+        var scatterArray = [];
+        for (var i = 0; i < 5; i++) {
+          scatterArray[i] = [];
+          var a = 0;
+          for (var j = 0; j < 5; j++) {
+            var b = this.randomNum(0, 20);
+            a += b;
+            if (j == 4) {
+              scatterArray[i].push(100 - a);
+              scatterArray[i].sort(function () {
+                return Math.random() - 0.5;
+              });
+            } else {
+              scatterArray[i].push(b);
+            }
+          }
+        }
+
+        var _arrayScatter = [];
+        for (var i = 0; i < 5; i++) {
+          for (var j = 1; j < 6; j++) {
+            var x = i;
+            var y = j;
+            // var z = this.randomNum(0, 100);
+            var z = scatterArray[i][j - 1];
+            _arrayScatter.push([x, y, z]);
+          }
+        }
+        this.scatterOption.series[0].data = _arrayScatter;
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj2 = chartObj2;
+        this.chartObj3 = chartObj3;
+        this.chartObj4 = chartObj4;
+        this.chartObj5 = chartObj5;
+        this.chartObj.setOption(this.gaugeOption);
+        this.chartObj2.setOption(this.lineOption);
+        this.chartObj3.setOption(this.barOption);
+        this.chartObj4.setOption(this.sunburstOption);
+        this.chartObj5.setOption(this.scatterOption);
+        this.tableData = this.tableData.sort(function () {
+          return Math.random() - 0.5;
+        });
+      });
+    },
+    randomNum(minNum, maxNum) {
+      switch (arguments.length) {
+        case 1:
+          return parseInt(Math.random() * minNum + 1, 10);
+          break;
+        case 2:
+          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+          break;
+        default:
+          return 0;
+          break;
+      }
+    },
+    setType(type) {
+      this.type = type;
+      this.sunburstOption.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(5, 15),
+            },
+          ],
+        },
+        {
+          name: "实践创新能力",
+          value: 15,
+          children: [
+            {
+              name: "实践创新能力",
+              value: this.randomNum(5, 15),
+            },
+          ],
+        },
+        {
+          name: "科学探究能力",
+          value: 15,
+          children: [
+            {
+              name: "科学探究能力",
+              value: this.randomNum(5, 15),
+            },
+          ],
+        },
+        {
+          name: "问题意识",
+          value: 15,
+          children: [
+            {
+              name: "问题意识",
+              value: this.randomNum(5, 15),
+            },
+          ],
+        },
+      ];
+      var scatterArray = [];
+      for (var i = 0; i < 5; i++) {
+        scatterArray[i] = [];
+        var a = 0;
+        for (var j = 0; j < 5; j++) {
+          var b = this.randomNum(0, 20);
+          a += b;
+          if (j == 4) {
+            scatterArray[i].push(100 - a);
+            scatterArray[i].sort(function () {
+              return Math.random() - 0.5;
+            });
+          } else {
+            scatterArray[i].push(b);
+          }
+        }
+      }
+
+      var _arrayScatter = [];
+      for (var i = 0; i < 5; i++) {
+        for (var j = 1; j < 6; j++) {
+          var x = i;
+          var y = j;
+          // var z = this.randomNum(0, 100);
+          var z = scatterArray[i][j - 1];
+          _arrayScatter.push([x, y, z]);
+        }
+      }
+      this.scatterOption.series[0].data = _arrayScatter;
+      this.chartObj4.setOption(this.sunburstOption);
+      this.chartObj5.setOption(this.scatterOption);
+    },
+  },
+  watch: {
+    // 使用监听的方式，监听数据的变化
+    dataJson(val) {
+      this.Course = val;
+      this.courseId = val.courseId;
+      var _chapters = JSON.parse(val.chapters);
+      this.chapters = [];
+      this.tools = [];
+      _chapters.forEach((element) => {
+        this.chapters.push({
+          name: element.dyName,
+          id: element.chapterInfo[0].chapterid,
+        });
+        if (element.chapterInfo[0].toolChoose) {
+          this.tools.push(...element.chapterInfo[0].toolChoose);
+        }
+      });
+      this.tools.push(...[1, 1, 1, 1, 2, 2, 2, 2]);
+      this.tools = Array.from(new Set(this.tools)).sort();
+      this.getData();
+    },
+  },
+  mounted() {
+    this.courseId = this.dataJson.courseId;
+    var _chapters = JSON.parse(this.dataJson.chapters);
+    this.chapters = [];
+    this.tools = [];
+    _chapters.forEach((element) => {
+      this.chapters.push({
+        name: element.dyName,
+        id: element.chapterInfo[0].chapterid,
+      });
+      if (element.chapterInfo[0].toolChoose) {
+        this.tools.push(...element.chapterInfo[0].toolChoose);
+      }
+    });
+    this.tools = Array.from(new Set(this.tools)).sort();
+    this.getData();
+    this.setChart();
+  },
+};
+</script>
+
+<style scoped>
+.cp_title {
+  font-size: 24px;
+  margin: 0 auto;
+  width: 95%;
+}
+.data_body {
+  display: flex;
+  flex-wrap: wrap;
+}
+.data_body .data_c {
+  width: 50%;
+}
+.sd_class {
+  width: 95%;
+  margin: 0 auto;
+}
+.sd_tTitle {
+  width: 100%;
+  background: rgb(199, 217, 212);
+  padding: 10px 10px;
+  border-radius: 5px;
+  border: 1px solid rgb(165, 182, 177);
+  font-size: 18px;
+  font-weight: 500;
+  margin: 20px 0;
+  box-sizing: border-box;
+  font-weight: 600;
+}
+
+.sd_person_button {
+  font-size: 16px;
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.sd_person_button span {
+  margin-left: 20px;
+  padding: 0 0 6px;
+  cursor: pointer;
+}
+
+.sd_person_button .active {
+  border-bottom: 2px solid rgb(30, 146, 255);
+  color: rgb(30, 146, 255);
+}
+
+.sd_module_content {
+  width: calc(50% / 2);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.sd_module_content:nth-child(1) .sd_module_children:nth-child(1) {
+  background: rgb(68, 228, 116);
+}
+.sd_module_content:nth-child(1) .sd_module_children:nth-child(2) {
+  background: rgb(244, 132, 101);
+}
+.sd_module_content:nth-child(1) .sd_module_children:nth-child(3) {
+  background: rgb(99, 205, 156);
+}
+.sd_module_content:nth-child(3) .sd_module_children:nth-child(1) {
+  background: rgb(253, 183, 184);
+}
+.sd_module_content:nth-child(3) .sd_module_children:nth-child(2) {
+  background: rgb(60, 174, 254);
+}
+.sd_module_content:nth-child(3) .sd_module_children:nth-child(3) {
+  background: rgb(61, 223, 234);
+}
+.sd_module_children {
+  width: 100%;
+  height: 130px;
+  position: relative;
+  border-radius: 5px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.sd_module_children + .sd_module_children {
+  margin-top: 20px;
+}
+.sd_module_children .s {
+  position: absolute;
+  font-size: 16px;
+  top: 10px;
+  left: 10px;
+}
+.sd_module_children .s2 span {
+  font-size: 45px;
+  margin-right: 3px;
+}
+
+.wd_class_body {
+  background: rgb(242, 242, 242);
+  padding: 20px 0;
+  border-radius: 5px;
+}
+.wd_module {
+  display: flex;
+  justify-content: space-between;
+  width: 95%;
+  margin: 0 auto;
+}
+
+.wd_bottom {
+  display: flex;
+  justify-content: space-between;
+  height: 500px;
+  margin: 20px 0 0 0;
+  width: 95%;
+  margin: 20px auto 0;
+}
+
+.wd_bottom .bdiv {
+  width: 48%;
+}
+.el-table >>> .even_row {
+  background-color: #f1f1f1;
+}
+</style>

src/components/pages/components/worksDetail2GM.vue

@@ -0,0 +1,2780 @@
+<template>
+  <div class="pb_content" style="background: unset">
+    <div class="pb_content_body" style="
+        background: #fff;
+        padding: 25px 0 0;
+        box-sizing: border-box;
+        border-radius: 5px;
+      ">
+      <div class="student_head">
+        <!-- <div class="student_search">
+          <div>班级筛选</div>
+          <el-select v-model="sClass" placeholder="请选择班级" @change="searchWork">
+            <el-option label="所有班级" value></el-option>
+            <el-option
+              v-for="(item, index) in grade"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </div>-->
+        <!-- chooseDy
+        chooseTask-->
+        <div class="student_search">
+          <div>课程筛选</div>
+          <div style="display: flex; width: 90%">
+            <el-select class="r_select" v-model="uname" placeholder="请选择学生" @change="searchWork2">
+              <el-option label="所有学生" value></el-option>
+              <el-option v-for="item in userAarray" :key="item.userid" :label="item.username" :value="item.userid">
+              </el-option>
+            </el-select>
+            <el-select v-model="chooseDy" placeholder="请选择阶段" @change="searchWork1">
+              <el-option label="所有阶段" value></el-option>
+              <el-option v-for="(item, index) in dyList" :key="index" :label="item.name" :value="item.id"></el-option>
+            </el-select>
+            <el-select v-model="chooseTask" placeholder="请选择任务" @change="searchWork2">
+              <el-option label="所有任务" value></el-option>
+              <el-option v-for="(item, index) in dyList[chooseDy]
+              ? dyList[chooseDy].taskList
+              : []" :key="index" :label="item.name" :value="item.id"></el-option>
+            </el-select>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pb_content_body">
+      <div class="student_table">
+        <el-table ref="table" :data="tableData" border :height="tableHeight" :fit="true" v-loading="isLoading"
+          style="width: 100%" :header-cell-style="{ background: '#f1f1f1' }" :row-class-name="tableRowClassName" stripe>
+          <el-table-column prop="sName" label="姓名" min-width="15" align="center"></el-table-column>
+          <el-table-column prop="class" label="班级" min-width="20" align="center">
+            <template slot-scope="scope">
+              <div>{{ scope.row.class ? scope.row.class : "暂无班级" }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="course" label="项目" min-width="20" align="center" show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column prop="course" label="阶段" min-width="20" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <div>
+                {{ dyList.length > 0 ? dyList[scope.row.stage].name : "" }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="course" label="任务" min-width="20" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <div>
+                {{
+                dyList.length > 0
+                ? dyList[scope.row.stage].taskList[scope.row.task]
+                ? dyList[scope.row.stage].taskList[scope.row.task].name
+                : ""
+                : ""
+                }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="time" label="时间" width="100px" align="center"></el-table-column>
+          <el-table-column label="操作" width="200px">
+            <template slot-scope="scope">
+              <el-button type="primary" size="small" class="btnClassGM" @click="
+                lookWork(
+                  scope.row.id,
+                  scope.row.userid,
+                  scope.row.stage,
+                  scope.row.task
+                )
+              ">查看作业</el-button>
+              <!-- <el-button
+                type="primary"
+                size="small"
+                @click="lookData(scope.row.userid)"
+                >生成报告</el-button
+              >-->
+              <el-button  class="btnClassGM" type="primary" size="small" @click="
+                lookWork2(
+                  scope.row.id,
+                  scope.row.userid,
+                  scope.row.stage,
+                  scope.row.task
+                )
+              ">导出报告</el-button>
+              <!-- <el-button
+                class="de_button"
+                type="primary"
+                size="small"
+                @click="deleteWork(scope.row.id)"
+              >删除</el-button>-->
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-dialog title="查看作业" :visible.sync="dialogVisible3" :append-to-body="true" :before-close="handleClose"
+          width="100%" class="dialog_diy2 max_diy" :class="{ fullStyle: full }">
+          <div slot="title" class="header-title">
+            <div style="color: #fff">查看作业</div>
+            <div style="position: absolute; top: 14px; right: 50px">
+              <img src="../../../assets/full.png" style="height: 14px; cursor: pointer" alt="" @click="fullTools" />
+            </div>
+          </div>
+          <div class="zyBoxC">
+            <div class="courseTitle" v-if="allWorks.course">
+              <div class="txName">
+                <div class="tx"><img :src="tx" alt="" /></div>
+                <div>{{ allWorks.sName }}</div>
+              </div>
+              <div>{{ allWorks.course }}</div>
+            </div>
+            <div class="cBox">
+              <div class="pb_left">
+                <el-tooltip class="cTitle" effect="light" :content="allWorks.course" placement="top">
+                  <div>{{ allWorks.course }}</div>
+                </el-tooltip>
+                <div class="ml">目录</div>
+                <div class="cru_selectBox">
+                  <div v-for="(dy, dyIndex) in dyList2" :key="dyIndex">
+                    <div class="blue_box_one" @click="isOpen(dyIndex)">
+                      <div>第{{ dy.id + 1 }}阶段</div>
+                      <div>{{ dy.name }}</div>
+                    </div>
+                    <div class="twoChild" :class="{
+                      navActive: dy.isOpen,
+                    }">
+                      <div class="navChild" v-for="(nav, navIndex) in dy.taskList" :key="navIndex">
+                        <div class="navTask" @click="openTask(dy.id, nav.id)" :class="{
+                          openTaskActive:
+                            nav.id == taskCount &&
+                            dy.id + '-' + nav.id == navId &&
+                            dy.id == stageIndex,
+                        }">
+                          <div class="vedioNav" :class="{
+                            isClick:
+                              nav.id == taskCount &&
+                              dy.id + '-' + nav.id == navId &&
+                              dy.id == stageIndex,
+                          }" style="margin: 0">
+                            任务{{ navIndex + 1 }}
+                          </div>
+                          <el-tooltip class="navTaskname item" effect="light" :content="nav.name" placement="top">
+                            <div>{{ nav.name }}</div>
+                          </el-tooltip>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="shuBox" v-if="worksDetail.length" :class="{ fullBox: full }">
+                <div class="allBox" v-for="(sin, sIndex) in sInfo" :key="sIndex">
+                  <div class="zyBox" v-if="sin.course" :class="{ fullZyBox: full }">
+                    <div class="top">
+                      <div class="jdName">
+                        <div>
+                          {{
+                          "第" +
+                          (sin.stage + 1) +
+                          "阶段 " +
+                          dyList[sin.stage].name
+                          }}
+                        </div>
+                        <div class="taskName" style="width: 100%; justify-content: space-between">
+                          <div class="taskName" :id="sin.stage + '-' + sin.task" :scrollindex="sIndex">
+                            <div class="task">任务{{ sin.task + 1 }}</div>
+                            <div>
+                              {{ dyList[sin.stage].taskList[sin.task].name }}
+                            </div>
+                          </div>
+                          <div v-if="worksDetail[sIndex].wpptInfo.length > 0">
+                            <el-button class="btnClassGM" type="primary" size="small" @click="openFile(worksDetail[sIndex].wpptInfo[0])">
+                              查看文档</el-button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="contentBox">
+                      <div class="left_top" :style="{width:worksDetail[sIndex].eList.length?'45%':'95%'}"
+                        v-if="worksDetail[sIndex].img.length > 0">
+                        <div class="bigImg" v-if="
+                          worksDetail[sIndex].img &&
+                          worksDetail[sIndex].img.length
+                        ">
+                          <img @click="
+                            previewImg(
+                              worksDetail[sIndex].img[
+                                worksDetail[sIndex].imgIndex
+                              ].src
+                            )
+                          " :src="
+                            worksDetail[sIndex].img[
+                              worksDetail[sIndex].imgIndex
+                            ].src
+                          " alt />
+                        </div>
+                        <div class="thumbnail" v-if="
+                          worksDetail[sIndex].img &&
+                          worksDetail[sIndex].img.length
+                        ">
+                          <div v-for="(item, index) in worksDetail[sIndex].img" :key="index" :class="
+                            worksDetail[sIndex].imgIndex == index
+                              ? 'isClick2'
+                              : ''
+                          ">
+                            <img :src="item.src" alt @click="worksDetail[sIndex].imgIndex = index" />
+                          </div>
+                        </div>
+                        <div class="work_nopicture" v-else>暂无上传截图</div>
+                      </div>
+                      <div class="left_top" :style="{width:worksDetail[sIndex].eList.length?'45%':'95%'}"
+                        v-else-if="worksDetail[sIndex].answerInfo.length > 0">
+                        <div class="answerbox">
+                          <div style="min-width: 80px">问答标题</div>
+                          <div>
+                            {{ worksDetail[sIndex].answerInfo[0].answerTitle }}
+                          </div>
+                        </div>
+                        <div class="answerbox1">
+                          <div>学生回答</div>
+                          <div>
+                            {{ worksDetail[sIndex].answerInfo[0].answer }}
+                          </div>
+                        </div>
+                      </div>
+                      <div class="left_top" :style="{width:worksDetail[sIndex].eList.length?'45%':'95%'}"
+                        v-else-if="worksDetail[sIndex].askInfo.length > 0">
+                        <div>
+                          <div class="a_add_title" style="
+                              display: flex;
+                              flex-direction: row;
+                              align-items: center;
+                              justify-content: center;
+                              flex-wrap: wrap;
+                            ">
+                            <div style="margin-right: 20px; font-size: 20px">
+                              标题:
+                            </div>
+                            <div style="font-size: 20px">
+                              {{ worksDetail[sIndex].askInfo[0].askTitle }}
+                            </div>
+                          </div>
+                          <div class="a_addBox">
+                            <div style="font-size: 16px; color: #c7c7c7">
+                              内容
+                            </div>
+                            <div class="a_add_box" v-for="(item1, index1) in worksDetail[sIndex]
+                            .askInfo[0].askCount" :key="index1">
+                              <div class="a_add_head">
+                                <div style="display: flex">
+                                  {{ index1 + 1 + "、" }}
+                                  <div>
+                                    题目：{{
+                                    worksDetail[sIndex].askInfo[0].askJson[
+                                    index1
+                                    ].askstitle
+                                    }}
+                                  </div>
+                                </div>
+                              </div>
+                              <div class="a_add_body">
+                                <div class="a_add_input">
+                                  <el-radio-group v-model="
+                                    worksDetail[sIndex].askInfo[0].radio[
+                                      index1
+                                    ]
+                                  ">
+                                    <el-radio v-for="(item2, checkIndex) in worksDetail[
+                                      sIndex
+                                    ].askInfo[0].askJson[index1].checkList" :key="checkIndex" :label="checkIndex"
+                                      disabled class="redioStyle"><span v-html="item2"></span></el-radio>
+                                  </el-radio-group>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="left_top" :style="{width:worksDetail[sIndex].eList.length?'45%':'95%'}"
+                        v-else-if="worksDetail[sIndex].wpptInfo.length > 0">
+                        <div style="height: 238px" @click="openFile(worksDetail[sIndex].wpptInfo[0])">
+                          <div @click="openFile(worksDetail[sIndex].wpptInfo[0])" style="
+                              width: 300px;
+                              height: 300px;
+                              position: absolute;
+                              z-index: 999;
+                            "></div>
+                          <pdf v-if="showPDF" :pdfUrl="worksDetail[sIndex].wpptInfo[0]"
+                            style="width: 100%; height: 520px; overflow: auto"></pdf>
+                          <iframe v-else :src="worksDetail[sIndex].wpptInfo[0]" frameborder="0" width="100%"
+                            height="100%"></iframe>
+                        </div>
+                      </div>
+                      <div class="right_top" v-show="worksDetail[sIndex].eList.length">
+                        <div class="ech">
+                          <img src="../../../assets/icon/pj/ech.png" alt="" />
+                        </div>
+                        <div class="data_body">
+                          <div style="width: 100%">
+                            <div class="echart charts_canvas" style="
+                                width: 100%;
+                                height: 100%;
+                                margin: 0 0 0 1rem;
+                              "></div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="right_score" :class="{ rightScoreFullBox: full }">
+                    <div class="sd_score" style="
+                        box-sizing: border-box;
+                        width: 100%;
+                        box-shadow: none;
+                        position: relative;
+                      ">
+                      <div class="worksTime">
+                        作业提交时间：<span style="width: auto">{{ worksDetail[sIndex].time }}
+                        </span>
+                      </div>
+                      <div class="ech" style="margin-left: 23px">
+                        <img src="../../../assets/icon/pj/score.png" alt="" />
+                      </div>
+                      <div style="height: 80%;overflow: auto;">
+                        <div class="score_box" v-for="(item, index) in worksDetail[sIndex].eList" :key="index">
+                          <el-tooltip class="item" effect="dark" :content="item.value" placement="top-start">
+                            <span>{{ item.value }}</span>
+                          </el-tooltip>
+                          <el-rate class="rate_size" style="min-width: 120px"
+                            v-model="worksDetail[sIndex].rateList[item.value]" @change="getStar(sIndex)"></el-rate>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="buttonCss">
+              <el-button type="primary" size="small" @click="updatePj" class="btnClassGM">保存评分</el-button>
+            </div>
+          </div>
+        </el-dialog>
+      </div>
+      <div class="student_page">
+        <el-pagination background layout="prev, pager, next" :page-size="10" :total="total" v-if="page"
+          @current-change="handleCurrentChange"></el-pagination>
+      </div>
+    </div>
+    <el-dialog :visible.sync="pictureDialog" size="tiny">
+      <img width="100%" :src="dialogImageUrl" alt />
+    </el-dialog>
+    <el-dialog title="项目评分" :visible.sync="dataVisible" :append-to-body="true" width="1100px"
+      :before-close="handleClose" class="dialog_diy">
+      <div>
+        <div class="a_addBox2">
+          <StudentData :studentInfo="studentInfo"></StudentData>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dataVisible = false" class="cancel_button">关 闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="查看选择题" :visible.sync="dialogVisible4" :append-to-body="true" width="800px"
+      :before-close="handleClose" class="dialog_diy">
+      <div>
+        <div class="a_add_title" style="
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+          ">
+          <div style="font-size: 20px">{{ askJson.askTitle }}</div>
+        </div>
+        <div class="a_addBox">
+          <div style="font-size: 16px; color: #c7c7c7">内容</div>
+          <div class="a_add_box" v-for="(item, index) in askJson.askJson" :key="index">
+            <div class="a_add_head">
+              <div style="display: flex">
+                {{ index + 1 + "、" }}
+                <div>题目：{{ item.askstitle }}</div>
+              </div>
+            </div>
+            <div class="a_add_body">
+              <div class="a_add_input">
+                <el-radio-group v-model="askJson.radio[index]">
+                  <el-radio v-for="(item3, checkIndex1) in item.checkList" :key="checkIndex1" :label="checkIndex1"
+                    class="redioStyle" disabled>{{ item3 }}</el-radio>
+                </el-radio-group>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible4 = false" class="cancel_button">关 闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="文件预览" :visible.sync="dialogVisible6" width="100%" :before-close="handleClose" class="full_diy"
+      :append-to-body="true">
+      <div slot="title" class="header-title">
+        <div style="color: #fff">文件预览</div>
+      </div>
+      <pdf v-if="showPDF" :pdfUrl="pptImgUrl" style="width: 100%; height: 520px; overflow: auto"></pdf>
+      <iframe v-else :src="pptImgUrl" frameborder="0" width="100%" height="600"></iframe>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import StudentData from "./studentData";
+import htmlDocx from "html-docx-js/dist/html-docx";
+import saveAs from "file-saver";
+export default {
+  components: {
+    StudentData,
+  },
+  props: ["cid", "uid", "ooid"],
+  data() {
+    return {
+      tableHeight: "500px",
+      isLoading: false,
+      id: this.cid,
+      userid: this.uid,
+      oid: this.ooid,
+      formLabelWidth: "100px",
+      dialogImageUrl: "",
+      pictureDialog: false,
+      dialogVisible: false,
+      dialogVisible1: false,
+      dialogVisible2: false,
+      dialogVisible3: false,
+      dialogVisible4: false,
+      dataVisible: false,
+      full: true,
+      isStar: 0,
+      studentInfo: {},
+      courseByUser: "诗词中的植物",
+      userName: "林点",
+      answerName: "宿赞公房",
+      studentAnswer: "雨荒深院菊,霜倒半池莲.唐杜甫《宿赞公房》",
+      commentCount: 0,
+      publicIndex: 0,
+      allWorks: [],
+      playerOptions: {
+        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+        autoplay: false, //如果true,浏览器准备好时开始回放。
+        muted: false, // 默认情况下将会消除任何音频。
+        loop: false, // 导致视频一结束就重新开始。
+        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+        language: "zh-CN",
+        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+        sources: [
+          {
+            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
+            src: "", //url地址require("../../../assets/media/aaa.mp4")
+          },
+        ],
+        // poster: require("../../../assets/tu31.png"), //你的封面地址
+        // poster: dataRes.imgUrl, //你的封面地址
+        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        controlBar: {
+          timeDivider: true, //当前时间和持续时间的分隔符
+          durationDisplay: true, //显示持续时间
+          remainingTimeDisplay: false, //是否显示剩余时间功能
+          fullscreenToggle: true, //全屏按钮
+        },
+      },
+      playerO: {},
+      commentName: "谭子松",
+      commentTime: "2021/2/5",
+      commentAnswer:
+        "作为家长我很高兴看到孩子的进步，希望这个进步只是一个开始，在新学期能够继续延续，这样才能不负老师的期望",
+      tableData: [],
+      uploadBoolean: false,
+      studentMessage: [],
+      subject: "",
+      sClass: "",
+      stageIndex: "",
+      taskCount: "",
+      navId: "",
+      chooseDy: "",
+      uname: "",
+      chooseTask: "",
+      subjectJuri: [],
+      projectJuri: [],
+      pptImgUrl: "",
+      grade: [],
+      mr: require("../../../assets/icon/wheel.png"),
+      tx: require("../../../assets/avatar.png"),
+      projectchoose: "",
+      scopeId: "",
+      thumbnail: [],
+      rateList: {
+        ca: 0,
+        sia: 0,
+        eta: 0,
+        pia: 0,
+        lra: 0,
+        content: "",
+      },
+      rateParams: [],
+      page: 1,
+      total: 0,
+      worksDetail: [],
+      suserId: "",
+      sInfo: {},
+      chapInfo: [],
+      showPDF: false,
+      dialogVisible6: false,
+      vedio: [],
+      file: [],
+      tType: 0,
+      chartObj: [],
+      pptImgUrl: "",
+      ooption: [],
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        series: [
+          {
+            name: "量规评分",
+            type: "pie",
+            radius: "70%",
+            center: ["50%", "50%"],
+            data: [
+              { value: 0, name: "意识能力" },
+              { value: 0, name: "科学探究能力" },
+              { value: 0, name: "实践创新能力" },
+              { value: 0, name: "学习反思能力" },
+              { value: 0, name: "工程思维能力" },
+            ],
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+              normal: {
+                label: {
+                  show: true,
+                  formatter: "{d}%",
+                  inside: true,
+                  position: "inner",
+                },
+                labelLine: { show: false },
+              },
+            },
+          },
+        ],
+      },
+      // 雷达图的数据
+      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: "#5c549f",
+                    lineStyle: {
+                      color: "#5c549f",
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+      askJson: {},
+      dyList: [],
+      dyList2: [],
+      userAarray: [],
+    };
+  },
+  mounted() {
+    this.$nextTick(function () {
+      this.tableHeight =
+        window.innerHeight - this.$refs.table.$el.offsetTop - 200;
+      if (this.tableHeight <= 530) {
+        this.tableHeight = 530;
+      }
+      // 监听窗口大小变化
+      let self = this;
+      window.onresize = function () {
+        self.tableHeight =
+          window.innerHeight - self.$refs.table.$el.offsetTop - 200;
+        if (self.tableHeight <= 530) {
+          self.tableHeight = 530;
+        }
+      };
+    });
+  },
+  methods: {
+    previewImg(url) {
+      this.$hevueImgPreview(url);
+    },
+    lookData(uid) {
+      let params = {
+        uid: uid,
+        cid: this.id,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectWorksDetail", params)
+        .then((res) => {
+          this.studentInfo = res.data[0][0];
+          this.dataVisible = true;
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    handleClose(done) {
+      done();
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    handleCurrentChange(val) {
+      this.page = val;
+      this.getWorks();
+    },
+    lookWork(id, uid, stage, task) {
+      // this.scopeId = id;
+      let params = {
+        uid: uid,
+        cid: this.id,
+        stage: stage,
+        task: task,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectWorksDetail3", params)
+        .then((res) => {
+          this.sInfo = res.data[0];
+          var chapters = [],
+            eList = [],
+            _ooption = [],
+            _rate = [],
+            _rateList = [];
+          var worksDetail = res.data[1];
+          // this.scopeId = res.data[2][0].id;
+          // var scopeId = res.data[2][0].id;
+          var askInfo = res.data[3];
+          var answerInfo = res.data[4];
+          var pptInfo = res.data[5];
+          var workJson = [];
+          for (var k = 0; k < res.data[0].length; k++) {
+            this.allWorks = res.data[0][k];
+            this.chapInfo.push(JSON.parse(res.data[0][k].chapters));
+            chapters.push(JSON.parse(res.data[0][k].chapters));
+            if (!chapters[0][res.data[0][k].stage].chapterInfo[0].taskJson[
+              res.data[0][k].task
+            ]) {
+              continue
+            }
+
+            workJson.push({
+              img: [],
+              imgIndex: 0,
+              eList: [],
+              rateList: {},
+              askInfo: [],
+              answerInfo: [],
+              wpptInfo: [],
+              scopeId: res.data[0][k].id,
+              stagetask: "",
+              time: "",
+            });
+
+            eList =
+              chapters[0][res.data[0][k].stage].chapterInfo[0].taskJson[
+                res.data[0][k].task
+              ].eList;
+            workJson[k].time = res.data[0][k].time;
+            workJson[k].stagetask =
+              res.data[0][k].stage + "-" + res.data[0][k].task;
+            if (eList && eList.length) {
+              _ooption = [];
+              workJson[k].eList = eList;
+              for (var i = 0; i < eList.length; i++) {
+                _ooption.push({ value: 0, name: eList[i].value });
+                workJson[k].rateList[eList[i].value] = 0;
+              }
+              workJson[k].rateList.content = "";
+              this.ooption[k] = _ooption;
+            }
+            // else {
+            //   _ooption = [];
+            //   workJson[k].eList = [
+            //     { value: "意识能力", detail: "", score: 5 },
+            //     { value: "科学探究能力", detail: "", score: 5 },
+            //     { value: "实践创新能力", detail: "", score: 5 },
+            //     { value: "学习反思能力", detail: "", score: 5 },
+            //     { value: "工程思维能力", detail: "", score: 5 },
+            //   ];
+            //   for (var i = 0; i < workJson[k].eList.length; i++) {
+            //     _ooption.push({ value: 0, name: workJson[k].eList[i].value });
+            //     workJson[k].rateList[workJson[k].eList[i].value] = 0;
+            //   }
+            //   workJson[k].rateList.content = "";
+            //   this.ooption[k] = [
+            //     { value: 0, name: "意识能力" },
+            //     { value: 0, name: "科学探究能力" },
+            //     { value: 0, name: "实践创新能力" },
+            //     { value: 0, name: "学习反思能力" },
+            //     { value: 0, name: "工程思维能力" },
+            //   ];
+            // }
+            if (res.data[0][k].rate && eList && eList.length) {
+              _rate[k] = JSON.parse(res.data[0][k].rate);
+              _rateList[k] = Object.keys(JSON.parse(res.data[0][k].rate));
+              for (var i = 0; i < _rateList[k].length; i++) {
+                var _c = Object.keys(workJson[k].rateList);
+                if (_c.indexOf(_rateList[k][i]) != -1) {
+                  workJson[k].rateList[_rateList[k][i]] =
+                    _rate[k][_rateList[k][i]];
+                }
+              }
+              for (var i = 0; i < this.ooption[k].length; i++) {
+                if (_rateList[k].indexOf(this.ooption[k][i].name) != -1) {
+                  this.ooption[k][i].value = _rate[k][this.ooption[k][i].name];
+                }
+              }
+            } else {
+              _rate[k] = [];
+              _rateList[k] = [];
+            }
+
+            for (var i = 0; i < worksDetail.length; i++) {
+              if (
+                res.data[0][k].stage == worksDetail[i].stage &&
+                res.data[0][k].task == worksDetail[i].task
+              ) {
+                workJson[k].img.push({ src: worksDetail[i].content, id: i });
+              }
+            }
+            for (var i = 0; i < askInfo.length; i++) {
+              if (
+                res.data[0][k].stage == askInfo[i].stage &&
+                res.data[0][k].task == askInfo[i].task
+              ) {
+                const element = askInfo[i];
+                let a = JSON.parse(element.content)[0];
+                let b = a.anwer.split(",");
+                let c = [];
+                for (var j = 0; j < b.length; j++) {
+                  c.push(parseInt(b[j]));
+                }
+                a.askJson.radio = c;
+                a.askJson.time = element.time;
+                workJson[k].askInfo.push(a.askJson);
+              }
+            }
+
+            for (var i = 0; i < pptInfo.length; i++) {
+              if (
+                res.data[0][k].stage == pptInfo[i].stage &&
+                res.data[0][k].task == pptInfo[i].task
+              ) {
+                var a = ["PPT", "PPTX", "XLSX", "XLS", "DOC", "DOCX"];
+                if (
+                  a.indexOf(
+                    pptInfo[i].content
+                      .split(".")
+                    [
+                      pptInfo[i].content.split(".").length - 1
+                    ].toLocaleUpperCase()
+                  ) != -1
+                ) {
+                  var a =
+                    "https://view.officeapps.live.com/op/view.aspx?src=" +
+                    pptInfo[i].content;
+                  workJson[k].wpptInfo.push(a);
+                  this.showPDF = false;
+                } else if (
+                  pptInfo[i].content
+                    .split(".")
+                  [
+                    pptInfo[i].content.split(".").length - 1
+                  ].toLocaleUpperCase() == "PDF"
+                ) {
+                  workJson[k].wpptInfo.push(pptInfo[i].content);
+                  this.showPDF = true;
+                }
+              }
+            }
+
+            for (var i = 0; i < answerInfo.length; i++) {
+              if (
+                res.data[0][k].stage == answerInfo[i].stage &&
+                res.data[0][k].task == answerInfo[i].task
+              ) {
+                const element = answerInfo[i];
+                workJson[k].answerInfo.push(JSON.parse(element.content)[0]);
+              }
+            }
+          }
+
+          this.worksDetail = workJson;
+
+          this.courseDetail = res.data[0][0];
+
+          this.$forceUpdate;
+          this.dialogVisible3 = true;
+          setTimeout(() => {
+            for (var p = 0; p < res.data[0].length; p++) {
+              if (!this.ooption[p]) {
+                this.chartObj[p] = null;
+                continue
+              }
+              var _ooption = JSON.parse(JSON.stringify(this.ooption[p]));
+              var _option = JSON.parse(JSON.stringify(this.radarOption));
+              _option.radar.indicator = [];
+              _option.series[0].data[0].value = [];
+              for (var i = 0; i < _ooption.length; i++) {
+                _option.radar.indicator.push({
+                  name: _ooption[i].name,
+                  max: 5,
+                });
+                _option.series[0].data[0].value.push(_ooption[i].value);
+              }
+              console.log(_option);
+              this.setChart(_option, p);
+            }
+          }, 0);
+
+          let _dyList = JSON.parse(JSON.stringify(this.dyList));
+          let _dyList2 = [];
+          let _dyList3 = [];
+          for (var c = 0; c < _dyList.length; c++) {
+            _dyList[c].taskList = [];
+            _dyList2.push(_dyList[c]);
+          }
+          _dyList = JSON.parse(JSON.stringify(this.dyList));
+          for (var c = 0; c < workJson.length; c++) {
+            let _stage = workJson[c].stagetask.split("-")[0];
+            let _task = workJson[c].stagetask.split("-")[1];
+            _dyList2[_stage].taskList.push(_dyList[_stage].taskList[_task]);
+            _dyList2[_stage].taskList;
+          }
+          for (var c = 0; c < _dyList2.length; c++) {
+            if (_dyList2[c].taskList.length) {
+              _dyList2[c].isOpen = c === 0 ? true : false;
+              _dyList3.push(_dyList2[c]);
+            }
+          }
+          this.dyList2 = _dyList3;
+          this.stageIndex = this.dyList2[0].id;
+          this.taskCount = this.dyList2[0].taskList[0].id;
+          this.navId =
+            this.dyList2[0].id + "-" + this.dyList2[0].taskList[0].id;
+          // this.sInfo = res.data[0][0];
+          // this.chapInfo = JSON.parse(res.data[0][0].chapters);
+          // var chapters = JSON.parse(res.data[0][0].chapters);
+          // var worksDetail = res.data[1];
+          // // var askArray = res.data[2];
+          // this.scopeId = res.data[2].length ? res.data[2][0].id : this.sInfo.id;
+          // var askInfo = res.data[3];
+          // var answerInfo = res.data[4];
+          // var workJson = {
+          //   img: [],
+          //   imgIndex: 0,
+          //   eList: [],
+          //   rateList: {},
+          //   askInfo: [],
+          //   answerInfo: [],
+          // };
+          // var eList =
+          //   chapters[this.sInfo.stage].chapterInfo[0].taskJson[this.sInfo.task]
+          //     .eList;
+          // var _ooption = [];
+          // if (eList) {
+          //   workJson.eList = eList;
+          //   for (var i = 0; i < eList.length; i++) {
+          //     _ooption.push({ value: 0, name: eList[i].value });
+          //     workJson.rateList[eList[i].value] = 0;
+          //   }
+          //   workJson.rateList.content = "";
+          //   this.ooption = _ooption;
+          // } else {
+          //   workJson.eList = [
+          //     { value: "意识能力", detail: "", score: 5 },
+          //     { value: "科学探究能力", detail: "", score: 5 },
+          //     { value: "实践创新能力", detail: "", score: 5 },
+          //     { value: "学习反思能力", detail: "", score: 5 },
+          //     { value: "工程思维能力", detail: "", score: 5 },
+          //   ];
+          //   for (var i = 0; i < workJson.eList.length; i++) {
+          //     _ooption.push({ value: 0, name: workJson.eList[i].value });
+          //     workJson.rateList[workJson.eList[i].value] = 0;
+          //   }
+          //   workJson.rateList.content = "";
+          //   this.ooption = [
+          //     { value: 0, name: "意识能力" },
+          //     { value: 0, name: "科学探究能力" },
+          //     { value: 0, name: "实践创新能力" },
+          //     { value: 0, name: "学习反思能力" },
+          //     { value: 0, name: "工程思维能力" },
+          //   ];
+          // }
+          // if (this.sInfo.rate) {
+          //   var _rate = JSON.parse(this.sInfo.rate);
+          //   var _rateList = Object.keys(JSON.parse(this.sInfo.rate));
+          //   for (var i = 0; i < _rateList.length; i++) {
+          //     var _c = Object.keys(workJson.rateList);
+          //     if (_c.indexOf(_rateList[i]) != -1) {
+          //       workJson.rateList[_rateList[i]] = _rate[_rateList[i]];
+          //     }
+          //   }
+          //   for (var i = 0; i < this.ooption.length; i++) {
+          //     if (_rateList.indexOf(this.ooption[i].name) != -1) {
+          //       this.ooption[i].value = _rate[this.ooption[i].name];
+          //     }
+          //   }
+          // }
+
+          // for (var i = 0; i < worksDetail.length; i++) {
+          //   workJson.img.push({ src: worksDetail[i].content, id: i });
+          // }
+          // for (var i = 0; i < askInfo.length; i++) {
+          //   const element = askInfo[i];
+          //   let a = JSON.parse(element.content)[0];
+          //   let b = a.anwer.split(",");
+          //   let c = [];
+          //   for (var j = 0; j < b.length; j++) {
+          //     c.push(parseInt(b[j]));
+          //   }
+          //   a.askJson.radio = c;
+          //   a.askJson.time = element.time;
+          //   workJson.askInfo.push(a.askJson);
+          // }
+
+          // for (var i = 0; i < answerInfo.length; i++) {
+          //   const element = answerInfo[i];
+          //   workJson.answerInfo.push(JSON.parse(element.content)[0]);
+          // }
+
+          // this.worksDetail = workJson;
+
+          // this.courseDetail = res.data[0][0];
+
+          // this.$forceUpdate;
+          // this.dialogVisible3 = true;
+
+          // setTimeout(() => {
+          //   var _ooption = JSON.parse(JSON.stringify(this.ooption));
+          //   var _option = this.radarOption;
+          //   _option.radar.indicator = [];
+          //   _option.series[0].data[0].value = [];
+          //   for (var i = 0; i < _ooption.length; i++) {
+          //     _option.radar.indicator.push({ name: _ooption[i].name, max: 5 });
+          //     _option.series[0].data[0].value.push(_ooption[i].value);
+          //   }
+          //   console.log(_option);
+          //   this.setChart(_option);
+
+          // }, 0);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    checkAsk(askJson) {
+      this.askJson = askJson;
+      this.dialogVisible4 = true;
+    },
+    setChart(option, k) {
+      let _this = this;
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        console.log(_this.option);
+
+        const chartObj = _this.$echarts.init(
+          //劳动课程
+          // _this.$el.querySelector("#charts_canvas")
+          document.getElementsByClassName("charts_canvas")[k]
+        );
+        // 初始化雷达图
+        _this.chartObj[k] = chartObj;
+        _this.chartObj[k].setOption(option);
+      });
+    },
+    giveScore() {
+      this.rateList = this.chapInfo[this.publicIndex].rate;
+      this.dialogVisible2 = true;
+    },
+    openFile(f) {
+      this.pptImgUrl = f;
+      this.dialogVisible6 = true;
+    },
+    //获取班级列表
+    getClass() {
+      this.isLoading = true;
+      let params = {
+        oid: this.oid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectClassBySchool", params)
+        .then((res) => {
+          this.isLoading = false;
+          this.grade = res.data[0];
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    //获取分组分类
+    getGroup() {
+      let params = {};
+      this.ajax
+        .get(this.$store.state.api + "getGroup", params)
+        .then((res) => {
+          this.subjectJuri = res.data[0];
+          this.projectJuri = res.data[0];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    searchWork1() {
+      this.page = 1;
+      this.chooseTask = "";
+      this.getWorks();
+    },
+    searchWork2() {
+      this.page = 1;
+      this.getWorks();
+    },
+    fullTools() {
+      this.full = !this.full;
+    },
+    //获取作业
+    getWorks() {
+      this.isLoading = true;
+      var mr = this.mr;
+      let params = {
+        cid: this.id,
+        uname: this.uname,
+        stage: this.chooseDy,
+        task: this.chooseTask,
+        page: this.page,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getCourseWorks3", params)
+        .then((res) => {
+          this.isLoading = false;
+          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.tableData = res.data[0];
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    getCourseDetail() {
+      let params = {
+        cid: this.cid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getCourseWorksReport", params)
+        .then((res) => {
+          this.course = res.data[0][0];
+          var dyJSON = JSON.parse(res.data[0][0].chapters);
+          let dyList = [];
+          for (var i = 0; i < dyJSON.length; i++) {
+            dyList.push({ name: dyJSON[i].dyName, id: i, taskList: [] });
+            var a = dyJSON[i].chapterInfo[0].taskJson;
+            for (var j = 0; j < a.length; j++) {
+              dyList[i].taskList.push({ name: a[j].task, id: j });
+            }
+          }
+          this.dyList = dyList;
+          this.userAarray = res.data[1];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    // getCourseDetail() {
+    //   const loading = this.$loading.service({
+    //     background: "rgba(255, 255, 255, 0.7)",
+    //     target: document.querySelector(".student_table"),
+    //   });
+    //   console.log(this.id);
+    //   let params = {
+    //     courseId: this.id,
+    //   };
+    //   this.ajax
+    //     .get(this.$store.state.api + "selectCourseDetail", params)
+    //     .then((res) => {
+    //       loading.close();
+    //       // this.chapInfo = JSON.parse(res.data[0][0].chapters);
+    //       var dyJSON = JSON.parse(res.data[0][0].chapters);
+    //       let dyList = [];
+    //       for (var i = 0; i < dyJSON.length; i++) {
+    //         dyList.push({ name: dyJSON[i].dyName, id: i, taskList: [] });
+    //         var a = dyJSON[i].chapterInfo[0].taskJson;
+    //         for (var j = 0; j < a.length; j++) {
+    //           dyList[i].taskList.push({ name: a[j].task, id: j });
+    //         }
+    //       }
+    //       console.log(dyList);
+    //       this.dyList = dyList;
+    //       // var dyJSON = JSON.parse()
+    //     })
+    //     .catch((err) => {
+    //       loading.close();
+    //       console.error(err);
+    //     });
+    // },
+    handlePictureCardPreview(url) {
+      this.dialogImageUrl = url;
+      this.pictureDialog = true;
+    },
+    updatePj() {
+      for (var i = 0; i < this.worksDetail.length; i++) {
+        if (!this.worksDetail[i].eList.length) {
+          continue
+        }
+        this.updateWorks(
+          this.worksDetail[i].scopeId,
+          this.worksDetail[i].rateList,
+          i
+        );
+      }
+    },
+    getStar(i) {
+      const k = i;
+      var _ooption = JSON.parse(JSON.stringify(this.ooption[k]));
+      var _rate = this.worksDetail[i].rateList;
+      var _rateList = Object.keys(this.worksDetail[i].rateList);
+      for (var i = 0; i < _ooption.length; i++) {
+        if (_rateList.indexOf(_ooption[i].name) != -1) {
+          _ooption[i].value = _rate[_ooption[i].name];
+        }
+      }
+      // var _option = JSON.parse(JSON.stringify(this.radarOption));
+      var _option = this.radarOption;
+      _option.radar.indicator = [];
+      _option.series[0].data[0].value = [];
+      for (var i = 0; i < _ooption.length; i++) {
+        _option.radar.indicator.push({ name: _ooption[i].name, max: 5 });
+        _option.series[0].data[0].value.push(_ooption[i].value);
+      }
+      if (this.chartObj && this.chartObj[k]) {
+        // _option.series[0].data = _ooption;
+        this.chartObj[k].setOption(_option);
+      } else {
+        this.setChart(_ooption);
+      }
+    },
+    updateWorks(scopeId, rateList, i) {
+      let params = {
+        rate: rateList,
+        tuid: this.userid,
+        id: scopeId,
+      };
+      const k = i;
+      this.ajax
+        .get(this.$store.state.api + "updateWorks", params)
+        .then((res) => {
+          var _ooption = JSON.parse(JSON.stringify(this.ooption[k]));
+          // var _option = JSON.parse(JSON.stringify(this.option));
+
+          var _rate = rateList;
+          var _rateList = Object.keys(rateList);
+          for (var i = 0; i < _ooption.length; i++) {
+            if (_rateList.indexOf(_ooption[i].name) != -1) {
+              _ooption[i].value = _rate[_ooption[i].name];
+            }
+          }
+
+          // var _option = JSON.parse(JSON.stringify(this.radarOption));
+          var _option = this.radarOption;
+          _option.radar.indicator = [];
+          _option.series[0].data[0].value = [];
+          for (var i = 0; i < _ooption.length; i++) {
+            _option.radar.indicator.push({ name: _ooption[i].name, max: 5 });
+            _option.series[0].data[0].value.push(_ooption[i].value);
+          }
+          console.log(_option);
+          if (this.chartObj) {
+            // _option.series[0].data = _ooption;
+            this.chartObj[k].setOption(_option);
+          } else {
+            this.setChart(_ooption);
+          }
+          // this.uploadBoolean = false;
+          // this.dialogVisible2 = false;
+          let _k = 0
+          for (var i = 0; i < this.worksDetail.length; i++) {
+            if (this.worksDetail[i].eList.length) {
+              _k = i
+            }
+          }
+          if (k == _k) {
+            this.$message({
+              message: "评价成功",
+              type: "success",
+            });
+          }
+        })
+        .catch((err) => {
+          this.$message.error("评价失败");
+          console.error(err);
+        });
+    },
+    switchVideo(media, index) {
+      this.playerO = {};
+      this.playerOptions.poster = "";
+      this.playerOptions.sources[0].src = media;
+      this.playerO = this.playerOptions;
+    },
+    onPlayerPlay() { },
+    // this.$store.commit("update", ["userInfo", userInfo]);
+    lookWork2(id, uid, stage, task) {
+      // this.scopeId = id;
+      let params = {
+        uid: uid,
+        cid: this.id,
+        stage: stage,
+        task: task,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectWorksDetail2", params)
+        .then((res) => {
+          this.sInfo = res.data[0][0];
+          this.chapInfo = JSON.parse(res.data[0][0].chapters);
+          var chapters = JSON.parse(res.data[0][0].chapters);
+          var worksDetail = res.data[1];
+          // var askArray = res.data[2];
+          this.scopeId = res.data[2].length ? res.data[2][0].id : this.sInfo.id;
+          var askInfo = res.data[3];
+          var answerInfo = res.data[4];
+          var linkInfo = res.data[5];
+          var workJson = {
+            img: [],
+            imgIndex: 0,
+            eList: [],
+            rateList: {},
+            wpptInfo: [],
+            askInfo: [],
+            answerInfo: [],
+          };
+          var eList =
+            chapters[this.sInfo.stage].chapterInfo[0].taskJson[this.sInfo.task]
+              .eList;
+          //           ooption: [
+          //   { value: 0, name: "意识能力" },
+          //   { value: 0, name: "科学探究能力" },
+          //   { value: 0, name: "实践创新能力" },
+          //   { value: 0, name: "学习反思能力" },
+          //   { value: 0, name: "工程思维能力" },
+          // ],
+          var _ooption = [];
+          if (eList) {
+            workJson.eList = eList;
+            for (var i = 0; i < eList.length; i++) {
+              _ooption.push({ value: 0, name: eList[i].value });
+              workJson.rateList[eList[i].value] = 0;
+            }
+            workJson.rateList.content = "";
+            this.ooption = _ooption;
+          } else {
+            workJson.eList = [
+              { value: "意识能力", detail: "", score: 5 },
+              { value: "科学探究能力", detail: "", score: 5 },
+              { value: "实践创新能力", detail: "", score: 5 },
+              { value: "学习反思能力", detail: "", score: 5 },
+              { value: "工程思维能力", detail: "", score: 5 },
+            ];
+            for (var i = 0; i < workJson.eList.length; i++) {
+              _ooption.push({ value: 0, name: workJson.eList[i].value });
+              workJson.rateList[workJson.eList[i].value] = 0;
+            }
+            workJson.rateList.content = "";
+            this.ooption = [
+              { value: 0, name: "意识能力" },
+              { value: 0, name: "科学探究能力" },
+              { value: 0, name: "实践创新能力" },
+              { value: 0, name: "学习反思能力" },
+              { value: 0, name: "工程思维能力" },
+            ];
+          }
+          if (this.sInfo.rate) {
+            var _rate = JSON.parse(this.sInfo.rate);
+            var _rateList = Object.keys(JSON.parse(this.sInfo.rate));
+            for (var i = 0; i < _rateList.length; i++) {
+              var _c = Object.keys(workJson.rateList);
+              if (_c.indexOf(_rateList[i]) != -1) {
+                workJson.rateList[_rateList[i]] = _rate[_rateList[i]];
+              }
+            }
+            for (var i = 0; i < this.ooption.length; i++) {
+              if (_rateList.indexOf(this.ooption[i].name) != -1) {
+                this.ooption[i].value = _rate[this.ooption[i].name];
+              }
+            }
+          }
+
+          for (var i = 0; i < worksDetail.length; i++) {
+            workJson.img.push({ src: worksDetail[i].content, id: i });
+          }
+          for (var i = 0; i < askInfo.length; i++) {
+            const element = askInfo[i];
+            let a = JSON.parse(element.content)[0];
+            let b = a.anwer.split(",");
+            let c = [];
+            for (var j = 0; j < b.length; j++) {
+              c.push(parseInt(b[j]));
+            }
+            a.askJson.radio = c;
+            a.askJson.time = element.time;
+            workJson.askInfo.push(a.askJson);
+          }
+
+          for (var i = 0; i < answerInfo.length; i++) {
+            const element = answerInfo[i];
+            workJson.answerInfo.push(JSON.parse(element.content)[0]);
+          }
+
+          this.worksDetail = workJson;
+
+          this.courseDetail = res.data[0][0];
+
+          this.$forceUpdate;
+
+          var _course = `<h1>${this.sInfo.course}</h1>`;
+          var _title =
+            "<h2>" +
+            "第" +
+            (this.sInfo.stage + 1) +
+            "阶段 " +
+            this.dyList[this.sInfo.stage].name +
+            "</h2>";
+          var _subtitle =
+            "<h3>" +
+            "任务" +
+            (this.sInfo.task + 1) +
+            " " +
+            this.dyList[this.sInfo.stage].taskList[this.sInfo.task].name +
+            "-" +
+            this.sInfo.sName +
+            "</h3>";
+          var _img = "";
+          if (workJson.img.length > 0) {
+            for (var i = 0; i < workJson.img.length; i++) {
+              // _img += `<div style="margin-top:10px"><div>图片${
+              //   i + 1
+              // }:<a href='${workJson.img[i].src}'>${
+              //   workJson.img[i].src
+              // }</a></div>`;
+              _img += `<div style="margin-top:10px"><div>图片${i + 1
+                }</div><img style="max-width:500px" src="${workJson.img[i].src
+                }"/></div>`;
+            }
+          }
+
+          var _ask = "";
+          if (workJson.askInfo.length > 0) {
+            var _ask = "<h3>选择题</h3>";
+            for (var i = 0; i < workJson.askInfo.length; i++) {
+              var _div = document.createElement("div");
+              _div.innerHTML = `<h4>标题:${workJson.askInfo[i].askTitle}</h4>`;
+              for (var j = 0; j < workJson.askInfo[i].askJson.length; j++) {
+                var _div2 = document.createElement("div");
+                _div2.innerHTML = `<h5>第${j + 1}题:${workJson.askInfo[i].askJson[j].askstitle
+                  }  选择:${workJson.askInfo[i].radio[j] + 1}</h5> `;
+                var _div3 = document.createElement("div");
+                for (
+                  var z = 0;
+                  z < workJson.askInfo[i].askJson[j].checkList.length;
+                  z++
+                ) {
+                  _div3.innerHTML += `<span style="margin-right:5px">${z + 1}.${workJson.askInfo[i].askJson[j].checkList[z]
+                    }</span>`;
+                }
+                _div2.innerHTML += `<div>${_div3.innerHTML}</div>`;
+                _div.innerHTML += `<div>${_div2.innerHTML}</div>`;
+              }
+              _ask += `<div>${_div.innerHTML}</div>`;
+            }
+          }
+
+          var _answer = "";
+          if (workJson.answerInfo.length > 0) {
+            var _answer = "<h3>问答</h3>";
+            for (var i = 0; i < workJson.answerInfo.length; i++) {
+              var _div = document.createElement("div");
+              _div.innerHTML = `<h4>问答：${workJson.answerInfo[i].answerTitle}</h4>`;
+              _div.innerHTML += `<div>${workJson.answerInfo[i].answer}</div>`;
+              _answer += `<div>${_div.innerHTML}</div>`;
+            }
+          }
+
+          var _link = "";
+          if (linkInfo.length > 0) {
+            for (var i = 0; i < linkInfo.length; i++) {
+              _link += `<div style="margin-top:10px"><a href='${linkInfo[i].content}'>${linkInfo[i].content}</a></div>`;
+            }
+          }
+
+          var _html =
+            _course + _title + _subtitle + _img + _ask + _answer + _link;
+          this.generate(_html);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    isOpen(s) {
+      // this.stageIndex = s;
+      this.dyList2[s].isOpen = !this.dyList2[s].isOpen;
+    },
+    openTask(s, i) {
+      var a = s + "-" + i;
+      var b = document.getElementById(a);
+      var d = b.getAttribute("scrollindex");
+      var c = document.getElementsByClassName("shuBox")[0];
+      c.scrollTop = parseInt(d) * 375;
+      this.stageIndex = s;
+      this.taskCount = i;
+      this.navId = a;
+    },
+    async generate(a) {
+      // 将html文件中需要用到的数据挂载到store上
+      this.$store.commit("update", ["report", a]);
+      console.log(this.$store.state.report);
+      const content = `<!DOCTYPE html>
+      <html lang="en">
+      <head>
+          <meta charset="UTF-8">
+          <meta http-equiv="X-UA-Compatible" content="IE=edge">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>报告</title>
+      </head>
+      <body>
+      ${this.$store.state.report}
+      </body>
+      </html>`;
+      // debugger
+      // 生成报告
+      const link = document.createElement("a");
+      let dname = this.sInfo.course + "-" + this.sInfo.sName + ".html";
+      // link.download = "报告.html"; // 文件名
+      link.download = dname; // 文件名
+      link.style.display = "none";
+      // 创建文件流
+      // 创建bolb实例时，内容一定要放在[]中
+      const blob = new Blob([content], {
+        type: "text/plain;charset='utf-8'",
+      });
+      link.href = window.URL.createObjectURL(blob);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      // saveAs(
+      //   htmlDocx.asBlob(content, {
+      //     orientation: "landscape", //跨域设置
+      //   }),
+      //   //文件名
+      //   "报告.doc"
+      // );
+    },
+  },
+  created() {
+    this.page = 1;
+    this.getCourseDetail();
+    this.getClass();
+    this.getGroup();
+    this.getWorks();
+  },
+};
+</script>
+
+<style scoped>
+.pb_head>span:nth-child(2) {
+  font-size: 16px;
+  margin-left: 80px;
+  color: #ab582f;
+}
+
+.pb_head {
+  margin: 0 !important;
+  width: 100% !important;
+}
+
+.student_page {
+  margin-top: 10px;
+}
+
+.student_head {
+  margin-top: 10px;
+  padding-bottom: 15px;
+}
+
+.student_search {
+  display: flex;
+}
+
+.student_search>div:nth-child(1) {
+  line-height: 35px;
+  font-size: 14px;
+}
+
+.student_search>>>.el-input__inner {
+  width: 190px;
+  height: 35px;
+  margin-left: 10px;
+}
+
+.student_table>>>.el-table--border td {
+  border-right: 0px !important;
+}
+
+.add_work>>>.el-dialog__header {
+  padding: 20px 20px 10px;
+  text-align: center;
+  background: #32455b;
+}
+
+.add_work>>>.el-dialog__title {
+  font-size: 14px !important;
+  color: #fff !important;
+}
+
+.add_work>>>.el-dialog__headerbtn {
+  font-size: 20px !important;
+  top: 5px !important;
+  right: 8px !important;
+}
+
+.add_work>>>.el-form-item__label {
+  margin-left: 65px;
+}
+
+.add_work>>>.el-form-item {
+  display: flex;
+}
+
+.add_work>>>.el-form-item__content {
+  margin: 0 !important;
+}
+
+.add_work>>>.el-dialog__footer {
+  text-align: center !important;
+}
+
+.add_work>>>.el-dialog {
+  min-width: 650px !important;
+  width: 1080px;
+}
+
+.add_work>>>.el-dialog__body {
+  background: #fff;
+  height: 660px;
+  overflow: auto;
+}
+
+.header-title {
+  display: flex;
+}
+
+.logoImg {
+  width: 30px;
+}
+
+.logoImg>img {
+  width: 100%;
+  height: 100%;
+}
+
+.title_add_student {
+  margin: 0 auto;
+  color: #fff;
+}
+
+.first {
+  margin-top: 25px;
+  border-bottom: 1px solid #c5c5c5;
+}
+
+.one_top {
+  display: flex;
+  justify-content: space-between;
+}
+
+.one_top>div:nth-child(1) {
+  color: #2490bf;
+  font-size: 16px;
+}
+
+.one_top>button {
+  width: 100px;
+  background: #24a0a4;
+  height: 30px;
+  color: #e0e0e0;
+  font-size: 13px;
+  padding: 0 !important;
+}
+
+.work_Img {
+  width: 150px;
+  margin: 10px 0;
+}
+
+.assess_Img {
+  width: 400px;
+  margin: 0 auto;
+  padding: 15px 0;
+}
+
+.work_Img>img,
+.assess_Img>img {
+  width: 100%;
+  height: 100%;
+}
+
+.work_input {
+  border: 1px solid;
+  width: 135px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 13px;
+  padding: 5px;
+}
+
+.poetry {
+  margin: 10px 0 15px 0;
+}
+
+.assess {
+  background: #169bd5 !important;
+}
+
+.assess_top {
+  border-bottom: 2px solid #eee;
+  padding-bottom: 10px;
+}
+
+.assess_top>div:nth-child(1) {
+  color: #2490bf;
+  font-size: 16px;
+}
+
+.student_Answer {
+  display: flex;
+  margin: 5px 10px;
+  /* padding-bottom: 25px; */
+}
+
+.workName {
+  font-size: 18px;
+  font-weight: bold;
+  margin: 5px 10px;
+}
+
+.toux {
+  width: 35px;
+  /* margin: auto 0; */
+  height: 35px;
+}
+
+.toux>img {
+  width: 100%;
+  height: 100%;
+}
+
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 10px;
+  flex-direction: column;
+}
+
+.studentName {
+  margin-left: 10px;
+  font-size: 13px;
+}
+
+.studentAnswer {
+  font-size: 12px;
+  margin: 5px 0 0 10px;
+  height: 42px;
+  overflow: auto;
+}
+
+.comment {
+  /* margin: 20px 0 0 10px;
+  overflow: auto;
+  height: 75%;
+  max-height: 330px; */
+  overflow: auto;
+  /* height: 290px; */
+  height: 525px;
+  background: #fff;
+  border-radius: 5px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.comment_body {
+  height: calc(100% - 25px);
+  overflow: auto;
+}
+
+.comment>.comment_title {
+  font-size: 18px;
+}
+
+.comment>.comment_title>span {
+  font-size: 14px;
+}
+
+.other_Answer {
+  display: flex;
+  margin: 5px 10px;
+  padding: 15px 0;
+  justify-content: center;
+}
+
+.nav {
+  margin-left: 5px;
+  width: 80%;
+}
+
+.nameAndTime {
+  display: flex;
+}
+
+.otherName {
+  font-weight: bold;
+  margin-left: 10px;
+  font-size: 13px;
+}
+
+.time {
+  margin-left: 25px;
+  font-size: 12px;
+  margin-top: 3px;
+}
+
+.otherAnswer {
+  width: 80%;
+  word-wrap: break-word;
+  word-break: break-all;
+  overflow: hidden;
+  font-size: 12px;
+  margin: 5px 0 0 10px;
+}
+
+.doingAssess {
+  margin: 0 auto;
+  width: 300px;
+  background: #169bd5;
+  height: 35px;
+  line-height: 35px;
+  border-radius: 3px;
+  font-size: 13px;
+  text-align: center;
+  color: #fff;
+  margin-top: 30px;
+  cursor: pointer;
+}
+
+.score_top {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.userTou {
+  width: 50px;
+}
+
+.userTou>img {
+  width: 100%;
+  height: 100%;
+}
+
+.score_user_name {
+  line-height: 53px;
+  margin-left: 15px;
+}
+
+.course_top {
+  display: flex;
+  align-items: center;
+}
+
+.course_top>div:nth-child(1) {
+  line-height: 25px;
+}
+
+.course_top>div:nth-child(2) {
+  border: 1px solid #ccc;
+  width: 250px;
+  text-align: center;
+  height: 25px;
+  line-height: 25px;
+  margin-left: 30px;
+}
+
+.sd_score {
+  font-size: 15px;
+  background: #fff;
+  height: 100%;
+  padding-top: 40px;
+  border-radius: 5px;
+  width: 90%;
+  box-shadow: 2px 2px 5px #909090;
+  overflow: auto;
+}
+
+.sd_score .score_box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 15px;
+  /* margin-left: 30px; */
+}
+
+.sd_score .score_box:last-child {
+  margin-bottom: 0;
+}
+
+.rate_size>>>.el-rate__icon {
+  font-size: 25px;
+}
+
+.rate_size>>>.el-icon-star-off {
+  font-size: 22px;
+}
+
+.sd_score span {
+  width: 130px;
+  text-align: justify;
+  text-align-last: justify;
+  display: block;
+  margin-right: 20px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 16px;
+}
+
+.moreSay {
+  margin: 0px 0 5px 20px;
+}
+
+.more_say_input {
+  margin-left: 20px;
+  width: 80%;
+}
+
+.more_say_input>>>.el-input__inner {
+  height: 75px;
+  font-size: 13px;
+  padding: 0 0 0 10px;
+}
+
+.assess_right {
+  width: 200px;
+  background: #82b0ee;
+  color: #fff;
+  text-align: center;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 5px;
+  margin: 0 auto;
+  margin-top: 20px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.student_page {
+  margin-top: 10px;
+}
+
+.display {
+  display: none;
+}
+
+.firstTop {
+  background: #fff;
+  display: flex;
+  margin-bottom: 15px;
+  flex-direction: column;
+  align-items: flex-start;
+  height: 90px;
+  padding: 10px 25px;
+  border-radius: 5px;
+  width: 90%;
+  box-shadow: 2px 2px 5px #909090;
+}
+
+.talkScore>>>.el-dialog__body {
+  background: #efefef;
+  margin: 0 !important;
+}
+
+.lastTop {
+  background: #fff;
+  border-radius: 5px;
+  width: 98%;
+  height: 120px;
+  box-shadow: 2px 2px 5px #909090;
+}
+
+.left,
+.right {
+  /* background: #fff; */
+  border-radius: 5px;
+  /* padding: 10px; */
+  box-sizing: border-box;
+}
+
+.left {
+  margin-right: 10px;
+  width: 30%;
+  min-height: 425px;
+}
+
+/* .left .left_top {
+  background: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  margin-bottom: 15px;
+} */
+.left .left_bottom {
+  background: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  height: 160px;
+}
+
+.right {
+  width: 20%;
+  background: none;
+  padding: 0;
+}
+
+.courseTitle {
+  font-size: 16px;
+  color: #7c7c7c;
+  width: 100%;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.course_t {
+  font-size: 19px;
+  display: flex;
+  align-items: flex-end;
+}
+
+.course_t span:nth-child(2) {
+  font-size: 16px;
+  margin-left: 10px;
+}
+
+.courseTitle span:nth-child(2) {
+  /* font-size: 14px;
+  cursor: pointer; */
+}
+
+.bigImg {
+  margin-top: 10px;
+  /* height: 300px; */
+  height: 150px;
+}
+
+.bigImg>img,
+.thumbnail>div>img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.thumbnail {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  margin: 5px 0 8px;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.isClick2 {
+  border: 3px solid #8f7fe2;
+  border-radius: 5px;
+}
+
+.thumbnail>div {
+  width: 80px;
+  height: 80px;
+  margin-right: 5px;
+  cursor: pointer;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.zyBoxC {
+  background: #ededed;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 20px 0px;
+  flex-direction: column;
+  height: calc(100% - 50px);
+}
+
+.zyBox {
+  display: flex;
+  min-width: 600px;
+  width: 600px;
+  position: relative;
+  background: #fff;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  overflow: hidden;
+}
+
+.zyBoxC+.zyBoxC {
+  margin-top: 10px;
+}
+
+.rbButtom {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background: #06a7ff;
+  width: 100px;
+  height: 30px;
+  border-radius: 5px;
+  text-align: center;
+  color: #fff;
+  line-height: 30px;
+  font-size: 14px;
+  cursor: pointer;
+  right: 10px;
+}
+
+.bigImg>>>.vjs-tech,
+.bigImg>>>.video-js {
+  height: 300px !important;
+}
+
+.el-table>>>.even_row {
+  background-color: #f1f1f1;
+}
+
+.data_body {
+  height: 200px;
+  display: flex;
+  position: relative;
+  border-radius: 5px;
+  box-sizing: border-box;
+  width: 100%;
+  background: #fff;
+}
+
+.data_body .title {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+
+.dialog_diy>>>.el-dialog__header {
+  padding: 9px 20px 10px;
+  background: #32455b !important;
+}
+
+.dialog_diy>>>.el-dialog__title {
+  color: #fff;
+  font-size: 15px;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn {
+  top: 14px;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+
+.dialog_diy>>>.el-dialog__body,
+.dialog_diy>>>.el-dialog__footer {
+  background: #fafafa;
+}
+
+.max_diy>>>.el-dialog {
+  /* max-width: 1200px; */
+  max-width: 1300px;
+  /* height:800px */
+}
+
+.max_diy>>>.el-dialog__body {
+  height: 800px;
+}
+
+.dialog_diy2>>>.el-dialog__header {
+  padding: 9px 20px 10px;
+  background: #32455b !important;
+}
+
+.dialog_diy2>>>.el-dialog__title {
+  color: #fff;
+  font-size: 15px;
+}
+
+.dialog_diy2>>>.el-dialog__headerbtn {
+  top: 12px;
+}
+
+.dialog_diy2>>>.el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+
+.dialog_diy2>>>.el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+
+.dialog_diy2>>>.el-dialog__body,
+.dialog_diy2>>>.el-dialog__footer {
+  background: #ededed;
+  padding: 15px 20px;
+}
+
+.a_addBox2 {
+  margin: 10px 0;
+  background: #fff;
+  padding: 15px;
+}
+
+.a_addBox {
+  margin: 10px 0;
+  background: #fff;
+  padding: 15px;
+  /* max-height: 400px; */
+  max-height: 160px;
+  overflow: auto;
+}
+
+.a_add_box {
+  border-bottom: 2px solid #eee;
+  padding-bottom: 10px;
+}
+
+.a_add_head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px 0;
+  font-size: 18px;
+}
+
+.a_add_head .a_add_head_input {
+  width: 300px;
+}
+
+.a_add_head .a_add_head_div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.a_add_body {
+  display: flex;
+  align-items: center;
+}
+
+.a_add_input {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  /* flex-direction: column; */
+  /* width: 100%; */
+}
+
+.a_add_input>>>el-radio-group {
+  margin: 10px 0;
+}
+
+.a_add_input>>>.el-radio-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.redioStyle>>>.el-radio__label {
+  font-size: 18px;
+}
+
+.task_title {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.ask_Answer {
+  /* margin-top: 10px; */
+}
+
+.ask_Answer_title {
+  font-size: 18px;
+}
+
+.ask_Answer_content {
+  display: flex;
+  justify-content: center;
+  margin: 10px 0;
+}
+
+.answer_body {
+  padding: 10px 0;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.answer_title {
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.answer_content {
+  margin-top: 5px;
+}
+
+.ask_body {
+  display: flex;
+  font-size: 16px;
+  margin-top: 10px;
+  flex-direction: column;
+  height: 130px;
+  overflow: auto;
+  /* padding: 0 10px; */
+  box-sizing: border-box;
+}
+
+.ask_body div {
+  /* cursor: pointer; */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ask_body div .btn {
+  cursor: pointer;
+  color: #fff;
+  background-color: #409eff;
+  text-align: center;
+  font-size: 12px;
+  padding: 6px 12px;
+  box-sizing: border-box;
+  border-radius: 5px;
+  width: 60px;
+}
+
+.ask_body div span:nth-child(1) {
+  max-width: 250px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ask_body div+div {
+  margin-top: 10px;
+}
+
+.work_nopicture {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* height: 350px; */
+  height: 352px;
+}
+
+.student_table>>>.el-table,
+.student_table>>>.el-table__body-wrapper {
+  height: auto !important;
+}
+
+.tx {
+  width: 35px;
+}
+
+.ech {
+  width: 100px;
+}
+
+.tx>img,
+.ech>img {
+  width: 100%;
+  height: 100%;
+}
+
+.txName {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 10px;
+}
+
+.txName>div:nth-child(2) {
+  margin-left: 10px;
+}
+
+.top {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px 0 15px 20px;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  width: 95%;
+}
+
+.jdName>div:nth-child(1) {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.taskName {
+  font-size: 14px;
+  margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.task {
+  background: #8f7fe2;
+  color: #fff;
+  width: 50px;
+  height: 22px;
+  border-radius: 5px;
+  text-align: center;
+  line-height: 22px;
+  margin-right: 10px;
+}
+
+.contentBox {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  height: 253px;
+}
+
+.left_top {
+  width: 45%;
+  padding-left: 20px;
+}
+
+.right_top {
+  width: 53%;
+}
+
+.cBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  width: 100%;
+  height: calc(100% - 60px);
+  overflow: auto;
+}
+
+.right_score {
+  min-width: 370px;
+  height: 351px;
+  margin-left: 10px;
+}
+
+.pb_left {
+  width: 20%;
+  margin-right: 10px;
+  background: rgb(255, 255, 255);
+  /* padding-right: 10px; */
+  /* height: 500px; */
+  height: 100%;
+}
+
+.cTitle {
+  background: #634fa4;
+  width: 85%;
+  margin: 10px auto;
+  height: 50px;
+  color: #fff;
+  line-height: 50px;
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  border-radius: 5px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 10px;
+}
+
+.ml {
+  margin-left: 20px;
+  color: #5b7dba;
+  border-left: 3px solid #5b7dba;
+  padding-left: 5px;
+  font-weight: bold;
+}
+
+.cru_selectBox {
+  width: 100%;
+  margin: 0 auto;
+  overflow: auto;
+  height: calc(100% - 90px);
+  overflow-x: hidden;
+}
+
+.cru_selectBox::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.cru_selectBox::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background-color: #b8bdc9;
+}
+
+/*定义滑块 内阴影+圆角*/
+.cru_selectBox::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgb(96, 125, 184);
+  background-color: #2c5ab3;
+}
+
+.blue_box_one {
+  text-align: center;
+  color: #fff;
+  background-image: linear-gradient(90deg, #7960d5, #65b9fc);
+  border-radius: 7px;
+  margin: 10px auto;
+  cursor: pointer;
+  width: 95%;
+  height: 45px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.blue_box_one>div:nth-child(1) {
+  line-height: 30px;
+  margin: 0 5px 0 10px;
+  width: 30%;
+  min-width: 70px;
+  border-radius: 4px;
+}
+
+.blue_box_one>div:nth-child(2) {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  width: 70%;
+  text-align: left;
+  margin-right: 10px;
+  max-width: calc(100% - 85px);
+}
+
+.blue_box_one>div:nth-child(2):hover {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.twoChild {
+  width: 95%;
+  margin: 10px auto;
+  border-radius: 5px;
+  background: #f2f2f2;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  transition: all 0.5s;
+  overflow: hidden;
+  height: 0;
+  background: #e7f3ff;
+}
+
+.twoChild>div:nth-child(1) {
+  margin-top: 5px;
+}
+
+.navChild {
+  width: 100%;
+  cursor: pointer;
+  margin-bottom: 10px;
+}
+
+.navActive {
+  height: auto;
+}
+
+.navTask {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  align-content: flex-start;
+  height: 40px;
+  justify-content: flex-start;
+  padding: 0 10px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.vedioNav {
+  margin: 10px 0 0 15px;
+  /* border-bottom: 1px solid #d7d7d7; */
+  padding-bottom: 5px;
+  background: #b7aadf;
+  width: 55px;
+  min-width: 55px;
+  border-radius: 5px;
+  color: #fff;
+  text-align: center;
+  height: 20px;
+  line-height: 26px;
+  font-size: 14px;
+}
+
+.navTaskname {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  padding-left: 5px;
+}
+
+.allBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  width: 100%;
+  height: 351px;
+  margin-bottom: 20px;
+}
+
+.shuBox {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 100%;
+  flex-wrap: nowrap;
+  overflow: auto;
+  /* height: 500px; */
+  height: 100%;
+}
+
+.answerbox {
+  display: flex;
+  flex-direction: row;
+  /* align-items: center; */
+  margin-bottom: 20px;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.answerbox>div:nth-child(2) {
+  margin-left: 15px;
+}
+
+.answerbox1 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  font-size: 16px;
+}
+
+.answerbox1>div:nth-child(2) {
+  margin-top: 10px;
+  width: 265px;
+  max-height: 147px;
+  overflow: auto;
+}
+
+.jdName {
+  width: 100%;
+}
+
+.full_diy>>>.el-dialog {
+  margin: 0 !important;
+  height: 100%;
+}
+
+.full_diy>>>.el-dialog__body {
+  height: calc(100% - 100px);
+}
+
+.openTaskActive {
+  color: #8f7fe2;
+}
+
+.isClick {
+  background: #8f7fe2;
+}
+
+.buttonCss {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  margin: 10px 0;
+}
+
+.fullStyle>>>.el-dialog__body {
+  height: 100% !important;
+  overflow: auto;
+}
+
+.fullStyle>>>.el-dialog,
+.fullStyle {
+  width: 100% !important;
+  max-width: 100% !important;
+  height: 100% !important;
+  margin: 0 !important;
+}
+
+.worksTime {
+  position: absolute;
+  top: 10px;
+  right: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: baseline;
+}
+
+.fullBox {
+  /* overflow: unset !important;
+  height: auto !important; */
+}
+
+.fullZyBox {
+  width: 60% !important;
+}
+
+.rightScoreFullBox {
+  width: 40%;
+}
+
+.student_page
+  >>> .el-pagination.is-background
+  .el-pager
+  li:not(.disabled).active {
+  background-color: #5c549f;
+}
+.student_page
+  >>> .el-pagination.is-background
+  .el-pager
+  li:not(.disabled):hover {
+  color: #5c549f;
+}
+
+.cancel_button:focus,
+.cancel_button:hover {
+  color: rgb(92, 84, 159);
+  border-color: #5c549f;
+  background-color: #dbd7ff;
+}
+</style>

src/components/pages/components/worksDetail3GM.vue

@@ -0,0 +1,2609 @@
+<template>
+  <div class="pb_content" style="background: unset; height: 100%">
+    <div class="zyBoxC">
+      <div class="courseTitle" v-if="allWorks.course">
+        <!-- <div class="txName">
+          <div class="tx"><img :src="tx" alt="" /></div>
+          <div>{{ allWorks.sName }}</div>
+        </div>
+        <div>{{ allWorks.course }}</div> -->
+        <div>查看作业</div>
+      </div>
+      <div class="cBox">
+        <div class="pb_left">
+          <el-tooltip class="cTitle" effect="light" :content="allWorks.course" placement="top">
+            <div>{{ allWorks.course }}</div>
+          </el-tooltip>
+          <div class="ml">目录</div>
+          <div class="cru_selectBox">
+            <div v-for="(dy, dyIndex) in dyList2" :key="dyIndex">
+              <div class="blue_box_one" @click="isOpen(dyIndex)">
+                <div>第{{ dy.id + 1 }}阶段</div>
+                <div>{{ dy.name }}</div>
+              </div>
+              <div class="twoChild" :class="{
+                navActive: dy.isOpen,
+              }">
+                <div class="navChild" v-for="(nav, navIndex) in dy.taskList" :key="navIndex">
+                  <div class="navTask" @click="openTask(dy.id, nav.id)" :class="{
+                    openTaskActive:
+                      nav.id == taskCount &&
+                      dy.id + '-' + nav.id == navId &&
+                      dy.id == stageIndex,
+                  }">
+                    <div class="vedioNav" :class="{
+                      isClick:
+                        nav.id == taskCount &&
+                        dy.id + '-' + nav.id == navId &&
+                        dy.id == stageIndex,
+                    }" style="margin: 0">
+                      任务{{ navIndex + 1 }}
+                    </div>
+                    <el-tooltip class="navTaskname item" effect="light" :content="nav.name" placement="top">
+                      <div>{{ nav.name }}</div>
+                    </el-tooltip>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="shuBox" v-if="worksDetail.length" :class="{ fullBox: full }">
+          <div class="allBox" v-for="(sin, sIndex) in sInfo" :key="sIndex">
+            <div class="zyBox" v-if="sin.course" :class="{ fullZyBox: full }">
+              <div class="top">
+                <div class="jdName">
+                  <div>
+                    {{
+                    "第" + (sin.stage + 1) + "阶段 " + dyList[sin.stage].name
+                    }}
+                  </div>
+                  <div class="taskName" style="width: 100%; justify-content: space-between">
+                    <div class="taskName" :id="sin.stage + '-' + sin.task" :scrollindex="sIndex">
+                      <div class="task">任务{{ sin.task + 1 }}</div>
+                      <div>
+                        {{ dyList[sin.stage].taskList[sin.task].name }}
+                      </div>
+                    </div>
+                    <div v-if="worksDetail[sIndex].wpptInfo.length > 0">
+                      <el-button class="btnClassGM" type="primary" size="small" @click="openFile(worksDetail[sIndex].wpptInfo[0])">查看文档
+                      </el-button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="contentBox">
+                <div class="left_top" :style="{width:worksDetail[sIndex].eList.length?'45%':'95%'}" v-if="worksDetail[sIndex].img.length > 0">
+                  <div class="bigImg" v-if="
+                    worksDetail[sIndex].img && worksDetail[sIndex].img.length
+                  ">
+                    <img @click="
+                      previewImg(
+                        worksDetail[sIndex].img[worksDetail[sIndex].imgIndex]
+                          .src
+                      )
+                    " :src="
+                      worksDetail[sIndex].img[worksDetail[sIndex].imgIndex]
+                        .src
+                    " alt />
+                  </div>
+                  <div class="thumbnail" v-if="
+                    worksDetail[sIndex].img && worksDetail[sIndex].img.length
+                  ">
+                    <div v-for="(item, index) in worksDetail[sIndex].img" :key="index" :class="
+                      worksDetail[sIndex].imgIndex == index ? 'isClick2' : ''
+                    ">
+                      <img :src="item.src" alt @click="worksDetail[sIndex].imgIndex = index" />
+                    </div>
+                  </div>
+                  <div class="work_nopicture" v-else>暂无上传截图</div>
+                </div>
+                <div class="left_top" :style="{width:worksDetail[sIndex].eList.length?'45%':'95%'}" v-else-if="worksDetail[sIndex].answerInfo.length > 0">
+                  <div class="answerbox">
+                    <div style="min-width: 80px">问答标题</div>
+                    <div>
+                      {{ worksDetail[sIndex].answerInfo[0].answerTitle }}
+                    </div>
+                  </div>
+                  <div class="answerbox1">
+                    <div>学生回答</div>
+                    <div>
+                      {{ worksDetail[sIndex].answerInfo[0].answer }}
+                    </div>
+                  </div>
+                </div>
+                <div class="left_top" :style="{width:worksDetail[sIndex].eList.length?'45%':'95%'}" v-else-if="worksDetail[sIndex].askInfo.length > 0">
+                  <div>
+                    <div class="a_add_title" style="
+                        display: flex;
+                        flex-direction: row;
+                        align-items: center;
+                        justify-content: center;
+                        flex-wrap: wrap;
+                      ">
+                      <div style="margin-right: 20px; font-size: 20px">
+                        标题:
+                      </div>
+                      <div style="font-size: 20px">
+                        {{ worksDetail[sIndex].askInfo[0].askTitle }}
+                      </div>
+                    </div>
+                    <div class="a_addBox">
+                      <div style="font-size: 16px; color: #c7c7c7">
+                        内容
+                      </div>
+                      <div class="a_add_box" v-for="(item1, index1) in worksDetail[sIndex].askInfo[0]
+                      .askCount" :key="index1">
+                        <div class="a_add_head">
+                          <div style="display: flex">
+                            {{ index1 + 1 + "、" }}
+                            <div>
+                              题目：{{
+                              worksDetail[sIndex].askInfo[0].askJson[index1]
+                              .askstitle
+                              }}
+                            </div>
+                          </div>
+                        </div>
+                        <div class="a_add_body">
+                          <div class="a_add_input">
+                            <el-radio-group v-model="
+                              worksDetail[sIndex].askInfo[0].radio[index1]
+                            ">
+                              <el-radio v-for="(item2, checkIndex) in worksDetail[
+                                sIndex
+                              ].askInfo[0].askJson[index1].checkList" :key="checkIndex" :label="checkIndex" disabled
+                                class="redioStyle"><span v-html="item2"></span></el-radio>
+                            </el-radio-group>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="left_top" :style="{width:worksDetail[sIndex].eList.length?'45%':'95%'}" v-else-if="worksDetail[sIndex].wpptInfo.length > 0">
+                  <div style="height: 238px" @click="openFile(worksDetail[sIndex].wpptInfo[0])">
+                    <div @click="openFile(worksDetail[sIndex].wpptInfo[0])" style="
+                        width: 300px;
+                        height: 300px;
+                        position: absolute;
+                        z-index: 999;
+                      "></div>
+                    <pdf v-if="showPDF" :pdfUrl="worksDetail[sIndex].wpptInfo[0]"
+                      style="width: 100%; height: 520px; overflow: auto"></pdf>
+                    <iframe v-else :src="worksDetail[sIndex].wpptInfo[0]" frameborder="0" width="100%"
+                      height="100%"></iframe>
+                  </div>
+                </div>
+                <div class="right_top" v-show="worksDetail[sIndex].eList.length">
+                  <div class="ech">
+                    <img src="../../../assets/icon/pj/ech.png" alt="" />
+                  </div>
+                  <div class="data_body">
+                    <div style="width: 100%">
+                      <div class="echart charts_canvas" style="width: 100%; height: 100%; margin: 0 0 0 1rem"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="right_score" :class="{ rightScoreFullBox: full }">
+              <div class="sd_score" style="
+                  box-sizing: border-box;
+                  width: 100%;
+                  box-shadow: none;
+                  position: relative;
+                ">
+                <div class="worksTime">
+                  作业提交时间：<span style="width: auto">{{ worksDetail[sIndex].time }}
+                  </span>
+                </div>
+                <div class="ech" style="margin-left: 23px">
+                  <img src="../../../assets/icon/pj/score.png" alt="" />
+                </div>
+                <div style="height: 80%;overflow: auto;">
+                  <div class="score_box" v-for="(item, index) in worksDetail[sIndex].eList" :key="index">
+                    <el-tooltip class="item" effect="dark" :content="item.value" placement="top-start">
+                      <span>{{ item.value }}</span>
+                    </el-tooltip>
+                    <el-rate class="rate_size" style="min-width: 120px"
+                      v-model="worksDetail[sIndex].rateList[item.value]" disabled></el-rate>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="student_page">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :page-size="10"
+          :total="total"
+          v-if="page"
+          @current-change="handleCurrentChange"
+        ></el-pagination>
+      </div> -->
+    <el-dialog :visible.sync="pictureDialog" size="tiny">
+      <img width="100%" :src="dialogImageUrl" alt />
+    </el-dialog>
+    <el-dialog title="项目评分" :visible.sync="dataVisible" :append-to-body="true" width="1100px"
+      :before-close="handleClose" class="dialog_diy">
+      <div>
+        <div class="a_addBox2">
+          <StudentData :studentInfo="studentInfo"></StudentData>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dataVisible = false" class="cancel_button">关 闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="查看选择题" :visible.sync="dialogVisible4" :append-to-body="true" width="800px"
+      :before-close="handleClose" class="dialog_diy">
+      <div>
+        <div class="a_add_title" style="
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+          ">
+          <div style="font-size: 20px">{{ askJson.askTitle }}</div>
+        </div>
+        <div class="a_addBox">
+          <div style="font-size: 16px; color: #c7c7c7">内容</div>
+          <div class="a_add_box" v-for="(item, index) in askJson.askJson" :key="index">
+            <div class="a_add_head">
+              <div style="display: flex">
+                {{ index + 1 + "、" }}
+                <div>题目：{{ item.askstitle }}</div>
+              </div>
+            </div>
+            <div class="a_add_body">
+              <div class="a_add_input">
+                <el-radio-group v-model="askJson.radio[index]">
+                  <el-radio v-for="(item3, checkIndex1) in item.checkList" :key="checkIndex1" :label="checkIndex1"
+                    class="redioStyle" disabled>{{ item3 }}</el-radio>
+                </el-radio-group>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible4 = false" class="cancel_button">关 闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="文件预览" :visible.sync="dialogVisible6" width="100%" :before-close="handleClose" class="full_diy"
+      :append-to-body="true">
+      <div slot="title" class="header-title">
+        <div style="color: #fff">文件预览</div>
+      </div>
+      <pdf v-if="showPDF" :pdfUrl="pptImgUrl" style="width: 100%; height: 520px; overflow: auto"></pdf>
+      <iframe v-else :src="pptImgUrl" frameborder="0" width="100%" height="600"></iframe>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import StudentData from "./studentData";
+import htmlDocx from "html-docx-js/dist/html-docx";
+import saveAs from "file-saver";
+export default {
+  components: {
+    StudentData,
+  },
+  props: ["cid", "uid", "ooid"],
+  data() {
+    return {
+      tableHeight: "500px",
+      isLoading: false,
+      id: this.cid,
+      userid: this.uid,
+      oid: this.ooid,
+      formLabelWidth: "100px",
+      dialogImageUrl: "",
+      pictureDialog: false,
+      dialogVisible3: false,
+      dialogVisible4: false,
+      dataVisible: false,
+      full: false,
+      isStar: 0,
+      studentInfo: {},
+      courseByUser: "诗词中的植物",
+      userName: "林点",
+      answerName: "宿赞公房",
+      studentAnswer: "雨荒深院菊,霜倒半池莲.唐杜甫《宿赞公房》",
+      commentCount: 0,
+      publicIndex: 0,
+      allWorks: [],
+      playerOptions: {
+        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+        autoplay: false, //如果true,浏览器准备好时开始回放。
+        muted: false, // 默认情况下将会消除任何音频。
+        loop: false, // 导致视频一结束就重新开始。
+        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+        language: "zh-CN",
+        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+        sources: [
+          {
+            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
+            src: "", //url地址require("../../../assets/media/aaa.mp4")
+          },
+        ],
+        // poster: require("../../../assets/tu31.png"), //你的封面地址
+        // poster: dataRes.imgUrl, //你的封面地址
+        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        controlBar: {
+          timeDivider: true, //当前时间和持续时间的分隔符
+          durationDisplay: true, //显示持续时间
+          remainingTimeDisplay: false, //是否显示剩余时间功能
+          fullscreenToggle: true, //全屏按钮
+        },
+      },
+      playerO: {},
+      commentName: "谭子松",
+      commentTime: "2021/2/5",
+      commentAnswer:
+        "作为家长我很高兴看到孩子的进步，希望这个进步只是一个开始，在新学期能够继续延续，这样才能不负老师的期望",
+      stageIndex: "",
+      taskCount: "",
+      navId: "",
+      chooseTask: "",
+      subjectJuri: [],
+      projectJuri: [],
+      pptImgUrl: "",
+      grade: [],
+      mr: require("../../../assets/icon/wheel.png"),
+      tx: require("../../../assets/avatar.png"),
+      projectchoose: "",
+      scopeId: "",
+      thumbnail: [],
+      rateList: {
+        ca: 0,
+        sia: 0,
+        eta: 0,
+        pia: 0,
+        lra: 0,
+        content: "",
+      },
+      page: 1,
+      total: 0,
+      worksDetail: [],
+      suserId: "",
+      sInfo: {},
+      chapInfo: [],
+      showPDF: false,
+      dialogVisible6: false,
+      vedio: [],
+      file: [],
+      tType: 0,
+      chartObj: [],
+      pptImgUrl: "",
+      ooption: [],
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        series: [
+          {
+            name: "量规评分",
+            type: "pie",
+            radius: "70%",
+            center: ["50%", "50%"],
+            data: [
+              { value: 0, name: "意识能力" },
+              { value: 0, name: "科学探究能力" },
+              { value: 0, name: "实践创新能力" },
+              { value: 0, name: "学习反思能力" },
+              { value: 0, name: "工程思维能力" },
+            ],
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+              normal: {
+                label: {
+                  show: true,
+                  formatter: "{d}%",
+                  inside: true,
+                  position: "inner",
+                },
+                labelLine: { show: false },
+              },
+            },
+          },
+        ],
+      },
+      // 雷达图的数据
+      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: "#5c549f",
+                    lineStyle: {
+                      color: "#5c549f",
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+      askJson: {},
+      dyList: [],
+      dyList2: [],
+      userAarray: [],
+    };
+  },
+  //   mounted() {
+  //     this.$nextTick(function () {
+  //       this.tableHeight =
+  //         window.innerHeight - this.$refs.table.$el.offsetTop - 200;
+  //       if (this.tableHeight <= 530) {
+  //         this.tableHeight = 530;
+  //       }
+  //       // 监听窗口大小变化
+  //       let self = this;
+  //       window.onresize = function () {
+  //         self.tableHeight =
+  //           window.innerHeight - self.$refs.table.$el.offsetTop - 200;
+  //         if (self.tableHeight <= 530) {
+  //           self.tableHeight = 530;
+  //         }
+  //       };
+  //     });
+  //   },
+  methods: {
+    previewImg(url) {
+      this.$hevueImgPreview(url);
+    },
+    lookData(uid) {
+      let params = {
+        uid: uid,
+        cid: this.id,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectWorksDetail", params)
+        .then((res) => {
+          this.studentInfo = res.data[0][0];
+          this.dataVisible = true;
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    handleClose(done) {
+      done();
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    handleCurrentChange(val) {
+      this.page = val;
+      this.getWorks();
+    },
+    lookWork() {
+      // this.scopeId = id;
+      let params = {
+        uid: this.uid,
+        cid: this.cid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectWorksDetail3", params)
+        .then((res) => {
+          this.sInfo = res.data[0];
+          var chapters = [],
+            eList = [],
+            _ooption = [],
+            _rate = [],
+            _rateList = [];
+          var worksDetail = res.data[1];
+          // this.scopeId = res.data[2][0].id;
+          // var scopeId = res.data[2][0].id;
+          var askInfo = res.data[3];
+          var answerInfo = res.data[4];
+          var pptInfo = res.data[5];
+          var workJson = [];
+          for (var k = 0; k < res.data[0].length; k++) {
+            this.allWorks = res.data[0][k];
+            this.chapInfo.push(JSON.parse(res.data[0][k].chapters));
+            chapters.push(JSON.parse(res.data[0][k].chapters));
+            if (!chapters[0][res.data[0][k].stage].chapterInfo[0].taskJson[
+              res.data[0][k].task
+            ]) {
+              continue
+            }
+
+            workJson.push({
+              img: [],
+              imgIndex: 0,
+              eList: [],
+              rateList: {},
+              askInfo: [],
+              answerInfo: [],
+              wpptInfo: [],
+              scopeId: res.data[0][k].id,
+              stagetask: "",
+              time: "",
+            });
+            // this.allWorks = res.data[0][k];
+            // this.chapInfo.push(JSON.parse(res.data[0][k].chapters));
+            // chapters.push(JSON.parse(res.data[0][k].chapters));
+            eList =
+              chapters[0][res.data[0][k].stage].chapterInfo[0].taskJson[
+                res.data[0][k].task
+              ].eList;
+            workJson[k].time = res.data[0][k].time;
+            workJson[k].stagetask =
+              res.data[0][k].stage + "-" + res.data[0][k].task;
+            if (eList && eList.length > 0) {
+              _ooption = [];
+              workJson[k].eList = eList;
+              for (var i = 0; i < eList.length; i++) {
+                _ooption.push({ value: 0, name: eList[i].value });
+                workJson[k].rateList[eList[i].value] = 0;
+              }
+              workJson[k].rateList.content = "";
+              this.ooption[k] = _ooption;
+            }
+            //  else {
+            //   _ooption = [];
+            //   workJson[k].eList = [
+            //     { value: "意识能力", detail: "", score: 5 },
+            //     { value: "科学探究能力", detail: "", score: 5 },
+            //     { value: "实践创新能力", detail: "", score: 5 },
+            //     { value: "学习反思能力", detail: "", score: 5 },
+            //     { value: "工程思维能力", detail: "", score: 5 },
+            //   ];
+            //   for (var i = 0; i < workJson[k].eList.length; i++) {
+            //     _ooption.push({ value: 0, name: workJson[k].eList[i].value });
+            //     workJson[k].rateList[workJson[k].eList[i].value] = 0;
+            //   }
+            //   workJson[k].rateList.content = "";
+            //   this.ooption[k] = [
+            //     { value: 0, name: "意识能力" },
+            //     { value: 0, name: "科学探究能力" },
+            //     { value: 0, name: "实践创新能力" },
+            //     { value: 0, name: "学习反思能力" },
+            //     { value: 0, name: "工程思维能力" },
+            //   ];
+            // }
+            if (res.data[0][k].rate && eList && eList.length > 0) {
+              _rate[k] = JSON.parse(res.data[0][k].rate);
+              _rateList[k] = Object.keys(JSON.parse(res.data[0][k].rate));
+              for (var i = 0; i < _rateList[k].length; i++) {
+                var _c = Object.keys(workJson[k].rateList);
+                if (_c.indexOf(_rateList[k][i]) != -1) {
+                  workJson[k].rateList[_rateList[k][i]] =
+                    _rate[k][_rateList[k][i]];
+                }
+              }
+              for (var i = 0; i < this.ooption[k].length; i++) {
+                if (_rateList[k].indexOf(this.ooption[k][i].name) != -1) {
+                  this.ooption[k][i].value = _rate[k][this.ooption[k][i].name];
+                }
+              }
+            } else {
+              _rate[k] = [];
+              _rateList[k] = [];
+            }
+
+            for (var i = 0; i < worksDetail.length; i++) {
+              if (
+                res.data[0][k].stage == worksDetail[i].stage &&
+                res.data[0][k].task == worksDetail[i].task
+              ) {
+                workJson[k].img.push({ src: worksDetail[i].content, id: i });
+              }
+            }
+            for (var i = 0; i < askInfo.length; i++) {
+              if (
+                res.data[0][k].stage == askInfo[i].stage &&
+                res.data[0][k].task == askInfo[i].task
+              ) {
+                const element = askInfo[i];
+                let a = JSON.parse(element.content)[0];
+                let b = a.anwer.split(",");
+                let c = [];
+                for (var j = 0; j < b.length; j++) {
+                  c.push(parseInt(b[j]));
+                }
+                a.askJson.radio = c;
+                a.askJson.time = element.time;
+                workJson[k].askInfo.push(a.askJson);
+              }
+            }
+
+            for (var i = 0; i < pptInfo.length; i++) {
+              if (
+                res.data[0][k].stage == pptInfo[i].stage &&
+                res.data[0][k].task == pptInfo[i].task
+              ) {
+                var a = ["PPT", "PPTX", "XLSX", "XLS", "DOC", "DOCX"];
+                if (
+                  a.indexOf(
+                    pptInfo[i].content
+                      .split(".")
+                    [
+                      pptInfo[i].content.split(".").length - 1
+                    ].toLocaleUpperCase()
+                  ) != -1
+                ) {
+                  var a =
+                    "https://view.officeapps.live.com/op/view.aspx?src=" +
+                    pptInfo[i].content;
+                  workJson[k].wpptInfo.push(a);
+                  this.showPDF = false;
+                } else if (
+                  pptInfo[i].content
+                    .split(".")
+                  [
+                    pptInfo[i].content.split(".").length - 1
+                  ].toLocaleUpperCase() == "PDF"
+                ) {
+                  workJson[k].wpptInfo.push(pptInfo[i].content);
+                  this.showPDF = true;
+                }
+              }
+            }
+
+            for (var i = 0; i < answerInfo.length; i++) {
+              if (
+                res.data[0][k].stage == answerInfo[i].stage &&
+                res.data[0][k].task == answerInfo[i].task
+              ) {
+                const element = answerInfo[i];
+                workJson[k].answerInfo.push(JSON.parse(element.content)[0]);
+              }
+            }
+          }
+
+          this.worksDetail = workJson;
+
+          this.courseDetail = res.data[0][0];
+
+          this.$forceUpdate;
+          this.dialogVisible3 = true;
+          setTimeout(() => {
+            for (var p = 0; p < res.data[0].length; p++) {
+              if (!this.ooption[p]) {
+                this.chartObj[p] = null;
+                continue
+              }
+              var _ooption = JSON.parse(JSON.stringify(this.ooption[p]));
+              var _option = JSON.parse(JSON.stringify(this.radarOption));
+              _option.radar.indicator = [];
+              _option.series[0].data[0].value = [];
+              for (var i = 0; i < _ooption.length; i++) {
+                _option.radar.indicator.push({
+                  name: _ooption[i].name,
+                  max: 5,
+                });
+                _option.series[0].data[0].value.push(_ooption[i].value);
+              }
+              console.log(_option);
+              this.setChart(_option, p);
+            }
+          }, 0);
+
+          let _dyList = JSON.parse(JSON.stringify(this.dyList));
+          let _dyList2 = [];
+          let _dyList3 = [];
+          for (var c = 0; c < _dyList.length; c++) {
+            _dyList[c].taskList = [];
+            _dyList2.push(_dyList[c]);
+          }
+          _dyList = JSON.parse(JSON.stringify(this.dyList));
+          for (var c = 0; c < workJson.length; c++) {
+            let _stage = workJson[c].stagetask.split("-")[0];
+            let _task = workJson[c].stagetask.split("-")[1];
+            _dyList2[_stage].taskList.push(_dyList[_stage].taskList[_task]);
+            _dyList2[_stage].taskList;
+          }
+          for (var c = 0; c < _dyList2.length; c++) {
+            if (_dyList2[c].taskList.length) {
+              _dyList2[c].isOpen = c === 0 ? true : false;
+              _dyList3.push(_dyList2[c]);
+            }
+          }
+          this.dyList2 = _dyList3;
+          this.stageIndex = this.dyList2[0].id;
+          this.taskCount = this.dyList2[0].taskList[0].id;
+          this.navId =
+            this.dyList2[0].id + "-" + this.dyList2[0].taskList[0].id;
+          this.$forceUpdate();
+          // this.sInfo = res.data[0][0];
+          // this.chapInfo = JSON.parse(res.data[0][0].chapters);
+          // var chapters = JSON.parse(res.data[0][0].chapters);
+          // var worksDetail = res.data[1];
+          // // var askArray = res.data[2];
+          // this.scopeId = res.data[2].length ? res.data[2][0].id : this.sInfo.id;
+          // var askInfo = res.data[3];
+          // var answerInfo = res.data[4];
+          // var workJson = {
+          //   img: [],
+          //   imgIndex: 0,
+          //   eList: [],
+          //   rateList: {},
+          //   askInfo: [],
+          //   answerInfo: [],
+          // };
+          // var eList =
+          //   chapters[this.sInfo.stage].chapterInfo[0].taskJson[this.sInfo.task]
+          //     .eList;
+          // var _ooption = [];
+          // if (eList) {
+          //   workJson.eList = eList;
+          //   for (var i = 0; i < eList.length; i++) {
+          //     _ooption.push({ value: 0, name: eList[i].value });
+          //     workJson.rateList[eList[i].value] = 0;
+          //   }
+          //   workJson.rateList.content = "";
+          //   this.ooption = _ooption;
+          // } else {
+          //   workJson.eList = [
+          //     { value: "意识能力", detail: "", score: 5 },
+          //     { value: "科学探究能力", detail: "", score: 5 },
+          //     { value: "实践创新能力", detail: "", score: 5 },
+          //     { value: "学习反思能力", detail: "", score: 5 },
+          //     { value: "工程思维能力", detail: "", score: 5 },
+          //   ];
+          //   for (var i = 0; i < workJson.eList.length; i++) {
+          //     _ooption.push({ value: 0, name: workJson.eList[i].value });
+          //     workJson.rateList[workJson.eList[i].value] = 0;
+          //   }
+          //   workJson.rateList.content = "";
+          //   this.ooption = [
+          //     { value: 0, name: "意识能力" },
+          //     { value: 0, name: "科学探究能力" },
+          //     { value: 0, name: "实践创新能力" },
+          //     { value: 0, name: "学习反思能力" },
+          //     { value: 0, name: "工程思维能力" },
+          //   ];
+          // }
+          // if (this.sInfo.rate) {
+          //   var _rate = JSON.parse(this.sInfo.rate);
+          //   var _rateList = Object.keys(JSON.parse(this.sInfo.rate));
+          //   for (var i = 0; i < _rateList.length; i++) {
+          //     var _c = Object.keys(workJson.rateList);
+          //     if (_c.indexOf(_rateList[i]) != -1) {
+          //       workJson.rateList[_rateList[i]] = _rate[_rateList[i]];
+          //     }
+          //   }
+          //   for (var i = 0; i < this.ooption.length; i++) {
+          //     if (_rateList.indexOf(this.ooption[i].name) != -1) {
+          //       this.ooption[i].value = _rate[this.ooption[i].name];
+          //     }
+          //   }
+          // }
+
+          // for (var i = 0; i < worksDetail.length; i++) {
+          //   workJson.img.push({ src: worksDetail[i].content, id: i });
+          // }
+          // for (var i = 0; i < askInfo.length; i++) {
+          //   const element = askInfo[i];
+          //   let a = JSON.parse(element.content)[0];
+          //   let b = a.anwer.split(",");
+          //   let c = [];
+          //   for (var j = 0; j < b.length; j++) {
+          //     c.push(parseInt(b[j]));
+          //   }
+          //   a.askJson.radio = c;
+          //   a.askJson.time = element.time;
+          //   workJson.askInfo.push(a.askJson);
+          // }
+
+          // for (var i = 0; i < answerInfo.length; i++) {
+          //   const element = answerInfo[i];
+          //   workJson.answerInfo.push(JSON.parse(element.content)[0]);
+          // }
+
+          // this.worksDetail = workJson;
+
+          // this.courseDetail = res.data[0][0];
+
+          // this.$forceUpdate;
+          // this.dialogVisible3 = true;
+
+          // setTimeout(() => {
+          //   var _ooption = JSON.parse(JSON.stringify(this.ooption));
+          //   var _option = this.radarOption;
+          //   _option.radar.indicator = [];
+          //   _option.series[0].data[0].value = [];
+          //   for (var i = 0; i < _ooption.length; i++) {
+          //     _option.radar.indicator.push({ name: _ooption[i].name, max: 5 });
+          //     _option.series[0].data[0].value.push(_ooption[i].value);
+          //   }
+          //   console.log(_option);
+          //   this.setChart(_option);
+
+          // }, 0);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    checkAsk(askJson) {
+      this.askJson = askJson;
+      this.dialogVisible4 = true;
+    },
+    setChart(option, k) {
+      let _this = this;
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        console.log(_this.option);
+
+        const chartObj = _this.$echarts.init(
+          //劳动课程
+          // _this.$el.querySelector("#charts_canvas")
+          document.getElementsByClassName("charts_canvas")[k]
+        );
+        // 初始化雷达图
+        _this.chartObj[k] = chartObj;
+        _this.chartObj[k].setOption(option);
+      });
+    },
+    openFile(f) {
+      this.pptImgUrl = f;
+      this.dialogVisible6 = true;
+    },
+    //获取班级列表
+    getClass() {
+      this.isLoading = true;
+      let params = {
+        oid: this.oid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectClassBySchool", params)
+        .then((res) => {
+          this.isLoading = false;
+          this.grade = res.data[0];
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    //获取分组分类
+    getGroup() {
+      let params = {};
+      this.ajax
+        .get(this.$store.state.api + "getGroup", params)
+        .then((res) => {
+          this.subjectJuri = res.data[0];
+          this.projectJuri = res.data[0];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    searchWork1() {
+      this.page = 1;
+      this.chooseTask = "";
+      this.getWorks();
+    },
+    searchWork2() {
+      this.page = 1;
+      this.getWorks();
+    },
+    //获取作业
+    getWorks() {
+      this.isLoading = true;
+      var mr = this.mr;
+      let params = {
+        cid: this.id,
+        uname: this.uname,
+        stage: this.chooseDy,
+        task: this.chooseTask,
+        page: this.page,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getCourseWorks3", params)
+        .then((res) => {
+          this.isLoading = false;
+          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.tableData = res.data[0];
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    fullTools() {
+      this.full = !this.full;
+    },
+    getCourseDetail() {
+      let params = {
+        cid: this.cid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getCourseWorksReport", params)
+        .then((res) => {
+          this.course = res.data[0][0];
+          var dyJSON = JSON.parse(res.data[0][0].chapters);
+          let dyList = [];
+          for (var i = 0; i < dyJSON.length; i++) {
+            dyList.push({ name: dyJSON[i].dyName, id: i, taskList: [] });
+            var a = dyJSON[i].chapterInfo[0].taskJson;
+            for (var j = 0; j < a.length; j++) {
+              dyList[i].taskList.push({ name: a[j].task, id: j });
+            }
+          }
+          this.dyList = dyList;
+          this.userAarray = res.data[1];
+          this.lookWork();
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    // getCourseDetail() {
+    //   const loading = this.$loading.service({
+    //     background: "rgba(255, 255, 255, 0.7)",
+    //     target: document.querySelector(".student_table"),
+    //   });
+    //   console.log(this.id);
+    //   let params = {
+    //     courseId: this.id,
+    //   };
+    //   this.ajax
+    //     .get(this.$store.state.api + "selectCourseDetail", params)
+    //     .then((res) => {
+    //       loading.close();
+    //       // this.chapInfo = JSON.parse(res.data[0][0].chapters);
+    //       var dyJSON = JSON.parse(res.data[0][0].chapters);
+    //       let dyList = [];
+    //       for (var i = 0; i < dyJSON.length; i++) {
+    //         dyList.push({ name: dyJSON[i].dyName, id: i, taskList: [] });
+    //         var a = dyJSON[i].chapterInfo[0].taskJson;
+    //         for (var j = 0; j < a.length; j++) {
+    //           dyList[i].taskList.push({ name: a[j].task, id: j });
+    //         }
+    //       }
+    //       console.log(dyList);
+    //       this.dyList = dyList;
+    //       // var dyJSON = JSON.parse()
+    //     })
+    //     .catch((err) => {
+    //       loading.close();
+    //       console.error(err);
+    //     });
+    // },
+    handlePictureCardPreview(url) {
+      this.dialogImageUrl = url;
+      this.pictureDialog = true;
+    },
+    updatePj() {
+      for (var i = 0; i < this.worksDetail.length; i++) {
+        this.updateWorks(
+          this.worksDetail[i].scopeId,
+          this.worksDetail[i].rateList,
+          i
+        );
+      }
+    },
+    getStar(i) {
+      const k = i;
+      var _ooption = JSON.parse(JSON.stringify(this.ooption[k]));
+      var _rate = this.worksDetail[i].rateList;
+      var _rateList = Object.keys(this.worksDetail[i].rateList);
+      for (var i = 0; i < _ooption.length; i++) {
+        if (_rateList.indexOf(_ooption[i].name) != -1) {
+          _ooption[i].value = _rate[_ooption[i].name];
+        }
+      }
+      // var _option = JSON.parse(JSON.stringify(this.radarOption));
+      var _option = this.radarOption;
+      _option.radar.indicator = [];
+      _option.series[0].data[0].value = [];
+      for (var i = 0; i < _ooption.length; i++) {
+        _option.radar.indicator.push({ name: _ooption[i].name, max: 5 });
+        _option.series[0].data[0].value.push(_ooption[i].value);
+      }
+      if (this.chartObj) {
+        // _option.series[0].data = _ooption;
+        this.chartObj[k].setOption(_option);
+      } else {
+        this.setChart(_ooption);
+      }
+    },
+    updateWorks(scopeId, rateList, i) {
+      let params = {
+        rate: rateList,
+        tuid: this.userid,
+        id: scopeId,
+      };
+      const k = i;
+      this.ajax
+        .get(this.$store.state.api + "updateWorks", params)
+        .then((res) => {
+          var _ooption = JSON.parse(JSON.stringify(this.ooption[k]));
+          // var _option = JSON.parse(JSON.stringify(this.option));
+
+          var _rate = rateList;
+          var _rateList = Object.keys(rateList);
+          for (var i = 0; i < _ooption.length; i++) {
+            if (_rateList.indexOf(_ooption[i].name) != -1) {
+              _ooption[i].value = _rate[_ooption[i].name];
+            }
+          }
+
+          // var _option = JSON.parse(JSON.stringify(this.radarOption));
+          var _option = this.radarOption;
+          _option.radar.indicator = [];
+          _option.series[0].data[0].value = [];
+          for (var i = 0; i < _ooption.length; i++) {
+            _option.radar.indicator.push({ name: _ooption[i].name, max: 5 });
+            _option.series[0].data[0].value.push(_ooption[i].value);
+          }
+          console.log(_option);
+          if (this.chartObj) {
+            // _option.series[0].data = _ooption;
+            this.chartObj[k].setOption(_option);
+          } else {
+            this.setChart(_ooption);
+          }
+          // this.uploadBoolean = false;
+          if (k == this.worksDetail.length - 1) {
+            this.$message({
+              message: "评价成功",
+              type: "success",
+            });
+          }
+        })
+        .catch((err) => {
+          this.$message.error("评价失败");
+          console.error(err);
+        });
+    },
+    switchVideo(media, index) {
+      this.playerO = {};
+      this.playerOptions.poster = "";
+      this.playerOptions.sources[0].src = media;
+      this.playerO = this.playerOptions;
+    },
+    onPlayerPlay() { },
+    // this.$store.commit("update", ["userInfo", userInfo]);
+    lookWork2(id, uid, stage, task) {
+      // this.scopeId = id;
+      let params = {
+        uid: uid,
+        cid: this.id,
+        stage: stage,
+        task: task,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectWorksDetail2", params)
+        .then((res) => {
+          this.sInfo = res.data[0][0];
+          this.chapInfo = JSON.parse(res.data[0][0].chapters);
+          var chapters = JSON.parse(res.data[0][0].chapters);
+          var worksDetail = res.data[1];
+          // var askArray = res.data[2];
+          this.scopeId = res.data[2].length ? res.data[2][0].id : this.sInfo.id;
+          var askInfo = res.data[3];
+          var answerInfo = res.data[4];
+          var linkInfo = res.data[5];
+          var workJson = {
+            img: [],
+            imgIndex: 0,
+            eList: [],
+            rateList: {},
+            wpptInfo: [],
+            askInfo: [],
+            answerInfo: [],
+          };
+          var eList =
+            chapters[this.sInfo.stage].chapterInfo[0].taskJson[this.sInfo.task]
+              .eList;
+          //           ooption: [
+          //   { value: 0, name: "意识能力" },
+          //   { value: 0, name: "科学探究能力" },
+          //   { value: 0, name: "实践创新能力" },
+          //   { value: 0, name: "学习反思能力" },
+          //   { value: 0, name: "工程思维能力" },
+          // ],
+          var _ooption = [];
+          if (eList) {
+            workJson.eList = eList;
+            for (var i = 0; i < eList.length; i++) {
+              _ooption.push({ value: 0, name: eList[i].value });
+              workJson.rateList[eList[i].value] = 0;
+            }
+            workJson.rateList.content = "";
+            this.ooption = _ooption;
+          } else {
+            workJson.eList = [
+              { value: "意识能力", detail: "", score: 5 },
+              { value: "科学探究能力", detail: "", score: 5 },
+              { value: "实践创新能力", detail: "", score: 5 },
+              { value: "学习反思能力", detail: "", score: 5 },
+              { value: "工程思维能力", detail: "", score: 5 },
+            ];
+            for (var i = 0; i < workJson.eList.length; i++) {
+              _ooption.push({ value: 0, name: workJson.eList[i].value });
+              workJson.rateList[workJson.eList[i].value] = 0;
+            }
+            workJson.rateList.content = "";
+            this.ooption = [
+              { value: 0, name: "意识能力" },
+              { value: 0, name: "科学探究能力" },
+              { value: 0, name: "实践创新能力" },
+              { value: 0, name: "学习反思能力" },
+              { value: 0, name: "工程思维能力" },
+            ];
+          }
+          if (this.sInfo.rate) {
+            var _rate = JSON.parse(this.sInfo.rate);
+            var _rateList = Object.keys(JSON.parse(this.sInfo.rate));
+            for (var i = 0; i < _rateList.length; i++) {
+              var _c = Object.keys(workJson.rateList);
+              if (_c.indexOf(_rateList[i]) != -1) {
+                workJson.rateList[_rateList[i]] = _rate[_rateList[i]];
+              }
+            }
+            for (var i = 0; i < this.ooption.length; i++) {
+              if (_rateList.indexOf(this.ooption[i].name) != -1) {
+                this.ooption[i].value = _rate[this.ooption[i].name];
+              }
+            }
+          }
+
+          for (var i = 0; i < worksDetail.length; i++) {
+            workJson.img.push({ src: worksDetail[i].content, id: i });
+          }
+          for (var i = 0; i < askInfo.length; i++) {
+            const element = askInfo[i];
+            let a = JSON.parse(element.content)[0];
+            let b = a.anwer.split(",");
+            let c = [];
+            for (var j = 0; j < b.length; j++) {
+              c.push(parseInt(b[j]));
+            }
+            a.askJson.radio = c;
+            a.askJson.time = element.time;
+            workJson.askInfo.push(a.askJson);
+          }
+
+          for (var i = 0; i < answerInfo.length; i++) {
+            const element = answerInfo[i];
+            workJson.answerInfo.push(JSON.parse(element.content)[0]);
+          }
+
+          this.worksDetail = workJson;
+
+          this.courseDetail = res.data[0][0];
+
+          this.$forceUpdate;
+
+          var _course = `<h1>${this.sInfo.course}</h1>`;
+          var _title =
+            "<h2>" +
+            "第" +
+            (this.sInfo.stage + 1) +
+            "阶段 " +
+            this.dyList[this.sInfo.stage].name +
+            "</h2>";
+          var _subtitle =
+            "<h3>" +
+            "任务" +
+            (this.sInfo.task + 1) +
+            " " +
+            this.dyList[this.sInfo.stage].taskList[this.sInfo.task].name +
+            "-" +
+            this.sInfo.sName +
+            "</h3>";
+          var _img = "";
+          if (workJson.img.length > 0) {
+            for (var i = 0; i < workJson.img.length; i++) {
+              // _img += `<div style="margin-top:10px"><div>图片${
+              //   i + 1
+              // }:<a href='${workJson.img[i].src}'>${
+              //   workJson.img[i].src
+              // }</a></div>`;
+              _img += `<div style="margin-top:10px"><div>图片${i + 1
+                }</div><img style="max-width:500px" src="${workJson.img[i].src
+                }"/></div>`;
+            }
+          }
+
+          var _ask = "";
+          if (workJson.askInfo.length > 0) {
+            var _ask = "<h3>选择题</h3>";
+            for (var i = 0; i < workJson.askInfo.length; i++) {
+              var _div = document.createElement("div");
+              _div.innerHTML = `<h4>标题:${workJson.askInfo[i].askTitle}</h4>`;
+              for (var j = 0; j < workJson.askInfo[i].askJson.length; j++) {
+                var _div2 = document.createElement("div");
+                _div2.innerHTML = `<h5>第${j + 1}题:${workJson.askInfo[i].askJson[j].askstitle
+                  }  选择:${workJson.askInfo[i].radio[j] + 1}</h5> `;
+                var _div3 = document.createElement("div");
+                for (
+                  var z = 0;
+                  z < workJson.askInfo[i].askJson[j].checkList.length;
+                  z++
+                ) {
+                  _div3.innerHTML += `<span style="margin-right:5px">${z + 1}.${workJson.askInfo[i].askJson[j].checkList[z]
+                    }</span>`;
+                }
+                _div2.innerHTML += `<div>${_div3.innerHTML}</div>`;
+                _div.innerHTML += `<div>${_div2.innerHTML}</div>`;
+              }
+              _ask += `<div>${_div.innerHTML}</div>`;
+            }
+          }
+
+          var _answer = "";
+          if (workJson.answerInfo.length > 0) {
+            var _answer = "<h3>问答</h3>";
+            for (var i = 0; i < workJson.answerInfo.length; i++) {
+              var _div = document.createElement("div");
+              _div.innerHTML = `<h4>问答：${workJson.answerInfo[i].answerTitle}</h4>`;
+              _div.innerHTML += `<div>${workJson.answerInfo[i].answer}</div>`;
+              _answer += `<div>${_div.innerHTML}</div>`;
+            }
+          }
+
+          var _link = "";
+          if (linkInfo.length > 0) {
+            for (var i = 0; i < linkInfo.length; i++) {
+              _link += `<div style="margin-top:10px"><a href='${linkInfo[i].content}'>${linkInfo[i].content}</a></div>`;
+            }
+          }
+
+          var _html =
+            _course + _title + _subtitle + _img + _ask + _answer + _link;
+          this.generate(_html);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    isOpen(s) {
+      // this.stageIndex = s;
+      this.dyList2[s].isOpen = !this.dyList2[s].isOpen;
+    },
+    openTask(s, i) {
+      var a = s + "-" + i;
+      var b = document.getElementById(a);
+      var d = b.getAttribute("scrollindex");
+      var c = document.getElementsByClassName("shuBox")[0];
+      c.scrollTop = parseInt(d) * 375;
+      this.stageIndex = s;
+      this.taskCount = i;
+      this.navId = a;
+    },
+    async generate(a) {
+      // 将html文件中需要用到的数据挂载到store上
+      this.$store.commit("update", ["report", a]);
+      console.log(this.$store.state.report);
+      const content = `<!DOCTYPE html>
+      <html lang="en">
+      <head>
+          <meta charset="UTF-8">
+          <meta http-equiv="X-UA-Compatible" content="IE=edge">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>报告</title>
+      </head>
+      <body>
+      ${this.$store.state.report}
+      </body>
+      </html>`;
+      // debugger
+      // 生成报告
+      const link = document.createElement("a");
+      let dname = this.sInfo.course + "-" + this.sInfo.sName + ".html";
+      // link.download = "报告.html"; // 文件名
+      link.download = dname; // 文件名
+      link.style.display = "none";
+      // 创建文件流
+      // 创建bolb实例时，内容一定要放在[]中
+      const blob = new Blob([content], {
+        type: "text/plain;charset='utf-8'",
+      });
+      link.href = window.URL.createObjectURL(blob);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      // saveAs(
+      //   htmlDocx.asBlob(content, {
+      //     orientation: "landscape", //跨域设置
+      //   }),
+      //   //文件名
+      //   "报告.doc"
+      // );
+    },
+  },
+  watch: {
+    uid(newValue, oldValue) {
+      this.getCourseDetail();
+      this.getClass();
+      this.getGroup();
+      this.getWorks();
+      // this.lookWork();
+    },
+  },
+  mounted() {
+    this.getCourseDetail();
+    this.getClass();
+    this.getGroup();
+    this.getWorks();
+    // this.lookWork();
+  },
+};
+</script>
+
+<style scoped>
+.pb_head>span:nth-child(2) {
+  font-size: 16px;
+  margin-left: 80px;
+  color: #ab582f;
+}
+
+.pb_head {
+  margin: 0 !important;
+  width: 100% !important;
+}
+
+.student_page {
+  margin-top: 10px;
+}
+
+.student_head {
+  margin-top: 10px;
+  padding-bottom: 15px;
+}
+
+.student_search {
+  display: flex;
+}
+
+.student_search>div:nth-child(1) {
+  line-height: 35px;
+  font-size: 14px;
+}
+
+.student_search>>>.el-input__inner {
+  width: 190px;
+  height: 35px;
+  margin-left: 10px;
+}
+
+.student_table>>>.el-table--border td {
+  border-right: 0px !important;
+}
+
+.add_work>>>.el-dialog__header {
+  padding: 20px 20px 10px;
+  text-align: center;
+  background: #32455b;
+}
+
+.add_work>>>.el-dialog__title {
+  font-size: 14px !important;
+  color: #fff !important;
+}
+
+.add_work>>>.el-dialog__headerbtn {
+  font-size: 20px !important;
+  top: 5px !important;
+  right: 8px !important;
+}
+
+.add_work>>>.el-form-item__label {
+  margin-left: 65px;
+}
+
+.add_work>>>.el-form-item {
+  display: flex;
+}
+
+.add_work>>>.el-form-item__content {
+  margin: 0 !important;
+}
+
+.add_work>>>.el-dialog__footer {
+  text-align: center !important;
+}
+
+.add_work>>>.el-dialog {
+  min-width: 650px !important;
+  width: 1080px;
+}
+
+.add_work>>>.el-dialog__body {
+  background: #fff;
+  height: 660px;
+  overflow: auto;
+}
+
+.header-title {
+  display: flex;
+}
+
+.logoImg {
+  width: 30px;
+}
+
+.logoImg>img {
+  width: 100%;
+  height: 100%;
+}
+
+.title_add_student {
+  margin: 0 auto;
+  color: #fff;
+}
+
+.first {
+  margin-top: 25px;
+  border-bottom: 1px solid #c5c5c5;
+}
+
+.one_top {
+  display: flex;
+  justify-content: space-between;
+}
+
+.one_top>div:nth-child(1) {
+  color: #2490bf;
+  font-size: 16px;
+}
+
+.one_top>button {
+  width: 100px;
+  background: #24a0a4;
+  height: 30px;
+  color: #e0e0e0;
+  font-size: 13px;
+  padding: 0 !important;
+}
+
+.work_Img {
+  width: 150px;
+  margin: 10px 0;
+}
+
+.assess_Img {
+  width: 400px;
+  margin: 0 auto;
+  padding: 15px 0;
+}
+
+.work_Img>img,
+.assess_Img>img {
+  width: 100%;
+  height: 100%;
+}
+
+.work_input {
+  border: 1px solid;
+  width: 135px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 13px;
+  padding: 5px;
+}
+
+.poetry {
+  margin: 10px 0 15px 0;
+}
+
+.assess {
+  background: #169bd5 !important;
+}
+
+.assess_top {
+  border-bottom: 2px solid #eee;
+  padding-bottom: 10px;
+}
+
+.assess_top>div:nth-child(1) {
+  color: #2490bf;
+  font-size: 16px;
+}
+
+.student_Answer {
+  display: flex;
+  margin: 5px 10px;
+  /* padding-bottom: 25px; */
+}
+
+.workName {
+  font-size: 18px;
+  font-weight: bold;
+  margin: 5px 10px;
+}
+
+.toux {
+  width: 35px;
+  /* margin: auto 0; */
+  height: 35px;
+}
+
+.toux>img {
+  width: 100%;
+  height: 100%;
+}
+
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 10px;
+  flex-direction: column;
+}
+
+.studentName {
+  margin-left: 10px;
+  font-size: 13px;
+}
+
+.studentAnswer {
+  font-size: 12px;
+  margin: 5px 0 0 10px;
+  height: 42px;
+  overflow: auto;
+}
+
+.comment {
+  /* margin: 20px 0 0 10px;
+  overflow: auto;
+  height: 75%;
+  max-height: 330px; */
+  overflow: auto;
+  /* height: 290px; */
+  height: 525px;
+  background: #fff;
+  border-radius: 5px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.comment_body {
+  height: calc(100% - 25px);
+  overflow: auto;
+}
+
+.comment>.comment_title {
+  font-size: 18px;
+}
+
+.comment>.comment_title>span {
+  font-size: 14px;
+}
+
+.other_Answer {
+  display: flex;
+  margin: 5px 10px;
+  padding: 15px 0;
+  justify-content: center;
+}
+
+.nav {
+  margin-left: 5px;
+  width: 80%;
+}
+
+.nameAndTime {
+  display: flex;
+}
+
+.otherName {
+  font-weight: bold;
+  margin-left: 10px;
+  font-size: 13px;
+}
+
+.time {
+  margin-left: 25px;
+  font-size: 12px;
+  margin-top: 3px;
+}
+
+.otherAnswer {
+  width: 80%;
+  word-wrap: break-word;
+  word-break: break-all;
+  overflow: hidden;
+  font-size: 12px;
+  margin: 5px 0 0 10px;
+}
+
+.doingAssess {
+  margin: 0 auto;
+  width: 300px;
+  background: #169bd5;
+  height: 35px;
+  line-height: 35px;
+  border-radius: 3px;
+  font-size: 13px;
+  text-align: center;
+  color: #fff;
+  margin-top: 30px;
+  cursor: pointer;
+}
+
+.score_top {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.userTou {
+  width: 50px;
+}
+
+.userTou>img {
+  width: 100%;
+  height: 100%;
+}
+
+.score_user_name {
+  line-height: 53px;
+  margin-left: 15px;
+}
+
+.course_top {
+  display: flex;
+  align-items: center;
+}
+
+.course_top>div:nth-child(1) {
+  line-height: 25px;
+}
+
+.course_top>div:nth-child(2) {
+  border: 1px solid #ccc;
+  width: 250px;
+  text-align: center;
+  height: 25px;
+  line-height: 25px;
+  margin-left: 30px;
+}
+
+.sd_score {
+  font-size: 15px;
+  background: #fff;
+  height: 100%;
+  padding-top: 40px;
+  border-radius: 5px;
+  width: 90%;
+  box-shadow: 2px 2px 5px #909090;
+  overflow: auto;
+}
+
+.sd_score .score_box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 15px;
+  /* margin-left: 30px; */
+}
+
+.sd_score .score_box:last-child {
+  margin-bottom: 0;
+}
+
+.rate_size>>>.el-rate__icon {
+  font-size: 25px;
+}
+
+.rate_size>>>.el-icon-star-off {
+  font-size: 22px;
+}
+
+.sd_score span {
+  width: 130px;
+  text-align: justify;
+  text-align-last: justify;
+  display: block;
+  margin-right: 20px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 16px;
+}
+
+.moreSay {
+  margin: 0px 0 5px 20px;
+}
+
+.more_say_input {
+  margin-left: 20px;
+  width: 80%;
+}
+
+.more_say_input>>>.el-input__inner {
+  height: 75px;
+  font-size: 13px;
+  padding: 0 0 0 10px;
+}
+
+.assess_right {
+  width: 200px;
+  background: #82b0ee;
+  color: #fff;
+  text-align: center;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 5px;
+  margin: 0 auto;
+  margin-top: 20px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.student_page {
+  margin-top: 10px;
+}
+
+.display {
+  display: none;
+}
+
+.firstTop {
+  background: #fff;
+  display: flex;
+  margin-bottom: 15px;
+  flex-direction: column;
+  align-items: flex-start;
+  height: 90px;
+  padding: 10px 25px;
+  border-radius: 5px;
+  width: 90%;
+  box-shadow: 2px 2px 5px #909090;
+}
+
+.talkScore>>>.el-dialog__body {
+  background: #efefef;
+  margin: 0 !important;
+}
+
+.lastTop {
+  background: #fff;
+  border-radius: 5px;
+  width: 98%;
+  height: 120px;
+  box-shadow: 2px 2px 5px #909090;
+}
+
+.left,
+.right {
+  /* background: #fff; */
+  border-radius: 5px;
+  /* padding: 10px; */
+  box-sizing: border-box;
+}
+
+.left {
+  margin-right: 10px;
+  width: 30%;
+  min-height: 425px;
+}
+
+/* .left .left_top {
+  background: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  margin-bottom: 15px;
+} */
+.left .left_bottom {
+  background: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  height: 160px;
+}
+
+.right {
+  width: 20%;
+  background: none;
+  padding: 0;
+}
+
+.courseTitle {
+  font-size: 16px;
+  color: #7c7c7c;
+  width: 100%;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.course_t {
+  font-size: 19px;
+  display: flex;
+  align-items: flex-end;
+}
+
+.course_t span:nth-child(2) {
+  font-size: 16px;
+  margin-left: 10px;
+}
+
+.courseTitle span:nth-child(2) {
+  /* font-size: 14px;
+  cursor: pointer; */
+}
+
+.bigImg {
+  margin-top: 10px;
+  /* height: 300px; */
+  height: 150px;
+}
+
+.bigImg>img,
+.thumbnail>div>img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.thumbnail {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  margin: 5px 0 8px;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.isClick2 {
+  border: 3px solid #8f7fe2;
+  border-radius: 5px;
+}
+
+.thumbnail>div {
+  width: 80px;
+  height: 80px;
+  margin-right: 5px;
+  cursor: pointer;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.zyBoxC {
+  /* background: #ededed; */
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 20px 0px;
+  flex-direction: column;
+  height: 100%;
+}
+
+.zyBox {
+  display: flex;
+  min-width: 600px;
+  width: 60%;
+  position: relative;
+  background: #fff;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  overflow: hidden;
+}
+
+.zyBoxC+.zyBoxC {
+  margin-top: 10px;
+}
+
+.rbButtom {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background: #06a7ff;
+  width: 100px;
+  height: 30px;
+  border-radius: 5px;
+  text-align: center;
+  color: #fff;
+  line-height: 30px;
+  font-size: 14px;
+  cursor: pointer;
+  right: 10px;
+}
+
+.bigImg>>>.vjs-tech,
+.bigImg>>>.video-js {
+  height: 300px !important;
+}
+
+.el-table>>>.even_row {
+  background-color: #f1f1f1;
+}
+
+.data_body {
+  height: 200px;
+  display: flex;
+  position: relative;
+  border-radius: 5px;
+  box-sizing: border-box;
+  width: 100%;
+  background: #fff;
+}
+
+.data_body .title {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+
+.dialog_diy>>>.el-dialog__header {
+  padding: 9px 20px 10px;
+  background: #32455b !important;
+}
+
+.dialog_diy>>>.el-dialog__title {
+  color: #fff;
+  font-size: 15px;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn {
+  top: 14px;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+
+.dialog_diy>>>.el-dialog__body,
+.dialog_diy>>>.el-dialog__footer {
+  background: #fafafa;
+}
+
+.max_diy>>>.el-dialog {
+  /* max-width: 1200px; */
+  max-width: 1300px;
+}
+
+.dialog_diy2>>>.el-dialog__header {
+  padding: 9px 20px 10px;
+  background: #32455b !important;
+}
+
+.dialog_diy2>>>.el-dialog__title {
+  color: #fff;
+  font-size: 15px;
+}
+
+.dialog_diy2>>>.el-dialog__headerbtn {
+  top: 14px;
+}
+
+.dialog_diy2>>>.el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+
+.dialog_diy2>>>.el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+
+.dialog_diy2>>>.el-dialog__body,
+.dialog_diy2>>>.el-dialog__footer {
+  background: #ededed;
+  padding: 15px 20px;
+}
+
+.a_addBox2 {
+  margin: 10px 0;
+  background: #fff;
+  padding: 15px;
+}
+
+.a_addBox {
+  margin: 10px 0;
+  background: #fff;
+  padding: 15px;
+  /* max-height: 400px; */
+  max-height: 160px;
+  overflow: auto;
+}
+
+.a_add_box {
+  border-bottom: 2px solid #eee;
+  padding-bottom: 10px;
+}
+
+.a_add_head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px 0;
+  font-size: 18px;
+}
+
+.a_add_head .a_add_head_input {
+  width: 300px;
+}
+
+.a_add_head .a_add_head_div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.a_add_body {
+  display: flex;
+  align-items: center;
+}
+
+.a_add_input {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  /* flex-direction: column; */
+  /* width: 100%; */
+}
+
+.a_add_input>>>el-radio-group {
+  margin: 10px 0;
+}
+
+.a_add_input>>>.el-radio-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.redioStyle>>>.el-radio__label {
+  font-size: 18px;
+}
+
+.task_title {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.ask_Answer {
+  /* margin-top: 10px; */
+}
+
+.ask_Answer_title {
+  font-size: 18px;
+}
+
+.ask_Answer_content {
+  display: flex;
+  justify-content: center;
+  margin: 10px 0;
+}
+
+.answer_body {
+  padding: 10px 0;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.answer_title {
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.answer_content {
+  margin-top: 5px;
+}
+
+.ask_body {
+  display: flex;
+  font-size: 16px;
+  margin-top: 10px;
+  flex-direction: column;
+  height: 130px;
+  overflow: auto;
+  /* padding: 0 10px; */
+  box-sizing: border-box;
+}
+
+.ask_body div {
+  /* cursor: pointer; */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ask_body div .btn {
+  cursor: pointer;
+  color: #fff;
+  background-color: #409eff;
+  text-align: center;
+  font-size: 12px;
+  padding: 6px 12px;
+  box-sizing: border-box;
+  border-radius: 5px;
+  width: 60px;
+}
+
+.ask_body div span:nth-child(1) {
+  max-width: 250px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ask_body div+div {
+  margin-top: 10px;
+}
+
+.work_nopicture {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* height: 350px; */
+  height: 352px;
+}
+
+.student_table>>>.el-table,
+.student_table>>>.el-table__body-wrapper {
+  height: auto !important;
+}
+
+.tx {
+  width: 35px;
+}
+
+.ech {
+  width: 100px;
+}
+
+.tx>img,
+.ech>img {
+  width: 100%;
+  height: 100%;
+}
+
+.txName {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 10px;
+}
+
+.txName>div:nth-child(2) {
+  margin-left: 10px;
+}
+
+.top {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px 0 15px 20px;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  width: 95%;
+}
+
+.jdName>div:nth-child(1) {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.taskName {
+  font-size: 14px;
+  margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.task {
+  background: #8f7fe2;
+  color: #fff;
+  width: 50px;
+  height: 22px;
+  border-radius: 5px;
+  text-align: center;
+  line-height: 22px;
+  margin-right: 10px;
+}
+
+.contentBox {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  height: 253px;
+}
+
+.left_top {
+  width: 45%;
+  padding-left: 20px;
+}
+
+.right_top {
+  width: 53%;
+}
+
+.cBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+
+.right_score {
+  min-width: 370px;
+  height: 351px;
+  margin-left: 10px;
+  width: 40%;
+}
+
+.pb_left {
+  width: 20%;
+  margin-right: 10px;
+  background: rgb(255, 255, 255);
+  /* padding-right: 10px; */
+  height: 100%;
+}
+
+.cTitle {
+  background: #634fa4;
+  width: 85%;
+  margin: 10px auto;
+  height: 50px;
+  color: #fff;
+  line-height: 50px;
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  border-radius: 5px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 10px;
+}
+
+.ml {
+  margin-left: 20px;
+  color: #5b7dba;
+  border-left: 3px solid #5b7dba;
+  padding-left: 5px;
+  font-weight: bold;
+}
+
+.cru_selectBox {
+  width: 100%;
+  margin: 0 auto;
+  overflow: auto;
+  height: 400px;
+  overflow-x: hidden;
+}
+
+.cru_selectBox::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.cru_selectBox::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background-color: #b8bdc9;
+}
+
+/*定义滑块 内阴影+圆角*/
+.cru_selectBox::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgb(96, 125, 184);
+  background-color: #2c5ab3;
+}
+
+.blue_box_one {
+  text-align: center;
+  color: #fff;
+  background-image: linear-gradient(90deg, #7960d5, #65b9fc);
+  border-radius: 7px;
+  margin: 10px auto;
+  cursor: pointer;
+  width: 95%;
+  height: 45px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.blue_box_one>div:nth-child(1) {
+  line-height: 30px;
+  margin: 0 5px 0 10px;
+  width: 30%;
+  min-width: 70px;
+  border-radius: 4px;
+}
+
+.blue_box_one>div:nth-child(2) {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  width: 70%;
+  text-align: left;
+  margin-right: 10px;
+  max-width: calc(100% - 85px);
+}
+
+.blue_box_one>div:nth-child(2):hover {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.twoChild {
+  width: 95%;
+  margin: 10px auto;
+  border-radius: 5px;
+  background: #f2f2f2;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  transition: all 0.5s;
+  overflow: hidden;
+  height: 0;
+  background: #e7f3ff;
+}
+
+.twoChild>div:nth-child(1) {
+  margin-top: 5px;
+}
+
+.navChild {
+  width: 100%;
+  cursor: pointer;
+  margin-bottom: 10px;
+}
+
+.navActive {
+  height: auto;
+}
+
+.navTask {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  align-content: flex-start;
+  height: 40px;
+  justify-content: flex-start;
+  padding: 0 10px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.vedioNav {
+  margin: 10px 0 0 15px;
+  /* border-bottom: 1px solid #d7d7d7; */
+  padding-bottom: 5px;
+  background: #b7aadf;
+  width: 55px;
+  min-width: 55px;
+  border-radius: 5px;
+  color: #fff;
+  text-align: center;
+  height: 20px;
+  line-height: 26px;
+  font-size: 14px;
+}
+
+.navTaskname {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  padding-left: 5px;
+}
+
+.allBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.shuBox {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 100%;
+  flex-wrap: nowrap;
+  height: 100%;
+  overflow: auto;
+}
+
+.answerbox {
+  display: flex;
+  flex-direction: row;
+  /* align-items: center; */
+  margin-bottom: 20px;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.answerbox>div:nth-child(2) {
+  margin-left: 15px;
+}
+
+.answerbox1 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  font-size: 16px;
+}
+
+.answerbox1>div:nth-child(2) {
+  margin-top: 10px;
+  width: 265px;
+  max-height: 147px;
+  overflow: auto;
+}
+
+.jdName {
+  width: 100%;
+}
+
+.full_diy>>>.el-dialog {
+  margin: 0 !important;
+  height: 100%;
+}
+
+.full_diy>>>.el-dialog__body {
+  height: calc(100% - 100px);
+}
+
+.openTaskActive {
+  color: #8f7fe2;
+}
+
+.isClick {
+  background: #8f7fe2;
+}
+
+.buttonCss {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  margin: 10px 0;
+}
+
+.fullStyle>>>.el-dialog__body {
+  height: 100% !important;
+  overflow: auto;
+}
+
+.fullStyle>>>.el-dialog,
+.fullStyle {
+  width: 100% !important;
+  max-width: 100% !important;
+  height: 100% !important;
+  margin: 0 !important;
+}
+
+.worksTime {
+  position: absolute;
+  top: 10px;
+  right: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: baseline;
+}
+
+.fullBox {
+  overflow: unset !important;
+  height: auto !important;
+}
+
+.fullZyBox {
+  width: 60% !important;
+}
+
+.rightScoreFullBox {
+  width: 40%;
+}
+
+.cancel_button:focus,
+.cancel_button:hover {
+  color: rgb(92, 84, 159);
+  border-color: #5c549f;
+  background-color: #dbd7ff;
+}
+</style>

src/components/pages/course.vue

@@ -314,49 +314,25 @@ export default {
     },
     goToCourse(courseId) {
       if (courseId) {
-        if (this.org == "eb2af5e9-ac3d-46b6-9fe3-3c1c364f0217") {
-          this.$router.push(
-            "/course/addCourse2?cid=" +
-              courseId +
-              "&userid=" +
-              this.userid +
-              "&oid=" +
-              this.oid +
-              "&org=" +
-              this.org
-          );
-        } else {
-          this.$router.push(
-            "/course/addCourse?cid=" +
-              courseId +
-              "&userid=" +
-              this.userid +
-              "&oid=" +
-              this.oid +
-              "&org=" +
-              this.org
-          );
-        }
+        this.$router.push(
+          "/course/addCourse?cid=" +
+            courseId +
+            "&userid=" +
+            this.userid +
+            "&oid=" +
+            this.oid +
+            "&org=" +
+            this.org
+        );
       } else {
-        if (this.org == "eb2af5e9-ac3d-46b6-9fe3-3c1c364f0217") {
-          this.$router.push(
-            "/course/addCourse2?userid=" +
-              this.userid +
-              "&oid=" +
-              this.oid +
-              "&org=" +
-              this.org
-          );
-        } else {
-          this.$router.push(
-            "/course/addCourse?userid=" +
-              this.userid +
-              "&oid=" +
-              this.oid +
-              "&org=" +
-              this.org
-          );
-        }
+        this.$router.push(
+          "/course/addCourse?userid=" +
+            this.userid +
+            "&oid=" +
+            this.oid +
+            "&org=" +
+            this.org
+        );
       }
       // this.$router.push(path);
     },

src/components/pages/courseGM.vue

@@ -0,0 +1,1116 @@
+<template>
+  <div class="pb_content" style="height: auto">
+    <div class="pb_head top">
+      <div>
+        <span>项目管理</span>
+        <span
+          class="subClick"
+          @click="
+            goTo('/worksGM?userid=' + userid + '&oid=' + oid + '&org=' + org)
+          "
+          >评价管理</span
+        >
+      </div>
+      <div class="student_button">
+        <el-button type="primary" class="bgColor" @click="openCourse"
+          >协同编辑</el-button
+        >
+        <el-button type="primary" class="bgColor" @click="goToCourse()"
+          >添加项目</el-button
+        >
+      </div>
+    </div>
+    <div class="pb_content_body" style="height: 100%">
+      <div class="student_head">
+        <div class="choose">
+          <div class="student_search">
+            <span>项目筛选</span>
+            <el-select v-model="groupA" @change="search">
+              <el-option value="0" label="我的项目"></el-option>
+              <el-option value="1" label="他人项目"></el-option>
+            </el-select>
+          </div>
+          <div
+            class="all_choose"
+            v-for="(item, index) in CourseType[0]"
+            :key="index"
+          >
+            <span>{{ item.name }}</span>
+            <el-select
+              v-model="courseTypeId[item.id]"
+              placeholder="请选择"
+              @change="getTypeName"
+            >
+              <el-option label="全部" value="1">全部</el-option>
+              <el-option
+                v-for="item1 in CourseTypeJson[item.id]"
+                :key="item1.id"
+                :label="item1.name"
+                :value="item1.id"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div @click="clear" class="clear">重置</div>
+        </div>
+
+        <div class="student_right">
+          <div class="head_left">
+            <el-input
+              v-model="courseName"
+              class="student_input"
+              placeholder="请输入项目名称"
+            ></el-input>
+            <el-button class="course_button" @click="searchCourse"
+              >查询</el-button
+            >
+          </div>
+        </div>
+      </div>
+      <div class="student_table">
+        <div class="course_box">
+          <div class="out_box" v-for="(item, index) in course" :key="index">
+            <div class="myCourse" v-if="item.isCourseType == 1 && groupA == 0">
+              我的项目
+            </div>
+            <div
+              class="myCourse"
+              v-else-if="item.isCourseType == 1 && groupA == 1"
+            >
+              他人项目
+            </div>
+            <div class="xtCourse" v-else>协同项目</div>
+            <div class="tup">
+              <img
+                :src="
+                  item.cover != null && item.cover != ''
+                    ? JSON.parse(item.cover).length > 0
+                      ? JSON.parse(item.cover)[0].url
+                      : mr
+                    : mr
+                "
+                alt
+              />
+            </div>
+            <!-- <div class="bottom_box">
+              <div>{{ item.title }}</div>
+              <div class="kc_t" v-if="groupA == '1'">
+                创建老师：{{ item.uname }}
+              </div>
+              <div class="kc_time">{{ item.time }}</div>
+            </div> -->
+            <div class="bottom_box">
+              <div>{{ item.title }}</div>
+              <div class="kc_t" v-if="item.isCourseType == 2 || groupA == 1">
+                负责老师：{{ item.uname }}
+              </div>
+              <div class="kc_time">
+                <span style="color: #4b4b4b">创建日期:</span>{{ item.time }}
+              </div>
+              <div class="kc_time">
+                <span style="color: #4b4b4b">修改日期:</span>{{ item.utime }}
+              </div>
+            </div>
+            <div class="three_bottom">
+              <div @click="jump(item.courseId)">评课</div>
+              <div v-if="groupA == '0'" @click="goToCourse(item.courseId)">
+                修改
+              </div>
+              <div
+                v-if="groupA == '0'"
+                @click="
+                  goTo(
+                    '/works?cid=' +
+                      item.courseId +
+                      '&userid=' +
+                      userid +
+                      '&oid=' +
+                      oid +
+                      '&org=' +
+                      org
+                  )
+                "
+              >
+                报告
+              </div>
+              <div v-if="groupA == '0'" @click="deleteCourse(item.courseId)">
+                删除
+              </div>
+            </div>
+          </div>
+          <div class="course_empty" v-if="course.length == 0">暂无数据</div>
+        </div>
+      </div>
+    </div>
+    <div class="student_page">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :page-size="10"
+        :total="total"
+        v-if="page && course.length"
+        style="padding-bottom: 20px"
+        @current-change="handleCurrentChange"
+      ></el-pagination>
+    </div>
+    <el-dialog :visible.sync="dialogVisible1" size="tiny">
+      <img width="100%" :src="dialogImageUrl" alt />
+    </el-dialog>
+    <el-dialog
+      title="查看提问"
+      :visible.sync="dialogVisible"
+      :append-to-body="true"
+      width="750px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <div>
+        <div class="a_addBox">
+          <CourseProblem :problemCourse="problemCourse"></CourseProblem>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">关 闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="查看协同项目"
+      :visible.sync="dialogVisibleCourse"
+      :append-to-body="true"
+      width="850px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <div class="ct_box">
+        <div
+          class="out_box"
+          v-for="(item, index) in courseTeam"
+          :key="index"
+          style="margin-left: 15px"
+        >
+          <div class="tup">
+            <img
+              :src="
+                item.cover != null && item.cover != ''
+                  ? JSON.parse(item.cover).length > 0
+                    ? JSON.parse(item.cover)[0].url
+                    : mr
+                  : mr
+              "
+              alt
+            />
+          </div>
+          <div class="bottom_box">
+            <div>{{ item.title }}</div>
+            <div class="kc_t">创建老师：{{ item.uname }}</div>
+            <div class="kc_time">{{ item.time }}</div>
+          </div>
+          <div class="three_bottom">
+            <div @click="jump(item.courseId)">查看内容</div>
+            <div
+              @click="
+                goTo(
+                  '/course/addCourse?cid=' +
+                    item.courseId +
+                    '&userid=' +
+                    userid +
+                    '&oid=' +
+                    oid +
+                    '&org=' +
+                    org
+                )
+              "
+            >
+              编辑
+            </div>
+          </div>
+        </div>
+        <div class="course_empty" v-if="courseTeam.length == 0">暂无数据</div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisibleCourse = false">关 闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import "../../common/aws-sdk-2.235.1.min";
+import EditorBar from "../../components/tools/wangEnduit";
+import CourseProblem from "./components/courseProblem";
+export default {
+  components: { EditorBar, CourseProblem },
+  data() {
+    return {
+      itemCount: 1,
+      courseTitle: "",
+      courseText: "",
+      courseTime: "",
+      isLoading: false,
+      fileList: [],
+      fileList1: [],
+      homeworkList: [{ name: "" }],
+      formLabelWidth: "100px",
+      dialogVisible: false,
+      dialogVisible1: false,
+      dialogVisibleCourse: false,
+      dialogImageUrl: "",
+      group: "",
+      userid: this.$route.query.userid,
+      oid: this.$route.query.oid,
+      org: this.$route.query.org,
+      Juri: "",
+      groupList: [],
+      JuriList: [],
+      page: 1,
+      total: 0,
+      tableData: [],
+      now: "",
+      courseDetail: {},
+      addCourse: {},
+      groupA: "0",
+      classX: "",
+      course: [],
+      courseName: "",
+      mr: require("../../assets/icon/kc1.png"),
+      CourseType: [],
+      CourseTypeJson: {},
+      courseTypeId: {},
+      courseTypeSon: [],
+      isChoose: 0,
+      problemCourse: null, //查看提问的项目
+      courseTeam: [],
+    };
+  },
+  methods: {
+    change(val) {
+      console.log(val);
+    },
+    time() {
+      if (!this.now) {
+        this.now = new Date().getTime();
+        return true;
+      } else {
+        let time = new Date().getTime();
+        if (time - this.now > 3000) {
+          this.now = time;
+          return true;
+        } else {
+          return false;
+        }
+      }
+    },
+    addHomeworkBox() {
+      this.homeworkList.push({ name: "" });
+      this.itemCount++;
+    },
+    reduceHomeworkBox() {
+      var a = this.homeworkList;
+      a.splice(a.length - 1);
+      this.itemCount--;
+    },
+    goTo(path) {
+      this.$router.push(path);
+    },
+    goToCourse(courseId) {
+      if (courseId) {
+        this.$router.push(
+          "/course/addCourseGM?cid=" +
+            courseId +
+            "&userid=" +
+            this.userid +
+            "&oid=" +
+            this.oid +
+            "&org=" +
+            this.org
+        );
+      } else {
+        this.$router.push(
+          "/course/addCourseGM?userid=" +
+            this.userid +
+            "&oid=" +
+            this.oid +
+            "&org=" +
+            this.org
+        );
+      }
+      // this.$router.push(path);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    jump(cid) {
+      // window.open(
+      //   "//pbl.cocorobo.cn/pbl-student-table/dist/#/courseDetail?courseId=" +
+      //     cid +
+      //     "&userid=" +
+      //     this.userid
+      // );
+      window.parent.postMessage({ cid: cid, screenType: "2" }, "*");
+    },
+    handle_remove(file, fileList) {
+      var _tmp = this.fileList;
+      for (var i = 0, len = _tmp.length; i < len; i++) {
+        if (_tmp[i].uid == file.uid) {
+          _tmp.splice(i, 1);
+          break;
+        }
+        this.fileList = _tmp;
+      }
+    },
+    handle_remove1(file, fileList) {
+      var _tmp = this.fileList1;
+      for (var i = 0, len = _tmp.length; i < len; i++) {
+        if (_tmp[i].uid == file.uid) {
+          _tmp.splice(i, 1);
+          break;
+        }
+        this.fileList1 = _tmp;
+      }
+    },
+    handleCurrentChange(val) {
+      // console.log(`当前页: ${val}`);
+      this.page = val;
+      this.getCourse();
+    },
+    init() {},
+    handleClose(done) {
+      done();
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible1 = true;
+    },
+    onExceed() {
+      this.$message.error("项目海报仅支持上传一张，请删除后再进行上传");
+    },
+    //uuid生成
+    guid() {
+      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+        /[xy]/g,
+        function (c) {
+          var r = (Math.random() * 16) | 0,
+            v = c == "x" ? r : (r & 0x3) | 0x8;
+          return v.toString(16);
+        }
+      );
+    },
+    time() {
+      if (!this.now) {
+        this.now = new Date().getTime();
+        return true;
+      } else {
+        let time = new Date().getTime();
+        if (time - this.now > 3000) {
+          this.now = time;
+          return true;
+        } else {
+          return false;
+        }
+      }
+    },
+    searchCourse() {
+      this.page = 1;
+      this.getCourse();
+    },
+    clear() {
+      for (var i = 0; i < this.CourseType[0].length; i++) {
+        this.courseTypeId[this.CourseType[0][i].id] = "";
+      }
+      this.getCourse();
+    },
+    getCourse() {
+      if (!this.loading) {
+        this.loading = this.openLoading(
+          document.querySelector(".student_table")
+        );
+      }
+      var typeE = [];
+      var typea, typeb, typec, typed;
+      if (this.isChoose == 1) {
+        for (var i = 0; i < this.CourseType[0].length; i++) {
+          if (this.courseTypeId[this.CourseType[0][i].id] == "1") {
+            typeE.push(this.CourseType[0][i].id);
+          } else if (this.courseTypeId[this.CourseType[0][i].id] != "") {
+            if (this.CourseType[0][i].name == "年级") {
+              typea = this.courseTypeId[this.CourseType[0][i].id];
+            } else if (this.CourseType[0][i].name == "专栏") {
+              typeb = this.courseTypeId[this.CourseType[0][i].id];
+            } else if (this.CourseType[0][i].name == "栏目") {
+              typeb = this.courseTypeId[this.CourseType[0][i].id];
+            } else if (this.CourseType[0][i].name == "学院") {
+              typeb = this.courseTypeId[this.CourseType[0][i].id];
+            } else if (this.CourseType[0][i].name == "新技能") {
+              typec = this.courseTypeId[this.CourseType[0][i].id];
+            } else if (this.CourseType[0][i].name == "学科") {
+              typed = this.courseTypeId[this.CourseType[0][i].id];
+            }
+            this.courseTypeSon.push(
+              this.courseTypeId[this.CourseType[0][i].id]
+            );
+          }
+        }
+      }
+      this.isLoading = true;
+      let params = {
+        type: this.groupA,
+        uid: this.userid,
+        oid: this.oid,
+        typea: typea != undefined ? typea : "",
+        typeb: typeb != undefined ? typeb : "",
+        typec: typec != undefined ? typec : "",
+        typed: typed != undefined ? typed : "",
+        typeE: typeE.join(","),
+        cu: "",
+        cn: this.courseName,
+        page: this.page,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectCourseNew2", params)
+        .then((res) => {
+          this.loading.close();
+          this.loading = "";
+          this.isLoading = false;
+          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.course = res.data[0];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    getTypeName() {
+      this.$forceUpdate();
+      this.page = 1;
+      this.isChoose = 1;
+      this.getCourse();
+    },
+    // searchCourse() {
+    //   this.isLoading = true;
+    //   let params = {
+    //     cu: "",
+    //     cn: this.courseName,
+    //     page: this.page,
+    //   };
+    //   this.ajax
+    //     .get(this.$store.state.api + "searchCourse", params)
+    //     .then((res) => {
+    //       this.isLoading = false;
+    //       this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+    //       this.course = res.data[0];
+    //     })
+    //     .catch((err) => {
+    //       this.isLoading = false;
+    //       console.error(err);
+    //     });
+    // },
+    deleteCourse(cid) {
+      const loading = this.openLoading(
+        document.querySelector(".student_table")
+      );
+      this.isLoading = true;
+      if (this.time()) {
+        this.$confirm("确定删除此项目吗?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            let params = {
+              cid: cid,
+            };
+            this.ajax
+              .get(this.$store.state.api + "deleteCourse", params)
+              .then((res) => {
+                loading.close();
+                this.isLoading = false;
+                this.$message.success("删除成功");
+                this.getCourse();
+              })
+              .catch((err) => {
+                console.error(err);
+              });
+          })
+          .catch(() => {
+            loading.close();
+            this.isLoading = false;
+            return;
+          });
+      }
+    },
+    selectType() {
+      this.ajax
+        .get(this.$store.state.api + "selectType")
+        .then((res) => {
+          this.CourseType = res.data;
+          for (var i = 0; i < res.data[0].length; i++) {
+            if (!this.cid) {
+              this.courseTypeId[res.data[0][i].id] = "";
+            }
+            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
+              if (res.data[0][i].name == "栏目") {
+                this.CourseType[0][i].name = "主题";
+              }
+            }
+            for (var j = 0; j < res.data[1].length; j++) {
+              if (res.data[0][i].id == res.data[1][j].pid) {
+                if (!this.CourseTypeJson[res.data[0][i].id]) {
+                  this.CourseTypeJson[res.data[0][i].id] = [];
+                }
+                this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
+              }
+            }
+          }
+          this.selectTypeByOid();
+          this.selectTypeByOrg();
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    selectTypeByOid() {
+      let params = {
+        oid: this.oid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectTypeByOid", params)
+        .then((res) => {
+          for (var i = 0; i < res.data[0].length; i++) {
+            for (var j = 0; j < res.data[1].length; j++) {
+              if (res.data[0][i].id == res.data[1][j].pid) {
+                if (!this.CourseTypeJson[res.data[0][i].id]) {
+                  this.CourseTypeJson[res.data[0][i].id] = [];
+                }
+                this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
+              }
+            }
+          }
+          this.$forceUpdate();
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    selectTypeByOrg() {
+      let params = {
+        oid: this.org,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectTypeByOrg", params)
+        .then((res) => {
+          for (var i = 0; i < res.data[0].length; i++) {
+            for (var j = 0; j < res.data[1].length; j++) {
+              if (res.data[0][i].id == res.data[1][j].pid) {
+                if (!this.CourseTypeJson[res.data[0][i].id]) {
+                  this.CourseTypeJson[res.data[0][i].id] = [];
+                }
+                this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
+              }
+            }
+          }
+          this.$forceUpdate();
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    openCourse() {
+      this.dialogVisibleCourse = true;
+      this.getTeamCourse();
+    },
+    getTeamCourse() {
+      let params = {
+        uid: this.userid,
+        oid: this.oid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectCourseTeam", params)
+        .then((res) => {
+          this.courseTeam = res.data[0];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    search() {
+      this.page = 1;
+      this.getCourse();
+    },
+    checkProblem(res) {
+      this.problemCourse = res;
+      this.dialogVisible = true;
+    },
+  },
+  created() {
+    this.page = 1;
+    this.selectType();
+    this.getCourse();
+  },
+};
+</script>
+
+<style scoped>
+.dialog_diy >>> .el-dialog__header {
+  background: #3d67bc !important;
+  padding: 15px 20px;
+}
+
+.dialog_diy >>> .el-dialog__title {
+  color: #fff;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn {
+  top: 19px;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+
+.student_head >>> .el-button--primary {
+  background-color: #2268bc;
+}
+
+.xls_button {
+  font-size: 14px;
+  cursor: pointer;
+  text-decoration: underline;
+  color: rgb(34, 104, 188);
+}
+
+.student_head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+
+.bgColor {
+  background: #8681b7;
+  border-color: #8681b7;
+}
+
+.student_search {
+  display: flex;
+  align-items: center;
+  width: calc(100% / 3);
+}
+
+.student_search span {
+  margin: 0 10px 0 0;
+  min-width: 65px;
+}
+
+.student_button {
+  display: flex;
+  overflow: hidden;
+  height: 40px;
+}
+
+.upload-demo {
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  /* position: relative; */
+  width: 100px;
+  overflow: hidden;
+}
+
+.student_table {
+  padding: 20px 0;
+  height: 100%;
+  overflow: auto;
+}
+
+.student_empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.el-table >>> .even_row {
+  background-color: #f1f1f1;
+}
+
+.time {
+  font-size: 13px;
+  color: #999;
+}
+
+.course_button {
+  padding: 10px 20px;
+}
+
+.course_button_box {
+  display: flex;
+  margin-top: 5px;
+  justify-content: space-between;
+}
+
+.course_rate {
+  margin-top: 5px;
+}
+
+.course_view {
+  display: flex;
+  align-items: center;
+  margin: 5px 0 0 0;
+}
+
+.course_view i {
+  background-image: url("../../assets/liulan.png");
+  width: 25px;
+  height: 25px;
+  background-size: 100% 100%;
+  /* margin-top: 1px; */
+  line-height: 25px;
+  vertical-align: text-top;
+  background-repeat: no-repeat;
+}
+
+.image {
+  width: 100%;
+  height: 150px;
+  display: block;
+}
+
+.course_box {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.student_page {
+  width: 95%;
+  margin: 0 auto;
+}
+
+.course_create_box {
+  font-size: 18px;
+}
+
+.course_name {
+  margin-top: 10px;
+}
+
+.course_name span {
+  margin-bottom: 10px;
+  display: block;
+}
+
+.homework_box {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.course_homework {
+  width: 130px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 10px 10px 0;
+}
+
+.course_type {
+  margin-top: 10px;
+  display: flex;
+}
+
+.course_type1 span {
+  margin-bottom: 10px;
+  display: block;
+}
+
+.course_type2 {
+  margin-left: 20px;
+}
+
+.course_type2 span {
+  margin-bottom: 10px;
+  display: block;
+}
+
+.course_empty {
+  color: rgb(110, 110, 110);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.el_cards >>> .el-card__body {
+  height: 100%;
+}
+
+.courseBtnBox {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100% - 170px);
+  padding: 10px;
+}
+
+.wordUpload {
+  display: flex;
+}
+
+.wordUpload > .buttonUp {
+  margin-right: 5px;
+}
+
+.out_box {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  width: 250px;
+  background: #fff;
+  margin-right: 25px;
+  border: 1px solid #ccc;
+  height: fit-content;
+  box-sizing: border-box;
+  border-radius: 0px 0px 5px 5px;
+  overflow: hidden;
+  margin-bottom: 15px;
+  position: relative;
+}
+
+.bottom_box {
+  display: flex;
+  padding: 10px 0 10px 10px;
+  flex-direction: column;
+  box-sizing: border-box;
+  height: 121px;
+  flex-wrap: nowrap;
+  justify-content: space-evenly;
+}
+
+.bottom_box > div:nth-child(1) {
+  width: 230px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tup {
+  width: 100%;
+  height: 141.06px;
+  margin: 0 auto;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.tup > img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.kc_time {
+  margin-top: 8px;
+  font-size: 14px;
+  color: #999;
+}
+
+.kc_t {
+  margin-top: 5px;
+}
+
+.three_bottom {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  height: 40px;
+  align-items: center;
+  background: #f5f4f4;
+  font-size: 14px;
+}
+
+.three_bottom > div {
+  cursor: pointer;
+}
+
+.three_bottom > div:hover {
+  color: #79a2ff;
+}
+
+.head_left {
+  display: flex;
+}
+
+.student_input >>> .el-input__inner {
+  height: 40px;
+  width: 190px;
+  font-size: 13px;
+  padding: 0 10px;
+}
+
+.course_button {
+  color: #fff;
+  background: #8681b7;
+  width: 75px;
+  height: 40px;
+  padding: 0 !important;
+  font-size: 12px;
+  line-height: 40px;
+}
+
+.all_choose {
+  margin: 15px 0 10px;
+  height: 20%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: calc(100% / 3);
+}
+
+.all_choose > span {
+  width: 50px;
+  display: block;
+}
+
+.choose {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: space-between;
+  height: 100%;
+  justify-content: flex-start;
+  width: 60%;
+  min-width: 868px;
+  align-items: center;
+}
+
+.choose > div:nth-child(2) {
+  margin-left: 1%;
+  width: 32.33333%;
+}
+
+.choose > div:nth-child(4) {
+  margin-right: 1%;
+  width: 32.33333%;
+}
+
+.choose > div:nth-child(5) {
+  margin: 5px 0 0 1%;
+}
+
+.choose > div:nth-child(4) > span {
+  width: 74px !important;
+  min-width: 74px;
+}
+
+.choose > div:nth-child(4) >>> .el-select {
+  width: 217.5px;
+  min-width: 215.06px;
+}
+
+.clear {
+  width: 70px;
+  height: 35px;
+  background: #8681b7;
+  color: #fff;
+  text-align: center;
+  border-radius: 5px;
+  line-height: 35px;
+  cursor: pointer;
+  margin-left: 20px;
+}
+
+.ct_box {
+  height: 500px;
+  overflow: auto;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.myCourse {
+  position: absolute;
+  background: #3c3c3c;
+  width: 70px;
+  height: 30px;
+  border-radius: 30px;
+  color: #fff;
+  font-size: 14px;
+  text-align: center;
+  line-height: 30px;
+  top: 5px;
+  left: 5px;
+}
+
+.xtCourse {
+  position: absolute;
+  background: #41a5f0;
+  width: 70px;
+  height: 30px;
+  border-radius: 30px;
+  color: #fff;
+  font-size: 14px;
+  text-align: center;
+  line-height: 30px;
+  top: 5px;
+  left: 5px;
+}
+
+.subClick {
+  font-size: 16px;
+  cursor: pointer;
+  margin-left: 10px;
+  /* color: #ab582f; */
+  color: #5c549f;
+}
+
+.student_page
+  >>> .el-pagination.is-background
+  .el-pager
+  li:not(.disabled).active {
+  background-color: #5c549f;
+}
+.student_page
+  >>> .el-pagination.is-background
+  .el-pager
+  li:not(.disabled):hover {
+  color: #5c549f;
+}
+
+.student_search >>> .el-select .el-input.is-focus .el-input__inner {
+  border-color: #5c549f;
+}
+.student_search >>> .el-select .el-input__inner:focus {
+  border-color: #5c549f;
+}
+.el-select-dropdown__item.selected {
+  color: #5c549f;
+}
+
+.student_input.is-active >>> .el-input__inner,
+.student_input  >>> .el-input__inner:focus {
+  border-color: #5c549f;
+}
+
+.all_choose >>> .el-select .el-input.is-focus .el-input__inner {
+  border-color: #5c549f;
+}
+.all_choose >>> .el-select .el-input__inner:focus {
+  border-color: #5c549f;
+}
+
+</style>

src/components/pages/worksGM.vue

@@ -0,0 +1,642 @@
+<template>
+  <div
+    class="pb_content"
+    style="
+      background: unset;
+      overflow: auto;
+      padding: 20px;
+      margin: 0;
+      box-sizing: border-box;
+    "
+  >
+    <div
+      style="
+        position: absolute;
+        width: 95%;
+        top: 0;
+        height: 100%;
+        overflow: auto;
+        left: 50%;
+        transform: translateX(-50%);
+      "
+    >
+      <div
+        class="pb_content_body"
+        style="
+          background: #fff;
+          padding: 0px 25px;
+          box-sizing: border-box;
+          margin: 10px auto 0;
+        "
+      >
+        <div class="pb_head">
+          <span>评价管理</span>
+          <!-- <span>备注：教师可以根据课程、班级条件筛选学生并查看该学生信息</span> -->
+          <span
+            @click="
+              goTo('/courseGM?userid=' + userid + '&oid=' + oid + '&org=' + org)
+            "
+            >项目管理</span
+          >
+        </div>
+        <div class="student_head">
+          <div class="student_search">
+            <div>项目筛选</div>
+            <el-select v-model="groupA" @change="search">
+              <el-option value="0" label="我的课程"></el-option>
+              <el-option value="1" label="他人课程"></el-option>
+            </el-select>
+            <el-input
+              v-model="cn"
+              placeholder="筛选项目名称"
+              @input="search"
+            ></el-input>
+          </div>
+        </div>
+      </div>
+      <div class="pb_content_body" style="margin:0px auto">
+        <div class="student_table">
+          <el-table
+            ref="table"
+            :data="tableData1"
+            border
+            :height="tableHeight"
+            :fit="true"
+            v-loading="isLoading"
+            style="width: 100%"
+            :header-cell-style="{ background: '#f1f1f1', fontSize: '17px' }"
+            :row-class-name="tableRowClassName"
+          >
+            <el-table-column
+              prop="title"
+              label="项目"
+              min-width="30"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="uname"
+              label="创建人"
+              min-width="30"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="time"
+              label="时间"
+              min-width="20"
+              align="center"
+            ></el-table-column>
+            <el-table-column label="操作" min-width="30">
+              <template slot-scope="scope">
+                <!-- <el-button
+                type="primary"
+                size="small"
+                @click="
+                  goTo(
+                    '/worksDetail?cid=' +
+                      scope.row.courseId +
+                      '&userid=' +
+                      userid +
+                      '&oid=' +
+                      oid
+                  )
+                "
+                >查看学生</el-button>-->
+                <!-- <el-button type="primary" size="small" @click="getWorkData(scope.row)">生成报告</el-button> -->
+                <el-button
+                  type="primary"
+                  size="small"
+                  class="btnClass"
+                  @click="getWorkData(scope.row)"
+                  >查看课程</el-button
+                >
+                <el-button
+                  type="primary"
+                  size="small"
+                  class="btnClass"
+                  @click="getStudnet(scope.row)"
+                  >查看报告</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="student_page">
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :page-size="10"
+            :total="total"
+            v-if="page"
+            @current-change="handleCurrentChange"
+          ></el-pagination>
+        </div>
+      </div>
+    </div>
+    <!-- <el-dialog
+      title="查看报告"
+      :visible.sync="dialogVisible"
+      :append-to-body="true"
+      width="750px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <div>
+        <div class="a_addBox">
+          <WorkDate :dataJson="dataJson"></WorkDate>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">关 闭</el-button>
+      </span>
+    </el-dialog>-->
+    <WorkDate
+      :dataJson="dataJson"
+      :uid="userid"
+      :cid="dataJson.courseId"
+      :ooid="oid"
+      v-if="dialogVisible"
+      class="workdates"
+    ></WorkDate>
+    <div class="cancelbox" v-if="dialogVisible">
+      <el-button @click="dialogVisibleBao = true" type="primary" size="small" class="btnClass"
+        >自定义导出</el-button
+      >
+      <el-button @click="cancel" type="primary" size="small" class="btnClass">返回</el-button>
+      <!-- <el-button
+        type="primary"
+        size="small"
+        @click="
+          goTo(
+            '/worksDetail?cid=' +
+              dataJson.courseId +
+              '&userid=' +
+              userid +
+              '&oid=' +
+              oid
+          )
+        "
+        >查看作业</el-button
+      >-->
+    </div>
+    <el-dialog
+      title="自定义导出报告"
+      :visible.sync="dialogVisibleBao"
+      :append-to-body="true"
+      width="550px"
+      :before-close="handleClose"
+      class="dialog_diy r_diy"
+    >
+      <div>
+        <div>
+          <Report :cid="dataJson.courseId"></Report>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer"> </span>
+    </el-dialog>
+    <el-dialog
+      title="选择学生"
+      :visible.sync="signDialog"
+      width="500px"
+      :before-close="handleClose"
+      class="dialog_diy check_diy"
+    >
+      <div>
+        <div class="student_search" style="margin-bottom: 10px">
+          <div>筛选</div>
+          <div style="display: flex; width: 90%">
+            <el-select
+              class="r_select"
+              v-model="uname"
+              placeholder="请选择学生"
+              filterable
+              @change="searchWork2"
+            >
+              <el-option label="所有学生" value></el-option>
+              <el-option
+                v-for="item in userAarray"
+                :key="item.userid"
+                :label="item.username"
+                :value="item.userid"
+              ></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div>
+          <el-table
+            v-loading="isLoading2"
+            ref="table"
+            :data="res2"
+            border
+            :height="400"
+            :fit="true"
+            style="width: 100%"
+            :row-class-name="tableRowClassName"
+            :header-cell-style="{ background: 'rgb(238,238,238)' }"
+          >
+            <el-table-column
+              prop="sName"
+              label="姓名"
+              min-width="20"
+            ></el-table-column>
+            <el-table-column label="操作" min-width="20">
+              <template slot-scope="scope">
+                <el-button
+                  type="primary"
+                  size="small"
+                  class="btnClass"
+                  @click="getReport(scope.row)"
+                  >查看报告</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+          <div style="margin-top: 10px" class="student_page">
+            <el-pagination
+              background
+              layout="prev, pager, next"
+              :page-size="10"
+              :total="total2"
+              @current-change="handleCurrentChange2"
+            ></el-pagination>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="signDialog = false" class="cancel_button"
+          >关闭</el-button
+        >
+      </span>
+    </el-dialog>
+    <div class="report_box" v-if="reportVisible">
+      <studentReport
+        :checkCourse="checkCourse"
+        :checkStudent="checkStudent"
+        :oid="oid"
+      ></studentReport>
+    </div>
+    <div class="cancelbox" v-if="reportVisible">
+      <el-button @click="cancelR" type="primary" size="small" class="btnClass">返回</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import WorkDate from "./components/workDataGM";
+import Report from "./components/reportGM";
+import studentReport from "./components/studentReportGM";
+export default {
+  components: {
+    WorkDate,
+    Report,
+    studentReport,
+  },
+  data() {
+    return {
+      tableHeight: "500px",
+      isLoading: false,
+      formLabelWidth: "100px",
+      tableData1: [],
+      subject: "",
+      sClass: "",
+      subjectJuri: [],
+      projectJuri: [],
+      grade: [],
+      projectchoose: "",
+      page: 1,
+      total: 0,
+      groupA: "0",
+      cn: "",
+      userid: this.$route.query.userid,
+      org: this.$route.query.org,
+      oid: this.$route.query.oid,
+      dialogVisible: false,
+      dialogVisibleBao: false,
+      dataJson: {},
+      signDialog: false,
+      isLoading2: false,
+      page2: 1,
+      total2: 0,
+      res2: [],
+      checkCourse: "",
+      reportVisible: false,
+      checkStudent: "",
+      userAarray: [],
+      uname: "",
+    };
+  },
+  mounted() {
+    this.$nextTick(function () {
+      this.tableHeight =
+        window.innerHeight - this.$refs.table.$el.offsetTop - 200;
+      if (this.tableHeight <= 530) {
+        this.tableHeight = 530;
+      }
+      // 监听窗口大小变化
+      let self = this;
+      window.onresize = function () {
+        self.tableHeight =
+          window.innerHeight - self.$refs.table.$el.offsetTop - 200;
+        if (self.tableHeight <= 530) {
+          self.tableHeight = 530;
+        }
+      };
+    });
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    handleClose(done) {
+      done();
+    },
+    handleCurrentChange(val) {
+      this.page = val;
+      this.getProject();
+    },
+    handleCurrentChange2(val) {
+      this.page2 = val;
+      this.getStudnet();
+    },
+    //获取班级列表
+    getClass() {
+      this.isLoading = true;
+      let params = {
+        cu: "",
+        cn: this.sClass,
+        page: this.page,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectClass", params)
+        .then((res) => {
+          this.isLoading = false;
+          this.grade = res.data[0];
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    getProject() {
+      this.isLoading = true;
+      let params = {
+        type: this.groupA,
+        uid: this.userid,
+        oid: this.oid,
+        cn: this.cn,
+        page: this.page,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getProject", params)
+        .then((res) => {
+          this.isLoading = false;
+          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.tableData1 = res.data[0];
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    search() {
+      this.page = 1;
+      this.getProject();
+    },
+    getWorkData(res) {
+      this.dataJson = res;
+      this.dialogVisible = true;
+    },
+    cancel() {
+      this.dataJson = "";
+      this.dialogVisible = false;
+    },
+    cancelR() {
+      this.checkStudent = "";
+      this.reportVisible = false;
+      this.signDialog = true;
+    },
+    searchWork2() {
+      (this.page2 = 1), this.getStudnet();
+    },
+    getStudnet(row) {
+      //获取作业
+      this.signDialog = true;
+      this.isLoading2 = true;
+      this.checkCourse = row ? row.courseId : this.checkCourse;
+      let params = {
+        cid: this.checkCourse,
+        uname: this.uname,
+        stage: "",
+        task: "",
+        page: this.page2,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getCourseWorks3", params)
+        .then((res) => {
+          this.isLoading2 = false;
+          this.total2 = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.res2 = res.data[0];
+          this.getCourseDetail();
+        })
+        .catch((err) => {
+          this.isLoading2 = false;
+          console.error(err);
+        });
+    },
+    getCourseDetail() {
+      let params = {
+        cid: this.checkCourse,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getCourseWorksReport", params)
+        .then((res) => {
+          this.userAarray = res.data[1];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    getReport(row) {
+      this.checkStudent = row.userid;
+      this.reportVisible = true;
+      this.signDialog = false;
+    },
+  },
+  created() {
+    this.page = 1;
+    // this.getClass();
+    // this.getGroup();
+    this.getProject();
+  },
+};
+</script>
+
+<style scoped>
+.pb_head > span:nth-child(2) {
+  font-size: 16px;
+  cursor: pointer;
+  margin-left: 10px;
+  /* color: #ab582f; */
+  color: #5c549f;
+}
+.pb_head {
+  margin: 0 !important;
+  width: 100% !important;
+}
+.student_page {
+  margin-top: 10px;
+}
+.student_head {
+  margin-top: 10px;
+  padding-bottom: 15px;
+  display: flex;
+  justify-content: space-between;
+}
+.student_search {
+  display: flex;
+}
+.student_search > div:nth-child(1) {
+  line-height: 35px;
+  font-size: 14px;
+  min-width: 60px;
+}
+.student_search >>> .el-input__inner {
+  width: 190px;
+  height: 35px;
+  margin-left: 10px;
+}
+.student_table >>> .el-table--border td {
+  border-right: 0px !important;
+}
+
+.student_page {
+  margin-top: 10px;
+}
+
+.student_table >>> .el-table,
+.student_table >>> .el-table__body-wrapper {
+  height: auto !important;
+}
+
+.el-table >>> .even_row {
+  background-color: #f1f1f1 !important;
+}
+
+.dialog_diy >>> .el-dialog__header {
+  padding: 9px 20px 10px;
+  background: #32455b !important;
+}
+.dialog_diy >>> .el-dialog__title {
+  color: #fff;
+  font-size: 15px;
+}
+.dialog_diy >>> .el-dialog__headerbtn {
+  top: 14px;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+.check_diy >>> .el-dialog__body {
+  padding-bottom: 0;
+}
+.dialog_diy >>> .el-dialog__body,
+.dialog_diy >>> .el-dialog__footer {
+  background: #fafafa;
+}
+.r_diy >>> .el-dialog__footer {
+  padding: 0;
+}
+.a_addBox {
+  height: 570px;
+  overflow: auto;
+}
+
+.workdates {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  background: #fff;
+  overflow: auto;
+  z-index: 1;
+  width: 95%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 20px;
+  box-sizing: border-box;
+}
+.cancelbox {
+  position: absolute;
+  z-index: 2;
+  left: 50%;
+  width: 95%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 90px 0px 0px;
+  box-sizing: border-box;
+}
+
+.report_box {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  /* background: #fff; */
+  background: rgb(231, 242, 252);
+  overflow: auto;
+  z-index: 1;
+  width: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.student_page
+  >>> .el-pagination.is-background
+  .el-pager
+  li:not(.disabled).active {
+  background-color: #5c549f;
+}
+.student_page
+  >>> .el-pagination.is-background
+  .el-pager
+  li:not(.disabled):hover {
+  color: #5c549f;
+}
+
+.student_search >>> .el-select .el-input.is-focus .el-input__inner {
+  border-color: #5c549f;
+}
+.student_search >>> .el-select .el-input__inner:focus {
+  border-color: #5c549f;
+}
+.el-select-dropdown__item.selected {
+  color: #5c549f;
+}
+
+.student_search.is-active >>> .el-input__inner,
+.student_search >>> .el-input__inner:focus {
+  border-color: #5c549f;
+}
+
+.btnClass {
+  background: #8681b7;
+  border-color: #8681b7;
+}
+
+.cancel_button:focus,
+.cancel_button:hover {
+  color: rgb(92, 84, 159);
+  border-color: #5c549f;
+  background-color: #dbd7ff;
+}
+</style>

src/router/index.js

@@ -4,16 +4,18 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import classA from '@/components/pages/class'
 import course from '@/components/pages/course'
+import courseGM from '@/components/pages/courseGM'
 import courseDetail from '@/components/pages/courseDetail'
 import data from '@/components/pages/data'
 import notice from '@/components/pages/notice'
 import student from '@/components/pages/student'
 import works from '@/components/pages/works'
+import worksGM from '@/components/pages/worksGM'
 import worksDetail from '@/components/pages/worksDetail'
 import login from '@/components/login'
 import ask from '@/components/pages/ask'
 import addCourse from '@/components/pages/addCourse'
-import addCourse2 from '@/components/pages/addCourse2'
+import addCourseGM from '@/components/pages/addCourseGM'
 import library from '@/components/pages/library'
 import note from '@/components/pages/note'
 import Grid from '@/components/pages/Grid'
@@ -58,6 +60,13 @@ export default new Router({
                 requireAuth: '' // 是否需要判断是否登录,这里是需要判断
             }
         },
+        {
+            path: '/courseGM',
+            component: courseGM,
+            meta: {
+                requireAuth: '' // 是否需要判断是否登录,这里是需要判断
+            }
+        },
         {
             path: '/course/courseDetail',
             component: courseDetail,
@@ -73,8 +82,8 @@ export default new Router({
             }
         },
         {
-            path: '/course/addCourse2',
-            component: addCourse2,
+            path: '/course/addCourseGM',
+            component: addCourseGM,
             meta: {
                 requireAuth: '' // 是否需要判断是否登录,这里是需要判断
             }
@@ -125,6 +134,14 @@ export default new Router({
                 requireAuth: '' // 是否需要判断是否登录,这里是需要判断
             }
         },
+        {
+            path: '/worksGM',
+            name: 'worksGM',
+            component: worksGM,
+            meta: {
+                requireAuth: '' // 是否需要判断是否登录,这里是需要判断
+            }
+        },
         {
             path: '/worksDetail',
             name: 'worksDetail',