CaiYuanYiTiHua/src/views/sys/exception/dataScreen/DataStatistics/index.vue

<template>
  <div class="sub-title">
    总数与面积统计
  </div>
  <div class="area-data-div">
    <div class="area-div">
      <div class="data-item">
        <div class="data-label data-center">下发图斑数(个）</div>
            <div class="data-value data-center">{{dataProcessingCount(xfzs)}}</div>
      </div>
      <div class="data-item">
        <div class="data-label data-center">图斑面积(亩）</div>
        <div class="data-value data-center">{{ dataProcessingCount(wfmj) }}</div>
      </div>
      <div class="data-item">
        <div class="data-label data-center">耕地面积(亩）</div>
        <div class="data-value data-center">{{dataProcessingCount(xfgdmj)}}</div>
      </div>
      <div class="data-item">
        <div class="data-label data-center">整改后剩余耕地面积(亩）</div>
        <div class="data-value data-center">{{dataProcessingCount(zghsywfgdgdmj)}}</div>
      </div>
      <div class="data-item">
        <div class="data-label data-center">核实后新增违法耕地(亩）</div>
        <div class="data-value data-center">{{dataProcessingCount(hshxzwfgdgdmj)}}</div>
      </div>
    </div>
    <div class="data-div">
      <div class="sub-title-div">新增建设用地</div>
      <div class="row-item-div" style="margin-bottom: 22px;">
        <div class="item-div">
          <div class="item-label">合法用地(个）</div>
          <div class="item-value">{{hfzs}}</div>
        </div>
        <div class="item-interval"></div>
        <div class="item-div" style=" padding-left: 17px;">
          <div class="item-label">合法用地(亩）</div>
          <div class="item-value">{{dataProcessingCount(hfmj)}}</div>
        </div>
      </div>
      <div class="row-item-div" style="margin-bottom: 27px;">
        <div class="item-div">
          <div class="item-label">违法用地(个）</div>
          <div class="item-value">{{wfzs}}</div>
        </div>
        <div class="item-interval"></div>
        <div class="item-div" style=" padding-left: 17px;">
          <div class="item-label">违法用地(亩）</div>
          <div class="item-value">{{dataProcessingCount(wfmj)}}</div>
        </div>
      </div>
      <div class="sub-title-div" style="margin-bottom:15px;">其他用地</div>
      <div class="row-item-div">
        <div class="item-div">
          <div class="item-label">其他用地(个）</div>
          <div class="item-value">{{qtzs}}</div>
        </div>
        <div class="item-interval"></div>
        <div class="item-div" style=" padding-left: 17px;">
          <div class="item-label">其他用地(亩）</div>
          <div class="item-value">{{dataProcessingCount(qtmj)}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, onMounted,watch } from "vue"
import { GetTotalAndArea } from '@/api/statistical/index.ts'
import { dataProcessingCount } from '@/views/demo/tiankongdi/util.ts'

const props = defineProps(['countyId','landType'])

const hfmj = ref(0)
const hfzs = ref(0)
const hshxzwfgdgdmj = ref(0)
const qtmj = ref(0)
const qtzs = ref(0)
const wfmj = ref(0)
const wfzs = ref(0)
const xfgdmj = ref(0)
const xfmj = ref(0)
const xfzs = ref(0)
const zghsywfgdgdmj = ref(0)

onMounted(() => {
  getData()
})
const getData = () => {
  GetTotalAndArea({countyid:props.countyId,type:props.landType}).then(res => {
    hfmj.value = res.hfmj
    hfzs.value = res.hfzs
    hshxzwfgdgdmj.value = res.hshxzwfgdgdmj
    qtmj.value = res.qtmj
    qtzs.value = res.qtzs
    wfmj.value = res.wfmj
    wfzs.value = res.wfzs
    xfgdmj.value = res.xfgdmj
    xfmj.value = res.xfmj
    xfzs.value = res.xfzs
    zghsywfgdgdmj.value = res.zghsywfgdgdmj
  })
}
watch(() => [props.countyId,props.landType], () => {
  getData()
})
</script>

<style lang="scss" scoped>
.sub-title{
  height: 37px;
  display: flex;
  align-items: center;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 16px;
  color: #FFFFFF;
  text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
  -webkit-background-clip: text;
  text-shadow: 0px 2px 6px rgba(5,28,55,0.42);
  background: url('@/assets/statistical/sub_title.png');
  padding-left: 35px;
}
.area-data-div{
  height: 283px;
  display:flex;
  padding-top:15px;
  padding-left:9px;
  .area-div{
    width: 156px;
    margin-right: 36px;
    :nth-last-child(1){
      margin-bottom: 0;
    }
  }
  .data-item{
    height: 43px;
    padding-top:6px;
    margin-bottom: 8px;
    background: url('@/assets/statistical/item_label.png') no-repeat;
    background-size: cover;
    .data-center{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .data-label{
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 10px;
      color: #7EBBFF;
      margin-bottom:6px;
      line-height: 10px;
    }
    .data-value{
      font-family: DIN;
      font-weight: 500;
      font-size: 20px;
      color: #FFFFFF;
      line-height: 15px;
    }
  }
  .data-div{
    width: 194px;
    .sub-title-div{
      height: 19px;
      display:flex;
      align-items:center;
      justify-content: center;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 11px;
      color: #7EBBFF;
      margin-bottom:19px;
      background: url('@/assets/statistical/item_title.png') no-repeat;
      background-size: cover;
    }
    .row-item-div{
      display: flex;
      height:35px;
      .item-div{
        flex: 1;
        .item-label{
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 11px;
          color: #7EBBFF;
          margin-bottom:10px;
        }
        .item-value{
          font-family: DIN;
          font-weight: 500;
          font-size: 23px;
          color: #FFFFFF;
        }
      }
      .item-interval{
        width: 1px;
        height: 43px;
        background: #2A89DA;
      }
    }
  }
}
</style>