From b923c60da1bcd2ef1c58cc1641b16d17c89c1408 Mon Sep 17 00:00:00 2001 From: zhangsir Date: Fri, 21 Jun 2024 16:38:49 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B7=AF=E5=BE=84=E5=9B=BE=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/learnPath/learnPath.vue | 204 ++++++++++++++++++++++++++++++---- pages/study/index.vue | 23 +++- 2 files changed, 203 insertions(+), 24 deletions(-) diff --git a/pages/learnPath/learnPath.vue b/pages/learnPath/learnPath.vue index 13e3081..303cd35 100644 --- a/pages/learnPath/learnPath.vue +++ b/pages/learnPath/learnPath.vue @@ -7,7 +7,7 @@ 全岗位路径 - + 高亮显示未完成 @@ -25,14 +25,23 @@ - + {{item.currentRatio || 0}}% + + + + + + + - 课程讲师: {{currentItem.teacherName}} - 课程简介: {{currentItem.introduce}} + 课程讲师: {{currentItem.teacherName?currentItem.teacherName.split(',').length > 3 + ? currentItem.teacherName.split(',').slice(0, 3).join(',') + '...' + : currentItem.teacherName:''}} + 课程简介: {{currentItem.introduce}} 学习中 @@ -85,17 +96,66 @@ }, data() { return { + istabId: '', + notColor: [], + flagToggle: 0, + flagToggleTwo: 1, growId: '', titleName: '', openDown: false, show: false, colorAttrValue: { - 0: ['#FFD04B', "#FBA944"], - 1: ["#b8e3b8", "#8ac84a"], + 0: ['#FFD04B', "#FBA944",'#FFD04B', "#FBA944","#EE423D"], + 1: ["#b8e3b8", "#8ac84a","#b8e3b8","#8ac84a","#EE423D"], 2: ['#FFD04B', '#FBA944'] }, iconAttrs: { '路径图背景1':{ + positions: [ + {left: -8,top: 378}, + ] + }, + '路径图背景2':{ + positions: [ + {left: 380,top: 660}, + {left: 46,top: 238}, + ] + }, + '路径图背景3':{ + positions: [ + {left: 416,top: 684}, + {left: -18,top: 412}, + {left: 114,top: 138}, + ] + }, + '路径图背景4':{ + positions: [ + {left: 484,top: 734}, + {left: 14,top: 534}, + {left: 6,top: 332}, + {left: 118,top: 132}, + ] + }, + '路径图背景5':{ + positions: [ + {left: 484,top: 734}, + {left: 14,top: 544}, + {left: 6,top: 354}, + {left: 98,top: 162}, + {left: 344,top: -28}, + ] + }, + '路径图背景6':{ + positions: [ + {left: 504,top: 762}, + {left: 138,top: 602}, + {left: -14,top: 440}, + {left: 26,top: 280}, + {left: 130,top: 118}, + {left: 344,top: -28}, + ] + }, + '路径图背景7':{ positions: [ {left: 524,top: 782}, {left: 138,top: 644}, @@ -116,25 +176,70 @@ {left: 580,top: 1488}, {left: 606,top: 1300}, {left: 524,top: 1110}, - {left: 418,top: 922}, + {left: 306,top: 922}, {left: 38,top: 734}, {left: 42,top: 546}, {left: 102,top: 358}, {left: 194,top: 170}, - {left: 400,top: -18}, + {left: 440,top: -18}, ] }, }, iconAttrsText: { '路径图背景1':{ positions: [ - {left: 112,top: 790}, + {left: 80,top: 386}, + ] + }, + '路径图背景2':{ + positions: [ + {left: 86,top: 668}, + {left: 134,top: 246}, + ] + }, + '路径图背景3':{ + positions: [ + {left: 116,top: 692}, + {left: 70,top: 420}, + {left: 202,top: 146}, + ] + }, + '路径图背景4':{ + positions: [ + {left: 198,top: 742}, + {left: 102,top: 542}, + {left: 94,top: 340}, + {left: 206,top: 140}, + ] + }, + '路径图背景5':{ + positions: [ + {left: 188,top: 742}, + {left: 102,top: 552}, + {left: 94,top: 362}, + {left: 186,top: 170}, + {left: 46,top: -20}, + ] + }, + '路径图背景6':{ + positions: [ + {left: 210,top: 770}, + {left: 226,top: 610}, + {left: 74,top: 448}, + {left: 114,top: 288}, + {left: 218,top: 126}, + {left: 46,top: -20}, + ] + }, + '路径图背景7':{ + positions: [ + {left: 226,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}, + {left: 44,top: -20}, ] }, '路径图背景全':{ @@ -143,16 +248,16 @@ {left: 146,top: 2248}, {left: 74,top: 2060}, {left: 166,top: 1872}, - {left: -14,top: 1684}, - {left: 168,top: 1496}, - {left: 194,top: 1308}, - {left: 112,top: 1118}, - {left: 130,top: 930}, + {left: 100,top: 1684}, + {left: 276,top: 1496}, + {left: 308,top: 1308}, + {left: 222,top: 1118}, + {left: 10,top: 930}, {left: 126,top: 742}, {left: 130,top: 554}, {left: 190,top: 366}, {left: 282,top: 178}, - {left: 112,top: -10}, + {left: 140,top: -10}, ] }, }, @@ -162,13 +267,12 @@ }, 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', + name: '路径图背景' + res.data.length, })) }else{ this.dataList = res.data.map(item=>({ @@ -177,10 +281,36 @@ name: '路径图背景全', })) } + const foundItemIndex = this.dataList.findIndex(item => item.currentRatio !== 100); + if (foundItemIndex !== -1) { + const scrollTop = this.iconAttrs[this.dataList[0].name].positions[foundItemIndex] + // 滚动到指定位置 + this.performScroll(scrollTop.top); + //判断显示提示弹窗 + this.istabId = this.dataList[foundItemIndex].id + } } }) }, methods: { + toggleFlag() { + this.flagToggle = this.flagToggle === 2 ? 3 : 2; + this.flagToggleTwo = this.flagToggleTwo === 2 ? 3 : 2; + }, + startToggleInterval() { + this.intervalId = setInterval(this.toggleFlag, 500); + }, + async performScroll(scrollTop) { + await this.$nextTick(); + window.scrollTo({ top: scrollTop, behavior: 'smooth' }); + this.startToggleInterval(); + setTimeout(() => { + this.explainBody = false + clearInterval(this.intervalId); + this.flagToggle = 0 + this.flagToggleTwo = 1 + }, 10000); + }, goStudy(item){ if(item.type == 1){ console.log(item,'在线') @@ -214,7 +344,22 @@ getPositionText(name, index) { return this.iconAttrsText[name].positions[index] }, - } + }, + watch: { + openDown(val){ + if(val){ + const notList = [] + this.dataList.forEach(item => { + if(item.currentRatio != 100){ + notList.push(item) + } + }); + this.notColor = notList.map(item => item.id) + }else{ + this.notColor = [] + } + } + }, } @@ -300,6 +445,17 @@ line-height: 60rpx; text-align: left; font-style: normal; + .text_tea{ + margin-right:80rpx; + overflow: hidden; + word-break:break-all; + text-overflow: ellipsis; + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 3; + } } .btn{ width: 85%; @@ -538,6 +694,9 @@ .icon-content { position: absolute; + display: flex; + align-items: center; + justify-content: center; top: 50%; left: 50%; font-size: 10px; @@ -553,7 +712,7 @@ } } .learn_text{ - max-width: 400rpx; + width: 240rpx; height: 56rpx; font-size: 24rpx; line-height: 56rpx; @@ -564,6 +723,9 @@ padding: 0 12rpx 0 20rpx; font-weight: 400; color: #FFFFFF; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } } diff --git a/pages/study/index.vue b/pages/study/index.vue index da6bf69..94b8280 100644 --- a/pages/study/index.vue +++ b/pages/study/index.vue @@ -146,10 +146,10 @@ {{detailData.growName || ''}} - {{detailData.organizationName || ''}} + {{detailData.organizationName || ''}} 学习状态：{{detailData.studyStatus==0?'未开始':detailData.studyStatus==1?'已完成':'进行中'}} - + @@ -996,6 +996,14 @@ color: #333333; line-height: 40rpx; margin: 74rpx 152rpx 70rpx 72rpx; + overflow: hidden; + word-break:break-all; + text-overflow: ellipsis; + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 3; } .down{ width: 42rpx; @@ -1047,6 +1055,9 @@ color: #FFFFFF; line-height: 44rpx; margin-bottom: 20rpx; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } .job{ // height: 40rpx; @@ -1057,6 +1068,12 @@ line-height: 40rpx; display: flex; justify-content: space-between; + .text_name{ + width: 360rpx; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } } .plan_item{ position: absolute;