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>任务得分</div>
            <div>
              <span style="color: rgba(54, 129, 252, 1);">{{
                totalScore ? totalScore : 0
              }}</span
              >分
            </div>
          </div>
          <div class="allD">
            <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.value"
                    placement="top"
                  >
                    <div class="briefTit">
                      {{ e.value }}
                    </div>
                  </el-tooltip>
                  <el-rate 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.value"
                    placement="top"
                  >
                    <div class="briefTit">
                      {{ e.value }}
                    </div>
                  </el-tooltip>
                  <el-rate v-model="e.cog"></el-rate>
                </div>
              </div>
            </div>

            <div
              v-if="reveal && scoTitList.length > 3"
              class="scoreStar2"
              @click="revealBtn"
            >
              折叠 <i class="el-icon-arrow-up"></i>
            </div>
            <div
              v-if="!reveal && scoTitList.length > 3"
              class="scoreStar2"
              @click="revealBtn"
            >
              全部 <i class="el-icon-arrow-down"></i>
            </div>
          </div>
          <div class="AreaCss">
            <el-input
              type="textarea"
              placeholder="您可在此输入评语"
              v-model="textarea"
              style="padding-bottom: 10px;"
            >
            </el-input>
            <div
              class="AreaBtn"
              v-if="currentUid.type == 10 || currentUid.type == 13 || isMarkCom == 1"
              @click="generateMsg(currentUid)"
            >
              <span>重新生成</span>
            </div>
           
          </div>

          <div
            style="width:100%;display:flex;height: 25px;;justify-content: space-between;"
          >
            <div
              class="ScrBtn"
              @click="AIsubmit(currentUid)"
              v-if="
                currentUid.type == 10 || currentUid.type == 13 || isMarkCom == 1
              "
            >
              <img
                src="../../../assets/icon/newIcons/Brootper.svg"
                alt=""
              />AI评分
            </div>
            <div v-else></div>

            <div style="display: flex;">
              <div
                class="ScrBtn"
                @click="reset"
                style="color: rgba(0, 0, 0, 0.6);background-color: rgba(243, 247, 253, 1);border: none;"
              >
                重置
              </div>
              <div
                class="ScrBtn"
                @click="submit"
                style="margin-left: 10px;color:#fff;border: none;background-color: rgba(54, 129, 252, 1);"
              >
                确认
              </div>
            </div>
          </div>
        </div>

        <!-- 提交列表 -->
        <div>
          <div class="workListTit" @click="workListTitBtn">
            <i class="el-icon-arrow-down"></i>提交列表({{ workList.length }})
          </div>
          <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)"
          >
            <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"
                  >未评分</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 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 class="cutStuBtn">
            <div>
              <span @click="prevStu" style="cursor: pointer;">上一个</span>
            </div>
            <div>
              <span @click="nextStu" style="cursor: pointer;">下一个</span>
            </div>
            <!-- <div><span @click="prevStu" v-if="this.current > 0">上一个</span></div>
            <div><span @click="nextStu" v-if="this.current < this.workList.length-1">下一个</span></div> -->
          </div>
        </div>
      </div>
      <div class="RigConTit">
        <div :class="[cutNum ? '' : 'RigConTitOn']" @click="cutPage(0)">
          学生作业
        </div>
        <div :class="[cutNum ? 'RigConTitOn' : '']" @click="cutPage(1)">
          点赞与评论
        </div>
      </div>
      <div class="RigCon">
        <!-- 作业内容  -->
        <div v-if="cutNum == 0" style="height: 100%;">
          <div
            v-if="
              currentUid.type == 13 || currentUid.type == 10
              // currentUid.type == 15
            "
          >
            <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%;">
            txt
          </div>
          <div v-if="currentUid.type == 15">
            <div
              class="worksAnswer"
              v-if="currentUid.content && currentUid.type == 15"
              @click="
                openCocoPi(
                  57,
                  this.toolIndex,
                  currentUid.userid,
                  currentUid.name
                )
              "
            >
              <img src="../../../assets/icon/codeFile.png" />
              <div>点击打开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>
        <!-- 点赞与评论  -->
        <div v-if="cutNum == 1">
          <div style="display: flex;align-items: center;">
            <img
              style="margin-right: 3px;"
              src="../../../assets/icon/newIcons/likeG.png"
              alt=""
            />点赞({{ 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=""
            />评论({{ 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: 270px;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="tit">
                    <div class="TitName">{{ i.username }}</div>
                    <span
                      style="font-size: 14px;color: rgba(0, 0, 0, 0.9);font-weight: 400;"
                      >{{ i.time }}</span
                    >
                  </div>
                  <div class="Timer">{{ i.comment }}</div>
                </div>
              </div>
              <div>
                <span
                  v-if="cUserid == i.likesId"
                  style="color: #3B7BD7;cursor: pointer;"
                  @click="deleteComment(i.id)"
                  >删除</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";

export default {
  props: ["uid", "stage", "toolIndex", "task", "scoTit", "markScoreVisible"],
  data() {
    return {
      textarea: "",
      reveal: false, //得分详情框全部与折叠
      workListShow: true, //作业显示
      cutNum: 0, //作业与评论切换
      scoTitList: [], //得分详情框数据
      workList: [], //作业列表
      cid: this.$route.query.courseId,
      cUserid: this.$route.query.userid, //账号登录人id
      cuScoCon: "",
      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: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true //全屏按钮
        }
      },
      xianObj: ["DOCX", "PPT", "PPTX", "MD", "TXT", "PDF"],
    };
  },
  watch: {
    markScoreVisible(newVal) {
      this.workListShow = true;
      this.reveal = false;
      this.cutNum = 0;
      this.textarea = "";
      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.scoTit.length).toFixed(1);
    },
    isMarkCom(){
      // console.log('a',this.currentUid);
      if (this.currentUid.type == 4 || this.currentUid.type == 12) {
        let a = this.currentUid.content.slice(this.currentUid.content.lastIndexOf(".") + 1)
        
        if (this.xianObj.indexOf(a) == -1) {
          return 1
        }else{
          return 0
        }
      }else{
        return 0
      }
    }
  },
  mounted() {
    this.scoTitList = JSON.parse(JSON.stringify(this.scoTit));

    this.selectSWorksData();
  },
  methods: {
    // 预览图片
    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.value + ":" + e.cog;
      });
      // console.log("data", data);
      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,
        rate: JSON.stringify(processedData),
        uid: this.DgUid
      };
      // return console.log(params);
      this.ajax
        .get(this.$store.state.api + "updateWorksEva", params)
        .then(res => {
          this.$message({
            message: "评价成功",
            type: "success"
          });
          this.ScLoading = false;

          this.selectSWorksData();
          // this.$emit("refreshOther", this.toolIndex);
        })
        .catch(err => {
          this.$message.error("评价失败");
          console.error(err);
        });
    },
   
    // 重置
    reset() {
      this.scoTitList.forEach(e => {
        e.cog = 0;
      });
      this.textarea = "";
      // this.scoTitList = JSON.parse(JSON.stringify(this.scoTit));
    },

    async generateMsg(work) {
      this.ScLoading = true;
      let tit = this.scoTit;
      tit.forEach((e, index) => {
        if (!e.isai) {
          e.isai = 1;
        }
      });
      let _fileid = ''
      if(work.type == 4 || work.type == 12){
        _fileid = await this.createFileid(work.content);
      }
      let con = this.cuScoCon;

      let laws = "";
      for (let i = 0; i < tit.length; i++) {
        if (tit[i].isai == 1) {
          laws += `评价维度：${tit[i].value} 评价细则：${tit[i].rule} \n`;
        }
      }
      let msg = `NOTICE
          Role:你是一个专业的项目式学习导师，你要对学生的评价高度负责。你要根据“六级评价细则”评价学生作业。
          Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.
          ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
          Instruction: Based on the context, follow "Format example", write content.

          #Context
          ##要求
          根据<评价细则>和<作业内容>的相关性评价作业,只用输出作业的综合性“评语”，字数控制在150字左右，不要输出其他无关内容。


          ##评分资料
          评价细则：${laws}
          作业内容：${_fileid ? "上传的文件内容" : con}


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

      this.generateRemark(msg,_fileid);
    },
    // 重新获取评语
    generateRemark(messages,_fileid) {
      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] : [],
        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);
          this.textarea = data.message;
          // this.selectSWorksData()
          this.ScLoading = false;

        })
        .catch(error => {
          this.ScLoading = false;

          _this.$message.error("评价失败");
          console.log(error);
        });
    },
    // ai评分
    async AIsubmit(work) {
      // return console.log("con", this.scoTit, this.cuScoCon);
      let _fileid = ''
      if(work.type == 4 || work.type == 12){
        _fileid = await this.createFileid(work.content);
      }
      this.ScLoading = true;
      let tit = this.scoTit;
      tit.forEach((e, index) => {
        if (!e.isai) {
          e.isai = 1;
        }
      });
      let con = this.cuScoCon;

      let laws = "";
      for (let i = 0; i < tit.length; i++) {
        if (tit[i].isai == 1) {
          laws += `评价维度：${tit[i].value} 评价细则：${tit[i].rule} \n`;
        }
      }

      let msg = `NOTICE
      Role: 你是一个专业的项目式学习导师，你要对学生的评价高度负责。你要根据“六级评价细则”给学生作品评分，并生成需要的JSON数据。
      Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.
      ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
      Instruction: Based on the context, follow "Format example", write content.

      #Context
      ##要求
      根据<评价细则>和<作业内容>的相关性评价作业，判断该作业属于六级中的哪个等级，结合“评价维度”和等级写评语。如果作业内容与评价细则无关，则直接评为0星。

      ##评分资料
      评价细则：${laws}
      作业内容：${_fileid ? "上传的文件内容" : con}

      #输出要求#
      输出每个维度的“等级”和作业的综合性“评语”
      “评语”控制在150字左右


      # Format example
      [{'评价名称':'评价等级0-5（数字）'},{'评价名称':'评价等级0-5（数字）'},{'评价名称':'评价等级0-5（数字）'},{'评价名称':'评价等级0-5（数字）'},{'评语':'评语（150个字左右）'}]
      `;
      // console.log(msg);
      this.aiGet2(msg, _fileid);
    },

    // ai打分
    aiGet2(messages, _fileid) {
      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] : [],
        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);
                }
                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;
            });
            // console.log(JSON.parse(JSON.stringify(processedData)));

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

            let params = {
              cid: _this.cid,
              s: _this.stage,
              t: _this.task,
              rate: JSON.stringify(processedData),
              uid: _this.DgUid
            };
            // console.log("params", params);
            _this.ajax
              .get(_this.$store.state.api + "updateWorksEva", params)
              .then(res => {
                _this.$message({
                  message: "评价成功",
                  type: "success"
                });

                this.ScLoading = false;
                _this.selectSWorksData();
              })
              .catch(err => {
                _this.$message.error("评价失败");
                this.ScLoading = false;

                console.error(err);
              });
          }
          this.$forceUpdate();
        })
        .catch(error => {
          _this.$message.error("评价失败");
          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.selectSWorksData();
      } else {
        this.$message.info("已经是最后一位了");
      }
    },
    // 提交列表点击切换
    cutPer(val) {
      if (this.ScLoading) return this.$message.info("请稍后，正在ai评价中");

      this.DgUid = val;
      this.selectSWorksData();
    },
    // 任务得分折叠
    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) {
      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
          },
          "*"
        );
      }
    },
    //全部作业
    selectSWorksData() {
      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 + "selectMarkDialogWorks", params)
        .then(res => {
          let data = res.data[0];

          data.forEach(e => {
            if (e.rate) {
              let data2 = JSON.parse(e.rate);
              // console.log("data2", data2);

              e.markSco = 0;
              for (const key in data2) {
                if (data2[key] && key != "content") {
                  e.markSco += data2[key] * 1;
                }
              }
              // this.scoTitList;
              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;

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

        });
    },

    // 处理任务的分展示
    appraise(val) {
      if (val.rate) {
        // this.scoTitList = JSON.parse(JSON.stringify(this.scoTit));
        // console.log("val.rate", val.rate);

        let data = JSON.parse(val.rate);
        this.scoTitList.forEach((e, index) => {
          e.cog = null;
          for (const key in data) {
            if (e.value == key) {
              e.cog = data[key] * 1;
            }
            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: 30px 20px;
  box-sizing: border-box;
  padding-right: 10px;
}

.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: 60px;
  max-height: 150px;
  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;
  width: 100%;
  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;
}
/* .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: 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;
}

.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;
}
.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;
}
.TitName {
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.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%;
}
</style>