acupuncture/acupuncture-后台/src/views/indexCom/patient.vue

<template>
	<div>
		<div class="app-container">
			<div class="dis" style="width: 100%">
				<div style="flex: 1; margin-right: 20px">
					<el-card shadow="always">
						<div class="dis title-box">
							<span class="header-title">患者总数</span>
							<div class="dis"></div>
						</div>
						<!-- 患者总数统计图 -->
						<div style="height: 300px" v-loading="loading">
							<div id="patienty" style="width: 100%"></div>
						</div>
					</el-card>
				</div>
				<div style="flex: 1;margin-right: 20px">
					<el-card shadow="always">
						<div class="dis title-box">
							<span class="header-title">性别数量</span>
							<div class="dis">
								<div class="dian-box dis">
									<div class="dian-box dis">
										<span class="dian" style="background: #4f8bff"></span>
										男
									</div>
									<span class="dian" style="background: #fe4943"></span>
									女
								</div>
							</div>
						</div>
						<!-- 性别统计图 -->
						<div style="height: 300px" v-loading="loading">
							<div id="gender" style="width: 100%"></div>
						</div>
					</el-card>
				</div>
				<div style="flex: 1; margin-right: 20px">
					<el-card shadow="always">
						<div class="dis title-box">
							<span class="header-title">年龄分布</span>
							<div class="dis"></div>
						</div>
						<!-- 患者总数统计图 -->
						<div style="height: 300px" v-loading="loading">
							<div id="age" style="width: 100%"></div>
						</div>
					</el-card>
				</div>
				<div style="flex: 1;">
					<el-card shadow="always">
						<div class="dis title-box">
							<span class="header-title">既往病种分布</span>
							<div class="dis">
								<!-- <div class="dian-box dis">
									<div class="dian-box dis">
										<span class="dian" style="background: #4f8bff"></span>
										男
									</div>
									<span class="dian" style="background: #ffcd6c"></span>
									女
								</div> -->
							</div>
						</div>
						<!-- 既往病种分布 -->
						<div style="height: 300px" v-loading="loading">
							<div id="disease" style="width: 100%"></div>
						</div>
					</el-card>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from "echarts";
	require("echarts/theme/macarons"); // echarts theme
	import resize from "@/views/dashboard/mixins/resize";
	import {
		patientTotal,
		queryByDatePatient
	} from "@/api/indexCom.js";
	import {
		HZXX,
		HZXXSJFX,
		gende,
		ageEcharts,
		diseaseEcharts
	} from "./index";
	export default {
		name: "Post",
		props: ["title"],
		mixins: [resize],
		data() {
			return {
				loading: false,
				HZXXvalue: null, // 患者总数统计值
				gendeValue: null, // 性别统计值
				ageValue: null, // 年龄统计值
				diseaseValue: null, // 年龄统计值
				queryParams: {
					param: {
						startTime: "",
						endTime: "",
					},
				},
				jwbzObj: {
					"gxy": "高血压", //高血压
					"nxgb": "脑血管病", //脑血管病
					"exzl": "恶性肿瘤", //恶性肿瘤
					"gxb": "冠心病", //冠心病
					"jsjb": "精神疾病", //精神疾病
					"whsezcky": "胃和十二指肠溃疡", //胃和十二指肠溃疡
					"fpz": "肥胖症", //肥胖症
					"gzssz": "骨质疏松症", //骨质疏松症
					"ycxXtxjb": "遗传性、先天性疾病", //遗传性、先天性疾病
					"tnb": "糖尿病", //糖尿病
					"mxfxjb": "慢性肺系疾病", //慢性肺系疾病
					"gzxz": "高脂血症", //高脂血症
					"gzjb": "肝脏疾病", //肝脏疾病
					"gmxjb": "过敏性疾病", //过敏性疾病
					"gjy": "关节炎", //关节炎
					"tf": "痛风", //痛风
					"sySb": "肾炎、肾病", //肾炎、肾病
					"other": "其他" //其他
				}
			};
		},
		created() {
			// this.Linepatient()
			this.getData();
		},
		methods: {
			statistics(_data, _type) {
				this.initial(_data, _type); // 处理数据
				this.loading = true;
				this.getData(); // 获取数据
			},
			//患者信息
			async getData() {
				try {
					await patientTotal(this.queryParams).then((res) => {
						// 患者总数统计图
						this.HZXXvalue = [{
							value: res.data.totalPatients,
							name: "患者总数"
						}, ];
						// 性别分析图
						this.gendeValue = [{
								value: res.data.gender.male,
								name: "男"
							},
							{
								value: res.data.gender.female,
								name: "女"
							}
						];
						// 年龄分布
						let ageValue = res.data.age
						this.ageValue = [ageValue.num1, ageValue.num2, ageValue.num3, ageValue.num4, ageValue
							.num5, ageValue.num6
						]
						// 病种分布
						let diseaseValue = res.data.jwbz
						this.diseaseValue = []
						for (let key in diseaseValue) {
							let data = {
								name: this.jwbzObj[key],
								value: diseaseValue[key]
							}
							this.diseaseValue.push(data)
						}
						this.Linepatient(); // 患者总数
						this.handleAge(); // 年龄
						this.columnar(); //性别分析图
						this.handleDisease(); //病种分布
					});
					this.loading = false;
				} catch (e) {
					console.log('患者统计', e)
				}
			},

			// 患者信息
			Linepatient() {
				HZXX.title.text = this.HZXXvalue[0].value;
				HZXX.series[0].data = this.HZXXvalue;
				this.$nextTick(() => {
					var myChart = echarts.init(document.getElementById("patienty"), null, {
						height: 300,
					});
					myChart.setOption(HZXX, true);
					myChart.resize();
					window.onresize = myChart.resize;
				});
			},
			// 性别分析图
			columnar() {
				gende.series[0].data = this.gendeValue;
				this.$nextTick(() => {
					var myChart = echarts.init(document.getElementById("gender"), null, {
						height: 300,
					});
					myChart.setOption(gende, true);
					myChart.resize();
					window.onresize = myChart.resize;
				});
			},
			// 年龄分布图
			handleAge() {
				ageEcharts.series[0].data = this.ageValue
				this.$nextTick(() => {
					var myChart = echarts.init(document.getElementById("age"), null, {
						height: 300,
					});
					myChart.setOption(ageEcharts, true);
					myChart.resize();
					window.onresize = myChart.resize;
				});
			},
			// 病种分布图
			handleDisease() {
				diseaseEcharts.series[0].data = this.diseaseValue?.map((item) => {
					return item.value;
				});
				diseaseEcharts.xAxis.data = this.diseaseValue?.map((item) => {
					return item.name;
				});
				this.$nextTick(() => {
					var myChart = echarts.init(document.getElementById("disease"), null, {
						height: 300,
					});
					myChart.setOption(diseaseEcharts, true);
					myChart.resize();
					window.onresize = myChart.resize;
				});
			},
			// 数据处理 查询类型判断参数
			initial(_data, _type) {
				_data[0] = this.$moment(_data[0]).format("YYYY-MM-DD");
				_data[1] = this.$moment(_data[1]).format("YYYY-MM-DD");
				this.queryParams.param = {
					startTime: _data[0] + " " + "00:00:00",
					endTime: _data[1] + " " + "23:59:59",
				};
			},
			// 重新渲染图标
			getRenew() {
				this.Linepatient(); // 患者总数
				this.handleAge(); // 年龄
				this.columnar(); //性别分析图
				this.handleDisease(); //病种分布
			},
		},
	};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
	>>>.el-card__body {
		padding: 10px 0 !important;
	}

	.dis {
		display: flex;
	}

	.header-title {
		font-size: 18px;
	}

	.title-box {
		padding: 10px 20px;
		border-bottom: 1px solid #dfe6ec;
	}

	.dian-box {
		align-items: center;
	}

	.dian {
		display: inline-block;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		margin: 0 10px;
	}

	.title-box {
		justify-content: space-between;
	}

	.>>>.el-radio--small.is-bordered {
		margin-right: 20px !important;
		margin-left: 0 !important;
	}

	>>>.el-radio__input {
		display: none;
	}

	>>>.el-radio__label {
		padding-left: 5px;
	}

	.app-container {
		padding: 0;
		display: flex;
		justify-content: space-between;
	}

	.title {
		display: flex;
		align-items: center;
		font-size: 20px;
		font-weight: 600;
	}

	.title-bor {
		display: inline-block;
		height: 20px;
		width: 6px;
		background: #4f8bff;
		margin-right: 10px;
		border-radius: 8px;
	}
</style>