Skip to content

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

'学情报告'

上级 1a32970d
隐藏空白字符变更
内嵌 并排
正在显示 包含 1411 行增加 和 5 行删除
package-lock.json
浏览文件 @ 0096b52f
......@@ -2800,7 +2800,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
......@@ -3215,7 +3216,8 @@
"safe-buffer": {
"version": "5.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -3271,6 +3273,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -3314,12 +3317,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},
......
src/router/router.js
浏览文件 @ 0096b52f
......@@ -8,6 +8,10 @@ const createComponent = r => require.ensure([], () => r(require('../views/educat
const roleManager = r => require.ensure([], () => r(require('../views/system/role.vue')),'role')
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 reportLis = r => require.ensure([], () => r(require('../views/learning/report-list.vue')), 'report-list')
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')
export default [{
path: '/',
......@@ -43,6 +47,18 @@ export default [{
},{
path: '/item-role',
component: itemRole
},
},{
path: '/report-list',
component: reportLis
},{
path: '/item-list',
component: itemList
},{
path: '/data-alignment',
component: dataAlignment
},{
path: '/name-list',
component: nameList
}
]
}]
\ No newline at end of file
src/views/layout/slidebar.vue
浏览文件 @ 0096b52f
......@@ -58,6 +58,17 @@ export default {
index: 'item-manager'
},
]
},{
title: '学情报告',
icon: 'el-icon-document',
index: 'report',
subs: [
{
title: '项目列表',
icon: 'el-icon-setting',
index: 'report-list'
}
]
},{
title: '系统管理',
icon: 'el-icon-menu',
......
src/views/learning/course-analysis.vue 0 → 100644
浏览文件 @ 0096b52f
<template>
<div class="course-analysis-wrap">
<div v-for="(item , index) in cardData" :key="index" class="">
<el-card class="box-card">
<div slot="header" class="title">
<span class="weight">{{ item.title }}</span>
</div>
<div class="box-content">
<span class="weight">{{ item.num }} </span> {{ item.unit }}
</div>
</el-card>
</div>
</div>
</template>
<script>
import { create } from "domain";
import { openLoading, closeLoading } from "../../utils/utils";
let vm = null;
export default {
props: {
formInline: {
type: Object
},
},
data() {
return {
cardData: [
{
title: '项目所有课程数',
num: 9,
unit: '门课程',
},{
title: '项目所有课程总时长',
num: 500,
unit: '分钟',
},{
title: '项目人均学习时长',
num: 265,
unit: '分钟',
}
]
}
},
// computed: {
// ...mapGetters([
// "_token",
// ])
// },
created() {
vm = this;
},
methods: {
},
}
</script>
<style lang="scss">
.course-analysis-wrap {
.component-content {
background: #fff;
padding: 10px;
.weight {
font-weight: bold;
}
.title:after {
clear: both
}
.box-card {
width: 240px;
margin-right: 30px;
float: left;
.box-content {
text-align: center;
height: 40px;
}
}
}
}
</style>
\ No newline at end of file
src/views/learning/crowd-analysis.vue 0 → 100644
浏览文件 @ 0096b52f
<template>
<div class="crowd-analysis-wrap">
<div>{{formInline.date}}</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 {
}
},
// computed: {
// ...mapGetters([
// "_token",
// ])
// },
created() {
vm = this;
console.log('formInline:',this.formInline);
},
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
},
}
</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;
}
}
}
</style>
\ No newline at end of file
src/views/learning/data-alignment.vue 0 → 100644
浏览文件 @ 0096b52f
<template>
<div class="data-alignment">
<div class="alignment-header">
<el-row>
<el-col :span="18">
<div class="title">数据调整</div>
</el-col>
<el-col :span="3">
<el-button class="add-button" size="small" type="primary">保存修改</el-button>
</el-col>
<el-col :span="3">
<el-button class="add-button" size="small" type="primary">取消</el-button>
</el-col>
</el-row>
</div>
<div class="form">
<el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
<el-form ref="serchForm" :model="formInline" label-width="100px" style="width:100%;">
<el-col :span="6">
<el-form-item label="参与项目状态:">
<el-select
v-model="formInline.pregStatus"
size="small"
style="width: 100%;"
placeholder="请选择项目状态"
>
<el-option
v-for="(item,index) in preStaSelect"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="统计状态:">
<el-select
v-model="formInline.mathStatus"
size="small"
style="width: 100%;"
placeholder="请选择统计状态"
>
<el-option
v-for="(item,index) in mathStaSelect"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-form>
</el-row>
</div>
<div class="data-main">
<el-row class="select" type="flex" justify="end">
<el-col :span="3">
<div class="title">已选中{{multipleSelection.length}}条数据</div>
</el-col>
<el-col :span="3">
<el-button class="add-button" size="small" @click="includeMath">全部归入统计</el-button>
</el-col>
<el-col :span="3">
<el-button class="add-button" size="small" @click="removeMath">全部移出统计</el-button>
</el-col>
</el-row>
<el-table
border
center
ref="multipleTable"
:data="mathDate"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="姓名" min-width="80"></el-table-column>
<el-table-column prop="joinStatus" label="项目参与状态" width="120"></el-table-column>
<el-table-column prop="progress" label="所属机构" min-width="120" show-overflow-tooltip></el-table-column>
<el-table-column prop="desk" label="科室" show-overflow-tooltip></el-table-column>
<el-table-column prop="rank" label="级别" show-overflow-tooltip></el-table-column>
<el-table-column prop="province" label="省/直辖市" show-overflow-tooltip></el-table-column>
<el-table-column prop="city" label="市" show-overflow-tooltip></el-table-column>
<el-table-column prop="district" label="区/县" show-overflow-tooltip></el-table-column>
<el-table-column prop="address" label="乡镇/街道" show-overflow-tooltip></el-table-column>
<el-table-column fixed="right" label="操作" min-width="180">
<template slot-scope="scope">
<el-radio v-model="scope.row.radio" label="1" @change="handleClick(scope.row)">归入统计</el-radio>
<el-radio v-model="scope.row.radio" label="2" @change="handleClick(scope.row)">移除统计</el-radio>
</template>
</el-table-column>
<div slot="empty">
<div class="table-empty">
<img src="../../assets/image/no-content1.png">
<p>没有查询到相关结果</p>
</div>
</div>
</el-table>
</div>
<!-- 分页 -->
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNo"
:page-sizes="[15, 30, 50, 100, 200, 500, 700, 1000, 1500, 2000]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows"
></el-pagination>
</div>
</div>
</template>
<script>
let vm
export default {
data() {
return {
formInline: {
pregStatus: "",
mathStatus: ""
},
preStaSelect: [
//项目状态
{
label: "未参与项目",
value: "1"
},
{
label: "参与项目",
value: "2"
},
{
label: "完成项目",
value: "3"
}
],
mathStaSelect: [
//项目状态
{
label: "归入统计",
value: "1"
},
{
label: "移除统计",
value: "2"
}
],
mathDate: [
{
name: "张医生",
joinStatus: "完成项目",
progress: "谈西社区卫生服务站",
desk: "全科",
rank: "一甲",
province: "河北省",
city: "石家庄市",
district: "长安区",
address: "建北街道",
radio: '1'
}
],
multipleSelection: [], //被选中的行
totalRows: 0, //数据总数
pageNo: 1, //当前是第几页
pageSize: 20 //页面总数
};
},
created() {
vm = this
},
methods: {
// 将选中行放入数组
handleSelectionChange(val) {
this.multipleSelection = val
console.log(this.multipleSelection)
},
handleClick(row) {
console.log(row);
},
// 更改数据显示数量
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
// 换页
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
// 全部统计
includeMath() {
if (!this.multipleSelection) {
return;
}
this.multipleSelection.forEach(el => {
el.radio = '1'
})
},
// 全部不统计
removeMath() {
if (!this.multipleSelection) {
return;
}
this.multipleSelection.forEach(el => {
el.radio = '2'
})
}
}
};
</script>
<style lang='scss' rel='stylesheet/scss'>
.data-alignment {
background: #fff;
.alignment-header {
padding: 20px;
margin: 0 30px;
border-bottom: 1px solid #000;
}
.form {
padding: 30px;
}
.data-main {
padding: 0 40px;
.select {
margin-bottom: 30px;
}
}
}
</style>
src/views/learning/examination-analysis.vue 0 → 100644
浏览文件 @ 0096b52f
<template>
<div class="examination-analysis">
<div class="box">
<el-card class="box-card" v-for="(item , index) in cardData" :key="index">
<div slot="header" class="title">
<span class="weight">{{ item.title }}</span>
</div>
<div class="box-content">
<span class="weight">{{ item.num }}</span>
{{ item.unit }}
</div>
</el-card>
</div>
<div class="table">
<el-table :data="tableData" style="width: 100%" border>
<el-table-column prop="name" label="考试名" min-width="200" align="center"></el-table-column>
<el-table-column prop="joinNum" label="参与考试人数" min-width="100" align="center"></el-table-column>
<el-table-column prop="passNum" label="通过考试人数" min-width="80" align="center"></el-table-column>
<el-table-column prop="goodNum" label="成绩优秀人数" min-width="80" align="center"></el-table-column>
<el-table-column prop="startNum" label="成绩合格人数" min-width="80" align="center"></el-table-column>
<el-table-column label="操作" fixed="right" align="center" min-width="200">
<template slot-scope="scope">
<el-button type="text" size="small" @click="go(scope.row)">查看名单</el-button>
</template>
</el-table-column>
<div slot="empty">
<div class="table-empty">
<img src="../../assets/image/no-content1.png">
<p>没有查询到相关结果</p>
</div>
</div>
</el-table>
</div>
<!-- 分页 -->
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="searchParam.pageNo"
:page-sizes="[15, 30, 50, 100, 200, 500, 700, 1000, 1500, 2000]"
:page-size="searchParam.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows"
></el-pagination>
</div>
</div>
</template>
<script>
import { log } from 'util';
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
let vm
export default {
data() {
return {
tableData: [
{
name: "asd",
joinNum: 123123,
passNum: 123,
goodNum: 12,
startNum: 111
}
],
cardData: [
{
title: "项目所有考试数",
num: 9,
unit: "门考试"
},
{
title: "项目所有考题数",
num: 120,
unit: "道题"
}
],
totalRows: 0, //数据总数
searchParam: {
pageNo: 1, //当前是第几页
pageSize: 20, //页面总数
}
};
},
created() {
vm = this
},
// 挂载到Dom完成时
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
// 搜索列表
search(flag) {
if(flag) vm.searchParam.pageNo = 1
openLoading(vm);
let params = {};
vm.GET(url, params).then(res => {
closeLoading(vm);
if (res.code == "000000") {
} else {
vm.$message.info(res.message);
}
});
},
// 跳转查看名单页面
go(row) {
vm.$router.push('/name-list')
},
// 更改数据显示数量
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
vm.searchParam.pageSize = val
vm.search()
},
// 换页
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
vm.searchParam.pageNo = value
vm.search()
}
}
};
</script>
<style lang='scss' rel='stylesheet/scss'>
.examination-analysis {
background: #fff;
.box {
overflow: hidden;
}
.table {
margin-top: 30px;
}
}
</style>
src/views/learning/item-list.vue 0 → 100644
浏览文件 @ 0096b52f
<template>
<div class="course-analysis-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="component-content screenSet" id="screenSet">
<el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
<el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;">
<el-col :span="5">
<el-form-item label="选择地区：">
<el-cascader
:options="optionsRegion"
v-model="formInline.region"
@change="handleChange"
></el-cascader>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="选择日期：">
<el-date-picker
v-model="formInline.date"
size="small"
type="daterange"
placeholder="请选择开始时间"
range-separator="~"
value-format="yyyy-MM-dd 00:00:00"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8" style="padding:0;text-align:right;padding-right:15px;">
<el-button type="default" size="small" @click="reset">重置</el-button>
<el-button type="primary" size="small" @click="search" style="margin-left:0;">查询</el-button>
</el-col>
</el-form>
</el-row>
<el-row>
<el-col :span="5">
<el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;">
<el-form-item label="选择机构：">
<el-select
size="small"
v-model="formInline.organization"
placeholder="请选择发布状态"
@change="changeOrganization"
>
<el-option
v-for="item in organizationList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-form>
</el-col>
</el-row>
<div class="choose">{{ chooseOrganization }}</div>
<div class="button-group">
<el-button type="default" size="small" @click="exportExcel">导出Excel</el-button>
<el-button type="default" size="small" @click="changeDate" v-if="activeName=='first'">数据调整</el-button>
<el-button type="default" size="small" @click="update" v-else>修改范围</el-button>
<el-button type="primary" size="small" @click="release">发布报告</el-button>
</div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="参与情况" name="first">
<part-in></part-in>
</el-tab-pane>
<el-tab-pane label="人群分析" name="second">
<crowd-analysis :formInline="formInline">
</crowd-analysis>
</el-tab-pane>
<el-tab-pane label="课程分析" name="third">
<course-analysis :formInline="formInline">
</course-analysis>
</el-tab-pane>
<el-tab-pane label="考试分析" name="fourth">
<examination-analysisfrom></examination-analysisfrom>
</el-tab-pane>
<el-tab-pane label="学习效果分析" name="fifth" lazy>
<learning-effect></learning-effect>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import CourseAnalysis from "./course-analysis.vue";
import CrowdAnalysis from "./crowd-analysis.vue";
import PartIn from './part-in.vue';
import ExaminationAnalysisfrom from './examination-analysis.vue';
import LearningEffect from './learning-effect.vue';
import { create } from "domain";
import { mapGetters } from "vuex";
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: {
BreadCrumb,
CourseAnalysis,
CrowdAnalysis,
PartIn,
ExaminationAnalysisfrom,
LearningEffect
},
data() {
return {
curmbFirst: "学情报告",
curmbSecond: "项目列表",
organizationList: [
{
label: "西湖区第二人民医院",
value: "1"
},
{
label: "杭州市中医院",
value: "2"
}
],
chooseOrganization: "",
optionsRegion: [],
formInline: {
region: [],
date: "",
organization: "",
pageNo: 1,
pageSize: 10
},
activeName: "first"
};
},
computed: {
...mapGetters([
"_token"
// "idType",
// "masterAdministratorFlag"
])
},
created() {
vm = this;
this.getRegionOption();
},
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
handleClick(tab, event) {
//console.log(tab, event);
console.log('activeName',this.activeName);
if(tab.name == "second") {
this.$refs.childCrowd.$emit("init");
}
},
handleChange(value) {
console.log(value);
},
changeOrganization(value) {
for (let i = 0; i < this.organizationList.length; i++) {
if (value == this.organizationList[i].value) {
this.chooseOrganization = this.organizationList[i].label;
}
}
},
getRegionOption() {
this.optionsRegion = operationData.getRegionOption();
},
search() {
//console.log(this.formInline,this.activeName);
if (this.activeName == "first") {
} else if (this.activeName == "second") {
this.$refs.childCrowd.$emit("search");
} else if (this.activeName == "third") {
this.$refs.childCourse.$emit("search");
} else if (this.activeName == "fourth") {
} else if (this.activeName == "fifth") {
}
},
reset() {},
exportExcel() {
console.log('excel');
},
update() {},
release() {},
changeDate() {
this.$router.push('/data-alignment')
}
}
};
</script>
<style lang="scss">
.course-analysis-wrap {
.component-content {
background: #fff;
padding: 10px;
.header-title {
padding: 10px 12px;
font-size: 12px;
color: #449284;
border-bottom: 1px solid #efefef;
}
.button-group {
// position: absolute;
// right: 100px;
float: right;
margin-right: 20px;
}
.choose {
font-size: 12px;
margin-bottom: 20px;
}
.el-tabs__item.is-active {
color: #409eff;
}
.el-tabs__header {
width: 81%;
}
}
}
</style>
\ No newline at end of file
src/views/learning/learning-effect.vue 0 → 100644
浏览文件 @ 0096b52f
<template>
<div class="learning-effect">
<div class="learning" ref="learning"></div>
<div class="education" ref="education"></div>
</div>
</template>
<script>
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
const echarts = require("echarts");
export default {
data() {
return {};
},
mounted() {
commonUtil.resizeHeight();
this.initEcharts();
},
methods: {
// 初始化图表
initEcharts() {
openLoading(this);
let trainChart = echarts.init(this.$refs["learning"]);
let educationChart = echarts.init(this.$refs["education"]);
let trainPara = {
color: ["#FF9999", "#66CCFF"],
text: '培训前后知识点掌握情况变化',
xAxisData: [
"转诊与随访",
"转诊与随访",
"周三",
"治疗原则及降压目标",
"周五",
"治疗原则及降压目标",
"周日"
],
seriesBeforeDate: [20, 32, 31, 34, 39, 33, 32],
seriesAfterDate: [86, 10, 96, 10, 16, 16, 15]
}
let educationPara = {
color: ["#33FFFF", "#FF9999"],
text: '不同学历培训前后正确率对比',
xAxisData: [
"转诊与随访",
"转诊与随访",
"周三",
"治疗原则及降压目标",
"周五",
"治疗原则及降压目标",
"周日"
],
seriesBeforeDate: [20, 32, 31, 34, 39, 33, 32],
seriesAfterDate: [86, 10, 96, 10, 16, 16, 15]
};
// 显示图表。
trainChart.setOption(this.echartOptions(trainPara));
educationChart.setOption(this.echartOptions(educationPara));
closeLoading(this)
},
// 图表的参数
echartOptions(parameter) {
let option = {
color: parameter.color,
title: {
text: parameter.text,
x: "center",
textStyle: {
//主标题文本样式
fontSize: 16,
fontWeight: "bolder",
color: "#333"
}
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
legend: {
data: ["培训前正确率", "培训后正确率"],
right: 0,
top: 20
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: [
{
type: "category",
data: parameter.xAxisData,
axisLabel: {
//坐标轴刻度标签的相关设置。
interval: 0,
rotate: "45"
}
}
],
yAxis: [
{
name: "比率(%)",
type: "value",
axisLabel: {
show: true,
interval: "auto",
formatter: "{value} %"
},
show: true,
axisLine: {
// 轴线
show: false
}
}
],
series: [
{
name: "培训前正确率",
type: "bar",
barGap: "20%",
barMaxWidth: "50",
itemStyle: {
normal: {
label: {
show: true,
position: "top",
formatter: "{c}%"
}
}
},
data: parameter.seriesBeforeDate
},
{
name: "培训后正确率",
type: "bar",
barGap: "20%",
barMaxWidth: "50",
itemStyle: {
normal: {
label: {
show: true,
position: "top",
formatter: "{c}%" //这是关键，在需要的地方加上就行了
}
}
},
data: parameter.seriesAfterDate
}
]
};
return option;
}
}
};
</script>
<style lang='scss' rel='stylesheet/scss'>
.learning-effect {
width: 100%;
.learning,
.education {
margin-top: 40px;
min-width: 400px;
height: 400px;
background: #fff;
}
}
</style>
src/views/learning/name-list.vue 0 → 100644
浏览文件 @ 0096b52f
<template>
<div class="name-list">
<el-card class="where">
<p>地区: {{params.address}}</p>
<p>选择机构: {{params.pregress}}</p>
<el-row :gutter="20" class="input-box">
<el-col :span="12" :offset="6">
<el-input placeholder="查询姓名" v-model="name" class="input-search">
<el-button slot="append" class="search-btn" type="primary">查询</el-button>
</el-input>
</el-col>
</el-row>
</el-card>
<el-card>
<el-table :data="joinData" style="width: 100%">
<el-table-column prop="name" label="姓名" min-width="80" align="center"></el-table-column>
<el-table-column prop="sex" label="性别" min-width="100" align="center"></el-table-column>
<el-table-column prop="age" label="年龄" min-width="80" align="center"></el-table-column>
<el-table-column prop="title" label="职称" min-width="80" align="center"></el-table-column>
<el-table-column prop="duty" label="职务" min-width="80" align="center"></el-table-column>
<el-table-column prop="pregress" label="机构" min-width="200" align="center"></el-table-column>
<el-table-column prop="region" label="地区" min-width="80" align="center"></el-table-column>
<el-table-column prop="join" label="是否参与考试" min-width="80" align="center"></el-table-column>
<el-table-column prop="pass" label="是否通过考试" min-width="80" align="center"></el-table-column>
<el-table-column prop="paddTime" label="通过考试日期" min-width="80" align="center"></el-table-column>
<el-table-column prop="level" label="考试成绩等级" min-width="80" align="center"></el-table-column>
<div slot="empty">
<div class="table-empty">
<img src="../../assets/image/no-content1.png">
<p>没有查询到相关结果</p>
</div>
</div>
</el-table>
</el-card>
<!-- 分页 -->
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="searchParam.pageNo"
:page-sizes="[15, 30, 50, 100, 200, 500, 700, 1000, 1500, 2000]"
:page-size="searchParam.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
params: {
address: "浙江省/杭州市/西湖区",
pregress: "杭州市中医院、杭州市第七人民医院"
},
name: "",
joinData: [{
name: 'asd',
sex: '男',
age: 30,
title: '主任医师',
duty: '医生',
pregress: '上海市复旦大学附属华山医院',
region: '上海市徐汇区',
join: '是',
pass: '是',
paddTime: '2019-10-10',
level: '合格'
}],
totalRows: 0, //数据总数
searchParam: {
pageNo: 1, //当前是第几页
pageSize: 20 //页面总数
}
};
},
methods: {
// 搜索列表
search(flag) {
if(flag) vm.searchParam.pageNo = 1
openLoading(vm);
let params = {};
vm.GET(url, params).then(res => {
closeLoading(vm);
if (res.code == "000000") {
} else {
vm.$message.info(res.message);
}
});
},
// 重置搜索信息
resetMessage() {
this.selectProgress = {
status: "",
name: ""
};
vm.search();
},
// 更改数据显示数量
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
vm.searchParam.pageSize = val
vm.search()
},
// 换页
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
vm.searchParam.pageNo = value
vm.search()
},
}
};
</script>
<style lang='scss' rel='stylesheet/scss'>
.name-list {
.where {
p {
line-height: 40px;
}
.input-box {
margin-top: 40px;
.search-btn {
color: #fff;
border: none;
}
}
}
}
</style>
src/views/learning/part-in.vue 0 → 100644
浏览文件 @ 0096b52f
<template>
<div class="part-in">
<el-card>
<el-table :data="reportDetail" style="width: 100%">
<el-table-column prop="coverOrganizationNum" label="项目覆盖机构数" align="center"></el-table-column>
<el-table-column prop="coverPeopleNum" label="项目覆盖人数" align="center"></el-table-column>
<el-table-column prop="joinPeopleNum" label="项目参与人数" align="center"></el-table-column>
<el-table-column prop="finishPeopleNum" label="项目完成人数" align="center"></el-table-column>
<el-table-column prop="goodPeopleNum" label="成绩优秀人数" align="center"></el-table-column>
<el-table-column prop="standardPeopleNum" label="成绩合格人数" align="center"></el-table-column>
<div slot="empty">
<div class="table-empty">
<img src="../../assets/image/no-content1.png">
<p>没有查询到相关结果</p>
</div>
</div>
</el-table>
</el-card>
<div class="charts" ref="chartsBox" v-show="isShowEcharts"></div>
<el-card class="finish-table" v-show="!isShowEcharts">
<el-table :data="finishDetail" style="width: 100%" border>
<el-table-column prop="name" label="姓名" align="center"></el-table-column>
<el-table-column prop="desk" label="科室" align="center"></el-table-column>
<el-table-column prop="join" label="是否参与项目" align="center"></el-table-column>
<el-table-column prop="finish" label="是否完成项目" align="center"></el-table-column>
<el-table-column prop="endTime" label="完成项目日期" align="center"></el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
import { openLoading, closeLoading } from "../../utils/utils"
const echarts = require("echarts")
let vm;
export default {
data() {
return {
reportDetail: [
{
// 报告详情数据
coverOrganizationNum:2,
coverPeopleNum: 0,
joinPeopleNum: 0,
finishPeopleNum: 0,
goodPeopleNum: 0,
standardPeopleNum: 0
}
],
// 图表数据
chartOption: {
xAxisData: ["周一", "周二", "周三", "周一", "周二", "周三"],
seriesPass: [120, 132, 101, 120, 132, 101],
seriesJoin: [220, 182, 191, 220, 182, 191]
},
// 只有一个机构时显示人员完成情况
finishDetail:[{
name: '',
desk: '',
join: '是',
finish: '是',
endTime: '12-12-12'
}],
};
},
computed: {
isShowEcharts() {
return vm.reportDetail[0].coverOrganizationNum > 1
}
},
created() {
vm = this;
},
mounted() {
vm.initEcharts();
},
methods: {
// 初始化图表
initEcharts() {
openLoading(vm);
let myChart = echarts.init(vm.$refs["chartsBox"])
myChart.setOption(vm.initEchartOption(vm.chartOption))
closeLoading(vm)
},
// 图表参数
initEchartOption(params) {
// 图表相关的数据
let option = {
color: ['#1E90FF','#32CD32'],
title: {
text: "排行榜",
x: "left",
textStyle: {
//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontSize: 20,
fontStyle: "normal",
fontWeight: "normal",
color: "#000"
}
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: ["完成人数", "参与人数"],
bottom: 0
},
grid: {
left: "3%",
right: "4%",
bottom: "10%",
containLabel: true
},
xAxis: [
{
type: "category",
data: params.xAxisData
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "完成人数",
type: "bar",
stack: "人数",
barMaxWidth: "80",
data: params.seriesPass
},
{
name: "参与人数",
type: "bar",
stack: "人数",
barMaxWidth: "80",
data: params.seriesJoin
}
]
}
return option
}
}
};
</script>
<style lang='scss' rel='stylesheet/scss'>
.part-in {
.charts {
border-radius: 4px;
border: 1px solid #ebeef5;
background-color: #fff;
overflow: hidden;
color: #303133;
-webkit-transition: 0.3s;
transition: 0.3s;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
height: 600px;
background: #fff;
margin-top: 50px;
padding: 20px;
}
.finish-table {
margin-top: 30px;
background: #fff;
}
}
</style>
src/views/learning/report-list.vue 0 → 100644
浏览文件 @ 0096b52f
<template>
<div class="item-list">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="itemlist-content screenSet" id="screenSet">
<el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
<el-form ref="serchForm" :model="selectProgress" label-width="75px" style="width:100%;">
<el-col :span="6">
<el-form-item label="项目状态:">
<el-select
v-model="selectProgress.status"
size="small"
style="width: 100%;"
placeholder="请选择项目状态"
>
<el-option
v-for="(item,index) in statusSelect"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<el-input v-model="selectProgress.name" size="small" placeholder="请输入项目名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="12" style="padding:0;text-align:right;padding-right:15px;">
<el-button type="default" size="small" @click="resetMessage" style="margin-left:0;">重置</el-button>
<el-button type="primary" size="small" @click="search(1)">查询</el-button>
</el-col>
</el-form>
</el-row>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="项目名称" min-width="200" align="center"></el-table-column>
<el-table-column prop="status" label="项目状态" min-width="100" align="center"></el-table-column>
<el-table-column prop="startTime" label="开始时间" min-width="80" align="center"></el-table-column>
<el-table-column prop="endTime" label="结束时间" min-width="80" align="center"></el-table-column>
<el-table-column label="操作" fixed="right" align="center" min-width="200">
<template slot-scope="scope">
<el-button type="text" size="small" @click="go(scope.row)">查看学情报告</el-button>
</template>
</el-table-column>
<div slot="empty">
<div class="table-empty">
<img src="../../assets/image/no-content1.png">
<p>没有查询到相关结果</p>
</div>
</div>
</el-table>
</div>
<!-- 分页 -->
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="searchParam.pageNo"
:page-sizes="[15, 30, 50, 100, 200, 500, 700, 1000, 1500, 2000]"
:page-size="searchParam.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows"
></el-pagination>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import BreadCrumb from "../../components/breadcrumb.vue";
let vm = null;
export default {
data() {
return {
curmbFirst: "学情报告",
curmbSecond: "项目列表",
selectProgress: {
//搜索信息
status: "",
name: ""
},
statusSelect: [
//项目状态
{
label: "进行中",
value: "1"
},
{
label: "已结束",
value: "2"
}
],
tableData: [
// table数据
{
name: "one",
status: "进行中",
startTime: "12-12-12",
endTime: "23-23-23"
}
],
totalRows: 0, //数据总数
searchParam: {
pageNo: 1, //当前是第几页
pageSize: 20 //页面总数
}
};
},
components: {
BreadCrumb
},
created() {
vm = this;
},
// 挂载到Dom完成时
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
// 搜索列表
search(flag) {
if(flag) vm.searchParam.pageNo = 1
openLoading(vm)
let params = {}
vm.GET(url, params).then(res => {
closeLoading(vm);
if (res.code == "000000") {
} else {
vm.$message.info(res.message)
}
})
},
// 重置搜索信息
resetMessage() {
this.selectProgress = {
status: "",
name: ""
};
vm.search()
},
// 更改数据显示数量
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
vm.searchParam.pageSize = val
vm.search()
},
// 换页
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
vm.searchParam.pageNo = value
vm.search()
},
//跳转到报告详情页
go(row) {
vm.$router.push({path:"/item-list",params: row})
}
}
};
</script>
<style lang="scss">
.item-list {
.itemlist-content {
padding: 10px;
background: #fff;
}
}
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或