mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

提交最新收费运营代码

wangqin
yyl 1 year ago
parent
645e5c4b02
commit
2efb8b777c
16 changed files with 3091 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      ruoyi-ui/src/common/menuData.js
  2. 261
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/RoadSectionTolls/assets/charts.js
  3. 70
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/RoadSectionTolls/index.vue
  4. BIN
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/accessAnalysis/assets/img_1.png
  5. BIN
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/accessAnalysis/assets/img_2.png
  6. 324
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/accessAnalysis/index.vue
  7. 886
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/auxiliaryFlowcharts/index.vue
  8. 293
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/daylyAnalysis/assets/charts.js
  9. 70
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/daylyAnalysis/index.vue
  10. 165
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/laneTolls/index.vue
  11. 254
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/monthlyAnalysis/assets/charts.js
  12. 70
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/monthlyAnalysis/index.vue
  13. 165
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/roadNetworkTraffic/index.vue
  14. 165
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/truckLaneTolls/index.vue
  15. 165
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/vehicleTolls/index.vue
  16. 196
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/index.vue

7
ruoyi-ui/src/common/menuData.js
View File

@ -98,6 +98,13 @@ export default [
position: "left",
path: "/maintain",
component: "developing.vue",
children: [
{
title: "收费运营",
name: "chargeableOperations",
path: "/maintain/board",
component: "maintenanceOperations/chargeableOperations/index.vue",
}]
},
{
title: "公众服务",

261
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/RoadSectionTolls/assets/charts.js
View File

@ -0,0 +1,261 @@
import * as echarts from "echarts";
var xData = ['梁山东', '安城', '梁山', '孝里', '平阴北', '长青','东平','平阴南','嘉祥西']
let eventWarning = [55, 50, 46, 46, 55, 45,33,62,30]
let eventHandling = [2000, 1700, 1600, 1450, 2100, 1500, 1200,1200,1900]
let legend = ['通行量', '收费金额']
let options = {
color: ['#2CF1FF', '#3456FF'],
timeline: {
show: false,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
backgroundColor: "rgba(255,255,255,0.75)",
extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
textStyle: {
fontSize: 14,
color: "#000",
},
formatter: "{a}<br/>{b} :\n\n{c} 个",
},
legend: {
top: 10,
right: "center",
itemWidth: 16,
itemHeight: 6,
itemGap: 20,
icon: "horizontal",
itemStyle:{
borderRadius:9,
},
textStyle: {
color: "#ffffff",
fontSize: 16,
},
data: legend,
},
grid: [
// 左边
{
show: false,
left: "5%",
top: "15%",
bottom: "10%",
containLabel: true,
width: "40%",
},
// 中间
{
show: false,
left: "51%",
top: "15%",
bottom: "15%",
width: "0%",
},
// 右边
{
show: false,
right: "5%",
top: "15%",
bottom: "10%",
containLabel: true,
width: "40%",
},
],
xAxis: [
{
type: "value",
inverse: true,
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
axisLabel: {
show: true,
verticalAlign: 'middle',
textStyle: {
color: 'rgba(255, 255, 255, 0.7)',
fontSize: 12,
},
},
splitLine: {
show: false,
},
},
{
gridIndex: 1,
show: false,
},
{
gridIndex: 2,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
verticalAlign: 'middle',
textStyle: {
color: 'rgba(255, 255, 255, 0.7)',
fontSize: 12,
},
},
splitLine: {
show: false,
},
},
],
yAxis: [
{
type: "category",
inverse: true,
position: "right",
axisLine: {
show: false
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
data: xData,
},
{
gridIndex: 1,
type: "category",
inverse: true,
position: "left",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
color: "rgba(255, 255, 255, 1)",
fontSize: 12,
align: "center",
},
data: xData.map(function (value) {
return {
value: value,
textStyle: {
align: "center",
},
};
}),
},
{
gridIndex: 2,
type: "category",
inverse: true,
position: "left",
axisLine: {
show: false
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
data: xData,
},
],
series: [
{
name: legend[0],
type: "bar",
barWidth: 10,
stack: "1",
label: {
normal: {
show: true,
position: "left",
z:"100",
valueAnimation: true,
textStyle: {
color: "#F5F5F5",
fontSize: 10,
},
formatter: '{c}'
},
},
itemStyle: {
borderRadius:9,
//Y轴数字显示部分
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#167145",
},
{
offset: 1,
color: "#01EAC1",
},
]),
},
data: eventWarning,
animationEasing: "elasticOut",
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
},
{
name: legend[1],
type: "bar",
stack: "2",
barWidth: 10,
xAxisIndex: 2,
yAxisIndex: 2,
label: {
normal: {
show: true,
position: "right",
z:"100",
valueAnimation: true,
textStyle: {
color: "#F5F5F5",
fontSize: 10,
},
formatter: '{c}'
},
},
itemStyle: {
borderRadius:9,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#F89336",
},
{
offset: 1,
color: "#D2BCA7",
},
]),
},
data: eventHandling,
animationEasing: "elasticOut",
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
},
],
};
export default options

70
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/RoadSectionTolls/index.vue
View File

@ -0,0 +1,70 @@
<template>
<div class='congestion'>
<WgtTitle :title="'路段收费通行分析'"></WgtTitle>
<div class="board">
<div class="charts" id="roadSectionTolls"></div>
</div>
</div>
</template>
<script>
import WgtTitle from "../../../../perception/widgets/title";
import * as echarts from "echarts";
import chartsStatistics from "./assets/charts";
export default {
name: 'RoadSectionTolls',
components: {
WgtTitle
},
data() {
return {
}
},
created() {
},
methods: {
},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('roadSectionTolls'));
myChart.setOption(chartsStatistics);
});
});
},
}
</script>
<style lang='scss' scoped>
.congestion {
width: 100%;
display: flex;
flex-direction: column;
.board{
height:326px;
width: 100%;
padding: 0px 20px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px;
opacity: 0.8;
border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}
}
.charts {
height:325px;
width: 100%;
}
</style>

BIN
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/accessAnalysis/assets/img_1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/accessAnalysis/assets/img_2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

324
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/accessAnalysis/index.vue
View File

