<template>
    <div class="n_container">
        <div class="n_header">
            <div class="n_header_h1">
                <h1>晟华生产数</h1>
            </div>
        </div>
        <div class="n_body_container">
            <div class="n_body_container_wraper">
                <div class="n_left_content">
                    <div class="item_wrap">
                        <div class="item_tip item_tip_bg_s">
                            <div class="item_tip_left">当日混料生产</div>
                        </div>
                        <div class="item_content">
                            <div id="home_echart_1" style="width: 100%; height: 100%;"></div>
                        </div>
                    </div>
                    <div class="item_wrap">
                        <div class="item_tip item_tip_bg_s">
                            <div class="item_tip_left">当日压制生产</div>
                        </div>
                        <div class="item_content">
                            <div id="home_echart_2" style="width: 100%; height: 100%;"></div>
                        </div>
                    </div>
                    <div class="item_wrap">
                        <div class="item_tip item_tip_bg_s">
                            <div class="item_tip_left">当日成品情况</div>
                        </div>
                        <div class="item_content">
                            <div id="home_echart_3" style="width: 100%; height: 100%;"></div>
                        </div>
                    </div>
                </div>
                <div class="n_right_content">
                    <div class="right_wrap">
                      <div class="machine_wrap hlj_s_wrap">
                        <div v-for="(e,i) in [1,2,3,4]" :key="i" class="sh_machine hlj_s">
                          <img src="../../../images/workshop/hlj_s.png" alt="">
                        </div>
                      </div>
                      <div class="machine_wrap hlj_wrap">
                        <div v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12]" :key="i"  class="sh_machine hlj">
                          <img src="../../../images/workshop/hlj.png" alt="">
                        </div>
                      </div>
                      <div class="machine_wrap lz_wrap_1">
                        <div v-for="(e,i) in [1,2,3,4]" :key="i" class="sh_machine lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div class="machine_wrap lz_wrap_2">
                        <div v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12]" :key="i" class="sh_machine lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div class="machine_wrap lz_wrap_3">
                        <div v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12,13]" :key="i" class="sh_machine lz">
                          <img src="../../../images/workshop/lz.png" alt="">
                        </div>
                      </div>
                      <div class="machine_wrap yyj_wrap_1">
                        <div class="sh_machine jzjcss">
                          <img src="../../../images/workshop/jzjcss_yellow.png" alt="">
                        </div>
                        <div class="sh_machine yyj">
                          <img src="../../../images/workshop/yyj_gray.png" alt="">
                        </div>
                        <div class="sh_machine wzm"></div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'one',
  data () {
    return {
      myCharts1: '',
      myCharts2: '',
      myCharts3: ''
    }
  },
  mounted () {
    this.setEchart1()
    this.setEchart2()
    this.setEchart3()
  },
  methods: {
    setEchart1 () {
      let date = ['碾机1', '碾机2', '碾机3', '碾机4', '碾机5', '碾机6', '碾机7', '碾机8', '碾机9', '碾机10']
      let data1 = ['500', '600', '700', '800', '500', '600', '700', '800', '900', '1000']
      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: '#0E90FD'}}]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#8FABBF'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#8FABBF',
              fontSize: 16
            },
            rotate: 50
          },
          data: date
        },
        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: 1,
                    color: 'rgba(96,112,128,0.10)',
                    opacity: 1
                  },
                  {
                    offset: 0,
                    color: '#0E90FD',
                    opacity: 0.1
                  }
                ])
              }
            },
            data: data1
          }
        ]
      }
      let echart = document.getElementById('home_echart_1')
      if (this.myCharts1 !== '') {
        this.myCharts1.dispose()
      }
      if (echart !== null) {
        this.myCharts1 = this.$echarts.init(echart)
        this.myCharts1.setOption(option)
        window.addEventListener('resize', () => {
          this.myCharts1.resize()
        })
      }
    },
    setEchart2 () {
      let date = ['压机1', '压机2', '压机3', '压机4', '压机5', '压机6', '压机7', '压机8', '压机9', '压机10']
      let data1 = ['500', '600', '700', '800', '500', '600', '700', '800', '900', '1000']
      let data2 = ['50', '180', '70', '100', '50', '70', '100', '180', '100', '120']
      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
            },
            rotate: 50
          },
          data: date
        },
        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('home_echart_2')
      if (this.myCharts2 !== '') {
        this.myCharts2.dispose()
      }
      if (echart !== null) {
        this.myCharts2 = this.$echarts.init(echart)
        this.myCharts2.setOption(option)
        window.addEventListener('resize', () => {
          this.myCharts2.resize()
        })
      }
    },
    setEchart3 () {
      let date = ['成品1', '成品2', '成品3', '成品4', '成品5']
      let data1 = ['1500', '1600', '1700', '1800', '1500']
      let data2 = ['450', '500', '700', '800', '500']
      let data3 = ['50', '180', '60', '70', '50']
      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: '#0E90FD'}}, {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
            }
            // rotate: 50
          },
          data: date
        },
        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',
            barGap: '200%',
            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: data1
          },
          {
            name: '综合工段',
            type: 'bar',
            barWidth: '8',
            barGap: '200%',
            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: data2
          },
          {
            name: '成品工段',
            type: 'bar',
            barWidth: '8',
            barGap: '200%',
            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: data3
          }
        ]
      }
      let echart = document.getElementById('home_echart_3')
      if (this.myCharts3 !== '') {
        this.myCharts3.dispose()
      }
      if (echart !== null) {
        this.myCharts3 = this.$echarts.init(echart)
        this.myCharts3.setOption(option)
        window.addEventListener('resize', () => {
          this.myCharts3.resize()
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
.n_container
    _wh(100%, 100%)
.n_header
    _wh(100%, 8%)
    _bis('../../../images/bg_header.jpg')
.n_header_h1
    _wh(100%, 100%)
    _fj(row, flex-end)
    _bis('../../../images/top_left.png',auto,,right)
    h1
        _font(32px, 1, #fff,,right)
        padding-bottom 2%
        letter-spacing 6px
        font-family "阿里妈妈数黑体" !important
        margin-right -3px
.n_body_container
    _wh(100%, 92%)
    padding 40px 0 20px 20px
    _bis('../../../images/bg_content.jpg')
.n_body_container_wraper
    _wh(100%, 100%)
    _fj(row)
.n_left_content
    _wh(33%, 100%)
    background-color #070b1c
.n_right_content
    _wh(calc(67% - 16px), 100%)
.item_wrap
    _wh(100%, 33%)
    +.item_wrap
        margin-top .5%
.item_tip
    _wh(100%, 32px)
    line-height 32px
    padding 0 10px
.item_tip_bg_s
    _bis('../../../images/bg_title_s.png')
.item_tip_left
    _wh(60%, 100%)
    font-family "SourceHanSansCN"
    _font(18px, inherit, #fff, 700, left)
    letter-spacing 2px
    text-shadow 0 0 9px #159AFF
    padding-left 34px
    _bis('../../../images/bg_title_tip.png', 22px, 22px, left)
.item_content
    _wh(100%, calc(100% - 32px))
    padding 10px 5px
.right_wrap
    position relative
    z-index 1
    _wh(100%, 100%)
    _bis('../../../images/workshop/workshop_l.png')
.machine_wrap
  position absolute
  z-index 2
.sh_machine
  position absolute
  top 0
  left 0
  z-index 3
  width 100%
  img
    position absolute
    top 0
    left 0
    z-index 4
    _wh(100%, auto)
.hlj_s_wrap
  width 4%
  height 85.5%
  top 14.5%
  left 27%
  .hlj_s
    &:nth-child(2)
      top 5.5%
    &:nth-child(3)
      top 11%
    &:nth-child(4)
      top 16.5%
.hlj_wrap
  width 4%
  height 66.5%
  top 33%
  left 29%
  .hlj
    &:nth-child(2)
      top 6%
    &:nth-child(3)
      top 12.7%
    &:nth-child(4)
      top 18.6%
    &:nth-child(5)
      top 25.5%
    &:nth-child(6)
      top 31.5%
    &:nth-child(7)
      top 38.1%
    &:nth-child(8)
      top 44%
    &:nth-child(9)
      top 51%
    &:nth-child(10)
      top 57%
    &:nth-child(11)
      top 63.5%
    &:nth-child(12)
      top 69.5%
.lz_wrap_1
  width 2%
  height 84.6%
  top 15.4%
  left 33.5%
  .lz
    &:nth-child(2)
      top 5.4%
    &:nth-child(3)
      top 11%
    &:nth-child(4)
      top 16.2%
.lz_wrap_2
  width 2%
  height 66.3%
  top 33.7%
  left 33.4%
  .lz
    &:nth-child(2)
      top 6.1%
    &:nth-child(3)
      top 12.8%
    &:nth-child(4)
      top 18.5%
    &:nth-child(5)
      top 26%
    &:nth-child(6)
      top 31.5%
    &:nth-child(7)
      top 38.2%
    &:nth-child(8)
      top 43.9%
    &:nth-child(9)
      top 51%
    &:nth-child(10)
      top 56.8%
    &:nth-child(11)
      top 64%
    &:nth-child(12)
      top 69.5%
.lz_wrap_3
  width 2%
  height 94%
  top 6%
  left 43%
  .lz
    &:nth-child(2)
      top 4%
    &:nth-child(3)
      top 6.55%
    &:nth-child(4)
      top 9.1%
    &:nth-child(5)
      top 14%
    &:nth-child(6)
      top 18%
    &:nth-child(7)
      top 20.5%
    &:nth-child(8)
      top 23%
    &:nth-child(9)
      top 40%
      left 200%
    &:nth-child(10)
      top 44%
      left 100%
    &:nth-child(11)
      top 54%
      left 200%
    &:nth-child(12)
      top 76%
      left 200%
    &:nth-child(13)
      top 86%
      left 200%
.yyj_wrap_1
  width 16%
  height 9%
  top 8%
  left 48%
  .yyj
    width 20%
    left 35.5%
  .wzm
    _wh(50%, 48%)
    background-color #d9d9d9
    top auto
    bottom 0
  .jzjcss
    width: 20%;
    left: 49%;
    top: 8%;
</style>
