Skip to content

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

update

上级 dfcd30a3
显示空白字符变更
内嵌 并排
正在显示 包含 318 行增加 和 157 行删除
package-lock.json
浏览文件 @ 2d6b9720
......@@ -2306,9 +2306,9 @@
"dev": true
},
"element-ui": {
"version": "2.6.1",
"resolved": "http://192.168.110.93:4873/element-ui/-/element-ui-2.6.1.tgz",
"integrity": "sha1-htt5/13psbzDGHtls3crDFQHRxg=",
"version": "2.10.0",
"resolved": "http://192.168.110.93:4873/element-ui/-/element-ui-2.10.0.tgz",
"integrity": "sha1-5hKfa21v/g260SWkqNF9RHpfY5w=",
"requires": {
"async-validator": "~1.8.1",
"babel-helper-vue-jsx-merge-props": "^2.0.0",
......@@ -2777,8 +2777,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
......
src/utils/filter.js
浏览文件 @ 2d6b9720
......@@ -171,6 +171,19 @@ const vueFilter = {
return '已结束'
}
},
partJoin: (value) => {
if(value == 1) {
return '是'
}else {
return '否'
}
},
partFinish: (value) => {
if(value == 1) {
return '是'
}else {
return '否'
}
},
}
export default vueFilter
\ No newline at end of file
src/views/learning/item-list.vue
浏览文件 @ 2d6b9720
......@@ -2,8 +2,7 @@
<div class="course-analysis-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="component-content screenSet" id="screenSet">
<el-form ref="formInline" :model="formInline" label-width="80px">
<el-form ref="formInline" :model="formInline" label-width="80px" style="width:50%">
<el-form-item label="选择地区：">
<el-cascader
size="small"
......@@ -23,6 +22,7 @@
@change="changeOrganization"
multiple
collapse-tags
:disabled="formInline.region.length !== 3"
style="width:330px"
>
<el-option
......@@ -33,18 +33,24 @@
></el-option>
</el-select>
</el-form-item>
<div class="choose">{{ chooseOrganization }}</div>
<div class="tag-group" >
<el-tag
v-for="tag in tags"
:key="tag.name"
closable>
{{ tag }}
:key="tag.value"
type="info"
closable
@close="handleTagClose(tag)">
{{ tag.label }}
</el-tag>
</div>
<el-form-item label="">
<el-checkbox size="small" v-model="formInline.checked">查看原始数据</el-checkbox>
</el-form-item>
</el-form>
<!-- <div class="choose">{{ chooseOrganization }}</div> -->
<div class="form-button">
<el-button @click="search()" type="primary">查询</el-button>
<el-button @click="resetForm()">重置</el-button>
</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>
......@@ -53,7 +59,7 @@
</div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="参与情况" name="first">
<part-in></part-in>
<part-in ref="childPart" :formInline="formInline" :activeName="activeName" :organizationNum="organizationNum"></part-in>
</el-tab-pane>
<el-tab-pane label="人群分析" name="second">
<crowd-analysis ref="childCrowd" :formInline="formInline" :activeName="activeName">
......@@ -108,14 +114,17 @@ export default {
},
{
label: "西湖区第二人民医院",
value: 1,
value: 66,
},
{
label: "杭州市中医院",
value: 2,
value: 233,
},
{
label: "仁济医院",
value: 999,
}
],
chooseOrganization: "",
optionsRegion: [],
formInline: {
region: [],
......@@ -123,10 +132,11 @@ export default {
organization: [],
checked: false,
pageNo: 1,
pageSize: 10
pageSize: 10,
},
tags: [],
activeName: "first",
organizationNum: 0,
};
},
computed: {
......@@ -151,37 +161,102 @@ export default {
}
},
handleChange(value) {
console.log(value);
// console.log(value);
this.formInline.organization = [];
this.tags = [];
},
changeOrganization(value) {
console.log(value);
this.chooseOrganization = "";
// console.log('formInline',this.formInline.organization);
this.tags = [];
//选了全部的情况下
for (let a = 0; a < this.formInline.organization.length; a++) {
if(this.formInline.organization[a] == 0) {//选了全部
let tagItem = {
label: '全部',
value: 0,
}
this.tags.push(tagItem);
return;
}
}
//没选全部
for (let i = 0; i < this.organizationList.length; i++) {
for(let j=0; j<value.length;j++) {
if (value[j] == this.organizationList[i].value) {
console.log('value[j]',j,value[j],this.organizationList[i].label )
this.chooseOrganization += this.organizationList[i].label + ' ';
this.tags.push(this.organizationList[i].label);
// console.log('value[j]',j,value[j],this.organizationList[i].label )
let tagItem = {
label: this.organizationList[i].label,
value: this.organizationList[i].value,
};
this.tags.push(tagItem);
}
}
}
},
handleTagClose(tag) {
// console.log(tag);
//选了全部的情况下
if(this.tags.length > 0 && this.tags[0].value == 0) {
this.tags.splice(0, 1);
this.formInline.organization = [];
return;
}
//没全部的情况下
for(let i=0;i<this.tags.length;i++) {
if(tag.value == this.tags[i].value) {
this.tags.splice(i, 1);
this.formInline.organization.splice(this.formInline.organization.indexOf(tag.value), 1);
break;
}
}
},
getRegionOption() {
this.optionsRegion = operationData.getRegionOption();
},
getOrganizationNum() {
//选择全部
let num = 0;
if(this.tags[0].value == 0) {
num = this.organizationList.length - 1;
return num;
}
//没有选择全部
num = this.tags.length;
return num;
},
search() {
//console.log(this.formInline,this.activeName);
// console.log(this.formInline,this.activeName);
if (this.activeName == "first") {
this.organizationNum = this.getOrganizationNum();
// console.log('this.organizationNum',this.organizationNum)
this.$nextTick(function() {
this.$refs.childPart.$emit("search");
})
} 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") {
}
},
//重置
resetForm() {
vm.formInline = Object.assign(
{},
{
region: [],
date: "",
organization: [],
checked: false,
pageNo: 1,
pageSize: 10,
}
);
vm.tags = [];
},
reset() {},
exportExcel() {
console.log('excel');
},
......@@ -204,6 +279,12 @@ export default {
color: #449284;
border-bottom: 1px solid #efefef;
}
.form-button {
width: 45%;
top: -120px;
position: relative;
left: 50%;
}
.button-group {
// position: absolute;
// right: 100px;
......@@ -218,7 +299,13 @@ export default {
color: #409eff;
}
.el-tabs__header {
width: 81%;
width: 65%;
}
.tag-group {
margin-left: 78px;
.el-tag {
margin-right: 20px;
}
}
}
}
......
src/views/learning/item-part-in.vue
浏览文件 @ 2d6b9720
<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 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-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>
</div>
<!-- <div class="charts" id="rankChart" ref="rankChart"></div> -->
<div class="charts" id="age" ref="age"></div>
<el-table v-show="organizationNum < 2" :data="finishDetail" class="project-table" 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-column prop="join" label="是否参与项目" align="center">
<template slot-scope="scope">
{{ scope.row.join | partJoin }}
</template>
</el-table-column>
<el-table-column prop="finish" label="是否完成项目" align="center">
<template slot-scope="scope">
{{ scope.row.finish | partFinish }}
</template>
</el-table-column>
<el-table-column prop="endTime" label="完成项目日期" align="center">
<template slot-scope="scope">
{{ scope.row.endTime | liveDateFilter }}
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
import { openLoading, closeLoading } from "../../utils/utils"
const echarts = require("echarts")
let vm;
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 {
props: {
formInline: {
type: Object
},
activeName: {
type: String
},
organizationNum: {
type: Number
},
},
data() {
return {
reportDetail: [
{
// 报告详情数据
coverOrganizationNum:2,
coverPeopleNum: 0,
joinPeopleNum: 0,
finishPeopleNum: 0,
goodPeopleNum: 0,
standardPeopleNum: 0
}
],
// 图表数据
chartOption: {
xAxisData: ["周一", "周二", "周三", "周一", "周二", "周三"],
......@@ -55,104 +62,160 @@ export default {
seriesJoin: [220, 182, 191, 220, 182, 191]
},
// 只有一个机构时显示人员完成情况
finishDetail:[{
name: '',
desk: '',
join: '是',
finish: '是',
endTime: '12-12-12'
}],
finishDetail: [],
cardData: [],
showChart: true,
showTable: false,
};
},
computed: {
isShowEcharts() {
return vm.reportDetail[0].coverOrganizationNum > 1
}
},
created() {
vm = this;
this.getCardData();
// this.getRank();
this.getAgeData();
this.getTableData();
},
mounted() {
vm.initEcharts();
mounted: function() {
commonUtil.resizeHeight();
this.$on('search',()=>{
console.log(this.formInline,this.organizationNum);
if(this.organizationNum > 1) {
this.getCardData();
} else {
this.getTableData();
}
});
if (this.activeName == "first") {
// this.updateResize();
}
},
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"
updateResize() {
this.$nextTick(function() {
let chartRank = echarts.init(document.getElementById("rankChart"))
window.onresize = function() {
chartRank.resize();
}
});
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
getTableData() {
vm.finishDetail = [
{
name: "张三",
desk: "神经内科",
join: 1,
finish: 1,
endTime: 1561707567000,
}
];
},
legend: {
data: ["完成人数", "参与人数"],
bottom: 0
getRank() {
// let myChart = echarts.init(this.$refs.rankChart);
// let optionValue = operationData.getRank();
// console.log('optionValue值',optionValue)
// debugger;
// myChart.setOption(optionValue);
debugger;
let myChart = echarts.init(document.getElementById("rankChart"));
let data = [22, 50, 350, 80, 95];
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);
},
grid: {
left: "3%",
right: "4%",
bottom: "10%",
containLabel: true
getCardData() {
this.cardData = [
{
title: "应参与机构数",
num: 10290,
unit: ""
},
xAxis: [
{
type: "category",
data: params.xAxisData
}
],
yAxis: [
title: "应参与人数",
num: 59287,
unit: ""
},
{
type: "value"
}
],
series: [
title: "已参与人数",
num: 47262,
unit: ""
},
{
name: "完成人数",
type: "bar",
stack: "人数",
barMaxWidth: "80",
data: params.seriesPass
title: "项目获证人数",
num: 47262,
unit: ""
},
{
name: "参与人数",
type: "bar",
stack: "人数",
barMaxWidth: "80",
data: params.seriesJoin
}
]
}
return option
}
title: "优秀证书人数",
num: 47262,
unit: ""
},
{
title: "合格证书人数",
num: 47262,
unit: ""
},
];
},
getAgeData() {
let data = [1000, 25000, 15000, 8000, 7000, 500];
this.ageDivision(data);
},
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' rel='stylesheet/scss'>
.part-in {
.box-card {
width: 15%;
margin-right: 1%;
float: left;
.el-card__header {
border-bottom-width: 0;
}
.title {
text-align: center;
}
.box-content {
text-align: center;
height: 40px;
}
}
.charts {
top: 20px;
margin-left: 10%;
width: 80%;
border-radius: 4px;
border: 1px solid #ebeef5;
background-color: #fff;
......@@ -163,11 +226,10 @@ export default {
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;
.project-table {
top: 15px;
background: #fff;
}
}
......
src/views/learning/report-list.vue
浏览文件 @ 2d6b9720
......@@ -51,7 +51,7 @@
</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>
<el-button style="color:#509284" type="text" size="small" @click="go(scope.row)">查看学情报告</el-button>
</template>
</el-table-column>
<div slot="empty">
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或