592 lines
16 KiB
Vue
592 lines
16 KiB
Vue
<!-- eslint-disable vue/v-on-event-hyphenation -->
|
||
<template>
|
||
<div class="parent-container">
|
||
<div class="ns-tree-title">
|
||
<span>设备列表</span>
|
||
</div>
|
||
<a-tree-select
|
||
v-model:value="value"
|
||
style="width: 100%"
|
||
:tree-line="treeLine && { showLeafIcon }"
|
||
:tree-data="treeData1"
|
||
@change="changeDeviceType" />
|
||
|
||
<a-tree
|
||
v-model:expandedKeys="expandedKeys"
|
||
v-model:selectedKeys="selectedKeys"
|
||
v-model:checkedKeys="checkedKeys"
|
||
checkable
|
||
style="width: 100%; margin-bottom: 10px"
|
||
:tree-data="treeData2">
|
||
<!-- <template #title="{ title, key }">
|
||
<span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
|
||
<template v-else>{{ title }}</template>
|
||
</template> -->
|
||
</a-tree>
|
||
|
||
<div class="fixed-bottom">
|
||
<a-divider />
|
||
<a-select
|
||
ref="select"
|
||
v-model:value="selectedValue"
|
||
placeholder="请选择点位"
|
||
style="width: 100%; margin-bottom: 10px"
|
||
:options="options1" />
|
||
<a-select
|
||
v-model:value="frequencyValue"
|
||
placeholder="请选择频率"
|
||
style="width: 100%; margin-bottom: 10px"
|
||
:options="options2" />
|
||
<a-range-picker
|
||
:value="hackValue || dateRange"
|
||
:disabled-date="disabledDate"
|
||
@change="onChange"
|
||
@openChange="onOpenChange"
|
||
@calendarChange="onCalendarChange"
|
||
style="width: 100%; margin-bottom: 10px"
|
||
:placeholder="['请选择日期', '请选择日期']" />
|
||
<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>
|
||
|
||
<script lang="ts">
|
||
import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue';
|
||
import { defineComponent, ref, onMounted } from 'vue';
|
||
import { Dayjs } from 'dayjs';
|
||
import { inject } from 'vue';
|
||
import { http } from '/nerv-lib/util';
|
||
import { device } from '/@/api/deviceManage';
|
||
// import { device } from '/@/api/deviceManage';
|
||
|
||
export default defineComponent({
|
||
// eslint-disable-next-line vue/multi-word-component-names
|
||
name: 'Tree',
|
||
setup() {
|
||
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']>([
|
||
// {
|
||
// title: '3.电梯',
|
||
// value: '3',
|
||
// children: [
|
||
// {
|
||
// title: '301.扶梯',
|
||
// value: '301',
|
||
// },
|
||
// {
|
||
// title: '302.直梯',
|
||
// value: '302',
|
||
// },
|
||
// ],
|
||
// },
|
||
// {
|
||
// title: '4.冷热源',
|
||
// value: '4',
|
||
// children: [
|
||
// {
|
||
// title: '401.冷水机组',
|
||
// value: '401',
|
||
// },
|
||
// {
|
||
// title: '402.热泵机组',
|
||
// value: '402',
|
||
// },
|
||
// {
|
||
// title: '403.锅炉',
|
||
// value: '403',
|
||
// },
|
||
// {
|
||
// title: '404.水处理机组',
|
||
// value: '404',
|
||
// },
|
||
// ],
|
||
// },
|
||
]);
|
||
|
||
http.post(device.queryDeviceTree, { orgId: orgId.value }).then((res) => {
|
||
treeData1.value = formatTreeData(res.data);
|
||
});
|
||
|
||
const formatTreeData = (data) => {
|
||
return data.map((item) => ({
|
||
title: item.code + '.' + item.deviceType,
|
||
value: item.code,
|
||
children: item.children ? formatTreeData(item.children) : [],
|
||
}));
|
||
};
|
||
|
||
// const treeData2: TreeProps['treeData'] = [
|
||
const treeData2 = ref<TreeSelectProps['treeData']>([
|
||
// {
|
||
// title: 'AC_001(总电表)',
|
||
// key: '1',
|
||
// children: [
|
||
// {
|
||
// title: 'AC_002(暖通电表)',
|
||
// key: '2',
|
||
// },
|
||
// {
|
||
// title: 'AC_003(照明电表)',
|
||
// key: '3',
|
||
// },
|
||
// {
|
||
// title: 'AC_004(给排水电表)',
|
||
// key: '4',
|
||
// },
|
||
// {
|
||
// title: 'AC_005(通风电表)',
|
||
// key: '5',
|
||
// },
|
||
// {
|
||
// title: 'AC_006(电动门电表)',
|
||
// key: '6',
|
||
// },
|
||
// ],
|
||
// },
|
||
]);
|
||
|
||
const changeDeviceType = (val, label, extra) => {
|
||
http
|
||
.post(device.queryDevicePage, { code: val, orgId: orgId.value, pageNum: 1, pageSize: 10 })
|
||
.then((res) => {
|
||
if (!val) {
|
||
val = '999999999';
|
||
}
|
||
if (!label) {
|
||
label = ['所有设备'];
|
||
}
|
||
let records = res.data.records;
|
||
records.forEach((item: any) => {
|
||
(item.title = item.deviceModel + ' ' + item.deviceName), (item.key = item.id);
|
||
});
|
||
let a: TreeSelectProps['treeData'] = [{ title: label[0], key: val, children: records }];
|
||
treeData2.value = a;
|
||
expandedKeys.value = [val];
|
||
});
|
||
};
|
||
|
||
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>();
|
||
|
||
const getDianWeiList = () => {
|
||
console.log('getDianWeiList 被调用');
|
||
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 项电流' },
|
||
];
|
||
};
|
||
|
||
interface PageData {
|
||
tableList: any[];
|
||
tableColumns: any[];
|
||
graphList: any[];
|
||
}
|
||
const pageData = inject<PageData>('pageData');
|
||
if (!pageData) {
|
||
throw new Error('pageData is not provided');
|
||
}
|
||
// 查询数据后放入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',
|
||
},
|
||
],
|
||
},
|
||
];
|
||
};
|
||
|
||
type RangeValue = [Dayjs, Dayjs];
|
||
const dates = ref<RangeValue>();
|
||
const hackValue = ref<RangeValue>();
|
||
|
||
const onChange = (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;
|
||
};
|
||
|
||
onMounted(() => {
|
||
getDianWeiList();
|
||
changeDeviceType();
|
||
});
|
||
|
||
// const dateFormat = 'YYYY-MM-DD';
|
||
|
||
return {
|
||
treeLine,
|
||
showLeafIcon,
|
||
value,
|
||
treeData1,
|
||
treeData2,
|
||
expandedKeys,
|
||
selectedKeys,
|
||
checkedKeys,
|
||
options1,
|
||
options2,
|
||
selectedValue,
|
||
frequencyValue,
|
||
dateRange,
|
||
getDianWeiList,
|
||
getSelect,
|
||
getSelect11,
|
||
disabledDate,
|
||
onCalendarChange,
|
||
onOpenChange,
|
||
onChange,
|
||
hackValue,
|
||
pageData,
|
||
changeDeviceType,
|
||
};
|
||
},
|
||
});
|
||
</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;
|
||
height: 100%;
|
||
}
|
||
|
||
.fixed-bottom {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
margin-bottom: 10px;
|
||
}
|
||
</style>
|