fire-mh/src/components/matterInfo/index.vue

<template>
    <div class="matterInfo">
        <h4>本年度重点事项推进情况</h4>
        <div class="ndtj j1" style="margin-top:20px;" @click="schedule()">
            <p>专项检查</p>
            <el-tooltip class="box-item" effect="dark" content="" placement="left"  @click="schedule()">
                <template #content> 开始日期：2023-01-01<br>计划完成日期：2023-12-31<br>当前应完成：50%<br>当前实际完成：50%</template>
                <el-progress :percentage="50"></el-progress>
            </el-tooltip>
            <div class="num">
                计划数：1000家&nbsp;&nbsp;&nbsp;&nbsp;完成数：500家
            </div>
        </div>
        <div class="ndtj j2" @click="schedule()">
            <p>厂房仓库检查</p>
            <el-tooltip class="box-item" effect="dark" content="" placement="left">
                <template #content> 开始日期：2023-01-01<br>计划完成日期：2023-12-31<br>当前应完成：50%<br>当前实际完成：60%</template>
                <el-progress :percentage="60"></el-progress>
            </el-tooltip>
            <div class="num">
                计划数：500家&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;完成数：300家
            </div>
        </div>
        <div class="ndtj j3" @click="schedule()">
            <p>重点隐患</p>
            <el-tooltip class="box-item" effect="dark" content="" placement="left">
                <template #content> 开始日期：2023-01-01<br>计划完成日期：2023-12-31<br>当前应完成：41.67%<br>当前实际完成：41.67%</template>
                <el-progress :percentage="41.67"></el-progress>
            </el-tooltip>
            <div class="num">
                计划数：300处&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;完成数：125处
            </div>
        </div>
        <div class="ndtj j4" @click="schedule(17)">
            <p>专职站微站建设</p>
            <el-tooltip class="box-item" effect="dark" content="" placement="left" >
                <template #content> 开始日期：2023-01-01<br>计划完成日期：2023-12-31<br>当前应完成：50%<br>当前实际完成：33.33%</template>
                <el-progress :percentage="33.33"></el-progress>
            </el-tooltip>
            <div class="num">
                计划数：30个&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;完成数：10个
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            //闵行区基本情况
            data:{},
        };
    },
    mounted() {
        this.getData()
    },
    methods: {
        //本年度重点事项推进情况撒点
        schedule(id){
            if(id){
                this.$axios.post(this.$api.water.baseGgpFacilityList,{
                    "facilityType": [id] 
                }).then((res) => {
                    let arr = []
                    if(res.data.length>0){
                        arr = res.data
                    }
                    this.addMarker(arr, "enforcement-dynamic","本年度重点事项推进情况");
                });
            }else{
                this.addMarker([], "enforcement-dynamic","本年度重点事项推进情况");
            }
        },
        //闵行区基本情况
        getData(){
            this.$axios.get(this.$api.fireSite.regionInfo
            ).then(res=>{
               this.data = [
                { num: res.data[0].regionArea, name: '辖区面积',color:'#7DD807',unit:'km²' },
                { num: res.data[0].streetTownNum, name: '街镇',color:'#7DD807',unit:'个' },
                { num: res.data[0].regionResident, name: '常住人口',color:'#FC0609',unit:'万' },
                { num: res.data[0].hospitalNum, name: '医院',color:'#FD843A',unit:'家' },
                { num: res.data[0].keyCompanyNum, name: '重点单位',color:'#01C3B4',unit:'家' },
                { num: res.data[0].schoolNum, name: '学校',color:'#058DFE',unit:'个' },
                { num: res.data[0].largeBuildNum, name: '大型综合体',color:'#7DD807',unit:'个' },   
               ]
            })
        },
    },
};
</script>
<style lang="scss" scoped>
.matterInfo {
    .ndtj{
        margin:28px 0 0 0%;
        color:#fff;
        font-size: 14px;
        position: relative;
        >p{
            // margin-top:-50px;
        }
        .num{
            position: absolute;
            width:45%;
            margin:-4px 0 0 2%;
            display: inline-block;
        }

    }
}
</style>
<style>
.el-progress{
    width:58%;
    height:20px;
    display: inline-block;
}
.el-progress-bar__outer{
    height:14px !important;
}
.el-progress__text{
    color:#000 !important;
    text-align: center;
    position: absolute;
    top:1px;
    left:50%;
    z-index: 10;
}
.j1 .el-progress-bar__inner,.j3 .el-progress-bar__inner{
    background: #3f8a3f;
}
.j2 .el-progress-bar__inner{
    background: #5081c5;
}
.j4 .el-progress-bar__inner{
    background: #b72727;
}
</style>