|
|
|
@ -1,116 +1,75 @@ |
|
|
|
<template> |
|
|
|
<div class='congestion'> |
|
|
|
<div class="congestion"> |
|
|
|
<WgtTitle :title="'能见度异常信息'"></WgtTitle> |
|
|
|
<div class="board"> |
|
|
|
<div class="weaterMain"> |
|
|
|
<el-table :border="false" :data="tableData" height="670" style="width: 100%"> |
|
|
|
<el-table-column prop="nem" label="" width="30"> |
|
|
|
<el-table |
|
|
|
:border="false" |
|
|
|
:data="tableData" |
|
|
|
height="670" |
|
|
|
style="width: 100%" |
|
|
|
> |
|
|
|
<el-table-column prop="nem" label="" width="30"> </el-table-column> |
|
|
|
<el-table-column prop="stakeMark" label="桩号范围" width="230"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="address" label="桩号范围" width="230"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="name" label="能见度" class-name="showClass" width="250"> |
|
|
|
<el-table-column |
|
|
|
prop="visibility" |
|
|
|
label="能见度" |
|
|
|
class-name="showClass" |
|
|
|
width="250" |
|
|
|
> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span class="showClass">{{ scope.row.name }}</span> |
|
|
|
<span class="showClass">{{ scope.row.visibility }}km</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="date" label="发生时间" width="230"> |
|
|
|
<el-table-column prop="createTime" label="发生时间" width="230"> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
import Card from "@screen/components/Card1/index.vue" |
|
|
|
import WgtTitle from '../../../../../widgets/title' |
|
|
|
import Card from "@screen/components/Card1/index.vue"; |
|
|
|
import WgtTitle from "../../../../../widgets/title"; |
|
|
|
import { |
|
|
|
getMeteorologicalEarlyWarning, |
|
|
|
getListVisibility, |
|
|
|
} from "@/api/perception/meteorologyCheck"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'infoWarning', |
|
|
|
name: "infoWarning", |
|
|
|
components: { |
|
|
|
WgtTitle |
|
|
|
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' |
|
|
|
}, |
|
|
|
] |
|
|
|
} |
|
|
|
tableData: [], |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
created() { |
|
|
|
|
|
|
|
}, |
|
|
|
created() {}, |
|
|
|
methods: { |
|
|
|
selectItem(index) { |
|
|
|
this.selectIndex = index; |
|
|
|
}, |
|
|
|
getWarningType() { |
|
|
|
getListVisibility().then((res) => { |
|
|
|
console.log("获取预警类型", res.rows); |
|
|
|
this.tableData = res.rows; |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
this.$nextTick(() => { |
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
this.getWarningType(); |
|
|
|
}, |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.showClass { |
|
|
|
color: #00EBC1; |
|
|
|
color: #00ebc1; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-table .cell { |
|
|
|
@ -119,7 +78,7 @@ export default { |
|
|
|
|
|
|
|
::v-deep .el-table .el-table__header-wrapper th { |
|
|
|
background-color: #064258 !important; |
|
|
|
color: #00D1FF; |
|
|
|
color: #00d1ff; |
|
|
|
border-color: #064258 !important; |
|
|
|
border: 0px !important; |
|
|
|
font-size: 12px !important; |
|
|
|
@ -138,11 +97,11 @@ export default { |
|
|
|
|
|
|
|
::v-deep .el-table tr:hover td { |
|
|
|
background: #1b2528 !important; |
|
|
|
color: #00D1FF; |
|
|
|
color: #00d1ff; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-table tr:nth-child(odd) td { |
|
|
|
background-color: #13272F; |
|
|
|
background-color: #13272f; |
|
|
|
border: 0px !important; |
|
|
|
} |
|
|
|
|
|
|
|
@ -175,15 +134,13 @@ export default { |
|
|
|
flex-direction: column; |
|
|
|
margin-top: 20px; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.warningList { |
|
|
|
display: inline-flex; |
|
|
|
flex-direction: column; |
|
|
|
width: 100%; |
|
|
|
height: calc(100% - 40px); |
|
|
|
|
|
|
|
>div { |
|
|
|
> div { |
|
|
|
display: inline-flex; |
|
|
|
width: 100%; |
|
|
|
height: 138px; |
|
|
|
@ -191,16 +148,21 @@ export default { |
|
|
|
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; |
|
|
|
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; |
|
|
|
color: #37e7ff; |
|
|
|
|
|
|
|
>.left-w { |
|
|
|
> .left-w { |
|
|
|
display: inline-flex; |
|
|
|
width: 40%; |
|
|
|
height: 100%; |
|
|
|
@ -213,7 +175,7 @@ export default { |
|
|
|
height: 30px; |
|
|
|
flex-direction: row; |
|
|
|
|
|
|
|
>.value { |
|
|
|
> .value { |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
@ -221,13 +183,12 @@ export default { |
|
|
|
font-size: 14px; |
|
|
|
font-family: PangMenZhengDao; |
|
|
|
font-weight: 400; |
|
|
|
color: #F4A125 |
|
|
|
color: #f4a125; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
>.right-w { |
|
|
|
> .right-w { |
|
|
|
margin-left: 30px; |
|
|
|
display: inline-flex; |
|
|
|
width: 100%; |
|
|
|
@ -242,7 +203,6 @@ export default { |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -252,12 +212,11 @@ export default { |
|
|
|
width: 100%; |
|
|
|
height: 40px; |
|
|
|
|
|
|
|
|
|
|
|
.buttons { |
|
|
|
width: 100%; |
|
|
|
height: 38px; |
|
|
|
|
|
|
|
>div { |
|
|
|
> div { |
|
|
|
display: inline-flex; |
|
|
|
width: 10%; |
|
|
|
height: 35px; |
|
|
|
@ -266,36 +225,56 @@ export default { |
|
|
|
font-size: 12px; |
|
|
|
font-family: PangMenZhengDao; |
|
|
|
font-weight: 800; |
|
|
|
color: #FFFFFF; |
|
|
|
color: #ffffff; |
|
|
|
z-index: 9; |
|
|
|
} |
|
|
|
|
|
|
|
>div::after { |
|
|
|
> div::after { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
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; |
|
|
|
} |
|
|
|
|
|
|
|
.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%); |
|
|
|
background: linear-gradient( |
|
|
|
180deg, |
|
|
|
#ffa623 0%, |
|
|
|
rgba(255, 173, 53, 0) 100% |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -306,7 +285,12 @@ export default { |
|
|
|
left: 0px; |
|
|
|
width: 100%; |
|
|
|
height: 2px; |
|
|
|
background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%); |
|
|
|
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; |
|
|
|
} |
|
|
|
@ -318,7 +302,12 @@ export default { |
|
|
|
left: 0px; |
|
|
|
width: 100%; |
|
|
|
height: 2px; |
|
|
|
background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%); |
|
|
|
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; |
|
|
|
} |
|
|
|
@ -328,21 +317,25 @@ export default { |
|
|
|
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%); |
|
|
|
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 { |
|
|
|
> span.text { |
|
|
|
display: inline-flex; |
|
|
|
font-size: 16px; |
|
|
|
font-family: PangMenZhengDao; |
|
|
|
font-weight: 400; |
|
|
|
color: #FFFFFF; |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.num { |
|
|
|
display: inline-flex; |
|
|
|
justify-content: center; |
|
|
|
@ -350,11 +343,10 @@ export default { |
|
|
|
font-size: 22px; |
|
|
|
font-family: PangMenZhengDao; |
|
|
|
font-weight: 400; |
|
|
|
color: #D9001B; |
|
|
|
color: #d9001b; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -363,4 +355,3 @@ export default { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
