src/views/device/log.vue

<template>
  <div>
    <back-box>
      <template slot="title">
        <span>设备日志</span>
      </template>
    </back-box>
    <div class="page-content">
      <el-descriptions :column="3" border>
        <el-descriptions-item label="设备编码">{{
          device.sn
        }}</el-descriptions-item>
        <el-descriptions-item label="电量">{{
          device.electricity
        }}</el-descriptions-item>
        <el-descriptions-item label="配对码">{{
          device.pairingCode
        }}</el-descriptions-item>
        <el-descriptions-item label="关联班级">
          <span v-for="item in device.classList" :key="item.classId">{{
            item.className
          }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="最后答题时间">{{
          device.latestReportTime
        }}</el-descriptions-item>
        <el-descriptions-item label="答题次数">{{
          device.answerTimes
        }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="answer-header">
      <div class="sel-box">
        <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>
      </div>
    </div>
    <div class="table-box">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          prop="operationType"
          label="请求类型"
          align="center"
          width="200"
          ><template slot-scope="scoped">{{
            setOperationType(scoped.row.operationType)
          }}</template></el-table-column
        >
        <el-table-column
          prop="operationTime"
          label="时间"
          align="center"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="content"
          label="日志内容"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <div class="pagination-box">
      <el-pagination
        small=""
        layout="total,prev, pager, next"
        :hide-on-single-page="true"
        :total="total"
        @current-change="changePage"
        :current-page="page"
        :page-size="size"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { formatDate } from "utils";
export default {
  data() {
    return {
      id: "",
      date: "", //今天-昨天-本周
      query: {
        //搜索条件
        startDay: "",
        endDay: "",
        day: "",
      },
      tableData: [],
      device: {
        sn: "",
        electricity: "",
        pairingCode: "",
        classList: [],
        latestReportTime: "",
        answerTimes: "",
      },
      total: 0,
      page: 1,
      size: 20,
    };
  },
  created() {
    this.id = this.$route.query.id;
    this._QueryDetail();
    this.setDate(1);
    let startDay = this.query?.startDay;
    if (!startDay) {
      this.query.startDay = new Date();
      this.query.endDay = new Date();
    }
  },
  methods: {
    setOperationType(type) {
      let txt;
      switch (type) {
        case 0:
          txt = "连接异常";
          break;
        case 1:
          txt = "问";
          break;
        case 2:
          txt = "测";
          break;
        case 3:
          txt = "考";
          break;
        case 4:
          txt = "抢答";
          break;
        case 5:
          txt = "抽答";
          break;
        case 6:
          txt = "再答";
          break;
        case 7:
          txt = "签到";
          break;
      }
      return txt;
    },
    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;
          }
          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 > 1 && aMonth < 4) {
            aMonth = "01";
          } else if (aMonth > 3 && aMonth < 7) {
            aMonth = "04";
          } else if (aMonth > 6 && aMonth < 10) {
            aMonth = "07";
          } 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 = "";
        }
      }
    },
    changePage(page) {
      this.page = page;
      this._QueryData();
    },
    async _QueryDetail() {
      const { data, status, info } = await this.$request.deviceDetail({
        deviceId: this.id,
      });
      if (status === 0) {
        this.device = { ...data };
        for (let key in this.device) {
          this.device[key] = data[key];
        }
      } else {
        this.$message.error(info);
      }
    },
    async _QueryData() {
      this.loading = true;
      //多课时对比
      let query = {};
      for (let key in this.query) {
        if (this.query[key] != "") {
          if (key == "day" || key == "startDay" || key == "endDay") {
            query[key] = this.query[key].split("-").join("");
          } else {
            query[key] = this.query[key];
          }
        }
      }
      const {
        data = {},
        status,
        info,
      } = await this.$request.deviceLogList({
        ...query,
        deviceId: Number(this.id),
        page: this.page,
        size: this.size,
      });
      this.loading = false;
      if (status === 0) {
        this.tableData = [...data?.list] || [];
        this.total = data.count;
      } else {
        this.$message.error(info);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  padding: 20px;
}
.table-box{
  padding:0 20px;
}
</style>