|
|
@@ -4,42 +4,42 @@
|
|
|
<div class="company-content">
|
|
|
<div class="content-item item-1">
|
|
|
<infoBox class="infoBox1">
|
|
|
- <template #title> 系统数据量 </template>
|
|
|
+ <template #title> 设备数据量 </template>
|
|
|
<template #container>
|
|
|
<div class="content-wrapper wrapper-1 grid">
|
|
|
<div class="data-item">
|
|
|
<div class="item-icon icon1"></div>
|
|
|
<div>
|
|
|
- <div class="label">接入系统数量</div>
|
|
|
- <div class="value">262 </div>
|
|
|
+ <div class="label">接入设备数量</div>
|
|
|
+ <div class="value">{{ deviceData.deviceCount }} </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-item">
|
|
|
<div class="item-icon icon2"></div>
|
|
|
<div>
|
|
|
<div class="label">接入点位数量</div>
|
|
|
- <div class="value status-normal">14521</div>
|
|
|
+ <div class="value status-normal">{{ deviceData.monitorParamsCount }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-item">
|
|
|
<div class="item-icon icon3"></div>
|
|
|
<div>
|
|
|
<div class="label">数据存储量</div>
|
|
|
- <div class="value status-normal">14521</div>
|
|
|
+ <div class="value status-normal">{{ deviceData.databaseDiskUsage }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-item">
|
|
|
<div class="item-icon icon4"></div>
|
|
|
<div>
|
|
|
<div class="label">消息总数量（条）</div>
|
|
|
- <div class="value status-normal">14521</div>
|
|
|
+ <div class="value status-normal">{{ deviceData.collectTotalNum }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-item">
|
|
|
<div class="item-icon icon5"></div>
|
|
|
<div>
|
|
|
<div class="label">共享接口数量</div>
|
|
|
- <div class="value status-normal">14521</div>
|
|
|
+ <div class="value status-normal">0</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -51,7 +51,7 @@
|
|
|
<template #title> 每日采集数据量 </template>
|
|
|
<template #container>
|
|
|
<div class="content-wrapper">
|
|
|
- <CustomChart :chart-config="dailyNumOption" :chart-data="dailyNumData" height="250px" />
|
|
|
+ <CustomChart :chart-config="dailyNumOption" :chart-data="deviceData" height="245px" />
|
|
|
</div>
|
|
|
</template>
|
|
|
</infoBox>
|
|
|
@@ -59,17 +59,17 @@
|
|
|
<template #title> 系统数据量排名 </template>
|
|
|
<template #container>
|
|
|
<div class="content-wrapper">
|
|
|
- <a-table size="small" :dataSource="sysData" :columns="sysDataColumn" :pagination="false" />
|
|
|
+ <a-table size="small" :dataSource="deviceData.collectDataByStationList" :columns="sysDataColumn" :pagination="false" />
|
|
|
</div>
|
|
|
</template>
|
|
|
</infoBox>
|
|
|
</div>
|
|
|
<div class="content-item item-3">
|
|
|
<infoBox class="infoBox4">
|
|
|
- <template #title> 系统接入情况 </template>
|
|
|
+ <template #title> 设备接入情况 </template>
|
|
|
<template #container>
|
|
|
<div class="content-wrapper">
|
|
|
- <a-table size="small" :dataSource="accessStatusData" :columns="accessStatusColumn" :pagination="false">
|
|
|
+ <a-table size="small" :dataSource="accessStatusData" :columns="accessStatusColumn" :pagination="pagination" @change="pageChange">
|
|
|
<template #action="{ record }">
|
|
|
<div class="option-cont">
|
|
|
<div class="view-icon"></div>
|
|
|
@@ -85,16 +85,67 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
- import { ref } from 'vue';
|
|
|
+ import { ref, onMounted, reactive } from 'vue';
|
|
|
import customHeader from '/@/components/vent/customHeader.vue';
|
|
|
import infoBox from './components/infoBox.vue';
|
|
|
- import { sysDataColumn, sysData, accessStatusColumn, accessStatusData, dailyNumOption, dailyNumData } from './infoCenter.data';
|
|
|
+ import { sysDataColumn, accessStatusColumn, dailyNumOption } from './infoCenter.data';
|
|
|
import CustomChart from '@/views/vent/home/configurable/components/detail/CustomChart.vue';
|
|
|
+ import { getDeviceAll, getHomepageSummaryIndexes } from './infoCenter.api';
|
|
|
let mainTitle = ref('智能通风数据中心');
|
|
|
-
|
|
|
+ //分页参数配置
|
|
|
+ const pagination = reactive({
|
|
|
+ current: 1, // 当前页码
|
|
|
+ pageSize: 5, // 每页显示条数
|
|
|
+ total: 0, // 总条目数，后端返回
|
|
|
+ // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
|
|
|
+ });
|
|
|
+ // 设备接入情况数据
|
|
|
+ const accessStatusData = ref([]);
|
|
|
+ // 数据中心首页设备数据
|
|
|
+ const deviceData = ref({
|
|
|
+ monitorParamsCount: 0,
|
|
|
+ deviceCount: 0,
|
|
|
+ databaseDiskUsage: 0,
|
|
|
+ collectTotalNum: 0,
|
|
|
+ collectDataByStationList: [],
|
|
|
+ collectDataByDayList: [],
|
|
|
+ });
|
|
|
+ // 查看数据
|
|
|
function viewData(record) {
|
|
|
console.log(record);
|
|
|
}
|
|
|
+ //分页切换
|
|
|
+ const pageChange = async (val) => {
|
|
|
+ pagination.current = val.current;
|
|
|
+ pagination.pageSize = val.pageSize;
|
|
|
+ const res = await getDeviceAll({
|
|
|
+ pageNo: pagination.current,
|
|
|
+ pageSize: pagination.pageSize,
|
|
|
+ });
|
|
|
+ accessStatusData.value = res.records; // 赋值给响应式变量
|
|
|
+ pagination.total = res.total; // 更新总条数
|
|
|
+ };
|
|
|
+ // 获取设备数据接口
|
|
|
+ const fetchDeviceData = async () => {
|
|
|
+ try {
|
|
|
+ // 获取首页汇总指标数据
|
|
|
+ deviceData.value = await getHomepageSummaryIndexes();
|
|
|
+ // 获取设备接入情况数据
|
|
|
+ const response = await getDeviceAll({
|
|
|
+ pageNo: pagination.current,
|
|
|
+ pageSize: pagination.pageSize,
|
|
|
+ });
|
|
|
+ accessStatusData.value = response.records; // 赋值给响应式变量
|
|
|
+ pagination.total = response.total; // 更新总条数
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取设备数据失败:', error);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 页面挂载时调用接口获取数据
|
|
|
+ onMounted(async () => {
|
|
|
+ await fetchDeviceData();
|
|
|
+ });
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
@font-face {
|
|
|
@@ -191,6 +242,9 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .box-container {
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
}
|
|
|
.infoBox1 {
|
|
|
background-color: var(--image-border1) no-repeat;
|
