kmt/src/pages/home/AllHomeWorkPictrue.vue

<!-- 活动解析 -->
<template>
  <div>
    <!-- table 表格 -->
    <el-row :gutter="24" class="main-items">
      <el-col :span="24" class="main" :offset="2">
        <el-row>
          <el-col :span="24" class :offset="2">
            <div class="studentInfo">
              <span class="studentName">{{StudentHomework01Detail.name}}同学/{{StudentHomework01Detail.subject}}作业</span>
              <span v-if="StudentHomework01Detail.status ==1" style="color:#52cc60;">/未分配</span>
               <span v-if="StudentHomework01Detail.status ==2" style="color:#52cc60;">/已分配未批改</span>
             <span v-if="StudentHomework01Detail.status ==3" style="color:#52cc60;">/批改中</span>
              <br />
              <span class="timeInfo">{{StudentHomework01Detail.statusTime}}</span>
            </div>
          
          </el-col>
          <el-col :span="20" class :offset="2">
            <div class="topLine"></div>
          </el-col>
          <el-col :span="20" class="pictrueShowList" :offset="2">
              <!-- {{StudentHomework01Detail}} -->
            <div class="beginPictrue" v-if="StudentHomework01Detail.originPicList !== undefined && StudentHomework01Detail.originPicList.length >0">
              <div class="studentName">原图</div>
              <ul>
                <li class="picLists" @click="pictrueAddView(v)" v-for="(v, k) of StudentHomework01Detail.originPicList" :key="k">
                    <div class="imgLists">
                      <img :src="BASE_URL + v.url" alt class="table-img pictrueStyle" v-if="v.url"  />
                      <img src="../../assets/img/attt.png" alt v-if="v.url ==''"  class="table-img pictrueStyle"/>
                      <div v-if="v.type ==21" class="TeacherWords">已分配给其他老师</div>
                      <div v-if="v.type ==22"  class="TeacherWords">作文有评语</div>
                  </div>
                  <!-- 模糊 -->
                  <img v-if="v.type ==1" class="logoPic" src="../../assets/img/Mohu (1).png" />
                  <!-- 不全 -->
                  <img v-if="v.type ==3" class="logoPic" src="../../assets/img/Reless (3).png" />
                  <!-- 登记 -->
                  <img  v-if="v.type ==22" class="logoPic" src="../../assets/img/sigin (3).png" />
                  <!-- 补拍 -->
                  <img v-if="v.type ==2" class="logoPic" src="../../assets/img/ReCamrea (1).png" />
                  <!-- 不批改 -->
                  <img v-if="v.type ==10" class="logoPic" src="../../assets/img/NoReset (1).png" />
                  <div class="operateTime" v-if="v.operateTime">{{v.operateTime}}上传</div>
                   <div class="operateTime" >
                        <span class="teacherImgUrl">
                          <img :src="BASE_URL + v.teacherImgUrl" alt="">
                        </span>
                         <span v-if="v.teacherName">{{v.teacherName}}老师批改</span>      
                      </div>
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="20" class="pictrueShowList" :offset="2">
            <div class="beginPictrue" v-if="StudentHomework01Detail.correctPicList !== undefined && StudentHomework01Detail.correctPicList.length >0">
              <div class="studentName">批改图片</div>
              <ul>
                <li class="picLists" @click="pictrueAddView(v)" v-for="(v, k) of StudentHomework01Detail.correctPicList" :key="k">
                     <div class="imgLists">
                      <img :src="BASE_URL + v.url" alt class="table-img pictrueStyle" v-if="v.url"  />
                      <img src="../../assets/img/attt.png" alt v-if="v.url ==''"  class="table-img pictrueStyle"/>
                      <div v-if="v.type ==21" class="TeacherWords">已分配给其他老师</div>
                      <div v-if="v.type ==22"  class="TeacherWords">作文有评语</div>
                  </div>
                  <!-- 模糊 -->
                  <img v-if="v.type ==1" class="logoPic" src="../../assets/img/Mohu (1).png" />
                  <!-- 不全 -->
                  <img v-if="v.type ==3" class="logoPic" src="../../assets/img/Reless (3).png" />
                  <!-- 登记 -->
                  <img  v-if="v.type ==22" class="logoPic" src="../../assets/img/sigin (3).png" />
                  <!-- 补拍 -->
                  <img v-if="v.type ==2" class="logoPic" src="../../assets/img/ReCamrea (1).png" />
                  <!-- 不批改 -->
                  <img v-if="v.type ==10" class="logoPic" src="../../assets/img/NoReset (1).png" />
                     <div class="operateTime" v-if="v.startTime">{{v.startTime}}开始批改</div>
                     <div class="operateTime" v-if="v.operateTime">{{v.operateTime}}批改完</div>
                      <div class="operateTime">
                        <span class="teacherImgUrl">
                          <img :src="BASE_URL + v.teacherImgUrl" alt="">
                        </span>
                         <span v-if="v.teacherName">{{v.teacherName}}老师批改</span>      
                      </div>
                </li>
              </ul>
            </div>
          </el-col>
           <el-col :span="20" class="pictrueShowList" :offset="2">
            <div class="beginPictrue" v-if="StudentHomework01Detail.matchPicList !== undefined && StudentHomework01Detail.matchPicList.length >0">
              <div class="studentName">匹配照片</div>
              <ul>
                <li class="picLists" @click="pictrueAddView(v)" v-for="(v, k) of StudentHomework01Detail.matchPicList" :key="k">
                    <div class="imgLists">
                      <img :src="BASE_URL + v.url" alt class="table-img pictrueStyle" v-if="v.url"  />
                      <img src="../../assets/img/attt.png" alt v-if="v.url ==''"  class="table-img pictrueStyle"/>
                      <div v-if="v.type ==21" class="TeacherWords">已分配给其他老师</div>
                      <div v-if="v.type ==22"  class="TeacherWords">作文有评语</div>
                  </div>
                  <!-- 模糊 -->
                  <img v-if="v.type ==1" class="logoPic" src="../../assets/img/Mohu (1).png" />
                  <!-- 不全 -->
                  <img v-if="v.type ==3" class="logoPic" src="../../assets/img/Reless (3).png" />
                  <!-- 登记 -->
                  <img  v-if="v.type ==22" class="logoPic" src="../../assets/img/sigin (3).png" />
                  <!-- 补拍 -->
                  <img v-if="v.type ==2" class="logoPic" src="../../assets/img/ReCamrea (1).png" />
                  <!-- 不批改 -->
                  <img v-if="v.type ==10" class="logoPic" src="../../assets/img/NoReset (1).png" />
                     <div class="operateTime" v-if="v.startTime">{{v.startTime}}开始匹配</div>
                     <div class="operateTime" v-if="v.operateTime">{{v.operateTime}}匹配完</div>
                     <div class="operateTime" v-if="!v.operateTime">未匹配</div>
                       <div class="operateTime">
                        <span class="teacherImgUrl">
                          <img :src="BASE_URL + v.teacherImgUrl" alt="">
                        </span>
                         <span v-if="v.teacherName"> {{v.teacherName}}老师匹配</span>      
                      </div>
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="20" class="pictrueShowList" :offset="2">
            <div class="beginPictrue" v-if="StudentHomework01Detail.checkCorrectPicList !== undefined && StudentHomework01Detail.checkCorrectPicList.length >0">
              <div class="studentName">作业批改质检</div>
              <ul>
                <li class="picLists" @click="pictrueAddView(v)" v-for="(v, k) of StudentHomework01Detail.checkCorrectPicList" :key="k">
                   <div class="imgLists">
                      <img :src="BASE_URL + v.url" alt class="table-img pictrueStyle" v-if="v.url"  />
                      <img src="../../assets/img/attt.png" alt v-if="v.url ==''"  class="table-img pictrueStyle"/>
                      <div v-if="v.type ==21" class="TeacherWords">已分配给其他老师</div>
                      <div v-if="v.type ==22"  class="TeacherWords">作文有评语</div>
                  </div>
                  <!-- 模糊 -->
                  <img v-if="v.type ==1" class="logoPic" src="../../assets/img/Mohu (1).png" />
                  <!-- 不全 -->
                  <img v-if="v.type ==3" class="logoPic" src="../../assets/img/Reless (3).png" />
                  <!-- 登记 -->
                  <img  v-if="v.type ==22" class="logoPic" src="../../assets/img/sigin (3).png" />
                  <!-- 补拍 -->
                  <img v-if="v.type ==2" class="logoPic" src="../../assets/img/ReCamrea (1).png" />
                  <!-- 不批改 -->
                  <img v-if="v.type ==10" class="logoPic" src="../../assets/img/NoReset (1).png" />
                    <!-- 报错 -->
                  <img v-if="v.type ==23" class="logoPic" src="../../assets/img/wrong (3).png" />
                     <div class="operateTime" v-if="v.operateTime">{{v.operateTime}}质检完</div>
                     <div class="operateTime" v-if="!v.operateTime">未质检</div>
                       <div class="operateTime">
                        <span class="teacherImgUrl">
                          <img :src="BASE_URL + v.teacherImgUrl" alt="">
                        </span>
                         <span v-if="v.teacherName">{{v.teacherName}}老师质检</span>      
                      </div>
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="20" class="pictrueShowList" :offset="2">
            <div class="beginPictrue" v-if="StudentHomework01Detail.checkMatchPicList !== undefined && StudentHomework01Detail.checkMatchPicList.length >0">
              <div class="studentName">匹配知识点质检</div>
              <ul>
                <li class="picLists" @click="pictrueAddView(v)" v-for="(v, k) of StudentHomework01Detail.checkMatchPicList" :key="k">
                    <div class="imgLists">
                      <img :src="BASE_URL + v.url" alt class="table-img pictrueStyle" v-if="v.url"  />
                      <img src="../../assets/img/attt.png" alt v-if="v.url ==''"  class="table-img pictrueStyle"/>
                      <div v-if="v.type ==21" class="TeacherWords">已分配给其他老师</div>
                      <div v-if="v.type ==22"  class="TeacherWords">作文有评语</div>
                  </div>
                  <!-- 模糊 -->
                  <img v-if="v.type ==1" class="logoPic" src="../../assets/img/Mohu (1).png" />
                  <!-- 不全 -->
                  <img v-if="v.type ==3" class="logoPic" src="../../assets/img/Reless (3).png" />
                  <!-- 登记 -->
                  <img  v-if="v.type ==22" class="logoPic" src="../../assets/img/sigin (3).png" />
                  <!-- 补拍 -->
                  <img v-if="v.type ==2" class="logoPic" src="../../assets/img/ReCamrea (1).png" />
                  <!-- 不批改 -->
                  <img v-if="v.type ==10" class="logoPic" src="../../assets/img/NoReset (1).png" />
                  <!-- 报错 -->
                  <img v-if="v.type ==23" class="logoPic" src="../../assets/img/wrong (3).png" />
                  
                  <div class="operateTime" v-if="v.operateTime">{{v.operateTime}}质检完</div>
                     <div class="operateTime" v-if="!v.operateTime">未质检</div>
                       <div class="operateTime">
                        <span class="teacherImgUrl">
                          <img :src="BASE_URL + v.teacherImgUrl" alt="">
                        </span>
                         <span v-if="v.teacherName">{{v.teacherName}}老师质检</span>      
                      </div>
                </li>
              </ul>
            </div>
          </el-col>
            <el-col :span="20" class :offset="2">
            <div style="margin-top:200px; text-align:center;">
              <el-button @click="routerback()" type="success" round>返回</el-button>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- -->
    <div class="showModel" @click="allShowModel(1)" v-if="PictruePush"></div>
    <div class="modelspec" v-if="PictruePush">
      <div class="detaillogo">
        <img src="../../assets/img/del@2x.png" alt @click="allShowModel(1)" />
      </div>
      <img class="LargepictrueStyle" :src="BASE_URL + this.PrewPictrue " />
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { IMG_BASE_URL, APPOR_BASE_URL } from "@/config";
export default {
  components: {},
  name: "",
  props: {},
  data() {
    return {
      BASE_URL: IMG_BASE_URL,
      PictruePush: false,
      PrewPictrue:"",
      homeworkId:""
    };
  },
  created() {
     const homeworkId = this.$route.query.homeworkId;
    this.homeworkId = homeworkId;
  },
  methods: {
    pictrueAddView(v) {
        this.PrewPictrue = v.url
      this.PictruePush = true;
    },
        // 回退
    routerback() {
      this.$router.back(-1);
    },
    GetStudentHomework01DetailList(){
          this.$store.dispatch("GetStudentHomework01Detail", {
        homeworkId: this.homeworkId,
      });
    },
    //关闭弹框
    allShowModel(str) {
      let _this = this;
      if (str == 1) {
        _this.PictruePush = false;
      }
    }
  },
  watch: {},
  mounted() {
    this.GetStudentHomework01DetailList()
  },
  computed: {
    ...mapGetters(["StudentHomework01Detail"])
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  background-color: #fff;
  margin-top: 16px;
  padding: 0 !important;
  border: 1px solid #e1e1e1;
  min-height: 980px;
}

.topLine {
  width: 100%;
  background-color: rgba(207, 204, 204, 0.815);
  height: 1px;
}
.picLists {
  position: relative;
  width: 200px;
}
.imgLists{
    position: relative;
  width: 250px;
}
.TeacherWords {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 50px;
  background: #000000;
  text-align: center;
  line-height: 50px;
  opacity: 0.4;
  color: #ffff;
  font-size: 8px;
}
.logoPic {
  position: absolute;
  top: 0;
  right: -50px;
}
.userstyle {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}
.operateTime{
  height: 20px;
  margin-top:10px;
  width:600px;
  text-align:left;
}
.studentInfo {
  display: inline-block;
  float: left;
  /* height: 70px; */
  margin-top: 30px;
  text-align: left;
}
.pictrueShowList{
  margin-top:100px;
}
.loginMock {
  color: #333333;
  font-size: 14px;
  display: inline-block;
  float: right;
  margin-top: 30px;
}
.timeInfo {
  color: #999999;
  font-size: 14px;
}
.studentName {
  font-size: 25px;
  color: black;
  width: 300px;
  text-align: left;
  margin:50px 0px;
}
.teacherImgUrl{
  height: 30px;
  width: 30px;
}
.teacherImgUrl img{
  height: 30px;
  width: 30px;
  border-radius: 15px;
}
.pictrueStyle {
  width: 250px;
  height: 250px;
  border-radius: 5px;
}
.beginPictrue ul li {
  float: left;
  margin: 30px 100px 30px 0px;
  cursor: pointer;
}
.showModel {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
.modelspec {
  margin: 0 auto;
}
.LargepictrueStyle {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.modelspec {
  z-index: 10000;
  width: 50%;
  /* height: 100%; */
  height: auto;
  position: fixed;
  top: 10%;
  left: 25%;
  bottom: 10%;
  margin: auto;
  border-radius: 10px;
  text-align: center;
}
.detaillogo {
  position: fixed;
  top: 5%;
  right: 13%;
  cursor: pointer;
}
</style>