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

src/components/pages/worksDetail.vue

@@ -110,175 +110,23 @@
             </template>
           </el-table-column>
         </el-table>
-        <!-- <el-dialog
-          :visible.sync="dialogVisible"
-          :append-to-body="true"
-          width="700px"
-          :before-close="handleClose"
-          class="add_work"
-        >
-          <div slot="title" class="header-title">
-            <div class="logoImg">
-              <img src="../../assets/logo.png" alt="" />
-            </div>
-            <div class="title_add_student">查看作业</div>
-          </div>
-          <div class="top">
-            <div>{{ sInfo.course }}</div>
-            <div>{{ sInfo.sName }}</div>
-          </div>
-          <div class="first" v-for="(item, index) in chapInfo" :key="index">
-            <div class="one_top">
-              <div>
-                {{ index + 1 }}、{{ item.dyName }} -
-                {{ sInfo.sName }}
-              </div>
-              <el-button
-                @click="doingAssess(index)"
-                :class="
-                  item.content != null && item.content != ''
-                    ? item.rateWrong == 0
-                      ? ''
-                      : 'assess'
-                    : 'display'
-                "
-                >{{
-                  item.content != null && item.content != ""
-                    ? item.rateWrong == 0
-                      ? "已评分"
-                      : "进行评分"
-                    : ""
-                }}</el-button
-              >
-            </div>
-            <div class="work_Img">
-              <img
-                v-for="(photo, cindex) in item.cover"
-                :key="cindex + '-' + index"
-                :src="photo.url"
-                alt=""
-                @click="handlePictureCardPreview(photo.url)"
-              />
-            </div>
-							<div>早梅</div>
-						</div> -->
-        <!-- <div class="poetry">
-              {{
-                item.content != null && item.content != ""
-                  ? item.content
-                  : "暂无内容"
-              }}
-            </div>
-          </div>
-        </el-dialog>
         <el-dialog
-          :visible.sync="dialogVisible1"
+          :visible.sync="dialogVisible3"
           :append-to-body="true"
-          width="700px"
           :before-close="handleClose"
           class="add_work"
         >
-          <div slot="title" class="header-title">
-            <div class="logoImg">
-              <img src="../../assets/logo.png" alt="" />
-            </div>
-            <div class="title_add_student">查看作业</div>
-          </div>
-          <div>
-            <div class="assess_top">
-              <div>
+          <div class="zyBox">
+            <div class="left">
+              <div class="courseTitle">
                 {{
-                  chapInfo[publicIndex] != null
+                  chapInfo[publicIndex] != null &&
+                  chapInfo[publicIndex].dyName != null &&
+                  chapInfo[publicIndex].dyName != ""
                     ? chapInfo[publicIndex].dyName
-                    : "暂无课程"
+                    : "暂无内容"
                 }}
-                - {{ sInfo.sName }}
-              </div>
-            </div>
-            <div class="assess_Img"> -->
-        <!-- <img
-								:src="
-									chapInfo[publicIndex] != null &&
-									chapInfo[publicIndex].upVedio.length > 0
-										? chapInfo[publicIndex].upVedio[0].url
-										: mr
-								"
-								alt=""
-							/> -->
-        <!-- <video-player
-                class="video-player vjs-custom-skin"
-                ref="videoPlayer"
-                :playsinline="true"
-                :options="playerO"
-                @play="onPlayerPlay($event)"
-                style="width: 100%; height: 100%"
-              ></video-player>
-            </div>
-            <div class="workName">
-              {{
-                chapInfo[publicIndex] != null
-                  ? chapInfo[publicIndex].dyName
-                  : "暂无课程"
-              }}
-            </div>
-            <div class="student_Answer">
-              <div class="toux">
-                <img src="../../assets/portal.png" alt="" />
-              </div>
-              <div class="nav">
-                <div class="studentName">{{ sInfo.sName }}</div>
-                <div class="studentAnswer">
-                  {{
-                    chapInfo[publicIndex] != null &&
-                    chapInfo[publicIndex].content != null &&
-                    chapInfo[publicIndex].content != ""
-                      ? chapInfo[publicIndex].content
-                      : "暂无内容"
-                  }}
-                </div>
               </div>
