shenweishi/pages/dialysis/index.vue

<template>
	<view class="dialysis">
		<view class="info">
			<!-- <img class="infoImg" src="../../static/images/avatar.png" alt=""> -->
			<view class="infoRight">

				<view class="infoTitle">
					上次透析时间：<span>{{ sctx.schedule_date ? formatDate(sctx.schedule_date, 'yyyy-MM-dd') : '' }}</span><span>
						<text v-if="sctx.schedule_type == 1">上午</text>
						<text v-if="sctx.schedule_type == 2">下午</text>
						<text v-if="sctx.schedule_type == 3">晚上</text>
						<!-- <text v-else>暂无</text> -->
					</span> </view>
				<view class="infoTitle">
					下次透析时间：<span>{{ patientSchedule.schedule_date ? formatDate(patientSchedule.schedule_date, 'yyyy-MM-dd') : '' }}</span><span>
						<text v-if="patientSchedule.schedule_type == 1">上午</text>
						<text v-if="patientSchedule.schedule_type == 2">下午</text>
						<text v-if="patientSchedule.schedule_type == 3">晚上</text>
						<!-- <text v-else>暂无</text> -->
						&nbsp;床位:{{patientSchedule.Number ? patientSchedule.Number : ' '}}
					</span>
				</view>

			</view>
			<view class="dialysing">
				<view class="dia_cxt">
					<p v-if='order.created_time > 0 && nowTime<xiaji_time'>{{'正在透析中...'}}</p>
					<p v-if='modeid < 1 && order.created_time <= 0'>{{'暂无排班信息'}}</p>
					<p v-if='modeid > 0 && order.created_time <= 0'>{{'今天已有排班'}}&nbsp;床位:{{bedname}}</p>
					<p v-if="nowTime>xiaji_time && order.created_time > 0">{{'已下机'}}</p>
					<view style="margin-top: 40rpx;line-height: 50rpx;" v-if='order.created_time > 0 && nowTime<xiaji_time'>
						<p style="text-align: right;font-size: 28rpx;max-width: 570rpx;">
							上机时间：{{formatDate(sahngji_time,'yyyy-MM-dd hh:mm:ss' )}} &nbsp;床位:{{bedname}}</p>
						<p style="text-align: right;font-size: 28rpx;max-width: 570rpx;">
							预计下机时间：{{ estimate(order.created_time, 'hh:mm') }}</p>
					</view>
					
				</view>

			</view>
		</view>

		<view class="appBox">
			<view class="app" @click="toPage(1)">
				<img class="imgApp" src="../../static/images/app1new.png" alt="">
				<view class="intro">透析签到</view>
			</view>
			<view class="app" @click="toPage(4)">
				<img class="imgApp" src="../../static/images/app3new.png" alt="">
				<view class="intro">体征记录</view>
			</view>
			<view class="app" @click="toPage(2)">
				<img class="imgApp" src="../../static/images/app2new.png" alt="">
				<!-- <img class="imgApp" src="../../subPackages/static/images/app2new.png" alt="" /> -->
				<view class="intro">透析记录</view>
			</view>
			<view class="app" @click="toPage(6)">
				<img class="imgApp" src="../../static/images/app4new.png" alt="">
				<!-- <img class="imgApp" src="../../subPackages/static/images/app4new.png" alt=""> -->
				<view class="intro">预交金查询</view>
			</view>
			<view class="app" @click="toPage(8)">
				<img class="imgApp" src="../../static/images/app5new.png" alt="">
				<view class="intro">检查报告</view>
			</view>
		</view>
		<van-toast id="van-toast" />
		<!-- <view class="bgLine"></view> -->
		<view class="titleBox">
			<view class="titleBox_l">
				<view class="line"></view>
				我的排班
			</view>

			<view class="week_sel">
				<ren-dropdown-filter :filterData='filterData' :defaultIndex='defaultIndex' @ed='ed' @onSelected='onSelectedop'>
				</ren-dropdown-filter>
			</view>
		</view>
		<view class="scheduling">
			<view class="schedulingLeft">
				<view class="classes"></view>
				<view class="classes">上午</view>
				<view class="classes">下午</view>
				<view class="classes">晚上</view>
			</view>
			<scroll-view class="scrollBox" scroll-x="true" :scroll-left="scrollLeft">
				<view class="scroll-view_H">
					<view class="square" v-for="item in mon" style="font-size: 26rpx;">
						<view v-if="item.schedule_week == 1">周一</view>
						<view v-if="item.schedule_week == 2">周二</view>
						<view v-if="item.schedule_week == 3">周三</view>
						<view v-if="item.schedule_week == 4">周四</view>
						<view v-if="item.schedule_week == 5">周五</view>
						<view v-if="item.schedule_week == 6">周六</view>
						<view v-if="item.schedule_week == 7">周日</view>
						<view>{{ formatDate(item.schedule_date, "dd") }}</view>
					</view>
				</view>
				<!-- :key="index + 222" :key="index + 000"  :key="index + 111"-->
				<view class="scroll-view_H">
					<view :class="item.mode_id != '' ? 'square active' : 'square'" v-for="(item,index) in mon"
						>
						<text v-if="item.mode_id">
							{{ getModeId(item.mode_id) }}
						</text>
					</view>
				</view>
				<view class="scroll-view_H">
					<view :class="item.mode_id != '' ? 'square active' : 'square'" v-for="(item,index) in aft"
						><text v-if="item.mode_id">{{ getModeId(item.mode_id) }}</text></view>
				</view>
				<view class="scroll-view_H">
					<view :class="item.mode_id != '' ? 'square active' : 'square'" v-for="(item,index) in eve"
						><text v-if="item.mode_id">{{ getModeId(item.mode_id) }}</text></view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import Toast from '@/wxcomponents/vant/toast/toast';
	import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
	import {
		getSchedule
	} from '@/api/api.js';
	import {formatDate} from "@/utils/formatDate.js"
	import moment from 'moment'
	export default {
		components: {
			RenDropdownFilter
		},
		data() {
			return {
				sel_index:'本周',
				value1: 0,
				value2: 'a',
				filterData: [
					[{
						text: '本周',
						value: 0
					}, {
						text: '下周',
						value: 1
					}]
				],
				defaultIndex: [0],
				patient_id: 0,
				schedule: [],
				mon: [{
					schedule_week: 1,
					mode_id: 1
				}, {
					schedule_week: 2,
					mode_id: ""
				}, {
					schedule_week: 3
				}, {
					schedule_week: 4
				}, {
					schedule_week: 5
				}, {
					schedule_week: 6
				}, {
					schedule_week: 7
				}],
				aft: [{
					schedule_week: 1,
					mode_id: 1
				}, {
					schedule_week: 2
				}, {
					schedule_week: 3
				}, {
					schedule_week: 4
				}, {
					schedule_week: 5
				}, {
					schedule_week: 6
				}, {
					schedule_week: 7
				}],
				eve: [{
					schedule_week: 1,
					mode_id: 1
				}, {
					schedule_week: 2
				}, {
					schedule_week: 3
				}, {
					schedule_week: 4,
					mode_id: 3
				}, {
					schedule_week: 5
				}, {
					schedule_week: 6
				}, {
					schedule_week: 7
				}],
				scrollLeft: 0,
				patientSchedule: {},
				order: {},
				patient: {},
				prescription: {},
				sahngji_time:'',
				nowTime:0,
				xiaji_time:0,
				sctx:'',
				list:[],
				modeid:0,
				bedid:0,
				bedname:'',
				// zhuoyi:'',
				// zhuomo:'',
			}
		},
		onLoad() {
			this.patient = this.$store.state.data.userInfo
			this.patient_id = this.$store.state.data.userInfo.id
			this.getSchedule(this.patient_id)
		
		},
		methods: {
			
			async getSchedule(patient_id) {
				let params = {
					patient_id: patient_id
				}
				let res = await getSchedule(params, true)
				this.order = res.data.data.order
				this.patientSchedule = res.data.data.patientSchedule
				this.prescription = res.data.data.prescription
				this.sahngji_time = res.data.data.order.created_time
				this.devicenumber = res.data.data.devicenumber
				// this.xiaji_time = res.data.data.order.updated_time
				var list =res.data.data.list
				// this.list = list
				this.estimate2(this.sahngji_time)
				let now =new Date()
				// var now = new Date().setHours(0,0,0,0);
				this.nowTime =Math.round(now.getTime()/1000);
				let now2 = new Date().setHours(0,0,0,0);
				let ling_time = Math.round(now2/1000)
				// this.ling_time = ling_time
				console.log(res)
				console.log('1111',ling_time,this.xiaji_time);
				
				let mon = []
				let aft = []
				let eve = []
				let shangci = []
				res.data.data.array.map(item => {

					if (item.schedule_type == 1) {
						mon.push(item)
						// console.log(mon,'mon')
					} else if (item.schedule_type == 2) {
						aft.push(item)
					} else if (item.schedule_type == 3) {
						eve.push(item)
					}
				})
				res.data.data.list.map(item => {
					mon.map(it => {
						if (item.schedule_date == it.schedule_date && item.schedule_type == it
							.schedule_type) {
							it.mode_id = item.mode_id
							it.name = item.name
							it.schedule_date = item.schedule_date
							it.schedule_type = item.schedule_type
							// it.schedule_week = item.schedule_week
						}
					})
					aft.map(it => {
						if (item.schedule_date == it.schedule_date && item.schedule_type == it
							.schedule_type) {
							it.mode_id = item.mode_id
							it.name = item.name
							it.schedule_date = item.schedule_date
							it.schedule_type = item.schedule_type
							it.schedule_week = item.schedule_week
						}
					})
					eve.map(it => {
						if (item.schedule_date == it.schedule_date && item.schedule_type == it
							.schedule_type) {
							it.mode_id = item.mode_id
							it.name = item.name
							it.schedule_date = item.schedule_date
							it.schedule_type = item.schedule_type
							it.schedule_week = item.schedule_week
						}
					})
					// console.log(item.schedule_date,'asddfg');
					if(item.schedule_date<ling_time){
						shangci.push(item)
					// 	// console.log(shangci,'asddfg');
					}
					if(item.schedule_date==ling_time){
						// console.log('bbbb',item);
						this.modeid=item.mode_id
						this.bedid = item.bed_id
						// this.sahngji_time = item.schedule_date
					}
				})
	
				this.sctx=shangci[shangci.length-1]
				
				console.log(shangci,'this.sel_index')
				if(this.sel_index == '本周'){
					// console.log('vvvvvv',mon.slice(7,14));
					let mon_test = mon.slice(7,14)
					let aft_test = aft.slice(7,14)
					let eve_test = eve.slice(7,14)
					this.mon = mon_test
					this.aft = aft_test
					this.eve = eve_test
					// console.log('zzzzz',this.mon);
				}
				if(this.sel_index == '下周'){
					let mon_test = mon.slice(14,21)
					let aft_test = aft.slice(14,21)
					let eve_test = eve.slice(14,21)
					this.mon = mon_test
					this.aft = aft_test
					this.eve = eve_test
					// console.log('ggggg',this.mon);
				}
				this.scrollLeft = 427
				res.data.data.devicenumber.map(itemdev =>{
					if(itemdev.id== this.bedid){
						this.bedname=itemdev.number
					}
				})
			},
			ed(res) {
				// console.log('weqrqwt',res)
			},
			onSelectedop(val){
				// console.log(val,'val')
				let arr = val[0]
				this.sel_index = arr[0].text
				// console.log(this.sel_index,'this.sel_index')
				this.getSchedule(this.patient_id)
			},
			
			formatDate(value, fmt) {
				return formatDate(new Date(value * 1000), fmt)
			},
			getModeId(id) {
				let name = ''
				if (id == 1) {
					name = "HD"
				} else if (id == 2) {
					name = "HDF"
				} else if (id == 3) {
					name = "HD+HP"
				} else if (id == 4) {
					name = "HP"
				} else if (id == 5) {
					name = "HF"
				} else if (id == 6) {
					name = "SCUF"
				} else if (id == 7) {
					name = "IUF"
				} else if (id == 8) {
					name = "HFHD"
				} else if (id == 9) {
					name = "HFHD+HP"
				} else if (id == 10) {
					name = "PHF"
				} else if (id == 11) {
					name = "HFR"
				} else if (id == 12) {
					name = "HDF+HP"
				} else if (id == 13) {
					name = "CRRT"
				} else if (id == 14) {
					name = "腹水回输"
				} else if (id == 15) {
					name = "HD前置换"
				} else if (id == 16) {
					name = "HD后置换"
				} else if (id == 17) {
					name = "HDF前置换"
				} else if (id == 18) {
					name = "HDF后置换"
				} else if (id == 19) {
					name = "IUF+HD"
				} else if (id == 22) {
					name = "血浆胆红素吸附+HDF"
				} else if (id == 23) {
					name = "血浆胆红素吸附"
				}
				return name
			},
			estimate(time) {
				let mydate = new Date(time * 1000);
				mydate.setHours(mydate.getHours() + this.prescription.dialysis_duration_hour);
				mydate.setMinutes(mydate.getMinutes() + this.prescription.dialysis_duration_minute)
				this.xiaji_time = new Date(mydate).getTime()/1000
				// console.log('hhhhhh',new Date(mydate).getTime()/1000);
				return formatDate(new Date(mydate), "hh:mm")
			},
			estimate2(time) {
				let mydate = new Date(time * 1000);
				mydate.setHours(mydate.getHours() + this.prescription.dialysis_duration_hour);
				mydate.setMinutes(mydate.getMinutes() + this.prescription.dialysis_duration_minute)
				this.xiaji_time = new Date(mydate).getTime()/1000
				console.log('hhhhhh',new Date(mydate).getTime()/1000);
				// return formatDate(new Date(mydate), "hh:mm")
			},
			toPage(index) {
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/code/index'
					})
				} else if (index == 2) {
					// showToast('敬请期待');
					Toast('敬请期待');
					// uni.navigateTo({
					// 	url: '/subPackages/pages/dialysisRecord/index'
					// })
				} else if (index == 3) {
					uni.navigateTo({
						url: '/pages/advice/index'
					})
				} else if (index == 4) {
					uni.navigateTo({
						url: '/subpackagesA/pages/PhysicalSigns/index'
					})
				} else if (index == 6) {
					Toast('敬请期待');
					// showToast('敬请期待');
					// uni.navigateTo({
					// 	// url: '/subpackages/pages/advancePay/index'
					// 	url:'/pages/advancePay/index'
					// })
				} else if (index == 8) {
					uni.navigateTo({
						url: '/pages/inspection_new/index'
					})
				} else if (index == 9) {
					// uni.navigateTo({
					// 	url: '/pages/education/index'
					// })
				}
			},
			
			
			// bencipaiban(time){
			// 	for(let i in this.list){
			// 		if(this.list[i].schedule_date==time){
			// 			return this.list[i].mode_id
			// 		}
			// 	}
			// }
		},
	}
