pbl-teacher-table/src/components/pages/components/worksDetail2.vue

<template>
  <div class="pb_content" style="background: unset">
    <div
      class="pb_content_body"
      style="
        background: #fff;
        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="choseClass"
              placeholder="请选择班级"
							@change="changeClass"

            >
              <el-option label="所有班级" value></el-option>
              <el-option
                v-for="item in classArray"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>

            <el-select
              class="r_select"
              v-model="uname"
              placeholder="请选择学生"
              @change="searchWork2"
							:disabled="studentLoading"
            >
              <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"
              v-if="DState == 1"
            >
              <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"
              v-if="DState == 1 && cutTabNum != 0"
            >
              <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>

            <el-select
              v-model="chooseTask"
              placeholder="请选择任务"
              @change="searchWork2"
               v-if="DState != 1 && cutTabNum != 0"
            >
              <el-option label="所有任务" value></el-option>
              <el-option
                v-for="(item, index) in dyList[0]
                  ? dyList[0].taskList
                  : []"
                :key="index+'a'"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>

            
            <div class="typeCheck">
              <el-switch v-model="typeCheck"></el-switch
              ><span style="font-size: 14px;">查看所有学生</span>
            </div>
          </div>
        </div>
      </div>
    </div>
   <!-- {{ dyList[0] }} -->
    <div class="pb_content_body">
      <div class="cutTab">
        <div :class="[cutTabNum == 0 ? 'ctrlBtn2' : 'ctrlBtn']"  @click="cutTabData(0)">按学生查看</div>
        <!-- <div v-if="DState == 1" :class="[cutTabNum ==1 ? 'ctrlBtn2' : 'ctrlBtn']" @click="cutTabData(1)">按阶段查看</div> -->
        <div :class="[cutTabNum == 2  ? 'ctrlBtn2' : 'ctrlBtn']" @click="cutTabData(2)">按任务查看</div>

      </div>
      <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"
            show-overflow-tooltip
          >
            <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
            v-if="DState == 1 && cutTabNum != 0"
          >
            <template slot-scope="scope">
              <div>
                <div v-if="scope.row.stage < dyList.length">
                 任务:{{ scope.row.stage }} {{ dyList[scope.row.stage].name }}
                </div>

                <!-- {{ dyList.length > 0 ? dyList[!scope.row.stage ? 0 : scope.row.stage ].name : "" }} -->
                <!-- {{ scope.row.stage,dyList }} -->
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="course"
            label="任务"
            min-width="20"
            align="center"
            v-if="cutTabNum != 0"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div>
                <div v-if="scope.row.stage < dyList.length">
                  <div v-if="scope.row.task < dyList[scope.row.stage].taskList.length">
                    {{
                       dyList[scope.row.stage].taskList[scope.row.task].name
                          ? dyList[scope.row.stage].taskList[scope.row.task].name
                          : scope.row.task
                    }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="time"
            label="时间"
            min-width="20"
            align="center" 
          ></el-table-column>
          <el-table-column align="center" label="操作" width="260px">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="
                  lookWork(scope.row.id, scope.row.userid, 0, scope.$index,scope.row)
                "
                >查看&批改</el-button
              >
              <!-- <el-button
                type="primary"
                size="small"
                @click="lookData(scope.row.userid)"
                >生成报告</el-button
              >-->
              <el-button
                type="primary"
                size="small"
                v-if="cutTabNum == 2"
                @click="
                  lookWork2(scope.row,scope.row.id, scope.row.userid, scope.row.courseid)
                "
                >导出作业</el-button
              >
              <el-button
                type="primary"
                size="small"
                v-else
                @click="
                  exportPdfSetBtn(scope.row.userid,scope.row)
                "
                >导出作业集</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 }"
          v-loading="worksLoading"
        >
          <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" ref="reportPdf">
            <div class="courseTitle" v-if="allWorks.course">
              <div class="txName">
                <div class="tx"><img :src="tx" alt="" /></div>
                <div>{{ allWorks.sName }}</div>
                <div>{{ allWorks.course }}</div>
                <el-button
                  type="primary"
                  size="mini"
                  style="margin-left: 15px;"
                  @click="getPdf"
                  >导出作业集</el-button
                >
              </div>

              <div class="topButton" v-if="tableData.length > 1">
                <div>学生切换：</div>
                <el-button @click="preStep" v-if="isPre == false"
                  >上一位</el-button
                >
                <el-button @click="nextStep" v-if="isNext == false"
                  >下一位</el-button
                >
              </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, dyIndex, navIndex)"
                          :class="{
                            openTaskActive:
                              nav.id == taskCount &&
                              dy.id + '-' + nav.id == navId &&
                              dy.id == stageIndex,
                          }"
                        >
                        <!-- :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>
                          <div
                            class="isWorkCss"
                            v-if="nav.isWork && nav.isWork == true"
                          >
                            <img src="../../../assets/icon/isWork.png" alt="" />
                          </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" :id="`${sin.stage}+${sin.task}`">
                      <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
                              type="primary"
                              size="small"
                              @click="
                                openFile2(worksDetail[sIndex].wpptInfo[0])
                              "
                            >
                              查看文档</el-button
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="contentBox">
                      <div class="contentAuto">
                        <!-- :style="{
                            width: worksDetail[sIndex].eList.length
                              ? '95%'
                              : '95%',
                          }" -->
                        <div
                          class="left_top"
                          v-if="worksDetail[sIndex].img.length > 0"
                        >
                          <div
                            v-if="
                              worksDetail[sIndex].img[
                                worksDetail[sIndex].imgIndex
                              ].score
                            "
                            style="float: right; margin-right: 10px"
                          >
                            评分：{{
                              worksDetail[sIndex].img[
                                worksDetail[sIndex].imgIndex
                              ].score
                            }}
                          </div>
                          <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
                                  ? 'isClick'
                                  : ''
                              "
                            >
                              <img
                                :src="item.src"
                                alt
                                @click="worksDetail[sIndex].imgIndex = index"
                              />
                            </div>
                          </div>
                          <div class="work_nopicture" v-else>暂无上传截图</div>
                        </div>
                        <div
                          class="left_top"
                          v-if="worksDetail[sIndex].answerInfo.length > 0"
                        >
                          <div
                            v-if="worksDetail[sIndex].answerInfo[0].score"
                            style="float: right; margin-right: 10px"
                          >
                            评分：{{ worksDetail[sIndex].answerInfo[0].score }}
                          </div>
                          <div
                            class="a_add_title"
                            style="
                              display: flex;
                              flex-direction: row;
                              align-items: center;
                              justify-content: flex-start;
                              flex-wrap: wrap;
                              margin-bottom: 10px;
                            "
                          >
                            <div style="font-size: 16px">问答</div>
                          </div>
                          <div class="answerbox">
                            <div style="min-width: 80px">问答标题</div>
                            <div>
                              {{
                                worksDetail[sIndex].answerInfo[0].answerInfo
                                  .answerTitle
                              }}
                            </div>
                          </div>
                          <div class="answerbox1">
                            <div style="min-width: 60px">学生回答</div>
                            <div>
                              {{
                                worksDetail[sIndex].answerInfo[0].answerInfo
                                  .answer
                              }}
                            </div>
                          </div>
                        </div>
                        <div
                          class="left_top"
                          v-if="worksDetail[sIndex].askInfo.length > 0"
                        >
                          <div>
                            <div
                              v-if="worksDetail[sIndex].askInfo[0].score"
                              style="float: right; margin-right: 10px"
                            >
                              评分：{{ worksDetail[sIndex].askInfo[0].score }}
                            </div>
                            <div
                              class="a_add_title"
                              style="
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                justify-content: flex-start;
                                flex-wrap: wrap;
                              "
                            >
                              <div style="font-size: 16px">问卷工具</div>
                            </div>
                            <div
                              class="a_add_title"
                              style="
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                /* justify-content: center; */
                                flex-wrap: wrap;
                                margin-top: 10px;
                                font-size: 16px;
                              "
                            >
                              <div style="margin-right: 10px">标题:</div>
                              <div>
                                {{
                                  worksDetail[sIndex].askInfo[0].askInfo.askJson
                                    .askTitle
                                }}
                              </div>
                            </div>
                            <div class="a_addBox">
                              <div style="font-size: 16px; color: #c7c7c7">
                                内容
                              </div>
                              <div
                                :class="
                                  worksDetail[sIndex].askInfo.length > 1
                                    ? 'a_add_box'
                                    : 'isAddBox'
                                "
                                v-for="(item1, index1) in worksDetail[sIndex]
                                  .askInfo[0].askInfo.askJson.askCount"
                                :key="index1"
                              >
                                <div class="a_add_head">
                                  <div style="display: flex">
                                    {{ index1 + 1 + "、" }}
                                    <div>
                                      题目：{{
                                        worksDetail[sIndex].askInfo[0].askInfo
                                          .askJson.askJson[index1].askstitle
                                      }}
                                    </div>
                                  </div>
                                </div>
                                <div class="a_add_body">
                                  <div class="a_add_input">
                                    <el-radio-group
                                      v-if="
                                        worksDetail[sIndex].askInfo[0].askInfo
                                          .askJson.askJson[index1].type ==
                                          '1' ||
                                        !worksDetail[sIndex].askInfo[0].askInfo
                                          .askJson.askJson[index1].type
                                      "
                                      v-model="
                                        worksDetail[sIndex].askInfo[0].askInfo
                                          .anwer[index1]
                                      "
                                    >
                                      <el-radio
                                        v-for="(
                                          item2, checkIndex
                                        ) in worksDetail[sIndex].askInfo[0]
                                          .askInfo.askJson.askJson[index1]
                                          .checkList"
                                        :key="checkIndex"
                                        :label="checkIndex"
                                        disabled
                                        class="redioStyle"
                                        ><span v-html="item2"></span
                                      ></el-radio>
                                    </el-radio-group>
                                    <el-checkbox-group
                                      v-model="
                                        worksDetail[sIndex].askInfo[0].askInfo
                                          .anwer[index1]
                                      "
                                      v-if="
                                        worksDetail[sIndex].askInfo[0].askInfo
                                          .askJson.askJson[index1].type == '2'
                                      "
                                    >
                                      <el-checkbox
                                        v-for="(
                                          item2, checkIndex1
                                        ) in worksDetail[sIndex].askInfo[0]
                                          .askInfo.askJson.askJson[index1]
                                          .checkList"
                                        :key="checkIndex1"
                                        :label="checkIndex1"
                                        disabled
                                        class="redioStyle"
                                        ><span v-html="item2"></span>
                                      </el-checkbox>
                                    </el-checkbox-group>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="left_top"
                          v-if="worksDetail[sIndex].chooseInfo.length > 0"
                        >
                          <div v-for="(lcc, lccindex) in worksDetail[sIndex].chooseInfo" :key="lccindex + 'a'">
                            <div
                              v-if="lcc.score"
                              style="float: right; margin-right: 10px"
                            >
                              评分：{{
                                lcc.score
                              }}
                            </div>
                            <div
                              class="a_add_title"
                              style="
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                justify-content: flex-start;
                                flex-wrap: wrap;
                              "
                            >
                              <div style="font-size: 16px">选择题工具{{ lccindex + 1 }}</div>
                            </div>
                            <div class="a_addBox">
                              <div style="font-size: 16px; color: #c7c7c7">
                                题目内容
                              </div>
                              <div
                                :class="
                                  worksDetail[sIndex].askInfo.length > 1
                                    ? 'a_add_box'
                                    : 'isAddBox'
                                "
                                v-for="(item1, index1) in lcc.chooseInfo.testJson"
                                :key="index1 + 'a'"
                              >
                                <div class="a_add_head">
                                  <div style="display: flex">
                                    {{ index1 + 1 + "、" }}
                                    <div style="font-size: 14px;">
                                      题目：{{
                                       item1.teststitle
                                      }}
                                    </div>
                                  </div>
                                  <img
                                    v-if="
                                      item1.img
                                    "
                                    :src="
                                     item1.img
                                    "
                                    style="
                                      height: 300px;
                                      margin-top: 10px;
                                      max-width: 100%;
                                    "
                                  />
                                </div>

                                <div class="a_add_body">
                                  <div class="a_add_input">
                                    <el-radio-group
                                      v-model="
                                       lcc.chooseInfo.radio[index1]
                                      "
                                      v-if="
                                        item1.type == '1'
                                      "
                                    >
                                      <div class="radioBox">
                                        <el-radio
                                          v-for="(
                                            item2, checkIndex
                                          ) in item1.checkList"
                                          :key="checkIndex + 'b'"
                                          :label="checkIndex"
                                          disabled
                                          :class="[item1.answer ==  checkIndex ? 'redioStyle5':'redioStyle2']"
                                        >
                                          <div
                                            v-if="
                                              item2 &&
                                              item2.imgType &&
                                              item2.imgType == 1
                                            "
                                          >
                                            <div
                                              class="inImg"
                                              @click.stop="
                                                previewImg(item2.src)
                                              "
                                            >
                                              <img :src="item2.src" alt="" />
                                            </div>
                                          </div>
                                          <span v-else v-html="item2"></span>
                                        </el-radio>
                                      </div>
                                    </el-radio-group>

                                    <el-checkbox-group
                                      v-model="
                                       lcc.chooseInfo.radio[index1]
                                      "
                                      v-if="
                                        item1.type == '2'
                                      "
                                    >
                                      <div class="radioBox">
                                        <el-checkbox
                                          v-for="(
                                            item2, checkIndex
                                          ) in item1.checkList"
                                          :key="checkIndex + 'c'"
                                          :label="checkIndex"
                                          disabled
                                          :class="[item1.answer.includes(checkIndex) ? 'redioStyle3':'redioStyle4']"
                                        >
                                          <div
                                            style="margin-right: 10px"
                                            v-if="
                                              item2 &&
                                              item2.imgType &&
                                              item2.imgType == 1
                                            "
                                          >
                                            <div
                                              class="inImg"
                                              @click.stop="
                                                previewImg(item2.src)
                                              "
                                            >
                                              <img :src="item2.src" alt="" />
                                            </div>
                                          </div>
                                          <span v-else v-html="item2"></span>
                                        </el-checkbox>
                                      </div>
                                    </el-checkbox-group>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div
                          class="left_top"
                          v-if="worksDetail[sIndex].wpptInfo.length > 0"
                        >
                          <div
                            v-if="worksDetail[sIndex].wpptInfo[0].score"
                            style="float: right; margin-right: 10px"
                          >
                            评分：{{ worksDetail[sIndex].wpptInfo[0].score }}
                          </div>
                          <div
                            style="height: 500px"
                            @click="
                              openFile(worksDetail[sIndex].wpptInfo[0].wpptInfo)
                            "
                          >
                            <div
                              @click="
                                openFile(
                                  worksDetail[sIndex].wpptInfo[0].wpptInfo
                                )
                              "
                              style="
                                width: 100%;
                                height: 500px;
                                position: absolute;
                                z-index: 999;
                              "
                            ></div>
                            <pdf
                              v-if="showPDF"
                              :pdfUrl="worksDetail[sIndex].wpptInfo[0].wpptInfo"
                              style="width: 100%; height: 95%; overflow: auto"
                            ></pdf>
                            <iframe
                              v-else
                              :src="worksDetail[sIndex].wpptInfo[0].wpptInfo"
                              frameborder="0"
                              width="100%"
                              height="100%"
                            ></iframe>
                          </div>
                        </div>

                        <div
                          class="left_top"
                          v-if="worksDetail[sIndex].pjInfo.length > 0"
                        >
                          <div style="width: 100%">
                            <div
                              v-if="worksDetail[sIndex].pjInfo[0].score"
                              style="float: right; margin-right: 10px"
                            >
                              评分：{{ worksDetail[sIndex].pjInfo[0].score }}
                            </div>
                            <div
                              class="a_add_title"
                              style="
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                justify-content: flex-start;
                                flex-wrap: wrap;
                              "
                            >
                              <div style="font-size: 16px">个人评价工具</div>
                            </div>
                            <div class="evalCss">
                              <div
                                class="middleBox"
                                v-if="
                                  worksDetail[sIndex].pjInfo[0].answer.eStar
                                "
                              >
                                <div
                                  class="pfBox"
                                  v-for="(e, eIndex) in worksDetail[sIndex]
                                    .pjInfo[0].rateJson"
                                  :key="eIndex"
                                >
                                  <div class="nameAndrate">
                                    <div>{{ e.value }}</div>
                                    <el-rate
                                      v-model="
                                        worksDetail[sIndex].pjInfo[0].answer
                                          .eStar[eIndex]
                                      "
                                      disabled
                                    ></el-rate>
                                  </div>
                                  <div v-if="e.detail">{{ e.detail }}</div>
                                </div>
                                <div class="bz">
                                  <textarea
                                    disabled
                                    rows="4"
                                    class="pj"
                                    style="
                                      padding: 10px 5px;
                                      width: 95%;
                                      background: #f7f6f9;
                                      font-size: 14px;
                                      text-indent: 10px;
                                    "
                                    cols
                                    v-model="
                                      worksDetail[sIndex].pjInfo[0].answer
                                        .eBzText
                                    "
                                    placeholder="请输入评价内容..."
                                  ></textarea>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="left_top"
                          v-if="worksDetail[sIndex].xztkInfo.length > 0"
                        >
                          <div
                            v-if="worksDetail[sIndex].xztkInfo[0].score"
                            style="float: right; margin-right: 10px"
                          >
                            评分：{{ worksDetail[sIndex].xztkInfo[0].score }}
                          </div>
                          <div
                            class="a_add_title"
                            style="
                              display: flex;
                              flex-direction: row;
                              align-items: center;
                              justify-content: flex-start;
                              flex-wrap: wrap;
                            "
                          >
                            <div style="font-size: 16px">选择匹配工具</div>
                          </div>
                          <div class="select_box2_box">
                            <div class="select_box2_img">
                              <img
                                :src="
                                  worksDetail[sIndex].xztkInfo[0].selectJson.url
                                "
                                @click="
                                  previewImg(
                                    worksDetail[sIndex].xztkInfo[0].selectJson
                                      .url
                                  )
                                "
                                alt=""
                              />
                            </div>
                            <div class="rightWidthCss">
                              <div style="padding-top: 15px">
                                <div
                                  class="select_box2_answer_box"
                                  v-for="(item2, checkIndex) in worksDetail[
                                    sIndex
                                  ].xztkInfo[0].selectJson.select"
                                  :key="checkIndex"
                                >
                                  <span style="min-width: 30px"
                                    >{{ checkIndex + 1 }}、</span
                                  >
                                  <el-select
                                    disabled
                                    v-model="
                                      worksDetail[sIndex].xztkInfo[0].answer[
                                        checkIndex
                                      ]
                                    "
                                    placeholder="请选择正确答案"
                                  >
                                    <el-option
                                      v-for="(e, eIndex) in worksDetail[sIndex]
                                        .xztkInfo[0].selectJson.select"
                                      :key="eIndex"
                                      :label="e"
                                      :value="eIndex"
                                    >
                                    </el-option>
                                  </el-select>
                                </div>
                              </div>
                              <div class="rightAnswerCss">
                                <div
                                  v-for="(a, aIndex) in worksDetail[sIndex]
                                    .xztkInfo[0].selectJson.answer"
                                  :key="aIndex"
                                  class="rightAnswer"
                                >
                                  <div
                                    v-if="
                                      worksDetail[sIndex].xztkInfo[0].answer[
                                        aIndex
                                      ] === a
                                    "
                                    style="color: #767de1"
                                  >
                                    回答正确
                                  </div>
                                  <div v-else>回答错误</div>
                                  <div
                                    style="margin-left: 10px"
                                    v-if="
                                      worksDetail[sIndex].xztkInfo[0].answer[
                                        aIndex
                                      ] !== a
                                    "
                                  >
                                    正确答案：
                                  </div>
                                  <div
                                    :class="
                                      worksDetail[sIndex].xztkInfo[0].answer[
                                        aIndex
                                      ] === a
                                        ? 'blueCss'
                                        : 'redCss'
                                    "
                                  >
                                    {{
                                      worksDetail[sIndex].xztkInfo[0].selectJson
                                        .select[a]
                                    }}
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="left_top"
                          v-if="worksDetail[sIndex].lccjInfo.length > 0"
                        >
                          <div class="sentenBox" v-for="(lcc, lccindex) in worksDetail[sIndex].lccjInfo" :key="lccindex +'d'">
                            <div
                              v-if="lcc.score"
                              style="float: right; margin-right: 10px"
                            >
                              评分：{{ lcc.score }}
                            </div>
                            <div
                              class="a_add_title"
                              style="
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                justify-content: flex-start;
                                flex-wrap: wrap;
                              "
                            >
                              <div style="font-size: 16px">排序工具</div>
                            </div>
                            <div
                              v-for="(st, stIndex) in lcc.lccjInfo"
                              :key="stIndex+'e'"
                              style="padding-bottom: 20px"
                            >
                              <div
                                style="
                                  padding: 15px 0 10px 20px;
                                  font-size: 18px;
                                "
                              >
                                第{{ stIndex + 1 }}题
                              </div>
                              <div class="isWrong">
                                <div
                                  class="cardList1"
                                  v-if="st.chooseSenList"
                                >
                                  <div class="cardBox">
                                    <div
                                      v-for="(s, sIndex) in st.chooseSenList"
                                      :key="sIndex+'f'"
                                    >
                                      <el-tooltip
                                        class="item"
                                        effect="light"
                                        :content="s"
                                        placement="top"
                                      >
                                        <div class="isCard">
                                          <div>{{ s }}</div>
                                        </div>
                                      </el-tooltip>
                                    </div>
                                  </div>
                                  <div class="cardAnswerBox">
                                    组成句子：{{
                                      st.chooseSenList.join(" ")
                                    }}
                                  </div>
                                </div>
                                <div
                                  class="answerRight isTj"
                                  v-if="
                                    st.chooseSenList.toString() ==
                                    st.rightAnswer.toString()
                                  "
                                >
                                  <div class="isTjImg">
                                    <img
                                      src="../../../assets/icon/conSentences/right.png"
                                      alt=""
                                    />
                                  </div>
                                  <div>回答正确</div>
                                </div>
                                <div
                                  class="answerRight isTj"
                                  v-if="
                                    st.chooseSenList.toString() !=
                                    st.rightAnswer.toString()
                                  "
                                >
                                  <div class="isTjImg">
                                    <img
                                      src="../../../assets/icon/conSentences/wrong.png"
                                      alt=""
                                    />
                                  </div>
                                  <div>回答错误</div>
                                </div>
                              </div>
                              <div
                                v-if="
                                  st.chooseSenList.toString() !=
                                  st.rightAnswer.toString()
                                "
                              >
                                <div style="padding: 15px 0 10px 20px">
                                  正确答案如下：
                                </div>
                                <div
                                  class="cardList"
                                  v-if="st.rightAnswer"
                                  style="
                                    border: none;
                                    padding: 10px 0 10px 10px;
                                    margin: 0;
                                  "
                                >
                                  <div class="cardBox">
                                    <div
                                      v-for="(r, rIndex) in st.rightAnswer"
                                      :key="rIndex + 'g'"
                                    >
                                      <el-tooltip
                                        class="item"
                                        effect="light"
                                        :content="r"
                                        placement="top"
                                      >
                                        <div class="isCard1">
                                          <div>{{ r }}</div>
                                        </div>
                                      </el-tooltip>
                                    </div>
                                  </div>
                                  <div class="cardAnswerBox">
                                    组成句子：{{
                                      st.rightAnswer.join(" ")
                                    }}
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="left_top"
                          v-if="worksDetail[sIndex].bgInfo.length > 0"
                        >
                          <div
                            v-if="worksDetail[sIndex].bgInfo[0].score"
                            style="float: right; margin-right: 10px"
                          >
                            评分：{{ worksDetail[sIndex].bgInfo[0].score }}
                          </div>
                          <div
                            class="a_add_title"
                            style="
                              display: flex;
                              flex-direction: row;
                              align-items: center;
                              justify-content: flex-start;
                              flex-wrap: wrap;
                              margin-bottom: 10px;
                            "
                          >
                            <div style="font-size: 16px">表格工具</div>
                          </div>
                          <el-form>
                            <div
                              class="cont"
                              v-html="worksDetail[sIndex].bgInfo[0].bgInfo.text"
                            ></div>
                          </el-form>
                        </div>
                        <div
                          class="left_top"
                          v-if="worksDetail[sIndex].cocopiInfo.length > 0"
                        >
                          <div
                            v-if="worksDetail[sIndex].cocopiInfo[0].score"
                            style="float: right; margin-right: 10px"
                          >
                            评分：{{ worksDetail[sIndex].cocopiInfo[0].score }}
                          </div>
                          <div
                            class="a_add_title"
                            style="
                              display: flex;
                              flex-direction: row;
                              align-items: center;
                              justify-content: flex-start;
                              flex-wrap: wrap;
                            "
                          >
                            <div style="font-size: 16px">cocopi工具</div>
                          </div>
                          <div
                            v-for="(c, cIndex) in worksDetail[sIndex]
                              .cocopiInfo"
                            :key="cIndex"
                          >
                            <div v-if="c.type == 1">
                              <div class="bigImg">
                                <img
                                  :src="c.url"
                                  @click="previewImg(c.url)"
                                  alt=""
                                />
                              </div>
                            </div>

                            <div
                              v-if="c.type == 2 || c.type == 3"
                              @click="openFile(c.url, c.type)"
                              style="
                                width: 80px;
                                height: 30px;
                                text-align: center;
                                line-height: 30px;
                                margin: 10px 0;
                              "
                            >
                              <el-button type="primary" size="small"
                                >全屏查看</el-button
                              >
                            </div>
                            <div v-if="c.type == 2">
                              <div class="workImg">
                                <img
                                  :src="word2"
                                  @click="openFile(c.url, c.type)"
                                  alt
                                />
                              </div>
                            </div>
                            <div v-if="c.type == 3">
                              <div class="workImg">
                                <img
                                  :src="word2"
                                  @click="openFile(c.url, c.type)"
                                  alt
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="left_top"
                          v-if="worksDetail[sIndex].wordInfo.length > 0"
                        >
                          <div
                            v-if="worksDetail[sIndex].wordInfo[0].score"
                            style="float: right; margin-right: 10px"
                          >
                            评分：{{ worksDetail[sIndex].wordInfo[0].score }}
                          </div>
                          <div
                            class="a_add_title"
                            style="
                              display: flex;
                              flex-direction: row;
                              align-items: center;
                              justify-content: flex-start;
                              flex-wrap: wrap;
                              margin-bottom: 10px;
                            "
                          >
                            <div style="font-size: 16px">文档工具</div>
                          </div>
                          <el-form>
                            <div
                              class="cont"
                              v-html="
                                worksDetail[sIndex].wordInfo[0].wordInfo.text
                              "
                            ></div>
                          </el-form>
                        </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="worksTimeBlack">
                      <div class="worksTimeBlackTit">
                        <div>
                          任务得分: <span style="color: rgba(54, 129, 252, 1);margin-left: 5px;">{{ totalScore(worksDetail[sIndex].rateList) }}</span>分
                        </div>
                      </div>
                      <div class="worksTime">
                        作业提交时间：<span style="width: auto"
                          >{{ worksDetail[sIndex].time }}
                        </span>
                      </div>
                    </div>
                     
                   
                      <div v-if="worksDetail[sIndex].eList.length">
                       
                        <div>
                          <div class="score_boxTit"><span>分数详情</span></div>
                          <div
                            class="score_box"
                            v-for="(item, index) in worksDetail[sIndex].eList"
                            :key="index"
                          >
                            <el-tooltip
                              class="item"
                              effect="dark"
                              v-if="worksDetail[sIndex].state == 5"
                              :content="item.detail"
                              placement="top-start"
                            >
                              <div class="RootImgBlock">
                                <img
                                  v-if="item.isai == 1"
                                  class="RootImg"
                                  src="../../../assets/icon/conSentences/Brootper.svg"
                                  alt=""
                                />
                                {{ item.detail }}
                              </div>
                            </el-tooltip>
                            <el-tooltip
                              class="item"
                              effect="dark"
                              v-else
                              :content="item.value"
                              placement="top-start"
                            >
                              <div class="RootImgBlock">
                                <img
                                  v-if="item.isai == 1"
                                  class="RootImg"
                                  src="../../../assets/icon/conSentences/Brootper.svg"
                                  alt=""
                                />
                                {{ item.value }}
                              </div>
                            </el-tooltip>

                            <el-rate
                              class="rate_size"
                              style="min-width: 120px"
                              v-model="worksDetail[sIndex].rateList[item.detail]"
                              @change="getStar(sIndex)"
                            ></el-rate>
                          </div>
                        </div>
                        <div class="worksTarget" v-if="isShow(worksDetail[sIndex].eList)"><span>目标</span></div>
                        <div class="worksTargetCon" v-if="isShow(worksDetail[sIndex].eList)">
                            <div v-for="(item,tarIndex) in worksDetail[sIndex].eList" :key="tarIndex">
                              <span v-if="worksDetail[sIndex].state == 5"> {{ item.target }}</span>
                              <span v-else> {{ item.target[item.target.length-1] }}</span>
                            </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="buttonCss">
              <el-button type="primary" size="small" @click="updatePj"
                >保存评分</el-button
              >
            </div>
          </div>
        </el-dialog>
      </div>
      <div class="student_page" v-if="!typeCheck">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="10"
          :total="total"
          :current-page.sync="page"
          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">关 闭</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"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="文件预览"
      :visible.sync="dialogVisible6"
      width="100%"
      :before-close="handleClose"
      class="worksDialogCSS"
      :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: 95%; overflow: auto"
      ></pdf>
      <iframe
        v-else
        :src="pptImgUrl"
        frameborder="0"
        width="100%"
        style="height: 95%;"
      ></iframe>
    </el-dialog>

    <el-dialog
      title="文件预览"
      :visible.sync="worksDialog"
      :before-close="handleClose"
      class="worksDialogCSS"
      :append-to-body="true"
    >
      <div slot="title" class="header-title">
        <div style="color: #fff">导出作业集</div>
      </div>
      <exportWorksDialog  :key="exportW" :digNum="digNum" :oid="oid" :worksDialog.sync="worksDialog" :worksDialogCon="worksDialogCon" :uid="exportPdfSetUid" :cid="id"></exportWorksDialog>
    </el-dialog>
  </div>
