Skip to content

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

学情报告 页面搭建

上级 2d6b9720
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 358 行增加 和 219 行删除
src/utils/filter.js
浏览文件 @ 8039a3f4
......@@ -185,5 +185,19 @@ const vueFilter = {
return '否'
}
},
projectStatus: (value) => {
if(value == 1) {
return '完成项目'
}else {
return '归入统计'
}
},
recordValue: (value) => {
if(value == 1) {
return '合格'
}else {
return '不通过'
}
},
}
export default vueFilter
\ No newline at end of file
src/utils/operation.js
浏览文件 @ 8039a3f4
......@@ -364,4 +364,65 @@ export function getBarOption(xAxisData, seriesData) {
]
};
return option;
}
export function getRank() {
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: ["周一", "周二", "周三", "周一", "周二", "周三"],
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "完成人数",
type: "bar",
stack: "人数",
barMaxWidth: "80",
data: [120, 132, 101, 120, 132, 101],
},
{
name: "参与人数",
type: "bar",
stack: "人数",
barMaxWidth: "80",
data: [220, 182, 191, 220, 182, 191]
}
]
};
return option;
}
\ No newline at end of file
src/views/learning/item-list.vue
浏览文件 @ 8039a3f4
......@@ -52,30 +52,49 @@
<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>
<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>
<el-button type="default" size="small" @click="exportExcel">导出明细</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 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">
</crowd-analysis>
</el-tab-pane>
<el-tab-pane label="课程分析" name="third">
<course-analysis ref="childCourse" :formInline="formInline" :activeName="activeName">
</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>
<el-tab-pane label="参与情况" name="first">
<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">
</crowd-analysis>
</el-tab-pane>
<el-tab-pane label="课程分析" name="third">
<course-analysis ref="childCourse" :formInline="formInline" :activeName="activeName">
</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>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
center>
<p style="text-align:center">文件正在生成，你可以去“我的导出下载”页，下载文件</p>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">留在当前页</el-button>
<el-button type="primary" @click="toDownload()">去下载</el-button>
</span>
</el-dialog>
<el-dialog
title=""
:visible.sync="dialogUpdate"
width="90%"
center>
<!-- <el-button @click="dialogUpdate = false">取 消</el-button> -->
<data-alignment @closeDialog="dialogUpdate = false"></data-alignment>
</el-dialog>
</div>
</div>
</template>
......@@ -86,6 +105,7 @@ import CrowdAnalysis from "./item-crowd-analysis.vue";
import PartIn from './item-part-in.vue';
import ExaminationAnalysisfrom from './item-examination-analysis.vue';
import LearningEffect from './item-learning-effect.vue';
import DataAlignment from './data-alignment.vue';
import { create } from "domain";
import { mapGetters } from "vuex";
import { openLoading, closeLoading } from "../../utils/utils";
......@@ -101,7 +121,8 @@ export default {
CrowdAnalysis,
PartIn,
ExaminationAnalysisfrom,
LearningEffect
LearningEffect,
DataAlignment,
},
data() {
return {
......@@ -137,6 +158,8 @@ export default {
tags: [],
activeName: "first",
organizationNum: 0,
dialogVisible: false,
dialogUpdate: false,
};
},
computed: {
......@@ -216,6 +239,9 @@ export default {
getOrganizationNum() {
//选择全部
let num = 0;
if(this.tags.length == 0) {
return;
}
if(this.tags[0].value == 0) {
num = this.organizationList.length - 1;
return num;
......@@ -258,12 +284,15 @@ export default {
vm.tags = [];
},
exportExcel() {
console.log('excel');
this.dialogVisible = true;
},
toDownload() {
vm.$router.push({path: 'data-alignment'})
},
update() {},
release() {},
changeDate() {
this.$router.push('/data-alignment')
this.dialogUpdate = true;
}
}
};
......
src/views/learning/item-part-in.vue
浏览文件 @ 8039a3f4
<template>
<div class="part-in">
<div class="part-in-wrap">
<div v-for="(item , index) in cardData" :key="index" class>
<el-card class="box-card">
<div slot="header" class="title">
......@@ -11,8 +11,8 @@
</div>
</el-card>
</div>
<!-- <div class="charts" id="rankChart" ref="rankChart"></div> -->
<div class="charts" id="age" ref="age"></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>
......@@ -55,12 +55,6 @@ export default {
},
data() {
return {
// 图表数据
chartOption: {
xAxisData: ["周一", "周二", "周三", "周一", "周二", "周三"],
seriesPass: [120, 132, 101, 120, 132, 101],
seriesJoin: [220, 182, 191, 220, 182, 191]
},
// 只有一个机构时显示人员完成情况
finishDetail: [],
cardData: [],
......@@ -70,10 +64,11 @@ export default {
},
created() {
vm = this;
this.getCardData();
// this.getRank();
this.getAgeData();
this.getTableData();
this.$nextTick(function() {
this.getCardData();
this.getRank();
this.getTableData();
});
},
mounted: function() {
commonUtil.resizeHeight();
......@@ -86,7 +81,7 @@ export default {
}
});
if (this.activeName == "first") {
// this.updateResize();
this.updateResize();
}
},
methods: {
......@@ -110,33 +105,9 @@ export default {
];
},
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);
let myChart = echarts.init(this.$refs.rankChart);
let optionValue = operationData.getRank();
myChart.setOption(optionValue);
},
getCardData() {
this.cardData = [
......@@ -172,31 +143,12 @@ export default {
},
];
},
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 {
<style lang='scss'>
.part-in-wrap {
.box-card {
width: 15%;
margin-right: 1%;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或