property/property_ui/pages/health/index.vue

<template>
	<view :style="'padding-top:'+nvaHeight+'px;'">
		<view class="navbox">
			<uni-nav-bar color="#ffffff" :background-color="backgroundColor" :border="false" statusBar='true'
				fixed="true">
			</uni-nav-bar>
		</view>
		<!-- 主体 -->
		<image :src="navbg" class="navbg"></image>
		<view class="wymain">
			<view class="pdlr12">
				<view class="topbox flexc mb12" @click="getBookFn">
					<image :src="heabox" class="heabox flex0"></image>
					<view class="tit flex1">居民健康档案</view>
					<image :src="rimg" class="rimg flex0"></image>
				</view>
				<view class="counts mb12">
					<view class="tit mb5">居民年龄段分布(人)</view>
					<view class="txt mb10">更新时间：2024-11-25</view>
					<!-- 数据图 -->
					<view>
						<qiun-data-charts type="ring" :chartData="chartDataa" :opts='optsa'></qiun-data-charts>
					</view>
				</view>
				<view class="counts mb12">
					<view class="tit mb5">居民各年龄段性别分布</view>
					<view class="txt mb10">更新时间：2024-11-25</view>
					<!-- 数据图 -->
					<view>
						<qiun-data-charts type="area" :chartData="chartDatab" :opts='optsb'></qiun-data-charts>
					</view>
				</view>
				<view class="counts mb12">
					<view class="tit mb5">居民血型分布</view>
					<view class="txt mb10">更新时间：2024-11-25</view>
					<!-- 数据图 -->
					<view >
						<!-- <l-echart ref="chartc"></l-echart> -->
						<qiun-data-charts type="rose" :chartData="chartDatac" :opts='optsc'></qiun-data-charts>
					</view>
				</view>
			</view>
			<view class="contbox">
				<view class="cont flexc mb9">
					<view class="line"></view>
					<view class="flex1 tit">健康资讯</view>
					<view class="morebox">
						<view class="flexc">更多<image :src="more"></image>
						</view>
					</view>
				</view>
				<view class="hlists">
					<box-list :datainfo="list" :wtdt="wtdt" type='health'></box-list>
				</view>
			</view>
		</view>
		<loading></loading>
		<footers v-if="isfootflag" :footerindex="footerindex"></footers>
	</view>
</template>