</template>

<script>
import StudentData from "./studentData";
import exportWorksDialog from "./exportWorksDialog";

import pdf from "./vpdf";
import htmlDocx from "html-docx-js/dist/html-docx";
import saveAs from "file-saver";
import html2canvas from "html2canvas";
import jspdf from "jspdf";
export default {
  components: {
    StudentData,
    pdf,
    exportWorksDialog
  },
  props: ["cid", "uid", "ooid","DState"],
  data() {
    return {
      tableHeight: "500px",
      isLoading: false,
			studentLoading:false,
      id: this.cid,
      userid: this.uid,
      oid: this.ooid,
      studentId: "",
      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: "",
			choseClass:"",
      chooseTask: "",
      subjectJuri: [],
      projectJuri: [],
      pptImgUrl: "",
      grade: [],
      mr: require("../../../assets/icon/wheel.png"),
      tx: require("../../../assets/avatar.png"),
      projectchoose: "",
      scopeId: "",
      scopeId1: "",
      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: "#58a5e6",
                    lineStyle: {
                      color: "#58a5e6",
                    },
                  },
                },
              },
            ],
          },
        ],
      },
      askJson: {},
      dyList: [],
      dyList2: [],
      userAarray: [],
			classArray:[],
      isPre: false,
      isNext: false,
      checkJson: [],
      typeCheck: false,
      word2: require("../../../assets/icon/word2.png"),
      worksLoading:false,
      cutTabNum:0,
      allWorkData:[],
      worksDialog : false,
      worksDialogCon : {},
      exportPdfSetUid:'',
      exportW:0,
      digNum:0
    };
  },
  computed: {
    totalScore(){
      return function (val) {
        let sco = 0
        let num = 0
        for (const key in val) {
          if (val[key] && key != 'content') {
            sco += val[key] * 1
          }
          num += 1
        }
        if (sco == 0)  return '0.0'
        
        return (sco / (num - 1)).toFixed(1)
      }
    },
    isShow(){
      return function (val) {
        let num = 0

       val.forEach(i => {
        if (i.target) {
          num++
        }
       });
       
        return num*1
      }
    }
  },
  watch: {
    typeCheck(newValue, oldValue) {
      this.loading = true;
      this.isLoading = true;
      this.tableData = [];
      if (newValue) {
        if (this.cutTabNum==0) {
          this.getWorks1();
        }
        if (this.cutTabNum==1) {
          this.getStageWorks2()
        }
        if (this.cutTabNum==2) {
          this.getTaskWorks2()
        }
      } else {
        this.page = 1;

        if (this.cutTabNum==0) {
          this.getWorks()
        }
        if (this.cutTabNum==1) {
          this.getStageWorks()
        }
        if (this.cutTabNum==2) {
          this.getTaskWorks()
        }
        // this.getWorks();
      }
    },
  },
  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: {
    // 导出所有作业
    exportPdfSetAllWork(){
      this.worksDialog = true;
      this.digNum = 1
      this.exportW++
      
    },
   
    // 按任务查看导出作业集
    exportPdfSetBtn(uid, con) {
      this.worksDialog = true;
      this.worksDialogCon = con;
      this.exportPdfSetUid = uid;
      this.digNum = 0

      this.exportW++
    },
    cutTabData(val){
      this.cutTabNum = val;
      this.page = 1;
      
      if (this.typeCheck) {
        if (val==0) {
          this.getWorks1()
        }
        if (val==1) {
          this.getStageWorks2()
        }
        if (val==2) {
          this.getTaskWorks2()
        }
      }else{
        if (val==0) {
         this.getWorks()
        }
        if (val==1) {
          this.getStageWorks()
        }
        if (val==2) {
          this.getTaskWorks()
        }
      }

      
    },
    getStageWorks(){
      this.isLoading = true;
      let params = {
        cid: this.id,
        uname: this.uname,
				choseClass:this.choseClass,
        stage: this.chooseDy,
        task: this.chooseTask,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getCourseStageWorks", params) //getCourseWorks3
        .then((res) => {
          this.isLoading = false;
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData = res.data[0];
					this.classArray = res.data[1]
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    getStageWorks2(){
      this.isLoading = true;
      let params = {
        cid: this.id,
        uname: this.uname,
				choseClass:this.choseClass,
        stage: this.chooseDy,
        task: this.chooseTask
      };
      this.ajax
        .get(this.$store.state.api + "getCourseStageWorks2", params) //getCourseWorks3
        .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);
        });
    },
    getTaskWorks(){
      this.isLoading = true;
      let params = {
        cid: this.id,
        uname: this.uname,
				choseClass:this.choseClass,
        stage:this.DState!=1 ? 0 : this.chooseDy,
        task: this.chooseTask,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getCourseTaskWorks", params) //getCourseWorks3
        .then((res) => {
          this.isLoading = false;
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData = res.data[0];
					this.classArray = res.data[1]
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    getTaskWorks2(){
      this.isLoading = true;
      let params = {
        cid: this.id,
        uname: this.uname,
				choseClass:this.choseClass,
        stage:this.DState!=1 ? 0 : this.chooseDy,
        task: this.chooseTask
      };
      this.ajax
        .get(this.$store.state.api + "getCourseTaskWorks2", params) //getCourseWorks3
        .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);
        });
    },
    getPdf(){
      this.worksLoading = true
      let domHeight = this.$refs.reportPdf.offsetHeight;
      console.log('this.$refs.reportPdf',this.$refs.reportPdf.offsetHeight);
      let maxHeight = 64257;
      html2canvas(this.$refs.reportPdf, {
        useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
        scale: (maxHeight/domHeight) > 1 ? 1: (maxHeight/domHeight)
    }).then((canvas) => {
        const contentWidth = canvas.width;
        const contentHeight = canvas.height;

        let pageHeight = contentWidth / 592.28 * 841.89;
        let leftHeight = contentHeight;

        //页面偏移
        var position = 0;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28; // A4 宽度
        var imgHeight = 592.28/contentWidth * contentHeight; // A4总高度
        var pageData = canvas.toDataURL('image/jpeg', 1.0);

        var pdf = new jspdf('', 'pt', [contentWidth, contentHeight]);

        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        // if (leftHeight < pageHeight) {
        pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight );
       
        pdf.save( this.allWorks.course+'-作业集' + '-'+ this.allWorks.sName+'.pdf')
        this.worksLoading = false
    })
    .catch((err) => {
      this.worksLoading = false
      console.log(err);
    });

    },
    
		changeClass(){//切换班级
			this.searchWork2();
			this.getCourseDetail()
		},
    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;
      if (this.cutTabNum==0) {
        this.getWorks()
      }
      if (this.cutTabNum==1) {
        this.getStageWorks()
      }
      if (this.cutTabNum==2) {
        this.getTaskWorks()
      }
      // this.getWorks();
    },
    lookWork(id, uid, type, index,con) {
      this.scopeId1 = id;
      this.studentId = uid;
      let params = {
        uid: uid,
        cid: this.id,
      };
      this.ajax
        .get(this.$store.state.api + "selectAllWorksDetail", params)
        .then((res) => {
          var b = res.data[0].reduce((result, item) => {
            const key = item.stage + "-" + item.task;
            if (!result[key]) {
              result[key] = item;
            }
            return result;
          }, {});

          // 将结果转换为数组形式
          b = Object.values(b);
          var c = b.sort(function (x, y) {
            // 首先比较stage字段
            if (x.stage !== y.stage) {
              return parseInt(x.stage) - parseInt(y.stage);
            }

            // 如果stage字段相同，则比较task字段
            return parseInt(x.task) - parseInt(y.task);
          });
          this.sInfo = c;      
          var chapters = [],
            eList = [],
            _ooption = [],
            _rate = [],
            _rateList = [];
            console.log('res.data',res.data);
          var worksDetail = res.data[1];
          // let worksDetailCopy = JSON.parse(JSON.stringify(worksDetail))
          // console.log('worksDetailCopy',worksDetailCopy);
          // 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 chooseInfo = res.data[6];
          var pjInfo = res.data[7]; //个人评价作业
          var xztkInfo = res.data[8]; //选择匹配作业
          var lccjInfo = res.data[9]; //排序作业
          var bgInfo = res.data[10]; //表格作业
          var cocopiInfo = res.data[11]; //cocopi或源码编辑作业
          var wordInfo = res.data[12]; //文档作业
          var workEvaList = res.data[13];
          var workJson = {};
          let checkJson = {};

          for (var k = 0; k < res.data[0].length; k++) {
            this.allWorks = res.data[0][k];
            if (this.chapInfo.length == 0) {
              this.chapInfo.push(JSON.parse(res.data[0][k].chapters));
            } else {
              for (var i = 0; i < this.chapInfo.length; i++) {
                if (
                  JSON.stringify(res.data[0][k].chapters) ===
                  JSON.stringify(this.chapInfo[i])
                ) {
                  continue;
                }
              }
            }
            if (chapters.length == 0) {
              chapters.push(JSON.parse(res.data[0][k].chapters));
            } else {
              for (var i = 0; i < chapters.length; i++) {
                if (
                  JSON.stringify(res.data[0][k].chapters) ===
                  JSON.stringify(chapters[i])
                ) {
                  continue;
                }
              }
            }
            if (
              !chapters[0][res.data[0][k].stage].chapterInfo[0].taskJson[
                res.data[0][k].task
              ]
            ) {
              continue;
            }

            // checkJson[stagetask] = {};
            let stagetask = res.data[0][k].stage + "-" + res.data[0][k].task;
            if (!workJson[stagetask]) {
              workJson[stagetask] = {
                img: [],
                imgIndex: 0,
                eList: [],
                rateList: {},
                askInfo: [],
                answerInfo: [],
                wpptInfo: [],
                chooseInfo: [],
                pjInfo: [],
                xztkInfo: [],
                lccjInfo: [],
                bgInfo: [],
                cocopiInfo: [],
                wordInfo: [],
                scopeId: res.data[0][k].id,
                state: res.data[0][k].state,
                stagetask: stagetask,
                time: "",
              };
              checkJson[stagetask] = {
                stagetask: stagetask,
              };
            }
            workJson[stagetask].time = res.data[0][k].time;
            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 &&
                res.data[0][k].tool == askInfo[i].tool
              ) {
                const element = askInfo[i];
                let a = JSON.parse(element.content)[0];
                let e = [];
                for (var y = 0; y < a.askJson.length; y++) {
                  if (a.askJson[y].type == "2") {
                    e.push(JSON.parse(askInfo[i].content)[0].anwer[y]);
                  } else {
                    e.push(JSON.parse(askInfo[i].content)[0].anwer[y]);
                  }
                }
                a.radio = e;
                workJson[stagetask].askInfo.push({
                  askInfo: a,
                  score: askInfo[i].score
                    ? JSON.parse(askInfo[i].score).wScore
                    : askInfo[i].score,
                });
                // checkJson[stagetask].allRight = 0;
                checkJson[stagetask].allRight = 0
                var isCount = 0;
                for (var p = 0; p < a.radio.length; p++) {
                  if (!checkJson[stagetask][p]) {
                    checkJson[stagetask][p] = {
                      checkCount: [],
                      checkPerson: [],
                    };
                  }
                  if (!checkJson[stagetask][p].checkCount.length) {
                    checkJson[stagetask][p].checkCount = [];
                    let _askItemCount = a.askJson[p].askCount;
                    for (var aic = 0; aic < _askItemCount; aic++) {
                      checkJson[stagetask][p].checkCount.push(0);
                    }
                  }
                  if (a.radio[p] instanceof Array) {
                    if (
                      workJson[stagetask].askInfo[0].askInfo.askJson[p].answer
                        .sort()
                        .join(",") == a.radio[p].sort().join(",")
                    ) {
                      checkJson[stagetask][p].right = 100;
                      isCount += checkJson[stagetask][p].right;
                    } else {
                      checkJson[stagetask][p].right = 0;
                      isCount += 0;
                    }
                    for (var q = 0; q < a.radio[p].length; q++) {
                      checkJson[stagetask][p].checkPerson[parseInt(a.radio[p][q])]
                        ? checkJson[stagetask][p].checkPerson[
                            parseInt(a.radio[p][q])
                          ].push(res.data[0][k].sName)
                        : (checkJson[stagetask][p].checkPerson[
                            parseInt(a.radio[p][q])
                          ] = [res.data[0][k].sName]);
                          checkJson[stagetask][p].checkCount[parseInt(a.radio[p][q])]
                        ? checkJson[stagetask][p].checkCount[
                            parseInt(a.radio[p][q])
                          ]++
                        : (checkJson[stagetask][p].checkCount[
                            parseInt(a.radio[p][q])
                          ] = 1);
                    }
                  } else {
                    if (
                      workJson[stagetask].askInfo[0].askInfo.askJson[p]
                        .answer == a.radio[p]
                    ) {
                      checkJson[stagetask][p].right = 100;
                      isCount += checkJson[stagetask][p].right;
                    } else {
                      checkJson[stagetask][p].right = 0;
                      isCount += 0;
                    }
                    if (parseInt(a.radio[p]) || parseInt(a.radio[p]) == 0) {
                      checkJson[stagetask][p].checkPerson[parseInt(a.radio[p])]
                        ? checkJson[stagetask][p].checkPerson[
                            parseInt(a.radio[p])
                          ].push(res.data[0][k].sName)
                        : (checkJson[stagetask][p].checkPerson[
                            parseInt(a.radio[p])
                          ] = [res.data[0][k].sName]);
                          checkJson[stagetask][p].checkCount[parseInt(a.radio[p])]
                        ? checkJson[stagetask][p].checkCount[
                            parseInt(a.radio[p])
                          ]++
                        : (checkJson[stagetask][p].checkCount[
                            parseInt(a.radio[p])
                          ] = 1);
                    }
                  }
                }
                checkJson[stagetask].allRight = isCount / a.radio.length;
              }
            }
            // console.log(checkJson);
            for (var i = 0; i < chooseInfo.length; i++) {
              if (
                res.data[0][k].stage == chooseInfo[i].stage &&
                res.data[0][k].task == chooseInfo[i].task &&
                res.data[0][k].tool == chooseInfo[i].tool
              ) {
                const element1 = chooseInfo[i];
                let t = JSON.parse(element1.content)[0].testJson;
                let e = [];
                for (var y = 0; y < t.testJson.length; y++) {
                  if (t.testJson[y].type == "2") {
                    e.push(JSON.parse(chooseInfo[i].content)[0].anwer[y]);
                  } else {
                    e.push(JSON.parse(chooseInfo[i].content)[0].anwer[y]);
                  }
                }
                t.radio = e;
                workJson[stagetask].chooseInfo.push({
                  chooseInfo: t,
                  score: chooseInfo[i].score
                    ? JSON.parse(chooseInfo[i].score).wScore
                    : chooseInfo[i].score,
                });
                checkJson[stagetask].allRight = 0;
                var isCount = 0;
                for (var p = 0; p < t.radio.length; p++) {
                  if (!checkJson[stagetask][p]) {
                    checkJson[stagetask][p] = {
                      checkCount: [],
                      checkPerson: [],
                    };
                  }
                  if (!checkJson[stagetask][p].checkCount.length) {
                    checkJson[stagetask][p].checkCount = [];
                    let _askItemCount = t.testJson[p].testItem;
                    for (var aic = 0; aic < _askItemCount; aic++) {
                      checkJson[stagetask][p].checkCount.push(0);
                    }
                  }
                  if (t.radio[p] instanceof Array) {
                    if (
                      t.testJson[p].answer.sort().join(",") ==
                      t.radio[p].sort().join(",")
                    ) {
                      checkJson[stagetask][p].right = 100;
                      isCount += checkJson[stagetask][p].right;
                    } else {
                      checkJson[stagetask][p].right = 0;
                      isCount += 0;
                    }
                    for (var q = 0; q < t.radio[p].length; q++) {
                      checkJson[stagetask][p].checkPerson[
                        parseInt(t.radio[p][q])
                      ]
                        ? checkJson[stagetask][p].checkPerson[
                            parseInt(t.radio[p][q])
                          ].push(res.data[0][k].sName)
                        : (checkJson[stagetask][p].checkPerson[
                            parseInt(t.radio[p][q])
                          ] = [res.data[0][k].sName]);
                      checkJson[stagetask][p].checkCount[
                        parseInt(t.radio[p][q])
                      ]
                        ? checkJson[stagetask][p].checkCount[
                            parseInt(t.radio[p][q])
                          ]++
                        : (checkJson[stagetask][p].checkCount[
                            parseInt(t.radio[p][q])
                          ] = 1);
                    }
                  } else {
                    if (t.testJson[p].answer == t.radio[p]) {
                      checkJson[stagetask][p].right = 100;
                      isCount += checkJson[stagetask][p].right;
                    } else {
                      checkJson[stagetask][p].right = 0;
                      isCount += 0;
                    }
                    if (parseInt(t.radio[p]) || parseInt(t.radio[p]) == 0) {
                      checkJson[stagetask][p].checkPerson[parseInt(t.radio[p])]
                        ? checkJson[stagetask][p].checkPerson[
                            parseInt(t.radio[p])
                          ].push(res.data[0][k].sName)
                        : (checkJson[stagetask][p].checkPerson[
                            parseInt(t.radio[p])
                          ] = [res.data[0][k].sName]);
                      checkJson[stagetask][p].checkCount[parseInt(t.radio[p])]
                        ? checkJson[stagetask][p].checkCount[
                            parseInt(t.radio[p])
                          ]++
                        : (checkJson[stagetask][p].checkCount[
                            parseInt(t.radio[p])
                          ] = 1);
                    }
                  }
                }
                checkJson[stagetask].allRight = isCount / t.radio.length;
              }
            }
          }

          for (var i = 0; i < worksDetail.length; i++) {
            workJson[worksDetail[i].stage + "-" + worksDetail[i].task].img.push(
              {
                src: worksDetail[i].content,
                id: i,
                score: worksDetail[i].score
                  ? JSON.parse(worksDetail[i].score).wScore
                  : worksDetail[i].score,
              }
            );
          }

          for (var i = 0; i < pptInfo.length; i++) {
            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=" +
                encodeURIComponent(pptInfo[i].content);
              workJson[pptInfo[i].stage + "-" + pptInfo[i].task].wpptInfo.push({
                wpptInfo: a,
                score: pptInfo[i].score
                  ? JSON.parse(pptInfo[i].score).wScore
                  : pptInfo[i].score,
              });
              this.showPDF = false;
            } else if (
              pptInfo[i].content
                .split(".")
                [
                  pptInfo[i].content.split(".").length - 1
                ].toLocaleUpperCase() == "PDF"
            ) {
              workJson[pptInfo[i].stage + "-" + pptInfo[i].task].wpptInfo.push({
                wpptInfo: pptInfo[i].content,
                score: pptInfo[i].score
                  ? JSON.parse(pptInfo[i].score).wScore
                  : pptInfo[i].score,
              });
              this.showPDF = true;
            }
          }

          for (var i = 0; i < answerInfo.length; i++) {
            const element = answerInfo[i];
            workJson[
              answerInfo[i].stage + "-" + answerInfo[i].task
            ].answerInfo.push({
              answerInfo: JSON.parse(element.content)[0],
              score: answerInfo[i].score
                ? JSON.parse(answerInfo[i].score).wScore
                : answerInfo[i].score,
            });
          }
          for (var i = 0; i < pjInfo.length; i++) {
            var pj = pjInfo[i];
            var a =
              chapters[0][pjInfo[i].stage].chapterInfo[0].taskJson[
                pjInfo[i].task
              ].toolChoose;
            var rateJson = [];
            for (var z = 0; z < a.length; z++) {
              if (a[z].tool[0] == 40) {
                rateJson = a[z].rateJson;
              }
            }
            workJson[pjInfo[i].stage + "-" + pjInfo[i].task].pjInfo.push({
              answer: JSON.parse(pj.content),
              rateJson: rateJson,
              score: pjInfo[i].score
                ? JSON.parse(pjInfo[i].score).wScore
                : pjInfo[i].score,
            });
          }

          for (var i = 0; i < xztkInfo.length; i++) {
            if (xztkInfo[i].type == 7) {
              var xztk = xztkInfo[i];
              var a =
                chapters[0][xztkInfo[i].stage].chapterInfo[0].taskJson[
                  xztkInfo[i].task
                ].toolChoose;
              var selectJson = [];
              for (var z = 0; z < a.length; z++) {
                if (a[z].tool[0] == 41) {
                  selectJson = a[z].selectJson;
                }
              }
              workJson[
                xztkInfo[i].stage + "-" + xztkInfo[i].task
              ].xztkInfo.push({
                answer: xztk.content.split(",").map(Number),
                selectJson: selectJson,
                score: xztkInfo[i].score
                  ? JSON.parse(xztkInfo[i].score).wScore
                  : xztkInfo[i].score,
              });
            }
          }

          // 排序
          for (var i = 0; i < lccjInfo.length; i++) {
            var lccj = lccjInfo[i];
            workJson[lccjInfo[i].stage + "-" + lccjInfo[i].task].lccjInfo.push({
              lccjInfo: JSON.parse(lccj.content),
              score: lccjInfo[i].score
                ? JSON.parse(lccjInfo[i].score).wScore
                : lccjInfo[i].score,
            });
          }

          for (var i = 0; i < bgInfo.length; i++) {
            var bg = bgInfo[i];
            workJson[bgInfo[i].stage + "-" + bgInfo[i].task].bgInfo.push({
              bgInfo: JSON.parse(bg.content),
              score: bgInfo[i].score
                ? JSON.parse(bgInfo[i].score).wScore
                : bgInfo[i].score,
            });
          }

          for (var i = 0; i < cocopiInfo.length; i++) {
            var cocopi = cocopiInfo[i];
            var c = ["DOT", "DOC", "DOCX", "PPT", "PPTX", "XLSX", "XLS"];
            var d = [
              "BMP",
              "PJP",
              "APNG",
              "PNG",
              "JPG",
              "GIF",
              "SVG",
              "JPEG",
              "JPG",
              "ICO",
              "PGPEG",
              "AVIF",
            ];
            var t = 0; //t = 1是图片 2是文档 3是pdf
            if (
              d.indexOf(
                cocopi.content
                  .split(".")
                  [cocopi.content.split(".").length - 1].toLocaleUpperCase()
              ) != -1
            ) {
              t = 1;
              workJson[
                cocopiInfo[i].stage + "-" + cocopiInfo[i].task
              ].cocopiInfo.push({
                url: cocopi.content,
                type: t,
                score: cocopiInfo[i].score
                  ? JSON.parse(cocopiInfo[i].score).wScore
                  : cocopiInfo[i].score,
              });
            } else if (
              c.indexOf(
                cocopi.content
                  .split(".")
                  [cocopi.content.split(".").length - 1].toLocaleUpperCase()
              ) != -1
            ) {
              t = 2;
              var a =
                "https://view.officeapps.live.com/op/view.aspx?src=" +
                encodeURIComponent(cocopi.content);
              workJson[
                cocopiInfo[i].stage + "-" + cocopiInfo[i].task
              ].cocopiInfo.push({
                url: a,
                type: t,
                score: cocopiInfo[i].score
                  ? JSON.parse(cocopiInfo[i].score).wScore
                  : cocopiInfo[i].score,
              });
            } else if (
              cocopi.content
                .split(".")
                [cocopi.content.split(".").length - 1].toLocaleUpperCase() ==
              "PDF"
            ) {
              t = 3;
              workJson[
                cocopiInfo[i].stage + "-" + cocopiInfo[i].task
              ].cocopiInfo.push({
                url: cocopi.content,
                type: t,
                score: cocopiInfo[i].score
                  ? JSON.parse(cocopiInfo[i].score).wScore
                  : cocopiInfo[i].score,
              });
            }
          }

          for (var i = 0; i < wordInfo.length; i++) {
            var word = wordInfo[i];
            workJson[wordInfo[i].stage + "-" + wordInfo[i].task].wordInfo.push({
              wordInfo: JSON.parse(word.content),
              score: wordInfo[i].score
                ? JSON.parse(wordInfo[i].score).wScore
                : wordInfo[i].score,
            });
          }
          // const result = workJson.filter((item, index, arr) => {
          //   return (
          //     arr.findIndex((temp) => temp.stagetask === item.stagetask) ===
          //     index
          //   );
          // });
          let result = [];
          let checkJsonArray = [];
          for (var wi = 0; wi < Object.keys(workJson).length; wi++) {
            result.push(workJson[Object.keys(workJson)[wi]]);
            checkJsonArray.push(checkJson[Object.keys(checkJson)[wi]]);
          }
          var resultNewArray = result.sort(function (x, y) {
            // 以stagetask字段为排序依据
            var x_parts = x.stagetask.split("-");
            var y_parts = y.stagetask.split("-");

            // 首先比较第一个数字
            if (x_parts[0] !== y_parts[0]) {
              return parseInt(x_parts[0]) - parseInt(y_parts[0]);
            }

            // 如果第一个数字相同，则比较第二个数字
            return parseInt(x_parts[1]) - parseInt(y_parts[1]);
          });
          var checkJsonNewArray = checkJsonArray.sort(function (x, y) {
            // 以stagetask字段为排序依据
            var x_parts = x.stagetask.split("-");
            var y_parts = y.stagetask.split("-");

            // 首先比较第一个数字
            if (x_parts[0] !== y_parts[0]) {
              return parseInt(x_parts[0]) - parseInt(y_parts[0]);
            }

            // 如果第一个数字相同，则比较第二个数字
            return parseInt(x_parts[1]) - parseInt(y_parts[1]);
          });
          result = resultNewArray;
       
          checkJsonArray = checkJsonNewArray;
          this.checkJson = checkJsonArray;

          for (var l = 0; l < b.length; l++) {
            var eListOld =
              chapters[0][b[l].stage].chapterInfo[0].taskJson[b[l].task].eList;
            if (eListOld && eListOld.length) {
              var eListNew = Object.keys(eListOld).map(function (key) {
                return {
                  detail: eListOld[key].detail,
                  score: eListOld[key].score,
                  value: eListOld[key].value,
                  isai: eListOld[key].isai,
                  target: eListOld[key].target
                };
              });
              eList = eListNew;
              
              if (eList && eList.length) {
                _ooption = [];
                result[l].eList = eList;
                for (var i = 0; i < eList.length; i++) {
                  _ooption.push({ value: 0, name: eList[i].value });
                  result[l].rateList[eList[i].detail] = 0;
                }
                result[l].rateList.content = "";
                this.ooption[l] = _ooption;
              }
              if (b[l].rate && eList && eList.length) {
                _rate[l] = JSON.parse(b[l].rate);

                _rateList[l] = Object.keys(JSON.parse(b[l].rate));
                for (var i = 0; i < _rateList[l].length; i++) {
                  var _c = Object.keys(result[l].rateList);
                  if (_c.indexOf(_rateList[l][i]) != -1) {
                    result[l].rateList[_rateList[l][i]] =
                      _rate[l][_rateList[l][i]];
                  }
                }
                for (var i = 0; i < this.ooption[l].length; i++) {
                  if (_rateList[l].indexOf(this.ooption[l][i].name) != -1) {
                    this.ooption[l][i].value =
                      _rate[l][this.ooption[l][i].name];
                  }
                }
              } else {
                _rate[l] = [];
                _rateList[l] = [];
              }
            }
            if (workEvaList.length > 0) {
              for (var p = 0; p < workEvaList.length; p++) {
                if (
                  b[l].stage == workEvaList[p].stage &&
                  b[l].task == workEvaList[p].task
                ) {
                  var eListOld =
                    chapters[0][b[l].stage].chapterInfo[0].taskJson[b[l].task]
                      .eList;
                  if (eListOld && eListOld.length) {
                    var eListNew = Object.keys(eListOld).map(function (key) {
                      return {
                        detail: eListOld[key].detail,
                        score: eListOld[key].score,
                        value: eListOld[key].value,
                        isai: eListOld[key].isai,
                        target: eListOld[key].target
                      };
                    });
                    eList = eListNew;
                    if (eList && eList.length) {
                      _ooption = [];
                      result[l].eList = eList;
                    
                      for (var i = 0; i < eList.length; i++) {
                        _ooption.push({ value: 0, name: eList[i].value });
                        result[l].rateList[eList[i].detail] = 0;
                      }
                      result[l].rateList.content = "";
                      this.ooption[l] = _ooption;
                    }
                    if (workEvaList[p].rate && eList && eList.length) {
                      _rate[l] = JSON.parse(workEvaList[p].rate);
                      _rateList[l] = Object.keys(
                        JSON.parse(workEvaList[p].rate)
                      );
                      for (var i = 0; i < _rateList[l].length; i++) {
                        var _c = Object.keys(result[l].rateList);
                        if (_c.indexOf(_rateList[l][i]) != -1) {
                          result[l].rateList[_rateList[l][i]] =
                            _rate[l][_rateList[l][i]];
                        }
                      }
                      for (var i = 0; i < this.ooption[l].length; i++) {
                        if (
                          _rateList[l].indexOf(this.ooption[l][i].name) != -1
                        ) {
                          this.ooption[l][i].value =
                            _rate[l][this.ooption[l][i].name];
                        }
                      }
                    } else {
                      _rate[l] = [];
                      _rateList[l] = [];
                    }
                  }
                } else {
                  _rate[l] = [];
                  _rateList[l] = [];
                }
              }
            }
          }

          this.worksDetail = result;
          console.log(' this.worksDetail', this.worksDetail);
    

          this.courseDetail = res.data[0][0];
// console.log('this.courseDetail',);

          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);
              }
              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 < result.length; c++) {
          //   let _stage = result[c].stagetask.split("-")[0];
          //   let _task = result[c].stagetask.split("-")[1];
          //     _dyList2[_stage].taskList.push(_dyList[_stage].taskList[_task]);
          //     _dyList2[_stage].taskList;
          // }
          for (var dc = 0; dc < _dyList.length; dc++) {
            // _dyList[dc].isOpen = dc === 0 ? true : false;
            _dyList[dc].isOpen = true;
          }

          for (var i = 0; i < result.length; i++) {
            for (var j = 0; j < _dyList.length; j++) {
              var sta = result[i].stagetask.split("-")[0];
              var ta = result[i].stagetask.split("-")[1];
              if (sta == _dyList[j].id) {
                for (var z = 0; z < _dyList[j].taskList.length; z++) {
                  if (ta == _dyList[j].taskList[z].id) {
                    _dyList[j].taskList[z].isWork = true;
                  }
                }
              }
            }
          }

          this.dyList2 = _dyList;
          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;
          if (type == 0) {
            if (index == 0) {
              this.isPre = true;
            } else {
              this.isPre = false;
            }
            if (index == 9) {
              this.isNext = true;
            } else {
              this.isNext = false;
            }
          }
				
          if(this.cutTabNum == 2){ 
            this.$nextTick(()=>{
              this.openTask2(con)
            })
          }else{
            this.$nextTick(()=>{
              this.openTask(con,this.chooseDy?this.chooseDy:0,this.chooseTask?this.chooseTask:0,this.chooseDy?this.dyList2.findIndex(i=>i.id==this.chooseDy):0,this.chooseTask?this.dyList2[this.dyList2.findIndex(i=>i.id==this.chooseDy)].taskList.findIndex(i=>i.id==this.chooseTask):0)
            })
          }
					
          // this.preStep();
          // this.nextStep();
        })
        .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(() => {
        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, t) {
      console.log('fff',f);
      
      this.pptImgUrl = f;
      if (t == 2) {
        this.showPDF = false;
      } else {
        this.showPDF = true;
      }
      this.dialogVisible6 = true;
    },
    openFile2(f) {
      this.pptImgUrl = f.wpptInfo;
      var fileA = [
        "DOC",
        "DOCX",
        "DOCM",
        "DOTM",
        "DOTX",
        "PPTX",
        "PPSX",
        "PPT",
        "PPS",
        "PPTM",
        "POTM",
        "PPAM",
        "POTX",
        "PPSM",
        "XLSX",
        "XLS",
      ];
      if (
        fileA.indexOf(
          this.pptImgUrl
            .split(".")
            [this.pptImgUrl.split(".").length - 1].toLocaleUpperCase()
        ) != -1
      ) {
        this.showPDF = false; //word 文件
      } else if (
        "pdf".indexOf(
          this.pptImgUrl
            .split(".")
            [this.pptImgUrl.split(".").length - 1].toLocaleLowerCase()
        ) != -1
      ) {
        this.showPDF = true; //pdf
      }
      this.dialogVisible6 = true;
    },
    //获取班级列表
    getClass() {
      let params = {
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "selectClassBySchool", params)
        .then((res) => {
          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 = "";
      if (this.typeCheck) {
        if (this.cutTabNum==0) {
          this.getWorks1()
        }
        if (this.cutTabNum==1) {
          this.getStageWorks2()
        }
        if (this.cutTabNum==2) {
          this.getTaskWorks2()
        }
      }else{
        if (this.cutTabNum==0) {
          this.getWorks()
        }
        if (this.cutTabNum==1) {
          this.getStageWorks()
        }
        if (this.cutTabNum==2) {
          this.getTaskWorks()
        }
      }

      // if (this.cutTabNum==0) {
      //   this.getWorks()
      // }
      // if (this.cutTabNum==1) {
      //   this.getStageWorks()
      // }
      // if (this.cutTabNum==2) {
      //   this.getTaskWorks()
      // }
      // this.getWorks();
    },
    searchWork2() {
      this.page = 1;
      // console.log(this.typeCheck);
      
      if (this.typeCheck) {
        if (this.cutTabNum==0) {
          this.getWorks1()
        }
        if (this.cutTabNum==1) {
          this.getStageWorks2()
        }
        if (this.cutTabNum==2) {
          this.getTaskWorks2()
        }
      }else{
        if (this.cutTabNum==0) {
          this.getWorks()
        }
        if (this.cutTabNum==1) {
          this.getStageWorks()
        }
        if (this.cutTabNum==2) {
          this.getTaskWorks()
        }
      }
      
      // this.getWorks();
    },
    // fullTools() {
    //   this.full = !this.full;
    // },
    //获取作业
    getWorks() {
      this.isLoading = true;
      var mr = this.mr;
      let params = {
        cid: this.id,
        uname: this.uname,
				choseClass:this.choseClass,
        stage: this.chooseDy,
        task: this.chooseTask,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getCourseWorks5", params) //getCourseWorks3
        .then((res) => {
          this.isLoading = false;
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData = res.data[0];
					this.classArray = res.data[1]
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    getWorks1() {
      this.isLoading = true;
      let params = {
        cid: this.id,
        uname: this.uname,
				choseClass:this.choseClass,
        stage: this.chooseDy,
        task: this.chooseTask,
      };
      this.ajax
        .get(this.$store.state.api + "getCourseWorks6", params) //getCourseWorks4
        .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() {
			this.studentLoading = true;
      let params = {
        cid: this.cid,
				choseClass:this.choseClass
      };
      this.ajax
        .get(this.$store.state.api + "getCourseWorksReport2", params)//getCourseWorksReport
        .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.studentLoading = false;
          this.dyList = dyList;
          this.userAarray = res.data[1];
          if (this.cutTabNum==0) {
            this.getWorks()
          }
          if (this.cutTabNum==1) {
            this.getStageWorks()
          }
          if (this.cutTabNum==2) {
            this.getTaskWorks()
          }
          // this.getWorks();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // getCourseDetail() {
    //   const loading = this.$loading.service({
    //     background: "rgba(255, 255, 255, 0.7)",
    //     target: document.querySelector(".student_table"),
    //   });
    //   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 });
    //         }
    //       }
    //       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].stagetask,
          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(stagetask, rateList, i) {
      // console.log(this.worksDetail[i]);
      
      // return console.log(stagetask, rateList, i);
      
      var arr = stagetask.split("-");
      let params = {
        cid: this.id,
        s: arr[0],
        t: arr[1],
        rate: rateList,
        uid: this.studentId,
      };
      const k = i;
      this.ajax
        .get(this.$store.state.api + "updateWorksEva", params)
        .then((res) => {
          // var _ooption = JSON.parse(JSON.stringify(this.ooption[k]));

          // 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 = 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].setOption(_option);
          // } else {
          //   this.setChart(_ooption);
          // }
          // 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",
          //   });
          // }
          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(w,id, uid, cid) {
      
      // this.scopeId = id;
      let params = {
        uid: uid,
        cid: cid,
      };
      this.ajax
        .get(this.$store.state.api + "selectAllWorksDetail", 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];
          // 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 linkInfo = res.data[5];
          var chooseInfo = res.data[6];
          var pjInfo = res.data[7]; //个人评价作业
          var xztkInfo = res.data[8]; //选择匹配作业
          var lccjInfo = res.data[9]; //排序作业
          var bgInfo = res.data[10]; //表格作业
          var cocopiInfo = res.data[11]; //cocopi或源码编辑作业
          var wordInfo = res.data[12]; //文档作业
          var workEvaList = res.data[13];
          this.scopeId = res.data[2].length ? res.data[2][0].id : this.sInfo.id;
          var workJson = {
            img: [],
            imgIndex: 0,
            eList: [],
            // rateList: {},
            askInfo: [],
            answerInfo: [],
            wpptInfo: [],
            chooseInfo: [],
            pjInfo: [],
            xztkInfo: [],
            lccjInfo: [],
            bgInfo: [],
            cocopiInfo: [],
            wordInfo: [],
          };

          

          var _title =
            "<h2>" +
            "第" +
            (w.stage + 1) +
            "阶段 " +
            (this.dyList[w.stage].name ? this.dyList[w.stage].name : `阶段${w.stage + 1}`) +
            "</h2>";

          var _subtitle =
            "<h3>" +
            "任务" +
            (w.task + 1) +
            " " +
            (this.dyList[w.stage].taskList[w.task].name ? this.dyList[w.stage].taskList[w.task].name : `任务${w.task + 1}`) +
            "</h3>";


          for (var i = 0; i < worksDetail.length; i++) {
            if (worksDetail[i].stage == w.stage && worksDetail[i].task ==  w.task) {
              workJson.img.push({
              src: worksDetail[i].content,
              id: i,
              score: worksDetail[i].score
                ? JSON.parse(worksDetail[i].score).wScore
                : worksDetail[i].score,
            });
            }
          }
          for (var i = 0; i < askInfo.length; i++) {
            if (askInfo[i].stage == w.stage && askInfo[i].task ==  w.task) {
              const element = askInfo[i];
              let a = JSON.parse(element.content)[0];
              let e = [];
              for (var y = 0; y < a.askJson.length; y++) {
                if (a.askJson[y].type == "2") {
                  e.push(JSON.parse(askInfo[i].content)[0].anwer[y]);
                } else {
                  e.push(JSON.parse(askInfo[i].content)[0].anwer[y]);
                }
              }
              a.radio = e;
              workJson.askInfo.push({
                askInfo: a,
                score: askInfo[i].score
                  ? JSON.parse(askInfo[i].score).wScore
                  : askInfo[i].score,
              });
            }
          }
          
          for (var i = 0; i < chooseInfo.length; i++) {
            if (chooseInfo[i].stage == w.stage && chooseInfo[i].task ==  w.task) {
              const element1 = chooseInfo[i];
              let t = JSON.parse(element1.content)[0].testJson;
              console.log('t',t);
              
              let e = [];
              for (var y = 0; y < t.testJson.length; y++) {
                if (t.testJson[y].type == "2") {
                  e.push(JSON.parse(chooseInfo[i].content)[0].anwer[y]);
                } else {
                  e.push(JSON.parse(chooseInfo[i].content)[0].anwer[y]);
                }
              }
              t.radio = e;
              workJson.chooseInfo.push({
                chooseInfo: t,
                score: chooseInfo[i].score
                  ? JSON.parse(chooseInfo[i].score).wScore
                  : chooseInfo[i].score,
              });
            }
           
          }
          for (var i = 0; i < answerInfo.length; i++) {
            if (answerInfo[i].stage == w.stage && answerInfo[i].task == w.task) {
              const element = answerInfo[i];
              workJson.answerInfo.push({
                answerInfo: JSON.parse(element.content)[0],
                score: answerInfo[i].score
                  ? JSON.parse(answerInfo[i].score).wScore
                  : answerInfo[i].score,
              });
            }
          }

          for (var i = 0; i < pjInfo.length; i++) {
            if (pjInfo[i].stage == w.stage && pjInfo[i].task == w.task) {
              var pj = pjInfo[i];
              console.log('pj',pj);
              
              var a =
                chapters[w.stage].chapterInfo[0].taskJson[
                  w.task
                ].toolChoose;
              var rateJson = [];
              for (var z = 0; z < a.length; z++) {
                if (a[z].tool[0] == 40) {
                  rateJson = a[z].rateJson;
                }
              }
              workJson.pjInfo.push({
                answer: JSON.parse(pj.content),
                rateJson: rateJson,
                score: pjInfo[i].score
                  ? JSON.parse(pjInfo[i].score).wScore
                  : pjInfo[i].score,
              });
            }
          }

          for (var i = 0; i < xztkInfo.length; i++) {
            if (xztkInfo[i].stage == w.stage && xztkInfo[i].task == w.task) {
              const element = xztkInfo[i];
              workJson.xztkInfo.push(element.content);
            }
          }

          if (lccjInfo.length > 0) {
            for (var i = 0; i < lccjInfo.length; i++) {
              if (lccjInfo[i].stage == w.stage && lccjInfo[i].task == w.task) {
                  var lccj = lccjInfo[i];
                  
                  workJson.lccjInfo.push({
                    lccjInfo: JSON.parse(lccj.content),
                    score: lccjInfo[i].score
                      ? JSON.parse(lccjInfo[i].score).wScore
                      : lccjInfo[i].score,
                  });
              }
            }
          }

          for (var i = 0; i < bgInfo.length; i++) {
            if (bgInfo[i].stage == w.stage && bgInfo[i].task == w.task) {
              var bg = bgInfo[i];
              workJson.bgInfo.push({
                bgInfo: JSON.parse(bg.content),
                score: bgInfo[i].score
                  ? JSON.parse(bgInfo[i].score).wScore
                  : bgInfo[i].score,
              });
            }
          }

          // for (var i = 0; i < cocopiInfo.length; i++) {
          //   if (cocopiInfo[i].stage == w.stage && cocopiInfo[i].task == w.task) {
          //     var cocopi = cocopiInfo[i];
          //     var c = ["DOT", "DOC", "DOCX", "PPT", "PPTX", "XLSX", "XLS"];
          //     var d = [
          //       "BMP",
          //       "PJP",
          //       "APNG",
          //       "PNG",
          //       "JPG",
          //       "GIF",
          //       "SVG",
          //       "JPEG",
          //       "JPG",
          //       "ICO",
          //       "PGPEG",
          //       "AVIF",
          //     ];
          //     var t = 0; //t = 1是图片 2是文档 3是pdf
          //     if (
          //       d.indexOf(
          //         cocopi.content
          //           .split(".")
          //           [cocopi.content.split(".").length - 1].toLocaleUpperCase()
          //       ) != -1
          //     ) {
          //       t = 1;
          //       workJson.cocopiInfo.push({
          //         url: cocopi.content,
          //         type: t,
          //         score: cocopiInfo[i].score
          //           ? JSON.parse(cocopiInfo[i].score).wScore
          //           : cocopiInfo[i].score,
          //       });
          //     } else if (
          //       c.indexOf(
          //         cocopi.content
          //           .split(".")
          //           [cocopi.content.split(".").length - 1].toLocaleUpperCase()
          //       ) != -1
          //     ) {
          //       t = 2;
          //       var a =
          //         "https://view.officeapps.live.com/op/view.aspx?src=" +
          //         encodeURIComponent(cocopi.content);
          //       workJson.cocopiInfo.push({
          //         url: a,
          //         type: t,
          //         score: cocopiInfo[i].score
          //           ? JSON.parse(cocopiInfo[i].score).wScore
          //           : cocopiInfo[i].score,
          //       });
          //     } else if (
          //       cocopi.content
          //         .split(".")
          //         [cocopi.content.split(".").length - 1].toLocaleUpperCase() ==
          //       "PDF"
          //     ) {
          //       t = 3;
          //       workJson.cocopiInfo.push({
          //         url: cocopi.content,
          //         type: t,
          //         score: cocopiInfo[i].score
          //           ? JSON.parse(cocopiInfo[i].score).wScore
          //           : cocopiInfo[i].score,
          //       });
          //     }
          //   }
          // }

          for (var i = 0; i < wordInfo.length; i++) {
            if (wordInfo[i].stage == w.stage && wordInfo[i].task == w.task) {
              var word = wordInfo[i];
              workJson.wordInfo.push({
                wordInfo: JSON.parse(word.content),
                score: wordInfo[i].score
                  ? JSON.parse(wordInfo[i].score).wScore
                  : wordInfo[i].score,
              });
            }
          }

          this.worksDetail = workJson;

          // this.courseDetail = res.data[0][0];

          this.$forceUpdate;

          var _course = `<h1>${w.course}</h1>`;
         
          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
              }</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].askInfo.askJson.askTitle}</h4>`;
              for (
                var j = 0;
                j < workJson.askInfo[i].askInfo.askJson.askJson.length;
                j++
              ) {
                var _div2 = document.createElement("div");
                _div2.innerHTML = `<h5>第${j + 1}题:${
                  workJson.askInfo[i].askInfo.askJson.askJson[j].askstitle
                }  选择:${
                  workJson.askInfo[i].askInfo.answer &&
                  workJson.askInfo[i].askInfo.answer.length > 0
                    ? workJson.askInfo[i].askInfo.answer[0]
                    : 1
                }</h5> `;
                var _div3 = document.createElement("div");
                for (
                  var z = 0;
                  z <
                  workJson.askInfo[i].askInfo.askJson.askJson[j].checkList
                    .length;
                  z++
                ) {
                  _div3.innerHTML += `<span style="margin-right:5px">${z + 1}.${
                    workJson.askInfo[i].askInfo.askJson.askJson[j].checkList[z]
                  }</span>`;
                }
                _div2.innerHTML += `<div>${_div3.innerHTML}</div>`;
                _div.innerHTML += `<div>${_div2.innerHTML}</div>`;
              }
              _ask += `<div>${_div.innerHTML}</div>`;
            }
          }
          var _xztkInfo = "";
          if (workJson.xztkInfo.length > 0) {
            var _xztkInfo = "<h3>选择匹配</h3>"
            // console.log('workJson.xztkInfo',workJson.xztkInfo);
            workJson.xztkInfo.forEach((e,i)=>{
              _xztkInfo += `<h6>${e}</h6>`;
            })
          }
          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].answerInfo.answerTitle}</h4>`;
              _div.innerHTML += `<div>${workJson.answerInfo[i].answerInfo.answer}</div>`;
              _answer += `<div>${_div.innerHTML}</div>`;
            }
          }

          var _link = "";
          if (linkInfo.length > 0) {
            for (var i = 0; i < linkInfo.length; i++) {
              if (linkInfo[i].stage == w.stage && linkInfo[i].task == w.task) {
                _link += `<div style="margin-top:10px"><a href='${linkInfo[i].content}'>${linkInfo[i].content}</a></div>`;
              }
            }
          }

          var _choose = "";
          if (workJson.chooseInfo.length > 0) {
            var _choose = "<h3>选择题</h3>";
            for (var i = 0; i < workJson.chooseInfo.length; i++) {
              var _div = document.createElement("div");
              _div.innerHTML = `<h4>标题:${workJson.chooseInfo[i].chooseInfo.testTitle}</h4>`;
              for (
                var j = 0;
                j < workJson.chooseInfo[i].chooseInfo.testJson.length;
                j++
              ) {
                var _div2 = document.createElement("div");
                _div2.innerHTML = `<h5>第${j + 1}题:${
                  workJson.chooseInfo[i].chooseInfo.testJson[j].teststitle
                }  选择:${
                  workJson.chooseInfo[i].chooseInfo.testJson[j].type == 1 ? workJson.chooseInfo[i].chooseInfo.radio[j] : workJson.chooseInfo[i].chooseInfo.radio[j].join(',')
                } 答案:${
                  workJson.chooseInfo[i].chooseInfo.testJson[j].answer
                }</h5> `;
                var _div3 = document.createElement("div");
                for (
                  var z = 0;
                  z <
                  workJson.chooseInfo[i].chooseInfo.testJson[j].checkList
                    .length;
                  z++
                ) {
                  _div3.innerHTML += `<span style="margin-right:5px">${z}.${
                    workJson.chooseInfo[i].chooseInfo.testJson[j].checkList[z]
                  }</span>`;
                }
                _div2.innerHTML += `<div>${_div3.innerHTML}</div>`;
                _div.innerHTML += `<div>${_div2.innerHTML}</div>`;
              }
              _choose += `<div>${_div.innerHTML}</div>`;
            }
          }
          var _lccjInfo = "";        
          if (workJson.lccjInfo.length>0) {
            if (workJson.lccjInfo[0].lccjInfo.length > 0) {
            var _lccjInfo = "<h3>排序<h3>";
              for (var i = 0; i < workJson.lccjInfo[0].lccjInfo.length; i++) {
                var _div = document.createElement("div");
                _div.innerHTML = `<h4>第${i+1}题${workJson.lccjInfo[0].lccjInfo[i].sentenceTitle}</h4> `;
                var _div2 = document.createElement("div");
                _div2.innerHTML+= ` 句子 ${i + 1}:${ workJson.lccjInfo[0].lccjInfo[i].addSentence.join(',')} 选择:${
                    workJson.lccjInfo[0].lccjInfo[i].chooseSenList.join(',') 
                  } 答案:${
                    workJson.lccjInfo[0].lccjInfo[i].rightAnswer.join(',') 
                  }`
                _div.innerHTML += `<div>${_div2.innerHTML}</div>`;
                _lccjInfo += `<div>${_div.innerHTML}</div>`;
              }
            }
          }
          

          var _bg = "";
          if (workJson.bgInfo.length > 0) {
            var _bg = "<h3>表格<h3>";
            for (var i = 0; i < workJson.bgInfo.length; i++) {
              var _div = document.createElement("div");
              _div.innerHTML = `<h4>${workJson.bgInfo[i].bgInfo.text}</h4> `;
              _bg += `<div>${_div.innerHTML}</div>`;
            }
          }


          var _word = "";
          if (workJson.wordInfo.length > 0) {
            var _word = "<h3>文档<h3>";
            for (var i = 0; i < workJson.wordInfo.length; i++) {
              var _div = document.createElement("div");
              _div.innerHTML = `<h4>${workJson.wordInfo[i].wordInfo.text}</h4> `;
              _word += `<div>${_div.innerHTML}</div>`;
            }
          }

          var _html =
            _course +
            _title +
            _subtitle +
            _img +
            _xztkInfo +
            _ask +
            _answer +
            _link +
            _choose +
            _lccjInfo +
            _bg +
            _word;
          this.generate(_html,w);
        })
        .catch((err) => {
          console.error(err);
        });
    },

    isOpen(s) {
      // this.stageIndex = s;
      this.dyList2[s].isOpen = !this.dyList2[s].isOpen;
    },
    openTask(s, i, dyi, navi) {
      // console.log('openTask2',con,s, i, dyi, navi);

      if (!this.dyList2[dyi].taskList[navi].isWork) {
        this.$message.warning("该任务暂时没提交作业");
      } else {
        const element = document.getElementById(`${s}+${i}`);
        if (element) {
          element.scrollIntoView();
          setTimeout(()=>{
            let scrollBody = document.querySelector(".zyBoxC").parentElement
            scrollBody.scrollTop = scrollBody.scrollTop - 70
          }, 0);
          // function scrollToElement(elementA) {
          //   return new Promise((resolve) => {
          //     const observer = new IntersectionObserver((entries) => {
          //       if (entries[0].isIntersecting) {
          //         observer.disconnect(); // 停止观察
          //         setTimeout(() => {
          //           resolve(); // 延迟以确保滚动完成
          //         }, 300); // 可以调整延迟时间
          //       }
          //     }, { threshold: [1] }); // 阈值设为 1 确保完全可见

          //     elementA.scrollIntoView({ behavior: 'smooth', block: "start" });
          //     // elementA.scrollIntoView();
          //     observer.observe(elementA);
          //   });
          // }


          // // 使用示例
          // scrollToElement(element).then(()=>{
          //   let scrollBody = document.querySelector(".zyBoxC").parentElement
          //   setTimeout(() => {
          //     scrollBody.scrollTop = scrollBody.scrollTop - 70;
          //   }, 100); // 调整时间确保足够长
          // });
        }
        var a = s + "-" + i;
        // var b = document.getElementById(a);
        // var d = b.getAttribute("scrollindex");
        // c.scrollTop = parseInt(d) * 375;
        this.stageIndex = s;
        this.taskCount = i;
        this.navId = a;
      }
    },
    openTask2(con) {
      console.log(con);
      
      let s = con.stage
      let i = con.task

      const element = document.getElementById(`${s}+${i}`);
      if (element) {
        element.scrollIntoView();
        setTimeout(()=>{
          let scrollBody = document.querySelector(".zyBoxC").parentElement
          scrollBody.scrollTop = scrollBody.scrollTop - 70
        }, 0);
        // function scrollToElement(elementA) {
        //     return new Promise((resolve) => {
        //       const observer = new IntersectionObserver((entries) => {
        //         if (entries[0].isIntersecting) {
        //           observer.disconnect(); // 停止观察
        //           setTimeout(() => {
        //             resolve(); // 延迟以确保滚动完成
        //           }, 300); // 可以调整延迟时间
        //         }
        //       }, { threshold: [1] }); // 阈值设为 1 确保完全可见

        //       elementA.scrollIntoView({ behavior: 'smooth', block: "start" });
        //       // elementA.scrollIntoView();
        //       observer.observe(elementA);
        //     });
        //   }


        //   // 使用示例
        //   scrollToElement(element).then(()=>{
        //     let scrollBody = document.querySelector(".zyBoxC").parentElement
        //     setTimeout(() => {
        //       scrollBody.scrollTop = scrollBody.scrollTop - 70;
        //     }, 100); // 调整时间确保足够长
        //   });
      }
      var a = s + "-" + i;
    
      this.stageIndex = s;
      this.taskCount = i;
      this.navId = a;

    },
    async generate(a,w) {
      // 将html文件中需要用到的数据挂载到store上
      this.$store.commit("update", ["report", a]);
      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 = w.course + "-"+ (this.dyList[w.stage].name ? this.dyList[w.stage].name : `阶段${w.stage+1}`) +"-" + (this.dyList[w.stage].taskList[w.task].name ? this.dyList[w.stage].taskList[w.task].name : `任务${w.task+1}`) + '-' +w.sName + ".html";
      // link.download = "报告.html"; // 文件名
      console.log('dname',dname);
      
      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"
      // );
    },
    preStep() {
      var uid = "";
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.scopeId1 == this.tableData[i].id) {
          if (i - 1 == 0) {
            this.isPre = true;
          } else {
            this.isPre = false;
          }
          if (i - 1 < 9) {
            this.isNext = false;
          }
          uid = this.tableData[i - 1].userid;
          this.lookWork(this.tableData[i - 1].id, uid, 1);
          break;
        }
      }
    },
    nextStep() {
      var uid = "";
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.scopeId1 == this.tableData[i].id) {
          if (i + 1 == 9) {
            this.isNext = true;
          } else {
            this.isNext = false;
          }
          if (i + 1 > 0) {
            this.isPre = false;
          }
          uid = this.tableData[i + 1].userid;
          this.lookWork(this.tableData[i + 1].id, uid, 1);
          break;
        }
      }
    },
  },
  created() {
    this.page = 1;
    this.isLoading = true;
    this.getCourseDetail();
    this.getClass();
    this.getGroup();
  },
};
</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; */
  padding: 20px 0;
}

