<template>
    <div class="testdiv">
        <!-- 看板标题 -->
        <div class="top_title">
            线边超市看板
            <!-- <img :src="imgLogo" alt class="logo" v-on:click="back" /> -->
            <div class="times_bg">{{nowTime}}</div>
            <!-- <Icon class="backBtn" type="md-arrow-round-back" size="40" v-on:click="back" /> -->
            <div class="IconSetting">
                <img src="../../../static/images/setting.svg" alt @click="setting()" />
            </div>
        </div>
        <!-- 弹出框 -->
        <Modal
            class="settingmodal"
            title
            v-model="settingmodal"
            :styles="{position:'fixed',top:'60px',right:'35px',width:'450px'}"
        >
            <div class="modal_body" style="width:430px!important;padding:0 0px;">
                <div class="out_row">
                    <label>查询其他日期:</label>
                    <DatePicker
                        class="publicinput"
                        type="date"
                        v-model="datetime"
                        placeholder
                        style="width:200px;margin-left:9px;"
                    ></DatePicker>
                </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="settingmodal = false">{{$t("1033")}}</Button>
                <Button type="primary" size="large" @click="settingadd()">{{$t("900552")}}</Button>
                <Button type="primary" size="large" v-on:click="back">退出看板</Button>
            </div>
        </Modal>
        <!-- 看板标题 end -->
        <!-- 看板内容 -->
        <div class="container">
            <!-- 左边看板 -->

            <!-- 中间看板 -->
            <div class="formBox_middle">
                <div class="middle_bottom1" style="margin-top:35px">
                    <div class="title">刀具使用情况</div>
                    <div class="lifeMain">
                        <div class="item" v-for="(item,i) in toolLife" :key="i">
                            <p>
                                <span>产线op30</span>
                            </p>
                            <p>
                                <span>已装刀</span>
                                <span>{{item.cutNumer}}</span>
                            </p>
                            <p>
                                <span>待换刀</span>
                                <span>{{item.remainLife}}</span>
                            </p>
                            <p>
                                <span>呆滞刀</span>
                                <span>{{item.toolNumber}}</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="middle_bottom">
                    <div class="title">线边超市库存</div>

                    <ul class="table_title_bg">
                        <li>刀具名称</li>
                        <li>刀具编号</li>
                        <li>加工设备</li>
                        <li>刀位号</li>
                        <li>入库时间</li>
                    </ul>
                    <vue-seamless-scroll
                        :data="abnormals"
                        :class-option="optionSetting"
                        class="seamless-warp tbaleSlide"
                    >
                        <ul class="tableDetail">
                            <li v-for="(item,index) in tool_prepare" :key="index">
                                <div>{{item.cutNumer}}</div>
                                <div>{{item.needTime}}</div>
                                <div>{{item.user}}</div>
                                <div>{{item.location}}</div>
                                <div>{{item.currentStock}}</div>
                            </li>
                        </ul>
                    </vue-seamless-scroll>
                </div>
            </div>

            <!-- 中间看板 end -->

            <!-- 右边看板 -->
            <div class="formBox_left formBox_right">
                <!-- 刀具库存报警 -->
                <div class="formBox">
                    <!-- <div class="form_title">刀具库存报警</div> -->
                    <div class="formMain table_bg pieBox">
                        <!-- <div class="item" v-for="(item,i) in stockList" :key="i">
                            <p class="name">{{item.toolNumber}}</p>
                            <div>
                                <p class="count">{{item.number}}</p>
                                <p class="location">{{item.location}}</p>
                            </div>
                        </div> -->
                    </div>
                </div>
                <!-- 刀具库存报警 -->
                <div class="formBox compre_analysis" style="margin-top:20px">
                    <div class="form_title">刀具领用情况</div>
                    <div class="formMain table_bg" style="height:446px">
                        <div id="main" style="width:100%;height:360px"></div>
                    </div>
                </div>

            </div>
            <!-- 右边看板 end -->
        </div>
        <!-- 看板内容 end -->

    </div>
</template>
<script>
// import moment from 'moment'
import axios from '@/libs/api.request';
import echarts from 'echarts';
import vueSeamlessScroll from 'vue-seamless-scroll';
import moment from 'moment';

import { initRouter } from '@/libs/router-util'; // 新增  引入动态菜单渲染
import { localSave } from '@/libs/util';

