zkPCproject/src/views/Equipment/equlog.vue

<template>
  <div class="pages">
    <div class="container">
      <div class="tableBox">
        <div class="header">
          <div class="h-left">
            <div class="label">
              <span>设备编号：</span>
              <span>{{ paramsObj.imei }}</span>
            </div>
            <div class="label">
              <span>领用人：</span>
              <span>{{ paramsObj.name }}</span>
            </div>
          </div>

          <div class="h-right">
            <el-button type="primary" @click="exportMethodPost">导出</el-button>
            <el-button type="primary" @click="back">返回</el-button>
          </div>
        </div>
        <div class="tabs">
          <el-table :data="tableData" height="100%">
            <el-table-column type="index" label="序号"> </el-table-column>
            <el-table-column prop="imei" label="设备编号"> </el-table-column>
            <el-table-column prop="receptionTime" label="更新时间">
            </el-table-column>
            <el-table-column prop="electricity" label="设备电量">
            </el-table-column>
            <el-table-column prop="signalDevice" label="设备信号">
            </el-table-column>
            <el-table-column prop="fileCount" label="待上传文件数">
            </el-table-column>
            <el-table-column prop="stateInterval" label="更新间隔时长">
              <template slot-scope="{ row }">
                  <span v-if="row.timeInterval > 60*11*1000" style="color: red;font-weight: bold;">{{ row.stateInterval }}</span>
                  <span v-else >{{ row.stateInterval }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="btmpagiation">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="paramsObj.current"
          :page-sizes="[10, 50, 100]"
          :page-size="paramsObj.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "", // 设备号
      total: 0, // 总条数
      paramsObj: {
        imei: "",
        // 当前页面的参数
        current: 1,
        size: 10,
      },
      tableData: [], // 数据列表数据
    };
  },

  mounted() {
    if (this.$route.query.id) this.paramsObj.imei = this.$route.query.id;
    if (this.$route.query.names) this.paramsObj.name = this.$route.query.names;
    this.getMessageList();
  },

  methods: {
    // 导出.Excel公用方法
    exportMethodPost() {
      axios({
        method: "get",
        url: `/autoSR/zk/equipment/findByImeiExport?imei=${this.paramsObj.imei}`,
        responseType: "blob",
      })
        .then((res) => {
          let blob = new Blob([res], { type: "application/vnd.ms-excel" });
          let date = new Date();
          let time = date.toLocaleDateString();
          // console.log(time, "时间");
          if ("download" in document.createElement("a")) {
            const link = document.createElement("a");
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            // link.download = res.headers['content-disposition'] //下载后文件名
            link.download = (name || "导出文件") + time + ".xlsx"; //下载的文件名
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          } else {
            // console.log("--------------------jingla")
            let fileName = (name || "导出文件") + time + ".xlsx"; //下载的文件名
            navigator.msSaveBlob(blob, fileName);
          }
        })
        .catch((error) => {
          // Message.error({
          //     message: '网络连接错误'
          //  })
          console.log(error);
        });
    },

    back() {
      this.$router.go(-1);
    },
    // 获取设备日志
    getMessageList() {
      this.$api.api.findByImeiAndHours(this.paramsObj).then((res) => {
        console.log(res);
        if (res.code == 10000) {
          this.total = res.data.total;
          this.tableData = res.data.records;
        }
      });
    },

    // 改变当前分页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.paramsObj.size = val;
      this.getMessageList();
    },
    handleCurrentChange(val) {
      this.paramsObj.current = val;
      this.getMessageList();
    },
  },
};
</script>


<style lang="scss" scoped>
.pages {
  padding: 10px 20px;
  width: 100%;
  height: 100%;
  .container {
    padding: 10px 20px;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .tableBox {
      width: 100%;
      height: calc(100% - 72px);

      .header {
        padding: 20px 0;
        display: flex;
        align-items: center;

        .h-left {
          flex-grow: 1;
          display: flex;
          align-items: center;
          .label {
            margin-left: 20px;
            display: flex;
            align-items: baseline;
          }
        }

        .h-right {
          flex-shrink: 0;
        }
      }

      .tabs {
        height: calc(100% - 72px);
      }
    }

    .btmpagiation {
      flex-shrink: 0;
      margin: 20px 0;
      padding: 0 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>