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 v-if="!isLoading">
      <div class="myAnliBox" v-if="anliBox.length > 0">
        <div
          :class="{ isAnliAll: an.isAll }"
          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>
                  <div
                    :class="{ isAll: an.isAll }"
                    class="xmjj"
                    v-if="JSON.parse(an.info).courseText"
                  >
                    {{ JSON.parse(an.info).courseText }}
                  </div>
                  <div v-if="JSON.parse(an.info).courseText.length > 90">
                    <div
                      class="selectJj"
                      @click="selectJj(anIndex, 1)"
                      v-if="!an.isAll"
                    >
                      展开
                      <!-- <img src="../../../../assets/icon/expand.png" alt="" /> -->
                    </div>
                    <div class="selectJj" @click="selectJj(anIndex, 0)" v-else>
                      收缩
                      <!-- <img src="../../../../assets/icon/fold.png" alt="" /> -->
                    </div>
                  </div>
                </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, 0)"
                v-if="an.state == 0"
              >
                提交
              </div>
              <div class="rightButton" @click="updateState(an.id, 1)" v-else>
                取消提交
              </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>
    <div class="noAnliBox" style="width: 100%; text-align: center" v-else>
      正在加载数据中，请稍等...
    </div>
  </div>
</template>

<script>
export default {
  props: ["userid", "oid", "type"],
  data() {
    return {
      isLoading: false,
      anliBox: [],
      noBanner: require("../../../../assets/noBanner.jpg"),
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    selectAnLi() {
      this.isLoading = true;
      let params = {
        uid: this.userid,
        t: this.type,
      };
      this.ajax
        .get(this.$store.state.api + "selectRaceList", params)
        .then((res) => {
          this.isLoading = false;
          this.anliBox = res.data[0];
          for (var i = 0; i < this.anliBox.length; i++) {
            this.anliBox[i].isAll = "";
            this.anliBox[i].isAll = false;
          }
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    updateState(id, t) {
      var a = 0;
      if (t == 0) {
        a = 1;
      }
      if (t == 0) {
        this.$confirm("确定提交此案例吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let paramsa = {
              id: id,
              s: a,
            };
            this.ajax
              .get(this.$store.state.api + "updateRaceState", paramsa)
              .then((res) => {
                this.$message({
                  message: "提交成功",
                  type: "success",
                });
                this.selectAnLi();
              })
              .catch((err) => {
                console.error(err);
              });
            // let params = {
            //   sid: this.oid,
            // };
            // this.ajax
            //   .get(this.$store.state.api + "selectRaceByOid", params)
            //   .then((res) => {
            //     if (res.data[0].length == 0) {
            //       let paramsa = {
            //         id: id,
            //         s: a,
            //       };
            //       this.ajax
            //         .get(this.$store.state.api + "updateRaceState", paramsa)
            //         .then((res) => {
            //           this.$message({
            //             message: "提交成功",
            //             type: "success",
            //           });
            //           this.selectAnLi();
            //         })
            //         .catch((err) => {
            //           console.error(err);
            //         });
            //     }
            //  else {
            //   var inType = [];
            //   for (var i = 0; i < res.data[0].length; i++) {
            //     if (inType.length == 0) {
            //       inType = JSON.parse(res.data[0][i].info).type;
            //     } else {
            //       inType += JSON.parse(res.data[0][i].info).type;
            //     }
            //   }
            //   var oldType = [];
            //   for (var j = 0; j < this.anliBox.length; j++) {
            //     if (id == this.anliBox[j].id) {
            //       oldType = JSON.parse(this.anliBox[j].info).type;
            //       break;
            //     }
            //   }
            //   if (
            //     res.data[0][0].name != "华南师大附属中学" ||
            //     res.data[0][0].name != "广东实验中学" ||
            //     res.data[0][0].name != "华南师大附属小学"
            //   ) {
            //     var isIndex = 0;
            //     for (var k = 0; k < oldType.length; k++) {
            //       if (inType.indexOf(oldType[k]) != -1) {
            //         this.$message({
            //           message: "每校每类别案例限报一项！",
            //           type: "error",
            //         });
            //         isIndex = 1;
            //         break;
            //       }
            //     }
            //     if (isIndex == 0) {
            //       let paramsb = {
            //         id: id,
            //         s: a,
            //       };
            //       this.ajax
            //         .get(this.$store.state.api + "updateRaceState", paramsb)
            //         .then((res) => {
            //           this.$message({
            //             message: "提交成功",
            //             type: "success",
            //           });
            //           this.selectAnLi();
            //         })
            //         .catch((err) => {
            //           console.error(err);
            //         });
            //     }
            //   } else {
            //     var isNum = 0;
            //     for (var z = 0; z < res.data[0].length; z++) {
            //       for (var p = 0; p < oldType.length; p++) {
            //         if (
            //           JSON.parse(res.data[0][z].info).type.indexOf(
            //             oldType[p]
            //           ) != -1
            //         ) {
            //           isNum++;
            //         }
            //       }
            //     }
            //     if (isNum < 2) {
            //       let paramsb = {
            //         id: id,
            //         s: a,
            //       };
            //       this.ajax
            //         .get(this.$store.state.api + "updateRaceState", paramsb)
            //         .then((res) => {
            //           this.$message({
            //             message: "提交成功",
            //             type: "success",
            //           });
            //           this.selectAnLi();
            //         })
            //         .catch((err) => {
            //           console.error(err);
            //         });
            //     } else {
            //       this.$message({
            //         message: "每校每类别案例限报两项！",
            //         type: "error",
            //       });
            //     }
            //   }
            // }
            // })
            // .catch((err) => {
            //   console.error(err);
            // });
          })
          .catch(() => {});
      } else {
        this.$confirm("确定取消提交此案例吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let paramsd = {
              id: id,
              s: a,
            };
            this.ajax
              .get(this.$store.state.api + "updateRaceState", paramsd)
              .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
      );
    },
    selectJj(i, type) {
      if (type == 1) {
        this.anliBox[i].isAll = true;
      } else {
        this.anliBox[i].isAll = false;
      }
      this.$forceUpdate();
    },
  },
  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,
.isAnliAll {
  background: #fff;
  width: 95%;
  margin: 20px auto 30px;
  border-radius: 10px;
  height: auto;
}
/* 
.isAnliAll {
  height: auto;
} */

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

.anliNav > div:nth-child(3) {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.xmjj {
  color: #aba8a8;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 80%;
}

.isAll {
  color: #aba8a8;
  margin-bottom: 10px;
  width: 90%;
  white-space: unset;
  overflow: unset;
  text-overflow: unset;
  word-break: break-word;
}

.anliBottom {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  margin: -10px 10px 0 30px;
  padding: 15px 0;
}

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

.selectJj {
  cursor: pointer;
  color: #ccc;
  min-width: 32px;
}

.selectJj > img {
  width: 100%;
  height: 100%;
}
</style>