1.对接获取左侧时间线接口

2.点击左侧获取右侧表格数据

src/views/outClinicalpathway.vue

@@ -2,7 +2,7 @@
  * @Author: wsq
  * @Date: 2022-04-22 15:20:58
  * @LastEditors: wsq
- * @LastEditTime: 2023-01-10 14:28:56
+ * @LastEditTime: 2023-01-10 17:53:58
  * @Description: 
 -->
 <template>
@@ -15,19 +15,18 @@
         <div class="outClinicalpathway_top_left_one">
           <span><img src="../assets/img/peo.png" alt="" /></span>
           <div class="outClinicalpathway_top_left_one_t1">
-            患者姓名:<span>{{topdata.patientName}}</span>
+            患者姓名:<span>{{ topdata.patientName }}</span>
           </div>
           <div class="outClinicalpathway_top_left_one_t2">
             住院号:<span>{{ topdata.regCode }}</span>
           </div>
           <div class="outClinicalpathway_top_left_one_t3">
-            住院次数:<span>{{ topdata.inHosNum  }}</span>
+            住院次数:<span>{{ topdata.inHosNum }}</span>
           </div>
-           <div class="outClinicalpathway_top_left_one_t4">
-          符合临床路径:<span>{{topdata.clinical_route_name }}</span>
+          <div class="outClinicalpathway_top_left_one_t4">
+            符合临床路径:<span>{{ topdata.clinical_route_name }}</span>
           </div>
         </div>
-    
       </div>
       <!-- 右侧按钮 -->
       <div class="outClinicalpathway_top_right">
@@ -50,7 +49,7 @@
             :hollow="activity.hollow"
             :timestamp="activity.timestamp"
           >
-            {{ activity.content }}
+            <span :class="timeindex==index?'outClinicalpathway_table_left_timespan':'outClinicalpathway_table_left_timespan2'" @click="timeclick(activity,index)">{{ activity.inhosdays }}</span>
           </el-timeline-item>
         </el-timeline>
       </div>
@@ -67,10 +66,23 @@
         >
           <el-table-column type="selection" width="55" />
           <el-table-column label="医嘱类型" width="180">
-            <template #default="scope">{{ scope.row.date }}</template>
+            <template #default="scope">{{yztype[scope.row.type] }}</template>
           </el-table-column>
-          <el-table-column show-overflow-tooltip property="name" label="路径名称" width="120" />
-          <el-table-column show-overflow-tooltip property="address" label="医院项目编码" />
+          <el-table-column
+            show-overflow-tooltip
+            property="advice_name"
+            label="路径名称"
+          />
+          <el-table-column
+            show-overflow-tooltip
+            property="project_code"
+            label="医院项目编码"
+          />
+          <el-table-column
+            show-overflow-tooltip
+            property="project_name"
+            label="医院项目名称"
+          />
         </el-table>
       </div>
     </div>
@@ -98,127 +110,85 @@ export default {
   setup() {
     //表格自适应高度
     const route = useRoute();
-   
+
     const monthlyPlanTable = ref();
     const multipleTableRef = ref();
     let state = reactive({
-      pid:'7e3c6a2e-e5a8-11ec-9998-9016ba5908d0',
+
       //患者信息
-      topdata:{
-        patientName:'', //患者姓名
-        regCode:'',// 住院号
-        inHosNum:'',// 住院次数
-        clinical_route_name:''// 符合临床路径
+      topdata: {
+        patientName: "", //患者姓名
+        regCode: "", // 住院号
+        inHosNum: "", // 住院次数
+        clinical_route_name: "", // 符合临床路径
       },
       multipleSelection: [], //被选择的数据
-      tableData: [
-        {
-          id: 1,
-          date: "2016-05-02",
-          name: "wangxiaohu",
-          address: "No. 189, Grove St, Los Angeles",
+      tableData: [],//表格数据
+      yztype:{
+        1:'长期医嘱',
+        2:'短期医嘱'
+      },
+      //被点击的index
+      timeindex:null,
 
-          
-        },
-        {
-          id: 2,
-          date: "2016-05-04",
-          name: "wangxiaohu",
-          address: "No. 189, Grove St, Los Angeles",
-        },
-        {
-          id: 3,
-          date: "2016-05-01",
-          name: "wangxiaohu",
-          address: "No. 189, Grove St, Los Angeles",
-          children: [
-            {
-              id: 31,
-              date: "",
-              name: "wangxiaohu",
-              address: "No. 189, Grove St, Los Angeles",
-            },
-            {
-              id: 32,
-              date: "",
-              name: "wangxiaohu",
-              address: "No. 189, Grove St, Los Angeles",
-            },
-          ],
-        },
-        {
-          id: 4,
-          date: "2016-05-03",
-          name: "wangxiaohu",
-          address: "No. 189, Grove St, Los Angeles",
-        },
-      ],
-    
       //时间线
-      activities: [
-        {
-          content: "住院第1天",
-          timestamp: "2022-04-03~2022-05-08",
-          size: "large",
-          type: "success",
-          icon:img,
-        },
-        {
-          content: "住院第2~3天",
-          size: "large",
-          timestamp: "2022-04-03~2022-05-08",
-          type: "success",
-        },
-        {
-          content: "住院第4~5天",
-          timestamp: "2018-04-03 20:46",
-          size: "large",
-        },
-        {
-          content: "住院第6~7天",
-          size: "large",
-          timestamp: "2018-04-03 20:46",
-          type: "primary",
-          hollow: true,
-        },
-        {
-          content: "住院第8~9天",
-          size: "large",
-          timestamp: "2018-04-03 20:46",
-        },
-      ],
+      activities: [],
     });
-  //获取患者信息
-  const gettopdata=()=>{
-  
-         http
-        .post(`/ClinicalRoute/ClinicalRoute/GetPatientInfo?pid=${route.value.query.pid}`, {})
+    //获取患者信息
+    const gettopdata = () => {
+      http
+        .post(
+          `/ClinicalRoute/ClinicalRoute/GetPatientInfo?pid=${route.value.query.pid}`,
+          {}
+        )
         .then((data) => {
-         state.topdata=data;
-
+          state.topdata = data;
         })
         .catch((error) => {});
-  };
+    };
     //当选择项发生变化时会触发该事件
     const handleSelectionChange = (val) => {
       state.multipleSelection = val;
-     
     };
     //递归选中
-   const checkFun=(data,status)=>{
-      data.forEach(element => {
-        element.isCheck=status;
-        
-      });
-   };
+    const checkFun = (data, status) => {
+      // data.forEach((element) => {
+      //   element.isCheck = status;
+      // });
+    };
+    //获取左侧时间线数据
+    const getlefttime = () => {
+      http
+        .post(
+          `/ClinicalRoute/ClinicalRoute/GetGetRouteAdvicesLeft?pid=${route.value.query.pid}`,
+          {}
+        )
+        .then((data) => {
+          state.activities = data;
+        })
+        .catch((error) => {});
+    };
+    //点击左侧时间线  获取右侧表格数据
+    const timeclick = (val,index) => {
+      state.timeindex=index
+      http
+        .post(
+          `/ClinicalRoute/ClinicalRoute/GetGetRouteAdvicesRight?pid=${route.value.query.pid}&case_routeid=${val.case_routeid}&searchQuery=${val.inhosdays}`,
+          {}
+        )
+        .then((data) => {
+          state.tableData = data;
+        })
+        .catch((error) => {});
+    };
 
     onMounted(() => {
-      gettopdata()
+      gettopdata();
+      getlefttime();
     });
 
     return {
       ...toRefs(state),
-    
 
       decimal,
 
@@ -227,6 +197,8 @@ export default {
       handleSelectionChange,
       checkFun,
       gettopdata,
+      getlefttime,
+      timeclick,
     };
   },
 };
@@ -294,7 +266,7 @@ export default {
         &_t1 {
           width: 24%;
           height: 80%;
-            margin-right: 5px;
+          margin-right: 5px;
           background-color: #ffff;
           display: flex;
           align-items: center;
@@ -314,7 +286,7 @@ export default {
         &_t2 {
           width: 24%;
           height: 80%;
-            margin-right: 5px;
+          margin-right: 5px;
           background-color: #ffff;
           display: flex;
           align-items: center;
@@ -334,7 +306,7 @@ export default {
         &_t3 {
           width: 24%;
           height: 80%;
-            margin-right: 5px;
+          margin-right: 5px;
           background-color: #ffff;
           margin-right: 10px;
           display: flex;
@@ -353,11 +325,11 @@ export default {
             align-items: center;
           }
         }
-         &_t4 {
+        &_t4 {
           width: 24%;
           height: 80%;
           background-color: #ffff;
-           margin-right: 5px;
+          margin-right: 5px;
           display: flex;
           align-items: center;
           color: #acacac;
@@ -375,7 +347,6 @@ export default {
           }
         }
       }
-     
     }
     &_right {
       height: 100%;
@@ -395,11 +366,24 @@ export default {
       margin-right: 5px;
       background-color: #ffff;
       padding-top: 10px;
+      &_timespan{
+        width: 80%;
+        height:20px;
+        display: flex;
+        background-color: #f2fafd;
+        color: #5dbee9;
+
+      }
+      &_timespan2{
+        width: 80%;
+        height:20px;
+        display: flex;
+      
+      }
     }
     &_right {
       width: 84%;
       height: 100%;
-     
     }
   }
 }