lcw/xzlz_JczWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

124

Browse Source
This commit is contained in:
lcw
2025-06-02 20:25:19 +08:00
commit 13603503cc
1137 changed files with 328929 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
src/views/home/components/collection.vue Normal file
View File

@ -0,0 +1,194 @@
<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 { ref } from "vue";
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()
.then((res) => {
personnelData.value = res;
})
.catch((err) => {});
};
const getcountCrl = () => {
jczgetcountCrl()
.then((res) => {
personneAccess.value = res;
})
.catch((err) => {});
};
const GzrycountCrl = () => {
jczGzrycountCrl()
.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 90%);
-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;
}
.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>