mteacher/src/views/teacher/reportDetail.vue

<template>
  <div class="container">
    <div class="topWrap">
      <p class="tTilte" style="font-size:.17rem; margin-bottom:.08rem;">什么是学习报告：</p>
      <p>
        阶段性课时完成后，我们将围绕
        <span>练习表现、节奏准确度、音符准确度、演奏连贯度</span>
        等四个学习维度，对学员的学习进度和掌握程度进行精准评估，有助于家长及时了解孩子的学习成果和老师有针对性的指导，不断提升学员的学习能力和音乐成就。
      </p>
    </div>
    <div class="titleWrap">
      <img :src="imgList.title1" alt />
      <p>报告概览呈现的是学员本阶段的练习频率及累计时长，演奏技能的提升离不开日积月累的练习哦！</p>
    </div>
    <div class="reportWrap">
      <div class="border">
        <div class="imgBox">
          <div class="studentWrap">
            <img :src="imgList.logo" class="logo" alt />
            <div class="left">
              <img :src="studentInfo.avatar" alt />
            </div>
            <div class="right">
              <p class="name">{{ studentInfo.name }}</p>
              <p class="subject">{{ studentInfo.subjectName }}</p>
            </div>
          </div>
          <div class="studentTimeWrap">
            <div style="margin-right:.22rem">
              <p class="timeP">{{ studentInfo.times }}</p>
              <p class="descP">练习次数（次）</p>
            </div>
            <div>
              <p class="timeP">{{ studentInfo.totalMinutes }}</p>
              <p class="descP">练习时长（分钟）</p>
            </div>
          </div>
          <div class="assess">
            <p>
              本次
              <span>练习表现优异，进步很大，希望持之以恒，</span> 要继续加油哦！
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="titleWrap">
      <img :src="imgList.title2" alt />
      <p>评价详情呈现的是老师就学员本组课程的练习表现、节奏准确度、音符准确度、节奏连贯度四个维度的具体评价。</p>
    </div>
    <div class="reportWrap1">
      <div class="imgBox1">
        <div style="width:100%;  position: relative; margin-top:.1rem">
          <img :src="imgList.logo" class="logo1" alt />
          <p class="title">
            <img :src="imgList.squrt" class="squrt" alt />
            {{ subjectJson['1'].title}}
          </p>
        </div>
        <div class="cell">
          <img :src="subjectJson['1'].icon" class="icons" alt />
          {{ subjectJson['1'][item[0]] }}
        </div>
        <div style="width:100%">
          <p class="title">
            <img :src="imgList.squrt" class="squrt" alt />
             {{ subjectJson['2'].title}}
          </p>
        </div>
        <div class="cell">
          <img :src="subjectJson['2'].icon" class="icons" alt />
          {{ subjectJson['2'][item[1]] }}
        </div>
        <div style="width:100%">
          <p class="title">
            <img :src="imgList.squrt" class="squrt" alt />
            {{ subjectJson['3'].title}}
          </p>
        </div>
        <div class="cell">
          <img :src="subjectJson['3'].icon" class="icons" alt />
          {{ subjectJson['3'][item[2]] }}
        </div>
        <div style="width:100%">
          <p class="title">
            <img :src="imgList.squrt" class="squrt" alt />
             {{ subjectJson['4'].title}}
          </p>
        </div>
        <div class="cell">
          <img :src="subjectJson['4'].icon" class="icons" alt />
          {{ subjectJson['4'][item[3]] }}
        </div>
      </div>
    </div>
    <div class="titleWrap">
      <img :src="imgList.title3" alt />
      <p>老师评语是老师就学员的练习情况给予的总结，鼓励学员再接再厉哦！</p>
    </div>
    <div class="reportWrap2">
      <div class="boxWrap">
        <div class="teacherWrap">
          <img :src="imgList.logo" class="logo2" alt />
          <div class="left">
            <img :src="teacherInfo.avatar" alt />
          </div>
          <div class="right">
            <p class="name">{{teacherInfo.teacherName }}</p>
            <p class="subject">{{teacherInfo.subjectName }}</p>
          </div>
        </div>
        <div class="textWrap">
          <p>
            <i class="num1"></i>
            <span>{{strList[0]}}</span>
          </p>
          <p>
            <i class="num2"></i>
            <span>{{strList[1]}}</span>
          </p>
          <p>
            <i class="num3"></i>
            <span>{{strList[2]}}</span>
          </p>
          <p>
            <i class="num4"></i>
            <span>{{strList[3]}}</span>
          </p>
        </div>
      </div>
    </div>
    <!-- <div class="button">继续学习</div> -->
  </div>
</template>
<script>
import { browser } from "@/common/common";
import { studyReport } from "@/api/teacher";
export default {
  data() {
    return {
      imgList: {
        title1: require("@/assets/images/start/title1.png"),
        title2: require("@/assets/images/start/title2.png"),
        title3: require("@/assets/images/start/title3.png"),
        default_head_img: require("@/assets/images/default_head_img.png"),
        logo: require("@/assets/images/start/logo.png"),
        excellent: require("@/assets/images/start/excellent.png"),
        good: require("@/assets/images/start/good.png"),
        normal: require("@/assets/images/start/normal.png"),
        squrt: require("@/assets/images/start/squrt.png"),
        btn: require("@/assets/images/start/button.png"),
        1: require("@/assets/images/start/1.png"),
        2: require("@/assets/images/start/2.png"),
        3: require("@/assets/images/start/3.png"),
        4: require("@/assets/images/start/4.png")
      },
      classGroupId: null,
      token: null,
      strList: [],
      studentInfo: {
        name: "",
        subjectName: "",
        times: "",
        totalMinutes: "",
        avatar: ""
      },
      teacherInfo: {},
      item: [],
      subjectJson: {
        '1': {
          title: "练习表现",
          1: "表现优异！你就是最闪亮的星！",
          2: "表现良好！你非常有潜力！",
          3: "偶尔开小差，还要加油哦！",
          icon: ""
        },
        '2': {
          title: "节奏准确度",
          1: "节奏优异！堪称人肉节拍器！",
          2: "基本准确！注意时值饱满哦！",
          3: "中等稳定！搭配练习节拍器会更好哦！",
          icon: ""
        },
        '3': {
          title: "音符准确度",
          1: "百发百中！棒极了！",
          2: "准确度良好！距离完美只有一步之遥！",
          3: "中等准确！稍加练习你一定会更好！",
          icon: ""
        },
        '4': {
          title: "演奏连贯度",
          1: "非常棒！你演奏一气呵成！",
          2: "良好！多注意乐句末的音符时值哦！",
          3: "继续努力！告诉自己，你一定能行的！",
          icon: ""
        }
      },
    };
  },
  created() {
    this.classGroupId = this.$route.query.classGroupId;
    this.token = localStorage.getItem("Authorization");
    if (!this.token || !this.classGroupId) {
      this.onAppBack();
      return;
    }
    studyReport({ classGroupId: this.classGroupId }).then(res => {
      if (res.data.code == 200) {
        
        this.studentInfo = {
          name: res.data.data.student.username || "",
          subjectName: res.data.data.subjectName,
          times: res.data.data.times,
          totalMinutes: res.data.data.totalMinutes,
          avatar: res.data.data.student.avatar || this.imgList.default_head_img
        };
        this.teacherInfo = {
          teacherName: res.data.data.teacher.name || "",
          subjectName: res.data.data.subjectName,
          avatar: res.data.data.teacher.headUrl || this.imgList.default_head_img
        };
          // 处理数据  1.item 
        this.item = res.data.data.item.split(',');
        this.strList = res.data.data.comment.split('#');
     
        for(let i=1; i<=this.item.length;i++){
          this.setIcon(this.subjectJson,this.item[i-1],i);
        }

      }
    });
  },
  methods: {
    onAppBack() {
      if (browser().android) {
        DAYA.postMessage(JSON.stringify({ api: "back" }));
      } else if (browser().iPhone) {
        window.webkit.messageHandlers.DAYA.postMessage(
          JSON.stringify({ api: "back" })
        );
      }
    },
    setIcon(object,str,index){
      switch(str){
        case '1':{
          object[index].icon = this.imgList.excellent
          break
        }
        case '2':{
          object[index].icon = this.imgList.good
          break
        }
        case '3':{
            object[index].icon = this.imgList.normal
          break
        }
         
      }
    }
  }
};
</script>
<style lang="less">
@font-face {
  font-family: myFirstFont;
  src: url("../../assets/images/start/din-bold.otf"),
    url("../../assets/images/start/din-bold.otf"); /* IE9+ */
}

div {
  box-sizing: border-box;
}
.container {
  font-size: 0.14rem;
  box-sizing: border-box;
  background-color: #fff;
  padding-top: 0.2rem;
  padding-bottom: 0.36rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  .logo {
    width: 1.03rem;
    height: 0.77rem;
    position: absolute;
    right: -0.15rem;
    top: -0.2rem;
  }
  .logo1 {
    width: 1.03rem;
    height: 0.77rem;
    position: absolute;
    right: 0rem;
    top: -0.08rem;
  }
  .logo2 {
    width: 1.03rem;
    height: 0.77rem;
    position: absolute;
    right: -0.2rem;
    top: -0.05rem;
  }
  .topWrap {
    background-color: #f6f6f6;
    width: 3.51rem;
    border-radius: 10px;
    padding: 0.16rem;
    margin-bottom: 0.26rem;
    color: #333;
    p {
      font-size: 0.14rem;
      line-height: 0.23rem;
      span {
        color: #28babd;
      }
    }
  }
  .titleWrap {
    margin-bottom: 0.24rem;
    img {
      width: 1.37rem;
      height: 0.74;
    }
    p {
      color: #666;
      line-height: 0.2rem;
      padding: 0 0.22rem;
    }
  }
  .reportWrap {
    width: 100%;
    padding: 0 0.22rem;
    margin-bottom: 0.28rem;
    .imgBox {
      width: 3.3rem;
      height: 4rem;
      background: url("../../assets/images/start/box1.png") no-repeat;
      background-size: 100% 100%;
      // margin-top: 0.22rem;
      display: flex;
      flex-direction: column;
      padding: 0.74rem 0.35rem 0;
      .studentWrap {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .left {
          width: 0.72rem;
          height: 0.72rem;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 0.13rem;
          img {
            width: 0.72rem;
            height: 0.72rem;
          }
        }
        .right {
          .name {
            font-size: 0.19rem;
          }
          .subject {
            font-size: 0.15rem;
          }
        }
      }
      .studentTimeWrap {
        padding: 0 0.08rem;
        margin-top: 0.2rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        margin-bottom: 0.3rem;
        div {
          .timeP {
            font-family: myFirstFont, Microsoft YaHei;
            font-size: 0.4rem;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            line-height: 0.45rem;
          }
          .descP {
            font-size: 0.13rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
            line-height: 0.2rem;
          }
        }
      }
      .assess {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #f6f6f6;
        p {
          box-sizing: border-box;
          padding: 0.17rem 0.13rem 0.17rem;
          width: 2.5rem;
          background: rgba(246, 246, 246, 1);
          border-radius: 5px;
          color: #666;
          span {
            font-weight: bold;
          }
        }
      }
    }
  }
  .reportWrap1 {
    width: 100%;
    padding: 0 0.22rem;
    margin-bottom: 0.28rem;

    .imgBox1 {
      position: relative;
      width: 3.3rem;
      height: 5.02rem;
      background: url("../../assets/images/start/box2.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0.6rem 0.22rem 0;
      .title {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        font-size: 0.21rem;
        height: 0.3rem;
        line-height: 0.3rem;
        margin: 0.1rem 0;
        padding: 0 0.16rem;
        color: #000;
        .squrt {
          width: 0.05rem;
          height: 0.22rem;
          margin-right: 0.1rem;
        }
      }
      .cell.activce {
        border: 1px solid #28babd;
        color: #28babd;
      }
      .cell {
        width: 2.6rem;
        height: 0.36rem;
        line-height: 0.36rem;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        flex-direction: row;
        align-items: center;
        border-radius: 21px;
        box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.14);
        background-color: #fff;
        font-size: 0.12rem;
        margin-bottom: 0.125rem;
        border: 1px solid transparent;
        .icons {
          width: 0.22rem;
          height: 0.22rem;
          margin: 0 0.105rem;
        }
      }
    }
  }
  .reportWrap2 {
    padding: 0 0.22rem;
    background: url("../../assets/images/start/box3.png") no-repeat;
    background-size: 100% 100%;
    width: 3.33rem;
    min-height: 5.31rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .teacherWrap {
      margin-top: 0.6rem;
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .left {
        width: 0.72rem;
        height: 0.72rem;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 0.13rem;
        img {
          width: 0.72rem;
          height: 0.72rem;
        }
      }
      .right {
        .name {
          font-size: 0.19rem;
        }
        .subject {
          font-size: 0.15rem;
        }
      }
    }

    .textWrap {
      width: 2.5rem;
      max-height: 3.2rem;
      overflow: scroll;
      padding: 0.16rem 0.08rem 0.22rem;
      background-color: #f6f6f6;
      border-radius: 5px;
      margin-top: 0.24rem;
      p {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        margin-bottom: 0.1rem;
        i {
          display: block;
          width: 0.19rem;
          height: 0.16rem;
          margin-right: 0.06rem;
          position: relative;
          top: 2px;
        }
        span {
          width: 2.25rem;
          font-size: 0.12rem;
          line-height: 0.18rem;
          color: #666;
        }
        .num1 {
          background: url("../../assets/images/start/1.png") no-repeat;
          background-size: 100% 100%;
        }
        .num2 {
          background: url("../../assets/images/start/2.png") no-repeat;
          background-size: 100% 100%;
        }

        .num3 {
          background: url("../../assets/images/start/3.png") no-repeat;
          background-size: 100% 100%;
        }

        .num4 {
          background: url("../../assets/images/start/4.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  .button {
    width: 3.2rem;
    height: 0.5rem;
    line-height: 0.5rem;
    text-align: center;
    margin-top: 0.27rem;
    font-size: 0.18rem;
    color: #fff;
    background: linear-gradient(
      90deg,
      rgba(97, 194, 196, 1) 0%,
      rgba(62, 174, 176, 1) 100%
    );
    border-radius: 0.25rem;
  }
}
</style>