|
|
|
@ -2,63 +2,59 @@ |
|
|
|
<div class='congestion'> |
|
|
|
<WgtTitle :title="'气象预警信息'"></WgtTitle> |
|
|
|
<div class="board"> |
|
|
|
<div class="weaterMain" > |
|
|
|
<div class="weaterTitle" > |
|
|
|
<div class="weaterMain"> |
|
|
|
<div class="weaterTitle"> |
|
|
|
<span class="text">当前气象预警信息数：</span> |
|
|
|
<span class="num" >113</span> |
|
|
|
<span class="num">113</span> |
|
|
|
</div> |
|
|
|
<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 v-for="item in colors" :key="item.value" :label="item.label" :value="item.value"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</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 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" > |
|
|
|
<div class="value"> |
|
|
|
{{ item.class }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="left-row" > |
|
|
|
<div class="label" > |
|
|
|
<div class="left-row"> |
|
|
|
<div class="label"> |
|
|
|
预警等级： |
|
|
|
</div> |
|
|
|
<div :class="'value '+item.type" > |
|
|
|
<div :class="'value ' + item.type"> |
|
|
|
{{ item.lay }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="left-row" > |
|
|
|
<div class="label" > |
|
|
|
<div class="left-row"> |
|
|
|
<div class="label"> |
|
|
|
预警范围： |
|
|
|
</div> |
|
|
|
<div class="value" > |
|
|
|
<div class="value"> |
|
|
|
{{ item.scope }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="left-row" > |
|
|
|
<div class="label" > |
|
|
|
<div class="left-row"> |
|
|
|
<div class="label"> |
|
|
|
预警发布时间： |
|
|
|
</div> |
|
|
|
<div class="value" > |
|
|
|
<div class="value"> |
|
|
|
{{ item.dateTime }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="right-w" > |
|
|
|
<div class="right-row" > |
|
|
|
<div class="right-w"> |
|
|
|
<div class="right-row"> |
|
|
|
预警内容: |
|
|
|
</div> |
|
|
|
<div class="right-text" > |
|
|
|
<div class="right-text"> |
|
|
|
{{ item.text }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -66,58 +62,58 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { color } from 'echarts'; |
|
|
|
<script> |
|
|
|
import { color } from 'echarts'; |
|
|
|
import WgtTitle from '../../../../../widgets/title' |
|
|
|
|
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: 'infoWarning', |
|
|
|
components: { |
|
|
|
WgtTitle |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
colorSelect:"org", |
|
|
|
colors:[ |
|
|
|
{label:'全部',value:"all"}, |
|
|
|
{label:'橙色',value:"org"}, |
|
|
|
{label:'红色',value:"red"}, |
|
|
|
{label:'蓝色',value:"bule"}, |
|
|
|
colorSelect: "org", |
|
|
|
colors: [ |
|
|
|
{ label: '全部', value: "all" }, |
|
|
|
{ label: '橙色', value: "org" }, |
|
|
|
{ label: '红色', value: "red" }, |
|
|
|
{ label: '蓝色', value: "bule" }, |
|
|
|
], |
|
|
|
warnings:[ |
|
|
|
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分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|
|
|
}, |
|
|
|
{ |
|
|
|
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分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
@ -127,7 +123,7 @@ import WgtTitle from '../../../../../widgets/title' |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
selectItem(index){ |
|
|
|
selectItem(index) { |
|
|
|
this.selectIndex = index; |
|
|
|
}, |
|
|
|
}, |
|
|
|
@ -139,33 +135,33 @@ import WgtTitle from '../../../../../widgets/title' |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
|
|
|
|
.selectRoad{ |
|
|
|
width:89px; |
|
|
|
margin-top:5px; |
|
|
|
margin-left:20px; |
|
|
|
border:1px solid #00B3CC; |
|
|
|
::v-deep{ |
|
|
|
.el-input__inner{ |
|
|
|
} |
|
|
|
</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; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.congestion { |
|
|
|
.congestion { |
|
|
|
display: inline-flex; |
|
|
|
width: 100%; |
|
|
|
height: 600px; |
|
|
|
flex-direction: column; |
|
|
|
width: 100%; |
|
|
|
height:100%; |
|
|
|
height: 100%; |
|
|
|
|
|
|
|
.board{ |
|
|
|
.board { |
|
|
|
height: 690px; |
|
|
|
width: 100%; |
|
|
|
padding: 0px 0px; |
|
|
|
@ -175,52 +171,52 @@ import WgtTitle from '../../../../../widgets/title' |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
flex-direction: column; |
|
|
|
margin-top:20px; |
|
|
|
margin-top: 20px; |
|
|
|
|
|
|
|
.warningList { |
|
|
|
display: inline-flex; |
|
|
|
flex-direction: column; |
|
|
|
width:100%; |
|
|
|
height:calc(100% - 40px); |
|
|
|
width: 100%; |
|
|
|
height: calc(100% - 40px); |
|
|
|
|
|
|
|
>div::after { |
|
|
|
content: ""; |
|
|
|
top:0; |
|
|
|
left:-3px; |
|
|
|
top: 0; |
|
|
|
left: -3px; |
|
|
|
position: absolute; |
|
|
|
width:0; |
|
|
|
height:0; |
|
|
|
border-right:6px solid transparent; |
|
|
|
width: 0; |
|
|
|
height: 0; |
|
|
|
border-right: 6px solid transparent; |
|
|
|
border-left: 6px solid transparent; |
|
|
|
border-bottom:6px solid rgba(55, 231, 255, 1); |
|
|
|
border-bottom: 6px solid rgba(55, 231, 255, 1); |
|
|
|
transform: rotate(-45deg); |
|
|
|
} |
|
|
|
|
|
|
|
>div::before { |
|
|
|
content: ""; |
|
|
|
bottom:0; |
|
|
|
right:-3px; |
|
|
|
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); |
|
|
|
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%; |
|
|
|
height:138px; |
|
|
|
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; |
|
|
|
margin-top: 20px; |
|
|
|
padding: 23px 29px; |
|
|
|
font-size: 14px; |
|
|
|
font-family: PingFang SC, PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
@ -228,23 +224,24 @@ import WgtTitle from '../../../../../widgets/title' |
|
|
|
|
|
|
|
>.left-w { |
|
|
|
display: inline-flex; |
|
|
|
width:40%; |
|
|
|
height:100%; |
|
|
|
width: 40%; |
|
|
|
height: 100%; |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.left-row { |
|
|
|
margin:2px; |
|
|
|
margin: 2px; |
|
|
|
display: inline-flex; |
|
|
|
width:100%; |
|
|
|
height:30px; |
|
|
|
width: 100%; |
|
|
|
height: 30px; |
|
|
|
flex-direction: row; |
|
|
|
|
|
|
|
>.value { |
|
|
|
color:#fff; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.org { |
|
|
|
font-size: 12px !important; |
|
|
|
font-size: 14px !important; |
|
|
|
margin-top: 2px; |
|
|
|
font-family: PangMenZhengDao; |
|
|
|
font-weight: 400; |
|
|
|
color: #F4A125 |
|
|
|
@ -254,10 +251,10 @@ import WgtTitle from '../../../../../widgets/title' |
|
|
|
} |
|
|
|
|
|
|
|
>.right-w { |
|
|
|
margin-left:30px; |
|
|
|
margin-left: 30px; |
|
|
|
display: inline-flex; |
|
|
|
width:100%; |
|
|
|
height:100%; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.right-row { |
|
|
|
@ -265,7 +262,7 @@ import WgtTitle from '../../../../../widgets/title' |
|
|
|
} |
|
|
|
|
|
|
|
.right-text { |
|
|
|
color:#fff; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -275,19 +272,19 @@ import WgtTitle from '../../../../../widgets/title' |
|
|
|
.weaterMain { |
|
|
|
display: inline-flex; |
|
|
|
flex-direction: row; |
|
|
|
width:100%; |
|
|
|
width: 100%; |
|
|
|
height: 40px; |
|
|
|
|
|
|
|
|
|
|
|
.buttons { |
|
|
|
width:100%; |
|
|
|
height:38px; |
|
|
|
margin-left:20px; |
|
|
|
width: 100%; |
|
|
|
height: 38px; |
|
|
|
margin-left: 20px; |
|
|
|
|
|
|
|
>div { |
|
|
|
display: inline-flex; |
|
|
|
width:10%; |
|
|
|
height:35px; |
|
|
|
width: 10%; |
|
|
|
height: 35px; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
font-size: 12px; |
|
|
|
@ -303,49 +300,50 @@ import WgtTitle from '../../../../../widgets/title' |
|
|
|
display: inline-flex; |
|
|
|
width: 55px; |
|
|
|
height: 36px; |
|
|
|
background: linear-gradient(180deg, #6557D7 0%, rgba(101,87,216,0) 100%); |
|
|
|
background: linear-gradient(180deg, #6557D7 0%, rgba(101, 87, 216, 0) 100%); |
|
|
|
border-radius: 50%; |
|
|
|
opacity: 1; |
|
|
|
z-index:-1; |
|
|
|
z-index: -1; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.redSel::after { |
|
|
|
background: linear-gradient(180deg, #E73A14 0%, rgba(240,92,9,0) 100%); |
|
|
|
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%); |
|
|
|
background: linear-gradient(180deg, #FFFA79 0%, rgba(255, 208, 137, 0) 100%); |
|
|
|
} |
|
|
|
|
|
|
|
.bluSel::after { |
|
|
|
background: linear-gradient(180deg, #121ADE 0%, rgba(40,18,228,0) 100%); |
|
|
|
background: linear-gradient(180deg, #121ADE 0%, rgba(40, 18, 228, 0) 100%); |
|
|
|
} |
|
|
|
|
|
|
|
.orgSel::after{ |
|
|
|
background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,0) 100%); |
|
|
|
.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%); |
|
|
|
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%); |
|
|
|
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; |
|
|
|
} |
|
|
|
@ -355,13 +353,14 @@ import WgtTitle from '../../../../../widgets/title' |
|
|
|
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%); |
|
|
|
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; |
|
|
|
margin-left: 30px; |
|
|
|
; |
|
|
|
|
|
|
|
>span.text { |
|
|
|
display: inline-flex; |
|
|
|
font-size: 16px; |
|
|
|
@ -384,11 +383,11 @@ import WgtTitle from '../../../../../widgets/title' |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.charts { |
|
|
|
height:180px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
.charts { |
|
|
|
height: 180px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
zhangzhang
1 year ago