课程长度样式、选择样式等逻辑

components/bussiness/course-times-stat copy.vue

+<!-- 课程时长统计 -->
+<template>
+  <div>
+    <ul class="lr-course-times" v-show="maxDuration > avgDuration">
+      <li>
+        <p>
+          课程总时长
+          <span>(所有课程数 {{totalSize}}门)</span>
+        </p>
+        <ProcessBar :processDataObj="processDataObj" :maxValue="maxDuration" :value="maxDuration"></ProcessBar>
+      </li>
+      <li>
+        <p>平均学习时长</p>
+        <ProcessBar2 barColor="#FFB01A" :maxValue="maxDuration" :value="avgDuration"></ProcessBar2>
+      </li>
+    </ul>
+    <ul class="lr-course-times" v-show="avgDuration > maxDuration">
+      <li>
+        <p>
+          课程总时长
+          <span>(所有课程数 {{totalSize}}门)</span>
+        </p>
+        <ProcessBar :processDataObj="processDataObj" :maxValue="avgDuration" :value="maxDuration"></ProcessBar>
+      </li>
+      <li>
+        <p>平均学习时长</p>
+        <ProcessBar2 barColor="#FFB01A" :maxValue="avgDuration" :value="avgDuration"></ProcessBar2>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import ProcessBar from "@/components/common/pica-process";
+import ProcessBar2 from "@/components/common/pica-process2";
+export default {
+  props: {
+    totalSize: {
+      type: Number | String,
+      default: 0
+    },
+    maxDuration: {
+      type: Number | String,
+      default: 100
+    },
+    avgDuration: {
+      type: Number | String,
+      default: 100
+    },
+    processDataObj: {
+      type: Object,
+      default: () => {
+        return {
+          maxValue: 100,
+          value: 0
+        }
+      }
+    },
+  },
+  components: {
+    ProcessBar,
+    ProcessBar2
+  },
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.lr-course-times {
+  margin: 20px 15px;
+  li {
+    margin: 20px 0;
+    p {
+      height: 14px;
+      line-height: 14px;
+      margin: 6px 0;
+      font-size: 14px;
+      color: #676869;
+      span {
+        font-size: 14px;
+        font-weight: 400;
+        color: #979899;
+      }
+    }
+  }
+}
+</style>

components/bussiness/course-times-stat.vue

@@ -11,7 +11,7 @@
       </li>
       <li>
         <p>平均学习时长</p>
-        <ProcessBar barColor="#FFB01A" :maxValue="maxDuration" :value="avgDuration"></ProcessBar>
+        <ProcessBar barColor="#FFB01A" :processDataObj="processDataObj" :maxValue="maxDuration" :value="avgDuration"></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="avgDuration"></ProcessBar>
+        <ProcessBar :processDataObj="processDataObj" :maxValue="avgDuration" :value="maxDuration"></ProcessBar>
       </li>
       <li>
         <p>平均学习时长</p>
-        <ProcessBar barColor="#FFB01A" :maxValue="avgDuration" :value="maxDuration"></ProcessBar>
+        <ProcessBar barColor="#FFB01A" :processDataObj="processDataObj" :maxValue="avgDuration" :value="avgDuration"></ProcessBar>
       </li>
     </ul>
   </div>
@@ -56,7 +56,7 @@ export default {
     },
   },
   components: {
-    ProcessBar
+    ProcessBar,
   },
   methods: {}
 };

components/common/common-area-select.vue

@@ -39,7 +39,12 @@ export default {
       areaDegree: 'areaDegree'
     }),
     isNotVisible() {
-      return this.orgList.length == 0 || this.areaDegree == 0 || this.areaDegree == 1 || this.areaDegree == 2
+      if(this.orgList.length == 0 || this.areaDegree == 0 || this.areaDegree == 1 || this.areaDegree == 2) {
+        return true;
+      } else {
+        return false;
+      }
+      // return this.orgList.length == 0 || this.areaDegree == 0 || this.areaDegree == 1 || this.areaDegree == 2
     }
   },
   // watch: {

components/common/pica-area.vue

@@ -15,7 +15,7 @@
               {{
               value.provinceName
               ? value.provinceName
-              : '请选择1'
+              : '请选择'
               }}
             </li>
             <li
@@ -23,7 +23,7 @@
               :class="{ active: isShowCity }"
               class="item"
               @click="tabAddressClick(2)"
-            >{{ value.cityName ? value.cityName : '请选择2' }}</li>
+            >{{ value.cityName ? value.cityName : '请选择' }}</li>
             <li
               v-show="value.cityName && rank>2"
               :class="{ active: isShowCounty }"
@@ -31,7 +31,7 @@
               @click="tabAddressClick(3)"
             >
               {{
-              value.countyName ? value.countyName : '请选择3'
+              value.countyName ? value.countyName : '请选择'
               }}
             </li>
             <li
@@ -39,7 +39,7 @@
               :class="{ active: isShowTown }"
               class="item"
               @click="tabAddressClick(4)"
-            >{{ value.townName ? value.townName : '请选择4' }}</li>
+            >{{ value.townName ? value.townName : '请选择' }}</li>
           </ul>
           <div class="address-content" @touchmove.stop>
             <ul v-show="isShowProvince" id="province">
