taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

迁移

Browse Source
This commit is contained in:
re-JZzzz
2025-09-17 16:54:39 +08:00
parent 7a003adb5d
commit 5c5baaab44
27 changed files with 5501 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

497
src/views/pvSystem/alarmAnalysis/components/data.vue Normal file
View File

@ -0,0 +1,497 @@
<template>
<div class="data-dashboard">
<!-- 标题区域 -->
<el-row class="dashboard-header">
<el-col :span="12">
<TitleComponent title="实时数据" :fontLevel="2" />
</el-col>
<el-col :span="12" class="text-right">
<span class="update-time">截止至2025/06/30 12:00</span>
</el-col>
</el-row>
<!-- 关键指标卡片区域 -->
<el-row class="metrics-container" :gutter="0">
<el-col :span="6">
<div class="metric-card">
<div class="metric-value">{{ props.dashboardData.todayAlarmTotal }}</div>
<div class="metric-label">今日报警总数</div>
<div class="metric-change">较上周 <span :class="props.dashboardData.updates.todayAlarmTotal.type">
{{ props.dashboardData.updates.todayAlarmTotal.type === 'up' ? '↑' : '↓' }}{{ props.dashboardData.updates.todayAlarmTotal.value }}
</span></div>
</div>
</el-col>
<el-col :span="6">
<div class="metric-card">
<div class="metric-value">{{ props.dashboardData.unhandledAlarms }}</div>
<div class="metric-label">未处理报警</div>
<div class="metric-change">较上周 <span :class="props.dashboardData.updates.unhandledAlarms.type">
{{ props.dashboardData.updates.unhandledAlarms.type === 'up' ? '↑' : '↓' }}{{ props.dashboardData.updates.unhandledAlarms.value }}
</span></div>
</div>
</el-col>
<el-col :span="6">
<div class="metric-card">
<div class="metric-value">{{ props.dashboardData.handledAlarms }}</div>
<div class="metric-label">已处理报警</div>
<div class="metric-change">较上周 <span :class="props.dashboardData.updates.handledAlarms.type">
{{ props.dashboardData.updates.handledAlarms.type === 'up' ? '↑' : '↓' }}{{ props.dashboardData.updates.handledAlarms.value }}
</span></div>
</div>
</el-col>
<el-col :span="6">
<div class="metric-card">
<div class="metric-value">{{ props.dashboardData.avgProcessTime }}</div>
<div class="metric-label">平均处理时长</div>
<div class="metric-change">较上周 <span :class="props.dashboardData.updates.avgProcessTime.type">
{{ props.dashboardData.updates.avgProcessTime.type === 'up' ? '↑' : '↓' }}{{ props.dashboardData.updates.avgProcessTime.value }}
</span></div>
</div>
</el-col>
</el-row>
<!-- 报警趋势图表区域 -->
<el-row class="trend-container">
<!-- 使用弹性布局实现标题在左、下拉框在右 -->
<div class="trend-header-flex">
<TitleComponent title="报警趋势" :fontLevel="2" />
<el-select v-model="timeRange" placeholder="近7天" size="small">
<el-option label="近7天" value="7days" />
<el-option label="近30天" value="30days" />
<el-option label="近90天" value="90days" />
</el-select>
</div>
<el-col :span="24">
<div class="trend-section">
<el-row :gutter="20">
<!-- 报警数量图表 -->
<el-col :span="12">
<div class="chart-container">
<div class="chart-left-right-layout">
<div class="chart-info-container">
<div class="chart-title">报警数量(次) </div>
<div class="chart-total">{{ props.chartData.totals.alarmCount }}</div>
<div class="chart-value">较昨日 <span :class="props.chartData.dailyChanges.alarmCount.type">
{{ props.chartData.dailyChanges.alarmCount.type === 'up' ? '↑' : '↓' }}{{ props.chartData.dailyChanges.alarmCount.value }}
</span></div>
</div>
<div ref="alarmCountRef" class="chart-content"></div>
</div>
</div>
</el-col>
<!-- 报警处理效率图表 -->
<el-col :span="12">
<div class="chart-container">
<div class="chart-left-right-layout">
<div class="chart-info-container">
<div class="chart-title">报警处理效率(%)</div>
<div class="chart-total">{{ props.chartData.totals.processEfficiency }}</div>
<div class="chart-value">较昨日 <span :class="props.chartData.dailyChanges.processEfficiency.type">
{{ props.chartData.dailyChanges.processEfficiency.type === 'up' ? '↑' : '↓' }}{{ props.chartData.dailyChanges.processEfficiency.value }}
</span></div>
</div>
<div ref="processEfficiencyRef" class="chart-content"></div>
</div>
</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';
import TitleComponent from '@/components/TitleComponent/index.vue';
// 定义props
const props = defineProps({
dashboardData: {
type: Object,
default: () => ({
todayAlarmTotal: 25,
unhandledAlarms: 8,
handledAlarms: 16,
avgProcessTime: '42分钟',
updates: {
todayAlarmTotal: { value: '4.2%', type: 'down' },
unhandledAlarms: { value: '5%', type: 'up' },
handledAlarms: { value: '8%', type: 'down' },
avgProcessTime: { value: '10%', type: 'down' }
}
})
},
chartData: {
type: Object,
default: () => ({
alarmCount: [150, 230, 224, 218, 135, 147, 260],
processEfficiency: [85, 88, 90, 87, 89, 91, 89],
dates: ['04/21', '04/22', '04/23', '04/24', '04/25', '04/26', '04/27'],
totals: {
alarmCount: 56,
processEfficiency: '89%'
},
dailyChanges: {
alarmCount: { value: '0.9%', type: 'down' },
processEfficiency: { value: '0.9%', type: 'down' }
}
})
}
});
const timeRange = ref('7days');
const alarmCountRef = ref(null);
const processEfficiencyRef = ref(null);
let alarmCountChart = null;
let processEfficiencyChart = null;
// 初始化图表
const initCharts = () => {
// 报警数量图表
if (alarmCountRef.value) {
alarmCountChart = echarts.init(alarmCountRef.value);
}
// 报警处理效率图表
if (processEfficiencyRef.value) {
processEfficiencyChart = echarts.init(processEfficiencyRef.value);
}
// 设置报警数量图表配置
const alarmCountOption = {
tooltip: {
trigger: 'axis',
},
grid: {
left: '-45px',
right: '0%',
bottom: '0%',
top: '0%',
containLabel: true,
},
xAxis: {
type: 'category',
//文本颜色
axisLabel: {
textStyle: {
color: '#999999'
},
interval: 2 // 每隔三天显示一个标签（索引从0开始，间隔为2表示每3个数据点显示一个）
},
// x轴线样式
axisLine: {
show: false,
lineStyle: {
color: "#427394"
}
},
axisTick: {
show: false
},
data: props.chartData.dates,
},
yAxis: {
type: 'value',
show: false,
axisLabel: {
textStyle: {
color: '#C5D6E6'
}
},
splitLine: {
show: false
}
},
series: [
{
data: props.chartData.alarmCount,
type: 'line',
smooth: true,
symbol: 'none',
lineStyle: {
color: '#3692FF',
width: 2
},
// 悬停时颜色
itemStyle: {
color: '#3692FF'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(54, 146, 255, 0.3)'
},
{
offset: 1,
color: 'rgba(54, 146, 255, 0.05)'
}
])
}
}
]
};
// 设置报警处理效率图表配置
const processEfficiencyOption = {
tooltip: {
trigger: 'axis',
},
grid: {
left: '-45px',
right: '0%',
bottom: '0%',
top: '0%',
containLabel: true,
},
xAxis: {
type: 'category',
//文本颜色
axisLabel: {
textStyle: {
color: '#999999'
},
interval: 2 // 每隔三天显示一个标签（索引从0开始，间隔为2表示每3个数据点显示一个）
},
// x轴线样式
axisLine: {
show: false,
lineStyle: {
color: "#427394"
}
},
axisTick: {
show: false
},
data: props.chartData.dates,
},
yAxis: {
type: 'value',
show: false,
axisLabel: {
textStyle: {
color: '#C5D6E6'
}
},
splitLine: {
show: false
}
},
series: [
{
data: props.chartData.processEfficiency,
type: 'line',
smooth: true,
symbol: 'none',
lineStyle: {
color: '#FF9900',
width: 2
},
// 悬停时颜色
itemStyle: {
color: '#FF9900'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255, 140, 0, 0.3)'
},
{
offset: 1,
color: 'rgba(255, 140, 0, 0.05)'
}
])
}
}
]
};
alarmCountChart.setOption(alarmCountOption);
processEfficiencyChart.setOption(processEfficiencyOption);
};
// 处理窗口大小变化
const handleResize = () => {
if (alarmCountChart) {
alarmCountChart.resize();
}
if (processEfficiencyChart) {
processEfficiencyChart.resize();
}
};
onMounted(() => {
initCharts();
window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
if (alarmCountChart) {
alarmCountChart.dispose();
}
if (processEfficiencyChart) {
processEfficiencyChart.dispose();
}
});
</script>
<style scoped lang="scss">
.data-dashboard {
width: 100%;
height: 100%;
background: #fff;
padding:0 20px;
box-sizing: border-box;
}
.dashboard-header {
align-items: center;
}
.dashboard-header h2 {
margin: 0;
font-size: 18px;
font-weight: 500;
color: #333;
}
.update-time {
font-size: 12px;
color: #999;
}
.metrics-container {
border-radius: 4px;
overflow: hidden;
background-color: rgba(242, 248, 252, 1);
background-color: rgba(242, 248, 252, 1);
}
.metric-card {
padding: 20px;
text-align: center;
position: relative;
height: 100%;
}
/* 移除最后一个卡片的分隔线 */
.metrics-container .el-col:last-child .metric-card::after {
display: none;
}
.metric-value {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 8px;
}
.metric-label {
font-size: 14px;
color: #666;
margin-bottom: 4px;
}
.metric-change {
font-size: 12px;
color: #999;
}
.up {
color: #ff4d4f;
}
.down {
color: #52c41a;
}
.trend-container {
width: 100%;
}
.trend-header-flex {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.trend-section {
background: #fff;
border-radius: 4px;
padding: 20px;
}
.trend-header {
align-items: center;
}
.trend-header h3 {
margin: 0;
font-size: 16px;
font-weight: 500;
color: #333;
}
.chart-container {
background: #fff;
border-radius: 4px;
display: flex;
align-items: center;
height: 150px;
}
.chart-left-right-layout {
display: flex;
align-items: center;
height: 100%;
width: 100%;
}
.chart-info-container {
width: 110px;
}
.chart-title {
font-size: 14px;
color: #666;
margin-bottom: 8px;
}
.chart-total {
font-size: 32px;
font-weight: bold;
color: #333;
margin-bottom: 8px;
}
.chart-value {
font-size: 12px;
color: #999;
margin-bottom: 0;
}
.chart-content {
flex: 1;
height: 110px;
}
// Element Plus 样式覆盖
:deep(.el-select) {
width: 80px;
}
</style>