统计和评一评

src/components/components/askStatic.vue

@@ -0,0 +1,168 @@
+<template>
+  <div
+    class="sjBox"
+    v-if="askJSONC && askJSONC.askJson"
+  >
+    <div class="a_add_title">
+      <div style="font-size: 25px">{{ askJSONC.askJson.askTitle }}</div>
+    </div>
+    <div class="a_addBox">
+      <div
+        class="a_add_box"
+        v-for="(item, index) in askJSONC.askJson.askJson"
+        :key="index"
+      >
+        <div class="a_add_head">
+          <div>
+            <span>{{ index + 1 + "、" + item.askstitle }}</span>
+          </div>
+        </div>
+        <div class="a_add_body">
+          <div class="a_add_input width100">
+            <div class="a_add_persent a_add_persent_div a_add_persent_title">
+              <span>选项</span><span>小计</span><span>比列</span>
+            </div>
+            <div class="a_add_persent">
+              <div
+                class="a_add_persent_div"
+                v-for="(item1, checkIndex) in item.askItem"
+                :key="checkIndex"
+              >
+                <span>{{ item.checkList[checkIndex] }}</span>
+                <span>{{
+                  checkJson[index].checkCount[checkIndex]
+                    ? checkJson[index].checkCount[checkIndex]
+                    : 0
+                }}</span>
+                <span>
+                  <el-progress
+                    :percentage="
+                      checkJson[index].checkPerent[checkIndex]
+                        ? checkJson[index].checkPerent[checkIndex]
+                        : 0
+                    "
+                    :show-text="false"
+                  ></el-progress>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["askJSON", "checkJson"],
+  data() {
+    return {
+      askJSONC: {},
+    };
+  },
+  watch: {
+    askJSON(val) {
+      this.askJSONC = JSON.parse(val);
+    },
+  },
+  mounted() {
+    this.askJSONC = this.askJSON ? JSON.parse(this.askJSON)[0] : {};
+  },
+};
+</script>
+
+<style>
+.sjBox {
+  margin-top: 25px;
+  height: 420px;
+  overflow: auto;
+}
+.a_addBox {
+  margin: 20px 0;
+  background: #fff;
+}
+.a_add_box {
+  border-bottom: 2px solid #eee;
+  padding-bottom: 10px;
+}
+
+.a_add_head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px 0;
+  font-size: 18px;
+}
+.a_add_head .a_add_head_input {
+  width: 300px;
+}
+.a_add_head .a_add_head_div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.a_add_head_div img {
+  cursor: pointer;
+  width: 23px;
+}
+.a_add_head_div img + img {
+  margin-left: 10px;
+}
+.a_add_body {
+  display: flex;
+  align-items: center;
+}
+.a_add_input {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  /* flex-direction: column; */
+  /* width: 100%; */
+}
+.width100 {
+  width: 100%;
+}
+.a_add_input .a_add_persent {
+  /* display: flex; */
+  /* flex-direction: column; */
+  width: 100%;
+}
+.a_add_persent_div {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.a_add_persent_div span {
+  margin: 5px 0;
+}
+.a_add_persent_div span:nth-child(1) {
+  width: 30%;
+}
+.a_add_persent_div span:nth-child(2) {
+  width: 7%;
+}
+.a_add_persent_div span:nth-child(3) {
+  width: 40%;
+}
+
+.sjBox::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.sjBox::-webkit-scrollbar {
+  border-radius: 10px;
+  background-color: #eee;
+}
+
+/*定义滑块 内阴影+圆角*/
+.sjBox::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, 0.1);
+}
+</style>

src/components/courseDetail.vue

@@ -36,7 +36,10 @@
               />
             </div>
             <div class="right_box">
-              <div class="right_box_title">{{ courseDetail.title }}</div>
+              <div class="rightT">
+                <div class="right_box_title">{{ courseDetail.title }}</div>
+                <div class="jd">{{ chapInfo.length }}阶段</div>
+              </div>
               <div class="people">
                 <div class="man">
                   <img src="../assets/people.png" alt />
@@ -74,14 +77,11 @@
           </div>
         </div>
         <div class="student_body">
-          <div
-            style="
-              width: 20%;
-              margin-right: 10px;
-              background: #fff;
-              padding-right: 10px;
-            "
-          >
+          <div class="sLeft" v-if="courseDetail.brief">
+            <div class="courseT">项目详情</div>
+            <div class="courseTd">{{ courseDetail.brief }}</div>
+          </div>
+          <div :class="courseDetail.brief != '' ? 'rightTd' : 'noBRight'">
             <div
               class="blue_box_one"
               v-for="(item, index) in chapInfo"
@@ -90,43 +90,9 @@
             >
               <div>第{{ index + 1 }}阶段</div>
               <div :title="item.dyName">{{ item.dyName }}</div>
+              <div>{{ item.chapterInfo[0].taskJson.length }}个任务</div>
             </div>
           </div>
-          <div style="width: 80%; background: #fff">
-            <div class="choose_who">
-              <div
-                class="who_choose"
-                :class="choose == 0 ? 'choose' : ''"
-                @click="choose = 0"
-              >
-                项目详情
-              </div>
-              <!-- <div
-                class="who_choose"
-                :class="choose == 1 ? 'choose' : ''"
-                @click="choose = 1"
-              >
-                项目学员
-              </div> -->
-            </div>
-            <div class="right" v-if="choose == 0">
-              <div class="nav">
-                {{
-                  courseDetail.brief != null
-                    ? courseDetail.brief
-                    : "暂无课程简介"
-                }}
-              </div>
-            </div>
-            <!-- <div class="right_one" v-else>
-              <div class="student" v-if="aStudentName.length > 0">
-                <div v-for="(item, index) in aStudentName" :key="index">
-                  {{ item.name }}
-                </div>
-              </div>
-              <div class="student" v-else>暂无课程学员</div>
-            </div> -->
-          </div>
         </div>
 
         <!-- <div
@@ -163,6 +129,7 @@
             >
               <div>第{{ index + 1 }}阶段</div>
               <div>{{ item.dyName }}</div>
+              <div>{{ item.chapterInfo[0].taskJson.length }}个任务 </div>
             </div>
           </div>
         </el-dialog>
@@ -390,7 +357,7 @@ export default {
   width: 150px;
   height: 35px;
   color: #fff;
-  background: #4a9eed;
+  background: #3d87cc;
   text-align: center;
   line-height: 35px;
   border-radius: 5px;
@@ -419,9 +386,7 @@ export default {
 .student_body,
 .right {
   width: 100%;
-  margin: 0 auto;
-  margin-top: 10px;
-  padding: 0 0 20px;
+  margin: 10px auto;
   min-height: 688px;
 }
 .nav {
@@ -513,49 +478,40 @@ export default {
   text-align: center;
   color: #fff;
   background-image: linear-gradient(90deg, #477cd7, #65b9fc);
-  border-radius: 7px;
-  margin: 10px;
+  border-radius: 15px;
+  margin: 15px 0 15px 15px;
   cursor: pointer;
 }
 .blue_box_one {
-  width: 95% !important;
-  height: 45px !important;
+  width: 250px;
+  height: 250px;
+  background-image: linear-gradient(90deg, #477cd7, #65b9fc);
   display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
+  flex-direction: column;
+  flex-wrap: nowrap;
   align-items: center;
-  background-image: linear-gradient(90deg, #477cd7, #65b9fc);
+  justify-content: center;
 }
-.blue_box > div:nth-child(1),
-.blue_box_one > div:nth-child(1) {
-  /* line-height: 65px; */
+.blue_box_one > div {
+  margin: 5px 0;
 }
 .blue_box_one > div:nth-child(1) {
-  margin: 0 5px;
-  width: 40%;
-  line-height: 30px !important;
-  border-radius: 4px;
-  background: #4e7ac6;
+  font-size: 20px;
+  font-weight: bold;
 }
 .blue_box > div:nth-child(2) {
-  /* line-height: 0px; */
   margin-top: 10px;
 }
-.blue_box_one > div:nth-child(1) {
-  line-height: 65px;
-  margin: 0 5px 0 10px;
-  width: 30%;
-  min-width: 70px;
-}
+
 .blue_box_one > div:nth-child(2) {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   word-break: break-all;
-  width: 70%;
+  width: 100%;
   text-align: left;
   max-width: calc(100% - 85px);
-  margin-right: 10px;
+  margin: 0 auto;
 }
 .return {
   background: rgb(238, 238, 238);
@@ -596,4 +552,75 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.rightT {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+.jd {
+  background: #4a9eed;
+  margin-left: 15px;
+  border-radius: 10px;
+  color: #fff;
+  width: 70px;
+  height: 25px;
+  text-align: center;
+  line-height: 25px;
+}
+.sLeft {
+  width: 14%;
+  margin-right: 10px;
+  background: rgb(255, 255, 255);
+  padding: 20px 0 0 25px;
+  border-radius: 10px;
+}
+.courseT {
+  border-left: 3px solid #4a9eed;
+  padding-left: 5px;
+}
+.courseTd {
+  padding-top: 15px;
+  width: 250px;
+  height: 700px;
+  overflow: auto;
+  max-height: 715px;
+  word-break: break-word;
+}
+
+.courseTd::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.courseTd::-webkit-scrollbar {
+  border-radius: 10px;
+  background-color: #eee;
+}
+
+/*定义滑块 内阴影+圆角*/
+.courseTd::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.rightTd,
+.noBRight {
+  width: 84%;
+  background: #fff;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  align-items: center;
+  justify-content: flex-start;
+}
+.noBRight {
+  width: 100%;
+}
 </style>

src/components/study.vue

@@ -762,30 +762,40 @@
                     >
                       作业预览
                     </div>
-                    <div
-                      class="worksDetailBox"
-                      v-if="worksStudent[toolIndex].length > 0"
-                    >
+                    <div>
                       <div
-                        class="works"
-                        style="width: 200px; height: 140px"
-                        v-for="(w, wIndex) in worksStudent[toolIndex]"
-                        :key="wIndex"
+                        class="worksDetailBox"
+                        style="width: calc(100% - 30%)"
+                        v-if="worksStudent[toolIndex].length > 0"
                       >
-                        <!-- @click="previewImg(w.works)" -->
-                        <div class="workImg">
-                          <img
-                            src="../assets/icon/works/noImg.png"
-                            @click="openTools(4, toolIndex, taskCount, w.works)"
-                            alt
-                          />
-                        </div>
-                        <div class="worksName">
-                          姓名：
-                          <span>{{ w.sName }}</span>
+                        <div
+                          class="works"
+                          style="width: 200px; height: 140px"
+                          v-for="(w, wIndex) in worksStudent[toolIndex]"
+                          :key="wIndex"
+                        >
+                          <!-- @click="previewImg(w.works)" -->
+                          <div class="workImg">
+                            <img
+                              src="../assets/icon/works/noImg.png"
+                              @click="
+                                openTools(4, toolIndex, taskCount, w.works)
+                              "
+                              alt
+                            />
+                          </div>
+                          <div class="worksName">
+                            姓名：
+                            <span>{{ w.sName }}</span>
+                          </div>
                         </div>
                       </div>
+                      <AskStatic
+                        :askJSON="worksStudent[toolIndex][0].works"
+                        :checkJson="checkJson[toolIndex]"
+                      ></AskStatic>
                     </div>
+
                     <div
                       style="
                         padding-top: 15px;
@@ -1384,6 +1394,76 @@
                 </div>-->
               </div>
             </div>
+            <div
+              class="vedioBox"
+              v-if="
+                chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+                  .eList &&
+                chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+                  .eList.length &&
+                chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+                  .eList.length > 0
+              "
+            >
+              <div
+                class="queTop"
+                style="
+                  font-size: 25px;
+                  padding: 20px 0 20px 30px;
+                  font-weight: bold;
+                "
+              >
+                <!-- <div class="question" style="width: 30px">
+                  <img src="../assets/icon/toolIcon.png" alt />
+                </div>
+                <div class="queTitle">
+                  <div>工具</div>
+                </div>-->
+                评一评
+              </div>
+              <div class="elist_input">
+                <div
+                  v-for="(eItem, eIndex) in chapInfoList[courseType]
+                    .chapterInfo[0].taskJson[taskCount].eList"
+                  :key="eIndex"
+                  class="elist_input_box"
+                >
+                  <div style="font-size: 20px; padding-bottom: 15px">
+                    评价{{ eIndex + 1 }}
+                  </div>
+                  <div>
+                    <div
+                      style="
+                        display: flex;
+                        flex-direction: row;
+                        flex-wrap: nowrap;
+                        align-items: center;
+                      "
+                    >
+                      <div>
+                        <span>评价名称：</span>
+                        <span>{{ eItem.value }} </span>
+                      </div>
+                      <div
+                        style="
+                          padding-left: 25px;
+                          display: flex;
+                          flex-direction: row;
+                          align-items: center;
+                        "
+                      >
+                        <span>评星等级：</span>
+                        <el-rate v-model="eItem.score" disabled></el-rate>
+                      </div>
+                    </div>
+                    <div class="elist_inptu_text">
+                      <span>评价描述：</span>
+                      <span>{{ eItem.detail }} </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
             <!-- <div
               class="project_box"
               style="margin-top: 15px; padding-bottom: 30px"
@@ -1806,10 +1886,11 @@
 <script>
 import "../common/aws-sdk-2.235.1.min.js";
 import pdf from "./components/pdf2";
+import AskStatic from "./components/askStatic";
 import EditorBar from "../components/tools/wangEnduit.vue";
 import Time from "../components/tools/time.vue";
 export default {
-  components: { EditorBar, Time, pdf },
+  components: { EditorBar, Time, pdf, AskStatic },
   data() {
     return {
       dialogVisible: false,
@@ -1916,6 +1997,7 @@ export default {
         askTitle: "",
         askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
       },
+      checkJson: [],
       askList: [],
       answerList: [],
       navList: [],
@@ -2067,7 +2149,6 @@ export default {
               for (var z = 0; z < this.isWorksS[i].length; z++) {
                 studentK.push(this.isWorksS[i][z].uid);
               }
-              console.log(studentK);
               studentK = studentK.join(",");
               for (var j = 0; j < a.length; j++) {
                 if (studentK.indexOf(a[j].userid) == -1) {
@@ -2137,6 +2218,23 @@ export default {
               }
             }
           }
+
+          // for (var k = 0; k < b.length; k++) {
+          //   var data = b[k];
+          //   if (data.tool == 4) {
+          //     var checkL = JSON.parse(data.content)[0].anwer.split(",");
+          //     for (var z = 0; z < checkL.length; z++) {
+          //       this.checkJson.push({ checkCount: [], checkPerent: [] });
+          //       if (!this.checkJson[z].checkCount) {
+          //         this.checkJson[z].checkCount = [];
+          //         this.checkJson[z].checkCount.length = this.askJson.askJson[z].askItem;
+          //       }
+          //       this.checkJson[z].checkCount[parseInt(checkL[z])]
+          //         ? this.checkJson[z].checkCount[parseInt(checkL[z])]++
+          //         : (this.checkJson[z].checkCount[parseInt(checkL[z])] = 1);
+          //     }
+          //   }
+          // }
         })
         .catch((err) => {
           console.error(err);
@@ -2161,8 +2259,31 @@ export default {
           for (var i = 0; i < a.length; i++) {
             this.worksStudent[i] = [];
             this.isWorksS[i] = [];
+            this.checkJson[i] = [];
             for (var j = 0; j < b.length; j++) {
+              var data = b[j];
               if (i == b[j].tool) {
+                if (data.tool == 4) {
+                  var checkL = JSON.parse(data.content)[0].anwer.split(",");
+                  for (var z = 0; z < checkL.length; z++) {
+                    if (!this.checkJson[i][z]) {
+                      this.checkJson[i].push({ checkCount: [] });
+                    }
+                    if (!this.checkJson[i][z].checkCount.length) {
+                      this.checkJson[i][z].checkCount = [];
+                      let _askItemCount = JSON.parse(data.content)[0].askJson
+                        .askJson[z].askItem;
+                      for (var aic = 0; aic < _askItemCount; aic++) {
+                        this.checkJson[i][z].checkCount.push(0);
+                      }
+                    }
+                    this.checkJson[i][z].checkCount[parseInt(checkL[z])]
+                      ? this.checkJson[i][z].checkCount[parseInt(checkL[z])]++
+                      : (this.checkJson[i][z].checkCount[
+                          parseInt(checkL[z])
+                        ] = 1);
+                  }
+                }
                 if (b[j].type == 1 || b[j].type == 4) {
                   if (
                     c.indexOf(
@@ -2195,7 +2316,31 @@ export default {
               }
             }
           }
-
+          for (var i = 0; i < a.length; i++) {
+            for (var j = 0; j < b.length; j++) {
+              var data = b[j];
+              if (i == b[j].tool) {
+                if (data.tool == 4) {
+                  for (var z = 0; z < this.checkJson[i].length; z++) {
+                    this.checkJson[i][z].checkPerent = [];
+                    for (
+                      var k = 0;
+                      k < this.checkJson[i][z].checkCount.length;
+                      k++
+                    ) {
+                      this.checkJson[i][z].checkPerent.push(
+                        Math.round(
+                          (this.checkJson[i][z].checkCount[k] /
+                            parseInt(this.worksStudent[i].length)) *
+                            100
+                        )
+                      );
+                    }
+                  }
+                }
+              }
+            }
+          }
           this.selectWorksStudent();
         })
         .catch((err) => {
@@ -2513,7 +2658,6 @@ export default {
         background: "rgba(255, 255, 255, 0.7)",
         target: document.querySelector(".student_table"),
       });
-      console.log(this.navList);
       // this.navList[0].isOpen = false;
       // this.navList[this.courseType].isOpen = true;
       // this.courseType = this.courseTypeLine;
@@ -2768,8 +2912,7 @@ export default {
         this.showPDF = false;
         this.dialogVisible3 = true;
       } else if (
-        f.split(".")[f.split(".").length - 1].toLocaleUpperCase() ==
-        "PDF"
+        f.split(".")[f.split(".").length - 1].toLocaleUpperCase() == "PDF"
       ) {
         this.pptImgUrl = f;
         this.showPDF = true;
@@ -2779,11 +2922,6 @@ export default {
     downFile(f, i) {
       this.pptImgUrl1 = "";
       var a = ["PPT", "PPTX", "XLSX", "XLS", "DOC", "DOCX"]; //"PDF",
-      console.log(
-        a.indexOf(
-          f.url.split(".")[f.url.split(".").length - 1].toLocaleUpperCase()
-        )
-      );
       if (
         a.indexOf(
           f.url.split(".")[f.url.split(".").length - 1].toLocaleUpperCase()
@@ -3420,6 +3558,7 @@ export default {
   max-height: 105px;
   overflow: auto;
   height: 70px;
+  word-break: break-word;
 }
 
 .file {
@@ -4358,4 +4497,60 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.elist_input_box {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  padding: 10px 0 15px 30px;
+  flex-direction: column;
+}
+
+.elist_input .elist_input_box input {
+  font: inherit;
+  color: currentColor;
+  width: 200px;
+  padding: 8px 14px;
+  display: block;
+  min-width: 0;
+  outline: none;
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  border-radius: 4px;
+  box-sizing: border-box;
+  background: #fff;
+  margin: 0 20px 0 0;
+}
+.elist_input .elist_input_box span {
+  height: 36px;
+  line-height: 36px;
+  color: rgb(82, 82, 82);
+}
+
+.elist_input .elist_input_box .remove {
+  height: 20px;
+  width: 20px;
+  background-size: 100% 100%;
+  background-position: unset;
+  margin-left: 5px;
+}
+
+.elist_input_box >>> .el-rate {
+  display: flex;
+  height: 36px;
+  align-items: center;
+}
+
+.elist_input_box .elist_inptu_text {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.elist_input_box .elist_inptu_text input {
+  width: 500px;
+}
+
+.elist_input_box >>> .el-rate__icon {
+  font-size: 24px;
+}
 </style>