<!--
 描述: 酷屏首页模板
 作者: anni
 日期: 2024-10-30
-->

<template>
    <div class="home-container">
      <div class="wrap" ref="editor">
        <div class="wrap-container sn-container sn-container-top"> 
          <div class="sn-content"> 
            <div class="sn-title" @click="goHome">{{ time }} <span style="color:#ff9829">{{ name }}</span> 日人均产出</div> 
            <div class="sn-body"> 
              <div class="wrap-container"> 
                <div class="chartsdom" id="chart_work"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="wrap-container sn-container sn-container-bottom"> 
          <div class="sn-content"> 
            <div class="sn-title">{{ time }} <span style="color:#ff9829">{{ name }}</span> 每日工作人数</div> 
            <div class="sn-body"> 
              <div class="wrap-container"> 
                <div class="chartsdom" id="chart_ptrend"></div>
              </div>
            </div>
          </div>
        </div>  
      </div>
    </div>
  </template>
  
  <script>
  import { screenSize } from '@/assets/js/utils';
  import { getWorkerQty } from "@/api/product/dashboard.js";
  import { timeFormateMonth } from "@/utils/timeFormate";
  
  export default {
  name: "pyramidTrend",
  data() {
    return {
      name: '',
      option: null,
      dataMap: [],
      data: [],
      time: '',
      timelineData: [],
      allData: [],
      allPeople: []
    }
  },
  mounted() {
    this.initChart();
    this.time = timeFormateMonth(new Date());
  },
  //s
  methods: {
    goHome() {
      if (process.env.NODE_ENV === 'production') {
        this.$router.push({ path: '/admin/index' });
      } else {
        this.$router.push({ path: '/' });
      }
    },
    async initChart() {
      try {
        await this.getData();
        this.time = timeFormateMonth(new Date());
      } catch (error) {
        console.error('初始化图表失败:', error);
      }
    },
    /** 获取列表数据 */
    async getData() {
      this.dataMap = [];
      await getWorkerQty().then(res => {
        if (res && res.data) {
          let daySet = new Set();
          let allData = [];
          let allPeople = [];
          Object.entries(res.data).forEach(([lineName, lineData]) => {
            // 收集所有天数
            Object.keys(lineData).forEach(key => {
              const day = key.split('-')[2];
              if (day) daySet.add(day);
            });
          });
          // 排序
          this.dataMap = Array.from(daySet).sort((a, b) => a - b);

          Object.entries(res.data).forEach(([lineName, lineData]) => {
            // 生成每一天的数据
            let dataArr = this.dataMap.map(day => {
              // 直接查找是否有以-day结尾的key
              let key = Object.keys(lineData).find(k => k.endsWith('-' + day));
              return key && lineData[key] && typeof lineData[key] === 'object'
                ? (lineData[key]['人均产出'] ?? 0)
                : 0;
            });
            // 判断是否有有效数据
            let hasValidData = dataArr.some(val => val > 0);
            if (hasValidData) {
              allData.push({
                name: lineName,
                data: dataArr
              });
            }
          });
          this.allData = allData;


          Object.entries(res.data).forEach(([lineName, lineData]) => {
            // 生成每一天的数据
            let dataArr = this.dataMap.map(day => {
              // 直接查找是否有以-day结尾的key
              let key = Object.keys(lineData).find(k => k.endsWith('-' + day));
              return key && lineData[key] && typeof lineData[key] === 'object'
                ? (lineData[key]['每日工作人数'] ?? 0)
                : 0;
            });
            // 判断是否有有效数据
            let hasValidData = dataArr.some(val => val > 0);
            if (hasValidData) {
              allPeople.push({
                name: lineName,
                data: dataArr
              });
            }
          });
          this.allPeople = allPeople;

          console.log(this.allData, this.allPeople);

          Object.values(res.data).forEach((item) => {
            Object.keys(item).forEach((key) => {
              const day = key.split('-')[2];
              if (day && !this.dataMap.includes(day)) {
                this.dataMap.push(day);
              }
            })
          })
          this.name = '智能产线';
          this.getWorkEchart();
          this.getEchart();
        }
      }).catch();
    },
    /** 数据加载处理 */
    loadData(val) {
      let arr = [];
      this.workData = [];
      this.data = [];
      this.dataMap = []
      Object.keys(this.allData[val]).forEach((key) => {
        // 支持多条产线
        Object.keys(this.allData[val][key]).forEach(lineName => {
          arr.push({
            line: lineName,
            time: key.split('-')[2],
            num: parseInt(this.allData[val][key][lineName]['人均产出']),
            people: this.allData[val][key][lineName]['每日工作人数']
          });
        });
      })
      arr.sort((a, b) => {
          return a.time - b.time
      })
      console.log('hahaha', arr);
      arr.forEach((item) => {
        this.workData.push(item.num);
        this.data.push(item.people);
        this.dataMap.push(item.time)
      })

      this.getWorkEchart();
      this.getEchart();
    },
    getWorkEchart() {
      const myWorkChart = this.$echarts.init(document.getElementById('chart_work'));
      let colorArr = ['#fffa15', '#179bf1', '#ff9829', '#7adfa0', '#ff7b7b', '#a17bff', '#ffd700', '#00bfff'];
      // 构建多条产线的 series
      const series = this.allData.map((item, idx) => {
        return {
          name: item.name,
          type: 'bar',
          data: item.data,
          barWidth: 10,
          legendHoverLink: true,
          label: {
            show: false,
            position: 'top',
            color: '#fff',
            fontSize: 10,
            fontWeight: 800
          },
          itemStyle: {
            barBorderRadius: [8, 0],
            color: colorArr[idx % colorArr.length]
          }
        };
      });

      this.option = {
        baseOption: {
          timeline: {
            axisType: 'category',
            // autoPlay: false,
            // loop: true,
            // playInterval: 60000,
            data: this.timelineData,
            left: 180,
            right: 180,
            bottom: -100,
            lineStyle: {
              show: true,
              color: '#179bf1'
            },
            label: {
              show: true,
              color: '#fff',
              fontSize: 16
            },
            checkpointStyle: {
              show: true,
              color: '#ff9232', 
              symbolSize: 0,
              borderColor: '#ff923282',
              borderWidth: 5,
            },
            controlStyle: {
              show: false,
            }
          },
          calculable: true,
          grid: {
            top: '20%',
            bottom: '10%'
          },
          xAxis: [{
            type: 'category',
            name: '日',
            nameTextStyle: {
                fontSize: 24
            },
            axisLabel: {
              margin: 10,
              interval: 0,
              fontSize: 16,
              color: '#E2E5FF'
            },
            data: this.dataMap,
            splitLine: { 
              show: false 
            },
            axisTick: {
              show: true
            }, 
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E2E5FF',
              }
            },
          }],
          yAxis: [{
            type: 'value',
            name: '双',
            nameTextStyle: {
                fontSize: 30
            },
            axisLabel: {
              margin: 20,
              interval: 0,
              fontSize: 24,
              color: '#E2E5FF'
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            }, 
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E2E5FF'
              }
            }
          }],
          series: [{
            type: 'bar',
            barWidth: 20,
            legendHoverLink: true,
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              fontSize: 16
            },
          }],
          legend: {
            show: true,
            data: Array.isArray(this.allData) ? this.allData.map(item => item.name) : [],
            top: 10,
            textStyle: {
              color: '#E2E5FF',
              fontSize: 32
            }
          },
          series: series
        }
      }

      myWorkChart.setOption(this.option, true);

      window.addEventListener('resize', () => {
        myWorkChart.resize();
      });

      this.timer = setInterval(() => {
          this.getData();
      }, 1800000)
    },
    getEchart() {
      const myChart = this.$echarts.init(document.getElementById('chart_ptrend'));

      let colorArr = ['#fffa15', '#179bf1', '#ff9829', '#7adfa0', '#ff7b7b', '#a17bff', '#ffd700', '#00bfff'];

      const series = this.allPeople.map((item, idx) => {
        return {
          name: item.name,
          type: 'bar',
          data: item.data,
          barWidth: 10,
            legendHoverLink: true,
            label: {
              show: false,
              position: 'top',
              color: '#fff',
              fontSize: 16
            },
            itemStyle: {
              barBorderRadius: [15, 0],
              color: colorArr[idx % colorArr.length]
            }
        }
      });

      this.option = {
        baseOption: {
          timeline: {
            axisType: 'category',
            autoPlay: false,
            playInterval: 60000,
            // data: ['第一周', '第二周', '第三周', '第四周'],
            left: 80,
            right: 80,
            bottom: 10,
            lineStyle: {
              show:false,
              color: '#179bf1'
            },
            label: {
              show: true,
              color: '#fff',
              fontSize: '24'
            },
            checkpointStyle: {
              color: '#ff9232', 
              symbolSize: 10,
              borderColor: '#ff923282',
              borderWidth: 5,
            },
            controlStyle: {
              show: false,
            }, 
            itemStyle: {
              borderColor: '#004b85',
              borderWidth: 2,
              shadowColor: 'rgba(1, 216, 225, 0.5)',
              shadowBlur: 20
            }
          },
          calculable: true,
          grid: {
            top: '20%',
            bottom: '10%'
          },
          xAxis: [{
            type: 'category',
            name: '日',
            nameTextStyle: {
                fontSize: 24
            },
            axisLabel: {
              margin: 18,
              interval: 0,
              fontSize: 16,
              color: '#E2E5FF'
            },
            data: this.dataMap,
            splitLine: { 
              show: false 
            },
            axisTick: {
              show: true
            }, 
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E2E5FF',
              }
            },
          }],
          yAxis: [{
            type: 'value',
            name: '人',
            minInterval: 1,
            nameTextStyle: {
                fontSize: 30
            },
            axisLabel: {
              margin: 20,
              interval: 0,
              fontSize: 24,
              color: '#E2E5FF'
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            }, 
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E2E5FF'
              }
            }
          }],
          series: [{
            type: 'bar',
            barWidth: 20,
            legendHoverLink: true,
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              fontSize: 20
            },
          }],
          legend: {
            show: true,
            data: Array.isArray(this.allPeople) ? this.allPeople.map(item => item.name) : [],
            top: 10,
            textStyle: {
              color: '#E2E5FF',
              fontSize: 32
            }
          },
          series: series
        }
      }

      myChart.setOption(this.option, true);

      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="scss" scoped>
