xt_pad/src/pages/monitoring/index.vue

<template>
  <div class="mainBox">
    <side-bar :active_index="1"></side-bar>
    <div class="mainContent">
      <div class="top">
        <div class="hospital" style="width:4.2rem;">
          <span style="visibility:hidden"></span>
        </div>
        <div class="department">
          <ul>
            <li>透析监控</li>
          </ul>
        </div>
        <div class="search">
          <van-field
            v-model="patient_keyword"
            ref="search_field"
            placeholder="透析号/姓名"
            class="field"
          >
            <i class="iconfont" slot="left-icon">&#xe741;</i>
            <van-button
              slot="button"
              size="small"
              type="info"
              style="border: none;"
              @click="searchWithKeyword(1)"
            >搜索</van-button>
          </van-field>
        </div>
      </div>

      <div class="choice">
        <ul>
          <el-popover v-model="visible" placement="bottom" trigger="click">
            <li slot="reference">
              {{partitionName(partition)}}
              <span class="iconfont">&#xe74a;</span>
            </li>
            <div class="popover-demo-content">
              <ul>
                <li
                  v-for="item in partitionArr"
                  :key="item.id"
                  @click="itemClick(item.id)"
                  :class="partition == item.id ? 'tick' : ''"
                >{{item.name}}</li>
              </ul>
            </div>
          </el-popover>
          <li @click="openPicker">
            {{parseTime(date.getTime()/1000, "{y}-{m}-{d}")}}
            <span class="iconfont">&#xe74a;</span>
          </li>
        </ul>
      </div>
      <div class="blueBorder"></div>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <table class="table">
          <tr>
            <th width="8%">机号</th>
            <th width="10%">姓名</th>
            <th width="9%">透析号</th>
            <th width="13%">排班时间</th>
            <th width="10%">透析模式</th>
            <th width="9%">脱水量</th>
            <th width="14%">体重(透前/透后)</th>
            <th width="27%">监控预警</th>
          </tr>
        </table>
        <table class="table" v-for="(items,index) in dialysis_scheduals" :key="index">
          <tr v-if="items.zone_name.length > 0">
            <td width="8%">{{items.zone_name}}</td>
            <td width="10%"></td>
            <td width="9%"></td>
            <td width="13%"></td>
            <td width="10%"></td>
            <td width="9%"></td>
            <td width="14%"></td>
            <td width="27%"></td>
          </tr>
          <tr v-for="(item,index) in items.scheduals" :key="index" @click="clickfunction(item)">
            <td width="8%">{{item.device_number.number}}</td>
            <td width="10%">{{item.patient.name}}</td>
            <td width="9%">{{item.patient.dialysis_no}}</td>
            <td width="13%">{{parseTime(item.schedule_date, "{y}-{m}-{d}")}}</td>
            <td width="10%">{{item.treatment_mode.name}}</td>
            <td width="9%">{{item.prescription.dewater_amount}}</td>
            <td
              width="14%"
            >{{item.assessment_before_dislysis.weight_before}}/{{item.assessment_after_dislysis.weight_after}}</td>
            <td width="27%">
              <span v-if="monitorBloodPressureStatus(item.monitoring_record) == 1">低压</span>
              <span
                style="background-color: dodgerblue"
                v-if="monitorBloodPressureStatus(item.monitoring_record) == 2"
              >正常</span>
              <span v-if="monitorBloodPressureStatus(item.monitoring_record) == 3">高压</span>
              <span v-if="monitorRateStatus(item.monitoring_record) == 1">心率过缓</span>
              <span
                style="background-color: dodgerblue"
                v-if="monitorRateStatus(item.monitoring_record) == 2"
              >正常</span>
              <span v-if="monitorRateStatus(item.monitoring_record) == 3">心率过高</span>
            </td>
          </tr>
        </table>
        <div class="NoData" v-show="dialysis_scheduals.length == 0">
          <img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt />
        </div>
      </van-list>
    </div>
    <mt-datetime-picker
      ref="date_picker"
      type="date"
      @confirm="handleDateConfirm"
      :endDate="new Date()"
      v-model="date"
    ></mt-datetime-picker>
  </div>
