1.添加自费占比字段

2.修改底部的表头位置与样式
3.添加三个按钮控制中间表格数据
4.对接口 传类型参数给后台5.修改右侧的样式  与三个盒子的样式
5.调整表格高度

src/views/outpatientDetails.vue

@@ -2,7 +2,7 @@
  * @Author: wsq
  * @Date: 2022-04-22 15:20:58
  * @LastEditors: wsq
- * @LastEditTime: 2022-05-16 18:45:49
+ * @LastEditTime: 2022-07-15 16:07:26
  * @Description: 
 -->
 <template>
@@ -10,8 +10,12 @@
   <div class="outpatientDetails">
     <div class="outpatientDetails_top">
       <div class="outpatientDetails_top_div1">
-        <span class="span1">患者信息</span> 
-        <el-button class="outpatientDetails_top_div1_button"  type="primary" size="mini" @click="getControl "
+        <span class="span1">患者信息</span>
+        <el-button
+          class="outpatientDetails_top_div1_button"
+          type="primary"
+          size="mini"
+          @click="getControl"
           >医嘱质控</el-button
         >
         <!-- <el-button size="mini" type="primary">医嘱质控</el-button> -->
@@ -50,6 +54,14 @@
             分组类型:<span>{{ HistoryInfo.disNature }}</span>
           </div>
         </div>
+        <div class="outpatientDetails_top_message_div5">
+          <span class="outpatientDetails_top_message_div5_tu5"
+            ><img src="../assets/img/je.png" alt=""
+          /></span>
+          <div class="outpatientDetails_top_message_div5_t5">
+            自费占比:<span>{{ decimal(HistoryInfo.ownProportion) }}</span>
+          </div>
+        </div>
       </div>
     </div>
     <div class="outpatientDetails_msg">
@@ -101,16 +113,16 @@
                 class="outpatientDetails_fenqu_di_bb_div2_span2_t2"
                 :title="
                   '正常区域：' +
-                  Math.round(lowMagnification) +
-                  1 +
-                  '~' +
-                  (Math.round(highMagnification) - 1)
+                    Math.round(lowMagnification) +
+                    1 +
+                    '~' +
+                    (Math.round(highMagnification) - 1)
                 "
                 >正常区域：{{
                   Math.round(lowMagnification) +
-                  1 +
-                  "~" +
-                  (Math.round(highMagnification) - 1)
+                    1 +
+                    "~" +
+                    (Math.round(highMagnification) - 1)
                 }}</span
               ></span
             >
@@ -154,19 +166,22 @@
       </div>
     </div>
 
-    <div class="outpatientDetails_title">
+    <!-- <div class="outpatientDetails_title">
       <span>费用分类</span>
-    </div>
+    </div> -->
 
     <div class="outpatientDetails_bottom" :style="{ height: bottomheight }">
       <!-- 有数据 -->
       <div class="outpatientDetails_bottom_leftShowBox">
         <div class="outpatientDetails_bottom_leftShowBox_left">
+          <div class="outpatientDetails_bottom_leftShowBox_left_btbox">
+            费用分类
+          </div>
           <el-table
             ref="monthlyPlanTable"
             :data="tableData1"
             style="width: 100%"
-            height="98%"
+            height="94%"
             row-key="id"
             size="small"
             :default-expand-all="false"
@@ -245,14 +260,27 @@
           class="outpatientDetails_bottom_leftShowBox_right"
           v-if="tableData.length !== 0"
         >
+          <div class="outpatientDetails_bottom_leftShowBox_right_treebtn">
+            <span
+              v-for="(item, ind) in btnoptions"
+              :key="ind"
+              class="outpatientDetails_bottom_leftShowBox_right_treebtn_span"
+              :class="{
+                outpatientDetails_bottom_leftShowBox_right_treebtn_span1:
+                  ind == btnspanind,
+              }"
+              @click="treebtn(item.value, ind)"
+              >{{ item.title }}</span
+            >
+          </div>
           <el-table
             :data="tableData"
             border
             size="medium"
-            style="width: 100%"
+            style="width: 98%; margin: 0 10px"
             :default-sort="{ prop: 'date', order: 'descending' }"
             :row-class-name="tableRowClassName"
-            height="98%"
+            height="92%"
           >
             <el-table-column
               label="开单日期"
@@ -277,10 +305,27 @@
                 {{ decimal(scope.row.fee) }}
               </template>
             </el-table-column>
