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

<template>
  <div class="cd_body" style="overflow: auto">
    <div class="pb_content_body" style="
        background: #fff;
        padding: 0px 25px;
        box-sizing: border-box;
        width: 95%;
        margin: 10px auto 0;
      ">
      <div class="pb_head">
        <img src="../../assets/case.png" style="margin-right: 10px; width: 45px;" alt="" />
        <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="操作" width="150px">
          <template slot-scope="scope">
            <!-- <div
              @click="getAll(scope.row)"
            >
              查看全部
            </div> -->
            <el-button type="primary" size="small" style="background: rgb(147, 125, 223); border: none"
              @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_jd2">
          <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>
        <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" class="cancelbtnGM">关闭</el-button>
      </span>
    </el-dialog> -->
    <div v-if="dialogVisible" class="vbody">
      <CourseCase :data="data"></CourseCase>
      <el-button class="btn" @click="dialogVisible = false" type="primary" size="small"
        style="background: rgb(147, 125, 223); border: none">关闭</el-button>
    </div>
  </div>
</template>

<script>
import CourseCase from './components/courseCase.vue';
export default {
  components: {
    CourseCase,
  },
  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: "3gm" }, "*");
    },
    handleClose(done) {
      done();
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    getData() {
      let params = {
        org: this.org,
        // this.org
      };
      this.ajax
        .get(this.$store.state.api + "selectCase", 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 course = [];
            var ck = 0
            for (var j = 0; j < _res2.length; j++) {
              if (_res[i].userid == _res2[j].userid) {
                let taskC = 0;
                let toolC = 0;
                let evalC = 0;
                let fontC = 0;


                let wang = 0;//7
                let si = 0;//3
                let dian = 0;//1
                let xuan = 0;//45
                let wen = 0;//4
                let ti = 0;//16
                let other = 0;
                course.push({
                  title: _res2[j].title,
                  courseId: _res2[j].courseId,
                  jd: [],
                  jdz: {},
                  course: {}
                });
                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].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;
                    }
                    for (var toolci = 0; toolci < _tasks[task].toolChoose.length; toolci++) {
                      if (_tasks[task].toolChoose[toolci].tool.indexOf(7) != -1) {
                        wang++
                      } else if (_tasks[task].toolChoose[toolci].tool.indexOf(3) != -1) {
                        si++
                      } else if (_tasks[task].toolChoose[toolci].tool.indexOf(1) != -1) {
                        dian++
                      } else if (_tasks[task].toolChoose[toolci].tool.indexOf(4) != -1) {
                        wen++
                      } else if (_tasks[task].toolChoose[toolci].tool.indexOf(45) != -1) {
                        xuan++
                      } else if (_tasks[task].toolChoose[toolci].tool.indexOf(16) != -1) {
                        ti++
                      } else {
                        other++
                      }
                    }
                  }
                  // 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;
                  // }
                  _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;
                  course[ck].jd.push(_res[i]["jd" + (k + 1)])

                  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;
                course[ck].jdz = _res[i]["jdz"]

                var _course = {
                  wang,
                  si,
                  dian,
                  xuan,
                  wen,
                  ti,
                  other,
                }
                course[ck].course = _course
                ck++
              }
              // _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;
  display: flex;
  align-items: center;
}

.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: #454545 !important;
  padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer {
  background: rgb(184, 181, 202);
}

.dialog_diy>>>.el-dialog__body {
  padding: 30px 10px;
}

.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;
  background: #fff;
  padding: 10px 15px 25px;
  box-sizing: border-box;
}

.cd_d_jd2 {
  background: #fff;
  padding: 10px 15px;
  box-sizing: border-box;
}

.cd_d_jd_box {
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background: #eee; */
  border-radius: 5px;
  margin: 10px 14px 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: #222;
}

.cd_d_span div:nth-child(1) span:nth-child(1) {
  color: rgb(147, 125, 223);
}

.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: rgb(147, 125, 223);
}

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

.vbody {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99999;
}

.vbody .btn {
  position: absolute;
  top: 20px;
  right: 65px;
}
</style>