Merge remote-tracking branch 'zshyx/250207-growth-prod-master_1202-zp' into dev0515

src/api/growth/growthpath.js

@@ -1,6 +1,6 @@
 // import ajax from '@/utils/xajax.js'
 import ajax from '../ajax';
-const baseURL = process.env.VUE_APP_GROWTH_API_PATH;
-// const baseURL = '/growth';
+// const baseURL = process.env.VUE_APP_GROWTH_API_PATH;
+const baseURL = '/growth';
 // 查询专业力必修列表
 export const listData = (obj) => ajax.get(baseURL, '/professional/student/studentGrowthList', { params: obj })

src/layout/components/AppMain.vue

@@ -6,7 +6,10 @@
         <!-- <div style="height: 20px;"></div> -->
       </div>
       <!-- width: 990px; -->
-      <div class="main-body" style="padding: 30px 20px;flex:1; background-color: #fff;margin-left: 20px;">
+      <div class="main-body" :style="{
+             backgroundColor: bgColor,
+             padding
+            }" style="flex:1; margin-left: 20px;">
         <!-- <div style="margin-bottom: 10px;padding:10px; border-bottom: 1px solid #dbdbdb;"> -->
           <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
             <el-breadcrumb-item :to="{ path: '/uc/index' }"><i class="el-icon-arrow-right"></i>个人中心</el-breadcrumb-item>
@@ -15,10 +18,12 @@
         <!-- </div> -->
         <transition name="fade-transform" mode="out-in">
           <keep-alive :include="cachedViews">
-            <div style="background-color: #FFFFFF;min-height: 600px;padding-bottom: 50px;">
+            <div :style="{
+             backgroundColor: bgColor
+            }" style="min-height: 600px;padding-bottom: 50px;">
             <router-view :key="key" />
             </div>
-          </keep-alive>
+          </keep-alive> 
         </transition>
       </div>
     </div>
@@ -39,7 +44,14 @@ export default {
       return this.$route.meta.title;
     },
     key() {
+      console.log(this.$route)
       return this.$route.path
+    },
+    bgColor() {
+     return this.$route.path === "/growth/growthPage" ? "rgba(0,0,0,0)" : "#fff";
+    },
+    padding(){
+      return this.$route.path === "/growth/growthPage" ? "0" : "30px 20px";
     }
   }
 }

src/views/growth/index.vue

@@ -1,160 +1,132 @@
 <template>
-  <div class="growth">
-    <header class="header">
-      <div class="f-a-c header-title">
-        <div style="margin-right: 8px">我的专业力必修</div>
-
-        <el-popover
-          placement="top-start"
-          width="400"
-          trigger="hover"
-          content="根据您所在的组织、标准岗位、任职资格等级，已为您匹配专业力必修任务，抓紧时间学习吧～"
-        >
-          <i
-            slot="reference"
-            style="color: #a1a1a1"
-            class="el-icon-question"
-          ></i>
-        </el-popover>
+  <div class="growth" v-loading="loading">
+    <div class="growth-left">
+      <div class="navbar">
+        <div style="display: flex; flex: 1">
+          <div class="nav-title">我的专业力必修</div>
+          <div class="nav-total">
+            <div class="total-num">35</div>
+            <div class="total-text">总任务数</div>
+          </div>
+          <div class="nav-total">
+            <div class="total-num">35</div>
+            <div class="total-text">已完成数量</div>
+          </div>
+          <div class="nav-total">
+            <div class="total-num">35</div>
+            <div class="total-text">未完成数量</div>
+          </div>
+        </div>
       </div>
-      <template v-if="list.length">
-        <el-dropdown trigger="click">
-          <el-button type="primary">
-            <div class="f-a-c">
-              <div class="select-active">{{ selectData.growthName }}</div>
-              <i class="el-icon-arrow-down el-icon--right"></i>
-            </div>
-          </el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item
-              v-for="item of list"
-              :disabled="item.id === selectData.id"
-            >
-              <div @click="select(item)">
-                {{ item.growthName }}
-              </div></el-dropdown-item
-            >
-          </el-dropdown-menu>
-        </el-dropdown>
-      </template>
-    </header>
 
