carbasics2023_web_pad_v4/src/App.vue

<!--
 * @Author: gaowenya
 * @email: gaowenya_a@163.com
 * @Date: 2023-06-19 09:38:10
 * @LastEditors: 
 * @LastEditTime: 
-->
<template>
	<a-config-provider :locale="locale">
		<div id="app" class="storm">
			<a-spin tip="正在请求..." class="zhezhao" :spinning="spinning">
				<div class="storm-container">
					<!-- <Nav /> -->
					<div class="storm-content">
						<router-view />
					</div>
				</div>
			</a-spin>
			<!-- 全局计时  $route.name !== 'PatientList' && -->
			<Dragger v-if="getCount" ref="timer" class="count-container">
				<div class="count-name">静脉溶栓</div>
				<!-- <van-count-down :time="getCount" format="mm:ss" /> -->
				<Count />
			</Dragger>
			<!-- 测评提示信息弹窗 -->
			<a-modal class="patient-create patient-form" :width="518" :maskClosable="false" :closable="false"
				:destroyOnClose="true" v-model="tip.visible" title="提示" @ok="tipConfirm" okText="去测评" cancelText="忽略">
				<div class="modal-content">
					{{ tip.content }}
				</div>
			</a-modal>
			<!--  -->
			<a-modal class="patient-create patient-form" :width="518" :maskClosable="false" :closable="false"
				:destroyOnClose="true" v-model="tip.Lnspect" title="提示" @ok="LnspectConfirm" @cancel="LnspectCancel"
				okText="查看" cancelText="忽略">
				<div class="modal-content">检验结果已完成, 请前往查看</div>
			</a-modal>
		</div>
	</a-config-provider>
</template>
<script>
	import zhCN from 'ant-design-vue/es/locale/zh_CN'; // 引入中文语言包
	import Dragger from './components/dragger.vue';
	import Count from './components/count.vue';
	import {
		messageQuery
	} from 'api';
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import Nav from 'components/Nav.vue';
	export default {
		components: {
			Nav,
			Dragger,
			Count,
		},
		data() {
			return {
				locale: zhCN, // 设置为中文
				routeName: '',
				tip: {
					// 提示信息
					visible: false, //测评
					Lnspect: false, //检验
					content: '',
					k: null,
				},
				request: 0,
				pushRouter: {
					0: 'Inspect',
					1: 'Image',
					2: 'Min',
				},
				titleForm: {
					'0min': 'JMRS-Q-NIHSS',
					'15min': 'JMRS-15-NIHSS',
					'30min': 'JMRS-30-NIHSS',
					'45min': 'JMRS-45-NIHSS',
					'60min': 'JMRS-60-NIHSS',
				},
			};
		},
		computed: {
			...mapState('storm', ['spinning', 'showNav']),
			...mapState('patient', ['patientData', 'timerData', 'overviewType']),
			getCount() {
				const {
					timerData,
					patientData
				} = this;
				if (!timerData && !patientData) return null;
				if (timerData.firstAidId !== patientData.firstAidId) return null;
				const {
					countdown
				} = timerData;
				if (!countdown) return null;
				// const totalSeconds = countdown;
				// // ?️ 获取完整分钟数
				// const minutes = Math.floor(totalSeconds / 60);
				// // ?️ 获得剩余的秒数
				// const seconds = totalSeconds % 60;
				// // ✅ 格式化为 MM:SS
				// const result = `${this.padTo2Digits(minutes)}:${this.padTo2Digits(seconds)}`;
				// console.log(result); // ?️ "09:25"
				return parseInt(countdown) * 1000;
			},
		},
		watch: {
			overviewType: {
				deep: true,
				handler(n, o) {
					if (n === 'overview' || n === 'info') {
						this.queryMessage();
					}
				},
			},
			$route: {
				deep: true,
				handler(n, o) {
					if (n.name === 'PatientList') {
						this.setTimerData({});
					}
					if (n.name === 'PatientDetails') {
						// this.request = 0;
					}
					if (
						n.path !== '/' &&
						n.name !== 'PatientList' &&
						n.name !== 'Min'
					) {
						this.init();
					}
				},
			},
		},
		methods: {
			...mapMutations('patient', ['setTimerData', 'setPatientData', 'setPatientDataCur']),
			padTo2Digits(num) {
				return num.toString().padStart(2, '0');
			},
			async init() {
				const {
					firstAidId
				} = this.patientData;
				if (!firstAidId) return;
				this.queryMessage();
				await this.handMessageQuery();

				this.request = 0;
				this.utils.AnimationFrame.create(
					'timerTask',
					10000,
					true,
					(min) => {
						this.getMessageQuery(min);
					}
				);
			},
			async queryMessage() {
				const {
					firstAidId
				} = this.patientData;
				const res = await messageQuery(firstAidId);
				const {
					code,
					msg
				} = res;
				if (code === 200) {
					this.setTimerData(res.data);
				}
			},
			//  测评确认
			tipConfirm() {
				this.tip.visible = false;
				const name = this.pushRouter[this.tip.k];
				console.log('name: ', name);
				this.$router.push({
					name,
				});
			},
			// 检验调取确认
			LnspectConfirm() {
				this.LnspectCancel();
				this.$router.push({
					name: 'Inspect',
				});
			},
			LnspectCancel() {
				this.tip.Lnspect = false;
				this.$forceUpdate();
			},
			// 消息提示
			async handMessageQuery() {
				// 异步
				const {
					firstAidId
				} = this.patientData;
				if (firstAidId) {
					const res = await messageQuery(firstAidId);
					const {
						code,
						msg
					} = res;
					if (code === 200) {
						this.setTimerData(res.data);
						const {
							map,
							haveFlagInspect,
							finishStatus,
						} = res.data;
						// console.log('firstAidInspectDataDtos: ', haveFlagInspect);
						// if(finishStatus == 1){
						// 	this.setTimerData({})
						// 	this.request = 0
						// 	this.setPatientData({})
						// 	this.setPatientDataCur({})
						// }
						for (let k in map) {
							if (map[k]) {
								this.taskList = {
									text: map[k],
									status: false,
								};
							}
							if (map[k] && this.taskList.status === false) {
								// 记录不重复弹窗
								if (this.taskList.text === map[k]) {
									this.taskList.status = true;
								}
								if (
									this.$route.name !== 'Min' &&
									this.$route.name !== 'PatientList'
								) {
									this.tip = {
										visible: true,
										k,
										content: map[k],
									};
								}
							}
						}
						// 检验调取  判断是否有急诊号 1 弹窗, 0 不弹窗 Thrombolysis
						if (haveFlagInspect) {
							if (
								this.$route.name !== 'Inspect' &&
								this.$route.name !== 'PatientList'
							) {
								this.tip.Lnspect = true;
							}
						}
					} else {
						this.$message.error(msg);
					}
				}
			},
			async getMessageQuery(min, firstAidId) {
				const n = min;
				if (this.request === n) {
					// 符合轮训条件
					console.log('十秒');
					this.request = n + 1;
					await this.handMessageQuery();
				}
			},
		},
	};
