Merge branch 'master' of https://git.cocorobo.cn/CocoRoboLabs/pbl-teacher-table

src/components/pages/components/worksDetail2.vue

@@ -26,7 +26,11 @@
         chooseTask-->
         <div class="student_search">
           <div>课程筛选</div>
-          <el-select v-model="chooseDy" placeholder="请选择阶段" @change="searchWork1">
+          <el-select
+            v-model="chooseDy"
+            placeholder="请选择阶段"
+            @change="searchWork1"
+          >
             <el-option label="所有阶段" value></el-option>
             <el-option
               v-for="(item, index) in dyList"
@@ -35,10 +39,16 @@
               :value="item.id"
             ></el-option>
           </el-select>
-          <el-select v-model="chooseTask" placeholder="请选择任务" @change="searchWork2">
+          <el-select
+            v-model="chooseTask"
+            placeholder="请选择任务"
+            @change="searchWork2"
+          >
             <el-option label="所有任务" value></el-option>
             <el-option
-              v-for="(item, index) in dyList[chooseDy] ? dyList[chooseDy].taskList :[]"
+              v-for="(item, index) in dyList[chooseDy]
+                ? dyList[chooseDy].taskList
+                : []"
               :key="index"
               :label="item.name"
               :value="item.id"
@@ -61,32 +71,96 @@
           :row-class-name="tableRowClassName"
           stripe
         >
-          <el-table-column prop="sName" label="姓名" min-width="15" align="center"></el-table-column>
-          <el-table-column prop="class" label="班级" min-width="20" align="center">
+          <el-table-column
+            prop="sName"
+            label="姓名"
+            min-width="15"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            prop="class"
+            label="班级"
+            min-width="20"
+            align="center"
+          >
             <template slot-scope="scope">
-              <div>{{scope.row.class ? scope.row.class :'暂无班级' }}</div>
+              <div>{{ scope.row.class ? scope.row.class : "暂无班级" }}</div>
             </template>
           </el-table-column>
-          <el-table-column prop="course" label="项目" min-width="20" align="center"></el-table-column>
-          <el-table-column prop="course" label="阶段" min-width="20" align="center">
+          <el-table-column
+            prop="course"
+            label="项目"
+            min-width="20"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            prop="course"
+            label="阶段"
+            min-width="20"
+            align="center"
+          >
             <template slot-scope="scope">
-              <div>{{dyList.length > 0 ? dyList[scope.row.stage].name:''}}</div>
+              <div>
+                {{ dyList.length > 0 ? dyList[scope.row.stage].name : "" }}
+              </div>
             </template>
           </el-table-column>
-          <el-table-column prop="course" label="任务" min-width="20" align="center">
+          <el-table-column
+            prop="course"
+            label="任务"
+            min-width="20"
+            align="center"
+          >
             <template slot-scope="scope">
-              <div>{{dyList.length > 0 ? dyList[scope.row.stage].taskList[scope.row.task].name :'' }}</div>
+              <div>
+                {{
+                  dyList.length > 0
+                    ? dyList[scope.row.stage].taskList[scope.row.task].name
+                    : ""
+                }}
+              </div>
             </template>
           </el-table-column>
-          <el-table-column prop="time" label="时间" width="200px" align="center"></el-table-column>
+          <el-table-column
+            prop="time"
+            label="时间"
+            width="200px"
+            align="center"
+          ></el-table-column>
           <el-table-column label="操作" width="200px">
             <template slot-scope="scope">
               <el-button
                 type="primary"
                 size="small"
-                @click="lookWork(scope.row.id, scope.row.userid,scope.row.stage,scope.row.task)"
-              >查看作业</el-button>
-              <el-button type="primary" size="small" @click="lookData(scope.row.userid)">生成报告</el-button>
+                @click="
+                  lookWork(
+                    scope.row.id,
+                    scope.row.userid,
+                    scope.row.stage,
+                    scope.row.task
+                  )
+                "
+                >查看作业</el-button
+              >
+              <!-- <el-button
+                type="primary"
+                size="small"
+                @click="lookData(scope.row.userid)"
+                >生成报告</el-button
+              > -->
+              <el-button
+                type="primary"
+                size="small"
+                @click="
+                  lookWork2(
+                    scope.row.id,
+                    scope.row.userid,
+                    scope.row.stage,
+                    scope.row.task
+                  )
+                "
+                >导出报告</el-button
+              >
               <!-- <el-button
                 class="de_button"
                 type="primary"
@@ -102,33 +176,46 @@
           :append-to-body="true"
           :before-close="handleClose"
           width="1000px"
-          class=" dialog_diy2"
+          class="dialog_diy2"
         >
           <div class="zyBoxC">
-            <div class="courseTitle"  v-if="sInfo.course">
+            <div class="courseTitle" v-if="sInfo.course">
               <div class="course_t">
-                <span>{{ "第" + (sInfo.stage + 1) + "阶段 " + dyList[sInfo.stage].name }}</span>
+                <span>{{
+                  "第" + (sInfo.stage + 1) + "阶段 " + dyList[sInfo.stage].name
+                }}</span>
                 <!-- <span>{{ "任务"+(sInfo.task + 1)+' ' + dyList[sInfo.stage].taskList[sInfo.task].name }}</span> -->
               </div>
-              <span>{{ "任务"+(sInfo.task + 1)+' ' + dyList[sInfo.stage].taskList[sInfo.task].name }}-{{sInfo.sName}}</span>
+              <span
+                >{{
+                  "任务" +
+                  (sInfo.task + 1) +
+                  " " +
+                  dyList[sInfo.stage].taskList[sInfo.task].name
+                }}-{{ sInfo.sName }}</span
+              >
               <!-- <span v-if="item.askJson" @click="checkAsk(item.askJson)">查看问卷</span> -->
             </div>
             <div class="zyBox">
               <div class="left">
                 <div class="left_top">
-                  <div class="bigImg" v-if="worksDetail.img && worksDetail.img.length">
+                  <div
+                    class="bigImg"
+                    v-if="worksDetail.img && worksDetail.img.length"
+                  >
                     <img :src="worksDetail.img[worksDetail.imgIndex].src" alt />
                   </div>
-                  <div class="thumbnail" v-if="worksDetail.img && worksDetail.img.length">
+                  <div
+                    class="thumbnail"
+                    v-if="worksDetail.img && worksDetail.img.length"
+                  >
                     <div
-                      v-for="(item,index) in worksDetail.img"
+                      v-for="(item, index) in worksDetail.img"
                       :key="index"
                       :class="worksDetail.imgIndex == index ? 'isClick' : ''"
                     >
                       <img
-                        :src="
-                        item.src
-                      "
+                        :src="item.src"
                         alt
                         @click="worksDetail.imgIndex = index"
                       />
@@ -143,12 +230,20 @@
                   >{{ "任务"+(sInfo.task + 1)+' ' + dyList[sInfo.stage].taskList[sInfo.task].name }}</div>-->
                   <div class="ask_Answer" v-if="worksDetail.askInfo">
                     <div class="ask_Answer_title">问卷调查</div>
-                    <div class="ask_Answer_content" v-if="!worksDetail.askInfo.length">暂无提交问卷</div>
+                    <div
+                      class="ask_Answer_content"
+                      v-if="!worksDetail.askInfo.length"
+                    >
+                      暂无提交问卷
+                    </div>
                     <div class="ask_body" v-else>
-                      <div v-for="(item,index) in worksDetail.askInfo" :key="index">
+                      <div
+                        v-for="(item, index) in worksDetail.askInfo"
+                        :key="index"
+                      >
                         <span>
                           问卷-
-                          {{item.askTitle}}
+                          {{ item.askTitle }}
                         </span>
                         <span class="btn" @click="checkAsk(item)">查看</span>
                         <!-- <span
@@ -160,10 +255,20 @@
                 </div>
               </div>
               <div style="width: 310px; margin-right: 10px">
