screen-huahong/src/pages/modules/home/devicepop.vue

<template>
  <div v-if="pkId === data.equipment" class="popup_wraper" :class="{'popup_wraper_down': direction === 'down'}">
    <div class="popup_arrow" :class="{'popup_arrow_down': direction === 'down'}">
      <img src="../../../images/device/arrow.png">
    </div>
    <div class="popup_bg">
      <div class="popup_block">
        <div v-show="data.hasOwnProperty('equipmentName') === true || data.hasOwnProperty('statusChinese') === true" class="pop_header">
          <div v-show="data.hasOwnProperty('equipmentName') === true" class="pop_name">{{data.equipmentName}}</div>
          <div v-show="data.hasOwnProperty('statusChinese') === true" class="pop_status">
            <div class="pop_status_dot" :class="['green', 'yellow', 'gray', 'red'][Number(data.status) - 1]"></div>
            <div class="pop_status_text fgray">{{ data.statusChinese }}</div>
          </div>
        </div>
        <div class="pop_content">
          <div class="popup_item" v-for="e in data.data" :key="e.key">
            <div class="popup_label">{{ e.key }}</div>
            <div class="popup_val">{{ e.value }}</div>
          </div>
          <div v-if="data.hasOwnProperty('table') === true" class="popup_table_wrap">
            <table v-if="data.table.length > 0" class="popup_table">
              <tr>
                <th width="40%">本日生产</th>
                <th width="30%">客户</th>
                <th width="30%" v-if="type === 'hlj'">已生产（千克）</th>
                <th width="30%" v-else>已生产（块）</th>
              </tr>
              <tr v-for="(e, i) in data.table" :key="i">
                <td width="40%">{{ e.material_name }}</td>
                <td width="30%">{{ e.kh }}</td>
                <td width="30%" v-if="type === 'hlj'">{{ e.weight }}</td>
                <td width="30%" v-else>{{ e.qty }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="iconfont icon-guanbi close_btn" @click="closePop"></div> -->
  </div>
</template>

<script>
export default {
  name: 'devicepop',
  props: {
    type: String,
    pkId: String,
    data: Object,
    direction: String
  },
  methods: {
    closePop () {
      this.$emit('closePop')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.popup_wraper
  position absolute
  left 50%
  transform translateX(-50%) translateY(calc(-100% - 13px))
  top 0
  z-index 100
  padding 20px 0 30px 0
  background top center / 100% 100% url(../../../images/popup_bg.png) no-repeat
  _wh(530px, auto)
.popup_wraper_down
  top auto
  bottom 0
  transform translateX(-50%) translateY(calc(100% + 13px))
.popup_arrow
  position absolute
  _wh(22px, 23px)
  left calc(50% - 11px)
  bottom -23px
  // animation todown 1.5s ease-in-out infinite
  img
    _wh(100%, 100%)
.popup_arrow_down
  bottom auto
  top -23px
  // animation toUp 1.5s ease-in-out infinite
  img
    transform rotateZ(180deg)
.popup_bg
  _wh(100%, auto)
  background none
  overflow hidden
.popup_block
  _wh(100%,100%)
  padding 0
.pop_header
    _wh(calc(100% - 28px), 43px)
    padding 15px 5px 0 5px
    margin 0 14px
    _fj(flex-end)
    background top center / 100% 18px url(../../../images/popup_line.png) no-repeat
.pop_name
  width 50%
  _font(14px,28px,#32C5FF,,left)
  text-shadow 2px 2px 4px #A6E6FF
  margin-bottom 8px
.pop_status
  _wh(50%, 28px)
  _fj(flex-end)
.pop_status_dot
    _wh(15px, 15px)
    border-radius 50%
    margin-right 10px
.pop_status_text
    _font(16px, 28px, #fff,,)
.pop_content
  _wh(calc(100% - 14px), auto)
  padding 0 5px
  margin 0 7px
  overflow-y auto
  _fj(flex-start)
  align-content flex-start
  flex-wrap wrap
.popup_item
    _wh(calc(50% - 14px), 36px)
    _fj(row,flex-start)
    background-color rgba(50,197,255,50%)
    border-left 3px solid #fdfd0f
    margin 0 7px 5px 7px
    padding 0 5px 0 5px
.popup_label
    width 80px
    _font(12px, 36px, #fff,,left)
.popup_val
    _wh(calc(100% - 80px), 100%)
    _font(12px, 15px, #0ff,,left)
    word-break break-all
    _fj(center)
    span
      font-size 13px
      color #fff
.icon-guanbi
    position absolute
    top -30px
    right -30px
    _wh(30px, 30px)
    _font(18px, 30px, #fff,,center)
    border 1px solid #fff
    border-radius 50%
    background transparent
@keyframes todown {
    0% {
      transform: translateY(0)
    }
    100% {
      transform: translateY(60px)
    }
}
@keyframes toUp {
    0% {
      transform: translateY(0)
    }
    100% {
      transform: translateY(-60px)
    }
}
.popup_table_wrap
  width 100%
  max-height 132px
.popup_table
  width calc(100% - 14px)
  height auto
  margin 0 7px
  tr
    th
      _font(12px, 24px, #0ff,,left)
      background-color #262f52
      padding 0 10px
    td
      _font(13px, 18px, #fff,,left)
      min-height 24px
      padding 0 10px
      vertical-align middle
    &:nth-child(2n)
      td
        background rgba(38,47,82,0.50)
    &:nth-child(2n+1)
      td
        background rgba(38,47,82,0.80)
</style>