tall4-pc/src/views/data-history.vue

<script setup>
import { computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import SearchBar from 'components/search-bar-data.vue';
import { getHistories } from 'apis/index';

const search = ref({});
const page = ref({ page: 1, size: 50 });
let timer = null;
const store = useStore();
const token = computed(() => store.getters['user/token']);
const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
let contentHeight = 600;
const data = ref(null);

// 获取设备完整信息列表
const getData = async () => {
  try {
    if (token) {
      const options = { ...search.value };
      const date = options && options.date ? options.date : [];
      const params = {
        search: { deviceId: currentDeviceId.value, date },
        page: { page: page.value.page, size: page.value.size },
      };
      const resData = await getHistories(params);
      data.value = resData.data;
      page.value = resData.page;
      timer && clearTimeout(timer);
      timer = null;
    } else {
      timer = setTimeout(() => {
        getData();
      }, 20);
    }
  } catch (error) {
    console.log('error: ', error);
  }
};

getData();

// 设置表格高度
onMounted(() => {
  const winHeight = document.documentElement.clientHeight;
  contentHeight = winHeight - 150;
});

/**
 * 监听search信息
 * @param {object} payload search组件emit的数据
 */
const onSearch = payload => {
  search.value = { ...payload };
  getData();
};

/**
 * 当前页码变化
 * 更新page 重新获取数据
 * @param {number} e 当前的页码
 */
const onCurrentPageChange = e => {
  page.value.page = e;
  getData();
};

const onSizeChange = e => {
  page.value.size = e;
  getData();
};

// 下一页
const onNext = e => {
  page.value.page = e + 1;
  getData();
};

// 上一页
const onPrev = e => {
  page.value.page = e - 1;
  getData();
};
</script>

<template>
  <SearchBar @search="onSearch" />

  <template v-if="data">
    <el-table :data="data" style="width: 100%" border stripe :style="{ 'max-height': contentHeight + 'px' }">
      <el-table-column label="设备编号" fixed prop="deviceNo" min-width="140" align="center" />
      <el-table-column label="ICCID" fixed prop="ICCID" min-width="100" align="center" />
      <el-table-column label="IMEI" fixed prop="IMEI" min-width="80" align="center" />
      <el-table-column label="信号强度" prop="signal" min-width="80" align="center" />
      <el-table-column label="基站编号" prop="stationNo" min-width="80" align="center" />
      <el-table-column label="版本号" prop="version" min-width="80" align="center" />
      <el-table-column label="太阳能电压" prop="solarVoltage" min-width="94" align="center" />
      <el-table-column label="蓄电池电压" prop="batteryVoltage" min-width="94" align="center" />
      <el-table-column label="机箱温度" prop="deviceTemperature" min-width="80" align="center" />
      <el-table-column label="机箱湿度" prop="deviceHumidity" min-width="80" align="center" />
      <el-table-column label="环境温度" prop="environmentTemperature" min-width="80" align="center" />
      <el-table-column label="环境湿度" prop="environmentHumidity" min-width="80" align="center" />
      <el-table-column label="SO2" prop="so2" min-width="50" align="center" />
      <el-table-column label="盐分" prop="salt" min-width="50" align="center" />
      <el-table-column label="腐流1" prop="corrosion1" min-width="60" align="center" />
      <el-table-column label="腐流2" prop="corrosion2" min-width="60" align="center" />
      <el-table-column label="腐流3" prop="corrosion3" min-width="60" align="center" />
      <el-table-column label="腐流4" prop="corrosion4" min-width="60" align="center" />
    </el-table>

    <el-pagination
      background
      :current-page="page.page"
      :page-size="page.size"
      :default-page-size="50"
      :page-count="page.count"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[1, 10, 20, 50, 100]"
      class="my-3 float-right"
      :total="page.total"
      @current-change="onCurrentPageChange"
      @size-change="onSizeChange"
      @prev-click="onPrev"
      @next-click="onNext"
    ></el-pagination>
  </template>
</template>