118 lines
2.8 KiB
Vue
118 lines
2.8 KiB
Vue
<template>
|
|
<div class="device-overview">
|
|
<peak-secondary-title :title="title" />
|
|
<div class="device-total">
|
|
<div class="device-item">
|
|
<div class="point-icon"></div>
|
|
<div class="title-value">
|
|
<div class="_title">监控点</div>
|
|
<div class="_value">287</div>
|
|
</div>
|
|
<div class="title-value">
|
|
<div class="_title">在线率</div>
|
|
<div class="_value">98%</div>
|
|
</div>
|
|
</div>
|
|
<div class="_line"></div>
|
|
<div class="device-item">
|
|
<div class="microsite-icon"></div>
|
|
<div class="title-value">
|
|
<div class="_title">微站</div>
|
|
<div class="_value">287</div>
|
|
</div>
|
|
<div class="title-value">
|
|
<div class="_title">在线率</div>
|
|
<div class="_value">98%</div>
|
|
</div>
|
|
</div>
|
|
<div class="_line"></div>
|
|
<div class="device-item">
|
|
<div class="tester-icon"></div>
|
|
<div class="title-value">
|
|
<div class="_title">检测仪</div>
|
|
<div class="_value">287</div>
|
|
</div>
|
|
<div class="title-value">
|
|
<div class="_title">在线率</div>
|
|
<div class="_value">98%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
|
|
export default {
|
|
name: "DeviceOverview",
|
|
components: {PeakSecondaryTitle},
|
|
data(){
|
|
return{
|
|
title: '设备概况'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import "assets/styles/mixin";
|
|
.device-overview{
|
|
height: 100%;
|
|
width: 100%;
|
|
.flex-column;
|
|
.device-total{
|
|
flex: 1;
|
|
height: 0;
|
|
.flex-row;
|
|
justify-content: space-around;
|
|
.device-item{
|
|
height: 60%;
|
|
width: 140px;
|
|
.flex-column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.point-icon{
|
|
width: 61px;
|
|
height: 61px;
|
|
background: url("~/assets/peakCoalMonitoring/right/point-icon.png") no-repeat;
|
|
}
|
|
.microsite-icon{
|
|
width: 61px;
|
|
height: 61px;
|
|
background: url("~/assets/peakCoalMonitoring/right/microsite-icon.png") no-repeat;
|
|
}
|
|
.tester-icon{
|
|
width: 61px;
|
|
height: 61px;
|
|
background: url("~/assets/peakCoalMonitoring/right/tester-icon.png") no-repeat;
|
|
}
|
|
.title-value{
|
|
.flex-row;
|
|
._title{
|
|
font-family: MicrosoftYaHei;
|
|
font-size: 14px;
|
|
color: #6AC4FF;
|
|
letter-spacing: 2.26px;
|
|
font-weight: 400;
|
|
}
|
|
._value {
|
|
padding-left: 10px;
|
|
font-family: YouSheBiaoTiHei;
|
|
font-size: 18px;
|
|
color: #FFFFFF;
|
|
letter-spacing: 5.64px;
|
|
font-weight: 400;
|
|
text-align: right;
|
|
.text-ellipsis;
|
|
}
|
|
}
|
|
}
|
|
._line{
|
|
width: 1px;
|
|
height: 160px;
|
|
background: #1A4157;
|
|
}
|
|
}
|
|
}
|
|
</style>
|