psy_web_share/newScale/Sleep/testResult.vue

<template>
	<view class="bg">
		<view class="process"></view>
		<view class="scale_name">测测你的睡眠质量吧！</view>
		<view class="test_time">测试时间：{{time}}</view>
		<view class="role_img">
			<image v-if="roleList[role]" :src="roleList[role].img" mode="widthFix"></image>
		</view>
		<view class="result_box">
			<view class="container100">
				<echarts class="my_echarts" ref="echarts" :option="option" canvasId="echartsT"></echarts>
				<view class="score_tips">注：得分越高，睡眠质量越差</view>
			</view>
			<view class="role_name">
				<image v-if="roleList[role]" :src="roleList[role].title" mode="widthFix"></image>
			</view>
			<view class="result_box_r">
				<view style="overflow: hidden;"></view>
				<view class="score_title">分析报告：</view>
				<view class="sm_box">
					<view class="c_item" v-for="item in (segmentation(explain))">
						<view class="list_style_bg"></view>
						<text style="flex: 1;">{{item}}</text>
					</view>
				</view>
				<!-- <template v-if="improvementSuggestions != '无'">
					<view class="score_title">建议：</view>
					<view class="sm_box">
						{{improvementSuggestions}}
					</view>
				</template> -->
			</view>
			<view class="result_box_bottom"></view>
		</view>
		<view class="report_desc">
			<view class="desc_title">报告阅读说明</view>
			<view class="stext">谢谢您的参与，阅读本报告时，请注意以下内容:</view>
			<view style="display: flex;">
				<view class="list_mark">·</view>
				<view class="desc_txt">本结果仅供参考，不可作为临床诊断的依据；</view>
			</view>
			<view style="display: flex;">
				<view class="list_mark">·</view>
				<view class="desc_txt">如对报告有不理解的地方，建议咨询专业人员；</view>
			</view>
			<view style="display: flex;">
				<view class="list_mark">·</view>
				<view class="desc_txt">如结果与你自己或他人的感受有出入，可回忆在测试时是否有事情影响到你，或自己回答时是否有所顾虑。</view>
			</view>
		</view>
	</view>
</template>

