需求陈述
由于API是特定单位/特定类别/特定教学方式的数据，故汇总数据需要循环请求不同单位/不同类别/不同教学方式。
技术要点
1.axios并发请求
2.JS for循环
3.Vue数组中出现 ob :Observer无法取值问题的解决方法
4.将数据转化为数组
5.一次请求所有数据后，再分页
6.设置loading状态
7.js向对象中添加元素(对象,数组)
8.分情况显示数据
9.前端下载数据(json转excel)
10.v-if=“mySystem === ‘TRS’||mySystem === ‘CSOD’”
11.修改XLSX个样式
12.引入Echarts
1.axios并发请求
关键点1：myDLTMultiData()方法来循环请求 SearchData()。
关键点2：axios.all([Array_A])中的Array_A是请求的列表。
//Array_A来保存【请求的队列】
SearchData(myDate_start,myDate_end,myuserId,trainingMethodId,pageNum,skillcode){
axios({
timeout:3000,
method:"post",
url:"https://dltapi.wis***.com/dlt/org/trainingrecord/search",
data:{
startDate: myDate_start ||'2012-01-01',
endDate: myDate_end ||'2050-06-01',
trainingMethodId: trainingMethodId || 1,
currentPage: pageNum || 1,
userId:myuserId,
// courseCode: "K01002003CM",
// courseName:'EC/batch/try run流程（课程）',
orgSkillCode:skillcode || "SPK011",
pageSize: 1000000,
},
headers:{
'Content-Type': 'application/json',
'Authorization': sessionStorage.getItem('UserPermission'),
},
}).then(
(response) => {
// console.log('response',response)
//拼数组
for (let j = 0; j < response.data.trainingRecords.length; j++) {
this.DLT_data.push(response.data.trainingRecords[j])
}
// return response.data.trainingRecords
}
).catch(
function (err) {
// 请求失败处理
console.log('请求失败！',err)
// alert('请求失败！',err)
})
},
myDLTMultiData(myDate_start,myDate_end,myuserId){
this.DLT_data = []
let Array_A = []
let skillcodeRange = ["SPK001","SPK002","SPK003","SPK004","SPK005","SPK006","SPK007","SPK008","SPK009","SPK010",
"SPK011","SPK012","SPK013","SPK014","SPK015","SPK016","SPK017","SPK018","SPK019","SPK020","SPK021","SPK022",
"SPK024","SPK025","SPK026","SPK027","SPK028","SPK029","SPK030","SPK031","SPK032","SPK033","SPK034",
"SPK035","SPK036","SPK037","SPK038","SPK039","SPK040","SPK04","SPK042","SPK043"]
// let skillcodeRange = ["SPK036","SPK037","SPK038","SPK039","SPK040","SPK041","SPK042","SPK043"]
//循环
for (let s = 0; s < skillcodeRange.length; s++) {
for (let m = 1; m < 3; m++) {
// 页码需从1开始,100000笔，搜索一次就好
for (let i = 1; i < 2; i++) {
Array_A.push(this.SearchData(myDate_start,myDate_end,myuserId,m,i,skillcodeRange[s]))
}
}
}
setTimeout((Array_A)=>{
axios.all([
Array_A
]).then((response)=>{
//Vue数组中出现__ob__:Observer无法取值问题的解决方法，把值转为DLT_data_all
this.DLT_data_all = JSON.parse(JSON.stringify(this.DLT_data))
// console.log('DLT_data',JSON.parse(JSON.stringify(this.DLT_data)))
console.log('DLT_data_all',this.DLT_data_all)
}).catch(e=>{ // 失败的时候则返回最先被reject失败状态的值
console.log("error",e)
})
},3000)
},
2.JS for循环
将请求循环push到Array_A
//循环
for (let s = 0; s < skillcodeRange.length; s++) {
for (let m = 1; m < 3; m++) {
// 页码需从1开始,100000笔，搜索一次就好
for (let i = 1; i < 2; i++) {
Array_A.push(this.SearchData(myDate_start,myDate_end,myuserId,m,i,skillcodeRange[s]))
}
}
}
3.Vue数组中出现 ob :Observer无法取值问题的解决方法
https://blog.csdn.net/wanshuai12138/article/details/124809122
setTimeout()方法去除Observer
vue 怎么拿到{ ob: Observer}里面的值？https://blog.csdn.net/weixin_49522520/article/details/125522547
setTimeout((Array_A)=>{
axios.all([
Array_A
]).then((response)=>{
//Vue数组中出现__ob__:Observer无法取值问题的解决方法，把值转为DLT_data_all
this.DLT_data_all = JSON.parse(JSON.stringify(this.DLT_data))
}).catch(e=>{ // 失败的时候则返回最先被reject失败状态的值
console.log("error",e)
})
},3000)
4.将数据转化为数组
将每次并发请求的数据重组为数组，保存在DLT_data里面。
//拼数组
for (let j = 0; j < response.data.trainingRecords.length; j++) {
this.DLT_data.push(response.data.trainingRecords[j])
}
5.一次请求所有数据后，再分页
DLT_data_all来保存所有数据，pageNum来做切片。
computed: {
DLT_data_filter(){
//return this.DLT_data_all.slice(0,10)
if(this.pageNum==1){
return this.DLT_data_all.slice(0,10)
}
else{
return this.DLT_data_all.slice((this.pageNum-1)*10,this.pageNum*10)
}
}
},
methods: {
handlenextClickDLT(val) {
//把回调参数val给pageNum
console.log("当前页码：", val);
this.pageNum = val
},
}
6.设置loading状态
参考链接https://element.eleme.cn/#/zh-CN/component/loading
设置loading层的位置在最外层
<div class="container-fluid" v-loading="loading" style="width: 100%">
设置初始状态 loading:false
data() {
return {
loading:false,
设置this.loading=false
GoQuery(myDate, mySystem, category, EmployeeID, courseName, pageNum) {
this.loading=true;
if (mySystem == "TRS") {
this.$store.dispatch("getTrsTrainingTestData", {
myDateS: myDate[0],
myDateE: myDate[1],
mySystem: mySystem,
category: category,
EmployeeID: EmployeeID,
courseName: courseName,
pageNum: pageNum,
});
//设置载入状态,()箭头函数选择VC
setTimeout(
()=>{
console.log('this',this)
this.loading=false
},
500
)
}
7.js向对象中添加元素(对象,数组)
https://blog.csdn.net/embelfe_segge/article/details/123190656
对象名[“属性名”] = 值
for (let j = 0; j < response.data.trainingRecords.length; j++) {
let the_record = response.data.trainingRecords[j]
the_record['DLTcategory']="技能等级认证训"
this.DLT_data.push(the_record)
}
8.分情况显示数据
通过向对象添加DLTcategory后，可利用DLTcategory进行分情况展示（符合条件就展示，不符合就不展示）。
<tr
v-for="item in DLT_data_filter"
:key="item.listId"
valign="middle"
style="color: Black; border-color: #e0e0e0; font-size: 15px"
v-if="item.DLTcategory==='入职训'"
>
<td class="col">{{ item.DLTcategory }}</td>
<td class="col"></td>
<td class="col"></td>
<td class="col">{{ item.userId }}</td>
<td class="col">{{ item.userCname }}</td>
<td class="col">{{ item.trainingMethod }}</td>
<td class="col">{{ item.trainingDate.split("T")[0] }}</td>
<td class="col"></td>
<td class="col"></td>
<td class="col"></td>
</tr>
9.前端下载数据(json转excel)
参考https://blog.csdn.net/qq_42618566/article/details/107253501
根据不同模块下载不同内容，放进去theArray。
DLTtoExcel(myDate,mySystem,category,EmployeeID,courseName){
let excel_array = []
for (let n = 0; n < this.DLT_data_all.length; n++) {
let theData = this.DLT_data_all[n];
let theArray = {};
if(theData.DLTcategory=='技能等级认证训'){
theArray = {
DLTcategory: theData.DLTcategory+'-'+theData.orgLevel.orgSkillCode+'-'+theData.orgLevel.orgSkillName,
plantCode: theData.plantCode,
deptId: theData.deptId,
userId: theData.userId,
userName: theData.userName,
courseName: theData.course.courseName,
trainingDate: theData.trainingDate.split("T")[0],
startTime: theData.startTime,
trainingSite: theData.trainingSite,
lecturerCname: theData.lecturer.lecturerCname,
};
}else if(theData.DLTcategory=='入职训'){
theArray = {
DLTcategory: theData.DLTcategory,
plantCode: '',
deptId: '',
userId: theData.userId,
userName: theData.userCname,
courseName: theData.trainingDays,
trainingDate: theData.trainingDate.split("T")[0],
startTime: theData.trainingDate.split("T")[1],
trainingSite: '',
lecturerCname: '',
};
}else if(theData.DLTcategory=='通识训'){
theArray = {
DLTcategory: theData.DLTcategory,
plantCode: theData.plantCode,
deptId: theData.deptId,
userId: theData.userId,
userName: theData.userName,
courseName: theData.course.courseName,
trainingDate: theData.trainingDate.split("T")[0],
startTime: theData.startTime,
trainingSite: theData.trainingSite,
lecturerCname: theData.lecturer.lecturerCname,
};
}else if(theData.DLTcategory=='技能认证训'){
theArray = {
DLTcategory: theData.DLTcategory,
plantCode: theData.plantCode,
deptId: theData.deptId,
userId: theData.userId,
userName: theData.userName,
courseName: theData.course.courseName,
trainingDate: theData.trainingDate.split("T")[0],
startTime: theData.startTime,
trainingSite: theData.trainingSite,
lecturerCname: theData.lecturer.lecturerCname,
};
}
excel_array.push(theArray)
// console.log('n',n)
}
console.log('excel_array',excel_array)
const fileName = "TrainingRecord.xlsx";
const sheetName = "Sheet1";
const excel = XLSX.utils.book_new();
const data = XLSX.utils.json_to_sheet(excel_array);
XLSX.utils.book_append_sheet(excel, data, sheetName);
XLSX.writeFile(excel, fileName);
}
10.v-if=“mySystem === ‘TRS’||mySystem === ‘CSOD’”
https://zhuanlan.zhihu.com/p/48877695
v-if="mySystem === 'TRS'||mySystem === 'CSOD'"
11.修改XLSX个样式
https://blog.51cto.com/u_15997490/6497653
我的实例
DLTtoExcel(myDate,mySystem,category,EmployeeID,EmployeeDept,courseName){
let excel_array = []
for (let n = 0; n < this.DLT_data_all.length; n++) {
let theData = this.DLT_data_all[n];
let theArray = [];
if(theData.DLTcategory=='技能等级认证训'){
theArray = [
theData.DLTcategory+'-'+theData.orgLevel.orgSkillCode+'-'+theData.orgLevel.orgSkillName,
theData.plantCode,
theData.deptId,
theData.userId,
theData.userName,
theData.course.courseName,
theData.trainingDate.split("T")[0],
theData.startTime,
theData.trainingSite,
theData.lecturer.lecturerCname,
];
}else if(theData.DLTcategory=='入职训'){
theArray = [
theData.DLTcategory,
'',
'',
theData.userId,
theData.userCname,
theData.trainingDays,
theData.trainingDate.split("T")[0],
theData.trainingDate.split("T")[1],
'',
'',
];
}else if(theData.DLTcategory=='通识训'){
theArray = [
theData.DLTcategory,
theData.plantCode,
theData.deptId,
theData.userId,
theData.userName,
theData.course.courseName,
theData.trainingDate.split("T")[0],
theData.startTime,
theData.trainingSite,
theData.lecturer.lecturerCname,
];
}else if(theData.DLTcategory=='技能认证训'){
theArray = [
theData.DLTcategory,
theData.plantCode,
theData.deptId,
theData.userId,
theData.userName,
theData.course.courseName,
theData.trainingDate.split("T")[0],
theData.startTime,
theData.trainingSite,
theData.lecturer.lecturerCname,
];
}
excel_array.push(theArray)
// console.log('n',n)
}
console.log('excel_array',excel_array)
const fileName = "TrainingRecord.xlsx";
const sheetname = "Sheet1";
const excel = XLSXS.utils.book_new();
const color = '72baa7'
const fontSize = 11
const fontBond = true
const header = [
[
{v: 'DLTcategory',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},
{v: 'plantCode',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},
{v: 'deptId',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},
{v: 'userId',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},
{v: 'userName',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},
{v: 'courseName',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},
{v: 'trainingDate',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},
{v: 'startTime',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},
{v: 'trainingSite',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},
{v: 'lecturerCname',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},
],
]
excel_array.unshift(...header);// 将定义好的表头添加到 body 中
const sheet = XLSXS.utils.aoa_to_sheet(excel_array);
const cols = [
{ wch: 30 },
{ wch: 15 },
{ wch: 15 },
{ wch: 15 },
{ wch: 15 },
{ wch: 30 },
{ wch: 20 },
{ wch: 20 },
{ wch: 20 },
{ wch: 20 },
];
sheet['!cols'] = cols; // 添加到sheet中
XLSXS.utils.book_append_sheet(excel, sheet, sheetname);
XLSXS.writeFile(excel, fileName);
},
12.引入Echarts
getEcharts() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var dlt_orient_count = this.DLT_data_all.filter(v=>v.DLTcategory=='入职训').length;
var dlt_general_count = this.DLT_data_all.filter(v=>v.DLTcategory=='通识训').length;
var dlt_skill_count = this.DLT_data_all.filter(v=>v.DLTcategory=='技能训').length;
var dlt_level_count = this.DLT_data_all.filter(v=>v.DLTcategory=='技能认证训').length;
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts'
},
tooltip: {},
legend: {
data: ['训练数据']
},
xAxis: {
data: ['入职训', '通识训', '技能训', '技能认证训']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [dlt_orient_count, dlt_general_count, dlt_skill_count, dlt_level_count]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
console.log('option',option)
},
2013
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
