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

1.监控中心 - 设备监测  根据UI设计图进行页面优化

Browse Source 
2.监控中心 - 能耗监测  根据UI设计图进行页面优化
3.监控中心 - 环境监测  修改bug，添加loading
This commit is contained in:
fks-yangshouda
2024-08-13 15:07:46 +08:00
parent 56c903ca86
commit 7bd8721e32
18 changed files with 818 additions and 645 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,6 @@
<!-- eslint-disable vue/multi-word-component-names -->
<template>
<!-- <a-spin :spinning="loading"> -->
<a-row type="flex" style="height: 100%; width: 96%; margin: 2%">
<a-col :span="6">
<!-- <div style="height: 96%; margin: 2%"> -->
@@ -26,6 +27,7 @@
</div>
</div>
</div>
<div
style="
height: 62%;
@@ -34,26 +36,16 @@
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
border-radius: 10px;
background: #ffffff;
"
><div style="height: 10%">平均值</div>
">
<div style="height: 10%">平均值</div>
<div style="display: flex; display: flex; flex-wrap: wrap; width: 100%; height: 100%">
<div
v-for="(item, index) in averageData"
:key="index"
style="
width: 33%;
height: 45%;
/* display: flex; */
/* flex-direction: column;
justify-content: center;
align-items: center; */
/* margin: 10%;
">
<div v-for="(item, index) in averageData" :key="index" style="width: 33%; height: 45%">
<div
style="
height: 90%;
margin: 0 5%;
/* box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5); */
border-radius: 10px;
background-color: rgba(67, 136, 251, 0.09803921568627451);
display: flex;
@@ -94,8 +86,8 @@
>
</div>
</div>
</div></div
>
</div>
</div>
<!-- </div> -->
</a-col>
<a-col :span="18">
@@ -141,14 +133,7 @@
style="width: 20%; margin-left: 10px"
:options="frequencyOptions" />
<a-date-picker style="width: 20%; margin-left: 10px" v-model:value="timeValue" />
<!-- <a-range-picker
:value="hackValue || dateRange"
:disabled-date="disabledDate"
@change="onChange"
@openChange="onOpenChange"
@calendarChange="onCalendarChange"
style="width: 100%; margin-bottom: 10px"
:placeholder="['请选择日期', '请选择日期']" /> -->
<a-button type="primary" style="margin-left: 10px" @click="getDeviceHotMap">
查询
</a-button>
@@ -160,6 +145,7 @@
<!-- </div> -->
</a-col>
</a-row>
<!-- </a-spin> -->
</template>
<script lang="ts">
export default {
@@ -181,7 +167,7 @@
defineOptions({
name: 'AggregateData', // 与页面路由name一致缓存才可生效
});
const loading = ref(false);
// 采集频率
const frequencyValue = ref<string>();
@@ -301,6 +287,7 @@
treeData2.value = res.data;
if (treeData2.value && treeData2.value.length > 0) {
quyuvalue.value = [treeData2.value[0].childList[0].id];
getDeviceHotMap();
}
});
};
@@ -355,7 +342,7 @@
// 获取区域数据
await queryDeviceArea();
await getDeviceHotMap();
// await getDeviceHotMap();
// let hotData = {
// timeList: [
@@ -781,4 +768,8 @@
};
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
:deep(.ant-spin-nested-loading) {
height: 100% !important;
}
</style>

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

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

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

