11wqe1 5 months ago
parent
commit
04cf1b5ea6

+ 1348 - 0
src/components/pages/components/lookWork.vue

@@ -0,0 +1,1348 @@
+<template>
+  <div class="pbl" v-loading="loading">
+    <div class="titBri">
+      <div class="claInfo">
+        <img v-if="userImg" :src="userImg" alt="" />
+        <img
+          v-else
+          src="https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/static/img/portal.b3cf7fa.png"
+          alt=""
+        />
+        <span>{{ userName }}</span>
+        <span>{{ courseName }}</span>
+      </div>
+
+      <div>
+        <el-button type="primary" @click="upPer" size="small" v-if="positP > 0"
+          >上一个</el-button
+        >
+        <el-button
+          type="primary"
+          @click="nxtPer"
+          size="small"
+          v-if="positP < tableData.length - 1"
+          >下一个</el-button
+        >
+      </div>
+    </div>
+    <div class="pageCon">
+      <div class="rightBar">
+        <el-col style="width: 100%" :span="12">
+          <el-menu
+            default-active="2"
+            :default-openeds="['0']"
+            class="el-menu-vertical-demo"
+          >
+            <el-submenu
+              :index="i.id"
+              v-for="i in dyList"
+              :key="i.id"
+              :collapse="false"
+            >
+              <template slot="title">
+                <div class="eliP">
+                  {{ "第" + (i.id * 1 + 1) + "阶段" }}:{{ i.name }}
+                </div>
+              </template>
+              <el-menu-item-group>
+                <el-menu-item
+                  v-for="(k, kin) in i.taskList"
+                  :key="k.id"
+                  :index="k.id"
+                  style="display: flex; align-items: center"
+                >
+                  <div @click.stop="positT(k.id)" class="TitBti">
+                    任务{{ kin + 1 }}
+                  </div>
+                  <div @click.stop="positT(k.id)" class="eliP">
+                    {{ k.name }}
+                  </div>
+                </el-menu-item>
+              </el-menu-item-group>
+            </el-submenu>
+          </el-menu>
+        </el-col>
+      </div>
+
+      <div class="workCon">
+        <div>
+          <div
+            v-for="i in workList"
+            :key="i.id"
+            v-if="isStage(i.taskList)"
+            class="stageCon"
+          >
+            <div class="stageTit">阶段{{ i.id + 1 }}</div>
+
+            <div
+              v-for="(k, kIndex) in i.taskList"
+              :key="k.task + 'a'"
+              style="margin-bottom: 15px"
+              v-if="isTask(k.toolEList)"
+            >
+              <div
+                style="
+                    width: 100%;
+                    display: flex;
+                    justify-content: space-between;
+                    margin-bottom: 10px;
+                  "
+                :id="k.stage + '-' + k.task"
+              >
+                <div class="taskTitInd">
+                  <span class="TitBti">任务{{ k.task + 1 }}</span>
+                  <span>{{ k.taskTit }}</span>
+                </div>
+                <div></div>
+              </div>
+              <div v-if="k.taskDetail" class="taskBri">
+                {{ k.taskDetail }}
+              </div>
+              <div
+                v-for="(l, lind) in k.toolEList"
+                :key="lind + 'l'"
+                class="toolEListCon"
+              >
+                <div style="flex: 1" 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>工具{{ lind + 1 }}:问答工具</div>
+                        <div>提问:{{ l.content[0][0].answerTitle }}</div>
+                      </div>
+                    </div>
+                    <div class="answerTxt">
+                      回答:{{ l.content[0][0].answer }}
+                    </div>
+                  </div>
+                  <div v-if="l.tool[0] == 52">
+                    <div class="toolBlk">
+                      <img
+                        src="../../../assets/icon/fourthToolList/text.png"
+                        alt=""
+                      />
+                      <div class="toolTit">
+                        <div>工具{{ lind + 1 }}:文档工具</div>
+                        <div>
+                          根据前期的了解与实地调研对于项目的了解,进行思考与讨论提出问题。
+                        </div>
+                      </div>
+                    </div>
+                    <div class="answerTxt" v-html="l.content[0].text"></div>
+                  </div>
+                  <div v-if="l.tool[0] == 16 || l.tool[0] == 50">
+                    <div class="toolBlk">
+                      <img
+                        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>
+                          工具{{ lind + 1 }}:{{
+                            l.tool[0] == 16 ? "作业提交" : "批量上传"
+                          }}
+                        </div>
+                        <div>
+                          根据前期的了解与实地调研对于项目的了解,进行思考与讨论提出问题。
+                        </div>
+                      </div>
+                    </div>
+                    <div v-for="(i, codex) in l.content" :key="codex + 'co'">
+                      <div class="answerTxt" v-html="i"></div>
+                    </div>
+                  </div>
+                  <div
+                    v-if="l.tool[0] == 7 || l.tool[0] == 1 || l.tool[0] == 3"
+                  >
+                    <div class="toolBlk">
+                      <img
+                        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>
+                          工具{{ lind + 1 }}:{{
+                            l.tool[0] == 1
+                              ? "电子白板"
+                              : l.tool[0] == 7
+                              ? "思维网格"
+                              : "思维导图"
+                          }}
+                        </div>
+                        <div>
+                          根据前期的了解与实地调研对于项目的了解,进行思考与讨论提出问题。
+                        </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>工具{{ lind + 1 }}:表格</div>
+                        <div>
+                          根据前期的了解与实地调研对于项目的了解,进行思考与讨论提出问题。
+                        </div>
+                      </div>
+                    </div>
+                    <el-form>
+                      <div class="cont" v-html="l.content[0].text"></div>
+                    </el-form>
+                  </div>
+                  <div v-if="l.tool[0] == 4">
+                    <div class="toolBlk">
+                      <img
+                        src="../../../assets/icon/thirdToolList/ask.png"
+                        alt=""
+                      />
+                      <div class="toolTit">
+                        <div>工具{{ lind + 1 }}:问卷调查</div>
+                        <div>标题:{{ l.content[0][0].askJson.askTitle }}</div>
+                      </div>
+                    </div>
+
+                    <div
+                      style="margin-bottom: 5px"
+                      v-for="(i, index) in l.content[0][0].askJson.askJson"
+                      :key="index"
+                    >
+                      <div>题目:{{ i.askstitle }}</div>
+                      <el-radio-group
+                        v-if="!i.type"
+                        v-model="l.content[0][0].anwer[index]"
+                      >
+                        <el-radio
+                          v-for="(item2, checkIndex) in i.checkList"
+                          :key="checkIndex + 'b'"
+                          :label="checkIndex"
+                          disabled
+                        >
+                          {{ item2 }}
+                        </el-radio>
+                      </el-radio-group>
+                      <el-checkbox-group
+                        v-model="l.content[0][0].anwer[index]"
+                        v-else
+                      >
+                        <div class="radioBox">
+                          <el-checkbox
+                            v-for="(item2, checkIndex) in i.checkList"
+                            :key="checkIndex + 'c'"
+                            :label="checkIndex"
+                            disabled
+                          >
+                            {{ item2 }}
+                          </el-checkbox>
+                        </div>
+                      </el-checkbox-group>
+                    </div>
+                  </div>
+                  <div v-if="l.tool[0] == 45">
+                    <div class="toolBlk">
+                      <img
+                        src="../../../assets/icon/thirdToolList/choose.png"
+                        alt=""
+                      />
+                      <div class="toolTit">
+                        <div>工具{{ lind + 1 }}:选择题</div>
+                        <div>
+                          根据前期的了解与实地调研对于项目的了解,进行思考与讨论提出问题。
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      v-for="(i, index) in l.content[0].testJson"
+                      :key="index + 'm'"
+                    >
+                      <div>题目:{{ i.teststitle }}</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
+                        src="../../../assets/icon/thirdToolList/select.png"
+                        alt=""
+                      />
+                      <div class="toolTit">
+                        <div>工具{{ lind + 1 }}:选择匹配</div>
+                        <div>
+                          根据前期的了解与实地调研对于项目的了解,进行思考与讨论提出问题。
+                        </div>
+                      </div>
+                    </div>
+                    <img
+                      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>工具{{ lind + 1 }}:排序</div>
+                        <div>
+                          根据前期的了解与实地调研对于项目的了解,进行思考与讨论提出问题。
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      v-for="(i, index) in l.content[0]"
+                      :key="index"
+                      style="margin-bottom: 10px"
+                    >
+                      <div
+                        style="
+                            height: 20px;
+                            display: flex;
+                            align-items: center;
+                            flex-wrap: wrap;
+                          "
+                      >
+                        题目:
+                        <div
+                          class="sortTool"
+                          v-for="(i, index) in i.addSentence"
+                          :key="index"
+                        >
+                          {{ i }}
+                        </div>
+                        <span
+                          v-if="
+                            JSON.stringify(i.chooseSenList) ==
+                              JSON.stringify(i.addSentence)
+                          "
+                          style="color: #868ce4"
+                          >回答正确</span
+                        >
+                        <span v-else style="color: red">回答错误</span>
+                      </div>
+                      <div
+                        style="
+                            margin: 10px 0;
+                            display: flex;
+                            align-items: center;
+                            flex-wrap: wrap;
+                          "
+                      >
+                        学生回答:
+                        <div
+                          class="sortTool"
+                          v-for="(i, index) in i.chooseSenList"
+                          :key="index"
+                        >
+                          {{ i }}
+                        </div>
+                      </div>
+                      <div>
+                        正确答案:
+                        <span style="margin: 0 5px">{{
+                          i.addSentence.join(",")
+                        }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 作业得分  -->
+                <div class="taskSco" v-if="l.content && l.content.length">
+                  <div class="taskScoTit">
+                    <div>
+                      作业得分:<span style="color: rgba(242, 161, 75, 1)">{{
+                        totalScore(l.rate)
+                      }}</span>
+                      分
+                    </div>
+                    <div>提交时间:{{ l.time }}</div>
+                  </div>
+
+                  <!-- 作业评分 -->
+                  <div class="taskScoCon">
+                    <!-- 分数详情与素养 -->
+                    <div
+                      v-if="l.eList"
+                      style="
+                          flex: 1;
+                          justify-content: space-between;
+                          display: flex;
+                          flex-wrap: wrap;
+                        "
+                    >
+                      <div style="width: 250px; margin: 0 20px 10px 0">
+                        <div class="taskScoConTit">分数详情</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;
+                                min-width: 49%;
+                              "
+                          >
+                            <el-tooltip
+                              class="item"
+                              effect="dark"
+                              :content="wItem.detail"
+                              placement="top-start"
+                            >
+                              <div class="RootImgBlock">
+                                {{ wItem.detail }}
+                              </div>
+                            </el-tooltip>
+
+                            <el-rate
+                              class="rate_size"
+                              style="width: 120px"
+                              v-model="l.rate[wItem.detail]"
+                              @change="updateRate(i.id, k.task, lind)"
+                            ></el-rate>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div v-if="l.eList" style="width: 250px">
+                        <div class="taskScoConTit">素养</div>
+                        <div class="WorkConSY">
+                          <div v-for="(wItem, ind) in l.eList" :key="ind + 's'">
+                            <el-tooltip
+                              class="item"
+                              effect="dark"
+                              :content="wItem.detail"
+                              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 || l.rate.comment"
+                    >
+                      <div class="taskScoConTit">评语</div>
+                      <div class="WorkCon">
+                        {{ l.rate.content || l.rate.comment }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["id", "studentId"],
+  data() {
+    return {
+      barLeft: [],
+      // 房屋去除甲醛方法
+      //   cid: "aedd1571-7984-11ef-9b30-005056b86db5",
+      //   uid: "1b406ce7-3b32-11ee-91d8-005056b86db5",
+      cid: "",
+      uid: "",
+      userName: "",
+      userImg: "",
+
+      // 上一个下一个学生位置
+      positP: 0,
+
+      dyList: [],
+      courseName: "",
+      workList: [],
+      state: 0,
+      tableData: [],
+      loading: false
+    };
+  },
+  computed: {
+    isStage() {
+      return function(val) {
+        let isShow = false;
+
+        val.forEach(e => {
+          e.toolEList.forEach(i => {
+            if (i.content.length) {
+              isShow = true;
+            }
+          });
+        });
+
+        return isShow;
+      };
+    },
+    isTask() {
+      return function(val) {
+        let isShow = false;
+
+        val.forEach(e => {
+          if (e.content.length) {
+            isShow = true;
+          }
+        });
+
+        return isShow;
+      };
+    },
+    totalScore() {
+      return function(val) {
+        let valT = JSON.parse(JSON.stringify(val));
+        if (!valT) return "0.0";
+
+        delete valT.content;
+        delete valT.comment;
+
+        let data = Object.values(valT);
+
+        let new1 = data.reduce(function(pre, next, index) {
+          return pre + next * 1;
+        });
+
+        if (new1 == 0) return "0.0";
+
+        return (new1 / data.length).toFixed(1);
+      };
+    }
+  },
+  mounted() {
+    this.cid = JSON.parse(JSON.stringify(this.id));
+    this.uid = JSON.parse(JSON.stringify(this.studentId));
+
+    this.getWorks1();
+  },
+  methods: {
+    nxtPer() {
+      this.positP++;
+      this.uid = this.tableData[this.positP].userid;
+      this.exportPdfSet();
+    },
+    upPer() {
+      this.positP--;
+      this.uid = this.tableData[this.positP].userid;
+      this.exportPdfSet();
+    },
+    // 提交分数
+    updateRate(stage, task, tool) {
+       
+    let processedData = this.workList[stage].taskList[task].toolEList[tool].rate
+
+      console.log(stage, task, tool);
+      let params = {
+        cid: this.cid,
+        s: stage,
+        t: task,
+        tool: tool ? tool : "",
+        rate: JSON.stringify(processedData),
+        uid: this.uid
+      };
+      // return console.log(params);
+      this.ajax
+        .get(this.$store.state.api + "updateWorksEvaTwo", params)
+        .then(res => {
+
+        })
+        .catch(err => {
+          this.$message.error("评价失败");
+          console.error(err);
+        });
+    },
+    //获取作业
+    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.tableData = res.data[0];
+          console.log("this.tableData", this.tableData);
+
+          this.exportPdfSet();
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    },
+
+    // 获取作业信息
+    async exportPdfSet(uid, con) {
+      this.loading = true;
+      this.tableData.forEach((e, i) => {
+        if (e.userid == this.uid) {
+          this.userName = e.sName;
+          this.userImg = e.img ? e.img : "";
+          this.positP = i;
+        }
+      });
+      let params = {
+        uid: this.uid,
+        cid: this.cid
+      };
+      return new Promise((resolve, reject) => {
+        this.ajax
+          .get(this.$store.state.api + "selectAllWorksDetail", params)
+          .then(res => {
+            var worksDetail = res.data[1];
+            var askInfo = res.data[3]; //问卷
+            var answerInfo = res.data[4]; //问答题
+            var pptInfo = res.data[5];
+            var chooseInfo = res.data[6]; //选择题
+            var pjInfo = res.data[7]; //个人评价作业
+            var xztkInfo = res.data[8]; //选择匹配作业
+            var lccjInfo = res.data[9]; //排序作业
+            var bgInfo = res.data[10]; //表格作业
+            var cocopiInfo = res.data[11]; //cocopi或源码编辑作业
+            var wordInfo = res.data[12]; //文档作业
+            this.workEvaList = res.data[13];
+
+            this.courseName = res.data[0][0].course;
+            this.state = res.data[0][0].state;
+
+            var dyJSON = JSON.parse(res.data[0][0].chapters);
+
+            let dyList = [];
+            for (var i = 0; i < dyJSON.length; i++) {
+              dyList.push({
+                name: dyJSON[i].dyName,
+                id: `${i}`,
+                taskList: []
+              });
+              var a = dyJSON[i].chapterInfo[0].taskJson;
+              for (var j = 0; j < a.length; j++) {
+                dyList[i].taskList.push({ name: a[j].task, id: i + "-" + j });
+              }
+            }
+            this.dyList = dyList;
+            console.log("this.dyList", this.dyList);
+
+            // console.log("this.workEvaList", this.workEvaList);
+
+            let framework = [];
+            if (res.data[0].length) {
+              let elistData = JSON.parse(res.data[0][0].chapters);
+              // console.log("elistData", JSON.parse(JSON.stringify(elistData)));
+
+              elistData.forEach((e, i) => {
+                framework[i] = {
+                  id: i,
+                  name: i.dyName ? i.dyName : "",
+                  taskList: []
+                };
+                e.chapterInfo[0].taskJson.forEach((k, kin) => {
+                  if (k.eList && k.eList.length) {
+                    k.toolChoose.forEach(y => {
+                      y.eList = k.eList;
+                    });
+                  }
+                  framework[i].taskList.push({
+                    stage: i,
+                    task: kin,
+                    taskTit: k.task ? k.task : "",
+                    taskDetail: k.taskDetail,
+                    toolEList: k.toolChoose
+                  });
+                });
+              });
+            }
+
+            res.data[3].forEach(e => {
+              e.content = JSON.parse(e.content);
+            });
+            res.data[4].forEach(e => {
+              e.content = JSON.parse(e.content);
+              // console.log('66666',e.content[0].answer);
+            });
+
+            res.data[6].forEach((k, i) => {
+              const element1 = JSON.parse(k.content)[0];
+              // console.log("JSON.parse(element1.content)[0]", element1);
+
+              let t = JSON.parse(k.content)[0].testJson;
+              // console.log("t", JSON.parse(JSON.stringify(t)));
+              // console.log("k", k);
+
+              // 处理学生选择答案
+              let e = [];
+              t.testJson.forEach((i, y) => {
+                e.push(element1.anwer[y]);
+              });
+              t.radio = e;
+
+              // 处理选项
+
+              k.content = t;
+            });
+
+            res.data[8].forEach((k, i) => {
+              k.content = k.content.split(",");
+            });
+
+            res.data[9].forEach(e => {
+              e.content = JSON.parse(e.content);
+            });
+
+            res.data[12].forEach(e => {
+              e.content = JSON.parse(e.content);
+            });
+            res.data[10].forEach(e => {
+              e.content = JSON.parse(e.content);
+            });
+
+            let AreaAllWork = [
+              ...res.data[1],
+              ...res.data[3],
+              ...res.data[4],
+              ...res.data[5],
+              ...res.data[6],
+              ...res.data[7],
+              ...res.data[8],
+              ...res.data[9],
+              ...res.data[10],
+              ...res.data[11],
+              ...res.data[12]
+            ];
+
+            AreaAllWork.sort(function(a, b) {
+              return a.stage - b.stage; //从小到大排序
+            });
+            // console.log("AreaAllWork", JSON.parse(JSON.stringify(AreaAllWork)));
+
+            framework.forEach(e => {
+              e.taskList.forEach((k, kin) => {
+                k.toolEList.forEach((l, lIndex) => {
+                  l.content = [];
+                  l.rate = "";
+                  l.time = "";
+                  // 将作业答案添加进数组里
+                  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
+                    ) {
+                      //   console.log("JSON.parse(p.rate)", JSON.parse(p.rate));
+
+                      let rateCopy = JSON.parse(p.rate);
+                      for (const key in rateCopy) {
+                        if (key != "content") {
+                          rateCopy[key] = rateCopy[key] * 1;
+                        }
+                      }
+
+                      l.rate = rateCopy;
+                    }
+                  });
+                });
+              });
+            });
+
+            // console.log("framework", JSON.parse(JSON.stringify(framework)));
+
+            this.workList = framework;
+            this.loading = false;
+          })
+          .catch(err => {
+            console.error(err);
+          });
+      });
+    },
+    // 点击任务滑动跳转
+    positT(val) {
+      let a = document.getElementById(val);
+      if (a) {
+        a.scrollIntoView({
+          behavior: "smooth" // 平滑滚动效果
+        });
+      } else {
+        this.$message.error("该任务暂时没提交作业");
+      }
+    },
+    // 点击阶段
+    positS(val) {
+      console.log(val);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.eliP {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 80%;
+}
+.pbl {
+  padding: 0 50px 20px;
+  box-sizing: border-box;
+  height: 100%;
+}
+.titBri {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+}
+.claInfo {
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+}
+.claInfo span {
+  margin-left: 10px;
+}
+
+.claInfo img {
+  width: 35px;
+  border-radius: 50%;
+}
+.toolEListCon {
+  display: flex;
+  justify-content: space-between;
+  flex-shrink: 1;
+}
+.pageCon {
+  display: flex;
+  height: calc(100% - 60px);
+  padding-bottom: 50px;
+  box-sizing: border-box;
+}
+.rightBar {
+  width: 300px;
+  margin-right: 20px;
+  border-radius: 10px;
+  height: 100%;
+  overflow-y: auto;
+  background-color: #ffffff;
+}
+.workCon {
+  display: flex;
+  height: 100%;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-radius: 10px;
+}
+
+.coverPage {
+  height: 743px;
+  background-color: #ccc;
+  position: relative;
+}
+.coverPageLogo {
+  padding: 10px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  margin-bottom: 30px;
+}
+.coverPageFrom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 70%;
+  margin: 0 auto;
+}
+.coverPageFromTit {
+  font-size: 48px;
+  color: rgba(58, 59, 152, 1);
+  font-weight: 600;
+}
+.fromCss {
+  border: 1.5px dashed rgba(158, 208, 255, 1);
+  border-radius: 16px;
+  background-color: #fff;
+  padding: 24px 32px;
+  width: 300px;
+  color: rgba(35, 99, 205, 1);
+}
+.fromCss > div {
+  margin-bottom: 10px;
+  display: flex;
+}
+.fromCss > div > span {
+  flex-shrink: 0;
+  margin-right: 5px;
+  font-size: 16px;
+}
+.fromCss > div:last-child {
+  margin-bottom: 0;
+}
+.txt {
+  width: 100%;
+  border-bottom: 1px solid rgba(192, 210, 229, 1);
+  text-align: center;
+  color: #000;
+}
+.coverPageCon {
+  background-color: #e3edfe;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  /* padding: 0 30px; */
+  box-sizing: border-box;
+}
+.stageCon {
+  background-color: #fff;
+  padding: 15px 20px;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  width: 100%;
+}
+
+.a_addBox {
+  margin: 10px 0;
+  background: #fff;
+  padding: 0 15px;
+  /* max-height: 400px; */
+  /* max-height: 160px; */
+  /* overflow: auto; */
+}
+.redioStyle >>> .el-radio__label {
+  font-size: 18px;
+}
+
+.redioStyle5 >>> .el-radio__label {
+  font-size: 14px;
+  color: #06a7ff !important;
+}
+.redioStyle2 >>> .el-radio__label {
+  font-size: 14px;
+}
+
+.redioStyle3 >>> .el-checkbox__label {
+  font-size: 14px;
+  color: #06a7ff !important;
+}
+.redioStyle4 >>> .el-checkbox__label {
+  font-size: 14px;
+}
+.redioStyle4 >>> .el-checkbox-group {
+  margin: 0 5px;
+}
+.redioStyle3 >>> .el-checkbox-group {
+  margin: 0 5px;
+}
+.sortTool {
+  padding: 1px 3px;
+  border: 2px #5d89c4 solid;
+  margin: 0 5px;
+  min-width: 20px;
+  border-radius: 5px;
+  text-align: center;
+}
+/* table 样式 */
+.cont /deep/ table {
+  border-top: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+}
+
+.cont /deep/ table td,
+.cont /deep/ table th {
+  border-bottom: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+  padding: 15px 5px;
+  max-width: 0px;
+}
+
+.cont /deep/ table th {
+  border-bottom: 2px solid #ccc;
+  text-align: center;
+}
+
+.score_boxTit > span {
+  border-left: 3px solid rgba(54, 129, 252, 1);
+  padding-left: 5px;
+}
+.score_boxTit {
+  /* padding: 0 30px; */
+  box-sizing: border-box;
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.9);
+}
+.inImg {
+  width: 100px;
+}
+.inImg > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.radioBox {
+  display: flex;
+  flex-direction: column;
+}
+.radioBox >>> .el-radio {
+  display: flex;
+  align-items: center;
+  margin: 5px;
+}
+.radioBox >>> .el-checkbox {
+  display: flex;
+  align-items: center;
+  margin: 5px;
+}
+.RootImgBlock {
+  width: 50%;
+  white-space: nowrap;
+  overflow: hidden;
+  font-size: 12px;
+  text-overflow: ellipsis;
+}
+.RootImgBlockSy {
+  width: 300px;
+  white-space: nowrap;
+  overflow: hidden;
+  font-size: 12px;
+  text-overflow: ellipsis;
+}
+.score_box {
+  font-size: 14px !important;
+  margin-bottom: 15px;
+  margin: 5px 0;
+}
+.score_box:last-child {
+  margin-bottom: 0;
+}
+.worksTarget {
+  border-left: 3px solid rgba(54, 129, 252, 1);
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.9);
+}
+.worksTarget > span {
+  margin-left: 5px;
+}
+.worksTargetCon {
+  background-color: #fff;
+  padding: 10px;
+  margin-top: 10px;
+  border-radius: 8px;
+  box-sizing: border-box;
+  font-size: 12px;
+}
+.worksTargetCon > div {
+  margin-bottom: 10px;
+}
+.worksTargetCon > div:last-child {
+  margin: 0 !important;
+}
+.stageTit {
+  text-align: left;
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 20px;
+  color: rgba(242, 161, 75, 1);
+  border-left: 5px rgba(242, 161, 75, 1) solid;
+  padding-left: 5px;
+}
+.taskTitInd {
+  font-size: 14px;
+}
+.TitBti {
+  background-color: rgba(242, 161, 75, 1);
+  color: #fff;
+  padding: 3px 5px;
+  border-radius: 4px;
+  margin-right: 5px;
+  box-sizing: border-box;
+  font-size: 12px;
+  height: 22px;
+  line-height: 16px;
+  text-align: center;
+}
+.taskTitInd span:nth-child(2) {
+  color: rgba(0, 0, 0, 0.9);
+  font-weight: 600;
+}
+.taskBri {
+  width: 100%;
+  background-color: rgba(253, 247, 243, 1);
+  padding: 10px 12px;
+  line-height: 20px;
+  box-sizing: border-box;
+  font-weight: PingFang SC;
+  font-size: 12px;
+  font-weight: 400;
+  border-radius: 4px;
+}
+.toolBlk {
+  display: flex;
+  height: 44px;
+  padding-left: 5px;
+  box-sizing: border-box;
+  margin: 15px 0;
+}
+.toolBlk img {
+  height: 100%;
+  margin-right: 8px;
+}
+.toolTit {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.toolTit div:nth-child(1) {
+  font-family: PingFang SC;
+  font-size: 14px;
+  font-weight: 600;
+  text-align: left;
+  color: rgba(0, 0, 0, 0.9);
+  margin-right: 10px;
+}
+.toolTit div:nth-child(2) {
+  font-family: PingFang SC;
+  font-size: 10px;
+  font-weight: 400;
+  text-align: left;
+  color: rgba(0, 0, 0, 0.9);
+}
+.answerTxt {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.6);
+  font-weight: 400;
+  line-height: 30px;
+}
+.taskSco {
+  background-color: rgba(253, 247, 243, 1);
+  border-radius: 8px;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  margin: 15px 0 8px 25px;
+  width: 550px;
+}
+.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: 12px;
+  margin-bottom: 10px;
+  color: rgba(0, 0, 0, 0.9);
+  border-left: 5px rgba(242, 161, 75, 1) solid;
+  padding-left: 5px;
+}
+.WorkCon {
+  background-color: rgba(255, 255, 255, 0.9);
+  padding: 8px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  font-family: PingFang SC;
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 400;
+  flex: 1;
+}
+.WorkConSY {
+  background-color: rgba(255, 255, 255, 0.9);
+  padding: 8px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  font-family: PingFang SC;
+  font-size: 12px;
+  font-weight: 400;
+  width: 100%;
+  /* flex: 1; */
+}
+.WorkConSY div {
+  margin-bottom: 8px;
+}
+.WorkConSY div:last-child {
+  margin-bottom: 0;
+}
+</style>

