xt_vue/src/xt_pages/dialysis/bloodPresssWatch.vue

<template>
<div class="main-contain">
  <div class="position">
    <bread-crumb></bread-crumb>
  </div>
  <div class="app-container">
    <div class="cell">
      <label class="title"><span class="name">{{ search_mode == 1 ? "日期查询" : "病人查询" }}</span> : </label>
      <el-date-picker v-show="search_mode == 1" v-model="time" prefix-icon="el-icon-date" @change="changeTime" :editable="false"
                      style="width: 250px;" type="date" placeholder="选择日期时间" align="right"
                      format="yyyy-MM-dd" size="small" value-format="timestamp"></el-date-picker>
      <el-input v-show="search_mode == 2" v-model="patient_search_keyword" style="width: 250px;" placeholder="病人名字、透析号">
        <el-button size="small" slot="append" style="background-color: #409EFF; color: white; border-radius: 0;" icon="el-icon-search" @click="searchPatientAction"></el-button>
      </el-input>
      <el-button size="small" type="primary" @click="changeSearchMode">{{ search_mode == 1 ? "改为病人查询" : "改为日期查询" }}</el-button>
    </div>
    <div class="cell clearfix">
      <label class="title"><span class="name">排班班次</span> : </label>
      <div class="time ">
        <ul class="">
          <li :class="item.value==schedulType?'active':''" @click='selectSchedulType(item.value)'
              v-for="item in schedulArr" :key="item.value">{{item.label}}
          </li>
        </ul>
      </div>
    </div>
    <div class="cell clearfix">
      <label class="title"><span class="name">分区</span> : </label>
      <div class="time ">
        <ul class="">
          <li :class="item.id==partitionType?'active':''" @click='selectPartitionType(item.id)'
              v-for="item in partitionArr" :key="item.id">{{item.name}}
          </li>
        </ul>
      </div>
    </div>


    <el-table
      :data="SchedualPatientsTableData"
      style="width: 100%"
      v-loading="loading"
      @current-change="clickCurrent"
      :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}"
      >
      <el-table-column
        prop="number"
        label="机号"
        align="center"
       >
      </el-table-column>
      <el-table-column 
        label="排班日期"
        prop="sch_time"
        align="center"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="dialysis_no"
        label="透析号"
        align="center"

     >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        align="center"

        >
      </el-table-column>

      <el-table-column
        prop="mode_name"
        label="透析模式"
        align="center"

        >
      </el-table-column>

      <el-table-column
        prop="dialysis_before_weight"
        label="透前体重 (kg)"
        align="center"

       >
      </el-table-column>
      <el-table-column
        prop="dialysis_after_weight"
        label="透后体重 (kg)"
        align="center"

      >
      </el-table-column>
      <el-table-column label="透中血压">

        <el-table-column v-for="(item, index) in labelArr" :key="index" :label="item" >
          <!-- 数据的遍历  scope.row就代表数据的每一个对象-->
          <template slot-scope="scope">
            <!--<span>{{scope.row.bp[index].value}}</span>-->
            <span>{{getValue(scope.row.bp[index])}}</span>

          </template>
        </el-table-column>

      </el-table-column>

    </el-table>


    <el-pagination
      @current-change="handleCurrentChange"
      :page-sizes="[10]"
      :page-size="10"
      background
      align="right"
      style="margin-top:20px;"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


  </div>
  </div>

</template>


