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.
263 lines
9.4 KiB
Vue
263 lines
9.4 KiB
Vue
<!-- 计费未拆分 与 拆分数据进行匹配-->
|
|
|
|
<template>
|
|
<div id="contain" style="width:100%;height: 100%;position: inherit">
|
|
<div style="height:88%;width:100%;position:relative">
|
|
<div style="height: 94%;width: 100%">
|
|
<el-table :data="tableData" width="100%" id="table_el" :header-cell-style="{background:'#e9ecee',align:'center'}" border
|
|
v-loading="tableLoading"
|
|
: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="280px" resizable align="center" />
|
|
<el-table-column prop="vehicleid" label="车牌号" :show-overflow-tooltip="true" width="150px" resizable align="center" />
|
|
<el-table-column prop="maname" label="处理人" :show-overflow-tooltip="true" width="180px" resizable align="center" />
|
|
<el-table-column prop="createTime" label="处理时间" :show-overflow-tooltip="true" :formatter="dateFormatterSSS" width="200px" resizable align="center" />
|
|
<el-table-column prop="vehicletypeName" label="车型" :show-overflow-tooltip="true" width="180px" resizable align="center" />
|
|
<el-table-column prop="multitypeName" label="匹配类型" :show-overflow-tooltip="true" width="200px" resizable 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="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="id" label="计费单元组id" v-if="tableDisable" 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">
|
|
<!-- <HintButton type="primary" :icon="Filter" title="地图查看" circle @click="skipMapVue(slot.row)"></HintButton>-->
|
|
<el-button type="primary" :icon="Filter" circle @click="skipMapVue(slot.row)"></el-button>
|
|
<el-button type="primary" @click="matchData(slot.row)">数据匹配</el-button>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div tyle="height: 5%;width: 100%">
|
|
<!-- 分页 -->
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="currentPage"
|
|
:page-sizes="[15, 30,50,100]"
|
|
:page-size="pageSize"
|
|
:total="totalCount"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
style="width: 90%;height:5%;padding: 0;position:relative;margin-top:10px;bottom: 0;font-size: x-small">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
<el-dialog id="map_dialog" v-model="isShowMap" title="地图" style="width: 80%;height:76%;" draggable >
|
|
<mapData ref="mapD" :key="new Date().getTime()" :params="mapParams" ></mapData>
|
|
</el-dialog>
|
|
<!-- <el-dialog id="detail_dialog" v-model="isShowDivDetail" title="详细信息" style="width: 80%;height:76%;" draggable >
|
|
<divMoneyDetail ref="divDetail" :key="new Date().getTime()" :params="dataParams" ></divMoneyDetail>
|
|
</el-dialog>-->
|
|
</div>
|
|
</template>
|
|
|
|
<style >
|
|
#table_el{
|
|
height: 100% ;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
<script >
|
|
|
|
import { ref} from "vue";
|
|
import mapData from "@/views/dev/detail/map.vue";
|
|
import {Filter,Search} from '@element-plus/icons-vue'
|
|
import {getFeeListByPage} from "@/util/api/api";
|
|
import {ElMessageBox} from "element-plus";
|
|
var _this;
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentPage: 1,
|
|
pageSize: 20,
|
|
totalCount: 0,
|
|
tableData: ref([]),
|
|
isShowMap: false,
|
|
isShowDivDetail: false,
|
|
tableDisable:false,
|
|
mapParams: {},
|
|
Filter: Filter,
|
|
tableLoading: false,
|
|
searchButton: Search,
|
|
doubleclikIndex: -1,//双击选中的行号
|
|
params:{}
|
|
|
|
}
|
|
},
|
|
//props: ['params'],
|
|
methods: {
|
|
refreshData(paramAll){
|
|
this.tableLoading=true;
|
|
this.params=paramAll;
|
|
getTableDataLists();
|
|
},
|
|
skipMapVue(row) {
|
|
this.isShowMap = true;
|
|
let _params = {
|
|
"gpaTollintervalid": row.gpaTollintervalid,
|
|
"gpaFeegroup": row.gpaFeegroup,
|
|
"PASSID": row.PASSID
|
|
|
|
}
|
|
this.isShowMap = true;
|
|
this.mapParams = _params;
|
|
// _this.$refs.mapD.getMapDatas(_params);
|
|
},matchData(row){
|
|
ElMessageBox.confirm({
|
|
|
|
})
|
|
this.isShowMap = true;
|
|
this.mapParams = _params;
|
|
},
|
|
handleSizeChange(val) {
|
|
this.pageSize = val;
|
|
this.isLoding = true;
|
|
getTableDataLists();
|
|
},handleCurrentChange(val) {
|
|
this.currentPage = val;
|
|
this.isLoding = true;
|
|
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: {
|
|
mapData,
|
|
Search
|
|
},
|
|
mounted() {
|
|
_this = this;
|
|
}
|
|
}
|
|
function getTableDataLists(){
|
|
_this.tableLoading=true;
|
|
var paramsData=_this.params;
|
|
paramsData.pageNum=_this.currentPage;
|
|
paramsData.pageSize=_this.pageSize;
|
|
/* if(! paramsData.queryStartTime){
|
|
_this.tableLoading=false;
|
|
return ;
|
|
}*/
|
|
getFeeListByPage(paramsData).then(res=>{
|
|
_this.tableLoading=false;
|
|
if(res.code<=0){
|
|
return false;
|
|
}else{
|
|
debugger
|
|
_this.totalCount=res.total;
|
|
_this.tableData=res.records;
|
|
_this.isLoding=false;
|
|
}
|
|
})
|
|
}
|
|
|
|
function skipMoneyVue(row){
|
|
let _params={
|
|
"gpaTollintervalid": row.gpaTollintervalid,
|
|
"gpaFeegroup": row.gpaFeegroup,
|
|
"GPA_FEE": row.GPA_FEE,
|
|
"DIV_TOLLINTERVALID": row.DIV_TOLLINTERVALID,
|
|
"DIV_FEEGROUP": row.DIV_FEEGROUP,
|
|
"DIV_FEE": row.DIV_FEE,
|
|
"PASSID":row.PASSID,
|
|
"GPA_ENPOINTID":row.GPA_ENPOINTID,
|
|
"GPA_EXPOINTID":row.GPA_EXPOINTID,
|
|
"CHECKSTATUS":row.CHECKSTATUS,
|
|
"STATUS":row.STATUS
|
|
|
|
}
|
|
_this.isShowDivDetail=true;
|
|
_this.dataParams=_params;
|
|
// _this.$refs.divDetail.getDivDatas(_params);
|
|
/* window.localStorage.setItem("params",JSON.stringify(params));
|
|
window.open(href.href,'Map',"",false)*/
|
|
}
|
|
|
|
|
|
|
|
//日期格式修改
|
|
|
|
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> |