-                <div class="sd_score" style="box-sizing: border-box; width: 100%; box-shadow: none">
-                  <div class="score_box" v-for="(item,index) in worksDetail.eList" :key="index">
-                    <span>{{item.value}}</span>
-                    <el-rate style="min-width: 120px;" v-model="worksDetail.rateList[item.value]"></el-rate>
+                <div
+                  class="sd_score"
+                  style="box-sizing: border-box; width: 100%; box-shadow: none"
+                >
+                  <div
+                    class="score_box"
+                    v-for="(item, index) in worksDetail.eList"
+                    :key="index"
+                  >
+                    <span>{{ item.value }}</span>
+                    <el-rate
+                      style="min-width: 120px"
+                      v-model="worksDetail.rateList[item.value]"
+                    ></el-rate>
                   </div>
                   <!-- <div class="score_box">
                     <span>意识能力</span>
@@ -188,7 +293,7 @@
                 </div>
                 <div class="data_body">
                   <div class="title">
-                    <span style="font-size: 18px;">量规评分</span>
+                    <span style="font-size: 18px">量规评分</span>
                   </div>
                   <div style="width: 100%">
                     <!-- <img src="../../../assets/dataimage/1.png" style="width:90%" /> -->
@@ -202,16 +307,21 @@
               <div class="right">
                 <div class="comment" v-if="worksDetail.answerInfo">
                   <div class="comment_title">问答</div>
-                  <div class="other_Answer" v-if="!worksDetail.answerInfo.length">暂无提交问答</div>
+                  <div
+                    class="other_Answer"
+                    v-if="!worksDetail.answerInfo.length"
+                  >
+                    暂无提交问答
+                  </div>
                   <div class="comment_body" v-else>
                     <div
                       class="answer_body"
-                      v-for="(item,index) in worksDetail.answerInfo"
+                      v-for="(item, index) in worksDetail.answerInfo"
                       :key="index"
                     >
                       <div class="answer_title">
                         <span>提问：</span>
-                        {{item.answerTitle}}
+                        {{ item.answerTitle }}
                       </div>
                       <div class="answer_content" v-html="item.answer"></div>
                     </div>
@@ -302,7 +412,11 @@
         </div>
         <div class="a_addBox">
           <div style="font-size: 16px; color: #c7c7c7">问卷内容</div>
-          <div class="a_add_box" v-for="(item, index) in askJson.askJson" :key="index">
+          <div
+            class="a_add_box"
+            v-for="(item, index) in askJson.askJson"
+            :key="index"
+          >
             <div class="a_add_head">
               <div style="display: flex">
                 {{ index + 1 + "、" }}
@@ -318,7 +432,8 @@
                     :label="checkIndex1"
                     class="redioStyle"
                     disabled
-                  >{{ item3 }}</el-radio>
+                    >{{ item3 }}</el-radio
+                  >
                 </el-radio-group>
               </div>
             </div>
@@ -326,7 +441,9 @@
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="dialogVisible4 = false">关 闭</el-button>
+        <el-button type="primary" @click="dialogVisible4 = false"
+          >关 闭</el-button
+        >
       </span>
     </el-dialog>
   </div>
@@ -826,6 +943,216 @@ export default {
       this.playerO = this.playerOptions;
     },
     onPlayerPlay() {},