@@ -1,85 +1,73 @@
<!-- eslint-disable vue/multi-word-component-names -->
<template>
<div>
<a-table
:columns="tableColumns"
:data-source="pageData"
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: 17%"
:options="typeList" />
<a-tree-select
v-model:value="quyuvalue"
style="width: 17%; 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-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"
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 style="background: #ffffff; height: 95%">
<a-spin :spinning="loading">
<a-table
:columns="tableColumns"
:data-source="pageData"
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: 17%"
:options="typeList" />
<a-tree-select
v-model:value="quyuvalue"
style="width: 17%; 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-select
v-model:value="frequencyValue"
placeholder="请选择采集频率"
style="width: 17%; margin-left: 10px"
:options="frequencyOptions"
@change="changeFrequency" />
<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>
<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" /> -->
<a-pagination
:total="total"
show-size-changer
show-quick-jumper
@change="onChange"
style="display: flex; justify-content: center; margin-top: 10px" />
</template>
</a-table>
<a-pagination
:total="total"
show-size-changer
show-quick-jumper
@change="onChange"
style="display: flex; justify-content: center; margin-top: 10px" />
</a-spin>
</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 { tableColumns as tableColumnsA } from './config';
import { environmentMonitor } from '/@/api/monitor';
import { http } from '/nerv-lib/util';
import { dict, getEnum } from '/@/api';
@@ -92,6 +80,115 @@
'a-pagination': Pagination,
},
});
const loading = ref(false);
const getRowSpan = (dataIndex: string, record: any, data: any, dependents: string[] = []) => {
let rowSpan = 1;
for (let i = data.indexOf(record) + 1; i < data.length; i++) {
let shouldMerge = true;
for (const dependent of dependents) {
if (data[i][dependent] !== record[dependent]) {
shouldMerge = false;
break;
}
}
if (shouldMerge && data[i][dataIndex] === record[dataIndex]) {
rowSpan++;
} else {
break;
}
}
return rowSpan;
};
const tableColumnsA: TableColumnType[] = [
{
title: '序号',
customRender: ({ record, index }) => {
// 自定义单元格内容，这里返回序号
if (index == 0) {
pageData.value[index].index = 1;
// return 1;
} else if (pageData.value[index - 1].location == record.location) {
pageData.value[index].index = pageData.value[index - 1].index;
// return data.value[index].index;
} else {
pageData.value[index].index = pageData.value[index - 1].index + 1;
}
return pageData.value[index].index;
},
customCell: (record, rowIndex) => {
if (rowIndex == undefined) {
return {
rowSpan: 0,
colSpan: 0,
};
}
const rowSpan = getRowSpan('location', record, pageData.value);
if (rowIndex != 0 && pageData.value[rowIndex - 1].location == record.location) {
return {
rowSpan: 0,
colSpan: 0,
};
}
return {
rowSpan: rowSpan,
};
},
},
{
title: '区域名称',
dataIndex: 'location',
customCell: (record, rowIndex) => {
if (rowIndex == undefined) {
return {
rowSpan: 0,
colSpan: 0,
};
}
const rowSpan = getRowSpan('location', record, pageData.value);
if (rowIndex != 0 && pageData.value[rowIndex - 1].location == record.location) {
return {
rowSpan: 0,
colSpan: 0,
};
}
return {
rowSpan: rowSpan,
};
},
},
{
title: '点位',
dataIndex: 'pointName',
customCell: (record, rowIndex) => {
if (rowIndex == undefined) {
return {
rowSpan: 0,
colSpan: 0,
};
}
const rowSpan = getRowSpan('pointName', record, pageData.value, ['location']);
if (
rowIndex != 0 &&
pageData.value[rowIndex - 1].location == record.location &&
pageData.value[rowIndex - 1].pointName == record.pointName
) {
return {
rowSpan: 0,
colSpan: 0,
};
}
return {
rowSpan: rowSpan,
};
},
},
{
title: '日期',
dataIndex: 'time',
},
];
const typeList = ref();
const typeValue = ref();
const quyuvalue = ref<string[]>([]);
@@ -103,8 +200,9 @@
const frequencyOptions = ref<SelectProps['options']>([]);
const treeData2 = ref<TreeSelectProps['treeData']>([]);
const data = ref([]);
const pageData = ref([]);
// const data = ref([]);
let data = ref<any[]>([]);
const pageData = ref<any[]>([]);
// const timeValue = ref<Dayjs>();
let tableColumns = ref<TableColumnType[]>([]);
@@ -117,15 +215,6 @@
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();
// };
type RangeValue = [Dayjs, Dayjs];
const dates = ref<RangeValue>();
@@ -160,23 +249,11 @@
};
// 切换频率
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;
// });
loading.value = true;
let environmentType = '';
for (let i = 0; i < typeList.value.length; i++) {
if (typeList.value[i].value == typeValue.value) {
@@ -189,41 +266,16 @@
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.getDeviceHistory, {
orgId: orgId.value,
environmentType: environmentType, // 环境参数code
location: quyuvalue.value, // 区域id或者name
startTime: startTime, //开始时间
endTime: endTime, //结束时间
startTime: startDate.value, //开始时间
endTime: endDate.value, //结束时间
timeRate: frequencyValue.value, // 频率
})
@@ -237,24 +289,6 @@
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;
@@ -263,6 +297,9 @@
data.value = res.data.data;
total.value = res.data.data.length;
onChange(1, 10);
})
.finally(() => {
loading.value = false;
});
};
// 获取区域数据
@@ -273,6 +310,7 @@
treeData2.value = res.data;
if (treeData2.value && treeData2.value.length > 0) {
quyuvalue.value = [treeData2.value[0].childList[0].id];
getTableList();
}
});
};
@@ -295,139 +333,13 @@
}
// 获取区域数据
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();
// 分页器
const onChange = (pageNumber: number, size: number) => {
// 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">

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

@@ -3,7 +3,7 @@
<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="2" tab="历史数据" />
<a-tab-pane key="3" tab="平均数据" />
</a-tabs>
<a-button