screen-xinrui/src/pages/DeviceManage.vue

<template>
  <section>
    <t-header title="武汉新锐设备管理看板"></t-header>
    <div class="goods_shelves">
      <div class="yard-wrap">
        <div class="content_left">
          <div class="item_wrap item_wrap_3">
            <div class="tip_item">
              <p>每日开机时长</p>
              <div class="tip_item_bg1"></div>
            </div>
            <div class="echart_wrap">
              <div id="echart_d2" style="width: 100%; height: 100%"></div>
            </div>
          </div>
          <div class="item_wrap item_wrap_1">
            <div class="tip_item">
              <p>设备运行状态</p>
              <div class="tip_item_bg1"></div>
            </div>
            <div class="grid_wrap">
              <ul class="scroll_tab_1">
                <li>事业部</li>
                <li>正常(台)</li>
                <li>故障(台)</li>
                <li>委外(台)</li>
                <li>保养(台)</li>
              </ul>
              <div class="scroll_container_1">
                <vue-seamless-scroll :data="gridArr1" :class-option="defaultOption1">
                  <ul class="content-block-scroll-ul_1">
                    <li v-for="(e, i) in gridArr1" :key="i">
                      <div class="scroll-ul_1_div">{{e.dept_name}}</div>
                      <div class="scroll-ul_1_div">{{e.normal_num}}</div>
                      <div class="scroll-ul_1_div">{{e.fault_num}}</div>
                      <div class="scroll-ul_1_div">{{e.out_num}}</div>
                      <div class="scroll-ul_1_div">{{e.main_num}}</div>
                    </li>
                  </ul>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
          <div class="item_wrap item_wrap_1">
            <div class="tip_item">
              <p>设备年保养计划状态</p>
              <div class="tip_item_bg1"></div>
            </div>
            <div class="grid_wrap">
              <ul class="scroll_tab_1 scroll_tab_2">
                <li>事业部</li>
                <li>计划数(台)</li>
                <li>已保养(台)</li>
                <li>在保养(台)</li>
                <li>未保养(台)</li>
                <li>完成率(%)</li>
              </ul>
              <div class="scroll_container_1">
                <vue-seamless-scroll :data="gridArr2" :class-option="defaultOption2">
                  <ul class="content-block-scroll-ul_1 content-block-scroll-ul_2">
                    <li v-for="(e, i) in gridArr2" :key="i">
                      <div class="scroll-ul_1_div">{{e.dept_name}}</div>
                      <div class="scroll-ul_1_div">{{e.need_num}}</div>
                      <div class="scroll-ul_1_div">{{e.end_num}}</div>
                      <div class="scroll-ul_1_div">{{e.begin_num}}</div>
                      <div class="scroll-ul_1_div">{{e.not_num}}</div>
                      <!-- <div class="scroll-ul_1_div">{{e.confirm_rate}}</div> -->
                      <div class="scroll-ul_1_div">
                        <div class="progress_line_wrap">
                          <div class="progress_dot_wrap">
                            <div class="progress_dot" :style="{'left': Number(e.confirm_rate) + '%'}"></div>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
        </div>
        <div class="content_center">
          <div class="center_wrap">
            <div class="item_wrap item_wrap_3 item_wrap_5">
              <div class="tip_item">
                <p>设备数量</p>
                <div class="tip_item_bg1"></div>
              </div>
              <div class="echart_wrap echart_wrap_1">
                <div class="echart_wrap_2">
                  <div class="echart_wrap_l">
                    <div class="echart_wrap_l_l">
                      <div class="num_items">
                        <div class="right_1_up_right_item">
                          <p class="right_1_up_p1">总设备台数</p>
                          <p class="right_1_up_p2">{{num1}}</p>
                        </div>
                        <div class="right_1_up_right_item">
                          <p class="right_1_up_p1">在用台数</p>
                          <p class="right_1_up_p2">{{num2}}</p>
                        </div>
                        <div class="right_1_up_right_item">
                          <p class="right_1_up_p1">总故障台数</p>
                          <p class="right_1_up_p2">{{num3}}</p>
                        </div>
                      </div>
                    </div>
                    <div class="echart_wrap_l_wrap">
                      <div id="echart_d4" style="width: 100%; height: 100%"></div>
                    </div>
                  </div>
                  <div class="echart_wrap_r">
                    <div class="right_1_down_inner_3_i" v-for="(e, i) in echartArr3" :key="i">
                      <div class="right_1_down_inner_3_l">
                        <span><i :style="{'background-color': e.color}"></i></span>
                        <span>{{e.dept_name}}</span>
                      </div>
                      <div class="right_1_down_inner_3_r">
                        <span>{{e.device_num}}</span>
                        <span>台</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item_wrap item_wrap_2">
              <div class="tip_item">
                <p>当日任务列表</p>
                <div class="tip_item_bg1"></div>
              </div>
              <div class="grid_wrap grid_wrap_1">
                <ul class="scroll_tab_1 scroll_tab_5">
                  <li>报修时间</li>
                  <li>设备名称</li>
                  <li>自编号</li>
                  <li>故障描述</li>
                  <li>使用部门</li>
                  <li>状态</li>
                  <li>维保人</li>
                </ul>
                <div class="scroll_container_1">
                  <vue-seamless-scroll :data="gridArr5" :class-option="defaultOption5">
                    <ul class="content-block-scroll-ul_1 content-block-scroll-ul_5">
                      <li v-for="(e, i) in gridArr5" :key="i">
                        <div class="scroll-ul_1_div">{{e.input_time}}</div>
                        <div class="scroll-ul_1_div">{{e.device_name}}</div>
                        <div class="scroll-ul_1_div">{{e.extend_code}}</div>
                        <div class="scroll-ul_1_div">{{e.fault_desc}}</div>
                        <div class="scroll-ul_1_div">{{e.dept_name}}</div>
                        <div class="scroll-ul_1_div">{{e.invstatus}}</div>
                        <div class="scroll-ul_1_div">{{e.user_name}}</div>
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
            <div class="item_wrap item_wrap_2">
              <div class="tip_item">
                <p>年保养计划监控</p>
                <div class="tip_item_bg1"></div>
              </div>
              <div class="grid_wrap grid_wrap_1">
                <ul class="scroll_tab_1 scroll_tab_3">
                  <li>事业部</li>
                  <li>设备名称</li>
                  <li>设备号</li>
                  <li>计划明细数</li>
                  <li>计划时期</li>
                  <li>保养对象</li>
                  <li>实际操作时间</li>
                  <li>保养倒计时 (天)</li>
                  <li>延期时间 (天)</li>
                  <li>评价</li>
                </ul>
                <div class="scroll_container_1">
                  <vue-seamless-scroll :data="gridArr3" :class-option="defaultOption3">
                    <ul class="content-block-scroll-ul_1 content-block-scroll-ul_3">
                      <li v-for="(e, i) in gridArr3" :key="i">
                        <div class="scroll-ul_1_div">{{e.dept_name}}</div>
                        <div class="scroll-ul_1_div">{{e.device_name}}</div>
                        <div class="scroll-ul_1_div">{{e.device_code}}</div>
                        <div class="scroll-ul_1_div">{{e.num}}</div>
                        <div class="scroll-ul_1_div">{{e.plan_time}}</div>
                        <div class="scroll-ul_1_div">{{e.maint_object}}</div>
                        <div class="scroll-ul_1_div">{{e.impl_time}}</div>
                        <div class="scroll-ul_1_div">{{e.main_time}}</div>
                        <div class="scroll-ul_1_div">{{e.putoff_time}}</div>
                        <div class="scroll-ul_1_div">{{e.remark}}</div>
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_left">
          <div class="item_wrap item_wrap_3">
            <div class="tip_item">
              <p>年故障类别TOP10</p>
              <div class="tip_item_bg1"></div>
            </div>
            <div class="echart_wrap">
              <div id="echart_d3" style="width: 100%; height: 100%"></div>
            </div>
          </div>
          <div class="item_wrap item_wrap_4">
            <div class="tip_item">
              <p>近30天班组情况</p>
              <div class="tip_item_bg1"></div>
            </div>
            <div class="grid_wrap">
              <ul class="scroll_tab_1 scroll_tab_4">
                <li>班组</li>
                <li>MTBF(h)</li>
                <li>MTTR(h)</li>
                <li>平均OEE(%)</li>
                <li>总维修时间(h)</li>
              </ul>
              <div class="scroll_container_1">
                <vue-seamless-scroll :data="gridArr4" :class-option="defaultOption4">
                  <ul class="content-block-scroll-ul_1 content-block-scroll-ul_4">
                    <li v-for="(e, i) in gridArr4" :key="i">
                      <div class="scroll-ul_1_div">{{e.group_name}}</div>
                      <div class="scroll-ul_1_div">{{e.device_mtbf}}</div>
                      <div class="scroll-ul_1_div">{{e.device_mttr}}</div>
                      <div class="scroll-ul_1_div">{{e.device_oee}}</div>
                      <div class="scroll-ul_1_div">{{e.device_time}}</div>
                    </li>
                  </ul>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import THeader from '@components/header.vue'
