edu-uniapp/pages/aiCt/ctReport.vue

<template>
	<view class="report-content">
		<view class="topinfo">
			<image style="position: relative; left: 7%;"  src="/static/img/ct.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>用时：{{serverData.examTime}}</view>
		</view>
		<view class="ehcarts-title">测评结果等级</view>
		
		<view>
			<image 
			  v-if="serverData.level"
			  style="width: 100%; height: 360upx; 30px" 
			  :src="'/static/img/' + serverData.level + '.png'"></image>
			<view class="min_title">
			   根据教育部《关于普通高中学业水平考试的实施意见》
			  （教基二[2014]10号）所给的标准，以等级呈现成绩，
               位次由高到低为A至E等级。其中A等级15%，B等级30%，C等级30%，D、E等级共25%，
			   智能提分系统参照此文件，在义务教育阶段同等适用。
			</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">
					<!-- 39B54A-->
					<view style="color: #98eac2; padding-left: 50px;">已掌握 {{serverData.graspLanguagePointsNumber}}</view>
					<view style="color: #F19192;padding-left: 50px;">未掌握 {{serverData.noGraspLanguagePointsNumber}}</view>
				    <view class="tip" v-html="serverData.languagePointsRateDiffer" style="padding-left: 30upx;">
					</view>
				</view>
				
				<view class="count_item">
					<view style="color: #77ABDF;padding-left: 22px;">答对题数 {{serverData.rightQuestionNumber}}</view>
					<view style="color: #F19192;padding-left: 22px;">答错题数 {{serverData.errorQuestionNumber}}</view>
					<view class="tip " v-html="serverData.rightQuestionRateDiffer">
					</view>
				</view>
			</view>
		</view> 
		
		<view class="ehcarts-title">测评结果</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 style="margin: 15upx;">
				 <view @click="showMsg" class="icons_item">
				   <uni-icons type="eye" size="20"></uni-icons>
				 知识点视频</view>
				 <view @click="showMsg" class="icons_item">
				   <uni-icons type="compose" size="20"></uni-icons>
				 推荐学习路径1</view>
				 <view @click="showMsg" class="icons_item">
				   <uni-icons type="compose" size="20"></uni-icons>
				 推荐学习路径2</view>
			 </view>
			 
		</view>
		
	    <view class="ehcarts-title">答题详情</view> 
		
		<view style="background: #fff;" class="page">
		    <!-- <page-head :title="title"></page-head> -->
		    <view class="uni-list">
				<!-- <view style="margin-top: 10upx;margin-left: 20upx;">总答题：10  总答题：10  总答题：10</view> -->
		        <view>
					<view class="question_count_item">总答题{{serverData.questionNumber}}题</view>
					<view style="color: #1ddceb" class="question_count_item">答对{{serverData.rightQuestionNumber}}题</view>
					<view style="color: #eb2a17" class="question_count_item">答错{{serverData.errorQuestionNumber}}题</view>
				</view>
				<block 
				 v-for="(item,index) in serverData.studentQuestionAnswerList"
				 :key="index">
		            <view class="uni-list-cell" hover-class="uni-list-cell-hover">
		                <view class="uni-triplex-row">
		                    <view class="uni-triplex-left">
								<uni-tag
								 :text="item.questionName" 
								 type="error" :circle="true">
								</uni-tag>
		                        <!-- <text class="uni-title uni-ellipsis">
								{{item.questionName}}
								</text> -->
								<uParse :content="item.content" />
		                       <!-- <text class="uni-text" v-html="item.content"></text> -->
								<!-- 判断题 -->
		                        <view v-if="item.question_type === 6" class="uni-padding-wrap">
								   <view style="margin-top: 10upx;">
									    <label class="radio">
										   <radio 
										      value="1" 
											  :checked="item.userInfoAnswer === '1'"
											  :disabled="true"/>对
										</label>
								   </view>
								   <view style="margin-top: 10upx;">
										<label >
										<radio value="0" 
										  :disabled="true" 
										  :checked="item.userInfoAnswer === '0'"
										  class="radio" />错</label>
								   </view>
		                        </view>
								<!-- 单项选择题 -->
								<view v-if="item.question_type === 3" class="uni-padding-wrap">
								   <view 
								   v-for="(subItem, index) in item.options" 
								   :key="index" style="margin-top: 10upx;">
									    <label class="radio">
										   <radio 
										   :value="subItem.value" 
										   :disabled="true"
										   :checked="item.userInfoAnswer === subItem.value"
										    />{{subItem.option}} 
										</label>
								   </view>
								</view>
								
								<!-- 多项选择题 -->
								<view v-if="item.question_type === 4" class="uni-padding-wrap">
								   <view 
								     v-for="(subItem, index) in item.options" 
								    :key="index" style="margin-top: 10upx;">
									    <label class="radio">
										   <checkbox 
										   :disabled="true"
										   :value="subItem.value"
										   :checked="subItem.checked" />{{subItem.option}}
										</label>
								   </view>
								</view>
								
								<text 
								 v-if="item.question_type === 6 && item.userInfoAnswer === '1'"
								 class="uni-ellipsis">你的答案: 对</text>
								 <text
								 v-else-if="item.question_type === 6 && item.userInfoAnswer === '0'"
								  class="uni-ellipsis">你的答案: 错</text>
								  <text
								  v-else
								  class="uni-ellipsis">你的答案: {{item.userInfoAnswer | parserAnswer}}</text>
								  
								<text
								 v-if="item.question_type === 6 && item.answer === '1'"
								 class="uni-ellipsis">正确答案: 对</text>
								<text
								 v-else-if="item.question_type === 6 && item.answer === '0'"
								 class="uni-ellipsis">正确答案: 错</text>
								 <text
								  v-else
								  class="uni-ellipsis">正确答案: {{item.answer | parserAnswer}}</text>
								
								<text class="uni-ellipsis">解析:</text>
								<uParse :content="item.analysis" />
								<!-- <text v-html="item.analysis" class="uni-ellipsis"></text> -->
		                    </view>
		                </view>
		            </view>
		        </block>
		    </view>
		</view>
	     <view class="ai_btn">
	     	<button
			 @click="showMsg"
	     	 class="ai_btn_item"
	     	 type="warn">自主学习</button>
	     	 
	     	<button 
			 @click="showMsg"
	     	 type="primary"
	     	 class="ai_btn_item">继续测评报告点</button>
			 
			 <button
			  @click="saveImage"
			  type="primary"
			  class="ai_btn_item">保存图片</button>
	     </view>
	</view>
