EvenManage/src/components/pages/race/eventCenter/myAnli.vue

<template>
  <div class="center_content">
    <div class="myAnliBox" v-if="anliBox.length > 0">
      <div class="anLi" v-for="(an, anIndex) in anliBox" :key="anIndex">
        <div class="anliTop">
          <div class="anliTopLeft">
            <div>比赛名称：广东省PBL案例征集</div>
            <div>比赛类别：{{ an.typename ? an.typename : "暂无分类" }}</div>
          </div>
          <div class="anliTopRight">创建人：{{ an.username }}</div>
        </div>

        <div class="anliMiddle">
          <div class="anliBox">
            <div class="anliImg">
              <img
                :src="
                  JSON.parse(an.info).cover && JSON.parse(an.info).cover.length
                    ? JSON.parse(an.info).cover[0].url
                    : noBanner
                "
                alt=""
              />
            </div>
            <div class="anliNav">
              <div>项目名称：{{ JSON.parse(an.info).title }}</div>
              <div>单位：{{ an.schoolName }}</div>
              <div>
                {{ JSON.parse(an.info).courseText }}
              </div>
              <div class="people">
                <div class="man">
                  <img src="../../../../assets/people.png" alt />
                </div>
                <div class="person">
                  {{ an.info ? JSON.parse(an.info).tableData.length : 0 }}人
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="anliBottom">
          <div class="bottomLeft">
            当前状态：{{ an.state == 0 ? "未提交" : "已提交" }}
          </div>
          <div class="bottomRight">
            <div class="rightButton" @click="updateState(an.id)">提交</div>
            <div class="rightButton" @click="exportAnli(an)">导出</div>
            <div class="rightButton">开始教学</div>
            <div class="rightButton" @click="goTo('/addRace?aid=' + an.id)">
              编辑
            </div>
            <div
              class="rightButton"
              style="background: #225ac7"
              @click="goTo('/anliDetail?aid=' + an.id)"
            >
              查看详情
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="noAnliBox" v-else>
      <img src="../../../../assets/icon/race/isNoMessage.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  props: ["userid", "oid"],
  data() {
    return {
      anliBox: [],
      noBanner: require("../../../../assets/noBanner.jpg"),
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    selectAnLi() {
      let params = {
        uid: this.userid,
      };
      this.ajax
        .get(this.$store.state.api + "selectRaceList", params)
        .then((res) => {
          this.anliBox = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    updateState(id) {
      let params = {
        id: id,
      };
      this.ajax
        .get(this.$store.state.api + "updateRaceState", params)
        .then((res) => {
          this.$message({
            message: "提交成功",
            type: "success",
          });
          this.selectAnLi();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    exportAnli(res) {
      console.log(res);
      let _html = "";
      var _title = "<h1>项目基础信息</h1>";
      let info = JSON.parse(res.info);
      _title += `
                <iframe style="display: none;" name="downloadFile"></iframe>
                <h2>项目名称：${info.title}</h2>
     `;
      _title += `<h3>比赛类别：${res.typename}</h3>`;
      _title += `<h4>单位：${res.schoolName}</h4>`;
      _title += `<div>项目简介：${info.courseText}</div>`;
      _title += `<h4>文件：`;
      var _div = document.createElement("div");
      for (var i = 0; i < info.data.length; i++) {
        var _div2 = document.createElement("div");
        _div2.innerHTML = ` <a href="${info.data[i].url}" target="downloadFile">${info.data[i].name}</a>`;
        _div.appendChild(_div2);
      }
      _title += `<div>${_div.innerHTML}</div>`;

      let overview = JSON.parse(res.overview);
      var _overview = "<h1>项目概况</h1>";
      var oArray = [
        { j: "driQuestion", name: "驱动性问题" },
        { j: "tarDesign", name: "学习目标" },
        { j: "actiDesign", name: "评价设计" },
        // { j: "evaDesign", name: "评价设计" },
        // { j: "other", name: "其他补充" },
      ];
      for (var k = 0; k < oArray.length; k++) {
        _overview += `<h2>${oArray[k].name}</h2>`;
        //       <a :href="`${完整的下载地址}`" target="downloadFile">{{文件名称}}</a>
        // <iframe style="display: none;" name="downloadFile"></iframe>
        _overview += `<div>${overview[oArray[k].j].brief}</div>`;
        var _div = document.createElement("div");
        for (var i = 0; i < overview[oArray[k].j].data.length; i++) {
          var _div2 = document.createElement("div");
          _div2.innerHTML = ` <a href="${
            overview[oArray[k].j].data[i].url
          }" target="downloadFile">${overview[oArray[k].j].data[i].name}</a>`;
          _div.appendChild(_div2);
        }
        _overview += `<div>${_div.innerHTML}</div>`;
      }

      let process = JSON.parse(res.process).stageBox;
      var _process = "<h1>项目安排</h1>";
      for (var pz = 0; pz < process.length; pz++) {
        _process += `<h2>阶段${pz + 1}:${process[pz].staTitle}</h2>`;
        _process += `<h2>总课时:${process[pz].allTime}</h2>`;
        let _act = process[pz].actBox;
        for (var z = 0; z < _act.length; z++) {
          _process += `<h2>活动${z + 1}</h2>`;
          _process += `<h3>活动名称:${_act[z].actName} 课时:${_act[z].actTime}</h3>`;
          let pAarray = [
            { j: "driQuestion", name: "活动目标" },
            { j: "tarDesign", name: "活动内容" },
            { j: "actiDesign", name: "预期成果" },
            { j: "evaDesign", name: "活动评价" },
          ];
          for (var i = 0; i < pAarray.length; i++) {
            _process += `<h3>${pAarray[i].name}</h3>`;
            _process += `<div>描述</div>`;
            _process += `<div>${_act[z][pAarray[i].j].brief}</div>`;
            _process += `<div>资料补充</div>`;
            var _div = document.createElement("div");
            for (var c = 0; c < _act[z][pAarray[i].j].data.length; c++) {
              var _div2 = document.createElement("div");
              _div2.innerHTML = ` <a href="${
                _act[z][pAarray[i].j].data[c].url
              }" target="downloadFile">${
                _act[z][pAarray[i].j].data[c].name
              }</a>`;
              _div.appendChild(_div2);
            }
            _process += `<div>${_div.innerHTML}</div>`;
          }
        }
      }
      let _proact = "<h1>项目活动过程</h1>";
      for (var pz = 0; pz < process.length; pz++) {
        _proact += `<h2>阶段${pz + 1}</h2>`;
        _proact += `<h2>描述</h2>`;
        _proact += `<div>${process[pz].brief}</div>`;
        _proact += `<h4>附件：`;
        var _div = document.createElement("div");
        for (var i = 0; i < process[pz].data.length; i++) {
          var _div2 = document.createElement("div");
          _div2.innerHTML = ` <a href="${process[pz].data[i].url}" target="downloadFile">${process[pz].data[i].name}</a>`;
          _div.appendChild(_div2);
        }
        _proact += `<div>${_div.innerHTML}</div>`;
      }

      let proexc = JSON.parse(res.proexc);
      let _proexc = "<h1>项目成果交流与评价</h1>";
      _proexc += `<div>描述</div>`;
      _proexc += `<div>${proexc.brief}</div>`;
      _proexc += `<div>附件</div>`;
      var _div = document.createElement("div");
      for (var i = 0; i < proexc.data.length; i++) {
        var _div2 = document.createElement("div");
        _div2.innerHTML = ` <a href="${proexc.data[i].url}" target="downloadFile">${proexc.data[i].name}</a>`;
        _div.appendChild(_div2);
      }
      _proexc += `<div>${_div.innerHTML}</div>`;

      let results = JSON.parse(res.results);
      let _results = "<h1>项目成效与反思</h1>";
      _results += `<div>描述</div>`;
      _results += `<div>${results.brief}</div>`;
      _results += `<div>附件</div>`;
      var _div = document.createElement("div");
      for (var i = 0; i < results.data.length; i++) {
        var _div2 = document.createElement("div");
        _div2.innerHTML = ` <a href="${results.data[i].url}" target="downloadFile">${results.data[i].name}</a>`;
        _div.appendChild(_div2);
      }
      _results += `<div>${_div.innerHTML}</div>`;
      // _results += `<h3>项目成效</h3>`;
      // _results += `<div>${results.proEffText}</div>`;
      // _results += `<h3>项目反思</h3>`;
      // _results += `<div>${results.proRefText}</div>`;

      _html = _title + _overview + _process + _proact + _proexc + _results;
      console.log("_overview", overview);
      console.log("_process", process);
      console.log("_results", results);
      this.generate(_html, { title: info.title, username: res.username });
    },
    async generate(a, data) {
      // 将html文件中需要用到的数据挂载到store上
      this.$store.commit("update", ["report", a]);
      console.log(this.$store.state.report);
      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>报告</title>
      </head>
      <body>
      ${this.$store.state.report}
      </body>
      </html>`;
      // debugger
      // 生成报告
      const link = document.createElement("a");
      let dname = data.title + "-" + data.username + ".html";
      // 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);
    },
  },
  created() {
    this.selectAnLi();
  },
};
</script>

<style scoped>
@media screen and (max-width: 1280px) {
  .anliNav > div:nth-child(3) {
    width: 70% !important;
  }
  .noAnliBox{
    width: 300px !important;
  }
}
.myAnliBox {
  /* height: 500px; */
  overflow: auto;
  overflow-x: hidden;
  height: 100%;
  /* box-shadow: inset 0px 14px 7px -14px #b9b9b9; */
}
.center_content {
  width: 100%;
  height: 100%;
}
.anLi {
  background: #fff;
  width: 95%;
  margin: 20px auto;
  border-radius: 10px;
}
.anliTop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}
.anliTopLeft {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  color: #afafaf;
  padding: 20px 0 10px 30px;
}
.anliTopLeft > div:nth-child(2) {
  padding-left: 20px;
}
.anliTopRight {
  padding: 20px 30px 10px 0;
}
.anliMiddle {
  padding: 0 0 5px 30px;
}
.anliImg {
  width: 200px;
  height: 115px;
  min-width: 200px;
}
.anliImg > img {
  width: 100%;
  height: 100%;
}
.people {
  display: flex;
}

.person {
  margin-left: 10px;
  line-height: 18px;
}
.man {
  width: 16px;
  height: 16px;
}

.man > img {
  width: 100%;
  height: 100%;
}
.anliBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.anliNav {
  padding-left: 30px;
  width: 100%;
}
.anliNav > div:nth-child(1) {
  font-size: 24px;
  /* font-weight: bold; */
}
.anliNav > div:nth-child(2) {
  /* font-weight: bold; */
  margin: 10px 0 10px 0;
}
.anliNav > div:nth-child(3) {
  color: #aba8a8;
  margin-bottom: 10px;
  height: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 80%;
}
.anliBottom {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 15px 30px;
}
.bottomRight {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.rightButton {
  background: #499eef;
  color: #fff;
  /* width: 60px; */
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 20px;
  padding: 0 15px;
}
.noAnliBox {
  width: 500px;
  margin: 20px auto;
}
.noAnliBox > img {
  width: 100%;
  height: 100%;
}
</style>