.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; */
  padding: 40px 30px 10px;
  border-radius: 5px;
  width: 90%;
  box-shadow: 2px 2px 5px #909090;
  /* overflow: auto; */
}
.sd_score .score_boxTit{
  margin-top: 20px;
  /* padding: 0 30px; */
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
}
.RootImg{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-20px,-50%);
}
.RootImgBlock{
    width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd_score .score_boxTit > span{
  border-left: 3px solid rgba(54, 129, 252, 1);
  padding-left: 5px;
}

.sd_score .score_box {
  display: flex;
  align-items: center;
  font-size: 14px !important;
  /* justify-content: flex-start; */
  justify-content: space-between;
  margin-bottom: 15px;
  /* margin: 10px 0 0 30px; */
  margin: 10px 0;
  position: relative;
  margin-left: 19px;
}
.sd_score .score_box > span:nth-child(1) {
  margin-right: 20px;
  /* text-align-last: justify; */
  /* max-width: 300px; */
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.sd_score .score_box:last-child {
  margin-bottom: 0;
}

.rate_size >>> .el-rate__icon {
  font-size: 22px;
}

.rate_size >>> .el-icon-star-off {
  font-size: 22px;
}

.sd_score > span:nth-child(1) {
  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;
}
.worksTarget {
  margin: 15px 0;
  border-left: 3px solid rgba(54, 129, 252, 1);
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
}
.worksTarget > span {
  margin-left: 5px;
}
.worksTargetCon {
  background: rgba(243, 247, 253, 1);
  margin: 0 30;
  padding: 10px;
  border-radius: 5px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.worksTargetCon > div {
  margin-bottom: 10px;
}
.worksTargetCon > div:last-child{
  margin: 0 !important;
}
.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%;
  /* min-width: 1246px; */
  /* margin-bottom: 10px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px 15px;
  box-sizing: border-box;
  z-index: 99;
  background-color:#ededed;
  position: sticky;
    top: 0;
}

.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;
}

.isClick {
  /* border: 3px solid #5f89d4; */
  border-radius: 5px;
	font-weight: bold;
}

.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; */
  flex-direction: column;
  min-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;
  border-radius: 5px;
}

.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;
}
.worksDialogCSS >>> .el-dialog__header {
  /* padding: 9px 20px 10px; */
  background: #32455b !important;
}

