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

<template>
  <div class="pbl">
    <div class="pdfCon" ref="reportPdf" v-loading="loading">
      <div
        class="coverPage"
        :style="{
          backgroundColor: '#FFFBDC'
        }"
      >
        <div class="coverPageLogo">
          <img
            style="height: 50px;"
            :src="schoolImg.logo ? schoolImg.logo : ''"
            alt=""
          />
        </div>
        <div class="coverPageFrom" style="z-index: 10;">
          <div class="coverPageFromTit">{{ worksDialogCon2.course }}</div>

          <div
            style="
                    font-size: 32px;
                    font-weight: 600;
                    color:rgba(176, 123, 0, 1);
                    margin: 20px 0;
                  "
          >
            {{ lang.ssWorkSet }}
          </div>
          <div class="termC">
            <div><span>2023-2024</span>{{ lang.ssSchoolYear }}</div>
            <div style="width: 20px;"></div>
            <div>{{ lang.ssSemester.replace(/\*/g, 2) }}</div>
          </div>
          <div class="fromCss">
            <div>
              <span>{{ lang.ssName }}:</span>
              <div class="txt">{{ worksDialogCon2.sName }}</div>
            </div>
            <div>
              <span>{{ lang.ssClass }}:</span>
              <div class="txt">
                {{ worksDialogCon2.class ? worksDialogCon2.class : "——" }}
              </div>
            </div>
            <div>
              <span>{{ lang.ssSchool }}:</span>
              <div class="txt">{{ worksDialogCon2.schName }}</div>
            </div>
            <div>
              <span>{{ lang.ssTeacher }}:</span>
              <div class="txt">
                <div style="transform: translate(-1em, 0px);">
                  {{ worksDialogCon2.uname }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="coverPageFrom">
          <img
            style="z-index: 10;width: 70%;transform: translate(0px, -45px);"
            src="../../../assets/icon/exportPdfworks/ropt.svg"
            alt=""
          />
        </div>
      </div>

      <div
        class="coverPageCon"
        :style="{
          backgroundColor: '#FFFBDC'
        }"
      >
        <div
          style="
                  font-size: 24px;
                  font-weight: 600;
                  color: rgba(92, 80, 70, 1);
                  margin: 35px 0 20px;
                "
        >
          {{ worksDialogCon2.course }}
        </div>
        <template v-for="i in workList">
          <div
            v-if="isStage(i.taskList)"
            :key="i.id"
            class="stageCon"
          >
            <div v-if="CState != 5 && CState != 6" class="stageTit">
              {{ lang.ssStage.replace(/\*/g, i.id * 1 + 1) }}<span v-if="i.name">:{{ i.name }}</span>
            </div>
            <template v-for="k in i.taskList">
              <div
                :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;
                      "
                >
                  <div class="taskTitInd">
                    <span>{{ lang.ssTask }}{{ k.task + 1 }}</span>
                    <span>{{ k.taskTit }}</span>
                  </div>
                  <div>
                    <!-- <span class="toolTit">文档工具</span> -->
                  </div>
                </div>
                <div v-if="k.taskDetail" class="taskBri">
                  <div v-html="k.taskDetail"></div>
                </div>
                <div
                  class="WorksCon"
                  v-for="(l, lind) in k.toolEList"
                  :key="lind + 'l'"
                >
                  <div v-if="l.content && l.content.length">
                    <div v-if="l.tool[0] == 15">
                      <div class="toolBlk">
                        <img
                          src="../../../assets/icon/thirdToolList/answer.png"
                          alt=""
                        />
                        <div class="toolTit">
                          <div>{{ lang.ssTool.replace(/\*/g, lind + 1) }}{{ lang.ssQATool }}</div>
                          <div>{{ lang.ssQuestionT }}{{ l.content[0][0].answerTitle }}</div>
                        </div>
                      </div>
                      <div class="answerTxt">{{ lang.ssAnswer }}{{ l.content[0][0].answer }}</div>
                    </div>
                    <div v-if="l.tool[0] == 52">
                      <div class="toolBlk">
                        <img
                          src="../../../assets/icon/fourthToolList/text.png"
                          alt=""
                        />
                        <div class="toolTit">
                          <div>{{ lang.ssTool.replace(/\*/g, lind + 1) }}{{ lang.ssDocTool }}</div>
                          <div>
                            {{ lang.ssDefaultDesc }}
                          </div>
                        </div>
                      </div>
                      <div class="answerTxt" v-html="l.content[0].text"></div>
                    </div>
                    <div v-if="l.tool[0] == 72">
                      <div class="toolBlk">
                        <img
                        style="width: 44px;height: 44px;object-fit: contain;"
                          :src="l.appJson.json.icon"
                          alt=""
                        />
                        <div class="toolTit">
                          <div>{{ lang.ssTool.replace(/\*/g, lind + 1) }}{{ l.appJson.name }}</div>
                          <div>
                            {{ l.appJson.detail }}
                          </div>
                        </div>
                      </div>
                      <div  style="margin-bottom: 20px;" v-for="(item,index) in l.content[0]" :key="index+'coco'">
                            <div style="margin-bottom: 15px;font-size: 14px;font-weight: 600;color: #000;">{{ lang.ssStage.replace(/\*/g, index + 1) }}</div>
                            <template v-if="item.imageUrls && item.imageUrls.length">
                              <div style="display: flex;flex-wrap: wrap;gap: 10px;" v-for="(image,index) in item.imageUrls" :key="index+'-image'">
                                  <img style="max-width: 390px;object-fit: cover;" :src="image" alt="" />
                              </div>
                            </template>
                            <template v-if="item.messages && item.messages.length">
                              <div v-for="(po,PInd) in item.messages" :key="PInd+'PInd'">
                                <div class="left" v-if="po.role == 'assistant'">
                                        <div class="TName">{{ lang.ssAIAssist }}</div>:
                                        <div class="con" v-html="MarkdownT(po.content)"></div>
                                </div>

                                <div class="left" v-if="po.role == 'user'">
                                        <div class="TName">{{ worksDialogCon2.sName }}</div>:
                                        <div class="con" v-html="po.content"></div>
                                </div>
                              </div>
                            </template>
                        </div>
                    </div>
                    <div v-if="l.tool[0] == 16 || l.tool[0] == 50">
                      <div class="toolBlk">
                        <img
                          v-if="l.tool[0] == 16"
                          src="../../../assets/icon/thirdToolList/work.png"
                          alt=""
                        />
                        <img
                          v-if="l.tool[0] == 50"
                          src="../../../assets/icon/thirdToolList/plwork.png"
                          alt=""
                        />

                        <div class="toolTit">
                          <div>
                            {{ lang.ssTool.replace(/\*/g, lind + 1) }}{{
                              l.tool[0] == 16 ? lang.ssHomework : lang.ssBatchUp
                            }}
                          </div>
                          <div>
                            {{ lang.ssDefaultDesc }}
                          </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
                          v-if="l.tool[0] == 1"
                          src="../../../assets/icon/secondToolList/whiteBoard.png"
                          alt=""
                        />
                        <img
                          v-if="l.tool[0] == 3"
                          src="../../../assets/icon/secondToolList/mindMapping.png"
                          alt=""
                        />
                        <img
                          v-if="l.tool[0] == 7"
                          src="../../../assets/icon/secondToolList/mindNetwork.png"
                          alt=""
                        />

                        <div class="toolTit">
                          <div>
                            {{ lang.ssTool.replace(/\*/g, lind + 1) }}{{
                              l.tool[0] == 1
                                ? lang.ssEWhite
                                : l.tool[0] == 7
                                ? lang.ssMindGrid
                                : lang.ssMindMap
                            }}
                          </div>
                          <div>
                            {{ lang.ssDefaultDesc }}
                          </div>
                        </div>
                      </div>
                      <img 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
                          src="../../../assets/icon/fourthToolList/table.png"
                          alt=""
                        />
                        <div class="toolTit">
                          <div>{{ lang.ssTool.replace(/\*/g, lind + 1) }}{{ lang.ssTable }}</div>
                          <div>
                            {{ lang.ssDefaultDesc }}
                          </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
                          src="../../../assets/icon/thirdToolList/ask.png"
                          alt=""
                        />
                        <div class="toolTit">
                          <div>{{ lang.ssTool.replace(/\*/g, lind + 1) }}{{ lang.ssQuest }}</div>
                          <div>{{ lang.ssTitle }}:{{ 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>{{ lang.ssQuestion3.replace(/\*/g, index + 1) }}{{ 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
                          src="../../../assets/icon/thirdToolList/choose.png"
                          alt=""
                        />
                        <div class="toolTit">
                          <div>{{ lang.ssTool.replace(/\*/g, lind + 1) }}{{ lang.ssChoice }}</div>
                          <div>
                            {{ lang.ssDefaultDesc }}
                          </div>
                        </div>
                      </div>
                      <div
                        v-for="(i, index) in l.content[0].testJson"
                        :key="index + 'm'"
                      >
                        <div>
                          {{ lang.ssQuestion3.replace(/\*/g, index + 1) }}{{ i.teststitle }}
                          <span
                            v-if="
                              JSON.stringify(l.content[0].radio[index]) ==
                                JSON.stringify(i.answer)
                            "
                            style="color: #868ce4"
                            >{{ lang.ssCorrect }}</span
                          >
                          <span v-else style="color: red">{{ lang.ssWrong }}</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>{{ lang.ssTool.replace(/\*/g, lind + 1) }}{{ lang.ssSelMatch }}</div>
                          <div>
                            {{ lang.ssDefaultDesc }}
                          </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">{{ lang.ssOption }}:</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">{{ lang.ssAnswer }}:</span>

                        <div
                          style="margin-right: 10px"
                          v-for="(item, itInd) in l.content[0]"
                          :key="itInd"
                        >
                          {{ lang.ssOption }}{{ itInd + 1 }}：{{ l.selectJson.select[item] }}
                          <span
                            v-if="l.selectJson.answer[itInd] == l.content[0][itInd]"
                            style="color: #868ce4"
                            >{{ lang.ssCorrect }}</span
                          >
                          <span v-else style="color: red">{{ lang.ssWrong }}</span>
                        </div>
                      </div>
                      <div>
                        <span style="margin-right: 10px">{{ lang.ssAnswer3 }}:</span>

                        <span
                          style="margin-right: 10px"
                          v-for="(item, itInd) in l.selectJson.answer"
                          :key="itInd"
                          >{{ lang.ssOption }}{{ itInd + 1 }}：{{
                            l.selectJson.select[item]
                          }}</span
                        >
                      </div>
                    </div>
                    <!-- <div v-if="l.tool[0] == 41">
                        <div class="toolBlk">
                          <img
                            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>
                          <span style="margin-right: 10px">学生回答:</span>
                          <span
                            style="margin-right: 10px"
                            v-for="(item, itInd) in l.content[0]"
                            :key="itInd"
                            >{{ itInd + 1 }}、{{ l.selectJson.select[item] }}</span
                          >
                        </div>
                      </div> -->

                    <!-- 排序 -->
                    <div v-if="l.tool[0] == 47">
                      <div class="toolBlk">
                        <img
                          src="../../../assets/icon/fourthToolList/conSentences.png"
                          alt=""
                        />
                        <div class="toolTit">
                          <div>{{ lang.ssTool.replace(/\*/g, lind + 1) }}{{ lang.ssSort }}</div>
                          <div>
                            {{ lang.ssDefaultDesc }}
                          </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;
                              "
                        >
                          {{ lang.ssQuestion2.replace(/\*/g, index + 1) }}:
                          <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"
                            >{{ lang.ssCorrect }}</span
                          >
                          <span v-else style="color: red">{{ lang.ssWrong }}</span>
                        </div>
                        <div
                          style="
                                margin: 10px 0;
                                display: flex;
                                align-items: center;
                                flex-wrap: wrap;
                              "
                        >
                          {{ lang.ssStuAnswer }}
                          <div
                            class="sortTool"
                            v-for="(i, index) in i.chooseSenList"
                            :key="index"
                          >
                            {{ i }}
                          </div>
                        </div>
                        <div>
                          {{ lang.ssAnswer3 }}
                          <span style="margin: 0 5px">{{
                            i.addSentence.join(",")
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </div>

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

                    <!-- 作业评分 -->
                    <div class="taskScoCon">
                      <!-- 分数详情与素养 -->
                      <div style="flex: 1; display: flex; flex-wrap: wrap">
                        <div style="width: 315px; margin:0 20px 10px 0">
                          <div class="taskScoConTit">{{ lang.ssScoreDetail }}</div>
                          <div
                            v-for="(wItem, ind) in l.eList"
                            :key="ind + 's'"
                            class="score_box"
                            style="width: 100%"
                          >
                            <div
                              style="
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    width: 100%;
                                    min-width: 48%;
                                  "
                            >
                              <div class="RootImgBlock">
                                {{ wItem.detail }}
                              </div>

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

                        <div style="flex: 1">
                          <div class="taskScoConTit">{{ lang.ssLiteracy2 }}</div>
                          <div class="WorkConSY">
                            <div v-for="(wItem, ind) in l.eList" :key="ind + 's'">
                              <!-- <el-tooltip
                                class="item"
                                effect="dark"
                                :content="wItem.target"
                                placement="top-start"
                              > -->
                                <div class="RootImgBlockSy">
                                  {{ wItem.target }}
                                </div>
                              <!-- </el-tooltip> -->
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- 评语 -->
                      <div
                        style="
                              flex: 1;
                              flex-shrink: 0;
                              display: flex;
                              flex-direction: column;
                              margin-left: 10px;
                            "
                        v-if="l.rate.content"
                      >
                        <div class="taskScoConTit">{{ lang.ssComment }}</div>
                        <div class="WorkCon">
                          {{ l.rate.content }}
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 阶段  -->
                  <div
                    v-if="
                      l.eList &&
                        l.eList.length &&
                        CState != 5 &&
                        CState != 6 &&
                        lind == k.toolEList.length - 1
                    "
                    class="taskSco"
                  >
                    <div class="taskScoTit">
                      <div>
                        {{ lang.ssTaskScore }}<span style="color: rgba(242, 161, 75, 1)">{{
                          totalScore(k.toolEList[0].rate)
                        }}</span>
                        {{ lang.ssScoreUnit }}
                      </div>
                      <div>{{ lang.ssSubmitTime }}{{ workTime(k.toolEList) }}</div>
                    </div>

                    <!-- 作业评分 -->
                    <div class="taskScoCon">
                      <!-- 分数详情与素养 -->
                      <div style="flex: 1; display: flex; flex-wrap: wrap">
                        <div style="width: 315px; margin:0 20px 10px 0">
                          <div class="taskScoConTit">{{ lang.ssScoreDetail }}</div>
                          <div
                            v-for="(wItem, ind) in l.eList"
                            :key="ind + 's'"
                            class="score_box"
                            style="width: 100%"
                          >
                            <div
                              style="
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    width: 100%;
                                    min-width: 48%;
                                  "
                            >
                              <div class="RootImgBlock">
                                {{ wItem.value }}
                              </div>

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

                        <div style="flex: 1">
                          <div class="taskScoConTit">{{ lang.ssLiteracy2 }}</div>
                          <div class="WorkConSY">
                            <div v-for="(wItem, ind) in l.eList" :key="ind + 's'">
                              <!-- <el-tooltip
                                class="item"
                                effect="dark"
                                :content="wItem.target[wItem.target.length - 1]"
                                placement="top-start"
                              > -->
                              <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>
                              <!-- </el-tooltip> -->
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- 评语 -->
                      <div
                        style="
                              flex: 1;
                              flex-shrink: 0;
                              display: flex;
                              flex-direction: column;
                              margin-left: 10px;
                            "
                        v-if="l.rate.content"
                      >
                        <div class="taskScoConTit">{{ lang.ssComment }}</div>
                        <div class="WorkCon">
                          {{ l.rate.content }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 思维导图 -->
                <div v-if="CState == 5 || CState == 6" class="taskTitInd">
                  <div></div>
                  <span>{{ lang.ssTaskEval }}</span>
                </div>
                <exjsmind
                  v-if="CState == 5 || CState == 6"
                  :treeData="k.treeData"
                  :keyL="k.task.toString()"
                ></exjsmind>
              </div>
            </template>
           
          </div>
        </template>
        

        <div style="display: flex;justify-content: flex-end;width: 100%;">
          <img :src="schoolImg.bjLogo ? schoolImg.bjLogo : ''" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import jspdf from "jspdf";
import JSZip from "jszip";
import exjsmind from "./exjsmind";
import MarkdownIt from "markdown-it";
import { myMixin } from "@/mixins/mixin.js";
const getFile = url => {
  return new Promise((resolve, reject) => {
    var credentials = {
      accessKeyId: "AKIATLPEDU37QV5CHLMH",
      secretAccessKey: "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"
    }; //秘钥形式的登录上传
    window.AWS.config.update(credentials);
    window.AWS.config.region = "cn-northwest-1"; //设置区域
    let url2 = url;
    let _url2 = "";
    if (
      url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
    ) {
      _url2 = url2.split(
        "https://view.officeapps.live.com/op/view.aspx?src="
      )[1];
    } else {
      _url2 = url2;
    }
    var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
    let name = decodeURIComponent(
      _url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
    );
    var params = {
      Bucket: "ccrb",
      Key: name
    };
    s3.getObject(params, function(err, data) {
      if (err) {
        console.log(err, err.stack);
        resolve({ data: 1 });
      } else {
        const fileContent = data.Body.toString("utf-8");
        resolve({ data: fileContent });
      } // sxuccessful response
    });
    // axios({
  });
};
export default {
  mixins: [ myMixin ],
  props: [
    "uid",
    "cid",
    "worksDialog",
    "worksDialogCon",
    "digNum",
    "multipleSelection"
  ],
  components: {
    exjsmind
  },
  data() { 
    return {
      workList: [],
      dyList: [],
      workEvaList: "",
      elist: [],
      CState: 0,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      uid2: this.uid,
      worksDialogCon2: JSON.parse(JSON.stringify(this.worksDialogCon)),
      courseName: "",
      loading: false,
      tableData: [],
      imgList: [
        {
          schoolId: "45facc0a-1211-11ec-80ad-005056b86db5",
          logo: require("../../../assets/icon/exportPdfworks/cocoroboLogo.svg"),
          conImg: require("../../../assets/icon/exportPdfworks/cocoroboCon.svg"),
          bjLogo: require("../../../assets/icon/exportPdfworks/logo2.svg"),
          bkColor: "#FFFBDC"
        }
      ],
      schoolImg: {}
    };
  },

  mounted() {
    if (this.digNum == 0) {
      this.downPdf();
    } else if (this.digNum == 1) {
      this.getWorks1();
    } else {
      this.batchPdf();
    }
  },
  computed: {
    MarkdownT() {
      return function (c) {
          let md = new MarkdownIt({
            html: true, // 允许渲染 HTML
            linkify: true, // 自动将URL链接转化为可点击链接
            typographer: true, // 启用排版规则（如替换 `"` 为 “）
          });
            return c
            ? md.render(c) : "";
        };
    },
    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;
      };
    },
    totalScore() {
      return function(val) {
        let valT = JSON.parse(JSON.stringify(val));

        if (!valT) return "0.0";

        delete valT.content;
        delete valT.comment;
        // console.log("valT", JSON.parse(JSON.stringify(val)));

        let data = Object.values(valT);
        // console.log("data", JSON.parse(JSON.stringify(data)));

        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;
    },
    // 下载pdf文件
    getPdf() {
      const content = this.$refs.reportPdf;
      const dpi = 300;
      html2canvas(content, {
        dpi: dpi, // 设置截图的分辨率
        scale: dpi / 96 // 设置截图缩放比例，以适应pdf的dpi
      }).then(canvas => {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;

        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28;
        var imgHeight = (592.28 / contentWidth) * contentHeight;

        var imgData = canvas.toDataURL("image/jpeg", 1.0);

        const pdf = new jspdf("p", "pt", [imgWidth, imgHeight]);

        pdf.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight);
        pdf.save(
          this.worksDialogCon2.course +
            "-" + this.lang.ssWorkSet + "-" +
            this.worksDialogCon2.sName +
            ".pdf"
        );
      });
    },

    // 压缩pdf
    async getPdf2() {
      const content = this.$refs.reportPdf;

      return new Promise((resolve, reject) => {
        const dpi = 300;
        html2canvas(content, {
          dpi: dpi, // 设置截图的分辨率
          scale: dpi / 96 // 设置截图缩放比例，以适应pdf的dpi
        })
          .then(canvas => {
            var contentWidth = canvas.width;
            var contentHeight = canvas.height;

            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 595.28;
            var imgHeight = (592.28 / contentWidth) * contentHeight;

            var imgData = canvas.toDataURL("image/jpeg", 1.0);

            const pdf = new jspdf("p", "pt", [imgWidth, imgHeight]);

            pdf.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight);
            var pdfData = {
              pdfName:
                this.worksDialogCon2.course +
                "-" + this.lang.ssWorkSet + "-" +
                this.worksDialogCon2.sName +
                ".pdf",
              pdfCon: pdf.output("blob")
            };
            // pdfArray.push(pdfData);

            return resolve(pdfData);
          })
          .catch(err => {
            console.log(err);
          });
      });
    },

    // 图片放大查看
    previewImg(url) {
      this.$hevueImgPreview(url);
    },
    // 获取处理作业信息
    async exportPdfSet() {
      let params = {
        uid: this.uid2,
        cid: this.cid
      };
        const response = await this.ajax.get(this.$store.state.api + "selectAllWorksDetail", params);
        const res = response;
            // 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];

            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,
                    treeData: {
                      id: "0",
                      topic: k.task ? k.task : this.lang.ssTask + i,
                      children: []
                    }
                  });
                });
              });
            }

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

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

              let t = JSON.parse(k.content)[0].testJson;

              // 处理学生选择答案
              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);
            });

            for (let index = 0; index < res.data[14].length; index++) {
              if (res.data[14][index].content && this.isValidURL(res.data[14][index].content)) {
                  await getFile(res.data[14][index].content).then((resp) => {
                    res.data[14][index].content = JSON.parse(resp.data);
                  });
              }else if(res.data[14][index].content){
                  res.data[14][index].content = res.data[14][index].content ? JSON.parse(res.data[14][index].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],
              ...res.data[14],
            ];

            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 = "";
                  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;
                    }
                  });

                  // 分数循环
                  this.workEvaList.forEach(p => {
                    p.tool = p.tool ? p.tool : 0;
                    if (
                      k.stage == p.stage &&
                      k.task == p.task &&
                      lIndex == p.tool
                    ) {
                      let rateCopy = JSON.parse(p.rate);
                      for (const key in rateCopy) {
                        if (key != "content" && key != "") {
                          rateCopy[key] = rateCopy[key] * 1;
                        }
                      }
                      l.rate = rateCopy;
                    }
                  });
                  // 将没有提交作业,但是有评分标准的数据填上数据,防止报错
                  if (
                    !l.rate &&
                    l.eList &&
                    l.eList.length &&
                    (this.CState == 5 || this.CState == 6)
                  ) {
                    l.rate = { content: "" };
                    l.eList.forEach(elp => {
                      l.rate[elp.detail] = 0;
                    });
                  } else if (
                    !l.rate &&
                    l.eList &&
                    l.eList.length &&
                    this.CState != 5 &&
                    this.CState != 6
                  ) {
                    l.rate = { content: "" };
                    l.eList.forEach(elp => {
                      l.rate[elp.value] = 0;
                    });
                  }
                  // 将素养添加进treeData中
                  if (l.eList && l.eList.length) {
                    l.eList.forEach((itemE, itemEInd) => {
                      let arr6 = k.treeData.children.some(
                        item => item.topic == itemE.target
                      );
                      if (!arr6) {
                        k.treeData.children.push({
                          id: kin + "+" + lIndex + "+" + itemEInd,
                          topic: itemE.target,
                          children: []
                        });
                      }
                    });
                  }
                });
              });
            });
            framework.forEach(e => {
              e.taskList.forEach((k, kind) => {
                k.treeData.children.forEach(l => {
                  k.toolEList.forEach((el, elind) => {
                    if (el.eList) {
                      el.eList.forEach((st, stind) => {
                        // console.log(l.topic, st.target, l.topic == st.target);

                        if (l.topic == st.target) {
                          let res3 = l.children.filter(function(item, index) {
                            return item.topic == st.detail;
                          });

                          if (!res3.length) {
                            l.children.push({
                              id: kind + "+" + elind + "+" + stind + "c",
                              topic: st.detail,
                              children: [
                                {
                                  id: kind + "+" + elind + "+" + stind + "b",
                                  topic: this.lang.ssTool.replace(/\*/g, elind * 1 + 1)
                                }
                              ]
                            });
                          } else {
                            l.children.forEach(lc => {
                              if (lc.topic == st.detail) {
                                lc.children.push({
                                  id: kind + "+" + elind + "+" + stind + "b",
                                  topic: this.lang.ssTool.replace(/\*/g, elind * 1 + 1)
                                });
                              }
                            });
                          }
                        }
                      });
                    }
                  });
                });
              });
            });

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

            this.Kloading = false;

            this.loading = false;
            this.workList = framework;
          
    },
    isValidURL(str){
      try {
              const url = new URL(str);
              return ['http:', 'https:', 'ftp:'].includes(url.protocol) && !!url.hostname;
      } catch (e) {
          return false;
      }
    },
    // 获取作业阶段人物信息
    getCourseDetail() {
      this.loading = true;
      let params = {
        cid: this.cid,
        choseClass: ""
      };
      return new Promise((resolve, reject) => {
        this.ajax
          .get(this.$store.state.api + "getCourseWorksReport2", params) //getCourseWorksReport
          .then(res => {
            this.CState = res.data[0][0].state;

            this.worksDialogCon2.uname = res.data[0][0].username;

            // 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.imgList.forEach(e => {
              if (e.schoolId == this.oid) {
                this.schoolImg = e;
              }
            });

            return resolve();
          })
          .catch(err => {
            console.error(err);
          });
      });
    },

    // 一键打包所有作业
    async circulatePdf() {
      let _this = this;
      var zip = new JSZip();
      let pdfList = [];
      for (let i = 0; i < this.tableData.length; i++) {
        this.uid2 = this.tableData[i].userid;
        this.worksDialogCon2 = this.tableData[i];
        await this.getCourseDetail();
        await this.exportPdfSet();

        let a = await this.getPdf2();
        pdfList.push(a);
      }

      pdfList.forEach((e, index) => {
        zip.file(e.pdfName, e.pdfCon);
      });

      // 生成压缩包并提供下载链接
      zip.generateAsync({ type: "blob" }).then(function(content) {
        // 使用FileSaver保存压缩包
        saveAs(content, _this.courseName + "-" + _this.lang.ssWorkSetSummary + ".zip");
      });

      this.$emit("update:worksDialog", false);
      // this.worksDialog = false;
    },
    handleClose(done) {
      done();
    },
    // 下载单个文件
    async downPdf() {
      await this.getCourseDetail();
      await this.exportPdfSet();
      this.getPdf();
    },

    // 获取所有作业然后一键打包压缩包
    getWorks1() {
      this.loading = true;

      let params = {
        cid: this.cid,
        uname: "",
        choseClass: "",
        stage: "",
        task: ""
      };

      this.ajax
        .get(this.$store.state.api + "getCourseWorks6", params) //getCourseWorks4
        .then(res => {
          // this.isLoading = false;
          // this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData = res.data[0];
          if (!this.tableData.length) {
            this.loading = false;

            return this.$message.info(this.lang.ssNoWorkSubmit);
          }
          this.courseName = this.tableData[0].course;
          this.circulatePdf();
          // console.log(res.data[0]);
        })
        .catch(err => {
          this.isLoading = false;
          console.error(err);
        });
    },
    // 批量导出作业
    batchPdf() {
      this.loading = true;
      this.tableData = JSON.parse(JSON.stringify(this.multipleSelection));
      this.courseName = this.tableData[0].course;
      this.circulatePdf();
    }
  }
};
</script>

<style scoped>
.left{
        display: flex;
        justify-content: flex-start;
        margin-bottom: 10px;
        line-height: 25px;
        flex: 1;
        border-bottom: 1px  #e7e7e7 solid;
    }
    .TName{
        /* font-size: 14px; */
        color: #4472C4;
        margin-bottom: 5px;
        font-weight: 600;
        width: 80px;
        flex-shrink: 0;
        font-size: 14px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .con{
        margin-left: 10px;
        font-size: 12px;
        color: #000;
    }
.pbl {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  /* padding: 20px;
  padding-top: 10px; */
  overflow: auto;
  border-radius: 10px;
  font-family: PingFang SC;
  position: relative;
}
.pdfCon {
  width: 220mm;
  margin: auto;
  position: relative;
}
.pageTit {
  width: 100%;
  text-align: left;
  font-size: 28px;
  padding: 10px 0;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}
.full_diy {
  min-width: 1200px !important;
}
.full_diy >>> .el-dialog {
  height: 80%;
  margin-top: 10vh !important;
  display: flex;
  flex-direction: column;
}
.full_diy >>> .el-dialog__body {
  overflow: auto;
  flex: 1;
  padding: 0 !important;
}
.full_diy >>> .el-dialog__title {
  color: #fff !important;
}
.full_diy >>> .el-dialog__header {
  padding: 9px 20px 10px;
  background: #32455b !important;
}
.coverPage {
  /* height: 840pt; */
  padding: 150px 8% 0;
  background-color: #ccc;
  box-sizing: border-box;
  position: relative;
  background-image: url("../../../assets/icon/exportPdfworks/bcg1.svg"),
    url("../../../assets/icon/exportPdfworks/bcg2.svg");
  /* 设置每个背景的位置和尺寸，可以使用关键字或者具体的像素值，用逗号分隔 */
  background-position: top left, bottom;
  background-size: 225px, contain;

  /* 设置每个背景图片的重复方式，用逗号分隔 */
  background-repeat: no-repeat, no-repeat;
}
.coverPageLogo {
  /* padding: 40px;
  height: 120px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  margin-bottom: 45px; */
  position: absolute;
  top: 30px;
  right: 6%;
}
.coverPageFrom {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70%;
  margin: 0 auto;
}
.coverPageFromTit {
  font-size: 60px;
  color: rgba(92, 80, 70, 1);
  font-weight: 600;
  text-align: center;
}
.fromCss {
  border: 1.5px dashed rgba(158, 208, 255, 1);
  border-radius: 16px;
  background-color: #fff;
  padding: 40px 32px;
  width: 70%;
  font-family: PingFang SC;
  margin: 8px 0;
  color: rgba(35, 99, 205, 1);
}
.fromCss > div {
  margin-bottom: 28px;
  display: flex;
}
.fromCss > div > span {
  flex-shrink: 0;
  margin-right: 5px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(92, 80, 70, 1);
}
.fromCss > div:last-child {
  margin-bottom: 0;
}
.txt {
  width: 100%;
  border-bottom: 1px solid rgba(192, 210, 229, 1);
  text-align: center;
  color: #000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.coverPageCon {
  background-color: #e3edfe;
  display: flex;
  flex-direction: column;
  padding: 0 60px;
  padding-bottom: 100px;
  box-sizing: border-box;
  font-family: PingFang SC;
}
.stageCon {
  background-color: #fff;
  padding: 15px;
  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;
}
.WorksCon >>> .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 >>> table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

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

.cont >>> table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}
.taskSco {
  background-color: rgba(243, 247, 253, 1);
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
  margin: 8px 0;
}
.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;
}
.WorksCon >>> .el-radio {
  display: flex;
  align-items: center;
  margin: 5px;
}
.WorksCon >>> .el-checkbox {
  display: flex;
  align-items: center;
  margin: 5px;
}
.RootImgBlock {
  width: 50%;
  white-space: wrap;
  /* overflow: hidden;
  text-overflow: ellipsis; */

  font-size: 12px;
}
.score_box {
  display: flex;
  align-items: center;
  font-size: 14px !important;
  /* justify-content: flex-start; */
  justify-content: space-between;
  margin-bottom: 15px;
  /* margin: 10px 0 0 30px; */
  width: 100%;
  margin: 5px 0;
  position: relative;
}
.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;
}
.dialog_diy >>> .el-dialog__header {
  padding: 9px 20px 10px;
  background: #32455b !important;
}
.worksDialogCSS >>> .el-dialog__header {
  /* padding: 9px 20px 10px; */
  background: #32455b !important;
}

