dy-admin-manager/src/views/main/cloudDate/exerciseDurationDetail.vue

<template>
  <div class="m-container">
    <h2>
      <el-page-header @back="onCancel" content="练习时长详情"></el-page-header>
    </h2>

    <div class="m-core">
      <!-- 搜索标题 -->
      <saveform
        :inline="true"
        ref="searchForm"
        class="searchForm"
        :model.sync="searchForm"
      >
        <el-form-item prop="dates">
          <el-select
            class="multiple"
            v-model.trim="searchForm.organId"
            filterable
            clearable
            placeholder="请选择分部"
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="dates">
          <!-- @change="changeWeek" -->
          <el-date-picker
            :clearable="false"
            v-model="searchForm.dates"
            value-format="yyyy-MM-dd"
            :picker-options="{
              firstDayOfWeek: 1,
              disabledDate(time) {
                return time.getTime() >= nowIndex;
              }
            }"
            type="daterange"
            style="width: 405px"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button @click="search" type="danger">搜索</el-button>
          <el-button @click="onReSet" type="primary">重置</el-button>
        </el-form-item>
      </saveform>
      <!-- 分组添加柱状图  -->
      <el-button
        type="primary"
        @click="exportQuestion"
        style="margin: 0 0 16px"
        v-permission="'export/managerDownload/numDetail'"
        >导出</el-button
      >
      <div class="tableWrap">
        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        >
          <el-table-column width="120px" align="center" prop="id" label="排名">
            <template slot-scope="scope">
              <div>
                {{ scope.$index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="teacherName"
            label="声部老师"
          ></el-table-column>
          <el-table-column align="center" prop="normalNum" label="会员人数">
            <template slot-scope="scope">
              <div>{{ scope.row.normalNum }}人</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="trainStudentNum"
            label="练习人数"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.trainStudentNum }}人</div>
            </template></el-table-column
          >
          <el-table-column align="center" prop="trainRate" label="练习率">
            <template slot-scope="scope">
              <div>{{ scope.row.trainRate }}%</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="id" label="≤60分钟">
            <template slot-scope="scope">
              <div>{{ scope.row.train1 }}人</div>
            </template></el-table-column
          >

          <el-table-column align="center" prop="id" label="60~120分钟">
            <template slot-scope="scope">
              <div>{{ scope.row.train2 }}人</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="id" label="120~240分钟">
            <template slot-scope="scope">
              <div>{{ scope.row.train3 }}人</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="id" label="＞240分钟">
            <template slot-scope="scope">
              <div>{{ scope.row.train4 }}人</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="id" label="平均练习时长">
            <template slot-scope="scope">
              <div>{{ scope.row.avgTrainTime }}分钟</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="id" label="练习达标占比">
            <template slot-scope="scope">
              <div>{{ scope.row.trainStandRate }}%</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { Export } from "@/utils/downLoadFile";
import saveform from "@/components/save-form";
import dayjs from "dayjs";
import histogram from "v-charts/lib/histogram.common";
import { getNowDateAndMonday, getNowDateAndSunday } from "@/utils/utils";
import { cloudTeacherSumDetail } from "../api";
let nowTime = new Date();
nowTime =
  nowTime.getFullYear() +
  "-" +
  (nowTime.getMonth() + 1) +
  "-" +
  nowTime.getDate();
export const getTimes = (times, keys = []) => {
  if (times && times.length) {
    return {
      [keys[0] || "start"]: dayjs(times[0]).format("YYYY-MM-DD"),
      [keys[1] || "start"]: dayjs(times[1]).format("YYYY-MM-DD")
    };
  }
  return {};
};
export default {
  components: { saveform, "ve-histogram": histogram },
  name: "helpCategory",
  data() {
    return {
      nowIndex: dayjs(dayjs().format("YYYY-MM-DD")).valueOf(),
      searchForm: {
        dates: [
          dayjs()
            .subtract(1, "day")
            .format("YYYY-MM-DD"),
          dayjs()
            .subtract(1, "day")
            .format("YYYY-MM-DD")
        ],
        organId: ""
      },
      tableList: [],
      activeName: "first",
      specialList: []
    };
  },
  async mounted() {
    const query = this.$route.query;
    this.searchForm.organId = query.organId ? Number(query.organId) : "";
    await this.$store.dispatch("setBranchs");
    const arr = [36, 39, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 52, 54, 56];
    this.specialList = this.selects.branchs.filter(item => {
      return arr.indexOf(item.id) == -1;
    });
    // this.searchForm.dates.push(getNowDateAndMonday(nowTime));
    // this.searchForm.dates.push(getNowDateAndSunday(nowTime));
    this.getList();
  },
  methods: {
    exportQuestion() {
      const { dates, organId } = this.searchForm;
      Export(
        this,
        {
          url: "/api-web/export/managerDownload",
          fileName: "云教练练习时长.xls",
          method: "post",
          params: {
            exportEnum: "EXPORT_CLOUD_TEACHER_SUM_DETAIL",
            ...getTimes(dates, ["startDate", "endDate"]),
            organId
          }
        },
        "您确定导出云教练练习时长?"
      );
    },
    search() {
      this.$refs.searchForm.validate(valid => {
        this.pageInfo = {
          ...this.pageInfo,
          page: 1
        };
        this.getList();
      });
    },
    onCancel() {
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push({
        path: "/cloudDate?tabrouter=exerciseDuration"
      });
    },
    onReSet() {
      this.pageInfo = {
        ...this.pageInfo,
        page: 1
      };
      this.$refs.searchForm.resetFields();
      // this.searchForm.dates.push(getNowDateAndMonday(nowTime));
      // this.searchForm.dates.push(getNowDateAndSunday(nowTime));
      this.getList();
    },
    getDefaultTime() {
      const dayjs = this.$helpers.dayjs;
      let nowDate = dayjs(new Date()).format("YYYY-MM-DD");
      let lastWeek = dayjs(nowDate)
        .subtract(1, "week")
        .format("YYYY-MM-DD");
      this.searchForm.dates = [
        getNowDateAndMonday(lastWeek),
        getNowDateAndSunday(nowDate)
      ];
    },
    changeWeek(val) {
      if (val) {
        // this.searchForm.dates = [
        //   getNowDateAndMonday(val[0]),
        //   getNowDateAndSunday(val[1])
        // ];
      } else {
        this.getDefaultTime();
      }
    },
    async getList() {
      // cloudTeacherSumDetail
      try {
        const { dates, organId } = this.searchForm;
        let params = {
          ...getTimes(dates, ["startDate", "endDate"]),
          organId
        };
        const res = await cloudTeacherSumDetail({
          page: 1,
          rows: 10,
          ...params
        });
        this.tableList = [];
        this.tableList = res.data.rows || [];
      } catch {}
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-date-editor.el-input {
  width: 100% !important;
}
::v-deep .el-select {
  width: 100% !important;
}
::v-deep .el-table .cell {
  display: -webkit-box;
  overflow: hidden;
  max-height: 45px;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
::v-deep .el-dialog__body {
  padding: 10px 20px;
}
.newBand {
  display: inline-block;
}

::v-deep .el-tabs__active-bar {
  background-color: transparent !important;
}
::v-deep.el-tabs__nav-wrap {
  &:after {
    background-color: transparent !important;
  }
}
/*去掉切换时el-tab-pane底部的蓝色下划线*/
::v-deep .el-tabs__nav-wrap::after {
  background-color: transparent !important;
}

/*去掉tabs底部的下划线*/
</style>