|
|
@@ -2,7 +2,13 @@
|
|
|
// ORDER-FLOW-OVERVIEW-SHELL-1 + ORDER-FLOW-OVERVIEW-FILTERS-1:
|
|
|
// 总览页壳 + 7 维筛选条(status/node/keyword/customer/productLine/region/severity)。
|
|
|
// KPI / 命中订单 / 客户分组随 store.filteredOrders 变化;空结果时 KPI 显示 --。
|
|
|
-import { computed, onMounted, ref } from 'vue';
|
|
|
+//
|
|
|
+// 本页只承载「订单/客户总览」,不再使用页签容器。
|
|
|
+// 原先另有「执行流程环节 / 异常发生部门 / 处理部门」三个页签,但自 ac04f20b5 建页起
|
|
|
+// 就只是「后续迭代接入」占位、从未实现(全 ref + 悬挂对象已核)。空页签对用户是噪音,
|
|
|
+// 故整体移除页签栏。这三类分析目前由 S8DashboardPage(异常监控看板)承载,
|
|
|
+// 其面板为 object / process / occurrence / responsible,口径是**全局**、不按订单集合收窄。
|
|
|
+import { computed, onMounted } from 'vue';
|
|
|
import { useRouter } from 'vue-router';
|
|
|
import { useOrderExecutionStore } from '/@/stores/orderExecution';
|
|
|
import type {
|
|
|
@@ -55,8 +61,6 @@ function onOpenChain(order: SalesOrderExecution) {
|
|
|
function onExpandOrder(code: string) {
|
|
|
void store.loadDetailFromDomain(code);
|
|
|
}
|
|
|
-
|
|
|
-const activeTab = ref<'overview' | 'execution' | 'source-dept' | 'handle-dept'>('overview');
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
@@ -75,61 +79,47 @@ const activeTab = ref<'overview' | 'execution' | 'source-dept' | 'handle-dept'>(
|
|
|
</template>
|
|
|
</el-alert>
|
|
|
|
|
|
- <el-tabs v-model="activeTab" class="oe-dashboard__tabs">
|
|
|
- <el-tab-pane label="订单/客户总览" name="overview">
|
|
|
- <section class="oe-dashboard__section">
|
|
|
- <OrderExecutionFiltersBar
|
|
|
- :model-value="filters"
|
|
|
- :options="filterOptions"
|
|
|
- @update:model-value="onFiltersUpdate"
|
|
|
- @clear="onFiltersClear"
|
|
|
- />
|
|
|
-
|
|
|
- <OrderExecutionKpiCards :kpi="kpi" :ready="ready" />
|
|
|
-
|
|
|
- <div class="oe-dashboard__counts">
|
|
|
- <div class="oe-dashboard__count">
|
|
|
- <span class="oe-dashboard__count-dot oe-dashboard__count-dot--accent" />
|
|
|
- <span class="oe-dashboard__count-label">当前命中订单</span>
|
|
|
- <span class="oe-dashboard__count-value">{{ orderCount }}</span>
|
|
|
- <span class="oe-dashboard__count-total">/ 全部 {{ totalOrderCount }}</span>
|
|
|
- </div>
|
|
|
- <span class="oe-dashboard__count-divider" />
|
|
|
- <div class="oe-dashboard__count">
|
|
|
- <span class="oe-dashboard__count-dot oe-dashboard__count-dot--green" />
|
|
|
- <span class="oe-dashboard__count-label">覆盖客户</span>
|
|
|
- <span class="oe-dashboard__count-value">{{ customerCount }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="oe-dashboard__group-title">
|
|
|
- <span class="oe-dashboard__group-bar" />
|
|
|
- <h2 class="oe-dashboard__group-text">订单执行列表</h2>
|
|
|
- </div>
|
|
|
-
|
|
|
- <OrderExecutionOrderList
|
|
|
- v-if="!isEmptyResult"
|
|
|
- :orders="filteredOrders"
|
|
|
- @open-chain="onOpenChain"
|
|
|
- @expand-order="onExpandOrder"
|
|
|
- />
|
|
|
- <div v-else class="oe-dashboard__empty">
|
|
|
- <template v-if="loadError">订单数据未能加载,请点击上方「重试」。</template>
|
|
|
- <template v-else>当前筛选无匹配订单,可点击「重置」恢复全部。</template>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- </el-tab-pane>
|
|
|
-
|
|
|
- <el-tab-pane label="执行流程环节" name="execution">
|
|
|
- <div class="oe-dashboard__placeholder">后续迭代接入</div>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="异常发生部门" name="source-dept">
|
|
|
- <div class="oe-dashboard__placeholder">后续迭代接入</div>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="处理部门" name="handle-dept">
|
|
|
- <div class="oe-dashboard__placeholder">后续迭代接入</div>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
+ <section class="oe-dashboard__section">
|
|
|
+ <OrderExecutionFiltersBar
|
|
|
+ :model-value="filters"
|
|
|
+ :options="filterOptions"
|
|
|
+ @update:model-value="onFiltersUpdate"
|
|
|
+ @clear="onFiltersClear"
|
|
|
+ />
|
|
|
+
|
|
|
+ <OrderExecutionKpiCards :kpi="kpi" :ready="ready" />
|
|
|
+
|
|
|
+ <div class="oe-dashboard__counts">
|
|
|
+ <div class="oe-dashboard__count">
|
|
|
+ <span class="oe-dashboard__count-dot oe-dashboard__count-dot--accent" />
|
|
|
+ <span class="oe-dashboard__count-label">当前命中订单</span>
|
|
|
+ <span class="oe-dashboard__count-value">{{ orderCount }}</span>
|
|
|
+ <span class="oe-dashboard__count-total">/ 全部 {{ totalOrderCount }}</span>
|
|
|
+ </div>
|
|
|
+ <span class="oe-dashboard__count-divider" />
|
|
|
+ <div class="oe-dashboard__count">
|
|
|
+ <span class="oe-dashboard__count-dot oe-dashboard__count-dot--green" />
|
|
|
+ <span class="oe-dashboard__count-label">覆盖客户</span>
|
|
|
+ <span class="oe-dashboard__count-value">{{ customerCount }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="oe-dashboard__group-title">
|
|
|
+ <span class="oe-dashboard__group-bar" />
|
|
|
+ <h2 class="oe-dashboard__group-text">订单执行列表</h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <OrderExecutionOrderList
|
|
|
+ v-if="!isEmptyResult"
|
|
|
+ :orders="filteredOrders"
|
|
|
+ @open-chain="onOpenChain"
|
|
|
+ @expand-order="onExpandOrder"
|
|
|
+ />
|
|
|
+ <div v-else class="oe-dashboard__empty">
|
|
|
+ <template v-if="loadError">订单数据未能加载,请点击上方「重试」。</template>
|
|
|
+ <template v-else>当前筛选无匹配订单,可点击「重置」恢复全部。</template>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -204,26 +194,6 @@ const activeTab = ref<'overview' | 'execution' | 'source-dept' | 'handle-dept'>(
|
|
|
font-family: 'JetBrains Mono', 'Cascadia Code', Menlo, monospace;
|
|
|
}
|
|
|
|
|
|
-.oe-dashboard__tabs {
|
|
|
- --el-tabs-header-height: 44px;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.oe-dashboard__tabs .el-tabs__item) {
|
|
|
- color: var(--order-text-secondary);
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.oe-dashboard__tabs .el-tabs__item.is-active) {
|
|
|
- color: var(--order-accent);
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.oe-dashboard__tabs .el-tabs__active-bar) {
|
|
|
- background-color: var(--order-accent);
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.oe-dashboard__tabs .el-tabs__nav-wrap::after) {
|
|
|
- background-color: var(--order-border);
|
|
|
-}
|
|
|
-
|
|
|
.oe-dashboard__section {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -319,19 +289,6 @@ const activeTab = ref<'overview' | 'execution' | 'source-dept' | 'handle-dept'>(
|
|
|
margin: 0 0 12px;
|
|
|
}
|
|
|
|
|
|
-.oe-dashboard__placeholder {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- min-height: 240px;
|
|
|
- border-radius: 14px;
|
|
|
- background: var(--order-panel);
|
|
|
- border: 1px dashed var(--order-border);
|
|
|
- color: var(--order-text-secondary);
|
|
|
- font-size: 14px;
|
|
|
- letter-spacing: 0.04em;
|
|
|
-}
|
|
|
-
|
|
|
@media (max-width: 768px) {
|
|
|
.oe-dashboard__header {
|
|
|
flex-direction: column;
|