<template>
    <el-container class="dashboard">
        <el-header class="header">
            <div style="font-weight: bold; font-family:'myfont';font-size:32px">7车间生产数据大看板</div>
            <div style="font-size: 14px;margin-top:18px">2023-11-14 13:50</div>
        </el-header>
        <el-main>
            <el-row style="height: 60%" :gutter="10">
                <el-col :xs="24" :md="10">
                    <el-row style="height: 29%">
                        <el-col>
                            <div class="box">
                                <div class="boxtitle">
                                    <div class="boxlabel">今日任务</div>
                                </div>
                                <div style="height: 4px;"></div>
                                <div class="boxmain flex_center bigdata border">
                                    <span>ZJ2</span>
                                    <span
                                        style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">600</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <div style="height: 1%;"></div>
                    <el-row style="height:70%">
                        <el-col>
                            <div class="box">
                                <div class="boxtitle">
                                    <div class="boxlabel">任务进度</div>
                                </div>
                                <div style="height: 4px;"></div>
                                <div class="boxmain" id="scrollContainer1">
                                    <div class="wrapper" id="scrollWrapper1" @mouseover="mouseOver1" @mouseout="mouseOut1"> 
                                        <table class="totall"> 
                                            <tr class="title">
                                                <th v-for="itemx in liData1" :key="itemx">{{ itemx }}</th>  
                                            </tr>
                                        </table>        
                                        <div id="scrollBody1" ref="moocBox1" style="overflow:scroll">          
                                            <div>          
                                                <table :class="{ marquee_top: animate }">              
                                                    <tr v-for="(itemy,index) in listData1" class="rollData" ref="con1" :key="itemy">  
                                                        <td>{{ index+1 }}</td>                  
                                                        <td v-for="(itemz,index2) in itemy" :key="itemz">
                                                            <el-progress v-if="index2==1" :text-inside="true" :stroke-width="14" :percentage="itemz"
                                                            :status="getStatus(itemz)"/>
                                                            <el-tag v-else-if="index2==3" :type="getType(itemz)">{{ stateOption[itemz] }}</el-tag>
                                                            <span v-else>{{ itemz }}</span>
                                                        </td>                 
                                                    </tr>                         
                                                </table>   
                                                <table :class="{ marquee_top: animate }" v-show="scrollVivible1">              
                                                    <tr v-for="(itemy,index) in listData1" class="rollData" ref="con1" :key="itemy">
                                                        <td>{{ index+1 }}</td>                      
                                                        <td v-for="(itemz,index2) in itemy" :key="itemz">
                                                            <el-progress v-if="index2==1" :text-inside="true" :stroke-width="14" :percentage="itemz"
                                                            :status="getStatus(itemz)"/>
                                                            <el-tag v-else-if="index2==3" :type="getType(itemz)">{{ stateOption[itemz] }}</el-tag>
                                                            <span v-else>{{ itemz }}</span>
                                                        </td>                 
                                                    </tr>                          
                                                </table>          
                                            </div>          
                                        </div>      
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :xs="24" :md="14">
                    <div class="box">
                        <div class="boxtitle">
                            <div class="boxlabel">生产线</div>
                        </div>
                        <div style="height: 4px;"></div>
                        <div class="boxmain" id="scrollContainer2">
                            <div class="wrapper" id="scrollWrapper2" @mouseover="mouseOver2" @mouseout="mouseOut2" 
                                style="overflow: hidden;"> 
                                <table class="totall"> 
                                    <tr class="title">
                                        <th v-for="itemx in liData" :key="itemx">{{ itemx }}</th>  
                                    </tr>
                                </table>    
                                <div id="scrollBody2"  ref="moocBox2" style="overflow:scroll">
                                    <div>          
                                        <table :class="{ marquee_top: animate }">              
                                            <tr v-for="itemy in listData" class="rollData" ref="con1" :key="itemy">                    
                                                <td v-for="(itemz,index2) in itemy" :key="itemz">
                                                    <el-tag v-if="index2==6" :type="getType(itemz)">{{ stateOption[itemz] }}</el-tag>
                                                    <span v-else>{{ itemz }}</span>
                                                </td>                 
                                            </tr>                         
                                        </table>   
                                        <table :class="{ marquee_top: animate }" v-show="scrollVivible2">              
                                            <tr v-for="itemy in listData" class="rollData" ref="con1" :key="itemy">                    
                                                <td v-for="(itemz,index2) in itemy" :key="itemz">
                                                    <el-tag v-if="index2==6" :type="getType(itemz)">{{ stateOption[itemz] }}</el-tag>
                                                    <span v-else>{{ itemz }}</span>
                                                </td>                 
                                            </tr>                          
                                        </table>          
                                    </div>  
                                </div>     
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div style="height: 1%"></div>
            <el-row style="height:39%" :gutter="10">
                <el-col :xs="24" :md="9">
                    <div class="box">
                        <div class="boxtitle">
                            <div style="margin-left: 6px;font-size: 18px; margin-top: 6px">本月生产统计</div>
                        </div>
                        <div class="boxmain" id="chart1">
                        </div>
                    </div>
                </el-col>
                <el-col :xs="24" :md="9">
                    <div class="box">
                        <div class="boxtitle">
                            <div style="margin-left: 6px; font-size: 18px; margin-top: 6px">本月合格率统计</div>
                        </div>
                        <div class="boxmain" id="chart2">
                        </div>
                    </div>
                </el-col>
                <el-col :xs="24" :md="6">
                    <div class="box">
                        <div class="boxtitle">
                            <div style="margin-left: 6px; font-size: 18px; margin-top: 6px">昨日合格统计</div>
                        </div>
                        <div class="boxmain" id="chart3">
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
import * as echarts from "echarts";
function deepCopy(obj) {
    return JSON.parse(JSON.stringify(obj));
}
export default {
    data() {
        return {
            basicOption: {
                backgroundColor: '',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    icon: "stack",
                    right: 0,
                    data: [{
                        backgroundColor: 'rgb(250,205,0)',
                        name: '合格率',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgb(250,205,0)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(254,129,0)'
                                }
                            ])
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    }],
                },
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: true,
                    data: ['1号炉','2号炉', '3号炉', '4号炉', '5号炉', '6号炉', '7号炉', '8号炉'],
                    nameTextStyle: {
                        color: '#ffffff'
                    },
                    axisLabel: {
                        color: '#ffffff'
                    },
                },
                yAxis: [
                    {
                        name: "生产统计",
                        type: 'value',
                        nameTextStyle: {
                            color: '#ffffff'
                        },
                        axisLabel: {
                            color: '#ffffff'
                        },
                        splitLine: {
                            show: false,
                        },
                    }
                ],
                series: [{
                    name: '合格率',
                    type: 'bar',
                    smooth: true,
                    lineStyle: {
                        width: 1, color: 'rgb(1,235,239)'
                    },
                    barWidth:30,
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgb(1,235,239)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(5, 158, 163)'
                            }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                        show: true,
                        position: 'top',
                        color:'#fff'
                    },
                    itemStyle: {
                        borderRadius: [2, 2, 0, 0],
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgb(250,205,0)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(254,129,0)'
                            }
                        ])
                    },
                    data: [140, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90, 340, 250, 340, 250]
                }]
            },
            taskBoard2: {
                header: ['炉号','产品名称', '型号', '规格', '最近产量','锅数','设备状态'],
                headerBGC: '#0a3f44',
                waitTime: 1000,
                rowNum: 7,
                columnWidth: [2, 1, 1, 1, 1, 1,1],
                data: [
                    ['1','光纤预制棒', 'JZ2','31/470', '120', '33', '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
                    ['2','光纤预制棒', 'JZ2','32/470', '125',  '26', '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
                    ['3','光纤预制棒', 'JZ2','33/470', '100',  '30',  '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
                    ['4','光纤预制棒', 'JZ2','31/470', '105',  '28',  '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
                    ['5','光纤预制棒', 'JZ2','37/470', '120',  '18',  '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
                    ['6','光纤预制棒', 'JZ2','33/470', '120', '24',  '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
                    ['7','光纤预制棒', 'JZ2','38/470', '120',  '29',  '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
                    ['8','光纤预制棒', 'JZ2','34/470', '120',  '25',  '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
                ],
                // index: true,
                columnWidth: [50],
                align: ['center'],
            },
            liData1: ['序号', '型号', '完成进度', '产量', '状态'], 
            listData1: [
                ["JZ2",  100, "368",40],
                ["JZ2",  90, "368",40],
                ["JZ2",  80, "368",30],
                ["JZ2",  70, "368",30],
                ["JZ2",  60, "368",40],
                ["JZ2",  50, "368",30],
                ["JZ2",  40, "368",30],
                ["JZ2",  30, "368",40],
            ], 
            liData: ['炉号','产品名称', '型号', '规格', '最近产量','锅数','设备状态'],
            listData: [
                ["1","光纤预制管A", "ZJ2", '30/268', 100, 30, 40],
                ["2","光纤预制管B", "ZJ2", '40/368',  90, 30, 30],
                ["3","光纤预制管C", "ZJ2", '36/470',  80, 30, 30],
                ["4","光纤预制管D", "ZJ2", '35/300',  70, 30, 40],
                ["5","光纤预制管E", "ZJ2", '30/268',  60, 30, 30],
                ["6","光纤预制管F", "ZJ2", '30/268',  50, 30, 40],
                ["7","光纤预制管G", "ZJ2", '30/268',  40, 30, 30],
                ["8","光纤预制管H", "ZJ2", '30/268',  30, 30, 30],
            ], 
            speed: 2000, 
            myScroll1: null, 
            myScroll2: null, 
            iliHeight: 30, 
            time: null, 
            delay: 20,
            scrollVivible1:true,
            scrollVivible2:true,
            stateOption:{
                30:'生产中',
                40:'已完成'
            }
        }
    },
    mounted() {
        let Container1 = document.getElementById('scrollContainer1').clientHeight;
        let tableHeight1 = Container1-40;
        document.getElementById('scrollWrapper1').style.height =  Container1+'px';
        document.getElementById('scrollBody1').style.height =  tableHeight1+'px';
        let scrollHeight1 = this.$refs.moocBox1.scrollHeight/2;
        if(tableHeight1>scrollHeight1){
            this.scrollVivible1 = false;
        }else{
            this.scrollVivible1 = true;
                this.myScroll1 = setInterval(() => {
                this.scrollUp1();
            }, this.speed);
        }

        let Container2 = document.getElementById('scrollContainer2').clientHeight;
        let tableHeight2 = Container2-40;
        document.getElementById('scrollWrapper2').style.height =  Container2+'px';
        document.getElementById('scrollBody2').style.height =  tableHeight2+'px';
        let scrollHeight2 = this.$refs.moocBox2.scrollHeight/2;
        if(tableHeight2>scrollHeight2){
            this.scrollVivible2 = false;
        }else{
            this.scrollVivible2 = true;
                this.myScroll2 = setInterval(() => {
                this.scrollUp2();
            }, this.speed);
        }
        let chart1Option = deepCopy(this.basicOption)
        this.setChart("chart1", chart1Option);
        let chart2Option = deepCopy(this.basicOption)
        chart2Option.legend = {
            icon: "stack",
            right: 0,
            data: [{
                backgroundColor: 'rgb(250,205,0)',
                name: '合格率',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(1,235,239)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(5, 158, 163)'
                        }
                    ])
                },
                textStyle: {
                    color: '#fff'
                }
            }],
        };
        chart2Option.xAxis.data= ['1日','2日', '3日', '4日', '5日', '6日', '7日', '8日','9日','10日', '11日', '12日', '13日',  '14日', '15日', '16日', '17日', '18日','19日','20日', '21日', '22日', '23日',  '24日', '25日', '26日', '27日', '28日', '29日', '30日'];
        chart2Option.yAxis[0].name = '合格率(%)';
        chart2Option.series[0].type = 'line';
        chart2Option.series[0].data = ['40','60','70','56','49','69','50','60','70','56','30','69','50','60','70','56','49','69','50','60','40','56','49','69','50','70','56','49','80','50'];
        this.setChart("chart2", chart2Option)
        let chart3Option ={
            backgroundColor: '',
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top:'bottom'
            },
            series: [
                {
                name: '完成率',
                type: 'pie',
                radius: '50%',
                itemStyle: {
                    borderRadius: 2
                },
                center: ['50%', '45%'],
                data: [
                    { value: 1, name: '椭圆弯曲' },
                    { value: 3, name: '大小头' },
                    { value: 0, name: '偏壁' },
                    { value: 5, name: '结石气线' },
                    { value: 200, name: '合格' },
                ],
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
            };
        this.setChart("chart3", chart3Option)
    },
    methods: {
        getType(type){
            if(type==30){
                return "primary"
            }else if(type==40){
                return "success"
            }
        },
        getStatus(status){
            if(status==100){
                return "success"
            }else if(status>=80){
                return "primary"
            }else if(status>=60){
                return "warning"
            }else{
                return "exception"
            }
        },
        setChart(name, option = null) {
            // 根据name 渲染数据, option需填写，否则option为模拟数据
            var myChart = echarts.getInstanceByDom(document.getElementById(name));
            if (myChart == undefined) {
                myChart = echarts.init(document.getElementById(name), 'dark', { renderer: 'svg' });
            }
            if (option == null) {
                option = Object.assign({}, this.basicOption)
            }
            setTimeout(() => {
                try {
                    myChart.setOption(option);
                } catch (error) { }
            }, 500)
        },
        //任务进度
        getMtask(){
            let that = this;
            let obj ={};
            that.$API.pm.mtask.list.req(obj).then((res) => {
                console.log('任务进度:',res);
                debugger;
            });
        },
        //生产线
        getProductLine(){
            let that = this;
            let obj ={
                query: {start_date:this.start_date,end_date:this.end_date,dept_name: "7车间"},
            };
            let obj1 ={
                query: {start_date:this.start_date,end_date:this.end_date},
            };
            //7车间生产线
            that.$API.bi.dataset.exec.req('linedept7').then((res1) => {
                console.log('7车间生产线:',res1);
                debugger;
            });
            //7车间生产按炉统计
            that.$API.bi.dataset.exec.req('stoveStatics', obj1).then((res2) => {
                console.log('7车间生产按炉统计:',res2);
                debugger;
            });
            //生产车间按日统计   本月合格率统计&昨日合格统计
            that.$API.bi.dataset.exec.req('lineDay', obj).then((res3) => {
                console.log('生产车间按日统计:',res3);
                debugger;
            });
        },
        //滚动
        scrollUp1() {
            let scrollTop = this.$refs.moocBox1.scrollTop;
            let scrollHeight = this.$refs.moocBox1.scrollHeight;
            if (scrollTop >=scrollHeight/2) {
                //判断条件是否达到临界
                this.$refs.moocBox1.scrollTop = 0;
            } else {
                this.$refs.moocBox1.scrollTop=scrollTop+40;
            }
        }, 
        // 鼠标滑过暂停滚动
        mouseOver1() {
            clearInterval(this.myScroll1);
        }, //鼠标移开重新滚动
        mouseOut1() {
            this.myScroll1 = setInterval(() => { 
                this.scrollUp1();
            }, 
            this.speed);
        },
        //滚动
        scrollUp2() {
            if (this.$refs.moocBox2.scrollTop >= this.$refs.moocBox2.scrollHeight / 2) {
                //判断条件是否达到临界
                this.$refs.moocBox2.scrollTop = 0;
            } else {
                this.$refs.moocBox2.scrollTop=this.$refs.moocBox2.scrollTop+40;
            }
        }, // 鼠标滑过暂停滚动
        mouseOver2() {
            clearInterval(this.myScroll2);
        }, //鼠标移开重新滚动
        mouseOut2() {
            this.myScroll2 = setInterval(() => { 
                this.scrollUp2();
            }, 
            this.speed);
        },
    },
    beforeDestoryed() {
        clearInterval(myScroll1); 
        clearInterval(myScroll2); 
        this.myScroll1 = null;
        this.myScroll2 = null;
    },
}
</script>
<style scoped>
    @font-face {
        font-family: 'myfont'; /* 字体名称 */
        src: url('../../style/youShe.ttf'); /* 字体文件相对路径 */
    }
    .dashboard {
        background-image: url("https://cdn-upload.datav.aliyun.com/upload/download/1678758744858-EWBrlDVf.jpg");
        color: #fff;
        font-family: "Microsoft Yahei" !important;
    }
    .header {
        background: url("/public/img/photon_header.png");
        border-bottom: none;
        background-size: 100% 100%;
        font-size: 26px;
        display: block;
        height: 80px;
        color: rgb(149, 255, 255);
        font-family: 'Microsoft Yahei';
        text-align: center;
        padding: 12px 0px;
    }.box {
        background: rgba(10, 63, 68, 0.5);
        height: 100%;
    }
    .boxtitle {
        color: #fff;
        font-size: 16px;
        display: flex;
        height: 36px;
        background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335), rgba(11, 101, 140, 0.451));
    }
    .bgimg {
        background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
        background-size: 140% 100%;
    }
    .boxmain {
        height: calc(100% - 40px);
    }
    @media screen and (max-width: 800px) {
        .boxmain {
            height: 200px;
        }
    }
    .flex_center {
        display: flex;
        align-items: center;
        justify-content: center
    }

    .border {
        border: 1px dashed #49bcf7;
    }

    .bigdata {
        font-size: 24px;
    }
    .boxlabel {
        margin-left: 6px;
        font-size: 18px; 
        margin-top: 6px
    }
    .wrapper{
        overflow: hidden; 
        height: 220px;
    }
    .wrapper2{
        height: 180px; 
        overflow: hidden;
    }
    table {
        width: 100%;
        text-align: center;
        border-collapse: collapse;
        border-spacing: 0; 
        table-layout: fixed;
        width: 100%; 
    }
    .title{
        height: 40px; 
        line-height: 40px; 
        text-align: center;
    }
    table th {
        font-size: 14px;
        background: rgba(0, 0, 0, .1);
    }
    table td {
        font-size: 14px;
            height: 40px;
            text-align: center;
            color: rgba(255, 255, 255, .8);
    }
    table th,table td{
        padding: .1rem 0;
        border-bottom: none !important;
        background:none !important;
    }
    .marquee_top{
        transition: all 0.5s ease-in-out; 
        margin-top: -26px;
    }
    .totall{
        color: #fff;
        background-color: rgb(10, 63, 68);
    }
    .rollData{
        background-color: rgb(10, 39, 50);
    }
    .rollData:nth-of-type(2n+1){
        background-color: rgb(0, 59, 81);
    }
</style>