From 458acdd4d1df98ab09f3496024876a4f8328d687 Mon Sep 17 00:00:00 2001
From: zhangsir <z1823137@163.com>
Date: Tue, 18 Jun 2024 18:49:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=81=E7=A8=8B=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/modules/growth.js         |   4 +
 pages/learnPath/learnPath.vue | 322 +++++++++++++++++++++++++++++++++-
 pages/study/index.vue         |  41 +++--
 static/images/go.png          | Bin 0 -> 359 bytes
 4 files changed, 349 insertions(+), 18 deletions(-)
 create mode 100644 api/modules/growth.js
 create mode 100644 static/images/go.png

diff --git a/api/modules/growth.js b/api/modules/growth.js
new file mode 100644
index 0000000..aea7ae9
--- /dev/null
+++ b/api/modules/growth.js
@@ -0,0 +1,4 @@
+import ajax from '@/api/manage/manageAjax.js';
+export const getList = (params) => ajax.get(`/manageApi/stu/grow/getStuLearnInfo?userId=${params}`);
+//获取路径图详情
+export const taskList = (id) => ajax.get(`/manageApi/stu/grow/taskList?growId=${id}`);
\ No newline at end of file
diff --git a/pages/learnPath/learnPath.vue b/pages/learnPath/learnPath.vue
index ad6a847..4cf0bf0 100644
--- a/pages/learnPath/learnPath.vue
+++ b/pages/learnPath/learnPath.vue
@@ -23,24 +23,172 @@
 			</view>
 			<view class="end_learn">您的学习之旅已结束</view>
 			<view class="learn">
-				<view class="aaa"></view>
+				<view v-for="(item,index) in dataList" :key="index">
+					<view @click="showPopup(index)" class="learn_item" :style="{
+								backgroundColor: getColor(item.flag, 0),
+								left: getPosition(item.name, index).left + 'rpx',
+								top: getPosition(item.name, index).top + 'rpx'
+							}">
+						<view class="icon">
+							<view class="icon-content" :style="{ background: getColor(item.flag, 1) }">
+								{{item.currentRatio || 0}}%
+							</view>
+						</view>
+					</view>
+					<view class="learn_text" :style="{
+								left: getPositionText(item.name, index).left + 'rpx',
+								top: getPositionText(item.name, index).top + 'rpx'
+							}">
+						{{item.title}}
+					</view>	
+				</view>
 			</view>
 		</view>
+		<u-popup  mode="center" v-if="currentItem !== null" :show="currentItem.show" @close="closePopup">
+			<view class="popup_item">
+				<view class="item_name">{{ currentItem.title }}</view>
+				<view class="tabs">
+					<view :class="currentItem.flag == 0 ?'flag':'flag2'">
+						{{currentItem.flag == 0 ? '选修' : '必修'}}
+					</view>
+					<view class="type">{{currentItem.type==5?'考试':currentItem.type==1?'在线':''}}</view>
+				</view>
+				<view class="pregress">
+					<view class="text">学习进度</view>
+					<view class="prp">
+						<u-line-progress :percentage="currentItem.currentRatio" :showText="false" height="5" activeColor="#ff0000">
+							
+						</u-line-progress>
+						<!-- <view class="text">{{currentItem.progress || 0}}</view> -->
+					</view>
+				</view>
+				<view class="tea_text">
+					<view>课程讲师: {{currentItem.teacherName}}</view>
+					<view>课程简介: {{currentItem.introduce}}</view>
+				</view>
+				<view class="btn" @click="goStudy(currentItem)">
+					<view class="text">学习中</view>
+					<image class="go" src="@/static/images/go.png" mode=""></image>
+				</view>
+			</view>
+		</u-popup>
 	</view>
 </template>
 
 <script>
+	import { taskList } from "@/api/modules/growth.js"
 	export default {
+		onLoad(options) {
+			this.growId = options.growId
+			this.titleName = options.name
+		},
 		data() {
 			return {
+				growId: '',
+				titleName: '',
 				openDown: false,
+				show: false,
+				colorAttrValue: {
+					0: ['#FFD04B', "#FBA944"],
+					1: ["#b8e3b8", "#8ac84a"],
+					2: ['#FFD04B', '#FBA944']
+				},
+				iconAttrs: {
+					'路径图背景1':{
+						positions: [
+							{left: 524,top: 782},
+							{left: 138,top: 644},
+							{left: -2,top: 506},
+							{left: -8,top: 370},
+							{left: 54,top: 232},
+							{left: 162,top: 84},
+							{left: 344,top: -28},
+						]
+					},
+				},
+				iconAttrsText: {
+					'路径图背景1':{
+						positions: [
+							{left: 112,top: 790},
+							{left: 226,top: 652},
+							{left: 86,top: 514},
+							{left: 80,top: 378},
+							{left: 142,top: 240},
+							{left: 250,top: 92},
+							{left: -22,top: -20},
+						]
+					},
+					'路径图背景全':{
+						positions: [
+							{left: 112,top: 790},
+							{left: 226,top: 652},
+							{left: 86,top: 514},
+							{left: 80,top: 378},
+							{left: 142,top: 240},
+							{left: 250,top: 92},
+							{left: -22,top: -20},
+						]
+					},
+				},
+				dataList: [],
+				currentItem: null,
 			}
 		},
 		mounted() {
-			
+			taskList(this.growId).then(res=>{
+				console.log(res,'res')
+				if(res.code == 200 ){
+					if(res.data.length <= 7){
+					  this.dataList = res.data.map(item=>({
+						title:item.name,
+						...item,
+						name: '路径图背景1',
+					  }))
+					}else{
+					  this.dataList = res.data.map(item=>({
+						title:item.name,
+						...item,
+						name: '路径图背景全',
+					  }))
+					}
+				}
+			})
 		},
 		methods: {
-			
+			goStudy(item){
+				console.log(item,'item')
+				if(item.type == 1){
+					console.log(item,'在线')
+					this.$router.push("/course/studyindex?id=" + item.targetId);
+				  }else if (item.type == 5) {
+					console.log(item,'考试')
+					this.$router.push("exam/test?id=" + item.targetId);
+				  }else{
+					console.log(item,'其他')
+				  }
+			},
+			showPopup(index) {
+			  // 设置当前选中的数组元素
+			this.currentItem = this.dataList[index];
+			  // 显示选中元素对应的弹出层
+			  this.currentItem.show = true;
+			},
+			closePopup() {
+			  // 关闭当前弹出层时重置状态
+			  if (this.currentItem !== null) {
+				this.currentItem.show = false;
+				this.currentItem = null;
+			  }
+			},
+			getColor(status, index) {
+			  return this.colorAttrValue[status][index]
+			},
+			getPosition(name, index) {
+			  return this.iconAttrs[name].positions[index]
+			},
+			getPositionText(name, index) {
+				return this.iconAttrsText[name].positions[index]
+			},
 		}
 	}
 </script>
