nicky
4 months ago
5 changed files with 446 additions and 183 deletions
@ -0,0 +1,205 @@ |
|||||
|
<template> |
||||
|
<div class="throm-result-sop"> |
||||
|
<!-- <a-card class="report-card" title="溶栓状态"> --> |
||||
|
<div class="report-timeline"> |
||||
|
<!-- <a-steps progress-dot :current="currentIndex" direction="vertical"> |
||||
|
<template v-for="(item, index) in getNodeList"> |
||||
|
<a-step v-if="item.nodeType === 0" |
||||
|
:status="processNodeIndex == index ? 'process' : processNodeIndex > index && item.record ? 'finish' : 'wait' "> |
||||
|
<div slot="title" style="display: flex;justify-content: space-between;width: 100%"> |
||||
|
<div>{{item.nodeName}}</div> |
||||
|
<div> |
||||
|
{{processNodeIndex == index ? '进行中' : processNodeIndex > index && item.record ? '已完成' : ''}} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div slot="description">{{item.record ? item.record.answer[0] : ''}}</div> |
||||
|
</a-step> |
||||
|
</template> |
||||
|
</a-steps> --> |
||||
|
<a-timeline> |
||||
|
<a-timeline-item node-top="4" v-for="(item, index) in getNodeList" :key="item.nodeName" |
||||
|
:color="item.record ? '#00c767' : '#ff4a44'" v-if="item.nodeType === 0"> |
||||
|
<div class="flex justify-between" :class=" |
||||
|
item.record ? 'cor-green' : 'cor-red' |
||||
|
"> |
||||
|
<div class="fz24 font-bold"> |
||||
|
{{ item.nodeName }} |
||||
|
</div> |
||||
|
<div class="fz24 font-bold"> |
||||
|
{{ item.record ? '已完成' : '' }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="fz20 text-left" :class=" |
||||
|
item.record ? 'cor-green' : 'cor-red' |
||||
|
"> |
||||
|
{{ |
||||
|
item.record ? item.record.answer[0] : '' |
||||
|
}} |
||||
|
</div> |
||||
|
</a-timeline-item> |
||||
|
</a-timeline> |
||||
|
</div> |
||||
|
<!-- </a-card> --> |
||||
|
<div class="throm-common-button"> |
||||
|
<a-button class="" block type="primary" size="large" @click="onSubmit">下一步</a-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
mapMutations, |
||||
|
mapState |
||||
|
} from 'vuex'; |
||||
|
import { |
||||
|
getNextNode |
||||
|
} from 'api'; |
||||
|
export default { |
||||
|
name: '', |
||||
|
data() { |
||||
|
return { |
||||
|
currentIndex: 0, |
||||
|
processNodeIndex: 0, |
||||
|
nodeInfo: { |
||||
|
fbsj: '', |
||||
|
jfbSeconds: '', |
||||
|
dntSeconds: '', |
||||
|
ctSeconds: '', |
||||
|
nextStepName: '', |
||||
|
countDownInSeconds: '', |
||||
|
nodeList: [], |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
reportType: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
dataSource: { |
||||
|
type: Object, |
||||
|
default: () => ({}) |
||||
|
}, |
||||
|
firstAidId: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
} |
||||
|
}, |
||||
|
async mounted() { |
||||
|
console.log(this.reportType, this.firstAidId) |
||||
|
if (this.reportType == 'modal') { |
||||
|
this.init(this.dataSource.firstAidId); |
||||
|
} else if (this.firstAidId) { |
||||
|
this.init(this.firstAidId); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
computed: { |
||||
|
getNodeList() { |
||||
|
const { |
||||
|
sop |
||||
|
} = this.nodeInfo; |
||||
|
if (!sop) return []; |
||||
|
const lastFinishIndex = sop.nodeList.findIndex(a => !!a.record) || 0 |
||||
|
this.processNodeIndex = lastFinishIndex + 1 |
||||
|
return sop.nodeList; |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
...mapMutations('patient', ['setNextNodeData']), |
||||
|
//初始化数据 |
||||
|
async init(firstAidId) { |
||||
|
this.getNextNode(firstAidId); |
||||
|
}, |
||||
|
async getNextNode(firstAidId) { |
||||
|
let res = await getNextNode({ |
||||
|
firstAidId, |
||||
|
}); |
||||
|
const { |
||||
|
data, |
||||
|
code, |
||||
|
msg |
||||
|
} = res; |
||||
|
if (code === 200) { |
||||
|
console.log('this.nodeInfo', data) |
||||
|
this.nodeInfo = data; |
||||
|
this.setNextNodeData(data); |
||||
|
} else { |
||||
|
this.$message.error('缺少急救id信息'); |
||||
|
} |
||||
|
}, |
||||
|
onSubmit() { |
||||
|
this.$emit('next') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less"> |
||||
|
.throm-result-sop { |
||||
|
.report-timeline { |
||||
|
overflow-y: auto; |
||||
|
padding: 12px; |
||||
|
min-height: 300px; |
||||
|
|
||||
|
.flex { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.cor-green { |
||||
|
color: #00c767; |
||||
|
} |
||||
|
|
||||
|
.cor-red { |
||||
|
color: #ff4a44; |
||||
|
} |
||||
|
|
||||
|
.font-xl { |
||||
|
font-size: 22px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.ant-steps { |
||||
|
height: 100%; |
||||
|
padding-bottom: 20px; |
||||
|
box-sizing: border-box; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.ant-steps-item .ant-steps-item-container { |
||||
|
display: flex; |
||||
|
|
||||
|
.ant-steps-item-content { |
||||
|
flex: 1; |
||||
|
text-align: right; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-steps-item-title { |
||||
|
padding: 0; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.ant-steps-item-finish { |
||||
|
.ant-steps-item-title { |
||||
|
color: #000000; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-steps-item-process { |
||||
|
.ant-steps-item-title { |
||||
|
color: #007AFF; |
||||
|
// // border-bottom: 1px solid #007AFF; |
||||
|
// border-bottom: 3px solid transparent; |
||||
|
// /* 设置透明的底部边框 */ |
||||
|
// border-image: linear-gradient(to right, #fff, #007AFF) 1; |
||||
|
// /* 使用渐变色填充边框 */ |
||||
|
// border-radius: 10px; |
||||
|
// /* 设置圆角 */ |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue