You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
582 lines
18 KiB
582 lines
18 KiB
<template>
|
|
<div class="container">
|
|
<div style="flex: 1">
|
|
<div class="header">
|
|
<img :src="require('@/assets/img/back-l.png')" alt="" style="margin-right: 8px;cursor: pointer" @click="backList">
|
|
<img :src="require('@/assets/img/boy.png')" alt="">
|
|
<p class="head-t">
|
|
<span class="head-r">{{ patientBaseData.patientName }}</span>
|
|
<span class="head-r">{{ patientBaseData.patientSex }}</span>
|
|
<span v-if="patientBaseData.patientAge" class="head-r">{{ patientBaseData.patientAge }}岁</span>
|
|
<img v-if="patientBaseData.patientId" class="icon-a" :src="require('@/assets/img/pid.png')" alt="" style="margin-right: 6px;vertical-align: text-top">
|
|
<span style="vertical-align: text-bottom">{{ patientBaseData.patientId }}</span>
|
|
</p>
|
|
<p class="head-b">
|
|
<img v-if="patientBaseData.patientIdNumber" :src="require('@/assets/img/id.png')" alt="" style="margin-right: 6px;vertical-align: middle">
|
|
<span class="mr16" style="vertical-align: middle">{{ maskId(patientBaseData.patientIdNumber) }}</span>
|
|
<img v-if="patientBaseData.patientPhone" :src="require('@/assets/img/phone.png')" alt="" style="margin-right: 6px;vertical-align: middle">
|
|
<span class="mr16" style="vertical-align: middle">{{ patientBaseData.patientPhone }}</span>
|
|
<img v-if="patientBaseData.patientAddress" :src="require('@/assets/img/position.png')" alt="" style="margin-right: 6px;vertical-align: middle">
|
|
<span style="vertical-align: middle">{{ patientBaseData.patientAddress }}</span>
|
|
</p>
|
|
<img :src="require('@/assets/img/pacs.png')" alt="" style="float: right;cursor: pointer" @click="handlePacs">
|
|
</div>
|
|
<div class="contentBox">
|
|
<div class="leftBox">
|
|
<time-line
|
|
ref="timeline"
|
|
:time-axis-data="timeAxisData"
|
|
@getTimeAxisData="getTimeAxisData"
|
|
v-on="$listeners"
|
|
@getTimeAxisNodeInfo="getTimeAxisNodeInfo"
|
|
/>
|
|
</div>
|
|
<div class="rightBox">
|
|
<el-tabs type="border-card" :value="timeAxisType" style="height: 100%" @tab-click="tabClick">
|
|
<el-tab-pane name="病史总览" label="病史总览" style="height: 100%">
|
|
<overView :patient-id="patientId" />
|
|
</el-tab-pane>
|
|
<el-tab-pane name="门诊病历" label="门诊病历" style="height: 100%">
|
|
<medicalRecord :patient-id="patientId" :is-search="isSearch" :only-read="onlyRead" />
|
|
</el-tab-pane>
|
|
<el-tab-pane name="常规检查" label="常规检查" style="height: 100%">
|
|
<routine :patient-id="patientId" :date="date" :only-read="onlyRead" />
|
|
</el-tab-pane>
|
|
<el-tab-pane name="特殊检查" label="特殊检查" style="height: 100%">
|
|
<special :patient-id="patientId" :only-read="onlyRead" />
|
|
</el-tab-pane>
|
|
<el-tab-pane name="视光档案" label="视光档案" style="height: 100%">
|
|
<opticalFile :patient-id="patientId" :is-search="isSearch" :only-read="onlyRead" />
|
|
</el-tab-pane>
|
|
<el-tab-pane name="诊断" label="诊断">
|
|
<el-table
|
|
:data="timeAxisNodeInfo"
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column
|
|
prop="diagName"
|
|
label="诊断内容"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
label="主诊断"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
{{ scope.row.isMain === '1' ? '是' : '否' }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-tab-pane>
|
|
<el-tab-pane name="手术" label="手术">
|
|
<el-table
|
|
:data="timeAxisNodeInfo"
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column
|
|
prop="bedNo"
|
|
label="床号"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="deptName"
|
|
label="部门名"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="wardName"
|
|
label="病区名"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="mainDrName"
|
|
label="主刀医生姓名"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="opName"
|
|
label="手术名称"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="opPartName"
|
|
label="手术部位"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="opTime"
|
|
label="手术时间"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
{{ scope.row.opTime ? scope.row.opTime.substring(0, 10) : '' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="主手术"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
{{ scope.row.isMain === '1' ? '是' : '否' }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-tab-pane>
|
|
<el-tab-pane name="用药" label="用药">
|
|
<el-table
|
|
:data="timeAxisNodeInfo"
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column
|
|
prop="medName"
|
|
label="商品名"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="socName"
|
|
label="通用名"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="site"
|
|
label="部位"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="itemType"
|
|
label="门诊/住院"
|
|
align="center"
|
|
/>
|
|
</el-table>
|
|
|
|
</el-tab-pane>
|
|
<el-tab-pane name="住院" label="住院">
|
|
<el-table
|
|
:data="timeAxisNodeInfo"
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column
|
|
prop="deptName"
|
|
label="部门名称"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="wardName"
|
|
label="病区名称"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="diagName"
|
|
label="诊断名称"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
label="住院日期"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
{{ scope.row.inDate ? scope.row.inDate.substring(0, 10) : '' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="出院日期"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
{{ scope.row.outDate ? scope.row.outDate.substring(0, 10) : '' }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-tab-pane>
|
|
<el-tab-pane name="随访记录" label="随访记录" style="height: 100%">
|
|
<followUpRecord :patient-id="patientId" :only-read="onlyRead" />
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<shrink ref="shrinks" :arrow-type="1" @display="handleDisplay" @changeType="changeType" />
|
|
<drawer ref="drawers" :cur-type="dataType" :display.sync="display" :width="drawerWidth" :mask="true" @display="closeDrawer">
|
|
<!-- 关键指标-->
|
|
<key-indicators
|
|
v-if="dataType === 1"
|
|
id="drawerKey"
|
|
ref="keyIndicatorRef"
|
|
class="key-content"
|
|
v-bind="$attrs"
|
|
:patient-id="patientId"
|
|
:patient-id-number="patientBaseData.patientIdNumber"
|
|
/>
|
|
<!-- 数据集-->
|
|
<dataInfo v-if="dataType === 2" :fore-list="foreList" :after-list="afterList" />
|
|
<!-- 病历收藏-->
|
|
<collection v-if="dataType === 3" :patient-id="patientBaseData.patientId" :platform="isSearch" />
|
|
<!-- 常用业务-->
|
|
<business v-if="dataType === 4" />
|
|
</drawer>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import timeLine from './time-line.vue'
|
|
import shrink from '@/components/360View/shrink'
|
|
import drawer from '@/components/360View/drawer'
|
|
import dataInfo from './dataInfo' // 数据集
|
|
import collection from './collection' // 病历收藏
|
|
import business from './business' // 常用业务
|
|
import overView from '@/components/360View/overView' // 病史总览
|
|
import routine from '@/components/360View/routine' // 常规检查
|
|
import special from '@/components/360View/special' // 特殊检查
|
|
import followUpRecord from '@/components/360View/followUpRecord'
|
|
import keyIndicators from './key-indicators'
|
|
import imgRecord from './img-reccrd.vue'
|
|
import pacsList from '@/components/360View/pacs/patientList'
|
|
import medicalRecord from '@/components/360View/medicalRecord' // 门诊病历
|
|
import opticalFile from '@/components/360View/opticalFile' // 视光档案
|
|
import eventBus from '@/page-subspecialty/utils/eventBus'
|
|
export default {
|
|
components: { timeLine, drawer, keyIndicators, shrink, business, collection, imgRecord, overView, medicalRecord, dataInfo, routine, special, followUpRecord, opticalFile, pacsList },
|
|
mixins: [],
|
|
props: {
|
|
patientId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
onlyRead: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isSearch: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
display: false,
|
|
sharkFlag: true,
|
|
patientBaseData: {},
|
|
timeAxisNodeInfo: [], // 点击左侧时间轴获取到的中间区域详细信息
|
|
date: '', // 点击时间轴的时间
|
|
source: '', // 数据集数据来源
|
|
collectList: '', // 数据集数据
|
|
drawerWidth: '',
|
|
timeAxisData: [], // 左侧时间轴数据
|
|
timeAxisAll: [], // 病史总览时间轴数据
|
|
timeAxisType: '病史总览', // tab类型
|
|
foreList: [], //
|
|
afterList: [], //
|
|
dataType: 1,
|
|
kpilist: [], // kpi关键指标checkbox
|
|
ShiLiAndYanYaData: {}, // 视力和眼压
|
|
isActive: false, // 控制数据与报告tab展示
|
|
type: '', // 筛查类型
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'tagName'
|
|
},
|
|
jsArr: [],
|
|
dataForm: {}
|
|
}
|
|
},
|
|
watch: {
|
|
display(val) {
|
|
if (val) {
|
|
this.$refs.drawers.$el.style.display = 'inline-block'
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getPatientData()
|
|
this.getTimeAxisData()
|
|
},
|
|
mounted() {
|
|
this.computerData()
|
|
if (this.isSearch === '3') {
|
|
this.timeAxisType = '视光档案'
|
|
} else {
|
|
this.timeAxisType = '病史总览'
|
|
}
|
|
},
|
|
methods: {
|
|
// 切换病史总览时间轴
|
|
tabClick(type) {
|
|
this.timeAxisType = type.name
|
|
},
|
|
selectType(type) {
|
|
this.dataType = type
|
|
this.display = true
|
|
},
|
|
maskId(idCard) {
|
|
if (idCard) {
|
|
const reg = /^(.{6})(?:\d+)(.{4})$/
|
|
return idCard.replace(reg, '\$1******\$2')
|
|
}
|
|
},
|
|
computerData() {
|
|
// 监听点击添加数据集，获取数据
|
|
eventBus.$off('sendForData')
|
|
eventBus.$on('sendForData', data => {
|
|
const arr = this.foreList.concat(data)
|
|
const id = 'id'
|
|
this.foreList = arr.reduce((all, next) => all.some((item) => item[id] == next[id]) ? all : [...all, next], [])
|
|
this.openDataDrink()
|
|
})
|
|
},
|
|
openDataDrink() {
|
|
this.dataType = 2
|
|
this.display = true
|
|
this.$nextTick(() => {
|
|
if (this.$refs.drawers && this.$refs.drawers.$el) {
|
|
this.$refs.drawers.$el.style.display = 'inline-block'
|
|
}
|
|
if (this.$refs.shrinks && this.$refs.shrinks.$el) {
|
|
this.$refs.shrinks.$el.style.zIndex = 999
|
|
this.$refs.drawers.selectShrink()
|
|
}
|
|
})
|
|
},
|
|
closeDrawer(val) {
|
|
this.display = val
|
|
},
|
|
changeType(val) {
|
|
this.dataType = val
|
|
this.display = true
|
|
},
|
|
handleDisplay(val) {
|
|
this.dataType = 1
|
|
if (val) {
|
|
this.display = true
|
|
this.$refs.drawers.$el.style.display = 'inline-block'
|
|
} else {
|
|
this.display = false
|
|
}
|
|
},
|
|
changeWidth() {
|
|
this.drawerWidth = (this.drawerWidth === '500px') ? '800px' : '500px'
|
|
},
|
|
backList() {
|
|
this.$parent.detailViewVisible = false
|
|
this.$parent.getDataListInitial()
|
|
},
|
|
// 360浏览器
|
|
handlePacs() {
|
|
const { href } = this.$router.resolve({
|
|
name: 'pacsManage'
|
|
})
|
|
window.open(href, '_blank')
|
|
},
|
|
// 关闭360弹框
|
|
closePacs() {
|
|
this.isActive = false
|
|
},
|
|
// 关键指标组件是否显示
|
|
shrinkClick() {
|
|
this.drawer = !this.drawer
|
|
this.display = true
|
|
},
|
|
// 根据id获取患者信息--中间上侧患者信息
|
|
async getPatientData() {
|
|
const { data: res } = await this.$http.get(
|
|
'/patient/view/getPatientData',
|
|
{
|
|
params: {
|
|
patientId: this.patientId
|
|
// patientId: '797064'
|
|
}
|
|
}
|
|
)
|
|
if (res.code === 0) {
|
|
this.patientBaseData = res.data ? res.data : {}
|
|
} else {
|
|
this.$message.error(res.msg)
|
|
}
|
|
},
|
|
// 获取时间轴数据--左侧时间轴
|
|
async getTimeAxisData() {
|
|
const { data: res } = await this.$http.get(
|
|
'/patient/view/getTimeAxisData',
|
|
{
|
|
params: {
|
|
patientId: this.patientId
|
|
}
|
|
}
|
|
)
|
|
if (res.code === 0) {
|
|
if (res.data.length > 0) {
|
|
this.timeAxisData = res.data.length > 0 ? res.data : []
|
|
}
|
|
if (!res.data.length) {
|
|
const year = this.$moment().format('YYYY')
|
|
const date = this.$moment().format('YYYY-MM-DD')
|
|
this.timeAxisData = [{ year: year, data: [{ date: date, itemList: [{ groupName: '门诊', opDate: date, year: year }] }] }]
|
|
}
|
|
} else {
|
|
this.$message.error(res.msg)
|
|
}
|
|
},
|
|
// 获取时间轴节点信息--点击左侧时间轴获取患者具体信息
|
|
async getTimeAxisNodeInfo(item) {
|
|
this.timeAxisType = item.groupName
|
|
const { data: res } = await this.$http.get('/patient/view/getTimeAxisNodeInfo', {
|
|
params: {
|
|
date: item.opDate,
|
|
groupName: item.groupName,
|
|
patientId: this.patientId
|
|
}
|
|
})
|
|
if (res.code === 0) {
|
|
this.timeAxisNodeInfo = res.data || []
|
|
} else {
|
|
this.$message.error(res.msg)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container{
|
|
.el-tabs__content {
|
|
height: calc(100% - 38px);
|
|
}
|
|
.el-tabs--border-card {
|
|
box-shadow: none;
|
|
}
|
|
.el-tabs--border-card>.el-tabs__header{
|
|
background: #F0F2F5;
|
|
}
|
|
.el-dialog > .el-dialog__body {
|
|
height: calc(100% - 48px);
|
|
}
|
|
}
|
|
.detail-view{
|
|
.el-dialog > .el-dialog__body {
|
|
height: calc(100% - 50px);
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.container{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
background: #F0F2F5;
|
|
|
|
.contentBox{
|
|
display: flex;
|
|
height: calc(100% - 100px);
|
|
}
|
|
.mr16{
|
|
margin-right: 16px;
|
|
}
|
|
.header{
|
|
width: 100%;
|
|
height: 88px;
|
|
padding: 8px;
|
|
position: relative;
|
|
margin-bottom: 16px;
|
|
box-sizing: border-box;
|
|
background: #FFFFFF;
|
|
border-radius: 4px;
|
|
.head-t{
|
|
position: absolute;
|
|
left: 155px;
|
|
top: 20px;
|
|
}
|
|
.head-b{
|
|
position: absolute;
|
|
left: 155px;
|
|
bottom: 20px;
|
|
font-size: 14px;
|
|
}
|
|
.head-r{
|
|
margin-right: 16px;
|
|
font-weight: 500;
|
|
font-size: 20px;
|
|
color: rgba(0, 0, 0, 0.88);
|
|
}
|
|
}
|
|
.key-indicators-shrink {
|
|
width: 32px;
|
|
margin-left: 8px;
|
|
height: 100%;
|
|
position: relative;
|
|
background: linear-gradient(90deg, rgba(47, 130, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
|
|
.icon-circle {
|
|
border-radius: 50%;
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 2px solid rgba(30, 121, 255, 0.4);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 18px;
|
|
margin-left: 3px;
|
|
cursor: pointer;
|
|
}
|
|
.el-icon-arrow-right,.el-icon-arrow-left {
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
img {
|
|
width: 32px;
|
|
height: 142px;
|
|
}
|
|
.dataBase{
|
|
position: absolute;
|
|
display: inline-block;
|
|
color: #1C76FD;
|
|
margin-left: 6px;
|
|
writing-mode: vertical-rl;
|
|
letter-spacing: 3px;
|
|
cursor: pointer;
|
|
}
|
|
.fontColor{
|
|
color: white !important;
|
|
}
|
|
.dataOne{
|
|
top: 80px;
|
|
}
|
|
.dataTwo{
|
|
top: 210px;
|
|
}
|
|
.dataThree{
|
|
top: 328px;
|
|
}
|
|
.dataFour{
|
|
top: 455px;
|
|
}
|
|
.imgCur{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 43px;
|
|
}
|
|
.imgOne{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 163px;
|
|
}
|
|
.imgTwo{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 287px;
|
|
}
|
|
.imgThree{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 411px;
|
|
}
|
|
}
|
|
.leftBox{
|
|
width: 168px;
|
|
height: 100%;
|
|
margin-right: 16px;
|
|
background-color: white;
|
|
}
|
|
.rightBox{
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #F0F2F5;
|
|
}
|
|
}
|
|
</style>
|