-    <section class="container">
-      <template v-if="list.length">
-        <div class="title">
-          <div style="font-size: 20px">
-            {{ selectData.growthName }}
-          </div>
-          <div style="display: flex; align-items: center">
-            <div style="display: flex">
-              <div style="font-size: 18px; color: #333">学习状态：</div>
-              <div
-                style="font-size: 18px"
-                :style="{
-                  color:
-                    selectData.learningState === 0
-                      ? '#fe9400'
-                      : selectData.learningState === 1
-                      ? '#6ba158'
-                      : '#0079ee',
-                }"
-              >
-                {{
-                  selectData.learningState === 0
-                    ? "未开始"
-                    : selectData.learningState === 1
-                    ? "已完成"
-                    : "进行中"
-                }}
-              </div>
-            </div>
-            <div class="learning f-j-c">
-              <el-button
-                style="width: 100px; margin-left: 16px"
-                type="primary"
-                @click="jumpRouter"
-              >
-                学习
-              </el-button>
+      <div class="growth-item" v-for="item of list">
+        <div class="growth-nav">
+          <div class="growth-name">{{ item.growthName }}</div>
+          <div class="f-a-c">
+            <div
+              class="growth-state"
+              :style="{
+                color:
+                  item.learningState === 0
+                    ? '#999999'
+                    : item.learningState === 1
+                    ? '#6ba158'
+                    : '#F2903D',
+              }"
+            >
+              {{
+                item.learningState === 0
+                  ? "未开始"
+                  : item.learningState === 1
+                  ? "已完成"
+                  : "进行中"
+              }}
             </div>
+            <div class="growth-btn" @click="jumpRouter(item)">去学习</div>
           </div>
         </div>
-        <div class="content">
-          <div class="tip">
-            <div class="tip-title f-a-c">
-              <img class="icon" src="../../assets/images/shuoming.jpg" />
-              <div>说明</div>
-            </div>
-            <div class="tip-text">
-              {{ selectData.description || "暂无说明" }}
-            </div>
-          </div>
-          <div class="progress">
-            <div class="progress-title f-a-c">
-              <img class="icon" src="../../assets/images/jindu.jpg" />
-              <div>学习进度</div>
-            </div>
-            <div class="progress-text">
-              <div class="progress-item">
-                <div class="item-title">总任务</div>
-                <div class="item-progress">{{ selectData.totalTaskNum }}个</div>
-              </div>
-              <div class="progress-item">
-                <div class="item-title">必修进度</div>
-                <div class="item-progress">
-                  <el-progress
-                    :stroke-width="14"
-                    :text-inside="true"
-                    :percentage="requiredTaskCompletionRate"
-                  ></el-progress>
-                  <div class="mask">
-                    {{ selectData.requiredTaskCompletedNum }}/{{
-                      selectData.requiredTaskNum
-                    }}
-                  </div>
-                </div>
-                <div class="item-text">{{ requiredTaskCompletionRate }}%</div>
-              </div>
-              <div class="progress-item">
-                <div class="item-title">选修进度</div>
-                <div class="item-progress">
-                  <el-progress
-                    :stroke-width="14"
-                    :text-inside="true"
-                    :percentage="electiveTaskCompletionRate"
-                  ></el-progress>
-                  <div class="mask">
-                    {{ selectData.electiveTaskCompletedNum }}/{{
-                      selectData.electiveTaskNum
-                    }}
-                  </div>
-                </div>
-                <div class="item-text">{{ electiveTaskCompletionRate }}%</div>
-              </div>
-              <div class="progress-item">
-                <div class="item-title">总进度</div>
-                <div class="item-progress">
-                  <el-progress
-                    :stroke-width="14"
-                    :text-inside="true"
-                    :percentage="totalTaskCompletionRate"
-                  ></el-progress>
-                  <div class="mask">
-                    {{ selectData.totalTaskCompletedNum }}/{{
-                      selectData.totalTaskNum
-                    }}
-                  </div>
-                </div>
-                <div class="item-text">{{ totalTaskCompletionRate }}%</div>
-              </div>
-            </div>
-          </div>
+        <div class="tip-title">说明</div>
+        <div class="tip-content">
+          {{ item.description || "暂无说明" }}
         </div>
