xt_pad/src/pages/main/PatientBox.vue

<template>
  <div>
    <div class="patient" :class="borderColor(patient)" v-for="(patient, index) in patients" :key="index"
         @click="detailAction(patient)">
      <!-- <router-link :to="{path:'/details',  query: {patient_id: patient.patient_id, date: patient.schedule_date}}"> -->
      <div class="kehu">

        <div style="position: relative;" class="tx">
            <img :src="patient.patient.avatar.length > 0 ? patient.patient.avatar : '../../assets/product/test.jpg'"
                 alt="">
            <span class="redpoint" v-if="getStatus(patient)">{{getUnReadNum(patient) > 99?getUnReadNum(patient)+"+":getUnReadNum(patient)}}</span>
          <div class="right">
            <h3 class="name">{{patient.patient.name}}<span class="el-icon-bell yztx" v-if="getStatus(patient)"> 医嘱</span> <span class="yc" v-show="isAbnormal(patient)">异常</span></h3>
            <span class="num">{{ genderText(patient) }} | {{ age(patient) }}岁</span>
            <!-- 性别、年龄 -->

          </div>
        </div>
        <div class="online" v-show="computeState(patient) != 4">
          <p :class="stateColor(patient)">{{stateText(patient)}}</p>
          <!-- <span class="time">剩余时间 : 90:08</span>     -->
        </div>

      </div>
      <!-- </router-link> -->
      <div class="function" :class="functionColor(patient)">
        <ul>
          <li><span class="iconfont">&#xe6f7;</span>班次 : {{timeTypeText(patient)}}</li>
          <li><span class="iconfont">&#xe6de;</span>床位号 : {{patient.device_number.number}}</li>
          <li><span class="iconfont">&#xe6f6;</span>透析模式 : {{$store.getters.treatment_mode[patient.mode_id].name}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import {parseTime} from '@/utils'
  import {jsGetAge} from '@/utils/tools'

  export default {
    name: 'PatientBox',
    props: {
      patients: Array
    },
    data () {
      return {}
    },
    methods: {
      getUnReadNum: function (schedual) {
        if (schedual.doctor_advice != null) {
          let doctorAdvice = []
          for (let i = 0; i < schedual.doctor_advice.length; i++) {
            if (schedual.doctor_advice[i].execution_state == 2) {
              doctorAdvice.push(schedual.doctor_advice[i])
            }
          }
          const sorted = this.groupBy(doctorAdvice, function (item) {
            return [item.groupno]
          })
          return sorted.length
        }
      },
      getStatus: function (schedual) {
        var isShowDot = false
        if (schedual.doctor_advice != null) {
          for (let i = 0; i < schedual.doctor_advice.length; i++) {
            if (schedual.doctor_advice[i].execution_state == 2) {
              isShowDot = true
            }
          }
          return isShowDot

        } else {
          return false
        }
      },
      stateColor: function (schedual) {
        var state = this.computeState(schedual)
        if (state == 1) {
          return 'blue'
        } else if (state == 2) {
          return 'gray'
        } else if (state == 3) {
          return 'red'
        } else {
          return 'blue'
        }
      },
      functionColor: function (schedual) {
        var state = this.computeState(schedual)
        if (state == 1 || state == 3) {
          return 'blue'
        } else if (state == 2) {
          return 'gray'
        } else {
          return 'blue'
        }
      },
      borderColor: function (schedual) {
        var yc = this.isAbnormal(schedual)
        if (yc == true) {
          return 'red'
        } else {
          return 'gray'
        }
      },
      stateText: function (schedual) {
        var state = this.computeState(schedual)
        if (state == 1) {
          return '已上机'
        } else if (state == 2) {
          return '已下机'
        } else if (state == 3) {
          return '监测中'
        } else {
          // return schedual.patient.gender == 1 ? "男" : "女"
          return '未上机'
        }
      },
      computeState: function (schedual) {
        if (schedual.dialysis_order == null) {
          // 未上机
          return 4
        } else if (schedual.dialysis_order.stage == 2) {
          // 已下机
          return 2
        } else if (
          schedual.dialysis_order.stage == 1 &&
          schedual.monitoring_records != null &&
          schedual.monitoring_records.length > 1
        ) {
          // 监测中
          return 3
        } else {
          return 1
        }
      },

      orderState: function (schedual) {
        if (schedual.dialysis_order == null) {
          // 未上机
          return 4
        } else if (schedual.dialysis_order.stage == 2) {
          // 已下机
          return 2
        } else if (
          schedual.dialysis_order.stage == 1 &&
          schedual.monitoring_records != null &&
          schedual.monitoring_records.length > 1
        ) {
          // 监测中
          return 3
        } else {
          return 1
        }
      },
      isAbnormal: function (schedual) {
        return false // schedual.yc;
      },
      timeTypeText: function (schedual) {
        if (schedual.schedule_type == 1) {
          return '上午'
        } else if (schedual.schedule_type == 2) {
          return '下午'
        } else {
          return '晚上'
        }
      },
      genderText: function (schedual) {
        if (schedual.patient.gender == 0) {
          return '未知'
        } else if (schedual.patient.gender == 1) {
          return '男'
        } else {
          return '女'
        }
      },
      age: function (schedual) {
        if (schedual.patient.age == 0) {

          return jsGetAge(parseTime(schedual.patient.birthday, '{y}-{m}-{d}'), '-')

        } else {

          return schedual.patient.age
        }

        // var now = new Date();
        // var nowYear = parseTime(now, "{y}");
        // var birthdayYear = parseTime(schedual.patient.birthday, "{y}");
        // // console.log(nowYear)
        // // console.log(birthdayYear)
        // return nowYear - birthdayYear;
      }, groupBy (array, f) {
        const groups = {}
        array.forEach(function (o) {
          const group = JSON.stringify(f(o))
          groups[group] = groups[group] || []
          groups[group].push(o)
        })
        return Object.keys(groups).map(function (group) {
          return groups[group]
        })
      },
      detailAction: function (schedual) {
        var patient_id = schedual.patient_id
        var date = schedual.schedule_date
        this.$router.push({
          path: '/details',
          query: {
            patient_id: patient_id,
            date: date,
            patient_name: schedual.patient.name
          }
        })
      }
    }
  }
