Administrator
/
FenXiNspBackControl
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加折线

This commit is contained in:
zhangyue 2026-07-25 18:49:50 +08:00
parent 55ff382434
commit a42c3f5824
1 changed files with 688 additions and 633 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

271
src/views/appmana/datacenter/statistics.vue
View File

@ -86,14 +86,14 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, computed } from 'vue'; import { ref, onMounted, onBeforeUnmount, nextTick, computed } from 'vue';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { ReloadOutlined } from '@ant-design/icons-vue'; import { ReloadOutlined } from '@ant-design/icons-vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { getDeviceAlertStatistic, getAllDeviceList } from './datacenter.api'; import { getDeviceAlertStatistic, getAllDeviceList } from './datacenter.api';
const fetchCategoryOptions = () => { const fetchCategoryOptions = () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
getAllDeviceList({}) getAllDeviceList({})
.then((res) => { .then((res) => {
@ -108,10 +108,10 @@
reject(error); reject(error);
}); });
}); });
}; };
// ==================== 根据类别获取图表数据 ==================== // ==================== 根据类别获取图表数据 ====================
const fetchChartDataByCategory = (deployId, summaryMode, startTime) => { const fetchChartDataByCategory = (deployId, summaryMode, startTime) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const chartData = []; const chartData = [];
const dataMap = { const dataMap = {
@ -195,22 +195,22 @@
reject(error); reject(error);
}); });
}); });
}; };
// ==================== 数据状态 ==================== // ==================== 数据状态 ====================
const categoryOptions = ref([]); const categoryOptions = ref([]);
const categoryLoading = ref(false); const categoryLoading = ref(false);
const selectedCategory = ref(''); const selectedCategory = ref('');
const chartDataList = ref([]); const chartDataList = ref([]);
const loading = ref(false); const loading = ref(false);
const chartInstances = []; const chartInstances = [];
const chartRefs = {}; const chartRefs = {};
const selectedDimension = ref('dayhours'); const selectedDimension = ref('dayhours');
const selectedDate = ref(null); const selectedDate = ref(null);
// ==================== 根据统计模式动态计算日期格式 ==================== // ==================== 根据统计模式动态计算日期格式 ====================
const dateFormat = computed(() => { const dateFormat = computed(() => {
switch (selectedDimension.value) { switch (selectedDimension.value) {
case 'dayhours': case 'dayhours':
return 'YYYY-MM-DD'; return 'YYYY-MM-DD';
@ -221,9 +221,9 @@
default: default:
return 'YYYY-MM-DD'; return 'YYYY-MM-DD';
} }
}); });
const pickerType = computed(() => { const pickerType = computed(() => {
switch (selectedDimension.value) { switch (selectedDimension.value) {
case 'dayhours': case 'dayhours':
return 'date'; return 'date';
@ -234,9 +234,9 @@
default: default:
return 'date'; return 'date';
} }
}); });
const datePlaceholder = computed(() => { const datePlaceholder = computed(() => {
switch (selectedDimension.value) { switch (selectedDimension.value) {
case 'dayhours': case 'dayhours':
return '选择日期'; return '选择日期';
@ -247,27 +247,27 @@
default: default:
return '选择日期'; return '选择日期';
} }
}); });
// ==================== 下拉框筛选 ==================== // ==================== 下拉框筛选 ====================
const filterOption = (input, option) => { const filterOption = (input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0; return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
}; };
const getCategoryLabel = (value) => { const getCategoryLabel = (value) => {
const found = categoryOptions.value.find((item) => item.id === value); const found = categoryOptions.value.find((item) => item.id === value);
return found ? found.deployDes : value; return found ? found.deployDes : value;
}; };
// ==================== 设置图表 DOM 引用 ==================== // ==================== 设置图表 DOM 引用 ====================
const setChartRef = (el, index) => { const setChartRef = (el, index) => {
if (el) { if (el) {
chartRefs[index] = el; chartRefs[index] = el;
} }
}; };
// ==================== 加载下拉选项 ==================== // ==================== 加载下拉选项 ====================
const loadCategories = async () => { const loadCategories = async () => {
categoryLoading.value = true; categoryLoading.value = true;
try { try {
const res = await fetchCategoryOptions(); const res = await fetchCategoryOptions();
@ -282,12 +282,15 @@
} finally { } finally {
categoryLoading.value = false; categoryLoading.value = false;
} }
}; };
// ==================== 加载图表数据（参数名：deployId, summaryMode, startTime） ==================== // ==================== 加载图表数据（参数名：deployId, summaryMode, startTime） ====================
const loadChartData = async (deployId, summaryMode, startTime) => { const loadChartData = async (deployId, summaryMode, startTime) => {
if (!deployId) return; if (!deployId) return;
// ✅ 先清空数据，让 tag 显示 0 项
chartDataList.value = [];
loading.value = true; loading.value = true;
try { try {
// 格式化日期 // 格式化日期
@ -312,19 +315,19 @@
} finally { } finally {
loading.value = false; loading.value = false;
} }
}; };
// ==================== 查询（收集所有参数） ==================== // ==================== 查询（收集所有参数） ====================
const handleSearch = () => { const handleSearch = () => {
if (!selectedCategory.value) { if (!selectedCategory.value) {
message.warning('请先选择设备'); message.warning('请先选择设备');
return; return;
} }
loadChartData(selectedCategory.value, selectedDimension.value, selectedDate.value); loadChartData(selectedCategory.value, selectedDimension.value, selectedDate.value);
}; };
// ==================== 初始化所有图表 ==================== // ==================== 初始化所有图表 ====================
const initCharts = () => { const initCharts = () => {
chartInstances.forEach((instance) => { chartInstances.forEach((instance) => {
if (instance._resizeHandler) { if (instance._resizeHandler) {
window.removeEventListener('resize', instance._resizeHandler); window.removeEventListener('resize', instance._resizeHandler);
@ -356,16 +359,16 @@
window.addEventListener('resize', resizeHandler); window.addEventListener('resize', resizeHandler);
chart._resizeHandler = resizeHandler; chart._resizeHandler = resizeHandler;
}); });
}; };
// ==================== 保留两位小数 ==================== // ==================== 保留两位小数 ====================
const roundToTwo = (num) => { const roundToTwo = (num) => {
if (num === undefined || num === null || isNaN(num)) return num; if (num === undefined || num === null || isNaN(num)) return num;
return Math.round(num * 100) / 100; return Math.round(num * 100) / 100;
}; };
// ==================== 计算 y 轴范围（确保 markLine 可见） ==================== // ==================== 计算 y 轴范围（确保 markLine 可见） ====================
const calculateYAxisRange = (data, markLines) => { const calculateYAxisRange = (data, markLines) => {
if (!data || data.length === 0) { if (!data || data.length === 0) {
return { min: null, max: null }; return { min: null, max: null };
} }
@ -410,10 +413,10 @@
min: roundToTwo(dataMin - padding), min: roundToTwo(dataMin - padding),
max: roundToTwo(dataMax + padding), max: roundToTwo(dataMax + padding),
}; };
}; };
// ==================== 生成 ECharts 配置 ==================== // ==================== 生成 ECharts 配置 ====================
const getChartOption = (item) => { const getChartOption = (item) => {
// 计算 y 轴范围，确保 markLine 可见 // 计算 y 轴范围，确保 markLine 可见
const yAxisRange = calculateYAxisRange(item.data, item.markLines); const yAxisRange = calculateYAxisRange(item.data, item.markLines);
@ -531,6 +534,51 @@
}, },
}, },
}, },
// ✅ 新增：折线图
{
name: item.title || '趋势',
type: 'line',
data: item.data || [],
smooth: true,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
color: '#ff6b6b',
width: 2,
},
itemStyle: {
color: '#ff6b6b',
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(255, 107, 107, 0.3)' },
{ offset: 1, color: 'rgba(255, 107, 107, 0.05)' },
],
},
},
emphasis: {
focus: 'series',
},
label: {
show: true,
position: 'top',
fontSize: 10,
color: '#ff6b6b',
fontWeight: 500,
formatter: (params) => {
return params.value;
},
},
// 将折线图与柱状图关联，共享 x 轴
xAxisIndex: 0,
yAxisIndex: 0,
},
], ],
legend: { legend: {
show: true, show: true,
@ -544,6 +592,13 @@
name: item.title || '数据', name: item.title || '数据',
icon: 'roundRect', icon: 'roundRect',
}, },
{
name: item.title || '趋势',
icon: 'line',
itemStyle: {
color: '#ff6b6b',
},
},
...(item.markLines || []).map((line) => ({ ...(item.markLines || []).map((line) => ({
name: line.name, name: line.name,
icon: 'line', icon: 'line',
@ -554,14 +609,14 @@
], ],
}, },
}; };
}; };
// ==================== 生命周期 ==================== // ==================== 生命周期 ====================
onMounted(async () => { onMounted(async () => {
await loadCategories(); await loadCategories();
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
chartInstances.forEach((instance) => { chartInstances.forEach((instance) => {
if (instance._resizeHandler) { if (instance._resizeHandler) {
window.removeEventListener('resize', instance._resizeHandler); window.removeEventListener('resize', instance._resizeHandler);
@ -571,103 +626,103 @@
} }
}); });
chartInstances.length = 0; chartInstances.length = 0;
}); });
defineExpose({ defineExpose({
handleSearch, handleSearch,
loadChartData, loadChartData,
selectedCategory, selectedCategory,
categoryOptions, categoryOptions,
selectedDimension, selectedDimension,
selectedDate, selectedDate,
}); });
</script> </script>
<style scoped> <style scoped>
.dashboard-charts { .dashboard-charts {
padding: 24px; padding: 24px;
background: #f0f2f5; background: #f0f2f5;
min-height: 100vh; min-height: 100vh;
} }
/* ==================== 筛选区域样式 ==================== */ /* ==================== 筛选区域样式 ==================== */
.filter-section { .filter-section {
margin-bottom: 20px; margin-bottom: 20px;
} }
.filter-card { .filter-card {
border-radius: 12px; border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
} }
.filter-card :deep(.ant-card-body) { .filter-card :deep(.ant-card-body) {
padding: 16px 20px; padding: 16px 20px;
} }
.filter-item { .filter-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
} }
.filter-label { .filter-label {
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
color: #1d2129; color: #1d2129;
white-space: nowrap; white-space: nowrap;
min-width: 32px; min-width: 32px;
} }
/* ==================== 图表区域样式 ==================== */ /* ==================== 图表区域样式 ==================== */
.chart-grid { .chart-grid {
margin: 0 -8px; margin: 0 -8px;
} }
.chart-col { .chart-col {
padding: 0 8px; padding: 0 8px;
margin-bottom: 16px; margin-bottom: 16px;
} }
.chart-card { .chart-card {
border-radius: 12px; border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease; transition: all 0.3s ease;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.chart-card:hover { .chart-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transform: translateY(-2px); transform: translateY(-2px);
} }
.chart-card :deep(.ant-card-head) { .chart-card :deep(.ant-card-head) {
padding: 0 20px; padding: 0 20px;
min-height: 52px; min-height: 52px;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
background: #fafafa; background: #fafafa;
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
} }
.chart-card :deep(.ant-card-head-title) { .chart-card :deep(.ant-card-head-title) {
padding: 14px 0; padding: 14px 0;
font-weight: 500; font-weight: 500;
} }
.chart-card :deep(.ant-card-body) { .chart-card :deep(.ant-card-body) {
padding: 16px 12px 12px 12px; padding: 16px 12px 12px 12px;
flex: 1; flex: 1;
} }
.card-header { .card-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
} }
.chart-title { .chart-title {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #1d2129; color: #1d2129;
@ -676,32 +731,32 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 70%; max-width: 70%;
} }
.chart-container { .chart-container {
width: 100%; width: 100%;
height: 280px; height: 280px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.chart-instance { .chart-instance {
width: 100%; width: 100%;
height: 280px; height: 280px;
} }
/* 空状态样式 */ /* 空状态样式 */
.empty-state { .empty-state {
margin-top: 60px; margin-top: 60px;
background: #ffffff; background: #ffffff;
padding: 60px 0; padding: 60px 0;
border-radius: 16px; border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
} }
/* ==================== 响应式调整 ==================== */ /* ==================== 响应式调整 ==================== */
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.dashboard-charts { .dashboard-charts {
padding: 16px; padding: 16px;
} }
@ -738,9 +793,9 @@
.chart-card :deep(.ant-card-body) { .chart-card :deep(.ant-card-body) {
padding: 12px 8px 8px 8px; padding: 12px 8px 8px 8px;
} }
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.chart-container { .chart-container {
height: 200px; height: 200px;
} }
@ -757,5 +812,5 @@
padding: 10px 0; padding: 10px 0;
font-size: 13px; font-size: 13px;
} }
} }
</style> </style>