edu-uniapp/pages/mode/modeReport.vue

<template>
  <view class="report-content">
    <view class="topinfo">
      <image style="position: relative; left: 7%;"  src="/static/img/modeReport.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
        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 class="tip" style="padding-left: 30upx;">
            本次测评全网平均掌握程度
            <text style="color: #E49C98; font-weight: bold;">65%</text>
            您低于平均水平<text style="color: #E49C98;font-weight: bold;">50%</text>
          </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 class="tip ">
            本次测评全网平均掌握程度
            <text style="color: #E49C98;font-weight: bold;">65%</text>
            您低于平均水平<text style="color: #E49C98;font-weight: bold;">50%</text>
          </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> -->
                <view class="uni-padding-wrap">
                  <uParse :content="item.content" />
                </view>
                <!-- <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>

                <view v-if="item.enclosure.length > 0">
				 <text>你的答案:</text>
				 <xyz-choose-image
				  :uploadFlag="false"
				  :imgList="item.enclosure">
				  </xyz-choose-image>
				</view> 
				
                <text
                  v-else-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-if="item.question_type === 3 || item.question_type === 4"
                  class="uni-ellipsis">正确答案: {{item.answer | parserAnswer}}</text>

                <text
                  v-else
                  class="uni-ellipsis">正确答案: 
				  <uParse :content="item.answer" />
				  </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>
</template>

<script>
	import xyzChooseImage from "@/components/xyz-choose-image/xyz-choose-image.vue"
	import {getQueryString} from '../../utils/common.js'
	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 { mapGetters } from 'vuex'
	var _self;
	var canvasObj = {};
    import uParse from '@/components/uParse/src/wxParse.vue'
	export default {
		components: {aiProgress, uniIcons, uniTag, uParse, xyzChooseImage},
		data() {
			return {
				title: 'Hello',
				imgList: ['https://files.91lz.com/uploads/files/publish/e5d637135c2642848d7b210e7fdc69c0/qrCode/2020/11/04/151021386.jpg'],
				modeId: null,
				studentId: null,
				modeQuestionType: 0,
				title: 'list-triplex-row',
				lists: [],
				serverData: {},
				cWidth: '',
				cHeight: '',
				cWidth2: '', //横屏图表
				cHeight2: '', //横屏图表
				cWidth3: '', //圆弧进度图
				cHeight3: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
				tips: '',
				pixelRatio: 1,
				serverData: '',
				itemCount: 30, //x轴单屏数据密度
				sliderMax: 50
			}
		},
		
		onBackPress (event) {
			
		},
		
		computed: {
		   ...mapGetters({
				fileHost: 'common/fileHost'
		   })
		},
	
		onLoad(params) {
			let headBack = document.getElementsByClassName('uni-page-head-hd')[0]
			headBack.style.display = 'none' // 隐藏返回图标
			this.modeId = params.modeId
			this.studentId = params.studentId
			this.modeQuestionType = params.modeQuestionType
			
			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.getModeReport() 
			//this.fillData(Data);
		},
		
		/* onReady() {
			this.getServerData();
		}, */
		
		methods: {
			/* test () {
				alert(1)
			}, */
			showMsg () {
				uni.showToast({
					icon: 'none',
					title: '请与当地加盟校联系开通即可享受服务'
				})
			},
			
		    getModeReport () {
				let params = {
					studentId: this.studentId,
					modeId: this.modeId,
					modeQuestionType: this.modeQuestionType
				}
			   this.$httpApi.get('/weChat/getModeQuestionReport', 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
								optionList.forEach(option => {
									let value = option.value
									option.checked = false
									if (userInfoAnswer.length > 0) {
										userInfoAnswer.forEach(answer => {
											if (answer === value) {
												option.checked = true
											}
										})
									} 
								}) 
							}
							
							if (item.question_type != 3 && item.question_type != 4
							&& item.question_type != 6) {
								if (item.enclosure && item.enclosure.length > 0) {
									let newEnclosure = []
									item.enclosure.forEach(imgUrl => {
										imgUrl = this.fileHost + imgUrl
										newEnclosure.push(imgUrl)
									})
									item.enclosure = newEnclosure
								}
							}
						})
					}
					// 记载测评分析图表
				    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%
	}
	.wxParse uni-view {
	}
	
	/* 图文列表 */
	.uni-media-list {
		padding: 22upx 30upx;
		box-sizing: border-box;
		display: flex;
		width: 100%;
		flex-direction: row;
	}
	.uni-navigate-right.uni-media-list {
		padding-right: 74upx;
	}
	.uni-pull-right {
		flex-direction: row-reverse;
	}
	.uni-pull-right>.uni-media-list-logo {
		margin-right: 0upx;
		margin-left: 20upx;
	}
	.uni-media-list-logo {
		height: 84upx;
		width: 84upx;
		margin-right: 20upx;
	}
	.uni-media-list-logo image {
		height: 100%;
		width: 100%;
	}
	.uni-media-list-body {
		height: 84upx;
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		overflow: hidden;
	}
	.uni-media-list-text-top {
		width: 100%;
		line-height: 36upx;
		font-size: 30upx;
	}
	.uni-media-list-text-bottom {
		width: 100%;
		line-height: 30upx;
		font-size: 26upx;
		color: #8f8f94;
	}
	
</style>
<style>
	.uni-list-cell-navigate.uni-navigate-right:after {
	    content: '' !important;
	}
	.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;
	}
	
	.uni-padding-wrap{
		width:690upx;
		padding:0 30upx;
	}
	
	.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>