课程平均学习时长的长度问题

components/bussiness/course-times-stat.vue

@@ -7,11 +7,11 @@
           课程总时长
           <span>(所有课程数 {{totalSize}}门)</span>
         </p>
-        <ProcessBar :processDataObj="processDataObj" :maxValue="maxDuration" :value="maxDuration"></ProcessBar>
+        <ProcessBar :processDataObj="processDataObj" :maxValue="maxDuration | convert" :value="maxDuration | convert"></ProcessBar>
       </li>
       <li>
         <p>平均学习时长</p>
-        <ProcessBar barColor="#FFB01A" :processDataObj="processDataObj" :maxValue="maxDuration" :value="avgDuration"></ProcessBar>
+        <ProcessBar barColor="#FFB01A" :processDataObj="processDataObj" :maxValue="maxDuration | convert" :value="avgDuration | convert"></ProcessBar>
       </li>
     </ul>
     <ul class="lr-course-times" v-show="avgDuration > maxDuration">
@@ -20,11 +20,11 @@
           课程总时长
           <span>(所有课程数 {{totalSize}}门)</span>
         </p>
-        <ProcessBar :processDataObj="processDataObj" :maxValue="avgDuration" :value="maxDuration"></ProcessBar>
+        <ProcessBar :processDataObj="processDataObj" :maxValue="avgDuration | convert" :value="maxDuration | convert"></ProcessBar>
       </li>
       <li>
         <p>平均学习时长</p>
-        <ProcessBar barColor="#FFB01A" :processDataObj="processDataObj" :maxValue="avgDuration" :value="avgDuration"></ProcessBar>
+        <ProcessBar barColor="#FFB01A" :processDataObj="processDataObj" :maxValue="avgDuration | convert" :value="avgDuration | convert"></ProcessBar>
       </li>
     </ul>
   </div>
@@ -55,6 +55,12 @@ export default {
       }
     },
   },
+  filters: {
+    convert: function (value, unitName = '分钟') {
+      if(!value) return 0 + unitName;
+      return Math.ceil(value / 60)
+    },
+  },
   components: {
     ProcessBar,
   },

components/common/pica-process.vue

 <!-- Tabs组件 -->
 <template>
   <div class="common-process">
-    <span class="bar" :style="{'width': maxPocessWidth, 'background': barColor}"></span><span class="desc">{{value | convert}}</span>
+    <span class="bar" :style="{'width': maxPocessWidth, 'background': barColor}"></span><span class="desc">{{value}}</span>
   </div>
 </template>
 <script>
@@ -46,12 +46,6 @@ export default {
       maxPocessWidth: '0px'
     }
   },
-  filters: {
-    convert: function (value, unitName = '分钟') {
-      if(!value) return 0 + unitName;
-      return Math.ceil(value / 60) + unitName
-    },
-  },
   watch: {
     processDataObj: {
       handler(newVal) {
@@ -59,13 +53,14 @@ export default {
           let clientWidth = window.outerWidth || document.body.clientWidth || document.documentElement.clientWidth;
           let maxWidth = clientWidth - this.valueDescWidth;
           let ratio = 1;
+          // debugger
           if(this.maxValue && this.maxValue < this.value) {
             ratio = this.maxValue / this.value;
           }
           if(this.value && this.maxValue > this.value) {
             ratio = this.value / this.maxValue;
           }
-          if(this.value <= 1 || this.maxValue <= 1 || ratio <= 0.01) {
+          if(this.value < 1 || this.maxValue < 1 || ratio <= 0.01) {
             this.maxPocessWidth = '1px'
           } else {
             this.maxPocessWidth = Math.round(ratio * maxWidth) + 'px'