<template>
|
<!-- 运营概况 -->
|
<div class="panel">
|
<div class="panel-header">运维数据</div>
|
<div>
|
<div>
|
<div class="num-title">
|
<div><span class="high-text">总</span>累计用水量</div>
|
</div>
|
<div class="num-item">
|
<span class="num-style color0" :class="{ 'num-bg0': s !== '.' }" v-for="(s, i) in amountTotal" :key="i">{{ s }}</span>
|
<!-- <span class="unit-text">m³</span> -->
|
</div>
|
</div>
|
<div>
|
<div class="num-title">
|
<div><span class="high-text">本</span>年度累计用水量</div>
|
</div>
|
<div class="num-item">
|
<span v-for="(s, i) in amountCurYearTotal" :key="i" class="num-style color2" :class="{ 'num-bg2': s !== '.' }">{{ s }}</span>
|
<!-- <span class="unit-text">万m³</span> -->
|
</div>
|
</div>
|
<div>
|
<div class="num-title">
|
<div><span class="high-text">昨</span>日累计用水量</div>
|
</div>
|
<div class="num-item">
|
<span v-for="(s, i) in amountYesterdayTotal" :key="i" class="num-style color2" :class="{ 'num-bg2': s !== '.' }">{{ s }}</span>
|
<!-- <span class="unit-text">万m³</span> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { getScAmount } from '@/api/largeScreen'
|
export default {
|
name: 'RightTop',
|
props: {
|
baseInfos: {
|
type: Object,
|
default: () => {}
|
}
|
},
|
data() {
|
return {
|
devopsData: []
|
}
|
},
|
watch: {
|
baseInfos: {
|
handler(newValue) {
|
this.baseInfos = newValue
|
},
|
immediate: true
|
}
|
},
|
created() {
|
this.getScAmount()
|
},
|
mounted() {
|
// this.getData()
|
},
|
methods: {
|
getScAmount() {
|
const param = {"orgTag":"dy"}
|
getScAmount(param).then(res=>{
|
if (res.succ == 1) {
|
this.amountTotal = res.amountTotal.toString().split("")
|
this.amountCurYearTotal = res.amountCurYearTotal.toString().split("")
|
this.amountYesterdayTotal = res.amountYesterdayTotal.toString().split("")
|
} else {
|
this.$message({
|
type: 'error',
|
message: res.message
|
})
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.num-title {
|
color: #fff;
|
font-family: 'screen-font';
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
font-size: 0.14rem;
|
.high-text {
|
font-size: 0.24rem;
|
margin-right: 0.05rem;
|
}
|
.unit-text {
|
font-size: 0.12rem;
|
font-family: 'element-icons';
|
}
|
}
|
|
.num-item {
|
display: flex;
|
// justify-content: space-between;
|
overflow: hidden;
|
align-items: flex-end;
|
.num-style {
|
font-size: 0.36rem;
|
font-family: 'screen-font';
|
padding: 0.05rem;
|
background-size: 100% 100% !important;
|
}
|
.num-bg0 {
|
background: url('../../../image/screen/bg_num_blue.png') no-repeat;
|
|
}
|
.num-bg1 {
|
background: url('../../../image/screen/bg_num_green.png') no-repeat;
|
}
|
.num-bg2 {
|
background: url('../../../image/screen/bg_num_cyan.png') no-repeat;
|
}
|
.color0 {
|
color: #36a8ff;
|
}
|
.color1 {
|
color: #00f170;
|
}
|
.color2 {
|
color: #04ddff;
|
}
|
.unit-text {
|
color: #fff;
|
margin-left: 5px;
|
}
|
|
}
|
.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>
|
