From 95ba2f107b5dbeafd090bbfef57dcebaa84eabf2 Mon Sep 17 00:00:00 2001
From: zhangsir <z1823137@163.com>
Date: Thu, 20 Jun 2024 17:11:58 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=AF=E5=BE=84=E5=9B=BE=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/study/Growth.vue     |   2 +-
 src/views/study/GrowthPath.vue | 154 +++++++++++++++++++++++++++++++--
 2 files changed, 146 insertions(+), 10 deletions(-)

diff --git a/src/views/study/Growth.vue b/src/views/study/Growth.vue
index ebbe603e..932f3e2b 100644
--- a/src/views/study/Growth.vue
+++ b/src/views/study/Growth.vue
@@ -7,7 +7,7 @@
             <el-popover
               placement="right"
               width="437"
-              trigger="click"
+              trigger="hover"
               :visible-arrow="false"
               v-model="explainBody"
               popper-class="growth_explain"
diff --git a/src/views/study/GrowthPath.vue b/src/views/study/GrowthPath.vue
index 09cf23ef..4e855e1c 100644
--- a/src/views/study/GrowthPath.vue
+++ b/src/views/study/GrowthPath.vue
@@ -28,7 +28,7 @@
           <div class="detailContent">
             <div :class="dataList.length <= 7 ? 'detailbgc' : 'detailAllbgc'">
               <div v-for="item, index in dataList" :key="index">
-                <el-popover popper-class="pathdetails" placement="right-start" width="360" trigger="click"
+                <el-popover popper-class="pathdetails" placement="right-start" width="360" trigger="hover"
                   :visible-arrow="false">
                   <div style="font-size: 14px;padding: 20px 20px 10px; ">
                     <div style="font-size: 16px;font-weight: 600;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="item.title">{{ item.title }}</div>
@@ -41,7 +41,7 @@
                       <el-progress :percentage="item.currentRatio || 0"></el-progress>
                     </div>
                     <div style="margin: 20px 0;">课程讲师：{{item.teacherName}}</div>
-                    <div>课程简介：{{item.introduce}}</div>
+                    <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">课程简介：{{item.introduce}}</div>
                     <el-button style="width: 100%;margin-top: 20px;" type="primary" @click="goStudy(item)">
                       <div style="display: flex;justify-content: space-between;align-items: center;">
                         <div></div>
@@ -56,12 +56,14 @@
                     </el-button>
                   </div>
                   <div slot="reference" class="address" :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 + 'px',
                     top: getPosition(item.name, index).top + 'px'
                   }">
                     <div class="icon">
-                      <div class="icon-content" :style="{ background: getColor(item.flag, 1) }">
+                      <div 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 }}%
                       </div>
                       <!-- <div v-else class="icon-content" style="background-color: #fff;">
@@ -78,7 +80,17 @@
                 <div :style="{
                   left: (getPosition(item.name, index).left + 55) + 'px',
                   top: getPosition(item.name, index).top + 'px'
-                }" class="iconTitle" :title="item.title">{{ item.title.length>15?item.title.slice(0,15)+'...':item.title }}</div>
+                  }" class="iconTitle" :title="item.title">{{ item.title.length>15?item.title.slice(0,15)+'...':item.title }}
+                </div>
+                <div :style="{
+                  left: (getPosition(item.name, index).left + 55) + 'px',
+                  top: (getPosition(item.name, index).top + 60) + 'px'
+                  }" class="growth_explain1" v-if="item.id == istabId && explainBody">
+                  <div class="growth_explain_text">
+                    <div class="text">《{{item.title}}》是您当前所在位置，请您从这里开始学习哦～</div>
+                    <div class="explain_close"  @click="explainBody = false"></div>
+                  </div>
+                </div>  
               </div>
               <div class="text_end">您的学习之旅已结束</div>
             </div>
@@ -95,8 +107,8 @@
     </div>
     <!-- 嵌入 -->
     <div v-else class="growth-content">
