isoftstone/lc_frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

动环接口对接

Browse Source
This commit is contained in:
chenlin
2025-12-12 09:09:41 +08:00
parent 268645ed62
commit ad45c913d8
2 changed files with 227 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/api/index.ts
View File

@@ -119,3 +119,23 @@ export const getTrainingManagementDataRegion = (data) => {
export const getTrainingManagementDataPark = (data) => {
return request.post({ url: '/jeelowcode/report-data/list/kb_px_yq', data })
}
// 动环监控-总设备数 /jeelowcode/power_env_device_totol_num
export const getPowerEnvDeviceTotalNum = (data) => {
return request.post({ url: '/jeelowcode/power_env_device_totol_num', data })
}
// 动环监控-告警设备类型分布 /jeelowcode/power_env_device_alarm_distribution
export const getPowerEnvDeviceAlarmDistribution = (data) => {
return request.post({ url: '/jeelowcode/power_env_device_alarm_distribution', data })
}
// 动环监控-当月告警趋势 /jeelowcode/power_env_alarm_trend
export const getPowerEnvAlarmTrend = (data) => {
return request.post({ url: '/jeelowcode/power_env_alarm_trend', data })
}
// 动环监控-园区信息列表 /jeelowcode/power_env_device_group_type_campus
export const getPowerEnvDeviceGroupTypeCampus = (data) => {
return request.post({ url: '/jeelowcode/power_env_device_group_type_campus', data })
}

331
src/views/screen/powerMonitoring.vue
View File

@@ -18,7 +18,7 @@
<svg class="trend-icon" viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor">
<path d="M868 545.5L536.1 163a31.96 31.96 0 0 0-48.3 0L156 545.5a7.97 7.97 0 0 0 6 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z" />
</svg>
<span>较上月增长 {{ totalDevicesGrowth }}%</span>
<!-- <span>较上月增长 {{ totalDevicesGrowth }}%</span> -->
</div>
</div>
@@ -127,6 +127,12 @@
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import type { EChartsOption } from 'echarts';
import {
getPowerEnvDeviceTotalNum,
getPowerEnvDeviceAlarmDistribution,
getPowerEnvAlarmTrend,
getPowerEnvDeviceGroupTypeCampus
} from '@/api/index';
// 定义园区信息类型
interface ParkInfo {
@@ -144,10 +150,9 @@ interface ParkInfo {
const currentDateTime = ref('');
// 统计数据
const totalDevices = ref(1286);
const totalDevicesGrowth = ref(5.2);
const onlineDevices = ref(1254);
const onlineRate = ref(97.5);
const totalDevices = ref(0);
const onlineDevices = ref(0);
const onlineRate = ref(100); // 在线率写死100%
// 图表引用
const alarmTrendChartRef = ref<HTMLDivElement>();
@@ -172,118 +177,14 @@ const deviceTypeData = ref([
]);
// 园区信息列表数据
const parkList = ref<ParkInfo[]>([
{
key: '1',
parkName: '雄安总部',
totalDevices: 156,
upsStatus: '3个告警',
airConditionStatus: '正常',
temperatureStatus: '正常',
otherStatus: '正常',
hasAlarm: true
},
{
key: '2',
parkName: '恒毅大厦',
totalDevices: 98,
upsStatus: '正常',
airConditionStatus: '正常',
temperatureStatus: '正常',
otherStatus: '正常',
hasAlarm: false
},
{
key: '3',
parkName: '丰台创新中心',
totalDevices: 124,
upsStatus: '正常',
airConditionStatus: '正常',
temperatureStatus: '正常',
otherStatus: '正常',
hasAlarm: false
},
{
key: '4',
parkName: '重庆产业大厦',
totalDevices: 92,
upsStatus: '正常',
airConditionStatus: '2个告警',
temperatureStatus: '正常',
otherStatus: '正常',
hasAlarm: true
},
{
key: '5',
parkName: '海南园区',
totalDevices: 78,
upsStatus: '正常',
airConditionStatus: '正常',
temperatureStatus: '正常',
otherStatus: '正常',
hasAlarm: false
},
{
key: '6',
parkName: '崇左地面站',
totalDevices: 64,
upsStatus: '正常',
airConditionStatus: '正常',
temperatureStatus: '正常',
otherStatus: '正常',
hasAlarm: false
},
{
key: '7',
parkName: '铜川地面站',
totalDevices: 58,
upsStatus: '正常',
airConditionStatus: '正常',
temperatureStatus: '正常',
otherStatus: '正常',
hasAlarm: false
},
{
key: '8',
parkName: '佳木斯地面站',
totalDevices: 72,
upsStatus: '正常',
airConditionStatus: '正常',
temperatureStatus: '正常',
otherStatus: '正常',
hasAlarm: false
},
{
key: '9',
parkName: '库尔勒地面站',
totalDevices: 68,
upsStatus: '正常',
airConditionStatus: '正常',
temperatureStatus: '正常',
otherStatus: '正常',
hasAlarm: false
},
{
key: '10',
parkName: '澄迈地面站',
totalDevices: 56,
upsStatus: '正常',
airConditionStatus: '正常',
temperatureStatus: '正常',
otherStatus: '正常',
hasAlarm: false
},
{
key: '11',
parkName: '文昌地面站',
totalDevices: 60,
upsStatus: '正常',
airConditionStatus: '正常',
temperatureStatus: '正常',
otherStatus: '正常',
hasAlarm: false
}
]);
const parkList = ref<ParkInfo[]>([]);
// 分页参数
const parkListPage = ref({
pageNo: 1,
pageSize: 10,
total: 0
});
// 更新日期时间
const updateDateTime = () => {
@@ -298,10 +199,17 @@ const updateDateTime = () => {
};
// 初始化告警趋势图表
const initAlarmTrendChart = () => {
const initAlarmTrendChart = (yAxisMax: number = 25) => {
if (!alarmTrendChartRef.value) return;
if (!alarmTrendChart) {
alarmTrendChart = echarts.init(alarmTrendChartRef.value);
}
// 计算峰值点（找出最大值）
const maxValue = Math.max(...alarmTrendData.value.values, 0);
const maxIndex = alarmTrendData.value.values.indexOf(maxValue);
const markPointData = maxValue > 0 ? [{ name: '峰值', coord: [maxIndex, maxValue] }] : [];
const option: EChartsOption = {
grid: {
@@ -334,8 +242,8 @@ const initAlarmTrendChart = () => {
yAxis: {
type: 'value',
min: 0,
max: 25,
interval: 5,
max: yAxisMax,
interval: yAxisMax / 5,
axisLine: {
show: false
},
@@ -384,10 +292,7 @@ const initAlarmTrendChart = () => {
borderWidth: 2,
borderColor: '#ff5555'
},
data: [
{ name: '峰值1', coord: [2, 20] }, // 15日的告警峰值
{ name: '峰值2', coord: [4, 21] } // 25日的告警峰值
]
data: markPointData
}
}
]
@@ -396,11 +301,54 @@ const initAlarmTrendChart = () => {
alarmTrendChart.setOption(option);
};
// 更新告警趋势图表
const updateAlarmTrendChart = (yAxisMax: number = 25) => {
if (!alarmTrendChart) {
initAlarmTrendChart(yAxisMax);
return;
}
// 计算峰值点
const maxValue = Math.max(...alarmTrendData.value.values, 0);
const maxIndex = alarmTrendData.value.values.indexOf(maxValue);
const markPointData = maxValue > 0 ? [{ name: '峰值', coord: [maxIndex, maxValue] }] : [];
alarmTrendChart.setOption({
xAxis: {
data: alarmTrendData.value.dates
},
yAxis: {
max: yAxisMax,
interval: yAxisMax / 5
},
series: [
{
data: alarmTrendData.value.values,
markPoint: {
data: markPointData
}
}
]
});
};
// 初始化设备类型分布饼图
const initDeviceTypePieChart = () => {
if (!deviceTypePieChartRef.value) return;
if (!deviceTypePieChart) {
deviceTypePieChart = echarts.init(deviceTypePieChartRef.value);
}
updateDeviceTypePieChart();
};
// 更新设备类型分布饼图
const updateDeviceTypePieChart = () => {
if (!deviceTypePieChart) {
initDeviceTypePieChart();
return;
}
const total = deviceTypeData.value.reduce((sum, item) => sum + item.value, 0);
@@ -484,19 +432,150 @@ const handleViewDetail = (record: ParkInfo) => {
// TODO: 实现详情页面跳转或弹窗
};
// 获取总设备数
const fetchTotalDevices = async () => {
try {
const params = {
pageNo: 1,
pageSize: 10
};
const response = await getPowerEnvDeviceTotalNum(params);
if (response.code === 0 && response.data?.records?.length > 0) {
const total = parseInt(response.data.records[0].total || '0', 10);
totalDevices.value = total;
onlineDevices.value = total; // 在线设备数也用total
}
} catch (error) {
console.error('获取总设备数失败:', error);
}
};
// 获取告警设备类型分布
const fetchAlarmDistribution = async () => {
try {
const params = {
pageNo: 1,
pageSize: 10
};
const response = await getPowerEnvDeviceAlarmDistribution(params);
if (response.code === 0 && response.data?.records?.length > 0) {
const record = response.data.records[0];
deviceTypeData.value = [
{ name: 'UPS', value: parseInt(record.ups_num || '0', 10) },
{ name: '精密空调', value: parseInt(record.jmkt_num || '0', 10) },
{ name: '温湿度检测', value: parseInt(record.wsd_num || '0', 10) },
{ name: '其他', value: parseInt(record.other_num || '0', 10) }
];
// 更新饼图
updateDeviceTypePieChart();
}
} catch (error) {
console.error('获取告警设备类型分布失败:', error);
}
};
// 获取当月告警趋势
const fetchAlarmTrend = async () => {
try {
const params = {
pageNo: 1,
pageSize: 100 // 可能需要获取更多数据
};
const response = await getPowerEnvAlarmTrend(params);
if (response.code === 0 && response.data?.records?.length > 0) {
const records = response.data.records;
// 处理日期格式：从 "2025-12-10" 转换为 "10日"
const dates = records.map((item: any) => {
const date = new Date(item.alarm_date);
return `${date.getDate()}日`;
});
const values = records.map((item: any) => parseInt(item.alarm_count || '0', 10));
alarmTrendData.value = {
dates,
values
};
// 计算最大值用于设置y轴
const maxValue = Math.max(...values, 0);
const yAxisMax = maxValue > 0 ? Math.ceil(maxValue / 5) * 5 : 25;
// 更新折线图
updateAlarmTrendChart(yAxisMax);
}
} catch (error) {
console.error('获取当月告警趋势失败:', error);
}
};
// 格式化状态显示：如果数量>0显示"X个告警"，否则"正常"
const formatStatus = (count: string | number): string => {
const num = typeof count === 'string' ? parseInt(count || '0', 10) : count;
return num > 0 ? `${num}个告警` : '正常';
};
// 获取园区信息列表
const fetchParkList = async () => {
try {
const params = {
pageNo: parkListPage.value.pageNo,
pageSize: parkListPage.value.pageSize
};
const response = await getPowerEnvDeviceGroupTypeCampus(params);
if (response.code === 0 && response.data) {
parkListPage.value.total = response.data.total || 0;
if (response.data.records && response.data.records.length > 0) {
parkList.value = response.data.records.map((item: any) => {
const upsCount = parseInt(item.ups || '0', 10);
const jmktCount = parseInt(item.jmkt || '0', 10);
const wsdCount = parseInt(item.wsd || '0', 10);
const otherCount = parseInt(item.other || '0', 10);
const alarmCount = parseInt(item.alarm || '0', 10);
return {
key: item.campus_id || item.row_id,
parkName: item.campus_name || '',
totalDevices: parseInt(item.total || '0', 10),
upsStatus: formatStatus(upsCount),
airConditionStatus: formatStatus(jmktCount),
temperatureStatus: formatStatus(wsdCount),
otherStatus: formatStatus(otherCount),
hasAlarm: alarmCount > 0
};
});
} else {
parkList.value = [];
}
}
} catch (error) {
console.error('获取园区信息列表失败:', error);
}
};
// 定时器
let dateTimeTimer: number | null = null;
// 组件挂载
onMounted(() => {
onMounted(async () => {
// 更新日期时间
updateDateTime();
dateTimeTimer = window.setInterval(updateDateTime, 1000);
// 初始化图表
// 获取总设备数
fetchTotalDevices();
// 获取园区信息列表
fetchParkList();
// 初始化图表（先用默认数据）
setTimeout(() => {
initAlarmTrendChart();
initDeviceTypePieChart();
// 图表初始化后再获取数据并更新
fetchAlarmDistribution();
fetchAlarmTrend();
}, 100);
// 监听窗口大小变化