xt_pad/src/pages/main/DialysisArea.vue

<template>
  <div>
    <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>
      </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-show="filtedScheduals.length == 0">
        <img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt>
      </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>
</template>

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

export default {
  name: "DialysisArea",
  components: {
    PatientBox,
    Popover,
    Datetime
  },
  data() {
    return {
      timer:null,
      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;
      }

      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 (
            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
          });
        }
      }
      return schedules;
    }
  },
  created() {
    this.requestDialysisScheduals();
  },
  mounted(){
  this.timer =   window.setInterval(() => {
      setTimeout(this.requestDialysisScheduals(), 0)
    }, 30000)
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    handletimeType: function(index) {
      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
      });
    },
    handleZoneChange: function(index) {
      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
      });
    },
    handleScheduleDateChange: function(date) {
      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
      });
      this.requestDialysisScheduals();
    },

    requestDialysisScheduals() {
      var type = 0;
      getDialysisScheduals({ type: type, date: this.selected_date_str })
        .then(rs => {
          var resp = rs.data;
          if (resp.state == 1) {
            // console.log(resp.data)
            var scheduals = resp.data.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.$toast({
              message: resp.msg
            });
          }
        })
        .catch(v => {});
    },
    openPicker() {
      this.$refs.picker.open();
    }
  }
};
</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;
  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;
      }
    }
  }
}
.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;
  }
}

</style>

<style>
.picker-toolbar {
  height: 60px;
}
.mint-datetime-action {
  line-height: 60px;
  font-size: 0.34rem;
}
</style>