<template>
  <div class="dangerComponent">
    <div class="bottom-max-big-box">
      <div class="bottom-top-box">
        <div class="bottom-top-min-box">
          <div>
            <p class="null-p"></p>
            <div class="num-p" v-for="(item,index) in deviceNum">
              <p>{{item}}</p>
            </div>
            <p class="null-p"></p>
          </div>
          <p class="bottom-title-p">设备数量</p>
        </div>
        <div class="bottom-top-min-box">
          <div>
            <p class="null-p"></p>
            <div class="num-p" v-for="(item,index) in chemicalNum">
              <p>{{item}}</p>
            </div>
            <p class="null-p"></p>
          </div>
          <p class="bottom-title-p">化学品数量</p>
        </div>
        <div class="bottom-top-min-box">
          <div>
            <p class="null-p"></p>
            <div class="num-p" v-for="(item,index) in gasCylinderNum">
              <p>{{item}}</p>
            </div>
            <p class="null-p"></p>
          </div>
          <p class="bottom-title-p">气瓶数量</p>
        </div>
      </div>
      <img class="bottom-img" src="@/assets/ZDimages/bottom_icon.png">
    </div>
  </div>
</template>
<script>
  import { laboratoryBigViewHazardStatistics } from "@/api/index";
  export default {
    name: 'dangerComponent',
    data () {
      return {
        propsData:{
          title:'危险源',
        },
        //设备
        deviceNum:[0],
        //化学品
        chemicalNum:[0],
        //气瓶
        gasCylinderNum:[0],
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      laboratoryBigViewHazardStatistics(floorId){
        laboratoryBigViewHazardStatistics({floorId:floorId}).then(response => {
          if(response.data.deviceNum > 0){
            let deviceNum = [];
            response.data.deviceNum = response.data.deviceNum + '';
            for(let i=0;i<response.data.deviceNum.length;i++){
              deviceNum.push(response.data.deviceNum[i])
            }
            this.$set(this,'deviceNum',deviceNum);
          }
          if(response.data.chemicalNum > 0){
            let chemicalNum = [];
            response.data.chemicalNum = response.data.chemicalNum + '';
            for(let i=0;i<response.data.chemicalNum.length;i++){
              chemicalNum.push(response.data.chemicalNum[i])
            }
            this.$set(this,'chemicalNum',chemicalNum);
          }
          if(response.data.gasCylinderNum > 0){
            let gasCylinderNum = [];
            response.data.gasCylinderNum = response.data.gasCylinderNum + '';
            for(let i=0;i<response.data.gasCylinderNum.length;i++){
              gasCylinderNum.push(response.data.gasCylinderNum[i])
            }
            this.$set(this,'gasCylinderNum',gasCylinderNum);
          }
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .dangerComponent{
    width:438px;
    height:290px;
    .bottom-max-big-box{
      overflow: hidden;
      width:438px;
      height:290px;
      background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
      .bottom-top-box{
        display: flex;
        margin:40px auto 0;
        .bottom-top-min-box{
          width:197px;
          div{
            display: flex;
            .null-p{
              flex:1;
            }
            .num-p{
              width:35px;
              height:40px;
              background: no-repeat;
              background-image: url("../../../assets/ZDimages/img_wxy_szbg@1x.png");
              background-size: 100%;
              margin:0 5px;
              p{
                margin:0;
                width:35px;
                height:40px;
                line-height:40px;
                text-align: center;
                font-size:36px;
                background: -webkit-linear-gradient(0deg, #FFFFFF, #FF9A1E); /* Chrome, Safari */
                background: linear-gradient(0deg, #FFFFFF, #FF9A1E); /* 标准语法 */
                -webkit-background-clip: text; /* Chrome, Safari */
                background-clip: text;
                -webkit-text-fill-color: transparent; /* Chrome, Safari */
                color: transparent; /* 其他浏览器 */
              }
            }
          }
          .bottom-title-p{
            color:#fff;
            margin-top:16px;
            line-height:20px;
            font-size:20px;
            height:20px;
            text-align: center;
          }
        }
      }
      .bottom-img{
        display: block;
        width:398px;
        height:142px;
        margin:0 auto;
      }
    }
  }
</style>
