Skip to content

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

课程分析页面

上级 c4229b4c
隐藏空白字符变更
内嵌 并排
正在显示 包含 514 行增加 和 90 行删除
components/bussiness/charts/chart-pie.vue
浏览文件 @ 08843882
<!-- 饼图 --> <!-- 饼图 -->
<template> <template>
<section class="chart-pie"> <section class="chart-pie">
<div id="chartPieId" :style="{width: '100%', height: '220px'}"></div> <div :id="id" :style="{width: '100%', height: '220px'}"></div>
</section> </section>
</template> </template>
<script> <script>
import { format } from "path"; import { format } from "path";
import { echartColors } from '@/utils/index'
let vm = null; let vm = null;
export default { export default {
props: { props: {
id: {
type: String,
default: 'chartPieId'
},
pieData: { pieData: {
type: Array, type: Array,
default: () => [ default: () => [
...@@ -22,17 +27,6 @@ export default { ...@@ -22,17 +27,6 @@ export default {
return { return {
chartHeight: "1000px", chartHeight: "1000px",
// 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取 // 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
options: {
colors: [
"#6ab58f",
"#80c5d8",
"#c8abda",
"#dcdb5e",
"#e89b84",
"#abb7bb",
"#76d2d2"
]
}
}; };
}, },
mounted() { mounted() {
...@@ -43,23 +37,15 @@ export default { ...@@ -43,23 +37,15 @@ export default {
// 画饼图 // 画饼图
drawPie() { drawPie() {
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
let chartPie = this.$echarts.init(document.getElementById("chartPieId")); let chartPie = this.$echarts.init(document.getElementById(this.id));
// 绘制图表 // 绘制图表
let options = { let options = {
color: [ color: echartColors,
"#FF9A4B",
"#FFB01B",
"#39AF9A",
"#5D7092",
"#e89b84",
"#abb7bb",
"#76d2d2"
],
title: { title: {
text: "总人数: 1,339,220人", text: "总人数: 1,339,220人",
// subtext: "纯属虚构", // subtext: "纯属虚构",
top: 45, top: '20%',
left: 220, left: '60%',
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
fontWeight: "bolder", fontWeight: "bolder",
...@@ -75,8 +61,8 @@ export default { ...@@ -75,8 +61,8 @@ export default {
type: "scroll", type: "scroll",
orient: "vertical", orient: "vertical",
// orient:'horizontal', // orient:'horizontal',
left: 220, top: '30%',
top: 85, left: '60%',
bottom: 20, bottom: 20,
data: ["优秀证书", "及格证书", "未获证"], data: ["优秀证书", "及格证书", "未获证"],
textStyle: { textStyle: {
......
components/bussiness/charts/process-bar.vue 0 → 100644
浏览文件 @ 08843882
<!-- Tabs组件 -->
<template>
<div class="common-process">
<span class="bar" :style="{'width': width, 'background': barColor}"></span>
<span class="desc">{{value}}{{unitName}}</span>
</div>
</template>
<script>
export default {
props: {
max: {
type: Number,
default: 100
},
value: {
type: Number,
default: 100
},
barColor: {
type: String,
default: '#adadad'
},
unitName: {
type: String,
default: '分钟'
}
},
computed: {
width() {
return Math.round((this.value / this.max) * 300) + 'px'
}
},
methods: {}
};
</script>
<style lang="scss" scoped>
.common-process {
width: 100%;
height: 20px;
line-height: 20px;
margin: 12px 15px;
}
</style>
components/bussiness/course-times.vue 0 → 100644
浏览文件 @ 08843882
<!-- Tabs组件 -->
<template>
<ul class="lr-course-times">
<li>
<p>
课程总时长
<span>(所有课程数 2门)</span>
</p>
<ProcessBar :maxValue="maxDuration" :value="maxDuration"></ProcessBar>
</li>
<li>
<p>平均学习时长</p>
<ProcessBar barColor="#FFB01A" :maxValue="maxDuration" :value="avgDuration"></ProcessBar>
</li>
</ul>
</template>
<script>
import ProcessBar from "@/components/common/pica-process";
export default {
props: {
maxDuration: {
type: Number,
default: 100
},
avgDuration: {
type: Number,
default: 100
}
},
components: {
ProcessBar
},
methods: {}
};
</script>
<style lang="scss" scoped>
.lr-course-times {
margin: 20px 15px;
li {
margin: 20px 0;
p {
height: 14px;
line-height: 14px;
margin: 12px 0;
font-size: 14px;
font-weight: 400;
color: #676869;
span {
color: #979899;
}
}
}
}
</style>
components/common/common-loading.vue
浏览文件 @ 08843882
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="common-loader loader--style3" title="2"> <div class="common-loader loader--style3" title="2">
<div class="loader-mask"></div> <div class="loader-mask"></div>
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="80" height="80" viewBox="0 0 60 60" style="enable-background:new 0 0 80 80;" xml:space="preserve"> width="40" height="40" viewBox="0 0 60 60" style="enable-background:new 0 0 80 80;" xml:space="preserve">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"> <path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeType="xml" <animateTransform attributeType="xml"
attributeName="transform" attributeName="transform"
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
bottom: 0; bottom: 0;
right: 0; right: 0;
z-index: 100; z-index: 100;
// background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
} }
svg { svg {
position: absolute; position: absolute;
......
components/common/pica-process copy.vue 0 → 100644
浏览文件 @ 08843882
<!-- Tabs组件 -->
<template>
<!-- <div class="common-process" :style="{'justify-content': isMaxed ? 'space-between' : ''}"> -->
<div class="common-process">
<span class="bar" :style="{'width': width, 'background': barColor}"></span><span class="desc">{{value}}{{unitName}}</span>
</div>
</template>
<script>
export default {
props: {
maxValue: {
type: Number,
default: 100
},
value: {
type: Number,
default: 80
},
barColor: {
type: String,
default: '#39AF9A'
},
unitName: {
type: String,
default: '分钟'
}
},
data() {
return {
isMaxed: false
}
},
// computed: {
// width() {
// let ratio = this.value / this.maxValue
// if(ratio >= 9.98) {
// this.isMaxed = true
// } else {
// this.isMaxed = false
// }
// return Math.round(ratio * 300) + 'px'
// }
// },
mounted() {
// let maxWidth = window.clien
let maxWidth = 375;
let ratio = this.value / this.maxValue
Math.round(ratio * 300) + 'px'
},
methods: {}
};
</script>
<style lang="scss" scoped>
.common-process {
display: flex;
flex-direction: row;
height: 20px;
line-height: 20px;
margin: 12px 15px;
span {
height: 20px;
display: inline-block;
&.bar {
margin-right: 6px;
}
&.desc {
font-size: 18px;
font-weight: 700;
// height: 20px;
// line-height: 20px;
color: #373839;
}
}
}
</style>
components/common/pica-process.vue 0 → 100644
浏览文件 @ 08843882
<!-- Tabs组件 -->
<template>
<div class="common-process">
<span class="bar" :style="{'width': maxPocessWidth, 'background': barColor}"></span><span class="desc">{{value}}{{unitName}}</span>
</div>
</template>
<script>
export default {
props: {
maxValue: {
type: Number,
default: 100
},
value: {
type: Number | String,
default: 100
},
valueDescWidth: {
type: Number,
default: 120
},
barColor: {
type: String,
default: '#39AF9A'
},
unitName: {
type: String,
default: '分钟'
}
},
data() {
return {
maxPocessWidth: false
}
},
mounted() {
// let maxWidth = window.clien
// scrollWidth offsetWidth
let clientWidth = window.outerWidth || document.body.clientWidth || document.documentElement.clientWidth
let maxWidth = clientWidth - this.valueDescWidth
let ratio = this.value / this.maxValue
this.maxPocessWidth = Math.round(ratio * maxWidth) + 'px'
},
methods: {}
};
</script>
<style lang="scss" scoped>
.common-process {
display: flex;
flex-direction: row;
height: 20px;
line-height: 20px;
// margin: 12px 15px;
span {
height: 20px;
display: inline-block;
&.bar {
margin-right: 6px;
}
&.desc {
font-size: 18px;
font-weight: 700;
// height: 20px;
// line-height: 20px;
color: #373839;
}
}
}
</style>
pages/index.vue
浏览文件 @ 08843882
...@@ -2,62 +2,69 @@ ...@@ -2,62 +2,69 @@
<div class="container"> <div class="container">
<CommonHeader></CommonHeader> <CommonHeader></CommonHeader>
<CommonAreaSelect @areaClick="areaTabClick" @orgClick="orgTabClick"></CommonAreaSelect> <CommonAreaSelect @areaClick="areaTabClick" @orgClick="orgTabClick"></CommonAreaSelect>
<CommonTaps></CommonTaps> <CommonTaps @tabClicked="tabClicked"></CommonTaps>
<CommonSwiperItem></CommonSwiperItem>
<CommonTitle title="证书分布情况"></CommonTitle>
<ChartPie></ChartPie>
<!-- <CommonSplitLine></CommonSplitLine> -->
<CommonTitle title="证书级别按学历分布情况"></CommonTitle>
<ChartColumn></ChartColumn>
<!-- <CommonTitle></CommonTitle> --> <section v-if="cIndex === 2">
<!-- <CommonLoading></CommonLoading> --> <CommonSwiperItem></CommonSwiperItem>
<!-- <CommonTaps></CommonTaps> <CommonTitle title="证书分布情况"></CommonTitle>
<CommonSwiperItem></CommonSwiperItem> <ChartPie></ChartPie>
<CommonTitle></CommonTitle> --> <CommonTitle title="证书级别按学历分布情况"></CommonTitle>
<ChartColumn></ChartColumn>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="培训情况排名"></CommonTitle>
<RankingList></RankingList>
<ShowAll></ShowAll>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成天数排名"></CommonTitle>
<RankingItemDays></RankingItemDays>
<ShowAll></ShowAll>
<!-- <CommonSplitLine></CommonSplitLine> -->
<CommonBottomInfo></CommonBottomInfo>
</section>
<section v-if="cIndex === 1">
<CommonTitle title="证书分布情况"></CommonTitle>
<ChartPie></ChartPie>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="证书分布情况"></CommonTitle>
<ChartPie id="ssss"></ChartPie>
</section>
<section v-if="cIndex === 0" style="padding-top: 4px;">
<!-- <ProcessBar></ProcessBar>
<ProcessBar barColor="#FFB01A" value="80"></ProcessBar> -->
<CourseTimes maxDuration="200"></CourseTimes>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="课程列表"></CommonTitle>
<RankingItemDays></RankingItemDays>
<CommonBottomInfo></CommonBottomInfo>
</section>
<!-- <CommonTitle title="证书级别按学历分布情况"></CommonTitle> -->
<!-- <div style="padding: 0 15px;">
<ve-line :data="chartData1"></ve-line>
</div> -->
<!-- <CommonSplitLine></CommonSplitLine>
<CommonTitle title="培训情况排名"></CommonTitle>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成天数排名"></CommonTitle> -->
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="培训情况排名"></CommonTitle>
<RankingList></RankingList>
<ShowAll></ShowAll>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成天数排名"></CommonTitle>
<RankingItemDays></RankingItemDays>
<ShowAll></ShowAll>
<!-- <CommonSplitLine></CommonSplitLine> -->
<CommonBottomInfo></CommonBottomInfo>
<PicaArea v-show="isShowArea" @confirm="areaConfirm" @cancel="areaCancel"></PicaArea> <PicaArea v-show="isShowArea" @confirm="areaConfirm" @cancel="areaCancel"></PicaArea>
<PicaOrg v-show="isShowOrg" @confirm="orgConfirm" @cancel="orgCancel"></PicaOrg> <PicaOrg v-show="isShowOrg" @confirm="orgConfirm" @cancel="orgCancel"></PicaOrg>
<CommonLoading v-show="false"></CommonLoading>
</div> </div>
</template> </template>
<script> <script>
// import VePie from "v-charts/lib/pie"; // import VePie from "v-charts/lib/pie";
// import VeLine from "v-charts/lib/line"; // import VeLine from "v-charts/lib/line";
import CommonHeader from "../components/common/common-header"; import CommonHeader from "@/components/common/common-header";
import CommonTitle from "../components/common/common-title"; import CommonTitle from "@/components/common/common-title";
import CommonLoading from "../components/common/common-loading"; import CommonLoading from "@/components/common/common-loading";
import CommonTaps from "../components/common/common-tabs"; import CommonTaps from "@/components/common/common-tabs";
import CommonSwiperItem from "../components/common/common-swiper-item"; import CommonSwiperItem from "@/components/common/common-swiper-item";
import CommonSplitLine from "../components/common/common-split-line"; import CommonSplitLine from "@/components/common/common-split-line";
import RankingList from "../components/bussiness/ranking-item"; import RankingList from "@/components/bussiness/ranking-item";
import ShowAll from "../components/common/common-show-all"; import ShowAll from "@/components/common/common-show-all";
import CommonBottomInfo from "../components/common/common-bottom-info"; import CommonBottomInfo from "@/components/common/common-bottom-info";
import RankingItemDays from "../components/bussiness/ranking-item-days"; 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 ChartColumn from "../components/bussiness/charts/chart-column"; import ChartColumn from "@/components/bussiness/charts/chart-column";
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 CourseTimes from "@/components/bussiness/course-times"
export default { export default {
components: { components: {
...@@ -77,13 +84,11 @@ export default { ...@@ -77,13 +84,11 @@ export default {
ChartColumn, ChartColumn,
PicaArea, PicaArea,
PicaOrg, PicaOrg,
CommonAreaSelect CommonAreaSelect,
ProcessBar,
CourseTimes
}, },
data() { data() {
// this.chartSetting = {
// width: "1000px",
// height: "800px"
// };
return { return {
chartData1: { chartData1: {
columns: ["date", "PV"], columns: ["date", "PV"],
...@@ -91,12 +96,12 @@ export default { ...@@ -91,12 +96,12 @@ export default {
{ date: "01-01", PV: 1231 }, { date: "01-01", PV: 1231 },
{ date: "01-02", PV: 1223 }, { date: "01-02", PV: 1223 },
{ date: "01-03", PV: 2123 }, { date: "01-03", PV: 2123 },
{ date: "01-04", PV: 4123 }, { date: "01-04", PV: 4123 }
] ]
}, },
echartsSettings: { echartsSettings: {
height: '500px' height: "500px"
}, },
// 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取 // 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
options: { options: {
...@@ -111,7 +116,8 @@ export default { ...@@ -111,7 +116,8 @@ export default {
] ]
}, },
isShowArea: false, isShowArea: false,
isShowOrg: false isShowOrg: false,
cIndex: 0
}; };
}, },
async asyncData() { async asyncData() {
...@@ -124,24 +130,27 @@ export default { ...@@ -124,24 +130,27 @@ export default {
// window.addEventListener("resize", this.resizeTheChart); // window.addEventListener("resize", this.resizeTheChart);
}, },
methods: { methods: {
tabClicked(index) {
this.cIndex = index
},
areaConfirm(selData) { areaConfirm(selData) {
console.log(selData) console.log(selData);
this.isShowArea = false this.isShowArea = false;
}, },
areaCancel() { areaCancel() {
this.isShowArea = false this.isShowArea = false;
}, },
orgConfirm(selData) { orgConfirm(selData) {
this.isShowOrg = false this.isShowOrg = false;
}, },
orgCancel() { orgCancel() {
this.isShowOrg = false this.isShowOrg = false;
}, },
areaTabClick() { areaTabClick() {
this.isShowArea = true this.isShowArea = true;
}, },
orgTabClick() { orgTabClick() {
this.isShowOrg = true this.isShowOrg = true;
}, },
resizeTheChart() { resizeTheChart() {
if (this.$refs.runTimes_creditChart) { if (this.$refs.runTimes_creditChart) {
......
plugins/index.vue 0 → 100644
浏览文件 @ 08843882
<template>
<div class="container">
<CommonHeader></CommonHeader>
<CommonAreaSelect @areaClick="areaTabClick" @orgClick="orgTabClick"></CommonAreaSelect>
<CommonTaps></CommonTaps>
<CommonSwiperItem></CommonSwiperItem>
<CommonTitle title="证书分布情况"></CommonTitle>
<ChartPie></ChartPie>
<!-- <CommonSplitLine></CommonSplitLine> -->
<CommonTitle title="证书级别按学历分布情况"></CommonTitle>
<ChartColumn></ChartColumn>
<!-- <CommonTitle></CommonTitle> -->
<!-- <CommonLoading></CommonLoading> -->
<!-- <CommonTaps></CommonTaps>
<CommonSwiperItem></CommonSwiperItem>
<CommonTitle></CommonTitle> -->
<!-- <CommonTitle title="证书级别按学历分布情况"></CommonTitle> -->
<!-- <div style="padding: 0 15px;">
<ve-line :data="chartData1"></ve-line>
</div> -->
<!-- <CommonSplitLine></CommonSplitLine>
<CommonTitle title="培训情况排名"></CommonTitle>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成天数排名"></CommonTitle> -->
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="培训情况排名"></CommonTitle>
<RankingList></RankingList>
<ShowAll></ShowAll>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成天数排名"></CommonTitle>
<RankingItemDays></RankingItemDays>
<ShowAll></ShowAll>
<!-- <CommonSplitLine></CommonSplitLine> -->
<CommonBottomInfo></CommonBottomInfo>
<PicaArea v-show="isShowArea" @confirm="areaConfirm" @cancel="areaCancel"></PicaArea>
<PicaOrg v-show="isShowOrg" @confirm="orgConfirm" @cancel="orgCancel"></PicaOrg>
</div>
</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";
import CommonTaps from "../components/common/common-tabs";
import CommonSwiperItem from "../components/common/common-swiper-item";
import CommonSplitLine from "../components/common/common-split-line";
import RankingList from "../components/bussiness/ranking-item";
import ShowAll from "../components/common/common-show-all";
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 PicaArea from "../components/common/pica-area";
import PicaOrg from "../components/common/pica-org";
import CommonAreaSelect from "../components/common/common-area-select";
export default {
components: {
CommonHeader,
CommonTitle,
// VePie,
// VeLine,
CommonLoading,
CommonTaps,
CommonSwiperItem,
CommonSplitLine,
RankingList,
ChartPie,
ShowAll,
CommonBottomInfo,
RankingItemDays,
ChartColumn,
PicaArea,
PicaOrg,
CommonAreaSelect
},
data() {
// this.chartSetting = {
// width: "1000px",
// height: "800px"
// };
return {
chartData1: {
columns: ["date", "PV"],
rows: [
{ date: "01-01", PV: 1231 },
{ date: "01-02", PV: 1223 },
{ date: "01-03", PV: 2123 },
{ date: "01-04", PV: 4123 },
]
},
echartsSettings: {
height: '500px'
},
// 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
options: {
colors: [
"#6ab58f",
"#80c5d8",
"#c8abda",
"#dcdb5e",
"#e89b84",
"#abb7bb",
"#76d2d2"
]
},
isShowArea: false,
isShowOrg: false
};
},
async asyncData() {
return {};
},
created() {
// this.$store.dispatch('searchHospital', { name: '测试' });
},
mounted() {
// window.addEventListener("resize", this.resizeTheChart);
},
methods: {
areaConfirm(selData) {
console.log(selData)
this.isShowArea = false
},
areaCancel() {
this.isShowArea = false
},
orgConfirm(selData) {
this.isShowOrg = false
},
orgCancel() {
this.isShowOrg = false
},
areaTabClick() {
this.isShowArea = true
},
orgTabClick() {
this.isShowOrg = true
},
resizeTheChart() {
if (this.$refs.runTimes_creditChart) {
this.$refs.runTimes_creditChart.resize();
}
}
}
};
</script>
<style lang="less">
.container {
margin: 0 auto;
min-height: 100vh;
h1 {
font-size: 36px;
text-align: center;
}
.m1 {
width: 100%;
> div {
width: 100%;
}
img {
width: 100%;
}
}
}
</style>
utils/index.js
浏览文件 @ 08843882
...@@ -28,4 +28,14 @@ export const setItem = (name, value) => { ...@@ -28,4 +28,14 @@ export const setItem = (name, value) => {
export const removeItem = name => { export const removeItem = name => {
if (!name) return; if (!name) return;
sessionStorage.removeItem(name); sessionStorage.removeItem(name);
}; };
\ No newline at end of file
export const echartColors = [
"#FF9A4B",
"#FFB01B",
"#39AF9A",
"#5D7092",
"#e89b84",
"#abb7bb",
"#76d2d2"
]
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或