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

<template>
  <SearchBar :show-refresh="true" @refresh="onRefresh" @search="getData" />

  <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" />
      <!--      TODO:-->
      <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="机箱温度(℃)" min-width="110" prop="deviceTemperature" />
      <el-table-column align="center" label="机箱湿度(RH%)" min-width="130" prop="deviceHumidity" />
      <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="94" prop="batteryVoltagePercentage" />
      <el-table-column align="center" label="剩余电量(mAH)" min-width="140" prop="batteryVoltageRemain" />
      <el-table-column align="center" label="消耗电量(mAH)" min-width="140" prop="batteryLoss" />
      <el-table-column align="center" label="ICCID" min-width="190" prop="iccid" />
      <el-table-column align="center" label="IMEI" min-width="150" prop="imei" />
      <el-table-column align="center" label="信号强度" min-width="80" prop="signal" />
      <el-table-column align="center" label="基站编号" min-width="130" prop="stationNo" />
      <el-table-column align="center" label="硬件版本" min-width="80" prop="hardwareVersion" />
      <el-table-column align="center" label="软件版本" min-width="80" prop="softwareVersion" />
    </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, onUnmounted, ref } from 'vue';
import { useStore } from 'vuex';
import SearchBar from 'components/realtime/search-bar.vue';
import { getDatas } from 'apis';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';
import { REALTIME_DATA_INTERVAL } from '@/config/config';

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

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

      const date = [dayjs().startOf('day').format('x'), dayjs().endOf('day').format('x')];
      const params = {
        deviceId: currentDeviceId.value,
        date,
        page: page.value.page,
        size: page.value.size,
        type: 1,
        sort: -1,
      };

      loadingSearch.value = true;
      const resData = await getDatas(params);
      loadingSearch.value = false;

      data.value = resData.data;
      page.value = resData.page;
      timer && clearTimeout(timer);
      timer = null;

      // 定时轮询请求新数据
      if (!apiTimer) {
        apiTimer = setInterval(() => {
          getData();
        }, REALTIME_DATA_INTERVAL);
      }
    } else {
      timer = setTimeout(() => {
        getData();
      }, 20);
    }
  } catch (error) {
    ElMessage.error(error.message || '获取数据失败');
    console.log('error: ', error);
  }
};

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

onUnmounted(() => {
  apiTimer && clearInterval(apiTimer);
  apiTimer = null;
});

/**
 * 当前 码变化
 * 更新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');
}

// 手动刷新 清除定时器 重新获取数据
function onRefresh() {
  apiTimer && clearInterval(apiTimer);
  apiTimer = null;
  getData();
}
</script>