<template>
|
<div class="chart_left" style="margin-left: 20px;">
|
<div class="titles">
|
<el-icon class="icons" :size="24" color="#409EFF">
|
<Checked />
|
</el-icon>
|
任务进行中
|
</div>
|
<div style="margin-top: 20px;"></div>
|
<div class="item_center">
|
<Task-List :data="chartData" :options="chartOptions" />
|
</div>
|
</div>
|
<div class="chart_left" style="margin-left: 20px;">
|
<div class="titles">
|
<el-icon class="icons" :size="24" color="#409EFF">
|
<Checked />
|
</el-icon>
|
任务进行中
|
</div>
|
<div style="margin-top: 20px;"></div>
|
<div class="item_center">
|
<Task-List :data="chartData" :options="chartOptions" />
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import TaskList from '../components/index/TaskList.vue';
|
import http from '../api/http.js';
|
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
const taskListRef = ref(null);
|
// 示例数据
|
const chartData = ref([
|
// { value: 103, name: '已取消', itemStyle: { color: '#FF6B6B' } },
|
// { value: 735, name: '已完成', itemStyle: { color: '#4ECDC4' } },
|
]);
|
|
const fetchData = async () => {
|
try {
|
const response = await http.post("api/Task/GetTaskData", {});
|
chartData.value = response.data;
|
|
if (taskListRef.value) taskListRef.value.initChart();
|
} catch (error) {
|
console.error('API请求失败:', error);
|
}
|
};
|
const intervalId = ref(null)
|
const startPolling = () => {
|
fetchData(); // 初始加载
|
intervalId.value = setInterval(fetchData, 5 * 60 * 1000); // 5分钟
|
};
|
|
// 清理定时器
|
const stopPolling = () => {
|
if (intervalId.value) {
|
clearInterval(intervalId.value);
|
console.log('已停止数据轮询');
|
}
|
};
|
onMounted(() => {
|
startPolling();
|
});
|
onUnmounted(() => {
|
stopPolling();
|
});
|
const chartOptions = ref({
|
tooltip: {
|
formatter: '{b}: {c} ({d}%)'
|
},
|
legend: {
|
itemWidth: 14,
|
itemHeight: 14,
|
textStyle: { fontSize: 12 }
|
}
|
});
|
</script>
|
<style scoped>
|
.dashboard {
|
width: 100%;
|
height: 100vh;
|
padding: 20px;
|
box-sizing: border-box;
|
}
|
|
.m-charts {
|
display: grid;
|
margin: 10px;
|
grid-template-columns: 33% 33% 95%;
|
justify-content: space-between;
|
}
|
|
.labelContent {
|
padding-top: 3vh;
|
}
|
|
.chart_left {
|
position: relative;
|
border-radius: 10px;
|
background-color: white;
|
box-shadow: 0px 0px 10px 0px #ccc;
|
height: 100%;
|
width: 550px;
|
}
|
|
.icons {
|
margin-right: 5px;
|
}
|
|
.indexModel .item_center {
|
height: 90vh;
|
width: 98%;
|
margin: 0vh 20%;
|
}
|
|
.titles {
|
width: 200px;
|
height: 5vh;
|
display: flex;
|
align-items: center;
|
font-size: 1.5rem;
|
font-weight: 600;
|
position: absolute;
|
top: 0px;
|
left: 15px;
|
}</style>
|
