pbl-student-table/src/components/easy2/commpont/markDialog.vue

<template>
  <div class="markDialog" v-loading="vLoading">
    <div
      style="overflow: auto;overflow-x: hidden;width: 315px;box-sizing: content-box;border-right: 1px rgba(231, 231, 231, 1) solid;"
    >
      <div class="left">
        <div v-loading="ScLoading">
          <div class="scoreTit">
            <div>Task Score</div>
            <div>
              <span style="color: #4380F8;margin-right: 3px;">{{
                totalScore ? totalScore : 0
              }}</span
              >points
            </div>
          </div>
          <div class="allD" :style="{ marginLeft: isMarkSco ? '0' : '17px' }">
            <div class="scoreStar">
              <div
                v-show="reveal"
                v-for="(e, index) in scoTitList"
                :key="index + 'a'"
              >
                <div class="scoreStarBack">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="e.detail"
                    placement="top"
                  >
                    <div class="briefTit">
                      <img
                        v-if="e.isai == 1 || !e.isai"
                        class="titRoot"
                        src="../../../assets/icon/newIcons/blueRoot.png"
                        alt=""
                      />
                      {{ e.detail }}
                    </div>
                  </el-tooltip>
                  <el-rate :disabled="tType == 2" disabled-void-color @change="submit" v-model="e.cog"></el-rate>
                </div>
              </div>
              <div
                v-show="!reveal"
                v-for="(e, index) in scoTitList.slice(0, 3)"
                :key="index + 'b'"
              >
                <div class="scoreStarBack">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="e.detail"
                    placement="top"
                  >
                    <div class="briefTit">
                      <img
                        class="titRoot"
                        v-if="e.isai == 1 || !e.isai"
                        src="../../../assets/icon/newIcons/blueRoot.png"
                        alt=""
                      />
                      {{ e.detail }}
                    </div>
                  </el-tooltip>
                  <el-rate :disabled="tType == 2" disabled-void-color @change="submit" v-model="e.cog"></el-rate>
                </div>
              </div>
            </div>

            <div
              v-if="reveal && scoTitList.length > 3"
              class="scoreStar2"
              @click="revealBtn"
            >
              Collapse <i class="el-icon-arrow-up"></i>
            </div>
            <div
              v-if="!reveal && scoTitList.length > 3"
              class="scoreStar2"
              @click="revealBtn"
            >
              All <i class="el-icon-arrow-down"></i>
            </div>
          </div>
          <div class="AreaCss">
            <el-input
              type="textarea"
              :placeholder="tType == 1 ?'You can enter comments here':'No comments available'"
              v-model="textarea"
              @blur="submit"
              :disabled="tType == 2"
            >
            </el-input>
            <div
              v-if="
                (currentUid.type == 1 ||
                  currentUid.type == 10 ||
                  currentUid.type == 13 ||
                  isMarkCom == 1) &&
                  !isMarkSco && tType == 1
              "
              class="anewC"
              @click="anewEva"
            >
              Regenerate
            </div>
          </div>

          <div
            style="width:100%;display:flex;height: 25px;;justify-content: space-between;"
          >
            <div></div>

            <div style="display: flex;" v-if="tType == 1">
              <div
                class="ScrBtn"
                @click="reset"
                style="color: rgba(0, 0, 0, 0.6);background-color: rgba(243, 247, 253, 1);border: none;"
              >
                Clear
              </div>

              <div
                class="ScrBtn"
                style="margin-left: 10px;"
                @click="AIsubmit(currentUid)"
                v-if="
                  (currentUid.type == 1 ||
                    currentUid.type == 10 ||
                    currentUid.type == 13 ||
                    isMarkCom == 1) &&
                    !isMarkSco
                "
              >
                <img
                  src="../../../assets/icon/newIcons/rootImg.png"
                  alt=""
                />AI Scoring
              </div>
              <div
                class="ScrBtn"
                style="margin-left: 10px;"
                v-if="
                  (currentUid.type == 1 ||
                    currentUid.type == 10 ||
                    currentUid.type == 13 ||
                    isMarkCom == 1) &&
                    isMarkSco
                "
                @click="noIsAi"
              >
                <img
                  src="../../../assets/icon/newIcons/rootImg.png"
                  alt=""
                />AI Scoring
              </div>
            </div>
          </div>
        </div>

        <!-- Submission List -->
        <div
          v-if="tType == 1"
          style="flex: 1;display: flex;flex-direction: column;overflow: auto;"
        >
          <div class="workListTit" @click="workListTitBtn">
            <i class="el-icon-arrow-down"></i>Submission List ({{ workList.length }})
          </div>
          <div style="overflow: auto;flex: 1;">
            <div
              v-if="workListShow"
              v-for="(i, index) in workList"
              :key="index"
              :class="['schPer', i.userid == DgUid ? 'selBlock' : '']"
              style="cursor: pointer;"
              @click="cutPer(i.userid, index)"
            >
              <img v-if="i.headportrait" :src="i.headportrait" alt="" />
              <img
                v-else
                src="https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/static/img/portal.b3cf7fa.png"
                alt=""
              />

              <div class="con">
                <div class="tit">
                  <span
                    style="font-size: 14px;color: rgba(0, 0, 0, 0.9);font-weight: 400;"
                    >{{ i.name }}</span
                  >

                  <span
                    style="font-size: 14px;color:rgba(0, 0, 0, 0.4);"
                    v-if="i.markSco == null"
                    >Not Scored</span
                  >
                  <span
                    v-else
                    style="font-size: 16px;color: rgba(0, 0, 0, 0.9);font-weight: 600;"
                    >{{ i.markSco }}</span
                  >
                </div>
                <div class="Timer">{{ i.time }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Homework Display Area -->
    <div class="Rig">
      <div class="RigTop">
        <div
          style="display: flex;align-items: center;justify-content: space-between;width: 100%;"
        >
          <div
            class="schPer"
            style="border: none;width: 300px;padding: 0;margin: 0;"
          >
            <img
              v-if="currentUid.headportrait"
              :src="currentUid.headportrait"
              alt=""
            />
            <img
              v-else
              src="https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/static/img/portal.b3cf7fa.png"
              alt=""
            />
            <div class="con">
              <div class="tit">
                <span
                  style="font-size: 14px;color: rgba(0, 0, 0, 0.9);font-weight: 400;"
                  >{{ currentUid.name }}</span
                >
              </div>
              <div class="Timer">{{ currentUid.time }}</div>
            </div>
          </div>
          <div v-if="tType == 1" class="cutStuBtn">
            <div>
              <span v-if="current == 0" style="cursor: pointer;color:#ccc"
                >Previous</span
              >
              <span
                v-else
                @click="prevStu"
                style="cursor: pointer;color: rgba(54, 129, 252, 1)"
                >Previous</span
              >
            </div>
            <div>
              <span
                v-if="current >= workList.length - 1"
                style="cursor: pointer;color: #ccc"
                >Next</span
              >
              <span
                v-else
                @click="nextStu"
                style="cursor: pointer;color: rgba(54, 129, 252, 1)"
                >Next</span
              >
            </div>
          </div>
        </div>
      </div>
      <div class="RigConTit">
        <div :class="[cutNum ? '' : 'RigConTitOn']" @click="cutPage(0)">
          Student Homework
        </div>
        <div :class="[cutNum ? 'RigConTitOn' : '']" @click="cutPage(1)">
          Likes and Comments
        </div>
      </div>
      <div class="RigCon">
        <!-- Homework Content  -->
        <div v-if="cutNum == 0" style="height: 97%;">
          <div
            v-if="
              currentUid.type == 13 || currentUid.type == 10
            "
          >
            <div class="cont" v-html="currentUid.content.text"></div>
          </div>
          <div v-if="currentUid.type == 1">
            <img
              @click="previewImg(currentUid.content)"
              style="max-width: 100%;object-fit: cover;"
              :src="currentUid.content"
              alt=""
            />
          </div>
          <div v-if="currentUid.type == 3">
            <div style="width: 100%;text-align: center;">
              <div
                style="margin-bottom: 20px;font-weight: 600;font-size: 16px;"
              >
                {{ currentUid.content[0].answerTitle }}
              </div>
              <div>{{ currentUid.content[0].answer }}</div>
            </div>
          </div>
          <div v-if="currentUid.type == 4" style="height: 100%;">
            <iframe
              v-if="ifPdf == 1"
              style="width: 100%; height: 99%; border: none"
              :src="
                'https://cloud.cocorobo.cn/pdf.js/web/viewer.html?file=' +
                  encodeURIComponent(currentUid.content)
              "
            ></iframe>

            <iframe
              v-else
              style="width: 100%; height: 100%; border: none"
              :src="
                'https://view.officeapps.live.com/op/view.aspx?src=' +
                  encodeURIComponent(currentUid.content)
              "
              frameborder="0"
            ></iframe>
          </div>
          <div v-if="currentUid.type == 12" style="height: 100%;">
            <div>{{ TxtMd }}</div>
          </div>
          <div v-if="currentUid.type == 15" style="height: 100%;">
            <div
              class="worksAnswer"
              v-if="currentUid.content"
              @click="
                openCocoPi(57, toolIndex, currentUid.userid, currentUid.name)
              "
            >
              <img src="../../../assets/icon/codeFile.png" />
              <div>Click to open CocoPi</div>
            </div>
          </div>
          <div v-if="currentUid.type == 5" style="height: 100%;">
            <video-player
              class="video-player vjs-custom-skin"
              :playsinline="true"
              :options="playerOptions"
              @play="onPlayerPlay($event)"
              style="width: 90%; height: 95%; margin: 0 0 0 30px"
            ></video-player>
          </div>
        </div>
        <!-- Likes and Comments  -->
        <div v-if="cutNum == 1">
          <div style="display: flex;align-items: center;">
            <img
              style="margin-right: 3px;"
              src="../../../assets/icon/newIcons/likeG.png"
              alt=""
            />Likes ({{ likeList.length }})
          </div>
          <div class="likeList">
            <div v-for="i in likeList" :key="i.id">{{ i.username }}</div>
          </div>
          <div style="display: flex;align-items: center;">
            <img
              style="margin-right: 3px;"
              src="../../../assets/icon/newIcons/commG.png"
              alt=""
            />Comments ({{ commentList.length }})
          </div>
          <div class="commentListCss" v-if="commentList.length">
            <div
              style="padding-bottom: 25px;display: flex;justify-content: space-between;"
              v-for="i in commentList"
              :key="i.id"
            >
              <div class="schPer2" style="border: none;width: 90%;padding: 0;">
                <img v-if="i.headportrait" :src="i.headportrait" alt="" />
                <img
                  v-else
                  src="https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/static/img/portal.b3cf7fa.png"
                  alt=""
                />
                <div class="con">
                  <div class="tit2">
                    <div class="TitName">{{ i.username }}</div>
                    <span
                      style="font-size: 14px;color: rgba(0, 0, 0, 0.9);font-weight: 400;width: 200px;"
                      >{{ i.time }}</span
                    >
                  </div>
                  <div class="Timer">{{ i.comment }}</div>
                </div>
              </div>
              <div>
                <span
                  style="color: #3B7BD7;cursor: pointer;"
                  @click="deleteComment(i.id)"
                  >Delete</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import MarkdownIt from "markdown-it";
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 {
  props: [
    "uid",
    "stage",
    "toolIndex",
    "task",
    "scoTit",
    "markScoreVisible",
    "markScoreworksStudent",
    "languageSetting",
    "taskDetail",
    "tool",
    "tType",
    "sIsOpen"
  ],
  data() {
    return {
      textarea: "",
      reveal: false, //得分详情框全部与折叠
      workListShow: true, //作业显示
      cutNum: 0, //作业与评论切换
      scoTitList: [], //得分详情框数据
      workList: [], //作业列表
      cid: this.$route.query.courseId,
      cUserid: this.$route.query.userid, //账号登录人id
      cuScoCon: "", //学生作业内容
      TxtMd: "", //txt，md作业内容
      currentUid: {}, //当前评分框学生信息
      current: "", //上一位下一位中的第几位
      DgUid: this.uid, //当前评分框学生id
      likeList: [], //喜欢list
      commentList: [], //评分list
      workId: "", //作业id。用于分类评论与点赞list
      vLoading: false,
      allSco: 0,
      ifPdf: 1,
      ScLoading: false,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
            src: "" //url地址require("../../../assets/media/aaa.mp4")
          }
        ],
        // poster: require("../../../assets/tu31.png"), //你的封面地址
        // poster: dataRes.imgUrl, //你的封面地址
        notSupportedMessage: "This video cannot be played at the moment, please try again later", // Allows overriding the default message displayed when Video.js cannot play the media source.
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true //全屏按钮
        }
      },
      xianObj: ["DOCX", "MD", "TXT", "PDF", "JPG", "PNG"]
    };
  },
  watch: {
    markScoreVisible(newVal) {
      this.workListShow = true;
      this.reveal = false;
      this.cutNum = 0;
      this.textarea = "";
      if (this.tool.eList && this.tool.eList.length) {
        this.scoTitList = this.tool.eList;
      } else {
        this.scoTitList = JSON.parse(JSON.stringify(this.scoTit));
      }

      // this.scoTitList = JSON.parse(JSON.stringify(this.scoTit));

      this.selectSWorksData();
    }
  },
  computed: {
    totalScore() {
      let a = 0;
      this.scoTitList.forEach(e => {
        if (e.cog) {
          a += e.cog * 1;
        }
      });

      return (a / this.scoTitList.length).toFixed(1);
    },

    isMarkCom() {
      // console.log('this.currentUid',this.currentUid);

      if (
        this.currentUid.type == 1 ||
        this.currentUid.type == 4 ||
        this.currentUid.type == 12
      ) {
        let a = this.currentUid.content.slice(
          this.currentUid.content.lastIndexOf(".") + 1
        );

        if (this.xianObj.indexOf(a.toUpperCase()) != -1) {
          return 1;
        } else {
          return 0;
        }
      } else {
        return 0;
      }
    },
    // 如果评价标准都不是ai评分的话
    isMarkSco() {
      let c = 0;

      this.scoTitList.forEach(e => {
        if (e.isai == 2) {
          c++;
        }
      });
      // console.log(c , this.scoTitList.length);
      this.$forceUpdate();
      if (c == this.scoTitList.length) return c;

      return 0;
    }
  },
  mounted() {
    if (this.tool.eList && this.tool.eList.length) {
      this.scoTitList = this.tool.eList;
    } else {
      this.scoTitList = JSON.parse(JSON.stringify(this.scoTit));
    }
    // this.scoTitList = JSON.parse(JSON.stringify(this.scoTit));
    // console.log('toolIndex',this.toolIndex);

    this.selectSWorksData();
  },
  methods: {
    setZero(index){
      console.log(index);
      console.log('scoTitList',this.scoTitList);
    },
    async anewEva() {
      this.ScLoading = true;

      let _fileid = "";
      if (
        this.currentUid.type == 1 ||
        this.currentUid.type == 4 ||
        this.currentUid.type == 12
      ) {
        _fileid = await this.createFileid(this.currentUid.content);
      }

      let sco = ""; //分数
      this.scoTitList.forEach(e => {
        sco += `${e.detail}：${e.cog}星。`;
      });

      let con = this.cuScoCon;

      let std = ""; //维度
      let tit = [];
      let laws = ""; //细则
      if (this.tool.eList && this.tool.eList.length) {
        tit = JSON.parse(JSON.stringify(this.tool.eList));
      } else {
        tit = JSON.parse(JSON.stringify(this.scoTit));
      }

      if (this.tool.eList && this.tool.eList.length) {
        for (let i = 0; i < this.tool.eList.length; i++) {
          if (this.tool.eList[i].isai == 1) {
            laws += `${this.tool.eList[i].rule}。 \n`;
          }
        }
        for (let i = 0; i < this.tool.eList.length; i++) {
          if (this.tool.eList[i].isai == 1) {
            let a = this.tool.eList[i].detail;
            let result = "";

            if (isNaN(parseFloat(a)) && a) {
              result = a.match(/[\u4e00-\u9fa5a-zA-Z]+/g).join("");
            } else {
              result = a;
            }
            std += `${result}。  \n`;
          }
        }
      } else {
        for (let i = 0; i < tit.length; i++) {
          if (tit[i].isai == 1) {
            laws += ` ${tit[i].rule}。 \n`;
          }
        }
        for (let i = 0; i < tit.length; i++) {
          if (tit[i].isai == 1) {
            let a = tit[i].detail;
            let result = "";

            if (isNaN(parseFloat(a)) && a) {
              result = a.match(/[\u4e00-\u9fa5a-zA-Z]+/g).join("");
            } else {
              result = a;
            }
            std += `${result}。  \n`;
          }
        }
      }

      let messages = `
      #NOTICE#
        Role: 你是一个资深的教师，你有丰富的项目式学习、跨学科学习、STEAM导师经验，你要对学生的评价高度负责。
        Language: ${this.getLang()}
        ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced the "Format example".
        Instruction: Based on the context, follow "Format example", write content.

        #目标#
        你要结合<作业内容><评价标准>和该标准对应的<等级>写评语。
        当作业内容与评价细则无关，或者缺乏原创性会被直接评为0星。此时你可以输出评语“期待看到你自己的想法！必要时，可以请教老师哦～”
        ${this.currentUid.type == 1 ? "提取图片内容进行评价" : ""}
      
          
        #评分资料#
        评价标准：${std}
        评价细则：${laws}
        等级：${sco}
        作业内容：${_fileid ? "上传的文件内容" : con}


        #输出要求#
        “评语”字数控制在150字左右，参考输出范例。
        严格输出按照格式输出json格式。只输出json格式的内容，其他内容不要输出！
        
          
        #输出格式#
        [{'comment':'评语（150个汉字左右）'}]


        #输出范例#
        [{'comment':'学生能够全面且正确地描述光合作用中氧气和葡萄糖的生成过程，涵盖光反应和暗反应的每个阶段和主要反应物及产物。同时，学生也能够全面、准确地解释氧气和葡萄糖在植物生命活动中的重要作用，并展示了对光合作用的深入理解。论文结构良好，内容详实，逻辑清晰，论据充分。'}]
        `;
      // console.log("messages", messages);

      let params = {
        assistant_id: "6063369f-289a-11ef-8bf4-12e77c4cb76b",
        message: [
          {
            type: "text",
            text: messages.replaceAll("\n", " ").replaceAll("*", "")
          }
        ],
        session_name: uuidv4(),
        userId: this.cUserid,
        file_ids: _fileid ? [_fileid] : [],
        isImage: this.currentUid.type == 1 ? true : "",
        model: "gpt-4o-2024-08-06"
      };
      this.ajax
        .post("https://gpt4.cocorobo.cn/ai_agent_park_chat", params)
        .then(response => {
          let data = response.data.FunctionResponse;
          console.log("data", data);
          if (data.message) {
            let dArray = {};
            try {
              dArray = JSON.parse(
                data.message.replaceAll("```json", "").replaceAll("```", "")
              );
            } catch (error) {
              console.log("error_________________" + error);
              try {
                let regex = new RegExp("(?<=```json)([\\s\\S]*?)(?=```)");

                let match = data.message.match(regex);
                dArray = JSON.parse(
                  match[0]
                    .replace(/\n/g, "")
                    .replace(/\s{2,}/g, "")
                    .replace(/\'/g, '"')
                );
              } catch (error) {
                try {
                  dArray = JSON.parse(
                    data.message
                      .replaceAll("```json", "")
                      .replaceAll("# Solution", "")
                      .replaceAll("```", "")
                      .replace(/\n/g, "")
                      .replace(/\s{2,}/g, "")
                      .replace(/\'/g, '"')
                  );
                } catch (error) {
                  console.log("error_________________" + error);

                  this.anewEva();
                  return;
                }
                console.log("error_________________" + error);
              }
            }
            console.log("dArray", dArray);
            this.textarea = dArray[0].comment;
          }
          this.submit()
          this.$message.success("重新生成完成");

          this.ScLoading = false;
        })
        .catch(error => {
          this.ScLoading = false;
          this.$message.error("重新生成失败");
          console.log(error);
        });
    },
    noIsAi() {
      this.$message.info("您暂未设置AI评分，请修改该工具的评价设置后使用。");
    },
    // 预览图片
    previewImg(url) {
      //预览图片
      this.$hevueImgPreview(url);
    },
    onPlayerPlay() {},

    // 获取文档id
    createFileid(url) {
      let _this = this;
      return new Promise((resolve, reject) => {
        try {
          _this.ajax
            .put("https://gpt4.cocorobo.cn/upload_file_knowledge", {
              url: url
            })
            .then(res => {
              let _data = res.data.FunctionResponse;
              if (_data.result && _data.result.id) {
                resolve(_data.result.id);
              } else {
                resolve(1);
              }
            })
            .catch(function(error) {
              resolve(1);
            });
        } catch (e) {
          resolve(1);
        }
      });
    },

    // 老师提交评分
    submit() {
      let data = this.scoTitList.map(e => {
        return e.detail + ":" + e.cog;
      });

      const processedData = {};

      data.forEach(item => {
        const [key, value] = item.split(":");
        processedData[key] = Number(value) ? Number(value) : 0;
      });

      processedData.content = this.textarea;
      // console.log(processedData);
      let params = {
        cid: this.cid,
        s: this.stage,
        t: this.task,
        tool: this.toolIndex ? this.toolIndex : "",
        rate: JSON.stringify(processedData),
        uid: this.DgUid
      };
      // return console.log(params);
      this.ajax
        .get(this.$store.state.api + "updateWorksEvaTwo", params)
        .then(res => {
          this.ScLoading = false;
        })
        .catch(err => {
          this.$message.error("评价失败");
          console.error(err);
        });
    },

    // 重置
    reset() {
      this.$confirm("是否清空评分和评语？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = [
            {
              id: this.currentUid.id
            }
          ];
          this.ajax
            .post(this.$store.state.api + "deleteCourseWorkTwo2", params)
            .then(res => {
              this.scoTitList.forEach(e => {
                e.cog = 0;
              });
              this.textarea = "";

              this.$message({
                message: "清空成功",
                type: "success"
              });
            })
            .catch(err => {
              console.error(err);
            });
        })
        .catch(() => {});

      // this.scoTitList = JSON.parse(JSON.stringify(this.scoTit));
    },

    // ai评分
    async AIsubmit(work) {
      console.log("work", work);

      this.ScLoading = true;
      let _fileid = "";
      if (work.type == 1 || work.type == 4 || work.type == 12) {
        _fileid = await this.createFileid(work.content);
      }

      let tit = [];
      if (this.tool.eList && this.tool.eList.length) {
        tit = JSON.parse(JSON.stringify(this.tool.eList));
      } else {
        tit = JSON.parse(JSON.stringify(this.scoTit));

        let titRule = 0;
        let titRule2 = 0;

        tit.forEach((e, index) => {
          if (!e.isai) {
            e.isai = 1;
          }
        });

        tit.forEach((e, index) => {
          if (e.isai == 1) {
            titRule2++;
            if (e.rule) {
              titRule++;
            }
          }
        });

        if (titRule != titRule2) {
          this.ScLoading = false;
          this.$message.info("细则努力生成中，请稍候……");
          return;
        }
      }

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

      let con = this.cuScoCon;

      let laws = "";
      let std = "";
      let text = "";

      if (this.tool.eList && this.tool.eList.length) {
        for (let i = 0; i < this.tool.eList.length; i++) {
          if (this.tool.eList[i].isai == 1) {
            laws += `细则${i}：${this.tool.eList[i].rule}， \n`;
          }
        }

        for (let i = 0; i < this.tool.eList.length; i++) {
          if (this.tool.eList[i].isai == 1) {
            let a = this.tool.eList[i].detail;
            let result = "";

            if (isNaN(parseFloat(a)) && a) {
              result = a.match(/[\u4e00-\u9fa5a-zA-Z]+/g).join("");
            } else {
              result = a;
            }
            std += `纬度${i}：“${result}”，  \n`;
          }
        }

        for (let i = 0; i < this.tool.eList.length; i++) {
          if (this.tool.eList[i].isai == 1) {
            let a = this.tool.eList[i].detail;
            let result = "";

            if (isNaN(parseFloat(a)) && a) {
              result = a.match(/[\u4e00-\u9fa5a-zA-Z]+/g).join("");
            } else {
              result = a;
            }
            text += `{'${result}' : '评价等级0-5（数字）'},`;
          }
        }
      } else {
        for (let i = 0; i < tit.length; i++) {
          if (tit[i].isai == 1) {
            let a = tit[i].detail;
            let result = "";

            if (isNaN(parseFloat(a)) && a) {
              result = a.match(/[\u4e00-\u9fa5a-zA-Z]+/g).join("");
            } else {
              result = a;
            }
            laws += ` 细则${i}：${tit[i].rule}， \n`;
          }
        }

        for (let i = 0; i < tit.length; i++) {
          if (tit[i].isai == 1) {
            let a = tit[i].detail;
            let result = "";

            if (isNaN(parseFloat(a)) && a) {
              result = a.match(/[\u4e00-\u9fa5a-zA-Z]+/g).join("");
            } else {
              result = a;
            }
            std += `纬度${i}：“${result}”，  \n`;
          }
        }

        for (let i = 0; i < tit.length; i++) {
          if (tit[i].isai == 1) {
            let a = tit[i].detail;
            let result = "";
            if (isNaN(parseFloat(a)) && a) {
              result = a.match(/[\u4e00-\u9fa5a-zA-Z]+/g).join("");
            } else {
              result = a;
            }
            text += `{'${result}' : '评价等级0-5（数字）'},`;
          }
        }
      }

      let msg = `NOTICE
     Role: 你是一个资深的教师，你有丰富的项目式学习、跨学科学习、STEAM导师经验，你要对学生的评价高度负责。
      Language: ${this.getLang()}
      ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced the "Format example".
      Instruction: Based on the context, follow "Format example", write content.

      #目标#
      你要根据“六级评价细则”点评学生作品，并生成需要的JSON数据。
      你要根据<评价细则>和<作业内容>的相关性评价作业，判断该作业属于六级中的哪个等级。
      你要结合<评价标准><评价细则>和<你判断的等级>写评语。
      如果作业内容与评价细则无关，则直接评为0星。如果作业内容与<任务描述>或<工具描述>一致或者相似，则直接评为0星，并输出评语“期待看到你自己的想法！必要时，可以请教老师哦～”
      ${work.type == 1 ? "提取图片内容进行评价" : ""}

      #评分资料#
      评价标准：${std}
      评价细则：${laws}
      作业内容：${_fileid ? "上传的文件内容" : con}
      任务描述：${this.taskDetail ? this.taskDetail : ""}
      工具描述：${this.tool.toolDetail ? this.tool.toolDetail : ""}
      
   
      #输出要求#
      输出每个评价标准角度的“等级”和作业的综合性“评语”。
      “评语”控制在150字左右。
      评价标准要按原样输出，严格按照输出格式输出json格式。只输出json格式的内容，其他内容不要输出！

      #输出格式#
      [${text}{'comment':'评语（150个汉字左右）'${
        work.type == 1 ? "{'pic':'提取图片内容'}" : ""
      }}]
      `;
      // console.log(msg);
      this.aiGet2(msg, _fileid, work);
    },

    // ai打分
    aiGet2(messages, _fileid, work) {
      if (!this.markScoreVisible) return console.log('弹框关闭了');

      let _this = this;

      let params = {
        assistant_id: "6063369f-289a-11ef-8bf4-12e77c4cb76b",
        message: [
          {
            type: "text",
            text: messages.replaceAll("\n", " ").replaceAll("*", "")
          }
        ],
        session_name: uuidv4(),
        userId: this.cUserid,
        file_ids: _fileid ? [_fileid] : [],
        isImage: work.type == 1 ? true : "",
        model: _fileid ? "gpt-4o-2024-08-06"  : "gpt-4o-2024-08-06"
      };
      this.ajax
        .post("https://gpt4.cocorobo.cn/ai_agent_park_chat", params)
        .then(response => {
          let data = response.data.FunctionResponse;
          console.log("data", data);
          if (data.message) {
            let dArray = {};
            try {
              dArray = JSON.parse(
                data.message.replaceAll("```json", "").replaceAll("```", "")
              );
            } catch (error) {
              console.log("error_________________" + error);
              try {
                let regex = new RegExp("(?<=```json)([\\s\\S]*?)(?=```)");

                let match = data.message.match(regex);
                dArray = JSON.parse(
                  match[0]
                    .replace(/\n/g, "")
                    .replace(/\s{2,}/g, "")
                    .replace(/\'/g, '"')
                );
              } catch (error) {
                try {
                  dArray = JSON.parse(
                    data.message
                      .replaceAll("```json", "")
                      .replaceAll("# Solution", "")
                      .replaceAll("```", "")
                      .replace(/\n/g, "")
                      .replace(/\s{2,}/g, "")
                      .replace(/\'/g, '"')
                  );
                } catch (error) {
                  console.log("error_________________" + error);

                  this.aiGet2(messages, _fileid, work);
                  return;
                }
                console.log("error_________________" + error);
              }
            }

            let processedData = {};
            console.log(JSON.parse(JSON.stringify(dArray)));

            dArray.forEach(function(item) {
              let key = Object.keys(item)[0];
              let value = item[key];
              processedData[key] = value;
            });

            // 判断返回数据正确数量
            let IsAIsuccess = 0;
            for (const tKey in this.scoTitList) {
              for (const key in processedData) {
                if (
                  isNaN(parseFloat(this.scoTitList[tKey].detail)) &&
                  this.scoTitList[tKey].detail
                ) {
                  var result = this.scoTitList[tKey].detail
                    .match(/[\u4e00-\u9fa5a-zA-Z]+/g)
                    .join("");
                } else {
                  var result = this.scoTitList[tKey].detail;
                }

                if (isNaN(parseFloat(key)) && key) {
                  var key2 = key.match(/[\u4e00-\u9fa5a-zA-Z]+/g).join("");
                } else {
                  var key2 = key;
                }

                if (key != "comment") {
                  let isNumK = /^\d+(\.\d+)?$/.test(processedData[key]);
                  if (result.indexOf(key2) != -1 && isNumK) {
                    IsAIsuccess++;
                  }
                  continue;
                }
              }
              continue;
            }

            // 计算可以ai评分的评价标准数量
            let scotNum = 0;
            this.scoTitList.forEach(e => {
              if (e.isai == 1 || !e.isai) {
                scotNum++;
              }
            });

            if (IsAIsuccess != scotNum) {
              console.log("评价失败");

              this.aiGet2(messages, _fileid, work);
              return;
            }

            // for (const key in processedData) {
            //   if (key == "评语") {
            //     processedData.content = processedData[key];
            //   }
            // }
            // delete processedData["评语"];

            let processedDataCopy = {};
            for (const tKey in _this.scoTitList) {
              for (const key in processedData) {
                if (
                  isNaN(parseFloat(_this.scoTitList[tKey].detail)) &&
                  _this.scoTitList[tKey].detail
                ) {
                  var result = _this.scoTitList[tKey].detail
                    .match(/[\u4e00-\u9fa5a-zA-Z]+/g)
                    .join("");
                } else {
                  var result = _this.scoTitList[tKey].detail;
                }

                if (isNaN(parseFloat(key)) && key) {
                  var key2 = key.match(/[\u4e00-\u9fa5a-zA-Z]+/g).join("");
                } else {
                  var key2 = key;
                }

                // let result = _this.scoTitList[tKey].detail.match(/[\u4e00-\u9fa5a-zA-Z]+/g).join("");
                // let key2 = key.match(/[\u4e00-\u9fa5a-zA-Z]+/g).join("");

                if (result.indexOf(key2) != -1) {
                  let aaa = _this.scoTitList[tKey].detail;
                  processedDataCopy[aaa] = processedData[key];
                }
              }
            }
            for (const key in processedData) {
              if (key == "comment") {
                processedDataCopy.content = processedData[key];
              }
            }

            let params = {
              cid: _this.cid,
              s: _this.stage,
              t: _this.task,
              tool: _this.toolIndex ? _this.toolIndex : "",
              rate: JSON.stringify(processedDataCopy),
              uid: _this.DgUid
            };
            // console.log('params',params);

            // return  _this.ScLoading = false;
            _this.ajax
              .get(_this.$store.state.api + "updateWorksEvaTwo", params)
              .then(res => {
                _this.$message({
                  message: "评价成功",
                  type: "success"
                });

                _this.ScLoading = false;
                _this.selectSWorksData();
              })
              .catch(err => {
                this.aiGet2(messages, _fileid, work);
                console.error(err);
              });
          }
          this.$forceUpdate();
        })
        .catch(error => {
          this.aiGet2(messages, _fileid, work);

          console.log(error);
        });
    },
    // 上一个
    prevStu() {
      if (this.ScLoading) return this.$message.info("请稍后，正在ai评价中");
      if (this.current > 0) {
        this.current--;
        this.DgUid = this.workList[this.current].userid;
        this.selectSWorksData();
      } else {
        this.$message.info("已经是第一位了");
      }
    },
    // 下一个
    nextStu() {
      if (this.ScLoading) return this.$message.info("请稍后，正在ai评价中");

      if (this.current < this.workList.length - 1) {
        this.current++;
        this.DgUid = this.workList[this.current].userid;
        this.selectSWorksData2();
      } else {
        this.$message.info("已经是最后一位了");
      }
    },
    // 提交列表点击切换
    cutPer(val, index) {
      if (this.ScLoading) return this.$message.info("请稍后，正在ai评价中");

      this.current = index;
      this.DgUid = val;
      this.selectSWorksData2();
    },
    // 任务得分折叠
    revealBtn() {
      this.reveal = !this.reveal;
    },
    // 提交列表折叠
    workListTitBtn() {
      this.workListShow = !this.workListShow;
    },
    // 点赞与评论切换
    cutPage(val) {
      this.cutNum = val;
    },
    // 删除评论
    deleteComment(wid) {
      this.$confirm("确定删除此评论吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = {
            id: wid
          };
          this.ajax
            .get(this.$store.state.api + "deleteComment2", params)
            .then(res => {
              this.$message({
                message: "删除评论成功",
                type: "success"
              });
              this.selectSWorksData();
            })
            .catch(err => {
              console.error(err);
            });
        })
        .catch(() => {});
    },
    openCocoPi(tool, i, uid, uname) {
      // return console.log('?????',tool, i, uid, uname);

      let student = {
        userid: uid,
        student: uname
      };
      if (tool == 57) {
        window.parent.postMessage(
          {
            tools: tool + "teacher",
            cid: this.cid,
            stage: this.stage,
            task: this.task,
            tool: this.toolIndex,
            student: student
          },
          "*"
        );
      }
    },
    getLang() {
      let lang = "";
      if (this.languageSetting == 0) {
        lang = "Chinese.";
      } else if (this.languageSetting == 1) {
        lang = "Traditional Chinese.";
      } else if (this.languageSetting == 2) {
        lang = "English.";
      }
      return lang;
    },
    //全部作业
    selectSWorksData() {
      this.vLoading = true;
      this.textarea = "";
      // console.log(this.scoTitList);
      // console.log('toolIndex',this.toolIndex);

      let params = {
        uid: this.DgUid,
        cid: this.cid,
        s: this.stage,
        t: this.task,
        g: this.toolIndex
      };
      // return console.log(params);
      this.ajax
        .get(this.$store.state.api + "selectMarkDialogWorksTwo", params)
        .then(res => {
          let data = res.data[0];

          // markSco为提交列表展示的分数
          data.forEach(e => {
            if (e.rate) {
              let data2 = JSON.parse(e.rate);

              e.markSco = 0;
              let k = 0;

              for (const key in data2) {
                if ((data2[key] && key != "content") || data2[key] == "0") {
                  e.markSco += data2[key] * 1;
                } else {
                  k += 1;
                }
              }

              if (k > 1) {
                e.markSco = null;
              } else {
                e.markSco = (e.markSco / this.scoTitList.length).toFixed(1);
              }
            } else {
              e.markSco = null;
            }
          });
          // 提交列表
          this.workList = data;

          data.forEach((e, index) => {
            if (e.userid == this.DgUid) {
              this.currentUid = e;
              // console.log('e',e);

              // 1截图  3问答 4word文档类型 5视频  10表格 13文档

              if (
                this.currentUid.type == 3 ||
                this.currentUid.type == 10 ||
                this.currentUid.type == 13
                // this.currentUid.type == 15
              ) {
                this.currentUid.content = JSON.parse(e.content);
                this.cuScoCon = this.currentUid.content.text;
              }
              if (this.currentUid.type == 4) {
                let a = this.currentUid.content;
                let data = a.slice(a.lastIndexOf(".") + 1);
                this.cuScoCon = this.currentUid.content;

                if (data == "pdf") {
                  this.ifPdf = 1;
                } else {
                  this.ifPdf = 0;
                }
              }
              if (this.currentUid.type == 5) {
                this.playerOptions.sources[0].src = this.currentUid.content;
              }
              if (this.currentUid.type == 12) {
                this.TxtMd = "";
                getFile(this.currentUid.content).then(res => {
                  this.TxtMd = res.data;
                });
              }
              this.current = index;
              this.workId = e.id;
              this.appraise(e);
            }
          });

          let likeData = res.data[1];
          this.likeList = [];
          likeData.forEach(e => {
            if (e.workId == this.workId) {
              this.likeList.push(e);
            }
          });

          let commentData = res.data[2];
          this.commentList = [];
          commentData.forEach(e => {
            if (e.workId == this.workId) {
              this.commentList.push(e);
            }
          });
          this.vLoading = false;
        });
    },

    selectSWorksData2() {
      this.vLoading = true;
      this.textarea = "";

      let params = {
        uid: this.DgUid,
        cid: this.cid,
        s: this.stage,
        t: this.task,
        g: this.toolIndex
      };
      // return console.log(params);
      this.ajax
        .get(this.$store.state.api + "selectMarkDialogWorksTwo", params)
        .then(res => {
          let data = res.data[0];
          console.log("data", data);

          // 计算markSco提交列表分数
          data.forEach(e => {
            if (e.rate) {
              let data2 = JSON.parse(e.rate);

              e.markSco = 0;
              let k = 0;

              for (const key in data2) {
                if ((data2[key] && key != "content") || data2[key] == "0") {
                  e.markSco += data2[key] * 1;
                } else {
                  k += 1;
                }
              }

              if (k > 1) {
                e.markSco = null;
              } else {
                e.markSco = (e.markSco / this.scoTitList.length).toFixed(1);
              }
            } else {
              e.markSco = null;
            }
          });
          // 提交列表
          this.workList = data;

          // 划分作业类型
          data.forEach((e, index) => {
            if (e.userid == this.DgUid) {
              this.currentUid = e;
              // 1截图  3问答 4word文档类型 5视频  10表格 13文档
              if (
                this.currentUid.type == 3 ||
                this.currentUid.type == 10 ||
                this.currentUid.type == 13
                // this.currentUid.type == 15
              ) {
                this.currentUid.content = JSON.parse(e.content);
                this.cuScoCon = this.currentUid.content.text;
              }
              if (this.currentUid.type == 4) {
                let a = this.currentUid.content;
                let data = a.slice(a.lastIndexOf(".") + 1);

                if (data == "pdf") {
                  this.ifPdf = 1;
                } else {
                  this.ifPdf = 0;
                }
                this.cuScoCon = this.currentUid.content;
              }
              if (this.currentUid.type == 5) {
                this.playerOptions.sources[0].src = this.currentUid.content;
              }
              if (this.currentUid.type == 12) {
                this.TxtMd = "";
                getFile(this.currentUid.content).then(res => {
                  this.TxtMd = res.data;
                });
              }

              this.workId = e.id;
              this.appraise(e);
            }
          });

          let likeData = res.data[1];
          this.likeList = [];
          likeData.forEach(e => {
            if (e.workId == this.workId) {
              this.likeList.push(e);
            }
          });

          let commentData = res.data[2];
          this.commentList = [];
          commentData.forEach(e => {
            if (e.workId == this.workId) {
              this.commentList.push(e);
            }
          });
          this.vLoading = false;
        });
    },

    downloadFile(url) {
      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;
      }
      const loading2 = this.$loading.service({
        background: "rgba(255, 255, 255, 0.7)",
        target: document.body,
        text: "文件加载中..."
      });
      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) {
        loading2.close();
        if (err) console.log(err, err.stack);
        // an error occurred
        else {
          let url = window.URL.createObjectURL(new Blob([data.Body]));
          let a = document.createElement("a");
          a.name = name;
          a.href = url;
          a.download = name;
          a.click();
          console.log(data);
        } // sxuccessful response
      });
    },
    // 处理任务的分展示
    appraise(val) {
      if (val.rate) {
        let data = JSON.parse(val.rate);
        this.scoTitList.forEach((e, index) => {
          e.cog = null;
          for (const key in data) {
            if (isNaN(parseFloat(e.detail)) && e.detail) {
              var result = e.detail.match(/[\u4e00-\u9fa5a-zA-Z]+/g).join("");
            } else {
              var result = e.detail;
            }

            if (isNaN(parseFloat(key)) && key) {
              var key2 = key.match(/[\u4e00-\u9fa5a-zA-Z]+/g).join("");
            } else {
              var key2 = key;
            }

            // let result = e.detail.match(/[\u4e00-\u9fa5a-zA-Z]+/g).join("");
            // let key2 = key.match(/[\u4e00-\u9fa5a-zA-Z]+/g).join("");

            if (result.indexOf(key2) != -1) {
              e.cog = data[key];
            }
            if ("content" == key) {
              this.textarea = data[key];
            }
          }
        });
      } else {
        this.scoTitList.forEach(e => {
          e.cog = 0;
        });
      }
    }
  }
};
</script>

