pbl-teacher-table/src/components/pages/CaseDesignS.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-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>
          </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">
          </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 type="primary" size="small" @click="getAll(scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </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,
      timer: null,
      dialogVisible: false,
      data: {},
      dataArray: [],
      choose: "",
      search: "",
    };
  },
  methods: {
    jump(cid) {
      window.parent.postMessage({ cid: cid, screenType: "3s" }, "*");
    },
    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
        // this.org
      };
      this.ajax
        .get(this.$store.state.api + "selectCaseS", params)
        .then((res) => {
          this.isLoading = false;
          let _res = res.data[0];
          let _res2 = res.data[1];
          for (var i = 0; i < _res.length; i++) {
            let taskC = 0;
            let toolC = 0;
            let evalC = 0;
            let fontC = 0;
            let course = [];
            for (var j = 0; j < _res2.length; j++) {
              if (_res[i].userid == _res2[j].userid) {
                course.push({
                  title: _res2[j].title,
                  courseId: _res2[j].courseId,
                });
                var _chapter = JSON.parse(_res2[j].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].toolArray.length > 0) {
                      toolC2 += _tasks[task].toolArray.length;
                    }
                    fontC2 += _tasks[task].task.length;
                    fontC2 += _tasks[task].taskDetail
                      .replace(/<[^<>]+>/g, "")
                      .replace(/&nbsp;/gi, "").length;
                    let _tools = _tasks[task].toolArray;
                    for (var tool = 0; tool < _tools.length; tool++) {
                      fontC2 += _tools[tool].toolDetail.length;
                    }
                  }
                  if (_res[i]["jd" + (k + 1)]) {
                    _res[i]["jd" + (k + 1)].taskC += taskC2;
                    _res[i]["jd" + (k + 1)].toolC += toolC2;
                    _res[i]["jd" + (k + 1)].evalC += evalC2;
                    _res[i]["jd" + (k + 1)].fontC += fontC2;
                  } else {
                    _res[i]["jd" + (k + 1)] = {};
                    _res[i]["jd" + (k + 1)].taskC = taskC2;
                    _res[i]["jd" + (k + 1)].toolC = toolC2;
                    _res[i]["jd" + (k + 1)].evalC = evalC2;
                    _res[i]["jd" + (k + 1)].fontC = fontC2;
                  }
                  taskC += taskC2;
                  toolC += toolC2;
                  evalC += evalC2;
                  fontC += fontC2;
                }
              }
              _res[i]["jdz"] = {};
              _res[i]["jdz"].taskC = taskC;
              _res[i]["jdz"].toolC = toolC;
              _res[i]["jdz"].evalC = evalC;
              _res[i]["jdz"].fontC = fontC;
              _res[i].course = course;
            }
          }
          if (this.search) {
            _res = _res.filter((a) => {
              return (
                a.school.indexOf(this.search) != -1 ||
                a.username.indexOf(this.search) != -1
              );
            });
          }
          if (this.choose == "school") {
            let array = _res.sort(function (a, b) {
              return a.school.localeCompare(b.school);
            });
            this.tableData = array;
          } else if (this.choose == "task") {
            let array = _res.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 = _res.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 = _res.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 = _res.sort(function (a, b) {
              //   return a.jdz.fontC - b.jdz.fontC;
              return b.jdz.toolC - a.jdz.toolC;
            });
            this.tableData = array;
          } else {
            this.tableData = _res;
          }
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    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();
    }, 5000);
  },
};
</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;
}
/* .table >>> .el-table .cell, .table >>> .el-table--border td:first-child .cell, .table >>> .el-table--border th:first-child .cell{
  padding: 0 3px;
} */
</style>