dy-admin-manager/src/views/operateManager/serverIndexDetail.vue

<template >
  <div class="m-container">
    <h2>
      <!-- <div class="squrt"></div> -->
      <el-page-header @back="goBack" :content="studentName"> </el-page-header>
    </h2>

    <el-card
      class="box-card"
      v-for="(card, index) in dataList"
      :key="index + 'index'"
      style="width: 1200px"
    >
      <p class="timeTitle">{{ card.monday }} - {{ card.sunday }}</p>
      <div
        class="listWrap"
        v-for="(item, subIndex) in card.data"
        :key="subIndex"
      >
        <div class="m-row">
          <div class="textWrap">
            <p class="title">类型 :</p>
            <p class="contant">
              {{ item.homeworkType == "HOMEWORK" ? "课堂训练" : "课外训练" }}
            </p>
          </div>
          <div class="textWrap">
            <p class="title">布置时间 :</p>
            <p
              class="contant"
              v-if="item.homeworkCreateTime"
              style="width: 150px"
            >
              {{ item.homeworkCreateTime | dateForMinFormat }}
            </p>
          </div>
          <div class="textWrap">
            <p class="title">是否点评 :</p>
            <p class="contant">{{ item.isReplied ? "是" : "否" }}</p>
          </div>
        </div>
        <div class="m-row" v-if="item.homeworkType == 'HOMEWORK'">
          <div class="textWrap">
            <p class="title">课程组 :</p>
            <p class="contant">{{ item.groupName }}</p>
          </div>

          <div class="textWrap">
            <p class="title">课程编号 :</p>
            <p
              class="contant"
              style="width: 150px"
              v-if="item.courseScheduleId"
            >
              {{ item.courseScheduleId }}
            </p>
          </div>
          <div class="textWrap">
            <p class="title">上课时间 :</p>
            <p class="contant" style="width: 150px" v-if="item.courseStartTime">
              {{ item.courseStartTime | dateForMinFormat }}
            </p>
          </div>
        </div>
        <div class="m-row">
          <div class="textWrap">
            <p class="title">指导老师 :</p>
            <p class="contant">{{ item.teacherName }}</p>
          </div>
          <div class="textWrap">
            <p class="title">提交时间 :</p>
            <p class="contant" v-if="item.submitTime" style="width: 150px">
              {{ item.submitTime | dateForMinFormat }}
            </p>
          </div>
        </div>
        <div class="arrowBox" @click="getComment(item, index, subIndex)">
          <div class="border">
            <i :class="item.up ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
          </div>
        </div>

        <div style="margin-top: 20px">
          <el-collapse-transition>
            <div v-show="item.up">
              <div class="transition-box">
                <div class="cell">
                  <p style="width: 80px; padding-top: 4px">训练内容:</p>
                  <el-input
                    type="textarea"
                    :disabled="true"
                    :rows="3"
                    :value="item.content"
                    style="font-size: 16px"
                    placeholder="老师布置的训练"
                  ></el-input>
                </div>
                <div class="cell">
                  <p style="width: 80px">查看训练:</p>
                  <div v-for="(some, index) in item.homeWork" :key="index">
                    <p class="homeWork" v-if="some" @click="openVideo(some)">
                      训练{{ index + 1 }}
                    </p>
                  </div>
                </div>
              </div>
              <div class="msgWrap">
                <div
                  class="msgLi"
                  v-for="(msg, index) in activeCommit"
                  :key="index"
                >
                  <div class="info">
                    <p>{{ msg.userName }}</p>
                    <p style="color: #999" v-if="msg.createTime">
                      {{ msg.createTime | dateForMinFormat }}
                    </p>
                  </div>
                  <p class="contant" v-if="msg.msgType == 'TXT'">
                    {{ msg.content }}
                  </p>
                  <el-image
                    style="width: 100px; height: 100px"
                    fit="cover"
                    v-if="msg.msgType == 'IMG'"
                    :src="msg.content"
                    :preview-src-list="[msg.content]"
                  >
                  </el-image>
                  <p
                    v-if="msg.msgType == 'VC'"
                    class="contant"
                    style="color: #1890ff"
                    @click="openAideo(msg.content)"
                  >
                    播放语音
                  </p>
                </div>
              </div>
            </div>
          </el-collapse-transition>
        </div>
        <el-divider></el-divider>
      </div>
    </el-card>
    <el-dialog
      title="查看训练"
      width="360px"
      append-to-body
      :visible.sync="workVisible"
    >
      <!-- activeUrl -->
      <video
        style="width: 320px"
        id="video"
        :src="activeUrl"
        ref="dialogVideo"
        controls="controls"
      >
        您的浏览器不支持视频播放
      </video>
    </el-dialog>
    <el-dialog
      title="查看评论"
      width="680px"
      append-to-body
      :visible.sync="comVisible"
    >
      <audio
        id="audio"
        controls
        style="width: 640px"
        :src="comUrl"
        ref="dialogVideo"
      >
        您的浏览器不支持视频播放
      </audio>
    </el-dialog>
  </div>
</template>
<script>
import {
  findServiceStudentDetail,
  findStudentHomeworkComments,
} from "@/api/operateManager";
export default {
  data() {
    return {
      studentId: null,
      monday: null,
      sunday: null,
      studentName: null,
      show3: false,
      dataList: [],
      activeCommit: [],
      activeUrl: null,
      workVisible: false,
      comUrl: null,
      comVisible: null,
      Fsearch: null,
      Frules: null,
    };
  },
  mounted() {
    this.init();
  },
  activated() {
    this.init();
  },
  methods: {
    init() {
      this.studentId = this.$route.query.studentId;
      this.studentName = this.$route.query.studentName;
      this.monday = this.$route.query.startTime;
      this.sunday = this.$route.query.endTime;
      // 判断是否带缓存参数
      if (this.$route.query.search) {
        this.Fsearch = this.$route.query.search;
      }
      if (this.$route.query.rules) {
        this.Frules = this.$route.query.rules;
      }
      findServiceStudentDetail({
        studentId: this.studentId,
        monday: this.monday,
        sunday: this.sunday,
        rows: 9999,
      }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data;
          for (let i in this.dataList) {
            this.dataList[i].sunday = this.getNowDateAndSunday(
              this.dataList[i].monday
            );
            this.dataList[i].data = this.dataList[i].data.map((res) => {
              res.up = false;
              res.homeWork = res.attachments.split(",");
              return res;
            });
          }
          // this.dataList = res.data.rows.
        }
      });
    },
    goBack() {
       this.$store.dispatch('delVisitedViews', this.$route)
      this.$router.push({
        path: "/serverIndexManager/serverIndexList",
      });
    },
    getComment(item, index, subIndex) {
      // 数据处理
      if (item.up) {
        item.up = false;
        this.$forceUpdate();
        // item.up = false;
      } else {
        let extra;
        if (item.homeworkType == "EXTRA") {
          extra = 1;
        } else {
          extra = 0;
        }

        findStudentHomeworkComments({
          studentCourseHomeworkId: item.studentHomeworkId,
          extra,
          rows: 9999,
        }).then((res) => {
          if (res.code == 200) {
            this.activeCommit = res.data.rows;
            // item.up = false
            for (let i in this.dataList) {
              this.dataList[i].data = this.dataList[i].data.map((res) => {
                res.up = false;
                return res;
              });
            }
            item.up = true;
          }
        });
      }
    },
    openAideo(src) {
      this.comUrl = src;
      this.comVisible = true;
    },
    openVideo(src) {
      this.activeUrl = src;
      this.workVisible = true;
    },
    getNowDateAndSunday(time) {
      let timestamp = new Date(time.replace(/-/g, "/")).getTime();
      let serverDate = new Date(time);

      let num = 7 - serverDate.getDay();
      if (num == 7) {
        num = 0;
      }
      let sundayTiem = timestamp + num * 24 * 60 * 60 * 1000;
      let SundayData = new Date(sundayTiem);
      //年
      let tomorrowY = SundayData.getFullYear(); //月
      let tomorrowM =
        SundayData.getMonth() + 1 < 10
          ? "0" + (SundayData.getMonth() + 1)
          : SundayData.getMonth() + 1;
      //日
      let tomorrowD =
        SundayData.getDate() < 10
          ? "0" + SundayData.getDate()
          : SundayData.getDate();
      let str = tomorrowY + "-" + tomorrowM + "-" + tomorrowD;
      return str;
    },
  },
  watch: {
    workVisible(val) {
      if (!val) {
        let video = document.querySelector("#video");
        video.pause();
        video.currentTime = 0;
        this.activeUrl = null;
      }
    },
    comVisible(val) {
      if (!val) {
        let audio = document.querySelector("#audio");
        audio.pause();
        audio.currentTime = 0;
        this.comUrl = null;
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.timeTitle {
  margin-bottom: 20px;
}
.box-card {
  margin-bottom: 30px;
  .listWrap {
    cursor: pointer;
    margin-bottom: 50px;
    .m-row {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      font-size: 14px;
      .textWrap {
        margin-right: 150px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        p {
          line-height: 30px;
        }
        .title {
          width: 80px;
          margin-right: 10px;
          text-align: left;
        }
        .contant {
          text-align: left;
          width: 150px;
        }
      }
    }
    .arrowBox {
      display: flex;
      flex-direction: row;
      justify-content: center;

      .border {
        margin-top: 20px;
        width: 120px;
        border: 1px solid #dedede;
        border-radius: 5px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        height: 30px;
        line-height: 30px;
        i {
          font-size: 18px;
          line-height: 30px;
          color: #999;
        }
      }
    }
  }
  .cell {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 20px;
    line-height: 30px;
    font-size: 14px;
    .homeWork {
      width: 80px;
      text-align: center;
      border: 1px solid #e5e5e5;
      height: 30px;
      line-height: 30px;
      border-radius: 4px;
      margin-right: 20px;
      font-size: 14px;
      cursor: pointer;
    }
  }

  .msgWrap {
    border: 1px solid #e5e5e5;
    padding: 5px 20px;
    border-radius: 5px;
    min-height: 150px;
    overflow: auto;
    font-size: 14px;
    .msgLi {
      padding: 10px 0;
      .info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 10px;
        padding: 0 10px;
      }
      .contant {
        border-bottom: 1px solid #ededed;
        line-height: 30px;
        padding: 0 10px;
        color: #666;
      }
    }
  }
}
</style>