<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_left">
        <!-- 产品异常 -->
        <div class="formBox compre_analysis">
          <div class="form_title">安灯异常TOP5</div>
          <div class="formMain table_bg">
            <div class="progressBox">
              <ul class="progressForm">
                <li v-for="(item,index) in abnormalList" :key="index" :data-id="item.id">
                  <div class="number">{{index+1}}</div>
                  <div class="factorName">{{item.name}}</div>
                  <div class="progressBar">
                    <div
                      class="progress"
                      :style="{'width':item.percentage,'background':colorList[index]}"
                    ></div>
                  </div>
                  <div class="money">{{item.number}}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 产品异常 end -->

        <!-- 安灯处理效率 -->
        <div class="formBox">
          <div class="form_title">安灯处理效率</div>
          <div class="formMain table_bottom">
            <ul class="table_title_bg andonHead">
              <li>序号</li>
              <li>异常类别</li>
              <li>平均响应时长</li>
              <li>平均处理时长</li>
              <li>责任岗位</li>
            </ul>

            <vue-seamless-scroll
              :data="andonList"
              :class-option="optionSetting"
              class="seamless-warp tbaleSlide"
            >
              <ul class="tableDetail">
                <!-- <tbody> -->
                <li v-if="andonList.length == 0"></li>
                <li
                  class="andonBody"
                  v-for="(item,index) in andonList"
                  :key="index"
                  :data-id="andonList.id"
                  v-else
                  style="display:flex;justify-content:space-between;flex-wrap:nowrap;overflow:hidden"
                >
                  <div class="number">{{index+1}}</div>
                  <div>{{item.type}}</div>
                  <div>{{item.reponseTime}}</div>
                  <div>{{item.handleTime}}</div>
                  <div>{{item.department}}</div>
                </li>
                <!-- </tbody> -->
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
        <!-- 安灯处理效率 end -->
      </div>
      <!-- 左边 end -->

      <!-- 中间 -->
      <div class="formBox_middle">
        <!-- 顶部 -->
        <div class="middle_top">
          <ul>
            <li>
              待签到工单
              <div>{{nonHandleNum}}</div>
            </li>
            <li>
              处理中工单
              <div>{{handlingNum}}</div>
            </li>
            <li>
              待确认工单
              <div>{{alreadyHandleNum}}</div>
            </li>
            <li>
              今日安灯次数
              <div>{{todayNum}}</div>
            </li>
          </ul>
        </div>
        <!-- 顶部 end -->

        <!-- 中间 -->
        <div class="middle_img">
          <img src="../../../static/images/u476.png" alt />
          <div class="channelBox">
            <div class="channel1">{{line1}}</div>
            <div class="channel2">{{line2}}</div>
            <div class="channel3">{{line3}}</div>
            <div class="channel4">{{line4}}</div>
            <div class="channel5">{{line5}}</div>
          </div>
          <div class="channelDataBox">
            <div class="channelData" v-for="(item,index) in channelList" :key="index">
              <!-- <transition-group name="hehe"> -->
              <!-- v-if="channelList[index].show==true" -->

              <div :class="['class'+index,'detail']" :key="1">
                <div class="name">
                  <span>{{(item.name.length>7?(item.name.slice(0,5)+'...'):item.name)}}</span>
                </div>
                <div style="font-size:8px;height:14px;">当前安灯：{{item.current}}</div>
                <div style="font-size:8px;height:14px;">处理中: {{item.handle}}</div>
                <div style="font-size:8px;height:14px;">待签到: {{item.accept}}</div>
                <div style="font-size:8px;height:14px;">待确认: {{item.wait}}</div>
              </div>
              <!-- </transition-group> -->
            </div>
          </div>
        </div>
        <!-- 中间 end -->

        <!-- 底部 -->
        <div class="middle_bottom">
          <div class="formBox">
            <div class="formMain">
              <ul class="table_title_bg andonHead">
                <li>工单号</li>
                <li>安灯时间</li>
                <li>设备位置</li>
                <li>异常明细</li>
                <li>持续时长</li>
                <li>状态</li>
                <li>签到人员</li>
                <li>责任岗位</li>
              </ul>
              <vue-seamless-scroll
                :data="orderList"
                :class-option="optionSetting"
                class="seamless-warp tbaleSlide"
              >
                <ul class="tableDetail">
                  <!-- <tbody> -->
                  <li v-if="orderList.length == 0"></li>
                  <li class="andonBody" v-for="(item,index) in orderList" :key="index" v-else>
                    <div>{{item.order}}</div>
                    <div v-text="showTimeStr(item.create_time*1000)"></div>
                    <div>{{item.location}}</div>
                    <div>{{item.expection}}</div>
                    <div>{{Math.floor(item.cost_time/60)}}分钟</div>
                    <div
                      :style="{'color':item.status_value==2?'#FE3F3F':(item.status==3?'#45EEFF':'#95F204')}"
                    >{{item.status_value==2?'待签到':(item.status_value==3?'处理中':'待确认')}}</div>
                    <div style="width:81.44px">{{item.handler}}</div>
                    <div>{{(item.group)}}</div>
                  </li>
                  <!-- </tbody> -->
                </ul>
              </vue-seamless-scroll>
            </div>
          </div>
        </div>

        <!-- 底部 end -->
      </div>
      <!-- 中间 end -->

      <!-- 右边 -->
      <div class="formBox_right">
        <!-- 异常事件分布 -->
        <div class="formBox abnormal">
          <div class="form_title">安灯状态分布</div>
          <div class="formMain table_bg">
            <div class="chart_histogram" id="histogram" style="height:300px"></div>
          </div>
        </div>
        <!-- 异常事件分布 end -->

        <!-- OEE七大损失分布 -->
        <div class="formBox">
          <div class="form_title loss_title">OEE损失分布</div>
          <div class="formMain table_bg pieBox">
            <div class="stackingBar" id="pieForm_A" ref="pieForm_A"></div>
          </div>
        </div>
        <!-- OEE七大损失分布 end -->
      </div>
      <!-- 右边 end -->
    </div>
    <!-- 看板内容 end -->

    <!-- oee损失详情 -->
    <Modal
      v-model="detailtwomodal"
      :closable="false"
      footer-hide
      :styles="{top: '200px',width:'1000px'}"
    >
      <div class="modal_body dashTable" style="width:1000px!important;margin:-16px;">
        <Table highlight-row border :data="tableData3" :columns="tableColumns3" max-height="250"></Table>
        <Table
          v-show="showTable"
          highlight-row
          border
          :data="tableData4"
          :columns="tableColumns4"
          max-height="250"
        ></Table>
      </div>
    </Modal>
    <!-- 各通道OEE分布 end -->
  </div>
