screen-shangdianke/src/pages_960/modules/home/index.vue

<template>
  <div class="n_container">
      <div class="n_header">
          <div class="n_header_h1">
              <h1>车间物流监控</h1>
          </div>
          <div class="exit_btn iconfont" @click="back">&#xe85b;</div>
      </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">
                  <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.start_loc }}</p>
                        </div>
                        <div class="agv_txt">
                          <p class="p2">任务终点</p>
                          <p class="p3">{{ e.target_loc }}</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>
                    </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.task_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'
export default {
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      chart1Timer: null,
      chart2Timer: null,
      chart5Timer: null,
      materList: [], // 原料库存
      curList: [], // 当日出入
      historyList: [], // 历史分析
      statisList: [], // 当日生产统计
      loadList: [], // 当日车间上下料
      taskList: [], // 当日搬运任务
      agvList: [],
      rgvList: []
    }
  },
  computed: {
    defaultOption1 () {
      return {
        step: 0.3, // 数值越大速度滚动越快
        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: 5000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  created () {
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
    clearInterval(this.chart1Timer)
    clearInterval(this.chart2Timer)
    clearInterval(this.chart5Timer)
    this.timer = null
    this.chart1Timer = null
    this.chart2Timer = null
    this.chart5Timer = null
  },
  destroyed () {
    clearInterval(this.timer)
    clearInterval(this.chart1Timer)
    clearInterval(this.chart2Timer)
    clearInterval(this.chart5Timer)
    this.timer = null
    this.chart1Timer = null
    this.chart2Timer = null
    this.chart5Timer = null
  },
  methods: {
    back () {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
      this.$router.push('/setup')
    },
    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()
      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) {
        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)
      if (!this.materList.length) {
        total = '0'
      }
      let option = {
        color: colors,
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        title: {
          x: '22%',
          y: '38%',
          width: '200',
          height: '40',
          text: '总数',
          subtext: total,
          textAlign: 'center',
          textStyle: {
            fontSize: 10,
            lineHeight: 10,
            color: '#A8C3E6'
          },
          subtextStyle: {
            fontSize: 14,
            lineHeight: 8,
            color: '#DBE7F6'
          }
        },
        legend: {
          show: true,
          type: 'scroll',
          orient: 'vertical',
          left: '55%',
          top: 10,
          bottom: 10,
          itemGap: 9,
          icon: 'rect',
          itemWidth: 4,
          itemHeight: 4,
          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: 8,
                lineHeight: 10,
                padding: [10, 0, 0, 0],
                wordWrap: 'break-word',
                color: '#9BB9DD',
                align: 'left'
              },
              b: {
                fontSize: 8,
                lineHeight: 10,
                padding: [10, 0, 0, -10],
                color: '#DFECFB',
                align: 'left'
              },
              c: {
                align: 'right',
                fontSize: 8,
                lineHeight: 8,
                padding: [9, 0, 0, 0],
                color: '#9BB9DD'
              }
            }
          },
          pageTextStyle: {
            fontSize: 8,
            color: 'RGBA(86, 114, 157, 0.9)'
          },
          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: 20,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          top: '0',
          right: '0',
          textStyle: {
            color: '#9BB9DD',
            fontSize: 8,
            lineHeight: 8
          },
          itemGap: 15,
          itemWidth: 4,
          itemHeight: 4,
          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: 8,
            lineHeight: 6,
            margin: 5
          },
          data: barName
        },
        yAxis: {
          type: 'value',
          // name: '单位：块',
          axisLine: {
            show: false
          },
          splitNumber: 4,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#B5C5D4',
            fontSize: 6
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [2, 1],
              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 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 = []
      this.historyList.map(el => {
        barName.push(el.data)
        barData1.push(el.total_instorage_qty)
        barData2.push(el.total_outstorage_qty)
      })
      let option = {
        grid: {
          top: 20,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          top: '0',
          right: '0',
          textStyle: {
            color: '#9BB9DD',
            fontSize: 8,
            lineHeight: 8
          },
          itemGap: 15,
          itemWidth: 4,
          itemHeight: 4,
          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: 8,
            lineHeight: 6,
            // align: 'right',
            margin: 5
            // 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: 6
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [2, 1],
              color: '#455C86'
            }
          },
          max: total
        },
        series: [
          {
            name: '入库',
            type: 'line',
            showSymbol: false,
            itemStyle: {
              color: '#67D470',
              lineStyle: {
                color: '#67D470',
                width: 1
              }
            },
            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',
            showSymbol: false,
            itemStyle: {
              color: '#58A2E3',
              lineStyle: {
                color: '#58A2E3',
                width: 1
              }
            },
            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
          }
        ]
      }
      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)
    },
    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: 22,
          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: 8,
            lineHeight: 6,
            margin: 5
          },
          data: xAxisData
        },
        yAxis: {
          type: 'value',
          name: '产量:托',
          nameTextStyle: {
            fontSize: 8,
            color: '#fff',
            padding: [0, 0, 0, 0]
          },
          axisLine: {
            show: false
          },
          splitNumber: 2,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#B5C5D4',
            fontSize: 6
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [2, 1],
              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: 20,
          left: 0,
          right: 8,
          bottom: 0,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          top: '0',
          right: '0',
          textStyle: {
            color: '#9BB9DD',
            fontSize: 8,
            lineHeight: 8
          },
          itemGap: 15,
          itemWidth: 4,
          itemHeight: 4,
          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: 8,
            lineHeight: 6,
            margin: 5
          },
          data: ydata
        },
        xAxis: {
          type: 'value',
          // name: '单位:托',
          nameTextStyle: {
            fontSize: 8,
            color: '#fff',
            padding: [0, 0, 0, 0]
          },
          axisLine: {
            show: false
          },
          splitNumber: 4,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#B5C5D4',
            fontSize: 6
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [2, 1],
              color: '#455C86'
            }
          }
        },
        series: [
          {
            name: '上料',
            type: 'bar',
            label: {
              show: true,
              position: 'right',
              fontSize: 8,
              color: '#F5F5F5',
              formatter: '{c}托'
            },
            barWidth: '6',
            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: 8,
              color: '#F5F5F5',
              formatter: '{c}托'
            },
            barWidth: '6',
            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_container
  position relative
  width 100%
  height 100%
  overflow hidden
.n_header
  position absolute
  left 0
  top 0
  width 100%
  height 88px
  background center / 100% url('../../../images/header_bg_s.png') no-repeat
.n_header_h1
  width: 100%;
  height: 100%;
  padding-top 12px
  h1
      font-size: 22px;
      font-weight: 700;
      color: #fff;
      line-height: 1;
      text-align center;
      letter-spacing 4px
.exit_btn
  position absolute
  left 3%
  top 11%
  z-index 100
  height 16px
  width 16px
  line-height 16px
  font-size 16px
  color #AECAF5
  text-align: center;
.n_body_container
  width 100%
  height 100%
  padding 60px 10px 10px 10px
  display: flex;
  justify-content: space-between;
.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% - 20px) / 3)
  margin-bottom 10px
  &:last-child
    margin-bottom 0