.worksDialogCSS >>> .el-dialog__body {
  width: 850px !important;
}
.worksDialogCSS >>> .el-dialog {
  width: 888px !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 {
  overflow: hidden;
}

.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: 0px;
}

.a_addBox2 {
  margin: 10px 0;
  background: #fff;
  padding: 15px;
}

.a_addBox {
  margin: 10px 0;
  background: #fff;
  padding: 0 15px;
  /* max-height: 400px; */
  /* max-height: 160px; */
  /* overflow: auto; */
}

.a_add_box,
.isAddBox {
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

.isAddBox {
  border: none;
}

.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_body >>> .el-radio__label{
font-size: 14px !important;
}

.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;
}

.redioStyle5 >>> .el-radio__label {
  font-size: 14px;
  color: #06a7ff !important;
}
.redioStyle2 >>> .el-radio__label {
  font-size: 14px;
}

.redioStyle3 >>> .el-checkbox__label {
  font-size: 14px;
  color: #06a7ff !important;
}
.redioStyle4 >>> .el-checkbox__label {
  font-size: 14px;
}

.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),
.txName > div:nth-child(3) {
  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: #49a0f0;
  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: 95%;
  margin: 0 0 0 20px;
  padding: 10px 0 10px 0;
  border-bottom: 2px solid #eee;
}

