smart-power-ui/src/views/profile/DeviceDetailsView/deviceLog.vue

<template>
  <div class="iot-child-device">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="方向" prop="direction">
        <el-select v-model="queryParams.direction" @change="handleQuery">
          <el-option v-for="item in direction" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <!--      <el-form-item label="设备名称" prop="deviceName">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.deviceName"-->
      <!--          placeholder="请输入设备名称"-->
      <!--          clearable-->
      <!--          size="small"-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item label="时间">
        <el-date-picker
          @change="pickerChange"
          size="small"
          v-model="pickerValue"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getDeviceLogList"></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="deviceLogList"
      :default-sort="{ prop: 'timestamp', order: 'descending' }"
      @sort-change="sortChange">
      <el-table-column type="index" label="序号" align="center" :index="indexFormatter" width="80px"/>
      <el-table-column label="设备名称" align="left" width="200px" prop="deviceName"/>
      <el-table-column label="用户账号" align="left" width="200px" prop="userName"/>
      <el-table-column label="报文" align="left" prop="logData">
        <template v-slot="scope">
          <span class="column-part-hide">{{ scope.row.logData }}</span>
          <span class="copy-link" @click="copyOnClick(scope.row.logData)">复制</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" width="160px" prop="timestamp" sortable="custom" :formatter="dateFormat"/>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getDeviceLogList"
    />

  </div>
</template>
<script>
import {listDeviceLogList} from "@/api/iot/device";
import SelectTableWrap from "@/components/SelectTable/index";
import ParamWrap from "@/components/ParamWrap/deviceParam";
import {formatDate} from "@/utils";

const direction = [
  {"label": "上报", "value": "0"},
  {"label": "下发", "value": "1"}]
export default {
  name: 'DeviceLog',
  props: ['sourceId', 'pDevcieInfo'],
  components: {
    SelectTableWrap,
    ParamWrap
  },
  data() {
    return {
      direction,
      // 查询参数
      pickerValue: null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderType: 1, // 1升序 2降序
        deviceId: null,
        deviceName: null,
        direction: direction[0].value,
        beginTime: null,
        endTime: null
      },
      showSearch: true,
      // 设备表格数据
      deviceLogList: [],
      total: 0
    }
  },
  created() {
    this.getDeviceLogList();
  },
  methods: {
    indexFormatter(val) {
      return val + 1 + ((this.queryParams.pageNum - 1) * this.queryParams.pageSize);
    },
    // 查询设备日志列表
    getDeviceLogList() {
      this.loading = true;
      this.queryParams.deviceId = this.sourceId
      listDeviceLogList(this.queryParams).then(res => {
        this.deviceLogList = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    // 搜索按钮操作
    handleQuery() {
      let pickerValue = this.pickerValue
      if (pickerValue != null) {
        this.queryParams.beginTime = Date.parse(pickerValue[0]);
        this.queryParams.endTime = Date.parse(pickerValue[1]);
      }
      this.queryParams.pageNum = 1;
      this.getDeviceLogList();
    },
    // 重置按钮操作
    resetQuery() {
      this.resetForm("queryForm");
      this.resetPicker();
      this.handleQuery();
    },
    // 重置 DatePicker 参数
    resetPicker() {
      this.pickerValue = null
      this.queryParams.beginTime = null
      this.queryParams.endTime = null
    },
    pickerChange(val) {
      if (val == null) {
        this.resetPicker();
      }
    },
    // 时间戳格式化
    dateFormat(val) {
      return formatDate(val.timestamp)
    },
    sortChange(column) {
      const sort = {
        orderType: column.order === "descending" ? 1 : 2,
      };
      this.queryParams = Object.assign(this.queryParams, sort);
      this.handleQuery();
    },
    copyOnClick(val) {
      let self = this;
      this.$copyText(val).then(
        function () {
          self.$message({
            message: "复制成功",
            type: "success",
          });
        },
        function () {
          self.$message.error("复制失败");
        }
      );
    },
  },
}
</script>
<style lang="scss">
.cell {
  & > .column-part-hide {
    width: calc(100% - 60px);
    white-space: nowrap;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }

  & > .copy-link {
    cursor: pointer;
    position: relative;
    vertical-align: bottom;
    right: -10px;
    color: #3a8ee6;
  }
}
</style>