<template>
    <div class="left_wraper">
        <div class="item_wraper">
            <div class="title_wraper">
                <p>今日生产</p>
            </div>
            <div class="content_wraper flexbetween">
                <div class="module_one_wraper">
                    <div class="pie_wraper_1">
                      <!-- <div class="pie_inner_1">
                        <div class="light_1"></div>
                        <p>{{ orderFulfillmentRate }}<span>%</span></p>
                      </div> -->
                      <div class="echart_wraper_1">
                        <div id="new_home_echart_1" style="width: 100%; height: 100%;"></div>
                      </div>
                      <div class="pie_title_1">订单完成</div>
                    </div>
                </div>
                <div class="line_1"></div>
                <div class="module_two_wraper">
                  <div class="module_two_item_wraper">
                    <div class="module_two_item_lable">混料</div>
                    <div class="module_two_item_content">
                      <div class="module_two_item_p_l">{{todayMixProduction.real}}吨</div>
                      <div class="module_two_item_p_r">{{todayMixProduction.plan}}吨</div>
                    </div>
                  </div>
                  <div class="module_two_item_wraper">
                    <div class="module_two_item_lable">成型</div>
                    <div class="module_two_item_content">
                      <div class="module_two_item_p_l">{{todayPressProduction.real}}块</div>
                      <div class="module_two_item_p_r">{{todayPressProduction.plan}}块</div>
                    </div>
                  </div>
                  <div class="module_two_item_wraper">
                    <div class="module_two_item_lable">包装</div>
                    <div class="module_two_item_content">
                      <div class="module_two_item_p_l">{{todaySortProduction.real}}块</div>
                      <div class="module_two_item_p_r">{{todaySortProduction.plan}}快</div>
                    </div>
                  </div>
                </div>
                <div class="module_three_wraper">
                  <div class="module_three_text">今日共需生产<span>{{todayTotalPlan}}</span>块，物料种类<span>{{ materialCountSize }}</span>种，已完成包装<span>{{ sortCompleted }}</span>托，共<span>{{ sortCompletedQty }}</span>块，<span>{{ sortMaterialCountSize }}</span>个物料，完成率<span>{{fulfillmentRate}}%</span>。</div>
                </div>
            </div>
        </div>
        <div class="item_wraper flexbetween">
            <div class="l_item_wraper">
                <div class="title_wraper">
                    <p>当日混料</p>
                </div>
                <div class="content_wraper">
                  <div class="echart_wraper">
                      <div id="new_home_echart_2" style="width: 100%; height: 100%;"></div>
                  </div>
                </div>
            </div>
            <div class="l_item_wraper">
                <div class="title_wraper">
                    <p>当日成品</p>
                </div>
                <div class="content_wraper">
                  <div class="echart_wraper">
                      <div id="new_home_echart_3" style="width: 100%; height: 100%;"></div>
                  </div>
                </div>
            </div>
        </div>
        <div class="item_wraper flexbetween">
            <div class="l_item_wraper">
                <div class="title_wraper">
                    <p>库存量监控</p>
                </div>
                <div class="content_wraper content_wraper_1">
                  <div class="pie_wraper_2">
                    <div class="echart_wraper">
                      <div id="new_home_echart_4" style="width: 100%; height: 100%;"></div>
                    </div>
                  </div>
                  <!-- <div class="pie_legend">
                    <div class="pie_legend_item" v-for="(e, i) in inventory" :key="i" :class="'pie_legend_item_bg_' + (i + 1)">
                      <p class="pie_legend_txt_1">{{ e.materialCode }}</p>
                      <div class="pie_legend_txt_wraper">
                        <p class="pie_legend_txt_2">{{ e.qty }}</p>
                        <p class="pie_legend_txt_3">{{ e.rate }}</p>
                      </div>
                    </div>
                  </div> -->
                </div>
            </div>
            <div class="l_item_wraper">
                <div class="title_wraper">
                    <p>历史分析</p>
                </div>
                <div class="content_wraper">
                  <div class="echart_wraper">
                      <div id="new_home_echart_5" style="width: 100%; height: 100%;"></div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// import { homepageDataLeft } from '@js/mork2.js'
