首页样式完善

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

@@ -35,7 +35,7 @@
             </div>
           </el-card>
         </div>
-				<div style="flex: 1">
+        <div style="flex: 1; margin-right: 20px">
           <el-card shadow="always">
             <div class="dis title-box">
               <span class="header-title">体态评估（TAPS）</span>
@@ -46,9 +46,31 @@
             </div>
           </el-card>
         </div>
+        <div style="flex: 1; margin-right: 20px">
+          <el-card shadow="always">
+            <div class="dis title-box">
+              <span class="header-title">失眠评估（PHQ-9）</span>
+              <div class="dis"></div>
             </div>
+            <div style="height: 300px" v-loading="loading">
+              <div id="agrypnia" style="width: 100%"></div>
             </div>
-		<div class="app-container">
+          </el-card>
+        </div>
+        <div style="flex: 1">
+          <el-card shadow="always">
+            <div class="dis title-box">
+              <span class="header-title">焦虑（HAMD-24）</span>
+              <div class="dis"></div>
+            </div>
+            <div style="height: 300px" v-loading="loading">
+              <div id="anxiety" 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">
@@ -73,26 +95,24 @@
 					</el-card>
 				</div>
 			</div>
-		</div>
+		</div> -->
   </div>
 </template>
 
 <script>
-	import * as echarts from "echarts";
+import * as echarts from "echarts";
-	require("echarts/theme/macarons"); // echarts theme
+require("echarts/theme/macarons"); // echarts theme
-	import resize from "@/views/dashboard/mixins/resize";
+import resize from "@/views/dashboard/mixins/resize";
-	import {
+import { zlInfo } from "@/api/indexCom.js";
-		zlInfo
+import {
-	} from "@/api/indexCom.js";
-	import {
   diagnoseEcharts,
   systemEcharts,
   physiqueEcharts,
   postureEcharts,
   agrypniaEcharts,
   anxietyEcharts,
-	} from "./index";
+} from "./index";
-	export default {
+export default {
   name: "Post",
   props: ["title"],
   mixins: [resize],
@@ -152,14 +172,7 @@
     async getData() {
       try {
         await zlInfo(this.queryParams).then((res) => {
-						const {
+          const { jlfb, smfb, sort, ttfb, txfb, zytz } = res.data;
-							jlfb,
-							smfb,
-							sort,
-							ttfb,
-							txfb,
-							zytz
-						} = res.data;
           // 病种（主要诊断）
           this.diagnoseValue = sort.sort((a, b) => a.total - b.total);
           this.handleDiagnose();
@@ -186,7 +199,8 @@
           }
           this.handlePhysique();
           // 体态
-						this.postureValue = [{
+          this.postureValue = [
+            {
               value: ttfb?.score1 || 0,
               name: "1分",
             },
@@ -222,9 +236,8 @@
           this.handleAnxiety();
           this.loading = false;
         });
-			
       } catch (e) {
-					console.log('诊疗信息', e)
+        console.log("诊疗信息", e);
       }
     },
     // 病种（主要诊断）
@@ -333,75 +346,75 @@
       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/index.js

@@ -749,7 +749,7 @@ export const effectEcharts = {
     },
   ],
 };
-// 诊疗费
+// 诊疗费用
 export const costEcharts = {
   tooltip: {
     trigger: "axis",
@@ -801,12 +801,13 @@ export const costEcharts = {
       data: [],
       type: "bar",
       barMaxWidth: 24, //柱图宽度
-      itemStyle: {
+      color: "#C6A268",
-        normal: {
+      // itemStyle: {
-          //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
+      //   normal: {
-          barBorderRadius: [50, 50, 0, 0],
+      //     //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
-        },
+      //     barBorderRadius: [50, 50, 0, 0],
-      },
+      //   },
+      // },
     },
   ],
 };