BMP
/
DivFlowMoneyProjectView
mirror of https://gitee.com/bmpandlcm/DivFlowMoneyProjectView.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

明细表修改样式

Browse Source
main
bmpandlcm 11 months ago
parent 57df4f05ab
commit 174d4ea3e6
22 changed files with 874 additions and 2858 deletions
Show Stats Download Patch File Download Diff File

36
src/views/dev/detail/everyDayAndLineData.vue
Unescape Escape View File

@ -1,10 +1,10 @@
<!-- 每日数据以及 拆分准确、未拆分、少拆分、多拆分、逾期、拒付折线图-->
<template>
<div class="div_main" style="height: 1200px;position: relative">
<div class="grid_main" style="padding-bottom: 30px;height: 400px;position: inherit">
<div class="div_main_jt" style="height: 1200px;position: relative">
<div class="grid_main_jt" style="padding-bottom: 30px;height: 400px;position: inherit">
<everyDayData ref="everyDayData" :key="updateTable" :beginDate="beginDate" :dataType="dataType" :endDate="endDate"></everyDayData>
</div>
<div class="echarts_main" style="height: 1000px;width: 100%;position: inherit">
<div class="echarts_main_jt" style="height: 1000px;width: 100%;position: inherit">
<echatsTotalLine ref="echatsTotalLine" :key="updateTable" :beginDate="beginDate" :dataType="dataType" :endDate="endDate"></echatsTotalLine>
</div>
</div>
@ -14,27 +14,12 @@ body{
width: 100% !important;
height: 100% !important;
}
#contain{
height: 100% ;
width:100% ;
margin: 0px;
}
</style>
<script >
import { ref} from "vue";
import {Filter,Search} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {Search} from '@element-plus/icons-vue'
import everyDayData from "@/views/dev/detail/everyDayData.vue";
import moreDivLine from "@/views/dev/echarts/moreDivLine.vue";
import YSLine from "@/views/dev/echarts/YSLine.vue";
import noDivLine from "@/views/dev/echarts/noDivLine.vue";
import noFeeLine from "@/views/dev/echarts/noFeeLine.vue";
import divRightLine from "@/views/dev/echarts/divRightLine.vue";
import jfLine from "@/views/dev/echarts/jfLine.vue";
import yqLine from "@/views/dev/echarts/yqLine.vue";
import lessDivLine from "@/views/dev/echarts/lessDivLine.vue";
import echatsTotalLine from "@/views/dev/echarts/echatsTotalLine.vue";
var _this;
export default{
@ -46,7 +31,6 @@ export default{
dataTime:'',
totalCount:500,
}},
props:['dataType','beginDate','endDate','updateTable'],
methods:{
handleSizeChange(val) {
this.pageSize = val;
@ -63,17 +47,21 @@ export default{
// 格式化日期，并返回字符串
//return `${date.toLocaleDateString()}`;
return formatDate(cellValue,"YYYY-MM-DD");
},refreshDataJT(beginDate,endDate){
this.$refs.everyDayData.$nextTick(()=>{
this.$refs.everyDayData.refreshData(beginDate,endDate);
})
this.$refs.echatsTotalLine.$nextTick(()=> {
this.$refs.echatsTotalLine.refreshData(beginDate, endDate);
})
}
},components:{
lessDivLine, yqLine, jfLine, divRightLine, noDivLine, moreDivLine, everyDayData,noFeeLine,YSLine,
everyDayData,
echatsTotalLine,
Search
},
mounted(){
_this=this;
/* this.tableData=[{"classDate":"2024-10-31","rightMoney":"143000","rightFlow":"203010","noDivMoney":"14300","noDivFlow":"10000","lessDivMoney":"1200","lessDivFlow":"30","moreDivMoney":"10000","moreDivFlow":"50","YQMoney":"1431.21","YQFlow":"20","JFMoney":"1568","JFFlow":"23"},
{"classDate":"2024-10-30","rightMoney":"195000","rightFlow":"253010","noDivMoney":"55000","noDivFlow":"25102","lessDivMoney":"15230","lessDivFlow":"2510","moreDivMoney":"5201","moreDivFlow":"500","YQMoney":"1895","YQFlow":"28","JFMoney":"4500","JFFlow":"39"}
]*/
}
}
</script>

70
src/views/dev/detail/everyDayAndLineDataJM.vue
Unescape Escape View File

@ -0,0 +1,70 @@
<!-- 每日数据以及 拆分准确、未拆分、少拆分、多拆分、逾期、拒付折线图-->
<template>
<div class="div_main_jm" style="height: 1200px;position: relative">
<div class="grid_main_jm" style="padding-bottom: 30px;height: 400px;position: inherit">
<everyDayDataJM ref="everyDayDataJM" ></everyDayDataJM>
</div>
<div class="echarts_main_jm" style="height: 1000px;width: 100%;position: inherit">
<echatsTotalLineJM ref="echatsTotalLineJM" ></echatsTotalLineJM>
</div>
</div>
</template>
<style>
body{
width: 100% !important;
height: 100% !important;
}
</style>
<script >
import { ref} from "vue";
import {Search} from '@element-plus/icons-vue'
import everyDayDataJM from "@/views/dev/detail/everyDayDataJM.vue";
import echatsTotalLineJM from "@/views/dev/echarts/echatsTotalLineJM.vue";
var _this;
export default{
data(){
return {
tableData:[],
currentPage: 1,
pageSize: 20,
dataTime:'',
totalCount:500,
dataType:'MF'
}},
props:['beginDate','endDate','updateTable'],
methods:{
handleSizeChange(val) {
this.pageSize = val;
this.isLoding=true;
},
handleCurrentChange(val) {
this.currentPage = val;
this.isLoding=true;
}, 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");
},refreshData(beginDate,endDate){
this.$refs.everyDayDataJM.$nextTick(()=>{
this.$refs.everyDayDataJM.refreshData(beginDate,endDate);
})
this.$refs.echatsTotalLineJM.$nextTick(()=>{
this.$refs.echatsTotalLineJM.refreshData(beginDate,endDate);
})
}
},components:{
everyDayDataJM,
echatsTotalLineJM,
Search
},mounted(){
_this=this;
}
}
</script>

