edu-uniapp/pages/aiCt/report.vue

<template>
	<view class="report-content">
		<view class="topinfo">
			<image style="margin: 40upx;"  src="/static/img/ai_top.png"></image>
			<view class="mark">得分：{{serverData.examMark}}</view>
		</view>
		
		<view  class="topinfos">
		  <view class="title">评 测 报 告</view>
		  <view>EVALUATION REPORT</view>
		  <view>机构名称：{{serverData.schoolName}}</view>
		  <view>姓名：{{serverData.studentName}}</view>
		  <view>科目：{{serverData.subjectName}}</view>
		  <view>时间：{{serverData.createDate}}</view>
		</view>
		<view class="ehcarts-title">测评结果等级</view>
		
		<view>
			<image style="margin: 40upx;" :src="'/static/img/' + serverData.level + '.png'"></image>
			<!-- <view>得分DSDSD</view> -->
		</view>
		
		<view class="ehcarts-title">评测分析</view>
		
		<view class="qiun-columns">
			<view >
				<view class="item">学科: {{serverData.subjectName}}</view>
				
				<view class="item">试题数量: {{serverData.questionNumber}}</view>
			</view>
			<view >	
				<view class="item">总分: 100</view>
				<view class="item">知识点: {{serverData.languagePointsNumber}}</view>
			</view>
			<view class="qiun-charts">
				<canvas canvas-id="analyse"
					id="analyse" 
					class="charts" 
					:width="cWidth * pixelRatio" 
					:height="cHeight * pixelRatio" 
					:style="{'width': cWidth + 'px', 'height' : cHeight+'px'}" 
					@touchstart="touchPie($event, 'analyse')">
				</canvas>
		    </view>
		</view> 
	    <view class="ehcarts-title">知识点掌握情况</view> 
		
		<view class="qiun-columns">
			<view class="qiun-charts3">
				<!--#ifdef MP-ALIPAY -->
			<canvas
			canvas-id="languagePintsRate"
			 id="languagePintsRate" 
			 class="charts3" 
			 :style="{'width':cWidth3*pixelRatio+'px',
			 'height':cHeight3*pixelRatio+'px', 
			 'transform': 'scale('+(1/pixelRatio)+')',
			 'position': relative, 'left': 20%,
			 'margin-top':-cHeight3*(pixelRatio-1)/2+'px'}">
			 </canvas>
				
				 
				<canvas 
				canvas-id="questionRate"
				 id="questionRate" 
				 class="charts3"
				  :style="{'width':cWidth3*pixelRatio+'px',
				  'height':cHeight3*pixelRatio+'px', 
				  'position': relative, 'left': 20%,
				  'transform': 'scale('+(1/pixelRatio)+')',
				  'margin-top':-cHeight3*(pixelRatio-1)/2+'px'}">
				  </canvas>
				<!--#endif-->
				
				<!--#ifndef MP-ALIPAY -->
				<canvas 
				canvas-id="languagePintsRate"
				style="position': relative; left: 6%"
				 id="languagePintsRate" class="charts3"></canvas>
				 
				 
				<canvas 
				canvas-id="questionRate"
				 id="questionRate" 
				 class="charts3" style="position': relative; left: 50%">
				 </canvas>
				<!--#endif-->
				
				
			</view>
			<view>
				<view class="count_item">
					<view style="color: #39B54A;">已掌握 {{serverData.graspLanguagePointsNumber}}</view>
					<view style="color: red">未掌握 {{serverData.noGraspLanguagePointsNumber}}</view>
				</view>
				
				<view class="count_item">
					<view style="color: #409eff;">答对题数 {{serverData.rightQuestionNumber}}</view>
					<view style="color: red">答错题数 {{serverData.errorQuestionNumber}}</view>
				</view>
			</view>
		</view> 
		
		<view class="ehcarts-title">{{serverData.studentName}}测评结果</view> 
		
		<view 
			v-for="(item, index) in serverData.ctLanguagePointsResponseList" 
			style="margin:10px;" 
			class="qiun-columns">
			<ai-progress 
			  :content="item.languagePointsName"
			  :lineData="true" 
			  strokeWidth="20" 
			  :textInside="true" :percentage="item.rightRate">
			 </ai-progress>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js'
	import aiProgress from '@/components/ai-progress/ai-progress.vue'
	import { mapGetters } from 'vuex'
	var _self;
	var canvasObj = {};

	export default {
		components: {aiProgress},
		data() {
			return {
				serverData: {},
				cWidth: '',
				cHeight: '',
				cWidth2: '', //横屏图表
				cHeight2: '', //横屏图表
				cWidth3: '', //圆弧进度图
				cHeight3: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
				tips: '',
				pixelRatio: 1,
				serverData: '',
				itemCount: 30, //x轴单屏数据密度
				sliderMax: 50
			}
		},
		
		computed: {
			...mapGetters({
				studentId: 'paper/getStudentId'
			})
		},
		onLoad() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.cWidth2 = uni.upx2px(700);
			this.cHeight2 = uni.upx2px(1100);
			this.cWidth3 = uni.upx2px(250);
			this.cHeight3 = uni.upx2px(250);
			this.arcbarWidth = uni.upx2px(24);
			this.gaugeWidth = uni.upx2px(30);

            this.getCtTestReport() 
			//this.fillData(Data);
		},
		
		/* onReady() {
			this.getServerData();
		}, */
		
		methods: {
			
		  getCtTestReport () {
			let params = {
			    studentId: this.studentId
			}
			this.$httpApi.get('/front/aiCt/getCtTestReport', params)
			   .then(response => {
				    this.serverData = response.data
				    // 记载测评分析图表
				    let ctLanguagePointsResponseList = this.serverData.ctLanguagePointsResponseList
					this.loadAnalyseReport(ctLanguagePointsResponseList)
					let graspLanguagePointsNumber = this.serverData.graspLanguagePointsNumber
					let noGraspLanguagePointsNumber = this.serverData.noGraspLanguagePointsNumber
					let languagePintsSeries = [
						{
							"name": "知识点掌握",
							"data": graspLanguagePointsNumber / (graspLanguagePointsNumber + noGraspLanguagePointsNumber),
							"color": "#f04864"
						}
					]
					
					this.loadLanguagePintsReport(languagePintsSeries)
					
					let rightQuestionNumber = this.serverData.rightQuestionNumber
					let errorQuestionNumber = this.serverData.errorQuestionNumber
					let questionSeries = [
						{
							"name": "准确率",
							"data": rightQuestionNumber / (rightQuestionNumber + errorQuestionNumber),
							"color": "#f04864"
						}
					]
					
					this.loadQuestionRateReport(questionSeries)
					
			   }) 
		  },  
		  
		  loadAnalyseReport (ctLanguagePointsResponseList) {
			  let languagePointsList = []
			  ctLanguagePointsResponseList.forEach(item => {
			  	// languagePointsNameArray.push(item.languagePointsName)
			  	languagePointsList.push({
			  		data: item.languagePointsQuestionNumber,
			  		name: item.languagePointsName
			  	})
			  })
			  
			  let options = {
			  	series: []
			  }
			  options.series = languagePointsList;
			  this.showPie("analyse", options);
		  },
		  
		  loadLanguagePintsReport (data) {
			  let options = {
				series: data
			  }
			  this.showArcbar('languagePintsRate', options);
		  },
		  
		  loadQuestionRateReport (data) {
			  let options = {
			  	series: data
			  }
			  this.showArcbar('questionRate', options);
		  },
		  
		
		showPie(canvasId, chartData) {
			canvasObj[canvasId] = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'pie',
				fontSize: 11,
				padding:[15,15,0,15],
				legend:{
					show:true,
					padding:5,
					lineHeight:11,
					margin:0,
				},
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				series: chartData.series,
				animation: false,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				dataLabel: true,
				extra: {
					pie: {
						lableWidth: 15
					}
				},
			})
		},
		
		showRadar(canvasId, chartData) {
			canvasObj[canvasId] = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'radar',
				fontSize: 11,
				padding:[15,15,0,15],
				legend:{
					show:true,
					padding:5,
					lineHeight:11,
					margin:0,
				},
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				animation: false,
				dataLabel: true,
				categories: chartData.categories,
				series: chartData.series,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					radar: {
						max: 200 //雷达数值的最大值
					}
				}
			})
		},
		
		showArcbar(canvasId, chartData) {
			new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'arcbar',
				fontSize: 11,
				title: {
					name: Math.round(chartData.series[0].data * 100) + '%',
					color: chartData.series[0].color,
					fontSize: 25 * _self.pixelRatio
				},
				subtitle: {
					name: chartData.series[0].name,
					color: '#666666',
					fontSize: 15 * _self.pixelRatio
				},
				extra: {
					arcbar: {
						type: 'default',
						width: _self.arcbarWidth * _self.pixelRatio, //圆弧的宽度
					}
				},
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				series: chartData.series,
				animation: false,
				width: _self.cWidth3 * _self.pixelRatio,
				height: _self.cHeight3 * _self.pixelRatio,
				dataLabel: true,
			})
		},
		
		showArcbar2(canvasId, chartData) {
			new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'arcbar',
				fontSize: 11,
				title: {
					name: Math.round(chartData.series[0].data * 100) + '%',
					color: chartData.series[0].color,
					fontSize: 25 * _self.pixelRatio
				},
				subtitle: {
					name: chartData.series[0].name,
					color: '#666666',
					fontSize: 15 * _self.pixelRatio
				},
				extra: {
					arcbar: {
						type: 'default',
						width: _self.arcbarWidth * _self.pixelRatio, //圆弧的宽度
						backgroundColor: '#ffe3e8',
						startAngle: 1.25,
						endAngle: 0.75
					}
				},
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				series: chartData.series,
				animation: false,
				width: _self.cWidth3 * _self.pixelRatio,
				height: _self.cHeight3 * _self.pixelRatio,
				dataLabel: true,
			})
		},
		
		
		changeData() {
			canvasObj['canvasColumn'].updateData({
				series: _self.serverData.ColumnB.series,
				categories: _self.serverData.ColumnB.categories
			})
		},
					
					
		touchPie(e,id) {
			canvasObj[id].showToolTip(e, {
				  format: function(item) {
					  return item.name + ':' + item.data
				  }
			  })
		    },
		}
	}
</script>

<style>
	.count_item {
		display: inline-block;
		width: 40%;
		margin-left: 9%;
		margin-top: 10px;
	}
	.topinfos {
		margin: 20px auto;
	  padding: 10px 0 20px;
	  display: flex;
	  background-color: #ed2828;
	  color: #fff;
	  justify-content: center;
	  align-items: center;
	  flex-direction: column;
	}
	.report-content {
		width: 100%;
		height: 100%;
		
	}
	.mark {
		position: relative;
		right: 4%;
		text-align: center;
		font-size: 24px;
		font-weight: 700;
	}
	.ehcarts-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32upx;
		color: white;
		padding: 30upx 30upx 30upx 50upx;
		margin-top: 20upx;
		width: 100%;
		position: relative;
		background-color:  #FF9966;
		border-bottom: 1px  #FF9966 solid
	}
	
	.qiun-columns .item {
		/* width: 20upx; */
		display: inline-block;
		float: left;
		margin-top: 20upx;
		margin-bottom: 20upx;
		margin-left: 50upx;
	}
	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	/* 通用样式 */
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	/* 横屏样式 */
	.qiun-charts-rotate {
		width: 700upx;
		height: 1100upx;
		background-color: #FFFFFF;
		padding: 25upx;
	}

	.charts-rotate {
		width: 700upx;
		height: 1100upx;
		background-color: #FFFFFF;
	}

	/* 圆弧进度样式 */
	.qiun-charts3 {
		width: 750upx;
		height: 250upx;
		background-color: #FFFFFF;
		position: relative;
	}

	.charts3 {
		position: absolute;
		width: 250upx;
		height: 250upx;
		background-color: #FFFFFF;
	}

	.qiun-tip {
		display: block;
		width: auto;
		overflow: hidden;
		padding: 15upx;
		height: 30upx;
		line-height: 30upx;
		margin: 10upx;
		background: #ff9933;
		font-size: 30upx;
		border-radius: 8upx;
		justify-content: center;
		text-align: center;
		border: 1px solid #dc7004;
		color: #FFFFFF;
	}
</style>