<template>
    <el-container class="dashboard">
        <el-header class="header">
            <div style="font-weight: bold; font-family:'myfont';font-size:32px">10车间生产数据看板</div>
            <div style="font-size: 14px;margin-top:18px">{{currentDay}}  {{ currentTime }}</div>
        </el-header>
        <el-main>
            <el-row style="height: 60%" :gutter="10">
                <el-col :xs="24" :md="10" style="height: 100%;">
                    <el-row style="height: 38%;" :gutter="10">
                        <el-col :xs="8" :md="8">
                            <div class="box">
                                <div class="boxtitle bgimg">
                                    <div class="boxlabel">今日任务</div>
                                </div>
                                <div style="height: 4px;"></div>
                                <div class="boxmain flex_center bigdata border">
                                    <span>ZB2</span>
                                    <span style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">130</span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :xs="8" :md="8">
                            <div class="box">
                                <div class="boxtitle bgimg">
                                    <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">130</span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :xs="8" :md="8">
                            <div class="box">
                                <div class="boxtitle bgimg">
                                    <div class="boxlabel">累计合格</div>
                                </div>
                                <div style="height: 4px;"></div>
                                <div class="boxmain flex_center bigdata border">
                                    <span>ZT2</span>
                                    <span style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">130</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <div style="height:2%"></div>
                    <el-row style="height:60%">
                        <div class="box">
                                <div class="boxtitle">
                                    <div class="boxlabel">人员到岗
                                    </div>
                                </div>
                                <div style="height: 2px;"></div>
                                <div class="boxmain" id="scrollContainer1">
                                    <scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1" 
                                        :rowData="listData1test" :titleData="liData1" :refValue="refValue1"
                                    ></scScrollTavle>
                                </div>
                            </div>
                    </el-row>
                </el-col>
                <el-col :xs="24" :md="14" style="height: 100%;">
                    <div class="box" :dur="20">
                        <div class="boxtitle">
                            <div class="boxlabel">任务进度</div>
                        </div>
                        <div style="height: 2px;"></div>
                        <div class="boxmain" id="scrollContainer2">
                            <scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2" 
                            :rowData="listData2test" :titleData="liData2" :refValue="refValue2"></scScrollTavle>
                        </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 class="boxlabel">全年生产统计</div>
                        </div>
                        <div class="boxmain" id="chart1">
                        </div>
                    </div>
                </el-col>
                <el-col :xs="24" :md="9">
                    <div class="box">
                        <div class="boxtitle">
                            <div class="boxlabel">本月合格率统计</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";
