Pad_New/src/pages/monitoring/index.vue

<template>
  <div class="mainBox">
    <div class="mainContent">
      <div class="top">
        <div class="hospital" style="width:4.2rem;display:none">
          <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 class="floatLeft">
          <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
          <span class="titleName">透析监测</span>
        </div>
        <div class="newSearch1">
          <el-input
            prefix-icon="el-icon-search"
            v-model="patient_keyword"
            ref="search_field"
            placeholder="透析号/姓名"
          ></el-input>
          <p class="searchBtn" @click="searchWithKeyword(1)">搜索</p>
        </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>
      <van-list v-model="loading" :finished="finished" finished-text="  " @load="onLoad">
        <div class="blueBorder"></div>
        <div class="monitoringTable">
          <table class="table">
            <tr>
              <th width="8%">姓名</th>
              <th width="6%">机号</th>
              <th width="9%">透析号</th>
              <th width="10%">排班时间</th>
              <th width="10%">透析模式</th>
              <th width="9%">目标超滤量</th>
              <th width="10%">体重(透前/透后)</th>
              <th width="28%">监控预警(血压/心率)</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="6%"></td>
              <td width="9%"></td>
              <td width="10%"></td>
              <td width="10%"></td>
              <td width="9%"></td>
              <td width="10%"></td>
              <td width="28%"></td>
            </tr>
            <tr v-for="(item, index) in items.scheduals" :key="index" @click="clickfunction(item)">
              <td width="8%" style="color:#409eff;">{{ item.patient.name }}</td>
              <td width="6%">
                {{
                item.dialysis_order.device_number.number.length > 0
                ? item.dialysis_order.device_number.number
                : item.device_number.number
                }}
              </td>

              <td width="9%">{{ item.patient.dialysis_no }}</td>
              <td width="10%">{{ parseTime(item.schedule_date, "{y}-{m}-{d}") }}</td>
              <td width="10%">{{ item.treatment_mode.name }}</td>
              <td width="9%">
                {{
                item.prescription.target_ultrafiltration
                ? item.prescription.target_ultrafiltration
                : ""
                }}
              </td>
              <td width="10%">
                {{
                item.assessment_before_dislysis.weight_before
                ? item.assessment_before_dislysis.weight_before
                : ""
                }}/{{
                item.assessment_after_dislysis.weight_after
                ? item.assessment_after_dislysis.weight_after
                : ""
                }}
              </td>
              <td width="28%">
                <span v-if="monitorBloodPressureStatus(item.monitoring_record) == 1">低压</span>
                <span 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 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>
        </div>
      </van-list>
      <!-- <div class="monitoringTable">
        <el-table :data="tableData" border style="width: 100%" class="newTable">
          <el-table-column fixed prop="name" label="姓名" width="80" align="center">
            <template slot-scope="scope">{{scope.row.patient.name}}</template>
          </el-table-column>
          <el-table-column prop="date" label="机号" width="60" align="center">
            <template slot-scope="scope">
              {{
              scope.row.dialysis_order.device_number.number.length > 0
              ? scope.row.dialysis_order.device_number.number
              : scope.row.device_number.number
              }}
            </template>
          </el-table-column>
          <el-table-column prop="province" label="透析号" width="80" align="center">
            <template slot-scope="scope">{{scope.row.patient.dialysis_no}}</template>
          </el-table-column>
          <el-table-column prop="city" label="排班时间" width="100" align="center">
            <template slot-scope="scope">{{parseTime(scope.row.schedule_date,"{y}-{m}-{d}")}}</template>
          </el-table-column>
          <el-table-column prop="address" label="透析模式" width="100" align="center">
            <template slot-scope="scope">{{ scope.row.treatment_mode.name}}</template>
          </el-table-column>
          <el-table-column prop="zip" label="脱水量" width="100" align="center">
            <template slot-scope="scope">
              {{
              scope.row.prescription.dewater_amount
              ? scope.row.prescription.dewater_amount
              : ""
              }}
            </template>
          </el-table-column>
          <el-table-column prop="zip" label="体重(透前/透后)" width="150" align="center">
            <template slot-scope="scope">
              {{
              scope.row.assessment_before_dislysis.weight_before
              ? scope.row.assessment_before_dislysis.weight_before
              : ""
              }}/{{
              scope.row.assessment_after_dislysis.weight_after
              ? scope.row.assessment_after_dislysis.weight_after
              : ""
              }}
            </template>
          </el-table-column>
          <el-table-column prop="zip" label="监控预警(血压/心率)" width="200" align="center">
            <template slot-scope="scope">
              <span v-if="monitorBloodPressureStatus(scope.row.monitoring_record) == 1">低压</span>
              <span v-if="monitorBloodPressureStatus(scope.row.monitoring_record) == 2">正常</span>
              <span v-if="monitorBloodPressureStatus(scope.row.monitoring_record) == 3">高压</span>
              <span v-if="monitorRateStatus(scope.row.monitoring_record) == 1">心率过缓</span>
              <span v-if="monitorRateStatus(scope.row.monitoring_record) == 2">正常</span>
              <span v-if="monitorRateStatus(scope.row.monitoring_record) == 3">心率过高</span>
            </template>
          </el-table-column>
        </el-table>
      </div>-->
    </div>
    <!-- <side-bar :active_index="1"></side-bar> -->
    <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) {
      for (let i = 0; i < this.partitionArr.length; i++) {
        if (this.partitionArr[i].id == val) {
          return this.partitionArr[i].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].systolic_blood_pressure >= 140 ||
          val[i].diastolic_blood_pressure >= 90
        ) {
          status = 3; //高压
        } else 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; //正常
        }

        // 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 lang="scss" scoped>
