yichael_zhongchuang_front_2/components/user/stuTestDetails.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-cjfb df fdr aic">
					<!-- <radar class=""></radar> -->
					<canvas canvas-id="canvasRadar" class="charts myRadar radarChat"></canvas>
					<!-- <web-view class='webview' :src="url" v-if="url.length"></web-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 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>
							</tbody>
						</table>
					</view>
				</view>
				<view class="btn-box df fdr aic jcc">
					<view class="btn-submit df aic jcc">成绩添加与修改</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
		},
		data() {
			return {
				// url:'https://www.yuyekeji.cn/H5/radar.html',
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				textarea:'',
				//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:['原理认知', '实景勘察', '虚拟技术搭建', '虚拟艺术创作']
			}
		},
		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);
			
			// //px转vw
			// @function px2vw($px) {
			// 	@return $px/1920*100vw;
			// }
			// //px转vh
			// @function px2vh($px) {
			// 	@return $px/1080*100vh;
			// }
			// this.cWidth=uni.px2vw(100);
			// this.cHeight=uni.px2vw(100);
	
			// let data = {"categories":["原理认知","实景勘察","虚拟技术搭建","虚拟艺术创作","教师评分(加分项目)"],"series":[{"name":"成绩分布","data":[90,110,165,195,187]}]}
			// _self.showRadar("canvasRadar",data);
		},
		methods: {
			//点击添加个人信息
			onClick_p1_add() {
				this.showIndex_userInfo = 1;
			},
			bindPickerChange_sex: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.sexIndex = e.target.value
			},
			bindPickerChange_zj: function(e) {
				this.zjIndex = e.target.value
			},
			bindPickerChange_mz: function(e) {
				this.mzIndex = e.target.value
			},
			updateInfo(data) {
				// console.log('data=',data)
				this.model.Name = data.Name;
				this.model.Class = data.Class;
				this.model.StudentID = data.StudentID;
				
				userController.data_scores = data.UserScore;
				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++;
					}
				}

				this.XNSY_P = parseInt(totalScore/14*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]}]}
				let data = {"categories":["原理认知","实景考察","虚拟技术搭建","虚拟艺术创作","教师评分(加分项目)"],"series":[{"name":"成绩分布","data":aData}]}
				_self.showRadar("canvasRadar",data);
			},
			showRadar(canvasId,chartData){
				canvaRadar=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: 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);
		//宽度
	}
	.radarChat{
		// border: 1px solid #DDDDDD;
		
		width: px2vw(600);
		height: px2vw(600);
	}
	.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);
	}
	
</style>