首页样式完善

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,7 +95,7 @@
 					</el-card>
 				</div>
 			</div>
-		</div>
+		</div> -->
   </div>
 </template>
 
@@ -81,9 +103,7 @@
 import * as echarts from "echarts";
 require("echarts/theme/macarons"); // echarts theme
 import resize from "@/views/dashboard/mixins/resize";
-	import {
+import { zlInfo } from "@/api/indexCom.js";
-		zlInfo
-	} from "@/api/indexCom.js";
 import {
   diagnoseEcharts,
   systemEcharts,
@@ -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);
       }
     },
     // 病种（主要诊断）

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],
-      },
+      //   },
+      // },
     },
   ],
 };