<template>
    <!-- 风险点总计 -->
    <div class="riskpointtotal">
        <!--<i class="iTop"></i>-->
        <div class="title" @click="goRiskpoint('all')">
            <span>风险点总计</span>
            <span>( {{dataList.all}} )</span>
        </div>
        <div class="content">
            <div class="box1" @click="goRiskpoint('lv1')">
                <div class="circle">{{dataList.lv1}}</div>
                <p class="boxTitle">
                    <i></i>
                    重大风险
                </p>
            </div>
            <div class="box2" @click="goRiskpoint('lv2')">
                <div class="circle">{{dataList.lv2}}</div>
                <p class="boxTitle">
                    <i></i>
                    较大风险
                </p>
            </div>
            <div class="box3" @click="goRiskpoint('lv3')">
                <div class="circle">{{dataList.lv3}}</div>
                <p class="boxTitle">
                    <i></i>
                    一般风险
                </p>
            </div>
            <div class="box4" @click="goRiskpoint('lv4')">
                <div class="circle">{{dataList.lv4}}</div>
                <p class="boxTitle">
                    <i></i>
                    低风险
                </p>
            </div>
        </div>
    </div>
</template>
<script>
  export default {
    name: "riskpointtotal",
    data() {
        return {
            dataList:{
                all:0,
                lv1:0,
                lv2:0,
                lv3:0,
                lv4:0,
            },
        }
    },
    mounted(){
      this.getDataListFn();
    },
    methods:{
        getDataListFn(){
            let that = this;
            let obj = {
                gId:this.$port.gId,
                cId:this.$port.cId,
                path:this.$api.riskPointCount,
            }
            this.$axios.AxiosMethods("get","3rd/bigScreenData/bigScreenMessage",obj,function (res) {
                let data = JSON.parse(res.data);
                // console.log('风险点总计___________________________',data);
                that.dataList = data.riskPointCount[0];
                // that.$store.commit('setRiskPointTotalNum', that.dataList.all)

            });
            this.$websocketFn(obj,function (res) {
              let data = JSON.parse(res.data);
                // console.log('风险点总计websocketFn________________',res);
              that.dataList = data.riskPointCount[0];
              // that.$store.commit('setRiskPointTotalNum', that.dataList.all)
              that.$store.commit('setChangeMapList', data)
            });
        },
        goRiskpoint(str){
            this.$router.push({
                path:"/riskpoint/riskpoint",
                query:{
                    ...this.$port,
                    riskFalg: str,
                    page: 3
                }
            });
            this.$store.commit('changeIndex', 3)
        }
    }
}
</script>
<style lang="less" scoped>
    .riskpointtotal{
        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;
          cursor: pointer;
          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.6rem;
            display: flex;
            justify-content: space-between ;
            background: url('../../../assets/image/bg2_05.png');
            background-size: 100% 100%;
            .box1,.box2,.box3,.box4{
                width: 25%;
                height: 100%;
                text-align: center;
                display: inline-block;
                cursor: pointer;
                .circle{
                    width: 0.6rem;
                    height: 0.44rem;
                    border-radius: 50%;
                    display: inline-block;
                    margin-top: 0.3rem;
                    font-size: 0.2rem;
                    color: #fff;
                    padding-top: 0.16rem;
                    border:0.08rem solid #FF4B28;
                  font-weight: bold;
                }
                .boxTitle{
                    color: #fff;
                    display: inline-block;
                    font-size: 0.12rem;
                    margin: 0.16rem 0;
                    i{
                        width: 0.1rem;
                        height: 0.1rem;
                        display: inline-block;
                        border-radius: 50%;
                        margin-right: 0.05rem;
                        background-color:#FF4B28;
                    }
                }
            }
            .box2{
                .circle{
                    border:0.08rem solid #FF6C00;
                }
                .boxTitle{
                    i{
                        background-color:#FF6C00;
                    }
                }
            }
            .box3{
                .circle{
                    border:0.08rem solid #FFDF0E;
                }
                .boxTitle{
                    i{
                        background-color:#FFDF0E;
                    }
                }

            }
            .box4{
                .circle{
                    border:0.08rem solid #00C0FF;
                }
                .boxTitle{
                    i{
                        background-color:#00C0FF;
                    }
                }

            }
        }
    }
</style>
