Skip to content

P
pica.cloud.web-education-admin
提交 ad48b0ef 编写于 作者: zhentian.jia's avatar zhentian.jia
浏览文件
操作

完全人群分析 课程分析

上级 c21a601a
显示空白字符变更
内嵌 并排
正在显示 包含 454 行增加 和 34 行删除
src/router/router.js
浏览文件 @ ad48b0ef
......@@ -9,6 +9,7 @@ const roleManager = r => require.ensure([], () => r(require('../views/system/rol
const addManager = r => require.ensure([], () => r(require('../views/education/add-manager.vue')), 'add-manager')
const itemRole = r => require.ensure([], () => r(require('../views/system/item-role.vue')), 'item-role')
const itemList = r => require.ensure([], () => r(require('../views/learning/item-list.vue')), 'item-list')
const courseTraining = r => require.ensure([], () => r(require('../views/learning/course-training.vue')), 'course-training')
export default [{
path: '/',
......@@ -47,6 +48,9 @@ export default [{
},{
path: '/item-list',
component: itemList
},{
path: '/course-training',
component: courseTraining
},
]
}]
\ No newline at end of file
src/style/common.scss
浏览文件 @ ad48b0ef
......@@ -14,7 +14,8 @@ body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, l
border: none;
// color: #333;
font-weight: normal;
font-family: "PingFangSC", "Microsoft Yahei";
// font-family: "PingFangSC", "Microsoft Yahei";
font-family: "Helvetica Neue", "Helvetica", "PingFang SC", "Hiragino Sans GB","Microsoft YaHei, SimSun", "sans-serif";
box-sizing: border-box;
-webkit-tap-highlight-color:transparent;
-webkit-font-smoothing: antialiased;
......
src/utils/filter.js
浏览文件 @ ad48b0ef
......@@ -157,6 +157,13 @@ const vueFilter = {
return '普通用户'
}
},
joinTraining: (value) => {
if(value == "1") {
return '是'
}else {
return '否'
}
},
}
export default vueFilter
\ No newline at end of file
src/utils/operation.js
浏览文件 @ ad48b0ef
......@@ -28,7 +28,7 @@ export function getIntersect(a, b) {
//获取id的list
export function getIdList(data) {
let list = [];
if(typeof data === 'undefined') {
if (typeof data === 'undefined') {
return list;
}
if (data.constructor === Array) {
......@@ -208,7 +208,7 @@ function addEmpty(data) {
label: "全部地区",
value: "0",
}
for(let i=0;i<data.length;i++) {
for (let i = 0; i < data.length; i++) {
after.push(data[i]);
}
return after;
......@@ -236,7 +236,7 @@ export function getEcologyList() {
cityName: '上海市',
countyName: '浦东新区',
townName: '--',
},{
}, {
id: '124',
name: '上海第二人民医院',
hospitalLevelName: '二甲医院',
......@@ -244,7 +244,7 @@ export function getEcologyList() {
cityName: '上海市',
countyName: '浦东新区',
townName: '--',
},{
}, {
id: '125',
name: '上海第三人民医院',
hospitalLevelName: '二甲医院',
......@@ -255,7 +255,7 @@ export function getEcologyList() {
}]
return dataList;
}
export function getEcologySelect (data) {
export function getEcologySelect(data) {
// let ecologyist = [{
// label: '上海小生态',
// value: '1',
......@@ -264,7 +264,7 @@ export function getEcologySelect (data) {
// value: '2',
// }];
let ecologyist = [];
for(let i=0;i<data.length;i++) {
for (let i = 0; i < data.length; i++) {
let obj = {
label: data[i].name,
value: data[i].id,
......@@ -291,3 +291,67 @@ export function getRegionOption() {
}];
return option;
}
export function getPicOption(legendData, colorData, seriesData) {
let option = {
title: {
text: "用户学历发布",
x: "center"
},
legend: {
orient: "vertical",
left: "left",
data: legendData
},
color: colorData,
backgroundColor: '#F3F3F3',
series: [
{
name: "",
type: "pie",
// radius: "55%",
center: ["50%", "60%"],
data: seriesData,
}
]
};
return option;
}
export function getBarOption(xAxisData, seriesData) {
let option = {
title: {
text: "用户年龄发布",
x: "center"
},
color: ['#3398DB'],
backgroundColor: '#F3F3F3',
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: xAxisData,
// axisTick: {
// alignWithLabel: true
// }
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '',
type: 'bar',
barWidth: '75%',
data: seriesData,
}
]
};
return option;
}
\ No newline at end of file
src/views/learning/course-analysis.vue
浏览文件 @ ad48b0ef
......@@ -10,6 +10,41 @@
</div>
</el-card>
</div>
<el-table
:data="tableData"
class="course-table">
<el-table-column prop="name" label="课程名" align="center">
</el-table-column>
<el-table-column prop="courseTime" label="课程时长" align="center">
</el-table-column>
<el-table-column prop="personTime" label="人均学习时长" align="center">
</el-table-column>
<el-table-column prop="joinNum" label="参与培训人数" align="center">
</el-table-column>
<el-table-column prop="completeNum" label="完成培训人数" align="center">
</el-table-column>
<el-table-column fixed="right" label="操作" min-width="50" align="center">
<template slot-scope="scope">
<el-button
@click="checkName(scope.row)"
type="primary"
size="small"
>查看名单</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="formInline.pageNo"
:page-sizes="[10, 30, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows"
></el-pagination>
</div>
</div>
</template>
<script>
......@@ -38,7 +73,9 @@ export default {
num: 265,
unit: '分钟',
}
]
],
tableData: [],
totalRows: 0,
}
},
// computed: {
......@@ -48,15 +85,43 @@ export default {
// },
created() {
vm = this;
this.search();
},
methods: {
search() {
this.tableData = [{
id: 1,
name: '科学诊治高血压',
courseTime: '120分钟',
personTime: '90分钟',
joinNum: '9892',
completeNum: '5992',
},{
id: 2,
name: '科学诊心脏病',
courseTime: '120分钟',
personTime: '90分钟',
joinNum: '9892',
completeNum: '5992',
}];
},
checkName(data) {
this.$router.push("course-training");
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.formInline.pageSize = val;
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.formInline.pageNo = val;
this.search();
},
},
}
</script>
<style lang="scss">
.course-analysis-wrap {
.component-content {
background: #fff;
padding: 10px;
.weight {
......@@ -74,6 +139,8 @@ export default {
height: 40px;
}
}
.course-table {
top: 20px;
}
}
</style>
\ No newline at end of file
src/views/learning/course-training.vue 0 → 100644
浏览文件 @ ad48b0ef
<template>
<div class="course-training-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="component-content screenSet" id="screenSet">
<p class="course-p">地区：{{ region }}</p>
<p class="course-p">选择机构：{{ organization }}</p>
<div class="course-search">
<el-input placeholder="查询姓名" v-model="formData.name" class="input-with-select">
<el-button class="course-button" type="primary" slot="append" @click="search">查询</el-button>
</el-input>
</div>
<el-table
:data="tableData"
class="course-table">
<el-table-column prop="name" label="姓名" align="center">
</el-table-column>
<el-table-column prop="sex" label="性别" align="center">
</el-table-column>
<el-table-column prop="age" label="年龄" align="center">
</el-table-column>
<el-table-column prop="professional" label="职称" align="center">
</el-table-column>
<el-table-column prop="post" label="职务" align="center">
</el-table-column>
<el-table-column prop="organization" label="机构" align="center">
</el-table-column>
<el-table-column prop="region" label="地区" align="center">
</el-table-column>
<el-table-column prop="join" label="是否参与培训" align="center">
<template slot-scope="scope">
<span>{{ scope.row.join | joinTraining }}</span>
</template>
</el-table-column>
<el-table-column prop="complete" label="是否完成培训" align="center">
<template slot-scope="scope">
<span>{{ scope.row.complete | joinTraining }}</span>
</template>
</el-table-column>
<el-table-column prop="date" label="完成培训日期" align="center">
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="formData.pageNo"
:page-sizes="[10, 30, 50, 100]"
:page-size="formData.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows"
></el-pagination>
</div>
</div>
</div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { create } from "domain";
import { mapGetters } from "vuex";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
let vm = null;
export default {
components: {
BreadCrumb
},
props: {
formInline: {
type: Object
}
},
data() {
return {
curmbFirst: "学情报告",
curmbSecond: "项目管理",
formData: {
name: '',
pageNo: 1,
pageSize: 10,
},
region: '浙江省/杭州市/西湖区',
organization: '杭州市中心医院',
tableData: [],
totalRows: 0,
};
},
// computed: {
// ...mapGetters([
// "_token",
// ])
// },
created() {
vm = this;
// console.log("formInline:", this.formInline);
this.search();
},
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
search() {
console.log(this.formData.name);
this.tableData = [{
name: '张三',
sex: '男',
age: '30',
professional: '主任医师',
post: '医生',
organization: '上海复旦大学附属华山医院',
region: '上海静安区',
join: '1',
complete: '1',
date: '2019-10-11',
}];
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.formData.pageSize = val;
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.formData.pageNo = val;
this.search();
},
}
};
</script>
<style lang="scss">
.course-training-wrap {
.component-content {
background: #fff;
padding: 10px;
.header-title {
padding: 10px 12px;
font-size: 12px;
color: #449284;
border-bottom: 1px solid #efefef;
}
.course-p {
margin: 30px 0 20px 30px;
font-size: 13px;
}
.course-search {
margin: 35px auto;
width: 800px;
}
.course-button {
color: #fff;
}
}
}
</style>
\ No newline at end of file
src/views/learning/crowd-analysis.vue
浏览文件 @ ad48b0ef
<template>
<div class="crowd-analysis-wrap">
<div>{{formInline.date}}</div>
<el-radio-group class="crowd-radio" v-model="radio" size="small">
<el-radio-button label="1">全部用户</el-radio-button>
<el-radio-button label="2">参与项目</el-radio-button>
<el-radio-button label="3">通过项目</el-radio-button>
</el-radio-group>
<div class="chart">
<div class="item" ref="education"></div>
<div class="item item-right" ref="job"></div>
<div class="item">
<div class="title">用户性别分布</div>
<div class="sex">
<div class="sex-item" v-for="(item , index) in sexData" :key="index">
<img class="sex-img" v-bind:src="item.src">
<!-- <img class="sex-img" src="../../assets/image/weman.png"> -->
<p class="sex-type">{{ item.type }}<p>
<p class="sex-num">{{ item.num }}</p>
</div>
</div>
</div>
<div class="item item-right" ref="age"></div>
</div>
</div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { create } from "domain";
import { mapGetters } from 'vuex'
import { mapGetters } from "vuex";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";
import echarts from "echarts";
let vm = null;
export default {
components: {
......@@ -17,31 +39,78 @@ export default {
props: {
formInline: {
type: Object
},
}
},
data() {
return {
}
radio: 1,
sexData: [{
src: require('../../assets/image/man.png'),
type: '男性',
num: 21715,
},{
src: require('../../assets/image/weman.png'),
type: '女性',
num: 19715,
},{
src: require('../../assets/image/question.png'),
type: '未完善信息',
num: 1715,
}],
};
},
// computed: {
// ...mapGetters([
// "_token",
// ])
// },
created() {
vm = this;
console.log('formInline:',this.formInline);
this.$nextTick(function() {
this.educationDivision();
this.jobDivision();
this.ageDivision();
});
},
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
educationDivision() {
let myChart = echarts.init(this.$refs.education);
let legendData = ["博士", "硕士", "本科", "大专", "大专以下"];
let colorData = ['#FF9F7F','#FFDB5C', '#E062AE', '#37A2DA', '#67E0E3'];
let seriesData = [
{ value: 22, name: "博士" },
{ value: 50, name: "硕士" },
{ value: 350, name: "本科" },
{ value: 80, name: "大专" },
{ value: 95, name: "大专以下" }
];
let option = operationData.getPicOption(legendData,colorData,seriesData);
myChart.setOption(option);
},
}
jobDivision() {
let myChart = echarts.init(this.$refs.job);
let legendData = ["医生", "护士", "医护人员", "其他"];
let colorData = ['#FF9F7F','#37A2DA', '#67E0E3', '#FFDB5C'];
let seriesData = [
{ value: 270, name: "医生" },
{ value: 70, name: "护士" },
{ value: 65, name: "医护人员" },
{ value: 50, name: "其他" },
];
let option = operationData.getPicOption(legendData,colorData,seriesData);
myChart.setOption(option);
},
ageDivision() {
let myChart = echarts.init(this.$refs.age);
let xAxisData = ["16-30", "30-40", "40-50", "50-60",'60以上','未完善信息'];
let seriesData = [1000,25000,15000,8000,7000,500];
let option = operationData.getBarOption(xAxisData,seriesData);
myChart.setOption(option);
}
}
};
</script>
<style lang="scss">
.crowd-analysis-wrap {
.component-content {
background: #fff;
padding: 10px;
.header-title {
......@@ -50,6 +119,58 @@ export default {
color: #449284;
border-bottom: 1px solid #efefef;
}
.crowd-radio {
position: relative;
left: 50%;
margin-left: -119px;
}
.chart {
position: relative;
margin: 20px auto 0 auto;
width: 100%;
overflow: auto;
.item {
position: relative;
float: left;
margin-top: 20px;
height: 350px;
width: 48%;
border: 1px solid #dedede;
.title {
position: relative;
margin: 10px auto;
text-align: center;
font-weight: bold;
}
.sex {
position: relative;
top: 0;
left: 0;
.sex-item {
float: left;
height: 350px;
width: 33.3%;
.sex-img {
margin: 0 auto;
position: relative;
left: 10%;
width: 80%;
}
.sex-type {
text-align: center;
}
.sex-num {
margin-top: 20px;
font-size: 30px;
font-weight: bold;
text-align: center;
}
}
}
}
.item-right {
float: right;
}
}
}
</style>
\ No newline at end of file
src/views/learning/item-list.vue
浏览文件 @ ad48b0ef
......@@ -108,6 +108,8 @@ export default {
region: [],
date: '',
organization: '',
pageNo: 1,
pageSize: 10,
},
activeName: 'second',
}
......@@ -157,6 +159,7 @@ export default {
release() {
},
},
}
</script>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或