xzlz_JczWeb/src/views/home/components/collection.vue

<template>
  <div class="data-statistics">
    <!-- 人员数据采集 -->
    <div class="data-collection">
      <h2 class="section-title">人员数据采集</h2>
      <div class="statistics-cards">
        <div class="stat-card">
          <div class="stat-number">{{ personnelData.rzhy }}</div>
          <div class="f14">人证核验</div>
          <div><img src="@/assets/images/bg_03.png" alt="" /></div>
        </div>
        <div class="stat-card">
          <div class="stat-number">{{ personnelData.wgtx }}</div>
          <div class="f14">无感通行</div>
          <div><img src="@/assets/images/bg_04.png" alt="" /></div>
        </div>
        <div class="stat-card">
          <div class="stat-number">{{ personnelData.sczd }}</div>
          <div class="f14">手持终端登记</div>
          <div><img src="@/assets/images/bg_05.png" alt="" /></div>
        </div>
      </div>
    </div>

    <!-- 流入流出统计 -->
    <div class="flow-statistics">
      <h2 class="section-title">流入流出统计</h2>
      <div class="flow-grid">
        <div class="flow-item">
          <div class="flow-icon">
            <img width="60" src="@/assets/images/bg_06.png" alt="" />
          </div>
          <div class="flow-info">
            <span class="flow-label">进林人员</span>
            <span class="flow-number">{{ carAccess.rlsl }}</span>
          </div>
        </div>
        <div class="flow-item">
          <div class="flow-icon">
            <img width="60" src="@/assets/images/bg_06.png" alt="" />
          </div>
          <div class="flow-info">
            <span class="flow-label">出林人员</span>
            <span class="flow-number">{{ carAccess.clsl }}</span>
          </div>
        </div>
        <div class="flow-item">
          <div class="flow-icon">
            <img width="60" src="@/assets/images/bg_07.png" alt="" />
          </div>
          <div class="flow-info">
            <span class="flow-label">进林车辆</span>
            <span class="flow-number">{{ personneAccess.rlsl }}</span>
          </div>
        </div>
        <div class="flow-item">
          <div class="flow-icon">
            <img width="60" src="@/assets/images/bg_07.png" alt="" />
          </div>
          <div class="flow-info">
            <span class="flow-label">出林车辆</span>
            <span class="flow-number">{{ personneAccess.clsl }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 可以在这里添加需要的响应式数据和方法
import { jczCountWay, jczgetcountCrl, jczGzrycountCrl } from "@/api/mosty-jcz";
import { useRoute } from 'vue-router'
import { ref } from "vue";
const route = useRoute()
const personnelData = ref({
  rzhy: 0,
  sczd: 0,
  wgtx: 0
});
const personneAccess = ref({
  clsl: 0,
  rlsl: 0
});
const carAccess = ref({
  clsl: 0,
  rlsl: 0
});
const countWay = () => {
  jczCountWay({kkId:route.query.id?route.query.id:""})
    .then((res) => {
      personnelData.value = res;
    })
    .catch((err) => {});
};
const getcountCrl = () => {
  jczgetcountCrl({kkId:route.query.id?route.query.id:""})
    .then((res) => {
      personneAccess.value = res;
    })
    .catch((err) => {});
};
const GzrycountCrl = () => {
  jczGzrycountCrl({kkId:route.query.id?route.query.id:""})
    .then((res) => {
      carAccess.value = res;
    })
    .catch((err) => {});
};
countWay();
GzrycountCrl();
getcountCrl();
</script>

<style scoped lang="scss">
.data-statistics {
  height: 100%;
  overflow: hidden;
  padding: 0 10px;
  box-sizing: border-box;
}

.section-title {
  margin-bottom: 15px;
  font-size: 18px;
  position: relative;
  padding-left: 12px;
  background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 16px;
  background: url("~@/assets/images/bg_02.png");
  background-size: 100% 100%;
}

.statistics-cards {
  display: flex;
  gap: 20px;
}

.stat-card {
  flex: 1;
  text-align: center;
  position: relative;
  color: #fff;
}

.stat-number {
  font-size: 32px;
  color: #00f0ff;
  margin-bottom: 5px;
}

.flow-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding-left: 15px;
  box-sizing: border-box;
}

.flow-item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.flow-icon {
  font-size: 24px;
  color: #00f0ff;
}

.flow-info {
  display: flex;
  flex-direction: column;
}

.flow-label {
  font-size: 14px;
  color: #fff;
}

.flow-number {
  font-size: 24px;
  color: #00f0ff;
  margin-top: 5px;
}
</style>