.sn-container {
  position: absolute;
  width: 100vw; 
  height: 100vh;
  border: 2px solid rgba(92,255,255,0.1);
  background: rgba(10,106,255,0.1) url(../../assets/images/wg.png) repeat 50% 50% !important;
  background-blend-mode: screen;
  overflow: visible;

  .sn-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    .sn-title {
      cursor: pointer;
      position: absolute;
      height: 40px;
      font-size: 40px;
      color: #7becff;
      line-height: 40px;
      padding: 0 0 0 30px;
      left: 26px;
      right: 10px;
      top: 20px;
      
      &:before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -7px;
        width: 20px;
        height: 20px;
        background: url(../../assets/images/sn-title.png) no-repeat 0% 0%;
      }
    }

    .sn-body {
      position: absolute;
      top: 80px;
      left: 0;
      right: 0;
      bottom: 20px;
      
      .chartsdom {
        width: 100%;
        height: 90%;
        min-height: 380px; /* 确保最小高度 */
      }
    }
  }
}
.sn-container-top {
  left: 3%;
  top: 3%;
  width: 94%;
  height: 46%;
  .chartsdom {
    width: 100%;
    height: 90%;
  }
}
.sn-container-bottom {
  left: 3%;
  top: 52%;
  width: 94%;
  height: 46%;
  .chartsdom {
    width: 100%;
    height: 90%;
  }
}
.home-container {
  height: 100vh !important;
  width: 100% !important;
  z-index: 10001 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  .wrap {
    transform-origin: 0px 0px 0px 0px;
    transform: none !important;
    background: url(../../assets/images/bj.jpg) no-repeat;
    background-size: contain;
    background-position: 50% 0;
    background-color: rgb(0, 0, 0);
    min-width: auto;
    width: 1920px;
    min-height: auto;
    height: 1080px;
    overflow: hidden;
    .top {
      position: absolute;
      left: 0; 
      top: 0; 
      width: 100%; 
      height: 80px; 
      background-color: transparent; 
      background: url(../../assets/images/top_nav.png) no-repeat; 
      background-position: 65% 0;
      border: none; 
      overflow: hidden;

      h1 {
        font-size: 36px;
        color: rgb(216, 255, 255);
        text-align: center;
        line-height: 70px;
        -webkit-text-stroke: 2px #193d8f;
      }
    }

    header {
      position: relative;
      height: 80px;
      background: url(../../assets/images/head_bg2.png) no-repeat top center;
      // background: url(../../assets/images/top_nav.png) no-repeat top center;
      background-size: 100% 100%;
      h2 {
        color: #ffffff;
        font-size: 34px;
        text-align: center;
        line-height: 80px;
        letter-spacing: 4px;
        -webkit-text-stroke: 2px #193d8f;
      }
      .weather {
        position: absolute;
        left: 10px;
        top: 10px;
        font-size: 14px;
        color: rgba(126, 240, 255, .7);
        img {
          width: 20px;
        }
        span {
          display: inline-block;
        }
        .tem {
          margin: 0 10px 0 .2rem;
        }
      }
      .showTime {
        position: absolute;
        right: 50px;
        top: 40px;
        color: rgba(145, 233, 255, 0.801);
        display: flex;
        .time {
          font-size: 26px;
          margin-right: 30px;
        }
        .date {
          span {
            &:nth-child(1) {
              font-size: 18px;
              margin-right: 14px;
            }
            &:nth-child(2) {
              font-size: 20px;
            }
          }
        }
      }
    }
  }
}	
  </style>
  