screen-huahong/src/pages/modules/home/index.vue

<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 content_wraper_1">
                  <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">
            <!-- <div class="n-center_wraper_i"></div> -->
            <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 deviceRunStat.seriesData" :key="'sbyxtj' + i" :class="'pie_legend_item_bg_' + (i + 1)">
                      <p class="pie_legend_txt_1">{{ e.name }}</p>
                      <div class="pie_legend_txt_wraper">
                        <p class="pie_legend_txt_2">{{ e.value }}</p>
                        <p class="pie_legend_txt_3">{{ e.rate }}</p>
                      </div>
                    </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="deviceErrorRecordList" :class-option="defaultOption1">
                        <ul class="scroll-ul_1">
                          <li v-for="(e, i) in deviceErrorRecordList" :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.errorInfo}}</div>
                          <div class="scroll-ul_1_div">{{e.errorTime}}</div>
                          </li>
                        </ul>
                      </vue-seamless-scroll>
                    </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_5" style="width: 100%; height: 100%;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
// import { screenTableData } from '@js/mork2.js'
import { screenTableData } 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,
      chart1Timer: null,
      chart2Timer: null,
      chart3Timer: null,
      chart4Timer: null,
      expand: false,
      deviceErrorRecordList: [], // 设备报警信息
      mixingList: [], // 当日混料
      historyList: [], // 历史分析
      productList: [], // 当日成品
      klInfoList: [], // 困料货架泥料库（吨）
      deviceRunStat: {}, // 设备运行统计
      deviceErrorList: [] // 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._screenTableData()
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
    clearInterval(this.chart1Timer)
    clearInterval(this.chart2Timer)
    clearInterval(this.chart3Timer)
    clearInterval(this.chart4Timer)
    this.timer = null
    this.chart1Timer = null
    this.chart2Timer = null
    this.chart3Timer = null
    this.chart4Timer = null
  },
  destroyed () {
    clearInterval(this.timer)
    clearInterval(this.chart1Timer)
    clearInterval(this.chart2Timer)
    clearInterval(this.chart3Timer)
    clearInterval(this.chart4Timer)
    this.timer = null
    this.chart1Timer = null
    this.chart2Timer = null
    this.chart3Timer = null
    this.chart4Timer = null
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        this._screenTableData()
      }, this.interTime)
    },
    async _screenTableData () {
      let res = await screenTableData()
      clearInterval(this.chart1Timer)
      clearInterval(this.chart2Timer)
      clearInterval(this.chart3Timer)
      clearInterval(this.chart4Timer)
      this.chart1Timer = null
      this.chart2Timer = null
      this.chart3Timer = null
      this.chart4Timer = null
      this.deviceErrorRecordList = [...res.deviceErrorRecordList]
      this.mixingList = [...res.mixingList]
      this.productList = [...res.productList]
      this.klInfoList = [...res.klInfoList]
      let seriesData = [{value: res.deviceRunStat.runNum, name: '正常运行'}, {value: res.deviceRunStat.unProducedNum, name: '暂未生产'}, {value: res.deviceRunStat.freeNum, name: '空闲设备'}, {value: res.deviceRunStat.errorNum, name: '故障设备'}]
      seriesData.map(el => {
        let rate = Number(el.value) * 100 / Number(res.deviceRunStat.total)
        rate = rate.toFixed(2) + '%'
        this.$set(el, 'rate', rate)
      })
      this.deviceRunStat = res.deviceRunStat
      this.deviceRunStat.seriesData = seriesData
      this.historyList = [...res.historyList]
      this.setEchart1()
      this.setEchart2()
      this.setEchart3()
      this.setEchart4()
      this.setEchart5()
    },
    setEchart1 () {
      let img = {
        imgSrc1: symbol1,
        imgSrc2: symbol2
      }
      let barName = []
      let barData1 = []
      let barData2 = []
      this.mixingList.map(el => {
        barName.push(el.materialName)
        barData1.push(el.planQty)
        barData2.push(el.realQty)
      })
      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.chart1Timer = 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.productList.map(el => {
        barName.push(el.materialName)
        barData1.push(el.requiredNum)
        barData2.push(el.suppressedNum)
        barData3.push(el.finishedNum)
      })
      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.chart2Timer = setInterval(() => {
        if (option.dataZoom[0].endValue >= barData1.length - 1) {
          option.dataZoom[0].endValue = 4
          option.dataZoom[0].startValue = 0
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
        }
        echart.setOption(option)
      }, 2000)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    },
    setEchart3 () {
      let ydata = []
      let xdata = []
      this.klInfoList.map(el => {
        ydata.push(el.materialCode)
        xdata.push(el.weight)
      })
      let dataZoomMove = {
        start: 0,
        end: 3
      }
      let img = {
        bg1: bg1,
        bg2: bg2,
        bg3: bg3,
        bg4: bg4
      }
      let colorArray = []
      this.klInfoList.map((e, i) => {
        if (i === 0) {
          colorArray.push({top: '#8C620F', bottom: '#C7B51C'})
        } else if (i === 1) {
          colorArray.push({top: '#3261FB', bottom: '#6BB5FB'})
        } else if (i === 2) {
          colorArray.push({top: '#6B4C43', bottom: '#B8A590'})
        } else {
          colorArray.push({top: '#537BCB', bottom: '#ADC0E6'})
        }
      })
      let option = {
        dataZoom: [
          {
            show: false, // 为true 滚动条出现
            startValue: dataZoomMove.start,
            endValue: dataZoomMove.end,
            yAxisIndex: [0, 1] // 关联多个y轴
          },
          {
            // 没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
            type: 'inside',
            yAxisIndex: 0,
            zoomOnMouseWheel: false, // 滚轮是否触发缩放
            moveOnMouseMove: true, // 鼠标滚轮触发滚动
            moveOnMouseWheel: true
          }
        ],
        grid: {
          top: 13,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: [
          {
            type: 'category',
            data: ydata,
            inverse: true,
            axisLabel: {
              inside: true,
              verticalAlign: 'bottom',
              lineHeight: 50,
              margin: 0, // 刻度标签与轴线之间的距离
              formatter: function (value) {
                let k = ydata.indexOf(value)
                let index = k + 1
                if (k === 0) {
                  return '{one|' + 'TOP' + index + '} {a|' + value + '}'
                } else if (k === 1) {
                  return '{two|' + 'TOP' + index + '} {a|' + value + '}'
                } else if (k === 2) {
                  return '{three|' + 'TOP' + index + '} {a|' + value + '}'
                } else {
                  return '{four|' + 'TOP' + index + '} {a|' + value + '}'
                }
              },
              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'
                }
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          },

          {
            type: 'category',
            data: ydata,
            inverse: true,
            axisLabel: {
              inside: true,
              verticalAlign: 'bottom',
              lineHeight: 50,
              margin: 2,
              formatter: function (value) {
                let k = ydata.indexOf(value)
                let index = k
                return `{a|${xdata[index]}}`
              },
              rich: {
                a: {
                  height: 50,
                  fontSize: 20,
                  lineHeight: 50,
                  align: 'right',
                  fontFamily: 'YouSheBiaoTiHei',
                  color: '#E1F6FF'
                }
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            data: xdata,
            type: 'bar',
            barWidth: 3,
            showBackground: true,
            backgroundStyle: {
              color: '#ffffff'
            },
            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
                    }
                  ]
                }
              }
            }
          }
        ]
      }
      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)
      const startMoveDataZoom = () => {
        this.chart3Timer = setInterval(() => {
          dataZoomMove.start += 1
          dataZoomMove.end += 1
          if (dataZoomMove.end > xdata.length - 1) {
            dataZoomMove.start = 0
            dataZoomMove.end = 5
          }
          echart.setOption({
            dataZoom: [
              {
                type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
                startValue: dataZoomMove.start,
                endValue: dataZoomMove.end
              }
            ]
          })
        }, 2000)
      }
      startMoveDataZoom()
      document.getElementById('new_home_echart_3').addEventListener('mouseout', () => {
        if (this.chart3Timer) return
        let dataZoomMoveGet = echart.getOption().dataZoom[0]
        dataZoomMove.start = dataZoomMoveGet.startValue
        dataZoomMove.end = dataZoomMoveGet.endValue
        startMoveDataZoom()
      })
      document.getElementById('new_home_echart_3').addEventListener('mouseover', () => {
        clearInterval(this.chart3Timer)
        this.chart3Timer = undefined
      })
      window.addEventListener('resize', () => {
        echart.resize()
      })
    },
    setEchart4 () {
      let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252', '#BCBF5C', '#6d5edd', '#bf41bb']
      let seriesData = this.deviceRunStat.seriesData
      let total = this.deviceRunStat.total
      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 img = {
        imgSrc1: symbol3,
        imgSrc2: symbol4,
        imgSrc3: lineSelected
      }
      let total = 0
      this.historyList.map(el => {
        total = Math.max(total, Number(el.suppressedNum), Number(el.finishedNum))
      })
      let barName = []
      let barData1 = []
      let barData2 = []
      let totalDate = []
      this.historyList.map(el => {
        barName.push(el.produceDate)
        barData1.push(el.suppressedNum)
        barData2.push(el.finishedNum)
      })
      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_5') == null) {
        return
      }
      this.$echarts.dispose(document.getElementById('new_home_echart_5'))
      let echart = this.$echarts.init(document.getElementById('new_home_echart_5'))
      echart.setOption(option)
      let len = 0
      this.chart4Timer = setInterval(() => {
        if (len === barName.length) {
          len = 0
        }
        totalDate[len] = total
        echart.setOption({
          series: [{
            data: barData1
          }, {
            data: barData2
          }, {
            data: totalDate
          }
          ]
        })
        echart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: len
        })
        totalDate = []
        len++
      }, 2000)
      window.addEventListener('resize', () => {
        echart.resize()
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.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 1002px
  height 100%
  background center / 100% 100% url('../../../images/bg-center.png') no-repeat
.n-center_wraper_i
  width 100%
  height 100%
  background center / 100% auto url('../../../images/scene.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>