xt_vue/src/xt_pages/home/index.vue

<template>
<div class="main-contain">
  <!-- <div class="position">
    <bread-crumb></bread-crumb>
  </div> -->
  <section class=" app-container app-main-bg">
    <div class="home-page">
      <div class="search clearfix">
        <input type="text" class="search-input" placeholder="病人姓名/透析号" v-model="searchKey" >
        <button class="search-button" @click="clickSearch">搜索</button>
      </div>
      <div class="ui-step clearfix">
        <h2 class="ui-step-tit">病人透析治疗流程</h2>
        <ul class="ui-step-ul">
          <li v-for="(item, index) in steps" :key="index" class="ui-step-done">
            <div class="ui-step-number"><i /></div>
            <div class="ui-step-title">{{ item.title }}</div>
          </li>
        </ul>
      </div>
      <!-- <el-steps :active="5" align-center>
          <el-step  v-for="(item, index) in steps" :key="index" :title="item.title"></el-step>
      </el-steps> -->
      <div class="config-process">
        <h2 class="title">系统使用配置流程</h2>
        <ul class="process">
          <router-link v-for="(item, index) in process" tag="li" class="items" :key="index" :to="item.link">
              <img :src="item.imgUrl" >
              <p class="name">{{ item.name }}</p>
          </router-link>
        </ul>
      </div>
    </div>
    <div class="main-r">
        <div class="res-widget">
          <ul>
            <li class="taocan-title clearfix">
              <div class="taocan-h2 ">{{subscibeBan.used}}</div>
              <div class="bar"></div>
              <div class="taocan-h1 ">{{subscibeBan.name}}</div>
            </li>
            <li class="taocan-item">
              <div class="ng-binding" :title="subscibeBan.desc">{{subscibeBan.desc}}</div>
            </li>
            <!-- <li class="taocan-item">
              <div class="ng-binding" :title="subscibeBan.detail">{{subscibeBan.detail}}</div>
            </li>
            <li class="taocan-item" v-if="this.subscibe.state==3 || this.subscibe.state==2 || leftTime<0">
              <div class="ng-binding" style="color:red" >如果您已经购买，请尝试重新登录刷新</div>
            </li>

            <li class="taocan-xufei">
              <div class="m-t-md" v-if="subscibeBan.leave"><div class="taocan-left-tip">{{subscibeBan.leave}}</div></div>
              <div class="taocan-leftday">
                <div class="taocan-left"></div>
                <div class="taocan-use clearfix" :style="subscibeBan.pce"></div>
              </div>
                <a class="btn clearfix" v-if="subscibeBan.pay_status" href="javascript:0" @click="openPay">立即购买</a>
            </li> -->
          </ul>
        </div>

        <div class="res-widget" v-if="patientData.length > 0">

          <ul>
            <li class="taocan-title clearfix">
              <div class="bar"></div>
              <div class="taocan-h1 ">传染病检查提醒通知</div>
            </li>

          </ul>
          <el-table
            :data="patientData"
            style="width: 100%"
            highlight-current-row
            :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}"
          >

            <el-table-column label="姓名" align="center">
              <template slot-scope="scope">
                {{scope.row.name}}
              </template>
            </el-table-column>


            <el-table-column label="检查日期" align="center">
              <template slot-scope="scope">
               <span v-if="dateCompare(scope.row.infectious_next_record_time) == 1">{{ scope.row.infectious_next_record_time | parseTime('{y}-{m}-{d}')}}</span>
                <span v-if="dateCompare(scope.row.infectious_next_record_time) == 2" style="color: red">{{ scope.row.infectious_next_record_time | parseTime('{y}-{m}-{d}')}}</span>

              </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="jump(scope.row.id)"
                  >查看
                  </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="5"
            background
            style="margin-top:20px;float: right"
            :total="total">
          </el-pagination>
        </div>

     </div>


  </section>
  </div>

