<template>
    <div class="n_container">
        <div class="n_header">
            <h1>据控制中心</h1>
        </div>
        <div class="n_body_container">
            <div class="n_body_container_wraper">
                <div class="box1">
                  <div class="item_wrap">
                    <div class="item_tip">
                      <div class="item_tip_left">包装</div>
                    </div>
                    <div class="item_content_3">
                      <div class="right_1_up">
                        <div class="item_title">包装</div>
                        <div class="right_1_up_left">
                          <div class="echart_d3_wrap">
                            <div id="two_echart_01" style="width: 100%; height: 100%"></div>
                          </div>
                        </div>
                        <div class="right_1_up_right">
                          <div class="right_1_up_right_item">
                            <p class="right_1_up_p1">当日计划生产：</p>
                            <p class="right_1_up_p2">{{num1}}<span>吨</span></p>
                          </div>
                          <div class="right_1_up_right_item">
                            <p class="right_1_up_p1">当日实际生产：</p>
                            <p class="right_1_up_p2">{{num2}}<span>吨</span></p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="item_wrap">
                    <div class="item_tip">
                      <div class="item_tip_left">成品</div>
                    </div>
                    <div class="item_content_3 item_content_3__h3">
                      <div class="right_1_up">
                        <div class="item_title">成品</div>
                        <div class="right_1_up_left" style="backgroundImage: none;">
                          <div class="echart_d3_wrap">
                            <div id="two_echart_02" style="width: 130%; height: 130%; top: -12px;"></div>
                          </div>
                        </div>
                        <div class="right_1_up_right right_1_up_right__h3">
                          <div class="right_1_up_right_item">
                            <p class="right_1_up_p1">当日库存数量：</p>
                            <p class="right_1_up_p2">{{num3}}<span>万块</span></p>
                          </div>
                          <div class="right_1_up_right_item">
                            <p class="right_1_up_p1">当日入库数量：</p>
                            <p class="right_1_up_p2">{{num4}}<span>万块</span></p>
                          </div>
                          <div class="right_1_up_right_item">
                            <p class="right_1_up_p1">当日出库数量：</p>
                            <p class="right_1_up_p2">{{num5}}<span>万块</span></p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="box2">
                  <div class="item_wrap">
                    <div class="item_tip">
                      <div class="item_tip_left">当日包装生产</div>
                    </div>
                    <div class="item_content item_content_3">
                      <div id="two_echart_03" style="width: 100%; height: 100%"></div>
                    </div>
                  </div>
                  <div class="item_wrap">
                    <div class="item_tip">
                      <div class="item_tip_left">当日成品进出存</div>
                    </div>
                    <div class="item_content item_content_3">
                      <div id="two_echart_04" style="width: 100%; height: 100%"></div>
                    </div>
                  </div>
                </div>
                <div class="box2">
                  <div class="item_wrap">
                    <div class="item_tip">
                      <div class="item_tip_left">本周包装生产</div>
                    </div>
                    <div class="item_content item_content_3">
                      <div id="two_echart_05" style="width: 100%; height: 100%"></div>
                    </div>
                  </div>
                  <div class="item_wrap">
                    <div class="item_tip">
                      <div class="item_tip_left">本周成品进出存</div>
                    </div>
                    <div class="item_content item_content_3">
                      <div id="two_echart_06" style="width: 100%; height: 100%"></div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
        <div class="tooltip_wrap right_tooltip_wrap" :style="expand ? 'opacity: 1' : 'opacity: 0.1'">
          <div class="tooltip_pages" :style="expand ? 'width: 240px' : 'width: 0'">
            <div class="tooltip_page pointer" @click="toJumpPage(1)">1</div>
            <div class="tooltip_page pointer" @click="toJumpPage(2)">2</div>
            <div class="tooltip_page pointer" @click="toJumpPage(3)">3</div>
            <div class="tooltip_page pointer" @click="toJumpPage(4)">4</div>
            <div class="tooltip_page pointer" @click="toJumpPage(5)">5</div>
            <div class="tooltip_page current_page pointer" @click="toJumpPage(6)">6</div>
          </div>
          <div class="tooltip_arrow pointer" @click="expandTooltip" v-text="expand ? '&lt;&lt;' : '&gt;&gt;'"></div>
        </div>
    </div>
</template>

<script>
import { processProduction } from '@js/getData0'
export default {
  name: 'two',
  data () {
    return {
      expand: false,
      num1: 0,
      num2: 0,
      num3: 0,
      num4: 0,
      num5: 0,
      val3: 0,
      val4: 0,
      val5: 0,
      finishRate1: 0,
      echartData03: [{data1: '5', data2: '15', data3: '9', data4: '5', device: '成品1'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品2'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品3'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品4'}],
      echartData04: [{data1: '15', data2: '15', data3: '9', data4: '5', device: '成品1'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品2'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品3'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品4'}],
      echartData05: [{data1: '19', data2: '10', data3: '9', data4: '5', device: '成品1'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品2'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品3'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品4'}],
      echartData06: [{data1: '30', data2: '15', data3: '9', data4: '5', device: '成品1'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品2'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品3'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '成品4'}],
      myCharts01: '',
      myCharts02: '',
      myCharts03: '',
      myCharts04: '',
      myCharts05: '',
      myCharts06: ''
    }
  },
  mounted () {
    this.initData()
    // this.setEchart01()
    // this.setEchart02()
    // this.setEchart03()
    // this.setEchart04()
    // this.setEchart05()
    // this.setEchart06()
  },
  methods: {
    expandTooltip () {
      this.expand = !this.expand
    },
    toJumpPage (type) {
      switch (type) {
        case 1:
          this.$router.push('/homepagetwo')
          break
        case 2:
          this.$router.push('/hnlktwo')
          break
        case 3:
          this.$router.push('/takeshapetwo')
          break
        case 4:
          this.$router.push('/firedrytwo')
          break
        case 5:
          this.$router.push('/sortpacktwo')
          break
        case 6:
          break
      }
    },
    async initData () {
      let res = await processProduction()
      this.resData = res.result
      this.num1 = res.result.BZ.bz_plan_day
      this.num2 = res.result.BZ.bz_real_day
      this.num3 = res.result.KC.inventory_qty
      this.num4 = res.result.KC.in_qty
      this.num5 = res.result.KC.out_qty
      this.val3 = res.result.KC.inv_productivity
      this.val4 = res.result.KC.in_productivity
      this.val5 = res.result.KC.out_productivity
      this.finishRate1 = res.result.BZ.bz_productivity
      this.finishRate2 = res.result.KC.kc_productivity
      this.echartData03 = res.result.BZ.BZDayList
      this.echartData05 = res.result.BZ.BZWeekList
      this.echartData04 = res.result.KC.KCDayList
      this.echartData06 = res.result.KC.KCWeekList
      console.log(this.echartData06, '222222')
      this.setEchart01()
      this.setEchart02()
      this.setEchart03()
      this.setEchart04()
      this.setEchart06()
      this.setEchart05()
    },
    setEchart01 () {
      let value = Number(this.finishRate1)
      let title = '%'
      let text = '完成率'
      let option = {
        title: [
          {
            text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
            x: 'center',
            y: 'center',
            textStyle: {
              rich: {
                a: {
                  fontSize: 26,
                  color: '#00D9FF',
                  fontFamily: 'SourceHanSansCN',
                  foontWeight: '700'
                },
                b: {
                  fontSize: 16,
                  color: '#ffffff',
                  fontFamily: 'SourceHanSansCN',
                  foontWeight: '700',
                  padding: [10, 0, 0, 3]
                },
                c: {
                  color: '#FFFFFF',
                  fontSize: 13,
                  fontWeight: '700',
                  fontFamily: 'SourceHanSansCN',
                  padding: [10, 0, 0, 0]
                }
              }
            }
          }
        ],
        polar: {
          radius: ['75%', '83%'],
          center: ['50%', '50%']
        },
        angleAxis: {
          max: 100,
          show: false
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {name: '',
            type: 'bar',
            roundCap: true,
            showBackground: true,
            backgroundStyle: {
              color: '#0a2543'
            },
            data: [value],
            coordinateSystem: 'polar',
            itemStyle: {
              normal: {
                color: '#00dfff'
              }
            }
          }
        ]
      }
      let echart = document.getElementById('two_echart_01')
      // if (this.myCharts01 !== '') {
      //   this.myCharts01.dispose()
      // }
      if (echart !== null) {
        this.myCharts01 = this.$echarts.init(echart)
        this.myCharts01.setOption(option)
        window.addEventListener('resize', () => {
          this.myCharts01.resize()
        })
      }
    },
    setEchart02 () {
      var color = ['#fb734e', '#e32f46', '#94d96c', '#0bbcb7', '#1a9bfc', '#7049f0', '#e2bb0e', '#B68845']
      var dataStyle = {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          shadowBlur: 40,
          borderWidth: 10,
          shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
        }
      }
      var placeHolderStyle = {
        normal: {
          color: '#393d50',
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        },
        emphasis: {
          color: '#393d50'
        }
      }
      let option = {
        // backgroundColor: '#142058',
        title: {
          text: '库存数',
          x: 'center',
          y: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14,
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          show: true,
          formatter: '{b} : <br/>{d}%',
          backgroundColor: 'rgba(0,0,0,0.7)', // 背景
          padding: [8, 10], // 内边距
          extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', // 添加阴影
          textStyle: {
            color: '#fff'
          }
        },
        // legend: {
        //   orient: 'horizontal',
        //   icon: 'circle',
        //   position: 'top',
        //   top: '0',
        //   itemGap: 12,
        //   data: ['入库数', '出库数', '库存数', '04', '05', '06'],
        //   textStyle: {
        //     color: '#fff',
        //   }
        // },
        series: [
          {
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: [55, 65],
            center: ['50%', '50%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: 90,
            label: {
              borderRadius: '10'
            },
            data: [
              {
                value: this.val4,
                name: '入库数',
                itemStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: color[4]
                      },
                      {
                        offset: 1,
                        color: color[5]
                      }
                    ])
                  }
                }
              },
              {
                value: (100 - this.val4),
                name: '',
                tooltip: {
                  show: false
                },
                itemStyle: placeHolderStyle
              }
            ]
          },
          {
            name: 'Line 2',
            type: 'pie',
            clockWise: true,
            radius: [45, 55],
            center: ['50%', '50%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: 90,
            data: [
              {
                value: this.val5,
                name: '出库数',
                itemStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: color[2]
                      },
                      {
                        offset: 1,
                        color: color[3]
                      }
                    ])
                  }
                }
              },
              {
                value: (100 - this.val5),
                name: '',
                tooltip: {
                  show: false
                },
                itemStyle: placeHolderStyle
              }
            ]
          },
          {
            name: 'Line 3',
            type: 'pie',
            clockWise: true,
            radius: [35, 45],
            center: ['50%', '50%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: 90,
            data: [
              {
                value: this.val3,
                name: '库存数',
                itemStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: color[6]
                      },
                      {
                        offset: 1,
                        color: color[7]
                      }
                    ])
                  }
                }
              },
              {
                value: (100 - this.val3),
                name: '',
                tooltip: {
                  show: false
                },
                itemStyle: placeHolderStyle
              }
            ]
          }
        ]
      }
      let echart = document.getElementById('two_echart_02')
      // if (this.myCharts02 !== '') {
      //   this.myCharts02.dispose()
      // }
      if (echart !== null) {
        this.myCharts02 = this.$echarts.init(echart)
        this.myCharts02.setOption(option)
        window.addEventListener('resize', () => {
          this.myCharts02.resize()
        })
      }
    },
    setEchart03 () {
      let data1 = []
      let data2 = []
      let device = []
      this.echartData03.map(e => {
        data1.push(e.qualified_qty)
        data2.push(e.unqualified_qty)
        device.push(e.material_code)
      })
      let option = {
        grid: {
          top: 50,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            lineHeight: 14
          },
          itemGap: 30.86,
          itemWidth: 14.16,
          itemHeight: 7.38,
          data: [{name: '合格数', itemStyle: {color: '#33CCCC'}}, {name: '不合格数', itemStyle: {color: '#EAAD24'}}]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#8FABBF'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#8FABBF',
              fontSize: 16
            }
          },
          data: device
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          splitNumber: 2,
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [8, 4],
              dashOffset: 4,
              color: '#8FABBF'
            }
          }
        },
        series: [
          {
            name: '合格数',
            type: 'bar',
            barWidth: '8',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#33CCCC',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(31,89,89,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            },
            data: data1
          },
          {
            name: '不合格数',
            type: 'bar',
            barWidth: '8',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#B68845',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(134,98,45,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            },
            data: data2
          }
        ]
      }
      let echart = document.getElementById('two_echart_03')
      // if (this.myCharts03 !== '') {
      //   this.myCharts03.dispose()
      // }
      if (echart !== null) {
        this.myCharts03 = this.$echarts.init(echart)
        this.myCharts03.setOption(option)
        window.addEventListener('resize', () => {
          this.myCharts03.resize()
        })
      }
    },
    setEchart04 () {
      let data1 = []
      let data2 = []
      let data3 = []
      let device = []
      this.echartData04.map(e => {
        data1.push(e.region_in_qty)
        data2.push(e.region_out_qty)
        data3.push(e.inventory_qty)
        device.push(e.material_code)
      })
      let option = {
        grid: {
          top: 50,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            lineHeight: 14
          },
          itemGap: 30.86,
          itemWidth: 14.16,
          itemHeight: 7.38,
          data: [{name: '入库数量', itemStyle: {color: '#33CCCC'}}, {name: '出库数量', itemStyle: {color: '#EAAD24'}}, {name: '库存数量', itemStyle: {color: '#0E90FD'}}]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#8FABBF'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#8FABBF',
              fontSize: 16
            }
          },
          data: device
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          splitNumber: 2,
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [8, 4],
              dashOffset: 4,
              color: '#8FABBF'
            }
          }
        },
        series: [
          {
            name: '入库数量',
            type: 'bar',
            barWidth: '8',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#33CCCC',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(31,89,89,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            },
            data: data1
          },
          {
            name: '出库数量',
            type: 'bar',
            barWidth: '8',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#B68845',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(134,98,45,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            },
            data: data2
          },
          {
            name: '库存数量',
            type: 'bar',
            barWidth: '8',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: 'rgba(96,112,128,0.10)',
                    opacity: 1
                  },
                  {
                    offset: 0,
                    color: '#0E90FD',
                    opacity: 0.1
                  }
                ])
              }
            },
            data: data3
          }
        ]
      }
      let echart = document.getElementById('two_echart_04')
      // if (this.myCharts04 !== '') {
      //   this.myCharts04.dispose()
      // }
      if (echart !== null) {
        this.myCharts04 = this.$echarts.init(echart)
        this.myCharts04.setOption(option)
        window.addEventListener('resize', () => {
          this.myCharts04.resize()
        })
      }
    },
    setEchart05 () {
      let data1 = []
      let data2 = []
      let device = []
      this.echartData05.map(e => {
        data1.push(e.qualified_qty)
        data2.push(e.unqualified_qty)
        device.push(e.material_code)
      })
      let option = {
        grid: {
          top: 50,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            lineHeight: 14
          },
          itemGap: 30.86,
          itemWidth: 14.16,
          itemHeight: 7.38,
          data: [{name: '合格数', itemStyle: {color: '#33CCCC'}}, {name: '不合格数', itemStyle: {color: '#EAAD24'}}]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#8FABBF'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#8FABBF',
              fontSize: 16
            }
          },
          data: device
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          splitNumber: 2,
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [8, 4],
              dashOffset: 4,
              color: '#8FABBF'
            }
          }
        },
        series: [
          {
            name: '合格数',
            type: 'bar',
            barWidth: '8',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#33CCCC',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(31,89,89,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            },
            data: data1
          },
          {
            name: '不合格数',
            type: 'bar',
            barWidth: '8',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#B68845',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(134,98,45,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            },
            data: data2
          }
        ]
      }
      let echart = document.getElementById('two_echart_05')
      // if (this.myCharts05 !== '') {
      //   this.myCharts05.dispose()
      // }
      if (echart !== null) {
        this.myCharts05 = this.$echarts.init(echart)
        this.myCharts05.setOption(option)
        window.addEventListener('resize', () => {
          this.myCharts05.resize()
        })
      }
    },
    setEchart06 () {
      let data1 = []
      let data2 = []
      let data3 = []
      let device = []
      this.echartData06.map(e => {
        data1.push(e.region_in_qty)
        data2.push(e.region_out_qty)
        data3.push(e.inventory_qty)
        device.push(e.material_code)
      })
      let option = {
        grid: {
          top: 50,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            lineHeight: 14
          },
          itemGap: 30.86,
          itemWidth: 14.16,
          itemHeight: 7.38,
          data: [{name: '入库数量', itemStyle: {color: '#33CCCC'}}, {name: '出库数量', itemStyle: {color: '#EAAD24'}}, {name: '库存数量', itemStyle: {color: '#0E90FD'}}]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#8FABBF'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#8FABBF',
              fontSize: 16
            }
          },
          data: device
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          splitNumber: 2,
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [8, 4],
              dashOffset: 4,
              color: '#8FABBF'
            }
          }
        },
        series: [
          {
            name: '入库数量',
            type: 'bar',
            barWidth: '8',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#33CCCC',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(31,89,89,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            },
            data: data1
          },
          {
            name: '出库数量',
            type: 'bar',
            barWidth: '8',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#B68845',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(134,98,45,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            },
            data: data2
          },
          {
            name: '库存数量',
            type: 'bar',
            barWidth: '8',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: 'rgba(96,112,128,0.10)',
                    opacity: 1
                  },
                  {
                    offset: 0,
                    color: '#0E90FD',
                    opacity: 0.1
                  }
                ])
              }
            },
            data: data3
          }
        ]
      }
      let echart = document.getElementById('two_echart_06')
      // if (this.myCharts06 !== '') {
      //   this.myCharts06.dispose()
      // }
      if (echart !== null) {
        this.myCharts06 = this.$echarts.init(echart)
        this.myCharts06.setOption(option)
        window.addEventListener('resize', () => {
          this.myCharts06.resize()
        })
      }
    },
    setEchart10 () {
      let total = [100, 200, 120, 133, 80, 155, 250]
      let names = [10, 20, 30, 40, 50, 60, 70]
      let max = 0
      // this.chartData2.map(el => {
      //   total.push(el.err_times)
      //   names.push(el.device_name)
      //   max = Math.max(max, Number(el.err_times))
      // })
      let option = {
        dataZoom: [
          {
            show: false, // 为true滚动条出现
            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
            startValue: 0, // 从头开始。
            endValue: 9 // end百分比显示范围，endValue具体显示几个数值
          }
        ],
        grid: {
          top: 30,
          left: 0,
          right: 0,
          bottom: 0,
          borderColor: '#ffffff',
          containLabel: true
        },
        legend: {
          icon: 'rect',
          textStyle: {
            color: '#fff',
            fontSize: 18,
            lineHeight: 18
          },
          itemGap: 30.86,
          itemWidth: 14.16,
          itemHeight: 7.38,
          data: [{name: '产量', itemStyle: {color: '#0E90FD'}}]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#8FABBF ',
              fontSize: 14,
              lineHeight: 14
            }
          },
          axisLabel: {
            color: '#8FABBF ',
            rotate: 50
          },
          data: names
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#909399'
            }
          },
          axisLabel: {
            color: '#909399'
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: [8, 4],
              dashOffset: 4,
              color: '#8FABBF',
              opacity: 0.2
            }
          },
          max: max
        },
        series: [
          {
            name: '产量',
            type: 'bar',
            barWidth: 38,
            itemStyle: {
              normal: {
                show: true,
                // color: '#67c23a',
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#0E90FD',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(96,112,128,0.10)',
                    opacity: 0.1
                  }
                ]),
                borderWidth: 0
              }
            },
            // data: [100, 51, 90, 41, 91, 61, 51]
            data: total
          }
        ]
      }
      let echart = document.getElementById('echart_d10')
      this.myCharts10 = this.$echarts.init(echart)
      this.myCharts10.setOption(option)
      // this.autoMove(option, 3)
      window.addEventListener('resize', () => {
        this.myCharts10.resize()
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
.n_container
    _wh(100%, 100%)
.n_header
    _wh(100%, 84px)
    _bis('../../../images/top_right.png', auto,,left,,)
    line-height 84px
    h1
        _font(32px, 56px, #fff,,left)
        letter-spacing 6px
        font-family "阿里妈妈数黑体" !important
        padding-left 3px
.n_body_container
    _wh(100%, calc(100% - 84px))
    padding 40px 54px 0 0
.n_body_container_wraper
    _wh(100%, 100%)
    padding-left 8px
.box1
  // _wh(100%, 20%)
  width 100%
  height 212px
  _fj()
  flex-direction row
  margin-bottom 1%
.box2
  clear both
  _wh(100%, calc(48% - 106px))
  _fj()
  flex-direction row
  +.box2
    margin-top 1%
.item_title
  _font(46px, 1, #fff,,,)
.bg
  _wh(100%, 100%)
  overflow hidden
.container
  _wh(100%, calc(100% - 1.38rem))
  padding .3rem .2509rem 0
  overflow hidden
  clear both
.bottom
  _wh(100%, .38rem)
  background center bottom / 19.06rem 100% url(../../..//images/screen1/bottom.png) no-repeat
.left_wrap
  float left
  _wh(4.0756rem, 100%)
.center_wrap
  float left
  _wh(9.96rem, 100%)
  margin-left .2936rem
  padding .4rem .16rem
  background center bottom / 100% 100% url(../../..//images/screen1/item_2.png) no-repeat
.right_wrap
  float right
  _wh(4.0273rem, 100%)
.item_wrap
  _wh(calc(50% - 8px), 100%)
.item_tip
  clear both
  _wh(100%, 32px)
  line-height 32px
  background center center / 100% 100% url(../../..//images/screen1/title_bg_2.png) no-repeat
.item_tip_2
  background center center / 100% 100% url(../../..//images/screen1/title_bg_2.png) no-repeat
.item_tip_left
  float left
  _wh(60%, 100%)
  font-family "SourceHanSansCN"
  _font(18px, inherit, #fff, 700, left)
  letter-spacing 2px
  text-shadow 0 0 9px #159AFF
  padding-left 40px
.item_tip_right
  float right
  _wh(39%, 100%)
  line-height inherit
  text-align right
  padding-right .09rem
  span
    _font(.14rem, inherit, #FFCB00, lighter,)
  .span1
    font-size .12rem
    color #84B0DA
.item_content
  // _wh(100%, calc(100% - .32rem))
  padding .17rem .17rem .24rem .17rem
  background-color #011834
.item_content_1
  _wh(100%, 100%)
  _fj(space-around)
  padding .17rem 0 .24rem
.item_content_1_inner
  _wh(1.2rem, 100%)
  background-color #011834
.item_content_1_inner_1
  _wh(100%, .37rem)
  font-family "SourceHanSansCN"
  _font(.14rem, .37rem, #78B1DE, 700, center)
  letter-spacing .02rem
  background center center / 100% 100% url(../../..//images/screen1/item_1.png) no-repeat
.item_content_1_inner_2
  _wh(100%, calc((100% - .37rem) / 3))
  overflow hidden
  _fj(space-evenly)
  flex-direction column
  padding-top .06rem
.item_content_1_inner_2_bg
  background center bottom / 1.02rem .03rem url(../../..//images/screen1/line_1.png) no-repeat
.item_content_1_inner_2_p1
  font-family "SourceHanSansCN"
  _font(.18rem, .18rem, #fff, 700, center)
  letter-spacing .0188rem
.item_content_1_inner_2_p2
  font-family "SourceHanSansCN"
  _font(.14rem, .14rem, #84B0DA, 700, center)
  letter-spacing .02rem
.item_wrap_2
  _wh(100%, calc((100% - .4rem) / 2))
.item_wrap_3
  margin-top .4rem
.item_content_2
  _wh(100%, calc(100% - .32rem))
  margin-top .06rem
  border .01rem solid rgba(8,205,248,0.3)
.scroll_wrap
  _wh(100%, 100%)
.scroll_tab_1
  _wh(100%, .4rem)
  border-bottom .01rem solid rgba(8,205,248,0.3)
  li
    float left
    width 12%
    _font(.14rem,.4rem,#78B1DE,,center)
    word-wrap break-word
    word-break break-all
    white-space nowrap
    padding 0 .02rem
    overflow hidden
    box-sizing border-box
    &:nth-child(8)
      width 16%
.scroll_tab_2 li
  width 17%
  &:first-child
    width 15%
.scroll_container_1
  width 100%
  height calc(100% - .4rem)
  overflow hidden
.scroll-ul_1
  li
    _wh(100%, .44rem)
    border-bottom .01rem solid rgba(8,205,248,0.3)
    &:nth-child(even)
      background rgba(1,24,52,0.60)
      box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
    .scroll-ul_1_div
      float left
      _wh(12%, .44rem)
      _fj(center)
      _font(.14rem, .44rem, #fff,,center)
      word-wrap break-word
      word-break break-all
      white-space nowrap
      padding 0 .02rem
      overflow hidden
      &:nth-child(8)
        width 16%
.scroll-ul_2 li .scroll-ul_1_div
  width 17%
  &:first-child
    width 15%
.progress_line_wrap
  position relative
  _wh(1.35rem, .03rem)
  background-image linear-gradient(270deg, #00EFFF 2%, #00527D 100%)
.progress_dot_wrap
  position absolute
  _wh(100%, .15rem)
  top -.06rem
  left -.05rem
.progress_dot
  position absolute
  top 0
  left 0
  _wh(.15rem, .15rem)
  background center center / 100% 100% url(../../..//images/screen1/dot_1.png) no-repeat
.item_content_3
  _wh(100%, 100%)
  height calc(100% - 32px)
  padding 20px 30px
  _fj(center)
.item_content_3__h3
  padding 10px 30px
.right_1_up
  clear both
  _wh(100%, 100%)
  _fj(row)
  // background center bottom / 100% .03rem url(../../..//images/screen1/line_2.png) no-repeat
.right_1_up_left
  _wh(140px, 140px)
  background center bottom / 100% 100% url(../../..//images/screen1/item_3.png) no-repeat
  _fj(row, center)
  margin-right 150px
.echart_d3_wrap
  _wh(82%, 82%)
  margin 0 auto
.right_1_up_right
  _wh(48%, 100%)
.right_1_up_right_item
  _wh(100%, 60px)
  background center bottom / 100% 100% url(../../..//images/screen1/item_4.png) no-repeat
  _fj(row)
  +.right_1_up_right_item
    margin-top 20px
.right_1_up_right__h3
  .right_1_up_right_item
    height 40px
.right_1_up_p1
  font-family "SourceHanSansCN"
  _font(22px, 60px, #78B1DE, 700, center)
  margin-left 24px
.right_1_up_p2
  font-family "SourceHanSansCN"
  _font(24px, 60px, $yellow, 700, center)
  margin-right 20px
  span
    _font(18px, 60px, #fff, 700, center)
    padding-left 6px
.right_1_down
  _wh(100%, calc(100% - 1.6rem))
  padding .05rem .3rem 0
.right_1_down_inner_1
  _wh(100%, .28rem)
  overflow hidden
  _fj()
  div
    &:nth-child(1)
      font-family "SourceHanSansCN"
      _font(.12rem, .28rem, #84B0DA, 700,)
      letter-spacing .0171rem
    &:nth-child(2)
      font-family "SourceHanSansCN"
      _font(.16rem, .28rem, #fff, 700, right)
      letter-spacing .02rem
.right_1_down_inner_2
  _wh(100%, .1811rem)
  background-color rgba(0,213,255,0.20)
  _fj()
  div
    height .0805rem
    &:nth-child(1)
      background-color #07E083
    &:nth-child(2)
      background-color #B68845
.right_1_down_inner_3
  _wh(100%, .3rem)
  margin-top .1rem
  _fj()
.right_1_down_inner_3_i
  _wh(1.83rem, .3rem)
  _fj()
  background center bottom / 100% 100% url(../../..//images/screen1/item_5.png) no-repeat
.right_1_down_inner_3_l
  _wh(50%, 100%)
  overflow hidden
  clear both
  span
    display block
    float left
    &:nth-child(1)
      _wh(.0725rem, .3rem)
      margin-left .15rem
      _fj()
      overflow hidden
      i
        display block
        _wh(.0725rem, .0725rem)
        border-radius 100%
    &:nth-child(2)
      _wh(calc(100% - 0.2825rem), .3rem)
      font-family "SourceHanSansCN"
      _font(.12rem, .3rem, #fff,400,)
      margin-left .06rem
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
.right_1_down_inner_3_r
  _wh(50%, 100%)
  line-height .3rem
  overflow hidden
  text-align right
  span
    font-family "SourceHanSansCN"
    _font(.12rem, .3rem, #fff,700,)
    &:nth-child(1)
      font-family "SourceHanSansCN"
      _font(.18rem, .3rem, #00D5FF,700,)
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
.item_content_4
  _wh(100%, calc(100% - .32rem))
  padding .1rem 0 .2rem
  overflow hidden
.scroll-ul_2
  li
    _wh(100%, .4rem)
    clear both
    margin-bottom .1rem
    &:nth-child(-n+3)
      background center center / 100% 100% url(../../..//images/screen1/item_6.png) no-repeat
    &:nth-child(n+4)
      background center center / 100% 100% url(../../..//images/screen1/item_7.png) no-repeat
    &:nth-child(1) .scroll-ul_2_div_1
      background center center / .24rem .27rem url(../../..//images/screen1/top_1.png) no-repeat
    &:nth-child(2) .scroll-ul_2_div_1
      background center center / .24rem .27rem url(../../..//images/screen1/top_2.png) no-repeat
    &:nth-child(3) .scroll-ul_2_div_1
      background center center / .24rem .27rem url(../../..//images/screen1/top_3.png) no-repeat
.scroll-ul_2_div_1
  float left
  _wh(.6rem, 100%)
  _font(.16rem, .4rem, #fff, 700, center)
.scroll-ul_2_div_2
  float left
  _wh(calc(60% - .6rem), 100%)
  font-family "SourceHanSansCN"
  _font(.14rem, .4rem, #fff, 700,)
  padding-left .1rem
  letter-spacing .02rem
.scroll-ul_2_div_3
  float right
  _wh(30%, 100%)
  font-family "SourceHanSansCN"
  _font(.12rem, .4rem, #fff, 700, right)
  padding-right .2rem
  span
   &:nth-child(1)
    font-size .18rem
    letter-spacing: .0125rem
.item_content_5
  _wh(100%, calc(100% - .32rem))
  padding-top .3rem
  clear both
.item_5_l
  float left
  _wh(50%, 100%)
.item_5_r
  float right
  _wh(50%, 100%)
  _fj()
  flex-direction column
.item_5_l_1
  _wh(100%, 60%)
  background right center / .02rem 100% url(../../..//images/screen1/line_3.png) no-repeat
.item_5_l_2
  _wh(100%, 40%)
  _fj()
  flex-direction column
  // .right_1_down_inner_3_i
  //   &:nth-child(1), &:nth-child(2)
  //     margin-bottom 5%
.color1
  background-color #07E083
.color2
  background-color #B68845
.swiper_wrap
  clear both
  _wh(100%, calc(100% - .32rem))
  padding .17rem 0 .24rem
  overflow hidden
.swiper_wrap_con
  _wh(100%, 100%)
.swiper_item
  position relative
  left 0
  float left
  _wh(100%, 100%)
  _fj(space-around)
.p1
  position absolute
  display block
  cursor pointer
  left .2509rem
  top .22rem
  font-family "SourceHanSansCN"
  _font(.18rem, .30rem, #fff, 700,)
  letter-spacing .01rem
</style>
