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/data-alignment.vue
浏览文件 @ 8039a3f4
......@@ -6,182 +6,175 @@
<div class="title">数据调整</div>
</el-col>
<el-col :span="3">
<el-button class="add-button" size="small" type="primary">保存修改</el-button>
<el-button class="add-button" size="small" type="primary" @click="saveUpdate">保存修改</el-button>
</el-col>
<el-col :span="3">
<el-button class="add-button" size="small" type="primary">取消</el-button>
<el-button class="add-button" size="small" @click="close">取消</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 class="text">
<p>地区：浙江省/杭州市/西湖区</p>
<p>选择机构：杭州中医院</p>
</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>
<el-form class="form-update" ref="serchForm" :model="formInline" label-width="100px" style="width:40%;">
<el-form-item label="项目成绩:">
<el-select
v-model="formInline.record"
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-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-form>
<div class="form-button">
<el-button @click="search()" type="primary">查询</el-button>
<el-button @click="resetForm()">重置</el-button>
</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 class="line"></div>
<p class="explain">说明：只有被勾选中的人才会归入数据统计范围，不勾的不会统计</p>
<el-table
class="data-main"
border
center
ref="multipleTable"
:data="mathDate"
tooltip-effect="dark"
@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">
<template slot-scope="scope">
{{ scope.row.joinStatus | projectStatus }}
</template>
</el-table-column>
<el-table-column prop="record" label="项目成绩" width="120">
<template slot-scope="scope">
{{ scope.row.record | recordValue }}
</template>
</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="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>
<div slot="empty">
<div class="table-empty">
<img src="../../assets/image/no-content1.png" />
<p>没有查询到相关结果</p>
</div>
</div>
</el-table>
<!-- 分页 -->
<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>
<el-dialog
title="发布学情报告"
:visible.sync="dialogVisible"
width="30%"
append-to-body>
<p style="color:red">项目【基层高血压管理】的数据修改</p>
<p>确认需要更新学情报告吗？</p>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="updateData()">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
let vm
let vm;
export default {
data() {
return {
formInline: {
pregStatus: "",
mathStatus: ""
record: "",
mathStatus: "",
},
preStaSelect: [
//项目状态
{
label: "未参与项目",
value: "1"
value: 1
},
{
label: "参与项目",
value: "2"
value: 2
},
{
label: "完成项目",
value: "3"
value: 3
}
],
mathStaSelect: [
//项目状态
{
label: "归入统计",
value: "1"
value: 1
},
{
label: "移除统计",
value: "2"
}
],
mathDate: [
{
name: "张医生",
joinStatus: "完成项目",
progress: "谈西社区卫生服务站",
desk: "全科",
rank: "一甲",
province: "河北省",
city: "石家庄市",
district: "长安区",
address: "建北街道",
radio: '1'
value: 2
}
],
mathDate: [],
multipleSelection: [], //被选中的行
totalRows: 0, //数据总数
pageNo: 1, //当前是第几页
pageSize: 20 //页面总数
pageSize: 20, //页面总数
dialogVisible: false,
};
},
created() {
vm = this
vm = this;
this.search();
},
methods: {
// 将选中行放入数组
handleSelectionChange(val) {
this.multipleSelection = val
console.log(this.multipleSelection)
this.multipleSelection = val;
console.log(this.multipleSelection);
},
handleClick(row) {
console.log(row);
},
// 更改数据显示数量
// 更改数据显示数量
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
......@@ -195,8 +188,8 @@ export default {
return;
}
this.multipleSelection.forEach(el => {
el.radio = '1'
})
el.radio = "1";
});
},
// 全部不统计
removeMath() {
......@@ -204,9 +197,72 @@ export default {
return;
}
this.multipleSelection.forEach(el => {
el.radio = '2'
})
}
el.radio = "2";
});
},
close() {
this.$emit("closeDialog");
},
search() {
this.mathDate = [
{
name: "张医生",
joinStatus: 1,
record: 1,
progress: "谈西社区卫生服务站",
desk: "全科",
rank: "一甲",
province: "河北省",
city: "石家庄市",
district: "长安区",
address: "建北街道",
radio: "1"
},
{
name: "贾医生",
joinStatus: 2,
record: 1,
progress: "谈西社区卫生服务站",
desk: "全科",
rank: "一甲",
province: "河北省",
city: "石家庄市",
district: "长安区",
address: "建北街道",
radio: "1"
},
{
name: "谢医生",
joinStatus: 2,
record: 1,
progress: "上海卫生局",
desk: "全科",
rank: "一甲",
province: "河北省",
city: "石家庄市",
district: "长安区",
address: "建北街道",
radio: "1"
}
];
},
//重置
resetForm() {
vm.formInline = Object.assign(
{},
{
record: "",
mathStatus: "",
}
);
vm.tags = [];
},
saveUpdate() {
this.dialogVisible = true;
},
updateData() {
},
}
};
</script>
......@@ -217,16 +273,43 @@ export default {
.alignment-header {
padding: 20px;
margin: 0 30px;
border-bottom: 1px solid #000;
border-bottom: 1px solid #606266;
}
.text {
margin-top: 30px;
margin-left: 98px;
font-size: 13px;
color: #606266;
}
.form {
padding: 30px;
.form-update {
margin: 30px 0px 0px 60px;
}
.form-button {
width: 45%;
top: -62px;
position: relative;
left: 50%;
}
.line {
margin: -20px 30px 30px 30px;
width: 100%;
border-bottom: 1px solid #606266;
}
.explain {
margin: 10px 0 10px 38px;
font-size: 13px;
color: #606266;
}
.data-main {
padding: 0 40px;
margin-left: 36px;
width: 90%;
// padding: 0 40px;
.select {
margin-bottom: 30px;
}
}
.pagination {
margin-right: 10px;
}
}
</style>
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 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或