冀北问题修改
This commit is contained in:
@@ -18,24 +18,48 @@
|
||||
>
|
||||
<div style="flex: 1">
|
||||
<div class="title">终端统计</div>
|
||||
<div style="height: 135px" class="box1">
|
||||
<div class="boxDiv hexagon">
|
||||
<div style="color: #fff">{{ statisticsList.allNum }}</div>
|
||||
<div class="mt10 divBot">总数</div>
|
||||
<div
|
||||
class="box1"
|
||||
:style="{
|
||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px - 30px )`,
|
||||
overflow: 'auto'
|
||||
}"
|
||||
>
|
||||
<div class="statistics">
|
||||
<div class="divBox div1">
|
||||
<span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
|
||||
<span class="divBox_title">终端总数</span>
|
||||
<span class="divBox_num text-style" style="color: #57bc6e">
|
||||
{{ statisticsList.allNum }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="divBox div2">
|
||||
<span class="iconfont icon-zaiyunshebei" style="color: #67c23a"></span>
|
||||
<span class="divBox_title">在运终端数</span>
|
||||
<span class="divBox_num text-style" style="color: #67c23a">
|
||||
{{ statisticsList.runNum }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxDiv hexagon hexagon1">
|
||||
<div style="color: #fff">{{ statisticsList.runNum }}</div>
|
||||
<div class="mt10 divBot">在运</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 135px" class="box1">
|
||||
<div class="boxDiv hexagon hexagon2">
|
||||
<div style="color: #fff">{{ statisticsList.checkNum }}</div>
|
||||
<div class="mt10 divBot">调试</div>
|
||||
</div>
|
||||
<div class="boxDiv hexagon hexagon3">
|
||||
<div style="color: #fff">{{ statisticsList.stopRunNum }}</div>
|
||||
<div class="mt10 divBot">停运</div>
|
||||
|
||||
<div class="statistics">
|
||||
<div class="divBox div3">
|
||||
<span
|
||||
class="iconfont icon-yichanglei_14feizhinengbiaozaiyunyichang"
|
||||
style="color: #ffbf00"
|
||||
></span>
|
||||
<span class="divBox_title">调试终端数</span>
|
||||
<span class="divBox_num text-style" style="color: #ffbf00">
|
||||
{{ statisticsList.checkNum }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="divBox div4">
|
||||
<span class="iconfont icon-tingyunshijianguanli" style="color: #f56c6c"></span>
|
||||
<span class="divBox_title">停运终端数</span>
|
||||
<span class="divBox_num text-style" style="color: #f56c6c">
|
||||
{{ statisticsList.stopRunNum }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -65,7 +89,7 @@
|
||||
<span style="width: 90px">终端总数</span>
|
||||
<span style="flex: 1">完整性(%)</span>
|
||||
<span style="flex: 1">在线率(%)</span>
|
||||
<span style="flex: 1">合格率(%)</span>
|
||||
<span style="flex: 1">异常率(%)</span>
|
||||
</div>
|
||||
<div
|
||||
:style="{
|
||||
@@ -205,7 +229,7 @@ const tableStore: any = new TableStore({
|
||||
statisticsList.value.checkNum = totalData.value.filter(item => item.runFlag === '调试').length
|
||||
statisticsList.value.stopRunNum = totalData.value.filter(item => item.runFlag === '停运').length
|
||||
|
||||
abnormal.value = tableStore.table.data
|
||||
abnormal.value = tableStore.table.data.filter((k: any) => k.name != '上送国网' && k.name != '非上送国网')
|
||||
}
|
||||
})
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
@@ -234,6 +258,7 @@ watch(
|
||||
)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/font/iconfont.css';
|
||||
.monitoringPoints {
|
||||
display: flex;
|
||||
}
|
||||
@@ -344,32 +369,7 @@ watch(
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.box1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.boxDiv {
|
||||
// flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin: 0 5px;
|
||||
|
||||
div:nth-child(1) {
|
||||
position: absolute;
|
||||
font-size: 30px;
|
||||
top: -10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.divBot {
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
}
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.hexagon {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
@@ -427,4 +427,44 @@ watch(
|
||||
border-top: 27.5px solid #a52a2a;
|
||||
}
|
||||
}
|
||||
.statistics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.divBox {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
.iconfont {
|
||||
font-size: 40px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.divBox_title {
|
||||
font-weight: 550;
|
||||
}
|
||||
.divBox_num {
|
||||
font-size: 20px;
|
||||
font-weight: 550;
|
||||
margin-left: auto;
|
||||
font-family: AlimamaDongFangDaKai;
|
||||
}
|
||||
align-items: center;
|
||||
// text-align: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.div1 {
|
||||
background-color: #eef8f0;
|
||||
}
|
||||
.div2 {
|
||||
background-color: #67c23a24;
|
||||
}
|
||||
.div3 {
|
||||
background-color: #ffbf0024;
|
||||
}
|
||||
.div4 {
|
||||
background-color: #f56c6c24;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user