30
src/views/dev/detail/everyDayData.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<!-- 每日数据：拆分准确、未拆分、少拆分、多拆分、逾期、拒付-->
<template>
<div id="contain" style="width:100%;height: 400px;position: inherit">
<div id="contain_jt" style="width:100%;height: 400px;position: inherit">
<div style="max-height: 85%;width: 100%">
<el-table
:data="tableData"
@ -9,16 +9,11 @@
show-summary="true"
style="width: 100%;height: 380px">
<el-table-column prop="CLASSDATE" label="日期" resizable align="center" :formatter="dateFormatter" fixed="left" width="140" />
<el-table-column label="免费应收/拆分" width="300" resizable align="center" v-if="!columnShow" fixed="left">
<el-table-column prop="JTYSMONEY" label="应收(元)" resizable align="center" width="100" />
<el-table-column prop="JTCFMONEY"label="拆分(元)" resizable align="center"width="100" />
<el-table-column prop="JTYSFLOW" label="流量(辆)" resizable align="center" width="100" />
</el-table-column>
<el-table-column label="集团应收/拆分/减免" width="300" resizable align="center" fixed="left" >
<el-table-column prop="JTYSMONEY" label="应收(元)" resizable align="center" width="130" />
<el-table-column prop="JTCFMONEY"label="拆分(元)" resizable align="center"width="130" />
<!-- <el-table-column prop="JTYSFLOW" label="流量(辆)" resizable align="center" width="100" />-->
<el-table-column prop="JTJMMONEY" label="减免(元)" resizable align="center" width="100" />
<el-table-column prop="JTJMMONEY" label="减免(元)" resizable align="center" width="130" />
</el-table-column>
<el-table-column label="逾期" width="200" resizable align="center" fixed="left">
<el-table-column prop="YQMONEY" label="金额(元)" resizable align="center" width="130" />
@ -148,7 +143,7 @@ body{
width: 100% !important;
height: 100% !important;
}
#contain{
#contain_jt{
height: 100% ;
width:100% ;
margin: 0px;
@ -179,7 +174,7 @@ export default{
pageSize: 20,
querybeginDate:'',
totalCount:500,
isLoading:true,
isLoading:false,
isShowSubComDetail:false,
isShowDetailRoad:false,
isShowDetailVehType:false,
@ -191,10 +186,18 @@ export default{
updateDetail:0,
toolTip:true,
columnShow:true,
dataType:"JT",
beginDate:"",
endDate:"",
inject: ['tableVariable','tableUpdateVariable']
}},
props:['dataType','beginDate','endDate'],
methods:{
refreshData(beginDate,endDate){
console.log("刷新集团数据");
this.beginDate=beginDate ;
this.endDate=endDate ;
getTableData(beginDate,endDate,this.dataType);
},
handleSizeChange(val) {
this.pageSize = val;
this.isLoding=true;
@ -252,20 +255,19 @@ export default{
/* this.tableData=[{"classDate":"2024-10-31","rightMoney":"100000","rightFlow":"203010","noDivMoney":"10000","noDivFlow":"10000","lessDivMoney":"1000","lessDivFlow":"30","moreDivMoney":"10000","moreDivFlow":"50","YQMoney":"1001.21","YQFlow":"20","JFMoney":"1568","JFFlow":"23"},
{"classDate":"2024-10-30","rightMoney":"195000","rightFlow":"253010","noDivMoney":"55000","noDivFlow":"25102","lessDivMoney":"15230","lessDivFlow":"2510","moreDivMoney":"5201","moreDivFlow":"500","YQMoney":"1895","YQFlow":"28","JFMoney":"4500","JFFlow":"39"}
]*/
if(this.dataType==='JT'){
/* if(this.dataType==='JT'){
this.columnShow=true;
}else{
this.columnShow=false;
}
this.$nextTick(
getTableData(this.beginDate,this.endDate,this.dataType)
)
)*/
}
}
function getTableData(beginDate,endDate,dataType){
_this.isLoading=true;
var paramsObj={
"beginDate":beginDate,
"endDate":endDate,

320
src/views/dev/detail/everyDayDataJM.vue
Unescape Escape View File

@ -0,0 +1,320 @@
<!-- 每日数据：拆分准确、未拆分、少拆分、多拆分、逾期、拒付-->
<template>
<div id="contain_jm" style="width:100%;height: 400px;position: inherit">
<div style="max-height: 85%;width: 100%">
<el-table
:data="tableData"
v-loading="isLoading"
highlight-current-row=true,
show-summary="true"
style="width: 100%;height: 380px">
<el-table-column prop="CLASSDATE" label="日期" resizable align="center" :formatter="dateFormatter" fixed="left" width="140" />
<el-table-column label="免费应收/拆分" width="300" resizable align="center" fixed="left">
<el-table-column prop="JTYSMONEY" label="应收(元)" resizable align="center" width="130" />
<el-table-column prop="JTCFMONEY"label="拆分(元)" resizable align="center"width="130" />
<el-table-column prop="JTYSFLOW" label="流量(辆)" resizable align="center" width="130" />
</el-table-column>
<el-table-column label="逾期" width="200" resizable align="center" fixed="left">
<el-table-column prop="YQMONEY" label="金额(元)" resizable align="center" width="130" />
<el-table-column prop="YQFLOW" label="流量(辆)" resizable align="center" width="100" />
</el-table-column>
<el-table-column label="拒付" width="200" resizable align="center" fixed="left">
<el-table-column prop="JFMONEY" label="金额(元)" resizable align="center" width="130" />
<el-table-column prop="JFFLOW" label="流量(辆)" resizable align="center" width="100" />
</el-table-column>
<el-table-column label="未拆分" width="200" resizable align="center" fixed="left">
<el-table-column prop="NODIVMONEY" label="金额(元)" resizable align="center" width="130"/>
<el-table-column prop="NODIVFLOW" label="流量(辆)" resizable align="center" width="100" />
</el-table-column>
<el-table-column label="拆分准确" width="200" resizable align="center">
<el-table-column
prop="RIGHTMONEY"
label="金额(元)"
resizable align="center"
width="130">
</el-table-column>
<el-table-column
prop="RIGHTFLOW"
label="流量(辆)"
resizable align="center"
width="100">
</el-table-column>
</el-table-column>
<el-table-column label="未计费" width="200" resizable align="center">
<el-table-column prop="NOFEEMONEY" label="金额(元)" resizable align="center" width="130"/>
<el-table-column prop="NOFEEFLOW" label="流量(辆)" resizable align="center" width="100"/>
</el-table-column>
<el-table-column label="少拆分" width="200" resizable align="center">
<el-table-column
prop="LESSDIVMONEYGPA"
label="计费金额(元)"
resizable align="center"
width="130">
</el-table-column>
<el-table-column
prop="LESSDIVMONEYDIV"
label="拆分金额(元)"
resizable align="center"
width="130">
</el-table-column>
<el-table-column
prop="LESSDIVMONEY"
label="金额(元)"
resizable align="center"
width="130">
</el-table-column>
<el-table-column
prop="LESSDIVFLOW"
label="流量(辆)"
resizable align="center"
width="100">
</el-table-column>
</el-table-column>
<el-table-column label="多拆分" width="200" resizable align="center">
<el-table-column
prop="MOREDIVMONEYGPA"
label="计费金额(元)"
resizable align="center"
width="130">
</el-table-column>
<el-table-column
prop="MOREDIVMONEYDIV"
label="拆分金额(元)"
resizable align="center"
width="130">
</el-table-column>
<el-table-column
prop="MOREDIVMONEY"
label="金额(元)"
resizable align="center"
width="130">
</el-table-column>
<el-table-column
prop="MOREDIVFLOW"
label="流量(辆)"
resizable align="center"
width="100">
</el-table-column>
</el-table-column>
<el-table-column label="操作" width="280" resizable align="center" fixed="right">
<template #default="scope">
<el-button type="primary" round size="small" style="background-color: #1da1f2" @click="getSubTableData(scope.row)">分公司</el-button>
<el-button type="primary" round size="small" style="background-color: #5db479" @click="getRoadTableData(scope.row)">路段</el-button>
<el-button type="primary" round size="small" style="background-color: #5a5b85" @click="getVehTypeTableData(scope.row)">车型</el-button>
<el-button type="primary" round size="small" style="background-color: #c48ed9" @click="getTableData(scope.row)">明细</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- <div style="height: 80px;width: 100%">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[15, 30,50,100]"
:page-size="pageSize"
:total="totalCount"
layout="total, sizes, prev, pager, next, jumper"
style="width: 90%;height:50px;padding: 0;position:relative;margin-top:10px;bottom: 0;font-size: x-small">
</el-pagination>
</div>-->
</div>
<!-- <el-dialog id="detail_dialog" v-model="isShowDivDetail" title="" draggable >
<detailTab ref="detailTab" :key="new Date().getTime()" :beginDate="querybeginDate" :dataType="dataType" ></detailTab>
</el-dialog>-->
<el-dialog id="detail_dialog" v-model="isShowSubComDetail" title="分公司信息" draggable >
<detailDataSubCom ref="detailDataSubCom" :key="updateSubCom" :beginDate="querybeginDate" :dataType="dataType" ></detailDataSubCom>
</el-dialog>
<el-dialog id="detail_dialog" v-model="isShowDetailRoad" title="路段信息" draggable >
<detailDataRoad ref="detailDataRoad" :key="updateRoad" :beginDate="querybeginDate" :dataType="dataType" ></detailDataRoad>
</el-dialog>
<el-dialog id="detail_dialog" v-model="isShowDetailVehType" title="车型信息" draggable >
<detailDataVehType ref="detailDataVehType" :key="updateVehType" :beginDate="querybeginDate" :dataType="dataType" ></detailDataVehType>
</el-dialog>
<el-dialog id="detail_dialog" v-model="isShowDetail" title="明细" draggable >
<stanDataDialog ref="stanDataDialog" :key="updateDetail" :classDate="querybeginDate" :dataType="dataType" :detailType="detailType"></stanDataDialog>
</el-dialog>
</template>
<style>
body{
width: 100% !important;
height: 100% !important;
}
#contain_jm{
height: 100% ;
width:100% ;
margin: 0px;
}
#detail_dialog{
height:90% !important;
width: 90% !important;
margin-top: 2% !important;
margin-left: 5% !important;
}
</style>
<script >
import {Filter,Search} from '@element-plus/icons-vue'
import {getDivPassidAllJTDataList} from "@/util/api/api.js"
import detailTab from "@/views/dev/detail/detailTab.vue";
import detailDataSubCom from '@/views/dev/detail/detailDataSubCom.vue'
import detailDataRoad from '@/views/dev/detail/detailDataRoad.vue'
import detailDataVehType from '@/views/dev/detail/detailDataVehType.vue'
import stanDataDialog from '@/views/dev/detail/stanDataDialog.vue'
var _this;
export default{
data(){
return {
tableData:[],
currentPage: 1,
pageSize: 20,
querybeginDate:'',
totalCount:500,
isLoading:false,
isShowSubComDetail:false,
isShowDetailRoad:false,
isShowDetailVehType:false,
isShowDetail:false,
updateSubCom:0,
updateRoad:0,
updateVehType:0,
detailType:'mainType',
updateDetail:0,
toolTip:true,
dataType:'MF',
beginDate:"",
endDate:"",
inject: ['tableVariable','tableUpdateVariable']
}},
methods:{
refreshData(beginDate,endDate){
console.log("刷新减免数据");
this.beginDate=beginDate ;
this.endDate=endDate ;
getTableData(beginDate,endDate,this.dataType);
},
handleSizeChange(val) {
this.pageSize = val;
this.isLoding=true;
},
handleCurrentChange(val) {
this.currentPage = val;
this.isLoading=true;
}, 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");
},getSubTableData(row){
this.querybeginDate=formatDate(row.CLASSDATE,"YYYY-MM-DD");
this.isShowSubComDetail=true;
this.isShowDetailRoad=false;
this.isShowDetailVehType=false;
this.isShowDetail=false;
this.updateSubCom= this.updateSubCom+1
},getRoadTableData(row){
this.querybeginDate=formatDate(row.CLASSDATE,"YYYY-MM-DD");
this.isShowSubComDetail=false;
this.isShowDetailRoad=true;
this.isShowDetailVehType=false;
this.isShowDetail=false;
this.updateRoad= this.updateRoad+1;
},getVehTypeTableData(row){
this.querybeginDate=formatDate(row.CLASSDATE,"YYYY-MM-DD");
this.isShowSubComDetail=false;
this.isShowDetailRoad=false;
this.isShowDetailVehType=true;
this.isShowDetail=false;
this.updateVehType= this.updateVehType+1;
},getTableData(row){
this.querybeginDate=formatDate(row.CLASSDATE,"YYYY-MM-DD");
this.isShowSubComDetail=false;
this.isShowDetailRoad=false;
this.isShowDetailVehType=false;
this.isShowDetail=true;
this.updateDetail= this.updateDetail+1;
},
},components:{
detailTab,
detailDataSubCom,
detailDataRoad,
detailDataVehType,
stanDataDialog,
Search
},
mounted(){
_this=this;
/* this.tableData=[{"classDate":"2024-10-31","rightMoney":"100000","rightFlow":"203010","noDivMoney":"10000","noDivFlow":"10000","lessDivMoney":"1000","lessDivFlow":"30","moreDivMoney":"10000","moreDivFlow":"50","YQMoney":"1001.21","YQFlow":"20","JFMoney":"1568","JFFlow":"23"},
{"classDate":"2024-10-30","rightMoney":"195000","rightFlow":"253010","noDivMoney":"55000","noDivFlow":"25102","lessDivMoney":"15230","lessDivFlow":"2510","moreDivMoney":"5201","moreDivFlow":"500","YQMoney":"1895","YQFlow":"28","JFMoney":"4500","JFFlow":"39"}
]*/
/* this.$nextTick(
getTableData(this.beginDate,this.endDate,this.dataType)
)*/
}
}
function getTableData(beginDate,endDate,dataType){
_this.isLoading=true;
var paramsObj={
"beginDate":beginDate,
"endDate":endDate,
"dataType":dataType
}
getDivPassidAllJTDataList(paramsObj).then(
res=>{
if (res.code > 0) {
let _data = res.data;
if (_data.length > 0) {
_this.tableData = _data;
// const updateVariable = inject('tableUpdateVariable');
//_this.$updateGlobalVar(_data);
//const { globalVar, setGlobalVar } = toRefs(globalSymbol);
//updateVariable(_data);
// console.log("全局变量======="+ _this.$globalState.globalVar)
// console.log( _this.$globalState.globalVar)
}
}
_this.isLoading=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>

35
src/views/dev/detail/hbData.vue
Unescape Escape View File

@ -206,31 +206,31 @@ export default{
colspan: _col
};
}
},
},refreshDataHb(startDate,endDate,startDateHB,endDateHB){
return getTableDatas(startDate,endDate,startDateHB,endDateHB);
}
},components:{
Search
},
mounted(){
_this=this;
let _startDate=_this.$props.startDate;
/* let _startDate=_this.$props.startDate;
let _endDate=_this.$props.endDate;
if(this.queryStartTime !==_startDate || this.queryEndTime !==_endDate){
this.queryStartTime=_startDate
this.queryEndTime=_endDate
getTableDatas();
}
}*/
}
}
function getTableDatas(){
let _startDate=_this.$props.startDate;
let _endDate=_this.$props.endDate;
let _startDateHB=_this.$props.startDateHB;
let _endDateHB=_this.$props.endDateHB;
var getTableDatas=function(startDate,endDate,startDateHB,endDateHB){
var ret=0;
var paramsData={
"startDate": _startDate,
"endDate":_endDate,
"startDateHB":_startDateHB,
"endDateHB": _endDateHB
"startDate": startDate,
"endDate":endDate,
"startDateHB":startDateHB,
"endDateHB": endDateHB
}
_this.tableloading=true;
getHbData(paramsData).then(res=>{
@ -242,17 +242,8 @@ function getTableDatas(){
_this.tableData=res.data
_this.tableloading=false;
}
return ret=1;
})
/* _this.tableData=[
{"GONGSI":"阿拉善分公司","HBBEFORE":"100","HBAFTER":"150","HBDECODE":"-50","HBRATE":"33","ROADNAME":"G7京新高速","ROADBEFORE":"50","ROADAFTER":"70",
"ROADDECODE":"-20","DATEAVG":"6.78","HBDECODE1":"-10","DATEAVG1":"3.33","HBDECODE2":"-10","DATEAVG2":"3.33"},
{"GONGSI":"包头分公司","HBBEFORE":"100","HBAFTER":"150","HBDECODE":"-50","HBRATE":"33","ROADNAME":"G7京新高速","ROADBEFORE":"50","ROADAFTER":"70",
"ROADDECODE":"-20","DATEAVG":"6.78","HBDECODE1":"-10","DATEAVG1":"3.33","HBDECODE2":"-10","DATEAVG2":"3.33"},
{"GONGSI":"呼和浩特分公司","HBBEFORE":"100","HBAFTER":"150","HBDECODE":"-50","HBRATE":"33","ROADNAME":"G7京新高速","ROADBEFORE":"50","ROADAFTER":"70",
"ROADDECODE":"-20","DATEAVG":"6.78","HBDECODE1":"-10","DATEAVG1":"3.33","HBDECODE2":"-10","DATEAVG2":"3.33"},
{"GONGSI":"总计","HBBEFORE":"300","HBAFTER":"450","HBDECODE":"-150","HBRATE":"/","ROADNAME":"","ROADBEFORE":"","ROADAFTER":"",
"ROADDECODE":"","DATEAVG":"","HBDECODE1":"","DATEAVG1":"","HBDECODE2":"","DATEAVG2":""}
]*/
}
</script>

234
src/views/dev/echarts/YSLine.vue
Unescape Escape View File

@ -1,234 +0,0 @@
<template>
<div style="display: block;width:100%;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: 100%;height:220px" v-loading="loading" ></div>
</div>
</template>
<script>
import { inject, toRefs,ref } from 'vue';
import tool from '@/util/tool';
import {getDivPassidAllJTDataList} from "@/util/api/api";
//import {getGantryPassDivStatList} from '../../../util/api/api.js'
var _this;
export default {
name: "YSLine",
data() {
return {
loading:ref(true),
money:this.$globalState.globalVar
//dateTime:'2024-07-22'
}
},
props: ['dataType','beginDate','endDate'],
methods: {
initOption(dataX,dataMoney,dataFlow) {
let myChart = this.$echarts.init(document.getElementById('YSLine'))
// 绘制图表
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']},
/* restore : {show: true},
saveAsImage : {show: true}*/
}
},
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:10,
position:'right'
}
],
series : [
{
name:'流量(辆)',
type:'line',
data:dataFlow,
label:{
show: false, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
},
yAxisIndex:0
},{
name:'金额(元)',
type:'line',
data:dataMoney,
label:{
show: false, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
},
yAxisIndex:1
}
]
};
myChart.setOption(this.option);
/*myChart.on('click', function(params) {
// 控制台打印数据的名称
_this.$emit("changeGantryCount",params.name);
});*/
}
},mounted() {
_this=this;
//const { globalSymbol } = inject('tableVariable');
//const { globalVar, setGlobalVar } = toRefs("tableVariable");
var paramsObj={
"beginDate":this.beginDate,
"endDate":this.endDate,
"dataType":this.dataType
}
getDivPassidAllJTDataList(paramsObj).then(
res=>{
if (res.code > 0) {
let _data = res.data;
if (_data.length > 0) {
let dataX=[];
var data = [];
var dataFlow = [];
if(_data !==undefined ){
for(var k=0;k<_data.length;k++){
dataX.push(tool.formatDate(new Date(_data[k].CLASSDATE),"YYYY-MM-DD"));
data.push(_data[k].JTYSMONEY);
dataFlow.push(_data[k].JTYSFLOW);
}
}
this.initOption(dataX,data,dataFlow);
}
}
_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>

170
src/views/dev/echarts/detailEcharts/divRightLineDetail.vue
Unescape Escape View File

@ -1,170 +0,0 @@
<template>
<div style="display: block;width:100%;height: 100%">
<div style="border-bottom: #d5d8d9 solid 2px;height: 15%;width:90%;position: relative"><b style="font-size: 15px;">拆分准确金额(元)</b></div>
<div id="divRightLineDetail" style="width: 100%;height: 85%" v-loading="loading" ></div>
</div>
</template>
<script>
import {ref} from "vue";
//import {getGantryPassDivStatList} from '../../../util/api/api.js'
var _this;
export default {
name: "divRightLineDetail",
data() {
return {
loading:ref(false),
//dateTime:'2024-07-22'
}
},
props: ['dataTime','dataType'],
methods: {
initOption(dataX,dataFlow) {
let myChart = this.$echarts.init(document.getElementById('divRightLineDetail'))
// 绘制图表
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']},
/* restore : {show: true},
saveAsImage : {show: true}*/
}
},
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:true,
splitLine:{
show:true
},
lineStyle:{
color:'black',
type:'solid',
width:2
},
// sync: true,
//splitNumber:10,
//position:'left'
},
series : [
{
name:'金额(元)',
type:'line',
data:dataFlow,
label:{
show: true, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
}
}
]
};
myChart.setOption(this.option);
/*myChart.on('click', function(params) {
// 控制台打印数据的名称
_this.$emit("changeGantryCount",params.name);
});*/
}
},mounted() {
_this=this;
var dataParam={
"dataTime": (this.$props.dataTime=="" || this.$props.dataTime==undefined)? '2024-07-22':this.$props.dataTime
}
//this.loading=true;
let dataX=[];
var data = [];
for(var k=10;k<17;k++){
dataX.push(k);
data.push(k+6);
}
this.initOption(dataX,data);
/*getGantryPassDivStatList(dataParam).then(
res => {
this.loading=false;
if(res.code >0){
let dataX=[];
var data = [];
let _data=res.data;
if (_data.length > 0) {
for(var k=0;k<_data.length;k++){
dataX.push(_data[k].GANTRYCOUNT);
data.push(_data[k].CARCOUNT);
}
}
this.initOption(dataX,data);
}
})*/
console.log("加载了拆分准确222")
}
}
</script>
<style>
</style>

170
src/views/dev/echarts/detailEcharts/jfLineDetail.vue
Unescape Escape View File

@ -1,170 +0,0 @@
<template>
<div style="display: block;width:100%;height: 100%">
<div style="border-bottom: #d5d8d9 solid 2px;height: 15%;width:90%;position: relative"><b style="font-size: 15px;">拒付金额(元)</b></div>
<div id="jfLineDetail" style="width: 100%;height: 85%" v-loading="loading" ></div>
</div>
</template>
<script>
import {ref} from "vue";
//import {getGantryPassDivStatList} from '../../../util/api/api.js'
var _this;
export default {
name: "jfLineDetail",
data() {
return {
loading:ref(false),
//dateTime:'2024-07-22'
}
},
props: ['dataTime'],
methods: {
initOption(dataX,dataFlow) {
let myChart = this.$echarts.init(document.getElementById('jfLineDetail'))
// 绘制图表
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']},
/* restore : {show: true},
saveAsImage : {show: true}*/
}
},
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:true,
splitLine:{
show:true
},
lineStyle:{
color:'black',
type:'solid',
width:2
},
// sync: true,
//splitNumber:10,
//position:'left'
},
series : [
{
name:'金额(元)',
type:'line',
data:dataFlow,
label:{
show: true, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
}
}
]
};
myChart.setOption(this.option);
/*myChart.on('click', function(params) {
// 控制台打印数据的名称
_this.$emit("changeGantryCount",params.name);
});*/
}
},mounted() {
_this=this;
var dataParam={
"dataTime": (this.$props.dataTime=="" || this.$props.dataTime==undefined)? '2024-07-22':this.$props.dataTime
}
//this.loading=true;
let dataX=[];
var data = [];
for(var k=10;k<17;k++){
dataX.push(k);
data.push(k+6);
}
this.initOption(dataX,data);
/*getGantryPassDivStatList(dataParam).then(
res => {
this.loading=false;
if(res.code >0){
let dataX=[];
var data = [];
let _data=res.data;
if (_data.length > 0) {
for(var k=0;k<_data.length;k++){
dataX.push(_data[k].GANTRYCOUNT);
data.push(_data[k].CARCOUNT);
}
}
this.initOption(dataX,data);
}
})*/
}
}
</script>
<style>
</style>