import {getDeviceTime, getDeviceNumber, getDeviceFault, getDeviceRunStatus, getDeviceYearStatus, getDeviceYearMainPlan, getDeviceGroupStatus, getTodayTask} from '@js/getData2.js'
export default {
  name: 'DeviceManage',
  components: {
    THeader
  },
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      myCharts1: '',
      myCharts2: '',
      myCharts3: '',
      echartArr1: [],
      echartArr2: [],
      echartArr3: [],
      num1: '',
      num2: '',
      num3: '',
      gridArr1: [],
      gridArr2: [],
      gridArr3: [],
      gridArr4: [],
      gridArr5: []
    }
  },
  computed: {
    defaultOption1 () {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 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: 4, // 开始无缝滚动的数据量 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)
      }
    },
    defaultOption3 () {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 8, // 开始无缝滚动的数据量 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)
      }
    },
    defaultOption4 () {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 10, // 开始无缝滚动的数据量 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)
      }
    },
    defaultOption5 () {
      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)
      }
    }
  },
  mounted () {
    this._getDeviceTime()
    this._getDeviceFault()
    this._getDeviceNumber()
    this._getDeviceRunStatus()
    this._getDeviceYearStatus()
    this._getDeviceYearMainPlan()
    this._getDeviceGroupStatus()
    this._getTodayTask()
    this.refresh()
  },
  beforeDestroy () {
    window.clearInterval(this.timer)
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        this._getDeviceTime()
        this._getDeviceFault()
        this._getDeviceNumber()
        this._getDeviceRunStatus()
        this._getDeviceYearStatus()
        this._getDeviceYearMainPlan()
        this._getDeviceGroupStatus()
        this._getTodayTask()
      }, this.interTime)
    },
    /** 每日开机时长 */
    async _getDeviceTime () {
      let res = await getDeviceTime()
      if (res.code === '1') {
        this.echartArr1 = [...res.srb.device_time_arr]
        this.setEchart1()
      } else {
        this.Dialog(res.desc)
      }
    },
    setEchart1 () {
      let option = {
        grid: {
          top: 60,
          left: 0,
          right: 58,
          bottom: 0,
          containLabel: true
        },
        legend: {
          top: 0,
          left: '10%',
          right: '10%',
          icon: 'rect',
          textStyle: {
            color: '#ffffff',
            fontSize: 12,
            lineHeight: 16,
            padding: [0, 0, 0, 0]
          },
          itemGap: 10,
          itemWidth: 14,
          itemHeight: 5,
          data: ['棒料事业部', '矿用合金事业部', '型材事业部', '混合料厂', '武汉运营保障部', '精密零件事业部']
        },
        // dataZoom: [
        //   {
        //     show: false, // 为true滚动条出现
        //     type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
        //     startValue: 0, // 从头开始。
        //     endValue: 5 // end百分比显示范围，endValue具体显示几个数值
        //   }
        // ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#8FABBF'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#8FABBF',
              fontSize: 13
            },
            rotate: -45
          },
          data: this.echartArr1.map((it) => it.device_date)
        },
        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'
            }
          }
        },
        series: [
          {
            name: '棒料事业部',
            type: 'line',
            smooth: true,
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              color: '#0E90FD'
            },
            areaStyle: {
              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
                  }
                ], false)
              }
            },
            data: this.echartArr1.map((it) => it.dept_name_bl)
          },
          {
            name: '矿用合金事业部',
            type: 'line',
            smooth: true,
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              color: '#33CCCC'
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(38,191,191,0.50)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(31,89,89,0.00)'
                  }
                ], false)
              }
            },
            data: this.echartArr1.map((it) => it.dept_name_ky)
          },
          {
            name: '型材事业部',
            type: 'line',
            smooth: true,
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              color: '#B68845'
            },
            areaStyle: {
              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
                  }
                ], false)
              }
            },
            data: this.echartArr1.map((it) => it.dept_name_xc)
          },
          {
            name: '混合料厂',
            type: 'line',
            smooth: true,
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              color: 'rgba(155, 155, 226, 0.8)'
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(155, 155, 226, 0.8)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(155, 155, 226, 0)'
                  }
                ], false)
              }
            },
            data: this.echartArr1.map((it) => it.dept_name_hh)
          },
          {
            name: '武汉运营保障部',
            type: 'line',
            smooth: true,
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              color: '#6de82d'
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#6de82d',
                    opacity: 1
                  },
                  {
                    offset: 1,
                    color: '#d9ff7d',
                    opacity: 1
                  }
                ], false)
              }
            },
            data: this.echartArr1.map((it) => it.dept_name_wh)
          },
          {
            name: '精密零件事业部',
            type: 'line',
            smooth: true,
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              color: 'rgba(217, 31, 44, 1)'
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#D91F2C'
                  },
                  {
                    offset: 1,
                    color: '#FFFFFF'
                  }
                ], false)
              }
            },
            data: this.echartArr1.map((it) => it.dept_name_jm)
          }
        ]
      }
      let echart = document.getElementById('echart_d2')
      this.myCharts1 = this.$echarts.init(echart)
      this.myCharts1.setOption(option)
      // this.autoMove(option)
      window.addEventListener('resize', () => {
        this.myCharts1.resize()
      })
    },
    /** 年故障类别TOP10 */
    async _getDeviceFault () {
      let res = await getDeviceFault()
      if (res.code === '1') {
        let colors = ['#E0CA07', '#007744', '#C0C0C0', '#B68845', '#07E083', '#2D7CEB', '#00D5FF ', '#C44545', '#8B31A1', '#E1BF94']
        res.srb.device_fault_arr.map((e, i) => {
          this.$set(e, 'color', colors[i])
        })
        this.echartArr2 = [...res.srb.device_fault_arr]
        this.setEchart2()
      } else {
        this.Dialog(res.desc)
      }
    },
    setEchart2 () {
      let max = 0
      this.echartArr2.map(el => {
        if (Number(el.device_fault_num) >= Number(max)) {
          max = Number(el.device_fault_num)
        }
      })
      let option = {
        grid: {
          top: 0,
          left: 0,
          right: 25,
          bottom: 0,
          containLabel: true
        },
        // dataZoom: [
        //   {
        //     show: false, // 为true滚动条出现
        //     type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
        //     startValue: 0, // 从头开始。
        //     endValue: 5 // end百分比显示范围，endValue具体显示几个数值
        //   }
        // ],
        xAxis: {
          type: 'value',
          min: 0,
          max: max,
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: [8, 4],
              dashOffset: 4,
              color: '#8FABBF'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#8FABBF',
              fontSize: 16
              // align: 'center'
            }
          },
          formatter: '{value}'
        },
        yAxis: {
          type: 'category',
          inverse: true,
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: '#8FABBF'
            }
          },
          splitNumber: 2,
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#8FABBF',
              fontSize: 14
            }
          },
          data: this.echartArr2.map((it) => it.device_fault_type)
        },
        series: [
          {
            type: 'bar',
            barWidth: '16',
            zlevel: 1,
            label: {
              show: true,
              position: 'right', // 位置
              color: '#A7D6F4',
              fontSize: 14,
              distance: 15, // 距离
              formatter: '{c}' // 这里是数据展示的时候显示的数据
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: '#2DB796'
                  },
                  {
                    offset: 1,
                    color: '#6BBBA8'
                  }
                ], false)
              }
            },
            data: this.echartArr2.map((it) => it.device_fault_num)
          }
        ]
      }
      let echart = document.getElementById('echart_d3')
      this.myCharts2 = this.$echarts.init(echart)
      this.myCharts2.setOption(option)
      // this.autoMove(option)
      window.addEventListener('resize', () => {
        this.myCharts2.resize()
      })
    },
    /** 设备数量 */
    async _getDeviceNumber () {
      let res = await getDeviceNumber()
      if (res.code === '1') {
        this.num1 = res.srb.device_all_num
        this.num2 = res.srb.device_use_num
        this.num3 = res.srb.device_request_num
        let colors = ['#E0CA07', '#007744', '#C0C0C0', '#B68845', '#07E083', '#2D7CEB', '#00D5FF ', '#C44545', '#8B31A1', '#E1BF94']
        res.srb.device_all_arr.map((e, i) => {
          this.$set(e, 'color', colors[i])
        })
        this.echartArr3 = [...res.srb.device_all_arr]
        this.setEchart3()
      } else {
        this.Dialog(res.desc)
      }
    },
    setEchart3 () {
      let arr = []
      this.echartArr3.map(el => {
        arr.push({name: el.dept_name, value: parseFloat(el.device_num), itemStyle: {color: el.color}})
      })
      var option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '区域',
            type: 'pie',
            radius: ['75%', '100%'],
            center: ['50%', '50%'],
            roseType: 'radius',
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: arr
          }
        ]
      }
      let echart = document.getElementById('echart_d4')
      if (this.myCharts3 !== '') {
        this.myCharts3.dispose()
      }
      if (echart !== null) {
        this.myCharts3 = this.$echarts.init(echart)
        this.myCharts3.setOption(option)
        window.addEventListener('resize', () => {
          this.myCharts3.resize()
        })
      }
    },
    /** 设备运行状态 */
    async _getDeviceRunStatus () {
      let res = await getDeviceRunStatus()
      if (res.code === '1') {
        this.gridArr1 = [...res.srb.device_run_arr]
      } else {
        this.Dialog(res.desc)
      }
    },
    /** 设备年计划保养状态 */
    async _getDeviceYearStatus () {
      let res = await getDeviceYearStatus()
      if (res.code === '1') {
        this.gridArr2 = [...res.srb.device_year_arr]
      } else {
        this.Dialog(res.desc)
      }
    },
    /** 年保养计划监控 */
    async _getDeviceYearMainPlan () {
      let res = await getDeviceYearMainPlan()
      if (res.code === '1') {
        this.gridArr3 = [...res.srb.device_year_arr]
      } else {
        this.Dialog(res.desc)
      }
    },
    /** 近30天班组情况 */
    async _getDeviceGroupStatus () {
      let res = await getDeviceGroupStatus()
      if (res.code === '1') {
        this.gridArr4 = [...res.srb.device_group_arr]
      } else {
        this.Dialog(res.desc)
      }
    },
    /** 当日任务列表 */
    async _getTodayTask () {
      let res = await getTodayTask()
      if (res.code === '1') {
        this.gridArr5 = [...res.srb.device_group_arr]
      } else {
        this.Dialog(res.desc)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
.goods_shelves
  _wh(100%, calc(100% - .75rem))
  padding .3rem .3rem .4rem .3rem
  _bis('../assets/images/item_2.png', 100%, auto, center, bottom)
.yard-wrap
  _wh(100%, 100%)
  clear both
.content_left
  float left
  _wh(24%, 100%)
  border-top .03rem solid #0092df
  background linear-gradient(rgba(15, 44, 84, 0.6) 0%, rgb(0, 24, 57) 100%)
  overflow hidden
.content_center
  float left
  _wh(calc(52% - .4rem), 100%)
  margin 0 .2rem
  padding .32rem .2rem .2rem .2rem
  overflow hidden
  _bis('../assets/images/item_1.png', 100%, 100%)
.center_wrap
  _wh(100%, 100%)
.item_wrap
  _wh(100%, 45%)
.item_wrap_1
  height 30%
.item_wrap_2
  height calc(33% - .125rem)
  margin-top .125rem
.item_wrap_3
  height 40%
.item_wrap_5
  height 34%
.item_wrap_4
  height 60%
.tip_item
  position relative
  height .42rem
  padding 0 .2rem
  background linear-gradient(0deg, rgb(15, 44, 84) 0%, rgb(0, 8, 50) 100%)
  p
    display inline-block
    _font(.18rem, .40rem, #fff)
    border-bottom .02rem solid #53cdf9
.tip_item_bg1
  position absolute
  bottom -0.01rem
  left .2rem
  _wh(.06rem, .06rem)
  background-color #53cdf9
  transform rotate(45deg)
  box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
.echart_wrap
  _wh(100%, calc(100% - .5rem))
  padding .2rem
.echart_wrap_1
  padding-bottom 0
.echart_wrap_2
  _wh(100%, 100%)
  _fj()
.grid_wrap
  _wh(calc(100% - .4rem), calc(100% - .7rem))
  margin .08rem .2rem .2rem .2rem
  border .01rem solid rgba(8,205,248,0.3)
  overflow hidden
.grid_wrap_1
  margin-left 0
  margin-right 0
  margin-bottom 0
  width 100%
  height calc(100% - .5rem)
.scroll_tab_1
  _wh(100%, .4rem)
  border-bottom .01rem solid rgba(8,205,248,0.3)
  li
    float left
    width 17%
    _font(.12rem,.4rem,#78B1DE,,center)
    word-wrap break-word
    word-break break-all
    white-space nowrap
    padding 0 .04rem
    overflow hidden
    box-sizing border-box
    &:nth-child(1)
      width 32%
.scroll_container_1
  overflow hidden
.scroll_tab_2 li
  width 15% !important
.scroll_tab_2 li:nth-child(1)
  width 25% !important
.scroll_tab_3 li
  width 10% !important
.scroll_tab_3 li:nth-child(1)
  width 10% !important
.scroll_tab_4 li
  &:nth-child(1)
    width 30% !important
  &:nth-child(2), &:nth-child(3)
    width 15% !important
  &:nth-child(4), &:nth-child(5)
    width 20% !important
.scroll_tab_5 li
  &:nth-child(1), &:nth-child(2), &:nth-child(4), &:nth-child(5)
    width 18% !important
  &:nth-child(6)
    width 8% !important
  &:nth-child(3), &:nth-child(7)
    width 10% !important
.content-block-scroll-ul_1
  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)
    &:last-child
      border-bottom none
.content-block-scroll-ul_1
  li
    .scroll-ul_1_div
      float left
      _wh(17%, .44rem)
      _fj(center)
      _font(.12rem, .44rem, #fff,,center)
      word-wrap break-word
      word-break break-all
      white-space nowrap
      padding 0 .04rem
      overflow hidden
      &:nth-child(1)
        width 32%
      .progress_line_wrap
        position relative
        _wh(1.35rem, .03rem)
        background-image linear-gradient(270deg, #00EFFF 2%, #00527D 100%)
      .progress_dot_wrap
        position absolute
        _wh(100%, .15rem)
        top -.06rem
        left -.05rem
      .progress_dot
        position absolute
        top 0
        left 0
        _wh(.15rem, .15rem)
        background center center / 100% 100% url(../assets/images/dot_1.png) no-repeat
.content-block-scroll-ul_2 li .scroll-ul_1_div
  width 15% !important
.content-block-scroll-ul_2 li .scroll-ul_1_div:nth-child(1)
  width 25% !important
.content-block-scroll-ul_3 li .scroll-ul_1_div
  width 10% !important
.content-block-scroll-ul_3 li .scroll-ul_1_div:nth-child(1)
  width 10% !important
.content-block-scroll-ul_4 li .scroll-ul_1_div
  &:nth-child(1)
    width 30% !important
  &:nth-child(2), &:nth-child(3)
    width 15% !important
  &:nth-child(4), &:nth-child(5)
    width 20% !important
.content-block-scroll-ul_5 li .scroll-ul_1_div
  &:nth-child(1), &:nth-child(2), &:nth-child(4), &:nth-child(5)
    width 18% !important
  &:nth-child(6)
    width 8% !important
  &:nth-child(3), &:nth-child(7)
    width 10% !important
.num_items
  _wh(100%, 100%)
  _fj(space-evenly)
  flex-direction: column
.right_1_up_right_item
  _wh(100%, 31%)
  background center bottom / 100% 100% url(../assets/images/item_3.png) no-repeat
  _fj(space-evenly)
  flex-direction column
  margin-bottom 3.5%
  &:last-child
    margin-bottom 0
.right_1_up_p1
  display flex
  align-items center
  height 50%
  _font(.2rem, 1, #78B1DE, 700, center)
.right_1_up_p2
  display flex
  align-items center
  height 50%
  _font(.22rem, 1, #fff, 700, center)
.echart_wrap_l
  _fj()
  _wh(70%, 100%)
  padding-right .4rem
  background right center / .02rem 100% url(../assets/images/item_4.png) no-repeat
.echart_wrap_l_l
  _wh(50%, 100%)
  padding-right .4rem
.echart_wrap_l_wrap
  _wh(50%, 100%)
.echart_wrap_r
  _wh(30%, 100%)
  padding-left .2rem
  _fj(,flex-start)
  flex-direction column
.right_1_down_inner_3_i
  _wh(100%, .39rem)
  _fj()
  background center bottom / 100% 100% url(../assets/images/item_5.png) no-repeat
.right_1_down_inner_3_l
  _wh(60%, 100%)
  overflow hidden
  clear both
  span
    display block
    float left
    &:nth-child(1)
      _wh(.0725rem, .39rem)
      margin-left .15rem
      _fj()
      overflow hidden
      i
        display block
        _wh(.0725rem, .0725rem)
        border-radius 100%
    &:nth-child(2)
      _wh(calc(100% - 0.2825rem), .39rem)
      font-family "SourceHanSansCN"
      _font(.14rem, .39rem, #fff,400,)
      margin-left .06rem
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
.right_1_down_inner_3_r
  _wh(40%, 100%)
  line-height .39rem
  overflow hidden
  text-align right
  span
    font-family "SourceHanSansCN"
    _font(.14rem, .39rem, #fff,700,)
    &:nth-child(1)
      font-family "SourceHanSansCN"
      _font(.18rem, .39rem, #00D5FF,700,)
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
</style>