+    // this.$store.commit("update", ["userInfo", userInfo]);
+    lookWork2(id, uid, stage, task) {
+      // this.scopeId = id;
+      let params = {
+        uid: uid,
+        cid: this.id,
+        stage: stage,
+        task: task,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectWorksDetail2", params)
+        .then((res) => {
+          this.sInfo = res.data[0][0];
+          this.chapInfo = JSON.parse(res.data[0][0].chapters);
+          var chapters = JSON.parse(res.data[0][0].chapters);
+          var worksDetail = res.data[1];
+          // var askArray = res.data[2];
+          this.scopeId = res.data[2].length ? res.data[2][0].id : this.sInfo.id;
+          var askInfo = res.data[3];
+          var answerInfo = res.data[4];
+          var workJson = {
+            img: [],
+            imgIndex: 0,
+            eList: [],
+            rateList: {},
+            askInfo: [],
+            answerInfo: [],
+          };
+          var eList =
+            chapters[this.sInfo.stage].chapterInfo[0].taskJson[this.sInfo.task]
+              .eList;
+          //           ooption: [
+          //   { value: 0, name: "意识能力" },
+          //   { value: 0, name: "科学探究能力" },
+          //   { value: 0, name: "实践创新能力" },
+          //   { value: 0, name: "学习反思能力" },
+          //   { value: 0, name: "工程思维能力" },
+          // ],
+          var _ooption = [];
+          if (eList) {
+            workJson.eList = eList;
+            for (var i = 0; i < eList.length; i++) {
+              _ooption.push({ value: 0, name: eList[i].value });
+              workJson.rateList[eList[i].value] = 0;
+            }
+            workJson.rateList.content = "";
+            this.ooption = _ooption;
+          } else {
+            workJson.eList = [
+              { value: "意识能力", detail: "", score: 5 },
+              { value: "科学探究能力", detail: "", score: 5 },
+              { value: "实践创新能力", detail: "", score: 5 },
+              { value: "学习反思能力", detail: "", score: 5 },
+              { value: "工程思维能力", detail: "", score: 5 },
+            ];
+            for (var i = 0; i < workJson.eList.length; i++) {
+              _ooption.push({ value: 0, name: workJson.eList[i].value });
+              workJson.rateList[workJson.eList[i].value] = 0;
+            }
+            workJson.rateList.content = "";
+            this.ooption = [
+              { value: 0, name: "意识能力" },
+              { value: 0, name: "科学探究能力" },
+              { value: 0, name: "实践创新能力" },
+              { value: 0, name: "学习反思能力" },
+              { value: 0, name: "工程思维能力" },
+            ];
+          }
+          if (this.sInfo.rate) {
+            var _rate = JSON.parse(this.sInfo.rate);
+            var _rateList = Object.keys(JSON.parse(this.sInfo.rate));
+            for (var i = 0; i < _rateList.length; i++) {
+              var _c = Object.keys(workJson.rateList);
+              if (_c.indexOf(_rateList[i]) != -1) {
+                workJson.rateList[_rateList[i]] = _rate[_rateList[i]];
+              }
+            }
+            for (var i = 0; i < this.ooption.length; i++) {
+              if (_rateList.indexOf(this.ooption[i].name) != -1) {
+                this.ooption[i].value = _rate[this.ooption[i].name];
+              }
+            }
+          }
+
+          for (var i = 0; i < worksDetail.length; i++) {
+            workJson.img.push({ src: worksDetail[i].content, id: i });
+          }
+          for (var i = 0; i < askInfo.length; i++) {
+            const element = askInfo[i];
+            let a = JSON.parse(element.content)[0];
+            let b = a.anwer.split(",");
+            let c = [];
+            for (var j = 0; j < b.length; j++) {
+              c.push(parseInt(b[j]));
+            }
+            a.askJson.radio = c;
+            a.askJson.time = element.time;
+            workJson.askInfo.push(a.askJson);
+          }
+
+          for (var i = 0; i < answerInfo.length; i++) {
+            const element = answerInfo[i];
+            workJson.answerInfo.push(JSON.parse(element.content)[0]);
+          }
+
+          this.worksDetail = workJson;
+
+          this.courseDetail = res.data[0][0];
+
+          this.$forceUpdate;
+
+          var _course = `<h1>${this.sInfo.course}</h1>`;
+          var _title =
+            "<h2>" +
+            "第" +
+            (this.sInfo.stage + 1) +
+            "阶段 " +
+            this.dyList[this.sInfo.stage].name +
+            "</h2>";
+          var _subtitle =
+            "<h3>" +
+            "任务" +
+            (this.sInfo.task + 1) +
+            " " +
+            this.dyList[this.sInfo.stage].taskList[this.sInfo.task].name +
+            "-" +
+            this.sInfo.sName +
+            "</h3>";
+          var _img = "";
+          for (var i = 0; i < workJson.img.length; i++) {
+            _img += `<div style="margin-top:10px"><div>图片${
+              i + 1
+            }</div><img style="max-width:500px" src="${workJson.img[i].src}"/></div>`;
+          }
+
+          if (workJson.askInfo.length > 0) {
+            var _ask = "<h3>问卷调查</h3>";
+            for (var i = 0; i < workJson.askInfo.length; i++) {
+              var _div = document.createElement("div");
+              _div.innerHTML = `<h4>问卷标题:${workJson.askInfo[i].askTitle}</h4>`;
+              for (var j = 0; j < workJson.askInfo[i].askJson.length; j++) {
+                var _div2 = document.createElement("div");
+                _div2.innerHTML = `<h5>第${j + 1}题:${
+                  workJson.askInfo[i].askJson[j].askstitle
+                }  选择:${workJson.askInfo[i].radio[j]}</h5> `;
+                var _div3 = document.createElement("div");
+                for (
+                  var z = 0;
+                  z < workJson.askInfo[i].askJson[j].checkList.length;
+                  z++
+                ) {
+                  _div3.innerHTML += `<span style="margin-right:5px">${z + 1}.${
+                    workJson.askInfo[i].askJson[j].checkList[z]
+                  }</span>`;
+                }
+                _div2.innerHTML += `<div>${_div3.innerHTML}</div>`;
+                _div.innerHTML += `<div>${_div2.innerHTML}</div>`;
+              }
+              _ask += `<div>${_div.innerHTML}</div>`;
+            }
+          }
+
+          if (workJson.answerInfo.length > 0) {
+            var _answer = "<h3>问答</h3>";
+            for (var i = 0; i < workJson.answerInfo.length; i++) {
+              var _div = document.createElement("div");
+              _div.innerHTML = `<h4>问答：${workJson.answerInfo[i].answerTitle}</h4>`;
+              _div.innerHTML += `<div>${workJson.answerInfo[i].answer}</div>`;
+              _answer += `<div>${_div.innerHTML}</div>`;
+            }
+          }
+
+          var _html = _course + _title + _subtitle + _img + _ask + _answer;
+          this.generate(_html);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    async generate(a) {
+      // 将html文件中需要用到的数据挂载到store上
+      this.$store.commit("update", ["report", a]);
+      console.log(this.$store.state.report);
+      const content = `<!DOCTYPE html>
+      <html lang="en">
+      <head>
+          <meta charset="UTF-8">
+          <meta http-equiv="X-UA-Compatible" content="IE=edge">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>报告</title>
+      </head>
+      <body>
+      ${this.$store.state.report}
+      </body>
+      </html>`;
+      // debugger
+      //生成报告
+      const link = document.createElement("a");
+      link.download = "报告.html"; // 文件名
+      link.style.display = "none";
+      // 创建文件流
+      // 创建bolb实例时，内容一定要放在[]中
+      const blob = new Blob([content], {
+        type: "text/plain;charset='utf-8'",
+      });
+      link.href = window.URL.createObjectURL(blob);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    },
   },
   created() {
     this.page = 1;
@@ -1294,9 +1621,11 @@ export default {
 
 .thumbnail > div {
   width: 80px;
+  height: 80px;
   margin-right: 5px;
   cursor: pointer;
   flex-shrink: 0;
+  box-sizing: border-box;
 }
 
 .zyBoxC {

src/config/config.js

@@ -9,6 +9,7 @@ const store = new Vuex.Store({
         luyou: 1,
         userInfo: {},
         nCount: 0,
+        report:"",
         api: 'https://pbl.cocorobo.cn/api/pbl/',
         socket: "https://poll.cocorobo.cn",
         // socket: "http://localhost:1473",