.right_top {
  width: 53%;
}

.cBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  width: 100%;
  height: calc(100% - 60px);
  padding: 0 20px 15px;
  box-sizing: border-box;
  /* overflow: auto; */
}

.right_score {
  min-width: 370px;
  min-height: 351px;
  margin-left: 10px;
}

.pb_left {
  width: 20%;
  margin-right: 10px;
  background: rgb(255, 255, 255);
  /* padding-right: 10px; */
  /* height: 500px; */
  /* height:calc(100% - 65px); */
  height: calc(100vh - 178px);
  overflow: auto;
  /* min-height: 800px; */
  border-radius: 5px;
  position: sticky;
  top: 70px;
}


.cTitle {
  background: #205cc6;
  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, #477cd7, #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: #96d1ff;
  width: 55px;
  min-width: 55px;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  height: 20px;
  line-height: 26px;
  font-size: 14px;
}

.isWorkCss {
  min-width: 20px;
  height: 20px;
  margin: 0 5px 0 10px;
}

.isWorkCss > img {
  width: 100%;
  height: 100%;
}

.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: 80%;
  flex-wrap: nowrap;
  /* overflow: auto; */
  /* height: 500px; */
  height: 100%;
}
.shuBox > .allBox:last-child {
  margin-bottom: 0;
}
.answerbox {
  display: flex;
  flex-direction: row;
  /* align-items: center; */
  margin-bottom: 20px;
  font-size: 16px;
}

.answerbox > div:nth-child(2) {
  margin-left: 15px;
}

.answerbox1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
}

.answerbox1 > div:nth-child(2) {
  margin-left: 10px;
  /* width: 265px; */
  max-height: 147px;
  overflow: auto;
}

.jdName {
  width: 100%;
}

.worksDialogCSS >>> .el-dialog {
  /* margin: 0 !important; */
  height: 100%;
}

.worksDialogCSS >>> .el-dialog__body {
  height: calc(100% - 100px);
}

.openTaskActive {
  color: #4386e6;
	font-weight: bold;
}

.isClick {
  background: #4d9def;
}

.buttonCss {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  margin: 0px 0 20px;
  padding: 0 20px;
  box-sizing: border-box;
}

.fullStyle >>> .el-dialog__body {
  height: calc(100% - 40px) !important;
  /* height: 100%; */
  overflow: auto;
}

.fullStyle >>> .el-dialog,
.fullStyle {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
.worksTimeBlack{
  /* padding: 0 30px; */
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(0, 0, 0, 0.9);
}
.worksTimeBlack > .worksTimeBlackTit{
  font-size: 18px;
  font-weight: 600;
}

.worksTime {
  /* position: absolute;
  top: 10px;
  right: 20px; */
  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%;
}
.topButton {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.topButton >>> .el-button {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
.topButton >>> .el-button:hover {
  color: #606266;
  border-color: #dcdfe6;
  background-color: #fff;
}
.radioBox {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* align-items: center; */
}
.radioBox >>> .el-radio {
  margin-bottom: 5px;
}

.radioBox >>> .el-checkbox {
  margin-bottom: 5px;
}

.radioBox > div {
  margin: 10px 0 0 10px;
}
.radioBox >>> .el-radio__input,
.radioBox >>> .el-checkbox__inner {
  margin-left: 10px;
}
.radioBox >>> .el-radio,
.radioBox >>> .el-checkbox {
  display: flex;
  align-items: center;
}
.inImg {
  width: 100px;
}
.inImg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.xuan_right_box {
  padding: 10px;
  background: rgb(247, 247, 247);
  margin: 10px 12px;
  border-radius: 5px;
}
.tool_right_box {
  display: flex;
  align-items: center;
}
.tool_right_box + .tool_right_box {
  margin-top: 10px;
}
.right_box_xuan,
.allRightBox > span:nth-child(2) {
  background: rgb(0 123 255);
  color: #fff;
  border-radius: 5px;
  padding: 5px;
  margin-left: 10px;
}
.allRightBox {
  padding: 10px 12px;
}
.typeCheck {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 10px;
  /* margin-bottom: 20px; */
}

.typeCheck > span {
  margin-left: 10px;
}
.contentAuto {
  width: 100%;
  /* height: 253px; */
  overflow: auto;
}
.evalCss {
  background: #fff;
  font-size: 18px;
}

.middleBox {
  padding: 20px 0 15px 0;
}

.pfBox {
  padding-bottom: 30px;
}

.nameAndrate {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding-bottom: 10px;
  height: 30px;
  line-height: 30px;
  width: 100%;
}

.nameAndrate > div {
  margin-left: 10px;
  color: #000;
  height: 30px;
}

.nameAndrate >>> .el-rate__icon {
  font-size: 28px !important;
}

.pfBox > div:nth-child(2) {
  background: #f7f6f9;
  min-height: 45px;
  border-radius: 10px;
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 20px;
  box-sizing: border-box;
  color: #000;
}

.bz {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  width: 100%;
}

.bz > div {
  padding: 0 10px;
}
.pj {
  font: inherit;
  color: currentColor;
  width: 100%;
  margin: 0;
  padding: 15px 14px;
  display: block;
  min-width: 0;
  outline: none;
  box-sizing: content-box;
  background: none;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
}
.select_box2_box {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}
.select_box2_img {
  width: 70%;
  height: 100%;
  overflow: auto;
  background: #fff;
  border-radius: 5px;
  margin-top: 10px;
}

.select_box2_img img {
  width: 100%;
}

.select_box2_answer_box {
  margin: 0 0 10px 20px;
  width: 85%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.select_box2_answer_box >>> .el-input.is-disabled .el-input__inner {
  color: #000;
}
.rightWidthCss {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.rightAnswer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  color: red;
  margin-bottom: 31px;
}

.rightAnswerCss {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  padding-top: 30px;
}

.blueCss {
  color: #767de1;
  margin-left: 10px;
}

.redCss {
  color: red;
}
.sentenBox {
  background: #fff;
  /* background-image: url("../../../assets/icon/conSentences/stuBg.png"); */
  /* background-position: 102%; */
  /* background-repeat: no-repeat; */
  /* background-size: 60%; */
}
.isWrong {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
}
.cardList,
.cardList1 {
  padding: 10px 0 10px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid #f4f4f4;
  width: 98%;
  margin: 0 auto;
  min-width: 60%;
  max-width: 85%;
}

.cardList1 {
  padding: 10px 0 10px 10px !important;
  margin: 0 !important;
}
.cardBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}

.cardBox > div {
  margin-bottom: 10px;
}

.isCard,
.isCard1 {
  width: 130px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  font-size: 20px;
  cursor: pointer;
  background-image: url("../../../assets/icon/conSentences/titleBorder.png");
  background-size: cover;
  transition: all 2s;
  margin-right: 20px;
}

.isCard > div,
.isCard1 > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 75%;
  margin: 0 auto;
  font-size: 16px;
}
.cardAnswerBox {
  font-size: 16px;
  width: 97%;
  border: 5px;
  padding: 0;
  border-radius: 5px;
  margin: 10px auto;
  word-break: break-word;
}
.answerRight {
  width: 25%;
}

.isTj {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 100px;
}

.isTj > div:nth-child(2) {
  color: #727070;
  margin-left: 5px;
}

.isTjImg {
  width: 20px;
  height: 20px;
}

.isTjImg > img {
  width: 100%;
  height: 100%;
}
/* table 样式 */
.cont >>> table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.cont >>> table td,
.cont >>> table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 15px 5px;
  max-width: 0px;
}

.cont >>> table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
.cont >>> blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}
/* code 样式 */
.cont >>> code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}

.cont >>> pre code {
  display: block;
}

/* ul ol 样式 */
.cont >>> ul,
ol {
  margin: 10px 0 10px 20px;
}

.workImg {
  width: 90%;
  /* height: calc(100% - 40px); */
  height: 105px;
  position: relative;
}

.workImg > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}
.cutTab {
  display: flex;
  margin: 10px 0;
}
.cutTab > .ctrlBtn {
  margin-right: 15px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 14px;
}
.cutTab > .ctrlBtn2 {
  cursor: pointer;
  margin-right: 15px;
  border-bottom: 3px #409EFF solid;
  font-weight: 600;
  font-size: 14px;
  padding: 5px 0;
  color: #409EFF;
}
</style>