pbl-student-table/src/components/works.vue

<template>
  <div class="pb_content" style="background:#fff;">
    <div class="pb_content_body">
      <div class="body_student">
        <div class="student_head">
          <div class="box_course">
            <div class="wheel">
              <img
                :src="
                  studentMessage.headportrait != null
                    ? studentMessage.headportrait
                    : tx
                "
                alt=""
              />
            </div>
            <div class="right_box">
              <div class="right_box_title">{{ studentMessage.name }}</div>
              <div class="people">
                <div>
                  <span>班级：</span><span>{{ studentMessage.cname }}</span>
                </div>
                <div style="margin-left: 50px">
                  <span>所属学校：</span><span>{{ studentMessage.sname }}</span>
                </div>
              </div>
              <div>
                <span>手机号码：</span
                ><span>{{ studentMessage.phonenumber }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="student_body" v-if="!dialogVisible">
          <div class="student_table">
            <el-table
              ref="table"
              :data="tableData1"
              border
              :height="tableHeight"
              :fit="true"
              style="width: 100%"
              :header-cell-style="{ background: '#f1f1f1', fontSize: '17px' }"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                prop="title"
                label="项目"
                min-width="30"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="uname"
                label="创建人"
                min-width="30"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="time"
                label="时间"
                min-width="20"
                align="center"
              ></el-table-column>
              <el-table-column label="操作" min-width="30">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="small"
                    @click="exportPdfSet(scope.row)"
                    >查看作业</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="student_page" style="padding: 10px 0;">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="10"
              :total="total"
              v-if="page"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </div>
        </div>
      </div>
      <el-dialog 
          :visible.sync="dialogVisible3" 
          :append-to-body="true" 
          v-loading="loading"
          :before-close="handleClose"
          width="100%"
          class="dialog_diy2 max_diy" 
          :class="{ fullStyle: full }">
          <div slot="title" class="header-title">
            <div style="color: #fff">查看作业</div>
            <div style="position: absolute; top: 14px; right: 50px">
              <img src="../assets/full.png" style="height: 14px; cursor: pointer" alt="" @click="fullTools" />
            </div>
          </div>
          <div class="titBri">
            <div class="claInfo">
              <img
                src="https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/static/img/portal.b3cf7fa.png"
                alt=""
              />
              <span>{{ studentMessage.name }}</span>
              <span>{{ courseName }}</span>
            </div>
            <div>
            </div>
          </div>
          <div class="pageCon">
            <div class="rightBar">
              <el-col style="width: 100%" :span="12">
                <el-menu
                  default-active="2"
                  :default-openeds="['0']"
                  active-text-color="#409EFF"
                  class="el-menu-vertical-demo"
                >
                  <el-submenu
                    :index="i.id"
                    v-for="i in dyList"
                    :key="i.id"
                    :collapse="false"
                     @open="handleOpen"
                    @close="handleCloseSub"
                  >
                    <template slot="title">
                      <div class="eliP">
                        {{ "第" + (i.id * 1 + 1) + "阶段" }}:{{ i.name }}
                      </div>
                    </template>
                    <el-menu-item-group>
                      <el-menu-item
                        v-for="(k, kin) in i.taskList"
                        :key="k.id"
                        :index="i.id+'-'+k.id"
                         @click="positT(k.id)"
                        style="display: flex; align-items: center"
                      >
                        <div class="TitBti">
                          任务{{ kin + 1 }}
                        </div>
                        <div class="eliP">
                          {{ k.name }}
                        </div>
                      </el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                </el-menu>
              </el-col>
            </div>

            <div class="workCon">
              <div style="width: 100%;">
                <div
                  v-for="i in workList"
                  :key="i.id"
                  v-if="isStage(i.taskList)"
                  class="stageCon"
                >
                  <div v-if="CState != 5" class="stageTit">阶段{{ i.id + 1 }}:{{ i.name }}</div>

                  <div
                    v-for="(k, kIndex) in i.taskList"
                    :key="k.task + 'a'"
                    style="margin-bottom: 15px"
                    v-if="isTask(k.toolEList)"
                  >
                    <div
                      style="
                          width: 100%;
                          display: flex;
                          justify-content: space-between;
                          margin-bottom: 10px;
                        "
                      :id="k.stage + '-' + k.task"
                    >
                      <div class="taskTitInd">
                        <span class="TitBti">任务{{ k.task + 1 }}</span>
                        <span>{{ k.taskTit }}</span>
                      </div>
                      <div></div>
                    </div>
                    <div v-if="k.taskDetail" class="taskBri">
                      <div v-html="k.taskDetail"></div>
                    </div>
                    <div
                      v-for="(l, lind) in k.toolEList"
                      :key="lind + 'l'"
                      class="toolEListCon"
                    >
                      <div
                        style="position: relative;"
                        v-if="l.content && l.content.length"
                      >
                        <div class="JSCo" v-if="l.score">
                          <div>评分：{{ JSON.parse(l.score).wScore }}</div>
                          <div class="JSCoTxt">
                            <el-tooltip
                              class="item"
                              effect="dark"
                              :content="JSON.parse(l.score).detail"
                              placement="top"
                            >
                              <div>
                                {{ JSON.parse(l.score).detail }}
                              </div>
                            </el-tooltip>
                          </div>
                        </div>
                        <div v-if="l.tool[0] == 15">
                          <div class="toolBlk">
                            <img
                              class="toolImg"
                              src="../assets/icon/thirdToolList/answer.png"
                              alt=""
                            />
                            <div class="toolTit">
                              <div>工具{{ lind + 1 }}：问答工具</div>
                              <div>提问：{{ l.content[0][0].answerTitle }}</div>
                            </div>
                          </div>
                          <div class="answerTxt">
                            回答:{{ l.content[0][0].answer }}
                          </div>
                        </div>
                        <div v-if="l.tool[0] == 52">
                          <div class="toolBlk">
                            <img
                              class="toolImg"
                              src="../assets/icon/fourthToolList/text.png"
                              alt=""
                            />
                            <div class="toolTit">
                              <div>工具{{ lind + 1 }}：文档工具</div>
                              <div>
                                根据前期的了解与实地调研对于项目的了解，进行思考与讨论提出问题。
                              </div>
                            </div>
                          </div>
                          <div class="answerTxt" v-html="l.content[0].text"></div>
                        </div>
                        <div v-if="l.tool[0] == 16 || l.tool[0] == 50">
                          <div class="toolBlk">
                            <img
                              class="toolImg"
                              v-if="l.tool[0] == 16"
                              src="../assets/icon/thirdToolList/work.png"
                              alt=""
                            />
                            <img
                              class="toolImg"
                              v-if="l.tool[0] == 50"
                              src="../assets/icon/thirdToolList/plwork.png"
                              alt=""
                            />
                            <div class="toolTit">
                              <div>
                                工具{{ lind + 1 }}：{{
                                  l.tool[0] == 16 ? "作业提交" : "批量上传"
                                }}
                              </div>
                              <div>
                                根据前期的了解与实地调研对于项目的了解，进行思考与讨论提出问题。
                              </div>
                            </div>
                          </div>
                          <div v-for="(i, codex) in l.content" :key="codex + 'co'">
                            <div class="answerTxt" v-html="i"></div>
                          </div>
                        </div>
                        <div
                          v-if="l.tool[0] == 7 || l.tool[0] == 1 || l.tool[0] == 3"
                        >
                          <div class="toolBlk">
                            <img
                              class="toolImg"
                              v-if="l.tool[0] == 1"
                              src="../assets/icon/secondToolList/whiteBoard.png"
                              alt=""
                            />
                            <img
                              class="toolImg"
                              v-if="l.tool[0] == 3"
                              src="../assets/icon/secondToolList/mindMapping.png"
                              alt=""
                            />
                            <img
                              class="toolImg"
                              v-if="l.tool[0] == 7"
                              src="../assets/icon/secondToolList/mindNetwork.png"
                              alt=""
                            />
                            <div class="toolTit">
                              <div>
                                工具{{ lind + 1 }}：{{
                                  l.tool[0] == 1
                                    ? "电子白板"
                                    : l.tool[0] == 7
                                    ? "思维网格"
                                    : "思维导图"
                                }}
                              </div>
                              <div>
                                根据前期的了解与实地调研对于项目的了解，进行思考与讨论提出问题。
                              </div>
                            </div>
                          </div>
                          <img
                            @click.stop="previewImg(l.content[0])"
                            style="max-width: 200px"
                            :src="l.content[0]"
                            alt=""
                          />
                          <div>{{ l.content[0] }}</div>
                        </div>
                        <div v-if="l.tool[0] == 48">
                          <div class="toolBlk">
                            <img
                              class="toolImg"
                              src="../assets/icon/fourthToolList/table.png"
                              alt=""
                            />
                            <div class="toolTit">
                              <div>工具{{ lind + 1 }}：表格</div>
                              <div>
                                根据前期的了解与实地调研对于项目的了解，进行思考与讨论提出问题。
                              </div>
                            </div>
                          </div>
                          <el-form>
                            <div class="cont" v-html="l.content[0].text"></div>
                          </el-form>
                        </div>
                        <div v-if="l.tool[0] == 4">
                          <div class="toolBlk">
                            <img
                              class="toolImg"
                              src="../assets/icon/thirdToolList/ask.png"
                              alt=""
                            />
                            <div class="toolTit">
                              <div>工具{{ lind + 1 }}：问卷调查</div>
                              <div>标题:{{ l.content[0][0].askJson.askTitle }}</div>
                            </div>
                          </div>

                          <div
                            style="margin-bottom: 5px"
                            v-for="(i, index) in l.content[0][0].askJson.askJson"
                            :key="index"
                          >
                            <div>题目：{{ i.askstitle }}</div>
                            <el-radio-group
                              v-if="!i.type"
                              v-model="l.content[0][0].anwer[index]"
                            >
                              <el-radio
                                v-for="(item2, checkIndex) in i.checkList"
                                :key="checkIndex + 'b'"
                                :label="checkIndex"
                                disabled
                              >
                                {{ item2 }}
                              </el-radio>
                            </el-radio-group>
                            <el-checkbox-group
                              v-model="l.content[0][0].anwer[index]"
                              v-else
                            >
                              <div class="radioBox">
                                <el-checkbox
                                  v-for="(item2, checkIndex) in i.checkList"
                                  :key="checkIndex + 'c'"
                                  :label="checkIndex"
                                  disabled
                                >
                                  {{ item2 }}
                                </el-checkbox>
                              </div>
                            </el-checkbox-group>
                          </div>
                        </div>
                        <div v-if="l.tool[0] == 45">
                          <div class="toolBlk">
                            <img
                              class="toolImg"
                              src="../assets/icon/thirdToolList/choose.png"
                              alt=""
                            />
                            <div class="toolTit">
                              <div>工具{{ lind + 1 }}：选择题</div>
                              <div>
                                根据前期的了解与实地调研对于项目的了解，进行思考与讨论提出问题。
                              </div>
                            </div>
                          </div>
                          <div
                            v-for="(i, index) in l.content[0].testJson"
                            :key="index + 'm'"
                          >
                            <div>题目:{{ i.teststitle }} 

                              <span                             
                                style="color: #868ce4"
                                >答案：</span
                              >
                              <span
                                v-if="
                                  JSON.stringify(l.content[0].radio[index]) ==
                                    JSON.stringify(i.answer)
                                "
                                style="color: #868ce4"
                                >回答正确</span
                              >
                              <span v-else style="color: red">回答错误</span>
                            </div>
                            <div
                              v-if="i.type == 1"
                              style="display: flex; flex-direction: column"
                            >
                              <el-radio-group v-model="l.content[0].radio[index]">
                                <div class="radioBox">
                                  <el-radio
                                    v-for="(item2, checkIndex) in i.checkList"
                                    :key="checkIndex + 'b'"
                                    :label="checkIndex"
                                    disabled
                                    :class="[
                                      i.answer == checkIndex
                                        ? 'redioStyle5'
                                        : 'redioStyle2'
                                    ]"
                                  >
                                    <div
                                      v-if="
                                        item2 && item2.imgType && item2.imgType == 1
                                      "
                                    >
                                      <div
                                        class="inImg"
                                        @click.stop="previewImg(item2.src)"
                                      >
                                        <img
                                          style="display: block"
                                          :src="item2.src"
                                          alt=""
                                        />
                                      </div>
                                    </div>
                                    <span v-else v-html="item2"></span>
                                  </el-radio>
                                </div>
                              </el-radio-group>
                            </div>
                            <div class="radioBox">
                              <el-checkbox-group
                                v-model="l.content[0].radio[index]"
                                v-if="i.type == '2'"
                              >
                                <div class="radioBox">
                                  <el-checkbox
                                    v-for="(item2, checkIndex) in i.checkList"
                                    :key="checkIndex + 'c'"
                                    :label="checkIndex"
                                    disabled
                                    :class="[
                                      i.answer.includes(checkIndex)
                                        ? 'redioStyle3'
                                        : 'redioStyle4'
                                    ]"
                                  >
                                    <div style="display: flex">
                                      <div
                                        v-if="
                                          item2 && item2.imgType && item2.imgType == 1
                                        "
                                      >
                                        <div
                                          class="inImg"
                                          @click.stop="previewImg(item2.src)"
                                        >
                                          <img
                                            style="display: block"
                                            :src="item2.src"
                                            alt=""
                                          />
                                        </div>
                                      </div>
                                      <span v-else v-html="item2"></span>
                                    </div>
                                  </el-checkbox>
                                </div>
                              </el-checkbox-group>
                            </div>
                          </div>
                        </div>
                        <!-- 选择匹配 -->
                        <div v-if="l.tool[0] == 41">
                          <div class="toolBlk">
                            <img
                              class="toolImg"
                              src="../assets/icon/thirdToolList/select.png"
                              alt=""
                            />
                            <div class="toolTit">
                              <div>工具{{ lind + 1 }}：选择匹配</div>
                              <div>
                                根据前期的了解与实地调研对于项目的了解，进行思考与讨论提出问题。
                              </div>
                            </div>
                          </div>
                          <img
                            @click.stop="previewImg(l.selectJson.url)"
                            style="max-width: 200px"
                            :src="l.selectJson.url"
                            alt=""
                          />
                          <div>
                            <span style="margin-right: 10px">选项:</span
                            ><span
                              style="margin-right: 10px"
                              v-for="(item, itInd) in l.selectJson.select"
                              :key="itInd"
                              >{{ item }}</span
                            >
                           
                          </div>
                          <div style="margin: 10px 0;">
                            <span style="margin-right: 10px">回答:</span>

                            <div
                              style="margin-right: 10px"
                              v-for="(item, itInd) in l.content[0]"
                              :key="itInd"
                              >选项{{ itInd + 1 }}：{{ l.selectJson.select[item] }}
                              <span
                                v-if="
                                  l.selectJson.answer[itInd] ==
                                    l.content[0][itInd]
                                "
                                style="color: #868ce4"
                                >回答正确</span
                              >
                              <span v-else style="color: red">回答错误</span>
                              </div
                            >

                            
                          </div>
                          <div>
                            <span style="margin-right: 10px">答案:</span>

                            <span
                              style="margin-right: 10px"
                              v-for="(item, itInd) in l.selectJson.answer"
                              :key="itInd"
                              >选项{{ itInd + 1 }}：{{ l.selectJson.select[item] }}</span
                            >
                          </div>
                        </div>

                        <!-- 排序 -->
                        <div v-if="l.tool[0] == 47">
                          <div class="toolBlk">
                            <img
                              class="toolImg"
                              src="../assets/icon/fourthToolList/conSentences.png"
                              alt=""
                            />
                            <div class="toolTit">
                              <div>工具{{ lind + 1 }}：排序</div>
                              <div>
                                根据前期的了解与实地调研对于项目的了解，进行思考与讨论提出问题。
                              </div>
                            </div>
                          </div>
                          <div
                            v-for="(i, index) in l.content[0]"
                            :key="index"
                            style="margin-bottom: 10px"
                          >
                            <div
                              style="
                                  height: 20px;
                                  display: flex;
                                  align-items: center;
                                  flex-wrap: wrap;
                                "
                            >
                              题目:
                              <div
                                class="sortTool"
                                v-for="(i, index) in i.addSentence"
                                :key="index"
                              >
                                {{ i }}
                              </div>
                              <span
                                v-if="
                                  JSON.stringify(i.chooseSenList) ==
                                    JSON.stringify(i.addSentence)
                                "
                                style="color: #868ce4"
                                >回答正确</span
                              >
                              <span v-else style="color: red">回答错误</span>
                            </div>
                            <div
                              style="
                                  margin: 10px 0;
                                  display: flex;
                                  align-items: center;
                                  flex-wrap: wrap;
                                "
                            >
                              回答:
                              <div
                                class="sortTool"
                                v-for="(i, index) in i.chooseSenList"
                                :key="index"
                              >
                                {{ i }}
                              </div>
                            </div>
                            <div>
                              正确答案:
                              <span style="margin: 0 5px">{{
                                i.addSentence.join(",")
                              }}</span>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- ai作业得分  -->
                      <div
                        class="taskSco"
                        v-if="l.content && l.content.length && l.eList && CState == 5"
                      >
                        <div class="taskScoTit">
                          <div>
                            作业得分：<span style="color: rgba(242, 161, 75, 1)">{{
                              totalScore(l.rate)
                            }}</span>
                            分
                          </div>
                          <div>作业提交时间：{{ workTime(k.toolEList) }}</div>
                        </div>

                        <!-- 作业评分 -->
                        <div class="taskScoCon">
                          <!-- 分数详情与素养 -->
                          <div
                            v-if="l.eList"
                            class="taskScoConEList"
                          >
                            <div style="width: 49%; margin: 0 20px 10px 0">
                              <div class="taskScoConTit">分数详情</div>
                              <div style="display: flex;flex-wrap: wrap;">
                                <div
                                  v-for="(wItem, ind) in l.eList"
                                  :key="ind + 's'"
                                  class="score_box"
                                >
                                  <div class="RootImgBlock">
                                    <div>{{ wItem.detail }}</div>
                                  </div>

                                  <el-rate
                                    class="rate_size"
                                    disabled-void-color="#ccc"
                                    disabled
                                    style="width: 120px;display: flex;flex-shrink: 0;"
                                    v-model="l.rate[wItem.detail]"
                                  ></el-rate>
                                </div>
                              </div>
                            </div>

                            <div
                              v-if="l.eList"
                              style="width: 49%;display: flex;flex-direction: column;"
                            >
                              <div class="taskScoConTit">素养</div>
                              <div class="WorkConSY">
                                <div v-for="(wItem, ind) in l.eList" :key="ind + 's'">
                                  <div class="RootImgBlockSy">
                                    <span> {{ wItem.target }}</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>

                          <!-- 评语 -->
                          <div
                            style="
                                width: 40%;
                                display: flex;
                                flex-direction: column;
                                margin-left: 10px;
                              "
                            v-if="l.rate.content || l.rate.comment"
                          >
                            <div class="taskScoConTit">评语</div>
                            <div class="WorkCon">
                              {{ l.rate.content || l.rate.comment }}
                            </div>
                          </div>
                        </div>
                        
                      </div>

                      <!-- 阶段  -->
                      <div
                        class="taskSco"
                        v-if="l.eList && CState != 5 && lind == k.toolEList.length - 1"
                      >
                        <div class="taskScoTit">
                          <div>
                            作业得分：<span style="color: rgba(242, 161, 75, 1)">{{
                              totalScore(k.toolEList[0].rate)
                            }}</span>
                            分
                          </div>
                          <div>作业提交时间：{{ workTime(k.toolEList) }}</div>
                        </div>

                        <!-- 作业评分 -->
                        <div class="taskScoCon">
                          <!-- 分数详情与素养 -->
                          <div
                            v-if="l.eList"
                            class="taskScoConEList"
                          >
                            <div style="width: 49%; margin: 0 20px 10px 0">
                              <div class="taskScoConTit">分数详情</div>
                              <div style="display: flex;flex-wrap: wrap;">
                                <div
                                  v-for="(wItem, ind) in l.eList"
                                  :key="ind + 's'"
                                  class="score_box"
                                >
                                  <div class="RootImgBlock">
                                    <div>{{ wItem.value }}</div>
                                  </div>

                                  <el-rate
                                    class="rate_size"
                                    disabled-void-color="#ccc"
                                    disabled
                                    style="width: 120px;display: flex;flex-shrink: 0;"
                                    v-model="k.toolEList[0].rate[wItem.value]"
                                  ></el-rate>
                                </div>
                              </div>
                            </div>

                            <div
                              v-if="isSU(l.eList)"
                              style="width: 49%;display: flex;flex-direction: column;"
                            >
                              <div class="taskScoConTit">素养</div>
                              <div class="WorkConSY">
                                <div v-for="(wItem, ind) in l.eList" :key="ind + 's'">
                                  <div class="RootImgBlockSy">
                                    <span v-if="wItem.target && wItem.target.length"> {{ wItem.target[wItem.target.length - 1] }}</span>
                                    <span v-else> {{ wItem.target }}</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>

                          <!-- 评语 -->
                          <div
                            style="
                                width: 40%;
                                display: flex;
                                flex-direction: column;
                                margin-left: 10px;
                              "
                            v-if="l.rate.content || l.rate.comment"
                          >
                            <div class="taskScoConTit">评语</div>
                            <div class="WorkCon">
                              {{ l.rate.content || l.rate.comment }}
                            </div>
                          </div>
                        </div>      
                      </div>
                    </div>  
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="zyBoxC">
            <div class="courseTitle" v-if="allWorks.course">
              <div class="txName">
                <div class="tx"><img :src="tx" alt="" /></div>
                <div>{{ allWorks.sName }}</div>
              </div>
              <div>{{ allWorks.course }}</div>
            </div>
            <div class="cBox">
              <div class="pb_left">
                <el-tooltip class="cTitle" effect="light" :content="allWorks.course" placement="top">
                  <div>{{ allWorks.course }}</div>
                </el-tooltip>
                <div class="ml">目录</div>
                <div class="cru_selectBox">
                  <div v-for="(dy, dyIndex) in dyList2" :key="dyIndex">
                    <div class="blue_box_one" @click="isOpen(dyIndex)">
                      <div>第{{ dy.id + 1 }}阶段</div>
                      <div>{{ dy.name }}</div>
                    </div>
                    <div class="twoChild" :class="{
                      navActive: dy.isOpen,
                    }">
                      <div class="navChild" v-for="(nav, navIndex) in dy.taskList" :key="navIndex">
                        <div class="navTask" @click="openTask(dy.id, nav.id)" :class="{
                          openTaskActive:
                            nav.id == taskCount &&
                            dy.id + '-' + nav.id == navId &&
                            dy.id == stageIndex,
                        }">
                          <div class="vedioNav" :class="{
                            isClick:
                              nav.id == taskCount &&
                              dy.id + '-' + nav.id == navId &&
                              dy.id == stageIndex,
                          }" style="margin: 0">
                            任务{{ navIndex + 1 }}
                          </div>
                          <el-tooltip class="navTaskname item" effect="light" :content="nav.name" placement="top">
                            <div>{{ nav.name }}</div>
                          </el-tooltip>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="shuBox" v-if="worksDetail.length" :class="{ fullBox: full }">
                <div class="allBox" v-for="(sin, sIndex) in sInfo" :key="sIndex">
                  <div class="zyBox" v-if="sin.course" :class="{ fullZyBox: full }">
                    <div class="top">
                      <div class="jdName">
                        <div>
                          {{
                          "第" +
                          (sin.stage + 1) +
                          "阶段 " +
                          dyList[sin.stage].name
                          }}
                        </div>
                        <div class="taskName" style="width: 100%; justify-content: space-between">
                          <div class="taskName" :id="sin.stage + '-' + sin.task" :scrollindex="sIndex">
                            <div class="task">任务{{ sin.task + 1 }}</div>
                            <div>
                              {{ dyList[sin.stage].taskList[sin.task].name }}
                            </div>
                          </div>
                          <div v-if="worksDetail[sIndex].wpptInfo.length > 0">
                            <el-button type="primary" size="small" @click="openFile(worksDetail[sIndex].wpptInfo[0])">
                              查看文档</el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="contentBox">
                      <div class="left_top" :style="{width:worksDetail[sIndex].eList.length?'45%':'95%'}"
                        v-if="worksDetail[sIndex].img.length > 0">
                        <div class="bigImg" v-if="
                          worksDetail[sIndex].img &&
                          worksDetail[sIndex].img.length
                        ">
                          <img @click="
                            previewImg(
                              worksDetail[sIndex].img[
                                worksDetail[sIndex].imgIndex
                              ].src
                            )
                          " :src="
                            worksDetail[sIndex].img[
                              worksDetail[sIndex].imgIndex
                            ].src
                          " alt />
                        </div>
                        <div class="thumbnail" v-if="
                          worksDetail[sIndex].img &&
                          worksDetail[sIndex].img.length
                        ">
                          <div v-for="(item, index) in worksDetail[sIndex].img" :key="index" :class="
                            worksDetail[sIndex].imgIndex == index
                              ? '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" :style="{width:worksDetail[sIndex].eList.length?'45%':'95%'}"
                        v-else-if="worksDetail[sIndex].answerInfo.length > 0">
                        <div class="answerbox">
                          <div style="min-width: 80px">问答标题</div>
                          <div>
                            {{ worksDetail[sIndex].answerInfo[0].answerTitle }}
                          </div>
                        </div>
                        <div class="answerbox1">
                          <div>学生回答</div>
                          <div>
                            {{ worksDetail[sIndex].answerInfo[0].answer }}
                          </div>
                        </div>
                      </div>
                      <div class="left_top" :style="{width:worksDetail[sIndex].eList.length?'45%':'95%'}"
                        v-else-if="worksDetail[sIndex].askInfo.length > 0">
                        <div>
                          <div class="a_add_title" style="
                              display: flex;
                              flex-direction: row;
                              align-items: center;
                              justify-content: center;
                              flex-wrap: wrap;
                            ">
                            <div style="margin-right: 20px; font-size: 20px">
                              标题:
                            </div>
                            <div style="font-size: 20px">
                              {{ worksDetail[sIndex].askInfo[0].askTitle }}
                            </div>
                          </div>
                          <div class="a_addBox">
                            <div style="font-size: 16px; color: #c7c7c7">
                              内容
                            </div>
                            <div class="a_add_box" v-for="(item1, index1) in worksDetail[sIndex]
                            .askInfo[0].askCount" :key="index1">
                              <div class="a_add_head">
                                <div style="display: flex">
                                  {{ index1 + 1 + "、" }}
                                  <div>
                                    题目：{{
                                    worksDetail[sIndex].askInfo[0].askJson[
                                    index1
                                    ].askstitle
                                    }}
                                  </div>
                                </div>
                              </div>
                              <div class="a_add_body">
                                <div class="a_add_input">
                                  <el-radio-group v-model="
                                    worksDetail[sIndex].askInfo[0].radio[
                                      index1
                                    ]
                                  ">
                                    <el-radio v-for="(item2, checkIndex) in worksDetail[
                                      sIndex
                                    ].askInfo[0].askJson[index1].checkList" :key="checkIndex" :label="checkIndex"
                                      disabled class="redioStyle"><span v-html="item2"></span></el-radio>
                                  </el-radio-group>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="left_top" :style="{width:worksDetail[sIndex].eList.length?'45%':'95%'}"
                        v-else-if="worksDetail[sIndex].wpptInfo.length > 0">
                        <div style="height: 238px" @click="openFile(worksDetail[sIndex].wpptInfo[0])">
                          <div @click="openFile(worksDetail[sIndex].wpptInfo[0])" style="
                              width: 300px;
                              height: 300px;
                              position: absolute;
                              z-index: 999;
                            "></div>
                          <pdf v-if="showPDF" :pdfUrl="worksDetail[sIndex].wpptInfo[0]"
                            style="width: 100%; height: 520px; overflow: auto"></pdf>
                          <iframe v-else :src="worksDetail[sIndex].wpptInfo[0]" frameborder="0" width="100%"
                            height="100%"></iframe>
                        </div>
                      </div>
                      <div class="right_top" v-show="worksDetail[sIndex].eList.length">
                        <div class="ech">
                          <img src="../assets/icon/pj/ech.png" alt="" />
                        </div>
                        <div class="data_body">
                          <div style="width: 100%">
                            <div class="echart charts_canvas" style="
                                width: 100%;
                                height: 100%;
                                margin: 0 0 0 1rem;
                              "></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="right_score" :class="{ rightScoreFullBox: full }">
                    <div class="sd_score" style="
                        box-sizing: border-box;
                        width: 100%;
                        box-shadow: none;
                        position: relative;
                      ">
                      <div class="worksTime">
                        作业提交时间：<span style="width: auto">{{ worksDetail[sIndex].time }}
                        </span>
                      </div>
                      <div class="ech" style="margin-left: 23px">
                        <img src="../assets/icon/pj/score.png" alt="" />
                      </div>
                      <div style="height: 80%;overflow: auto;">
                        <div class="score_box" v-for="(item, index) in worksDetail[sIndex].eList" :key="index">
                          <el-tooltip class="item" effect="dark" :content="item.value" placement="top-start">
                            <span>{{ item.value }}</span>
                          </el-tooltip>
                          <el-rate class="rate_size" style="min-width: 120px"
                            v-model="worksDetail[sIndex].rateList[item.value]" disabled></el-rate>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div> -->
        </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 :visible.sync="pictureDialog" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
    <el-dialog title="文件预览" :visible.sync="dialogVisible6" width="100%" :before-close="handleClose" class="full_diy"
      :append-to-body="true">
      <div slot="title" class="header-title">
        <div style="color: #fff">文件预览</div>
      </div>
      <pdf v-if="showPDF" :pdfUrl="pptImgUrl" style="width: 100%; height: 520px; overflow: auto"></pdf>
      <iframe v-else :src="pptImgUrl" frameborder="0" width="100%" height="600"></iframe>
    </el-dialog>
      <!-- <div style="position: relative">
        <div style="width: 98.5%;margin: 0 auto;">
          <WorksDetail2
            :cid="cid"
            :uid="userid"
            v-if="dialogVisible"
          ></WorksDetail2>
        </div>
        <div class="cancelbox" v-if="dialogVisible">
          <el-button @click="cancel" type="primary" size="small"
            >返回</el-button
          >
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import WorksDetail2 from "./components/worksDetail2";
export default {
  components: {
    WorksDetail2,
  },
  data() {
    return {
      myCourse: [],
      studentMessage: [],
      tx: require("../assets/avatar.png"),
      mpj: require("../assets/project.png"),
      userid: this.$route.query.userid,
      oid: this.oid,
      tableData1: [],
      tableHeight: "500px",
      page: 1,
      total: 0,
      dialogVisible: false,
      dataJson: {},
      cid: "",
      dialogImageUrl: "",
      pictureDialog: false,
      dialogVisible3: false,
      dialogVisible4: false,
      full: true,
      allWorks: [],
      stageIndex: "",
      taskCount: "",
      navId: "",
      pptImgUrl: "",
      grade: [],
      mr: require("../assets/icon/wheel.png"),
      tx: require("../assets/avatar.png"),
      projectchoose: "",
      scopeId: "",
      thumbnail: [],
      rateList: {
        ca: 0,
        sia: 0,
        eta: 0,
        pia: 0,
        lra: 0,
        content: "",
      },
      rateParams: [],
      page: 1,
      total: 0,
      worksDetail: [],
      suserId: "",
      sInfo: {},
      chapInfo: [],
      showPDF: false,
      dialogVisible6: false,
      vedio: [],
      file: [],
      tType: 0,
      chartObj: [],
      pptImgUrl: "",
      ooption: [],
      option: {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "量规评分",
            type: "pie",
            radius: "70%",
            center: ["50%", "50%"],
            data: [
              { value: 0, name: "意识能力" },
              { value: 0, name: "科学探究能力" },
              { value: 0, name: "实践创新能力" },
              { value: 0, name: "学习反思能力" },
              { value: 0, name: "工程思维能力" },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                label: {
                  show: true,
                  formatter: "{d}%",
                  inside: true,
                  position: "inner",
                },
                labelLine: { show: false },
              },
            },
          },
        ],
      },
      // 雷达图的数据
      radarOption: {
        splitNumber: 5,
        tooltip: {
          triggerOn: "mousemove",
          //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
          confine: true,
          enterable: true, //鼠标是否可以移动到tooltip区域内
          backgroundColor: "rgba(255,255,255,0.7)",
          textStyle: {
            // 文字样式
            align: "left",
          },
          left: "right",
          top: "bottom",
        },
        radar: {
          radius: ["0%", "70%"],
          shape: "circle",
          center: ["50%", "50%"],
          axisName: {
            textStyle: {
              // 文字样式
              color: "#58a5e6",
            },
            formatter: function (value, indicator) {
              // value = value.replace(/\S{2}/g, function (match) {
              //   return match + "\n";
              // });
              return value;
            },
          },
          indicator: [
            // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
          ],
        },
        // 雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
        splitArea: {
          show: true,
          areaStyle: {
            color: "rgba(255,0,0,0)", // 图表背景的颜色
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "rgba(131,141,158,.1)", // 设置网格的颜色
          },
        },
        series: [
          {
            name: "能力图", // tooltip中的标题
            type: "radar", // 表示是雷达图
            symbol: "circle", // 拐点的样式，还可以取值'rect','angle'等
            symbolSize: 8, // 拐点的大小
            areaStyle: {
              normal: {
                width: 1,
                opacity: 0.2,
              },
            },
            data: [
              {
                // 设置各个指标原始值
                value: [],
                // 设置区域边框和区域的颜色
                itemStyle: {
                  normal: {
                    color: "#58a5e6",
                    lineStyle: {
                      color: "#58a5e6",
                    },
                  },
                },
              },
            ],
          },
        ],
      },
      askJson: {},
      dyList: [],
      dyList2: [],
      courseName: "",
      workList: [],
      CState: 0,
      loading:false
    };
  },
  computed: {
    isStage() {
      return function(val) {
        let isShow = false;

        val.forEach(e => {
          e.toolEList.forEach(i => {
            if (i.content.length) {
              isShow = true;
            }
          });
        });

        return isShow;
      };
    },
    isTask() {
      return function(val) {
        let isShow = false;

        val.forEach(e => {
          if (e.content.length) {
            isShow = true;
          }
        });

        return isShow;
      };
    },
    isSU(){
      return function(val) {
        let isShow = false;
        // console.log('isSU',val);
        
        val.forEach(e => {
          if (e.target) {
            isShow = true;
          }
        });

        return isShow;
      };
    },
    totalScore() {
      return function(val) {
        let valT = JSON.parse(JSON.stringify(val));
        if (!valT) return "0.0";

        delete valT.content;
        delete valT.comment;

        let data = Object.values(valT);

        let new1 = data.reduce(function(pre, next, index) {
          return pre + next * 1;
        });

        if (new1 == 0) return "0.0";

        return (new1 / data.length).toFixed(1);
      };
    },
    workTime(){
      return function(val) {
        if (!val.length) return ''
        let TimeList = []
        val.forEach(e=>{
          if (e.time) {
            const timestamp = new Date(e.time).getTime();
            TimeList.push(timestamp)
          }
        })

        console.log('TimeList',TimeList);
        TimeList.sort(function(a,b){
          return a-b;//从小到大排序
        })


        return this.convertToTimestamp(TimeList[0]);
      };
    }
  },
  methods: {
    // 时间戳转时间
    convertToTimestamp(val) {
      const date = new Date(val);

      // 使用Date对象的方法获取年、月、日、时、分、秒
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      // 格式化后的日期时间字符串
      const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      
      return formattedDateTime
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleCloseSub(key, keyPath) {
      console.log(key, keyPath);
    },
    goTo(path) {
      this.$router.push(path);
    },
    // 点击任务滑动跳转
    positT(val) {
      
      let a = document.getElementById(val);
      if (a) {
        a.scrollIntoView({
          behavior: "smooth" // 平滑滚动效果
        });
      } else {
        this.$message.error("该任务暂时没提交作业");
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getProject();
    },
    selectSDetail() {
      let params = {
        uid: this.userid,
      };
      this.ajax
        .get(this.$store.state.api + "selectSDetail", params)
        .then((res) => {
          this.studentMessage = res.data[0][0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    getProject() {
      let params = {
        uid: this.userid,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getMyProject", params)
        .then((res) => {
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData1 = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getWorkData(res) {
      this.cid = res.courseid;
      this.dialogVisible = true;
    },
    cancel() {
      this.dataJson = "";
      this.dialogVisible = false;
    },
    previewImg(url) {
      this.$hevueImgPreview(url);
    },
    
    handleClose(done) {
      done();
    },
    lookWork(id, uid, stage, task) {
      // this.scopeId = id;
      let params = {
        uid: uid,
        cid: id,
        stage: stage,
        task: task,
      };
      this.ajax
        .get(this.$store.state.api + "selectWorksDetail3", params)
        .then((res) => {
          this.sInfo = res.data[0];
          var chapters = [],
            eList = [],
            _ooption = [],
            _rate = [],
            _rateList = [];
          var worksDetail = res.data[1];
          // this.scopeId = res.data[2][0].id;
          // var scopeId = res.data[2][0].id;
          var askInfo = res.data[3];
          var answerInfo = res.data[4];
          var pptInfo = res.data[5];
          var workJson = [];
          for (var k = 0; k < res.data[0].length; k++) {
            this.allWorks = res.data[0][k];
            this.chapInfo.push(JSON.parse(res.data[0][k].chapters));
            chapters.push(JSON.parse(res.data[0][k].chapters));
            if (!chapters[0][res.data[0][k].stage].chapterInfo[0].taskJson[
              res.data[0][k].task
            ]) {
              continue
            }

            workJson.push({
              img: [],
              imgIndex: 0,
              eList: [],
              rateList: {},
              askInfo: [],
              answerInfo: [],
              wpptInfo: [],
              scopeId: res.data[0][k].id,
              stagetask: "",
              time: "",
            });

            eList =
              chapters[0][res.data[0][k].stage].chapterInfo[0].taskJson[
                res.data[0][k].task
              ].eList;
            workJson[k].time = res.data[0][k].time;
            workJson[k].stagetask =
              res.data[0][k].stage + "-" + res.data[0][k].task;
            if (eList && eList.length) {
              _ooption = [];
              workJson[k].eList = eList;
              for (var i = 0; i < eList.length; i++) {
                _ooption.push({ value: 0, name: eList[i].value });
                workJson[k].rateList[eList[i].value] = 0;
              }
              workJson[k].rateList.content = "";
              this.ooption[k] = _ooption;
            }
            if (res.data[0][k].rate && eList && eList.length) {
              _rate[k] = JSON.parse(res.data[0][k].rate);
              _rateList[k] = Object.keys(JSON.parse(res.data[0][k].rate));
              for (var i = 0; i < _rateList[k].length; i++) {
                var _c = Object.keys(workJson[k].rateList);
                if (_c.indexOf(_rateList[k][i]) != -1) {
                  workJson[k].rateList[_rateList[k][i]] =
                    _rate[k][_rateList[k][i]];
                }
              }
              for (var i = 0; i < this.ooption[k].length; i++) {
                if (_rateList[k].indexOf(this.ooption[k][i].name) != -1) {
                  this.ooption[k][i].value = _rate[k][this.ooption[k][i].name];
                }
              }
            } else {
              _rate[k] = [];
              _rateList[k] = [];
            }

            for (var i = 0; i < worksDetail.length; i++) {
              if (
                res.data[0][k].stage == worksDetail[i].stage &&
                res.data[0][k].task == worksDetail[i].task
              ) {
                workJson[k].img.push({ src: worksDetail[i].content, id: i });
              }
            }
            for (var i = 0; i < askInfo.length; i++) {
              if (
                res.data[0][k].stage == askInfo[i].stage &&
                res.data[0][k].task == askInfo[i].task
              ) {
                const element = askInfo[i];
                let a = JSON.parse(element.content)[0];
                let b = a.anwer.split(",");
                let c = [];
                for (var j = 0; j < b.length; j++) {
                  c.push(parseInt(b[j]));
                }
                a.askJson.radio = c;
                a.askJson.time = element.time;
                workJson[k].askInfo.push(a.askJson);
              }
            }

            for (var i = 0; i < pptInfo.length; i++) {
              if (
                res.data[0][k].stage == pptInfo[i].stage &&
                res.data[0][k].task == pptInfo[i].task
              ) {
                var a = ["PPT", "PPTX", "XLSX", "XLS", "DOC", "DOCX"];
                if (
                  a.indexOf(
                    pptInfo[i].content
                      .split(".")
                    [
                      pptInfo[i].content.split(".").length - 1
                    ].toLocaleUpperCase()
                  ) != -1
                ) {
                  var a =
                    "https://view.officeapps.live.com/op/view.aspx?src=" +
                    encodeURIComponent(pptInfo[i].content);
                  workJson[k].wpptInfo.push(a);
                  this.showPDF = false;
                } else if (
                  pptInfo[i].content
                    .split(".")
                  [
                    pptInfo[i].content.split(".").length - 1
                  ].toLocaleUpperCase() == "PDF"
                ) {
                  workJson[k].wpptInfo.push(pptInfo[i].content);
                  this.showPDF = true;
                }
              }
            }

            for (var i = 0; i < answerInfo.length; i++) {
              if (
                res.data[0][k].stage == answerInfo[i].stage &&
                res.data[0][k].task == answerInfo[i].task
              ) {
                const element = answerInfo[i];
                workJson[k].answerInfo.push(JSON.parse(element.content)[0]);
              }
            }
          }

          this.worksDetail = workJson;

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

          this.$forceUpdate;
          this.dialogVisible3 = true;
          setTimeout(() => {
            for (var p = 0; p < res.data[0].length; p++) {
              if (!this.ooption[p]) {
                this.chartObj[p] = null;
                continue
              }
              var _ooption = JSON.parse(JSON.stringify(this.ooption[p]));
              var _option = JSON.parse(JSON.stringify(this.radarOption));
              _option.radar.indicator = [];
              _option.series[0].data[0].value = [];
              for (var i = 0; i < _ooption.length; i++) {
                _option.radar.indicator.push({
                  name: _ooption[i].name,
                  max: 5,
                });
                _option.series[0].data[0].value.push(_ooption[i].value);
              }
              console.log(_option);
              this.setChart(_option, p);
            }
          }, 0);

          let _dyList = JSON.parse(JSON.stringify(this.dyList));
          let _dyList2 = [];
          let _dyList3 = [];
          for (var c = 0; c < _dyList.length; c++) {
            _dyList[c].taskList = [];
            _dyList2.push(_dyList[c]);
          }
          _dyList = JSON.parse(JSON.stringify(this.dyList));
          for (var c = 0; c < workJson.length; c++) {
            let _stage = workJson[c].stagetask.split("-")[0];
            let _task = workJson[c].stagetask.split("-")[1];
            _dyList2[_stage].taskList.push(_dyList[_stage].taskList[_task]);
            _dyList2[_stage].taskList;
          }
          for (var c = 0; c < _dyList2.length; c++) {
            if (_dyList2[c].taskList.length) {
              _dyList2[c].isOpen = c === 0 ? true : false;
              _dyList3.push(_dyList2[c]);
            }
          }
          this.dyList2 = _dyList3;
          this.stageIndex = this.dyList2[0].id;
          this.taskCount = this.dyList2[0].taskList[0].id;
          this.navId =
            this.dyList2[0].id + "-" + this.dyList2[0].taskList[0].id;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    checkAsk(askJson) {
      this.askJson = askJson;
      this.dialogVisible4 = true;
    },
    setChart(option, k) {
      let _this = this;
      // 雷达图显示的标签
      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        console.log(_this.option);

        const chartObj = _this.$echarts.init(
          //劳动课程
          // _this.$el.querySelector("#charts_canvas")
          document.getElementsByClassName("charts_canvas")[k]
        );
        // 初始化雷达图
        _this.chartObj[k] = chartObj;
        _this.chartObj[k].setOption(option);
      });
    },
    giveScore() {
      this.rateList = this.chapInfo[this.publicIndex].rate;
      this.dialogVisible2 = true;
    },
    openFile(f) {
      this.pptImgUrl = f;
      this.dialogVisible6 = true;
    },
    //获取班级列表
    getClass() {
      this.isLoading = true;
      let params = {
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "selectClassBySchool", params)
        .then((res) => {
          this.isLoading = false;
          this.grade = res.data[0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    //获取分组分类
    getGroup() {
      let params = {};
      this.ajax
        .get(this.$store.state.api + "getGroup", params)
        .then((res) => {
          this.subjectJuri = res.data[0];
          this.projectJuri = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    searchWork1() {
      this.page = 1;
      this.chooseTask = "";
      this.getWorks();
    },
    searchWork2() {
      this.page = 1;
      this.getWorks();
    },
    fullTools() {
      this.full = !this.full;
    },
    //获取作业
    getWorks() {
      this.isLoading = true;
      var mr = this.mr;
      let params = {
        cid: this.id,
        uname: this.userid,
        stage: this.chooseDy,
        task: this.chooseTask,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getCourseWorks2", params)
        .then((res) => {
          this.isLoading = false;
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData = res.data[0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    // 获取作业信息
    async exportPdfSet(val) {
      // return console.log(val);
      
      this.loading = true;
      this.dialogVisible3=true
      this.CState = val.state
      // this.tableData.forEach((e, i) => {
      //   if (e.userid == this.uid) {
      //     this.userName = e.sName;
      //     this.userImg = e.img ? e.img : "";
      //     this.positP = i;
      //   }
      // });
      let params = {
        uid: this.userid,
        cid: val.courseid
      };
      return new Promise((resolve, reject) => {
        this.ajax
          .get(this.$store.state.api + "selectAllWorksDetail", params)
          .then(res => {
            var worksDetail = res.data[1];
            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]; //文档作业
            this.workEvaList = res.data[13];

            // console.log('res.data[0][0]',res.data[0][0]);
            this.resData = JSON.parse(JSON.stringify(res.data[0][0]))
            
            this.courseName = res.data[0][0].course;
            this.CState = res.data[0][0].state;

            var dyJSON = JSON.parse(res.data[0][0].chapters);
            // console.log('dyJSON',JSON.parse(JSON.stringify(dyJSON)));
            

            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: i + "-" + j });
              }
            }
            this.dyList = dyList;
            // console.log("this.dyList", this.dyList);

            // console.log("this.workEvaList", this.workEvaList);

            let framework = [];
            if (res.data[0].length) {
              let elistData = JSON.parse(res.data[0][0].chapters);
              // console.log("elistData", JSON.parse(JSON.stringify(elistData)));

              elistData.forEach((e, i) => {
                framework[i] = {
                  id: i,
                  name: e.dyName ? e.dyName : "",
                  taskList: []
                };
                e.chapterInfo[0].taskJson.forEach((k, kin) => {
                  if (k.eList && k.eList.length) {
                    k.toolChoose.forEach(y => {
                      y.eList = k.eList;
                    });
                  }
                  framework[i].taskList.push({
                    stage: i,
                    task: kin,
                    taskTit: k.task ? k.task : "",
                    taskDetail: k.taskDetail,
                    toolEList: k.toolChoose
                  });
                });
              });
            }

            res.data[3].forEach(e => {
              e.content = JSON.parse(e.content);
            });
            res.data[4].forEach(e => {
              e.content = JSON.parse(e.content);
              // console.log('66666',e.content[0].answer);
            });

            res.data[6].forEach((k, i) => {
              const element1 = JSON.parse(k.content)[0];
              // console.log("JSON.parse(element1.content)[0]", element1);

              let t = JSON.parse(k.content)[0].testJson;
              // console.log("t", JSON.parse(JSON.stringify(t)));
              // console.log("k", k);

              // 处理学生选择答案
              let e = [];
              t.testJson.forEach((i, y) => {
                e.push(element1.anwer[y]);
              });
              t.radio = e;

              // 处理选项

              k.content = t;
            });
            

            res.data[8].forEach((k, i) => {
              k.content = k.content.split(",");
            });

            res.data[9].forEach(e => {
              e.content = JSON.parse(e.content);
            });

            res.data[12].forEach(e => {
              e.content = JSON.parse(e.content);
            });
            res.data[10].forEach(e => {
              e.content = JSON.parse(e.content);
            });

            let AreaAllWork = [
              ...res.data[1],
              ...res.data[3],
              ...res.data[4],
              ...res.data[5],
              ...res.data[6],
              ...res.data[7],
              ...res.data[8],
              ...res.data[9],
              ...res.data[10],
              ...res.data[11],
              ...res.data[12]
            ];

            AreaAllWork.sort(function(a, b) {
              return a.stage - b.stage; //从小到大排序
            });
            // console.log("AreaAllWork", JSON.parse(JSON.stringify(AreaAllWork)));

            framework.forEach(e => {
              e.taskList.forEach((k, kin) => {
                k.toolEList.forEach((l, lIndex) => {
                  l.content = [];
                  l.rate = "";
                  l.time = "";
                  l.score = "";
                  // 将作业答案添加进数组里
                  AreaAllWork.forEach((i, index) => {
                    i.tool = i.tool ? i.tool : 0;
                    if (
                      k.stage == i.stage &&
                      k.task == i.task &&
                      lIndex == i.tool
                    ) {
                      l.content.push(i.content);
                      l.time = i.tTime;
                      l.score = i.score;
                    }
                  });

                  // 将老师分数循环数组里
                  this.workEvaList.forEach(p => {
                    p.tool = p.tool ? p.tool : 0;
                    if (
                      k.stage == p.stage &&
                      k.task == p.task &&
                      lIndex == p.tool
                    ) {
                      // console.log("JSON.parse(p.rate)", JSON.parse(p.rate));
                      let rateCopy = JSON.parse(p.rate);
                      for (const key in rateCopy) {
                        if (key != "content") {
                          rateCopy[key] = rateCopy[key] * 1;
                        }
                      }
                      l.rate = rateCopy;
                    }
                  });

                  // 将没有提交作业,但是有评分标准的数据填上数据,防止报错
                  if (!l.rate && l.eList && l.eList.length && this.CState == 5) {
                    l.rate = { content: "" };
                    l.eList.forEach(elp => {
                      l.rate[elp.detail] = 0;
                    });
                  }else if ((!l.rate && l.eList && l.eList.length && this.CState != 5)) {
                      l.rate = { content: "" };
                      l.eList.forEach(elp => {
                        l.rate[elp.value] = 0;
                      });
                  }
                
                });
              });
            });

            console.log("framework", JSON.parse(JSON.stringify(framework)));

            this.workList = framework;
            this.loading = false;
          })
          .catch(err => {
            console.error(err);
          });
      });
    },
    getCourseDetail(cid) {
      let params = {
        cid: cid,
      };
      this.ajax
        .get(this.$store.state.api + "getCourseWorksReport", params)
        .then((res) => {
          this.course = res.data[0][0];
          var dyJSON = JSON.parse(res.data[0][0].chapters);
          let dyList = [];
          for (var i = 0; i < dyJSON.length; i++) {
            dyList.push({ name: dyJSON[i].dyName, id: i, taskList: [] });
            var a = dyJSON[i].chapterInfo[0].taskJson;
            for (var j = 0; j < a.length; j++) {
              dyList[i].taskList.push({ name: a[j].task, id: j });
            }
          }
          this.dyList = dyList;
          this.userAarray = res.data[1];
          this.lookWork(cid,this.userid,0,0);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url;
      this.pictureDialog = true;
    },
    updatePj() {
      for (var i = 0; i < this.worksDetail.length; i++) {
        if (!this.worksDetail[i].eList.length) {
          continue
        }
        this.updateWorks(
          this.worksDetail[i].scopeId,
          this.worksDetail[i].rateList,
          i
        );
      }
    },
    getStar(i) {
      const k = i;
      var _ooption = JSON.parse(JSON.stringify(this.ooption[k]));
      var _rate = this.worksDetail[i].rateList;
      var _rateList = Object.keys(this.worksDetail[i].rateList);
      for (var i = 0; i < _ooption.length; i++) {
        if (_rateList.indexOf(_ooption[i].name) != -1) {
          _ooption[i].value = _rate[_ooption[i].name];
        }
      }
      // var _option = JSON.parse(JSON.stringify(this.radarOption));
      var _option = this.radarOption;
      _option.radar.indicator = [];
      _option.series[0].data[0].value = [];
      for (var i = 0; i < _ooption.length; i++) {
        _option.radar.indicator.push({ name: _ooption[i].name, max: 5 });
        _option.series[0].data[0].value.push(_ooption[i].value);
      }
      if (this.chartObj && this.chartObj[k]) {
        // _option.series[0].data = _ooption;
        this.chartObj[k].setOption(_option);
      } else {
        this.setChart(_ooption);
      }
    },
    updateWorks(scopeId, rateList, i) {
      let params = {
        rate: rateList,
        tuid: this.userid,
        id: scopeId,
      };
      const k = i;
      this.ajax
        .get(this.$store.state.api + "updateWorks", params)
        .then((res) => {
          var _ooption = JSON.parse(JSON.stringify(this.ooption[k]));
          // var _option = JSON.parse(JSON.stringify(this.option));

          var _rate = rateList;
          var _rateList = Object.keys(rateList);
          for (var i = 0; i < _ooption.length; i++) {
            if (_rateList.indexOf(_ooption[i].name) != -1) {
              _ooption[i].value = _rate[_ooption[i].name];
            }
          }

          // var _option = JSON.parse(JSON.stringify(this.radarOption));
          var _option = this.radarOption;
          _option.radar.indicator = [];
          _option.series[0].data[0].value = [];
          for (var i = 0; i < _ooption.length; i++) {
            _option.radar.indicator.push({ name: _ooption[i].name, max: 5 });
            _option.series[0].data[0].value.push(_ooption[i].value);
          }
          console.log(_option);
          if (this.chartObj) {
            // _option.series[0].data = _ooption;
            this.chartObj[k].setOption(_option);
          } else {
            this.setChart(_ooption);
          }
          // this.uploadBoolean = false;
          // this.dialogVisible2 = false;
          let _k = 0
          for (var i = 0; i < this.worksDetail.length; i++) {
            if (this.worksDetail[i].eList.length) {
              _k = i
            }
          }
          if (k == _k) {
            this.$message({
              message: "评价成功",
              type: "success",
            });
          }
        })
        .catch((err) => {
          this.$message.error("评价失败");
          console.error(err);
        });
    },
    switchVideo(media, index) {
      this.playerO = {};
      this.playerOptions.poster = "";
      this.playerOptions.sources[0].src = media;
      this.playerO = this.playerOptions;
    },
    onPlayerPlay() { },
    // this.$store.commit("update", ["userInfo", userInfo]);
    lookWork2(id, uid, stage, task) {
      // this.scopeId = id;
      let params = {
        uid: uid,
        cid: this.id,
        stage: stage,
        task: task,
      };
      this.ajax
        .get(this.$store.state.api + "selectWorksDetail2", params)
        .then((res) => {
          this.sInfo = res.data[0][0];
          this.chapInfo = JSON.parse(res.data[0][0].chapters);
          var chapters = JSON.parse(res.data[0][0].chapters);
          var worksDetail = res.data[1];
          // var askArray = res.data[2];
          this.scopeId = res.data[2].length ? res.data[2][0].id : this.sInfo.id;
          var askInfo = res.data[3];
          var answerInfo = res.data[4];
          var linkInfo = res.data[5];
          var workJson = {
            img: [],
            imgIndex: 0,
            eList: [],
            rateList: {},
            wpptInfo: [],
            askInfo: [],
            answerInfo: [],
          };
          var eList =
            chapters[this.sInfo.stage].chapterInfo[0].taskJson[this.sInfo.task]
              .eList;
          var _ooption = [];
          if (eList) {
            workJson.eList = eList;
            for (var i = 0; i < eList.length; i++) {
              _ooption.push({ value: 0, name: eList[i].value });
              workJson.rateList[eList[i].value] = 0;
            }
            workJson.rateList.content = "";
            this.ooption = _ooption;
          } else {
            workJson.eList = [
              { value: "意识能力", detail: "", score: 5 },
              { value: "科学探究能力", detail: "", score: 5 },
              { value: "实践创新能力", detail: "", score: 5 },
              { value: "学习反思能力", detail: "", score: 5 },
              { value: "工程思维能力", detail: "", score: 5 },
            ];
            for (var i = 0; i < workJson.eList.length; i++) {
              _ooption.push({ value: 0, name: workJson.eList[i].value });
              workJson.rateList[workJson.eList[i].value] = 0;
            }
            workJson.rateList.content = "";
            this.ooption = [
              { value: 0, name: "意识能力" },
              { value: 0, name: "科学探究能力" },
              { value: 0, name: "实践创新能力" },
              { value: 0, name: "学习反思能力" },
              { value: 0, name: "工程思维能力" },
            ];
          }
          if (this.sInfo.rate) {
            var _rate = JSON.parse(this.sInfo.rate);
            var _rateList = Object.keys(JSON.parse(this.sInfo.rate));
            for (var i = 0; i < _rateList.length; i++) {
              var _c = Object.keys(workJson.rateList);
              if (_c.indexOf(_rateList[i]) != -1) {
                workJson.rateList[_rateList[i]] = _rate[_rateList[i]];
              }
            }
            for (var i = 0; i < this.ooption.length; i++) {
              if (_rateList.indexOf(this.ooption[i].name) != -1) {
                this.ooption[i].value = _rate[this.ooption[i].name];
              }
            }
          }

          for (var i = 0; i < worksDetail.length; i++) {
            workJson.img.push({ src: worksDetail[i].content, id: i });
          }
          for (var i = 0; i < askInfo.length; i++) {
            const element = askInfo[i];
            let a = JSON.parse(element.content)[0];
            let b = a.anwer.split(",");
            let c = [];
            for (var j = 0; j < b.length; j++) {
              c.push(parseInt(b[j]));
            }
            a.askJson.radio = c;
            a.askJson.time = element.time;
            workJson.askInfo.push(a.askJson);
          }

          for (var i = 0; i < answerInfo.length; i++) {
            const element = answerInfo[i];
            workJson.answerInfo.push(JSON.parse(element.content)[0]);
          }

          this.worksDetail = workJson;

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

          this.$forceUpdate;

          var _course = `<h1>${this.sInfo.course}</h1>`;
          var _title =
            "<h2>" +
            "第" +
            (this.sInfo.stage + 1) +
            "阶段 " +
            this.dyList[this.sInfo.stage].name +
            "</h2>";
          var _subtitle =
            "<h3>" +
            "任务" +
            (this.sInfo.task + 1) +
            " " +
            this.dyList[this.sInfo.stage].taskList[this.sInfo.task].name +
            "-" +
            this.sInfo.sName +
            "</h3>";
          var _img = "";
          if (workJson.img.length > 0) {
            for (var i = 0; i < workJson.img.length; i++) {
              // _img += `<div style="margin-top:10px"><div>图片${
              //   i + 1
              // }:<a href='${workJson.img[i].src}'>${
              //   workJson.img[i].src
              // }</a></div>`;
              _img += `<div style="margin-top:10px"><div>图片${i + 1
                }</div><img style="max-width:500px" src="${workJson.img[i].src
                }"/></div>`;
            }
          }

          var _ask = "";
          if (workJson.askInfo.length > 0) {
            var _ask = "<h3>选择题</h3>";
            for (var i = 0; i < workJson.askInfo.length; i++) {
              var _div = document.createElement("div");
              _div.innerHTML = `<h4>标题:${workJson.askInfo[i].askTitle}</h4>`;
              for (var j = 0; j < workJson.askInfo[i].askJson.length; j++) {
                var _div2 = document.createElement("div");
                _div2.innerHTML = `<h5>第${j + 1}题:${workJson.askInfo[i].askJson[j].askstitle
                  }  选择:${workJson.askInfo[i].radio[j] + 1}</h5> `;
                var _div3 = document.createElement("div");
                for (
                  var z = 0;
                  z < workJson.askInfo[i].askJson[j].checkList.length;
                  z++
                ) {
                  _div3.innerHTML += `<span style="margin-right:5px">${z + 1}.${workJson.askInfo[i].askJson[j].checkList[z]
                    }</span>`;
                }
                _div2.innerHTML += `<div>${_div3.innerHTML}</div>`;
                _div.innerHTML += `<div>${_div2.innerHTML}</div>`;
              }
              _ask += `<div>${_div.innerHTML}</div>`;
            }
          }

          var _answer = "";
          if (workJson.answerInfo.length > 0) {
            var _answer = "<h3>问答</h3>";
            for (var i = 0; i < workJson.answerInfo.length; i++) {
              var _div = document.createElement("div");
              _div.innerHTML = `<h4>问答：${workJson.answerInfo[i].answerTitle}</h4>`;
              _div.innerHTML += `<div>${workJson.answerInfo[i].answer}</div>`;
              _answer += `<div>${_div.innerHTML}</div>`;
            }
          }

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

          var _html =
            _course + _title + _subtitle + _img + _ask + _answer + _link;
          this.generate(_html);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    isOpen(s) {
      // this.stageIndex = s;
      this.dyList2[s].isOpen = !this.dyList2[s].isOpen;
    },
    openTask(s, i) {
      var a = s + "-" + i;
      var b = document.getElementById(a);
      var d = b.getAttribute("scrollindex");
      var c = document.getElementsByClassName("shuBox")[0];
      c.scrollTop = parseInt(d) * 375;
      this.stageIndex = s;
      this.taskCount = i;
      this.navId = a;
    },
    async generate(a) {
      // 将html文件中需要用到的数据挂载到store上
      this.$store.commit("update", ["report", a]);
      console.log(this.$store.state.report);
      const content = `<!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>报告</title>
      </head>
      <body>
      ${this.$store.state.report}
      </body>
      </html>`;
      // debugger
      // 生成报告
      const link = document.createElement("a");
      let dname = this.sInfo.course + "-" + this.sInfo.sName + ".html";
      // link.download = "报告.html"; // 文件名
      link.download = dname; // 文件名
      link.style.display = "none";
      // 创建文件流
      // 创建bolb实例时，内容一定要放在[]中
      const blob = new Blob([content], {
        type: "text/plain;charset='utf-8'",
      });
      link.href = window.URL.createObjectURL(blob);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
  },
  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;
        }
      };
    });
  },
  created() {
    this.page = 1;
    this.selectSDetail();
    this.getProject();
    document.scrollingElement.scrollTop = 0;
  },
};
</script>

<style scoped>
.eliP {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 80%;
}
.body_student {
  margin: 0px auto;
  width: 98%;
  height: 100%;
}
.student_head {
  width: 100%;
  margin: 0 auto;
  height: 30%;
  background-image: linear-gradient(90deg, #30c499, #75ceba);
  color: #fff;
}
.wheel > img,
.project > img {
  width: 100%;
  height: 100%;
}
.box_course {
  display: flex;
  padding: 35px 0 25px 60px;
  align-items: center;
}
.wheel {
  width: 210px;
}
.right_box {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  /* justify-content: space-around; */
}
.right_box_title {
  font-size: 23px;
}
.people {
  display: flex;
  margin: 30px 0 20px 0px;
}
.student_body {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  margin-top: 20px;
  padding: 0 0 20px;
}
.project {
  width: 100%;
  height: 100%;
}
.project_box {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
}
.three_box_inthis {
  display: flex;
  width: 30.33%;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid #ccc;
  margin: 15px 0 0 15px;
}
.projct_nav {
  margin-left: 5px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
}
.projct_nav > div {
  margin-bottom: 5px;
}
.look_score {
  border-radius: 0px 0px 5px 5px;
  text-align: center;
  background: #41cda6;
  width: 100%;
  height: 35px;
  font-size: 14px;
  color: #fff;
  line-height: 35px;
  cursor: pointer;
  margin-top: 10px;
}

.cancelbox {
  position: absolute;
  z-index: 2;
  left: 50%;
  width: 95%;
  transform: translateX(-50%);
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
}

.student_table >>> .el-table,
.student_table >>> .el-table__body-wrapper {
  height: auto !important;
}
.pb_head>span:nth-child(2) {
  font-size: 16px;
  margin-left: 80px;
  color: #ab582f;
}

.pb_head {
  margin: 0 !important;
  width: 100% !important;
}

.student_page {
  margin-top: 10px;
}

.student_head {
  margin-top: 10px;
  padding-bottom: 15px;
}

.student_search {
  display: flex;
}

.student_search>div:nth-child(1) {
  line-height: 35px;
  font-size: 14px;
}

.student_search>>>.el-input__inner {
  width: 190px;
  height: 35px;
  margin-left: 10px;
}

.student_table>>>.el-table--border td {
  border-right: 0px !important;
}

.add_work>>>.el-dialog__header {
  padding: 20px 20px 10px;
  text-align: center;
  background: #32455b;
}

.add_work>>>.el-dialog__title {
  font-size: 14px !important;
  color: #fff !important;
}

.add_work>>>.el-dialog__headerbtn {
  font-size: 20px !important;
  top: 5px !important;
  right: 8px !important;
}

.add_work>>>.el-form-item__label {
  margin-left: 65px;
}

.add_work>>>.el-form-item {
  display: flex;
}

.add_work>>>.el-form-item__content {
  margin: 0 !important;
}

.add_work>>>.el-dialog__footer {
  text-align: center !important;
}

.add_work>>>.el-dialog {
  min-width: 650px !important;
  width: 1080px;
}

.add_work>>>.el-dialog__body {
  background: #fff;
  height: 660px;
  overflow: auto;
}

.header-title {
  display: flex;
}

.logoImg {
  width: 30px;
}

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

.title_add_student {
  margin: 0 auto;
  color: #fff;
}

.first {
  margin-top: 25px;
  border-bottom: 1px solid #c5c5c5;
}

.one_top {
  display: flex;
  justify-content: space-between;
}

.one_top>div:nth-child(1) {
  color: #2490bf;
  font-size: 16px;
}

.one_top>button {
  width: 100px;
  background: #24a0a4;
  height: 30px;
  color: #e0e0e0;
  font-size: 13px;
  padding: 0 !important;
}

.work_Img {
  width: 150px;
  margin: 10px 0;
}

.assess_Img {
  width: 400px;
  margin: 0 auto;
  padding: 15px 0;
}

.work_Img>img,
.assess_Img>img {
  width: 100%;
  height: 100%;
}

.work_input {
  border: 1px solid;
  width: 135px;
  height: 20px;
  line-height: 20px;
  font-size: 13px;
  padding: 5px;
}

.poetry {
  margin: 10px 0 15px 0;
}

.assess {
  background: #169bd5 !important;
}

.assess_top {
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

.assess_top>div:nth-child(1) {
  color: #2490bf;
  font-size: 16px;
}

.student_Answer {
  display: flex;
  margin: 5px 10px;
  /* padding-bottom: 25px; */
}

.workName {
  font-size: 18px;
  font-weight: bold;
  margin: 5px 10px;
}

.toux {
  width: 35px;
  /* margin: auto 0; */
  height: 35px;
}

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

.nav {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  flex-direction: column;
}

.studentName {
  margin-left: 10px;
  font-size: 13px;
}

.studentAnswer {
  font-size: 12px;
  margin: 5px 0 0 10px;
  height: 42px;
  overflow: auto;
}

.comment {
  /* margin: 20px 0 0 10px;
  overflow: auto;
  height: 75%;
  max-height: 330px; */
  overflow: auto;
  /* height: 290px; */
  height: 525px;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
}

.comment_body {
  height: calc(100% - 25px);
  overflow: auto;
}

.comment>.comment_title {
  font-size: 18px;
}

.comment>.comment_title>span {
  font-size: 14px;
}

.other_Answer {
  display: flex;
  margin: 5px 10px;
  padding: 15px 0;
  justify-content: center;
}

.nav {
  margin-left: 5px;
  width: 80%;
}

.nameAndTime {
  display: flex;
}

.otherName {
  font-weight: bold;
  margin-left: 10px;
  font-size: 13px;
}

.time {
  margin-left: 25px;
  font-size: 12px;
  margin-top: 3px;
}

.otherAnswer {
  width: 80%;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  font-size: 12px;
  margin: 5px 0 0 10px;
}

.doingAssess {
  margin: 0 auto;
  width: 300px;
  background: #169bd5;
  height: 35px;
  line-height: 35px;
  border-radius: 3px;
  font-size: 13px;
  text-align: center;
  color: #fff;
  margin-top: 30px;
  cursor: pointer;
}

.score_top {
  display: flex;
  margin-bottom: 10px;
}

.userTou {
  width: 50px;
}

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

.score_user_name {
  line-height: 53px;
  margin-left: 15px;
}

.course_top {
  display: flex;
  align-items: center;
}

.course_top>div:nth-child(1) {
  line-height: 25px;
}

.course_top>div:nth-child(2) {
  border: 1px solid #ccc;
  width: 250px;
  text-align: center;
  height: 25px;
  line-height: 25px;
  margin-left: 30px;
}

.sd_score {
  font-size: 15px;
  background: #fff;
  height: 100%;
  padding-top: 40px;
  border-radius: 5px;
  width: 90%;
  box-shadow: 2px 2px 5px #909090;
  overflow: auto;
}

.sd_score .score_box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  /* margin-left: 30px; */
}

.sd_score .score_box:last-child {
  margin-bottom: 0;
}

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

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

.sd_score span {
  width: 130px;
  text-align: justify;
  text-align-last: justify;
  display: block;
  margin-right: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
}

.moreSay {
  margin: 0px 0 5px 20px;
}

.more_say_input {
  margin-left: 20px;
  width: 80%;
}

.more_say_input>>>.el-input__inner {
  height: 75px;
  font-size: 13px;
  padding: 0 0 0 10px;
}

.assess_right {
  width: 200px;
  background: #82b0ee;
  color: #fff;
  text-align: center;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  margin: 0 auto;
  margin-top: 20px;
  font-size: 13px;
  cursor: pointer;
}

.student_page {
  margin-top: 10px;
}

.display {
  display: none;
}

.firstTop {
  background: #fff;
  display: flex;
  margin-bottom: 15px;
  flex-direction: column;
  align-items: flex-start;
  height: 90px;
  padding: 10px 25px;
  border-radius: 5px;
  width: 90%;
  box-shadow: 2px 2px 5px #909090;
}

.talkScore>>>.el-dialog__body {
  background: #efefef;
  margin: 0 !important;
}

.lastTop {
  background: #fff;
  border-radius: 5px;
  width: 98%;
  height: 120px;
  box-shadow: 2px 2px 5px #909090;
}

.left,
.right {
  /* background: #fff; */
  border-radius: 5px;
  /* padding: 10px; */
  box-sizing: border-box;
}

.left {
  margin-right: 10px;
  width: 30%;
  min-height: 425px;
}

/* .left .left_top {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
} */
.left .left_bottom {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  height: 160px;
}

.right {
  width: 20%;
  background: none;
  padding: 0;
}

.courseTitle {
  font-size: 16px;
  color: #7c7c7c;
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course_t {
  font-size: 19px;
  display: flex;
  align-items: flex-end;
}

.course_t span:nth-child(2) {
  font-size: 16px;
  margin-left: 10px;
}

/* .courseTitle span:nth-child(2) { */
  /* font-size: 14px;
  cursor: pointer; */
/* } */

.bigImg {
  margin-top: 10px;
  /* height: 300px; */
  height: 150px;
}

.bigImg>img,
.thumbnail>div>img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.thumbnail {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin: 5px 0 8px;
  overflow-x: auto;
  overflow-y: hidden;
}

.isClick {
  border: 3px solid #5f89d4;
  border-radius: 5px;
}

.thumbnail>div {
  width: 80px;
  height: 80px;
  margin-right: 5px;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
}

.zyBoxC {
  background: #ededed;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 0px;
  flex-direction: column;
  height: calc(100% - 50px);
}

.zyBox {
  display: flex;
  min-width: 600px;
  width: 600px;
  position: relative;
  background: #fff;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  overflow: hidden;
}

.zyBoxC+.zyBoxC {
  margin-top: 10px;
}

.rbButtom {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #06a7ff;
  width: 100px;
  height: 30px;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  line-height: 30px;
  font-size: 14px;
  cursor: pointer;
  right: 10px;
}

.bigImg>>>.vjs-tech,
.bigImg>>>.video-js {
  height: 300px !important;
}

.el-table>>>.even_row {
  background-color: #f1f1f1;
}

.data_body {
  height: 200px;
  display: flex;
  position: relative;
  border-radius: 5px;
  box-sizing: border-box;
  width: 100%;
  background: #fff;
}

.data_body .title {
  position: absolute;
  top: 10px;
  left: 10px;
}

.dialog_diy>>>.el-dialog__header {
  padding: 9px 20px 10px;
  background: #32455b !important;
}

.dialog_diy>>>.el-dialog__title {
  color: #fff;
  font-size: 15px;
}

.dialog_diy>>>.el-dialog__headerbtn {
  top: 14px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer {
  background: #fafafa;
}

.max_diy>>>.el-dialog {
  /* max-width: 1200px; */
  max-width: 1300px;
  /* height:800px */
}

.max_diy>>>.el-dialog__body {
  height: 800px;
}

.dialog_diy2>>>.el-dialog__header {
  padding: 9px 20px 10px;
  background: #32455b !important;
}

.dialog_diy2>>>.el-dialog__title {
  color: #fff;
  font-size: 15px;
}

.dialog_diy2>>>.el-dialog__headerbtn {
  top: 12px;
}

.dialog_diy2>>>.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy2>>>.el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.dialog_diy2>>>.el-dialog__body,
.dialog_diy2>>>.el-dialog__footer {
  background: #ededed;
  padding: 15px 20px;
  box-sizing: border-box
}

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

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

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

.a_add_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 18px;
}

.a_add_head .a_add_head_input {
  width: 300px;
}

.a_add_head .a_add_head_div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.a_add_body {
  display: flex;
  align-items: center;
}

.a_add_input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* flex-direction: column; */
  /* width: 100%; */
}

.a_add_input>>>el-radio-group {
  margin: 10px 0;
}

.a_add_input>>>.el-radio-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.redioStyle>>>.el-radio__label {
  font-size: 18px;
}

.task_title {
  font-size: 18px;
  font-weight: 700;
}

/* .ask_Answer { */
  /* margin-top: 10px; */
/* } */

.ask_Answer_title {
  font-size: 18px;
}

.ask_Answer_content {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

.answer_body {
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

.answer_title {
  font-size: 15px;
  font-weight: 700;
}

.answer_content {
  margin-top: 5px;
}

.ask_body {
  display: flex;
  font-size: 16px;
  margin-top: 10px;
  flex-direction: column;
  height: 130px;
  overflow: auto;
  /* padding: 0 10px; */
  box-sizing: border-box;
}

.ask_body div {
  /* cursor: pointer; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ask_body div .btn {
  cursor: pointer;
  color: #fff;
  background-color: #409eff;
  text-align: center;
  font-size: 12px;
  padding: 6px 12px;
  box-sizing: border-box;
  border-radius: 5px;
  width: 60px;
}

.ask_body div span:nth-child(1) {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ask_body div+div {
  margin-top: 10px;
}

.work_nopicture {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 350px; */
  height: 352px;
}

.student_table>>>.el-table,
.student_table>>>.el-table__body-wrapper {
  height: auto !important;
}

.tx {
  width: 35px;
}

.ech {
  width: 100px;
}

.tx>img,
.ech>img {
  width: 100%;
  height: 100%;
}

.txName {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 10px;
}

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

.top {
  display: flex;
  justify-content: space-between;
  padding: 15px 0 15px 20px;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 95%;
}

.jdName>div:nth-child(1) {
  font-size: 20px;
  font-weight: bold;
}

.taskName {
  font-size: 14px;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.task {
  background: #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: 45%;
  padding-left: 20px;
}

.right_top {
  width: 53%;
}

.cBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  width: 100%;
  height: calc(100% - 60px);
  overflow: auto;
}

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

.pb_left {
  width: 20%;
  margin-right: 10px;
  background: rgb(255, 255, 255);
  /* padding-right: 10px; */
  /* height: 500px; */
  height: 100%;
}

.cTitle {
  background: #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;
}

.navTaskname {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  padding-left: 5px;
}

.allBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  width: 100%;
  height: 351px;
  margin-bottom: 20px;
}

.shuBox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  flex-wrap: nowrap;
  overflow: auto;
  /* height: 500px; */
  height: 100%;
}

.answerbox {
  display: flex;
  flex-direction: row;
  /* align-items: center; */
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}

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

.answerbox1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  font-size: 16px;
}

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

.jdName {
  width: 100%;
}

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

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

.openTaskActive {
  color: #4386e6;
}

.isClick {
  background: #4d9def;
}

.buttonCss {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  margin: 10px 0;
}

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

.fullStyle>>>.el-dialog,
.fullStyle {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden;
}

.worksTime {
  position: absolute;
  top: 10px;
  right: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
}

/* .fullBox { */
  /* overflow: unset !important;
  height: auto !important; */
/* } */

.fullZyBox {
  width: 60% !important;
}

.rightScoreFullBox {
  width: 40%;
}

.titBri {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
}
.claInfo {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.claInfo span {
  margin-left: 10px;
}

.claInfo img {
  width: 35px;
  border-radius: 50%;
}
.toolEListCon {
  width: 100%;
  /* display: flex; */
  /* justify-content: space-between; */
  /* flex-shrink: 1; */
}
.JSCo {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.JSCoTxt {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pageCon {
  display: flex;
  height: calc(100% - 60px);
  padding-bottom: 30px;
  box-sizing: border-box;
}
.rightBar {
  margin-right: 20px;
  border-radius: 10px;
  height: 100%;
  width: 270px;
  overflow: hidden;
  background-color: #ffffff;
}
.workCon {
  display: flex;
  height: 100%;
  flex: 1;
  min-width: 600px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 10px;
}

.coverPage {
  height: 743px;
  background-color: #ccc;
  position: relative;
}
.coverPageLogo {
  padding: 10px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.coverPageFrom {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70%;
  margin: 0 auto;
}
.coverPageFromTit {
  font-size: 48px;
  color: rgba(58, 59, 152, 1);
  font-weight: 600;
}
.fromCss {
  border: 1.5px dashed rgba(158, 208, 255, 1);
  border-radius: 16px;
  background-color: #fff;
  padding: 24px 32px;
  width: 300px;
  color: rgba(35, 99, 205, 1);
}
.fromCss > div {
  margin-bottom: 10px;
  display: flex;
}
.fromCss > div > span {
  flex-shrink: 0;
  margin-right: 5px;
  font-size: 16px;
}
.fromCss > div:last-child {
  margin-bottom: 0;
}
.txt {
  width: 100%;
  border-bottom: 1px solid rgba(192, 210, 229, 1);
  text-align: center;
  color: #000;
}
.coverPageCon {
  background-color: #e3edfe;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  /* padding: 0 30px; */
  box-sizing: border-box;
}
.stageCon {
  background-color: #fff;
  padding: 15px 20px;
  box-sizing: border-box;
  margin-bottom: 10px;
  border-radius: 8px;
  width: 100%;
}

.a_addBox {
  margin: 10px 0;
  background: #fff;
  padding: 0 15px;
  /* max-height: 400px; */
  /* max-height: 160px; */
  /* overflow: auto; */
}
.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;
}
.redioStyle4 >>> .el-checkbox-group {
  margin: 0 5px;
}
.redioStyle3 >>> .el-checkbox-group {
  margin: 0 5px;
}
.sortTool {
  padding: 1px 3px;
  border: 2px #5d89c4 solid;
  margin: 0 5px;
  min-width: 20px;
  border-radius: 5px;
  text-align: center;
}
/* table 样式 */
.cont /deep/ table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

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

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

.score_boxTit > span {
  border-left: 3px solid rgba(54, 129, 252, 1);
  padding-left: 5px;
}
.score_boxTit {
  /* padding: 0 30px; */
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
}
.inImg {
  width: 100px;
}
.inImg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.radioBox {
  display: flex;
  flex-direction: column;
}
.radioBox >>> .el-radio {
  display: flex;
  align-items: center;
  margin: 5px;
}
.radioBox >>> .el-checkbox {
  display: flex;
  align-items: center;
  margin: 5px;
}
.RootImgBlock {
  width: 60%;
  font-size: 12px;
}
.RootImgBlockSy {
  /* width: 300px; */
  white-space: nowrap;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
}
.score_box {
  font-size: 14px !important;
  margin-bottom: 15px;
  margin: 5px 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.score_box:last-child {
  margin-bottom: 0;
}
.worksTarget {
  border-left: 3px solid rgba(54, 129, 252, 1);
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
}
.worksTarget > span {
  margin-left: 5px;
}
.worksTargetCon {
  background-color: #fff;
  padding: 10px;
  margin-top: 10px;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 12px;
}
.worksTargetCon > div {
  margin-bottom: 10px;
}
.worksTargetCon > div:last-child {
  margin: 0 !important;
}
.stageTit {
  text-align: left;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 20px;
  color: rgba(242, 161, 75, 1);
  border-left: 5px rgba(242, 161, 75, 1) solid;
  padding-left: 5px;
}
.taskTitInd {
  font-size: 14px;
}
.TitBti {
  background-color: rgba(242, 161, 75, 1);
  color: #fff;
  padding: 3px 5px;
  border-radius: 4px;
  margin-right: 5px;
  box-sizing: border-box;
  font-size: 12px;
  height: 22px;
  line-height: 16px;
  text-align: center;
}
.taskTitInd span:nth-child(2) {
  color: rgba(0, 0, 0, 0.9);
  font-weight: 600;
}
.taskBri {
  width: 100%;
  background-color: rgba(253, 247, 243, 1);
  padding: 10px 12px;
  line-height: 20px;
  box-sizing: border-box;
  font-weight: PingFang SC;
  font-size: 12px;
  font-weight: 400;
  border-radius: 4px;
}
.toolBlk {
  display: flex;
  height: 44px;
  /* padding-left: 5px; */
  box-sizing: border-box;
  margin: 15px 0;
}
.toolImg{
  background-color: bisque;
}
.toolBlk img {
  height: 100%;
  margin-right: 8px;
}
.toolTit {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.toolTit div:nth-child(1) {
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  color: rgba(0, 0, 0, 0.9);
  margin-right: 10px;
}
.toolTit div:nth-child(2) {
  font-family: PingFang SC;
  font-size: 10px;
  font-weight: 400;
  text-align: left;
  color: rgba(0, 0, 0, 0.9);
}
.answerTxt {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 400;
  line-height: 30px;
  padding: 0 10px;
}
.taskSco {
  background-color: rgba(253, 247, 243, 1);
  border-radius: 8px;
  padding: 10px 15px;
  box-sizing: border-box;
  margin: 10px 0 20px;
}
.taskScoTit {
  display: flex;
  justify-content: space-between;
  margin: 0 0 20px;
}
.taskScoTit div:nth-child(1) {
  color: rgba(0, 0, 0, 0.9);
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.taskScoTit div:nth-child(2) {
  color: rgba(0, 0, 0, 0.6);
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: 400;
}
.taskScoCon {
  display: flex;
  justify-content: space-between;
}
.taskScoConEList {
  justify-content: space-between;
  display: flex;
  flex: 1;
}
.taskScoConEList >>>.rate_size[data-v-8d4152bc] .el-rate__icon{
  font-size: 18px;
}
.taskScoConTit {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 10px;
  color: rgba(0, 0, 0, 0.9);
  border-left: 5px rgba(242, 161, 75, 1) solid;
  padding-left: 5px;
}
.WorkCon {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 8px;
  box-sizing: border-box;
  border-radius: 8px;
  font-family: PingFang SC;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  flex: 1;
}
.WorkConSY {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 8px;
  box-sizing: border-box;
  border-radius: 8px;
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: 400;
  width: 100%;
  flex: 1;
}
.WorkConSY div {
  margin-bottom: 8px;
}
.WorkConSY div:last-child {
  margin-bottom: 0;
}
.item {
  margin: 4px;
}
</style>