+            <el-table-column
+              label="支付类型"
+              prop="carD_TYPE"
+            ></el-table-column>
           </el-table>
         </div>
         <!-- 中间表格无数据 -->
         <div class="outpatientDetails_bottom_leftShowBox_right" v-else>
+          <div class="outpatientDetails_bottom_leftShowBox_right_treebtn">
+            <span
+              v-for="(item, ind) in btnoptions"
+              :key="ind"
+              class="outpatientDetails_bottom_leftShowBox_right_treebtn_span"
+              :class="{
+                outpatientDetails_bottom_leftShowBox_right_treebtn_span1:
+                  ind == btnspanind,
+              }"
+              @click="treebtn(item.value, ind)"
+              >{{ item.title }}</span
+            >
+          </div>
           <div class="outpatientDetails_bottom_leftShowBox_right_box">
             <img
               class="outpatientDetails_bottom_leftShowBox_right_box_img"
@@ -379,7 +424,7 @@
 		</div> -->
   </div>
 </template>
-<script >
+<script>
 import http from "../utils/http";
 import {
   reactive,
@@ -411,6 +456,7 @@ export default {
     const eowclick = (row) => {
       if (state.tableData1 != []) {
         getInpatFeesByREGCODE(row.types);
+        state.Lefttype = row.types;
       }
     };
     //获取左侧表格数据
@@ -454,6 +500,7 @@ export default {
         })
         .catch((error) => {});
     };
+
     //点击异常分类 显示异常信息
     const gettype = (name, ind) => {
       console.log("name", name);
@@ -558,17 +605,23 @@ export default {
           if (data.lowMagnification == 0 || data.highMagnification == 0) {
             state.bottomheight = "80%";
           } else if (data.lowMagnification != 0) {
-            state.bottomheight = "70%";
+            state.bottomheight = "68%";
           }
         })
         .catch((error) => {});
     };
+    //点击中间三个按钮
+    const treebtn = (value, ind) => {
+      state.btnspanind = ind;
+      state.btnvalue = value;
+      getInpatFeesByREGCODE(state.Lefttype);
+    };
 
     //费用分类接口
     const getInpatFeesByREGCODE = (types) => {
       http
         .post(
-          `/medical/Get/getIFHisByREGCODE?&code=${route.value.query.id}`,
+          `/medical/Get/getIFHisByREGCODE?&code=${route.value.query.id}&state=${state.btnvalue}`,
           types
         )
         .then((data) => {
@@ -582,6 +635,23 @@ export default {
     };
     let state = reactive({
       tableData1: [],
+      btnoptions: [
+        {
+          value: 0,
+          title: "全部",
+        },
+        {
+          value: 1,
+          title: "医保",
+        },
+        {
+          value: 2,
+          title: "自费",
+        },
+      ],
+      btnspanind: 0, //按个按钮的ind
+      btnvalue: 0, //三个按钮没人高亮全部
+      Lefttype: [], //左侧表格的数据
       HistoryInfo: {
         name: "",
         healthyID: "",
@@ -618,6 +688,10 @@ export default {
           cloumn: "金额",
           name: "fee",
         },
+        {
+          cloumn: "支付类型",
+          name: "carD_TYPE",
+        },
       ],
       tableData: [],
       options: [], //异常问题数据
@@ -666,6 +740,7 @@ export default {
       changeRowClick,
       getlefttable,
       monthlyPlanTable,
+      treebtn,
     };
   },
 };
@@ -712,7 +787,7 @@ export default {
         font-family: PingFang SC;
         font-weight: 400;
       }
-      &_button{
+      &_button {
         background-color: #2cabe3;
         color: #fff;
       }
@@ -723,7 +798,7 @@ export default {
       justify-content: space-between;
       margin-top: 16px;
       &_left {
-        width: 25%;
+        width: 20%;
         height: 51px;
         display: flex;
         justify-content: start;
@@ -756,7 +831,7 @@ export default {
         }
       }
       &_centert {
-        width: 25%;
+        width: 20%;
         height: 51px;
         display: flex;
         justify-content: start;
@@ -790,7 +865,7 @@ export default {
         }
       }
       &_right {
-        width: 25%;
+        width: 20%;
         height: 51px;
         display: flex;
         justify-content: start;
@@ -819,7 +894,7 @@ export default {
         }
       }
       &_low {
-        width: 25%;
+        width: 20%;
         height: 51px;
         display: flex;
         justify-content: start;
@@ -847,6 +922,34 @@ export default {
           }
         }
       }
+      &_div5 {
+        width: 20%;
+        height: 51px;
+        display: flex;
+        justify-content: start;
+        align-items: center;
+        background-color: #f3fafd;
+        font-family: PingFang SC;
+        &_tu5 {
+          padding-left: 29px;
+          font-size: 23px;
+        }
+        &_t5 {
+          width: 80%;
+          height: 42px;
+          display: flex;
+          justify-content: start;
+          padding-left: 10px;
+          align-items: center;
+          background-color: #fff;
+          color: #abafb3;
+          font-size: 14px;
+          margin-left: 29px;
+          span {
+            color: #787e8a;
+          }
+        }
+      }
     }
   }
   &_msg {
@@ -1135,9 +1238,10 @@ export default {
     justify-content: space-between;
     height: 80%;
     &_leftShowBox {
-      width: 80%;
+      width: 78%;
       height: 100%;
       display: flex;
+      justify-content: space-between;
 
       // 左侧无数据
       &_box {
@@ -1161,9 +1265,27 @@ export default {
       &_left {
         list-style-type: none;
         width: 35%;
-        height: 90%;
-
+        height: 98%;
         overflow-y: auto;
+        border: 1px solid #f4f4f4;
+        border-radius: 4px;
+        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
+        &_btbox {
+          width: 98px;
+          height: 21px;
+          line-height: 21px;
+          text-align: start;
+          padding-left: 10px;
+          // background-color: #2cabe3;
+          background-image: url("../assets/img/bj.png");
+          margin: 5px 25px;
+          background-size: 100% 21px;
+          font-size: 14px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #ffffff;
+          background-repeat: no-repeat;
+        }
         &_ul {
           margin: 0;
           padding-left: 0;
@@ -1265,8 +1387,11 @@ export default {
         }
       }
       &_right {
-        width: 65%;
-        height: 90%;
+        width: 64%;
+        height: 97%;
+        border: 1px solid #f4f4f4;
+        border-radius: 4px;
+        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
         // 无数据样式
         &_box {
           width: 100%;
@@ -1286,6 +1411,31 @@ export default {
             font-weight: 400;
           }
         }
+        //中间有数据
+        &_treebtn {
+          display: flex;
+          justify-content: flex-start;
+          margin: 5px 10px 15px 10px;
+          &_span {
+            display: flex;
+            justify-content: center;
+            color: #5d5d5d;
+            width: 60px;
+            height: 21px;
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            align-items: center;
+            align-content: center;
+            line-height: 21px;
+            background: #f3fafd;
+            cursor: pointer;
+          }
+          &_span1 {
+            background-color: #2cabe3;
+            color: #fff;
+          }
+        }
         &_table {
           height: calc(100% - 100px);
         }
@@ -1300,23 +1450,30 @@ export default {
 
     &_rght2 {
       width: 20%;
-      height: 100%;
-      border: 1px solid #f6f6f8;
+      height: 98%;
+      border: 1px solid #f4f4f4;
+      border-radius: 4px;
+      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
       padding: 0 10px;
       &_top {
-        height: 20%;
+        height: 24%;
         width: 100%;
         border-bottom: 3px solid #eef8fd;
         &_title {
           width: 98px;
-          height: 19px;
+          height: 21px;
+          line-height: 21px;
           text-align: start;
           padding-left: 10px;
-          background-color: #2cabe3;
+          // background-color: #2cabe3;
+          background-image: url("../assets/img/bj.png");
+          background-repeat: no-repeat;
+          margin: 5px 1px;
+          background-size: 100% 21px;
           font-size: 14px;
           font-family: PingFang SC;
           font-weight: 400;
-          color: white;
+          color: #ffffff;
         }
         &_mes {
           width: 100%;
@@ -1383,7 +1540,7 @@ export default {
         }
       }
       &_bottom {
-        height: 70%;
+        height: 75%;
         width: 100%;
         overflow-y: scroll;
 
@@ -1397,15 +1554,16 @@ export default {
           justify-content: space-around;
           border-bottom: 3px solid #eef8fd;
           &_title {
-            width: 69px;
-            height: 32px;
+            width: 50px;
+            height: 25px;
             display: flex;
             justify-content: center;
             align-items: center;
-            font-size: 20px;
+            font-size: 14px;
             font-family: PingFang SC;
             font-weight: 400;
-            color: white;
+            color: #ffffff;
+            border-radius: 3px;
           }
           &_cont {
             font-size: 16px;