|
|
|
|
@ -31,7 +31,7 @@
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
<el-form-item label="年份:">
|
|
|
|
|
<el-form-item label="年份:" style="width: 260px">
|
|
|
|
|
<div style="display: flex">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="nrStart"
|
|
|
|
|
@ -173,8 +173,24 @@ export default {
|
|
|
|
|
this.getHeight();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 排序
|
|
|
|
|
compare(property) {
|
|
|
|
|
return function (object1, object2) {
|
|
|
|
|
let value1 = object1[property];
|
|
|
|
|
let value2 = object2[property];
|
|
|
|
|
// 升序
|
|
|
|
|
return value1 - value2;
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
// 格式转换
|
|
|
|
|
getTableList(data) {
|
|
|
|
|
Object.keys(data).forEach((item, index) => {
|
|
|
|
|
data[item].sort(this.compare("nf"));
|
|
|
|
|
data[item].sort(this.compare("yf"));
|
|
|
|
|
data[item].forEach((em) => {
|
|
|
|
|
em.zl = em.zl ? em.zl : null;
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
this.tableData = data;
|
|
|
|
|
this.leftColumn = []; //左侧列数据
|
|
|
|
|
this.topColumn = []; //顶部列数据
|
|
|
|
|
@ -249,8 +265,11 @@ export default {
|
|
|
|
|
objeckList[i][
|
|
|
|
|
"cl" + this.tableData[i][v].nf + this.tableData[i][v].yf
|
|
|
|
|
] = this.tableData[i][v].zl;
|
|
|
|
|
objeckList[i]["cltotal" + this.tableData[i][v].nf] =
|
|
|
|
|
sumArr[i][this.tableData[i][v].nf];
|
|
|
|
|
objeckList[i]["cltotal" + this.tableData[i][v].nf] = sumArr[i][
|
|
|
|
|
this.tableData[i][v].nf
|
|
|
|
|
]
|
|
|
|
|
? sumArr[i][this.tableData[i][v].nf]
|
|
|
|
|
: "";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.arrList = Object.values(objeckList); //data数据
|
|
|
|
|
@ -351,7 +370,7 @@ export default {
|
|
|
|
|
if ($rowIndex == 0) {
|
|
|
|
|
return "row-gre-header";
|
|
|
|
|
} else {
|
|
|
|
|
if (column.field === "total1" || column.field === "total2") {
|
|
|
|
|
if (column.field.indexOf("cltotal") > -1) {
|
|
|
|
|
return "row-gre-total-header";
|
|
|
|
|
} else {
|
|
|
|
|
return "row-gre-header";
|
|
|
|
|
@ -360,8 +379,12 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
// 指定列css
|
|
|
|
|
cellClassName({ column }) {
|
|
|
|
|
if (column.field === "total1" || column.field === "total2") {
|
|
|
|
|
return "col-gre-total-col";
|
|
|
|
|
if (column.field) {
|
|
|
|
|
if (column.field.indexOf("cltotal") > -1) {
|
|
|
|
|
return "col-gre-total-col";
|
|
|
|
|
} else {
|
|
|
|
|
return "col-gre-col";
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
return "col-gre-col";
|
|
|
|
|
}
|
|
|
|
|
@ -428,7 +451,7 @@ export default {
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.first-col {
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 20px;
|
|
|
|
|
@ -469,27 +492,27 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
/* 尾部 */
|
|
|
|
|
::v-deep.mytable-style .row-end-gre {
|
|
|
|
|
background-color: #9ed3a4;
|
|
|
|
|
background-color: #9ed3a4 !important;
|
|
|
|
|
color: #000;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
/* 列 */
|
|
|
|
|
::v-deep.mytable-style.vxe-table .vxe-body--column.col-gre-total-col {
|
|
|
|
|
background-color: #9ed3a4;
|
|
|
|
|
background-color: #9ed3a4 !important;
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
::v-deep.mytable-style.vxe-table .vxe-body--column.col-gre-col {
|
|
|
|
|
background-color: #cce8cf;
|
|
|
|
|
background-color: #cce8cf !important;
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
/* header */
|
|
|
|
|
::v-deep.mytable-style.vxe-table .vxe-header--column.row-gre-header {
|
|
|
|
|
background-color: #cce8cf;
|
|
|
|
|
background-color: #cce8cf !important;
|
|
|
|
|
color: #000;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
::v-deep.mytable-style.vxe-table .vxe-header--column.row-gre-total-header {
|
|
|
|
|
background-color: #9ed3a4;
|
|
|
|
|
background-color: #9ed3a4 !important;
|
|
|
|
|
color: #000;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
@ -500,23 +523,15 @@ export default {
|
|
|
|
|
border-bottom: 2px solid #000 !important;
|
|
|
|
|
}
|
|
|
|
|
/* border 颜色 */
|
|
|
|
|
::v-deep .vxe-table--render-default.border--full .vxe-body--column,
|
|
|
|
|
.vxe-table--render-default.border--full .vxe-footer--column,
|
|
|
|
|
.vxe-table--render-default.border--full .vxe-header--column {
|
|
|
|
|
background-image: linear-gradient(#000, #000) !important;
|
|
|
|
|
}
|
|
|
|
|
::v-deep.vxe-table--render-default.border--full .vxe-body--column,
|
|
|
|
|
.vxe-table--render-default.border--full .vxe-footer--column,
|
|
|
|
|
.vxe-table--render-default.border--full .vxe-header--column {
|
|
|
|
|
background-image: linear-gradient(#000, #000), linear-gradient(#000, #000) !important;
|
|
|
|
|
::v-deep.vxe-table--render-default.border--full .vxe-body--column {
|
|
|
|
|
background-repeat: no-repeat !important;
|
|
|
|
|
background-size: 1px 100%, 100% 1px !important;
|
|
|
|
|
background-position: 100% 0px, 100% 99% !important;
|
|
|
|
|
background-image: linear-gradient(#000, #000),linear-gradient( #000, #000) !important;
|
|
|
|
|
}
|
|
|
|
|
:v-deep.vxe-table--render-default.border--full .vxe-body--column,
|
|
|
|
|
.vxe-table--render-default.border--full .vxe-footer--column,
|
|
|
|
|
.vxe-table--render-default.border--full .vxe-header--column {
|
|
|
|
|
::v-deep.vxe-table--render-default.border--full .vxe-footer--column {
|
|
|
|
|
background-image: linear-gradient(#000, #000), linear-gradient(#000, #000) !important;
|
|
|
|
|
}
|
|
|
|
|
::v-deep.vxe-table--render-default.border--full .vxe-body--column,
|
|
|
|
|
::v-deep.vxe-table--render-default.border--full .vxe-footer--column,
|
|
|
|
|
::v-deep.vxe-table--render-default.border--full .vxe-header--column {
|
|
|
|
|
background-image: linear-gradient(#000, #000), linear-gradient(#000, #000) !important;
|
|
|
|
|
}
|
|
|
|
|
|
xiezuo003
2 years ago