process有一点问题

components/bussiness/course-times-stat.vue

@@ -7,7 +7,7 @@
           课程总时长
           <span>(所有课程数 {{totalSize}}门)</span>
         </p>
-        <ProcessBar :maxValue="maxDuration" :value="maxDuration"></ProcessBar>
+        <ProcessBar :processDataObj="processDataObj" :maxValue="maxDuration" :value="maxDuration"></ProcessBar>
       </li>
       <li>
         <p>平均学习时长</p>
@@ -20,7 +20,7 @@
           课程总时长
           <span>(所有课程数 {{totalSize}}门)</span>
         </p>
-        <ProcessBar :maxValue="avgDuration" :value="avgDuration"></ProcessBar>
+        <ProcessBar :processDataObj="processDataObj" :maxValue="avgDuration" :value="avgDuration"></ProcessBar>
       </li>
       <li>
         <p>平均学习时长</p>
@@ -44,7 +44,16 @@ export default {
     avgDuration: {
       type: Number | String,
       default: 100
-    }
+    },
+    processDataObj: {
+      type: Object,
+      default: () => {
+        return {
+          maxValue: 100,
+          value: 0
+        }
+      }
+    },
   },
   components: {
     ProcessBar

components/common/common-header.vue

@@ -115,6 +115,7 @@ export default {
   position: absolute;
   left: 0px;
   top: 15px;
+  z-index: 2010;
   display: inline-block;
   width: 50px;
   height: 60px;
@@ -131,12 +132,13 @@ export default {
   background: #fff;
   color: #333;
   position: relative;
-  z-index: 109;
+  z-index: 2009;
   .nav-back {
     display: inline-block;
     position: absolute;
     left: 0px;
     top: 0;
+    z-index: 2010;
     height: 25px;
     width: 55px;
     padding-left: 15px;
@@ -164,6 +166,7 @@ export default {
     position: absolute;
     right: 16px;
     top: 0;
+    z-index: 2010;
     height: 20px;
     width: 20px;
   }
@@ -171,6 +174,7 @@ export default {
     position: relative;
     top: 10px;
     left: 0;
+    z-index: 2010;
     display: inline-block;
     width: 100%;
     /* padding:0 33px;*/
@@ -197,6 +201,7 @@ export default {
   position: fixed;
   top: 0;
   left: 0;
+  z-index: 2010;
   border-bottom: 0px solid #e7e7e7;
   background: #fff;
   /* height: 25px;*/

components/common/pica-process.vue

@@ -15,6 +15,15 @@ export default {
       type: Number | String,
       default: 0
     },
+    processDataObj: {
+      type: Object,
+      default: () => {
+        return {
+          maxValue: 100,
+          value: 0
+        }
+      }
+    },
     valueDescWidth: {
       type: Number | String,
       default: 120
@@ -30,25 +39,49 @@ export default {
   },
   data() {
     return {
-      maxPocessWidth: false
+      maxPocessWidth: '0px'
     }
   },
 
+  // computed: {
+  //   test() {
+
+  //   }
+  // },
+  watch: {
+    valueObj: {
+      handler(newVal) {
+        if(process.client) {
+          let clientWidth = window.outerWidth || document.body.clientWidth || document.documentElement.clientWidth;
+          let maxWidth = clientWidth - this.valueDescWidth;
+          let ratio = 1;
+          if(this.processDataObj.value && this.processDataObj.value < this.processDataObj.maxValue) {
+            ratio = this.processDataObj.value / this.processDataOb.maxValue;
+          }
+          if(!this.processDataObj.value) {
+            ratio = 0.01;
+          }
+          this.maxPocessWidth = Math.round(ratio * maxWidth) + 'px'    
+        }
+      },
+      deep: true
+    }
+  },
   mounted() {
       // let maxWidth = window.clien
       // scrollWidth offsetWidth
-      this.$nextTick(() => {
-        let clientWidth = window.outerWidth || document.body.clientWidth || document.documentElement.clientWidth;
-        let maxWidth = clientWidth - this.valueDescWidth;
-        let ratio = 1;
-        if(this.value && this.value < this.maxValue) {
-          ratio = this.value / this.maxValue;
-        }
-        if(!this.value) {
-          ratio = 0.01;
-        }
-        this.maxPocessWidth = Math.round(ratio * maxWidth) + 'px'    
-      })
+      // this.$nextTick(() => {
+      //   let clientWidth = window.outerWidth || document.body.clientWidth || document.documentElement.clientWidth;
+      //   let maxWidth = clientWidth - this.valueDescWidth;
+      //   let ratio = 1;
+      //   if(this.value && this.value < this.maxValue) {
+      //     ratio = this.value / this.maxValue;
+      //   }
+      //   if(!this.value) {
+      //     ratio = 0.01;
+      //   }
+      //   this.maxPocessWidth = Math.round(ratio * maxWidth) + 'px'    
+      // })
   },
   methods: {}
 };

pages/index.vue

@@ -55,7 +55,7 @@
 
     <!-- 课程分析 -->
     <article v-show="(cIndex === 2) && (projectInfo.existCourse == 1)" style="padding-top: 8px;">
-      <CourseTimesStat :totalSize="courseInfo.totalSize" :maxDuration="courseInfo.pCourseTotalTime" :avgDuration="courseInfo.pCourseAvg"></CourseTimesStat>
+      <CourseTimesStat ::processDataObj="processDataObj" :totalSize="courseInfo.totalSize" :maxDuration="courseInfo.pCourseTotalTime" :avgDuration="courseInfo.pCourseAvg"></CourseTimesStat>
       <CommonSplitLine></CommonSplitLine>
       <CommonTitle title="课程列表"></CommonTitle>
       <CourseTimesList :dataList="courseInfo.pCourseList"></CourseTimesList>
@@ -296,7 +296,9 @@ export default {
         educationEffectList: [],
         knowledgeEffectList: []
       },
+      processDataObj: {
 
+      }
     };
   },
   computed: {
@@ -466,6 +468,13 @@ export default {
     async getGeneralCourse(params) {
       await getGeneralCourse(params).then(res => {
         if (res.code === "000000") {
+          this.processDataObj = {
+            maxDuration: res.data.pCourseTotalTime,
+            avgDuration: res.data.pCourseAvg
+          }
+          this.processDataObj.maxDuration = res.data.pCourseTotalTime;
+          this.processDataObj.avgDuration = res.data.pCourseAvg;
+          // :totalSize="courseInfo.totalSize" :maxDuration="courseInfo.pCourseTotalTime"
           this.courseInfo = res.data;
         }
       });