7 changed files with 225 additions and 30 deletions
@ -0,0 +1,171 @@ |
|||
<script setup> |
|||
import { computed, onMounted, onUnmounted, ref } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
import SearchBar from 'components/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'); |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<SearchBar @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="设备编号" min-width="80" prop="deviceNo" /> |
|||
<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-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="太阳能电压" min-width="94" prop="solarVoltage" /> |
|||
<el-table-column align="center" label="蓄电池电压" min-width="94" prop="batteryVoltage" /> |
|||
<el-table-column align="center" label="电压百分比" min-width="94" prop="batteryVoltagePercentage" /> |
|||
<el-table-column align="center" label="剩余电量" min-width="94" prop="batteryVoltageRemain" /> |
|||
<el-table-column align="center" label="电池损耗量" min-width="94" prop="batteryLoss" /> |
|||
<el-table-column align="center" label="机箱温度" min-width="80" prop="deviceTemperature" /> |
|||
<el-table-column align="center" label="机箱湿度" min-width="80" prop="deviceHumidity" /> |
|||
<el-table-column align="center" label="环境温度" min-width="80" prop="environmentTemperature" /> |
|||
<el-table-column align="center" label="环境湿度" min-width="80" prop="environmentHumidity" /> |
|||
<el-table-column align="center" label="SO2" min-width="50" prop="so2" /> |
|||
<el-table-column align="center" label="盐分" min-width="50" prop="salt" /> |
|||
<el-table-column align="center" label="腐流1" min-width="60" prop="corrosion1" /> |
|||
<el-table-column align="center" label="腐流2" min-width="60" prop="corrosion2" /> |
|||
<el-table-column align="center" label="腐流3" min-width="60" prop="corrosion3" /> |
|||
<el-table-column align="center" label="腐流4" min-width="60" prop="corrosion4" /> |
|||
</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> |
|||
Loading…
Reference in new issue