大屏统计同步修改

web_admin/src/views/largeScreen.vue

@@ -61,17 +61,17 @@
               <div ref="visitInfo" style="width: 100%; height: 100%"></div>
               <div class="visitInfo-num">
                 <div>就诊总人次</div>
-                <div>{{ visitInfoList.total || "0" }}<span>人</span></div>
+                <div>{{ visitInfoList.total || "0" }}</div>
               </div>
             </div>
             <div class="content-visitInfo-item content-visitInfo-item1">
               <div>
                 门诊人次
-                {{ visitInfoList.mzNum || "0" }}<span>人</span>
+                {{ visitInfoList.mzNum || "0" }}
               </div>
               <div>
                 住院人次
-                {{ visitInfoList.zyNum || "0" }}<span>人</span>
+                {{ visitInfoList.zyNum || "0" }}
               </div>
             </div>
           </div>
@@ -135,11 +135,11 @@
       <div class="content-item">
         <div class="content-item-left">
           <headerTitle title="疾病排行"></headerTitle>
-          <div class="item-content item-content-disease">
-            <div class="disease-item-group">
+          <div class="item-content item-content-disease" style="display: flex">
+            <div class="disease-item-group" style="flex: 1">
               <div
                 class="content-disease-item"
-                v-for="(item, index) in nnicdList.slice(0, 10)"
+                v-for="(item, index) in nnicdList.slice(0, 5)"
                 :key="index"
               >
                 <div class="disease-item-name">
@@ -157,6 +157,25 @@
                 </div>
               </div>
             </div>
+            <div class="disease-item-group" style="flex: 1">
+              <div
+                class="content-disease-item"
+                v-for="(item, index) in nnicdList.slice(5, 10)"
+                :key="index"
+              >
+                <div class="disease-item-name">
+                  <span>No.{{ index + 5 }}</span>
+                  {{ item.name || "-" }}
+                </div>
+                <div class="disease-item-value">
+                  <div
+                    class="disease-item-value-color"
+                    :style="{ width: getWidth(item.value) + '%' }"
+                  ></div>
+                  <span>{{ item.value || 0 }}人</span>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
         <div class="content-item-right">
@@ -511,12 +530,22 @@ export default {
   margin-top: 14px;
   position: relative;
   .disease-item-group {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
+    // position: absolute;
+    // top: 0;
+    // left: 0;
+    // width: 100%;
+    // height: 100%;
+    // overflow: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+  .disease-item-group:nth-child(1) {
+    padding-right: 14px;
+  }
+  .disease-item-group:nth-child(2) {
+    padding-left: 14px;
+    border-left: 1px solid #e5e5e5;
   }
   // 隐藏滚动条
   .disease-item-group::-webkit-scrollbar {
@@ -525,12 +554,15 @@ export default {
   .content-disease-item {
     display: flex;
     align-content: center;
-    margin-bottom: 13px;
     .disease-item-name {
-      width: 130px;
+      width: 110px;
       color: #999999;
       line-height: 18px;
       margin-right: 14px;
+      // 单行显示
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     .disease-item-value {
       flex: 1;
@@ -609,27 +641,27 @@ export default {
 }
 .content {
   flex: 1;
-  padding: 20px;
+  padding: 14px;
   display: flex;
   flex-direction: column;
   .content-item {
     display: flex;
     flex: 1;
-    margin-bottom: 18px;
+    margin-bottom: 14px;
 
     .content-item-left {
       flex-shrink: 0;
       padding: 20px;
       flex: 1;
       background: #fff;
-      margin-right: 16px;
+      margin-right: 14px;
       display: flex;
       flex-direction: column;
       border-radius: 16px;
     }
     .content-item-right {
       flex-shrink: 0;
-      padding: 20px;
+      padding: 14px;
       flex: 2;
       background: #fff;
       display: flex;
@@ -736,6 +768,7 @@ export default {
     .header-right-button-group {
       display: flex;
       .header-right-button {
+        cursor: pointer;
         width: 90px;
         height: 40px;
         background: #2087f0;