<template>
  <div class="container">
    <div class="left_wrap">
      <div class="item_wrap">
        <div class="item_tip">
          <div class="item_tip_left">设备实时状态</div>
        </div>
        <div class="item_5_l">
          <div class="item_content_0">
            <div id="echart_d01" style="width: 100%; height: 100%"></div>
          </div>
          <div class="total">
            <div v-show="totalNum">{{totalNum}}<span>台</span></div>
          </div>
          <div v-show="totalNum" class="total-desc">设备总数</div>
        </div>
        <div class="item_5_r">
          <div class="right_1_down_inner_3_i"  v-for="(e, i) in arrR01" :key="i">
            <div class="right_1_down_inner_3_l">
              <span :style="{'background-color': e.color}"><i :style="{'background-color': e.color}"></i></span>
              <span>{{e.name}}</span>
            </div>
            <div class="right_1_down_inner_3_r">
              <span>{{e.value}}</span>
              <span>台</span>
            </div>
          </div>
        </div>
      </div>
      <div class="item_wrap">
        <div class="item_tip">
          <div class="item_tip_left">设备管理</div>
        </div>
        <div class="item_content_1">
          <div class="item_content_1_inner">
            <div class="item_content_1_inner_1">弯头工段</div>
            <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
              <p class="item_content_1_inner_2_p1">OEE：</p>
              <p class="item_content_1_inner_2_p2">{{sbgl_jo1.oee}}</p>
            </div>
            <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
              <p class="item_content_1_inner_2_p1">MIBF：</p>
              <p class="item_content_1_inner_2_p2">{{sbgl_jo1.MIBF}}h</p>
            </div>
            <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
              <p class="item_content_1_inner_2_p1">MTTR：</p>
              <p class="item_content_1_inner_2_p2">{{sbgl_jo1.MTTR}}h</p>
            </div>
            <div class="item_content_1_inner_2">
              <p class="item_content_1_inner_2_p1 cred">报警：</p>
              <p class="item_content_1_inner_2_p2 cred">{{sbgl_jo1.err_times}}次</p>
            </div>
          </div>
          <div class="item_content_1_inner">
            <div class="item_content_1_inner_1">综合工段</div>
            <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
              <p class="item_content_1_inner_2_p1">OEE：</p>
              <p class="item_content_1_inner_2_p2">{{sbgl_jo2.oee}}</p>
            </div>
            <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
              <p class="item_content_1_inner_2_p1">MIBF：</p>
              <p class="item_content_1_inner_2_p2">{{sbgl_jo2.MIBF}}h</p>
            </div>
            <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
              <p class="item_content_1_inner_2_p1">MTTR：</p>
              <p class="item_content_1_inner_2_p2">{{sbgl_jo2.MTTR}}h</p>
            </div>
            <div class="item_content_1_inner_2">
              <p class="item_content_1_inner_2_p1 cred">报警：</p>
              <p class="item_content_1_inner_2_p2 cred">{{sbgl_jo2.err_times}}次</p>
            </div>
          </div>
          <div class="item_content_1_inner">
            <div class="item_content_1_inner_1">成品工段</div>
            <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
              <p class="item_content_1_inner_2_p1">OEE：</p>
              <p class="item_content_1_inner_2_p2">{{sbgl_jo3.oee}}</p>
            </div>
            <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
              <p class="item_content_1_inner_2_p1">MIBF：</p>
              <p class="item_content_1_inner_2_p2">{{sbgl_jo3.MIBF}}h</p>
            </div>
            <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
              <p class="item_content_1_inner_2_p1">MTTR：</p>
              <p class="item_content_1_inner_2_p2">{{sbgl_jo3.MTTR}}h</p>
            </div>
            <div class="item_content_1_inner_2">
              <p class="item_content_1_inner_2_p1 cred">报警：</p>
              <p class="item_content_1_inner_2_p2 cred">{{sbgl_jo3.err_times}}次</p>
            </div>
          </div>
        </div>
      </div>
      <div class="item_wrap">
        <div class="item_tip">
          <div class="item_tip_left">设备产能利用</div>
        </div>
        <div class="item_content_1">
          <div id="echart_d02" style="width: 100%; height: 100%"></div>
        </div>
      </div>
    </div>
    <div class="center_wrap">
      <div class="item_wrap_1 inlblock">
        <div class="item_tip item_tip_01">
          <div class="item_tip_left">设备综合效率OEE&产能利用效率TEEP</div>
        </div>
        <div class="item_content_1">
          <div id="echart_d03" style="width: 100%; height: 100%"></div>
        </div>
      </div>
      <div class="item_wrap_1 inlblock">
        <div class="item_tip item_tip_01">
          <div class="item_tip_left">运行设备大类产能比</div>
        </div>
        <div class="item_content_1">
          <div id="echart_d04" style="width: 100%; height: 100%"></div>
        </div>
      </div>
      <div class="item_wrap_2 item_wrap_3">
        <div class="item_tip item_tip_2">
          <div class="item_tip_left">设备综合统计</div>
        </div>
        <div class="item_content_1">
          <div id="echart_d05" style="width: 100%; height: 100%"></div>
        </div>
      </div>
      <div class="item_wrap_2">
        <div class="item_tip item_tip_2">
          <div class="item_tip_left">设备状态列表</div>
        </div>
        <div class="item_content_2">
          <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> -->
            </ul>
            <div class="scroll_container_1 scroll_container_3" v-show="array1.length">
              <vue-seamless-scroll :data="array1" :class-option="defaultOption1">
                <ul class="scroll-ul_1">
                  <li v-for="(e, i) in array1" :key="i">
                    <div class="scroll-ul_1_div">{{e.device_code}}</div>
                    <div class="scroll-ul_1_div">{{e.device_name}}</div>
                    <div class="scroll-ul_1_div">{{e.workprocedure_name}}</div>
                    <div class="scroll-ul_1_div scroll-ul_1_div4"><span :style="{'background-color': e.color}"></span><i>{{e.device_status}}</i></div>
                    <!-- <div class="scroll-ul_1_div">{{e.product_qty}}</div> -->
                    <div class="scroll-ul_1_div">{{e.start_time}}</div>
                    <div class="scroll-ul_1_div">{{e.end_time}}</div>
                    <!-- <div class="scroll-ul_1_div">{{e.product_time}}</div> -->
                  </li>
                </ul>
            </vue-seamless-scroll>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right_wrap">
      <div class="item_wrap">
        <div class="item_tip">
          <div class="item_tip_left">设备TOP10故障次数</div>
        </div>
        <div class="item_content_1">
          <div id="echart_d08" style="width: 100%; height: 100%"></div>
        </div>
      </div>
      <div class="item_wrap">
        <div class="item_tip">
          <div class="item_tip_left">设备报警信息</div>
        </div>
        <div class="item_content_4">
          <div class="scroll_wrap">
            <ul class="scroll_tab_2">
              <li>编号</li>
              <li>名称</li>
              <li>报警原因</li>
              <li>报警时间</li>
            </ul>
            <div class="scroll_container_2">
              <vue-seamless-scroll :data="array2" :class-option="defaultOption2">
                <ul class="scroll-ul_2">
                  <li v-for="(e, i) in array2" :key="i">
                    <div class="scroll-ul_2_div">{{e.device_code}}</div>
                    <div class="scroll-ul_2_div">{{e.device_name}}</div>
                    <div class="scroll-ul_2_div">{{e.err_name}}</div>
                    <div class="scroll-ul_2_div">{{e.start_time}}</div>
                  </li>
                </ul>
            </vue-seamless-scroll>
            </div>
          </div>
        </div>
      </div>
      <div class="item_wrap">
          <div class="item_tip">
            <div class="item_tip_left">近10天设备故障统计</div>
          </div>
          <!-- <div class="item_content_5">
            <div id="echart_d4" style="width: 100%; height: 100%"></div>
          </div> -->
          <div class="item_content_1">
            <div id="echart_d10" style="width: 100%; height: 100%"></div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import {deviceStatus, oeeAndTeep, queryDeviceByWork, deviceErrorNum, deviceManage, deviceCensus, deviceErrorInfo, deviceUseRate, deviceStatusList, errCensus} from '@js/getData1.js'
