zncx-ui/src/views/PassRate.vue

<!--
 描述: 合格率
 作者: 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">{{ 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/index";
import { timeFormateWeek } from "@/utils/timeFormate";

export default {
name: "scrollArc",
data() {
    return {
        name: '',
        option: null,
        number: 0, // 播放所在下标
        timer: null,
        xData: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'],
        data: [1,1,1,1,1,1],
        allData: [],
        time: '',
        timelineData: []
    }
},
watch: {
    name(newVal, oldVal){
      if (newVal && newVal !== oldVal) {
        this.loadData(newVal);
        this.$nextTick(() => {
          this.getEchart();
        })
      }
    }
},
async mounted() {
    await this.getData();

    screenSize(this.$refs.editor);

    this.time = timeFormateWeek(new Date());
},
methods: {
    /** 获取列表数据 */
    async getData() {
        this.timelineData = [];
        await getPassRate().then(res => {
            if (res.data) {
                Object.keys(res.data).forEach((key) => {
                    this.allData = res.data;
                    // this.timelineData.push(key)
                })
                // this.name = this.timelineData[0];
                this.name = '智能线';
            }
        }).catch();
    },
    /** 数据加载处理 */
    loadData(val) {
        console.log(this.allData)
        let list = [];
        this.xData.forEach((item) => {
            Object.keys(this.allData).forEach((key) => {
                if (item === key) {
                    console.log(key)
                    list.push(this.allData[key]['产量'] !== 0 ? Number(this.allData[key]['合格率']?.split('%')[0]) : null)
                }
            })
        })

        this.data = list;
    },
    getEchart() {
        let myChart = echarts.init(document.getElementById('chart_arc'));
        this.option = {
            // color: ['#5d83ff'],
            timeline: {
            axisType: 'category',
            autoPlay: false,
            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,
            }
          },
            color: ['#ffeb7b'],
            grid: {
            top: 160,
            left: 100,
            right: 100,
            bottom: 40,
            containLabel: true //轴上的数值
            },
            xAxis: {
                type: 'category',
                data: this.xData,
                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'
                    }
                },
            },
            series: [{
                name: '合格率',
                type: 'line',
                data: this.data,
                symbolSize: 16,
                lineStyle: {
                    width: 8
                },
                itemStyle: {
                    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,
            }]
        };
        // let _this = this;
        // myChart.on('timelinechanged', function (params) {
        //     _this.name = _this.timelineData[params.currentIndex];
        // })

        myChart.setOption(this.option, true);

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

        this.timer = setInterval(() => {
            this.getData();
        }, 1800000)

    }
},
beforeDestroy() {
    clearInterval(this.timer);
}
};
</script>

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

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

.sn-body {
    top: 70px;
}
}

.home-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
.wrap {
    transform-origin: 0px 0px 0px;
    background: url(../assets/img/bj.jpg) no-repeat;
    // background: url(../assets/img/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/img/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/img/brand/head_bg2.png) no-repeat top center;
    // background: url(../assets/img/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>