1.对接能耗监测接口

2.对接设备监测接口
3.修改设备监测表格序号列显示错误的bug
This commit is contained in:
fks-yangshouda
2024-07-23 14:42:17 +08:00
parent 9134cf4ac3
commit 79c56bb979
11 changed files with 347 additions and 716 deletions

View File

@@ -15,15 +15,15 @@
v-model:value="mode"
@change="changeMode"
style="padding-bottom: 10px; width: 100%">
<a-radio-button value="1" style="width: 50%; text-align: center" :disabled="shebei">
<a-radio-button value="0" style="width: 50%; text-align: center" :disabled="shebei">
设备
</a-radio-button>
<a-radio-button value="2" style="width: 50%; text-align: center">节点</a-radio-button>
<a-radio-button value="1" style="width: 50%; text-align: center">节点</a-radio-button>
</a-radio-group>
<a-input
v-model:value="deviceName"
placeholder="请输入设备名称"
v-if="mode == '1'"
v-if="mode == '0'"
@change="changeMode" />
<a-input v-model:value="pointName" placeholder="请输入节点名称" v-else @change="changeMode" />
<a-spin :spinning="treeLoading">
@@ -34,7 +34,21 @@
checkable
:height="300"
style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
:tree-data="treeData2" />
:tree-data="treeData2">
<!-- <template #title="{ title }">
<span v-if="title.indexOf(mode == '0' ? deviceName : pointName) > -1">
{{ title.substr(0, title.indexOf(mode == '0' ? deviceName : pointName)) }}
<span style="color: #f50">{{ mode == '0' ? deviceName : pointName }}</span>
{{
title.substr(
title.indexOf(mode == '0' ? deviceName : pointName) +
(mode == '0' ? deviceName : pointName).length,
)
}}
</span>
<span v-else>{{ title }}</span>
</template> -->
</a-tree>
</a-spin>
<div class="fixed-bottom">
@@ -48,20 +62,9 @@
style="width: 100%; margin-bottom: 10px"
v-model:value="dateValue"
:picker="dateTypeValue" />
<!-- <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>
@@ -69,9 +72,10 @@
<script lang="ts">
import type { TreeSelectProps, SelectProps } from 'ant-design-vue';
import { defineComponent, ref, onMounted, inject } from 'vue';
import { Dayjs } from 'dayjs';
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';
export default defineComponent({
@@ -95,20 +99,20 @@
const options1 = ref<SelectProps['options']>([]);
// 日期类型list
const options2 = ref<SelectProps['options']>([]);
const mode = ref<String>('1');
const mode = ref<String>('0');
// 能耗类型
const selectedValue = ref<string | number | null | undefined>();
// 日期类型
const dateTypeValue = ref<string | undefined>();
const dateTypeValue = ref<string | undefined>('month');
// 时间
const dateValue = ref<[Dayjs, Dayjs] | undefined>();
const dateValue = ref<Dayjs | undefined>(dayjs());
// 页面初始化参数
const getOptionsList = async () => {
try {
const options = await dict({ params: { dicKey: 'ENERGY_TYPE' } });
options.data.data.forEach((item: any) => {
(item.value = item.cnValue), (item.label = item.cnValue);
(item.value = item.dicKey), (item.label = item.cnValue);
});
options1.value = options.data.data; // 根据返回数据的结构来更新 options1.value
if (options1.value) {
@@ -149,452 +153,70 @@
const changeEnergyType = () => {
if (selectedValue.value == '碳排量') {
shebei.value = true;
mode.value = '2';
mode.value = '1';
} else {
shebei.value = false;
}
changeMode();
};
const getSelect = () => {
pageData.graphTableList = [
{
key: '1',
name: 'AC_002暖通电表',
paramName: '用电量(kWh)',
date: '2023-12-01',
'1:00': '3626',
},
{
key: '1',
name: 'AC_002暖通电表',
paramName: '用电量(kWh)',
date: '2023-12-01',
'1:00': '3626',
},
{
key: '2',
name: 'AC_003照明电表',
paramName: '用电量(kWh)',
date: '2023-12-01',
'1:00': '3626',
},
{
key: '2',
name: 'AC_003照明电表',
paramName: '用电量(kWh)',
date: '2023-12-01',
'1:00': '3626',
},
{
key: '3',
name: 'AC_004给排水电表',
paramName: '用电量(kWh)',
date: '2023-12-01',
'1:00': '3626',
},
];
pageData.graphTableColumns = [
{
title: '日期',
dataIndex: 'date',
},
{
title: '1:00',
dataIndex: '1:00',
},
];
pageData.graphGraphList = [
{
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',
},
],
},
];
pageData.analysisTableList = [
{
key: '1',
name: 'AC_002暖通电表',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
},
{
key: '1',
name: 'AC_002暖通电表',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
},
{
key: '2',
name: 'AC_003照明电表',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
},
{
key: '2',
name: 'AC_003照明电表',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
},
{
key: '3',
name: 'AC_004给排水电表',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
},
];
pageData.analysisGraphList = [
{
name: 'AC_002暖通电表',
value: -21,
ringValue: 21,
const date = dateValue.value;
let year = 0;
let month = 0;
if (date) {
year = date.year();
month = date.month() + 1;
} else {
return;
}
// 图表数据
http
.post(energyMonitor.getDeviceOrNodeEnergyGraph, {
deviceName: deviceName.value,
energyType: selectedValue.value,
energyUnit: 'kWh',
unit: 'V',
labelRight: {
position: 'right',
},
},
{
name: 'AC_003照明电表',
value: 36,
ringValue: 36,
orgId: orgId.value,
dateType: dateTypeValue.value == 'year' ? 0 : 1, //0 年 1月
deviceInfoCodes: mode.value == '0' ? checkedKeys.value : [], // 设备需要传 device_info_code
energyQueryType: mode.value, // 0 设备 1 节点
month: month,
nodeIds: mode.value == '1' ? checkedKeys.value : [],
year: year,
})
.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;
});
// 分析数据
http
.post(energyMonitor.getDeviceOrNodeEnergyAnalyse, {
deviceName: deviceName.value,
energyType: selectedValue.value,
unit: 'V',
labelRight: {
position: 'insideLeft',
},
},
{
name: 'AC_004给排水电表',
value: -5,
ringValue: 5,
energyType: selectedValue.value,
unit: 'V',
labelRight: {
position: 'right',
},
},
{
name: 'AC_005给排水电表',
value: -25,
ringValue: 15,
energyType: selectedValue.value,
unit: 'V',
labelRight: {
position: 'right',
},
},
{
name: 'AC_006给排水电表',
value: 35,
ringValue: 30,
energyType: selectedValue.value,
unit: 'V',
labelRight: {
position: 'insideLeft',
},
},
{
name: 'AC_007给排水电表',
value: 15,
ringValue: 18,
energyType: selectedValue.value,
unit: 'V',
labelRight: {
position: 'insideLeft',
},
},
{
name: 'AC_008给排水电表',
value: -25,
ringValue: 41,
energyType: selectedValue.value,
unit: 'V',
labelRight: {
position: 'right',
},
},
{
name: 'AC_009给排水电表',
value: -5,
ringValue: 55,
energyType: selectedValue.value,
unit: 'V',
labelRight: {
position: 'right',
},
},
{
name: 'AC_0090给排水电表',
value: -5,
ringValue: 55,
energyType: selectedValue.value,
unit: 'V',
labelRight: {
position: 'right',
},
},
];
};
const getSelect11 = () => {
pageData.graphTableList = [
{
key: '1',
name: 'AC_002暖通电表',
paramName: '用电量(kWh)',
date: '2023-12-01',
'1:00': '3626',
'2:00': '3626',
},
{
key: '1',
name: 'AC_002暖通电表',
paramName: '用电量(kWh)',
date: '2023-12-01',
'1:00': '3626',
'2:00': '3626',
},
{
key: '2',
name: 'AC_003照明电表',
paramName: '用电量(kWh)',
date: '2023-12-01',
'1:00': '3626',
'2:00': '3626',
},
{
key: '2',
name: 'AC_003照明电表',
paramName: '用电量(kWh)',
date: '2023-12-01',
'1:00': '3626',
'2:00': '3626',
},
{
key: '3',
name: 'AC_004给排水电表',
paramName: '用电量(kWh)',
date: '2023-12-01',
'1:00': '3626',
'2:00': '3626',
},
];
pageData.graphTableColumns = [
{
title: '日期',
dataIndex: 'date',
},
{
title: '1:00',
dataIndex: '1:00',
},
{
title: '2:00',
dataIndex: '2:00',
},
];
pageData.graphGraphList = [
{
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_005333333333',
value: '22',
},
],
},
{
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_005333333333',
value: '28',
},
],
},
{
date: '2023-12-03 0:00',
unit: 'V',
data: [
{
name: 'AC_002暖通电表',
value: '18',
},
{
name: 'AC_003照明电表',
value: '22',
},
{
name: 'AC_004给排水电表',
value: '26',
},
{
name: 'AC_005333333333',
value: '44',
},
],
},
{
date: '2023-12-04 0:00',
unit: 'V',
data: [
{
name: 'AC_002暖通电表',
value: '40',
},
{
name: 'AC_003照明电表',
value: '15',
},
{
name: 'AC_004给排水电表',
value: '12',
},
{
name: 'AC_005333333333',
value: '26',
},
],
},
{
date: '2023-12-05 0:00',
unit: 'V',
data: [
{
name: 'AC_002暖通电表',
value: '15',
},
{
name: 'AC_003照明电表',
value: '18',
},
{
name: 'AC_004给排水电表',
value: '15',
},
{
name: 'AC_005333333333',
value: '35',
},
],
},
];
orgId: orgId.value,
dateType: dateTypeValue.value == 'year' ? 0 : 1, //0 年 1月
deviceInfoCodes: mode.value == '0' ? checkedKeys.value : [], // 设备需要传 device_info_code
energyQueryType: mode.value, // 0 设备 1 节点
month: month,
nodeIds: mode.value == '1' ? checkedKeys.value : [],
year: year,
})
.then((res) => {
pageData.analysisTableList = res.data.dataList;
pageData.analysisGraphList = res.data.dataList;
});
};
const orgId = ref('');
@@ -604,27 +226,29 @@
// 切换树结构
const changeMode = () => {
treeLoading.value = true;
if (mode.value == '1') {
if (mode.value == '0') {
http
.post(device.queryDevicePage, {
.post(group.queryDeviceToEnergy, {
deviceName: deviceName.value,
energyType: selectedValue.value,
orgId: orgId.value,
pageNum: 1,
pageSize: 9999,
// pageNum: 1,
// pageSize: 9999,
})
.then((res) => {
let val = '999999999';
let label = '所有设备';
let records = res.data.records;
let records = res.data;
records.forEach((item: any) => {
(item.title = item.deviceModel + ' ' + item.deviceName), (item.key = item.id);
(item.title = item.deviceNum), (item.key = item.deviceCode);
});
let a: TreeSelectProps['treeData'] = [{ title: label, key: val, children: records }];
treeData2.value = a;
expandedKeys.value = [val];
checkedKeys.value.push(records[0].deviceCode, records[1].deviceCode);
getSelect();
})
.finally(() => {
treeLoading.value = false;
@@ -687,16 +311,18 @@
}
};
// const onChange = (val: RangeValue) => {
// dateRange.value = val;
// };
const onCalendarChange = (val: RangeValue) => {
dates.value = val;
};
onMounted(() => {
getOptionsList();
changeMode();
// debugger;
// await checkedKeys.value.push(
// treeData2.value[0].children[0].deviceCode,
// treeData2.value[0].children[1].deviceCode,
// );
// debugger;
getSelect();
});
@@ -716,12 +342,10 @@
dateValue,
getOptionsList,
getSelect,
getSelect11,
changeMode,
disabledDate,
onCalendarChange,
onOpenChange,
// onChange,
hackValue,
treeLoading,
changeEnergyType,