1.对接环境监测接口
2.开发环境监测-配置监测点位 2.修改监测中心多个时间筛选逻辑
This commit is contained in:
@@ -1,7 +1,12 @@
|
||||
<!-- eslint-disable vue/v-on-event-hyphenation -->
|
||||
<template>
|
||||
<div>
|
||||
<a-table :columns="tableColumns" :data-source="data" bordered :pagination="false">
|
||||
<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%">
|
||||
@@ -12,8 +17,10 @@
|
||||
v-model:value="frequencyValue"
|
||||
placeholder="请选择频率"
|
||||
style="width: 17%; margin-left: 10px"
|
||||
:options="frequencyOptions" />
|
||||
: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"
|
||||
@@ -22,7 +29,9 @@
|
||||
@calendarChange="onCalendarChange"
|
||||
style="width: 17%; margin-left: 10px"
|
||||
:placeholder="['请选择日期', '请选择日期']" />
|
||||
<a-button type="primary" style="margin-left: 10px" @click="getSelect"> 查询 </a-button>
|
||||
<a-button type="primary" style="margin-left: 10px" @click="getTableList">
|
||||
查询
|
||||
</a-button>
|
||||
</div>
|
||||
<a-button type="primary"> 导出 </a-button>
|
||||
</div>
|
||||
@@ -42,11 +51,15 @@
|
||||
import { ref, onMounted } from 'vue';
|
||||
// import { http } from '/nerv-lib/util/http';
|
||||
import { Pagination, SelectProps, TreeSelectProps, TableColumnType } from 'ant-design-vue';
|
||||
import { tableColumns } from './config';
|
||||
import { tableColumns as tableColumnsA } from './config';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import dayjs from 'dayjs';
|
||||
import { http } from '/nerv-lib/util';
|
||||
import { dict, getEnum } from '/@/api';
|
||||
import { environmentMonitor } from '/@/api/monitor';
|
||||
// import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary';
|
||||
defineOptions({
|
||||
energyType: 'AverageData', // 与页面路由name一致缓存才可生效
|
||||
name: 'AverageData', // 与页面路由name一致缓存才可生效
|
||||
components: {
|
||||
'a-pagination': Pagination,
|
||||
},
|
||||
@@ -61,7 +74,8 @@
|
||||
|
||||
const treeData2 = ref<TreeSelectProps['treeData']>([]);
|
||||
const data = ref([]);
|
||||
// let tableColumns = ref<TableColumnType[]>([]);
|
||||
const pageData = ref([]);
|
||||
let tableColumns = ref<TableColumnType[]>([]);
|
||||
|
||||
const total = ref<number>();
|
||||
const queryParams = ref({
|
||||
@@ -75,10 +89,17 @@
|
||||
type RangeValue = [Dayjs, Dayjs];
|
||||
const dates = ref<RangeValue>();
|
||||
const hackValue = ref<RangeValue>();
|
||||
const dateRange = ref<[Dayjs, Dayjs] | undefined>();
|
||||
const dateRange = ref<[Dayjs, Dayjs] | undefined>([dayjs(), dayjs()]);
|
||||
// const dateTypeValue = ref<string | undefined>('year');
|
||||
const startDate = ref<String>();
|
||||
const endDate = ref<String>();
|
||||
|
||||
const onChangeDate = (val: RangeValue) => {
|
||||
const onChangeDate = (val: RangeValue, dateStrings: any) => {
|
||||
dateRange.value = val;
|
||||
if (dateStrings && dateStrings.length === 2) {
|
||||
startDate.value = dateStrings[0];
|
||||
endDate.value = dateStrings[1];
|
||||
}
|
||||
};
|
||||
const onOpenChange = (open: boolean) => {
|
||||
if (open) {
|
||||
@@ -89,46 +110,122 @@
|
||||
}
|
||||
};
|
||||
const disabledDate = (current: Dayjs) => {
|
||||
if (!dates.value || (dates.value as any).length === 0) {
|
||||
return false;
|
||||
if (frequencyValue.value == '1' || frequencyValue.value == '2') {
|
||||
if (!dates.value || (dates.value as any).length === 0) {
|
||||
return false;
|
||||
}
|
||||
const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 6;
|
||||
const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > 6;
|
||||
return tooEarly || tooLate;
|
||||
}
|
||||
const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 2;
|
||||
const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > 2;
|
||||
return tooEarly || tooLate;
|
||||
};
|
||||
const onCalendarChange = (val: RangeValue) => {
|
||||
dates.value = val;
|
||||
};
|
||||
// 切换频率
|
||||
const changeFrequency = () => {
|
||||
//
|
||||
// if (frequencyValue.value == '0' || frequencyValue.value == '1' || frequencyValue.value == '2') {
|
||||
// dateTypeValue.value = 'date';
|
||||
// } else if (frequencyValue.value == '3') {
|
||||
// dateTypeValue.value = 'month';
|
||||
// } else if (frequencyValue.value == '4') {
|
||||
// dateTypeValue.value = 'year';
|
||||
// }
|
||||
dateRange.value = undefined;
|
||||
};
|
||||
// 获取表格数据
|
||||
const getTableList = () => {
|
||||
// fetch(energyConsumption.pageList, queryParams.value).then((res) => {
|
||||
// data.value = res.data.records;
|
||||
// total.value = res.data.total;
|
||||
// });
|
||||
// 拼装开始结束时间
|
||||
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 + '';
|
||||
}
|
||||
http
|
||||
.post(environmentMonitor.getDeviceAveragesByRate, {
|
||||
orgId: orgId.value,
|
||||
startTime: startTime, //开始时间
|
||||
endTime: endTime, //结束时间
|
||||
|
||||
timeRate: frequencyValue.value, // 频率
|
||||
})
|
||||
.then((res) => {
|
||||
// 拼接表头
|
||||
let headerList = res.data.headerList;
|
||||
let tableColumnsB = [];
|
||||
for (let i = 0; i < headerList.length; i++) {
|
||||
tableColumnsB.push({
|
||||
title: headerList[i],
|
||||
dataIndex: headerList[i],
|
||||
});
|
||||
}
|
||||
let columnA: any[] = [...tableColumnsA];
|
||||
columnA.push(...tableColumnsB);
|
||||
tableColumns.value = columnA;
|
||||
|
||||
// 数据赋值
|
||||
data.value = res.data.data;
|
||||
total.value = res.data.data.length;
|
||||
onChange(1, 10);
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
frequencyOptions.value = [
|
||||
{
|
||||
value: '1',
|
||||
label: '30分钟',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '小时',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '天',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '月',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '年',
|
||||
},
|
||||
];
|
||||
onMounted(async () => {
|
||||
// 获取频率
|
||||
let frequency = await getEnum({ params: { enumType: 'TimeFlagEnum' } });
|
||||
frequencyOptions.value = frequency.data;
|
||||
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,
|
||||
@@ -203,35 +300,19 @@
|
||||
],
|
||||
},
|
||||
];
|
||||
// let tableColumnsB = [
|
||||
// {
|
||||
// title: '1:00',
|
||||
// dataIndex: '1:00',
|
||||
// },
|
||||
// {
|
||||
// title: '2:00',
|
||||
// dataIndex: '2:00',
|
||||
// },
|
||||
// {
|
||||
// title: '3:00',
|
||||
// dataIndex: '3:00',
|
||||
// },
|
||||
// {
|
||||
// title: '4:00',
|
||||
// dataIndex: '4:00',
|
||||
// },
|
||||
// ];
|
||||
// let columnA: any[] = [...tableColumnsA];
|
||||
// columnA.push(...tableColumnsB);
|
||||
// tableColumns.value = columnA;
|
||||
getTableList();
|
||||
});
|
||||
|
||||
getTableList();
|
||||
// getTableList();
|
||||
// 分页器
|
||||
const onChange = (pageNumber: number, size: number) => {
|
||||
queryParams.value.pageNum = pageNumber;
|
||||
queryParams.value.pageSize = size;
|
||||
getTableList();
|
||||
|
||||
const start = (pageNumber - 1) * size;
|
||||
const end = start + size;
|
||||
pageData.value = data.value.slice(start, end);
|
||||
// getTableList();
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
|
||||
Reference in New Issue
Block a user