| | |
| | | <template> |
| | | <div class="chart_left"> |
| | | <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: 60px;"></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> |
| | |
| | | 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' } }, |
| | | // { 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; |
| | | |
| | | console.log(response); |
| | | chartData.value = response.data; // æ´æ°ååºå¼æ°æ® |
| | | console.log('æ°æ®æ´æ°æå:', chartData.value); |
| | | if (taskListRef.value) taskListRef.value.initChart(); |
| | | } catch (error) { |
| | | console.error('API请æ±å¤±è´¥:', error); |
| | | } |
| | | }; |
| | | const intervalId = ref(null) |
| | | const startPolling = () => { |
| | | fetchData(); // åå§å è½½ |
| | | intervalId = setInterval(fetchData, 5 * 60 * 1000); // 5åé |
| | | intervalId.value = setInterval(fetchData, 5 * 60 * 1000); // 5åé |
| | | }; |
| | | |
| | | // æ¸
ç宿¶å¨ |
| | | const stopPolling = () => { |
| | | if (intervalId) { |
| | | clearInterval(intervalId); |
| | | if (intervalId.value) { |
| | | clearInterval(intervalId.value); |
| | | console.log('å·²åæ¢æ°æ®è½®è¯¢'); |
| | | } |
| | | }; |
| | |
| | | padding-top: 3vh; |
| | | } |
| | | |
| | | .chart_left, |
| | | .chart_center, |
| | | .chart_right { |
| | | .chart_left { |
| | | position: relative; |
| | | border-radius: 10px; |
| | | background-color: white; |
| | |
| | | } |
| | | |
| | | .indexModel .item_center { |
| | | height: 68vh; |
| | | height: 90vh; |
| | | width: 98%; |
| | | margin: 0vh 1%; |
| | | |
| | | margin: 0vh 20%; |
| | | } |
| | | |
| | | .titles { |