1.对接能耗监测接口
2.对接设备监测接口 3.修改设备监测表格序号列显示错误的bug
This commit is contained in:
@@ -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_005(333333333)',
|
||||
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_005(333333333)',
|
||||
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_005(333333333)',
|
||||
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_005(333333333)',
|
||||
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_005(333333333)',
|
||||
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,
|
||||
|
Reference in New Issue
Block a user