export default {
    components: {
    // 组件
        vueSeamlessScroll
    },
    data () {
        return {
            imgLogo: require('../../../static/images/siger.png'), // logo
            settingmodal: false, // 设置弹出框
            datetime: moment(new Date().getTime()).format('YYYY-MM-DD'),
            nowTime: moment(new Date().getTime()).format('YYYY-MM-DD'), // 当前时间
            productid: 0, // 产品id
            tool_prepare: [], // 产品集合
            productnum: '', // 计划产出
            // 产量达成率分析表格
            passagewayList: [],
            // 通道数据列表
            channelList: [],
            image: require('../../../static/images/u451.png'),
            grayImg: require('../../../static/images/u453.png'),
            htmlList: [], // 亮圈数组
            grayImgList: [], // 灰圈数组
            // 当前产品&客户
            productName: '圆柱滚子轴承',
            productModel: '54657-344-14J',
            productPlan: '0',
            productActual: '0',
            staff: '0', // 工厂员工总数
            days: '0', // 零事故天数
            oeeNum: '0', // 综合OEE
            animate: false,
            line1: '', // 产线一
            line2: '', // 产线二
            line3: '', // 产线三
            line4: '', // 产线四
            line5: '', // 产线五
            expection1: '',
            expection2: '',
            expection3: '',
            expection4: '',
            expection5: '',
            lineId1: '', // 产线1 id
            lineId2: '', // 产线2 id
            lineId3: '', // 产线3 id
            lineId4: '', // 产线4 id
            lineId5: '', // 产线5 id
            oeelist: [],
            oeevalues: [],
            // 安灯异常表格
            abnormals: [],
            Pass_rate: '',
            pic: '',
            timer: 0, // 20刷新定时器
            timeAll: 0, // 2小时刷新,
            productList: [],
            value1: 0,
            setting1: {
                autoplaySpeed: 5000,
                dots: 'none',
                radiusDot: false,
                trigger: 'click',
                arrow: 'never'
            },

            detailtwomodal: false,
            tableData3: [],
            tableColumns3: [
                {
                    type: 'index',
                    title: this.$t('1008'), // 序号
                    key: 'xuhao',
                    align: 'center',
                    width: 60
                },
                {
                    title: '异常明细', // 异常明细
                    key: 'expection',
                    align: 'center',
                    width: 150
                },
                {
                    title: '损失时长', // 损失时长
                    key: 'cost_time',
                    align: 'center',
                    width: 100
                },
                {
                    title: '开始时间', // 开始时间
                    key: 'start',
                    align: 'center',
                    width: 150
                },
                {
                    title: '结束时间', // 结束时间
                    key: 'end',
                    align: 'center',
                    width: 150
                },
                {
                    title: '安灯工单号', // 工单号
                    key: 'ordernum',
                    align: 'center',
                    render: (h, params) => {
                        if (params.row.ordernum != '') {
                            return h('div', [
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.JumpPageAndon(
                                                    params.row.ordernum
                                                );
                                            }
                                        }
                                    },
                                    params.row.ordernum
                                )
                            ]);
                        }
                    }
                },
                {
                    title: '责任岗位', // 责任岗位
                    key: 'responsibility',
                    align: 'center'
                }
            ],
            fac_ok: 0,
            fac_oee: 0,
            okcolor: '#33ff33',
            oeecolor: '#33ff33',
            showTable: true,
            tableData4: [],
            tableColumns4: [
                {
                    type: 'index',
                    title: this.$t('1008'), // 序号
                    key: 'xuhao',
                    align: 'center',
                    width: 60
                },
                {
                    title: '产品名称', // 异常明细
                    key: 'ProductName',
                    align: 'center',
                    width: 140
                },
                {
                    title: '报废/返工时间', // 损失时长
                    key: 'ReworkTime',
                    align: 'center',
                    width: 150
                },
                {
                    title: '报废/返工工位', // 开始时间
                    key: 'SectionName',
                    align: 'center',
                    width: 130
                },
                {
                    title: '报废原因', // 结束时间
                    key: 'Reason',
                    align: 'center',
                    width: 150
                },
                {
                    title: '报废数量', // 工单号
                    key: 'Count',
                    align: 'center'
                },
                {
                    title: '损失时长', // 责任岗位
                    key: 'Loss',
                    align: 'center'
                },
                {
                    title: '处理人', // 责任岗位
                    key: 'Operator',
                    align: 'center'
                }
            ],
            toolLife: [],
            stockList: []
        };
    },
    created () {},
    mounted () {
        this.toEcharts();
        this.getPreparationList();
        this.getToolLife();
        this.getStockWarning();
    },
    methods: {
    // 产品备刀列表
        getPreparationList () {
            // axios
            //     .request({
            //         url: "/dashboard/DashboardCnConfig/GetTotalSet",
            //         method: "get",
            //     })
            //     .then((res) => {
            //         if (res.data.ret === 1) {
            //             var item = res.data.data;
            //             this.fac_ok = item.factory_ftq;
            //             this.fac_oee = item.factory_oee;
            //         }
            //     });
            this.tool_prepare = [
                {
                    workOrder: '12321',
                    productName: 'cvdsdfx',
                    machineName: 'dsfff',
                    materialName: '111',
                    cutNumer: '222',
                    needTime: '2020-07-21',
                    user: 'tlm小二',
                    location: 'vfdsbfhdga',
                    currentStock: 10
                },
                {
                    workOrder: '12321',
                    productName: '电话费就是个奋斗史',
                    machineName: 'dsfff',
                    materialName: '111',
                    cutNumer: '222',
                    needTime: '2020-07-21',
                    user: 'tlm小二',
                    location: 'vfdsbfhdga',
                    currentStock: 10
                },
                {
                    workOrder: '12321',
                    productName: 'cvdsdfx',
                    machineName: 'dsfff',
                    materialName: '111',
                    cutNumer: '222',
                    needTime: '2020-07-21',
                    user: 'tlm小二',
                    location: 'vfdsbfhdga',
                    currentStock: 10
                }
            ];
        },
        // 刀具寿命预警
        getToolLife () {
            // let data = {}
            // this.request('',data,'get').then(res=>{
            // 	console.log(res.data)
            // })
            let arr = [
                {
                    cutNumer: '1111',
                    remainLife: '30%',
                    toolNumber: '12321'
                },
                {
                    cutNumer: '1111',
                    remainLife: '30%',
                    toolNumber: '12321'
                },
                {
                    cutNumer: '1111',
                    remainLife: '30%',
                    toolNumber: '12321'
                }
            ];
            this.toolLife = arr.concat(arr).concat(arr).concat(arr).concat(arr);
        },
        // 刀具库存预警
        getStockWarning () {
            // let data = {}
            // this.request('',data,'get').then(res=>{
            // 	console.log(res.data)
            // })
            let arr = [
                {
                    toolNumber: '1111',
                    number: '1',
                    location: '12321'
                },
                {
                    toolNumber: '1111',
                    number: '1',
                    location: '12321'
                },
                {
                    toolNumber: '1111',
                    number: '1',
                    location: '12321'
                }
            ];

            this.stockList = arr
                .concat(arr)
                .concat(arr)
                .concat(arr)
                .concat(arr);
        },
        // 跳转页面
        JumpPageAndon: function (e) {
            if (e === '' || e === 0) {
                return false;
            }

            this.changemenu('andon').then((val) => {
                let routeUrl = this.$router.resolve({
                    path: '/andon/abnormalrecords',
                    query: { work_order: e }
                });
                window.open(routeUrl.href, '_blank');
            });

            // 先生成菜单路由再跳转
            // this.changemenu('andon',e)
            // this.$router.push({ path: '/realtime/passageway', query: { passid: e } })
            // let routeUrl = this.$router.resolve({
            //   path: "/andon/abnormalrecords",
            //   query: {work_order:e}
            // });
            // window.open(routeUrl.href, '_blank');
        },
        changemenu: function (value) {
            this.$store.commit('setmenuitem', value);
            var data = {
                block: this.$store.state.user.blockitem
            };
            initRouter(this.$store.state.user.blockitem, false); // 新增 调用方法,动态生成路由,
            localSave('sigerdatablockitem', JSON.stringify(data));
            return Promise.resolve('success');
        },

        // 获取配置
        setting () {
            this.settingmodal = true;
            // 获取配置 type=1 获取工厂配置
            axios
                .request({
                    url: 'dashboard/Dashboardlevel/GetlevelCfg?type=1',
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1 && res.data.data != null) {
                        let info = res.data.data;
                        // 图片
                        if (info.Column) {
                            this.filename = info.Column.split('/')[3];
                            this.fileurl = info.Column;
                        }
                        // 获取产品
                        this.initproducts();
                        if (info.Column2) {
                            this.productid = parseInt(info.Column2);
                        }
                        // 计划产出
                        if (info.Column3) {
                            this.productnum = parseInt(info.Column3);
                        }
                    }
                });
        },
        // 各通道OEE分布
        toEcharts () {
            // if (this.oeevalues.length > 0) {
            //   let arr = []
            //   this.oeevalues.forEach(function (item, index) {
            //     if (parseInt(item) > 100) {
            //       item = 100
            //     }
            //     arr.push(item)
            //   })
            //   this.oeevalues = arr
            // }
            // var data = this.oeelist
            console.log(111111111);
            console.log(document.getElementById('main'));
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据

            var option = {
                xAxis: {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#C0C0C0'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#C0C0C0' // 坐标值得具体的颜色
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisLabel: {
                        textStyle: {
                            color: '#C0C0C0' // 坐标值得具体的颜色
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#C0C0C0'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#C0C0C0' // 坐标值得具体的颜色
                        }
                    }
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        barWidth: 10
                    }
                ]
            };
            myChart.setOption(option);
            // window.onresize = function () {
            //     myChart.resize();
            // };
        },
        request (url, data, type) {
            if (type == 'get') {
                return this.axios
                    .request({
                        url: url,
                        params: data,
                        method: type
                    })
                    .then((res) => {
                        return res;
                    })
                    .catch((error) => error);
            } else {
                return this.axios
                    .request({
                        url: url,
                        data,
                        method: type
                    })
                    .then((res) => {
                        return res;
                    })
                    .catch((error) => error);
            }
        },
        // 各通道产量达成率--灰色圆圈
        grayImgNum: function () {
            var that = this;
            var imgNum = 0;
            var imgNum1 = 0;
            this.passagewayList.forEach(function (item, index) {
                var number = Math.ceil(item.GrayNum).toString().length;
                imgNum = Math.ceil(item.GrayNum / Math.pow(10, number - 1));
                var html = '';
                for (var i = 0; i < imgNum; i++) {
                    html +=
                        '<img src="' +
                        that.grayImg +
                        '" alt="" style="width:18px;height:18px">';
                }
                that.grayImgList.push(html);
                imgNum1 = Math.ceil(item.LightNum / Math.pow(10, number - 1));
                var html = '';
                for (var i = 0; i < imgNum1; i++) {
                    html +=
                        '<img src="' +
                        that.image +
                        '" alt="" style="width:18px;height:18px">';
                }
                that.htmlList.push(html);
            });
        },

        init_toBar () {
            this.datetime = moment(this.datetime).format('YYYY-MM-DD');
            this.axios
                .request({
                    url:
                        'dashboard/DashboardQms/GetChannelFtq?date=' +
                        this.datetime,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret == 1) {
                        this.toBar(res.data.data.X, res.data.data.Y);
                        var arr = res.data.data.Y;
                        this.Pass_rate = res.data.data.TotalFtq;

                        if (this.Pass_rate < 0) {
                            this.Pass_rate = 0;
                        }
                        if (this.Pass_rate > 100) {
                            this.Pass_rate = 100;
                        }
                        if (this.Pass_rate == 0) {
                            this.Pass_rate = '';
                        } else {
                            if (this.Pass_rate >= this.fac_ok) {
                                this.okcolor = '#33ff33';
                            } else {
                                this.okcolor = 'red';
                            }

                            // 强制两位小数
                            let value_str = this.Pass_rate;
                            value_str = (value_str + '').split('.');
                            if (value_str.length < 2) {
                                value_str.push('00');
                            }
                            this.Pass_rate =
                                value_str[0] +
                                '.' +
                                (value_str[1] + '00').slice(0, 2) +
                                '%';
                        }
                    }
                });
        },
        // 各通道一次合格率
        toBar (x_data, y_data) {
            var myChart = echarts.init(document.getElementById('barForm_F'));
            var option = {
                // color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b0}{a0}: {c0}%'

                    // axisPointer: {
                    //   // 坐标轴指示器，坐标轴触发有效
                    //   type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    // }
                },
                textStyle: {
                    // ----图例内容样式
                    color: '#fff' // ---所有图例的字体颜色
                    // backgroundColor:'black',  //---所有图例的字体背景色
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    // top: '10%',
                    bottom: '1%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: x_data,
                        axisTick: {
                            alignWithLabel: true
                        },
                        nameTextStyle: {
                            // ---坐标轴名称样式
                            color: '#fff',
                            padding: [5, 0, 0, -5] // ---坐标轴名称相对位置
                        },
                        axisLine: {
                            show: false
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            formatter: '{value} %',
                            show: true,
                            textStyle: {
                                color: '#fff' // 坐标值得具体的颜色
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '',
                        type: 'bar',
                        barWidth: '16',
                        barCategoryGap: '48',
                        data: y_data,
                        label: {
                            show: true,
                            color: 'red',
                            formatter: '{c}%',
                            position: 'top', // 在上方显示
                            distance: 2
                        },
                        // itemStyle: {
                        //   normal: {
                        //     show: true,
                        //     formatter: '{c}%',
                        //     color: 'red'
                        //   }
                        // }
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, // 开启显示
                                    position: 'top', // 在上方显示
                                    formatter: function (value) {
                                        var data = '';
                                        if (value.value != 0) {
                                            data = value.value + '%';
                                        }
                                        return data;
                                    },
                                    textStyle: {
                                        // 数值样式
                                        color: '#fff'
                                        // formatter: '{c} %'

                                        // fontSize: 16
                                    }
                                },
                                color: function (params) {
                                    var colorList = [
                                        '#19A3FF',
                                        '#55F1F9',
                                        '#19A3FF',
                                        '#55F1F9',
                                        '#19A3FF',
                                        '#55F1F9',
                                        '#19A3FF'
                                    ];
                                    return colorList[params.dataIndex];
                                }
                            } // ---图形形状
                        }
                    }
                ]
            };
            myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },

        // OEE七大损失分布
        init_toPie () {
            this.datetime = moment(this.datetime).format('YYYY-MM-DD');
            this.axios
                .request({
                    url:
                        'dashboard/DashboardAndon/AndonExpectionPercentage?date=' +
                        this.datetime,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret == 1) {
                        // console.log(res.data.data)
                        // var toPie_arr=[]
                        var total = res.data.data.total;
                        var arr = [];
                        var colorlist = [];
                        if (res.data.data.arr.length > 0) {
                            res.data.data.arr.forEach((item) => {
                                var obj = {};
                                obj.value = item.time;
                                obj.starttime = item.start;
                                obj.endtime = item.end;
                                obj.expection_id = item.expection_id;
                                obj.name =
                                    item.expection_name +
                                    '\n' +
                                    Math.floor(item.time / 60) +
                                    '分钟,' +
                                    ((item.time / total) * 100).toFixed(2) +
                                    '%';
                                arr.push(obj);
                                colorlist.push(item.color);
                            });
                        }
                        this.toPie(arr, colorlist);
                    }
                });
        },
        toPie (toPie_arr, colorlist) {
            var cost =
                100 - this.oeeNum <= 0
                    ? 0
                    : Math.round((100 - this.oeeNum) * 100) / 100;

            if (cost < 0) {
                cost = 0;
            }
            if (cost > 100) {
                cost = 100;
            }
            // 强制两位小数
            let value_str = cost;
            value_str = (value_str + '').split('.');
            if (value_str.length < 2) {
                value_str.push('00');
            }
            cost = value_str[0] + '.' + (value_str[1] + '00').slice(0, 2);

            let div =
                '<div id="divEchartcon" style="width:100%;height:386px;"></div>';
            let dom = this.$refs.pieForm_F;
            dom.innerHTML = div;

            var myChart = echarts.init(document.getElementById('divEchartcon'));
            var option = {
                title: {
                    // 中间文字定义
                    text: '总损失',
                    subtext: cost + '%',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontSize: 16,
                        color: '#fff'
                    },
                    subtextStyle: {
                        fontSize: 16,
                        color: '#fff'
                    }
                },
                tooltip: {
                    // 鼠标hover覆盖提示框
                    show: false, // 可视
                    trigger: 'item', // 根据item提示信息
                    formatter: '{a} <br/>{b}: {c} ({d}%)' // 提示内容
                },
                // //设置饼状图每个颜色块的颜色
                color: colorlist,
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['35%', '50%'],
                        avoidLabelOverlap: true,
                        label: {
                            color: '#fff',
                            fontSize: '16'
                        },
                        labelLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                            // normal: {
                            //   show: true
                            // }
                        },
                        data: toPie_arr
                    }
                ]
            };
            myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };

            var that = this;
            myChart.on('click', function eConsole (param) {
                // 这个params可以获取你要的饼图中的当前点击的项的参数
                that.show_oee(param.data);
            });
        },
        // 显示安灯详情
        show_oee (rowData) {
            var params = {
                starttime: rowData.starttime,
                endtime: rowData.endtime,
                section: 0,
                expectiontype: rowData.expection_id
            };
            this.axios
                .request({
                    url: 'dashboard/DashboardAndon/GetAdnonSliceDetail',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        let arr = [];
                        this.mockTableData2(res.data.data);
                        this.detailtwomodal = true;
                    } else {
                        // window_warning('该时间段暂无数据')
                        this.showTable = false;
                        this.detailtwomodal = true;
                        this.tableData3 = [];
                        this.tableData4 = [];
                    }
                });
        },
        mockTableData2 (tablelist) {
            let data = [];
            if (tablelist.AndonDetail.length > 0) {
                tablelist.AndonDetail.forEach((item) => {
                    data.push({
                        expection:
                            item.expection != undefined &&
                            item.expection != null
                                ? item.expection
                                : '',
                        start: moment(item.start * 1000).format(
                            'YYYY-MM-DD HH:mm:ss'
                        ),
                        responsibility: item.responsibility,
                        end:
                            item.end === 0
                                ? ''
                                : moment(item.end * 1000).format(
                                    'YYYY-MM-DD HH:mm:ss'
                                ),
                        cost_time: item.cost_time
                            ? Math.round((item.cost_time / 60) * 100) / 100 +
                              '分钟'
                            : 0 + '分钟',
                        ordernum: item.work_order
                    });
                });
            }
            this.tableData3 = data;

            let data1 = [];
            if (tablelist.AndonDetailEx.length > 0) {
                tablelist.AndonDetailEx.forEach((item) => {
                    data1.push({
                        ProductName: item.ProductName,
                        ProductCode: item.ProductCode,
                        ReworkTime: item.ReworkTime,
                        SectionName: item.SectionName,
                        Reason: item.Reason,
                        Count: item.Count,
                        Loss: item.Loss
                            ? Math.round((item.Loss / 60) * 100) / 100 + '分钟'
                            : 0 + '分钟',
                        Operator: item.Operator
                    });
                });
                this.showTable = true;
            } else {
                this.showTable = false;
            }
            this.tableData4 = data1;
        },
        getline () {
            // 获取动态产线
            this.axios
                .request({
                    url: 'dashboard/Dashboardlevel/getline',
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        var data = res.data.data;
                        this.line1 = data[0] ? data[0].title : '';
                        this.line2 = data[1] ? data[1].title : '';
                        this.line3 = data[2] ? data[2].title : '';
                        this.line4 = data[3] ? data[3].title : '';
                        this.line5 = data[4] ? data[4].title : '';
                        this.lineId1 = data[0] ? data[0].id : 0;
                        this.lineId2 = data[1] ? data[1].id : 0;
                        this.lineId3 = data[2] ? data[2].id : 0;
                        this.lineId4 = data[3] ? data[3].id : 0;
                        this.lineId5 = data[4] ? data[4].id : 0;
                    } else {
                    }
                });
        },

        // 返回上一页
        back () {
            this.$router.go(-1); // 返回上一层
        },
        loadProduce () {
            this.datetime = moment(this.datetime).format('YYYY-MM-DD');
            var params = {
                section: 0
            };
            this.axios
                .request({
                    url:
                        'dashboard/DashboardFactory/GetFactoryAchievement?date=' +
                        this.datetime,
                    params,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        // 各通道oee--雷达图
                        var arr1 = [];
                        res.data.data.oees.forEach(function (item, index) {
                            var aee = {};
                            if (index === 0) {
                                aee.axisLabel = {
                                    show: true,
                                    textStyle: { fontSize: 16, color: '#fff' }
                                };
                            }
                            // 分母为0，不显示
                            if (item.denominator === 1) {
                                aee.name = item.name;
                            } else {
                                aee.name = item.name + '\n' + item.oee + '%';
                            }
                            aee.max = 100;
                            arr1.push(aee);
                        });
                        this.oeelist = arr1;
                        this.oeevalues = res.data.data.value;
                        this.passagewayList = res.data.data.produces;
                        this.staff = res.data.data.staff;
                        this.days = res.data.data.days;
                        this.oeeNum = res.data.data.oeeNum;
                        this.productActual = res.data.data.totalProduce;

                        // 强制两位小数
                        if (this.oeeNum > 0) {
                            if (this.oeeNum >= this.fac_oee) {
                                this.oeecolor = '#33ff33';
                            } else {
                                this.oeecolor = 'red';
                            }
                            // 强制两位小数
                            let value_str = this.oeeNum;
                            value_str = (value_str + '').split('.');
                            if (value_str.length < 2) {
                                value_str.push('00');
                            }
                            this.oeeNum =
                                value_str[0] +
                                '.' +
                                (value_str[1] + '00').slice(0, 2);
                        }
                    } else {
                    }

                    this.toEcharts(); // 各通道oee分布
                    this.toBar(); // 各通道一次合格率
                    this.grayImgNum();
                    this.loadAndon();
                    this.loadPic();
                    this.init_toBar();
                    this.init_toPie();
                });
        },
        loadAndon () {
            this.datetime = moment(this.datetime).format('YYYY-MM-DD');
            this.abnormals = [];
            var params = {
                section: 0
            };
            this.axios
                .request({
                    url:
                        'dashboard/DashboardAndon/AndonInfoForFactory?date=' +
                        this.datetime,
                    params,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1 && res.data.data.length > 0) {
                        this.abnormals = res.data.data;
                    } else {
                    }
                });
        },
        loadPic () {
            var params = {
                section: 0
            };
            axios
                .request({
                    url: 'dashboard/DashboardFactory/GetProductLogo',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.pic = this.axios.publicPath + res.data.data.pic;
                        this.productList = res.data.data;
                        this.productName =
                            res.data.data.productName &&
                            res.data.data.productName.length > 15
                                ? res.data.data.productName.substring(0, 15) +
                                  '...'
                                : res.data.data.productName;
                        this.productModel = res.data.data.productModel;
                        this.productPlan = res.data.data.productPlan;
                        // this.productActual=res.data.data.productActual;
                    } else {
                    }
                });
        },
        // 初始化淡入淡出
        init_showPop1 () {
            var params = {
                date: moment(this.datetime).format('YYYY-MM-DD')
            };
            this.axios
                .request({
                    url: 'dashboard/DashboardAndon/GetAndonChannelData',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    this.channelList = [];
                    if (res.data.ret == 1) {
                        if (res.data.data.length > 0) {
                            this.channelList = res.data.data.slice(0, 5);
                        }
                    }
                });
        },
        // 最新的安灯状态
        andonStatus () {
            var params = {
                section: 0,
                date: moment(this.datetime).format('YYYY-MM-DD')
            };
            this.axios
                .request({
                    url:
                        'dashboard/DashboardAndon/GetAndonChannelDataForMobile',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret == 1) {
                        this.expection1 = '';
                        this.expection2 = '';
                        this.expection3 = '';
                        this.expection4 = '';
                        this.expection5 = '';
                        if (res.data.data.length > 0) {
                            var that = this;
                            res.data.data.forEach(function (item, index) {
                                if (item.title === 'CH3.3') {
                                    that.expection1 = item.expection;
                                }
                                if (item.title === 'CH3.4') {
                                    that.expection2 = item.expection;
                                }
                                if (item.title === 'CH3.5') {
                                    that.expection3 = item.expection;
                                }
                                if (item.title === 'CH3.6') {
                                    that.expection4 = item.expection;
                                }
                                if (item.title === 'CH3.7') {
                                    that.expection5 = item.expection;
                                }
                            });
                        }
                    }
                });
        }
    },
    computed: {
        optionSetting: function () {
            return {
                step: 0.2, // 数值越大速度滚动越快
                // limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true // 是否开启鼠标悬停stop
                // direction: 0, // 0向下 1向上 2向左 3向右
                // openWatch: true, // 开启数据实时监控刷新dom
                // singleHeight: 740, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                // waitTime: 6000 // 单步运动停止的时间(默认值1000ms)
            };
        }
    },
    // mounted() {
    // if (this.$store.state.user.logo !== '' && this.$store.state.user.logo !== null && this.$store.state.user.logo !== undefined) {
    //   this.imgLogo = this.$store.state.user.logo
    // }
    // if (this.timer) {
    //   clearInterval(this.timer)
    // } else {
    //   // 20分钟刷新时间取设置时间，
    //   this.datetime = moment(this.datetime).format('YYYY-MM-DD')
    //   this.loadProduce()
    //   this.getline()
    //   this.init_showPop1()
    //   this.andonStatus()
    //   this.getColorset()
    //   // 定时20分钟执行一次
    //   this.timer = setInterval(() => {
    //     this.datetime = moment(this.datetime).format('YYYY-MM-DD')
    //     this.loadProduce()
    //     this.getline()
    //     this.init_showPop1()
    //     this.andonStatus()
    //     this.getColorset()
    //   }, 600000)
    // }
    // // 俩小时整个页面刷新一次
    // if (this.timeAll) {
    //   clearInterval(this.timeAll)
    // } else {
    //   // 两小时后刷新,刷回当前时间
    //   this.timeAll = setInterval(() => {
    //     this.datetime = moment(new Date().getTime()).format('YYYY-MM-DD')
    //     location.reload()
    //   }, 1000 * 60 * 60 * 2)
    // }
    // },
    destroyed () {
        clearInterval(this.timer);
        clearInterval(this.timeAll);
    }
};
</script>

