hongawen
e9214137c1
- 移除 execution-list-panel.vue 组件并将功能整合到执行区域 - 新增 execution-section.vue 组件替代原有的列表面板 - 将 task-workspace.vue 重命名为 task-workspace-comp.vue 并更新引用 - 引入 useTaskViewContext 组合式 API 进行任务视图上下文管理 - 添加跨执行任务状态统计接口调用和数据处理逻辑 - 重构执行状态筛选和任务创建权限判断逻辑 - 更新执行选择、搜索和重置功能的事件处理方式 - 调整页面布局结构，优化左右分栏的内容组织方式 - 完善执行详情获取和状态操作的业务流程 - 优化执行分配和状态变更的异步处理机制
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>
|