<template>
    <!-- 隐患总计 -->
    <div class="hidangertotal">
        <!--<i class="iTop"></i>-->
        <div class="title" >
            <div class="item" @click="showDetail('all')">
                <span>现有隐患</span>
                <span v-if="data">( {{data.all}} )</span>
            </div>
            <div class="item" @click="showDetail('finish')">
                <span>已完成隐患</span>
                <span v-if="data">( {{data.finish}} )</span>                
            </div>            
        </div>
        <div class="content" v-if="data != null">
            <div class="contentL">
                <div class="contentLTop" >
                    <div class="contentL1" @click="showDetail('lv1')">
                        <p>重大隐患</p>
                        <p>{{data.lv1}}</p>
                    </div>
                    <!--<div class="contentL2">
                        <p>较大隐患</p>
                        <p>{{data.lv2}}</p>
                    </div>-->
                    <div class="contentL2" @click="showDetail('lv3')">
                      <p>一般隐患</p>
                      <p>{{data.lv3}}</p>
                    </div>
                </div>
                <div class="contentLBot">
                    <div class="box" @click="showDetail('toBeRectified')">
                        <p>待整改</p>
                        <p>{{data.toBeRectified}}</p>
                    </div>
                    <div class="box box2" @click="showDetail('waitForChecking')">
                        <p>待验收</p>
                        <p>{{data.waitForChecking}}</p>
                    </div>
                    <!--  -->
                    <!-- <div class="box box3" @click="showDetail('finish')">
                        <p>已完成</p>
                        <p>{{data.finish}}</p>
                    </div> -->
                </div>
            </div>
            <div class="contentR">
                <el-progress type="circle" :percentage="rectifyRate(data)" :stroke-width="12" color="#51FFFF" ></el-progress>
                <p>整改完成率</p>
            </div>
        </div>
        <p v-else class="noData">暂无内容</p>
    </div>
