<template>
|
<div class="monitor-page">
|
<el-card shadow="hover" header="BDC设备拉动计数监控">
|
<!-- 图例区 -->
|
<div class="legend-area">
|
<el-tag color="yellow">空箱</el-tag>
|
<el-tag color="green">空箱组</el-tag>
|
<el-tag color="white" style="border: 1px solid #ccc;">白车身</el-tag>
|
<el-tag color="pink">彩车身</el-tag>
|
</div>
|
|
<!-- 设备计数表格 -->
|
<el-table :data="deviceCounts" border style="width: 100%; margin-top: 20px;">
|
<el-table-column prop="id" label="ID"></el-table-column>
|
<el-table-column prop="deviceType" label="设备类型"></el-table-column>
|
<el-table-column prop="count" label="计数"></el-table-column>
|
<el-table-column prop="status" label="状态">
|
<template #default="scope">
|
<el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">
|
{{ scope.row.status }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 刷新按钮 -->
|
<el-button type="primary" @click="refreshData" style="margin-top: 20px;">
|
刷新数据
|
</el-button>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import axios from 'axios';
|
|
export default {
|
name: 'MonitorPage',
|
data() {
|
return {
|
deviceCounts: [] // 存储设备计数数据
|
};
|
},
|
mounted() {
|
this.fetchDeviceCounts(); // 页面加载时获取数据
|
},
|
methods: {
|
// 获取设备计数
|
fetchDeviceCounts() {
|
axios.get('http://localhost:5000/api/device/counts') // 后端API地址
|
.then(response => {
|
this.deviceCounts = response.data;
|
})
|
.catch(error => {
|
console.error('Error fetching device counts:', error);
|
});
|
},
|
// 刷新数据
|
refreshData() {
|
axios.get('http://localhost:5000/api/device/refresh')
|
.then(() => {
|
this.fetchDeviceCounts(); // 刷新后重新获取数据
|
this.$message.success('数据刷新成功');
|
})
|
.catch(error => {
|
console.error('Error refreshing data:', error);
|
this.$message.error('数据刷新失败');
|
});
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.monitor-page {
|
padding: 20px;
|
}
|
.legend-area {
|
margin-bottom: 10px;
|
}
|
</style>
|