.mainBox {
  height: 100%;
}
.top {
  padding: 0 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;
  background: #258ffc;
  .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;
    }
  }
}
.floatLeft {
  height: 1rem;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 0.6rem;
  .titleName {
    font-size: 0.6rem;
  }
  .icons {
    font-size: 0.8rem;
  }
  .jiantou {
    font-size: 0.8rem;
    color: #fff;
    padding-right: 4rem;
  }
}
.choice {
  border-bottom: 1px #e5e5e5 solid;
  position: fixed;
  top: 68px;
  right: 0;
  z-index: 66;
  left: 0;
  background: #258ffc;
  /*@media only screen and (max-width: 415px) {*/
  /*top: 38px !important;*/
  /*}*/
  /*@media only screen and (min-width: 813px) and (max-width: 1024px) {*/
  /*top: 38px !important;*/
  /*}*/
  @media only screen and (min-width: 768px) {
    top: 114px !important;
  }
  @media only screen and (min-width: 415px) and (max-width: 767px) {
    top: 90px;
  }
  ul {
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-between;
    width: 55%;
    margin: 0 auto;
    font-size: 0.45rem;
    /*// color: $pgh-color;*/
    color: #fff;
    li {
      @include display-flex;
      @include align-items-center;
      @include text-align;
      @include justify-content-between;
      padding: 0 0 0.3rem;

      .iconfont {
        margin: 0 0.1rem;
        color: #fff;
      }
      .line {
        background: #a8b3ba;
        width: 0.2rem;
        height: 1px;
        margin: 0 0.2rem;
        display: inline-block;
      }
    }
  }
}
.table {
  width: 1000px;
  @media only screen and (min-width: 768px) {
    width: 1600px;
  }
  @media only screen and (min-width: 415px) and (max-width: 767px) {
    width: 1200px;
  }
}
.van-list {
  padding-top: 100px;
  background: #fff;
  min-height: calc(100vh - 1px);
  @media only screen and (min-width: 376px) and (max-width: 414px) {
    padding-top: 80px !important;
  }
  @media only screen and (min-width: 415px) and (max-width: 767px) {
    padding-top: 132px;
  }
  @media only screen and (min-width: 768px) {
    padding-top: 160px !important;
  }
}
.mainBox {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  > :first-child {
    flex: 1;
    overflow: auto;
  }
}
</style>
<style lang="scss">
.newSearch1 {
  height: 1rem;
  width: 100%;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  .searchBtn {
    width: 14%;
    float: right;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    font-size: 0.45rem;
    color: #258ffc;
    vertical-align: middle;
  }
  .el-input {
    height: 100%;
    width: 85% !important;
    float: left;
  }
  .el-input__inner {
    height: 100%;
    line-height: 1rem;
    width: 100%;
    border-radius: 30px;
    border: none;
    font-size: 0.45rem;
    vertical-align: middle;
    @media only screen and (min-width: 768px) {
      padding-left: 0.9rem;
    }
  }
  .el-input__icon {
    line-height: 1rem;
    font-size: 0.45rem;
    margin-top: 0.02rem;
    padding-left: 0.1rem;
  }
  .el-input__prefix {
    @media only screen and (min-width: 768px) {
      left: 10px;
    }
  }
}

.monitoringTable {
  width: 100%;
  overflow: auto;
  /*// .el-table {*/
  /*//   width: 99.9% !important;*/
  /*// }*/
  /*// .newTable {*/
  /*//   margin-top: 80px;*/
  /*//   @media only screen and (min-width: 768px) {*/
  /*//     margin-top: 140px !important;*/
  /*//   }*/
  /*// }*/
  /*// .el-table td {*/
  /*//   padding: 0;*/
  /*// }*/
  /*// .el-table th {*/
  /*//   padding: 6px 0;*/
  /*// }*/
}
</style>