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 ...@@ -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 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 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 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 [{ export default [{
path: '/', path: '/',
...@@ -47,6 +48,9 @@ export default [{ ...@@ -47,6 +48,9 @@ export default [{
},{ },{
path: '/item-list', path: '/item-list',
component: itemList 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 ...@@ -14,7 +14,8 @@ body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, l
border: none; border: none;
// color: #333; // color: #333;
font-weight: normal; 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; box-sizing: border-box;
-webkit-tap-highlight-color:transparent; -webkit-tap-highlight-color:transparent;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
......
src/utils/filter.js
浏览文件 @ ad48b0ef
...@@ -157,6 +157,13 @@ const vueFilter = { ...@@ -157,6 +157,13 @@ const vueFilter = {
return '普通用户' return '普通用户'
} }
}, },
joinTraining: (value) => {
if(value == "1") {
return '是'
}else {
return '否'
}
},
} }
export default vueFilter export default vueFilter
\ No newline at end of file
src/utils/operation.js
浏览文件 @ ad48b0ef
...@@ -28,7 +28,7 @@ export function getIntersect(a, b) { ...@@ -28,7 +28,7 @@ export function getIntersect(a, b) {
//获取id的list //获取id的list
export function getIdList(data) { export function getIdList(data) {
let list = []; let list = [];
if(typeof data === 'undefined') { if (typeof data === 'undefined') {
return list; return list;
} }
if (data.constructor === Array) { if (data.constructor === Array) {
...@@ -208,7 +208,7 @@ function addEmpty(data) { ...@@ -208,7 +208,7 @@ function addEmpty(data) {
label: "全部地区", label: "全部地区",
value: "0", value: "0",
} }
for(let i=0;i<data.length;i++) { for (let i = 0; i < data.length; i++) {
after.push(data[i]); after.push(data[i]);
} }
return after; return after;
...@@ -236,7 +236,7 @@ export function getEcologyList() { ...@@ -236,7 +236,7 @@ export function getEcologyList() {
cityName: '上海市', cityName: '上海市',
countyName: '浦东新区', countyName: '浦东新区',
townName: '--', townName: '--',
},{ }, {
id: '124', id: '124',
name: '上海第二人民医院', name: '上海第二人民医院',
hospitalLevelName: '二甲医院', hospitalLevelName: '二甲医院',
...@@ -244,7 +244,7 @@ export function getEcologyList() { ...@@ -244,7 +244,7 @@ export function getEcologyList() {
cityName: '上海市', cityName: '上海市',
countyName: '浦东新区', countyName: '浦东新区',
townName: '--', townName: '--',
},{ }, {
id: '125', id: '125',
name: '上海第三人民医院', name: '上海第三人民医院',
hospitalLevelName: '二甲医院', hospitalLevelName: '二甲医院',
...@@ -255,7 +255,7 @@ export function getEcologyList() { ...@@ -255,7 +255,7 @@ export function getEcologyList() {
}] }]
return dataList; return dataList;
} }
export function getEcologySelect (data) { export function getEcologySelect(data) {
// let ecologyist = [{ // let ecologyist = [{
// label: '上海小生态', // label: '上海小生态',
// value: '1', // value: '1',
...@@ -264,7 +264,7 @@ export function getEcologySelect (data) { ...@@ -264,7 +264,7 @@ export function getEcologySelect (data) {
// value: '2', // value: '2',
// }]; // }];
let ecologyist = []; let ecologyist = [];
for(let i=0;i<data.length;i++) { for (let i = 0; i < data.length; i++) {
let obj = { let obj = {
label: data[i].name, label: data[i].name,
value: data[i].id, value: data[i].id,
...@@ -291,3 +291,67 @@ export function getRegionOption() { ...@@ -291,3 +291,67 @@ export function getRegionOption() {
}]; }];
return option; 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 @@ ...@@ -10,6 +10,41 @@
</div> </div>
</el-card> </el-card>
</div> </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> </div>
</template> </template>
<script> <script>
...@@ -38,7 +73,9 @@ export default { ...@@ -38,7 +73,9 @@ export default {
num: 265, num: 265,
unit: '分钟', unit: '分钟',
} }
] ],
tableData: [],
totalRows: 0,
} }
}, },
// computed: { // computed: {
...@@ -48,15 +85,43 @@ export default { ...@@ -48,15 +85,43 @@ export default {
// }, // },
created() { created() {
vm = this; vm = this;
this.search();
}, },
methods: { 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> </script>
<style lang="scss"> <style lang="scss">
.course-analysis-wrap { .course-analysis-wrap {
.component-content {
background: #fff; background: #fff;
padding: 10px; padding: 10px;
.weight { .weight {
...@@ -74,6 +139,8 @@ export default { ...@@ -74,6 +139,8 @@ export default {
height: 40px; height: 40px;
} }
} }
.course-table {
top: 20px;
} }
} }
</style> </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> <template>
<div class="crowd-analysis-wrap"> <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> </div>
</template> </template>
<script> <script>
import BreadCrumb from "../../components/breadcrumb.vue"; import BreadCrumb from "../../components/breadcrumb.vue";
import { create } from "domain"; import { create } from "domain";
import { mapGetters } from 'vuex' import { mapGetters } from "vuex";
import { openLoading, closeLoading } from "../../utils/utils"; import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils"; import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";
import echarts from "echarts";
let vm = null; let vm = null;
export default { export default {
components: { components: {
...@@ -17,31 +39,78 @@ export default { ...@@ -17,31 +39,78 @@ export default {
props: { props: {
formInline: { formInline: {
type: Object type: Object
}, }
}, },
data() { data() {
return { 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() { created() {
vm = this; vm = this;
console.log('formInline:',this.formInline); this.$nextTick(function() {
this.educationDivision();
this.jobDivision();
this.ageDivision();
});
}, },
mounted: function() { mounted: function() {
commonUtil.resizeHeight(); commonUtil.resizeHeight();
}, },
methods: { 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> </script>
<style lang="scss"> <style lang="scss">
.crowd-analysis-wrap { .crowd-analysis-wrap {
.component-content {
background: #fff; background: #fff;
padding: 10px; padding: 10px;
.header-title { .header-title {
...@@ -50,6 +119,58 @@ export default { ...@@ -50,6 +119,58 @@ export default {
color: #449284; color: #449284;
border-bottom: 1px solid #efefef; 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> </style>
\ No newline at end of file
src/views/learning/item-list.vue
浏览文件 @ ad48b0ef
...@@ -108,6 +108,8 @@ export default { ...@@ -108,6 +108,8 @@ export default {
region: [], region: [],
date: '', date: '',
organization: '', organization: '',
pageNo: 1,
pageSize: 10,
}, },
activeName: 'second', activeName: 'second',
} }
...@@ -157,6 +159,7 @@ export default { ...@@ -157,6 +159,7 @@ export default {
release() { release() {
}, },
}, },
} }
</script> </script>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或