carbasics2023_web_pad_v4/src/views/thrombolysis/components/throm-result-sop.vue

<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>