</template>

<script>
	//import html2canvas from 'html2canvas';
	import uniTag from '@/components/uni-tag/uni-tag.vue'
	import uCharts from '@/components/u-charts/u-charts.js'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import aiProgress from '@/components/ai-progress/ai-progress.vue'
	import uParse from '@/components/uParse/src/wxParse.vue'
	import { mapGetters } from 'vuex'
	var _self;
	var canvasObj = {};

	export default {
		components: {aiProgress, uniIcons, uniTag, uParse},
		data() {
			return {
				examInfoId: null,
				title: 'list-triplex-row',
				lists: [],
				serverData: {},
				cWidth: '',
				cHeight: '',
				cWidth2: '', //横屏图表
				cHeight2: '', //横屏图表
				cWidth3: '', //圆弧进度图
				cHeight3: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
				tips: '',
				pixelRatio: 1,
				serverData: '',
				itemCount: 30, //x轴单屏数据密度
				sliderMax: 50
			}
		},
		
		computed: {
			...mapGetters({
				studentId: 'paper/getStudentId'
			})
		},
		onLoad(params) {
			//if (params.studentId) {
				let studentIdValue = parseInt(params.studentId)
				// alert(studentIdValue)
				if (studentIdValue) {
					this.$store.commit('paper/updateStudentId', studentIdValue)
				}
				if (params.examInfoId) {
					this.examInfoId = parseInt(params.examInfoId)
				}
				
			//}
			/* if (!this.studentId) {
				let studentIdValue = parseInt(params.studentId) 
				this.$store.commit('paper/updateStudentId', studentIdValue)
				// this.studentId = studentIdValue 
			} */
			let list = [];
			for (let i = 0; i < 5; i++) {
			    list.push(i)
			}
			this.lists = list
			_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: {
			
			/* saveImage () {
				
				html2canvas(document.querySelector("#test"))
				.then(canvas => {
				
				
					 //document.body.appendChild(canvas);
					 let imgUrl = canvas.toDataURL("image/png");
					 alert(imgUrl)
					 let saveA = document.createElement("a");
					//document.body.appendChild(canvas);
					saveA.href = imgUrl;
					saveA.download = "zspic" + (new Date).getTime();
					saveA.target = "_blank";
					saveA.click();
					
				
				});
			}, */
			
			showMsg () {
				uni.showToast({
					icon: 'none',
					title: '请与当地加盟校联系开通即可享受服务'
				})
			},
			
		    getCtTestReport () {
			let params = {
			    studentId: this.studentId,
				examInfoId: this.examInfoId
			}
			this.$httpApi.get('/front/aiCt/getCtTestReport', params)
			   .then(response => {
				    this.serverData = response.data
			        let studentQuestionAnswerList = this.serverData.studentQuestionAnswerList
				    if (studentQuestionAnswerList !== null && studentQuestionAnswerList.length > 0) {
						studentQuestionAnswerList.forEach(item => {
							// 多选题
							if (item.question_type === 4) {
								let optionList = item.options
								let userInfoAnswer = item.userInfoAnswer
								/* let userInfoAnswerArray = []
								if (userInfoAnswer) {
									userInfoAnswer.split(',').forEach(value => {
										if (value) {
											userInfoAnswerArray.push(value)
										}
									})
								} */
								optionList.forEach(option => {
									let value = option.value
									option.checked = false
									if (userInfoAnswer.length > 0) {
										userInfoAnswer.forEach(answer => {
											if (answer === value) {
												option.checked = true
											}
										})
									} 
								}) 
							}
						})
					}
					// 记载测评分析图表
				    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": "#7ee1c4"
						}
					]
					
					this.loadLanguagePintsReport(languagePintsSeries)
					
					let rightQuestionNumber = this.serverData.rightQuestionNumber
					let errorQuestionNumber = this.serverData.errorQuestionNumber
					let questionSeries = [
						{
							"name": "准确率",
							"data": rightQuestionNumber / (rightQuestionNumber + errorQuestionNumber),
							"color": "#409eff"
						}
					]
					
					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.showArcbar2('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: {
						backgroundColor: '#C2F8EB',
						type: 'circle', //整圆类型进度条图
						width: _self.arcbarWidth * _self.pixelRatio, //圆弧的宽度
						startAngle: 0.5 //整圆类型只需配置起始角度即可
					}
				},
				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: {
						backgroundColor: '#50e1c2',
						type: 'circle', //整圆类型进度条图
						width: _self.arcbarWidth * _self.pixelRatio, //圆弧的宽度
						startAngle: 0.5 //整圆类型只需配置起始角度即可
					}
				},
				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
				  }
			  })
		    },
		},
		
		filters: {
			parserAnswer(answer) {
				if (answer) {
					if (answer instanceof Array) {
						let answerStr = ''
						answer.forEach(item => {
							answerStr += item + ","
						})
						return answerStr.substr(0, answerStr.length - 1)
					}
					return answer
				}
				return '未作答'
			}
		}
	}
</script>
<style scoped>
	.uni-tag {
		width: 30%
	}
</style>
<style>
	.icons_item {
		font-size: 30upx;
		margin-top: 10upx;
		margin-left: 10upx;
		color: red;
		width: 265upx;
		float: left;
		display: inline-block;
	}
	.uni-text-small {
		font-size:24upx;
	}
	/* page */
	.uni-h5 {font-size: 28upx; color: #8f8f94;}
	/* 文本溢出隐藏 */
	.uni-ellipsis {
		overflow: hidden;
		white-space: nowrap;
		margin-top: 15upx;
		color: #999999;
		text-overflow: ellipsis;
	}
	.uni-page-head{
		padding:35upx;
		text-align: center;
	}
	.question_count_item {
		width: 30%;
		margin: 12upx;
		display: inline-block;
	}
	.uni-page-head-title {
		display: inline-block;
		padding: 0 40upx;
		font-size: 30upx;
		height: 88upx;
		line-height: 88upx;
		color: #BEBEBE;
		box-sizing: border-box;
		border-bottom: 2upx solid #D8D8D8;
	}
	
	.min_title {
		font-size: 14px;
		margin: 5px;
		color: #DADADA;
	}
	.uni-page-body {
		width: 100%;
		flex-grow: 1;
		overflow-x: hidden;
	}
	
	.uni-list-cell {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.uni-list-cell-hover {
		background-color: #eee;
	}
	.uni-list-cell-pd {
		padding: 22upx 30upx;
	}
	.uni-list-cell-left {
		font-size:28upx;
		padding: 0 30upx;
	}
	.uni-list-cell-db,
	.uni-list-cell-right {
		flex: 1;
	}
	.uni-list-cell::after {
		position: absolute;
	  z-index: 3;
		right: 0;
		bottom: 0;
		left: 30upx;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	.uni-list .uni-list-cell:last-child::after {
		height: 0upx;
	}
	.uni-list-cell-last.uni-list-cell::after {
		height: 0upx;
	}
	.uni-list-cell-divider {
		position: relative;
		display: flex;
		color: #999;
		background-color: #f7f7f7;
		padding:15upx 20upx;
	}
	.uni-list-cell-divider::before {
		position: absolute;
		right: 0;
		top: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	.tip {
		color: #9A9A9A;
		font-size: 26upx;
		margin-top: 2upx;
		width: 300upx; 
		text-align: center;
	}
	.uni-list-cell-divider::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0upx;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	.uni-list-cell-navigate {
		font-size:30upx;
		padding: 22upx 30upx;
		line-height: 48upx;
		position: relative;
		display: flex;
		box-sizing: border-box;
		width: 100%;
		flex: 1;
		justify-content: space-between;
		align-items: center;
	}
	.uni-list-cell-navigate {
		padding-right: 36upx;
	}
	.uni-navigate-badge {
		padding-right: 50upx;
	}
	.uni-list-cell-navigate.uni-navigate-right:after {
		font-family: uniicons;
		content: '\e583';
		position: absolute;
		right: 24upx;
		top: 50%;
		color: #bbb;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.uni-list-cell-navigate.uni-navigate-bottom:after {
		font-family: uniicons;
		content: '\e581';
		position: absolute;
		right: 24upx;
		top: 50%;
		color: #bbb;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.uni-list-cell-navigate.uni-navigate-bottom.uni-active::after {
		font-family: uniicons;
		content: '\e580';
		position: absolute;
		right: 24upx;
		top: 50%;
		color: #bbb;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.uni-collapse.uni-list-cell {
		flex-direction: column;
	}
	.uni-list-cell-navigate.uni-active {
		background: #eee;
	}
	.uni-list.uni-collapse {
		box-sizing: border-box;
		height: 0;
		overflow: hidden;
	}
	.uni-collapse .uni-list-cell {
		padding-left: 20upx;
	}
	.uni-collapse .uni-list-cell::after {
		left: 52upx;
	}
	.uni-list.uni-active {
		height: auto;
	}
	
	/* 三行列表 */
	.uni-triplex-row {
		display: flex;
		flex: 1;
		width: 100%;
		box-sizing: border-box;
		flex-direction: row;
		padding: 22upx 30upx;
	}
	.uni-triplex-right,
	.uni-triplex-left {
		display: flex;
		flex-direction: column;
	}
	.uni-triplex-left {
		width: 84%;
	}
	.uni-triplex-left .uni-title{
		padding:8upx 0;
	}
	.uni-text {
		display: inherit !important;
	}
	.uni-triplex-left .uni-text, .uni-triplex-left .uni-text-small{color:#999999;}
	.uni-triplex-right {
		width: 16%;
		text-align: right;
	}
	.count_item {
		display: inline-block;
		width: 50%;
		/* margin-left: 13%; */
		/* 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;
	}
	
	.ai_btn {
	   display: inline-block;
	   line-height: 40px;
	   position: relative;
	   left: 8%;
	}
	.ai_btn_item {
	   border-radius: 60upx;
	   float: left;
	   line-height: 50px;
	   margin-left: 20px;
	   margin-top: 20px;
	}

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