<template>
|
<!-- 运营概况 -->
|
<div class="panel">
|
<div class="panel-header">运维数据</div>
|
<div class="flex panel-body" style="flex-wrap: wrap;">
|
<div class="info-items">
|
<dv-decoration-9> <div class="item-num">66%</div></dv-decoration-9>
|
<div class="item-text">工单总数量</div>
|
</div>
|
<div class="info-items">
|
<dv-decoration-9><div class="item-num">66%</div></dv-decoration-9>
|
<div class="item-text">已完成数量</div>
|
</div>
|
<div class="info-items">
|
<dv-decoration-9><div class="item-num">66%</div></dv-decoration-9>
|
<div class="item-text">待完成数量</div>
|
</div>
|
|
</div>
|
</div>
|
</template>
|
<script>
|
// import { getLargeScreenProjectDevopsInfo } from '@/cpx_sewage/api/largeScreen/largeScreen'
|
export default {
|
name: 'RightTop',
|
props: {
|
baseInfos: {
|
type: Object,
|
default: () => {}
|
}
|
},
|
data() {
|
return {
|
devopsData: []
|
}
|
},
|
watch: {
|
baseInfos: {
|
handler(newValue) {
|
this.baseInfos = newValue
|
},
|
immediate: true
|
}
|
},
|
mounted() {
|
// this.getData()
|
},
|
methods: {
|
getData() {
|
getLargeScreenProjectDevopsInfo().then(res => {
|
this.devopsData = res.data || []
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
// @import url(../index.scss);
|
.panel-body{
|
justify-content: space-around;
|
}
|
.info-items-top {
|
width: 3.4rem;
|
margin-bottom: .3rem;
|
font-size: .14rem;
|
text-align: center;
|
.item-text {
|
margin-top: 0.2rem;
|
color: #fff;
|
}
|
}
|
|
.info-items{
|
width: 1.36rem;
|
margin-bottom: .1rem;
|
// display: flex;
|
// justify-content: space-between;
|
// align-items: center;
|
text-align: center;
|
font-size: .14rem;
|
.item-text {
|
margin-top: 0.3rem;
|
color: #fff;
|
}
|
.info-img {
|
width: .6rem;
|
height: .6rem;
|
img{
|
width: 100%;
|
}
|
}
|
.item-label {
|
width: .64rem;
|
font-size: .14rem;
|
color: #fff;
|
}
|
.item-value {
|
font-size: .1rem;
|
color: #fff;
|
}
|
.item-num {
|
font-family: 'screen-font';
|
font-size: .20rem;
|
}
|
}
|
.dv-decoration-9 {
|
color: #fff;
|
width: 1.36rem;
|
height: 0.26rem;
|
}
|
|
</style>
|
