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.
233 lines
7.4 KiB
233 lines
7.4 KiB
<template>
|
|
<SearchBar :loading-search="loadingSearch" :show-command="true" :show-export="true" :show-pass-setting="true" @search="onSearch" />
|
|
|
|
<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="deviceId" />
|
|
<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" />
|
|
<el-table-column align="center" label="盐分温度(℃)" min-width="110" prop="saltT" />
|
|
<el-table-column align="center" label="盐分阻抗(Ω)" min-width="110" prop="saltR" />
|
|
<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>
|
|
|
|
<el-badge v-if="missingData && missingData.length" :max="99" :value="missingData.length" class="pass-button animate-bounce">
|
|
<div circle class="shadow-xl btn" type="primary" @click="showMissing = true">
|
|
<i class="el-icon-upload"></i>
|
|
</div>
|
|
</el-badge>
|
|
|
|
<el-dialog v-model="showMissing" custom-class="device-dialog" title="待补传列表" top="30px" width="80%">
|
|
<MissingData :data="missingData" @on-success="onPassSuccess" />
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, onMounted, ref } from 'vue';
|
|
import { useStore } from 'vuex';
|
|
import { getDatas } from 'apis';
|
|
import { ElMessage } from 'element-plus';
|
|
import dayjs from 'dayjs';
|
|
import SearchBar from 'components/history/search-bar-data.vue';
|
|
import MissingData from 'components/history/missing-data.vue';
|
|
|
|
const search = ref({});
|
|
const page = ref({
|
|
page: 1,
|
|
size: 50,
|
|
});
|
|
let timer = 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 showMissing = ref(false);
|
|
const missingData = ref([]);
|
|
|
|
// 获取设备完整信息列表
|
|
const getData = async () => {
|
|
try {
|
|
if (token && token.value) {
|
|
if (!currentDeviceId.value) {
|
|
return ElMessage.error('请选择站点');
|
|
}
|
|
|
|
const { date, missingIntervalInMs } = search.value;
|
|
if (!date || date.length !== 2) {
|
|
return ElMessage.error('请选择时间 ');
|
|
}
|
|
const params = {
|
|
deviceId: currentDeviceId.value,
|
|
gatheredDateRange: date,
|
|
paging: true,
|
|
missingIntervalInMs,
|
|
page: page.value.page,
|
|
size: page.value.size,
|
|
sort: [
|
|
{
|
|
col: 'time',
|
|
order: 'DESC',
|
|
},
|
|
],
|
|
};
|
|
|
|
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 (resData.missingData) {
|
|
missingData.value = [...resData.missingData];
|
|
missingData.value.forEach(item => {
|
|
item.uuid = `${item.deviceId}-${item.startTime}-${item.endTime}`;
|
|
});
|
|
}
|
|
} else {
|
|
timer = setTimeout(() => {
|
|
getData();
|
|
}, 20);
|
|
}
|
|
} catch (error) {
|
|
ElMessage.error(error.message || '获取数据失败');
|
|
console.log('error: ', error);
|
|
}
|
|
};
|
|
|
|
// getData();
|
|
|
|
// 设置表格高度
|
|
onMounted(() => {
|
|
const winHeight = document.documentElement.clientHeight;
|
|
contentHeight.value = winHeight - 260;
|
|
});
|
|
|
|
/**
|
|
* 监听sear h信息
|
|
* @param {object} payload search组件emi 的数据
|
|
*/
|
|
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();
|
|
};
|
|
|
|
/**
|
|
* 格式化时间
|
|
* @param {number} time 时间戳
|
|
* @returns {string}
|
|
*/
|
|
function formatTime(time) {
|
|
return dayjs(new Date(time)).format('YYYY-MM-DD HH:mm:ss');
|
|
}
|
|
|
|
// 补传成功 标记当前记录
|
|
function onPassSuccess(uuid) {
|
|
// eslint-disable-next-line no-restricted-syntax
|
|
for (const item of missingData.value) {
|
|
if (item.uuid === uuid) {
|
|
item.disabled = true;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.device-dialog :deep(.el-dialog__body) {
|
|
padding-top: 0 !important;
|
|
}
|
|
|
|
.pass-button {
|
|
z-index: 999;
|
|
position: fixed;
|
|
right: 30px;
|
|
bottom: 40px;
|
|
}
|
|
|
|
.pass-button .btn {
|
|
width: 56px;
|
|
height: 56px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #409eff;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
font-size: 26px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
|