<template>
  <div class="n_container">
      <div class="n_header">
          <div class="n_header_h1">
              <h1>车间物流监控</h1>
          </div>
          <v-time></v-time>
          <div class="n_header_info">
            <div class="exit_btn iconfont" @click.stop="$router.push('/setup')">&#xe85b;</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 content_wraper_2">
                  <div class="pie_wraper">
                    <div id="home_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="home_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="home_3" style="width: 100%; height: 100%;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="n-center_wraper">
            <div class="w_wraper">
              <div class="item_wraper item_wraper_1">
                <div class="title_wraper title_wraper_1">
                  <p>设备监控</p>
                </div>
                <div class="content_wraper content_wraper_3">
                  <div class="agv_wrap">
                    <div class="agv_item" v-for="(e , i) in agvList" :key="'agv' + i">
                      <div class="agv_left">
                        <div class="agv_img"></div>
                        <p class="p1">{{ e.device_name }}</p>
                      </div>
                      <div class="agv_info">
                        <div class="agv_txt">
                          <p class="p2">任务号</p>
                          <p class="p3">{{ e.task_code }}</p>
                        </div>
                        <div class="agv_txt">
                          <p class="p2">电量</p>
                          <p class="p3">{{ e.battery_level }}</p>
                        </div>
                        <div class="agv_txt">
                          <p class="p2">状态</p>
                          <p class="p3">{{ e.status }}</p>
                        </div>
                        <div class="agv_txt">
                          <p class="p2">提示信息</p>
                          <p class="p3">{{ e.message }}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="agv_wrap rgv_wrap">
                    <div class="agv_item rgv_item" v-for="(e , i) in rgvList" :key="'rgv' + i">
                      <div class="agv_left rgv_left">
                        <div class="agv_img rgv_img"></div>
                        <p class="p1">{{ e.device_name }}</p>
                      </div>
                      <div class="rgv_info">
                        <div class="agv_txt rgv_txt">
                          <p class="p2">当前位置</p>
                          <p class="p3">{{ e.current_loc }}</p>
                        </div>
                        <div class="agv_txt rgv_txt">
                          <p class="p2">目标位置
</p>
                          <p class="p3">{{ e.target_loc }}</p>
                        </div>
                        <div class="agv_txt rgv_txt">
                          <p class="p2">电量</p>
                          <p class="p3">{{ e.battery_level }}</p>
                        </div>
                        <div class="agv_txt rgv_txt">
                          <p class="p2">状态</p>
                          <p class="p3">{{ e.status }}</p>
                        </div>
                        <div class="agv_txt rgv_txt">
                          <p class="p2">提示信息</p>
                          <p class="p3">{{ e.message }}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item_wraper">
                <div class="title_wraper title_wraper_1">
                  <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>
                      <li>物料号</li>
                      <li>物料名称</li>
                      <li>数量</li>
                      <li>重量</li>
                      <li>任务状态</li>
                    </ul>
                    <div class="scroll_container_1">
                      <vue-seamless-scroll :data="taskList" :class-option="defaultOption1">
                        <ul class="scroll-ul_1">
                          <li v-for="(e, i) in taskList" :key="i">
                          <div class="scroll-ul_1_div">{{e.create_time}}</div>
                          <div class="scroll-ul_1_div">{{e.carno}}</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.start_point_code}}</div>
                          <div class="scroll-ul_1_div">{{e.next_point_code}}</div>
                          <div class="scroll-ul_1_div">{{e.next_point_code}}</div>
                          <div class="scroll-ul_1_div">{{e.next_point_code}}</div>
                          <div class="scroll-ul_1_div">{{e.next_point_code}}</div>
                          <div class="scroll-ul_1_div">{{e.next_point_code}}</div>
                          <div class="scroll-ul_1_div">{{e.task_status}}</div>
                          </li>
                        </ul>
                      </vue-seamless-scroll>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </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">
                  <div class="w_wraper">
                      <div id="home_4" style="width: 100%; height: 100%;"></div>
                  </div>
                </div>
              </div>
              <div class="item_wraper item_wraper_1">
                <div class="title_wraper">
                  <p>当日车间上下料</p>
                </div>
                <div class="content_wraper">
                  <div class="w_wraper">
                      <div id="home_5" style="width: 100%; height: 100%;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
