<template>
  <section class="container" @click="pkObj = {}">
    <t-header index='3'></t-header>
    <div class="content">
      <div class="item_tr clearfix">
        <div class="item_wrapper_h1">
          <div class="item_block" v-for="(e, i) in HLJ" :key="i">
            <div class="item_inner" @click.stop="getInfo(e)">
              <div class="item_img">
                <img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name">
              </div>
              <div class="device_name clearfix">
                <div class="fl device_name_tag" :class="['gray', 'yellow', 'green', 'orange'][Number(e.device_status)]"></div>
                <div class="fl device_name_text">{{e.device_name}}</div>
              </div>
              <div class="info_block">
                <div v-if="e.material_name !== null && e.material_name !== undefined" class="info_table_block">
                  <div class="info_table">当前生产</div>
                  <div class="info_data">{{e.material_name}}</div>
                </div>
                <div v-if="e.work_time !== null && e.work_time !== undefined" class="info_table_block">
                  <div class="info_table">已工作</div>
                  <div class="info_data">{{e.work_time}}小时</div>
                </div>
                <div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_table_block">
                  <div class="info_table">已生产</div>
                  <div class="info_data">{{e.real_qty}}千克</div>
                </div>
                <div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_table_block">
                  <div class="info_table">当前窑车数</div>
                  <div class="info_data">{{e.vehicle_qty}}车</div>
                </div>
                <div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_table_block">
                  <div class="info_table">容量</div>
                  <div class="info_data">{{e.vehicle_max_qty}}车</div>
                </div>
                <div v-if="e.vehicle_type !== null && e.vehicle_type !== undefined" class="info_table_block">
                  <div class="info_table">载具类型</div>
                  <div class="info_data">{{e.vehicle_type}}</div>
                </div>
                <div class="info_table_block">
                  <div v-if="e.device_status_name !== null && e.device_status_name !== undefined" class="info_table">当前状态</div>
                  <div class="info_data">{{e.device_status_name}}</div>
                </div>
              </div>
            </div>
            <div v-if="e.device_code === pkObj.device_code" class="popover_block" :class="e.position">
              <div class="foldline"></div>
              <div class="popver_bg">
                <div class="popver_block">
                  <div class="pop_info_name">{{pkObj.device_name}}</div>
                  <div class="pop_info_tip">
                    <div class="top_tips">
                      <div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div>
                      <div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}千克</div>
                      <div v-if="pkObj.open_time !== null && pkObj.open_time !== undefined" class="pop_tip">开机时间：{{pkObj.open_time}}</div>
                      <div v-if="pkObj.stand_time !== null && pkObj.stand_time !== undefined" class="pop_tip">待机时间：{{pkObj.stand_time}}</div>
                      <div v-if="pkObj.work_time !== null && pkObj.work_time !== undefined" class="pop_tip">生产时间：{{pkObj.work_time}}</div>
                      <div v-if="pkObj.error_time !== null && pkObj.error_time !== undefined" class="pop_tip">故障时间：{{pkObj.error_time}}</div>
                      <div v-if="pkObj.vehicle_qty !== null && pkObj.vehicle_qty !== undefined" class="pop_tip">当前窑车数：{{pkObj.vehicle_qty}}车</div>
                      <div v-if="pkObj.vehicle_max_qty !== null && pkObj.vehicle_max_qty !== undefined" class="pop_tip">容量：{{pkObj.vehicle_max_qty}}车</div>
                      <div v-if="pkObj.vehicle_type !== null && pkObj.vehicle_type !== undefined" class="pop_tip">载具类型：{{pkObj.vehicle_type}}车</div>
                      <div v-if="pkObj.error_name !== null && pkObj.error_name !== undefined" class="pop_tip">故障信息：{{pkObj.error_name}}</div>
                    </div>
                    <div class="pop_status">
                      <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'orange'][Number(pkObj.device_status)]"></div>
                      <div class="pop_status_text" :class="['fgray', 'fyellow', 'fgreen', 'forange'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div>
                    </div>
                  </div>
                </div>
                <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="item_wrapper_h1">
          <div class="item_block" v-for="(e, i) in YZJ" :key="i">
            <div class="item_inner" @click.stop="getInfo(e)">
              <div class="item_img">
                <img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name">
              </div>
              <div class="device_name clearfix">
                <div class="fl device_name_tag" :class="['gray', 'yellow', 'green', 'orange'][Number(e.device_status)]"></div>
                <div class="fl device_name_text">{{e.device_name}}</div>
              </div>
              <div class="info_block">
                <div v-if="e.material_name !== null && e.material_name !== undefined" class="info_table_block">
                  <div class="info_table">当前生产</div>
                  <div class="info_data">{{e.material_name}}</div>
                </div>
                <div v-if="e.work_time !== null && e.work_time !== undefined" class="info_table_block">
                  <div class="info_table">已工作</div>
                  <div class="info_data">{{e.work_time}}小时</div>
                </div>
                <div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_table_block">
                  <div class="info_table">已生产</div>
                  <div class="info_data">{{e.real_qty}}块</div>
                </div>
                <div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_table_block">
                  <div class="info_table">当前窑车数</div>
                  <div class="info_data">{{e.vehicle_qty}}车</div>
                </div>
                <div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_table_block">
                  <div class="info_table">容量</div>
                  <div class="info_data">{{e.vehicle_max_qty}}车</div>
                </div>
                <div v-if="e.vehicle_type !== null && e.vehicle_type !== undefined" class="info_table_block">
                  <div class="info_table">载具类型</div>
                  <div class="info_data">{{e.vehicle_type}}</div>
                </div>
                <div class="info_table_block">
                  <div v-if="e.device_status_name !== null && e.device_status_name !== undefined" class="info_table">当前状态</div>
                  <div class="info_data">{{e.device_status_name}}</div>
                </div>
              </div>
            </div>
            <div v-if="e.device_code === pkObj.device_code" class="popover_block" :class="e.position">
              <div class="foldline"></div>
              <div class="popver_bg">
                <div class="popver_block">
                  <div class="pop_info_name">{{pkObj.device_name}}</div>
                  <div class="pop_info_tip">
                    <div class="top_tips">
                      <div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div>
                      <div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}块</div>
                      <div v-if="pkObj.open_time !== null && pkObj.open_time !== undefined" class="pop_tip">开机时间：{{pkObj.open_time}}</div>
                      <div v-if="pkObj.stand_time !== null && pkObj.stand_time !== undefined" class="pop_tip">待机时间：{{pkObj.stand_time}}</div>
                      <div v-if="pkObj.work_time !== null && pkObj.work_time !== undefined" class="pop_tip">生产时间：{{pkObj.work_time}}</div>
                      <div v-if="pkObj.error_time !== null && pkObj.error_time !== undefined" class="pop_tip">故障时间：{{pkObj.error_time}}</div>
                      <div v-if="pkObj.vehicle_qty !== null && pkObj.vehicle_qty !== undefined" class="pop_tip">当前窑车数：{{pkObj.vehicle_qty}}车</div>
                      <div v-if="pkObj.vehicle_max_qty !== null && pkObj.vehicle_max_qty !== undefined" class="pop_tip">容量：{{pkObj.vehicle_max_qty}}车</div>
                      <div v-if="pkObj.vehicle_type !== null && pkObj.vehicle_type !== undefined" class="pop_tip">载具类型：{{pkObj.vehicle_type}}车</div>
                      <div v-if="pkObj.error_name !== null && pkObj.error_name !== undefined" class="pop_tip">故障信息：{{pkObj.error_name}}</div>
                    </div>
                    <div class="pop_status">
                      <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'orange'][Number(pkObj.device_status)]"></div>
                      <div class="pop_status_text" :class="['fgray', 'fyellow', 'fgreen', 'forange'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div>
                    </div>
                  </div>
                </div>
                <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="item_wrapper_h1">
          <div class="item_block" v-for="(e, i) in MDJXS" :key="i">
            <div class="item_inner" @click.stop="getInfo(e)">
              <div class="item_img">
                <img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name">
              </div>
              <div class="device_name clearfix">
                <div class="fl device_name_tag" :class="['gray', 'yellow', 'green', 'orange'][Number(e.device_status)]"></div>
                <div class="fl device_name_text">{{e.device_name}}</div>
              </div>
              <div class="info_block">
                <div v-if="e.material_name !== null && e.material_name !== undefined" class="info_table_block">
                  <div class="info_table">当前生产</div>
                  <div class="info_data">{{e.material_name}}</div>
                </div>
                <div v-if="e.work_time !== null && e.work_time !== undefined" class="info_table_block">
                  <div class="info_table">已工作</div>
                  <div class="info_data">{{e.work_time}}小时</div>
                </div>
                <div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_table_block">
                  <div class="info_table">已生产</div>
                  <div class="info_data">{{e.real_qty}}块</div>
                </div>
                <div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_table_block">
                  <div class="info_table">当前窑车数</div>
                  <div class="info_data">{{e.vehicle_qty}}车</div>
                </div>
                <div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_table_block">
                  <div class="info_table">容量</div>
                  <div class="info_data">{{e.vehicle_max_qty}}车</div>
                </div>
                <div v-if="e.vehicle_type !== null && e.vehicle_type !== undefined" class="info_table_block">
                  <div class="info_table">载具类型</div>
                  <div class="info_data">{{e.vehicle_type}}</div>
                </div>
                <div class="info_table_block">
                  <div v-if="e.device_status_name !== null && e.device_status_name !== undefined" class="info_table">当前状态</div>
                  <div class="info_data">{{e.device_status_name}}</div>
                </div>
              </div>
            </div>
            <div v-if="e.device_code === pkObj.device_code" class="popover_block" :class="e.position">
              <div class="foldline"></div>
              <div class="popver_bg">
                <div class="popver_block">
                  <div class="pop_info_name">{{pkObj.device_name}}</div>
                  <div class="pop_info_tip">
                    <div class="top_tips">
                      <div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div>
                      <div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}块</div>
                      <div v-if="pkObj.open_time !== null && pkObj.open_time !== undefined" class="pop_tip">开机时间：{{pkObj.open_time}}</div>
                      <div v-if="pkObj.stand_time !== null && pkObj.stand_time !== undefined" class="pop_tip">待机时间：{{pkObj.stand_time}}</div>
                      <div v-if="pkObj.work_time !== null && pkObj.work_time !== undefined" class="pop_tip">生产时间：{{pkObj.work_time}}</div>
                      <div v-if="pkObj.error_time !== null && pkObj.error_time !== undefined" class="pop_tip">故障时间：{{pkObj.error_time}}</div>
                      <div v-if="pkObj.vehicle_qty !== null && pkObj.vehicle_qty !== undefined" class="pop_tip">当前窑车数：{{pkObj.vehicle_qty}}车</div>
                      <div v-if="pkObj.vehicle_max_qty !== null && pkObj.vehicle_max_qty !== undefined" class="pop_tip">容量：{{pkObj.vehicle_max_qty}}车</div>
                      <div v-if="pkObj.vehicle_type !== null && pkObj.vehicle_type !== undefined" class="pop_tip">载具类型：{{pkObj.vehicle_type}}车</div>
                      <div v-if="pkObj.error_name !== null && pkObj.error_name !== undefined" class="pop_tip">故障信息：{{pkObj.error_name}}</div>
                    </div>
                    <div class="pop_status">
                      <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'orange'][Number(pkObj.device_status)]"></div>
                      <div class="pop_status_text" :class="['fgray', 'fyellow', 'fgreen', 'forange'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div>
                    </div>
                  </div>
                </div>
                <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="item_wrapper_h1">
          <div class="item_block" v-for="(e, i) in YAO" :key="i">
              <div class="item_inner" @click.stop="getInfo(e)">
                <div class="item_img">
                  <img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name">
                </div>
                <div class="device_name clearfix">
                  <div class="fl device_name_tag" :class="['gray', 'yellow', 'green', 'orange'][Number(e.device_status)]"></div>
                  <div class="fl device_name_text">{{e.device_name}}</div>
                </div>
                <div class="info_block">
                  <div v-if="e.material_name !== null && e.material_name !== undefined" class="info_table_block">
                    <div class="info_table">当前生产</div>
                    <div class="info_data">{{e.material_name}}</div>
                  </div>
                  <div v-if="e.work_time !== null && e.work_time !== undefined" class="info_table_block">
                    <div class="info_table">已工作</div>
                    <div class="info_data">{{e.work_time}}小时</div>
                  </div>
                  <div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_table_block">
                    <div class="info_table">已生产</div>
                    <div class="info_data">{{e.real_qty}}块</div>
                  </div>
                  <div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_table_block">
                    <div class="info_table">当前窑车数</div>
                    <div class="info_data">{{e.vehicle_qty}}车</div>
                  </div>
                  <div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_table_block">
                    <div class="info_table">容量</div>
                    <div class="info_data">{{e.vehicle_max_qty}}车</div>
                  </div>
                  <div v-if="e.vehicle_type !== null && e.vehicle_type !== undefined" class="info_table_block">
                    <div class="info_table">载具类型</div>
                    <div class="info_data">{{e.vehicle_type}}</div>
                  </div>
                  <div class="info_table_block">
                    <div v-if="e.device_status_name !== null && e.device_status_name !== undefined" class="info_table">当前状态</div>
                    <div class="info_data">{{e.device_status_name}}</div>
                  </div>
                </div>
              </div>
              <div v-if="e.device_code === pkObj.device_code" class="popover_block" :class="e.position">
                <div class="foldline"></div>
                <div class="popver_bg">
                  <div class="popver_block">
                    <div class="pop_info_name">{{pkObj.device_name}}</div>
                    <div class="pop_info_tip">
                      <div class="top_tips">
                        <div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div>
                        <div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}块</div>
                        <div v-if="pkObj.open_time !== null && pkObj.open_time !== undefined" class="pop_tip">开机时间：{{pkObj.open_time}}</div>
                        <div v-if="pkObj.stand_time !== null && pkObj.stand_time !== undefined" class="pop_tip">待机时间：{{pkObj.stand_time}}</div>
                        <div v-if="pkObj.work_time !== null && pkObj.work_time !== undefined" class="pop_tip">生产时间：{{pkObj.work_time}}</div>
                        <div v-if="pkObj.error_time !== null && pkObj.error_time !== undefined" class="pop_tip">故障时间：{{pkObj.error_time}}</div>
                        <div v-if="pkObj.vehicle_qty !== null && pkObj.vehicle_qty !== undefined" class="pop_tip">当前窑车数：{{pkObj.vehicle_qty}}车</div>
                        <div v-if="pkObj.vehicle_max_qty !== null && pkObj.vehicle_max_qty !== undefined" class="pop_tip">容量：{{pkObj.vehicle_max_qty}}车</div>
                        <div v-if="pkObj.vehicle_type !== null && pkObj.vehicle_type !== undefined" class="pop_tip">载具类型：{{pkObj.vehicle_type}}车</div>
                        <div v-if="pkObj.error_name !== null && pkObj.error_name !== undefined" class="pop_tip">故障信息：{{pkObj.error_name}}</div>
                      </div>
                      <div class="pop_status">
                        <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'orange'][Number(pkObj.device_status)]"></div>
                        <div class="pop_status_text" :class="['fgray', 'fyellow', 'fgreen', 'forange'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div>
                      </div>
                    </div>
                  </div>
                  <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
                </div>
              </div>
            </div>
        </div>
        <div class="item_wrapper_h1">
          <div class="item_block" v-for="(e, i) in FJJXS" :key="i">
              <div class="item_inner" @click.stop="getInfo(e)">
                <div class="item_img">
                  <img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name">
                </div>
                <div class="device_name clearfix">
                  <div class="fl device_name_tag" :class="['gray', 'yellow', 'green', 'orange'][Number(e.device_status)]"></div>
                  <div class="fl device_name_text">{{e.device_name}}</div>
                </div>
                <div class="info_block">
                  <div v-if="e.material_name !== null && e.material_name !== undefined" class="info_table_block">
                    <div class="info_table">当前生产</div>
                    <div class="info_data">{{e.material_name}}</div>
                  </div>
                  <div v-if="e.work_time !== null && e.work_time !== undefined" class="info_table_block">
                    <div class="info_table">已工作</div>
                    <div class="info_data">{{e.work_time}}小时</div>
                  </div>
                  <div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_table_block">
                    <div class="info_table">已生产</div>
                    <div class="info_data">{{e.real_qty}}块</div>
                  </div>
                  <div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_table_block">
                    <div class="info_table">当前窑车数</div>
                    <div class="info_data">{{e.vehicle_qty}}车</div>
                  </div>
                  <div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_table_block">
                    <div class="info_table">容量</div>
                    <div class="info_data">{{e.vehicle_max_qty}}车</div>
                  </div>
                  <div v-if="e.vehicle_type !== null && e.vehicle_type !== undefined" class="info_table_block">
                    <div class="info_table">载具类型</div>
                    <div class="info_data">{{e.vehicle_type}}</div>
                  </div>
                  <div class="info_table_block">
                    <div v-if="e.device_status_name !== null && e.device_status_name !== undefined" class="info_table">当前状态</div>
                    <div class="info_data">{{e.device_status_name}}</div>
                  </div>
                </div>
              </div>
              <div v-if="e.device_code === pkObj.device_code" class="popover_block" :class="e.position">
                <div class="foldline"></div>
                <div class="popver_bg">
                  <div class="popver_block">
                    <div class="pop_info_name">{{pkObj.device_name}}</div>
                    <div class="pop_info_tip">
                      <div class="top_tips">
                        <div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div>
                        <div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}块</div>
                        <div v-if="pkObj.open_time !== null && pkObj.open_time !== undefined" class="pop_tip">开机时间：{{pkObj.open_time}}</div>
                        <div v-if="pkObj.stand_time !== null && pkObj.stand_time !== undefined" class="pop_tip">待机时间：{{pkObj.stand_time}}</div>
                        <div v-if="pkObj.work_time !== null && pkObj.work_time !== undefined" class="pop_tip">生产时间：{{pkObj.work_time}}</div>
                        <div v-if="pkObj.error_time !== null && pkObj.error_time !== undefined" class="pop_tip">故障时间：{{pkObj.error_time}}</div>
                        <div v-if="pkObj.vehicle_qty !== null && pkObj.vehicle_qty !== undefined" class="pop_tip">当前窑车数：{{pkObj.vehicle_qty}}车</div>
                        <div v-if="pkObj.vehicle_max_qty !== null && pkObj.vehicle_max_qty !== undefined" class="pop_tip">容量：{{pkObj.vehicle_max_qty}}车</div>
                        <div v-if="pkObj.vehicle_type !== null && pkObj.vehicle_type !== undefined" class="pop_tip">载具类型：{{pkObj.vehicle_type}}车</div>
                        <div v-if="pkObj.error_name !== null && pkObj.error_name !== undefined" class="pop_tip">故障信息：{{pkObj.error_name}}</div>
                      </div>
                      <div class="pop_status">
                        <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'orange'][Number(pkObj.device_status)]"></div>
                        <div class="pop_status_text" :class="['fgray', 'fyellow', 'fgreen', 'forange'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div>
                      </div>
                    </div>
                  </div>
                  <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
                </div>
              </div>
            </div>
        </div>
        <div class="item_wrapper_h1">
          <div class="item_block" v-for="(e, i) in BZX" :key="i">
              <div class="item_inner" @click.stop="getInfo(e)">
                <div class="item_img">
                  <img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name">
                </div>
                <div class="device_name clearfix">
                  <div class="fl device_name_tag" :class="['gray', 'yellow', 'green', 'orange'][Number(e.device_status)]"></div>
                  <div class="fl device_name_text">{{e.device_name}}</div>
                </div>
                <div class="info_block">
                  <div v-if="e.material_name !== null && e.material_name !== undefined" class="info_table_block">
                    <div class="info_table">当前生产</div>
                    <div class="info_data">{{e.material_name}}</div>
                  </div>
                  <div v-if="e.work_time !== null && e.work_time !== undefined" class="info_table_block">
                    <div class="info_table">已工作</div>
                    <div class="info_data">{{e.work_time}}小时</div>
                  </div>
                  <div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_table_block">
                    <div class="info_table">已生产</div>
                    <div class="info_data">{{e.real_qty}}块</div>
                  </div>
                  <div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_table_block">
                    <div class="info_table">当前窑车数</div>
                    <div class="info_data">{{e.vehicle_qty}}车</div>
                  </div>
                  <div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_table_block">
                    <div class="info_table">容量</div>
                    <div class="info_data">{{e.vehicle_max_qty}}车</div>
                  </div>
                  <div v-if="e.vehicle_type !== null && e.vehicle_type !== undefined" class="info_table_block">
                    <div class="info_table">载具类型</div>
                    <div class="info_data">{{e.vehicle_type}}</div>
                  </div>
                  <div class="info_table_block">
                    <div v-if="e.device_status_name !== null && e.device_status_name !== undefined" class="info_table">当前状态</div>
                    <div class="info_data">{{e.device_status_name}}</div>
                  </div>
                </div>
              </div>
              <div v-if="e.device_code === pkObj.device_code" class="popover_block" :class="e.position">
                <div class="foldline"></div>
                <div class="popver_bg">
                  <div class="popver_block">
                    <div class="pop_info_name">{{pkObj.device_name}}</div>
                    <div class="pop_info_tip">
                      <div class="top_tips">
                        <div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div>
                        <div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}块</div>
                        <div v-if="pkObj.open_time !== null && pkObj.open_time !== undefined" class="pop_tip">开机时间：{{pkObj.open_time}}</div>
                        <div v-if="pkObj.stand_time !== null && pkObj.stand_time !== undefined" class="pop_tip">待机时间：{{pkObj.stand_time}}</div>
                        <div v-if="pkObj.work_time !== null && pkObj.work_time !== undefined" class="pop_tip">生产时间：{{pkObj.work_time}}</div>
                        <div v-if="pkObj.error_time !== null && pkObj.error_time !== undefined" class="pop_tip">故障时间：{{pkObj.error_time}}</div>
                        <div v-if="pkObj.vehicle_qty !== null && pkObj.vehicle_qty !== undefined" class="pop_tip">当前窑车数：{{pkObj.vehicle_qty}}车</div>
                        <div v-if="pkObj.vehicle_max_qty !== null && pkObj.vehicle_max_qty !== undefined" class="pop_tip">容量：{{pkObj.vehicle_max_qty}}车</div>
                        <div v-if="pkObj.vehicle_type !== null && pkObj.vehicle_type !== undefined" class="pop_tip">载具类型：{{pkObj.vehicle_type}}车</div>
                        <div v-if="pkObj.error_name !== null && pkObj.error_name !== undefined" class="pop_tip">故障信息：{{pkObj.error_name}}</div>
                      </div>
                      <div class="pop_status">
                        <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'orange'][Number(pkObj.device_status)]"></div>
                        <div class="pop_status_text" :class="['fgray', 'fyellow', 'fgreen', 'forange'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div>
                      </div>
                    </div>
                  </div>
                  <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
    <div class="tag_block">
      <div class="tag_type">
        <div class="type_color gray"></div>
        <div class="tag_text">关机</div>
      </div>
      <div class="tag_type">
        <div class="type_color yellow"></div>
        <div class="tag_text">待机</div>
      </div>
      <div class="tag_type">
        <div class="type_color green"></div>
        <div class="tag_text">生产中</div>
      </div>
      <div class="tag_type">
        <div class="type_color orange"></div>
        <div class="tag_text">故障</div>
      </div>
    </div>
  </section>
</template>

<script>
import THeader from '@components/header.vue'
import { deviceMonitor } from '@js/getData2'
export default {
  name: 'DeviceMonitor',
  components: {
    THeader
  },
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      deviceDatas: [],
      pkObj: {},
      HLJ: [], // 混料16，压机10，码垛机械手3台，窑设备3台，分拣机械手2台、包装线3台
      YZJ: [],
      MDJXS: [],
      YAO: [],
      FJJXS: [],
      BZX: []
    }
  },
  created () {
    this.initData()
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        this.initData()
      }, this.interTime)
    },
    async initData () {
      let res = await deviceMonitor()
      if (res.code === 200) {
        this.deviceDatas = [...res.result]
        this.HLJ = [...res.result.HLJ]
        this.YZJ = [...res.result.YZJ]
        this.MDJXS = [...res.result.MDJXS]
        this.YAO = [...res.result.YAO]
        this.FJJXS = [...res.result.FJJXS]
        this.BZX = [...res.result.BZX]
        this.addPosition(this.HLJ)
        this.addPosition(this.YZJ)
        this.addPosition(this.MDJXS)
        this.addPosition(this.YAO)
        this.addPosition(this.FJJXS)
        this.addPosition(this.BZX)
      } else {
        this.toast(res.desc)
      }
    },
    addPosition (arr) {
      for (let i = 0; i < arr.length; i++) {
        if (arr.length <= 11) {
          arr[i].position = 'position_r_1'
        } else if (arr.length === 12) {
          if (i < 1) {
            arr[i].position = 'position_l_1'
          } else {
            arr[i].position = 'position_r_1'
          }
        } else if (arr.length === 13) {
          if (i < 2) {
            arr[i].position = 'position_l_1'
          } else {
            arr[i].position = 'position_r_1'
          }
        } else if (arr.length === 14) {
          if (i < 3) {
            arr[i].position = 'position_l_1'
          } else {
            arr[i].position = 'position_r_1'
          }
        } else if (arr.length === 15) {
          if (i < 4) {
            arr[i].position = 'position_l_1'
          } else {
            arr[i].position = 'position_r_1'
          }
        } else if (arr.length === 16) {
          if (i < 5) {
            arr[i].position = 'position_l_1'
          } else {
            arr[i].position = 'position_r_1'
          }
        }
      }
    },
    getInfo (e) {
      this.pkObj = e
    },
    closebtn () {
      this.pkObj = {}
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
.container
  _wh(100%, 100%)
.close_btn
  position absolute
  top 2px
  right 8px
  font-size 14px
  line-height 34px
  padding 0 16px
  border-radius 5px
  cursor pointer
.content
  width 100%
  height calc(100% - 84px)
.item_tr
  width 100%
  height auto
  padding 34px .5% 15px .5%
  _fj(,center)
.item_wrapper_h1
  width 100%
  _fj(row,flex-end)
.item_block
  position relative
  width 6.0625%
  padding 4px 4px 0 4px
  margin-bottom 0.4%
  margin-right 0.2%
  background center center / 100% 100% url(../assets/images/bg_item.png) no-repeat
  &:nth-child(10n)
    margin-right 0
.item_inner
  width 100%
  overflow hidden
.item_img
  _wh(96%,74px)
  margin 0 auto 5px auto
  border 1px solid #393F51
  background-color $gray
  img
    _wh(100%,100%)
.device_name_tag
  _wh(10px,10px)
  border-radius 50%
  margin 2px
  background-color #ffffff
.device_name_text
  _font(14px,14px,,,left)
.device_name
  width 100%
  padding 4px 0
.info_block
  _wh(100%, 98px)
  padding 4px 0
  overflow hidden
.info_table_block
  width 100%
  _fj(row,,flex-start)
.info_table
  width 60px
  max-height 54px
  overflow hidden
  _font(12px,18px,,100,left)
.info_data
  width calc(100% - 64px)
  max-height 54px
  overflow hidden
  _font(12px,18px,,200,right)
  word-break break-all
.popover_block
  position absolute
  top 0
  z-index 100
  _wh(474px, 288px)
.foldline
  position absolute
  z-index 102
  _wh(127px,105px)
  _bis('../assets/images/dot_line.png')
.popver_bg
  position absolute
  z-index 101
  _wh(364px,288px)
  padding 20px 18px 36px 10px
  overflow hidden
  _bis('../assets/images/popover_1.png')
// 弹窗在第一行左侧1-6列情况
.position_l_1
  left 54%
  .foldline
    left 0
    top 35px
    transform rotateY(180deg)
  .popver_bg
    right 0
    top -20px
.position_r_1
  right 54%
  .foldline
    right 0
    top 35px
    transform rotateY(0deg)
  .popver_bg
    left 0
    top -20px
.popver_block
  padding 14px 0 0 12px
  background top center / 100% 18px url(../assets/images/popover_line.png) no-repeat
  _wh(100%,100%)
  overflow hidden
.pop_info_name
  width 100%
  _font(14px,20px,#32C5FF,,left)
  text-shadow 2px 2px 4px #A6E6FF
  margin-bottom 8px
.pop_info_tip
  _wh(100%, calc(100% - 28px))
  overflow-y auto
  _fj(row,,flex-start)
.pop_status
  _wh(100px, 28px)
  _fj(row,flex-end)
.top_tips
  width calc(100% - 100px)
.pop_tip
  font-size 14px
  line-height 28px
.pop_status_dot
  width 10px
  height 10px
  border-radius 50%
  background-color #fff
.pop_status_text
  font-size 14px
  line-height 28px
  color #fff
  margin-left 5px
.pop_table
  width 100%
  margin-top 10px
  border-collapse separate
  border 1px solid #2595DE
  border-spacing 0
  border-radius 4px 4px 0 0
  tr
    th
      opacity 0.7
      _font(12px,32px,rgba(255,255,255,0.60))
      background #3D6CAA
      padding 0 10px
      border-right 1px solid #2595DE
      border-bottom 1px solid #2595DE
      &:nth-child(1)
        text-align left
      &:last-child
        border-right none
    td
      _font(12px,14px)
      height 36px
      vertical-align middle
      padding 0 10px
      border-right 1px solid #2595DE
      border-bottom 1px solid #2595DE
      &:nth-child(1)
        text-align left
      &:last-child
        border-right none
    &:last-child td
        border-bottom none
.tag_block
  position fixed
  bottom 20px
  right 54px
  _fj(row, flex-end)
.tag_type
  height 16px
  _fj(row)
  margin-left 30px
.type_color
  width 14px
  height 14px
  border-radius 50%
  margin-right 10px
.tag_text
  _font(16px,16px,,,left)
.green
  background-color $green2
.yellow
  background-color $yellow
.gray
  background-color $gray1
.orange
  background-color $orange
.fgreen
  color $green2
.fyellow
  color $yellow
.fgray
  color $gray1
.forange
  color $orange
</style>
