xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

1.对接环境监测接口

Browse Source 
2.开发环境监测-配置监测点位
2.修改监测中心多个时间筛选逻辑
This commit is contained in:
fks-yangshouda
2024-07-31 14:04:01 +08:00
parent d881ac0180
commit 3daeea7d3d
8 changed files with 1464 additions and 692 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
hx-ai-intelligent/src/api/monitor.ts
View File

@@ -11,4 +11,18 @@ export enum energyMonitor {
}
// 环境监测
export enum environmentMonitor {}
export enum environmentMonitor {
getDeviceStatus = '/carbon-smart/api/monitor/getDeviceStatus', //环境监测-获取设备状态
getDeviceAverages = '/carbon-smart/api/monitor/getDeviceAverages', //环境监测-获取设备平均值
queryDeviceArea = '/carbon-smart/deviceInfo/queryDeviceArea', //查询区域位置组成树结构
getDeviceHotMap = '/carbon-smart/api/monitor/getDeviceHotMap', //环境监测-获取环境热力图
getDeviceHistory = '/carbon-smart/api/monitor/getDeviceHistory', //环境监测-历史数据-获取环境设备历史数据
getDeviceAveragesByRate = '/carbon-smart/api/monitor/getDeviceAveragesByRate', //环境监测-平均数据-获取环境设备平均数据
queryDeviceInfoListPage = '/carbon-smart/api/monitor/queryDeviceInfoListPage', //环境监测-根据条件查询设备数据(分页) 配置监测点位
startUpDevice = '/carbon-smart/api/monitor/startUpDevice', // 环境监测-配置启动设备
stopDevice = '/carbon-smart/api/monitor/stopDevice', // 环境监测-停用设备
}

74
hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
View File

@@ -58,8 +58,9 @@
placeholder="请选择日期类型"
style="width: 100%; margin-bottom: 10px"
:options="options2" />
<a-date-picker
<a-range-picker
style="width: 100%; margin-bottom: 10px"
@change="onChangeDate"
v-model:value="dateValue"
:picker="dateTypeValue" />
<a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect">
@@ -105,7 +106,7 @@
// 日期类型
const dateTypeValue = ref<string | undefined>('month');
// 时间
const dateValue = ref<Dayjs | undefined>(dayjs());
const dateValue = ref<[Dayjs, Dayjs] | undefined>([dayjs(), dayjs()]);
// 页面初始化参数
const getOptionsList = async () => {
@@ -122,6 +123,10 @@
console.error('Failed to fetch options:', error);
}
options2.value = [
{
value: 'date',
label: '日',
},
{
value: 'month',
label: '月',
@@ -159,15 +164,55 @@
}
changeMode();
};
const startDate = ref<String>();
const endDate = ref<String>();
const onChangeDate = (val: RangeValue, dateStrings: any) => {
if (dateStrings && dateStrings.length === 2) {
dateValue.value = val;
startDate.value = dateStrings[0];
endDate.value = dateStrings[1];
}
};
const getSelect = () => {
const date = dateValue.value;
let year = 0;
let month = 0;
if (date) {
year = date.year();
month = date.month() + 1;
// const date = dateValue.value;
// let year = 0;
// let month = 0;
// if (date) {
// year = date.year();
// month = date.month() + 1;
// } else {
// return;
// }
let startTime = '';
let endTime = '';
if (startDate.value && endDate.value) {
if (dateTypeValue.value == 'month') {
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 (dateTypeValue.value == 'year') {
startTime = startDate.value + '-01-01';
endTime = endDate.value + '-12-31';
} else {
startTime = startDate.value + '';
endTime = endDate.value + '';
}
} else {
return;
// 获取当天的时间
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0'); // getMonth() 返回的月份是0-11
const day = String(today.getDate()).padStart(2, '0');
startTime = year + '-' + month + '-' + day;
endTime = year + '-' + month + '-' + day;
}
// 图表数据
@@ -180,9 +225,10 @@
dateType: dateTypeValue.value == 'year' ? 0 : 1, //0 年 1月
deviceInfoCodes: mode.value == '0' ? checkedKeys.value : [], // 设备需要传 device_info_code
energyQueryType: mode.value, // 0 设备 1 节点
month: month,
nodeIds: mode.value == '1' ? checkedKeys.value : [],
year: year,
startTime: startTime,
endTime: endTime,
})
.then((res) => {
let selectedValueName = '';
@@ -209,9 +255,10 @@
dateType: dateTypeValue.value == 'year' ? 0 : 1, //0 年 1月
deviceInfoCodes: mode.value == '0' ? checkedKeys.value : [], // 设备需要传 device_info_code
energyQueryType: mode.value, // 0 设备 1 节点
month: month,
nodeIds: mode.value == '1' ? checkedKeys.value : [],
year: year,
startTime: startTime,
endTime: endTime,
})
.then((res) => {
pageData.analysisTableList = res.data.dataList;
@@ -350,6 +397,7 @@
treeLoading,
changeEnergyType,
shebei,
onChangeDate,
};
},
});