<script>
  import {
    getSchedualPatient,
    GetAllZone,
  } from "@/api/dialysis"
  import { parseTime } from '@/utils'
  import BreadCrumb from "@/xt_pages/components/bread-crumb";

  export default {
    name: "Patient",
    data() {
      return {
        loading: false,
        time: '',

        search_mode: 1, // 搜索模式 1.日期搜索 2.病人搜索
        patient_search_keyword: "",

        // checkAll: false,
        // isIndeterminate: true,
        // wechatbindimg: "",
        SchedualPatientsTableData:[],
        active: true,
        schedulType: 0,
        schedulArr: [
          {value: 0, label: "全部"},
          {value: 1, label: "上午"},
          {value: 2, label: "下午"},
          {value: 3, label: "晚上"}
        ],

        partitionType: 0,
        // sourceType: 0,
        // sourceID: 0,
        // lapsetoType: 0,
        // sourceArr: [
        //   {value: 0, label: "全部", source: 0, lapseto: 0},
        //   {value: 1, label: "门诊", source: 0, lapseto: 0},
        //   {value: 2, label: "住院", source: 0, lapseto: 0}
        // ],

        // warnArr: [
        //   {value: 0, label: "全部", source: 0, lapseto: 0},
        //   {value: 1, label: "正常", source: 0, lapseto: 0},
        //   {value: 2, label: "异常", source: 0, lapseto: 0}
        // ],

        labelArr: ['第1次','第2次','第3次','第4次','第5次','第6次','第7次'],

        // tableData: null,
        // pickerOptions1: {
        //   shortcuts: [
        //     {
        //       text: "今天",
        //       onClick(picker) {
        //         picker.$emit("pick", new Date());
        //       }
        //     },
        //     {
        //       text: "昨天",
        //       onClick(picker) {
        //         const date = new Date();
        //         date.setTime(date.getTime() - 3600 * 1000 * 24);
        //         picker.$emit("pick", date);
        //       }
        //     },
        //     {
        //       text: "一周前",
        //       onClick(picker) {
        //         const date = new Date();
        //         date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
        //         picker.$emit("pick", date);
        //       }
        //     },
        //     {
        //       text: "清空",
        //       onClick(picker) {
        //         picker.$emit("pick");
        //       }
        //     }
        //   ]
        // },
        // searchKey: "",
        total: 0,
        listQuery: {
          page: 1,
          limit: 10,
          schedul_type: 0,
          partition_type: 0,
          schedul_time: "",
          keywords: "",
        },
        multipleSelection: [],
        partitionArr: [],
      };
    },
    components:{
      BreadCrumb
    },
    created() {
      var date = new Date()
      this.time = date
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      if (month < 10) {
        month = "0" + month
      }
      if (day < 10) {
        day = "0" + day
      }
      var nowDate = year + "-" + month + "-" + day
      var date = new Date(nowDate + " 00:00:00")
      this.listQuery.schedul_time = date.getTime()
      this.getAllZone()
      this.getSchedualPatientList();
    },
    methods: {

      clickCurrent(val){
        console.log(val)
        this.$router.push({ path: "/dialysis/details", query: {patient_id: val.patient_id, date: val.sch_time_int}})
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.pageSelect = this.multipleSelection.length;
      },

      selectSchedulType(scheduleType) {
        // alert(scheduleType);/
        this.schedulType = scheduleType;
        this.listQuery.schedul_type = scheduleType;
        this.getSchedualPatientList();
      },
      selectPartitionType(partitionType) {
        this.partitionType = partitionType;
        this.listQuery.partition_type = partitionType;
        this.getSchedualPatientList();
      },

      changeTime() {
        console.log(this.time)
        this.listQuery.schedul_time = this.time;
        this.getSchedualPatientList();
      },
      // search() {
      //   this.listQuery.keywords = this.searchKey;
      //   this.getSchedualPatientList();
      // },
      // changeOtherSearch() {
      //   this.getList();
      // }, 
      getAllZone: function () {
        GetAllZone().then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg);
            return false;
          } else {
            this.partitionArr = response.data.data.zone
            this.partitionArr.unshift({"id": 0, "name": '全部'})
          }
        });
      }, 
      getSchedualPatientList: function () {
        this.loading = true
        if (this.search_mode == 1) {
          this.listQuery.keywords = ""
        } else {
          this.listQuery.schedul_time = ""
        }
        this.SchedualPatientsTableData = []
        getSchedualPatient(this.listQuery).then(response => {
          if (response.data.state == 0) {
            this.loading = false
            this.$message.error(response.data.msg);
            return false;
          } else {
            this.loading = false
            this.total =  response.data.data.total
            // console.log(response.data.data)
            for (let i = 0; i < response.data.data.schedule.length; i++) {
              if (response.data.data.schedule[i].patient.id > 0) {
                let SchedualPatientsTable = {
                  bp: []
                }

                SchedualPatientsTable['sch_time_int'] = response.data.data.schedule[i].schedule_date
                SchedualPatientsTable['sch_time'] = parseTime(response.data.data.schedule[i].schedule_date, "{y}-{m}-{d}")
                SchedualPatientsTable['dialysis_no'] = response.data.data.schedule[i].patient.dialysis_no
                SchedualPatientsTable['name'] = response.data.data.schedule[i].patient.name
                SchedualPatientsTable['number'] = response.data.data.schedule[i].device_number.number
                SchedualPatientsTable['gender'] = response.data.data.schedule[i].patient.gender
                SchedualPatientsTable['source'] = response.data.data.schedule[i].patient.source
                SchedualPatientsTable['patient_id'] = response.data.data.schedule[i].patient_id
                SchedualPatientsTable['mode_name'] =  response.data.data.schedule[i].treatment_mode.name
                if(response.data.data.schedule[i].assessment_before_dislysis.id > 0) {
                  SchedualPatientsTable['dialysis_before_weight'] = response.data.data.schedule[i].assessment_before_dislysis.weight_before
                }
                if(response.data.data.schedule[i].assessment_after_dislysis.id > 0) {
                  SchedualPatientsTable['dialysis_after_weight'] = response.data.data.schedule[i].assessment_after_dislysis.weight_after
                }

                SchedualPatientsTable.bp=[]
                for (let a = 0; a < response.data.data.schedule[i].monitoring_record.length; a++) {
                  let bp = {}
                  bp['value'] = response.data.data.schedule[i].monitoring_record[a].systolic_blood_pressure.toString()
                      +"/"+response.data.data.schedule[i].monitoring_record[a].diastolic_blood_pressure.toString()

                  SchedualPatientsTable.bp.unshift(bp)
                }

                this.SchedualPatientsTableData.push(SchedualPatientsTable)

              }
            }
          }
        });


      },getValue:function (val) {
        if(val != undefined){
          return val.value
        }else{
          return ''
        }
      }, 
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getSchedualPatientList();
      },
      changeSearchMode: function() {
        if (this.search_mode == 1) {
          this.search_mode = 2
        } else {
          this.search_mode = 1
        }
      },
      searchPatientAction: function() {
        this.listQuery.keywords = this.patient_search_keyword
        console.log(this.patient_search_keyword)
        if (this.patient_search_keyword.length == 0) {
          return
        }
        this.getSchedualPatientList()
      },

     
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .app-container {
    // margin: 20px;
    font-size: 15px;
    .filter-container {
      padding-bottom: 5px;
    }
    .search-component {
      width: 500px;
      .searchBox {
        width: 300px;
        height: 36px;
        line-height: 36px;
        padding-left: 15px;
        border: 1px #dcdfe6 solid;
        border-right: none;
        outline: none;
        float: left;
        border-radius: 6px 0 0 6px;
        font-size: 14px;
        color: #333;
        background: #fff;
        box-shadow: 3px 3px 4px rgba(135, 135, 135, 0.05);
      }
      .searchBtn {
        background-color: #409eff;
        color: #fff;
        font-size: 15px;
        text-align: center;
        height: 36px;
        line-height: 36px;
        float: left;
        outline: none;
        width: 70px;
        border: none;
        border-radius: 0 6px 6px 0;
        font-family: "Microsoft Yahei";
        cursor: pointer;
      }
    }
    
    .amount {
      font-weight: normal;
      padding: 10px 0 0 0;
      color: #606266;
      font-size: 14px;
      span {
        color: #ef2525;
        font-family: "Arial";
        padding: 0 2px;
      }
    }
  }
</style>