1.完成生产管理-电量分析静态界面

2.完成综合管理-人员排班管理交互
3.修改部分逻辑和样式
This commit is contained in:
re-JZzzz
2025-09-22 16:15:50 +08:00
parent 55f2aeea39
commit f0609716bc
11 changed files with 894 additions and 191 deletions

View File

@ -9,64 +9,17 @@
<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">
<el-col v-for="card in cardData" :key="card.key" :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">
<img v-if="props.dashboardData.updates.todayAlarmTotal.type === 'up'" src="/src/assets/demo/up.png"
<div class="metric-value">{{ props.dashboardData[card.key] }}</div>
<div class="metric-label">{{ card.label }}</div>
<div class="metric-change">较上周 <span :class="props.dashboardData.updates[card.updateKey].type">
<img v-if="props.dashboardData.updates[card.updateKey].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>
<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">
<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>
<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">
<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>
<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">
<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 }}
props.dashboardData.updates[card.updateKey].value }}
</span>
</div>
</div>
@ -176,6 +129,30 @@ const props = defineProps({
}
});
// 卡片数据配置
const cardData = [
{
key: 'todayAlarmTotal',
label: '今日报警总数',
updateKey: 'todayAlarmTotal'
},
{
key: 'unhandledAlarms',
label: '未处理报警',
updateKey: 'unhandledAlarms'
},
{
key: 'handledAlarms',
label: '已处理报警',
updateKey: 'handledAlarms'
},
{
key: 'avgProcessTime',
label: '平均处理时长',
updateKey: 'avgProcessTime'
}
];
const timeRange = ref('7days');
const alarmCountRef = ref(null);
const processEfficiencyRef = ref(null);