-      <div class="pathdetails">
-        <div class="detailinfo">
+      <div class="pathdetails" style="padding: 0">
+        <div class="detailinfo" style="margin: 0">
           <div class="select">
             <div class="select-radio" style="margin-left: 0;"><span style="background: #34CA2B;"></span> 必修</div>
             <div class="select-radio"><span style="background: #FE9C4A;"></span>选修</div>
@@ -249,23 +261,35 @@
 
       </div>
     </el-drawer>
+    <el-backtop :bottom="650" :right="119">
+      <div class="back-to-top">
+        <div class="img"></div>
+        <div class="text">继续学习之旅</div>
+      </div>
+    </el-backtop>
   </div>
 </template>
 
 <script>
 import portalHeader from '@/components/PortalHeader.vue';
 import {taskList} from '@/api/growth';
+import { scrollTo } from '@/utils/scroll-to'
 export default {
   name: 'GrowthPath',
   components: { portalHeader },
   data() {
     return {
+      notColor: [],
+      flagToggle: 0,
+      flagToggleTwo: 1,
+      istabId: '',
+      explainBody: true,
       isIframe: this.$route.query.isTrue,
       switchFalse: false,
       showUClass: false,
       colorAttrValue: {
         0: ['#FFD04B', "#FBA944"],
-        1: ["#b8e3b8", "#8ac84a"],
+        1: ["#b8e3b8", "#8ac84a","#FBA944","#8ac84a","#EE423D"],
         2: ['#FFD04B', '#FBA944']
       },
       iconAttrs: {
@@ -366,10 +390,37 @@ export default {
             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);
+          //判断显示提示弹窗
+          console.log(this.dataList[foundItemIndex],'xixixi')
+          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);
+    },
     cylClick() {
       window.open("https://u.boe.com/pc/course?keyword=创新力专区");
     },
@@ -570,11 +621,54 @@ export default {
         console.log(item,'其他')
       }
     },
-  }
+  },
+  watch: {
+    switchFalse(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>
 
 <style scoped lang="scss">
+.back-to-top{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .img{
+    width: 50px;
+    height: 50px;
+    background-image: url('../../assets/images/growth/plane.png');
+    background-repeat: no-repeat;
+    background-size: 100%;
+  }
+  .text{
+    width: 108px;
+    height: 22px;
+    line-height: 22px;
+    background: #0876FF;
+    border-radius: 11px;
+    font-weight: 400;
+    font-size: 14px;
+    color: #FFFFFF;
+    text-align: center;
+  }
+}
+.el-backtop{
+  box-shadow: none;
+  border-radius: 0;
+  background-color: transparent;
+}
 ::v-deep .el-dialog__header {
   border-bottom: 1px solid #E8E8E8;
   padding-bottom: 20px;
@@ -659,6 +753,48 @@ export default {
   padding: 0 20px;
   white-space: nowrap;
 }
+.growth_explain1{
+  position: absolute;
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 487px;
+  height: 170px;
+  margin: -37px;
+  background: url("../../assets/images/growth/explain.png") no-repeat;
+  background-size: 100%;
+  .growth_explain_text{
+    width: 376px;
+    height: 56px;
+    font-weight: 400;
+    font-size: 14px;
+    color: #333333;
+    line-height: 28px;
+    text-align: left;
+    position: relative;
+    .text{
+      display: -webkit-box;
+      word-wrap: break-word;
+      word-break:break-all;
+      overflow: hidden;
+      text-overflow:ellipsis;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp:2;
+    }
+    .explain_close{
+      cursor: pointer;
+      background-image: url(../../assets/images/growth/close.png);
+      z-index: 99999;
+      width: 26px;
+      height: 26px;
+      position: absolute;
+      right: -21px;
+      top: -26px;
+    }
+  }
+
+}
 .text_end{
   position: absolute;
   right: 69px;