<script setup lang="ts">
|
import getLabelByValue from "@/utils/getLabelByValue";
|
|
defineOptions({
|
name: "DeviceReal",
|
inheritAttrs: false,
|
});
|
import useWebSocket from "@/hooks/useWebSocket";
|
import { SearchParams } from "@/api/software";
|
|
const { eventBus, sendData } = useWebSocket("devState");
|
const loading = ref(false);
|
const queryParams = reactive<SearchParams>({
|
pageNum: 1,
|
pageSize: 20,
|
});
|
const total = ref(0);
|
const listRef = ref();
|
|
eventBus.on("onopen", () => {
|
handleQuery();
|
});
|
const errorList = [
|
{
|
label: "---",
|
value: 0,
|
},
|
{
|
label: "文件未找到",
|
value: 1,
|
},
|
{
|
label: "参数错误",
|
value: 2,
|
},
|
{
|
label: "文件发送超时",
|
value: 3,
|
},
|
{
|
label: "远程停止",
|
value: 4,
|
},
|
];
|
eventBus.on("message", (res) => {
|
let rs = JSON.parse(res as string);
|
if (rs.code === 1) {
|
total.value = rs.data.total;
|
listRef.value = rs.data.list.map((item: any) => {
|
item.fullStationName =
|
item.stationProvince +
|
"-" +
|
item.stationCity +
|
"-" +
|
item.stationCounty +
|
"-" +
|
item.stationName +
|
"-" +
|
item.devName;
|
item.updatePercent =
|
item.dfuDataBlockLen === 0 ? 0 : (item.dfuDataBlockNum / item.dfuDataBlockLen) * 100;
|
item.updatePercent = item.updatePercent.toFixed(2);
|
item.errorCodeText = getLabelByValue(item.errorCode, errorList, { label: "未知", value: -1 });
|
return item;
|
});
|
} else {
|
queryParams.pageNum = 1;
|
total.value = 0;
|
}
|
});
|
|
function handleQuery() {
|
sendData(JSON.stringify(queryParams));
|
}
|
|
const format = (percentage: number) => (percentage === 100 ? "升级完成" : `${percentage}%`);
|
</script>
|
|
<template>
|
<div class="app-container">
|
<el-card shadow="never">
|
<el-table v-loading="loading" :data="listRef">
|
<el-table-column
|
show-overflow-tooltip
|
label="机房名称"
|
min-width="320"
|
align="center"
|
prop="fullStationName"
|
/>
|
<el-table-column
|
show-overflow-tooltip
|
label="序列号"
|
min-width="180"
|
align="center"
|
prop="serialNumber"
|
/>
|
<el-table-column
|
show-overflow-tooltip
|
label="SN码"
|
min-width="180"
|
align="center"
|
prop="snCode"
|
/>
|
<el-table-column
|
show-overflow-tooltip
|
label="版本号"
|
min-width="180"
|
align="center"
|
prop="version"
|
/>
|
<el-table-column label="升级进度" min-width="180" align="center" prop="updatePercent">
|
<template #default="{ row }">
|
<el-progress :percentage="row.updatePercent" :format="format" />
|
</template>
|
</el-table-column>
|
<el-table-column
|
show-overflow-tooltip
|
label="错误代码"
|
min-width="180"
|
align="center"
|
prop="errorCodeText"
|
/>
|
<el-table-column
|
show-overflow-tooltip
|
label="数据更新时间"
|
min-width="180"
|
align="center"
|
prop="recordTime"
|
/>
|
</el-table>
|
<pagination
|
v-if="total > 0"
|
v-model:total="total"
|
v-model:page="queryParams.pageNum"
|
v-model:limit="queryParams.pageSize"
|
@pagination="handleQuery"
|
/>
|
</el-card>
|
</div>
|
</template>
|
|
<style scoped lang="scss"></style>
|
