<template>
|
<div class="dataVisualize-box">
|
<div class="card top-box">
|
<div class="top-title">{{ t("count.realTimeStats") }}</div>
|
|
<div class="top-content">
|
<el-row :gutter="40">
|
<!-- 在线人员 -->
|
<el-col class="mb40" :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
<div class="item-left sle">
|
<span class="left-title">{{ t("count.onlinePersonnel") }}</span>
|
<div class="img-box">
|
<img src="./images/online-user.png" style="width: 130px; height: 130px" :alt="t('count.onlinePersonnel')" />
|
</div>
|
<span class="left-number">{{ PersonList.online }}</span>
|
</div>
|
</el-col>
|
|
<!-- 中间四个小卡片 -->
|
<el-col class="mb40" :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
|
<div class="item-center">
|
<!-- 离线人员 -->
|
<div class="offline-user traffic-box">
|
<div class="traffic-img">
|
<img
|
src="./images/offline-user.png"
|
:alt="t('count.offlinePersonnel')"
|
style="position: relative; top: 12px; width: 60px; height: 60px"
|
/>
|
</div>
|
<span class="item-value">{{ PersonList.offline }}</span>
|
<span class="traffic-name sle">{{ t("count.offlinePersonnel") }}</span>
|
</div>
|
<!-- 部门数量 -->
|
<div class="department-count traffic-box">
|
<div class="traffic-img">
|
<img
|
src="./images/department.png"
|
:alt="t('count.departmentCount')"
|
style="position: relative; top: 12px; width: 60px; height: 60px"
|
/>
|
</div>
|
<span class="item-value">{{ PersonList.department }}</span>
|
<span class="traffic-name sle">{{ t("count.departmentCount") }}</span>
|
</div>
|
<!-- 围栏数量 -->
|
<div class="fence-count traffic-box">
|
<div class="traffic-img">
|
<img
|
src="./images/fence.png"
|
:alt="t('count.fenceCount')"
|
style="position: relative; top: 12px; width: 60px; height: 60px"
|
/>
|
</div>
|
<span class="item-value">{{ PersonList.fences }}</span>
|
<span class="traffic-name sle">{{ t("count.fenceCount") }}</span>
|
</div>
|
<!-- 基站数量 -->
|
<div class="today-login traffic-box">
|
<div class="traffic-img">
|
<img
|
src="./images/login.png"
|
:alt="t('count.anchorCount')"
|
style="position: relative; top: 12px; width: 60px; height: 60px"
|
/>
|
</div>
|
<span class="item-value">{{ PersonList.achor }}</span>
|
<span class="traffic-name sle">{{ t("count.anchorCount") }}</span>
|
</div>
|
</div>
|
</el-col>
|
|
<!-- 右侧饼图 -->
|
<el-col class="mb40" :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
|
<div class="item-right">
|
<div class="echarts-title">{{ t("count.alarmStats") }}</div>
|
<div class="book-echarts">
|
<Pie ref="pieRef" />
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<div class="card bottom-box">
|
<div class="bottom-title">{{ t("count.alarmTrendAnalysis") }}</div>
|
<div class="bottom-tabs"></div>
|
<div class="curve-echarts">
|
<Curve ref="curveRef" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts" name="dataVisualize">
|
import { ref, onMounted } from "vue";
|
import { useI18n } from "vue-i18n";
|
import Pie from "../../dashboard/dataVisualize/components/pie.vue";
|
import Curve from "../../dashboard/dataVisualize/components/curve.vue";
|
import { FindBSCount } from "@/api/modules/hxzk/count/count";
|
|
const { t } = useI18n();
|
|
const PersonList = ref({
|
online: 0,
|
offline: 0,
|
fences: 0,
|
achor: 0,
|
department: 0
|
});
|
|
onMounted(() => {
|
// 编号自动补全
|
FindBSCount().then(result => {
|
PersonList.value.online = result[0];
|
PersonList.value.offline = result[1];
|
PersonList.value.fences = result[2];
|
PersonList.value.achor = result[3];
|
PersonList.value.department = result[4];
|
});
|
});
|
</script>
|
|
<style scoped lang="scss">
|
@import "./index";
|
|
/* 添加一些自定义样式 */
|
.item-left {
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
}
|
.offline-user {
|
background: linear-gradient(135deg, #cdd0ce65 0%, #a8a6a788 100%);
|
}
|
.department-count {
|
background: linear-gradient(135deg, #e9af4382 0%, #f93838b9 100%);
|
}
|
.fence-count {
|
background: linear-gradient(135deg, #d9f23899 0%, #fad0c4 100%);
|
}
|
.today-login {
|
background: linear-gradient(135deg, #5567f34d 0%, #1ad7f021 100%);
|
}
|
.traffic-box {
|
padding: 15px;
|
margin-bottom: 15px;
|
color: white;
|
border-radius: 8px;
|
box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
|
transition: all 0.3s ease;
|
&:hover {
|
box-shadow: 0 6px 16px rgb(0 0 0 / 15%);
|
transform: translateY(-5px);
|
}
|
}
|
.item-value {
|
display: block;
|
margin: 10px 0;
|
font-size: 24px;
|
font-weight: bold;
|
}
|
.traffic-img img {
|
width: 40px;
|
height: 40px;
|
}
|
</style>
|
