Skip to content

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

多tabs的PDF导出问题

上级 43455d6a
隐藏空白字符变更
内嵌 并排
正在显示 包含 153 行增加 和 107 行删除
src/utils/operation.js
浏览文件 @ ec25080c
......@@ -305,6 +305,19 @@ export function setRegionOption2(data) {
}
return option;
}
export function setRegionOptionNew(data) {
let option = [];
for (let i = 0; i < data.length; i++) {
let obj = data[i];
obj.label = data[i].label;
obj.value = data[i].id;
if(obj.degree == 4 || obj.degree == 0 || obj.label == "全部") {
obj.leaf = true;
}
option.push(obj);
}
return option;
}
export function setAdministrativeId(value) {
let areaId = '000';
for (let i = 0; i < value.length; i++) {
......
src/views/learning/item-crowd-analysis.vue
浏览文件 @ ec25080c
......@@ -11,6 +11,8 @@
<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>
<div class="chart" v-show="showData">
<div class="item">
<div class="title">用户性别分布</div>
<div class="sex">
......@@ -282,14 +284,16 @@ export default {
.chart {
position: relative;
margin: 20px auto 0 auto;
width: 100%;
// overflow: auto;
width: 900px;
overflow-x: hidden;
.item {
position: relative;
float: left;
margin-top: 20px;
margin-right: 100px;
padding: 0;
width: 48%;
// width: 48%;
width: 400px;
// height: 20vw;
height: 350px;
border: 1px solid #dedede;
......@@ -329,7 +333,7 @@ export default {
}
}
.item-right {
float: right;
margin-right: 0;
}
}
}
......
src/views/learning/item-learning-effect.vue
浏览文件 @ ec25080c
<template>
<div class="learning-effect">
<el-button type="default" size="small" @click="exportPDF">导出明细</el-button>
<!-- <el-button type="default" size="small" @click="exportPDF">导出明细</el-button> -->
<div class="education" ref="education"></div>
<div class="learning" ref="learning"></div>
</div>
......@@ -24,10 +24,7 @@ export default {
},
created() {
vm = this;
vm.$nextTick(() => {
vm.setEducation();
vm.setLearning();
});
vm.setData();
},
mounted() {
commonUtil.resizeHeight();
......@@ -87,6 +84,12 @@ export default {
};
});
},
setData() {
setTimeout(function() {
vm.setEducation();
vm.setLearning();
},20);
},
setEducation() {
let myChart = echarts.init(this.$refs.education);
let option = {
......
src/views/learning/item-list.vue
浏览文件 @ ec25080c
......@@ -85,11 +85,21 @@
<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="exportPDF">导出PDF</el-button>
<el-button type="default" size="small" :disabled="exportStatus" @click="exportExcel">导出明细</el-button>
</div>
<!-- <div class="item-tab"></div> -->
<el-tabs id="item-list-tabs" v-model="activeName" @tab-click="handleClick" :before-leave="beforeLeave">
<el-tab-pane label="参与情况" name="first">
<el-tabs class="item-list-tabs" ref="tabs" id="item-list-tabs" v-model="activeName" @tab-click="handleClick" :before-leave="beforeLeave">
<el-tab-pane label="数据总览" name="zero" >
<data-all
ref="childDataAll"
:formInline="formInline"
:activeName="activeName"
:organizationNum="organizationNum"
:organizationList="organizationList"
></data-all>
</el-tab-pane>
<!-- <el-tab-pane label="参与情况" name="first">
<part-in
ref="childPart"
:formInline="formInline"
......@@ -97,7 +107,7 @@
:organizationNum="organizationNum"
:organizationList="organizationList"
></part-in>
</el-tab-pane>
</el-tab-pane> -->
<el-tab-pane label="人群分析" name="second">
<crowd-analysis
ref="childCrowd"
......@@ -124,7 +134,7 @@
:organizationList="organizationList"
></examination-analysisfrom>
</el-tab-pane>
<el-tab-pane label="数据总览" name="zero" >
<!-- <el-tab-pane label="数据总览" name="zero" >
<data-all
ref="childDataAll"
:formInline="formInline"
......@@ -132,9 +142,9 @@
:organizationNum="organizationNum"
:organizationList="organizationList"
></data-all>
</el-tab-pane>
<el-tab-pane label="学习效果分析" name="fifth" :lazy=true>
<learning-effect></learning-effect>
</el-tab-pane> -->
<el-tab-pane label="学习效果分析" name="fifth" >
<learning-effect ref="childEffect"></learning-effect>
</el-tab-pane>
</el-tabs>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" center>
......@@ -173,6 +183,8 @@ import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";
import { log } from "util";
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
let vm = null;
export default {
......@@ -201,31 +213,14 @@ export default {
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) {
if (node.level >= 1) {
console.log("node", node);
let req = {
countyId: node.data.value
projectId: vm.projectId,
regionId: node.data.value
};
vm.GET("basic-data/position/towns", req).then(res => {
let newData = vm.setMoreOption(res.data.townList, "towns");
vm.GET("stats/region", req).then(res => {
let newData = vm.setRegionOptionMore(res.data.list);
console.log("newData", newData);
resolve(newData);
});
......@@ -235,7 +230,7 @@ export default {
showOriginal: 2,
roleType: '',
formInline: {
region: [0],
region: [],
date: "",
organization: [],
checked: false,
......@@ -285,8 +280,8 @@ export default {
this.projectName = vm.getUrlSearch(window.location.href, "projectName");
this.curmbThird = vm.getUrlSearch(window.location.href, "projectName");
this.getDisplay();
this.search();
// this.getRegionOption();
// this.search();
this.getRegionOption();
},
mounted: function() {
commonUtil.resizeHeight();
......@@ -301,35 +296,30 @@ export default {
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();
}
// if(type !=2) {
// vm.getRegionOption();
// }
});
},
beforeLeave(activeName, oldActiveName) {
console.log('action',activeName,'oldActive',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");
// }
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 = [];
......@@ -348,20 +338,13 @@ export default {
this.organizationNotice = "选择地区筛选到区才能选择机构";
}
},
setMoreOption(data, type) {
setRegionOptionMore(data) {
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.label = data[i].label;
obj.value = data[i].id;
if(obj.degree == 4) {
obj.leaf = true;
}
option.push(obj);
......@@ -431,26 +414,20 @@ export default {
},
//获取地区
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);
// let list = [];
// for(let i =0;i<res.data.provinceList.length;i++) {
// list[i] = res.data.provinceList[i].provinceName;
// }
// console.log(list);
if (res.code == "000000") {
this.optionsRegion = operationData.setRegionOption(
res.data.provinceList
);
// console.log("this.optionsRegion", this.optionsRegion);
}
});
}
let req = {
projectId: vm.projectId,
};
openLoading(vm);
vm.GET("stats/region", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
vm.formInline.region[0] = res.data.list[0].id;
vm.optionsRegion = operationData.setRegionOptionNew(
res.data.list
);
vm.search();
}
});
},
getOrganizationList() {
this.organizationList = [];
......@@ -494,21 +471,23 @@ export default {
vm.search();
},
search() {
console.log(vm.formInline.during);
// 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");
}
// console.log(vm.formInline.during);
this.$refs.childCrowd.$emit("search");
this.$refs.childCourse.$emit("search");
// 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() {
......@@ -611,7 +590,54 @@ export default {
this.$nextTick(function() {
this.$refs.childAlignment.$emit("search");
});
}
},
exportPDF() {
openLoading(vm);
let tabsList = vm.$refs.tabs.$children;
for(let i= 1;i<tabsList.length;i++) {
tabsList[i].$el.style.display = 'block';
}
let element = '';
element = document.querySelector('.item-list-tabs .el-tabs__content');
console.log(element);
if(element == null) {
return
}
setTimeout(() => {
html2Canvas(element).then(function(canvas) {
let contentWidth = canvas.width;
let contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
let pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
let leftHeight = contentHeight;
//页面偏移
let position = 0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
let imgWidth = 595.28;
let imgHeight = 592.28 / contentWidth * contentHeight;
let pageData = canvas.toDataURL('image/jpeg', 1.0);
let pdf = new JsPDF('', 'pt', [contentWidth*0.7,contentHeight*0.7]);
pdf.addImage(pageData, 'JPEG', 0, position, contentWidth*0.7, contentHeight*0.7)
let title = "导出学情报告";
pdf.save(title + '.pdf');
for(let i= 1;i<tabsList.length;i++) {
let idStr = tabsList[i].$el.id;
console.log(idStr,vm.activeName);
if(idStr.indexOf(vm.activeName) == -1) {
tabsList[i].$el.style.display = 'none';
}
}
closeLoading(vm);
});
}, 0);
},
}
};
</script>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或