shenweishi/subpackagesA/pages/PhysicalSigns/index.vue

<template>
	<view class="wrap">
		<view class="selectbox">
			<view class="example-body">
				<view class="">
					<uni-datetime-picker type="date" v-model='start_time' :clear-icon='false' placeholder='请选择开始日期' @change='startchang'></uni-datetime-picker>
				 </view>
				<view class="">
					<uni-datetime-picker type="date" v-model='end_time' :clear-icon='false' placeholder='请选择结束日期' @chang='endchang'></uni-datetime-picker>
				</view>
			</view>
			<view class="dropdown">
				<uni-data-select  :localdata="Trend" v-model="value" :clear='false'></uni-data-select>
			</view>
			
		</view>
		<view class="main_cnt">
			<view class="typeselect">
				<button type="default" @click="wei_btn" :class="table_show=='血压'?'btn_show':''">体重</button>
				<button type="default"  @click="blo_btn" :class="table_show=='体重'?'btn_show':''">血压</button>
			</view>

			<view class="Chart">
				<weightTable :record="weiData" v-if="table_show=='体重' && value==1" ></weightTable>
				<weightLine :record="weiData" v-if="table_show=='体重' && value==0"></weightLine>
				<bloodpressTable :record="bloodData" v-if="table_show=='血压' && value==1"></bloodpressTable>
				<bloodpressLine :record="bloodData" v-if="table_show=='血压' && value==0"></bloodpressLine>
			</view>
		</view>
	</view>
</template>

<script>
	import bloodpressLine from "./component/bloodpressLine.vue";
	import bloodpressTable from "./component/bloodpressTable.vue";
	import weightLine from "./component/weightLine.vue";
	import weightTable from "./component/weightTable.vue";
	import { getweight,getbloods } from '@/api/api.js';
	import moment from 'moment'
	export default {
		data() {
			return {
				table_show:"体重",
				weiData:[],
				bloodData:[],
				value: 1,
				Trend:[{
						value: 0,
						text: "趋势图",
					},{
						value: 1,
						text: "列表图",
					}
				],
				start_time:moment().subtract(7, 'days').format("YYYY-MM-DD"),
				end_time:moment(new Date()).format('YYYY-MM-DD'),
				patient_id: 0,
				org_id:0,
				currentDate:'2023-01-01',
				// start_time:'',
				// end_time:'',
			}
		},
		components: {
			bloodpressLine,
			bloodpressTable,
			weightLine,
			weightTable
		},
		onLoad(){
			this.org_id = this.$store.state.data.userInfo.user_org_id
			this.patient_id = this.$store.state.data.userInfo.id
			console.log('dddddd',this.end_time,this.start_time);
			this.getweightInfo(this.start_time,this.end_time,this.patient_id,this.org_id)
			this.getbloodInfo(this.start_time,this.end_time,this.patient_id,this.org_id)
		},
		methods: {
			wei_btn() {
				console.log('体重')
				this.table_show = "体重"
			},
			blo_btn(){
				console.log('血压')
				this.table_show = "血压"
			},
			async getweightInfo(start,end,patient_id,org_id) {
				let params = {
					start:start,
					end:end,
					patient_id: patient_id,
					org_id:org_id
				}
				let res = await getweight(params) 
				console.log('kkkkk',res.data)
				// this.patient = res.data.data.patient
				// let arr = []
				let arr_mid = []
				let dryarr = []
				let arr = res.data.data.after_eweight
				arr_mid = res.data.data.before_eweight
				dryarr = res.data.data.dry_eweight
				// console.log(arr,'ooo')
				arr.forEach(el => {
					arr_mid.forEach(i => {
						// console.log(el,'el')
						if(el.assessment_date == i.assessment_date){
							this.$set(el,'weight_before',i.weight_before)
						}
					})
				})
				let newarr = arr
				newarr.forEach(el => {
					dryarr.forEach(i => {
						if(el.assessment_date == i.assessment_date){
							this.$set(el,'dry_weight',i.dry_weight)
							el.assessment_date = this.timestampToTime(el.assessment_date)
						}
					})
				})
				this.weiData = arr
			},
			// 获取血压
			async getbloodInfo(start,end,patient_id,org_id) {
				let params = {
					start:start,
					end:end,
					patient_id: patient_id,
					org_id:org_id
				}
				// console.log(params,'params')
				let res = await getbloods(params) 

				let arr_mid = []
				// 透前
				let arr = res.data.data.before_blood
				// 透后
				arr_mid = res.data.data.after_blood

				arr.forEach(el => {
					arr_mid.forEach(i => {
						// console.log(el,'el')
						if(el.assessment_date == i.assessment_date){
							this.$set(el,'diastolic_blood_pressure_before',el.diastolic_blood_pressure)
							this.$set(el,'diastolic_blood_pressure_after',i.diastolic_blood_pressure)
							this.$set(el,'systolic_blood_pressure_before',el.systolic_blood_pressure)
							this.$set(el,'systolic_blood_pressure_after',i.systolic_blood_pressure)
							el.assessment_date = this.timestampToTime(el.assessment_date)
						}
					})
				})
				console.log(res.data.data,'params33333')
				this.bloodData = arr
			},
			
			timestampToTime(timestamp) {
			  // 时间戳为10位需*1000，时间戳为13位不需乘1000
			  var date = new Date(timestamp * 1000);
			  var Y = date.getFullYear() + "-";
			  var M =
			    (date.getMonth() + 1 < 10
			      ? "0" + (date.getMonth() + 1)
			      : date.getMonth() + 1) + "-";
			  var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
			  return Y + M + D;
			},
			dateChange(d) {
				uni.showToast({
					icon: 'none',
					title: d
				})
			},
			ed(res) {
				// console.log(res)
			},
			datetime_click(){
				this.$refs.datetimepocker.show()
			},
			startchang(val){
				console.log('cccc',val);
				this.start_time = val
			},
			endchang(val){
				this.end_time = val
			}
		},
	}
</script>

<style lang="scss" >
	page {
		height: 100%;
		background-color: #f3f3f9;
	}

	.wrap {
		height: 100vh;
		/* padding: 0 30rpx; */
	}

	.example-body {
		display: flex;
		// width: 500rpx;
		flex: 1;
	}
	.main_cnt{
		padding: 0 20rpx;
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}

	.selectbox {
		/* margin-top: 15px; */
		display: flex;
		justify-content: space-between;
		// box-sizing: border-box;
		height: 80rpx;
		padding: 10rpx;
		background: gainsboro;
	}

	.typeselect {
		margin-top: 15px;
		display: flex;
		justify-content: left;
	}

	.typeselect button {
		margin: 0 10rpx 0 0;
		width: 160rpx;
		font-size: 33rpx;
		background: #00c4b3;
		color: #fff;
	}
</style>

<style lang="scss" scoped>
	/deep/ .uni-select {
		background: #fff;
	}
	
	.btn_show{
		background: #fff;
		color: #00c4b3;
	}
</style>