carbasics2023_web_pad_v4/src/views/thrombolysis/components/throm-before3.vue

<template>
	<div class="throm-before3">
		<a-card style="width:100%" :tab-list="tabList" :active-tab-key="activeTabKey"
			@tabChange="key => onTabChange(key, 'key')">
			<div class="image-container" v-if="activeTabKey == 'tab1'">
				<throm-interfere-image-dcm></throm-interfere-image-dcm>
			</div>
			<div class="image-container" v-else-if="activeTabKey == 'ct'">
				<template v-if="fileList && fileList.length">
					<div class="image-box" v-for="(img, index) in fileList">
						<img :src="'http://116.204.114.73:20007'+ img" :alt="'ct'+index" />
					</div>
				</template>

				<div class="emtpy" v-else>
					<a-empty :image="emptyImage" description="暂无数据" />
				</div>
			</div>
		</a-card>
		<div class="btns " v-if="!outside">
			<w-upload @ok="handleUpload" btn-type="button" btn-text="上传院前CT图片" style="margin-bottom: 1rem; "
				v-if="fileList.length < 5" />

			<a-button :disabled="writeAble" class="common-button" block type="primary" size="large"
				@click="onSubmit">下一步</a-button>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		apiUrl
	} from '@/config/setting.js';
	import emptyImage from '@/assets/images/slice/empty.png'
	import ThromInterfereImageDcm from './throm-interfere-image-dcm.vue'
	import WUpload from '@/components/w-upload/w-upload.vue'
	import {
		queryFirstAidInspectData,
		queryVideo
	} from 'api';
	export default {
		name: 'ThromBefore3',
		data() {
			return {
				apiUrl,
				emptyImage,
				activeTabKey: 'tab1',
				previewVisible: false,
				previewImage: '',
				fileList: [],
				list: [],
				tabList: [{
						key: 'tab1',
						tab: '影像',
					},
					// {
					// 	key: 'tab2',
					// 	tab: '影像2',
					// },
					// {
					// 	key: 'tab3',
					// 	tab: '影像3',
					// },
					{
						key: 'ct',
						tab: '院前CT(0张)',
					},
				],
			}
		},
		props: ['outside'],
		components: {
			ThromInterfereImageDcm,
			WUpload
		},
		computed: {
			...mapState('patient', ['patientData', 'writeAble']),
		},
		mounted() {
			const {
				recordValDict
			} = this.patientData;
			if (recordValDict) {
				this.$nextTick(() => {
					this.echo(recordValDict);
				});
			}
		},
		created() {
			this.queryVideo()
		},
		methods: {
			echo(data) {
				if (data['JMRS-YQ-CT']) {
					const {
						answer
					} = data['JMRS-YQ-CT'][0];
					this.fileList = answer;
				}
			},
			del(index) {
				if (this.writeAble) {
					this.$message.success('患者已审核，内容不可更改')
					return
				}
				this.fileList.splice(index, 1);
			},
			handleCancel() {
				this.previewVisible = false;
			},
			async handlePreview(path) {
				this.previewImage = path;
				this.previewVisible = true;
			},
			async queryVideo() {
				const res = await queryVideo({
					firstAidId: this.patientData.firstAidId,
					type: 0
				})
				// let res = await queryFirstAidInspectData({
				// 	firstAidId: this.patientData.firstAidId
				// });
				const {
					data,
					code,
					msg
				} = res;
				if (code === 200) {
					// this.setVideo(data.list);
					this.list = data.list
				}
			},
			handleUpload({
				name,
				url
			}) {
				console.log('upload end', 'http://116.204.114.73:20007' + url) //_doc/upload/
				this.fileList.push(url);
				const index = this.tabList.findIndex(a => a.key == 'ct')
				this.tabList[index].tab = `院前CT (${this.fileList.length}张)`
			},
			openCamera() {
				if (this.writeAble) {
					this.$message.success('患者已审核，内容不可更改')
					return
				}
				// if (!window.plus) {
				//     // H5 环境中不使用 `plus` API
				// 	this.$message.success('当前环境不支持 plus API')
				// 	return
				//     // console.log('当前环境不支持 plus API');
				// }
				const cmr = plus.camera.getCamera();
				if (!cmr) {
					this.$message.success('没有可用的摄像头');
					return;
				}
				const res = cmr.supportedImageResolutions.length > 0 ? cmr.supportedImageResolutions[0] : {
					width: 640,
					height: 480
				}; // 默认分辨率;
				const fmt = cmr.supportedImageFormats.length > 0 ? cmr.supportedImageFormats[0] : 'jpeg';
				if (!res || !fmt) {
					plus.nativeUI.toast('摄像头不支持该格式或分辨率');
					return;
				}
				// const res = cmr.supportedImageResolutions[0];
				// const fmt = cmr.supportedImageFormats[0];
				cmr.captureImage(
					(path) => {
						plus.io.resolveLocalFileSystemURL(
							path,
							(entry) => {
								//压缩图片
								this.compressImage(entry.toLocalURL(), entry.name);
							},
							(e) => {
								plus.nativeUI.toast(
									'读取拍照文件错误：' + e.message
								);
							}
						);
					},
					(error) => {
						// alert("Capture image failed: " + error.message);
					}, {
						resolution: res,
						format: fmt,
						filter: 'image',
					}
				);
			},
			//压缩图片
			compressImage(url, filename) {
				var name = '_doc/upload/' + filename;
				plus.zip.compressImage({
						src: url, //src: (String 类型 )压缩转换原始图片的路径
						dst: name, //压缩转换目标图片的路径
						quality: 90, //quality: (Number 类型 )压缩图片的质量.取值范围为1-100
						overwrite: true, //overwrite: (Boolean 类型 )覆盖生成新文件
						width: '250',
						height: '320',
					},
					(zip) => {
						//页面显示图片
						this.showPics(zip.target, name);
					},
					(error) => {
						plus.nativeUI.toast('压缩图片失败，请稍候再试');
					}
				);
			},
			onFileChange(event) {
				const file = event.target.files[0];
				if (file) {
					// 处理图片文件
					this.compressImage(file);
				}
			},
			//显示图片
			showPics(url, name) {
				let _this = this;
				//根据路径读取到文件
				plus.io.resolveLocalFileSystemURL(url, (entry) => {
					entry.file((file) => {
						var fileReader = new plus.io.FileReader();
						fileReader.readAsDataURL(file);
						fileReader.onloadend = (e) => {
							var picUrl = e.target.result.toString();
							this.uploadBase64(picUrl, file.name);
						};
					});
				});
			},
			// 上传成功回
			async uploadBase64(base64, fileName) {
				if (!base64) return '您还未选择图片';
				let res = await uploadBase64({
					base64,
					fileName,
				});
				const {
					realPath,
					code,
					msg
				} = res;
				if (code === 200) {
					this.fileList.push(realPath);
					const index = this.tabList.findIndex(a => a.key == 'ct')
					this.tabList[index].tab = `院前CT (${this.fileList.length}张)`
				} else {
					this.$message.error(res.msg);
				}
			},
			async onSubmit(e) {
				e.preventDefault();
				let codeAndAnswerList = [];
				codeAndAnswerList.push({
					questionCode: 'JMRS-YQ-CT',
					answer: this.fileList,
					time: '',
				});
				await this.home.updateAidCode({
					codeAndAnswerList,
				}, false);
				this.$emit('next')
			},
			onTabChange(key, type) {
				this.activeTabKey = key;
			},

		}
	}
</script>

<style lang="less" scoped>
	.throm-before3 {
		.image-container {
			min-height: 30vh;

			.notImg {
				background-color: #000000;
				color: #ffffff;
				text-align: center;
				line-height: 40vh;
				font-size: 2rem;
			}

			.emtpy {
				height: 30vh;
				display: flex;
				justify-content: center;
				align-items: center;

			}

			.image-box {
				padding: .5rem;
				box-sizing: border-box;

				img {
					width: 100%;
					height: 100%;
				}
			}

		}

		.btns {
			// margin-top: 2rem;
		}
	}
</style>

<style lang="less">
	.throm-before3 {
		.ant-empty-description {
			color: #AAAAAA;
		}
	}
</style>