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

1.监控中心 - 设备监测  根据UI设计图进行页面优化

Browse Source 
2.监控中心 - 能耗监测  根据UI设计图进行页面优化
3.监控中心 - 环境监测  修改bug，添加loading
This commit is contained in:
fks-yangshouda
2024-08-13 15:07:46 +08:00
parent 56c903ca86
commit 7bd8721e32
18 changed files with 818 additions and 645 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<template>
<a-row type="flex" style="height: 92%">
<a-row type="flex" style="height: 90%">
<a-col :span="8" style="height: 100%">
<div
style="
@@ -14,14 +14,16 @@
style="
padding-bottom: 10px;
width: 40%;
height: 4%;
padding-left: 30px;
height: 20%;
padding-right: 30px;
padding-top: 10px;
display: flex;
float: right;
">
<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>
<div ref="analysisGraphchart" style="width: 100%; height: 95%"></div>
<div ref="analysisGraphchart" style="width: 100%; height: 95%; padding-top: 10%"></div>
</div>
</a-col>
<a-col :span="16" style="height: 100%">
@@ -37,7 +39,7 @@
ref="analysisGraphBarchart"
style="
width: 98%;
height: 58%;
height: 57%;
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
margin: 1%;
"></div>
@@ -179,7 +181,7 @@
const option = {
grid: {
top: 60,
top: 80,
bottom: 20,
},
dataZoom: [
@@ -243,13 +245,22 @@
for (let i = 0; i < data.value.length; i++) {
dateX.push(data.value[i].name);
seriesdata.push({ value: data.value[i].value, name: data.value[i].name });
seriesdata.push({
value: data.value[i].value,
name: data.value[i].name,
radius: ['70%', '90%'],
});
}
var seriesList = [
{
// name: data.value[0].energyType,
data: seriesdata,
type: 'pie',
// // 可单选
selectedMode: true,
// 选中扇区的偏移距离
clockwise: '10',
// hoverAnimation: true,
// 圆环内径和外径
radius: ['70%', '90%'],
center: ['30%', '50%'], // 调整环形图的位置，百分比表示相对于容器的宽高
@@ -264,7 +275,7 @@
// formatter: '{b}',
position: 'outside', // 确保标签在环形图外部
// alignTo: 'edge',
formatter: '{c}' + data.value[0].energyUnit + '\n{d}%',
formatter: '{c}' + data.value[0].unit + '\n{d}%',
alignTo: 'labelLine',
distanceToLabelLine: 5, // 调整标签和引导线之间的距离
distance: 10, // 调整标签距离图形的距离
@@ -312,10 +323,12 @@
};
chartRight1 = echarts.init(analysisGraphRingchart.value);
chartRight1.setOption(option);
// chartRight1.setOption(option);
// 默认点击第一个
if (seriesdata.length > 0) {
seriesdata[0].radius = ['50%', '100%'];
chartRight1.setOption(option);
drawRight2(seriesdata[0]);
}
chartRight1.on('click', function (params) {
@@ -368,10 +381,10 @@
},
},
},
grid: {
top: 20,
bottom: 60,
},
// grid: {
// top: 20,
// bottom: 60,
// },
xAxis: {
type: 'category',
axisLine: { show: false },

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

@@ -4,6 +4,7 @@
:columns="columns"
:data-source="data"
bordered
:pagination="false"
:row-selection="rowSelection">
<template #bodyCell="{ column, record }">
<template v-if="column.title === '操作'">

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

@@ -69,12 +69,12 @@
// }
// }
seriesList.push({
name: data.value[i].deviceName,
name: data.value[i].name,
data: data.value[i].data,
type: 'line',
smooth: true,
});
legendList.push(data.value[i].deviceName);
legendList.push(data.value[i].name);
}
const option = {
legend: {

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

@@ -3,18 +3,34 @@
:columns="columns"
:data-source="data"
bordered
style="width: 100%"
style="width: 100%; height: 90%"
:pagination="false"
:scroll="{ x: '2000' }" />
<a-pagination
:total="total"
:show-total="(total, range) => ` 共 ${total} 条`"
show-size-changer
show-quick-jumper
@change="onChange"
style="display: flex; justify-content: right; margin-top: 10px; margin-right: 30px" />
</template>
<script lang="ts">
import { defineComponent, watch, inject, ref, onMounted } from 'vue';
import type { TableColumnType } from 'ant-design-vue';
import { Pagination } from 'ant-design-vue';
export default defineComponent({
name: 'EnvironmentTable',
// name: 'EnvironmentTable',
components: {
'a-pagination': Pagination,
},
setup() {
const total = ref<number>();
// 分页后的展示数据
let data = ref<any[]>([]);
// 原始数据
let dataList = ref<any[]>([]);
let columns = ref<TableColumnType[]>([]);
interface PageData {
@@ -72,7 +88,7 @@
const column: TableColumnType[] = [
{
title: '设备/组名',
dataIndex: 'deviceName',
dataIndex: 'name',
customCell: (record, rowIndex) => {
if (rowIndex == undefined) {
return {
@@ -80,8 +96,8 @@
colSpan: 0,
};
}
const rowSpan = getRowSpan('deviceName', record, data.value);
if (rowIndex != 0 && data.value[rowIndex - 1].deviceName == record.deviceName) {
const rowSpan = getRowSpan('name', record, data.value);
if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) {
return {
rowSpan: 0,
colSpan: 0,
@@ -102,8 +118,8 @@
colSpan: 0,
};
}
const rowSpan = getRowSpan('selectedValueName', record, data.value, ['deviceName']);
if (rowIndex != 0 && data.value[rowIndex - 1].deviceName == record.deviceName) {
const rowSpan = getRowSpan('selectedValueName', record, data.value, ['name']);
if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) {
return {
rowSpan: 0,
colSpan: 0,
@@ -116,8 +132,14 @@
},
];
// 分页器
const onChange = (pageNumber: number, size: number) => {
const start = (pageNumber - 1) * size;
const end = start + size;
data.value = dataList.value.slice(start, end);
};
const init = () => {
data.value = pageData.graphTableList;
dataList.value = pageData.graphTableList;
let columnA: any[] = [...column];
let columnB: any[] = [];
@@ -126,6 +148,8 @@
});
columnA.push(...columnB);
columns.value = columnA;
total.value = dataList.value.length;
onChange(1, 10);
};
onMounted(() => {
init();
@@ -139,6 +163,8 @@
data,
column,
columns,
total,
onChange,
};
},
});

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

@@ -1,10 +1,6 @@
<!-- eslint-disable vue/multi-word-component-names -->
<template>
<a-tabs v-model:activeKey="activeKey" style="height: 8%">
<a-tab-pane key="1" tab="图表" />
<a-tab-pane key="2" tab="分析" />
</a-tabs>
<a-row type="flex" style="height: 92%">
<a-row type="flex" style="height: 92%; display: flex; position: relative">
<a-col :span="4">
<div style="padding: 0 20px; width: 100%; height: 100%">
<tree ref="treeRef" />
@@ -12,19 +8,31 @@
</a-col>
<a-col :span="20">
<div style="width: 100%; height: 100%">
<div class="ns-right-title">
<span>统计数据</span>
<div class="button">
<ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
<ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" />
<div style="height: 22%">
<div class="ns-right-title">
<a-tabs
v-model:activeKey="activeKey"
style="height: 8%; width: 100%"
@change="changeActive">
<a-tab-pane key="1" tab="图表" />
<a-tab-pane key="2" tab="分析" />
</a-tabs>
<div class="button">
<ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
<ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" />
</div>
</div>
<span style="padding-left: 10px; line-height: 20px"
><ns-icon name="title" size="11" style="margin-right: 3px" />统计数据</span
>
</div>
<div v-if="activeKey == '1'" style="height: 90%; width: 100%">
<div v-if="activeKey == '1'" style="height: 82%; width: 100%">
<graph-graph ref="graphRef" v-if="isGraph" />
<environment-table ref="tableRef" v-else style="width: 100%" />
</div>
<div v-else style="height: 90%">
<analysis-graph ref="analysisGraphRef" v-if="isGraph" />
<div v-else style="height: 82%; width: 100%">
<analysis-graph ref="analysisGraphRef" v-if="isGraph" style="height: 100%; width: 100%" />
<analysis-table ref="analysisTableRef" v-else />
</div>
</div>
@@ -67,6 +75,13 @@
}
}
};
const changeActive = () => {
if (activeKey.value == '1') {
treeRef.value.getSelectGraph(activeKey.value);
} else {
treeRef.value.getSelectAnalyse(activeKey.value);
}
};
function change() {
isGraph.value = !isGraph.value;
@@ -80,21 +95,18 @@
<style lang="less" scoped>
.ns-right-title {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
user-select: text;
margin-bottom: 5px;
padding-bottom: 10px;
padding-top: 10px;
border-bottom: 1px solid #e9e9e9;
> span {
padding-left: 10px;
line-height: 20px;
}
// border-bottom: 1px solid #e9e9e9;
}
.button {
position: absolute;
right: 0;
display: inline-block;
padding-right: 10px;
}

330
hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
View File

@@ -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>