-            </div> -->
-        <!-- <div class="comment">
-							<div class="comment_title">
-								评论<span>({{ this.commentCount }})</span>
-							</div>
-							<div class="other_Answer">
-								<div class="toux">
-									<img src="../../assets/portal.png" alt="" />
-								</div>
-								<div class="nav">
-									<div class="nameAndTime">
-										<div class="otherName">{{ this.commentName }}</div>
-										<div class="time">{{ this.commentTime }}</div>
-									</div>
-									<div class="otherAnswer">{{ this.commentAnswer }}</div>
-								</div>
-							</div>
-							<div class="other_Answer">
-								<div class="toux">
-									<img src="../../assets/portal.png" alt="" />
-								</div>
-								<div class="nav">
-									<div class="nameAndTime">
-										<div class="otherName">{{ this.commentName }}</div>
-										<div class="time">{{ this.commentTime }}</div>
-									</div>
-									<div class="otherAnswer">{{ this.commentAnswer }}</div>
-								</div>
-							</div>
-						</div> -->
-        <!-- </div>
-          <div class="doingAssess" @click="giveScore">进行评分</div>
-        </el-dialog> -->
-        <el-dialog
-          :visible.sync="dialogVisible3"
-          :append-to-body="true"
-          :before-close="handleClose"
-          class="add_work"
-        >
-          <div class="zyBox">
-            <div class="left">
-              <div class="courseTitle">诗词中的植物-林点</div>
 
               <div class="bigImg" v-if="tType == 0">
                 <video-player
@@ -362,8 +210,100 @@
 									</div>
 								</div> -->
               </div>
+              <div
+                class="lastTop"
+                style="
+                  width: 100%;
+                  padding: 5px 0px 0px;
+                  box-sizing: border-box;
+                  height: 225px;
+                  margin-top: 10px;
+                  box-shadow: none;
+                "
+              >
+                <div class="moreSay">更多评价</div>
+                <div class="more_say_input">
+                  <el-input
+                    type="textarea"
+                    placeholder="还有要说的吗..."
+                    :rows="8"
+                    resize="none"
+                    v-model="rateList.content"
+                    :readonly="
+                      rateParams[5] != '' && rateParams[5] != undefined
+                    "
+                    style="background: #fafafa"
+                  ></el-input>
+                </div>
+              </div>
+            </div>
+            <div style="width: 290px">
+              <div
+                class="sd_score"
+                style="box-sizing: border-box; width: 100%; box-shadow: none"
+              >
+                <div class="score_box">
+                  <span>意识能力</span
+                  ><el-rate
+                    v-model="rateList.ca"
+                    :disabled="
+                      rateParams[5] != '' && rateParams[5] != undefined
+                    "
+                  ></el-rate>
+                </div>
+                <div class="score_box">
+                  <span>科学探究能力</span
+                  ><el-rate
+                    v-model="rateList.sia"
+                    :disabled="
+                      rateParams[5] != '' && rateParams[5] != undefined
+                    "
+                  ></el-rate>
+                </div>
+                <div class="score_box">
+                  <span>实践创新能力</span
+                  ><el-rate
+                    v-model="rateList.eta"
+                    :disabled="
+                      rateParams[5] != '' && rateParams[5] != undefined
+                    "
+                  ></el-rate>
+                </div>
+                <div class="score_box">
+                  <span>学习反思能力</span
+                  ><el-rate
+                    v-model="rateList.pia"
+                    :disabled="
+                      rateParams[5] != '' && rateParams[5] != undefined
+                    "
+                  ></el-rate>
+                </div>
+                <div class="score_box">
+                  <span>工程思维能力</span
+                  ><el-rate
+                    v-model="rateList.lra"
+                    :disabled="
+                      rateParams[5] != '' && rateParams[5] != undefined
+                    "
+                  ></el-rate>
+                </div>
+              </div>
+              <div class="data_body">
+                <div class="title">
+                  <span>量规评分</span>
+                </div>
+                <div style="width: 100%">
+                  <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+                  <div
+                    id="charts_canvas"
+                    class="echart"
+                    style="width: 100%; height: 100%; margin: 0 0 0 1rem"
+                  ></div>
+                </div>
+              </div>
             </div>
-            <div class="rbButtom" @click="giveScore">评分</div>
+            <!-- <div class="rbButtom" @click="giveScore">评分</div> -->
+            <div class="rbButtom" @click="updateWorks">评分</div>
           </div>
         </el-dialog>
         <el-dialog
