Skip to content

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

m学习效果api对接

上级 cbea0693
隐藏空白字符变更
内嵌 并排
正在显示 包含 634 行增加 和 594 行删除
src/utils/learning/chartData.js 0 → 100644
浏览文件 @ e7f148cc
export function dustributeOption(legendData, seriesData) {
let option = {
title: {
text: "",
x: "left"
},
tooltip: {
trigger: "item",
formatter: "{b} : {d}%"
},
label: {
formatter: "{d}%"
},
color: ['#FF9A4B', '#39AF9A', '#FFB01B'],
legend: {
orient: "horizontal",
top: "",
// left: "10%",
data: legendData
},
series: [
{
name: "",
type: "pie",
radius: "60%",
center: ["55%", "50%"],
data: seriesData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
};
return option;
}
export function recordOption() {
let option = {
title: {
text: "",
x: "left"
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
shadowStyle: {
shadowColor: '#E3EFED',
width: 36,
},
},
backgroundColor: 'rgba(0,0,0,0.7)',
formatter: function(params) {
let relVal = params[0].name + "人数：";
let value = 0;
for (let i = 0, l = params.length; i < l; i++) {
value += params[i].value;
}
relVal += value + "人";
let divList = [];
divList[0] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[1] = "<div style='background: #39AF9A;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[2] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
for (let j = params.length - 1 ; j >= 0; j--) {
relVal +=
"<br/>" + divList[j%3] +
params[j].seriesName +
"占比： " +
(
(100 * parseFloat(params[j].value)) /
parseFloat(value)
).toFixed(2) +
"%";
}
return relVal;
}
},
color: ['#FFB01B','#39AF9A', '#5D7092'],
legend: {
data: ["未获证人数", "获优秀人数", "获及格人数"]
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "category",
data: ["博士", "硕士", "本科", "大专", "中专及以下", "其他"]
},
yAxis: {
type: "value",
name: "人数 (个)"
},
series: [
{
name: "获及格人数",
type: "bar",
stack: "总量",
barWidth: 18,
label: {
normal: {
show: true,
rotate: -90,
}
},
data: [220, 182, 191, 234, 290, 330]
},
{
name: "获优秀人数",
type: "bar",
stack: "总量",
barWidth: 18,
label: {
normal: {
show: true,
rotate: -90,
}
},
data: [120, 132, 101, 134, 90, 230]
},
{
name: "未获证人数",
type: "bar",
stack: "总量",
barWidth: 18,
label: {
normal: {
show: true,
rotate: -90,
}
},
data: [1, 302, 301, 334, 390, 330]
},
]
};
return option;
}
export function certificateOption() {
let option = {
title: {
text: "",
x: "left"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999"
}
},
backgroundColor: 'rgba(0,0,0,0.7)',
formatter: function(params) {
let relVal = "";
let divList = [];
divList[0] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[1] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[2] = "<div style='background: #559A99;height: 12px;width: 12px;margin: 5px 5px 0 5px;float: left;border-radius:50%;'></div>";
for (let j = 0, l = params.length; j < l; j++) {
relVal += divList[j] + params[j].seriesName + "： " + params[j].value;
if (j === 2) {
relVal += "%";
} else {
relVal += "<br/>";
}
}
return relVal;
}
},
color: ['#5D7092','#FFB01B', '#559A99'],
dataZoom: {
show: true,
start: 0,
end: 60
},
legend: {
data: ["参与人数", "获证人数", "获证比例"]
},
xAxis: [
{
axisLabel: {
interval: 0,
rotate: 45
},
type: "category",
data: [
"北京市",
"天津市",
"河北省",
"山西省",
"内蒙古自治区",
"辽宁省",
"吉林省",
"黑龙江省",
"上海市",
"江苏省",
"浙江省",
"安徽省",
"福建省",
"江西省",
"山东省",
"河南省",
"湖北省",
"湖南省",
"广东省",
"广西壮族自治区",
"海南省",
"重庆市",
"四川省",
"贵州省",
"云南省",
"西藏自治区",
"陕西省",
"甘肃省",
"青海省",
"宁夏回族自治区",
"新疆维吾尔自治区"
],
axisPointer: {
type: "shadow"
}
}
],
yAxis: [
{
type: "value",
name: "人数（个）",
axisLabel: {
formatter: "{value} "
}
},
{
type: "value",
name: "比例",
min: 0,
max: 100,
axisLabel: {
formatter: "{value} %"
}
}
],
series: [
{
name: "参与人数",
barWidth: 10,
type: "bar",
data: [
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390
],
label: {
show: true,
position: "top",
formatter: "{c}", //这是关键，在需要的地方加上就行了
rotate: -90,
offset: [-5, -15]
}
},
{
name: "获证人数",
barWidth: 10,
type: "bar",
data: [9, 8, 100, 200, 200, 55, 10, 9, 8, 100, 200, 200, 55, 10, 9, 8, 100, 200, 200, 55, 10],
label: {
show: true,
position: "top",
formatter: "{c}", //这是关键，在需要的地方加上就行了
rotate: -90,
offset: [-5, -15]
}
},
{
name: "获证比例",
type: "line",
yAxisIndex: 1,
data: [
2,
22,
32,
41,
61,
10,
20,
23,
55,
67,
91,
6,
2,
22,
32,
41,
61,
10,
20,
23,
55,
67,
91,
6
],
label: {
show: true,
position: "top",
formatter: "{c}%" //这是关键，在需要的地方加上就行了
}
}
]
};
return option;
}
export function durationOption() {
let option = {
title: {
text: "",
x: "left"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
color: ['#449284'],
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
dataZoom: {
show: true,
start: 0,
end: 66
},
xAxis: [
{
axisLabel: {
interval: 0,
rotate: 35
},
type: "category",
data: [
"北京市",
"天津市",
"河北省",
"山西省",
"内蒙古自治区",
"辽宁省",
"吉林省",
"黑龙江省",
"上海市",
"江苏省",
"浙江省",
"安徽省",
"福建省",
"江西省",
"山东省",
"河南省",
"湖北省",
"湖南省",
"广东省",
"广西壮族自治区",
"海南省",
"重庆市",
"四川省",
"贵州省",
"云南省",
"西藏自治区",
"陕西省",
"甘肃省",
"青海省",
"宁夏回族自治区",
"新疆维吾尔自治区"
],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: "value",
name: "完成时长 (天)"
}
],
series: [
{
name: "时长",
type: "bar",
barWidth: 17,
data: [
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390
],
label: {
show: true,
position: "top",
formatter: "{c}", //这是关键，在需要的地方加上就行了
rotate: -90,
offset: [-5, -15]
}
}
]
};
return option;
}
\ No newline at end of file
src/utils/operation.js
浏览文件 @ e7f148cc
......@@ -348,16 +348,17 @@ export function getLearnOrganization(data) {
let arr = [];
return arr;
}
let organization = [
{
label: "全部",
value: 0
},
];
// let organization = [
// {
// label: "全部",
// value: 0
// },
// ];
let organization = [];
for (let i = 0; i < data.length; i++) {
let obj = {
label: data[i].hospital_name,
value: data[i].hospital_id,
label: data[i].hospitalName,
value: data[i].hospitalId,
index: i,
};
organization.push(obj);
......
src/views/learning/item-data-all.vue
浏览文件 @ e7f148cc
......@@ -60,7 +60,7 @@
<div class="distributeChart" id="distributeChart" ref="distributeChart"></div>
<div class="data-text">
<div class="content-text">
<p v-for="item in distributeList" :key="item.value">{{item.label}}：{{item.value}}人</p>
<p v-for="item in distributeList" >{{item.label}}：{{item.value}}人</p>
</div>
</div>
</div>
......@@ -148,6 +148,7 @@
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";
import * as chartData from "../../utils/learning/chartData";
import echarts from "echarts";
import { setTimeout } from "timers";
let vm = null;
......@@ -206,21 +207,18 @@ export default {
created() {
vm = this;
vm.projectId = vm.getUrlSearch(window.location.href, "id");
vm.initCard();
if(vm.dataType == 0) {
// vm.setInitWidth();
vm.setTableDate();
setTimeout(function() {
// vm.$nextTick(() => {
vm.setDistributeChart();
vm.setRecordChart();
vm.setDurationChart();
vm.setCertificateChart();
// });
}, 500);
} else {
vm.setTable();
}
// vm.initCard();
// if(vm.dataType == 0) {
// vm.setTableDate();
// setTimeout(function() {
// vm.setDistributeChart();
// vm.setRecordChart();
// vm.setDurationChart();
// vm.setCertificateChart();
// }, 500);
// } else {
// vm.setTable();
// }
},
mounted: function() {
this.$on("search", () => {
......@@ -241,23 +239,30 @@ export default {
timeFlag: vm.formInline.timeFlag,
};
openLoading(vm);
if(req.regionId == "000") {
req.regionId = "310";
}
// console.log("0 req", req);
vm.POST("stats/report/general", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
vm.initCard(res.data.percentData);
vm.setDistributeChart(res.data.certData);
vm.setRecordChart();
vm.setDurationChart();
vm.setCertificateChart();
}
});
},
initCard() {
initCard(data) {
let cardData = [
{
value: "45%",
value: "0%",
title: "机构参与率",
hasKey: "已参与机构数",
hasNum: "318535",
hasNum: "0",
shouldKey: "应参与机构数",
shouldNum: "78534",
shouldNum: "0",
content: [
"机构参与率：已参与机构数/应参与机构数*100% ",
"应参与机构数：筛选范围下，所有圈选机构数量，包含白名单反退出来的机构",
......@@ -265,12 +270,12 @@ export default {
]
},
{
value: "78%",
value: "0%",
title: "人员参与率",
hasKey: "已参与人数",
hasNum: "878534",
hasNum: "0",
shouldKey: "应参与人数",
shouldNum: "674343",
shouldNum: "0",
content: [
"人员参与率：已参与人数/应参与人数*100%",
"应参与人数：筛选范围下，所圈选人员数量",
......@@ -278,12 +283,12 @@ export default {
]
},
{
value: "71%",
value: "0%",
title: "获证率",
hasKey: "已获证人数",
hasNum: "567",
hasNum: "0",
shouldKey: "应参与人数",
shouldNum: "78534",
shouldNum: "0",
content: [
"获证率：已完成人数/应参与人数*100%",
"应参与人数：筛选范围下，所圈选人员数量",
......@@ -291,7 +296,20 @@ export default {
]
}
];
if(vm.dataType == 0) {
cardData[0].value = data.hospitalRate*100 + '%';
cardData[0].hasNum = data.hospitalJoinCount;
cardData[0].shouldNum = data.hospitalCount;
cardData[1].value = data.doctorRate*100 + '%';
cardData[1].hasNum = data.joinCount;
cardData[1].shouldNum = data.doctorCount;
cardData[2].value = data.certificateRate*100 + '%';
cardData[2].hasNum = data.finishCount;
cardData[2].shouldNum = data.doctorCount;
vm.cardData = cardData;
} else if(vm.dataType == 1) {
vm.cardData = cardData.slice(0,2);
......@@ -321,62 +339,29 @@ export default {
},
setInitWidth() {
},
setDistributeChart() {
vm.distributeList = [
{
label: '未获证人数',
value: 2290,
},
{
label: '获优秀人数',
value: 1900,
},
{
label: '获及格人数',
value: 150,
},
]
setDistributeChart(data) {
let keyName = ['未获证人数','获优秀人数','获良好人数','获及格人数','获不及格人数'];
let keyName2 = ['未获证人数占比','获优秀人数占比','获良好人数占比','获及格人数占比','获不及格人数占比'];
let distributeList = [];
let legendData = [];
let seriesData = [];
for(let i = 0; i<data.length ; i++) {
let obj = {
label: keyName[data[i].certId],
value: data[i].doneCount,
};
distributeList.push(obj);
legendData.push(keyName2[data[i].certId])
let objSer = {
name: keyName2[data[i].certId],
value: data[i].doneCount,
}
seriesData.push(objSer);
}
vm.distributeList = distributeList;
let myChart = echarts.init(this.$refs.distributeChart);
let option = {
title: {
text: "",
x: "left"
},
tooltip: {
trigger: "item",
formatter: "{b} : {c} ({d}%)"
},
label: {
formatter: "{d}%"
},
color: ['#FF9A4B','#39AF9A', '#FFB01B'],
legend: {
orient: "horizontal",
top: "",
left: "40%",
data: ["未获证人数占比", "获优秀人数占比", "获及格人数占比"]
},
series: [
{
name: "",
type: "pie",
radius: "60%",
center: ["65%", "50%"],
data: [
{ value: 3000, name: "未获证人数占比" },
{ value: 6800, name: "获优秀人数占比" },
{ value: 3200, name: "获及格人数占比" }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
};
let option = chartData.dustributeOption(legendData,seriesData);
myChart.setOption(option);
vm.echartsData.chart0 = myChart;
vm.updateResize();
......@@ -409,445 +394,22 @@ export default {
},
]
let myChart = echarts.init(this.$refs.recordChart);
let option = {
title: {
text: "",
x: "left"
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
shadowStyle: {
shadowColor: '#E3EFED',
width: 36,
},
},
backgroundColor: 'rgba(0,0,0,0.7)',
formatter: function(params) {
let relVal = params[0].name + "人数：";
let value = 0;
for (let i = 0, l = params.length; i < l; i++) {
value += params[i].value;
}
relVal += value + "人";
let divList = [];
divList[0] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[1] = "<div style='background: #39AF9A;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[2] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
for (let j = params.length - 1 ; j >= 0; j--) {
relVal +=
"<br/>" + divList[j] +
params[j].seriesName +
"占比： " +
(
(100 * parseFloat(params[j].value)) /
parseFloat(value)
).toFixed(2) +
"%";
}
return relVal;
}
},
color: ['#FFB01B','#39AF9A', '#5D7092'],
legend: {
data: ["未获证人数", "获优秀人数", "获及格人数"]
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "category",
data: ["博士", "硕士", "本科", "大专", "中专及以下", "其他"]
},
yAxis: {
type: "value",
name: "人数 (个)"
},
series: [
{
name: "获及格人数",
type: "bar",
stack: "总量",
barWidth: 18,
label: {
normal: {
show: true,
rotate: -90,
}
},
data: [220, 182, 191, 234, 290, 330]
},
{
name: "获优秀人数",
type: "bar",
stack: "总量",
barWidth: 18,
label: {
normal: {
show: true,
rotate: -90,
}
},
data: [120, 132, 101, 134, 90, 230]
},
{
name: "未获证人数",
type: "bar",
stack: "总量",
barWidth: 18,
label: {
normal: {
show: true,
rotate: -90,
}
},
data: [1, 302, 301, 334, 390, 330]
},
]
};
let option = chartData.recordOption();
myChart.setOption(option);
vm.echartsData.chart1 = myChart;
vm.updateResize();
},
setCertificateChart() {
let myChart = echarts.init(this.$refs.certificateChart);
let option = {
title: {
text: "",
x: "left"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999"
}
},
backgroundColor: 'rgba(0,0,0,0.7)',
formatter: function(params) {
let relVal = "";
let divList = [];
divList[0] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[1] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[2] = "<div style='background: #559A99;height: 12px;width: 12px;margin: 5px 5px 0 5px;float: left;border-radius:50%;'></div>";
for (let j = 0, l = params.length; j < l; j++) {
relVal += divList[j] + params[j].seriesName + "： " + params[j].value;
if (j === 2) {
relVal += "%";
} else {
relVal += "<br/>";
}
}
return relVal;
}
},
color: ['#5D7092','#FFB01B', '#559A99'],
dataZoom: {
show: true,
start: 0,
end: 60
},
legend: {
data: ["参与人数", "获证人数", "获证比例"]
},
xAxis: [
{
axisLabel: {
interval: 0,
rotate: 45
},
type: "category",
data: [
"北京市",
"天津市",
"河北省",
"山西省",
"内蒙古自治区",
"辽宁省",
"吉林省",
"黑龙江省",
"上海市",
"江苏省",
"浙江省",
"安徽省",
"福建省",
"江西省",
"山东省",
"河南省",
"湖北省",
"湖南省",
"广东省",
"广西壮族自治区",
"海南省",
"重庆市",
"四川省",
"贵州省",
"云南省",
"西藏自治区",
"陕西省",
"甘肃省",
"青海省",
"宁夏回族自治区",
"新疆维吾尔自治区"
],
axisPointer: {
type: "shadow"
}
}
],
yAxis: [
{
type: "value",
name: "人数（个）",
axisLabel: {
formatter: "{value} "
}
},
{
type: "value",
name: "比例",
min: 0,
max: 100,
axisLabel: {
formatter: "{value} %"
}
}
],
series: [
{
name: "参与人数",
barWidth: 10,
type: "bar",
data: [
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390
],
label: {
show: true,
position: "top",
formatter: "{c}", //这是关键，在需要的地方加上就行了
rotate: -90,
offset: [-5, -15]
}
},
{
name: "获证人数",
barWidth: 10,
type: "bar",
data: [9, 8, 100, 200, 200, 55, 10, 9, 8, 100, 200, 200, 55, 10, 9, 8, 100, 200, 200, 55, 10],
label: {
show: true,
position: "top",
formatter: "{c}", //这是关键，在需要的地方加上就行了
rotate: -90,
offset: [-5, -15]
}
},
{
name: "获证比例",
type: "line",
yAxisIndex: 1,
data: [
2,
22,
32,
41,
61,
10,
20,
23,
55,
67,
91,
6,
2,
22,
32,
41,
61,
10,
20,
23,
55,
67,
91,
6
],
label: {
show: true,
position: "top",
formatter: "{c}%" //这是关键，在需要的地方加上就行了
}
}
]
};
let option = chartData.certificateOption();
myChart.setOption(option);
vm.echartsData.chart2 = myChart;
vm.updateResize();
},
setDurationChart() {
let myChart = echarts.init(this.$refs.durationChart);
let option = {
title: {
text: "",
x: "left"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
color: ['#449284'],
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
dataZoom: {
show: true,
start: 0,
end: 66
},
xAxis: [
{
axisLabel: {
interval: 0,
rotate: 35
},
type: "category",
data: [
"北京市",
"天津市",
"河北省",
"山西省",
"内蒙古自治区",
"辽宁省",
"吉林省",
"黑龙江省",
"上海市",
"江苏省",
"浙江省",
"安徽省",
"福建省",
"江西省",
"山东省",
"河南省",
"湖北省",
"湖南省",
"广东省",
"广西壮族自治区",
"海南省",
"重庆市",
"四川省",
"贵州省",
"云南省",
"西藏自治区",
"陕西省",
"甘肃省",
"青海省",
"宁夏回族自治区",
"新疆维吾尔自治区"
],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: "value",
name: "完成时长 (天)"
}
],
series: [
{
name: "时长",
type: "bar",
barWidth: 17,
data: [
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390
],
label: {
show: true,
position: "top",
formatter: "{c}", //这是关键，在需要的地方加上就行了
rotate: -90,
offset: [-5, -15]
}
}
]
};
let option = chartData.durationOption();
myChart.setOption(option);
vm.echartsData.chart3 = myChart;
vm.updateResize();
......
src/views/learning/item-learning-effect.vue
浏览文件 @ e7f148cc
<template>
<div class="learning-effect">
<!-- <el-button type="default" size="small" @click="exportPDF">导出明细</el-button> -->
<div class="education" ref="education"></div>
<div class="learning" ref="learning"></div>
<div class="chart" ref="education"></div>
<div class="chart" ref="learning"></div>
</div>
</template>
<script>
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";
import * as chartData from "../../utils/learning/chartData";
import echarts from "echarts";
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
let vm = null;
export default {
props: {
formInline: {
type: Object
},
activeName: {
type: String
},
},
data() {
return {
echartsData: {
......@@ -24,58 +32,14 @@ export default {
},
created() {
vm = this;
vm.setData();
},
mounted() {
commonUtil.resizeHeight();
this.$on("search", () => {
this.search();
});
},
methods: {
exportPDF() {
let element = '';
element = document.querySelector('.data-all-wrap');
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', 'a4');
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
let title = "导出学情报告";
pdf.save(title + '.pdf');
});
}, 0);
},
updateResize() {
this.$nextTick(function() {
window.onresize = function() {
......@@ -84,7 +48,26 @@ export default {
};
});
},
setData() {
search() {
let req = {
projectId: vm.projectId,
beginDate: operationData.setDuringTime(vm.formInline.during,'begin'),
endDate: operationData.setDuringTime(vm.formInline.during,'end'),
hospitalIdList: vm.formInline.organization,
originalFlag: vm.formInline.checked == false ? 0 : 1,
regionId: vm.formInline.region[vm.formInline.region.length - 1],
timeFlag: vm.formInline.timeFlag,
};
openLoading(vm);
if(req.regionId == "000") {
req.regionId = "310";
}
// console.log("0 req", req);
vm.POST("stats/report/studyEffect", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
}
});
setTimeout(function() {
vm.setEducation();
vm.setLearning();
......@@ -206,13 +189,15 @@ export default {
<style lang='scss' rel='stylesheet/scss'>
.learning-effect {
width: 100%;
.learning,
.education {
margin-top: 40px;
min-width: 400px;
height: 400px;
background: #fff;
background: #fff;
overflow: hidden;
padding: 10px;
.chart {
position: relative;
margin: 20px auto 0 auto;
// width: 100%;
width: 860px;
height: 350px;
}
}
</style>
src/views/learning/item-list.vue
浏览文件 @ e7f148cc
......@@ -27,7 +27,7 @@
@change="changeOrganization"
multiple
collapse-tags
:disabled="formInline.region.length < 3"
:disabled="areaLen < 3"
style="width:330px"
>
<el-option
......@@ -53,7 +53,7 @@
size="small"
v-model="formInline.timeFlag"
placeholder="请选择"
style="width:330px"
style="width:330px;"
>
<el-option
v-for="item in timeFlagList"
......@@ -136,7 +136,11 @@
></examination-analysisfrom>
</el-tab-pane>
<el-tab-pane label="学习效果分析" name="fifth" >
<learning-effect ref="childEffect"></learning-effect>
<learning-effect
ref="childEffect"
:formInline="formInline"
:activeName="activeName"
></learning-effect>
</el-tab-pane>
</el-tabs>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" center>
......@@ -255,7 +259,8 @@ export default {
value: 2,
label: '开始时间结束时间',
}
]
],
areaLen: 1,
};
},
computed: {
......@@ -293,10 +298,21 @@ export default {
vm.displayExam = res.data.existExam;
vm.flag = res.data.flag;
}
// if(type !=2) {
// vm.getRegionOption();
// }
});
let reqInfo = {
projectId: vm.projectId,
};
// openLoading(vm);
// vm.GET("stats/region/info", reqInfo).then(res => {
// closeLoading(vm);
// if (res.code == "000000") {
// // vm.showOriginal = res.data.status;
// // vm.roleType = res.data.roleType;
// // vm.displayExam = res.data.existExam;
// // vm.flag = res.data.flag;
// }
// });
},
beforeLeave(activeName, oldActiveName) {
// console.log('action',activeName,'oldActive',oldActiveName)
......@@ -323,7 +339,10 @@ export default {
// console.log('vm.dialogData.region',vm.dialogData.region)
}, 20);
// console.log('region',value,vm.formInline);
if (value.length >= 3) {
let areaArr = value[value.length -1].split('_');
vm.areaLen = areaArr.length;
console.log('areaArr!!',areaArr);
if (areaArr.length >= 3) {
this.getOrganizationList();
this.organizationNotice = "请选择机构";
} else {
......@@ -421,24 +440,20 @@ export default {
}
});
},
//获取机构列表
getOrganizationList() {
this.organizationList = [];
let countyId = vm.formInline.region[vm.formInline.region.length - 1];
let type = 3;
if(vm.formInline.region.length == 4) {
type = 5;
}
vm.organizationList = [];
let regionId = vm.formInline.region[vm.formInline.region.length - 1];
let req = {
projectId: vm.projectId,
type: type,
id: countyId
regionId : regionId
};
openLoading(vm);
vm.reportGET("report/portal/getOrganizationList", req).then(res => {
vm.GET("stats/region/hospital", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
this.organizationList = operationData.getLearnOrganization(
res.data.hospitalList
res.data.list
);
}
});
......@@ -467,6 +482,7 @@ export default {
this.$refs.childDataAll.$emit("search");
this.$refs.childCrowd.$emit("search");
this.$refs.childCourse.$emit("search");
this.$refs.childEffect.$emit("search");
// if (this.activeName == "first") {
// this.organizationNum = this.getOrganizationNum();
......@@ -689,6 +705,7 @@ export default {
}
.tag-group {
margin-left: 78px;
margin-bottom: 20px;
.el-tag {
margin-right: 20px;
}
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或