拆分核验，增加数据核验数据展示功能
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