@ -0,0 +1,324 @@
<template>
<div class='congestion'>
<WgtTitle :title="'路段收费通行分析'"></WgtTitle>
<div class="board">
<div class="board-row" >
<div class="cont-l" >
<img src="./assets/img_1.png" />
<div class="text-cont" style="position: relative;left:10px;" >应追缴金额</div>
</div>
<div class="cont-lr" >
<div class="top-cont" >
<span class="titl-t1">{{ '3415.47' }}</span><span class="unit">元</span>
</div>
<div class="text-cont" >
今日
</div>
</div>
<div class="cont-lr" >
<div class="top-cont" >
<span class="titl-t1" >{{ '2810.36' }}</span><span class="unit">元</span>
</div>
<div class="text-cont" >
昨日
</div>
</div>
<div class="cont-lr" >
<div class="top-cont" >
<span class="titl-t1" >{{ '12.26' }}</span><span class="unit">万元</span>
</div>
<div class="text-cont" >
本月(统计至昨日)
</div>
</div>
<div class="cont-lr" >
<div class="top-cont" >
<span class="titl-t1" >{{ '206.94' }}</span><span class="unit">万元</span>
</div>
<div class="text-cont" >
本年
</div>
</div>
</div>
<div class="board-row" >
<div class="cont-l" >
<img src="./assets/img_1.png" />
<div class="text-cont" style="position: relative;left:10px;" >实时追缴金额</div>
</div>
<div class="cont-lr" >
<div class="top-cont" >
<span class="titl-t3">{{ '3415.47' }}</span><span class="unit">元</span>
</div>
<div class="text-cont" >
今日
</div>
</div>
<div class="cont-lr" >
<div class="top-cont" >
<span class="titl-t3" >{{ '2810.36' }}</span><span class="unit">元</span>
</div>
<div class="text-cont" >
昨日
</div>
</div>
<div class="cont-lr" >
<div class="top-cont" >
<span class="titl-t3" >{{ '12.26' }}</span><span class="unit">万元</span>
</div>
<div class="text-cont" >
本月(统计至昨日)
</div>
</div>
<div class="cont-lr" >
<div class="top-cont" >
<span class="titl-t3" >{{ '206.94' }}</span><span class="unit">万元</span>
</div>
<div class="text-cont" >
本年
</div>
</div>
</div>
<div class="board-row" >
<div class="cont-l" >
<img src="./assets/img_2.png" />
<div class="text-cont" style="position: relative;left:10px;" >追缴车辆</div>
</div>
<div class="cont-lr" >
<div class="top-cont" >
<span class="titl-t1">{{ '3415.47' }}</span><span class="unit">元</span>
</div>
<div class="text-cont" >
今日
</div>
</div>
<div class="cont-lr" >
<div class="top-cont" >
<span class="titl-t1" >{{ '2810.36' }}</span><span class="unit">元</span>
</div>
<div class="text-cont" >
昨日
</div>
</div>
<div class="cont-lr" >
<div class="top-cont" >
<span class="titl-t1" >{{ '12.26' }}</span><span class="unit">万元</span>
</div>
<div class="text-cont" >
本月(统计至昨日)
</div>
</div>
<div class="cont-lr" >
<div class="top-cont" >
<span class="titl-t1" >{{ '206.94' }}</span><span class="unit">万元</span>
</div>
<div class="text-cont" >
本年
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import WgtTitle from "../../../../perception/widgets/title";
import * as echarts from "echarts";
export default {
name: 'roadNetworkTraffic',
components: {
WgtTitle
},
data() {
return {
}
},
created() {
},
methods: {
},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
});
});
},
}
</script>
<style lang='scss' scoped>
.congestion {
width: 100%;
height:314px;
display: inline-flex;
flex-direction: column;
.board{
height:100%;
width: 100%;
padding: 0px 20px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px;
opacity: 0.8;
border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
.board-row {
position: relative;
width:98%;
height:90px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 0 25px;
margin-bottom:5px;
border-radius: 12px;
background: linear-gradient(180deg, rgba(1,139,182,0) 0%, #1FCAF135 100%);
}
.board-row::after {
content: "";
position: absolute;
left:0;
bottom:0px;
width:100%;
height:1px;
background: linear-gradient(90deg, rgba(81,181,255,0) 3%, #51B5FF 49%, rgba(81,181,255,0) 100%);
}
.cont-l {
display: inline-flex;
width: 20%;
margin-right:15px;
height:80px;
position: relative;
border-radius: 12px;
flex-direction: column;
justify-content: center;
align-items: center;
>img {
position: relative;
display: inline-flex;
top:10px;
left:10px;
height:41.85px;
width:98.51px;
}
.text-cont {
flex-direction: row;
display: inline-flex;
width:100%;
height:50%;
font-size: 16px !important;
justify-content: center;
align-items: center;
font-weight: 400;
text-align: center;
}
}
.cont-lr {
display: inline-flex;
width: 20%;
margin-right:15px;
height:80px;
position: relative;
border-radius: 12px;
flex-direction: column;
img {
position: relative;
display: inline-flex;
top:15px;
height:41.85px;
width:98.51px;
}
.top-cont {
flex-direction: row;
display: inline-flex;
width:100%;
height:40%;
font-weight: 400;
color: #FFFFFF;
justify-content: center;
align-items: center;
font-size: 20px !important;
position: relative;
top:10px;
.titl-t1 {
display: inline-flex;
font-size: 20px !important;
color: #00D1FF;
margin-right:10px;
}
.titl-t2 {
display: inline-flex;
font-size: 20px !important;
color: #FFDB82;
margin-right:10px;
}
.titl-t3 {
display: inline-flex;
font-size: 20px !important;
color: #00EBC1;
margin-right:10px;
}
.unit {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #ffffff88;
}
}
.text-cont {
flex-direction: row;
display: inline-flex;
width:100%;
height:60%;
font-size: 16px !important;
justify-content: center;
align-items: center;
font-weight: 400;
text-align: center;
}
}
.cont-l:last-child {
margin-right:0px;
}
}
}
.charts {
height:158px;
width: 100%;
}
</style>

886
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/auxiliaryFlowcharts/index.vue
View File

@ -0,0 +1,886 @@
<template>
<div class='congestion'>
<WgtTitle :title="'辅助流程图'"></WgtTitle>
<div class="board">
<div class="startDiv" >
<div class="begin" >
<div class="title" >
<div>稽核工单</div>
<div>（工作台）</div>
</div>
<div class="line1">
</div>
<div class="line2">
</div>
<div class="line3">
</div>
<div class="line4">
</div>
</div>
<div class="topDiv1" >
<div class="title" >
<div >异常数据分析</div>
</div>
<div class="body" >
<div class="text" >稽查员：添加车辆名单</div>
<div class="text-count" >未处理5条</div>
</div>
<div class="line5">
</div>
</div>
<div class="topDiv2" >
<div class="title" >
<div >跨省工单录入</div>
</div>
<div class="body" >
<div class="text" >稽查员：录入跨省工单</div>
<div class="text" >或历史工单</div>
</div>
</div>
<div class="topDiv3" >
<div class="title" >
<div >稽查车辆管理</div>
</div>
<div class="body" >
<div class="text" >稽查员：查询、新增、</div>
<div class="text" >移除车辆</div>
<div class="text-count" >未处理0条</div>
</div>
<div class="line6">
</div>
</div>
<div class="topDiv4" >
<div class="title" >
<div >历史信息查询</div>
</div>
<div class="body" >
<div class="text" >查看车辆历史流水信息</div>
</div>
<div class="line7">
</div>
<div class="line8" >
</div>
<div class="line9" >
</div>
<div class="line10" >
</div>
</div>
<div class="topDiv5" >
<div class="title" >
<div >追缴名单管理</div>
</div>
<div class="body" >
<div class="text-count" >待追缴302辆</div>
</div>
</div>
<div class="topDiv6" >
<div class="title" >
<div >工单录入</div>
</div>
<div class="body" >
<div class="text" >稽查员：工单录入</div>
</div>
</div>
<div class="topDiv7" >
<div class="title" >
<div >工单信息查询</div>
</div>
<div class="body" >
<div class="text" >稽查员：查看待追缴状态的工单； 审核员：待审核的工单，包括审核完成的、待追缴的</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import WgtTitle from "../../../../perception/widgets/title";
import * as echarts from "echarts";
export default {
name: 'auxiliaryFlowcharts',
components: {
WgtTitle
},
data() {
return {
}
},
created() {
},
methods: {
},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
});
});
},
}
</script>
<style lang='scss' scoped>
.congestion {
width: 100%;
height:314px;
display: inline-flex;
flex-direction: column;
.board{
height:100%;
width: 100%;
padding: 0px 20px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px;
opacity: 0.8;
border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
.startDiv {
position: relative;
display: inline-flex;
flex-direction: row;
width:100%;
height:100%;
left:-10px;
.topDiv7 {
position: absolute;
left:460px;
top:120px;
display: inline-flex;
width: 134px;
height: 129px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #06425807 100%);
border-radius: 3px 3px 3px 3px;
border: 2px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 2 2;
flex-direction: column;
.title {
display: inline-flex;
width: 133px;
height: 22px;
background: linear-gradient(180deg, #29D9BC 0%, rgba(43,85,191,0.85) 100%);
border-radius: 3px 3px 3px 3px;
font-size: 13px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
justify-content: center;
align-items: center;
}
.body {
display: inline-flex;
width: 133px;
height: 120px;
flex-direction: column;
align-items: flex-start;
justify-content: center;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
border-radius: 3px 3px 3px 3px;
.text {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-left:15px;
}
}
}
.topDiv6 {
position: absolute;
left:460px;
top:60px;
display: inline-flex;
width: 134px;
height: 49px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #06425807 100%);
border-radius: 3px 3px 3px 3px;
border: 2px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 2 2;
flex-direction: column;
.title {
display: inline-flex;
width: 133px;
height: 22px;
background: linear-gradient(180deg, #29D9BC 0%, rgba(43,85,191,0.85) 100%);
border-radius: 3px 3px 3px 3px;
font-size: 13px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
justify-content: center;
align-items: center;
}
.body {
display: inline-flex;
width: 133px;
height: 30px;
flex-direction: column;
align-items: flex-start;
justify-content: center;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
border-radius: 3px 3px 3px 3px;
.text {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-left:15px;
}
}
}
.topDiv5 {
position: absolute;
left:460px;
top:0px;
display: inline-flex;
width: 134px;
height: 49px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #06425807 100%);
border-radius: 3px 3px 3px 3px;
border: 2px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 2 2;
flex-direction: column;
.title {
display: inline-flex;
width: 133px;
height: 22px;
background: linear-gradient(180deg, #29D9BC 0%, rgba(43,85,191,0.85) 100%);
border-radius: 3px 3px 3px 3px;
font-size: 13px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
justify-content: center;
align-items: center;
}
.body {
display: inline-flex;
width: 133px;
height: 30px;
flex-direction: column;
align-items: flex-start;
justify-content: center;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
border-radius: 3px 3px 3px 3px;
.text-count {
font-size: 10px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FF3F3F;
margin-left:15px;
margin-top:2px;
}
}
}
.topDiv4 {
position: absolute;
left:285px;
top:160px;
display: inline-flex;
width: 154px;
height: 90px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #06425807 100%);
border-radius: 3px 3px 3px 3px;
border: 2px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 2 2;
flex-direction: column;
.title {
display: inline-flex;
width: 153px;
height: 22px;
background: linear-gradient(180deg, #29D9BC 0%, rgba(43,85,191,0.85) 100%);
border-radius: 3px 3px 3px 3px;
font-size: 13px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
justify-content: center;
align-items: center;
}
.body {
display: inline-flex;
width: 154px;
height: 90px;
flex-direction: column;
align-items: flex-start;
justify-content: center;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
border-radius: 3px 3px 3px 3px;
.text {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-left:15px;
}
.text-count {
font-size: 10px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FF3F3F;
margin-left:15px;
margin-top:8px;
}
}
.line10 {
position: absolute;
left: 160px;
top: -128px;
width: 2px;
height:187px;
background:#154D6A;
border-radius: 0px 0px 0px 0px;
opacity:1;
z-index: 10000
}
.line9 {
position: absolute;
left: 160px;
top: -128px;
width: 10px;
height:2px;
background:#154D6A;
border-radius: 0px 0px 0px 0px;
opacity:1;
z-index: 10000
}
.line8 {
position: absolute;
left: 160px;
top: 58px;
width: 10px;
height:2px;
background:#154D6A;
border-radius: 0px 0px 0px 0px;
opacity:1;
z-index: 10000
}
.line7 {
position: absolute;
left: 150px;
top: 44px;
width: 10px;
height:2px;
background:#154D6A;
border-radius: 0px 0px 0px 0px;
opacity:1;
z-index: 10000
}
.line7::after {
position: absolute;
content: "";
left:5px;
top:50%;
transform: translateY(-50%);
float: left;
width: 0;
height: 0;
border-width: 8px;
border-style: solid;
border-color: transparent transparent transparent #154D6A;
}
}
.topDiv3 {
position: absolute;
left:285px;
top:30px;
display: inline-flex;
width: 154px;
height: 90px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #06425807 100%);
border-radius: 3px 3px 3px 3px;
border: 2px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 2 2;
flex-direction: column;
.title {
display: inline-flex;
width: 153px;
height: 22px;
background: linear-gradient(180deg, #29D9BC 0%, rgba(43,85,191,0.85) 100%);
border-radius: 3px 3px 3px 3px;
font-size: 13px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
justify-content: center;
align-items: center;
}
.body {
display: inline-flex;
width: 154px;
height: 90px;
flex-direction: column;
align-items: flex-start;
justify-content: center;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
border-radius: 3px 3px 3px 3px;
.text {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-left:15px;
}
.text-count {
font-size: 10px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FF3F3F;
margin-left:15px;
margin-top:8px;
}
}
.line6 {
position: absolute;
left: 75px;
top: 88px;
width: 2px;
height: 35px;
background:#154D6A;
border-radius: 0px 0px 0px 0px;
opacity:1;
z-index: 10000
}
.line6::after {
position: absolute;
content: "";
left:-7px;
top:40px;
transform: translateY(-50%);
float: left;
width: 0;
height: 0;
border-width: 8px;
border-style: solid;
border-color: #154D6A transparent transparent transparent ;
}
}
.topDiv2 {
position: absolute;
left:110px;
top:160px;
display: inline-flex;
width: 154px;
height: 90px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #06425807 100%);
border-radius: 3px 3px 3px 3px;
border: 2px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 2 2;
flex-direction: column;
.title {
display: inline-flex;
width: 153px;
height: 22px;
background: linear-gradient(180deg, #29D9BC 0%, rgba(43,85,191,0.85) 100%);
border-radius: 3px 3px 3px 3px;
font-size: 13px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
justify-content: center;
align-items: center;
}
.body {
display: inline-flex;
width: 154px;
height: 90px;
flex-direction: column;
align-items: flex-start;
justify-content: center;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
border-radius: 3px 3px 3px 3px;
.text {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-left:15px;
}
.text-count {
font-size: 10px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FF3F3F;
margin-left:15px;
margin-top:8px;
}
}
}
.topDiv1 {
position: relative;
margin-left:40px;
top:30px;
display: inline-flex;
width: 154px;
height: 90px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #06425807 100%);
border-radius: 3px 3px 3px 3px;
border: 2px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 2 2;
flex-direction: column;
.title {
display: inline-flex;
width: 153px;
height: 22px;
background: linear-gradient(180deg, #29D9BC 0%, rgba(43,85,191,0.85) 100%);
border-radius: 3px 3px 3px 3px;
font-size: 13px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
justify-content: center;
align-items: center;
}
.line5 {
position: absolute;
left: 150px;
top:50%;
width: 15px;
height: 2px;
background:#154D6A;
border-radius: 0px 0px 0px 0px;
opacity:1;
z-index: 10000
}
.line5::after {
position: absolute;
content: "";
left:15px;
top:50%;
transform: translateY(-50%);
float: left;
width: 0;
height: 0;
border-width: 8px;
border-style: solid;
border-color: transparent transparent transparent #154D6A;
}
.body {
display: inline-flex;
width: 154px;
height: 90px;
flex-direction: column;
align-items: flex-start;
justify-content: center;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
border-radius: 3px 3px 3px 3px;
.text {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-left:15px;
}
.text-count {
font-size: 10px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FF3F3F;
margin-left:15px;
margin-top:8px;
}
}
}
.begin {
display: inline-flex;
width: 69px;
height: 74px;
background: linear-gradient(180deg, #29D9BC 0%, rgba(43,85,191,0.85) 100%);
border-radius: 3px 3px 3px 3px;
opacity: 1;
justify-content: center;
align-items: center;
font-size: 13px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
position: relative;
top:50%;
transform: translateY(-50%);
> .title {
flex-direction: column;
display: inline-flex;
justify-content: center;
align-items: center;
}
.line1 {
position: absolute;
left: 70px;
top:50%;
width: 15px;
height: 2px;
background:#154D6A;
border-radius: 0px 0px 0px 0px;
opacity:1;
z-index: 10000
}
.line1::after {
position: absolute;
content: "";
left:15px;
top:50%;
transform: translateY(-50%);
float: left;
width: 0;
height: 0;
border-width: 8px;
border-style: solid;
border-color: transparent transparent transparent #154D6A;
}
.line2 {
position: absolute;
left: 92px;
top:-26px;
width: 2px;
height:125px;
background:#154D6A;
border-radius: 0px 0px 0px 0px;
opacity:1;
z-index: 10000
}
.line3 {
position: absolute;
left: 92px;
top:-26px;
width: 20px;
height: 2px;
background:#154D6A;
border-radius: 0px 0px 0px 0px;
opacity:1;
z-index: 10000
}
.line4 {
position: absolute;
left: 92px;
top:98px;
width: 20px;
height: 2px;
background:#154D6A;
border-radius: 0px 0px 0px 0px;
opacity:1;
z-index: 10000
}
}
}
.board-row {
position: relative;
width:98%;
height:90px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 0 25px;
margin-bottom:5px;
border-radius: 12px;
background: linear-gradient(180deg, rgba(1,139,182,0) 0%, #1FCAF135 100%);
}
.board-row::after {
content: "";
position: absolute;
left:0;
bottom:0px;
width:100%;
height:1px;
background: linear-gradient(90deg, rgba(81,181,255,0) 3%, #51B5FF 49%, rgba(81,181,255,0) 100%);
}
.cont-l {
display: inline-flex;
width: 20%;
margin-right:15px;
height:80px;
position: relative;
border-radius: 12px;
flex-direction: column;
justify-content: center;
align-items: center;
>img {
position: relative;
display: inline-flex;
top:10px;
left:10px;
height:41.85px;
width:98.51px;
}
.text-cont {
flex-direction: row;
display: inline-flex;
width:100%;
height:50%;
font-size: 18px !important;
justify-content: center;
align-items: center;
font-family: PangMenZhengDao, PangMenZhengDao;
font-weight: 400;
text-align: center;
}
}
.cont-lr {
display: inline-flex;
width: 20%;
margin-right:15px;
height:80px;
position: relative;
border-radius: 12px;
flex-direction: column;
img {
position: relative;
display: inline-flex;
top:15px;
height:41.85px;
width:98.51px;
}
.top-cont {
flex-direction: row;
display: inline-flex;
width:100%;
height:40%;
font-family: PangMenZhengDao, PangMenZhengDao;
font-weight: 400;
color: #FFFFFF;
justify-content: center;
align-items: center;
font-size: 20px !important;
position: relative;
top:10px;
.titl-t1 {
display: inline-flex;
font-size: 20px !important;
color: #00D1FF;
margin-right:10px;
}
.titl-t2 {
display: inline-flex;
font-size: 20px !important;
color: #FFDB82;
margin-right:10px;
}
.titl-t3 {
display: inline-flex;
font-size: 20px !important;
color: #00EBC1;
margin-right:10px;
}
.unit {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #ffffff88;
}
}
.text-cont {
flex-direction: row;
display: inline-flex;
width:100%;
height:60%;
font-size: 20px !important;
justify-content: center;
align-items: center;
font-family: PangMenZhengDao, PangMenZhengDao;
font-weight: 400;
text-align: center;
}
}
.cont-l:last-child {
margin-right:0px;
}
}
}
.charts {
height:158px;
width: 100%;
}
</style>

293
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/daylyAnalysis/assets/charts.js
View File

@ -0,0 +1,293 @@
import * as echarts from "echarts";
var data1 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15]
var data2 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15]
var options = {
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(17,95,182,0.5)',
textStyle: {
color: "#fff"
},
formatter: function (params) {
return params[1].marker + '' + params[1].name + '\n' +
"<div>" +
"<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#007AFF;option:0.5'></span>" +
"<span style=''> " + params[1].seriesName + ': ' + params[1].value + "\n" + ' </span>' +
"</div>" +
"<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#FF9B61;'></span>" +
'' + "<span style=''> " + params[3].seriesName + ': ' + params[3].value;
}
},
grid: {
left: '5%',
right: '5%',
top: '25%',
bottom: '12%'
},
xAxis: {
data: ['01日', '02日', '03日', '04日', '05日', '06日','07日', '08日', '09日', '10日', '11日', '12日'],
show: true,
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#2D4377',
opacity: 1
}
},
// lineStyle: {
// show: true,
// type: 'solid'
// },
axisLabel: {
interval: 0,
textStyle: {
color: 'rgba(255,255,255,0.8)',
fontSize: 14
},
margin: 12 // 刻度标签与轴线之间的距离。
}
},
yAxis: [{
min: 0,
max: 18,
type: 'value',
minInterval:3,
maxInterval:3,
name: '(单位：万)',
nameTextStyle: {
align: 'left',
color: 'rgba(255,255,255,0.8)',
padding: [0, 0, 0, -20],
fontSize: 14
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#2D4377',
opacity: 0.5
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#2D4377',
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.8)',
fontSize: 14
}
},
data:[
'0','3','6','9','12','15','18'
],
}, {
show: true,
name: '',
min: 0,
max: 18,
type: 'value',
minInterval:3,
maxInterval:3,
splitNumber:3,
formatter:function(e){
console.log("---------------",e);
},
nameTextStyle: {
align: 'left',
color: 'rgba(255,255,255,0.8)',
padding: [0, 0, 0, 10],
fontSize: 14
},
splitLine: { show: false },
axisLine: { show: true },
axisTick: { show: false },
axisLabel: {
textStyle: { fontSize: 14, color: 'rgba(255,255,255,0.8)' }
},
data:[
'0%','3%','6%','9%','12%','15%','18%'
],
}],
legend: {
icon: 'rect',
itemWidth: 25,
itemHeight: 10,
top: '5%',
right: '5%',
textStyle: {
color: '#fff',
fontSize: 14
},
lineStyle:{
show:false,
},
itemGap: 12, // 设置间距
data:[{
name:'增收金额',
itemStyle:{
color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#1CE8E8' // 0% 处的颜色
}, {
offset: 1,
color: '#2CAEE3' // 100% 处的颜色
}], false)
},
},
{
name:'增涨率',
itemStyle:{
color:"#006AA6"
}
}],
},
series: [
// 下半截柱状图
{
name: '增收金额',
type: 'bar',
barWidth: 12,
barGap: '-100%',
borderCap:"round",
itemStyle: { // lenged文本
opacity: 1,
borderCap:"round",
color: function (params) {
var a = params.name.slice(0, 2)
return new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
offset: 0,
color: '#1CE8E8' // 0% 处的颜色
}, {
offset: 1,
color: '#2CAEE3' // 100% 处的颜色
}], false)
}
},
data: data1
},
{
'name': '',
'type': 'pictorialBar',
'symbolSize': [12, 12],
'symbolOffset': [0, -4],
'z': 5,
itemStyle: {
opacity: 1,
borderCap:"round",
color: function (params) {
var a = params.name.slice(0, 2)
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#0BA7DA' // 0% 处的颜色
}, {
offset: 1,
color: '#0BA7DA30' // 100% 处的颜色
}], false)
}
},
'symbolPosition': 'end',
'data': data1
},
{
name: '增涨率',
'z': 9,
yAxisIndex: 1,
type: 'line',
data: data2,
symbol:
"image://data:image/png;base64,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",
symbolSize: [20, 20],
symbolOffset:['0',0],
lineStyle: {
normal: {
width: 3,
color: '#006AA6' // 线条颜色
},
borderWidth:5,
borderColor: '#006AA6'
},
itemStyle:{
color:"#006AA6",
},
},
{
name: '',
type: 'bar',
barWidth: 12,
barGap: '-100%',
z: 0,
itemStyle: {
borderCap:"round",
color: '#163F7A',
opacity: .7,
},
data: [18, 18, 18, 18, 18, 18,18, 18, 18, 18, 18, 18]
},
{
'name': '',
'type': 'pictorialBar',
'symbolSize': [12, 12],
'symbolOffset': [0, -5],
'z': 5,
itemStyle: {
barBorderRadius: [13, 13, 13, 13],
opacity: 1,
borderCap:"round",
color: function (params) {
var a = params.name.slice(0, 2)
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#2CAEE3' // 0% 处的颜色
}, {
offset: 1,
color: '#2CAEE3' // 100% 处的颜色
}], false)
}
},
'symbolPosition': 'end',
data: [0, 0, 0, 0, 0, 0,0, 0, 0,0, 0, 0]
}
]
}
// option && myChart3.setOption(option);
// if (option && typeof option === "object") {
// myChart3.setOption(option, true);
// refreshChart(myChart3,option);
// var index3 = 0; //播放所在下标
// var mTime = setInterval(function () {
// myChart3.dispatchAction({
// type: 'showTip',
// seriesIndex: 0,
// dataIndex: index3
// });
// index3++;
// if (index3 >= 6) {
// //console.log('data4', fxdata.length)
// index3 = 0;
// //console.log(fxdata)
// }
// }, 2600);
// }
export default options;

