濮阳建设网站,wordpress 分类模板,网站开发播放大视频卡顿,服装网站页面设计需求陈述
由于API是特定单位/特定类别/特定教学方式的数据#xff0c;故汇总数据需要循环请求不同单位/不同类别/不同教学方式。
技术要点
1.axios并发请求 2.JS for循环 3.Vue数组中出现 ob :Observer无法取值问题的解决方法 4.将数据转化为数组 5.一次请求所有数据后故汇总数据需要循环请求不同单位/不同类别/不同教学方式。
技术要点
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个样式
1.axios并发请求
关键点1myDLTMultiData()方法来循环请求 SearchData()。 关键点2axios.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_allthis.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_allthis.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.pageNum1){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给pageNumconsole.log(当前页码, val);this.pageNum val},} 6.设置loading状态
参考链接https://element.eleme.cn/#/zh-CN/component/loading 设置loading层的位置在最外层
div classcontainer-fluid v-loadingloading stylewidth: 100%设置初始状态 loading:false data() {return {loading:false,设置this.loadingfalse GoQuery(myDate, mySystem, category, EmployeeID, courseName, pageNum) {this.loadingtrue;if (mySystem TRS) {this.$store.dispatch(getTrsTrainingTestData, {myDateS: myDate[0],myDateE: myDate[1],mySystem: mySystem,category: category,EmployeeID: EmployeeID,courseName: courseName,pageNum: pageNum,});//设置载入状态,()箭头函数选择VCsetTimeout((){console.log(this,this)this.loadingfalse},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进行分情况展示符合条件就展示不符合就不展示。 trv-foritem in DLT_data_filter:keyitem.listIdvalignmiddlestylecolor: Black; border-color: #e0e0e0; font-size: 15pxv-ifitem.DLTcategory入职训td classcol{{ item.DLTcategory }}/tdtd classcol/tdtd classcol/tdtd classcol{{ item.userId }}/tdtd classcol{{ item.userCname }}/tdtd classcol{{ item.trainingMethod }}/tdtd classcol{{ item.trainingDate.split(T)[0] }}/tdtd classcol/tdtd classcol/tdtd classcol/td/tr9.前端下载数据(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-ifmySystem TRS||mySystem CSOD11.修改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 72baa7const fontSize 11const fontBond trueconst 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);},
