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" v-loading="pdfLoading">
          <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>
              <span :class="{ active: stype == 3 }" @click="checkDataType(3)" v-show="false">按数量查看</span>
            </div>
            <div class="left">
              <div style="margin-right: 10px;position: relative;" v-if="stype == 2 || stype == 3">
                <el-input v-model="courseName" class="student_input" placeholder="请输入需要搜索的姓名"></el-input>
                <span class="serach_icon" @click="searchCourse"></span>
              </div>
              <div class="btnA" v-if="stype == 1 && !pdfLoading" @click="exportPDF">导出PDF</div>
              <div class="btnA" v-if="stype == 2" @mouseenter="btnDisplay = true" @mouseleave="btnDisplay = false">
                导出数据
                <div v-show="btnDisplay" class="buttonBox">
                  <div type="primary" @click="exportExcel">下载汇总表格</div>
                  <div type="primary" @click="exportAllWord">导出人员数据</div>
                </div>
              </div>
              <div class="btnA" v-if="stype == 3" @click="exportAllWord2">导出人员数据</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 class="content4" v-if="item.type == 6">
								<div class="out_box" v-for="(item, index) in item.courseArray" :key="index + '-' + index2">
            		  <div class="tup">
            		    <img :src="item.cover != null && item.cover != ''
            		      ? JSON.parse(item.cover).length > 0
            		        ? JSON.parse(item.cover)[0].url
            		        : mr
            		      : mr
            		      " alt />
            		  <div class="bottom_box">
            		    <div>
            		      <el-tooltip :content="item.title" popper-class="text_tooltip" placement="top" effect="dark">
            		        <span>{{ item.title }}</span>
            		      </el-tooltip>
            		    </div>
            		    <div class="kc_t">
            		      <span>{{ item.username }}</span>
            		      <span>{{ item.state == 1 ? '阶段模式' : item.state == 2 ? '任务模式' : '极简模式' }}</span>
            		    </div>
            		    <div class="kc_time">
            		      <span style="color: #717C8D">创建日期:</span>{{ item.time }}
            		    </div>
            		    <div class="kc_time">
            		      <span style="color: #717C8D">修改日期:</span>{{ item.update_at }}
            		    </div>
            		  </div>
            		</div>
							</div>
                <!-- <div class="courses" v-for="(courses, index2) in item.array" :key="index + '-' + index2">
                  {{ courses }}
                </div> -->
              </div>
            </div>
          </div>
          <div class="table_content" v-if="stype == 2">
            <el-table class="el-table" ref="table" :data="worksArray" border :fit="true" :key="2" v-loading="isLoading"
              style="width: 100%" :header-cell-style="{ background: '#f1f1f1', fontSize: '17px' }"
              @filter-change="handleFilterChange">
              <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="item.type == 5 ? 200 : 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>
                  <div v-if="scope.row.array[index].type == 6" style="display: flex; flex-wrap: wrap;">
                    {{ scope.row.array[index].json.answer2 }}
                  </div>
                  <div v-if="scope.row.array[index].type == 7" style="display: flex; flex-wrap: wrap;">
                    {{ getScore(scope.row.array[index].json) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="300px" fixed="right">

                <template slot-scope="scope">
                  <el-button @click="getTest(scope.row)" type="primary" size="small">查看</el-button>
                  <el-button @click="setWordHtml(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 class="table_content" v-if="stype == 3">
            <div class="student_table">
              <el-table ref="table" :data="tableData" border :fit="true" v-loading="isLoading" style="width: 100%"
                :header-cell-style="{ background: '#f1f1f1', fontSize: '17px' }" :row-class-name="tableRowClassName">
                <el-table-column prop="username" label="提交人" min-width="15" align="center">
                </el-table-column>
                <el-table-column prop="time" label="提交时间" min-width="15" align="center">
                </el-table-column>
                <el-table-column label="是否批改" min-width="15" align="center">

                  <template slot-scope="scope">
                    <div>{{ scope.row.type == 3 ? '是' : '否' }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="300px">

                  <template slot-scope="scope">
                    <el-button @click="getTest(scope.row)" type="primary" size="small">查看</el-button>
                    <el-button @click="setWordHtml2(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 class="student_page">
              <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total"
                @current-change="handleCurrentChange">
              </el-pagination>
            </div>
          </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';

import { downloadPDF } from '../../../tools/pdf'
import JSZip from "jszip";
import FileSaver from "file-saver";

import XLSX from "xlsx-js-style";


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',
      pdfLoading: false,
      btnDisplay: false
    };
  },
  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 : [];
    //   };
    // },
    getScore() {
      return function (item) {
        let array = []
        for (var i = parseInt(item.small); i <= parseInt(item.big); i++) {
          array.push(i)
        }
        return item.answer2 ? array[item.answer2] : ''
      };
    },
    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 - 120;
      if (this.tableHeight <= 530) {
        this.tableHeight = 530;
      }
      // 监听窗口大小变化
      let self = this;
      window.onresize = function () {
        if (self.stype == 1) {
          return
        }
        self.tableHeight = this.$refs.stepBox.offsetHeight - 120;
        if (self.tableHeight <= 530) {
          self.tableHeight = 530;
        }
      };
      // this.$refs.table.$el.offsetTop：表格距离浏览器的高度 //200表示你想要调整的表格距离底部的高度（你可以自己随意调整），因为我们一般都有放分页组件的，所以需要给它留一个高度
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData2();
    },
    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 = ''
        if (type == 3) {
          this.getData2();
        } else {
          this.getData();
        }
        this.changeHeight();
      }
    },
    searchCourse() {
      if (this.stype == 3) {
        this.getData2()
      } else {
        this.getData()
      }
    },

    getData() {
      this.isLoading = true;
      let params = {
        cid: this.cid,
        cn: this.courseName
      };
      this.ajax
        .get(this.$store.state.api + "getTestWorksNoPage", params)
        .then(async (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))))
              
              for(var ja = 0; ja < _json.length; ja++){
                let _json2 = _json[ja].json
                if(_json[ja].type == 6){
                  _json2.answer2 = await this.getCourse(_json2.answer2)
                }
              }
              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,
                courseJson: JSON.parse(this.works[i].courseJson),
              })
            }
          }

          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,
              courses: el.json ? el.json.courses : [],
            }
            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) {

            } else if (topic.type == 6) {
                let _answer = topic.courses
                topic.array = _answer
								topic.courseArray = [];
								topic.array.forEach(async i=>{
									let data = await this.getCourseDetail(i)
									data.update_at = new Date(data.update_at).toLocaleString().replace('/','-')
									topic.courseArray.push(data)
								})
              }
            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])
                }
              }
            }
						console.log(topic)
            testArray.push(topic)
          }
          this.testArray = testArray
          this.worksArray = array
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getData2() {
      this.isLoading = true;
      let params = {
        cid: this.cid,
        page: this.page,
        pageSize: this.pageSize,
        cn: this.courseName
      };
      this.ajax
        .get(this.$store.state.api + "getTestWorksPage3", params)
        .then((res) => {
          this.isLoading = false;
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData = res.data[0];
        })
        .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("删除成功");
              if (_this.stype == 3) {
                _this.getData2();
              } else {
                _this.getData();
              }
            })
            .catch((err) => {
              console.error(err);
            });
        })
        .catch(() => {
          return;
        });

    },
    exportPDF() {
      this.pdfLoading = true
      var a = document.getElementsByTagName("img")
      for (var i = 0; i < a.length; i++) { a[i].crossOrigin = "*" }
      downloadPDF(this.$refs.stepBox, this.testJson.title, () => {
        var _a = document.getElementsByTagName("img")
        for (var i = 0; i < _a.length; i++) {
          _a[i].removeAttribute("crossorigin")
        }
        setTimeout(() => {
          this.pdfLoading = false

        }, 2000);
      })
    },
    score(json) {
      let score = 0
      json.forEach(el => {
        if ((el.ttype == 3 || el.ttype == 2) && el.array.length > 0) {
          el.array.forEach(item => {
            if (item.ttype == 2 && item.array.length > 0) {
              item.array.forEach(item2 => {
                if (item2.ttype == 1 && item2.json) {
                  score += item2.json.score ? parseFloat(item2.json.score) : 0
                }
              })
            } else if (item.ttype == 1 && item.json) {
              score += item.json.score ? parseFloat(item.json.score) : 0
            }
          })
        } else if (el.ttype == 1 && el.json) {
          score += el.json.score ? parseFloat(el.json.score) : 0
        }
      })
      return score > 0 ? score + '分' : ''
    },
    score2(json) {
      let score = 0
      // let type = 1
      json.forEach(el => {
        if ((el.ttype == 3 || el.ttype == 2) && el.array.length > 0) {
          el.array.forEach(item => {
            if (item.ttype == 2 && item.array.length > 0) {
              item.array.forEach(item2 => {
                if (item2.ttype == 1 && item2.json) {
                  score += item2.json.score2 ? parseFloat(item2.json.score2) : 0
                }
              })
            } else if (item.ttype == 1 && item.json) {
              score += item.json.score2 ? parseFloat(item.json.score2) : 0
            }
          })
        } else if (el.ttype == 1 && el.json) {
          score += el.json.score2 ? parseFloat(el.json.score2) : 0
        }
      })
      return score + '分'
    },
    setWordHtml(data) {
      let _data = data

      let _title = `<div style="font-size:40px;font-weight:bold;text-align:center;">${this.testJson.title}</div>`;
      let score = this.score(data.courseJson)
      let isScore = this.score2(data.courseJson)
      let scoreContent = score ? `<b>（得分/总分）${isScore}/${score}</b>` : ''
      let _content = `<div style="font-size:25px;text-align:center;margin-top: 20px;"><b style="margin-right:40px">（答题人）${_data.name}</b>${scoreContent}（填写范围）${this.testJson.juriP ? this.testJson.juriP : '所有人'}（提交时间）${_data.time}</div>`
      let _detail = this.testJson.brief ? `<div style="font-size:25px;text-align:center;margin-top: 20px;">${this.testJson.brief}</div>` : ''

      let _test = `<div style='margin-top:40px;'>`
      for (let i = 0; i < _data.array.length; i++) {
        let item = _data.array[i]
        let _div = `<div style='margin-top:20px;font-weight:bold;'>${i + 1}、${item.json.title}</div>`
        _test += _div
        if (item.type == 1) {
          for (let j = 0; j < item.json.array.length; j++) {
            let check = item.json.array[j]
            let _option = `<div style='margin:10px 0 0 40px;'>${(item.json.answer2 && item.json.answer2.indexOf(j) !== -1) ? '☑' : '☐'} ${check.option}</div>`
            _test += _option
          }
        } else if (item.type == 3 && item.json.answer2) {
          let _option = `<div style='margin:10px 0 0 40px;'>${item.json.answer2}</div>`
          _test += _option
        } else if (item.type == 5 && item.json.file) {
          for (let j = 0; j < item.json.file.length; j++) {
            let check = item.json.file[j]
            let _option = `<div style='margin:10px 0 0 40px;'>${check.name} <a href='${check.url}'>${check.url}</a></div>`
            _test += _option
          }
        }
      }
      _test += `</div>`
      let _html = _title + _content + _detail + _test;
      this.exportToWord(_data.name + '-' + _data.time, _html);
    },
    setWordHtml2(data) {
      let _data = data
      _data.array = this.JSONSetting(JSON.parse(JSON.stringify(JSON.parse(data.courseJson))))
      let _title = `<div style="font-size:40px;font-weight:bold;text-align:center;">${this.testJson.title}</div>`;
      let score = this.score(JSON.parse(data.courseJson))
      let isScore = this.score2(JSON.parse(data.courseJson))
      let scoreContent = score ? `<b>（得分/总分）${isScore}/${score}</b>` : ''
      let _content = `<div style="font-size:25px;text-align:center;margin-top: 20px;"><b style="margin-right:40px">（答题人）${_data.username}</b>${scoreContent}（填写范围）${this.testJson.juriP ? this.testJson.juriP : '所有人'}（提交时间）${_data.time}</div>`
      let _detail = this.testJson.brief ? `<div style="font-size:25px;text-align:center;margin-top: 20px;">${this.testJson.brief}</div>` : ''

      let _test = `<div style='margin-top:40px;'>`
      for (let i = 0; i < _data.array.length; i++) {
        let item = _data.array[i]
        let _div = `<div style='margin-top:20px;font-weight:bold;'>${i + 1}、${item.json.title}</div>`
        _test += _div
        if (item.type == 1) {
          for (let j = 0; j < item.json.array.length; j++) {
            let check = item.json.array[j]
            let _option = `<div style='margin:10px 0 0 40px;'>${(item.json.answer2 && item.json.answer2.indexOf(j) !== -1) ? '☑' : '☐'} ${check.option}</div>`
            _test += _option
          }
        } else if (item.type == 3 && item.json.answer2) {
          let _option = `<div style='margin:10px 0 0 40px;'>${item.json.answer2}</div>`
          _test += _option
        } else if (item.type == 5 && item.json.file) {
          for (let j = 0; j < item.json.file.length; j++) {
            let check = item.json.file[j]
            let _option = `<div style='margin:10px 0 0 40px;'>${check.name} <a href='${check.url}'>${check.url}</a></div>`
            _test += _option
          }
        }
      }
      _test += `</div>`
      let _html = _title + _content + _detail + _test;
      this.exportToWord(_data.username + '-' + _data.time, _html);
    },
    async exportToWord(a, html) {
      // 将html文件中需要用到的数据挂载到store上
      const content = `<!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>${a}</title>
          <style>
          </style>
      </head>
      <body>
      ${html}
      </body>
      </html>`;
      // debugger
      // 生成报告
      const link = document.createElement("a");
      let dname = a + ".doc";
      // link.download = "报告.html"; // 文件名
      link.download = dname; // 文件名
      link.style.display = "none";
      // 创建文件流
      // 创建bolb实例时，内容一定要放在[]中
      const blob = new Blob([content], {
        type: "text/plain;charset='utf-8'",
      });
      link.href = window.URL.createObjectURL(blob);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    setWordHtmlAll(data) {
      let _data = data

      let _title = `<div style="font-size:40px;font-weight:bold;text-align:center;">${this.testJson.title}</div>`;
      let score = this.score(data.courseJson)
      let isScore = this.score2(data.courseJson)
      let scoreContent = score ? `<b>（得分/总分）${isScore}/${score}</b>` : ''
      let _content = `<div style="font-size:25px;text-align:center;margin-top: 20px;"><b style="margin-right:40px">（答题人）${_data.name}</b>${scoreContent}（填写范围）${this.testJson.juriP ? this.testJson.juriP : '所有人'}（提交时间）${_data.time}</div>`
      let _detail = this.testJson.brief ? `<div style="font-size:25px;text-align:center;margin-top: 20px;">${this.testJson.brief}</div>` : ''

      let _test = `<div style='margin-top:40px;'>`
      for (let i = 0; i < _data.array.length; i++) {
        let item = _data.array[i]
        let _div = `<div style='margin-top:20px;font-weight:bold;'>${i + 1}、${item.json.title}</div>`
        _test += _div
        if (item.type == 1) {
          for (let j = 0; j < item.json.array.length; j++) {
            let check = item.json.array[j]
            let _option = `<div style='margin:10px 0 0 40px;'>${(item.json.answer2 && item.json.answer2.indexOf(j) !== -1) ? '☑' : '☐'} ${check.option}</div>`
            _test += _option
          }
        } else if (item.type == 3 && item.json.answer2) {
          let _option = `<div style='margin:10px 0 0 40px;'>${item.json.answer2}</div>`
          _test += _option
        } else if (item.type == 5 && item.json.file) {
          for (let j = 0; j < item.json.file.length; j++) {
            let check = item.json.file[j]
            let _option = `<div style='margin:10px 0 0 40px;'>${check.name} <a href='${check.url}'>${check.url}</a></div>`
            _test += _option
          }
        }
      }
      _test += `</div>`
      let _html = _title + _content + _detail + _test;
      return this.exportToWordAll(_data.name + '-' + _data.time, _html);
    },
    setWordHtmlAll2(data) {
      let _data = data
      _data.array = this.JSONSetting(JSON.parse(JSON.stringify(JSON.parse(data.courseJson))))
      let _title = `<div style="font-size:40px;font-weight:bold;text-align:center;">${this.testJson.title}</div>`;
      let score = this.score(JSON.parse(data.courseJson))
      let isScore = this.score2(JSON.parse(data.courseJson))
      let scoreContent = score ? `<b>（得分/总分）${isScore}/${score}</b>` : ''
      let _content = `<div style="font-size:25px;text-align:center;margin-top: 20px;"><b style="margin-right:40px">（答题人）${_data.username}</b>${scoreContent}（填写范围）${this.testJson.juriP ? this.testJson.juriP : '所有人'}（提交时间）${_data.time}</div>`
      let _detail = this.testJson.brief ? `<div style="font-size:25px;text-align:center;margin-top: 20px;">${this.testJson.brief}</div>` : ''

      let _test = `<div style='margin-top:40px;'>`
      for (let i = 0; i < _data.array.length; i++) {
        let item = _data.array[i]
        let _div = `<div style='margin-top:20px;font-weight:bold;'>${i + 1}、${item.json.title}</div>`
        _test += _div
        if (item.type == 1) {
          for (let j = 0; j < item.json.array.length; j++) {
            let check = item.json.array[j]
            let _option = `<div style='margin:10px 0 0 40px;'>${(item.json.answer2 && item.json.answer2.indexOf(j) !== -1) ? '☑' : '☐'} ${check.option}</div>`
            _test += _option
          }
        } else if (item.type == 3 && item.json.answer2) {
          let _option = `<div style='margin:10px 0 0 40px;'>${item.json.answer2}</div>`
          _test += _option
        } else if (item.type == 5 && item.json.file) {
          for (let j = 0; j < item.json.file.length; j++) {
            let check = item.json.file[j]
            let _option = `<div style='margin:10px 0 0 40px;'>${check.name} <a href='${check.url}'>${check.url}</a></div>`
            _test += _option
          }
        }
      }
      _test += `</div>`
      let _html = _title + _content + _detail + _test;
      return this.exportToWordAll(_data.username + '-' + _data.time, _html);
    },
    async exportToWordAll(a, html) {
      // 将html文件中需要用到的数据挂载到store上
      const content = `<!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>${a}</title>
          <style>
          </style>
      </head>
      <body>
      ${html}
      </body>
      </html>`;
      // debugger
      // 生成报告
      const link = document.createElement("a");
      let dname = a + ".doc";
      // link.download = "报告.html"; // 文件名
      link.download = dname; // 文件名
      link.style.display = "none";
      // 创建文件流
      // 创建bolb实例时，内容一定要放在[]中
      const blob = new Blob([content], {
        type: "text/plain;charset='utf-8'",
      });
      return blob;
    },
    exportAllWord() {
      this.pdfLoading = true;
      const _chapInfo = this.worksArray;
      let url = [];
      for (let i = 0; i < _chapInfo.length; i++) {
        url.push({
          name: _chapInfo[i].name + '-' + _chapInfo[i].time,
          blob: this.setWordHtmlAll(_chapInfo[i]),
        });
      }
      console.log(url);
      this.downLoadAll(url);
    },
    exportAllWord2() {
      this.pdfLoading = true;

      let params = {
        cid: this.cid,
        page: 1,
        pageSize: 999,
        cn: this.courseName
      };
      this.ajax
        .get(this.$store.state.api + "getTestWorksPage3", params)
        .then((res) => {
          const _chapInfo = res.data[0];
          let url = [];
          for (let i = 0; i < _chapInfo.length; i++) {
            url.push({
              name: _chapInfo[i].username + '-' + _chapInfo[i].time,
              blob: this.setWordHtmlAll2(_chapInfo[i]),
            });
          }
          console.log(url);
          this.downLoadAll(url);
        })
        .catch((err) => {
          console.error(err);
        });

    },
    downLoadAll(url) {
      const data = url; // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
      const zip = new JSZip();
      const cache = {};
      data.forEach((item) => {
        // 下载文件, 并存成ArrayBuffer对象
        const file_name = item.name; // 获取文件名
        zip.file(file_name + '.doc', item.blob, { binary: true }); // 逐个添加文件
        cache[file_name] = item.blob;
      });
      zip.generateAsync({ type: "blob" }).then((content) => {
        // 生成二进制流
        FileSaver.saveAs(content, this.testJson.title + ".zip"); // 利用file-saver保存文件  自定义文件名
        setTimeout(() => {
          this.pdfLoading = false;
        }, 2000);
      });
    },
    handleFilterChange() {
      console.log(this.$refs.table.store.states.data);
    },
    exportExcel() {
      let res = this.$refs.table.store.states.data
      if (!res.length) {
        this.$message.error('无导出数据')
        return
      }
      this.isLoading = true;
      let chapters = this.chapters

      var array = [];
      for (var i = 0; i < res.length; i++) {
        var _json = {};
        _json["序号"] = i + 1;
        _json["提交人"] = res[i].name;
        _json["提交时间"] = res[i].time;
        for (var j = 0; j < chapters.length; j++) {
          _json[j + 1 + "." + chapters[j].json.title] = '';
          if (res[i].array[j].type == 1 && res[i].array[j].json.answer2) {
            let a = []
            for (var answer2 = 0; answer2 < res[i].array[j].json.answer2.length; answer2++) {
              a.push(res[i].array[j].json.array[answer2].option)
            }
            _json[j + 1 + "." + chapters[j].json.title] = a.join('、')
          } else if (res[i].array[j].type == 3 && res[i].array[j].json.answer2) {
            _json[j + 1 + "." + chapters[j].json.title] = res[i].array[j].json.answer2
          } else if (res[i].array[j].type == 5 && res[i].array[j].json.file) {
            let files = []
            for (let file = 0; file < res[i].array[j].json.file.length; file++) {
              let check = res[i].array[j].json.file[file]
              files.push(file + 1 + '.' + check.name + '----' + check.url)
            }
            _json[j + 1 + "." + chapters[j].json.title] = files.join('\n')
          }
        }
        array.push(_json);
      }
      let widthJson = []
      let widthArray = Object.keys(array[0])
      for (let i = 0; i < widthArray.length; i++) {
        if (i == 0) {
          widthJson.push({ wch: 5 })
        } else {
          widthJson.push({ wch: 30 })
        }
      }

      const workbook = XLSX.utils.book_new(); //创建一个新的工作簿对象
      let ws = XLSX.utils.json_to_sheet(array); //将json对象数组转化成工作表
      ws["!cols"] = widthJson;
      const styleObj = {
        alignment: {
          horizontal: "center",
          vertical: "center" // 设置垂直居中
        }
      }; // 设置居中对齐和加粗样式

      for (let cell in ws) {
        if (!cell[0].startsWith("!")) {
          ws[cell]["s"] = styleObj;
        }
      }

      XLSX.utils.book_append_sheet(workbook, ws, "sheet1"); //把sheet添加到workbook里，第三个参数是sheet名

      XLSX.writeFile(workbook, this.testJson.title + ".xlsx");
      this.isLoading = false;
      this.$message({
        message: "导出成功",
        type: "success"
      });
    },
    async getCourse(id) {
      let params = {
        cid: id,
      };
      let res = await this.ajax.get(this.$store.state.api + "getCourseInfoTest", params)
      return res.data[0][0].title
    },
		async getCourseDetail(id){
			let params = {
        cid: id,
      };
      let res = await this.ajax.get(this.$store.state.api + "getCourseInfoTest", params)

      return res.data[0][0]
		}
  },
  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;
  height: 50px;
}

.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;
}

.btnA {
  color: #fff;
  background-color: #0061FF;
  padding: 0 24px;
  font-size: 14px;
  min-width: 64px;
  font-weight: 500;
  border-radius: 4px;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-right: 10px;
  position: relative;
}

.buttonBox {
  position: absolute;
  bottom: -0;
  transform: translateY(100%);
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 3px 1px #e3e3e3;
  width: 100%;
  z-index: 999;
}

.buttonBox>div {
  height: 40px;
  line-height: 40px;
  width: 100%;
  text-align: center;
  color: #000;
  box-sizing: border-box;
}

.buttonBox>div+div {
  border-top: 1px solid #e0e0e0;
}

.buttonBox>div:hover {
  background: #f6f8ff;
}

.content4{
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: nowrap;
	overflow: auto;
}

.out_box {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    /* width: 200px; */
    width: 280px;
    background: #fff;
		/* background-color: white; */
    margin-right: 15px;
    /* border: 1px solid #ccc; */
    height: fit-content;
    box-sizing: border-box;
    border-radius: 0px 0px 5px 5px;
    /* overflow: hidden; */
    margin-bottom: 15px;
    position: relative;
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #3682fc00;
		cursor: pointer;
		border: 1px solid #6a9ff5;
		height: auto;
  }

	.out_boxActive{
		box-sizing: border-box;
		border: 3px solid #3681FC !important;

	}
  
  .out_box:hover {
    border: 1px solid #3681FC;
  }
  
  .out_box:nth-child(5n) {
    margin-right: 0;
  }
	.bottom_box {
		width:100%;
    display: flex;
    padding: 10px;
    flex-direction: column;
    box-sizing: border-box;
    height: 121px;
    flex-wrap: nowrap;
    justify-content: space-evenly;
  }
  
  .bottom_box>div:nth-child(1) {
    width: 100%;
    /* overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold; */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .bottom_box>div:nth-child(1)>span:nth-child(1) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
  }
  
  .bottom_box>div:nth-child(1)>span:nth-child(2) {
    min-width: fit-content;
    font-size: 14px;
    color: #8c8c8c;
  }
  
  .tup {
    width: 100%;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
		flex-direction: column;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
  }
  
  .tup>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .kc_time {
    margin-top: 8px;
    font-size: 14px;
    color: #717C8D;
  }
  
  .kc_time+.kc_time {
    margin-top: 0;
  }
  
  .kc_t {
    margin-top: 5px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .kc_t>span:nth-child(1) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .kc_t>span:nth-child(2) {
    min-width: fit-content;
    font-size: 14px;
    color: #8c8c8c;
  }
</style>