增加 报表查询、数据质量界面
This commit is contained in:
zhangyue
parent
d781ed8385
commit
55ff382434
|
|
@ -0,0 +1,117 @@
|
|||
<template>
|
||||
<div class="page-container">
|
||||
<!-- 使用 Ant Design Vue 的栅格系统，PC端一行展示3个，响应式适配 -->
|
||||
<a-row :gutter="[16, 16]">
|
||||
<a-col :xs="24" :sm="24" :md="8" >
|
||||
<RichTextCard title="本周数据概况" :html-content="weekSummary" :loading="loading" />
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="24" :md="8">
|
||||
<RichTextCard title="本月数据概况" :html-content="monthSummary" :loading="loading" />
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="24" :md="8">
|
||||
<RichTextCard title="本年度数据概况" :html-content="yearSummary" :loading="loading" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { Spin } from 'ant-design-vue';
|
||||
import RichTextCard from './components/RichTextCard.vue'; // 引入子组件
|
||||
// 假设的接口请求方法
|
||||
import { getAllDataSummary } from './datacenter.api';
|
||||
|
||||
// 定义三个富文本的响应式变量
|
||||
const weekSummary = ref('');
|
||||
const monthSummary = ref('');
|
||||
const yearSummary = ref('');
|
||||
// 初始化为 true，确保组件一开始就显示 loading
|
||||
const loading = ref(true);
|
||||
|
||||
// 最小显示时间，确保 loading 至少显示一段时间
|
||||
const MIN_LOADING_TIME = 800; // 800ms
|
||||
|
||||
onMounted(async () => {
|
||||
const startTime = Date.now();
|
||||
try {
|
||||
// 模拟网络延迟（可选，用于测试）
|
||||
// await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
const res = await getAllDataSummary();
|
||||
if (res.success) {
|
||||
// 根据接口实际返回的字段名进行赋值
|
||||
weekSummary.value = res.result.weekHtml;
|
||||
monthSummary.value = res.result.monthHtml;
|
||||
yearSummary.value = res.result.yearHtml;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取数据概况失败:', error);
|
||||
} finally {
|
||||
// 确保 loading 至少显示 MIN_LOADING_TIME 毫秒
|
||||
const elapsedTime = Date.now() - startTime;
|
||||
if (elapsedTime < MIN_LOADING_TIME) {
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, MIN_LOADING_TIME - elapsedTime);
|
||||
} else {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
background-color: #fdfdfd;
|
||||
min-height: 100vh;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 全局 Loading 遮罩样式 */
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.page-container :deep(.ant-card) {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.page-container :deep(.ant-card:hover) {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 自定义卡片 loading 样式 */
|
||||
.page-container :deep(.ant-spin-container) {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.page-container :deep(.ant-card-loading) {
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading-shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes loading-shimmer {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<a-card :title="title" class="summary-card" :loading="false">
|
||||
<!-- 加载状态：显示骨架屏占位符 -->
|
||||
<div v-if="loading" class="skeleton-content">
|
||||
<div class="skeleton-line skeleton-line-short"></div>
|
||||
<div class="skeleton-line"></div>
|
||||
<div class="skeleton-line"></div>
|
||||
<div class="skeleton-line skeleton-line-medium"></div>
|
||||
<div class="skeleton-line skeleton-line-short"></div>
|
||||
</div>
|
||||
|
||||
<!-- 加载完成：显示实际内容 -->
|
||||
<div v-else v-html="htmlContent" class="rich-text-content"></div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 定义组件接收的 props
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '数据概况',
|
||||
},
|
||||
htmlContent: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.summary-card {
|
||||
height: 100%; /* 保证三个卡片高度一致 */
|
||||
}
|
||||
|
||||
/* 骨架屏占位符样式 */
|
||||
.skeleton-content {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.skeleton-line {
|
||||
height: 16px;
|
||||
background: linear-gradient(90deg, #e8ecf1 25%, #d0d7de 50%, #e8ecf1 75%);
|
||||
background-size: 200% 100%;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
animation: shimmer 1.5s infinite;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.skeleton-line-short {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.skeleton-line-medium {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 :deep() 穿透 scoped 限制，统一调整富文本内部的样式 */
|
||||
.rich-text-content :deep(div) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.rich-text-content :deep(strong) {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* 内容过渡动画 */
|
||||
.rich-text-content {
|
||||
animation: fadeIn 0.3s ease-in;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(5px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import { defHttp } from '/@/utils/http/axios';
|
||||
|
||||
|
||||
enum Api {
|
||||
qualityData = '/appmana/survDisplayInfo/getQualityData',
|
||||
dataSummary = '/appmana/dataCenter/dataSummary',
|
||||
deviceAlertStatistic = '/appmana/dataCenter/deviceAlertStatistic',
|
||||
deviceList = '/appmana/dataCenter/deviceList',
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取数据质量数据
|
||||
* @param params
|
||||
*/
|
||||
export const getQualityData = (params) => defHttp.get({ url: Api.qualityData, params }, { isTransformResponse: false });
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取数据报告
|
||||
* @param params
|
||||
*/
|
||||
export const getAllDataSummary = (params) => defHttp.get({ url: Api.dataSummary, params }, { isTransformResponse: false });
|
||||
|
||||
/**
|
||||
* 获取支持的设备列表
|
||||
* @param params
|
||||
*/
|
||||
export const getAllDeviceList = (params) => defHttp.get({ url: Api.deviceList, params }, { isTransformResponse: false });
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取数据报告
|
||||
* @param params
|
||||
*/
|
||||
export const getDeviceAlertStatistic = (params) => defHttp.post({ url: Api.deviceAlertStatistic, params }, { isTransformResponse: false });
|
||||
|
|
@ -0,0 +1,286 @@
|
|||
<template>
|
||||
<div class="dashboard-container">
|
||||
<div class="bg-grid"></div>
|
||||
<div class="main-content">
|
||||
<div class="side-column left-side">
|
||||
<div class="tech-card card-phosphorus">
|
||||
<div class="card-label">{{ data.phosphoruss }}</div>
|
||||
<div class="card-value">{{ data.phosphorus }}</div>
|
||||
</div>
|
||||
<div class="tech-card card-cod">
|
||||
<div class="card-label">{{ data.cods }}</div>
|
||||
<div class="card-value">{{ data.cod }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="center-core">
|
||||
<div class="core-ring-outer"></div>
|
||||
<div class="core-ring-inner"></div>
|
||||
<div class="core-text-group">
|
||||
<div class="score-text">{{ data.level }}</div>
|
||||
<div class="score-label">综合评价</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="side-column right-side">
|
||||
<div class="tech-card card-nitrogen">
|
||||
<div class="card-label">{{ data.nitrogens }}</div>
|
||||
<div class="card-value">{{ data.nitrogen }}</div>
|
||||
</div>
|
||||
<div class="tech-card card-waste">
|
||||
<div class="card-label">{{ data.wasteRates }}</div>
|
||||
<div class="card-value">{{ data.wasteRate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { getQualityData } from './datacenter.api';
|
||||
|
||||
const data = ref({
|
||||
phosphorus: 0.9,
|
||||
cod: 500,
|
||||
nitrogen: 1.8,
|
||||
wasteRate: 92.3,
|
||||
level: '优',
|
||||
phosphoruss: 0.9,
|
||||
cods: 500,
|
||||
nitrogens: 1.8,
|
||||
wasteRates: 92.3,
|
||||
});
|
||||
|
||||
let timer: any = null;
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
|
||||
onUnmounted(() => {});
|
||||
|
||||
/**
|
||||
* 获取数据
|
||||
*/
|
||||
function getData() {
|
||||
getQualityData({ infoKey: 'effect_assess' }).then((res) => {
|
||||
if (res.code == 200) {
|
||||
let infoData = res.result.detailList;
|
||||
data.value = {
|
||||
phosphorus: infoData[0].detailValue,
|
||||
cod: infoData[2].detailValue,
|
||||
nitrogen: infoData[1].detailValue,
|
||||
wasteRate: infoData[3].detailValue,
|
||||
phosphoruss: infoData[0].detailCode,
|
||||
cods: infoData[2].detailCode,
|
||||
nitrogens: infoData[1].detailCode,
|
||||
wasteRates: infoData[3].detailCode,
|
||||
level: infoData[4].detailValue,
|
||||
};
|
||||
} else {
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@bg-light: #f4f7f9;
|
||||
@card-bg: #ffffff;
|
||||
@border-color: #e8ecf1;
|
||||
@text-main: #1f2937;
|
||||
@text-sub: #6b7280;
|
||||
@cyan-glow: #00a8ff;
|
||||
@green-glow: #10b981;
|
||||
@orange-glow: #f59e0b;
|
||||
@purple-glow: #8b5cf6;
|
||||
|
||||
.dashboard-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: @bg-light;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.bg-grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.side-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.tech-card {
|
||||
position: relative;
|
||||
background: @card-bg;
|
||||
border: 1px solid @border-color;
|
||||
padding: 24px 30px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.tech-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-phosphorus {
|
||||
border-left: 4px solid @green-glow;
|
||||
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
|
||||
}
|
||||
|
||||
.card-cod {
|
||||
border-left: 4px solid @orange-glow;
|
||||
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
|
||||
}
|
||||
|
||||
.card-nitrogen {
|
||||
border-right: 4px solid @purple-glow;
|
||||
text-align: right;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%, 0 20px);
|
||||
}
|
||||
|
||||
.card-waste {
|
||||
border-right: 4px solid @cyan-glow;
|
||||
text-align: right;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%, 0 20px);
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 15px;
|
||||
color: @text-sub;
|
||||
margin-bottom: 12px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
color: @text-main;
|
||||
font-family: 'Verdana', sans-serif;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 14px;
|
||||
margin-left: 6px;
|
||||
font-weight: normal;
|
||||
color: @text-sub;
|
||||
}
|
||||
|
||||
.center-core {
|
||||
position: relative;
|
||||
width: 340px;
|
||||
height: 340px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: radial-gradient(circle, rgba(0, 168, 255, 0.08) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
.core-ring-outer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 2px solid transparent;
|
||||
border-top-color: @cyan-glow;
|
||||
border-bottom-color: @cyan-glow;
|
||||
box-shadow: 0 0 15px rgba(0, 168, 255, 0.2), inset 0 0 15px rgba(0, 168, 255, 0.2);
|
||||
animation: spin 4s linear infinite;
|
||||
}
|
||||
|
||||
.core-ring-inner {
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
border-radius: 50%;
|
||||
border: 3px dashed rgba(0, 168, 255, 0.3);
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
animation: spin-reverse 8s linear infinite;
|
||||
}
|
||||
|
||||
.core-text-group {
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.score-text {
|
||||
font-size: 80px;
|
||||
font-weight: 900;
|
||||
color: @cyan-glow;
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 15px rgba(0, 168, 255, 0.4);
|
||||
font-family: 'Verdana', sans-serif;
|
||||
}
|
||||
|
||||
.score-label {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
color: @text-sub;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin-reverse {
|
||||
0% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.main-content {
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
.side-column {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
gap: 16px;
|
||||
}
|
||||
.tech-card {
|
||||
flex: 1;
|
||||
}
|
||||
.center-core {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,761 @@
|
|||
<template>
|
||||
<div class="dashboard-charts">
|
||||
<!-- ==================== 筛选区域 ==================== -->
|
||||
<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">
|
||||
<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">
|
||||
<span class="filter-label">模式</span>
|
||||
<a-select v-model:value="selectedDimension" placeholder="请选择" style="flex: 1; min-width: 0">
|
||||
<a-select-option value="dayhours">日统计</a-select-option>
|
||||
<a-select-option value="monthDays">月统计</a-select-option>
|
||||
<a-select-option value="yearMonth">年统计</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-date-picker
|
||||
v-model:value="selectedDate"
|
||||
:format="dateFormat"
|
||||
:picker="pickerType"
|
||||
:placeholder="datePlaceholder"
|
||||
style="flex: 1; min-width: 0"
|
||||
/>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
<!-- 查询按钮 -->
|
||||
<a-col :xs="24" :sm="12" :md="5" :lg="4">
|
||||
<a-button type="primary" @click="handleSearch" :loading="loading" block>
|
||||
<template #icon>
|
||||
<ReloadOutlined />
|
||||
</template>
|
||||
查询
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</div>
|
||||
|
||||
<!-- ==================== 图表区域 ==================== -->
|
||||
<a-row :gutter="[16, 16]" class="chart-grid">
|
||||
<a-col v-for="(item, index) in chartDataList" :key="index" :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="chart-col">
|
||||
<a-card class="chart-card" :hoverable="true" :bordered="false" :loading="loading">
|
||||
<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>
|
||||
<div class="chart-container">
|
||||
<div :ref="(el) => setChartRef(el, index)" class="chart-instance"></div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<a-empty v-if="!chartDataList || chartDataList.length === 0" description="暂无图表数据" class="empty-state" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount, nextTick, computed } from 'vue';
|
||||
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';
|
||||
|
||||
const fetchCategoryOptions = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
getAllDeviceList({})
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
resolve(res.result);
|
||||
} else {
|
||||
reject(new Error('获取数据失败'));
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('获取数据概况失败:', error);
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// ==================== 根据类别获取图表数据 ====================
|
||||
const fetchChartDataByCategory = (deployId, summaryMode, startTime) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const chartData = [];
|
||||
const dataMap = {
|
||||
sales: [
|
||||
{
|
||||
title: '销售业绩月度对比',
|
||||
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' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '销售团队排名',
|
||||
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' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '各产品线销售额',
|
||||
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' },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 构建请求参数 - 使用新的参数名
|
||||
const params = {
|
||||
deployId: deployId,
|
||||
summaryMode: summaryMode || 'dayhours',
|
||||
startTime: startTime,
|
||||
};
|
||||
|
||||
getDeviceAlertStatistic(params)
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
let itemMap = res.result.itemInfo;
|
||||
let valueMap = res.result.dataMap;
|
||||
Object.entries(valueMap).forEach(([key, value]) => {
|
||||
let markLines = [];
|
||||
let itemDetail = itemMap[key];
|
||||
if (itemDetail.highVal) {
|
||||
markLines.push({
|
||||
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',
|
||||
});
|
||||
}
|
||||
|
||||
chartData.push({
|
||||
title: itemDetail.itemName || key,
|
||||
xAxis: res.result.timeList || [],
|
||||
data: valueMap[key] || [],
|
||||
markLines: markLines,
|
||||
});
|
||||
});
|
||||
resolve(chartData || dataMap.sales);
|
||||
} else {
|
||||
reject(new Error('获取数据失败'));
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('获取数据概况失败:', error);
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// ==================== 数据状态 ====================
|
||||
const categoryOptions = ref([]);
|
||||
const categoryLoading = ref(false);
|
||||
const selectedCategory = ref('');
|
||||
const chartDataList = ref([]);
|
||||
const loading = ref(false);
|
||||
const chartInstances = [];
|
||||
const chartRefs = {};
|
||||
|
||||
const selectedDimension = ref('dayhours');
|
||||
const selectedDate = ref(null);
|
||||
|
||||
// ==================== 根据统计模式动态计算日期格式 ====================
|
||||
const dateFormat = computed(() => {
|
||||
switch (selectedDimension.value) {
|
||||
case 'dayhours':
|
||||
return 'YYYY-MM-DD';
|
||||
case 'monthDays':
|
||||
return 'YYYY-MM';
|
||||
case 'yearMonth':
|
||||
return 'YYYY';
|
||||
default:
|
||||
return 'YYYY-MM-DD';
|
||||
}
|
||||
});
|
||||
|
||||
const pickerType = computed(() => {
|
||||
switch (selectedDimension.value) {
|
||||
case 'dayhours':
|
||||
return 'date';
|
||||
case 'monthDays':
|
||||
return 'month';
|
||||
case 'yearMonth':
|
||||
return 'year';
|
||||
default:
|
||||
return 'date';
|
||||
}
|
||||
});
|
||||
|
||||
const datePlaceholder = computed(() => {
|
||||
switch (selectedDimension.value) {
|
||||
case 'dayhours':
|
||||
return '选择日期';
|
||||
case 'monthDays':
|
||||
return '选择月份';
|
||||
case 'yearMonth':
|
||||
return '选择年份';
|
||||
default:
|
||||
return '选择日期';
|
||||
}
|
||||
});
|
||||
|
||||
// ==================== 下拉框筛选 ====================
|
||||
const filterOption = (input, option) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
|
||||
const getCategoryLabel = (value) => {
|
||||
const found = categoryOptions.value.find((item) => item.id === value);
|
||||
return found ? found.deployDes : value;
|
||||
};
|
||||
|
||||
// ==================== 设置图表 DOM 引用 ====================
|
||||
const setChartRef = (el, index) => {
|
||||
if (el) {
|
||||
chartRefs[index] = el;
|
||||
}
|
||||
};
|
||||
|
||||
// ==================== 加载下拉选项 ====================
|
||||
const loadCategories = async () => {
|
||||
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);
|
||||
} finally {
|
||||
categoryLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// ==================== 加载图表数据（参数名：deployId, summaryMode, startTime） ====================
|
||||
const loadChartData = async (deployId, summaryMode, startTime) => {
|
||||
if (!deployId) return;
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
// 格式化日期
|
||||
let formattedDate = null;
|
||||
if (startTime) {
|
||||
if (dayjs.isDayjs(startTime)) {
|
||||
formattedDate = startTime.format(dateFormat.value);
|
||||
} else {
|
||||
formattedDate = startTime;
|
||||
}
|
||||
}
|
||||
|
||||
const res = await fetchChartDataByCategory(deployId, summaryMode, formattedDate);
|
||||
chartDataList.value = res;
|
||||
await nextTick();
|
||||
setTimeout(() => {
|
||||
initCharts();
|
||||
}, 150);
|
||||
} catch (error) {
|
||||
message.error('加载图表数据失败');
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// ==================== 查询（收集所有参数） ====================
|
||||
const handleSearch = () => {
|
||||
if (!selectedCategory.value) {
|
||||
message.warning('请先选择设备');
|
||||
return;
|
||||
}
|
||||
loadChartData(selectedCategory.value, selectedDimension.value, selectedDate.value);
|
||||
};
|
||||
|
||||
// ==================== 初始化所有图表 ====================
|
||||
const initCharts = () => {
|
||||
chartInstances.forEach((instance) => {
|
||||
if (instance._resizeHandler) {
|
||||
window.removeEventListener('resize', instance._resizeHandler);
|
||||
}
|
||||
if (!instance.isDisposed()) {
|
||||
instance.dispose();
|
||||
}
|
||||
});
|
||||
chartInstances.length = 0;
|
||||
|
||||
chartDataList.value.forEach((item, index) => {
|
||||
const el = chartRefs[index];
|
||||
if (!el) return;
|
||||
|
||||
if (el.offsetWidth === 0 || el.offsetHeight === 0) {
|
||||
setTimeout(() => initCharts(), 100);
|
||||
return;
|
||||
}
|
||||
|
||||
const chart = echarts.init(el);
|
||||
chart.setOption(getChartOption(item));
|
||||
chartInstances.push(chart);
|
||||
|
||||
const resizeHandler = () => {
|
||||
if (chart && !chart.isDisposed()) {
|
||||
chart.resize();
|
||||
}
|
||||
};
|
||||
window.addEventListener('resize', resizeHandler);
|
||||
chart._resizeHandler = resizeHandler;
|
||||
});
|
||||
};
|
||||
|
||||
// ==================== 保留两位小数 ====================
|
||||
const roundToTwo = (num) => {
|
||||
if (num === undefined || num === null || isNaN(num)) return num;
|
||||
return Math.round(num * 100) / 100;
|
||||
};
|
||||
|
||||
// ==================== 计算 y 轴范围（确保 markLine 可见） ====================
|
||||
const calculateYAxisRange = (data, markLines) => {
|
||||
if (!data || data.length === 0) {
|
||||
return { min: null, max: null };
|
||||
}
|
||||
|
||||
// 过滤有效数据
|
||||
const validData = data.filter((v) => v !== undefined && v !== null && !isNaN(v));
|
||||
if (validData.length === 0) {
|
||||
return { min: null, max: null };
|
||||
}
|
||||
|
||||
// 计算数据的最小值和最大值
|
||||
let dataMin = Math.min(...validData);
|
||||
let dataMax = Math.max(...validData);
|
||||
|
||||
// 收集所有 markLine 的值
|
||||
const markValues = (markLines || []).map((line) => line.value).filter((v) => v !== undefined && v !== null && !isNaN(v));
|
||||
|
||||
if (markValues.length > 0) {
|
||||
const markMin = Math.min(...markValues);
|
||||
const markMax = Math.max(...markValues);
|
||||
|
||||
// 合并数据范围和 markLine 范围
|
||||
const allMin = Math.min(dataMin, markMin);
|
||||
const allMax = Math.max(dataMax, markMax);
|
||||
|
||||
// 计算 padding（上下留白 15%）
|
||||
const range = allMax - allMin;
|
||||
const padding = range * 0.15 || 10;
|
||||
|
||||
// ✅ 保留两位小数
|
||||
return {
|
||||
min: roundToTwo(allMin - padding),
|
||||
max: roundToTwo(allMax + padding),
|
||||
};
|
||||
}
|
||||
|
||||
// 没有 markLine 时，使用数据范围加 padding
|
||||
const range = dataMax - dataMin;
|
||||
const padding = range * 0.15 || 10;
|
||||
|
||||
return {
|
||||
min: roundToTwo(dataMin - padding),
|
||||
max: roundToTwo(dataMax + padding),
|
||||
};
|
||||
};
|
||||
|
||||
// ==================== 生成 ECharts 配置 ====================
|
||||
const getChartOption = (item) => {
|
||||
// 计算 y 轴范围，确保 markLine 可见
|
||||
const yAxisRange = calculateYAxisRange(item.data, item.markLines);
|
||||
|
||||
const markLineData = (item.markLines || []).map((line) => ({
|
||||
yAxis: line.value,
|
||||
name: line.name,
|
||||
lineStyle: {
|
||||
color: line.color,
|
||||
type: line.type || 'dashed',
|
||||
width: 2,
|
||||
},
|
||||
label: {
|
||||
formatter: `${line.name}: ${line.value}`,
|
||||
color: line.color,
|
||||
fontSize: 11,
|
||||
position: 'insideEndTop',
|
||||
fontWeight: 500,
|
||||
},
|
||||
}));
|
||||
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
formatter: (params) => {
|
||||
let result = `<strong>${params[0].axisValue}</strong><br/>`;
|
||||
params.forEach((p) => {
|
||||
result += `${p.marker} ${p.seriesName}: ${p.value}<br/>`;
|
||||
});
|
||||
item.markLines?.forEach((line) => {
|
||||
result += `<span style="display:inline-block;width:10px;height:2px;background:${line.color};margin-right:5px;"></span> ${line.name}: ${line.value}<br/>`;
|
||||
});
|
||||
return result;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '6%',
|
||||
right: '6%',
|
||||
bottom: '14%',
|
||||
top: '8%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: item.xAxis || [],
|
||||
axisLabel: {
|
||||
fontSize: 11,
|
||||
fontWeight: 500,
|
||||
color: '#666',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: { color: '#e0e0e0' },
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
// ✅ 设置 y 轴范围，确保 markLine 可见（已保留两位小数）
|
||||
min: yAxisRange.min !== null ? yAxisRange.min : undefined,
|
||||
max: yAxisRange.max !== null ? yAxisRange.max : undefined,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#f0f0f0',
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 11,
|
||||
color: '#888',
|
||||
// ✅ y轴标签也保留两位小数
|
||||
formatter: (value) => {
|
||||
return roundToTwo(value);
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: item.title || '数据',
|
||||
type: 'bar',
|
||||
data: item.data || [],
|
||||
barWidth: '40%',
|
||||
barMaxWidth: 50,
|
||||
markLine: {
|
||||
silent: true,
|
||||
symbol: 'none',
|
||||
data: markLineData,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
},
|
||||
label: {
|
||||
position: 'insideEndTop',
|
||||
fontSize: 11,
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#5b8def' },
|
||||
{ offset: 1, color: '#8db5f5' },
|
||||
],
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: '#3b6fd4',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
show: true,
|
||||
bottom: 0,
|
||||
left: 'center',
|
||||
icon: 'roundRect',
|
||||
itemWidth: 12,
|
||||
itemHeight: 8,
|
||||
data: [
|
||||
{
|
||||
name: item.title || '数据',
|
||||
icon: 'roundRect',
|
||||
},
|
||||
...(item.markLines || []).map((line) => ({
|
||||
name: line.name,
|
||||
icon: 'line',
|
||||
itemStyle: {
|
||||
color: line.color,
|
||||
},
|
||||
})),
|
||||
],
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ==================== 生命周期 ====================
|
||||
onMounted(async () => {
|
||||
await loadCategories();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
chartInstances.forEach((instance) => {
|
||||
if (instance._resizeHandler) {
|
||||
window.removeEventListener('resize', instance._resizeHandler);
|
||||
}
|
||||
if (!instance.isDisposed()) {
|
||||
instance.dispose();
|
||||
}
|
||||
});
|
||||
chartInstances.length = 0;
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
handleSearch,
|
||||
loadChartData,
|
||||
selectedCategory,
|
||||
categoryOptions,
|
||||
selectedDimension,
|
||||
selectedDate,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dashboard-charts {
|
||||
padding: 24px;
|
||||
background: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ==================== 筛选区域样式 ==================== */
|
||||
.filter-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.filter-card :deep(.ant-card-body) {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #1d2129;
|
||||
white-space: nowrap;
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
/* ==================== 图表区域样式 ==================== */
|
||||
.chart-grid {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.chart-col {
|
||||
padding: 0 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chart-card:hover {
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.chart-card :deep(.ant-card-head) {
|
||||
padding: 0 20px;
|
||||
min-height: 52px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
|
||||
.chart-card :deep(.ant-card-head-title) {
|
||||
padding: 14px 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.chart-card :deep(.ant-card-body) {
|
||||
padding: 16px 12px 12px 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1d2129;
|
||||
letter-spacing: 0.3px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chart-instance {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
/* 空状态样式 */
|
||||
.empty-state {
|
||||
margin-top: 60px;
|
||||
background: #ffffff;
|
||||
padding: 60px 0;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* ==================== 响应式调整 ==================== */
|
||||
@media screen and (max-width: 768px) {
|
||||
.dashboard-charts {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.filter-card :deep(.ant-card-body) {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.chart-instance {
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 13px;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.chart-card :deep(.ant-card-head) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.chart-card :deep(.ant-card-body) {
|
||||
padding: 12px 8px 8px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.chart-container {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.chart-instance {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.chart-card :deep(.ant-card-head) {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.chart-card :deep(.ant-card-head-title) {
|
||||
padding: 10px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue