From e561ac22b23f7344099c5a86ee1fef4dc31e69cc Mon Sep 17 00:00:00 2001
From: "1747191978@qq.com" <1942943850@qq.com>
Date: Mon, 3 Mar 2025 18:09:07 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=90=8C=E6=A0=B7=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 acupuncture-前台/src/views/indexCom/XGZL.vue  | 602 +++++++++---------
 .../src/views/indexCom/follow.vue             | 445 +++++++------
 acupuncture-前台/src/views/indexCom/index.js  | 239 ++++---
 .../src/views/indexCom/patient.vue            | 597 +++++++++--------
 4 files changed, 952 insertions(+), 931 deletions(-)

diff --git a/acupuncture-前台/src/views/indexCom/XGZL.vue b/acupuncture-前台/src/views/indexCom/XGZL.vue
index 0dff1688..08ca5f50 100644
--- a/acupuncture-前台/src/views/indexCom/XGZL.vue
+++ b/acupuncture-前台/src/views/indexCom/XGZL.vue
@@ -1,28 +1,28 @@
 <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; margin-right: 20px">
+  <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: #c6a268"></span>
+                    中西医结合
+                  </div>
+                  <span class="dian" style="background: #d8d8d8"></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; margin-right: 20px">
 					<el-card shadow="always">
 						<div class="dis title-box">
 							<span class="header-title">病种方法分布</span>
@@ -45,51 +45,50 @@
 						</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="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 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: #c6a268"></span>
+                    治愈
+                  </div>
+                  <div class="dian-box dis">
+                    <span class="dian" style="background: #906c4a"></span>
+                    显效
+                  </div>
+                  <div class="dian-box dis">
+                    <span class="dian" style="background: #70483e"></span>
+                    好转
+                  </div>
+                  <div class="dian-box dis">
+                    <span class="dian" style="background: #c7bdb1"></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">
@@ -135,252 +134,255 @@
 				</div>
 			</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 || 0,
-								name: "中西医结合",
-							},
-							{
-								value: zllxtj?.czy || 0,
-								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 || 0
-							},
-							{
-								name: '显效',
-								value: zlxwfb?.xx || 0
-							},
-							{
-								name: '好转',
-								value: zlxwfb?.hz || 0
-							},
-							{
-								name: '无效',
-								value: zlxwfb?.wx || 0
-							}
-						]
-						this.handleEffect()
-						// 治疗费用
-						this.costValue = [zlfy.score1, zlfy.score2, zlfy.score3, zlfy.score4, zlfy.score5]
-						this.handleCost()
-						this.loading = false;
-					});
-			
-				} catch (e) {
-					console.log('治疗类型', 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.handleHealType();
-				this.handleEffect();
-				this.handleCost()
-			},
-		},
-	};
+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 || 0,
+              name: "中西医结合",
+            },
+            {
+              value: zllxtj?.czy || 0,
+              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 || 0,
+            },
+            {
+              name: "显效",
+              value: zlxwfb?.xx || 0,
+            },
+            {
+              name: "好转",
+              value: zlxwfb?.hz || 0,
+            },
+            {
+              name: "无效",
+              value: zlxwfb?.wx || 0,
+            },
+          ];
+          this.handleEffect();
+          // 治疗费用
+          this.costValue = [
+            zlfy.score1,
+            zlfy.score2,
+            zlfy.score3,
+            zlfy.score4,
+            zlfy.score5,
+          ];
+          this.handleCost();
+          this.loading = false;
+        });
+      } catch (e) {
+        console.log("治疗类型", 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.handleHealType();
+      this.handleEffect();
+      this.handleCost();
+    },
+  },
+};
 </script>
 <style scoped src="@/assets/styles/common.css"></style>
 <style scoped>
-	>>>.el-card__body {
-		padding: 10px 0 !important;
-	}
+>>> .el-card__body {
+  padding: 10px 0 !important;
+}
 
-	.dis {
-		display: flex;
-	}
+.dis {
+  display: flex;
+}
 
-	.header-title {
-		font-size: 18px;
-	}
+.header-title {
+  font-size: 18px;
+}
 
-	.title-box {
-		padding: 10px 20px;
-		border-bottom: 1px solid #dfe6ec;
-	}
+.title-box {
+  padding: 10px 20px;
+  border-bottom: 1px solid #dfe6ec;
+}
 