70
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/daylyAnalysis/index.vue
View File

@ -0,0 +1,70 @@
<template>
<div class='congestion'>
<WgtTitle :title="'增收金额日分析'"></WgtTitle>
<div class="board">
<div class="charts" id="daylyAnalysis"></div>
</div>
</div>
</template>
<script>
import WgtTitle from "../../../../perception/widgets/title";
import * as echarts from "echarts";
import chartsStatistics from "./assets/charts";
export default {
name: 'MonthlyAnalysis',
components: {
WgtTitle
},
data() {
return {
}
},
created() {
},
methods: {
},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('daylyAnalysis'));
myChart.setOption(chartsStatistics);
});
});
},
}
</script>
<style lang='scss' scoped>
.congestion {
width: 100%;
display: flex;
flex-direction: column;
.board{
height:230px;
width: 100%;
padding: 0px 20px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px;
opacity: 0.8;
border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}
}
.charts {
height:205px;
width: 100%;
}
</style>

165
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/laneTolls/index.vue
View File

@ -0,0 +1,165 @@
<template>
<div class='congestion'>
<WgtTitle :title="'客车车道通行费'"></WgtTitle>
<div class="board">
<div class="cont-l" >
<div class="top-cont" >
<span class="titl-t1">{{ '2,301.6' }}</span><span class="unit">万辆</span>
</div>
<div class="text-cont" >
今日(截止到当前）
</div>
</div>
<div class="cont-l" >
<div class="top-cont" >
<span class="titl-t2" >{{ '3,139.7' }}</span><span class="unit">万辆</span>
</div>
<div class="text-cont" >
昨日
</div>
</div>
<div class="cont-l" >
<div class="top-cont" >
<span class="titl-t3" >{{ '1,455,297.0' }}</span><span class="unit">万辆</span>
</div>
<div class="text-cont" >
本年度
</div>
</div>
</div>
</div>
</template>
<script>
import WgtTitle from "../../../../perception/widgets/title";
import * as echarts from "echarts";
export default {
name: 'laneTolls',
components: {
WgtTitle
},
data() {
return {
}
},
created() {
},
methods: {
},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
});
});
},
}
</script>
<style lang='scss' scoped>
.congestion {
width: 100%;
.board{
height:138px;
width: 100%;
padding: 0px 20px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px;
opacity: 0.8;
border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
display: flex;
justify-content: space-between;
align-items: center;
.cont-l {
display: inline-flex;
max-width:172px;
width: 33%;
margin-right:15px;
height:80px;
position: relative;
border-radius: 12px;
background: linear-gradient(180deg, rgba(1,139,182,0) 0%, #1FCAF135 100%);
flex-direction: column;
.top-cont {
flex-direction: row;
display: inline-flex;
width:100%;
height:50%;
font-family: PangMenZhengDao, PangMenZhengDao;
font-weight: 400;
color: #FFFFFF;
justify-content: center;
align-items: center;
.titl-t1 {
display: inline-flex;
font-size: 20px !important;
color: #00D1FF;
margin-right:5px;
}
.titl-t2 {
display: inline-flex;
font-size: 20px !important;
color: #FFDB82;
margin-right:5px;
}
.titl-t3 {
display: inline-flex;
font-size: 20px !important;
color: #00EBC1;
margin-right:5px;
}
.unit {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #ffffff88;
}
}
.text-cont {
flex-direction: row;
display: inline-flex;
width:100%;
height:50%;
font-size: 18px !important;
justify-content: center;
align-items: center;
font-family: PangMenZhengDao, PangMenZhengDao;
font-weight: 400;
}
}
.cont-l:last-child {
margin-right:0px;
}
.cont-l::after {
content: "";
position: absolute;
left:0;
bottom:-1px;
width:100%;
height:2px;
background: linear-gradient(90deg, rgba(81,181,255,0) 3%, #51B5FF 49%, rgba(81,181,255,0) 100%);
}
}
}
.charts {
height:158px;
width: 100%;
}
</style>

254
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/monthlyAnalysis/assets/charts.js
View File

@ -0,0 +1,254 @@
import * as echarts from "echarts";
var data1 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15]
var data2 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15]
var options = {
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(17,95,182,0.5)',
textStyle: {
color: "#fff"
},
formatter: function (params) {
return params[1].marker + '' + params[1].name + '\n' +
"<div>" +
"<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#007AFF;option:0.5'></span>" +
"<span style=''> " + params[1].seriesName + ': ' + params[1].value + "\n" + ' </span>' +
"</div>" +
"<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#FF9B61;'></span>" +
'' + "<span style=''> " + params[3].seriesName + ': ' + params[3].value;
}
},
grid: {
left: '5%',
right: '5%',
top: '25%',
bottom: '12%'
},
xAxis: {
data: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月'],
show: true,
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#2D4377',
opacity: 1
}
},
// lineStyle: {
// show: true,
// type: 'solid'
// },
axisLabel: {
interval: 0,
textStyle: {
color: 'rgba(255,255,255,0.8)',
fontSize: 14
},
margin: 12 // 刻度标签与轴线之间的距离。
}
},
yAxis: [{
min: 0,
max: 18,
minInterval:1,
maxInterval:1,
name: '(单位：万)',
nameTextStyle: {
align: 'left',
color: 'rgba(255,255,255,0.8)',
padding: [0, 0, 0, -20],
fontSize: 14
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#2D4377',
opacity: 0.5
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#2D4377',
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.8)',
fontSize: 14
}
},
data:[
'0','3','6','9','12','15','18'
],
}, {
show: true,
name: '',
min: 0,
max: 18,
splitNumber:3,
nameTextStyle: {
align: 'left',
color: 'rgba(255,255,255,0.8)',
padding: [0, 0, 0, 10],
fontSize: 14
},
splitLine: { show: false },
axisLine: { show: true },
axisTick: { show: false },
axisLabel: {
textStyle: { fontSize: 14, color: 'rgba(255,255,255,0.8)' }
},
data:[
'0%','3%','6%','9%','12%','15%','18%'
],
}],
legend: {
top: '5%',
right: '5%',
icon: 'rect',
itemWidth: 25,
itemHeight: 10,
textStyle: {
color: '#fff',
fontSize: 14
},
lineStyle:{
show:false,
color:"#00E4BB",
},
data:[{
name:'增收金额',
itemStyle:{
color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00E4BB' // 0% 处的颜色
}, {
offset: 1,
color: '#003B4E' // 100% 处的颜色
}], false)
},
},
{
name:'增涨率',
itemStyle:{
color:"#755400"
}
}],
itemGap: 12 // 设置间距
},
series: [
// 下半截柱状图
{
name: '增收金额',
type: 'bar',
barWidth: 12,
barGap: '-100%',
itemStyle: { // lenged文本
opacity: 1,
barBorderRadius: [13, 13, 13, 13],
color: function (params) {
var a = params.name.slice(0, 2)
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00E4BB' // 0% 处的颜色
}, {
offset: 1,
color: '#003B4E' // 100% 处的颜色
}], false)
}
},
data: data1
},
{
'name': '',
'type': 'pictorialBar',
'symbolSize': [12, 12],
'symbolOffset': [0, -4],
'z': 5,
itemStyle: {
opacity: 1,
color: function (params) {
var a = params.name.slice(0, 2)
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00E4BB' // 0% 处的颜色
}, {
offset: 1,
color: '#00E4BB30' // 100% 处的颜色
}], false)
}
},
'symbolPosition': 'end',
'data': data1
},
{
name: '增涨率',
'z': 9,
yAxisIndex: 1,
type: 'line',
data: data2,
symbol:"image://data:image/png;base64,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",
symbolSize: [20, 20],
symbolOffset:['0',0],
lineStyle: {
normal: {
width: 3,
color: '#FF9B61' // 线条颜色
},
borderColor: '#FF9B61'
},
},
{
name: '',
type: 'bar',
barWidth: 12,
barGap: '-100%',
z: 0,
itemStyle: {
color: '#163F7A',
opacity: .7,
},
data: [18, 18, 18, 18, 18, 18,18, 18, 18, 18, 18, 18]
}
]
}
// option && myChart3.setOption(option);
// if (option && typeof option === "object") {
// myChart3.setOption(option, true);
// refreshChart(myChart3,option);
// var index3 = 0; //播放所在下标
// var mTime = setInterval(function () {
// myChart3.dispatchAction({
// type: 'showTip',
// seriesIndex: 0,
// dataIndex: index3
// });
// index3++;
// if (index3 >= 6) {
// //console.log('data4', fxdata.length)
// index3 = 0;
// //console.log(fxdata)
// }
// }, 2600);
// }
export default options;

70
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/monthlyAnalysis/index.vue
View File

@ -0,0 +1,70 @@
<template>
<div class='congestion'>
<WgtTitle :title="'增收金额月分析'"></WgtTitle>
<div class="board">
<div class="charts" id="monthlyAnalysis"></div>
</div>
</div>
</template>
<script>
import WgtTitle from "../../../../perception/widgets/title";
import * as echarts from "echarts";
import chartsStatistics from "./assets/charts";
export default {
name: 'MonthlyAnalysis',
components: {
WgtTitle
},
data() {
return {
}
},
created() {
},
methods: {
},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('monthlyAnalysis'));
myChart.setOption(chartsStatistics);
});
});
},
}
</script>
<style lang='scss' scoped>
.congestion {
width: 100%;
display: flex;
flex-direction: column;
.board{
height:230px;
width: 100%;
padding: 0px 20px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px;
opacity: 0.8;
border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}
}
.charts {
height:205px;
width: 100%;
}
</style>

165
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/roadNetworkTraffic/index.vue
View File

@ -0,0 +1,165 @@
<template>
<div class='congestion'>
<WgtTitle :title="'路网交通量'"></WgtTitle>
<div class="board">
<div class="cont-l" >
<div class="top-cont" >
<span class="titl-t1">{{ '198.8' }}</span><span class="unit">万辆</span>
</div>
<div class="text-cont" >
今日(截止到当前）
</div>
</div>
<div class="cont-l" >
<div class="top-cont" >
<span class="titl-t2" >{{ '254.1' }}</span><span class="unit">万辆</span>
</div>
<div class="text-cont" >
昨日
</div>
</div>
<div class="cont-l" >
<div class="top-cont" >
<span class="titl-t3" >{{ '104,404.1' }}</span><span class="unit">万辆</span>
</div>
<div class="text-cont" >
本年度
</div>
</div>
</div>
</div>
</template>
<script>
import WgtTitle from "../../../../perception/widgets/title";
import * as echarts from "echarts";
export default {
name: 'roadNetworkTraffic',
components: {
WgtTitle
},
data() {
return {
}
},
created() {
},
methods: {
},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
});
});
},
}
</script>
<style lang='scss' scoped>
.congestion {
width: 100%;
.board{
height:138px;
width: 100%;
padding: 0px 20px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px;
opacity: 0.8;
border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
display: flex;
justify-content: space-between;
align-items: center;
.cont-l {
display: inline-flex;
max-width:172px;
width: 33%;
margin-right:15px;
height:80px;
position: relative;
border-radius: 12px;
background: linear-gradient(180deg, rgba(1,139,182,0) 0%, #1FCAF135 100%);
flex-direction: column;
.top-cont {
flex-direction: row;
display: inline-flex;
width:100%;
height:50%;
font-family: PangMenZhengDao, PangMenZhengDao;
font-weight: 400;
color: #FFFFFF;
justify-content: center;
align-items: center;
.titl-t1 {
display: inline-flex;
font-size: 20px !important;
color: #00D1FF;
margin-right:10px;
}
.titl-t2 {
display: inline-flex;
font-size: 20px !important;
color: #FFDB82;
margin-right:10px;
}
.titl-t3 {
display: inline-flex;
font-size: 20px !important;
color: #00EBC1;
margin-right:10px;
}
.unit {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #ffffff88;
}
}
.text-cont {
flex-direction: row;
display: inline-flex;
width:100%;
height:50%;
font-size: 18px !important;
justify-content: center;
align-items: center;
font-family: PangMenZhengDao, PangMenZhengDao;
font-weight: 400;
}
}
.cont-l:last-child {
margin-right:0px;
}
.cont-l::after {
content: "";
position: absolute;
left:0;
bottom:-1px;
width:100%;
height:2px;
background: linear-gradient(90deg, rgba(81,181,255,0) 3%, #51B5FF 49%, rgba(81,181,255,0) 100%);
}
}
}
.charts {
height:158px;
width: 100%;
}
</style>

165
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/truckLaneTolls/index.vue
View File

@ -0,0 +1,165 @@
<template>
<div class='congestion'>
<WgtTitle :title="'货车车道通行费'"></WgtTitle>
<div class="board">
<div class="cont-l" >
<div class="top-cont" >
<span class="titl-t1">{{ '3,886.9' }}</span><span class="unit">万辆</span>
</div>
<div class="text-cont" >
今日(截止到当前）
</div>
</div>
<div class="cont-l" >
<div class="top-cont" >
<span class="titl-t2" >{{ '5,422.0' }}</span><span class="unit">万辆</span>
</div>
<div class="text-cont" >
昨日
</div>
</div>
<div class="cont-l" >
<div class="top-cont" >
<span class="titl-t3" >{{ '1,896.130.1' }}</span><span class="unit">万辆</span>
</div>
<div class="text-cont" >
本年度
</div>
</div>
</div>
</div>
</template>
<script>
import WgtTitle from "../../../../perception/widgets/title";
import * as echarts from "echarts";
export default {
name: 'TruckLaneTolls',
components: {
WgtTitle
},
data() {
return {
}
},
created() {
},
methods: {
},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
});
});
},
}
</script>
<style lang='scss' scoped>
.congestion {
width: 100%;
.board{
height:138px;
width: 100%;
padding: 0px 20px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px;
opacity: 0.8;
border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
display: flex;
justify-content: space-between;
align-items: center;
.cont-l {
display: inline-flex;
max-width:172px;
width: 33%;
margin-right:15px;
height:80px;
position: relative;
border-radius: 12px;
background: linear-gradient(180deg, rgba(1,139,182,0) 0%, #1FCAF135 100%);
flex-direction: column;
.top-cont {
flex-direction: row;
display: inline-flex;
width:100%;
height:50%;
font-family: PangMenZhengDao, PangMenZhengDao;
font-weight: 400;
color: #FFFFFF;
justify-content: center;
align-items: center;
.titl-t1 {
display: inline-flex;
font-size: 20px !important;
color: #00D1FF;
margin-right:5px;
}
.titl-t2 {
display: inline-flex;
font-size: 20px !important;
color: #FFDB82;
margin-right:5px;
}
.titl-t3 {
display: inline-flex;
font-size: 20px !important;
color: #00EBC1;
margin-right:5px;
}
.unit {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #ffffff88;
}
}
.text-cont {
flex-direction: row;
display: inline-flex;
width:100%;
height:50%;
font-size: 18px !important;
justify-content: center;
align-items: center;
font-family: PangMenZhengDao, PangMenZhengDao;
font-weight: 400;
}
}
.cont-l:last-child {
margin-right:0px;
}
.cont-l::after {
content: "";
position: absolute;
left:0;
bottom:-1px;
width:100%;
height:2px;
background: linear-gradient(90deg, rgba(81,181,255,0) 3%, #51B5FF 49%, rgba(81,181,255,0) 100%);
}
}
}
.charts {
height:158px;
width: 100%;
}
</style>

165
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/vehicleTolls/index.vue
View File

@ -0,0 +1,165 @@
<template>
<div class='congestion'>
<WgtTitle :title="'车辆通行费'"></WgtTitle>
<div class="board">
<div class="cont-l" >
<div class="top-cont" >
<span class="titl-t1">{{ '6,188.6' }}</span><span class="unit">万辆</span>
</div>
<div class="text-cont" >
今日(截止到当前）
</div>
</div>
<div class="cont-l" >
<div class="top-cont" >
<span class="titl-t2" >{{ '8,561.7' }}</span><span class="unit">万辆</span>
</div>
<div class="text-cont" >
昨日
</div>
</div>
<div class="cont-l" >
<div class="top-cont" >
<span class="titl-t3" >{{ '3,351.327.1' }}</span><span class="unit">万辆</span>
</div>
<div class="text-cont" >
本年度
</div>
</div>
</div>
</div>
</template>
<script>
import WgtTitle from "../../../../perception/widgets/title";
import * as echarts from "echarts";
export default {
name: 'VehicleTolls',
components: {
WgtTitle
},
data() {
return {
}
},
created() {
},
methods: {
},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
});
});
},
}
</script>
<style lang='scss' scoped>
.congestion {
width: 100%;
.board{
height:138px;
width: 100%;
padding: 0px 20px;
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
border-radius: 5px 5px 5px 5px;
opacity: 0.8;
border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
display: flex;
justify-content: space-between;
align-items: center;
.cont-l {
display: inline-flex;
max-width:172px;
width: 33%;
margin-right:15px;
height:80px;
position: relative;
border-radius: 12px;
background: linear-gradient(180deg, rgba(1,139,182,0) 0%, #1FCAF135 100%);
flex-direction: column;
.top-cont {
flex-direction: row;
display: inline-flex;
width:100%;
height:50%;
font-family: PangMenZhengDao, PangMenZhengDao;
font-weight: 400;
color: #FFFFFF;
justify-content: center;
align-items: center;
.titl-t1 {
display: inline-flex;
font-size: 20px !important;
color: #00D1FF;
margin-right:5px;
}
.titl-t2 {
display: inline-flex;
font-size: 20px !important;
color: #FFDB82;
margin-right:5px;
}
.titl-t3 {
display: inline-flex;
font-size: 20px !important;
color: #00EBC1;
margin-right:5px;
}
.unit {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #ffffff88;
}
}
.text-cont {
flex-direction: row;
display: inline-flex;
width:100%;
height:50%;
font-size: 18px !important;
justify-content: center;
align-items: center;
font-family: PangMenZhengDao, PangMenZhengDao;
font-weight: 400;
}
}
.cont-l:last-child {
margin-right:0px;
}
.cont-l::after {
content: "";
position: absolute;
left:0;
bottom:-1px;
width:100%;
height:2px;
background: linear-gradient(90deg, rgba(81,181,255,0) 3%, #51B5FF 49%, rgba(81,181,255,0) 100%);
}
}
}
.charts {
height:158px;
width: 100%;
}
</style>

196
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/index.vue
View File

@ -0,0 +1,196 @@
<template>
<div class='TrafficFlow'>
<section class="foot">
<div class="content" >
<div class="content-l" >
<RoadNetwork />
<LaneTolls />
</div>
<div class="content-l" >
<VehicleTolls />
<TruckLaneTolls />
</div>
<RoadSectionTolls class="content-r" />
</div>
</section>
<section class="foot">
<div class="content " style="position: relative;top:-10px;" >
<AccessAnalysis class="content-m" />
<AuxiliaryFlowcharts class="content-rm" />
</div>
</section>
<section class="foot">
<div class="content " >
<MonthlyAnalysis class="content-mi" />
<DaylyAnalysis class="content-mi" />
</div>
</section>
</div>
</template>
<script>
import RoadNetwork from './components/roadNetworkTraffic';
import LaneTolls from './components/laneTolls';
import VehicleTolls from './components/vehicleTolls';
import TruckLaneTolls from './components/truckLaneTolls';
import RoadSectionTolls from './components/RoadSectionTolls';
import AccessAnalysis from './components/accessAnalysis';
import AuxiliaryFlowcharts from './components/auxiliaryFlowcharts';
import MonthlyAnalysis from './components/monthlyAnalysis';
import DaylyAnalysis from './components/daylyAnalysis';
export default {
name: 'publicService',
components: {
RoadNetwork,
LaneTolls,
VehicleTolls,
TruckLaneTolls,
RoadSectionTolls,
AccessAnalysis,
AuxiliaryFlowcharts,
MonthlyAnalysis,
DaylyAnalysis,
},
data(){
return {
activeName:"first"
}
},
methods:{
changeTabs(){
}
}
}
</script>
<style lang='scss' scoped>
::v-deep .el-tabs__item{
display: inline-flex;
justify-content: center;
font-size: 16px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
min-width:128px;
position: relative;
left:10px;
}
::v-deep .el-tabs__active-bar {
min-width:128px;
}
::v-deep .el-tabs__nav-wrap::after {
background-color: #133242;
opacity: 0.1;
}
.footTabs {
display: inline;
width:100%;
}
.TrafficFlow {
width: 100%;
height: 100%;
position: relative;
z-index: 6;
color: white;
padding-top: 15px;
.header-shot{
width: 98%;
margin: auto;
margin-top: 15px;
height:160px;
}
.content {
width: 100%;
margin: auto;
display: flex;
flex: 1;
pointer-events: none;
margin-top: 0px;
>div {
pointer-events: auto;
}
.content-l {
width: calc(32.2%);
margin-right:20px;
display: inline-flex;
flex-direction: column;
>div {
margin-bottom:15px;
}
}
.content-r {
width: calc(33%);
display: inline-flex;
}
.content-rm {
width: calc(33%);
margin-right:10px;
}
.content-mi {
width: calc(50%);
margin-right:20px;
}
.content-mi:last-child {
margin-right:10px;
}
.content-m {
display: inline-flex;
width: 66%;
margin-right:20px;
}
}
.foot{
width: 98%;
margin: auto;
display: flex;
justify-content: space-between;
flex: 1;
pointer-events: none;
margin-top: 8px;
>div {
pointer-events: auto;
}
.foot-w {
width:100%;
}
.foot-l {
width: 726px;
}
.foot-m {
width: 613px;
}
.foot-r {
width: 493px;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save