src/views/portrait/index.vue

<template>
  <div>
    <back-box>
      <template slot="title">
        <span>{{ "学生画像" }}</span>
      </template>
    </back-box>
    <div class="answer-header">
      <div class="sel-box">
        <el-select
          class="sel"
          v-model="query.classId"
          placeholder="选择班级"
          @change="changeclass"
        >
          <el-option
            v-for="item in classList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div class="d1">
          <el-date-picker
            v-model="query.startDay"
            type="date"
            @change="handleChangeTimeStart"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          ~
          <el-date-picker
            v-model="query.endDay"
            type="date"
            placeholder="选择日期时间"
            @change="handleChangeTimeEnd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <p class="p1">
          <span @click="setDate(1)" :class="[date == 1 ? 'active' : '', 's1']"
            >今天</span
          >
          <span @click="setDate(2)" :class="[date == 2 ? 'active' : '', 's1']"
            >本周</span
          >
          <span @click="setDate(3)" :class="[date == 3 ? 'active' : '', 's1']"
            >本月</span
          >
          <span @click="setDate(4)" :class="[date == 4 ? 'active' : '', 's1']"
            >本季度</span
          >
        </p>
        <el-button type="primary" round @click="_QueryData()">筛选</el-button>
      </div>
    </div>
    <div class="page-content">
      <ul class="stu-ul">
        <li class="stu-li" v-for="item in tableData" :key="item.studentId">
          <div class="tx">
            <i class="fa fa-mortar-board"></i>
            <p>{{ item.studentCode }}</p>
          </div>
          <div class="info">
            <p class="p1">
              {{ item.studentName }} <i class="fa fa-calculator"></i>
              {{ item.clickerSn }}
            </p>
            <p class="p2">{{ gradeName(item.grade) }}</p>
            <p class="p3">最近活跃：{{ item.modifiedTime }}</p>
          </div>
          <el-button
            class="btn"
            type="primary"
            round
            circle
            icon="el-icon-right"
            @click="linkDetail(item)"
          ></el-button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { formatDate, setGradeName } from "utils";
import BusEvent from "@/utils/busEvent";
export default {
  data() {
    return {
      role: "",
      query: {
        //搜索条件
        classId: "",
        startDay: "",
        endDay: "",
        day: "",
      },
      date: "",
      classList: [],
      tableData: [],
      page: 1,
      size: 20,
      total: 0,
    };
  },
  async created() {
    this.role =
      this.$store.getters.info.showRole ||
      this.$store.getters.info.permissions[0].role;
    await this._QueryClassList();
    await this.setDate(1);
    let startDay = this.query?.startDay;
    if (!startDay) {
      this.query.startDay = new Date();
      this.query.endDay = new Date();
    }
  },
  activated() {
    const that = this;
    BusEvent.$on("keepAlive", async function () {
      await that._QueryClassList();
      await that.setDate(1);
      let startDay = that.query?.startDay;
      if (!startDay) {
        that.query.startDay = new Date();
        that.query.endDay = new Date();
      }
    });
  },
  methods: {
    gradeName(type) {
      return setGradeName(type);
    },
    linkDetail(obj) {
      this.$router.push({
        path: "/portraitDetail",
        query: {
          studentName: obj.studentName,
          studentCode: obj.studentCode,
          id: obj.id,
          classId: this.query.classId,
        },
      });
    },
    changeclass() {
      this.page = 1;
      this._QueryData();
    },
    setDate(index) {
      const that = this;
      this.date = index == this.date ? "" : index;
      let aYear = new Date().getFullYear();
      let aMonth = new Date().getMonth() + 1;
      that.query.day = "";
      that.query.startDay = "";
      that.query.endDay = "";
      switch (index) {
        case 1:
          that.query.day = formatDate(new Date(), "yyyy-MM-dd");
          that.query.startDay = that.query.day;
          that.query.endDay = that.query.day;
          that.tabIndex = 1;
          break;
        case 2:
          let day = new Date().getDay();
          if (day == 0) {
            //中国式星期天是一周的最后一天
            day = 7;
          }
          day--;
          let aTime = new Date().getTime() - 24 * 60 * 60 * 1000 * day;
          that.query.startDay = formatDate(new Date(aTime), "yyyy-MM-dd");
          that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
          break;
        case 3:
          aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
          that.query.startDay = `${aYear}-${aMonth}-01`;
          that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
          break;
        case 4:
          if (aMonth > 0 && aMonth < 4) {
            aMonth = "1";
          } else if (aMonth > 3 && aMonth < 7) {
            aMonth = "4";
          } else if (aMonth > 6 && aMonth < 10) {
            aMonth = "7";
          } else {
            aMonth = "10";
          }
          aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
          that.query.startDay = `${aYear}-${aMonth}-01`;
          that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
          break;
      }
      this.page = 1;
      this._QueryData();
    },
    handleChangeTimeStart(val) {
      this.query.day = "";
      this.date = "";
      if (this.query.endDay) {
        if (new Date(val).getTime() > new Date(this.query.endDay).getTime()) {
          this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
          this.query.startDay = "";
        }
      }
    },
    handleChangeTimeEnd(val) {
      this.query.day = "";
      this.date = "";
      if (this.query.startDay) {
        if (new Date(val).getTime() < new Date(this.query.startDay).getTime()) {
          this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
          this.query.endDay = "";
        }
      }
    },
    async _QueryClassList() {
      let fetchClassList =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pClassList
          : this.$request.fetchClassList;
      const { data, status, info } = await fetchClassList();
      if (status === 0) {
        this.classList = data.list.map((item) => {
          return {
            value: this.role == "ROLE_PERSONAL" ? item.id : item.classId,
            label: item.className,
          };
        });
        this.query.classId = this.classList[0]?.value;
      } else {
        this.$message.error(info);
      }
    },
    async _QueryData() {
      this.loading = true;
      let query = {};
      for (let key in this.query) {
        if (this.query[key] != "") {
          query[key] = this.query[key];
        }
      }
      let studentList =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pStudentList
          : this.$request.tStudentList;
      const { data, status, info } = await studentList({
        ...query,
        page: this.page,
        size: this.size,
      });
      this.loading = false;
      if (status === 0) {
        this.tableData = (data?.list && [...data?.list]) || [];
        this.total = data.count || 0;
      } else {
        this.$message.error(info);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  padding: 0 20px;
}
.stu-ul {
  border-radius: 20px;
  background: #f8f8f8;
  padding: 12px;
  .stu-li {
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 12px 10px;
    margin-bottom: 16px;
    &:last-of-type {
      margin-bottom: 0;
    }
    .tx {
      width: 100px;
      height: 80px;
      background: #667ffd;
      border-radius: 8px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: #fff;
      margin-right: 12px;
      .fa-mortar-board {
        font-size: 32px;
      }
    }
    .info {
      flex: 1;
      .p1 {
        font-size: 18px;
        color: #333;
        .fa-calculator {
          font-size: 20px;
          color: #a6a6a6;
          margin: 0 5px 10px 10px;
        }
      }
      .p2 {
        font-size: 16px;
        padding-bottom: 6px;
      }
      .p3 {
        font-size: 16px;
        color: #7f7f7f;
      }
    }
    .btn {
      margin-right: 40px;
      &.is-circle {
        padding: 8px;
      }
      :deep(.el-icon-right) {
        font-size: 22px;
        font-weight: bold;
      }
    }
  }
}
</style>