170
src/views/dev/echarts/detailEcharts/lessDivLineDetail.vue
Unescape Escape View File

@ -1,170 +0,0 @@
noDivLine.vue<template>
<div style="display: block;width:100%;height: 100%">
<div style="border-bottom: #d5d8d9 solid 2px;height: 15%;width:90%;position: relative"><b style="font-size: 15px;">少拆分金额(元)</b></div>
<div id="lessDivLineDetail" style="width: 100%;height: 85%" v-loading="loading" ></div>
</div>
</template>
<script>
import {ref} from "vue";
//import {getGantryPassDivStatList} from '../../../util/api/api.js'
var _this;
export default {
name: "lessDivLineDetail",
data() {
return {
loading:ref(false),
//dateTime:'2024-07-22'
}
},
props: ['dataTime'],
methods: {
initOption(dataX,dataFlow) {
let myChart = this.$echarts.init(document.getElementById('lessDivLineDetail'))
// 绘制图表
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']},
/* restore : {show: true},
saveAsImage : {show: true}*/
}
},
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:true,
splitLine:{
show:true
},
lineStyle:{
color:'black',
type:'solid',
width:2
},
// sync: true,
//splitNumber:10,
//position:'left'
},
series : [
{
name:'金额(元)',
type:'line',
data:dataFlow,
label:{
show: true, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
}
}
]
};
myChart.setOption(this.option);
/*myChart.on('click', function(params) {
// 控制台打印数据的名称
_this.$emit("changeGantryCount",params.name);
});*/
}
},mounted() {
_this=this;
var dataParam={
"dataTime": (this.$props.dataTime=="" || this.$props.dataTime==undefined)? '2024-07-22':this.$props.dataTime
}
//this.loading=true;
let dataX=[];
var data = [];
for(var k=10;k<17;k++){
dataX.push(k);
data.push(k+6);
}
this.initOption(dataX,data);
/*getGantryPassDivStatList(dataParam).then(
res => {
this.loading=false;
if(res.code >0){
let dataX=[];
var data = [];
let _data=res.data;
if (_data.length > 0) {
for(var k=0;k<_data.length;k++){
dataX.push(_data[k].GANTRYCOUNT);
data.push(_data[k].CARCOUNT);
}
}
this.initOption(dataX,data);
}
})*/
}
}
</script>
<style>
</style>

170
src/views/dev/echarts/detailEcharts/moreDivLineDetail.vue
Unescape Escape View File

