yichael_zhongchuang_front_2/components/user/personalLearning.vue

<template>
	<!-- （学生）个人学习记录，同（老师）学生实验情况 -->
	<view class="user-full">
		<view class="box2 df ">
			<view class="box2-content">
				<view class="title df fdr aic">
					<view class="df">
						<img src="../../assets/user/pic_user_02.png"></img>
					</view>
					<view class="title-text">学生信息</view>
				</view>
				<view class="box2-table-box df fdr">
					<view class="m_right_container">
						<table style="width: 100%;border: 1px solid #DDDDDD;border-collapse: collapse">
							<thead class="m-table-hander">
								<tr>
									<th>姓名</th>
									<th>班级</th>
									<th>学号</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th style="color: #EA252C;">{{model.Name}}</th>
									<th>{{model.Class}}</th>
									<th>{{model.StudentID}}</th>
								</tr>
							</tbody>
						</table>
					</view>
				</view>
			</view>
		</view>
		<view class="box2 df ">
			<view class="box2-content">
				<view class="title df fdr aic">
					<view class="df">
						<img src="../../assets/user/pic_user_02.png"></img>
					</view>
					<view class="title-text">成绩分布</view>
				</view>
				<!-- <view class="box2-table-box df fdr"> -->
				<view class="box2-table-box-cjfb df fdr aic">
					<canvas canvas-id="canvasRadar" class="charts myRadar radarChat"></canvas>
					<!-- 五维图暂缓 -->
				</view>
			</view>
		</view>
		<view class="box2 df ">
			<view class="box2-content">
				<view class="title df fdr aic">
					<view class="df">
						<img src="../../assets/user/pic_user_02.png"></img>
					</view>
					<view class="title-text">学习进度</view>
				</view>
				<view class="box2-table-box df fdc">
					<view class="progress-item df fdr aic">
						<view class="progress-box">
							<progress :percent=YLRZ_P activeColor="#e93f52" active stroke-width="8" />
						</view>
						<view class="progress-text">{{YLRZ_P}}%</view>
					</view>
					<view class="progress-item df fdr aic">
						<view class="progress-box">
							<progress :percent=SJKC_P activeColor="#d6ebbf" active stroke-width="8" />
						</view>
						<view class="progress-text">{{SJKC_P}}%</view>
					</view>
					<view class="progress-item df fdr aic">
						<view class="progress-box">
							<progress :percent=XNSY_P activeColor="#60b4f0" active stroke-width="8" />
						</view>
						<view class="progress-text">{{XNSY_P}}%</view>
					</view>
					<view class="xxjd-text">红色为原理认知，绿色为实景考察，蓝色为虚拟实验</view>
				</view>
			</view>
		</view>
		<view class="box3 df ">
			<view class="box2-content">
				<view class="title df fdr aic">
					<view class="df">
						<img src="../../assets/user/pic_user_02.png"></img>
					</view>
					<view class="title-text">测试成绩</view>
				</view>
				<view class="box2-table-box df fdr">
					<view class="m_right_container">
						<table style="width: 100%;border: 1px solid #DDDDDD;border-collapse: collapse">
							<thead class="m-table-hander">
								<tr>
									<th>测试项目</th>
									<th>是否学习</th>
									<th>是否通过</th>
									<th>分值</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th>原理认知</th>
									<th>{{model.Score_ylrz>0?'是':'否'}}</th>
									<th>{{model.Score_ylrz>=10?'是':'否'}}</th>
									<th>{{model.Score_ylrz>0?model.Score_ylrz:'0'}}</th>
								</tr>
								<tr>
									<th>实景勘察</th>
									<th>{{model.Score_sjkc>0?'是':'否'}}</th>
									<th>{{model.Score_sjkc>=10?'是':'否'}}</th>
									<th>{{model.Score_sjkc>0?model.Score_sjkc:'0'}}</th>
								</tr>
								<tr>
									<th>虚拟技术搭建</th>
									<th>{{model.Score_xnjsdj>0?'是':'否'}}</th>
									<th>{{model.Score_xnjsdj>=10?'是':'否'}}</th>
									<th>{{model.Score_xnjsdj>0?model.Score_xnjsdj:'0'}}</th>
								</tr>
								<tr>
									<th>虚拟艺术创作</th>
									<th>{{model.Score_xnyscz>0?'是':'否'}}</th>
									<th>{{model.Score_xnyscz>=10?'是':'否'}}</th>
									<th>{{model.Score_xnyscz>0?model.Score_xnyscz:'0'}}</th>
								</tr>
								<tr>
									<th>总成绩</th>
									<th></th>
									<th></th>
									<th>{{model.Score_ylrz+model.Score_sjkc+model.Score_xnjsdj+model.Score_xnyscz}}</th>
								</tr>
							</tbody>
						</table>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaRadar = null;
	export default {
		components: {
			uCharts
		},
		mounted() {
			_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(900);
			this.cHeight = uni.upx2px(900);
		},
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: '',
				url:'https://www.yuyekeji.cn/H5/radar.html',
				//0添加1个人
				showIndex_userInfo: 1,
				sexIndex: 0,
				zjIndex: 0,
				mzIndex: 0,
				//学习进度
				YLRZ_P:0,
				SJKC_P:0,
				XNSY_P:0,
				
				model: {
					"Name": "", //姓名
					"Class": "", //班级
					"StudentID": '', //学号
					"Score_ylrz": null, //原理认知分数
					"Score_sjkc": null, //实景勘察分数
					"Score_xnjsdj": null, //虚拟技术搭建分数
					"Score_xnyscz": null, //虚拟艺术创作分数
				},

				array_sex: ['男', '女'],
				array_zj: ['身份证', '护照'],
				array_mz: ['汉族', '少数民族'],
				testResults: ['原理认知', '实景勘察', '虚拟技术搭建', '虚拟艺术创作']
			}
		},
		methods: {
			//点击添加个人信息
			onClick_p1_add() {
				this.showIndex_userInfo = 1;
			},
			updateInfo(data) {
				// console.log('个人学习记录data=',data)
				this.model.Name = data.Name;
				this.model.Class = data.Class;
				this.model.StudentID = data.StudentID;
				
				this.model.Score_ylrz=userController.getScore_ylrz();
				this.model.Score_sjkc=userController.getScore_sjck();
				this.model.Score_xnjsdj=userController.getScore_xnjsdj();
				this.model.Score_xnyscz=userController.getScore_xnyscz();
			},
			updateLearnProgress(data) {
				if (data[0].Score != -1) {
					this.YLRZ_P = parseInt(data[0].Score / 10 * 100);
				}
				if (data[1].Score != -1) {
					this.SJKC_P = parseInt(data[1].Score / 5 * 100);
				}
			
				let totalScore = 0;
				for (let i = 2; i < 16; i++) {
					if (data[i].Score != -1) {
						totalScore+=data[i].Score;
					}
				}
			
				this.XNSY_P = parseInt(totalScore / 85 * 100);
			
				//五维图
				let aData = [];
				let miniPoint = 0;
				//原理认知
				if (data[0].Score == '-1') {
					aData.push(miniPoint);
				} else {
					aData.push(parseInt(data[0].Score));
				}
			
				//实景考察
				if (data[1].Score == '-1') {
					aData.push(miniPoint);
				} else {
					aData.push(parseInt(data[1].Score));
				}
				//虚拟技术搭建
				let XNJSDJ_score = 0;
				for (let i = 2; i < 5; i++) {
					if (data[i].Score != '-1') {
						XNJSDJ_score += parseInt(data[i].Score);
					}
				}
				// = parseInt(data[3])+parseInt(data[4])+parseInt(data[5]);
				aData.push(XNJSDJ_score);
			
				//虚拟艺术创作
				// let XNYSCZ_score = parseInt(data[6])+parseInt(data[7])+parseInt(data[8])+parseInt(data[9])+parseInt(data[10])+parseInt(data[11])+parseInt(data[12])+parseInt(data[13])+parseInt(data[14])+parseInt(data[15]);
				let XNYSCZ_score = 0;
				for (let i = 6; i < 15; i++) {
					if (data[i].Score != '-1') {
						XNYSCZ_score += parseInt(data[i].Score);
					}
				}
				aData.push(XNYSCZ_score);
				// console.log('data=',data);
				//教师评分（加分项目）
				if (data[15].Score == '-1') {
					aData.push(miniPoint);
				} else {
					aData.push(parseInt(data[15].Score));
				}
				// aData.push(parseInt(data[16]));
				// console.log('aData=', aData)
			
				this.getServerData(aData);
			},
			getServerData(aData) {
				// let data = {"categories":["维度1","维度2","维度3","维度4","维度5","维度6"],"series":[{"name":"成交量1","data":[90,110,165,195,187,172]},{"name":"成交量2","data":[190,210,105,35,27,102]}]}
				// let data = {"categories":["原理认知","实景勘察","虚拟技术搭建","虚拟艺术创作","教师评分(加分项目)"],"series":[{"name":"成绩分布","data":[90,110,165,195,187]}]}
				// let data = {"categories":["维度1","维度2","维度3"],"series":[{"name":"成交量1","data":[90,110,165,195,187,172]}]}
				
				for(let i=0;i<aData.length;i++){
					// console.log('aData=',aData[i])
					
					aData[i]=aData[i]*20;
				}
				let data = {
					"categories": ["原理认知", "实景考察", "虚拟技术搭建", "虚拟艺术创作", "教师评分(加分项目)"],
					"series": [{
						"name": "成绩分布",
						"data": aData
					}]
				}
				_self.showRadar("canvasRadar", data);
			},
			showRadar(canvasId, chartData) {
				canvaRadar = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'radar',
					fontSize: 15,
					padding: [0, 0, 0, 0],
					legend: {
						show: true,
						padding: 0,
						lineHeight: 0,
						margin: 0,
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					dataLabel: true,
					categories: chartData.categories,
					series: chartData.series,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						radar: {
							max: 200, //雷达数值的最大值
							gridType: 'radar' //radar或者circle可选，网格样式，默认radar
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.user-full {
		width: 100%;
		height: 100%;
	}

	.user-right-box {
		// background: #FFFFFF;
		background: #F4F4F4;
		box-shadow: px2vw(3) 0px px2vw(6) 0px rgba(0, 0, 0, 0.1);
		flex: 1;
		margin-left: px2vw(10);
	}

	.user-right-01-tip {
		font-size: px2vw(22);
		color: #FF7373;
		line-height: px2vw(29);
		margin-top: px2vw(37);
	}

	.self-btn01 {
		width: px2vw(200);
		height: px2vw(58);
		background: #EA252C;
		border-radius: px2vw(8);
		font-size: px2vw(24);
		color: #FFFFFF;
		line-height: px2vw(31);
		margin-top: px2vw(94);
	}

	.user-right-self01 {
		background: #FFFFFF;
	}

	.box1 {
		height: px2vw(200);
		background: #FFFFFF;
	}

	.self-avatar {
		margin-left: px2vw(227);
	}

	.self-avatar img {
		width: px2vw(120);
	}

	.self-btn02 {
		width: px2vw(200);
		height: px2vw(58);
		background: #EA252C;
		border-radius: px2vw(8);
		font-size: px2vw(24);
		color: #FFFFFF;
		line-height: px2vw(31);
		margin-left: px2vw(57);
	}

	.box2 {
		// height: px2vw(553);
		background: #FFFFFF;
		margin-top: px2vw(10);
	}

	.box2-content {
		margin-left: px2vw(71);
		margin-top: px2vw(31);
		margin-bottom: px2vw(57);
	}

	.form-input {
		width: px2vw(355);
		height: px2vw(54);
		padding: px2vw(14) px2vw(20);

		font-size: px2vw(20);
		color: #070707;
		line-height: px2vw(26);

		background: #FFFFFF;
		border-radius: px2vw(4);
		border: 1px solid #B4B4B4;
	}

	.title-text {
		margin-left: px2vw(16);
	}

	.box2-table-box {
		// margin-top: px2vw(44);
		// margin-bottom: px2vw(44);
		width: px2vw(1377);
	}

	.box2-table-box-cjfb {
		display: flex;
		/*父元素设置flex属性*/
		justify-content: center;
		/*水平主轴居中*/
		align-items: center;
		/*垂直交叉轴居中*/

		width: px2vw(1377);
		height: px2vw(500);
		//宽度
	}

	.box2-table-box-left {
		width: px2vw(500);
	}

	.box2-table-box-left-item {
		width: 100%;
		margin-top: px2vw(30);
	}

	.table-title {
		font-size: px2vw(22);
		color: #555555;
		line-height: px2vw(29);
	}

	.box2-table-box-right {
		width: px2vw(500);
		margin-left: px2vw(92);
	}

	.box3 {
		// height: px2vw(553);
		background: #FFFFFF;
		margin-top: px2vw(10);
	}

	.btn-box {
		// margin-top: px2vw(10);
	}

	.btn-submit {
		width: px2vw(353);
		height: px2vw(58);
		background: #EA252C;
		border-radius: px2vw(8);
		font-size: px2vw(24);
		color: #FFFFFF;
		line-height: px2vw(31);
		margin-top: px2vw(94);
	}

	.btn-cancel {
		width: px2vw(200);
		height: px2vw(58);
		background: #D8D8D8;
		border-radius: px2vw(8);
		font-size: px2vw(24);
		color: #FFFFFF;
		line-height: px2vw(31);
		margin-top: px2vw(94);
		margin-left: px2vw(30);
	}

	.m_right {
		width: 100%;
		height: 100%;
		margin-top: 5rpx;
		padding: 0 150rpx;
		background-color: #fff;
		box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);

		.m_right_hander {
			text-align: right;
			height: 250rpx;
			position: relative;

			.m_btn_red {
				position: absolute;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 40rpx;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				background: #EA252C;
				color: #fff;
			}
		}
	}

	tbody tr {
		border-top: 2rpx solid #DDDDDD !important;

	}

	tbody tr th {
		font-weight: 400 !important;
		height: 140rpx;
		line-height: 140rpx;
	}

	tbody tr:hover {
		// color: #fff;
		background: #FDEBEC;
		// opacity: 0.08;
	}

	.m-table-hander {
		background-color: #FFF8F7;
		height: 140rpx;
		line-height: 140rpx;
		font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
		font-weight: bold;
	}

	.m_edit {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: rgb(67, 127, 250);
		color: rgb(255, 255, 255);
		min-width: 130rpx;
	}

	.m_delete {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 130rpx;
		transform: translate(-50%, -50%);
		background: rgb(234, 37, 44);
		color: rgb(255, 255, 255);
	}

	.m_right_footer {
		margin-top: 80rpx;
		margin-bottom: 80rpx;
	}

	.m_paging {
		text-align: right;

		.m_paging_item {
			padding: 10rpx 18rpx;
			border: 1rpx solid #DDDDDD;
			border-radius: 8rpx;
			margin-right: 10rpx;
		}

		.p_act {
			background: #EA252C;
			color: #fff;
			border: inherit;
		}
	}

	.m_paging_item:hover {
		background: #EA252C;
		color: #fff;
		border: inherit;
	}

	.m_act1 {
		color: #FF0019;
	}

	.m_right_container {
		width: 100%;
		margin-top: px2vw(40);
	}

	.progress-item {
		margin-top: px2vw(40);
	}

	.progress-box {
		width: px2vw(700);
		// margin-top: px2vw(40);
	}

	.xxjd-text {
		margin-top: px2vw(40);
	}

	.progress-text {
		font-size: px2vw(24);
		color: #070707;
		line-height: px2vw(26);
		margin-left: px2vw(40);
	}
	
	.radarChat {
		// border: 1px solid #DDDDDD;
	
		width: px2vw(600);
		height: px2vw(600);
	}
</style>