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="system" 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,
		systemEcharts
	} from "./index";
	export default {
		name: "Post",
		props: ["title"],
		mixins: [resize],
		data() {
			return {
				loading: false,
				diagnoseValue: null, // 病种
				systemValue: null, // 体系
				queryParams: {
					param: {
						startTime: "",
						endTime: "",
					},
				},
				// 体系中文
				systemObj: {
					"yxfpz": "隐形肥胖型", //隐形肥胖型
					"zfgdx": "脂肪过多型", //脂肪过多型
					"fpx": "肥胖型", //肥胖型
					"jrbzx": "肌肉不足型", //肌肉不足型
					"jkjcx": "健康匀称型", //健康匀称型
					"czjrx": "超重肌肉型", //超重肌肉型
					"xsx": "消瘦型", //消瘦型
					"dzfx": "低脂肪型", //低脂肪型
					"ydyx": "运动员型", //运动员型
				}
			};
		},
		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.systemValue = []
						delete txfb.total
						for (let key in txfb) {
							let data = {
								name: this.systemObj[key],
								value: txfb[key]
							}
							this.systemValue.push(data)
						}
						this.handleSystem()
					});
					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;
				});
				this.$nextTick(() => {
					var myChart = echarts.init(document.getElementById("diagnose"), null, {
						height: 300,
					});
					myChart.setOption(diagnoseEcharts, true);
					myChart.resize();
					window.onresize = myChart.resize;
				});
			},
			// 体系
			handleSystem() {
				systemEcharts.series[0].data = this.systemValue?.map((item) => {
					return item.value;
				});
				systemEcharts.xAxis.data = this.systemValue?.map((item) => {
					return item.name;
				});
				this.$nextTick(() => {
					var myChart = echarts.init(document.getElementById("system"), null, {
						height: 300,
					});
					myChart.setOption(systemEcharts, 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>