Vue_New/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 {
      dialogVisible: false,

      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;
      const 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();
    const 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%;
  }
}
.newLine {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
}
</style>