</script>

<style>
	.dialysis {
		height: 100%;
		background: #FFFFFF;
		overflow-x: hidden;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.bgLine {
		background: #F2F2F2;
		height: 24rpx;
	}

	.info {
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		padding: 28rpx 24rpx;
	}

	.infoRight {
		flex: 1;
		margin-left: 24rpx;
	}

	.dialysing {
		width: 100%;
		height: 270rpx;
		background-color: #0dccbcfa;
		border-radius: 10rpx;
		box-shadow: 0px 3px 14rpx -2px #01c8b8;
	}

	.dialysing .dia_cxt {
		width: 90%;
		height: 90%;
		margin: 20rpx auto;
		color: #FFFFFF;
	}

	.name {
		font-size: 32rpx;
		color: #000000;
		font-weight: bold;
		margin-right: 22rpx;
	}

	.infoImg {
		width: 122rpx;
		height: 122rpx;
		background: #FFFFFF;
		border-radius: 50%;
	}

	.estimate {
		border: 1px solid #01BD5D;
		border-radius: 10rpx;
		padding: 14rpx 18rpx;
		font-size: 28rpx;
		color: #01BD5D;
		display: inline-block;
	}

	.infoTitle {
		font-size: 26rpx;
		/* font-weight: bold; */
		color: #737373;
		margin: 20rpx 0 10rpx;
	}

	.nextInfo {
		display: flex;
		flex-wrap: wrap;
		font-size: 26rpx;
		color: rgba(49, 49, 49, 0.54);
		width: 100%;
	}

	.nextInfo>text:nth-of-type(odd) {
		width: 60%;
	}

	.nextInfo>text:nth-of-type(even) {
		width: 40%;
	}

	.appBox {
		display: flex;
		flex-wrap: nowrap;
		background: #FFFFFF;
	}

	.app {
		width: 22.1%;
		height: 250rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		font-size: 32rpx;
		color: #333333;
	}

	.app:nth-of-type(3) {
		border-right: 0;
	}

	.app:nth-of-type(6) {
		border-right: 0;
	}

	.app:nth-of-type(9) {
		border-right: 0;
	}

	.imgApp {
		width: 120rpx;
		height: 120rpx;
		border-radius: 40rpx;
		margin: 40rpx 0 20rpx;
	}

	.intro {
		font-size: 24rpx;
		white-space: nowrap;
	}

	.titleBox {
		width: 100%;
		height: 90rpx;
		background: #FFFFFF;
		box-shadow: 0px 1px 0px 0px #E7E7E7;
		font-size: 36rpx;
		color: #000000;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		display: flex;
		justify-content: space-between;
	}

	.titleBox_l {
		height: 90rpx;
		background: #FFFFFF;
		box-shadow: 0px 1px 0px 0px #E7E7E7;
		font-size: 36rpx;
		color: #000000;
		display: flex;
		align-items: center;
		/* padding: 0 24rpx; */
	}

	.titleBox .week_sel {
		text-align: right;
	}

	.line {
		width: 6rpx;
		height: 40rpx;
		background: #00C692;
		border-radius: 4rpx;
		margin-right: 20rpx;
	}

	.scheduling {
		display: flex;
		border-top: 1px solid #E7E7E7;
		padding-top: 28rpx;
	}

	.schedulingLeft {
		width: 50rpx;
		font-size: 26rpx;
		color: rgba(49, 49, 49, 0.54);
		text-align: center;
		background: #FFFFFF;
	}

	.classes {
		height: 100rpx;
		background: #FFFFFF;
		margin-bottom: 4rpx;
		display: flex;
		align-items: center;
	}

	.square {
		width: 114rpx;
		height: 100rpx;
		background: #F2F2F2;
		border-radius: 6rpx;
		text-align: center;
		margin-right: 4rpx;
		margin-bottom: 4rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
	}

	.scroll-view_H {
		display: -webkit-box;
	}

	.scrollBox {
		background: #FFFFFF;
		overflow: scroll;
	}

	.active {
		background: #00c4b3;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
	}

	/deep/.uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none
	}
</style>

<style lang="scss" scoped>
	/deep/ .filter-wrapper {
		width: 190rpx !important;
		height: 70rpx !important;
		position: unset !important;

		.inner-wrapper {
			height: 70rpx !important;

			.mask {
				background-color: rgba(0, 0, 0, 0) !important;
			}

			.navs {
				height: 80rpx !important;
				border-bottom: none !important;
				padding: 0 25rpx;
			}

			.popupShow {
				background-color: #ececec !important;
			}

		}
	}
</style>