postdischarge-ui/src/views/manage/components/PathReview.vue

489 lines
19 KiB
Vue
Raw Normal View History

2024-06-24 14:35:52 +08:00
<template>
<div style="background-color: #f1f3f5;width:100%">
<!-- 画像审核 -->
<div class="card">
<div class="cardleft">
<div class="title">
<div style="display: flex; align-items: center">
<img class="headsculpture" v-if="list.sex == 'MALE'"
src="../../../assets/manage/touxiang.png" />
<img class="headsculpture" v-else src="../../../assets/manage/nvtouxiang.png" />
<div class="name">
{{ list.patientName ? list.patientName : "" }}
</div>
<div class="genderandage">
<span>
{{ list.sex == "MALE" ? "男" : "" }}
{{ list.sex == "FEMALE" ? "女" : "" }}
</span>
<span v-if="list.sex && list.age" style="padding: 0 6px">|</span>
<span v-if="list.age">{{ list.age }}</span>
</div>
</div>
<div class="source">
<div class="situation item">
{{ list.visitMethod == "OUTPATIENT_SERVICE" ? "门诊" : "" }}
{{ list.visitMethod == "BE_IN_HOSPITAL" ? "住院" : "" }}
</div>
<div class="item" style="color: #00e06e; border-color: #00e06e"
v-if="list.patientSource == 'WE_CHAT_OFFICIAL_ACCOUNT'">
<img src="../../../assets/manage/gzh.png" alt="" />
<div>公众号</div>
</div>
<div class="item" style="color: #339de5; border-color: #339de5"
v-if="list.patientSource == 'WE_CHAT_APPLET'">
<img src="../../../assets/manage/xcx.png" alt="" />
<div>小程序</div>
</div>
<div class="item" style="color: #f4881f; border-color: #f4881f"
v-if="list.patientSource == 'MANAGE_END'">
<img src="../../../assets/manage/gld.png" alt="" />
<div>管理端</div>
</div>
</div>
</div>
2024-06-24 16:52:43 +08:00
<el-descriptions title="诊断信息" style="margin: 30px 0 0;" />
<div class="texts">
<div class="text">
<div slot="reference" class="reference">
<img src="../../../assets/pathReview/zhu.png" alt="">
<span>
hover 激活
</span>
</div>
</div>
<div class="text">
<div slot="reference" class="reference">
<img src="../../../assets/pathReview/ci.png" alt="">
<span>
hover 激活
</span>
</div>
</div>
<div class="text">
<div slot="reference" class="reference">
<img src="../../../assets/pathReview/ci.png" alt="">
<span>
hover 激活
</span>
</div>
</div>
<div class="text">
<div slot="reference" class="reference">
<img src="../../../assets/pathReview/ci.png" alt="">
<span>
hover 激活
</span>
</div>
</div>
<div class="text">
<div slot="reference" class="reference">
<img src="../../../assets/pathReview/ci.png" alt="">
<span>
hover 激活
</span>
</div>
</div>
</div>
<el-descriptions title="用药情况" style="margin: 30px 0 0;" />
<div class="texts">
<div class="text">
<el-popover placement="right" width="400" trigger="hover">
<el-descriptions title="用户信息" :column="2">
<el-descriptions-item label="用药频次">每日2次</el-descriptions-item>
<el-descriptions-item label="药品用法">1</el-descriptions-item>
<el-descriptions-item label="注意事项"></el-descriptions-item>
<el-descriptions-item label="给药方式"></el-descriptions-item>
<el-descriptions-item label="用药时长"></el-descriptions-item>
<el-descriptions-item label="用药途径"></el-descriptions-item>
</el-descriptions>
<div slot="reference" class="reference">
<img src="../../../assets/pathReview/yaopin.png" alt="">
<span>
hover 激活
</span>
</div>
</el-popover>
</div>
<div class="text">
<el-popover placement="right" width="400" trigger="hover">
<el-descriptions title="用户信息" :column="2">
<el-descriptions-item label="用药频次">每日2次</el-descriptions-item>
<el-descriptions-item label="药品用法">1</el-descriptions-item>
<el-descriptions-item label="注意事项"></el-descriptions-item>
<el-descriptions-item label="给药方式"></el-descriptions-item>
<el-descriptions-item label="用药时长"></el-descriptions-item>
<el-descriptions-item label="用药途径"></el-descriptions-item>
</el-descriptions>
<div slot="reference" class="reference">
<img src="../../../assets/pathReview/yaopin.png" alt="">
<span>
hover 激活
</span>
</div>
</el-popover>
</div>
</div>
<el-descriptions title="复诊日期及科室" style="margin: 30px 0 0;" />
<div class="texts">
<div class="text">
<div slot="reference" class="reference">
<img src="../../../assets/pathReview/riqi.png" alt="">
<span>
hover 激活
</span>
</div>
</div>
<div class="text">
<div slot="reference" class="reference">
<img src="../../../assets/pathReview/riqi.png" alt="">
<span>
hover 激活
</span>
</div>
</div>
</div>
2024-06-24 14:35:52 +08:00
</div>
<!-- 画像编辑右侧 -->
<div class="cardright">
2024-06-24 16:52:43 +08:00
<div class="topbtns">
<div class="topbutton" :class="tab == 1 ? 'blue' : ''" @click="tab = 1">
<img src="../../../assets/pathReview/blackxinxi.png" alt="" v-if="tab != 1">
<img src="../../../assets/pathReview/bluexinxi.png" alt="" v-else>
<span>路径信息</span>
</div>
<div class="topbutton" :class="tab == 2 ? 'blue' : ''" @click="tab = 2">
<img src="../../../assets/pathReview/blackrenwu.png" alt="" v-if="tab != 2">
<img src="../../../assets/pathReview/bluerenwu.png" alt="" v-else>
<span>路径任务</span>
</div>
</div>
<div v-if="tab == 1">
<div class="nodetitle">
<div>主路径:</div>
<div>病种:</div>
</div>
<el-collapse v-model="activeNames">
<el-collapse-item title="主路径" name="1">
<el-table :data="RouteList" style="width: 100%">
<el-table-column prop="" label="" width="160">
<template slot-scope="scope">
<div class="zlj" style="font-weight: bold;">
出院后{{ scope.row.routeNodeDay }}
</div>
<div class="zlj">
{{ scope.row.executeTime }} {{ scope.row.executionTime }}
</div>
</template>
</el-table-column>
<el-table-column prop="" label="">
<template slot-scope="scope">
<div class="zljcard" v-for="(item, index) in scope.row.taskPartitionDictNames"
:key="index">
{{ item }}
</div>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
</el-collapse>
<el-collapse v-model="activeNames">
<el-collapse-item title="子路径" name="2">
<div v-for="(item) in childRouteList" :key="item.id">
<div class="zljtitle">
{{ item.routeName }}
</div>
<el-table :data="item.nodeList" style="width: 100%">
<el-table-column prop="" label="" width="160">
<template slot-scope="scope">
<div class="zlj" style="font-weight: bold;">
出院后{{ scope.row.routeNodeDay }}
</div>
<!-- <div class="zlj">
{{ scope.row.executeTime }} {{ scope.row.executionTime }}
</div> -->
</template>
</el-table-column>
<el-table-column prop="" label="">
<template slot-scope="scope">
<div class="zljcard" style="border-left:9px solid #8F68FE"
v-for="(item, index) in scope.row.taskPartitionDictNames" :key="index">
{{ item }}
</div>
</template>
</el-table-column>
</el-table>
</div>
</el-collapse-item>
</el-collapse>
</div>
2024-06-24 14:35:52 +08:00
</div>
</div>
</div>
</template>
<script>
import {
getByPatientId,
} from '@/api/manage/Auditing.js'
import { getAge } from "@/utils/age";
export default {
name: "PathReview",
data() {
return {
baseUrl: process.env.VUE_APP_BASE_API,
list: {},
2024-06-24 16:52:43 +08:00
tab: 1,
activeNames: ['2'],
RouteList: [
{
"routeNodeName": "AFTER_DISCHARGE",
"routeNodeDay": 1,
executeTime: '2024-06-24',
"executionTime": "08:00",
"taskPartitionCodes": "HEALTH_ARCHIVE,TPC202405070001",
"taskPartitionDictNames": ["健康档案", "康复宣教"]
},
{
"routeNodeName": "AFTER_DISCHARGE",
"routeNodeDay": 2,
executeTime: '2024-06-25',
"executionTime": "08:00",
"taskPartitionCodes": "TPC202403290001",
"taskPartitionDictNames": ["随访"]
}
],
childRouteList: [
{
"id": 59,
"routeName": "诊断包含123123",
"diseaseTypeId": 63,
"diseaseTypeName": "眼部疾病",
"nodeList": [
{
"routeNodeName": "AFTER_DISCHARGE",
"routeNodeDay": 3,
"executionTime": "09:30",
"executeTime": "2024-06-27",
"taskPartitionCodes": "SPORT_GUIDE",
"taskPartitionDictNames": ["运动指导"]
},
{
"routeNodeName": "AFTER_DISCHARGE",
"routeNodeDay": 4,
"executionTime": "09:00",
"executeTime": "2024-06-28",
"taskPartitionCodes": "TPC202404220002",
"taskPartitionDictNames": ["换药"]
}
]
}
]
2024-06-24 14:35:52 +08:00
};
},
created() {
this.info();
},
methods: {
info() {
getByPatientId(this.$route.query.patientId).then(res => {
res.data.birthDate ? res.data.age = getAge(res.data.birthDate) : ''
this.list = res.data
})
},
}
};
</script>
<style lang="scss" scoped>
2024-06-24 16:52:43 +08:00
.zljtitle {
font-size: 14px;
height: 38px;
line-height: 38px;
color: #92A2AB;
}
.zljcard {
display: inline-block;
height: 38px;
min-width: 100px;
line-height: 38px;
border-radius: 6px;
border: 1px solid #D3D3D3;
text-align: center;
box-shadow: 0 2px 4px 0 #D3D3D3;
margin-right: 10px;
padding: 0 15px;
border-left: 9px solid #1890ff;
}
.zlj {
text-align: center;
}
::v-deep .has-gutter {
display: none !important;
}
::v-deep .el-collapse {
width: 100%;
background-color: #fff;
padding: 0 10px;
margin-bottom: 12px;
border-radius: 6px;
}
.reference {
display: flex !important;
align-items: center !important;
padding: 0 20px !important;
img {
width: 24px;
height: 24px;
}
span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
padding-left: 10px;
}
}
.texts {
margin: 0 0 20px;
flex-wrap: wrap;
width: 100%;
display: flex;
font-size: 14px;
justify-content: space-between;
.text {
padding: 5px 0;
box-shadow: 0 2px 4px 0 #D3D3D3;
margin-bottom: 15px;
width: 46%;
overflow: hidden;
white-space: nowrap;
border-radius: 5px;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
}
2024-06-24 14:35:52 +08:00
.card {
width: 100%;
display: flex;
justify-content: space-evenly;
// padding: 20px 0;
height: calc(100vh - 119px);
.cardleft {
width: 35%;
background-color: #fff;
overflow: auto;
padding: 20px;
.title {
display: flex;
align-items: center;
justify-content: space-between;
.source {
display: flex;
.situation {
background-color: #f1faf7;
padding: 3px 6px;
color: #83cac0 !important;
border: 1px solid #83cac0 !important;
}
.item {
font-size: 14px;
margin-left: 5px;
border: 1px solid #fff;
padding: 3px 6px;
border-radius: 5px;
justify-content: center;
display: flex;
align-items: center;
img {
margin-right: 2px;
width: 16px;
height: 16px;
}
}
}
.name {
padding: 0 6px;
}
.genderandage {
padding: 0 6px;
}
.headsculpture {
width: 35px;
height: 35px;
}
}
}
.cardright {
overflow: auto;
2024-06-24 16:52:43 +08:00
background-color: rgb(241, 243, 245);
2024-06-24 14:35:52 +08:00
width: 62%;
2024-06-24 16:52:43 +08:00
padding: 10px;
2024-06-24 14:35:52 +08:00
font-size: 14px;
2024-06-24 16:52:43 +08:00
.nodetitle {
border-radius: 6px;
padding: 0 10px;
height: 50px;
font-size: 16px;
font-weight: bold;
2024-06-24 14:35:52 +08:00
width: 100%;
2024-06-24 16:52:43 +08:00
background-color: #fff;
margin: 12px 0;
display: flex;
div {
height: 100%;
line-height: 50px;
width: 50%;
}
2024-06-24 14:35:52 +08:00
}
2024-06-24 16:52:43 +08:00
.topbtns {
width: 100%;
display: flex;
.topbutton {
background-color: #DDE0E9;
width: 100px;
height: 34px;
display: flex;
align-items: center;
justify-content: space-evenly;
border-radius: 6px;
margin-right: 20px;
img {
width: 18px;
height: 18px;
}
}
.blue {
color: #1890ff;
box-shadow: 0 2px 4px 0 #D3D3D3;
background-color: #fff;
}
2024-06-24 14:35:52 +08:00
}
}
}
</style>