hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-14 05:16:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

路径图完善

Browse Source
This commit is contained in:
zhangsir
2024-06-21 16:38:49 +08:00
parent ae27f94e99
commit b923c60da1
2 changed files with 203 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
pages/learnPath/learnPath.vue
View File

@@ -7,7 +7,7 @@
<view class="body_header">
<view class="left">全岗位路径</view>
<view class="right">
<u-switch size="14" v-model="openDown" @change="change"></u-switch>
<u-switch size="14" v-model="openDown"></u-switch>
<text class="text">高亮显示未完成</text>
</view>
</view>
@@ -25,14 +25,23 @@
<view :class="dataList.length<=7?'learn':'learn14'">
<view v-for="(item,index) in dataList" :key="index">
<view @click="showPopup(index)" class="learn_item" :style="{
backgroundColor: getColor(item.flag, 0),
backgroundColor: getColor(item.flag, (notColor.length>0?
(notColor.includes(item.id)?4:item.id == istabId?flagToggle:0):item.id == istabId?flagToggle: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) }">
<view v-if="item.currentRatio!=100" class="icon-content" :style="{ background: getColor(item.flag, (notColor.length>0?
(notColor.includes(item.id)?4:item.id == istabId?flagToggleTwo:1):item.id == istabId?flagToggleTwo:1)) }">
{{item.currentRatio || 0}}%
</view>
<view v-else class="icon-content" :style="{background: getColor(item.flag,1)}">
<svg style="width: 15px;height: 15px;" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -583 -2082 )">
<path d="M 6.163343558282208 9.152636718750001 L 15.538803680981593 0.0888671875 L 17.948926380368096 2.536132812499999 L 6.189570552147239 13.903613281250001 L 0.022776073619630802 8.07119140625 L 2.406671779141104 5.599316406250001 L 6.163343558282208 9.152636718750001 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 583 2082 )" />
</g>
</svg>
</view>
</view>
</view>
<view class="learn_text" :style="{
@@ -64,8 +73,10 @@
</view>
</view>
<view class="tea_text">
<view>课程讲师: {{currentItem.teacherName}}</view>
<view>课程简介: {{currentItem.introduce}}</view>
<view>课程讲师: {{currentItem.teacherName?currentItem.teacherName.split(',').length > 3
? currentItem.teacherName.split(',').slice(0, 3).join(',') + '...'
: currentItem.teacherName:''}}</view>
<view class="text_tea">课程简介: {{currentItem.introduce}}</view>
</view>
<view class="btn" @click="goStudy(currentItem)">
<view class="text">学习中</view>
@@ -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 = []
}
}
},
}
</script>
@@ -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;
}
}

23
pages/study/index.vue
View File

@@ -146,10 +146,10 @@
<view class="body_job">
<view class="name">{{detailData.growName || ''}}</view>
<view class="job">
<text>{{detailData.organizationName || ''}}</text>
<view class="text_name">{{detailData.organizationName || ''}}</view>
<text> 学习状态：<text :style="{color: ['#FF8336','#31AF0D','#409EFF '][detailData.studyStatus]}">{{detailData.studyStatus==0?'未开始':detailData.studyStatus==1?'已完成':'进行中'}}</text></text>
</view>
<view class="plan_item">
<!-- <view class="plan_item">
<image class="image" src="../../static/images/learnpath/file.png" mode=""></image>
<text class="text" @click="planDown = true">共享文档</text>
<view class="plan_down" v-show="planDown">
@@ -167,7 +167,7 @@
</view>
</view>
</view>
</view>
</view> -->
</view>
<view class="body_item" v-if="detailData.remark">
<view class="body_top">
@@ -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;