<template>
    <el-container class="dashboard">
        <el-header class="header">
            <div style="font-weight: bold;">6车间生产数据大看板</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%" :gutter="10">
                        <el-col :xs="24" :md="24">
                            <div class="box">
                                <div class="boxtitle">
                                    <div class="boxlabel">今日任务</div>
                                </div>
                                <div style="height: 4px;"></div>
                                <div class="boxmain bigdata border">
                                    <el-row>
                                        <el-col :span="12">
                                            <div
                                                style="display:flex;align-items:center;justify-content:space-around;border: 1px solid transparent;margin-top:6%;">
                                                <div>ZB2</div>
                                                <div
                                                    style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont;">
                                                    130</div>
                                            </div>
                                        </el-col>
                                        <el-col :span="12">
                                            <div
                                                style="display:flex;align-items:center;justify-content:space-around;border: 1px solid transparent;margin-top:6%">
                                                <div>ZJ2</div>
                                                <div
                                                    style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont;">
                                                    130</div>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </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">
                                    <div class="wrapper" @mouseover="mouseOver" @mouseout="mouseOut"> 
                                        <table class="totall"> 
                                            <tr class="title">
                                                <th v-for="itemx in liData" :key="itemx">{{ itemx }}</th>  
                                            </tr>
                                        </table>        
                                        <div ref="moocBox" class="wrapper2">          
                                            <table :class="{ marquee_top: animate }">              
                                                <tr v-for="(itemy,index) in listData" class="rollData" ref="con1" :key="itemy">                  
                                                    <td>{{ index+1 }}</td>                 
                                                    <td v-for="(itemz,index2) in itemy" :key="itemz">
                                                        <el-progress v-if="index2==3" :text-inside="true" :stroke-width="14" :percentage="itemz"
                                                        :status="getStatus(itemz)"/>
                                                        <span v-else-if="index2==5">
                                                            <el-tag type="warning" effect="light">{{ itemz }}</el-tag>
                                                        </span>
                                                        <span v-else>{{ itemz }}</span>
                                                    </td>                 
                                                </tr>              
                                                <tr v-for="(itemy,index) in listData" class="rollData" ref="con2" :key="itemy">                  
                                                    <td>{{ index+1 }}</td>                 
                                                    <td v-for="(itemz,index2) in itemy" :key="itemz">
                                                        <el-progress v-if="index2==3" :text-inside="true" :stroke-width="14" :percentage="itemz"
                                                        :status="getStatus(itemz)"/>
                                                        <span v-else-if="index2==5">
                                                            <el-tag type="warning" effect="light">{{ itemz }}</el-tag>
                                                        </span>
                                                        <span v-else>{{ itemz }}</span>
                                                    </td>                                
                                                </tr>             
                                            </table>          
                                        </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">
                            <table border="0" cellspacing="16">
                                <tbody>
                                    <tr>
                                        <th>序号</th>
                                        <th>产品名称</th>
                                        <th>型号</th>
                                        <th>计划周期</th>
                                        <th>完成进度</th>
                                        <th>产量</th>
                                        <th>状态</th>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <th>光纤预制管</th>
                                        <td>8098</td>
                                        <td>19.80%</td>
                                        <td><el-progress :text-inside="true" :stroke-width="14" :percentage="100"
                                                status="green" /></td>
                                        <td>368</td>
                                        <td><el-tag type="" effect="light">已完成</el-tag></td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <th>光纤预制管</th>
                                        <td>7506</td>
                                        <td>6.70%</td>
                                        <td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
                                                status="success" /></td>
                                        <td>339</td>
                                        <td><el-tag type="warning" effect="light">生产中</el-tag></td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <th>光纤预制管</th>
                                        <td>3261</td>
                                        <td>32.30%</td>
                                        <td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
                                                status="warning" /></td>
                                        <td>325</td>
                                        <td><el-tag type="warning" effect="light">生产中</el-tag></td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <th>光纤预制管</th>
                                        <td>1993</td>
                                        <td> 201%</td>
                                        <td><el-progress :text-inside="true" :stroke-width="14" :percentage="30"
                                                status="exception" /></td>
                                        <td> 199</td>
                                        <td><el-tag type="warning" effect="light">生产中</el-tag></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div style="height: 1%;"></div>
            <el-row style="height:39%" :gutter="10">
                <el-col :xs="24" :md="12">
                    <div class="box">
                        <div class="boxtitle">
                            <div class="boxlabel">本月生产统计</div>
                        </div>
                        <div class="boxmain" id="chart1">
                        </div>
                    </div>
                </el-col>
                <el-col :xs="24" :md="12">
                    <div class="box">
                        <div class="boxtitle">
                            <div class="boxlabel">本月交付统计</div>
                        </div>
                        <div class="boxmain" id="chart2">
                        </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(1,235,239)',
                        name: '棒',
                        itemStyle: {
                            // color:'rgb(1,235,239)',
                            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'
                        }
                    }, {
                        name: '管',
                        textStyle: {
                            color: '#fff'
                        }
                    }],
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgb(250,205,0)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(254,129,0)'
                            }
                        ])
                    }
                },
                toolbox: {
                    feature: {
                        // saveAsImage: {}
                    }
                },
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: true,
                        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日'],
                        nameTextStyle: {
                            color: '#ffffff'
                        },
                        axisLabel: {
                            color: '#ffffff'
                        },
                    }
                ],
                yAxis: [
                    {
                        name: "生产统计",
                        type: 'value',
                        nameTextStyle: {
                            color: '#ffffff'
                        },
                        axisLabel: {
                            color: '#ffffff'
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                type: 'dashed', //y轴分割线类型
                                color: 'rgba(102,102,102,0.9)',
                                width: 1,
                            },
                        },
                    }
                ],
                series: [
                    {
                        name: '棒',
                        type: 'bar',
                        stack: 'Total',
                        smooth: true,
                        lineStyle: {
                            width: 1, color: 'rgb(1,235,239)'
                        },

                        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)'
                                }
                            ])
                        },
                        itemStyle: {
                            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: 'insideTop',
                            color:'#666'
                        },
                        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]
                    },
                    {
                        name: '管',
                        type: 'bar',
                        stack: 'Total',
                        smooth: true,
                        lineStyle: {
                            width: 0, color: 'rgb(250,205,0)'
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgb(250,205,0)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(254,129,0)'
                                }
                            ])
                        },
                        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)'
                                }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        label: {
                            show: true,
                            position: 'insideTop',
                            color:'#666',
                            font:'10'
                        },
                        data:[100, 202, 101, 204, 190, 140, 150,100, 132, 161, 164, 190, 240, 150,110, 202, 100, 164, 90, 240, 150,340, 232, 101, 164, 190, 240, 250, 240, 150]
                    },
                ]
            },
            
            taskBoard: {
                header: ['姓名', '岗位', '班次', '状态'],
                headerBGC: '#0a3f44',
                data: [
                    ['小王', '成型人', '白班', '到岗'],
                    ['小李', '成型人', '白班', '到岗'],
                    ['小张', '成型人', '白班', '未到岗'],
                ],
                index: true,
                columnWidth: [50],
                align: ['center'],
            },
            liData: ['序号','产品名称', '型号', '计划周期', '完成进度', '产量', '状态'], 
            listData: [
                ["光纤预制管A", "8098", "19.80%", 100,"368",'已完成'],
                ["光纤预制管B", "8098", "19.80%", 90,"368",'已完成'],
                ["光纤预制管C", "8098", "19.80%", 80,"368",'已完成'],
                ["光纤预制管D", "8098", "19.80%", 70,"368",'已完成'],
                ["光纤预制管E", "8098", "19.80%", 60,"368",'已完成'],
                ["光纤预制管F", "8098", "19.80%", 50,"368",'已完成'],
                ["光纤预制管G", "8098", "19.80%", 40,"368",'已完成'],
                ["光纤预制管H", "8098", "19.80%", 30,"368",'已完成'],
            ], 
            speed: 2000, 
            myScroll: null, 
            iliHeight: 30, 
            time: null, 
            delay: 20,
            tableData: [
                ['产品名称', '型号', '计划周期', '完成进度', '产量', '状态'],
                ['ZB2', 'xxx', '2023-11-01至2023-11-11', '70', '5000', '生产中'],
            ],
            taskBoard2: {
                header: ['产品名称', '型号', '计划周期', '完成进度', '产量', '状态', 'xx'],
                headerBGC: '#0a3f44',
                waitTime: 3000,
                rowNum: 8,
                columnWidth: [2, 1, 1, 1, 1, 1],
                data: [
                    ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3', '<el-progress :text-inside="true" :stroke-width="14" :percentage="100" status="green"/>', '行1列3', '行1列3', 'xx'],
                    ['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3', '行1列3', '行1列3', '行1列3', 'xx'],
                    ['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>', '行1列3', '行1列3', '行1列3', 'xx'],
                    ['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3', '行1列3', '行1列3', '行1列3', 'xx'],
                    ['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3', '行1列3', '行1列3', '行1列3', 'xx'],
                    ['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3', '行1列3', '行1列3', '行1列3', 'xx'],
                    ['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>', '行1列3', '行1列3', '行1列3', 'xx'],
                    ['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3', '行1列3', '行1列3', '行1列3', 'xx'],
                    ['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3', '行1列3', '行1列3', '行1列3', 'xx'],
                    ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
                    ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
                    ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
                    ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
                    ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
                ],
                index: true,
                columnWidth: [50],
                align: ['center'],
                chartInterval1: null,
                chartInterval2: null,
                chartInterval3: null
            },
        }
    },
    mounted() {
        this.myScroll = setInterval(() => {
            this.scrollUp();
        }, this.speed);
        let chart1Option = deepCopy(this.basicOption)
        this.setChart("chart1", chart1Option);
        let chart2Option = deepCopy(this.basicOption)
        chart2Option.yAxis[0].name = '交付统计';
        chart2Option.series[0].type = 'line';
        chart2Option.series[1].type = 'line';
        this.setChart("chart2", chart2Option)
        let chart3Option = {
            backgroundColor: '',
            legend: {
                top: 'bottom'
            },
            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: [
                        { value: 40, name: 'rose 1' },
                        { value: 38, name: 'rose 2' },
                        { value: 32, name: 'rose 3' },
                        { value: 30, name: 'rose 4' },
                        { value: 28, name: 'rose 5' },
                        { value: 26, name: 'rose 6' },
                        { value: 22, name: 'rose 7' },
                        { value: 18, name: 'rose 8' }
                    ]
                }
            ]
        };
        this.setChart("chart3", chart3Option)
    },
    methods: {
        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)
        },
        //滚动
        scrollUp() {
            // console.log(this.$refs.moocBox.scrollTop)
            // console.log(this.$refs.moocBox.scrollHeight)
            if (this.$refs.moocBox.scrollTop >= this.$refs.moocBox.scrollHeight / 2) {
                //判断条件是否达到临界
                this.$refs.moocBox.scrollTop = 0;
            } else {
                this.$refs.moocBox.scrollTop=this.$refs.moocBox.scrollTop+40;
            }
        }, // 鼠标滑过暂停滚动
        mouseOver() {
            clearInterval(this.myScroll);
        }, //鼠标移开重新滚动
        mouseOut() {
            this.myScroll = setInterval(() => { 
                this.scrollUp();
            }, 
            this.speed);
        },
    },
    beforeDestoryed() {
        clearInterval(myScroll); 
        this.myScroll = null;
    },
}
</script>
<style scoped>
    .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%;
    }

    .boxlabel {
        margin-left: 6px;
        font-size: 18px; 
        margin-top: 6px
    }

    .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;
    }
    .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>