146 lines
4.0 KiB
Vue
146 lines
4.0 KiB
Vue
|
<template>
|
|||
|
|
<div ref="chart" class="chart" style="width: 100%; height: 300px"></div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import * as echarts from 'echarts';
|
|||
|
|
export default {
|
|||
|
|
name: 'StatusChart',
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
chart: null,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 从vuex获取项目列表
|
|||
|
|
projects () {
|
|||
|
|
return this.$store.getters.projectList || [];
|
|||
|
|
},
|
|||
|
|
// 按规则统计各状态的项目数量
|
|||
|
|
chartData () {
|
|||
|
|
// 初始化各状态计数
|
|||
|
|
const statusCount = {
|
|||
|
|
'已完成': 0,
|
|||
|
|
'已逾期': 0,
|
|||
|
|
'即将到期': 0,
|
|||
|
|
'进行中': 0
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取当前日期（仅保留年月日，消除时分秒影响）
|
|||
|
|
const today = new Date();
|
|||
|
|
today.setHours(0, 0, 0, 0);
|
|||
|
|
|
|||
|
|
this.projects.forEach(project => {
|
|||
|
|
// 优先判断已完成状态
|
|||
|
|
if (project.projectStatus == 1) {
|
|||
|
|
statusCount['已完成']++;
|
|||
|
|
} else {
|
|||
|
|
// 处理未完成项目的时间判断
|
|||
|
|
if (project.finishTime) {
|
|||
|
|
try {
|
|||
|
|
// 将finishTime转换为日期对象（兼容YYYY-MM-dd hh:mm:ss格式）
|
|||
|
|
const finishDate = new Date(project.finishTime);
|
|||
|
|
finishDate.setHours(0, 0, 0, 0); // 统一时间维度
|
|||
|
|
|
|||
|
|
// 计算间隔天数（毫秒转天）
|
|||
|
|
const timeDiff = finishDate - today;
|
|||
|
|
const dayDiff = timeDiff / (1000 * 60 * 60 * 24);
|
|||
|
|
|
|||
|
|
if (dayDiff < 0) {
|
|||
|
|
// 已逾期：截止日期已过
|
|||
|
|
statusCount['已逾期']++;
|
|||
|
|
} else if (dayDiff < 10) {
|
|||
|
|
// 即将到期：截止日期在3天内
|
|||
|
|
statusCount['即将到期']++;
|
|||
|
|
} else {
|
|||
|
|
// 其他情况：进行中
|
|||
|
|
statusCount['进行中']++;
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
// 日期格式错误时默认归为进行中
|
|||
|
|
console.error('日期格式错误：', project.finishTime, e);
|
|||
|
|
statusCount['进行中']++;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 无截止日期的未完成项目归为进行中
|
|||
|
|
statusCount['进行中']++;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 转换为ECharts所需的数据格式（过滤数量为0的状态）
|
|||
|
|
return Object.entries(statusCount)
|
|||
|
|
.filter(([_, value]) => value > 0)
|
|||
|
|
.map(([name, value]) => {
|
|||
|
|
// 状态颜色映射
|
|||
|
|
const colorMap = {
|
|||
|
|
'已完成': '#1890ff', // 蓝色
|
|||
|
|
'已逾期': '#ff4d4f', // 红色
|
|||
|
|
'即将到期': '#faad14', // 黄色
|
|||
|
|
'进行中': '#52c41a' // 绿色
|
|||
|
|
};
|
|||
|
|
return {
|
|||
|
|
name,
|
|||
|
|
value,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: colorMap[name]
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted () {
|
|||
|
|
this.chart = echarts.init(this.$refs.chart);
|
|||
|
|
this.updateChart();
|
|||
|
|
window.addEventListener('resize', this.resize);
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
// 监听项目列表变化，更新图表
|
|||
|
|
projects: {
|
|||
|
|
handler: 'updateChart',
|
|||
|
|
deep: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
resize () {
|
|||
|
|
this.chart && this.chart.resize();
|
|||
|
|
},
|
|||
|
|
updateChart () {
|
|||
|
|
if (!this.chart) return;
|
|||
|
|
|
|||
|
|
this.chart.setOption({
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item',
|
|||
|
|
formatter: '{b}: {c}个 ({d}%)' // 显示数量和百分比
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
bottom: 10,
|
|||
|
|
textStyle: { fontSize: 12 }
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: '项目状态',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['50%', '70%'],
|
|||
|
|
avoidLabelOverlap: false,
|
|||
|
|
label: { show: false },
|
|||
|
|
emphasis: {
|
|||
|
|
label: { show: true, fontSize: '16', fontWeight: 'bold' }
|
|||
|
|
},
|
|||
|
|
data: this.chartData // 使用计算后的图表数据
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
beforeDestroy () {
|
|||
|
|
window.removeEventListener('resize', this.resize);
|
|||
|
|
this.chart && this.chart.dispose();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.chart {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
</style>
|