xt_pad/src/pages/main/DialysisArea.vue

<template>
  <div>
    <div v-loading="loading">
      <div class="screening">
        <ul>
          <el-popover
            v-model="zone_options_visible"
            placement="bottom"
            trigger="click"
          >
            <li slot="reference">
              {{
                zones.length <= 1 && zone_selected > 0
                  ? "全部分区"
                  : zones[zone_selected].text
              }}
              <span class="iconfont">&#xe74a;</span>
            </li>

            <div class="popover-demo-content">
              <ul>
                <li
                  v-for="(zone, index) in zones"
                  :key="zone.value"
                  @click="handleZoneChange(index)"
                  :class="zone_selected == index ? 'tick' : ''"
                >
                  {{ zone.text }}
                </li>
              </ul>
            </div>
          </el-popover>

          <el-popover
            v-model="sch_type_options_visible"
            placement="bottom"
            trigger="click"
          >
            <li slot="reference">
              {{ schedual_types[schedual_type_selected].text }}
              <span class="iconfont">&#xe74a;</span>
            </li>
            <div class="popover-demo-content">
              <ul>
                <li
                  v-for="schedualType in schedual_types"
                  :key="schedualType.value"
                  @click="handletimeType(schedualType.value)"
                  :class="
                    schedual_type_selected == schedualType.value ? 'tick' : ''
                  "
                >
                  {{ schedualType.text }}
                </li>
              </ul>
            </div>
          </el-popover>

          <li @click="openPicker()">
            {{ selected_date_str }}
            <span class="iconfont">&#xe74a;</span>
          </li>

          <li @click="mypatient()">
            我的病人
            <span class="iconfont">&#xe74a;</span>
          </li>

        </ul>
      </div>

      <div class="stateBox">
        <div v-for="(item, index) in filtedScheduals" :key="index">
          <h2 class="title">{{ item.zone_name }}</h2>
          <patient-box
            class="clearfix"
            :patients="item.scheduals"
          ></patient-box>
        </div>
        <div class="NoData" v-if="filtedScheduals.length == 0 && networkStates">
          <img
            style="margin-top: 50px; margin-bottom: 50px"
            src="@/assets/login/data.jpg"
            alt
          />
        </div>
        <div
          class="NoData"
          v-if="!networkStates"
          style="display: block;text-align: center"
        >
          <p style="margin-top: 100px;font-size: 18px">
            网络异常，请点击重新加载
          </p>

          <!--<img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/no_network.jpg" alt="">-->
          <van-button
            slot="button"
            size="normal"
            type="info"
            style="display:block;margin:0 auto"
            @click="reloads()"
            >重新加载
          </van-button>
        </div>
      </div>
      <mt-datetime-picker
        v-model="selected_date"
        ref="picker"
        type="date"
        year-format="{value} "
        month-format="{value} "
        date-format="{value} "
        @confirm="handleScheduleDateChange"
      ></mt-datetime-picker>
    </div>
  </div>
</template>

<script>
import PatientBox from './PatientBox'
import { Popover } from 'vux'
import { Datetime } from 'vux'
import { parseTime } from '@/utils/index'
import { getDialysisScheduals } from '@/api/dialysis'
import { Toast } from 'vant'

export default {
  name: 'DialysisArea',
  components: {
    PatientBox,
    Popover,
    Datetime
  },
  inject: ['reload'],
  data () {
    return {
      loading: false,
      user_id: 0,
      networkStates: true,
      timer: null,
      ismypatient: this.$store.getters.app.dialysis_area.ismypatient,
      selected_date: this.$store.getters.app.dialysis_area.schedule_date, // new Date(),
      schedual_types: [
        { value: 0, text: '全部班', select: true },
        { value: 1, text: '上午', select: false },
        { value: 2, text: '下午', select: false },
        { value: 3, text: '晚上', select: false }
      ],
      schedual_type_selected: this.$store.getters.app.dialysis_area
        .schedule_type_select_index,

      zone_selected: this.$store.getters.app.dialysis_area.zone_select_index,
      zones: [{ value: 0, text: '全部分区', select: true }],
      dialysis_scheduals: [],

      zone_options_visible: false,
      sch_type_options_visible: false
    }
  },
  props: {
    search_keyword: {
      type: String,
      default: ''
    }
  },
  computed: {
    selected_date_str: function () {
      return parseTime(this.selected_date, '{y}-{m}-{d}')
    },

    filtedScheduals: function () {
      if (this.dialysis_scheduals.length == 0) {
        return []
      }

      var search_keyword = this.search_keyword
      if (search_keyword.length > 0) {
        var schedules = []
        for (let o_i = 0; o_i < this.dialysis_scheduals.length; o_i++) {
          const scheduleInfo = this.dialysis_scheduals[o_i]
          var originSchedules = scheduleInfo.scheduals
          if (originSchedules.length == 0) {
            continue
          }
          var filtedSchedules = []
          for (let s_i = 0; s_i < originSchedules.length; s_i++) {
            const schedule = originSchedules[s_i]
            if (
              schedule.patient.name.indexOf(search_keyword) != -1 ||
              schedule.patient.dialysis_no.indexOf(search_keyword) != -1
            ) {
              filtedSchedules.push(schedule)
              break
            }
          }
          if (filtedSchedules.length > 0) {
            schedules.push({
              zone_name: scheduleInfo.zone_name,
              scheduals: filtedSchedules
            })
          }
        }
        return schedules
      }
      if (this.ismypatient) {
        var zone_selected = this.zone_selected
        var timetype_selected = this.schedual_type_selected
        var zone_name = zone_selected == 0 ? '' : this.zones[zone_selected].text
        var schedules = []
        for (let o_i = 0; o_i < this.dialysis_scheduals.length; o_i++) {
          const scheduleInfo = this.dialysis_scheduals[o_i]
          var originSchedules = scheduleInfo.scheduals
          if (originSchedules.length == 0) {
            continue
          }
          var filtedSchedules = []
          for (let s_i = 0; s_i < originSchedules.length; s_i++) {
            const schedule = originSchedules[s_i]
            if (schedule.dialysis_order.start_nurse == this.user_id ) {
              if (zone_name.length == 0 || (zone_name.length > 0 && zone_name == schedule.device_number.zone.name)) {
                if (timetype_selected == 0 || schedule.schedule_type == timetype_selected) {
                  filtedSchedules.push(schedule)
                }
              }
              // break;
            }
          }
          if (filtedSchedules.length > 0) {
            schedules.push({
              zone_name: scheduleInfo.zone_name,
              scheduals: filtedSchedules
            })
          }
        }
        return schedules
      }

      var zone_selected = this.zone_selected
      var timetype_selected = this.schedual_type_selected
      if ((zone_selected == 0 && timetype_selected == 0) || this.zones.length <= 1) {
        return this.dialysis_scheduals
      }

      var zone_name = zone_selected == 0 ? '' : this.zones[zone_selected].text
      var schedules = []
      for (let o_i = 0; o_i < this.dialysis_scheduals.length; o_i++) {
        const scheduleInfo = this.dialysis_scheduals[o_i]
        var originSchedules = scheduleInfo.scheduals
        var filtedSchedules = []
        for (let s_i = 0; s_i < originSchedules.length; s_i++) {
          const schedule = originSchedules[s_i]
          if (this.ismypatient) {

            if (schedule.dialysis_order.creator == this.user_id) {
              filtedSchedules.push(schedule)
            }
          } else {
            if (zone_name.length == 0 || (zone_name.length > 0 && zone_name == schedule.device_number.zone.name)) {
              if (timetype_selected == 0 || schedule.schedule_type == timetype_selected) {
                filtedSchedules.push(schedule)
              }
            }
          }
        }
        if (filtedSchedules.length > 0) {
          schedules.push({
            zone_name: scheduleInfo.zone_name,
            scheduals: filtedSchedules
          })
        }
      }
      this.ismypatient = false
      return schedules
    }
  },

  created () {
    this.user_id = this.$store.getters.user.user.id

    var storedata = this.$store.getters.scheduals
    var scheduals = storedata.scheduals
    if (Object.keys(storedata).length > 0) {
      var zoneMap = {}
      var schedualMap = {}
      for (let index = 0; index < scheduals.length; index++) {
        const schedual = scheduals[index]
        if (schedual.dialysis_order == null) {
          continue
        }
        if (schedualMap[schedual.device_number.zone.name] == null) {
          schedualMap[schedual.device_number.zone.name] = []
        }
        schedualMap[schedual.device_number.zone.name].push(schedual)
        if (zoneMap[schedual.device_number.zone.name] == null) {
          zoneMap[schedual.device_number.zone.name] =
            schedual.device_number.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
    } else {
      this.requestDialysisScheduals()
    }
  },
  mounted () {
    this.timer = window.setInterval(() => {
      setTimeout(this.requestDialysisScheduals(), 0)
    }, 30000)
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    mypatient () {
      this.search_keyword = ''
      this.ismypatient = true
      this.$emit('clear_search_keyword')
      this.$store.dispatch('SaveDialysisAreaSelectIndexs', {
        zone: this.zone_selected,
        schedule_type: this.schedual_type_selected,
        schedule_date: this.selected_date,
        ismypatient:   this.ismypatient,
      })
    },
    reloads: function () {
      this.reload()
    },
    handletimeType: function (index) {
      if(!this.ismypatient){
        this.ismypatient = false
      }
      this.sch_type_options_visible = false
      this.schedual_type_selected = index
      this.$emit('clear_search_keyword')
      this.$store.dispatch('SaveDialysisAreaSelectIndexs', {
        zone: this.zone_selected,
        schedule_type: this.schedual_type_selected,
        schedule_date: this.selected_date,
        ismypatient:   this.ismypatient,

      })
    },
    handleZoneChange: function (index) {
      if(!this.ismypatient){
        this.ismypatient = false
      }
      this.zone_options_visible = false
      this.zone_selected = index
      this.$emit('clear_search_keyword')
      this.$store.dispatch('SaveDialysisAreaSelectIndexs', {
        zone: this.zone_selected,
        schedule_type: this.schedual_type_selected,
        schedule_date: this.selected_date,
        ismypatient:   this.ismypatient,
      })
    },
    handleScheduleDateChange: function (date) {
      if(!this.ismypatient){
        this.ismypatient = false
      }
      this.zone_selected = 0
      this.schedual_type_selected = 0
      this.$emit('clear_search_keyword')
      this.$store.dispatch('SaveDialysisAreaSelectIndexs', {
        zone: this.zone_selected,
        schedule_type: this.schedual_type_selected,
        schedule_date: this.selected_date,
        ismypatient:   this.ismypatient,

      })
      this.requestDialysisScheduals()
    },

    requestDialysisScheduals () {
      // this.$toast.loading({forbidClick: true, duration: 0})
      // this.loading = true;
      var type = 0
      getDialysisScheduals({ type: type, date: this.selected_date_str })
        .then(rs => {
          this.networkStates = true
          var resp = rs.data
          if (resp.state == 1) {
            this.loading = false

            // console.log(resp.data)
            var scheduals = resp.data.scheduals
            this.$store.dispatch('SetScheduals', {scheduals: scheduals})
            var zoneMap = {}
            var schedualMap = {}
            for (let index = 0; index < scheduals.length; index++) {
              const schedual = scheduals[index]
              if (schedual.dialysis_order == null) {
                continue
              }
              if (schedualMap[schedual.device_number.zone.name] == null) {
                schedualMap[schedual.device_number.zone.name] = []
              }
              schedualMap[schedual.device_number.zone.name].push(schedual)
              if (zoneMap[schedual.device_number.zone.name] == null) {
                zoneMap[schedual.device_number.zone.name] =
                  schedual.device_number.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
          } else {
            this.loading = false

            this.$toast({
              message: resp.msg
            })
          }
        })
        .catch(error => {
          this.loading = false

          // 超时之后在这里捕抓错误信息.
          if (error.response) {
            this.networkStates = false

            console.log('error.response')
            console.log(error.response)
          } else if (error.request) {
            this.networkStates = false

            // if(error.request.readyState == 4 && error.request.status == 0){
            //   //我在这里重新请求
            //   this.networkStates = false
            // }
          } else {
            this.networkStates = false
          }
        })
    },
    openPicker () {
      this.$refs.picker.open()
    }
    // getMyPatient () {
    //   console.log('这是啥', this.zone_options_visible)
    //   console.log('日期', this.selected_date)
    // }
  }
}
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.screening {
  border-bottom: 1px #e5e5e5 solid;
  position: fixed;
  top: 63px;
  right: 0;
  z-index: 66;
  left: 1.58rem;
  background: #fff;
  @media only screen and (max-width: 812px) {
    top: 50px !important;
  }
  ul {
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-between;
    width: 60%;
    margin: 0 auto;
    li {
      font-size: 0.32rem;
      padding: 0.3rem 0;
      cursor: pointer;
      .iconfont {
        font-size: 0.32rem;
        color: #a8b3ba;
        margin-left: 0.1rem;
        @media only screen and (max-width: 812px) {
          font-size: 12px !important;
        }
      }
    }
  }
}
.stateBox {
  // padding: 0.26rem 0 0 0.6rem;
  // background: #fff;
  .title {
    font-size: 0.34rem;
    font-weight: 600;
    color: $title-color;
    height: 1rem;
    line-height: 0.8rem;
    display: inline-block;
  }
}

.shadow {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 998;
  background-color: #000;
  opacity: 0.6;
  display: none;
}
</style>

<style>
.picker-toolbar {
  height: 60px;
}
.mint-datetime-action {
  line-height: 60px;
  font-size: 0.34rem;
  @media only screen and (max-width: 812px) {
    line-height: 30px !important;
  }
}
</style>