<template>
  <section class="container" @click="uid = ''">
    <t-header index='3'></t-header>
    <div class="content">
      <div class="item_tr clearfix">
        <div class="item_block fl" v-for="e in deviceDatas" :key="e.device_code">
          <div class="item_inner" @click.stop="getInfo(e)">
            <div class="item_img">
              <img v-if="e.device_url !== ''" :src="require('../assets/images/devmoni/' + e.device_url + '.jpg')" :alt="e.device_name">
            </div>
            <div class="device_name clearfix">
              <div class="fl device_name_tag" :class="['yellow', 'green', 'orange', 'gray'][Number(e.device_status)]"></div>
              <div class="fl device_name_text">{{e.device_name}}</div>
            </div>
            <div class="info_block clearfix">
              <div class="fl info_table_block">
                <div v-if="e.material_name !== null && e.material_name !== undefined" class="info_table"><p>当前生产：</p></div>
                <div v-if="e.work_time !== null && e.work_time !== undefined" class="info_table"><p>已工作：</p></div>
                <div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_table"><p>已生产：</p></div>
                <div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_table"><p>当前窑车数：</p></div>
                <div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_table"><p>容  量：</p></div>
                <div v-if="e.vehicle_type !== null && e.vehicle_type !== undefined" class="info_table"><p>载具类型：</p></div>
                <div v-if="e.device_status_name !== null && e.device_status_name !== undefined" class="info_table"><p>当前状态：</p></div>
              </div>
              <div class="fr info_data_block">
                <div v-if="e.material_name !== null && e.material_name !== undefined" class="info_data"><p>{{e.material_name}}</p></div>
                <div v-if="e.work_time !== null && e.work_time !== undefined" class="info_data"><p>{{e.work_time}}小时</p></div>
                <div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_data"><p>{{e.real_qty}}KG</p></div>
                <div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_data"><p>{{e.vehicle_qty}}车</p></div>
                <div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_data"><p>{{e.vehicle_max_qty}}车</p></div>
                <div v-if="e.vehicle_type !== null && e.vehicle_type !== undefined" class="info_data"><p>{{e.vehicle_type}}</p></div>
                <div v-if="e.device_status_name !== null && e.device_status_name !== undefined" class="info_data"><p>{{e.device_status_name}}</p></div>
              </div>
            </div>
          </div>
          <div v-if="e.device_code === uid" class="popover_block">
            <div class="foldline" :class="e.postion1"></div>
            <div class="popver_bg" :class="e.postion2">
              <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.device_status) - 1]"></div>
                    <div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
                  </div>
                  <div v-if="form.material_name !== ''" class="pop_tip">当前生产：{{form.material_name}}</div>
                  <div v-if="form.real_qty !== ''" class="pop_tip">已生产：{{form.real_qty}}KG</div>
                  <div v-if="form.vehicle_code !== ''" class="pop_tip">载具：{{form.vehicle_code}}</div>
                  <div v-if="form.instorage_time !== ''" class="pop_tip">入库时间：{{form.instorage_time}}</div>
                  <div v-if="form.vehicle_qty !== ''" class="pop_tip">载具数量：{{form.vehicle_qty}}托</div>
                  <div v-if="form.ivt_weight !== ''" class="pop_tip">重量：{{form.ivt_weight}}</div>
                  <div v-if="form.pallet_qty !== ''" class="pop_tip">搬运托盘数：{{form.pallet_qty}}托</div>
                  <div v-if="form.ready_lane !== ''" class="pop_tip">搬入准备车道：{{form.ready_lane}}托</div>
                  <div v-if="form.move_first_kiln !== ''" class="pop_tip">搬入1号窑：{{form.move_first_kiln}}托</div>
                  <div v-if="form.move_second_kiln !== ''" class="pop_tip">搬入2号窑：{{form.move_second_kiln}}托</div>
                  <div v-if="form.first_kiln_qty !== ''" class="pop_tip">窑1窑车数：{{form.first_kiln_qty}}托</div>
                  <div v-if="form.second_kiln_qty !== ''" class="pop_tip">窑2窑车数：{{form.second_kiln_qty}}托</div>
                  <div v-if="form.mechanical_pallet_qty !== ''" class="pop_tip">完成托盘数：{{form.mechanical_pallet_qty}}车</div>
                  <div v-if="form.mechanical_arm_qty !== ''" class="pop_tip">完成数量：{{form.mechanical_arm_qty}}块</div>
                  <div v-if="form.finish_pallet_qty !== ''" class="pop_tip">完成托盘数：{{form.finish_pallet_qty}}个</div>
                  <div v-if="form.finish_pile_qty !== ''" class="pop_tip">完成跺数：{{form.finish_pile_qty}}垛</div>
                  <div v-if="form.faulty_info !== '' || allrows1.length > 0 || allrows2.length > 0 || allrows3.length > 0" class="pop_tip">故障信息：{{form.faulty_info}}</div>
                  <table v-if="allrows1.length > 0" 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.productionDetails}}</td>
                      <td>{{e.productionQty}}</td>
                      <td>{{e.weightUnitName}}</td>
                    </tr>
                  </table>
                  <table v-if="allrows2.length > 0" 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.productionDetails}}</td>
                      <td>{{e.manufacturer}}</td>
                      <td>{{e.productionQty}}</td>
                    </tr>
                  </table>
                  <table v-if="allrows3.length > 0" class="pop_table">
                    <tr>
                      <th width="48%">本日生产</th>
                      <th width="26%">生产厂家</th>
                      <th>已生产(块)</th>
                    </tr>
                    <tr v-for="(e,i) in allrows3" :key="i">
                      <td>{{e.productionDetails}}</td>
                      <td>{{e.manufacturer}}</td>
                      <td>{{e.productionQty}}</td>
                    </tr>
                  </table>
                </div>
              </div>
              <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
            </div>
          </div>
          <!-- 混碾机LB0001 -->
          <div v-if="e.device_code === uid && e.deviceclass_code === 'LB0001'" class="popover_block">
            <div class="foldline" :class="e.postion1"></div>
            <div class="popver_bg" :class="e.postion2">
              <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.device_status) - 1]"></div>
                    <div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
                  </div>
                  <div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
                  <div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</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="closebtn"></div>
            </div>
          </div>
          <!-- 压力机LB0004、机械手LB0006 -->
          <div v-if="e.device_code === uid && (e.deviceclass_code === 'LB0004' || (e.deviceclass_code === 'LB0006' && e.device_code !== 'CDJQR01' && e.device_code !== 'MDJXS01'))" class="popover_block">
            <div class="foldline" :class="e.postion1"></div>
            <div class="popver_bg" :class="e.postion2">
              <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.device_status) - 1]"></div>
                    <div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
                  </div>
                  <div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
                  <div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</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="closebtn"></div>
            </div>
          </div>
          <!-- 衍架LB0010 -->
          <div v-if="e.device_code === uid && e.deviceclass_code === 'LB0010'" class="popover_block">
            <div class="foldline" :class="e.postion1"></div>
            <div class="popver_bg" :class="e.postion2">
              <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.device_status) - 1]"></div>
                    <div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
                  </div>
                  <div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
                  <div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</div>
                  <div class="pop_tip">故障信息：{{form.error_info}}</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>
              </div>
              <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
            </div>
          </div>
          <!-- 空车道LB0011、准备车道LB0012、窑-暂存LB0014 -->
          <div v-if="e.device_code === uid && (e.deviceclass_code === 'LB0011' || e.deviceclass_code === 'LB0012' || e.deviceclass_code === 'LB0014')" class="popover_block">
            <div class="foldline" :class="e.postion1"></div>
            <div class="popver_bg" :class="e.postion2">
              <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.device_status) - 1]"></div>
                    <div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
                  </div>
                  <div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
                  <div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</div>
                  <div class="pop_tip">故障信息：{{form.error_info}}</div>
                </div>
              </div>
              <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
            </div>
          </div>
          <!-- 窑LB0013 -->
          <div v-if="e.device_code === uid && e.deviceclass_code === 'LB0013'" class="popover_block">
            <div class="foldline" :class="e.postion1"></div>
            <div class="popver_bg" :class="e.postion2">
              <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.device_status) - 1]"></div>
                    <div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
                  </div>
                  <div class="pop_tip">本周用电/气：{{form.week_electricity}}kw.h / {{form.week_gas}} Nm</div>
                  <div class="pop_tip">本月用电/气：{{form.mouth_electricity}}kw.h / {{form.month_gas}} Nm</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="closebtn"></div>
            </div>
          </div>
          <!-- RGVLB0015 -->
          <div v-if="e.device_code === uid && e.deviceclass_code === 'LB0015'" class="popover_block">
            <div class="foldline" :class="e.postion1"></div>
            <div class="popver_bg" :class="e.postion2">
              <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.device_status) - 1]"></div>
                    <div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
                  </div>
                  <div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
                  <div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</div>
                  <div class="pop_tip">故障信息：{{form.error_info}}</div>
                  <div class="pop_tip">完成托盘数：{{form.carrier_num}}托</div>
                </div>
              </div>
              <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
            </div>
          </div>
          <!-- 拆垛机械手、码垛机械手LB0006 -->
          <div v-if="e.device_code === uid && (e.deviceclass_code === 'LB0006' && e.device_code === 'CDJQR01'|| e.device_code === 'MDJXS01')" class="popover_block">
            <div class="foldline" :class="e.postion1"></div>
            <div class="popver_bg" :class="e.postion2">
              <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.device_status) - 1]"></div>
                    <div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
                  </div>
                  <div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
                  <div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</div>
                  <div class="pop_tip">故障信息：{{form.error_info}}</div>
                  <div class="pop_tip">完成托盘数：{{form.carrier_num}}托</div>
                  <div class="pop_tip">完成数量：{{form.produce_total_num}}块</div>
                </div>
              </div>
              <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
            </div>
          </div>
          <!-- 叠盘机LB0016 -->
          <div v-if="e.device_code === uid && e.deviceclass_code === 'LB0016'" class="popover_block">
            <div class="foldline" :class="e.postion1"></div>
            <div class="popver_bg" :class="e.postion2">
              <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.device_status) - 1]"></div>
                    <div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
                  </div>
                  <div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
                  <div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</div>
                  <div class="pop_tip">故障信息：{{form.error_info}}</div>
                  <div class="pop_tip">完成托盘数：{{form.carrier_num}}托</div>
                  <div class="pop_tip">完成垛数：{{form.stack_num}}垛</div>
                </div>
              </div>
              <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
            </div>
          </div>
          <!-- AGVLB0019 -->
          <div v-if="e.device_code === uid && e.deviceclass_code === 'LB0019'" class="popover_block">
            <div class="foldline" :class="e.postion1"></div>
            <div class="popver_bg" :class="e.postion2">
              <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.device_status) - 1]"></div>
                    <div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
                  </div>
                  <div class="pop_tip">已完成搬运：0个</div>
                  <div class="pop_tip">故障信息：{{form.error_info}}</div>
                </div>
              </div>
              <div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tag_block">
      <div class="tag_type">
        <div class="type_color green"></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>
  </section>
