|
|
<template>
|
|
|
<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 id="YSLine" style="width: 800px;height:220px" v-loading="feeloading" ></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 id="divRightLine" style="width: 800px;height:220px" v-loading="loading" ></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<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 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 id="noFeeLine" style="width: 800px;height:220px" v-loading="loading" ></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<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 id="lessDivLine" 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 id="moreDivLine" style="width: 800px;height:220px" v-loading="loading" ></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {ref } from 'vue';
|
|
|
import tool from '@/util/tool';
|
|
|
import {getDivDataList, getFeeTotal} from "@/util/api/api";
|
|
|
//import {getGantryPassDivStatList} from '../../../util/api/api.js'
|
|
|
|
|
|
var _this;
|
|
|
export default {
|
|
|
name: "echatsTotalLine",
|
|
|
data() {
|
|
|
return {
|
|
|
loading:ref(false),
|
|
|
feeloading:ref(false),
|
|
|
beginDate:"",
|
|
|
endDate:"",
|
|
|
dataType:"JT",
|
|
|
//dateTime:'2024-07-22'
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
refreshData(beginDate,endDate,subcomno,roadno,stano){
|
|
|
this.loading=true;
|
|
|
this.feeloading=true;
|
|
|
this.queryStartTime= beginDate;
|
|
|
this.queryEndTime= endDate;
|
|
|
this.subcomno= subcomno;
|
|
|
this.roadno= roadno;
|
|
|
this.stano= stano;
|
|
|
var paramsObj={
|
|
|
"queryStartTime":beginDate,
|
|
|
"queryEndTime":endDate,
|
|
|
"subcomno":subcomno,
|
|
|
"roadno":roadno,
|
|
|
"stano":stano,
|
|
|
"isNoContainJm":"Y" //默认不包含减免的费用
|
|
|
}
|
|
|
getDivDataList(paramsObj).then(
|
|
|
res=>{
|
|
|
this.loading=false;
|
|
|
if (res.code > 0) {
|
|
|
let _data = res.data;
|
|
|
let dataX=[];
|
|
|
var dataRight = [];
|
|
|
var dataRightFlow = [];
|
|
|
|
|
|
var dataNoDiv = [];
|
|
|
var dataNoDivFlow = [];
|
|
|
|
|
|
var dataNoFee = [];
|
|
|
var dataNoFeeFlow = [];
|
|
|
|
|
|
var dataLessDiv = [];
|
|
|
var dataLessDivFee = [];
|
|
|
var dataLessDivFlow = [];
|
|
|
|
|
|
var dataMoreDiv = [];
|
|
|
var dataMoreDivFee = [];
|
|
|
var dataMoreDivFlow = [];
|
|
|
|
|
|
if(_data !==undefined ){
|
|
|
if (_data.length > 0) {
|
|
|
var _classdate="";
|
|
|
for(var k=0;k<_data.length;k++){
|
|
|
let divData=_data[k];
|
|
|
if(_classdate !== divData.classdate){
|
|
|
dataX.push(tool.formatDate(new Date(divData.classdate),"YYYY-MM-DD"));
|
|
|
_classdate=divData.classdate;
|
|
|
}
|
|
|
if(divData.status ==="1"){
|
|
|
dataRight.push(tool.NumRound(divData.fee));
|
|
|
dataRightFlow.push(divData.carcount);
|
|
|
}
|
|
|
if(divData.status ==="2"){//计费大于拆分
|
|
|
dataLessDiv.push(tool.NumRound(divData.fee));
|
|
|
dataLessDivFee.push(tool.NumRound(divData.divfee));
|
|
|
dataLessDivFlow.push(divData.carcount);
|
|
|
}
|
|
|
if(divData.status ==="3"){//计费小于拆分
|
|
|
dataMoreDiv.push(tool.NumRound(divData.fee));
|
|
|
dataMoreDivFee.push(tool.NumRound(divData.divfee));
|
|
|
dataMoreDivFlow.push(divData.carcount);
|
|
|
}
|
|
|
if(divData.status ==="4"){//未计费
|
|
|
dataNoFee.push(tool.NumRound(divData.divfee));
|
|
|
dataNoFeeFlow.push(divData.carcount);
|
|
|
}
|
|
|
if(divData.status ==="5"){//未拆分
|
|
|
dataNoDiv.push(tool.NumRound(divData.fee));
|
|
|
dataNoDivFlow.push(divData.carcount);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
this.$nextTick(() => {
|
|
|
this.initOptionLine('divRightLine', dataX, dataRight, dataRightFlow);
|
|
|
this.initOptionLine('noDivLine', dataX, dataNoDiv, dataNoDivFlow);
|
|
|
this.initOptionLine('noFeeLine', dataX, dataNoFee, dataNoFeeFlow);
|
|
|
this.initOptionLineMoreLess('lessDivLine', dataX, dataLessDiv,dataLessDivFee, dataLessDivFlow);
|
|
|
this.initOptionLineMoreLess('moreDivLine', dataX, dataMoreDiv,dataMoreDivFee, dataMoreDivFlow);
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
)
|
|
|
getFeeTotal(paramsObj).then(
|
|
|
res=>{
|
|
|
this.feeloading=false;
|
|
|
if (res.code > 0) {
|
|
|
let _data = res.data;
|
|
|
if (_data.length > 0) {
|
|
|
let dataX=[];
|
|
|
var dataYS = [];
|
|
|
var dataYSFlow = [];
|
|
|
if(_data !==undefined ){
|
|
|
for(var k=0;k<_data.length;k++){
|
|
|
let divData=_data[k];
|
|
|
dataX.push(tool.formatDate(new Date(divData.classdate),"YYYY-MM-DD"));
|
|
|
dataYS.push(tool.NumRound(divData.fee));
|
|
|
dataYSFlow.push(divData.carcount);
|
|
|
}
|
|
|
}
|
|
|
this.$nextTick(() => {
|
|
|
this.initOptionLine('YSLine', dataX, dataYS, dataYSFlow);
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
)
|
|
|
},initOptionLine(divId,dataX,dataMoney,dataFlow) {
|
|
|
let myChart = this.$echarts.init(document.getElementById(divId))
|
|
|
// 绘制图表
|
|
|
this.option = {
|
|
|
title : {
|
|
|
text: '',
|
|
|
subtext: ''
|
|
|
},
|
|
|
tooltip : {
|
|
|
trigger: 'axis',
|
|
|
//position:['20px','20px']
|
|
|
},
|
|
|
legend: {
|
|
|
data:["流量(辆)","金额(元)"]
|
|
|
},
|
|
|
toolbox: {
|
|
|
show : true,
|
|
|
orient: 'vertical',
|
|
|
title : {
|
|
|
line : '折线图',
|
|
|
bar : '柱形图'
|
|
|
|
|
|
},
|
|
|
feature : {
|
|
|
mark : {show: true},
|
|
|
//垂直显示
|
|
|
//dataView : {show: true, readOnly: false},
|
|
|
magicType : {show: true,
|
|
|
title : {
|
|
|
line : '折线图',
|
|
|
bar : '柱形图'
|
|
|
|
|
|
},
|
|
|
type: ['line', 'bar']},
|
|
|
}
|
|
|
},
|
|
|
calculable : true,
|
|
|
xAxis :
|
|
|
{
|
|
|
type : 'category',
|
|
|
name:'日期',
|
|
|
nameTextStyle:{
|
|
|
lineHeight:30,
|
|
|
verticalAlign:'top'
|
|
|
},
|
|
|
boundaryGap : true,
|
|
|
axisTick: {
|
|
|
show: true,
|
|
|
alignWithLabel:true
|
|
|
|
|
|
},
|
|
|
axisLabel: { //设置x轴的文字
|
|
|
show:true,
|
|
|
interval:0,//使x轴横坐标全部显示
|
|
|
//rotate:45,
|
|
|
textStyle:{fontSize:10}
|
|
|
},
|
|
|
data : dataX
|
|
|
}, dataZoom: [{
|
|
|
type: 'slider',
|
|
|
show: true, //flase直接隐藏图形
|
|
|
xAxisIndex: [0],
|
|
|
backgroundColor:'rgb(233,236,238)',
|
|
|
handleColor:'rgba(147,145,145,0.81)',
|
|
|
fillerColor:'rgb(184,186,187)',
|
|
|
handleSize:30,//控制手柄大小
|
|
|
height:30,
|
|
|
left: '9%', //滚动条靠左侧的百分比
|
|
|
bottom: -5,
|
|
|
start: 0,//滚动条的起始位置
|
|
|
end: 110 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
|
|
|
}],
|
|
|
yAxis :[
|
|
|
{
|
|
|
type : 'value',
|
|
|
axisLabel : {
|
|
|
formatter: '{value}'
|
|
|
},
|
|
|
show:false,
|
|
|
splitLine:{
|
|
|
show:true
|
|
|
},
|
|
|
lineStyle:{
|
|
|
color:'black',
|
|
|
type:'solid',
|
|
|
width:2
|
|
|
},
|
|
|
sync: true,
|
|
|
splitNumber:10,
|
|
|
position:'left'
|
|
|
},{
|
|
|
type : 'value',
|
|
|
axisLabel : {
|
|
|
formatter: '{value}'
|
|
|
},
|
|
|
show:false,
|
|
|
splitLine:{
|
|
|
show:true
|
|
|
},
|
|
|
lineStyle:{
|
|
|
color:'black',
|
|
|
type:'solid',
|
|
|
width:2
|
|
|
},
|
|
|
sync: true,
|
|
|
splitNumber:100,
|
|
|
position:'right'
|
|
|
}
|
|
|
],
|
|
|
series : [
|
|
|
{
|
|
|
name:'流量(辆)',
|
|
|
type:'line',
|
|
|
data:dataFlow,
|
|
|
label:{
|
|
|
show: true, // 显示标签
|
|
|
position: 'top', // 标签位置
|
|
|
formatter: '{c}' // 标签格式器，{c} 代表数据值
|
|
|
},
|
|
|
yAxisIndex:0
|
|
|
},{
|
|
|
name:'金额(元)',
|
|
|
type:'bar',
|
|
|
data:dataMoney,
|
|
|
label:{
|
|
|
show: true, // 显示标签
|
|
|
position: 'inside', // 标签位置
|
|
|
formatter: '{c}' // 标签格式器，{c} 代表数据值
|
|
|
},
|
|
|
yAxisIndex:1
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
myChart.setOption(this.option);
|
|
|
/*myChart.on('click', function(params) {
|
|
|
// 控制台打印数据的名称
|
|
|
_this.$emit("changeGantryCount",params.name);
|
|
|
});*/
|
|
|
},initOptionLineMoreLess(divId,dataX,dataMoney,dataFeeMoney,dataFlow) {
|
|
|
let myChart = this.$echarts.init(document.getElementById(divId))
|
|
|
// 绘制图表
|
|
|
this.option = {
|
|
|
title : {
|
|
|
text: '',
|
|
|
subtext: ''
|
|
|
},
|
|
|
tooltip : {
|
|
|
trigger: 'axis',
|
|
|
//position:['20px','20px']
|
|
|
},
|
|
|
legend: {
|
|
|
data:["流量(辆)","计费金额(元)","拆分金额(元)"]
|
|
|
},
|
|
|
toolbox: {
|
|
|
show : true,
|
|
|
orient: 'vertical',
|
|
|
title : {
|
|
|
line : '折线图',
|
|
|
bar : '柱形图'
|
|
|
|
|
|
},
|
|
|
feature : {
|
|
|
mark : {show: true},
|
|
|
//垂直显示
|
|
|
//dataView : {show: true, readOnly: false},
|
|
|
magicType : {show: true,
|
|
|
title : {
|
|
|
line : '折线图',
|
|
|
bar : '柱形图'
|
|
|
|
|
|
},
|
|
|
type: ['line', 'bar']},
|
|
|
}
|
|
|
},
|
|
|
calculable : true,
|
|
|
xAxis :
|
|
|
{
|
|
|
type : 'category',
|
|
|
name:'日期',
|
|
|
nameTextStyle:{
|
|
|
lineHeight:30,
|
|
|
verticalAlign:'top'
|
|
|
},
|
|
|
boundaryGap : true,
|
|
|
axisTick: {
|
|
|
show: true,
|
|
|
alignWithLabel:true
|
|
|
|
|
|
},
|
|
|
axisLabel: { //设置x轴的文字
|
|
|
show:true,
|
|
|
interval:0,//使x轴横坐标全部显示
|
|
|
//rotate:45,
|
|
|
textStyle:{fontSize:10}
|
|
|
},
|
|
|
data : dataX
|
|
|
}, dataZoom: [{
|
|
|
type: 'slider',
|
|
|
show: true, //flase直接隐藏图形
|
|
|
xAxisIndex: [0],
|
|
|
backgroundColor:'rgb(233,236,238)',
|
|
|
handleColor:'rgba(147,145,145,0.81)',
|
|
|
fillerColor:'rgb(184,186,187)',
|
|
|
handleSize:30,//控制手柄大小
|
|
|
height:30,
|
|
|
left: '9%', //滚动条靠左侧的百分比
|
|
|
bottom: -5,
|
|
|
start: 0,//滚动条的起始位置
|
|
|
end: 110 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
|
|
|
}],
|
|
|
yAxis :[
|
|
|
{
|
|
|
type : 'value',
|
|
|
axisLabel : {
|
|
|
formatter: '{value}'
|
|
|
},
|
|
|
show:false,
|
|
|
splitLine:{
|
|
|
show:true
|
|
|
},
|
|
|
lineStyle:{
|
|
|
color:'black',
|
|
|
type:'solid',
|
|
|
width:2
|
|
|
},
|
|
|
sync: true,
|
|
|
splitNumber:10,
|
|
|
position:'left'
|
|
|
},{
|
|
|
type : 'value',
|
|
|
axisLabel : {
|
|
|
formatter: '{value}'
|
|
|
},
|
|
|
show:false,
|
|
|
splitLine:{
|
|
|
show:true
|
|
|
},
|
|
|
lineStyle:{
|
|
|
color:'black',
|
|
|
type:'solid',
|
|
|
width:2
|
|
|
},
|
|
|
sync: true,
|
|
|
splitNumber:100,
|
|
|
position:'right'
|
|
|
}
|
|
|
],
|
|
|
series : [
|
|
|
{
|
|
|
name:'流量(辆)',
|
|
|
type:'line',
|
|
|
data:dataFlow,
|
|
|
label:{
|
|
|
show: true, // 显示标签
|
|
|
position: 'top', // 标签位置
|
|
|
formatter: '{c}' // 标签格式器，{c} 代表数据值
|
|
|
},
|
|
|
yAxisIndex:0
|
|
|
},{
|
|
|
name:'计费金额(元)',
|
|
|
type:'bar',
|
|
|
data:dataMoney,
|
|
|
label:{
|
|
|
show: true, // 显示标签
|
|
|
position: 'inside', // 标签位置
|
|
|
formatter: '{c}' // 标签格式器，{c} 代表数据值
|
|
|
},
|
|
|
yAxisIndex:1
|
|
|
},{
|
|
|
name:'拆分金额(元)',
|
|
|
type:'bar',
|
|
|
data:dataFeeMoney,
|
|
|
label:{
|
|
|
show: true, // 显示标签
|
|
|
position: 'inside', // 标签位置
|
|
|
formatter: '{c}' // 标签格式器，{c} 代表数据值
|
|
|
},
|
|
|
yAxisIndex:1
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
myChart.setOption(this.option);
|
|
|
|
|
|
}
|
|
|
},mounted() {
|
|
|
_this=this;
|
|
|
/*
|
|
|
|
|
|
var paramsObj={
|
|
|
"beginDate":this.beginDate,
|
|
|
"endDate":this.endDate,
|
|
|
"dataType":this.dataType
|
|
|
}
|
|
|
getDivDataList(paramsObj).then(
|
|
|
res=>{
|
|
|
if (res.code > 0) {
|
|
|
let _data = res.data;
|
|
|
if (_data.length > 0) {
|
|
|
let dataX=[];
|
|
|
var dataYS = [];
|
|
|
var dataYSFlow = [];
|
|
|
|
|
|
var dataRight = [];
|
|
|
var dataRightFlow = [];
|
|
|
|
|
|
var dataNoDiv = [];
|
|
|
var dataNoDivFlow = [];
|
|
|
|
|
|
var dataNoFee = [];
|
|
|
var dataNoFeeFlow = [];
|
|
|
|
|
|
var dataLessDiv = [];
|
|
|
var dataLessDivFlow = [];
|
|
|
|
|
|
var dataMoreDiv = [];
|
|
|
var dataMoreDivFlow = [];
|
|
|
|
|
|
var dataYQ = [];
|
|
|
var dataYQFlow = [];
|
|
|
|
|
|
var dataJF = [];
|
|
|
var dataJFFlow = [];
|
|
|
|
|
|
if(_data !==undefined ){
|
|
|
for(var k=0;k<_data.length;k++){
|
|
|
dataX.push(tool.formatDate(new Date(_data[k].CLASSDATE),"YYYY-MM-DD"));
|
|
|
dataYS.push(tool.NumRound(_data[k].JTYSMONEY/10000));
|
|
|
dataYSFlow.push(_data[k].JTYSFLOW);
|
|
|
|
|
|
dataRight.push(tool.NumRound(_data[k].RIGHTMONEY /10000));
|
|
|
dataRightFlow.push(_data[k].RIGHTFLOW);
|
|
|
|
|
|
dataNoDiv.push(tool.NumRound(_data[k].NODIVMONEY/10000));
|
|
|
dataNoDivFlow.push(_data[k].NODIVFLOW);
|
|
|
|
|
|
dataNoFee.push(tool.NumRound(_data[k].NOFEEMONEY/10000));
|
|
|
dataNoFeeFlow.push(_data[k].NOFEEFLOW);
|
|
|
|
|
|
dataLessDiv.push(tool.NumRound(_data[k].LESSDIVMONEY/10000));
|
|
|
dataLessDivFlow.push(_data[k].LESSDIVFLOW);
|
|
|
|
|
|
dataMoreDiv.push(tool.NumRound(_data[k].MOREDIVMONEY/10000));
|
|
|
dataMoreDivFlow.push(_data[k].MOREDIVFLOW);
|
|
|
|
|
|
dataYQ.push(tool.NumRound(_data[k].YQMONEY/10000));
|
|
|
dataYQFlow.push(_data[k].YQFLOW);
|
|
|
|
|
|
dataJF.push(tool.NumRound(_data[k].JFMONEY/10000));
|
|
|
dataJFFlow.push(_data[k].JFFLOW);
|
|
|
}
|
|
|
}
|
|
|
this.initOptionLine('YSLine',dataX,dataYS,dataYSFlow);
|
|
|
this.initOptionLine('divRightLine',dataX,dataRight,dataRightFlow);
|
|
|
this.initOptionLine('noDivLine',dataX,dataNoDiv,dataNoDivFlow);
|
|
|
this.initOptionLine('noFeeLine',dataX,dataNoFee,dataNoFeeFlow);
|
|
|
this.initOptionLine('lessDivLine',dataX,dataLessDiv,dataLessDivFlow);
|
|
|
this.initOptionLine('moreDivLine',dataX,dataMoreDiv,dataMoreDivFlow);
|
|
|
this.initOptionLine('yqLine',dataX,dataYQ,dataYQFlow);
|
|
|
this.initOptionLine('jfLine',dataX,dataJF,dataJFFlow);
|
|
|
}
|
|
|
_this.loading=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 "";
|
|
|
}*/
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
</style> |