<style lang="less" scoped>
@import "./comprehensive.less";
.seamless-warp {
    width: 100%;
    height: 240px;
    overflow: hidden;
}

.chart_dadar {
    height: 315px;
}
.gaugeForm {
    height: 100px;
}
.pieForm_F {
    height: 160px;
    width: 160px;
}
.barForm_F {
    width: 100%;
    height: 305px;
}
.stackingBar {
    width: 100%;
    height: 386px;
    // margin: 50px auto;
}

.IconSetting {
    display: inline-block;
    position: fixed;
    right: 10px;
    top: -20px;
}
.IconSetting img {
    width: 40px;
    cursor: pointer;
}
.settingmodal {
    .out_row {
        margin-left: 15px;
        line-height: 40px;
        display: block;
        label {
            float: left;
            width: 90px;
        }
        input {
            margin-left: 9px;
            width: 200px;
        }
        select {
            display: inline-block;
            margin-left: 9px;
            width: 200px;
        }
        .up_img {
            position: absolute;
            left: 121px;
            top: 60px;
            opacity: 0;
            width: 200px;
            height: 32px;
        }
    }
}
.class0 {
    background-image: url("../../../static/images/u1049.svg");
    background-repeat: no-repeat;
    // -moz-animation: carton1 5s; /* Firefox */
    // -webkit-animation: carton1 5s; /* Safari 和 Chrome */
    // -o-animation: carton1 5s; /* Opera */
    animation: carton1 20s infinite;
}
.class1 {
    background-image: url("../../../static/images/u1046.svg");
    background-repeat: no-repeat;
    animation: carton2 20s infinite;
}
.class2 {
    background-image: url("../../../static/images/u1032.svg");
    background-repeat: no-repeat;
    animation: carton3 20s infinite;
}
.class3 {
    background-image: url("../../../static/images/u1032.svg");
    background-repeat: no-repeat;
    animation: carton4 20s infinite;
}
.class4 {
    background-image: url("../../../static/images/u1032.svg");
    background-repeat: no-repeat;
    animation: carton5 20s infinite;
}
@keyframes carton1 {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    15% {
        opacity: 1;
    }
    22% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes carton2 {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    35% {
        opacity: 1;
    }
    42% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes carton3 {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    45% {
        opacity: 1;
    }
    55% {
        opacity: 1;
    }
    62% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes carton4 {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 0;
    }
    65% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    82% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes carton5 {
    0% {
        opacity: 0;
    }
    80% {
        opacity: 0;
    }
    85% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
</style>
