|
|
@@ -5,26 +5,6 @@
|
|
|
<span class="s8-dept-severity__code">S8</span>
|
|
|
<span class="s8-dept-severity__title">部门严重异常</span>
|
|
|
</div>
|
|
|
- <span class="s8-dept-severity__subtitle">按责任部门聚合</span>
|
|
|
- </div>
|
|
|
- <!-- TASK-013-DEPT-CARD-UI-COMPLETE-1:顶部汇总条 -->
|
|
|
- <div class="s8-dept-severity__summary">
|
|
|
- <div class="s8-dept-severity__summary-item">
|
|
|
- <span class="s8-dept-severity__summary-label">严重异常总数</span>
|
|
|
- <span class="s8-dept-severity__summary-value s8-dept-severity__summary-value--hot">{{ totalSerious }}</span>
|
|
|
- </div>
|
|
|
- <div class="s8-dept-severity__summary-item">
|
|
|
- <span class="s8-dept-severity__summary-label">涉及部门</span>
|
|
|
- <span class="s8-dept-severity__summary-value">{{ involvedDepts }}</span>
|
|
|
- </div>
|
|
|
- <div class="s8-dept-severity__summary-item">
|
|
|
- <span class="s8-dept-severity__summary-label">平均处理时间</span>
|
|
|
- <span class="s8-dept-severity__summary-value s8-dept-severity__summary-value--placeholder">{{ DISPLAY_PLACEHOLDER }}</span>
|
|
|
- </div>
|
|
|
- <div class="s8-dept-severity__summary-item">
|
|
|
- <span class="s8-dept-severity__summary-label">关闭率</span>
|
|
|
- <span class="s8-dept-severity__summary-value s8-dept-severity__summary-value--placeholder">{{ DISPLAY_PLACEHOLDER }}</span>
|
|
|
- </div>
|
|
|
</div>
|
|
|
<el-tabs v-model="activeTab" class="s8-dept-severity__tabs">
|
|
|
<el-tab-pane label="严重" name="serious">
|
|
|
@@ -92,12 +72,6 @@ const sortedItems = computed(() => {
|
|
|
});
|
|
|
});
|
|
|
|
|
|
-const totalSerious = computed(() =>
|
|
|
- (props.items ?? []).reduce((acc, item) => acc + (item?.seriousCount ?? 0), 0),
|
|
|
-);
|
|
|
-
|
|
|
-const involvedDepts = computed(() => sortedItems.value.length);
|
|
|
-
|
|
|
const minHeightStyle = computed<CSSProperties>(() => {
|
|
|
if (!props.minHeight || props.minHeight <= 0) return {};
|
|
|
return { minHeight: `${props.minHeight}px` };
|
|
|
@@ -146,51 +120,6 @@ const minHeightStyle = computed<CSSProperties>(() => {
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
-.s8-dept-severity__subtitle {
|
|
|
- font-size: 11px;
|
|
|
- color: #64748b;
|
|
|
-}
|
|
|
-
|
|
|
-.s8-dept-severity__summary {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
- gap: 6px;
|
|
|
- padding: 6px 4px;
|
|
|
- border-radius: 6px;
|
|
|
- background: rgba(239, 68, 68, 0.04);
|
|
|
- border: 1px solid rgba(239, 68, 68, 0.12);
|
|
|
-}
|
|
|
-
|
|
|
-.s8-dept-severity__summary-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- min-width: 0;
|
|
|
- line-height: 1.2;
|
|
|
-}
|
|
|
-
|
|
|
-.s8-dept-severity__summary-label {
|
|
|
- font-size: 10px;
|
|
|
- color: #64748b;
|
|
|
- white-space: nowrap;
|
|
|
-}
|
|
|
-
|
|
|
-.s8-dept-severity__summary-value {
|
|
|
- font-family: 'Roboto Mono', monospace;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 700;
|
|
|
- color: #e2e8f0;
|
|
|
-}
|
|
|
-
|
|
|
-.s8-dept-severity__summary-value--hot {
|
|
|
- color: #ef4444;
|
|
|
-}
|
|
|
-
|
|
|
-.s8-dept-severity__summary-value--placeholder {
|
|
|
- color: #475569;
|
|
|
- font-weight: 600;
|
|
|
-}
|
|
|
-
|
|
|
.s8-dept-severity__tabs {
|
|
|
flex: 1;
|
|
|
min-height: 0;
|