179crm_user_app/pages_echarts/waistLine.vue

<template>
	<view class="hb column hidden container">
		<image class="bg" src="/static/images/health/waist_circumference_top_bg.png" mode="widthFix"></image>
		<view :style="{height: statusBarHeight,background: bgColor }"></view>
		<u-navbar title="腰围" titleStyle="font-weight: bold;" @rightClick="rightClick" :autoBack="true"
			:bg-color="bgColor">
		</u-navbar>
		<view class="top-fixed">
			<!-- tab切换 -->
			<!-- <view class="pub-tab-box">
				<view class="tab-inner">
					<view v-for="(item,index) in times" :key="index" :class="item.val == aIndex?'item active':'item'"
						@click="orderStatusChange(item)">
						<view class="text">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view> -->
			<dateTimePicker @onChange="onChangeTime" :tab-color="'orange'"/>
		</view>
		<scroll-view class="content" :scroll-y="true">
			<view class="content-box">
				<!-- <view class="box-tab">
					<view class="item active">图表</view>
					<view class="item">列表</view>
				</view>
				<view class="h40"></view> -->
				<view class="tltle">腰围趋势</view>
				<view class="subtitle">单位：CM</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
				</view>
				<view class="legend">
					<view class="legend-item">
						<view class="legend-dot" style="background-color: #52D087;"></view><text>正常</text>
					</view>
					<view class="legend-item">
						<view class="legend-dot" style="background-color: #FDBD27;"></view><text>偏小</text>
					</view>
					<view class="legend-item">
						<view class="legend-dot" style="background-color: #FF5030;"></view><text>偏大</text>
					</view>
				</view>
			</view>
			<view class="h40"></view>
			<view class="btn-box">
				<view class="sub-btn" @click="navgetTo()">记录</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import dateTimePicker from "@/pages_echarts/components/dateTimePicker/dateTimePicker.vue"
	export default {
		components: {
			dateTimePicker
		},
		data() {
			return {
				statusBarHeight: '',
				top: 0,
				aIndex: 0,
				times: [{
						name: "每日",
						val: 0
					},
					{
						name: "每周",
						val: 1
					},
					{
						name: "每月",
						val: 2
					}
				],
				indexInfo: [],
				chartData: {},
				opts: {
					color: ["#FDBD27", "#FF5030"],
					padding: [15, 0, 15, 0],
					enableScroll: false,
					dataLabel: false,
					dataPointShapeType: 'hollow',
					tapLegend: false,
					legend: {
						show: false
					},
					xAxis: {
						// disableGrid: true
						axisLine: false,
						fontColor: '#CCCCCC'
					},
					yAxis: {
						// showTitle:true,
						// title:"单位：mmol/L",

						gridType: "dash",
						dashLength: 2,
						data: [{
							axisLine: false,
							fontColor: '#CCCCCC'
						}]
						// fontColor:'#CCCCCC'
					},
					extra: {
						  line: {
						             type: "straight",
						             width: 2,
						             activeType: "hollow"
						           }
					}
				}
			}
		},
		computed: {
			// 计算属性的 getter
			bgColor: function() {
				var top = this.top / 30;
				return 'rgba(11,179,242, ' + top + ')';
			},
		},
		onLoad() {
			// 获取系统信息
			const sys = uni.getSystemInfoSync()
			this.statusBarHeight = sys.statusBarHeight + 'px'
			this.getServerData();
		},
		onUnload() { //普通页面在 onUnload 生命周期中执行
			uni.$emit('stop')
		},
		onHide() { //tabBar页面在onHide生命周期中执行
			uni.$emit('stop')
		},
		onPageScroll(e) {
			//console.log(e)
			this.top = e.scrollTop;
		},
		methods: {
			// tab切换
			orderStatusChange(item) {
				this.aIndex = item.val
			},
			onChangeTime(time) {
				const param = {
					startTime: this.utils.timeFormat(time[0],'yyyy/mm/dd hh:MM:ss'),
					endTime: this.utils.timeFormat(time[1],'yyyy/mm/dd hh:MM:ss'),
					deviceId: ''
				}
				// this.queryParam = param
				// this.getServerData(param)
				// this.getAbnormalInfo(param)
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["周一", "周二", "周三", "周四", "周五"],
						series: [{
							name: "测量值",
							data:[0,100,0,0,0]
						}

						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			navgetTo(index) {
				uni.navigateTo({
					url: '/pages_echarts/waistLineList'
				})
			},
			goToUser() {
				uni.navigateTo({
					url: '/pages_health/addUser?type=edit&docId='
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;

		.bg {
			width: 100%;
			height: 380rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
	}

	.top-fixed {
		width: 100%;
		position: fixed;
		top: calc(var(--status-bar-height) + 140rpx);
		left: 0;
		z-index: 10;
	}

	.pub-tab-box {
		box-sizing: border-box;
		width: 400rpx;
		// padding: 0 60rpx;
		margin: 0 auto;

		// background-color: #FFFFFF;
		.tab-inner {
			height: 88upx;
			line-height: 88upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			overflow-x: auto;
		}

		.item {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #626468;
			line-height: 64rpx;
			text-align: center;

			&:last-child {
				margin-right: 0;
			}

			&.active {
				font-weight: 500;
				width: 124rpx;
				height: 64rpx;
				background: #FF5039;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				color: #fff;
			}

			.text {
				position: relative;
				z-index: 1;
			}

			.tab-bg {
				width: 72upx;
				height: 28upx;
				position: absolute;
				top: 17upx;
				left: 50%;
				transform: translateX(-36upx);
				z-index: -1;
			}
		}
	}

	.content {
		padding-top: calc(var(--status-bar-height) + 300rpx) !important;
		height: 100vh;
		box-sizing: border-box;
		width: 100%;
		// padding: 0 24rpx 24rpx 24rpx;
		overflow: hidden;
padding: 20rpx;
		.btn-box {
			height: 120upx;
			padding: 0 30upx;
			display: flex;
			align-items: center;
			justify-content: center;

			.sub-btn {
				width: 388rpx;
				height: 72rpx;
				line-height: 72upx;
				text-align: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #FF5039;
				border-radius: 44upx;
				margin-bottom: 40upx;
			}
		}

		.content-box {
			// width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;

			.tltle {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #222426;
				text-align: left;
				margin-bottom: 16rpx;
			}

			.subtitle {
				// padding-left: 24rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #898E91;
				text-align: left;

			}

			/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
			.charts-box {
				padding: 24rpx;
				// width: 100%;
				height: 500rpx;
				margin-top: 30rpx;
			}
	.legend {
		// height: 34rpx;
		margin-top: 44rpx;
		// @include u-flex(row, center, space-between);
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #626468;

		&-item {
			flex: 1;
			text-align: center;
			// @include u-flex(row, center, center);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&-dot {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			margin: 16rpx;
		}
	}
			.more {
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #898E91;
			}
          .box-tab{
			  display: flex;
			  align-items: center;
			  height: 100rpx;
			  line-height: 100rpx;
			  background: linear-gradient( 360deg, #F9EDEC 0%, #FFD6D2 100%);
			  // background: url(@/static/images/health/hip_circumference_tab_switch_bg.png) no-repeat  center center / cover;
				  .item {
				  	font-family: PingFang SC;
				  	font-weight: 400;
				  	font-size: 36rpx;
				  	color: #626468;
				  	flex:1;
				  	text-align: center;
					display: flex;
					    align-items: flex-end;
					    justify-content: center;
				  	&.active {
				  		background: #fff;
				  		color: #FF5039;
						font-weight: bold;
						border-radius: 40rpx 40rpx 0 0;
						// box-shadow: 5rpx 0px 15rpx rgba(0, 0, 0, 0.1);
						&::after {
							content: "";
							width: 36rpx;
							height: 8rpx;
							background: #FF5039;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							position: absolute;
							// bottom: 0;
						}
						
				  	}
				  
				  	.text {
				  		position: relative;
				  		z-index: 1;
				  	}
				  
				  	.tab-bg {
				  		width: 72upx;
				  		height: 28upx;
				  		position: absolute;
				  		top: 17upx;
				  		left: 50%;
				  		transform: translateX(-36upx);
				  		z-index: -1;
				  	}
				  }
		  }
		

			
		}
	}
</style>