Skip to content

P
pica.cloud.web-education-admin
提交 06a63c54 编写于 作者: changdi.hao's avatar changdi.hao
浏览文件
操作

'学情报告'

上级 0096b52f 5db7b402
隐藏空白字符变更
内嵌 并排
正在显示 包含 672 行增加 和 54 行删除
src/router/router.js
浏览文件 @ 06a63c54
......@@ -12,6 +12,7 @@ const reportLis = r => require.ensure([], () => r(require('../views/learning/rep
const itemList = r => require.ensure([], () => r(require('../views/learning/item-list.vue')), 'item-list')
const nameList = r => require.ensure([], () => r(require('../views/learning/name-list.vue')), 'name-list')
const dataAlignment = r => require.ensure([], () => r(require('../views/learning/data-alignment.vue')), 'data-alignment')
const courseTraining = r => require.ensure([], () => r(require('../views/learning/course-training.vue')), 'course-training')
export default [{
path: '/',
......@@ -59,6 +60,9 @@ export default [{
},{
path: '/name-list',
component: nameList
}
},{
path: '/course-training',
component: courseTraining
},
]
}]
\ No newline at end of file
src/style/common.scss
浏览文件 @ 06a63c54
......@@ -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
浏览文件 @ 06a63c54
......@@ -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
浏览文件 @ 06a63c54
......@@ -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,
......@@ -272,4 +272,86 @@ export function getEcologySelect (data) {
ecologyist.push(obj);
}
return ecologyist;
}
export function getRegionOption() {
let option = [{
value: 'zhejiang',
label: '浙江',
children: [{
value: 'hangzhou',
label: '杭州',
children: [{
value: 'xihu',
label: '西湖区'
}, {
value: 'donghu',
label: '东湖区'
}]
}]
}];
return option;
}
export function getPicOption(title,legendData, colorData, seriesData) {
let option = {
title: {
text: title,
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/education/add-manager.vue
浏览文件 @ 06a63c54
......@@ -604,6 +604,55 @@
</el-col>
</el-form-item>
</el-form>
<el-form
ref="formExam"
label-width="150px"
:model="formExam"
>
<el-form-item label="项目成绩评定条件">
<el-select
v-model="formExam.condition"
placeholder="请选择"
style="width: 350px"
>
<el-option
v-for="item in conditionList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<div class="" v-for="(item , index) in formExam.exam" :key="index">
<el-form-item label="项目所有考试中，">
<el-col :span="3">
<el-input v-model="item.num"></el-input>
</el-col>
<el-col class="line" :span="4"> 门考试成绩等级为</el-col>
<el-col :span="3">
<el-input v-model="item.level"></el-input>
</el-col>
<el-col class="line" :span="2"> 评价为</el-col>
<el-col :span="3">
<el-input v-model="item.level"></el-input>
</el-col>
</el-form-item>
<el-form-item label="发放证书">
<el-select
v-model="formExam.certificate"
placeholder="请选择证书"
style="width: 350px"
>
<el-option
v-for="item in optionsCertificate"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</div>
</el-form>
</div>
</div>
</div>
......@@ -649,7 +698,7 @@ export default {
curmbSecond: "新建项目",
//页面展示位置
stepData: [true, false, false],
active: 0,
active: 2,
activeName: "first",
//基层信息 数据
uploadImgMessage: false,
......@@ -802,6 +851,22 @@ export default {
projectStatus: "",
status4Flag: "",
showStorage: false,
//考试数据
formExam: {
condition: '',
exam: [{
num: 8,
level: "通过",
evaluate: "合格",
certificate: '',
}]
},
conditionList: [
{
label: '按考试数量及成绩等级划分',
value: 1,
}
],
//校验工具 数据
rulesComponent: {
component: [
......
src/views/layout/slidebar.vue
浏览文件 @ 06a63c54
......@@ -80,6 +80,17 @@ export default {
index: 'role'
}
]
},{
title: '学期报告',
icon: 'el-icon-menu',
index: 'learning',
subs: [
{
title: '项目列表',
icon: 'el-icon-setting',
index: 'item-list'
},
]
}
]
}
......
src/views/learning/course-analysis.vue
浏览文件 @ 06a63c54
......@@ -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>
......@@ -19,44 +54,83 @@ let vm = null;
export default {
props: {
formInline: {
type: Object
type: Object
},
activeName: {
type: String
}
},
data() {
return {
cardData: [
{
title: '项目所有课程数',
num: 9,
unit: '门课程',
},{
title: '项目所有课程总时长',
num: 500,
unit: '分钟',
},{
title: '项目人均学习时长',
num: 265,
unit: '分钟',
}
]
cardData: [],
tableData: [],
totalRows: 0,
}
},
// computed: {
// ...mapGetters([
// "_token",
// ])
// },
created() {
vm = this;
this.getCardData();
this.search();
},
mounted: function() {
this.$on('search',()=>{
console.log(this.formInline);
this.getCardData();
this.search();
})
},
methods: {
getCardData() {
this.cardData = [
{
title: '项目所有课程数',
num: 9,
unit: '门课程',
},{
title: '项目所有课程总时长',
num: 500,
unit: '分钟',
},{
title: '项目人均学习时长',
num: 265,
unit: '分钟',
}
];
},
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 +148,8 @@ export default {
height: 40px;
}
}
}
.course-table {
top: 20px;
}
}
</style>
\ No newline at end of file
src/views/learning/course-training.vue 0 → 100644
浏览文件 @ 06a63c54
<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
浏览文件 @ 06a63c54
<template>
<div class="crowd-analysis-wrap">
<div>{{formInline.date}}</div>
<div class="crowd-analysis-wrap">
<el-radio-group class="crowd-radio" v-model="radio" size="small" @change="updateRadio">
<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" id="education" ref="education"></div>
<div class="item item-right" id="job" 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">
<p class="sex-type">{{ item.type }}</p>
<p></p>
<p class="sex-num">{{ item.num }}</p>
</div>
</div>
</div>
<div class="item item-right" id="age" 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";
import { setTimeout } from "timers";
let vm = null;
export default {
components: {
......@@ -16,39 +39,234 @@ export default {
},
props: {
formInline: {
type: Object
type: Object
},
activeName: {
type: String
}
},
data() {
return {
}
radio: 1,
updateCrowd: false,
sexData: []
};
},
// computed: {
// ...mapGetters([
// "_token",
// ])
// },
created() {
vm = this;
console.log('formInline:',this.formInline);
this.$nextTick(function() {
this.search();
});
},
mounted: function() {
commonUtil.resizeHeight();
//父组件传值
this.$on("search", () => {
this.updateCrowd = true;
this.search();
});
this.$on("init", () => {
this.$nextTick(function() {
this.search();
});
});
if (this.activeName == "second") {
this.updateResize();
}
},
methods: {
},
}
search() {
if (this.activeName == "second") {
this.getEducationData();
this.getJobData();
this.getSexData();
this.getAgeData();
}
},
updateResize() {
this.$nextTick(function() {
let chartEducation = echarts.init(document.getElementById("education"));
let chartJob = echarts.init(document.getElementById("job"));
let chartAge = echarts.init(document.getElementById("age"));
window.onresize = function() {
chartEducation.resize();
chartJob.resize();
chartAge.resize();
};
});
},
updateRadio(value) {
console.log(value);
this.search();
},
//用户学历分布
getEducationData() {
let data = [22, 50, 350, 80, 95];
if (this.updateCrowd == true) {
data = [33, 90, 100, 22, 75];
}
this.educationDivision(data);
},
//用户职务分布
getJobData() {
let data = [27, 70, 65, 50];
this.jobDivision(data);
},
//用户性别分布
getSexData() {
this.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
}
];
},
//用户年龄分布
getAgeData() {
let data = [1000, 25000, 15000, 8000, 7000, 500];
this.ageDivision(data);
},
educationDivision(data) {
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: "大专以下" }
];
for (let i = 0; i < data.length; i++) {
seriesData[i].value = data[i];
}
let option = operationData.getPicOption(
"用户学历分布",
legendData,
colorData,
seriesData
);
myChart.setOption(option);
},
jobDivision(data) {
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: "其他" }
];
for (let i = 0; i < data.length; i++) {
seriesData[i].value = data[i];
}
let option = operationData.getPicOption(
"用户职务分布",
legendData,
colorData,
seriesData
);
myChart.setOption(option);
},
ageDivision(data) {
let myChart = echarts.init(this.$refs.age);
let xAxisData = [
"16-30",
"30-40",
"40-50",
"50-60",
"60以上",
"未完善信息"
];
let seriesData = data;
let option = operationData.getBarOption(xAxisData, seriesData);
myChart.setOption(option);
}
}
};
</script>
<style lang="scss">
.crowd-analysis-wrap {
.component-content {
background: #fff;
padding: 10px;
.header-title {
padding: 10px 12px;
font-size: 12px;
color: #449284;
border-bottom: 1px solid #efefef;
background: #fff;
padding: 10px;
.header-title {
padding: 10px 12px;
font-size: 12px;
color: #449284;
border-bottom: 1px solid #efefef;
}
.crowd-radio {
position: relative;
left: 50%;
margin-left: -119px;
.is-active {
.el-radio-button__inner {
// background: #fff;
// color: #409EFF;
}
}
}
.chart {
position: relative;
margin: 20px auto 0 auto;
width: 100%;
overflow: auto;
.item {
position: relative;
float: left;
margin-top: 20px;
padding: 0;
width: 48%;
// height: 20vw;
height: 350px;
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: 40px;
font-size: 30px;
font-weight: bold;
text-align: center;
}
}
}
}
.item-right {
float: right;
}
}
}
......
src/views/learning/item-list.vue
浏览文件 @ 06a63c54
......@@ -94,6 +94,7 @@ import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";
import { log } from 'util';
let vm = null;
export default {
components: {
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或