<template>
  <div class="testdiv">
    <!-- 看板标题 -->
    <div class="top_title">
      中国区综合看板
      <img :src="imgLogo" alt class="logo"  v-on:click="back"/>
      <!-- <div class="times_bg">2020-02-02 14:23</div> -->
      <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" v-model="settingobj.date" type="date"  placeholder="" style="width:200px;margin-left:9px;"></DatePicker>
            </div>
            <div class="out_row">
              <label >安全天数设置:</label>
              <div class="out_item">
                <div class="item_row">
                  <div class="item_content"><span style="background:#70B603;"></span><input class="publicinput" v-model="settingobj.level1" type="number"></div>
                  <div class="item_content"><span style="background:#81B35A;"></span><input class="publicinput" v-model="settingobj.level2" type="number"></div>
                </div>
                <div class="item_row">
                  <div class="item_content"><span style="background:#9C933D;"></span><input class="publicinput" v-model="settingobj.level3" type="number"></div>
                  <div class="item_content"><span style="background:#FF9318;"></span><input class="publicinput" v-model="settingobj.level4" type="number"></div>
                </div>
                <div class="item_row">
                  <div class="item_content"><span style="background:#FF40AF;"></span><input class="publicinput" v-model="settingobj.level5" type="number"></div>
                  <div class="item_content"><span style="background:#FF1983;"></span><input class="publicinput" v-model="settingobj.level6" type="number"></div>
                </div>
              </div>
            </div>
            <div class="out_row">
              <label >OEE指标评分:</label>
              <div class="out_item">
                <div class="item_row">
                  <div class="item_content"><span style="background:rgba(149, 242, 4, 1);"></span><input class="publicinput" v-model="settingobj.oee1" type="number"></div>
                  <div class="item_content"><span style="background:#FF9318;"></span><input class="publicinput" v-model="settingobj.oee2" type="number"></div>
                </div>
                <div class="item_row">
                  <div class="item_content"><span style="background:rgba(255, 25, 131, 1);"></span><input class="publicinput" v-model="settingobj.oee3" type="number"></div>
                </div>
              </div>
            </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">零事故天数</div>
          <div class="formMain table_bg">
            <div class="color_bar">
              <div class="colorBar_one">
                <i></i>
                <span>>{{settingobj.level1}}天</span>
              </div>
              <div class="colorBar_two">
                <i></i>
                <span>{{settingobj.level2}}天</span>
              </div>
              <div class="colorBar_three">
                <i></i>
                <span>{{settingobj.level3}}天</span>
              </div>
              <div class="colorBar_four">
                <i></i>
                <span>{{settingobj.level4}}天</span>
              </div>
              <div class="colorBar_five">
                <i></i>
                <span>{{settingobj.level5}}天</span>
              </div>
              <div class="colorBar_six">
                <i></i>
                <span>{{settingobj.level6}}天</span>
              </div>
            </div>
            <div class="stackingBar" id="stackingBar"></div>
          </div>
        </div>
        <!-- 工厂零事故天数 end -->

        <!-- 产量达成率分析 -->
        <div class="formBox">
          <div class="form_title">标准产量达成率</div>
          <div class="formMain tableForm">
            <ul class="table_title_bg">
              <li>厂区名称</li>
              <li>理论产出</li>
              <li>实际产出</li>
              <li>达成率</li>
            </ul>
            <ul class="tableDetail">
              <li v-if="yieldLists.length == 0"></li>
              <li v-for="(yieldList,index) in yieldLists"
                  :key="index"
                  :data-id="yieldList.id"
                  v-else>
                  <div>{{yieldList.name}}</div>
                  <div>{{yieldList.theory}}</div>
                  <div>{{yieldList.actual}}</div>
                  <div>{{yieldList.rate}}</div>
              </li>
            </ul>
            <!-- <table>
              <tbody>
                <tr v-if="yieldLists.length == 0">
                  <td colspan="4">暂无数据</td>
                </tr>
                <tr
                  v-for="(yieldList,index) in yieldLists"
                  :key="index"
                  :data-id="yieldList.id"
                  v-else
                >
                  <td>{{yieldList.name}}</td>
                  <td>{{yieldList.theory}}</td>
                  <td>{{yieldList.actual}}</td>
                  <td>{{yieldList.rate}}</td>
                </tr>
              </tbody>
            </table> -->
          </div>
        </div>
        <!-- 产量达成率分析 end -->
      </div>
      <!-- 左边看板 end -->

      <!-- 中间看板 -->
      <div class="formBox_middle">
        <!-- 顶部 -->
        <div class="middle_top">
          <div class="gaugeFormTotle">
            <div class="gaugeFormTitle">零事故天数</div>
            <div class="days_time" id>{{safeavg}}</div>
          </div>
          <div class="gaugeFormTotle">
            <div class="gaugeFormTitle">OEE</div>
            <div class="gaugeForm" id="gaugeForm_mid"></div>
          </div>
          <div class="gaugeFormTotle">
            <div class="gaugeFormTitle">准时交付率</div>
            <div class="gaugeForm" id="gaugeForm_right"></div>
          </div>

          <div class="gaugeFormTotle">
            <div class="gaugeFormTitle">客户投诉次数</div>
            <div class="days_time" id="gaugeForm_left">{{quanlityRate}}</div>
          </div>
        </div>
        <!-- 顶部 end -->

        <!-- 地图分布 -->
        <div class="middle_map">
          <div class="cnMpa">
            <div @click="JumpPage()" class="tag_down_mid tagBox tagDownBox">
              <img src="../../../static/images/u55.svg" type />
              <div class="tag_main">
                <div class="tag_title">ATC II 工厂</div>
                <div class="tag_content">
                  <div>OEE：{{rate1}}%</div>
                  <div>零事故天数：{{day1}}天</div>
                </div>
              </div>
              <div class="dot">
              </div>
              <span class="midDot"></span>
            </div>
            <div @click="JumpPage()" class="tag_top_left tagBox">
              <img src="../../../static/images/u54.svg" type />
              <div class="tag_main">
                <div class="tag_title">济南工厂</div>
                <div class="tag_content">
                  <div>OEE：{{rate2}}%</div>
                  <div>零事故天数：{{day2}}天</div>
                </div>
              </div>
                <div class="dot">
                </div>
                <span class="midDot"></span>
            </div>
            <div @click="JumpPage()" class="tag_top_mid tagBox">
              <img src="../../../static/images/u245.svg" type />
              <div class="tag_main">
                <div class="tag_title">南口工厂</div>
                <div class="tag_content">
                  <div>OEE：{{rate3}}%</div>
                  <div>零事故天数：{{day3}}天</div>
                </div>
              </div>
              <div class="dot">
              </div>
              <span class="midDot"></span>
            </div>
            <div @click="JumpPage()" class="tag_top_right tagBox">
              <img src="../../../static/images/u239.svg" type />
              <div class="tag_main">
                <div class="tag_title">大连工厂</div>
                <div class="tag_content">
                  <div>OEE：{{rate4}}%</div>
                  <div>零事故天数：{{day4}}天</div>
                </div>
              </div>
              <div class="dot">
              </div>
              <span class="midDot"></span>
            </div>
            <div @click="JumpPage()" class="tag_down_left tagBox tagDownBox">
              <img src="../../../static/images/u251.svg" type />
              <div class="tag_main">
                <div class="tag_title">芜湖工厂</div>
                <div class="tag_content">
                  <div>OEE：{{rate5}}%</div>
                  <div>零事故天数：{{day5}}天</div>
                </div>
              </div>
              <div class="dot">
              </div>
              <span class="midDot"></span>
            </div>
            <!-- <div class="tag_down_right tagBox tagDownBox">
              <img src="../../../static/images/u231.svg" type />
              <div class="tag_main">
                <div class="tag_title">青岛工厂</div>
                <div class="tag_content">
                  <div>综合OEE：{{rate6}}%</div>
                  <div>安全天数：{{day6}}天</div>
                </div>
              </div>
              <div class="dot">
              </div>
              <span class="midDot"></span>
            </div> -->
          </div>
        </div>
        <!-- 地图分布 end -->

        <!-- 中国区本月累计成本 -->
        <div class="middle_bottom">
          <div class="middle_bottom-title">中国区本月累计订单交付率：{{deliverRate}}%
            <span class="actual_rate"><i></i>实际交付率</span>
            <span class="target_rate"><i></i>目标交付率</span>
          </div>
          <div class="pieFormBox">
            <!-- <div class="pieForm" id="pieForm"></div> -->
            <div class="progressBox">
              <ul class="progressForm">
                <li v-for="(item,index) in moneyList" :key="index" :data-id="item.id">
                  <div class="number">{{index+1}}</div>
                  <div class="factorName">{{item.name}}</div>
                  <div class="progressTotal">
                    <div class="progressBar" :style="{'width':item.delivery_target+'%'}"></div>
                    <div class="progress" :style="{'width':item.delivery+'%'}"></div>
                  </div>
                  <div class="money">
                    <span>{{item.delivery}}%</span> / {{item.delivery_target}}%
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 中国区本月累计成本 end -->
      </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="table_title">中国区各厂区客户投诉次数</div>
            <div class="barForm_C" id="barForm_C"></div>
          </div>
        </div>
        <!-- 质量合格率统计 end -->

        <!-- 综合OEE -->
        <div class="formBox ">
          <div class="form_title">整体设备效率OEE</div>
          <div class="formMain table_bg">
            <!-- <div class="table_title">中国区综合OEE：{{oeeRate}}%，各厂区OEE分布：</div> -->
            <div class="chart_dadar" id="main"></div>
          </div>
        </div>
        <!-- 综合OEE end -->
      </div>
      <!-- 右边看板 end -->
    </div>
    <!-- 看板内容 end -->

    <!-- <embed src="" type=""> -->
  </div>
</template>
<script>
// import moment from 'moment'
import echarts from 'echarts'
import moment from 'moment'
export default {
    components: {},
    data () {
        return {
            imgLogo: require('../../../static/images/siger.png'), // logo
            settingmodal: false, // 设置弹出框
            settingobj: {
                date: moment(new Date().getTime()).format('YYYY-MM-DD'),
                level1: 0,
                level2: 0,
                level3: 0,
                level4: 0,
                level5: 0,
                level6: 0,
                oee1: 0,
                oee2: 0,
                oee3: 0
            },
            colorArray: [], // 零事故天数控制颜色
            colorArray2: [], // 仪表盘颜色控制
            // 产量达成率分析表格
            nowTime: moment(new Date().getTime()).format('YYYY-MM-DD'),
            safeavg: 0,
            yieldLists: [],
            rate1: '67',
            day1: '60',
            rate2: '67',
            day2: '60',
            rate3: '67',
            day3: '60',
            rate4: '67',
            day4: '60',
            rate5: '67',
            day5: '60',
            flag: true,
            deliverRate: '0',
            // 中国区本月累计成本数组
            moneyList: [],
            oeeRate: 0,
            quanlityRate: 0,
            timer: 0, // 20分钟定时器
            timeAll: 0 // 两小时刷新
        }
    },
    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
        }
        if (this.timer) {
            clearInterval(this.timer)
        } else {
            this.settingobj.date = moment(this.settingobj.date).format('YYYY-MM-DD')
            // this.nowTime = this.settingobj.date
            this.loadsetting()
            this.loaddata()
            // 定时20分钟执行一次,时间是设置的时间
            this.timer = setInterval(() => {
                this.settingobj.date = moment(this.settingobj.date).format('YYYY-MM-DD')
                // this.nowTime = this.settingobj.date
                this.loadsetting()
                this.loaddata()
            }, 600000)
        }

        // 俩小时整个页面刷新一次
        if (this.timeAll) {
            clearInterval(this.timeAll)
        } else {
            // 两小时后刷新,刷回当前时间
            this.timeAll = setInterval(() => {
                this.settingobj.date = moment(new Date().getTime()).format('YYYY-MM-DD')
                location.reload()
            }, 1000 * 60 * 60 * 2)
        }
    },
    methods: {
        JumpPage: function () {
            // console.log(e)
            // if (e === '' || e === 0) {
            //   return false
            // }
            this.$router.push({ path: '/realtime/factory', query: '' })
        },
        loaddata () {
            this.axios
                .request({
                    url: '/dashboard/DashboardCnConfig/GetCurrentSummary?datetime=' + this.settingobj.date,
                    method: 'get'
                })
                .then(res => {
                    var info = res.data.data
                    this.reload(info)
                })
        },
        loadsetting () {
            // 获取配置数据
            this.axios
                .request({
                    url: '/dashboard/DashboardCnConfig/GetCnConfig',
                    method: 'get'
                })
                .then(res => {
                    var info = res.data.data
                    this.settingobj = {
                        date: moment(info.date).format('YYYY-MM-DD'),
                        level1: info.level1,
                        level2: info.level2,
                        level3: info.level3,
                        level4: info.level4,
                        level5: info.level5,
                        level6: info.level6
                    }

                    // 仪表盘颜色设置
                    this.colorArray2 = [
                        [info.oee3 / 100, 'rgba(255, 25, 131, 1)'], // 0-20%处的颜色
                        [info.oee2 / 100, '#FF9318'], // 21%-80%处的颜色
                        [1, 'rgba(149, 242, 4, 1)'] // 80%-100%处的颜色
                    ]

                    // 零事故天数颜色控制
                    this.colorArray = [{
                        gt: info.level1,
                        label: '> ' + info.level1 + '天',
                        color: '#70B603'
                    }, {
                        gt: info.level2,
                        lte: info.level1,
                        label: info.level2 + ' - ' + info.level1 + '天',
                        color: '#90BC6E'
                    }, {
                        gt: info.level3,
                        lte: info.level2,
                        label: info.level3 + ' - ' + info.level2 + '天',
                        color: '#9C933D'
                    }, {
                        gt: info.level4,
                        lte: info.level3,
                        label: info.level4 + ' - ' + info.level3 + '天',
                        color: '#FF9318'
                    }, {
                        gt: info.level5,
                        lte: info.level4,
                        label: info.level5 + ' - ' + info.level4 + '天',
                        color: '#FF40AF'
                    }, {
                        gt: info.level6,
                        lte: info.level5,
                        label: info.level6 + ' - ' + info.level5 + '天',
                        color: '#FF1983'
                    }, {
                        gt: 0,
                        lte: info.level6,
                        label: 0 + ' - ' + info.level6 + '天',
                        color: '#FF1983'
                    }]
                })
        },
        loadproduce (data) {
            this.yieldLists = []
            data.forEach(ele => {
                this.yieldLists.push({
                    name: ele.name,
                    actual: ele.actual,
                    theory: ele.theory,
                    rate: ele.rate + '%'
                })
            })
        },
        loadmoneyList (data) {
            this.moneyList = []
            data.slice(0, 5).forEach(ele => {
                this.moneyList.push({
                    name: ele.name,
                    delivery: ele.delivery,
                    delivery_target: ele.delivery_target
                })
            })
        },
        loadmap (data) {
            this.rate1 = data[0].rate
            this.rate2 = data[1].rate
            this.rate3 = data[2].rate
            this.rate4 = data[3].rate
            this.rate5 = data[4].rate

            this.day1 = data[0].safeday
            this.day2 = data[1].safeday
            this.day3 = data[2].safeday
            this.day4 = data[3].safeday
            this.day5 = data[4].safeday
        },
        // 设置
        setting () {
            this.settingmodal = true
            // 获取配置数据
            this.axios
                .request({
                    url: '/dashboard/DashboardCnConfig/GetCnConfig',
                    method: 'get'
                })
                .then(res => {
                    var info = res.data.data
                    this.settingobj = {
                        date: moment(info.date).format('YYYY-MM-DD'),
                        level1: info.level1,
                        level2: info.level2,
                        level3: info.level3,
                        level4: info.level4,
                        level5: info.level5,
                        level6: info.level6,
                        oee1: info.oee1,
                        oee2: info.oee2,
                        oee3: info.oee3
                    }
                })
        },
        // 提交配置
        settingadd () {
            this.settingobj.date = moment(this.settingobj.date).format('YYYY-MM-DD')
            var data = this.settingobj
            this.axios
                .request({
                    url: '/dashboard/DashboardCnConfig/SetCnConfig',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        // this.nowTime = moment(this.settingobj.date).format('YYYY-MM-DD')
                        this.settingmodal = false
                        // this.reload(res.data.data)
                        this.loadsetting()
                        this.loaddata()
                        this.$Message.success(this.$t('1112'))
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        reload (data) {
            this.toStackingBar(data)// 工厂零事故天数
            this.loadproduce(data) // 产量
            this.toGaugeOee(data) // OEE
            this.toGaugeDeliver(data) // 交付率
            this.loadmoneyList(data) // 产量达成率
            this.toEcharts(data) // oee
            this.toGauge(data)
            this.toBar(data)
            this.loadmap(data)
        },
        // 综合OEE分析表格
        toEcharts (data) {
            var myChart = echarts.init(document.getElementById('main'))
            let value = [
                data[0].rate > 100 ? 100 : data[0].rate,
                data[1].rate > 100 ? 100 : data[1].rate,
                data[2].rate > 100 ? 100 : data[2].rate,
                data[3].rate > 100 ? 100 : data[3].rate,
                data[4].rate > 100 ? 100 : data[4].rate
            ]
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: []
                },

                radar: {
                    shape: 'polygon',
                    radius: '60%',
                    center: ['50%', '50%'],
                    splitNumber: 5, // 雷达图圈数设置
                    name: {
                        textStyle: {
                            color: '#fff',
                            backgroundColor: '',
                            borderRadius: 3,
                            padding: [3, 5]
                        }
                    },
                    indicator: [
                        {
                            name: data[0].name + '\n' + data[0].rate + '%',
                            axisLabel: {
                                show: true,
                                textStyle: { fontSize: 16, color: '#fff' }
                            },
                            max: 100
                        }, // 雷达圈上显示数字
                        { name: data[1].name + '\n' + data[1].rate + '%', max: 100 },
                        { name: data[2].name + '\n' + data[2].rate + '%', max: 100 },
                        { name: data[3].name + '\n' + data[3].rate + '%', max: 100 },
                        { name: data[4].name + '\n' + data[4].rate + '%', max: 100 }
                    ],
                    // 雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
                    splitArea: {
                        show: false,
                        areaStyle: {
                            color: 'rgba(255,0,0,0)' // 图表背景的颜色
                        }
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    top: 0,
                    bottom: 0,
                    containLabel: true
                    // show:false
                },
                series: [
                    {
                        name: '',
                        type: 'radar',
                        symbolSize: 1, // 拐点的大小
                        areaStyle: {
                            normal: {
                                width: 0.1,
                                opacity: 0.64
                            }
                        },
                        data: [
                            {
                                value: value,
                                name: '中国区综合OEE分布',
                                // 设置区域边框和区域的颜色
                                itemStyle: {
                                    normal: {
                                        color: 'rgba(17,167,255,0.64)',
                                        lineStyle: {
                                            color: 'rgba(17,167,255,0.64)'
                                        }
                                    },
                                    formatter: '{c}%'
                                }
                            }
                        ]
                    }
                ]
            }
            myChart.setOption(option)
            window.onresize = function () {
                myChart.resize()
            }
        },

        // 质量合格率
        toGauge (data) {
            // var myChart = echarts.init(document.getElementById('gaugeForm_left'))
            let oee = 0
            data.forEach(ele => {
                oee += ele.quanlity
            })
            this.quanlityRate = oee
        },

        // 综合OEE
        toGaugeOee (data) {
            var myChart = echarts.init(document.getElementById('gaugeForm_mid'))
            let oee = 0
            data.forEach(ele => {
                oee += ele.rate
            })
            this.oeeRate = oee / data.length
            // console.log(this.oeeRate.toFixed(2))
            this.oeeRate = Math.round(this.oeeRate * 100) / 100

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

            let colorArray = this.colorArray2
            var option = {
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                toolbox: {},
                series: [
                    {
                        name: '综合OEE',
                        type: 'gauge',
                        center: ['50%', '50%'], // 仪表位置
                        radius: '100%', // 仪表大小
                        // detail: { formatter: '{value}%' },
                        data: [
                            {
                                value: this.oeeRate,
                                label: {
                                    textStyle: {
                                        fontSize: 12
                                    }
                                }
                            }
                        ],
                        pointer: {
                            // 指针样式
                            width: 3,
                            length: '70%'
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                // 属性lineStyle控制线条样式
                                color: colorArray,
                                width: 8 // 表盘宽度
                            }
                        },
                        splitLine: {
                            // 分隔线样式相关
                            length: 8, // 分割线的长度
                            lineStyle: {
                                width: 1,
                                color: '#ffffff'
                            }
                        },
                        axisLabel: {
                            // 大刻度标签。
                            distance: 5, // 数字刻度距离
                            textStyle: {
                                // 数字刻度样式
                                color: '#fff',
                                fontSize: 3
                            }
                        },
                        axisTick: {
                            // 小刻度相关
                            show: true,
                            length: 2 // 属性length控制线长
                        },
                        detail: {
                            // 其余属性默认使用全局文本样式，详见TEXTSTYLE 强制两位小数
                            formatter: function (value) {
                                value = (value + '').split('.')
                                value.length < 2 && (value.push('00'))
                                return value[0] + '.' + (value[1] + '00').slice(0, 2)
                            },
                            textStyle: {// 仪表盘详情数据相关
                                color: '#ffffff',
                                fontSize: 16,
                                offsetCenter: [0, '80%']
                            }
                        }
                    }
                ]
            }
            myChart.setOption(option)
            window.onresize = function () {
                myChart.resize()
            }
        },

        // 本月交付率
        toGaugeDeliver (data) {
            var myChart = echarts.init(document.getElementById('gaugeForm_right'))
            let oee = 0
            data.forEach(ele => {
                oee += ele.delivery
            })
            this.deliverRate = Math.round(oee / data.length * 100) / 100

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

            let colorArray = this.colorArray2
            var option = {
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                toolbox: {},
                series: [
                    {
                        name: '本月交付率',
                        type: 'gauge',
                        center: ['50%', '50%'], // 仪表位置
                        radius: '100%', // 仪表大小
                        // detail: { formatter: '{value}%' },
                        data: [
                            {
                                value: this.deliverRate,
                                label: {
                                    textStyle: {
                                        fontSize: 12
                                    }
                                }
                            }
                        ],
                        pointer: {
                            // 指针样式
                            width: 3,
                            length: '70%'
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                // 属性lineStyle控制线条样式
                                color: colorArray,
                                width: 8 // 表盘宽度
                            }
                        },
                        splitLine: {
                            // 分隔线样式相关
                            length: 8, // 分割线的长度
                            lineStyle: {
                                width: 1,
                                color: '#ffffff'
                            }
                        },
                        axisLabel: {
                            // 大刻度标签。
                            distance: 5, // 数字刻度距离
                            textStyle: {
                                // 数字刻度样式
                                color: '#fff',
                                fontSize: 2
                            }
                        },
                        axisTick: {
                            // 小刻度相关
                            show: true,
                            length: 2 // 属性length控制线长
                        },
                        detail: {
                            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            formatter: function (value) {
                                value = (value + '').split('.')
                                value.length < 2 && (value.push('00'))
                                return value[0] + '.' + (value[1] + '00').slice(0, 2)
                            },
                            textStyle: {// 仪表盘详情数据相关
                                color: '#ffffff',
                                fontSize: 16,
                                offsetCenter: [0, '80%']
                            }
                        }
                    }
                ]
            }
            myChart.setOption(option)
            window.onresize = function () {
                myChart.resize()
            }
        },

        // 中国区各厂区客户投诉次数统计
        toBar (item) {
            var name1 = ['济南工厂', '大连工厂', '南口工厂', '芜湖工厂', '青岛工厂', 'ATC II']
            var myChart = echarts.init(document.getElementById('barForm_C'))
            var option = {

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function (params) {
                        var code = 0
                        var tipHtml = ''
                        var tipHtml1 = '<div ><div>投诉详情</div>'
                        item.forEach((it) => {
                            if (params[0].name == it.name) {
                                code = 1
                                if (it.complaints.length > 0) {
                                    it.complaints.forEach((ite) => {
                                        tipHtml += '<div  style="width: 300px;background: #80ffff;opacity:0.8;border-radius: 3px;color: black;border:1px solid #00FFFF;">' +
                              '	<div style="padding:5px 0px;border-top: 1px solid #fff;font-size:14px;line-height:13px;color:#555555;">' +
                              '		<div>客户投诉时间:' + ite.datetime + '</div>' +
                              '		<div style="margin-top:10px;"><span>客户投诉内容:</span><div style="display:inline-block;width:200px;vertical-align:top;white-space:normal;word-break:break-all;word-wrap:break-word; ">' + ite.remark + '</div></div>' +
                              '	</div>' +
                              '</div>'
                                    })
                                }
                            }
                        })
                        tipHtml1 = tipHtml1 + tipHtml + '</div>'
                        if (code == 0) {
                            tipHtml = ''
                            tipHtml1 = ''
                        }
                        // console.log(tipHtml1)
                        return tipHtml1
                    }

                },
                textStyle: {
                    // ----图例内容样式
                    color: '#fff' // ---所有图例的字体颜色
                    // backgroundColor:'black',  //---所有图例的字体背景色
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    top: '8%',
                    bottom: 0,
                    containLabel: true
                    // show:false
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [
                            item[0].name,
                            item[1].name,
                            item[2].name,
                            item[3].name,
                            item[4].name
                        ],
                        axisTick: {
                            alignWithLabel: true
                        },
                        nameTextStyle: {
                            // ---坐标轴名称样式
                            color: '#fff',
                            padding: [5, 0, 0, -5] // ---坐标轴名称相对位置
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
            			color: '#ffffff',
            			width: 1,
            			type: 'solid'
            		}
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 30 // 角度
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        minInterval: 1,
                        axisLine: {
                            show: true,
                            lineStyle: {
            			color: '#797979',
            			width: 1,
            			type: 'solid'
            		}
                        },
                        splitLine: {					// ---grid 区域中的分隔线
            		show: false,					// ---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
            		lineStyle: {
            			color: '#666',
            			width: 1,
            			type: 'dashed'			// ---类型
            		}
            	},
            	splitArea: {					// --网格区域
            		show: false					// ---是否显示，默认false
            	}
                    }

                ],
                series: [
                    {
                        name: '',
                        type: 'bar',
                        barWidth: '16',
                        barCategoryGap: '48',
                        data: [item[0].quanlity, item[1].quanlity, item[2].quanlity, item[3].quanlity, item[4].quanlity],
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var colorList = [
                                        '#19A3FF',
                                        '#55F1F9',
                                        '#19A3FF',
                                        '#55F1F9',
                                        '#19A3FF'
                                    ]
                                    return colorList[params.dataIndex]
                                },
                                label: {
                                    show: true, // 开启显示
                                    position: 'top', // 在上方显示
                                    textStyle: { // 数值样式
                                        color: '#ffffff',
                                        fontSize: 16
                                    }
                                }
                            } // ---图形形状
                        }
                    }
                ]
            }
            myChart.setOption(option)
            window.onresize = function () {
                myChart.resize()
            }
        },

        compare (attr) {
            return function (a, b) {
                var val1 = a[attr]
                var val2 = b[attr]
                return val2 - val1
            }
        },
        // 工厂零事故天数
        toStackingBar (item) {
            var data = [
                { name: item[0].name, value: item[0].safeday },
                { name: item[1].name, value: item[1].safeday },
                { name: item[2].name, value: item[2].safeday },
                { name: item[3].name, value: item[3].safeday },
                { name: item[4].name, value: item[4].safeday }
            ]
            var factory = this.colorArray
            this.safeavg = item[0].minsafeday
            var dom = document.getElementById('stackingBar')
            var myChart = echarts.init(dom)
            var option = {
                title: {
                    text: '',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}天'
                },
                dataRange: {
                    calculable: false,
                    showLabel: true,
                    show: false,
                    itemGap: 5,
                    itemSymbol: 'rect',
                    left: '10',
                    bottom: '5%',
                    pieces: factory
                },
                series: [
                    {
                        name: '工厂零事故天数',
                        type: 'pie',
                        radius: [0, 90],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        label: {
                            color: '#fff',
                            normal: {
                                show: true,
                                formatter: '{b} \n {c}天',
                                textStyle: {
                                    fontSize: 14
                                },
                                position: 'outside'
                            }
                        },
                        labelLine: {
                            color: '#fff',
                            normal: {
                                show: true,
                                length: 20
                            }
                        },
                        data: data
                    }
                ]
            }
            if (option && typeof option === 'object') {
                myChart.setOption(option, true)
            }
        },

        // 返回上一页
        back () {
            this.$router.go(-1) // 返回上一层
        }
    },
    destroyed () {
        clearInterval(this.timer)
        clearInterval(this.timeAll)
    }
}
</script>

<style lang="less" scoped>
@import "./comprehensive.less";
.chart_dadar {
  height: 315px;
}
.gaugeForm {
  height: 100px;
}
.pieForm {
  height: 160px;
  width: 160px;
}
.barForm_C {
  width: 526px;
  height: 280px;
}
.stackingBar {
  width: 450px;
  height: 340px;
  margin: 0 auto;
  // float: left;
  display: inline-block;
}

.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;
        }
        .out_item{
            display:inline-block;
            vertical-align:top;
            .item_content{
                display: inline-block;
                margin: 0px 20px 0px 0px;
                span{
                  float: left;
                  width: 35px;
                  height: 24px;
                  border-radius: 3px;
                  margin: 9px;
                }
                input{
                    width:70px;
                }
            }
        }
    }
}
</style>