-      </template>
-      <template v-else>
-        <el-empty :image-size="200"></el-empty>
-      </template>
-    </section>
+        <div class="progress-title">学习进度</div>
+
+        <div class="progress-content">
+          <div class="f-j-b" style="margin-bottom: 10px">
+            <div class="f-a-c">
+              <div style="font-weight: 700; font-size: 16px; color: #333333">
+                必修进度
+              </div>
+              <div style="font-size: 20px; color: #999999; margin-left: 12px">
+                {{ item.requiredTaskCompletedNum }}/{{ item.requiredTaskNum }}
+              </div>
+            </div>
+            <div style="font-weight: bold; font-size: 24px; color: #0077ec">
+              {{ requiredTaskCompletionRate(item) }}%
+            </div>
+          </div>
+          <el-progress
+            :stroke-width="8"
+            :show-text="false"
+            :percentage="requiredTaskCompletionRate(item)"
+          ></el-progress>
+        </div>
+        <div class="progress-content">
+          <div class="f-j-b" style="margin-bottom: 10px">
+            <div class="f-a-c">
+              <div style="font-weight: 700; font-size: 16px; color: #333333">
+                选修进度
+              </div>
+              <div style="font-size: 20px; color: #999999; margin-left: 12px">
+                {{ item.electiveTaskCompletedNum }}/{{ item.electiveTaskNum }}
+              </div>
+            </div>
+            <div style="font-weight: bold; font-size: 24px; color: #0077ec">
+              {{ electiveTaskCompletionRate(item) }}%
+            </div>
+          </div>
+          <el-progress
+            :stroke-width="8"
+            :show-text="false"
+            :percentage="electiveTaskCompletionRate(item)"
+          ></el-progress>
+        </div>
+        <div class="progress-content">
+          <div class="f-j-b" style="margin-bottom: 10px">
+            <div class="f-a-c">
+              <div style="font-weight: 700; font-size: 16px; color: #333333">
+                总进度
+              </div>
+              <div style="font-size: 20px; color: #999999; margin-left: 12px">
+                {{ item.totalTaskCompletedNum }}/{{ item.totalTaskNum }}
+              </div>
+            </div>
+            <div style="font-weight: bold; font-size: 24px; color: #0077ec">
+              {{ totalTaskCompletionRate(item) }}%
+            </div>
+          </div>
+          <el-progress
+            :stroke-width="8"
+            :show-text="false"
+            :percentage="totalTaskCompletionRate(item)"
+          ></el-progress>
+        </div>
+      </div>
+    </div>
+    <div class="growth-right">
+      <div class="title">专业力必修</div>
+      <div
+        class="item-growth"
+        :class="selectData.id == item.id ? 'active' : ''"
+        v-for="item of list"
+      >
+        <div class="icon"></div>
+        <div>{{ item.growthName }}</div>
+      </div>
+    </div>
+    <template v-if="!list.length">
+      <el-empty :image-size="200"></el-empty>
+    </template>
   </div>
 </template>
 <script>
