打卡记录导出excel带颜色
This commit is contained in:
parent
717bff01c8
commit
ab88bc38ee
|
|
@ -14,6 +14,7 @@
|
||||||
"codemirror": "5.65.5",
|
"codemirror": "5.65.5",
|
||||||
"core-js": "3.22.8",
|
"core-js": "3.22.8",
|
||||||
"cropperjs": "1.5.12",
|
"cropperjs": "1.5.12",
|
||||||
|
"crypto-browserify": "^3.12.0",
|
||||||
"crypto-js": "4.1.1",
|
"crypto-js": "4.1.1",
|
||||||
"d3": "^7.6.1",
|
"d3": "^7.6.1",
|
||||||
"dagre": "^0.8.5",
|
"dagre": "^0.8.5",
|
||||||
|
|
@ -34,7 +35,8 @@
|
||||||
"vuex": "4.0.2",
|
"vuex": "4.0.2",
|
||||||
"xgplayer": "2.31.6",
|
"xgplayer": "2.31.6",
|
||||||
"xgplayer-hls": "2.5.2",
|
"xgplayer-hls": "2.5.2",
|
||||||
"xlsx": "^0.18.5"
|
"xlsx": "^0.18.5",
|
||||||
|
"xlsx-style": "^0.8.13"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "7.18.2",
|
"@babel/core": "7.18.2",
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
document.write("<script src='config.js?"+new Date().getTime()+"'><\/script>");
|
document.write("<script src='config.js?"+new Date().getTime()+"'><\/script>");
|
||||||
</script>
|
</script>
|
||||||
|
<script type="text/javascript" src="./xlsx.full.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -90,8 +90,10 @@
|
||||||
</el-table-column> -->
|
</el-table-column> -->
|
||||||
<el-table-column label="考勤推测">
|
<el-table-column label="考勤推测">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-tag v-if="scope.row.exception_type==10" type="warning" effect="dark">在岗时间短</el-tag>
|
<span v-if="scope.row.exception_type==10" class="nomalState type1">在岗时间短</span>
|
||||||
<el-tag v-if="scope.row.exception_type==20" type="danger" effect="dark">在岗时间长</el-tag>
|
<span v-if="scope.row.exception_type==20" class="nomalState type2">在岗时间长</span>
|
||||||
|
<span v-if="scope.row.exception_type==30" class="nomalState type3">缺卡</span>
|
||||||
|
<span v-if="scope.row.exception_type==40" class="nomalState type4">加班</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="打卡时间" prop="create_time"></el-table-column>
|
<el-table-column label="打卡时间" prop="create_time"></el-table-column>
|
||||||
|
|
@ -102,6 +104,7 @@
|
||||||
<script>
|
<script>
|
||||||
import config from "@/config"
|
import config from "@/config"
|
||||||
import * as XLSX2 from "xlsx";
|
import * as XLSX2 from "xlsx";
|
||||||
|
import * as XLSX from "xlsx-style";
|
||||||
import { fill } from "lodash";
|
import { fill } from "lodash";
|
||||||
export default {
|
export default {
|
||||||
name: "clock_record",
|
name: "clock_record",
|
||||||
|
|
@ -214,13 +217,10 @@
|
||||||
this.dLoading = false;
|
this.dLoading = false;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let days = new Date(this.query.year, this.query.month , 0).getDate();
|
let days = new Date(this.query.year, this.query.month , 0).getDate();
|
||||||
let weekList = ['姓名','星期'],daysList=['姓名','日期'],titleData = [];
|
let weekList = ['姓名','星期'],daysList=['姓名','日期'],titleData = [];
|
||||||
for(var i = 1;i<= days;i++){
|
for(var i = 1;i<= days;i++){
|
||||||
let weekNum = new Date(this.query.year+'-'+this.query.month+'-'+i).getDay();
|
let weekNum = new Date(this.query.year+'-'+this.query.month+'-'+i).getDay();
|
||||||
// debugger;
|
|
||||||
// console.log(weekNum)
|
|
||||||
let week=that.getDayWeek(weekNum)
|
let week=that.getDayWeek(weekNum)
|
||||||
daysList.push(i);
|
daysList.push(i);
|
||||||
weekList.push(week);
|
weekList.push(week);
|
||||||
|
|
@ -259,9 +259,9 @@
|
||||||
let dateInd = new Date(recordList[j].create_time).getDate();
|
let dateInd = new Date(recordList[j].create_time).getDate();
|
||||||
let dateIndex = parseInt(dateInd);
|
let dateIndex = parseInt(dateInd);
|
||||||
if(recordList[j].type==10){
|
if(recordList[j].type==10){
|
||||||
rowData1[dateIndex+1] = recordList[j].create_time.substring(11,16);
|
rowData1[dateIndex+1] = recordList[j].create_time.substring(11,16)+'&'+recordList[j].exception_type;
|
||||||
}else{
|
}else{
|
||||||
rowData2[dateIndex+1] = recordList[j].create_time.substring(11,16);
|
rowData2[dateIndex+1] = recordList[j].create_time.substring(11,16)+'&'+recordList[j].exception_type;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
tableData.push(rowData1);
|
tableData.push(rowData1);
|
||||||
|
|
@ -269,31 +269,92 @@
|
||||||
}
|
}
|
||||||
let ws = XLSX2.utils.aoa_to_sheet(tableData);
|
let ws = XLSX2.utils.aoa_to_sheet(tableData);
|
||||||
let wb = XLSX2.utils.book_new();
|
let wb = XLSX2.utils.book_new();
|
||||||
|
ws['!freeze'] = {
|
||||||
//字体样式
|
xSplit: "1", //冻结列
|
||||||
// const font = {
|
ySplit: "1", //冻结行
|
||||||
// name: '宋体',
|
topLeftCell: "B2", //在未冻结区域的左上角显示的单元格，默认为第一个未冻结的单元格
|
||||||
// sz: 12,
|
state: "frozen"
|
||||||
// bold: true,
|
}
|
||||||
// color: { rgb: '00000000' },
|
for(let key in ws){
|
||||||
// }
|
if(key.indexOf('!')!==0){
|
||||||
//设置文字居中
|
if(key==='A1'){
|
||||||
// const alignment = {
|
ws[key].s = {
|
||||||
// horizontal: 'center',
|
font: {
|
||||||
// vertical: 'center',
|
sz: "12",
|
||||||
// }
|
bold: true
|
||||||
// ws['B1'].s = {
|
},
|
||||||
// font,
|
alignment: {
|
||||||
// alignment,
|
horizontal: "center", vertical: "center"
|
||||||
// fill:{
|
},
|
||||||
// bgColor:{
|
fill: {
|
||||||
// indexed:64
|
bgColor: { rgb: "FFFFAA00" },
|
||||||
// },
|
fgColor: { rgb: "FFFFAA00" }
|
||||||
// fgColor:{
|
}
|
||||||
// rgb:'#FFF000'
|
};
|
||||||
// }
|
}else{
|
||||||
// }
|
let cal = ws[key]['v']+'';
|
||||||
// }
|
let type = null;
|
||||||
|
if(cal.indexOf('&')>-1){
|
||||||
|
ws[key]['v'] = cal.split('&')[0]
|
||||||
|
type = cal.split('&')[1];
|
||||||
|
}
|
||||||
|
if(type!==null&&type!=='null'){
|
||||||
|
console.log('type:'+type)
|
||||||
|
if(type==='10'){//在岗时间短-----黄色
|
||||||
|
ws[key].s = {
|
||||||
|
font: {sz: 10},
|
||||||
|
alignment: { horizontal: 'center', vertical: 'center' },
|
||||||
|
fill: {
|
||||||
|
bgColor: { rgb: "F8DD4E" },
|
||||||
|
fgColor: { rgb: "F8DD4E" },
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}else if(type==='20'){//在岗时间长----红色
|
||||||
|
ws[key]['s'] = {
|
||||||
|
font: {
|
||||||
|
sz: 10,
|
||||||
|
},
|
||||||
|
alignment: { horizontal: 'center', vertical: 'center'},
|
||||||
|
fill: {
|
||||||
|
bgColor: { rgb: "FF0000" },
|
||||||
|
fgColor: { rgb: "FF0000" }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}else if(type==='30'){//缺卡-----橙色
|
||||||
|
ws[key]['s'] = {
|
||||||
|
font: {
|
||||||
|
sz: 10,
|
||||||
|
},
|
||||||
|
alignment: { horizontal: 'center', vertical: 'center'},
|
||||||
|
fill: {
|
||||||
|
bgColor: { rgb: "FA8435" },
|
||||||
|
fgColor: { rgb: "FA8435" }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}else if(type==='40'){//加班---蓝色
|
||||||
|
ws[key]['s'] = {
|
||||||
|
font: {
|
||||||
|
sz: 10,
|
||||||
|
},
|
||||||
|
alignment: { horizontal: 'center', vertical: 'center' },
|
||||||
|
fill: {
|
||||||
|
bgColor: { rgb: "44CEF6" },
|
||||||
|
fgColor: { rgb: "44CEF6" }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}else{//正常--无色
|
||||||
|
ws[key]['s'] = {
|
||||||
|
font: {
|
||||||
|
sz: 10,
|
||||||
|
},
|
||||||
|
alignment: { horizontal: 'center', vertical: 'center'},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(ws)
|
||||||
// s 意为 start ，即开始的单元格//r 是 row ，表示行号，从 0 计起//c 是 col ，表示列号，从 0 计起
|
// s 意为 start ，即开始的单元格//r 是 row ，表示行号，从 0 计起//c 是 col ，表示列号，从 0 计起
|
||||||
let cNumber = daysList.length-1;
|
let cNumber = daysList.length-1;
|
||||||
let merge = [{ s: { r: 0, c: 0 }, e: { r: 0, c:cNumber } }];//{ s: { r: 0, c: 0 }, e: { r: 1, c: 0 } },
|
let merge = [{ s: { r: 0, c: 0 }, e: { r: 0, c:cNumber } }];//{ s: { r: 0, c: 0 }, e: { r: 1, c: 0 } },
|
||||||
|
|
@ -302,12 +363,28 @@
|
||||||
i++
|
i++
|
||||||
}
|
}
|
||||||
ws['!merges'] = merge;
|
ws['!merges'] = merge;
|
||||||
|
|
||||||
let closList = new Array(31).fill({wch: 5});
|
let closList = new Array(31).fill({wch: 5});
|
||||||
closList.unshift({wch:8})
|
closList.unshift({wch:8})
|
||||||
closList.unshift({wch:10})
|
closList.unshift({wch:10})
|
||||||
ws['!cols'] = closList;
|
ws['!cols'] = closList;
|
||||||
|
let rows = new Array(500).fill({hpx: 15});
|
||||||
|
rows.unshift({hpx:20})
|
||||||
|
ws['!rows'] = rows; // 添加到sheet中
|
||||||
|
|
||||||
XLSX2.utils.book_append_sheet(wb, ws, chartName); // 工作簿名称
|
XLSX2.utils.book_append_sheet(wb, ws, chartName); // 工作簿名称
|
||||||
XLSX2.writeFile(wb, chartName+'.xlsx'); // 保存的文件名
|
// XLSX2.writeFile(wb, chartName+'.xlsx'); // 保存的文件名
|
||||||
|
var wopts = {
|
||||||
|
bookType: 'xlsx', // 要生成的文件类型
|
||||||
|
bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
|
||||||
|
type: 'binary'
|
||||||
|
};
|
||||||
|
var wbout = XLSX.write(wb, wopts);
|
||||||
|
var blob = new Blob([this.s2ab(wbout)], {
|
||||||
|
type: "application/octet-stream"
|
||||||
|
}); // 字符串转ArrayBuffer
|
||||||
|
// 导出excel文件 如导出后的文件不能打开，请将后缀替换为 .xls
|
||||||
|
this.openDownloadDialog(blob, chartName+`.xlsx`);
|
||||||
that.dLoading = false;
|
that.dLoading = false;
|
||||||
that.ElLoading.close();
|
that.ElLoading.close();
|
||||||
});
|
});
|
||||||
|
|
@ -316,6 +393,28 @@
|
||||||
that.ElLoading.close();
|
that.ElLoading.close();
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
s2ab(s) {
|
||||||
|
var buf = new ArrayBuffer(s.length);
|
||||||
|
var view = new Uint8Array(buf);
|
||||||
|
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
|
||||||
|
return buf;
|
||||||
|
},
|
||||||
|
openDownloadDialog(url, saveName) {
|
||||||
|
if (typeof url == 'object' && url instanceof Blob) {
|
||||||
|
url = URL.createObjectURL(url); // 创建blob地址
|
||||||
|
}
|
||||||
|
var aLink = document.createElement('a');
|
||||||
|
aLink.href = url;
|
||||||
|
aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
|
||||||
|
var event;
|
||||||
|
if (window.MouseEvent) event = new MouseEvent('click');
|
||||||
|
else {
|
||||||
|
event = document.createEvent('MouseEvents');
|
||||||
|
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
|
||||||
|
}
|
||||||
|
aLink.dispatchEvent(event);
|
||||||
|
},
|
||||||
|
|
||||||
getDayWeek(day){
|
getDayWeek(day){
|
||||||
switch(day){
|
switch(day){
|
||||||
case 0:
|
case 0:
|
||||||
|
|
@ -359,3 +458,36 @@
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.nomalState {
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 0 9px;
|
||||||
|
|
||||||
|
height: 24px;
|
||||||
|
line-height: 23px;
|
||||||
|
border-radius: 5px;
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
}
|
||||||
|
.nomalState.type1{
|
||||||
|
color: #F8DD4E;
|
||||||
|
background-color: #f9f7e6;
|
||||||
|
border: 1px solid #f3f0d5;
|
||||||
|
}
|
||||||
|
.nomalState.type2{
|
||||||
|
color: #FF0000;
|
||||||
|
background-color: #f7e7e7;
|
||||||
|
border: 1px solid #fbe0e0;
|
||||||
|
}
|
||||||
|
.nomalState.type3{
|
||||||
|
color: #FA8435;
|
||||||
|
background-color: #fef6ed;
|
||||||
|
border: 1px solid #fde9cc;
|
||||||
|
}
|
||||||
|
.nomalState.type4{
|
||||||
|
color: #44CEF6;
|
||||||
|
background-color: #f0f9fb;
|
||||||
|
border: 1px solid #d2f9ff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -71,6 +71,16 @@ module.exports = defineConfig({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
resolve:{
|
||||||
|
fallback:{
|
||||||
|
fs:false,
|
||||||
|
crypto: require.resolve("crypto-browserify"),
|
||||||
|
stream: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
externals:{
|
||||||
|
'./cptable':'var cptable'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
pluginOptions: {
|
pluginOptions: {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue