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

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

@@ -2,13 +2,16 @@
<template>
<div class="parent-container">
<div class="ns-tree-title">
<ns-icon name="deviceType" size="11" style="margin-right: 3px" />
<span>设备列表</span>
</div>
<a-tree-select
ref="select"
v-model:value="value"
style="width: 100%"
:tree-line="treeLine && { showLeafIcon }"
:tree-data="treeData1"
allowClear
@change="changeDeviceType" />
<a-spin :spinning="treeLoading">
@@ -17,23 +20,35 @@
v-model:selectedKeys="selectedKeys"
v-model:checkedKeys="checkedKeys"
checkable
:height="340"
:height="560"
style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
:tree-data="treeData2" />
</a-spin>
<div class="fixed-bottom">
<a-divider />
<!-- <div class="fixed-bottom"> -->
<div>
<!-- <a-divider /> -->
<a-select
ref="select"
v-model:value="selectedValue"
placeholder="请选择点位"
style="width: 100%; margin-bottom: 10px"
:style="{
top: '50px',
left: `${divWidth + 40}px`,
zIndex: 9,
position: 'absolute',
width: `${divWidth}px`,
}"
:options="options1" />
<a-select
v-model:value="frequencyValue"
placeholder="请选择频率"
style="width: 100%; margin-bottom: 10px"
:style="{
top: '50px',
left: `${divWidth * 2 + 50}px`,
zIndex: 9,
position: 'absolute',
width: `${divWidth}px`,
}"
:options="options2" />
<a-range-picker
:value="hackValue || dateRange"
@@ -41,9 +56,23 @@
@change="onChange"
@openChange="onOpenChange"
@calendarChange="onCalendarChange"
style="width: 100%; margin-bottom: 10px"
:style="{
top: '50px',
left: `${divWidth * 3 + 60}px`,
zIndex: 9,
position: 'absolute',
width: `${divWidth}px`,
}"
:placeholder="['请选择日期', '请选择日期']" />
<a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect">
<a-button
type="primary"
:style="{
top: '50px',
left: `${divWidth * 4 + 70}px`,
zIndex: 9,
position: 'absolute',
}"
@click="getSelect">
查询
</a-button>
</div>
@@ -52,18 +81,36 @@
<script lang="ts">
import type { TreeSelectProps, SelectProps } from 'ant-design-vue';
import { defineComponent, ref, onMounted, watch } from 'vue';
import { Dayjs } from 'dayjs';
import { defineComponent, ref, onMounted, onUnmounted, watch } from 'vue';
import dayjs, { Dayjs } from 'dayjs';
import { inject } from 'vue';
import { http } from '/nerv-lib/util';
import { device } from '/@/api/deviceManage';
import { deviceMonitor } from '/@/api/monitor';
import { Item } from 'ant-design-vue/lib/menu';
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 treeLoading = ref(false);
const treeLine = ref(true);
const showLeafIcon = ref(false);
@@ -93,7 +140,7 @@
treeLoading.value = true;
http
.post(device.queryDevicePage, {
code: val,
deviceCode: val,
orgId: orgId.value,
pageNum: 1,
pageSize: 1000,
@@ -102,7 +149,7 @@
if (!val) {
val = '999999999';
}
if (!label) {
if (!label || label.length == 0) {
label = ['所有设备'];
}
let records = res.data.records;
@@ -113,6 +160,9 @@
let a: TreeSelectProps['treeData'] = [{ title: label[0], key: val, children: records }];
treeData2.value = a;
expandedKeys.value = [val];
if (records && records.length > 2) {
checkedKeys.value = [records[0].deviceInfoCode, records[1].deviceInfoCode];
}
})
.finally(() => {
treeLoading.value = false;
@@ -125,27 +175,37 @@
const options1 = ref<SelectProps['options']>([]);
const options2 = ref<SelectProps['options']>([
{
value: '1',
label: '5分钟',
},
{
value: '2',
label: '10分钟',
},
{
value: '3',
label: '30分钟',
},
{
value: '4',
label: '1小时',
},
// {
// value: '1',
// label: '5分钟',
// },
// {
// value: '2',
// label: '10分钟',
// },
// {
// value: '3',
// label: '30分钟',
// },
// {
// value: '4',
// label: '1小时',
// },
]);
const selectedValue = ref<string | undefined>();
const frequencyValue = ref<string | undefined>();
const dateRange = ref<[Dayjs, Dayjs] | undefined>();
const dateRange = ref<[Dayjs, Dayjs] | undefined>([dayjs(), dayjs()]);
interface PageData {
tableList: any[];
tableColumns: any[];
graphList: any[];
XData: any[];
}
const pageData = inject<PageData>('pageData');
if (!pageData) {
throw new Error('pageData is not provided');
}
const getDianWeiList = () => {
if (checkedKeys.value && checkedKeys.value.length > 0) {
http
@@ -159,6 +219,15 @@
res.data.forEach((item: any) => {
options1.value?.push({ value: item.code, label: item.name });
});
selectedValue.value = options1.value[0].value;
if (
pageData.tableList.length == 0 ||
pageData.tableColumns.length == 0 ||
pageData.graphList.length == 0 ||
pageData.XData.length == 0
) {
getSelect();
}
}
// options1.value = res.data;
@@ -177,18 +246,18 @@
// ];
};
interface PageData {
tableList: any[];
tableColumns: any[];
graphList: any[];
XData: any[];
}
const pageData = inject<PageData>('pageData');
if (!pageData) {
throw new Error('pageData is not provided');
}
// 查询数据后放入pageData
const getSelect = () => {
if (!startDate.value || !endDate.value) {
// 获取当天的时间
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');
startDate.value = year + '-' + month + '-' + day;
endDate.value = year + '-' + month + '-' + day;
}
http
.post(deviceMonitor.getDeviceGraph, {
deviceIds: checkedKeys.value,
@@ -196,7 +265,7 @@
endDate: endDate.value,
startDate: startDate.value,
timeRate: '2',
timeRate: frequencyValue.value,
})
.then((res) => {
pageData.tableList = res.data.tableList;
@@ -240,9 +309,32 @@
dates.value = val;
};
onMounted(() => {
onMounted(async () => {
if (select.value?.$el) {
divWidth.value = select.value.$el.offsetWidth;
getDivWidth.observe(select.value.$el);
}
// getDivWidth();
// window.addEventListener('resize', getDivWidth); // 监听窗口大小变化
let frequency = await getEnum({ params: { enumType: 'TimeFrequencyEnum' } });
options2.value = frequency.data;
if (options2.value && options2.value.length > 0) {
frequencyValue.value = options2.value[options2.value.length - 1].value;
}
changeDeviceType(null, null);
getSelect();
// getSelect();
});
// 在组件卸载时移除监听器
// onUpdated(() => {
// window.removeEventListener('resize', getDivWidth);
// });
// 在组件卸载时停止监听
onUnmounted(() => {
if (select.value?.$el) {
getDivWidth.unobserve(select.value.$el);
}
getDivWidth.disconnect();
});
// 监听 pageData 的变化
watch(
@@ -277,6 +369,8 @@
pageData,
changeDeviceType,
treeLoading,
select,
divWidth,
};
},
});
@@ -295,14 +389,19 @@
}
}
.parent-container {
position: relative;
// position: relative;
height: 100%;
}
.fixed-bottom {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 10px;
}
// .fixed-bottom {
// // display: flex;
// // top: 50px;
// // left: 340px;
// // z-index: 9;
// // position: absolute;
// // bottom: 0;
// width: 100%;
// // margin-bottom: 10px;
// }
</style>