datang-meeting/acupuncture-前台/src/views/indexCom/XGZL.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 class="dian-box dis">
									<div class="dian-box dis">
										<span class="dian" style="background: #91CC75"></span>
										中西医结合
									</div>
									<span class="dian" style="background: #5470C6"></span>
									纯中医
								</div>
							</div>
						</div>
						<div style="height: 300px" v-loading="loading">
							<div id="healType" 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="diseaseMethod" style="width: 100%"></div> -->
						</div>
					</el-card>
				</div>
			</div>
		</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="acupoint" 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: #5C7BD9"></span>
										治愈
									</div>
									<div class="dian-box dis">
										<span class="dian" style="background: #91CC75"></span>
										显效
									</div>
									<div class="dian-box dis">
										<span class="dian" style="background: #FAC858"></span>
										好转
									</div>
									<div class="dian-box dis">
										<span class="dian" style="background: #EE6666"></span>
										无效
									</div>
								</div>
							</div>
						</div>
						<div style="height: 300px" v-loading="loading">
							<div id="effect" style="width: 100%"></div>
						</div>
					</el-card>
				</div>
			</div>
		</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="cost" style="width: 100%"></div>
						</div>
					</el-card>
				</div>
				<div style="flex: 1">

				</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 {
		zlType
	} from "@/api/indexCom.js";
	import {
		healTypeEcharts,
		diseaseMethodEcharts,
		effectEcharts,
		costEcharts
	} from "./index";
	export default {
		name: "Post",
		props: ["title"],
		mixins: [resize],
		data() {
			return {
				queryParams: {
					param: {
						startTime: "",
						endTime: "",
					},
				},
				loading: false,
				healTypeValue: null, // 治疗类型
				diseaseMethod: null, // 病种方法
				effectValue: null, // 治疗效果
				costValue: null, //治疗效果
				effectObj: {
					"zy": "治愈", //治愈
					"xx": "显效", //显效
					"hz": "好转", //好转
					"wx": "无效" //无效
				}
			};
		},
		created() {
			// this.Linepatient();
			this.getData();
		},
		methods: {
			statistics(_data, _type) {
				this.initial(_data, _type); // 处理数据
				this.loading = true;
				this.getData(); // 获取数据
			},
			//患者信息
			async getData() {
				try {
					await zlType(this.queryParams).then((res) => {
						const {
							bzfffb,
							bzxwfb,
							zlfy,
							zllxtj,
							zlxwfb
						} = res.data;
						//治疗
						this.healTypeValue = [{
								value: zllxtj.zxyjh,
								name: "中西医结合",
							},
							{
								value: zllxtj.czy,
								name: "纯中医",
							},
						]
						this.handleHealType();
						// 病种方法
						// let diseaseMethod = []
						// let index = 0
						// for(let i in bzfffb){
						// 	for(let k in bzfffb[i]){
						// 		console.log(bzfffb[i][k])
						// 	}
						// 	index ++
						// }
						// this.handleDiseaseMethod()

						// 治疗效果
						this.effectValue = [{
								name: '治愈',
								value: zlxwfb.zy
							},
							{
								name: '显效',
								value: zlxwfb.xx
							},
							{
								name: '好转',
								value: zlxwfb.hz
							},
							{
								name: '无效',
								value: zlxwfb.wx
							}
						]
						this.handleEffect()
						// 治疗费用
						this.costValue =[zlfy.score1,zlfy.score2,zlfy.score3,zlfy.score4,zlfy.score5]
						this.handleCost()
					});
					this.loading = false;
				} catch (e) {}
			},
			// 治疗类型
			handleHealType() {
				healTypeEcharts.series[0].data = this.healTypeValue
				this.$nextTick(() => {
					var myChart = echarts.init(document.getElementById("healType"), null, {
						height: 300,
					});
					myChart.setOption(healTypeEcharts, true);
					myChart.resize();
					window.onresize = myChart.resize;
				});
			},
			// 病种方法
			handleDiseaseMethod() {
				// diseaseMethodEcharts.series[0].data = this.diseaseMethod
				this.$nextTick(() => {
					var myChart = echarts.init(document.getElementById("diseaseMethod"), null, {
						height: 300,
					});
					myChart.setOption(diseaseMethodEcharts, true);
					myChart.resize();
					window.onresize = myChart.resize;
				});
			},
			// 治疗效果
			handleEffect() {
				effectEcharts.series[0].data = this.effectValue
				this.$nextTick(() => {
					var myChart = echarts.init(document.getElementById("effect"), null, {
						height: 300,
					});
					myChart.setOption(effectEcharts, true);
					myChart.resize();
					window.onresize = myChart.resize;
				});
			},
			// 治疗费用
			handleCost() {
				costEcharts.series[0].data = this.costValue
				this.$nextTick(() => {
					var myChart = echarts.init(document.getElementById("cost"), null, {
						height: 300,
					});
					myChart.setOption(costEcharts, 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>