1.完成生产管理-电量分析静态界面
2.完成综合管理-人员排班管理交互 3.修改部分逻辑和样式
This commit is contained in:
@ -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);
|
||||
|
||||
Reference in New Issue
Block a user