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

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

@@ -2,16 +2,12 @@
<template>
<div class="parent-container">
<div class="ns-tree-title">
<ns-icon name="common" size="11" style="margin-right: 3px" />
<span>数据点位</span>
</div>
<a-select
ref="select"
v-model:value="selectedValue"
placeholder="请选择能耗类型"
style="width: 100%; margin-bottom: 10px"
:options="options1"
@change="changeEnergyType" />
<a-radio-group
ref="select"
v-model:value="mode"
@change="changeMode"
style="padding-bottom: 10px; width: 100%">
@@ -32,7 +28,7 @@
v-model:selectedKeys="selectedKeys"
v-model:checkedKeys="checkedKeys"
checkable
:height="300"
:height="600"
style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
:tree-data="treeData2">
<!-- <template #title="{ title }">
@@ -51,38 +47,104 @@
</a-tree>
</a-spin>
<div class="fixed-bottom">
<a-divider />
<!-- <div class="fixed-bottom"> -->
<div>
<!-- <a-divider /> -->
<a-select
v-model:value="dateTypeValue"
v-model:value="selectedValue"
placeholder="请选择能耗类型"
:style="{
top: '100px',
left: `${divWidth + 40}px`,
zIndex: 9,
position: 'absolute',
width: `${divWidth}px`,
}"
:options="options1"
@change="changeEnergyType" />
<a-select
v-model:value="frequencyValue"
placeholder="请选择日期类型"
style="width: 100%; margin-bottom: 10px"
:options="options2" />
:style="{
top: '100px',
left: `${divWidth * 2 + 50}px`,
zIndex: 9,
position: 'absolute',
width: `${divWidth}px`,
}"
:options="options2"
@change="changeFrequency" />
<a-range-picker
style="width: 100%; margin-bottom: 10px"
:style="{
top: '100px',
left: `${divWidth * 3 + 60}px`,
zIndex: 9,
position: 'absolute',
width: `${divWidth}px`,
}"
@change="onChangeDate"
v-model:value="dateValue"
:picker="dateTypeValue" />
<a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect">
:picker="dateTypeValue"
v-if="activeKey == '1'" />
<a-date-picker
:style="{
top: '100px',
left: `${divWidth * 3 + 60}px`,
zIndex: 9,
position: 'absolute',
width: `${divWidth}px`,
}"
@change="onChangeDate"
v-model:value="timeValue"
:picker="dateTypeValue"
v-if="activeKey == '2'" />
<a-button
type="primary"
:style="{
top: '100px',
left: `${divWidth * 4 + 70}px`,
zIndex: 9,
position: 'absolute',
}"
@click="getSelect(null)">
查询
</a-button>
</div>
<!-- </div> -->
</div>
</template>
<script lang="ts">
import type { TreeSelectProps, SelectProps } from 'ant-design-vue';
import { defineComponent, ref, onMounted, inject } from 'vue';
import { defineComponent, ref, onMounted, inject, onUnmounted } from 'vue';
import dayjs, { Dayjs } from 'dayjs';
import { http } from '/nerv-lib/util';
import { device, group } from '/@/api/deviceManage';
import { energyMonitor } from '/@/api/monitor';
import { dict } from '/@/api';
import { dict, getEnum } from '/@/api';
export default defineComponent({
// eslint-disable-next-line vue/multi-word-component-names
name: 'Tree',
setup() {
const select = ref<HTMLElement | null>(null);
const divWidth = ref(0); // 用于存储 div 的宽度
// 获取 div 的宽度
// const getDivWidth = () => {
// if (select.value) {
// divWidth.value = select.value.$el.offsetWidth;
// }
// };
// 使用 ResizeObserver 监听宽度变化
const getDivWidth = new ResizeObserver(() => {
if (select.value?.$el) {
divWidth.value = select.value.$el.offsetWidth;
console.log('宽度变化:', divWidth.value);
}
});
const value = ref<string>();
const deviceName = ref<string>();
const pointName = ref<string>();
@@ -104,10 +166,17 @@
// 能耗类型
const selectedValue = ref<string | number | null | undefined>();
// 日期类型
const dateTypeValue = ref<string | undefined>('month');
const dateTypeValue = ref();
const frequencyValue = ref();
const activeKey = ref('1');
// 时间
const dateValue = ref<[Dayjs, Dayjs] | undefined>([dayjs(), dayjs()]);
const timeValue = ref<Dayjs | undefined>(dayjs());
// 页面初始化参数
const getOptionsList = async () => {
try {
@@ -122,20 +191,26 @@
} catch (error) {
console.error('Failed to fetch options:', error);
}
options2.value = [
{
value: 'date',
label: '日',
},
{
value: 'month',
label: '月',
},
{
value: 'year',
label: '年',
},
];
let frequency = await getEnum({ params: { enumType: 'EnergyTimeEnum' } });
options2.value = frequency.data;
if (options2.value && options2.value.length > 0) {
dateTypeValue.value = 'date';
frequencyValue.value = options2.value[0].value;
}
// options2.value = [
// {
// value: 'date',
// label: '日',
// },
// {
// value: 'month',
// label: '月',
// },
// {
// value: 'year',
// label: '年',
// },
// ];
};
interface PageData {
// 图表 表格数据
@@ -156,7 +231,7 @@
// 选择能耗类型
const changeEnergyType = () => {
if (selectedValue.value == '碳排量') {
if (selectedValue.value == 'CARBON_EMISSIONS') {
shebei.value = true;
mode.value = '1';
} else {
@@ -166,23 +241,55 @@
};
const startDate = ref<String>();
const endDate = ref<String>();
const onChangeDate = (val: RangeValue, dateStrings: any) => {
const startDateAnalyse = ref<String>();
const endDateAnalyse = ref<String>();
const onChangeDate = (val: any, dateStrings: any) => {
if (dateStrings && dateStrings.length === 2) {
dateValue.value = val;
startDate.value = dateStrings[0];
endDate.value = dateStrings[1];
} else if (dateStrings) {
timeValue.value = val;
startDateAnalyse.value = dateStrings;
endDateAnalyse.value = dateStrings;
}
};
const getSelect = () => {
// const date = dateValue.value;
// let year = 0;
// let month = 0;
// if (date) {
// year = date.year();
// month = date.month() + 1;
// } else {
// return;
// }
const changeFrequency = (value) => {
if (frequencyValue.value == 0) {
dateTypeValue.value = 'date';
} else if (frequencyValue.value == 1) {
dateTypeValue.value = 'month';
} else if (frequencyValue.value == 2) {
dateTypeValue.value = 'year';
}
};
const getSelect = (key: any) => {
let keyV = null;
if (key) {
keyV = key;
}
if (activeKey.value == '1') {
getSelectGraph(keyV);
} else {
getSelectAnalyse(keyV);
}
};
const getSelectGraph = (key: any) => {
if (key) {
activeKey.value = key;
if (
pageData.graphTableList.length > 0 &&
pageData.graphTableColumns.length > 0 &&
pageData.graphGraphList.length > 0
) {
return;
}
}
let startTime = '';
let endTime = '';
if (startDate.value && endDate.value) {
@@ -222,28 +329,77 @@
energyType: selectedValue.value,
orgId: orgId.value,
dateType: dateTypeValue.value == 'year' ? 0 : 1, //0 年 1月
dateType: frequencyValue.value,
deviceInfoCodes: mode.value == '0' ? checkedKeys.value : [], // 设备需要传 device_info_code
energyQueryType: mode.value, // 0 设备 1 节点
nodeIds: mode.value == '1' ? checkedKeys.value : [],
startTime: startTime,
endTime: endTime,
startDate: startTime,
endDate: endTime,
})
.then((res) => {
let selectedValueName = '';
options1.value?.forEach((item) => {
if (item.value == selectedValue.value) {
selectedValueName = item.label;
}
});
res.data.tableList.forEach((item) => {
item.selectedValueName = selectedValueName;
});
pageData.graphTableList = res.data.tableList;
pageData.graphTableColumns = res.data.tableHeaderList;
pageData.graphGraphList = res.data.graghData;
if (res.data && res.data.tableList && res.data.tableHeaderList && res.data.graghData) {
let selectedValueName = '';
options1.value?.forEach((item) => {
if (item.value == selectedValue.value) {
selectedValueName = item.label;
}
});
res.data.tableList.forEach((item) => {
item.selectedValueName = selectedValueName;
});
pageData.graphTableList = res.data.tableList;
pageData.graphTableColumns = res.data.tableHeaderList;
pageData.graphGraphList = res.data.graghData;
} else {
pageData.graphTableList = [];
pageData.graphTableColumns = [];
pageData.graphGraphList = [];
}
});
};
const getSelectAnalyse = (key: any) => {
if (key) {
activeKey.value = key;
if (pageData.analysisGraphList.length > 0 && pageData.analysisTableList.length > 0) {
return;
}
}
let startTime = '';
let endTime = '';
if (startDateAnalyse.value != endDateAnalyse.value) {
endDate.value = startDateAnalyse.value;
}
if (startDateAnalyse.value && endDateAnalyse.value) {
if (dateTypeValue.value == 'month') {
startTime = startDateAnalyse.value + '-01';
const [year, month] = endDateAnalyse.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 = startDateAnalyse.value + '-01-01';
endTime = endDateAnalyse.value + '-12-31';
} else {
startTime = startDateAnalyse.value + '';
endTime = endDateAnalyse.value + '';
}
} else {
// 获取当天的时间
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;
}
timeValue.value = dayjs(startTime);
// 分析数据
http
@@ -257,12 +413,17 @@
energyQueryType: mode.value, // 0 设备 1 节点
nodeIds: mode.value == '1' ? checkedKeys.value : [],
startTime: startTime,
endTime: endTime,
startDate: startTime,
endDate: endTime,
})
.then((res) => {
pageData.analysisTableList = res.data.dataList;
pageData.analysisGraphList = res.data.dataList;
if (res.data && res.data.dataList) {
pageData.analysisTableList = res.data.dataList;
pageData.analysisGraphList = res.data.dataList;
} else {
pageData.analysisTableList = [];
pageData.analysisGraphList = [];
}
});
};
@@ -272,6 +433,7 @@
const treeData2 = ref<TreeSelectProps['treeData']>([]);
// 切换树结构
const changeMode = () => {
checkedKeys.value = [];
treeLoading.value = true;
if (mode.value == '0') {
http
@@ -295,7 +457,7 @@
treeData2.value = a;
expandedKeys.value = [val];
checkedKeys.value.push(records[0].deviceCode, records[1].deviceCode);
getSelect();
getSelect(null);
})
.finally(() => {
treeLoading.value = false;
@@ -312,6 +474,8 @@
treeData2.value = formatTreeData(pointName.value ? res.data[0].searchList : res.data);
expandedKeys.value = getAllKeys(treeData2.value);
checkedKeys.value.push(treeData2.value[0].key, treeData2.value[1].key);
getSelect(null);
})
.finally(() => {
treeLoading.value = false;
@@ -362,6 +526,11 @@
dates.value = val;
};
onMounted(() => {
if (select.value?.$el) {
divWidth.value = select.value.$el.offsetWidth;
getDivWidth.observe(select.value.$el);
}
getOptionsList();
changeMode();
// debugger;
@@ -370,7 +539,14 @@
// treeData2.value[0].children[1].deviceCode,
// );
// debugger;
getSelect();
// getSelect(null);
});
// 在组件卸载时停止监听
onUnmounted(() => {
if (select.value?.$el) {
getDivWidth.unobserve(select.value.$el);
}
getDivWidth.disconnect();
});
return {
@@ -386,9 +562,13 @@
mode,
selectedValue,
dateTypeValue,
frequencyValue,
dateValue,
timeValue,
getOptionsList,
getSelect,
getSelectAnalyse,
getSelectGraph,
changeMode,
disabledDate,
onCalendarChange,
@@ -398,6 +578,10 @@
changeEnergyType,
shebei,
onChangeDate,
changeFrequency,
activeKey,
select,
divWidth,
};
},
});
@@ -416,14 +600,14 @@
}
}
.parent-container {
position: relative;
// position: relative;
height: 100%;
}
.fixed-bottom {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 10px;
}
// .fixed-bottom {
// position: absolute;
// bottom: 0;
// width: 100%;
// margin-bottom: 10px;
// }
</style>