zhangzhang
12 months ago
13 changed files with 761 additions and 659 deletions
@ -1,76 +1,74 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'近一年交通组成特征指数最大值'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts keep-ratio " id="composeFeatures"></div> |
|||
</div> |
|||
<div class="congestion"> |
|||
<WgtTitle :title="'近一年交通组成特征指数最大值'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts keep-ratio" id="composeFeatures"></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); |
|||
}); |
|||
</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(); |
|||
} |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
}, |
|||
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; |
|||
flex: 1; |
|||
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: 1; |
|||
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; |
|||
|
|||
} |
|||
padding: 0px 20px; |
|||
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 1; |
|||
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> |
|||
|
|||
} |
|||
.charts { |
|||
height: 120px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,76 +1,74 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'近一年拥挤度最大值'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts keep-ratio " id="Crowding"></div> |
|||
</div> |
|||
<div class="congestion"> |
|||
<WgtTitle :title="'近一年拥挤度最大值'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts keep-ratio" id="Crowding"></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); |
|||
}); |
|||
</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(); |
|||
} |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
}, |
|||
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; |
|||
flex: 1; |
|||
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: 1; |
|||
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; |
|||
|
|||
} |
|||
padding: 0px 20px; |
|||
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 1; |
|||
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> |
|||
|
|||
} |
|||
.charts { |
|||
height: 120px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,374 +1,411 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'道路指标情况'"></WgtTitle> |
|||
<div class="board"> |
|||
<div id="roadChart1" class="keep-ratio" > |
|||
|
|||
</div> |
|||
<div id="roadChart2" class="keep-ratio" > |
|||
|
|||
</div> |
|||
<div id="roadChart3" class="keep-ratio" > |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="congestion"> |
|||
<WgtTitle :title="'道路指标情况'"></WgtTitle> |
|||
<div class="board"> |
|||
<div id="roadChart1" class="keep-ratio"></div> |
|||
<div id="roadChart2" class="keep-ratio"></div> |
|||
<div id="roadChart3" class="keep-ratio"></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' |
|||
</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", |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
selectItem(index){ |
|||
this.selectIndex = index; |
|||
}, |
|||
{ |
|||
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); |
|||
}); |
|||
}, |
|||
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; |
|||
}); |
|||
}, |
|||
}; |
|||
</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; |
|||
flex: 1; |
|||
width: 100%; |
|||
height: 188px; |
|||
flex-direction: column; |
|||
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; |
|||
} |
|||
|
|||
.board{ |
|||
height: 150px; |
|||
.warningList { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
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%); |
|||
height: calc(100% - 40px); |
|||
|
|||
> 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 { |
|||
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: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 |
|||
} |
|||
|
|||
} |
|||
} |
|||
width: 100%; |
|||
height: 30px; |
|||
flex-direction: row; |
|||
|
|||
>.right-w { |
|||
margin-left:30px; |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:100%; |
|||
flex-direction: column; |
|||
|
|||
.right-row { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.right-text { |
|||
color:#fff; |
|||
} |
|||
> .value { |
|||
color: #fff; |
|||
} |
|||
|
|||
.org { |
|||
font-size: 14px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #f4a125; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.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; |
|||
font-weight: 800; |
|||
color: #FFFFFF; |
|||
z-index: 9; |
|||
} |
|||
> .right-w { |
|||
margin-left: 30px; |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 100%; |
|||
flex-direction: column; |
|||
|
|||
>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; |
|||
} |
|||
.right-row { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.redSel::after { |
|||
background: linear-gradient(180deg, #E73A14 0%, rgba(240,92,9,0) 100%); |
|||
} |
|||
.right-text { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.yelSel::after { |
|||
background: linear-gradient(180deg, #FFFA79 0%, rgba(255,208,137,0) 100%); |
|||
} |
|||
.weaterMain { |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
width: 100%; |
|||
height: 40px; |
|||
|
|||
.bluSel::after { |
|||
background: linear-gradient(180deg, #121ADE 0%, rgba(40,18,228,0) 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; |
|||
} |
|||
|
|||
.orgSel::after{ |
|||
background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,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; |
|||
} |
|||
|
|||
.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; |
|||
.redSel::after { |
|||
background: linear-gradient( |
|||
180deg, |
|||
#e73a14 0%, |
|||
rgba(240, 92, 9, 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; |
|||
|
|||
.yelSel::after { |
|||
background: linear-gradient( |
|||
180deg, |
|||
#fffa79 0%, |
|||
rgba(255, 208, 137, 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; |
|||
} |
|||
.bluSel::after { |
|||
background: linear-gradient( |
|||
180deg, |
|||
#121ade 0%, |
|||
rgba(40, 18, 228, 0) 100% |
|||
); |
|||
} |
|||
|
|||
|
|||
.num { |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 22px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #D9001B; |
|||
} |
|||
.orgSel::after { |
|||
background: linear-gradient( |
|||
180deg, |
|||
#ffa623 0%, |
|||
rgba(255, 173, 53, 0) 100% |
|||
); |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
.charts { |
|||
height:180px; |
|||
.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; |
|||
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; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
|
|||
} |
|||
} |
|||
} |
|||
.charts { |
|||
height: 180px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,76 +1,76 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'近一年饱和度最大值'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts keep-ratio " id="temperatureTrend"></div> |
|||
</div> |
|||
<div class="congestion"> |
|||
<WgtTitle :title="'近一年饱和度最大值'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts keep-ratio" id="temperatureTrend"></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); |
|||
}); |
|||
</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(); |
|||
} |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
}, |
|||
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; |
|||
flex: 1; |
|||
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: 1; |
|||
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; |
|||
|
|||
} |
|||
padding: 0px 20px; |
|||
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 1; |
|||
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> |
|||
|
|||
} |
|||
.charts { |
|||
height: 120px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue