You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

222 lines
9.0 KiB
Vue

<!-- 计费未拆分 拆分未计费数据进行匹配-->
<template>
<div id="contain_nofee_match" style="width:100%;height: 100%;position: inherit">
<div style="height:100%;width:100%;position:inherit">
<div style="height: 30%;width: 100%">
<el-table :data="tableDataFee" width="100%" id="table_el_div_match_fee" :header-cell-style="{background:'#e9ecee',align:'center'}" border
v-loading="tableLoadingFee"
:title="feeTitle"
:row-style="rowStyle">
<el-table-column type="index" label="序号" width="100px" align="center"/>
<el-table-column prop="classdate" label="日期" :show-overflow-tooltip="true" :formatter="dateFormatter" width="150px" resizable align="center" />
<el-table-column prop="passid" label="PASSID" :show-overflow-tooltip="true" width="220px" resizable align="center" />
<el-table-column prop="vehicleid" label="车牌号" :show-overflow-tooltip="true" width="150px" resizable align="center" />
<el-table-column prop="gpaFee" label="计费总金额(元)" width="150px" resizable align="center" />
<el-table-column prop="vehicletypeName" label="车型" :show-overflow-tooltip="true" width="150px" resizable align="center" />
<el-table-column prop="gpaTollintervalidName" label="路径" :show-overflow-tooltip="true" width="580px" align="center" />
<el-table-column prop="gpaTollintervalid" label="计费单元组id" v-if="tableDisable" align="center" />
<el-table-column prop="gpaFeegroup" label="计费金额(元)" v-if="tableDisable" width="200px" resizable align="center" />
<el-table-column prop="mediatype" label="通行介质" v-if="tableDisable" width="200px" resizable align="center" />
<el-table-column prop="statusname" label="拆分状态" v-if="tableDisable" width="400px" resizable align="center" />
<el-table-column prop="roadno" label="计费单元组id" v-if="tableDisable" align="center" />
</el-table>
</div>
<div style="height: 60%;width: 100%;margin-top:1%">
<el-table :data="tableDataFeeMatch" width="100%" id="table_el_div_match_div" :header-cell-style="{background:'#e9ecee',align:'center'}" border
v-loading="tableLoadingFee"
:title="nofeeTitle"
:row-style="rowStyle">
<el-table-column type="index" label="序号" width="100px" align="center"/>
<el-table-column prop="classdate" label="日期" :show-overflow-tooltip="true" :formatter="dateFormatter" width="150px" resizable align="center" />
<el-table-column prop="passid" label="PASSID" :show-overflow-tooltip="true" width="220px" resizable align="center" />
<el-table-column prop="vehicleid" label="车牌号" :show-overflow-tooltip="true" width="150px" resizable align="center" />
<el-table-column prop="divFee" label="拆分总金额(元)" width="150px" resizable align="center" />
<el-table-column prop="vehicletypeName" label="车型" :show-overflow-tooltip="true" width="150px" resizable align="center" />
<el-table-column prop="divFeegroup" label="计费金额(元)" v-if="tableDisable" width="200px" resizable align="center" />
<el-table-column prop="divTollintervalidName" label="路径" :show-overflow-tooltip="true" width="400" align="center" />
<el-table-column prop="divTollintervalid" label="计费单元组id" v-if="tableDisable" align="center" />
<el-table-column prop="mediatype" label="通行介质" v-if="tableDisable" width="200px" resizable align="center" />
<el-table-column prop="vehicleclassname" label="车种" v-if="tableDisable" :show-overflow-tooltip="true" width="100px" resizable align="center" />
<el-table-column prop="statusname" label="拆分状态" v-if="tableDisable" width="400px" resizable align="center" />
<el-table-column prop="roadno" label="计费单元组id" v-if="tableDisable" align="center" />
<el-table-column label="操作" v-slot="slot" fixed="right" align="center">
<el-button type="primary" @click="matchData(slot.row)" style="background-color: #67c23a"></el-button>
</el-table-column>
</el-table>
</div>
</div>
<!-- <el-dialog id="map_dialog_div" v-model="isShowMap" title="地图(拆分)" style="width: 80%;height:80%;" draggable >
<mapFeeData ref="mapFeeData" :key="new Date().getTime()" :params="mapParams" ></mapFeeData>
</el-dialog>-->
</div>
</template>
<style >
#table_el_div_match_fee{
height: 100% ;
width: 100%;
}
#table_el_div_match_div{
height: 100% ;
width: 100%;
}
</style>
<script >
import { ref} from "vue";
//import mapFeeData from "@/views/dev/detail/nodivandnofee/mapFee.vue";
import {Filter,Search} from '@element-plus/icons-vue'
import {getDivListByFeeId,matchData} from "@/util/api/api";
import {ElMessageBox} from "element-plus";
var _this;
export default {
data() {
return {
currentPage: 1,
pageSize: 20,
totalCount: 0,
tableDataFee: ref([]),
tableDataFeeMatch: ref([]),
isShowMap: false,
isShowDivDetail: false,
tableDisable:false,
mapParams: {},
Filter: Filter,
tableLoadingFee: false,
searchButton: Search,
doubleclikIndex: -1,//双击选中的行号
params:{},
nofeeTitle:"无计费有拆分",
feeTitle:"有计费无拆分"
}
},
//props: ['params'],
methods: {
refreshData(paramAll){
this.params=paramAll;
getTableDataLists();
},matchData(row){
alert("数据匹配");
},
handleSizeChange(val) {
this.pageSize = val;
getTableDataLists();
},handleCurrentChange(val) {
this.currentPage = val;
getTableDataLists();
}, dateFormatter(row, column, cellValue) {
if (cellValue == null || cellValue == "" || cellValue == undefined) {
return "";
}
const date = new Date(cellValue);
// 格式化日期,并返回字符串
//return `${date.toLocaleDateString()}`;
return formatDate(cellValue, "YYYY-MM-DD");
}, dateFormatterSSS(row, column, cellValue) {
if (cellValue == null || cellValue == "" || cellValue == undefined) {
return "";
}
const date = new Date(cellValue);
// 格式化日期,并返回字符串
//return `${date.toLocaleDateString()}`;
return formatDate(cellValue, "YYYY-MM-DD HH:MM:SS:SSS");
}, rowStyle(row, rowIndex) {
if (this.doubleclikIndex === row.row.RN) {
return {
"background-color": "lightcyan",
"cursor": "pointer"
}
}
return {
"cursor": "pointer"
}
}
}, components: {
// mapFeeData,
Search
},
mounted() {
_this = this;
}
}
function getTableDataLists(){
_this.tableLoadingFee=true;
var paramsData=_this.params;
getDivListByFeeId(paramsData).then(res=>{
_this.tableLoadingFee=false;
if(res.code<=0){
return false;
}else{
_this.tableDataFee=res.data.feelist;
_this.tableDataFeeMatch=res.data.nofeelist;
}
})
}
//日期格式修改
function formatDate(dateString,format) {
const date = new Date(dateString);
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
let hour=date.getHours();
let minute=date.getMinutes();
let second=date.getSeconds();
if(hour<10){
hour ="0"+hour;
}
if(minute<10){
minute ="0"+minute;
}
if(second<10){
second ="0"+second;
}
const milSecond=date.getMilliseconds();
if(format=="YYYY-MM-DD"){
return `${year}-${month}-${day}`;
}else if(format=="YYYY-MM-DD HH:MM:SS"){
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}else if(format=="YYYY-MM-DD HH:MM:SS:SSS"){
return `${year}-${month}-${day} ${hour}:${minute}:${second}:${milSecond}`;
}else if(format=="HH:MM:SS"){
return `${hour}:${minute}:${second}:${milSecond}`;
}
return "";
}
function getCurrentDate(){
var myDate = new Date(); //
myDate.setDate(myDate.getDate() - 1);
// dateTemp = myDate.getFullYear()+"/"+(c)+"/"+myDate.getDate();
return myDate.getFullYear()+"-"+((myDate.getMonth()+1) >9?(myDate.getMonth()+1):"0"+(myDate.getMonth()+1))+"-"+(myDate.getDate() >9?myDate.getDate():"0"+myDate.getDate());
}
function getCurrentDateHour(){
var date = new Date(); //获取今天日期
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
let hour=date.getHours();
let minute=date.getMinutes();
let second=date.getSeconds();
if(hour<10){
hour ="0"+hour;
}
if(minute<10){
minute ="0"+minute;
}
if(second<10){
second ="0"+second;
}
// dateTemp = myDate.getFullYear()+"/"+(c)+"/"+myDate.getDate();
return `${year}${month}${day}${hour}${minute}${second}`;
}
</script>