hui
11 months ago
14 changed files with 461 additions and 354 deletions
@ -1,75 +1,98 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'气温变化趋势'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts" id="temperatureTrend"></div> |
|||
</div> |
|||
<div class="congestion"> |
|||
<WgtTitle :title="'气温变化趋势'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts" id="temperatureTrend"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import WgtTitle from '../../../../../widgets/title' |
|||
import * as echarts from "echarts"; |
|||
import chartsStatistics from "./assets/charts"; |
|||
export default { |
|||
name: 'temperatureTrend', |
|||
components: { |
|||
WgtTitle |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import WgtTitle from "../../../../../widgets/title"; |
|||
import * as echarts from "echarts"; |
|||
import temperatureCharts from "./assets/charts"; |
|||
import { |
|||
getListLatest, |
|||
getDeviceNameListLatest, |
|||
getIdDevices, |
|||
} from "@/api/perception/meteorologyCheck"; |
|||
export default { |
|||
name: "temperatureTrend", |
|||
components: { |
|||
WgtTitle, |
|||
}, |
|||
props: { |
|||
data: { |
|||
type: Array, |
|||
}, |
|||
data() { |
|||
return { |
|||
myChart:null, |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
reiszeChart(){ |
|||
this.$nextTick(() => { |
|||
if ( this.myChart ) { |
|||
this.myChart.resize(); |
|||
} |
|||
}, |
|||
watch: { |
|||
data: { |
|||
handler(data) { |
|||
let newData = []; |
|||
data.forEach((item) => { |
|||
newData.push(item.avgVisibility); |
|||
}); |
|||
} |
|||
}, |
|||
update(){ |
|||
|
|||
temperatureCharts.series[0].data = newData; |
|||
this.myChart.setOption(temperatureCharts); |
|||
}, |
|||
deep: true, |
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
this.myChart = echarts.init(document.getElementById('temperatureTrend')); |
|||
this.myChart.setOption(chartsStatistics); |
|||
}); |
|||
}, |
|||
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(temperatureCharts); |
|||
}); |
|||
}); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.congestion { |
|||
display: flex; |
|||
flex-direction: column; |
|||
.board { |
|||
flex: 1; |
|||
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; |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
display: flex; flex-direction: column; |
|||
.board{ |
|||
flex: 1; |
|||
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:200px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
} |
|||
.charts { |
|||
height: 200px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,74 +1,94 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'能见度变化趋势'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts" id="VisibilityTrends"></div> |
|||
</div> |
|||
<div class="congestion"> |
|||
<WgtTitle :title="'能见度变化趋势'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="charts" id="VisibilityTrends"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import WgtTitle from '../../../../../widgets/title' |
|||
import * as echarts from "echarts"; |
|||
import chartsStatistics from "./assets/charts"; |
|||
export default { |
|||
name: 'VisibilityTrends', |
|||
components: { |
|||
WgtTitle |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import WgtTitle from "../../../../../widgets/title"; |
|||
import * as echarts from "echarts"; |
|||
import visibilityCharts from "./assets/charts"; |
|||
export default { |
|||
name: "VisibilityTrends", |
|||
components: { |
|||
WgtTitle, |
|||
}, |
|||
props: { |
|||
data: { |
|||
type: Array, |
|||
}, |
|||
data() { |
|||
return { |
|||
myChart:null, |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
reiszeChart(){ |
|||
|
|||
this.$nextTick(() => { |
|||
if ( this.myChart ) { |
|||
this.myChart.resize(); |
|||
} |
|||
}, |
|||
watch: { |
|||
data: { |
|||
handler(data) { |
|||
let newData = []; |
|||
data.forEach((item) => { |
|||
newData.push(item.avgTemperature); |
|||
}); |
|||
} |
|||
}, |
|||
update(){ |
|||
|
|||
visibilityCharts.series[0].data = newData; |
|||
this.myChart.setOption(visibilityCharts); |
|||
}, |
|||
deep: true, |
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
this.myChart = echarts.init(document.getElementById('VisibilityTrends')); |
|||
this.myChart.setOption(chartsStatistics); |
|||
}); |
|||
}, |
|||
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("VisibilityTrends") |
|||
); |
|||
this.myChart.setOption(visibilityCharts); |
|||
}); |
|||
}); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.congestion { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: stretch; |
|||
.board { |
|||
flex: 1; |
|||
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; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: stretch; |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
display: flex; flex-direction: column; align-items: stretch; |
|||
.board{ |
|||
flex: 1; |
|||
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; flex-direction: column; |
|||
justify-content: center; |
|||
align-items: stretch; |
|||
} |
|||
} |
|||
.charts { |
|||
height:200px; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
} |
|||
.charts { |
|||
height: 200px; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,156 +1,167 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'气象监测数据'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="showRoad"> |
|||
<div :class="it.type?it.type+' item':'item'" v-for="(it,index) in dataList" > |
|||
<span class="label" >{{ it.text }}</span> |
|||
<span class="text" >{{ it.value }}</span> |
|||
</div> |
|||
<div class="congestion"> |
|||
<WgtTitle :title="'气象监测数据'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="showRoad"> |
|||
<div class="item"> |
|||
<span class="label">温度：</span> |
|||
<span class="text">{{ |
|||
data.temperature ? data.temperature + "℃" : "-" |
|||
}}</span> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="label">湿度：</span> |
|||
<span class="text">{{ |
|||
data.humidity ? data.humidity + "mm" : "-" |
|||
}}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="label">风向：</span> |
|||
<span class="text">{{ |
|||
data.windDirection ? data.windDirection + "°" : "-" |
|||
}}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="label">风速：</span> |
|||
<span class="text">{{ |
|||
data.windSpeed ? data.windSpeed + "级" : "-" |
|||
}}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="label">能见度：</span> |
|||
<span class="text">{{ |
|||
data.visibilityType ? data.visibilityType + "级" : "-" |
|||
}}</span> |
|||
</div> |
|||
<!-- <div class="item"> |
|||
<span class="label">能见度类型：</span> |
|||
<span class="text">{{ data.visibilityType }}</span> |
|||
</div> --> |
|||
<!-- <div class="item"> |
|||
<span class="label">降雨类型：</span> |
|||
<span class="text">{{ |
|||
data.recipitationType ? data.recipitationType : "-" |
|||
}}</span> |
|||
</div> --> |
|||
<div class="item"> |
|||
<span class="label">降雨量：</span> |
|||
<span class="text">{{ |
|||
data.rainfall ? data.rainfall + "mm" : "-" |
|||
}}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="label">路面温度：</span> |
|||
<span class="text">{{ |
|||
data.remoteRoadSurfaceTemperature |
|||
? data.remoteRoadSurfaceTemperature + "℃" |
|||
: "-" |
|||
}}</span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="label"> 气压：</span> |
|||
<span class="text">{{ |
|||
data.atmosphericPressure ? data.atmosphericPressure + "Pa" : "-" |
|||
}}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import WgtTitle from '../../../../../widgets/title' |
|||
|
|||
export default { |
|||
name: 'MonthStatistics', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
myChart:null, |
|||
dataList:[ |
|||
{ |
|||
text:"天气状态：", |
|||
value:"无降水", |
|||
class:"km" |
|||
}, |
|||
{ |
|||
text:"风速：", |
|||
value:"55m/s", |
|||
class:"km" |
|||
}, |
|||
{ |
|||
text:"天气温度：", |
|||
value:"23°C", |
|||
class:"km" |
|||
}, |
|||
{ |
|||
text:"风向：", |
|||
value:"东南风", |
|||
class:"km" |
|||
}, |
|||
{ |
|||
text:"路面温度：", |
|||
value:"23°C", |
|||
class:"km" |
|||
}, { |
|||
text:"风级：", |
|||
value:"2级", |
|||
class:"km" |
|||
}, { |
|||
text:"空气湿度：", |
|||
value:"79.40%", |
|||
class:"km" |
|||
}, { |
|||
text:"道路危险等级：", |
|||
value:"0级", |
|||
class:"km" |
|||
}, { |
|||
text:"能见度：", |
|||
value:"2610.00m", |
|||
class:"km" |
|||
}, { |
|||
text:"能见度：", |
|||
value:"0.00m", |
|||
class:"km" |
|||
}, { |
|||
text:"能见度：", |
|||
value:"0.00m", |
|||
class:"km" |
|||
}, { |
|||
text:"能见度：", |
|||
value:"0.00m", |
|||
class:"km" |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import WgtTitle from "../../../../../widgets/title"; |
|||
|
|||
export default { |
|||
name: "MonthStatistics", |
|||
components: { |
|||
WgtTitle, |
|||
}, |
|||
props: { |
|||
data: { |
|||
type: Object, |
|||
default: () => {}, |
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
|
|||
}); |
|||
}); |
|||
}, |
|||
watch: { |
|||
data: { |
|||
handler(newVal) { |
|||
console.log(newVal); |
|||
}, |
|||
deep: true, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
width: 100%; display: flex; |
|||
.board{ |
|||
flex: 1; |
|||
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; |
|||
flex-direction: row; |
|||
overflow: auto; |
|||
}, |
|||
data() { |
|||
return { |
|||
myChart: null, |
|||
dataList: [], |
|||
}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => {}); |
|||
}); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
.showRoad { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
<style lang="scss" scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
display: flex; |
|||
.board { |
|||
flex: 1; |
|||
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; |
|||
flex-direction: row; |
|||
overflow: auto; |
|||
|
|||
> .item { |
|||
display: inline-flex; |
|||
width:50%; |
|||
height:23px; |
|||
margin-top:12px; |
|||
flex-direction: row; |
|||
.showRoad { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
> span.label { |
|||
width:50%; |
|||
height:25px; |
|||
font-size: 12px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #00B3CC; |
|||
} |
|||
> .item { |
|||
display: inline-flex; |
|||
width: 50%; |
|||
height: 23px; |
|||
margin-top: 12px; |
|||
flex-direction: row; |
|||
|
|||
>span.text { |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
} |
|||
> span.label { |
|||
width: 50%; |
|||
height: 25px; |
|||
font-size: 12px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #00b3cc; |
|||
} |
|||
} |
|||
|
|||
> span.text { |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.charts { |
|||
height:180px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
} |
|||
.charts { |
|||
height: 180px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue