pbl-teacher-table/src/components/pages/test/check/index.vue

<template>
  <div class="pb_content" style="background: #f0f2f5;" v-loading="loading">
    <div class="pb_content_body" style="position: relative; margin: 0">
      <div class="right">
        <div class="courseTop">
          <div class="stepsNav">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{
                path:
                  '/test?userid=' +
                  userid +
                  '&oid=' +
                  oid +
                  '&org=' +
                  org +
                  '&role=' +
                  role,
              }">表单管理</el-breadcrumb-item>
              <el-breadcrumb-item>
                <span style="color: rgb(15, 126, 255)">查看表单</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="r_pub_button_retrun" @click="retrunCourse">返回</div>
        </div>
        <div class="step_box" ref="stepBox">
          <div class="test_title">
            <div class="left">
              <div class="title">{{ testJson.title }}</div>
              <div class="info">
                <div class="info_box" v-if="testJson.typeN">
                  <span>类型：</span>
                  <span>{{ testJson.typeN }}</span>
                </div>
                <div class="info_box">
                  <span>填写范围：</span>
                  <span>{{ testJson.juriP ? testJson.juriP : '所有人' }}</span>
                </div>
                <div class="info_box" v-if="testJson.overtime">
                  <span>截止时间：</span>
                  <span>{{ testJson.overtime }}</span>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="data_box">
                <span>提交数量</span>
                <span><span class="big">{{ works.length }}</span>份</span>
              </div>
              <div class="data_box" v-if="testJson.juriP">
                <span>表单完成率</span>
                <span><span class="big">{{ (iscount / pcount * 100).toFixed(0) }}</span>%</span>
              </div>
              <div class="data_box" v-if="testJson.juriP">
                <span>未完成人数</span>
                <span><span class="big">{{ pcount - iscount }}</span></span>
              </div>
              <div class="btn_box" @click="dialogVisibleShare = true">
                <span></span>
                <span>提醒</span>
              </div>
            </div>
          </div>
          <div class="search_nav">
            <div class="right">
              <span :class="{ active: stype == 1 }" @click="checkDataType(1)">按题目查看</span>
              <span :class="{ active: stype == 2 }" @click="checkDataType(2)">按人员查看</span>
            </div>
            <div class="left">
              <div style="margin-right: 10px;position: relative;" v-if="stype == 2">
                <el-input v-model="courseName" class="student_input" placeholder="请输入需要搜索的姓名"></el-input>
                <span class="serach_icon" @click="searchCourse"></span>
              </div>
            </div>
          </div>
          <div class="title_content" v-if="stype == 1">
            <div class="title_box" v-if="!testArray.length"
              style="display: flex;align-items: center;justify-content: center;height: 500px;">
              暂无内容
            </div>
            <div class="title_box" v-for="(item, index) in testArray" :key="index">
              <div class="title">
                <el-tooltip :content="selectType(item)" placement="top" effect="dark">
                  <span class="test_icon"
                    :class="{ test_icon_check: item.type == 1 && item.atype == 2, test_icon_checkO: item.type == 1 && item.atype == 1, test_icon_gap: item.type == 3, test_icon_file: item.type == 5 }"></span>
                </el-tooltip>
                <span>{{ item.title }}</span>
              </div>
              <div class="detail" v-if="item.detail">{{ item.detail }}</div>
              <div class="content1" v-if="item.type == 1">
                <div class="left">
                  <div class="title">
                    <span>选项</span>
                    <span>小计</span>
                    <span>比例</span>
                  </div>
                  <div class="data" v-for="(data, index2) in item.array" :key="index + '-' + index2">
                    <span>
                      <el-tooltip :content="data.name" placement="top" effect="dark">
                        <!-- content to trigger tooltip here -->
                        <span>{{ data.name }}</span>
                      </el-tooltip>
                    </span>
                    <span>{{ data.count }}</span>
                    <span>
                      <el-progress style="display: flex;align-items: center;" :stroke-width="12" color="#3681fc"
                        :percentage="data.count ? parseFloat(((data.count / item.count) * 100).toFixed(2)) : 0"></el-progress>
                    </span>
                  </div>
                </div>
                <div class="right">
                  <checkPie :dataJ="item.array"></checkPie>
                </div>
              </div>
              <div class="content2" v-if="item.type == 3">
                <div class="left">
                  <div class="title">
                    <span>序号</span>
                    <span>词频</span>
                    <span>答案文本</span>
                  </div>
                  <div class="data" v-for="(data, index2) in item.array" :key="index + '-' + index2">
                    <span>{{ index2 + 1 }}</span>
                    <span>{{ data.count }}次</span>
                    <el-tooltip :content="data.name" placement="top" effect="dark">
                      <!-- content to trigger tooltip here -->
                      <span>{{ data.name }}</span>
                    </el-tooltip>
                  </div>
                </div>
                <div class="right">
                  <wordcloud :data="item.array" nameKey="name" valueKey="count" :showTooltip="false"
                    :wordClick="wordClickHandler">
                  </wordcloud>
                </div>
              </div>
              <div class="content3" v-if="item.type == 5">
                <div class="file" v-for="(file, index2) in item.array" :key="index + '-' + index2"
                  @click.stop="checkFile(file)">
                  <img class="download" src="../../../../assets/icon/fileIcon/download.png"
                    @click.stop="downloadFile(file)" :style="{ right: '10px' }" />
                  <img class="img" :src="wordIcon" alt="" v-if="file.type == 1" />
                  <img class="img" :src="videoIcon" alt="" v-if="file.type == 2" />
                  <img class="img" :src="file.url" alt="" v-if="file.type == 3" />
                  <img class="img" :src="wordIcon" alt="" v-if="file.type == 4" />
                  <img class="img" :src="fileIcon" alt="" v-if="file.type == 5" />
                  <div class="name">
                    <el-tooltip :content="file.name" placement="top" effect="dark">
                      <span>{{ file.name }}</span>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="table_content" v-if="stype == 2">
            <el-table class="el-table" ref="table" :data="worksArray" border :height="tableHeight" :fit="true" :key="2"
              v-loading="isLoading" style="width: 100%" :header-cell-style="{ background: '#f1f1f1', fontSize: '17px' }">
              <el-table-column fixed label="序号" width="80px" align="left">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column fixed prop="name" label="提交人" width="120px" align="left">
              </el-table-column>
              <el-table-column prop="time" label="提交时间" width="170px" align="left">
              </el-table-column>
              <el-table-column v-for="(item, index) in chapters" :key="index" :label="item.json.title" min-width="150"
                align="left" 
                :filters="item.type == 1 ? item.nameFilters : null"
                :filter-method="item.type == 1 ? (value,row)=>{return filterName(value,row,index)} : null"
                :filter-placement="item.type == 1 ? filterPlacement : null">
                <template slot-scope="scope">
                  <div v-if="scope.row.array[index].type == 1" style="display: flex; flex-wrap: wrap;">
                    <span class="answer_type" v-for="(answer2, index2) in scope.row.array[index].json.answer2"
                      :key="index + '-' + index2">{{ scope.row.array[index].json.array[answer2].option }}</span>
                  </div>
                  <div v-if="scope.row.array[index].type == 3" style="display: flex; flex-wrap: wrap;">
                    {{ scope.row.array[index].json.answer2 }}
                  </div>
                  <div v-if="scope.row.array[index].type == 5" style="display: flex; flex-wrap: wrap;" class="table_file">
                    <div class="file" v-for="(file, index2) in scope.row.array[index].json.file"
                      :key="index + '-' + index2" @click.stop="checkFile(file)">
                      <img class="download" src="../../../../assets/icon/fileIcon/download.png"
                        @click.stop="downloadFile(file)" :style="{ right: '10px' }" />
                      <img class="img" :src="wordIcon" alt="" v-if="file.type == 1" />
                      <img class="img" :src="videoIcon" alt="" v-if="file.type == 2" />
                      <img class="img" :src="file.url" alt="" v-if="file.type == 3" />
                      <img class="img" :src="wordIcon" alt="" v-if="file.type == 4" />
                      <img class="img" :src="fileIcon" alt="" v-if="file.type == 5" />
                      <div class="name">
                        <el-tooltip :content="file.name" placement="top" effect="dark">
                          <span>{{ file.name }}</span>
                        </el-tooltip>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200px" fixed="right">
                <template slot-scope="scope">
                  <el-button @click="getTest(scope.row)" type="primary" size="small">查看</el-button>
                  <el-button @click="deleteTest(scope.row.id)" type="primary" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <share-box :testJson="testJson" :dialogVisibleShare.sync="dialogVisibleShare"></share-box>
    <wpdf :dialogVisiblePdf.sync="dialogVisiblePdf" :url="wurl"></wpdf>
    <wVideo :dialogVisibleVideo.sync="dialogVisibleVideo" :url="wurl"></wVideo>
    <wOffice :dialogVisibleOffice.sync="dialogVisibleOffice" :url="wurl"></wOffice>
  </div>
