ygtx_worklog/ygtx-ui/src/components/Dashboard/ChartsGroupTwo.vue

<template>
  <el-row :gutter="20">
    <!-- 超时工单情况的柱状图 -->
    <el-col :span="12" v-if="showOvertimeChart">
      <div class="chart-container floating-card">
        <div ref="overtimeChart" class="chart"></div>
      </div>
    </el-col>
    
    <!-- 班组成员工分情况的横向柱状图 -->
    <el-col :span="12" v-if="showTeamPointsChart">
      <div class="chart-container floating-card">
        <div ref="teamPointsChart" class="chart"></div>
      </div>
    </el-col>
    
    <!-- 平均设备故障复发时间（MTF）的曲线图 -->
    <el-col :span="24" v-if="showMtfChart">
      <div class="chart-container floating-card">
        <div ref="mtfChart" class="chart"></div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from 'echarts';
import { getChartData } from '@/api/system/dashboard';

export default {
  name: 'ChartsGroupTwo',
  data() {
    return {
      overtimeChart: null,
      teamPointsChart: null,
      mtfChart: null,
      showOvertimeChart: true, // 控制超时工单情况图表的显示
      showTeamPointsChart: true, // 控制班组成员工分情况图表的显示
      showMtfChart: true, // 控制MTF曲线图的显示
    }
  },
  mounted() {
    this.initCharts()
  },
  beforeDestroy() {
    // 销毁所有图表实例
    const charts = [this.overtimeChart, this.teamPointsChart, this.mtfChart];
    charts.forEach(chart => {
      if (chart) {
        chart.dispose();
      }
    });
  },
  methods: {
    // 初始化图表
    initCharts() {
      this.overtimeChart = echarts.init(this.$refs.overtimeChart)
      this.teamPointsChart = echarts.init(this.$refs.teamPointsChart)
      this.mtfChart = echarts.init(this.$refs.mtfChart)
      
      // 获取图表数据
      this.fetchChartData();
    },
    
    // 获取图表数据
    async fetchChartData() {
      try {
        const response = await getChartData();
        
        // 处理班组成员工分情况数据
        if (response && response.pepolePointStatistics) {
          // 更新班组成员工分情况图表
          this.updateTeamPointsChart(response.pepolePointStatistics);
        } else {
          // 如果没有获取到数据，隐藏图表
          this.showTeamPointsChart = false;
          // 销毁图表实例
          if (this.teamPointsChart) {
            this.teamPointsChart.dispose();
            this.teamPointsChart = null;
          }
        }
        
        // 处理超时工单情况数据
        if (response && response.overTimeStatistics) {
          // 更新超时工单情况图表
          this.updateOvertimeChart(response.overTimeStatistics);
        } else {
          // 如果没有获取到数据，隐藏图表
          this.showOvertimeChart = false;
          // 销毁图表实例
          if (this.overtimeChart) {
            this.overtimeChart.dispose();
            this.overtimeChart = null;
          }
        }
        
        // 处理平均设备故障复发时间（MTF）数据
        if (response && response.faultStatistics) {
          // 更新MTF曲线图
          this.updateMtfChart(response.faultStatistics);
        } else {
          // 如果没有获取到数据，隐藏图表
          this.showMtfChart = false;
          // 销毁图表实例
          if (this.mtfChart) {
            this.mtfChart.dispose();
            this.mtfChart = null;
          }
        }
      } catch (error) {
        console.error('获取图表数据失败:', error);
        // 出错时隐藏图表
        this.showTeamPointsChart = false;
        this.showOvertimeChart = false;
        this.showMtfChart = false;
        // 销毁图表实例
        if (this.teamPointsChart) {
          this.teamPointsChart.dispose();
          this.teamPointsChart = null;
        }
        if (this.overtimeChart) {
          this.overtimeChart.dispose();
          this.overtimeChart = null;
        }
        if (this.mtfChart) {
          this.mtfChart.dispose();
          this.mtfChart = null;
        }
      }
    },
    
    // 计算轴的最大值和间隔的新方法
    calculateAxisRange(maxValue) {
      // 数据中的最大值除以5
      const dividedValue = maxValue / 5;
      
      // 预定义的数组
      const presetValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 25, 30, 35, 40, 45, 50, 70, 100, 150, 200, 250, 300, 500, 700, 1000, 2000, 5000];
      
      // 获取第一个大于dividedValue的值
      let selectedValue = presetValues[presetValues.length - 1]; // 默认取最大值
      for (let i = 0; i < presetValues.length; i++) {
        if (presetValues[i] >= dividedValue) {
          selectedValue = presetValues[i];
          break;
        }
      }
      
      // 乘以5作为最终的最大值
      const maxAxisValue = selectedValue * 5;
      
      // 计算间隔
      const interval = selectedValue;
      
      return { maxAxisValue, interval };
    },
    
    // 更新班组成员工分情况图表
    updateTeamPointsChart(pepolePointStatistics) {
      // 处理后台传回的数据格式 [{"key":"张三","value":"185"}]
      let names = [];
      let values = [];
      
      if (pepolePointStatistics && Array.isArray(pepolePointStatistics) && pepolePointStatistics.length > 0) {
        // 从后台数据中提取姓名和工分值
        names = pepolePointStatistics.map(item => item.key);
        values = pepolePointStatistics.map(item => parseInt(item.value) || 0);
        // 显示图表
        this.showTeamPointsChart = true;
      } else {
        // 隐藏图表
        this.showTeamPointsChart = false;
        // 销毁图表实例
        if (this.teamPointsChart) {
          this.teamPointsChart.dispose();
          this.teamPointsChart = null;
        }
        return;
      }
      
      // 使用新的计算方法
      const maxValue = Math.max(...values, 5); // 至少显示到5
      const { maxAxisValue, interval } = this.calculateAxisRange(maxValue);
      
      // 班组成员工分情况的横向柱状图（柱子颜色淡蓝色）
      const teamPointsOption = {
        title: {
          text: '班组成员工分情况',
          left: 'left',
          top: 'top'
        },
        grid: {
          left: '2%',   // 左边距 5%
          right: '2%',  // 右边距 5%
          top: '20%',   // 上边距（根据需求调整）
          bottom: '5%', // 下边距（根据需求调整）
          containLabel: true, // 确保标签在 grid 区域内
        },
        tooltip: {
          show: true,
          trigger: 'item',
          padding: [1, 5],
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          borderColor: 'rgba(0, 0, 0, 0.7)',
          textStyle: {
            color: '#fff'
          },
          formatter: function(params) {
            return `
              <div style="font-weight:bold; font-size:12px;">${params.name}</div>
              <div style="display: flex; align-items: center; font-size:12px;">
                <span style="display:inline-block; width:12px; height:12px; background:${params.color};margin-right: 4px;box-shadow: 0 0 0 0.5px white;"></span>
                <span>工分数:</span>
                <span style="margin-left: 4px;">${params.value}</span>
              </div>
            `;
          },
          position: 'top',
        },
        xAxis: {
          type: 'value',
          min: 0,
          max: maxAxisValue,
          interval: interval,
          axisLabel: {
            formatter: '{value}'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(200, 200, 200, 0.3)',
              type: 'solid'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: names, // 班组成员
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(200, 200, 200, 0.3)',
              type: 'solid'
            }
          }
        },
        series: [
          {
            data: values,
            type: 'bar',
            label: {
              show: false,
            },
            barWidth: '70%',
            itemStyle: {
              borderRadius: [0, 5, 5, 0],
              color: 'rgba(22, 93, 255, 0.7)' // 工单总工时颜色
            }
          }
        ]
      }
      
      // 初始化图表实例（如果还没有）
      if (!this.teamPointsChart) {
        this.teamPointsChart = echarts.init(this.$refs.teamPointsChart);
      }
      
      // 设置班组成员工分情况图表配置
      this.teamPointsChart.setOption(teamPointsOption, true);
    },
    
    // 更新超时工单情况图表
    updateOvertimeChart(overTimeStatistics) {
      // 处理后台传回的数据格式 [{"key":"超时1天","value":"25"}]
      let names = [];
      let values = [];
      
      if (overTimeStatistics && Array.isArray(overTimeStatistics) && overTimeStatistics.length > 0) {
        // 从后台数据中提取超时天数和工单数
        names = overTimeStatistics.map(item => item.key);
        values = overTimeStatistics.map(item => parseInt(item.value) || 0);
        // 显示图表
        this.showOvertimeChart = true;
      } else {
        // 隐藏图表
        this.showOvertimeChart = false;
        // 销毁图表实例
        if (this.overtimeChart) {
          this.overtimeChart.dispose();
          this.overtimeChart = null;
        }
        return;
      }
      
      // 使用新的计算方法
      const maxValue = Math.max(...values, 5); // 至少显示到5
      const { maxAxisValue, interval } = this.calculateAxisRange(maxValue);
      
      // 超时工单情况的柱状图（柱子颜色淡红色）
      const overtimeOption = {
        title: {
          text: '超时工单情况',
          left: 'left',
          top: 'top'
        },
        grid: {
          left: '2%',   // 左边距 5%
          right: '2%',  // 右边距 5%
          top: '20%',   // 上边距（根据需求调整）
          bottom: '5%', // 下边距（根据需求调整）
          containLabel: true, // 确保标签在 grid 区域内
        },
        tooltip: {
          show: true,
          trigger: 'item',
          padding: [1, 5],
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          borderColor: 'rgba(0, 0, 0, 0.7)',
          textStyle: {
            color: '#fff'
          },
          formatter: function(params) {
            return `
              <div style="font-weight:bold; font-size:12px;">${params.name}</div>
              <div style="display: flex; align-items: center; font-size:12px;">
                <span style="display:inline-block; width:12px; height:12px; background:${params.color};margin-right: 4px;box-shadow: 0 0 0 0.5px white;"></span>
                <span>工单数:</span>
                <span style="margin-left: 4px;">${params.value}</span>
              </div>
            `;
          },
          position: 'top',
        },
        xAxis: {
          type: 'category',
          data: names, // 超时天数
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(200, 200, 200, 0.3)',
              type: 'solid'
            }
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: maxAxisValue,
          interval: interval,
          axisLabel: {
            formatter: '{value}天'
          },
          name: '天数',
          nameLocation: 'middle',
          nameRotate: 90,
          nameGap: 40,
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(200, 200, 200, 0.3)',
              type: 'solid'
            }
          }
        },
        series: [
          {
            data: values, // 工单数
            type: 'bar',
            label: {
              show: false,
            },
            barWidth: '70%',
            itemStyle: {
              borderRadius: [5, 5, 0, 0],
              color: 'rgba(255, 77, 79, 0.7)' // 淡红色
            }
          }
        ]
      }
      
      // 初始化图表实例（如果还没有）
      if (!this.overtimeChart) {
        this.overtimeChart = echarts.init(this.$refs.overtimeChart);
      }
      
      // 设置超时工单情况图表配置
      this.overtimeChart.setOption(overtimeOption, true);
    },
    
    // 更新平均设备故障复发时间（MTF）曲线图
    updateMtfChart(faultStatistics) {
      // 处理后台传回的数据格式 [{"key":"1月","value":"45"}]
      let names = [];
      let values = [];
      
      if (faultStatistics && Array.isArray(faultStatistics) && faultStatistics.length > 0) {
        // 从后台数据中提取月份和MTF值
        names = faultStatistics.map(item => item.key);
        values = faultStatistics.map(item => parseInt(item.value) || 0);
        // 显示图表
        this.showMtfChart = true;
      } else {
        // 隐藏图表
        this.showMtfChart = false;
        // 销毁图表实例
        if (this.mtfChart) {
          this.mtfChart.dispose();
          this.mtfChart = null;
        }
        return;
      }
      
      // 使用新的计算方法
      const maxValue = Math.max(...values, 5); // 至少显示到5
      const { maxAxisValue, interval } = this.calculateAxisRange(maxValue);
      
      // 平均设备故障复发时间（MTF）的曲线图（绿色曲线，浅绿色区域）
      const mtfOption = {
        title: {
          text: '平均设备故障复发时间(MTF)',
          left: 'left',
          top: 'top'
        },
        grid: {
          left: '2%',   // 左边距 5%
          right: '2%',  // 右边距 5%
          top: '20%',   // 上边距（根据需求调整）
          bottom: '5%', // 下边距（根据需求调整）
          containLabel: true, // 确保标签在 grid 区域内
        },
        tooltip: {
          show: true,
          trigger: 'item',
          padding: [1, 5],
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          borderColor: 'rgba(0, 0, 0, 0.7)',
          textStyle: {
            color: '#fff'
          },
          formatter: function(params) {
            return `
              <div style="font-weight:bold; font-size:12px;">${params.name}</div>
              <div style="display: flex; align-items: center; font-size:12px;">
                <span style="display:inline-block; width:12px; height:12px; background:rgba(0, 200, 0, 0.8);margin-right: 4px;box-shadow: 0 0 0 0.5px white;"></span>
                <span>平均设备故障复发时间(天):</span>
                <span style="margin-left: 4px;">${params.value}</span>
              </div>
            `;
          }
        },
        xAxis: {
          type: 'category',
          data: names, // 月份
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(200, 200, 200, 0.3)',
              type: 'solid'
            }
          },
          // 确保0点也能显示x轴第一个名字
          boundaryGap: false
        },
        yAxis: {
          name: '天数',
          nameLocation: 'middle',
          nameGap: 30,
          type: 'value',
          min: 0,
          max: maxAxisValue,
          interval: interval,
          axisLabel: {
            formatter: '{value}'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(200, 200, 200, 0.3)',
              type: 'solid'
            }
          }
        },
        series: [
          {
            name: 'MTF',
            data: values, // MTF值
            type: 'line',
            smooth: true,
            symbolSize: 8,
            lineStyle: {
              color: 'rgba(0, 200, 0, 0.8)', // 绿色曲线
              width: 3
            },
            areaStyle: {
              color: 'rgba(0, 200, 0, 0.2)' // 浅绿色区域
            }
          }
        ]
      }
      
      // 初始化图表实例（如果还没有）
      if (!this.mtfChart) {
        this.mtfChart = echarts.init(this.$refs.mtfChart);
      }
      
      // 设置MTF曲线图配置
      this.mtfChart.setOption(mtfOption, true);
    },
    
    // 图表自适应
    resizeCharts() {
      const charts = [this.overtimeChart, this.teamPointsChart, this.mtfChart];
      charts.forEach(chart => {
        if (chart) {
          chart.resize();
        }
      });
    }
  }
}
</script>

<style scoped>
/* 悬浮卡片通用样式 */
.floating-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.floating-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* 图表样式 */
.chart-container {
  height: 340px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
  box-sizing: border-box;
  backdrop-filter: blur(5px);
}

.chart-container:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.chart {
  width: 100%;
  height: 100%;
}
</style>