import scScrollTavle from '@/components/scScrollTable.vue';
function deepCopy(obj) {
    return JSON.parse(JSON.stringify(obj));
}
export default {
    components: {scScrollTavle},
    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: '5%',
                    right: '5%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: true,
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        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: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        label: {
                            show: true,
                            position: 'insideTop',
                            color:'#ffffff',
                            fontSize:8
                        },
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgb(1,235,239)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(5, 158, 163)'
                                }])
                        },
                        data: [140, 232, 101, 264, 90, 340, 250, 232, 101, 264, 90, 340]
                    },
                    {
                        name: '管',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: 30,
                        emphasis: {
                            focus: 'series'
                        },
                        label: {
                            show: true,
                            position: 'insideTop',
                            color:'#000'
                        },
                        itemStyle: {
                            borderRadius: [5, 5, 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: [120, 282, 111, 234, 220, 340, 310, 282, 111, 234, 220, 340]
                    },
                ]
            },
            containerHeight1:100,
            containerHeight2:100,
            table1Visible:false,
            table2Visible:false,
            refValue1:'moocBox1',
            refValue2:'moocBox2',
            liData1: ['姓名', '岗位', '班次', '状态'],
            listData1test: [
                [{elType:'primary',value:"王丽丽"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
                [{elType:'primary',value:"张小飞"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
                [{elType:'primary',value:"李青"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
                [{elType:'primary',value:"白梦遥"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
                [{elType:'primary',value:"于诗曼"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
                [{elType:'primary',value:"马亮德"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
                [{elType:'primary',value:"赵蒙斯"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
                [{elType:'primary',value:"钱广源"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
                [{elType:'primary',value:"孙蕾"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"未到岗"}],
            ],
            liData2: ['序号','产品名称', '型号',  '计划开始时间', '计划结束时间','完成进度', '产量','状态'], 
            listData2test: [
                [{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:100},{elType:'primary',value:368},{elType:'tag',value:40}],
                [{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:100},{elType:'primary',value:368},{elType:'tag',value:40}],
                [{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:90},{elType:'primary',value:368},{elType:'tag',value:40}],
                [{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:100},{elType:'primary',value:368},{elType:'tag',value:30}],
                [{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
                [{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
                [{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
                [{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
                [{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
             ],
            speed: 2000, 
            myScroll: null,
            iliHeight: 30, 
            time: null, 
            delay: 20,
            start_date:'',
            end_date:'',
            
            dayInterval:null,
            chartInterval1: null,
            chartInterval2: null,
            chartInterval3: null,
            stateOption:{
                30:'生产中',
                40:'已完成'
            },
            currentTime:'',
            currentDay:'',
            
        }
    },
    mounted() {
        //表格table1的显示
        this.containerHeight1 = document.getElementById('scrollContainer1').clientHeight;
        this.table1Visible = true;
        //表格table2的显示
        this.containerHeight2 = document.getElementById('scrollContainer2').clientHeight;
        this.table2Visible = true;
        
        let chart1Option = deepCopy(this.basicOption)
        let chart1 = this.setChart("chart1", chart1Option);
        
        let index1 = 0
        this.chartInterval1 = setInterval(function () {
            if (index1 < chart1Option.series[0].data.length) {
                chart1.dispatchAction({ type: 'downplay', seriesIndex: 0 });
                chart1.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index1 });
                chart1.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index1 });
                index1++;
            } else {
                index1 = 0;
            }
        }, 3000);
        let chart2Option = deepCopy(this.basicOption);
        chart2Option.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'
            },
        };
        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.series=[{
            name: '合格率',
            type: 'line',
            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)'
                    }
                ])
            },
            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: [40, 60, 52, 64, 70, 53, 50,40, 32, 62, 64, 90, 50, 50,56, 49, 66, 64, 70, 58, 50,40, 59, 60, 64, 90, 40, 50, 70, 50]
            }];
        let chart2 = this.setChart("chart2", chart2Option);
        let index2 = 0
        this.chartInterval2 = setInterval(function () {
            if (index2 < chart2Option.series[0].data.length) {
                chart2.dispatchAction({ type: 'downplay', seriesIndex: 0 });
                chart2.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index2 });
                chart2.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index2 });
                index2++;
            } else {
                index2 = 0;
            }
        }, 3000);

        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)'
                    }
                }
                }
            ]
            };
        let chart3 = this.setChart("chart3", chart3Option);
        let index3 = 0
        this.chartInterval3 = setInterval(function () {
            if (index3 < chart3Option.series[0].data.length) {
                chart3.dispatchAction({ type: 'downplay', seriesIndex: 0 });
                chart3.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index3 });
                chart3.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index3 });
                index3++;
            } else {
                index3 = 0;
            }
        }, 3000);
        this.showTime()
        this.dayInterval = setInterval(()=>{
            this.showTime()
        },1000)
    },
    methods: {
        showTime(){
            this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
            this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
        },
        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)
            return myChart
        },
        //任务进度
        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:that.start_date,end_date:that.end_date,dept_name: "10车间"},
            };
            //车间生产按月统计 1月1号-----12月1号
            that.$API.bi.dataset.exec.req('lineMonth', obj).then((res1) => {
                console.log('车间生产按月统计:',res1);
                debugger;
            });
            let obj2 ={
                query: {start_date:that.start_date,end_date:that.end_date,dept_name: "10车间"},
            };
            //生产车间按日统计   本月合格率统计&昨日合格统计 ///11月1号-----11月30号
            that.$API.bi.dataset.exec.req('lineDay', obj2).then((res3) => {
                console.log('生产车间按日统计:',res3);
                debugger;
            });
        },
    }
}
</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%;
    }
    .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;
    }

    .title{
        height: 40px; 
        line-height: 40px; 
        text-align: center;
    }
    .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>