@@ -164,73 +136,65 @@ export default {
     return {
       selectData: {},
       list: [],
+      loading: false,
     };
   },
   computed: {
     // 完成进度
     totalTaskCompletionRate() {
-      if (
-        this.selectData.totalTaskCompletedNum &&
-        this.selectData.totalTaskNum
-      ) {
-        let num =
-          this.selectData.totalTaskCompletedNum / this.selectData.totalTaskNum;
-        num = num * 100;
-        num = num.toFixed(0);
-        return Number(num);
-      } else {
-        return 0;
-      }
+      return (item) => {
+        if (item.totalTaskCompletedNum && item.totalTaskNum) {
+          let num = item.totalTaskCompletedNum / item.totalTaskNum;
+          num = num * 100;
+          num = num.toFixed(0);
+          return Number(num);
+        } else {
+          return 0;
+        }
+      };
     },
     // 选修进度
     electiveTaskCompletionRate() {
-      if (
-        this.selectData.electiveTaskCompletedNum &&
-        this.selectData.electiveTaskNum
-      ) {
-        let num =
-          this.selectData.electiveTaskCompletedNum /
-          this.selectData.electiveTaskNum;
-        num = num * 100;
-        num = num.toFixed(0);
-        return Number(num);
-      } else {
-        return 0;
-      }
+      return (item) => {
+        if (item.electiveTaskCompletedNum && item.electiveTaskNum) {
+          let num = item.electiveTaskCompletedNum / item.electiveTaskNum;
+          num = num * 100;
+          num = num.toFixed(0);
+          return Number(num);
+        } else {
+          return 0;
+        }
+      };
     },
     // 必修进度
     requiredTaskCompletionRate() {
-      if (
-        this.selectData.requiredTaskCompletedNum &&
-        this.selectData.requiredTaskNum
-      ) {
-        let num =
-          this.selectData.requiredTaskCompletedNum /
-          this.selectData.requiredTaskNum;
-        num = num * 100;
-        num = num.toFixed(0);
-        return Number(num);
-      } else {
-        return 0;
-      }
+      return (item) => {
+        if (item.requiredTaskCompletedNum && item.requiredTaskNum) {
+          let num = item.requiredTaskCompletedNum / item.requiredTaskNum;
+          num = num * 100;
+          num = num.toFixed(0);
+          return Number(num);
+        } else {
+          return 0;
+        }
+      };
     },
   },
   methods: {
-    select(item) {
-      this.selectData = item;
-    },
-    jumpRouter() {
+    select(item) {},
+    jumpRouter(item) {
       let studentPath = process.env.VUE_APP_STUDENT_PATH;
-      let params = encodeURIComponent("routerId=" + this.selectData.id);
+      let params = encodeURIComponent("routerId=" + item.id);
       this.$router.push(
         "/forward?to=" + studentPath + "/growthList&params=" + params
       );
     },
   },
   created() {
+    this.loading = true;
     listData().then((res) => {
       this.list = res.data;
-      this.selectData = this.list[0];
+      this.loading = false;
     });
   },
 };
@@ -240,105 +204,130 @@ export default {
   display: flex;
   align-items: center;
 }
+.f-j-b {
+  display: flex;
+  justify-content: space-between;
+}
 .f-j-c {
   display: flex;
   justify-content: center;
 }
