上一篇文章介绍了地图中如何更新数据,这篇介绍一下环形图表中数据的更新。
可以去使用定时器驱动数据更新
前端代码实现
<template>
<div id="centreLeft1">
<div class="bg-color-black">
<div class="d-flex pt-2 pl-2">
<span style="color: #5cd9e8">
<icon name="chart-bar"></icon>
</span>
<div class="d-flex">
<span class="fs-xl text mx-2">设备情况</span>
<dv-decoration-3
style="
width: 1.25rem;
height: 0.25rem;
position: relative;
top: -0.0375rem;
"
/>
</div>
</div>
<div class="d-flex jc-center flex-column" style="align-items: center;">
<span style="text-align: center;font-size: 15px;color: #00D1B2;margin-top: 10px;">
在线率
</span>
<dv-decoration-9 style="width:150px;height:150px;margin-top: 20px;">
{{ onlineRate }} <!-- 在线率显示 -->
</dv-decoration-9>
</div>
<div class="bottom-data">
<div class="item-box" v-for="(item, index) in numberData" :key="index">
<div class="d-flex">
<dv-digital-flop
:config="item.number"
style="width: 2.5rem; height: 0.625rem"
/>
</div>
<p class="text" style="text-align: center">
{{ item.text }}
<span class="colorYellow">(件)</span>
</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
config: {
data: [
{
name: "在线设备",
value: 0, // 初始化为0
},
{
name: "离线设备",
value: 0, // 初始化为0
},
],
color: ["#00baff", "#3de7c9"], // 颜色
lineWidth: 20,
radius: "55%",
activeRadius: "60%",
digitalFlopStyle: {
fontSize: 15,
},
showOriginValue: true,
},
onlineRate: '0%', // 在线率
numberData: [
{
number: {
number: [0], // 在线数
toFixed: 0,
content: "{nt}",
},
text: "在线数",
},
{
number: {
number: [0], // 离线数
toFixed: 0,
content: "{nt}",
},
text: "离线数",
}
],
};
},
mounted() {
this.changeTiming();
this.fetchSubjectSum(); // 初始加载时获取设备在线和离线数量
},
methods: {
changeTiming() {
setInterval(() => {
this.fetchSubjectSum(); // 定时获取设备在线情况
}, 300000); // 每5分钟获取一次
},
async fetchSubjectSum() {
try {
const { data } = await this.$http.get("http://localhost:8081/ktsEcloud/DeviceController/getdata");
console.log("API响应:", data); // 输出 API 响应以便调试
if (data.code === 200) {
const resultData = data.data; // 获取在线和总数量
const onlineCount = parseInt(resultData.OnlineCount, 10); // 转换为整数
const totalCount = parseInt(resultData.TotalCount, 10); // 转换为整数
const offlineCount = parseInt(resultData.OfflineCount, 10); // 转换为整数
// 更新环形图表的数据
this.config.data[0].value = onlineCount; // 在线设备
this.config.data[1].value = offlineCount; // 离线设备
this.$set(this.config.data, 0, { ...this.config.data[0], value: onlineCount });
this.$set(this.config.data, 1, { ...this.config.data[1], value: offlineCount });
// 更新在线率的显示
this.onlineRate = ((onlineCount / totalCount) * 100).toFixed(2) + '%'; // 设置在线率
// 更新在线数和离线数
this.numberData[0].number.number[0] = onlineCount;
this.numberData[1].number.number[0] = offlineCount;
// 更新在线数和离线数
this.$set(this.numberData[0].number.number, 0, onlineCount);
this.$set(this.numberData[1].number.number, 0, offlineCount);
console.log("在线设备数:", onlineCount, "离线设备数:", offlineCount); // 输出在线和离线设备数
} else {
console.error("请求失败:", data.msg);
}
} catch (error) {
console.error("API请求错误:", error);
}
},
},
};
</script>
<style lang="scss">
#centreLeft1 {
padding: 0.2rem;
height: 40vh;
min-width: 3.75rem;
border-radius: 0.0625rem;
.bg-color-black {
height: 4.8125rem;
border-radius: 0.125rem;
}
.text {
color: #c3cbde;
}
.bottom-data {
.item-box {
float: right;
position: relative;
width: 50%;
color: #d3d6dd;
}
}
}
</style>
效果图