<template>
    <el-container class="dashboard">
        <el-header class="header">
            <div style="font-weight: bold; font-family:'myfont';font-size:32px">6车间生产数据大看板</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: 29%;width:100%" :gutter="10">
                        <div class="box" style="width: 100%;">
                            <div class="boxtitle">
                                <div class="boxlabel">今日任务</div>
                            </div>
                            <div style="height: 4px;"></div>
                            <div class="boxmain  bigdata border" style="overflow:scroll">
                                <div v-for="item in todayMtask" :key="item.id"
                                    style="width:50%;display:inline-block;height: 40px;line-height:40px;padding:0 20px;">
                                    <div
                                        style="display:flex;justify-content:space-between;border-bottom:1px dashed #eeeeee">
                                        <span style="font-size:12px">{{ item.material_out_name }}</span>
                                        <span
                                            style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">
                                            {{ item.count }}
                                        </span>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </el-row>
                    <div style="height: 1%;"></div>
                    <el-row style="height:70%">
                        <el-col style="height: 100%;">
                            <div class="box">
                                <div class="boxtitle">
                                    <div class="boxlabel">发货情况</div>
                                </div>
                                <div style="height: 4px;"></div>
                                <div class="boxmain" id="scrollContainer1">
                                    <scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1"
                                        :rowData="saleOutData" :titleData="liData1" :refValue="refValue1">
                                    </scScrollTavle>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :xs="24" :md="14" style="height: 100%;">
                    <div class="box">
                        <div class="boxtitle">
                            <div class="boxlabel">本周工序进度</div>
                        </div>
                        <div style="height: 4px;"></div>
                        <div class="boxmain" id="scrollContainer2">
                            <scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2" :rowData="processData"
                                :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="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";
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: '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: []
                    },
                    {
                        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: []
                    },
                ]
            },
            containerHeight1: 100,
            containerHeight2: 100,
            table1Visible: false,
            table2Visible: false,
            refValue1: 'moocBox1',
            refValue2: 'moocBox2',
            liData1: ['序号', '日期', '名称', '型号', '规格', '发货数量'],
            liData2: ['序号', '工序', '产品名称', '型号', '计划数量', '合格数量', '完成进度', '合格率'],
            todayMtask: [
                { material_out_name: '光纤预制棒|33*470|ZJ2|棒料成型', count: 300 },
                { material_out_name: '光纤预制棒|33*470|ZJ2|棒料成型', count: 300 },
                { material_out_name: '光纤预制棒|33*470|ZJ2|棒料成型', count: 300 },
                { material_out_name: '光纤预制棒|33*470|ZJ2|棒料成型', count: 300 },
            ],
            saleOutData: [],
            processData: [],
            time: null,
            start_date: '',
            end_date: '',
            scrollVivible: true,
            dayInterval: null,
            chartInterval1: null,
            chartInterval2: null,
            currentTime: '',
            currentDay: '',
            weekFirst: '',
            weekLast: '',
        }
    },
    mounted() {
        //表格table1的显示
        this.containerHeight1 = document.getElementById('scrollContainer1').clientHeight;
        this.table1Visible = true;
        //表格table2的显示
        this.containerHeight2 = document.getElementById('scrollContainer2').clientHeight;
        this.table2Visible = true;

        const ondDayTime = 86400000;
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let days = new Date(year, month, 0).getDate();
        this.days = days;
        let start_date = year + '-' + month + '-01';
        let lastDay = new Date(year, month, 0).getDate();
        let end_date = year + '-' + month + '-' + lastDay;
        this.start_date = start_date;
        this.end_date = end_date;
        this.today = year + '-' + month + '-' + day;
        let yesterday = new Date(date.getTime() - 24 * 60 * 60 * 1000);
        this.yesterday = yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate();
        let week = yesterday.getDay();//当前时间的week数
        console.log(week);
        let weekFirst = week - 1;//第一天对应的天数
        let weekLast = 7 - week;//最后一天对应的天数
        if (week == 0) {
            weekFirst = 6;
            weekLast = 0;//周日特殊处理
        } else {
            weekFirst = week - 1;
            weekLast = 7 - week;
        }
        let first = new Date(new Date(date.getTime() - (weekFirst * ondDayTime)));//本周周一
        let last = new Date(new Date(date.getTime() + (weekLast * ondDayTime)));//本周周日
        this.weekFirst = first.getFullYear() + '-' + (first.getMonth() + 1) + '-' + first.getDate();
        this.weekLast = last.getFullYear() + '-' + (last.getMonth() + 1) + '-' + last.getDate();
        this.getsaleOut();
        this.getMioItem();//发货情况
        // this.getTodayMtask();//今日任务
        //昨日工序进度
        this.getMtask();
        //时间
        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)
        },
        //今日任务
        getTodayMtask() {
            let that = this;
            let obj = {};
            obj.start_date = this.today;
            obj.end_date = this.today;
            obj.is_count_utask = true;
            obj.mgroup__belong_dept__name = '6车间';
            obj.page = 0;
            that.$API.pm.mtask.list.req(obj).then((res) => {
                that.todayMtask = res;
                console.log('今日任务:', res);
            });

            // that.$API.pm.utask.list.req(obj).then((res) => {
            //     that.todayMtask = res;
            //     console.log('今日任务:', res);
            // });
        },
        //发货情况
        getMioItem() {
            let that = this;
            let obj = {};
            obj.mio__type = 'sale_out';
            obj.mio__inout_date__gte = that.start_date;
            obj.mio__inout_date__lte = that.end_date;
            obj.page = 0;
            that.$API.inm.mioitem.list.req(obj).then((res) => {
                console.log(res);
                let saleOutData = [];
                res.forEach(item => {
                    let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {};
                    obj1.elType = 'primary';
                    obj1.value = item.inout_date;
                    obj2.elType = 'primary';
                    obj2.value = item.material_.name;
                    obj3.elType = 'primary';
                    obj3.value = item.material_.specification;
                    obj4.elType = 'primary';
                    obj4.value = item.material_.model;
                    obj5.elType = 'primary';
                    obj5.value = item.count;
                    arr.push(obj1);
                    arr.push(obj2);
                    arr.push(obj3);
                    arr.push(obj4);
                    arr.push(obj5);
                    saleOutData.push(arr);
                });
                this.saleOutData = saleOutData;
            });
        },
        //本周工序进展
        getMtask() {
            let that = this;
            let obj = {
                query: { start_date: this.weekFirst, end_date: this.weekLast, dept_name: "6车间" },
            };
            //生产车间按日统计
            that.$API.bi.dataset.exec.req('lineWeek', obj).then((res) => {
                let data = res.data2.ds0;
                if (data.length > 0) {
                    let processData = [];
                    data.forEach(item => {
                        let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {}, obj6 = {}, obj7 = {}, obj8 = {};
                        obj1.elType = 'primary';
                        obj1.value = item.工段;//工序
                        obj2.elType = 'primary';
                        obj2.value = item.物料名;
                        obj3.elType = 'primary';
                        obj3.value = item.型号;
                        obj4.elType = 'primary';
                        obj4.value = item.任务数;
                        obj5.elType = 'primary';
                        obj5.value = item.合格数;
                        obj6.elType = 'progress';
                        let jindu = Math.round((item.完成进度));
                        obj6.value = jindu;
                        obj7.elType = 'primary';
                        let rate = Math.round((item.合格率));
                        obj7.value = rate;
                        arr.push(obj1);
                        arr.push(obj2);
                        arr.push(obj3);
                        arr.push(obj4);
                        arr.push(obj5);
                        arr.push(obj6);
                        arr.push(obj7);
                        processData.push(arr);
                    });
                    console.log('processData', processData)
                    this.processData = processData;
                }

            })

            // let obj = {};
            // obj.start_date = this.weekFirst;
            // obj.end_date = this.weekLast;
            // obj.mgroup__belong_dept__name = '6车间';
            // obj.page = 0;
            // that.$API.pm.mtask.list.req(obj).then((res) => {
            //     console.log(res);
            //     if (res.length > 0) {
            //         let processData = [];
            //         res.forEach(item => {
            //             let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {}, obj6 = {}, obj7 = {}, obj8 = {};
            //             obj1.elType = 'primary';
            //             obj1.value = item.mgroup_name;//工序
            //             obj2.elType = 'primary';
            //             obj2.value = item.material_out_.name;
            //             obj3.elType = 'primary';
            //             obj3.value = item.material_out_.specification;
            //             obj4.elType = 'primary';
            //             obj4.value = item.count;
            //             obj5.elType = 'primary';
            //             obj5.value = item.count_ok;
            //             obj6.elType = 'progress';
            //             let jindu = Math.round((item.count_ok / item.count) * 100);
            //             obj6.value = jindu;
            //             obj7.elType = 'primary';
            //             let rate = 0;
            //             if (item.count_real != 0) {
            //                 rate = Math.round((item.count_ok / item.count_real) * 100);
            //             } else {
            //                 rate = 0;
            //             }
            //             obj7.value = rate;
            //             arr.push(obj1);
            //             arr.push(obj2);
            //             arr.push(obj3);
            //             arr.push(obj4);
            //             arr.push(obj5);
            //             arr.push(obj6);
            //             arr.push(obj7);
            //             processData.push(arr);

            //         });
            //         console.log('processData', processData)
            //         this.processData = processData;
            //     }
            //     debugger;
            // });
        },
        //本月生产统计&本月交付统计
        getsaleOut() {
            let that = this;
            let obj = {
                query: { start_date: this.start_date, end_date: this.end_date, dept_name: "6车间" },
            };
            let obj2 = {
                query: { start_date: this.start_date, end_date: this.end_date, mio_type: 'sale_out', material_id: '' },
            };
            //生产车间按日统计
            that.$API.bi.dataset.exec.req('productStatistic', obj).then((res1) => {
                console.log('生产车间按日统计:', res1);
                let list1 = res1.data2.ds0;
                let seriesData11 = [], seriesData12 = [], xAxisData1 = [], bangArr = [], guanArr = [];
                for (let i = 0; i < that.days; i++) {
                    let day = i + 1;
                    let text = day + '日';
                    xAxisData1[i] = text;
                    seriesData11.push(0);
                    seriesData12.push(0);
                }
                if (list1.length > 0) {
                    list1.forEach(item1 => {
                        if (item1.name == '光纤预制管') {
                            guanArr.push(item1)
                        } else {
                            bangArr.push(item1)
                        }
                    })
                }
                if (bangArr.length > 0) {
                    bangArr.forEach(item11 => {
                        let index11 = item11.日 - 1;
                        seriesData11[index11] = item11.生产数;
                    })
                }
                if (guanArr.length > 0) {
                    guanArr.forEach(item12 => {
                        let index12 = item12.日 - 1;
                        seriesData12[index12] = item12.生产数;
                    })
                }

                let chart1Option = deepCopy(this.basicOption)
                chart1Option.xAxis.data = xAxisData1;
                chart1Option.series[0].data = seriesData11;
                chart1Option.series[1].data = seriesData12;
                this.setChart("chart1", chart1Option);
            });
            //本月交付统计
            that.$API.bi.dataset.exec.req('saleOutDay', obj2).then((saleOutRes) => {
                console.log('本月交付统计:', saleOutRes);
                let seriesData21 = [], seriesData22 = [], xAxisData2 = [], bangArr2 = [], guanArr2 = [];
                let list2 = saleOutRes.data2.ds0;
                for (let i = 0; i < that.days; i++) {
                    let day = i + 1;
                    let text = day + '日';
                    xAxisData2[i] = text;
                    seriesData21.push(0);
                    seriesData22.push(0);
                }
                if (list2.length > 0) {
                    list2.forEach(item2 => {
                        if (item2.name == '光纤预制管') {
                            guanArr2.push(item2)
                        } else {
                            bangArr2.push(item2)
                        }
                    })
                }
                if (bangArr2.length > 0) {
                    bangArr2.forEach(item21 => {
                        let index21 = item21.日 - 1;
                        seriesData21[index21] = item21.生产数;
                    })
                }
                if (guanArr2.length > 0) {
                    guanArr2.forEach(item22 => {
                        let index22 = item22.日 - 1;
                        seriesData22[index22] = item22.生产数;
                    })
                }
                let chart2Option = deepCopy(this.basicOption);
                chart2Option.series[0].type = 'line';
                chart2Option.series[1].type = 'line';
                chart2Option.xAxis.data = xAxisData2;

                chart2Option.series[0].data = seriesData21;
                chart2Option.series[0].label.position = 'top';
                chart2Option.series[1].data = seriesData22;
                chart2Option.series[1].label.position = 'top';

                this.setChart("chart2", chart2Option);
            });
        },

    },

}
</script>
<style scoped>
@font-face {
    font-family: 'myfont';
    /* 字体名称 */
    src: url('../../utils/youShe.ttf');
    /* 字体文件相对路径 */
}

.dashboard {
    background-image: url("/public/img/photon_bg.png");
    color: #fff;
    background-size: cover;
    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;
}

.title {
    height: 40px;
    line-height: 40px;
    text-align: center;
}

table th {
    font-size: 14px;
    background: rgba(0, 0, 0, .1);
}

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