You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
412 lines
12 KiB
412 lines
12 KiB
<!-- eslint-disable vue/v-on-event-hyphenation -->
|
|
<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">
|
|
<a-tree
|
|
v-model:expandedKeys="expandedKeys"
|
|
v-model:selectedKeys="selectedKeys"
|
|
v-model:checkedKeys="checkedKeys"
|
|
checkable
|
|
:height="560"
|
|
style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
|
|
:tree-data="treeData2" />
|
|
</a-spin>
|
|
|
|
<!-- <div class="fixed-bottom"> -->
|
|
<div>
|
|
<!-- <a-divider /> -->
|
|
<a-select
|
|
v-model:value="selectedValue"
|
|
placeholder="请选择点位"
|
|
:style="{
|
|
top: '50px',
|
|
left: `${divWidth + 55}px`,
|
|
zIndex: 9,
|
|
position: 'absolute',
|
|
width: `${divWidth}px`,
|
|
}"
|
|
:options="options1" />
|
|
<a-select
|
|
v-model:value="frequencyValue"
|
|
placeholder="请选择频率"
|
|
:style="{
|
|
top: '50px',
|
|
left: `${divWidth * 2 + 65}px`,
|
|
zIndex: 9,
|
|
position: 'absolute',
|
|
width: `${divWidth}px`,
|
|
}"
|
|
:options="options2" />
|
|
<a-range-picker
|
|
:value="hackValue || dateRange"
|
|
:disabled-date="disabledDate"
|
|
@change="onChange"
|
|
@openChange="onOpenChange"
|
|
@calendarChange="onCalendarChange"
|
|
:style="{
|
|
top: '50px',
|
|
left: `${divWidth * 3 + 75}px`,
|
|
zIndex: 9,
|
|
position: 'absolute',
|
|
width: `${divWidth}px`,
|
|
}"
|
|
:placeholder="['请选择日期', '请选择日期']" />
|
|
<a-button
|
|
type="primary"
|
|
:style="{
|
|
top: '50px',
|
|
left: `${divWidth * 4 + 85}px`,
|
|
zIndex: 9,
|
|
position: 'absolute',
|
|
}"
|
|
@click="getSelect">
|
|
查询
|
|
</a-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import type { TreeSelectProps, SelectProps } from 'ant-design-vue';
|
|
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);
|
|
const value = ref<string>();
|
|
|
|
const orgId = ref('');
|
|
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
|
orgId.value = result;
|
|
|
|
const treeData1 = ref<TreeSelectProps['treeData']>([]);
|
|
|
|
http.post(device.queryDeviceTree, { orgId: orgId.value }).then((res) => {
|
|
treeData1.value = formatTreeData(res.data);
|
|
});
|
|
|
|
const formatTreeData = (data: any) => {
|
|
return data.map((item: any) => ({
|
|
title: item.code + '.' + item.deviceType,
|
|
value: item.code,
|
|
children: item.children ? formatTreeData(item.children) : [],
|
|
}));
|
|
};
|
|
|
|
const treeData2 = ref<TreeSelectProps['treeData']>([]);
|
|
|
|
const changeDeviceType = (val: any, label: any) => {
|
|
treeLoading.value = true;
|
|
http
|
|
.post(device.queryDevicePage, {
|
|
deviceCode: val,
|
|
orgId: orgId.value,
|
|
pageNum: 1,
|
|
pageSize: 1000,
|
|
})
|
|
.then((res) => {
|
|
if (!val) {
|
|
val = '999999999';
|
|
}
|
|
if (!label || label.length == 0) {
|
|
label = ['所有设备'];
|
|
}
|
|
let records = res.data.records;
|
|
records.forEach((item: any) => {
|
|
(item.title = item.snCode + '（' + item.deviceName + '）'),
|
|
(item.key = item.deviceInfoCode);
|
|
});
|
|
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;
|
|
});
|
|
};
|
|
|
|
const expandedKeys = ref<string[]>([]);
|
|
const selectedKeys = ref<string[]>([]);
|
|
const checkedKeys = ref<string[]>([]);
|
|
|
|
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小时',
|
|
// },
|
|
]);
|
|
const selectedValue = ref<string | undefined>();
|
|
const frequencyValue = ref<string | 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
|
|
.post(deviceMonitor.getDevicePointToMonitor, {
|
|
deviceIds: checkedKeys.value,
|
|
orgId: orgId.value,
|
|
type: 0,
|
|
})
|
|
.then((res) => {
|
|
if (res.retcode == 0) {
|
|
options1.value = [];
|
|
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;
|
|
});
|
|
} else {
|
|
options1.value = [];
|
|
}
|
|
// options1.value = [
|
|
// { value: '1', label: 'A 项电压' },
|
|
// { value: '2', label: 'B 项电压' },
|
|
// { value: '3', label: 'C 项电压' },
|
|
// { value: '4', label: 'AB 线电压' },
|
|
// { value: '5', label: 'BC 线电压' },
|
|
// { value: '6', label: 'A 项电流' },
|
|
// { value: '7', label: 'B 项电流' },
|
|
// ];
|
|
};
|
|
|
|
// 查询数据后放入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,
|
|
devicePointCode: selectedValue.value,
|
|
|
|
endDate: endDate.value,
|
|
startDate: startDate.value,
|
|
timeRate: frequencyValue.value,
|
|
})
|
|
.then((res) => {
|
|
pageData.tableList = res.data.tableList;
|
|
pageData.tableColumns = res.data.tableHeaderList;
|
|
|
|
pageData.graphList = res.data.graphData;
|
|
pageData.XData = res.data.XData;
|
|
});
|
|
};
|
|
|
|
type RangeValue = [Dayjs, Dayjs];
|
|
const dates = ref<RangeValue>();
|
|
const hackValue = ref<RangeValue>();
|
|
const startDate = ref<String>();
|
|
const endDate = ref<String>();
|
|
|
|
const onChange = (val: RangeValue, dateStrings: any) => {
|
|
dateRange.value = val;
|
|
if (dateStrings && dateStrings.length === 2) {
|
|
startDate.value = dateStrings[0];
|
|
endDate.value = dateStrings[1];
|
|
}
|
|
};
|
|
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;
|
|
};
|
|
|
|
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();
|
|
});
|
|
// 在组件卸载时移除监听器
|
|
// onUpdated(() => {
|
|
// window.removeEventListener('resize', getDivWidth);
|
|
// });
|
|
// 在组件卸载时停止监听
|
|
onUnmounted(() => {
|
|
if (select.value?.$el) {
|
|
getDivWidth.unobserve(select.value.$el);
|
|
}
|
|
getDivWidth.disconnect();
|
|
});
|
|
// 监听 pageData 的变化
|
|
watch(
|
|
() => checkedKeys,
|
|
(_newValue, _oldValue) => {
|
|
getDianWeiList();
|
|
},
|
|
{ deep: true },
|
|
);
|
|
|
|
return {
|
|
treeLine,
|
|
showLeafIcon,
|
|
value,
|
|
treeData1,
|
|
treeData2,
|
|
expandedKeys,
|
|
selectedKeys,
|
|
checkedKeys,
|
|
options1,
|
|
options2,
|
|
selectedValue,
|
|
frequencyValue,
|
|
dateRange,
|
|
getDianWeiList,
|
|
getSelect,
|
|
disabledDate,
|
|
onCalendarChange,
|
|
onOpenChange,
|
|
onChange,
|
|
hackValue,
|
|
pageData,
|
|
changeDeviceType,
|
|
treeLoading,
|
|
select,
|
|
divWidth,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.ns-tree-title {
|
|
user-select: text;
|
|
margin-bottom: 5px;
|
|
padding-bottom: 10px;
|
|
padding-top: 10px;
|
|
border-bottom: 1px solid #e9e9e9;
|
|
> span {
|
|
padding-left: 10px;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
.parent-container {
|
|
// position: relative;
|
|
border-radius: 10px;
|
|
background: #ffffff;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
height: 100%;
|
|
}
|
|
|
|
// .fixed-bottom {
|
|
// // display: flex;
|
|
// // top: 50px;
|
|
// // left: 340px;
|
|
// // z-index: 9;
|
|
|
|
// // position: absolute;
|
|
// // bottom: 0;
|
|
// width: 100%;
|
|
// // margin-bottom: 10px;
|
|
// }
|
|
</style>
|
|
|