<template>
|
<div class="dashboard-cockpit">
|
<section class="cockpit-panel welcome-panel">
|
<div class="welcome-user">
|
<el-avatar :src="welcomeAvatar" class="avatar" @error="handleWelcomeAvatarError">
|
<el-icon><UserFilled /></el-icon>
|
</el-avatar>
|
<div class="welcome-text">
|
<div class="welcome-title">
|
{{ greetingText }}，{{ userStore.nickName || userStore.name || "超级管理员" }} 👋
|
</div>
|
<div class="welcome-subtitle">专注工业数字化，助力智造升级</div>
|
</div>
|
</div>
|
<div class="welcome-meta">
|
<div class="meta-time digital-number">{{ nowTime }}</div>
|
<div class="meta-tip">MES / MOM 生产运营驾驶舱</div>
|
</div>
|
</section>
|
|
<section class="top-row">
|
<div class="stats-grid">
|
<article
|
v-for="card in dashboardCards"
|
:key="card.key"
|
class="stat-card"
|
:class="card.key"
|
>
|
<div class="stat-header">
|
<div class="stat-title-wrap">
|
<div class="stat-title">{{ card.title }}</div>
|
<div class="stat-desc">{{ card.desc }}</div>
|
</div>
|
<div class="stat-icon-orb">
|
<el-icon>
|
<component :is="card.icon" />
|
</el-icon>
|
</div>
|
</div>
|
<div class="stat-value digital-number">{{ card.value }}</div>
|
<div class="stat-footer">
|
<span>{{ card.subLabel }}</span>
|
<strong class="digital-number">{{ card.subValue }}</strong>
|
</div>
|
<div class="stat-trend">{{ card.trend }}</div>
|
<div class="stat-wave" aria-hidden="true"></div>
|
</article>
|
</div>
|
</section>
|
|
<section class="main-grid">
|
<div class="left-column">
|
<div class="cockpit-panel process-panel">
|
<div class="panel-title-row">
|
<div class="panel-title">工序数据生产统计明细</div>
|
<div class="panel-actions">
|
<el-button type="primary" size="small" plain @click="openProcessDialog">选择工序</el-button>
|
<el-button size="small" plain @click="resetProcessFilter">重置</el-button>
|
<el-radio-group v-model="processRange" size="small" @change="refreshProcessStats">
|
<el-radio-button :value="1">日</el-radio-button>
|
<el-radio-button :value="2">周</el-radio-button>
|
<el-radio-button :value="3">月</el-radio-button>
|
</el-radio-group>
|
</div>
|
</div>
|
<div class="process-body">
|
<div class="process-chart" :class="{ empty: !hasProcessData }">
|
<Echarts
|
:options="chartBaseOptions"
|
:chartStyle="{ width: '100%', height: '100%' }"
|
:grid="processGrid"
|
:series="processSeries"
|
:tooltip="processTooltip"
|
:xAxis="processXAxis"
|
:yAxis="processYAxis"
|
:style="{ height: hasProcessData ? '340px' : '280px' }"
|
@click="handleChartClick"
|
/>
|
<div v-if="!hasProcessData" class="chart-empty">
|
<el-icon><DataAnalysis /></el-icon>
|
<div class="chart-empty-title">暂无工序数据</div>
|
<div class="chart-empty-desc">等待生产报工数据接入后自动生成统计图表</div>
|
<div class="chart-empty-actions">
|
<el-button size="small" @click="refreshProcessStats">刷新数据</el-button>
|
<el-button size="small" type="primary" plain @click="openProcessDialog">选择工序</el-button>
|
</div>
|
</div>
|
</div>
|
<div class="process-aside">
|
<div class="process-legend">
|
<div class="process-name">{{ processAside.processName }}</div>
|
<div class="process-legend-item"><span class="dot dot-blue"></span>投入量</div>
|
<div class="process-legend-item"><span class="dot dot-orange"></span>报废量</div>
|
<div class="process-legend-item"><span class="dot dot-cyan"></span>产出量</div>
|
</div>
|
<div class="process-card">
|
<div class="process-label">累计总投入</div>
|
<div class="process-value digital-number">{{ formatAmount(processAside.totalInput) }}</div>
|
</div>
|
<div class="process-card">
|
<div class="process-label">累计总报废</div>
|
<div class="process-value digital-number">{{ formatAmount(processAside.totalScrap) }}</div>
|
</div>
|
<div class="process-card">
|
<div class="process-label">累计总产出</div>
|
<div class="process-value digital-number">{{ formatAmount(processAside.totalOutput) }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="cockpit-panel order-panel">
|
<div class="panel-title-row">
|
<div class="panel-title">生产订单进度</div>
|
<el-radio-group v-model="orderFilter" size="small">
|
<el-radio-button label="all">全部</el-radio-button>
|
<el-radio-button label="in_progress">进行中</el-radio-button>
|
<el-radio-button label="completed">已完成</el-radio-button>
|
<el-radio-button label="paused">已暂停</el-radio-button>
|
</el-radio-group>
|
</div>
|
<el-table :data="filteredOrders" stripe>
|
<el-table-column prop="orderNo" label="订单编号" min-width="150" />
|
<el-table-column prop="productName" label="产品名称" min-width="120" />
|
<el-table-column prop="planQty" label="计划数量" min-width="90" />
|
<el-table-column prop="completedQty" label="已完成" min-width="90" />
|
<el-table-column label="完成率" min-width="180">
|
<template #default="{ row }">
|
<div class="table-progress">
|
<el-progress
|
:stroke-width="8"
|
:percentage="row.completionRate"
|
:show-text="false"
|
status="success"
|
/>
|
<span>{{ row.completionRate }}%</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="deliveryDate" label="交期" min-width="110" />
|
<el-table-column label="状态" min-width="90">
|
<template #default="{ row }">
|
<el-tag :type="getOrderStatusType(row.status)" effect="light">
|
{{ getOrderStatusText(row.status) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<div class="cockpit-panel contract-panel">
|
<div class="panel-title">客户合同金额分析</div>
|
<div class="contract-summary">
|
<div class="contract-card">
|
<div class="contract-name">总合同金额(元)</div>
|
<div class="contract-main digital-number">{{ formatNumber(sum) }}</div>
|
<div class="contract-compare">
|
同比
|
<span class="rise">{{ trendText(yny) }}</span>
|
环比
|
<span class="rise">{{ trendText(chain) }}</span>
|
</div>
|
</div>
|
<div class="contract-chart-wrap">
|
<Echarts
|
:options="chartBaseOptions"
|
:legend="pieLegend"
|
:chartStyle="chartStylePie"
|
:series="materialPieSeries"
|
:tooltip="pieTooltip"
|
/>
|
</div>
|
</div>
|
<ul class="contract-list">
|
<li v-for="item in materialPieSeries[0].data" :key="item.name">
|
<span class="legend-dot" :style="{ backgroundColor: item.itemStyle?.color }"></span>
|
<span class="contract-item-name">{{ item.name }}</span>
|
<span class="contract-item-rate">{{ item.rate }}%</span>
|
<span class="contract-item-value digital-number">¥{{ formatNumber(item.value) }}</span>
|
</li>
|
</ul>
|
</div>
|
|
<div class="cockpit-panel quality-panel">
|
<div class="panel-title-row">
|
<div class="panel-title">质量统计</div>
|
<el-radio-group v-model="qualityRange" size="small" @change="qualityStatisticsInfo">
|
<el-radio-button :value="1">周</el-radio-button>
|
<el-radio-button :value="2">月</el-radio-button>
|
<el-radio-button :value="3">季度</el-radio-button>
|
</el-radio-group>
|
</div>
|
<div class="quality-cards">
|
<div class="quality-card one">原材料已检数量 <span>{{ qualityStatisticsObject.supplierNum }}件</span></div>
|
<div class="quality-card two">过程检验数量 <span>{{ qualityStatisticsObject.processNum }}件</span></div>
|
<div class="quality-card three">出厂已检数量 <span>{{ qualityStatisticsObject.factoryNum }}件</span></div>
|
</div>
|
<Echarts
|
:options="chartBaseOptions"
|
:chartStyle="chartStyle"
|
:grid="grid"
|
:legend="barLegend"
|
:series="barSeries1"
|
:tooltip="tooltip"
|
:xAxis="xAxis1"
|
:yAxis="yAxis1"
|
style="height: 270px"
|
/>
|
</div>
|
</div>
|
|
<div class="right-column">
|
<div class="cockpit-panel todo-panel">
|
<div class="panel-title-row">
|
<div class="panel-title">待办事项</div>
|
<span class="panel-more">更多</span>
|
</div>
|
<ul class="todo-list" v-if="todoList.length > 0">
|
<li v-for="item in todoList" :key="item.id" class="todo-item">
|
<div class="todo-head">
|
<span class="todo-no">待办编号：{{ item.approveId }}</span>
|
<span class="todo-time">{{ item.approveTime }}</span>
|
</div>
|
<div class="todo-desc">部门：{{ item.approveDeptName }}</div>
|
<div class="todo-desc">事由：{{ item.approveReason }}</div>
|
</li>
|
</ul>
|
<div v-else class="panel-empty">暂无数据</div>
|
</div>
|
|
<div class="cockpit-panel realtime-panel">
|
<div class="panel-title-row">
|
<div class="panel-title">生产实时看板</div>
|
<span class="panel-more">更多</span>
|
</div>
|
<div class="realtime-grid">
|
<div class="realtime-item" v-for="item in realtimeBoard" :key="item.key">
|
<el-progress
|
type="circle"
|
:percentage="item.percent"
|
:stroke-width="10"
|
:width="94"
|
:color="item.color"
|
>
|
<template #default>
|
<div class="realtime-value digital-number">{{ item.display }}</div>
|
</template>
|
</el-progress>
|
<div class="realtime-label">{{ item.label }}</div>
|
<div class="realtime-delta" :class="item.trend">{{ item.delta }}</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="cockpit-panel quick-panel">
|
<div class="panel-title-row">
|
<div class="panel-title">快捷功能</div>
|
</div>
|
<div class="quick-grid">
|
<button
|
v-for="item in quickEntries"
|
:key="item.label"
|
class="quick-item"
|
type="button"
|
@click="goToQuick(item.path)"
|
>
|
<span class="quick-icon">
|
<el-icon>
|
<component :is="item.icon" />
|
</el-icon>
|
</span>
|
<span>{{ item.label }}</span>
|
</button>
|
</div>
|
</div>
|
|
<div class="cockpit-panel plan-panel">
|
<div class="panel-title-row">
|
<div class="panel-title">今日生产计划</div>
|
<span class="panel-more">{{ todayPlanList.length }}项</span>
|
</div>
|
<ul class="plan-list">
|
<li v-for="item in todayPlanList" :key="item.orderNo" class="plan-item">
|
<div class="plan-main">
|
<span class="plan-order">{{ item.orderNo }}</span>
|
<span class="plan-name">{{ item.productName }}</span>
|
</div>
|
<div class="plan-meta">
|
<span>计划 {{ item.planQty }}</span>
|
<span>交期 {{ item.deliveryDate }}</span>
|
</div>
|
</li>
|
</ul>
|
</div>
|
|
<div class="cockpit-panel receipt-panel">
|
<div class="panel-title">回款与开票分析</div>
|
<Echarts
|
:options="chartBaseOptions"
|
:chartStyle="chartStyle"
|
:grid="grid"
|
:legend="lineLegend"
|
:series="lineSeries"
|
:tooltip="tooltipLine"
|
:xAxis="xAxis2"
|
:yAxis="yAxis2"
|
style="height: 300px"
|
/>
|
</div>
|
|
</div>
|
</section>
|
|
<el-dialog v-model="processDialogVisible" title="选择工序" width="500px" append-to-body>
|
<div class="process-selection-wrapper">
|
<el-checkbox-group v-model="tempProcessIds">
|
<div class="process-grid">
|
<el-checkbox v-for="item in processOptions" :key="item.id" :label="item.id" border>
|
{{ item.name }}
|
</el-checkbox>
|
</div>
|
</el-checkbox-group>
|
</div>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="processDialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="handleProcessDialogConfirm">确认</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, onUnmounted, computed, reactive, watch } from "vue";
|
import { useRouter } from "vue-router";
|
import dayjs from "dayjs";
|
import * as echarts from "echarts";
|
import {
|
Box,
|
Calendar,
|
Checked,
|
DataAnalysis,
|
DataLine,
|
EditPen,
|
Operation,
|
Search,
|
ShoppingCartFull,
|
Tickets,
|
Tools,
|
UserFilled,
|
} from "@element-plus/icons-vue";
|
import Echarts from "@/components/Echarts/echarts.vue";
|
import usePermissionStore from "@/store/modules/permission";
|
import useUserStore from "@/store/modules/user.js";
|
import {
|
analysisCustomerContractAmounts,
|
getAmountHalfYear,
|
getBusiness,
|
homeTodos,
|
processDataProductionStatistics,
|
qualityInspectionStatistics,
|
statisticsReceivablePayable,
|
} from "@/api/viewIndex.js";
|
import { list } from "@/api/productionManagement/productionProcess";
|
|
const router = useRouter();
|
const userStore = useUserStore();
|
const permissionStore = usePermissionStore();
|
const defaultWelcomeAvatar = new URL("../assets/images/profile.jpg", import.meta.url).href;
|
|
const nowTime = ref("");
|
const welcomeAvatarLoadFailed = ref(false);
|
let clockTimer = null;
|
const weatherText = "多云 28°C";
|
|
const nowDate = computed(() => (nowTime.value ? nowTime.value.slice(0, 10) : dayjs().format("YYYY-MM-DD")));
|
|
const greetingText = computed(() => {
|
const hour = dayjs().hour();
|
if (hour < 6) return "凌晨好";
|
if (hour < 9) return "早上好";
|
if (hour < 12) return "上午好";
|
if (hour < 14) return "中午好";
|
if (hour < 18) return "下午好";
|
return "晚上好";
|
});
|
|
const welcomeAvatar = computed(() =>
|
welcomeAvatarLoadFailed.value || !userStore.avatar ? defaultWelcomeAvatar : userStore.avatar
|
);
|
|
const handleWelcomeAvatarError = () => {
|
if (welcomeAvatar.value !== defaultWelcomeAvatar) {
|
welcomeAvatarLoadFailed.value = true;
|
}
|
};
|
|
watch(
|
() => userStore.avatar,
|
() => {
|
welcomeAvatarLoadFailed.value = false;
|
}
|
);
|
|
const axisTextColor = "#5f6f86";
|
const axisLineColor = "rgba(148, 163, 184, 0.45)";
|
const splitLineColor = "rgba(148, 163, 184, 0.18)";
|
|
const chartBaseOptions = reactive({
|
backgroundColor: "transparent",
|
textStyle: { color: axisTextColor },
|
});
|
|
const processOptions = ref([]);
|
const selectedProcessIds = ref([]);
|
const tempProcessIds = ref([]);
|
const processDialogVisible = ref(false);
|
const activeProcessIndex = ref(0);
|
|
const businessInfo = ref({
|
inventoryNum: 0,
|
monthPurchaseHaveMoney: 0,
|
monthPurchaseMoney: 0,
|
monthSaleHaveMoney: 0,
|
monthSaleMoney: 0,
|
todayInventoryNum: 0,
|
});
|
|
const qualityStatisticsObject = ref({
|
supplierNum: 0,
|
processNum: 0,
|
factoryNum: 0,
|
});
|
|
const sum = ref(0);
|
const yny = ref(0);
|
const chain = ref(0);
|
|
const pieLegend = reactive({ show: false });
|
const piePalette = ["#2563eb", "#14b8a6", "#7c3aed", "#f97316", "#38bdf8", "#f43f5e"];
|
|
const chartStyle = {
|
width: "100%",
|
height: "100%",
|
};
|
|
const chartStylePie = {
|
width: "100%",
|
height: "200px",
|
};
|
|
const grid = {
|
left: "3%",
|
right: "4%",
|
bottom: "2%",
|
top: "12%",
|
containLabel: true,
|
};
|
|
const tooltip = {
|
trigger: "axis",
|
axisPointer: { type: "shadow" },
|
backgroundColor: "rgba(255, 255, 255, 0.97)",
|
borderColor: "rgba(148, 163, 184, 0.26)",
|
textStyle: { color: "#334155" },
|
};
|
|
const barColors2 = ["#2563eb", "#14b8a6"];
|
|
const xAxis = [
|
{
|
type: "value",
|
axisLine: { lineStyle: { color: axisLineColor } },
|
splitLine: { lineStyle: { color: splitLineColor } },
|
axisLabel: { color: axisTextColor },
|
},
|
];
|
|
const yAxis = [
|
{
|
type: "category",
|
data: ["应付账款", "应收账款"],
|
axisTick: { show: false },
|
axisLine: { lineStyle: { color: axisLineColor } },
|
axisLabel: { color: axisTextColor },
|
},
|
];
|
|
const barSeries = ref([
|
{
|
type: "bar",
|
barWidth: 22,
|
itemStyle: { borderRadius: [0, 8, 8, 0] },
|
label: { show: true, position: "right", color: "#334155" },
|
data: [],
|
},
|
]);
|
|
const barLegend = {
|
show: true,
|
textStyle: { color: axisTextColor },
|
data: ["原材料不合格数", "过程不合格数", "出厂不合格数"],
|
};
|
|
const xAxis1 = ref([
|
{
|
type: "category",
|
axisTick: { show: false },
|
axisLine: { lineStyle: { color: axisLineColor } },
|
axisLabel: { color: axisTextColor },
|
data: [],
|
},
|
]);
|
|
const yAxis1 = [
|
{
|
type: "value",
|
splitLine: { lineStyle: { color: splitLineColor } },
|
axisLine: { lineStyle: { color: axisLineColor } },
|
axisLabel: { color: axisTextColor },
|
},
|
];
|
|
const barSeries1 = ref([
|
{
|
name: "原材料不合格数",
|
type: "bar",
|
barGap: 0,
|
itemStyle: { color: "#2563eb", borderRadius: [6, 6, 0, 0] },
|
emphasis: { focus: "series" },
|
data: [],
|
},
|
{
|
name: "过程不合格数",
|
type: "bar",
|
itemStyle: { color: "#14b8a6", borderRadius: [6, 6, 0, 0] },
|
emphasis: { focus: "series" },
|
data: [],
|
},
|
{
|
name: "出厂不合格数",
|
type: "bar",
|
itemStyle: { color: "#f59e0b", borderRadius: [6, 6, 0, 0] },
|
emphasis: { focus: "series" },
|
data: [],
|
},
|
]);
|
|
const lineLegend = {
|
show: true,
|
textStyle: { color: axisTextColor },
|
data: ["开票", "回款"],
|
};
|
|
const xAxis2 = ref([
|
{
|
type: "category",
|
data: [],
|
axisLine: { lineStyle: { color: axisLineColor } },
|
axisLabel: {
|
color: axisTextColor,
|
interval: 0,
|
formatter: (value) => value.replace(/~/g, "\n"),
|
},
|
},
|
]);
|
|
const yAxis2 = ref([
|
{
|
type: "value",
|
splitLine: { lineStyle: { color: splitLineColor } },
|
axisLine: { lineStyle: { color: axisLineColor } },
|
axisLabel: { color: axisTextColor },
|
},
|
]);
|
|
const tooltipLine = {
|
trigger: "axis",
|
backgroundColor: "rgba(255, 255, 255, 0.97)",
|
borderColor: "rgba(148, 163, 184, 0.26)",
|
textStyle: { color: "#334155" },
|
};
|
|
const lineSeries = ref([
|
{
|
name: "开票",
|
type: "line",
|
data: [],
|
smooth: true,
|
itemStyle: { color: "#2563eb" },
|
lineStyle: { width: 2, color: "#2563eb" },
|
showSymbol: true,
|
areaStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: "rgba(37, 99, 235, 0.24)" },
|
{ offset: 1, color: "rgba(37, 99, 235, 0.02)" },
|
]),
|
},
|
},
|
{
|
name: "回款",
|
type: "line",
|
data: [],
|
smooth: true,
|
itemStyle: { color: "#14b8a6" },
|
lineStyle: { width: 2, color: "#14b8a6" },
|
showSymbol: true,
|
areaStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: "rgba(20, 184, 166, 0.2)" },
|
{ offset: 1, color: "rgba(20, 184, 166, 0.02)" },
|
]),
|
},
|
},
|
]);
|
|
const pieTooltip = reactive({
|
trigger: "item",
|
backgroundColor: "rgba(255, 255, 255, 0.97)",
|
borderColor: "rgba(148, 163, 184, 0.26)",
|
textStyle: { color: "#334155" },
|
formatter: (params) => `${params.name} ${formatNumber(params.value)}元 ${params.percent}%`,
|
});
|
|
const materialPieSeries = ref([
|
{
|
type: "pie",
|
radius: ["62%", "88%"],
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderColor: "rgba(255, 255, 255, 0.95)",
|
borderWidth: 2,
|
},
|
label: { show: false },
|
data: [],
|
},
|
]);
|
|
const todoList = ref([]);
|
const qualityRange = ref(1);
|
const processRange = ref(1);
|
const processChartData = ref([]);
|
|
const processXAxis = ref([
|
{
|
type: "value",
|
axisLine: { lineStyle: { color: axisLineColor } },
|
splitLine: { lineStyle: { color: splitLineColor, type: "dashed" } },
|
axisLabel: { color: axisTextColor },
|
},
|
]);
|
|
const processYAxis = ref([
|
{
|
type: "category",
|
axisTick: { show: false },
|
axisLine: { show: false },
|
axisLabel: { color: axisTextColor },
|
data: [],
|
},
|
]);
|
|
const processGrid = reactive({ left: "4%", right: "4%", top: 20, bottom: 18, containLabel: true });
|
|
const processTooltip = reactive({
|
trigger: "axis",
|
axisPointer: { type: "shadow" },
|
backgroundColor: "rgba(255, 255, 255, 0.97)",
|
borderColor: "rgba(148, 163, 184, 0.26)",
|
textStyle: { color: "#334155" },
|
formatter: (params) => {
|
const name = params?.[0]?.name ?? "";
|
const list = Array.isArray(params) ? params : [];
|
const lines = list
|
.map((p) => {
|
const colorBox = `<span style="display:inline-block;margin-right:6px;border-radius:2px;width:10px;height:10px;background:${p.color}"></span>`;
|
return `${colorBox}${p.seriesName}<b style="float:right;">${Number(p.value || 0).toFixed(2)}</b>`;
|
})
|
.join("<br/>");
|
return `<div style="min-width:140px;"><div style="font-weight:700;margin-bottom:6px;">${name}</div>${lines}</div>`;
|
},
|
});
|
|
const processSeries = computed(() => {
|
const input = processChartData.value.map((item) => item.input);
|
const scrap = processChartData.value.map((item) => item.scrap);
|
const output = processChartData.value.map((item) => item.output);
|
return [
|
{
|
name: "投入量",
|
type: "bar",
|
stack: "total",
|
barWidth: 18,
|
itemStyle: { color: "#2563eb", borderRadius: [8, 0, 0, 8] },
|
data: input,
|
},
|
{
|
name: "报废量",
|
type: "bar",
|
stack: "total",
|
barWidth: 18,
|
itemStyle: { color: "#f59e0b" },
|
data: scrap,
|
},
|
{
|
name: "产出量",
|
type: "bar",
|
stack: "total",
|
barWidth: 18,
|
itemStyle: { color: "#14b8a6", borderRadius: [0, 8, 8, 0] },
|
data: output,
|
},
|
];
|
});
|
|
const processAside = computed(() => {
|
const listData = processChartData.value;
|
const item = listData[activeProcessIndex.value] || {};
|
return {
|
processName: item.name || "暂无数据",
|
totalInput: item.input || 0,
|
totalScrap: item.scrap || 0,
|
totalOutput: item.output || 0,
|
};
|
});
|
|
const processTotals = computed(() =>
|
processChartData.value.reduce(
|
(acc, cur) => {
|
acc.input += Number(cur.input || 0);
|
acc.scrap += Number(cur.scrap || 0);
|
acc.output += Number(cur.output || 0);
|
return acc;
|
},
|
{ input: 0, scrap: 0, output: 0 }
|
)
|
);
|
|
const hasProcessData = computed(() => {
|
if (!processChartData.value.length) return false;
|
return processChartData.value.some((item) => {
|
const input = Number(item.input || 0);
|
const scrap = Number(item.scrap || 0);
|
const output = Number(item.output || 0);
|
return input > 0 || scrap > 0 || output > 0;
|
});
|
});
|
|
const dashboardCards = computed(() => [
|
{
|
key: "sales",
|
title: "销售数据",
|
desc: "本月销售额(元)",
|
value: formatNumber(businessInfo.value.monthSaleMoney),
|
subLabel: "未开票金额",
|
subValue: formatNumber(businessInfo.value.monthSaleHaveMoney),
|
trend: `占比 ${ratioText(businessInfo.value.monthSaleHaveMoney, businessInfo.value.monthSaleMoney)}`,
|
icon: DataLine,
|
},
|
{
|
key: "purchase",
|
title: "采购数据",
|
desc: "本月采购额(元)",
|
value: formatNumber(businessInfo.value.monthPurchaseMoney),
|
subLabel: "待付款金额",
|
subValue: formatNumber(businessInfo.value.monthPurchaseHaveMoney),
|
trend: `占比 ${ratioText(
|
businessInfo.value.monthPurchaseHaveMoney,
|
businessInfo.value.monthPurchaseMoney
|
)}`,
|
icon: ShoppingCartFull,
|
},
|
{
|
key: "inventory",
|
title: "库存数据",
|
desc: "当前库存总量(件)",
|
value: formatNumber(businessInfo.value.inventoryNum),
|
subLabel: "今日入库",
|
subValue: formatNumber(businessInfo.value.todayInventoryNum),
|
trend: "库存结构持续优化",
|
icon: Box,
|
},
|
{
|
key: "production",
|
title: "生产总览",
|
desc: "累计产出(件)",
|
value: formatNumber(processTotals.value.output),
|
subLabel: "累计报废",
|
subValue: formatNumber(processTotals.value.scrap),
|
trend: `良率 ${ratioText(processTotals.value.output, processTotals.value.input)}`,
|
icon: Operation,
|
},
|
]);
|
|
const productionOrders = ref([
|
{
|
orderNo: "MO-20260518-001",
|
productName: "智能控制器",
|
planQty: 1000,
|
completedQty: 860,
|
completionRate: 86,
|
deliveryDate: "2026-05-20",
|
status: "in_progress",
|
},
|
{
|
orderNo: "MO-20260518-002",
|
productName: "电源模块",
|
planQty: 800,
|
completedQty: 640,
|
completionRate: 80,
|
deliveryDate: "2026-05-22",
|
status: "in_progress",
|
},
|
{
|
orderNo: "MO-20260518-003",
|
productName: "传感器组件",
|
planQty: 500,
|
completedQty: 150,
|
completionRate: 30,
|
deliveryDate: "2026-05-25",
|
status: "paused",
|
},
|
{
|
orderNo: "MO-20260518-004",
|
productName: "结构件A",
|
planQty: 1200,
|
completedQty: 1200,
|
completionRate: 100,
|
deliveryDate: "2026-05-15",
|
status: "completed",
|
},
|
]);
|
|
const orderFilter = ref("all");
|
const filteredOrders = computed(() => {
|
if (orderFilter.value === "all") return productionOrders.value;
|
return productionOrders.value.filter((item) => item.status === orderFilter.value);
|
});
|
|
const todayPlanList = computed(() =>
|
productionOrders.value
|
.slice()
|
.sort((a, b) => dayjs(a.deliveryDate).valueOf() - dayjs(b.deliveryDate).valueOf())
|
.slice(0, 5)
|
);
|
|
const avgCompletionRate = computed(() => {
|
if (!productionOrders.value.length) return 0;
|
const total = productionOrders.value.reduce((acc, cur) => acc + Number(cur.completionRate || 0), 0);
|
return Number((total / productionOrders.value.length).toFixed(1));
|
});
|
|
const realtimeBoard = computed(() => {
|
const oee = ratioNumber(processTotals.value.output, processTotals.value.input);
|
const defectRate = ratioNumber(processTotals.value.scrap, processTotals.value.input);
|
return [
|
{
|
key: "oee",
|
label: "设备 OEE",
|
percent: clampPercent(oee),
|
display: `${oee.toFixed(1)}%`,
|
delta: "较昨日 ↑ 4.0%",
|
trend: "up",
|
color: "#2d8cff",
|
},
|
{
|
key: "order",
|
label: "订单达成率",
|
percent: clampPercent(avgCompletionRate.value),
|
display: `${avgCompletionRate.value.toFixed(1)}%`,
|
delta: "较昨日 ↑ 2.6%",
|
trend: "up",
|
color: "#31d2ff",
|
},
|
{
|
key: "defect",
|
label: "不良率",
|
percent: clampPercent(defectRate),
|
display: `${defectRate.toFixed(1)}%`,
|
delta: "较昨日 ↓ 0.5%",
|
trend: "down",
|
color: "#f6a23f",
|
},
|
];
|
});
|
|
const warningList = ref([
|
{
|
id: 1,
|
level: "device",
|
title: "设备预警",
|
desc: "CNC-001 设备振动异常",
|
time: "10:24:32",
|
},
|
{
|
id: 2,
|
level: "quality",
|
title: "质量预警",
|
desc: "订单 SO-20260517 不良率超标",
|
time: "09:15:47",
|
},
|
{
|
id: 3,
|
level: "material",
|
title: "物料预警",
|
desc: "物料 1002001 库存不足",
|
time: "08:47:21",
|
},
|
]);
|
|
const quickEntryConfigs = [
|
{ label: "主生产计划", icon: Calendar, titles: ["主生产计划"], fallbackPath: "/productionPlan/productionPlan" },
|
{ label: "生产订单", icon: Tickets, titles: ["生产订单"], fallbackPath: "/productionManagement/productionOrder" },
|
{ label: "生产报工", icon: EditPen, titles: ["生产报工"], fallbackPath: "/productionManagement/productionReporting" },
|
{ label: "设备台账", icon: Tools, titles: ["设备台账"], fallbackPath: "/equipmentManagement/ledger" },
|
{ label: "销售台账", icon: DataLine, titles: ["销售台账"], fallbackPath: "/salesManagement/salesLedger" },
|
{ label: "采购台账", icon: ShoppingCartFull, titles: ["采购台账"], fallbackPath: "/procurementManagement/procurementLedger" },
|
{ label: "员工台账", icon: UserFilled, titles: ["员工台账", "在职员工台账"], fallbackPath: "/personnelManagement/employeeRecord" },
|
{ label: "库存管理", icon: Box, titles: ["库存管理"], fallbackPath: "/inventoryManagement/stockManage" },
|
];
|
|
const normalizeMenuTitle = (title) => String(title || "").replace(/\s+/g, "").trim();
|
|
const resolveRoutePath = (route, parentPath = "") => {
|
const currentPath = String(route?.path || "").trim();
|
if (!currentPath) return parentPath || "";
|
if (/^(https?:)?\/\//.test(currentPath)) return currentPath;
|
if (currentPath.startsWith("/")) return currentPath;
|
const basePath = parentPath && parentPath !== "/" ? parentPath.replace(/\/$/, "") : "";
|
return `${basePath}/${currentPath}`.replace(/\/+/g, "/");
|
};
|
|
const collectAccessibleRoutes = (routes = [], parentPath = "") => {
|
const items = [];
|
(routes || []).forEach((route) => {
|
if (!route) return;
|
const fullPath = resolveRoutePath(route, parentPath);
|
const title = route.meta?.title ?? route.title ?? "";
|
if (title && fullPath && !String(route.redirect || "").includes("noRedirect")) {
|
items.push({
|
title: normalizeMenuTitle(title),
|
path: fullPath,
|
});
|
}
|
if (Array.isArray(route.children) && route.children.length > 0) {
|
items.push(...collectAccessibleRoutes(route.children, fullPath));
|
}
|
});
|
return items;
|
};
|
|
const accessibleMenuRoutes = computed(() => {
|
const routePool =
|
permissionStore.defaultRoutes?.length > 0
|
? permissionStore.defaultRoutes
|
: permissionStore.sidebarRouters?.length > 0
|
? permissionStore.sidebarRouters
|
: permissionStore.routes;
|
return collectAccessibleRoutes(routePool || []);
|
});
|
|
const quickEntries = computed(() =>
|
quickEntryConfigs
|
.map((item) => {
|
const targetRoute = accessibleMenuRoutes.value.find((route) =>
|
item.titles.some((title) => route.title === normalizeMenuTitle(title))
|
);
|
const resolvedPath = targetRoute?.path || "";
|
return resolvedPath
|
? {
|
label: item.label,
|
icon: item.icon,
|
path: resolvedPath,
|
}
|
: null;
|
})
|
.filter(Boolean)
|
);
|
|
const updateNowTime = () => {
|
nowTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
|
};
|
|
const formatNumber = (value) => {
|
const num = Number(value || 0);
|
return num.toLocaleString(undefined, {
|
minimumFractionDigits: 2,
|
maximumFractionDigits: 2,
|
});
|
};
|
|
const formatAmount = (value) => {
|
const num = Number(value || 0);
|
return num.toLocaleString(undefined, {
|
minimumFractionDigits: 2,
|
maximumFractionDigits: 2,
|
});
|
};
|
|
const trendText = (value) => {
|
const num = Number(value || 0);
|
const flag = num >= 0 ? "↑" : "↓";
|
return `${flag} ${Math.abs(num).toFixed(1)}%`;
|
};
|
|
const ratioNumber = (numerator, denominator) => {
|
const n = Number(numerator || 0);
|
const d = Number(denominator || 0);
|
if (!d) return 0;
|
return (n / d) * 100;
|
};
|
|
const ratioText = (numerator, denominator) => `${ratioNumber(numerator, denominator).toFixed(1)}%`;
|
|
const clampPercent = (val) => Math.max(0, Math.min(100, Number(val || 0)));
|
|
const getOrderStatusText = (status) => {
|
const mapping = {
|
in_progress: "进行中",
|
completed: "已完成",
|
paused: "暂停",
|
};
|
return mapping[status] || "未知";
|
};
|
|
const getOrderStatusType = (status) => {
|
const mapping = {
|
in_progress: "success",
|
completed: "primary",
|
paused: "warning",
|
};
|
return mapping[status] || "info";
|
};
|
|
const getBusinessData = async () => {
|
const res = await getBusiness();
|
businessInfo.value = { ...res.data };
|
};
|
|
const analysisCustomer = async () => {
|
const res = await analysisCustomerContractAmounts();
|
sum.value = res.data.sum;
|
yny.value = res.data.yny;
|
chain.value = res.data.chain;
|
materialPieSeries.value[0].data = (res.data.item || []).map((item, index) => ({
|
...item,
|
rate: Number(item.rate || 0),
|
itemStyle: { color: piePalette[index % piePalette.length] },
|
}));
|
};
|
|
const todoInfoS = async () => {
|
const res = await homeTodos();
|
todoList.value = res.data || [];
|
};
|
|
const statisticsReceivable = async () => {
|
const res = await statisticsReceivablePayable({ type: 1 });
|
barSeries.value[0].data = [
|
{ value: res.data.payableMoney, itemStyle: { color: barColors2[0] } },
|
{ value: res.data.receivableMoney, itemStyle: { color: barColors2[1] } },
|
];
|
};
|
|
const qualityStatisticsInfo = async () => {
|
const res = await qualityInspectionStatistics({ type: qualityRange.value });
|
xAxis1.value[0].data = [];
|
barSeries1.value[0].data = [];
|
barSeries1.value[1].data = [];
|
barSeries1.value[2].data = [];
|
(res.data.item || []).forEach((item) => {
|
xAxis1.value[0].data.push(item.date);
|
barSeries1.value[0].data.push(item.supplierNum);
|
barSeries1.value[1].data.push(item.processNum);
|
barSeries1.value[2].data.push(item.factoryNum);
|
});
|
qualityStatisticsObject.value.supplierNum = res.data.supplierNum;
|
qualityStatisticsObject.value.processNum = res.data.processNum;
|
qualityStatisticsObject.value.factoryNum = res.data.factoryNum;
|
};
|
|
const getAmountHalfYearNum = async () => {
|
const res = await getAmountHalfYear();
|
const monthName = [];
|
const receiptAmount = [];
|
const invoiceAmount = [];
|
(res.data || []).forEach((item) => {
|
monthName.push(item.month);
|
receiptAmount.push(item.receiptAmount);
|
invoiceAmount.push(item.invoiceAmount);
|
});
|
|
xAxis2.value[0].data = monthName.map((item) => item.replace(/~/g, "\n~"));
|
lineSeries.value[0].data = invoiceAmount;
|
lineSeries.value[1].data = receiptAmount;
|
};
|
|
const getProcessList = async () => {
|
const res = await list();
|
processOptions.value = res.data.records || [];
|
};
|
|
const refreshProcessStats = async () => {
|
const res = await processDataProductionStatistics({
|
type: processRange.value,
|
processIds: selectedProcessIds.value.length > 0 ? selectedProcessIds.value.join(",") : null,
|
});
|
processChartData.value = (res.data || []).map((item) => ({
|
name: item.processName,
|
input: item.totalInput,
|
scrap: item.totalScrap,
|
output: item.totalOutput,
|
}));
|
processYAxis.value[0].data = processChartData.value.map((item) => item.name);
|
activeProcessIndex.value = 0;
|
};
|
|
const openProcessDialog = () => {
|
tempProcessIds.value = [...selectedProcessIds.value];
|
processDialogVisible.value = true;
|
};
|
|
const handleProcessDialogConfirm = () => {
|
selectedProcessIds.value = [...tempProcessIds.value];
|
processDialogVisible.value = false;
|
refreshProcessStats();
|
};
|
|
const resetProcessFilter = () => {
|
selectedProcessIds.value = [];
|
tempProcessIds.value = [];
|
refreshProcessStats();
|
};
|
|
const handleChartClick = (params) => {
|
if (params && params.dataIndex !== undefined) {
|
activeProcessIndex.value = params.dataIndex;
|
}
|
};
|
|
const goToQuick = (path) => {
|
if (!path) return;
|
router.push(path).catch(() => {});
|
};
|
|
onMounted(() => {
|
updateNowTime();
|
clockTimer = setInterval(updateNowTime, 1000);
|
getBusinessData();
|
analysisCustomer();
|
todoInfoS();
|
statisticsReceivable();
|
qualityStatisticsInfo();
|
getAmountHalfYearNum();
|
getProcessList();
|
refreshProcessStats();
|
});
|
|
onUnmounted(() => {
|
if (clockTimer) {
|
clearInterval(clockTimer);
|
}
|
});
|
</script>
|
|
<style scoped>
|
.dashboard-cockpit {
|
min-height: calc(100vh - var(--topbar-height) - var(--tagsbar-height));
|
width: 100%;
|
min-width: 0;
|
padding: 0;
|
display: flex;
|
flex-direction: column;
|
gap: 16px;
|
overflow-x: clip;
|
margin-top: 10px;
|
}
|
|
.digital-number {
|
font-family: "DIN Alternate Bold", "Segoe UI", "PingFang SC", sans-serif;
|
letter-spacing: 0;
|
}
|
|
.cockpit-panel {
|
position: relative;
|
background: rgba(255, 255, 255, 0.9);
|
border: 1px solid rgba(148, 163, 184, 0.18);
|
border-radius: 16px;
|
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
|
backdrop-filter: blur(12px);
|
padding: 16px;
|
}
|
|
.welcome-panel {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
min-height: 92px;
|
padding: 18px 22px;
|
background:
|
radial-gradient(circle at 8% 20%, rgba(59, 130, 246, 0.12), transparent 32%),
|
linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.88));
|
}
|
|
.welcome-user {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
}
|
|
.avatar {
|
width: 52px;
|
height: 52px;
|
border: 1px solid rgba(147, 197, 253, 0.42);
|
background: linear-gradient(145deg, #ffffff, #eef5ff);
|
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.14);
|
}
|
|
.avatar :deep(img) {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
|
.avatar :deep(.el-icon) {
|
font-size: 24px;
|
color: #3b82f6;
|
}
|
|
.welcome-title {
|
font-size: 28px;
|
font-weight: 700;
|
color: #1e3a5f;
|
line-height: 1.08;
|
}
|
|
.welcome-subtitle {
|
margin-top: 6px;
|
color: #64748b;
|
font-size: 14px;
|
}
|
|
.welcome-meta {
|
text-align: right;
|
}
|
|
.meta-time {
|
font-size: 28px;
|
color: #1f3658;
|
font-weight: 700;
|
}
|
|
.meta-extra {
|
margin-top: 6px;
|
display: flex;
|
justify-content: flex-end;
|
gap: 14px;
|
color: #64748b;
|
font-size: 13px;
|
}
|
|
.meta-tip {
|
margin-top: 4px;
|
color: #7a8ca6;
|
font-size: 13px;
|
}
|
|
.top-row {
|
display: block;
|
}
|
|
.stats-grid {
|
display: grid;
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
gap: 14px;
|
}
|
|
.stat-card {
|
position: relative;
|
border-radius: 18px;
|
padding: 18px 20px 22px;
|
min-height: 182px;
|
height: auto;
|
overflow: hidden;
|
border: 1px solid rgba(148, 163, 184, 0.2);
|
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
|
transition: transform 0.22s ease, box-shadow 0.22s ease;
|
}
|
|
.stat-card:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 18px 40px rgba(37, 99, 235, 0.1);
|
}
|
|
.stat-card.sales {
|
background: linear-gradient(135deg, #ffffff 0%, #eaf3ff 100%);
|
}
|
|
.stat-card.purchase {
|
background: linear-gradient(135deg, #ffffff 0%, #e8fffb 100%);
|
}
|
|
.stat-card.inventory {
|
background: linear-gradient(135deg, #ffffff 0%, #f2edff 100%);
|
}
|
|
.stat-card.production {
|
background: linear-gradient(135deg, #ffffff 0%, #fff4e6 100%);
|
}
|
|
.stat-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
position: relative;
|
z-index: 2;
|
}
|
|
.stat-title {
|
font-size: 16px;
|
font-weight: 700;
|
}
|
|
.stat-card.sales .stat-title {
|
color: #1d4ed8;
|
}
|
|
.stat-card.purchase .stat-title {
|
color: #0f766e;
|
}
|
|
.stat-card.inventory .stat-title {
|
color: #6d28d9;
|
}
|
|
.stat-card.production .stat-title {
|
color: #c2410c;
|
}
|
|
.stat-desc {
|
margin-top: 6px;
|
color: #64748b;
|
font-size: 13px;
|
}
|
|
.stat-icon-orb {
|
width: 52px;
|
height: 52px;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 22px;
|
color: #fff;
|
}
|
|
.stat-card.sales .stat-icon-orb {
|
background: linear-gradient(135deg, #2563eb, #60a5fa);
|
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.32);
|
}
|
|
.stat-card.purchase .stat-icon-orb {
|
background: linear-gradient(135deg, #14b8a6, #5eead4);
|
box-shadow: 0 10px 24px rgba(20, 184, 166, 0.3);
|
}
|
|
.stat-card.inventory .stat-icon-orb {
|
background: linear-gradient(135deg, #7c3aed, #a78bfa);
|
box-shadow: 0 10px 24px rgba(124, 58, 237, 0.28);
|
}
|
|
.stat-card.production .stat-icon-orb {
|
background: linear-gradient(135deg, #f97316, #fdba74);
|
box-shadow: 0 10px 24px rgba(249, 115, 22, 0.3);
|
}
|
|
.stat-value {
|
margin-top: 14px;
|
font-size: 30px;
|
line-height: 1.08;
|
font-weight: 700;
|
color: #0f172a;
|
position: relative;
|
z-index: 2;
|
}
|
|
.stat-footer {
|
margin-top: 8px;
|
color: #64748b;
|
font-size: 13px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
position: relative;
|
z-index: 2;
|
}
|
|
.stat-trend {
|
margin-top: 6px;
|
color: #0ea5a4;
|
font-size: 13px;
|
line-height: 1.25;
|
font-weight: 600;
|
position: relative;
|
z-index: 2;
|
}
|
|
.stat-wave {
|
position: absolute;
|
left: 10px;
|
right: 10px;
|
bottom: 6px;
|
height: 30px;
|
opacity: 0.62;
|
z-index: 1;
|
pointer-events: none;
|
background:
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 40' preserveAspectRatio='none'%3E%3Cpath d='M0 31C20 16 44 36 66 24C87 12 107 31 129 18C148 8 169 28 193 16C214 5 237 25 259 14C280 3 306 19 340 8' fill='none' stroke='%236ea4ee' stroke-width='1.5'/%3E%3C/svg%3E")
|
center / 100% 100% no-repeat;
|
}
|
|
.todo-panel {
|
padding: 12px;
|
}
|
|
.panel-title-row {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
gap: 12px;
|
}
|
|
.panel-title {
|
font-size: 18px;
|
font-weight: 700;
|
color: #1f3658;
|
position: relative;
|
padding-left: 12px;
|
}
|
|
.panel-title::before {
|
content: "";
|
position: absolute;
|
left: 0;
|
top: 50%;
|
transform: translateY(-50%);
|
width: 4px;
|
height: 18px;
|
border-radius: 4px;
|
background: linear-gradient(180deg, #2563eb, #38bdf8);
|
}
|
|
.panel-more {
|
font-size: 14px;
|
color: #2563eb;
|
cursor: pointer;
|
}
|
|
.todo-list {
|
margin: 10px 0 0;
|
padding: 0;
|
list-style: none;
|
display: flex;
|
flex-direction: column;
|
gap: 8px;
|
max-height: 230px;
|
overflow-y: auto;
|
}
|
|
.todo-item {
|
border: 1px solid rgba(148, 163, 184, 0.2);
|
border-radius: 12px;
|
background: #f7fbff;
|
padding: 10px 12px;
|
}
|
|
.todo-head {
|
display: flex;
|
justify-content: space-between;
|
gap: 10px;
|
color: #334155;
|
font-size: 13px;
|
}
|
|
.todo-desc {
|
margin-top: 6px;
|
color: #64748b;
|
font-size: 12px;
|
line-height: 1.45;
|
}
|
|
.todo-no {
|
color: #1f3658;
|
font-weight: 600;
|
}
|
|
.panel-empty {
|
min-height: 140px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: var(--text-tertiary);
|
}
|
|
.main-grid {
|
display: grid;
|
grid-template-columns: minmax(0, 1fr) 400px;
|
gap: 16px;
|
align-items: start;
|
}
|
|
.left-column,
|
.right-column {
|
display: flex;
|
flex-direction: column;
|
gap: 16px;
|
min-width: 0;
|
}
|
|
.process-panel {
|
padding-bottom: 12px;
|
}
|
|
.panel-actions {
|
display: flex;
|
gap: 8px;
|
align-items: center;
|
flex-wrap: wrap;
|
}
|
|
.process-body {
|
margin-top: 10px;
|
display: grid;
|
grid-template-columns: minmax(0, 1fr) 232px;
|
gap: 12px;
|
align-items: stretch;
|
min-height: 0;
|
}
|
|
.process-chart {
|
position: relative;
|
border: 1px solid rgba(148, 163, 184, 0.24);
|
border-radius: 14px;
|
background:
|
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 249, 255, 0.9)),
|
repeating-linear-gradient(
|
to right,
|
rgba(148, 163, 184, 0.07) 0,
|
rgba(148, 163, 184, 0.07) 1px,
|
transparent 1px,
|
transparent 48px
|
),
|
repeating-linear-gradient(
|
to bottom,
|
rgba(148, 163, 184, 0.06) 0,
|
rgba(148, 163, 184, 0.06) 1px,
|
transparent 1px,
|
transparent 34px
|
);
|
overflow: hidden;
|
padding: 10px;
|
}
|
|
.process-chart.empty :deep(canvas) {
|
opacity: 0.2;
|
}
|
|
.chart-empty {
|
position: absolute;
|
inset: 0;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
gap: 8px;
|
color: #64748b;
|
font-size: 14px;
|
text-align: center;
|
pointer-events: auto;
|
padding: 12px;
|
}
|
|
.chart-empty .el-icon {
|
color: #2563eb;
|
font-size: 28px;
|
}
|
|
.chart-empty-title {
|
font-size: 16px;
|
font-weight: 700;
|
color: #334155;
|
}
|
|
.chart-empty-desc {
|
font-size: 13px;
|
color: #64748b;
|
}
|
|
.chart-empty-actions {
|
margin-top: 4px;
|
display: flex;
|
gap: 8px;
|
}
|
|
.process-aside {
|
display: flex;
|
flex-direction: column;
|
gap: 8px;
|
}
|
|
.process-legend,
|
.process-card {
|
border: 1px solid rgba(148, 163, 184, 0.22);
|
border-radius: 12px;
|
background: rgba(255, 255, 255, 0.84);
|
padding: 10px 12px;
|
}
|
|
.process-card {
|
min-height: 74px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
}
|
|
.process-legend {
|
min-height: 74px;
|
display: flex;
|
flex-direction: column;
|
gap: 6px;
|
justify-content: center;
|
}
|
|
.process-legend-item {
|
color: #475569;
|
font-size: 12px;
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
}
|
|
.dot {
|
width: 10px;
|
height: 10px;
|
border-radius: 3px;
|
display: inline-block;
|
}
|
|
.dot-blue {
|
background: #2563eb;
|
}
|
|
.dot-orange {
|
background: #f59e0b;
|
}
|
|
.dot-cyan {
|
background: #14b8a6;
|
}
|
|
.process-name {
|
color: #2563eb;
|
font-weight: 700;
|
font-size: 14px;
|
line-height: 1.2;
|
margin-bottom: 2px;
|
}
|
|
.process-label {
|
font-size: 12px;
|
color: #64748b;
|
}
|
|
.process-value {
|
margin-top: 4px;
|
font-size: 24px;
|
color: #0f172a;
|
font-weight: 700;
|
}
|
|
.chart-row {
|
display: grid;
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
gap: 16px;
|
}
|
|
.contract-summary {
|
display: grid;
|
grid-template-columns: 1fr 190px;
|
gap: 12px;
|
align-items: center;
|
margin-top: 8px;
|
}
|
|
.contract-card {
|
border-radius: 14px;
|
border: 1px solid rgba(148, 163, 184, 0.2);
|
background: #f8fbff;
|
padding: 12px;
|
}
|
|
.contract-name {
|
color: #64748b;
|
font-size: 13px;
|
}
|
|
.contract-main {
|
margin-top: 8px;
|
font-size: 34px;
|
font-weight: 700;
|
color: #0f172a;
|
}
|
|
.contract-compare {
|
margin-top: 8px;
|
font-size: 13px;
|
color: #64748b;
|
display: flex;
|
gap: 10px;
|
}
|
|
.rise {
|
color: #0ea5a4;
|
font-weight: 600;
|
}
|
|
.contract-list {
|
margin: 8px 0 0;
|
padding: 0;
|
list-style: none;
|
display: flex;
|
flex-direction: column;
|
gap: 8px;
|
}
|
|
.contract-list li {
|
display: grid;
|
grid-template-columns: 12px minmax(0, 1fr) 56px auto;
|
align-items: center;
|
gap: 8px;
|
color: #475569;
|
font-size: 13px;
|
}
|
|
.legend-dot {
|
width: 8px;
|
height: 8px;
|
border-radius: 50%;
|
}
|
|
.contract-item-name {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.contract-item-rate {
|
text-align: right;
|
color: #64748b;
|
}
|
|
.contract-item-value {
|
color: #1f3658;
|
text-align: right;
|
}
|
|
.quality-cards {
|
margin: 8px 0 10px;
|
display: grid;
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
gap: 10px;
|
}
|
|
.quality-card {
|
border-radius: 12px;
|
border: 1px solid rgba(148, 163, 184, 0.2);
|
padding: 10px 12px;
|
color: #475569;
|
font-size: 13px;
|
}
|
|
.quality-card.one {
|
background: linear-gradient(135deg, #ffffff, #edf4ff);
|
}
|
|
.quality-card.two {
|
background: linear-gradient(135deg, #ffffff, #ebfffc);
|
}
|
|
.quality-card.three {
|
background: linear-gradient(135deg, #ffffff, #fff3e6);
|
}
|
|
.quality-card span {
|
color: #0f172a;
|
font-weight: 700;
|
margin-left: 6px;
|
}
|
|
.realtime-grid {
|
margin-top: 10px;
|
display: grid;
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
gap: 10px;
|
}
|
|
.realtime-item {
|
border: 1px solid rgba(148, 163, 184, 0.2);
|
border-radius: 12px;
|
background: #f8fbff;
|
padding: 10px 8px;
|
text-align: center;
|
}
|
|
.realtime-value {
|
font-size: 26px;
|
color: #0f172a;
|
font-weight: 700;
|
}
|
|
.realtime-label {
|
margin-top: 8px;
|
font-size: 12px;
|
color: #475569;
|
}
|
|
.realtime-delta {
|
margin-top: 4px;
|
font-size: 12px;
|
}
|
|
.realtime-delta.up {
|
color: #0ea5a4;
|
}
|
|
.realtime-delta.down {
|
color: #f59e0b;
|
}
|
|
.warning-list {
|
margin-top: 10px;
|
display: flex;
|
flex-direction: column;
|
gap: 8px;
|
max-height: 300px;
|
overflow-y: auto;
|
}
|
|
.warning-item {
|
display: grid;
|
grid-template-columns: 10px minmax(0, 1fr) 72px;
|
align-items: center;
|
gap: 10px;
|
border: 1px solid rgba(148, 163, 184, 0.2);
|
border-radius: 12px;
|
background: #f8fbff;
|
padding: 10px;
|
}
|
|
.warning-dot {
|
width: 8px;
|
height: 8px;
|
border-radius: 50%;
|
display: block;
|
}
|
|
.warning-dot.device {
|
background: #ef4444;
|
}
|
|
.warning-dot.quality {
|
background: #f59e0b;
|
}
|
|
.warning-dot.material {
|
background: #3b82f6;
|
}
|
|
.warning-title {
|
color: #334155;
|
font-size: 13px;
|
font-weight: 600;
|
}
|
|
.warning-desc {
|
color: #64748b;
|
font-size: 12px;
|
margin-top: 4px;
|
}
|
|
.warning-time {
|
color: #64748b;
|
font-size: 12px;
|
text-align: right;
|
}
|
|
.order-panel {
|
min-height: 0;
|
}
|
|
.quick-panel {
|
min-height: 0;
|
}
|
|
.table-progress {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.table-progress span {
|
font-size: 12px;
|
color: #475569;
|
}
|
|
.quick-grid {
|
margin-top: 10px;
|
display: grid;
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
grid-auto-rows: 58px;
|
gap: 10px;
|
}
|
|
.quick-item {
|
border: 1px solid rgba(148, 163, 184, 0.22);
|
background: rgba(255, 255, 255, 0.92);
|
border-radius: 12px;
|
color: #334155;
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
padding: 0 10px;
|
font-size: 12px;
|
cursor: pointer;
|
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
}
|
|
.plan-panel {
|
min-height: 236px;
|
}
|
|
.quality-panel {
|
min-height: 0;
|
}
|
|
.receipt-panel {
|
min-height: 340px;
|
}
|
|
.plan-list {
|
margin: 10px 0 0;
|
padding: 0;
|
list-style: none;
|
display: flex;
|
flex-direction: column;
|
gap: 8px;
|
}
|
|
.plan-item {
|
border: 1px solid rgba(148, 163, 184, 0.18);
|
border-radius: 12px;
|
background: #f8fbff;
|
padding: 10px 12px;
|
}
|
|
.plan-main {
|
display: flex;
|
justify-content: space-between;
|
gap: 10px;
|
align-items: center;
|
}
|
|
.plan-order {
|
font-size: 13px;
|
color: #1f3658;
|
font-weight: 600;
|
}
|
|
.plan-name {
|
font-size: 13px;
|
color: #334155;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.plan-meta {
|
margin-top: 6px;
|
display: flex;
|
justify-content: space-between;
|
gap: 8px;
|
font-size: 12px;
|
color: #64748b;
|
}
|
|
.quick-item:hover {
|
transform: translateY(-2px);
|
border-color: rgba(96, 165, 250, 0.45);
|
box-shadow: 0 14px 28px rgba(37, 99, 235, 0.1);
|
}
|
|
.quick-icon {
|
width: 30px;
|
height: 30px;
|
border-radius: 8px;
|
background: linear-gradient(135deg, #2563eb, #38bdf8);
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 16px;
|
color: #fff;
|
}
|
|
.quick-item:nth-child(2) .quick-icon,
|
.quick-item:nth-child(6) .quick-icon {
|
background: linear-gradient(135deg, #14b8a6, #5eead4);
|
}
|
|
.quick-item:nth-child(3) .quick-icon,
|
.quick-item:nth-child(5) .quick-icon {
|
background: linear-gradient(135deg, #7c3aed, #a78bfa);
|
}
|
|
.quick-item:nth-child(4) .quick-icon,
|
.quick-item:nth-child(7) .quick-icon {
|
background: linear-gradient(135deg, #f97316, #fdba74);
|
}
|
|
.process-selection-wrapper {
|
max-height: 400px;
|
overflow-y: auto;
|
padding: 8px;
|
}
|
|
.process-grid {
|
display: grid;
|
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
gap: 10px;
|
}
|
|
:deep(.el-checkbox.is-bordered) {
|
margin-left: 0 !important;
|
width: 100%;
|
}
|
|
:deep(.el-radio-button__inner) {
|
border-radius: 10px !important;
|
background: #f8fbff;
|
border-color: rgba(148, 163, 184, 0.22) !important;
|
color: #475569 !important;
|
}
|
|
:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
|
background: linear-gradient(135deg, #2f80ff, #38bdf8) !important;
|
border-color: transparent !important;
|
color: #fff !important;
|
}
|
|
:deep(.el-progress-circle__track) {
|
stroke: rgba(148, 163, 184, 0.3);
|
}
|
|
:deep(.el-progress-bar__outer) {
|
background-color: rgba(148, 163, 184, 0.2);
|
}
|
|
:deep(.order-panel .el-progress-bar__inner) {
|
background: linear-gradient(90deg, #2563eb, #38bdf8) !important;
|
}
|
|
:deep(.order-panel .el-table) {
|
border-radius: 14px;
|
}
|
|
:deep(.order-panel .el-table th.el-table__cell) {
|
background: #f2f7ff !important;
|
}
|
|
:deep(.order-panel .el-table__body tr:hover > td.el-table__cell) {
|
background: #f8fbff !important;
|
}
|
|
:deep(.order-panel .el-tag--success) {
|
color: #0f766e;
|
background: #e9fdf7;
|
border-color: #b7f2e0;
|
}
|
|
:deep(.order-panel .el-tag--warning) {
|
color: #b45309;
|
background: #fff6e8;
|
border-color: #fde0b8;
|
}
|
|
:deep(.order-panel .el-tag--primary) {
|
color: #2563eb;
|
background: #eaf2ff;
|
border-color: #b8d2ff;
|
}
|
|
@media (max-width: 1600px) {
|
.main-grid {
|
grid-template-columns: minmax(0, 1fr) 380px;
|
}
|
}
|
|
@media (max-width: 1366px) {
|
.main-grid {
|
grid-template-columns: minmax(0, 1fr) 340px;
|
}
|
|
.stats-grid {
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
}
|
}
|
|
@media (max-width: 1200px) {
|
.main-grid {
|
grid-template-columns: 1fr;
|
}
|
|
.right-column {
|
display: grid;
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
gap: 14px;
|
}
|
|
.chart-row {
|
grid-template-columns: 1fr;
|
}
|
|
.process-body {
|
grid-template-columns: 1fr;
|
}
|
|
.realtime-grid {
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
}
|
|
.quality-cards {
|
grid-template-columns: 1fr;
|
}
|
}
|
|
@media (max-width: 768px) {
|
.welcome-panel {
|
flex-direction: column;
|
align-items: flex-start;
|
gap: 10px;
|
}
|
|
.welcome-meta {
|
text-align: left;
|
}
|
|
.meta-extra {
|
justify-content: flex-start;
|
}
|
|
.stats-grid {
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
}
|
|
.right-column {
|
grid-template-columns: 1fr;
|
}
|
|
.realtime-grid {
|
grid-template-columns: 1fr;
|
}
|
}
|
</style>
|
