baoman / Ezquiz_Platform

  <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.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.modifiedTime

          }}</el-descriptions-item>

          <el-descriptions-item v-if="type == 1" label="所在教室">{{
            device.roomName

          }}</el-descriptions-item>

          <el-descriptions-item v-if="type == 1" label="固件版本号">{{
            device.otaVersionName
          }}</el-descriptions-item>

          <!-- <el-descriptions-item v-if="type == 2" label="电量">{{

            device.electricity

          }}</el-descriptions-item> -->

          <el-descriptions-item v-if="type == 2" 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>

          <el-button type="primary" class="serach-box" round @click="_QueryData"
            >筛选</el-button
          >

        </div>
      </div>

      <div class="table-box">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="operationType"
            label="请求类型"
            align="center"

            width="160"

            ><template slot-scope="scoped">{{
              setOperationType(scoped.row.operationType)
            }}</template></el-table-column
          >

          <!-- <el-table-column

            v-if="type == 2"
            prop="electricity"
            width="100"
            label="电量"

            align="center"

          ></el-table-column> -->

          <el-table-column

            prop="operationTime"
            label="时间"

            align="center"

            width="200"

          ></el-table-column>

          <el-table-column prop="content" label="日志内容" align="center"
            ><template slot-scope="scoped">
              <p style="text-align: left">{{ scoped.row.content }}</p></template
            ></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 {

        type: 1,

        id: "",

        date: "", //今天-昨天-本周
        query: {
          //搜索条件
          startDay: "",
          endDay: "",
          day: "",
        },

        tableData: [],
        device: {
          sn: "",
          electricity: "",
          pairingCode: "",
          classList: [],

          modifiedTime: "",

          answerTimes: "",

          roomName: "",

          otaVersionName: "",

        },
        total: 0,
        page: 1,
        size: 20,

      };
    },

    created() {

      this.id = this.$route.query.id;

      this.type = this.$route.query.type;

      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;
            }

            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 = "";
          }
        }
      },

      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 && [...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;
  }

  .serach-box {
    margin-left: 20px;

  }

  </style>