elizebeth/src/xt_pages/dialysis/PatientBox.vue

<template>
  <div>
    <!-- <router-link to="/dialysis/details"> -->
    <div
      class="patient"
      v-for="schedule in schedules"
      v-if="schedule.patient"
      :class="borderColor(schedule)"
      @click.stop="detailAction(schedule)"
      :key="schedule.id"
    >
      <div class="kehu">
        <div class="tx">
          <img
            :src="
              schedule.patient.avatar.length > 0
                ? schedule.patient.avatar
                : '../../assets/home/analyze.png'
            "
            alt=""
          />
          <div>
            <div class="right">
              <h3 class="name">
                {{ schedule.patient.name
                }}<span class="yc" v-show="isAbnormal(schedule)">异常</span>
              </h3>
              <span class="num"
                >{{ genderText(schedule) }} | {{ getAge(schedule) }} 岁</span
              >
              <div
                style="
                  margin-left: 10px;
                  font-size: 12px;
                  color: #34495e;
                  margin-right: 5px;
                "
                v-if="
                  schedule.assessment_before_dislysis && patientStateVal == 1
                "
              >
                签到时间：{{
                  getTime(schedule.assessment_before_dislysis.created_time)
                }}
              </div>
            </div>
            <div
              style="
                margin-top: 5px;
                text-align: left;
                height: 24px;
                min-width: 205px;
              "
            >
              <span
                class="tip1"
                v-if="
                  schedule.prescription == null ||
                  schedule.prescription.creater == 0
                "
                @click.stop="open(schedule)"
              >
                开处方
              </span>
              <span
                class="tip2"
                v-if="
                  schedule.treatment_summary == null ||
                  schedule.treatment_summary.dialysis_summary == ''
                "
                @click.stop="open1(schedule)"
              >
                开小结
              </span>
              <span class="online" v-show="computeState(schedule) != 4">
                <span :class="stateColor(schedule)">{{
                  stateText(schedule)
                }}</span>
              </span>
            </div>
          </div>
          <!-- v-if="schedule.patient.troble_shoot == 1" -->
          <div class="difficult" v-if="schedule.patient.troble_shoot == 1">
            疑难内瘘
          </div>
          <!-- <div style="height:24px;margin-right: 10px;">
            <div class="online" v-show="computeState(schedule) != 4">
              <p :class="stateColor(schedule)">{{ stateText(schedule) }}</p>
            </div>
          </div> -->
          <!-- <div style="margin-top:13px;font-size:12px;color:#34495e;margin-right: 5px;" v-if="schedule.assessment_before_dislysis && patientStateVal == 1">签到时间：{{ getTime(schedule.assessment_before_dislysis.created_time) }}</div> -->
        </div>
      </div>
      <div class="dislysisInfo">
        <p>
          体重(前/后kg):
          {{
            schedule.assessment_before_dislysis
              ? schedule.assessment_before_dislysis.weight_before
              : ""
          }}
          <span
            v-if="
              schedule.assessment_after_dislysis &&
              schedule.assessment_after_dislysis.weight_after > 0
            "
            >/{{
              schedule.assessment_after_dislysis
                ? schedule.assessment_after_dislysis.weight_after
                : ""
            }}</span
          >
        </p>
        <p>
          目标超滤量:
          <span
            v-if="
              schedule.prescription &&
              schedule.prescription.target_ultrafiltration > 0
            "
            >{{
              schedule.prescription
                ? schedule.prescription.target_ultrafiltration
                : ""
            }}</span
          >
        </p>
        <p
          :title="
            schedule.prescription
              ? schedule.prescription.dialyzer_perfusion_apparatus
              : ''
          "
        >
          透析器/灌流器:{{
            schedule.prescription
              ? schedule.prescription.dialyzer_perfusion_apparatus
              : ""
          }}
          <span v-if="schedule.prescription != null">{{
            schedule.prescription
              ? schedule.prescription.dialysis_dialyszers
              : ""
          }}</span>
          <span
            v-if="
              schedule.prescription != null &&
              schedule.prescription.dialysis_irrigation != ''
            "
            >/</span
          >
          <span v-if="schedule.prescription != null">{{
            schedule.prescription
              ? schedule.prescription.dialysis_irrigation
              : ""
          }}</span>
        </p>
      </div>
      <div
        class="function"
        :class="functionColor(schedule)"
        :id="modeColor(schedule.mode_id)"
      >
        <ul>
          <li>
            <span class="iconfont" :id="modeColor(schedule.mode_id)"
              >&#xe6f5;</span
            >班次 :
            {{ timeTypeText(schedule) }}
          </li>
          <li>
            <span class="iconfont" :id="modeColor(schedule.mode_id)"
              >&#xe6de;</span
            >床位号 :
            {{ schedule.device_number.number }}
          </li>
          <li>
            <span class="iconfont" :id="modeColor(schedule.mode_id)"
              >&#xe6f6;</span
            >透析模式 :
            {{
              schedule.mode_id &&
              $store.getters.treatment_mode[schedule.mode_id]
                ? $store.getters.treatment_mode[schedule.mode_id].name
                : ""
            }}
          </li>
        </ul>
      </div>
    </div>
    <!-- </router-link> -->
    <dialysis-prescription-dialog
      title="透析处方"
      ref="prescription"
      :patient="patient"
      :prescription="prescription"
      :solution="solution"
      @advice="adviceFunc"
      :niprocart_info="niprocart_info"
      :jms_info="jms_info"
      :fistula_needle_set_info="fistula_needle_set_info"
      :fistula_needle_set_16_info="fistula_needle_set_16_info"
      :hemoperfusion_info="hemoperfusion_info"
      :dialyser_sterilised_info="dialyser_sterilised_info"
      :filtryzer_info="filtryzer_info"
      :dialyzers_info="dialyzers_info"
      :injector_info="injector_info"
      :bloodlines_info="bloodlines_info"
      :tubingHemodialysis_info="tubingHemodialysis_info"
      :safe_package_info="safe_package_info"
      :aliquid_info="aliquid_info"
      :config="config"
      :admin_users="admin_users"
      :targetAdvices="longAdvices"
      :waitUploadAdvices="waitUploadAdvices"
      :is_open="is_open"
      :predialysis="predialysis_evaluation"
      :last_predialysis="lastPredialysisEvaluation"
      :record="assessment_after_dislysis"
      :last_record="lastAssessmentAfterDislysis"
      :last_prescription="lastDialysisPrescribe"
      :dry_weight="lastDryWeightDislysis"
      :schedual="temp_schedual"
      :date="date"
      :stockType="stockType"
    ></dialysis-prescription-dialog>
    <treatment-summary-dialog
      title="治疗小结"
      ref="treatmentSummary"
      :patient="patient"
      :treatment_summary="treatment_summary"
    ></treatment-summary-dialog>
  </div>
