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

Merge branch 'temp' of http://123.60.103.97:3000/xuziqiang/SaaS-lib into temp

Browse Source
This commit is contained in:
xuziqiang
2024-07-17 15:07:24 +08:00
parent 2a6de583e1 ddf0514182
commit bf4a3fd581
11 changed files with 832 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
View File

@@ -17,6 +17,7 @@
tableList: any[];
tableColumns: any[];
graphList: any[];
XData: any[];
}
const pageData = inject<PageData>('pageData');
@@ -37,32 +38,40 @@
const draw = () => {
data.value = pageData.graphList;
let XData = pageData.XData;
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(graphChart.value);
var seriesList = [];
var date = [];
// var date = [];
var legendList: string | any[] = [];
for (let i = 0; i < data.value.length; i++) {
date.push(data.value[i].date);
seriesList.push({
name: data.value[i].deviceName,
data: data.value[i].data,
type: 'line',
smooth: true,
});
legendList.push(data.value[i].deviceName);
// date.push(data.value[i].date);
for (let j = 0; j < data.value[i].data.length; j++) {
if (seriesList.length < j + 1) {
seriesList.push({
name: data.value[i].data[j].name,
data: [data.value[i].data[j].value],
type: 'line',
smooth: true,
});
} else {
seriesList[j].data.push(data.value[i].data[j].value);
}
if (legendList.length == 0 || legendList.length < j + 1) {
legendList.push(data.value[i].data[j].name);
}
}
// for (let j = 0; j < data.value[i].data.length; j++) {
// if (seriesList.length < j + 1) {
// seriesList.push({
// name: data.value[i].data[j].name,
// data: [data.value[i].data[j].value],
// type: 'line',
// smooth: true,
// });
// } else {
// seriesList[j].data.push(data.value[i].data[j].value);
// }
// if (legendList.length == 0 || legendList.length < j + 1) {
// legendList.push(data.value[i].data[j].name);
// }
// }
}
const option = {
legend: {
@@ -76,7 +85,7 @@
const date = params[0].name;
const values = params
.map((param: any) => {
const unit = data.value.find((d) => d.date === date)?.unit || '';
const unit = data.value.find((d) => d.date === date)?.devicePositionUnit || '';
return `<tr>
<td>${param.marker}${param.seriesName}</td>
<td style="text-align: right;">${param.value} ${unit}</td>
@@ -88,7 +97,7 @@
},
xAxis: {
type: 'category',
data: date,
data: XData,
},
yAxis: {
type: 'value',

1
hx-ai-intelligent/src/view/monitor/deviceMonitor/index.vue
View File

@@ -12,6 +12,7 @@
tableList: [],
tableColumns: [],
graphList: [],
XData: [],
});
// 使用 provide 函数来提供这个响应式对象

2
hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
View File

@@ -16,7 +16,7 @@
</div>
</div>
<graph ref="graphRef" v-if="isGraph" />
<environment-table ref="tableRef" v-else />
<environment-table ref="tableRef" style="width: 100%" v-else />
</div>
</a-col>
</a-row>

86
hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
View File

@@ -1,5 +1,10 @@
<template>
<a-table :columns="columns" :data-source="data" bordered />
<a-table
:columns="columns"
:data-source="data"
bordered
style="width: 100%"
:scroll="{ x: 2000 }" />
</template>
<script lang="ts">
@@ -7,14 +12,14 @@
import type { TableColumnType } from 'ant-design-vue';
import { inject } from 'vue';
// let data: any[] = [];
export default defineComponent({
name: 'EnvironmentTable',
setup() {
let data = ref<any[]>([]);
let columns = ref<TableColumnType[]>([]);
let index = ref(0);
interface PageData {
tableList: any[];
tableColumns: any[];
@@ -29,13 +34,14 @@
watch(
() => pageData as PageData,
(_newValue, _oldValue) => {
data.value = pageData.tableList;
// data.value = pageData.tableList;
let columnA: any[] = [...column];
columnA.push(...pageData.tableColumns);
columns.value = columnA;
// pageData.graphList;
// 执行你的逻辑代码
// let columnA: any[] = [...column];
// columnA.push(...pageData.tableColumns);
// columns.value = columnA;
// // pageData.graphList;
// // 执行你的逻辑代码
init();
},
{ deep: true },
);
@@ -62,7 +68,13 @@
const column: TableColumnType[] = [
{
title: '序号',
dataIndex: 'key',
customRender: ({ record, index }) => {
// 自定义单元格内容，这里返回序号
if (index == 0 || data.value[index - 1].deviceName == record.deviceName) {
return index + 1;
}
return index;
},
customCell: (record, rowIndex) => {
if (rowIndex == undefined) {
return {
@@ -70,8 +82,8 @@
colSpan: 0,
};
}
const rowSpan = getRowSpan('name', record, data.value);
if (rowIndex != 0 && data.value[rowIndex - 1].key == record.key) {
const rowSpan = getRowSpan('deviceName', record, data.value);
if (rowIndex != 0 && data.value[rowIndex - 1].deviceName == record.deviceName) {
return {
rowSpan: 0,
colSpan: 0,
@@ -82,9 +94,16 @@
};
},
},
// {
// title: '序号',
// customRender: (text: any) => {
// index.value += 1;
// return index.value;
// },
// },
{
title: '设备名称',
dataIndex: 'name',
dataIndex: 'deviceName',
customCell: (record, rowIndex) => {
if (rowIndex == undefined) {
return {
@@ -92,8 +111,8 @@
colSpan: 0,
};
}
const rowSpan = getRowSpan('name', record, data.value);
if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) {
const rowSpan = getRowSpan('deviceName', record, data.value);
if (rowIndex != 0 && data.value[rowIndex - 1].deviceName == record.deviceName) {
return {
rowSpan: 0,
colSpan: 0,
@@ -106,7 +125,7 @@
},
{
title: '设备点位',
dataIndex: 'position',
dataIndex: 'devicePositionName',
customCell: (record, rowIndex) => {
if (rowIndex == undefined) {
return {
@@ -114,11 +133,11 @@
colSpan: 0,
};
}
const rowSpan = getRowSpan('position', record, data.value, ['name']);
const rowSpan = getRowSpan('devicePositionName', record, data.value, ['deviceName']);
if (
rowIndex != 0 &&
data.value[rowIndex - 1].name == record.name &&
data.value[rowIndex - 1].position == record.position
data.value[rowIndex - 1].deviceName == record.deviceName &&
data.value[rowIndex - 1].devicePositionName == record.devicePositionName
) {
return {
rowSpan: 0,
@@ -132,7 +151,7 @@
},
{
title: '计量单位',
dataIndex: 'unit',
dataIndex: 'devicePositionUnit',
customCell: (record, rowIndex) => {
if (rowIndex == undefined) {
return {
@@ -140,12 +159,15 @@
colSpan: 0,
};
}
const rowSpan = getRowSpan('unit', record, data.value, ['name', 'position']);
const rowSpan = getRowSpan('devicePositionUnit', record, data.value, [
'deviceName',
'devicePositionName',
]);
if (
rowIndex != 0 &&
data.value[rowIndex - 1].name == record.name &&
data.value[rowIndex - 1].position == record.position &&
data.value[rowIndex - 1].unit == record.unit
data.value[rowIndex - 1].deviceName == record.deviceName &&
data.value[rowIndex - 1].devicePositionName == record.devicePositionName &&
data.value[rowIndex - 1].devicePositionUnit == record.devicePositionUnit
) {
return {
rowSpan: 0,
@@ -157,14 +179,26 @@
};
},
},
{
title: '日期',
dataIndex: 'time',
},
];
onMounted(() => {
const init = () => {
index.value = 0;
data.value = pageData.tableList;
let columnA: any[] = [...column];
columnA.push(...pageData.tableColumns);
let columnB: any[] = [];
pageData.tableColumns.forEach((item) => {
columnB.push({ title: item, dataIndex: item });
});
columnA.push(...columnB);
columns.value = columnA;
};
onMounted(() => {
init();
});
return {
data,

452
hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
View File

@@ -46,9 +46,6 @@
<a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect">
查询
</a-button>
<a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect11">
模拟不同数据查询
</a-button>
</div>
</div>
</template>
@@ -60,6 +57,7 @@
import { inject } from 'vue';
import { http } from '/nerv-lib/util';
import { device } from '/@/api/deviceManage';
import { deviceMonitor } from '/@/api/monitor';
export default defineComponent({
// eslint-disable-next-line vue/multi-word-component-names
@@ -163,6 +161,7 @@
tableList: any[];
tableColumns: any[];
graphList: any[];
XData: any[];
}
const pageData = inject<PageData>('pageData');
if (!pageData) {
@@ -170,278 +169,180 @@
}
// 查询数据后放入pageData
const getSelect = () => {
pageData.tableList = [
{
key: '1',
name: 'AC_002（暖通电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
},
{
key: '1',
name: 'AC_002（暖通电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
},
{
key: '2',
name: 'AC_003（照明电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
},
{
key: '2',
name: 'AC_003（照明电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
},
{
key: '3',
name: 'AC_004（给排水电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
},
];
pageData.tableColumns = [
{
title: '日期',
dataIndex: 'date',
},
{
title: '1:00',
dataIndex: '1:00',
},
];
pageData.graphList = [
{
date: '2023-12-01 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '21',
},
{
name: 'AC_003（照明电表）',
value: '36',
},
{
name: 'AC_004（给排水电表）',
value: '5',
},
],
},
{
date: '2023-12-02 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '26',
},
{
name: 'AC_003（照明电表）',
value: '25',
},
{
name: 'AC_004（给排水电表）',
value: '47',
},
],
},
{
date: '2023-12-03 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '18',
},
{
name: 'AC_003（照明电表）',
value: '22',
},
{
name: 'AC_004（给排水电表）',
value: '26',
},
],
},
{
date: '2023-12-04 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '40',
},
{
name: 'AC_003（照明电表）',
value: '15',
},
{
name: 'AC_004（给排水电表）',
value: '12',
},
],
},
{
date: '2023-12-05 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '15',
},
{
name: 'AC_003（照明电表）',
value: '18',
},
{
name: 'AC_004（给排水电表）',
value: '15',
},
],
},
{
date: '2023-12-06 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '15',
},
{
name: 'AC_003（照明电表）',
value: '18',
},
{
name: 'AC_004（给排水电表）',
value: '15',
},
],
},
];
};
// 测试查询 模拟不同数据
const getSelect11 = () => {
pageData.tableList = [
{
key: '1',
name: 'AC_002（暖通电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
'2:00': '2222',
},
{
key: '1',
name: 'AC_002（暖通电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
'2:00': '2222',
},
{
key: '2',
name: 'AC_003（照明电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
'2:00': '2222',
},
{
key: '2',
name: 'AC_003（照明电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
'2:00': '2222',
},
{
key: '3',
name: 'AC_004（给排水电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
'2:00': '2222',
},
];
pageData.tableColumns = [
{
title: '日期',
dataIndex: 'date',
},
{
title: '1:00',
dataIndex: '1:00',
},
{
title: '2:00',
dataIndex: '2:00',
},
];
pageData.graphList = [
{
date: '2023-12-01 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '21',
},
{
name: 'AC_003（照明电表）',
value: '36',
},
{
name: 'AC_004（给排水电表）',
value: '5',
},
{
name: 'AC_005（1111111）',
value: '14',
},
],
},
{
date: '2023-12-02 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '26',
},
{
name: 'AC_003（照明电表）',
value: '25',
},
{
name: 'AC_004（给排水电表）',
value: '47',
},
{
name: 'AC_005（1111111）',
value: '28',
},
],
},
];
http
.post(deviceMonitor.getDeviceGraph, {
deviceIds: ['HLlmTZp8-0601-0001', 'HLlmTZp-0804-0001'],
devicePointCode: 'ua',
devicePointId: 32,
endDate: '2024-07-02',
startDate: '2024-07-01',
timeRate: '2',
})
.then((res) => {
pageData.tableList = res.data.tableList;
pageData.tableColumns = res.data.tableHeaderList;
pageData.graphList = res.data.graphData;
pageData.XData = res.data.XData;
});
// pageData.tableList = [
// {
// key: '1',
// name: 'AC_002（暖通电表）',
// position: 'A 相电压',
// unit: 'V',
// date: '2023-12-01',
// '1:00': '3626',
// },
// {
// key: '1',
// name: 'AC_002（暖通电表）',
// position: 'A 相电压',
// unit: 'V',
// date: '2023-12-01',
// '1:00': '3626',
// },
// {
// key: '2',
// name: 'AC_003（照明电表）',
// position: 'A 相电压',
// unit: 'V',
// date: '2023-12-01',
// '1:00': '3626',
// },
// {
// key: '2',
// name: 'AC_003（照明电表）',
// position: 'A 相电压',
// unit: 'V',
// date: '2023-12-01',
// '1:00': '3626',
// },
// {
// key: '3',
// name: 'AC_004（给排水电表）',
// position: 'A 相电压',
// unit: 'V',
// date: '2023-12-01',
// '1:00': '3626',
// },
// ];
// pageData.tableColumns = [
// {
// title: '00:00',
// dataIndex: '00:00',
// },
// ];
// pageData.graphList = [
// {
// date: '2023-12-01 0:00',
// unit: 'V',
// data: [
// {
// name: 'AC_002（暖通电表）',
// value: '21',
// },
// {
// name: 'AC_003（照明电表）',
// value: '36',
// },
// {
// name: 'AC_004（给排水电表）',
// value: '5',
// },
// ],
// },
// {
// date: '2023-12-02 0:00',
// unit: 'V',
// data: [
// {
// name: 'AC_002（暖通电表）',
// value: '26',
// },
// {
// name: 'AC_003（照明电表）',
// value: '25',
// },
// {
// name: 'AC_004（给排水电表）',
// value: '47',
// },
// ],
// },
// {
// date: '2023-12-03 0:00',
// unit: 'V',
// data: [
// {
// name: 'AC_002（暖通电表）',
// value: '18',
// },
// {
// name: 'AC_003（照明电表）',
// value: '22',
// },
// {
// name: 'AC_004（给排水电表）',
// value: '26',
// },
// ],
// },
// {
// date: '2023-12-04 0:00',
// unit: 'V',
// data: [
// {
// name: 'AC_002（暖通电表）',
// value: '40',
// },
// {
// name: 'AC_003（照明电表）',
// value: '15',
// },
// {
// name: 'AC_004（给排水电表）',
// value: '12',
// },
// ],
// },
// {
// date: '2023-12-05 0:00',
// unit: 'V',
// data: [
// {
// name: 'AC_002（暖通电表）',
// value: '15',
// },
// {
// name: 'AC_003（照明电表）',
// value: '18',
// },
// {
// name: 'AC_004（给排水电表）',
// value: '15',
// },
// ],
// },
// {
// date: '2023-12-06 0:00',
// unit: 'V',
// data: [
// {
// name: 'AC_002（暖通电表）',
// value: '15',
// },
// {
// name: 'AC_003（照明电表）',
// value: '18',
// },
// {
// name: 'AC_004（给排水电表）',
// value: '15',
// },
// ],
// },
// ];
};
type RangeValue = [Dayjs, Dayjs];
@@ -493,7 +394,6 @@
dateRange,
getDianWeiList,
getSelect,
getSelect11,
disabledDate,
onCalendarChange,
onOpenChange,

36
hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/config.ts Normal file
View File

@@ -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）',
},
];

250
hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue Normal file
View File

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

20
hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/config.ts Normal file
View File

@@ -0,0 +1,20 @@
export const tableColumns = [
{
title: '序号',
customRender: (text: any) => {
return text.index + 1;
},
},
{
title: '区域名称',
dataIndex: 'areaName',
},
{
title: '点位',
dataIndex: 'point',
},
{
title: '日期',
dataIndex: 'date',
},
];

243
hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue Normal file
View File

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

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

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