87 lines
2.0 KiB
Vue
87 lines
2.0 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import WorkbenchModuleCard from './workbench-module-card.vue';
|
|||
|
|
|
|||
|
|
defineOptions({ name: 'WorkbenchTicketSla' });
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
editing?: boolean;
|
|||
|
|
collapsed?: boolean;
|
|||
|
|
}
|
|||
|
|
withDefaults(defineProps<Props>(), { editing: false, collapsed: false });
|
|||
|
|
defineEmits<{ (e: 'hide'): void; (e: 'toggle-collapse'): void }>();
|
|||
|
|
|
|||
|
|
const unclosed = 12;
|
|||
|
|
const overtime = 3;
|
|||
|
|
const willOvertime = 5;
|
|||
|
|
const byPriority = { high: 4, mid: 6, low: 2 };
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<WorkbenchModuleCard
|
|||
|
|
title="工单 SLA 总览"
|
|||
|
|
icon="mdi:timer-alert-outline"
|
|||
|
|
:editing="editing"
|
|||
|
|
:collapsed="collapsed"
|
|||
|
|
@hide="$emit('hide')"
|
|||
|
|
@toggle-collapse="$emit('toggle-collapse')"
|
|||
|
|
>
|
|||
|
|
<ElAlert type="warning" :closable="false" class="pending-hint">
|
|||
|
|
工单业务暂未上线，当前为 mock 数据；正式接口落地后接通。
|
|||
|
|
</ElAlert>
|
|||
|
|
<div class="sla-grid">
|
|||
|
|
<div class="sla-cell tone-rose">
|
|||
|
|
<div class="sla-n">{{ unclosed }}</div>
|
|||
|
|
<div class="sla-lbl">未关闭</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sla-cell tone-rose">
|
|||
|
|
<div class="sla-n">{{ overtime }}</div>
|
|||
|
|
<div class="sla-lbl">超时</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sla-cell tone-amber">
|
|||
|
|
<div class="sla-n">{{ willOvertime }}</div>
|
|||
|
|
<div class="sla-lbl">将超时</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sla-hint">按优先级：高 {{ byPriority.high }} · 中 {{ byPriority.mid }} · 低 {{ byPriority.low }}</div>
|
|||
|
|
</WorkbenchModuleCard>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.pending-hint {
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.sla-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(3, 1fr);
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
.sla-cell {
|
|||
|
|
padding: 12px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
.sla-cell.tone-rose {
|
|||
|
|
background: #fef2f2;
|
|||
|
|
color: #991b1b;
|
|||
|
|
}
|
|||
|
|
.sla-cell.tone-amber {
|
|||
|
|
background: #fffbeb;
|
|||
|
|
color: #92400e;
|
|||
|
|
}
|
|||
|
|
.sla-n {
|
|||
|
|
font-size: 22px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
line-height: 1.2;
|
|||
|
|
}
|
|||
|
|
.sla-lbl {
|
|||
|
|
font-size: 11px;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
opacity: 0.85;
|
|||
|
|
}
|
|||
|
|
.sla-hint {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: var(--el-text-color-secondary);
|
|||
|
|
}
|
|||
|
|
</style>
|