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="[(Date.parse(new Date(item)) <= Date.parse(new Date(yesterDay)) ? 'week_none' : ''), item == selectDate ? 'today_week' : '', numData.find(item1 => item1.date == item) ? numData.find(item1 => item1.date == item).isNum == 1 ? 'isnum' : 'none' : '']">
                        <div class="top_info"></div>
                        {{ item.slice(-2) }}
                        <div class="bottom_info"
                            v-text="numData.find(item1 => item1.date == item) ? numData.find(item1 => item1.date == item).isNum == 1 ? '有号' : '无号' : ''">
                        </div>

                    </div>
                </div>
            </div>
            <div v-if="isCal">
                <van-swipe class="my-swipe" :stop-propagation="false" :show-indicators="false" :initial-swipe="currentIndex">
                    <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-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-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_noresult" v-if="examData.length < 1">
                <img src="~@/assets/image/no_result.jpg" />
                <div class="no_title">今日未放号</div>
                <div class="no_txt">今日暂无体检计划，请选择其他日期</div>
            </div>
            <div class="exam_box" v-else 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(calcTime(item.apmDay.substring(0, 10),item1))) < 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="selectArr.length == 0" type="info" block disabled>预约</van-button>
            <van-button v-show="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";
import { dateFormat } from "@/utils/date";
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: [],
            selectArr: [],
            selectDate: '',
            today: '',
            isToday: '',
            hospitalId: '',
            startTime: '',
            endTime: '',
            cupCardNo: '',
            dayArr: [],
            yesterDay: '',
            systemTime: dateFormat(new Date(), 'yyyy-MM-dd'),
            currentIndex:'0',
            currentMonth:''
        }
    },
    created() {
        // console.log(this.getWeekTime('2023-03-02'))
    },
    mounted() {
        this.hospitalId = this.$route.query.id;
        var WeekFirstDay = new Date(new Date() - (new Date().getDay() - 1) * 86400000);
        this.today = new Date().getDate() < 10 ? '0' + new Date().getDate() : 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;  //当前月份
        this.currentMonth = month
        let month1 = parseInt(month) + 1 < 10 ? '0' + (parseInt(month) + 1) : parseInt(month) + 1; //当前月份的下一月份
        let now = new Date();
        this.yesterDay = dateFormat(new Date(now.setDate(now.getDate() - 1)),'yyyy/MM/dd');
        let day1 = year + '-' + month + '-' + this.today;
        this.selectDate = year + '/' + month + '/' + this.today;
        this.weekArr = this.getWeekTime(day1)
        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 = this.getLastDay(year,month1);
        this.getDays()
        this.querySystemTime();

    },
    methods: {
        //上午下午日期转换
        calcTime(apmDay, item) {
            let lattime = apmDay.replace(/-/g,'/') + ' ' + (item.period == '下午' ? 12 + parseInt(item.timeFrame.split('-')[1].split(':')[0]) : item.timeFrame.split('-')[1].split(':')[0]) + ':' + item.timeFrame.split('-')[1].split(':')[1] + ':00';
            // console.log('lattime22', lattime , this.systemTime);
            return lattime;
        },
        querySystemTime() {
            if (this.GlobalConfig.appMode) {
                vaildInterfacefn("cgstjyyxuwxt", "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("cgstjyyxuwxt", "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;
                        for (let key in this.dayArr) {
                            this.dayArr[key].map(item => {
                                this.numData.push({
                                    date: item.date.replace(/-/g, '/'),
                                    isNum: item.enableApm
                                })
                            })
                        }
                        let userInfo = sessionStorage.getItem('userInfo') ? JSON.parse(sessionStorage.getItem('userInfo')) : null;
                        if (userInfo) {
                            this.cupCardNo = JSON.parse(sessionStorage.getItem('userInfo')).papersnumber;
                            this.getList()
                        }

                    })

            } else {
                queryDays(
                    {
                        createDept: this.hospitalId,
                        startTime: this.startTime,
                        endTime: this.endTime
                    }
                ).then(res => {
                    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.replace(/-/g, '/'),
                                isNum: item.enableApm
                            })
                        })
                    }

                    let userInfo = sessionStorage.getItem('userInfo') ? JSON.parse(sessionStorage.getItem('userInfo')) : null;
                    if (userInfo) {
                        this.cupCardNo = JSON.parse(sessionStorage.getItem('userInfo')).papersnumber;
                        this.getList()
                    }
                })
            }

        },
        getList() {
            this.$toast.loading({
                message: '加载中',
                duration: 0,
            })
            if (this.GlobalConfig.appMode) {
                // console.log('接口')
                let val = {
                    createDept: this.hospitalId,
                    apmDay: this.selectDate,
                    cupCardNo: this.Base64.encode(this.cupCardNo)
                }
                val.apmDay = val.apmDay.replace(/\//g, '-')
                vaildInterfacefn("cgstjyyxuwxt", "qdsgajjtjczdhqfhlb", JSON.stringify(val), "2", "https://" + this.GlobalConfig.urlCreatesign, "https://" + this.GlobalConfig.urlGateway)
                    .then((value) => {
                        this.$toast.clear();
                        let retData = JSON.parse(value)
                        // console.log(retData.data)
                        if(retData.code == 200) {
                            this.examData = retData.data;
                            this.selectArr = []
                            this.examData.map(item => {
                                item.detailList.map(item1 => {
                                    item1.isSelect = false
                                })
                            })

                        }
                    }, err => {
                        this.$toast.clear();
                    })
            } else {
                let val = {
                    createDept: this.hospitalId,
                    apmDay: this.selectDate,
                    cupCardNo: this.Base64.encode(this.cupCardNo)
                }
                val.apmDay = val.apmDay.replace(/\//g, '-')
                queryList(
                    val
                ).then(res => {
                    this.$toast.clear();
                    if (res.code == 200) {
                        this.selectArr = []
                        this.examData = res.data;
                        this.examData.map(item => {
                            item.detailList.map(item1 => {
                                item1.isSelect = false
                            })
                        })
                    }
                    // console.log(this.examData)

                }, err => {
                    this.$toast.clear();
                })
            }
        },
        // 获得某月的最后一天  
        getLastDay(year,month) {        
             var new_year = year;    //取当前的年份          
             var new_month = month ;//取下一个月的第一天，方便计算（最后一天不固定） 
             new_month = new_month++
             if(month>12) {       
              new_month -=12;        //月份减          
              new_year++;            //年份增          
             }
             new_month = new_month < 10 ? '0' + new_month : new_month    
             var new_date = new Date(new_year,new_month,1);               //取当年当月中的第一天   
             return new_year + '-' + new_month + '-' + (new Date(new_date.getTime()-1000*60*60*24)).getDate();//获取当月最后一天日期          
        },
        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.examData = [];
            this.selectDate = item;
            let month = parseInt(new Date(this.selectDate).getMonth()) < 10 ? '0' + (parseInt(new Date(this.selectDate).getMonth()) + 1) : (parseInt(new Date(this.selectDate).getMonth()) + 1);
            if(month == this.currentMonth){
                this.currentIndex = '0'
            }else{
                this.currentIndex = '1'
            }
            this.getList()
            this.isToday = item
        },
        isShow() {
            this.isCal = !this.isCal;
            if (!this.isCal) {
                this.weekArr = this.getWeekTime(this.selectDate)
            }
        },
        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 = !item1.isSelect
                        } 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,
                        })
                    }
                })
            })
            console.log('sele ===>',this.selectArr)
        },
        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;
            console.log('current ===>',month);
            // if(this.currentMonth == month){
                this.currentIndex = '0'
            // }
            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
            console.log('next===>',month)
            this.selectDate = text;
                this.currentIndex = '1'
            this.getList()

        },
        handleExam() {
            this.$router.push({
                name: 'ExamProject',
                query: {
                    time: this.selectDate,
                    createDept: this.hospitalId,
                    selectArr: JSON.stringify(this.selectArr)
                }
            })
        },

        // 获取所选日期一周的数据
        getWeekTime(time) {
            // var new_Date = new Date(2021,11,10) //获取指定日期当周的一周日期
            var new_Date = new Date(time) //获取本周一周日期
            var timesStamp = new_Date.getTime();
            var currenDay = new_Date.getDay();
            var dates = [];
            for (var i = 0; i < 7; i++) {
                let date = new Date(timesStamp + 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7));
                let y = date.getFullYear()
                let m = date.getMonth() + 1
                m < 10 ? m = '0' + m : m
                let d = date.getDate()
                d < 10 ? d = "0" + d : d
                // let datetime = y + '-' + m + '-' + d
                let datetime = y + '/' + m + '/' + d
                dates.push(datetime)
            }
            return dates
            // console.log("一周时间：" + )
        }
    },
}
</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;
                }

                

                .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;
                    }
                }

                .isnum {
                    background: rgb(22, 119, 255, );
                    border-radius: 50%;
                    color: #fff;
                }

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

        .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_noresult {
            text-align: center;
            height: 5.04rem;
            background: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            img {
                width: 2.56rem;
                height: 2.56rem;
            }

            .no_title {
                color: #666;
                font-size: 0.44rem;
                font-weight: bold;
                margin-bottom: 0.1rem;
            }

            .no_txt {
                color: #999;
                font-size: 0.24rem;
                // width: 3rem;
                line-height: 0.33rem;
                margin: 0 auto;
            }
        }

        .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-subtitle{
        font-size: 0.32rem;
        margin-top: -0.7rem;
    }
    .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>