|
|
|
@ -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> |
|
|
|
|
fks-yangshouda
3 months ago
