<template>
  <div class="n_container">
      <div class="n_header">
          <div class="n_header_h1">
              <h1>生产监控中心</h1>
          </div>
          <div class="n_header_h2" >
            <h2>宁德华弘新材料科技有限公司</h2>
          </div>
          <v-time></v-time>
          <div class="exit_btn" :style="expand ? {opacity: 1} : {opacity: 0.1}">
            <div class="exit_txt" @click="$router.push('/setup')" :style="expand ? {width: '70px'} : {width: '0px'}">退出</div>
            <div class="exit_arrow" v-text="!expand ? '&gt;&gt;' : '&lt;&lt;'" @click.stop="expand = !expand"></div>
          </div>
      </div>
      <div class="left_bg"></div>
      <div class="right_bg"></div>
      <div class="button_bg"></div>
      <div class="n_body_container">
          <div class="n_left_wraper">
            <div class="w_wraper">
              <div class="item_wraper">
                <div class="title_wraper">
                  <p>当日混料</p>
                </div>
                <div class="content_wraper">
                  <div class="w_wraper">
                      <div id="new_home_echart_1" style="width: 100%; height: 100%;"></div>
                  </div>
                </div>
              </div>
              <div class="item_wraper">
                <div class="title_wraper">
                  <p>当日成品</p>
                </div>
                <div class="content_wraper">
                  <div class="w_wraper">
                      <div id="new_home_echart_2" style="width: 100%; height: 100%;"></div>
                  </div>
                </div>
              </div>
              <div class="item_wraper">
                <div class="title_wraper">
                  <p>历史分析</p>
                </div>
                <div class="content_wraper">
                  <div class="w_wraper">
                      <div id="new_home_echart_3" style="width: 100%; height: 100%;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="n-center_wraper">
            <t-workshop></t-workshop>
          </div>
          <div class="n_right_wraper">
            <div class="w_wraper">
              <div class="item_wraper">
                <div class="title_wraper">
                  <p>设备运行统计</p>
                </div>
                <div class="content_wraper relative">
                  <div class="pie_wraper_2">
                    <div class="w_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 stateStatistics.fourState" :key="i" :class="'pie_legend_item_bg_' + (i + 1)">
                      <p class="pie_legend_txt_1">{{ e.stateName }}</p>
                      <div class="pie_legend_txt_wraper">
                        <p class="pie_legend_txt_2">{{ e.status }}</p>
                        <p class="pie_legend_txt_3">{{ e.rate }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item_wraper">
                <div class="title_wraper">
                  <p>30天故障-TOP10</p>
                </div>
                <div class="content_wraper content_wraper_1">
                  <div class="w_wraper">
                      <div id="new_home_echart_5" style="width: 100%; height: 100%;"></div>
                  </div>
                </div>
              </div>
              <div class="item_wraper">
                <div class="title_wraper">
                    <p>设备报警信息</p>
                </div>
                <div class="content_wraper" style="padding: 0">
                  <div class="scroll_wrap">
                    <ul class="scroll_tab_1">
                      <li>设备编号</li>
                      <li>设备名称</li>
                      <li>报警原因</li>
                      <li>报警时间</li>
                    </ul>
                    <div class="scroll_container_1">
                      <vue-seamless-scroll :data="deviceWorkOrder" :class-option="defaultOption1">
                        <ul class="scroll-ul_1">
                          <li v-for="(e, i) in deviceWorkOrder" :key="i">
                          <div class="scroll-ul_1_div">{{e.deviceCode}}</div>
                          <div class="scroll-ul_1_div">{{e.deviceName}}</div>
                          <div class="scroll-ul_1_div">
                            <span class="state" :class="'state_' + e.status"></span>
                            <p class="state_name">{{['关机', '待机', '生产中', '故障'][Number(e.status)]}}</p>
                          </div>
                          <div class="scroll-ul_1_div">{{e.startTime}}</div>
                          </li>
                        </ul>
                      </vue-seamless-scroll>
                    </div>
                  </div>
                </div>
            </div>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
import { homepageDataLeft, homepageDataRight } 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'
import bg1 from '@img/bg1.png'
import bg2 from '@img/bg2.png'
import bg3 from '@img/bg3.png'
import bg4 from '@img/bg4.png'
import vTime from '@components/time.vue'
import TWorkshop from './workshop'
export default {
  components: {
    vTime,
    TWorkshop
  },
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      expand: false,
      todayMixProduction: {}, // 今日生产混料
      todayPressProduction: {}, // 今日生产成型
      todaySortProduction: {}, // 今日生产包装
      orderFulfillmentRate: {}, // 订单完成
      todayTotalPlan: '',
      materialCountSize: '',
      sortCompleted: '',
      sortCompletedQty: '',
      sortMaterialCountSize: '',
      fulfillmentRate: '',
      todayMix: [], // 当日混料
      todaySort: [], // 当日成品
      inventory: [], // 库存量监控
      history: [], // 历史分析
      chart2Timer: null,
      chart3Timer: null,
      chart4Timer: null,
      chart5Timer: null,
      chart7Timer: null,
      chart9Timer: null,
      capacityRate: [], // 设备产能利用
      stateStatistics: {}, // 设备运行统计
      deviceWorkOrder: [], // 设备工单生产
      areaDeviceStatus: [{process: '混料'}, {process: '压制'}, {process: '干燥'}, {process: '包装'}], // 工序设备状态
      top10Of30Days: [] // 30天故障top10
    }
  },
  computed: {
    defaultOption1 () {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 95, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  created () {
    // this._homepageDataLeft()
    // this._homepageDataRight()
    // this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
    clearInterval(this.chart2Timer)
    clearInterval(this.chart3Timer)
    clearInterval(this.chart4Timer)
    clearInterval(this.chart5Timer)
  },
  methods: {
    expandTooltip () {
      this.expand = !this.expand
    },
    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()
    },
    async _homepageDataRight () {
      let res = await homepageDataRight()
      clearInterval(this.chart7Timer)
      clearInterval(this.chart9Timer)
      this.capacityRate = [...res.capacityRate]
      res.stateStatistics.fourState.map(el => {
        let rate = Number(el.status) * 100 / Number(res.stateStatistics.count)
        rate = rate.toFixed(2) + '%'
        this.$set(el, 'rate', rate)
      })
      this.stateStatistics = res.stateStatistics
      this.deviceWorkOrder = [...res.deviceWorkOrder]
      this.areaDeviceStatus.map((e, i) => {
        if (i === 0) {
          this.$set(e, 'running', res.areaDeviceStatus.mix.running)
          this.$set(e, 'pausing', res.areaDeviceStatus.mix.pausing)
          this.$set(e, 'shutdown', res.areaDeviceStatus.mix.shutdown)
          this.$set(e, 'inTrouble', res.areaDeviceStatus.mix.inTrouble)
        }
        if (i === 1) {
          this.$set(e, 'running', res.areaDeviceStatus.press.running)
          this.$set(e, 'pausing', res.areaDeviceStatus.press.pausing)
          this.$set(e, 'shutdown', res.areaDeviceStatus.press.shutdown)
          this.$set(e, 'inTrouble', res.areaDeviceStatus.press.inTrouble)
        }
        if (i === 2) {
          this.$set(e, 'running', res.areaDeviceStatus.dry.running)
          this.$set(e, 'pausing', res.areaDeviceStatus.dry.pausing)
          this.$set(e, 'shutdown', res.areaDeviceStatus.dry.shutdown)
          this.$set(e, 'inTrouble', res.areaDeviceStatus.dry.inTrouble)
        }
        if (i === 3) {
          this.$set(e, 'running', res.areaDeviceStatus.sort.running)
          this.$set(e, 'pausing', res.areaDeviceStatus.sort.pausing)
          this.$set(e, 'shutdown', res.areaDeviceStatus.sort.shutdown)
          this.$set(e, 'inTrouble', res.areaDeviceStatus.sort.inTrouble)
        }
      })
      this.top10Of30Days = [...res.top10Of30Days]
      this.top10Of30Days.map((e, i) => {
        this.$set(e, 'sort', i + 1)
      })
      this.top10Of30Days = this.top10Of30Days.reverse()
      this.setEchart4()
      this.setEchart5()
    },
    setEchart1 () {
      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_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)
      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()
      })
    },
    setEchart2 () {
      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_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.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()
      })
    },
    setEchart3 () {
      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',
          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
          },
          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_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)
      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()
      })
    },
    setEchart4 () {
      let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252', '#BCBF5C', '#6d5edd', '#bf41bb']
      let seriesData = this.stateStatistics.fourState
      seriesData.map((el, i) => {
        el.value = el.status
        el.name = el.stateName
      })
      let total = this.stateStatistics.count
      let option = {
        color: colors,
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        title: {
          text: `{a|总数}\n{b|${total}}`,
          x: 'center',
          y: '39%',
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                lineHeight: 20,
                color: '#A8C3E6',
                fontFamily: 'SourceHanSansCN-Regular'
              },
              b: {
                fontSize: 30,
                lineHeight: 36,
                color: '#DBE7F6',
                fontFamily: 'YouSheBiaoTiHei'
              }
            }
          }
        },
        series: [{
          name: '设备运行统计',
          type: 'pie',
          radius: ['61%', '69%'],
          center: ['50%', '50%'],
          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)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    },
    setEchart5 () {
      let ydata = []
      let xdata = []
      let total = 0
      this.top10Of30Days.map(el => {
        total = Math.max(total, Number(el.count))
      })
      let data = []
      this.top10Of30Days.map(el => {
        ydata.push(el.device_name)
        xdata.push({name: el.device_name, value: el.count, sort: el.sort})
        data.push({value: total, num: el.count})
      })
      let img = {
        bg1: bg1,
        bg2: bg2,
        bg3: bg3,
        bg4: bg4
      }
      let colorArray = [
        {
          top: '#537BCB',
          bottom: '#ADC0E6'
        },
        {
          top: '#537BCB',
          bottom: '#ADC0E6'
        },
        {
          top: '#537BCB',
          bottom: '#ADC0E6'
        },
        {
          top: '#537BCB',
          bottom: '#ADC0E6'
        },
        {
          top: '#537BCB',
          bottom: '#ADC0E6'
        },
        {
          top: '#537BCB',
          bottom: '#ADC0E6'
        },
        {
          top: '#537BCB',
          bottom: '#ADC0E6'
        },
        {
          top: '#6B4C43',
          bottom: '#B8A590'
        },
        {
          top: '#3261FB',
          bottom: '#6BB5FB'
        }, {
          top: '#8C620F',
          bottom: '#C7B51C'
        }
      ]
      let option = {
        grid: {
          top: 13,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        xAxis: {
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          data: ydata,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          max: total
        },
        series: [{
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: '#FFFFFF',
            borderWidth: 5
          },
          label: {
            show: true,
            position: [-2, -32],
            formatter: (value) => {
              let o = value.data
              if (o.sort === 1) {
                return '{one|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
              } else if (o.sort === 2) {
                return '{two|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
              } else if (o.sort === 3) {
                return '{three|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
              } else {
                return '{four|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
              }
            },
            rich: {
              // 第一名
              one: {
                backgroundColor: {
                  image: img.bg1
                },
                color: '#fff',
                width: 60,
                height: 32,
                fontSize: 16,
                lineHeight: 16,
                align: 'center',
                fontFamily: 'YouSheBiaoTiHei'
              },
              // 第二名
              two: {
                backgroundColor: {
                  image: img.bg2
                },
                color: '#fff',
                width: 60,
                height: 32,
                fontSize: 16,
                lineHeight: 16,
                align: 'center',
                fontFamily: 'YouSheBiaoTiHei'
              },
              // 第三名
              three: {
                backgroundColor: {
                  image: img.bg3
                },
                color: '#fff',
                width: 60,
                height: 32,
                fontSize: 16,
                lineHeight: 16,
                align: 'center',
                fontFamily: 'YouSheBiaoTiHei'
              },
              four: {
                backgroundColor: {
                  image: img.bg4
                },
                color: '#fff',
                width: 60,
                height: 32,
                fontSize: 16,
                lineHeight: 16,
                align: 'center',
                fontFamily: 'YouSheBiaoTiHei'
              },
              a: {
                color: '#AEC3DC',
                height: 32,
                fontSize: 16,
                lineHeight: 16,
                padding: [0, 0, 0, 7],
                fontFamily: 'SourceHanSansCN-Regular'
              }
            }
          },
          barWidth: 3,
          itemStyle: {
            color: (params) => {
              let num = colorArray.length
              return {
                type: 'linear',
                colorStops: [
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  },
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  },
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  }
                ]
                // globalCoord: false
              }
            }
          },
          data: xdata
        }, {
          name: '背景',
          type: 'bar',
          barWidth: 3,
          barGap: '-100%',
          itemStyle: {
            color: '#fff'
          },
          z: 1,
          label: {
            show: true,
            position: 'insideTopRight',
            offset: [0, -32],
            formatter: (value) => {
              return '{a|' + value.data.num + '}'
            },
            rich: {
              a: {
                height: 32,
                fontSize: 20,
                lineHeight: 20,
                align: 'left',
                fontFamily: 'YouSheBiaoTiHei',
                color: '#E1F6FF'
              }
            }
          },
          data: data
        }],
        dataZoom: [
          {
            yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始
            show: false, // 是否显示滑动条，不影响使用
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 9, // 从头开始。
            endValue: 6 // 展示到第几个。
          }
        ]
      }
      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)
      this.chart9Timer = setInterval(() => {
        if (option.dataZoom[0].endValue === 0) {
          option.dataZoom[0].endValue = 6
          option.dataZoom[0].startValue = 9
        } 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()
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.n_container
  position relative
  width 100%
  height 100%
  background center / 100% 100% url('../../../images/bg.jpg') no-repeat
  overflow hidden
.n_header
  position absolute
  left 0
  top 0
  width 100%
  height 181px
  background center / 100% url('../../../images/header_bg.png') no-repeat
.n_header_h1
  width: 100%;
  height: 100%;
  padding-top 26px
  h1
      font-size: 60px;
      font-family: 'YouSheBiaoTiHei';
      font-weight: 400;
      color: transparent;
      line-height: 44px;
      opacity: 0.89;
      letter-spacing 10px
      background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
      filter: drop-shadow(#092F6D 1px 4px 1px);
      -webkit-background-clip: text;
      background-clip: text;
      text-align center
.n_header_h2
  position absolute
  top 30px
  left 15px
  height 31px
  h2
      font-size: 32px;
      font-family: 'YouSheBiaoTiHei';
      font-weight: 400;
      color: transparent;
      line-height: 29px;
      background: linear-gradient(0deg, #B6C3D3 0%, #E3E9F2 53.3154296875%, #FEFEFE 100%);
      -webkit-background-clip: text;
      background-clip: text;
.left_bg
  position absolute
  left 0
  top 111px
  width 34px
  height 839px
  background center / 100% url('../../../images/bg-left.png') no-repeat
.right_bg
  position absolute
  right 0
  top 111px
  width 34px
  height 839px
  background center / 100% url('../../../images/bg-right.png') no-repeat
.button_bg
  position absolute
  left 0
  bottom 0
  width 100%
  height 40px
  background center / 100% url('../../../images/bg-button.png') no-repeat
.n_body_container
  width 100%
  height 100%
  padding 125px 30px 50px 30px
  display: flex;
  justify-content: space-between;
  align-items: center;
.n_left_wraper
  width 22%
  height 100%
.n_right_wraper
  width 22%
  height 100%
.n-center_wraper
  position relative
  width calc(56% - 40px)
  height 100%
  padding-top 5px
  background center / 100% 100% url('../../../images/bg-center.png') no-repeat
.w_wraper
  width 100%
  height 100%
.item_wraper
  width 100%
  height calc((100% - 40px) / 3)
  margin-bottom 20px
  &:last-child
    margin-bottom 0
.title_wraper
  width 100%
  height 42px
  background center / 100% 100% url('../../../images/bg-title_2.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
  width 100%
  height calc(100% - 42px)
  padding 20px
  background center / 100% 100% url('../../../images/bg-m_2.png') no-repeat
.pie_wraper_2
  position absolute
  top 17px
  left 0
  width 222px
  height 222px
  background center / 100% auto url('../../../images/pie-bg_2.png') no-repeat
.pie_legend
  width calc(100% - 200px)
  height 100%
  margin-left 200px
  display flex
  flex-direction row
  justify-content space-between
  align-items center
  flex-wrap: wrap
.pie_legend_item
  width 50%
  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_5.png') no-repeat
.pie_legend_txt_1
  font-size: 16px;
  line-height: 16px
  font-family: 'SourceHanSansCN-Regular';
  color: #9BB9DD;
  margin-bottom 8px
.pie_legend_txt_wraper
  width 100%
.pie_legend_txt_2
  font-size 20px
  line-height: 20px
  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;
  margin-bottom 8px
.pie_legend_txt_3
  font-size: 16px;
  line-height: 16px
  font-family: 'SourceHanSansCN-Regular';
  color: #9BB9DD;
  opacity: 0.5;
.content_wraper_1
  padding-bottom: 0
  .echart_wraper
    height calc(100% + 21px)
.scroll_wrap
    width 100%
    height 100%
    padding 20px 20px 5px 20px
.scroll_tab_1
  width 100%
  height 38px
  background left center / auto 100% url('../../../images/table-bg_1.png') no-repeat
  li
    float left
    width 10%
    font-size 16px;
    line-height 38px
    color #AFBED8
    text-align center
    font-family: 'SourceHanSansCN-Regular';
    font-weight: bold;
    font-style: italic;
    word-wrap break-word
    word-break break-all
    white-space nowrap
    padding 0 5px
    overflow hidden
    box-sizing border-box
    &:nth-child(1)
      width 20%
    &:nth-child(2)
      width 35%
    &:nth-child(3)
      width 20%
    &:nth-child(4)
      width 25%
    .state
      display block
      width 20px
      height 14px
    .state_name
      width calc(100% - 20px)
.scroll_container_1
  width 100%
  height calc(100% - 38px)
  overflow hidden
.scroll-ul_1
  li
    width 100%
    height 40px
    border-bottom 1px solid rgba(122,159,224,0.17)
    &:nth-child(even)
      background rgba(31,46,73,0.7)
    &:nth-child(odd)
      background rgba(31,46,73,0.55)
    .scroll-ul_1_div
      float left
      width 10%
      height 39px
      display flex
      flex-direction row
      justify-content center
      align-items center
      flex-wrap nowrap
      font-size 16px
      line-height 16px
      color #B2BBD7
      text-align center
      font-family: 'SourceHanSansCN-Regular';
      font-style: italic;
      word-wrap break-word
      word-break break-all
      // white-space nowrap
      padding 0 5px
      overflow hidden
      &:nth-child(1)
        width 20%
      &:nth-child(2)
        width 35%
      &:nth-child(3)
        width 20%
      &:nth-child(4)
        width 25%
      .state
        display block
        width 20px
        height 14px
      .state_name
        width 100%
        height 20px
.exit_btn
  position: absolute;
  left: 0;
  top: 30px;
  height 50px;
  display: flex;
  justify-content: space-between;
.exit_txt
  font-size: 20px;
  line-height: 50px;
  color: #e6e7e1;
  text-align: center;
  font-weight: bold;
  transition width .3s ease
  overflow hidden
  background-color: rgba(30, 182, 203, 80%);
.exit_arrow
  width: 46px;
  font-size: 20px;
  line-height: 50px;
  color: #e6e7e1;
  text-align: center;
  background-color: rgba(30, 182, 203, 60%);
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px
</style>
