You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
3.6 KiB
122 lines
3.6 KiB
<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: 2, size: 10 });
|
|
let timer = null;
|
|
const store = useStore();
|
|
const token = computed(() => store.getters['user/token']);
|
|
let contentHeight = 600;
|
|
const data = ref(null);
|
|
|
|
// 获取设备完整信息列表
|
|
const getData = async () => {
|
|
try {
|
|
if (token) {
|
|
const params = { search: { ...search.value }, page: { page: page.value.page, size: page.value.size } };
|
|
console.log('params: ', params);
|
|
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" width="140" />
|
|
<el-table-column label="ICCID" fixed prop="ICCID" width="100" />
|
|
<el-table-column label="IMEI" fixed prop="IMEI" width="80" />
|
|
<el-table-column label="信号强度" prop="signal" width="80" />
|
|
<el-table-column label="基站编号" prop="stationNo" width="80" />
|
|
<el-table-column label="版本号" prop="version" width="80" />
|
|
<el-table-column label="太阳能电压" prop="solarVoltage" width="94" />
|
|
<el-table-column label="蓄电池电压" prop="batteryVoltage" width="94" />
|
|
<el-table-column label="机箱温度" prop="deviceTemperature" width="80" />
|
|
<el-table-column label="机箱湿度" prop="deviceHumidity" width="80" />
|
|
<el-table-column label="环境温度" prop="environmentTemperature" width="80" />
|
|
<el-table-column label="环境湿度" prop="environmentHumidity" width="80" />
|
|
<el-table-column label="SO2" prop="so2" width="50" />
|
|
<el-table-column label="盐分" prop="salt" width="50" />
|
|
<el-table-column label="腐流1" prop="corrosion1" width="60" />
|
|
<el-table-column label="腐流2" prop="corrosion2" width="60" />
|
|
<el-table-column label="腐流3" prop="corrosion3" width="60" />
|
|
<el-table-column label="腐流4" prop="corrosion4" width="60" />
|
|
</el-table>
|
|
|
|
<el-pagination
|
|
background
|
|
:current-page="page.page"
|
|
:page-size="page.size"
|
|
:default-page-size="10"
|
|
: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>
|
|
|