@@ -300,12 +300,12 @@ export default {
       // 当前选中的样式
       this.areaList.provinceList.map(a => (a.selected = false));
       this.areaList.provinceList[idx].selected = true;
+      this.setAreaDegree(item.degree)
       if(item.degree == 0){
         return;
       }
       if(item.degree == 3 || item.degree == 4){
         // 调用机构接口
-        this.setAreaDegree(item.degree)
         this.getHospitalsByRegionId(this.queryParams);
         // return;
       }
@@ -339,12 +339,12 @@ export default {
       // 当前选中的样式
       this.areaList.cityList.map(a => (a.selected = false));
       this.areaList.cityList[idx].selected = true;
+      this.setAreaDegree(item.degree)
       if(item.degree == 0){
         return;
       }
       if(item.degree == 3 || item.degree == 4){
         // 调用机构接口
-        this.setAreaDegree(item.degree)
         this.getHospitalsByRegionId(this.queryParams);
         // return;
       }
@@ -373,12 +373,12 @@ export default {
       // 当前选中的样式
       this.areaList.countyList.map(a => (a.selected = false));
       this.areaList.countyList[idx].selected = true;
+      this.setAreaDegree(item.degree)
       if(item.degree == 0){
         return;
       }
       if(item.degree == 3 || item.degree == 4){
         // 调用机构接口
-        this.setAreaDegree(item.degree)
         this.getHospitalsByRegionId(this.queryParams);
         // return;
       }
@@ -402,12 +402,12 @@ export default {
       this.queryParams.regionId = item.id;
       this.value.townName = item.label;
       this.value.patientAddress = `${this.value.provinceName}${this.value.cityName}${this.value.countyName}${this.value.townName}`;
+      this.setAreaDegree(item.degree)
       if(item.degree == 0){
         return;
       }
       if(item.degree == 3 || item.degree == 4){
         // 调用机构接口
-        this.setAreaDegree(item.degree)
         this.getHospitalsByRegionId(this.queryParams);
         // return;
       }

components/common/pica-process.vue

@@ -35,6 +35,10 @@ export default {
     unitName: {
       type: String,
       default: '分钟'
+    },
+    processWidth: {
+      type: String,
+      default: '0px'
     }
   },
   data() {
@@ -42,12 +46,6 @@ export default {
       maxPocessWidth: '0px'
     }
   },
-
-  // computed: {
-  //   test() {
-
-  //   }
-  // },
   watch: {
     processDataObj: {
       handler(newVal) {
@@ -55,33 +53,20 @@ export default {
           let clientWidth = window.outerWidth || document.body.clientWidth || document.documentElement.clientWidth;
           let maxWidth = clientWidth - this.valueDescWidth;
           let ratio = 1;
-          if(this.processDataObj.maxDuration && this.processDataObj.maxDuration < this.processDataObj.avgDuration) {
-            ratio = this.processDataObj.maxDuration / this.processDataObj.avgDuration;
-          }
-          if(!this.processDataObj.maxDuration) {
-            ratio = 0.01;
+          if(this.maxValue && this.maxValue < this.value) {
+            ratio = this.maxValue / this.value;
           }
-          this.maxPocessWidth = Math.round(ratio * maxWidth) + 'px'    
+          if(this.value && this.maxValue > this.value) {
+            ratio = this.value / this.maxValue;
+          }          
+          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.avgDuration) {
-      //     ratio = this.value / this.avgDuration;
-      //   }
-      //   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 :processDataObj="processDataObj" :totalSize="courseInfo.totalSize" :maxDuration="courseInfo.pCourseTotalTime" :avgDuration="courseInfo.pCourseAvg"></CourseTimesStat>
+      <CourseTimesStat :totalSize="courseInfo.totalSize" :maxDuration="courseInfo.pCourseTotalTime" :avgDuration="courseInfo.pCourseAvg" :processDataObj="processDataObj"></CourseTimesStat>
       <CommonSplitLine></CommonSplitLine>
       <CommonTitle title="课程列表"></CommonTitle>
       <CourseTimesList :dataList="courseInfo.pCourseList"></CourseTimesList>
@@ -269,9 +269,9 @@ export default {
       },
       projectInfo: {
         certFlag: 0, // 项目证书情况 0：无证；1：单证书；2：多证书
-        existCourse: 1, // 是否显示课程分析 1：显示 2：不显示
-        existEffect: 1, // 是否显示学习效果分析 1：显示 2：不显示
-        existExam: 1, // 是否显示考试分析 1：显示 2：不显示
+        existCourse: 2, // 是否显示课程分析 1：显示 2：不显示
+        existEffect: 2, // 是否显示学习效果分析 1：显示 2：不显示
+        existExam: 2, // 是否显示考试分析 1：显示 2：不显示
         roleType: 0, // 0：普通人 1：内部管理员 2：项目负责人 3：次级负责人
         status: 0 // 是否显示查看原始数据 1：显示 2：不显示
       },

pages/rank-days.vue

@@ -87,6 +87,6 @@ export default {
 </script>
 <style lang="less" scoped>
 .mt-10 {
-  margin-top: -10px !important;
+  margin-top: 10px !important;
 }
 </style>
\ No newline at end of file