zhgkpt-datav/app/src/views/Risk/components/Rectification.vue

<template>
    <div class="rect">
        <div class="unit-hid">
            <div>隐患数
            <span class="num">{{ total.yhzs }}</span>
            </div>
        <span>单位:个</span>
        </div>
    <div class="num-hid">
    <span>15日到期隐患数 
        <div class="hid">{{ total.rdq15 }}</div>
    </span>
    <span>30日到期隐患数 
        <div class="hid">{{ total.rdq30 }}</div>
    </span>
    <span>60日到期隐患数 
        <div class="hid">{{ total.rdq60  }}</div>
    </span>
    </div>
    <!--限期  -->
    <div class="hid-img">
   <div>
    <img src="../../../assets/images/Frame 1296.png" alt="">
    <span>限期2023年底整改数量</span>
   </div>
    <span class="hid-num">{{  total.nzgsl2023 }}</span>
    </div>
    <div class="hid-img">
   <div>
    <img src="../../../assets/images/Frame 1296.png" alt="">
    <span>限期2024年底整改数量</span>
   </div>
    <span class="hid-num"> {{ total.nzgsl2024  }}</span>
    </div>
    <div class="hid-img">
   <div>
    <img src="../../../assets/images/Frame 1296.png" alt="">
    <span>限期2024年底整改数量</span>
   </div>
    <span class="hid-num">{{ total.nzgsl2025  }}</span>
    </div>
    </div>
</template>

<script >
import { zgtj } from '@/api/risk'

export default {
    name: 'RectificationComp',
    props: {
        qx: String
    },
    data() {
        return {
            total: {
                qy: "",
                yhzs: 0,
                rdq15: 0,
                rdq30: 0,
                rdq60: 0,
                nzgsl2023: 0,
                nzgsl2024: 0,
                nzgsl2025: 0
            }
        }
    },
    watch: {
      qx: {
        handler() {
            this.loadData()
        },
        immediate: true
      }
    },
    methods: {
        loadData() {
            zgtj({
                pageNum: 1,
                pageSize: 1,
                qy: this.qx
            }).then(res => {
                this.total = res.data.rows[0]
            })
        }
    }
}
</script>

<style lang="less" scoped>
.rect{
    font-size: 16px;
    margin: 10px 10px;
    .num{
        font-size: 20px;
    }
    .hid{
        font-size: 28px;
        color: #FFCB44;
        text-align: center;
    }
    .num-hid{
        display: flex;
        justify-content: space-between;
        justify-items: center;
        align-items: center;
    }
    .unit-hid{
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .hid-img{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        img{
            margin-right: 8px;
        }
    }
    .hid-num{
        font-size: 32px;
        color: #00C2FF;
    }
    
}
</style>