</template>

<script>
import shareBox from '../shareBox/index.vue'
import videoIcon from '../../../../assets/icon/fileIcon/isVideo.png'
import wordIcon from '../../../../assets/icon/fileIcon/isWord.png'
import fileIcon from '../../../../assets/icon/fileIcon/word2.png'

import wVideo from "../file/wVideo.vue";
import wpdf from "../file/wPdf2.vue";
import wOffice from "../file/wOffice.vue";

import wordcloud from 'vue-wordcloud';
import checkPie from '../data/checkPie.vue';
export default {
  components: {
    shareBox,
    wVideo,
    wpdf,
    wOffice,
    checkPie,
    wordcloud
  },
  data() {
    return {
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      role: this.$route.query.role,
      cid: this.$route.query.cid,
      title: "",
      testType: [],
      see: false,
      cJson: [],
      loading: false,
      look: "",
      tableHeight: 500,
      isLoading: false,
      pageSize: 10,
      total: 0,
      page: 1,
      tableData: [],
      testJson: {},
      works: [],
      iscount: 0,
      pcount: 0,
      stype: 1,
      courseName: "",
      dialogVisibleShare: false,
      worksArray: [],
      testArray: [],
      options2: {
        1: "选择题",
        // 2: "问答题",
        3: "问答题",
        4: "添加文档",
        5: "附件"
      },
      videoIcon: videoIcon,
      wordIcon: wordIcon,
      fileIcon: fileIcon,
      dialogVisiblePdf: false,
      dialogVisibleVideo: false,
      dialogVisibleOffice: false,
      wurl: "",
      chapters: [],
      filterPlacement: 'bottom-end',
    };
  },
  watch: {},
  computed: {
    // vcWords() {
    //   return function (array) {
    //     let _array = [];
    //     if (array.length) {
    //       for (var i = 0; i < array.length; i++) {
    //         _array.push(
    //           {
    //             text: array[i].name,
    //             weight: array[i].count,
    //           }
    //         )
    //       }
    //     }
    //     console.log(_array);
    //     return array.length ? _array : [];
    //   };
    // },
    selectType() {
      return function (item) {
        if (item.type == 1 && item.atype == 2) {
          return '多选题'
        } else if (item.type == 1 && item.atype == 1) {
          return '单选题'
        } else if (item.type == 3) {
          return '问答题'
        } else if (item.type == 5) {
          return '附件'
        }
      };
    }
  },
  methods: {
    filterName(value, row,index) {
      let name = []
      for(var i=0;i<row.array[index].json.answer2.length;i++){
        name.push(row.array[index].json.array[row.array[index].json.answer2[i]].option)
      }
      console.log(name.indexOf(value) != -1);
      return name.indexOf(value) != -1;
    },
    wordClickHandler(name, value) {
      //  this.$notify({
      //   title: name,
      //   message: "数量："+value
      // });
    },
    retrunCourse() {
      this.goTo(
        "/test?userid=" +
        this.userid +
        "&oid=" +
        this.oid +
        "&org=" +
        this.org +
        "&role=" +
        this.role
      );
    },
    goTo(path) {
      this.$router.push(path);
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    changeHeight() {
      if (this.stype == 1) {
        return
      }
      this.tableHeight = this.$refs.stepBox.offsetHeight - 100;
      if (this.tableHeight <= 530) {
        this.tableHeight = 530;
      }
      // 监听窗口大小变化
      let self = this;
      window.onresize = function () {
        if (self.stype == 1) {
          return
        }
        self.tableHeight = this.$refs.stepBox.offsetHeight - 100;
        if (self.tableHeight <= 530) {
          self.tableHeight = 530;
        }
      };
      // this.$refs.table.$el.offsetTop：表格距离浏览器的高度 //200表示你想要调整的表格距离底部的高度（你可以自己随意调整），因为我们一般都有放分页组件的，所以需要给它留一个高度
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    getTest(row) {
      this.$router.push(
        "/checkTest2?cid=" +
        row.courseid +
        "&userid=" +
        this.userid +
        "&userid2=" +
        row.userid +
        "&tid=" +
        row.id +
        "&oid=" +
        this.oid +
        "&org=" +
        this.org +
        "&type=2" +
        "&role=" +
        this.role
      );
    },
    checkDataType(type) {
      if (this.stype != type) {
        this.stype = type
        this.courseName = ''
        this.getData();
        this.changeHeight();
      }
    },
    searchCourse() {
      this.getData()
    },
    getData() {
      this.isLoading = true;
      let params = {
        cid: this.cid,
        cn: this.courseName
      };
      this.ajax
        .get(this.$store.state.api + "getTestWorksNoPage", params)
        .then((res) => {
          this.isLoading = false;
          this.testJson = res.data[0][0]
          this.works = res.data[1]
          this.iscount = res.data[2][0].count
          this.pcount = res.data[3][0].count
          let chapters = this.setJSON(this.setJson2(JSON.parse(JSON.stringify(JSON.parse(res.data[0][0].chapters)))))
          this.chapters = this.setFilter(this.JSONSetting(JSON.parse(JSON.stringify(JSON.parse(res.data[0][0].chapters)))))

          let testArray = []
          let array = []
          for (let i = 0; i < this.works.length; i++) {
            let cJson = this.setJSON(JSON.parse(JSON.stringify(JSON.parse(this.works[i].courseJson))))
            if (JSON.stringify(cJson) == JSON.stringify(chapters)) {
              let _json = this.JSONSetting(JSON.parse(JSON.stringify(JSON.parse(this.works[i].courseJson))))
              array.push({
                courseid: this.works[i].courseid,
                id: this.works[i].id,
                userid: this.works[i].userid,
                name: this.works[i].username,
                time: this.works[i].time,
                array: _json
              })
            }
          }
          for (var i = 0; i < this.chapters.length; i++) {
            let el = this.chapters[i]
            let topic = {
              type: el.type,
              title: el.json ? el.json.title : '',
              detail: el.json ? el.json.detail : '',
              atype: el.json ? el.json.type : '',
              choice: el.json ? el.json.array : '',
              array: [],
              answer: el.json ? el.json.answer : '',
              count: 0
            }
            if (topic.type == 1) {
              for (var t = 0; t < topic.choice.length; t++) {
                topic.array.push({
                  name: topic.choice[t].option,
                  count: 0
                })
              }
            } else if (topic.type == 3) {

            } else if (topic.type == 5) {

            }
            for (var j = 0; j < array.length; j++) {
              let el2 = array[j]
              if (topic.type == 1) {
                let _answer = el2.array[i].json.answer2
                for (var k = 0; k < _answer.length; k++) {
                  topic.array[_answer[k]].count++
                  topic.count++
                }
              } else if (topic.type == 3) {
                let type3 = 1
                let _answer = el2.array[i].json.answer2
                if (_answer) {
                  for (var k = 0; k < topic.array.length; k++) {
                    if (topic.array[k].name == _answer) {
                      topic.array[k].count++
                      type3 = 2
                      topic.count++
                      break;
                    }
                  }
                  if (type3 == 1) {
                    topic.array.push({
                      name: _answer,
                      count: 1
                    })
                  }
                }
              } else if (topic.type == 5) {
                let _answer = el2.array[i].json.file ? el2.array[i].json.file : []
                for (var k = 0; k < _answer.length; k++) {
                  topic.array.push(_answer[k])
                }
              }
            }
            testArray.push(topic)
          }
          this.testArray = testArray
          this.worksArray = array
        })
        .catch((err) => {
          console.error(err);
        });
    },
    setJSON(json) {
      return json.filter((item) => {
        if (item.array) {
          item.array = item.array.filter((item2) => {
            if (item2.ttype == 1 && item2.json) {
              delete item2.json.answer2
              delete item2.json.score2
              delete item2.json.file
            }
            if (item2.array) {
              item2.array = item2.array.filter((item3) => {
                if (item3.ttype == 1 && item3.json) {
                  delete item3.json.answer2
                  delete item3.json.score2
                  delete item3.json.file
                }
                return item3;
              });
            }
            return item2;
          });
        } else if (item.ttype == 1 && item.json) {
          delete item.json.answer2
          delete item.json.score2
          delete item.json.file
        }
        return item
        console.log(item.array);
      });
    },
    setJson2(json) {
      let _json = json;
      // this.type = _json[0].ttype;
      let checkArray = _json.filter((item) => {
        if (item.array) {
          item.array = item.array.filter((item2) => {
            if (item2.ttype == 1 && item2.json && !item2.json.answer2) {
              item2.json.answer2 = [];
            }
            if (item2.array) {
              item2.array = item2.array.filter((item3) => {
                if (item3.ttype == 1 && item3.json && !item3.json.answer2) {
                  item3.json.answer2 = [];
                }
                return item3;
              });
            }
            return (
              (item2.ttype != 1 && item2.array.length > 0) || item2.ttype == 1
            );
          });
        }
        if (item.ttype == 1 && item.json && !item.json.answer2) {
          item.json.answer2 = [];
        }
        console.log(item.array);
        return (item.ttype != 1 && item.array.length > 0) || item.ttype == 1;
      });
      console.log(checkArray);
      return checkArray;

    },
    JSONSetting(json) {
      let _json = json
      let array = []
      _json.filter((item) => {
        if (item.array) {
          item.array = item.array.filter((item2) => {
            if (item2.ttype == 1 && item2.json) {
              array.push(item2)
            }
            if (item2.array) {
              item2.array = item2.array.filter((item3) => {
                if (item3.ttype == 1 && item3.json) {
                  array.push(item3)
                }
                return item3;
              });
            }
            return item2;
          });
        }
        if (item.ttype == 1 && item.json) {
          array.push(item)
        }
        console.log(item.array);
        return item;
      });
      console.log(array);
      return array;
    },
    setFilter(json){
      let _json = json
      let array = []
      _json.filter((item) => {
        item.nameFilters = [],
        item.filterParams = {
                  name: [],
                }
        if(item.type == 1){
          for(var i = 0; i < item.json.array.length; i++){
            item.nameFilters.push({text: item.json.array[i].option, value: item.json.array[i].option})
          }
        }
        array.push(item)
        return item;
      });
      return array
    },
    checkFile(item) {
      if (item.type == 3) {
        this.$hevueImgPreview(item.url);
      } else if (item.type == 5) {
        this.downloadFile(item);
      } else if (item.type == 1) {
        this.dialogVisibleOffice = true
        this.wurl = item.url
      } else if (item.type == 2) {
        this.dialogVisibleVideo = true
        this.wurl = item.url
      } else if (item.type == 4) {
        this.dialogVisiblePdf = true
        this.wurl = item.url
      }
    },
    downloadFile(f) {
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域
      let url2 = f.url;
      let _url2 = "";
      if (
        url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
      ) {
        _url2 = url2.split(
          "https://view.officeapps.live.com/op/view.aspx?src="
        )[1];
      } else {
        _url2 = url2;
      }
      let _this = this;

      _this.downLoading = _url2
      var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
      let name = decodeURIComponent(_url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1])
      var params = {
        Bucket: "ccrb",
        Key: name
      };
      s3.getObject(params, function (err, data) {
        _this.downLoading = ''
        if (err) console.log(err, err.stack); // an error occurred
        else {
          let url = window.URL.createObjectURL(new Blob([data.Body]));
          let a = document.createElement("a");
          a.name = f.name;
          a.href = url;
          a.download = f.name;
          a.click();
          console.log(data);
        }          // sxuccessful response

      });
    },
    deleteTest(tid) {
      let _this = this
      _this
        .$confirm("确定删除此提交的表单么？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          let params = [{
            tid: tid,
          }];
          _this.ajax
            .post(_this.$store.state.api + "deleteTestCourseWorks", params)
            .then((res) => {
              _this.$message.success("删除成功");
              _this.getData();
            })
            .catch((err) => {
              console.error(err);
            });
        })
        .catch(() => {
          return;
        });

    }
  },
  beforeDestroy() {
    document.getElementsByTagName('html')[0].style.overflow = ''
  },
  mounted() {
    document.getElementsByTagName('html')[0].scrollTop = 0
    document.getElementsByTagName('html')[0].style.overflow = 'hidden'
    this.$nextTick(function () {
      this.getData();
      this.changeHeight()
    });
  },
};
</script>

<style scoped>
.pb_content {
  height: 100% !important;
  /* margin: 0 20px 0 20px; */
}

.pb_content_body {
  width: 100% !important;
  height: 100%;
}

.pb_content_body>.right {
  height: 100%;
  width: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;
}

.basic_box {
  margin: 0 auto;
  position: relative;
  padding: 0 20px 0 20px;
}

.courseTop {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 40px);
  margin: 0 auto;
  padding: 10px 0;
}

.stepsNav {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.step_box {
  width: calc(100% - 40px);
  margin: 0 auto;
  height: calc(100% - 50px);
  overflow: auto;
  background: #ffff;
  border-radius: 5px;
}

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

.student_page {
  margin-top: 10px;
}

.test_title {
  display: flex;
  padding: 15px 15px;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.test_title .left {
  max-width: 100%;
  margin-top: 10px
}

.test_title .left .title {
  width: 100%;
  font-size: 24px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test_title .left .info {
  display: flex;
  margin-top: 15px;
}

.test_title .left .info .info_box {
  font-size: 14px;
}

.test_title .left .info .info_box+.info_box {
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px solid #E7E7E7;
}

.test_title .left .info .info_box span:nth-child(1) {
  color: #00000099;
}

.test_title .left .info .info_box span:nth-child(2) {}

.test_title .right {
  display: flex;
  align-items: center;
  margin-top: 10px;
  max-width: 100%;
}

.test_title .right .data_box {
  margin-right: 15px;
  width: 150px;
  border: 1px solid #e7e7e7;
  border-radius: 5px;
  padding: 0 10px;
  height: 57px;
  font-size: 14px;
  color: #00000099;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.test_title .right .data_box span:nth-child(1) {}

.test_title .right .data_box span:nth-child(2) {}

.test_title .right .data_box span:nth-child(2) .big {
  font-size: 22px;
}

.test_title .right .btn_box {
  display: flex;
  flex-direction: column;
  width: 57px;
  height: 57px;
  background: #3681fc;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.test_title .right .btn_box span:nth-child(1) {
  display: block;
  width: 12px;
  height: 14px;
  margin-bottom: 5px;
  background-image: url('../../../../assets/icon/test/icon_share.png');
  background-size: 100% 100%;
}

.test_title .right .btn_box span:nth-child(2) {}

.search_nav {
  border-bottom: 1px solid #E7E7E7;
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px 10px;
  display: flex;
  align-items: flex-end;
}

.search_nav>.right {
  display: flex;
  align-items: center;
}

.search_nav>.right>span {
  height: 24px;
  font-size: 14px;
  color: #000;
  cursor: pointer;
  position: relative;
}

.search_nav>.right>span+span {
  margin-left: 35px;
}

.search_nav>.right>span.active {
  color: #3681FC;
  font-weight: 600;
}

.search_nav>.right>span.active::before {
  content: "";
  position: absolute;
  bottom: -10px;
  width: 15px;
  height: 3px;
  background: #3681fc;
  left: 50%;
  transform: translateX(-50%);
}

.search_nav>.left {
  display: flex;
  align-items: center;
  margin-left: auto;
}


.student_input>>>.el-input__inner {
  height: 40px;
  width: 190px;
  font-size: 13px;
  padding: 0 35px 0 10px;
}

.serach_icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  background: url("../../../../assets/icon/test/test_search.png") no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}


.title_content {
  padding-bottom: 10px;
}

.title_content>.title_box {
  width: calc(100% - 48px);
  margin: 20px auto 0;
}

.title_content>.title_box>.title {
  font-size: 18px;
  display: flex;
  white-space: pre-line;
}

.title_content>.title_box>.title>.test_icon {
  min-width: 20px;
  height: 20px;
}

.title_content>.title_box>.detail {
  font-size: 14px;
  color: #00000099;
  margin-top: 8px;
  white-space: pre-line;
}

.title_content>.title_box>.content1 {
  display: flex;
  width: 100%;
  margin-top: 10px;
}

.title_content>.title_box>.content1>>>.el-progress__text {
  color: #3681FC;
  min-width: 55px;
  font-size: 16px !important;
}

.title_content>.title_box>.content1>.left {
  width: calc(100% - 620px);
  border: 1px solid #e7e7e7;
}

.title_content>.title_box>.content1>.left>div+div {
  border-top: 1px solid #e7e7e7;
}

.title_content>.title_box>.content1>.left>.title,
.title_content>.title_box>.content1>.left>.data {
  display: flex;
  height: 40px;
  align-items: center;
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
  line-height: 16px;
}

.title_content>.title_box>.content1>.left>.title>span,
.title_content>.title_box>.content1>.left>.data>span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title_content>.title_box>.content1>.left>.title>span:nth-child(1),
.title_content>.title_box>.content1>.left>.data>span:nth-child(1) {
  width: calc(100% - 320px - 110px);
}

.title_content>.title_box>.content1>.left>.title>span:nth-child(2),
.title_content>.title_box>.content1>.left>.data>span:nth-child(2) {
  width: 110px;
}

.title_content>.title_box>.content1>.left>.title>span:nth-child(3),
.title_content>.title_box>.content1>.left>.data>span:nth-child(3) {
  width: 320px;
}

.title_content>.title_box>.content1>.left>.title {
  font-weight: 700;
  background: #F9FAFB;
}

.title_content>.title_box>.content1>.right {
  width: 600px;
  margin-left: 20px;
  border: 1px solid #e7e7e7;
  min-height: 300px;
}


.title_content>.title_box>.content2 {
  display: flex;
  width: 100%;
  margin-top: 10px;
}

.title_content>.title_box>.content2>.left {
  width: calc(100% - 620px);
  border: 1px solid #e7e7e7;
}

.title_content>.title_box>.content2>.left>div+div {
  border-top: 1px solid #e7e7e7;
}

.title_content>.title_box>.content2>.left>.title,
.title_content>.title_box>.content2>.left>.data {
  display: flex;
  height: 40px;
  align-items: center;
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
  line-height: 16px;
}

.title_content>.title_box>.content2>.left>.title>span,
.title_content>.title_box>.content2>.left>.data>span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title_content>.title_box>.content2>.left>.title>span:nth-child(1),
.title_content>.title_box>.content2>.left>.data>span:nth-child(1) {
  width: 55px;
}

.title_content>.title_box>.content2>.left>.title>span:nth-child(2),
.title_content>.title_box>.content2>.left>.data>span:nth-child(2) {
  width: 110px;
}

.title_content>.title_box>.content2>.left>.title>span:nth-child(3),
.title_content>.title_box>.content2>.left>.data>span:nth-child(3) {
  max-width: calc(100% - 110px - 55px);
}

.title_content>.title_box>.content2>.left>.title {
  font-weight: 700;
  background: #F9FAFB;
}

.title_content>.title_box>.content2>.right {
  width: 600px;
  margin-left: 20px;
  border: 1px solid #e7e7e7;
}

.title_content>.title_box>.content2>.right>>>.wordCloud {
  height: auto;
  min-height: 300px;
}

.title_content>.title_box>.content3 {
  display: flex;
  width: 100%;
  overflow: auto;
}

.title_content>.title_box>.content3>.file {
  min-width: 200px;
  width: 200px;
  height: 140px;
  margin: 10px 10px 10px 0px;
  border-radius: 15px;
  box-shadow: rgb(223, 218, 218) 0px 0px 6px 1px;
  overflow: hidden;
  margin-right: 15px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.title_content>.title_box>.content3>.file>.img {
  width: 100%;
  height: calc(100% - 35px);
  object-fit: cover;
  cursor: pointer;
}

.title_content>.title_box>.content3>.file>.del {
  position: absolute;
  width: 25px;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.title_content>.title_box>.content3>.file>.download {
  position: absolute;
  width: 25px;
  top: 10px;
  right: 35px;
  cursor: pointer;
  opacity: .8;
}


.title_content>.title_box>.content3>.file>.name {
  height: 35px;
  width: 100%;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}

.title_content>.title_box>.content3>.file>.name>span {
  display: block;
  text-overflow: ellipsis;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.table_content {
  /* width: calc(100% - 48px);
  margin: 20px auto 0; */
  padding: 20px 24px;
  width: 100%;
  box-sizing: border-box;
}

.table_content>>>.el-table td {
  padding: 5px 0;
}

.answer_type {
  background: #F0F2F5;
  padding: 5px 10px;
  display: block;
  border-radius: 3px;
  margin: 5px;
}



.table_file>.file {
  min-width: 100px;
  width: 100px;
  height: 70px;
  margin: 10px 10px 10px 0px;
  border-radius: 5px;
  box-shadow: rgb(223, 218, 218) 0px 0px 6px 1px;
  overflow: hidden;
  margin-right: 15px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.table_file>.file>.img {
  width: 100%;
  height: calc(100% - 20px);
  object-fit: cover;
  cursor: pointer;
}

.table_file>.file>.del {
  position: absolute;
  width: 25px;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.table_file>.file>.download {
  position: absolute;
  width: 25px;
  top: 10px;
  right: 35px;
  cursor: pointer;
  opacity: .8;
}


.table_file>.file>.name {
  height: 20px;
  width: 100%;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 12px;
}

.table_file>.file>.name>span {
  display: block;
  text-overflow: ellipsis;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
}


</style>