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 class="tx">
            <img :src="patient.patient.avatar.length > 0 ? patient.patient.avatar : '../../assets/product/test.jpg'" alt="">
            <div class="right">
               <h3 class="name">{{patient.patient.name}}<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";

export default {
  name: "PatientBox",
  props: {
    patients: Array
  },
  data() {
    return {};
  },
  methods: {
    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) {
      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;
    },
    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;
}
</style>