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

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