+ 14 - 11
src/components/pages/components/worksDetail2.vue

@@ -261,7 +261,6 @@
 
 
         <el-dialog
-          title="查看作业"
           :visible.sync="dialogVisible3"
           :append-to-body="true"
           :before-close="handleClose"
@@ -272,16 +271,10 @@
         >
           <div slot="title" class="header-title">
             <div style="color: #fff">查看&批改</div>
-            <!-- <div style="position: absolute; top: 14px; right: 50px">
-              <img
-                src="../../../assets/full.png"
-                style="height: 14px; cursor: pointer"
-                alt=""
-                @click="fullTools"
-              />
-            </div> -->
           </div>
-          <div class="zyBoxC" ref="reportPdf">
+          <LookWork v-if="DState == 5" :id="id" :studentId="studentId" :key="studentId"></LookWork>
+
+          <div v-else class="zyBoxC" ref="reportPdf">
             <div class="courseTitle" v-if="allWorks.course">
               <div class="txName">
                 <div class="tx"><img :src="tx" alt="" /></div>
@@ -294,7 +287,7 @@
                   @click="getPdf"
                   >导出作业集</el-button
                 >
-              </div>
+          </div>
 
               <div class="topButton" v-if="tableData.length > 1">
                 <div>学生切换:</div>
@@ -1455,6 +1448,7 @@
         ></el-pagination>
       </div>
     </div>
+
     <el-dialog :visible.sync="pictureDialog" size="tiny">
       <img width="100%" :src="dialogImageUrl" alt />
     </el-dialog>
@@ -1579,9 +1573,11 @@ import htmlDocx from "html-docx-js/dist/html-docx";
 import saveAs from "file-saver";
 import html2canvas from "html2canvas";
 import jspdf from "jspdf";
+import LookWork from "./lookWork.vue";
 export default {
   components: {
     StudentData,
+    LookWork,
     pdf,
     exportWorksDialog
   },
@@ -2130,8 +2126,15 @@ export default {
       // this.getWorks();
     },
     lookWork(id, uid, type, index,con) {
+      console.log('con',con);
+
+     
+      
       this.scopeId1 = id;
       this.studentId = uid;
+      if (this.DState == 5) return this.dialogVisible3 = true
+      
+
       let params = {
         uid: uid,
         cid: this.id,