.item_wraper_1
  height calc((200% - 20px) / 3)
.title_wraper
  width 100%
  height 24px
  background center / 100% 100% url('../../../images/bg-title_2_s.png') no-repeat
  padding 2px 22px
  p
    font-size 12px
    font-weight: 400;
    color: #fff;
    line-height 8px
.title_wraper_1
  background-image url('../../../images/bg-title_1_s.png')
.content_wraper
  width 100%
  height calc(100% - 24px)
  padding 8px
  background-color rgba(30, 65, 126, 70%)
.content_wraper_2
  padding 0
.pie_wraper
  width 100%
  height 100%
  padding 1px 0 0 1px
  background left center / 111px 111px url('../../../images/pie-bg_2_s.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
.scroll_wrap
    width 100%
    height 100%
    padding 5px 10px 2px 10px
.scroll_tab_1
  width 100%
  height 20px
  background center / 100% 100% url('../../../images/table-bg_1.png') no-repeat
  li
    float left
    width 15%
    font-size 10px;
    line-height 20px
    color #AFBED8
    text-align center
    font-weight: bold;
    font-style: italic;
    word-wrap break-word
    word-break break-all
    white-space nowrap
    padding 0 2px
    overflow hidden
    box-sizing border-box
    &:nth-child(1), &:nth-child(5)
      width 20%
    .state
      display block
      width 20px
      height 14px
    .state_name
      width calc(100% - 20px)
.scroll_container_1
  width 100%
  height calc(100% - 20px)
  overflow hidden
.scroll-ul_1
  li
    width 100%
    height 20px
    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 15%
      height 20px
      display flex
      flex-direction row
      justify-content center
      align-items center
      flex-wrap nowrap
      font-size 8px
      line-height 8px
      color #B2BBD7
      text-align center
      // word-wrap break-word
      // word-break break-all
      white-space nowrap
      padding 0 1px
      overflow hidden
      &:nth-child(1), &:nth-child(5)
        width 20%
      .state
        display block
        width 20px
        height 14px
      .state_name
        width 100%
        height 20px
.agv_wrap
  display flex
  justify-content space-between
  width 100%
  height 47%
  padding-bottom 10px
.rgv_wrap
  height 53%
  padding-bottom 0
.agv_item
  display: flex;
  justify-content: space-between;
  width 32%
  padding 5px
  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 8px
.rgv_left
  width 100%
  height 20%
  padding 0
  display: flex;
  justify-content: space-between;
  align-items: center;
.agv_img
  height calc(100% - 30px)
  background center center / 80% auto url('../../../images/agv_s.png') no-repeat
.agv_info
  width 64%
.p1
  height 30px
  font-size: 9px;
  line-height 30px
  color: #78B1DE;
  text-align: center;
  white-space nowrap
.agv_txt
  display: flex;
  justify-content: space-between;
  align-items: center;
  height 20%
  background bottom center / 100% 3px url('../../../images/screen1/line_1.png') no-repeat
  &:last-child
    background none
.p2
  font-size: 6px;
  color: #84B0DA;
  text-align: center;
  font-weight: 700;
.p3
  font-size: 8px;
  color: #FFFFFF;
  text-align: center;
  font-weight: 700;
.rgv_img
  width 50%
  height 100%
  background center center / 80% auto url('../../../images/rgv_s.png') no-repeat
  margin-bottom 0
.rgv_info
  height 80%
.rgv_txt
  height 20%
</style>