<template>
    <!-- 失控风险点 (预警风险点)-->
    <div class="riskcontrol" >
        <!--<i class="iTop"></i>-->
        <div class="title">
            <span>预警风险点</span>
            <span v-if="data">( {{data.all}} )</span>
        </div>
        <div class="content" v-if="data != null">
            <div class="box1">
                <p></p>
                <p>重大风险点</p>
                <div class="boxNub">{{data.lv1}}</div>
            </div>
            <div class="box2">
                <p></p>
                <p>较大风险点</p>
                <div class="boxNub">{{data.lv2}}</div>
            </div>
            <div class="box3">
                <p></p>
                <p>一般风险点</p>
                <div class="boxNub">{{data.lv3}}</div>
            </div>
            <div class="box4">
                <p></p>
                <p>低风险点</p>
                <div class="boxNub">{{data.lv4}}</div>
            </div>
        </div>
        <p v-else class="noData">暂无内容</p>
    </div>
</template>
<script>
export default {
    name: "riskcontrol",
    data() {
        return {
          data:null,
        }
    },
    mounted(){


      this.getDataFn();

    },
    methods:{
        getDataFn(){
            let _this = this;
            let obj = {
                gId:this.$port.gId,
                cId:this.$port.cId,
                path:this.$api.warningRiskPoint,
            };

            this.$axios.AxiosMethods("get","3rd/bigScreenData/bigScreenMessage",obj,function (res) {
                let data = JSON.parse(res.data);
                // console.log('预警风险点___________________________',data);
                _this.data = data.warningRiskPoint[0];

                // _this.$store.commit('setWarningPointTotalNum', _this.data.all)

            });

            this.$websocketFn(obj,function (res) {
              let data = JSON.parse(res.data);

              // console.log('预警风险点websocketFn________________',res);
                _this.data = data.warningRiskPoint[0];
              // _this.$store.commit('setWarningPointTotalNum', _this.data.all)
              _this.$store.commit('setChangeMapList', data)
            });
        },
    }
}
</script>
<style lang="less" scoped>
    .riskcontrol{
        font-size: 0.1rem;
        position: relative;
        /*border:0.01rem solid rgba(0,122,234,0.6);*/
        .iTop{
            width: 0.1rem;
            height: 0.1rem;
            display: block;
            position: absolute;
            background: url('../../../assets/image/img_jiao.png');
            left: 0;
        }
        .title{
          font-weight: bold;
            line-height: 0.52rem;
            font-size: 0.16rem;
            color: #fff;
            padding-left: 0.17rem;
            display: flex;
            justify-content: space-between ;
            /*border-bottom:0.01rem solid rgba(0,122,234,0.6);
            background:linear-gradient(90deg,rgba(0,54,128,1) 0%, rgba(0,30,63,1)  100%);*/
            background: url('../../../assets/image/bg2_03.png');
            background-size: 100% 100%;
            span:nth-child(2) {
                margin-right: 0.15rem;
            }
        }
        .content{
            width: 100%;
            height: 1.2rem;
            display: flex;
            justify-content: space-between ;
            background: url('../../../assets/image/bg2_05.png');
            background-size: 100% 100%;
            padding-left: 0.02rem;
            box-sizing: border-box;
            .box1,.box2,.box3,.box4{
                width: 25%;
                height: 1.2rem;
                font-size: 0.14rem;
                display: inline-block;
                border-right:0.01rem solid rgba(0,122,234,0.6);
                p:nth-of-type(1){
                    height: 0.06rem;
                    background-color: #FF4B28;
                }
                p:nth-of-type(2){
                    height: 0.3rem;
                    line-height: 0.3rem;
                    color: #fff;
                    text-align: center;
                    border-bottom:0.01rem solid rgba(0,122,234,0.6);
                    background-color: #40354B;
                }
                .boxNub{
                    color: #fff;
                    font-size: 0.2rem;
                    text-align: center;
                    line-height: 0.8rem;
                  font-weight: bold;
                }
            }
            .box2{
                p:nth-of-type(1){
                    background-color: #FF6C00;
                }
                p:nth-of-type(2){
                    background-color: #403D40;
                }
            }
            .box3{
                p:nth-of-type(1){
                    background-color: #FFDF0E;
                }
                p:nth-of-type(2){
                    background-color: #405A45;
                }
            }
            .box4{
                p:nth-of-type(1){
                    background-color: #00C0FF;
                }
                p:nth-of-type(2){
                    background-color: #005586;
                }
            }
        }
        .noData{
            color: #fff;
            font-size: 0.24rem;
            line-height: 1.2rem;
            text-align: center;
        }
    }
</style>