</template>

<script>
import echarts from 'echarts';
import vueSeamlessScroll from 'vue-seamless-scroll';
import moment from 'moment';
import { setTimeout, clearTimeout, setInterval, clearInterval } from 'timers';

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

export default {
    inject: ['reload'], // 接受App那边提供的方法
    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'), // 当前时间
            show: true,
            line1: '', // 产线一
            line2: '', // 产线二
            line3: '', // 产线三
            line4: '', // 产线四
            line5: '', // 产线五
            timerx: '',
            timer1: '',
            timer2: '',
            init_time: '', // 20分钟刷新一次
            channel1: [], // 深克隆数组
            oeeNum: 0, // oee默认值
            // 异常最大值
            maxAbnormalNumber: 87,
            // 异常列表
            abnormalList: [], // 安灯处理效率列表
            colorList: ['#FF9922', '#FF9922', '#FF9922', '#3C9EFF', '#3C9EFF'], // 异常Top5颜色
            // 安灯处理效率列表
            // andonList:[],
            andonList: [],
            // 今日安灯次数
            todayNum: 0,
            // 已处理工单
            alreadyHandleNum: 0,
            // 未处理工单
            nonHandleNum: 0,
            // 处理中工单
            handlingNum: 0,
            // 通道数据列表
            channelList: [
                // {
                //   name: 'C3.7',
                //   current: 8,
                //   handle: 5,
                //   accept: 3,
                //   background: require('../../../static/images/u1049.svg')
                // },
                // {
                //   name: 'C3.6',
                //   current: 8,
                //   handle: 5,
                //   accept: 3,
                //   background: require('../../../static/images/u1046.svg')
                // },
                // {
                //   name: 'C3.5',
                //   current: 8,
                //   handle: 5,
                //   accept: 3,
                //   background: require('../../../static/images/u1032.svg')
                // },
                // {
                //   name: 'C3.4',
                //   current: 8,
                //   handle: 5,
                //   accept: 3,
                //   background: require('../../../static/images/u1032.svg')
                // },
                // {
                //   name: 'C3.3',
                //   current: 8,
                //   handle: 5,
                //   accept: 3,
                //   background: require('../../../static/images/u1032.svg')
                // }
            ],
            orderList: [],
            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'
                }
            ],
            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'
                }
            ]
        };
    },
    watch: {},
    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)
            };
        }
    },
    methods: {
    //   返回上一页
        back () {
            this.$router.go(-1);
        },
        // 跳转页面
        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;
        },
        settingadd () {
            // 选择查询时间
            if (this.timer1) {
                clearInterval(this.timer1);
                clearInterval(this.timerx);
                this.page_reload();
                this.timerx = setInterval(() => {
                    this.page_reload();
                }, 1000 * 60 * 10);
                this.timer1 = setInterval(() => {
                    location.reload();
                    // this.page_reload()
                }, 1000 * 60 * 60 * 2);
            }
            this.settingmodal = false;
            // 点击确认
        },
        // 获取产线异常各项百分比
        page_reload () {
            // this.nowTime = moment(new Date().getTime()).format('YYYY-MM-DD')
            this.datetime = moment(this.datetime).format('YYYY-MM-DD');
            this.init_getpercentage();
            this.init_showPop();
            this.getline();
            this.get_center_bottom_data();
            this.init_toHistogram();
            this.init_toPie();
            //this.loadProduce();
            this.init_center_top_data();
            this.init_showPop1();
        },
        init_getpercentage () {
            var params = {
                date: this.datetime
            };
            this.axios
                .request({
                    url: 'dashboard/DashboardAndon/SecondExpcectionTop5',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret == 1) {
                        var arr = [];
                        if (res.data.data.length > 0) {
                            var Basics_num = res.data.data[0].cost;
                            res.data.data.forEach((item) => {
                                var obj = {};
                                obj.name =
                  item.expection && item.expection.length > 5
                      ? item.expection.substring(0, 5)
                      : item.expection;
                                obj.number = Math.floor(item.cost / 60) + '分钟';
                                obj.percentage =
                  ((item.cost / Basics_num).toFixed(2) * 100).toFixed(0) + '%';
                                arr.push(obj);
                            });
                        }
                        this.abnormalList = arr;
                    }
                });
        },
        init_showPop () {
            var params = {
                date: this.datetime
            };
            this.axios
                .request({
                    url: 'dashboard/DashboardAndon/AndonHandleCost',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret == 1) {
                        var arr = [];
                        res.data.data.forEach((item) => {
                            var obj = {
                                show: false
                            };
                            obj.type =
                item.expection && item.expection.length > 6
                    ? item.expection.substring(0, 6) + '...'
                    : item.expection;
                            obj.reponseTime =
                (item.count == 0
                    ? 0
                    : Math.floor(item.handle / 60 / item.count)) + '分钟';
                            obj.handleTime =
                (item.count == 0
                    ? 0
                    : Math.floor(item.cost / 60 / item.count)) + '分钟';
                            obj.department = item.group;
                            obj.show = item.show;
                            arr.push(obj);
                        });
                        this.andonList = arr;
                    }
                });
        },

        init_center_top_data () {
            // 获取中上四个框
            var params = {
                date: this.datetime
            };
            this.axios
                .request({
                    url: 'dashboard/DashboardAndon/AndonCount',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret == 1) {
                        this.todayNum = res.data.data.today_count;
                        this.alreadyHandleNum = res.data.data.handle_count;
                        this.nonHandleNum = res.data.data.unhandle_count;
                        this.handlingNum = res.data.data.handling_count;
                    }
                });
        },
        getline () {
            // 获取动态产线
            this.axios
                .request({
                    url: 'dashboard/Dashboardlevel/getline',
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        var data = res.data.data;
                        var num = res.data.data.length;
                        if (num == 1) {
                            this.line1 = data[0].title;
                        } else if (num == 2) {
                            this.line1 = data[0].title;
                            this.line2 = data[1].title;
                        } else if (num == 3) {
                            this.line1 = data[0].title;
                            this.line2 = data[1].title;
                            this.line3 = data[2].title;
                        } else if (num == 4) {
                            this.line1 = data[0].title;
                            this.line2 = data[1].title;
                            this.line3 = data[2].title;
                            this.line4 = data[3].title;
                        } else if (num == 5) {
                            this.line1 = data[0].title;
                            this.line2 = data[1].title;
                            this.line3 = data[2].title;
                            this.line4 = data[3].title;
                            this.line5 = data[4].title;
                        } else {
                        }
                    } else {
                    }
                });
        },
        get_center_bottom_data () {
            // 获取center_bottom
            var params = {
                date: this.datetime
            };
            this.axios
                .request({
                    url: 'dashboard/DashboardAndon/GetAndonDetail',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        // this.orderList = res.data.data
                        var arr = [];
                        res.data.data.forEach((item) => {
                            var obj = {};
                            obj.order = item.order;
                            obj.create_time = item.create_time;
                            obj.location = item.location == null ? '' : item.location;
                            obj.expection = item.expection.substring(0, 12);
                            obj.cost_time = item.cost_time;
                            obj.status = item.status;
                            obj.status_value = item.status_value;

                            obj.handler = item.handler == '' ? '暂无' : item.handler;
                            obj.group =
                item.group.length > 5
                    ? item.group.slice(0, 5) + ''
                    : item.group;
                            arr.push(obj);
                        });
                        this.orderList = arr;
                    } else {
                    }
                });
        },
        init_toHistogram () {
            var params = {
                date: this.datetime
            };
            this.axios
                .request({
                    url: 'dashboard/DashboardAndon/AndonGroupCount',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.toHistogram(
                            res.data.data.x,
                            res.data.data.y1,
                            res.data.data.y2,
                            res.data.data.y3
                        );
                    } else {
                    }
                });
        },
        // 异常事件分布
        toHistogram (data_x, data_y1, data_y2, data_y3) {
            var datas = [];
            var data_y1 = data_y1;
            var data_y2 = data_y2;
            var data_y3 = data_y3;
            // console.log(data_y1.length)

            for (var i = 0; i < data_y1.length; i++) {
                datas.push(data_y1[i] + data_y2[i] + data_y3[i]);
            }

            var myChart = echarts.init(document.getElementById('histogram'));
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                textStyle: {
                    color: '#ffffff'
                },
                legend: {
                    data: ['待签到', '处理中', '待确认'],
                    textStyle: {
                        color: '#ffffff'
                    }
                },
                grid: {
                    left: '10%',
                    right: '10%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        name: '岗位',
                        type: 'category',
                        data: data_x,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#c4c4c4'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45
                        }
                    }
                ],
                yAxis: [
                    {
                        name: '工单数量',
                        type: 'value',
                        axisLine: {
                            // show: false
                        },
                        minInterval: 1,
                        axisTick: {
                            // y轴刻度线
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '待签到',
                        type: 'bar',
                        barWidth: 20,
                        stack: '广告',
                        itemStyle: {
                            normal: {
                                color: '#C81842'
                            }
                        },

                        data: data_y1
                    },
                    {
                        name: '处理中',
                        type: 'bar',
                        barWidth: 20,
                        stack: '广告',
                        itemStyle: {
                            normal: {
                                color: '#FF9318'
                            }
                        },

                        data: data_y2
                    },
                    {
                        name: '待确认',
                        type: 'bar',
                        barWidth: 20,
                        stack: '广告',
                        itemStyle: {
                            normal: {
                                color: '#0086FE'
                            }
                        },

                        data: data_y3
                    },
                    {
                        name: '总计',
                        type: 'line',
                        lineStyle: {
                            opacity: 0
                        },
                        label: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        data: datas
                    }
                ]
            };

            myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },

        // OEE七大损失分布
        init_toPie () {
            var params = {
                date: this.datetime
            };
            this.axios
                .request({
                    url: 'dashboard/DashboardAndon/AndonExpectionPercentage',
                    params,
                    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 = [];
                        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).toFixed(2) * 100).toFixed(0) +
                '%';
                            arr.push(obj);
                            colorlist.push(item.color);
                        });
                        this.toPie(arr, colorlist);
                    }
                });
        },
        toPie (toPie_arr, colorlist) {
            var cost = 100 - this.oeeNum <= 0 ? 0 : (100 - this.oeeNum).toFixed(2);

            let div =
        '<div id="divEchartcon" style="width:100%;height:386px;"></div>';
            let dom = this.$refs.pieForm_A;
            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: ['#FF6A2B', '#FFD742', '#FF4181', '#662OFF', '#698AFE', '#19FFFF', '#5AF158', '#808080'],
                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;
        },
        // 根据秒求天小时分钟
        showTimeStr (val) {
            return moment(val).format('YYYY-MM-DD HH:mm');
        },
        // 初始化淡入淡出
        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);
                        }
                    }
                });
        },
        // 加载数据
        loadProduce () {
            // 为了获取oee
            var params = {
                section: 0,
                date: this.datetime
            };
            this.axios
                .request({
                    url: 'dashboard/DashboardFactory/GetFactoryAchievement',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.oeeNum = res.data.data.oeeNum;
                        this.init_toPie();
                    } else {
                    }
                });
        }
    },
    created () {},
    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;
        }
        this.init_getpercentage();
        this.init_showPop();
        this.getline();
        this.get_center_bottom_data();
        this.init_toHistogram();
        this.init_toPie();
        this.init_showPop1();
        //this.loadProduce();
        this.init_center_top_data();
        this.timerx = setInterval(() => {
            this.page_reload();
        }, 1000 * 60 * 10);
        this.timer1 = setInterval(() => {
            location.reload();
            //  this.page_reload()
        }, 1000 * 60 * 60 * 2);
    },
    beforeDestroy () {
        clearInterval(this.timerx);
        clearInterval(this.timer1);
    }
};
</script>
<style lang="less" scoped>
@import url("./andonscreen");
.stackingBar {
  width: 100%;
  height: 390px;
  overflow: hidden;
  // 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;
    }
  }
}
.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>
