| | |
| | | <template> |
| | | <div class="video-container"> |
| | | <wrapper-title :title="'视频设备'"></wrapper-title> |
| | | <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 class="data-plane"> |
| | | <dv-border-box-13 class="plane"> |
| | | <div class="data-item"> |
| | | <div class="data-icon"> |
| | | <img src="@/assets/images/screen/icon/icon1.png" alt="" class="width-img"> |
| | | </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 class="data-info"> |
| | | <div class="data-lable">设备总数</div> |
| | | <div class="data-num">{{ formatNumber(1123) }}</div> |
| | | </div> |
| | | |
| | | |
| | | </div> |
| | | </dv-border-box-13> |
| | | |
| | | <dv-border-box-13 class="plane"> |
| | | <div class="data-item"> |
| | | <div class="data-icon"> |
| | | <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img"> |
| | | </div> |
| | | <div class="data-info"> |
| | | <div class="data-lable">设备正常数</div> |
| | | <div class="data-num">{{ formatNumber(200000) }}</div> |
| | | </div> |
| | | </div> |
| | | </dv-border-box-13> |
| | | |
| | | <dv-border-box-13 class="plane"> |
| | | <div class="data-item"> |
| | | <div class="data-icon"> |
| | | <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img"> |
| | | </div> |
| | | <div class="data-info"> |
| | | <div class="data-lable">设备异常数</div> |
| | | <div class="data-num">{{ formatNumber(112313141111) }}</div> |
| | | </div> |
| | | </div> |
| | | </dv-border-box-13> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </template> |
| | | |
| | | <script> |
| | | import WrapperTitle from '../wrapper-title/index'; |
| | | |
| | | export default { |
| | | name: 'ScreenVideo', |
| | | name: 'ScreenFace', |
| | | components: { |
| | | WrapperTitle |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | dataList: { |
| | | state: { '01:00': 1000, '02:00': 2131, '03:00': 1233, '04:00': 2132, '05:00': 3211, '06:00': 213, '07:00': 123, '08:00': 566 }, |
| | | state2: { '01:00': 900, '02:00': 1131, '03:00': 1533, '04:00': 2132, '05:00': 3011, '06:00': 13, '07:00': 113, '08:00': 566 }, |
| | | }, |
| | | } |
| | | }, |
| | | |
| | | methods: { |
| | | |
| | | formatNumber(value) { |
| | | return new Intl.NumberFormat('en-US').format(value); |
| | | } |
| | | }, |
| | | |
| | | mounted() { |
| | | |
| | | }, |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .video-container { |
| | | flex: 1; |
| | | width: 100%; |
| | | height: fit-content; |
| | | 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; |
| | | } |
| | | |
| | | .plane { |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | .data-plane { |
| | | .data-item { |
| | | width: 100%; |
| | | padding: 10px 20px; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | .data-icon { |
| | | width: 40px; |
| | | margin: 0 20px; |
| | | } |
| | | |
| | | .data-info { |
| | | flex: 1; |
| | | color: #5b83bd; |
| | | font-size: 16px; |
| | | |
| | | .data-num { |
| | | margin-top: 5px; |
| | | font-size: 24px; |
| | | color: #fff; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | #faceChart { |
| | | width: 100%; |
| | | height: 300px; |
| | | } |
| | | } |
| | | |
| | | .width-img { |
| | | width: 100%; |
| | | } |
| | | </style> |