图例
1.先下载相关的依赖
npm i -S xlsx
npm i -S file-saver
npm i -S xlsx-style
如果安装完成，启动报错Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx,有两个方案解决
（1）找到node_modules\xlsx-style\dist\cpexcel.js中将
var cpt = require(‘./cpt’ + ‘able’) 修改为var cpt = cptable
（2）vue.config.js中修改配置
module.exports = {
configureWebpack: {
externals: {
‘./cptable’: ‘var cptable’
}
}
}
2.vue文件
<template>
<div class="main-container">
<el-button type="primary" icon="el-icon-document-delete" @click="exportExcel()">导出excel</el-button>
<el-table :data="tableData" style="width:100%" class="work-excel-table" border stripe highlight-current-row
:span-method="arraySpanMethod" :summary-method="getSummaries" show-summary>
<el-table-column label="登记情况">
<el-table-column label="统计表">
<el-table-column label="单位：件">
<el-table-column label="作品类型" width="200">
<el-table-column label="登记情况" width="200">
<el-table-column label show-overflow-tooltip min-width="70">
<template slot-scope="scope">{{ scope.row.columnName1 }}</template>
</el-table-column>
<el-table-column label show-overflow-tooltip min-width="70">
<template slot-scope="scope">{{ scope.row.columnName2 }}</template>
</el-table-column>
<el-table-column label show-overflow-tooltip min-width="60">
<template slot-scope="scope">{{ scope.row.columnName3 }}</template>
</el-table-column>
</el-table-column>
</el-table-column>
<el-table-column label="总计(件)" show-overflow-tooltip min-width="70" prop="sum"></el-table-column>
<el-table-column label="文字" show-overflow-tooltip min-width="50" prop="a">
<template slot-scope="scope">{{ scope.row.anlaysisWorkTypeDTO.a.value }}</template>
</el-table-column>
<el-table-column label="口述" show-overflow-tooltip min-width="50" prop="m">
<template slot-scope="scope">{{ scope.row.anlaysisWorkTypeDTO.m.value }}</template>
</el-table-column>
<el-table-column label="音乐" show-overflow-tooltip min-width="50" prop="b">
<template slot-scope="scope">{{ scope.row.anlaysisWorkTypeDTO.b.value }}</template>
</el-table-column>
<el-table-column label="戏剧" show-overflow-tooltip min-width="50" prop="c">
<template slot-scope="scope">{{ scope.row.anlaysisWorkTypeDTO.c.value }}</template>
</el-table-column>
<el-table-column label="曲艺" show-overflow-tooltip min-width="50" prop="d">
<template slot-scope="scope">{{ scope.row.anlaysisWorkTypeDTO.d.value }}</template>
</el-table-column>
<el-table-column label="舞蹈" show-overflow-tooltip min-width="50" prop="e">
<template slot-scope="scope">{{ scope.row.anlaysisWorkTypeDTO.e.value }}</template>
</el-table-column>
<el-table-column label="杂技艺术" show-overflow-tooltip min-width="70" prop="n">
<template slot-scope="scope">{{ scope.row.anlaysisWorkTypeDTO.n.value }}</template>
</el-table-column>
<el-table-column label="美术" show-overflow-tooltip min-width="50" prop="f">
<template slot-scope="scope">{{ scope.row.anlaysisWorkTypeDTO.f.value }}</template>
</el-table-column>
<el-table-column label="工程设计图、产品设计图" show-overflow-tooltip min-width="100" prop="j">
<template slot-scope="scope">{{ scope.row.anlaysisWorkTypeDTO.j.value }}</template>
</el-table-column>
<el-table-column label="建筑" show-overflow-tooltip min-width="50" prop="o">
<template slot-scope="scope">{{ scope.row.anlaysisWorkTypeDTO.o.value }}</template>
</el-table-column>
<el-table-column label="摄影" show-overflow-tooltip min-width="50" prop="g">
<template slot-scope="scope">{{ scope.row.anlaysisWorkTypeDTO.g.value }}</template>
</el-table-column>
<el-table-column label="电影" show-overflow-tooltip min-width="50" prop="h">
<template slot-scope="scope">{{ scope.row.anlaysisWorkTypeDTO.h.value }}</template>
</el-table-column>
<el-table-column label="类电影" show-overflow-tooltip min-width="60" prop="i">
<template slot-scope="scope">{{ scope.row.anlaysisWorkTypeDTO.i.value }}</template>
</el-table-column>
<el-table-column label="地图、示意图" show-overflow-tooltip min-width="100" prop="k">
<template slot-scope="scope">{{ scope.row.anlaysisWorkTypeDTO.k.value }}</template>
</el-table-column>
<el-table-column label="模型" show-overflow-tooltip min-width="50" prop="p">
<template slot-scope="scope">{{ scope.row.anlaysisWorkTypeDTO.p.value }}</template>
</el-table-column>
<el-table-column label="录音制品" show-overflow-tooltip min-width="70" prop="s">
<template slot-scope="scope">{{ scope.row.anlaysisWorkTypeDTO.s.value }}</template>
</el-table-column>
<el-table-column label="录像制品" show-overflow-tooltip min-width="70" prop="v">
<template slot-scope="scope">{{ scope.row.anlaysisWorkTypeDTO.v.value }}</template>
</el-table-column>
<el-table-column label="视听" show-overflow-tooltip min-width="50" prop="t">
<template slot-scope="scope">{{ scope.row.anlaysisWorkTypeDTO.t.value }}</template>
</el-table-column>
<el-table-column label="其他作品" show-overflow-tooltip min-width="80" prop="l">
<template slot-scope="scope">{{ scope.row.anlaysisWorkTypeDTO.l.value }}</template>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>
<script>
import {
chars,
border,
styleBold1,
styleBold2,
styleBold3,
styleText,
styleHead,
styleHeadDiagonal,
saveAs,
getCharCol,
s2ab,
} from "@/assets/js/statisticsReport.js";
import {
getExcelVaules,
transTable,
} from "@/assets/js/workRegisterExcel.js";
import FileSaver from "file-saver";
import XLSX2 from "xlsx";
import XLSX from "xlsx-style";
export default {
name: "",
components: {},
data() {
return {
tableData: [],
sums: [],
invoce_data: { project_name: "统计表" },
wopts: {
bookType: "xlsx",
bookSST: true,
type: "binary",
cellStyles: true,
},
jsono: [
{
登记情况: "统计表",
列头2: "",
列头3: "",
列头4: "",
列头5: "",
列头6: "",
列头7: "",
列头8: "",
列头9: "",
列头10: "",
列头11: "",
列头12: "",
列头13: "",
列头14: "",
列头15: "",
列头16: "",
列头17: "",
列头18: "",
列头19: "",
列头20: "",
列头21: "",
列头22: "",
列头23: "",
},
{
登记情况: "",
列头2: "",
列头3: "",
列头4: "",
列头5: "",
列头6: "",
列头7: "",
列头8: "",
列头9: "",
列头10: "",
列头11: "",
列头12: "",
列头13: "",
列头14: "",
列头15: "",
列头16: "",
列头17: "",
列头18: "",
列头19: "",
列头20: "",
列头21: "",
列头22: "",
列头23: "单元:件",
},
{
登记情况: "作品类别\n登记情况",
列头2: "",
列头3: "",
列头4: "总计(件)",
列头5: "文字",
列头6: "口述",
列头7: "音乐",
列头8: "戏剧",
列头9: "曲艺",
列头10: "舞蹈",
列头11: "杂技艺术",
列头12: "美术",
列头13: "工程设计图、产品设计图",
列头14: "建筑",
列头15: "摄影",
列头16: "电影",
列头17: "类电影",
列头18: "地图、示意图",
列头19: "模型",
列头20: "录音制品",
列头21: "录像制品",
列头22: "视听",
列头23: "其他作品",
},
],
};
},
created() {
getExcelVaules(this);
},
mounted() { },
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
if (rowIndex === 0 && columnIndex === 0) {
return [3, 1];
} else if (rowIndex === 0 && columnIndex === 1) {
return [1, 2];
} else if (rowIndex === 1 && columnIndex === 1) {
return [1, 2];
} else if (rowIndex === 2 && columnIndex === 1) {
return [1, 2];
} else if (rowIndex === 3 && columnIndex === 0) {
return [6, 1];
} else if (rowIndex === 3 && columnIndex === 1) {
return [1, 2];
} else if (rowIndex === 4 && columnIndex === 1) {
return [5, 1];
} else if (rowIndex === 4 && columnIndex === 2) {
return [1, 1];
} else if (rowIndex === 5 && columnIndex === 2) {
return [1, 1];
} else if (rowIndex === 6 && columnIndex === 2) {
return [1, 1];
} else if (rowIndex === 7 && columnIndex === 2) {
return [1, 1];
} else if (rowIndex === 8 && columnIndex === 2) {
return [1, 1];
} else if (rowIndex === 9 && columnIndex === 0) {
return [6, 1];
} else if (rowIndex === 9 && columnIndex === 1) {
return [1, 2];
} else if (rowIndex === 10 && columnIndex === 1) {
return [5, 1];
} else if (rowIndex === 10 && columnIndex === 2) {
return [1, 1];
} else if (rowIndex === 11 && columnIndex === 2) {
return [1, 1];
} else if (rowIndex === 12 && columnIndex === 2) {
return [1, 1];
} else if (rowIndex === 13 && columnIndex === 2) {
return [1, 1];
} else if (rowIndex === 14 && columnIndex === 2) {
return [1, 1];
} else {
return [0, 0];
}
}
},
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = "总计受理量";
return;
}
if (index === 1 || index === 2) {
sums[index] = "";
return;
}
//受理状态累计总和
let values;
if (index == 3) {
values = data.map(function (item) {
if (item["columnName2"] == "受理") {
let obj = item[column.property];
if (obj) {
return obj;
} else {
return 0;
}
}
});
} else {
values = data.map(function (item) {
console.log(column.property)
if (item["columnName2"] == "受理") {
let obj = item["anlaysisWorkTypeDTO"][column.property];
if (obj) {
return obj.value;
}
}
});
}
if (!values.every((value) => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += "";
} else {
sums[index] = "";
}
});
this.sums = sums;
return sums;
},
exportExcel(type) {
let sums = this.sums;
transTable(this);
let json = this.jsono;
var tmpdata = json[0];
json.unshift({});
var keyMap = []; //获取keys
for (var k in tmpdata) {
keyMap.push(k);
json[0][k] = k;
}
var tmpdata = []; //用来保存转换好的json
json
.map((v, i) =>
keyMap.map((k, j) =>
Object.assign(
{},
{
v: v[k],
position:
(j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) +
(i + 1),
}
)
)
)
.reduce((prev, next) => prev.concat(next))
.forEach(
(v, i) =>
(tmpdata[v.position] = {
v: v.v,
})
);
var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10
tmpdata["!merges"] = [
{
s: { c: 0, r: 0 }, //开始 A1
e: { c: 22, r: 0 }, //结束S1
},
{
s: { c: 0, r: 1 }, //开始 A2
e: { c: 22, r: 1 }, //结束S2
},
{
s: { c: 0, r: 3 },
e: { c: 2, r: 3 },
},
{
s: { c: 1, r: 4 },
e: { c: 2, r: 4 },
},
{
s: { c: 1, r: 5 },
e: { c: 2, r: 5 },
},
{
s: { c: 1, r: 6 },
e: { c: 2, r: 6 },
},
{
s: { c: 1, r: 7 },
e: { c: 2, r: 7 },
},
{
s: { c: 1, r: 8 },
e: { c: 1, r: 12 },
},
{
s: { c: 1, r: 13 },
e: { c: 2, r: 13 },
},
{
s: { c: 1, r: 14 },
e: { c: 1, r: 18 },
},
{
s: { c: 0, r: 21 },
e: { c: 2, r: 21 },
},
]; //合并单元格
//第一行样式
tmpdata["A1"].s = styleBold1;
//第二行样式
for (let index = 0; index < 23; index++) {
tmpdata[chars[index] + "2"].s = styleBold2;
}
//第三行样式
tmpdata["S3"].s = styleBold3;
//第四行样式
tmpdata["A4"].s = styleHeadDiagonal;
for (let index = 1; index < 23; index++) {
tmpdata[chars[index] + 4].s = styleHead;
}
//剩余行样式
if (this.jsono.length > 4) {
for (let i = 5; i <= this.jsono.length; i++) {
for (let index = 0; index < 23; index++) {
tmpdata[chars[index] + i].s = styleText;
}
}
}
tmpdata["!cols"] = [
//设置列宽度
{ wpx: 110 }, //
{ wpx: 90 }, //
{ wpx: 110 }, //
{ wpx: 60 }, //
{ wpx: 50 }, //
{ wpx: 50 }, //
{ wpx: 50 }, //
{ wpx: 50 }, //
{ wpx: 50 }, //
{ wpx: 50 }, //
{ wpx: 70 }, //
{ wpx: 50 }, //
{ wpx: 100 }, //
{ wpx: 50 }, //
{ wpx: 50 }, //
{ wpx: 50 }, //
{ wpx: 80 }, //
{ wpx: 100 }, //
{ wpx: 50 }, //
{ wpx: 70 }, //
{ wpx: 70 }, //
{ wpx: 70 }, //
{ wpx: 70 }, //
];
tmpdata["!rows"] = [
//设置行高度
{ hpx: 110 }, //
{ hpx: 110 }, //
{ hpx: 110 }, //
{ hpx: 50 }, //
];
var tmpWB = {
SheetNames: ["统计表"], //保存的表标题
Sheets: {
统计表: Object.assign(
{},
tmpdata, //内容
{
"!ref": outputPos[0] + ":" + outputPos[outputPos.length - 1], //设置填充区域
}
),
},
};
var tmpDown = new Blob(
[
s2ab(
XLSX.write(
tmpWB,
{
bookType: type == undefined ? "xlsx" : type,
bookSST: false,
type: "binary",
} //这里的数据是用来定义导出的格式类型
)
),
],
{
type: "",
}
);
saveAs(
tmpDown,
this.invoce_data.project_name +
"." +
(this.wopts.bookType == "biff2" ? "xls" : this.wopts.bookType)
);
},
search() {
getExcelVaules(this);
},
clear() {
this.form = {
startDate: "",
endDate: "",
};
},
},
};
</script>
<style lang='scss'>
.work-excel-table {
&.el-table thead.is-group th {
// background: none;
background: #e9ecef;
}
&.el-table--border th {
border-bottom: 1px solid #d7d7d7;
}
&.el-table--border thead.is-group tr:first-of-type th {
border-bottom: 0;
}
&.el-table thead.is-group tr:first-of-type,
&.el-table thead.is-group tr:nth-child(2) {
th {
.cell {
text-align: center;
font-size: 17px;
color: #333;
}
}
}
&.el-table thead.is-group tr:first-of-type {
th .cell {
padding-top: 12px;
height: 40px;
line-height: 40px !important;
}
}
&.el-table thead.is-group tr:nth-child(2) {
th .cell {
padding-bottom: 40px;
}
}
&.el-table thead.is-group tr:nth-child(3) {
th {
.cell {
text-align: right;
color: #333;
}
}
}
&.el-table thead.is-group tr:nth-child(4) th:first-of-type {
border-bottom: none;
background: #e9ecef;
.cell {
text-align: right;
padding-right: 22px;
}
}
&.el-table thead.is-group tr:last-of-type {
display: none;
}
&.el-table thead.is-group>tr:nth-child(5) th:first-of-type {
.cell {
padding-left: 22px;
text-align: left;
}
}
&.el-table thead.is-group tr:nth-child(4) th:first-of-type:before {
content: "";
position: absolute;
width: 1px;
height: 200px;
/*这里需要自己调整，根据td的宽度和高度*/
top: 0;
left: 0;
background-color: grey;
opacity: 0.3;
display: block;
transform: rotate(-76deg);
/*这里需要自己调整，根据线的位置*/
transform-origin: top;
-ms-transform: rotate(-76deg);
/*这里需要自己调整，根据线的位置*/
-ms-transform-origin: top;
}
&.el-table thead.is-group>tr:nth-child(5) th:first-of-type:before {
content: "";
position: absolute;
width: 1px;
height: 233px;
/*这里需要自己调整，根据td的宽度和高度*/
bottom: 0;
right: 0;
background-color: grey;
opacity: 0.3;
display: block;
transform: rotate(-76deg);
/*这里需要自己调整，根据线的位置*/
transform-origin: bottom;
-ms-transform: rotate(-76deg);
/*这里需要自己调整，根据线的位置*/
-ms-transform-origin: bottom;
}
&.el-table .cell {
text-align: center;
}
.el-table__footer-wrapper table tbody tr {
position: relative;
background-color: #f5f7fa;
&>td:nth-child(1) {
border-right: 0 !important;
position: absolute;
left: 101px;
z-index: 100;
}
&>td:nth-child(2) {
border-bottom: 0 !important;
border-right: 0 !important;
}
}
}
</style>
3.workRegisterExcel.js
//获取登记情况统计
export const getExcelVaules = (_this) => {
let res = {
"data": {
"code": 200,
"msg": "成功！",
"data": {
"commonAccept": {
"columnName": "数据库A-受理",
"anlaysisWorkTypeDTO": {
"h": {
"key": null,
"code": 11,
"value": 0
},
"k": {
"key": null,
"code": 14,
"value": 0
},
"s": {
"key": null,
"code": 16,
"value": 0
},
"o": {
"key": null,
"code": 9,
"value": 0
},
"f": {
"key": null,
"code": 8,
"value": 4
},
"i": {
"key": null,
"code": 12,
"value": 0
},
"a": {
"key": null,
"code": 1,
"value": 0
},
"l": {
"key": null,
"code": 18,
"value": 0
},
"c": {
"key": null,
"code": 4,
"value": 0
},
"p": {
"key": null,
"code": 15,
"value": 0
},
"d": {
"key": null,
"code": 5,
"value": 0
},
"b": {
"key": null,
"code": 3,
"value": 0
},
"v": {
"key": null,
"code": 17,
"value": 0
},
"n": {
"key": null,
"code": 7,
"value": 0
},
"t": {
"key": null,
"code": 19,
"value": 0
},
"g": {
"key": null,
"code": 10,
"value": 0
},
"e": {
"key": null,
"code": 6,
"value": 0
},
"j": {
"key": null,
"code": 13,
"value": 0
},
"m": {
"key": null,
"code": 2,
"value": 0
}
}
},
"commonApprove": {
"columnName": "数据库A-审批通过",
"anlaysisWorkTypeDTO": {
"h": {
"key": null,
"code": 11,
"value": 0
},
"k": {
"key": null,
"code": 14,
"value": 0
},
"s": {
"key": null,
"code": 16,
"value": 0
},
"o": {
"key": null,
"code": 9,
"value": 0
},
"f": {
"key": null,
"code": 8,
"value": 0
},
"i": {
"key": null,
"code": 12,
"value": 0
},
"a": {
"key": null,
"code": 1,
"value": 0
},
"l": {
"key": null,
"code": 18,
"value": 0
},
"c": {
"key": null,
"code": 4,
"value": 0
},
"p": {
"key": null,
"code": 15,
"value": 0
},
"d": {
"key": null,
"code": 5,
"value": 0
},
"b": {
"key": null,
"code": 3,
"value": 0
},
"v": {
"key": null,
"code": 17,
"value": 0
},
"n": {
"key": null,
"code": 7,
"value": 0
},
"t": {
"key": null,
"code": 19,
"value": 0
},
"g": {
"key": null,
"code": 10,
"value": 0
},
"e": {
"key": null,
"code": 6,
"value": 0
},
"j": {
"key": null,
"code": 13,
"value": 0
},
"m": {
"key": null,
"code": 2,
"value": 0
}
}
},
"commonNopass": {
"columnName": "数据库A-不予通过",
"anlaysisWorkTypeDTO": {
"h": {
"key": null,
"code": 11,
"value": 0
},
"k": {
"key": null,
"code": 14,
"value": 0
},
"s": {
"key": null,
"code": 16,
"value": 0
},
"o": {
"key": null,
"code": 9,
"value": 0
},
"f": {
"key": null,
"code": 8,
"value": 0
},
"i": {
"key": null,
"code": 12,
"value": 0
},
"a": {
"key": null,
"code": 1,
"value": 0
},
"l": {
"key": null,
"code": 18,
"value": 0
},
"c": {
"key": null,
"code": 4,
"value": 0
},
"p": {
"key": null,
"code": 15,
"value": 0
},
"d": {
"key": null,
"code": 5,
"value": 0
},
"b": {
"key": null,
"code": 3,
"value": 0
},
"v": {
"key": null,
"code": 17,
"value": 0
},
"n": {
"key": null,
"code": 7,
"value": 0
},
"t": {
"key": null,
"code": 19,
"value": 0
},
"g": {
"key": null,
"code": 10,
"value": 0
},
"e": {
"key": null,
"code": 6,
"value": 0
},
"j": {
"key": null,
"code": 13,
"value": 0
},
"m": {
"key": null,
"code": 2,
"value": 0
}
}
},
"otherAccept": {
"columnName": "数据库B-受理",
"anlaysisWorkTypeDTO": {
"h": {
"key": null,
"code": 11,
"value": 0
},
"k": {
"key": null,
"code": 14,
"value": 0
},
"s": {
"key": null,
"code": 16,
"value": 0
},
"o": {
"key": null,
"code": 9,
"value": 0
},
"f": {
"key": null,
"code": 8,
"value": 0
},
"i": {
"key": null,
"code": 12,
"value": 0
},
"a": {
"key": null,
"code": 1,
"value": 0
},
"l": {
"key": null,
"code": 18,
"value": 0
},
"c": {
"key": null,
"code": 4,
"value": 0
},
"p": {
"key": null,
"code": 15,
"value": 0
},
"d": {
"key": null,
"code": 5,
"value": 0
},
"b": {
"key": null,
"code": 3,
"value": 0
},
"v": {
"key": null,
"code": 17,
"value": 0
},
"n": {
"key": null,
"code": 7,
"value": 0
},
"t": {
"key": null,
"code": 19,
"value": 0
},
"g": {
"key": null,
"code": 10,
"value": 0
},
"e": {
"key": null,
"code": 6,
"value": 0
},
"j": {
"key": null,
"code": 13,
"value": 0
},
"m": {
"key": null,
"code": 2,
"value": 0
}
}
},
"otherApproveCancel": {
"columnName": "数据库B-审批通过-1队",
"anlaysisWorkTypeDTO": {
"h": {
"key": null,
"code": 11,
"value": 0
},
"k": {
"key": null,
"code": 14,
"value": 0
},
"s": {
"key": null,
"code": 16,
"value": 0
},
"o": {
"key": null,
"code": 9,
"value": 0
},
"f": {
"key": null,
"code": 8,
"value": 0
},
"i": {
"key": null,
"code": 12,
"value": 0
},
"a": {
"key": null,
"code": 1,
"value": 0
},
"l": {
"key": null,
"code": 18,
"value": 0
},
"c": {
"key": null,
"code": 4,
"value": 0
},
"p": {
"key": null,
"code": 15,
"value": 0
},
"d": {
"key": null,
"code": 5,
"value": 0
},
"b": {
"key": null,
"code": 3,
"value": 0
},
"v": {
"key": null,
"code": 17,
"value": 0
},
"n": {
"key": null,
"code": 7,
"value": 0
},
"t": {
"key": null,
"code": 19,
"value": 0
},
"g": {
"key": null,
"code": 10,
"value": 0
},
"e": {
"key": null,
"code": 6,
"value": 0
},
"j": {
"key": null,
"code": 13,
"value": 0
},
"m": {
"key": null,
"code": 2,
"value": 0
}
}
},
"otherApproveChange": {
"columnName": "数据库B-审批通过-2队",
"anlaysisWorkTypeDTO": {
"h": {
"key": null,
"code": 11,
"value": 0
},
"k": {
"key": null,
"code": 14,
"value": 0
},
"s": {
"key": null,
"code": 16,
"value": 0
},
"o": {
"key": null,
"code": 9,
"value": 0
},
"f": {
"key": null,
"code": 8,
"value": 0
},
"i": {
"key": null,
"code": 12,
"value": 0
},
"a": {
"key": null,
"code": 1,
"value": 0
},
"l": {
"key": null,
"code": 18,
"value": 0
},
"c": {
"key": null,
"code": 4,
"value": 0
},
"p": {
"key": null,
"code": 15,
"value": 0
},
"d": {
"key": null,
"code": 5,
"value": 0
},
"b": {
"key": null,
"code": 3,
"value": 0
},
"v": {
"key": null,
"code": 17,
"value": 0
},
"n": {
"key": null,
"code": 7,
"value": 0
},
"t": {
"key": null,
"code": 19,
"value": 0
},
"g": {
"key": null,
"code": 10,
"value": 0
},
"e": {
"key": null,
"code": 6,
"value": 0
},
"j": {
"key": null,
"code": 13,
"value": 0
},
"m": {
"key": null,
"code": 2,
"value": 0
}
}
},
"otherApprovePermit": {
"columnName": "数据库B-审批通过-3队",
"anlaysisWorkTypeDTO": {
"h": {
"key": null,
"code": 11,
"value": 0
},
"k": {
"key": null,
"code": 14,
"value": 0
},
"s": {
"key": null,
"code": 16,
"value": 0
},
"o": {
"key": null,
"code": 9,
"value": 0
},
"f": {
"key": null,
"code": 8,
"value": 0
},
"i": {
"key": null,
"code": 12,
"value": 0
},
"a": {
"key": null,
"code": 1,
"value": 0
},
"l": {
"key": null,
"code": 18,
"value": 0
},
"c": {
"key": null,
"code": 4,
"value": 0
},
"p": {
"key": null,
"code": 15,
"value": 0
},
"d": {
"key": null,
"code": 5,
"value": 0
},
"b": {
"key": null,
"code": 3,
"value": 0
},
"v": {
"key": null,
"code": 17,
"value": 0
},
"n": {
"key": null,
"code": 7,
"value": 0
},
"t": {
"key": null,
"code": 19,
"value": 0
},
"g": {
"key": null,
"code": 10,
"value": 0
},
"e": {
"key": null,
"code": 6,
"value": 0
},
"j": {
"key": null,
"code": 13,
"value": 0
},
"m": {
"key": null,
"code": 2,
"value": 0
}
}
},
"otherApproveTransfer": {
"columnName": "数据库B-审批通过-4队",
"anlaysisWorkTypeDTO": {
"h": {
"key": null,
"code": 11,
"value": 0
},
"k": {
"key": null,
"code": 14,
"value": 0
},
"s": {
"key": null,
"code": 16,
"value": 0
},
"o": {
"key": null,
"code": 9,
"value": 0
},
"f": {
"key": null,
"code": 8,
"value": 0
},
"i": {
"key": null,
"code": 12,
"value": 0
},
"a": {
"key": null,
"code": 1,
"value": 0
},
"l": {
"key": null,
"code": 18,
"value": 0
},
"c": {
"key": null,
"code": 4,
"value": 0
},
"p": {
"key": null,
"code": 15,
"value": 0
},
"d": {
"key": null,
"code": 5,
"value": 0
},
"b": {
"key": null,
"code": 3,
"value": 0
},
"v": {
"key": null,
"code": 17,
"value": 0
},
"n": {
"key": null,
"code": 7,
"value": 0
},
"t": {
"key": null,
"code": 19,
"value": 0
},
"g": {
"key": null,
"code": 10,
"value": 0
},
"e": {
"key": null,
"code": 6,
"value": 0
},
"j": {
"key": null,
"code": 13,
"value": 0
},
"m": {
"key": null,
"code": 2,
"value": 0
}
}
},
"otherApproveReissue": {
"columnName": "数据库B-审批通过-5队",
"anlaysisWorkTypeDTO": {
"h": {
"key": null,
"code": 11,
"value": 0
},
"k": {
"key": null,
"code": 14,
"value": 0
},
"s": {
"key": null,
"code": 16,
"value": 0
},
"o": {
"key": null,
"code": 9,
"value": 0
},
"f": {
"key": null,
"code": 8,
"value": 0
},
"i": {
"key": null,
"code": 12,
"value": 0
},
"a": {
"key": null,
"code": 1,
"value": 0
},
"l": {
"key": null,
"code": 18,
"value": 0
},
"c": {
"key": null,
"code": 4,
"value": 0
},
"p": {
"key": null,
"code": 15,
"value": 0
},
"d": {
"key": null,
"code": 5,
"value": 0
},
"b": {
"key": null,
"code": 3,
"value": 0
},
"v": {
"key": null,
"code": 17,
"value": 0
},
"n": {
"key": null,
"code": 7,
"value": 0
},
"t": {
"key": null,
"code": 19,
"value": 0
},
"g": {
"key": null,
"code": 10,
"value": 0
},
"e": {
"key": null,
"code": 6,
"value": 0
},
"j": {
"key": null,
"code": 13,
"value": 0
},
"m": {
"key": null,
"code": 2,
"value": 0
}
}
},
"searchAccept": {
"columnName": "数据库C-受理",
"anlaysisWorkTypeDTO": {
"h": {
"key": null,
"code": 11,
"value": 0
},
"k": {
"key": null,
"code": 14,
"value": 0
},
"s": {
"key": null,
"code": 16,
"value": 0
},
"o": {
"key": null,
"code": 9,
"value": 0
},
"f": {
"key": null,
"code": 8,
"value": 0
},
"i": {
"key": null,
"code": 12,
"value": 0
},
"a": {
"key": null,
"code": 1,
"value": 0
},
"l": {
"key": null,
"code": 18,
"value": 0
},
"c": {
"key": null,
"code": 4,
"value": 0
},
"p": {
"key": null,
"code": 15,
"value": 0
},
"d": {
"key": null,
"code": 5,
"value": 0
},
"b": {
"key": null,
"code": 3,
"value": 0
},
"v": {
"key": null,
"code": 17,
"value": 0
},
"n": {
"key": null,
"code": 7,
"value": 0
},
"t": {
"key": null,
"code": 19,
"value": 0
},
"g": {
"key": null,
"code": 10,
"value": 0
},
"e": {
"key": null,
"code": 6,
"value": 0
},
"j": {
"key": null,
"code": 13,
"value": 0
},
"m": {
"key": null,
"code": 2,
"value": 0
}
}
},
"searchApproveCommon": {
"columnName": "数据库C-审批通过-1队",
"anlaysisWorkTypeDTO": {
"h": {
"key": null,
"code": 11,
"value": 0
},
"k": {
"key": null,
"code": 14,
"value": 0
},
"s": {
"key": null,
"code": 16,
"value": 0
},
"o": {
"key": null,
"code": 9,
"value": 0
},
"f": {
"key": null,
"code": 8,
"value": 0
},
"i": {
"key": null,
"code": 12,
"value": 0
},
"a": {
"key": null,
"code": 1,
"value": 0
},
"l": {
"key": null,
"code": 18,
"value": 0
},
"c": {
"key": null,
"code": 4,
"value": 0
},
"p": {
"key": null,
"code": 15,
"value": 0
},
"d": {
"key": null,
"code": 5,
"value": 0
},
"b": {
"key": null,
"code": 3,
"value": 0
},
"v": {
"key": null,
"code": 17,
"value": 0
},
"n": {
"key": null,
"code": 7,
"value": 0
},
"t": {
"key": null,
"code": 19,
"value": 0
},
"g": {
"key": null,
"code": 10,
"value": 0
},
"e": {
"key": null,
"code": 6,
"value": 0
},
"j": {
"key": null,
"code": 13,
"value": 0
},
"m": {
"key": null,
"code": 2,
"value": 0
}
}
},
"searchApproveChange": {
"columnName": "数据库C-审批通过-2队",
"anlaysisWorkTypeDTO": {
"h": {
"key": null,
"code": 11,
"value": 0
},
"k": {
"key": null,
"code": 14,
"value": 0
},
"s": {
"key": null,
"code": 16,
"value": 0
},
"o": {
"key": null,
"code": 9,
"value": 0
},
"f": {
"key": null,
"code": 8,
"value": 0
},
"i": {
"key": null,
"code": 12,
"value": 0
},
"a": {
"key": null,
"code": 1,
"value": 0
},
"l": {
"key": null,
"code": 18,
"value": 0
},
"c": {
"key": null,
"code": 4,
"value": 0
},
"p": {
"key": null,
"code": 15,
"value": 0
},
"d": {
"key": null,
"code": 5,
"value": 0
},
"b": {
"key": null,
"code": 3,
"value": 0
},
"v": {
"key": null,
"code": 17,
"value": 0
},
"n": {
"key": null,
"code": 7,
"value": 0
},
"t": {
"key": null,
"code": 19,
"value": 0
},
"g": {
"key": null,
"code": 10,
"value": 0
},
"e": {
"key": null,
"code": 6,
"value": 0
},
"j": {
"key": null,
"code": 13,
"value": 0
},
"m": {
"key": null,
"code": 2,
"value": 0
}
}
},
"searchApproveTransfer": {
"columnName": "数据库C-审批通过-3队",
"anlaysisWorkTypeDTO": {
"h": {
"key": null,
"code": 11,
"value": 0
},
"k": {
"key": null,
"code": 14,
"value": 0
},
"s": {
"key": null,
"code": 16,
"value": 0
},
"o": {
"key": null,
"code": 9,
"value": 0
},
"f": {
"key": null,
"code": 8,
"value": 0
},
"i": {
"key": null,
"code": 12,
"value": 0
},
"a": {
"key": null,
"code": 1,
"value": 0
},
"l": {
"key": null,
"code": 18,
"value": 0
},
"c": {
"key": null,
"code": 4,
"value": 0
},
"p": {
"key": null,
"code": 15,
"value": 0
},
"d": {
"key": null,
"code": 5,
"value": 0
},
"b": {
"key": null,
"code": 3,
"value": 0
},
"v": {
"key": null,
"code": 17,
"value": 0
},
"n": {
"key": null,
"code": 7,
"value": 0
},
"t": {
"key": null,
"code": 19,
"value": 0
},
"g": {
"key": null,
"code": 10,
"value": 0
},
"e": {
"key": null,
"code": 6,
"value": 0
},
"j": {
"key": null,
"code": 13,
"value": 0
},
"m": {
"key": null,
"code": 2,
"value": 0
}
}
},
"searchApprovePermit": {
"columnName": "数据库C-审批通过-4队",
"anlaysisWorkTypeDTO": {
"h": {
"key": null,
"code": 11,
"value": 0
},
"k": {
"key": null,
"code": 14,
"value": 0
},
"s": {
"key": null,
"code": 16,
"value": 0
},
"o": {
"key": null,
"code": 9,
"value": 0
},
"f": {
"key": null,
"code": 8,
"value": 0
},
"i": {
"key": null,
"code": 12,
"value": 0
},
"a": {
"key": null,
"code": 1,
"value": 0
},
"l": {
"key": null,
"code": 18,
"value": 0
},
"c": {
"key": null,
"code": 4,
"value": 0
},
"p": {
"key": null,
"code": 15,
"value": 0
},
"d": {
"key": null,
"code": 5,
"value": 0
},
"b": {
"key": null,
"code": 3,
"value": 0
},
"v": {
"key": null,
"code": 17,
"value": 0
},
"n": {
"key": null,
"code": 7,
"value": 0
},
"t": {
"key": null,
"code": 19,
"value": 0
},
"g": {
"key": null,
"code": 10,
"value": 0
},
"e": {
"key": null,
"code": 6,
"value": 0
},
"j": {
"key": null,
"code": 13,
"value": 0
},
"m": {
"key": null,
"code": 2,
"value": 0
}
}
},
"searchApproveReissue": {
"columnName": "数据库C-审批通过-5队",
"anlaysisWorkTypeDTO": {
"h": {
"key": null,
"code": 11,
"value": 0
},
"k": {
"key": null,
"code": 14,
"value": 0
},
"s": {
"key": null,
"code": 16,
"value": 0
},
"o": {
"key": null,
"code": 9,
"value": 0
},
"f": {
"key": null,
"code": 8,
"value": 0
},
"i": {
"key": null,
"code": 12,
"value": 0
},
"a": {
"key": null,
"code": 1,
"value": 0
},
"l": {
"key": null,
"code": 18,
"value": 0
},
"c": {
"key": null,
"code": 4,
"value": 0
},
"p": {
"key": null,
"code": 15,
"value": 0
},
"d": {
"key": null,
"code": 5,
"value": 0
},
"b": {
"key": null,
"code": 3,
"value": 0
},
"v": {
"key": null,
"code": 17,
"value": 0
},
"n": {
"key": null,
"code": 7,
"value": 0
},
"t": {
"key": null,
"code": 19,
"value": 0
},
"g": {
"key": null,
"code": 10,
"value": 0
},
"e": {
"key": null,
"code": 6,
"value": 0
},
"j": {
"key": null,
"code": 13,
"value": 0
},
"m": {
"key": null,
"code": 2,
"value": 0
}
}
},
"total": null
}
}
}
_this.tableData = [];
if (res.data.code == 200 && res.data.data) {
for (let tag in res.data.data) {
if (tag != 'total') {
let arr = res.data.data[tag]['columnName'].split('-');
let obj = res.data.data[tag]['anlaysisWorkTypeDTO'];
let sum = obj.a.value + obj.m.value + obj.b.value + obj.c.value + obj.d.value + obj.e.value + obj.n.value + obj.f.value + obj.j.value + obj.o.value + obj.g.value + obj.h.value + obj.i.value + obj.k.value + obj.p.value + obj.s.value + obj.v.value + obj.t.value + obj.l.value;
_this.tableData.push({
columnName1: arr[0],
columnName2: arr[1],
columnName3: arr[2] ? arr[2] : arr[1],
anlaysisWorkTypeDTO: res.data.data[tag]['anlaysisWorkTypeDTO'],
sum: sum
});
}
}
}
}
//导出数据转换
export const transTable = (_this) => {
_this.jsono = [
{
登记情况: "登记情况统计表",
列头2: "",
列头3: "",
列头4: "",
列头5: "",
列头6: "",
列头7: "",
列头8: "",
列头9: "",
列头10: "",
列头11: "",
列头12: "",
列头13: "",
列头14: "",
列头15: "",
列头16: "",
列头17: "",
列头18: "",
列头19: "",
列头20: "",
列头21: "",
列头22: "",
列头23: ""
},
{
登记情况: "",
列头2: "",
列头3: "",
列头4: "",
列头5: "",
列头6: "",
列头7: "",
列头8: "",
列头9: "",
列头10: "",
列头11: "",
列头12: "",
列头13: "",
列头14: "",
列头15: "",
列头16: "",
列头17: "",
列头18: "",
列头19: "",
列头20: "",
列头21: "",
列头22: "",
列头23: "单元:件"
},
{
登记情况: "作品类别\n登记情况",
列头2: "",
列头3: "",
列头4: "总计(件)",
列头5: "文字",
列头6: "口述",
列头7: "音乐",
列头8: "戏剧",
列头9: "曲艺",
列头10: "舞蹈",
列头11: "杂技艺术",
列头12: "美术",
列头13: "工程设计图、产品设计图",
列头14: "建筑",
列头15: "摄影",
列头16: "电影",
列头17: "类电影",
列头18: "地图、示意图",
列头19: "模型",
列头20: "录音制品",
列头21: "录像制品",
列头22: "视听",
列头23: "其他作品",
}
]
let arrData = _this.tableData;
for (let i = 0; i < arrData.length; i++) {
let obj = arrData[i].anlaysisWorkTypeDTO;
_this.jsono.push({
"登记情况": arrData[i].columnName1,
列头2: arrData[i].columnName2,
列头3: arrData[i].columnName3,
列头4: arrData[i].sum,
列头5: obj.a.value,
列头6: obj.m.value,
列头7: obj.b.value,
列头8: obj.c.value,
列头9: obj.d.value,
列头10: obj.e.value,
列头11: obj.n.value,
列头12: obj.f.value,
列头13: obj.j.value,
列头14: obj.o.value,
列头15: obj.g.value,
列头16: obj.h.value,
列头17: obj.i.value,
列头18: obj.k.value,
列头19: obj.p.value,
列头20: obj.s.value,
列头21: obj.v.value,
列头22: obj.t.value,
列头23: obj.l.value,
});
}
let sums = _this.sums;
_this.jsono.push({
"登记情况": '总计受理量',
列头2: '',
列头3: '',
列头4: sums[3],
列头5: sums[4],
列头6: sums[5],
列头7: sums[6],
列头8: sums[7],
列头9: sums[8],
列头10: sums[9],
列头11: sums[10],
列头12: sums[11],
列头13: sums[12],
列头14: sums[13],
列头15: sums[14],
列头16: sums[15],
列头17: sums[16],
列头18: sums[17],
列头19: sums[18],
列头20: sums[19],
列头21: sums[20],
列头22: sums[21],
列头23: sums[22]
});
}
4.statisticsReport.js
```javascript
//边框样式
export const border = {
bottom: { style: "thin", color: { rgb: "000000" } },
top: { style: "thin", color: { rgb: "000000" } },
left: { style: "thin", color: { rgb: "000000" } },
right: { style: "thin", color: { rgb: "000000" } }
};
export const borderTitle1 = {
bottom: { style: "thin", color: { rgb: "ffffff" } },
top: { style: "thin", color: { rgb: "000000" } },
left: { style: "thin", color: { rgb: "000000" } },
right: { style: "thin", color: { rgb: "000000" } }
};
export const borderTitle2 = {
bottom: { style: "thin", color: { rgb: "000000" } },
top: { style: "thin", color: { rgb: "ffffff" } },
left: { style: "thin", color: { rgb: "000000" } }
};
export const borderUnit = {
bottom: { style: "thin", color: { rgb: "d7d7d7" } },
top: { style: "thin", color: { rgb: "d7d7d7" } },
left: { style: "thin", color: { rgb: "d7d7d7" } },
right: { style: "thin", color: { rgb: "d7d7d7" } }
};
export const borderDiagonal = {
bottom: { style: "thin", color: { rgb: "000000" } },
top: { style: "thin", color: { rgb: "000000" } },
left: { style: "thin", color: { rgb: "000000" } },
right: { style: "thin", color: { rgb: "000000" } },
diagonal: { style: "thin", color: { rgb: "000000" } },
diagonalDown: true
};
//加粗
export const styleBold1 = {
border: borderTitle1,
alignment: { horizontal: "center", wrapText: true, vertical: "center" },
font: {
sz: 18,
bold: true,
color: { rgb: "000000" },
outline: true
}
};
export const styleBold2 = {
border: borderTitle2,
alignment: { horizontal: "center", wrapText: true, vertical: "center" },
font: {
sz: 18,
bold: true,
color: { rgb: "000000" },
outline: true
}
};
export const styleBold3 = {
border: borderUnit,
alignment: { horizontal: "center", wrapText: true, vertical: "center" },
font: { sz: 12, bold: true, color: { rgb: "000000" }, outline: true }
};
//不加粗
export const styleText = {
border: border,
alignment: { horizontal: "center", wrapText: true, vertical: "center" },
font: { sz: 12, color: { rgb: "000000" }, outline: true }
};
//表头样式
export const styleHeadDiagonal = {
border: borderDiagonal,
alignment: {
wrapText: true,
readingOrder: 1, horizontal: "center", vertical: "center"
},
font: { sz: 12, bold: true, color: { rgb: "000000" }, outline: true },
fill: { fgColor: { rgb: "d7d7d7" } }
};
export const styleHead = {
border: border,
alignment: { horizontal: "center", wrapText: true, vertical: "center" },
font: { sz: 12, bold: true, color: { rgb: "000000" }, outline: true },
fill: { fgColor: { rgb: "d7d7d7" } }
};
export const chars = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T','U','V','W','X'];
export const saveAs = (obj, fileName) => {
var tmpa = document.createElement("a");
tmpa.download = fileName || "下载";
tmpa.href = URL.createObjectURL(obj);
tmpa.click();
setTimeout(function () {
URL.revokeObjectURL(obj);
}, 100);
}
export const getCharCol = (n) => {
(s = ""), (m = 0);
while (n > 0) {
m = (n % 26) + 1;
s = String.fromCharCode(m + 64) + s;
n = (n - m) / 26;
}
return s;
}
export const s2ab = (s) => {
if (typeof ArrayBuffer !== "undefined") {
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;
} else {
var buf = new Array(s.length);
for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
return buf;
}
}
1820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
