109 lines
2.5 KiB
Vue
109 lines
2.5 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import WorkbenchModuleCard from './workbench-module-card.vue';
|
||
|
|
|
||
|
|
defineOptions({ name: 'WorkbenchTeamLoad' });
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
editing?: boolean;
|
||
|
|
collapsed?: boolean;
|
||
|
|
}
|
||
|
|
withDefaults(defineProps<Props>(), { editing: false, collapsed: false });
|
||
|
|
defineEmits<{ (e: 'hide'): void; (e: 'toggle-collapse'): void }>();
|
||
|
|
|
||
|
|
interface LoadRow {
|
||
|
|
name: string;
|
||
|
|
inProgress: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
const rows: LoadRow[] = [
|
||
|
|
{ name: '张三', inProgress: 5 },
|
||
|
|
{ name: '李四', inProgress: 3 },
|
||
|
|
{ name: '王五', inProgress: 7 },
|
||
|
|
{ name: '赵六', inProgress: 2 },
|
||
|
|
{ name: '钱七', inProgress: 5 }
|
||
|
|
];
|
||
|
|
|
||
|
|
const MAX = 10;
|
||
|
|
function level(n: number): 'ok' | 'warn' | 'over' {
|
||
|
|
if (n >= 6) return 'over';
|
||
|
|
if (n >= 4) return 'warn';
|
||
|
|
return 'ok';
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<WorkbenchModuleCard
|
||
|
|
title="团队负载"
|
||
|
|
icon="mdi:scale-balance"
|
||
|
|
:editing="editing"
|
||
|
|
:collapsed="collapsed"
|
||
|
|
@hide="$emit('hide')"
|
||
|
|
@toggle-collapse="$emit('toggle-collapse')"
|
||
|
|
>
|
||
|
|
<ul class="load-list">
|
||
|
|
<li v-for="row in rows" :key="row.name" class="load-item">
|
||
|
|
<span class="load-name">{{ row.name }}</span>
|
||
|
|
<div class="load-bar">
|
||
|
|
<div
|
||
|
|
class="load-bar-inner"
|
||
|
|
:class="`is-${level(row.inProgress)}`"
|
||
|
|
:style="{ width: `${(row.inProgress / MAX) * 100}%` }"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<span class="load-n" :class="{ 'text-danger': level(row.inProgress) === 'over' }">
|
||
|
|
{{ row.inProgress }}{{ level(row.inProgress) === 'over' ? ' ⚠' : '' }}
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<div class="load-hint">阈值 ≥6 高负载 · ≥4 中负载</div>
|
||
|
|
</WorkbenchModuleCard>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.load-list {
|
||
|
|
list-style: none;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
.load-item {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 60px 1fr 50px;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
padding: 6px 0;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
.load-bar {
|
||
|
|
height: 6px;
|
||
|
|
border-radius: 3px;
|
||
|
|
background: var(--el-fill-color);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.load-bar-inner {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.load-bar-inner.is-ok {
|
||
|
|
background: var(--el-color-success);
|
||
|
|
}
|
||
|
|
.load-bar-inner.is-warn {
|
||
|
|
background: var(--el-color-warning);
|
||
|
|
}
|
||
|
|
.load-bar-inner.is-over {
|
||
|
|
background: var(--el-color-danger);
|
||
|
|
}
|
||
|
|
.load-n {
|
||
|
|
text-align: right;
|
||
|
|
font-size: 12px;
|
||
|
|
color: var(--el-text-color-secondary);
|
||
|
|
}
|
||
|
|
.text-danger {
|
||
|
|
color: var(--el-color-danger);
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
.load-hint {
|
||
|
|
margin-top: 8px;
|
||
|
|
font-size: 11px;
|
||
|
|
color: var(--el-text-color-secondary);
|
||
|
|
}
|
||
|
|
</style>
|