web_dist/src/components/dashboard/Inpatient.vue

<template>
  <div class="inpatient-wrapper" :style="backgroundColor(brief.sickLevel)">
    <el-tooltip :content="getSurgeryInfo(brief.surgery)" placement="top">
      <div class="top-line">
        <div style="width: 40px">{{ brief.bedNo }}床</div>
        <div style="width: 80px">
          <img :src="getGenderIcon(brief.gender)" class="sex-icon" style="margin-top: 0px" />
          {{ brief.name }}
        </div>
        <div style="width: 40px">{{ brief.indays }}天</div>
      </div>
    </el-tooltip>
    <div class="mid-line">
      <div>
        <div style="width: 60px">住院号：</div>
        <div>{{ brief.patNo }}</div>
      </div>
      <div>
        <div style="width: 60px">出生日期：</div>
        <div>{{ brief.birthDate }}</div>
      </div>
      <div>
        <div style="width: 60px">入院时间：</div>
        <div>{{ brief.convertAdmissDate }}</div>
      </div>
      <div>
        <div style="width: 60px">管床医生：</div>
        <div>{{ brief.physician }}</div>
      </div>
      <div>
        <div style="width: 60px">医疗类别：</div>
        <div>{{ brief.medTypeName }}</div>
      </div>
      <div>
        <div style="width: 60px">护理级别：</div>
        <div>{{ brief.nursingLevel }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import maleIcon from '@/assets/male-icon.png'
import femaleIcon from '@/assets/female-icon.png'
export default {
  props: {
    brief: {
      type: Object,
      required: true,
    },
  },
  setup() {
    const getGenderIcon = (gender) => {
      return gender === 1 ? maleIcon : femaleIcon
    }
    const getSurgeryInfo = (surgery) => {
      return surgery ? '今日手术：' + surgery : '今日无手术'
    }
    const backgroundColor = (status) => {
      switch (status) {
        case 0:
          return {
            background: '#67C23A',
            color: '#000000',
          }
        case 1:
          return {
            background: '#E6A23C',
            color: '#FFFFFF',
          }
        case 2:
          return {
            background: '#F56C6C',
            color: '#FFFFFF',
          }
      }
    }
    return {
      getGenderIcon,
      getSurgeryInfo,
      backgroundColor,
    }
  },
}
</script>

<style lang="scss" scoped>
.inpatient-wrapper {
  width: 160px;
  height: 152px;
  background: rgb(255, 207, 207);
  margin: 12px 12px 0 0;
  border-radius: 4px;
  font-size: 12px !important;
  .top-line {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    display: flex;
    height: 26px;
    line-height: 26px;
    font-weight: bold;
    background: rgb(16, 102, 131);
    color: white;
    &:hover {
      cursor: default;
    }
    > div {
      text-align: center;
    }
  }
  .mid-line {
    padding: 0 0 6px 4px;
    border-bottom: 1px solid rgb(255, 255, 255);
    > div {
      margin-top: 6px;
      display: flex;
    }
  }
}
</style>