-.header {
+.growth {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  .header-title {
-    font-size: 24px;
-  }
-  .select-active {
-    font-size: 18px;
-    max-width: 300px;
-    white-space: nowrap; /* 防止文本换行 */
-    overflow: hidden; /* 隐藏溢出的内容 */
-    text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
-  }
-}
-.container {
-  .title {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 30px;
-    padding: 25px 40px;
-    font-size: 18px;
-    color: rgb(51, 121, 251);
-    border: 1px solid #e2eefd;
-    border-bottom: none;
-    background-image: linear-gradient(to bottom, #e2eefd, #ffffff);
-  }
-  .content {
-    border: 1px solid #e2eefd;
-    padding: 25px 50px;
-    .icon {
-      width: 40px;
-      height: 40px;
-      margin-right: 10px;
-    }
-    .tip-title,
-    .progress-title {
-      font-size: 24px;
-      font-weight: 700;
-    }
-    .tip-text {
-      font-size: 18px;
-      line-height: 35px;
-      margin-top: 20px;
-    }
-    .tip-text,
-    .progress-text {
-      padding-left: 50px;
-    }
-    .progress-text {
-      .el-form-item {
-        margin-bottom: 0;
+  .growth-left {
+    margin-right: 10px;
+
+    flex: 1;
+    .growth-item {
+      background: #ffffff;
+      padding: 30px 38px 66px 40px;
+      margin-bottom: 35px;
+      .progress-title {
+        font-weight: 700;
+        font-size: 20px;
+        color: #000000;
+        margin: 28px 0 20px 0;
+      }
+      .progress-content {
+        margin-bottom: 28px;
+      }
+      .tip-title {
+        font-weight: 700;
+        font-size: 20px;
+        color: #000000;
+        margin: 30px 0 10px 0;
+      }
+      .tip-content {
+        font-weight: 700;
+        font-size: 14px;
+        color: #333333;
+        line-height: 40px;
+      }
+      .growth-nav {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-bottom: 28px;
+        border-bottom: 2px solid #f5f5f5;
+      }
+      .growth-name {
+        font-weight: 500;
+        font-size: 18px;
+        color: #0071ed;
+      }
+      .growth-state {
+        font-size: 14px;
+        margin-right: 18px;
+      }
+      .growth-btn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 120px;
+        height: 36px;
+        background: #f2903d;
+        border-radius: 4px;
+        font-size: 16px;
+        color: #ffffff;
+        cursor: pointer;
       }
     }
-    .progress {
-      margin-top: 40px;
-    }
-    .progress-item {
+    .navbar {
       display: flex;
       align-items: center;
-      font-size: 14px;
-      margin-top: 20px;
-      .item-title {
-        width: 80px;
-        display: flex;
-        justify-content: flex-end;
-        margin-right: 20px;
-        font-size: 18px;
+      height: 130px;
+      padding-left: 40px;
+      margin-bottom: 10px;
+      color: #ffffff;
+      background-image: url(../../assets/images/growth/growth-bg.png);
+      .nav-title {
+        font-weight: 700;
+        font-size: 26px;
       }
-      .item-progress {
-        width: 400px;
-        position: relative;
-        font-size: 18px;
-        .mask {
-          position: absolute;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          top: 0;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          font-size: 12px;
-        }
+      .nav-total {
+        margin-left: 15%;
       }
-      .item-text {
-        color: #409eff;
-        margin-left: 8px;
-      }
-      ::v-deep.el-progress-bar__innerText {
-        display: none;
+      .total-num {
+        font-weight: bold;
+        font-size: 30px;
       }
     }
-    .learning {
-      padding: 45px 0;
+  }
+  .growth-right {
+    width: 464px;
+    margin-bottom: 35px;
+    background-color: #ffffff;
+    padding: 35px 20px 20px 30px;
+    .title {
+      font-size: 18px;
+      color: #000000;
+      font-weight: 700;
+      margin-bottom: 35px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .item-growth {
+      display: flex;
+      align-items: center;
+      border-radius: 5px;
+      font-size: 14px;
+      color: #666666;
+      padding: 15px 20px 15px 8px;
+    }
+    .icon {
+      width: 4px;
+      height: 4px;
+      background: #4c5564;
+      border-radius: 50%;
+      margin-right: 10px;
+    }
+    .active {
+      background: #e3edfe;
+      color: #000;
+      .icon {
+        background: #0077ec;
+      }
     }
   }
 }

vue.config.js

@@ -124,11 +124,11 @@ module.exports = {
     // 114.115.162.187 测试环境
     // 192.168.0.107 晋宇
     proxy: {
-      "/professional": {
-        // target: 'http://192.168.16.195:32002',
-        target: 'http://192.168.150.97:32002',
+      "/growth": {
+        target: 'https://u-pre.boe.com',
         changeOrigin: true,
       },
+      
       '/manageApi': {
         // 目标代理服务器地址
         target: 'https://u-pre.boe.com',