zhangzhang
12 months ago
7 changed files with 2384 additions and 1938 deletions
@ -0,0 +1,32 @@ |
|||
import request from "@/utils/request"; |
|||
|
|||
// 查询天气状况
|
|||
export function getWeatherFacts() { |
|||
return request({ |
|||
url: "/weatherForecast/weatherFacts", |
|||
method: "post", |
|||
}); |
|||
} |
|||
|
|||
// 按小时查询天气状况
|
|||
export function getHourlyWeather() { |
|||
return request({ |
|||
url: "/weatherForecast/hourlyWeather", |
|||
method: "post", |
|||
}); |
|||
} |
|||
|
|||
// 查询气象预警
|
|||
export function getMeteorologicalEarlyWarning() { |
|||
return request({ |
|||
url: "/weatherForecast/meteorologicalEarlyWarning", |
|||
method: "post", |
|||
}); |
|||
} |
|||
// 查询气象预警数量
|
|||
export function getQueryTheNumberOfMeteorologicalWarning() { |
|||
return request({ |
|||
url: "/weatherForecast/queryTheNumberOfMeteorologicalWarning", |
|||
method: "post", |
|||
}); |
|||
} |
|||
@ -1,177 +1,186 @@ |
|||
<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" > |
|||
<div class="text" >{{ it.text }}</div> |
|||
<div v-if="it.type == null || it.type == 'red'" class="num" > |
|||
<span>{{ it.value }}</span> |
|||
<span class="typeClass" >{{ it.class }}</span> |
|||
</div> |
|||
<div v-if="it.type == 'array' || it.type == 'arrayRed'" class="num" > |
|||
<span>{{ it.value[0] }}</span> |
|||
<span class="typeClass" >{{ it.class[0] }}</span> |
|||
<span class="midd" style="color:#fff;font-weight: 800; margin-right:2px;">/</span> |
|||
<span>{{ it.value[1] }}</span> |
|||
<span class="typeClass" >{{ it.class[1] }}</span> |
|||
</div> |
|||
</div> |
|||
<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" |
|||
> |
|||
<div class="text">{{ it.text }}</div> |
|||
<div v-if="it.type == null || it.type == 'red'" class="num"> |
|||
<span>{{ it.value }}</span> |
|||
<span class="typeClass">{{ it.class }}</span> |
|||
</div> |
|||
<div v-if="it.type == 'array' || it.type == 'arrayRed'" class="num"> |
|||
<span>{{ it.value[0] }}</span> |
|||
<span class="typeClass">{{ it.class[0] }}</span> |
|||
<span |
|||
class="midd" |
|||
style="color: #fff; font-weight: 800; margin-right: 2px" |
|||
>/</span |
|||
> |
|||
<span>{{ it.value[1] }}</span> |
|||
<span class="typeClass">{{ it.class[1] }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import WgtTitle from '../../../widgets/title' |
|||
|
|||
export default { |
|||
name: 'MonthStatistics', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
dataList:[ |
|||
{ |
|||
text:"气象正常路段里程", |
|||
value:"189", |
|||
class:"km" |
|||
}, |
|||
{ |
|||
text:"降水路段里程", |
|||
value:"0", |
|||
class:"km" |
|||
}, |
|||
{ |
|||
text:"团雾路段里程", |
|||
type:"array", |
|||
value:["0",'0'], |
|||
class:['处',"km"] |
|||
}, |
|||
{ |
|||
text:"气象预警信息", |
|||
type:"red", |
|||
value:"0", |
|||
class:"" |
|||
}, |
|||
{ |
|||
text:"能见度检测器", |
|||
type:"arrayRed", |
|||
value:["0",'5'], |
|||
class:['',""] |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
|
|||
}); |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import WgtTitle from "../../../widgets/title"; |
|||
import { getQueryTheNumberOfMeteorologicalWarning } from "@/api/perception/meteorologyCheck"; |
|||
|
|||
export default { |
|||
name: "MonthStatistics", |
|||
components: { |
|||
WgtTitle, |
|||
}, |
|||
data() { |
|||
return { |
|||
dataList: [ |
|||
{ |
|||
text: "气象正常路段里程", |
|||
value: "189", |
|||
class: "km", |
|||
}, |
|||
{ |
|||
text: "降水路段里程", |
|||
value: "0", |
|||
class: "km", |
|||
}, |
|||
{ |
|||
text: "团雾路段里程", |
|||
type: "array", |
|||
value: ["0", "0"], |
|||
class: ["处", "km"], |
|||
}, |
|||
{ |
|||
text: "气象预警信息", |
|||
type: "red", |
|||
value: "0", |
|||
class: "", |
|||
}, |
|||
{ |
|||
text: "能见度检测器", |
|||
type: "arrayRed", |
|||
value: ["0", "5"], |
|||
class: ["", ""], |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
|
|||
created() {}, |
|||
methods: { |
|||
getWeatherNum() { |
|||
getQueryTheNumberOfMeteorologicalWarning().then((res) => { |
|||
this.dataList[3].value = res.data; |
|||
console.log("res", res); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
}, |
|||
mounted() { |
|||
this.getWeatherNum(); |
|||
// |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
.board { |
|||
height: 150px; |
|||
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; |
|||
flex-direction: row; |
|||
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; |
|||
|
|||
.showRoad { |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:100%; |
|||
padding-top:40px; |
|||
.showRoad { |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding-top: 40px; |
|||
|
|||
.item.red { |
|||
.num { |
|||
font-size: 20px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #D9001B; |
|||
position: relative; |
|||
left:30px; |
|||
} |
|||
.item.red { |
|||
.num { |
|||
font-size: 20px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #d9001b; |
|||
position: relative; |
|||
left: 30px; |
|||
} |
|||
} |
|||
|
|||
.item.arrayRed { |
|||
.num span:first-child { |
|||
color: #D9001B; |
|||
margin:0px; |
|||
margin-left:20px; |
|||
} |
|||
.item.arrayRed { |
|||
.num span:first-child { |
|||
color: #d9001b; |
|||
margin: 0px; |
|||
margin-left: 20px; |
|||
} |
|||
|
|||
.midd { |
|||
color:#00D1FF !important; |
|||
} |
|||
.midd { |
|||
color: #00d1ff !important; |
|||
} |
|||
|
|||
.typeClass { |
|||
margin:0px; |
|||
} |
|||
.typeClass { |
|||
margin: 0px; |
|||
} |
|||
} |
|||
|
|||
.item { |
|||
display: inline-flex; |
|||
width:20%; |
|||
height:90px; |
|||
flex-direction: column; |
|||
.item { |
|||
display: inline-flex; |
|||
width: 20%; |
|||
height: 90px; |
|||
flex-direction: column; |
|||
|
|||
.text { |
|||
margin-bottom: 15px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
} |
|||
.text { |
|||
margin-bottom: 15px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.num { |
|||
margin-left:8px; |
|||
font-size: 20px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #00D1FF; |
|||
position: relative; |
|||
} |
|||
.num { |
|||
margin-left: 8px; |
|||
font-size: 20px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #00d1ff; |
|||
position: relative; |
|||
} |
|||
|
|||
.typeClass { |
|||
margin-left:8px; |
|||
margin-right:8px; |
|||
font-size: 12px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #aaa; |
|||
} |
|||
.typeClass { |
|||
margin-left: 8px; |
|||
margin-right: 8px; |
|||
font-size: 12px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #aaa; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
.charts { |
|||
height:180px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
} |
|||
.charts { |
|||
height: 180px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
File diff suppressed because it is too large
@ -1,296 +1,297 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'天气预报'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="showRoad" > |
|||
<div class="weaterIcon" > |
|||
<img src="./assets/weather.png" /> |
|||
<div > |
|||
{{ weaterType }} |
|||
</div> |
|||
</div> |
|||
<div class="weaterNum" > |
|||
<div class="num">{{ weaterNum }}° </div> |
|||
<div class="maxMin" > |
|||
{{ weaterMaxMin }} |
|||
</div> |
|||
</div> |
|||
<div class="windType" > |
|||
<div class="Warnings" >{{ windWarnings }} </div> |
|||
<div class="windTypeStr" > |
|||
{{ windType }} |
|||
</div> |
|||
</div> |
|||
<div class="line" ></div> |
|||
<div class="cityType" > |
|||
<img src="./assets/cityPosition.png" /> |
|||
<div class="cityText" > |
|||
{{ city }} |
|||
<div class="congestion"> |
|||
<WgtTitle :title="'天气预报'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="showRoad"> |
|||
<div class="weaterIcon"> |
|||
<img src="./assets/weather.png" /> |
|||
<div> |
|||
{{ weaterType }} |
|||
</div> |
|||
</div> |
|||
<div class="weaterNum"> |
|||
<div class="num">{{ weaterNum }}°</div> |
|||
<div class="maxMin"> |
|||
{{ weaterMaxMin }} |
|||
</div> |
|||
</div> |
|||
<div class="windType"> |
|||
<div class="Warnings">{{ windWarnings }}</div> |
|||
<div class="windTypeStr"> |
|||
{{ windType }} |
|||
</div> |
|||
</div> |
|||
<div class="line"></div> |
|||
<div class="cityType"> |
|||
<img src="./assets/cityPosition.png" /> |
|||
<div class="cityText"> |
|||
{{ city }} |
|||
</div> |
|||
</div> |
|||
<div class="temperature"> |
|||
<div class="temperItem" v-for="(it, index) in temperatures"> |
|||
<div class="text"> |
|||
<img src="./assets/polygon.png" /><span>{{ it.text }}</span> |
|||
</div> |
|||
<div class="val"> |
|||
{{ it.value }} |
|||
</div> |
|||
</div> |
|||
<div class="temperature" > |
|||
<div class="temperItem" v-for="(it,index) in temperatures" > |
|||
<div class="text" > |
|||
<img src="./assets/polygon.png" /><span>{{ it.text }}</span> |
|||
</div> |
|||
<div class="val"> |
|||
{{ it.value }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import WgtTitle from '../../../widgets/title' |
|||
|
|||
export default { |
|||
name: 'MonthStatistics', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
weaterNum:"21", |
|||
weaterMaxMin:"12 / 23°", |
|||
weaterType:"睛转小雨", |
|||
windWarnings:"大风预警", |
|||
windType:"东北风三级", |
|||
city:"济南", |
|||
temperatures:[ |
|||
{ |
|||
text:"体感", |
|||
value:"-14℃", |
|||
}, |
|||
{ |
|||
text:"PM2.5", |
|||
value:"90", |
|||
}, |
|||
{ |
|||
text:"湿度", |
|||
value:"94%", |
|||
}, |
|||
{ |
|||
text:"紫外线", |
|||
value:"3", |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
|
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
.board{ |
|||
height:150px; |
|||
width: 100%; |
|||
padding: 0px 20px; |
|||
background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%); |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: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; |
|||
</div> |
|||
</template> |
|||
|
|||
.showRoad { |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:100%; |
|||
padding-top:40px; |
|||
padding-left:58px; |
|||
<script> |
|||
import WgtTitle from "../../../widgets/title"; |
|||
|
|||
> div { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
|
|||
} |
|||
export default { |
|||
name: "MonthStatistics", |
|||
components: { |
|||
WgtTitle, |
|||
}, |
|||
data() { |
|||
return { |
|||
weaterNum: "21", |
|||
weaterMaxMin: "12 / 23°", |
|||
weaterType: "睛转小雨", |
|||
windWarnings: "大风预警", |
|||
windType: "东北风三级", |
|||
city: "济南", |
|||
temperatures: [ |
|||
{ |
|||
text: "体感", |
|||
value: "-14℃", |
|||
}, |
|||
{ |
|||
text: "PM2.5", |
|||
value: "90", |
|||
}, |
|||
{ |
|||
text: "湿度", |
|||
value: "94%", |
|||
}, |
|||
{ |
|||
text: "紫外线", |
|||
value: "3", |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
|
|||
.weaterIcon { |
|||
display: inline-flex; |
|||
width:60px; |
|||
height:80px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-right:27px; |
|||
created() {}, |
|||
methods: {}, |
|||
mounted() { |
|||
setTimeout(() => { |
|||
this.$nextTick(() => {}); |
|||
}); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
>img { |
|||
display: inline-flex; |
|||
width:43px; |
|||
height:43px; |
|||
<style lang="scss" scoped> |
|||
.congestion { |
|||
width: 100%; |
|||
.board { |
|||
height: 150px; |
|||
width: 100%; |
|||
padding: 0px 20px; |
|||
background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%); |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 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; |
|||
|
|||
} |
|||
.showRoad { |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding-top: 40px; |
|||
padding-left: 58px; |
|||
|
|||
>div { |
|||
font-size: 12px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
margin-top:10px; |
|||
} |
|||
} |
|||
|
|||
> div { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.weaterNum { |
|||
display: inline-flex; |
|||
width:60px; |
|||
height:80px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-right:27px; |
|||
.weaterIcon { |
|||
display: inline-flex; |
|||
width: 60px; |
|||
height: 80px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-right: 27px; |
|||
|
|||
.num { |
|||
font-size: 34px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
} |
|||
> img { |
|||
display: inline-flex; |
|||
width: 43px; |
|||
height: 43px; |
|||
} |
|||
|
|||
.maxMin { |
|||
font-size: 12px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
margin-top:6px; |
|||
} |
|||
> div { |
|||
font-size: 12px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
margin-top: 10px; |
|||
} |
|||
} |
|||
|
|||
.weaterNum { |
|||
display: inline-flex; |
|||
width: 60px; |
|||
height: 80px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-right: 27px; |
|||
|
|||
.num { |
|||
font-size: 34px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.windType{ |
|||
display: inline-flex; |
|||
width:60px; |
|||
height:80px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-right:27px; |
|||
.maxMin { |
|||
font-size: 12px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
margin-top: 6px; |
|||
} |
|||
} |
|||
|
|||
.Warnings { |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-top:23px; |
|||
width: 67px; |
|||
height: 18px; |
|||
background: rgba(245,80,80,0.4); |
|||
border-radius: 2px 2px 2px 2px; |
|||
opacity: 1; |
|||
border: 1px solid #F55050; |
|||
font-size: 12px; |
|||
font-family: Source Han Sans SC, Source Han Sans SC; |
|||
font-weight: 400; |
|||
color: #F55050; |
|||
} |
|||
.windType { |
|||
display: inline-flex; |
|||
width: 60px; |
|||
height: 80px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-right: 27px; |
|||
|
|||
.windTypeStr { |
|||
font-size: 12px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
margin-top:13px; |
|||
} |
|||
.Warnings { |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-top: 23px; |
|||
width: 67px; |
|||
height: 18px; |
|||
background: rgba(245, 80, 80, 0.4); |
|||
border-radius: 2px 2px 2px 2px; |
|||
opacity: 1; |
|||
border: 1px solid #f55050; |
|||
font-size: 12px; |
|||
font-family: Source Han Sans SC, Source Han Sans SC; |
|||
font-weight: 400; |
|||
color: #f55050; |
|||
} |
|||
|
|||
.line { |
|||
margin-left:37px; |
|||
margin-right:45px; |
|||
width: 1px; |
|||
height: 86px; |
|||
opacity: 1; |
|||
border: 1px solid; |
|||
border-image: linear-gradient(320deg, rgba(6, 92, 120, 1), rgba(6, 92, 120, 0)) 1 1; |
|||
.windTypeStr { |
|||
font-size: 12px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
margin-top: 13px; |
|||
} |
|||
} |
|||
|
|||
.cityType { |
|||
display: inline-flex; |
|||
width:60px; |
|||
height:80px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-right:27px; |
|||
.line { |
|||
margin-left: 37px; |
|||
margin-right: 45px; |
|||
width: 1px; |
|||
height: 86px; |
|||
opacity: 1; |
|||
border: 1px solid; |
|||
border-image: linear-gradient( |
|||
320deg, |
|||
rgba(6, 92, 120, 1), |
|||
rgba(6, 92, 120, 0) |
|||
) |
|||
1 1; |
|||
} |
|||
|
|||
img { |
|||
width:38px; |
|||
height:40px; |
|||
.cityType { |
|||
display: inline-flex; |
|||
width: 60px; |
|||
height: 80px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-right: 27px; |
|||
|
|||
} |
|||
img { |
|||
width: 38px; |
|||
height: 40px; |
|||
} |
|||
|
|||
.cityText { |
|||
font-size: 12px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
margin-top: 10px;; |
|||
} |
|||
.cityText { |
|||
font-size: 12px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
margin-top: 10px; |
|||
} |
|||
} |
|||
|
|||
.temperature { |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
width: 349px; |
|||
height: 66px; |
|||
background: transparent; |
|||
opacity: 1; |
|||
border: 1px solid; |
|||
border-image: linear-gradient(180deg, rgba(1, 37, 48, 0), rgba(1, 149, 196, 1)) 1 1; |
|||
border-radius: 8px; |
|||
.temperature { |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
width: 349px; |
|||
height: 66px; |
|||
background: transparent; |
|||
opacity: 1; |
|||
border: 1px solid; |
|||
border-image: linear-gradient( |
|||
180deg, |
|||
rgba(1, 37, 48, 0), |
|||
rgba(1, 149, 196, 1) |
|||
) |
|||
1 1; |
|||
border-radius: 8px; |
|||
|
|||
>div { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
width:25%; |
|||
height:100%; |
|||
justify-content: center; |
|||
align-items: center; |
|||
> div { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
width: 25%; |
|||
height: 100%; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
> .text { |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
> span { |
|||
opacity: 0.5; |
|||
margin-left:10px; |
|||
} |
|||
} |
|||
|
|||
.val { |
|||
margin-top:10px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
position: relative; |
|||
left:10px; |
|||
} |
|||
> .text { |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
> span { |
|||
opacity: 0.5; |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
|
|||
.val { |
|||
margin-top: 10px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
position: relative; |
|||
left: 10px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.charts { |
|||
height:180px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
} |
|||
.charts { |
|||
height: 180px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,393 +1,464 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'气象预警信息'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="weaterMain"> |
|||
<div class="weaterTitle"> |
|||
<span class="text">当前气象预警信息数：</span> |
|||
<span class="num">113</span> |
|||
</div> |
|||
<div> |
|||
<el-select v-model="colorSelect" size="mini" class="selectRoad" placeholder="请选择"> |
|||
<el-option v-for="item in colors" :key="item.value" :label="item.label" :value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="congestion"> |
|||
<WgtTitle :title="'气象预警信息'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="weaterMain"> |
|||
<div class="weaterTitle"> |
|||
<span class="text">当前气象预警信息数：</span> |
|||
<span class="num">{{ warningData.length }}</span> |
|||
</div> |
|||
<div> |
|||
<el-select |
|||
v-model="colorSelect" |
|||
size="mini" |
|||
class="selectRoad" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in colors" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
<div class="warningList" v-if="warningList.length > 0"> |
|||
<div class="itemWarning" v-for="item in warningList"> |
|||
<div class="left-w"> |
|||
<div class="left-row"> |
|||
<div class="label">预警类型：</div> |
|||
<div class="value"> |
|||
{{ item.typeName }} |
|||
</div> |
|||
</div> |
|||
<div class="left-row"> |
|||
<div class="label">预警等级：</div> |
|||
<div :class="item.severityColor"> |
|||
{{ item.severityColor }} |
|||
{{ |
|||
item.severity == "Cancel" |
|||
? "取消" |
|||
: item.severity == "None" |
|||
? "无" |
|||
: item.severity == "Unknown" |
|||
? "未知" |
|||
: item.severity == "Standard" |
|||
? "标准" |
|||
: item.severity == "Minor" |
|||
? "次要" |
|||
: item.severity == "Moderate" |
|||
? "温和" |
|||
: item.severity == "Major" |
|||
? "主要" |
|||
: item.severity == "Severe" |
|||
? "严峻" |
|||
: item.severity == "Extreme" |
|||
? "极端" |
|||
: "" |
|||
}} |
|||
</div> |
|||
</div> |
|||
<div class="warningList"> |
|||
<div class="itemWarning" v-for="(item, i) in warnings"> |
|||
<div class="left-w"> |
|||
<div class="left-row"> |
|||
<div class="label"> |
|||
预警类型： |
|||
</div> |
|||
<div class="value"> |
|||
{{ item.class }} |
|||
</div> |
|||
</div> |
|||
<div class="left-row"> |
|||
<div class="label"> |
|||
预警等级： |
|||
</div> |
|||
<div :class="'value ' + item.type"> |
|||
{{ item.lay }} |
|||
</div> |
|||
</div> |
|||
<div class="left-row"> |
|||
<div class="label"> |
|||
预警范围： |
|||
</div> |
|||
<div class="value"> |
|||
{{ item.scope }} |
|||
</div> |
|||
</div> |
|||
<div class="left-row"> |
|||
<div class="label"> |
|||
预警发布时间： |
|||
</div> |
|||
<div class="value"> |
|||
{{ item.dateTime }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="right-w"> |
|||
<div class="right-row"> |
|||
预警内容: |
|||
</div> |
|||
<div class="right-text"> |
|||
{{ item.text }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- <div class="left-row"> |
|||
<div class="label">预警范围：</div> |
|||
<div class="value"> |
|||
{{ item.scope }} |
|||
</div> |
|||
</div> --> |
|||
<div class="left-row"> |
|||
<div class="label">预警发布时间：</div> |
|||
<div class="value"> |
|||
{{ item.pubTime }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="right-w"> |
|||
<div class="right-row">预警内容:</div> |
|||
<div class="right-text"> |
|||
{{ item.text }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<Empty v-else text="暂无数据..."></Empty> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
|
|||
<script> |
|||
import { color } from 'echarts'; |
|||
import WgtTitle from '../../../../../widgets/title' |
|||
import { color } from "echarts"; |
|||
import WgtTitle from "../../../../../widgets/title"; |
|||
import { getMeteorologicalEarlyWarning } from "@/api/perception/meteorologyCheck"; |
|||
|
|||
export default { |
|||
name: 'infoWarning', |
|||
components: { |
|||
WgtTitle |
|||
name: "infoWarning", |
|||
components: { |
|||
WgtTitle, |
|||
}, |
|||
data() { |
|||
return { |
|||
warningList: [], |
|||
warningData: [ |
|||
// { typeName: "warning", severityColor: "Red", severity: "Severe" }, |
|||
// { typeName: "warning", severityColor: "White", severity: "白色" }, |
|||
// { typeName: "warning", severityColor: "Blue", severity: "蓝色" }, |
|||
], |
|||
colorSelect: "all", |
|||
colors: [ |
|||
{ label: "全部", value: "all" }, |
|||
{ label: "白色", value: "White" }, |
|||
{ label: "蓝色", value: "Blue" }, |
|||
{ label: "绿色", value: "Green" }, |
|||
{ label: "黄色", value: "Yellow" }, |
|||
{ label: "橙色", value: "Orange" }, |
|||
{ label: "红色", value: "Red" }, |
|||
{ label: "黑色", value: "Black" }, |
|||
], |
|||
}; |
|||
}, |
|||
watch: { |
|||
colorSelect(val) { |
|||
if (val !== "all") { |
|||
const data = this.warningData.filter( |
|||
(item) => item.severityColor === val |
|||
); |
|||
this.warningList = data; |
|||
this.warningList = data; |
|||
} else { |
|||
this.warningList = this.warningData; |
|||
} |
|||
|
|||
// this.changeValue(val); |
|||
}, |
|||
data() { |
|||
return { |
|||
colorSelect: "org", |
|||
colors: [ |
|||
{ label: '全部', value: "all" }, |
|||
{ label: '橙色', value: "org" }, |
|||
{ label: '红色', value: "red" }, |
|||
{ label: '蓝色', value: "bule" }, |
|||
], |
|||
warnings: [ |
|||
{ |
|||
type: "org", |
|||
class: "道路结冰", |
|||
lay: "橙色", |
|||
scope: "K100+000", |
|||
dateTime: "2023-12-31 13:00:00", |
|||
text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|||
}, |
|||
{ |
|||
type: "org", |
|||
class: "道路结冰", |
|||
lay: "橙色", |
|||
scope: "K100+000", |
|||
dateTime: "2023-12-31 13:00:00", |
|||
text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|||
}, |
|||
{ |
|||
type: "org", |
|||
class: "道路结冰", |
|||
lay: "橙色", |
|||
scope: "K100+000", |
|||
dateTime: "2023-12-31 13:00:00", |
|||
text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|||
}, |
|||
{ |
|||
type: "org", |
|||
class: "道路结冰", |
|||
lay: "橙色", |
|||
scope: "K100+000", |
|||
dateTime: "2023-12-31 13:00:00", |
|||
text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
selectItem(index) { |
|||
this.selectIndex = index; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
|
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
|
|||
}, |
|||
created() {}, |
|||
methods: { |
|||
getWarningData() { |
|||
getMeteorologicalEarlyWarning().then((res) => { |
|||
console.log("气象预警", res.data); |
|||
let data = []; |
|||
for (let key in res.data) { |
|||
if (res.data[key].length > 0) { |
|||
res.data[key].forEach((value) => { |
|||
data.push(value); |
|||
}); |
|||
}); |
|||
} |
|||
} |
|||
this.warningData = data; |
|||
this.warningList = this.warningData; |
|||
}); |
|||
}, |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getWarningData(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.selectRoad { |
|||
width: 89px; |
|||
margin-top: 5px; |
|||
margin-left: 20px; |
|||
border: 1px solid #00B3CC; |
|||
|
|||
::v-deep { |
|||
.el-input__inner { |
|||
background-color: #064258 !important; |
|||
border-width: 0px !important; |
|||
} |
|||
<style lang="scss" scoped> |
|||
.selectRoad { |
|||
width: 89px; |
|||
margin-top: 5px; |
|||
margin-left: 20px; |
|||
border: 1px solid #00b3cc; |
|||
|
|||
::v-deep { |
|||
.el-input__inner { |
|||
background-color: #064258 !important; |
|||
border-width: 0px !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.congestion { |
|||
display: inline-flex; |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 600px; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.board { |
|||
height: 690px; |
|||
width: 100%; |
|||
height: 600px; |
|||
padding: 0px 0px; |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.board { |
|||
height: 690px; |
|||
margin-top: 20px; |
|||
|
|||
.warningList { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
height: calc(100% - 40px); |
|||
|
|||
> div::after { |
|||
content: ""; |
|||
top: 0; |
|||
left: -3px; |
|||
position: absolute; |
|||
width: 0; |
|||
height: 0; |
|||
border-right: 6px solid transparent; |
|||
border-left: 6px solid transparent; |
|||
border-bottom: 6px solid rgba(55, 231, 255, 1); |
|||
transform: rotate(-45deg); |
|||
} |
|||
|
|||
> div::before { |
|||
content: ""; |
|||
bottom: 0; |
|||
right: -3px; |
|||
position: absolute; |
|||
width: 0; |
|||
height: 0; |
|||
border-right: 6px solid transparent; |
|||
border-left: 6px solid transparent; |
|||
border-bottom: 6px solid rgba(55, 231, 255, 1); |
|||
transform: rotate(135deg); |
|||
} |
|||
|
|||
> div { |
|||
position: relative; |
|||
display: inline-flex; |
|||
width: 100%; |
|||
padding: 0px 0px; |
|||
border-radius: 5px 5px 5px 5px; |
|||
height: 138px; |
|||
background: #133242; |
|||
border-radius: 2px 2px 2px 2px; |
|||
opacity: 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
border: 1px solid; |
|||
border-image: linear-gradient( |
|||
360deg, |
|||
rgba(55, 231, 255, 0.2), |
|||
rgba(55, 231, 255, 0) |
|||
) |
|||
1 1; |
|||
margin-top: 20px; |
|||
|
|||
.warningList { |
|||
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; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
height: calc(100% - 40px); |
|||
height: 30px; |
|||
flex-direction: row; |
|||
|
|||
>div::after { |
|||
content: ""; |
|||
top: 0; |
|||
left: -3px; |
|||
position: absolute; |
|||
width: 0; |
|||
height: 0; |
|||
border-right: 6px solid transparent; |
|||
border-left: 6px solid transparent; |
|||
border-bottom: 6px solid rgba(55, 231, 255, 1); |
|||
transform: rotate(-45deg); |
|||
> .value { |
|||
color: #fff; |
|||
} |
|||
|
|||
>div::before { |
|||
content: ""; |
|||
bottom: 0; |
|||
right: -3px; |
|||
position: absolute; |
|||
width: 0; |
|||
height: 0; |
|||
border-right: 6px solid transparent; |
|||
border-left: 6px solid transparent; |
|||
border-bottom: 6px solid rgba(55, 231, 255, 1); |
|||
transform: rotate(135deg); |
|||
.org { |
|||
font-size: 14px !important; |
|||
margin-top: 2px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #f4a125; |
|||
} |
|||
|
|||
>div { |
|||
position: relative; |
|||
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, 0.2), rgba(55, 231, 255, 0)) 1 1; |
|||
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 !important; |
|||
margin-top: 2px; |
|||
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-text { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.White { |
|||
color: #fff; |
|||
} |
|||
.Blue { |
|||
color: blue; |
|||
} |
|||
.Green { |
|||
color: green; |
|||
} |
|||
.Yellow { |
|||
color: yellow; |
|||
} |
|||
.Orange { |
|||
color: orange; |
|||
} |
|||
.Red { |
|||
color: red; |
|||
} |
|||
.Black { |
|||
color: #000; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.weaterMain { |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
width: 100%; |
|||
height: 40px; |
|||
> .right-w { |
|||
margin-left: 30px; |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 100%; |
|||
flex-direction: column; |
|||
|
|||
.right-row { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.buttons { |
|||
width: 100%; |
|||
height: 38px; |
|||
margin-left: 20px; |
|||
|
|||
>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; |
|||
} |
|||
|
|||
>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; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.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; |
|||
margin-left: 20px; |
|||
|
|||
> 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; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.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: 287px; |
|||
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; |
|||
margin-left: 30px; |
|||
; |
|||
.bluSel::after { |
|||
background: linear-gradient( |
|||
180deg, |
|||
#121ade 0%, |
|||
rgba(40, 18, 228, 0) 100% |
|||
); |
|||
} |
|||
|
|||
>span.text { |
|||
display: inline-flex; |
|||
font-size: 16px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
} |
|||
.orgSel::after { |
|||
background: linear-gradient( |
|||
180deg, |
|||
#ffa623 0%, |
|||
rgba(255, 173, 53, 0) 100% |
|||
); |
|||
} |
|||
} |
|||
|
|||
.weaterTitle::after { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
width: 100%; |
|||
height: 2px; |
|||
background: linear-gradient( |
|||
90deg, |
|||
rgba(189, 255, 246, 0) 0%, |
|||
#bdfff6 52%, |
|||
rgba(189, 255, 246, 0) 100% |
|||
); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 1; |
|||
} |
|||
|
|||
.num { |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 20px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #D9001B; |
|||
} |
|||
} |
|||
.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: 287px; |
|||
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; |
|||
margin-left: 30px; |
|||
> span.text { |
|||
display: inline-flex; |
|||
font-size: 16px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.num { |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 20px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #d9001b; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.charts { |
|||
height: 180px; |
|||
width: 100%; |
|||
height: 180px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,160 +1,153 @@ |
|||
<template> |
|||
<div class='TrafficFlow'> |
|||
<section class="content"> |
|||
<RoadNetwork class="content-l" /> |
|||
<WeatherForecast class="content-l" /> |
|||
</section> |
|||
<section class="foot"> |
|||
<el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs"> |
|||
<el-tab-pane label="短临预报" name="first"> |
|||
<div class="foot-shot" > |
|||
<SortFaceForecast /> |
|||
</div> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="站点气象信息查询" name="second"> |
|||
<WeatherInfoQuery ref="infoQuery" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="气象预警" name="third"> |
|||
<WeatherWarning /> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</section> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import RoadNetwork from './components/roadNetwork'; |
|||
import WeatherForecast from './components/weatherForecast'; |
|||
import SortFaceForecast from './components/sortFaceForecast'; |
|||
import WeatherInfoQuery from './components/weatherInfoQuery'; |
|||
import WeatherWarning from './components/weatherWarning'; |
|||
<div class="TrafficFlow"> |
|||
<section class="content"> |
|||
<RoadNetwork class="content-l" /> |
|||
<WeatherForecast class="content-l" style="margin-right: 0" /> |
|||
</section> |
|||
<section class="foot"> |
|||
<el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs"> |
|||
<el-tab-pane label="短临预报" name="first"> |
|||
<div class="foot-shot"> |
|||
<SortFaceForecast /> |
|||
</div> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="站点气象信息查询" name="second"> |
|||
<WeatherInfoQuery ref="infoQuery" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="气象预警" name="third"> |
|||
<WeatherWarning /> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</section> |
|||
</div> |
|||
</template> |
|||
|
|||
export default { |
|||
name: 'MeteorologyCheck', |
|||
components: { |
|||
RoadNetwork, |
|||
WeatherForecast, |
|||
SortFaceForecast, |
|||
WeatherInfoQuery, |
|||
WeatherWarning |
|||
}, |
|||
data(){ |
|||
return { |
|||
activeName:"first" |
|||
} |
|||
<script> |
|||
import RoadNetwork from "./components/roadNetwork"; |
|||
import WeatherForecast from "./components/weatherForecast"; |
|||
import SortFaceForecast from "./components/sortFaceForecast"; |
|||
import WeatherInfoQuery from "./components/weatherInfoQuery"; |
|||
import WeatherWarning from "./components/weatherWarning"; |
|||
|
|||
export default { |
|||
name: "MeteorologyCheck", |
|||
components: { |
|||
RoadNetwork, |
|||
WeatherForecast, |
|||
SortFaceForecast, |
|||
WeatherInfoQuery, |
|||
WeatherWarning, |
|||
}, |
|||
data() { |
|||
return { |
|||
activeName: "first", |
|||
}; |
|||
}, |
|||
methods: { |
|||
changeTabs() { |
|||
this.$refs.infoQuery.resizeChart(); |
|||
}, |
|||
methods:{ |
|||
changeTabs(){ |
|||
this.$refs.infoQuery.resizeChart(); |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
::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; |
|||
} |
|||
<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__active-bar { |
|||
min-width: 128px; |
|||
} |
|||
|
|||
::v-deep .el-tabs__nav-wrap::after { |
|||
background-color: #133242; |
|||
opacity: 0.1; |
|||
} |
|||
::v-deep .el-tabs__nav-wrap::after { |
|||
background-color: #133242; |
|||
opacity: 0.1; |
|||
} |
|||
|
|||
.footTabs { |
|||
display: inline; |
|||
width:99%; |
|||
.footTabs { |
|||
display: inline; |
|||
width: 100%; |
|||
} |
|||
|
|||
} |
|||
.TrafficFlow { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
z-index: 6; |
|||
color: white; |
|||
|
|||
.TrafficFlow { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
z-index: 6; |
|||
color: white; |
|||
|
|||
.head{ |
|||
width: 98%; |
|||
margin: auto; |
|||
margin-top: 15px; |
|||
.head { |
|||
width: 98%; |
|||
margin: auto; |
|||
margin-top: 15px; |
|||
} |
|||
.content { |
|||
width: 98%; |
|||
margin: auto; |
|||
display: flex; |
|||
flex: 1; |
|||
pointer-events: none; |
|||
margin-top: 19px; |
|||
> div { |
|||
pointer-events: auto; |
|||
} |
|||
.content { |
|||
width: 98%; |
|||
margin: auto; |
|||
display: flex; |
|||
flex: 1; |
|||
pointer-events: none; |
|||
margin-top: 19px; |
|||
>div { |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
.content-l { |
|||
width: calc(50%); |
|||
min-width:460px; |
|||
margin-right:20px; |
|||
|
|||
} |
|||
|
|||
|
|||
.content-m { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
width: calc(100% / 4 ); |
|||
margin-right:20px; |
|||
.content-l { |
|||
width: calc(50%); |
|||
min-width: 460px; |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.content-m-t { |
|||
width:100%; |
|||
height:240px; |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
.content-r { |
|||
width: 49.4%; |
|||
.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; |
|||
} |
|||
} |
|||
.foot{ |
|||
width: 98%; |
|||
margin: auto; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex: 1; |
|||
pointer-events: none; |
|||
margin-top: 8px; |
|||
>div { |
|||
pointer-events: auto; |
|||
} |
|||
.content-r { |
|||
width: 49.4%; |
|||
} |
|||
} |
|||
.foot { |
|||
width: 98%; |
|||
margin: auto; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex: 1; |
|||
pointer-events: none; |
|||
margin-top: 8px; |
|||
> div { |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
.foot-w { |
|||
width:100%; |
|||
.foot-w { |
|||
width: 100%; |
|||
} |
|||
|
|||
} |
|||
|
|||
.foot-l { |
|||
width: 726px; |
|||
} |
|||
.foot-m { |
|||
width: 613px; |
|||
} |
|||
.foot-r { |
|||
width: 493px; |
|||
} |
|||
.foot-l { |
|||
width: 726px; |
|||
} |
|||
.foot-m { |
|||
width: 613px; |
|||
} |
|||
.foot-r { |
|||
width: 493px; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
} |
|||
</style> |
|||
|
|||
File diff suppressed because it is too large
Loading…
Reference in new issue