@ -1,170 +0,0 @@
noDivLine.vue<template>
<div style="display: block;width:100%;height: 100%">
<div style="border-bottom: #d5d8d9 solid 2px;height: 15%;width:90%;position: relative"><b style="font-size: 15px;">多拆分金额(元)</b></div>
<div id="moreDivLineDetail" style="width: 100%;height: 85%" v-loading="loading" ></div>
</div>
</template>
<script>
import {ref} from "vue";
//import {getGantryPassDivStatList} from '../../../util/api/api.js'
var _this;
export default {
name: "moreDivLineDetail",
data() {
return {
loading:ref(false),
//dateTime:'2024-07-22'
}
},
props: ['dataTime'],
methods: {
initOption(dataX,dataFlow) {
let myChart = this.$echarts.init(document.getElementById('moreDivLineDetail'))
// 绘制图表
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']},
/* restore : {show: true},
saveAsImage : {show: true}*/
}
},
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:true,
splitLine:{
show:true
},
lineStyle:{
color:'black',
type:'solid',
width:2
},
// sync: true,
//splitNumber:10,
//position:'left'
},
series : [
{
name:'金额(元)',
type:'line',
data:dataFlow,
label:{
show: true, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
}
}
]
};
myChart.setOption(this.option);
/*myChart.on('click', function(params) {
// 控制台打印数据的名称
_this.$emit("changeGantryCount",params.name);
});*/
}
},mounted() {
_this=this;
var dataParam={
"dataTime": (this.$props.dataTime=="" || this.$props.dataTime==undefined)? '2024-07-22':this.$props.dataTime
}
//this.loading=true;
let dataX=[];
var data = [];
for(var k=10;k<17;k++){
dataX.push(k);
data.push(k+6);
}
this.initOption(dataX,data);
/*getGantryPassDivStatList(dataParam).then(
res => {
this.loading=false;
if(res.code >0){
let dataX=[];
var data = [];
let _data=res.data;
if (_data.length > 0) {
for(var k=0;k<_data.length;k++){
dataX.push(_data[k].GANTRYCOUNT);
data.push(_data[k].CARCOUNT);
}
}
this.initOption(dataX,data);
}
})*/
}
}
</script>
<style>
</style>

170
src/views/dev/echarts/detailEcharts/noDivLineDetail.vue
Unescape Escape View File

@ -1,170 +0,0 @@
<template>
<div style="display: block;width:100%;height: 100%">
<div style="border-bottom: #d5d8d9 solid 2px;height: 15%;width:90%;position: relative"><b style="font-size: 15px;">未拆分金额(元)</b></div>
<div id="noDivLineDetail" style="width: 100%;height: 85%" v-loading="loading" ></div>
</div>
</template>
<script>
import {ref} from "vue";
//import {getGantryPassDivStatList} from '../../../util/api/api.js'
var _this;
export default {
name: "noDivLineDetail",
data() {
return {
loading:ref(false),
//dateTime:'2024-07-22'
}
},
props: ['dataTime'],
methods: {
initOption(dataX,dataFlow) {
let myChart = this.$echarts.init(document.getElementById('noDivLineDetail'))
// 绘制图表
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']},
/* restore : {show: true},
saveAsImage : {show: true}*/
}
},
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:true,
splitLine:{
show:true
},
lineStyle:{
color:'black',
type:'solid',
width:2
},
// sync: true,
//splitNumber:10,
//position:'left'
},
series : [
{
name:'金额(元)',
type:'line',
data:dataFlow,
label:{
show: true, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
}
}
]
};
myChart.setOption(this.option);
/*myChart.on('click', function(params) {
// 控制台打印数据的名称
_this.$emit("changeGantryCount",params.name);
});*/
}
},mounted() {
_this=this;
var dataParam={
"dataTime": (this.$props.dataTime=="" || this.$props.dataTime==undefined)? '2024-07-22':this.$props.dataTime
}
//this.loading=true;
let dataX=[];
var data = [];
for(var k=10;k<17;k++){
dataX.push(k);
data.push(k+6);
}
this.initOption(dataX,data);
/*getGantryPassDivStatList(dataParam).then(
res => {
this.loading=false;
if(res.code >0){
let dataX=[];
var data = [];
let _data=res.data;
if (_data.length > 0) {
for(var k=0;k<_data.length;k++){
dataX.push(_data[k].GANTRYCOUNT);
data.push(_data[k].CARCOUNT);
}
}
this.initOption(dataX,data);
}
})*/
}
}
</script>
<style>
</style>

170
src/views/dev/echarts/detailEcharts/yqLineDetail.vue
Unescape Escape View File

@ -1,170 +0,0 @@
<template>
<div style="display: block;width:100%;height: 100%">
<div style="border-bottom: #d5d8d9 solid 2px;height: 15%;width:90%;position: relative"><b style="font-size: 15px;">逾期金额(元)</b></div>
<div id="yqLineDetail" style="width: 100%;height: 85%" v-loading="loading" ></div>
</div>
</template>
<script>
import {ref} from "vue";
//import {getGantryPassDivStatList} from '../../../util/api/api.js'
var _this;
export default {
name: "yqLineDetail",
data() {
return {
loading:ref(false),
//dateTime:'2024-07-22'
}
},
props: ['dataTime'],
methods: {
initOption(dataX,dataFlow) {
let myChart = this.$echarts.init(document.getElementById('yqLineDetail'))
// 绘制图表
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']},
/* restore : {show: true},
saveAsImage : {show: true}*/
}
},
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:true,
splitLine:{
show:true
},
lineStyle:{
color:'black',
type:'solid',
width:2
},
// sync: true,
//splitNumber:10,
//position:'left'
},
series : [
{
name:'金额(元)',
type:'line',
data:dataFlow,
label:{
show: true, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
}
}
]
};
myChart.setOption(this.option);
/*myChart.on('click', function(params) {
// 控制台打印数据的名称
_this.$emit("changeGantryCount",params.name);
});*/
}
},mounted() {
_this=this;
var dataParam={
"dataTime": (this.$props.dataTime=="" || this.$props.dataTime==undefined)? '2024-07-22':this.$props.dataTime
}
//this.loading=true;
let dataX=[];
var data = [];
for(var k=10;k<17;k++){
dataX.push(k);
data.push(k+6);
}
this.initOption(dataX,data);
/*getGantryPassDivStatList(dataParam).then(
res => {
this.loading=false;
if(res.code >0){
let dataX=[];
var data = [];
let _data=res.data;
if (_data.length > 0) {
for(var k=0;k<_data.length;k++){
dataX.push(_data[k].GANTRYCOUNT);
data.push(_data[k].CARCOUNT);
}
}
this.initOption(dataX,data);
}
})*/
}
}
</script>
<style>
</style>

235
src/views/dev/echarts/divRightLine.vue
Unescape Escape View File

@ -1,235 +0,0 @@
<template>
<div style="display: block;width:100%;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: 100%;height:220px" v-loading="loading" ></div>
</div>
</template>
<script>
import { inject, toRefs,ref } from 'vue';
import tool from '@/util/tool';
import {getDivPassidAllJTDataList} from "@/util/api/api";
//import {getGantryPassDivStatList} from '../../../util/api/api.js'
var _this;
export default {
name: "divRightLine",
data() {
return {
loading:ref(true),
money:this.$globalState.globalVar
//dateTime:'2024-07-22'
}
},
props: ['dataType','beginDate','endDate'],
methods: {
initOption(dataX,dataMoney,dataFlow) {
let myChart = this.$echarts.init(document.getElementById('divRightLine'))
// 绘制图表
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']},
/* restore : {show: true},
saveAsImage : {show: true}*/
}
},
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);
});*/
}
},mounted() {
_this=this;
//const { globalSymbol } = inject('tableVariable');
//const { globalVar, setGlobalVar } = toRefs("tableVariable");
var paramsObj={
"beginDate":this.beginDate,
"endDate":this.endDate,
"dataType":this.dataType
}
getDivPassidAllJTDataList(paramsObj).then(
res=>{
if (res.code > 0) {
let _data = res.data;
if (_data.length > 0) {
let dataX=[];
var data = [];
var dataFlow = [];
if(_data !==undefined ){
for(var k=0;k<_data.length;k++){
dataX.push(tool.formatDate(new Date(_data[k].CLASSDATE),"YYYY-MM-DD"));
console.log("拆分准确金额===="+tool.NumRound(_data[k].RIGHTMONEY /10000));
data.push(tool.NumRound(_data[k].RIGHTMONEY /10000));
dataFlow.push(_data[k].RIGHTFLOW);
}
}
this.initOption(dataX,data,dataFlow);
}
}
_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>

137
src/views/dev/echarts/echatsTotalLine.vue
Unescape Escape View File

@ -1,45 +1,45 @@
<template>
<div style="display: flex;width:100%;height: 250px">
<div style="display: block;width:100%;height: 250px">
<div style="display: flex;width:1880px;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: 100%;height:220px" v-loading="loading" ></div>
<div id="YSLine" style="width: 940px;height:220px" v-loading="loading" ></div>
</div>
<div style="display: block;width:100%;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="divRightLine" style="width: 100%;height:220px" v-loading="loading" ></div>
<div id="divRightLine" style="width: 940px;height:220px" v-loading="loading" ></div>
</div>
</div>
<div style="display: flex;width:100%;height: 250px">
<div style="display: block;width:100%;height: 250px">
<div style="display: flex;width:1880px;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: 100%;height:220px" v-loading="loading" ></div>
<div id="noDivLine" style="width: 940px;height:220px" v-loading="loading" ></div>
</div>
<div style="display: block;width:100%;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="noFeeLine" style="width: 100%;height:220px" v-loading="loading" ></div>
<div id="noFeeLine" style="width: 940px;height:220px" v-loading="loading" ></div>
</div>
</div>
<div style="display: flex;width:100%;height: 250px">
<div style="display: block;width:100%;height: 250px">
<div style="display: flex;width:1880px;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: 100%;height:220px" v-loading="loading" ></div>
<div id="lessDivLine" style="width: 940px;height:220px" v-loading="loading" ></div>
</div>
<div style="display: block;width:100%;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="moreDivLine" style="width: 100%;height:220px" v-loading="loading" ></div>
<div id="moreDivLine" style="width: 940px;height:220px" v-loading="loading" ></div>
</div>
</div>
<div style="display: flex;width:100%;height: 250px">
<div style="display: block;width:100%;height: 250px">
<div style="display: flex;width:1880px;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="yqLine" style="width: 100%;height:220px" v-loading="loading" ></div>
<div id="yqLine" style="width: 940px;height:220px" v-loading="loading" ></div>
</div>
<div style="display: block;width:100%;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="jfLine" style="width: 100%;height:220px" v-loading="loading" ></div>
<div id="jfLine" style="width: 940px;height:220px" v-loading="loading" ></div>
</div>
</div>
</template>
@ -55,14 +55,100 @@ export default {
name: "echatsTotalLine",
data() {
return {
loading:ref(true),
loading:ref(false),
beginDate:"",
endDate:"",
dataType:"JT",
money:this.$globalState.globalVar
//dateTime:'2024-07-22'
}
},
props: ['dataType','beginDate','endDate'],
methods: {
initOptionLine(divId,dataX,dataMoney,dataFlow) {
refreshData(beginDate,endDate){
console.log("刷新集团数据折线图");
this.loading=true;
this.beginDate= beginDate;
this.endDate= endDate;
var paramsObj={
"beginDate":beginDate,
"endDate":endDate,
"dataType":"JT"
}
getDivPassidAllJTDataList(paramsObj).then(
res=>{
this.loading=false;
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.$nextTick(() => {
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;
}
}
)
},initOptionLine(divId,dataX,dataMoney,dataFlow) {
let myChart = this.$echarts.init(document.getElementById(divId))
// 绘制图表
this.option = {
@ -203,8 +289,7 @@ export default {
}
},mounted() {
_this=this;
//const { globalSymbol } = inject('tableVariable');
//const { globalVar, setGlobalVar } = toRefs("tableVariable");
/*
var paramsObj={
"beginDate":this.beginDate,
@ -281,7 +366,7 @@ export default {
_this.loading=false;
}
}
)
)*/
}
}
/*function formatDate(dateString,format) {

300
src/views/dev/echarts/echatsTotalLineJM.vue
Unescape Escape View File

@ -0,0 +1,300 @@
<template>
<div style="display: flex;width:1880px;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="YSLineJM" style="width: 940px;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="divRightLineJM" style="width: 940px;height:220px" v-loading="loading" ></div>
</div>
</div>
<div style="display: flex;width:1880px;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="noDivLineJM" style="width: 940px;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="noFeeLineJM" style="width: 940px;height:220px" v-loading="loading" ></div>
</div>
</div>
<div style="display: flex;width:1880px;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="lessDivLineJM" style="width: 940px;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="moreDivLineJM" style="width: 940px;height:220px" v-loading="loading" ></div>
</div>
</div>
<div style="display: flex;width:1880px;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="yqLineJM" style="width: 940px;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="jfLineJM" style="width: 940px;height:220px" v-loading="loading" ></div>
</div>
</div>
</template>
<script>
import { inject, toRefs,ref } from 'vue';
import tool from '@/util/tool';
import {getDivPassidAllJTDataList} from "@/util/api/api";
//import {getGantryPassDivStatList} from '../../../util/api/api.js'
var _this;
export default {
name: "echatsTotalLine",
data() {
return {
loading:ref(false),
dataType:'MF',
beginDate:"",
endDate:"",
money:this.$globalState.globalVar
//dateTime:'2024-07-22'
}
},
props: ['beginDate','endDate'],
methods: {
refreshData(beginDate,endDate){
console.log("刷新减免数据折线图");
this.beginDate= beginDate;
this.endDate= endDate;
this.loading=true;
var paramsObj={
"beginDate":beginDate,
"endDate":endDate,
"dataType":"MF"
}
getDivPassidAllJTDataList(paramsObj).then(
res=>{
this.loading=false;
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.$nextTick(() => {
this.initOptionLine('YSLineJM',dataX,dataYS,dataYSFlow);
this.initOptionLine('divRightLineJM',dataX,dataRight,dataRightFlow);
this.initOptionLine('noDivLineJM',dataX,dataNoDiv,dataNoDivFlow);
this.initOptionLine('noFeeLineJM',dataX,dataNoFee,dataNoFeeFlow);
this.initOptionLine('lessDivLineJM',dataX,dataLessDiv,dataLessDivFlow);
this.initOptionLine('moreDivLineJM',dataX,dataMoreDiv,dataMoreDivFlow);
this.initOptionLine('yqLineJM',dataX,dataYQ,dataYQFlow);
this.initOptionLine('jfLineJM',dataX,dataJF,dataJFFlow);
})
}
}
}
)
},
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);
});*/
}
},mounted() {
_this=this;
}
}
</script>
<style>
</style>

201
src/views/dev/echarts/jfLine.vue
Unescape Escape View File

@ -1,201 +0,0 @@
<template>
<div style="display: block;width:100%;height: 250px">
<div style="border-bottom: #d5d8d9 solid 2px;height: 30px;width:90%;position: relative"><b style="font-size: 15px;">拒付</b></div>
<div id="jfLine" style="width: 100%;height: 220px" v-loading="isloading" ></div>
</div>
</template>
<script>
import {ref} from "vue";
import {getDivPassidAllJTDataList} from "@/util/api/api";
import tool from "@/util/tool";
//import {getGantryPassDivStatList} from '../../../util/api/api.js'
var _this;
export default {
name: "jfLine",
data() {
return {
isloading:ref(true),
//dateTime:'2024-07-22'
}
},
props: ['dataType','beginDate','endDate'],
methods: {
initOption(dataX,dataMoney,dataFlow) {
let myChart = this.$echarts.init(document.getElementById('jfLine'))
// 绘制图表
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']},
/* restore : {show: true},
saveAsImage : {show: true}*/
}
},
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:10,
position:'right'
}
],
series : [
{
name:'流量(辆)',
type:'line',
data:dataFlow,
label:{
show: false, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
},
yAxisIndex:0
},{
name:'金额(元)',
type:'line',
data:dataMoney,
label:{
show: false, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
},
yAxisIndex:1
}
]
};
myChart.setOption(this.option);
/*myChart.on('click', function(params) {
// 控制台打印数据的名称
_this.$emit("changeGantryCount",params.name);
});*/
}
},mounted() {
_this=this;
var paramsObj={
"beginDate":this.beginDate,
"endDate":this.endDate,
"dataType":this.dataType
}
getDivPassidAllJTDataList(paramsObj).then(
res=>{
if (res.code > 0) {
let _data = res.data;
if (_data.length > 0) {
let dataX=[];
var data = [];
var dataFlow = [];
if(_data !==undefined ){
for(var k=0;k<_data.length;k++){
dataX.push(tool.formatDate(new Date(_data[k].CLASSDATE),"YYYY-MM-DD"));
data.push(_data[k].JFMONEY);
dataFlow.push(_data[k].JFFLOW);
}
}
this.initOption(dataX,data,dataFlow);
}
}
_this.isloading=false;
}
)
}
}
</script>
<style>
</style>

202
src/views/dev/echarts/lessDivLine.vue
Unescape Escape View File

@ -1,202 +0,0 @@
noDivLine.vue<template>
<div style="display: block;width:100%;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: 100%;height: 220px" v-loading="isloading" ></div>
</div>
</template>
<script>
import {ref} from "vue";
import {getDivPassidAllJTDataList} from "@/util/api/api";
import tool from "@/util/tool";
//import {getGantryPassDivStatList} from '../../../util/api/api.js'
var _this;
export default {
name: "lessDivLine",
data() {
return {
isloading:ref(true),
//dateTime:'2024-07-22'
}
},
props: ['dataType','beginDate','endDate'],
methods: {
initOption(dataX,dataMoney,dataFlow) {
let myChart = this.$echarts.init(document.getElementById('lessDivLine'))
// 绘制图表
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']},
/* restore : {show: true},
saveAsImage : {show: true}*/
}
},
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:10,
position:'right'
}
],
series : [
{
name:'流量(辆)',
type:'line',
data:dataFlow,
label:{
show: false, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
},
yAxisIndex:0
},{
name:'金额(元)',
type:'line',
data:dataMoney,
label:{
show: false, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
},
yAxisIndex:1
}
]
};
myChart.setOption(this.option);
/*myChart.on('click', function(params) {
// 控制台打印数据的名称
_this.$emit("changeGantryCount",params.name);
});*/
}
},mounted() {
_this=this;
var paramsObj={
"beginDate":this.beginDate,
"endDate":this.endDate,
"dataType":this.dataType
}
getDivPassidAllJTDataList(paramsObj).then(
res=>{
if (res.code > 0) {
let _data = res.data;
if (_data.length > 0) {
let dataX=[];
var data = [];
var dataFlow = [];
if(_data !==undefined ){
for(var k=0;k<_data.length;k++){
dataX.push(tool.formatDate(new Date(_data[k].CLASSDATE),"YYYY-MM-DD"));
data.push(_data[k].LESSDIVMONEY);
dataFlow.push(_data[k].LESSDIVFLOW);
}
}
this.initOption(dataX,data,dataFlow);
}
}
_this.isloading=false;
}
)
}
}
</script>
<style>
</style>

201
src/views/dev/echarts/moreDivLine.vue
Unescape Escape View File

@ -1,201 +0,0 @@
noDivLine.vue<template>
<div style="display: block;width:100%;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: 100%;height: 220px" v-loading="isloading" ></div>
</div>
</template>
<script>
import {ref} from "vue";
import {getDivPassidAllJTDataList} from "@/util/api/api";
import tool from "@/util/tool";
//import {getGantryPassDivStatList} from '../../../util/api/api.js'
var _this;
export default {
name: "moreDivLine",
data() {
return {
isloading:ref(true),
//dateTime:'2024-07-22'
}
},
props: ['dataType','beginDate','endDate'],
methods: {
initOption(dataX,dataMoney,dataFlow) {
let myChart = this.$echarts.init(document.getElementById('moreDivLine'))
// 绘制图表
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']},
/* restore : {show: true},
saveAsImage : {show: true}*/
}
},
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:10,
position:'right'
}
],
series : [
{
name:'流量(辆)',
type:'line',
data:dataFlow,
label:{
show: false, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
},
yAxisIndex:0
},{
name:'金额(元)',
type:'line',
data:dataMoney,
label:{
show: false, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
},
yAxisIndex:1
}
]
};
myChart.setOption(this.option);
/*myChart.on('click', function(params) {
// 控制台打印数据的名称
_this.$emit("changeGantryCount",params.name);
});*/
}
},mounted() {
_this=this;
var paramsObj={
"beginDate":this.beginDate,
"endDate":this.endDate,
"dataType":this.dataType
}
getDivPassidAllJTDataList(paramsObj).then(
res=>{
if (res.code > 0) {
let _data = res.data;
if (_data.length > 0) {
let dataX=[];
var data = [];
var dataFlow = [];
if(_data !==undefined ){
for(var k=0;k<_data.length;k++){
dataX.push(tool.formatDate(new Date(_data[k].CLASSDATE),"YYYY-MM-DD"));
data.push(_data[k].MOREDIVMONEY);
dataFlow.push(_data[k].MOREDIVFLOW);
}
}
this.initOption(dataX,data,dataFlow);
}
}
_this.isloading=false;
}
)
}
}
</script>
<style>
</style>

199
src/views/dev/echarts/noDivLine.vue
Unescape Escape View File

@ -1,199 +0,0 @@
<template>
<div style="display: block;width:100%;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: 100%;height: 220px" v-loading="isloading" ></div>
</div>
</template>
<script>
import {ref} from "vue";
import {getDivPassidAllJTDataList} from "@/util/api/api";
import tool from "@/util/tool";
var _this;
export default {
name: "noDivLine",
data() {
return {
isloading:ref(true),
//dateTime:'2024-07-22'
}
},
props: ['dataType','beginDate','endDate'],
methods: {
initOption(dataX,dataMoney,dataFlow) {
let myChart = this.$echarts.init(document.getElementById('noDivLine'))
// 绘制图表
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']},
/* restore : {show: true},
saveAsImage : {show: true}*/
}
},
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:10,
position:'right'
}
],
series : [
{
name:'流量(辆)',
type:'line',
data:dataFlow,
label:{
show: false, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
},
yAxisIndex:0
},{
name:'金额(元)',
type:'line',
data:dataMoney,
label:{
show: false, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
},
yAxisIndex:1
}
]
};
myChart.setOption(this.option);
/*myChart.on('click', function(params) {
// 控制台打印数据的名称
_this.$emit("changeGantryCount",params.name);
});*/
}
},mounted() {
_this=this;
var paramsObj={
"beginDate":this.beginDate,
"endDate":this.endDate,
"dataType":this.dataType
}
getDivPassidAllJTDataList(paramsObj).then(
res=>{
if (res.code > 0) {
let _data = res.data;
if (_data.length > 0) {
let dataX=[];
var data = [];
var dataFlow = [];
if(_data !==undefined ){
for(var k=0;k<_data.length;k++){
dataX.push(tool.formatDate(new Date(_data[k].CLASSDATE),"YYYY-MM-DD"));
data.push(_data[k].NODIVMONEY);
dataFlow.push(_data[k].NODIVFLOW);
}
}
this.initOption(dataX,data,dataFlow);
}
}
_this.isloading=false;
}
)
}
}
</script>
<style>
</style>

234
src/views/dev/echarts/noFeeLine.vue
Unescape Escape View File

@ -1,234 +0,0 @@
<template>
<div style="display: block;width:100%;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: 100%;height:220px" v-loading="loading" ></div>
</div>
</template>
<script>
import { inject, toRefs,ref } from 'vue';
import tool from '@/util/tool';
import {getDivPassidAllJTDataList} from "@/util/api/api";
//import {getGantryPassDivStatList} from '../../../util/api/api.js'
var _this;
export default {
name: "noFeeLine",
data() {
return {
loading:ref(true),
money:this.$globalState.globalVar
//dateTime:'2024-07-22'
}
},
props: ['dataType','beginDate','endDate'],
methods: {
initOption(dataX,dataMoney,dataFlow) {
let myChart = this.$echarts.init(document.getElementById('noFeeLine'))
// 绘制图表
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']},
/* restore : {show: true},
saveAsImage : {show: true}*/
}
},
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:10,
position:'right'
}
],
series : [
{
name:'流量(辆)',
type:'line',
data:dataFlow,
label:{
show: false, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
},
yAxisIndex:0
},{
name:'金额(元)',
type:'line',
data:dataMoney,
label:{
show: false, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
},
yAxisIndex:1
}
]
};
myChart.setOption(this.option);
/*myChart.on('click', function(params) {
// 控制台打印数据的名称
_this.$emit("changeGantryCount",params.name);
});*/
}
},mounted() {
_this=this;
//const { globalSymbol } = inject('tableVariable');
//const { globalVar, setGlobalVar } = toRefs("tableVariable");
var paramsObj={
"beginDate":this.beginDate,
"endDate":this.endDate,
"dataType":this.dataType
}
getDivPassidAllJTDataList(paramsObj).then(
res=>{
if (res.code > 0) {
let _data = res.data;
if (_data.length > 0) {
let dataX=[];
var data = [];
var dataFlow = [];
if(_data !==undefined ){
for(var k=0;k<_data.length;k++){
dataX.push(tool.formatDate(new Date(_data[k].CLASSDATE),"YYYY-MM-DD"));
data.push(_data[k].NOFEEMONEY);
dataFlow.push(_data[k].NOFEEFLOW);
}
}
this.initOption(dataX,data,dataFlow);
}
}
_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>

200
src/views/dev/echarts/yqLine.vue
Unescape Escape View File

@ -1,200 +0,0 @@
<template>
<div style="display: block;width:100%;height: 250px">
<div style="border-bottom: #d5d8d9 solid 2px;height: 30px;width:90%;position: relative"><b style="font-size: 15px;">逾期</b></div>
<div id="yqLine" style="width: 100%;height: 220px" v-loading="isloading" ></div>
</div>
</template>
<script>
import {ref} from "vue";
import {getDivPassidAllJTDataList} from "@/util/api/api";
import tool from "@/util/tool";
//import {getGantryPassDivStatList} from '../../../util/api/api.js'
var _this;
export default {
name: "yqLine",
data() {
return {
isloading:ref(true),
//dateTime:'2024-07-22'
}
},
props: ['dataType','beginDate','endDate'],
methods: {
initOption(dataX,dataMoney,dataFlow){
let myChart = this.$echarts.init(document.getElementById('yqLine'))
// 绘制图表
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']},
/* restore : {show: true},
saveAsImage : {show: true}*/
}
},
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:10,
position:'right'
}
],
series : [
{
name:'流量(辆)',
type:'line',
data:dataFlow,
label:{
show: false, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
},
yAxisIndex:0
},{
name:'金额(元)',
type:'line',
data:dataMoney,
label:{
show: false, // 显示标签
position: 'top', // 标签位置
formatter: '{c}' // 标签格式器，{c} 代表数据值
},
yAxisIndex:1
}
]
};
myChart.setOption(this.option);
/*myChart.on('click', function(params) {
// 控制台打印数据的名称
_this.$emit("changeGantryCount",params.name);
});*/
}
},mounted() {
_this=this;
var paramsObj={
"beginDate":this.beginDate,
"endDate":this.endDate,
"dataType":this.dataType
}
getDivPassidAllJTDataList(paramsObj).then(
res=>{
if (res.code > 0) {
let _data = res.data;
if (_data.length > 0) {
let dataX=[];
var data = [];
var dataFlow = [];
if(_data !==undefined ){
for(var k=0;k<_data.length;k++){
dataX.push(tool.formatDate(new Date(_data[k].CLASSDATE),"YYYY-MM-DD"));
data.push(_data[k].YQMONEY);
dataFlow.push(_data[k].YQFLOW);
}
}
this.initOption(dataX,data,dataFlow);
}
}
_this.isloading=false;
}
)
}
}
</script>
<style>
</style>

