yyl
1 year ago
48 changed files with 4296 additions and 50 deletions
@ -0,0 +1,377 @@ |
|||
import * as echarts from "echarts"; |
|||
|
|||
let xData = [ |
|||
"1月", |
|||
"2月", |
|||
"3月", |
|||
"4月", |
|||
"5月", |
|||
"6月", |
|||
"7月", |
|||
"8月", |
|||
"9月", |
|||
"10月", |
|||
"11月", |
|||
"12月" |
|||
]; |
|||
let data1 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800]; |
|||
let data2= [120, 340, 750, 600, 400, 700, 900, 200, 540, 320, 370, 500]; |
|||
let data3 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800]; |
|||
let options = { |
|||
tooltip: { |
|||
show:false, |
|||
trigger: "axis", |
|||
axisPointer: { |
|||
// 坐标轴指示器，坐标轴触发有效
|
|||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|||
}, |
|||
textStyle: { |
|||
color: "#fff", |
|||
fontSize: 14, |
|||
}, |
|||
backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色
|
|||
borderColor: "rgba(3, 31, 71, .0)", |
|||
formatter: "健康监测<br>{b1}：{c1}人", |
|||
}, |
|||
grid: { |
|||
left: "2%", |
|||
right: "4%", |
|||
top: "5%", |
|||
bottom: "5%", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
data: xData, |
|||
show: true, |
|||
axisTick: { |
|||
show: false, |
|||
lineStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#1C82C5", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
interval: 0, |
|||
align: "center", |
|||
rotate: "1", |
|||
margin: "20", |
|||
textStyle: { |
|||
fontSize: 12, |
|||
color: "#50A2C1", |
|||
}, |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
min: 0, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#1C82C5", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "rgba(28, 130, 197, .3)", |
|||
type: "solid", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
color: "#DEEBFF", |
|||
textStyle: { |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
legend: { |
|||
// orient: 'vertical',
|
|||
icon: "circle", |
|||
itemHeight: 6, |
|||
itemWidth: 6, |
|||
top: "0%", |
|||
x: "80%", |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
|
|||
data:[ |
|||
{ |
|||
name:"交通特征", |
|||
itemStyle:{ |
|||
color:'#51BFA4', |
|||
}, |
|||
}, |
|||
{ |
|||
name:"饱和度", |
|||
itemStyle:{ |
|||
color:'#08BAF4', |
|||
}, |
|||
}, |
|||
{ |
|||
name:"拥挤度", |
|||
itemStyle:{ |
|||
color:'#E2BA74', |
|||
}, |
|||
} |
|||
], |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "饱和度", |
|||
type: "bar", |
|||
barWidth: "10px", |
|||
selectedMode:false, |
|||
select:{ |
|||
itemStyle:{ |
|||
opacity: 1, |
|||
color: function (params) { |
|||
var a = params; |
|||
|
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#1AC5FD", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#003B4E", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
// lenged文本
|
|||
opacity: 0.6, |
|||
color: function (params) { |
|||
var a = params.name; |
|||
console.log("==========a=============",a); |
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#1AC5FD", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#003B4E", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
data: data2, |
|||
}, |
|||
{ |
|||
name: "", |
|||
type: "scatter", |
|||
emphasis: { |
|||
scale: false |
|||
}, |
|||
symbol: |
|||
"image://data:image/png;base64,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", |
|||
symbolSize: [26, 26], |
|||
symbolOffset:['-85%',0], |
|||
itemStyle: { |
|||
color: "#FFF", |
|||
shadowColor: "rgba(0, 255, 254, 0.53)", |
|||
shadowBlur: 5, |
|||
borderWidth: 1, |
|||
opacity: 1 |
|||
}, |
|||
z: 1, |
|||
zlevel: 10, |
|||
left:'-100%', |
|||
data: data2, |
|||
animationDelay: 100 |
|||
}, |
|||
// 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%)
|
|||
{ |
|||
name: "交通特征", |
|||
type: "bar", |
|||
barWidth: "10px", |
|||
barGap: "120%", |
|||
selectedMode:false, |
|||
select:{ |
|||
itemStyle:{ |
|||
opacity: 1, |
|||
color: function (params) { |
|||
var a = params; |
|||
|
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#00E4BB53", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#00E4BB53", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
// lenged文本
|
|||
opacity: 0.6, |
|||
color: function (params) { |
|||
var a = params.name; |
|||
console.log("==========a=============",a); |
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#00E4BB", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#00E4BB00", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
data: data1, |
|||
}, |
|||
// 进度条的小圆圈
|
|||
{ |
|||
name: "", |
|||
type: "scatter", |
|||
emphasis: { |
|||
scale: false |
|||
}, |
|||
symbol: |
|||
"image://data:image/png;base64,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", |
|||
symbolSize: [26, 26], |
|||
symbolOffset:['1%',0], |
|||
itemStyle: { |
|||
color: "#FFF", |
|||
shadowColor: "#00E4BB53", |
|||
shadowBlur: 5, |
|||
borderWidth: 1, |
|||
opacity: 1 |
|||
}, |
|||
z: 2, |
|||
zlevel: 10, |
|||
left:10, |
|||
data: data1, |
|||
animationDelay: 500 |
|||
}, |
|||
{ |
|||
name: "拥挤度", |
|||
type: "bar", |
|||
barWidth: "10px", |
|||
selectedMode:false, |
|||
select:{ |
|||
itemStyle:{ |
|||
opacity: 1, |
|||
color: function (params) { |
|||
var a = params; |
|||
|
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#1AC5FD", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#003B4E", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
// lenged文本
|
|||
opacity: 0.6, |
|||
color: function (params) { |
|||
var a = params.name; |
|||
console.log("==========a=============",a); |
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#FCBE39", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#FCBE3900", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
data: data2, |
|||
}, |
|||
{ |
|||
name: "", |
|||
type: "scatter", |
|||
emphasis: { |
|||
scale: false |
|||
}, |
|||
symbol: |
|||
"image://data:image/png;base64,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", |
|||
symbolSize: [26, 26], |
|||
symbolOffset:['85%',0], |
|||
itemStyle: { |
|||
color: "#FCBE39", |
|||
shadowColor: "#FCBE3953", |
|||
shadowBlur: 5, |
|||
borderWidth: 1, |
|||
opacity: 1 |
|||
}, |
|||
z: 1, |
|||
zlevel: 10, |
|||
left:'-100%', |
|||
data: data2, |
|||
animationDelay: 100 |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
|
|||
export default options; |
|||
@ -0,0 +1,183 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'指标变化情况'"></WgtTitle> |
|||
<div class="board"> |
|||
<div id="ChangesIndictors" > |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import WgtTitle from '../../../../../widgets/title' |
|||
import * as echarts from "echarts"; |
|||
import chartsStatistics from './assets/charts3'; |
|||
|
|||
export default { |
|||
name: 'ChangesIndictors', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
tableData: [{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
selectItem(index){ |
|||
this.selectIndex = index; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
|
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
var myChart = echarts.init(document.getElementById('ChangesIndictors')); |
|||
myChart.setOption(chartsStatistics); |
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
|
|||
.showClass { |
|||
color:#00EBC1; |
|||
} |
|||
|
|||
::v-deep .el-table .cell { |
|||
padding-left:0px !important; |
|||
} |
|||
|
|||
::v-deep .el-table .el-table__header-wrapper th { |
|||
background-color: #064258 !important; |
|||
color:#00D1FF; |
|||
border-color: #064258 !important; |
|||
border:0px !important; |
|||
font-size:12px !important; |
|||
} |
|||
|
|||
::v-deep .el-table { |
|||
border:0px !important; |
|||
background-color: transparent; |
|||
font-size:12px !important; |
|||
} |
|||
|
|||
::v-deep .el-table__body-wrapper { |
|||
background-color: #064258; |
|||
color: #fff; |
|||
} |
|||
|
|||
::v-deep .el-table tr:hover td { |
|||
background: #1b2528 !important; |
|||
color:#00D1FF; |
|||
} |
|||
|
|||
::v-deep .el-table tr:nth-child(odd) td{ |
|||
background-color: #13272F ; |
|||
border:0px !important; |
|||
} |
|||
::v-deep .el-table tr:nth-child(even) td{ |
|||
border:0px !important; |
|||
} |
|||
|
|||
::v-deep .el-table tr { |
|||
background-color: #133242 !important; |
|||
border-collapse:0; |
|||
border:0px !important; |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
.congestion { |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 310px; |
|||
flex-direction: column; |
|||
|
|||
.board{ |
|||
height: 280px; |
|||
width: 100%; |
|||
padding: 0px 0px; |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-direction: row; |
|||
margin-top:20px; |
|||
|
|||
background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #064258 93%); |
|||
|
|||
#ChangesIndictors { |
|||
display: inline-flex; |
|||
height: 240px; |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
.charts { |
|||
height:180px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,137 @@ |
|||
import * as echarts from "echarts"; |
|||
var options = { |
|||
|
|||
color: ["#07A3FB"], |
|||
grid: { |
|||
left: "2%", |
|||
right: "5%", |
|||
bottom: "10%", |
|||
top: "10%", |
|||
containLabel: true, |
|||
}, |
|||
legend: { |
|||
show:false, |
|||
icon: 'rect', |
|||
top: '0%', |
|||
right: '5%', |
|||
data: ['实时数据'], |
|||
itemWidth:18, |
|||
itemHeight: 5, |
|||
itemGap: 30, |
|||
itemStyle:{ |
|||
color:"#FFD15C", |
|||
}, |
|||
textStyle: { |
|||
fontSize: 12, |
|||
color: '#fff', |
|||
padding: [0, 0, 0, 10], |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#07A3FB", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
// interval:0,
|
|||
color: "#BDD8FB", |
|||
fontSize: 12, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
data: [ |
|||
"1月", |
|||
"2月", |
|||
"3月", |
|||
"4月", |
|||
"5月", |
|||
"6月", |
|||
"7月", |
|||
"8月", |
|||
"9月", |
|||
"10月", |
|||
"11月", |
|||
"12月", |
|||
], |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
min: 0, |
|||
max:800, |
|||
minInterval: 100, |
|||
nameTextStyle: { |
|||
fontSize: 12, |
|||
color: "#BDD8FB", |
|||
align: "center", |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: "#07A3FB", |
|||
// type: 'dashed', // dotted 虚线
|
|||
}, |
|||
}, |
|||
splitArea: { show: false }, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 12, |
|||
fontFamily: "Bebas", |
|||
color: "#BDD8FB", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: "line", |
|||
// symbol: "none",
|
|||
showSymbol: false, |
|||
smooth: true, // 是否曲线
|
|||
name: "实时数据", // 图例对应类别
|
|||
data: [112, 122, 723, 623, 530, 612, 626,728, 531, 423 ,625, 423, 423], // 纵坐标数据
|
|||
lineStyle :{ |
|||
color:"#07A3FB" |
|||
}, |
|||
areaStyle: { |
|||
// 区域颜色
|
|||
// color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|||
// {
|
|||
// offset: 0,
|
|||
// color: "#5090FF",
|
|||
// },
|
|||
// {
|
|||
// offset: 1,
|
|||
// color: "#1057E5",
|
|||
// },
|
|||
// ]),
|
|||
color: { |
|||
type: 'linear', |
|||
x: 0, //右
|
|||
y: 0, //下
|
|||
x2: 0, //左
|
|||
y2: 1, //上
|
|||
colorStops: [ |
|||
{ |
|||
offset: 0.1, |
|||
color: '#07A3FB99' // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
opacity:0.01, |
|||
color: '#07A3FB00' // 100% 处的颜色
|
|||
} |
|||
] |
|||
}, |
|||
}, |
|||
}, |
|||
|
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
@ -0,0 +1,76 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'近一年交通组成特征指数最大值'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts" id="composeFeatures"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import WgtTitle from '../../../../../widgets/title' |
|||
import * as echarts from "echarts"; |
|||
import chartsStatistics from "./assets/charts"; |
|||
export default { |
|||
name: 'ComposeFeatures', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
myChart:null, |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
reiszeChart(){ |
|||
this.$nextTick(() => { |
|||
if ( this.myChart ) { |
|||
this.myChart.resize(); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
update(){ |
|||
|
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
this.myChart = echarts.init(document.getElementById('composeFeatures')); |
|||
this.myChart.setOption(chartsStatistics); |
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
.board{ |
|||
height:150px; |
|||
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; |
|||
|
|||
} |
|||
} |
|||
.charts { |
|||
height:120px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,277 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'指标变化情况'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="textStr" > |
|||
<div class="textbar action" > |
|||
拥挤度 |
|||
</div> |
|||
<div class="textbar" > |
|||
饱和度 |
|||
</div> |
|||
<div class="textbar" > |
|||
交通组成特征指数 |
|||
</div> |
|||
</div> |
|||
<div class="bodySort" > |
|||
<div v-for="(it,index) in tableData" class="sortItem" > |
|||
<span class="barTitle"> |
|||
TOP{{ index + 1 }} |
|||
</span> |
|||
<div class="text" > |
|||
{{ it.name }} |
|||
</div> |
|||
<div class="lineHight" > |
|||
<div class="inner" :style="{width:it.num/count * 100 + '%'}" > |
|||
|
|||
</div> |
|||
</div> |
|||
<span class="num"> |
|||
{{ it.num }} |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import WgtTitle from '../../../../../widgets/title' |
|||
import * as echarts from "echarts"; |
|||
|
|||
|
|||
export default { |
|||
name: 'CongestionIndicator', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
count:2000, |
|||
tableData: [{ |
|||
name:"大学城-长清", |
|||
num:1036, |
|||
},{ |
|||
name:"大学城-长清", |
|||
num:1036, |
|||
}, |
|||
{ |
|||
name:"大学城-长清", |
|||
num:1036, |
|||
}, |
|||
{ |
|||
name:"大学城-长清", |
|||
num:1036, |
|||
}, |
|||
{ |
|||
name:"大学城-长清", |
|||
num:1036, |
|||
}, |
|||
{ |
|||
name:"大学城-长清", |
|||
num:1036, |
|||
}, |
|||
{ |
|||
name:"大学城-长清", |
|||
num:1036, |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
selectItem(index){ |
|||
this.selectIndex = index; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
|
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
var myChart = echarts.init(document.getElementById('ChangesIndictors')); |
|||
myChart.setOption(chartsStatistics); |
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
|
|||
.showClass { |
|||
color:#00EBC1; |
|||
} |
|||
|
|||
::v-deep .el-table .cell { |
|||
padding-left:0px !important; |
|||
} |
|||
|
|||
::v-deep .el-table .el-table__header-wrapper th { |
|||
background-color: #064258 !important; |
|||
color:#00D1FF; |
|||
border-color: #064258 !important; |
|||
border:0px !important; |
|||
font-size:12px !important; |
|||
} |
|||
|
|||
::v-deep .el-table { |
|||
border:0px !important; |
|||
background-color: transparent; |
|||
font-size:12px !important; |
|||
} |
|||
|
|||
::v-deep .el-table__body-wrapper { |
|||
background-color: #064258; |
|||
color: #fff; |
|||
} |
|||
|
|||
::v-deep .el-table tr:hover td { |
|||
background: #1b2528 !important; |
|||
color:#00D1FF; |
|||
} |
|||
|
|||
::v-deep .el-table tr:nth-child(odd) td{ |
|||
background-color: #13272F ; |
|||
border:0px !important; |
|||
} |
|||
::v-deep .el-table tr:nth-child(even) td{ |
|||
border:0px !important; |
|||
} |
|||
|
|||
::v-deep .el-table tr { |
|||
background-color: #133242 !important; |
|||
border-collapse:0; |
|||
border:0px !important; |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
.congestion { |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 310px; |
|||
flex-direction: column; |
|||
|
|||
.board{ |
|||
height: 280px; |
|||
width: 100%; |
|||
padding: 0px 0px; |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
margin-top:20px; |
|||
|
|||
background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #064258 93%); |
|||
|
|||
.bodySort { |
|||
position: relative; |
|||
display: inline-block; |
|||
width:100%; |
|||
height:100%; |
|||
overflow: auto; |
|||
padding:20px 10px; |
|||
|
|||
>div:first-child { |
|||
.barTitle { |
|||
background: linear-gradient(180deg, #FF6969 0%, #FFB904 100%); |
|||
} |
|||
|
|||
.lineHight .inner { |
|||
background: linear-gradient(180deg, #FF6969 0%, #FFB904 100%); |
|||
} |
|||
} |
|||
|
|||
>div { |
|||
display: inline-flex; |
|||
width:95%; |
|||
height: 41px; |
|||
background: #0D517460; |
|||
border-radius: 0px 0px 0px 0px; |
|||
margin:5px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
align-items: center; |
|||
|
|||
|
|||
.barTitle { |
|||
position: relative; |
|||
display: inline-flex; |
|||
width: 48px; |
|||
height: 19px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
background: linear-gradient(180deg, #0BA7DA 0%, #61D8FF 100%); |
|||
border-radius: 6px 6px 6px 6px; |
|||
opacity: 1; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin:0 10px; |
|||
} |
|||
|
|||
.lineHight { |
|||
width: 60%; |
|||
height: 8px; |
|||
background: linear-gradient(180deg, #0BA7DA10 0%, #4FD3FF10 100%); |
|||
border-radius: 6px 6px 6px 6px; |
|||
opacity: 1; |
|||
margin:0 15px; |
|||
|
|||
> .inner { |
|||
display: inline-flex; |
|||
height:8px; |
|||
background: linear-gradient(180deg, #0BA7DA 0%, #61D8FF 100%); |
|||
border-radius: 6px 6px 6px 6px; |
|||
opacity: 1; |
|||
position: relative; |
|||
top:-7px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.textStr { |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:45px; |
|||
flex-direction: row; |
|||
|
|||
> div { |
|||
display: inline-flex; |
|||
min-width: 80px; |
|||
height: 26px; |
|||
background: linear-gradient(180deg, #005C7950 0%, #009BCC50 100%); |
|||
border-radius: 2px 2px 2px 2px; |
|||
opacity: 1; |
|||
color:#fff; |
|||
font-size: 12px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-left:20px; |
|||
padding:0 15px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.action { |
|||
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.charts { |
|||
height:180px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,137 @@ |
|||
import * as echarts from "echarts"; |
|||
var options = { |
|||
|
|||
color: ["#E29E37"], |
|||
grid: { |
|||
left: "2%", |
|||
right: "5%", |
|||
bottom: "10%", |
|||
top: "10%", |
|||
containLabel: true, |
|||
}, |
|||
legend: { |
|||
show:false, |
|||
icon: 'rect', |
|||
top: '0%', |
|||
right: '5%', |
|||
data: ['实时数据'], |
|||
itemWidth:18, |
|||
itemHeight: 5, |
|||
itemGap: 30, |
|||
itemStyle:{ |
|||
color:"#FFD15C", |
|||
}, |
|||
textStyle: { |
|||
fontSize: 12, |
|||
color: '#fff', |
|||
padding: [0, 0, 0, 10], |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#E29E37", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
// interval:0,
|
|||
color: "#BDD8FB", |
|||
fontSize: 12, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
data: [ |
|||
"1月", |
|||
"2月", |
|||
"3月", |
|||
"4月", |
|||
"5月", |
|||
"6月", |
|||
"7月", |
|||
"8月", |
|||
"9月", |
|||
"10月", |
|||
"11月", |
|||
"12月", |
|||
], |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
min: 0, |
|||
max:800, |
|||
minInterval: 100, |
|||
nameTextStyle: { |
|||
fontSize: 12, |
|||
color: "#BDD8FB", |
|||
align: "center", |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: "#E29E37", |
|||
// type: 'dashed', // dotted 虚线
|
|||
}, |
|||
}, |
|||
splitArea: { show: false }, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 12, |
|||
fontFamily: "Bebas", |
|||
color: "#BDD8FB", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: "line", |
|||
// symbol: "none",
|
|||
showSymbol: false, |
|||
smooth: true, // 是否曲线
|
|||
name: "实时数据", // 图例对应类别
|
|||
data: [112, 122, 723, 623, 530, 612, 626,728, 531, 423 ,625, 423, 423], // 纵坐标数据
|
|||
lineStyle :{ |
|||
color:"#E29E37" |
|||
}, |
|||
areaStyle: { |
|||
// 区域颜色
|
|||
// color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|||
// {
|
|||
// offset: 0,
|
|||
// color: "#5090FF",
|
|||
// },
|
|||
// {
|
|||
// offset: 1,
|
|||
// color: "#1057E5",
|
|||
// },
|
|||
// ]),
|
|||
color: { |
|||
type: 'linear', |
|||
x: 0, //右
|
|||
y: 0, //下
|
|||
x2: 0, //左
|
|||
y2: 1, //上
|
|||
colorStops: [ |
|||
{ |
|||
offset: 0.1, |
|||
color: '#E29E3799' // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
opacity:0.01, |
|||
color: '#E29E3700' // 100% 处的颜色
|
|||
} |
|||
] |
|||
}, |
|||
}, |
|||
}, |
|||
|
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
@ -0,0 +1,76 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'近一年拥挤度最大值'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts" id="Crowding"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import WgtTitle from '../../../../../widgets/title' |
|||
import * as echarts from "echarts"; |
|||
import chartsStatistics from "./assets/charts"; |
|||
export default { |
|||
name: 'Crowding', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
myChart:null, |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
reiszeChart(){ |
|||
this.$nextTick(() => { |
|||
if ( this.myChart ) { |
|||
this.myChart.resize(); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
update(){ |
|||
|
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
this.myChart = echarts.init(document.getElementById('Crowding')); |
|||
this.myChart.setOption(chartsStatistics); |
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
.board{ |
|||
height:150px; |
|||
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; |
|||
|
|||
} |
|||
} |
|||
.charts { |
|||
height:120px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,111 @@ |
|||
const value = [0,85] |
|||
const rate = value[1] + '%' |
|||
var options = { |
|||
title: { |
|||
text: rate, |
|||
left: 'center', |
|||
top: '30%', |
|||
itemGap:5, |
|||
textStyle: { |
|||
color: '#73FFC9', |
|||
fontSize: '22', |
|||
fontWeight: 600 |
|||
}, |
|||
subtext: '交通特征', |
|||
subtextStyle: { |
|||
color: '#fff', |
|||
fontSize: '12', |
|||
fontWeight: 600, |
|||
} |
|||
}, |
|||
angleAxis: { |
|||
max: 100, |
|||
// 隐藏刻度线
|
|||
show: false, |
|||
startAngle: 90, |
|||
}, |
|||
radiusAxis: { |
|||
type: 'category', |
|||
show: true, |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
}, |
|||
polar: { |
|||
radius: '150%' //图形大小
|
|||
}, |
|||
series: [ |
|||
// 最内刻度线
|
|||
{ |
|||
|
|||
type: "gauge", |
|||
radius: "85%", |
|||
clockwise: true, |
|||
startAngle: "90", |
|||
endAngle: "-269.9999", |
|||
splitNumber: 15, //线的条数
|
|||
pointer: { |
|||
show: false |
|||
}, |
|||
axisLine: { |
|||
show: false |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
tooltip: { |
|||
show: false |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
length: 2, |
|||
lineStyle: { |
|||
color: "#73FFC9", |
|||
width: 1 |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: false |
|||
} |
|||
},{ |
|||
type: 'bar', |
|||
polar: { |
|||
center: ['50%', '50%'], // 中心（圆心）坐标
|
|||
radius: '100%' //图形大小
|
|||
}, |
|||
coordinateSystem: 'polar', // 使用极坐标坐标系
|
|||
data: [value], |
|||
showBackground: true, |
|||
roundCap: true, |
|||
backgroundStyle: { |
|||
color: '#1A607750', |
|||
}, |
|||
radius: "100%", |
|||
barWidth: 10, |
|||
itemStyle: { |
|||
normal: { |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [{ |
|||
offset: 0, color: '#73FFC900' |
|||
}, { |
|||
offset: 1, color: '#73FFC9' |
|||
}], |
|||
global: false |
|||
} |
|||
} |
|||
}, |
|||
}] |
|||
} |
|||
|
|||
export default options; |
|||
@ -0,0 +1,111 @@ |
|||
const value = 76 |
|||
const rate = value + '%' |
|||
var options = { |
|||
title: { |
|||
text: rate, |
|||
left: 'center', |
|||
top: '30%', |
|||
itemGap:5, |
|||
textStyle: { |
|||
color: '#FFD25D', |
|||
fontSize: '22', |
|||
fontWeight: 600 |
|||
}, |
|||
subtext: '拥挤度', |
|||
subtextStyle: { |
|||
color: '#fff', |
|||
fontSize: '12', |
|||
fontWeight: 600, |
|||
} |
|||
}, |
|||
angleAxis: { |
|||
max: 100, |
|||
// 隐藏刻度线
|
|||
show: false, |
|||
startAngle: 90, |
|||
}, |
|||
radiusAxis: { |
|||
type: 'category', |
|||
show: true, |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
}, |
|||
polar: { |
|||
radius: '150%' //图形大小
|
|||
}, |
|||
series: [ |
|||
// 最内刻度线
|
|||
{ |
|||
|
|||
type: "gauge", |
|||
radius: "85%", |
|||
clockwise: true, |
|||
startAngle: "90", |
|||
endAngle: "-269.9999", |
|||
splitNumber: 15, //线的条数
|
|||
pointer: { |
|||
show: false |
|||
}, |
|||
axisLine: { |
|||
show: false |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
tooltip: { |
|||
show: false |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
length: 2, |
|||
lineStyle: { |
|||
color: "#FFD25D", |
|||
width: 1 |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: false |
|||
} |
|||
},{ |
|||
type: 'bar', |
|||
polar: { |
|||
center: ['50%', '50%'], // 中心（圆心）坐标
|
|||
radius: '100%' //图形大小
|
|||
}, |
|||
coordinateSystem: 'polar', // 使用极坐标坐标系
|
|||
data: [value], |
|||
showBackground: true, |
|||
roundCap: true, |
|||
backgroundStyle: { |
|||
color: '#1A607750', |
|||
}, |
|||
radius: "100%", |
|||
barWidth: 10, |
|||
itemStyle: { |
|||
normal: { |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [{ |
|||
offset: 0, color: '#FFD25D00' |
|||
}, { |
|||
offset: 1, color: '#FFD25D' |
|||
}], |
|||
global: false |
|||
} |
|||
} |
|||
}, |
|||
}] |
|||
} |
|||
|
|||
export default options; |
|||
@ -0,0 +1,111 @@ |
|||
const value = 56 |
|||
const rate = value + '%' |
|||
var options = { |
|||
title: { |
|||
text: rate, |
|||
left: 'center', |
|||
top: '30%', |
|||
itemGap:5, |
|||
textStyle: { |
|||
color: '#16ABFF', |
|||
fontSize: '22', |
|||
fontWeight: 600 |
|||
}, |
|||
subtext: '饱和度', |
|||
subtextStyle: { |
|||
color: '#fff', |
|||
fontSize: '12', |
|||
fontWeight: 600, |
|||
} |
|||
}, |
|||
angleAxis: { |
|||
max: 100, |
|||
// 隐藏刻度线
|
|||
show: false, |
|||
startAngle: 90, |
|||
}, |
|||
radiusAxis: { |
|||
type: 'category', |
|||
show: true, |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
}, |
|||
polar: { |
|||
radius: '150%' //图形大小
|
|||
}, |
|||
series: [ |
|||
// 最内刻度线
|
|||
{ |
|||
|
|||
type: "gauge", |
|||
radius: "85%", |
|||
clockwise: true, |
|||
startAngle: "90", |
|||
endAngle: "-269.9999", |
|||
splitNumber: 15, //线的条数
|
|||
pointer: { |
|||
show: false |
|||
}, |
|||
axisLine: { |
|||
show: false |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
tooltip: { |
|||
show: false |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
length: 2, |
|||
lineStyle: { |
|||
color: "#16ABFF", |
|||
width: 1 |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: false |
|||
} |
|||
},{ |
|||
type: 'bar', |
|||
polar: { |
|||
center: ['50%', '50%'], // 中心（圆心）坐标
|
|||
radius: '100%' //图形大小
|
|||
}, |
|||
coordinateSystem: 'polar', // 使用极坐标坐标系
|
|||
data: [value], |
|||
showBackground: true, |
|||
roundCap: true, |
|||
backgroundStyle: { |
|||
color: '#1A607750', |
|||
}, |
|||
radius: "100%", |
|||
barWidth: 10, |
|||
itemStyle: { |
|||
normal: { |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [{ |
|||
offset: 0, color: '#16ABFF00' |
|||
}, { |
|||
offset: 1, color: '#16ABFF' |
|||
}], |
|||
global: false |
|||
} |
|||
} |
|||
}, |
|||
}] |
|||
} |
|||
|
|||
export default options; |
|||
@ -0,0 +1,374 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'道路指标情况'"></WgtTitle> |
|||
<div class="board"> |
|||
<div id="roadChart1" > |
|||
|
|||
</div> |
|||
<div id="roadChart2" > |
|||
|
|||
</div> |
|||
<div id="roadChart3" > |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import WgtTitle from '../../../../../widgets/title' |
|||
import chartsStatistics from './assets/chart1'; |
|||
import chartsStatistics2 from './assets/chart2'; |
|||
import chartsStatistics3 from './assets/chart3'; |
|||
import * as echarts from "echarts"; |
|||
|
|||
export default { |
|||
name: 'RoadIndicators', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
tableData: [{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
selectItem(index){ |
|||
this.selectIndex = index; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
|
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
var myChart = echarts.init(document.getElementById('roadChart1')); |
|||
myChart.setOption(chartsStatistics); |
|||
var myChart2 = echarts.init(document.getElementById('roadChart2')); |
|||
myChart2.setOption(chartsStatistics2); |
|||
var myChart3 = echarts.init(document.getElementById('roadChart3')); |
|||
myChart3.setOption(chartsStatistics3); |
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
|
|||
.showClass { |
|||
color:#00EBC1; |
|||
} |
|||
|
|||
::v-deep .el-table .cell { |
|||
padding-left:0px !important; |
|||
} |
|||
|
|||
::v-deep .el-table .el-table__header-wrapper th { |
|||
background-color: #064258 !important; |
|||
color:#00D1FF; |
|||
border-color: #064258 !important; |
|||
border:0px !important; |
|||
font-size:12px !important; |
|||
} |
|||
|
|||
::v-deep .el-table { |
|||
border:0px !important; |
|||
background-color: transparent; |
|||
font-size:12px !important; |
|||
} |
|||
|
|||
::v-deep .el-table__body-wrapper { |
|||
background-color: #064258; |
|||
color: #fff; |
|||
} |
|||
|
|||
::v-deep .el-table tr:hover td { |
|||
background: #1b2528 !important; |
|||
color:#00D1FF; |
|||
} |
|||
|
|||
::v-deep .el-table tr:nth-child(odd) td{ |
|||
background-color: #13272F ; |
|||
border:0px !important; |
|||
} |
|||
::v-deep .el-table tr:nth-child(even) td{ |
|||
border:0px !important; |
|||
} |
|||
|
|||
::v-deep .el-table tr { |
|||
background-color: #133242 !important; |
|||
border-collapse:0; |
|||
border:0px !important; |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
.congestion { |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 188px; |
|||
flex-direction: column; |
|||
|
|||
.board{ |
|||
height: 150px; |
|||
width: 100%; |
|||
padding: 0px 0px; |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-direction: row; |
|||
margin-top:20px; |
|||
|
|||
background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #064258 93%); |
|||
|
|||
> div { |
|||
display: inline-flex; |
|||
width:33%; |
|||
height:100%; |
|||
position: relative; |
|||
top:-10px; |
|||
} |
|||
|
|||
.warningList { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
width:100%; |
|||
height:calc(100% - 40px); |
|||
|
|||
>div { |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:138px; |
|||
background: #133242; |
|||
border-radius: 2px 2px 2px 2px; |
|||
opacity: 1; |
|||
border: 1px solid; |
|||
border-image: linear-gradient(360deg, rgba(55, 231, 255, 1), rgba(55, 231, 255, 0)) 1 1; |
|||
overflow: hidden; |
|||
margin-top:20px; |
|||
padding:23px 29px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #37E7FF; |
|||
|
|||
>.left-w { |
|||
display: inline-flex; |
|||
width:40%; |
|||
height:100%; |
|||
flex-direction: column; |
|||
|
|||
.left-row { |
|||
margin:2px; |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:30px; |
|||
flex-direction: row; |
|||
|
|||
>.value { |
|||
color:#fff; |
|||
} |
|||
|
|||
.org { |
|||
font-size: 14px; |
|||
font-family: PangMenZhengDao, PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #F4A125 |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
>.right-w { |
|||
margin-left:30px; |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:100%; |
|||
flex-direction: column; |
|||
|
|||
.right-row { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.right-text { |
|||
color:#fff; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.weaterMain { |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
width:100%; |
|||
height: 40px; |
|||
|
|||
|
|||
.buttons { |
|||
width:100%; |
|||
height:38px; |
|||
>div { |
|||
display: inline-flex; |
|||
width:10%; |
|||
height:35px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 12px; |
|||
font-family: PangMenZhengDao, PangMenZhengDao; |
|||
font-weight: 800; |
|||
color: #FFFFFF; |
|||
z-index: 9; |
|||
} |
|||
|
|||
>div::after { |
|||
content: ""; |
|||
position: absolute; |
|||
display: inline-flex; |
|||
width: 55px; |
|||
height: 36px; |
|||
background: linear-gradient(180deg, #6557D7 0%, rgba(101,87,216,0) 100%); |
|||
border-radius: 50%; |
|||
opacity: 1; |
|||
z-index:-1; |
|||
} |
|||
|
|||
.redSel::after { |
|||
background: linear-gradient(180deg, #E73A14 0%, rgba(240,92,9,0) 100%); |
|||
} |
|||
|
|||
.yelSel::after { |
|||
background: linear-gradient(180deg, #FFFA79 0%, rgba(255,208,137,0) 100%); |
|||
} |
|||
|
|||
.bluSel::after { |
|||
background: linear-gradient(180deg, #121ADE 0%, rgba(40,18,228,0) 100%); |
|||
} |
|||
|
|||
.orgSel::after{ |
|||
background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,0) 100%); |
|||
} |
|||
} |
|||
|
|||
.weaterTitle::after { |
|||
content: ""; |
|||
position: absolute; |
|||
top:0px; |
|||
left:0px; |
|||
width:100%; |
|||
height:2px; |
|||
background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 1; |
|||
} |
|||
.weaterTitle::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top:38px; |
|||
left:0px; |
|||
width:100%; |
|||
height:2px; |
|||
background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 1; |
|||
} |
|||
|
|||
.weaterTitle { |
|||
position: relative; |
|||
display: inline-flex; |
|||
width: 277px; |
|||
height: 38px; |
|||
background: linear-gradient(269deg, rgba(55,231,255,0) 6%, rgba(55,231,255,0.6) 50%, rgba(55,231,255,0) 92%); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 1; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
>span.text { |
|||
display: inline-flex; |
|||
font-size: 16px; |
|||
font-family: PangMenZhengDao, PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
|
|||
.num { |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 22px; |
|||
font-family: PangMenZhengDao, PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #D9001B; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
.charts { |
|||
height:180px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,137 @@ |
|||
import * as echarts from "echarts"; |
|||
var options = { |
|||
|
|||
color: ["#32BB8A", "#01B3E4"], |
|||
grid: { |
|||
left: "2%", |
|||
right: "5%", |
|||
bottom: "10%", |
|||
top: "10%", |
|||
containLabel: true, |
|||
}, |
|||
legend: { |
|||
show:false, |
|||
icon: 'rect', |
|||
top: '0%', |
|||
right: '5%', |
|||
data: ['实时数据'], |
|||
itemWidth:18, |
|||
itemHeight: 5, |
|||
itemGap: 30, |
|||
itemStyle:{ |
|||
color:"#FFD15C", |
|||
}, |
|||
textStyle: { |
|||
fontSize: 12, |
|||
color: '#fff', |
|||
padding: [0, 0, 0, 10], |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#32BB8A", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
// interval:0,
|
|||
color: "#BDD8FB", |
|||
fontSize: 12, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
data: [ |
|||
"1月", |
|||
"2月", |
|||
"3月", |
|||
"4月", |
|||
"5月", |
|||
"6月", |
|||
"7月", |
|||
"8月", |
|||
"9月", |
|||
"10月", |
|||
"11月", |
|||
"12月", |
|||
], |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
min: 0, |
|||
max:800, |
|||
minInterval: 100, |
|||
nameTextStyle: { |
|||
fontSize: 12, |
|||
color: "#BDD8FB", |
|||
align: "center", |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: "#32BB8A", |
|||
// type: 'dashed', // dotted 虚线
|
|||
}, |
|||
}, |
|||
splitArea: { show: false }, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 12, |
|||
fontFamily: "Bebas", |
|||
color: "#BDD8FB", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: "line", |
|||
// symbol: "none",
|
|||
showSymbol: false, |
|||
smooth: true, // 是否曲线
|
|||
name: "实时数据", // 图例对应类别
|
|||
data: [112, 122, 723, 623, 530, 612, 626,728, 531, 423 ,625, 423, 423], // 纵坐标数据
|
|||
lineStyle :{ |
|||
color:"#32BB8A" |
|||
}, |
|||
areaStyle: { |
|||
// 区域颜色
|
|||
// color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|||
// {
|
|||
// offset: 0,
|
|||
// color: "#5090FF",
|
|||
// },
|
|||
// {
|
|||
// offset: 1,
|
|||
// color: "#1057E5",
|
|||
// },
|
|||
// ]),
|
|||
color: { |
|||
type: 'linear', |
|||
x: 0, //右
|
|||
y: 0, //下
|
|||
x2: 0, //左
|
|||
y2: 1, //上
|
|||
colorStops: [ |
|||
{ |
|||
offset: 0.1, |
|||
color: '#32BB8A99' // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
opacity:0.01, |
|||
color: '#32BB8A01' // 100% 处的颜色
|
|||
} |
|||
] |
|||
}, |
|||
}, |
|||
}, |
|||
|
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
@ -0,0 +1,76 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'近一年饱和度最大值'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts" id="temperatureTrend"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import WgtTitle from '../../../../../widgets/title' |
|||
import * as echarts from "echarts"; |
|||
import chartsStatistics from "./assets/charts"; |
|||
export default { |
|||
name: 'SaturationMax', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
myChart:null, |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
reiszeChart(){ |
|||
this.$nextTick(() => { |
|||
if ( this.myChart ) { |
|||
this.myChart.resize(); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
update(){ |
|||
|
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
this.myChart = echarts.init(document.getElementById('temperatureTrend')); |
|||
this.myChart.setOption(chartsStatistics); |
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
.board{ |
|||
height:150px; |
|||
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; |
|||
|
|||
} |
|||
} |
|||
.charts { |
|||
height:120px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,393 @@ |
|||
<template> |
|||
<div class="el-quarter-picker"> |
|||
<el-popover |
|||
v-model="visible" |
|||
:disabled="!canPopover" |
|||
:tabindex="null" |
|||
placement="bottom-start" |
|||
transition="el-zoom-in-top" |
|||
trigger="click"> |
|||
|
|||
<div class="el-date-picker"> |
|||
<div class="el-picker-panel__body"> |
|||
<div class="el-date-picker__header el-date-picker__header--bordered" style="margin:0px; line-height:30px"> |
|||
<button |
|||
type="button" |
|||
@click="clickLast" |
|||
aria-label="前一年" |
|||
class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"></button> |
|||
<span role="button" class="el-date-picker__header-label" @click="clickYear">{{ title }}</span> |
|||
<button |
|||
type="button" |
|||
@click="clickNext" |
|||
aria-label="后一年" |
|||
class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"></button> |
|||
</div> |
|||
<div class="el-picker-panel__content" style="margin:0px; width:100%"> |
|||
<table class="el-month-table" style=""> |
|||
<tbody> |
|||
<tr v-for="line in lineCount" :key="line"> |
|||
<td v-for="index in (line * 4 <= viewList.length ? 4 : viewList.length - (line - 1) * 4)" :key="index" :class="{ today: viewList[(line - 1) * 4 + index - 1].current, current: viewList[(line - 1) * 4 + index - 1].active }"> |
|||
<div><a class="cell" @click="clickItem(viewList[(line - 1) * 4 + index - 1])">{{ viewList[(line - 1) * 4 + index - 1].label }}</a></div> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-input |
|||
slot="reference" |
|||
@change="changeText" |
|||
@mouseenter.native="mouseEnter" |
|||
@mouseleave.native="mouseLeave" |
|||
:placeholder="placeholder" |
|||
v-model="text" |
|||
:size="size" |
|||
:readonly="!canEdit" |
|||
:disabled="disabled"> |
|||
<i slot="prefix" class="el-input__icon el-icon-date"></i> |
|||
<i slot="suffix" class="el-input__icon el-icon-circle-close" v-show="showClear" style="cursor:pointer" @click.stop="clear"></i> |
|||
</el-input> |
|||
</el-popover> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'ElQuarterPicker', |
|||
props: { |
|||
placeholder: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
size: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
readonly: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
clearable: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
editable: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
format: { |
|||
type: String, |
|||
default: 'yyyy年第Q季度' |
|||
}, |
|||
valueFormat: { |
|||
type: String, |
|||
default: 'yyyy-qq' |
|||
}, |
|||
value: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
model: { |
|||
prop: 'value', |
|||
event: 'change' |
|||
}, |
|||
watch: { |
|||
value(val) { |
|||
// console.log('change-------', val) |
|||
this.changeValue(val) |
|||
}, |
|||
readonly(val) { |
|||
this.canEdit = !val && this.editable |
|||
this.canPopover = !this.disabled && !val |
|||
}, |
|||
editable(val) { |
|||
this.canEdit = !this.readonly && val |
|||
}, |
|||
disabled(val) { |
|||
this.canPopover = !val && !this.readonly |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
showClear: false, // 控制清空按钮展示 |
|||
canEdit: true, // 是否可编辑 |
|||
canPopover: true, // 选择器弹出是否可用 |
|||
text: '', // 文本框值 |
|||
viewType: 1, // 视图类型，1季度，2年度 |
|||
viewYear: 0, // 当前年份 |
|||
viewList: [], // 数据列表 |
|||
lineCount: 0, // 数据行数 |
|||
title: '', // 选择器标题 |
|||
data: [0, 0] // 当前选择年度-季度 |
|||
} |
|||
}, |
|||
mounted() { |
|||
// console.log('mounted--------', this.value) |
|||
this.changeValue(this.value) |
|||
|
|||
// 设置文本框是否可编辑 |
|||
this.canEdit = !this.readonly && this.editable |
|||
this.canPopover = !this.disabled && !this.readonly |
|||
|
|||
// 监听按键(上下左右键可以切换季度) |
|||
document.onkeydown = (event) => { |
|||
if (this.visible) { |
|||
const data = [this.data[0], this.data[1]] |
|||
if (data[0] < 1 || data[1] < 1) { |
|||
// 以当前季度为标准 |
|||
const curDate = new Date() |
|||
data[0] = curDate.getFullYear() |
|||
data[1] = parseInt(curDate.getMonth() / 3) + 1 |
|||
} |
|||
if (event.code === 'ArrowLeft') { |
|||
// 上一个季度 |
|||
if (data[1] === 1) { |
|||
data[0] = data[0] - 1 |
|||
data[1] = 4 |
|||
} else { |
|||
data[1] = data[1] - 1 |
|||
} |
|||
} else if (event.code === 'ArrowRight') { |
|||
// 下一个季度 |
|||
if (data[1] === 4) { |
|||
data[0] = data[0] + 1 |
|||
data[1] = 1 |
|||
} else { |
|||
data[1] = data[1] + 1 |
|||
} |
|||
} else if (event.code === 'ArrowUp') { |
|||
// 上一年季度 |
|||
data[0] = data[0] - 1 |
|||
} else if (event.code === 'ArrowDown') { |
|||
// 下一年季度 |
|||
data[0] = data[0] + 1 |
|||
} else { |
|||
return |
|||
} |
|||
|
|||
// 超过年限的不处理 |
|||
if (data[0] < 1000 || data[0] > 9999) { |
|||
return |
|||
} |
|||
this.data = data |
|||
this.viewType = 1 |
|||
this.viewYear = data[0] |
|||
this.$emit('change', this.formatTo(data, this.valueFormat)) |
|||
} |
|||
} |
|||
}, |
|||
destroyed() { |
|||
document.onkeydown = null |
|||
}, |
|||
methods: { |
|||
// 季度文本变更 |
|||
changeText() { |
|||
if (this.checkFormat(this.format, this.text)) { |
|||
// 设置值 |
|||
this.formatFrom(this.text, this.format) |
|||
this.$emit('change', this.formatTo(this.data, this.valueFormat)) |
|||
} else { |
|||
// 输入了无效的格式，还原回原来的值 |
|||
if (this.data[0] < 1 || this.data[1] < 1) { |
|||
this.text = '' |
|||
} else { |
|||
this.text = this.formatTo(this.data, this.format) |
|||
} |
|||
} |
|||
this.visible = false |
|||
}, |
|||
// 鼠标进入 |
|||
mouseEnter() { |
|||
if (!this.disabled && !this.readonly && this.clearable && this.text !== '') { |
|||
this.showClear = true |
|||
} |
|||
}, |
|||
// 鼠标离开 |
|||
mouseLeave() { |
|||
if (!this.disabled && this.clearable) { |
|||
this.showClear = false |
|||
} |
|||
}, |
|||
// 清除季度 |
|||
clear() { |
|||
this.showClear = false |
|||
this.visible = false |
|||
this.$emit('change', '') |
|||
}, |
|||
// 季度值变更 |
|||
changeValue(val) { |
|||
this.viewType = 1 |
|||
if (val) { |
|||
// 反向格式化 |
|||
this.formatFrom(val, this.valueFormat) |
|||
this.text = this.formatTo(this.data, this.format) |
|||
this.viewYear = this.data[0] |
|||
} else { |
|||
this.text = '' |
|||
this.data = [0, 0] |
|||
this.viewYear = new Date().getFullYear() |
|||
} |
|||
this.initView() |
|||
}, |
|||
// 初始化视图数据 |
|||
initView() { |
|||
const list = [] |
|||
const curDate = new Date() |
|||
const curYear = curDate.getFullYear() |
|||
const curQuarter = parseInt(curDate.getMonth() / 3) + 1 |
|||
if (this.viewType === 1) { |
|||
let index = 0 |
|||
for (const i of '一二三四') { |
|||
index++ |
|||
const item = { label: '第' + i + '季度', year: this.viewYear, quarter: index, current: false, active: false } |
|||
if (this.viewYear === curYear && index === curQuarter) { |
|||
item.current = true |
|||
} else if (this.viewYear === this.data[0] && index === this.data[1]) { |
|||
item.active = true |
|||
} |
|||
list.push(item) |
|||
} |
|||
this.title = this.viewYear + ' 年' |
|||
} else { |
|||
const start = parseInt(this.viewYear / 10) * 10 |
|||
this.viewYear = start |
|||
for (let i = 0; i < 10; i++) { |
|||
const year = start + i |
|||
const item = { label: year + '', year: year, current: false, active: false } |
|||
if (year === curYear) { |
|||
item.current = true |
|||
} else if (year === this.data[0]) { |
|||
item.active = true |
|||
} |
|||
list.push(item) |
|||
} |
|||
this.title = start + ' 年 - ' + (start + 9) + ' 年' |
|||
} |
|||
this.viewList = list |
|||
this.lineCount = parseInt(list.length / 4) |
|||
if (list.length % 4 > 0) { |
|||
this.lineCount++ |
|||
} |
|||
}, |
|||
// 校验季度格式是否正确 |
|||
checkFormat(pattern, val) { |
|||
// 格式转成正则表达式 |
|||
let text = '' |
|||
for (const char of pattern) { |
|||
const dict = '\\^$.+?*[]{}!' |
|||
if (dict.indexOf(char) === -1) { |
|||
text += char |
|||
} else { |
|||
text += '\\' + char |
|||
} |
|||
} |
|||
text = text.replace('yyyy', '[1-9]\\d{3}') |
|||
text = text.replace('qq', '0[1-4]') |
|||
text = text.replace('q', '[1-4]') |
|||
text = text.replace('Q', '[一二三四]') |
|||
text = '^' + text + '$' |
|||
const patt = new RegExp(text) |
|||
return patt.test(val) |
|||
}, |
|||
// 格式化季度到指定格式 |
|||
formatTo(data, pattern) { |
|||
let text = pattern.replace('yyyy', '' + data[0]) |
|||
text = text.replace('qq', '0' + data[1]) |
|||
text = text.replace('q', '' + data[1]) |
|||
text = text.replace('Q', '一二三四'.substr(data[1] - 1, 1)) |
|||
return text |
|||
}, |
|||
// 以指定格式解析季度 |
|||
formatFrom(str, pattern) { |
|||
const year = this.findText(str, pattern, 'yyyy') |
|||
const quarter = this.findText(str, pattern, ['qq', 'q', 'Q']) |
|||
this.data = [year, quarter] |
|||
}, |
|||
// 查找文本数值 |
|||
findText(str, pattern, find) { |
|||
if (find instanceof Array) { |
|||
for (const f of find) { |
|||
const val = this.findText(str, pattern, f) |
|||
if (val !== -1) { |
|||
return val |
|||
} |
|||
} |
|||
return -1 |
|||
} |
|||
const index = pattern.indexOf(find) |
|||
if (index === -1) { |
|||
return index |
|||
} |
|||
const val = str.substr(index, find.length) |
|||
if (find === 'Q') { |
|||
return '一二三四'.indexOf(val) + 1 |
|||
} else { |
|||
return parseInt(val) |
|||
} |
|||
}, |
|||
// 年份点击 |
|||
clickYear() { |
|||
if (this.viewType !== 1) { |
|||
return |
|||
} |
|||
// 切换年度选择器 |
|||
this.viewType = 2 |
|||
this.initView() |
|||
}, |
|||
// 季度选择 |
|||
clickItem(item) { |
|||
// console.log('select--------', item) |
|||
if (this.viewType === 1) { |
|||
// 选择季度 |
|||
this.$emit('change', this.formatTo([item.year, item.quarter], this.valueFormat)) |
|||
this.visible = false |
|||
} else { |
|||
// 选择年度 |
|||
this.viewType = 1 |
|||
this.viewYear = item.year |
|||
this.initView() |
|||
} |
|||
}, |
|||
// 上一年 |
|||
clickLast() { |
|||
if (this.viewYear > 1000) { |
|||
if (this.viewType === 1) { |
|||
this.viewYear-- |
|||
this.initView() |
|||
} else { |
|||
this.viewYear = this.viewYear - 10 |
|||
this.initView() |
|||
} |
|||
} |
|||
}, |
|||
// 下一年 |
|||
clickNext() { |
|||
if (this.viewYear < 9999) { |
|||
if (this.viewType === 1) { |
|||
this.viewYear++ |
|||
this.initView() |
|||
} else { |
|||
this.viewYear = this.viewYear + 10 |
|||
this.initView() |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.el-quarter-picker { |
|||
width: 180px; |
|||
display: inline-block; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,160 @@ |
|||
|
|||
/* 数据 */ |
|||
let nameList = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; // 类别
|
|||
let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903 ]; // 人数
|
|||
var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"] |
|||
/* 数据整合 */ |
|||
let dataList = []; |
|||
nameList.map((item, index) => { |
|||
if (index === 4) { |
|||
dataList.push({ |
|||
name: item, |
|||
value: valueList[index], |
|||
itemStyle: { |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [{ |
|||
offset: 0, color: '#FFB904' // 0% 处的颜色
|
|||
}, { |
|||
offset: 1, color: '#FF6969' // 100% 处的颜色
|
|||
}], |
|||
global: false // 缺省为 false
|
|||
}, |
|||
borderRadius: 6 |
|||
}, |
|||
label: { show: false } |
|||
}) |
|||
} else { |
|||
dataList.push({ |
|||
name: item, |
|||
value: valueList[index], |
|||
itemStyle:{ |
|||
borderRadius: 6 |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
var options = { |
|||
legend: { |
|||
// orient: 'vertical',
|
|||
icon: "circle", |
|||
itemHeight: 8, |
|||
itemWidth: 8, |
|||
top: "5%", |
|||
x: "right", |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
grid: { |
|||
top: '25%',//上边距
|
|||
right: '0',//右边距
|
|||
left: '0',//左边距
|
|||
bottom: "0%",//下边距
|
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: nameList, |
|||
axisTick: { |
|||
show: false //隐藏X轴刻度
|
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.8)" |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#B6E6FF', |
|||
fontSize:8, |
|||
fontFamily: 'Source Han Sans CN-Regular', |
|||
}, |
|||
}, |
|||
yAxis: [{ |
|||
type: 'value', |
|||
name: "", |
|||
max: 1200, |
|||
min:0, |
|||
splitNumber:5, |
|||
nameTextStyle: { |
|||
color: '#B6E6FF', |
|||
fontSize: 13, |
|||
fontFamily: 'Source Han Sans CN-Regular', |
|||
align: "left", |
|||
verticalAlign: "center", |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 13, |
|||
color: '#B6E6FF', |
|||
fontFamily: 'HarmonyOS Sans-Regular', |
|||
// formatter:function(value,index){
|
|||
// return yList[index]
|
|||
// }
|
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: 'rgba(49, 217, 255, 0.5)', |
|||
} |
|||
}, |
|||
}], |
|||
series: [ |
|||
{ |
|||
name: '交通特征', |
|||
type: 'line', |
|||
symbol: 'circle', |
|||
symbolSize: 0, |
|||
|
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: '#32BB8A', |
|||
}, |
|||
lineStyle: { |
|||
width:2, |
|||
}, |
|||
data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据
|
|||
}, |
|||
{ |
|||
name: '饱和度', |
|||
type: 'line', |
|||
symbol: 'circle', |
|||
symbolSize: 0, |
|||
|
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: '#07A3FB', |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
}, |
|||
data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据
|
|||
}, |
|||
{ |
|||
name: '拥挤度', |
|||
type: 'line', |
|||
symbol: 'circle', |
|||
symbolSize: 0, |
|||
// yAxisIndex: 1, // 与第二个 y 轴关联
|
|||
itemStyle: { |
|||
color: '#E2BA74', |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
}, |
|||
data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据
|
|||
}, |
|||
] |
|||
} |
|||
|
|||
export default options; |
|||
@ -0,0 +1,149 @@ |
|||
import * as echarts from "echarts"; |
|||
|
|||
function contains(arr, val) { |
|||
var i = arr.length; |
|||
while (i--) { |
|||
if (arr[i].name === val) { |
|||
return i; |
|||
} |
|||
} |
|||
return false; |
|||
} |
|||
let list = [ |
|||
{ |
|||
name: '交通特征', |
|||
max: 88, |
|||
}, |
|||
{ |
|||
name: '拥挤度', |
|||
max: 88, |
|||
}, |
|||
{ |
|||
name: '饱和度', |
|||
max:188, |
|||
}, |
|||
]; |
|||
let data1 = [[80, 50, 55, 80, 50, 80, 48, 43]]; |
|||
let data2 = [[60, 60, 65, 60, 70, 40, 80, 63]]; |
|||
let options = { |
|||
|
|||
tooltip: { |
|||
show: true, |
|||
trigger: 'item', |
|||
formatter: (data) => { |
|||
// console.log(data.seriesIndex);
|
|||
var tip = '<h5 class="echarts-tip-h5">' + data.seriesName + '</h5>'; |
|||
let tmpData = []; |
|||
if (data.seriesIndex === 0) { |
|||
tmpData = data1; |
|||
} else if (data.seriesIndex === 1) { |
|||
tmpData = data2; |
|||
} |
|||
console.log(tmpData) |
|||
data.value.forEach((item, index) => { |
|||
// console.log(list[index].name)
|
|||
tip += '<div>'; |
|||
tip += '<div>' + list[index].name + ': '+ tmpData[0][index] + '万</div>' |
|||
tip += '</div>'; |
|||
}); |
|||
return tip; |
|||
}, |
|||
}, |
|||
// legend: {
|
|||
// show: true,
|
|||
// icon: 'circle',
|
|||
// left: '15%',
|
|||
// top: '3%',
|
|||
// orient: 'horizontal',
|
|||
// textStyle: {
|
|||
// fontSize: 14,
|
|||
// color: '#fff',
|
|||
// },
|
|||
// data: ['数据1', '数据2'],
|
|||
// },
|
|||
radar: { |
|||
name: { |
|||
textStyle: { |
|||
color: '#fff', |
|||
fontSize: 16, |
|||
}, |
|||
rich: { |
|||
a: { |
|||
fontSize: 16, |
|||
color: '#FFFFFF', |
|||
padding: [0, 0, 8, 0], |
|||
}, |
|||
b: { |
|||
fontSize: 18, |
|||
color: '#ACD3FF', |
|||
}, |
|||
}, |
|||
formatter: (a) => { |
|||
let i = contains(list, a); // 处理对应要显示的样式
|
|||
return `{a| ${a}}`; |
|||
}, |
|||
}, |
|||
center: ['50%', '50%'], |
|||
radius: '60%', |
|||
startAngle: 90, |
|||
splitNumber: 5, |
|||
shape: 'circle', |
|||
splitArea: { |
|||
areaStyle: { |
|||
color: [ '#07A3FB99','#07A3FB8010', '#07A3FB30','#07A3FB60','#07A3FB80'], |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: 'rgba(50, 72, 130, 0.4)', |
|||
}, |
|||
}, |
|||
indicator: list, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '数据1', |
|||
type: 'radar', |
|||
symbol: 'circle', |
|||
symbolSize: 3, |
|||
areaStyle: { |
|||
normal: { |
|||
color: new echarts.graphic.LinearGradient( |
|||
0, |
|||
1, |
|||
0, |
|||
0, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: '#DC6A00', |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: '#099CCD', |
|||
}, |
|||
], |
|||
false |
|||
), |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
color: 'rgba(245, 166, 35, 0.2)', |
|||
borderColor: 'rgba(235, 171, 86, 00)', |
|||
borderWidth: 10, |
|||
}, |
|||
data: data1, |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
|
|||
|
|||
export default options; |
|||
@ -0,0 +1,208 @@ |
|||
import * as echarts from "echarts"; |
|||
|
|||
let xData = [ |
|||
"1月", |
|||
"2月", |
|||
"3月", |
|||
"4月", |
|||
"5月", |
|||
"6月", |
|||
"7月", |
|||
"8月", |
|||
"9月", |
|||
"10月", |
|||
"11月", |
|||
"12月" |
|||
]; |
|||
let data1 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800]; |
|||
let options = { |
|||
tooltip: { |
|||
show:false, |
|||
trigger: "axis", |
|||
axisPointer: { |
|||
// 坐标轴指示器，坐标轴触发有效
|
|||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|||
}, |
|||
textStyle: { |
|||
color: "#fff", |
|||
fontSize: 14, |
|||
}, |
|||
backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色
|
|||
borderColor: "rgba(3, 31, 71, .1)", |
|||
formatter: "健康监测<br>{b1}：{c1}人", |
|||
}, |
|||
grid: { |
|||
left: "2%", |
|||
right: "4%", |
|||
top: "5%", |
|||
bottom: "5%", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
data: xData, |
|||
show: true, |
|||
axisTick: { |
|||
show: false, |
|||
lineStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#1C82C5", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
interval: 0, |
|||
align: "center", |
|||
rotate: "1", |
|||
margin: "20", |
|||
textStyle: { |
|||
fontSize: 12, |
|||
color: "#50A2C1", |
|||
}, |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
min: 0, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#1C82C5", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "rgba(28, 130, 197, .3)", |
|||
type: "solid", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
color: "#DEEBFF", |
|||
textStyle: { |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
legend: { |
|||
show: false, |
|||
top: "5%", |
|||
left: "50%", |
|||
textStyle: { |
|||
color: "#fff", |
|||
fontSize: 14, |
|||
}, |
|||
itemGap: 12, // 设置间距
|
|||
}, |
|||
series: [ |
|||
// 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%)
|
|||
{ |
|||
name: "种植面积", |
|||
type: "bar", |
|||
barWidth: "10px", |
|||
barGap: "-100%", |
|||
selectedMode:true, |
|||
select:{ |
|||
itemStyle:{ |
|||
opacity: 1, |
|||
color: function (params) { |
|||
var a = params; |
|||
|
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#01D5BC", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#003B4E", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
// lenged文本
|
|||
opacity: 0.6, |
|||
color: function (params) { |
|||
var a = params.name; |
|||
console.log("==========a=============",a); |
|||
if ( a == "6月" ) { |
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#01D5BC", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#003B4E", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
} else |
|||
return new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#61D8FF", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#003B4E", // 100% 处的颜色
|
|||
}, |
|||
], |
|||
false |
|||
); |
|||
}, |
|||
}, |
|||
data: data1, |
|||
}, |
|||
// 进度条的小圆圈
|
|||
{ |
|||
name: "小圈圈", |
|||
type: "scatter", |
|||
emphasis: { |
|||
scale: false |
|||
}, |
|||
symbol: |
|||
"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAACCpJREFUSEuFl+uPXVUZxn/rus9lru200zt2SrEJjQSlDWAipv2AGtQYouGDJhpDofgnmNhTv/pFjAItaGL8QtRojCbEaJXEBKUU4YNtKNCW0tqm6XRmembOZe91M2vP9AKWspJ9zsneZ69nvc9a7/M+r+BjRkpJ3HcYfRHGo2BaSFaX0DJgiAgnqbSkKyLdpmL2vW9zKQEizytE/nnLUT//4EiCBEnA3R3MwnpmnGZrCpj8PwWE/HFthGs3l28k6JM4r5ucu/Qt+jcji5sW8n/AnU6SnQOw5hlmMGyXAusDSMEVZZgLA+baLYbvnaWfgTasRzvPWDKMkdiYJGMikWJkkAQn557gnOgg6JBSyiQss1ADZzqFyN9wEMTTz7JTSrZiQQbmUuTdEcu8n0fE9vI7Nw/ZI7EJdI/Ugwk822NktRBElTiz/yLHOwdI+c1r4CuTLNPbOYj42SbuiYktIhGs4h0rOVtVSOeRl5cQq5ori+0jmARR5jdhboIwnVk/TbJ3EKvIHZXnziTRInJu9iJvpgP1DtZ7fyPig4jJ9dxtJTNJMhAVbyrJUmgi3AIqBmRMyGQRowaxCLTL5UX0JFFOEicrUneRaCYIZpa4MMFIK3FviDR15PT+fRzv1CHWVCfR6SB+PMVmbbmHQBwWvDrm6FUaFTwy9FAtjYoRWShU0ojBCtfCk5pA2SDIAVG3CL1A0J5gNDEa2t6xG4GSieNPXeRMpyNiDTz9I1p+nAcQtIXjrcYU75eXUe0W2vVQzqOjQkWJKgpkf4BsKMQQaGTQSGgZkoyEqsSbSXxvjmA24ovzhDjOljKyQwbcFsFfju3DC1ISU7/gruTYIRVzxSLHygLlNco7dENggkVHgRoBM4zI5FBJIawF54j5EMlEqIE1XoMzFt8f4m0T3zxN6G1kV0pMWsPbF74j3hL5RK97nr0+0haCoxauZoqrq5iGxCwW6DGNjRqtEiYJlHaoSiJwdQ4n4Yle4qXEK4HLwAs9nBrBWYGznlC1GE9DdktBuSVwREwdSusR7EqCpVHNKwOFKq9gQgttI0UwaOOxQWIVmAO72P3QJva1DXdJweii4/W35/njk3/nDwqcB6cNlRvijKMajuJMHz++FXf1v+yuo068IiZfSDtVZAbPycaQ94fjaNdAF32sr7BaY2WiyMAvPsxT2yZ4/FYaeGqB5x/7M8+oSBU0VZCUaoArCyp7BTeyFtd1bDOwDclpsfZwejBE1sjAq0bTHZbopsTMG2yOuGUpgsf+dA+P7lrLgY/S3qxDfzrNkz88xr8GjrLdpPQVZemoTMS11uGG80wowa4AV8Waw+mLMWJl4Ijsk6oxtAdjGxS6qqNuSEPxt6/xwqjlM7cBZtFxbM9v2BcjQ92kXOwxVJYq73kTnLXYJcfnjKQSU4fTV1JETK/ipStDTDVAuxI73qRYcthmpOkNxbHHeP12oPlZSHTv/y2fD31KM8LQl5SFpBzM4+YncVzET2/gC0GSxNRz6csJ5JVVvLRhHj0AUxisU1gdKFyO2NM4+k1ezofpY8DTfS9yX0wMtViOeFxT1fvcxY8W+IU2D6tEuk51FLyc6cjAzdE6cqtKGj5RSCiOfJ2fjxV8+rZUVxzb83ser4ElZRhSWks1LKnm5vCfmkFcGLL3GtUPAeMkXss5XB+ucUw5xPocdaTIEf/gAe5/ZIZDtztcb8xy8Mm/8rsgKL2kdCWl1HiTgT1uqs2E0uxKgVkx/WzaGRQzEU61ljhdp1OJtjmFwFxPp0Tx4pfY/5Hp1OX5R1/iGamp6pQqKUtLpRZxRUF1uYXf6NjiFTtE4JTYcChNVYIHhWD+8kaOTh9HN6cwVyp0obH1yVbYWGGUwj63h69un+SRTHuMLC053vnHBQ5//yivNsCFLB6BSmcF6+GGAVesxl1awK9u8lkhaBM4Jvh1smsW2BsFVgx5bcOQq+cL1JxGjQiMddggMKbA6IjOkpl1m4DIimkUyRuCKAlZMn2gUi1c2cdJg8+SOXsVn2lOkt0kelce50hdJFYf5pNCcJeILLQLjg5mUXU+N9DNCu0HmGjQVi6DpoQka3UFaJLIVyI4h897WvZwExrfN/hcHtst/ELJbi2ZsIqTF74rTtZlkZ9g11j2RoXJZdEqzrlJpJ9HtRpo36/rsra5SkXksAG2QolAwpDKXJ2yGVipUKbE99qErNHmMrHazOYU2aEC/anAP098TywtAydY+0tmYuBuPEFFXsvuI9udXB6DQo0EZDciGxKFRqTqhvcSGTRfitiPBHWTEega2saxW0p0EXlj30XOdzorFqg2eyvWR0pmVGIoh/xbFvSy9bnkkBNdVBxFpuEN63NNTUSDtNQjZv+1oIhrFDG7jwxqHfcKuWx9Lj3Bfz5k9mqvmS2oWHPN7EW8Dbxrm5x9r42YHiKDQ8beitkrVjx7m8QcyDZJzRFVjyTHSLHNHQPYJhNaWM7Nvs+bdERcduw3m70Vv5n919Mb2Slha16OZNnezpbMbfLI2EVcWA8bgAvZV68oirVEzsLSeiZF4M6oWK0FEcOZ/Wc5nunNgB8Avq5GKYk6jg5i/SY2x8j2AK1cRFAsisR5EouqSzfr7rvAJwLNpRbNKFiVPKukYVU29AJcI/H2uX2crluaD7UzHzDn9V5f854J1v2KVnBsUoHNSJoh1hzlKa53JnVLc5OOCoFPklNrRzlz4gSe2shnh5Wbhhu91C16pxudxfJ8y/RMHWKdiqxOijEH41aiM6CI+NwvaZiViUsTk3RPfENUWR9WTsEtG7f/ARqeIzUaHVUWAAAAAElFTkSuQmCC", |
|||
symbolSize: [26, 26], |
|||
itemStyle: { |
|||
color: "#FFF", |
|||
shadowColor: "rgba(0, 255, 254, 0.53)", |
|||
shadowBlur: 5, |
|||
borderWidth: 1, |
|||
opacity: 1 |
|||
}, |
|||
z: 2, |
|||
zlevel: 10, |
|||
data: data1, |
|||
animationDelay: 500 |
|||
} |
|||
], |
|||
}; |
|||
|
|||
|
|||
export default options; |
|||
@ -0,0 +1,428 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'交通指标分析'" ></WgtTitle> |
|||
<div class="board"> |
|||
<!-- <div class="searchPanel"> |
|||
<el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in areaOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="year" size="mini" class="selectRoad" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in yearOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-date-picker |
|||
size="mini" |
|||
v-if="year != 'quarter'" |
|||
class="selectRoad" |
|||
v-model="dateTime" |
|||
style="width:140px;" |
|||
:type="year" |
|||
placeholder="请选择" |
|||
/> |
|||
<el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="quarter" aria-placeholder="请选季度" /> |
|||
|
|||
<el-button type="primary" size="mini" class="btnSearch" icon="el-icon-search">查询</el-button> |
|||
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left" >重置</el-button> |
|||
</div> --> |
|||
<ProgressBar :dataList="dataList" class="progressbar" :selectIndex="7" /> |
|||
<div class="body" > |
|||
<div style="width:70%" > |
|||
<div class="searchPanel_1" > |
|||
<el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in areaOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="year" size="mini" class="selectRoad" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in yearOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-date-picker |
|||
size="mini" |
|||
v-if="year != 'quarter'" |
|||
class="selectRoad" |
|||
v-model="dateTime" |
|||
style="width:140px;" |
|||
:type="year" |
|||
placeholder="请选择" |
|||
/> |
|||
<el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="quarter" aria-placeholder="请选季度" /> |
|||
|
|||
<el-button type="primary" size="mini" class="btnSearch" icon="el-icon-search">查询</el-button> |
|||
<el-button class="btnReset" size="mini" icon="el-icon-refresh-left" >重置</el-button> |
|||
</div> |
|||
<div id="chart1" ></div> |
|||
</div> |
|||
<div class="chartOrg" > |
|||
<div class="itemChart" > |
|||
<div class="title">上月指标</div> |
|||
<div id="chart2" ></div> |
|||
</div> |
|||
<div class="itemChart" > |
|||
<div class="title">上月指标</div> |
|||
<div id="chart3" ></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import WgtTitle from '../../../../../widgets/title' |
|||
import ProgressBar from './progressBar.vue'; |
|||
import * as echarts from "echarts"; |
|||
import chart1 from "./assets/charts"; |
|||
import chart2 from "./assets/charts2"; |
|||
import chart3 from "./assets/charts3"; |
|||
import ElQuarterPicker from './ElQuarterPicker' |
|||
|
|||
const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => { |
|||
// ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 |
|||
ctx.beginPath(); |
|||
ctx.fillStyle = gr; |
|||
ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); |
|||
ctx.lineTo(width - radius + x, y); |
|||
ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2); |
|||
ctx.lineTo(width + x, height + y - radius); |
|||
ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2); |
|||
ctx.lineTo(radius + x, height +y); |
|||
ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI); |
|||
ctx.closePath(); |
|||
//ctx.stroke(); |
|||
ctx.fill() |
|||
} |
|||
|
|||
export default { |
|||
name: 'EventQuery', |
|||
components: { |
|||
WgtTitle, |
|||
ProgressBar, |
|||
ElQuarterPicker |
|||
}, |
|||
data() { |
|||
return { |
|||
yearOptions:[ |
|||
{ |
|||
value: 'year', |
|||
label: '年' |
|||
},{ |
|||
value: 'month', |
|||
label: '月' |
|||
}, |
|||
{ |
|||
value: 'date', |
|||
label: '日' |
|||
}, |
|||
{ |
|||
value: 'quarter', |
|||
label: '季' |
|||
},], |
|||
areaOptions: [{ |
|||
value: '济南', |
|||
label: '济南' |
|||
}, { |
|||
value: '菏泽', |
|||
label: '菏泽' |
|||
}], |
|||
dateTime:"", |
|||
area: '济南', |
|||
dataList:[ |
|||
{ |
|||
title:"殷家林枢纽" |
|||
}, |
|||
{ |
|||
title:"大学城立交" |
|||
}, |
|||
{ |
|||
title:"长清立交" |
|||
}, |
|||
{ |
|||
title:"松竹枢纽" |
|||
}, |
|||
{ |
|||
title:"孝里立交" |
|||
}, |
|||
{ |
|||
title:"平阴立交" |
|||
}, |
|||
{ |
|||
title:"孔村枢纽" |
|||
}, |
|||
{ |
|||
title:"平阴南立交" |
|||
}, |
|||
{ |
|||
title:"魏雪枢纽" |
|||
}, |
|||
{ |
|||
title:"东平立交" |
|||
}, |
|||
{ |
|||
title:"东平湖枢纽" |
|||
}, |
|||
{ |
|||
title:"韩岗立交" |
|||
}, |
|||
{ |
|||
title:"梁山立交" |
|||
}, |
|||
{ |
|||
title:"鄄郓枢纽" |
|||
}, |
|||
{ |
|||
title:"嘉祥西立交" |
|||
}, |
|||
{ |
|||
title:"王官屯枢纽" |
|||
} |
|||
], |
|||
quarter:"", |
|||
year:"2024", |
|||
list:[ |
|||
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}, |
|||
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}, |
|||
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}, |
|||
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}, |
|||
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}, |
|||
{name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'} |
|||
] |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
var myChart1 = echarts.init(document.getElementById('chart1')); |
|||
myChart1.setOption(chart1); |
|||
var myChart2 = echarts.init(document.getElementById('chart2')); |
|||
myChart2.setOption(chart2); |
|||
var myChart3 = echarts.init(document.getElementById('chart3')); |
|||
myChart3.setOption(chart2); |
|||
|
|||
|
|||
const domMap = document.getElementById("chart2"); |
|||
let parentDiv = domMap.firstChild; |
|||
// 创建canvas |
|||
let canvas = document.createElement('canvas'); |
|||
canvas.width = parentDiv.offsetWidth; |
|||
canvas.height =parentDiv.offsetHeight; |
|||
parentDiv.appendChild(canvas); |
|||
const context = canvas.getContext('2d'); |
|||
|
|||
// 填充渐变颜色 |
|||
var gr = context.createLinearGradient(247, 63, 450, 0); |
|||
// 颜色断点 |
|||
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|||
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|||
|
|||
|
|||
context.lineWidth = 1; // 设置线段宽度 |
|||
|
|||
// 绘制圆角矩形 |
|||
drawRoundRect(context, 300, 78, 160, 24, 12,gr) |
|||
|
|||
var gr = context.createLinearGradient(240, 63, 450, 0); |
|||
// 颜色断点 |
|||
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|||
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|||
drawRoundRect(context, 300, 148, 160, 24, 12,gr) |
|||
|
|||
var gr = context.createLinearGradient(240, 63, 450, 0); |
|||
// 颜色断点 |
|||
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|||
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|||
drawRoundRect(context, 300, 218, 160, 24, 12,gr) |
|||
|
|||
var gr = context.createLinearGradient(400, 63, 450, 0); |
|||
// 颜色断点 |
|||
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|||
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|||
|
|||
|
|||
drawRoundRect(context, 460, 78, 160, 24, 12,gr) |
|||
var gr = context.createLinearGradient(350, 63, 450, 0); |
|||
// 颜色断点 |
|||
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|||
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|||
drawRoundRect(context, 460, 148, 160, 24, 12,gr) |
|||
var gr = context.createLinearGradient(300, 63, 450, 0); |
|||
// 颜色断点 |
|||
gr.addColorStop(1, 'rgba(92,197,255,0)'); |
|||
gr.addColorStop(0, 'rgba(92,197,255,0.5)'); |
|||
drawRoundRect(context, 460, 218, 160, 24, 12,gr) |
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
|
|||
.progressbar { |
|||
margin:10px; |
|||
|
|||
} |
|||
|
|||
.congestion { |
|||
width: 100%; |
|||
.body { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
height: 395px; |
|||
width:100%; |
|||
font-size: 14px; |
|||
|
|||
|
|||
|
|||
> div { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
height:100%; |
|||
width:33%; |
|||
margin-right:20px; |
|||
border: 1px solid; |
|||
border-image: linear-gradient(360deg, rgba(55, 231, 255,0.1), rgba(55, 231, 255, 0)) 1 1; |
|||
background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #064258 100%); |
|||
padding: 10px; |
|||
} |
|||
|
|||
.chartOrg { |
|||
flex-direction: row !important; |
|||
|
|||
>div { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
width:50%; |
|||
height:100%; |
|||
} |
|||
|
|||
.itemChart { |
|||
|
|||
>.title { |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:30px; |
|||
font-size: 16px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #30BFEC; |
|||
} |
|||
|
|||
#chart2 { |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:100%; |
|||
} |
|||
|
|||
#chart3 { |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
#chart1 { |
|||
display: inline-flex; |
|||
height:100%; |
|||
width:100%; |
|||
} |
|||
} |
|||
|
|||
.board{ |
|||
height:320px; |
|||
width: 100%; |
|||
padding:10px 0px; |
|||
|
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 1; |
|||
|
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
|
|||
|
|||
.searchPanel_1{ |
|||
position:absolute; |
|||
display: flex; |
|||
align-items: center; |
|||
height: 40px; |
|||
width:100%; |
|||
font-size: 14px; |
|||
margin-bottom: 10px; |
|||
div{ |
|||
white-space: nowrap; |
|||
margin-right: 4px; |
|||
} |
|||
.inputZh{ |
|||
width: 47px; |
|||
::v-deep{ |
|||
.el-input__inner{ |
|||
background-color: #064258 !important; |
|||
border-width: 0px !important; |
|||
} |
|||
} |
|||
} |
|||
.inputJl{ |
|||
margin-left: 5px; |
|||
margin-right: 10px; |
|||
} |
|||
.selectRoad{ |
|||
width:89px; |
|||
border:1px solid #00B3CC; |
|||
::v-deep{ |
|||
.el-input__inner{ |
|||
background-color: #064258 !important; |
|||
border-width: 0px !important; |
|||
} |
|||
} |
|||
} |
|||
.btnSearch{ |
|||
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|||
margin-left: 10px; |
|||
border-color: transparent; |
|||
} |
|||
.btnReset{ |
|||
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);; |
|||
border-color: transparent; |
|||
color: white; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
.charts { |
|||
height:100px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,195 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<div :style="{width: dataList.length * 300}" > |
|||
<div :class="selectIndex == index?selectLine < 1?'item action Abefore':'item action Aafter':selectIndex + selectLine == index?selectLine < 1?'item action Aafter':'item action Abefore':'item'" v-for="(item,index) in dataList" :key="index" > |
|||
<i class="after" @click="selectItem(index,-1)"></i> |
|||
<i class="before" @click="selectItem(index,+1)" ></i> |
|||
<span></span> |
|||
<div>{{ item.title }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { number } from 'echarts'; |
|||
|
|||
|
|||
export default { |
|||
name: 'ProgressBar', |
|||
components: { |
|||
}, |
|||
props:{ |
|||
dataList:{ |
|||
type:Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
selectIndex:0, |
|||
selectLine:-1, |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
selectItem(index,num){ |
|||
this.selectIndex = index; |
|||
this.selectLine = num |
|||
} |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
height:35px; |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
|
|||
> div { |
|||
position: relative; |
|||
width: 100%; |
|||
height:35px; |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
|
|||
>.item .after { |
|||
position: absolute; |
|||
display: inline-flex; |
|||
left:0px; |
|||
top:-5px; |
|||
width:45px !important; |
|||
height:35px !important; |
|||
background-color: transparent; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
>.item .after::after { |
|||
content: ""; |
|||
position: absolute; |
|||
display: inline-flex; |
|||
left:0px; |
|||
top:8px; |
|||
width:45px !important; |
|||
height:3px !important; |
|||
background-color: #C7C7C7; |
|||
} |
|||
|
|||
>.item .before { |
|||
position: absolute; |
|||
display: inline-flex; |
|||
right:0px; |
|||
top:-5px; |
|||
width:45px; |
|||
height:35px; |
|||
background-color: transparent; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
>.item .before::after { |
|||
content: ""; |
|||
position: absolute; |
|||
display: inline-flex; |
|||
left:0px; |
|||
top:8px; |
|||
width:45px !important; |
|||
height:3px !important; |
|||
background-color: #C7C7C7; |
|||
} |
|||
|
|||
.item.action .after::after { |
|||
background-color: #72FDC9 ; |
|||
} |
|||
|
|||
.item.action.Aafter .after::after{ |
|||
background-color: #C7C7C7 !important; |
|||
} |
|||
|
|||
> .item.action.Aafter .before::after { |
|||
background-color: #72FDC9 ; |
|||
} |
|||
|
|||
> .item.action.Abefore .after::after { |
|||
background-color: #72FDC9 ; |
|||
} |
|||
|
|||
> .bef::before { |
|||
background-color: #72FDC9 !important; |
|||
} |
|||
|
|||
> .aft::after { |
|||
background-color: #72FDC9 !important; |
|||
} |
|||
|
|||
> .item.action span { |
|||
background-color: #72FDC9 ; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
> .item.action span::after { |
|||
border-color: #72FDC9 ; |
|||
} |
|||
|
|||
> .action div { |
|||
color:#72FDC9 !important; |
|||
} |
|||
|
|||
|
|||
>.item { |
|||
position: relative; |
|||
width: 180px; |
|||
height:35px; |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
justify-items: center; |
|||
|
|||
|
|||
>span { |
|||
position: absolute; |
|||
display:inline-flex; |
|||
width: 9px; |
|||
height: 9px; |
|||
background: #C7C7C7; |
|||
border-radius: 50%; |
|||
opacity: 1; |
|||
left:53px; |
|||
} |
|||
|
|||
>div { |
|||
position: relative; |
|||
display:inline-flex; |
|||
width:100%; |
|||
align-items: center; |
|||
justify-content: center; |
|||
top: 5px; |
|||
margin-top:10px; |
|||
color:#C7C7C7; |
|||
} |
|||
|
|||
>span::after { |
|||
content: ""; |
|||
position: absolute; |
|||
display:inline-flex; |
|||
width: 15px; |
|||
height: 15px; |
|||
border:1px solid #C7C7C7; |
|||
border-radius: 50%; |
|||
opacity: 1; |
|||
top:-3.5px; |
|||
left:-3px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,180 @@ |
|||
<template> |
|||
<div class='TrafficFlow'> |
|||
<section class="content"> |
|||
<RoadIndicators class="content-l" /> |
|||
<SaturationMax class="content-l" /> |
|||
<Crowding class="content-l" /> |
|||
<ComposeFeatures class="content-l" /> |
|||
</section> |
|||
<section class="content" > |
|||
<TrafficIndicators class="content-max" /> |
|||
</section> |
|||
<section class="foot" > |
|||
<ChangesIndictors class="foot-l" /> |
|||
<CongestionIndicator class="foot-r" /> |
|||
</section> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import RoadIndicators from './components/roadIndicators'; |
|||
import SaturationMax from './components/saturationMax'; |
|||
import Crowding from './components/crowding'; |
|||
import ComposeFeatures from './components/composeFeatures'; |
|||
import TrafficIndicators from './components/trafficIndicators'; |
|||
import ChangesIndictors from './components/changesIndicators'; |
|||
import CongestionIndicator from './components/congestionIndicator'; |
|||
|
|||
export default { |
|||
name: 'IndicatorAnalysis', |
|||
components: { |
|||
RoadIndicators, |
|||
SaturationMax, |
|||
Crowding, |
|||
ComposeFeatures, |
|||
TrafficIndicators, |
|||
ChangesIndictors, |
|||
CongestionIndicator, |
|||
}, |
|||
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:99%; |
|||
|
|||
} |
|||
|
|||
|
|||
.content { |
|||
width: 100%; |
|||
display: inline-flex; |
|||
justify-content: space-between; |
|||
pointer-events: none; |
|||
margin-top: 19px; |
|||
margin-left:19px; |
|||
>div { |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
.content-w { |
|||
width:66.5%; |
|||
} |
|||
|
|||
.content-max { |
|||
width:100%; |
|||
|
|||
} |
|||
|
|||
.content-l { |
|||
width: 25%; |
|||
margin-left:0px; |
|||
} |
|||
|
|||
} |
|||
|
|||
.TrafficFlow { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
z-index: 6; |
|||
color: white; |
|||
|
|||
|
|||
.content { |
|||
width: 100%; |
|||
margin: auto; |
|||
display: flex; |
|||
flex: 1; |
|||
pointer-events: none; |
|||
margin-top: 19px; |
|||
|
|||
|
|||
.content-l { |
|||
width: calc(50%); |
|||
min-width:460px; |
|||
margin-right:20px; |
|||
|
|||
} |
|||
|
|||
|
|||
.content-m { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
width: calc(100% / 4 ); |
|||
margin-right:20px; |
|||
|
|||
.content-m-t { |
|||
width:100%; |
|||
height:240px; |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
.content-r { |
|||
width: 30%; |
|||
} |
|||
} |
|||
.foot{ |
|||
width: 100%; |
|||
margin: auto; |
|||
display: flex; |
|||
flex: 1; |
|||
pointer-events: none; |
|||
margin-top: 8px; |
|||
>div { |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
.foot-w { |
|||
width:100%; |
|||
|
|||
} |
|||
|
|||
.foot-l { |
|||
width: 67%; |
|||
} |
|||
.foot-m { |
|||
width: 613px; |
|||
} |
|||
.foot-r { |
|||
margin-left:20px; |
|||
width: 33%; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,146 @@ |
|||
<template> |
|||
<div class='TrafficFlowMax'> |
|||
<el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs"> |
|||
<el-tab-pane label="综合指标分析" name="first"> |
|||
<IndicatorAnalysis /> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="综合指标查询" name="second"> |
|||
|
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import IndicatorAnalysis from './components/IndicatorAnalysis'; |
|||
|
|||
export default { |
|||
name: 'trafficSituation', |
|||
components: { |
|||
IndicatorAnalysis |
|||
}, |
|||
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; |
|||
} |
|||
|
|||
::v-deep .el-tabs__header { |
|||
margin:0px !important; |
|||
} |
|||
|
|||
.footTabs { |
|||
display: inline; |
|||
width:99%; |
|||
|
|||
} |
|||
|
|||
.TrafficFlowMax { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
z-index: 6; |
|||
color: white; |
|||
padding: 15px 25px; |
|||
|
|||
.head{ |
|||
width: 98%; |
|||
margin: auto; |
|||
margin-top: 15px; |
|||
} |
|||
.content { |
|||
width: 98%; |
|||
margin: auto; |
|||
display: flex; |
|||
flex: 1; |
|||
pointer-events: none; |
|||
margin-top: 19px; |
|||
>div { |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
.content-l { |
|||
width: calc(50%); |
|||
min-width:460px; |
|||
margin-right:20px; |
|||
|
|||
} |
|||
|
|||
|
|||
.content-m { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
width: calc(100% / 4 ); |
|||
margin-right:20px; |
|||
|
|||
.content-m-t { |
|||
width:100%; |
|||
height:240px; |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
.content-r { |
|||
width: 49.4%; |
|||
} |
|||
} |
|||
.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