</template>
<script>
  export default {
    name: "hidangertotal",
    data() {
        return {
          nub: 0,
          data:null,
        }
    },
    mounted(){
      this.getDataFn();
    },
    computed: {
      rectifyRate(){
          return function(data){
              if(!data)return 0;
              if((data.finish+data.all)===0&&data.finish===0){
                return 100;
              }
              let rate=data.finish/(data.finish+data.all);
              rate=(rate*100).toFixed(1)
              return parseFloat(rate)
          }
      },
      putLastStr(){  // 去掉%
        return function (str) {
          return parseInt(str.substring(0,str.length-1))
        }
      }
    },
    methods:{
      /*putLastStr(str){
        return parseInt(str.substring(0,str.length-1))
      },*/
      getDataFn(){
        let _this = this;
        let obj = {
          gId:this.$port.gId,
          cId:this.$port.cId,
          path:this.$api.hiddenDangerCount,
        };

        this.$axios.AxiosMethods("get","3rd/bigScreenData/bigScreenMessage",obj,function (res) {
            let data = JSON.parse(res.data);
            // console.log('隐患总计___________________________',data)
            _this.data = data.hiddenDangerCount[0];
            _this.nub = Number(_this.data.rate.substring(0,_this.data.rate.length-1));


        });

        this.$websocketFn(obj,function (res) {
            // console.log('隐患总计websocketFn________________',res)
          let data = JSON.parse(res.data);

          _this.data = data.hiddenDangerCount[0];
          _this.nub = Number(_this.data.rate.substring(0,_this.data.rate.length-1));

          _this.$store.commit('setChangeMapList', data)

        });
      },
      showDetail(type){
            this.$router.push({
                path:"/hiddendanger/hiddendanger",
                query:{
                    ...this.$port,
                    searchType:type,
                    page: 4
                }
            });
            this.$store.commit('changeIndex', 4)
      }
    }
}
</script>
<style lang="less" scoped>
    .hidangertotal{
        font-size: 0.1rem;
        position: relative;
        margin-top: 0.24rem;
        /*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;
            height: 0.52rem;
            color: #fff;
            font-size: 0.16rem;
            display: flex;
            justify-content: space-between ;
            align-items: center;
            // padding-left:0.17rem;
            text-indent: 0.17rem;
            box-sizing: border-box;
            .item{
                width: 50%;
                height: 0.48rem;
                margin-top:0.04rem;
                box-sizing: border-box;
                &:nth-child(2){
                    border-left:0.01rem solid rgba(0,122,234,0.6);
                    text-align: right;
                }
            }
            /*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%;
            cursor: pointer;
            span:nth-child(2) {
                margin-right: 0.15rem;
            }
        }
        .content{
            display: flex;
            justify-content: space-between ;
            height: 1.94rem;
            background: url('../../../assets/image/bg2_05.png');
            background-size: 100% 100%;
            padding-left: 0.02rem;
            .contentL{
                width: 50%;
                height: 1.94rem;
                .contentLTop{
                    width: 100%;
                    display: flex;
                    height:1rem;
                    font-size: 0.14rem;
                    justify-content: space-between ;
                    align-items: center;
                    cursor: pointer;
                    .contentL1{
                        width: 50%;
                        height:1rem;
                        font-size: 0.14rem;
                        // padding: 0.24rem 0 0 0.16rem;
                        // display: inline-block;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        color: #fff;
                        text-align: center;
                        background: url('../../../assets/image/img_zhingdayinhuan.png');
                        p{
                          width: 100%;
                          font-weight: bold;
                          line-height:1;
                          margin-top: 0.08rem;
                        }
                        p:nth-of-type(2){
                            font-size: 0.3rem;
                            line-height:1;
                            // margin-top: 0.1rem;
                        }
                    }
                    .contentL2{
                        width: 50%;
                        height: 1rem;
                        // padding: 0.24rem 0 0 0.16rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        color: #fff;
                        background: url('../../../assets/image/img_yibanyinhuan.png');
                        p{
                          font-weight: bold;
                          line-height:1;
                          margin-top: 0.08rem;
                        }
                        p:nth-of-type(2){
                            font-size: 0.3rem;
                            line-height: 1;
                            // margin-top: 0.1rem;
                        }                        
                    }
                }
                .contentLBot{
                    display: flex;
                    height: 0.94rem;
                    justify-content: space-between ;
                    cursor: pointer;
                    .box{
                        // width: 33.33%;
                        width: 50%;
                        height: 0.94rem;
                        text-align: center;
                        display: inline-block;
                        box-sizing: border-box;
                        P{
                          font-size: 0.14rem;
                          font-weight: bold;
                        }
                        p:nth-child(1){
                            line-height: 0.28rem;
                            height: 0.28rem;
                            color: #fff;
                            text-align: center;
                            font-size: 0.14rem;
                            background-color: #FF4B28;
                        }
                        p:nth-child(2){
                            height: 0.66rem;
                            line-height: 0.66rem;
                            font-size: 0.3rem;
                            color: #fff;
                        }
                    }
                    .box2{
                        border-left: 0.01rem solid rgba(0,122,234,0.6);
                        border-right: 0.01rem solid rgba(0,122,234,0.6);
                        p:nth-child(1){
                            background-color: #FFC000;
                        }
                    }
                    .box3{
                        p:nth-child(1){
                            background-color: #4ECA22;
                        }
                    }
                }
            }
            .contentR{
                width: 50%;
                height: 1.72rem;
                display: inline-block;
                text-align: center;
                border-left:0.01rem solid rgba(0,122,234,0.6);
                padding-top: 0.22rem;
                p{
                    color: #fff;
                    font-size: 0.14rem;
                    margin-top: 0.1rem;
                }
            }
        }
        .noData{
            color: #fff;
            font-size: 0.24rem;
            line-height: 1.94rem;
            text-align: center;
        }
    }
</style>
<style >
    .hidangertotal .el-progress-circle{
        width: 1.1rem !important;
        height: 1.1rem !important;

    }
    .hidangertotal .el-progress__text{
        color: #fff;
      font-weight: bold;
    }
    .hidangertotal .el-progress__text{
        font-size: 0.18rem !important;
    }
</style>

