hospital_health_check/src/views/examination.vue

<template>
  <div class="exam_contaniner">
    <div class="top_box">
        <div class="week-box" v-if="!isCal"> 
            <div class="week_box" style="display:flex">
                <div class="week_num" v-for="item in weekData" :key="item">{{item}}</div>
            </div>
            <div class="week_text">
                <div class="week_txt" v-for="item in weekArr" :key="item" @click="changeDate(item)" :class="[(item < today ? 'week_none' : ''),item == selectDate.slice(-2) ? 'today_week' : '',numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)) ? numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)).isNum == 1 ? 'isnum' : 'none' : '']">
                    <div class="top_info"></div>
                    {{item}}
                    <div class="bottom_info" v-text="numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)) ? numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)).isNum == 1 ? '有号' :'无号' : ''"></div>
                    
                </div>
            </div>
        </div>
        <div v-if="isCal">
            <van-swipe class="my-swipe"  :stop-propagation="false" :show-indicators="false">
                <van-swipe-item>
                    <van-calendar 
                        class="can_box" 
                        ref="calendar" 
                        first-day-of-week="1" 
                        v-model="show" 
                        @confirm="onConfirm"
                        :poppable="false" 
                        :show-mark="false" 
                        :show-title="false" 
                        :show-subtitle="false" 
                        :show-confirm="false"
                        :min-date="minDate"
                        :max-date="maxDate"
                        :formatter="formatter"
                        :default-date="new Date(selectDate)"
                    />
                </van-swipe-item>
                <van-swipe-item>
                    <van-calendar 
                        class="can_box" 
                        ref="calendar1" 
                        first-day-of-week="1" 
                        v-model="show" 
                        @confirm="onConfirm1" 
                        :poppable="false" 
                        :show-mark="false" 
                        :show-title="false" 
                        :show-subtitle="false" 
                        :show-confirm="false"
                        :min-date="minDate1"
                        :max-date="maxDate1"
                        :formatter="formatter1"
                        :default-date="new Date(selectDate)"
                    />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="pull_box" @click="isShow">
            <img v-show="!isCal" src="~@/assets/image/pull.png" alt="">
            <img v-show="isCal" src="~@/assets/image/up.png" alt="">
        </div>
    </div>
    <div class="center_box">
        <div class="exam_box" v-for="item in examData" :key="item.name">
            <div class="exam_top">
                <div class="top_left">
                    <div class="name_txt">{{item.project}}</div>
                    <div class="posi_txt">
                        <img style="width:0.24rem;height:0.24rem" src="~@/assets/image/posi.png" alt="">
                        <div style="color: #999;font-size: 0.24rem;">{{item.cuAddr}}</div>
                    </div>
                </div>
                <div class="top_right"><div style="font-size:0.3rem;color:#333">{{item.totalApmNum}}</div><div style="font-size:0.22rem;color:rgba(51, 51, 51,0.5)">/{{item.totalNum}}</div>
                </div>
            </div>
            <div class="exam_bottom">
                <div class="exam_txt" v-for="item1 in item.detailList" :key="item1.time" @click="clickExam(item,item1)" :class="[(item1.residueNum == 0 ? 'isAct' : ''),(item1.isSelect ? 'active' : ''),Date.parse(new Date(item.apmDay.substring(0,10) + ' ' +  item1.timeFrame.split('-')[1] + ':00')) < Date.parse(new Date(systemTime)) ? 'isAct' : '']">
                    <div class="txt" style="font-size:0.22rem;color:#666;"><span style="font-size:0.24rem;color:#666">{{item1.period}}</span> {{item1.timeFrame}}</div>
                    <div style="font-size:0.24rem;color:#333333;">剩余:{{item1.residueNum}}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="btn_box">
        <van-button v-show="examData.length !== 0 && selectArr.length == 0" type="info" block disabled >预约</van-button>
        <van-button v-show="examData.length !== 0 && selectArr.length !== 0" type="info" block  @click="handleExam">预约</van-button>
    </div>
  </div>
