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

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

const filter = reactive({ search: {}, page: { page: 1, size: 10 } });

const onSearch = payload => {
  console.log('payload: ', payload);
  filter.search = { ...payload };
};

let timer = null;
const store = useStore();
const token = computed(() => store.getters['user/token']);
let contentHeight = 600;
let data = reactive(null);

// 获取设备完整信息列表
const getData = async () => {
  try {
    if (token) {
      const params = { ...filter };
      console.log('params: ', params);
      data = await getHistories(params);
      console.log('data: ', data);
      timer && clearTimeout(timer);
      timer = null;
    } else {
      timer = setTimeout(() => {
        getData();
      });
    }
  } catch (error) {
    console.log('error: ', error);
  }
};

getData();

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

// 当前页码变化
const onCurrentPageChange = e => {
  console.log(e);
};

// 每页条数变化
const onSizeChange = e => {
  console.log(e);
};

// 下一页
const onNext = e => {
  console.log(e);
};

// 上一页
const onPrev = e => {
  console.log(e);
};
</script>

<template>
  <SearchBar @search="onSearch" />
  <template v-if="data">
    <el-table :data="data.data" style="width: 100%" :style="{ 'max-height': contentHeight + 'px' }">
      <el-table-column type="expand">
        <template #default="props">
          <el-row :gutter="20" class="px-6 text-gray-400">
            <el-col :span="9">链路地址：{{ props.row.linkAddress }}</el-col>
            <el-col :span="9">探头编号：{{ props.row.probNo }}</el-col>
            <el-col :span="9">设备朝向：{{ props.row.deviceDirection }}</el-col>
            <el-col :span="9">试样：{{ props.row.simple }}</el-col>
            <el-col :span="9">安装位置：{{ props.row.installLocation }}</el-col>
            <el-col :span="9">sim1：{{ props.row.sim1 }}</el-col>
            <el-col :span="18">与主站后台联调情况：{{ props.row.joint }}</el-col>
            <el-col :span="18">备注：{{ props.row.remark }}</el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="ID" prop="deviceId" width="100" />
      <el-table-column label="完整ID" prop="deviceFullId" width="150" />
      <el-table-column label="地点" prop="address" width="150" />
      <el-table-column label="地区" prop="area" width="120" />
      <el-table-column label="联系人" prop="contact" width="100" />
      <el-table-column label="联系电话" prop="phone" width="150" />
      <el-table-column label="安装时间" prop="installTime" width="200" />
      <el-table-column label="正式运行时间" prop="runTime" width="200" />
      <el-table-column fixed="right" label="操作" width="148">
        <template #default="props">
          <el-popconfirm title="确定要删除此设备吗?" @confirm="handleDelete">
            <template #reference>
              <el-button type="danger" plain size="mini">删除</el-button>
            </template>
          </el-popconfirm>

          <el-button type="primary" plain size="mini" @click="handleEdit(props.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      :current-page="data.page.page"
      :page-size="data.page.size"
      :default-page-size="10"
      :page-count="data.page.total"
      class="my-3 float-right"
      @size-change="onSizeChange"
      @current-change="onCurrentPageChange"
      @prev-click="onPrev"
      @next-click="onNext"
    ></el-pagination>
  </template>
</template>