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