提交 ac78f7f6 编写于 作者: guangjun.yang's avatar guangjun.yang

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

上级 ad565851
<!-- 课程时长统计 -->
<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>
......@@ -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: {}
};
......
......@@ -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: {
......
......@@ -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;
}
......
......@@ -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: {}
};
......
......@@ -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:不显示
},
......
......@@ -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
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册