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

对接部分接口

上级 834dae45
<!-- 柱状图-竖向 -->
<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>
<!-- 柱状图-竖向 -->
<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>
<!-- 柱状图-竖向 -->
<template>
<section class="chart-pie">
<div :id="id" :style="{width: '100%', height: '320px'}"></div>
<div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
</section>
</template>
<script>
......@@ -23,10 +23,34 @@ export default {
"#abb7bb",
"#76d2d2"
]
},
}
},
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() {
vm = this;
......@@ -47,16 +71,17 @@ export default {
type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
top: 20,
data: ["获优秀人数", "获及格人数", "未获证人数"],
textStyle: {
fontSize: 12,
// fontWeight: "bolder",
color: "#676869"
}
},
// legend: {
// top: 20,
// data: ["获优秀人数", "获及格人数", "未获证人数"],
// textStyle: {
// fontSize: 12,
// // fontWeight: "bolder",
// color: "#676869"
// }
// },
grid: {
top: "10%",
left: "3%",
right: "6%",
bottom: "6%",
......@@ -84,7 +109,7 @@ export default {
xAxis: {
axisTick: false,
type: "category",
data: ["其他", "中专以下", "大专", "本科", "硕士", "博士"],
data: ["其他", "中专以下", "大专", "本科", "硕士"],
textStyle: {
fontSize: 12,
color: "#676869"
......@@ -108,55 +133,8 @@ export default {
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar",
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);
}
......
<!-- 课程列表组件 -->
<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
<!-- Tabs组件 -->
<!-- 课程时长统计 -->
<template>
<ul class="lr-course-times">
<div>
<ul class="lr-course-times" v-show="maxDuration > avgDuration">
<li>
<p>
课程总时长
......@@ -13,6 +14,20 @@
<ProcessBar barColor="#FFB01A" :maxValue="maxDuration" :value="avgDuration"></ProcessBar>
</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>
<script>
import ProcessBar from "@/components/common/pica-process";
......
<!-- 考试列表组件 -->
<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
......@@ -2,7 +2,10 @@
<template>
<ul class="rank-item">
<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">
<p class="desc-3">{{item.subName}}</p>
<!-- <p class="desc-2">完成人数 8860 | 参与人数 101</p> -->
......@@ -41,7 +44,12 @@ export default {
order: 1,
},]
}
},
methods: {
getRankImgUrl(index) {
return require(`../../assets/images/rank-${index + 1}.png`);
}
},
}
</script>
<style scoped lang="scss">
......@@ -60,6 +68,11 @@ export default {
margin-right: 15px;
text-align: center;
font-size: 20px;
img {
width: 26px;
height: 32px;
margin-top: 24px;
}
}
.content {
flex: 1;
......
......@@ -2,17 +2,18 @@
<template>
<ul class="rank-item">
<li v-for="(item, index) in studyRank" :key="index">
<section class="order">
1
</section>
<section class="content">
<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">
<p class="desc-1">{{item.subName}}</p>
<p class="desc-2">完成人数 {{item.certCount}} | 参与人数 {{item.certCount}}</p>
</section>
<section class="ratio">
</div>
<div class="ratio">
<p class="desc-1">{{(item.certRate * 100).toFixed(0)}}%</p>
<p class="desc-2">完成比例</p>
</section>
</div>
</li>
</ul>
</template>
......@@ -21,40 +22,74 @@ export default {
props: {
studyRank: {
type: Array,
default: () => [{
province: '福建省',
order: 1,
},{
province: '福建省',
order: 1,
},{
province: '福建省',
order: 1,
},{
province: '福建省',
order: 1,
},]
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
}
]
}
},
watch: {
studyRank: {
handler(newValue, oldValue) {
return newValue
return newValue;
},
deep: true
}
},
}
methods: {
getRankImgUrl(index) {
return require(`../../assets/images/rank-${index + 1}.png`);
}
}
};
</script>
<style scoped lang="scss">
.rank-item {
.rank-item {
margin: 0 15px;
li {
height: 78px;
display: flex;
flex-direction: row;
// margin: 20px 0;
border-bottom: 1px solid #F0F1F2;
border-bottom: 1px solid #f0f1f2;
.order {
width: 25px;
height: 78px;
......@@ -62,6 +97,11 @@ export default {
margin-right: 15px;
text-align: center;
font-size: 20px;
img {
width: 26px;
height: 32px;
margin-top: 24px;
}
}
.content {
flex: 1;
......@@ -91,5 +131,6 @@ export default {
font-size: 12px;
font-weight: 400;
color: #979899;
} }
}
}
</style>
\ No newline at end of file
<!-- (最下面)更多信息组件 -->
<template>
<section class="common-bottom-info">
<span>{{infoMsg}}</span>
</section>
<div class="common-bottom-info">
<span>{{infoMsg1}}</span>
<span>{{infoMsg2}}</span>
</div>
</template>
<script>
export default {
props: {
infoMsg: {
infoMsg1: {
type: String,
default: '更多报告信息请前往【云鹊医官网电脑端-工作站-学情报告】查看'
}
default: "更多报告信息请前往"
},
}
infoMsg2: {
type: String,
default: "【云鹊医官网电脑端-工作站-学情报告】查看"
}
}
};
</script>
<style lang="scss" scoped>
.common-bottom-info {
.common-bottom-info {
display: flex;
width: 100%;
height: 35px;
line-height: 35px;
height: 60px;
line-height: 60px;
flex-direction: column;
align-items: center;
text-align: center;
color: #979899;
font-size: 12px;
background: #F8F9FA;
background: #f8f9fa;
margin-top: 10px;
span {
height: 20px;
line-height: 20px;
}
span:nth-child(1) {
padding-top: 10px;
}
}
</style>
\ No newline at end of file
......@@ -2,7 +2,7 @@
<template>
<div class="common-header">
<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 class="center">{{title}}</span>
<span v-show="needRightBtn" class="right" @click="back">
......
<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>
......@@ -3,7 +3,7 @@
<div class="common-header">
<span>
查看全部
<img src="../../assets/images/left-array-black.png" @click="back" />
<img src="../../assets/images/right-arrow-grey.png" @click="back" />
</span>
</div>
</template>
......@@ -40,10 +40,10 @@ export default {
font-weight: 400;
color: #979899;
img {
width: 14px;
height: 14px;
width: 7px;
height: 12px;
vertical-align: middle;
padding-bottom: 4px;
padding-bottom: 2px;
}
}
}
......
<!-- 标题组件 -->
<template>
<ul class="common-title-mini">
<div class="common-title-wrapper">
<ul class="mini">
<li class="left">{{title}}</li>
<li v-if="needRightBtn"></li>
<!-- <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>
<script>
export default {
......@@ -17,25 +25,97 @@ export default {
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: {}
};
</script>
<style lang="scss" scoped>
.common-title-mini {
// margin: 15px;
margin: 30px 15px 20px;
<style lang="scss">
.common-title-wrapper {
position: relative;
left: 0;
top: 0;
z-index: 1;
height: 44px;
line-height: 44px;
background: #f8f9fa;
.mini {
padding: 0px 15px;
display: flex;
flex-direction: row;
justify-content: space-between;
height: 44px;
line-height: 44px;
background: #f8f9fa;
li {
display: inline-block;
&.left {
// width: 216px;
display: block;
height: 18px;
line-height: 18px;
font-size: 18px;
height: 44px;
line-height: 44px;
font-size: 15px;
font-weight: 700;
color: #676869;
}
&.right {
font-size: 15px;
font-weight: 700;
color: rgba(55, 56, 57, 1);
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>
......@@ -4,7 +4,7 @@ module.exports = {
** Headers of the page
*/
head: {
title: '云鹊医-赋能基层医生',
title: '云鹊医-学情报告',
meta: [
{ 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' },
......
......@@ -9,7 +9,8 @@
<CommonTitle title="证书分布情况"></CommonTitle>
<ChartPie id="certPieId2" :pieData="allData.certData"></ChartPie>
<CommonTitle title="证书级别按学历分布情况"></CommonTitle>
<ChartColumn></ChartColumn>
<ChartColumnStack></ChartColumnStack>
<!-- <ChartColumn :columnData="eduColumnData"></ChartColumn> -->
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="培训情况排名"></CommonTitle>
<RankingList :studyRank="allData.studyRank"></RankingList>
......@@ -33,10 +34,10 @@
<!-- 课程分析 -->
<article v-show="cIndex === 2" style="padding-top: 8px;">
<CourseTimes maxDuration="27" avgDuration="16"></CourseTimes>
<CourseTimesStat maxDuration="28" avgDuration="2"></CourseTimesStat>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="课程列表"></CommonTitle>
<RankingItemDays></RankingItemDays>
<CourseTimesList></CourseTimesList>
<CommonBottomInfo></CommonBottomInfo>
</article>
......@@ -46,10 +47,15 @@
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成项目考试次数情况"></CommonTitle>
<ChartColumnVertical id="chartCourseTimesId" :colors="colors"></ChartColumnVertical>
<ShowAll class="mt-10"></ShowAll>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成项目考试分数情况"></CommonTitle>
<ChartColumnVertical id="chartCourseScoreId"></ChartColumnVertical>
<ShowAll class="mt-10"></ShowAll>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="考试列表"></CommonTitle>
<RankingItemDays></RankingItemDays>
<!-- <RankingItemDays></RankingItemDays> -->
<ExamList></ExamList>
<CommonBottomInfo></CommonBottomInfo>
</article>
......@@ -58,9 +64,10 @@
<CommonCard :needBG="needBG" :cardList="cardList"></CommonCard>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="不同学历完成项目前后正确率对比"></CommonTitle>
<ChartColumnVertical id="chartCourseTimesId" :colors="colors"></ChartColumnVertical>
<ChartColumnVerticalTC id="chartColumnVerticalTC"></ChartColumnVerticalTC>
<CommonTitle title="培训前后知识点掌握情况"></CommonTitle>
<ChartColumnVertical id="chartCourseScoreId"></ChartColumnVertical>
<ChartColumnHorizontalTC id="ChartColumnVerticalTC2"></ChartColumnHorizontalTC>
<ShowAll class="mt-10"></ShowAll>
<CommonBottomInfo></CommonBottomInfo>
</article>
......@@ -84,13 +91,18 @@ import RankingItemDays from "@/components/bussiness/ranking-item-days";
import ChartPie from "@/components/bussiness/charts/chart-pie";
import ChartPieEdu from "@/components/bussiness/charts/chart-pie-edu";
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 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 PicaOrg from "@/components/common/pica-org";
import CommonAreaSelect from "@/components/common/common-area-select";
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 { getGeneralData } from "@/service/index"
......@@ -109,14 +121,18 @@ export default {
ShowAll,
CommonBottomInfo,
RankingItemDays,
ChartColumn,
ChartColumnStack,
PicaArea,
PicaOrg,
CommonAreaSelect,
ProcessBar,
CourseTimes,
CourseTimesStat,
CourseTimesList,
CommonCard,
ChartColumnVertical,
ExamList,
ChartColumnVerticalTC,
ChartColumnHorizontalTC
},
data() {
return {
......@@ -242,5 +258,8 @@ export default {
width: 100%;
}
}
.mt-10 {
margin-top: 0;
}
}
</style>
<template>
<div>
<section>
<CommonHeader title="完成天数排名"></CommonHeader>
<CommonTitle title="证书分布情况"></CommonTitle>
<RankingItemDays :rankList="rankList"></RankingItemDays>
</div>
<CommonTitleMini :title="listTitle"></CommonTitleMini>
<RankingItemDays :rankList="rankList" class="mt-10"></RankingItemDays>
<CommonNoMore></CommonNoMore>
</section>
</template>
<script>
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 CommonNoMore from "@/components/common/common-no-more";
export default {
props: {
rankList: {
......@@ -16,7 +18,7 @@ export default {
default: () => [
{
subId: 10000,
subName: null,
subName: '福建省',
certCount: 0,
joinCount: 0,
certRate: 0,
......@@ -24,7 +26,7 @@ export default {
},
{
subId: 10000,
subName: null,
subName: '上海市',
certCount: 0,
joinCount: 0,
certRate: 0,
......@@ -32,7 +34,7 @@ export default {
},
{
subId: 10000,
subName: null,
subName: '浙江省',
certCount: 0,
joinCount: 0,
certRate: 0,
......@@ -40,7 +42,7 @@ export default {
},
{
subId: 10000,
subName: null,
subName: '江苏省',
certCount: 0,
joinCount: 0,
certRate: 0,
......@@ -48,7 +50,7 @@ export default {
},
{
subId: 10000,
subName: null,
subName: '安徽省',
certCount: 0,
joinCount: 0,
certRate: 0,
......@@ -58,14 +60,20 @@ export default {
}
},
data() {
return {};
return {
listTitle: '共34个省'
};
},
components: {
CommonHeader,
CommonTitle,
RankingItemDays
CommonTitleMini,
RankingItemDays,
CommonNoMore
},
};
</script>
<style lang="less" scoped>
.mt-10 {
margin-top: 0px !important;
}
</style>
\ No newline at end of file
<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
import Vue from 'vue'
import rocNative from '@/utils/jsbridge'
import echarts from 'echarts'
import { DropdownMenu, DropdownItem } from 'vant';
Vue.use(DropdownMenu).use(DropdownItem);
// import picaArea from 'pica-area'
// Vue.use(picaArea)
......
......@@ -97,3 +97,10 @@ ins, a {
text-decoration: none;
}
.van-dropdown-menu__title {
color: red !important;
}
.van-ellipsis {
color: red !important;
}
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册