his/openhis-ui-vue3/src/components/Auto/PfPatientCardB/PfPatientCard.vue

<template>
  <div
    class="pf_card"
    :style="{
      outlineWidth:active?'2px':'0',
      outlineColor:active?getBedBackColor(data.triageLevel):'#9aa6b5',
      backgroundColor:data.bedOperationalStatus==='U'?'#EDFFFD':'',
      borderColor: getBedBackColor(data.triageLevel)
    }"
    @click="clickAct"
  >
    <div v-if="data.bedOperationalStatus==='U'">
      <img
        :src="emptyBed"
        class="pf_card_emptyBed_img"
      >
      <div class="pf_card_emptyBed_text">
        {{ data.bedName }}
      </div>
    </div>
    <div v-else>
      <div
        v-if="data.isDischarge"
        class="pf_card_discharge"
      >
        <span style="margin-left: 6px">离</span>
      </div>
      <div class="pf_card_card">
        <CardSign
          :color="getBedBackColor(data.triageLevel)"
          :title="data.bedName"
          :tail="getDisplay(data.triageLevel)"
        />
      </div>
      <div class="pf_card_nameSexAndAge">
        <span class="pf_card_name">{{ data.patientName }}</span>
        <span class="pf_card_sexAndAge">{{ data.gender.display }}/{{ data.age }}</span>
      </div>
      <div class="pf_card_rescueTime">
        <span style="margin-right: 16px">入室时间</span>
        {{ moment(data.checkInWardTime).format('YYYY-MM-DD HH:mm') }}
      </div>
      <div class="pf_card_noCode">
        {{ data.hisId }}
      </div>
      <div class="pf_card_rescueTimeText">
        {{ rescueTimeText() }}
      </div>
      <div
        v-if="data.diag!==''"
        class="pf_card_diagnosis"
      >
        <div class="card-rectangle-text">
          {{ data.diag }}
        </div>
        <span style="margin-left: 4px">(诊断)</span>
      </div>
      <div
        v-if="isNewSign()"
        class="card-rectangle"
      >
        新
      </div>
      <div
        v-if="is72HourSign()"
        class="card-rectangle2"
      >
        超72H
      </div>
      <hr class="pf_card_line">
      <div class="pf_card_nursingMeasuresString">
        {{ getStringByCode(data.nursingMeasures, nursingMeasures) }}
      </div>
      <div class="pf_card_specialArrangementString">
        {{ getStringByCode(data.specialArrangement, specialArrangementList) }}
      </div>
      <div
        v-if="false"
        class="pf_card_btn"
        @click="moreClick"
      >
        更多
      </div>
    </div>
  </div>
</template>
<script>
// Ⅰ－1、Ⅱ－2、Ⅲ－3、Ⅳ－4、Ⅴ－5、Ⅵ－6、Ⅶ－7、Ⅷ－8、Ⅸ－9
import emptyBed from '@/assets/png/emptyBed.png'

export default {
  name: 'PfPatientCard',
  inject: ['PfPatientCards'],
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    bedConfig: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      colors: [],
      emptyBed,
      bedStations: [],
      nursingMeasures: [],
      specialArrangementList: []
    }
  },
  computed: {
    active() {
      return this.PfPatientCards.activePatient.bedId === this.data.bedId
    }
  },
  created() {
    this.colors = this.config.echartsColor.color
    this.nursingMeasures = this.bedConfig.nursingMeasures
    this.specialArrangementList = this.bedConfig.specialArrangementList
    this.bedStations = this.config.bedStation.options
  },
  mounted() {
    const setIntervalId = setInterval(() => {
      this.$forceUpdate()
    }, 60000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(setIntervalId)
    })
  },
  methods: {
    clickAct() {
      if (!this.data.isBedNull) {
        this.PfPatientCards.activePatient = this.$props.data
      }
      this.$emit('click', this.$props.data)
    },
    moreClick() {
      this.$emit('moreClick', this.$props.data)
    },

    getStringByCode(codeList, itemList) {
      const arr = itemList.filter((item) => {
        return codeList.includes(item.code)
      })

      const rearr = arr.map((item) => {
        return item.display
      })
      return rearr.join('、')
    },
    isNewSign() {
      const ytime = this.data.checkInWardTime
      const hour = this.moment().diff(ytime, 'hours')
      return hour < 24
    },
    is72HourSign() {
      const ytime = this.data.checkInWardTime
      const hour = this.moment().diff(ytime, 'hours')
      return hour > 72
    },
    rescueTimeText() {
      const ytime = this.data.checkInWardTime
      const days = this.moment().diff(ytime, 'days')
      const hour = this.moment().diff(ytime, 'hours')
      const minutes = this.moment().diff(ytime, 'minutes')
      if (hour >= 24) {
        return days + '天' + hour % 24 + '时' + minutes % 60 + '分'
      } else
      if (hour < 24) {
        return hour + '时' + minutes % 60 + '分'
      } else
      if (minutes < 60) {
        return minutes + '分'
      }
    },
    getDisplay(triageLevel) {
      return triageLevel?.display ?? ''
    },
    getBedBackColor(triageLevel) {
      const Level = triageLevel?.display ?? '0级'
      let backColor = '#808080'
      switch (Level) {
        case '一级':
          backColor = this.colors[0]
          break
        case '二级':
          backColor = this.colors[1]
          break
        case '三级':
          backColor = this.colors[2]
          break
        case '四级':
          backColor = this.colors[3]
          break
        default:
          backColor = '#C4C4C4'
      }
      return backColor
    }
  }
}
</script>
<style scoped lang="less">
  .pf_card {
    outline-style: solid;
    position: relative;
    border-radius: 5px;
    background-color: #FFFFFF;
    box-shadow: 1px 1px 4px #888888;
    border: 1px solid #e2dfdf;
    width: 265px;
    height: 194px;
    user-select: none;
    font-family: Microsoft YaHei;

    &:hover {
      box-shadow: 4px 4px 16px #888888;
    }

    .pf_card_card {
      position: absolute;
      top: 0;
      left: 7px;
    }

    .pf_card_nameSexAndAge {
      position: absolute;
      top: 16px;
      left: 74px;
      width: 192px;
      line-height: 18px;

      .pf_card_name {
        font-size: 18px;
        font-weight: bold;
      }

      .pf_card_sexAndAge {
        position: absolute;
        font-size: 12px;
        color: #9AA6B5;
        margin-left: 8px;
      }
    }

    .pf_card_rescueTime {
      position: absolute;
      left: 74px;
      top: 45px;
      font-size: 13px;
      color: #4C5E75;
    }

    .pf_card_noCode {
      position: absolute;
      left: 74px;
      top: 68px;
      font-size: 13px;
      color: #4C5E75;
    }

    .pf_card_rescueTimeText {
      position: absolute;
      right: 8px;
      top: 68px;
      font-size: 13px;
      color: #4C5E75;
    }

    .pf_card_diagnosis {
      position: absolute;
      display: flex;
      left: 8px;
      top: 100px;
      font-size: 14px;
      color: #111111;

      .card-rectangle-text {
        width: 100px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }

      .card-rectangle {
        position: absolute;
        width: 20px;
        height: 20px;
        left: 178px;
        top: 100px;
        font-size: 14px;
        color: #FFFFFF;
        background-color: #FF3939;
        border-radius: 2px;
        line-height: 20px;
        text-align: center;
      }
      .card-rectangle2 {
        position: absolute;
        width: 54px;
        height: 20px;
        right: 8px;
        top: 100px;
        font-size: 14px;
        color: #FFFFFF;
        background-color: #FDC13F;
        border-radius: 2px;
        line-height: 20px;
        text-align: center;
      }

    .pf_card_line {
      position: absolute;
      left: 8px;
      top: 127px;
      border: none;
      width: 250px;
      height: 1px;
      background-color: #DCDFE6;
    }

    .pf_card_nursingMeasuresString {
      position: absolute;
      width: 240px;
      left: 8px;
      top: 140px;
      color: #0EB396;
      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .pf_card_specialArrangementString{
      position: absolute;
      width: 200px;
      left: 8px;
      top: 164px;
      color: #FF9F3B;
      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .pf_card_btn{
      position: absolute;
      width: 46px;
      height: 20px;
      right: 8px;
      top: 164px;
      color: #0EB396;
      text-align: center;
      line-height: 20px;
      font-size: 12px;
      border-radius: 4px;
      background-color:#9CF6E6;
      cursor: pointer;
    }

    .pf_card_discharge {
      position: absolute;
      width: 24px;
      height: 20px;
      top: 10px;
      left: 242px;
      font-size: 14px;
      text-align: center;
      line-height: 20px;
      color: white;
      border-top-left-radius: 50%;
      border-bottom-left-radius: 50%;
      background-color: #0EB396;
    }

    .pf_card_emptyBed_img {
      position: absolute;
      left: 72px;
      top: 16px
    }

    .pf_card_emptyBed_text {
      position: absolute;
      width: 100%;
      font-size: 18px;
      font-weight: bold;
      color: #0EB396;
      text-align: center;
      top: 152px;
    }
  }
</style>