<template>
  <div class="testdiv" style="font-size:15px">
    <!-- 看板标题 -->
    <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>
    <!-- 看板标题 end -->
    <!-- 看板内容 -->
    <div class="container">
      <!-- 左边看板 -->
      <div class="formBox_left">
        <!-- 进料检验结果 -->
        <div class="formBox compre_analysis">
          <div class="form_title">进料检验结果</div>
          <div class="formMain table_bg resultMain">
            <div class="resultBox resultBox_left">
              <div class="result" id="result"></div>
              <ul>
                <li>
                  <div class="first-batch"></div>合格批次
                  <span>{{Qualified}}</span>
                </li>
                <!--<li>
                  <div class="second-batch"></div>返工批次
                  <span>{{Rework}}</span>
                </li>-->
                <li>
                  <div class="fourth-batch"></div>让步接收批次
                  <span>{{Reception}}</span>
                </li>
                <li>
                  <div class=" third-batch"></div>拒收批次
                  <span>{{Rejection}}</span>
                </li>
              </ul>
            </div>
            <div class="secondResult">
              <ul class="result_table_title">
                <li>序号</li>
                <li>供应商</li>
                <li>批次号</li>
                <li>总数</li>
                <li>抽检数量</li>
              </ul>
              <ul class="result_table">
                <li v-for="(item,index) in resultList" :key="index" :data-id="item.id" :class="{anim:animate==false}">
                  <div class="number" >{{item.index}}</div>
                  <div>{{item.supplier}}</div>
                  <div>{{item.batchnumber}}</div>
                  <div>{{item.total}}</div>
                  <div>{{item.random}}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 进料检验结果 end -->

        <!-- Master Check -->
        <div class="formBox" v-show="showmaster">
          <div class="form_title">Master Check</div>
          <div class="formMain">
            <ul class="table_title_bg">
              <li v-if="masterList.length == 0"></li>
              <li v-for="(item,index) in masterList" :key="index" v-else>{{item.channel}}</li>
            </ul>
            <div style="max-height:256px;overflow:hidden">
            <table style="display:table">
              <tbody>
                <tr v-for="(ele,index) in masterDetailList" :key="index" :class="{anim:animate1==false}">
                  <td v-for="(ele1,index1) in masterList.length" :key="index1">
                    <span :style="{'background-color':
                        ele['status'+index1] === 1 ? '#0000FF' : (ele['status'+index1] === 2 ? '#FFFF00' : (ele['status'+index1] === 3 ? '#8FEA5E' :
                          (ele['status'+index1] === 4 ? '#D9001B' : (ele['status'+index1] === 5 ? '#F59A23' : ''))))}">{{ele['section'+index1]}}</span>
                  </td>
                </tr>
              </tbody>
            </table>
            </div>
            <div class="statusBox">
              <div>
                <div></div>未检验
              </div>
              <div>
                <div></div>检验中
              </div>
              <div>
                <div></div>合格
              </div>
              <div>
                <div></div>不合格
              </div>
              <div>
                <div></div>让步接收
              </div>
            </div>
          </div>
        </div>
        <!-- 首件进度-->
        <div class="formBox" v-show="showfirstpart">
          <div class="form_title">首件进度</div>
          <div class="formMain">
            <ul class="table_title_bg">
              <li v-if="masterList1.length == 0"></li>
              <li v-for="(item,index) in masterList1" :key="index" v-else>{{item.channel}}</li>
            </ul>
            <div style="max-height:256px;overflow:hidden">
            <table style="display:table">
              <tbody>
                <tr v-for="(ele,index) in masterDetailList1" :key="index" :class="{anim:animate2==false}">
                  <td v-for="(ele1,index1) in masterList1.length" :key="index1">
                    <span :style="{'background-color':
                        ele['status'+index1] === 1 ? '#0000FF' : (ele['status'+index1] === 2 ? '#FFFF00' : (ele['status'+index1] === 3 ? '#8FEA5E' :
                          (ele['status'+index1] === 4 ? '#D9001B' : (ele['status'+index1] === 5 ? '#F59A23' : ''))))}">{{ele['section'+index1]}}</span>
                  </td>
                </tr>
              </tbody>
            </table>
            </div>
            <div class="statusBox">
              <div>
                <div></div>未检验
              </div>
              <div>
                <div></div>检验中
              </div>
              <div>
                <div></div>合格
              </div>
              <div>
                <div></div>不合格
              </div>
              <div>
                <div></div>让步接收
              </div>
            </div>
          </div>
        </div>
        <!-- Master Check end -->
      </div>
      <!-- 左边看板 end -->

      <!-- 中间看板 -->
      <div class="formBox_left formBox_middle">
        <!-- 顶部 -->
        <div class="middle_top">
          <!-- <div class="q_title">质量安灯数量</div> -->
          <div class="q_number">
            <div class="andeng_num">
              <div>质量安灯数量</div>
              <div class="allNumber">{{total}}</div>
            </div>
            <div class="andeng_detail">
              <div class="ingBox detailBox">
                <div>待签到</div>
                <div class="ingNumber number">{{unhandle}}</div>
              </div>
              <div class="nonBox detailBox">
                <div>处理中</div>
                <div class="nonNumber number">{{handling}}</div>
              </div>
              <div class="doneBox detailBox">
                <div>待确认</div>
                <div class="doneNumber number">{{handle}}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 顶部 end -->

        <!-- 质量安灯详情 -->
        <div class="formBox">
          <div class="form_title">质量安灯详情</div>
          <div class="formMain table_bg">
            <div class="andeng" id="andeng"></div>
          </div>
        </div>
        <!-- 质量安灯详情 -->
      </div>
      <!-- 中间看板 end -->

      <!-- 右边看板 -->
      <div class="formBox_left formBox_right">
        <!-- 检验室检验状态 -->
        <div class="formBox compre_analysis">
          <div class="form_title">检验室检验状态</div>
          <div class="formMain table_bg">
            <div class="resultBox secondResult">
              <ul>
                <li>
                  <div class="A-batch"></div>待接收
                  <span>{{testing}}</span>
                </li>
                <li>
                  <div class="B-batch"></div>待检验
                  <span>{{recieve}}</span>
                </li>
                <li>
                  <div class="C-batch"></div>检验中
                  <span>{{checking}}</span>
                </li>
                <li>
                  <div class="D-batch"></div>检验完成
                  <span>{{compeleted}}</span>
                </li>
              </ul>
              <div class="result" id="status2"></div>
            </div>
            <div class="resultBox">
              <div class="result" id="status1"></div>
              <ul>
                <li>
                  <div class="first-batch"></div>合格数
                  <span>{{qualified1}}</span>
                </li>
                <li>
                  <div class="second-batch"></div>偏差放行
                  <span>{{deviationRelease}}</span>
                </li>
                <li>
                  <div class="third-batch"></div>不合格
                  <span>{{unQualified}}</span>
                </li>
              </ul>
            </div>

          </div>
        </div>
        <!-- 检验室检验状态 end -->

        <!-- FTQ -->
        <div class="formBox"  v-show="showfrq">
          <div class="form_title">一次合格率</div>
          <div class="formMain table_bg ftqBG">
            <div class="stackingBar" id="FTQ"></div>
          </div>
        </div>
        <div class="formBox" v-show="showscrap">
          <div class="form_title">报废数量</div>
          <div class="formMain table_bg ftqBG">
            <div class="stackingBar" id="Scrap"></div>
          </div>
        </div>
        <!-- FTQ end -->
      </div>
      <!-- 右边看板 end -->
    </div>
    <!-- 看板内容 end -->

    <!-- <embed src="" type=""> -->
  </div>
</template>
<script>
// import moment from 'moment'
import axios from '@/libs/api.request'
import echarts from 'echarts'
import moment from 'moment'
export default {
    components: {},
    data () {
        return {
            // MASTER
            imgLogo: require('../../../static/images/siger.png'), // logo
            masterList: [],
            resultList: [],
            Qualified: 0,
            Rework: 0,
            Reception: 0,
            Rejection: 0,
            Qualified1: 0,
            DeviationRelease: 0,
            UnQualified: 0,
            Compeleted: 0,
            Testing: 0,
            Recieve: 0,
            Checking: 0,
            total: 0,
            handle: 0,
            unhandle: 0,
            handling: 0,
            time: '',
            animate: true,
            animate1: true,
            animate2: true,
            masterDetailList: [],
            max: [],
            nowTime: moment(new Date().getTime()).format('YYYY-MM-DD'),
            timer: 0,
            showfrq: true,
            showscrap: false,
            showmaster: false,
            showfirstpart: true,
            masterDetailList1: [],
            max1: [],
            masterList1: [],
            interval1: 0,
            interval2: 0,
            interval3: 0,
            interval4: 0,
            interval5: 0,
            timeAll: 0 // 2小时刷新
        }
    },
    created () {
        if (this.timer) {
            clearInterval(this.timer)
        } else {
            this.nowTime = moment(new Date().getTime()).format('YYYY-MM-DD')
            this.CurentTime()
            this.gettoEcharts()
            this.gettoFTQ()
            this.gettoScrap()
            this.gettoStatus()
            this.gettoAndeng()
            // this.getChannelStatus()
            this.getChannelStatus1()
            this.interval1 = setInterval(this.scroll, 3000)
            this.interval3 = setInterval(this.showFtqScrap, 10000)
            // this.interval4 = setInterval(this.showMasterFirstPart, 60000)
            this.interval2 = setInterval(this.scroll1, 3000)
            this.interval5 = setInterval(this.scroll2, 3000)
            // 定时2分钟执行一次
            this.timer = setInterval(() => {
                this.nowTime = moment(new Date().getTime()).format('YYYY-MM-DD')
                this.CurentTime()
                this.gettoEcharts()
                this.gettoFTQ()
                this.gettoStatus()
                this.gettoAndeng()
                // this.getChannelStatus()
                this.getChannelStatus1()
                window.clearInterval(this.interval1)
                window.clearInterval(this.interval2)
                window.clearInterval(this.interval3)
                window.clearInterval(this.interval4)
                window.clearInterval(this.interval5)
                this.interval1 = setInterval(this.scroll, 3000) // 进料供应商让步接收 滚动
                this.interval3 = setInterval(this.showFtqScrap, 10000)// 报废 良率轮播
                // this.interval4 = setInterval(this.showMasterFirstPart, 60000)// 首检-首件轮播
                this.interval2 = setInterval(this.scroll1, 3000)// 首检 滚动
                this.interval5 = setInterval(this.scroll2, 3000)// 首件 滚动
            }, 120000)
        }

        // 俩小时整个页面刷新一次
        if (this.timeAll) {
            clearInterval(this.timeAll)
        } else {
            // 两小时后刷新,刷回当前时间
            this.timeAll = setInterval(() => {
                location.reload()
            }, 1000 * 60 * 60 * 2)
        }
    },
    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.toEcharts()
    // this.toEcharts2()
    // this.toFTQ()
    // this.toStatus()
    // this.toStatus2()
    // this.toAndeng()
    },
    methods: {
        showFtqScrap () {
            if (this.showfrq === false) {
                this.showfrq = true
            } else {
                this.showfrq = false
            }
            if (this.showscrap === false) {
                this.showscrap = true
            } else {
                this.showscrap = false
            }
        },
        showMasterFirstPart () {
            // if (this.showmaster === false) {
            //   this.showmaster = true
            // } else {
            //   this.showmaster = false
            // }
            // if (this.showfirstpart === false) {
            //   this.showfirstpart = true
            // } else {
            //   this.showfirstpart = false
            // }
        },
        gettoEcharts () {
            axios.request({
                url: '/dashboard/DashboardQms/GetIncomingCheckResult',
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    var data = res.data.data
                    this.Qualified = data.qualified
                    this.Rework = data.rework
                    this.Reception = data.reception
                    this.Rejection = data.rejection
                    this.resultList = []
                    data.details.forEach((ele, index) => {
                        this.resultList.push({
                            index: index + 1,
                            supplier: ele.name,
                            batchnumber: ele.batchnumber,
                            total: ele.total,
                            random: ele.random
                        })
                    })
                }
                this.toEcharts()
            })
        },
        gettoFTQ () {
            var datetime = moment(new Date()).format('YYYY-MM-DD')
            axios.request({
                // url: '/dashboard/DashboardQms/GetQmsChannelFtq',
                url: 'dashboard/DashboardQms/GetChannelFtq?date=' + datetime,
                method: 'get'
            }).then(res => {
                var x = []
                var y = []
                if (res.data.ret === 1) {
                    var data = res.data.data
                    x = data.x
                    y = data.y
                }
                this.toFTQ(x, y)
            })
        },
        gettoScrap () {
            axios.request({
                url: '/dashboard/DashboardQms/GetScrapData',
                method: 'get'
            }).then(res => {
                var x = []
                var y = []
                if (res.data.ret === 1) {
                    var data = res.data.data
                    x = data.x
                    y = data.y
                }
                this.toScrap(x, y)
            })
        },
        gettoStatus () {
            axios.request({
                url: '/dashboard/DashboardQms/GetTestRoomCheckStatus',
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    var data = res.data.data
                    this.Qualified1 = data.qualified
                    this.DeviationRelease = data.deviationRelease,
                    this.UnQualified = data.unQualified
                    this.Compeleted = data.compeleted
                    this.Testing = data.testing
                    this.Recieve = data.recieved
                    this.Checking = data.checking
                }
                this.toStatus()
                this.toStatus2()
            })
        },
        gettoAndeng () {
            axios.request({
                url: '/dashboard/DashboardQms/GetFailureData',
                method: 'get'
            }).then(res => {
                var x = []
                var y1 = []
                var y2 = []
                var y3 = []
                if (res.data.ret === 1) {
                    var data = res.data.data
                    x = data.x
                    y1 = data.unhandles
                    y2 = data.handlings
                    y3 = data.handles

                    this.total = data.total
                    this.unhandle = data.unhandle
                    this.handling = data.handling
                    this.handle = data.handle
                }
                this.toAndeng(x, y1, y2, y3)
            })
        },
        // 进料检测结果1
        toEcharts () {
            var myChart = echarts.init(document.getElementById('result'))
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                color: ['#8FEA5E', '#FF40AF', '#FF1938'], // ['#8FEA5E', '#FF9318', '#FF40AF', '#FF1938'],
                series: [
                    {
                        name: '进料检测结果',
                        type: 'pie',
                        radius: ['65%', '80%'],
                        center: ['50%', '55%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '16',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            { value: this.Qualified, name: '合格批次' },
                            // { value: this.Rework, name: '返工批次' },
                            { value: this.Reception, name: '让步接收批次' },
                            { value: this.Rejection, name: '拒收批次' }
                        ]
                    }
                ]
            }

            myChart.setOption(option)
            window.onresize = function () {
                myChart.resize()
            }
        },
        // ftq
        toFTQ (x, y) {
            var myChart = echarts.init(document.getElementById('FTQ'))
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{c}%'
                },
                xAxis: {
                    type: 'category',
                    data: x,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#0383FA'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff' // 坐标值得具体的颜色
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#0383FA'
                        }
                    },

                    axisLabel: {
                        formatter: '{value} %',
                        show: true,
                        textStyle: {
                            color: '#fff' // 坐标值得具体的颜色
                        }
                    },
                    show: true
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    top: '8%',
                    bottom: '3%',
                    containLabel: true
                },
                series: [
                    {
                        data: y,
                        type: 'bar',
                        barWidth: '30%',
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var colorList = [
                                        '#0383FA',
                                        '#80FFFF',
                                        '#0383FA',
                                        '#80FFFF',
                                        '#0383FA'
                                    ]
                                    return colorList[params.dataIndex]
                                },
                                label: {
                                    show: true, // 开启显示
                                    position: 'top', // 在上方显示
                                    // formatter: '{c} %',
                                    formatter: function (value) {
                                        var data = ''
                                        if (value.value != 0) {
                                            data = value.value + '%'
                                        }
                                        return data
                                    },
                                    textStyle: { // 数值样式
                                        color: '#ffffff',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    }
                ]
            }

            myChart.setOption(option)
            window.onresize = function () {
                myChart.resize()
            }
        },
        // Scrap
        toScrap (x, y) {
            var myChart = echarts.init(document.getElementById('Scrap'))
            var option = {
                xAxis: {
                    type: 'category',
                    data: x,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#0383FA'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff' // 坐标值得具体的颜色
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1,
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#0383FA'
                        }
                    },

                    axisLabel: {
                        textStyle: {
                            color: '#fff' // 坐标值得具体的颜色
                        }
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    top: '8%',
                    bottom: '3%',
                    containLabel: true
                },
                series: [
                    {
                        data: y,
                        type: 'bar',
                        barWidth: '30%',
                        itemStyle: {
                            normal: {
                                lebel: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        color: 'white',
                                        fontSize: 16
                                    }
                                },
                                color: function (params) {
                                    var colorList = [
                                        '#0383FA',
                                        '#80FFFF',
                                        '#0383FA',
                                        '#80FFFF',
                                        '#0383FA'
                                    ]
                                    return colorList[params.dataIndex]
                                },
                                label: {
                                    show: true, // 开启显示
                                    position: 'top', // 在上方显示
                                    textStyle: { // 数值样式
                                        color: '#ffffff',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    }
                ]
            }

            myChart.setOption(option)
            window.onresize = function () {
                myChart.resize()
            }
        },
        getChannelStatus () {
            axios.request({
                url: '/dashboard/DashboardQms/GetCheckStationStatus?type=1',
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.masterList = res.data.data
                    var masterDetailList = []
                    var max = 0
                    this.masterList.forEach(ele => {
                        if (ele.checkSections.length > max) {
                            max = ele.checkSections.length
                        }
                    })
                    for (var i = 0; i < max; i++) {
                        this.max.push(i + 1)
                        var detail = {}
                        this.masterList.forEach((ele, index) => {
                            if (ele.checkSections.length >= i + 1) {
                                detail['section' + index] = ele.checkSections[i].section
                                detail['status' + index] = ele.checkSections[i].status
                            } else {
                                detail['section' + index] = ''
                                detail['status' + index + ''] = ''
                            }
                        })
                        masterDetailList.push(detail)
                    }
                    this.masterDetailList = masterDetailList
                }
            })
        },
        getChannelStatus1 () {
            axios.request({
                url: '/dashboard/DashboardQms/GetCheckStationStatus?type=5',
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.masterList1 = res.data.data
                    var masterDetailList = []
                    var max = 0
                    this.masterList1.forEach(ele => {
                        if (ele.checkSections.length > max) {
                            max = ele.checkSections.length
                        }
                    })
                    for (var i = 0; i < max; i++) {
                        this.max1.push(i + 1)
                        var detail = {}
                        this.masterList1.forEach((ele, index) => {
                            if (ele.checkSections.length >= i + 1) {
                                detail['section' + index] = ele.checkSections[i].section
                                detail['status' + index] = ele.checkSections[i].status
                            } else {
                                detail['section' + index] = ''
                                detail['status' + index + ''] = ''
                            }
                        })
                        masterDetailList.push(detail)
                    }
                    this.masterDetailList1 = masterDetailList
                }
            })
        },

        // 检验室检验状态1
        toStatus () {
            var myChart = echarts.init(document.getElementById('status1'))
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                color: ['#8FEA5E', '#FF9318', '#FF1938'],
                series: [
                    {
                        name: '送检检测结果',
                        type: 'pie',
                        radius: ['0%', '80%'],
                        center: ['50%', '55%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            { value: this.Qualified1, name: '合格数' },
                            { value: this.DeviationRelease, name: '偏差放行' },
                            { value: this.UnQualified, name: '不合格' }
                        ]
                    }
                ]
            }

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

        // 检验室检验状态2
        toStatus2 () {
            var myChart = echarts.init(document.getElementById('status2'))
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                color: ['#0000FF', '#FFD669', '#F59A23', '#95F204'],
                series: [
                    {
                        name: '送检检测结果',
                        type: 'pie',
                        radius: ['65%', '80%'],
                        center: ['60%', '46%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '16',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            { value: this.Testing, name: '待接收' },
                            { value: this.Recieve, name: '待检验' },
                            { value: this.Checking, name: '检验中' },
                            { value: this.Compeleted, name: '检验完成' }
                        ]
                    }
                ]
            }

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

        // 质量安灯详情
        toAndeng (x, y1, y2, y3) {
            var datas = []
            var data_y1 = y1
            var data_y2 = y2
            var data_y3 = 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('andeng'))
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                textStyle: {
                    color: '#ffffff'
                },
                // legend: {
                //   data: ['未处理', '处理中', '待复线'],
                //   textStyle: {
                //     color: '#ffffff'
                //   }
                // },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '7%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: x,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
            			color: '#476BD3',
            			width: 1,
            			type: 'solid'			// ---类型
            		}
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        minInterval: 1,
                        axisLine: {
                            show: true,
                            lineStyle: {
            			color: '#476BD3',
            			width: 1,
            			type: 'solid'			// ---类型
            		}
                        },
                        axisTick: {
                            // y轴刻度线
                            show: false
                        },
                        splitLine: {					// ---grid 区域中的分隔线
            		show: false,					// ---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
            		lineStyle: {
            			color: '#476BD3',
            			width: 1,
            			type: 'dashed'			// ---类型
            		}
            	},
            	splitArea: {					// --网格区域
            		show: false					// ---是否显示，默认false
            	}
                    }
                ],
                series: [
                    {
                        name: '待确认',
                        type: 'bar',
                        barWidth: 20,
                        stack: '广告',
                        itemStyle: {
                            normal: {
                                color: '#8FEB5B'
                            }
                        },
                        data: y3
                    },
                    {
                        name: '待签到',
                        type: 'bar',
                        barWidth: 20,
                        stack: '广告',
                        itemStyle: {
                            normal: {
                                color: '#FF9318'
                            }
                        },
                        data: y1
                    },
                    {
                        name: '处理中',
                        type: 'bar',
                        barWidth: 20,
                        stack: '广告',
                        itemStyle: {
                            normal: {
                                color: '#FF1938'
                            }
                        },
                        data: y2
                    },
                    {
                        name: '总计',
                        type: 'line',
                        lineStyle: {
                            opacity: 0
                        },
                        label: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        data: datas
                    }
                ]
            }

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

        // 得到当前时间字符串，格式为：YYYY-MM-DD HH:MM:SS
        CurentTime () {
            var now = new Date()
            var year = now.getFullYear() // 年
            var month = now.getMonth() + 1 // 月
            var day = now.getDate() // 日
            var hh = now.getHours() // 时
            var mm = now.getMinutes() // 分
            var ss = now.getSeconds() // 秒
            var clock = year + '-'
            if (month < 10) clock += '0'
            clock += month + '-'
            if (day < 10) clock += '0'
            clock += day + ' '
            if (hh < 10) clock += '0'
            clock += hh + ':'
            if (mm < 10) clock += '0'
            clock += mm + ':'
            if (ss < 10) clock += '0'
            clock += ss
            this.time = clock
        },
        scroll () {
            this.animate = true
            this.resultList.push(this.resultList[0])
            this.resultList.shift()
            this.animate = false
        },
        scroll1 () {
            this.animate1 = true
            this.masterDetailList.push(this.masterDetailList[0])
            this.masterDetailList.shift()
            this.animate1 = false
        },
        scroll2 () {
            this.animate2 = true
            this.masterDetailList1.push(this.masterDetailList1[0])
            this.masterDetailList1.shift()
            this.animate2 = false
        },
        // 返回上一页
        back () {
            this.$router.go(-1) // 返回上一层
        }
    },
    destroyed () {
        clearInterval(this.timer)
        clearInterval(this.timeAll)
    }
}
</script>

<style lang="less" scoped>
@import "./screen.less";
.anim{
  transition: all 0.5s;
}
.chart_dadar {
  height: 315px;
}
.gaugeForm {
  height: 100px;
}
.pieForm {
  height: 160px;
  width: 160px;
}
.barForm {
  width: 526px;
  height: 280px;
}
.stackingBar {
  width: 480px;
  height: 280px;
  margin: 30px auto;
}
.andeng{
  width:494px;
  height:284px;
  margin:13px auto;
}
</style>