<style scoped>
.markDialog {
  display: flex;
  /* height: 100%; */
  min-height: 600px;
  height: 100%;
}
.left {
  /* overflow: auto; */
  width: 310px;
  /* border-right: 1px rgba(231, 231, 231, 1) solid; */
  padding: 20px 20px 0;
  box-sizing: border-box;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.Rig {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
}
.RigTop {
  border-bottom: 1px rgba(231, 231, 231, 1) solid;
  padding: 0px 0 15px;
}
.AreaCss {
  position: relative;
  margin-bottom: 5px;
}
.AreaCss >>> .el-textarea__inner {
  min-height: 150px !important;
  /* max-height: 150px; */
  color: #606266;
  padding-bottom: 20px;
}
.AreaBtn {
  position: absolute;
  width: calc(100% - 30px);
  text-align: right;
  background-color: #fff;
  bottom: 11px;
  right: 20px;
  color: rgba(54, 129, 252, 1);
  cursor: pointer;
}
.likeList {
  width: 100%;
  display: flex;
  padding: 10px 0;
  flex-wrap: wrap;
}
.likeList > div {
  padding: 4px 0px;
  background-color: rgba(243, 247, 253, 1);
  margin-right: 10px;
  width: calc((100% - 60px) / 7);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 10px;
}
.likeList > div:nth-child(7n) {
  margin-right: 0px;
}
.commentListCss {
  background-color: #fafafa;
  padding: 25px 15px 0;
  box-sizing: border-box;
  margin-top: 10px;
  border-radius: 5px;
}
.RigConTit {
  width: 100%;
  display: flex;
  margin: 10px 0;
}
.RigConTit > div {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  padding: 8px;
  cursor: pointer;
}
.RigConTitOn {
  border-bottom: 3px solid rgba(54, 129, 252, 1);
}
.RigCon {
  width: 100%;
  overflow: auto;
  flex: 1;
  padding: 10px 0;
  box-sizing: border-box;
  /* background-color: aqua; */
}
.selBlock {
  background-color: #f3f7fd !important;
  border: 1px #68a0fc solid !important;
}
.cutStuBtn {
  display: flex;
  color: rgba(54, 129, 252, 1);
}
.cutStuBtn > div {
  margin-left: 10px;
}
.scoreTit {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.9);
}
.allD {
  margin: 10px 0;
  min-height: 60px;
  background-color: #f3f7fd;
}
.scoreStar2 {
  padding: 0 10px 10px;
  height: 100%;
  flex: 1;
  color: rgba(54, 129, 252, 1);
  cursor: pointer;
}
.scoreStar {
  padding: 0px 10px 10px;
  height: 100%;
  flex: 1;
}

