pbl-student-table/src/components/score.vue

<template>
  <div class="pb_content">
    <div class="pb_content_body">
      <div class="body_student">
        <div class="student_head">
          <div class="box_course">
            <div class="wheel">
              <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 style="font-size: 18px; margin: 15px">
              {{
                chapInfo.length > 0
                  ? chapInfo[parseInt(this.stage)].dyName
                  : "暂无标题"
              }}
            </div>
          </div>
        </div>
        <div class="student_body">
          <div class="myProject">我的评分</div>
          <div
            class="project_box"
            style="display: flex"
            v-if="
              chapInfo.length > 0 &&
              chapInfo[parseInt(this.stage)].tname != null &&
              chapInfo[parseInt(this.stage)].tname != ''
            "
          >
            <div class="mywd_rate_leida">
              <!-- <img src="../../assets/icon/leida.png" alt="" /> -->
              <div
                id="radar_canvas"
                class="echart"
                style="width: 100%; height: 100%"
              ></div>
            </div>
            <div style="display: flex; align-items: center; width: 20%">
              <span style="margin: 20px 10px 0 0">综合评分</span>
              <el-rate
                v-model="countPoint"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
                class="stars"
              >
              </el-rate>
            </div>
            <!-- <div class="star"><img src="../assets/starts.png" alt="" /></div> -->
          </div>
          <div class="project_box" v-else>老师暂未评分</div>
        </div>
        <div class="student_body1">
          <div
            style="
              padding: 20px 0px;
              border-bottom: 1px solid #ccc;
              margin: 0 0 15px 35px;
              width: 95%;
            "
          >
            评价
          </div>
          <div class="two_ete_box">
            <div
              class="other_evaluate"
              v-if="
                chapInfo.length > 0 &&
                chapInfo[parseInt(this.stage)].tname != null &&
                chapInfo[parseInt(this.stage)].tname != ''
              "
            >
              <div class="evaluate"><img src="../assets/tx.png" alt="" /></div>
              <div class="right_ete">
                <div class="first_other_ete">
                  <div class="ete_name">
                    {{
                      chapInfo.length > 0
                        ? chapInfo[parseInt(this.stage)].tname
                        : "暂无名称"
                    }}
                  </div>
                  <div class="ete_time">
                    {{
                      chapInfo.length > 0
                        ? chapInfo[parseInt(this.stage)].tTime
                        : "暂无评价"
                    }}
                  </div>
                </div>
                <div class="ete_content">
                  {{
                    chapInfo.length > 0
                      ? chapInfo[parseInt(this.stage)].rate.content
                      : "暂无评价"
                  }}
                </div>
              </div>
            </div>
            <div class="other_evaluate" v-else>老师暂未评价</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chapInfo: [],
      res: "",
      courseId: this.$route.query.courseId,
      userid: this.$route.query.userid,
      stage: this.$route.query.stage,
      myCourse: [],
      countPoint: 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: {},
      rate: {
        ca: 0,
        sia: 0,
        eta: 0,
        pia: 0,
        lra: 0,
      },
      // 雷达图的数据
      radarOption: {
        splitNumber: 5,
        // tooltip: {
        //   triggerOn: "mousemove",
        //   //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
        //   confine: true,
        //   enterable: true, //鼠标是否可以移动到tooltip区域内
        //   backgroundColor: "rgba(255,255,255,0.7)",
        //   textStyle: {
        //     // 文字样式
        //     align: "left",
        //   },
        //   left: "right",
        //   top: "bottom",
        // },
        radar: {
          shape: "circle",
          center: ["50%", "50%"],
          name: {
            formatter: function (value, indicator) {
              return "{a|" + value + "}" + "{b|(" + indicator.value + ")}";
            }, //富文本编辑 修改文字展示样式
            rich: {
              a: {
                color: "rgb(58,155,83)",
                fontSize: 12,
                align: "center",
                width: "200px",
              },
              b: {
                color: "rgb(58,155,83)",
                fontSize: 12,
                align: "center",
              },
            },
            textStyle: {
              // 文字样式
              color: "rgb(58,155,83)",
            },
          },
          indicator: [
            // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
            {
              name: "意识能力",
              max: 5,
            },
            {
              name: "科学探究能力",
              max: 5,
            },
            {
              name: "实践创新能力",
              max: 5,
            },
            {
              name: "学习反思能力",
              max: 5,
            },
            {
              name: "工程思维能力",
              max: 5,
            },
          ],
        },
        // 雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
        splitArea: {
          show: true,
          areaStyle: {
            color: "rgba(255,0,0,0)", // 图表背景的颜色
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "rgba(131,141,158,.1)", // 设置网格的颜色
          },
        },
        series: [
          {
            name: "能力图", // tooltip中的标题
            type: "radar", // 表示是雷达图
            symbol: "circle", // 拐点的样式，还可以取值'rect','angle'等
            symbolSize: 8, // 拐点的大小
            areaStyle: {
              normal: {
                width: 1,
                opacity: 0.2,
              },
            },
            data: [
              {
                // 设置各个指标原始值
                value: [0, 0, 0, 0, 0, 0],
                // 设置区域边框和区域的颜色
                itemStyle: {
                  normal: {
                    color: "rgba(78,187,101)",
                    lineStyle: {
                      color: "rgba(78,187,101)",
                    },
                  },
                },
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    selectMyCourse() {
      let params = {
        uid: this.userid,
      };
      this.ajax
        .get(this.$store.state.api + "selectMyCourse", params)
        .then((res) => {
          this.myCourse = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectWorksDetail() {
      let params = {
        uid: this.userid,
        cid: this.courseId,
      };
      this.ajax
        .get(this.$store.state.api + "selectWorksDetail", params)
        .then((res) => {
          this.chapInfo = JSON.parse(res.data[0][0].chapters);
          var worksDetail = res.data[1];
          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;
                var f = worksDetail[i].tTime;
                var g = worksDetail[i].tname;
                value.rateWrong = e;
                value.content = c.content;
                value.rate = d;
                value.tTime = f;
                value.tname = g;
                this.countPoint = Math.round(
                  (d.ca + d.sia + d.eta + d.pia + d.lra) / 5
                );
                // this.rateList = d;
                // this.rateList = value.rate;
                value.cover = c.cover;
                value.upVedio = c.upVedio;
                break;
              }
            }
          });
          this.switchVideo();
          this.leidaPic();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    leidaPic() {
      // this.chapInfo[parseInt(this.stage)].forEach((cn) => {
      var rate = this.chapInfo[parseInt(this.stage)].rate;
      this.rate.ca += rate.ca;
      this.rate.sia += rate.sia;
      this.rate.eta += rate.eta;
      this.rate.pia += rate.pia;
      this.rate.lra += rate.lra;
      // });
      this.rate.ca = this.rate.ca;
      this.rate.sia = this.rate.sia;
      this.rate.eta = this.rate.eta;
      this.rate.pia = this.rate.pia;
      this.rate.lra = this.rate.lra;
      this.leida();
    },
    leida() {
      // 雷达图显示的标签
      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        const chartObj = this.$echarts.init(
          this.$el.querySelector("#radar_canvas")
          // document.getElementById("radar_canvas")
        );
        //   var rate = JSON.parse(this.res.rate);
        this.radarOption.radar.indicator.filter((value, index, array) => {
          if (value.name == "意识能力") {
            value.value = this.rate.ca;
          }
          if (value.name == "科学探究能力") {
            value.value = this.rate.sia;
          }
          if (value.name == "实践创新能力") {
            value.value = this.rate.eta;
          }
          if (value.name == "学习反思能力") {
            value.value = this.rate.pia;
          }
          if (value.name == "工程思维能力") {
            value.value = this.rate.lra;
          }
        });
        this.radarOption.series[0].data[0].value[0] = this.rate.ca; //意识能力
        this.radarOption.series[0].data[0].value[1] = this.rate.sia; //科学探究能力
        this.radarOption.series[0].data[0].value[2] = this.rate.eta; //实践创新能力
        this.radarOption.series[0].data[0].value[3] = this.rate.pia; //学习反思能力
        this.radarOption.series[0].data[0].value[4] = this.rate.lra; //工程思维能力
        //格式tooltip
        this.radarOption.tooltip = {
          // triggerOn: "mousemove",
          //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
          confine: true,
          enterable: true, //鼠标是否可以移动到tooltip区域内
          backgroundColor: "rgba(255,255,255,0.7)",
          textStyle: {
            // 文字样式
            align: "left",
          },
          left: "right",
          top: "bottom",
          formatter: function (params) {
            let relVal = "<ul>" + params.name + params.seriesName;
            var a = [
              "意识能力",
              "科学探究能力",
              "实践创新能力",
              "学习反思能力",
              "工程思维能力",
            ];
            for (let i = 0; i < params.data.value.length - 1; i++) {
              relVal +=
                "<li>" +
                `<span style="display:inline-block;vertical-align:middle;margin-right:8px;margin-left:3px;border-radius:4px;width:4px;height:4px;background-color:rgba(78,187,101);"></span>` +
                `<span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">${a[i]}</span>` +
                `<span style="float:right;margin-left:20px;font-size:14px;color:#666;">${
                  params.data.value[i] + " 星"
                }</span>` +
                "</li>";
            }
            relVal += "</ul>";
            return relVal;
          },
        };

        // 初始化雷达图
        chartObj.setOption(this.radarOption);
      });
    },
    switchVideo() {
      this.playerO = {};
      this.playerOptions.poster = "";
      this.playerOptions.sources[0].src =
        this.chapInfo[parseInt(this.stage)].upVedio.length > 0
          ? this.chapInfo[parseInt(this.stage)].upVedio[0].url
          : require("../assets/icon/kc1.png");
      this.playerO = this.playerOptions;
    },
    onPlayerPlay() {},
  },
  created() {
    this.selectWorksDetail();
    this.selectMyCourse();
  },
};
</script>

<style scoped>
.body_student {
  margin: 0px auto;
  width: 98%;
  height: 100%;
}
.student_head {
  width: 100%;
  margin: 0 auto;
  background: #fff;
}
.wheel > img,
.project > img,
.star > img,
.evaluate > img {
  width: 100%;
  height: 100%;
}
.box_course {
  display: flex;
  flex-direction: column;
}
.wheel {
  width: 100%;
}
.right_box {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  justify-content: space-around;
}
.right_box_title {
  font-size: 23px;
}
.people {
  display: flex;
}
.student_body,
.student_body1 {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  margin-top: 20px;
  padding: 0 0 20px;
}
.project {
  width: 165px;
}
.project_box {
  margin: 80px 0 10px 30px;
}
.star {
  width: 50%;
  min-width: 400px;
  margin: 0 auto;
}
.evaluate {
  width: auto;
  height: 65px;
  border-radius: 100%;
  overflow: hidden;
}
.two_ete_box {
  padding: 0px 0 5px 30px;
}
.other_evaluate {
  display: flex;
  margin-bottom: 25px;
}
.right_ete {
  margin-left: 15px;
}
.first_other_ete {
  display: flex;
}
.ete_time {
  margin-left: 10px;
  line-height: 21px;
  font-size: 13px;
  color: #999;
  margin-bottom: 10px;
}
.ete_content {
  height: auto;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  width: 500px;
  line-height: 20px;
  font-size: 14px;
  padding-top: 10px;
}
.mywd_rate_leida {
  width: 80%;
  text-align: center;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mywd_rate_leida img {
  width: inherit;
}
.myProject {
  padding: 20px 20px 10px 0;
  border-bottom: 1px solid #ccc;
  margin-left: 20px;
  width: 95%;
  color: #61d3b3;
}

.stars >>> .el-rate__icon {
  font-size: 40px !important;
}
.stars >>> .el-rate__text {
  font-size: 25px !important;
}
</style>