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

数据报表查询改为以站点为单位

This commit is contained in:
zhangyue 2026-07-27 15:02:06 +08:00
parent 06a4324b90
commit 7b1e701ee3
2 changed files with 683 additions and 652 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/views/appmana/datacenter/datacenter.api.ts
View File

@ -6,6 +6,7 @@ enum Api {
dataSummary = '/appmana/dataCenter/dataSummary',
deviceAlertStatistic = '/appmana/dataCenter/deviceAlertStatistic',
deviceList = '/appmana/dataCenter/deviceList',
getStationList = '/appmana/survStationInfo/getStationList',
}
@ -36,3 +37,9 @@ export const getAllDeviceList = (params) => defHttp.get({ url: Api.deviceList, p
* @param params
*/
export const getDeviceAlertStatistic = (params) => defHttp.post({ url: Api.deviceAlertStatistic, params }, { isTransformResponse: false });
/**
* 列表接口
* @param params
*/
export const getStationList = (params) => defHttp.get({ url: Api.getStationList, params }, { isTransformResponse: false });

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

@ -4,26 +4,46 @@
<div class="filter-section">
<a-card :bordered="false" class="filter-card">
<a-row :gutter="[8, 8]" align="middle">
<!-- 设备 -->
<a-col :xs="24" :sm="12" :md="8" :lg="7">
<!-- 站点 -->
<a-col :xs="24" :sm="12" :md="6" :lg="5">
<div class="filter-item">
<span class="filter-label">设备</span>
<span class="filter-label">站点</span>
<a-select
v-model:value="selectedCategory"
placeholder="请选择"
:loading="categoryLoading"
v-model:value="selectedSite"
placeholder="请选择站点"
:loading="siteLoading"
allow-clear
show-search
:filter-option="filterOption"
style="flex: 1; min-width: 0"
>
<a-select-option v-for="item in categoryOptions" :key="item.id" :value="item.id">
{{ item.deployDes }}
<a-select-option v-for="item in siteOptions" :key="item.stationCode" :value="item.stationCode">
{{ item.stationName }}
</a-select-option>
</a-select>
</div>
</a-col>
<!-- 设备 -->
<!-- <a-col :xs="24" :sm="12" :md="6" :lg="5">-->
<!-- <div class="filter-item">-->
<!-- <span class="filter-label">设备</span>-->
<!-- <a-select-->
<!-- v-model:value="selectedCategory"-->
<!-- placeholder="请选择设备"-->
<!-- :loading="categoryLoading"-->
<!-- allow-clear-->
<!-- show-search-->
<!-- :filter-option="filterOption"-->
<!-- style="flex: 1; min-width: 0"-->
<!-- >-->
<!-- <a-select-option v-for="item in categoryOptions" :key="item.id" :value="item.id">-->
<!-- {{ item.deployDes }}-->
<!-- </a-select-option>-->
<!-- </a-select>-->
<!-- </div>-->
<!-- </a-col>-->
<!-- 统计模式 -->
<a-col :xs="24" :sm="12" :md="5" :lg="4">
<div class="filter-item">
@ -51,7 +71,7 @@
</a-col>
<!-- 查询按钮 -->
<a-col :xs="24" :sm="12" :md="5" :lg="4">
<a-col :xs="24" :sm="12" :md="5" :lg="5">
<a-button type="primary" @click="handleSearch" :loading="loading" block>
<template #icon>
<ReloadOutlined />
@ -70,7 +90,6 @@
<template #title>
<div class="card-header">
<span class="chart-title">{{ item.title || `图表 ${index + 1}` }}</span>
<!-- 保持您原来的写法，不做任何修改 -->
<a-tag color="blue" size="small">{{ item.data?.length || 0 }} 项</a-tag>
</div>
</template>
@ -92,7 +111,25 @@ import { message } from 'ant-design-vue';
import { ReloadOutlined } from '@ant-design/icons-vue';
import * as echarts from 'echarts';
import dayjs from 'dayjs';
import { getDeviceAlertStatistic, getAllDeviceList } from './datacenter.api';
import { getDeviceAlertStatistic, getAllDeviceList, getStationList } from './datacenter.api';
// ==================== 获取站点列表 ====================
const fetchSiteOptions = () => {
return new Promise((resolve, reject) => {
getStationList({})
.then((res) => {
if (res.success) {
resolve(res.result);
} else {
reject(new Error('获取站点数据失败'));
}
})
.catch((error) => {
console.error('获取站点数据失败:', error);
reject(error);
});
});
};
const fetchCategoryOptions = () => {
return new Promise((resolve, reject) => {
@ -101,18 +138,18 @@ const fetchCategoryOptions = () => {
if (res.success) {
resolve(res.result);
} else {
reject(new Error('获取数据失败'));
reject(new Error('获取设备数据失败'));
}
})
.catch((error) => {
console.error('获取数据概况失败:', error);
console.error('获取设备数据失败:', error);
reject(error);
});
});
};
// ==================== 根据类别获取图表数据 ====================
const fetchChartDataByCategory = (deployId, summaryMode, startTime) => {
const fetchChartDataByCategory = (stationCode, deployId, summaryMode, startTime) => {
return new Promise((resolve, reject) => {
const chartData = [];
const dataMap = {
@ -122,8 +159,8 @@ const fetchChartDataByCategory = (deployId, summaryMode, startTime) => {
xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
data: [180, 250, 220, 310, 280, 360],
markLines: [
{ name: '月均线', value: 267, color: '#339af0', type: 'dashed' },
{ name: '冲刺目标', value: 350, color: '#fcc419', type: 'dotted' },
{ name: '高阈值', value: 350, color: '#fcc419', type: 'dashed' },
{ name: '低阈值', value: 150, color: '#ff6b6b', type: 'dotted' },
],
},
{
@ -131,8 +168,8 @@ const fetchChartDataByCategory = (deployId, summaryMode, startTime) => {
xAxis: ['团队A', '团队B', '团队C', '团队D', '团队E'],
data: [95, 140, 82, 210, 115],
markLines: [
{ name: '合格线', value: 100, color: '#ff6b6b', type: 'dashed' },
{ name: '优秀线', value: 180, color: '#69db7c', type: 'dotted' },
{ name: '高阈值', value: 180, color: '#fcc419', type: 'dashed' },
{ name: '低阈值', value: 80, color: '#ff6b6b', type: 'dotted' },
],
},
{
@ -140,16 +177,17 @@ const fetchChartDataByCategory = (deployId, summaryMode, startTime) => {
xAxis: ['产品线A', '产品线B', '产品线C', '产品线D'],
data: [420, 380, 560, 290],
markLines: [
{ name: '平均线', value: 412, color: '#4dabf7', type: 'dashed' },
{ name: '目标线', value: 500, color: '#ff922b', type: 'dotted' },
{ name: '高阈值', value: 500, color: '#fcc419', type: 'dashed' },
{ name: '低阈值', value: 300, color: '#ff6b6b', type: 'dotted' },
],
},
],
};
// 构建请求参数 - 使用新的参数名
// 构建请求参数 - stationCode
const params = {
deployId: deployId,
stationCode: stationCode,
// deployId: deployId,
summaryMode: summaryMode || 'dayhours',
startTime: startTime,
};
@ -162,22 +200,25 @@ const fetchChartDataByCategory = (deployId, summaryMode, startTime) => {
Object.entries(valueMap).forEach(([key, value]) => {
let markLines = [];
let itemDetail = itemMap[key];
// ✅ 高阈值：使用 highVal，名称为"高阈值"
if (itemDetail.highVal) {
markLines.push({
name: itemDetail.itemName,
name: itemDetail.itemName +'高阈值',
value: itemDetail.highVal,
color: '#339af0',
type: 'dotted',
});
}
if (itemDetail.lowVal) {
markLines.push({
name: itemDetail.itemName,
value: itemDetail.lowVal,
color: '#fcc419',
type: 'dashed',
});
}
// ✅ 低阈值：使用 lowVal，名称为"低阈值"
if (itemDetail.lowVal) {
markLines.push({
name: itemDetail.itemName +'低阈值',
value: itemDetail.lowVal,
color: '#ff6b6b',
type: 'dotted',
});
}
chartData.push({
title: itemDetail.itemName || key,
@ -199,6 +240,10 @@ const fetchChartDataByCategory = (deployId, summaryMode, startTime) => {
};
// ==================== 数据状态 ====================
const siteOptions = ref([]);
const siteLoading = ref(false);
const selectedSite = ref('');
const categoryOptions = ref([]);
const categoryLoading = ref(false);
const selectedCategory = ref('');
@ -269,25 +314,50 @@ const setChartRef = (el, index) => {
// ==================== 加载下拉选项 ====================
const loadCategories = async () => {
// 先加载站点列表
siteLoading.value = true;
try {
const siteRes = await fetchSiteOptions();
siteOptions.value = siteRes;
if (siteRes.length > 0) {
selectedSite.value = siteRes[0].stationCode;
}
} catch (error) {
console.error('加载站点列表失败:', error);
} finally {
siteLoading.value = false;
}
// 再加载设备列表
categoryLoading.value = true;
try {
const res = await fetchCategoryOptions();
categoryOptions.value = res;
if (res.length > 0) {
selectedCategory.value = res[0].id;
await handleSearch();
}
} catch (error) {
console.error(error);
console.error('加载设备列表失败:', error);
} finally {
categoryLoading.value = false;
}
// 如果有站点和设备，自动查询
if (selectedSite.value && selectedCategory.value) {
await handleSearch();
}
};
// ==================== 加载图表数据（参数名：deployId, summaryMode, startTime） ====================
const loadChartData = async (deployId, summaryMode, startTime) => {
if (!deployId) return;
// ==================== 加载图表数据（加入 stationCode 参数） ====================
const loadChartData = async (stationCode, deployId, summaryMode, startTime) => {
if (!stationCode) {
message.warning('请先选择站点');
return;
}
if (!deployId) {
message.warning('请先选择设备');
return;
}
loading.value = true;
try {
@ -301,7 +371,7 @@ const loadChartData = async (deployId, summaryMode, startTime) => {
}
}
const res = await fetchChartDataByCategory(deployId, summaryMode, formattedDate);
const res = await fetchChartDataByCategory(stationCode, deployId, summaryMode, formattedDate);
chartDataList.value = res;
await nextTick();
setTimeout(() => {
@ -315,13 +385,17 @@ const loadChartData = async (deployId, summaryMode, startTime) => {
}
};
// ==================== 查询（收集所有参数） ====================
// ==================== 查询（收集所有参数，包含 stationCode） ====================
const handleSearch = () => {
if (!selectedSite.value) {
message.warning('请先选择站点');
return;
}
if (!selectedCategory.value) {
message.warning('请先选择设备');
return;
}
loadChartData(selectedCategory.value, selectedDimension.value, selectedDate.value);
loadChartData(selectedSite.value, selectedCategory.value, selectedDimension.value, selectedDate.value);
};
// ==================== 初始化所有图表 ====================
@ -491,7 +565,7 @@ const getChartOption = (item) => {
},
},
series: [
// ========== 柱状图（保持不变） ==========
// ========== 柱状图 ==========
{
name: item.title || '数据',
type: 'bar',
@ -531,50 +605,6 @@ const getChartOption = (item) => {
},
},
},
// ========== ✅ 新增：折线图 ==========
{
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.25)' },
{ offset: 1, color: 'rgba(255, 107, 107, 0.02)' },
],
},
},
label: {
show: true,
position: 'top',
fontSize: 10,
color: '#ff6b6b',
fontWeight: 500,
formatter: (params) => {
return params.value;
},
},
emphasis: {
focus: 'series',
},
xAxisIndex: 0,
yAxisIndex: 0,
},
],
legend: {
show: true,
@ -588,14 +618,6 @@ const getChartOption = (item) => {
name: item.title || '数据',
icon: 'roundRect',
},
// ✅ 新增：折线图图例
{
name: `${item.title || '数据'}趋势`,
icon: 'line',
itemStyle: {
color: '#ff6b6b',
},
},
...(item.markLines || []).map((line) => ({
name: line.name,
icon: 'line',
@ -628,6 +650,8 @@ onBeforeUnmount(() => {
defineExpose({
handleSearch,
loadChartData,
selectedSite,
siteOptions,
selectedCategory,
categoryOptions,
selectedDimension,