qizhong/inquiry_robot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

分析看板补齐成本趋势与排名：主账聚合近7日线路均价，后台按真实数据绘图。

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
linmianxun
2026-09-14 21:49:48 +08:00
co-authored by Cursor
parent 07c988e61f
commit 9d4889c482
5 changed files with 484 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
inquiry-backend/src/views/inquiry/dashboard/index.vue
+127 -10
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
/**
* 分析看板：对接主账 /inquiry/dashboard/metrics。
* 指标 / 趋势 / 排名来自聚合接口；成本趋势本期主账未提供，展示空态不造假数。
* 指标 / 询价趋势 / 人员排名 / 成本趋势均来自主账聚合；禁止用 Mock 假线冒充生产。
*/
import { computed, onMounted, onUnmounted, ref } from "vue";
import { message } from "ant-design-vue";
@@ -13,8 +13,12 @@ const todayMetrics = ref<MetricCard[]>([]);
const inquiryTrend = ref<InquiryPoint[]>([]);
const rankingPeople = ref<RankingPerson[]>([]);
const rankingDepts = ref<string[]>([]);
/** 成本趋势主账暂无接口，保持空数组避免 Mock 假线。 */
/** 成本趋势：主账 costRoutes（近 7 日线路均价）。 */
const costRoutes = ref<CostRoute[]>([]);
const costDateLabels = ref<string[]>([]);
const COST_PLOT_TOP = 36;
const COST_PLOT_BOTTOM = 186;
const now = new Date();
const isoDay = now.toISOString().slice(0, 10);
@@ -87,6 +91,15 @@ async function loadMetrics() {
rankingDepts.value = Array.from(
new Set(rankingPeople.value.map((p) => p.dept).filter((d) => d && d !== "-")),
);
const dates: string[] = Array.isArray(data.costDates) && data.costDates.length
? data.costDates.map((d: any) => String(d))
: inquiryTrend.value.map((p) => p.date);
costDateLabels.value = dates;
const rawRoutes = (data.costRoutes || []) as any[];
costRoutes.value = buildCostRouteViews(rawRoutes, dates);
selectedRoutes.value = costRoutes.value.map((r) => r.id);
const t = new Date();
const pad = (n: number) => String(n).padStart(2, "0");
updatedTime.value = `${pad(t.getHours())}：${pad(t.getMinutes())}`;
@@ -97,6 +110,76 @@ async function loadMetrics() {
}
}
/**
* 把主账 costRoutes.values 转成 SVG path + 数据点。
* 只有一天有金额时 path 只有 M 看不见线，必须画 points。
*/
function buildCostRouteViews(rawRoutes: any[], dates: string[]): CostRoute[] {
const n = Math.max(dates.length, 1);
const xs = dates.map((_, i) => (n === 1 ? 380 : 36 + (654 / (n - 1)) * i));
const parsed = rawRoutes.map((r) => {
const values = Array.isArray(r.values)
? r.values.map((v: any) => (v == null || v === "" ? null : Number(v)))
: dates.map(() => null);
while (values.length < dates.length) values.push(null);
return {
id: String(r.id || r.label || "route"),
label: String(r.label || r.id || "线路"),
color: String(r.color || "#2563eb"),
values: values.slice(0, dates.length) as Array<number | null>,
};
});
const nums = parsed.flatMap((r) => r.values.filter((v): v is number => v != null && !Number.isNaN(v) && v > 0));
const max = Math.max(...nums, 1);
// 单点时 min==max 会压成一条横线贴顶/贴底，留 10% 边距更易看见
let min = nums.length ? Math.min(...nums) : 0;
if (nums.length && max - min < max * 0.05) {
min = Math.max(0, min - max * 0.1);
}
const range = Math.max(max - min, 1);
const plotH = COST_PLOT_BOTTOM - COST_PLOT_TOP;
const yFor = (v: number) => COST_PLOT_BOTTOM - ((v - min) / range) * plotH;
return parsed.map((r) => {
const points: Array<{ x: number; y: number; index: number }> = [];
r.values.forEach((v, i) => {
if (v == null || Number.isNaN(v)) return;
points.push({ x: xs[i], y: yFor(v), index: i });
});
return {
...r,
path: pathFromValues(r.values, xs, yFor),
points,
};
});
}
/** 有值连线，无值断点（不造假插值）。 */
function pathFromValues(
values: Array<number | null>,
xs: number[],
yFor: (v: number) => number,
): string {
let d = "";
let started = false;
for (let i = 0; i < values.length; i++) {
const v = values[i];
if (v == null || Number.isNaN(v)) {
started = false;
continue;
}
const x = xs[i];
const y = yFor(v);
d += `${started ? "L" : "M"}${x.toFixed(1)} ${y.toFixed(1)} `;
started = true;
}
return d.trim();
}
function formatCost(v: number | null | undefined) {
if (v == null || Number.isNaN(v)) return "-";
return v.toLocaleString("zh-CN", { maximumFractionDigits: 2 });
}
const inquirySvg = computed(() => {
const points = inquiryTrend.value.length
? inquiryTrend.value
@@ -128,7 +211,30 @@ const rankingRows = computed(() => {
return rows.sort((a, b) => b.volumeNum - a.volumeNum || a.name.localeCompare(b.name, "zh-CN"));
});
const costDates = computed(() => inquiryTrend.value.map((p) => p.date));
const costDates = computed(() =>
costDateLabels.value.length ? costDateLabels.value : inquiryTrend.value.map((p) => p.date),
);
const costSampleDays = computed(() => {
const set = new Set<string>();
for (const r of costRoutes.value) {
r.values.forEach((v, i) => {
if (v != null && !Number.isNaN(v) && costDates.value[i]) set.add(costDates.value[i]);
});
}
return [...set];
});
const costFootnote = computed(() => {
if (!costRoutes.value.length) {
return "近 7 日暂无带金额的工单，有报价后将显示线路成本趋势";
}
const days = costSampleDays.value;
if (!days.length) {
return "已选线路在近 7 日无金额样本";
}
return `成本来自主账工单（成本价优先，缺省销售价）；有金额日期：${days.join("、")}，其余日悬停为 —`;
});
const costXs = computed(() => {
const n = Math.max(costDates.value.length, 1);
return costDates.value.map((_, i) => (n === 1 ? 380 : 36 + (654 / (n - 1)) * i));
@@ -180,17 +286,15 @@ function hideInquiryTip() {
chartTip.value.visible = false;
}
function showCostTip(date: string, x: number, wrapEl: HTMLElement | null) {
function showCostTip(date: string, x: number, dateIndex: number, wrapEl: HTMLElement | null) {
if (!wrapEl) return;
const box = wrapEl.getBoundingClientRect();
const routes = filteredRoutes.value;
const lines =
routes.length === 0
? ["未选择线路"]
: [
...routes.slice(0, 3).map((r) => r.label),
...(routes.length > 3 ? [`等 ${routes.length} 条`] : []),
];
: routes.slice(0, 6).map((r) => `${r.label}: ${formatCost(r.values[dateIndex])}`);
if (routes.length > 6) lines.push(`等 ${routes.length} 条`);
costTip.value = {
visible: true,
left: `${(x / 760) * box.width}px`,
@@ -434,11 +538,24 @@ onUnmounted(() => document.removeEventListener("click", onDocClick));
stroke-linecap="round"
stroke-linejoin="round"
/>
<!-- 有金额的日子画点：近 7 日往往只有一两天有价，单点折线不可见 -->
<g v-for="r in filteredRoutes" :key="'pts-' + r.id">
<circle
v-for="p in r.points"
:key="r.id + '-' + p.index"
:cx="p.x"
:cy="p.y"
r="4"
:fill="r.color"
stroke="#ffffff"
stroke-width="2"
/>
</g>
<g
v-for="(x, i) in costXs"
:key="'cx-' + costDates[i]"
class="cost-point"
@mouseenter="showCostTip(costDates[i], x, costWrap)"
@mouseenter="showCostTip(costDates[i], x, i, costWrap)"
@mouseleave="hideCostTip"
>
<rect :x="x - 40" y="28" width="80" height="165" fill="transparent" style="cursor: pointer" />
@@ -458,7 +575,7 @@ onUnmounted(() => document.removeEventListener("click", onDocClick));
</div>
</div>
<div class="dash-cost-footnote">
{{ costRoutes.length ? "成本数据来源于 TMS" : "成本趋势主账暂未开放，待接口就绪后展示" }}
{{ costFootnote }}
</div>
</div>
</div>
inquiry-backend/src/views/inquiry/mock/dashboard.ts
+14 -18
View File
@@ -23,7 +23,12 @@ export type CostRoute = {
id: string;
label: string;
color: string;
/** 与 costDates 对齐；某日无样本为 null */
values: Array<number | null>;
/** 前端根据 values 生成的 SVG path */
path: string;
/** 有金额的日子画点（仅一天有数时折线不可见，靠点可见） */
points: Array<{ x: number; y: number; index: number }>;
};
/** 今日视角九指标（与原型默认展示一致） */
@@ -78,23 +83,14 @@ export const rankingDepts = [
"陆运产品部",
];
/** 成本趋势折线：路径坐标对齐原型 SVG */
/** 成本趋势折线：路径坐标对齐原型 SVG（仅作样式参考；正式数据来自主账） */
export const costRoutes: CostRoute[] = [
{ id: "cgo-kul", label: "CGO-KUL", color: "#2563eb", path: "M36 56 L145 51 L254 61 L363 46 L472 50 L581 41 L690 36" },
{ id: "szx-kul", label: "SZX-KUL", color: "#3b82f6", path: "M36 64 L145 59 L254 69 L363 54 L472 59 L581 49 L690 44" },
{ id: "hkg-kul", label: "HKG-KUL", color: "#0891b2", path: "M36 71 L145 66 L254 75 L363 61 L472 66 L581 56 L690 51" },
{ id: "nkg-kul", label: "NKG-KUL", color: "#0e7490", path: "M36 79 L145 74 L254 81 L363 69 L472 74 L581 64 L690 59" },
{ id: "hkg-del", label: "HKG-DEL", color: "#6366f1", path: "M36 86 L145 81 L254 89 L363 76 L472 81 L581 71 L690 66" },
{ id: "cgo-maa", label: "CGO-MAA", color: "#8b5cf6", path: "M36 94 L145 89 L254 96 L363 84 L472 89 L581 79 L690 74" },
{ id: "cgo-blr", label: "CGO-BLR", color: "#a855f7", path: "M36 101 L145 96 L254 104 L363 91 L472 96 L581 86 L690 81" },
{ id: "zuh-crk", label: "ZUH-CRK", color: "#c026d3", path: "M36 109 L145 104 L254 111 L363 99 L472 104 L581 94 L690 89" },
{ id: "wnz-cgk", label: "WNZ-CGK", color: "#db2777", path: "M36 116 L145 111 L254 119 L363 106 L472 111 L581 101 L690 96" },
{ id: "bkk", label: "BKK", color: "#e11d48", path: "M36 124 L145 119 L254 126 L363 114 L472 119 L581 109 L690 104" },
{ id: "waicai", label: "外采-空运", color: "#dc2626", path: "M36 131 L145 126 L254 134 L363 121 L472 126 L581 116 L690 111" },
{ id: "quanxian", label: "全线", color: "#ea580c", path: "M36 139 L145 134 L254 141 L363 129 L472 134 L581 124 L690 119" },
{ id: "haiyun", label: "海运全线", color: "#d97706", path: "M36 150 L145 146 L254 154 L363 144 L472 141 L581 136 L690 131" },
{ id: "zhonggang", label: "中港/中亚/中欧", color: "#65a30d", path: "M36 159 L145 156 L254 163 L363 154 L472 151 L581 146 L690 141" },
{ id: "changtu", label: "国内长途/零担", color: "#0d9488", path: "M36 169 L145 166 L254 173 L363 164 L472 161 L581 159 L690 154" },
{ id: "chengpei", label: "国内城配/拖车/打包", color: "#059669", path: "M36 179 L145 176 L254 181 L363 174 L472 171 L581 169 L690 164" },
{ id: "dongnan", label: "东南亚", color: "#0284c7", path: "M36 186 L145 184 L254 189 L363 181 L472 179 L581 176 L690 171" },
{
id: "cgo-kul",
label: "CGO-KUL",
color: "#2563eb",
values: [120, 118, 125, 110, 115, 105, 100],
path: "M36 56 L145 51 L254 61 L363 46 L472 50 L581 41 L690 36",
points: [],
},
];