// import { inventoryAnalysis, inventoryIOAnalysis, historyInventoryIOAnalysis, todayProduceStatistic, todayLoadingAndUnloadingStatistics, todayTask, agvInfo, rgvInfo } from '@js/mork2.js'
import { inventoryAnalysis, inventoryIOAnalysis, historyInventoryIOAnalysis, todayProduceStatistic, todayLoadingAndUnloadingStatistics, todayTask, agvInfo, rgvInfo } from '@js/getData2.js'
import symbol3 from '@img/symbol_3.png'
import symbol4 from '@img/symbol_4.png'
import lineSelected from '@img/line_selected.png'
import vTime from '@components/time.vue'
export default {
  components: {
    vTime
  },
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      chart1Timer: null,
      chart2Timer: null,
      chart3Timer: null,
      chart5Timer: null,
      materList: [], // 原料库存
      curList: [], // 当日出入
      historyList: [], // 历史分析
      statisList: [], // 当日生产统计
      loadList: [], // 当日车间上下料
      taskList: [], // 当日搬运任务
      agvList: [],
      rgvList: []
    }
  },
  computed: {
    defaultOption1 () {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 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.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
    clearInterval(this.chart1Timer)
    clearInterval(this.chart2Timer)
    clearInterval(this.chart3Timer)
    clearInterval(this.chart5Timer)
    this.timer = null
    this.chart1Timer = null
    this.chart2Timer = null
    this.chart3Timer = null
    this.chart5Timer = null
  },
  destroyed () {
    clearInterval(this.timer)
    clearInterval(this.chart1Timer)
    clearInterval(this.chart2Timer)
    clearInterval(this.chart3Timer)
    clearInterval(this.chart5Timer)
    this.timer = null
    this.chart1Timer = null
    this.chart2Timer = null
    this.chart3Timer = null
    this.chart5Timer = null
  },
  methods: {
    refresh () {
      this._inventoryAnalysis()
      this._inventoryIOAnalysis()
      this._historyInventoryIOAnalysis()
      this._todayProduceStatistic()
      this._todayLoadingAndUnloadingStatistics()
      this._todayTask()
      this._agvInfo()
      this._rgvInfo()
      this.timer = setInterval(() => {
        this._inventoryAnalysis()
        this._inventoryIOAnalysis()
        this._historyInventoryIOAnalysis()
        this._todayProduceStatistic()
        this._todayLoadingAndUnloadingStatistics()
        this._todayTask()
        this._agvInfo()
        this._rgvInfo()
      }, this.interTime)
    },
    async _inventoryAnalysis () {
      let res = await inventoryAnalysis()
      if (res.length) {
        clearInterval(this.chart1Timer)
        this.chart1Timer = null
        this.materList = [...res]
        this.setEchart1()
      }
    },
    async _inventoryIOAnalysis () {
      let res = await inventoryIOAnalysis()
      if (res.length) {
        clearInterval(this.chart2Timer)
        this.chart2Timer = null
        this.curList = [...res]
        this.setEchart2()
      }
    },
    async _historyInventoryIOAnalysis () {
      let res = await historyInventoryIOAnalysis()
      if (res.length) {
        clearInterval(this.chart3Timer)
        this.chart3Timer = null
        this.historyList = [...res]
        this.setEchart3()
      }
    },
    async _todayProduceStatistic () {
      let res = await todayProduceStatistic()
      if (res.length) {
        this.statisList = [...res]
        this.setEchart4()
      }
    },
    async _todayLoadingAndUnloadingStatistics () {
      let res = await todayLoadingAndUnloadingStatistics()
      if (res.length) {
        clearInterval(this.chart5Timer)
        this.chart5Timer = null
        this.loadList = [...res]
        this.setEchart5()
      }
    },
    setEchart1 () {
      let colors = ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb']
      let seriesData = []
      let seriesName = []
      this.materList.map((e, i) => {
        seriesData.push({name: e.material_name, value: e.total_material_qty, percentage: e.percentage})
        seriesName.push({name: e.material_name})
      })
      let total = 0
      this.materList.map(e => {
        total = total + Number(e.total_material_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',
          left: '55%',
          top: 30,
          bottom: 20,
          itemGap: 18,
          icon: 'rect',
          itemWidth: 8,
          itemHeight: 8,
          data: seriesName,
          formatter: (name) => {
            let qty
            let percentage
            for (let i = 0; i < seriesData.length; i++) {
              if (seriesData[i].name === name) {
                qty = seriesData[i].value
                percentage = seriesData[i].percentage
              }
            }
            var arr = [
              '{a|' + name + '}\n',
              '{b|' + qty + '}',
              '{c|' + percentage + '}'
            ]
            return arr.join('  ')
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 12,
                lineHeight: 20,
                padding: [20, 0, 0, 0],
                fontFamily: 'SourceHanSansCN-Regular',
                wordWrap: 'break-word',
                color: '#9BB9DD',
                align: 'left'
              },
              b: {
                fontSize: 20,
                lineHeight: 20,
                padding: [10, 0, 0, -10],
                color: '#DFECFB',
                fontFamily: 'YouSheBiaoTiHei',
                align: 'left'
              },
              c: {
                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('home_1') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('home_1'))
      let echart = this.$echarts.init(document.getElementById('home_1'))
      echart.setOption(option)
      let bu = 0
      this.chart1Timer = setInterval(() => {
        if (bu > seriesData.length - 1) {
          bu = 0
        }
        echart.dispatchAction({
          type: 'legendScroll',
          seriesIndex: 0,
          scrollDataIndex: bu
        })
        bu++
      }, 2000)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    },
    setEchart2 () {
      let barName = []
      let barData1 = []
      let barData2 = []
      this.curList.map(el => {
        barName.push(el.material_name)
        barData1.push(el.total_instorage_qty)
        barData2.push(el.total_outstorage_qty)
      })
      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: '#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(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: barData1
          },
          {
            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: barData2
          }
        ],
        dataZoom: [
          {
            xAxisIndex: 0, // 这里是从X轴的0刻度开始
            show: false, // 是否显示滑动条，不影响使用
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 3 // 展示到第几个。
          }
        ]
      }
      if (document.getElementById('home_2') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('home_2'))
      let echart = this.$echarts.init(document.getElementById('home_2'))
      echart.setOption(option)
      this.chart2Timer = setInterval(() => {
        if (option.dataZoom[0].endValue >= barData1.length - 1) {
          option.dataZoom[0].endValue = 3
          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.historyList.map(el => {
        total = Math.max(total, Number(el.total_instorage_qty), Number(el.total_outstorage_qty))
      })
      let barName = []
      let barData1 = []
      let barData2 = []
      let totalDate = []
      this.historyList.map(el => {
        barName.push(el.data)
        barData1.push(el.total_instorage_qty)
        barData2.push(el.total_outstorage_qty)
      })
      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,
            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('home_3') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('home_3'))
      let echart = this.$echarts.init(document.getElementById('home_3'))
      echart.setOption(option)
      let len = 0
      this.chart3Timer = 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 xAxisData = []
      let seriesData = []
      let colors = ['#1980EA', '#67D470', '#EF5252']
      this.statisList.map(el => {
        xAxisData.push(el.region_name)
        seriesData.push(el.count)
      })
      let option = {
        grid: {
          top: 34,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#3C5787'
            }
          },
          axisLabel: {
            interval: 0,
            color: '#7591B2',
            fontSize: 16,
            lineHeight: 16,
            fontFamily: 'SourceHanSansCN-Regular',
            margin: 10
          },
          data: xAxisData
        },
        yAxis: {
          type: 'value',
          name: '产量:托',
          nameTextStyle: {
            color: '#fff',
            padding: [0, 0, 0, 0]
          },
          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',
            symbolRepeat: 'fixed',
            symbolMargin: 2,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [19, 4],
            symbolPosition: 'center',
            itemStyle: {
              color: (params) => {
                return colors[params.dataIndex]
              }
            },
            data: seriesData
          }
        ]
      }
      if (document.getElementById('home_4') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('home_4'))
      let echart = this.$echarts.init(document.getElementById('home_4'))
      echart.setOption(option)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    },
    setEchart5 () {
      let attaData1 = []
      let attaData2 = []
      let ydata = []
      this.loadList.map(el => {
        ydata.push(el.region_name)
        attaData1.push(el.material_loading_count)
        attaData2.push(el.material_unloading_count)
      })
      let option = {
        grid: {
          top: 55,
          left: 0,
          right: 15,
          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: '#A68615'}}, {name: '下料', itemStyle: {color: '#4E8BFB'}}]
        },
        yAxis: {
          type: 'category',
          inverse: true,
          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
          },
          data: ydata
        },
        xAxis: {
          type: 'value',
          // name: '单位:托',
          nameTextStyle: {
            color: '#fff',
            padding: [0, 0, 0, 0]
          },
          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',
            label: {
              show: true,
              position: 'right',
              fontSize: 12,
              color: '#F5F5F5',
              formatter: '{c}托'
            },
            barWidth: '12',
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#8C620F'
                },
                {
                  offset: 1,
                  color: '#C7B51C'
                }
              ])
            },
            data: attaData1
          },
          {
            name: '下料',
            type: 'bar',
            label: {
              show: true,
              position: 'right',
              fontSize: 12,
              color: '#F5F5F5',
              formatter: '{c}托'
            },
            barWidth: '12',
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#3261FB'
                },
                {
                  offset: 1,
                  color: '#6BB4FB'
                }
              ])
            },
            data: attaData2
          }
        ],
        dataZoom: [
          {
            yAxisIndex: 0, // 这里是从X轴的0刻度开始
            show: false, // 是否显示滑动条，不影响使用
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 7 // 展示到第几个。
          }
        ]
      }
      if (document.getElementById('home_5') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('home_5'))
      let echart = this.$echarts.init(document.getElementById('home_5'))
      echart.setOption(option)
      this.chart5Timer = setInterval(() => {
        if (option.dataZoom[0].endValue >= ydata.length - 1) {
          option.dataZoom[0].endValue = 7
          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()
      })
    },
    async _todayTask () {
      let res = await todayTask()
      if (res.length) {
        this.taskList = [...res]
      }
    },
    async _agvInfo () {
      let res = await agvInfo()
      if (res.length) {
        this.agvList = [...res]
      }
    },
    async _rgvInfo () {
      let res = await rgvInfo()
      if (res.length) {
        this.rgvList = [...res]
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.n_header_info
  position absolute
  left 15px
  top 29px
  height 28px
  display flex
.exit_btn
  height 28px
  width 28px
  line-height 28px
  font-size 20px
  color #aecaf5
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
.n_container
  position relative
  width 100%
  height 100%
  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
.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 24%
  height 100%
.n_right_wraper
  width 24%
  height 100%
.n-center_wraper
  width 50%
  height 100%
.w_wraper
  width 100%
  height 100%
.item_wraper
  width 100%
  height calc((100% - 40px) / 3)
  margin-bottom 20px
  &:last-child
    margin-bottom 0
.item_wraper_1
  height calc((200% - 20px) / 3)
.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;
.title_wraper_1
  background-image url('../../../images/bg-title_1.png')
.content_wraper
  width 100%
  height calc(100% - 42px)
  padding 20px
  background center / 100% 100% url('../../../images/bg-m_2.png') no-repeat
.content_wraper_2
  padding 0
.content_wraper_3
  background-image url('../../../images/bg-center.png')
.pie_wraper
  width 100%
  height 100%
  padding 2px 0 0 2px
  background left center / 222px 222px 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 9%
    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), &:nth-child(2)
      width 18.5%
    .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 9%
      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), &:nth-child(2)
        width 18.5%
      .state
        display block
        width 20px
        height 14px
      .state_name
        width 100%
        height 20px
