作业

src/components/pages/components/worksDetail2.vue

@@ -97,45 +97,65 @@
           </el-table-column>
         </el-table>
         <el-dialog
+          title="查看作业"
           :visible.sync="dialogVisible3"
           :append-to-body="true"
           :before-close="handleClose"
-          class="add_work"
+          class=" dialog_diy2"
         >
           <div class="zyBoxC">
-            <div class="courseTitle">
-              <span
-                v-if="sInfo.course"
-              >{{ "第" + (sInfo.stage + 1) + "阶段 " + dyList[sInfo.stage].name }}</span>
+            <div class="courseTitle"  v-if="sInfo.course">
+              <div class="course_t">
+                <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 v-if="item.askJson" @click="checkAsk(item.askJson)">查看问卷</span> -->
             </div>
             <div class="zyBox">
               <div class="left">
-                <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
-                    v-for="(item,index) in worksDetail.img"
-                    :key="index"
-                    :class="worksDetail.imgIndex == index ? 'isClick' : ''"
-                  >
-                    <img
-                      :src="
+                <div class="left_top">
+                  <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
+                      v-for="(item,index) in worksDetail.img"
+                      :key="index"
+                      :class="worksDetail.imgIndex == index ? 'isClick' : ''"
+                    >
+                      <img
+                        :src="
                         item.src
                       "
-                      alt
-                      @click="worksDetail.imgIndex = index"
-                    />
+                        alt
+                        @click="worksDetail.imgIndex = index"
+                      />
+                    </div>
                   </div>
+                  <div class="work_nopicture" v-else>暂无上传截图</div>
                 </div>
-                <div
-                  class="task_title"
-                  v-if="sInfo.course"
-                >{{ "任务"+(sInfo.task + 1)+' ' + dyList[sInfo.stage].taskList[sInfo.task].name }}</div>
-                <div class="ask_Answer">
-                  <div class="ask_Answer_title">问卷调查</div>
-                  <div class="ask_Answer_content">暂无提交问卷</div>
+                <div class="left_bottom">
+                  <!-- <div
+                    class="task_title"
+                    v-if="sInfo.course"
+                  >{{ "任务"+(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_body" v-else>
+                      <div v-for="(item,index) in worksDetail.askInfo" :key="index">
+                        <span>
+                          问卷-
+                          {{item.askTitle}}
+                        </span>
+                        <span class="btn" @click="checkAsk(item)">查看</span>
+                        <!-- <span
+                          style="margin-left:10px"
+                        >{{item.time}}</span>-->
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
               <div style="width: 310px; margin-right: 10px">
@@ -167,7 +187,7 @@
                 </div>
                 <div class="data_body">
                   <div class="title">
-                    <span>量规评分</span>
+                    <span style="font-size: 18px;">量规评分</span>
                   </div>
                   <div style="width: 100%">
                     <!-- <img src="../../../assets/dataimage/1.png" style="width:90%" /> -->
@@ -179,11 +199,25 @@
                 </div>
               </div>
               <div class="right">
-                <div class="comment">
+                <div class="comment" v-if="worksDetail.answerInfo">
                   <div class="comment_title">问答</div>
-                  <div class="other_Answer">暂无提交问答</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"
+                      :key="index"
+                    >
+                      <div class="answer_title">
+                        <span>提问：</span>
+                        {{item.answerTitle}}
+                      </div>
+                      <div class="answer_content" v-html="item.answer"></div>
+                    </div>
+                  </div>
                 </div>
                 <div
+                  v-if="false"
                   class="lastTop"
                   style="
                     width: 100%;
@@ -510,11 +544,15 @@ export default {
           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]
@@ -567,8 +605,7 @@ export default {
             }
             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];
+                this.ooption[i].value = _rate[this.ooption[i].name];
               }
             }
           }
@@ -576,10 +613,28 @@ export default {
           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;
           this.dialogVisible3 = true;
 
@@ -741,17 +796,20 @@ export default {
           var _ooption = JSON.parse(JSON.stringify(this.ooption));
           var _option = JSON.parse(JSON.stringify(this.option));
 
-          // _ooption[0].value = rate.ca;
-          // _ooption[1].value = rate.sia;
-          // _ooption[2].value = rate.eta;
-          // _ooption[3].value = rate.pia;
-          // _ooption[4].value = rate.lra;
-          // if (this.chartObj[index]) {
-          //   _option.series[0].data = _ooption;
-          //   this.chartObj[index].setOption(_option);
-          // } else {
-          //   this.setChart(index, _ooption);
-          // }
+          var _rate = this.worksDetail.rateList;
+          var _rateList = Object.keys(this.worksDetail.rateList);
+          for (var i = 0; i < _ooption.length; i++) {
+            if (_rateList.indexOf(_ooption[i].name) != -1) {
+              _ooption[i].value = _rate[_ooption[i].name];
+            }
+          }
+
+          if (this.chartObj) {
+            _option.series[0].data = _ooption;
+            this.chartObj.setOption(_option);
+          } else {
+            this.setChart(_ooption);
+          }
           // this.uploadBoolean = false;
           // this.dialogVisible2 = false;
         })
@@ -969,12 +1027,17 @@ export default {
   height: 75%;
   max-height: 330px; */
   overflow: auto;
-  height: 290px;
+  /* height: 290px; */
+  height: 525px;
   background: #fff;
   border-radius: 5px;
   padding: 10px;
   box-sizing: border-box;
 }
+.comment_body {
+  height: calc(100% - 25px);
+  overflow: auto;
+}
 .comment > .comment_title {
   font-size: 18px;
 }
@@ -1138,9 +1201,9 @@ export default {
 
 .left,
 .right {
-  background: #fff;
+  /* background: #fff; */
   border-radius: 5px;
-  padding: 10px;
+  /* padding: 10px; */
   box-sizing: border-box;
 }
 
@@ -1153,36 +1216,58 @@ export default {
   width: 450px;
   min-height: 425px;
 }
-
+.left .left_top {
+  background: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  margin-bottom: 15px;
+}
+.left .left_bottom {
+  background: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  height: 168px;
+}
 .right {
   /* width: 40%;
   height: 75%;
   min-width: 230px;
   min-height: 370px; */
-  width: 25%;
+  /* width: 25%; */
+  width: 32%;
   /* margin-right: 10px; */
   background: none;
   padding: 0;
 }
 
 .courseTitle {
-  font-size: 19px;
+  font-size: 16px;
   font-weight: 600;
-  width: 93%;
+  width: 100%;
   margin-bottom: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+.course_t {
+  font-size: 19px;
+  display: flex;
+  align-items: flex-end;
+}
+.course_t span:nth-child(2) {
+  font-size: 16px;
+  margin-left: 10px;
+}
 
 .courseTitle span:nth-child(2) {
-  font-size: 14px;
-  cursor: pointer;
+  /* font-size: 14px;
+  cursor: pointer; */
 }
 
 .bigImg {
   margin-top: 10px;
-  height: 300px;
+  /* height: 300px; */
+  height: 268px;
 }
 
 .bigImg > img,
@@ -1297,6 +1382,29 @@ export default {
 .dialog_diy >>> .el-dialog__footer {
   background: #fafafa;
 }
+
+.dialog_diy2 >>> .el-dialog__header {
+  padding: 9px 20px 10px;
+  background: #32455b !important;
+}
+.dialog_diy2 >>> .el-dialog__title {
+  color: #fff;
+  font-size: 15px;
+}
+.dialog_diy2 >>> .el-dialog__headerbtn {
+  top: 14px;
+}
+.dialog_diy2 >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+.dialog_diy2 >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+.dialog_diy2 >>> .el-dialog__body,
+.dialog_diy2 >>> .el-dialog__footer {
+  background: #ededed;
+  padding: 15px 20px;
+}
 .a_addBox2 {
   margin: 10px 0;
   background: #fff;
@@ -1351,7 +1459,7 @@ export default {
   font-weight: 700;
 }
 .ask_Answer {
-  margin-top: 10px;
+  /* margin-top: 10px; */
 }
 .ask_Answer_title {
   font-size: 18px;
@@ -1361,4 +1469,58 @@ export default {
   justify-content: center;
   margin: 10px 0;
 }
+
+.answer_body {
+  padding: 10px 0;
+  border-bottom: 1px solid #f5f5f5;
+}
+.answer_title {
+  font-size: 15px;
+  font-weight: 700;
+}
+.answer_content {
+  margin-top: 5px;
+}
+.ask_body {
+  display: flex;
+  font-size: 16px;
+  margin-top: 10px;
+  flex-direction: column;
+  height: 130px;
+  overflow: auto;
+  /* padding: 0 10px; */
+  box-sizing: border-box;
+}
+.ask_body div {
+  /* cursor: pointer; */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.ask_body div .btn {
+  cursor: pointer;
+  color: #fff;
+  background-color: #409eff;
+  text-align: center;
+  font-size: 12px;
+  padding: 6px 12px;
+  box-sizing: border-box;
+  border-radius: 5px;
+}
+.ask_body div span:nth-child(1) {
+  max-width: 250px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ask_body div + div {
+  margin-top: 10px;
+}
+.work_nopicture {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* height: 350px; */
+  height: 352px;
+}
 </style>