zhangzhang
1 year ago
9 changed files with 1379 additions and 1334 deletions
@ -1,183 +1,182 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'指标变化情况'"></WgtTitle> |
|||
<div class="board"> |
|||
<div id="ChangesIndictors" class="keep-ratio" > |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'指标变化情况'"></WgtTitle> |
|||
<div class="board"> |
|||
<div id="ChangesIndictors" class="keep-ratio"> |
|||
|
|||
</div> |
|||
</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; |
|||
</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' |
|||
}, |
|||
}, |
|||
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; |
|||
} |
|||
created() { |
|||
|
|||
::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; |
|||
} |
|||
}, |
|||
methods: { |
|||
selectItem(index) { |
|||
this.selectIndex = index; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
|
|||
.congestion { |
|||
display: inline-flex; |
|||
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; |
|||
--keep-ratio: scaleX(1); |
|||
|
|||
.board { |
|||
height: 300px; |
|||
width: 100%; |
|||
height: 310px; |
|||
flex-direction: column; |
|||
|
|||
.board{ |
|||
height: 280px; |
|||
padding: 0px 20px; |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-direction: row; |
|||
background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #064258 93%); |
|||
|
|||
#ChangesIndictors { |
|||
display: inline-flex; |
|||
height: 240px; |
|||
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> |
|||
.charts { |
|||
height: 180px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,277 +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 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> |
|||
<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> |
|||
<span class="num"> |
|||
{{ it.num }} |
|||
</span> |
|||
</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; |
|||
</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, |
|||
}, |
|||
}, |
|||
mounted() { |
|||
|
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
var myChart = echarts.init(document.getElementById('ChangesIndictors')); |
|||
myChart.setOption(chartsStatistics); |
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
|
|||
.showClass { |
|||
color:#00EBC1; |
|||
{ |
|||
name: "大学城-长清", |
|||
num: 1036, |
|||
}, |
|||
{ |
|||
name: "大学城-长清", |
|||
num: 1036, |
|||
}, |
|||
{ |
|||
name: "大学城-长清", |
|||
num: 1036, |
|||
}, |
|||
{ |
|||
name: "大学城-长清", |
|||
num: 1036, |
|||
}, |
|||
{ |
|||
name: "大学城-长清", |
|||
num: 1036, |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
|
|||
::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; |
|||
} |
|||
created() { |
|||
|
|||
::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; |
|||
} |
|||
}, |
|||
methods: { |
|||
selectItem(index) { |
|||
this.selectIndex = index; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
|
|||
.congestion { |
|||
display: inline-flex; |
|||
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: 275px; |
|||
width: 100%; |
|||
height: 310px; |
|||
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%); |
|||
|
|||
.board{ |
|||
height: 280px; |
|||
.bodySort { |
|||
position: relative; |
|||
display: inline-block; |
|||
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%); |
|||
} |
|||
height: 100%; |
|||
overflow: auto; |
|||
padding: 5px 10px; |
|||
|
|||
>div:first-child { |
|||
.barTitle { |
|||
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; |
|||
} |
|||
} |
|||
.lineHight .inner { |
|||
background: linear-gradient(180deg, #FF6969 0%, #FFB904 100%); |
|||
} |
|||
} |
|||
|
|||
.textStr { |
|||
>div { |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:45px; |
|||
flex-direction: row; |
|||
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; |
|||
|
|||
> div { |
|||
>.inner { |
|||
display: inline-flex; |
|||
min-width: 80px; |
|||
height: 26px; |
|||
background: linear-gradient(180deg, #005C7950 0%, #009BCC50 100%); |
|||
border-radius: 2px 2px 2px 2px; |
|||
height: 8px; |
|||
background: linear-gradient(180deg, #0BA7DA 0%, #61D8FF 100%); |
|||
border-radius: 6px 6px 6px 6px; |
|||
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; |
|||
position: relative; |
|||
top: -7px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.action { |
|||
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|||
} |
|||
.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> |
|||
.charts { |
|||
height: 180px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,160 +1,187 @@ |
|||
|
|||
/* 数据 */ |
|||
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 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
|
|||
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% 处的颜色
|
|||
}, |
|||
borderRadius: 6 |
|||
}, |
|||
label: { show: false } |
|||
}) |
|||
} else { |
|||
dataList.push({ |
|||
name: item, |
|||
value: valueList[index], |
|||
itemStyle:{ |
|||
borderRadius: 6 |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
], |
|||
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", |
|||
}, |
|||
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', |
|||
}, |
|||
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)", |
|||
}, |
|||
}, |
|||
yAxis: [{ |
|||
type: 'value', |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: "#B6E6FF", |
|||
fontSize: 8, |
|||
fontFamily: "Source Han Sans CN-Regular", |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: "value", |
|||
name: "", |
|||
max: 1200, |
|||
min:0, |
|||
splitNumber:5, |
|||
min: 0, |
|||
splitNumber: 5, |
|||
nameTextStyle: { |
|||
color: '#B6E6FF', |
|||
fontSize: 13, |
|||
fontFamily: 'Source Han Sans CN-Regular', |
|||
align: "left", |
|||
verticalAlign: "center", |
|||
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]
|
|||
// }
|
|||
fontSize: 13, |
|||
color: "#B6E6FF", |
|||
fontFamily: "HarmonyOS Sans-Regular", |
|||
// formatter:function(value,index){
|
|||
// return yList[index]
|
|||
// }
|
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: 'rgba(49, 217, 255, 0.5)', |
|||
} |
|||
lineStyle: { |
|||
color: "rgba(49, 217, 255, 0.5)", |
|||
}, |
|||
}, |
|||
}], |
|||
series: [ |
|||
{ |
|||
name: '交通特征', |
|||
type: 'line', |
|||
symbol: 'circle', |
|||
symbolSize: 0, |
|||
}, |
|||
], |
|||
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: "#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], // 折线图的数据
|
|||
}, |
|||
] |
|||
} |
|||
// 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; |
|||
|
|||
@ -1,180 +1,190 @@ |
|||
<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(){ |
|||
<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; |
|||
} |
|||
|
|||
.el-tabs__content { |
|||
height: 100%; |
|||
} |
|||
|
|||
.footTabs { |
|||
display: inline; |
|||
width: 99%; |
|||
height: 100%; |
|||
} |
|||
|
|||
|
|||
.content { |
|||
width: 100%; |
|||
display: inline-flex; |
|||
justify-content: space-between; |
|||
pointer-events: none; |
|||
margin-top: 19px; |
|||
margin-left: 19px; |
|||
|
|||
>div { |
|||
pointer-events: auto; |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.content-w { |
|||
width: 66.5%; |
|||
} |
|||
|
|||
::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; |
|||
} |
|||
.content-max { |
|||
width: 100%; |
|||
|
|||
::v-deep .el-tabs__active-bar { |
|||
min-width:128px; |
|||
} |
|||
} |
|||
|
|||
::v-deep .el-tabs__nav-wrap::after { |
|||
background-color: #133242; |
|||
opacity: 0.1; |
|||
} |
|||
.content-l { |
|||
width: 25%; |
|||
margin-left: 0px; |
|||
} |
|||
|
|||
.footTabs { |
|||
display: inline; |
|||
width:99%; |
|||
} |
|||
|
|||
} |
|||
.TrafficFlow { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
z-index: 6; |
|||
color: white; |
|||
|
|||
|
|||
.content { |
|||
.content { |
|||
width: 100%; |
|||
display: inline-flex; |
|||
justify-content: space-between; |
|||
margin: auto; |
|||
display: flex; |
|||
flex: 1; |
|||
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: calc(50%); |
|||
min-width: 460px; |
|||
margin-right: 20px; |
|||
|
|||
} |
|||
|
|||
.content-l { |
|||
width: 25%; |
|||
margin-left:0px; |
|||
|
|||
.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%; |
|||
} |
|||
} |
|||
|
|||
.TrafficFlow { |
|||
.foot { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
z-index: 6; |
|||
color: white; |
|||
margin: auto; |
|||
display: flex; |
|||
flex: 1; |
|||
pointer-events: none; |
|||
margin-top: 19px; |
|||
|
|||
>div { |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
.content { |
|||
.foot-w { |
|||
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: 70%; |
|||
height: 330px; |
|||
} |
|||
|
|||
} |
|||
.foot-m { |
|||
width: 613px; |
|||
} |
|||
|
|||
.foot-l { |
|||
width: 67%; |
|||
} |
|||
.foot-m { |
|||
width: 613px; |
|||
} |
|||
.foot-r { |
|||
margin-left:20px; |
|||
width: 33%; |
|||
} |
|||
.foot-r { |
|||
margin-left: 20px; |
|||
width: 33%; |
|||
} |
|||
} |
|||
</style> |
|||
} |
|||
</style> |
|||
|
|||
@ -1,519 +1,506 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<div class="buttonbar" > |
|||
<div class="button" > |
|||
<i class="el-icon-refresh-right"></i>刷新 |
|||
</div> |
|||
<div class="button" > |
|||
<i class="el-icon-upload2"></i>导出Excal |
|||
</div> |
|||
</div> |
|||
<div class="board"> |
|||
|
|||
<div class="weaterMain" > |
|||
<el-table |
|||
:border="false" |
|||
:data="tableData" |
|||
height="790" |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
prop="nem" |
|||
label="" |
|||
width="30"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="address" |
|||
label="桩号范围" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="name" |
|||
label="能见度" |
|||
class-name="showClass" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span class="showClass">{{scope.row.name}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="date" |
|||
label="发生时间" |
|||
> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
<div class='congestion'> |
|||
<div class="buttonbar"> |
|||
<div class="button"> |
|||
<i class="el-icon-refresh-right"></i>刷新 |
|||
</div> |
|||
<div class="button"> |
|||
<i class="el-icon-upload2"></i>导出Excal |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
name: 'IndicatorQuery', |
|||
components: { |
|||
|
|||
}, |
|||
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' |
|||
},{ |
|||
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' |
|||
},{ |
|||
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' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
<div class="board"> |
|||
|
|||
<div class="weaterMain"> |
|||
<el-table :border="false" :data="tableData" style="width: 100%"> |
|||
<el-table-column prop="nem" label="" width="30"> |
|||
</el-table-column> |
|||
<el-table-column prop="address" label="桩号范围"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" label="能见度" class-name="showClass"> |
|||
<template slot-scope="scope"> |
|||
<span class="showClass">{{ scope.row.name }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="date" label="发生时间"> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
name: 'IndicatorQuery', |
|||
components: { |
|||
|
|||
}, |
|||
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' |
|||
}, { |
|||
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' |
|||
}, { |
|||
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' |
|||
}, { |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
selectItem(index) { |
|||
this.selectIndex = index; |
|||
}, |
|||
methods: { |
|||
selectItem(index){ |
|||
this.selectIndex = index; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
}, |
|||
mounted() { |
|||
|
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
|
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
}); |
|||
}, |
|||
} |
|||
</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: 100%; |
|||
flex-direction: column; |
|||
|
|||
.buttonbar { |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
padding-top: 15px; |
|||
|
|||
.showClass { |
|||
color:#00EBC1; |
|||
>.button { |
|||
display: inline-flex; |
|||
min-width: 90px; |
|||
height: 28px; |
|||
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|||
border-radius: 2px 2px 2px 2px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 1px 10px; |
|||
; |
|||
opacity: 1; |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
margin-left: 15px; |
|||
} |
|||
|
|||
::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; |
|||
.board { |
|||
height: 880px; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0px 0px; |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
margin-top: 20px; |
|||
|
|||
.buttonbar { |
|||
|
|||
|
|||
.warningList { |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
padding-top:15px; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
height: calc(100% - 40px); |
|||
|
|||
> .button { |
|||
>div { |
|||
display: inline-flex; |
|||
min-width:90px; |
|||
height:28px; |
|||
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|||
width: 100%; |
|||
height: 138px; |
|||
background: #133242; |
|||
border-radius: 2px 2px 2px 2px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 1px 10px;; |
|||
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: #FFFFFF; |
|||
margin-left:15px; |
|||
} |
|||
|
|||
} |
|||
|
|||
.board{ |
|||
height: 880px; |
|||
width: 100%; |
|||
padding: 0px 0px; |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
margin-top:20px; |
|||
|
|||
|
|||
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; |
|||
|
|||
.warningList { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
width:100%; |
|||
height:calc(100% - 40px); |
|||
>.value { |
|||
color: #fff; |
|||
} |
|||
|
|||
>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; |
|||
font-weight: 400; |
|||
color: #F4A125 |
|||
} |
|||
|
|||
} |
|||
.org { |
|||
font-size: 14px; |
|||
font-family: 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-w { |
|||
margin-left: 30px; |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 100%; |
|||
flex-direction: column; |
|||
|
|||
.right-text { |
|||
color:#fff; |
|||
} |
|||
} |
|||
.right-row { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.right-text { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.weaterMain { |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
width:100%; |
|||
height: 100%;; |
|||
|
|||
|
|||
.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; |
|||
font-weight: 800; |
|||
color: #FFFFFF; |
|||
z-index: 9; |
|||
} |
|||
.weaterMain { |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
width: 100%; |
|||
height: 100%; |
|||
; |
|||
|
|||
>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%); |
|||
} |
|||
.buttons { |
|||
width: 100%; |
|||
height: 38px; |
|||
|
|||
.yelSel::after { |
|||
background: linear-gradient(180deg, #FFFA79 0%, rgba(255,208,137,0) 100%); |
|||
} |
|||
>div { |
|||
display: inline-flex; |
|||
width: 10%; |
|||
height: 35px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 12px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 800; |
|||
color: #FFFFFF; |
|||
z-index: 9; |
|||
} |
|||
|
|||
.bluSel::after { |
|||
background: linear-gradient(180deg, #121ADE 0%, rgba(40,18,228,0) 100%); |
|||
} |
|||
>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; |
|||
} |
|||
|
|||
.orgSel::after{ |
|||
background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,0) 100%); |
|||
} |
|||
.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%); |
|||
} |
|||
|
|||
.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; |
|||
.bluSel::after { |
|||
background: linear-gradient(180deg, #121ADE 0%, rgba(40, 18, 228, 0) 100%); |
|||
} |
|||
.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; |
|||
|
|||
.orgSel::after { |
|||
background: linear-gradient(180deg, #FFA623 0%, rgba(255, 173, 53, 0) 100%); |
|||
} |
|||
} |
|||
|
|||
.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; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
} |
|||
.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; |
|||
} |
|||
|
|||
.num { |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 22px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #D9001B; |
|||
} |
|||
.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; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
|
|||
|
|||
.num { |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 22px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #D9001B; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
.charts { |
|||
height:180px; |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
.charts { |
|||
height: 180px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue