<template>
|
<div class="video-container">
|
<wrapper-title :title="'视频设备'"></wrapper-title>
|
<div class="video-content">
|
<div class="video-plane">
|
<dv-border-box-13 class="panel">
|
<div class="panel-container">
|
<div class="top-container">
|
<div class="data-item">
|
<dv-decoration-9 style="width:120px;height:120px;">
|
<div class="data-num type1">1156</div>
|
</dv-decoration-9>
|
<div class="data-label">设备总数</div>
|
</div>
|
<div class="data-item">
|
<dv-decoration-9 style="width:120px;height:120px;">
|
<div class="data-num type2">1000</div>
|
</dv-decoration-9>
|
<div class="data-label">正常数</div>
|
</div>
|
</div>
|
<div class="bottom-container">
|
<div class="data-item">
|
<dv-decoration-9 style="width:120px;height:120px;">
|
<div class="data-num type3">156</div>
|
</dv-decoration-9>
|
<div class="data-label">异常数</div>
|
</div>
|
<div class="data-item">
|
<dv-decoration-9 style="width:120px;height:120px;">
|
<div class="data-num type4">75</div>
|
</dv-decoration-9>
|
<div class="data-label">生成异常工单数</div>
|
</div>
|
<div class="data-item">
|
<dv-decoration-9 style="width:120px;height:120px;">
|
<div class="data-num type5">91.36%</div>
|
</dv-decoration-9>
|
<div class="data-label">设备运行率</div>
|
</div>
|
</div>
|
|
|
</div>
|
|
</dv-border-box-13>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import WrapperTitle from '../wrapper-title/index';
|
|
export default {
|
name: 'ScreenVideo',
|
components: {
|
WrapperTitle
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.video-container {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 20px;
|
}
|
|
.video-content {
|
flex: 1;
|
background: rgba(67, 102, 155, 0.3);
|
border: 1px solid rgba(47, 91, 157, 0.8);
|
}
|
|
.panel {
|
width: 100%;
|
height: 100%;
|
}
|
|
.video-plane {
|
width: 100%;
|
|
.panel-container {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: center;
|
box-sizing: border;
|
padding: 20px;
|
|
.top-container,
|
.bottom-container {
|
width: 100%;
|
display: flex;
|
|
}
|
|
.top-container {
|
justify-content: center;
|
|
.data-item {
|
margin: 0 30px;
|
}
|
}
|
|
.bottom-container {
|
justify-content: space-around;
|
}
|
|
.data-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
font-size: 20px;
|
color: #fff;
|
.data-num {
|
font-weight: bold;
|
font-size: 22px;
|
}
|
}
|
|
.type1 {
|
color: #0883d4;
|
}
|
|
.type2 {
|
color: #08b108;
|
}
|
|
.type3 {
|
color: #ff0000;
|
}
|
|
.type4 {
|
color: #d82a64;
|
}
|
|
.type5 {
|
color: #08b108;
|
}
|
|
}
|
|
}
|
</style>
|