.agv_wrap
  display flex
  justify-content space-between
  width 100%
  height 40%
  padding-bottom 20px
.rgv_wrap
  height 60%
  padding-bottom 0
.agv_item
  display: flex;
  justify-content: space-between;
  width 32%
  padding 0 10px
  border 1px solid #3AA2F2
  border-radius 4px
  box-shadow inset 0px 0px 3px 3px rgba(58, 162, 242, 40%)
.rgv_item
  display: block
  width 24%
.agv_left
  width 33%
  height 100%
  padding-bottom 16px
.rgv_left
  width 100%
  height 20%
  padding 0
  display: flex;
  justify-content: space-between;
  align-items: center;
.agv_img
  height calc(100% - 60px)
  background center center / 80% auto url('../../../images/agv.png') no-repeat
  margin-bottom 30px
.agv_info
  width 64%
.p1
  height 30px
  font-size: 18px;
  line-height 30px
  font-family: 'YouSheBiaoTiHei'
  color: #78B1DE;
  letter-spacing: 2px;
  text-align: center;
.agv_txt
  display: flex;
  justify-content: space-between;
  align-items: center;
  height 25%
  background bottom center / 100% 3px url('../../../images/screen1/line_1.png') no-repeat
  padding 0 10px
  &:last-child
    background none
.p2
  font-size: 14px;
  color: #84B0DA;
  text-align: center;
  font-weight: 700;
.p3
  font-size: 16px;
  color: #FFFFFF;
  text-align: center;
  font-weight: 700;
.rgv_img
  width 50%
  height 100%
  background center center / 80% auto url('../../../images/rgv.png') no-repeat
  margin-bottom 0
.rgv_info
  height 80%
.rgv_txt
  height 20%
</style>
