331 lines
8.6 KiB
Vue
331 lines
8.6 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"
|
||
|
|
>
|
||
|
|
</a-tree-select> -->
|
||
|
|
<a-select
|
||
|
|
ref="select"
|
||
|
|
v-model:value="selectedValue"
|
||
|
|
placeholder="请选择能耗类型"
|
||
|
|
style="width: 100%; margin-bottom: 10px"
|
||
|
|
:options="options1" />
|
||
|
|
|
||
|
|
<a-radio-group
|
||
|
|
v-model:value="mode"
|
||
|
|
@change="changeMode"
|
||
|
|
style="padding-bottom: 10px; width: 100%">
|
||
|
|
<a-radio-button value="1" style="width: 50%; text-align: center">设备</a-radio-button>
|
||
|
|
<a-radio-button value="2" style="width: 50%; text-align: center">节点</a-radio-button>
|
||
|
|
</a-radio-group>
|
||
|
|
<a-input v-model:value="value" placeholder="请输入设备名称" v-if="mode == '1'" />
|
||
|
|
<a-input v-model:value="value" placeholder="请输入节点名称" v-else />
|
||
|
|
<a-tree
|
||
|
|
v-model:expandedKeys="expandedKeys"
|
||
|
|
v-model:selectedKeys="selectedKeys"
|
||
|
|
v-model:checkedKeys="checkedKeys"
|
||
|
|
checkable
|
||
|
|
:height="300"
|
||
|
|
style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
|
||
|
|
:tree-data="treeData2" />
|
||
|
|
|
||
|
|
<div class="fixed-bottom">
|
||
|
|
<a-divider />
|
||
|
|
<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
|
||
|
|
>
|
||
|
|
</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';
|
||
|
|
|
||
|
|
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 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',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']);
|
||
|
|
const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
|
||
|
|
const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
|
||
|
|
|
||
|
|
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 mode = ref<String>('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: '用电量' },
|
||
|
|
{ value: '2', label: '用水量' },
|
||
|
|
{ value: '3', label: '碳排量' },
|
||
|
|
{ value: '4', label: '标煤量' },
|
||
|
|
];
|
||
|
|
};
|
||
|
|
|
||
|
|
const getSelect = () => {};
|
||
|
|
|
||
|
|
const treeData2 = ref<TreeProps['treeData']>([]);
|
||
|
|
const changeMode = () => {
|
||
|
|
if (mode.value == '1') {
|
||
|
|
treeData2.value = [
|
||
|
|
{
|
||
|
|
title: 'AC_001(总电表)',
|
||
|
|
key: '101',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
title: 'AC_002(暖通电表)',
|
||
|
|
key: '102',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'AC_003(照明电表)',
|
||
|
|
key: '103',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'AC_004(给排水电表)',
|
||
|
|
key: '104',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'AC_005(通风电表)',
|
||
|
|
key: '105',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'AC_006(电动门电表)',
|
||
|
|
key: '106',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
} else {
|
||
|
|
treeData2.value = [
|
||
|
|
{
|
||
|
|
title: '功能分项',
|
||
|
|
key: '1',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
title: '照明',
|
||
|
|
key: '2',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
title: '站台照明',
|
||
|
|
key: '3',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '站厅照明',
|
||
|
|
key: '4',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '应急照明',
|
||
|
|
key: '5',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '广告照明',
|
||
|
|
key: '6',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '暖通',
|
||
|
|
key: '7',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '排放',
|
||
|
|
key: '8',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '给排水',
|
||
|
|
key: '9',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '光伏',
|
||
|
|
key: '10',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '电梯',
|
||
|
|
key: '11',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '电动门',
|
||
|
|
key: '12',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
type RangeValue = [Dayjs, Dayjs];
|
||
|
|
const dates = ref<RangeValue>();
|
||
|
|
const hackValue = ref<RangeValue>();
|
||
|
|
|
||
|
|
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 onOpenChange = (open: boolean) => {
|
||
|
|
if (open) {
|
||
|
|
dates.value = [] as any;
|
||
|
|
hackValue.value = [] as any;
|
||
|
|
} else {
|
||
|
|
hackValue.value = undefined;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const onChange = (val: RangeValue) => {
|
||
|
|
dateRange.value = val;
|
||
|
|
};
|
||
|
|
|
||
|
|
const onCalendarChange = (val: RangeValue) => {
|
||
|
|
dates.value = val;
|
||
|
|
};
|
||
|
|
onMounted(() => {
|
||
|
|
getDianWeiList();
|
||
|
|
changeMode();
|
||
|
|
});
|
||
|
|
|
||
|
|
// const dateFormat = 'YYYY-MM-DD';
|
||
|
|
|
||
|
|
return {
|
||
|
|
// treeLine,
|
||
|
|
// showLeafIcon,
|
||
|
|
value,
|
||
|
|
treeData1,
|
||
|
|
treeData2,
|
||
|
|
expandedKeys,
|
||
|
|
selectedKeys,
|
||
|
|
checkedKeys,
|
||
|
|
options1,
|
||
|
|
options2,
|
||
|
|
mode,
|
||
|
|
selectedValue,
|
||
|
|
frequencyValue,
|
||
|
|
dateRange,
|
||
|
|
getDianWeiList,
|
||
|
|
getSelect,
|
||
|
|
changeMode,
|
||
|
|
disabledDate,
|
||
|
|
onCalendarChange,
|
||
|
|
onOpenChange,
|
||
|
|
onChange,
|
||
|
|
hackValue,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</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>
|