</script>
<style lang="less">
	.zhezhao {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 999;
	}

	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		// text-align: center;
		color: #2c3e50;
		background: #f6f8fa;
		height: 100%;
		position: relative;
		user-select: none;
		::-webkit-scrollbar {
			display: none;
		}
	}

	// .count-container {
	// 	width: 200px;
	// 	background: rgba(255, 255, 255, 0.1);
	// 	border: 1px solid #ffffff;
	// 	box-shadow: 0px 6px 10px 0px rgba(0, 59, 172, 0.2);
	// 	border-radius: 4px;
	// 	overflow: hidden;
	// 	backdrop-filter: blur(4px);
	// 	text-align: center;
	// 	display: flex;
	// 	flex-direction: column;
	// 	align-items: center;
	// 	padding: 16px 0;
	// 	z-index: 999;

	// 	.count-name {
	// 		font-size: 26px;
	// 		font-family: Source Han Sans CN, Source Han Sans CN-Bold;
	// 		font-weight: 700;
	// 		color: #393d4e;
	// 		line-height: 26px;
	// 		padding-bottom: 7px;
	// 	}

	// 	.van-count-down {
	// 		font-size: 44px;
	// 		font-family: Source Han Sans CN, Source Han Sans CN-Bold;
	// 		font-weight: 700;
	// 		color: #393d4e;
	// 		line-height: 44px;
	// 	}
	// }
</style>
<style lang="stylus">
	// @import './assets/portrait.styl';
	@import './assets/less/common.less';

	html {
		overflow: hidden !important;
	}

	html,
	body,
	#app {
		width: 100%;
		height: 100%;
		font-size: 1.2rem
	}

	.zhezhao .ant-spin-container {
		height: 100%
	}

	.ant-modal div[aria-hidden="true"] {
		display: none !important;
	}

	.storm {
		display: flex;
		flex: 1;

		.storm-container {
			display: flex;
			flex-direction: column;
			height: 100%;
			background: linear-gradient(180deg, #dbeaff, #fbfdff);

			.header {
				// height: 88px;
			}

			.storm-content {
				flex: 1;
				width: 100%;
				height: 100%;
				overflow-y: auto;
				display: flex;
			}
		}
	}
</style>