78
src/views/dev/mainPage.vue
Unescape Escape View File

@ -42,9 +42,9 @@
</el-form-item>
<el-form-item>
<el-radio-group v-model="radio" @change="changeRadio">
<el-radio :value="3">环比数据</el-radio>
<el-radio :value="6">集团汇总</el-radio>
<el-radio :value="9">减免汇总</el-radio>
<el-radio :value="3">环比数据</el-radio>
</el-radio-group>
</el-form-item>
<!-- <el-form-item label="环比开始日期：" class="s_el_row">
@ -80,13 +80,18 @@
</el-form>
</div>
<div style="width:100%;padding-bottom: 20px;height: 94%">
<div style="width:100%;padding-bottom: 20px;height: 100%" v-if="hbShow">
<hbData :key="hbLoading" :startDate="beginDateQuery" :endDate="endTimeQuery" :startDateHB="hbStartTimeQuery" :endDateHB="hbEndTimeQuery"></hbData>
<!-- <hbData ref="hbData" :startDate="beginDateQuery" :endDate="endTimeQuery" :startDateHB="hbStartTimeQuery" :endDateHB="hbEndTimeQuery"></hbData>-->
<div style="width:100%;padding-bottom: 20px;height: 100%" v-show="hbShow">
<!-- <hbData :key="hbLoading" :startDate="beginDateQuery" :endDate="endTimeQuery" :startDateHB="hbStartTimeQuery" :endDateHB="hbEndTimeQuery"></hbData>-->
<hbData ref="hbData" :startDate="beginDateQuery" :endDate="endTimeQuery" :startDateHB="hbStartTimeQuery" :endDateHB="hbEndTimeQuery"></hbData>
</div>
<div class="grid_main" style="height: 100%" v-if="showHZ">
<div class="grid_main" style="width:100%;height: 100%" v-show="showHZ">
<div style="width:98%;height: 1200px">
<everyDayAndLineData ref="everyDayAndLineData" :beginDate="beginDateQuery" :dataType="dataType" :endDate="endTimeQuery" :updateTable="updateTable"></everyDayAndLineData>
<everyDayAndLineData ref="everyDayAndLineData" ></everyDayAndLineData>
</div>
</div>
<div class="grid_main" style="width:100%;height: 100%" v-show="showHZMF">
<div style="width:98%;height: 1200px">
<everyDayAndLineDataJM ref="everyDayAndLineDataJM" ></everyDayAndLineDataJM>
</div>
</div>
</div>
@ -129,9 +134,9 @@ Star,
} from '@element-plus/icons-vue'
import {watch,ref} from 'vue'
import everyDayAndLineData from "@/views/dev/detail/everyDayAndLineData.vue";
import everyDayAndLineDataJM from "@/views/dev/detail/everyDayAndLineDataJM.vue";
import hbData from "@/views/dev/detail/hbData.vue";
import {getDivPassidAllYSMony} from "@/util/api/api.js"
import {ElMessage} from "element-plus";
import tool from "@/util/tool";
export default {
@ -149,26 +154,24 @@ export default {
valueDate:"",
YSMONEY:0,
MFMONEY:0,
hbShow:true,
radio:3,
showHZ:false,
hbShow:false,
radio:6,
showHZ:true,
showHZMF:false,
hbLoading:0,
updateTableMF:0,
updateTable:0,
dataType:'JT',
updateTable:10,
diffDate:1//日期差值，用来计算环比
}
},
methods: {
search() {
if(this.valueDate ==="" || this.valueDate ===undefined){
ElMessage({
type:"warning",
message:"请选择日期"
})
alert("请选择日期");
return false;
}else{
var _valueDate=this.valueDate;
console.log("_valueDate==============="+_valueDate)
let dataQuery=_valueDate.toString().split(",");
this.beginDateQuery=dataQuery[0];
this.endTimeQuery=dataQuery[1];
@ -194,9 +197,14 @@ export default {
}
}
)*/
this.updateTable= this.updateTable+1;
this.hbLoading=this.hbLoading +1;
//this.$refs.hbData.refreshData(this.beginDateQuery,this.endTimeQuery,this.hbStartTimeQuery,this.hbEndTimeQuery);
/* this.updateTable= this.updateTable+1;
this.updateTableMF= this.updateTableMF+1;
this.hbLoading=this.hbLoading +1;*/
this.$nextTick(() => {
this.$refs.hbData.refreshDataHb(this.beginDateQuery,this.endTimeQuery,this.hbStartTimeQuery,this.hbEndTimeQuery);
this.$refs.everyDayAndLineData.refreshDataJT(this.beginDateQuery,this.endTimeQuery);
this.$refs.everyDayAndLineDataJM.refreshData(this.beginDateQuery,this.endTimeQuery);
})
}, disabledDate (time){
if (this.firstChooseDate) {
const timeRange = 1 * 24 * 60 * 60 * 1000 // 1天时间戳
@ -215,52 +223,30 @@ export default {
this.firstChooseDate = "" // 选中后必须清空
}
},changeRadio(value){
console.log("hbLoading========"+this.hbLoading);
if(value===3){
this.hbShow=true;
this.showHZ=false;
this.showHZMF=false;
}else if(value===6){
this.hbShow=false;
this.showHZ=true;
this.showHZMF=false;
this.dataType="JT";
this.updateTable= this.updateTable+1;
}else if(value===9){
this.hbShow=false;
this.showHZ=true;
this.showHZ=false;
this.showHZMF=true;
this.dataType="MF";
this.updateTable= this.updateTable+1;
}
}
},
components: {
everyDayAndLineData,
everyDayAndLineDataJM,
hbData,
Search
}, mounted() {
//this.$refs.hbData.refreshData(this.beginDateQuery,this.endTimeQuery,this.hbStartTimeQuery,this.hbEndTimeQuery);
/* var dataParam={
"beginDate": this.beginDateQuery,
"endDate":this.endTimeQuery
}
getDivPassidAllYSMony(dataParam).then(
res => {
this.loading = false;
if (res.code > 0) {
let dataX = [];
var data = [];
let _data = res.data;
if (_data.length > 0) {
if(_data[0].JTYSMONEY !=='null'){
this.YSMONEY = _data[0].JTYSMONEY;
}
if(_data[0].MFMONEY !=='null'){
this.MFMONEY = _data[0].MFMONEY;
}
}
}
}
)*/
}
}

Write Preview
Loading…
Cancel
Save