1.监控中心 - 设备监测 根据UI设计图进行页面优化
2.监控中心 - 能耗监测 根据UI设计图进行页面优化 3.监控中心 - 环境监测 修改bug，添加loading
This commit is contained in:
fks-yangshouda
@@ -1,51 +1,55 @@
|
||||
<!-- eslint-disable vue/v-on-event-hyphenation -->
|
||||
<template>
|
||||
<div>
|
||||
<a-table
|
||||
:columns="tableColumns"
|
||||
:data-source="pageData"
|
||||
bordered
|
||||
:pagination="false"
|
||||
:scroll="{ x: 100, y: 450 }">
|
||||
<template #title>
|
||||
<div
|
||||
style="display: flex; align-items: center; justify-content: space-between; width: 100%">
|
||||
<div style="display: flex; align-items: center; width: 85%">
|
||||
<div style="width: 10%">数据报表</div>
|
||||
<!-- <a-spin :spinning="loading"> -->
|
||||
<div style="background: #ffffff; height: 95%">
|
||||
<a-spin :spinning="loading">
|
||||
<a-table
|
||||
:columns="tableColumns"
|
||||
:data-source="pageData"
|
||||
bordered
|
||||
:pagination="false"
|
||||
:scroll="{ x: 100, y: 450 }">
|
||||
<template #title>
|
||||
<div
|
||||
style="display: flex; align-items: center; justify-content: space-between; width: 100%">
|
||||
<div style="display: flex; align-items: center; width: 85%">
|
||||
<div style="width: 10%">数据报表</div>
|
||||
|
||||
<a-select
|
||||
v-model:value="frequencyValue"
|
||||
placeholder="请选择频率"
|
||||
style="width: 17%; margin-left: 10px"
|
||||
:options="frequencyOptions"
|
||||
@change="changeFrequency" />
|
||||
<!-- <a-date-picker style="width: 13%; margin-left: 10px" v-model:value="timeValue" /> -->
|
||||
<!-- :picker="dateTypeValue" -->
|
||||
<a-range-picker
|
||||
:value="hackValue || dateRange"
|
||||
:disabled-date="disabledDate"
|
||||
@change="onChangeDate"
|
||||
@openChange="onOpenChange"
|
||||
@calendarChange="onCalendarChange"
|
||||
style="width: 17%; margin-left: 10px"
|
||||
:placeholder="['请选择日期', '请选择日期']" />
|
||||
<a-button type="primary" style="margin-left: 10px" @click="getTableList">
|
||||
查询
|
||||
</a-button>
|
||||
<a-select
|
||||
v-model:value="frequencyValue"
|
||||
placeholder="请选择频率"
|
||||
style="width: 17%; margin-left: 10px"
|
||||
:options="frequencyOptions"
|
||||
@change="changeFrequency" />
|
||||
<!-- <a-date-picker style="width: 13%; margin-left: 10px" v-model:value="timeValue" /> -->
|
||||
<!-- :picker="dateTypeValue" -->
|
||||
<a-range-picker
|
||||
:value="hackValue || dateRange"
|
||||
:disabled-date="disabledDate"
|
||||
@change="onChangeDate"
|
||||
@openChange="onOpenChange"
|
||||
@calendarChange="onCalendarChange"
|
||||
style="width: 17%; margin-left: 10px"
|
||||
:placeholder="['请选择日期', '请选择日期']" />
|
||||
<a-button type="primary" style="margin-left: 10px" @click="getTableList">
|
||||
查询
|
||||
</a-button>
|
||||
</div>
|
||||
<a-button type="primary"> 导出 </a-button>
|
||||
</div>
|
||||
<a-button type="primary"> 导出 </a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-pagination
|
||||
:current="queryParams.pageNum"
|
||||
:total="total"
|
||||
:page-size="queryParams.pageSize"
|
||||
style="display: flex; justify-content: center; margin-top: 16px"
|
||||
:show-size-changer="true"
|
||||
:show-quick-jumper="true"
|
||||
@change="onChange" />
|
||||
</template>
|
||||
</a-table>
|
||||
<a-pagination
|
||||
:current="queryParams.pageNum"
|
||||
:total="total"
|
||||
:page-size="queryParams.pageSize"
|
||||
style="display: flex; justify-content: center; margin-top: 16px"
|
||||
:show-size-changer="true"
|
||||
:show-quick-jumper="true"
|
||||
@change="onChange" />
|
||||
</a-spin>
|
||||
</div>
|
||||
<!-- </a-spin> -->
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
@@ -65,6 +69,8 @@
|
||||
},
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
const typeList = ref();
|
||||
// 采集频率
|
||||
const frequencyValue = ref<string | undefined>();
|
||||
@@ -136,44 +142,20 @@
|
||||
};
|
||||
// 获取表格数据
|
||||
const getTableList = () => {
|
||||
loading.value = true;
|
||||
// 拼装开始结束时间
|
||||
if (!startDate.value || !endDate.value) {
|
||||
const nowDate = new Date();
|
||||
let nowDateString = nowDate.toISOString().split('T')[0];
|
||||
const [year, month, day] = nowDateString.split('-').map(Number);
|
||||
if (frequencyValue.value == '3') {
|
||||
startDate.value = year + '-' + month;
|
||||
endDate.value = year + '-' + month;
|
||||
} else if (frequencyValue.value == '4') {
|
||||
startDate.value = year + '';
|
||||
endDate.value = year + '';
|
||||
}
|
||||
}
|
||||
let startTime = '';
|
||||
let endTime = '';
|
||||
if (frequencyValue.value == '3') {
|
||||
startTime = startDate.value + '-01';
|
||||
const [year, month] = endDate.value.split('-').map(Number);
|
||||
|
||||
// 创建下一个月的第一天
|
||||
const date = new Date(year, month, 1);
|
||||
|
||||
// 减去一天得到当月的最后一天
|
||||
// date.setDate(date.getDate() - 1);
|
||||
endTime = date.toISOString().split('T')[0];
|
||||
// endTime = endDate.value + '-01';
|
||||
} else if (frequencyValue.value == '4') {
|
||||
startTime = startDate.value + '-01-01';
|
||||
endTime = endDate.value + '-12-31';
|
||||
} else {
|
||||
startTime = startDate.value + '';
|
||||
endTime = endDate.value + '';
|
||||
startDate.value = year + '-' + month + '-' + day;
|
||||
endDate.value = year + '-' + month + '-' + day;
|
||||
}
|
||||
http
|
||||
.post(environmentMonitor.getDeviceAveragesByRate, {
|
||||
orgId: orgId.value,
|
||||
startTime: startTime, //开始时间
|
||||
endTime: endTime, //结束时间
|
||||
startTime: startDate.value, //开始时间
|
||||
endTime: endDate.value, //结束时间
|
||||
|
||||
timeRate: frequencyValue.value, // 频率
|
||||
})
|
||||
@@ -195,6 +177,9 @@
|
||||
data.value = res.data.data;
|
||||
total.value = res.data.data.length;
|
||||
onChange(1, 10);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
onMounted(async () => {
|
||||
@@ -204,106 +189,9 @@
|
||||
if (frequencyOptions.value && frequencyOptions.value.length > 0) {
|
||||
frequencyValue.value = frequencyOptions.value[frequencyOptions.value.length - 1].value;
|
||||
}
|
||||
// frequencyOptions.value = [
|
||||
// {
|
||||
// value: '1',
|
||||
// label: '30分钟',
|
||||
// },
|
||||
// {
|
||||
// value: '2',
|
||||
// label: '小时',
|
||||
// },
|
||||
// {
|
||||
// value: '3',
|
||||
// label: '天',
|
||||
// },
|
||||
// {
|
||||
// value: '4',
|
||||
// label: '月',
|
||||
// },
|
||||
// {
|
||||
// value: '5',
|
||||
// label: '年',
|
||||
// },
|
||||
// ];
|
||||
typeList.value = [
|
||||
{
|
||||
id: 1,
|
||||
value: '温度',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: 'CO2浓度',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: 'PM2.5',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
value: '光照度',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
value: 'TVOC',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
value: '湿度',
|
||||
},
|
||||
];
|
||||
treeData2.value = [
|
||||
{
|
||||
label: '办公区',
|
||||
value: '0-0',
|
||||
children: [
|
||||
{
|
||||
label: '办公一区',
|
||||
value: '0-0-0',
|
||||
},
|
||||
{
|
||||
label: '办公二区',
|
||||
value: '0-0-1',
|
||||
},
|
||||
{
|
||||
label: '办公三区',
|
||||
value: '0-0-2',
|
||||
},
|
||||
{
|
||||
label: '办公四区',
|
||||
value: '0-0-3',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '站厅',
|
||||
value: '0-1',
|
||||
|
||||
children: [
|
||||
{
|
||||
label: '站厅一区',
|
||||
value: '0-1-0',
|
||||
// disabled: true,
|
||||
},
|
||||
{
|
||||
label: '站厅二区',
|
||||
value: '0-1-1',
|
||||
},
|
||||
{
|
||||
label: '站厅三区',
|
||||
value: '0-1-2',
|
||||
},
|
||||
{
|
||||
label: '站厅四区',
|
||||
value: '0-1-3',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
getTableList();
|
||||
});
|
||||
|
||||
// getTableList();
|
||||
// 分页器
|
||||
const onChange = (pageNumber: number, size: number) => {
|
||||
queryParams.value.pageNum = pageNumber;
|
||||
|
||||
Reference in New Issue
Block a user