</script>

<style style="stylesheet/scss" lang="scss" scoped>
  .patient {
  border: 1px #e5e5ee solid;
  padding: 0.33rem 0;
  width: 47%;
  margin: 0 3% 0.5rem 0;
  float: left;
  .function {
  padding: 0.3rem 0.32rem 0 0.32rem;
  color: #7b8a97;
  ul {
  @include display-flex;
  @include align-items-center;
  @include text-align;
  @include justify-content-between;
  li {
  font-size: 0.3rem;
  @include display-flex;
  @include align-items-center;
  .iconfont {
  margin: 0 0.1rem 0 0;
  font-size: 0.4rem;
  }
  }
  }
  }
  .blue {
  color: $main-color;
  .iconfont {
  color: $main-color;
  }
  }
  .kehu {
  @include display-flex;
  @include align-items-center;
  @include text-align;
  @include justify-content-between;
  border-bottom: 1px #e5e5e5 solid;
  padding: 0 0 0.3rem 0.32rem;
  .tx {
  @include display-flex;
  @include align-items-center;
  img {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  float: left;
  margin: 0 0.3rem 0 0;
  }
  .right {
  float: left;
  text-align: left;
  .name {
  font-size: 0.34rem;
  color: $title-color;
  font-weight: 600;
  margin-bottom: 0.1rem;
  .yc {
  background: #ff7979;
  color: #fff;
  height: 0.38rem;
  line-height: 0.38rem;
  font-size: 0.24rem;
  width: 0.74rem;
  border-radius: 4px;
  display: inline-block;
  text-align: center;
  margin-left: 0.13rem;
  }
  }
  .num {
  font-size: 0.3rem;
  }
  }
  }

  .online {
  text-align: center;
  width: 50%;
  border-left: 1px #e5e5e5 solid;
  p {
  background: #c6cdd2;
  color: #fff;
  width: 1.35rem;
  height: 0.56rem;
  line-height: 0.56rem;
  border-radius: 4px;
  margin: 0 auto;
  font-size: 0.32rem;
  }
  .blue {
  background: $main-color;
  }
  .red {
  background: #f18f68;
  }
  .green {
  background: #5bd18b;
  }
  .gray {
  background: #a8b3ba;
  }
  .lightGray {
  background: #c6cdd2;
  }
  .time {
  font-size: 0.26rem;
  color: #34495e;
  }
  }
  }
  }
  .red {
  border: 1px #ff7979 solid;
  }
  .redpoint{
  display:inline-block;
  height:20px;
  width:20px;
  line-height:18px;
  text-align:center;
  font-size:0.8em;
  border-radius:20px;
  color:#fff;
  background:red;
  position: absolute;
  top: -8px;
  left: 0.7rem;
  border:1px solid #fff;
  }
  .yztx{
    margin: 0 15px;
    padding: 5px 15px;
    background-color: red;
    color: #fff;
    border-radius: 15px;
  }
</style>