<script>
	import echarts from "@/components/echarts-uniapp/echarts-uniapp.vue"
	import {
		getRecordById
	} from "@/api/index.js";
	import {
		photoUrl
	} from "@/common/config.js"
	import {
		getTestTime
	} from "@/utils/util.js"
	const photoUrls = `${photoUrl}api/show?filePath=./webo`
	export default {
		components: {
			echarts
		},
		data() {
			return {
				isChecked: true,
				isShake: false,
				scaleDetail: {},
				questionList: [],
				currentQuestion: {},
				currentAnswerList: [],
				currentIndex: 0,
				userAnswerList: [],
				resultId: '',
				isLoading: false,
				isDisbale: false,
				roleList: {
					'睡眠质量较好': {
						title: `${photoUrls}/Sleep/role/title1.png`,
						img: `${photoUrls}/Sleep/role/role1.png`,
						starNum: 2
					},
					'睡眠质量很好': {
						title: `${photoUrls}/Sleep/role/title2.png`,
						img: `${photoUrls}/Sleep/role/role2.png`,
						starNum: 4
					},
					'睡眠质量一般': {
						title: `${photoUrls}/Sleep/role/title3.png`,
						img: `${photoUrls}/Sleep/role/role3.png`,
						starNum: 3
					},
					'睡眠质量很差': {
						title: `${photoUrls}/Sleep/role/title4.png`,
						img: `${photoUrls}/Sleep/role/role4.png`,
						starNum: 1
					}
				},
				resultId: '',
				role: '',
				explain: '',
				improvementSuggestions: '',
				scoreNum: 0,
				time: '',
			}
		},
		computed: {
			option() {
				return {
					series: [{
						type: 'gauge',
						startAngle: 180,
						endAngle: 0,
						center: ['50%', '77%'],
						radius: '100%',
						min: 0,
						max: 54,
						splitNumber: 3,
						axisLine: {
							lineStyle: {
								width: 14,
								color: [
									[0.22, '#7CFFB2'],
									[0.48, '#58D9F9'],
									[0.74, '#FDDD60'],
									[1, '#FF6E76']
								]
							}
						},
						pointer: {
							icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
							length: '12%',
							width: 10,
							offsetCenter: [0, '-60%'],
							itemStyle: {
								color: 'auto'
							}
						},
						axisTick: {
							length: 12,
							lineStyle: {
								color: 'auto',
								width: 2
							}
						},
						splitLine: {
							length: 10,
							lineStyle: {
								color: 'auto',
								width: 2
							}
						},
						// axisLabel: {
						// 	color: '#464646',
						// 	fontSize: 20,
						// 	distance: -60,
						// 	rotate: 'tangential',
						// 	formatter: function(value) {
						// 		if (value === 0.875) {
						// 			return 'Grade A';
						// 		} else if (value === 0.625) {
						// 			return 'Grade B';
						// 		} else if (value === 0.375) {
						// 			return 'Grade C';
						// 		} else if (value === 0.125) {
						// 			return 'Grade D';
						// 		}
						// 		return '';
						// 	}
						// },
						title: {
							offsetCenter: [0, '-10%'],
							fontSize: 20
						},
						detail: {
							fontSize: 30,
							offsetCenter: [0, '-35%'],
							valueAnimation: true,
							formatter: function(value) {
								return Math.round(value) + '';
							},
							color: 'inherit'
						},
						data: [{
							value: this.scoreNum,
							name: '得分'
						}]
					}]
				};
			}
		},
		onLoad(options) {
			if (options && options.resultId) {
				this.resultId = options.resultId
				this.getScaleTestResults(this.resultId);
			}
		},
		methods: {
			getScaleTestResults(id) {
				let _this = this;
				_this.$request
					.get({
						url: `${getRecordById}?id=${id}`,
						loadingTip: "加载中...",
						data: {},
					})
					.then(
						(res) => {
							console.log('222:', new Date().getTime());
							console.log("----测试结果--->", res);
							if (res.code == 200) {
								_this.testResult = JSON.parse(res.data?.userRecordEntity?.testResult)[0];
								_this.role = _this.testResult.newTableContext.result[0].symptom;
								_this.explain = _this.testResult.newTableContext.result[0]
									.improvementSuggestions;
								_this.improvementSuggestions = _this.testResult.newTableContext.result[0]
									.suggestion;
								_this.scoreNum = _this.testResult.newTableContext.result[0].score;
								this.time = getTestTime(res.data.userRecordEntity.testDate)
							} else if (res.code == 401) {} else {
								(res) => {
									console.log("世界上绝对绝对绝对绝对绝对的", res);
								}
							}
						})
			},
			getNameUrl() {
				console.log(`${photoUrls}/Sleep/role/role_name1.png`)
				return `${photoUrls}/Sleep/role/role_name1.png`
			},
			segmentation(str) {
				return str.split('\n');
			}
		}
	}
</script>

<style scoped>
	.bg {
		width: 100%;
		min-height: 1524rpx;
		padding-bottom: 100rpx;
		background: #223255 url(https://test.jue-ming.com:8849/api/show?filePath=./webo/Sleep/test_result_bg.png) no-repeat top;
		background-size: 100% auto;
	}

	.role_name {
		width: 454rpx;
		position: absolute;
		top: -50rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.role_name image {
		width: 100%;
	}

	.role_img {
		width: 469rpx;
		margin: 20rpx auto 0;
	}

	.role_img image {
		width: 100%;
	}

	.result_box {
		width: 706rpx;
		min-height: 548rpx;
		padding-top: 100rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/Sleep/result_bg_top.png) no-repeat top;
		background-size: 100% auto;
		margin: -100rpx auto 0;
		border-radius: 33rpx;
		position: relative;
	}

	.result_box_bottom {
		width: 100%;
		height: 90rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/Sleep/result_bg_bottom.png) no-repeat;
		background-size: 100% 100%;
	}

	.c_item {
		display: flex;
		align-items: flex-start;
		text-align: justify;
		letter-spacing: 2px;
		margin-bottom: 16rpx;
	}

	.list_style_bg {
		width: 41rpx;
		height: 46rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/Sleep/list_style_bg.png) no-repeat center;
		background-size: 100% auto;
		margin: 4rpx 8rpx 0 0;
	}

	.role_medal {
		position: absolute;
		right: 50rpx;
		top: 0;
	}

	.role_medal image {
		width: 155rpx;
	}

	.result_box_r {
		box-sizing: border-box;
		width: 100%;
		min-height: 283rpx;
		padding: 0 26rpx;
		background: #FFFFFF;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 32rpx;
		color: #333333;
		line-height: 46rpx;
	}

	.score_title {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 36rpx;
		color: #471705;
		line-height: 31rpx;
		margin: 36rpx 0 36rpx 5rpx;
	}

	.score_num {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: bold;
		font-size: 81rpx;
		color: #FF9C00;
		line-height: 51rpx;
		/* text-stroke: 4px #FFFFFF;
		background: linear-gradient(269deg, #FF443D 0%, #FF9C00 100%);
		-webkit-text-stroke: 4px #FFFFFF;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent; */
		margin: 12rpx 0 7rpx 156rpx;
	}

	.score_percentage {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 420rpx;
		height: 46rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/Sleep/score_percentage_bg.png) no-repeat center;
		background-size: cover;
		margin: 14rpx 0 8rpx 72rpx;
	}

	.score_wrap {
		width: 318rpx;
		height: 32rpx;
		margin: 0 0 0 12rpx;
		position: relative;
		overflow-x: hidden;
		border-radius: 25rpx;
	}

	.process {
		overflow: hidden;
	}

	.process_bar {
		width: 318rpx;
		position: absolute;
		left: -100rpx;
	}

	.score_text {
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		font-size: 18rpx;
		color: #FFFFFF;
		line-height: 16rpx;
		margin-right: 16rpx;
	}

	.sm_box {
		box-sizing: border-box;
		width: 100%;
		padding: 30rpx 24rpx;
		background: #FFF4E5;
		border-radius: 20rpx;
		border: 1px solid #F8C983;
		text-align: justify;
	}

	.report_desc {
		padding: 60rpx 38rpx;
		letter-spacing: 1px;
	}

	.desc_title {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 36rpx;
		color: #ffffff;
		line-height: 46rpx;
	}

	.stext {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 20rpx;
		color: #ffffff;
		line-height: 30rpx;
	}

	.desc_txt {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 24rpx;
		color: #ffffff;
		line-height: 36rpx;
	}

	.list_mark {
		line-height: 0.7;
		font-size: 36rpx;
		color: #ffffff;
		font-weight: 600;
		margin-right: 5rpx;
	}

	.scale_name {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: bold;
		font-size: 42rpx;
		color: #FFFFFF;
		margin: 48rpx 0 0 39rpx;
	}

	.test_time {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 28rpx;
		color: #ffffff;
		margin-left: 39rpx;
	}

	.star_wrap {
		text-align: center;
	}

	.star_wrap image {
		width: 34rpx;
		margin: 8rpx;
	}


	.container100 {
		width: 100%;
		height: 356rpx;
		background: #FFFFFF;
		position: relative;
	}

	.my_echarts {
		width: 356rpx;
		height: 356rpx;
		margin: 0 auto;
	}

	.score_tips {
		font-size: 24rpx;
		color: #F8C983;
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%)
	}

	.container100 {
		width: 100%;
		height: 100%;
	}
</style>