xt_pad/src/pages/main/index.vue

<template>
  <div class="mainBox">
    <div class="newBox">
      <div class="mainContent">
        <record-page
          :un_read_wait_num="unReadWaitNum"
          :un_read_dialysis_num="unReadDialysisNum"
        ></record-page>
      </div>
      <side-bar :active_index="0" :total_read_dot="readNum"></side-bar>
    </div>
  </div>
</template>

<script>
import RecordPage from "./RecordPage";
import SideBar from "@/pages/layout/SideBar";
import { getDialysisScheduals, getWaitingScheduals } from "@/api/dialysis";
import { parseTime } from "@/utils/index";

export default {
  name: "Main",
  data() {
    return {
      timer: null,
      scheduals: [],
      advice_groups: [],
      unReadWaitNum: 0,
      unReadDialysisNum: 0
    };
  },
  components: {
    RecordPage,
    SideBar
  },
  created() {
    this.requestScheduals();
    this.requestDialysisScheduals();
  },
  methods: {
    requestScheduals() {
      var storedata = this.$store.getters.waitscheduals;
      var scheduals = storedata.waitscheduals;
      if (Object.keys(storedata).length > 0) {
        this.scheduals = scheduals;
        console.log(this.scheduals);
        let doctorAdvice = [];
        for (let i = 0; i < this.scheduals.length; i++) {
          for (let y = 0; y < this.scheduals[i].doctor_advice.length; y++) {
            if (this.scheduals[i].dialysis_order == null) {
              if (this.scheduals[i].doctor_advice[y].execution_state == 2) {
                doctorAdvice.push(this.scheduals[i].doctor_advice[y]);
              }
            }
          }
        }

        const sorted = this.groupBy(doctorAdvice, function(item) {
          return [item.groupno];
        });
        this.unReadWaitNum = sorted.length;
      } else {
        var date = parseTime(Date.parse(new Date()), "{y}-{m}-{d}");
        getWaitingScheduals({ date: date }).then(rs => {
          var resp = rs.data;
          this.$store.dispatch("SetRequestScheduals", { resp });
          // console.log(resp);
          if (resp.state == 1) {
            var scheduals = resp.data.scheduals;
            this.scheduals = scheduals;
            console.log(this.scheduals);
            let doctorAdvice = [];
            for (let i = 0; i < this.scheduals.length; i++) {
              for (let y = 0; y < this.scheduals[i].doctor_advice.length; y++) {
                if (this.scheduals[i].dialysis_order == null) {
                  if (this.scheduals[i].doctor_advice[y].execution_state == 2) {
                    doctorAdvice.push(this.scheduals[i].doctor_advice[y]);
                  }
                }
              }
            }

            const sorted = this.groupBy(doctorAdvice, function(item) {
              return [item.groupno];
            });

            this.unReadWaitNum = sorted.length;
          } else {
            this.$toast({
              message: resp.msg
            });
          }
        });
      }
    },
    requestDialysisScheduals() {
      var storedata = this.$store.getters.scheduals;
      var scheduals = storedata.scheduals;
      if (Object.keys(storedata).length > 0) {
        let doctorAdvice = [];
        for (let index = 0; index < scheduals.length; index++) {
          const schedual = scheduals[index];
          if (schedual.dialysis_order == null) {
            continue;
          }
          for (let y = 0; y < schedual.doctor_advice.length; y++) {
            if (schedual.doctor_advice[y].execution_state == 2) {
              doctorAdvice.push(schedual.doctor_advice[y]);
            }
          }
        }

        const sorted = this.groupBy(doctorAdvice, function(item) {
          return [item.groupno];
        });

        this.unReadDialysisNum = sorted.length;
      } else {
        var date = this.$store.getters.app.dialysis_area.schedule_date;
        var type = 0;
        getDialysisScheduals({
          type: type,
          date: parseTime(date, "{y}-{m}-{d}")
        })
          .then(rs => {
            var resp = rs.data;
            this.$store.dispatch("SetRequestDialysisScheduals", { resp });
            if (resp.state == 1) {
              var scheduals = resp.data.scheduals;
              let doctorAdvice = [];
              for (let index = 0; index < scheduals.length; index++) {
                const schedual = scheduals[index];
                if (schedual.dialysis_order == null) {
                  continue;
                }
                for (let y = 0; y < schedual.doctor_advice.length; y++) {
                  if (schedual.doctor_advice[y].execution_state == 2) {
                    doctorAdvice.push(schedual.doctor_advice[y]);
                  }
                }
              }

              const sorted = this.groupBy(doctorAdvice, function(item) {
                return [item.groupno];
              });

              this.unReadDialysisNum = sorted.length;
            } else {
              this.$toast({
                message: resp.msg
              });
            }
          })
          .catch(v => {});
      }
    },
    groupBy(array, f) {
      const groups = {};
      array.forEach(function(o) {
        const group = JSON.stringify(f(o));
        groups[group] = groups[group] || [];
        groups[group].push(o);
      });
      return Object.keys(groups).map(function(group) {
        return groups[group];
      });
    },
    getData() {
      console.log("111111");
      // this.requestScheduals()
      // this.requestDialysisScheduals()
    }
  },
  computed: {
    readNum: function() {
      return this.unReadWaitNum + this.unReadDialysisNum;
    }
  },
  mounted() {
    this.timer = window.setInterval(() => {
      setTimeout(this.getData(), 0);
    }, 30000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
html,
body {
  height: 100%;
}
.mainBox {
  height: 100%;
  font-size: 0.3rem;
  .sideColumn {
    .column {
      .head {
        @include display-flex;
        @include align-items-center;
        @include flex-direction;
        @include text-align;
        @include justify-content-center;
        margin: 0.5rem 0 0.5rem 0;
        img {
          width: 100%;
          height: 100%;
          border-radius: 0.5rem;
          width: 0.7rem;
          height: 0.7rem;
        }
      }
      .sidebar {
        @include display-flex;
        @include align-items-center;
        @include flex-direction;
        @include text-align;
        padding: 0;
        li {
          padding: 0 0 0.8rem 0;
          a {
            color: #a8b3ba;
            display: inline-block;
            padding: 0;
            margin: 0;
            p {
              font-size: 0.24rem;
              margin-top: 0.2rem;
            }
            .iconfont {
              font-size: 0.5rem;
              display: inline-block;
            }
          }
          &.active {
            a {
              color: #409eff;
            }
          }
        }
      }
    }
  }
}
.mainContent {
  // margin: 0 0 0 1.58rem;
}
.newBox {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  > :first-child {
    flex: 1;
    overflow: auto;
  }
}
</style>