tall3-pc-keti/src/components/history/local.vue

<template>
  <SearchBar :show-export="true" :show-type-select="true" @search="onSearch" />

  <template v-if="data">
    <el-table :data="data" :max-height="contentHeight" border stripe style="width: 100%">
      <el-table-column align="center" fixed label="设备ID" min-width="80" prop="deviceNo" />
      <el-table-column align="center" label="采集时间" min-width="170">
        <template #default="scope">
          {{ formatTime(+scope.row.time) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="后台接收时间" min-width="170">
        <template #default="scope">
          {{ formatTime(+scope.row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="锌腐蚀电流(nA)" min-width="130" prop="corrosion1" />
      <el-table-column align="center" label="铜腐蚀电流(nA)" min-width="130" prop="corrosion2" />
      <el-table-column align="center" label="铝腐蚀电流(nA)" min-width="130" prop="corrosion3" />
      <el-table-column align="center" label="钢腐蚀电流(nA)" min-width="130" prop="corrosion4" />
      <el-table-column align="center" label="环境温度(℃)" min-width="110" prop="environmentTemperature" />
      <el-table-column align="center" label="环境湿度(RH%)" min-width="130" prop="environmentHumidity" />
      <el-table-column align="center" label="SO2(ppb)" min-width="90" prop="so2" />
      <el-table-column align="center" label="盐分温度(℃)" min-width="110" prop="salt" />
      <el-table-column align="center" label="盐分阻抗(Ω)" min-width="110" prop="salt" />
      <el-table-column align="center" label="太阳能板电压(V)" min-width="140" prop="solarVoltage" />
      <el-table-column align="center" label="蓄电池电压(V)" min-width="120" prop="batteryVoltage" />
      <el-table-column align="center" label="机箱温度(℃)" min-width="110" prop="deviceTemperature" />
      <el-table-column align="center" label="机箱湿度(RH%)" min-width="130" prop="deviceHumidity" />
    </el-table>

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

<script setup>
import { computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import SearchBar from 'components/history/search-bar-data.vue';
import { getHistory } from 'apis';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';

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
const contentHeight = ref(600);
const data = ref(null);

// 获取设备完整信息列表
const getData = async () => {
  try {
    if (token && token.value) {
      if (!currentDeviceId.value) {
        return ElMessage.error('请选择站点');
      }

      const options = { ...search.value };
      console.log('options:', options);
      const date = options && options.date ? options.date : [];
      if (!date || date.length !== 2) {
        return ElMessage.error('请选择时间 ');
      }
      const params = {
        deviceId: currentDeviceId.value,
        gatheredDateRange: date,
        paging: true,
        page: page.value.page,
        size: page.value.size,
        sort: [
          {
            col: 'gathered_at',
            order: 'DESC',
          },
        ],
      };
      const resData = await getHistory(params);
      data.value = resData.data;
      page.value = resData.page;
      timer && clearTimeout(timer);
      timer = null;
    } else {
      timer = setTimeout(() => {
        getData();
      }, 20);
    }
  } catch (error) {
    ElMessage.error(error.message || '获取数据失败');
    console.log('error: ', error);
  }
};

// getData();

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

/**
 * 监听sear h信息
 * @param {object} payload search组件emi 的数据
 */
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();
};

/**
 * 格式化时间
 * @param {number} time 时间戳
 * @returns {string}
 */
function formatTime(time) {
  return dayjs(new Date(time)).format('YYYY-MM-DD HH:mm:ss');
}
</script>