pbl-teacher-table/src/components/pages/worksDetail.vue

<template>
  <div class="pb_content" style="background: unset">
    <div
      class="pb_content_body"
      style="
        background: #fff;
        padding: 0px 25px;
        box-sizing: border-box;
        border-radius: 5px;
      "
    >
      <div class="pb_head">
        <span>评价管理</span>
        <!-- <span>备注：教师可以根据课程、班级条件筛选学生并查看该学生信息</span> -->
      </div>
      <div class="student_head">
        <div style="padding: 10px 0px 20px 0">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/works?userid=' + userid + '&oid=' + oid }">评价管理</el-breadcrumb-item>
            <el-breadcrumb-item>作业管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="student_search">
          <div>项目筛选</div>
          <!-- <el-select
						v-model="subject"
						placeholder="请选择课程"
						@change="searchWork"
					>
						<el-option label="所有课程" value=""></el-option>
						<el-option
							v-for="(item, index) in subjectJuri"
							:key="index"
							:label="item.name"
							:value="item.id"
						></el-option>
          </el-select>-->
          <el-select v-model="sClass" placeholder="请选择班级" @change="searchWork">
            <el-option label="所有班级" value></el-option>
            <el-option
              v-for="(item, index) in grade"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="pb_content_body">
      <div class="student_table">
        <el-table
          ref="table"
          :data="tableData"
          border
          :height="tableHeight"
          :fit="true"
          v-loading="isLoading"
          style="width: 100%"
          :header-cell-style="{ background: '#f1f1f1' }"
          :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>
          <el-table-column prop="course" label="项目" min-width="20" align="center"></el-table-column>
          <el-table-column prop="time" label="时间" min-width="15" align="center"></el-table-column>
          <el-table-column label="操作" min-width="30">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="lookWork(scope.row.id, scope.row.userid)"
              >查看作业</el-button>
              <el-button type="primary" size="small" @click="lookData(scope.row.userid)">生成报告</el-button>
              <!-- <el-button
                class="de_button"
                type="primary"
                size="small"
                @click="deleteWork(scope.row.id)"
              >删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          :visible.sync="dialogVisible3"
          :append-to-body="true"
          :before-close="handleClose"
          class="add_work"
        >
          <div class="zyBoxC" v-for="(item, index) in worksDetail" :key="index">
            <div class="courseTitle">
              <span>{{ "第" + (item.stage + 1) + "阶段 " + item.chapterTitle }}</span>
              <span v-if="item.askJson" @click="checkAsk(item.askJson)">查看问卷</span>
            </div>
            <div class="zyBox">
              <div class="left">
                <div class="bigImg" v-if="item.tType == 0">
                  <video-player
                    class="video-player vjs-custom-skin"
                    ref="videoPlayer"
                    :playsinline="true"
                    :options="item.playerO"
                    @play="onPlayerPlay($event)"
                    style="width: 100%; height: 100%"
                  ></video-player>
                </div>
                <div class="bigImg" v-else>
                  <img
                    :src="
                      item.thumbnail.length > 0 && item.thumbnail[1].length
                        ? item.thumbnail[1][0].url
                        : ''
                    "
                    alt
                  />
                </div>
                <div class="thumbnail">
                  <div
                    style="background: #a3d4ff"
                    v-if="item.upVedio.length"
                    :class="item.tType == 0 ? 'isClick' : ''"
                  >
                    <img src="../../assets/icon/spIcon.png" alt @click="item.tType = 0" />
                  </div>
                  <div :class="item.tType == 1 ? 'isClick' : ''">
                    <img
                      :src="
                        item.thumbnail.length > 0 && item.thumbnail[1].length
                          ? item.thumbnail[1][0].url
                          : ''
                      "
                      alt
                      @click="item.tType = 1"
                    />
                  </div>
                </div>
                <div style="margin: 5px 10px">{{ sInfo.course }}</div>
                <div class="student_Answer">
                  <div class="toux">
                    <img :src="sInfo.tx != null ? sInfo.tx : tx" alt />
                  </div>
                  <div class="nav">
                    <div class="studentName">{{ sInfo.sName }}</div>
                    <div class="studentAnswer">
                      {{ item.content != "" ? item.content : "暂无内容" }}
                      <!-- 雨荒深院菊，霜倒半池莲.唐杜甫《宿赞公房》 -->
                    </div>
                  </div>
                </div>
              </div>
              <div style="width: 290px; margin-right: 10px">
                <div class="sd_score" style="box-sizing: border-box; width: 100%; box-shadow: none">
                  <div class="score_box">
                    <span>意识能力</span>
                    <el-rate v-model="item.rate.ca"></el-rate>
                  </div>
                  <div class="score_box">
                    <span>科学探究能力</span>
                    <el-rate v-model="item.rate.sia"></el-rate>
                  </div>
                  <div class="score_box">
                    <span>实践创新能力</span>
                    <el-rate v-model="item.rate.eta"></el-rate>
                  </div>
                  <div class="score_box">
                    <span>学习反思能力</span>
                    <el-rate v-model="item.rate.pia"></el-rate>
                  </div>
                  <div class="score_box">
                    <span>工程思维能力</span>
                    <el-rate v-model="item.rate.lra"></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
                      class="echart charts_canvas"
                      style="width: 100%; height: 100%; margin: 0 0 0 1rem"
                    ></div>
                  </div>
                </div>
              </div>
              <div class="right">
                <div class="comment">
                  <div class="comment_title">
                    评论
                    <span>({{ commentCount }})</span>
                  </div>
                  <div class="other_Answer">暂无学生评论</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
                  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="item.rate.content"
                      style="background: #fafafa"
                    ></el-input>
                  </div>
                </div>
              </div>
              <!-- <div class="rbButtom" @click="giveScore">评分</div> -->
              <div class="rbButtom" @click="updateWorks(item.id, item.rate, index)">评分</div>
            </div>
          </div>
        </el-dialog>
        <el-dialog
          :visible.sync="dialogVisible2"
          :append-to-body="true"
          width="700px"
          :before-close="handleClose"
          class="add_work talkScore"
        >
          <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="firstTop">
            <div class="score_top">
              <div class="userTou">
                <img :src="sInfo.tx != null ? sInfo.tx : tx" alt />
              </div>
              <div class="score_user_name">{{ sInfo.sName }}</div>
            </div>
            <div class="course_top">
              <div>课程名称</div>
              <div>
                {{
                chapInfo[publicIndex] != null
                ? chapInfo[publicIndex].dyName
                : "暂无课程"
                }}
              </div>
            </div>
          </div>

          <div class="sd_score">
            <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="lastTop">
            <div class="moreSay">更多评价</div>
            <div class="more_say_input">
              <el-input
                type="textarea"
                placeholder="还有要说的吗..."
                :rows="3"
                resize="none"
                v-model="rateList.content"
                :readonly="rateParams[5] != '' && rateParams[5] != undefined"
                style="background: #fafafa"
              ></el-input>
            </div>
          </div>

          <div class="assess_right" @click="updateWorks" v-if="!uploadBoolean">提交</div>
          <div class="assess_right" @click="updateWorks" v-else>提交</div>
        </el-dialog>
      </div>
      <div class="student_page">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="10"
          :total="total"
          v-if="page"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="pictureDialog" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
    <el-dialog
      title="项目评分"
      :visible.sync="dataVisible"
      :append-to-body="true"
      width="1100px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div class="a_addBox2">
          <StudentData :studentInfo="studentInfo"></StudentData>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dataVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="查看问卷调查"
      :visible.sync="dialogVisible4"
      :append-to-body="true"
      width="800px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div
          class="a_add_title"
          style="
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
          "
        >
          <div style="font-size: 20px">{{ askJson.askTitle }}</div>
        </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_head">
              <div style="display: flex">
                {{ index + 1 + "、" }}
                <div>问卷题目：{{ item.askstitle }}</div>
              </div>
            </div>
            <div class="a_add_body">
              <div class="a_add_input">
                <el-radio-group v-model="askJson.radio[index]">
                  <el-radio
                    v-for="(item3, checkIndex1) in item.checkList"
                    :key="checkIndex1"
                    :label="checkIndex1"
                    class="redioStyle"
                    disabled
                  >{{ item3 }}</el-radio>
                </el-radio-group>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible4 = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import StudentData from "./components/studentData";
