datang-meeting/acupuncture-前台/src/views/indexCom/JM.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="diagnose" 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>
						</div>
						<div style="height: 300px" v-loading="loading">
							<!-- <div id="gender" 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 {
		zlInfo
	} from "@/api/indexCom.js";
	import {
		diagnoseEcharts
	} from "./index";
	export default {
		name: "Post",
		props: ["title"],
		mixins: [resize],
		data() {
			return {
				loading: false,
				diagnoseValue: 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 zlInfo(this.queryParams).then((res) => {
						const {jlfb,smfb,sort,ttfb,txfb,zytz} = res.data
						// 病种（主要诊断）
						this.diagnoseValue = sort.sort((a, b) => a.total-b.total)
						this.handleDiagnose()
					});
					this.loading = false;
				} catch (e) {}
			},
			// 病种（主要诊断）
			handleDiagnose() {
				
				diagnoseEcharts.series[0].data = this.diagnoseValue?.map((item) => {
					return item.total;
				});
				diagnoseEcharts.yAxis.data = this.diagnoseValue?.map((item) => {
					return item.type;
				});
				console.log('diagnoseEcharts',diagnoseEcharts)
				this.$nextTick(() => {
					var myChart = echarts.init(document.getElementById("diagnose"), null, {
						height: 300,
					});
					myChart.setOption(diagnoseEcharts, 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.columnar();
			},
		},
	};
</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>