yyl
1 year ago
16 changed files with 3091 additions and 0 deletions
@ -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 |
||||
@ -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> |
||||
|
|
||||
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
@ -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> |
||||
|
|
||||
@ -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> |
||||
|
|
||||
@ -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; |
||||
@ -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> |
||||
|
|
||||
@ -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> |
||||
|
|
||||
@ -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; |
||||
@ -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> |
||||
|
|
||||
@ -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> |
||||
|
|
||||
@ -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> |
||||
|
|
||||
@ -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> |
||||
|
|
||||
@ -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> |
||||
|
|
||||
Loading…
Reference in new issue