<script>
	import footers from '@/components/footer/footer.vue'
	import boxList from "@/components/box/list.vue"
	export default {
		components: {
			footers,
			boxList
		},
		data() {
			return {
				footerindex: 'health',
				isfootflag: true,
				nvaHeight: 44,
				// activeColor:'#A7CDF9',
				// nactiveColor:'#DADADA',
				backgroundColor: "transparent",
				navbg: require("@/static/images/health/hbg.png"),
				heabox: require("@/static/images/health/heabox.png"),
				rimg: require("@/static/images/health/rimg.png"),
				more: require("@/static/images/health/more.png"),
				zhanflag: true,
				pageSize: 10,
				pageNum: 1,
				reachflag: true,
				wtdt: '',
				chartDataa: {
					"categories": [],
					series: [{
						data: [{
								"name": "01~10",
								"value": 50,
								labelShow: false
							},
							{
								"name": "11~20",
								"value": 30,
								labelShow: false
							},
							{
								"name": "21~30",
								"value": 20,
								labelShow: false
							},
							{
								"name": "31~40",
								"value": 18,
								labelShow: false
							},
							{
								"name": "41~50",
								"value": 50,
								labelShow: false
							},
							{
								"name": "51~60",
								"value": 30,
								labelShow: false
							},
							{
								"name": "61~70",
								"value": 20,
								labelShow: false
							},
							{
								"name": "71~80",
								"value": 18,
								labelShow: false
							},
							{
								"name": "81~90",
								"value": 50,
								labelShow: false
							},
							{
								"name": "91~100",
								"value": 30,
								labelShow: false
							},
							{
								"name": "100以上",
								"value": 20,
								labelShow: false
							},
						]
					}],
					"enableScroll": false
				},
				optsa: {
					padding: [0, 0, 0, 0],
					color: ["#5989F8", "#B7DE5A", "#FAC858", "#EE6666", "#73C0DE", "#3BA272", "#FF8045", "#9A60B4",
						"#ea7ccc", "#5470C6", "#45CB99"
					],
					title: {
						name: "总计",
						fontSize: 12,
						color: "#666666",
					},
					legend: {
						// show: false,
						position: "bottom",
						padding: 0,
						margin: 0,
				 },
					// 副标题
					subtitle: {
						name: "5884",
						fontSize: 22,
						color: "#46CB99"
					},
					extra: {
						ring: {
							ringWidth: 20,
							borderWidth:1,
							borderRadius:30
						},
					}
				},
				chartDatab: {
					categories: ["1-10", "11-20", "21-30", "31-40", "41-50", "51-60", "61-70", "71-80", "81-90", "91-100",
						"100以上"
					],
					series: [{
							name: "女性",
							data: [35, 8, 25, 37, 4, 20]
						},
						{
							name: "男性",
							data: [70, 40, 65, 100, 44, 68]
						},
					]
				},
				optsb: {
					color: ["#5169CF", "#92CE78", ],
					padding: [0, 0, 0, 0],
					enableScroll: false,
					legend: {
						float:'right',
						position: "top",
						padding: 0,
						margin: 20,
					},
					xAxis: {
						disableGrid: true,
						fontSize:10
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						splitNumber:5,
						min:10,
						max:180,
						data:[{
							axisLine:false
						}]
					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false,
							activeType: "hollow"
						}
					}
				},
				chartDatac: {
					series: [{
						data: [{
							"name": "A型","labelText":"A型","value": 50,	
						}, {
							"name": "B型","labelText":"B型","value": 30,
						}, {
							"name": "AB型","labelText":"AB型","value": 20
						}, {
							"name": "O型","labelText":"O型","value": 18
						}, {
							"name": "RH阴性","labelText":"RH阴性","value": 8
						}, {
							"name": "RH阳性","labelText":"RH阳性","value": 8
						}]
					}]
				},
				optsc: {
					color: ["#73C0DE", "#FC8452", "#9A60B4", "#EA7CCC", "#5470C6", "#91CC75", ],
					padding: [0, 0, 0, 0],
					enableScroll: false,
					legend: {
						show: true,
						position: "left",
						lineHeight: 25
					},
					extra: {
						rose: {
							type: "area",
							minRadius: 50,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 2,
							borderColor: "#FFFFFF"
						}
					}
				},
				optionc: {
					legend: {
						top: 'bottom'
					},
					series: [{
						name: '居民血型分布',
						type: 'area',
						radius: [15, 100],
						center: ['50%', '50%'],
						roseType: 'area',
						itemStyle: {
							borderRadius: 8
						},
						data: [{
								value: 40,
								name: 'A型'
							},
							{
								value: 38,
								name: 'B型'
							},
							{
								value: 32,
								name: 'O型'
							},
							{
								value: 30,
								name: 'RH阴性'
							},
							{
								value: 28,
								name: 'RH阳性'
							},
						]
					}]
				},
				list: [{
					noticeTitle: "您有1条报修信息，请及时查看处理！",
					num: '4'
				}, {
					noticeTitle: "您有1条报修信息，请及时查看处理！",
					num: '12'
				}],
			}
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			if (scrollTop > 0) {
				this.backgroundColor = '#48CC9A'
			} else {
				this.backgroundColor = 'transparent'
			}
		},
		// 上拉触底加载更多触发事件
		onReachBottom() {
			if (this.reachflag) {
				this.pageNum++
				this.getDataFn()
			}
		},
		onLoad: function() {
			uni.getSystemInfo({
				success: (e) => {
					this.nvaHeight = Number(e.statusBarHeight) + 44;
				}
			})
		},
		methods: {
			getBookFn() {
				this.$tab.navigateTo(`/health/pages/health/index`)
			},
			getDataFn() {
				return
				var params = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
				}
				params.noticeType = this.tabidx
				getNoticeList(params).then(res => {
					if (res.code == 200) {
						if (res.rows.length < this.pageSize) {
							this.reachflag = false
							this.wtdt = '到底了~';
						} else {
							var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -
								1)
							if (num < res.total) {
								this.reachflag = true
								this.wtdt = ''
							} else {
								this.reachflag = false
								this.wtdt = '到底了~';
							}
						}
						if (this.pageNum == 1) {
							this.list = res.rows;
						} else {
							this.list = this.list.concat(res.rows)
						}
					} else {
						this.$toast(res.msg)
					}
				})

			},

		}
	}
</script>
<style>
	page {
		background: #F4F6F8;
	}
</style>
<style lang="scss" scoped>
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	}
.navbg{width: 100%;height: 688rpx;}
.wymain{z-index: 2;position: relative;padding-top: 244rpx;}
.topl{overflow: hidden;padding-left: 16rpx;
	image{width: 18rpx;height: 22rpx;margin-right: 14rpx;flex: 0 0 auto;}
	view{font-weight: bold;font-size: 26rpx;color: #272727;}
}
.topbox{height: 112rpx;background: #FFFFFF;border-radius: 20rpx;padding: 26rpx 18rpx;box-sizing: border-box;
	.heabox{width: 72rpx;height: 70rpx;margin-right: 10rpx;}
	.tit{font-weight: bold;font-size: 28rpx;color: #272727;}
	.rimg{width: 14rpx;height: 24rpx;}
}
.counts{
	background: #FFFFFF;padding: 24rpx;border-radius: 20rpx;
	.tit{font-weight: bold;font-size: 32rpx;color: #272727;}
	.txt{font-weight: 500;font-size: 22rpx;color: #AAAAAA;}
}
.hlists{margin: 0 24rpx 20rpx;
	background: #FFFFFF;padding: 0 12rpx;border-radius: 20rpx;
}
.contbox{padding-top: 6rpx;
	.cont{margin-bottom: 12rpx;position: relative;
		.line{width: 14rpx;height: 48rpx;margin-right: 22rpx;border-radius: 0 24rpx 24rpx 0;background-color: #45CB99;}
		.tit{font-size: 15px;color: #272727;font-weight: bold;}
		.morebox{padding-right: 24rpx;
			image{width: 18rpx;height: 16rpx;margin-left: 16rpx;}
			view{font-size: 24rpx;color: #AAAAAA;}
		}
	}

}
</style>