Pad_New/src/pages/main/RecordPage.vue

<template>
  <div>
    <!-- <van-row class="top_row">
    <van-col :span="14">-->
    <div class="top_row">
      <!-- <div class="head">
        <img :src="$store.getters.user.org.org_logo" alt />
      </div>-->
      <div class="floatLeftBox">
        <div class="floatLeft">
          <!-- <span class="title">{{ $store.getters.user.org.org_short_name }}</span>
        <router-link to="/add_urgent_schedule">
          <p class="order">临时排班</p>
          </router-link>-->
          <i
            class="iconfont icon-zuojiantou jiantou"
            @click="toReturn"
          ></i>
          <span class="titleName">透析记录</span>
          <router-link to="/add_urgent_schedule">
            <p class="order">临时排班</p>
          </router-link>
          <!-- <van-icon class="icons" name="ellipsis" @click="show = true" /> -->
        </div>
        <van-popup
          v-model="show"
          closeable
          position="top"
          :style="{ height: '200px' }"
        >
          <div class="popupContent">
            <div class="popupBox">
              <div class="popupBoxOne" @click="goMonitoring">
                <img src="../../assets/images/T1.png" alt />
                <p>透析监测</p>
              </div>
              <div class="popupBoxOne" @click="goAdvice">
                <img src="../../assets/images/T2.png" alt />
                <p>透析医嘱</p>
              </div>
              <div class="popupBoxOne" @click="goSchedule">
                <img src="../../assets/images/T3.png" alt />
                <p>临时排班</p>
              </div>
            </div>
          </div>
        </van-popup>
      </div>
      <!-- </van-col> -->
      <!-- <van-col :span="6">
        <div class="department">
          <ul>
            <li style="position: relative;" :class="index == 0? 'active':'' " @click="ClickTab(0)">
              {{'候诊区'}}
              <span class="redpoint" v-if="un_read_wait_num">{{un_read_wait_num > 99 ? un_read_wait_num+'+':un_read_wait_num}}</span>
            </li>
            <li style="position: relative;" :class="index == 1? 'active':'' " @click="ClickTab(1)">
              {{'透析区'}}
              <span class="redpoint" v-if="un_read_dialysis_num">{{un_read_dialysis_num > 99 ? un_read_dialysis_num+'+':un_read_dialysis_num}}</span>
            </li>
          </ul>
        </div>
      </van-col>-->
      <!-- <van-col :span="10"> -->
      <!-- <router-link to="/add_urgent_schedule">
          <van-button size="small" type="info" class="add_schedule_btn">临时排班</van-button>
      </router-link>-->
      <!-- <div class="search">
        <van-field v-model="search_input" ref="search_field" placeholder="透析号/姓名" class="field">
          <i class="iconfont" slot="left-icon">&#xe741;</i>
          <van-button
            slot="button"
            size="small"
            type="info"
            style="border: none;"
            @click="searchWithKeyword"
          >搜索</van-button>
        </van-field>
      </div>-->
      <!-- </van-col>
      </van-row>-->
      <div class="newSearch">
        <!-- <van-field v-model="search_input" ref="search_field" placeholder="透析号/姓名" class="field">
          <i class="iconfont" slot="left-icon">&#xe741;</i>
          <van-button
            slot="button"
            size="small"
            type="info"
            style="border: none;"
            @click="searchWithKeyword"
          >搜索</van-button>
        </van-field>-->
        <el-input
          class="newinput"
          prefix-icon="el-icon-search"
          v-model="search_input"
          ref="search_field"
          placeholder="透析号/姓名"
        ></el-input>
        <p class="searchBtn" @click="searchWithKeyword">搜索</p>
      </div>
      <div class="box">
        <div class="newDepartment">
          <ul>
            <li
              style="position: relative;"
              :class="index == 0 ? 'active' : ''"
              @click="ClickTab(0)"
            >
              {{ "候诊区" }}
              <span class="redpoint" v-if="un_read_wait_num">
                {{
                  un_read_wait_num > 99
                    ? un_read_wait_num + "+"
                    : un_read_wait_num
                }}
              </span>
            </li>
            <li
              style="position: relative;"
              :class="index == 1 ? 'active' : ''"
              @click="ClickTab(1)"
            >
              {{ "透析区" }}
              <span class="redpoint" v-if="un_read_dialysis_num">
                {{
                  un_read_dialysis_num > 99
                    ? un_read_dialysis_num + "+"
                    : un_read_dialysis_num
                }}
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- <div class="top">
        <div class="hospital">
          <span class="title"> {{ $store.getters.user.org.org_short_name }} </span>
        </div>
        <div class="department">
            <ul>
                <li v-for="(item,i) in ['候诊室','透析区']" :key="i" :class="index == i? 'active':'' " @click="ClickTab(i)" >{{item}}</li>
            </ul>
        </div>
        <div class="search">
          <van-field v-model="search_input" ref="search_field" placeholder="透析号/姓名" style="background-color: #ebf1f7; height: 0.6rem; line-height: 0.6rem; padding: 0 0 0 10px; border-radius: 30px;">
            <i class="iconfont" slot="left-icon">&#xe741;</i>
            <van-button slot="button" size="small" type="info" style="border: none;" @click="searchWithKeyword">搜索</van-button>
          </van-field>
        </div>
        <van-button size="small" type="info">临时排班</van-button>
    </div>-->
    <div class="area">
      <waiting-area
        ref="waitingArea"
        v-show="index == 0"
        title="候诊区"
        :search_keyword="search_keyword"
      ></waiting-area>
      <dialysis-area
        @refWaitingArea="refWaitingArea"
        v-show="index == 1"
        title="透析区"
        :search_keyword="search_keyword"
        @clear_search_keyword="clearKeyword"
      ></dialysis-area>
    </div>
    <div class="fixedBox">
      <div @click="goMonitoring" style="margin-bottom:0.375rem">
        <img src="../../assets/images/monitoring.png" alt />
      </div>
      <div @click="goAdvice">
        <img src="../../assets/images/advice.png" alt />
      </div>
    </div>
  </div>
