Skip to content

P
pica-learning-report
提交 14c0f1a9 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

对接部分接口

上级 834dae45
隐藏空白字符变更
内嵌 并排
正在显示 包含 1092 行增加 和 188 行删除
components/bussiness/charts/chart-column-horizontal-tc.vue 0 → 100644
浏览文件 @ 14c0f1a9
<!-- 柱状图-竖向 -->
<template>
<section class="chart-column-vtc">
<div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
</section>
</template>
<script>
import { format } from "path";
let vm = null;
export default {
props: {
id: {
type: String,
default: "chartColumnTCId"
},
colors: {
type: Array,
default: () => [
"#FFB01B",
"#39AF9A",
"#5D7092",
"#FF9A4B",
"#abb7bb",
"#76d2d2"
]
}
},
data() {
return {
chartWidth: "300px",
chartHeight: "350px"
};
},
created() {
if (process.client) {
let clientWidth =
window.outerWidth ||
document.body.clientWidth ||
document.documentElement.clientWidth;
this.chartWidth = (clientWidth * 0.9).toFixed(0) + 'px';
console.log(clientWidth);
}
},
mounted() {
vm = this;
this.drawColumn();
},
methods: {
// 画
drawColumn() {
// 基于准备好的dom，初始化echarts实例
let chartColumn = this.$echarts.init(document.getElementById(this.id));
// 绘制图表
let options = {
color: vm.colors,
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
top: 20,
data: ["培训前正确率", "培训后正确率"],
textStyle: {
fontSize: 12,
// fontWeight: "bolder",
color: "#676869"
}
},
grid: {
left: "3%",
right: "6%",
bottom: "6%",
containLabel: true
},
lineStyle: {
color: "#676869"
},
xAxis: {
axisTick: false,
type: "value",
axisLabel: {
formatter: "{value}",
textStyle: {
color: "#676869"
}
},
axisLine: {
lineStyle: {
color: "#efefef",
width: 1
}
}
},
yAxis: {
axisTick: false,
type: "category",
data: ["生活方式干预", "硕士", "本科", "大专", "中专以下"],
textStyle: {
fontSize: 12,
color: "#676869"
},
axisLabel: {
formatter: "{value}",
textStyle: {
color: "#676869"
}
},
axisLine: {
lineStyle: {
color: "#efefef",
width: 1
}
}
},
series: [
{
name: "培训前正确率",
data: [12, 200, 150, 80, 70, 110, 130],
type: "bar",
barWidth: 15 //柱图宽度
},
{
name: "培训后正确率",
data: [120, 20, 160, 80, 70, 110, 130],
type: "bar",
barWidth: 15 //柱图宽度
}
]
};
chartColumn.setOption(options);
}
}
};
</script>
<style lang="scss" scoped>
.chart-column-vtc {
position: relative;
top: -6px;
// height: 280px;
margin: 15px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.04);
border-radius: 6px;
border: 1px solid rgba(231, 232, 233, 1);
}
</style>
components/bussiness/charts/chart-column-vertical-tc.vue 0 → 100644
浏览文件 @ 14c0f1a9
<!-- 柱状图-竖向 -->
<template>
<section class="chart-column-vtc">
<div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
</section>
</template>
<script>
import { format } from "path";
let vm = null;
export default {
props: {
id: {
type: String,
default: "chartColumnTCId"
},
colors: {
type: Array,
default: () => [
"#FFB01B",
"#39AF9A",
"#5D7092",
"#FF9A4B",
"#abb7bb",
"#76d2d2"
]
}
},
data() {
return {
chartWidth: "300px",
chartHeight: "320px"
};
},
created() {
if (process.client) {
let clientWidth =
window.outerWidth ||
document.body.clientWidth ||
document.documentElement.clientWidth;
this.chartWidth = (clientWidth * 0.9).toFixed(0) + 'px';
console.log(clientWidth);
}
},
mounted() {
vm = this;
this.drawColumn();
},
methods: {
// 画
drawColumn() {
// 基于准备好的dom，初始化echarts实例
let chartColumn = this.$echarts.init(document.getElementById(this.id));
// 绘制图表
let options = {
color: vm.colors,
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
top: 20,
data: ["培训前正确率", "培训后正确率"],
textStyle: {
fontSize: 12,
// fontWeight: "bolder",
color: "#676869"
}
},
grid: {
left: "3%",
right: "6%",
bottom: "6%",
containLabel: true
},
lineStyle: {
color: "#676869"
},
yAxis: {
axisTick: false,
type: "value",
axisLabel: {
formatter: "{value}",
textStyle: {
color: "#676869"
}
},
axisLine: {
lineStyle: {
color: "#efefef",
width: 1
}
}
},
xAxis: {
axisTick: false,
type: "category",
data: ["博士", "硕士", "本科", "大专", "中专以下", "其他"],
textStyle: {
fontSize: 12,
color: "#676869"
},
axisLabel: {
formatter: "{value}",
textStyle: {
color: "#676869"
}
},
axisLine: {
lineStyle: {
color: "#efefef",
width: 1
}
}
},
series: [
{
name: "培训前正确率",
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
barWidth: 15 //柱图宽度
},
{
name: "培训后正确率",
data: [120, 20, 160, 80, 70, 110, 130],
type: "bar",
barWidth: 15 //柱图宽度
}
]
// series: [
// {
// name: "获优秀人数",
// type: "bar",
// stack: "总量",
// barWidth: 16, //柱图宽度
// label: {
// normal: {
// show: false,
// position: "insideRight"
// }
// },
// data: [320, 302, 301, 334, 390, 330, 320]
// },
// {
// name: "获及格人数",
// type: "bar",
// stack: "总量",
// barWidth: 16, //柱图宽度
// label: {
// normal: {
// show: false,
// position: "insideRight"
// }
// },
// data: [120, 132, 101, 134, 90, 230, 210]
// },
// {
// name: "未获证人数",
// type: "bar",
// stack: "总量",
// barWidth: 16, //柱图宽度
// label: {
// normal: {
// show: false,
// position: "insideRight"
// }
// },
// data: [220, 182, 191, 234, 290, 330, 310]
// }
// ]
};
chartColumn.setOption(options);
}
}
};
</script>
<style lang="scss" scoped>
.chart-column-vtc {
position: relative;
top: -6px;
// height: 280px;
margin: 15px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.04);
border-radius: 6px;
border: 1px solid rgba(231, 232, 233, 1);
}
</style>
components/bussiness/charts/chart-column-vertical.vue
浏览文件 @ 14c0f1a9
<!-- 柱状图-竖向 --> <!-- 柱状图-竖向 -->
<template> <template>
<section class="chart-pie"> <section class="chart-pie">
<div :id="id" :style="{width: '100%', height: '320px'}"></div> <div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
</section> </section>
</template> </template>
<script> <script>
...@@ -23,10 +23,34 @@ export default { ...@@ -23,10 +23,34 @@ export default {
"#abb7bb", "#abb7bb",
"#76d2d2" "#76d2d2"
] ]
}, }
}, },
data() { data() {
return {}; return {
chartWidth: "300px",
chartHeight: "235px"
};
},
created() {
if (process.client) {
let clientWidth =
window.outerWidth ||
document.body.clientWidth ||
document.documentElement.clientWidth;
this.chartWidth = (clientWidth * 0.9).toFixed(0) + 'px';
console.log(clientWidth);
// if (clientWidth <= 320) {
// this.chartWidth = "260px";
// } else if (clientWidth <= 360) {
// this.chartWidth = "320px";
// } else if (clientWidth <= 375) {
// this.chartWidth = "340px";
// } else if (clientWidth <= 414) {
// this.chartWidth = "375px";
// } else {
// this.chartWidth = (clientWidth * 0.8).toFixed(0) + 'px';
// }
}
}, },
mounted() { mounted() {
vm = this; vm = this;
...@@ -47,16 +71,17 @@ export default { ...@@ -47,16 +71,17 @@ export default {
type: "shadow" // 默认为直线，可选为：'line' | 'shadow' type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
} }
}, },
legend: { // legend: {
top: 20, // top: 20,
data: ["获优秀人数", "获及格人数", "未获证人数"], // data: ["获优秀人数", "获及格人数", "未获证人数"],
textStyle: { // textStyle: {
fontSize: 12, // fontSize: 12,
// fontWeight: "bolder", // // fontWeight: "bolder",
color: "#676869" // color: "#676869"
} // }
}, // },
grid: { grid: {
top: "10%",
left: "3%", left: "3%",
right: "6%", right: "6%",
bottom: "6%", bottom: "6%",
...@@ -84,7 +109,7 @@ export default { ...@@ -84,7 +109,7 @@ export default {
xAxis: { xAxis: {
axisTick: false, axisTick: false,
type: "category", type: "category",
data: ["其他", "中专以下", "大专", "本科", "硕士", "博士"], data: ["其他", "中专以下", "大专", "本科", "硕士"],
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "#676869" color: "#676869"
...@@ -108,55 +133,8 @@ export default { ...@@ -108,55 +133,8 @@ export default {
data: [120, 200, 150, 80, 70, 110, 130], data: [120, 200, 150, 80, 70, 110, 130],
type: "bar", type: "bar",
barWidth: 20 //柱图宽度 barWidth: 20 //柱图宽度
},
{
name: "获及格人数",
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
barWidth: 20 //柱图宽度
} }
] ]
// series: [
// {
// name: "获优秀人数",
// type: "bar",
// stack: "总量",
// barWidth: 16, //柱图宽度
// label: {
// normal: {
// show: false,
// position: "insideRight"
// }
// },
// data: [320, 302, 301, 334, 390, 330, 320]
// },
// {
// name: "获及格人数",
// type: "bar",
// stack: "总量",
// barWidth: 16, //柱图宽度
// label: {
// normal: {
// show: false,
// position: "insideRight"
// }
// },
// data: [120, 132, 101, 134, 90, 230, 210]
// },
// {
// name: "未获证人数",
// type: "bar",
// stack: "总量",
// barWidth: 16, //柱图宽度
// label: {
// normal: {
// show: false,
// position: "insideRight"
// }
// },
// data: [220, 182, 191, 234, 290, 330, 310]
// }
// ]
}; };
chartColumn.setOption(options); chartColumn.setOption(options);
} }
......
components/bussiness/course-times-list.vue 0 → 100644
浏览文件 @ 14c0f1a9
<!-- 课程列表组件 -->
<template>
<div class="corse-times-list">
<ul class="title">
<li>课程名</li>
<li>课程时长</li>
<li>人均学习时长</li>
</ul>
<ul class="list">
<li v-for="(item, index) in rankList" :key="index">
<span>高血压降压药物药…</span>
<span>60分钟</span>
<span>23分钟</span>
</li>
</ul>
</div>
</template>
<script>
// {
// "subId":10000,
// "subName":null,
// "certCount":0,
// "joinCount":0,
// "certRate":0,
// "costTime":2000
// }
export default {
props: {
rankList: {
type: Array,
default: () => [
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
}
]
}
},
methods: {
getRankImgUrl(index) {
return require(`../../assets/images/rank-${index + 1}.png`);
}
}
};
</script>
<style scoped lang="scss">
.corse-times-list {
font-size: 14px;
.title {
display: flex;
flex-direction: row;
padding: 0 15px;
justify-content: space-between;
height: 50px;
line-height: 50px;
background: #e3efed;
border-radius: 6px 6px 0px 0px;
li {
font-size: 14px;
font-weight: 400;
color: #449284;
}
li:nth-child(1) {
flex: 2;
}
li:nth-child(2) {
flex: 1;
}
li:nth-child(3) {
flex: 1;
}
}
.list {
font-size: 16px;
margin: 0 15px 20px;
li {
display: flex;
flex-direction: row;
height: 60px;
line-height: 60px;
justify-content: space-between;
border-bottom: 1px solid #f0f1f2;
span {
font-weight: 400;
color: #373839;
}
span:nth-child(1) {
flex: 2;
}
span:nth-child(2) {
flex: 1;
}
span:nth-child(3) {
text-align: right;
flex: 1;
}
}
}
}
</style>
\ No newline at end of file
components/bussiness/course-times.vue → components/bussiness/course-times-stat.vue
浏览文件 @ 14c0f1a9
<!-- Tabs组件 --> <!-- 课程时长统计 -->
<template> <template>
<ul class="lr-course-times"> <div>
<li> <ul class="lr-course-times" v-show="maxDuration > avgDuration">
<p> <li>
课程总时长 <p>
<span>(所有课程数 2门)</span> 课程总时长
</p> <span>(所有课程数 2门)</span>
<ProcessBar :maxValue="maxDuration" :value="maxDuration"></ProcessBar> </p>
</li> <ProcessBar :maxValue="maxDuration" :value="maxDuration"></ProcessBar>
<li> </li>
<p>平均学习时长</p> <li>
<ProcessBar barColor="#FFB01A" :maxValue="maxDuration" :value="avgDuration"></ProcessBar> <p>平均学习时长</p>
</li> <ProcessBar barColor="#FFB01A" :maxValue="maxDuration" :value="avgDuration"></ProcessBar>
</ul> </li>
</ul>
<ul class="lr-course-times" v-show="avgDuration > maxDuration">
<li>
<p>
课程总时长
<span>(所有课程数 2门)</span>
</p>
<ProcessBar :maxValue="avgDuration" :value="maxDuration"></ProcessBar>
</li>
<li>
<p>平均学习时长</p>
<ProcessBar barColor="#FFB01A" :maxValue="avgDuration" :value="avgDuration"></ProcessBar>
</li>
</ul>
</div>
</template> </template>
<script> <script>
import ProcessBar from "@/components/common/pica-process"; import ProcessBar from "@/components/common/pica-process";
......
components/bussiness/exam-list.vue 0 → 100644
浏览文件 @ 14c0f1a9
<!-- 考试列表组件 -->
<template>
<div class="exam-list-wrapper">
<ul class="title">
<li>考试名</li>
<li>参与通过率</li>
</ul>
<ul class="list">
<li v-for="(item, index) in rankList" :key="index">
<span>高血压降压药物药物物理学…</span>
<span>83%</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
rankList: {
type: Array,
default: () => [
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
},
{
province: "福建省",
order: 1
}
]
}
},
methods: {
getRankImgUrl(index) {
return require(`../../assets/images/rank-${index + 1}.png`);
}
}
};
</script>
<style scoped lang="scss">
.exam-list-wrapper {
font-size: 14px;
.title {
display: flex;
flex-direction: row;
padding: 0 15px;
justify-content: space-between;
height: 50px;
line-height: 50px;
background: #e3efed;
border-radius: 6px 6px 0px 0px;
li {
font-size: 14px;
font-weight: 400;
color: #449284;
}
li:nth-child(1) {
flex: 2;
}
li:nth-child(2) {
flex: 1;
text-align: right;
}
}
.list {
font-size: 16px;
margin: 0 15px 20px;
li {
display: flex;
flex-direction: row;
height: 60px;
line-height: 60px;
justify-content: space-between;
border-bottom: 1px solid #f0f1f2;
span {
font-weight: 400;
color: #373839;
}
span:nth-child(1) {
flex: 2;
}
span:nth-child(2) {
text-align: right;
flex: 1;
}
}
}
}
</style>
\ No newline at end of file
components/bussiness/ranking-item-days.vue
浏览文件 @ 14c0f1a9
...@@ -2,7 +2,10 @@ ...@@ -2,7 +2,10 @@
<template> <template>
<ul class="rank-item"> <ul class="rank-item">
<li v-for="(item, index) in rankList" :key="index"> <li v-for="(item, index) in rankList" :key="index">
<div class="order">1</div> <div class="order">
<img v-if="index === 0 || index === 1 || index === 2" :src="getRankImgUrl(index)" alt="">
<span v-else>{{index + 1}}</span>
</div>
<div class="content"> <div class="content">
<p class="desc-3">{{item.subName}}</p> <p class="desc-3">{{item.subName}}</p>
<!-- <p class="desc-2">完成人数 8860 | 参与人数 101</p> --> <!-- <p class="desc-2">完成人数 8860 | 参与人数 101</p> -->
...@@ -41,7 +44,12 @@ export default { ...@@ -41,7 +44,12 @@ export default {
order: 1, order: 1,
},] },]
} }
} },
methods: {
getRankImgUrl(index) {
return require(`../../assets/images/rank-${index + 1}.png`);
}
},
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -60,6 +68,11 @@ export default { ...@@ -60,6 +68,11 @@ export default {
margin-right: 15px; margin-right: 15px;
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
img {
width: 26px;
height: 32px;
margin-top: 24px;
}
} }
.content { .content {
flex: 1; flex: 1;
......
components/bussiness/ranking-item.vue
浏览文件 @ 14c0f1a9
...@@ -2,17 +2,18 @@ ...@@ -2,17 +2,18 @@
<template> <template>
<ul class="rank-item"> <ul class="rank-item">
<li v-for="(item, index) in studyRank" :key="index"> <li v-for="(item, index) in studyRank" :key="index">
<section class="order"> <div class="order">
1 <img v-if="index === 0 || index === 1 || index === 2" :src="getRankImgUrl(index)" alt />
</section> <span v-else>{{index + 1}}</span>
<section class="content"> </div>
<div class="content">
<p class="desc-1">{{item.subName}}</p> <p class="desc-1">{{item.subName}}</p>
<p class="desc-2">完成人数 {{item.certCount}} | 参与人数 {{item.certCount}}</p> <p class="desc-2">完成人数 {{item.certCount}} | 参与人数 {{item.certCount}}</p>
</section> </div>
<section class="ratio"> <div class="ratio">
<p class="desc-1">{{(item.certRate * 100).toFixed(0)}}%</p> <p class="desc-1">{{(item.certRate * 100).toFixed(0)}}%</p>
<p class="desc-2">完成比例</p> <p class="desc-2">完成比例</p>
</section> </div>
</li> </li>
</ul> </ul>
</template> </template>
...@@ -21,75 +22,115 @@ export default { ...@@ -21,75 +22,115 @@ export default {
props: { props: {
studyRank: { studyRank: {
type: Array, type: Array,
default: () => [{ default: () => [
province: '福建省', {
order: 1, subId: 10000,
},{ subName: "福建省",
province: '福建省', certCount: 0,
order: 1, joinCount: 0,
},{ certRate: 0,
province: '福建省', costTime: 2000
order: 1, },
},{ {
province: '福建省', subId: 10000,
order: 1, subName: "上海市",
},] certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: "浙江省",
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: "江苏省",
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: "安徽省",
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
}
]
} }
}, },
watch: { watch: {
studyRank: { studyRank: {
handler(newValue, oldValue) { handler(newValue, oldValue) {
return newValue return newValue;
}, },
deep: true deep: true
} }
}, },
} methods: {
getRankImgUrl(index) {
return require(`../../assets/images/rank-${index + 1}.png`);
}
}
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.rank-item { .rank-item {
margin: 0 15px; margin: 0 15px;
li { li {
height: 78px;
display: flex;
flex-direction: row;
// margin: 20px 0;
border-bottom: 1px solid #f0f1f2;
.order {
width: 25px;
height: 78px; height: 78px;
display: flex; line-height: 78px;
flex-direction: row; margin-right: 15px;
// margin: 20px 0; text-align: center;
border-bottom: 1px solid #F0F1F2; font-size: 20px;
.order { img {
width: 25px; width: 26px;
height: 78px; height: 32px;
line-height: 78px; margin-top: 24px;
margin-right: 15px;
text-align: center;
font-size: 20px;
}
.content {
flex: 1;
padding-top: 20px;
// height: 78px;
// line-height: 78px;
}
.ratio {
padding-top: 20px;
width: 60px;
justify-content: right;
text-align: right;
} }
} }
.desc-1 { .content {
height: 16px; flex: 1;
line-height: 16px; padding-top: 20px;
padding-bottom: 10px; // height: 78px;
font-size: 16px; // line-height: 78px;
font-weight: 700; }
color: #373839; .ratio {
padding-top: 20px;
width: 60px;
justify-content: right;
text-align: right;
} }
.desc-2 { }
height: 12px; .desc-1 {
line-height: 12px; height: 16px;
// padding-bottom: 10px; line-height: 16px;
font-size: 12px; padding-bottom: 10px;
font-weight: 400; font-size: 16px;
color: #979899; font-weight: 700;
} } color: #373839;
}
.desc-2 {
height: 12px;
line-height: 12px;
// padding-bottom: 10px;
font-size: 12px;
font-weight: 400;
color: #979899;
}
}
</style> </style>
\ No newline at end of file
components/common/common-bottom-info.vue
浏览文件 @ 14c0f1a9
<!-- （最下面）更多信息组件 --> <!-- （最下面）更多信息组件 -->
<template> <template>
<section class="common-bottom-info"> <div class="common-bottom-info">
<span>{{infoMsg}}</span> <span>{{infoMsg1}}</span>
</section> <span>{{infoMsg2}}</span>
</div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
infoMsg: { infoMsg1: {
type: String, type: String,
default: '更多报告信息请前往【云鹊医官网电脑端-工作站-学情报告】查看' default: "更多报告信息请前往"
},
infoMsg2: {
type: String,
default: "【云鹊医官网电脑端-工作站-学情报告】查看"
} }
}, }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.common-bottom-info { .common-bottom-info {
width: 100%; display: flex;
height: 35px; width: 100%;
line-height: 35px; height: 60px;
text-align: center; line-height: 60px;
color: #979899; flex-direction: column;
font-size: 12px; align-items: center;
background: #F8F9FA; text-align: center;
color: #979899;
font-size: 12px;
background: #f8f9fa;
margin-top: 10px;
span {
height: 20px;
line-height: 20px;
} }
span:nth-child(1) {
padding-top: 10px;
}
}
</style> </style>
\ No newline at end of file
components/common/common-header.vue
浏览文件 @ 14c0f1a9
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<template> <template>
<div class="common-header"> <div class="common-header">
<span class="left" @click="back"> <span class="left" @click="back">
<img style="widht:20px;height:20px;" src="../../assets/images/left-array-black.png" /> <img style="widht:20px;height:20px;" src="../../assets/images/left-arrow-black.png" />
</span> </span>
<span class="center">{{title}}</span> <span class="center">{{title}}</span>
<span v-show="needRightBtn" class="right" @click="back"> <span v-show="needRightBtn" class="right" @click="back">
......
components/common/common-no-more.vue 0 → 100644
浏览文件 @ 14c0f1a9
<template>
<section class="no-more">
<span class="no-more-sub"></span>
<span class="no-more-text">{{noMoreText}}</span>
<span class="no-more-sub"></span>
</section>
</template>
<script>
export default {
data() {
return {
noMoreText: '到底啦'
}
}
}
</script>
<style lang="scss" scoped>
// @import '@/assets/style/mixin';
.no-more {
display: flex;
height: 62px;
flex-direction: row;
justify-content: center;
align-items: center;
// background:rgba(248,248,248,1);
&-sub {
width: 84px;
// height: 26px);
border: 1px solid #F7F7F7;
border-bottom: 0;
}
&-text {
padding: 0 8px;
font-size: 14px;
color: #BEC2CC;
}
}
</style>
components/common/common-show-all.vue
浏览文件 @ 14c0f1a9
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="common-header"> <div class="common-header">
<span> <span>
查看全部 查看全部
<img src="../../assets/images/left-array-black.png" @click="back" /> <img src="../../assets/images/right-arrow-grey.png" @click="back" />
</span> </span>
</div> </div>
</template> </template>
...@@ -40,10 +40,10 @@ export default { ...@@ -40,10 +40,10 @@ export default {
font-weight: 400; font-weight: 400;
color: #979899; color: #979899;
img { img {
width: 14px; width: 7px;
height: 14px; height: 12px;
vertical-align: middle; vertical-align: middle;
padding-bottom: 4px; padding-bottom: 2px;
} }
} }
} }
......
components/common/common-title-mini.vue
浏览文件 @ 14c0f1a9
<!-- 标题组件 --> <!-- 标题组件 -->
<template> <template>
<ul class="common-title-mini"> <div class="common-title-wrapper">
<li class="left">{{title}}</li> <ul class="mini">
<li v-if="needRightBtn"></li> <li class="left">{{title}}</li>
</ul> <!-- <li class="right" v-if="needRightBtn">
<span>按获证比例排名</span>
<img src="../../assets/images/arr-down.png" alt />
</li>-->
<van-dropdown-menu v-if="needRightBtn">
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
</ul>
</div>
</template> </template>
<script> <script>
export default { export default {
...@@ -17,25 +25,97 @@ export default { ...@@ -17,25 +25,97 @@ export default {
default: false default: false
} }
}, },
data() {
return {
value1: 0,
value2: "a",
option1: [
{ text: "全部商品", value: 0 },
{ text: "新款商品", value: 1 },
{ text: "活动商品", value: 2 }
],
option2: [
{ text: "默认排序", value: "a" },
{ text: "好评排序", value: "b" },
{ text: "销量排序", value: "c" }
]
};
},
methods: {} methods: {}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss">
.common-title-mini { .common-title-wrapper {
// margin: 15px; position: relative;
margin: 30px 15px 20px; left: 0;
li { top: 0;
display: inline-block; z-index: 1;
&.left { height: 44px;
// width: 216px; line-height: 44px;
display: block; background: #f8f9fa;
height: 18px; .mini {
line-height: 18px; padding: 0px 15px;
font-size: 18px; display: flex;
font-weight: 700; flex-direction: row;
color: rgba(55, 56, 57, 1); justify-content: space-between;
height: 44px;
line-height: 44px;
background: #f8f9fa;
li {
display: inline-block;
&.left {
// width: 216px;
display: block;
height: 44px;
line-height: 44px;
font-size: 15px;
font-weight: 700;
color: #676869;
}
&.right {
font-size: 15px;
font-weight: 700;
color: #676869;
img {
width: 12px;
height: 12px;
}
}
}
}
.van-dropdown-menu {
height: 44px;
line-height: 44px;
background: #f8f9fa;
color: #676869 !important;
font-size: 15px;
font-weight: 700;
}
.van-dropdown-menu__title {
font-size: 15px;
font-weight: 700;
color: #676869 !important;
.van-ellipsis {
color: #676869 !important;
} }
} }
.van-dropdown-item__option--active,
.van-dropdown-item__option--active .van-dropdown-item__icon {
.van-cell__title span{
color: #449284 !important;
font-weight: 400 !important;
}
}
// .van-cell {
// // color: #676869 !important;
// font-size: 15px;
// font-weight: 400;
// }
.van-cell .van-cell--clickable .van-dropdown-item__option {
color: #676869 !important;
font-size: 15px;
font-weight: 400 !important;
}
} }
</style> </style>
nuxt.config.js
浏览文件 @ 14c0f1a9
...@@ -4,7 +4,7 @@ module.exports = { ...@@ -4,7 +4,7 @@ module.exports = {
** Headers of the page ** Headers of the page
*/ */
head: { head: {
title: '云鹊医-赋能基层医生', title: '云鹊医-学情报告',
meta: [ meta: [
{ charset: 'utf-8' }, { charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui' }, { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui' },
......
pages/index.vue
浏览文件 @ 14c0f1a9
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
<CommonTitle title="证书分布情况"></CommonTitle> <CommonTitle title="证书分布情况"></CommonTitle>
<ChartPie id="certPieId2" :pieData="allData.certData"></ChartPie> <ChartPie id="certPieId2" :pieData="allData.certData"></ChartPie>
<CommonTitle title="证书级别按学历分布情况"></CommonTitle> <CommonTitle title="证书级别按学历分布情况"></CommonTitle>
<ChartColumn></ChartColumn> <ChartColumnStack></ChartColumnStack>
<!-- <ChartColumn :columnData="eduColumnData"></ChartColumn> -->
<CommonSplitLine></CommonSplitLine> <CommonSplitLine></CommonSplitLine>
<CommonTitle title="培训情况排名"></CommonTitle> <CommonTitle title="培训情况排名"></CommonTitle>
<RankingList :studyRank="allData.studyRank"></RankingList> <RankingList :studyRank="allData.studyRank"></RankingList>
...@@ -33,10 +34,10 @@ ...@@ -33,10 +34,10 @@
<!-- 课程分析 --> <!-- 课程分析 -->
<article v-show="cIndex === 2" style="padding-top: 8px;"> <article v-show="cIndex === 2" style="padding-top: 8px;">
<CourseTimes maxDuration="27" avgDuration="16"></CourseTimes> <CourseTimesStat maxDuration="28" avgDuration="2"></CourseTimesStat>
<CommonSplitLine></CommonSplitLine> <CommonSplitLine></CommonSplitLine>
<CommonTitle title="课程列表"></CommonTitle> <CommonTitle title="课程列表"></CommonTitle>
<RankingItemDays></RankingItemDays> <CourseTimesList></CourseTimesList>
<CommonBottomInfo></CommonBottomInfo> <CommonBottomInfo></CommonBottomInfo>
</article> </article>
...@@ -46,10 +47,15 @@ ...@@ -46,10 +47,15 @@
<CommonSplitLine></CommonSplitLine> <CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成项目考试次数情况"></CommonTitle> <CommonTitle title="完成项目考试次数情况"></CommonTitle>
<ChartColumnVertical id="chartCourseTimesId" :colors="colors"></ChartColumnVertical> <ChartColumnVertical id="chartCourseTimesId" :colors="colors"></ChartColumnVertical>
<ShowAll class="mt-10"></ShowAll>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成项目考试分数情况"></CommonTitle> <CommonTitle title="完成项目考试分数情况"></CommonTitle>
<ChartColumnVertical id="chartCourseScoreId"></ChartColumnVertical> <ChartColumnVertical id="chartCourseScoreId"></ChartColumnVertical>
<ShowAll class="mt-10"></ShowAll>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="考试列表"></CommonTitle> <CommonTitle title="考试列表"></CommonTitle>
<RankingItemDays></RankingItemDays> <!-- <RankingItemDays></RankingItemDays> -->
<ExamList></ExamList>
<CommonBottomInfo></CommonBottomInfo> <CommonBottomInfo></CommonBottomInfo>
</article> </article>
...@@ -58,9 +64,10 @@ ...@@ -58,9 +64,10 @@
<CommonCard :needBG="needBG" :cardList="cardList"></CommonCard> <CommonCard :needBG="needBG" :cardList="cardList"></CommonCard>
<CommonSplitLine></CommonSplitLine> <CommonSplitLine></CommonSplitLine>
<CommonTitle title="不同学历完成项目前后正确率对比"></CommonTitle> <CommonTitle title="不同学历完成项目前后正确率对比"></CommonTitle>
<ChartColumnVertical id="chartCourseTimesId" :colors="colors"></ChartColumnVertical> <ChartColumnVerticalTC id="chartColumnVerticalTC"></ChartColumnVerticalTC>
<CommonTitle title="培训前后知识点掌握情况"></CommonTitle> <CommonTitle title="培训前后知识点掌握情况"></CommonTitle>
<ChartColumnVertical id="chartCourseScoreId"></ChartColumnVertical> <ChartColumnHorizontalTC id="ChartColumnVerticalTC2"></ChartColumnHorizontalTC>
<ShowAll class="mt-10"></ShowAll>
<CommonBottomInfo></CommonBottomInfo> <CommonBottomInfo></CommonBottomInfo>
</article> </article>
...@@ -84,13 +91,18 @@ import RankingItemDays from "@/components/bussiness/ranking-item-days"; ...@@ -84,13 +91,18 @@ import RankingItemDays from "@/components/bussiness/ranking-item-days";
import ChartPie from "@/components/bussiness/charts/chart-pie"; import ChartPie from "@/components/bussiness/charts/chart-pie";
import ChartPieEdu from "@/components/bussiness/charts/chart-pie-edu"; import ChartPieEdu from "@/components/bussiness/charts/chart-pie-edu";
import ChartPieTitle from "@/components/bussiness/charts/chart-pie-title"; import ChartPieTitle from "@/components/bussiness/charts/chart-pie-title";
import ChartColumn from "@/components/bussiness/charts/chart-column"; import ChartColumnStack from "@/components/bussiness/charts/chart-column-stack";
import ChartColumnVertical from "@/components/bussiness/charts/chart-column-vertical"; import ChartColumnVertical from "@/components/bussiness/charts/chart-column-vertical";
import ChartColumnVerticalTC from "@/components/bussiness/charts/chart-column-vertical-tc";
import ChartColumnHorizontalTC from "@/components/bussiness/charts/chart-column-horizontal-tc";
import PicaArea from "@/components/common/pica-area"; import PicaArea from "@/components/common/pica-area";
import PicaOrg from "@/components/common/pica-org"; import PicaOrg from "@/components/common/pica-org";
import CommonAreaSelect from "@/components/common/common-area-select"; import CommonAreaSelect from "@/components/common/common-area-select";
import ProcessBar from "@/components/common/pica-process"; import ProcessBar from "@/components/common/pica-process";
import CourseTimes from "@/components/bussiness/course-times"; import CourseTimesStat from "@/components/bussiness/course-times-stat";
import CourseTimesList from "@/components/bussiness/course-times-list";
import ExamList from "@/components/bussiness/exam-list";
import CommonCard from "@/components/common/common-card"; import CommonCard from "@/components/common/common-card";
import { getGeneralData } from "@/service/index" import { getGeneralData } from "@/service/index"
...@@ -109,14 +121,18 @@ export default { ...@@ -109,14 +121,18 @@ export default {
ShowAll, ShowAll,
CommonBottomInfo, CommonBottomInfo,
RankingItemDays, RankingItemDays,
ChartColumn, ChartColumnStack,
PicaArea, PicaArea,
PicaOrg, PicaOrg,
CommonAreaSelect, CommonAreaSelect,
ProcessBar, ProcessBar,
CourseTimes, CourseTimesStat,
CourseTimesList,
CommonCard, CommonCard,
ChartColumnVertical, ChartColumnVertical,
ExamList,
ChartColumnVerticalTC,
ChartColumnHorizontalTC
}, },
data() { data() {
return { return {
...@@ -242,5 +258,8 @@ export default { ...@@ -242,5 +258,8 @@ export default {
width: 100%; width: 100%;
} }
} }
.mt-10 {
margin-top: 0;
}
} }
</style> </style>
pages/rank-days.vue
浏览文件 @ 14c0f1a9
<template> <template>
<div> <section>
<CommonHeader title="完成天数排名"></CommonHeader> <CommonHeader title="完成天数排名"></CommonHeader>
<CommonTitle title="证书分布情况"></CommonTitle> <CommonTitleMini :title="listTitle"></CommonTitleMini>
<RankingItemDays :rankList="rankList"></RankingItemDays> <RankingItemDays :rankList="rankList" class="mt-10"></RankingItemDays>
</div> <CommonNoMore></CommonNoMore>
</section>
</template> </template>
<script> <script>
import CommonHeader from "@/components/common/common-header"; import CommonHeader from "@/components/common/common-header";
import CommonTitle from "@/components/common/common-title"; import CommonTitleMini from "@/components/common/common-title-mini";
import RankingItemDays from "@/components/bussiness/ranking-item-days"; import RankingItemDays from "@/components/bussiness/ranking-item-days";
import CommonNoMore from "@/components/common/common-no-more";
export default { export default {
props: { props: {
rankList: { rankList: {
...@@ -16,7 +18,7 @@ export default { ...@@ -16,7 +18,7 @@ export default {
default: () => [ default: () => [
{ {
subId: 10000, subId: 10000,
subName: null, subName: '福建省',
certCount: 0, certCount: 0,
joinCount: 0, joinCount: 0,
certRate: 0, certRate: 0,
...@@ -24,7 +26,7 @@ export default { ...@@ -24,7 +26,7 @@ export default {
}, },
{ {
subId: 10000, subId: 10000,
subName: null, subName: '上海市',
certCount: 0, certCount: 0,
joinCount: 0, joinCount: 0,
certRate: 0, certRate: 0,
...@@ -32,7 +34,7 @@ export default { ...@@ -32,7 +34,7 @@ export default {
}, },
{ {
subId: 10000, subId: 10000,
subName: null, subName: '浙江省',
certCount: 0, certCount: 0,
joinCount: 0, joinCount: 0,
certRate: 0, certRate: 0,
...@@ -40,7 +42,7 @@ export default { ...@@ -40,7 +42,7 @@ export default {
}, },
{ {
subId: 10000, subId: 10000,
subName: null, subName: '江苏省',
certCount: 0, certCount: 0,
joinCount: 0, joinCount: 0,
certRate: 0, certRate: 0,
...@@ -48,7 +50,7 @@ export default { ...@@ -48,7 +50,7 @@ export default {
}, },
{ {
subId: 10000, subId: 10000,
subName: null, subName: '安徽省',
certCount: 0, certCount: 0,
joinCount: 0, joinCount: 0,
certRate: 0, certRate: 0,
...@@ -58,14 +60,20 @@ export default { ...@@ -58,14 +60,20 @@ export default {
} }
}, },
data() { data() {
return {}; return {
listTitle: '共34个省'
};
}, },
components: { components: {
CommonHeader, CommonHeader,
CommonTitle, CommonTitleMini,
RankingItemDays RankingItemDays,
CommonNoMore
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.mt-10 {
margin-top: 0px !important;
}
</style> </style>
\ No newline at end of file
pages/rank-edu.vue 0 → 100644
浏览文件 @ 14c0f1a9
<template>
<section>
<CommonHeader title="培训情况排名"></CommonHeader>
<CommonTitleMini :title="listTitle" :needRightBtn="needRightBtn"></CommonTitleMini>
<RankingList></RankingList>
<CommonNoMore></CommonNoMore>
</section>
</template>
<script>
import CommonHeader from "@/components/common/common-header";
import CommonTitleMini from "@/components/common/common-title-mini";
import CommonNoMore from "@/components/common/common-no-more";
import RankingList from "@/components/bussiness/ranking-item";
export default {
props: {
rankList: {
type: Array,
default: () => [
{
subId: 10000,
subName: '福建省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '上海市',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '浙江省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '江苏省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
},
{
subId: 10000,
subName: '安徽省',
certCount: 0,
joinCount: 0,
certRate: 0,
costTime: 2000
}
]
}
},
data() {
return {
listTitle: '共34个省',
needRightBtn: true
};
},
components: {
CommonHeader,
CommonTitleMini,
CommonNoMore,
RankingList
},
};
</script>
<style lang="less" scoped>
.mt-10 {
margin-top: 0px !important;
}
</style>
\ No newline at end of file
plugins/vue-inject.js
浏览文件 @ 14c0f1a9
import Vue from 'vue' import Vue from 'vue'
import rocNative from '@/utils/jsbridge' import rocNative from '@/utils/jsbridge'
import echarts from 'echarts' import echarts from 'echarts'
import { DropdownMenu, DropdownItem } from 'vant';
Vue.use(DropdownMenu).use(DropdownItem);
// import picaArea from 'pica-area' // import picaArea from 'pica-area'
// Vue.use(picaArea) // Vue.use(picaArea)
......
static/css/common.css
浏览文件 @ 14c0f1a9
...@@ -97,3 +97,10 @@ ins, a { ...@@ -97,3 +97,10 @@ ins, a {
text-decoration: none; text-decoration: none;
} }
.van-dropdown-menu__title {
color: red !important;
}
.van-ellipsis {
color: red !important;
}
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或