</template>
<script>
import { GetServerTime } from '@/api/public'
import { GetPatientTotal,GetRemind } from '@/api/patient'
import BreadCrumb from '@/xt_pages/components/bread-crumb'
export default {
  name: 'Home',
  components: {
    BreadCrumb
  },
  data() {
    return {
      searchKey: '',
      patientTotal: 0,
      patientData:[],
      steps: [
        { title: '透析处方' },
        { title: '接诊评估' },
        { title: '透前评估' },
        { title: '临时医嘱' },
        { title: '双人核对' },
        { title: '透析上机' },
        { title: '透析监测' },
        { title: '透析下机' },
        { title: '透后评估' },
        { title: '治疗小结' }
      ],
      process: [
        {
          imgUrl: require('../../assets/home/equipment.png'),
          name: '设备管理',
          link: '/device/main'
        },
        {
          imgUrl: require('../../assets/home/user.png'),
          name: '病人管理',
          link: '/patients/patients'
        },
        // { imgUrl: require('../../assets/home/sick.png'), name: '登记病人', link: '/patients/create' },
        // { imgUrl: require('../../assets/home/prescription.png'), name: '透析处方', link: '/dialysis/paper' },
        {
          imgUrl: require('../../assets/home/scheduling.png'),
          name: '病人排班',
          link: '/workforce/appointment'
        },
        {
          imgUrl: require('../../assets/home/record.png'),
          name: '透析记录',
          link: '/dialysis/dialysisrecord'
        },
        {
          imgUrl: require('../../assets/home/analyze.png'),
          name: '透析监控',
          link: '/dialysis/watch'
        }
      ],
      subscibe: {},
      subscibeBan: {
        used: '已使用0天',
        name: '免费版本',
        desc: '当前为免费版',
        detail: '可管理100位（含）以下患者',
        leave: '剩余0天',
        pay_status: false
      },
      serverTime: 0,
      leftTime: false,
      total:0,
      page: 0,
      limit:5,
    }
  },
  methods: {
    dateCompare(date){
      var date1 =  Date.parse(new Date())/1000;
      console.log(date)
      console.log(date1)
     if (date > date1){
       return 1
     }else{
       return 2

     }


    },
    jump(id){
      this.$router.push({ path: "patients/inspection?id="+id});
    },
    handleSizeChange(val) {

    }, handleCurrentChange(val) {
      this.page = val
      let params = {
        page : this.page,
        limit: 5,
      }
      this.GetRemindPatientList(params)
    },
    GetRemindPatientList(params){
      GetRemind(params).then(response => {
        if (response.data.state == 1) {
          this.patientData = response.data.data.patients
          this.total = response.data.data.total
        } else {
          this.$message.error(response.data.msg)
        }
      }).catch(e => {
      })
    },
    GetPatientTotal() {
      GetPatientTotal().then(response => {
        if (response.data.state == 1) {
          this.patientTotal = response.data.data.total
        } else {
          this.$message.error(response.data.msg)
        }
      }).catch(e => {

      })
    },
    clickSearch() {
      if (this.searchKey.length > 0) {
        this.$router.push('/patients/patients?keyword=' + this.searchKey)
      } else {
        this.$router.push('/patients/patients')
      }
    },
    openPay() {
      this.$router.push('/service/buy')
    },
    GetServerTime() {
      GetServerTime().then(response => {
        if (response.data.state == 1) {
          this.serverTime = response.data.data.timestamp
        } else {
          this.serverTime = Math.round(new Date().getTime() / 1000)
        }
      }).catch(() => {
        this.serverTime = Math.round(new Date().getTime() / 1000)
      })
    },
    initSubscibe() {
      // state:1正版(标准),2试用(免费),3其他无效状态,8专业,9(永久免费)，标准版和专业版会过期
      var used = Math.ceil((this.serverTime - this.subscibe.period_start) / 86400)

      var leave = ''
      var pce = ''

      var leaveTime = 0

      this.subscibe.state = 2// 强制改为免费版

      switch (this.subscibe.state) {
        case 9:
          this.subscibeBan = {
            used: '已使用' + used + '天',
            name: '永久版',
            desc: '当前为永久免费版本',
            detail: '该版本不会过期，并可使用所有功能',
            leave: '',
            pay_status: false,
            pce: 'width:100%'
          }
          break
        case 2:
          // 免费版本不会过期，但有人数限制，免费版，可以管理20位（含）以下患者，当患者数过了20位，系统不能正常使用，达到18位时，要提醒购买,超过60位，要购买专业版
          pce = 0
          if (this.patientTotal > 200) {
            leave = '管理患者数已达' + this.patientTotal + '位，请购买专业版'
            pce = 100
          } else if (this.patientTotal > 100) {
            leave = '管理患者数已达' + this.patientTotal + '位，请购买标准版'
            pce = 100
          } else if (this.patientTotal >= 90) {
            leave = '管理患者数已达' + this.patientTotal + '位，建议购买标准版'
            pce = Math.round(this.patientTotal / 100 * 100)
          }
          pce = 'width:' + pce + '%'
          this.subscibeBan = {
            used: '已使用' + used + '天',
            name: '免费版',
            desc: '当前为免费版',
            detail: '可管理100位（含）以下患者',
            leave: leave,
            pay_status: !!leave,
            pce: pce
          }
          break
        case 8:
          leaveTime = this.subscibe.period_end - this.serverTime
          this.leftTime = leaveTime
          if (leaveTime < 0) {
            leave = '已经过期'
            pce = '100'
          } else {
            leave = Math.floor(leaveTime / 86400)
            leave = leave > 30 ? '' : '剩余' + leave + '天'
            pce = 100 - Math.round(leaveTime / (this.subscibe.period_end - this.subscibe.period_start) * 100)
          }
          pce = 'width:' + pce + '%'

          this.subscibeBan = {
            used: '已使用' + used + '天',
            name: '专业版',
            desc: '当前为专业版',
            detail: '不限患者',
            leave: leave,
            pay_status: !!leave,
            pce: pce
          }
          break
        case 1:
          leaveTime = this.subscibe.period_end - this.serverTime
          this.leftTime = leaveTime
          if (leaveTime < 0) {
            leave = '已经过期'
            pce = '100'
          } else if (this.patientTotal > 200) {
            leave = '管理患者数已达' + this.patientTotal + '位，请购买专业版'
            pce = 'width:100%'
          } else if (this.patientTotal >= 190) {
            leave = '管理患者数已达' + this.patientTotal + '位，建议购买专业版'
            pce = Math.round(this.patientTotal / 200 * 100)
          } else {
            leave = Math.floor(leaveTime / 86400)
            leave = leave > 30 ? '' : '剩余' + leave + '天，建议购买标准版'
            pce = 100 - Math.round(leaveTime / (this.subscibe.period_end - this.subscibe.period_start) * 100)
          }
          pce = 'width:' + pce + '%'

          this.subscibeBan = {
            used: '已使用' + used + '天',
            name: '标准版',
            desc: '当前为标准版',
            detail: '可管理200位（含）以下患者',
            leave: leave,
            pay_status: !!leave,
            pce: pce
          }
          break

        default:
          this.subscibeBan = {
            used: '',
            name: '未订阅服务',
            desc: '当前未订阅服务',
            detail: '无法使用血透系统',
            leave: '',
            pay_status: true,
            pce: ''
          }
          break
      }
    }

  },
  created() {
    this.subscibe = this.$store.getters.xt_user.subscibe
    this.GetPatientTotal()
    this.GetServerTime()
    let params = {
      page : this.page+1,
      limit: this.limit,
    }
    this.GetRemindPatientList(params)
  },
  watch: {
    serverTime: function() {
      if (this.serverTime > 0 && this.patientTotal > 0) {
        this.initSubscibe()
      }
    },
    patientTotal: function() {
      if (this.serverTime > 0 && this.patientTotal > 0) {
        this.initSubscibe()
      }
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-main-bg {
  // background: #f6f8f9;
  min-height: calc(100vh - 140px);
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px;
  margin-top:15px;
  .home-page {
    font-family: "Microsoft Yahei";
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    .search {
      margin: 0 auto;
      margin-top: 16px;
      width: 472px;
      .search-input {
        width: 400px;
        height: 42px;
        line-height: 42px;
        padding-left: 15px;
        border: 1px #ebeef0 solid;
        border-right: none;
        outline: none;
        float: left;
        border-radius: 6px 0 0 6px;
        font-size: 14px;
        color: #333;
        background: #fff;
        box-shadow: 3px 3px 4px rgba(135, 135, 135, 0.05);
      }
      .search-button {
        background-color: #409eff;
        color: #fff;
        font-size: 15px;
        text-align: center;
        height: 42px;
        line-height: 42px;
        float: left;
        outline: none;
        width: 70px;
        border: none;
        border-radius: 0 6px 6px 0;
        font-family: "Microsoft Yahei";
        cursor: pointer;
        -webkit-box-shadow: 3px 3px 4px rgba(135, 135, 135, 0.05);
        box-shadow: 3px 3px 4px rgba(135, 135, 135, 0.05);
      }
    }
    .ui-step {
      margin: 20px 6px 0 6px;
      padding: 10px 0 20px 0;
      zoom: 1;
      background: #fff;
      box-shadow: 0 4px 12px rgba(135, 135, 135, 0.15);
      .ui-step-tit {
        font-size: 18px;
        text-align: center;
        color: #34495e;
        font-weight: 700;
        height: 50px;
        line-height: 50px;
      }
      .ui-step-ul {
        list-style: none;
        .ui-step-done {
          float: left;
          position: relative;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          text-align: center;
          width: 10%;
          &:before,
          &:after {
            position: absolute;
            left: 0;
            top: 21px;
            display: block;
            content: " ";content: " ";
            width: 50%;
            height: 1px;
            background: #409eff;
            z-index: 1;
          }
          &:after {
            left: 50%;
          }
          &:first-child:before,
          &:last-child::after {
            width: 0;
          }
          .ui-step-title {
            color: #34495e;
            font-size: 13px;
            font-weight: normal;
            line-height: 18px;
          }
          .ui-step-number {
            position: relative;
            display: inline-block;
            width: 22px;
            height: 22px;
            margin: 10px 0;
            line-height: 22px;
            background: #409eff;
            color: #fff;
            border-radius: 100%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            z-index: 2;
            border: 1px #409eff solid;
            i {
              position: absolute;
              left: 4px;
              top: 6px;
              width: 12px;
              height: 6px;
              border: 2px #fff solid;
              color: #fff;
              z-index: 9;
              border-top: none;
              border-right: none;
              transform: rotate(-45deg);
              -webkit-transform: rotate(-45deg);
              -moz-transform: rotate(-45deg);
              -ms-transform: rotate(-45deg);
              -o-transform: rotate(-45deg);
            }
          }
        }
      }
    }
    .config-process {
      margin-top: 30px;
      .title {
        font-size: 18px;
        text-align: center;
        color: #34495e;
        font-weight: 700;
        height: 50px;
        line-height: 50px;
      }
      .process {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding-left: 0;
        .items {
          list-style: none;
          box-shadow: 0 4px 12px rgba(135, 135, 135, 0.15);
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1;
          margin: 0 6px;
          background: #fff;
          padding: 22px 0 ;
          cursor: pointer;
          .name {
            font-size: 14px;
            color: #34495e;
            line-height: 24px;
          }
        }
      }
    }
  }
  .main-r {
    min-width: 290px;
    margin: 0 0 0 10px;
    .res-widget {

      min-height: 80px;
      background: #fff;
      padding: 10px 20px;
      margin-bottom: 15px;
      border-radius: 2px;
      // box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
          -webkit-box-shadow: 0 4px 12px rgba(135, 135, 135, 0.15);
    box-shadow: 0 4px 12px rgba(135, 135, 135, 0.15);
      background-color: #fff;
      color: #34495e;
      font-size: 12px;
      ul {
        padding: 0;
        margin: 0;
        .taocan-title {
          font-weight: 700;
          padding: 10px 0;
          list-style: none;
          .taocan-h2 {
            font-weight: 400;
            float: right;
            font-size: 12px;
            color: gray;
          }
          .bar {
            display: inline-block;
            width: 3px;
            height: 14px;
            background-color: #2589ff;
            float: left;
            margin-top: 1px;
          }
          .taocan-h1 {
            padding-left: 5px;
            overflow: hidden;
            display: inline-block;
            font-size: 14px;
            font-weight: 700;
            float: left;
          }
        }

        .taocan-item {
          border-bottom: 1px solid #f1f1f1;
          padding: 10px 0;
          font-size: 12px;
        }
        .taocan-xufei {
          text-align: center;
          .m-t-md {
            margin-top: 20px;
            text-align: right;
            .taocan-left-tip {
              position: relative;
              font-size: 11px;
              border-radius: 1px;
              padding: 2px;
              display: inline-block;
              color: #ff7979;
              &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: #ff7979;
                opacity: 0.2;
                border-radius: 1px;
              }
            }
          }
          .taocan-leftday {
            position: relative;
            height: 4px;
            margin: 5px 0 10px;
            .taocan-left {
              z-index: 1;
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              border-radius: 2px;
              background: #f2f2f6;
            }
            .taocan-use {
              max-width: 100%;
              position: absolute;
              left: 0;
              z-index: 2;
              top: 0;
              bottom: 0;
              border-radius: 2px;
              background: #ff7979;
              text-align: center;
            }
          }

          .btn {
            display: inline-block;
            margin-bottom: 0;
            font-weight: 400;
            text-align: center;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            background-image: none;
            border: 1px solid transparent;
            white-space: nowrap;
            padding: 6px 12px;
            font-size: 12px;
            line-height: 1.3rem;
            border-radius: 4px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            width: 100%;
            background-color: #ff7979;
            border-color: #ff7979;
            color: #fff;
          }
        }
      }
      .notice-widget {
        .notice-title {
          font-weight: 700;
          padding: 10px 0;
          .pull-right {
            display: inline-block !important;
            float: right !important;
            .notice-more {
              color: #409eff !important;
              font-weight: 400 !important;
            }
          }
          .bar {
            display: inline-block;
            width: 3px;
            height: 14px;
            background-color: #2589ff;
            float: left;
          }
          .notice-h1 {
            padding-left: 5px;
            overflow: hidden;
            font-size: 14px;
          }
        }
        .notice-item {
          border-bottom: 1px solid #f1f1f1;
          padding: 10px 0;
          .text-muted {
            color: #9797a1 !important;
            display: inline-block !important;
            float: right !important;
            font-size: 12px;
            margin: 3px 0 0 0;
          }
          .text {
            a {
              line-height: 20px;
            }
          }
        }
      }
    }
  }
}

@media (min-width: 768px) {
  .main-r {
    width: 16.66666667%;
  }
}
</style>