xt_pad/src/pages/main/index.vue

<template>

  <div class="mainBox">
    <div>
    <side-bar :active_index="0" :total_read_dot="readNum"></side-bar>
    <div class="mainContent">
      <record-page :un_read_wait_num="unReadWaitNum" :un_read_dialysis_num="unReadDialysisNum"></record-page>
    </div>
    </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 date = parseTime(Date.parse(new Date()), '{y}-{m}-{d}')
        getWaitingScheduals({date: date}).then(rs => {
          var resp = rs.data
          // 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].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 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
            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;
  }

</style>