<!--
 描述: 合格率
 作者: anni
 日期: 2024-10-30
-->

<template>
    <div class="home-container">
        <div class="wrap" ref="editor">
            <div class="wrap-container sn-container"> 
                <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_arc"></div>
                    </div> 
                    </div> 
                </div>   
            </div>
        </div>
    </div>
</template>

  
<script>
import { screenSize } from '@/assets/js/utils';
import { getPassRate } from "@/api/product/dashboard.js";
import { timeFormateWeek } from "@/utils/timeFormate";

export default {
name: "scrollArc",
data() {
    return {
        name: '',
        option: null,
        number: 0,
        timer: null,
        dataMap: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'],
        data: [1,1,1,1,1,1],
        allData: [],
        time: ''
    }
},
mounted() {
    this.initChart();
},
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 = timeFormateWeek(new Date());
        } catch (error) {
            console.error('初始化图表失败:', error);
        }
    },
    /** 获取列表数据 */
    async getData() {
        try {
            const res = await getPassRate();
            if (res && res.data) {
                this.allData = Object.keys(res.data).map((lineName) => {
                    const lineData = res.data[lineName];
                    // 检查产线数据是否有效
                    const hasValidData = this.dataMap?.some(week =>
                        lineData[week] && typeof lineData[week] === 'object' && 
                        Number(lineData[week]['合格率']?.replace('%', '')) > 0
                    );
                    if (hasValidData) {
                        return {
                            name: lineName,
                            data: this.dataMap.map(week => {
                                let rate = Number(lineData[week]?.['合格率']?.replace('%', ''));
                                // 数据为0时显示为null
                                return rate > 0 ? rate : null;
                            })
                        };
                    } else {
                        return null;
                    }
                }).filter(item => item !== null); // 过滤掉无效数据

                if (this.allData.length > 0) {
                    this.name = '智能产线';
                    this.getEchart();
                }
            }
        } catch (e) {
            console.error('获取数据失败:', e);
        }
    },
    getEchart() {
        const myChart = this.$echarts.init(document.getElementById('chart_arc'));

        // 支持多条产线数据
        let colorArr = ['#ffeb7b', '#179bf1', '#ff9829', '#7adfa0', '#ff7b7b', '#a17bff', '#ffd700', '#00bfff'];

        // 构建多条产线的 series
        const series = this.allData.map((item, idx) => {
            return {
                name: item.name,
                type: 'line',
                data: item.data,
                symbolSize: 16,
                lineStyle: {
                    width: 8,
                    color: colorArr[idx % colorArr.length]
                },
                itemStyle: {
                    color: colorArr[idx % colorArr.length],
                    normal: {
                        label: {
                            show: true,
                            color: '#fff',
                            fontSize: 30,
                            position: 'top',
                            formatter: function (params) {
                                return params.value + '%'
                            }
                        }
                    }
                },
                emphasis: {
                    itemStyle: {
                        color: '#5d83ff',
                        borderColor: '#fff',
                        borderWidth: 2,
                        opacity: 1
                    },
                },
                smooth: true,
            }
        });

        this.option = {
            color: colorArr,
            grid: {
                top: 200,
                left: 100,
                right: 100,
                bottom: 40,
                containLabel: true //轴上的数值
            },
            xAxis: {
                type: 'category',
                data: this.dataMap,
                boundaryGap: true,
                axisTick: {
                    show: false
                },
                axisLabel: {
                    margin: 40,
                    fontSize: 36,
                    formatter: '{value}'
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#E2E5FF',
                    }
                },
            },
            yAxis: {
                type: 'value',
                max: 100,
                min: 60,
                axisLabel: {
                    margin: 40,
                    fontSize: 36,
                    formatter: '{value} %'
                },
                axisTick: {
                    show: true
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#E2E5FF'
                    }
                },
            },
            legend: {
                show: true,
                data: Array.isArray(this.allData) ? this.allData.map(item => item.name) : [],
                top: 80,
                textStyle: {
                    color: '#E2E5FF',
                    fontSize: 32
                }
            },
            series: series
        };

        myChart.setOption(this.option, true);

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

<style lang="scss" scoped>
.sn-container {
left: 3%;
top: 4%;
width: 94%;
height: 91%;
.chartsdom {
    width: 100%;
    height: 95%;
}

.sn-title {
    cursor: pointer;
    position: absolute;
    height: 50px;
    font-size: 50px;
    color: #7becff;
    line-height: 50px;
    padding: 0 0 0 30px;
    left: 26px;
    right: 10px;
    top: 30px;

    &: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: 0;
    
    .chartsdom {
        width: 100%;
        height: 88vh;
        // min-height: 880px; /* 确保最小高度 */
        }
    }
}

.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;
        background: url(../../assets/images/bj.jpg) no-repeat;
        // background: url(../../assets/images/brand/bg.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;
                }
            }
            }
        }
    }

    .divider {
    position: absolute;
    left: 50px;
    top: 3253px;
    width: 90%;
    height: 50px;
    width: 300px;
    border: none;
    background: transparent;
    }

}
}	
</style>