</template>

<script>
import SideBar from "@/pages/layout/SideBar";
import Divider from "vux/src/components/divider/index";
import { getMonitorList, GetAllZone, getPatientMonitors } from "@/api/monitor";
import { parseTime } from "@/utils";
import { Toast } from "vant";

export default {
  name: "MonitoringIndex",
  created() {
    this.queryParams.date = this.parseTime(
      new Date().getTime() / 1000,
      "{y}-{m}-{d}"
    );
    this.queryParams.partition = this.partition;
    this.getMonitor(this.queryParams);
    this.GetAllZone();
  },
  data() {
    return {
      loading: false,
      finished: false,

      dialysis_scheduals: [],
      zones: [],
      visible: false,
      partitionArr: [],
      date: new Date(),
      partition: 0,
      queryParams: {
        date: new Date(),
        partition: ""
      },
      patient_keyword: "",
      search_page: 1
    };
  },
  methods: {
    clickfunction: function(val) {
      this.$router.push({
        path: "/details",
        query: {
          patient_id: val.patient_id,
          date: val.schedule_date,
          patient_name: val.patient.name
        }
      });
    },
    getMonitor: function(queryParams) {
      this.search_page = 1;
      this.patient_keyword = "";

      this.loading = true;
      this.finished = false;
      this.dialysis_scheduals = [];
      getMonitorList(queryParams).then(response => {
        this.loading = false;
        this.finished = true;
        if (response.data.state == 0) {
          return false;
        } else {
          var scheduals = response.data.data.monitor;
          var zoneMap = {};
          var schedualMap = {};

          for (let index = 0; index < scheduals.length; index++) {
            const schedual = scheduals[index];
            if (schedualMap[schedual.device_zone.name] == null) {
              schedualMap[schedual.device_zone.name] = [];
            }
            schedualMap[schedual.device_zone.name].push(schedual);
            if (zoneMap[schedual.device_zone.name] == null) {
              zoneMap[schedual.device_zone.name] = schedual.device_zone;
            }
          }

          var zones = [];
          zones.push({ value: 0, text: "全部分区" });
          for (var zoneName in zoneMap) {
            zones.push({ value: zoneMap[zoneName].id, text: zoneName });
          }
          zones = zones.sort(function(a, b) {
            return a.value > b.value;
          });
          this.zones = zones;

          var dialysis_scheduals = [];
          for (let index = 0; index < zones.length; index++) {
            const zone = zones[index];
            var scheduals = schedualMap[zone.text];
            if (scheduals == null) {
              continue;
            }
            dialysis_scheduals.push({
              zone_name: zone.text,
              scheduals: scheduals
            });
          }
          this.dialysis_scheduals = dialysis_scheduals;
          // console.log(this.dialysis_scheduals);
        }
      });
    },
    parseTime(time, layout) {
      return parseTime(time, layout);
    },
    openPicker: function() {
      this.$refs.date_picker.open();
    },
    handleDateConfirm: function(val) {
      this.queryParams.date = this.parseTime(this.date / 1000, "{y}-{m}-{d}");
      this.queryParams.partition = this.partition;

      this.getMonitor(this.queryParams);
    },
    partitionName: function(val) {
      return typeof this.partitionArr[val] != "undefined" &&
        typeof this.partitionArr[val].name != "undefined"
        ? this.partitionArr[val].name
        : "";
    },
    GetAllZone: function() {
      GetAllZone().then(response => {
        if (response.data.state == 0) {
          return false;
        } else {
          this.partitionArr = response.data.data.zone;
          this.partitionArr.unshift({ id: 0, name: "全部分区" });
        }
      });
    },
    itemClick: function(id) {
      this.partition = id;
      this.visible = false;
      this.queryParams.date = this.parseTime(this.date / 1000, "{y}-{m}-{d}");
      this.queryParams.partition = this.partition;
      this.getMonitor(this.queryParams);
    },
    monitorBloodPressureStatus: function(val) {
      let status = 0;

      if (val.length == 0) {
        return 0;
      }
      for (let i = 0; i < val.length; i++) {
        //舒张压（低压）(diastolic_blood_pressure)    收缩压(高压)(systolic_blood_pressure)
        if (
          val[i].diastolic_blood_pressure < 60 ||
          val[i].systolic_blood_pressure < 90
        ) {
          status = 1; //低压
        } else if (
          val[i].diastolic_blood_pressure >= 60 ||
          val[i].systolic_blood_pressure < 140
        ) {
          status = 2; //正常
        } else if (
          val[i].diastolic_blood_pressure >= 90 ||
          val[i].systolic_blood_pressure >= 140
        ) {
          status = 3; //高压
        }
      }

      return status;
    },
    monitorRateStatus: function(val) {
      let status = 0;
      if (val.length == 0) {
        return 0;
      }
      for (let i = 0; i < val.length; i++) {
        //舒张压（低压）(diastolic_blood_pressure)    收缩压(高压)(systolic_blood_pressure)
        if (val[i].pulse_frequency < 60) {
          status = 1; //心率过缓
        } else if (
          val[i].pulse_frequency >= 60 &&
          val[i].pulse_frequency < 100
        ) {
          status = 2; //心率正常
        } else if (val[i].pulse_frequency >= 100) {
          status = 3; //心率过快
        }
      }
      return status;
    },
    searchWithKeyword: function(page) {
      this.$refs.search_field.blur();
      if (this.patient_keyword.length == 0) {
        this.queryParams.date = this.parseTime(this.date / 1000, "{y}-{m}-{d}");
        this.queryParams.partition = this.partition;
        this.getMonitor(this.queryParams);
        return;
      }

      this.partition = 0;

      this.search_page = page;
      if (page == 1) {
        this.dialysis_scheduals = [];
      }
      this.loading = true;
      this.finished = false;
      getPatientMonitors({
        keyword: this.patient_keyword,
        page: this.search_page
      }).then(rs => {
        this.loading = false;
        this.finished = true;
        var resp = rs.data;
        if (resp.state == 1) {
          if (resp.data.monitor.length > 0) {
            this.dialysis_scheduals.push({
              zone_name: "",
              scheduals: resp.data.monitor
            });
            this.finished = false;
          } else {
            this.finished = true;
          }
        }
      });
    },
    onLoad: function() {
      this.searchWithKeyword(this.search_page + 1);
    }
  },
  components: {
    Divider,
    SideBar
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.top {
  padding: 0.3rem 0.3rem;
  @include text-align;
  font-size: 0.36rem;
  border-bottom: 1px #e5e5e5 solid;
  position: relative;
  color: $title-color;
  @include display-flex;
  @include align-items-center;
  @include justify-content-between;
  .title {
    font-size: 0.3rem;
    font-weight: bold;
    color: $pgh-color;
  }
  .iconfont {
    font-size: 0.4rem;
    color: #a8b3ba;
    @media only screen and (max-width: 812px) {
      margin-right: 0 !important;
    }
  }
}
.choice {
  border-bottom: 1px #e5e5e5 solid;
  ul {
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-between;
    width: 30%;
    margin: 0 auto;
    font-size: 0.32rem;
    color: $pgh-color;
    padding: 0.3rem 0;
    li {
      @include display-flex;
      @include align-items-center;
      @include text-align;
      @include justify-content-between;
      .iconfont {
        margin: 0 0.1rem;
      }
      .line {
        background: #a8b3ba;
        width: 0.2rem;
        height: 1px;
        margin: 0 0.2rem;
        display: inline-block;
      }
    }
  }
}
.table {
  width: 100%;
}
</style>