</template>

<script>
import THeader from '@components/header.vue'
import { deviceMonitor, findDeviceById } from '@js/getData2'
export default {
  name: 'DeviceMonitor',
  components: {
    THeader
  },
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      deviceDatas: [],
      form: {},
      allrows1: [],
      allrows2: [],
      allrows3: [],
      uid: ''
    }
  },
  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.addPosition()
      } else {
        this.toast(res.desc)
      }
    },
    async _findDeviceById (id) {
      let res = await findDeviceById(id)
      this.form = res.result
      this.allrows1 = res.result.mixingList
      this.allrows2 = res.result.crushingList
      this.allrows3 = res.result.mKilnList
      this.uid = id
    },
    addPosition () {
      for (let i = 0; i < this.deviceDatas.length; i++) {
        if (i <= 5) {
          this.deviceDatas[i].postion1 = 'position_1a_l'
          this.deviceDatas[i].postion2 = 'position_1b_l'
        } else if (i > 5 && i <= 8) {
          this.deviceDatas[i].postion1 = 'position_1a_r'
          this.deviceDatas[i].postion2 = 'position_1b_r'
        } else if (i > 8 && i <= 14) {
          this.deviceDatas[i].postion1 = 'position_1a_l'
          this.deviceDatas[i].postion2 = 'position_1b_l'
        } else if (i > 14 && i <= 17) {
          this.deviceDatas[i].postion1 = 'position_1a_r'
          this.deviceDatas[i].postion2 = 'position_1b_r'
        } else if (i > 17 && i <= 23) {
          this.deviceDatas[i].postion1 = 'position_1a_l'
          this.deviceDatas[i].postion2 = 'position_1b_l'
        } else if (i > 23 && i <= 26) {
          this.deviceDatas[i].postion1 = 'position_1a_r'
          this.deviceDatas[i].postion2 = 'position_1b_r'
        } else if (i > 26 && i <= 32) {
          this.deviceDatas[i].postion1 = 'position_2a_l'
          this.deviceDatas[i].postion2 = 'position_2b_l'
        } else if (i > 32 && i <= 35) {
          this.deviceDatas[i].postion1 = 'position_2a_r'
          this.deviceDatas[i].postion2 = 'position_2b_r'
        }
      }
    },
    getInfo (e) {
      // if (this.uid === e.device_code) {
      //   this.uid = ''
      // } else {
      //   this.form = {}
      //   this.allrows1 = []
      //   this.allrows2 = []
      //   this.allrowsw3 = []
      //   this._findDeviceById(e.device_code)
      // }
    },
    closebtn () {
      this.uid = ''
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
.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% - 135px)
  overflow-y auto
  padding 10px 1rem 0