</template>

<script>
import DialysisArea from "./DialysisArea";
import WaitingArea from "./WaitingArea";
import { Popover } from "vux";
import { getDialysisScheduals, getWaitingScheduals } from "@/api/dialysis";
import { parseTime } from "@/utils/index";
import { getDialysisOrWaitSelectedConfig } from "@/utils/data_config";

export default {
  name: "RecordPage",
  props: {
    un_read_wait_num: {
      type: Number
    },
    un_read_dialysis_num: {
      type: Number
    }
  },
  data() {
    return {
      index: 1,
      search_input: "",
      search_keyword: "",
      scheduals: [],
      advice_groups: [],
      unReadWaitNum: 0,
      unReadDialysisNum: 0,
      show: false
    };
  },
  components: {
    DialysisArea,
    WaitingArea,
    Popover
    // Group,
    // Cell
  },

  methods: {
    refWaitingArea: function() {
      this.$refs.waitingArea.requestScheduals();
      this.$emit("refAdvice");
    },
    ClickTab: function(tabIndex) {
      this.index = tabIndex;
    },
    searchWithKeyword: function() {
      this.$refs.search_field.blur();
      this.search_keyword = this.search_input;
    },
    clearKeyword: function() {
      this.search_input = "";
      this.search_keyword = "";
    },
    goSchedule() {
      this.$router.push("/add_urgent_schedule");
    },
    goMonitoring() {
      this.$router.push("/monitoring");
    },
    goAdvice() {
      this.$router.push("/advice");
    },
    toReturn() {
      this.$router.push("/homeIndex");
    }
  },
  created() {
    var index = getDialysisOrWaitSelectedConfig();
    console.log(index);
    if (index != null) {
      this.index = index;
    }
  }
};
</script>

