<template>
  <!-- 防汛检查 -->
  <div class="Fangxunjiancha">
    <div class="leve2Title">防汛检查</div>
    <div v-loading="loading"
    element-loading-background="rgba(11, 18, 52, 0.3)">
    <div class="sumInfo">
      <div class="dataFrame">
        <div class="sum">{{listData.pumpDispatchNum||0}}/{{listData.pumpNum||0}}</div>
        <div class="name">泵站调度</div>
      </div>
      <div class="dataFrame">
        <div class="sum">{{listData.checkGoods||''}}</div>
        <div class="name">物资检查</div>
      </div>
      <div class="dataFrame">
        <div class="sum">{{listData.checkCars||''}}</div>
        <div class="name">车辆检查</div>
      </div>
    </div>
    </div>
  </div>
</template>
<script setup nama="Fangxunjiancha">
import { ref, reactive, onMounted } from 'vue';
import {
  drainageDispatchGetCheckCount,
} from '@/api/FloodControlAndDrainage.js';
const { proxy } = getCurrentInstance();
const loading=ref(false)
const listData=ref({
  
})
function gitDataFun() {
  loading.value=true
  drainageDispatchGetCheckCount().then(res => {
    console.log('获取防汛检查', res);
  loading.value=false
    if (res && res.code == 200) {
      listData.value=res.data
    }
  },(error)=>{
    loading.value=false
  });
}
onMounted(() => {
  gitDataFun()
});
</script>
<style lang="scss" scoped>
.Fangxunjiancha {
  .sumInfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 5px;
    .dataFrame {
      width: 136px;
      height: 76px;
      text-align: center;
      background: url('@/assets/images/pictureOnMap/dataFrame.png') no-repeat center;
      background-size: 100% 100%;
      .sum {
        font-weight: bold;
        font-size: 20px;
        color: #2cb7ff;
        line-height: 25px;
        padding-top: 16px;
      }
      .name {
        font-weight: 500;
        font-size: 16px;
        color: #ccdfff;
      font-family: 'SourceHanSansCN-Regular';

      }
    }
  }
}
</style>