xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

1.对接能耗监测接口

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

1
hx-ai-intelligent/src/api/deviceManage.ts
View File

@@ -28,4 +28,5 @@ export enum group {
queryFormula = `${BASE_URL}/deviceGroup/queryFormula`, // 公式查询
dropGroupFilter = `${BASE_URL}/deviceGroup/dropGroupFilter`, // 分组列表查询
dropGroupInfoFilter = `${BASE_URL}/deviceGroup/dropGroupInfoFilter`, // 计算列表查询
queryDeviceToEnergy = `${BASE_URL}/deviceGroup/queryDeviceToEnergy`, // 能耗监测用查询设备（能耗监测设备树）
}

21
hx-ai-intelligent/src/api/monitor.ts
View File

@@ -1,13 +1,14 @@
// 设备监测
export enum deviceMonitor {
// getTableList = '/carbon/emission/factor/queryCarbonFactorPage',
// addNewData = '/carbon/emission/factor/creatOrUpdate',
// editUser = '/carbon-smart/api/user/edit',
// frozen = '/carbon-smart/api/user/frozen',
// resetPwd = '/carbon-smart/api/user/resetPwd',
// del = '/carbon-smart/api/user/del',
// batchDel = '/carbon-smart/api/user/batchDel',
// getCarbonFactorTree = '/carbon/emission/type/getCarbonFactorTree',
// queryDeptTree = '/carbon-smart/api/user/queryDeptTree',
// queryUserPerList = '/carbon-smart/api/user/queryUserPerList',
getDeviceGraph = '/carbon-smart/api/monitor/getDeviceGraph',
getDevicePointToMonitor = '/carbon-smart//api/monitor/getDevicePointToMonitor',
}
// 能耗监测
export enum energyMonitor {
getDeviceOrNodeEnergyGraph = '/carbon-smart/api/monitor/getDeviceOrNodeEnergyGraph',
getDeviceOrNodeEnergyAnalyse = '/carbon-smart/api/monitor/getDeviceOrNodeEnergyAnalyse',
}
// 环境监测
export enum environmentMonitor {}

13
hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
View File

