1.设备监测 接口对接
2.环境监测 平均数据 前台页面开发
This commit is contained in:
fks-yangshouda
@@ -0,0 +1,36 @@
|
||||
export const tableColumns = [
|
||||
{
|
||||
title: '序号',
|
||||
customRender: (text: any) => {
|
||||
return text.index + 1;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'areaName',
|
||||
},
|
||||
{
|
||||
title: '温度（℃）',
|
||||
dataIndex: 'point',
|
||||
},
|
||||
{
|
||||
title: '湿度（%）',
|
||||
dataIndex: 'date',
|
||||
},
|
||||
{
|
||||
title: 'CO2浓度（ppm）',
|
||||
dataIndex: 'areaName',
|
||||
},
|
||||
{
|
||||
title: 'PM2.5（μg/m³）',
|
||||
dataIndex: 'point',
|
||||
},
|
||||
{
|
||||
title: 'TVOC（mg/m³）',
|
||||
dataIndex: 'date',
|
||||
},
|
||||
{
|
||||
title: 'TVOC（mg/m³）',
|
||||
dataIndex: '光照度（lux）',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,250 @@
|
||||
<!-- eslint-disable vue/v-on-event-hyphenation -->
|
||||
<template>
|
||||
<div>
|
||||
<a-table :columns="tableColumns" :data-source="data" bordered :pagination="false">
|
||||
<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" />
|
||||
<!-- <a-date-picker style="width: 13%; margin-left: 10px" v-model:value="timeValue" /> -->
|
||||
<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="getSelect"> 查询 </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" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
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 type { Dayjs } from 'dayjs';
|
||||
// import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary';
|
||||
defineOptions({
|
||||
energyType: 'AverageData', // 与页面路由name一致缓存才可生效
|
||||
components: {
|
||||
'a-pagination': Pagination,
|
||||
},
|
||||
});
|
||||
|
||||
const typeList = ref();
|
||||
// 采集频率
|
||||
const frequencyValue = ref<string | undefined>();
|
||||
|
||||
// 采集频率list
|
||||
const frequencyOptions = ref<SelectProps['options']>([]);
|
||||
|
||||
const treeData2 = ref<TreeSelectProps['treeData']>([]);
|
||||
const data = ref([]);
|
||||
// let tableColumns = ref<TableColumnType[]>([]);
|
||||
|
||||
const total = ref<number>();
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
|
||||
type RangeValue = [Dayjs, Dayjs];
|
||||
const dates = ref<RangeValue>();
|
||||
const hackValue = ref<RangeValue>();
|
||||
const dateRange = ref<[Dayjs, Dayjs] | undefined>();
|
||||
|
||||
const onChangeDate = (val: RangeValue) => {
|
||||
dateRange.value = val;
|
||||
};
|
||||
const onOpenChange = (open: boolean) => {
|
||||
if (open) {
|
||||
dates.value = [] as any;
|
||||
hackValue.value = [] as any;
|
||||
} else {
|
||||
hackValue.value = undefined;
|
||||
}
|
||||
};
|
||||
const disabledDate = (current: Dayjs) => {
|
||||
if (!dates.value || (dates.value as any).length === 0) {
|
||||
return false;
|
||||
}
|
||||
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 getTableList = () => {
|
||||
// fetch(energyConsumption.pageList, queryParams.value).then((res) => {
|
||||
// data.value = res.data.records;
|
||||
// total.value = res.data.total;
|
||||
// });
|
||||
};
|
||||
onMounted(() => {
|
||||
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',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
// 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();
|
||||
// 分页器
|
||||
const onChange = (pageNumber: number, size: number) => {
|
||||
queryParams.value.pageNum = pageNumber;
|
||||
queryParams.value.pageSize = size;
|
||||
getTableList();
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
::v-deep .ant-table-title {
|
||||
display: flex;
|
||||
}
|
||||
::v-deep .ant-table-container {
|
||||
padding: 0px 16px;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
th.column-money,
|
||||
td.column-money {
|
||||
text-align: right !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,20 @@
|
||||
export const tableColumns = [
|
||||
{
|
||||
title: '序号',
|
||||
customRender: (text: any) => {
|
||||
return text.index + 1;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '区域名称',
|
||||
dataIndex: 'areaName',
|
||||
},
|
||||
{
|
||||
title: '点位',
|
||||
dataIndex: 'point',
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
dataIndex: 'date',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,243 @@
|
||||
<!-- eslint-disable vue/multi-word-component-names -->
|
||||
<template>
|
||||
<div>
|
||||
<a-table
|
||||
:columns="tableColumns"
|
||||
:data-source="data"
|
||||
bordered
|
||||
:pagination="false"
|
||||
:scroll="{ x: 100 }">
|
||||
<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="typeValue"
|
||||
placeholder="请选择环境参数"
|
||||
style="width: 15%"
|
||||
:options="typeList" />
|
||||
<a-tree-select
|
||||
v-model:value="quyuvalue"
|
||||
style="width: 15%; margin-left: 10px"
|
||||
:tree-data="treeData2"
|
||||
tree-checkable
|
||||
allow-clear
|
||||
placeholder="请选择区域"
|
||||
tree-node-filter-prop="label"
|
||||
:maxTagCount="1" />
|
||||
<a-select
|
||||
v-model:value="frequencyValue"
|
||||
placeholder="请选择采集频率"
|
||||
style="width: 15%; margin-left: 10px"
|
||||
:options="frequencyOptions" />
|
||||
<a-date-picker style="width: 15%; margin-left: 10px" v-model:value="timeValue" />
|
||||
<a-button type="primary" style="margin-left: 10px" @click="getSelect"> 查询 </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" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, defineOptions } from 'vue';
|
||||
// import { http } from '/nerv-lib/util/http';
|
||||
import { Pagination, SelectProps, TreeSelectProps, TableColumnType } from 'ant-design-vue';
|
||||
import { tableColumns as tableColumnsA } from './config';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
// import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary';
|
||||
defineOptions({
|
||||
energyType: 'HistoryData', // 与页面路由name一致缓存才可生效
|
||||
components: {
|
||||
'a-pagination': Pagination,
|
||||
},
|
||||
});
|
||||
const typeList = ref();
|
||||
const typeValue = ref();
|
||||
const quyuvalue = ref<string[]>([]);
|
||||
// 采集频率
|
||||
const frequencyValue = ref<string | undefined>();
|
||||
|
||||
// 采集频率list
|
||||
const frequencyOptions = ref<SelectProps['options']>([]);
|
||||
|
||||
const treeData2 = ref<TreeSelectProps['treeData']>([]);
|
||||
const data = ref([]);
|
||||
const timeValue = ref<Dayjs>();
|
||||
let tableColumns = ref<TableColumnType[]>([]);
|
||||
|
||||
const total = ref<number>();
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
// const fetch = (api, params = { orgId }) => {
|
||||
// return http.post(api, params);
|
||||
// };
|
||||
|
||||
// 年份选择改变触发
|
||||
// const changeYearData = () => {
|
||||
// queryParams.value.year = selectYear.value.format('YYYY');
|
||||
// getTableList();
|
||||
// };
|
||||
// 获取表格数据
|
||||
const getTableList = () => {
|
||||
// fetch(energyConsumption.pageList, queryParams.value).then((res) => {
|
||||
// data.value = res.data.records;
|
||||
// total.value = res.data.total;
|
||||
// });
|
||||
};
|
||||
onMounted(() => {
|
||||
frequencyOptions.value = [
|
||||
{
|
||||
value: '1',
|
||||
label: '5分钟',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '10分钟',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '30分钟',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '1小时',
|
||||
},
|
||||
{
|
||||
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',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
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();
|
||||
// 分页器
|
||||
const onChange = (pageNumber: number, size: number) => {
|
||||
queryParams.value.pageNum = pageNumber;
|
||||
queryParams.value.pageSize = size;
|
||||
getTableList();
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
::v-deep .ant-table-title {
|
||||
display: flex;
|
||||
}
|
||||
::v-deep .ant-table-container {
|
||||
padding: 0px 16px;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
th.column-money,
|
||||
td.column-money {
|
||||
text-align: right !important;
|
||||
}
|
||||
</style>
|
||||
@@ -4,14 +4,16 @@
|
||||
<a-tab-pane key="2" tab="历史数据" force-render>Content of Tab Pane 2</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="平均数据">Content of Tab Pane 3</a-tab-pane>
|
||||
</a-tabs>
|
||||
<!-- <ns-view-list-table v-bind="tableConfig" v-if="activeKey == '1'" /> -->
|
||||
|
||||
<aggregate-data ref="aggregateDataRef" v-if="activeKey == '1'" style="height: 85%" />
|
||||
<history-data v-if="activeKey == '2'" />
|
||||
<average-data v-if="activeKey == '3'" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { tableConfig } from './config';
|
||||
import aggregateData from './aggregateData/index.vue';
|
||||
import historyData from './historyData/index.vue';
|
||||
import averageData from './averageData/index.vue';
|
||||
|
||||
const aggregateDataRef = ref();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user