dy-admin-manager/src/views/main/coursewareDate/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="organId">
          <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">
          <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="'studentCoursewarePlayRecord/exportStatDetailPage'"
        >导出</el-button
      >
      <div class="tableWrap">
        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          @sort-change="onSortChange"
        >
          <!-- <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="memberNum"
            sortable="custom"
            label="会员人数"
            width="100px"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.memberNum }}人</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="noPlayNum"
            sortable="custom"
            label="无练习人数"
            width="120px"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.noPlayNum }}人</div>
            </template></el-table-column
          >

          <el-table-column
            align="center"
            prop="playTimeLess10"
            sortable="custom"
            label="0-10分钟"
            width="120px"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.playTimeLess10 }}人</div>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="playTimeLess60"
            sortable="custom"
            label="10-60分钟"
            width="120px"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.playTimeLess60 }}人</div>
            </template></el-table-column
          >

          <el-table-column
            align="center"
            prop="playTimeLess120"
            sortable="custom"
            label="60-120分钟"
            width="120px"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.playTimeLess120 }}人</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="playTimeLess240"
            sortable="custom"
            label="120-240分钟"
            width="130px"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.playTimeLess240 }}人</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="playTimeRather240"
            sortable="custom"
            label=">240分钟"
            width="120px"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.playTimeRather240 }}人</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="avgPlayTime"
            sortable="custom"
            label="平均时长"
            width="100px"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.avgPlayTime }}分钟</div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          sync
          :total.sync="pageInfo.total"
          :page.sync="pageInfo.page"
          :limit.sync="pageInfo.limit"
          :page-sizes="pageInfo.page_size"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { Export } from "@/utils/downLoadFile";
import pagination from "@/components/Pagination/index";
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 { api_studentCoursewarePlayRecordDetail } from "../api";
import { getTimeFormat } from "@/utils";
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, pagination },
  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: "",
        sort: null,
        asc: null
      },
      tableList: [],
      activeName: "first",
      // specialList: [],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      }
    };
  },
  async mounted() {
    const query = this.$route.query;
    this.searchForm.organId = query.organId ? Number(query.organId) : "";
    this.searchForm.dates = query.dates
      ? JSON.parse(query.dates)
      : [
          dayjs()
            .subtract(1, "day")
            .format("YYYY-MM-DD"),
          dayjs()
            .subtract(1, "day")
            .format("YYYY-MM-DD")
        ];
    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: {
    onSortChange(val) {
      const template = {
        memberNum: 1,
        noPlayNum: 2,
        playTimeLess10: 3,
        playTimeLess60: 4,
        playTimeLess120: 5,
        playTimeLess240: 6,
        playTimeRather240: 7,
        avgPlayTime: 8
      };
      this.searchForm.sort = template[val.prop];
      if (val.order === "ascending") {
        this.searchForm.asc = true;
      } else if (val.order === "descending") {
        this.searchForm.asc = false;
      } else {
        this.searchForm.asc = null;
        this.searchForm.sort = null;
      }
      this.getList();
    },
    exportQuestion() {
      const { dates, organId, asc, sort } = this.searchForm;
      Export(
        this,
        {
          url: "/api-web/studentCoursewarePlayRecord/exportStatDetailPage",
          fileName: "云练习练习时长.xls",
          method: "post",
          params: {
            exportEnum: "VIDEO_PLAY_DETAIL_STAT",
            queryInfo: {
              ...getTimeFormat(dates, ["startTime", "endTime"]),
              organizationId: organId,
              asc,
              sort
            }
          }
        },
        "您确定导出云练习练习时长?"
      );
    },
    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: "/coursewareDate"
      });
    },
    onReSet() {
      this.pageInfo = {
        ...this.pageInfo,
        page: 1
      };
      this.$refs.searchForm.resetFields();
      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() {
      // api_studentCoursewarePlayRecordDetail
      try {
        const { dates, organId, sort, asc } = this.searchForm;
        let params = {
          sort,
          asc,
          ...getTimeFormat(dates, ["startTime", "endTime"]),
          organId
        };
        const res = await api_studentCoursewarePlayRecordDetail({
          page: this.pageInfo.page,
          rows: this.pageInfo.limit,
          ...params
        });
        this.tableList = [];
        this.tableList = res.data.rows || [];
        this.pageInfo.total = res.data.total;
      } 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>