.item_tr
  width 100%
.item_block
  position relative
  _wh(180px,209px)
  padding 8px 4px
  margin-bottom 21px
  margin-right calc((100% - 180px * 9) / 8)
  background center center / 100% 100% url(../assets/images/bg_item.png) no-repeat
  &:nth-child(9n)
    margin-right 0
.item_inner
  _wh(100%,100%)
.item_img
  _wh(100%,91px)
  margin-bottom 5px
  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, .info_block
  width 100%
  padding 4px 0
.info_table_block
  width 30%
.info_table_block_1
  width 50%
.info_data_block
  width 70%
.info_data_block_1
  width 50%
.info_table
  width 100%
  height 18px
  overflow hidden
  p
    display inline-block
    width 100%
    height 18px
    _font(12px,18px,,100,left)
    transform scale(0.78)
    transform-origin left center
    letter-spacing -1px
    white-space nowrap
.info_table_1
  height 36px
.info_data
  width 100%
  height 18px
  overflow hidden
  p
    display inline-block
    width 100%
    height 18px
    _font(12px,18px,,200,right)
    // transform scale(0.9)
    word-break break-all
.info_data_1
  height 36px
  p
    letter-spacing -1px
    transform scale(0.9)
    transform-origin center center
.popover_block
  position absolute
  left 0
  top 0
  z-index 100