.worksDialogCSS >>> .el-dialog__body {
  width: 643px !important;
}
.worksDialogCSS >>> .el-dialog {
  width: 683px !important;
}
.stageTit {
  text-align: left;
  font-weight: 600;
  font-size: 22px;
  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;
  display: flex;
  align-items: center;
}
.taskTitInd span:nth-child(1) {
  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;
}
.taskTitInd div {
  background-color: rgba(242, 161, 75, 1);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 10px;
}
.taskTitInd span:nth-child(2) {
  color: rgba(0, 0, 0, 0.9);
  font-weight: 600;
}
.taskBri {
  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;
  margin: 15px 0;
}
.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: 11px;
  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: 8px 0;
  width: 100%;
}
.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;
}

.taskScoConTit {
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  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;
  flex: 1;
}
.WorkConSY div {
  margin-bottom: 8px;
}
.WorkConSY div:last-child {
  margin-bottom: 0;
}
.RootImgBlockSy {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
}
.termC {
  margin: 30px 0 45px;
  font-size: 18px;
  color: rgba(92, 80, 70, 1);
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}
.termC > div > span {
  color: rgba(176, 123, 0, 1);
  border-bottom: 2px solid rgba(242, 228, 213, 1);
  padding: 3px 10px;
  margin: 0 8px;
}
</style>