diff --git a/src/api/index.ts b/src/api/index.ts
index 9f98693..0fbefe4 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -118,4 +118,24 @@ export const getTrainingManagementDataRegion = (data) => {
// 数据看板-安全培训-园区 /jeelowcode/report-data/list/kb_px_yq
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 })
}
\ No newline at end of file
diff --git a/src/views/screen/powerMonitoring.vue b/src/views/screen/powerMonitoring.vue
index 6d92c6c..7137285 100644
--- a/src/views/screen/powerMonitoring.vue
+++ b/src/views/screen/powerMonitoring.vue
@@ -18,7 +18,7 @@
- 较上月增长 {{ totalDevicesGrowth }}%
+
@@ -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();
@@ -172,118 +177,14 @@ const deviceTypeData = ref([
]);
// 园区信息列表数据
-const parkList = ref([
- {
- 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([]);
+
+// 分页参数
+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;
- alarmTrendChart = echarts.init(alarmTrendChartRef.value);
+ 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;
- deviceTypePieChart = echarts.init(deviceTypePieChartRef.value);
+ 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);
// 监听窗口大小变化