hz-zhhq-app/pages/epidemic/vaccine-static.vue

<template>
	<view>
		<view class="category-name">
			<text style="display: inline-block;width: 6upx;height: 30upx;background: #40a3ff;margin-bottom: -4upx;margin-right: 10upx;border-radius: 2upx;"></text>
			疫苗接种统计
		</view>
		<view style="padding: 20upx;background-color: white;border-top: 1px solid #e5e5e5;">
			<view style="padding: 40upx;background-color: #40a3ff;border-radius: 10upx;color:white ;">
				<view >
					<view style="font-size: 30upx;">接种完成率</view>
					<view style="font-size: 40upx;font-weight: 600;">{{getPercent(staticData.list[0].VACCINE_NUM,staticData.list[0].ALL_NUM)+"%"}}</view>
				</view>
				<view class="box box-around" style="margin-top: 40upx;">
					<view style="width: 25%;">
						<view style="font-size: 24upx;">总人数</view>
						<view style="font-size: 40upx;">{{staticData.list[0].ALL_NUM}}</view>
					</view>
					<view style="width: 37%;text-align: center;">
						<view style="font-size: 24upx;">已接种人数</view>
						<view style="font-size: 40upx;">{{staticData.list[0].VACCINE_NUM}}</view>
					</view>
					<view style="width: 37%;text-align: center;">
						<view style="font-size: 24upx;">未接种人数</view>
						<view style="font-size: 40upx;">{{staticData.list[0].ALL_NUM - staticData.list[0].VACCINE_NUM}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="category-name" style="margin-top: 20upx;">
			<text style="display: inline-block;width: 6upx;height: 30upx;background: #40a3ff;margin-bottom: -4upx;margin-right: 10upx;border-radius: 2upx;"></text>
			疫苗接种完成月统计
		</view>
		<view style="padding: 20upx;background-color: white;border-top: 1px solid #e5e5e5;">
			<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
		</view>
		<view class="category-name" style="margin-top: 20upx;">
			<text style="display: inline-block;width: 6upx;height: 30upx;background: #40a3ff;margin-bottom: -4upx;margin-right: 10upx;border-radius: 2upx;"></text>
			各部门疫苗接种统计
		</view>
		<view style="background-color: white;border-top: 1px solid #e5e5e5;">
			<view style="width: 100%;padding: 20upx;color: #40a3ff;">
				<view class="visitcon w25">部门名称</view>
				<view class="visitcon w25">总人数</view>
				<view class="visitcon w25">已接种人数</view>
				<view class="visitcon w25">接种率</view>
			</view>
			<view :style="(index+2)%2!=0?'':'background:#F5F5F5'"  style="padding: 10upx 20upx;align-items: center;display: flex;" v-for="(item, index) in staticData.dlist" :key="index" >
				<view class="visitcon w25">{{item.NAME}}</view>
				<view class="visitcon w25" >{{item.ALL_NUM}}</view>
				<view class="visitcon w25" >{{item.VACCINE_NUM||0}}</view>
				<view class="visitcon w25" >{{getPercent(item.VACCINE_NUM,item.ALL_NUM)}}</view>
			</view>
		</view>
		<view style="padding: 30upx; text-align: center;color: #666; font-size: 26upx;">
			<!-- 没有更多数据了 -->
		</view>
		
	</view>
</template>

<script>
	import {vaccineStatic} from '@/common/api.js';
	import {callbackRequest,formatDate,getStorage,callbackRequestNoLoading  } from '@/common/util.js';
	export default {
		data() {
			return {
				option:{
					legend: {
						data:['接种人数','接种率']
					},
					xAxis: {
						type: 'category',
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']
					},
					yAxis: [
						{
							type: 'value',
							name:'接种人数',
							minInterval:1,
							axisLine:{
								show:true,
								lineStyle:{
									color:"#56CDC7"
								}
							}
						},
						{
							type: 'value',
							name:'接种率',
							min: 0,
							axisLine:{
								show:true,
								lineStyle:{
									color:"#40a3ff"
								}
							}
						},
					],

					series: [
						{
							data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
							type: 'bar',
							name:'接种人数',
							itemStyle:{
								color:'#56CDC7'
							}
						},
						{
							data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
							type: 'line',
							name:'接种率',
							yAxisIndex: 1,
							itemStyle:{
								color:'#40a3ff'
							}
						}
					]
				},
				staticData:{}
			}
		},
		onLoad() {
			this.vaccineStatic();
		},
		methods: {
			getPercent(num, total) {
			    num = parseFloat(num);
			    total = parseFloat(total);
			    if (isNaN(num) || isNaN(total)) {
			        return 0;
			    }
			    return total <= 0 ? "0" : (Math.round(num / total * 10000) / 100.00);
			},
					
			vaccineStatic() {
				let userId= getStorage('userInfo').userId;
				callbackRequest({ method: vaccineStatic, data: { userId: userId} }).then(res => {
					if (res.data.returnCode == 1) {
						this.staticData = res.data.returnData;
						let mlist = res.data.returnData.mlist;
						let seriesData = [mlist[0].M1,mlist[0].M2,mlist[0].M3,mlist[0].M4,mlist[0].M5,
						mlist[0].M6,mlist[0].M7,mlist[0].M8,mlist[0].M9,mlist[0].M10,mlist[0].M11,mlist[0].M12]
						this.option.series[0].data = seriesData;
						
						let seriesData2 = [];
						let ALLNUM = this.staticData.list[0].ALL_NUM
						for(let i=0;i<seriesData.length;i++){
							let per = this.getPercent(seriesData[i],ALLNUM);
							seriesData2.push(per);
						}
						this.option.series[1].data = seriesData2;
						
					}
				});
			},
			
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/js/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.option)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				myChart.setOption(newValue)
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>

<style lang="scss">
	uni-page-body {
		background-color:#F5F5F5!important;
		min-height: 100% !important;
		height: auto !important;
	}
	
	.echarts {
		width: 100%;
		height: 300px;
	}
.category-name {
	
		background-color: white;
		padding: 30upx 20upx;
		font-size: 30upx;
		/* margin-bottom: 40upx; */
		font-weight: bold;
		line-height: 36rpx;

		image {
			margin-right: 14upx;
			width: 36upx;
			height: 36upx;
			vertical-align: top;
		}
	}
	
	
.box {
	display: flex;
	display: -webkit-flex;
}

.box-row-reverse {
	flex-direction: row;
}

.box-column {
	flex-direction: column;
}

.box-left {
	justify-content: flex-start;
}

.box-right {
	justify-content: flex-end;
}

.box-center {
	justify-content: center;
}

.box-between {
	justify-content: space-between;
}
.box-around {
	justify-content: space-around;
}
.box-align-center {
	align-items: center;
}

.box-wrap {
	flex-wrap: wrap;
}	
	
.tab-banner{
	width: 100%;
	position: relative;
	
	.image{
		width: 100%;
		height: 200upx;
		position: absolute;
		top: 0upx;
	}
	.image2{
		position: absolute;
		top: 40upx;
		width: 100%;
		padding: 0px 20upx;
		height: 240upx;
	}
}

.list-cell {
		padding: 20upx 20upx;
		box-sizing: border-box;
		background: #fff;
		margin-bottom: 10upx;
	}
.cell-title {
	font-size: 28upx;
	/* line-height: 56upx; */
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
.sub-title {
		padding-top: 10upx;
		font-size: 28upx;
		color: #bcbcbc;
	}
.visitcon {
	display: inline-block;
	text-align: center;
	font-size: 28upx;
}
.visitconContent {
	// text-decoration: underline;
	display: inline-block;
	text-align: center;
	font-size: 28upx;
}
.w40 {
	width: 40%;
}
.w25 {
	width: 25%;
}
.w15 {
	width: 15%;
}
.w33 {
	width: 33.3%;
}
.w45 {
	width: 45%;
}	
	
</style>