mudu-vx/src/views/vxEwm/garden/park/components/statistics.vue

<template>
  <div class="statistics-container">
    <div class="rows-one">
      <div class="one-item">
        <div class="one-item-icon-name">
          <div class="icon-img">
            <img src="@/assets/image/vxEwm/enterprise-icon.png" alt="" />
          </div>
          <div class="icon-name">企业总数</div>
        </div>
        <div class="one-item-num">
          <div class="num-data">{{ parkData.enterpriseNum || 0 }}</div>
          <div class="num-unit">家</div>
        </div>
      </div>
      <div class="one-item">
        <div class="one-item-icon-name">
          <div class="icon-img">
            <img src="@/assets/image/vxEwm/polling.png" alt="" />
          </div>
          <div class="icon-name">巡查次数</div>
        </div>
        <div class="one-item-num">
          <div class="num-data">{{ parkData.checkNum || 0 }}</div>
          <div class="num-unit">次</div>
        </div>
      </div>
    </div>
    <div class="rows-two">
      <div class="two-item">
        <div class="two-item-title">风险隐患</div>
        <div class="dispose-item" style="margin-bottom: 0.5rem">
          <div class="dispose-icon">
            <img src="@/assets/image/vxEwm/dispose-no.png" alt="" />
          </div>
          <div class="dispose-data">
            <div class="data-title">未处理</div>
            <div class="data-num">
              <div class="num" style="color: #ff4800">
                {{ parkData.processedNo || 0 }}
              </div>
              <div class="unit">个</div>
            </div>
          </div>
        </div>
        <div class="dispose-item">
          <div class="dispose-icon">
            <img src="@/assets/image/vxEwm/dispose-yes.png" alt="" />
          </div>
          <div class="dispose-data">
            <div class="data-title">已处理</div>
            <div class="data-num">
              <div class="num" style="color: #0fbe8f">
                {{ parkData.processed || 0 }}
              </div>
              <div class="unit">个</div>
            </div>
          </div>
        </div>
      </div>
      <div class="two-item">
        <div class="two-item-title">整改工单</div>
        <div class="work-order-item">
          <div class="order-icon-name">
            <div class="order-icon">
              <img src="@/assets/image/vxEwm/circle-6.png" alt="" />
            </div>
            <div class="order-name">整改中</div>
          </div>
          <div class="order-data">
            <div class="order-num" style="color: #4cbaf3">
              {{ parkData.improvingIsFinal0Count || 0 }}
            </div>
            <div class="order-unit">个</div>
          </div>
        </div>
        <div class="work-order-item">
          <div class="order-icon-name">
            <div class="order-icon">
              <img src="@/assets/image/vxEwm/circle-6.png" alt="" />
            </div>
            <div class="order-name">延期未完成</div>
          </div>
          <div class="order-data">
            <div class="order-num" style="color: #ff4800">
              {{ parkData.improvingDelayCount || 0 }}
            </div>
            <div class="order-unit">个</div>
          </div>
        </div>
        <div class="work-order-item">
          <div class="order-icon-name">
            <div class="order-icon">
              <img src="@/assets/image/vxEwm/circle-6.png" alt="" />
            </div>
            <div class="order-name">已完成</div>
          </div>
          <div class="order-data">
            <div class="order-num" style="color: #0dcdbe">
              {{ parkData.improvingIsFinal1Count || 0 }}
            </div>
            <div class="order-unit">个</div>
          </div>
        </div>
        <div class="work-order-item">
          <div class="order-icon-name">
            <div class="order-icon">
              <img src="@/assets/image/vxEwm/circle-6.png" alt="" />
            </div>
            <div class="order-name">工单合计</div>
          </div>
          <div class="order-data">
            <div class="order-num" style="color: #ff9600">
              {{ parkData.improvingCount || 0 }}
            </div>
            <div class="order-unit">个</div>
          </div>
        </div>
      </div>
    </div>
    <div class="rows-three">
      <div class="general-item">
        <div class="three-item-title">楼幢数量</div>
        <div class="three-item-data">
          <div class="data-num">{{ dataList.numberBuildings }}</div>
          <div class="data-unit">幢</div>
        </div>
      </div>
      <div class="general-item">
        <div class="three-item-title">企业数量</div>
        <div class="three-item-data">
          <div class="data-num">
            <!-- {{ dataList.numberEnterprises }} -->
            24
          </div>
          <div class="data-unit">家</div>
        </div>
      </div>
      <div class="general-item">
        <div class="three-item-title">员工总人数</div>
        <div class="three-item-data">
          <div class="data-num">{{ dataList.totalEmployees }}</div>
          <div class="data-unit">人</div>
        </div>
      </div>
    </div>
    <div class="rows-four">
      <div class="general-item">
        <div class="three-item-title">总建筑面积</div>
        <div class="three-item-data">
          <div class="data-num">{{ dataList.totalBuildingArea }}</div>
          <div class="data-unit">㎡</div>
        </div>
      </div>
      <div class="four-item">
        <div class="work-order-item">
          <div class="order-icon-name">
            <div class="order-icon">
              <img src="@/assets/image/vxEwm/circle-6.png" alt="" />
            </div>
            <div class="order-name">占地面积</div>
          </div>
          <div class="order-data">
            <div class="order-num" style="color: #177fd4">
              {{ dataList.floorArea }}
            </div>
            <div class="order-unit">㎡</div>
          </div>
        </div>
        <div class="work-order-item">
          <div class="order-icon-name">
            <div class="order-icon">
              <img src="@/assets/image/vxEwm/circle-7.png" alt="" />
            </div>
            <div class="order-name">占地面积</div>
          </div>
          <div class="order-data">
            <div class="order-num" style="color: #ff9600">
              {{ dataList.floorAreaT }}
            </div>
            <div class="order-unit">亩</div>
          </div>
        </div>
      </div>
    </div>
    <div class="rows-five">
      <div>
        <div
          class="general-item"
          style="align-items: flex-start; margin-bottom: 0.35rem"
        >
          <div class="three-item-title">出租面积</div>
          <div class="three-item-data">
            <div class="data-num">{{ dataList.rentalArea }}</div>
            <div class="data-unit">㎡</div>
          </div>
        </div>
        <div class="general-item" style="align-items: flex-start">
          <div class="three-item-title">自用面积</div>
          <div class="three-item-data">
            <div class="data-num">{{ dataList.selfArea }}</div>
            <div class="data-unit">㎡</div>
          </div>
        </div>
      </div>

      <div>
        <div class="work-order-item">
          <div class="order-icon-name">
            <div class="order-icon">
              <img src="@/assets/image/vxEwm/circle-6.png" alt="" />
            </div>
            <div class="order-name">房产证面积</div>
          </div>
          <div class="order-data">
            <div class="order-num" style="color: #177fd4">
              {{ dataList.realEstateCertificateArea }}
            </div>
            <div class="order-unit">㎡</div>
          </div>
        </div>
        <div class="work-order-item">
          <div class="order-icon-name">
            <div class="order-icon">
              <img src="@/assets/image/vxEwm/circle-6.png" alt="" />
            </div>
            <div class="order-name">无证面积</div>
          </div>
          <div class="order-data">
            <div class="order-num" style="color: #177fd4">
              {{ dataList.unlicensedArea }}
            </div>
            <div class="order-unit">㎡</div>
          </div>
        </div>
        <div class="work-order-item">
          <div class="order-icon-name">
            <div class="order-icon">
              <img src="@/assets/image/vxEwm/circle-7.png" alt="" />
            </div>
            <div class="order-name">土地证面积</div>
          </div>
          <div class="order-data">
            <div class="order-num" style="color: #ff9600">
              {{ dataList.landCertificateArea }}
            </div>
            <div class="order-unit">亩</div>
          </div>
        </div>
        <div class="work-order-item">
          <div class="order-icon-name">
            <div class="order-icon">
              <img src="@/assets/image/vxEwm/circle-7.png" alt="" />
            </div>
            <div class="order-name">占地面积</div>
          </div>
          <div class="order-data">
            <div class="order-num" style="color: #ff9600">
              {{ dataList.floorAreaT }}
            </div>
            <div class="order-unit">亩</div>
          </div>
        </div>
      </div>
    </div>
    <div class="rows-one">
      <div class="one-item">
        <div class="one-item-icon-name">
          <div class="icon-img">
            <img src="@/assets/image/vxEwm/y-z.png" alt="" />
          </div>
          <div class="icon-name">年租金总额</div>
        </div>
        <div class="one-item-num">
          <div class="num-data">{{ dataList.totalAnnualRent }}</div>
          <div class="num-unit">万元</div>
        </div>
      </div>
      <div class="one-item">
        <div class="one-item-icon-name">
          <div class="icon-img">
            <img src="@/assets/image/vxEwm/p-z.png" alt="" />
          </div>
          <div class="icon-name">平均月租金单价</div>
        </div>
        <div class="one-item-num">
          <div class="num-data">
            {{ dataList.averageMonthlyRentalUnitPrice }}
          </div>
          <div class="num-unit">元/㎡/月</div>
        </div>
      </div>
    </div>
    <div class="rows-one">
      <div class="one-item">
        <div class="one-item-icon-name">
          <div class="icon-img">
            <img src="@/assets/image/vxEwm/year.png" alt="" />
          </div>
          <div class="icon-name">年总税收</div>
        </div>
        <div class="one-item-num">
          <div class="num-data">{{ dataList.annualGrossTaxRevenue }}</div>
          <div class="num-unit">万元</div>
        </div>
      </div>
      <div class="one-item">
        <div class="one-item-icon-name">
          <div class="icon-img">
            <img src="@/assets/image/vxEwm/mu.png" alt="" />
          </div>
          <div class="icon-name">亩均税收</div>
        </div>
        <div class="one-item-num">
          <div class="num-data">{{ dataList.taxPerMu }}</div>
          <div class="num-unit">万元/km²</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getParkinfo,
  getCheckslist,
  getTroublelist,
  getProbing,
} from '@/api/api2.js'
export default {
  data() {
    return {
      parkData: {
        enterpriseNum: 0,
        checkNum: 0,
        processed: 0,
        processedNo: 0,
        improvingCount: 0,
        improvingDelayCount: 0,
        improvingIsFinal0Count: 0,
        improvingIsFinal1Count: 0,
      },
    }
  },
  props: {
    dataList: {
      type: Object,
      default: null,
    },
    parkOrgId: {
      type: [String, Number],
      default: null,
    },
  },
  created() {
    this.getViewData()
  },
  methods: {
    onSafetyTrouble() {},
    onSateImproving() {},
    getViewData() {
      this.getParkInfo()
      this.getCheck()
      this.getTroublelist('0,1', 'processedNo')
      this.getTroublelist('2', 'processed')
      this.getProbing()
    },
    getProbing() {
      getProbing({ ParkID: this.parkOrgId }).then((res) => {
        this.parkData.improvingCount = res.data.improvingCount
        this.parkData.improvingDelayCount = res.data.improvingDelayCount
        this.parkData.improvingIsFinal0Count = res.data.improvingIsFinal0Count
        this.parkData.improvingIsFinal1Count = res.data.improvingIsFinal1Count
      })
    },
    getTroublelist(state, key) {
      let querParams = {
        page: 1,
        limit: 1,
        ParkID: this.parkOrgId,
        Status: state,
      }
      getTroublelist(querParams).then((res) => {
        // console.log('sasa', res)
        this.parkData[key] = res.count
      })
    },
    getParkInfo() {
      getParkinfo(this.parkOrgId).then((res) => {
        // console.log('mlkkk', res)
        this.parkData.enterpriseNum = res.data.enterpriseCountSum
      })
    },
    getCheck() {
      let querParams = {
        page: 1,
        limit: 1,
        ParkID: this.parkOrgId,
      }
      getCheckslist(querParams).then((res) => {
        this.parkData.checkNum = res.count
      })
    },
  },
}
</script>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.statistics-container {
  padding-bottom: 0.3rem;
  & > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.24rem;
  }
  .one-item {
    width: 48%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 #0000001a;
    padding: 0.2rem;
    .one-item-icon-name {
      margin-bottom: 0.2rem;
    }
    .one-item-icon-name,
    .one-item-num {
      display: flex;
      align-items: center;

      .icon-img {
        height: 0.4rem;
        width: 0.4rem;
        margin-right: 0.1rem;
        img {
          height: 100%;
          width: 100%;
        }
      }
      .icon-name {
        font-weight: 500;
        font-size: 0.2rem;
        color: #666666;
      }
      .num-data {
        font-size: 0.4rem;
        color: #333333;
        font-family: 'PingFang-SC-Bold';
        margin-right: 0.1rem;
      }
      .um-unit {
        font-weight: bold;
        font-size: 0.19rem;
        color: #333333;
      }
    }
  }
  .two-item {
    width: 48%;
    height: 3.2rem;

    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 #0000001a;
    padding: 0.2rem;
    .two-item-title {
      font-weight: 500;
      font-size: 0.25rem;
      color: #666666;
      margin-bottom: 0.2rem;
    }
    .dispose-item {
      display: flex;
      align-items: center;
      .dispose-icon {
        height: 0.66rem;
        width: 0.66rem;
        margin-right: 0.25rem;
        img {
          height: 100%;
          width: 100%;
          display: block;
        }
      }
      .data-title {
        font-weight: 500;
        font-size: 0.2rem;
        color: #999999;
        margin-bottom: 0.1rem;
      }
      .data-num {
        display: flex;
        align-items: center;
        .num {
          font-size: 0.4rem;
          font-family: 'PingFang-SC-Bold';
        }
        .unit {
          margin-left: 0.1rem;
          font-weight: bold;
          font-size: 0.19rem;
          color: #333333;
        }
      }
    }
  }
  .rows-three {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 #0000001a;
    padding: 0.2rem;
  }
  .rows-four,
  .rows-five {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 #0000001a;
    padding: 0.2rem;
    & > div {
      flex: 1;
    }
    & > div:first-child {
      align-items: flex-start;
    }
  }
  .work-order-item {
    margin-bottom: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .order-icon-name {
      display: flex;
      .order-icon {
        width: 0.26rem;
        height: 0.27rem;
        position: relative;
        img {
          position: absolute;
          top: 0.08rem;
          left: 0;
          height: 100%;
          width: 100%;
          display: block;
        }
      }
      .order-name {
        font-weight: 500;
        font-size: 0.2rem;
        color: #999999;
      }
    }
  }
  .order-data {
    display: flex;
    align-items: center;
    .order-num {
      font-size: 0.4rem;
      font-family: 'PingFang-SC-Bold';
    }
    .order-unit {
      margin-left: 0.1rem;
      font-weight: bold;
      font-size: 0.19rem;
    }
  }
  .general-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .three-item-title {
      font-weight: 500;
      font-size: 0.2rem;
      color: #999999;
      margin-bottom: 0.1rem;
    }
    .three-item-data {
      display: flex;
      align-items: center;
      .data-num {
        font-size: 0.4rem;
        font-family: 'PingFang-SC-Bold';
      }
      .data-unit {
        margin-left: 0.1rem;
        font-weight: bold;
        font-size: 0.19rem;
      }
    }
  }
}

.num-unit,
.data-unit,
.order-unit,
.unit {
  position: relative;
  top: 0vh;
}
</style>