pbl-teacher-table/src/components/pages/CaseDesign.vue

<template>
  <div class="cd_body">
    <div class="pb_content_body" style="
              background: #fff;
              padding: 0px 25px;
              box-sizing: border-box;
              border-radius: 5px;
              width: 95%;
            ">
      <div class="pb_head">
        <span>课程数据看板</span>
      </div>
      <div class="student_head">
        <div class="head_left">
          <span>筛选：</span>
          <el-select v-model="choose" @change="getData">
            <el-option label="默认排序" value=""> </el-option>
            <el-option label="学校名称" value="school"> </el-option>
            <el-option label="任务数量" value="task"> </el-option>
            <el-option label="评价" value="eval"> </el-option>
            <el-option label="工具" value="tool"> </el-option>
            <el-option label="字数" value="font"> </el-option>
          </el-select>
          <el-input v-model="search" class="student_input" placeholder="请输入教师名称或学校名称" @input="getData"></el-input>
        </div>
      </div>
    </div>
    <div class="cd_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"
        class="table">
        <el-table-column label="课程" min-width="15" align="center">
          <template slot-scope="scope">
            <div style="max-height: 180px; overflow: auto">
              <div v-if="scope.row.course.length">
                <div v-for="(item, index) in scope.row.course" :key="index" class="cd_course" @click="jump(item.courseId)">
                <el-tooltip :content="item.title">
                  <span>{{ item.title }}</span>
                </el-tooltip>
              </div>
              </div>
              <div v-else>
                —
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="学校" prop="school" min-width="15" align="center">
        </el-table-column>
        <el-table-column label="负责人" prop="username" min-width="15" align="center">
        </el-table-column>
        <el-table-column label="更新时间" prop="time" min-width="15" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.course.length">{{scope.row.time}}</div>
            <div v-else>—</div>
          </template>
        </el-table-column>
        <el-table-column label="总计" min-width="15" align="center">
          <template slot-scope="scope">
            <div class="cd_d_span">
              <div>
                <div>
                  <span>{{ scope.row.jdz.taskC }}</span><span>任务</span>
                </div>
                <div>
                  <span>{{ scope.row.jdz.toolC }}</span><span>工具</span>
                </div>
                <div>
                  <span>{{ scope.row.jdz.evalC }}</span><span>评价</span>
                </div>
                <div>
                  <span>{{ scope.row.jdz.fontC }}</span><span>字</span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="阶段1" min-width="15" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.jd1">
              <div class="cd_d_span">
                <div>
                  <span>{{ scope.row.jd1.taskC }}</span><span>任务</span>
                </div>
                <div>
                  <span>{{ scope.row.jd1.toolC }}</span><span>工具</span>
                </div>
                <div>
                  <span>{{ scope.row.jd1.evalC }}</span><span>评价</span>
                </div>
                <div>
                  <span>{{ scope.row.jd1.fontC }}</span><span>字</span>
                </div>
              </div>
            </div>
            <div v-else>—</div>
          </template>
        </el-table-column>
        <el-table-column label="阶段2" min-width="15" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.jd2">
              <div class="cd_d_span">
                <div>
                  <span>{{ scope.row.jd2.taskC }}</span><span>任务</span>
                </div>
                <div>
                  <span>{{ scope.row.jd2.toolC }}</span><span>工具</span>
                </div>
                <div>
                  <span>{{ scope.row.jd2.evalC }}</span><span>评价</span>
                </div>
                <div>
                  <span>{{ scope.row.jd2.fontC }}</span><span>字</span>
                </div>
              </div>
            </div>
            <div v-else>—</div>
          </template>
        </el-table-column>
        <el-table-column label="阶段3" min-width="15" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.jd3">
              <div class="cd_d_span">
                <div>
                  <span>{{ scope.row.jd3.taskC }}</span><span>任务</span>
                </div>
                <div>
                  <span>{{ scope.row.jd3.toolC }}</span><span>工具</span>
                </div>
                <div>
                  <span>{{ scope.row.jd3.evalC }}</span><span>评价</span>
                </div>
                <div>
                  <span>{{ scope.row.jd3.fontC }}</span><span>字</span>
                </div>
              </div>
            </div>
            <div v-else>—</div>
          </template>
        </el-table-column>
        <el-table-column label="阶段4" min-width="15" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.jd4">
              <div class="cd_d_span">
                <div>
                  <span>{{ scope.row.jd4.taskC }}</span><span>任务</span>
                </div>
                <div>
                  <span>{{ scope.row.jd4.toolC }}</span><span>工具</span>
                </div>
                <div>
                  <span>{{ scope.row.jd4.evalC }}</span><span>评价</span>
                </div>
                <div>
                  <span>{{ scope.row.jd4.fontC }}</span><span>字</span>
                </div>
              </div>
            </div>
            <div v-else>—</div>
          </template>
        </el-table-column>
        <el-table-column label="阶段5" min-width="15" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.jd5">
              <div class="cd_d_span">
                <div>
                  <span>{{ scope.row.jd5.taskC }}</span><span>任务</span>
                </div>
                <div>
                  <span>{{ scope.row.jd5.toolC }}</span><span>工具</span>
                </div>
                <div>
                  <span>{{ scope.row.jd5.evalC }}</span><span>评价</span>
                </div>
                <div>
                  <span>{{ scope.row.jd5.fontC }}</span><span>字</span>
                </div>
              </div>
            </div>
            <div v-else>—</div>
          </template>
        </el-table-column>
        <el-table-column label="阶段6" min-width="15" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.jd6">
              <div class="cd_d_span">
                <div>
                  <span>{{ scope.row.jd6.taskC }}</span><span>任务</span>
                </div>
                <div>
                  <span>{{ scope.row.jd6.toolC }}</span><span>工具</span>
                </div>
                <div>
                  <span>{{ scope.row.jd6.evalC }}</span><span>评价</span>
                </div>
                <div>
                  <span>{{ scope.row.jd6.fontC }}</span><span>字</span>
                </div>
              </div>
            </div>
            <div v-else>—</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="15">
          <template slot-scope="scope">
            <!-- <div
              @click="getAll(scope.row)"
            >
              查看全部
            </div> -->
            <el-button v-if="scope.row.course.length" type="primary" size="small" @click="getAll(scope.row)">查看详情</el-button>
            <div v-else>—</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="student_page">
        <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total"
          v-if="page && tableData.length" style="padding: 0px" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>
    <el-dialog title="查看" :visible.sync="dialogVisible" :append-to-body="true" width="620px" :before-close="handleClose"
      class="dialog_diy">
      <div v-if="dataArray.length">
        <div class="cd_d_box">
          <span>教师：</span><span>{{ data.username }}</span>
        </div>
        <div class="cd_d_box">
          <span>学校：</span><span>{{ data.school }}</span>
        </div>
        <div class="cd_d_jd">
          <div v-for="(item, index) in dataArray" :key="index" class="cd_d_jd_box">
            <div class="cd_d_jd_name">{{ "阶段" + (index + 1) }}</div>
            <div class="cd_d_jd_content cd_d_span">
              <div>
                <span>{{ data[item].taskC }}</span><span>任务</span>
              </div>
              <div>
                <span>{{ data[item].toolC }}</span><span>工具</span>
              </div>
              <div>
                <span>{{ data[item].evalC }}</span><span>评价</span>
              </div>
              <div>
                <span>{{ data[item].fontC }}</span><span>字</span>
              </div>
            </div>
          </div>
          <div class="cd_d_jd_box">
            <div class="cd_d_jd_name">总计</div>
            <div class="cd_d_jd_content cd_d_span" style="background: #d4d4d4">
              <div>
                <span>{{ data["jdz"].taskC }}</span><span>任务</span>
              </div>
              <div>
                <span>{{ data["jdz"].toolC }}</span><span>工具</span>
              </div>
              <div>
                <span>{{ data["jdz"].evalC }}</span><span>评价</span>
              </div>
              <div>
                <span>{{ data["jdz"].fontC }}</span><span>字</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      isLoading: false,
      org: this.$route.query.org,
      oid: this.$route.query.oid,
      timer: null,
      dialogVisible: false,
      data: {},
      dataArray: [],
      choose: "",
      search: "",
      total: 0,
      page: 1,
      pageSize: 10,
    };
  },
  methods: {
    jump(cid) {
      window.parent.postMessage({ cid: cid, screenType: "3" }, "*");
    },
    handleClose(done) {
      done();
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    getData() {
      let params = {
        org: this.org,
        oid: this.oid,
        page: this.page,
        pageSize: this.pageSize
        // this.org
      };
      this.ajax
        .get(this.$store.state.api + "selectCase3", params)
        .then((res) => {
          this.isLoading = false;
          let _res = res.data[0];
          // let _res2 = res.data[1];
          let _res2 = [];
          let _user = [];
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          for (var i = 0; i < _res.length; i++) {
            let taskC = 0;
            let toolC = 0;
            let evalC = 0;
            let fontC = 0;
            let course = [];
            if (_user.indexOf(_res[i].tuid) == -1) {
              _res[i].course = []
              _res2.push(_res[i])
              _user.push(_res[i].tuid)
            }
            for (var j = 0; j < _res2.length; j++) {
              if (_res[i].tuid == _res2[j].tuid) {
                if (_res[i].userid) {
                  _res2[j].course.push({
                    title: _res[i].title,
                    courseId: _res[i].courseId,
                  });
                  var _chapter = JSON.parse(_res[i].chapters);
                  for (var k = 0; k < _chapter.length; k++) {
                    let taskC2 = 0;
                    let toolC2 = 0;
                    let evalC2 = 0;
                    let fontC2 = 0;
                    fontC2 += _chapter[k].dyName.length;
                    taskC2 = _chapter[k].chapterInfo[0].taskJson.length;
                    let _tasks = _chapter[k].chapterInfo[0].taskJson;
                    for (var task = 0; task < _tasks.length; task++) {
                      if (_tasks[task].eList) {
                        evalC2 += _tasks[task].eList.length;
                      }
                      if (_tasks[task].toolChoose[0].tool.length > 0) {
                        toolC2 += _tasks[task].toolChoose.length;
                      }
                      fontC2 += _tasks[task].task.length;
                      fontC2 += _tasks[task].taskDetail
                        .replace(/<[^<>]+>/g, "")
                        .replace(/&nbsp;/gi, "").length;
                      let _tools = _tasks[task].toolChoose;
                      for (var tool = 0; tool < _tools.length; tool++) {
                        fontC2 += _tools[tool].toolDetail.length;
                      }
                    }
                    if (_res2[j]["jd" + (k + 1)]) {
                      _res2[j]["jd" + (k + 1)].taskC += taskC2;
                      _res2[j]["jd" + (k + 1)].toolC += toolC2;
                      _res2[j]["jd" + (k + 1)].evalC += evalC2;
                      _res2[j]["jd" + (k + 1)].fontC += fontC2;
                    } else {
                      _res2[j]["jd" + (k + 1)] = {};
                      _res2[j]["jd" + (k + 1)].taskC = taskC2;
                      _res2[j]["jd" + (k + 1)].toolC = toolC2;
                      _res2[j]["jd" + (k + 1)].evalC = evalC2;
                      _res2[j]["jd" + (k + 1)].fontC = fontC2;
                    }
                    taskC += taskC2;
                    toolC += toolC2;
                    evalC += evalC2;
                    fontC += fontC2;
                  }
                  _res2[j]["jdz"] = {};
                  _res2[j]["jdz"].taskC = taskC;
                  _res2[j]["jdz"].toolC = toolC;
                  _res2[j]["jdz"].evalC = evalC;
                  _res2[j]["jdz"].fontC = fontC;
                  // _res2[j].course = course;
                }else{
                  _res2[j]["jdz"] = {};
                  _res2[j]["jdz"].taskC = 0;
                  _res2[j]["jdz"].toolC = 0;
                  _res2[j]["jdz"].evalC = 0;
                  _res2[j]["jdz"].fontC = 0;
                }

              }
            }
          }
          if (this.search) {
            _res2 = _res2.filter((a) => {
              return (
                a.school.indexOf(this.search) != -1 ||
                a.username.indexOf(this.search) != -1
              );
            });
          }
          if (this.choose == "school") {
            let array = _res2.sort(function (a, b) {
              return a.school.localeCompare(b.school);
            });
            this.tableData = array;
          } else if (this.choose == "task") {
            let array = _res2.sort(function (a, b) {
              //   return a.jdz.taskC - b.jdz.taskC;
              return b.jdz.taskC - a.jdz.taskC;
            });
            this.tableData = array;
          } else if (this.choose == "font") {
            let array = _res2.sort(function (a, b) {
              //   return a.jdz.fontC - b.jdz.fontC;
              return b.jdz.fontC - a.jdz.fontC;
            });
            this.tableData = array;
          } else if (this.choose == "eval") {
            let array = _res2.sort(function (a, b) {
              //   return a.jdz.fontC - b.jdz.fontC;
              return b.jdz.evalC - a.jdz.evalC;
            });
            this.tableData = array;
          } else if (this.choose == "tool") {
            let array = _res2.sort(function (a, b) {
              //   return a.jdz.fontC - b.jdz.fontC;
              return b.jdz.toolC - a.jdz.toolC;
            });
            this.tableData = array;
          } else {
            this.tableData = _res2;
          }
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
      this.getData();
    },
    getAll(res) {
      this.data = res;
      let a = Object.keys(res);
      a = a.filter((el) => {
        return el.indexOf("jd") != -1 && el != "jdz";
      });
      this.dataArray = a;
      this.dialogVisible = true;
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  mounted() {
    this.isLoading = true;
    this.getData();
    this.timer = setInterval(() => {
      this.getData();
    }, 60000);
  },
};
</script>

<style scoped>
.student_input {
  width: 190px;
  font-size: 13px;
  padding: 0 10px;
}

.cd_body {
  height: 100%;
  width: 100%;
}

.pb_head {
  margin: 0 !important;
  width: 100% !important;
}

.student_head {
  margin-top: 10px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.head_left {
  display: flex;
  align-items: center;
}

.cd_title span {
  font-size: 25px;
  font-weight: 700;
}

.cd_table {
  width: 95%;
  margin: 0 auto;
  padding: 0 0 10px;
}

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

.dialog_diy>>>.el-dialog {
  background: #fafafa;
}

.dialog_diy>>>.el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__title {
  color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
  top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.cd_d_box {
  font-size: 16px;
}

.cd_d_box+.cd_d_box {
  margin-top: 10px;
}

.cd_d_jd {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.cd_d_jd_box {
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background: #eee; */
  border-radius: 5px;
  margin: 10px 15px 0 0;
}

.cd_d_jd_box {}

.cd_d_jd_content {
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #eee;
  border-radius: 5px;
  padding: 5px 0;
}

.cd_d_jd_content div+div {
  margin-top: 5px;
}

.cd_d_jd_content div span+span {
  margin-left: 5px;
}

.cd_d_jd_name {
  margin-bottom: 5px;
  color: #184ebd;
}

.cd_d_span div:nth-child(1) span:nth-child(1) {
  color: #3887fe;
}

.cd_d_span div:nth-child(2) span:nth-child(1) {
  color: #fe3987;
}

.cd_d_span div:nth-child(3) span:nth-child(1) {
  color: #10bb6e;
}

.cd_d_span div:nth-child(4) span:nth-child(1) {
  color: #3887fe;
}

.cd_d_span div span:nth-child(1) {
  margin-right: 5px;
}

.cd_course {
  cursor: pointer;
  width: 100%;
  display: flex;
}

.cd_course span {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table>>>.cell {
  padding: 0px 3px !important;
}

.student_page {
  width: 100%;
  margin: 20px auto;
}

/* .table >>> .el-table .cell, .table >>> .el-table--border td:first-child .cell, .table >>> .el-table--border th:first-child .cell{
  padding: 0 3px;
} */
</style>