@@ -557,6 +497,50 @@ export default {
       vedio: [],
       file: [],
       tType: 0,
+      chartObj: null,
+      ooption: [
+        { value: 0, name: "意识能力" },
+        { value: 0, name: "科学探究能力" },
+        { value: 0, name: "实践创新能力" },
+        { value: 0, name: "学习房媳能力" },
+        { value: 0, name: "工程思维能力" },
+      ],
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        series: [
+          {
+            name: "量规评分",
+            type: "pie",
+            radius: "70%",
+            center: ["50%", "50%"],
+            data: [
+              { value: 0, name: "意识能力" },
+              { value: 0, name: "科学探究能力" },
+              { value: 0, name: "实践创新能力" },
+              { value: 0, name: "学习房媳能力" },
+              { value: 0, name: "工程思维能力" },
+            ],
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+              normal: {
+                label: {
+                  show: true,
+                  formatter: "{d}%",
+                  inside: true,
+                  position: "inner",
+                },
+                labelLine: { show: false },
+              },
+            },
+          },
+        ],
+      },
     };
   },
   mounted() {
@@ -643,12 +627,46 @@ export default {
           console.log(this.playerOptions.sources[0].src);
           this.playerO = this.playerOptions;
           //   this.dialogVisible = true;
+          this.rateList = this.chapInfo[this.publicIndex].rate;
           this.dialogVisible3 = true;
+
+          this.ooption[0].value = this.rateList.ca;
+          this.ooption[1].value = this.rateList.sia;
+          this.ooption[2].value = this.rateList.eta;
+          this.ooption[3].value = this.rateList.pia;
+          this.ooption[4].value = this.rateList.lra;
+          if (this.chartObj) {
+            this.option.series[0].data = this.ooption;
+            this.chartObj.setOption(this.option);
+          } else {
+            this.setChart(this.ooption);
+          }
         })
         .catch((err) => {
           console.error(err);
         });
     },
+    setChart(option) {
+      let _this = this;
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        console.log(_this.option);
+
+        const chartObj = _this.$echarts.init(
+          //劳动课程
+          // _this.$el.querySelector("#charts_canvas")
+          document.getElementById("charts_canvas")
+        );
+        _this.option.series[0].data = option;
+        // 初始化雷达图
+        _this.chartObj = chartObj;
+        _this.chartObj.setOption(_this.option);
+      });
+    },
     // doingAssess(index) {
     // 	this.publicIndex = index;
     // 	this.playerOptions.sources[0].src =
@@ -755,8 +773,19 @@ export default {
             message: "评价成功",
             type: "success",
           });
-          this.uploadBoolean = false;
-          this.dialogVisible2 = false;
+          this.ooption[0].value = this.rateList.ca;
+          this.ooption[1].value = this.rateList.sia;
+          this.ooption[2].value = this.rateList.eta;
+          this.ooption[3].value = this.rateList.pia;
+          this.ooption[4].value = this.rateList.lra;
+          if (this.chartObj) {
+            this.option.series[0].data = this.ooption;
+            this.chartObj.setOption(this.option);
+          } else {
+            this.setChart(this.ooption);
+          }
+          // this.uploadBoolean = false;
+          // this.dialogVisible2 = false;
         })
         .catch((err) => {
           this.$message.error("评价失败");
@@ -841,6 +870,7 @@ export default {
 }
 .add_work >>> .el-dialog {
   min-width: 650px !important;
+  width: 1080px;
 }
 .add_work >>> .el-dialog__body {
   background: #ededed;
@@ -962,10 +992,16 @@ export default {
   margin: 5px 0 0 10px;
 }
 .comment {
-  margin: 20px 0 0 10px;
+  /* margin: 20px 0 0 10px;
   overflow: auto;
   height: 75%;
-  max-height: 330px;
+  max-height: 330px; */
+  overflow: auto;
+  height: 330px;
+  background: #fff;
+  border-radius: 5px;
+  padding: 10px;
+  box-sizing: border-box;
 }
 .comment > .comment_title {
   font-size: 18px;
@@ -1135,17 +1171,24 @@ export default {
 }
 
 .left {
-  width: 60%;
+  /* width: 60%;
   margin-right: 10px;
   min-width: 350px;
+  min-height: 425px; */
+  margin-right: 10px;
+  width: 450px;
   min-height: 425px;
 }
 
 .right {
-  width: 40%;
+  /* width: 40%;
   height: 75%;
   min-width: 230px;
-  min-height: 370px;
+  min-height: 370px; */
+  width: 25%;
+  margin-right: 10px;
+  background: none;
+  padding: 0;
 }
 
 .courseTitle {
@@ -1204,6 +1247,7 @@ export default {
   line-height: 30px;
   font-size: 14px;
   cursor: pointer;
+  right: 27px;
 }
 
 .bigImg >>> .vjs-tech,
@@ -1214,4 +1258,22 @@ export default {
 .el-table >>> .even_row {
   background-color: #f1f1f1;
 }
+
+.data_body {
+  height: 292px;
+  display: flex;
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  /* margin: 10px auto; */
+  box-sizing: border-box;
+  padding: 10px;
+  width: 100%;
+  background: #fff;
+}
+.data_body .title {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
 </style>