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

<template>
  <div class="center_content">
    <!-- <div
      style="
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
      "
    >
      <div></div>
      <el-button
        type="primary"
        style="background: rgb(112, 135, 228); width: 100px; margin-right: 3%"
        @click="goTo('/addRace')"
        >案例设计</el-button
      >
    </div> -->
    <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.name }}</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 class="xmjj" v-if="JSON.parse(an.info).courseText">
                {{ JSON.parse(an.info).courseText }}
              </div>
              <div class="personAndAutor">
                <div>总人数：</div>
                <div class="people">
                  <div class="man">
                    <img src="../../../../assets/people.png" alt />
                  </div>
                  <div class="person">
                    {{
                      an.info
                        ? JSON.parse(an.info).autor.length +
                          JSON.parse(an.info).tableData.length
                        : 0
                    }}人
                  </div>
                </div>
                <div class="autorBox" v-if="JSON.parse(an.info).autor.length">
                  <div>联系人：</div>
                  <div
                    class="Autor"
                    v-for="(a, aIndex) in JSON.parse(an.info).autor"
                    :key="aIndex"
                  >
                    {{ a.sn }}
                  </div>
                </div>
                <div
                  class="autorBox"
                  v-if="JSON.parse(an.info).tableData.length"
                >
                  <div>协作者：</div>
                  <div
                    class="Autor"
                    v-for="(a, aIndex) in JSON.parse(an.info).tableData"
                    :key="aIndex"
                  >
                    {{ a.sn }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="anliBottom">
          <div style="margin-top: 5px;" :class="{ isSubmit : an.state == 1 } " >
            当前状态：{{ 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" @click="goTo('/anliDetail?aid=' + an.id)">
              开始教学
            </div> -->
            <div class="rightButton" @click="goTo('/addRace?aid=' + an.id)">
              编辑
            </div>
            <div class="rightButton" @click="deleteAnli(an.id)">删除</div>
            <div
              class="rightButton"
              style="background: #225ac7"
              @click="lookDetail(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) {
      this.$confirm("确定提交此案例吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          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);
            });
        })
        .catch(() => {});
    },
    deleteAnli(id) {
      this.$confirm("确定删除此案例吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = {
            id: id,
          };
          this.ajax
            .get(this.$store.state.api + "deleteAnli", params)
            .then((res) => {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.selectAnLi();
            })
            .catch((err) => {
              console.error(err);
            });
        })
        .catch(() => {});
    },
    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="JavaScript:void(0)" onclick="downloadFile2('${info.data[i].url}')">${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="`${完整的下载地址}`" onclick="downloadFile2>{{文件名称}}</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="JavaScript:void(0)" onclick="downloadFile2('${
            overview[oArray[k].j].data[i].url
          }')">${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="JavaScript:void(0)" onclick="downloadFile2('${
                _act[z][pAarray[i].j].data[c].url
              }')">${_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="JavaScript:void(0)" onclick="downloadFile2('${process[pz].data[i].url}')">${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="JavaScript:void(0)" onclick="downloadFile2('${proexc.data[i].url}')">${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="JavaScript:void(0)" onclick="downloadFile2('${results.data[i].url}')">${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.name });
    },
    async generate(a, data) {
      // 将html文件中需要用到的数据挂载到store上
      this.$store.commit("update", ["report", a]);
      console.log(this.$store.state.report);
      const content =
        '<!DOCTYPE html>\n      <html lang="en">\n      <head>\n          <meta charset="UTF-8">\n          <meta http-equiv="X-UA-Compatible" content="IE=edge">\n          <meta name="viewport" content="width=device-width, initial-scale=1.0">\n          <title>报告</title>\n      </head>     \n      <body>' +
        this.$store.state.report +
        '</body>\n      \x3Cscript>\n      function downloadFile2(url) {\n        let _url = "";\n          _url = url;\n        const x = new XMLHttpRequest();\n        x.open("GET", _url, true);\n        x.responseType = "blob";\n        x.onload = function (e) {\n          let content = x.response;\n          let elink = document.createElement("a");\n          elink.download = decodeURI(\n            _url.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]\n          );\n          elink.style.display = "none";\n          let blob = new Blob([content]);\n          elink.href = URL.createObjectURL(blob);\n          document.body.appendChild(elink);\n          elink.click();\n          document.body.removeChild(elink);\n        };\n        x.send();\n      }\n      \x3C/script>\n      </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);
    },
    lookDetail(aid) {
      window.open(
        window.location.origin +
          window.location.pathname +
          "/#/anliDetail?aid=" +
          aid
      );
    },
  },
  created() {
    this.selectAnLi();
  },
};
</script>

<style scoped>
@media screen and (max-width: 1280px) {
  .xmjj {
    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 30px;
  border-radius: 10px;
  height: 210px;
}

.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%;
  object-fit: contain;
}

.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: 20px;
  /* font-weight: bold; */
}

.anliNav > div:nth-child(2) {
  /* font-weight: bold; */
  margin: 10px 0 10px 0;
}

.xmjj {
  color: #aba8a8;
  margin-bottom: 10px;
  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;
  margin: -10px 10px 0 30px;
}

.isSubmit {
  color: red;
}

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

.personAndAutor {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.autorBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin-left: 10px;
}

.Autor {
  margin: 0 5px;
}
</style>