</template>

<script>
import {queryDays,queryList} from "@/api/examination";
import { getSystemTime, } from "@/api/hospital";
export default {
    data() {    
        return {
            show:true,
            text:"下拉",
            isCal:false,
            radio:1,
            weekArr:[],
            weekData:['一','二','三','四','五','六','日'],
            minDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
            maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date(new Date().getFullYear(),new Date().getMonth() + 1,0).getDate()),
            minDate1: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1),
            maxDate1: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date(new Date().getFullYear(),new Date().getMonth() + 2,0).getDate()),
            numData:[],
            examData:[
                // {name:'单眼视力',position:'门诊楼3楼眼科门诊',total:20,residue:15,examArr:[
                //     {moment:'上午',time:'8:00-8:30',num:2},
                //     {moment:'上午',time:'8:30-9:00',num:0},
                //     {moment:'上午',time:'9:00-9:30',num:1},
                //     {moment:'上午',time:'9:30-10:00',num:1},
                // ]},
                // {name:'肢体',position:'门诊楼3楼',total:20,residue:15,examArr:[
                //     {moment:'上午',time:'8:00-8:30',num:2},
                //     {moment:'上午',time:'8:30-9:00',num:0},
                //     {moment:'上午',time:'9:00-9:30',num:1},
                //     {moment:'上午',time:'9:30-10:00',num:1},
                // ]},
                // {name:'听力',position:'门诊楼3楼听力门诊',total:20,residue:15,examArr:[
                //     {moment:'上午',time:'8:00-8:30',num:2},
                //     {moment:'上午',time:'8:30-9:00',num:0},
                //     {moment:'上午',time:'9:00-9:30',num:1},
                //     {moment:'上午',time:'9:30-10:00',num:1},
                // ]}
            ],
            selectArr:[],
            selectDate:'',
            today:'',
            isToday:'',
            hospitalId:'',
            startTime:'',
            endTime:'',
            cupCardNo:'',
            dayArr:[]
        }
    },
    created() {
    },
    mounted() {
        this.hospitalId =  this.$route.query.id;
        var WeekFirstDay=new Date(new Date()-(new Date().getDay()-1)*86400000); 
        this.today = new Date().getDate();
        this.isToday = this.today;
        let year = new Date().getFullYear();
        let month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
        let month1 = new Date().getMonth() + 2 < 10 ? '0' + (new Date().getMonth() + 2) : new Date().getMonth() + 2;
        let lastDay = new Date(new Date().getFullYear(),new Date().getMonth() + 2,0).getDate();
        this.selectDate = year + '-' + month + '-' + (this.today < 10 ? '0' + this.today : this.today);
        for(var i = WeekFirstDay.getDate();i<= parseInt(WeekFirstDay.getDate()) + 6;i++){
            this.weekArr.push(i)
        }
        var todayWeek = new Date().getDay();
        this.weekData.map((item,index) =>{
            if(index + 1 == todayWeek){
                this.weekData[index] = '今日'
            }
        })
        this.startTime = year + '-' + month + '-' + this.today;
        this.endTime = year + '-' + month1 + '-' + lastDay;
        this.getDays()
        let userInfo = sessionStorage.getItem('userInfo') ? JSON.parse(sessionStorage.getItem('userInfo')) : null;
        if (userInfo) {
            this.cupCardNo = JSON.parse(sessionStorage.getItem('userInfo')).papersnumber;
            this.getList()
            this.querySystemTime();
        }
        
    },
    methods: {
        querySystemTime() {
            if (this.GlobalConfig.appMode) {
                vaildInterfacefn("cgstjyyjzpzp", "qdsgajjtjczhqxtsj", JSON.stringify({}), "2", "https://" + this.GlobalConfig.urlCreatesign, "https://" + this.GlobalConfig.urlGateway)
                .then((value) => {
                    let retData = JSON.parse(value);
                    // console.log('retData ===>',retData)
                    this.systemTime = retData.data
                })
            }else{
                getSystemTime().then(res => {
                    this.systemTime = res.data;
                })
            }
            
        },
        getDays(){
            if (this.GlobalConfig.appMode) {
                let val = {
                    createDept:this.hospitalId,
                    startTime:this.startTime,
                    endTime:this.endTime
                }
                vaildInterfacefn("cgstjyyjzpzp", "qdsgajjtjczdhqyfhrq", JSON.stringify(val), "2", "https://" + this.GlobalConfig.urlCreatesign, "https://" + this.GlobalConfig.urlGateway)
                .then((value) => {
                    let retData = JSON.parse(value);
                    // console.log("ret ===>",retData )
                    this.dayArr = retData.data;
                    console.log(this.dayArr)
                    for(let key in this.dayArr){
                        this.dayArr[key].map(item =>{
                            this.numData.push({
                                date:item.date,
                                isNum:item.enableApm
                            })
                        })
                    }
                })

            }else{
                queryDays(
                {
                    createDept:this.hospitalId,
                    startTime:this.startTime,
                    endTime:this.endTime
                }
            ).then(res =>{
                this.numData = []
                if(JSON.stringify(res.data) === '{}'){
                    this.dayArr = [];
                    this.numData = this.dayArr
                }else{
                    this.dayArr = res.data;
                    console.log(this.dayArr)
                    for(let key in this.dayArr){
                        this.dayArr[key].map(item =>{
                            this.numData.push({
                                date:item.date,
                                isNum:item.enableApm
                            })
                        })
                    }
                }
            })
            }
            
        },
        getList(){
            this.$toast.loading({
                message:'加载中',
                duration: 0,
            })
            if (this.GlobalConfig.appMode) {
                console.log('接口')
                let val = {
                    createDept:this.hospitalId,
                    apmDay: this.selectDate,
                    cupCardNo:this.cupCardNo
                }
                vaildInterfacefn("cgstjyyjzpzp", "qdsgajjtjczdhqfhlb", JSON.stringify(val), "2", "https://" + this.GlobalConfig.urlCreatesign, "https://" + this.GlobalConfig.urlGateway)
                .then((value) => {
                    console.log('val===>',value)
                    this.$toast.clear();
                })
            }else{
            queryList(
                {
                    createDept:this.hospitalId,
                    apmDay: this.selectDate,
                    cupCardNo:this.cupCardNo
                }
            ).then(res =>{
                if(res.data.length == 0){
                    lightAppJssdk.notification.alert({
                        message: "当前时间无体检项目",
                        title: "提示",//可传空
                        buttonName: "收到",
                        success:  (data) => {
                            this.$toast.clear();
                        //    console.log(this.examData)
                        },
                        fail: function (data) { //错误返回
                        }
                     })
                }else{
                    this.examData = res.data;
                    this.$toast.clear();
                    
                }
                console.log(this.examData)
                this.examData.map(item =>{
                    item.detailList.map(item1 =>{
                        item1.isSelect = false
                    })
                })
            })
            }
        },
        formatter(day){
            /*
                这里的参数包含以下属性
                bottomInfo: undefined
                date: Sat May 22 2021 00:00:00 GMT+0800 (中国标准时间) {}
                text: 22
                type: "

                我们只需要修改type值为 disabled 即可
            */

            if(day.date.getDate() < new Date().getDate()){
                day.type = 'disabled'
            }else{
                let month = day.date.getMonth() < 10 ? '0' + parseInt(day.date.getMonth() + 1) : day.date.getMonth() + 1;
                this.numData.forEach(item =>{
                    if(month == item.date.substr(5,2)){
                        if(day.date.getDate() == item.date.slice(-2)){
                            item.isNum == 1 ? day.bottomInfo  = '有号' : day.bottomInfo  = '无号'
                            item.isNum == 1 ? day.className  = 'num1' : day.className  = 'num2'
                        }
                    }
                    
                })
            }
            // if(day.date.getDate() == new Date().getDate()){
                day.topInfo = ` `
                // day.className = 'today'
                
            // }
            return day
        },
        formatter1(day){
            let month = day.date.getMonth() < 10 ? '0' + parseInt(day.date.getMonth() + 1) : day.date.getMonth() + 1;
                this.numData.forEach(item =>{
                    if(month == item.date.substr(5,2)){
                        if(day.date.getDate() == item.date.slice(-2)){
                            item.isNum == 1 ? day.bottomInfo  = '有号' : day.bottomInfo  = '无号'
                            item.isNum == 1 ? day.className  = 'num1' : day.className  = 'num2'
                        }
                    }
                    
                })
                day.topInfo = ` `
            return day
        },
        changeDate(item){
            let year = new Date().getFullYear()
            let month = new Date().getMonth() < 10 ? '0' + parseInt(new Date().getMonth() + 1) : new Date().getMonth() + 1
            this.selectDate = year  + '-' + month + '-' + item;
            this.getList()
            this.isToday = item
        },
        isShow(){
            this.isCal = !this.isCal  
        },
        clickExam(val,val1){
            this.selectArr = []
            let arr = JSON.parse(JSON.stringify(this.examData))
            arr.find(item =>{
                if(item.project == val.project){
                    item.detailList.find(item1 =>{
                        if(item1.timeFrame == val1.timeFrame){
                            item1.isSelect = true
                        }else{
                            item1.isSelect = false
                        }
                    })
                }
            })
            this.examData = arr
            this.examData.map(item =>{
                item.detailList.map(item1 =>{
                    if(item1.isSelect){
                        this.selectArr.push({
                            name:item.project,
                            posi:item.cuAddr,
                            time:item1.period + ' ' +  item1.timeFrame,
                        })
                    }
                })
            })
        },
        onConfirm(date){
            let year = date.getFullYear();
            let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
            let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
            let text = year + '-' + month + '-' + day
            this.selectDate = text;
            this.getList()
        },
        onConfirm1(date){
            let year = date.getFullYear();
            let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
            let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
            let text = year + '-' + month + '-' + day
            this.selectDate = text;
            this.getList()
            
        },
        handleExam(){
            this.$router.push({
                name:'ExamProject',
                params:{
                    time:this.selectDate,
                    createDept:this.hospitalId,
                    selectArr:this.selectArr
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.exam_contaniner{
    width: 100%;
    overflow-y: scroll;
    height: 100%;
    overflow-x: hidden;
    background: #F9F9F9;
    position: absolute;

    .top_box{
        background: #fff;
        .week-box{
            .week_box{
                width: 100%;
                height: 0.6rem;
                padding-top: 0.7rem;

                .week_num{
                    flex: 1;
                    font-size: 0.32rem;
                    line-height: 0.6rem;
                    text-align: center;
                }
            }
            .week_text{
                display: flex;
                width: 100%;
                height: 1.28rem;
                .week_txt{
                    position: relative;
                    width: 1rem;
                    height: 1rem;
                    font-size: 0.32rem;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    margin: 0.24rem 0.035rem 0 0.035rem;
                    // margin-top: 0.12rem;

                    .bottom_info{
                        position: absolute;
                        right: 0;
                        left: 0;
                        font-size: 10px;
                        line-height: 14px;
                        bottom: 0.06rem;
                    }

                    .top_info{
                        position: absolute;
                        right: 0;
                        left: 0;
                        top: 0.06rem;
                        font-size: 10px;
                        line-height: 14px;
                    }
                }
                .week_none{
                    color:#ccc;
                    pointer-events:none;
                }

                .none{
                    background: rgba(22, 119, 255,0.5);
                    border-radius: 50%;
                    color:#fff;
                }
                .isnum{
                    background: rgb(22, 119, 255,);
                    border-radius: 50%;
                    color:#fff;
                }
                .today_week{
                    background: rgba(51, 51, 51, .3);
                    border-radius: 50%;
                    color:#fff;

                    .top_info{
                        width: 0.1rem;
                        height: 0.1rem;
                        background: #fff;
                        border-radius: 50%;
                        margin: 0 auto;
                        margin-top: 0.1rem;
                    }
                }
            }
        }

        .pull_box{
            display: flex;
            justify-content: center;
            margin-top: 0.24rem;

            img{
                width: 0.4rem;
                height: 0.4rem;
            }
        }
        .my-swipe .van-swipe-item {
            width: 100%;
            font-size: 0.4rem;
            text-align: center;
        }

        .can_box{
            padding-top:0.7rem
        }
    }
    .center_box{
        width: 100%;
        margin-top: 0.2rem;
        .exam_box{
            width: 100%;
            background: #fff;
            padding-bottom: 0.4rem;
            margin-bottom: 0.2rem;

            .exam_top{
                width: 100%;
                height: 1.6rem;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .top_left{
                    width: 80%;
                    height: 80%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    margin-left: 5%;

                    .name_txt{
                        font-size: 0.3rem;
                        color: #333;
                        font-weight: bold;
                    }
                    .posi_txt{
                        display: flex;
                        align-items: center;
                    }
                }
                .top_right{
                    width: 1.48rem;
                    height: 0.6rem;
                    border-top-left-radius: 0.4rem;
                    border-bottom-left-radius: 0.4rem;
                    border-right: none;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: rgba(72, 118, 255,0.2);
                }
            }
            .exam_bottom{
                width: 93%;
                display: flex;
                justify-content: flex-start;
                margin: 0 auto;
                flex-wrap: wrap;

                .exam_txt{
                    width: 32%;
                    height: 1rem;
                    background: #F6F6F6;
                    border: 1px solid #1677FF;
                    border-radius: 0.08rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;
                    font-size: 0.22rem;
                    margin: 0 0.025rem 0.2rem;

                }

                .isAct{
                    background: #F6F6F6;
                    border: 1px solid #F6F6F6;
                    pointer-events:none;
                    .txt{
                        color:rgba(102, 102, 102,0.3) !important;
                    }
                    div{
                        span{
                            color:rgba(102, 102, 102,0.3) !important;

                        }
                        color: rgba(51, 51, 51,0.3) !important;
                    }
                }

                .active{
                    background: #1677FF ;
                    div{
                        span{
                            color: #fff !important;
                        }
                        color: #fff !important;
                    }


                }
            }
        }
    }

    .btn_box{
        width:90%;
        height: 1.6rem;
        margin:0 auto;
        margin-top: 0.4rem;
        cursor: not-allowed
    }
}
::v-deep{
    .van-calendar__header {
        box-shadow: none !important;
    }
    .van-calendar__month-title{
        display: none;
    }
    .num1{
        background: rgb(22, 119, 255);
        border-radius: 50%;
        color: #fff;

        .van-calendar__selected-day{
            width: 100%;
            height: 100%;
            background: rgb(22, 119, 255) !important;
            border-radius: 50%;
        }
    }
    .num2{
        background: rgba(22, 119, 255,0.5);
        border-radius: 50%;
        color: #fff;
        .van-calendar__selected-day{
            width: 100%;
            height: 100%;
            background: rgba(22, 119, 255, .5) !important;
            border-radius: 50%;
        }
    }
    .van-calendar__weekdays{
        margin-bottom: 0.24rem;
    }
    .van-calendar__weekday{
        font-size: 0.32rem;
    }
        .van-calendar__selected-day{
            .van-calendar__top-info{
                width: 0.1rem;
                height: 0.1rem;
                background: #fff;
                border-radius: 50%;
                margin: 0 auto;
                margin-top: 0.1rem;
                top: 0.06rem;
            }
        }
    .van-calendar__days{
        height: 6.4rem;

        .van-calendar__day{
            width: 1rem;
            height: 1rem;
            margin: 0 0.03rem;

            .van-calendar__selected-day{
                width: 100%;
                height: 100%;
                background: rgba(51, 51, 51, .3);
                border-radius: 50%;
            }
        }
    }
    .van-calendar__bottom-info{
        bottom:0.06rem;
    }
}
</style>