xt_pad/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="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="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="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="10%">{{ item.prescription.dialyzer_perfusion_apparatus }}</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.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;
    }
  }
}
.choice {
  border-bottom: 1px #e5e5e5 solid;
  position: fixed;
  top: 47px;
  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: 80px !important;
  }
  @media only screen and (min-width: 415px) and (max-width: 767px) {
    top: 64px;
  }
  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: 74px;
  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: 96px;
  }
  @media only screen and (min-width: 768px) {
    padding-top: 120px !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>