maintenance_system/src/views/integratedManage/attendManage/components/totalView.vue

<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>