Pad_New/src/pages/main/index.vue

<template>
  <div class="mainBox">
    <div class="newBox">
      <div class="mainContent">
        <record-page
          @refAdvice="refAdvice"
          :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 "@/styles/style.scss";
// import "@/styles/media.scss";
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,
      sqls: [
        window.matchMedia("(max-width:418px)"), //和CSS一样，也要注意顺序！
        window.matchMedia("(max-width:768px)"),
        window.matchMedia("(max-width:992px)"),
        window.matchMedia("(max-width:1200px)")
      ]
    };
  },
  components: {
    RecordPage,
    SideBar
  },
  created() {
    this.mediaMatches();
    for (var i = 0; i < this.sqls.length; i++) {
      sqls[i].addListener(this.mediaMatches);
    }
    // document.documentElement.style.fontSize = 30 + "px";
    // this.requestScheduals()
    // this.requestDialysisScheduals()
  },
  mounted() {
    //  console.log("更新")
    // this.timer = window.setInterval(() => {
    //   setTimeout(this.requestScheduals(), 0)
    // }, 10000)
    // this.timerDia = window.setInterval(() => {
    //   setTimeout(this.requestDialysisScheduals(), 0)
    // }, 10000)
  },
  // beforeDestroy () {
  //   clearInterval(this.timer)
  //   this.timer = null
  //   this.$once('hook:beforeDestroy', () => {
  //     clearInterval(this.timer)
  //   })

  //   clearInterval(this.timerDia)
  //   this.timerDia = null
  //   this.$once('hook:beforeDestroy', () => {
  //     clearInterval(this.timerDia)
  //   })
  // },
  methods: {
    refAdvice() {
      this.requestScheduals();
      this.requestDialysisScheduals();
    },
    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()
    },
    mediaMatches() {
      let sqls = [
        // window.matchMedia("(max-width:418px)"), //和CSS一样，也要注意顺序！
        window.matchMedia("(max-width:767px)"),
        window.matchMedia("(max-width:992px)"),
        window.matchMedia("(max-width:1200px)")
      ];
      if (sqls[0].matches) {
        console.log(">418 & <=768"); // do something...
        document.documentElement.style.fontSize = 30 + "px";
      } else if (sqls[2].matches) {
        console.log(">768 & <=992"); // do something...
      } else if (sqls[3].matches) {
        console.log("> 992 & <=1200"); // do something...
      } else {
        console.log(">1200");
      }
    }
  },
  computed: {
    readNum: function() {
      return this.unReadWaitNum + this.unReadDialysisNum;
    }
  }
};
</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>