Merge branch 'lx' of http://xny.yj-3d.com:3000/taoge_xiaodi/maintenance_system into tcy
This commit is contained in:
re-JZzzz
320
src/views/integratedManage/attendManage/components/totalView.vue
Normal file
320
src/views/integratedManage/attendManage/components/totalView.vue
Normal file
@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<div class="total-view-container">
|
||||
<div class="total-view-content">
|
||||
<!-- 总出勤人数 -->
|
||||
<div class="stats-card">
|
||||
<div class="stats-card-header">
|
||||
<span class="stats-title">总出勤人数</span>
|
||||
<span class="stats-change positive">↑ 8.2% 较昨日同期</span>
|
||||
</div>
|
||||
<div class="stats-card-body">
|
||||
<div class="stats-value">248</div>
|
||||
<div class="stats-chart">
|
||||
<div ref="attendanceChart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 调休 -->
|
||||
<div class="stats-card">
|
||||
<div class="stats-card-header">
|
||||
<span class="stats-title">调休</span>
|
||||
<span class="stats-change positive">↑ 8.2% 较上月同期</span>
|
||||
</div>
|
||||
<div class="stats-card-body">
|
||||
<div class="stats-value">8</div>
|
||||
<div class="stats-chart">
|
||||
<div ref="restChart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 本月请假 -->
|
||||
<div class="stats-card">
|
||||
<div class="stats-card-header">
|
||||
<span class="stats-title">本月请假</span>
|
||||
<span class="stats-change negative">↓ 10% 较昨日同期</span>
|
||||
</div>
|
||||
<div class="stats-card-body">
|
||||
<div class="stats-value">24</div>
|
||||
<div class="stats-chart">
|
||||
<div ref="leaveChart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 平均出勤率 -->
|
||||
<div class="stats-card">
|
||||
<div class="stats-card-header">
|
||||
<span class="stats-title">平均出勤率</span>
|
||||
<span class="stats-change positive">↑ 10% 较昨日同期</span>
|
||||
</div>
|
||||
<div class="stats-card-body">
|
||||
<div class="stats-value">96.8%</div>
|
||||
<div class="stats-chart">
|
||||
<div ref="rateChart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// 图表引用
|
||||
const attendanceChart = ref(null);
|
||||
const restChart = ref(null);
|
||||
const leaveChart = ref(null);
|
||||
const rateChart = ref(null);
|
||||
|
||||
// 初始化图表
|
||||
const initCharts = () => {
|
||||
// 总出勤人数图表 - 条形图
|
||||
const attendanceChartInstance = echarts.init(attendanceChart.value);
|
||||
attendanceChartInstance.setOption({
|
||||
tooltip: { show: false },
|
||||
grid: { top: 0, bottom: 0, left: -70, right: 0, containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['', '', '', '', '', '', ''],
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { show: false }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: false
|
||||
},
|
||||
series: [{
|
||||
data: [150, 230, 224, 218, 135, 300, 220],
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
color: '#FF7D00',
|
||||
borderRadius: [10, 10, 0, 0] // 柱状图圆角
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
// 调休图表 - 折线图
|
||||
const restChartInstance = echarts.init(restChart.value);
|
||||
restChartInstance.setOption({
|
||||
tooltip: { show: false },
|
||||
grid: { top:10, bottom: 0, left: -30, right: 0, containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['', '', '', '', '', '', '', '', '', ''],
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { show: false }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: false
|
||||
},
|
||||
series: [{
|
||||
data: [120, 200, 150, 80, 70, 110, 130, 150, 160, 180],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 3, // 折线图线条加粗
|
||||
color: '#52C41A'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(82, 196, 26, 0.2)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(82, 196, 26, 0.01)'
|
||||
}])
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
// 本月请假图表 - 折线图
|
||||
const leaveChartInstance = echarts.init(leaveChart.value);
|
||||
leaveChartInstance.setOption({
|
||||
tooltip: { show: false },
|
||||
grid: { top: 10, bottom: 0, left: -30, right: 0, containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['', '', '', '', '', '', '', '', '', ''],
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { show: false }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: false
|
||||
},
|
||||
series: [{
|
||||
data: [80, 150, 120, 200, 180, 130, 160, 190, 140, 100],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 3, // 折线图线条加粗
|
||||
color: '#F5222D'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(245, 34, 45, 0.2)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(245, 34, 45, 0.01)'
|
||||
}])
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
// 平均出勤率图表 - 折线图
|
||||
const rateChartInstance = echarts.init(rateChart.value);
|
||||
rateChartInstance.setOption({
|
||||
tooltip: { show: false },
|
||||
grid: { top: 0, bottom: 0, left: -30, right: 0, containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['', '', '', '', '', '', '', '', '', ''],
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { show: false }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: false
|
||||
},
|
||||
series: [{
|
||||
data: [90, 92, 91, 93, 95, 94, 96, 95, 97, 98],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 3, // 折线图线条加粗
|
||||
color: '#186DF5'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(24, 109, 245, 0.2)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(24, 109, 245, 0.01)'
|
||||
}])
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
// 响应窗口大小变化
|
||||
window.addEventListener('resize', () => {
|
||||
attendanceChartInstance.resize();
|
||||
restChartInstance.resize();
|
||||
leaveChartInstance.resize();
|
||||
rateChartInstance.resize();
|
||||
});
|
||||
};
|
||||
|
||||
// 组件挂载后初始化图表
|
||||
onMounted(() => {
|
||||
initCharts();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.total-view-container {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.total-view-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-right: 1px dashed #E4E7ED;
|
||||
}
|
||||
|
||||
.stats-card:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.stats-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.stats-title {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.stats-change {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.stats-change.positive {
|
||||
color: #52C41A;
|
||||
}
|
||||
|
||||
.stats-change.negative {
|
||||
color: #F5222D;
|
||||
}
|
||||
|
||||
.stats-card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stats-value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.stats-chart {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 响应式布局
|
||||
@media screen and (max-width: 1200px) {
|
||||
.total-view-content {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
width: calc(50% - 10px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.stats-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user