891
hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
View File

File diff suppressed because one or more lines are too long

50
hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/config.ts
View File

@@ -7,30 +7,30 @@ export const tableColumns = [
},
{
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）',
dataIndex: 'time',
},
// {
// 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）',
// },
];

207
hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
View File

@@ -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">

12
hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/config.ts
View File

@@ -7,14 +7,14 @@ export const tableColumns = [
},
{
title: '区域名称',
dataIndex: 'areaName',
dataIndex: 'location',
},
{
title: '点位',
dataIndex: 'point',
},
{
title: '日期',
dataIndex: 'date',
dataIndex: 'pointName',
},
// {
// title: '日期',
// dataIndex: 'date',
// },
];

467
hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue
View File

@@ -3,7 +3,7 @@
<div>
<a-table
:columns="tableColumns"
:data-source="data"
:data-source="pageData"
bordered
:pagination="false"
:scroll="{ x: 100 }">
@@ -15,12 +15,17 @@
<a-select
v-model:value="typeValue"
placeholder="请选择环境参数"
style="width: 15%"
style="width: 17%"
:options="typeList" />
<a-tree-select
v-model:value="quyuvalue"
style="width: 15%; margin-left: 10px"
style="width: 17%; margin-left: 10px"
:tree-data="treeData2"
:field-names="{
children: 'childList',
label: 'name',
value: 'id',
}"
tree-checkable
allow-clear
placeholder="请选择区域"
@@ -29,23 +34,45 @@
<a-select
v-model:value="frequencyValue"
placeholder="请选择采集频率"
style="width: 17%; margin-left: 10px"
:options="frequencyOptions"
@change="changeFrequency" />
<!-- <a-date-picker
:picker="dateTypeValue"
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>
v-model:value="timeValue" /> -->
<!-- :picker="dateTypeValue" -->
<a-range-picker
:value="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>
</template>
</a-table>
<a-pagination
<!-- <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" />
@change="onChange" /> -->
<a-pagination
:total="total"
show-size-changer
show-quick-jumper
@change="onChange"
style="display: flex; justify-content: center; margin-top: 10px" />
</div>
</template>
<script lang="ts" setup>
@@ -53,10 +80,14 @@
// import { http } from '/nerv-lib/util/http';
import { Pagination, SelectProps, TreeSelectProps, TableColumnType } from 'ant-design-vue';
import { tableColumns as tableColumnsA } from './config';
import { environmentMonitor } from '/@/api/monitor';
import { http } from '/nerv-lib/util';
import { dict, getEnum } from '/@/api';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
// import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary';
defineOptions({
energyType: 'HistoryData', // 与页面路由name一致缓存才可生效
name: 'HistoryData', // 与页面路由name一致缓存才可生效
components: {
'a-pagination': Pagination,
},
@@ -66,13 +97,16 @@
const quyuvalue = ref<string[]>([]);
// 采集频率
const frequencyValue = ref<string | undefined>();
// const dateTypeValue = ref<string | undefined>('year');
// 采集频率list
const frequencyOptions = ref<SelectProps['options']>([]);
const treeData2 = ref<TreeSelectProps['treeData']>([]);
const data = ref([]);
const timeValue = ref<Dayjs>();
const pageData = ref([]);
// const timeValue = ref<Dayjs>();
let tableColumns = ref<TableColumnType[]>([]);
const total = ref<number>();
@@ -92,139 +126,308 @@
// queryParams.value.year = selectYear.value.format('YYYY');
// getTableList();
// };
type RangeValue = [Dayjs, Dayjs];
const dates = ref<RangeValue>();
const startDate = ref<String>();
const endDate = ref<String>();
const dateRange = ref<[Dayjs, Dayjs] | undefined>([dayjs(), dayjs()]);
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) {
dates.value = [] as any;
}
};
const disabledDate = (current: Dayjs) => {
if (frequencyValue.value == '0' || frequencyValue.value == '1') {
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 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;
// });
};
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;
let environmentType = '';
for (let i = 0; i < typeList.value.length; i++) {
if (typeList.value[i].value == typeValue.value) {
environmentType = typeList.value[i].code;
break;
}
}
// 拼装开始结束时间
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.getDeviceHistory, {
orgId: orgId.value,
environmentType: environmentType, // 环境参数code
location: quyuvalue.value, // 区域id或者name
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 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;
// 数据赋值
data.value = res.data.data;
total.value = res.data.data.length;
onChange(1, 10);
});
};
// 获取区域数据
const queryDeviceArea = () => {
http
.get(environmentMonitor.queryDeviceArea, { orgId: orgId.value, point: typeValue.value })
.then((res) => {
treeData2.value = res.data;
if (treeData2.value && treeData2.value.length > 0) {
quyuvalue.value = [treeData2.value[0].childList[0].id];
}
});
};
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;
}
// 获取环境参数
let typeData = await getEnum({ params: { enumType: 'EnvironmentTypeEnum' } });
typeData.data.forEach((item: any) => {
item.code = item.value;
item.value = item.flag;
});
typeList.value = typeData.data;
if (typeList.value && typeList.value.length > 0) {
typeValue.value = typeList.value[0].value;
}
// 获取区域数据
await queryDeviceArea();
// 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;
await getTableList();
});
getTableList();
// getTableList();
// 分页器
const onChange = (pageNumber: number, size: number) => {
queryParams.value.pageNum = pageNumber;
queryParams.value.pageSize = size;
getTableList();
// queryParams.value.pageNum = pageNumber;
// queryParams.value.pageSize = size;
// data.value;
// debugger;
const start = (pageNumber - 1) * size;
const end = start + size;
pageData.value = data.value.slice(start, end);
// getTableList();
};
</script>
<style scoped lang="less">

439
hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
View File

@@ -1,26 +1,447 @@
<template>
<a-tabs v-model:activeKey="activeKey" style="height: 5%">
<a-tab-pane key="1" tab="综合数据" />
<a-tab-pane key="2" tab="历史数据" force-render />
<a-tab-pane key="3" tab="平均数据" />
</a-tabs>
<div style="background: #f2f6fd; width: 100%; height: 100%">
<div style="display: flex">
<a-tabs v-model:activeKey="activeKey" style="height: 5%; width: 100%; background: #ffffff">
<a-tab-pane key="1" tab="综合数据" />
<a-tab-pane key="2" tab="历史数据" force-render />
<a-tab-pane key="3" tab="平均数据" />
</a-tabs>
<a-button
type="primary"
style="position: absolute; margin-right: 30px; margin-top: 10px; right: 30px"
@click="configurePoint">
配置监测点位
</a-button>
</div>
<aggregate-data ref="aggregateDataRef" v-if="activeKey == '1'" style="height: 85%" />
<history-data v-if="activeKey == '2'" />
<average-data v-if="activeKey == '3'" />
<aggregate-data ref="aggregateDataRef" v-if="activeKey == '1'" style="height: 85%" />
<history-data ref="historyDataRef" v-if="activeKey == '2'" />
<average-data ref="averageDataRef" v-if="activeKey == '3'" />
</div>
<a-modal
:visible="openModal"
title="配置监测点位"
style="width: 65%"
@ok="handleOk"
@cancel="closeOpenUpload">
<div style="display: flex">
<div style="width: 15%">
<a-tabs
v-model:activeKey="typeValue"
tab-position="left"
@tabScroll="callback"
@change="queryDeviceArea">
<a-tab-pane v-for="item in typeList" :key="item.value" :tab="item.label" />
</a-tabs>
</div>
<div style="width: 85%; height: 100%">
<a-table
:columns="tableColumns"
:data-source="data"
bordered
:pagination="false"
rowKey="deviceInfoCode"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
<template #bodyCell="{ text, column, record }">
<template v-if="column.dataIndex === 'useFlag'">
<a-switch
:checked="text"
:checked-value="1"
:unCheckedValue="0"
@change="(checked) => updateShowed(record)" />
</template>
</template>
<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: 35%; margin-left: 10px"
:tree-data="treeData2"
:field-names="{
children: 'childList',
label: 'name',
value: 'id',
}"
tree-checkable
allow-clear
placeholder="请选择区域"
tree-node-filter-prop="label"
:maxTagCount="1" /> -->
<a-cascader
:options="treeData2"
v-model:value="quyuvalue"
placeholder="请选择所属区域"
:field-names="{
children: 'childList',
label: 'name',
value: 'id',
}"
multiple
max-tag-count="responsive" />
<a-select
v-model:value="useFlag"
placeholder="请选择监测状态"
style="width: 20%; margin-left: 1%"
:options="useFlagList" />
<a-input
v-model:value="areaName"
placeholder="请输入设备名称"
style="width: 20%; margin-left: 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 style="margin-left: 10px" @click="resetting"> 重置 </a-button>
<a-button type="primary" style="margin-left: 10px" @click="queryDeviceInfoListPage">
搜索
</a-button>
</div>
<!-- <a-button type="primary"> 导出 </a-button> -->
</div>
<div>
<a-divider />
<a-button
type="primary"
size="small"
@click="startOrEnd(true)"
:disabled="selectedRowKeys.length == 0">
批量开启
</a-button>
<a-button
type="primary"
size="small"
style="margin-left: 10px"
@click="startOrEnd(false)"
:disabled="selectedRowKeys.length == 0">
批量关闭
</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>
</div>
</a-modal>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ref, onMounted } from 'vue';
import aggregateData from './aggregateData/index.vue';
import historyData from './historyData/index.vue';
import averageData from './averageData/index.vue';
import { Pagination, TabsProps, TableColumnType, TreeSelectProps } from 'ant-design-vue';
import { environmentMonitor } from '/@/api/monitor';
import { http } from '/nerv-lib/util';
import { dict, getEnum } from '/@/api';
const total = ref<number>();
const queryParams = ref({
pageNum: 1,
pageSize: 10,
});
const aggregateDataRef = ref();
const historyDataRef = ref();
const averageDataRef = ref();
var activeKey = ref('1');
var typeValue = ref();
const openModal = ref<boolean>(false);
const orgId = ref('');
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
orgId.value = result;
defineOptions({
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
components: {
'a-pagination': Pagination,
},
});
const typeList = ref();
const quyuvalue = ref<string[]>([]);
const useFlag = ref<Number>();
const useFlagList = ref();
useFlagList.value = [
{
value: 0,
label: '关闭',
},
{
value: 1,
label: '开启',
},
];
const areaName = ref<string>();
let tableColumns = ref<TableColumnType[]>([]);
const treeData2 = ref<TreeSelectProps['treeData']>([]);
const data = ref();
const selectedRowKeys = ref([]);
const onSelectChange = (selectedRowKey: string | number[]) => {
console.log('selectedRowKeys changed: ', selectedRowKey);
selectedRowKeys.value = selectedRowKey;
};
// 分页器
const onChange = (pageNumber: number, size: number) => {
queryParams.value.pageNum = pageNumber;
queryParams.value.pageSize = size;
// getTableList();
};
const configurePoint = () => {
openModal.value = true;
};
// 上传凭证弹窗点击确定
const handleOk = (e: MouseEvent) => {
console.log(e);
openModal.value = false;
};
// 关闭上传凭证弹窗
const closeOpenUpload = () => {
openModal.value = false;
};
const callback: TabsProps['onTabScroll'] = (val) => {
console.log(val);
};
// 重置
const resetting = () => {
quyuvalue.value = [];
areaName.value = '';
};
// 修改是否显示状态
const updateShowed = (record: any) => {
debugger;
let url = '';
if (record.useFlag == 0) {
record.useFlag = 1;
url = environmentMonitor.startUpDevice;
} else {
record.useFlag = 0;
url = environmentMonitor.stopDevice;
}
let params = [
{
orgId: orgId.value,
code: typeValue.value, // 点位flag
deviceInfoCode: record.deviceInfoCode,
},
];
http.post(url, params).then((res) => {
debugger;
});
};
// 批量修改是否显示状态
const startOrEnd = (flag: Boolean) => {
let url = '';
if (flag) {
url = environmentMonitor.startUpDevice;
} else {
url = environmentMonitor.stopDevice;
}
let params = [];
for (let i = 0; i < selectedRowKeys.value.length; i++) {
params.push({
orgId: orgId.value,
code: typeValue.value, // 点位flag
deviceInfoCode: selectedRowKeys.value[i],
});
}
// let params = [
// {
// orgId: orgId.value,
// code: typeValue.value, // 点位flag
// deviceInfoCode: record.deviceInfoCode,
// },
// ];
http.post(url, params).then((res) => {
selectedRowKeys.value = [];
queryDeviceInfoListPage();
});
};
const queryDeviceInfoListPage = () => {
http
.post(environmentMonitor.queryDeviceInfoListPage, {
orgId: orgId.value,
pointCode: typeValue.value, //点位flag
pageNum: queryParams.value.pageNum,
pageSize: queryParams.value.pageSize,
deviceName: areaName.value, //设备名搜索
useFlag: useFlag.value, // 是否弃用搜索
area2: quyuvalue.value, // 地区名数组查
})
.then((res) => {
total.value = res.data.total;
data.value = res.data.records;
});
};
// 获取区域数据
const queryDeviceArea = () => {
http
.get(environmentMonitor.queryDeviceArea, { orgId: orgId.value, point: typeValue.value })
.then((res) => {
treeData2.value = res.data;
// if (treeData2.value && treeData2.value.length > 0) {
// quyuvalue.value = [treeData2.value[0].childList[0].id];
// }
});
};
onMounted(async () => {
// 获取环境参数
let typeData = await getEnum({ params: { enumType: 'EnvironmentTypeEnum' } });
typeData.data.forEach((item: any) => {
item.code = item.value;
item.value = item.flag;
});
typeList.value = typeData.data;
if (typeList.value && typeList.value.length > 0) {
typeValue.value = typeList.value[0].value;
await queryDeviceArea();
}
// 获取区域数据
// 获取左侧选项
// typeList.value = [
// {
// id: 1,
// value: '温度',
// },
// {
// id: 2,
// value: 'CO2浓度',
// },
// {
// id: 3,
// value: 'PM2.5',
// },
// {
// id: 4,
// value: '光照度',
// },
// {
// id: 5,
// value: 'TVOC',
// },
// {
// id: 6,
// value: '湿度',
// },
// ];
// 默认选中第一个
// pointKey.value = typeList.value[0].id;
// 表头
tableColumns.value = [
{
title: '序号',
customRender: (text: any) => {
return text.index + 1;
},
},
{
title: '设备名称',
dataIndex: 'deviceName',
},
{
title: '设备型号',
dataIndex: 'deviceRatepay',
},
{
title: '设备一级区域',
dataIndex: 'device1Area',
},
{
title: '设备二级区域',
dataIndex: 'device2Area',
},
{
title: '设备详细位置',
dataIndex: 'deviceAddress',
},
{
title: '是否纳入计算',
dataIndex: 'useFlag',
},
];
// 获取区域数据
// 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',
// },
// ],
// },
// ];
// 获取表格数据
// data.value = [
// { areaName: '设备', showed: '1' },
// { areaName: '设备', showed: '1' },
// ];
queryDeviceInfoListPage();
});
</script>
<style lang="less" scoped></style>