export default {
  components: {
    StudentData,
  },
  data() {
    return {
      tableHeight: "500px",
      isLoading: false,
      id: this.$route.query.cid,
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      formLabelWidth: "100px",
      dialogImageUrl: "",
      pictureDialog: false,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dataVisible: false,
      studentInfo: {},
      courseByUser: "诗词中的植物",
      userName: "林点",
      answerName: "宿赞公房",
      studentAnswer: "雨荒深院菊,霜倒半池莲.唐杜甫《宿赞公房》",
      commentCount: 0,
      publicIndex: 0,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
            src: "", //url地址require("../../assets/media/aaa.mp4")
          },
        ],
        // poster: require("../../assets/tu31.png"), //你的封面地址
        // poster: dataRes.imgUrl, //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true, //全屏按钮
        },
      },
      playerO: {},
      commentName: "谭子松",
      commentTime: "2021/2/5",
      commentAnswer:
        "作为家长我很高兴看到孩子的进步，希望这个进步只是一个开始，在新学期能够继续延续，这样才能不负老师的期望",
      tableData: [],
      uploadBoolean: false,
      studentMessage: [],
      subject: "",
      sClass: "",
      subjectJuri: [],
      projectJuri: [],
      grade: [],
      mr: require("../../assets/icon/wheel.png"),
      tx: require("../../assets/portal.png"),
      projectchoose: "",
      scopeId: "",
      thumbnail: [],
      rateList: {
        ca: 0,
        sia: 0,
        eta: 0,
        pia: 0,
        lra: 0,
        content: "",
      },
      rateParams: [],
      page: 1,
      total: 0,
      worksDetail: [],
      suserId: "",
      sInfo: {},
      chapInfo: [],
      vedio: [],
      file: [],
      tType: 0,
      chartObj: [],
      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 },
              },
            },
          },
        ],
      },
      askJson: {},
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.tableHeight =
        window.innerHeight - this.$refs.table.$el.offsetTop - 200;
      if (this.tableHeight <= 530) {
        this.tableHeight = 530;
      }
      // 监听窗口大小变化
      let self = this;
      window.onresize = function () {
        self.tableHeight =
          window.innerHeight - self.$refs.table.$el.offsetTop - 200;
        if (self.tableHeight <= 530) {
          self.tableHeight = 530;
        }
      };
    });
  },
  methods: {
    lookData(uid) {
      let params = {
        uid: uid,
        cid: this.id,
      };
      this.ajax
        .get(this.$store.state.api + "selectWorksDetail", params)
        .then((res) => {
          this.studentInfo = res.data[0][0];
          this.dataVisible = true;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    handleClose(done) {
      done();
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getWorks();
    },
    lookWork(id, uid) {
      this.scopeId = id;
      let params = {
        uid: uid,
        cid: this.id,
      };
      this.ajax
        .get(this.$store.state.api + "selectWorksDetail", params)
        .then((res) => {
          this.sInfo = res.data[0][0];
          this.chapInfo = JSON.parse(res.data[0][0].chapters);
          var worksDetail = res.data[1];
          var askArray = res.data[2];
          // this.chapInfo.filter((value, index, array) => {
          //   for (var i = 0; i < worksDetail.length; i++) {
          //     if (index == worksDetail[i].stage) {
          //       var c = JSON.parse(worksDetail[i].content)[0];
          //       var d =
          //         worksDetail[i].rate != null && worksDetail[i].rate != ""
          //           ? JSON.parse(worksDetail[i].rate)
          //           : { ca: 0, sia: 0, eta: 0, pia: 0, lra: 0, content: "" };
          //       var e =
          //         worksDetail[i].rate != null && worksDetail[i].rate != ""
          //           ? 0
          //           : 1;
          //       value.rateWrong = e;
          //       value.content = c.content;
          //       value.rate = d;
          //       value.cover = c.cover;
          //       value.upVedio = c.upVedio;
          //       this.thumbnail.push(value.upVedio);
          //       this.thumbnail.push(value.cover);
          //       break;
          //     }
          //   }
          // });

          worksDetail.filter((value, index, array) => {
            var c = JSON.parse(value.content)[0];
            var d =
              value.rate != null && value.rate != ""
                ? JSON.parse(value.rate)
                : { ca: 0, sia: 0, eta: 0, pia: 0, lra: 0, content: "" };
            var e = value.rate != null && value.rate != "" ? 0 : 1;
            value.rateWrong = e;
            value.chapterTitle = this.chapInfo[value.stage].dyName;
            value.content = c.content;
            value.rate = d;
            value.cover = c.cover;
            value.upVedio = c.upVedio;
            value.thumbnail = [c.upVedio, c.cover];
            if (c.upVedio.length) {
              value.tType = 0;
            } else {
              value.tType = 1;
            }
            debugger;
            for (let j = 0; j < askArray.length; j++) {
              if (askArray[j].stage == value.stage) {
                var _a = [];
                var _radio = askArray[j].content.split(",");
                for (var ij = 0; ij < _radio.length; ij++) {
                  _a.push(parseInt(_radio[ij]));
                }
                value.askJson = {
                  askTitle: this.chapInfo[value.stage].chapterInfo[0].askTitle,
                  askJson: this.chapInfo[value.stage].chapterInfo[0].askJson,
                  radio: _a,
                };
              }
            }

            value.playerO = JSON.parse(JSON.stringify(this.playerOptions));
            value.playerO.sources[0].src =
              c.upVedio.length > 0
                ? c.upVedio[0].url
                : require("../../assets/icon/kc1.png");
          });
          this.worksDetail = worksDetail;

          this.courseDetail = res.data[0][0];
          // this.playerOptions.sources[0].src =
          //   this.chapInfo[this.publicIndex].upVedio.length > 0
          //     ? this.chapInfo[this.publicIndex].upVedio[0].url
          //     : require("../../assets/icon/kc1.png");
          // 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);
          // }

          setTimeout(() => {
            worksDetail.filter((value, index, array) => {
              var _ooption = JSON.parse(JSON.stringify(this.ooption));
              var _option = JSON.parse(JSON.stringify(this.option));

              _ooption[0].value = value.rate.ca;
              _ooption[1].value = value.rate.sia;
              _ooption[2].value = value.rate.eta;
              _ooption[3].value = value.rate.pia;
              _ooption[4].value = value.rate.lra;
              if (this.chartObj[index]) {
                _option.series[0].data = _ooption;
                this.chartObj[index].setOption(_option);
              } else {
                _option.series[0].data = _ooption;
                this.setChart(index, _option);
              }
            });
          }, 0);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    checkAsk(askJson) {
      this.askJson = askJson;
      this.dialogVisible4 = true;
    },
    setChart(index, 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.getElementsByClassName("charts_canvas")[index]
        );
        // 初始化雷达图
        _this.chartObj[index] = chartObj;
        _this.chartObj[index].setOption(option);
      });
    },
    // doingAssess(index) {
    // 	this.publicIndex = index;
    // 	this.playerOptions.sources[0].src =
    // 		this.chapInfo[this.publicIndex].upVedio.length > 0
    // 			? this.chapInfo[this.publicIndex].upVedio[0].url
    // 			: require("../../assets/icon/kc1.png");
    // 	console.log(this.playerOptions.sources[0].src);
    // 	this.playerO = this.playerOptions;
    // 	this.dialogVisible1 = true;
    // },
    giveScore() {
      this.rateList = this.chapInfo[this.publicIndex].rate;
      this.dialogVisible2 = true;
    },
    //获取班级列表
    getClass() {
      this.isLoading = true;
      let params = {
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "selectClassBySchool", params)
        .then((res) => {
          this.isLoading = false;
          this.grade = res.data[0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    //获取分组分类
    getGroup() {
      let params = {};
      this.ajax
        .get(this.$store.state.api + "getGroup", params)
        .then((res) => {
          this.subjectJuri = res.data[0];
          this.projectJuri = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    searchWork() {
      this.page = 1;
      this.getWorks();
    },
    //获取作业
    getWorks() {
      this.isLoading = true;
      var mr = this.mr;
      let params = {
        cn: this.sClass,
        cid: this.id,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getWorks", params)
        .then((res) => {
          this.isLoading = false;
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData = res.data[0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    getCourseDetail() {
      const loading = this.$loading.service({
        background: "rgba(255, 255, 255, 0.7)",
        target: document.querySelector(".student_table"),
      });
      let params = {
        courseId: this.id,
      };
      this.ajax
        .get(this.$store.state.api + "selectCourseDetail", params)
        .then((res) => {
          loading.close();
          this.chapInfo = JSON.parse(res.data[0][0].chapters);
          // element.imgUrl = JSON.parse(element.chapters).poster;
        })
        .catch((err) => {
          loading.close();
          console.error(err);
        });
    },
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url;
      this.pictureDialog = true;
    },
    updateWorks(id, rate, index) {
      let params = {
        rate: rate,
        tuid: this.userid,
        id: id,
      };
      this.ajax
        .get(this.$store.state.api + "updateWorks", params)
        .then((res) => {
          this.$message({
            message: "评价成功",
            type: "success",
          });
          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);
          }
          // this.uploadBoolean = false;
          // this.dialogVisible2 = false;
        })
        .catch((err) => {
          this.$message.error("评价失败");
          console.error(err);
        });
    },
    switchVideo(media, index) {
      this.playerO = {};
      this.playerOptions.poster = "";
      this.playerOptions.sources[0].src = media;
      this.playerO = this.playerOptions;
    },
    onPlayerPlay() {},
  },
  created() {
    this.page = 1;
    this.getClass();
    this.getGroup();
    this.getWorks();
    // this.getCourseDetail();
  },
};
</script>

<style scoped>
.pb_head > span:nth-child(2) {
  font-size: 16px;
  margin-left: 80px;
  color: #ab582f;
}
.pb_head {
  margin: 0 !important;
  width: 100% !important;
}
.student_page {
  margin-top: 10px;
}
.student_head {
  margin-top: 10px;
  padding-bottom: 15px;
}
.student_search {
  display: flex;
}
.student_search > div:nth-child(1) {
  line-height: 35px;
  font-size: 14px;
}
.student_search >>> .el-input__inner {
  width: 190px;
  height: 35px;
  margin-left: 10px;
}
.student_table >>> .el-table--border td {
  border-right: 0px !important;
}
.add_work >>> .el-dialog__header {
  padding: 20px 20px 10px;
  text-align: center;
  background: #32455b;
}
.add_work >>> .el-dialog__title {
  font-size: 14px !important;
  color: #fff !important;
}
.add_work >>> .el-dialog__headerbtn {
  font-size: 20px !important;
  top: 5px !important;
  right: 8px !important;
}
.add_work >>> .el-form-item__label {
  margin-left: 65px;
}
.add_work >>> .el-form-item {
  display: flex;
}
.add_work >>> .el-form-item__content {
  margin: 0 !important;
}
.add_work >>> .el-dialog__footer {
  text-align: center !important;
}
.add_work >>> .el-dialog {
  min-width: 650px !important;
  width: 1080px;
}
.add_work >>> .el-dialog__body {
  background: #fff;
  height: 660px;
  overflow: auto;
}
.header-title {
  display: flex;
}
.logoImg {
  width: 30px;
}
.logoImg > img {
  width: 100%;
  height: 100%;
}
.title_add_student {
  margin: 0 auto;
  color: #fff;
}
.top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
}
.top > div:nth-child(1) {
  font-size: 18px;
}
.top > div:nth-child(2) {
  font-size: 14px;
  line-height: 28px;
}
.first {
  margin-top: 25px;
  border-bottom: 1px solid #c5c5c5;
}
.one_top {
  display: flex;
  justify-content: space-between;
}
.one_top > div:nth-child(1) {
  color: #2490bf;
  font-size: 16px;
}
.one_top > button {
  width: 100px;
  background: #24a0a4;
  height: 30px;
  color: #e0e0e0;
  font-size: 13px;
  padding: 0 !important;
}
.work_Img {
  width: 150px;
  margin: 10px 0;
}
.assess_Img {
  width: 400px;
  margin: 0 auto;
  padding: 15px 0;
}
.work_Img > img,
.assess_Img > img {
  width: 100%;
  height: 100%;
}
.work_input {
  border: 1px solid;
  width: 135px;
  height: 20px;
  line-height: 20px;
  font-size: 13px;
  padding: 5px;
}
.poetry {
  margin: 10px 0 15px 0;
}
.assess {
  background: #169bd5 !important;
}
.assess_top {
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}
.assess_top > div:nth-child(1) {
  color: #2490bf;
  font-size: 16px;
}
.student_Answer {
  display: flex;
  margin: 5px 10px;
  /* padding-bottom: 25px; */
}
.workName {
  font-size: 18px;
  font-weight: bold;
  margin: 5px 10px;
}
.toux {
  width: 35px;
  /* margin: auto 0; */
  height: 35px;
}
.toux > img {
  width: 100%;
  height: 100%;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  flex-direction: column;
}
.studentName {
  margin-left: 10px;
  font-size: 13px;
}
.studentAnswer {
  font-size: 12px;
  margin: 5px 0 0 10px;
  height: 42px;
  overflow: auto;
}
.comment {
  /* margin: 20px 0 0 10px;
  overflow: auto;
  height: 75%;
  max-height: 330px; */
  overflow: auto;
  height: 290px;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
}
.comment > .comment_title {
  font-size: 18px;
}
.comment > .comment_title > span {
  font-size: 14px;
}
.other_Answer {
  display: flex;
  margin: 5px 10px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
}
.nav {
  margin-left: 5px;
  width: 80%;
}
.nameAndTime {
  display: flex;
}
.otherName {
  font-weight: bold;
  margin-left: 10px;
  font-size: 13px;
}
.time {
  margin-left: 25px;
  font-size: 12px;
  margin-top: 3px;
}
.otherAnswer {
  width: 80%;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  font-size: 12px;
  margin: 5px 0 0 10px;
}
.doingAssess {
  margin: 0 auto;
  width: 300px;
  background: #169bd5;
  height: 35px;
  line-height: 35px;
  border-radius: 3px;
  font-size: 13px;
  text-align: center;
  color: #fff;
  margin-top: 30px;
  cursor: pointer;
}
.score_top {
  display: flex;
  margin-bottom: 10px;
}
.userTou {
  width: 50px;
}
.userTou > img {
  width: 100%;
  height: 100%;
}
.score_user_name {
  line-height: 53px;
  margin-left: 15px;
}
.course_top {
  display: flex;
  align-items: center;
}
.course_top > div:nth-child(1) {
  line-height: 25px;
}
.course_top > div:nth-child(2) {
  border: 1px solid #ccc;
  width: 250px;
  text-align: center;
  height: 25px;
  line-height: 25px;
  margin-left: 30px;
}
.sd_score {
  font-size: 15px;
  background: #fff;
  padding: 18px 25px 1px;
  margin-bottom: 15px;
  border-radius: 5px;
  width: 90%;
  box-shadow: 2px 2px 5px #909090;
}
.sd_score .score_box {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.sd_score span {
  width: 100px;
  text-align: justify;
  text-align-last: justify;
  display: block;
  margin-right: 20px;
}
.moreSay {
  margin: 0px 0 5px 20px;
}
.more_say_input {
  margin-left: 20px;
  width: 80%;
}
.more_say_input >>> .el-input__inner {
  height: 75px;
  font-size: 13px;
  padding: 0 0 0 10px;
}
.assess_right {
  width: 200px;
  background: #82b0ee;
  color: #fff;
  text-align: center;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  margin: 0 auto;
  margin-top: 20px;
  font-size: 13px;
  cursor: pointer;
}
.student_page {
  margin-top: 10px;
}
.display {
  display: none;
}

.firstTop {
  background: #fff;
  display: flex;
  margin-bottom: 15px;
  flex-direction: column;
  align-items: flex-start;
  height: 90px;
  padding: 10px 25px;
  border-radius: 5px;
  width: 90%;
  box-shadow: 2px 2px 5px #909090;
}

.talkScore >>> .el-dialog__body {
  background: #efefef;
  margin: 0 !important;
}

.lastTop {
  background: #fff;
  border-radius: 5px;
  width: 98%;
  height: 120px;
  box-shadow: 2px 2px 5px #909090;
}

.left,
.right {
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
}

.left {
  /* width: 60%;
  margin-right: 10px;
  min-width: 350px;
  min-height: 425px; */
  margin-right: 10px;
  width: 450px;
  min-height: 425px;
}

.right {
  /* width: 40%;
  height: 75%;
  min-width: 230px;
  min-height: 370px; */
  width: 25%;
  /* margin-right: 10px; */
  background: none;
  padding: 0;
}

.courseTitle {
  font-size: 19px;
  font-weight: 600;
  width: 93%;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.courseTitle span:nth-child(2) {
  font-size: 14px;
  cursor: pointer;
}

.bigImg {
  margin-top: 10px;
  height: 300px;
}

.bigImg > img,
.thumbnail > div > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.thumbnail {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin: 10px 0;
}

.isClick {
  border: 3px solid #5f89d4;
  border-radius: 5px;
}

.thumbnail > div {
  width: 80px;
  margin-right: 5px;
  cursor: pointer;
}

.zyBoxC {
  background: #ededed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0px;
  flex-direction: column;
}

.zyBox {
  display: flex;
  /* width: 100%; */
  position: relative;
  min-width: 585px;
  min-height: 425px;
}

.zyBoxC + .zyBoxC {
  margin-top: 10px;
}
.rbButtom {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #06a7ff;
  width: 150px;
  height: 30px;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  line-height: 30px;
  font-size: 14px;
  cursor: pointer;
  right: 27px;
}

.bigImg >>> .vjs-tech,
.bigImg >>> .video-js {
  height: 300px !important;
}

.el-table >>> .even_row {
  background-color: #f1f1f1;
}

.data_body {
  height: 340px;
  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;
}

.dialog_diy >>> .el-dialog__header {
  padding: 9px 20px 10px;
  background: #32455b !important;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
  font-size: 15px;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 14px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}
.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer {
  background: #fafafa;
}
.a_addBox2 {
  margin: 10px 0;
  background: #fff;
  padding: 15px;
}
.a_addBox {
  margin: 10px 0;
  background: #fff;
  padding: 15px;
  max-height: 400px;
  overflow: auto;
}
.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_body {
  display: flex;
  align-items: center;
}
.a_add_input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* flex-direction: column; */
  /* width: 100%; */
}
.a_add_input >>> el-radio-group {
  margin: 10px 0;
}
.redioStyle >>> .el-radio__label {
  font-size: 18px;
}
</style>