</template>

<script>
import { parseTime } from "@/utils";
import { jsGetAge } from "@/utils/tools";
import dialysisPrescriptionDialog from "../dialysis/details/dialog/dialysisPrescriptionDialog";
import treatmentSummaryDialog from "../dialysis/details/dialog/treatmentSummaryDialog";
import {
  getDialysisScheduleDetail,
  getLongAdvice,
} from "@/api/dialysis_record";

export default {
  name: "PatientBox",
  components: {
    dialysisPrescriptionDialog,
    treatmentSummaryDialog,
  },
  data() {
    return {
      patients: [
        {
          state: 2,
          yc: false,
          name: "张三",
          sex: "女",
          age: 90,
        },
        {
          state: 3,
          yc: true,
          name: "张三",
          sex: "女",
          age: 90,
        },
        {
          state: 4,
          yc: true,
          name: "张三",
          sex: "女",
          age: 90,
        },
        {
          state: 1,
          yc: true,
          name: "张三",
          sex: "女",
          age: 90,
        },
      ],
      //
      longAdvices: [],
      waitUploadAdvices: [],
      is_open: 0,
      targetAdvices: [],

      patient: { id: 0 }, // 患者信息
      schedual: { id: 0 }, // 患者排班信息
      prescription: { id: 0 }, // 透析处方
      solution: { id: 0 }, // 透析方案
      system_prescribe: { id: 0 },
      receiver_treatment_access: { id: 0 }, // 接诊评估
      predialysis_evaluation: { id: 0 }, // 透前评估
      doctor_advices: [], // 临时医嘱
      double_check: { id: 0 }, // 双人核对
      assessment_after_dislysis: { id: 0 }, // 透后评估
      treatment_summary: { id: 0 }, // 治疗小结
      monitor_records: [], // 透析监测
      dialysis_order: { id: 0 }, // 透析记录
      admin_users: [], // 系统用户列表
      devices: [], // 设备
      device_numbers: [], // 床位号

      admin_user_map: {}, // {user_id: admin_user object}
      device_map: {}, // {device_id: device}
      device_number_map: {}, // {device_number_id: device_number}

      niprocart_info: [],
      jms_info: [],
      fistula_needle_set_info: [],
      fistula_needle_set_16_info: [],
      hemoperfusion_info: [],
      dialyser_sterilised_info: [],
      filtryzer_info: [],
      dialyzers_info: [],
      injector_info: [],
      bloodlines_info: [],
      tubingHemodialysis_info: [],
      safe_package_info: [],
      aliquid_info: [],
      config: {},

      lastPredialysisEvaluation: { id: 0 },
      lastMonitorRecord: { id: 0 },
      lastAssessmentAfterDislysis: { id: 0 },
      lastDryWeightDislysis: { id: 0 },
      headNurses: [],
      lastDialysisPrescribe: { id: 0 },
      temp_schedual: null,
      date: "",
      modedata: 0,
      stockType: [],
    };
  },
  props: {
    schedules: {
      type: Array,
    },
    patientStateVal: Number,
  },

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

      // 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
    },
    getAge: function (val) {
      var thisLen = val.patient.id_card_no.length;
      var birth = "";
      if (thisLen == 15) {
        birth = "19" + val.patient.id_card_no.substr(6, 6);
      } else {
        birth = val.patient.id_card_no.substr(6, 8);
      }
      var birthtwo =
        birth.substr(0, 4) +
        "-" +
        birth.substr(4, 2) +
        "-" +
        birth.substr(6, 2);

      var age = jsGetAge(birthtwo, "-");
      return age;
    },
    detailAction: function (schedual) {
      var patient_id = schedual.patient_id;
      var date = schedual.schedule_date;
      this.$router.push({
        path: "/dialysis/details",
        query: {
          patient_id: patient_id,
          date: date,
          patient_name: schedual.patient.name,
          mode_id: schedual.mode_id,
        },
      });
    },
    //
    getScheduleDetail: function () {
      var dateStr = parseTime(this.date, "{y}-{m}-{d}");
      this.doctor_advices = [];
      getDialysisScheduleDetail(this.patient_id, dateStr).then((rs) => {
        var resp = rs.data;
        if (resp.state == 1) {
          var patient = resp.data.patient; // 患者信息

          var schedual = resp.data.schedual; // 患者排班信息
          var prescription = resp.data.prescription; // 透析处方
          if (prescription != null) {
            if (prescription.body_fluid == -2) {
              prescription.body_fluid = 0;
            }
          }
          console.log("透析处方323332323223323223", prescription);
          var solution = resp.data.solution; // 透析方案
          var receiver_treatment_access = resp.data.receiver_treatment_access; // 接诊评估
          console.log("receiver_treatment_access", receiver_treatment_access);
          var predialysis_evaluation = resp.data.predialysis_evaluation; // 透前评估
          console.log("透前评估", predialysis_evaluation);
          if (predialysis_evaluation != null) {
            if (predialysis_evaluation.blood_access_part_id == -2) {
              predialysis_evaluation.blood_access_part_id = 0;
            }
          }
          var doctor_advices = resp.data.doctor_advices; // 临时医嘱

          var double_check = resp.data.double_check; // 双人核对
          var assessment_after_dislysis = resp.data.assessment_after_dislysis; // 透后评估

          var treatment_summary = resp.data.treatment_summary; // 治疗小结
          var monitor_records = resp.data.monitor_records; // 透析监测
          var dialysis_order = resp.data.dialysis_order; // 透析记录

          var niprocart_info = resp.data.niprocart_info;
          var jms_info = resp.data.jms_info;
          var fistula_needle_set_info = resp.data.fistula_needle_set_info;
          var fistula_needle_set_16_info = resp.data.fistula_needle_set_16_info;
          var hemoperfusion_info = resp.data.hemoperfusion_info;
          var dialyser_sterilised_info = resp.data.dialyser_sterilised_info;
          var filtryzer_info = resp.data.filtryzer_info;
          var dialyzers_info = resp.data.dialyzers_info;
          var injector_info = resp.data.injector_info;
          var bloodlines_info = resp.data.bloodlines_info;
          var tubingHemodialysis_info = resp.data.tubingHemodialysis_info;
          var safe_package_info = resp.data.safe_package_info;
          var aliquid_info = resp.data.aliquid_info;

          var lastPredialysisEvaluation = resp.data.lastPredialysisEvaluation;
          console.log("上次透前评估", lastPredialysisEvaluation);
          if (lastPredialysisEvaluation != null) {
            if (lastPredialysisEvaluation.blood_access_part_id == -2) {
              lastPredialysisEvaluation.blood_access_part_id = 0;
            }
          }
          var lastMonitorRecord = resp.data.lastMonitorRecord;
          var lastAssessmentAfterDislysis =
            resp.data.lastAssessmentAfterDislysis;
          var lastDialysisPrescribe = resp.data.lastDialysisPrescribe;
          var lastDryWeightDislysis = resp.data.lastDryWeightDislysis;

          var system_prescribe = resp.data.system_prescribe;

          var stockType = resp.data.stockType;
          this.stockType = stockType;
          console.log("元单快乐222222", this.stockType);

          this.$refs.prescription.setLastRecord(
            schedual,
            lastAssessmentAfterDislysis,
            lastPredialysisEvaluation,
            lastDialysisPrescribe,
            lastDryWeightDislysis,
            system_prescribe
          );

          var headNurses = resp.data.headNurse;

          var config = resp.data.config;
          this.lastPredialysisEvaluation = lastPredialysisEvaluation;
          this.lastMonitorRecord = lastMonitorRecord;
          this.lastAssessmentAfterDislysis = lastAssessmentAfterDislysis;
          this.lastDialysisPrescribe = lastDialysisPrescribe;
          this.lastDryWeightDislysis = lastDryWeightDislysis;
          this.headNurses = headNurses;
          this.system_prescribe = system_prescribe;

          this.niprocart_info = niprocart_info;
          this.jms_info = jms_info;
          this.fistula_needle_set_info = fistula_needle_set_info;
          this.fistula_needle_set_16_info = fistula_needle_set_16_info;
          this.hemoperfusion_info = hemoperfusion_info;
          this.dialyser_sterilised_info = dialyser_sterilised_info;
          this.filtryzer_info = filtryzer_info;
          this.dialyzers_info = dialyzers_info;
          this.injector_info = injector_info;
          this.bloodlines_info = bloodlines_info;
          this.tubingHemodialysis_info = tubingHemodialysis_info;
          this.safe_package_info = safe_package_info;
          this.aliquid_info = aliquid_info;
          this.config = config;

          this.patient = patient;
          this.schedual = schedual == null ? { id: 0 } : schedual;
          this.prescription = prescription == null ? { id: 0 } : prescription;
          console.log("this.prescription", this.prescription);
          this.solution = solution == null ? { id: 0 } : solution;
          console.log("this.solution", this.solution);
          this.receiver_treatment_access =
            receiver_treatment_access == null
              ? { id: 0 }
              : receiver_treatment_access;
          this.predialysis_evaluation =
            predialysis_evaluation == null ? { id: 0 } : predialysis_evaluation;
          this.doctor_advices = doctor_advices == null ? [] : doctor_advices;
          this.double_check = double_check == null ? { id: 0 } : double_check;
          this.assessment_after_dislysis =
            assessment_after_dislysis == null
              ? { id: 0 }
              : assessment_after_dislysis;
          this.treatment_summary =
            treatment_summary == null ? { id: 0 } : treatment_summary;
          this.monitor_records = monitor_records == null ? [] : monitor_records;
          this.dialysis_order =
            dialysis_order == null ? { id: 0 } : dialysis_order;

          // this.$refs.stat_order.setAdvices(this.doctor_advices)
          // this.$refs.monitoring.setRecords(this.monitor_records)

          this.admin_users = resp.data.doctors;
          this.devices = resp.data.devices;
          this.device_numbers = resp.data.device_numbers;

          var device_map = {};
          for (let index = 0; index < this.devices.length; index++) {
            const device = this.devices[index];
            device_map[device.id] = device;
          }
          this.device_map = device_map;

          var admin_map = {};
          for (let index = 0; index < this.admin_users.length; index++) {
            const admin = this.admin_users[index];
            admin_map[admin.id] = admin;
          }
          this.admin_user_map = admin_map;

          var device_number_map = {};
          for (let index = 0; index < this.device_numbers.length; index++) {
            const device_number = this.device_numbers[index];
            device_number_map[device_number.id] = device_number;
          }
          this.device_number_map = device_number_map;
          this.getLongAdvice();
        } else {
          this.$message.error(resp.msg);
        }

        if (this.lastDialysisPrescribe != null) {
          delete this.lastDialysisPrescribe.target_ultrafiltration;
        }
        if (this.solution != null) {
          delete this.solution.target_ultrafiltration;
        }
      });
    },
    getLongAdvice() {
      let params = {
        patient_id: this.patient_id,
      };
      getLongAdvice(params).then((rs) => {
        var resp = rs.data;
        if (resp.state == 1) {
          var status = parseInt(resp.data.status);

          switch (status) {
            case 2:
              var totalAdvice = resp.data.advices;
              var longAdvicesTwo = resp.data.advices_two;
              var waitUploadAdvices = [];
              for (let i = 0; i < totalAdvice.length; i++) {
                totalAdvice[i]["isCheck"] = 1;
              }

              for (let i = 0; i < totalAdvice.length; i++) {
                for (let a = 0; a < longAdvicesTwo.length; a++) {
                  if (
                    totalAdvice[i].template_id ==
                      longAdvicesTwo[a].template_id &&
                    totalAdvice[i].frequency_type ==
                      longAdvicesTwo[a].frequency_type
                  ) {
                    totalAdvice[i]["isCheck"] = 0;
                  }
                }
              }

              for (let i = 0; i < totalAdvice.length; i++) {
                if (totalAdvice[i].isCheck == 1) {
                  waitUploadAdvices.push(totalAdvice[i]);
                }
              }

              this.is_open = resp.data.is_open_remind;
              this.longAdvices = totalAdvice;
              this.waitUploadAdvices = waitUploadAdvices;
              break;
          }
        } else {
          this.$message.error(resp.msg);
        }
      });
    },
    adviceFunc: function () {
      this.$emit("advice");
    },
    open(schedual) {
      this.date = schedual.schedule_date;
      this.patient_id = schedual.patient_id;
      this.modedata = 1;
      this.getScheduleDetail();
      // this.getLongAdvice()
      this.$refs.prescription.show(this.prescription, schedual);
    },
    open1(schedual) {
      this.date = schedual.schedule_date;
      this.patient_id = schedual.patient_id;
      this.getScheduleDetail();
      this.getLongAdvice();
      this.$refs.treatmentSummary.show(this.treatment_summary, this.date);
    },
    getTime(date) {
      date = new Date(date * 1000);
      var Y = date.getFullYear() + "-";
      var M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var m =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

      let strDate = h + ":" + m;
      return strDate;
    },
    modeColor(id) {
      if (id == 1) {
      } else if (id == 2) {
        return "modeRed";
      } else if (id == 3) {
        return "modePurple";
      }
    },
  },
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.patient {
  border: 1px #e5e5ee solid;
  padding: 9px 0;
  margin: 0 15px 15px 0;
  float: left;
  width: 360px;
  cursor: pointer;
  .function {
    padding: 15px 5px 0 5px;
    color: #7b8a97;
    ul {
      @include display-flex;
      @include align-items-center;
      @include text-align;
      @include justify-content-between;
      li {
        font-size: 13px;
        @include display-flex;
        @include align-items-center;
        .iconfont {
          margin: 0 5px 0 0;
          font-size: 18px;
        }
      }
    }
  }
  .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 10px 20px;
    .tx {
      @include display-flex;
      // @include align-items-center;
      width: 100%;
      img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        float: left;
        margin: 0 15px 0 0;
      }
      .right {
        // float: left;
        // text-align: left;
        display: flex;
        align-items: center;
        margin-top: 6px;
        .name {
          font-size: 15px;
          color: #34495e;
          font-weight: bold;
          height: 20px;
          line-height: 20px;
          margin-right: 10px;
          .yc {
            background: #ff7979;
            color: #fff;
            height: 19px;
            line-height: 19px;
            font-size: 12px;
            width: 37px;
            border-radius: 4px;
            display: inline-block;
            text-align: center;
            margin-left: 6px;
          }
        }
        .num {
          font-size: 13px;
          color: #7b8a97;
        }
      }
      .tip1 {
        background: #4fc7cb;
        border-radius: 5px;
        text-align: center;
        font-size: 12px;
        display: inline-block;
        width: 60px;
        color: #fff;
        width: 65px;
        height: 24px;
        line-height: 24px;
      }
      .tip2 {
        background: #7bce91;
        border-radius: 5px;
        text-align: center;
        font-size: 12px;
        display: inline-block;
        width: 60px;
        color: #fff;
        width: 65px;
        height: 24px;
        line-height: 24px;
      }
    }

    .online {
      text-align: center;
      width: 30%;
      // border-left: 1px #e5e5e5 solid;
      span {
        background: #c6cdd2;
        color: #fff;
        width: 65px;
        height: 24px;
        line-height: 24px;
        border-radius: 4px;
        margin: 0 auto;
        font-size: 12px;
        margin-top: 4px;
        display: inline-block;
      }
      .blue {
        background: $main-color;
      }
      .red {
        background: #f18f68;
      }
      .green {
        background: #5bd18b;
      }
      .gray {
        background: #a8b3ba;
      }
      .lightGray {
        background: #c6cdd2;
      }
      .time {
        font-size: 26px;
        color: #34495e;
      }
    }
  }
  .dislysisInfo {
    color: rgb(123, 138, 151);
    border-bottom: 1px solid rgb(229, 229, 229);
    padding-left: 80px;
    > p {
      margin-bottom: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.red {
  border: 1px #ff7979 solid;
}
#modeRed {
  color: #ed5555;
}
#modePurple {
  color: #53b86e;
}

.difficult {
  width: 71px;
  height: 25px;
  font-size: 12px;
  border-radius: 0 0 0 30px;
  background: #78d660;
  text-align: center;
  line-height: 25px;
  position: relative;
  bottom: 10px;
  left: 3px;
  color: white;
}
</style>