.foldline
  position absolute
  z-index 102
  _wh(127px,105px)
  _bis('../assets/images/dot_line.png')
.popver_bg
  position absolute
  z-index 101
  _wh(500px,288px)
  padding 20px 18px 36px 10px
  overflow hidden
  _bis('../assets/images/popover_1.png')
// 弹窗在第一行左侧1-6列情况
.position_1a_l
  top 35px
  left 80px
  transform rotateY(180deg)
.position_1b_l
  left 190px
  top -20px
// 弹窗在第一行右侧7-9列情况
.position_1a_r
  top 35px
  left -22px
.position_1b_r
  left -505px
  top -20px
// 弹窗在第二行左侧1-7列情况
.position_2a_l
  top -36px
  left 80px
.position_2b_l
  left 190px
  top -130px
// 弹窗在第二行右侧侧8、9列情况
.position_2a_r
  top -36px
  left -22px
  transform rotateY(180deg)
.position_2b_r
  left -505px
  top -130px
.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
.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
.tag_block
  position fixed
  bottom 25px
  right 54px
.tag_type
  display inline-block
  padding-left 30px
.type_color
  display inline-block
  width 10px
  height 10px
  border-radius 50%
.tag_text
  display inline-block
  _font(14px,20px,,,left)
.green
  background-color $green
.yellow
  background-color $yellow
.gray
  background-color $gray
.orange
  background-color $orange
.fgreen
  color $green
.fyellow
  color $yellow
.fgray
  color $gray
.forange
  color $orange
</style>
