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

1.新增报警管理部分图表

Browse Source 
2.修改箭头为本地图片
3.优化部分样式
4.完成性能比水滴图
This commit is contained in:
re-JZzzz
2025-09-17 20:02:08 +08:00
parent f28a617bb3
commit 63167f66e7
23 changed files with 2184 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/views/pvSystem/alarmAnalysis/components/data.vue
View File

@ -18,8 +18,12 @@
<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>
<img v-if="props.dashboardData.updates.todayAlarmTotal.type === 'up'" src="/src/assets/demo/up.png"
class="trend-icon" alt="上升">
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
props.dashboardData.updates.todayAlarmTotal.value }}
</span>
</div>
</div>
</el-col>
@ -29,8 +33,11 @@
<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>
<img v-if="props.dashboardData.updates.unhandledAlarms.type === 'up'" src="/src/assets/demo/up.png"
class="trend-icon" alt="上升">
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
props.dashboardData.updates.unhandledAlarms.value }}
</span></div>
</div>
</el-col>
@ -40,8 +47,11 @@
<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>
<img v-if="props.dashboardData.updates.handledAlarms.type === 'up'" src="/src/assets/demo/up.png"
class="trend-icon" alt="上升">
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
props.dashboardData.updates.handledAlarms.value }}
</span></div>
</div>
</el-col>
@ -50,9 +60,15 @@
<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 class="metric-change">
较上周
<span :class="props.dashboardData.updates.avgProcessTime.type">
<img v-if="props.dashboardData.updates.avgProcessTime.type === 'up'" src="/src/assets/demo/up.png"
class="trend-icon" alt="上升">
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
props.dashboardData.updates.avgProcessTime.value }}
</span>
</div>
</div>
</el-col>
</el-row>
@ -67,7 +83,7 @@
<el-option label="近90天" value="90days" />
</el-select>
</div>
<el-col :span="24">
<div class="trend-section">
<el-row :gutter="20">
@ -76,11 +92,17 @@
<div class="chart-container">
<div class="chart-left-right-layout">
<div class="chart-info-container">
<div class="chart-title">报警数量(次) </div>
<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 class="chart-value">
<span>较昨日</span>
<img v-if="props.chartData.dailyChanges.processEfficiency.type === 'up'"
src="/src/assets/demo/up.png" class="trend-icon" alt="上升">
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">
<span :class="props.chartData.dailyChanges.processEfficiency.type">
{{ props.chartData.dailyChanges.processEfficiency.value }}
</span>
</div>
</div>
<div ref="alarmCountRef" class="chart-content"></div>
</div>
@ -93,9 +115,15 @@
<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 class="chart-value">
<span>较昨日</span>
<img v-if="props.chartData.dailyChanges.processEfficiency.type === 'up'"
src="/src/assets/demo/up.png" class="trend-icon" alt="上升">
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">
<span :class="props.chartData.dailyChanges.processEfficiency.type">
{{ props.chartData.dailyChanges.processEfficiency.value }}
</span>
</div>
</div>
<div ref="processEfficiencyRef" class="chart-content"></div>
</div>
@ -141,7 +169,7 @@ const props = defineProps({
processEfficiency: '89%'
},
dailyChanges: {
alarmCount: { value: '0.9%', type: 'down' },
alarmCount: { value: '0.9%', type: 'up' },
processEfficiency: { value: '0.9%', type: 'down' }
}
})
@ -172,7 +200,7 @@ const initCharts = () => {
trigger: 'axis',
},
grid: {
left: '-45px',
left: '-38px',
right: '0%',
bottom: '0%',
top: '0%',
@ -248,7 +276,7 @@ const initCharts = () => {
trigger: 'axis',
},
grid: {
left: '-45px',
left: '-38px',
right: '0%',
bottom: '0%',
top: '0%',
@ -352,7 +380,7 @@ onUnmounted(() => {
width: 100%;
height: 100%;
background: #fff;
padding:0 20px;
padding: 0 20px;
box-sizing: border-box;
}
@ -411,11 +439,18 @@ onUnmounted(() => {
}
.up {
color: #ff4d4f;
color: #00B87A;
}
.down {
color: #52c41a;
color: #ff4d4f;
}
.trend-icon {
// width: 12px;
// height: 12px;
margin-right: 2px;
vertical-align: middle;
}
.trend-container {
@ -436,7 +471,7 @@ onUnmounted(() => {
}
.trend-header {
align-items: center;
}
@ -483,6 +518,24 @@ onUnmounted(() => {
font-size: 12px;
color: #999;
margin-bottom: 0;
display: flex;
align-items: center;
gap: 4px;
line-height: 1;
}
.chart-value span {
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.chart-value .trend-icon {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
margin: 0;
}
.chart-content {