拆分核验,排名修改

master
白美平 6 months ago
parent ab476fe71b
commit b0138bbbf3

@ -32,6 +32,8 @@ export const getHzData = data => post("/devProjectJt/divFeeStat/getHzData", data
export const getEveryClassFee = data => post("/devProjectJt/divFeeStat/getEveryClassFee", data,"") export const getEveryClassFee = data => post("/devProjectJt/divFeeStat/getEveryClassFee", data,"")
//导出明细数据 //导出明细数据
export const exportDivPassidAllData = data => download("/devProjectJt/exportData/exportList", data,null) export const exportDivPassidAllData = data => download("/devProjectJt/exportData/exportList", data,null)
//查询路线数据
export const getGantryListByLineNo = data => post("/devProjectJt/roadLine/getGantryListByLineNo", data,null)
//20250417 数据核验数据展示 //20250417 数据核验数据展示
export const getFeeShowTotal = data => post("/devProjectJt/divFeeStat/getFeeShowTotal", data,"") export const getFeeShowTotal = data => post("/devProjectJt/divFeeStat/getFeeShowTotal", data,"")
@ -40,10 +42,16 @@ export const getVehicleClassToal = data => post("/devProjectJt/divFeeStat/getVeh
//20250507 未计费 未拆分数据核验 //20250507 未计费 未拆分数据核验
export const getFeeListByPage = data => post("/devProjectJt/divPassidAll/getFeeListByPage", data,"") export const getFeeListByPage = data => post("/devProjectJt/divPassidAll/getFeeListByPage", data,"")
export const getDivListByPage = data => post("/devProjectJt/divPassidAll/getDivListByPage", data,"") export const getDivFeeListByPage = data => post("/devProjectJt/divPassidAll/getDivFeeListByPage", data,"")
//根据计费无拆分数据查找无计费有拆分的数据
export const getDivListByFeeId = data => post("/devProjectJt/divPassidAll/getDivListByFeeId", data,"")
//数据匹配
export const matchData = data => post("/devProjectJt/noFeeOrDivfee/matchData", data,"")
//20250513 //20250513
export const getFeeunitListByPage = data => post("/devProjectJt/feeunit/getListByPage", data,"") export const getFeeunitListByPage = data => post("/devProjectJt/feeunit/getListByPage", data,"")
//导出汇总数据 //导出汇总数据
export const exportEveryData = data => download("/devProjectJt/exportData/exportEveryList", data,null) export const exportEveryData = data => download("/devProjectJt/exportData/exportEveryList", data,null)
//20250526 获取地图信息
export const getMapDivDatas = data => post("/devProjectJt/mapFee/getMapDivDatas", data,"")

@ -13,7 +13,7 @@ const routes = [
{ {
path: '/', path: '/',
component: nodivAndnofee,// component: gsCheckMain,//
},{ },{
path: '/devProjectJt/divfeeShowStat', path: '/devProjectJt/divfeeShowStat',
component: divfeeShowStat,// component: divfeeShowStat,//

@ -165,6 +165,24 @@ let pro = {
return 0 return 0
} }
return value return value
}, getCurrentDateHour:function(){
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;
}
return year.toString()+month+day+hour.toString()+minute.toString()+second.toString();
},initOptionPublic(data,echartsId,title,subtext) { },initOptionPublic(data,echartsId,title,subtext) {
let myChart = this.$echarts.init(document.getElementById(echartsId)) let myChart = this.$echarts.init(document.getElementById(echartsId))
// 绘制图表 // 绘制图表

@ -147,7 +147,8 @@ body{
<script > <script >
import {Filter,Search} from '@element-plus/icons-vue' import {Filter,Search} from '@element-plus/icons-vue'
import { getFeeTotalStatus} from "@/util/api/api.js" import { getFeeTotalStatus,exportEveryData} from "@/util/api/api.js"
import tool from "@/util/tool.js"
/*import detailTab from "@/views/dev/detail/detailTab.vue"; /*import detailTab from "@/views/dev/detail/detailTab.vue";
import detailDataSubCom from '@/views/dev/detail/detailDataSubCom.vue' import detailDataSubCom from '@/views/dev/detail/detailDataSubCom.vue'
import detailDataRoad from '@/views/dev/detail/detailDataRoad.vue' import detailDataRoad from '@/views/dev/detail/detailDataRoad.vue'
@ -228,11 +229,17 @@ export default{
this.isShowDetail=true; this.isShowDetail=true;
this.updateDetail= this.updateDetail+1; this.updateDetail= this.updateDetail+1;
},getStatusColor(status) { // },getStatusColor(status) { //
if(status !== undefined){
console.log("status======"+status);
console.log("num======"+this.num);
console.log("ret======"+status >= this.num);
if(status >= this.num){ if(status >= this.num){
return '#67C23A'; // 绿 return '#67C23A'; // 绿
}else{ }else{
return '#F56C6C'; // return '#F56C6C'; //
} }
}
/* switch (status) { /* switch (status) {
case 'success': case 'success':
return '#67C23A'; // 绿 return '#67C23A'; // 绿
@ -271,6 +278,10 @@ export default{
} }
} }
function getTableData(beginDate,endDate,subcomno,roadno,stanno,dataType){ function getTableData(beginDate,endDate,subcomno,roadno,stanno,dataType){
if(!beginDate){
alert("未选择日期")
return ;
}
_this.isLoading=true; _this.isLoading=true;
var paramsObj={ var paramsObj={
"queryStartTime":beginDate, "queryStartTime":beginDate,
@ -325,6 +336,10 @@ function formatDate(dateString,format) {
} }
function exportData(beginDate,endDate,subcomno,roadno,stanno,dataType) { function exportData(beginDate,endDate,subcomno,roadno,stanno,dataType) {
if(!beginDate){
alert("请选择日期");
return ;
}
var paramsData={ var paramsData={
"queryStartTime":beginDate, "queryStartTime":beginDate,
"queryEndTime":endDate, "queryEndTime":endDate,
@ -337,7 +352,7 @@ function exportData(beginDate,endDate,subcomno,roadno,stanno,dataType) {
if (res.data != "") { if (res.data != "") {
//fileName: //fileName:
var fileName = '集团汇总_' + getCurrentDateHour(); //decodeURIComponent(res.headers["Content-Disposition"].split("=")[1]) var fileName = '集团汇总_' + tool.getCurrentDateHour(); //decodeURIComponent(res.headers["Content-Disposition"].split("=")[1])
let blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'}); let blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'});
// ie // ie
if (window.navigator && window.navigator.msSaveOrOpenBlob) { if (window.navigator && window.navigator.msSaveOrOpenBlob) {

@ -12,7 +12,7 @@
style="width: 100%;height: 100%"> style="width: 100%;height: 100%">
<el-table-column prop="classdate" label="日期" resizable align="center" :formatter="dateFormatter" fixed="left" width="140" /> <el-table-column prop="classdate" label="日期" resizable align="center" :formatter="dateFormatter" fixed="left" width="140" />
<el-table-column prop="jmtotal" label="总减免(元)" resizable align="center" width="180" /> <el-table-column prop="jmtotal" label="总减免(元)" resizable align="center" width="180" />
<el-table-column prop="jmgw" label="公务车(元)" resizable align="center" width="160" /> <el-table-column prop="jmgw" label="公务车(元)" resizable align="center" width="180" />
<el-table-column prop="jmjunjing" label="军警车(元)" resizable align="center" width="180" /> <el-table-column prop="jmjunjing" label="军警车(元)" resizable align="center" width="180" />
<el-table-column prop="jmjinji" label="紧急车(元)" resizable align="center" width="180" /> <el-table-column prop="jmjinji" label="紧急车(元)" resizable align="center" width="180" />
<el-table-column prop="jmmf" label="免费车(元)" resizable align="center" width="180" /> <el-table-column prop="jmmf" label="免费车(元)" resizable align="center" width="180" />
@ -145,6 +145,10 @@ export default{
} }
} }
function getTableData(beginDate,endDate,subcomno,roadno,stanno,dataType){ function getTableData(beginDate,endDate,subcomno,roadno,stanno,dataType){
if(!beginDate){
alert("未选择日期")
return ;
}
_this.isLoading=true; _this.isLoading=true;
var paramsObj={ var paramsObj={
"queryStartTime":beginDate, "queryStartTime":beginDate,

@ -98,7 +98,7 @@
</el-form-item> </el-form-item>
<el-form-item label="" style="width:8%;margin-bottom: 5px;" class="s_el_row"> <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"> <div style="display:flex;text-align: left; height:100%; position: relative;margin:0;padding-top:10px">
<el-button type="primary" @click="getDataListByPage" :icon="searchButton" style="padding: 0px 10px 0px 5px; position: relative;margin:0;">查询</el-button> <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-button type="success" @click="exportExcle" style="padding: 0px 5px 0px 5px; position: relative;margin:0 0 1% 1%;">
<el-icon style="vertical-align: middle;"> <el-icon style="vertical-align: middle;">
@ -431,6 +431,7 @@ function exportData(){
} }
.el-dialog__body{ .el-dialog__body{
height: 90% !important; height: 90% !important;
padding-bottom: 0px !important;
} }
</style> </style>

@ -73,6 +73,7 @@ export default {
} }
.el-dialog__body{ .el-dialog__body{
height: 90% !important; height: 90% !important;
padding-bottom: 0px !important;
} }
</style> </style>

@ -225,6 +225,10 @@ export default{
} }
} }
var getTableDatas=function(startDate,endDate,startDateHB,endDateHB){ var getTableDatas=function(startDate,endDate,startDateHB,endDateHB){
if(!startDate || !startDateHB){
alert("未选择日期")
return ;
}
var paramsData={ var paramsData={
"startDate": startDate, "startDate": startDate,
"endDate":endDate, "endDate":endDate,

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

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

@ -0,0 +1,289 @@
<!-- 计费未拆分 拆分数据进行匹配-->
<template>
<div id="contain_nofee" 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_div_fee" :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="180px" resizable align="center" />
<el-table-column prop="passid" label="PASSID" :show-overflow-tooltip="true" width="320px" resizable align="center" />
<el-table-column prop="vehicleid" label="车牌号" :show-overflow-tooltip="true" width="220px" resizable align="center" />
<el-table-column prop="divFee" label="拆分总金额(元)" width="250px" resizable align="center" />
<el-table-column prop="vehicletypeName" label="车型" :show-overflow-tooltip="true" width="250px" resizable align="center" />
<el-table-column prop="multitypeName" label="匹配类型" :show-overflow-tooltip="true" width="250px" resizable align="center" >
<template #default="scope">
<!-- 根据 scope.row.status 设置字体颜色 -->
<span :style="{ color: getmultitypeColor(scope.row.multitypeName) }">
{{ scope.row.multitypeName }}
</span>
</template>
</el-table-column>
<el-table-column prop="maname" label="处理人" :show-overflow-tooltip="true" v-if="tableDisable" width="180px" resizable align="center" />
<el-table-column prop="createTime" label="处理时间" :show-overflow-tooltip="true" v-if="tableDisable" :formatter="dateFormatterSSS" width="200px" resizable align="center" />
<el-table-column prop="divTollintervalid" label="计费单元组id" v-if="tableDisable" align="center" />
<el-table-column prop="divFeegroup" 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="roadno" label="计费单元组id" v-if="tableDisable" align="center" />
<el-table-column label="操作" v-slot="slot" fixed="right" align="center">
<!-- <el-button type="primary" @click="skipMapVue(slot.row)" style="background-color: #3abdc2"></el-button>-->
<el-button type="primary" @click="matchFeeData(slot.row)" style="background-color: #67c23a">路径匹配</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="[20, 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="detail_dialog_div" v-model="isShowFeeDetail" title="路径信息" draggable >
<divMatchNoFee ref="divMatchNoFee" ></divMatchNoFee>
</el-dialog>
</div>
</template>
<style >
#table_el_div_fee{
height: 100% ;
width: 100%;
}
#detail_dialog_div{
margin-top: 20px !important;
width:80%;
height: 75%;
padding-bottom: 0 !important;
}
</style>
<script >
import { ref} from "vue";
import {Filter,Search} from '@element-plus/icons-vue'
import {getDivFeeListByPage} from "@/util/api/api";
import divMatchNoFee from "@/views/dev/detail/nodivandnofee/DivMatchNoFee.vue";
import tool from "@/util/tool";
var _this;
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
totalCount: 0,
tableData: ref([]),
isShowMap: false,
isShowFeeDetail: 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={
"GPA_TOLLINTERVALID": "",
"GPA_FEEGROUP": "",
"GPA_FEE": "",
"DIV_TOLLINTERVALID": row.divTollintervalid,
"DIV_FEEGROUP": row.divFeegroup,
"DIV_FEE": row.divFee,
}
this.isShowMap = true;
this.mapParams = _params;
},matchFeeData(row){
this.isShowFeeDetail=true;
let _params={
"divTollintervalid": row.divTollintervalid,
"classdate": row.classdate,
"passid": row.passid,
"vehicleid": row.vehicleid,
"divFeeGroup": row.divFeegroup,
"vehicletypeName": row.vehicletypeName,
"divFee": row.divFee,
"feeStatus": 4,
"startTime": tool.DayDec(row.classdate,0),
"endTime": tool.DayDec(row.classdate,-10)
}
this.$nextTick(() => {
this.$refs["divMatchNoFee"].refreshData(_params);
})
},getmultitypeColor(status) { //
if (status !== undefined) {
if (status ==="匹配一条") {
return '#67C23A'; // 绿
} else if (status ==="匹配多条") {
return '#f3650d'; //
}else {
return '#f10505'; //
}
}
},
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: {
divMatchNoFee,
Search
},
mounted() {
_this = this;
}
}
function getTableDataLists(){
_this.tableLoading=true;
var paramsData=_this.params;
paramsData.pageNum=_this.currentPage;
paramsData.pageSize=_this.pageSize;
getDivFeeListByPage(paramsData).then(res=>{
_this.tableLoading=false;
if(res.code<=0){
return false;
}else{
_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,12 +0,0 @@
<!-- 拆分未计费 计费数据进行匹配-->
<template>
</template>
<style >
</style>
<script >
</script>

@ -9,23 +9,29 @@
:row-style="rowStyle"> :row-style="rowStyle">
<el-table-column type="index" label="序号" width="100px" align="center"/> <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="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="passid" label="PASSID" :show-overflow-tooltip="true" width="320px" resizable align="center" />
<el-table-column prop="vehicleid" label="车牌号" :show-overflow-tooltip="true" width="150px" resizable align="center" /> <el-table-column prop="vehicleid" label="车牌号" :show-overflow-tooltip="true" width="220px" resizable align="center" />
<el-table-column prop="maname" label="处理人" :show-overflow-tooltip="true" width="180px" resizable align="center" /> <el-table-column prop="gpaFee" label="计费总金额(元)" width="250px" 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="250px" 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="250px" fixed="right" resizable align="center" >
<el-table-column prop="multitypeName" label="匹配类型" :show-overflow-tooltip="true" width="200px" resizable align="center" /> <template #default="scope">
<!-- 根据 scope.row.status 设置字体颜色 -->
<span :style="{ color: getmultitypeColor(scope.row.multitypeName) }">
{{ scope.row.multitypeName }}
</span>
</template>
</el-table-column>
<el-table-column prop="maname" label="处理人" :show-overflow-tooltip="true" v-if="tableDisable" width="180px" resizable align="center" />
<el-table-column prop="createTime" label="处理时间" :show-overflow-tooltip="true" v-if="tableDisable" :formatter="dateFormatterSSS" width="200px" resizable align="center" />
<el-table-column prop="gpaTollintervalid" label="计费单元组id" v-if="tableDisable" 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="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="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="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="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 prop="roadno" label="计费单元组id" v-if="tableDisable" align="center" />
<el-table-column label="操作" v-slot="slot" fixed="right" 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" @click="skipMapVue(slot.row)" style="background-color: #3abdc2">路径</el-button>-->
<el-button type="primary" :icon="Filter" circle @click="skipMapVue(slot.row)"></el-button> <el-button type="primary" @click="matchData(slot.row)" style="background-color: #67c23a">路径匹配</el-button>
<el-button type="primary" @click="matchData(slot.row)"></el-button>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
@ -35,7 +41,7 @@
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page="currentPage" :current-page="currentPage"
:page-sizes="[15, 30,50,100]" :page-sizes="[20, 30,50,100]"
:page-size="pageSize" :page-size="pageSize"
:total="totalCount" :total="totalCount"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
@ -43,12 +49,12 @@
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
<el-dialog id="map_dialog" v-model="isShowMap" title="地图" style="width: 80%;height:76%;" draggable > <!-- <el-dialog id="map_dialog_fee" v-model="isShowMap" title="地图(计费)" style="width: 80%;height:80%;" draggable >
<mapData ref="mapD" :key="new Date().getTime()" :params="mapParams" ></mapData> <mapFeeData ref="mapFeeData" :key="new Date().getTime()" :params="mapParams" ></mapFeeData>
</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>--> </el-dialog>-->
<el-dialog id="detail_dialog_fee" v-model="isShowDivDetail" title="路径信息" draggable >
<feeMatchNoDiv ref="feeMatchNoDiv" ></feeMatchNoDiv>
</el-dialog>
</div> </div>
</template> </template>
@ -57,20 +63,28 @@
height: 100% ; height: 100% ;
width: 100%; width: 100%;
} }
#detail_dialog_fee{
margin-top: 20px !important;
width:80%;
height: 75%;
padding-bottom: 0 !important;
}
</style> </style>
<script > <script >
import { ref} from "vue"; import { ref} from "vue";
import mapData from "@/views/dev/detail/map.vue"; //import mapFeeData from "@/views/dev/detail/nodivandnofee/mapFee.vue";
import feeMatchNoDiv from "@/views/dev/detail/nodivandnofee/FeeMatchNoDiv.vue";
import {Filter,Search} from '@element-plus/icons-vue' import {Filter,Search} from '@element-plus/icons-vue'
import {getFeeListByPage} from "@/util/api/api"; import {getFeeListByPage} from "@/util/api/api";
import tool from "@/util/tool";
import {ElMessageBox} from "element-plus"; import {ElMessageBox} from "element-plus";
var _this; var _this;
export default { export default {
data() { data() {
return { return {
currentPage: 1, currentPage: 1,
pageSize: 20, pageSize: 10,
totalCount: 0, totalCount: 0,
tableData: ref([]), tableData: ref([]),
isShowMap: false, isShowMap: false,
@ -95,22 +109,43 @@ export default {
skipMapVue(row) { skipMapVue(row) {
this.isShowMap = true; this.isShowMap = true;
let _params={ let _params={
"gpaTollintervalid": row.gpaTollintervalid, "GPA_TOLLINTERVALID": row.gpaTollintervalid,
"gpaFeegroup": row.gpaFeegroup, "GPA_FEEGROUP": row.gpaFeegroup,
"PASSID": row.PASSID "GPA_FEE": row.gpaFee,
"DIV_TOLLINTERVALID": "",
"DIV_FEEGROUP": "",
"DIV_FEE": "",
} }
this.isShowMap = true; this.isShowMap = true;
this.mapParams = _params; this.mapParams = _params;
// _this.$refs.mapD.getMapDatas(_params); },matchData(row){//
},matchData(row){ this.isShowDivDetail=true;
ElMessageBox.confirm({ let _params={
"gpaTollintervalid": row.gpaTollintervalid,
"classdate": row.classdate,
"passid": row.passid,
"vehicleid": row.vehicleid,
"gpaFeeGroup": row.gpaFeegroup,
"vehicletypeName": row.vehicletypeName,
"gpaFee": row.gpaFee,
"feeStatus": 5,
"startTime": tool.DayDec(row.classdate,0),
"endTime": tool.DayDec(row.classdate,10)
}
this.$nextTick(() => {
this.$refs["feeMatchNoDiv"].refreshData(_params);
}) })
this.isShowMap = true; },getmultitypeColor(status) { //
this.mapParams = _params; if (status !== undefined) {
}, if (status ==="匹配一条") {
handleSizeChange(val) { return '#67C23A'; // 绿
} else if (status ==="匹配多条") {
return '#02dfe7'; //
}else {
return '#f10505'; //
}
}
},handleSizeChange(val) {
this.pageSize = val; this.pageSize = val;
this.isLoding = true; this.isLoding = true;
getTableDataLists(); getTableDataLists();
@ -147,7 +182,7 @@ export default {
} }
}, components: { }, components: {
mapData, feeMatchNoDiv,
Search Search
}, },
mounted() { mounted() {
@ -168,7 +203,6 @@ function getTableDataLists(){
if(res.code<=0){ if(res.code<=0){
return false; return false;
}else{ }else{
debugger
_this.totalCount=res.total; _this.totalCount=res.total;
_this.tableData=res.records; _this.tableData=res.records;
_this.isLoding=false; _this.isLoding=false;
@ -176,30 +210,6 @@ function getTableDataLists(){
}) })
} }
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) { function formatDate(dateString,format) {

@ -0,0 +1,362 @@
<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="mapDivFee" 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;
break;
}
}
}else if(_mapFEEList.length>0 ){
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;
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: 'mapDivFee',
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, //
},
})
}
}
}
},
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>

@ -173,7 +173,7 @@ export default {
//position:['20px','20px'] //position:['20px','20px']
}, },
legend: { legend: {
data:["流量(辆)","金额(元)"] data:["流量(辆)","金额(元)"]
}, },
toolbox: { toolbox: {
show : true, show : true,
@ -218,7 +218,10 @@ export default {
textStyle:{fontSize:10} textStyle:{fontSize:10}
}, },
data : dataX data : dataX
}, dataZoom: [{ },
dataZoom: [ {
type: 'inside'
},{
type: 'slider', type: 'slider',
show: true, //flase show: true, //flase
xAxisIndex: [0], xAxisIndex: [0],
@ -231,7 +234,8 @@ export default {
bottom: -5, bottom: -5,
start: 0,// start: 0,//
end: 110 //x end: 110 //x
}], }
],
yAxis :[ yAxis :[
{ {
type : 'value', type : 'value',
@ -271,7 +275,7 @@ export default {
], ],
series : [ series : [
{ {
name:'流量(辆)', name:'流量(辆)',
type:'line', type:'line',
data:dataFlow, data:dataFlow,
label:{ label:{
@ -281,7 +285,7 @@ export default {
}, },
yAxisIndex:0 yAxisIndex:0
},{ },{
name:'金额(元)', name:'金额(元)',
type:'bar', type:'bar',
data:dataMoney, data:dataMoney,
label:{ label:{
@ -311,7 +315,7 @@ export default {
//position:['20px','20px'] //position:['20px','20px']
}, },
legend: { legend: {
data:["流量(辆)","计费金额(元)","拆分金额(元)"] data:["流量(辆)","计费金额(元)","拆分金额(元)"]
}, },
toolbox: { toolbox: {
show : true, show : true,
@ -357,6 +361,8 @@ export default {
}, },
data : dataX data : dataX
}, dataZoom: [{ }, dataZoom: [{
type: 'inside'
},{
type: 'slider', type: 'slider',
show: true, //flase show: true, //flase
xAxisIndex: [0], xAxisIndex: [0],
@ -409,7 +415,7 @@ export default {
], ],
series : [ series : [
{ {
name:'流量(辆)', name:'流量(辆)',
type:'line', type:'line',
data:dataFlow, data:dataFlow,
label:{ label:{
@ -419,7 +425,7 @@ export default {
}, },
yAxisIndex:0 yAxisIndex:0
},{ },{
name:'计费金额(元)', name:'计费金额(元)',
type:'bar', type:'bar',
data:dataMoney, data:dataMoney,
label:{ label:{
@ -429,7 +435,7 @@ export default {
}, },
yAxisIndex:1 yAxisIndex:1
},{ },{
name:'拆分金额(元)', name:'拆分金额(元)',
type:'bar', type:'bar',
data:dataFeeMoney, data:dataFeeMoney,
label:{ label:{

@ -0,0 +1,422 @@
<template>
<div style="width:100%;height: 100%">
<div style="width: 1500px;height:50px">
<el-radio-group v-model="rankClassText" @change="changeEchartsData">
<el-radio label="ZT">总体</el-radio>
<el-radio label="KC">客车</el-radio>
<el-radio label="HC">货车</el-radio>
</el-radio-group>
</div>
<div id="contain_line" style="width: 1500px;height:800px" v-show="showZt"></div>
<div id="contain_line_HC" style="width: 1500px;height:800px" v-show="showHc"></div>
<div id="contain_line_KC" style="width: 1500px;height:800px" v-show="showKc"></div>
</div>
</template>
<script>
import {ref } from 'vue';
import tool from '@/util/tool';
import {getDivDataList, getFeeTotal} from "@/util/api/api";
var _this;
export default {
name: "roadLineEcharts",
data() {
return {
rankClassText:"ZT",
showZt:true,
showHc:false,
showKc:false,
paramsData:[]
//dateTime:'2024-07-22'
}
},
methods: {
refreshData(params) {
this.paramsData=params;
let dataX=[];
let datafee=[];
let datakfee=[];
let datahfee=[];
let dataDivfee=[];
let datakDivfee=[];
let datahDivfee=[];
let dataFlow=[];
let datakFlow=[];
let datahFlow=[];
for(var i=0;i<params.length;i++){
dataX.push(params[i].tollintervalidname);
datafee.push(params[i].fee);
datakfee.push(params[i].kfee);
datahfee.push(params[i].hfee);
dataDivfee.push(params[i].divfee);
datakDivfee.push(params[i].kdivfee);
datahDivfee.push(params[i].hdivfee);
dataFlow.push(params[i].carcount);
datakFlow.push(params[i].kcarcount);
datahFlow.push(params[i].hcarcount);
}
this.$nextTick(() => {
this.initOptionLine("contain_line",dataX,datafee,datakfee,datahfee,dataDivfee,datakDivfee,datahDivfee,dataFlow,datakFlow,datahFlow);
})
},changeEchartsData(value){
if(value==="ZT"){
this.showZt=true;
this.showHc=false;
this.showKc=false;
this.$nextTick(() => {
this.refreshData(this.paramsData);
})
}else if(value==="HC"){
this.showZt=false;
this.showHc=true;
this.showKc=false;
let dataX=[];
let datafee=[];
let datakfee=[];
let datahfee=[];
let dataDivfee=[];
let datakDivfee=[];
let datahDivfee=[];
let dataFlow=[];
let datakFlow=[];
let datahFlow=[];
let params=this.paramsData;
for(var i=0;i<params.length;i++){
dataX.push(params[i].tollintervalidname);
datafee.push(params[i].fee);
datakfee.push(params[i].kfee);
datahfee.push(params[i].hfee);
dataDivfee.push(params[i].divfee);
datakDivfee.push(params[i].kdivfee);
datahDivfee.push(params[i].hdivfee);
dataFlow.push(params[i].carcount);
datakFlow.push(params[i].kcarcount);
datahFlow.push(params[i].hcarcount);
}
this.$nextTick(() => {
this.initOptionLineType("contain_line_HC",dataX,datahfee,datahDivfee,datahFlow,"货车");
})
}else if(value==="KC"){
this.showZt=false;
this.showHc=false;
this.showKc=true;
let dataX=[];
let datafee=[];
let datakfee=[];
let datahfee=[];
let dataDivfee=[];
let datakDivfee=[];
let datahDivfee=[];
let dataFlow=[];
let datakFlow=[];
let datahFlow=[];
let params=this.paramsData;
for(var i=0;i<params.length;i++){
dataX.push(params[i].tollintervalidname);
datafee.push(params[i].fee);
datakfee.push(params[i].kfee);
datahfee.push(params[i].hfee);
dataDivfee.push(params[i].divfee);
datakDivfee.push(params[i].kdivfee);
datahDivfee.push(params[i].hdivfee);
dataFlow.push(params[i].carcount);
datakFlow.push(params[i].kcarcount);
datahFlow.push(params[i].hcarcount);
}
this.$nextTick(() => {
this.initOptionLineType("contain_line_KC",dataX,datakfee,datakDivfee,datakFlow,"客车");
})
}
},initOptionLine(divId,dataX,datafee,datakfee,datahfee,dataDivfee,datakDivfee,datahDivfee,dataFlow,datakFlow,datahFlow) {
let myChart = this.$echarts.init(document.getElementById(divId))
//
let option = {
title : {
text: '',
subtext: ''
},
grid:{
bottom:'15%'
},
tooltip : {
trigger: 'axis',
},
legend: {
//data:["()","()","()"]
},
dataZoom: [
{
type: 'inside'
}
],
toolbox: {
show : true,
orient: 'vertical',
feature : {
saveAsImage:{
type:"jpg",
show: true,
title: '保存为图片'
}
}
},
calculable : true,
xAxis :[
{
type: 'category',
data: dataX,
axisLabel:{
interval:0,
rotate:40
},
axisPointer: {
type: 'shadow'
},nameTextStyle:{
fontSize:9,
lineHeight:100
}
}
],
yAxis :[
{
type: 'value',
name: '金额',
axisLabel: {
formatter: '{value} 万元'
}
},
{
type: 'value',
name: '流量',
axisLabel: {
formatter: '{value} 万辆'
}
}
],
series : [
{
name:'总流量(万辆)',
type:'line',
data:dataFlow,
label:{
show: true, //
position: 'top', //
formatter: '{c}' // {c}
},
yAxisIndex:1
},{
name:'客车流量(万辆)',
type:'line',
data:datakFlow,
label:{
show: true, //
position: 'top', //
formatter: '{c}' // {c}
},
yAxisIndex:1
},{
name:'货车流量(万辆)',
type:'line',
data:datahFlow,
label:{
show: true, //
position: 'top', //
formatter: '{c}' // {c}
},
yAxisIndex:1
},{
name:'客车计费金额(万元)',
type:'bar',
stack: 'Ad',
data:datakfee,
label:{
show: true, //
position: 'inside', //
formatter: '{c}' // {c}
},
yAxisIndex:0
},{
name:'货车计费金额(万元)',
type:'bar',
stack: 'Ad',
data:datahfee,
label:{
show: true, //
position: 'inside', //
formatter: '{c}' // {c}
},
yAxisIndex:0
},{
name:'客车拆分金额(万元)',
type:'bar',
stack: 'DD',
data:datakDivfee,
label:{
show: true, //
position: 'inside', //
formatter: '{c}' // {c}
},
yAxisIndex:0
},{
name:'货车拆分金额(万元)',
type:'bar',
stack: 'DD',
data:datahDivfee,
label:{
show: true, //
position: 'inside', //
formatter: '{c}' // {c}
},
yAxisIndex:0
},{
name:'总计费金额(万元)',
type:'bar',
data:datafee,
stack: 'Ad',
label:{
show: true, //
position: 'insideBottom', //
textStyle: {
color: '#000'
},
formatter: '{c}' // {c}
}, itemStyle: {
normal: {
color: 'rgba(128, 128, 128, 0)'
}
},
yAxisIndex:0
},{
name:'总拆分金额(万元)',
type:'bar',
stack: 'DD',
data:dataDivfee,
label:{
show: true, //
position: 'insideBottom', //
textStyle: {
color: '#000'
},
formatter: '{c}' // {c}
},itemStyle: {
normal: {
color: 'rgba(128, 128, 128, 0)'
}
},
yAxisIndex:0
}
]
};
myChart.setOption(option);
},initOptionLineType(divId,dataX,datafee,dataDivfee,dataFlow,subTitle) {
let myChart = this.$echarts.init(document.getElementById(divId))
//
let option = {
title : {
text: '',
subtext: ''
},
grid:{
bottom:'15%'
},
tooltip : {
trigger: 'axis',
},
legend: {
//data:["()","()","()"]
},
dataZoom: [
{
type: 'inside'
}
],
toolbox: {
show : true,
orient: 'vertical',
feature : {
saveAsImage:{
type:"jpg",
show: true,
title: '保存为图片'
}
}
},
calculable : true,
xAxis :[
{
type: 'category',
data: dataX,
axisLabel:{
interval:0,
rotate:40
},
axisPointer: {
type: 'shadow'
},nameTextStyle:{
fontSize:9,
lineHeight:100
}
}
],
yAxis :[
{
type: 'value',
name: '金额',
axisLabel: {
formatter: '{value} 万元'
}
},
{
type: 'value',
name: '流量',
axisLabel: {
formatter: '{value} 万辆'
}
}
],
series : [
{
name:subTitle+'流量(万辆)',
type:'line',
data:dataFlow,
label:{
show: true, //
position: 'top', //
formatter: '{c}' // {c}
},
yAxisIndex:1
},{
name:subTitle+'计费金额(万元)',
type:'bar',
data:datafee,
label:{
show: true, //
position: 'inside', //
formatter: '{c}' // {c}
},
yAxisIndex:0
},{
name:subTitle+'拆分金额(万元)',
type:'bar',
data:dataDivfee,
label:{
show: true, //
position: 'inside', //
formatter: '{c}' // {c}
},
yAxisIndex:0
}
]
};
myChart.setOption(option);
}
}, mounted() {
_this = this;
}
}
</script>
<style>
</style>

@ -51,7 +51,7 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="阈值(%)" style="padding: 0px;margin-left:5px;"> <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-input-number v-model="num" :precision="2" :min="0" :step="0.1" :max="200" @change="refreshEveryData"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="" style="width:8%;margin-right:5px" class="s_el_row"> <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"> <div style="display:flex;text-align: left; height:100%; position: relative;margin:0;padding:0">
@ -62,22 +62,8 @@
</el-form> </el-form>
</div> </div>
<div class="contain-div"> <div class="contain-div">
<!-- <div> <div style="width:100%;height: 300px;position:relative" v-show="showDiv">
<el-row :gutter="12"> <div id="feePie" style="width: 700px;height:290px" v-loading="loading" ></div>
<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>
<div class="everydata_div" style="width:100%;height: 600px;border-bottom: #6b778c 1px solid;position:relative"> <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"> <div style="width:100%;padding-bottom: 20px;height: 100%" v-show="hbShow">
@ -90,7 +76,7 @@
<everyDayDataJM ref="everyDayDataJM" ></everyDayDataJM> <everyDayDataJM ref="everyDayDataJM" ></everyDayDataJM>
</div> </div>
</div> </div>
<div class="charts_div" style="height: 800px;position:relative"> <div class="charts_div" style="height: 800px;position:relative" v-show="showDiv">
<echatsTotalLine ref="echatsTotalLine" /> <echatsTotalLine ref="echatsTotalLine" />
</div> </div>
</div> </div>
@ -109,11 +95,11 @@ body{
width: 100% !important; width: 100% !important;
} }
.contain-div{ .contain-div{
height: 90%; height: 89%;
width: 100%; width: 100%;
} }
.top_div{ .top_div{
height: 10%; height: 11%;
width: 100%; width: 100%;
border-bottom: #c9c6c6 solid; border-bottom: #c9c6c6 solid;
top: 0; top: 0;
@ -126,7 +112,7 @@ body{
import { import {
Search, Upload Search, Upload
} from '@element-plus/icons-vue' } from '@element-plus/icons-vue'
import {getSelectList, getRankList, getHzData, exportDivPassidAllData} from "@/util/api/api"; import {getSelectList, getTotalFeeAndDivFee} from "@/util/api/api";
import everyDayData from "@/views/dev/detail/everyDayData.vue"; import everyDayData from "@/views/dev/detail/everyDayData.vue";
import hbData from "@/views/dev/detail/hbData.vue"; import hbData from "@/views/dev/detail/hbData.vue";
import echatsTotalLine from "@/views/dev/echarts/echatsTotalLine.vue"; import echatsTotalLine from "@/views/dev/echarts/echatsTotalLine.vue";
@ -143,6 +129,7 @@ data() {
showHZ:true, showHZ:true,
showHZMF:false, showHZMF:false,
loading:false, loading:false,
showDiv:true,
rpTime:"", rpTime:"",
num:90, num:90,
searchButton:Search, searchButton:Search,
@ -167,12 +154,20 @@ data() {
}, },
methods: { methods: {
changeRadio(value){ changeRadio(value){
if(this.rpTime){
this.begindate=this.rpTime[0];
this.enddate=this.rpTime[1];
this.tableloading=true;
this.hbStartTimeQuery=tool.DayDec(this.begindate,0- this.diffDate);
this.hbEndTimeQuery=tool.DayDec(this.enddate,0- this.diffDate);
}
if(value===3){ if(value===3){
this.showExportButton=false; this.showExportButton=false;
this.hbShow=true; this.hbShow=true;
this.showHZ=false; this.showHZ=false;
this.showHZMF=false; this.showHZMF=false;
this.showClass=false; this.showClass=false;
this.showDiv=false;
if(this.begindate && this.enddate && this.enddate!==""){ if(this.begindate && this.enddate && this.enddate!==""){
this.hbStartTimeQuery=tool.DayDec(this.begindate,0- this.diffDate); this.hbStartTimeQuery=tool.DayDec(this.begindate,0- this.diffDate);
this.hbEndTimeQuery=tool.DayDec(this.enddate,0- this.diffDate); this.hbEndTimeQuery=tool.DayDec(this.enddate,0- this.diffDate);
@ -184,6 +179,7 @@ methods: {
this.showHZ=false; this.showHZ=false;
this.showHZMF=false; this.showHZMF=false;
this.showClass=true; this.showClass=true;
this.showDiv=false;
this.$refs["everyDayDataJM"].refreshData(this.begindate,this.enddate,this.subcomno,this.roadno,this.stano,this.radio) this.$refs["everyDayDataJM"].refreshData(this.begindate,this.enddate,this.subcomno,this.roadno,this.stano,this.radio)
}else if(value===6 ){ }else if(value===6 ){
if(!this.num){ if(!this.num){
@ -191,9 +187,25 @@ methods: {
} }
this.showExportButton=true; this.showExportButton=true;
this.hbShow=false; this.hbShow=false;
this.showDiv=true;
this.showHZ=true; this.showHZ=true;
this.showHZMF=false; this.showHZMF=false;
this.showClass=false; this.showClass=false;
if(!this.begindate){
var data=[];
data.push({
value: 0,
name: "未拆分"
});
data.push({
value: 0,
name: "已拆分"
});
this.initOptionPie(data,"feePie","未拆分金额与已拆分金额","单位:万元");
}else{
getTotalFeeAndDivFeeA();
this.$refs["echatsTotalLine"].refreshData(this.begindate,this.enddate,this.subcomno,this.roadno,this.stano);
}
this.$refs["everyDayData"].refreshData(this.begindate,this.enddate,this.subcomno,this.roadno,this.stano,this.radio,this.num) this.$refs["everyDayData"].refreshData(this.begindate,this.enddate,this.subcomno,this.roadno,this.stano,this.radio,this.num)
} }
@ -201,7 +213,7 @@ methods: {
if(!this.num){ if(!this.num){
this.num=90; this.num=90;
} }
if(value===6 ){ if(this.radio===6 ){
this.hbShow=false; this.hbShow=false;
this.showHZ=true; this.showHZ=true;
this.showHZMF=false; this.showHZMF=false;
@ -218,7 +230,6 @@ methods: {
} }
}, },
search() {// search() {//
console.log(this.rpTime)
if(this.rpTime){ if(this.rpTime){
this.begindate=this.rpTime[0]; this.begindate=this.rpTime[0];
this.enddate=this.rpTime[1]; this.enddate=this.rpTime[1];
@ -229,14 +240,14 @@ methods: {
alert("请选择日期"); alert("请选择日期");
return ; return ;
} }
getTotalFeeAndDivFeeA();
this.$refs["echatsTotalLine"].refreshData(this.begindate,this.enddate,this.subcomno,this.roadno,this.stano); this.$refs["echatsTotalLine"].refreshData(this.begindate,this.enddate,this.subcomno,this.roadno,this.stano);
if(this.radio ===3){ if(this.radio ===3){
this.$refs["hbData"].refreshDataHb(this.begindate,this.enddate,this.hbStartTimeQuery,this.hbEndTimeQuery) this.$refs["hbData"].refreshDataHb(this.begindate,this.enddate,this.hbStartTimeQuery,this.hbEndTimeQuery)
}else if(this.radio ===9){ }else if(this.radio ===9){
this.$refs["everyDayDataJM"].refreshData(this.begindate,this.enddate,this.subcomno,this.roadno,this.stano,this.radio) this.$refs["everyDayDataJM"].refreshData(this.begindate,this.enddate,this.subcomno,this.roadno,this.stano,this.radio)
}else{ }else{
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)
} }
}, changesubcomnoValue() { }, changesubcomnoValue() {
this.stano=""; this.stano="";
@ -248,8 +259,15 @@ methods: {
this.stano=""; this.stano="";
getStalist(); getStalist();
},exportExcle(){ },exportExcle(){
if(this.rpTime){
this.begindate=this.rpTime[0];
this.enddate=this.rpTime[1];
this.tableloading=true;
this.hbStartTimeQuery=tool.DayDec(this.begindate,0- this.diffDate);
this.hbEndTimeQuery=tool.DayDec(this.enddate,0- this.diffDate);
}
this.$refs["everyDayData"].exportExcle(this.begindate,this.enddate,this.subcomno,this.roadno,this.stano,this.radio) this.$refs["everyDayData"].exportExcle(this.begindate,this.enddate,this.subcomno,this.roadno,this.stano,this.radio)
},initOption(data,echartsId,title,subtext) { },initOptionPie(data,echartsId,title,subtext) {
let myChart = this.$echarts.init(document.getElementById(echartsId)) let myChart = this.$echarts.init(document.getElementById(echartsId))
// //
this.option = { this.option = {
@ -263,8 +281,10 @@ methods: {
left:'left' left:'left'
}, },
legend: { legend: {
orient: 'horizontal', // vertical orient: 'vertical', // vertical horizontal
top: 'bottom', //orient: 'vertical', // vertical
left: '80%',
top:'30%',
fontSize:'5px' fontSize:'5px'
}, },
series: [ series: [
@ -273,7 +293,7 @@ methods: {
avoidLabelOverlap: true, // avoidLabelOverlap: true, //
radius: '55%',//55 , label radius: '55%',//55 , label
//radius: ['50%','70%'],//55 , label //radius: ['50%','70%'],//55 , label
center: ['50%', '50%'],// X Y center: ['50%', '60%'],// X Y
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
shadowOffsetX: 0, shadowOffsetX: 0,
@ -326,7 +346,11 @@ mounted() {
value: 0, value: 0,
name: "未拆分" name: "未拆分"
}); });
this.initOption(data,"feePie","未拆分金额与已拆分金额","单位:万元"); data.push({
value: 0,
name: "已拆分"
});
this.initOptionPie(data,"feePie","未拆分金额与已拆分金额","单位:万元");
} }
} }
@ -381,7 +405,7 @@ function getStalist() {
} }
) )
} }
function getTotalFeeAndDivFee() { function getTotalFeeAndDivFeeA() {
let staParams = { let staParams = {
"queryStartTime": _this.begindate, "queryStartTime": _this.begindate,
"queryEndTime": _this.enddate, "queryEndTime": _this.enddate,
@ -389,6 +413,7 @@ function getTotalFeeAndDivFee() {
"roadno": _this.roadno, "roadno": _this.roadno,
"stano": _this.stano "stano": _this.stano
} }
_this.loading=true;
var data = []; var data = [];
getTotalFeeAndDivFee(staParams).then( getTotalFeeAndDivFee(staParams).then(
res => { res => {
@ -408,7 +433,7 @@ function getTotalFeeAndDivFee() {
_this.totalFee = 0 _this.totalFee = 0
_this.totaldivfee = 0 _this.totaldivfee = 0
} }
tool.initOption(data,"feePie","未拆分金额与已拆分金额","单位:万元") _this.initOptionPie(data,"feePie","未拆分金额与已拆分金额","单位:万元")
} }
) )
} }

@ -44,7 +44,7 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="匹配类型:" class="s_el_row" style="width:10%"> <!-- <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-select v-model="multiType" filterable placeholder="请选择..." style="width:100%;height:100%;border-color: gainsboro" clearable>
<el-option <el-option
v-for="item in multiTypeList" v-for="item in multiTypeList"
@ -53,7 +53,7 @@
:value="item.VALUE"> :value="item.VALUE">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>-->
<el-form-item style="padding: 0px;margin-right:5px;"> <el-form-item style="padding: 0px;margin-right:5px;">
<el-radio-group v-model="radio" @change="changeRadio"> <el-radio-group v-model="radio" @change="changeRadio">
<el-radio :label="5">计费未拆分</el-radio> <el-radio :label="5">计费未拆分</el-radio>
@ -63,14 +63,17 @@
<el-form-item label="" style="width:8%;margin-right:5px" class="s_el_row"> <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"> <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;" @click="search" class="query_button" size="default" :icon="searchButton">查询</el-button>
<el-button type="primary" style="margin-top: 0px;margin-left: 20px;background-color: #eec10d" @click="search" class="query_button" size="default" >一键匹配</el-button>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div id="second_div_0507" v-if="showFeeNoDiv"> <div id="second_div_0507" v-show="showFeeNoDiv">
<feeAndNodiv ref="feeAndNodiv" /> <feeAndNodiv ref="feeAndNodiv" />
</div> </div>
<div id="second_div_0508" v-show="showDivNofee">
<divAndNoFee ref="divAndNoFee" />
</div>
</template> </template>
<style scoped> <style scoped>
@ -82,6 +85,10 @@
height: 90%; height: 90%;
width: 100%; width: 100%;
} }
#second_div_0508{
height: 90%;
width: 100%;
}
</style> </style>
<script> <script>
import { import {
@ -89,6 +96,7 @@ import {
} from '@element-plus/icons-vue' } from '@element-plus/icons-vue'
import { getSelectList} from "@/util/api/api"; import { getSelectList} from "@/util/api/api";
import feeAndNodiv from "@/views/dev/detail/nodivandnofee/feeAndNodiv.vue" import feeAndNodiv from "@/views/dev/detail/nodivandnofee/feeAndNodiv.vue"
import divAndNoFee from "@/views/dev/detail/nodivandnofee/divAndNoFee.vue"
import tool from "@/util/tool"; import tool from "@/util/tool";
var _this; var _this;
export default { export default {
@ -152,8 +160,8 @@ export default {
this.paramAll.divstatus=4; this.paramAll.divstatus=4;
this.$refs["feeAndNodiv"].refreshData(this.paramAll) this.$refs["feeAndNodiv"].refreshData(this.paramAll)
}else{ }else{
alert("切换目录");
this.paramAll.divstatus=5; this.paramAll.divstatus=5;
this.$refs["divAndNoFee"].refreshData(this.paramAll)
} }
},showDivDetial(row,column,e){ },showDivDetial(row,column,e){
this.feeunitTitleMain=row.tollintervalidname; this.feeunitTitleMain=row.tollintervalidname;
@ -171,7 +179,8 @@ export default {
} }
}, },
components: { components: {
feeAndNodiv feeAndNodiv,
divAndNoFee
}, },
mounted() { mounted() {
_this=this; _this=this;

@ -1,7 +1,8 @@
<!--排名数据与计费列表 --> <!--排名数据与计费列表 -->
<template> <template>
<div class="top_div_rank"> <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 :inline="true" label-position="right" class="demo-form-inline" style="width:100%;height: 100%">
<el-form-item><span style="color: #67c23a;font-size: large">通用条件</span></el-form-item>
<el-form-item label="日期:" class="s_el_row"> <el-form-item label="日期:" class="s_el_row">
<el-date-picker <el-date-picker
v-model="rpTime" v-model="rpTime"
@ -14,7 +15,7 @@
/> />
</el-form-item> </el-form-item>
<el-form-item label="分公司名称:" class="s_el_row" style="width:13%"> <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-select v-model="subcomno" @change="changesubcomnoValue" filterable="true" placeholder="请选择..." clearable="true" style="width:100%;height:100%;border-color: gainsboro">
<el-option <el-option
v-for="item in subcomDatas" v-for="item in subcomDatas"
:key="item.VALUE" :key="item.VALUE"
@ -23,7 +24,7 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="路段名称:" class="s_el_row" style="width:12%"> <!-- <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-select v-model="roadno" @change="changeroadValue" filterable placeholder="请选择..." clearable style="width:100%;height:100%;border-color: gainsboro">
<el-option <el-option
v-for="item in roadDatas" v-for="item in roadDatas"
@ -42,7 +43,7 @@
:value="item.VALUE"> :value="item.VALUE">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>-->
<el-form-item label="" style="width:8%;margin-right:5px" class="s_el_row"> <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"> <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;" @click="search" class="query_button" size="default" :icon="searchButton">查询</el-button>
@ -80,23 +81,24 @@
<el-table-column type="index" label="排名" align="center" width="80px"/> <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="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="tollintervalid" label="计费单元id" v-if="false" />
<el-table-column prop="fee" label="计费金额(元)" :show-overflow-tooltip="true" width="200px" resizable align="center" /> <el-table-column prop="fee" label="计费金额(万元)" :show-overflow-tooltip="true" width="100px" resizable align="center" />
<el-table-column prop="divfee" label="拆分金额(万元)" :show-overflow-tooltip="true" width="100px" resizable align="center" />
</el-table> </el-table>
</div> </div>
<div class="middle-div-right_rank"> <div class="middle-div-right_rank">
<div class="hz-div_rank"> <div class="hz-div_rank">
<el-row style="padding-bottom: 20px;position: relative;border-bottom: #c9c6c6 solid"> <el-row style="padding-bottom: 20px;position: relative;border-bottom: 0.5px #c9c6c6 solid">
<el-col :span="6"> <el-col :span="6">
<i style="font-size: 15px">车流量{{carCount}} </i> <i style="font-size: 15px">车流量{{carCount}} </i>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<i style="font-size: 15px">计费金额{{feeTotal}} </i> <i style="font-size: 15px">计费金额{{feeTotal}} </i>
</el-col> </el-col>
<el-col :span="6" v-if="false"> <el-col :span="6" v-if="false">
<i style="font-size: 15px">应收金额{{payfeeTotal}} </i> <i style="font-size: 15px">应收金额{{payfeeTotal}} </i>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<i style="font-size: 15px">拆分金额{{divfeeTotal}} </i> <i style="font-size: 15px">拆分金额{{divfeeTotal}} </i>
</el-col> </el-col>
</el-row> </el-row>
<el-row style="padding-bottom:10px;position: relative;"> <el-row style="padding-bottom:10px;position: relative;">
@ -110,25 +112,25 @@
</el-row > </el-row >
<el-row style="padding-bottom:15px;position: relative;border-bottom: #c9c6c6 solid"> <el-row style="padding-bottom:15px;position: relative;border-bottom: #c9c6c6 solid">
<el-col :span="6" > <el-col :span="6" >
<i style="font-size: 15px">车流量{{typecarCount}} </i> <i style="font-size: 15px">车流量{{typecarCount}} </i>
</el-col> </el-col>
<el-col :span="6" > <el-col :span="6" >
<i style="font-size: 15px">计费金额{{typefeeTotal}} </i> <i style="font-size: 15px">计费金额{{typefeeTotal}} </i>
</el-col> </el-col>
<el-col :span="6" v-if="false"> <el-col :span="6" v-if="false">
<i style="font-size: 15px">应收金额{{typepayfeeTotal}} </i> <i style="font-size: 15px">应收金额{{typepayfeeTotal}} </i>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<i style="font-size: 15px">拆分金额{{typedivfeeTotal}} </i> <i style="font-size: 15px">拆分金额{{typedivfeeTotal}} </i>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="dt-div_rank"> <div class="dt-div_rank">
<!-- <mapvue ref="map" :begindate="begindate" :enddate="enddate"></mapvue>--> <!-- <mapvue ref="map" :begindate="begindate" :enddate="enddate"></mapvue>-->
<div style="height: 8%;width: 100%;position:relative"> <!-- <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 :inline="true" :label-position="right" style="width:100%;height: 100%;margin-top: 20px">
<el-form-item label="名称:"> <el-form-item label="名称:">
<el-input :model-value="queryfeename"/> <el-input v-model="queryfeename"/>
</el-form-item> </el-form-item>
<el-form-item label="" style="width:8%;margin-right:5px" class="s_el_row"> <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"> <div style="display:flex;text-align: left; height:100%; position: relative;margin:0;padding:0">
@ -138,7 +140,7 @@
</el-form> </el-form>
</div> </div>
<div style="height: 85%;width: 100%;position:relative"> <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" <el-table :data="tableDataDetail" height="100%" :header-cell-style="{background:'rgb(213,216,217)',align:'center'}" border v-loading="feeloading"
@row-dblclick="showDivDetial"> @row-dblclick="showDivDetial">
<el-table-column type="index" label="序号" align="center" width="100px"/> <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="tollintervalid" label="计费单元id" v-if="tableDisable" align="center" />
@ -146,11 +148,10 @@
<el-table-column prop="subcomname" label="分公司" align="center" width="220px"/> <el-table-column prop="subcomname" label="分公司" align="center" width="220px"/>
<el-table-column prop="roadname" label="路段" align="center" width="200px"/> <el-table-column prop="roadname" label="路段" align="center" width="200px"/>
<el-table-column prop="staname" 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-column prop="lengthT" label="计费单元长度(米)" align="center" width="200px"/>
</el-table> </el-table>
</div> </div>
<div style="height: 5%;width: 100%;position:relative"> <div style="height: 5%;width: 100%;position:relative">
<!-- 分页 -->
<el-pagination <el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
@ -161,6 +162,46 @@
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
style="width: 90%;height:100%;position:inherit;margin-top:5px;font-size: x-small"> style="width: 90%;height:100%;position:inherit;margin-top:5px;font-size: x-small">
</el-pagination> </el-pagination>
</div>-->
<div style="height: 8%;width: 100%;position:relative">
<el-form :inline="true" :label-position="right" style="width:100%;height: 100%;margin-top: 20px">
<el-form-item label="路线名称:">
<el-select v-model="roadLineNo" @change="changeRoadLine" filterable="true" placeholder="请选择..." clearable="true" style="width:100%;height:100%;border-color: gainsboro">
<el-option
v-for="item in roadLineList"
:key="item.VALUE"
:label="item.LABEL"
:value="item.VALUE">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="方向:">
<el-switch
v-model="directRoad"
@change="changeDirect"
active-text="上行"
active-value="1"
inactive-text="下行"
inactive-value="2">
</el-switch>
</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="searchRoad" class="query_button" size="default" :icon="searchButton">查询</el-button>-->
<el-button type="primary" style="margin-top: 0px;" @click="showRoadEchart" class="query_button" size="default" :icon="searchButton">走势图</el-button>
</div>
</el-form-item>
</el-form>
</div>
<div style="height: 90%;width: 100%;position:relative">
<el-table :data="roadLineTableData" height="100%" :header-cell-style="{background:'rgb(213,216,217)',align:'center'}"
border v-loading="roadLineloading" show-summary>
<el-table-column type="index" label="序号" align="center" width="100px"/>
<el-table-column prop="tollintervalidname" label="门架名称" width="300px" align="center" />
<el-table-column prop="fee" label="计费总金额(万元)" align="center" width="260px"/>
<el-table-column prop="divfee" label="拆分总金额(万元)" align="center" width="220px"/>
<el-table-column prop="carcount" label="计费总车流量(万辆)" align="center" width="200px"/>
</el-table>
</div> </div>
</div> </div>
</div> </div>
@ -174,6 +215,15 @@
:close-on-click-modal="clickDialog"> :close-on-click-modal="clickDialog">
<feeStatDetail :key="new Date().getTime()" :begindate="begindate" :enddate="enddate" :divStatus="divStatus" :tollvalid="tollvalid"></feeStatDetail> <feeStatDetail :key="new Date().getTime()" :begindate="begindate" :enddate="enddate" :divStatus="divStatus" :tollvalid="tollvalid"></feeStatDetail>
</el-dialog> </el-dialog>
<el-dialog title="走势图"
v-model="showRoadLine"
width="80%"
top="0.5%"
style="height: 50%"
:close-on-click-modal="clickDialog">
<roadLineEcharts ref="roadLineEcharts" ></roadLineEcharts>
</el-dialog>
</template> </template>
<style > <style >
html{ html{
@ -195,7 +245,7 @@ body{
.top_div_rank{ .top_div_rank{
height: 5%; height: 5%;
width: 100%; width: 100%;
border-bottom: #c9c6c6 solid; border-bottom: 0.5px #c9c6c6 solid;
top: 0; top: 0;
/*z-index: 1000; /* 确保它在其他内容之上 */ /*z-index: 1000; /* 确保它在其他内容之上 */
} }
@ -206,7 +256,7 @@ body{
border-top: #c9c6c6 solid; border-top: #c9c6c6 solid;
} }
.middle-div-left_rank{ .middle-div-left_rank{
height: 100%; height: 90%;
width: 30%; width: 30%;
border-right: #c9c6c6 solid; border-right: #c9c6c6 solid;
} }
@ -228,8 +278,9 @@ body{
import { import {
Search Search
} from '@element-plus/icons-vue' } from '@element-plus/icons-vue'
import {getSelectList, getRankList, getHzData, getFeeunitListByPage} from "@/util/api/api"; import {getSelectList, getRankList, getHzData, getFeeunitListByPage,getGantryListByLineNo} from "@/util/api/api";
import feeStatDetail from '@/views/dev/detail/feeStatDetail.vue' import feeStatDetail from '@/views/dev/detail/feeStatDetail.vue'
import roadLineEcharts from '@/views/dev/echarts/roadLineEcharts.vue'
var _this; var _this;
export default { export default {
name: "checkEcharts", name: "checkEcharts",
@ -241,11 +292,12 @@ data() {
tableDataDetail: [], tableDataDetail: [],
tableDisable:false, tableDisable:false,
tableloading:false, tableloading:false,
feeloading:false,
rpTime:"", rpTime:"",
searchButton:Search, searchButton:Search,
clickDialog:false, clickDialog:false,
divStatus:"", divStatus:"",
selectedText:"", selectedText:"拆分准确",
divStatusList:[], divStatusList:[],
rankList:[{"VALUE":1,"LABEL":"10"},{"VALUE":2,"LABEL":"20"},{"VALUE":3,"LABEL":"30"}], rankList:[{"VALUE":1,"LABEL":"10"},{"VALUE":2,"LABEL":"20"},{"VALUE":3,"LABEL":"30"}],
carCount:"0", carCount:"0",
@ -267,27 +319,33 @@ data() {
subcomDatas: [], subcomDatas: [],
roadDatas: [], roadDatas: [],
staDatas: [], staDatas: [],
roadLineList: [],
subcomno: "", subcomno: "",
roadno: "", roadno: "",
stano: "", stano: "",
queryfeename:"" queryfeename:"",
roadLineNo:"", //线
directRoad:"1",
roadLineloading:false,
roadLineTableData:[],
showRoadLine:false
} }
}, },
methods: { methods: {
handleSizeChange(val) { handleSizeChange(val) {
this.pageSize = val; this.pageSize = val;
this.tableloading=true; this.feeloading=true;
getFeeunitlist(); getFeeunitlist();
},handleCurrentChange(val) { },handleCurrentChange(val) {
this.pageNum = val; this.pageNum = val;
this.tableloading=true; this.feeloading=true;
getFeeunitlist(); getFeeunitlist();
}, },search() {//
search() {//
if(this.rpTime){ if(this.rpTime){
this.begindate=this.rpTime[0]; this.begindate=this.rpTime[0];
this.enddate=this.rpTime[1]; this.enddate=this.rpTime[1];
this.tableloading=true; this.tableloading=true;
this.feeloading=true;
}else{ }else{
alert("请选择日期"); alert("请选择日期");
return ; return ;
@ -309,11 +367,15 @@ methods: {
this.getAllFeeData(); this.getAllFeeData();
getFeeunitlist(); getFeeunitlist();
getGantryList();
},changeRank(vale){ },changeRank(vale){
if(!this.rpTime){
alert("请选择日期");
return ;
}
this.tableloading=true; this.tableloading=true;
this.divStatus=vale; this.divStatus=vale;
const selectedItem = this.divStatusList.find(item => item.VALUE === vale);
const selectedItem = this.divStatusList.find(item => item.VALUE === value);
this.selectedText = selectedItem ? selectedItem.LABEL : ''; this.selectedText = selectedItem ? selectedItem.LABEL : '';
var params={ var params={
"pageNum":1, "pageNum":1,
@ -399,9 +461,39 @@ methods: {
}, changeroadValue() { }, changeroadValue() {
this.stano=""; this.stano="";
getStalist(); getStalist();
},changeRoadLine(){//线
if(this.rpTime){
this.begindate=this.rpTime[0];
this.enddate=this.rpTime[1];
getGantryList();
}else{
alert("请选择日期");
return ;
}
},changeDirect(){//
if(this.rpTime){
this.begindate=this.rpTime[0];
this.enddate=this.rpTime[1];
getGantryList();
}else{
alert("请选择日期");
return ;
}
},showRoadEchart(){//
if(this.roadLineTableData.length <1){
alert("无数据");
return false;
}else{
this.showRoadLine=true;
this.$nextTick(() => {
this.$refs["roadLineEcharts"].refreshData(this.roadLineTableData);
})
}
} }
}, },
components: { components: {
roadLineEcharts,
feeStatDetail feeStatDetail
}, },
mounted() { mounted() {
@ -419,6 +511,18 @@ mounted() {
this.divStatusList=res.data; this.divStatusList=res.data;
} }
}) })
selectType={
"selectType":"ROADLINE"
}
getSelectList(selectType).then(res=>{
if(res.code>0){
this.roadLineList=res.data;
if(this.roadLineList.length>0){
this.roadLineNo=this.roadLineList[0].VALUE;
}
}
})
} }
} }
@ -473,20 +577,39 @@ function getStalist() {
) )
} }
function getFeeunitlist() { function getFeeunitlist() {
_this.tableloading=true; _this.feeloading=true;
let staParams = { let staParams = {
"subcomno": _this.subcomno, "subcomno": _this.subcomno,
"roadno": _this.roadno, "roadno": _this.roadno,
"stano": _this.stano, "stano": _this.stano,
"tollintervalidname":_this.queryfeename "tollintervalidname":_this.queryfeename,
"pageNum":_this.pageNum,
"pageSize":_this.pageSize
} }
getFeeunitListByPage(staParams).then( getFeeunitListByPage(staParams).then(
res => { res => {
if (res.data) { _this.feeloading=false;
_this.tableDataDetail=res.records; _this.tableDataDetail=res.records;
_this.tableloading=false;
_this.totalCount=res.total; _this.totalCount=res.total;
} }
)
}
//线
function getGantryList() {
_this.roadLineloading=true;
let staParams = {
"roadLineNo":_this.roadLineNo,
"subcomno":_this.subcomno,
"queryStartTime":_this.begindate,
"queryEndTime":_this.enddate,
"directRoad":_this.directRoad
}
getGantryListByLineNo(staParams).then(
res => {
_this.roadLineloading=false;
console.log(res.data);
_this.roadLineTableData=res.data;
} }
) )
} }

Loading…
Cancel
Save