<template>
  <section>
    <t-header index='0'></t-header>
    <div class="content clearfix">
      <div class="fl block_left">
        <div class="item_block block_1">
          <div class="border-top"></div>
          <div class="dot_top"></div>
          <div class="echart_item">
            <div id="echart_d1" style="width: 100%;height:100%;"></div>
          </div>
        </div>
        <div class="item_block block_1">
          <div class="border-top"></div>
          <div class="dot_top"></div>
          <div class="echart_item">
            <div id="echart_d2" style="width: 100%;height:100%;"></div>
          </div>
        </div>
        <div class="item_block block_2">
          <div class="border-top"></div>
          <div class="dot_top"></div>
          <h2>最近五个故障设备</h2>
          <div class="scroll_item">
            <ul class="scroll_tab">
              <li>故障时间</li>
              <li>设备编号</li>
              <li>设备名称</li>
              <li>当前状态</li>
            </ul>
            <div class="scroll_container">
              <vue-seamless-scroll :data="deviceRows" :class-option="defaultOption">
                <ul class="content-block-scroll-ul">
                  <li v-for="(e, i) in deviceRows" :key="i">
                    <div><p>{{e.faultyTime}}</p></div>
                    <div><p>{{e.deviceCode}}</p></div>
                    <div><p>{{e.deviceName}}</p></div>
                    <div><p>{{['暂停', '运行', '故障', '关机'][Number(e.pointStatus) - 1]}}</p></div>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </div>
        </div>
        </div>
      </div>
      <div class="fr block_right">
        <div class="workshop">
          <div class="line_test">
            <div class="workshop_bg">
              <div class="hr_abs hr1">
                <div class="guan guan1" v-for="(e, i) in area2" :key="i" :class="['', 'a_1', 'a_2', 'a_3', 'a_4', 'a_5'][Number(e.status)]" @click="getInfo('2', e)"></div>
              </div>
              <div class="hr_abs hr2">
                <div class="guan guan1" v-for="(e, i) in area3" :key="i" :class="['', 'a_1', 'a_2', 'a_3', 'a_4', 'a_5'][Number(e.status)]" @click="getInfo('2', e)"></div>
              </div>
              <div class="hr_abs hr3">
                <div class="guan guan1"  v-for="(e, i) in area4" :key="i" :class="['', 'a_1', 'a_2', 'a_3', 'a_4', 'a_5'][Number(e.status)]" @click="getInfo('2', e)"></div>
              </div>
              <div class="hr_abs hr4">
                <div class="hnj_item" v-for="e in area1" :key="e.device_uuid">
                  <div class="jiazi"></div>
                  <div class="guan guan2"></div>
                  <div class="hnj" :class="'nj_' + e.status" @click="getInfo('1', e)"></div>
                </div>
              </div>
              <div v-if="area5.length > 0" class="hr_abs hr5">
                <div class="yam_item">
                  <div class="yam_bg"></div>
                  <div class="yam_left yal1_4"></div>
                  <div class="yam_right yar1_4"></div>
                  <div class="yam_inner yai1_4"></div>
                </div>
                <div class="yam_item" v-for="(e, i) in area5" :key="i">
                  <div class="yam_bg"></div>
                  <div class="yam_left" :class="'yal1_' + e.press.leftpress.status" @click="getInfo('1', e.press.leftpress)"></div>
                  <div class="yam_right" :class="'yar1_' + e.press.rightpress.status" @click="getInfo('1', e.press.rightpress)"></div>
                  <div class="yam_inner" :class="'yai1_' + e.robot.status" @click="getInfo('1', e.robot)"></div>
                  <div v-if="e.presspoint.MP01.status === '1'" class="yam_mtp_l"></div>
                  <div v-if="e.presspoint.MD01.status === '1'" class="yam_mtp_l yam_mtp_l1"></div>
                  <div v-if="e.presspoint.MP02.status === '1'" class="yam_mtp_r"></div>
                  <div v-if="e.presspoint.MD02.status === '1'" class="yam_mtp_r yam_mtp_r1"></div>
                  <div v-if="e.presspoint.MDJXSKD.status === '2'" class="yam_ktp"></div>
                </div>
                <div class="yam_item">
                  <div class="yam_bg"></div>
                  <div class="yam_left yal1_4"></div>
                  <div class="yam_right yar1_4"></div>
                  <div class="yam_inner yai1_4"></div>
                </div>
              </div>
              <div v-if="area6.truss.length > 0" class="hr_abs hr6" :style="{'left': area6.truss[0].x}">
                <div class="diaoz" :class="'dz_' + area6.truss[0].status" @click="getInfo('1', area6.truss[0])"></div>
              </div>
              <div v-if="area7.length > 0" class="hr_abs hr7">
                <div class="kyc" v-for="e in goods.slice(0,area7[4].vehicle_num)" :key="e.id"></div>
              </div>
              <div v-if="area7.length > 0" class="hr_abs hr8">
                <div class="mtp" v-for="e in goods.slice(0,area7[5].vehicle_num)" :key="e.id"></div>
              </div>
              <div v-if="area7.length > 0" class="hr_abs hr9">
                <div class="yao" :class="'yao1_' + area7[0].status" @click="getInfo('1', area7[0])"></div>
              </div>
              <div class="hr_abs hr10">
                <div class="yao yao1_4"></div>
              </div>
              <div v-if="area7.length > 0" class="hr_abs hr11">
                <div class="mtp" v-for="e in goods.slice(0,area7[0].vehicle_num)" :key="e.id"></div>
              </div>
              <div v-if="area7.length > 0" class="hr_abs hr12">
                <div class="mtp" v-for="e in goods.slice(0,area7[2].vehicle_num)" :key="e.id"></div>
              </div>
              <div v-if="area7.length > 0" class="hr_abs hr23">
                <div class="mtp" v-for="e in goods.slice(0,area7[1].vehicle_num)" :key="e.id"></div>
              </div>
              <div v-if="area7.length > 0" class="hr_abs hr24">
                <div class="mtp" v-for="e in goods.slice(0,area7[3].vehicle_num)" :key="e.id"></div>
              </div>
              <div v-if="area6.trusspoint.length > 0" class="hr_abs hr13">
                <div v-if="area6.trusspoint[0].status === '1'" class="mtp"></div>
              </div>
              <div v-if="area8.headpoint.length > 0" class="hr_abs hr14">
                <div class="kyc" v-for="(e, i) in area8.headpoint" :key="i" :class="{'hide': e.status === '0'}"></div>
              </div>
              <div v-if="area8.head.length > 0" class="hr_abs hr15">
                <div class="dtj" :class="'dtj_' + area8.head[0].status" @click="getInfo('1', area8.head[0])"></div>
              </div>
              <div v-if="area9.length > 0" class="hr_abs hr16" :style="{'left': area9[0].x}">
                <div class="bdc" :class="'bdc_' + area9[0].status" @click="getInfo('1', area9[0])"></div>
              </div>
              <div class="hr_abs hr20">
                <div class="mtp2_block" v-for="(e,i) in area10" :key="i">
                  <div class="mtp2" v-for="(el,i) in e.mpoint" :key="i" :class="{'hide': el.status === '0'}"></div>
                </div>
              </div>
              <div class="hr_abs hr17">
                <div class="jxs1" v-for="(e, i) in area10" :key="i" :class="'jxs1_' + e.crobot.status" @click="getInfo('1', e.crobot)"></div>
              </div>
              <div class="hr_abs hr18">
                <div class="jxs2" v-for="(e, i) in area10" :key="i" :class="'jxs1_' + e.mrobot.status" @click="getInfo('1', e.mrobot)"></div>
              </div>
              <div class="hr_abs hr19">
                <div class="mtp_block" v-for="(e, i) in area10" :key="i">
                  <div class="mtp" v-for="(el, i) in e.cpoint" :key="i" :class="{'hide': el.status === '0'}"></div>
                </div>
              </div>
              <div class="hr_abs hr21">
                <div class="guding"></div>
                <div class="guding"></div>
                <div class="guding"></div>
                <div class="guding"></div>
              </div>
              <div class="hr_abs hr22" :style="{'left': area11.agv1.web_x_coor, 'top': area11.agv1.web_y_coor}">
                <div class="agv" :class="'agv_' + area11.agv1.angle"></div>
              </div>
              <div class="hr_abs hr22" :style="{'left': area11.agv2.web_x_coor, 'top': area11.agv2.web_y_coor}">
                <div class="agv" :class="'agv_' + area11.agv2.angle"></div>
              </div>
            </div>
          </div>
        </div>
        <!-- 2.3.4货架 -->
        <div class="tag_block clear">
          <div class="fl">
            <div class="tag_type tag_sb">货架：</div>
            <div class="tag_type">
              <div class="type_color green2"></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 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 orange"></div>
              <div class="tag_text">强制完成</div>
            </div>
          </div>
          <div class="fr">
            <div class="tag_type tag_sb">设备：</div>
            <div class="tag_type">
              <div class="type_color green2"></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 gray"></div>
              <div class="tag_text">停机</div>
            </div>
            <div class="tag_type">
              <div class="type_color orange"></div>
              <div class="tag_text">故障</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 混碾机LB0001 -->
    <div v-if="obj.deviceclass_code === 'LB0001'" class="popover_block">
      <div class="popver_bg">
        <div class="popver_block">
          <div class="pop_info_name">{{form.device_name}}</div>
          <div class="pop_info_tip">
            <div v-if="device === '1'" class="pop_status">
              <div class="pop_status_dot" :class="['yellow', 'green2', 'orange', 'gray'][Number(form.status) - 1]"></div>
              <div class="pop_status_text" :class="['fyellow', 'fgreen2', 'forange', 'fgray'][Number(form.status) - 1]">{{['暂停', '运行', '故障', '停机'][Number(form.status) - 1]}}</div>
            </div>
            <div v-if="device === '2'" class="pop_status">
              <div class="pop_status_dot" :class="['green', 'green2', 'yellow', 'orange', 'gray'][Number(form.status) - 1]"></div>
              <div class="pop_status_text" :class="['fgreen', 'fgreen2', 'fyellow', 'forange', 'fgray'][Number(form.status) - 1]">{{['空盅', '静置中', '静置完成', '强制完成', '禁用'][Number(form.status) - 1]}}</div>
            </div>
            <div class="pop_tip">当前生产：{{form.material_name}}</div>
            <div class="pop_tip">已生产：{{form.produce_num}}KG</div>
            <div class="pop_tip">故障信息：{{form.error_info}}</div>
            <table class="pop_table">
              <tr>
                <th width="48%">本日生产</th>
                <th width="26%">已生产数量</th>
                <th>单位</th>
              </tr>
              <tr v-for="(e,i) in allrows1" :key="i">
                <td>{{e.material_name}}</td>
                <td>{{e.produce_num}}</td>
                <td>{{e.unit_name}}</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="iconfont icon-guanbi close_btn" @click="closePop"></div>
      </div>
      <div class="mask" @click="closePop"></div>
    </div>
    <!-- 压力机LB0004、机械手LB0006 -->
    <div v-if="obj.deviceclass_code === 'LB0004' || (obj.deviceclass_code === 'LB0006' && obj.device_code !== 'CDJQR01' && obj.device_code !== 'MDJXS01')" class="popover_block">
      <div class="popver_bg">
        <div class="popver_block">
          <div class="pop_info_name">{{form.device_name}}</div>
          <div class="pop_info_tip">
            <div v-if="device === '1'" class="pop_status">
              <div class="pop_status_dot" :class="['yellow', 'green2', 'orange', 'gray'][Number(form.status) - 1]"></div>
              <div class="pop_status_text" :class="['fyellow', 'fgreen2', 'forange', 'fgray'][Number(form.status) - 1]">{{['暂停', '运行', '故障', '停机'][Number(form.status) - 1]}}</div>
            </div>
            <div v-if="device === '2'" class="pop_status">
              <div class="pop_status_dot" :class="['green', 'green2', 'yellow', 'orange', 'gray'][Number(form.status) - 1]"></div>
              <div class="pop_status_text" :class="['fgreen', 'fgreen2', 'fyellow', 'forange', 'fgray'][Number(form.status) - 1]">{{['空盅', '静置中', '静置完成', '强制完成', '禁用'][Number(form.status) - 1]}}</div>
            </div>
            <div class="pop_tip">当前生产：{{form.material_name}}</div>
            <div class="pop_tip">已生产：{{form.produce_num}}KG</div>
            <div class="pop_tip">故障信息：{{form.error_info}}</div>
            <table class="pop_table">
              <tr>
                <th width="48%">本日生产</th>
                <th width="26%">生产厂家</th>
                <th>已生产（块）</th>
              </tr>
              <tr v-for="(e,i) in allrows2" :key="i">
                <td>{{e.material_name}}</td>
                <td>{{e.factory_name}}</td>
                <td>{{e.produce_num}}</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="iconfont icon-guanbi close_btn" @click="closePop"></div>
      </div>
      <div class="mask" @click="closePop"></div>
    </div>
    <!-- 衍架LB0010 -->
    <div v-if="obj.deviceclass_code === 'LB0010'" class="popover_block">
      <div class="popver_bg">
        <div class="popver_block">
          <div class="pop_info_name">{{form.device_name}}</div>
          <div class="pop_info_tip">
            <div v-if="device === '1'" class="pop_status">
              <div class="pop_status_dot" :class="['yellow', 'green2', 'orange', 'gray'][Number(form.status) - 1]"></div>
              <div class="pop_status_text" :class="['fyellow', 'fgreen2', 'forange', 'fgray'][Number(form.status) - 1]">{{['暂停', '运行', '故障', '停机'][Number(form.status) - 1]}}</div>
            </div>
            <div v-if="device === '2'" class="pop_status">
              <div class="pop_status_dot" :class="['green', 'green2', 'yellow', 'orange', 'gray'][Number(form.status) - 1]"></div>
              <div class="pop_status_text" :class="['fgreen', 'fgreen2', 'fyellow', 'forange', 'fgray'][Number(form.status) - 1]">{{['空盅', '静置中', '静置完成', '强制完成', '禁用'][Number(form.status) - 1]}}</div>
            </div>
            <div class="pop_tip">搬运托盘数：{{form.in_produce_num}}托</div>
            <div class="pop_tip">搬入准备车道：{{form.in_prepare}}托</div>
            <div class="pop_tip">搬入1号窑：{{form.in_first}}托</div>
            <div class="pop_tip">搬入2号窑：{{form.in_second}}托</div>
            <div class="pop_tip">故障信息：{{form.error_info}}</div>
          </div>
        </div>
        <div class="iconfont icon-guanbi close_btn" @click="closePop"></div>
      </div>
      <div class="mask" @click="closePop"></div>
    </div>
    <!-- 空车道LB0011、准备车道LB0012、窑-暂存LB0014 -->
    <!-- <div v-if="obj.deviceclass_code === 'LB0011' || obj.deviceclass_code === 'LB0012' || obj.deviceclass_code === 'LB0014'" class="popover_block">
      <div class="popver_bg">
        <div class="popver_block">
          <div class="pop_info_name">{{form.device_name}}</div>
          <div class="pop_info_tip">
            <div class="pop_status">
              <div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.status) - 1]"></div>
              <div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.status) - 1]}}</div>
            </div>
            <div class="pop_tip">当前窑车数：车</div>
            <div class="pop_tip">容量：车</div>
            <div class="pop_tip">故障信息：{{form.error_info}}</div>
          </div>
        </div>
        <div class="iconfont icon-guanbi close_btn" @click="closePop"></div>
      </div>
      <div class="mask" @click="closePop"></div>
    </div> -->
    <!-- 窑LB0013 -->
    <div v-if="obj.deviceclass_code === 'LB0013'" class="popover_block">
      <div class="popver_bg">
        <div class="popver_block">
          <div class="pop_info_name">{{form.device_name}}</div>
          <div class="pop_info_tip">
            <div v-if="device === '1'" class="pop_status">
              <div class="pop_status_dot" :class="['yellow', 'green2', 'orange', 'gray'][Number(form.status) - 1]"></div>
              <div class="pop_status_text" :class="['fyellow', 'fgreen2', 'forange', 'fgray'][Number(form.status) - 1]">{{['暂停', '运行', '故障', '停机'][Number(form.status) - 1]}}</div>
            </div>
            <div v-if="device === '2'" class="pop_status">
              <div class="pop_status_dot" :class="['green', 'green2', 'yellow', 'orange', 'gray'][Number(form.status) - 1]"></div>
              <div class="pop_status_text" :class="['fgreen', 'fgreen2', 'fyellow', 'forange', 'fgray'][Number(form.status) - 1]">{{['空盅', '静置中', '静置完成', '强制完成', '禁用'][Number(form.status) - 1]}}</div>
            </div>
            <div class="pop_tip">窑1窑车数：{{form.vehicle_num01}}车</div>
            <div class="pop_tip">窑2窑车数： {{form.vehicle_num02}}车</div>
            <div class="pop_tip">故障信息：{{form.error_info}}</div>
            <table class="pop_table">
              <tr>
                <th width="48%">本日生产</th>
                <th width="26%">生产厂家</th>
                <th>已生产（块）</th>
              </tr>
              <tr v-for="(e,i) in allrows2" :key="i">
                <td>{{e.material_name}}</td>
                <td>{{e.factory_name}}</td>
                <td>{{e.produce_num}}</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="iconfont icon-guanbi close_btn" @click="closePop"></div>
      </div>
      <div class="mask" @click="closePop"></div>
    </div>
    <!-- RGVLB0015 -->
    <div v-if="obj.deviceclass_code === 'LB0015'" class="popover_block">
      <div class="popver_bg">
        <div class="popver_block">
          <div class="pop_info_name">{{form.device_name}}</div>
          <div class="pop_info_tip">
            <div v-if="device === '1'" class="pop_status">
              <div class="pop_status_dot" :class="['yellow', 'green2', 'orange', 'gray'][Number(form.status) - 1]"></div>
              <div class="pop_status_text" :class="['fyellow', 'fgreen2', 'forange', 'fgray'][Number(form.status) - 1]">{{['暂停', '运行', '故障', '停机'][Number(form.status) - 1]}}</div>
            </div>
            <div v-if="device === '2'" class="pop_status">
              <div class="pop_status_dot" :class="['green', 'green2', 'yellow', 'orange', 'gray'][Number(form.status) - 1]"></div>
              <div class="pop_status_text" :class="['fgreen', 'fgreen2', 'fyellow', 'forange', 'fgray'][Number(form.status) - 1]">{{['空盅', '静置中', '静置完成', '强制完成', '禁用'][Number(form.status) - 1]}}</div>
            </div>
            <div class="pop_tip">运行状态：{{form.run_type}}</div>
            <div class="pop_tip">完成托盘数：{{form.carrier_num}}托</div>
            <div class="pop_tip">故障信息：{{form.error_info}}</div>
          </div>
        </div>
        <div class="iconfont icon-guanbi close_btn" @click="closePop"></div>
      </div>
      <div class="mask" @click="closePop"></div>
    </div>
    <!-- 拆垛机械手、码垛机械手LB0006 -->
    <div v-if="obj.deviceclass_code === 'LB0006' && obj.device_code === 'CDJQR01'|| obj.device_code === 'MDJXS01'" class="popover_block">
      <div class="popver_bg">
        <div class="popver_block">
          <div class="pop_info_name">{{form.device_name}}</div>
          <div class="pop_info_tip">
            <div v-if="device === '1'" class="pop_status">
              <div class="pop_status_dot" :class="['yellow', 'green2', 'orange', 'gray'][Number(form.status) - 1]"></div>
              <div class="pop_status_text" :class="['fyellow', 'fgreen2', 'forange', 'fgray'][Number(form.status) - 1]">{{['暂停', '运行', '故障', '停机'][Number(form.status) - 1]}}</div>
            </div>
            <div v-if="device === '2'" class="pop_status">
              <div class="pop_status_dot" :class="['green', 'green2', 'yellow', 'orange', 'gray'][Number(form.status) - 1]"></div>
              <div class="pop_status_text" :class="['fgreen', 'fgreen2', 'fyellow', 'forange', 'fgray'][Number(form.status) - 1]">{{['空盅', '静置中', '静置完成', '强制完成', '禁用'][Number(form.status) - 1]}}</div>
            </div>
            <div class="pop_tip">完成托盘数：{{form.carrier_num}}托</div>
            <div class="pop_tip">完成数量：{{form.produce_total_num}}块</div>
            <div class="pop_tip">故障信息：{{form.error_info}}</div>
          </div>
        </div>
        <div class="iconfont icon-guanbi close_btn" @click="closePop"></div>
      </div>
      <div class="mask" @click="closePop"></div>
    </div>
    <!-- 叠盘机LB0016 -->
    <div v-if="obj.deviceclass_code === 'LB0016'" class="popover_block">
      <div class="popver_bg">
        <div class="popver_block">
          <div class="pop_info_name">{{form.device_name}}</div>
          <div class="pop_info_tip">
            <div v-if="device === '1'" class="pop_status">
              <div class="pop_status_dot" :class="['yellow', 'green2', 'orange', 'gray'][Number(form.status) - 1]"></div>
              <div class="pop_status_text" :class="['fyellow', 'fgreen2', 'forange', 'fgray'][Number(form.status) - 1]">{{['暂停', '运行', '故障', '停机'][Number(form.status) - 1]}}</div>
            </div>
            <div v-if="device === '2'" class="pop_status">
              <div class="pop_status_dot" :class="['green', 'green2', 'yellow', 'orange', 'gray'][Number(form.status) - 1]"></div>
              <div class="pop_status_text" :class="['fgreen', 'fgreen2', 'fyellow', 'forange', 'fgray'][Number(form.status) - 1]">{{['空盅', '静置中', '静置完成', '强制完成', '禁用'][Number(form.status) - 1]}}</div>
            </div>
            <div class="pop_tip">完成托盘数：{{form.carrier_num}}托</div>
            <div class="pop_tip">完成垛数：{{form.stack_num}}垛</div>
            <div class="pop_tip">故障信息：{{form.error_info}}</div>
          </div>
        </div>
        <div class="iconfont icon-guanbi close_btn" @click="closePop"></div>
      </div>
      <div class="mask" @click="closePop"></div>
    </div>
    <!-- AGVLB0019 -->
    <div v-if="obj.deviceclass_code === 'LB0019'" class="popover_block">
      <div class="popver_bg">
        <div class="popver_block">
          <div class="pop_info_name">{{form.device_name}}</div>
          <div class="pop_info_tip">
            <div v-if="device === '1'" class="pop_status">
              <div class="pop_status_dot" :class="['yellow', 'green2', 'orange', 'gray'][Number(form.status) - 1]"></div>
              <div class="pop_status_text" :class="['fyellow', 'fgreen2', 'forange', 'fgray'][Number(form.status) - 1]">{{['暂停', '运行', '故障', '停机'][Number(form.status) - 1]}}</div>
            </div>
            <div v-if="device === '2'" class="pop_status">
              <div class="pop_status_dot" :class="['green', 'green2', 'yellow', 'orange', 'gray'][Number(form.status) - 1]"></div>
              <div class="pop_status_text" :class="['fgreen', 'fgreen2', 'fyellow', 'forange', 'fgray'][Number(form.status) - 1]">{{['空盅', '静置中', '静置完成', '强制完成', '禁用'][Number(form.status) - 1]}}</div>
            </div>
            <div class="pop_tip">当前载具：{{form.carrier_no}}</div>
            <div class="pop_tip">当前任务：{{form.task_no}}</div>
            <div class="pop_tip">已完成搬运：{{form.carrier_num}}个</div>
            <div class="pop_tip">剩余电量：{{form.left_electricity}}</div>
            <div class="pop_tip">故障信息：{{form.error_info}}</div>
          </div>
        </div>
        <div class="iconfont icon-guanbi close_btn" @click="closePop"></div>
      </div>
      <div class="mask" @click="closePop"></div>
    </div>
    <!-- 罐LB0002 -->
    <div v-if="obj.deviceclass_code === 'LB0002'" class="popover_block">
      <div class="popver_bg">
        <div class="popver_block">
          <div class="pop_info_name">&nbsp;</div>
          <div class="pop_info_tip">
            <div v-if="device === '1'" class="pop_status">
              <div class="pop_status_dot" :class="['yellow', 'green2', 'orange', 'gray'][Number(form.status) - 1]"></div>
              <div class="pop_status_text" :class="['fyellow', 'fgreen2', 'forange', 'fgray'][Number(form.status) - 1]">{{['暂停', '运行', '故障', '停机'][Number(form.status) - 1]}}</div>
            </div>
            <div v-if="device === '2'" class="pop_status">
              <div class="pop_status_dot" :class="['green', 'green2', 'yellow', 'orange', 'gray'][Number(form.status) - 1]"></div>
              <div class="pop_status_text" :class="['fgreen', 'fgreen2', 'fyellow', 'forange', 'fgray'][Number(form.status) - 1]">{{['空盅', '静置中', '静置完成', '强制完成', '禁用'][Number(form.status) - 1]}}</div>
            </div>
            <div class="pop_tip">货位：{{form.struct_code}}</div>
            <div class="pop_tip">载具： {{form.storagevehicle_code}}</div>
            <div class="pop_tip">物料：{{form.material_code}}</div>
            <div class="pop_tip">名称：{{form.material_name}}</div>
            <div class="pop_tip">重量(kg)：{{form.ivt_qty}}</div>
            <div class="pop_tip">入库时间：{{form.instorage_time}}</div>
            <div class="pop_tip">静置(h)：{{form.finish_times}}</div>
          </div>
        </div>
        <div class="iconfont icon-guanbi close_btn" @click="closePop"></div>
      </div>
      <div class="mask" @click="closePop"></div>
    </div>
  </section>