.scoreStarBack {
  flex: 1;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  position: relative;
}
/* .scoreStar > div:first-child > .scoreStarBack {
  margin-top: 0;
} */
.ScrBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 5px;
  color: #fff;
  background-color: rgba(54, 129, 252, 1);
  border: 1px rgba(54, 129, 252, 1) solid;
}
.worksAnswer {
  color: #4078dd;
  margin: 10px 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.worksAnswer > img {
  width: 100%;
  height: 300px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

.briefTit {
  width: 120px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.briefTit > .titRoot {
  position: absolute;
  top: 0;
  left: -27px;
  transform: translate(0, 10px);
}
.workListTit {
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  font-weight: 400;
  margin: 10px 0;
  cursor: pointer;
}
.schPer2 {
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  border-radius: 5px;
  border: 1px solid rgba(240, 242, 245, 1);
  /* margin-bottom: 10px; */
}
.schPer2 > img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
}
.schPer {
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  border-radius: 5px;
  border: 1px solid rgba(240, 242, 245, 1);
  margin-bottom: 10px;
}
.schPer > img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.con {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}
.con > .tit {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.con > .tit2 {
  width: 100%;
  display: flex;
  margin-bottom: 15px;
}

.TitName {
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 10px;
}
.worksAnswer {
  color: #4078dd;
  margin: 10px 0;
  font-size: 16px;
  position: relative;
}

.worksAnswer > img {
  width: 500px;
  height: 300px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}
.cont {
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-line;
}
.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: 5px 10px;
  max-width: 0px;
  height: 30px;
  vertical-align: baseline;
  box-sizing: border-box;
}
.video-player >>> .video-js {
  height: 100%;
}
.markBox {
  padding: 20px 14px;
  line-height: 29px;
  font-size: 16px;
  background: #f4f4f4;
  border-radius: 5px;
}
.anewC {
  position: absolute;
  width: 91%;
  text-align: right;
  background-color: #fff;
  bottom: 3px;
  right: 22px;
  color: #3681FC;
  cursor: pointer;
  font-size: 14px;
  transform: translate(0px, 2px);
}
</style>