<style lang="scss" scoped>
.top_row {
  // height: 50px;
  font-size: 0.3rem;
  padding: 0 0.3rem 0;
  @media only screen and (min-width: 813px) and (max-width: 1024px) {
    padding: 0.3rem 0.3rem;
  }
  // border-bottom: 1px #e5e5e5 solid;
  // display: flex;
  // align-items: center;
  background: #258ffc;
  .floatLeftBox {
    .van-popup {
      top: 0;
      transform: translate3d(0, 0, 0);
      border-radius: 0;
    }
    .popupContent {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100%;
    }
    .popupBox {
      display: flex;
      justify-content: space-around;
      width: 100%;
      height: 40%;
      .popupBoxOne {
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        font-size: 0.44rem;
        img {
          width: 1.7rem;
          height: 1.7rem;
        }
      }
    }
  }

  .floatLeft {
    height: 1rem;
    // margin-top: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 0.6rem;
    .titleName {
      font-size: 0.6rem;
    }
    .icons {
      font-size: 0.8rem;
    }
    .jiantou {
      font-size: 0.8rem;
      color: #fff;
    }
    .order {
      float: right;
      font-size: 0.45rem;
      color: #fff;
    }
  }
  .search {
    float: right;
    margin-top: 15px;
  }
}
.title {
  font-size: 0.45rem;
  font-weight: 600;
  height: 45px;
  // line-height: 50px;
  margin-left: 8px;
  // color: $title-color;
  color: #fff;
}
.newDepartment {
  text-align: center;
  // height: 100%;
  width: 60%;
  margin: 0 auto;
  ul {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
      float: left;
      font-size: 0.45rem;
      margin: 0 0.2rem;
      height: 0.8rem;
      line-height: 0.8rem;
      padding: 0 0.4rem;
      // color: $title-color;
      color: #fff;
      &.active {
        // background: $main-color;
        background: #ffffff;
        color: #258ffc;
        border-radius: 30px;
      }
    }
  }
}

.add_schedule_btn {
  margin-left: 10px;
  float: right;
  background-color: #ff7978;
  border: none;
}

.redpoint {
  display: inline-block;
  height: 30px;
  width: 30px;
  line-height: 26px;
  text-align: center;
  font-size: 0.8em;
  border-radius: 20px;
  color: #fff;
  background: #f56c6c;
  position: absolute;
  top: -6px;
  right: -8px;
  border: 1px solid #fff;
  @media only screen and (max-width: 767px) {
    height: 16px;
    width: 16px;
    line-height: 15px;
  }
  @media only screen and (min-width: 415px) and (max-width: 767px) {
    height: 20px;
    width: 20px;
    line-height: 20px;
    font-size: 0.36rem;
  }
}
.box {
  height: 1rem;
  margin-top: 0.26rem;
  background: #258ffc;
}
.head {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-top: 3px;
  display: inline-block;
  float: left;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
.newSearch {
  height: 1rem;
  width: 100%;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  .searchBtn {
    width: 14%;
    float: right;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    font-size: 0.45rem;
    color: #258ffc;
    vertical-align: middle;
  }
}

.fixedBox {
  position: fixed;
  bottom: 0.625rem;
  right: 0.625rem;
  img {
    width: 1.875rem;
    height: 1.875rem;
  }
}
</style>
<style lang="scss">
.newinput {
  height: 100%;
  width: 85% !important;
  float: left;
  .el-input__inner {
    height: 1rem;
    line-height: 1rem;
    width: 100%;
    border-radius: 30px;
    border: none;
    font-size: 0.45rem;
    box-sizing: border-box;
    padding-bottom: 0.05rem;
    vertical-align: middle;
    @media only screen and (min-width: 768px) {
      padding-left: 0.9rem !important;
    }
    @media only screen and (min-width: 416px) and (max-width: 767px) {
      padding-left: 1.2rem !important;
    }
  }
  .el-input__icon {
    line-height: 0.95rem;
    font-size: 0.45rem;
    margin-top: 0.02rem;
    padding-left: 0.1rem;
    @media only screen and (min-width: 768px) {
      margin-top: 1px;
      font-size: 24px;
      width: 0;
    }
    @media only screen and (min-width: 416px) and (max-width: 767px) {
      margin-top: 1px;
      font-size: 24px;
      width: 0;
    }
  }
  .el-input__prefix {
    // left:1px;
    @media only screen and (min-width: 768px) {
      // left: 10px;
    }
  }
}
</style>