</template>

<script>
import THeader from '@components/header.vue'
import TCircle from '@components/circle.vue'
import { workshopCondition } from '@js/getData2'
export default {
  name: 'HomePage',
  components: {
    THeader,
    TCircle
  },
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      area1: [],
      area2: [],
      area3: [],
      area4: [],
      area5: [],
      area6: {trusspoint: [], truss: []},
      area7: [],
      area8: {headpoint: [], head: []},
      area9: [],
      area10: [],
      area11: {agv1: {}, agv2: {}},
      goods: [{id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}, {id: 6}, {id: 7}, {id: 8}, {id: 9}, {id: 10}, {id: 11}, {id: 12}, {id: 13}, {id: 14}, {id: 15}, {id: 16}, {id: 17}, {id: 18}, {id: 19}, {id: 20}, {id: 21}, {id: 22}, {id: 23}, {id: 24}, {id: 25}],
      dayRows: [],
      weekRows: [],
      deviceRows: [],
      obj: {},
      device: '',
      form: {},
      allrows1: [],
      allrows2: []
    }
  },
  computed: {
    defaultOption () {
      return {
        step: 0.2, // 数值越大速度滚动越快
        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)
      }
    }
  },
  mounted () {
    // this.initData1()
    this._workshopCondition()
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        // this.initData1()
        this._workshopCondition()
      }, this.interTime)
    },
    async _workshopCondition () {
      let res = await workshopCondition()
      this.dayRows = [...res.result.runningStatus]
      this.weekRows = [...res.result.faultyStatus]
      this.deviceRows = [...res.result.faultyInfo]
      if (this.dayRows.length > 0) {
        this.setEchart1()
      }
      if (this.weekRows.length > 0) {
        this.setEchart2()
      }
    },
    rectClick () {
      var ev = window.event
      // 获取相对于当前所指向对象的位置坐标
      alert('x:' + ev.offsetX + 'y:' + ev.offsetY)
    },
    setEchart1 () {
      let arr1 = []
      let arr2 = []
      let arr3 = []
      this.dayRows.map(el => {
        arr1.push(el.workorder_procedure)
        arr2.push(el.deviceQty)
        arr3.push(el.faultyDevice)
      })
      let option = {
        title: {
          text: '设备故障次数（昨天/今天）',
          x: 10,
          y: 8,
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            lineHeight: 22,
            color: '#fff'
          }
        },
        legend: {
          top: 13,
          left: 243,
          itemGap: 28,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            fontSize: 12,
            color: 'rgba(255,255,255,0.60)',
            lineHeight: 17
          },
          data: ['总设备数', '故障设备数']
        },
        grid: {
          top: 47,
          left: 17,
          right: 15,
          bottom: 9,
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#253249'
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: 'rgba(255,255,255,0.6)',
              margin: 6.2
            }
          },
          axisTick: {
            show: false
          },
          data: arr1
        }],
        yAxis: [{
          type: 'value',
          min: 0,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 2,
            textStyle: {
              fontSize: 12,
              color: 'rgba(255,255,255,0.60)'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255,0.2)'
            }
          }
        }],
        series: [
          {
            name: '总设备数',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              color: '#F7B502'
            },
            data: arr2
          },
          {
            name: '故障设备数',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              color: '#32C5FF'
            },
            barGap: '100%',
            data: arr3
          }
        ]
      }
      let echart = document.getElementById('echart_d1')
      let myChart = this.$echarts.init(echart)
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    setEchart2 () {
      let arr1 = []
      let arr2 = []
      this.weekRows.map(el => {
        arr1.push(el.deviceName)
        arr2.push(el.faultyFrequency)
      })
      let yAxisData = ['TOP1', 'TOP2', 'TOP3', 'TOP4', 'TOP5']
      let option = {
        title: {
          text: '近一周故障次数前五设备',
          x: 10,
          y: 8,
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            lineHeight: 22,
            color: '#fff'
          }
        },
        grid: {
          top: 47,
          left: 17,
          right: 15,
          bottom: 0,
          containLabel: false
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: '#fff',
                align: 'left'
              },
              margin: 0,
              formatter: '{value}\n{a|占位}\n{a|占位}',
              rich: {
                a: {
                  color: 'rgba(255, 255, 255, 0)',
                  lineHeight: 20
                }
              }
            },
            data: yAxisData
          },
          {
            type: 'category',
            inverse: true,
            offset: -50,
            position: 'left',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: '#fff',
                align: 'left'
              },
              formatter: '{value}\n{a|占位}\n{a|占位}',
              rich: {
                a: {
                  color: 'rgba(255, 255, 255, 0)',
                  lineHeight: 20
                }
              }
            },
            data: arr1
          },
          {
            type: 'category',
            inverse: true,
            offset: 0,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              inside: true,
              textStyle: {
                fontSize: 12,
                color: '#8db0ff',
                align: 'right'
              },
              formatter: '{value}\n{a|占位}\n{a|占位}',
              rich: {
                a: {
                  color: 'rgba(255, 255, 255, 0)',
                  lineHeight: 20
                }
              }
            },
            data: arr2
          }
        ],
        xAxis: {
          show: false
        },
        series: [
          {
            type: 'bar',
            data: arr2,
            barWidth: 6,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, ['#0080DE', '#32C5FF'].map((color, offset) => ({color, offset})))
              }
            },
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(0, 205, 236, 0.1)'
            }
          }
        ]
      }
      let echart = document.getElementById('echart_d2')
      let myChart = this.$echarts.init(echart)
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    initData1 () {
      let data = {
        '_SRVNAME': 'service.st.al.realivt',
        '_SRVMETHOD': 'queryDevicesInhomePage',
        '_DATA': JSON.stringify({
          accountId: '-1'
        })
      }
      this
        .$post(data)
        .then(res => {
          if (res.code === '1') {
            this.area1 = res.result.area1.content
            this.area2 = res.result.area2.content
            this.area3 = res.result.area3.content
            this.area4 = res.result.area4.content
            this.area5 = res.result.area5.content
            this.area6 = res.result.area6.content
            this.area7 = res.result.area7.content
            this.area8 = res.result.area8.content
            this.area9 = res.result.area9.content
            this.area10 = res.result.area10.content
            this.area11 = res.result.area11.content
          } else {
            this.toast(res.desc)
          }
        })
    },
    getData (i, obj) {
      let data = {
        '_SRVNAME': 'service.st.al.realivt',
        '_SRVMETHOD': 'queryDeviceByIdInhomePage',
        '_DATA': JSON.stringify({
          accountId: '-1',
          device_uuid: obj.device_uuid
        })
      }
      this
        .$post(data)
        .then(res => {
          if (res.code === '1') {
            this.form = res.result.form
            // if (res.result.hasOwnProperty('allrows1')) {
            //   this.allrows1 = res.result.form.allrows1
            // }
            // if (res.result.hasOwnProperty('allrows2')) {
            //   this.allrows2 = res.result.form.allrows2
            // }
            this.allrows1 = res.result.form.allrows1
            this.allrows2 = res.result.form.allrows2
            this.obj = obj
            this.device = i
          } else {
            this.toast(res.desc)
          }
        })
    },
    getInfo (i, obj) {
      this.getData(i, obj)
    },
    closePop () {
      this.obj = {}
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
.content
  _wh(100% , calc(100% - 84px))
  padding 20px 49px 0
.block_left
  _wh(554px, 100%)
.block_right
  position relative
  _wh(calc(100% - 603px), 924px)
  overflow hidden
.item_block
  position relative
  background #000F2B
  border 1px solid #31384B
.border-top
 position absolute
 top -2px
 left 0
 _wh(100%,1px)
 background #32C5FF
 z-index 2019
.dot_top
 position absolute
 top -5px
 left -5px
 _wh(8px,9px)
 background #32C5FF
 z-index 2020
.block_1
  _wh(100%, 300px)
  margin-bottom 15px
.block_2
  _wh(100%, 294px)
  h2
    _font(16px,22px,,,left)
    margin 12px 0 10px 12px
.scroll_item
  width 100%
  height calc(100% - 44px)
  padding 0 12px
.scroll_tab
  li
    float left
    _font(12px,32px,rgba(255,255,255,0.60))
    background #262F52
    box-sizing border-box
    &:nth-child(1), &:nth-child(2)
      width 30%
    &:nth-child(3), &:nth-child(4)
      width 20%
.scroll_container
  width 100%
  height calc(100% - 32px)
  overflow hidden
.content-block-scroll-ul
  li
    div
      float left
      height 40px
      overflow hidden
      white-space nowrap
      p
        _font(12px,40px,#fff)
      &:nth-child(1), &:nth-child(2)
        width 30%
      &:nth-child(3), &:nth-child(4)
        width 20%
      &:nth-child(4) p
        _font(12px,40px,#F7B502)
    &:nth-child(even) div
      background rgba(38,47,82,0.50)
.tag_block
  position absolute
  width 970px
  bottom 0
  left 50%
  margin-left -485px
.tag_type
  display inline-block
  margin 0 9px
.type_color
  display inline-block
  _wh(10px,10px)
  border-radius 50%
.tag_text
  display inline-block
  _font(14px,20px)
.tag_sb
  margin-right 0
  _font(16px,20px, $green2)
.workshop
  _wh(100%,902px)
  margin 0 auto
.line_test
  _wh(949px, 902px)
  margin 0 auto
  // _bis('../assets/images/homepg/aaa.png')
.workshop_bg
  position relative
  _wh(949px,902px)
  margin 0 auto
  _bis('../assets/images/homepg/1.png')
.hr_abs
  position absolute
.hr1
  width 144px
  top -4px
  left 160px
.hr2
  top 74px
  left 90px
  width 365px
.hr3
  width 324px
  top 74px
  left 520px
.hr4
  width 470px
  top 3px
  left 333px
.hr5
  width 870px
  top 213px
  left 171px
.hr6
  width 22px
  top 336px
  // left 296px
.hr7
  top 372px
  left 407px
.hr8
  top 370px
  left 432px
.hr9
  top 362px
  left 452px
.hr10
  top 362px
  left 547px
.hr11
  top 370px
  left 462px
  height 216px
  overflow hidden
.hr12
  top 602px
  left 462px
  height 168px
  overflow hidden
.hr13
  top 348px
  left 512px
.hr14
  top 705px
  left 386px
  .kyc
    _wh(9px,10px)
    margin-bottom 1px
.hr15
  top 772px
  left 381px
.hr16
  top 775px
  // left 306px
.hr17
  top 793px
  left 417px
.hr18
  top 846px
  left 425px
.hr19
  top 804px
  left 414px
  .mtp
    float left
    margin-right 13px
    &:nth-child(2n)
      margin-right 24px
.mtp_block
  float left
  width 59px
.mtp2_block
  float left
  width 59px
.hr20
  top 843px
  left 409px
.hr21
  top 863px
  left 431px
.hr22
  top 0
  left 0
.hr23
  top 370px
  left 484px
  height 216px
  overflow hidden
.hr24
  top 602px
  left 487px
  height 168px
  overflow hidden
.diaoz
  _wh(22px,26px)
.dz_1
  _bis('../assets/images/homepg/dz1_1.png')
.dz_2
  _bis('../assets/images/homepg/dz1_2.png')
.dz_3
  _bis('../assets/images/homepg/dz1_3.png')
.dz_4
  _bis('../assets/images/homepg/dz1_4.png')
.guan
  _wh(12px,14px)
.a_1
  _bis('../assets/images/homepg/a1_1.png')
.a_2
  _bis('../assets/images/homepg/a1_2.png')
.a_3
  _bis('../assets/images/homepg/a1_3.png')
.a_4
  _bis('../assets/images/homepg/a1_4.png')
.a_5
  _bis('../assets/images/homepg/a1_5.png')
.guan1
  float left
  margin-right 5px
  &:nth-child(2n)
    margin-right 7px
.hnj_item
  position relative
  float left
  _wh(30px,30px)
  margin-right 22px
.jiazi
  _wh(30px,30px)
  _bis('../assets/images/homepg/jz.png')
.guan2
  position absolute
  top 17px
  left 9.5px
  _bis('../assets/images/homepg/a1_2.png')
.hnj
  position absolute
  top 4px
  left 9.5px
  _wh(12px,20px)
.nj_1
  _bis('../assets/images/homepg/nj1_1.png')
.nj_2
  _bis('../assets/images/homepg/nj1_2.png')
.nj_3
  _bis('../assets/images/homepg/nj1_3.png')
.nj_4
  _bis('../assets/images/homepg/nj1_4.png')
.yam_item
  position relative
  float left
  _wh(90px,90px)
  margin-right 64px
.yam_bg
  _wh(90px,90px)
  _bis('../assets/images/homepg/ya1_1.png')
.yam_left
  position absolute
  top -22px
  left -5px
  _wh(44px,78px)
.yal1_1
  _bis('../assets/images/homepg/yal1_1.png')
.yal1_2
  _bis('../assets/images/homepg/yal1_2.png')
.yal1_3
  _bis('../assets/images/homepg/yal1_3.png')
.yal1_4
  _bis('../assets/images/homepg/yal1_4.png')
.yam_right
  position absolute
  top -22px
  left 60px
  _wh(44px,78px)
.yar1_1
  _bis('../assets/images/homepg/yar1_1.png')
.yar1_2
  _bis('../assets/images/homepg/yar1_2.png')
.yar1_3
  _bis('../assets/images/homepg/yar1_3.png')
.yar1_4
  _bis('../assets/images/homepg/yar1_4.png')
.yam_inner
  position absolute
  top 29px
  left 42px
  _wh(12px,20px)
.yai1_1
  _bis('../assets/images/homepg/yai1_1.png')
.yai1_2
  _bis('../assets/images/homepg/yai1_2.png')
.yai1_3
  _bis('../assets/images/homepg/yai1_3.png')
.yai1_4
  _bis('../assets/images/homepg/yai1_4.png')
.yam_mtp_l
  position absolute
  top 41px
  left 22px
  _wh(13px,17px)
  _bis('../assets/images/homepg/mtp.png')
.yam_mtp_l1
  top 58px
  left 22px
.yam_mtp_r
  position absolute
  top 41px
  left 58px
  _wh(13px,17px)
  _bis('../assets/images/homepg/mtp.png')
.yam_mtp_r1
  top 58px
  left 58px
.yam_ktp
  position absolute
  top 64px
  left 42px
  _wh(10px,11px)
  _bis('../assets/images/homepg/ktp.png')
.yao
  _wh(52px,240px)
.yao1_1
  _bis('../assets/images/homepg/yao1_1.png')
.yao1_2
  _bis('../assets/images/homepg/yao1_2.png')
.yao1_3
  _bis('../assets/images/homepg/yao1_3.png')
.yao1_4
  _bis('../assets/images/homepg/yao1_4.png')
.kyc
  _wh(11px,16px)
  _bis('../assets/images/homepg/kyc.png')
  margin-bottom 6px
.mtp
  _wh(11px,11px)
  _bis('../assets/images/homepg/mtp.png')
  margin-bottom 1px
.mtp2
  _wh(11px,11px)
  _bis('../assets/images/homepg/mtp.png')
.dtj
  _wh(17px,21px)
.dtj_1
  _bis('../assets/images/homepg/dtj1_1.png')
.dtj_2
  _bis('../assets/images/homepg/dtj1_2.png')
.dtj_3
  _bis('../assets/images/homepg/dtj1_3.png')
.dtj_4
  _bis('../assets/images/homepg/dtj1_4.png')
.bdc
  _wh(25px,15px)
.bdc_1
  _bis('../assets/images/homepg/bdc1_1.png')
.bdc_2
  _bis('../assets/images/homepg/bdc1_2.png')
.bdc_3
  _bis('../assets/images/homepg/bdc1_3.png')
.bdc_4
  _bis('../assets/images/homepg/bdc1_4.png')
.jxs1
  float left
  _wh(20px,10px)
  margin-right 39px
.jxs1_1
  _bis('../assets/images/homepg/jxs1_1.png')
.jxs1_2
  _bis('../assets/images/homepg/jxs1_2.png')
.jxs1_3
  _bis('../assets/images/homepg/jxs1_3.png')
.jxs1_4
  _bis('../assets/images/homepg/jxs1_4.png')
.jxs2
  float left
  _wh(21px,16px)
  _bis('../assets/images/homepg/jxs2_1.png')
  margin-right 38px
.jxs2_1
  _bis('../assets/images/homepg/jxs2_1.png')
.jxs2_2
  _bis('../assets/images/homepg/jxs2_2.png')
.jxs2_3
  _bis('../assets/images/homepg/jxs2_3.png')
.jxs2_4
  _bis('../assets/images/homepg/jxs2_4.png')
.guding
  float left
  _wh(10px,35px)
  _bis('../assets/images/homepg/6.png')
  margin-right 49px
.agv
  position absolute
  left -21px
  top -19px
  _wh(42px,38px)
.agv_1
  _bis('../assets/images/homepg/agv_z.png')
.agv_2
  _bis('../assets/images/homepg/agv_b.png')
.agv_3
  _bis('../assets/images/homepg/agv_l.png')
.agv_4
  _bis('../assets/images/homepg/agv_r.png')
.popover_block
  position fixed
  left 0
  top 0
  _wh(100%,100%)
  z-index 100000
.mask
  _wh(100%,100%)
  background-color rgba(0,0,0,0.4)
.popver_bg
  position absolute
  left 50%
  top 50%
  _wh(500px,288px)
  margin-left -250px
  margin-top -144px
  padding 20px 18px 36px 10px
  overflow hidden
  _bis('../assets/images/popover_1.png')
.popver_block
  padding 8px 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
  margin-top 8px
.pop_info_tip
  position relative
  height 196px
  overflow-y scroll
.pop_status
  position absolute
  right 0
  top 0
.pop_tip
  font-size 14px
  line-height 28px
.pop_status_dot
  display inline-block
  width 10px
  height 10px
  border-radius 50%
  background-color #fff
.pop_status_text
  display inline-block
  font-size 14px
  color #fff
.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
.close_btn
  position absolute
  top 2px
  right 8px
  font-size 14px
  line-height 34px
  padding 0 16px
  border-radius 5px
  cursor pointer
.green
  background-color $green
.green2
  background-color $green2
.yellow
  background-color $yellow
.gray
  background-color $gray
.orange
  background-color $orange
.fgreen
  color $green
.fgreen2
  color $green2
.fyellow
  color $yellow
.fgray
  color $gray
.forange
  color $orange
@media screen and (max-width:1800px)
  .tag_block
    width 100%
    margin-left -50%
  .tag_type
    margin 0 5px
  .block_left
    _wh(454px, 100%)
  .block_right
    _wh(949px, 924px)
</style>
