页面尺寸变化重新渲染图表

acupuncture-前台/src/views/index.vue

@@ -65,9 +65,11 @@
 		},
 		methods: {
 			resize() {
-				// this.$refs.patient.getRenew();
-				// this.$refs.JM.getRenew();
-				// this.$refs.XGZL.getRenew();
+				console.log(111)
+				this.$refs.patient.getRenew();
+				this.$refs.JM.getRenew();
+				this.$refs.XGZL.getRenew();
+				this.$refs.follow.getRenew();
 			},
 			// 周 月 季 年
 			radioChange(_data, _type, _timeType) {

acupuncture-前台/src/views/indexCom/JM.vue

@@ -78,19 +78,21 @@
 </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 {
+	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,
 		physiqueEcharts,
 		postureEcharts,
 		agrypniaEcharts,
 		anxietyEcharts,
-} from "./index";
-export default {
+	} from "./index";
+	export default {
 		name: "Post",
 		props: ["title"],
 		mixins: [resize],
@@ -150,7 +152,14 @@ export default {
 			async getData() {
 				try {
 					await zlInfo(this.queryParams).then((res) => {
-          const { jlfb, smfb, sort, ttfb, txfb, zytz } = res.data;
+						const {
+							jlfb,
+							smfb,
+							sort,
+							ttfb,
+							txfb,
+							zytz
+						} = res.data;
 						// 病种（主要诊断）
 						this.diagnoseValue = sort.sort((a, b) => a.total - b.total);
 						this.handleDiagnose();
@@ -177,8 +186,7 @@ export default {
 						}
 						this.handlePhysique();
 						// 体态
-          this.postureValue = [
-            {
+						this.postureValue = [{
 								value: ttfb.score1,
 								name: "1分",
 							},
@@ -314,79 +322,83 @@ export default {
 			},
 			// 重新渲染图标
 			getRenew() {
-      this.Linepatient();
-      this.columnar();
+				this.handleDiagnose();
+				this.handleSystem();
+				this.handlePhysique();
+				this.handlePosture();
+				this.handleAgrypnia();
+				this.handleAnxiety();
 			},
 		},
-};
+	};
 </script>
 <style scoped src="@/assets/styles/common.css"></style>
 <style scoped>
->>> .el-card__body {
+	>>>.el-card__body {
 		padding: 10px 0 !important;
-}
+	}
 
-.dis {
+	.dis {
 		display: flex;
-}
+	}
 
-.header-title {
+	.header-title {
 		font-size: 18px;
-}
+	}
 
-.title-box {
+	.title-box {
 		padding: 10px 20px;
 		border-bottom: 1px solid #dfe6ec;
-}
+	}
 
-.dian-box {
+	.dian-box {
 		align-items: center;
-}
+	}
 
-.dian {
+	.dian {
 		display: inline-block;
 		width: 16px;
 		height: 16px;
 		border-radius: 50%;
 		margin: 0 10px;
-}
+	}
 
-.title-box {
+	.title-box {
 		justify-content: space-between;
-}
+	}
 
-. >>> .el-radio--small.is-bordered {
+	.>>>.el-radio--small.is-bordered {
 		margin-right: 20px !important;
 		margin-left: 0 !important;
-}
+	}
 
->>> .el-radio__input {
+	>>>.el-radio__input {
 		display: none;
-}
+	}
 
->>> .el-radio__label {
+	>>>.el-radio__label {
 		padding-left: 5px;
-}
+	}
 
-.app-container {
+	.app-container {
 		padding: 0;
 		display: flex;
 		justify-content: space-between;
-}
+	}
 
-.title {
+	.title {
 		display: flex;
 		align-items: center;
 		font-size: 20px;
 		font-weight: 600;
-}
+	}
 
-.title-bor {
+	.title-bor {
 		display: inline-block;
 		height: 20px;
 		width: 6px;
 		background: #4f8bff;
 		margin-right: 10px;
 		border-radius: 8px;
-}
+	}
 </style>

acupuncture-前台/src/views/indexCom/XGZL.vue

@@ -22,14 +22,14 @@
 						</div>
 					</el-card>
 				</div>
-				<div style="flex: 1; margin-right: 20px">
+				<!-- <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="diseaseMethod" style="width: 100%"></div> -->
+							<div id="diseaseMethod" style="width: 100%"></div>
 						</div>
 					</el-card>
 				</div>
@@ -41,14 +41,55 @@
 							</div>
 						</div>
 						<div style="height: 300px" v-loading="loading">
-						<!-- <div id="acupoint" style="width: 100%"></div> -->
+							<div id="acupoint" 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: #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="app-container">
+									<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 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="cost" 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">
@@ -93,7 +134,7 @@
 					</el-card>
 				</div>
 			</div>
-		</div>
+		</div> -->
 	</div>
 </template>
 
@@ -198,7 +239,7 @@
 						]
 						this.handleEffect()
 						// 治疗费用
-						this.costValue =[zlfy.score1,zlfy.score2,zlfy.score3,zlfy.score4,zlfy.score5]
+						this.costValue = [zlfy.score1, zlfy.score2, zlfy.score3, zlfy.score4, zlfy.score5]
 						this.handleCost()
 					});
 					this.loading = false;
@@ -263,8 +304,9 @@
 			},
 			// 重新渲染图标
 			getRenew() {
-				this.Linepatient();
-				this.columnar();
+				this.handleHealType();
+				this.handleEffect();
+				this.handleCost()
 			},
 		},
 	};

acupuncture-前台/src/views/indexCom/follow.vue

@@ -146,8 +146,8 @@
 			},
 			// 重新渲染图标
 			getRenew() {
-				// this.Linepatient();
-				// this.columnar();
+				this.handleFollow();
+				this.handleLossFollow()
 			},
 		},
 	};

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

@@ -245,8 +245,10 @@
 			},
 			// 重新渲染图标
 			getRenew() {
-				// this.Linepatient();
-				// this.columnar();
+				this.Linepatient(); // 患者总数
+				this.handleAge(); // 年龄
+				this.columnar(); //性别分析图
+				this.handleDisease(); //病种分布
 			},
 		},
 	};