拆分核验，增加数据核验数据展示功能
parent
fe944a661b
commit
211677ef5c
@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<div id="contain" style="width:100%;height:100%;position: inherit">
|
||||
<el-table :data="tableData" :row-style="{height:50}" width="100%" height="100%" class="table_el"
|
||||
:header-cell-style="{align:'center'}"
|
||||
:row-class-name="rowClass"
|
||||
:span-method="objectSpanMethod"
|
||||
border
|
||||
v-loading="tableloading">
|
||||
<el-table-column prop="GONGSI" label="分公司" :show-overflow-tooltip="true" width="200px" resizable align="center"/>
|
||||
<el-table-column prop="HBDECODE" label="环比减收(万元)" :show-overflow-tooltip="true" width="150px" resizable align="center" />
|
||||
<el-table-column prop="HBRATE" label="减收占比(%)" :show-overflow-tooltip="true" width="150px" resizable align="center" />
|
||||
<el-table-column prop="ROADNAME" label="重点减收路段" :show-overflow-tooltip="true" width="185px" resizable align="center" />
|
||||
<el-table-column prop="ROADDECODE" label="减收通行费(万元)" :show-overflow-tooltip="true" width="150px" resizable align="center" />
|
||||
<el-table-column prop="DATEAVG" label="日均(万元)" :show-overflow-tooltip="true" width="150px" resizable align="center" />
|
||||
<el-table-column label="重点减收车型" :show-overflow-tooltip="true" width="800px" resizable align="center" >
|
||||
<el-table-column label="客车" resizable align="center" width="210px">
|
||||
<el-table-column prop="KCTYPENAME" label="车型" resizable align="center" width="150px" />
|
||||
<el-table-column prop="KCDECODE" label="减收金额(万元)" resizable align="center" width="160px" />
|
||||
<el-table-column prop="KCDECODERATE" label="日均(万元)" resizable align="center" width="150px" />
|
||||
</el-table-column>
|
||||
<el-table-column label="货车" resizable align="center" width="210px">
|
||||
<el-table-column prop="HCTYPENAME" label="车型" resizable align="center" width="150px" />
|
||||
<el-table-column prop="HCDECODE" label="减收金额(万元)" resizable align="center" width="160px" />
|
||||
<el-table-column prop="HCDECODERATE" label="日均(万元)" resizable align="center" width="150px" />
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
body{
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
#contain{
|
||||
height: 100% ;
|
||||
width:100% ;
|
||||
margin: 0px;
|
||||
}
|
||||
.table_el .cell {
|
||||
padding: 10px !important;
|
||||
}
|
||||
</style>
|
||||
<script >
|
||||
|
||||
import {
|
||||
getHbData
|
||||
} from "@/util/api/api.js";
|
||||
import {Search} from '@element-plus/icons-vue'
|
||||
var _this;
|
||||
export default{
|
||||
data(){
|
||||
return {
|
||||
type1:true,
|
||||
type2:true,
|
||||
type3:true,
|
||||
type4:true,
|
||||
tableData:[],
|
||||
queryStartTime:"",
|
||||
queryEndTime:"",
|
||||
tableloading:false
|
||||
|
||||
}},
|
||||
props:['startDate','endDate','startDateHB','endDateHB'],
|
||||
methods:{
|
||||
rowStyle(row,rowIndex){
|
||||
if(this.doubleclikIndex===row.row.RN){
|
||||
return {
|
||||
"background-color":"lightcyan",
|
||||
"cursor":"pointer"
|
||||
}
|
||||
}
|
||||
return {
|
||||
"cursor":"pointer"
|
||||
}
|
||||
},rowClass(row,rowIndex){
|
||||
if(row.GONGSI==="总计"){
|
||||
return "fixed-row";
|
||||
}
|
||||
},formatData(row, column, cellValue, index){
|
||||
if((cellValue ==="" || cellValue===undefined) && index < this.tableData.length-1){
|
||||
return "0";
|
||||
}else{
|
||||
return cellValue;
|
||||
}
|
||||
},flitterData(arr){
|
||||
let spanOneArr = [],
|
||||
spanTwoArr = [],
|
||||
spanThreeArr = [],
|
||||
spanFourArr = [],
|
||||
spanFiveArr = [],
|
||||
spanSixArr = [],
|
||||
concatOne = 0,
|
||||
concatTwo = 0,
|
||||
concatThree =0,
|
||||
concatFour =0,
|
||||
concatFive =0,
|
||||
concatSix =0;
|
||||
arr.forEach((item,index)=>{
|
||||
if(index === 0){
|
||||
spanOneArr.push(1);
|
||||
spanTwoArr.push(1);
|
||||
spanThreeArr.push(1);
|
||||
spanFourArr.push(1);
|
||||
spanFiveArr.push(1);
|
||||
spanSixArr.push(1);
|
||||
}else{
|
||||
if(item.GONGSI === arr[index - 1].GONGSI){ //第一列需合并相同内容的判断条件
|
||||
spanOneArr[concatOne] += 1;
|
||||
spanOneArr.push(0);
|
||||
}else{
|
||||
spanOneArr.push(1);
|
||||
concatOne = index;
|
||||
};
|
||||
if(item.HBDECODE === arr[index - 1].HBDECODE && item.GONGSI === arr[index - 1].GONGSI){//第二列需合并相同内容的判断条件
|
||||
spanTwoArr[concatTwo] += 1;
|
||||
spanTwoArr.push(0);
|
||||
}else{
|
||||
spanTwoArr.push(1);
|
||||
concatTwo = index;
|
||||
};
|
||||
if(item.GONGSI === arr[index - 1].GONGSI&&item.HBRATE === arr[index - 1].HBRATE){ //第三列需合并相同内容的判断条件
|
||||
spanThreeArr[concatThree] += 1;
|
||||
spanThreeArr.push(0);
|
||||
}else{
|
||||
spanThreeArr.push(1);
|
||||
concatThree = index;
|
||||
};
|
||||
if(item.GONGSI === arr[index - 1].GONGSI && item.ROADNAME === arr[index - 1].ROADNAME){ //第四列需合并相同内容的判断条件
|
||||
spanFourArr[concatFour] += 1;
|
||||
spanFourArr.push(0);
|
||||
}else{
|
||||
spanFourArr.push(1);
|
||||
concatFour = index;
|
||||
};
|
||||
if(item.GONGSI === arr[index - 1].GONGSI && item.ROADNAME === arr[index - 1].ROADNAME && item.ROADDECODE === arr[index - 1].ROADDECODE){ //第五列需合并相同内容的判断条件
|
||||
spanFiveArr[concatFive] += 1;
|
||||
spanFiveArr.push(0);
|
||||
}else{
|
||||
spanFiveArr.push(1);
|
||||
concatFive = index;
|
||||
};
|
||||
if(item.GONGSI === arr[index - 1].GONGSI && item.ROADNAME === arr[index - 1].ROADNAME && item.DATEAVG === arr[index - 1].DATEAVG){ //第六列需合并相同内容的判断条件
|
||||
spanSixArr[concatSix] += 1;
|
||||
spanSixArr.push(0);
|
||||
}else{
|
||||
spanSixArr.push(1);
|
||||
concatSix = index;
|
||||
};
|
||||
}
|
||||
});
|
||||
return {
|
||||
one: spanOneArr,
|
||||
two: spanTwoArr,
|
||||
three: spanThreeArr,
|
||||
four: spanFourArr,
|
||||
five: spanFiveArr,
|
||||
six: spanSixArr,
|
||||
}
|
||||
},objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||||
if(columnIndex === 0 ) {
|
||||
const _row = (this.flitterData(this.tableData).one)[rowIndex];
|
||||
const _col = _row > 0 ? 1 : 0;
|
||||
return {
|
||||
rowspan: _row,
|
||||
colspan: _col
|
||||
};
|
||||
}
|
||||
if(columnIndex === 1) {
|
||||
const _row = (this.flitterData(this.tableData).two)[rowIndex];
|
||||
const _col = _row > 0 ? 1 : 0;
|
||||
return {
|
||||
rowspan: _row,
|
||||
colspan: _col
|
||||
};
|
||||
}
|
||||
if(columnIndex === 2) {
|
||||
const _row = (this.flitterData(this.tableData).three)[rowIndex];
|
||||
const _col = _row > 0 ? 1 : 0;
|
||||
return {
|
||||
rowspan: _row,
|
||||
colspan: _col
|
||||
};
|
||||
}
|
||||
if(columnIndex === 3) {
|
||||
const _row = (this.flitterData(this.tableData).four)[rowIndex];
|
||||
const _col = _row > 0 ? 1 : 0;
|
||||
return {
|
||||
rowspan: _row,
|
||||
colspan: _col
|
||||
};
|
||||
}
|
||||
if(columnIndex === 4) {
|
||||
const _row = (this.flitterData(this.tableData).five)[rowIndex];
|
||||
const _col = _row > 0 ? 1 : 0;
|
||||
return {
|
||||
rowspan: _row,
|
||||
colspan: _col
|
||||
};
|
||||
}
|
||||
if(columnIndex === 5) {
|
||||
const _row = (this.flitterData(this.tableData).six)[rowIndex];
|
||||
const _col = _row > 0 ? 1 : 0;
|
||||
return {
|
||||
rowspan: _row,
|
||||
colspan: _col
|
||||
};
|
||||
}
|
||||
},refreshDataHb(startDate,endDate,startDateHB,endDateHB){
|
||||
return getTableDatas(startDate,endDate,startDateHB,endDateHB);
|
||||
|
||||
}
|
||||
},components:{
|
||||
Search
|
||||
},
|
||||
mounted(){
|
||||
_this=this;
|
||||
/* let _startDate=_this.$props.startDate;
|
||||
let _endDate=_this.$props.endDate;
|
||||
if(this.queryStartTime !==_startDate || this.queryEndTime !==_endDate){
|
||||
this.queryStartTime=_startDate
|
||||
this.queryEndTime=_endDate
|
||||
getTableDatas();
|
||||
}*/
|
||||
}
|
||||
}
|
||||
var getTableDatas=function(startDate,endDate,startDateHB,endDateHB){
|
||||
var paramsData={
|
||||
"startDate": startDate,
|
||||
"endDate":endDate,
|
||||
"startDateHB":startDateHB,
|
||||
"endDateHB": endDateHB
|
||||
}
|
||||
_this.tableloading=true;
|
||||
getHbData(paramsData).then(res=>{
|
||||
_this.tableLoading=false;
|
||||
if(res.code<=0){
|
||||
_this.tableloading=false;
|
||||
return 0;
|
||||
}else{
|
||||
_this.tableData=res.data
|
||||
_this.tableloading=false;
|
||||
}
|
||||
return 1;
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue