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;flex:2;" 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="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" style="flex:1;" 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.dialysis_order &&
            patient.dialysis_order.device_number &&
            patient.dialysis_order.device_number.number.length > 0
            ? patient.dialysis_order.device_number.number
            : 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";
import { setDialysisOrWaitSelectedConfig } from "@/utils/data_config";
export default {
  name: "PatientBox",
  props: {
    patients: Array
  },
  data() {
    return {};
  },
  created() {
    console.log("11111");
    console.log(this.patients);
  },
  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 if (state == 5) {
        return "green1";
      } else if (state == 6) {
        return "green2";
      } 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 if (state == 5) {
        return "待称重";
      } else if (state == 6) {
        return "待开处方";
      } else {
        // return schedual.patient.gender == 1 ? "男" : "女"
        return "未上机";
      }
    },
    computeState: function(schedual) {
      if (
        schedual.assessment_before_dislysis == null ||
        schedual.assessment_before_dislysis.weight_before == 0
      ) {
        // 未签到称重
        return 5;
      }
      if (schedual.prescription == null || schedual.prescription.creater == 0) {
        // 未确认处方
        return 6;
      }

      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.birthday != 0) {
        return jsGetAge(
          parseTime(schedual.patient.birthday, "{y}-{m}-{d}"),
          "-"
        );
      } else {
        return ''
      }

      // 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) {
      if (schedual.dialysis_order != null) {
        setDialysisOrWaitSelectedConfig(1);
      } else {
        setDialysisOrWaitSelectedConfig(0);
      }

      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;
  border-radius: 5px;
  @media only screen and (max-width: 415px) {
    width: 96% !important;
  }
  @media only screen and (min-width: 415px) and (max-width: 767px) {
    width: 48%;
    margin: 0 1% 0.5rem 0;
  }
  .function {
    padding: 0.3rem 0.32rem 0 0.32rem;
    color: #7b8a97;
    @media only screen and (min-width: 415px) and (max-width: 767px) {
      margin: 0;
      padding: 0.3rem 0.1rem 0 0.1rem;
    }
    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;
        @media only screen and (max-width: 415px) {
          font-size: 0.36rem;
        }
        .iconfont {
          margin: 0 0.1rem 0 0;
          font-size: 0.4rem;
          display: none;
        }
      }
    }
  }
  .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;
    @media only screen and (min-width: 415px) and (max-width: 767px) {
      padding: 0 0 0.3rem 0.1rem;
    }
    .tx {
      @include display-flex;
      @include align-items-center;
      img {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        float: left;
        margin: 0 0.2rem 0 0;
      }
      .right {
        float: left;
        text-align: left;
        .name {
          font-size: 0.34rem;
          color: $title-color;
          font-weight: 600;
          margin-bottom: 0.1rem;
          @media only screen and (max-width: 415px) {
            font-size: 0.45rem;
          }
          @media only screen and (min-width: 416px) and (max-width: 767px) {
            font-size: 0.4rem;
          }
          .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;
          @media only screen and (max-width: 415px) {
            font-size: 0.36rem;
          }
        }
      }
    }

    .online {
      text-align: center;
      width: 50%;
      border-left: 1px #e5e5e5 solid;
      p {
        background: #c6cdd2;
        color: #fff;
        width: 1.45rem;
        height: 0.8rem;
        line-height: 0.8rem;
        border-radius: 4px;
        margin: 0 auto;
        font-size: 0.32rem;
        @media only screen and (max-width: 767px) {
          font-size: 0.36rem;
          width: 1.7rem;
        }
        @media only screen and (min-width: 415px) and (max-width: 767px) {
          width: 1.3rem;
          font-size: 0.36rem;
        }
      }
      .blue {
        background: $main-color;
      }
      .red {
        background: #f18f68;
      }
      .green {
        background: #5bd18b;
      }
      .green1 {
        background: #258ffc;
      }
      .green2 {
        background: #e6a23c;
      }
      .gray {
        background: #a8b3ba;
      }
      .lightGray {
        background: #c6cdd2;
      }
      .time {
        font-size: 0.26rem;
        color: #34495e;
      }
    }
  }
}
.red {
  border: 1px #ff7979 solid;
}
.redpoint {
  display: inline-block;
  height: 26px;
  width: 26px;
  line-height: 23px;
  text-align: center;
  font-size: 0.8em;
  border-radius: 20px;
  color: #fff;
  background: #f56c6c;
  position: absolute;
  top: -6px;
  left: 0.6rem;
  border: 1px solid #fff;
  @media only screen and (max-width: 415px) {
    height: 16px;
    width: 16px;
    line-height: 15px;
    top: -6px;
    left: 0.6rem;
  }
  @media only screen and (min-width: 415px) and (max-width: 767px) {
    height: 20px;
    width: 20px;
    line-height: 19px;
    top: -6px;
    left: 0.6rem;
    font-size: 0.36rem;
  }
}
.yztx {
  margin: 0 5px;
  padding: 3px 10px;
  background-color: #f56c6c;
  color: #fff;
  border-radius: 3px;
  font-size: 0.32rem;
  @media only screen and (max-width: 415px) {
    font-size: 0.34rem !important;
  }
  @media only screen and (min-width: 415px) and (max-width: 767px) {
    margin: 0;
    padding: 3px 3px;
  }
}
</style>