import { homepageDataLeft } from '@js/getData2.js'
import symbol1 from '@img/symbol_1.png'
import symbol2 from '@img/symbol_2.png'
import symbol3 from '@img/symbol_3.png'
import symbol4 from '@img/symbol_4.png'
import lineSelected from '@img/line_selected.png'
export default {
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      todayMixProduction: {}, // 今日生产混料
      todayPressProduction: {}, // 今日生产成型
      todaySortProduction: {}, // 今日生产包装
      orderFulfillmentRate: {}, // 订单完成
      todayTotalPlan: '',
      materialCountSize: '',
      sortCompleted: '',
      sortCompletedQty: '',
      sortMaterialCountSize: '',
      fulfillmentRate: '',
      todayMix: [], // 当日混料
      todaySort: [], // 当日成品
      inventory: [], // 库存量监控
      history: [], // 历史分析
      chart2Timer: null,
      chart3Timer: null,
      chart4Timer: null,
      chart5Timer: null
    }
  },
  created () {
    this._homepageDataLeft()
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
    clearInterval(this.chart2Timer)
    clearInterval(this.chart3Timer)
    clearInterval(this.chart4Timer)
    clearInterval(this.chart5Timer)
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        this._homepageDataLeft()
      }, this.interTime)
    },
    async _homepageDataLeft () {
      let res = await homepageDataLeft()
      clearInterval(this.chart2Timer)
      clearInterval(this.chart3Timer)
      clearInterval(this.chart4Timer)
      clearInterval(this.chart5Timer)
      this.todayMixProduction = res.todayProduction.todayMixProduction
      this.todayPressProduction = res.todayProduction.todayPressProduction
      this.todaySortProduction = res.todayProduction.todaySortProduction
      this.todayTotalPlan = res.todayProduction.todayTotalPlan
      this.materialCountSize = res.todayProduction.materialCountSize
      this.sortCompleted = res.todayProduction.sortCompleted
      this.sortCompletedQty = res.todayProduction.sortCompletedQty
      this.sortMaterialCountSize = res.todayProduction.sortMaterialCountSize
      this.fulfillmentRate = res.todayProduction.fulfillmentRate
      this.orderFulfillmentRate = Number(res.todayProduction.orderFulfillmentRate.real) / Number(res.todayProduction.orderFulfillmentRate.plan) * 100
      this.orderFulfillmentRate = this.orderFulfillmentRate.toFixed(0)
      this.todayMix = [...res.todayMix]
      this.todaySort = [...res.todaySort]
      let total = res.inventory.reduce((a, b) => {
        return a + Number(b.qty)
      }, 0)
      res.inventory.map(el => {
        let rate = Number(el.qty) * 100 / Number(total)
        rate = rate.toFixed(2) + '%'
        this.$set(el, 'rate', rate)
      })
      this.inventory = [...res.inventory]
      this.history = [...res.history]
      this.setEchart1()
      this.setEchart2()
      this.setEchart3()
      this.setEchart4()
      this.setEchart5()
    },
    setEchart1 () {
      let value = this.orderFulfillmentRate
      let option = {
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        title: {
          text: `{a|${value}}{b|%}`,
          x: 'center',
          y: 'center',
          textStyle: {
            rich: {
              a: {
                fontSize: 36,
                color: '#DBE7F6',
                fontFamily: 'YouSheBiaoTiHei'
              },
              b: {
                fontSize: 20,
                padding: [9, 0, 0, 3],
                color: '#fff',
                fontFamily: 'YouSheBiaoTiHei'
              }
            }
          }
        },
        series: [{
          name: '进度',
          type: 'pie',
          radius: ['76%', '100%'],
          center: ['50%', '50%'],
          clockwise: false,
          label: {
            show: false
          },
          data: [{
            name: '已完成',
            value: value,
            itemStyle: {
              decal: {
                color: '#3D92ED',
                backgroundColor: '#1774E8',
                dashArrayX: [1, 0],
                dashArrayY: [1, 4],
                rotation: -Math.PI / 4
              }
            }
          }, {
            name: '未完成',
            value: 100 - value,
            itemStyle: {
              decal: {
                color: '#597491',
                backgroundColor: '#2f5175',
                dashArrayX: [1, 0],
                dashArrayY: [2, 4],
                rotation: -Math.PI / 4
              }
            },
            emphasis: {
              disabled: true
            }
          }]
        }, {
          type: 'pie',
          radius: ['99%', '100%'],
          clockwise: false,
          itemStyle: {
            color: '#45B1F1'
          },
          label: {
            show: false
          },
          data: [1]
        }, {
          type: 'pie',
          radius: ['75%', '76%'],
          clockwise: false,
          itemStyle: {
            color: '#45B1F1'
          },
          label: {
            show: false
          },
          data: [1]
        }]
      }
      if (document.getElementById('new_home_echart_1') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('new_home_echart_1'))
      let echart = this.$echarts.init(document.getElementById('new_home_echart_1'))
      echart.setOption(option)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    },
    setEchart2 () {
      let img = {
        imgSrc1: symbol1,
        imgSrc2: symbol2
      }
      let barName = []
      let barData1 = []
      let barData2 = []
      this.todayMix.map(el => {
        barName.push(el.materialCode)
        barData1.push(el.plan)
        barData2.push(el.real)
      })
      let option = {
        grid: {
          top: 55,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          top: '0',
          right: '0',
          textStyle: {
            color: '#9BB9DD',
            fontSize: 16,
            lineHeight: 16
          },
          itemGap: 30,
          itemWidth: 8,
          itemHeight: 8,
          data: [{name: '需生产', itemStyle: {color: '#8EB5E5'}}, {name: '已生产', itemStyle: {color: '#1980EA'}}]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#3C5787'
            }
          },
          axisLabel: {
            interval: 0,
            color: '#7591B2',
            fontSize: 12,
            lineHeight: 12,
            fontFamily: 'SourceHanSansCN-Regular',
            margin: 10,
            formatter: (value) => {
              let str = ''
              let num = 10
              let valLength = value.length
              let rowNum = Math.ceil(valLength / num)
              if (rowNum > 1) {
                for (let i = 0; i < rowNum; i++) {
                  let temp = ''
                  let start = i * num
                  let end = start + num
                  if (i === rowNum - 1) {
                    temp = value.substring(start, end)
                  } else {
                    temp = value.substring(start, end) + '\n'
                  }
                  str += temp
                }
                return str
              } else {
                return value
              }
            }
          },
          data: barName
        },
        yAxis: {
          type: 'value',
          name: '单位：吨',
          nameTextStyle: {
            color: '#B5C5D4',
            fontSize: 14,
            fontFamily: 'SourceHanSansCN-Regular',
            padding: [0, 10, 0, 10]
          },
          axisLine: {
            show: false
          },
          splitNumber: 4,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#B5C5D4',
            fontSize: 16,
            fontFamily: 'SourceHanSansCN-Regular'
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [4, 3],
              color: '#455C86'
            }
          }
        },
        series: [
          {
            name: '需生产',
            type: 'pictorialBar',
            barWidth: '77',
            symbol: 'image://' + img.imgSrc1,
            data: barData1
          },
          {
            name: '已生产',
            type: 'pictorialBar',
            barWidth: '77',
            barGap: '-75%',
            symbol: 'image://' + img.imgSrc2,
            data: barData2
          }
        ],
        dataZoom: [
          {
            xAxisIndex: 0, // 这里是从X轴的0刻度开始
            show: false, // 是否显示滑动条，不影响使用
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 4 // 展示到第几个。
          }
        ]
      }
      if (document.getElementById('new_home_echart_2') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('new_home_echart_2'))
      let echart = this.$echarts.init(document.getElementById('new_home_echart_2'))
      echart.setOption(option)
      this.chart2Timer = setInterval(() => {
        if (option.dataZoom[0].endValue >= barData1.length - 1) {
          option.dataZoom[0].endValue = 4
          option.dataZoom[0].startValue = 0
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
        }
        echart.setOption(option)
      }, 2000)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    },
    setEchart3 () {
      let barName = []
      let barData1 = []
      let barData2 = []
      let barData3 = []
      this.todaySort.map(el => {
        barName.push(el.materialCode)
        barData1.push(el.plan)
        barData2.push(el.press)
        barData3.push(el.real)
      })
      let option = {
        grid: {
          top: 55,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          top: '0',
          right: '0',
          textStyle: {
            color: '#9BB9DD',
            fontSize: 16,
            lineHeight: 16
          },
          itemGap: 30,
          itemWidth: 8,
          itemHeight: 8,
          data: [{name: '需生产', itemStyle: {color: '#8EB5E5'}}, {name: '已压制', itemStyle: {color: '#67D470'}}, {name: '已完成', itemStyle: {color: '#1980EA'}}]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#3C5787'
            }
          },
          axisLabel: {
            interval: 0,
            color: '#7591B2',
            fontSize: 12,
            lineHeight: 12,
            fontFamily: 'SourceHanSansCN-Regular',
            margin: 10,
            formatter: (value) => {
              let str = ''
              let num = 10
              let valLength = value.length
              let rowNum = Math.ceil(valLength / num)
              if (rowNum > 1) {
                for (let i = 0; i < rowNum; i++) {
                  let temp = ''
                  let start = i * num
                  let end = start + num
                  if (i === rowNum - 1) {
                    temp = value.substring(start, end)
                  } else {
                    temp = value.substring(start, end) + '\n'
                  }
                  str += temp
                }
                return str
              } else {
                return value
              }
            }
          },
          data: barName
        },
        yAxis: {
          type: 'value',
          // name: '单位：块',
          axisLine: {
            show: false
          },
          splitNumber: 4,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#B5C5D4',
            fontSize: 16,
            fontFamily: 'SourceHanSansCN-Regular'
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [4, 3],
              color: '#455C86'
            }
          }
        },
        series: [
          {
            name: '需生产',
            type: 'bar',
            barWidth: '10',
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: 'rgba(142,181,229,0.2)'
                },
                {
                  offset: 0.08,
                  color: 'rgba(142,181,229,0.9)'
                },
                {
                  offset: 0,
                  color: 'rgba(255,255,255,0.9)'
                }
              ])
            },
            data: barData1
          },
          {
            name: '已压制',
            type: 'bar',
            barWidth: '10',
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: 'rgba(103,212,112,0.2)'
                },
                {
                  offset: 0.08,
                  color: 'rgba(103,212,112,0.9)'
                },
                {
                  offset: 0,
                  color: 'rgba(255,255,255,0.9)'
                }
              ])
            },
            data: barData2
          },
          {
            name: '已完成',
            type: 'bar',
            barWidth: '10',
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: 'rgba(25,128,234,0.2)'
                },
                {
                  offset: 0.08,
                  color: 'rgba(25,128,234,0.9)'
                },
                {
                  offset: 0,
                  color: 'rgba(255,255,255,0.9)'
                }
              ])
            },
            data: barData3
          }
        ],
        dataZoom: [
          {
            xAxisIndex: 0, // 这里是从X轴的0刻度开始
            show: false, // 是否显示滑动条，不影响使用
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 4 // 展示到第几个。
          }
        ]
      }
      if (document.getElementById('new_home_echart_3') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('new_home_echart_3'))
      let echart = this.$echarts.init(document.getElementById('new_home_echart_3'))
      echart.setOption(option)
      this.chart3Timer = setInterval(() => {
        if (option.dataZoom[0].endValue >= barData1.length - 1) {
          option.dataZoom[0].endValue = 4
          option.dataZoom[0].startValue = 0
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
        }
        echart.setOption(option)
      }, 2000)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    },
    setEchart4 () {
      let colors = ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb']
      let seriesData = []
      let seriesName = []
      this.inventory.map((e, i) => {
        seriesData.push({name: e.materialCode, value: e.qty})
        seriesName.push({name: e.materialCode})
      })
      let total = 0
      this.inventory.map(e => {
        total = total + e.qty
      }, 0)
      let option = {
        color: colors,
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        title: {
          x: '23.5%',
          y: '39%',
          width: '200',
          height: '70',
          text: '总数',
          subtext: total,
          textAlign: 'center',
          textStyle: {
            fontSize: 14,
            lineHeight: 20,
            color: '#A8C3E6',
            fontFamily: 'SourceHanSansCN-Regular'
          },
          subtextStyle: {
            fontSize: 30,
            lineHeight: 36,
            color: '#DBE7F6',
            fontFamily: 'YouSheBiaoTiHei'
          }
        },
        legend: {
          show: true,
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 0,
          itemGap: 18,
          icon: 'rect',
          itemWidth: 8,
          itemHeight: 8,
          data: seriesName,
          formatter: (name) => {
            let total = 0
            let target
            for (let i = 0; i < seriesData.length; i++) {
              total += seriesData[i].value
              if (seriesData[i].name === name) {
                target = seriesData[i].value
              }
            }
            var arr = [
              '{name|' + name + '}\n',
              '{value|' + target + '}',
              '{rate|' + ((target / total) * 100).toFixed(2) + '%}'
            ]
            return arr.join('  ')
          },
          textStyle: {
            rich: {
              name: {
                fontSize: 12,
                lineHeight: 20,
                padding: [20, 0, 0, 0],
                fontFamily: 'SourceHanSansCN-Regular',
                wordWrap: 'break-word',
                color: '#9BB9DD',
                align: 'left'
              },
              value: {
                fontSize: 20,
                lineHeight: 20,
                padding: [10, 0, 0, 0],
                color: '#DFECFB',
                fontFamily: 'YouSheBiaoTiHei',
                align: 'left'
              },
              rate: {
                align: 'right',
                fontSize: 16,
                lineHeight: 20,
                padding: [10, 0, 0, 0],
                fontFamily: 'SourceHanSansCN-Regular',
                color: '#9BB9DD'
              }
            }
          },
          pageTextStyle: {
            fontSize: 12,
            color: 'RGBA(86, 114, 157, 0.9)'
          },
          // pageButtonPosition: 'start',
          pageButtonItemGap: 0,
          pageIconSize: 0
        },
        series: [{
          name: '库存量监控',
          type: 'pie',
          radius: ['61%', '69%'],
          center: ['24.5%', '49%'],
          labelLine: {
            show: false
          },
          tooltip: {
            show: false
          },
          itemStyle: {
            borderColor: 'RGBA(27, 58, 98, .5)',
            borderWidth: 2
          },
          label: {
            show: false
          },
          selectedMode: 'single',
          selectedOffset: 20,
          data: seriesData
        }]
      }
      if (document.getElementById('new_home_echart_4') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('new_home_echart_4'))
      let echart = this.$echarts.init(document.getElementById('new_home_echart_4'))
      echart.setOption(option)
      let bu = 0
      this.chart4Timer = setInterval(() => {
        if (bu > seriesData.length - 1) {
          bu = 0
        }
        // echart.dispatchAction({
        //   type: 'select',
        //   seriesIndex: 0,
        //   dataIndex: bu
        // })
        echart.dispatchAction({
          type: 'legendScroll',
          seriesIndex: 0,
          scrollDataIndex: bu
        })
        bu++
      }, 2000)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    },
    setEchart5 () {
      let img = {
        imgSrc1: symbol3,
        imgSrc2: symbol4,
        imgSrc3: lineSelected
      }
      let total = 0
      this.history.map(el => {
        total = Math.max(total, Number(el.press), Number(el.sort))
      })
      let barName = []
      let barData1 = []
      let barData2 = []
      let totalDate = []
      this.history.map(el => {
        barName.push(el.date)
        barData1.push(el.press)
        barData2.push(el.sort)
      })
      let option = {
        grid: {
          top: 55,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          showContent: false,
          axisPointer: {
            type: 'line',
            lineStyle: {
              type: 'solid',
              width: '2',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(254,254,254,0)'
                }, {
                  offset: 1,
                  color: 'rgba(254,254,254,0)'
                }],
                global: false
              }
            }
          }
        },
        legend: {
          icon: 'rect',
          top: '0',
          right: '0',
          textStyle: {
            color: '#9BB9DD',
            fontSize: 16,
            lineHeight: 16
          },
          itemGap: 30,
          itemWidth: 8,
          itemHeight: 8,
          data: [{name: '压制', itemStyle: {color: '#67D470'}}, {name: '成品', itemStyle: {color: '#1980EA'}}]
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#3C5787'
            }
          },
          axisLabel: {
            interval: 0,
            // rotate: 45,
            color: '#7591B2',
            fontSize: 12,
            lineHeight: 12,
            // align: 'right',
            fontFamily: 'SourceHanSansCN-Regular',
            margin: 10
            // formatter: (value) => {
            //   let str = ''
            //   let num = 5
            //   let valLength = value.length
            //   let rowNum = Math.ceil(valLength / num)
            //   if (rowNum > 1) {
            //     for (let i = 0; i < rowNum; i++) {
            //       let temp = ''
            //       let start = i * num
            //       let end = start + num
            //       if (i === rowNum - 1) {
            //         temp = value.substring(start, end)
            //       } else {
            //         temp = value.substring(start, end) + '\n'
            //       }
            //       str += temp
            //     }
            //     return str
            //   } else {
            //     return value
            //   }
            // }
          },
          data: barName
        },
        yAxis: {
          type: 'value',
          // name: '单位：块',
          axisLine: {
            show: false
          },
          splitNumber: 4,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#B5C5D4',
            fontSize: 16,
            fontFamily: 'SourceHanSansCN-Regular'
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [4, 3],
              color: '#455C86'
            }
          },
          max: total
        },
        series: [
          {
            name: '压制',
            type: 'line',
            symbol: 'image://' + img.imgSrc1,
            symbolSize: [10, 10],
            legendHoverLink: true,
            showSymbol: false,
            itemStyle: {
              color: '#67D470',
              lineStyle: {
                color: '#67D470',
                width: 2
              }
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: 'rgba(103,212,112,0.1)'
                },
                {
                  offset: 1,
                  color: 'rgba(103,212,112,0.74)'
                }
              ])
            },
            data: barData1
          },
          {
            name: '成品',
            type: 'line',
            symbol: 'image://' + img.imgSrc2,
            symbolSize: [10, 10],
            legendHoverLink: true,
            showSymbol: false,
            itemStyle: {
              color: '#58A2E3',
              lineStyle: {
                color: '#58A2E3',
                width: 2
              }
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: 'rgba(45,144,255,0)'
                },
                {
                  offset: 1,
                  color: 'rgba(45,144,255,0.85)'
                }
              ])
            },
            data: barData2
          },
          {
            name: '阴影',
            type: 'pictorialBar',
            barWidth: '38px',
            symbol: 'image://' + img.imgSrc3,
            data: totalDate,
            z: -1
          }
        ]
      }
      if (document.getElementById('new_home_echart_5') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('new_home_echart_5'))
      let echart = this.$echarts.init(document.getElementById('new_home_echart_5'))
      echart.setOption(option)
      let len = 0
      this.chart5Timer = setInterval(() => {
        if (len === barName.length) {
          len = 0
        }
        totalDate[len] = total
        echart.setOption({
          series: [{
            data: barData1
          }, {
            data: barData2
          }, {
            data: totalDate
          }
          ]
        })
        echart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: len
        })
        totalDate = []
        len++
      }, 2000)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.left_wraper
    _wh(100%, 100%)