@@ -69,11 +69,18 @@
{
title: '序号',
customRender: ({ record, index }) => {
debugger;
// 自定义单元格内容，这里返回序号
if (index == 0 || data.value[index - 1].deviceName == record.deviceName) {
return index + 1;
if (index == 0) {
data.value[index].index = 1;
// return 1;
} else if (data.value[index - 1].deviceName == record.deviceName) {
data.value[index].index = data.value[index - 1].index;
// return data.value[index].index;
} else {
data.value[index].index = data.value[index - 1].index + 1;
}
return index;
return data.value[index].index;
},
customCell: (record, rowIndex) => {
if (rowIndex == undefined) {

229
hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
View File

@@ -52,12 +52,13 @@
<script lang="ts">
import type { TreeSelectProps, SelectProps } from 'ant-design-vue';
import { defineComponent, ref, onMounted } from 'vue';
import { defineComponent, ref, onMounted, watch } from 'vue';
import { Dayjs } from 'dayjs';
import { inject } from 'vue';
import { http } from '/nerv-lib/util';
import { device } from '/@/api/deviceManage';
import { deviceMonitor } from '/@/api/monitor';
import { Item } from 'ant-design-vue/lib/menu';
export default defineComponent({
// eslint-disable-next-line vue/multi-word-component-names
@@ -106,7 +107,8 @@
}
let records = res.data.records;
records.forEach((item: any) => {
(item.title = item.deviceModel + ' ' + item.deviceName), (item.key = item.id);
(item.title = item.snCode + '（' + item.deviceName + '）'),
(item.key = item.deviceInfoCode);
});
let a: TreeSelectProps['treeData'] = [{ title: label[0], key: val, children: records }];
treeData2.value = a;
@@ -145,16 +147,34 @@
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 项电流' },
];
if (checkedKeys.value && checkedKeys.value.length > 0) {
http
.post(deviceMonitor.getDevicePointToMonitor, {
deviceIds: checkedKeys.value,
orgId: orgId.value,
})
.then((res) => {
if (res.retcode == 0) {
options1.value = [];
res.data.forEach((item: any) => {
options1.value?.push({ value: item.code, label: item.name });
});
}
// options1.value = res.data;
});
} else {
options1.value = [];
}
// 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 {
@@ -171,11 +191,11 @@
const getSelect = () => {
http
.post(deviceMonitor.getDeviceGraph, {
deviceIds: ['HLlmTZp8-0601-0001', 'HLlmTZp-0804-0001'],
devicePointCode: 'ua',
devicePointId: 32,
endDate: '2024-07-02',
startDate: '2024-07-01',
deviceIds: checkedKeys.value,
devicePointCode: selectedValue.value,
endDate: endDate.value,
startDate: startDate.value,
timeRate: '2',
})
.then((res) => {
@@ -185,172 +205,20 @@
pageData.graphList = res.data.graphData;
pageData.XData = res.data.XData;
});
// 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: '00:00',
// dataIndex: '00: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',
// },
// ],
// },
// ];
};
type RangeValue = [Dayjs, Dayjs];
const dates = ref<RangeValue>();
const hackValue = ref<RangeValue>();
const startDate = ref<String>();
const endDate = ref<String>();
const onChange = (val: RangeValue) => {
const onChange = (val: RangeValue, dateStrings: any) => {
dateRange.value = val;
if (dateStrings && dateStrings.length === 2) {
startDate.value = dateStrings[0];
endDate.value = dateStrings[1];
}
};
const onOpenChange = (open: boolean) => {
if (open) {
@@ -373,10 +241,17 @@
};
onMounted(() => {
getDianWeiList();
changeDeviceType(null, null);
getSelect();
});
// 监听 pageData 的变化
watch(
() => checkedKeys,
(_newValue, _oldValue) => {
getDianWeiList();
},
{ deep: true },
);
return {
treeLine,

62
hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<a-row type="flex" style="height: 92%">
<a-col :span="8">
<a-col :span="8" style="height: 100%">
<div
style="
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5); /* 灰色阴影 */
@@ -24,7 +24,7 @@
<div ref="analysisGraphchart" style="width: 100%; height: 95%"></div>
</div>
</a-col>
<a-col :span="16">
<a-col :span="16" style="height: 100%">
<div
ref="analysisGraphRingchart"
style="
@@ -83,7 +83,14 @@
},
{ deep: true },
);
const changeMode = () => {};
const changeMode = () => {
// if (mode.value == '1') {
// mode.value = '2';
// } else {
// mode.value = '1';
// }
drawLeft();
};
const analysisGraphchart = ref(null);
const analysisGraphRingchart = ref(null);
const analysisGraphBarchart = ref(null);
@@ -97,7 +104,22 @@
let chartRight2: echarts.ECharts | null = null;
const draw = () => {
data.value = pageData.analysisGraphList;
// 深度拷贝
let dataList = JSON.parse(JSON.stringify(pageData.analysisGraphList));
// let dataList = pageData.analysisGraphList;
dataList.forEach((item) => {
if (item.yoyValue < 0) {
item.yoyLabel = { position: 'right' };
} else {
item.yoyLabel = { position: 'insideLeft' };
}
if (item.momValue < 0) {
item.momLabel = { position: 'right' };
} else {
item.momLabel = { position: 'insideLeft' };
}
});
data.value = dataList;
// 绘制左侧图
drawLeft();
drawRight1();
@@ -111,10 +133,35 @@
var seriesdata = [];
var dateX = [];
// {
// name: 'AC_002（暖通电表）',
// value: -21,
// ringValue: 21,
// energyType: selectedValue.value,
// energyUnit: 'kWh',
// unit: 'V',
// labelRight: {
// position: 'right',
// },
// },
// id: 'HLlmTZp8_0805_0001';
// momDiff: 38.28; 环比差值
// momRate: '-171.58%'; 环比率
// momValue: -22.31; 环比值
// name: '总电表';
// value: 10.56; 值
// yoyDiff: 38.28; 同比差值
// yoyRate: '-138.10%'; 同比率
// yoyValue: -27.72; 同比值
for (let i = 0; i < data.value.length; i++) {
dateX.push(data.value[i].name);
seriesdata.push({ value: data.value[i].value, label: data.value[i].labelRight });
if (mode.value == '1') {
seriesdata.push({ value: data.value[i].yoyValue, label: data.value[i].yoyLabel });
} else {
seriesdata.push({ value: data.value[i].momValue, label: data.value[i].momLabel });
}
}
var seriesList = [
@@ -196,7 +243,7 @@
for (let i = 0; i < data.value.length; i++) {
dateX.push(data.value[i].name);
seriesdata.push({ value: data.value[i].ringValue, name: data.value[i].name });
seriesdata.push({ value: data.value[i].value, name: data.value[i].name });
}
var seriesList = [
{
@@ -294,11 +341,10 @@
data.value.forEach((item) => {
if (item.name !== auxiliary.name) {
dateX.push(item.name);
showData.push(item.ringValue);
showData.push(item.value);
compareData.push(auxiliary.value);
}
});
const option = {
// 图例
legend: {

76
hx-ai-intelligent/src/view/monitor/energyMonitor/analysisTable/index.vue
View File

@@ -1,5 +1,18 @@
<template>
<a-table :columns="columns" :data-source="data" bordered />
<a-table
row-key="id"
:columns="columns"
:data-source="data"
bordered
:row-selection="rowSelection">
<template #bodyCell="{ column, record }">
<template v-if="column.title === '操作'">
<a-button type="link" @click="setStandard(record)" v-if="record.id != selectedKey[0]"
>设为目标值</a-button
>
</template>
</template>
</a-table>
</template>
<script lang="ts">
@@ -8,25 +21,35 @@
export default defineComponent({
name: 'AnalysisTable',
setup() {
const selectedKey = ref([]);
const rowSelection = {
type: 'radio',
selectedRowKeys: selectedKey,
// onChange: (selectedRowKeys: string[]) => {
// selectedKey.value = selectedRowKeys;
// debugger;
// },
};
const columns = [
{
title: '设备/节点',
dataIndex: 'key',
dataIndex: 'name',
},
{
title: '统计值',
dataIndex: 'name',
dataIndex: 'value',
},
{
title: '同比',
children: [
{
title: '△差值',
dataIndex: 'position',
dataIndex: 'yoyDiff',
},
{
title: '增长率',
dataIndex: 'unit',
dataIndex: 'yoyRate',
},
],
},
@@ -35,11 +58,11 @@
children: [
{
title: '△差值',
dataIndex: 'position',
dataIndex: 'momDiff',
},
{
title: '增长率',
dataIndex: 'unit',
dataIndex: 'momRate',
},
],
},
@@ -48,18 +71,18 @@
children: [
{
title: '△差值',
dataIndex: 'position',
dataIndex: 'zongxiangDiff',
},
{
title: '增长率',
dataIndex: 'unit',
dataIndex: 'zongxiangRate',
},
],
},
{
title: '操作',
dataIndex: 'date',
// dataIndex: 'date',
},
];
let data = ref<any[]>([]);
@@ -85,16 +108,45 @@
watch(
() => pageData as PageData,
(_newValue, _oldValue) => {
data.value = pageData.analysisTableList;
// 深度拷贝
data.value = JSON.parse(JSON.stringify(pageData.analysisTableList));
setStandard(data.value[0]);
},
{ deep: true },
);
onMounted(() => {
data.value = pageData.analysisTableList;
// 深度拷贝
data.value = JSON.parse(JSON.stringify(pageData.analysisTableList));
// selectedKey.value = [data.value[0]];
setStandard(data.value[0]);
});
const setStandard = (record: any) => {
selectedKey.value = [record.id];
data.value.forEach((item) => {
// id: 'HLlmTZp8_0805_0001';
// momDiff: 38.28; 环比差值
// momRate: '-171.58%'; 环比率
// momValue: -22.31; 环比值
// name: '总电表';
// value: 10.56; 值
// yoyDiff: 38.28; 同比差值
// yoyRate: '-138.10%'; 同比率
// yoyValue: -27.72; 同比值
if (item.id == record.id) {
item.zongxiangDiff = '——';
item.zongxiangRate = '——';
} else {
item.zongxiangDiff = (item.value - record.value).toFixed(2);
item.zongxiangRate = ((item.zongxiangDiff / record.value) * 100).toFixed(2) + '%';
}
});
};
return {
data,
columns,
rowSelection,
selectedKey,
setStandard,
};
},
});

41
hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
View File

@@ -48,26 +48,33 @@
}
chartInstance = echarts.init(graphGraphchart.value);
var seriesList = [];
var date = [];
var date = pageData.graphTableColumns;
var legendList: string | any[] = [];
for (let i = 0; i < data.value.length; i++) {
date.push(data.value[i].date);
// date.push(data.value[i].date);
for (let j = 0; j < data.value[i].data.length; j++) {
if (seriesList.length < j + 1) {
seriesList.push({
name: data.value[i].data[j].name,
data: [data.value[i].data[j].value],
type: 'line',
smooth: true,
});
} else {
seriesList[j].data.push(data.value[i].data[j].value);
}
if (legendList.length == 0 || legendList.length < j + 1) {
legendList.push(data.value[i].data[j].name);
}
}
// for (let j = 0; j < data.value[i].data.length; j++) {
// if (seriesList.length < j + 1) {
// seriesList.push({
// name: data.value[i].data[j].name,
// data: [data.value[i].data[j].value],
// type: 'line',
// smooth: true,
// });
// } else {
// seriesList[j].data.push(data.value[i].data[j].value);
// }
// if (legendList.length == 0 || legendList.length < j + 1) {
// legendList.push(data.value[i].data[j].name);
// }
// }
seriesList.push({
name: data.value[i].deviceName,
data: data.value[i].data,
type: 'line',
smooth: true,
});
legendList.push(data.value[i].deviceName);
}
const option = {
legend: {

48
hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue
View File

@@ -1,5 +1,10 @@
<template>
<a-table :columns="columns" :data-source="data" bordered />
<a-table
:columns="columns"
:data-source="data"
bordered
style="width: 100%"
:scroll="{ x: '2000' }" />
</template>
<script lang="ts">
@@ -33,13 +38,14 @@
watch(
() => pageData as PageData,
(_newValue, _oldValue) => {
data.value = pageData.graphTableList;
// data.value = pageData.graphTableList;
let columnA: any[] = [...column];
columnA.push(...pageData.graphTableColumns);
columns.value = columnA;
// pageData.graphList;
// 执行你的逻辑代码
// let columnA: any[] = [...column];
// columnA.push(...pageData.graphTableColumns);
// columns.value = columnA;
// // pageData.graphList;
// // 执行你的逻辑代码
init();
},
{ deep: true },
);
@@ -66,7 +72,7 @@
const column: TableColumnType[] = [
{
title: '设备/组名',
dataIndex: 'name',
dataIndex: 'deviceName',
customCell: (record, rowIndex) => {
if (rowIndex == undefined) {
return {
@@ -74,8 +80,8 @@
colSpan: 0,
};
}
const rowSpan = getRowSpan('name', record, data.value);
if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) {
const rowSpan = getRowSpan('deviceName', record, data.value);
if (rowIndex != 0 && data.value[rowIndex - 1].deviceName == record.deviceName) {
return {
rowSpan: 0,
colSpan: 0,
@@ -88,7 +94,7 @@
},
{
title: '参数名称',
dataIndex: 'paramName',
dataIndex: 'selectedValueName',
customCell: (record, rowIndex) => {
if (rowIndex == undefined) {
return {
@@ -96,8 +102,8 @@
colSpan: 0,
};
}
const rowSpan = getRowSpan('paramName', record, data.value, ['name']);
if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) {
const rowSpan = getRowSpan('selectedValueName', record, data.value, ['deviceName']);
if (rowIndex != 0 && data.value[rowIndex - 1].deviceName == record.deviceName) {
return {
rowSpan: 0,
colSpan: 0,
@@ -110,12 +116,24 @@
},
];
onMounted(() => {
const init = () => {
data.value = pageData.graphTableList;
let columnA: any[] = [...column];
columnA.push(...pageData.graphTableColumns);
let columnB: any[] = [];
pageData.graphTableColumns.forEach((item) => {
columnB.push({ title: item, dataIndex: item });
});
columnA.push(...columnB);
columns.value = columnA;
};
onMounted(() => {
init();
// data.value = pageData.graphTableList;
// let columnA: any[] = [...column];
// columnA.push(...pageData.graphTableColumns);
// columns.value = columnA;
// index.value = 0;
});
return {
data,

4
hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
View File

@@ -19,9 +19,9 @@
<ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" />
</div>
</div>
<div v-if="activeKey == '1'" style="height: 90%">
<div v-if="activeKey == '1'" style="height: 90%; width: 100%">
<graph-graph ref="graphRef" v-if="isGraph" />
<environment-table ref="tableRef" v-else />
<environment-table ref="tableRef" v-else style="width: 100%" />
</div>
<div v-else style="height: 90%">
<analysis-graph ref="analysisGraphRef" v-if="isGraph" />

564
hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
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_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,

4
hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
View File

@@ -1,8 +1,8 @@
<template>
<a-tabs v-model:activeKey="activeKey" style="height: 5%">
<a-tab-pane key="1" tab="综合数据" />
<a-tab-pane key="2" tab="历史数据" force-render>Content of Tab Pane 2</a-tab-pane>
<a-tab-pane key="3" tab="平均数据">Content of Tab Pane 3</a-tab-pane>
<a-tab-pane key="2" tab="历史数据" force-render />
<a-tab-pane key="3" tab="平均数据" />
</a-tabs>
<aggregate-data ref="aggregateDataRef" v-if="activeKey == '1'" style="height: 85%" />