提交 7627ae0d 编写于 作者: guangjun.yang's avatar guangjun.yang

从1101上拉取的数据

上级 18fb0418
...@@ -22,11 +22,11 @@ const nameList = r => require.ensure([], () => r(require('../views/learning/name ...@@ -22,11 +22,11 @@ const nameList = r => require.ensure([], () => r(require('../views/learning/name
const dataAlignment = r => require.ensure([], () => r(require('../views/learning/data-alignment.vue')), 'data-alignment') const dataAlignment = r => require.ensure([], () => r(require('../views/learning/data-alignment.vue')), 'data-alignment')
const exportDownload = r => require.ensure([], () => r(require('../views/learning/export-download.vue')), 'export-download') const exportDownload = r => require.ensure([], () => r(require('../views/learning/export-download.vue')), 'export-download')
const reportLisOld = r => require.ensure([], () => r(require('../views/learning-old/report-list.vue')), 'report-list') const reportLisOld = r => require.ensure([], () => r(require('../views/learning-o/report-list.vue')), 'report-list')
const itemListOld = r => require.ensure([], () => r(require('../views/learning-old/item-list.vue')), 'item-list') const itemListOld = r => require.ensure([], () => r(require('../views/learning-o/item-list.vue')), 'item-list')
const nameListOld = r => require.ensure([], () => r(require('../views/learning-old/name-list.vue')), 'name-list') const nameListOld = r => require.ensure([], () => r(require('../views/learning-o/name-list.vue')), 'name-list')
const dataAlignmentOld = r => require.ensure([], () => r(require('../views/learning-old/data-alignment.vue')), 'data-alignment') const dataAlignmentOld = r => require.ensure([], () => r(require('../views/learning-o/data-alignment.vue')), 'data-alignment')
const exportDownloadOld = r => require.ensure([], () => r(require('../views/learning-old/export-download.vue')), 'export-download') const exportDownloadOld = r => require.ensure([], () => r(require('../views/learning-o/export-download.vue')), 'export-download')
const itemShield = r => require.ensure([], () => r(require('../views/education/item-shield.vue')), 'item-shield') const itemShield = r => require.ensure([], () => r(require('../views/education/item-shield.vue')), 'item-shield')
const entryManager = r => require.ensure([], () => r(require('../views/education/entry-manager.vue')), 'entry-manager') const entryManager = r => require.ensure([], () => r(require('../views/education/entry-manager.vue')), 'entry-manager')
......
<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" @click="saveUpdate">保存修改</el-button>
</el-col>
<el-col :span="3">
<el-button class="add-button" size="small" @click="close">取消</el-button>
</el-col>
</el-row>
</div>
<div class="text">
<p>地区:{{ dialogData.region }}</p>
<p>选择机构:{{ dialogData.organization }}</p>
</div>
<el-form
class="form-update"
ref="serchForm"
:model="formData"
label-width="100px"
style="width:40%;"
>
<el-form-item label="项目成绩:">
<el-select
v-model="formData.achievementStatus"
size="small"
style="width: 100%;"
placeholder="请选择项目成绩"
>
<el-option
v-for="(item,index) in achievementList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="统计状态:">
<el-select
v-model="formData.status"
size="small"
style="width: 100%;"
placeholder="请选择统计状态"
>
<el-option
v-for="(item,index) in statusList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="姓名:">
<el-input v-model="formData.doctorName" placeholder="请输入人员名称"></el-input>
</el-form-item>
</el-form>
<div class="form-button">
<el-button @click="searchData()" type="primary">查询</el-button>
<el-button @click="resetForm()">重置</el-button>
</div>
<!-- <div class="line"></div> -->
<p class="explain">说明:只有被勾选中的人才会归入数据统计范围,不勾的不会统计</p>
<el-table
class="data-main"
border
center
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
@selection-change="handleSelectionChange"
:row-key="getRowKeys"
>
<el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
<el-table-column prop="name" label="姓名" min-width="80"></el-table-column>
<el-table-column prop="projectStatus" label="项目状态" width="120">
<template slot-scope="scope">{{ scope.row.projectStatus | projectStatus }}</template>
</el-table-column>
<el-table-column prop="projectResult" label="项目成绩" width="120">
<template slot-scope="scope">{{ scope.row.projectResult | recordValue }}</template>
</el-table-column>
<el-table-column prop="hospitalName" label="机构" min-width="120" show-overflow-tooltip></el-table-column>
<el-table-column prop="departmentName" label="科室" show-overflow-tooltip></el-table-column>
<el-table-column prop="provinceName" label="省/直辖市" show-overflow-tooltip></el-table-column>
<el-table-column prop="cityName" label="市" show-overflow-tooltip></el-table-column>
<el-table-column prop="countyName" label="区/县" show-overflow-tooltip></el-table-column>
<el-table-column prop="townName" 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="formData.pageNo"
:page-sizes="[20, 50 ,100]"
:page-size="formData.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">项目【{{ projectName }}】的数据修改</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>
import { openLoading, closeLoading } from "../../utils/utils";
import * as operationData from "../../utils/operation";
let vm;
export default {
props: {
formInline: {
type: Object
},
organizationList: {
type: Array
},
dialogData: {
type: Object
}
},
data() {
return {
formData: {
achievementStatus: "",
status: 1,
doctorName: '',
pageNo: 1,
pageSize: 20,
},
achievementList: [
//项目状态
{
label: "全部",
value: '',
},
{
label: "通过",
value: 1
},
{
label: "不通过",
value: 2
},
{
label: "无成绩",
value: 3
}
],
statusList: [
//项目状态
{
label: "全部",
value: 1
},
{
label: "归入统计",
value: 2
},
{
label: "移除统计",
value: 3
},
],
tableData: [],
multipleSelection: [], //被选中的行
totalRows: 0, //数据总数
getRowKeys(row) {
return row.doctorId;
},
selectedData: [],
dialogVisible: false,
projectId: "",
projectName: "",
changedDoctor: [],
changedDoctor2: [],
lookedDoctor: [],
};
},
created() {
vm = this;
this.projectId = vm.getUrlSearch(window.location.href, "id");
this.projectName = vm.getUrlSearch(window.location.href, "projectName");
// this.search();
console.log(vm.dialogData);
},
mounted: function() {
//父组件传值
this.$on("search", () => {
// this.lookedDoctor = [];
// this.changedDoctor = [];
// this.changedDoctor2 = [];
// this.$refs.multipleTable.clearSelection();
this.resetForm();
// this.search();
});
},
methods: {
// 将选中行放入数组
handleSelectionChange(rows) {
this.changedDoctor = [];
this.changedDoctor2 = [];
this.selectedData = [];
if (rows) {
rows.forEach(row => {
if (row) {
this.changedDoctor.push(row.doctorId);
}
});
}
this.changedDoctor2 = operationData.getDifference(
this.lookedDoctor,
this.changedDoctor
);
console.log(
"选",
this.changedDoctor,
"没",
this.changedDoctor2
);
},
// 更改数据显示数量
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
vm.formData.pageSize = val;
vm.search();
},
// 换页
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
vm.formData.pageNo = val;
vm.search();
},
close() {
this.$emit("closeDialog");
},
searchData() {
vm.formData.pageNo = 1;
vm.search();
},
search() {
setTimeout(function(){
openLoading(vm);
},20);
let checkAll = operationData.hasAll(vm.formInline.organization);
let req = {
projectId: vm.projectId,
achievementStatus: vm.formData.achievementStatus,
status: vm.formData.status,
ids: operationData.getIds(vm.formInline,vm.organizationList,checkAll),
type: operationData.getSearchType(vm.formInline,checkAll),
doctorName: vm.formData.doctorName,
pageNo: vm.formData.pageNo,
pageSize: vm.formData.pageSize,
};
vm.reportGET("report/portal/getProjectData", req).then(res => {
// closeLoading(vm);
if (res.code == "000000") {
vm.tableData = res.data.projectData;
vm.totalRows = res.data.count;
let idList = operationData.getDoctorIdList(vm.tableData);
// console.log('idList',idList);
vm.lookedDoctor = operationData.getUnion(
vm.lookedDoctor,
idList
);
vm.initDoctorChoose();
}
});
},
initDoctorChoose() {
let tableStatus = vm.tableData;
if(typeof tableStatus === 'undefined') {
return;
}
tableStatus.forEach(row => {
let idList = [];
idList[0] = row.doctorId;
let intersect = operationData.getIntersect(idList,this.changedDoctor);
let intersect2 = operationData.getIntersect(idList,this.changedDoctor2);
// console.log('intersect',intersect,'intersect2',intersect2);
//debugger;
if(intersect.length > 0) {
//选中
//this.$refs.multipleOrganization.toggleRowSelection(row);
} else if (intersect2.length > 0) {
//不选
} else {
if (row.status == 1) {
this.$nextTick(function() {
this.$refs.multipleTable.toggleRowSelection(row);
});
}
}
});
},
//重置
resetForm() {
this.lookedDoctor = [];
this.changedDoctor = [];
this.changedDoctor2 = [];
this.$refs.multipleTable.clearSelection();
vm.formData = Object.assign(
{},
{
achievementStatus: "",
status: 1,
doctorName: '',
pageNo: 1,
pageSize: 20,
}
);
vm.search();
},
saveUpdate() {
this.dialogVisible = true;
},
updateData() {
let req = {
projectId: vm.projectId,
removeDoctorIdList: operationData.getAjustmentList(vm.changedDoctor2),
joinDoctorIdList: operationData.getAjustmentList(vm.changedDoctor),
};
openLoading(vm);
vm.reportPOST("report/portal/peopleAdjustment", req).then(res => {
closeLoading(vm);
vm.$message(res.message);
if (res.code == "000000") {
this.$emit("closeSearch");
}
});
this.dialogVisible = false;
}
}
};
</script>
<style lang='scss' rel='stylesheet/scss'>
.data-alignment {
background: #fff;
.alignment-header {
padding: 20px;
margin: 0 30px;
border-bottom: 1px solid #606266;
}
.text {
margin-top: 30px;
margin-left: 98px;
font-size: 13px;
color: #606266;
}
.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 {
margin-left: 36px;
width: 90%;
// padding: 0 40px;
.select {
margin-bottom: 30px;
}
}
.pagination {
margin-right: 10px;
}
}
</style>
<template>
<div class="export-download">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="component-content screenSet" id="screenSet">
<p>导出文件列表</p>
<el-table :data="tableData" style="width: 100%">
<el-table-column
prop="title"
label="名称"
align="center"
min-width="150"
show-overflow-tooltip
></el-table-column>
<el-table-column prop="createdTime" label="时间" align="center" min-width="120">
<template slot-scope="scope">{{ scope.row.createdTime }}</template>
</el-table-column>
<el-table-column prop="status" label="状态" align="center" min-width="150">
<template slot-scope="scope">{{ scope.row.status | exportStatus }}</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="center" min-width="70">
<template slot-scope="scope">
<el-button
type="primary"
:disabled="scope.row.buttonStatus"
size="small"
@click="update(scope.row)"
>{{ scope.row.buttonText }}</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 class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="param.pageNo"
:page-sizes="[20, 50 ,100]"
:page-size="param.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows"
></el-pagination>
</div>
</div>
</div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import * as commonUtil from "../../utils/utils";
import { openLoading, closeLoading } from "../../utils/utils";
import axios from "axios";
let vm = null;
export default {
components: {
BreadCrumb
},
data() {
return {
curmbFirst: "学情报告",
curmbSecond: "导出下载",
projectId: "",
tableData: [],
param: {
pageSize: 20,
pageNo: 1
},
totalRows: 0,
totalTime: 3,
queryData: {}
// buttonText: "刷新",
// buttonStatus: false,
};
},
created() {
vm = this;
this.projectId = vm.getUrlSearch(window.location.href, "projectId");
this.search();
},
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
setButton() {
for (let i = 0; i < vm.tableData.length; i++) {
vm.tableData[i].index = i;
if (vm.tableData[i].status == 1) {
vm.tableData[i].buttonText = "下载";
vm.tableData[i].buttonStatus = false;
} else if(vm.tableData[i].status == 0) {
vm.tableData[i].buttonText = "刷新";
vm.tableData[i].buttonStatus = false;
} else if(vm.tableData[i].status == 2) {
vm.tableData[i].buttonText = "刷新";
vm.tableData[i].buttonStatus = true;
}
}
},
search() {
// this.setButton();
let req = {
projectId: vm.projectId
};
if(req.projectId == null) {
req.projectId = '';
}
vm.reportGET("report/downLoad/getDownloadList", req).then(res => {
if (res.code == "000000") {
vm.tableData = res.data.data;
vm.totalRows = res.data.totalRows;
vm.setButton();
}
});
},
downLoad(row) {
// vm.queryData = this.$route.query;
// let req = vm.queryData;
// openLoading(vm);
// vm.reportGET("report/downLoad/downLoad", req).then(res => {
// closeLoading(vm);
// // console
// if (res.code == "000000") {
// }
// });
setTimeout(() => {
window.open(row.fileUrl);
}, 500);
},
getDownLoadStatus(row) {
let req = {
id: row.id
};
vm.reportGET("report/downLoad/getDownLoadStatus", req).then(res => {
if (res.code == "000000") {
vm.tableData[row.index].status = res.data.data;
// console.log('res.data.data',res.data.data);
if (res.data.data == 1) {
vm.tableData[row.index].title = vm.tableData[row.index].title + " ";
vm.tableData[row.index].buttonText = "下载";
vm.tableData[row.index].fileUrl = res.data.url;
} else if(res.data.data == 0) {
console.log("res", res, vm.tableData[row.index]);
vm.tableData[row.index].title = vm.tableData[row.index].title + " ";
vm.tableData[row.index].buttonText = "刷新";
} else if(res.data.data == 2) {
vm.tableData[row.index].title = vm.tableData[row.index].title + " ";
vm.tableData[row.index].buttonText = "刷新";
vm.tableData[row.index].buttonStatus = true;
}
} else {
vm.$message(res.message);
vm.tableData[row.index].title = vm.tableData[row.index].title + " ";
vm.tableData[row.index].buttonText = "刷新";
}
});
},
update(row) {
if (vm.tableData[row.index].status == 1) {
vm.downLoad(row);
} else {
this.$nextTick(function() {
console.log(vm.tableData[row.index]);
let nowTime = vm.totalTime;
vm.tableData[row.index].title = vm.tableData[row.index].title + " ";
vm.tableData[row.index].buttonText = nowTime + "s后可以刷新";
vm.tableData[row.index].buttonStatus = true;
let clock = window.setInterval(() => {
nowTime--;
vm.tableData[row.index].title = vm.tableData[row.index].title + " ";
vm.tableData[row.index].buttonText = nowTime + "s后可以刷新";
if (nowTime <= 0) {
window.clearInterval(clock);
vm.tableData[row.index].title =
vm.tableData[row.index].title + " ";
// vm.tableData[row.index].buttonText = "刷新";
vm.tableData[row.index].buttonStatus = false; //这里重新开启
vm.getDownLoadStatus(row);
}
}, 1000);
});
}
},
// 更改数据显示数量
handleSizeChange(val) {
vm.param.pageSize = val;
vm.search();
},
// 换页
handleCurrentChange(val) {
vm.param.pageNo = value;
vm.search();
}
}
};
</script>
<style lang="scss">
.export-download {
.component-content {
background: #fff;
padding: 10px;
}
}
</style>
\ No newline at end of file
<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 v-if="item.num !=0" class="weight">{{ item.num }} </span>
<span v-if="item.num !=0">{{ item.unit }} </span>
<span v-if="index == 2 && second !=0" class="weight" >{{ second }} </span>
<span v-if="index == 2 && second !=0"></span>
</div>
</el-card>
<div v-if="index+1 !== cardData.length" class="line"></div>
</div>
<el-table
:data="tableData"
class="course-table">
<el-table-column prop="courseName" label="课程名" align="center">
</el-table-column>
<el-table-column prop="courseTotalTime" label="课程时长" align="center">
<template slot-scope="scope">
{{ scope.row.courseTotalTime | getTotalTime }}
</template>
</el-table-column>
<el-table-column prop="courseAvgStudyTime" label="人均学习时长" align="center">
<template slot-scope="scope">
{{ scope.row.courseAvgStudyTime | getAvgTime }}
</template>
</el-table-column>
<el-table-column prop="courseLearnerCount" label="参与培训人数" align="center">
</el-table-column>
<el-table-column prop="courseFinishedCount" 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="text"
size="small"
>查看名单</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 class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNo"
:page-sizes="[20, 50 ,100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows"
></el-pagination>
</div>
</div>
</template>
<script>
import { create } from "domain";
import * as operationData from "../../utils/operation";
import { openLoading, closeLoading } from "../../utils/utils";
let vm = null;
export default {
props: {
formInline: {
type: Object
},
activeName: {
type: String
},
dialogData: {
type: Object
},
organizationList: {
type: Array
}
},
data() {
return {
cardData: [],
tableData: [],
totalRows: 0,
projectId: '',
pageNo: 1,
pageSize: 20,
second: 0,
}
},
created() {
vm = this;
this.projectId = vm.getUrlSearch(window.location.href, "id");
},
mounted: function() {
this.$on('search',()=>{
// console.log(this.formInline);
this.pageNo = 1;
this.search();
});
this.$on("init", () => {
this.$nextTick(function() {
if (vm.formInline.region.length != 0) {
this.search();
}
});
});
this.$on("reset",() =>{
this.pageNo = 1;
this.pageSize = 20;
this.tableData = [];
this.cardData = [];
});
},
methods: {
setCardData(data) {
vm.totalRows = data.projectCourseCount;
let avgTime = [];
avgTime = operationData.getAvgTime(data.projectAvgStudyTime);
vm.cardData = [
{
title: '项目所有课程数',
num: data.projectCourseCount,
unit: '门课程',
},{
title: '项目所有课程总时长',
num: data.projectCourseTotalTime,
unit: '分钟',
},{
title: '项目人均学习时长',
num: avgTime[0],
unit: '分钟',
}
];
vm.second = avgTime[1];
},
search() {
if (vm.formInline.region.length == 0) {
const h = this.$createElement;
vm.$message({
message: h('p', { style: 'color: #FF3399' }, '请先选择地区后再进行查询 ')
});
return;
}
let checkAll = operationData.hasAll(vm.formInline.organization)
let req = {
projectId: vm.projectId,
ids: operationData.getIds(vm.formInline,vm.organizationList,checkAll),
type: operationData.getSearchType(vm.formInline,checkAll),
originalFlag: vm.formInline.checked == false ? 0 : 1
};
console.log("3 req", req);
openLoading(vm);
vm.reportGET("report/portalProjectCourse/getTotal", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
if(res.data.projectCourseCount == 0 ) {
vm.$message("没有相关数据,请重新选择查询范围");
}
vm.setCardData(res.data)
} else {
vm.$message(res.message);
}
});
let reqList = req;
reqList.pageNo = vm.pageNo;
reqList.pageSize = vm.pageSize;
vm.reportGET("report/portalProjectCourse/getCourseList", reqList).then(res => {
closeLoading(vm);
if (res.code == "000000") {
vm.tableData = res.data.list;
}
});
},
checkName(data) {
console.log('dialogData',this.dialogData);
let checkAll = operationData.hasAll(vm.formInline.organization)
let routerData = {};
routerData = this.dialogData;
routerData.projectId = vm.projectId;
routerData.projectName = vm.getUrlSearch(window.location.href, "projectName");
routerData.tableType = 1;
routerData.courseId = data.courseId;
routerData.ids = operationData.getIds(vm.formInline,vm.organizationList,checkAll);
routerData.type = operationData.getSearchType(vm.formInline,checkAll);
routerData.originalFlag = vm.formInline.checked == false ? 0 : 1;
// this.$router.push({ path: '/name-list-old', query: routerData});
let routeData = this.$router.resolve({ path: '/name-list-old', query: routerData});
window.open(routeData.href, '_blank');
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
vm.pageSize = val;
vm.search();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
vm.pageNo = val;
vm.search();
},
},
}
</script>
<style lang="scss">
.course-analysis-wrap {
background: #fff;
overflow: hidden;
padding: 10px;
.weight {
font-weight: bold;
}
.title:after {
clear: both
}
.el-card {
border-width: 0px;
}
.el-card.is-always-shadow {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
}
.line {
background: #e4e4e4;
height: 80px;
width: 1px;
float: left;
margin-top: 20px;
}
.box-card {
width: 32%;
margin-right: 1%;
float: left;
.el-card__header {
border-bottom-width: 0;
}
.title {
text-align: center;
}
.box-content {
text-align: center;
height: 40px;
}
}
.course-table {
top: 20px;
margin-bottom: 20px;
}
}
</style>
\ No newline at end of file
<template>
<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 v-show="!showData" class="empty">
<p>"没有相关数据,请重新选择查询范围"</p>
</div>
<div class="chart" v-show="showData">
<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 { 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: {
BreadCrumb
},
props: {
formInline: {
type: Object
},
activeName: {
type: String
},
organizationList: {
type: Array
}
},
data() {
return {
radio: 1,
sexData: [],
projectId: "",
crowdData: {},
showData: false,
echartsData: {
chart1: {},
chart2: {},
chart3: {},
},
};
},
created() {
vm = this;
this.projectId = vm.getUrlSearch(window.location.href, "id");
},
mounted: function() {
// commonUtil.resizeHeight();
//父组件传值
this.$on("search", () => {
vm.radio = 1;
this.search();
});
this.$on("init", () => {
this.$nextTick(function() {
if (vm.formInline.region.length != 0) {
this.search();
}
});
});
this.$on("reset", () => {
this.showData = false;
this.crowdData = {};
});
if (this.activeName == "second") {
}
},
methods: {
search() {
if (vm.formInline.region.length == 0) {
const h = this.$createElement;
vm.$message({
message: h('p', { style: 'color: #FF3399' }, '请先选择地区后再进行查询 ')
});
return;
}
let checkAll = operationData.hasAll(vm.formInline.organization);
let req = {
projectId: vm.projectId,
cityOrHospitalId: operationData.getIds(vm.formInline,vm.organizationList,checkAll),
kind: operationData.getSearchType(vm.formInline,checkAll),
type: vm.radio,
originalFlag: vm.formInline.checked == false ? 0 : 1
};
console.log("2 req", req);
openLoading(vm);
vm.reportGET("report/portal/getPeoplesDetails", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
if(res.data.educationList.length == 0 && res.data.jobTitle.length == 0 ) {
vm.$message("没有相关数据,请重新选择查询范围");
this.showData = false;
} else {
this.showData = true;
}
this.crowdData = res.data;
setTimeout(function() {
vm.educationDivision();
vm.jobDivision();
vm.getSexData();
vm.ageDivision();
},20);
// this.educationDivision();
// this.jobDivision();
// this.getSexData();
// this.ageDivision();
} else {
vm.$message(res.message);
}
});
},
updateResize() {
this.$nextTick(function() {
window.onresize = function() {
vm.echartsData.chart1.resize();
vm.echartsData.chart2.resize();
vm.echartsData.chart3.resize();
};
});
},
updateRadio(value) {
console.log(value,vm.radio);
this.search();
},
//用户性别分布
getSexData() {
let sexList = this.crowdData.sexList;
// if(sexList.length <3) {
// this.sexData = [];
// return;
// }
this.sexData = [
{
src: require("../../assets/image/man.png"),
type: "男性",
num: 0
},
{
src: require("../../assets/image/weman.png"),
type: "女性",
num: 0
},
{
src: require("../../assets/image/question.png"),
type: "未完善信息",
num: 0
}
];
for(let i=0;i<sexList.length;i++) {
if(sexList[i].name == "男") {
this.sexData[0].num = sexList[i].value;
} else if(sexList[i].name == "女") {
this.sexData[1].num = sexList[i].value;
} else {
this.sexData[2].num = sexList[i].value;
}
}
},
educationDivision(data) {
let myChart = echarts.init(this.$refs.education);
let educationList = operationData.removeZero(this.crowdData.educationList);
let legendData = [];
let seriesData = [];
let colorData = ["#FF9F7F", "#008000", "#E062AE", "#37A2DA", "#0050DC", "#67E0E3", "#8A2BE2"];
// for (let i = 0; i < educationList.length; i++) {
// legendData[i] = educationList[i].name;
// }
if(educationList.length > 0) {
legendData = ['博士后','博士','硕士','本科','大专','中专及以下','其他'];
}
seriesData = educationList;
let option = operationData.getPicOption(
"用户学历分布",
legendData,
colorData,
seriesData
);
myChart.setOption(option);
vm.echartsData.chart1 = myChart;
vm.updateResize();
},
jobDivision(data) {
let myChart2 = echarts.init(this.$refs.job);
let jobTitle = operationData.removeZero(this.crowdData.jobTitle);
let legendData = [];
let seriesData = [];
let colorData = ["#FF9F7F", "#008000", "#E062AE", "#37A2DA", "#0050DC", "#67E0E3", "#8A2BE2"];
for (let i = 0; i < jobTitle.length; i++) {
legendData[i] = jobTitle[i].name;
}
seriesData = jobTitle;
let option = operationData.getPicOption(
"用户职务分布",
legendData,
colorData,
seriesData
);
myChart2.setOption(option);
vm.echartsData.chart2 = myChart2;
vm.updateResize();
},
ageDivision(data) {
let myChart3 = echarts.init(this.$refs.age);
let xAxisData = [];
let seriesData = [];
let ageList = this.crowdData.ageList;
for (let i = 0; i < ageList.length; i++) {
// xAxisData[i] = ageList[i].name;
if(ageList[i].value != 0) {
xAxisData.push(ageList[i].name);
}
}
for (let i = 0; i < ageList.length; i++) {
// seriesData[i] = ageList[i].value;
if(ageList[i].value != 0) {
seriesData.push(ageList[i].value);
}
}
let option = operationData.getBarOption(xAxisData, seriesData);
myChart3.setOption(option);
vm.echartsData.chart3 = myChart3;
vm.updateResize();
}
}
};
</script>
<style lang="scss">
.crowd-analysis-wrap {
background: #fff;
overflow: hidden;
padding: 10px;
.header-title {
padding: 10px 12px;
font-size: 12px;
color: #449284;
border-bottom: 1px solid #efefef;
}
.crowd-radio {
position: relative;
left: 50%;
margin-top: 25px;
margin-left: -119px;
.is-active {
.el-radio-button__inner {
// background: #fff;
// color: #409EFF;
}
}
}
.empty {
height: 300px;
line-height: 300px;
color: #FF3399;
text-align: center;
}
.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: 15px auto 10px auto;
font-size: 18px;
text-align: center;
font-weight: bold;
}
.sex {
position: relative;
top: 42px;
left: 0;
.sex-item {
float: left;
height: 350px;
width: 33.3%;
.sex-img {
margin: 0 auto;
position: relative;
left: 10%;
// width: 80%;
width: 60%;
margin-left: 10%;
}
.sex-type {
text-align: center;
}
.sex-num {
margin-top: 40px;
font-size: 30px;
font-weight: bold;
text-align: center;
}
}
}
}
.item-right {
float: right;
}
}
}
</style>
\ No newline at end of file
<template>
<div class="examination-analysis">
<div v-for="(item , index) in cardData" :key="index" class="box">
<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 v-if="index+1 !== cardData.length" class="line"></div>
</div>
<div class="table">
<el-table :data="tableData" style="width: 100%" border>
<el-table-column prop="examName" label="考试名" min-width="150" align="center"></el-table-column>
<el-table-column prop="examUserCount" label="参与考试人数" min-width="100" align="center"></el-table-column>
<el-table-column prop="userCountForPassExam" label="通过考试人数" min-width="80" align="center"></el-table-column>
<el-table-column v-if="showTd[0]" prop="userCountList[0]" :label="labelTd[0]" min-width="80" align="center"></el-table-column>
<el-table-column v-if="showTd[1]" prop="userCountList[1]" :label="labelTd[1]" min-width="80" align="center"></el-table-column>
<el-table-column v-if="showTd[2]" prop="userCountList[2]" :label="labelTd[2]" min-width="80" align="center"></el-table-column>
<el-table-column v-if="showTd[3]" prop="userCountList[3]" :label="labelTd[3]" min-width="80" align="center"></el-table-column>
<el-table-column label="操作" fixed="right" align="center" min-width="100">
<template slot-scope="scope">
<el-button type="text" size="small" @click="goPage(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="pageNo"
:page-sizes="[20, 50 ,100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows"
></el-pagination>
</div>
</div>
</template>
<script>
import { log } from 'util';
import * as operationData from "../../utils/operation";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
let vm
export default {
props: {
formInline: {
type: Object
},
activeName: {
type: String
},
dialogData: {
type: Object
},
organizationList: {
type: Array
}
},
data() {
return {
projectId: '',
tableData: [],
cardData: [],
totalRows: 0, //数据总数
pageNo: 1, //当前是第几页
pageSize: 20, //页面总数
labelTd: [],
showTd: [false,false,false,false],
};
},
created() {
vm = this;
this.projectId = vm.getUrlSearch(window.location.href, "id");
},
// 挂载到Dom完成时
mounted: function() {
this.$on('search',()=>{
// console.log(this.formInline);
this.pageNo = 1;
this.search();
});
this.$on("init", () => {
this.$nextTick(function() {
if (vm.formInline.region.length != 0) {
this.search();
}
});
});
this.$on("reset",() =>{
this.pageNo = 1;
this.pageSize = 20;
this.tableData = [];
this.cardData = [];
});
},
methods: {
setCardData(data) {
vm.totalRows = data.projectExamCount;
vm.cardData = [
{
title: "项目所有考试数",
num: data.projectExamCount,
unit: "门考试"
},
{
title: "项目所有考题数",
num: data.projectExamQuestionCount,
unit: "道题"
}
];
// vm.cardData[0].num = data.projectExamCount;
// vm.cardData[1].num = data.projectExamQuestionCount;
},
// 搜索列表
search() {
if (vm.formInline.region.length == 0) {
const h = this.$createElement;
vm.$message({
message: h('p', { style: 'color: #FF3399' }, '请先选择地区后再进行查询 ')
});
return;
}
let checkAll = operationData.hasAll(vm.formInline.organization)
let req = {
projectId: vm.projectId,
ids: operationData.getIds(vm.formInline,vm.organizationList,checkAll),
type: operationData.getSearchType(vm.formInline,checkAll),
originalFlag: vm.formInline.checked == false ? 0 : 1
};
console.log("4 req", req);
openLoading(vm);
vm.reportGET("report/portalProjectExam/getTotal", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
if(res.data.projectExamCount == 0 ) {
vm.$message("没有相关数据,请重新选择查询范围");
}
vm.setCardData(res.data);
vm.labelTd = res.data.gradeNameList;
} else {
vm.$message(res.message);
}
});
let reqList = req;
reqList.pageNo = vm.pageNo;
reqList.pageSize = vm.pageSize;
vm.reportGET("report/portalProjectExam/getExamList", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
vm.tableData = res.data.list;
if(res.data.list.length == 0) {
return;
}
if(res.data.list[0].userCountList == null || res.data.list[0].userCountList.length == 0) {
vm.showTd = [false,false,false,false];
} else if (res.data.list[0].userCountList.length == 1){
vm.showTd = [true,false,false,false];
} else if (res.data.list[0].userCountList.length == 2){
vm.showTd = [true,true,false,false];
} else if (res.data.list[0].userCountList.length == 3){
vm.showTd = [true,true,true,false];
} else if (res.data.list[0].userCountList.length == 4){
vm.showTd = [true,true,true,true];
}
}
});
//
},
// 跳转查看名单页面
goPage(data) {
let checkAll = operationData.hasAll(vm.formInline.organization)
let routerData = {};
routerData = this.dialogData;
routerData.projectId = vm.projectId;
routerData.projectName = vm.getUrlSearch(window.location.href, "projectName");
routerData.tableType = 2;
routerData.examId = data.examId;
routerData.ids = operationData.getIds(vm.formInline,vm.organizationList,checkAll);
routerData.type = operationData.getSearchType(vm.formInline,checkAll),
routerData.originalFlag = vm.formInline.checked == false ? 0 : 1
// this.$router.push({ path: '/name-list-old', query: routerData});
let routeData = this.$router.resolve({ path: '/name-list-old', query: routerData});
window.open(routeData.href, '_blank');
},
// 更改数据显示数量
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
vm.pageSize = val
vm.search()
},
// 换页
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
vm.pageNo = val
vm.search()
}
}
};
</script>
<style lang='scss' rel='stylesheet/scss'>
.examination-analysis {
background: #fff;
overflow: hidden;
padding: 10px;
.weight {
font-weight: bold;
}
.el-card {
border-width: 0px;
}
.el-card.is-always-shadow {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
}
.line {
background: #e4e4e4;
height: 80px;
width: 1px;
float: left;
margin-top: 20px;
}
.box {
}
.table {
margin-top: 30px;
}
.box-card {
width: 48%;
margin-right: 1%;
float: left;
.el-card__header {
border-bottom-width: 0;
}
.title {
text-align: center;
}
.box-content {
text-align: center;
height: 40px;
font-size: 15px;
}
}
}
</style>
<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>
<template>
<div class="item-list-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird" :jumPathThird="jumPathThird"></bread-crumb>
<div class="component-content screenSet" id="screenSet">
<el-form class="item-form" ref="formInline" :model="formInline" label-width="80px">
<el-form-item label="选择地区:">
<!-- :props="props" -->
<el-cascader
size="small"
ref="cascaderRegion"
:options="optionsRegion"
:props="props"
v-model="formInline.region"
@change="handleChange"
filterable
change-on-select
placeholder="请先选择地区后再进行查询"
style="width:330px"
></el-cascader>
</el-form-item>
<el-form-item label="选择机构:">
<el-select
size="small"
v-model="formInline.organization"
:placeholder="organizationNotice"
@change="changeOrganization"
multiple
collapse-tags
:disabled="formInline.region.length < 3"
style="width:330px"
>
<el-option
v-for="item in organizationList"
:key="item.index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<div class="tag-group">
<el-tag
v-for="tag in tags"
:key="tag.value"
type="info"
closable
@close="handleTagClose(tag)"
>{{ tag.label }}</el-tag>
</div>
<el-form-item label v-if="showOriginal == 1">
<el-checkbox size="small" v-model="formInline.checked">查看原始数据</el-checkbox>
</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="button-group">
<el-button v-if="roleType == 'L1' || roleType == 'L2'" type="default" size="small" @click="changeDate">数据修改</el-button>
<!-- <el-button type="default" size="small" @click="update" v-else>修改范围</el-button> -->
<el-button type="default" size="small" :disabled="exportStatus" @click="exportExcel">导出明细</el-button>
</div>
<!-- <div class="item-tab"></div> -->
<el-tabs v-model="activeName" @tab-click="handleClick" :before-leave="beforeLeave">
<el-tab-pane label="参与情况" name="first">
<part-in
ref="childPart"
:formInline="formInline"
:activeName="activeName"
:organizationNum="organizationNum"
:organizationList="organizationList"
></part-in>
</el-tab-pane>
<el-tab-pane label="人群分析" name="second">
<crowd-analysis
ref="childCrowd"
:formInline="formInline"
:activeName="activeName"
:organizationList="organizationList"
></crowd-analysis>
</el-tab-pane>
<el-tab-pane label="课程分析" name="third">
<course-analysis
ref="childCourse"
:formInline="formInline"
:activeName="activeName"
:dialogData="dialogData"
:organizationList="organizationList"
></course-analysis>
</el-tab-pane>
<el-tab-pane label="考试分析" name="fourth" v-if="displayExam == 1">
<examination-analysisfrom
ref="childExam"
:formInline="formInline"
:activeName="activeName"
:dialogData="dialogData"
:organizationList="organizationList"
></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="80%" center>
<!-- <el-button @click="dialogUpdate = false">取 消</el-button> -->
<data-alignment
ref="childAlignment"
@closeDialog="dialogUpdate = false"
@closeSearch="closeSearch"
:formInline="formInline"
:dialogData="dialogData"
:organizationList="organizationList"
></data-alignment>
</el-dialog>
</div>
</div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import CourseAnalysis from "./item-course-analysis.vue";
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";
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,
DataAlignment
},
data() {
return {
curmbFirst: "学情报告",
curmbSecond: "项目列表",
curmbThird: "",
jumPathThird: "/report-list",
projectId: "",
projectName: "",
exportStatus: false,
organizationList: [],
optionsRegion: [],
props: {
lazy: true,
lazyLoad(node, resolve) {
const { level } = node;
console.log("node", node);
if (node.level == 1) {
let req = {
provinceId: node.data.value
};
vm.GET("basic-data/position/cities", req).then(res => {
let newData = vm.setMoreOption(res.data.cityList, "cities");
console.log("newData", newData);
resolve(newData);
});
} else if (node.level == 2) {
let req = {
cityId: node.data.value
};
vm.GET("basic-data/position/counties", req).then(res => {
let newData = vm.setMoreOption(res.data.countyList, "counties");
console.log("newData", newData);
resolve(newData);
});
} else if (node.level == 3) {
let req = {
countyId: node.data.value
};
vm.GET("basic-data/position/towns", req).then(res => {
let newData = vm.setMoreOption(res.data.townList, "towns");
console.log("newData", newData);
resolve(newData);
});
}
}
},
showOriginal: 2,
roleType: '',
formInline: {
region: [0],
date: "",
organization: [],
checked: false,
pageNo: 1,
pageSize: 20
},
organizationNotice: '选择地区筛选到区才能选择机构',
dialogData: {
region: "",
// regionData: "",
organization: ""
// organizationData: "",
},
tags: [],
activeName: "first",
organizationNum: 0,
dialogVisible: false,
dialogUpdate: false,
displayExam: 2,
flag: 1,
};
},
computed: {
...mapGetters(["_token"])
},
watch: {
tags: function(val) {
this.setDialogData();
}
},
created() {
vm = this;
this.projectId = vm.getUrlSearch(window.location.href, "id");
this.projectName = vm.getUrlSearch(window.location.href, "projectName");
this.curmbThird = vm.getUrlSearch(window.location.href, "projectName");
this.getDisplay();
this.search();
// this.getRegionOption();
},
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
getDisplay(type) {
let req = {
projectId: vm.projectId,
projectName: vm.projectName,
};
openLoading(vm);
vm.reportGET("report/portal/display", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
console.log('vm.showOriginal',res.data)
vm.showOriginal = res.data.status;
vm.roleType = res.data.roleType;
vm.displayExam = res.data.existExam;
vm.flag = res.data.flag;
}
if(type !=2) {
vm.getRegionOption();
}
});
},
beforeLeave(activeName, oldActiveName) {
console.log('action',activeName,'oldActive',oldActiveName)
},
handleClick(tab, event) {
//console.log(tab, event);
// if(tab.name == this.activeName) {
// return;
// }
console.log("activeName", this.activeName, tab.name);
if (tab.name == "first") {
this.$refs.childPart.$emit("init");
} else if (tab.name == "second") {
this.$refs.childCrowd.$emit("init");
} else if (tab.name == "third") {
this.$refs.childCourse.$emit("init");
} else if (tab.name == "fourth") {
this.$refs.childExam.$emit("init");
}
},
handleChange(value) {
this.formInline.organization = [];
this.tags = [];
setTimeout(function() {
// console.log(vm.$refs["cascaderRegion"].inputValue);
vm.dialogData.region = vm.$refs["cascaderRegion"].inputValue;
// vm.dialogData.regionData = value[value.length-1];
// console.log('vm.dialogData.region',vm.dialogData.region)
}, 20);
// console.log('region',value,vm.formInline);
if (value.length >= 3) {
this.getOrganizationList();
this.organizationNotice = "请选择机构";
} else {
this.organizationNotice = "选择地区筛选到区才能选择机构";
}
},
setMoreOption(data, type) {
let option = [];
for (let i = 0; i < data.length; i++) {
let obj = data[i];
if (type == "cities") {
obj.label = data[i].cityName;
obj.value = data[i].cityId;
} else if (type == "counties") {
obj.label = data[i].countyName;
obj.value = data[i].countyId;
// obj.leaf = true;
} else if (type == "towns") {
obj.label = data[i].townName;
obj.value = data[i].townId;
obj.leaf = true;
}
option.push(obj);
}
return option;
},
changeOrganization(value) {
// 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 )
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;
}
}
},
getMoreRegion() {
let http = new Promise((resolve, reject) => {
let req = {
provinceId: 350
};
vm.GET("basic-data/position/cities", req).then(res => {
resolve(res);
});
});
console.log("http值", http);
return http;
},
//获取地区
getRegionOption() {
if(vm.flag == 2 && vm.roleType == "L2") {
this.optionsRegion = [{id: 11, provinceId: 330, provinceName: "浙江省",value: 330, label: "浙江省"}]
} else {
let req = {};
openLoading(vm);
vm.GET("basic-data/position/provinces", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
this.optionsRegion = operationData.setRegionOption(
res.data.provinceList
);
// console.log("this.optionsRegion", this.optionsRegion);
}
});
}
},
getOrganizationList() {
this.organizationList = [];
let countyId = vm.formInline.region[vm.formInline.region.length - 1];
let type = 3;
if(vm.formInline.region.length == 4) {
type = 5;
}
let req = {
projectId: vm.projectId,
type: type,
id: countyId
};
openLoading(vm);
vm.reportGET("report/portal/getOrganizationList", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
this.organizationList = operationData.getLearnOrganization(
res.data.hospitalList
);
}
});
},
getOrganizationNum() {
//选择全部
let num = 0;
if (this.tags.length == 0) {
return;
}
if (this.tags[0].value == 0) {
num = this.organizationList.length - 1;
return num;
}
//没有选择全部
num = this.tags.length;
return num;
},
closeSearch() {
vm.dialogUpdate = false;
vm.getDisplay(2);
vm.search();
},
search() {
// 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") {
this.$refs.childExam.$emit("search");
}
},
//重置
resetForm() {
vm.formInline = Object.assign(
{},
{
region: [],
date: "",
organization: [],
checked: false,
pageNo: 1,
pageSize: 20,
}
);
vm.tags = [];
if (this.activeName == "first") {
this.$refs.childPart.$emit("reset");
} else if (this.activeName == "second") {
this.$refs.childCrowd.$emit("reset");
} else if (this.activeName == "third") {
this.$refs.childCourse.$emit("reset");
} else if (this.activeName == "fourth") {
this.$refs.childExam.$emit("reset");
}
},
exportExcel() {
if (vm.formInline.region.length == 0) {
const h = this.$createElement;
vm.$message({
message: h('p', { style: 'color: #FF3399' }, '请先选择地区后再进行导出 ')
});
return;
}
//按钮置灰三秒
vm.exportStatus = true;
setTimeout(function() {
vm.exportStatus = false;
},3000);
this.dialogVisible = true;
//download接口
let checkAll = operationData.hasAll(vm.formInline.organization)
let req = {
projectId : vm.projectId,
ids: operationData.getIds(vm.formInline,vm.organizationList,checkAll),
type: operationData.getSearchType(vm.formInline,checkAll),
originalFlag: vm.formInline.checked == false ? 0 : 1,
projectName: vm.$route.query.projectName,
cityName: vm.getCityName(),
};
openLoading(vm);
vm.reportGET("report/downLoad/downLoad", req).then(res => {
closeLoading(vm);
// console
if (res.code == "000000") {
}
});
},
getCityName() {
let city = '';
let region = vm.dialogData.region;
console.log('region',region,typeof region,region == '');
if(region != '') {
city = region.split(' / ').join('');
console.log('city',city);
}
return city;
},
toDownload() {
let checkAll = operationData.hasAll(vm.formInline.organization)
let routerData = {
// projectId : vm.projectId,
projectId : '',
};
vm.$router.push({ path: "export-download-old", query: routerData });
},
update() {},
release() {},
setDialogData() {
//传递给dialog数据
this.dialogData.organization = "";
for (let x = 0; x < this.tags.length; x++) {
this.dialogData.organization += this.tags[x].label + "、";
}
let len = this.dialogData.organization.length;
this.dialogData.organization = this.dialogData.organization.substring(
0,
len - 1
);
},
changeDate() {
if (vm.formInline.region.length == 0) {
const h = this.$createElement;
vm.$message({
message: h('p', { style: 'color: #FF3399' }, '请先选择地区后再进行修改 ')
});
return;
}
this.setDialogData();
this.dialogUpdate = true;
this.$nextTick(function() {
this.$refs.childAlignment.$emit("search");
});
}
}
};
</script>
<style lang="scss">
.item-list-wrap {
.component-content {
// background: #fff;
padding: 10px;
.header-title {
padding: 10px 12px;
font-size: 12px;
color: #449284;
border-bottom: 1px solid #efefef;
}
.item-form {
padding: 10px;
background: #fff;
width:100%;
border-radius: 4px;
}
.form-button {
width: 45%;
top: -120px;
position: relative;
left: 50%;
}
.button-group {
position: relative;
// right: 100px;
float: right;
margin-right: 20px;
}
.choose {
font-size: 12px;
margin-bottom: 20px;
}
.item-tab {
width: 95%;
height: 46px;
background: #F0F2F5;
position: absolute;
}
.el-tabs__item.is-active {
color: #409eff;
}
.el-tabs__header {
width: 65%;
}
.el-tabs__nav-wrap::after {
height: 0px;
}
.tag-group {
margin-left: 78px;
.el-tag {
margin-right: 20px;
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="part-in-wrap">
<div v-show="!showData" class="empty">
<p>"没有相关数据,请重新选择查询范围"</p>
</div>
<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>
</div>
</el-card>
<div class="line"></div>
</div>
<div v-if="showChart" class="charts" id="rankChart" ref="rankChart"></div>
<!-- <div class="charts" id="age" ref="age"></div> -->
<el-table
v-if="showTable"
v-show="organizationNum < 2"
:data="finishDetail"
class="project-table"
style="width: 100%;margin-bottom: 30px;"
border
>
<el-table-column prop="name" label="姓名" align="center"></el-table-column>
<el-table-column prop="departmentName" label="科室" align="center"></el-table-column>
<el-table-column prop="joinStatus" label="是否参与项目" align="center">
<template slot-scope="scope">{{ scope.row.joinStatus | partJoin }}</template>
</el-table-column>
<el-table-column prop="projectStatus" label="是否完成项目" align="center">
<template slot-scope="scope">{{ scope.row.projectStatus | partFinish }}</template>
</el-table-column>
<el-table-column prop="finishTime" label="完成项目日期" align="center">
<template slot-scope="scope">{{ scope.row.finishTime }}</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>
</template>
<script>
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 {
props: {
formInline: {
type: Object
},
activeName: {
type: String
},
organizationNum: {
type: Number
},
organizationList: {
type: Array
}
},
data() {
return {
// 只有一个机构时显示人员完成情况
projectId: "",
finishDetail: [],
cardData: [],
showChart: false,
showTable: false,
showData: false,
};
},
created() {
vm = this;
this.projectId = vm.getUrlSearch(window.location.href, "id");
},
mounted: function() {
// commonUtil.resizeHeight();
this.$on("search", () => {
this.search();
});
this.$on("init", () => {
this.$nextTick(function() {
if (vm.formInline.region.length != 0) {
this.search();
}
});
});
this.$on("reset", () => {
this.showData = false;
this.showChart = false;
this.showTable = false;
this.finishDetail = [];
this.cardData = [];
});
// if (this.activeName == "first") {
// this.updateResize();
// }
},
methods: {
search() {
if (vm.formInline.region.length == 0) {
const h = this.$createElement;
vm.$message({
message: h('p', { style: 'color: #FF3399' }, '请先选择地区后再进行查询 ')
});
return;
}
let checkAll = operationData.hasAll(vm.formInline.organization)
console.log(vm.formInline,checkAll,vm.organizationList);
let req = {
projectId: vm.projectId,
ids: operationData.getIds(vm.formInline,vm.organizationList,checkAll),
type: operationData.getSearchType(vm.formInline,checkAll),
originalFlag: vm.formInline.checked == false ? 0 : 1
};
console.log("1 req", req);
openLoading(vm);
vm.reportGET("report/portal/getParticipateInfo", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
this.getCardData(res.data);
vm.showData = true;
if(res.data.participateHospitalCount == 0 && res.data.participatePeopleCount == 0) {
vm.$message("没有相关数据,请重新选择查询范围");
}
} else {
vm.$message(res.message);
}
});
vm.reportGET("report/portal/top", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
this.getRank(res.data);
this.getTableData(res.data);
}
});
},
updateResize() {
this.$nextTick(function() {
let chartRank = echarts.init(document.getElementById("rankChart"));
window.onresize = function() {
chartRank.resize();
};
});
},
getTableData(data) {
if (vm.formInline.region.length >= 3 && vm.organizationNum == 1) {
vm.showTable = true;
vm.finishDetail = data.hospitalPeopleList;
} else {
vm.showTable = false;
}
},
getRank(data) {
let xAxisData = [];
let seriesData = [];
for (let i = 0; i < data.top.length; i++) {
xAxisData[i] = data.top[i].name;
seriesData[i] = data.top[i].percentage;
}
if(vm.organizationNum == 1 || xAxisData.length <= 1) {
vm.showChart = false;
}
if (xAxisData.length > 1 && vm.organizationNum !=1) {
vm.showChart = true;
setTimeout(function() {
let myChart = echarts.init(vm.$refs.rankChart);
let optionValue = operationData.getRank(xAxisData, seriesData);
myChart.setOption(optionValue);
vm.updateResize();
}, 200);
}
},
getCardData(data) {
vm.cardData = [
{
title: "应参与机构数",
num: data.participateHospitalCount,
},
{
title: "已参与机构数",
num: data.hasParticipateHospitalCount,
},
{
title: "应参与人数",
num: data.participatePeopleCount,
},
{
title: "已参与人数",
num: data.hasParticipatePeopleCount,
},
{
title: data.type == 1 ? "项目完成人数" : "项目获证人数",
num: data.acquireCertificatePeopleCount,
},
];
if(data.manyCertificate != null) {
for(let i=0;i<data.manyCertificate.length;i++) {
let obj = {
title: data.manyCertificate[i].name,
num: data.manyCertificate[i].value,
}
if(obj.title != null) {
vm.cardData.push(obj);
}
}
}
// vm.cardData[0].num = data.participateHospitalCount;
// vm.cardData[1].num = data.participatePeopleCount;
// vm.cardData[2].num = data.hasParticipatePeopleCount;
// vm.cardData[3].num = data.acquireCertificatePeopleCount;
},
}
};
</script>
<style lang='scss'>
.part-in-wrap {
background: #fff;
overflow: hidden;
// padding: 10px;
.empty {
height: 300px;
line-height: 300px;
color: #FF3399;
text-align: center;
}
.el-card {
border-width: 0px;
}
.el-card.is-always-shadow {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
}
.line {
background: #e4e4e4;
height: 80px;
width: 1px;
float: left;
margin-top: 20px;
}
.box-card {
width: 13%;
margin-right: 1%;
font-size: 14px;
float: left;
.el-card__header {
border-bottom-width: 0;
}
.title {
text-align: center;
}
.box-content {
text-align: center;
height: 40px;
font-size: 15px;
}
}
.charts {
top: 20px;
margin-left: 10%;
width: 80%;
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;
padding: 20px;
}
.project-table {
top: 15px;
background: #fff;
}
}
</style>
<template>
<div class="name-list-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird" :curmbFouth="curmbFouth" :jumPathThird="jumPathThird" :jumPathFouth="jumPathFouth"></bread-crumb>
<div class="component-content screenSet" id="screenSet">
<p class="course-p">地区:{{ queryData.region }}</p>
<p class="course-p">选择机构:{{ queryData.organization }}</p>
<el-form
class="form-update"
ref="serchForm"
:model="formData"
label-width="100px"
style="width:40%;"
>
<el-form-item v-if="tableType == 1" label="课程完成状态:">
<el-select
v-model="formData.learnFlag"
size="small"
style="width: 100%;"
placeholder="请选择状态"
>
<el-option
v-for="(item,index) in statusList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="tableType == 2" label="考试成绩等级:">
<el-select v-model="formData.gradeFlag" size="small" style="width: 100%;" placeholder="请选择状态">
<el-option
v-for="(item,index) in rankList"
:key="index"
:label="item.gradeName"
:value="item.gradeFlag"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="查询姓名: ">
<el-input size="small" placeholder="查询姓名" v-model="formData.doctorName"></el-input>
</el-form-item>
</el-form>
<div class="form-button">
<el-button @click="searchData()" type="primary">查询</el-button>
<el-button @click="resetForm()">重置</el-button>
</div>
<el-table :data="tableData" class="course-table">
<el-table-column prop="doctorName" 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="titleName" label="职称" align="center"></el-table-column>
<el-table-column prop="hospitalName" label="机构" align="center"></el-table-column>
<el-table-column prop="addressName" label="地区" align="center"></el-table-column>
<el-table-column v-if="tableType == 1" prop="learnStatus" label="参与课程状态" align="center">
<template slot-scope="scope">
<span>{{ scope.row.learnStatus }}</span>
</template>
</el-table-column>
<el-table-column
v-if="tableType == 1"
prop="finishedTime"
label="完成培训日期"
align="center"
min-width="150"
>
<template slot-scope="scope">
<span>{{ scope.row.finishedTime }}</span>
</template>
</el-table-column>
<el-table-column
v-if="tableType == 2"
prop="passTime"
label="通过考试日期"
min-width="150"
align="center"
>
<template slot-scope="scope">
<span>{{ scope.row.passTime }}</span>
</template>
</el-table-column>
<el-table-column
v-if="tableType == 2"
prop="gradeName"
label="考试成绩等级"
min-width="80"
align="center"
>
<template slot-scope="scope">
<span>{{ scope.row.gradeName }}</span>
</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 class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="formData.pageNo"
:page-sizes="[20, 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";
import * as operationData from "../../utils/operation";
let vm = null;
export default {
components: {
BreadCrumb
},
props: {
formInline: {
type: Object
}
},
data() {
return {
curmbFirst: "学情报告",
curmbSecond: "项目管理",
curmbThird: "",
curmbFouth: "",
jumPathThird: "/report-list",
jumPathFouth: "",
formData: {
doctorName: "",
learnFlag: -1,
gradeFlag: -1,
pageNo: 1,
pageSize: 20,
},
region: "",
organization: "",
tableData: [],
tableType: 1,
totalRows: 0,
statusList: [
{
value: -1,
label: "全部"
},
{
value: 0,
label: "未参与"
},
{
value: 1,
label: "参与中"
},
{
value: 2,
label: "已完成"
}
],
rankList: [],
queryData: {}
};
},
// computed: {
// ...mapGetters([
// "_token",
// ])
// },
created() {
vm = this;
vm.getInitData();
vm.search();
},
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
getHostital() {
let req = {
projectId: vm.queryData.projectId,
hospitalIds: vm.queryData.ids,
};
vm.reportGET("report/portal/getHostitalName", req).then(res => {
if (res.code == "000000") {
}
});
},
getInitData() {
vm.queryData = this.$route.query;
vm.tableType = vm.queryData.tableType;
vm.curmbThird = vm.getUrlSearch(window.location.href, "projectName");
vm.jumPathFouth = '/item-list?id=' + vm.queryData.projectId + '&projectName=' + vm.queryData.projectName;
console.log("queryData", vm.queryData);
if(vm.queryData.type == 4) {
vm.getHostital();
}
},
searchData() {
vm.formData.pageNo = 1;
vm.search();
},
search() {
let query = this.queryData;
if (this.tableType == 1) {
vm.curmbFouth = "课程培训情况";
//课程分析
// console.log('this.tableType',this.tableType)
let req = {
projectId: query.projectId,
originalFlag: query.originalFlag,
ids: query.ids,
type: query.type,
courseId: query.courseId,
learnFlag: vm.formData.learnFlag,
doctorName: vm.formData.doctorName,
pageNo: vm.formData.pageNo,
pageSize: vm.formData.pageSize,
};
console.log("course req", req);
openLoading(vm);
vm.reportGET("report/portalProjectCourse/getUserList", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
if(res.data.totalCount == 0 ) {
vm.$message("没有相关数据,请重新选择查询范围");
}
vm.tableData = res.data.list;
vm.totalRows = res.data.totalCount;
} else {
vm.$message(res.message);
}
});
} else if (this.tableType == 2) {
vm.curmbFouth = "考试培训情况";
//考试分析
let reqRank = {
projectId: query.projectId,
}
vm.reportGET("report/portalProjectExam/getGradeList", reqRank).then(res => {
if (res.code == "000000") {
vm.rankList = operationData.initRank(res.data.list);
}
});
let req = {
projectId: query.projectId,
originalFlag: query.originalFlag,
ids: query.ids,
type: query.type,
examId: query.examId,
gradeFlag: vm.formData.gradeFlag,
doctorName: vm.formData.doctorName,
pageNo: vm.formData.pageNo,
pageSize: vm.formData.pageSize,
};
console.log("exam req", req);
openLoading(vm);
vm.reportGET("report/portalProjectExam/getUserList", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
if(res.data.totalCount == 0 ) {
vm.$message("没有相关数据,请重新选择查询范围");
}
vm.tableData = res.data.list;
vm.totalRows = res.data.totalCount;
} else {
vm.$message(res.message);
}
});
}
},
resetForm() {
vm.formData = Object.assign(
{},
{
doctorName: "",
learnFlag: -1,
gradeFlag: -1,
pageNo: 1,
pageSize: 20,
}
);
vm.search();
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.formData.pageSize = val;
this.search();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.formData.pageNo = val;
this.search();
}
}
};
</script>
<style lang="scss">
.name-list-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;
color: #606266;
}
.form-update {
margin: 30px 0px 0px 20px;
}
.form-button {
width: 45%;
top: -62px;
position: relative;
left: 50%;
}
}
}
</style>
\ No newline at end of file
<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="formData" label-width="75px" style="width:100%;">
<el-col :span="6">
<el-form-item label="项目状态:">
<el-select
v-model="formData.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="formData.name" size="small" placeholder="请输入项目名称">
<i slot="suffix" class="el-icon-search"></i>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12" style="padding:0;text-align:right;padding-right:15px;">
<el-button type="primary" size="small" @click="searchData()">查询</el-button>
<el-button type="default" size="small" @click="resetForm()" style="margin-left:0;">重置</el-button>
</el-col>
</el-form>
</el-row>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="projectName" label="项目名称" min-width="200" align="center"></el-table-column>
<el-table-column prop="timeStatus" label="项目状态" min-width="80" align="center">
<template slot-scope="scope">
{{ scope.row.timeStatus | reportStatus }}
</template>
</el-table-column>
<el-table-column prop="projectBegintime" label="开始时间" min-width="160" align="center">
<template slot-scope="scope">{{ scope.row.projectBegintime }}</template>
</el-table-column>
<el-table-column prop="projectEndtime" label="结束时间" min-width="160" align="center">
<template slot-scope="scope">{{ scope.row.projectEndtime }}</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="center" min-width="200">
<template slot-scope="scope">
<el-button style="color:#509284" 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 class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="formData.pageNo"
:page-sizes="[20, 50 ,100]"
:page-size="formData.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows"
></el-pagination>
</div>
</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: "项目列表",
formData: {
//搜索信息
status: "",
name: "",
pageNo: 1, //当前是第几页
pageSize: 20 //页面总数
},
statusSelect: [
//项目状态
{
label: "全部",
value: ""
},
{
label: "进行中",
value: 1
},
{
label: "已结束",
value: 2
}
],
tableData: [],
totalRows: 0, //数据总数
idType: '',
};
},
components: {
BreadCrumb
},
created() {
vm = this;
vm.idType = localStorage.getItem('storageIdType');
vm.search();
},
// 挂载到Dom完成时
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
searchData() {
vm.formData.pageNo = 1;
vm.search();
},
// 搜索列表
search() {
let req = {};
req = this.formData;
openLoading(vm);
vm.GET("portal/portalInfo/getPortalReportProject", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
if(res.data.totalRows == 0) {
vm.$message("没有找到符合的结果");
}
vm.tableData = res.data.projectList;
vm.totalRows = res.data.totalRows;
} else {
vm.$message(res.message);
}
});
},
// 重置搜索信息
resetForm() {
this.formData = {
status: "",
name: "",
pageNo: 1, //当前是第几页
pageSize: 20 //页面总数
};
vm.search();
},
// 更改数据显示数量
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
vm.formData.pageSize = val;
vm.search();
},
// 换页
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
vm.formData.pageNo = val;
vm.search();
},
//跳转到报告详情页
go(row) {
let routerData = {
id: row.id,
projectName: row.projectName,
};
vm.$router.push({ path: "/item-list-old" , query: routerData });
}
}
};
</script>
<style lang="scss">
.item-list {
.itemlist-content {
padding: 10px;
background: #fff;
}
}
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册