.item_wraper
    _wh(100%, calc((100% - 40px) / 3))
    margin-bottom 20px
    &:last-child
        margin-bottom 0
.title_wraper
    _wh(100%, 42px)
    background center / 100% url('../../../../images/bg-title_1.png') no-repeat
    padding 6px 44px
    p
      font-size 24px
      font-family: 'YouSheBiaoTiHei';
      font-weight: 400;
      color: transparent;
      line-height 24px
      background: linear-gradient(0deg, #F9FEFF 0%, #F5FCFF 53.3154296875%, #BAE9FF 100%);
      -webkit-background-clip: text;
      background-clip: text;
.content_wraper
    _wh(100%, calc(100% - 42px))
    background center / 100% url('../../../../images/bg-m_1.png') no-repeat
.l_item_wraper
    _wh(calc(50% - 15.5px), 100%)
    .title_wraper
      background center / 100% url('../../../../images/bg-title_2.png') no-repeat
    .content_wraper
      padding 20px
      background center / 100% url('../../../../images/bg-m_2.png') no-repeat
    .content_wraper_1
      padding 23px 0 6px 0
.module_one_wraper
    _wh(233px, 100%)
    padding 5px 9px 31px 9px
.line_1
    _wh(1px, 204px)
    background: #E3EDFF;
    opacity: 0.2;
.module_two_wraper
    _wh(calc(100% - 435px), 100%)
    padding 0 25px 0 30px
    _fj(,center)
.module_three_wraper
    _wh(186px, 214px)
    margin-right 15px
    padding 27px 17px 27px 23px
    background center / 100% url('../../../../images/message-bg.png') no-repeat
.echart_wraper
    _wh(100%, 100%)
.echart_wraper_1
    _wh(100%, 100%)
.pie_wraper_1
    position relative
    _wh(100%, 100%)
    padding 28px 27px 27px 28px
    background center / 100% auto url('../../../../images/pie-bg_1.png') no-repeat
.pie_wraper_2
    _wh(100%, 100%)
    background left center / 222px 222px url('../../../../images/pie-bg_2.png') no-repeat
.pie_legend
  _wh(calc(100% - 195px), 100%)
  margin-left 195px
  _fj(, center)
.pie_legend_item
  width 100%
  padding 0 0px 2px 20px
.pie_legend_item_bg_1
  background top left / 18px auto url('../../../../images/fk_1.png') no-repeat
.pie_legend_item_bg_2
  background top left / 18px auto url('../../../../images/fk_2.png') no-repeat
.pie_legend_item_bg_3
  background top left / 18px auto url('../../../../images/fk_3.png') no-repeat
.pie_legend_item_bg_4
  background top left / 18px auto url('../../../../images/fk_4.png') no-repeat
.pie_legend_item_bg_5
  background top left / 18px auto url('../../../../images/fk_5.png') no-repeat
.pie_legend_item_bg_6
  background top left / 18px auto url('../../../../images/fk_6.png') no-repeat
.pie_legend_item_bg_7
  background top left / 18px auto url('../../../../images/fk_7.png') no-repeat
.pie_legend_txt_1
  font-size: 12px;
  line-height: 14px
  font-family: 'SourceHanSansCN-Regular';
  color: #9BB9DD;
  word-wrap: break-word;
.pie_legend_txt_wraper
  _wh(100%, 18px)
  _fj(row)
.pie_legend_txt_2
  font-size 18px
  line-height: 18px
  font-family: 'YouSheBiaoTiHei'
  color: transparent;
  background: linear-gradient(0deg, #E5F2FC 0%, #CDEAFC 53.3154296875%, #A0DBFC 100%);
  filter: drop-shadow(rgba(5,28,55,0.42) 0px 2px 8px);
  -webkit-background-clip: text;
  background-clip: text;
.pie_legend_txt_3
  font-size: 14px;
  line-height: 18px
  font-family: 'SourceHanSansCN-Regular';
  color: #9BB9DD;
  opacity: 0.5;
.pie_inner_1
    _wh(100%, 100%)
    background center / 100% url('../../../../images/pie_1.png') no-repeat
    _fj(,center)
    p
      font-size: 36px;
      line-height 36px
      font-family: 'YouSheBiaoTiHei';
      font-weight: 400;
      color: transparent;
      text-align: center;
      background: linear-gradient(0deg, #F9FEFF 0%, #F9FEFF 53.3154296875%, #B5E8FF 100%);
      filter: drop-shadow(rgba(5,28,55,0.42) 0px 2px 8px)
      -webkit-background-clip: text;
      background-clip: text;
      span
        font-size 20px
        line-height 20px
.light_1
    position absolute
    top 47px
    left -9px
    _wh(224px, 135px)
    background center / 100% url('../../../../images/light_1.png') no-repeat
.pie_title_1
    position absolute
    top 204px
    _wh(calc(100% - 55px), 16px)
    _font(16px, 16px, #9BB9DD,,)
    font-family: 'SourceHanSansCN-Regular'
.module_two_item_wraper
    _fj(row)
    _wh(100%, 48px)
    margin-bottom 14px
    &:nth-child(1)
      .module_two_item_content
          background center / 100% url('../../../../images/gl-bg_1.png') no-repeat
    &:nth-child(2)
      .module_two_item_content
          background center / 100% url('../../../../images/gl-bg_2.png') no-repeat
    &:nth-child(3)
      .module_two_item_content
          background center / 100% url('../../../../images/gl-bg_3.png') no-repeat
.module_two_item_lable
  _wh(64px, 48px)
  _font(16px, 48px, #9BB9DD,,left)
  font-family: 'SourceHanSansCN-Regular'
.module_two_item_content
  _fj(row)
  _wh(calc(100% - 64px), 48px)
.module_two_item_p_l
  _wh(50%, 100%)
  padding-left 20px
  font-size 24px
  line-height 48px
  font-family: 'YouSheBiaoTiHei'
  color: transparent;
  background: linear-gradient(0deg, #F9FEFF 0%, #E8F8FF 53.3154296875%, #E8F8FF 100%);
  filter: drop-shadow(rgba(5,28,55,0.42) 0px 2px 8px);
  -webkit-background-clip: text;
  background-clip: text;
.module_two_item_p_r
  _wh(50%, 100%)
  padding-right 10px
  _font(16px, 48px, #fff,,right)
  font-family: 'YouSheBiaoTiHei'
  opacity: 0.3;
.module_three_text
  _font(16px, 32px, #fff,,left)
  font-family: 'SourceHanSansCN-Regular'
  span
    color #1980EA
    font-family: 'YouSheBiaoTiHei'
</style>
