This commit is contained in:
ljx
2025-09-12 20:01:15 +08:00
17 changed files with 3200 additions and 802 deletions

View File

@ -1,7 +1,7 @@
<template>
<div class="leftPage">
<div class="topPage">
<Title style="font-size: 22px" title="企业关键指标" />
<Title title="企业关键指标" />
<div class="indicators">
<div class="indicator-card" v-for="indicator in indicators" :key="indicator.id">
<div style="display: flex; align-items: baseline; gap: 4px; margin-bottom: 5px">
@ -17,7 +17,7 @@
</div>
<div class="endPage">
<Title style="font-size: 22px" title="人员情况" />
<Title title="人员情况" />
<!-- 人员总览区域 -->
<div class="people_overview">
<div class="people_overview_content">
@ -80,7 +80,7 @@
<!-- 项目出勤率柱状图 -->
<div class="project_attendance_chart">
<Title style="font-size: 22px" title="项目出勤率统计" />
<Title title="项目出勤率统计" />
<div class="chart_content" ref="attendanceChartRef"></div>
</div>
@ -108,31 +108,31 @@ const mapChartRef = ref<HTMLDivElement | null>(null);
const indicators = ref([
{
id: '1',
name: '在建项目',
name: '光伏项目',
value: '28',
unit: '个',
iconPath: '/assets/demo/beUnder.png'
},
{
id: '2',
name: '合同总额',
name: '风电项目',
value: '288.88',
unit: '亿元',
iconPath: '/assets/demo/contract.png'
unit: '',
iconPath: '/src/assets/images/contract.png'
},
{
id: '3',
name: '总容量',
name: '光伏系统总容量',
value: '158.88',
unit: '',
iconPath: '/assets/demo/totalCapacity.png'
unit: 'MW',
iconPath: '/src/assets/images/totalCapacity.png'
},
{
id: '4',
name: '今日施工',
name: '风电项目总容量',
value: '18',
unit: '',
iconPath: '/assets/demo/todayConstruction.png'
unit: 'MW',
iconPath: '/src/assets/images/todayConstruction.png'
}
]);
@ -255,7 +255,7 @@ const scrollToProject = (index: number) => {
// 计算滚动条应该移动到的位置
// 确保当前项目居中显示
const totalProjects = projectAttendanceData.value.length;
const visiblePercentage = 15; // 与dataZoom的end值保持一致
const visiblePercentage = 20; // 与dataZoom的end值保持一致
const itemPercentage = 100 / totalProjects; // 每个项目所占总宽度的百分比
// 计算新的start值使当前项目尽量居中显示
@ -273,28 +273,6 @@ const scrollToProject = (index: number) => {
}
};
/**
* 开始自动滚动
*/
const startScroll = () => {
if (scrollInterval.value) return;
scrollInterval.value = window.setInterval(() => {
currentScrollIndex.value++;
scrollToProject(currentScrollIndex.value);
}, scrollSpeed);
};
/**
* 停止自动滚动
*/
const stopScroll = () => {
if (scrollInterval.value) {
clearInterval(scrollInterval.value);
scrollInterval.value = null;
}
};
/**
* 获取项目出勤率统计数据 - 保持项目出勤率图表功能
*/
@ -367,10 +345,10 @@ const getKeyIndexData = async () => {
const { data, code } = res;
if (code === 200) {
// 更新指标数据,使用接口返回的指定字段
indicators.value[0].value = data.ongoingProject || 0;
indicators.value[1].value = data.totalContractAmount || 0;
indicators.value[2].value = data.totalCapacity || 0;
indicators.value[3].value = data.todayProject || 0;
indicators.value[0].value = data.photovoltaicCount || 0;
indicators.value[1].value = data.windElectricityCount || 0;
indicators.value[2].value = data.photovoltaicTotalCapacity || 0;
indicators.value[3].value = data.windElectricityTotalCapacity || 0;
}
};
@ -593,17 +571,9 @@ const initAttendanceChart = () => {
attendanceChart.setOption(option);
// 添加鼠标悬浮事件监听
// 移除自动滚动功能,保留其他事件监听
if (attendanceChartRef.value) {
// 鼠标进入图表区域时停止滚动
attendanceChartRef.value.addEventListener('mouseenter', () => {
stopScroll();
});
// 鼠标离开图表区域时重新开始滚动
attendanceChartRef.value.addEventListener('mouseleave', () => {
startScroll();
});
// 保留其他可能需要的事件监听器
}
// 添加窗口大小变化时的图表更新
@ -619,11 +589,7 @@ const initAttendanceChart = () => {
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
// 移除鼠标事件监听
if (attendanceChartRef.value) {
attendanceChartRef.value.removeEventListener('mouseenter', stopScroll);
attendanceChartRef.value.removeEventListener('mouseleave', startScroll);
}
// 移除鼠标事件监听(已在上面移除添加的事件监听)
});
};
@ -652,9 +618,6 @@ onMounted(async () => {
// 再初始化图表
initAttendanceChart();
// 图表初始化后自动开始滚动
startScroll();
});
onUnmounted(() => {
@ -667,9 +630,6 @@ onUnmounted(() => {
attendanceChart.dispose();
attendanceChart = null;
}
// 清理滚动计时器
stopScroll();
});
</script>
@ -879,10 +839,8 @@ onUnmounted(() => {
text-shadow: 0px 1.24px 6.21px rgba(0, 200, 83, 0.5);
}
/* 点阵地图样式 */
.people_map {
width: 100%;
height: 120px;
margin-top: 8px;
background: rgba(10, 24, 45, 0.5);
border: 1px solid rgba(29, 214, 255, 0.1);