Skip to content

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

部分组件完成

上级 08843882
隐藏空白字符变更
内嵌 并排
正在显示 包含 189 行增加 和 78 行删除
components/bussiness/charts/chart-column.vue
浏览文件 @ 10c1c0ac
<!-- 饼图 -->
<template>
<section class="chart-pie">
<div id="chartColumnId" :style="{width: '100%', height: '320px'}"></div>
<div :id="id" :style="{width: '100%', height: '320px'}"></div>
</section>
</template>
<script>
......@@ -9,28 +9,24 @@ import { format } from "path";
let vm = null;
export default {
props: {
pieData: {
type: Array,
default: () => [
{ value: 335, name: "优秀证书" },
{ value: 310, name: "及格证书" },
{ value: 234, name: "未获证" }
]
}
id: {
type: String,
default: "chartlineId"
},
},
data() {
return {};
},
mounted() {
vm = this;
this.drawPie();
this.drawColumn();
},
methods: {
// 画
drawPie() {
drawColumn() {
// 基于准备好的dom，初始化echarts实例
let chartColumn = this.$echarts.init(
document.getElementById("chartColumnId")
document.getElementById(this.id)
);
// 绘制图表
let options = {
......@@ -147,13 +143,6 @@ export default {
]
};
chartColumn.setOption(options);
},
fmtLengend(name) {
console.log(name);
let item = this.pieData.find(item => {
return item.name === name;
});
return (item && item.value) || "";
}
}
};
......
components/bussiness/course-times.vue
浏览文件 @ 10c1c0ac
......@@ -19,11 +19,11 @@ import ProcessBar from "@/components/common/pica-process";
export default {
props: {
maxDuration: {
type: Number,
type: Number | String,
default: 100
},
avgDuration: {
type: Number,
type: Number | String,
default: 100
}
},
......
components/common/common-card.vue 0 → 100644
浏览文件 @ 10c1c0ac
<!-- Tabs组件 -->
<template>
<div class="common-card" :class="{'bg': needBG}">
<ul v-for="(item, index) in cardList" :key="index">
<li :class="{'bgf': needBG}">{{item.count}}{{item.unitName}}</li>
<li :class="{'bgf': needBG}">{{item.description}}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
cardList: {
type: Array,
default: () => [
{
count: 5,
unitName: "门",
description: "正式考试数"
},
{
count: 5,
unitName: "门",
description: "模拟考试数"
},
{
count: 60,
unitName: "道",
description: "所有考题数"
}
]
},
needBG: {
type: Boolean,
default: false
}
},
methods: {}
};
</script>
<style lang="scss" scoped>
.common-card {
display: flex;
margin: 30px 15px;
&.bg {
margin: 20px 15px;
padding: 30px 15px;
background: linear-gradient(
180deg,
rgba(6, 190, 182, 1) 0%,
rgba(72, 177, 191, 1) 100%
);
box-shadow: 0px 3px 10px 0px rgba(56, 179, 157, 0.3);
border-radius: 6px;
}
ul {
flex: 1;
height: 50px;
line-height: 50px;
text-align: center;
li:nth-child(1) {
height: 24px;
line-height: 24px;
font-size: 24px;
font-weight: 700;
&.bgf {
color: #fff !important;
}
color: #373839;
margin-bottom: 12px;
}
li:nth-child(2) {
height: 14px;
line-height: 14px;
font-size: 14px;
font-weight: 400;
color: #676869;
&.bgf {
color: rgba(255, 255, 255, 0.8) !important;
}
}
}
}
</style>
components/common/common-tabs.vue
浏览文件 @ 10c1c0ac
......@@ -12,13 +12,12 @@
<span class="over"></span>
<span class="border"></span>
</div>
</template>
<script>
export default {
data() {
return {
cIndex: 0
cIndex: 4
};
},
props: {
......@@ -29,7 +28,7 @@ export default {
"人群分析",
"课程分析",
"考试分析",
"考试分析"
"学习效果分析"
]
}
},
......@@ -52,13 +51,39 @@ export default {
top: 0;
left: 0;
z-index: 1;
.common-tabs {
white-space: nowrap;
overflow-x: auto;
// height: 30px;
padding-bottom: 6px;
li {
display: inline-block;
height: 30px;
line-height: 30px;
font-size: 13px;
font-weight: 700;
margin: 0 6px;
color: #979899;
background: #f0f1f2;
padding: 0 12px;
border-radius: 30px;
&:first-child {
margin-left: 15px;
}
&.active {
color: #449284;
background: #e3efed;
}
}
margin-top: 0;
}
.over {
display: block;
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
height: 6px;
height: 6px;
z-index: 2;
background: #fff;
// border-bottom: 1px solid red;
......@@ -70,36 +95,9 @@ export default {
bottom: -3px;
left: 0;
// padding-top: 6px;
border-bottom: 1px solid #F0F1F2;
border-bottom: 1px solid #f0f1f2;
position: absolute;
z-index: 2;
}
}
.common-tabs {
white-space: nowrap;
overflow-x: auto;
// height: 30px;
padding-bottom: 6px;
li {
display: inline-block;
height: 30px;
line-height: 30px;
font-size: 13px;
font-weight: 700;
margin: 0 6px;
color: #979899;
background: #f0f1f2;
padding: 0 12px;
border-radius: 30px;
&:first-child {
margin-left: 15px;
}
&.active {
color: #449284;
background: #e3efed;
}
}
margin-top: 0;
}
</style>
components/common/pica-process.vue
浏览文件 @ 10c1c0ac
......@@ -8,7 +8,7 @@
export default {
props: {
maxValue: {
type: Number,
type: Number | String,
default: 100
},
value: {
......@@ -16,7 +16,7 @@ export default {
default: 100
},
valueDescWidth: {
type: Number,
type: Number | String,
default: 120
},
barColor: {
......
pages/index.vue
浏览文件 @ 10c1c0ac
<template>
<div class="container">
<section class="container">
<CommonHeader></CommonHeader>
<CommonAreaSelect @areaClick="areaTabClick" @orgClick="orgTabClick"></CommonAreaSelect>
<CommonTaps @tabClicked="tabClicked"></CommonTaps>
<section v-if="cIndex === 2">
<!-- 总体概况 -->
<article v-if="cIndex === 0">
<CommonSwiperItem></CommonSwiperItem>
<CommonTitle title="证书分布情况"></CommonTitle>
<ChartPie></ChartPie>
......@@ -18,36 +19,58 @@
<CommonTitle title="完成天数排名"></CommonTitle>
<RankingItemDays></RankingItemDays>
<ShowAll></ShowAll>
<!-- <CommonSplitLine></CommonSplitLine> -->
<CommonBottomInfo></CommonBottomInfo>
</section>
<section v-if="cIndex === 1">
<CommonTitle title="证书分布情况"></CommonTitle>
</article>
<!-- 人群分析 -->
<article v-if="cIndex === 1">
<CommonTitle title="人员学历情况"></CommonTitle>
<ChartPie></ChartPie>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="证书分布情况"></CommonTitle>
<CommonTitle title="人员职称情况"></CommonTitle>
<ChartPie id="ssss"></ChartPie>
</section>
</article>
<section v-if="cIndex === 0" style="padding-top: 4px;">
<!-- <ProcessBar></ProcessBar>
<ProcessBar barColor="#FFB01A" value="80"></ProcessBar> -->
<CourseTimes maxDuration="200"></CourseTimes>
<!-- 课程分析 -->
<article v-if="cIndex === 2" style="padding-top: 8px;">
<CourseTimes maxDuration="27" avgDuration="16"></CourseTimes>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="课程列表"></CommonTitle>
<RankingItemDays></RankingItemDays>
<CommonBottomInfo></CommonBottomInfo>
</section>
</article>
<!-- 考试分析 -->
<article v-if="cIndex === 3" style="padding-top: 4px;">
<CommonCard></CommonCard>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成项目考试次数情况"></CommonTitle>
<ChartColumnVertical id="chartCourseTimesId" :colors="colors"></ChartColumnVertical>
<CommonTitle title="完成项目考试分数情况"></CommonTitle>
<ChartColumnVertical id="chartCourseScoreId"></ChartColumnVertical>
<CommonTitle title="考试列表"></CommonTitle>
<RankingItemDays></RankingItemDays>
<CommonBottomInfo></CommonBottomInfo>
</article>
<!-- 学习效果分析 -->
<article v-if="cIndex === 4" style="padding-top: 4px;">
<CommonCard :needBG="needBG" :cardList="cardList"></CommonCard>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="不同学历完成项目前后正确率对比"></CommonTitle>
<ChartColumnVertical id="chartCourseTimesId" :colors="colors"></ChartColumnVertical>
<CommonTitle title="培训前后知识点掌握情况"></CommonTitle>
<ChartColumnVertical id="chartCourseScoreId"></ChartColumnVertical>
<CommonBottomInfo></CommonBottomInfo>
</article>
<PicaArea v-show="isShowArea" @confirm="areaConfirm" @cancel="areaCancel"></PicaArea>
<PicaOrg v-show="isShowOrg" @confirm="orgConfirm" @cancel="orgCancel"></PicaOrg>
<CommonLoading v-show="false"></CommonLoading>
</div>
</section>
</template>
<script>
// import VePie from "v-charts/lib/pie";
// import VeLine from "v-charts/lib/line";
import CommonHeader from "@/components/common/common-header";
import CommonTitle from "@/components/common/common-title";
import CommonLoading from "@/components/common/common-loading";
......@@ -60,18 +83,18 @@ import CommonBottomInfo from "@/components/common/common-bottom-info";
import RankingItemDays from "@/components/bussiness/ranking-item-days";
import ChartPie from "@/components/bussiness/charts/chart-pie";
import ChartColumn from "@/components/bussiness/charts/chart-column";
import ChartColumnVertical from "@/components/bussiness/charts/chart-column-vertical";
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 ProcessBar from "@/components/common/pica-process";
import CourseTimes from "@/components/bussiness/course-times";
import CommonCard from "@/components/common/common-card";
export default {
components: {
CommonHeader,
CommonTitle,
// VePie,
// VeLine,
CommonLoading,
CommonTaps,
CommonSwiperItem,
......@@ -86,7 +109,9 @@ export default {
PicaOrg,
CommonAreaSelect,
ProcessBar,
CourseTimes
CourseTimes,
CommonCard,
ChartColumnVertical
},
data() {
return {
......@@ -117,7 +142,21 @@ export default {
},
isShowArea: false,
isShowOrg: false,
cIndex: 0
cIndex: 4,
colors: ["#39AF9A", "#FF9A4B", "#abb7bb", "#76d2d2"],
needBG: true,
cardList: [
{
count: 65,
unitName: "%",
description: "培训前正确率"
},
{
count: 80,
unitName: "%",
description: "培训后正确率"
}
]
};
},
async asyncData() {
......@@ -131,7 +170,7 @@ export default {
},
methods: {
tabClicked(index) {
this.cIndex = index
this.cIndex = index;
},
areaConfirm(selData) {
console.log(selData);
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或