-	.dian-box {
-		align-items: center;
-	}
+.dian-box {
+  align-items: center;
+}
 
-	.dian {
-		display: inline-block;
-		width: 16px;
-		height: 16px;
-		border-radius: 50%;
-		margin: 0 10px;
-	}
+.dian {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  margin: 0 10px;
+}
 
-	.title-box {
-		justify-content: space-between;
-	}
+.title-box {
+  justify-content: space-between;
+}
 
-	.>>>.el-radio--small.is-bordered {
-		margin-right: 20px !important;
-		margin-left: 0 !important;
-	}
+. >>> .el-radio--small.is-bordered {
+  margin-right: 20px !important;
+  margin-left: 0 !important;
+}
 
-	>>>.el-radio__input {
-		display: none;
-	}
+>>> .el-radio__input {
+  display: none;
+}
 
-	>>>.el-radio__label {
-		padding-left: 5px;
-	}
+>>> .el-radio__label {
+  padding-left: 5px;
+}
 
-	.app-container {
-		padding: 0;
-		display: flex;
-		justify-content: space-between;
-	}
+.app-container {
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
+}
 
-	.title {
-		display: flex;
-		align-items: center;
-		font-size: 20px;
-		font-weight: 600;
-	}
+.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>
\ No newline at end of file
+.title-bor {
+  display: inline-block;
+  height: 20px;
+  width: 6px;
+  background: #4f8bff;
+  margin-right: 10px;
+  border-radius: 8px;
+}
+</style>
diff --git a/acupuncture-前台/src/views/indexCom/follow.vue b/acupuncture-前台/src/views/indexCom/follow.vue
index 74a02591..c17ed2df 100644
--- a/acupuncture-前台/src/views/indexCom/follow.vue
+++ b/acupuncture-前台/src/views/indexCom/follow.vue
@@ -1,224 +1,261 @@
 <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="follow" 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="lossFollow" style="width: 100%"></div>
-						</div>
-					</el-card>
-				</div>
-			</div>
-		</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="follow" 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="lossFollow" 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 {
-		sffb,
-		sftj
-	} from "@/api/indexCom.js";
-	import {
-		followEcharts,
-		lossFollowEcharts
-	} from "./index";
-	export default {
-		name: "Post",
-		props: ["title"],
-		mixins: [resize],
-		data() {
-			return {
-				loading: false,
-				followValue: [], // 
-				lossFollowValue: [], // 
-				queryParams: {
-					param: {
-						startTime: "",
-						endTime: "",
-					},
-				},
-			};
-		},
-		created() {
-			// this.Linepatient()
-			this.getData();
-		},
-		methods: {
-			statistics(_data, _type) {
-				this.initial(_data, _type); // 处理数据
-				this.loading = true;
-				this.getData(); // 获取数据
-			},
-			//患者信息
-			async getData() {
-				try {
-					this.followValue = {}
-					await sffb(this.queryParams).then((res) => {
-						res.data.forEach(i => {
-							let data = [i.dsf, i.ljsf, i.cqsf, i.zc]
-							this.followValue[i.queueName] = data
-						})
-						this.handleFollow()
-					});
-					await sftj(this.queryParams).then((res) => {
-						this.lossFollowValue = res.data
-						this.handleLossFollow()
-					});
-					this.loading = false;
-				} catch (e) {
-					console.log('随访', e)
-				}
-			},
+import * as echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "@/views/dashboard/mixins/resize";
+import { sffb, sftj } from "@/api/indexCom.js";
+import { followEcharts, lossFollowEcharts } from "./index";
+export default {
+  name: "Post",
+  props: ["title"],
+  mixins: [resize],
+  data() {
+    return {
+      loading: false,
+      followValue: [], //
+      lossFollowValue: [], //
+      queryParams: {
+        param: {
+          startTime: "",
+          endTime: "",
+        },
+      },
+    };
+  },
+  created() {
+    // this.Linepatient()
+    this.getData();
+  },
+  methods: {
+    statistics(_data, _type) {
+      this.initial(_data, _type); // 处理数据
+      this.loading = true;
+      this.getData(); // 获取数据
+    },
+    //患者信息
+    async getData() {
+      try {
+        this.followValue = {};
+        await sffb(this.queryParams).then((res) => {
+          res.data.forEach((i) => {
+            let data = [i.dsf, i.ljsf, i.cqsf, i.zc];
+            this.followValue[i.queueName] = data;
+          });
+          this.handleFollow();
+        });
+        await sftj(this.queryParams).then((res) => {
+          this.lossFollowValue = res.data;
+          this.handleLossFollow();
+        });
+        this.loading = false;
+      } catch (e) {
+        console.log("随访", e);
+      }
+    },
 
-			// 队列
-			handleFollow() {
-				followEcharts.series = []
-				for (let key in this.followValue) {
-					let series = {
-						name: key,
-						data: this.followValue[key],
-						type: "bar",
-						barMaxWidth: 24, //柱图宽度
-						itemStyle: {
-							normal: {
-								//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
-								barBorderRadius: [50, 50, 0, 0],
-							},
-						},
-					}
-					followEcharts.series.push(series)
-				}
-				this.$nextTick(() => {
-					var myChart = echarts.init(document.getElementById("follow"), null, {
-						height: 300,
-					});
-					myChart.setOption(followEcharts, true);
-					myChart.resize();
-					window.onresize = myChart.resize;
-				});
-			},
-			// 失访
-			handleLossFollow() {
-				lossFollowEcharts.series[0].data = this.lossFollowValue?.map((item) => {
-					return item.num;
-				});
-				lossFollowEcharts.xAxis.data = this.lossFollowValue?.map((item) => {
-					return item.reason;
-				});
-				this.$nextTick(() => {
-					var myChart = echarts.init(document.getElementById("lossFollow"), null, {
-						height: 300,
-					});
-					myChart.setOption(lossFollowEcharts, 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.handleFollow();
-				this.handleLossFollow()
-			},
-		},
-	};
+    // 队列
+    handleFollow() {
+      followEcharts.series = [];
+      let colorArr = [
+        "#C7BDB1",
+        "#C6A268",
+        "#906C4A",
+        "#70483E",
+        "#582518",
+        "#C7BDB1",
+        "#C6A268",
+        "#906C4A",
+        "#70483E",
+        "#582518",
+        "#C7BDB1",
+        "#C6A268",
+        "#906C4A",
+        "#70483E",
+        "#582518",
+        "#C7BDB1",
+        "#C6A268",
+        "#906C4A",
+        "#70483E",
+        "#582518",
+        "#C7BDB1",
+        "#C6A268",
+        "#906C4A",
+        "#70483E",
+        "#582518",
+        "#C7BDB1",
+        "#C6A268",
+        "#906C4A",
+        "#70483E",
+        "#582518",
+        "#C7BDB1",
+        "#C6A268",
+        "#906C4A",
+        "#70483E",
+        "#582518",
+        "#C7BDB1",
+        "#C6A268",
+        "#906C4A",
+        "#70483E",
+        "#582518",
+      ];
+      let index = 0;
+      for (let key in this.followValue) {
+        let series = {
+          name: key,
+          data: this.followValue[key],
+          type: "bar",
+          barMaxWidth: 24, //柱图宽度
+          color: colorArr[index],
+        };
+        followEcharts.series.push(series);
+        index++;
+      }
+      this.$nextTick(() => {
+        var myChart = echarts.init(document.getElementById("follow"), null, {
+          height: 300,
+        });
+        myChart.setOption(followEcharts, true);
+        myChart.resize();
+        window.onresize = myChart.resize;
+      });
+    },
+    // 失访
+    handleLossFollow() {
+      lossFollowEcharts.series[0].data = this.lossFollowValue?.map((item) => {
+        return item.num;
+      });
+      lossFollowEcharts.xAxis.data = this.lossFollowValue?.map((item) => {
+        return item.reason;
+      });
+      this.$nextTick(() => {
+        var myChart = echarts.init(
+          document.getElementById("lossFollow"),
+          null,
+          {
+            height: 300,
+          }
+        );
+        myChart.setOption(lossFollowEcharts, 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.handleFollow();
+      this.handleLossFollow();
+    },
+  },
+};
 </script>
 <style scoped src="@/assets/styles/common.css"></style>
 <style scoped>
-	>>>.el-card__body {
-		padding: 10px 0 !important;
-	}
+>>> .el-card__body {
+  padding: 10px 0 !important;
+}
 
-	.dis {
-		display: flex;
-	}
+.dis {
+  display: flex;
+}
 
-	.header-title {
-		font-size: 18px;
-	}
+.header-title {
+  font-size: 18px;
+}
 
-	.title-box {
-		padding: 10px 20px;
-		border-bottom: 1px solid #dfe6ec;
-	}
+.title-box {
+  padding: 10px 20px;
+  border-bottom: 1px solid #dfe6ec;
+}
 
-	.dian-box {
-		align-items: center;
-	}
+.dian-box {
+  align-items: center;
+}
 
-	.dian {
-		display: inline-block;
-		width: 16px;
-		height: 16px;
-		border-radius: 50%;
-		margin: 0 10px;
-	}
+.dian {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  margin: 0 10px;
+}
 
-	.title-box {
-		justify-content: space-between;
-	}
+.title-box {
+  justify-content: space-between;
+}
 
-	.>>>.el-radio--small.is-bordered {
-		margin-right: 20px !important;
-		margin-left: 0 !important;
-	}
+. >>> .el-radio--small.is-bordered {
+  margin-right: 20px !important;
+  margin-left: 0 !important;
+}
 
-	>>>.el-radio__input {
-		display: none;
-	}
+>>> .el-radio__input {
+  display: none;
+}
 
-	>>>.el-radio__label {
-		padding-left: 5px;
-	}
+>>> .el-radio__label {
+  padding-left: 5px;
+}
 
-	.app-container {
-		padding: 0;
-		display: flex;
-		justify-content: space-between;
-	}
+.app-container {
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
+}
 
-	.title {
-		display: flex;
-		align-items: center;
-		font-size: 20px;
-		font-weight: 600;
-	}
+.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>
\ No newline at end of file
+.title-bor {
+  display: inline-block;
+  height: 20px;
+  width: 6px;
+  background: #4f8bff;
+  margin-right: 10px;
+  border-radius: 8px;
+}
+</style>
diff --git a/acupuncture-前台/src/views/indexCom/index.js b/acupuncture-前台/src/views/indexCom/index.js
index b067bfa6..d355a505 100644
--- a/acupuncture-前台/src/views/indexCom/index.js
+++ b/acupuncture-前台/src/views/indexCom/index.js
@@ -23,7 +23,7 @@ export const HZXX = {
     bottom: "0%",
     containLabel: true,
   },
-  color: ["#4f8bff", "#ffcd6c", "#00d1a1", "#a794fe"],
+  color: ["#C6A268"],
   graphic: {
     type: "text",
     left: "center",
@@ -76,7 +76,7 @@ export const gende = {
     bottom: "0%",
     containLabel: true,
   },
-  color: ["#4F8BFF", "#FE4943"],
+  color: ["#70483E", "#C7BDB1"],
   series: [
     {
       type: "pie",
@@ -85,14 +85,14 @@ export const gende = {
       label: {
         show: false,
         position: "center",
-		normal:{
-			show:true,
-			position:'inner',
-			formatter: '{b}：{c}个',
-			textStyle:{
-				color:'#fff'
-			}
-		},
+        normal: {
+          show: true,
+          position: "inner",
+          formatter: "{b}：{c}个",
+          textStyle: {
+            color: "#fff",
+          },
+        },
       },
       labelLine: {
         show: false,
@@ -127,7 +127,7 @@ export const ageEcharts = {
   },
   xAxis: {
     type: "category",
-    data: ["<40岁","41-50岁","51-60岁","61-70岁","71-80岁",">80岁",],
+    data: ["<40岁", "41-50岁", "51-60岁", "61-70岁", "71-80岁", ">80岁"],
   },
   grid: {
     top: "12%",
@@ -153,20 +153,20 @@ export const ageEcharts = {
       data: [],
       type: "bar",
       barMaxWidth: 24, //柱图宽度
-     
-      itemStyle: {
-        normal: {
-          //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
-          barBorderRadius: [50, 50, 0, 0],
-		  color: function (params)
-		  {
-		    var colorList = ['#FF9966', '#66B3FF', '#99FF99','#FFCC66','#FF6699','#CCCCCC'];
-		    return colorList[params.dataIndex]
-		  },
-        },
-      },
+      color: "#C6A268",
+      // itemStyle: {
+      //   normal: {
+      //     //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
+      //     barBorderRadius: [50, 50, 0, 0],
+      //     color: function (params) {
+      //       var colorList = [
+      //         "#C6A268",
+      //       ];
+      //       return colorList[params.dataIndex];
+      //     },
+      //   },
+      // },
     },
-    
   ],
 };
 // 病种分布
@@ -195,7 +195,7 @@ export const diseaseEcharts = {
   },
   xAxis: {
     type: "category",
-    data: ["<40岁","41-50岁","51-60岁","61-70岁","71-80岁",">80岁",],
+    data: ["<40岁", "41-50岁", "51-60岁", "61-70岁", "71-80岁", ">80岁"],
   },
   grid: {
     top: "12%",
@@ -221,15 +221,8 @@ export const diseaseEcharts = {
       data: [],
       type: "bar",
       barMaxWidth: 24, //柱图宽度
-      color: "#4f8bff",
-      itemStyle: {
-        normal: {
-          //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
-          barBorderRadius: [50, 50, 0, 0],
-        },
-      },
+      color: "#70483E",
     },
-    
   ],
 };
 
@@ -259,16 +252,15 @@ export const diagnoseEcharts = {
     },
   },
   xAxis: {
-	  name: "数量( 个 )",
-	  type: "value",
-	  minInterval: 1,
-	  splitLine: {
-	    show: true,
-	    lineStyle: {
-	      type: "dashed",
-	    },
-	  },
-    
+    name: "数量( 个 )",
+    type: "value",
+    minInterval: 1,
+    splitLine: {
+      show: true,
+      lineStyle: {
+        type: "dashed",
+      },
+    },
   },
   grid: {
     top: "12%",
@@ -278,8 +270,8 @@ export const diagnoseEcharts = {
     containLabel: true,
   },
   yAxis: {
-   type: "category",
-   data: [],
+    type: "category",
+    data: [],
   },
   series: [
     {
@@ -287,9 +279,8 @@ export const diagnoseEcharts = {
       data: [],
       type: "bar",
       barMaxWidth: 24, //柱图宽度
-      color: "#4f8bff",
+      color: "#906C4A",
     },
-    
   ],
 };
 // 体系
@@ -344,15 +335,14 @@ export const systemEcharts = {
       data: [],
       type: "bar",
       barMaxWidth: 24, //柱图宽度
-      color: "#4f8bff",
-      itemStyle: {
-        normal: {
-          //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
-          barBorderRadius: [50, 50, 0, 0],
-        },
-      },
+      color: "#C6A268",
+      // itemStyle: {
+      //   normal: {
+      //     //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
+      //     barBorderRadius: [50, 50, 0, 0],
+      //   },
+      // },
     },
-    
   ],
 };
 // 体质
@@ -407,15 +397,14 @@ export const physiqueEcharts = {
       data: [],
       type: "bar",
       barMaxWidth: 24, //柱图宽度
-      color: "#4f8bff",
-      itemStyle: {
-        normal: {
-          //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
-          barBorderRadius: [50, 50, 0, 0],
-        },
-      },
+      color: "#70483E",
+      // itemStyle: {
+      //   normal: {
+      //     //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
+      //     barBorderRadius: [50, 50, 0, 0],
+      //   },
+      // },
     },
-    
   ],
 };
 // 体态
@@ -441,7 +430,7 @@ export const postureEcharts = {
     bottom: "0%",
     containLabel: true,
   },
-  color: ["#4f8bff", "#ffcd6c", "#00d1a1", "#a794fe","#EE6666"],
+  color: ["#C7BDB1", "#C6A268", "#906C4A", "#70483E", "#582518"],
   series: [
     {
       type: "pie",
@@ -450,14 +439,14 @@ export const postureEcharts = {
       label: {
         show: false,
         position: "center",
-		normal:{
-			show:true,
-			position:'inner',
-			formatter: '{b}：{c}个',
-			textStyle:{
-				color:'#fff'
-			}
-		},
+        normal: {
+          show: true,
+          position: "inner",
+          formatter: "{b}：{c}个",
+          textStyle: {
+            color: "#fff",
+          },
+        },
       },
       labelLine: {
         show: false,
@@ -492,8 +481,7 @@ export const agrypniaEcharts = {
   },
   xAxis: {
     type: "category",
-    data: ['0~4分', '5~9分', '10~14分','15~19分','20~27分'],
-
+    data: ["0~4分", "5~9分", "10~14分", "15~19分", "20~27分"],
   },
   grid: {
     top: "12%",
@@ -519,15 +507,14 @@ export const agrypniaEcharts = {
       data: [],
       type: "bar",
       barMaxWidth: 24, //柱图宽度
-      color: "#4f8bff",
-      itemStyle: {
-        normal: {
-          //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
-          barBorderRadius: [50, 50, 0, 0],
-        },
-      },
+      color: "#C6A268",
+      // itemStyle: {
+      //   normal: {
+      //     //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
+      //     barBorderRadius: [50, 50, 0, 0],
+      //   },
+      // },
     },
-    
   ],
 };
 // 焦虑度
@@ -556,8 +543,7 @@ export const anxietyEcharts = {
   },
   xAxis: {
     type: "category",
-    data: ['<8分', '8~20分','21~35分','>35分'],
-
+    data: ["<8分", "8~20分", "21~35分", ">35分"],
   },
   grid: {
     top: "12%",
@@ -583,15 +569,14 @@ export const anxietyEcharts = {
       data: [],
       type: "bar",
       barMaxWidth: 24, //柱图宽度
-      color: "#4f8bff",
-      itemStyle: {
-        normal: {
-          //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
-          barBorderRadius: [50, 50, 0, 0],
-        },
-      },
+      color: "#70483E",
+      // itemStyle: {
+      //   normal: {
+      //     //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
+      //     barBorderRadius: [50, 50, 0, 0],
+      //   },
+      // },
     },
-    
   ],
 };
 // -------- 治疗类型 --------
@@ -618,7 +603,7 @@ export const healTypeEcharts = {
     bottom: "0%",
     containLabel: true,
   },
-  color: ["#91CC75", "#5470C6"],
+  color: ["#C6A268", "#D8D8D8"],
   series: [
     {
       type: "pie",
@@ -627,14 +612,14 @@ export const healTypeEcharts = {
       label: {
         show: false,
         position: "center",
-		normal:{
-			show:true,
-			position:'inner',
-			formatter: '{b}：{c}个',
-			textStyle:{
-				color:'#fff'
-			}
-		},
+        normal: {
+          show: true,
+          position: "inner",
+          formatter: "{b}：{c}个",
+          textStyle: {
+            color: "#fff",
+          },
+        },
       },
       labelLine: {
         show: false,
@@ -669,8 +654,7 @@ export const diseaseMethodEcharts = {
   },
   xAxis: {
     type: "category",
-    data: ['肥胖症', '失眠症','其他'],
-
+    data: ["肥胖症", "失眠症", "其他"],
   },
   grid: {
     top: "12%",
@@ -693,7 +677,7 @@ export const diseaseMethodEcharts = {
   series: [
     {
       name: "数量1：",
-      data: [1,2],
+      data: [1, 2],
       type: "bar",
       barMaxWidth: 24, //柱图宽度
       itemStyle: {
@@ -705,7 +689,7 @@ export const diseaseMethodEcharts = {
     },
     {
       name: "数量2：",
-      data: [1,3],
+      data: [1, 3],
       type: "bar",
       barMaxWidth: 24, //柱图宽度
       itemStyle: {
@@ -740,7 +724,7 @@ export const effectEcharts = {
     bottom: "0%",
     containLabel: true,
   },
-  color: ["#5C7BD9", "#91CC75",'#FAC858','#EE6666'],
+  color: ["#C6A268", "#906C4A", "#70483E", "#C7BDB1"],
   series: [
     {
       type: "pie",
@@ -749,14 +733,14 @@ export const effectEcharts = {
       label: {
         show: false,
         position: "center",
-		normal:{
-			show:true,
-			position:'inner',
-			formatter: '{b}：{c}个',
-			textStyle:{
-				color:'#fff'
-			}
-		},
+        normal: {
+          show: true,
+          position: "inner",
+          formatter: "{b}：{c}个",
+          textStyle: {
+            color: "#fff",
+          },
+        },
       },
       labelLine: {
         show: false,
@@ -791,7 +775,7 @@ export const costEcharts = {
   },
   xAxis: {
     type: "category",
-    data: ['<300元','300 ~ 900元','900 ~ 2000元','2000 ~ 5000元','>5000元'],
+    data: ["<300元", "300 ~ 900元", "900 ~ 2000元", "2000 ~ 5000元", ">5000元"],
   },
   grid: {
     top: "12%",
@@ -824,7 +808,6 @@ export const costEcharts = {
         },
       },
     },
-    
   ],
 };
 // -------- 随访 --------
@@ -853,7 +836,7 @@ export const followEcharts = {
   },
   xAxis: {
     type: "category",
-    data: ['待随访','临近随访','超期随访','正常随访'],
+    data: ["待随访", "临近随访", "超期随访", "正常随访"],
   },
   grid: {
     top: "12%",
@@ -873,9 +856,9 @@ export const followEcharts = {
       },
     },
   },
-  series: [
-  ],
+  series: [],
 };
+// 失访原因
 export const lossFollowEcharts = {
   tooltip: {
     trigger: "axis",
@@ -901,7 +884,7 @@ export const lossFollowEcharts = {
   },
   xAxis: {
     type: "category",
-    data: ['<300元','300 ~ 900元','900 ~ 2000元','2000 ~ 5000元','>5000元'],
+    data: ["<300元", "300 ~ 900元", "900 ~ 2000元", "2000 ~ 5000元", ">5000元"],
   },
   grid: {
     top: "12%",
@@ -927,13 +910,13 @@ export const lossFollowEcharts = {
       data: [],
       type: "bar",
       barMaxWidth: 24, //柱图宽度
-      itemStyle: {
-        normal: {
-          //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
-          barBorderRadius: [50, 50, 0, 0],
-        },
-      },
-    }
-    
+      color: "#70483E",
+      // itemStyle: {
+      //   normal: {
+      //     //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
+      //     barBorderRadius: [50, 50, 0, 0],
+      //   },
+      // },
+    },
   ],
 };
diff --git a/acupuncture-前台/src/views/indexCom/patient.vue b/acupuncture-前台/src/views/indexCom/patient.vue
index 78a0ac6c..fe2b21a4 100644
--- a/acupuncture-前台/src/views/indexCom/patient.vue
+++ b/acupuncture-前台/src/views/indexCom/patient.vue
@@ -1,58 +1,58 @@
 <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>
+    <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: #70483e"></span>
+                    男
+                  </div>
+                  <span class="dian" style="background: #c7bdb1"></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>
 										男
@@ -60,268 +60,267 @@
 									<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>
+              </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] || 0
-							}
-							this.diseaseValue.push(data)
-						}
-						this.Linepatient(); // 患者总数
-						this.handleAge(); // 年龄
-						this.columnar(); //性别分析图
-						this.handleDisease(); //病种分布
-					});
-					this.loading = false;
-				} catch (e) {
-					console.log('患者统计', e)
-				}
-			},
+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] || 0,
+            };
+            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(); //病种分布
-			},
-		},
-	};
+    // 患者信息
+    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;
-	}
+>>> .el-card__body {
+  padding: 10px 0 !important;
+}
 
-	.dis {
-		display: flex;
-	}
+.dis {
+  display: flex;
+}
 
-	.header-title {
-		font-size: 18px;
-	}
+.header-title {
+  font-size: 18px;
+}
 
-	.title-box {
-		padding: 10px 20px;
-		border-bottom: 1px solid #dfe6ec;
-	}
+.title-box {
+  padding: 10px 20px;
+  border-bottom: 1px solid #dfe6ec;
+}
 
-	.dian-box {
-		align-items: center;
-	}
+.dian-box {
+  align-items: center;
+}
 
-	.dian {
-		display: inline-block;
-		width: 16px;
-		height: 16px;
-		border-radius: 50%;
-		margin: 0 10px;
-	}
+.dian {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  margin: 0 10px;
+}
 
-	.title-box {
-		justify-content: space-between;
-	}
+.title-box {
+  justify-content: space-between;
+}
 
-	.>>>.el-radio--small.is-bordered {
-		margin-right: 20px !important;
-		margin-left: 0 !important;
-	}
+. >>> .el-radio--small.is-bordered {
+  margin-right: 20px !important;
+  margin-left: 0 !important;
+}
 
-	>>>.el-radio__input {
-		display: none;
-	}
+>>> .el-radio__input {
+  display: none;
+}
 
-	>>>.el-radio__label {
-		padding-left: 5px;
-	}
+>>> .el-radio__label {
+  padding-left: 5px;
+}
 
-	.app-container {
-		padding: 0;
-		display: flex;
-		justify-content: space-between;
-	}
+.app-container {
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
+}
 
-	.title {
-		display: flex;
-		align-items: center;
-		font-size: 20px;
-		font-weight: 600;
-	}
+.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;
-	}
+.title-bor {
+  display: inline-block;
+  height: 20px;
+  width: 6px;
+  background: #4f8bff;
+  margin-right: 10px;
+  border-radius: 8px;
+}
 </style>