import * as echarts from 'echarts'
export default {
  name: 'DeviceScreen',
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer1: null,
      timer2: null,
      timer4: null,
      timeOut1: null,
      timeOut2: null,
      timeOut3: null,
      totalNum: '',
      // arrR01: [
      //   {
      //     color: '#2D7CEB',
      //     name: '正常运行',
      //     value: '10'
      //   },
      //   {
      //     color: '#07E083',
      //     name: '暂未生产',
      //     value: '20'
      //   },
      //   {
      //     color: '#00D5FF',
      //     name: '空闲设备',
      //     value: '30'
      //   },
      //   {
      //     color: '#CC6060',
      //     name: '故障设备',
      //     value: '40'
      //   }
      // ],
      arrR01: [],
      data01: [{value: 500, name: '正常运行'}, {value: 300, name: '暂未生产'}, {value: 200, name: '空闲设备'}, {value: 100, name: '故障设备'}],
      sbgl_jo1: {},
      sbgl_jo2: {},
      sbgl_jo3: {},
      data03: '',
      chartData1: [],
      chartData2: [],
      // chartData1: [
      //   {
      //     teep: '31',
      //     workprocedure_name: 'D001'
      //   },
      //   {
      //     teep: '22',
      //     workprocedure_name: 'D002'
      //   },
      //   {
      //     teep: '10',
      //     workprocedure_name: 'D003'
      //   },
      //   {
      //     teep: '38',
      //     workprocedure_name: 'D004'
      //   },
      //   {
      //     teep: '15',
      //     workprocedure_name: 'D005'
      //   },
      //   {
      //     teep: '66',
      //     workprocedure_name: 'D006'
      //   },
      //   {
      //     teep: '77',
      //     workprocedure_name: 'D007'
      //   }
      // ],
      // chartData2: [
      //   {
      //     err_times: '21',
      //     device_name: 'SBGZ0001'
      //   },
      //   {
      //     err_times: '32',
      //     device_name: 'SBGZ0002'
      //   },
      //   {
      //     err_times: '60',
      //     device_name: 'SBGZ0003'
      //   },
      //   {
      //     err_times: '78',
      //     device_name: 'SBGZ0004'
      //   },
      //   {
      //     err_times: '12',
      //     device_name: 'SBGZ0005'
      //   },
      //   {
      //     err_times: '6',
      //     device_name: 'SBGZ0006'
      //   },
      //   {
      //     err_times: '88',
      //     device_name: 'SBGZ0007'
      //   }
      // ],
      xData: ['无屑下料机', '三通成型机', '推弯一体机', 'L22-35货压机'], // 横坐标
      yData: [23, 24, 18, 25], // 人数数据
      taskDate: [10, 11, 9, 17],
      taskDate2: [15, 19, 3, 23],
      data05_d0: [],
      data05_d1: [],
      data05_d2: [],
      data05_d3: [],
      data05_d4: [],
      data06_d0: [],
      data06_d1: [],
      timer: null,
      time: '',
      hours: '',
      minutes: '',
      seconds: '',
      date: '',
      week: '',
      myCharts01: '',
      myCharts02: '',
      myCharts03: '',
      myCharts04: '',
      myCharts05: '',
      myCharts08: '',
      myCharts10: '',
      myCharts2: '',
      myCharts3: '',
      myCharts4: '',
      // array1: [{material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}],
      // array2: [{material_code: '01'}, {material_code: '01'}, {material_code: '01'}, {material_code: '01'}],
      array1: [],
      array2: []
    }
  },
  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)
      }
    },
    defaultOption2 () {
      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()
  // },
  mounted () {
    this.refresh()
    setTimeout(() => {
      this.$router.push('/MonitoringScreen')
    }, 5000)
  },
  beforeDestroy () {
    this.$once('hook:beforeDestroy', () => {
      clearInterval(this.timer1)
      clearInterval(this.timer2)
      clearInterval(this.interTime)
      clearInterval(this.timeOut1)
      clearInterval(this.timeOut2)
      clearInterval(this.timeOut3)
    })
  },
  methods: {
    initData () {
      this._deviceStatus()
      this._deviceManage()
      this._deviceUseRate()
      this._oeeAndTeep()
      this._queryDeviceByWork() // gun
      this._deviceCensus()
      this._deviceStatusList() // 中grid
      this._deviceErrorNum()
      this._deviceErrorInfo() // 右grid
    },
    refresh () {
      this.initData()
      this._errCensus() // 右下
      this.timer2 = setInterval(() => {
        this.initData()
      }, this.interTime)
      this.timer1 = setInterval(() => {
        this._errCensus()
      }, 60000)
    },
    fontSize (res) {
      const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
      if (!clientWidth) return
      let fontSize = clientWidth * res / 1920
      return fontSize
    },
    updateTime () {
      let cd = new Date()
      let year = cd.getFullYear()
      let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
      let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
      let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
      let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
      let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let myddy = new Date().getDay()
      let week = weekday[myddy]
      this.time = `${hh}:${mm}:${ss}`
      this.hours = `${hh}`
      this.minutes = `${mm}`
      this.seconds = `${ss}`
      this.date = `${year}年${month}月${date}日`
      this.week = `${week}`
    },
    setEchart08 () {
      var dataLine = this.data06_d1
      let numMax = Math.max.apply(null, dataLine)
      let manNum = numMax + 1
      let positionLeft = 0.4
      let max = manNum + 2 * positionLeft
      // var dataLine = [5, 66, 33, 25, 10]
      // let positionLeft = 0.4
      // let max = 100 + 2 * positionLeft
      var option = {
        grid: [
          {
            left: '8%',
            top: '5%',
            right: '5%',
            bottom: '0%',
            containLabel: true
          },
          {
            left: '10%',
            top: '5%',
            right: '5%',
            bottom: '0%',
            containLabel: true
          }
        ],
        xAxis: [{
          max: max,
          show: false
        }],
        yAxis: [
          {
            axisTick: 'none',
            axisLine: 'none',
            offset: '5',
            axisLabel: {
              textStyle: {
                color: '#8FABBF', // y轴字体颜色
                fontSize: '12'
              }
            },
            data: this.data06_d0
            // data: ['设备01', '设备02', '设备03', '设备04', '设备05']
          },
          {
            axisTick: 'none',
            axisLine: 'none',
            show: false,
            axisLabel: {
              textStyle: {
                color: '#ffffff',
                fontSize: '12'
              }
            },
            data: [1, 1, 1, 1]
          },
          {
            axisLine: {
              lineStyle: {
                type: [8, 4],
                dashOffset: 4,
                // color: 'rgba(0,0,0,0)' // y轴线颜色
                color: '#3D5266', // y轴线颜色
                opacity: 0.4
              }
            },
            data: []
          },
          {
            // 设置柱状图右边参数
            show: true,
            inverse: true,
            data: [],
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '条',
            type: 'bar',
            stack: 'b',
            yAxisIndex: 0,
            data: dataLine,
            barGap: '400%', // 柱图间距
            label: {
              normal: {
                show: false,
                position: 'right',
                distance: 2,
                formatter: function (param) {
                  return param.value + '%'
                },
                textStyle: {
                  color: '#ffffff',
                  fontSize: '16'
                }
              }
            },
            barWidth: 8,
            // itemStyle: {
            //   normal: {
            //     color: new echarts.graphic.LinearGradient(
            //       1, 0, 0, 0,
            //       [
            //         {offset: 0, color: '#FF0000'},
            //         {offset: 1, color: '#FF7744'}
            //       ]
            //     ),
            //     barBorderRadius: 0
            //   }
            // },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: '#B68845',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(134,98,45,0.25)',
                    opacity: 0.25
                  }
                ]),
                barBorderRadius: 0
              }
            },
            z: 2
          },
          {
            name: '外框',
            type: 'bar',
            yAxisIndex: 2,
            barGap: '-100%',
            data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
            barWidth: 23,
            label: {
              normal: {
                show: true,
                position: 'right',
                distance: 2,
                color: '#ffffff',
                formatter: function (data) {
                  return dataLine[data.dataIndex] + '次'
                }
              }
            },
            itemStyle: {
              normal: {
                // color: '#ffffff',
                color: '#00000000', // #8个f代表黑色全透明
                barBorderRadius: 0
              }
            },
            z: 0
          }
        ]
      }
      let echart = document.getElementById('echart_d08')
      this.myCharts08 = this.$echarts.init(echart)
      this.myCharts08.setOption(option)
      window.addEventListener('resize', () => {
        this.myCharts08.resize()
      })
    },
    setEchart01 () {
      let data = this.data01
      var option = {
        // legend: {
        //   orient: 'vertical',
        //   right: 0,
        //   data: ['正常运行', '暂未生产', '空闲设备', '故障设备'],
        //   textStyle: {
        //     color: '#ffffff',
        //     fontSize: '12'
        //   }
        // },
        color: ['#0966E8', '#07E083', '#00D5FF', '#CC6060'],
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            label: {
              formatter: ''
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      }
      let echart = document.getElementById('echart_d01')
      this.myCharts01 = this.$echarts.init(echart)
      this.myCharts01.setOption(option)
      window.addEventListener('resize', () => {
        this.myCharts01.resize()
      })
    },
    setEchart04 () {
      // 多列柱状图
      // 到外面壳边框的距离
      let option = {
        dataZoom: [
          {
            show: false, // 为true滚动条出现
            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
            startValue: 0, // 从头开始。
            endValue: 2 // end百分比显示范围，endValue具体显示几个数值
          }
        ],
        grid: {
          top: this.fontSize(50),
          left: 0,
          right: this.fontSize(25),
          bottom: 0,
          containLabel: true
        },
        // 图例
        legend: {
          // icon: 'rect',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            lineHeight: 14
          },
          itemGap: 30.86,
          itemWidth: 14.16,
          itemHeight: 7.38,
          data: [{name: '最大产能', itemStyle: {color: '#0E90FD'}}, {name: '平均产能', itemStyle: {color: '#33CCCC'}}, {name: '最小产能', itemStyle: {color: '#EAAD24'}}]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#8FABBF'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          data: this.xData
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          splitNumber: 2,
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [8, 4],
              dashOffset: 4,
              color: '#8FABBF',
              opacity: 0.2
            }
          }
        },
        series: [
          {
            type: 'bar', // 形状为柱状图
            data: this.yData,
            name: '最大产能', // legend属性
            barGap: '150%', // 柱图间距
            barWidth: '8', // 柱图宽度
            itemStyle: {
              normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: 'rgba(96,112,128,0.10)',
                    opacity: 1
                  },
                  {
                    offset: 0,
                    color: '#0E90FD',
                    opacity: 0.1
                  }
                ])
              }
            }
          },
          {
            type: 'line', // 形状为折线图
            data: this.taskDate2,
            name: '最小产能', // legend属性
            barGap: '150%', // 柱图间距
            barWidth: '8', // 柱图宽度
            itemStyle: {
              normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#B68845',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(134,98,45,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            }
          },
          {
            type: 'bar', // 形状为柱状图
            data: this.taskDate,
            name: '平均产能', // legend属性
            barGap: '150%', // 柱图间距
            barWidth: '8', // 柱图宽度
            itemStyle: {
              normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#33CCCC',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(31,89,89,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            }
          }
        ]
      }
      let echart = document.getElementById('echart_d04')
      this.myCharts04 = this.$echarts.init(echart)
      this.myCharts04.setOption(option)
      this.autoMove(option, 1)
      window.addEventListener('resize', () => {
        this.myCharts04.resize()
      })
    },
    setEchart03 () {
      let d03 = this.data03
      let data1 = [d03.oee.value1, d03.teep.value1]
      let data2 = [d03.oee.value2, d03.teep.value2]
      let data3 = [d03.oee.value3, d03.teep.value3]
      // let data1 = [50, 80]
      // let data2 = [50, 69]
      // let data3 = [25, 88]
      let option = {
        grid: {
          top: 50,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            lineHeight: 14
          },
          itemGap: 30.86,
          itemWidth: 14.16,
          itemHeight: 7.38,
          data: [{name: '过去一个月', itemStyle: {color: '#0E90FD'}}, {name: '目标', itemStyle: {color: '#33CCCC'}}, {name: '实际', itemStyle: {color: '#EAAD24'}}]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#8FABBF'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          data: ['设备综合效率OEE', '产能利用效率TEEP']
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          splitNumber: 2,
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: '{value} %',
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [8, 4],
              dashOffset: 4,
              color: '#8FABBF',
              opacity: 0.2
            }
          }
        },
        series: [
          {
            name: '过去一个月',
            type: 'bar',
            barGap: '400%', // 柱图间距
            barWidth: '8', // 柱图宽度
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: 'rgba(96,112,128,0.10)',
                    opacity: 1
                  },
                  {
                    offset: 0,
                    color: '#0E90FD',
                    opacity: 0.1
                  }
                ])
              }
            },
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: 'top',
              textStyle: {
                color: '#8FABBF',
                fontSize: 14
              },
              formatter: function (data) {
                return data.value + '%'
              }
            },
            data: data1
          },
          {
            name: '目标',
            type: 'bar',
            barGap: '400%', // 柱图间距
            barWidth: '8', // 柱图宽度
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#33CCCC',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(31,89,89,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            },
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: 'top',
              textStyle: {
                color: '#8FABBF',
                fontSize: 14
              },
              formatter: function (data) {
                return data.value + '%'
              }
            },
            data: data2
          },
          {
            name: '实际',
            type: 'bar',
            barGap: '400%', // 柱图间距
            // barCategoryGap: '10%',
            barWidth: '8', // 柱图宽度
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#B68845',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(134,98,45,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            },
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: 'top',
              textStyle: {
                color: '#8FABBF',
                fontSize: 14
              },
              formatter: function (data) {
                return data.value + '%'
              }
            },
            data: data3
          }
        ]
      }
      let echart = document.getElementById('echart_d03')
      this.myCharts03 = this.$echarts.init(echart)
      this.myCharts03.setOption(option)
      window.addEventListener('resize', () => {
        this.myCharts03.resize()
      })
    },
    setEchart05 () {
      let option = {
        grid: {
          top: 50,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            lineHeight: 14
          },
          itemGap: 30.86,
          itemWidth: 14.16,
          itemHeight: 7.38,
          data: [{name: '运行设备', itemStyle: {color: '#0E90FD'}}, {name: '暂未生产设备', itemStyle: {color: '#07E083'}}, {name: '关机设备', itemStyle: {color: '#EAAD24'}}, {name: '故障设备', itemStyle: {color: '#CC6060'}}]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#8FABBF'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          data: this.data05_d0
          // data: ['无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1']
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          splitNumber: 2,
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [8, 4],
              dashOffset: 4,
              color: '#8FABBF',
              opacity: 0.2
            }
          }
        },
        series: [
          {
            name: '运行设备',
            type: 'bar',
            barWidth: '8',
            barGap: '100%', // 柱图间距
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: 'rgba(96,112,128,0.10)',
                    opacity: 1
                  },
                  {
                    offset: 0,
                    color: '#0E90FD',
                    opacity: 0.1
                  }
                ])
              }
            },
            data: this.data05_d1
            // data: ['390', '390', '390', '390', '390', '390']
          },
          {
            name: '暂未生产设备',
            type: 'bar',
            barWidth: '8',
            barGap: '100%', // 柱图间距
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#07E083',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(31,89,89,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            },
            data: this.data05_d2
            // data: ['230', '230', '230', '230', '230', '230']
          },
          {
            name: '关机设备',
            type: 'bar',
            barWidth: '8',
            barGap: '100%', // 柱图间距
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#B68845',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(134,98,45,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            },
            data: this.data05_d3
            // data: ['210', '210', '210', '210', '210', '210']
          },
          {
            name: '故障设备',
            type: 'bar',
            barWidth: '8',
            barGap: '100%', // 柱图间距
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#CC6060',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(123,33,33,0.25)',
                    opacity: 0.25
                  }
                ])
              }
            },
            data: this.data05_d4
            // data: ['110', '110', '110', '110', '110', '110']
          }
        ]
      }
      let echart = document.getElementById('echart_d05')
      this.myCharts05 = this.$echarts.init(echart)
      this.myCharts05.setOption(option)
      window.addEventListener('resize', () => {
        this.myCharts05.resize()
      })
    },
    setEchart02 () {
      // 左3
      let total = []
      let names = []
      let max = 0
      this.chartData1.map(el => {
        total.push(el.teep)
        names.push(el.workprocedure_name)
        max = Math.max(max, Number(el.teep))
      })
      let option = {
        dataZoom: [
          {
            show: false, // 为true滚动条出现
            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
            startValue: 0, // 从头开始。
            endValue: 8 // end百分比显示范围，endValue具体显示几个数值
          }
        ],
        grid: {
          top: 30,
          left: 0,
          right: 0,
          bottom: 0,
          borderColor: '#ffffff',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#8FABBF ',
              fontSize: 14,
              lineHeight: 14
            }
          },
          axisLabel: {
            color: '#8FABBF ',
            rotate: 50
          },
          data: names
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#909399'
            }
          },
          // axisLabel: {
          //   color: '#909399'
          // },
          axisLabel: {
            formatter: '{value} %',
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: [8, 4],
              dashOffset: 4,
              color: '#8FABBF',
              opacity: 0.2
            }
          },
          max: max
        },
        series: [
          {
            type: 'bar',
            barWidth: 8,
            itemStyle: {
              normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#0E90FD',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(96,112,128,0.10)',
                    opacity: 0.1
                  }
                ]),
                borderWidth: 0
              }
            },
            // data: [100, 51, 90, 41, 91, 61, 51]
            data: total,
            label: {
              show: true,
              position: 'top',
              // distance: 5,
              // fontSize: 12,
              textStyle: {
                color: '#8FABBF',
                fontSize: 14
              },
              formatter: function (data) {
                return data.value + '%'
              }
            }
          }
        ]
      }
      let echart = document.getElementById('echart_d02')
      this.myCharts02 = this.$echarts.init(echart)
      this.myCharts02.setOption(option)
      this.autoMove(option, 2)
      window.addEventListener('resize', () => {
        this.myCharts02.resize()
      })
    },
    setEchart10 () {
      // 右3
      let total = []
      let names = []
      let max = 0
      this.chartData2.map(el => {
        total.push(el.err_times)
        names.push(el.device_name)
        max = Math.max(max, Number(el.err_times))
      })
      let option = {
        dataZoom: [
          {
            show: false, // 为true滚动条出现
            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
            startValue: 0, // 从头开始。
            endValue: 9 // end百分比显示范围，endValue具体显示几个数值
          }
        ],
        grid: {
          top: 30,
          left: 0,
          right: 0,
          bottom: 0,
          borderColor: '#ffffff',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#8FABBF ',
              fontSize: 14,
              lineHeight: 14
            }
          },
          axisLabel: {
            color: '#8FABBF ',
            rotate: 50
          },
          data: names
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#909399'
            }
          },
          axisLabel: {
            color: '#909399'
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: [8, 4],
              dashOffset: 4,
              color: '#8FABBF',
              opacity: 0.2
            }
          },
          max: max
        },
        series: [
          {
            type: 'bar',
            barWidth: 8,
            itemStyle: {
              normal: {
                show: true,
                // color: '#67c23a',
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#0E90FD',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: 'rgba(96,112,128,0.10)',
                    opacity: 0.1
                  }
                ]),
                borderWidth: 0
              }
            },
            // data: [100, 51, 90, 41, 91, 61, 51]
            data: total
          }
        ]
      }
      let echart = document.getElementById('echart_d10')
      this.myCharts10 = this.$echarts.init(echart)
      this.myCharts10.setOption(option)
      this.autoMove(option, 3)
      window.addEventListener('resize', () => {
        this.myCharts10.resize()
      })
    },
    autoMove (option, type) {
      if (type === 1) {
        this.timeOut1 = setInterval(() => {
          if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
            option.dataZoom[0].endValue = 2
            option.dataZoom[0].startValue = 0
          } else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
          }
          this.myCharts04.setOption(option)
        }, 5000)
      }
      if (type === 2) {
        this.timeOut2 = setInterval(() => {
          if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
            option.dataZoom[0].endValue = 8
            option.dataZoom[0].startValue = 0
          } else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
          }
          this.myCharts02.setOption(option)
        }, 5000)
      }
      if (type === 3) {
        this.timeOut3 = setInterval(() => {
          if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
            option.dataZoom[0].endValue = 9
            option.dataZoom[0].startValue = 0
          } else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
          }
          this.myCharts10.setOption(option)
        }, 5000)
      }
    },
    /** 左1 */
    async _deviceStatus () {
      let res = await deviceStatus()
      if (res.code === '1') {
        this.totalNum = res.result.total_num
        this.data01 = res.result.ja
        let colors = ['#2D7CEB', '#07E083', '#00D5FF', '#CC6060']
        res.result.ja.map((e, i) => {
          this.$set(e, 'color', colors[i])
        })
        this.arrR01 = [...res.result.ja]
        this.setEchart01() // 左1
      } else {
        this.Dialog(res.desc)
      }
    },
    /** 左2 */
    async _deviceManage () {
      let res = await deviceManage()
      if (res.code === '1') {
        this.sbgl_jo1 = res.result.jo1
        this.sbgl_jo2 = res.result.jo2
        this.sbgl_jo3 = res.result.jo3
      } else {
        this.Dialog(res.desc)
      }
    },
    /** 左3 */
    async _deviceUseRate () {
      let res = await deviceUseRate()
      if (res.code === '1') {
        this.chartData1 = res.result
        if (res.result.length) {
          clearInterval(this.timeOut2)
          this.setEchart02() // 左3
        }
        // this.setEchart02() // 左3
      } else {
        this.Dialog(res.desc)
      }
    },
    /** 中1 */
    async _oeeAndTeep () {
      let res = await oeeAndTeep()
      if (res.code === '1') {
        this.data03 = res.result
        this.setEchart03() // 中1
      } else {
        this.Dialog(res.desc)
      }
    },
    /** 中2 */
    async _queryDeviceByWork () {
      let res = await queryDeviceByWork()
      if (res.code === '1') {
        this.xData = []
        this.yData = []
        this.taskDate = []
        this.taskDate2 = []
        res.result.map((e, i) => {
          this.xData.push(e.workprocedure_name)
          this.yData.push(e.max_productivity)
          this.taskDate.push(e.ave_productivity)
          this.taskDate2.push(e.min_productivity)
        })
        if (res.result.length) {
          clearInterval(this.timeOut1)
          this.setEchart04() // 中2
        }
      } else {
        this.Dialog(res.desc)
      }
    },
    /** 中3 */
    async _deviceCensus () {
      let res = await deviceCensus()
      if (res.code === '1') {
        this.data05_d0 = []
        this.data05_d1 = []
        this.data05_d2 = []
        this.data05_d3 = []
        this.data05_d4 = []
        res.result.map((e, i) => {
          this.data05_d0.push(e.workprocedure_name)
          this.data05_d1.push(e.run_device)
          this.data05_d2.push(e.prepare_device)
          this.data05_d3.push(e.free_device)
          this.data05_d4.push(e.err_device)
        })
        this.setEchart05() // 中3
      } else {
        this.Dialog(res.desc)
      }
    },
    /** 中4 */
    async _deviceStatusList () {
      let res = await deviceStatusList()
      if (res.code === '1') {
        // let colors = ['#2D7CEB', '#07E083', '#00D5FF', '#CC6060', '#fc0']
        res.result.map((e, i) => {
          if (e.device_status === '02') {
            this.$set(e, 'color', '#2D7CEB')
          }
          if (e.device_status === '03') {
            this.$set(e, 'color', '#07E083')
          }
          if (e.device_status === '04') {
            this.$set(e, 'color', '#00D5FF')
          }
          if (e.device_status === '05') {
            this.$set(e, 'color', '#CC6060')
          }
          if (e.device_status === '') {
            this.$set(e, 'color', '#fc0')
          }
        })
        this.array1 = res.result
      } else {
        this.Dialog(res.desc)
      }
    },
    /** 右1 */
    async _deviceErrorNum () {
      let res = await deviceErrorNum()
      if (res.code === '1') {
        this.data06_d0 = []
        this.data06_d1 = []
        res.result.map((e, i) => {
          this.data06_d0.push(e.device_name)
          this.data06_d1.push(e.err_num)
        })
        this.setEchart08() // 右1
      } else {
        this.Dialog(res.desc)
      }
    },
    /** 右2 */
    async _deviceErrorInfo () {
      let res = await deviceErrorInfo()
      if (res.code === '1') {
        this.array2 = res.result
      } else {
        this.Dialog(res.desc)
      }
    },
    /** 右3 */
    async _errCensus () {
      let res = await errCensus()
      if (res.code === '1') {
        this.chartData2 = res.result
        if (res.result.length) {
          clearInterval(this.timeOut3)
          this.setEchart10() // 右3
        }
        // this.setEchart10() // 右3
      } else {
        this.Dialog(res.desc)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
.bg
  _wh(100%, 100%)
  background #050d20 center center / 100% 100% url(../assets/images/screen1/bg.png) no-repeat
  overflow hidden
header
  width 100%
  height 1rem
  position relative
  background center center / 100% 100% url(../assets/images/screen1/header.png) no-repeat
  p
    font-family "PangMenZhengDao"
    _font(.48rem, 1rem, #ffffff, lighter, center)
    letter-spacing .05rem
    text-shadow 0 .08rem .08rem rgba(0,0,0,0.30)
.data_box
  position absolute
  right 0
  top .14rem
  height .37rem
.date, .week
  padding-right .2rem
.time
  width 1.7rem
  text-align center
.date_item
  float left
  _font(.2rem, .37rem, #fff,,)
.tiem_item
  float left
  _font(.32rem, .37rem, #fff,,)
.colon
  float left
  _font(.32rem, .37rem, #fff,,)
.container
  _wh(100%, calc(100% - 1.38rem))
  padding .3rem .2509rem 0
  overflow hidden
  clear both
.bottom
  _wh(100%, .38rem)
  background center bottom / 19.06rem 100% url(../assets/images/screen1/bottom.png) no-repeat
.left_wrap
  float left
  _wh(4.0756rem, 100%)
.center_wrap
  float left
  // _wh(9.96rem, 100%)
  _wh(10rem, 100%)
  margin-left .2936rem
  // padding .4rem .16rem
.right_wrap
  float right
  _wh(4.0273rem, 100%)
.item_wrap
  _wh(100%, calc(100% / 3))
.item_tip
  clear both
  _wh(100%, .32rem)
  line-height .32rem
  background center center / 100% 100% url(../assets/images/screen1/title_bg_1.png) no-repeat
.item_tip_01
  width 100%
  background center center / 100% 100% url(../assets/images/screen1/title_bg_d1.png) no-repeat
.item_tip_2
  background center center / 100% 100% url(../assets/images/screen1/title_bg_d2.png) no-repeat
.item_tip_left
  float left
  // _wh(60%, 100%)
  _wh(100%, 100%)
  font-family "SourceHanSansCN"
  _font(.18rem, inherit, #fff, 700,)
  letter-spacing .02rem
  text-shadow 0 0 .09rem #159AFF
  padding-left .38rem
.item_content_0
  width 2.2rem
  height 2.2rem
  // _fj(space-around)
  // padding .17rem 0 .24rem
.item_content_1
  _wh(100%, calc(100% - .32rem))
  _fj(space-around)
  padding .17rem 0 .24rem
.item_content_1_inner
  _wh(1.2rem, 100%)
  background-color #011834
.item_content_1_inner_1
  _wh(100%, .37rem)
  font-family "SourceHanSansCN"
  _font(.14rem, .37rem, #78B1DE, 700, center)
  letter-spacing .02rem
  background center center / 100% 100% url(../assets/images/screen1/item_1.png) no-repeat
.item_content_1_inner_2
  _wh(100%, calc((100% - .37rem) / 4))
  // overflow hidden
  // _fj(space-evenly)
  // flex-direction column
  padding-top .06rem
.item_content_1_inner_2_bg
  background center bottom / 1.02rem .03rem url(../assets/images/screen1/line_1.png) no-repeat
.item_content_1_inner_2_p1
  float left
  margin 0.17rem 0 0 0.08rem
  font-family "SourceHanSansCN"
  _font(.14rem, .14rem, #84B0DA, 700, left)
.item_content_1_inner_2_p2
  float right
  margin 0.15rem 0.08rem 0 0
  font-family "SourceHanSansCN"
  _font(.18rem, .18rem, #FFFFFF, 700, right)
.item_wrap_1
  // _wh(100%, calc((100% - .4rem) / 2))
  _wh(48.8%, calc((100% - .4rem) / 3))
.item_wrap_2
  // _wh(100%, calc((100% - .4rem) / 2))
  _wh(100%, calc((100% - .4rem) / 3))
.item_wrap_3
  margin-top .26rem
.inlblock
  display inline-block
  margin-right 0.08rem
.item_content_2
  _wh(100%, calc(100% - .32rem))
  margin-top .06rem
  border .01rem solid rgba(8,205,248,0.3)
.scroll_wrap
  _wh(100%, 100%)
// scroll1
.scroll_tab_1
  _wh(100%, .4rem)
  border-bottom .01rem solid rgba(8,205,248,0.3)
  li
    float left
    width 15%
    _font(.14rem,.4rem,#78B1DE,,center)
    word-wrap break-word
    word-break break-all
    white-space nowrap
    padding 0 .02rem
    overflow hidden
    box-sizing border-box
    &:nth-child(5)
      width 20%
    &:nth-child(6)
      width 20%
.scroll_container_1
  width 100%
  height calc(100% - .4rem)
  overflow hidden
.scroll-ul_1
  li
    _wh(100%, .4rem)
    border-bottom .01rem solid rgba(8,205,248,0.3)
    &:nth-child(even)
      background rgba(1,24,52,0.60)
      box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
    .scroll-ul_1_div
      float left
      _wh(15%, .4rem)
      _fj(center)
      _font(.14rem, .4rem, #fff,,center)
      word-wrap break-word
      word-break break-all
      white-space nowrap
      padding 0 .02rem
      overflow hidden
      &:nth-child(5)
        width 20%
      &:nth-child(6)
        width 20%
      &:nth-child(4)
        // text-align left
        span
          // display inline-block
          _wh(.0725rem, .0725rem)
          border-radius 100%
          background-color #2D7CEB
          margin-right .1rem
// scroll2
.scroll_tab_2
  _wh(100%, .4rem)
  border-bottom .01rem solid rgba(8,205,248,0.3)
  li
    float left
    width 18%
    _font(.14rem,.4rem,#78B1DE,,center)
    word-wrap break-word
    word-break break-all
    white-space nowrap
    padding 0 .02rem
    overflow hidden
    box-sizing border-box
    &:nth-child(4)
      width 46%
.scroll_container_2
  width 100%
  height calc(100% - .4rem)
  overflow hidden
.scroll-ul_2
  li
    _wh(100%, .44rem)
    border-bottom .01rem solid rgba(8,205,248,0.3)
    &:nth-child(even)
      background rgba(1,24,52,0.60)
      box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
    .scroll-ul_2_div
      float left
      _wh(18%, .44rem)
      _fj(center)
      _font(.12rem, .44rem, #fff,,center)
      word-wrap break-word
      word-break break-all
      white-space nowrap
      padding 0 .02rem
      overflow hidden
      &:nth-child(4)
        font-size .12rem
        width 46%
        _fj(left)
        _font(.12rem, .44rem, #fff,,left)
        word-wrap break-word
        word-break break-all
        white-space nowrap
        padding 0 .02rem
        overflow hidden
.right_1_up
  clear both
  _wh(100%, 1.6rem)
  padding 0 .3rem .2rem
  background center bottom / 100% .03rem url(../assets/images/screen1/line_2.png) no-repeat
.right_1_up_left
  float left
  _wh(1.4rem, 1.4rem)
  background center bottom / 100% 100% url(../assets/images/screen1/item_3.png) no-repeat
  _fj(center)
.right_1_up_right
  float right
  _wh(1.71rem, 100%)
.right_1_up_right_item
  _wh(100%, .6rem)
  background center bottom / 100% 100% url(../assets/images/screen1/item_4.png) no-repeat
  _fj(space-evenly)
  flex-direction column
  &:nth-child(2)
    margin-top .2rem
.right_1_up_p1
  font-family "SourceHanSansCN"
  _font(.14rem, .14rem, #78B1DE, 700, center)
.right_1_up_p2
  font-family "SourceHanSansCN"
  _font(.18rem, .18rem, #fff, 700, center)
  span
    _font(.12rem, .18rem, #fff, 700, center)
.right_1_down
  _wh(100%, calc(100% - 1.6rem))
  padding .05rem .3rem 0
.right_1_down_inner_1
  _wh(100%, .28rem)
  overflow hidden
  _fj()
  div
    &:nth-child(1)
      font-family "SourceHanSansCN"
      _font(.12rem, .28rem, #84B0DA, 700,)
      letter-spacing .0171rem
    &:nth-child(2)
      font-family "SourceHanSansCN"
      _font(.16rem, .28rem, #fff, 700, right)
      letter-spacing .02rem
.right_1_down_inner_2
  _wh(100%, .1811rem)
  background-color rgba(0,213,255,0.20)
  _fj()
  div
    &:nth-child(1)
      _wh(50%, .0805rem)
      background-color #07E083
    &:nth-child(2)
      _wh(50%, .0805rem)
      background-color #B68845
.right_1_down_inner_3
  _wh(100%, .3rem)
  margin-top .1rem
  _fj()
.right_1_down_inner_3_i
  _wh(1.83rem, .3rem)
  _fj()
  background center bottom / 100% 100% url(../assets/images/screen1/item_5.png) no-repeat
.right_1_down_inner_3_l
  _wh(50%, 100%)
  overflow hidden
  _fj()
  span
    display block
    &:nth-child(1)
      _wh(.0725rem, .0725rem)
      border-radius 100%
      background-color #2D7CEB
      margin-left .15rem
    &:nth-child(2)
      font-family "SourceHanSansCN"
      _font(.14rem, .3rem, #fff,400,)
.right_1_down_inner_3_r
  _wh(50%, 100%)
  line-height .3rem
  overflow hidden
  text-align center
  span
    font-family "SourceHanSansCN"
    _font(.12rem, .3rem, #fff,700,)
    &:nth-child(1)
      font-family "SourceHanSansCN"
      _font(.18rem, .3rem, #00D5FF,700,)
.item_content_4
  _wh(100%, calc(100% - .32rem))
  padding .1rem 0 .2rem
  overflow hidden
.item_content_5
  _wh(100%, calc(100% - .32rem))
  padding-top .3rem
  clear both
.item_5_l
  float left
  _wh(1.83rem, .3rem)
  margin-top .2rem
.item_5_r
  float right
  margin-top .4rem
  _wh(1.83rem, 60%)
  _fj()
  flex-direction column
  .right_1_down_inner_3_i
    margin-bottom .045rem
.item_5_l_1
  _wh(100%, 60%)
  background right center / .02rem 100% url(../assets/images/screen1/line_3.png) no-repeat
.item_5_l_2
  _wh(100%, 40%)
  .right_1_down_inner_3_i
    &:nth-child(1), &:nth-child(2)
      margin-bottom 5%
.total
  position absolute
  top 2.7rem
  left .3rem
  text-align center
  width 2.2rem
  div
    line-height 0.24rem
    // color #f80
    color #00D9FF
    font-size .3rem
    margin-top 0.08rem
    font-weight 700
.total-desc
  width 2.2rem
  text-align center
.cred
  color #CC6060
.scroll_container_3
  li
    .scroll-ul_1_div
      &:nth-child(4)
        i
          display block
          width .4rem
          _font(.14rem, .4rem, #fff,,center)
          font-style normal
</style>
