jhbigscreen/src/pages/components/MonitAndWarning.vue

<template>
    <el-row :key="elKey">
        <el-col :span="8">
            <div class="time-study-value">
                <p>今日预警数</p>
                <div class="analyse-num"><span>{{ todayCnt }}</span> 个</div>
            </div>
            <div class="time-study-value">
                <p>本周预警数</p>
                <div class="analyse-num"><span>{{ weekCnt}}</span> 个</div>
            </div>
        </el-col>
        <el-col :span="16">
            <div class="survey-oil-title">
                <div class="survey-oil-hr"></div>
                <div class="survey-oil-text">预警类型</div>
            </div>
            <div class="analyse-number-max" id="afootOverflowType" style="height: unset;">
                <div class="glr-login-number-max analyse-num-max" v-for="(item, idx) in warningType" style="height: unset;"
                    :key="idx">
                    <div class="glr-login-number-bgd glr-login-number-red-bgd"></div>
                    <div class="glr-login-number analyse-login-numbe">
                        <div><img src="images/text_red_spot.png">{{ item.name }}</div>
                        <div class="glr-rate-value glr-rate-red-value">
                            <span>{{ item.data }}/{{ item.total }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
export default {
    name: 'JhbigscreenMonitAndWarning',
    props:{
        type:{
            type:String,
            default:'index'
        }
    },
    data() {
        return {
            elKey:0,
            prjInfo:{},
            deptInfo:{},
            todayCnt:0,
            weekCnt:0,
            warningType: [
                {
                    name: 'AI预警',
                    data: 0,
                    total: 0
                }, {
                    name: '安全预警',
                    data: 0,
                    total: 0
                }, {
                    name: '质量预警',
                    data: 0,
                    total: 0
                }, {
                    name: '环境预警',
                    data: 0,
                    total: 0
                },
            ],
        };
    },

    mounted() {
        this.$bus.$on("projectChange", res => {
            this.prjInfo = res;            
            if(this.deptInfo.text){
                this.getMonitAndWarning();
            }
        });
        this.$bus.$on("deptChange",dept=>{
            this.deptInfo=dept;            
            if(this.prjInfo.id){
                this.getMonitAndWarning();
            }
        });
    },

    methods: {
        getMonitAndWarning(){            
            let prjId=0;
            if(this.type=='detail'){
                prjId=this.prjInfo.id;
            }
            this.$api.problemmodify.getMonitAndWarning(this.deptInfo.id,prjId).then(d=>{
                let tmps=d.data?.today||[];
                let sum=0;
                tmps.forEach(it=>{
                    sum+=it.id;
                })
                this.todayCnt=sum;
                sum=0;
                tmps=d.data?.week||[];
                tmps.forEach(it=>{
                    sum+=it.id;
                })
                this.weekCnt=sum;
                let data=0;
                sum=0;
                tmps=d.data?.group||[];
                let objs=tmps.filter(it=>it.infoType==0);
                objs.forEach(it=>{
                    sum+=it.id;
                    if(it.checkState==4){
                        data+=it.id;
                    }
                });
                this.warningType[1].data=data;
                this.warningType[1].total=sum;
                data=0;
                sum=0;
                tmps=d.data?.group||[];
                objs=tmps.filter(it=>it.infoType==1);
                objs.forEach(it=>{
                    sum+=it.id;
                    if(it.checkState!=4){
                        data+=it.id;
                    }
                });
                this.warningType[2].data=data;
                this.warningType[2].total=sum;
                this.elKey++;
            });
        },
    },
};
</script>

<style lang="scss" scoped></style>