tall4-pc/src/components/overview/device-table.vue

<template>
  <template v-if="devicesAll && devicesAll.data">
    <el-table :data="devicesAll.data" :max-height="contentHeight" border class="mt-6" stripe style="width: 100%">
      <el-table-column align="center" label="站点名称" min-width="150" prop="address" />
      <el-table-column align="center" label="ID" min-min-width="100" prop="deviceId" />
      <el-table-column align="center" label="注册时间" min-width="200" prop="signupTime" />
      <el-table-column align="center" label="最近上传时间" min-width="200" prop="lastUploadTime" />
      <el-table-column align="center" header-align="center" label="设备状态" min-width="150">
        <template #default="scope">
          {{ scope.row.status }}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="产品类型" min-width="150">
        <template #default="scope">
          {{ scope.row.type }}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="协议版本" min-width="150" prop="protocolVersion" />
    </el-table>

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

  <!-- 编辑设备信息 -->
  <DeviceEdit :show="editing" @toggle-mdoal="editing = false" />
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import DeviceEdit from 'components/device-edit.vue';

let timer = null;
const store = useStore();
const token = computed(() => store.getters['user/token']);
const devicesAll = computed(() => {
  return store.state.device.devicesAll;
});
const currentDeviceId = computed(() => store.state.device.currentDeviceId);
const contentHeight = ref(600);
const editing = ref(false);

// 获取设备完整信息列表
const getDevicesAllData = () => {
  try {
    if (token && token.value) {
      store.dispatch('device/getDevicesAll');
      timer && clearTimeout(timer);
      timer = null;
    } else {
      timer = setTimeout(() => {
        getDevicesAllData();
      });
    }
  } catch (error) {
    throw new Error(error);
  }
};

getDevicesAllData();

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

/**
 * 删除
 * @param {number} page 页码
 * @param {number} size 每页条数
 */
function onSearch(page, size = 50) {
  const deviceId = currentDeviceId.value;
  const params = {
    deviceId,
    page,
    size,
  };
  store.dispatch('device/getDevicesAll', params);
}

// 当前页码变化
const onCurrentPageChange = page => {
  onSearch(page, devicesAll.value.page.size || 50);
};

// 每页条数变化
const onSizeChange = size => {
  onSearch(1, size);
};
</script>