yudao-dev/src/views/home/components/LossSum.vue

<template>
  <ModelBox name='1-1'>
    <div class='loss-sum'>
      <SwitchBtn class='switch-btn' @chooseBtn='chooseBtn'/>
      <div id='lossSum' style='width: 584px; height: 270px;'></div>
    </div>
  </ModelBox>
</template>
<script>
import * as echarts from 'echarts';
import ModelBox from './ModelBox.vue';
import SwitchBtn from './SwitchBtn.vue';
export default {
  name: 'LossSum',
  components: {
    ModelBox,
    SwitchBtn
  },
  data() {
    return {
      nowMonth:[],
      nowWeek: [],
      oneDay: [],
      todayClass: []
    }
  },
  props: {
    dataObj: {
      type: Object,
      default: () => {}
    }
  },
  mounted() {
    // this.getChart()
  },
  watch: {
    dataObj: {
      handler(newVal, oldVal) {
        console.log(newVal,'newVal');
        if (newVal) {
          this.nowMonth = newVal.nowMonth ? newVal.nowMonth : []
          this.nowWeek = newVal.nowWeek ? newVal.nowWeek : []
          this.oneDay = newVal.oneDay ? newVal.oneDay :[]
          this.todayClass = newVal.todayClass ? newVal.todayClass : []
        }
        this.getChart(this.todayClass)
      },
      deep: true  // 深度监听
    }
  },
  methods: {
    getChart(val) {
      console.log(val, 'val');
      let series = []
      const lineNames = [...new Set(val.map(item => item.lineName))].sort();
      // const types = [...new Set(val.map(item => item.type))].sort();
      // lineNames.forEach(lineName => {
      //   series.push({
      //     name: lineName,
      //     type: 'bar',
      //     barGap: '30%',
      //     barWidth: 15,
      //     data: []
      //   });
      // });
      const types = ['上片', '磨边', '打孔', '丝印', '镀膜', '钢化', '包装']
      const typeMap = { 1: '上片', 2: '磨边', 3: '打孔',4:'丝印', 5: '镀膜', 6: '钢化', 7: '包装' };
      types.forEach(typeName => {
        series.push({
          name: typeName,
          type: 'bar',
          barGap: '30%',
          barWidth: 15,
          data: []
        });
      });
      types.forEach((type, index) => {
        const typeValue = parseInt(Object.keys(typeMap).find(key => typeMap[key] === type));
        console.log(typeValue,'typeValue');

        const itemSeries = series.find(s => s.name === type);
        lineNames.forEach(lineName => {
          const item = val.find(d => d.lineName === lineName && d.type === typeValue);
          if (item) {
            itemSeries.data.push(item.lossNum);
          } else {
            // 如果没有数据，添加0
            itemSeries.data.push(0);
          }
        });
        // lineSeries.data.push(lineSeries.lossNum)
        // types.forEach(type => {
        //   // 查找对应产线和工序类型的数据
        //   const item = oneDay.find(d => d.lineName === lineName && d.type === type);
        //   if (item) {
        //     // 将lossNum添加到对应的系列中
        //     lineSeries.data.push(item.lossNum);
        //   } else {
        //     // 如果没有数据，添加0
        //     lineSeries.data.push(0);
        //   }
        // });
      });
      console.log('series', series);

      // const lineNames = [...new Set(val.map(item => item.lineName))].sort();
      // // let xData = []
      // lineNames.forEach(line => {
      //   // sectionNames.forEach(section => {
      //     // 查找对应产线和工段的数据
      //     const item = val.find(d => d.lineName === line);
      //     if (item) {
      //       // 将lossNum添加到对应的系列中
      //       this.series[item.type - 1].data.push(item.lossNum);
      //     } else {
      //       // 如果没有数据，添加0
      //       this.series.forEach(s => s.data.push(0));
      //     }
      //   // });
      // });
      // val.forEach((ele) => {
      //   console.log(ele.lineName,ele.type);

      //   if (!xData.includes(ele.lineName)) {
      //     xData.push(ele.lineName)
      //   }
      // })
      // console.log('xData', xData);

      var chartDom = document.getElementById('lossSum');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        color: ['#FFCE6A', '#96F0B1', '#63BDFF', '#288AFF', '#AC8BFF', '#7164FF', '#3B2BFD'],
        legend: {
          top:18,
          right:5,
          itemWidth:8,
          itemHeight: 8,
          // data: [ '上片', '磨边','打孔','镀膜','钢化','包装'],
          textStyle:{
            color: '#8C8C8C',
            fontSize: '14px'
          }
        },
        grid: {
          top: 50,
          left: 10,
          right: 5,
          bottom: 5,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            let result = `<span>${params[0].name}</span><br/>`;
            params.forEach(item => {
              result += `<div style="display:flex;align-items:center;">
                <span style="display:inline-block;width:8px;height:8px;background:${item.color};margin-right:5px;"></span>
                <span style="display:inline-block;margin-right:20px;">${item.seriesName}</span>
                <span style="font-weight:bold;">${item.value}</span><br/>
              </div>`;
            });
            return result;
          }
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show:true,
            lineStyle:{
              color: 'rgba(0,0,0,0.45)'
            }
          },
          axisTick: {
            show:false
          },
          data: lineNames
        },
        yAxis: {
          name:'单位/片',
          nameTextStyle:{
            color: 'rgba(0,0,0,0.45)',
            fontSize: '14px'
          },
          axisLine: {
            show:true,
            lineStyle:{
              color: 'rgba(0,0,0,0.45)'
            }
          }
        },
        series: series
      };
      option && myChart.setOption(option);
    },
    chooseBtn(val) {
      if (val ===3) {
        this.getChart(this.nowMonth)
      } else if (val === 2) {
        this.getChart(this.nowWeek)
      } else if (val === 1) {
        this.getChart(this.oneDay)
      } else if (val === 0) {
        this.getChart(this.todayClass)
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.loss-sum {
  position: relative;
  .switch-btn {
    position: absolute;
    right: -3px;
    top: -27px;
  }
}
</style>