|
|
|
@ -1,54 +1,37 @@ |
|
|
|
<template> |
|
|
|
<div class='congestion'> |
|
|
|
<div class="buttonbar" > |
|
|
|
<div class="button" > |
|
|
|
<div class="buttonbar"> |
|
|
|
<div class="button"> |
|
|
|
<i class="el-icon-refresh-right"></i>刷新 |
|
|
|
</div> |
|
|
|
<div class="button" > |
|
|
|
<div class="button"> |
|
|
|
<i class="el-icon-upload2"></i>导出Excal |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="board"> |
|
|
|
|
|
|
|
<div class="weaterMain" > |
|
|
|
<el-table |
|
|
|
:border="false" |
|
|
|
:data="tableData" |
|
|
|
height="790" |
|
|
|
style="width: 100%"> |
|
|
|
<el-table-column |
|
|
|
prop="nem" |
|
|
|
label="" |
|
|
|
width="30"> |
|
|
|
<div class="weaterMain"> |
|
|
|
<el-table :border="false" :data="tableData" style="width: 100%"> |
|
|
|
<el-table-column prop="nem" label="" width="30"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="address" |
|
|
|
label="桩号范围" |
|
|
|
> |
|
|
|
<el-table-column prop="address" label="桩号范围"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="name" |
|
|
|
label="能见度" |
|
|
|
class-name="showClass" |
|
|
|
> |
|
|
|
<el-table-column prop="name" label="能见度" class-name="showClass"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span class="showClass">{{scope.row.name}}</span> |
|
|
|
<span class="showClass">{{ scope.row.name }}</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="date" |
|
|
|
label="发生时间" |
|
|
|
> |
|
|
|
<el-table-column prop="date" label="发生时间"> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
<script> |
|
|
|
|
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: 'IndicatorQuery', |
|
|
|
components: { |
|
|
|
|
|
|
|
@ -59,159 +42,159 @@ |
|
|
|
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' |
|
|
|
},{ |
|
|
|
}, { |
|
|
|
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' |
|
|
|
},{ |
|
|
|
}, { |
|
|
|
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' |
|
|
|
},{ |
|
|
|
}, { |
|
|
|
date: '2023-12-31 13:00:00', |
|
|
|
name: '2640.78m', |
|
|
|
address: 'K100+000-K110+000' |
|
|
|
@ -224,7 +207,7 @@ |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
selectItem(index){ |
|
|
|
selectItem(index) { |
|
|
|
this.selectIndex = index; |
|
|
|
}, |
|
|
|
}, |
|
|
|
@ -236,59 +219,59 @@ |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
<style lang='scss' scoped> |
|
|
|
.showClass { |
|
|
|
color: #00EBC1; |
|
|
|
} |
|
|
|
|
|
|
|
.showClass { |
|
|
|
color:#00EBC1; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-table .cell { |
|
|
|
padding-left:0px !important; |
|
|
|
} |
|
|
|
::v-deep .el-table .cell { |
|
|
|
padding-left: 0px !important; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-table .el-table__header-wrapper th { |
|
|
|
::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; |
|
|
|
} |
|
|
|
border: 0px !important; |
|
|
|
font-size: 12px !important; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-table { |
|
|
|
border:0px !important; |
|
|
|
::v-deep .el-table { |
|
|
|
border: 0px !important; |
|
|
|
background-color: transparent; |
|
|
|
font-size:12px !important; |
|
|
|
} |
|
|
|
font-size: 12px !important; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-table__body-wrapper { |
|
|
|
::v-deep .el-table__body-wrapper { |
|
|
|
background-color: #064258; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-table tr:hover td { |
|
|
|
::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 ; |
|
|
|
border:0px !important; |
|
|
|
} |
|
|
|
::v-deep .el-table tr:nth-child(even) td{ |
|
|
|
border:0px !important; |
|
|
|
} |
|
|
|
::v-deep .el-table tr:nth-child(odd) td { |
|
|
|
background-color: #13272F; |
|
|
|
border: 0px !important; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-table tr { |
|
|
|
::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; |
|
|
|
border-collapse: 0; |
|
|
|
border: 0px !important; |
|
|
|
background-color: transparent !important; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.congestion { |
|
|
|
.congestion { |
|
|
|
display: inline-flex; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
@ -297,28 +280,29 @@ |
|
|
|
.buttonbar { |
|
|
|
display: inline-flex; |
|
|
|
flex-direction: row; |
|
|
|
padding-top:15px; |
|
|
|
padding-top: 15px; |
|
|
|
|
|
|
|
> .button { |
|
|
|
>.button { |
|
|
|
display: inline-flex; |
|
|
|
min-width:90px; |
|
|
|
height:28px; |
|
|
|
min-width: 90px; |
|
|
|
height: 28px; |
|
|
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|
|
|
border-radius: 2px 2px 2px 2px; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
padding: 1px 10px;; |
|
|
|
padding: 1px 10px; |
|
|
|
; |
|
|
|
opacity: 1; |
|
|
|
font-size: 14px; |
|
|
|
font-family: PingFang SC, PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
color: #FFFFFF; |
|
|
|
margin-left:15px; |
|
|
|
margin-left: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.board{ |
|
|
|
.board { |
|
|
|
height: 880px; |
|
|
|
width: 100%; |
|
|
|
padding: 0px 0px; |
|
|
|
@ -328,28 +312,28 @@ |
|
|
|
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 { |
|
|
|
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, 1), rgba(55, 231, 255, 0)) 1 1; |
|
|
|
overflow: hidden; |
|
|
|
margin-top:20px; |
|
|
|
padding:23px 29px; |
|
|
|
margin-top: 20px; |
|
|
|
padding: 23px 29px; |
|
|
|
font-size: 14px; |
|
|
|
font-family: PingFang SC, PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
@ -357,19 +341,19 @@ |
|
|
|
|
|
|
|
>.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 { |
|
|
|
@ -383,10 +367,10 @@ |
|
|
|
} |
|
|
|
|
|
|
|
>.right-w { |
|
|
|
margin-left:30px; |
|
|
|
margin-left: 30px; |
|
|
|
display: inline-flex; |
|
|
|
width:100%; |
|
|
|
height:100%; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.right-row { |
|
|
|
@ -394,7 +378,7 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.right-text { |
|
|
|
color:#fff; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -404,17 +388,19 @@ |
|
|
|
.weaterMain { |
|
|
|
display: inline-flex; |
|
|
|
flex-direction: row; |
|
|
|
width:100%; |
|
|
|
height: 100%;; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
; |
|
|
|
|
|
|
|
|
|
|
|
.buttons { |
|
|
|
width:100%; |
|
|
|
height:38px; |
|
|
|
width: 100%; |
|
|
|
height: 38px; |
|
|
|
|
|
|
|
>div { |
|
|
|
display: inline-flex; |
|
|
|
width:10%; |
|
|
|
height:35px; |
|
|
|
width: 10%; |
|
|
|
height: 35px; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
font-size: 12px; |
|
|
|
@ -430,48 +416,49 @@ |
|
|
|
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; |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
} |
|
|
|
@ -481,7 +468,7 @@ |
|
|
|
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; |
|
|
|
@ -509,11 +496,11 @@ |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.charts { |
|
|
|
height:180px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
.charts { |
|
|
|
height: 180px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
zhangzhang
1 year ago