@@ -48,6 +196,114 @@
 <style scoped>
  .learn_path{
 	 background: #387DF7;
+	 .popup_item{
+		 width: 90vw;
+		 .item_name{
+			 font-weight: 600;
+			 font-size: 32rpx;
+			 color: #333333;
+			 line-height: 44rpx;
+			 text-align: left;
+			 font-style: normal;
+			 margin: 50rpx 0 38rpx 76rpx;
+		 }
+		 .tabs{
+			 display: flex;
+			 .flag{
+				 width: 156rpx;
+				 height: 60rpx;
+				 background: #FFF2E8;
+				 border-radius: 8rpx;
+				 border: 2rpx solid #FE9C4A;
+				 margin: 0 24rpx 40rpx 78rpx;
+				 text-align: center;
+				 line-height: 60rpx;
+				 color: #FE9C4A;
+			 }
+			 .flag2{
+				 width: 156rpx;
+				 height: 60rpx;
+				 background: #F7FFF5;
+				 border-radius: 8rpx;
+				 border: 2rpx solid #31AF0D;
+				 margin: 0 24rpx 40rpx 78rpx;
+				 text-align: center;
+				 line-height: 60rpx;
+				 color: #31AF0D;
+			 }
+			 .type{
+				 width: 156rpx;
+				 height: 60rpx;
+				 background: #E6EFFF;
+				 border-radius: 8rpx;
+				 border: 2rpx solid #387DF7;
+				 text-align: center;
+				 line-height: 60rpx;
+				 color: #387DF7;
+			 }
+		 }
+		 .pregress{
+			 margin: 0 0 24rpx 78rpx;
+			 width: 70%;
+			 .text{
+				 font-weight: 400;
+				 font-size: 28rpx;
+				 color: #387DF7;
+				 line-height: 40rpx;
+				 text-align: left;
+				 font-style: normal;
+				 margin-bottom: 12rpx;
+			 }
+			 .prp{
+				 display: flex;
+				 .text{
+					 font-weight: 400;
+					 font-size: 28rpx;
+					 color: #666666;
+					 line-height: 40rpx;
+					 text-align: left;
+					 font-style: normal;
+					 margin-left: 24rpx;
+				 }
+			 }
+		 }
+		 .tea_text{
+			 margin: 0 0 26rpx 80rpx;
+			 font-weight: 400;
+			 font-size: 28rpx;
+			 color: #333333;
+			 line-height: 60rpx;
+			 text-align: left;
+			 font-style: normal;
+		 }
+		 .btn{
+			 width: 85%;
+			 height: 80rpx;
+			 background: #387DF7;
+			 border-radius: 12rpx;
+			 margin: 0 0 44rpx 50rpx;
+			 display: flex;
+			 justify-content: center;
+			 align-items: center;
+			 position: relative;
+			 .text{
+				 font-family: PingFangSC, PingFang SC;
+				 font-weight: 600;
+				 font-size: 28rpx;
+				 color: #FFFFFF;
+				 line-height: 40rpx;
+				 text-align: left;
+				 font-style: normal;
+			 }
+			 .go{
+				 position: absolute;
+				 top: 20rpx;
+				 right: 20rpx;
+				 width: 40rpx;
+				 height: 40rpx;
+			 }
+		 }
+	 }
 	 .path_header{
 		 display: flex;
 		 justify-content: center;
@@ -156,10 +412,64 @@
 		 height: 952rpx;
 		 background: url("../../static/images/learnpath/7learn.png") no-repeat;
 		 background-size: 100%;
-		 .aaa{
+		 margin-left: 88rpx;
+		 position: relative;
+		 .learn_item{
 			 width: 64rpx;
-			 height: 68rpx;
-			 background: linear-gradient( 180deg, #66B1FC 0%, #3C82F7 99%);
+			 height: 64rpx;
+			 position: absolute;
+			 border-radius: 50%;
+			   &:before {
+			     content: "";
+			     position: absolute;
+			     bottom: 0;
+			     left: 0;
+			     width: 64rpx;
+			     height: 64rpx;
+			     clip: rect(16px 64px 32px 16px);
+			     background: inherit;
+			     transform: rotate(45deg);
+			   }
+			 
+			   .icon {
+			     position: absolute;
+			     top: 50%;
+			     left: 50%;
+			     width: 50rpx;
+			     height: 50rpx;
+			     background-color: #fff;
+			     border-radius: 50%;
+			     transform: translate(-50%, -50%);
+			     cursor: pointer;
+			 
+			     .icon-content {
+			       position: absolute;
+			       top: 50%;
+			       left: 50%;
+			       font-size: 10px;
+			       color: #fff;
+			       text-align: center;
+			       transform: translate(-50%, -50%);
+			       width: 44rpx;
+			       height: 44rpx;
+			       line-height: 44rpx;
+			       background-color: #8bc94b;
+			       border-radius: 50%;
+			     }
+			   }
+		 }
+		 .learn_text{
+			 max-width: 400rpx;
+			 height: 56rpx;
+			 font-size: 24rpx;
+			 line-height: 56rpx;
+			 text-align: center;
+			 background: linear-gradient( 301deg, #0071FF 0%, #8FC1FF 99%, #3D73ED 100%);
+			 border-radius: 160rpx 160rpx 160rpx 16rpx;
+			 position: absolute;
+			 padding: 0 12rpx 0 20rpx;
+			 font-weight: 400;
+			 color: #FFFFFF;
 		 }
 	 }
  }
diff --git a/pages/study/index.vue b/pages/study/index.vue
index 4d945a1..da6bf69 100644
--- a/pages/study/index.vue
+++ b/pages/study/index.vue
@@ -126,13 +126,13 @@
 				<uni-load-more :status="studyLoadStatus"></uni-load-more>
 			</view>
 		</view>
-		<view class="learn" v-show="tabIndex===2">
+		<view class="learn" v-show="tabIndex===2" v-if="Object.keys(detailData).length">
 			<view class="learn_header">
 				<view class="learn_left">
 					<text class="text">我的成长路径</text>
 					<image @click="contentOn" src="../../static/images/learnpath/why.png" class="image"></image>
 					<view class="up_content" v-show="upContent">
-						<view class="text">根据您的归属组织、您所在岗位、职级，已为您自动匹配“产品企划岗Band6～7成长路径”，抓紧时间学习吧～</view>
+						<view class="text">根据您的归属组织、您所在岗位、职级，已为您自动匹配“{{detailData.growName || ''}}”，抓紧时间学习吧～</view>
 						<image @click="contentOut" class="down" src="../../static/images/learnpath/down.png" mode=""></image>
 					</view>
 				</view>
@@ -144,10 +144,10 @@
 			<view class="line"></view>
 			<view class="learn_body">
 				<view class="body_job">
-					<view class="name">产品企划岗Band6～7成长路径</view>
+					<view class="name">{{detailData.growName || ''}}</view>
 					<view class="job">
-						<text>京东方集团股份有限公司</text>
-						<text> 学习状态：进行中</text>
+						<text>{{detailData.organizationName || ''}}</text>
+						<text> 学习状态：<text :style="{color: ['#FF8336','#31AF0D','#409EFF '][detailData.studyStatus]}">{{detailData.studyStatus==0?'未开始':detailData.studyStatus==1?'已完成':'进行中'}}</text></text>
 					</view>
 					<view class="plan_item">
 						<image class="image" src="../../static/images/learnpath/file.png" mode=""></image>
@@ -169,14 +169,14 @@
 						</view>
 					</view>
 				</view>
-				<view class="body_item">
+				<view class="body_item" v-if="detailData.remark">
 					<view class="body_top">
 						<image class="img" src="../../static/images/learnpath/explain.png" mode=""></image>
 						<text class="text">说明</text>
 					</view>
 					<view class="body_down">
 						<view class="text_ele">
-						请各位选课的同学提前阅读本课程的 “教学大纲与计划”、“课程考核要求”与“学习要求”，并按给定的中学化学教学主题分好小组每位同学在网上学习的活动轨迹都会自动被系统记录將作为大家个人线上参与的评价依据;请大家务必......
+						{{detailData.remark || ''}}
 						</view>
 					</view>
 				</view>
@@ -192,8 +192,8 @@
 								<view>当前任务：</view>
 							</view>
 							<view class="right">
-								<view style="margin-bottom: 24rpx;">10门</view>
-								<view>产品考试</view>
+								<view style="margin-bottom: 24rpx;">{{detailData.taskNum}}门</view>
+								<view>{{detailData.currentTaskName}}</view>
 							</view>
 						</view>
 						<view class="plan_right">
@@ -201,11 +201,19 @@
 						</view>
 					</view>
 				</view>
-				<view class="go_learn" @click="goLearn">
-					开始学习
+				<view class="go_learn" @click="goLearn(detailData)">
+					{{detailData.overallCompletionRate==0?'开始学习':detailData.overallCompletionRate==100?'回顾':'继续学习'}}
 				</view>
 			</view>
 		</view>
+		<view class="learn" v-show="tabIndex===2" v-else>
+			<u-empty
+			        mode="data"
+			        icon="http://cdn.uviewui.com/uview/empty/data.png"
+					style="height: 75vh;"
+			>
+			</u-empty>
+		</view>
 		<u-modal :show="studyResetShow" :showCancelButton="true" @cancel="cancelResetStudy" @confirm="resetStudy"	ref="uModal" :asyncClose="true">
 			您确定要重新学习吗？
 		</u-modal>
@@ -283,12 +291,14 @@
 	import { formatDate } from '@/utils/tools.js';
 	import apiUser from '@/api/system/user.js'
 	import { mapGetters } from 'vuex'
+	import { getList } from "@/api/modules/growth.js"
 	export default {
 		computed: {
 			...mapGetters(['userInfo', 'isOneStady'])
 		},
 		data() {
 			return {
+				detailData: {},
 				planDown: false,
 				upContent: false,
 				checked: false,
@@ -424,7 +434,8 @@
 		methods: {
 			goLearn() {
 				uni.navigateTo({
-					url: '/pages/learnPath/learnPath'
+					url: '/pages/learnPath/learnPath?growId='+this.detailData.growId+'&name='+this.detailData.growName
+					
 				});
 			},
 			contentOn() {
@@ -739,6 +750,12 @@
 					if(localStorage.getItem("checkedTrue")!=null){
 						this.learnModal = localStorage.getItem("checkedTrue") === "true"
 						this.isChecked = localStorage.getItem("checkedTrue") === "false"
+						getList(this.userInfo.aid).then(res=>{
+							console.log(res,'res')
+							if(res.code == 200 ){
+								this.detailData = res.data
+							}
+						})
 					}else{
 						this.learnModal = true
 					}
diff --git a/static/images/go.png b/static/images/go.png
new file mode 100644
index 0000000000000000000000000000000000000000..c0dbc015f709ebb8aba0c46db1ee3c27572ebe21
GIT binary patch
literal 359
zcmV-t0hs=YP)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00001b5ch_0Itp)
z=>Px$AxT6*R5(wqmAy_vK@djIBqo+>cmRmLfRV(Wk_RBto7nLNmd4t~M!h|Rnwl3t
zq@~kdgVvIa&dowLoBOkno$6+H?%Dn3o81)(LRAld3*a1R0>>`x8~6Ygz+6Pu;qMX-
zsA?PN0VhR^d1EVJEF!Od-WI5;_I(9(YCz%i6c~w!+Jq16?*ZGury?@k0-em89d{O{
zKbd@S2Hcg@>=&2-UEnaHrnd&X1g=Yxm;Vkw0B67;0-71nq?)s3F$1zlXfF94Xw=Aw
zg?<_E5wJ$Cix}v77vLN444hWfGY7^<o&zs6FjM#$V~QOugT*+Vo07b3%#d`AZNift
zy-lyEYP!q8?K184<?S@h1?wM^;0b5}M{fQHc&~Z_{s0^6eQcu=aLoV!002ovPDHLk
FV1mkTnH2y4

literal 0
HcmV?d00001