src/views/standard/analysis/index.vue

<template>
  <div>
    <back-box>
      <template slot="title">
        <span>使用分析</span>
      </template>
    </back-box>
    <div class="page-content">
      <div class="answer-header">
        <div class="sel-box">
          <el-select
            class="sel"
            v-model="query.regionId"
            placeholder="选择区域"
            @change="_QueryData"
            v-if="role == 'ROLE_JITUAN'"
          >
            <el-option
              v-for="item in gradeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-else
            class="sel"
            v-model="query.gradeName"
            placeholder="选择年级"
            @change="_QueryData"
          >
            <el-option
              v-for="item in gradeList"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            >
            </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="radio-box" v-if="role == 'ROLE_JITUAN'">
        <el-radio-group v-model="type" @change="changeType">
          <el-radio-button :label="1">学校使用对比</el-radio-button>
          <el-radio-button :label="2">学段使用对比</el-radio-button>
        </el-radio-group>
      </div>
      <div class="table-box" v-loading="loading">
        <el-empty
          :image-size="100"
          v-if="!tableData.length && !loading"
          description="没有更多数据"
        ></el-empty>
        <el-table
          v-else
          :data="tableData"
          :border="false"
          style="width: 100%"
          show-summary
        >
          <el-table-column align="center" fixed label="科目" prop="subjectName">
          </el-table-column>
          <el-table-column
            align="center"
            v-for="(item, index) in dataList"
            :key="index"
            :label="
              role == 'ROLE_JITUAN'
                ? item.schoolName || item.gradeName
                : item.gradeName || item.className
            "
          >
            <template v-if="role == 'ROLE_JITUAN'">
              <el-table-column
                :prop="'periodCount' + (type == 1 ? item.schoolId : item.grade)"
                label="课时数"
                align="center"
              >
              <template slot-scope="scoped">{{scoped.row['periodCount' + (type == 1 ? item.schoolId : item.grade)]||"--"}}</template>
              </el-table-column>
              <el-table-column
                :prop="'examCount' + (type == 1 ? item.schoolId : item.grade)"
                label="测练数"
                align="center"
              ><template slot-scope="scoped">{{scoped.row['examCount' + (type == 1 ? item.schoolId : item.grade)]||"--"}}</template></el-table-column>
            </template>
            <template v-else>
              <el-table-column
                :prop="'periodCount' + (item.grade || item.classId)"
                label="课时数"
                align="center"
              ><template slot-scope="scoped">{{scoped.row['periodCount' + (item.grade || item.classId)]||"--"}}</template></el-table-column>
              <el-table-column
                :prop="'examCount' + (item.grade || item.classId)"
                label="测练数"
                align="center"
              ><template slot-scope="scoped">{{scoped.row['examCount' + (item.grade || item.classId)]||"--"}}</template></el-table-column>
            </template>
          </el-table-column>
        </el-table>
        <p class="down" v-if="tableData.length">
          <el-button
            @click="downExc"
            type="primary"
            plain
            round
            icon="fa fa-cloud-download"
            >导出报表</el-button
          >
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { formatDate, downloadFile } from "@/utils";
export default {
  data() {
    return {
      loading: false,
      exportLoading: false,
      role: "",
      date: "", //今天-本周-本月-本季度
      type: 1, //集团管理员 表格切换
      query: {
        //搜索条件
        regionId: "",
        gradeName: "全部",
        startDay: "",
        endDay: "",
        day: "",
      },
      gradeList: [],
      tableData: [],
      dataList: [],
    };
  },
  created() {
    this.role = this.$store.getters.info.showRole || this.$store.getters.info.permissions[0].role;
    this._QueryGradeList();
    this.setDate(1);
    let startDay = this.query?.startDay;
    if (!startDay) {
      this.query.startDay = new Date();
      this.query.endDay = new Date();
    }
  },
  methods: {
    async downExc() {
      if (this.exportLoading == true) return;
      let query = {};
      for (let key in this.query) {
        if (this.query[key] != "") {
          if (key == "gradeName") {
            query[key] = this.query[key] == "全部" ? "" : this.query[key];
          } else {
            query[key] = this.query[key];
          }
        }
      }
      if (this.role == "ROLE_JITUAN") {
        delete query.gradeName;
      } else {
        delete query.regionId;
      }
      this.exportLoading = true;
      const exportUsageAnalysis = this.role != "ROLE_JITUAN"?this.$request.exportUsageAnalysis:
      this.$request.exportSchoolContrast
      const data = await exportUsageAnalysis({ ...query });
      this.exportLoading = false;
      if (data) {
        let blob = new Blob([data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        downloadFile("使用分析.xlsx", blob);
      } else {
        this.$message.error("下载失败");
      }
    },
    changeType(val) {
      if (val == 1) {
        this.query.regionId = "";
      }
      this._QueryData(val);
    },
    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;
          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 _QueryData() {
      this.loading = true;
      //多课时对比
      let query = {};
      for (let key in this.query) {
        if (this.query[key] != "") {
          if (key == "gradeName") {
            query[key] = this.query[key] == "全部" ? "" : this.query[key];
          } else {
            query[key] = this.query[key];
          }
        }
      }
      if (this.role == "ROLE_JITUAN") {
        delete query.gradeName;
      } else {
        delete query.regionId;
      }
      this.tableData = [];
      const Contrast =
        this.role != "ROLE_JITUAN"
          ? this.$request.usageAnalysis
          : this.type == 1
          ? this.$request.schoolContrast
          : this.$request.gradeContrast;
      const { data, status, info } = await Contrast({
        ...query,
      });
      this.loading = false;
      if (status === 0) {
        let dataIdsList = [],
          dataList = [];
        data.map((item) => {
          item.dataList.map((items) => {
            if (this.role == "ROLE_JITUAN") {
              if (this.type == 1) {
                if (!dataIdsList.includes(items.schoolId)) {
                  dataIdsList.push(items.schoolId);
                  dataList.push(items);
                }
              } else if (this.type == 2) {
                if (!dataIdsList.includes(items.grade)) {
                  dataIdsList.push(items.grade);
                  dataList.push(items);
                }
              }
            } else {
              if (this.query.gradeName == "全部") {
                if (!dataIdsList.includes(items.grade)) {
                  dataIdsList.push(items.grade);
                  dataList.push(items);
                }
              } else {
                if (!dataIdsList.includes(items.classId)) {
                  dataIdsList.push(items.classId);
                  dataList.push(items);
                }
              }
            }
          });
        });
        console.log(dataList);
        this.tableData = data.map((item) => {
          let params = {};
          dataIdsList.map((ids, index) => {
            item.dataList.map((items) => {
              if (this.role == "ROLE_JITUAN") {
                if (this.type == 1) {
                  if (items.schoolId == ids) {
                    params["examCount" + items.schoolId] = items.examCount;
                    params["periodCount" + items.schoolId] = items.periodCount;
                  }
                } else if (this.type == 2) {
                  if (items.grade == ids) {
                    params["examCount" + items.grade] = items.examCount;
                    params["periodCount" + items.grade] = items.periodCount;
                  }
                }
              } else {
                if (this.query.gradeName == "全部") {
                  if (items.grade == ids) {
                    params["examCount" + items.grade] = items.examCount;
                    params["periodCount" + items.grade] = items.periodCount;
                  }
                } else if (this.query.gradeName) {
                  if (items.classId == ids) {
                    params["examCount" + items.classId] = items.examCount;
                    params["periodCount" + items.classId] = items.periodCount;
                  }
                }
              }
            });
          });
          return {
            subjectName: item.subjectName,
            ...params,
          };
        });
        this.dataList = dataList.sort((a, b) => {
          return a.grade - b.grade;
        });
      } else {
        this.$message.error(info);
      }
    },
    // 查找班级
    async _QueryGradeList() {
      this.loading = true;
      const gradeList =
        this.role != "ROLE_JITUAN"
          ? this.$request.gradeList
          : this.$request.regionList;
      const { data, status, info } = await gradeList();
      if (status === 0) {
        if (!!data.list) {
          if (this.role != "ROLE_JITUAN") {
            this.gradeList =
              data.list?.map((item) => {
                let gradeList = {
                  value: item.grade,
                  label: item.gradeName,
                };
                return gradeList;
              }) || [];
            this.gradeList.unshift({
              value: "",
              label: "全部",
            });
          } else {
            this.gradeList =
              data.list?.map((item) => {
                let gradeList = {
                  value: item.id,
                  label: item.regionName,
                };
                return gradeList;
              }) || [];
            this.gradeList.unshift({
              value: "",
              label: "全部",
            });
          }
        }
      } else {
        this.$message.error(info);
      }
    },
  },
};
</script>
<style>
div::-webkit-scrollbar {
  width: 3px;
  height: 10px;
}
div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #ccc;
}
</style>
<style lang="scss" scoped>
.table-box {
  padding: 0 20px;
}
.radio-box {
  padding: 0 20px 12px;
}
.down {
  padding-top: 20px;
}
</style>