拆分核验,有需求变更修改

master
白美平 6 months ago
parent 211677ef5c
commit ab476fe71b

@ -16,6 +16,7 @@ export const getTotal = data => post("/devProjectJt/divFeeDetail/getTotal", data
//查询汇总中各拆分状态
export const getTotalFeeAndDivFee = data => post("/devProjectJt/divFeeStat/getTotalFeeAndDivFee", data,"")
export const getDivDataList = data => post("/devProjectJt/divFeeStat/getDivDataList", data,"")
export const getFeeTotal = data => post("/devProjectJt/divFeeStat/getFeeTotal", data,"")
export const getHbData = data => post("/devProjectJt/divFeeStat/getHbData", data,"")
@ -32,8 +33,17 @@ export const getEveryClassFee = data => post("/devProjectJt/divFeeStat/getEveryC
//导出明细数据
export const exportDivPassidAllData = data => download("/devProjectJt/exportData/exportList", data,null)
//20250417 数据核验数据展示
export const getFeeShowTotal = data => post("/devProjectJt/divFeeStat/getFeeShowTotal", data,"")
export const getStatusToal = data => post("/devProjectJt/divFeeStat/getStatusToal", data,"")
export const getVehicleClassToal = data => post("/devProjectJt/divFeeStat/getVehicleClassToal", data,"")
//20250507 未计费 未拆分数据核验
export const getFeeListByPage = data => post("/devProjectJt/divPassidAll/getFeeListByPage", data,"")
export const getDivListByPage = data => post("/devProjectJt/divPassidAll/getDivListByPage", data,"")
//20250513
export const getFeeunitListByPage = data => post("/devProjectJt/feeunit/getListByPage", data,"")
//导出汇总数据
export const exportEveryData = data => download("/devProjectJt/exportData/exportEveryList", data,null)

@ -4,8 +4,8 @@ import {ElMessage} from "element-plus";
// axios.defaults.staticBaseURL = '../'
axios.defaults.baseURL = 'http://' + window.location.host //正式
//axios.defaults.baseURL = 'http://' + window.location.hostname + ':9002' //测试
//axios.defaults.baseURL = 'http://' + window.location.host //正式
axios.defaults.baseURL = 'http://' + window.location.hostname + ':9004' //测试
//post请求头
//axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";

@ -1,22 +1,37 @@
import * as vueRouter from "vue-router";
import gsCheckMain from '@/views/dev/gsCheckMain.vue';
import nodivAndnofee from '@/views/dev/nodivAndnofee.vue';
import divfeeShowStat from '@/views/dev/divfeeShowStat.vue';
import mapfee from '@/views/dev/detail/map.vue';
import rankAndtollintervalid from '@/views/dev/rankAndtollintervalid.vue';
import feeStatDetail from '@/views/dev/detail/feeStatDetail.vue';
const routes = [
{
path: '/',
component: nodivAndnofee,//
},{
path: '/devProjectJt/divfeeShowStat',
component: divfeeShowStat,//
}, {
path: '/devProjectJt/index',
component: gsCheckMain,//
}, {
path: '/devProjectJt/nodivAndnofee',
component: nodivAndnofee,//
}, {
path: '/devProjectJt/mapfee',
component: mapfee,//
}, {
path: '/devProjectJt/rankAndtollintervalid',
component: rankAndtollintervalid,//
}, {
path: '/devProjectJt/feeStatDetail',
component: feeStatDetail,//
}
]

@ -165,6 +165,56 @@ let pro = {
return 0
}
return value
},initOptionPublic(data,echartsId,title,subtext) {
let myChart = this.$echarts.init(document.getElementById(echartsId))
// 绘制图表
this.option = {
title: {
text: title,
subtext: subtext,
left: 'center'
},
tooltip: {
trigger: 'item',
left:'left'
},
legend: {
orient: 'horizontal', // vertical 水平
top: 'bottom',
fontSize:'5px'
},
series: [
{
type: 'pie',
avoidLabelOverlap: true, // 是否启用防止标签重叠策略
radius: '50%',//饼图大小55 最大,不要加中括号,否则 label不生效
//radius: ['50%','70%'],//饼图大小55 最大,不要加中括号,否则 label不生效
center: ['50%', '50%'],//饼图 X Y 坐标
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
label: {
show: true,
formatter: echartsId==='vehicleclassRate'?'{b}:{c}%':'{b}:{c}'
},
labelline:{
show: true
},
//鼠标移动上去后饼图区域的样式改变
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: data
}
]
};
myChart.setOption(this.option);
},
deepLocate: (function () {
'use strict'

@ -10,43 +10,51 @@
style="width: 100%;height: 100%">
<el-table-column prop="classdate" label="日期" resizable align="center" :formatter="dateFormatter" fixed="left" width="140" />
<el-table-column label="集团应收/拆分" width="300" resizable align="center" fixed="left" >
<el-table-column prop="jtysmoney" label="应收(元)" resizable align="center" width="130" />
<el-table-column prop="jtcfmoney" label="拆分(元)" resizable align="center" width="130" />
<el-table-column prop="jtysmoney" label="应收(万元)" resizable align="center" width="130" />
<el-table-column prop="jtcfmoney" label="拆分(万元)" resizable align="center" width="130" />
<el-table-column prop="jtcfmoneyRate" label="拆分与应收占比(%)" resizable align="center" width="150" >
<template #default="scope">
<!-- 根据 scope.row.status 设置字体颜色 -->
<span :style="{ color: getStatusColor(scope.row.jtcfmoneyRate) }">
{{ scope.row.jtcfmoneyRate }}
</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="未拆分" width="200" resizable align="center" >
<el-table-column prop="nodivmoney" label="金额(元)" resizable align="center" width="130"/>
<el-table-column prop="nodivflow" label="流量(辆)" resizable align="center" width="100" />
<el-table-column label="有计费无拆分" width="200" resizable align="center" >
<el-table-column prop="nodivmoney" label="金额(元)" resizable align="center" width="130"/>
<el-table-column prop="nodivflow" label="流量(辆)" resizable align="center" width="100" />
</el-table-column>
<el-table-column label="未计费" width="200" resizable align="center">
<el-table-column prop="nofeemoney" label="金额(元)" resizable align="center" width="130"/>
<el-table-column prop="nofeeflow" label="流量(辆)" resizable align="center" width="100"/>
<el-table-column label="无计费有拆分" width="200" resizable align="center">
<el-table-column prop="nofeemoney" label="金额(元)" resizable align="center" width="130"/>
<el-table-column prop="nofeeflow" label="流量(辆)" resizable align="center" width="100"/>
</el-table-column>
<el-table-column label="拆分准确" width="200" resizable align="center">
<el-table-column prop="rightmoney" label="金额(元)" resizable align="center" width="130" />
<el-table-column prop="rightflow" label="流量(辆)" resizable align="center" width="100"/>
<el-table-column prop="rightmoney" label="金额(元)" resizable align="center" width="130" />
<el-table-column prop="rightflow" label="流量(辆)" resizable align="center" width="100"/>
</el-table-column>
<el-table-column label="少拆分" width="200" resizable align="center">
<el-table-column
prop="lessdivmoneygpa"
label="计费金额(元)"
label="计费金额(元)"
resizable align="center"
width="130">
</el-table-column>
<el-table-column
prop="lessdivmoneydiv"
label="拆分金额(元)"
label="拆分金额(元)"
resizable align="center"
width="130">
</el-table-column>
<el-table-column
prop="lessdivmoney"
label="金额(元)"
label="金额(元)"
resizable align="center"
width="130">
</el-table-column>
<!-- <el-table-column
prop="lessdivflow"
label="流量(辆)"
label="流量(辆)"
resizable align="center"
width="100">
</el-table-column>-->
@ -54,25 +62,25 @@
<el-table-column label="多拆分" width="200" resizable align="center">
<el-table-column
prop="moredivmoneygpa"
label="计费金额(元)"
label="计费金额(元)"
resizable align="center"
width="130">
</el-table-column>
<el-table-column
prop="moredivmoneydiv"
label="拆分金额(元)"
label="拆分金额(元)"
resizable align="center"
width="130">
</el-table-column>
<el-table-column
prop="morevivmoney"
label="金额(元)"
label="金额(元)"
resizable align="center"
width="130">
</el-table-column>
<!-- <el-table-column
prop="moredivflow"
label="流量(辆)"
label="流量(辆)"
resizable align="center"
width="100">
</el-table-column>-->
@ -168,19 +176,19 @@ export default{
columnShow:true,
dataType:"JT",
beginDate:"",
endDate:""
endDate:"",
num:90
}},
methods:{
refreshData(beginDate,endDate,subcomno,roadno,stanno,dataType){
refreshData(beginDate,endDate,subcomno,roadno,stanno,dataType,num){
this.beginDate=beginDate ;
this.endDate=endDate ;
this.num=num ;
getTableData(beginDate,endDate,subcomno,roadno,stanno,dataType);
},
handleSizeChange(val) {
},handleSizeChange(val) {
this.pageSize = val;
this.isLoding=true;
},
handleCurrentChange(val) {
},handleCurrentChange(val) {
this.currentPage = val;
this.isLoading=true;
}, dateFormatter(row, column, cellValue){
@ -219,6 +227,24 @@ export default{
this.isShowDetailVehType=false;
this.isShowDetail=true;
this.updateDetail= this.updateDetail+1;
},getStatusColor(status) { //
if(status >= this.num){
return '#67C23A'; // 绿
}else{
return '#F56C6C'; //
}
/* switch (status) {
case 'success':
return '#67C23A'; // 绿
case 'warning':
return '#E6A23C'; //
case 'error':
return '#F56C6C'; //
default:
return '#909399'; //
}*/
},exportExcle(beginDate,endDate,subcomno,roadno,stanno,dataType,num){
exportData(beginDate,endDate,subcomno,roadno,stanno,dataType,num);
}
},components:{
/* detailTab,
@ -297,4 +323,39 @@ function formatDate(dateString,format) {
}
return "";
}
function exportData(beginDate,endDate,subcomno,roadno,stanno,dataType) {
var paramsData={
"queryStartTime":beginDate,
"queryEndTime":endDate,
"subcomno":subcomno,
"roadno":roadno,
"stano":stanno,
"type":dataType
}
exportEveryData({paramsData: JSON.stringify(paramsData)}).then(res => {
if (res.data != "") {
//fileName:
var fileName = '集团汇总_' + getCurrentDateHour(); //decodeURIComponent(res.headers["Content-Disposition"].split("=")[1])
let blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'});
// ie
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
//ie
var downloadElement = document.createElement("a");
var href = window.URL.createObjectURL(blob); //url
downloadElement.href = href;
downloadElement.download = fileName; //
document.body.appendChild(downloadElement);
downloadElement.click(); //
document.body.removeChild(downloadElement); //
window.URL.revokeObjectURL(href); //blob
}
}
//false
_this.tableLoading = false;
});
}
</script>

@ -90,6 +90,12 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="是否包含节假日:" >
<el-radio-group v-model="isHoliday" >
<el-radio :label="1">包含</el-radio>
<el-radio :label="0">不包含</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="" style="width:8%;margin-bottom: 5px;" class="s_el_row">
<div style="display:flex;text-align: left; height:100%; position: relative;margin:0;padding-bottom:10px">
@ -170,7 +176,7 @@ export default {
rowStyle: "",
tableDataDetail: [],
fullscreenLoading: false,
loading: true,
loading: false,
tableDisable:false,
clickDialog:false,
feeDetail:false,
@ -198,7 +204,8 @@ export default {
SPASSID:"",
SEXITFEETYPE:"",
totalfee:'0',
totaldivfee:'0'
totaldivfee:'0',
isHoliday:1//
};
},
methods: {
@ -224,7 +231,8 @@ export default {
"SVECHETYPE":this.SVECHETYPE,
"status":(this.divStatus !==null && this.divStatus !=="" && this.divStatus !==undefined)?this.divStatus:this.status,
"SPASSID":this.SPASSID,
"SEXITFEETYPE":this.SEXITFEETYPE
"SEXITFEETYPE":this.SEXITFEETYPE,
"isHoliday":this.isHoliday
}
if(this.classdate !=="" && this.classdate !==undefined){
params.queryStartTime="";
@ -363,7 +371,8 @@ function exportData(){
"SVECHETYPE":_this.SVECHETYPE,
"status":_this.status,
"SPASSID":_this.SPASSID,
"SEXITFEETYPE":_this.SEXITFEETYPE
"SEXITFEETYPE":_this.SEXITFEETYPE,
"isHoliday":_this.isHoliday
}
exportDivPassidAllData({paramsData:JSON.stringify(paramsData)}).then(res => {
if (res.data != "") {

@ -1,396 +0,0 @@
<template>
<!-- <el-affix :offset="120" style="width: 500px;height: 50px" v-if="mapShow">
<div>
<el-checkbox v-model="divChecked" size="large"><span
style="width: 10px;height: 10px;background-color: #bf41c7ff;border-radius: 10px">&nbsp;&nbsp;&nbsp;&nbsp;</span>拆分
</el-checkbox>
<el-checkbox v-model="fitChecked" size="large"><span
style="width: 10px;height: 10px;background-color: #18a45b;border-radius: 10px">&nbsp;&nbsp;&nbsp;&nbsp;</span>计费
</el-checkbox>
</div>
</el-affix>
<div id="mapDiv" :style="mapStyle"></div>-->
<div class="map_1" style="width:100% !important;height:100%;">
<div style="width: 100%">
<el-checkbox v-model="divChecked" size="large" ><span style="width: 10px;height: 10px;background-color: #bf41c7ff;border-radius: 10px">&nbsp;&nbsp;&nbsp;&nbsp;</span></el-checkbox>
<el-checkbox v-model="fitChecked" size="large" ><span style="width: 10px;height: 10px;background-color: #18a45b;border-radius: 10px">&nbsp;&nbsp;&nbsp;&nbsp;</span></el-checkbox>
</div>
<div id="mapDiv" style="width:98% !important;height:90%;"></div>
</div>
</template>
<script>
import {getMapDivDatas} from '/src/util/api/api.js';
import {v4} from "uuid";
var _this;
export default {
name: "index",
data() {
return {
rowData: {},
mapShow: false,
map: null,
mapStyle: '',
mapId: v4(),
mapData: {},
divChecked: true,
fitChecked: true,
staInfoLoading: false,
supportCanvas: false,
fitGantry: [],
divGantry: [],
//
fitPoints: [],
fitFeatures: [],
fitLineFeatures: [],
fitAttributes: {
paint: {
"line-color": '#18a45b', // 线
"line-width": 4, // 线
}
},
//
divPoints: [],
divFeatures: [],
divLineFeatures: [],
divAttributes: {
paint: {
"line-color": '#bf41c7', // 线
"line-width": 4, // 线
}
},
informationWindow: new HDmap.Popup({
closeButton: false,
closeOnClick: false,
className: "mapbox-popup",
maxWidth: "350px",
})
}
},
watch: {
fitChecked: {
deep: true,
handler(newValue, oldValue) {
if(newValue){
this.map.addFeatureLine('fitPath', this.fitLineFeatures, this.fitAttributes)
this.map.addFeaturePoint('fitPathD', this.fitFeatures, {
type: 'symbol', // symbolimg
paint: {
"text-opacity": 1, // 0 ~ 1 1
"text-color": "red", // #000000
"text-halo-color": "rgba(0,0,0,0)", // rgba(0,0,0,0)
"text-halo-width": 0, // >= 0 0
"text-halo-blur": 0, // >= 0 0
"text-translate": [0, 2], // [x, y] [0, 0]
},
layout: {
'icon-image': 'point', //使 46
'icon-allow-overlap': true, //
visibility: 'visible', //
'text-field': ['get', 'message'], // name
'text-font': ["Microsoft YaHei Regular"], //
'text-offset': [0, 0], //
'text-anchor': 'top', //
'text-size': 12, //
},
})
}else{
this.map.removeLayer("fitPath")
this.map.removeLayer("fitPathD")
}
},
},
divChecked: {
deep: true,
handler(newValue, oldValue) {
if(newValue){
this.map.addFeatureLine('divPath', this.divLineFeatures, this.divAttributes)
this.map.addFeaturePoint('divPathD', this.divFeatures, {
type: 'symbol', // symbolimg
paint: {
"text-opacity": 1, // 0 ~ 1 1
"text-color": "red", // #000000
"text-halo-color": "rgba(0,0,0,0)", // rgba(0,0,0,0)
"text-halo-width": 0, // >= 0 0
"text-halo-blur": 0, // >= 0 0
"text-translate": [0, 2], // [x, y] [0, 0]
},
layout: {
'icon-image': 'point', //使 46
'icon-allow-overlap': true, //
visibility: 'visible', //
'text-field': ['get', 'message'], // name
'text-font': ["Microsoft YaHei Regular"], //
'text-offset': [0, 0], //
'text-anchor': 'top', //
'text-size': 12, //
},
})
}else{
this.map.removeLayer("divPath")
this.map.removeLayer("divPathD")
}
},
},
},
methods: {
initMap() {
let mapData=this.mapData;
let LNG = 111.748028;
let LAT = 40.858154;
let _mapDivFEEList=mapData.mapDivFEEList;
let _mapFEEList=mapData.mapFEEList;
//
this.fitGantry = mapData.mapFEEList;
this.fitPoints = [];
//
this.divGantry = mapData.mapDivFEEList;
this.divPoints = [];
if (_mapDivFEEList.length > 0 ) {
for(var k=0;k<_mapDivFEEList.length;k++){
if(_mapDivFEEList[k] !=undefined && _mapDivFEEList[k].LNG !="" && _mapDivFEEList[k].LNG !=undefined && _mapDivFEEList[k].LAT !="" && _mapDivFEEList[k].LAT !=undefined){
LNG = _mapDivFEEList[k].LNG;
LAT = _mapDivFEEList[k].LAT;
//STANAME = _mapDivFEEList[k].stanName;
break;
}
}
}else if(_mapFEEList.length>0 ){
/* LNG = _mapFEEList[0].LNG;
LAT = _mapFEEList[0].LAT;
STANAME = _mapFEEList[0].stanName;*/
for(var k=0;k<_mapFEEList.length;k++){
if(_mapFEEList[k] !=undefined && _mapFEEList[k].LNG !="" && _mapFEEList[k].LAT !="" && _mapFEEList[k].LNG !=undefined && _mapFEEList[k].LAT !=undefined){
LNG = _mapFEEList[k].LNG;
LAT = _mapFEEList[k].LAT;
// STANAME = _mapFEEList[k].stanName;
break;
}
}
}
console.log("中心坐标======LNG===="+LNG+"====LAT========"+LAT+"===STANAME=====");
let styleOption = Object.assign(
{},
HDmap.MapStyle.SM_WMTS_VEC_WHITE,
{glyphs: "./hdmap/fonts/{fontstack}/{range}.pbf"}
)
this.map = new HDmap.map({
container: 'mapDiv',
center: [LNG, LAT],
zoom: 5,
styleURL: styleOption
// styleURL: HDmap.MapStyle.SM_WMTS_VEC_WHITE //
})
this.map.map2d.on("style.load", (event) => {
_this.mapShow = true;
this.addMapLine();
});
},
addMapLine() {
let fitCoordinates = []
this.fitLineFeatures = []
if (this.fitGantry != null && this.fitGantry.length > 0) {
for (let i = 0; i < this.fitGantry.length; i++) {
/* if(i===0){
this.map.map2d.setCenter([this.fitGantry[i].LNG, this.fitGantry[i].LAT])
}*/
if(this.fitGantry[i].LNG !="" && this.fitGantry[i].LAT !=""){
fitCoordinates[fitCoordinates.length] = [this.fitGantry[i].LNG, this.fitGantry[i].LAT]
}
}
}
this.fitLineFeatures = [
{
"type": "Feature",
"properties": {
"gid": 1, //使
},
"geometry": {
"type": "LineString",
"coordinates": fitCoordinates
}
}
]
let divCoordinates = []
this.divLineFeatures = []
if (this.divGantry != null && this.divGantry.length > 0) {
for (let i = 0; i < this.divGantry.length; i++) {
if(this.divGantry[i].LNG !="" && this.divGantry[i].LAT !=""){
divCoordinates[divCoordinates.length] = [this.divGantry[i].LNG * 1 + 0.01, this.divGantry[i].LAT * 1 + 0.01]
}
}
}
this.divLineFeatures = [
{
"type": "Feature",
"properties": {
"gid": 2, //使
},
"geometry": {
"type": "LineString",
"coordinates": divCoordinates
}
}
]
if (!this.map) return
this.map.addFeatureLine('fitPath', this.fitLineFeatures, this.fitAttributes)
this.map.addFeatureLine('divPath', this.divLineFeatures, this.divAttributes)
this.addFeatures();
},
addFeatures() {
if (!this.map) return
this.fitFeatures=[];
if (this.fitGantry != null && this.fitGantry.length > 0) {
for (let i = 0; i < this.fitGantry.length; i++) {
if(this.fitGantry[i].LNG !="" && this.fitGantry[i].LAT != ""){
console.log("计费坐标名称====="+this.fitGantry[i].staName+"("+this.fitGantry[i].FEE+")");
this.fitFeatures[this.fitFeatures.length] = {
"type": "Feature",
"properties": {
"message": this.fitGantry[i].staName+"("+this.fitGantry[i].FEE+")",
"gid": i + 1, //使
},
"geometry": {
"type": "Point",
"coordinates": [this.fitGantry[i].LNG, this.fitGantry[i].LAT]
}
}
}
if (i === this.fitGantry.length - 1) {
this.map.addFeaturePoint('fitPathD', this.fitFeatures, {
type: 'symbol', // symbolimg
paint: {
"text-opacity": 1, // 0 ~ 1 1
"text-color": "red", // #000000
"text-halo-color": "rgba(0,0,0,0)", // rgba(0,0,0,0)
"text-halo-width": 0, // >= 0 0
"text-halo-blur": 0, // >= 0 0
"text-translate": [0, 2], // [x, y] [0, 0]
},
layout: {
'icon-image': 'point', //使 46
'icon-allow-overlap': true, //
visibility: 'visible', //
'text-field': ['get', 'message'], // name
'text-font': ["Microsoft YaHei Regular"], //
'text-offset': [0, 0], //
'text-anchor': 'top', //
'text-size': 12, //
},
})
}
}
}
this.divFeatures=[];
if (this.divGantry != null && this.divGantry.length > 0) {
for (let i = 0; i < this.divGantry.length; i++) {
if(this.divGantry[i].LNG !="" && this.divGantry[i].LAT != ""){
console.log("拆分坐标名称====="+this.divGantry[i].staName+"("+this.divGantry[i].FEE+")");
this.divFeatures[this.divFeatures.length] = {
"type": "Feature",
"properties": {
"message": this.divGantry[i].staName+"("+this.divGantry[i].FEE+")",
"gid": i + 1, //使
},
"geometry": {
"type": "Point",
"coordinates": [this.divGantry[i].LNG * 1 + 0.01, this.divGantry[i].LAT * 1 + 0.01]
}
}
}
if (i === this.divGantry.length - 1) {
this.map.addFeaturePoint('divPathD', this.divFeatures, {
type: 'symbol', // symbolimg
paint: {
"text-opacity": 1, // 0 ~ 1 1
"text-color": "red", // #000000
"text-halo-color": "rgba(0,0,0,0)", // rgba(0,0,0,0)
"text-halo-width": 0, // >= 0 0
"text-halo-blur": 0, // >= 0 0
"text-translate": [0, 2], // [x, y] [0, 0]
},
layout: {
'icon-image': 'point', //使 46
'icon-allow-overlap': true, //
visibility: 'visible', //
'text-field': ['get', 'message'], // name
'text-font': ["Microsoft YaHei Regular"], //
'text-offset': [0, 0], //
'text-anchor': 'top', //
'text-size': 12, //
},
})
}
}
}
},
/*selectMap(rowData) {
if (this.map) {
this.map.removeLayer("fitPath")
this.map.removeLayer("divPath")
this.map.removeLayer("fitPathD")
this.map.removeLayer("divPathD")
}
this.rowData = rowData
getInfo({
fitPath: this.rowData.fitPath,
divPath: this.rowData.divPath
}).then(res => {
this.fitGantry = res.fitGantry
this.divGantry = res.divGantry
this.addMapLine();
this.addFeatures();
})
},*/
getMapDatas(data){
if (this.map) {
this.map.removeLayer("fitPath")
this.map.removeLayer("divPath")
this.map.removeLayer("fitPathD")
this.map.removeLayer("divPathD")
}
getMapDivDatas(data).then(
res=>{
if(res.code==1){
this.staInfoLoading=false;
this.mapData=res.data;
this.mapListData=res.data.tableList;
this.$nextTick(() => {
this.mapShow = false
this.initMap();
})
}else{
this.mapData={};
this.$message({
type:'error',
message:"数据查询失败"
});
}
}
)
},
},props:['params'],
mounted() {
_this=this;
// this.mapStyle = 'width:100%;height: ' + document.documentElement.clientHeight * 0.75 + 'px;z-index: 1;'
this.mapStyle = 'width: 100%;height:100%;position:relative;z-index: 1;'
if(this.$props.params ==undefined || this.$props.params=='' || this.$props.params=='null'){
console.log("params值为空==================");
}else{
this.getMapDatas(this.$props.params);
}
},
created() {
}
}
</script>
<style>
html, body, #mapDiv {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>

@ -1,223 +0,0 @@
<template>
<div class="map_1" style="width:100% !important;height:100%;">
<div style="width: 100%">
<el-checkbox v-model="divChecked" size="large" ><span style="width: 10px;height: 10px;background-color: #bf41c7ff;border-radius: 10px">&nbsp;&nbsp;&nbsp;&nbsp;</span></el-checkbox>
<el-checkbox v-model="fitChecked" size="large" ><span style="width: 10px;height: 10px;background-color: #18a45b;border-radius: 10px">&nbsp;&nbsp;&nbsp;&nbsp;</span></el-checkbox>
</div>
<div id="mapDiv" style="width:98% !important;height:90%;"></div>
</div>
</template>
<script>
import {getSelectList} from '/src/util/api/api.js';
import {v4} from "uuid";
var _this;
export default {
name: "index",
data() {
return {
rowData: {},
mapShow: false,
map: null,
mapStyle: '',
mapId: v4(),
mapData: {},
divChecked: true,
fitChecked: true,
staInfoLoading: false,
supportCanvas: false,
fitGantry: [],
divGantry: [],
//
fitPoints: [],
fitFeatures: [],
fitLineFeatures: [],
fitAttributes: {
paint: {
"line-color": '#18a45b', // 线
"line-width": 4, // 线
}
},
//
divPoints: [],
divFeatures: [],
divLineFeatures: [],
divAttributes: {
paint: {
"line-color": '#bf41c7', // 线
"line-width": 4, // 线
}
},
informationWindow: new HDmap.Popup({
closeButton: false,
closeOnClick: false,
className: "mapbox-popup",
maxWidth: "350px",
})
}
},
watch: {
fitChecked: {
deep: true,
handler(newValue, oldValue) {
if(newValue){
this.map.addFeaturePoint('fitPathD', this.fitFeatures, {
type: 'symbol', // symbolimg
paint: {
"text-opacity": 1, // 0 ~ 1 1
"text-color": "red", // #000000
"text-halo-color": "rgba(0,0,0,0)", // rgba(0,0,0,0)
"text-halo-width": 0, // >= 0 0
"text-halo-blur": 0, // >= 0 0
"text-translate": [0, 2], // [x, y] [0, 0]
},
layout: {
'icon-image': 'point', //使 46
'icon-allow-overlap': true, //
visibility: 'visible', //
'text-field': ['get', 'message'], // name
'text-font': ["Microsoft YaHei Regular"], //
'text-offset': [0, 0], //
'text-anchor': 'top', //
'text-size': 12, //
},
})
}else{
this.map.removeLayer("fitPath")
this.map.removeLayer("fitPathD")
}
},
}
},
methods: {
initMap() {
let mapData=this.mapData;
let LNG = 111.748028;
let LAT = 40.858154;
//
this.fitGantry = mapData;
this.fitPoints = [];
if (mapData.length > 0 ) {
for(var k=0;k<mapData.length;k++){
if(mapData[k] !==undefined && mapData[k].LNG !=="" && mapData[k].LNG !==undefined){
LNG = mapData[k].LNG;
LAT = mapData[k].LAT;
break;
}
}
}
console.log("中心坐标======LNG===="+LNG+"====LAT========"+LAT+"===STANAME=====");
let styleOption = Object.assign(
{},
HDmap.MapStyle.SM_WMTS_VEC_WHITE,
{glyphs: "./hdmap/fonts/{fontstack}/{range}.pbf"}
)
this.map = new HDmap.map({
container: 'mapDiv',
center: [LNG, LAT],
zoom: 5,
styleURL: styleOption
// styleURL: HDmap.MapStyle.SM_WMTS_VEC_WHITE //
})
this.map.map2d.on("style.load", (event) => {
_this.mapShow = true;
this.addFeatures();
//this.addMapLine();
});
},
addFeatures() {
if (!this.map) return
this.fitFeatures=[];
if (this.fitGantry != null && this.fitGantry.length > 0) {
for (let i = 0; i < this.fitGantry.length; i++) {
if(this.fitGantry[i].LNG !=="" && this.fitGantry[i].LAT !== ""){
console.log("计费坐标名称====="+this.fitGantry[i].NAME);
this.fitFeatures[this.fitFeatures.length] = {
"type": "Feature",
"properties": {
"message": this.fitGantry[i].NAME,
"gid": i + 1, //使
},
"geometry": {
"type": "Point",
"coordinates": [this.fitGantry[i].LNG, this.fitGantry[i].LAT]
}
}
}
if (i === this.fitGantry.length - 1) {
this.map.addFeaturePoint('fitPathD', this.fitFeatures, {
type: 'symbol', // symbolimg
paint: {
"text-opacity": 1, // 0 ~ 1 1
"text-color": "red", // #000000
"text-halo-color": "rgba(0,0,0,0)", // rgba(0,0,0,0)
"text-halo-width": 0, // >= 0 0
"text-halo-blur": 0, // >= 0 0
"text-translate": [0, 2], // [x, y] [0, 0]
},
layout: {
'icon-image': 'point', //使 46
'icon-allow-overlap': true, //
visibility: 'visible', //
'text-field': ['get', 'message'], // name
'text-font': ["Microsoft YaHei Regular"], //
'text-offset': [0, 0], //
'text-anchor': 'top', //
'text-size': 12, //
},
})
}
}
}
},
getMapDatas(data){
if (this.map) {
this.map.removeLayer("fitPathD")
}
let selectType={
"selectType":"ALL_FEE_LIST"
}
getSelectList(selectType).then(
res=>{
if(res.code===1){
this.staInfoLoading=false;
this.mapData=res.data;
this.$nextTick(() => {
this.mapShow = false
this.initMap();
})
}else{
this.mapData={};
this.$message({
type:'error',
message:"数据查询失败"
});
}
}
)
},
},props:['params'],
mounted() {
_this=this;
// this.mapStyle = 'width:100%;height: ' + document.documentElement.clientHeight * 0.75 + 'px;z-index: 1;'
this.mapStyle = 'width: 100%;height:100%;position:relative;z-index: 1;'
/* if(this.$props.params ===undefined || this.$props.params==='' || this.$props.params==='null'){
console.log("params值为空==================");
}else{
this.getMapDatas(this.$props.params);
}*/
this.getMapDatas();
},
created() {
}
}
</script>
<style>
html, body, #mapDiv {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>

@ -1,531 +0,0 @@
<template>
<div
id="container"
style="width: 100%; height: 100%;position: relative"
v-loading="fullscreenLoading"
:target="'.right'"
>
</div>
<el-dialog
:title="feeunitTitle"
v-model="feeDetail"
width="80%"
top="0.5%"
:close-on-click-modal="clickDialog"
>
<div style="height: 90%;width: 100%">
<div style="height: 14%;width: 100%;">
<el-form :inline="true" :label-position="right" class="demo-form-inline" style="width:100%;height: 100%">
<el-form-item label="日期:" class="s_el_row">
<el-date-picker
v-model="classdate"
type="date"
placeholder="选择日期"
:size="5"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:default-value="new Date()"
style="width:100%"
/>
</el-form-item>
<el-form-item label="PASSID" class="s_el_row">
<el-input type="text" style="width:100%;height:30px;border-color: gainsboro" v-model="SPASSID" clearable/>
</el-form-item>
<!-- <el-form-item label="入口名称:" class="s_el_row">
<el-select v-model="ennameid" filterable clearable style="width:100%;height:100%;border-color: gainsboro" placeholder="请选择">
<el-option
v-for="item in ENSTANNAMELIST"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="出口名称:" class="s_el_row">
<el-select v-model="exnameid" filterable clearable style="width:100%;height:100%;border-color: gainsboro" placeholder="请选择">
<el-option
v-for="item in EXSTANNAMELIST"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>-->
<el-form-item label="车牌:" class="s_el_row">
<el-input type="text" style="width:100%;height:100%;border-color: gainsboro" v-model="SVEHICLEID" placeholder="请输入准确的车牌" clearable/>
</el-form-item>
<!-- <el-form-item label="车牌颜色:" style="width:12%" class="s_el_row">
<el-select v-model="SPlateColor" filterable clearable style="width:100%;height:100%;border-color: gainsboro" placeholder="请选择">
<el-option
v-for="item in PlateColor"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>-->
<el-form-item label="车型:" class="s_el_row">
<el-select v-model="SVECHETYPE" filterable clearable style="width:100%;height:100%;border-color: gainsboro" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="车种:" class="s_el_row">
<el-select v-model="SVECHECLASS" filterable clearable style="width:100%;height:100%;border-color: gainsboro" placeholder="请选择">
<el-option
v-for="item in vecheClassList"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="出口计费方式:" class="s_el_row">
<el-select v-model="SEXITFEETYPE" filterable clearable style="width:100%;height:100%;border-color: gainsboro" placeholder="请选择">
<el-option
v-for="item in exitfeeType"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="拆分状态:" class="s_el_row">
<el-select v-model="status" filterable clearable style="width:100%;height:100%;border-color: gainsboro" placeholder="请选择">
<el-option
v-for="item in statusList"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="" style="width:8%;margin-bottom: 5px;" class="s_el_row">
<div style="display:flex;text-align: left; height:100%; position: relative;margin:0;padding-bottom:10px">
<el-button type="primary" @click="getDataListByPage" :icon="searchButton" style="padding: 0px 10px 0px 5px; position: relative;margin:0;">查询</el-button>
<el-button type="success" @click="exportExcle" style="padding: 0px 5px 0px 5px; position: relative;margin:0 0 1% 1%;">
<el-icon style="vertical-align: middle;">
<Upload />
</el-icon>
<span style="vertical-align: middle;"> 导出Excel </span>
</el-button>
</div>
</el-form-item>
</el-form>
</div>
<div style="height: 85%;width: 100%">
<el-table :data="tableDataDetail" height="100%" :header-cell-style="{background:'rgb(213,216,217)',align:'center'}" border v-loading="loading">
<el-table-column type="index" label="序号" align="center" width="100px"/>
<el-table-column prop="classdate" label="日期" :show-overflow-tooltip="true" :formatter="dateFormatter" width="180px" resizable align="center" />
<el-table-column prop="passid" label="PASSID" :show-overflow-tooltip="true" width="280px" resizable align="center" />
<el-table-column prop="tollintervalid" label="计费单元id" v-if="tableDisable" align="center" />
<el-table-column prop="fee" label="计费金额(元)" :show-overflow-tooltip="true" width="120px" resizable align="center" />
<el-table-column prop="payfee" label="实收金额" :show-overflow-tooltip="true" width="100px" resizable align="center" />
<el-table-column prop="transtime" label="日期" v-if="tableDisable" width="280px" resizable align="center" />
<el-table-column prop="mediatype" label="通行介质" v-if="tableDisable" width="100px" resizable align="center" />
<el-table-column prop="vehicleid" label="车牌号" :show-overflow-tooltip="true" width="100px" resizable align="center" />
<el-table-column prop="colortext" label="车牌颜色" :show-overflow-tooltip="true" width="100px" resizable align="center" />
<el-table-column prop="vehicletypename" label="车型" :show-overflow-tooltip="true" width="100px" resizable align="center" />
<el-table-column prop="vehicleclassname" label="车种" :show-overflow-tooltip="true" width="100px" resizable align="center" />
<el-table-column prop="divfee" label="拆分金额(元)" :show-overflow-tooltip="true" width="120px" resizable align="center" />
<el-table-column prop="divEnname" label="拆分入口名称" :show-overflow-tooltip="true" width="180px" resizable align="center" />
<el-table-column prop="divEntime" label="拆分入口时间" :show-overflow-tooltip="true" :formatter="dateFormatterSSS" width="180px" resizable align="center" />
<el-table-column prop="divExname" label="拆分出口名称" :show-overflow-tooltip="true" width="180px" resizable align="center" />
<el-table-column prop="divExtime" label="拆分出口时间" :show-overflow-tooltip="true" :formatter="dateFormatterSSS" width="180px" resizable align="center" />
<el-table-column prop="exitfeetypename" label="出口计费类型" :show-overflow-tooltip="true" width="180px" resizable align="center" />
<el-table-column prop="statusname" label="拆分状态" :show-overflow-tooltip="true" width="150px" resizable align="center" />
</el-table>
</div>
</div>
<div style="height: 5%;width: 100%;position:relative">
<!-- 分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[15, 30,50,100]"
:page-size="pageSize"
:total="totalCount"
layout="total, sizes, prev, pager, next, jumper"
style="width: 90%;height:100%;position:inherit;margin-top:5px;font-size: x-small">
</el-pagination>
</div>
</el-dialog>
</template>
<script>
import {getListByPage, getFeeLntLagList, exportDivPassidAllData, getSelectList} from "@/util/api/api";
import pro from "@/util/tool";
import {Search} from "@element-plus/icons-vue";
var _this;
export default {
name: "BaiduMap",
props: ["begindate","enddate"],
components: {
/* staOurLineNum,
gantryCarNumBar,
gantryCarPayFeeBar,
gantryOurLineNum,*/
},
data() {
return {
staGantryFlowLayer: "staGantryFlowLayer",
coordinates: [
{ lag: 111.350658, lnt: 40.138285 },
{ lag: 43.0005387, lnt: 115.9721003 },
],
map: null,
mapData: [],
rowStyle: "",
tableDataDetail: [],
fullscreenLoading: false,
loading: true,
tableDisable:false,
clickDialog:false,
feeDetail:false,
pageSize: 20,
pageNum:1,
totalCount:0,
tollvalid:"",
vecheClassList:[],
exitfeeType:[],
ENSTANNAMELIST:[],
EXSTANNAMELIST:[],
PlateColor:[],
statusList:[],
searchButton:Search,
//
feeunitTitle:"",//
classdate:"",
SVEHICLEID:"",
SVECHECLASS:"",
SVECHETYPE:"",
status:"",
enname:"",
exname:"",
SPASSID:"",
SEXITFEETYPE:""
};
},
methods: {
resize(width, height) {
this.width = width;
this.height = height;
map.reset();
}, handleSizeChange(val) {
this.pageSize = val;
this.loading=true;
this.getDataListByPage();
},handleCurrentChange(val) {
this.pageNum = val;
this.isLoding=true;
this.getDataListByPage();
},getDataListByPage(){//
var params={
"tollintervalid":this.tollvalid,
"pageNum":this.pageNum,
"pageSize":this.pageSize,
"queryStartTime":this.begindate,
"queryEndTime":this.enddate,
"classdate":this.classdate,
"SVEHICLEID":this.SVEHICLEID,
"SVECHECLASS":this.SVECHECLASS,
"SVECHETYPE":this.SVECHETYPE,
"status":this.status,
"SPASSID":this.SPASSID,
"SEXITFEETYPE":this.SEXITFEETYPE
}
getListByPage(params).then(res=>{
this.tableDataDetail=res.records;
this.loading=false;
this.totalCount=res.total;
})
},exportExcle(){
exportData();
},dateFormatterSSS(row, column, cellValue){
if(cellValue==null || cellValue=="" || cellValue==undefined){
return "";
}
//
return formatDate(cellValue,"YYYY-MM-DD HH:MM:SS");
},dateFormatter(row, column, cellValue){
if(cellValue==null || cellValue=="" || cellValue==undefined){
return "";
}
//
return formatDate(cellValue,"YYYY-MM-DD");
},
baiduMap() {
let styleOption = Object.assign(
{},
HDmap.MapStyle.SM_WMTS_VEC_WHITE,
{glyphs: "./hdmap/fonts/{fontstack}/{range}.pbf"}
)
this.map = new HDmap.map({
container: 'container',
center: [111.80282489244144, 41.72225716089292],
zoom: 5,
styleURL: styleOption
// styleURL: HDmap.MapStyle.SM_WMTS_VEC_WHITE //
})
this.map.map2d.on("style.load", (event) => {
this.initBMap();
});
//
this.map.map2d.on("click", (e) => {
//
let rect = [
[e.point.x - 1, e.point.y - 1],
[e.point.x + 1, e.point.y + 1],
];
//
if (this.map.map2d.getLayer(this.staGantryFlowLayer)) {
let features = this.map.map2d.queryRenderedFeatures(rect, {
layers: [this.staGantryFlowLayer], //
});
if (features.length === 0) {
return;
}
this.feeunitTitle=features[0].properties.message;
this.tollvalid = features[0].properties.index;
this.feeDetail=true;
this.getDataListByPage();
}
});
/* this.$nextTick(() => {
this.initBMap();
})*/
},
getLayer() {
return [this.staGantryFlowLayer];
},
//
clearLayer() {
this.map.removeLayer(this.staGantryFlowLayer);
},
initBMap() {
this.clearLayer();
var pointData=[];
for (let i = 0; i < this.mapData.length; i++) {
let dataItem = {
type: "Feature",
properties: {
message: this.mapData[i].NAME,
gid: i + 5 * (i + 1000), //使,
index: this.mapData[i].ID,
},
geometry: {
type: "Point",
coordinates: [this.mapData[i].LNG, this.mapData[i].LAT],
},
};
pointData.push(dataItem);
}
this.map.addFeaturePoint(
this.staGantryFlowLayer,
pointData,
{
/* type: 'circle',
paint: {
'circle-color': 'blue', //
'circle-radius': 6, //
},
layout:{
'text-field': '{message}',
'text-font': ['Microsoft YaHei Regular'],
'text-size': 14,
'text-anchor': 'center',
'text-allow-overlap': true,
'visibility': 'visible',
}*/
type: 'symbol', // symbolimg
paint: {
"text-opacity": 1, // 0 ~ 1 1
// "text-color": "red", // #000000
"text-halo-color": "rgba(0,0,0,0)", // rgba(0,0,0,0)
"text-halo-width": 0, // >= 0 0
"text-halo-blur": 0, // >= 0 0
"text-translate": [0, 0], // [x, y] [0, 0]
},
layout: {
'icon-image': 'point', //使 46
'icon-allow-overlap': false, //
"visibility": 'visible', //
'text-field': ['get', 'message'], // name
'text-font': ["Microsoft YaHei Regular"], //
'text-offset': [0, 0], //
'text-anchor': 'top', //
'text-size': 12, //
},
}
);
},
},
mounted() {
_this=this;
this.bmapStyle = {
width: this.$props.bgWidth + "px",
height: this.$props.bgWidth + "px",
};
this.width = this.$props.bgWidth;
this.height = this.$props.bgHeight;
// this.$nextTick(() => {
let selectTypeP={
"selectType":"ALL_GANTRY_LIST"
}
getSelectList(selectTypeP).then(res=>{
if(res.code>0){
this.mapData=res.data;
}
this.baiduMap();
let selectType={
"selectType":"VECHECLASS"
}
getSelectList(selectType).then(res=>{
if(res.code>0){
this.vecheClassList=res.data;
}
})
selectType={
"selectType":"VECHETYPE"
}
getSelectList(selectType).then(res=>{
if(res.code>0){
this.options=res.data;
}
})
selectType={
"selectType":"EXITFEETYPE"
}
getSelectList(selectType).then(res=>{
if(res.code>0){
this.exitfeeType=res.data;
}
})
selectType={
"selectType":"DIVSTATUS"
}
getSelectList(selectType).then(res=>{
if(res.code>0){
this.statusList=res.data;
}
})
})
// })
},
};
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 exportData(){
var paramsData={
"tollintervalid":_this.tollvalid,
"pageNum":_this.pageNum,
"pageSize":_this.pageSize,
"queryStartTime":_this.begindate,
"queryEndTime":_this.enddate,
"classdate":_this.classdate,
"SVEHICLEID":_this.SVEHICLEID,
"SVECHECLASS":_this.SVECHECLASS,
"SVECHETYPE":_this.SVECHETYPE,
"status":_this.status,
"SPASSID":_this.SPASSID,
"SEXITFEETYPE":_this.SEXITFEETYPE
}
exportDivPassidAllData({paramsData:JSON.stringify(paramsData)}).then(res => {
if (res.data != "") {
//fileName:
var fileName ='计费单元明细_'+getCurrentDateHour(); //decodeURIComponent(res.headers["Content-Disposition"].split("=")[1])
let blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' });
// ie
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
//ie
var downloadElement = document.createElement("a");
var href = window.URL.createObjectURL(blob); //url
downloadElement.href = href;
downloadElement.download = fileName; //
document.body.appendChild(downloadElement);
downloadElement.click(); //
document.body.removeChild(downloadElement); //
window.URL.revokeObjectURL(href); //blob
}
}
//false
_this.tableLoading=false;
});
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>
<style >
#container {
margin: 0px;
}
.el-dialog{
height: 96% !important;
margin-bottom: 0px !important;
}
.el-dialog__body{
height: 90% !important;
}
</style>

@ -1,301 +0,0 @@
<template>
<div id="main_div" style="width: 100%;height:100%;">
<div class="map_1" style="width:100% !important;height:100%;">
<div style="width: 100%">
<el-checkbox v-model="divChecked" size="large" ><span style="width: 10px;height: 10px;background-color: #bf41c7ff;border-radius: 10px">&nbsp;&nbsp;&nbsp;&nbsp;</span></el-checkbox>
<el-checkbox v-model="fitChecked" size="large" ><span style="width: 10px;height: 10px;background-color: #18a45b;border-radius: 10px">&nbsp;&nbsp;&nbsp;&nbsp;</span></el-checkbox>
</div>
<div class="mapDiv" >
<div id="container" style="width: 100%;height:99%;padding: 0 1% 2% 0;"></div>
</div>
</div>
</div>
</template>
<script>
import {ArrowRightBold} from "@element-plus/icons-vue";
import {getMapDivDatas} from '../../../util/api/api.js';
import { ref } from 'vue'
var _this;
export default {
name: "map",
components: {ArrowRightBold},
data() {
return {
pingData: {},
equipList: [],
staInfoLoading: false,
show:true,
mapStyle: 'width: 100%;height:100%;position:relative;',
divChecked: true,
fitChecked: true,
supportCanvas: false,
mapListData:[],
fitGantry: [],
divGantry: [],
//
fitPoints: [],
//
divPoints: [],
//
mapData:{}
}
}, watch: {
fitChecked: {
deep: true,
handler(newValue, oldValue) {
this.map.clearOverlays()
this.initBMap()
},
},
divChecked: {
deep: true,
handler(newValue, oldValue) {
this.map.clearOverlays()
this.initBMap()
},
},
},props:['params'],
methods: {
getMapDatas(data){
if(data==null){
this.buildMap();
}else{
getMapData(data);
}
},
buildMap() {
let mapData=this.mapData;
_this.show=true;
this.map = new BMap.Map('container', {minZoom: 7, maxZoom: 12})
let LNG = 111.748028;
let LAT = 40.858154;
let STANAME = '呼和浩特';
let _mapDivFEEList=mapData.mapDivFEEList;
let _mapFEEList=mapData.mapFEEList;
if (_mapDivFEEList.length > 0 ) {
for(var k=0;k<_mapDivFEEList.length;k++){
if(_mapDivFEEList[k] !=undefined && _mapDivFEEList[k].LNG !="" && _mapDivFEEList[k].LNG !=undefined && _mapDivFEEList[k].LAT !="" && _mapDivFEEList[k].LAT !=undefined){
LNG = _mapDivFEEList[k].LNG;
LAT = _mapDivFEEList[k].LAT;
STANAME = _mapDivFEEList[k].stanName;
break;
}
}
}else if(_mapFEEList.length>0 ){
/* LNG = _mapFEEList[0].LNG;
LAT = _mapFEEList[0].LAT;
STANAME = _mapFEEList[0].stanName;*/
for(var k=0;k<_mapFEEList.length;k++){
if(_mapFEEList[k] !=undefined && _mapFEEList[k].LNG !="" && _mapFEEList[k].LAT !="" && _mapFEEList[k].LNG !=undefined && _mapFEEList[k].LAT !=undefined){
LNG = _mapFEEList[k].LNG;
LAT = _mapFEEList[k].LAT;
STANAME = _mapFEEList[k].stanName;
break;
}
}
}
console.log("中心坐标======LNG===="+LNG+"====LAT========"+LAT+"===STANAME====="+STANAME);
var point = new BMap.Point(LNG, LAT) //
//
this.map.centerAndZoom(point, 8)
this.map.setCurrentCity(STANAME)
this.map.enableScrollWheelZoom(true)
_this.initBMap();
}, initBMap() {
let mapData=this.mapData;
//
this.fitGantry = mapData.mapFEEList;
this.fitPoints = [];
//
this.divGantry = mapData.mapDivFEEList;
this.divPoints = [];
let divGantryHaveLng=[];
let fitGantryHaveLng=[];
if(this.divChecked){
for (let i = 0; i < this.divGantry.length; i++) {
// fitPoints[fitPoints.length] = this.map.getOffsetPosition(new BMap.Point(this.fitGantry[i].LNG, this.fitGantry[i].LAT), '100', 45);
if(this.divGantry[i].LNG !="" && this.divGantry[i].LAT !=""){
this.divPoints[this.divPoints.length] = new BMap.Point(this.divGantry[i].LNG*1+0.01, this.divGantry[i].LAT*1+0.01)
divGantryHaveLng.push(this.divGantry[i]);
}
}
_this.drawPolyline(this.divPoints,"#bf41c7ff",divGantryHaveLng);
}
if(this.fitChecked){
for (let i = 0; i < this.fitGantry.length; i++) {
if(this.fitGantry[i].LNG !="" && this.fitGantry[i].LAT !="") {
this.fitPoints[this.fitPoints.length] = new BMap.Point(this.fitGantry[i].LNG, this.fitGantry[i].LAT)
fitGantryHaveLng.push(this.fitGantry[i]);
}
}
_this.drawPolyline(this.fitPoints,'#18a45b',fitGantryHaveLng);
}
// _this.drawPolyline(this.fitPoints,this.divPoints,'#18a45b',"#bf41c7ff");
// _this.drawPolyline(divPoints,'#ddd',"#bf41c7ff");
//
// this.map.addEventListener("zoomend", function () {
// // 线
// _this.drawPolyline(this.fitPoints,'#18a45b',this.fitGantry);
// _this.drawPolyline(this.divPoints,"#bf41c7ff",this.divGantry);
// });
},
drawPolyline(points,color,gantry) {
let _this = this; //this使
let polyline = "";
// 线
let sy = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, {
scale: 0.5,//
strokeColor: '#fff',//线
strokeWeight: '2',//线
});
let icons = new BMap.IconSequence(sy, '5px', '40px');
polyline = new BMap.Polyline(points, {
enableEditing: false,//线false
enableClicking: false,//true
// icons: [icons],
strokeWeight: '5',//线
strokeOpacity: 0.8,//线0 - 1
strokeColor: color//线
});
this.map.addOverlay(polyline); // 线
//线
// polyline.addEventListener("click", function (e) {
// //......
// });
for (let i = 0; i < gantry.length; i++) {
this.addMarker(
_this.map,
points[i],
gantry[i].staName+"("+gantry[i].FEE+")",
);
}
},
addMarker(map, point, number) {
let marker = "";//线
let label = "";//icon
let myIcon = new BMap.Icon(
//icon
//'../../../static/img/normal.png',
'/img/normal.png',
new BMap.Size(10, 10) //
);
myIcon.setImageSize(new BMap.Size(10, 10)); // icon
marker = new BMap.Marker(point, {icon: myIcon}); //
map.addOverlay(marker); //
//icon
label = new BMap.Label(number, {offset: new BMap.Size(10, -10)});
//
label.setStyle({
fontWeight: 500,
fontSize: '10px',
color: 'black',
// marginTop: '-15px',
backgroundColor: 'white',
border: 0,
});
console.log("label======"+label);
marker.setLabel(label); // icon
},buttonClick(){
this.drawer=true;
},submitCheck(){//
let submitDatas=this.checkInfo;
submitDatas.USERID=this.manno;
submitCheck(this.checkInfo).then(res=>{
if(res.code>0){
ElMessage({
type:"success",
message:"提交成功"
})
this.isCanSubmit=true;
}else{
ElMessage({
type:"error",
message:"提交失败"
})
return false;
}
})
}
},
mounted() {
_this=this;
if(this.$props.params ==undefined || this.$props.params=='' || this.$props.params=='null'){
this.buildMap();
}else{
this.getMapDatas(this.$props.params);
}
/* window.onresize = () => {
this.mapStyle = '';
this.$nextTick(() => {
setTimeout(() => {
const mapHeight = (document.documentElement.clientHeight) + 'px';
document.getElementById('container').style.height = mapHeight
this.mapStyle = 'position:relative;width: 90%;height: ' + document.documentElement.clientHeight + 'px;z-index: 0;margin-top:-0px'
}, 100)
})
}*/
}, created() {
this.mapStyle = 'width: 100%;height:100%;position:relative;z-index: 0;'
const elem = document.createElement('canvas');
this.supportCanvas = !!(elem.getContext && elem.getContext('2d'));
this.$nextTick(() => {
// //
// document.oncontextmenu = new Function('event.returnValue=false');
//
// document.onselectstart = new Function('event.returnValue=false');
});
},
beforeUnmount() {
}
}
function getMapData(_data){
// var _data=_this.$props.dataParams;
if(_data.length<1){
_this.buildMap();
}else{
getMapDivDatas(_data).then(
res=>{
if(res.code==1){
_this.staInfoLoading=false;
_this.mapData=res.data;
_this.mapListData=res.data.tableList;
_this.buildMap();
}else{
_this.mapData={};
_this.$message({
type:'error',
message:"数据查询失败"
});
}
}
)
if(_data.CHECKSTATUS ==1){
_this.isCanSubmit=false;
}
//
let dataParam={
"passId":_data.PASSID
}
}
}
</script>
<style >
.BMap_noprint >span{
display: none !important;
}
.anchorBL{
position:revert !important;
bottom: 0;
}
</style>

@ -0,0 +1,12 @@
<!-- 拆分未计费 计费数据进行匹配-->
<template>
</template>
<style >
</style>
<script >
</script>

@ -0,0 +1,263 @@
<!-- 计费未拆分 拆分数据进行匹配-->
<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>

@ -1,759 +0,0 @@
<!-- 数据核验子菜单页面未知状态-->
<template>
<div id="contain" style="width:100%;height: 100%;position: inherit">
<div class="detail" v-loading="isLoding" style="width:100%;height: 100%;position: inherit">
<div style="height:10%;width:100%;position: relative;margin-bottom: 5px">
<el-form :inline="true" :model="formInline" :label-position="right" class="demo-form-inline" style="width:100%;height: 100%">
<el-form-item label="日期:" class="s_el_row">
<el-date-picker
v-model="dataTime"
type="date"
placeholder="选择日期"
:size="5"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:default-value="new Date()"
style="width:100%"
/>
</el-form-item>
<el-form-item label="PASSID" class="s_el_row">
<el-input type="text" style="width:100%;height:30px;border-color: gainsboro" v-model="SPASSID" clearable/>
</el-form-item>
<el-form-item label="入口名称:" class="s_el_row">
<el-select v-model="SENSTANAMEID" filterable clearable style="width:100%;height:100%;border-color: gainsboro" placeholder="请选择">
<el-option
v-for="item in ENSTANNAMELIST"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="出口名称:" class="s_el_row">
<el-select v-model="SEXSTANAMEID" filterable clearable style="width:100%;height:100%;border-color: gainsboro" placeholder="请选择">
<el-option
v-for="item in EXSTANNAMELIST"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="车牌:" class="s_el_row">
<el-input type="text" style="width:100%;height:100%;border-color: gainsboro" v-model="SVEHICLEID" placeholder="请输入准确的车牌" clearable/>
</el-form-item>
<el-form-item label="车牌颜色:" style="width:12%" class="s_el_row">
<el-select v-model="SPlateColor" filterable clearable style="width:100%;height:100%;border-color: gainsboro" placeholder="请选择">
<el-option
v-for="item in PlateColor"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="车型:" style="width:12%" class="s_el_row">
<el-select v-model="SVECHETYPE" filterable clearable style="width:100%;height:100%;border-color: gainsboro" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="车种:" class="s_el_row">
<el-select v-model="SVECHECLASS" filterable clearable style="width:100%;height:100%;border-color: gainsboro" placeholder="请选择">
<el-option
v-for="item in vecheClassList"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="出口计费方式:" class="s_el_row" v-if="false">
<el-select v-model="SEXITFEETYPE" filterable clearable style="width:100%;height:100%;border-color: gainsboro" placeholder="请选择">
<el-option
v-for="item in exitfeeType"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="拆分状态:" style="margin-bottom: 5px;" class="s_el_row">
<el-select v-model="SSTATUS" filterable clearable style="width:100%;height:100%;border-color: gainsboro" placeholder="请选择">
<el-option
v-for="item in statusList"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="计费类型:" class="exitfeeetype" style="margin-bottom: 5px; width:25%;margin:0 2px 10px 0;position: inherit" >
<el-select v-model="SEXITTYPE" filterable clearable multiple="true" style="width:100%;height:100%;border-color: gainsboro" placeholder="请选择"
collapse-tags
collapse-tags-tooltip
:max-collapse-tags="2">
<el-option
v-for="item in exitfeeType"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="特情:" class="SPECIAL" style="margin-bottom: 5px; width:13%;margin:0 2px 10px 0;position: inherit" >
<el-select v-model="SPECIALEVENT" filterable clearable style="width:100%;height:100%;border-color: gainsboro" placeholder="请选择">
<el-option
v-for="item in specialList"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="方式:" style="margin-bottom: 5px;" class="s_el_row" >
<el-select v-model="SQUERYFILTER" clearable style="width:100%;height:100%;border-color: gainsboro" placeholder="请选择">
<el-option
v-for="item in querryFilterList"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="" style="width:8%;margin-bottom: 5px;" class="s_el_row">
<div style="display:flex;text-align: left; height:100%; position: relative;margin:0;padding:0">
<el-button type="primary" @click="search" :icon="searchButton" style="padding: 0px 5px 0px 5px; position: relative;margin:0 0 1% 1%;">查询</el-button>
<el-button type="success" @click="exportExcle" style="padding: 0px 5px 0px 5px; position: relative;margin:0 0 1% 1%;">
<el-icon style="vertical-align: middle;">
<Upload />
</el-icon>
<span style="vertical-align: middle;"> 导出Excel </span>
</el-button>
</div>
</el-form-item>
</el-form>
</div>
<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
@row-dblclick="showDetail"
v-loading="tableLoading"
:row-style="rowStyle">
<el-table-column prop="RN" label="序号" align="center" width="60px" />
<el-table-column prop="PASSID" label="PASSID" :show-overflow-tooltip="true" width="100px" resizable align="center"/>
<el-table-column prop="CLASSDATE" label="日期" :show-overflow-tooltip="true" width="100px" :formatter="dateFormatter" resizable align="center" />
<el-table-column prop="PASSTYPE" label="通行类型" v-if="false" :show-overflow-tooltip="true" resizable align="center" />
<el-table-column prop="GPA_ENTOLLSTATIONNAME" label="入口站" :show-overflow-tooltip="true" width="100px" resizable align="center" />
<el-table-column prop="GPA_ENTIME" label="入口时间" :show-overflow-tooltip="true" width="100px" :formatter="dateFormatterSSS" resizable align="center" />
<el-table-column prop="GPA_EXTOLLSTATIONNAME" label="出口站" :show-overflow-tooltip="true" width="100px" resizable align="center" />
<el-table-column prop="GPA_EXTIME" label="出口时间" :show-overflow-tooltip="true" width="100px" :formatter="dateFormatterSSS" resizable align="center" />
<el-table-column prop="GPA_VEHICLEID" label="车牌" :show-overflow-tooltip="true" width="100px" resizable align="center" />
<el-table-column prop="GPA_VEHICLETYPE" label="车型" v-if="false" :show-overflow-tooltip="true" resizable align="center" />
<el-table-column prop="VEHICLENAME" label="车型" :show-overflow-tooltip="true" width="100px" resizable align="center" />
<el-table-column prop="VEHICLECLASS" label="车种" v-if="false" :show-overflow-tooltip="true" resizable align="center" />
<el-table-column prop="VEHICLECLASSNAME" label="车种" :show-overflow-tooltip="true" width="100px" resizable align="center" />
<el-table-column prop="EXITFEETYPENAME" label="计费类型" :show-overflow-tooltip="true" width="100px" resizable align="center" />
<el-table-column prop="FLAG" label="出口特情" width="100px" :show-overflow-tooltip="true" align="center" resizable/>
<el-table-column prop="PAYTYPE" label="出口支付方式" width="100px" :show-overflow-tooltip="true" resizable align="center" />
<el-table-column prop="EXITFEETYPE" label="出口计费方式" width="100px" :show-overflow-tooltip="true" resizable align="center" />
<el-table-column prop="PAYFEE" label="出口应收(元)" width="110px" :show-overflow-tooltip="true" resizable align="center" />
<el-table-column prop="FEE" label="出口实收(元)" width="110px" :show-overflow-tooltip="true" resizable align="center" />
<el-table-column prop="GPA_FEE" label="计费金额(元)" :show-overflow-tooltip="true" width="110px" resizable align="center" />
<el-table-column prop="DIV_FEE" label="拆分金额(元)" :show-overflow-tooltip="true" width="110px" resizable align="center" />
<el-table-column prop="VEHICLECLASSNAME" label="基础里程" v-if="false" :show-overflow-tooltip="true" width="100px" resizable align="center" />
<el-table-column prop="STATUS" label="拆分状态" v-if="false" :show-overflow-tooltip="true" resizable align="center" />
<el-table-column prop="STATUSNAME" label="拆分状态" :show-overflow-tooltip="true" width="100px" resizable align="center" />
<el-table-column prop="CHECKSTATUS" label="稽核状态" v-if="false" :show-overflow-tooltip="true" resizable align="center" />
<el-table-column prop="CHECKSTATUSNAME" label="稽核状态" v-if="false" :show-overflow-tooltip="true" width="100px" resizable align="center" />
<el-table-column prop="GPA_TOLLINTERVALID" label="计费单元编码组" v-if="false" :show-overflow-tooltip="true" resizable align="center" />
<el-table-column prop="GPA_FEEGROUP" label="计费单元金额组" v-if="false" :show-overflow-tooltip="true" resizable align="center" />
<el-table-column prop="GPA_FEE" label="计费总计" v-if="false" :show-overflow-tooltip="true" resizable align="center" />
<el-table-column prop="DIV_TOLLINTERVALID" label="拆分单元编码组" v-if="false" :show-overflow-tooltip="true" resizable align="center" />
<el-table-column prop="DIV_FEEGROUP" label="拆分单元金额组" v-if="false" :show-overflow-tooltip="true" resizable align="center" />
<el-table-column prop="DIV_FEE" label="拆分总金额" v-if="false" :show-overflow-tooltip="true" resizable align="center" />
<el-table-column prop="GPA_ENPOINTID" label="入口站ID" v-if="false" :show-overflow-tooltip="true" resizable align="center" />
<el-table-column prop="GPA_EXPOINTID" label="出口站ID" v-if="false" :show-overflow-tooltip="true" resizable align="center" />
<!-- 出口站信息-->
<el-table-column prop="REMARK" label="备注" :show-overflow-tooltip="true" v-if="false" width="100px" resizable/>
<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-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>
</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>
body{
width: 100% !important;
height: 100% !important;
}
#contain{
height: 100% ;
width:100% ;
margin: 0px;
}
#table_el{
height: 100% !important;
}
.el-table .cell{
padding: 0 !important;
}
.el-table__inner-wrapper{
height:100%
}
.s_el_row {
width:13%;
margin:0 2px 10px 0;
position: inherit
}
.el-table__cell{
padding: 0 !important;
width:100%;
height:10% !important;
}
.el-dialog__body{
padding-bottom: 0;
padding-top: 2px;
height: 93%;
}
.el-dialog__headerbtn{
height: 0 !important;
margin-top: 1px;
}
.el-table__header{
height:50px !important;
}
.el-form-item__content{
align-items:self-start;
}
</style>
<script >
import { ref} from "vue";
import {getDivDatasTable, getSelectList,exportDivPassidAllData} from "../../../util/api/api.js";
import mapData from "./map-01.vue";
import divMoneyDetail from "./divMoneyDetail.vue";
import {Filter,Search} from '@element-plus/icons-vue'
import HintButton from "@/Components/HintButton/tipButton.vue";
import { ElMessage } from 'element-plus'
var _this;
export default{
data(){
return {
SPASSID:"",
ENSTANAME:"",
EXSTANAME:"",
SENSTANAMEID:"",
SEXSTANAMEID:"",
SVEHICLEID:"",
SVECHECLASS:"",
SVECHETYPE:"",
SPlateColor:"",
SEXITFEETYPE:"",
SSTATUS:"",
SEXITTYPE:"",
SPECIALEVENT:"",
specialList:[],
SQUERYFILTER:"1",
querryFilterList:[{"VALUE":"1","LABEL":"等于"},{"VALUE":"2","LABEL":"不等于"}],
SBAK1:"b",
currentPage: 1,
pageSize: 20,
fitvalue:true,
dataTime:'',
totalCount:0,
tableData :ref([]),
isShowMap:false,
isShowDivDetail:false,
isLoding:false,
dataParams:{},
mapParams:{},
Filter:Filter,
tableLoading:true,
searchButton:Search,
options:[],
vecheClassList:[],
exitfeeType:[],
ENSTANNAMELIST:[],
EXSTANNAMELIST:[],
PlateColor:[],
doubleclikIndex:-1,//
statusList:[{"VALUE":"1","LABEL":"拆分正常"},{"VALUE":"2","LABEL":"计费大于拆分"},{"VALUE":"3","LABEL":"计费小于拆分"},{"VALUE":"4","LABEL":"无计费"},{"VALUE":"5","LABEL":"无拆分"}]
}},
props:['params'],
methods:{
showDetail(row,column,e){
//skipMoneyVue(row);
this.doubleclikIndex=row.RN;//
let _params={
"GPA_TOLLINTERVALID": row.GPA_TOLLINTERVALID,
"GPA_FEEGROUP": row.GPA_FEEGROUP,
"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
}
_this.isShowDivDetail=true;
_this.dataParams=_params;
// _this.$refs.divDetail.getDivDatas(_params);
/* window.localStorage.setItem("params",JSON.stringify(params));
window.open(href.href,'Map',"",false)*/
},skipMapVue(row){
this.isShowMap=true;
let _params={
"GPA_TOLLINTERVALID": row.GPA_TOLLINTERVALID,
"GPA_FEEGROUP": row.GPA_FEEGROUP,
"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
}
_this.isShowMap=true;
_this.mapParams=_params;
// _this.$refs.mapD.getMapDatas(_params);
},
handleSizeChange(val) {
this.pageSize = val;
this.isLoding=true;
getTableDatas();
},
handleCurrentChange(val) {
this.currentPage = val;
this.isLoding=true;
getTableDatas();
}, 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");
},search(){
searchTableDatas();
},exportExcle(){
exportData();
},rowStyle(row,rowIndex){
if(this.doubleclikIndex===row.row.RN){
return {
"background-color":"lightcyan",
"cursor":"pointer"
}
}
return {
"cursor":"pointer"
}
}
},components:{
HintButton,
mapData,
divMoneyDetail,
Search
},
mounted(){
_this=this;
getTableDatas();
//
let selectType={
"selectType":"VECHECLASS"
}
getSelectList(selectType).then(res=>{
if(res.code>0){
this.vecheClassList=res.data;
}
})
selectType={
"selectType":"VECHETYPE"
}
getSelectList(selectType).then(res=>{
if(res.code>0){
this.options=res.data;
}
})
selectType={
"selectType":"EXITFEETYPE"
}
getSelectList(selectType).then(res=>{
if(res.code>0){
this.exitfeeType=res.data;
}
})
selectType={
"selectType":"STANAME"
}
getSelectList(selectType).then(res=>{
if(res.code>0){
this.ENSTANNAMELIST=res.data;
this.EXSTANNAMELIST=res.data;
}
})
selectType={
"selectType":"PLATECOLOR"
}
getSelectList(selectType).then(res=>{
if(res.code>0){
this.PlateColor=res.data;
}
})
selectType={
"selectType":"SPECIAL"
}
getSelectList(selectType).then(res=>{
if(res.code>0){
this.specialList=res.data;
}
})
}
}
function getTableDatas(){
// let paramDatas=JSON.parse(window.localStorage.getItem("params"));
let paramDatas=_this.$props.params;
if(paramDatas !=undefined){
if(paramDatas.dataTime !=undefined && paramDatas.dataTime !="" && _this.dataTime==""){
_this.dataTime=paramDatas.dataTime;
}else{
if(_this.dataTime =='' || _this.dataTime==undefined || _this.dataTime==""){
_this.dataTime=getCurrentDate();//
}
}
}else{
if(_this.dataTime =='' || _this.dataTime==undefined || _this.dataTime==""){
_this.dataTime=getCurrentDate();//
}
}
if(_this.SVEHICLEID.length>0 || _this.SPlateColor.toString().length > 0){
console.log(_this.SVEHICLEID +"=======>"+ _this.SPlateColor )
if(_this.SVEHICLEID.length <1){
console.log("11111");
ElMessage({
type:"warning",
message:"请输入车牌号",
duration:2000
})
return false;
}else if(_this.SPlateColor.toString() ==""){
ElMessage({
type:"warning",
message:"请选择车牌颜色",
duration:2000
})
return false;
}else{
}
}else{
}
var paramsData={
"dataTime": _this.dataTime,
"vecheType": paramDatas !=undefined && paramDatas.vecheType !=undefined?paramDatas.vecheType:"",
"pageSize":_this.pageSize,
"pageNum":_this.currentPage,
"vecheClass":paramDatas !=undefined && paramDatas.vecheClass !=undefined?paramDatas.vecheClass:"",
"status":paramDatas !=undefined && paramDatas.status !=undefined?paramDatas.status:"",
"SPASSID": _this.SPASSID ,
"ENSTANAME": _this.ENSTANAME ,
"EXSTANAME": _this.EXSTANAME ,
"SVEHICLEID":_this.SVEHICLEID !="" ?_this.SVEHICLEID+"_"+_this.SPlateColor:"",
"SVECHECLASS": _this.SVECHECLASS,
"SVECHETYPE": _this.SVECHETYPE,
"SEXITFEETYPE": _this.SEXITFEETYPE,
"SENSTANAMEID": _this.SENSTANAMEID,
"SEXSTANAMEID": _this.SEXSTANAMEID,
"SSTATUS": _this.SSTATUS,
"SBAK1": _this.SBAK1,
"SEXITTYPE":_this.SEXITTYPE,
"SPECIALEVENT":_this.SPECIALEVENT,
"SQUERYFILTER":_this.SQUERYFILTER
}
getDivDatasTable(paramsData).then(res=>{
_this.tableLoading=false;
if(res.code<=0){
return false;
}else{
_this.totalCount=res.count;
_this.tableData=res.data;
_this.isLoding=false;
}
})
}
function searchTableDatas(){
let paramDatas=_this.$props.params;
//
if(_this.SVEHICLEID.length>0 || _this.SPlateColor.toString().length > 0){
console.log(_this.SVEHICLEID +"=======>"+ _this.SPlateColor )
if(_this.SVEHICLEID.length <1){
console.log("11111");
ElMessage({
type:"warning",
message:"请输入车牌号",
duration:2000
})
return false;
}else if(_this.SPlateColor.toString() ==""){
ElMessage({
type:"warning",
message:"请选择车牌颜色",
duration:2000
})
return false;
}else{
console.log("3333");
}
}else{
console.log("4444");
}
_this.tableLoading=true;
var paramsData={
"dataTime": _this.dataTime,
"vecheType": paramDatas !=undefined && paramDatas.vecheType !=undefined?paramDatas.vecheType:"",
"pageSize":_this.pageSize,
"pageNum":_this.currentPage,
"vecheClass":paramDatas !=undefined && paramDatas.vecheClass !=undefined?paramDatas.vecheClass:"",
"status":paramDatas !=undefined && paramDatas.status !=undefined?paramDatas.status:"",
"SPASSID": _this.SPASSID ,
"ENSTANAME": _this.ENSTANAME ,
"EXSTANAME": _this.EXSTANAME ,
"SVEHICLEID": _this.SVEHICLEID !="" ?_this.SVEHICLEID+"_"+_this.SPlateColor:"",
"SVECHECLASS": _this.SVECHECLASS,
"SVECHETYPE": _this.SVECHETYPE,
"SEXITFEETYPE": _this.SEXITFEETYPE,
"SENSTANAMEID": _this.SENSTANAMEID,
"SEXSTANAMEID": _this.SEXSTANAMEID,
"SSTATUS": _this.SSTATUS,
"SBAK1": _this.SBAK1,
"SEXITTYPE":_this.SEXITTYPE,
"SPECIALEVENT":_this.SPECIALEVENT,
"SQUERYFILTER":_this.SQUERYFILTER
}
getDivDatasTable(paramsData).then(res=>{
_this.tableLoading=false;
if(res.code<=0){
return false;
}else{
_this.totalCount=res.count;
_this.tableData=res.data;
_this.isLoding=false;
}
})
}
function exportData(){
let paramDatas=_this.$props.params;
if(_this.SVEHICLEID.length>0 || _this.SPlateColor.toString().length > 0){
console.log(_this.SVEHICLEID +"=======>"+ _this.SPlateColor )
if(_this.SVEHICLEID.length <1){
console.log("11111");
ElMessage({
type:"warning",
message:"请输入车牌号",
duration:2000
})
return false;
}else if(_this.SPlateColor.toString() ==""){
ElMessage({
type:"warning",
message:"请选择车牌颜色",
duration:2000
})
return false;
}else{
}
}else{
}
_this.tableLoading=true;
let _SEXITTYPE=_this.SEXITTYPE;
if(_SEXITTYPE=='' || _SEXITTYPE.length<1){
_SEXITTYPE="";
}
var paramsData={
"dataTime": _this.dataTime,
"vecheType": paramDatas !=undefined && paramDatas.vecheType !=undefined?paramDatas.vecheType:"",
"pageSize":_this.pageSize,
"pageNum":_this.currentPage,
"isPage":"Y",
/* "pageSize":_this.totalCount,
"pageNum":1,*/
"vecheClass":paramDatas !=undefined && paramDatas.vecheClass !=undefined?paramDatas.vecheClass:"",
"status":paramDatas !=undefined && paramDatas.status !=undefined?paramDatas.status:"",
"SPASSID": _this.SPASSID ,
"ENSTANAME": _this.ENSTANAME ,
"EXSTANAME": _this.EXSTANAME ,
"SVEHICLEID": _this.SVEHICLEID !="" ?_this.SVEHICLEID+"_"+_this.SPlateColor:"",
"SVECHECLASS": _this.SVECHECLASS,
"SVECHETYPE": _this.SVECHETYPE,
"SEXITFEETYPE": _this.SEXITFEETYPE,
"SENSTANAMEID": _this.SENSTANAMEID,
"SEXSTANAMEID": _this.SEXSTANAMEID,
"SSTATUS": _this.SSTATUS,
"SBAK1": _this.SBAK1,
"SEXITTYPE":_SEXITTYPE,
"SPECIALEVENT":_this.SPECIALEVENT,
"SQUERYFILTER":_this.SQUERYFILTER
}
exportDivPassidAllData({paramsData:encodeURIComponent(JSON.stringify(paramsData))}).then(res => {
if (res.data != "") {
//fileName:
var fileName ='数据核验_'+getCurrentDateHour(); //decodeURIComponent(res.headers["Content-Disposition"].split("=")[1])
let blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' });
// ie
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
//ie
var downloadElement = document.createElement("a");
var href = window.URL.createObjectURL(blob); //url
downloadElement.href = href;
downloadElement.download = fileName; //
document.body.appendChild(downloadElement);
downloadElement.click(); //
document.body.removeChild(downloadElement); //
window.URL.revokeObjectURL(href); //blob
}
}
//false
_this.tableLoading=false;
});
}
function skipMoneyVue(row){
let _params={
"GPA_TOLLINTERVALID": row.GPA_TOLLINTERVALID,
"GPA_FEEGROUP": row.GPA_FEEGROUP,
"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>

@ -12,11 +12,11 @@
<div style="display: flex;width:1680px;height: 250px">
<div style="display: block;width:50%;height: 250px">
<div style="border-bottom: #d5d8d9 solid 2px;height: 30px;width:90%;position: relative"><b style="font-size: 15px;">拆分</b></div>
<div style="border-bottom: #d5d8d9 solid 2px;height: 30px;width:90%;position: relative"><b style="font-size: 15px;">有计费无拆分</b></div>
<div id="noDivLine" style="width: 800px;height:220px" v-loading="loading" ></div>
</div>
<div style="display: block;width:50%;height: 250px">
<div style="border-bottom: #d5d8d9 solid 2px;height: 30px;width:90%;position: relative"><b style="font-size: 15px;">未计费</b></div>
<div style="border-bottom: #d5d8d9 solid 2px;height: 30px;width:90%;position: relative"><b style="font-size: 15px;">无计费有拆分</b></div>
<div id="noFeeLine" style="width: 800px;height:220px" v-loading="loading" ></div>
</div>
</div>

@ -10,11 +10,11 @@
<div id="divRightLine" style="width: 700px;height:230px;border-bottom: #6b778c 1px solid" v-loading="loading" ></div>
</div>
<div style="display: block;width:100%;height: 250px">
<div style="width:90%;position: relative"><b >拆分</b></div>
<div style="width:90%;position: relative"><b >有计费无拆分</b></div>
<div id="noDivLine" style="width: 700px;height:230px;border-bottom: #6b778c 1px solid" v-loading="loading" ></div>
</div>
<div style="display: block;width:100%;height: 250px">
<div style="width:90%;position: relative"><b >未计费</b></div>
<div style="width:90%;position: relative"><b >无计费有拆分</b></div>
<div id="noFeeLine" style="width: 700px;height:230px;border-bottom: #6b778c 1px solid" v-loading="loading" ></div>
</div>
<div style="display: block;width:100%;height: 250px">

@ -1,7 +1,7 @@
<template>
<div class="top_div">
<el-form :inline="true" :model="formInline" :label-position="right" class="demo-form-inline" style="width:100%;height: 100%">
<el-form-item label="日期:" class="s_el_row">
<el-form :inline="true" :label-position="right" style="width:100%;height: 100%">
<el-form-item label="日期:" >
<el-date-picker
v-model="rpTime"
type="datetimerange"
@ -23,7 +23,7 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="路段名称:" class="s_el_row" style="width:12%">
<el-form-item label="路段名称:" class="s_el_row" style="width:15%">
<el-select v-model="roadno" @change="changeroadValue" filterable placeholder="请选择..." clearable style="width:100%;height:100%;border-color: gainsboro">
<el-option
v-for="item in roadDatas"
@ -33,7 +33,7 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="收费站:" class="s_el_row" style="width:10%">
<el-form-item label="收费站:" class="s_el_row" style="width:15%">
<el-select v-model="stano" filterable placeholder="请选择..." style="width:100%;height:100%;border-color: gainsboro" clearable>
<el-option
v-for="item in staDatas"
@ -43,21 +43,42 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item style="padding: 0px;margin-right:5px;">
<el-form-item style="padding: 0px;margin-right:55px;">
<el-radio-group v-model="radio" @change="changeRadio">
<el-radio :label="6">集团汇总</el-radio>
<el-radio :label="6">集团汇总(不包含减免车)</el-radio>
<el-radio :label="9">减免汇总</el-radio>
<el-radio :label="3">环比数据</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="阈值(%)" style="padding: 0px;margin-left:5px;">
<el-input-number v-model="num" :precision="2" :min="0" :step="0.1" :max="100" @change="refreshEveryData"></el-input-number>
</el-form-item>
<el-form-item label="" style="width:8%;margin-right:5px" class="s_el_row">
<div style="display:flex;text-align: left; height:100%; position: relative;margin:0;padding:0">
<el-button type="primary" style="margin-top: 0px;" @click="search" class="query_button" size="default" :icon="searchButton">查询</el-button>
<el-button type="primary" style="margin-top: 0px;" v-if="showExportButton" @click="exportExcle" class="query_button" size="default" :icon="uploadButton"></el-button>
</div>
</el-form-item>
</el-form>
</div>
<div class="contain-div">
<!-- <div>
<el-row :gutter="12">
<el-col :span="12">
<el-card >
计费总金额(万元){{totalFee}}}
</el-card>
</el-col>
<el-col :span="12">
<el-card>
拆分总金额(万元){{totalDiv}}}
</el-card>
</el-col>
</el-row>
</div>-->
<div style="width:100%;height: 300px;border-bottom: #6b778c 1px solid;position:relative">
<div id="feePie" style="width: 700px;height:230px" v-loading="loading" ></div>
</div>
<div class="everydata_div" style="width:100%;height: 600px;border-bottom: #6b778c 1px solid;position:relative">
<div style="width:100%;padding-bottom: 20px;height: 100%" v-show="hbShow">
<hbData ref="hbData" ></hbData>
@ -72,92 +93,7 @@
<div class="charts_div" style="height: 800px;position:relative">
<echatsTotalLine ref="echatsTotalLine" />
</div>
<div class="middle-div">
<div class="middle-div-left">
<el-row style="padding-bottom: 10px;" type="flex" justify="center" align="middle">
<el-col :span="12">
<el-select v-model="divStatus"
placeholder="请选择拆分状态"
size="large"
clearable="true"
filterable="true"
@change="changeRank"
style="width:100%">
<el-option
v-for="item in divStatusList"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE"
/>
</el-select>
</el-col>
<el-col :span="3" style="text-align: center;justify-content: center;align-items: center">排名数</el-col>
<el-col :span="9">
<el-input-number v-model="rankNum" @change="changeRankData" :min="1" label=""></el-input-number>
</el-col>
</el-row>
<el-table :data="rankdata" :header-cell-style="{background:'rgb(201,198,198)',align:'center'}" height="95%" border v-loading="tableloading"
@row-dblclick="showDivDetial">
<el-table-column type="index" label="排名" align="center" width="80px"/>
<el-table-column prop="tollintervalidname" label="计费单元" :show-overflow-tooltip="true" width="230px" resizable align="center" />
<el-table-column prop="tollintervalid" label="计费单元id" v-if="false" />
<el-table-column prop="fee" label="计费金额(元)" :show-overflow-tooltip="true" width="200px" resizable align="center" />
</el-table>
</div>
<div class="middle-div-right">
<div class="hz-div">
<el-row style="padding-bottom: 20px;position: relative;border-bottom: #c9c6c6 solid">
<el-col :span="6">
<i style="font-size: 15px">车流量{{carCount}} </i>
</el-col>
<el-col :span="6">
<i style="font-size: 15px">计费金额{{feeTotal}} </i>
</el-col>
<el-col :span="6" v-if="false">
<i style="font-size: 15px">应收金额{{payfeeTotal}} </i>
</el-col>
<el-col :span="6">
<i style="font-size: 15px">拆分金额{{divfeeTotal}} </i>
</el-col>
</el-row>
<el-row style="padding-bottom:10px;position: relative;">
<el-col :span="24">
<el-radio-group v-model="vehicleclassText" @change="changeData">
<el-radio label="KC">客车</el-radio>
<el-radio label="HC">货车</el-radio>
<el-radio label="JM">减免车</el-radio>
</el-radio-group>
</el-col>
</el-row >
<el-row style="padding-bottom:15px;position: relative;border-bottom: #c9c6c6 solid">
<el-col :span="6" >
<i style="font-size: 15px">车流量{{typecarCount}} </i>
</el-col>
<el-col :span="6" >
<i style="font-size: 15px">计费金额{{typefeeTotal}} </i>
</el-col>
<el-col :span="6" v-if="false">
<i style="font-size: 15px">应收金额{{typepayfeeTotal}} </i>
</el-col>
<el-col :span="6">
<i style="font-size: 15px">拆分金额{{typedivfeeTotal}} </i>
</el-col>
</el-row>
</div>
<div class="dt-div">
<mapvue ref="map" :begindate="begindate" :enddate="enddate"></mapvue>
</div>
</div>
</div>
</div>
<el-dialog :title="feeunitTitleMain"
v-model="feeDetailShow"
width="80%"
top="0.5%"
style="height: 50%"
:close-on-click-modal="clickDialog">
<feeStatDetail :key="new Date().getTime()" :begindate="begindate" :enddate="enddate" :divStatus="divStatus" :tollvalid="tollvalid"></feeStatDetail>
</el-dialog>
</template>
<style >
html{
@ -177,45 +113,20 @@ body{
width: 100%;
}
.top_div{
height: 5%;
height: 10%;
width: 100%;
border-bottom: #c9c6c6 solid;
top: 0;
/*z-index: 1000; /* 确保它在其他内容之上 */
}
.middle-div{
height: 95%;
width: 100%;
display: flex;
border-top: #c9c6c6 solid;
}
.middle-div-left{
height: 100%;
width: 30%;
border-right: #c9c6c6 solid;
}
.middle-div-right{
height: 100%;
width: 70%;
}
.hz-div{
height: 15%;
width: 100%;
}
.dt-div{
height: 85%;
width: 100%;
}
</style>
<script >
import {
Search
Search, Upload
} from '@element-plus/icons-vue'
import {watch,ref} from 'vue'
import { getSelectList,getRankList,getHzData} from "@/util/api/api";
import mapvue from '@/views/dev/detail/map.vue'
import feeStatDetail from '@/views/dev/detail/feeStatDetail.vue'
import {getSelectList, getRankList, getHzData, exportDivPassidAllData} from "@/util/api/api";
import everyDayData from "@/views/dev/detail/everyDayData.vue";
import hbData from "@/views/dev/detail/hbData.vue";
import echatsTotalLine from "@/views/dev/echarts/echatsTotalLine.vue";
@ -231,44 +142,33 @@ data() {
radio:6,
showHZ:true,
showHZMF:false,
tableloading:false,
loading:false,
rpTime:"",
num:90,
searchButton:Search,
uploadButton:Upload,
clickDialog:false,
divStatus:"",
divStatusList:[],
rankList:[{"VALUE":1,"LABEL":"10"},{"VALUE":2,"LABEL":"20"},{"VALUE":3,"LABEL":"30"}],
carCount:"0",
feeTotal:"0",
payfeeTotal:"0",
divfeeTotal:"0",
typecarCount:"0",
typefeeTotal:"0",
typepayfeeTotal:"0",
typedivfeeTotal:"0",
showExportButton:true,
begindate:"",
enddate:"",
diffDate:1,//
firstChooseDate:"",
hbStartTimeQuery:"",
hbEndTimeQuery:"",
rankdata:[],
rankNum:10,
vehicleclassText:"KC",
feeunitTitleMain:"",
feeDetailShow:false,
tollvalid:"",
subcomDatas: [],
roadDatas: [],
staDatas: [],
subcomno: "",
roadno: "",
stano: "",
totalFee: 0,
totalDiv: 0,
}
},
methods: {
changeRadio(value){
if(value===3){
this.showExportButton=false;
this.hbShow=true;
this.showHZ=false;
this.showHZMF=false;
@ -279,19 +179,35 @@ methods: {
this.$refs["hbData"].refreshDataHb(this.begindate,this.enddate,this.hbStartTimeQuery,this.hbEndTimeQuery)
}
}else if(value===9){
this.showExportButton=false;
this.hbShow=false;
this.showHZ=false;
this.showHZMF=false;
this.showClass=true;
this.$refs["everyDayDataJM"].refreshData(this.begindate,this.enddate,this.subcomno,this.roadno,this.stano,this.radio)
}else if(value===6 ){
if(!this.num){
this.num=90;
}
this.showExportButton=true;
this.hbShow=false;
this.showHZ=true;
this.showHZMF=false;
this.showClass=false;
this.$refs["everyDayData"].refreshData(this.begindate,this.enddate,this.subcomno,this.roadno,this.stano,this.radio)
this.$refs["everyDayData"].refreshData(this.begindate,this.enddate,this.subcomno,this.roadno,this.stano,this.radio,this.num)
}
},refreshEveryData(){
if(!this.num){
this.num=90;
}
if(value===6 ){
this.hbShow=false;
this.showHZ=true;
this.showHZMF=false;
this.showClass=false;
this.$refs["everyDayData"].refreshData(this.begindate,this.enddate,this.subcomno,this.roadno,this.stano,this.radio,this.num)
}
},calendarChange (val) {
this.firstChooseDate = val[0].getTime() //
if (val[1]) {
@ -313,6 +229,7 @@ methods: {
alert("请选择日期");
return ;
}
this.$refs["echatsTotalLine"].refreshData(this.begindate,this.enddate,this.subcomno,this.roadno,this.stano);
if(this.radio ===3){
this.$refs["hbData"].refreshDataHb(this.begindate,this.enddate,this.hbStartTimeQuery,this.hbEndTimeQuery)
@ -321,96 +238,6 @@ methods: {
}else{
this.$refs["everyDayData"].refreshData(this.begindate,this.enddate,this.subcomno,this.roadno,this.stano,this.radio)
}
var params={
"pageNum":1,
"pageSize":10,
"queryStartTime":this.begindate,
"queryEndTime":this.enddate,
"status":this.divStatus,
"subcomno":this.subcomno,
"roadno":this.roadno,
"stano":this.stano
}
getRankList(params).then(res=>{
this.rankdata=res.records
this.tableloading=false;
})
this.getAllFeeData();
},changeRank(vale){
this.tableloading=true;
this.divStatus=vale;
var params={
"pageNum":1,
"pageSize":(this.rankNum===null||this.rankNum==='')?10:this.rankNum,
"queryStartTime":this.begindate,
"queryEndTime":this.enddate,
"status":this.divStatus,
"subcomno":this.subcomno,
"roadno":this.roadno,
"stano":this.stano
}
getRankList(params).then(res=>{
this.rankdata=res.records
this.tableloading=false;
})
},changeRankData(vale){
this.tableloading=true;
var params={
"pageNum":1,
"pageSize":vale,
"queryStartTime":this.begindate,
"queryEndTime":this.enddate,
"status":this.divStatus,
"subcomno":this.subcomno,
"roadno":this.roadno,
"stano":this.stano
}
getRankList(params).then(res=>{
this.rankdata=res.records
this.tableloading=false;
})
},changeData(lablev){
this.vehicleclassText=lablev;
var params={
"queryStartTime":this.begindate,
"queryEndTime":this.enddate,
"subcomno":this.subcomno,
"roadno":this.roadno,
"stano":this.stano
}
params.vehicleclassText=lablev;
getHzData(params).then(res=>{
this.typecarCount=res.carcount;
this.typefeeTotal=res.feeTotal;
this.typepayfeeTotal=res.payfeeTotal;
this.typedivfeeTotal=res.divfeeTotal;
});
},showDivDetial(row,column,e){
this.feeunitTitleMain=row.tollintervalidname;
this.feeDetailShow=true;
this.tollvalid=row.tollintervalid;
},getAllFeeData(){
var params={
"queryStartTime":this.begindate,
"queryEndTime":this.enddate,
"subcomno":this.subcomno,
"roadno":this.roadno,
"stano":this.stano
}
getHzData(params).then(res=>{
this.carCount=res.carcount;
this.feeTotal=res.feeTotal;
this.payfeeTotal=res.payfeeTotal;
this.divfeeTotal=res.divfeeTotal;
});
params.vehicleclassText=this.vehicleclassText;
getHzData(params).then(res=>{
this.typecarCount=res.carcount;
this.typefeeTotal=res.feeTotal;
this.typepayfeeTotal=res.payfeeTotal;
this.typedivfeeTotal=res.divfeeTotal;
});
}, changesubcomnoValue() {
this.stano="";
this.roadno="";
@ -420,25 +247,71 @@ methods: {
}, changeroadValue() {
this.stano="";
getStalist();
},exportExcle(){
this.$refs["everyDayData"].exportExcle(this.begindate,this.enddate,this.subcomno,this.roadno,this.stano,this.radio)
},initOption(data,echartsId,title,subtext) {
let myChart = this.$echarts.init(document.getElementById(echartsId))
//
this.option = {
title: {
text: title,
subtext: subtext,
left: 'center'
},
tooltip: {
trigger: 'item',
left:'left'
},
legend: {
orient: 'horizontal', // vertical
top: 'bottom',
fontSize:'5px'
},
series: [
{
type: 'pie',
avoidLabelOverlap: true, //
radius: '55%',//55 , label
//radius: ['50%','70%'],//55 , label
center: ['50%', '50%'],// X Y
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
label: {
show: true,
formatter: echartsId==='vehicleclassRate'?'{b}:{c}%':'{b}:{c}'
},
labelline:{
show: true
},
//
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: data
}
]
};
myChart.setOption(this.option);
}
},
components: {
echatsTotalLine,
everyDayDataJM,
mapvue,
feeStatDetail,
everyDayData,
hbData
},
mounted() {
_this=this;
getsubcomlist();
getRoadlist();
getStalist();
let selectType={
"selectType":"DIVSTATUS"
}
@ -448,6 +321,12 @@ mounted() {
this.divStatusList=res.data;
}
})
var data=[];
data.push({
value: 0,
name: "未拆分"
});
this.initOption(data,"feePie","未拆分金额与已拆分金额","单位:万元");
}
}
@ -502,6 +381,38 @@ function getStalist() {
}
)
}
function getTotalFeeAndDivFee() {
let staParams = {
"queryStartTime": _this.begindate,
"queryEndTime": _this.enddate,
"subcomno": _this.subcomno,
"roadno": _this.roadno,
"stano": _this.stano
}
var data = [];
getTotalFeeAndDivFee(staParams).then(
res => {
_this.loading=false;
if (res.code > 0) {
_this.totalFee = res.data.fee
_this.totaldivfee = res.data.divfee
data.push({
value: res.data.fee,
name: "未拆分"
});
data.push({
value: res.data.divfee,
name: "已拆分"
});
} else {
_this.totalFee = 0
_this.totaldivfee = 0
}
tool.initOption(data,"feePie","未拆分金额与已拆分金额","单位:万元")
}
)
}
function getCurrentDate(){
var myDate = new Date(); //
myDate.setDate(myDate.getDate() - 1);

@ -0,0 +1,252 @@
<!-- 计费与未拆分数据比对 拆分与未计费数据比对 -->
<template>
<div id="first_div_0507">
<el-form :inline="true" :model="formInline" :label-position="right" style="width:100%;height: 100%">
<el-form-item label="日期:" class="s_el_row">
<el-date-picker
v-model="rpTime"
type="datetimerange"
range-separator="To"
start-placeholder="开始时间"
end-placeholder="结束时间"
value-format="YYYY-MM-DD HH:mm:ss"
format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item label="分公司名称:" class="s_el_row" style="width:13%">
<el-select v-model="subcomno" @change="changesubcomnoValue" filterable placeholder="请选择..." clearable="true" style="width:100%;height:100%;border-color: gainsboro">
<el-option
v-for="item in subcomDatas"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="路段名称:" class="s_el_row" style="width:12%">
<el-select v-model="roadno" @change="changeroadValue" filterable placeholder="请选择..." clearable style="width:100%;height:100%;border-color: gainsboro">
<el-option
v-for="item in roadDatas"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="收费站:" class="s_el_row" style="width:10%">
<el-select v-model="stano" filterable placeholder="请选择..." style="width:100%;height:100%;border-color: gainsboro" clearable>
<el-option
v-for="item in staDatas"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="匹配类型:" class="s_el_row" style="width:10%">
<el-select v-model="multiType" filterable placeholder="请选择..." style="width:100%;height:100%;border-color: gainsboro" clearable>
<el-option
v-for="item in multiTypeList"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item style="padding: 0px;margin-right:5px;">
<el-radio-group v-model="radio" @change="changeRadio">
<el-radio :label="5">计费未拆分</el-radio>
<el-radio :label="4">拆分未计费</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="" style="width:8%;margin-right:5px" class="s_el_row">
<div style="display:flex;text-align: left; height:100%; position: relative;margin:0;padding:0">
<el-button type="primary" style="margin-top: 0px;" @click="search" class="query_button" size="default" :icon="searchButton">查询</el-button>
</div>
</el-form-item>
</el-form>
</div>
<div id="second_div_0507" v-if="showFeeNoDiv">
<feeAndNodiv ref="feeAndNodiv" />
</div>
</template>
<style scoped>
#first_div_0507{
height: 10%;
width: 100%;
}
#second_div_0507{
height: 90%;
width: 100%;
}
</style>
<script>
import {
Search
} from '@element-plus/icons-vue'
import { getSelectList} from "@/util/api/api";
import feeAndNodiv from "@/views/dev/detail/nodivandnofee/feeAndNodiv.vue"
import tool from "@/util/tool";
var _this;
export default {
name: "nodivAndnofee",
data() {
return {
showFeeNoDiv:true,
showDivNofee:false,
radio:5,
rpTime:"",
searchButton:Search,
clickDialog:false,
divStatus:"",
divStatusList:[],
queryStartTime:"",
queryEndTime:"",
subcomDatas: [],//
roadDatas: [],//
staDatas: [],//
multiTypeList: [{"VALUE":"Y","LABEL":"匹配一条"},{"VALUE":"M","LABEL":"匹配多条"},{"VALUE":"W","LABEL":"未匹配"}],//
subcomno: "",
roadno: "",
stano: "",
multiType: "",
divstatus:4,
paramAll:{}
}
},
methods: {
changeRadio(value){
if(value===5){
this.showFeeNoDiv=true;
this.showDivNofee=false;
this.divstatus=4;
}else{
this.showFeeNoDiv=false;
this.showDivNofee=true;
this.divstatus=5;
}
this.paramAll.status=value;
this.paramAll.divstatus=this.divstatus;
},
search() {//
console.log(this.rpTime)
if(this.rpTime){
this.queryStartTime=this.rpTime[0];
this.queryEndTime=this.rpTime[1];
this.tableloading=true;
}else{
alert("请选择日期");
return ;
}
this.paramAll.queryStartTime=this.queryStartTime;
this.paramAll.queryEndTime=this.queryEndTime;
this.paramAll.subcomno=this.subcomno;
this.paramAll.roadno =this.roadno;
this.paramAll.stano =this.stano;
this.paramAll.multiType =this.multiType;
this.paramAll.status=this.radio;
if(this.radio ===5){
this.paramAll.divstatus=4;
this.$refs["feeAndNodiv"].refreshData(this.paramAll)
}else{
alert("切换目录");
this.paramAll.divstatus=5;
}
},showDivDetial(row,column,e){
this.feeunitTitleMain=row.tollintervalidname;
this.feeDetailShow=true;
this.tollvalid=row.tollintervalid;
}, changesubcomnoValue() {
this.stano="";
this.roadno="";
getRoadlist();
getStalist();
}, changeroadValue() {
this.stano="";
getStalist();
}
},
components: {
feeAndNodiv
},
mounted() {
_this=this;
getsubcomlist();
getRoadlist();
getStalist();
/*
let selectType={
"selectType":"DIVSTATUS"
}
getSelectList(selectType).then(res=>{
this.divStatus=1;
if(res.code>0){
this.divStatusList=res.data;
}
})
*/
}
}
function getsubcomlist() {
let staParams = {
"subcomno": _this.subcomno,
"roadno": _this.roadno,
"selectType": "SUBCOM"
}
getSelectList(staParams).then(
res => {
if (res.data) {
_this.subcomDatas = res.data
} else {
_this.subcomDatas = [{}];
}
}
)
}
function getRoadlist() {
let staParams = {
"subcomno": _this.subcomno,
"roadno": _this.roadno,
"selectType": "ROAD"
}
getSelectList(staParams).then(
res => {
if (res.data) {
_this.roadDatas = res.data
} else {
_this.roadDatas = [{}];
}
}
);
}
function getStalist() {
let staParams = {
"subcomno": _this.subcomno,
"roadno": _this.roadno,
"selectType": "STANO"
}
getSelectList(staParams).then(
res => {
if (res.data) {
_this.staDatas = res.data
} else {
_this.staDatas = [{}];
}
}
)
}
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());
}
</script>

@ -0,0 +1,499 @@
<!--排名数据与计费列表 -->
<template>
<div class="top_div_rank">
<el-form :inline="true" :model="formInline" :label-position="right" class="demo-form-inline" style="width:100%;height: 100%">
<el-form-item label="日期:" class="s_el_row">
<el-date-picker
v-model="rpTime"
type="datetimerange"
range-separator="To"
start-placeholder="开始时间"
end-placeholder="结束时间"
value-format="YYYY-MM-DD HH:mm:ss"
format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item label="分公司名称:" class="s_el_row" style="width:13%">
<el-select v-model="subcomno" @change="changesubcomnoValue" filterable placeholder="请选择..." clearable="true" style="width:100%;height:100%;border-color: gainsboro">
<el-option
v-for="item in subcomDatas"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="路段名称:" class="s_el_row" style="width:12%">
<el-select v-model="roadno" @change="changeroadValue" filterable placeholder="请选择..." clearable style="width:100%;height:100%;border-color: gainsboro">
<el-option
v-for="item in roadDatas"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="收费站:" class="s_el_row" style="width:10%">
<el-select v-model="stano" filterable placeholder="请选择..." style="width:100%;height:100%;border-color: gainsboro" clearable>
<el-option
v-for="item in staDatas"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="" style="width:8%;margin-right:5px" class="s_el_row">
<div style="display:flex;text-align: left; height:100%; position: relative;margin:0;padding:0">
<el-button type="primary" style="margin-top: 0px;" @click="search" class="query_button" size="default" :icon="searchButton">查询</el-button>
</div>
</el-form-item>
</el-form>
</div>
<div class="contain-div_rank">
<div class="middle-div_rank">
<div class="middle-div-left_rank">
<el-row style="padding-bottom: 10px;" type="flex" justify="center" align="middle">
<el-col :span="12">
<el-select v-model="divStatus"
placeholder="请选择拆分状态"
size="large"
clearable="true"
filterable="true"
@change="changeRank"
style="width:100%">
<el-option
v-for="item in divStatusList"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE"
/>
</el-select>
</el-col>
<el-col :span="3" style="text-align: center;justify-content: center;align-items: center">排名数</el-col>
<el-col :span="9">
<el-input-number v-model="rankNum" @change="changeRankData" :min="1" label=""></el-input-number>
</el-col>
</el-row>
<el-table :data="rankdata" :header-cell-style="{background:'rgb(201,198,198)',align:'center'}" height="95%" border v-loading="tableloading"
@row-dblclick="showDivDetial">
<el-table-column type="index" label="排名" align="center" width="80px"/>
<el-table-column prop="tollintervalidname" label="计费单元" :show-overflow-tooltip="true" width="230px" resizable align="center" />
<el-table-column prop="tollintervalid" label="计费单元id" v-if="false" />
<el-table-column prop="fee" label="计费金额(元)" :show-overflow-tooltip="true" width="200px" resizable align="center" />
</el-table>
</div>
<div class="middle-div-right_rank">
<div class="hz-div_rank">
<el-row style="padding-bottom: 20px;position: relative;border-bottom: #c9c6c6 solid">
<el-col :span="6">
<i style="font-size: 15px">车流量{{carCount}} </i>
</el-col>
<el-col :span="6">
<i style="font-size: 15px">计费金额{{feeTotal}} </i>
</el-col>
<el-col :span="6" v-if="false">
<i style="font-size: 15px">应收金额{{payfeeTotal}} </i>
</el-col>
<el-col :span="6">
<i style="font-size: 15px">拆分金额{{divfeeTotal}} </i>
</el-col>
</el-row>
<el-row style="padding-bottom:10px;position: relative;">
<el-col :span="24">
<el-radio-group v-model="vehicleclassText" @change="changeData">
<el-radio label="KC">客车</el-radio>
<el-radio label="HC">货车</el-radio>
<el-radio label="JM">减免车</el-radio>
</el-radio-group>
</el-col>
</el-row >
<el-row style="padding-bottom:15px;position: relative;border-bottom: #c9c6c6 solid">
<el-col :span="6" >
<i style="font-size: 15px">车流量{{typecarCount}} </i>
</el-col>
<el-col :span="6" >
<i style="font-size: 15px">计费金额{{typefeeTotal}} </i>
</el-col>
<el-col :span="6" v-if="false">
<i style="font-size: 15px">应收金额{{typepayfeeTotal}} </i>
</el-col>
<el-col :span="6">
<i style="font-size: 15px">拆分金额{{typedivfeeTotal}} </i>
</el-col>
</el-row>
</div>
<div class="dt-div_rank">
<!-- <mapvue ref="map" :begindate="begindate" :enddate="enddate"></mapvue>-->
<div style="height: 8%;width: 100%;position:relative">
<el-form :inline="true" :label-position="right" style="width:100%;height: 100%;margin-top: 10px">
<el-form-item label="名称:">
<el-input :model-value="queryfeename"/>
</el-form-item>
<el-form-item label="" style="width:8%;margin-right:5px" class="s_el_row">
<div style="display:flex;text-align: left; height:100%; position: relative;margin:0;padding:0">
<el-button type="primary" style="margin-top: 0px;" @click="searchFee" class="query_button" size="default" :icon="searchButton">查询</el-button>
</div>
</el-form-item>
</el-form>
</div>
<div style="height: 85%;width: 100%;position:relative">
<el-table :data="tableDataDetail" height="100%" :header-cell-style="{background:'rgb(213,216,217)',align:'center'}" border v-loading="tableloading"
@row-dblclick="showDivDetial">
<el-table-column type="index" label="序号" align="center" width="100px"/>
<el-table-column prop="tollintervalid" label="计费单元id" v-if="tableDisable" align="center" />
<el-table-column prop="tollintervalidname" label="计费单元" align="center" width="260px"/>
<el-table-column prop="subcomname" label="分公司" align="center" width="220px"/>
<el-table-column prop="roadname" label="路段" align="center" width="200px"/>
<el-table-column prop="staname" label="收费站" align="center" width="200px"/>
<el-table-column prop="length" label="计费单元长度(米)" align="center" width="200px"/>
</el-table>
</div>
<div style="height: 5%;width: 100%;position:relative">
<!-- 分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[15, 30,50,100]"
:page-size="pageSize"
:total="totalCount"
layout="total, sizes, prev, pager, next, jumper"
style="width: 90%;height:100%;position:inherit;margin-top:5px;font-size: x-small">
</el-pagination>
</div>
</div>
</div>
</div>
</div>
<el-dialog :title="feeunitTitleMain"
v-model="feeDetailShow"
width="80%"
top="0.5%"
style="height: 50%"
:close-on-click-modal="clickDialog">
<feeStatDetail :key="new Date().getTime()" :begindate="begindate" :enddate="enddate" :divStatus="divStatus" :tollvalid="tollvalid"></feeStatDetail>
</el-dialog>
</template>
<style >
html{
height: 98% !important;
width: 100% !important;
}
body{
height: 100% !important;
width: 99% !important;
}
#app{
height: 100% !important;
width: 100% !important;
}
.contain-div_rank{
height: 95%;
width: 100%;
}
.top_div_rank{
height: 5%;
width: 100%;
border-bottom: #c9c6c6 solid;
top: 0;
/*z-index: 1000; /* 确保它在其他内容之上 */
}
.middle-div_rank{
height: 95%;
width: 100%;
display: flex;
border-top: #c9c6c6 solid;
}
.middle-div-left_rank{
height: 100%;
width: 30%;
border-right: #c9c6c6 solid;
}
.middle-div-right_rank{
height: 100%;
width: 70%;
}
.hz-div_rank{
height: 15%;
width: 100%;
}
.dt-div_rank{
height: 85%;
width: 100%;
}
</style>
<script >
import {
Search
} from '@element-plus/icons-vue'
import {getSelectList, getRankList, getHzData, getFeeunitListByPage} from "@/util/api/api";
import feeStatDetail from '@/views/dev/detail/feeStatDetail.vue'
var _this;
export default {
name: "checkEcharts",
data() {
return {
pageSize: 20,
pageNum:1,
totalCount:0,
tableDataDetail: [],
tableDisable:false,
tableloading:false,
rpTime:"",
searchButton:Search,
clickDialog:false,
divStatus:"",
selectedText:"",
divStatusList:[],
rankList:[{"VALUE":1,"LABEL":"10"},{"VALUE":2,"LABEL":"20"},{"VALUE":3,"LABEL":"30"}],
carCount:"0",
feeTotal:"0",
payfeeTotal:"0",
divfeeTotal:"0",
typecarCount:"0",
typefeeTotal:"0",
typepayfeeTotal:"0",
typedivfeeTotal:"0",
begindate:"",
enddate:"",
rankdata:[],
rankNum:10,
vehicleclassText:"KC",
feeunitTitleMain:"",
feeDetailShow:false,
tollvalid:"",
subcomDatas: [],
roadDatas: [],
staDatas: [],
subcomno: "",
roadno: "",
stano: "",
queryfeename:""
}
},
methods: {
handleSizeChange(val) {
this.pageSize = val;
this.tableloading=true;
getFeeunitlist();
},handleCurrentChange(val) {
this.pageNum = val;
this.tableloading=true;
getFeeunitlist();
},
search() {//
if(this.rpTime){
this.begindate=this.rpTime[0];
this.enddate=this.rpTime[1];
this.tableloading=true;
}else{
alert("请选择日期");
return ;
}
var params={
"pageNum":1,
"pageSize":10,
"queryStartTime":this.begindate,
"queryEndTime":this.enddate,
"status":this.divStatus,
"subcomno":this.subcomno,
"roadno":this.roadno,
"stano":this.stano
}
getRankList(params).then(res=>{
this.rankdata=res.records
this.tableloading=false;
})
this.getAllFeeData();
getFeeunitlist();
},changeRank(vale){
this.tableloading=true;
this.divStatus=vale;
const selectedItem = this.divStatusList.find(item => item.VALUE === value);
this.selectedText = selectedItem ? selectedItem.LABEL : '';
var params={
"pageNum":1,
"pageSize":(this.rankNum===null||this.rankNum==='')?10:this.rankNum,
"queryStartTime":this.begindate,
"queryEndTime":this.enddate,
"status":this.divStatus,
"subcomno":this.subcomno,
"roadno":this.roadno,
"stano":this.stano
}
getRankList(params).then(res=>{
this.rankdata=res.records
this.tableloading=false;
})
},changeRankData(vale){
this.tableloading=true;
var params={
"pageNum":1,
"pageSize":vale,
"queryStartTime":this.begindate,
"queryEndTime":this.enddate,
"status":this.divStatus,
"subcomno":this.subcomno,
"roadno":this.roadno,
"stano":this.stano
}
getRankList(params).then(res=>{
this.rankdata=res.records
this.tableloading=false;
})
},changeData(lablev){
this.vehicleclassText=lablev;
var params={
"queryStartTime":this.begindate,
"queryEndTime":this.enddate,
"subcomno":this.subcomno,
"roadno":this.roadno,
"stano":this.stano
}
params.vehicleclassText=lablev;
getHzData(params).then(res=>{
this.typecarCount=res.carcount;
this.typefeeTotal=res.feeTotal;
this.typepayfeeTotal=res.payfeeTotal;
this.typedivfeeTotal=res.divfeeTotal;
});
},searchFee(){
getFeeunitlist();
},showDivDetial(row,column,e){
if(row.length){
this.selectedText="";
}
this.feeunitTitleMain=row.tollintervalidname + (this.selectedText===""?"":"("+this.selectedText+")");
this.feeDetailShow=true;
this.tollvalid=row.tollintervalid;
},getAllFeeData(){
var params={
"queryStartTime":this.begindate,
"queryEndTime":this.enddate,
"subcomno":this.subcomno,
"roadno":this.roadno,
"stano":this.stano
}
getHzData(params).then(res=>{
this.carCount=res.carcount;
this.feeTotal=res.feeTotal;
this.payfeeTotal=res.payfeeTotal;
this.divfeeTotal=res.divfeeTotal;
});
params.vehicleclassText=this.vehicleclassText;
getHzData(params).then(res=>{
this.typecarCount=res.carcount;
this.typefeeTotal=res.feeTotal;
this.typepayfeeTotal=res.payfeeTotal;
this.typedivfeeTotal=res.divfeeTotal;
});
}, changesubcomnoValue() {
this.stano="";
this.roadno="";
getRoadlist();
getStalist();
}, changeroadValue() {
this.stano="";
getStalist();
}
},
components: {
feeStatDetail
},
mounted() {
_this=this;
getsubcomlist();
getRoadlist();
getStalist();
let selectType={
"selectType":"DIVSTATUS"
}
getSelectList(selectType).then(res=>{
this.divStatus=1;
if(res.code>0){
this.divStatusList=res.data;
}
})
}
}
function getsubcomlist() {
let staParams = {
"subcomno": _this.subcomno,
"roadno": _this.roadno,
"selectType": "SUBCOM"
}
getSelectList(staParams).then(
res => {
if (res.data) {
_this.subcomDatas = res.data
} else {
_this.subcomDatas = [{}];
}
}
)
}
function getRoadlist() {
let staParams = {
"subcomno": _this.subcomno,
"roadno": _this.roadno,
"selectType": "ROAD"
}
getSelectList(staParams).then(
res => {
if (res.data) {
_this.roadDatas = res.data
} else {
_this.roadDatas = [{}];
}
}
);
}
function getStalist() {
let staParams = {
"subcomno": _this.subcomno,
"roadno": _this.roadno,
"selectType": "STANO"
}
getSelectList(staParams).then(
res => {
if (res.data) {
_this.staDatas = res.data
} else {
_this.staDatas = [{}];
}
}
)
}
function getFeeunitlist() {
_this.tableloading=true;
let staParams = {
"subcomno": _this.subcomno,
"roadno": _this.roadno,
"stano": _this.stano,
"tollintervalidname":_this.queryfeename
}
getFeeunitListByPage(staParams).then(
res => {
if (res.data) {
_this.tableDataDetail=res.records;
_this.tableloading=false;
_this.totalCount=res.total;
}
}
)
}
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());
}
</script>
Loading…
Cancel
Save