| | |
| | | <div class="home-page"> |
| | | <div class="top-bar"> |
| | | <div class="user-box"> |
| | | <img :src="userStore.avatar" class="avatar" alt="" /> |
| | | <!-- <img :src="userStore.avatar" |
| | | class="avatar" |
| | | alt="" /> --> |
| | | <div> |
| | | <div class="hello">{{ userStore.roleName || "系统管理员" }},你好</div> |
| | | <div class="sub">登录时间:{{ userStore.currentLoginTime }}</div> |
| | |
| | | </div> |
| | | <div class="top-actions"> |
| | | <span class="refresh-time">数据更新时间:{{ lastUpdatedAt || "-" }}</span> |
| | | <el-button size="small" type="primary" plain @click="refreshDashboardData">刷新数据</el-button> |
| | | <el-button size="small" plain @click="configDialogVisible = true">首页配置</el-button> |
| | | <el-button size="small" |
| | | type="primary" |
| | | plain |
| | | @click="refreshDashboardData">刷新数据</el-button> |
| | | <el-button size="small" |
| | | plain |
| | | @click="configDialogVisible = true">首页配置</el-button> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="content-grid"> |
| | | <div class="left-col"> |
| | | <section class="section-card"> |
| | | <div class="section-title-row"> |
| | | <div class="section-title">快捷操作</div> |
| | | <el-button size="small" type="primary" link @click="openShortcutDialog">添加快捷入口</el-button> |
| | | <el-button size="small" |
| | | type="primary" |
| | | link |
| | | @click="openShortcutDialog">添加快捷入口</el-button> |
| | | </div> |
| | | <div class="quick-grid"> |
| | | <el-button |
| | | v-for="item in shortcuts" |
| | | <el-button v-for="item in shortcuts" |
| | | :key="`${item.label}-${item.path}`" |
| | | :type="item.invalid ? 'danger' : 'default'" |
| | | @click="goTo(item.path)" |
| | | > |
| | | @click="goTo(item.path)"> |
| | | {{ item.label }} |
| | | </el-button> |
| | | </div> |
| | | </section> |
| | | |
| | | <section class="section-card"> |
| | | <div class="section-title">重点待办</div> |
| | | <div class="todo-row" v-for="todo in todos" :key="todo.title"> |
| | | <el-tag size="small" :type="todo.type">{{ todo.level }}</el-tag> |
| | | <div class="todo-row" |
| | | v-for="todo in todos" |
| | | :key="todo.title"> |
| | | <el-tag size="small" |
| | | :type="todo.type">{{ todo.level }}</el-tag> |
| | | <span>{{ todo.title }}</span> |
| | | </div> |
| | | </section> |
| | | |
| | | <section class="section-card"> |
| | | <div class="section-title">经营关注</div> |
| | | <div class="focus-row" v-for="item in businessFocus" :key="item.name"> |
| | | <div class="focus-row" |
| | | v-for="item in businessFocus" |
| | | :key="item.name"> |
| | | <span class="focus-name">{{ item.name }}</span> |
| | | <span class="focus-value">{{ item.value }}</span> |
| | | </div> |
| | | </section> |
| | | |
| | | <section class="section-card flex-fill-card"> |
| | | <div class="section-title-row"> |
| | | <div class="section-title">今日待处理</div> |
| | | <el-radio-group v-model="pendingFilter" size="small"> |
| | | <el-radio-group v-model="pendingFilter" |
| | | size="small"> |
| | | <el-radio-button label="all">全部</el-radio-button> |
| | | <el-radio-button label="mine">我的</el-radio-button> |
| | | <el-radio-button label="high">高优先</el-radio-button> |
| | | </el-radio-group> |
| | | </div> |
| | | <div class="task-row" v-for="task in filteredPendingTasks" :key="task.id"> |
| | | <div class="task-row" |
| | | v-for="task in filteredPendingTasks" |
| | | :key="task.id"> |
| | | <div class="task-left"> |
| | | <el-tag size="small" :type="task.type">{{ task.level }}</el-tag> |
| | | <el-tag size="small" |
| | | :type="task.type">{{ task.level }}</el-tag> |
| | | <span class="task-title">{{ task.title }}</span> |
| | | </div> |
| | | <el-button link type="primary" @click="goTo(task.path)">去处理</el-button> |
| | | <el-button link |
| | | type="primary" |
| | | @click="goTo(task.path)">去处理</el-button> |
| | | </div> |
| | | <el-empty v-if="filteredPendingTasks.length === 0" description="暂无待处理事项" :image-size="80" /> |
| | | <el-empty v-if="filteredPendingTasks.length === 0" |
| | | description="暂无待处理事项" |
| | | :image-size="80" /> |
| | | </section> |
| | | </div> |
| | | |
| | | <div class="right-col"> |
| | | <section class="section-card" v-if="isSectionVisible('trendCards')"> |
| | | <section class="section-card" |
| | | v-if="isSectionVisible('trendCards')"> |
| | | <div class="section-title">最近7天关键指标趋势</div> |
| | | <div class="trend-cards"> |
| | | <div class="trend-card clickable" v-for="card in recentTrendCards" :key="card.key" @click="handleTrendCardClick(card)"> |
| | | <div class="trend-card clickable" |
| | | v-for="card in recentTrendCards" |
| | | :key="card.key" |
| | | @click="handleTrendCardClick(card)"> |
| | | <div class="trend-head"> |
| | | <span class="trend-label">{{ card.label }}</span> |
| | | <span class="trend-rate" :class="trendClass(card.change)"> |
| | | <span class="trend-rate" |
| | | :class="trendClass(card.change)"> |
| | | {{ card.change > 0 ? "+" : "" }}{{ card.change.toFixed(1) }}% |
| | | </span> |
| | | </div> |
| | | <div class="trend-value">{{ card.latest }} {{ card.unit }}</div> |
| | | <div class="sparkline"> |
| | | <span |
| | | v-for="(v, idx) in card.values" |
| | | <span v-for="(v, idx) in card.values" |
| | | :key="`${card.key}-${idx}`" |
| | | class="sparkline-bar" |
| | | :style="{ height: `${calcBarHeight(v, card.values)}%` }" |
| | | /> |
| | | :style="{ height: `${calcBarHeight(v, card.values)}%` }" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </section> |
| | | |
| | | <section class="section-card" v-if="isSectionVisible('planTrend')"> |
| | | <section class="section-card" |
| | | v-if="isSectionVisible('planTrend')"> |
| | | <div class="section-title-row"> |
| | | <div class="section-title">计划与生产趋势</div> |
| | | <el-radio-group v-model="chartRangePlan" size="small" @change="loadPlanTrend"> |
| | | <el-radio-group v-model="chartRangePlan" |
| | | size="small" |
| | | @change="loadPlanTrend"> |
| | | <el-radio-button :label="1">日</el-radio-button> |
| | | <el-radio-button :label="2">周</el-radio-button> |
| | | <el-radio-button :label="3">月</el-radio-button> |
| | | </el-radio-group> |
| | | </div> |
| | | <Echarts |
| | | :chartStyle="chartStyle" |
| | | <Echarts :chartStyle="chartStyle" |
| | | :legend="planLegend" |
| | | :grid="grid" |
| | | :tooltip="lineTooltip" |
| | | :xAxis="planXAxis" |
| | | :yAxis="valueYAxis" |
| | | :series="planSeries" |
| | | style="height: 300px" |
| | | /> |
| | | style="height: 300px" /> |
| | | </section> |
| | | |
| | | <div class="row-two" v-if="isSectionVisible('qualityChart') || isSectionVisible('costChart')"> |
| | | <section class="section-card" v-if="isSectionVisible('qualityChart')"> |
| | | <div class="row-two" |
| | | v-if="isSectionVisible('qualityChart') || isSectionVisible('costChart')"> |
| | | <section class="section-card" |
| | | v-if="isSectionVisible('qualityChart')"> |
| | | <div class="section-title-row"> |
| | | <div class="section-title">质检异常分布</div> |
| | | <el-radio-group v-model="chartRangeQuality" size="small" @change="loadQualityData"> |
| | | <el-radio-group v-model="chartRangeQuality" |
| | | size="small" |
| | | @change="loadQualityData"> |
| | | <el-radio-button :label="1">周</el-radio-button> |
| | | <el-radio-button :label="2">月</el-radio-button> |
| | | <el-radio-button :label="3">季度</el-radio-button> |
| | | </el-radio-group> |
| | | </div> |
| | | <Echarts |
| | | :chartStyle="chartStyle" |
| | | <Echarts :chartStyle="chartStyle" |
| | | :grid="grid" |
| | | :tooltip="barTooltip" |
| | | :xAxis="qualityXAxis" |
| | | :yAxis="valueYAxis" |
| | | :series="qualitySeries" |
| | | style="height: 260px" |
| | | /> |
| | | style="height: 260px" /> |
| | | </section> |
| | | <section class="section-card" v-if="isSectionVisible('costChart')"> |
| | | <section class="section-card" |
| | | v-if="isSectionVisible('costChart')"> |
| | | <div class="section-title">能耗与成本结构</div> |
| | | <Echarts |
| | | :chartStyle="chartStyle" |
| | | <Echarts :chartStyle="chartStyle" |
| | | :legend="costLegend" |
| | | :tooltip="pieTooltip" |
| | | :series="costSeries" |
| | | style="height: 260px" |
| | | /> |
| | | style="height: 260px" /> |
| | | </section> |
| | | </div> |
| | | |
| | | <section class="section-card" v-if="isSectionVisible('warningCenter')"> |
| | | <section class="section-card" |
| | | v-if="isSectionVisible('warningCenter')"> |
| | | <div class="section-title">异常预警中心</div> |
| | | <div class="warning-row" v-for="item in warningList" :key="item.id"> |
| | | <div class="warning-row" |
| | | v-for="item in warningList" |
| | | :key="item.id"> |
| | | <div class="warning-left"> |
| | | <el-tag size="small" :type="item.levelType">{{ item.levelText }}</el-tag> |
| | | <el-tag size="small" |
| | | :type="item.levelType">{{ item.levelText }}</el-tag> |
| | | <span class="warning-title">{{ item.title }}</span> |
| | | </div> |
| | | <el-button link type="danger" @click="goTo(item.path)">处理</el-button> |
| | | <el-button link |
| | | type="danger" |
| | | @click="goTo(item.path)">处理</el-button> |
| | | </div> |
| | | <el-empty v-if="warningList.length === 0" description="暂无异常预警" :image-size="80" /> |
| | | <el-empty v-if="warningList.length === 0" |
| | | description="暂无异常预警" |
| | | :image-size="80" /> |
| | | </section> |
| | | |
| | | <section class="section-card mini-table-wrap" v-if="isSectionVisible('planTable')"> |
| | | <section class="section-card mini-table-wrap" |
| | | v-if="isSectionVisible('planTable')"> |
| | | <div class="section-title">生产计划执行明细</div> |
| | | <el-table :data="planTable" size="small" stripe> |
| | | <el-table-column prop="planNo" label="计划单号" min-width="150" /> |
| | | <el-table-column prop="product" label="产品" min-width="120" /> |
| | | <el-table-column prop="qty" label="计划量" min-width="90" /> |
| | | <el-table-column prop="issued" label="已下发" min-width="90" /> |
| | | <el-table-column prop="status" label="状态" min-width="100" /> |
| | | <el-table-column label="操作" min-width="120"> |
| | | <el-table :data="planTable" |
| | | size="small" |
| | | stripe> |
| | | <el-table-column prop="planNo" |
| | | label="计划单号" |
| | | min-width="150" /> |
| | | <el-table-column prop="product" |
| | | label="产品" |
| | | min-width="120" /> |
| | | <el-table-column prop="qty" |
| | | label="计划量" |
| | | min-width="90" /> |
| | | <el-table-column prop="issued" |
| | | label="已下发" |
| | | min-width="90" /> |
| | | <el-table-column prop="status" |
| | | label="状态" |
| | | min-width="100" /> |
| | | <el-table-column label="操作" |
| | | min-width="120"> |
| | | <template #default="{ row }"> |
| | | <el-button link type="primary" @click="goTo(routePathMap.plan)">查看</el-button> |
| | | <el-button |
| | | v-if="row.status !== '已完成'" |
| | | <el-button link |
| | | type="primary" |
| | | @click="goTo(routePathMap.plan)">查看</el-button> |
| | | <el-button v-if="row.status !== '已完成'" |
| | | link |
| | | type="success" |
| | | @click="goTo(routePathMap.dispatch)" |
| | | > |
| | | @click="goTo(routePathMap.dispatch)"> |
| | | 下发 |
| | | </el-button> |
| | | </template> |
| | |
| | | </section> |
| | | </div> |
| | | </div> |
| | | |
| | | <el-dialog v-model="shortcutDialogVisible" title="添加快捷入口(最多6个)" width="680px"> |
| | | <el-dialog v-model="shortcutDialogVisible" |
| | | title="添加快捷入口(最多6个)" |
| | | width="680px"> |
| | | <div class="shortcut-form-row"> |
| | | <el-tree-select |
| | | v-model="selectedPagePath" |
| | | <el-tree-select v-model="selectedPagePath" |
| | | placeholder="请选择页面(目录不可选)" |
| | | filterable |
| | | clearable |
| | |
| | | node-key="value" |
| | | :data="menuTreeOptions" |
| | | :props="{ label: 'label', value: 'value', children: 'children', disabled: 'disabled' }" |
| | | style="grid-column: span 2" |
| | | /> |
| | | <el-button type="success" @click="addShortcutBySelect">选择添加</el-button> |
| | | style="grid-column: span 2" /> |
| | | <el-button type="success" |
| | | @click="addShortcutBySelect">选择添加</el-button> |
| | | </div> |
| | | <el-table :data="shortcuts" size="small" border> |
| | | <el-table-column prop="label" label="名称" min-width="220" /> |
| | | <el-table-column label="状态" min-width="80"> |
| | | <el-table :data="shortcuts" |
| | | size="small" |
| | | border> |
| | | <el-table-column prop="label" |
| | | label="名称" |
| | | min-width="220" /> |
| | | <el-table-column label="状态" |
| | | min-width="80"> |
| | | <template #default="{ row }"> |
| | | <el-tag size="small" :type="row.invalid ? 'danger' : 'success'">{{ row.invalid ? "无效" : "有效" }}</el-tag> |
| | | <el-tag size="small" |
| | | :type="row.invalid ? 'danger' : 'success'">{{ row.invalid ? "无效" : "有效" }}</el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" min-width="90" align="center"> |
| | | <el-table-column label="操作" |
| | | min-width="90" |
| | | align="center"> |
| | | <template #default="{ $index }"> |
| | | <el-button link type="danger" @click="removeShortcut($index)">删除</el-button> |
| | | <el-button link |
| | | type="danger" |
| | | @click="removeShortcut($index)">删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-dialog> |
| | | |
| | | <el-dialog v-model="configDialogVisible" title="首页模块配置" width="520px"> |
| | | <el-checkbox-group v-model="enabledSectionKeys" class="config-check-group"> |
| | | <el-checkbox v-for="item in sectionConfigOptions" :key="item.key" :label="item.key"> |
| | | <el-dialog v-model="configDialogVisible" |
| | | title="首页模块配置" |
| | | width="520px"> |
| | | <el-checkbox-group v-model="enabledSectionKeys" |
| | | class="config-check-group"> |
| | | <el-checkbox v-for="item in sectionConfigOptions" |
| | | :key="item.key" |
| | | :label="item.key"> |
| | | {{ item.label }} |
| | | </el-checkbox> |
| | | </el-checkbox-group> |
| | | <template #footer> |
| | | <el-button @click="configDialogVisible = false">取消</el-button> |
| | | <el-button type="primary" @click="saveSectionConfig">保存</el-button> |
| | | <el-button type="primary" |
| | | @click="saveSectionConfig">保存</el-button> |
| | | </template> |
| | | </el-dialog> |
| | | </div> |
| | |
| | | { label: "决策分析", path: "/reportAnalysis/dataDashboard" }, |
| | | ]; |
| | | |
| | | const isRouteValid = (path) => { |
| | | const isRouteValid = path => { |
| | | if (!path || !path.startsWith("/")) return false; |
| | | const resolved = router.resolve(path); |
| | | return resolved.matched && resolved.matched.length > 0; |
| | | }; |
| | | |
| | | const withValidFlag = (list) => |
| | | list.map((item) => ({ |
| | | const withValidFlag = list => |
| | | list.map(item => ({ |
| | | ...item, |
| | | invalid: !isRouteValid(item.path), |
| | | })); |
| | | |
| | | const pageOptions = router |
| | | .getRoutes() |
| | | .filter((route) => { |
| | | .filter(route => { |
| | | const hasTitle = Boolean(route.meta?.title); |
| | | const validPath = route.path && route.path.startsWith("/") && !route.path.includes(":"); |
| | | const validPath = |
| | | route.path && route.path.startsWith("/") && !route.path.includes(":"); |
| | | const isVisibleMenu = !route.meta?.hidden && route.path !== "/index"; |
| | | const notSpecial = |
| | | !route.path.includes("redirect") && |
| | |
| | | !route.path.includes(":pathMatch"); |
| | | return hasTitle && validPath && isVisibleMenu && notSpecial; |
| | | }) |
| | | .map((route) => ({ |
| | | .map(route => ({ |
| | | title: route.meta.title, |
| | | path: route.path, |
| | | })) |
| | | .sort((a, b) => a.path.localeCompare(b.path)); |
| | | |
| | | const normalizePath = (path) => String(path || "").replace(/\/+/g, "/"); |
| | | const normalizePath = path => String(path || "").replace(/\/+/g, "/"); |
| | | const joinPath = (parentPath, childPath) => { |
| | | if (!childPath) return normalizePath(parentPath || "/"); |
| | | if (String(childPath).startsWith("/")) return normalizePath(childPath); |
| | |
| | | |
| | | const buildMenuTreeOptions = (routes = [], parentPath = "") => { |
| | | const result = []; |
| | | routes.forEach((route) => { |
| | | routes.forEach(route => { |
| | | if (!route || route.hidden) return; |
| | | const fullPath = joinPath(parentPath, route.path); |
| | | const children = buildMenuTreeOptions(route.children || [], fullPath); |
| | |
| | | return result; |
| | | }; |
| | | |
| | | const menuTreeOptions = computed(() => buildMenuTreeOptions(permissionStore.sidebarRouters || [])); |
| | | const menuTreeOptions = computed(() => |
| | | buildMenuTreeOptions(permissionStore.sidebarRouters || []) |
| | | ); |
| | | const selectableMenuMap = computed(() => { |
| | | const map = new Map(); |
| | | const walk = (list = []) => { |
| | | list.forEach((item) => { |
| | | list.forEach(item => { |
| | | if (!item.disabled) map.set(item.value, item.label); |
| | | if (item.children?.length) walk(item.children); |
| | | }); |
| | |
| | | }); |
| | | |
| | | const keywordMap = { |
| | | "主生产计划": ["生产计划", "productionPlan"], |
| | | "生产订单": ["生产订单", "productionOrder"], |
| | | "生产报工": ["报工", "productionReporting"], |
| | | "过程检": ["过程检", "processInspection"], |
| | | "生产能耗": ["生产能耗", "productionEnergyConsumption"], |
| | | "生产成本": ["生产成本", "productionCostAccounting"], |
| | | "标准vs实际": ["标准", "实际", "stdVsActCostAnalysis"], |
| | | "决策分析": ["决策", "看板", "dataDashboard"], |
| | | 主生产计划: ["生产计划", "productionPlan"], |
| | | 生产订单: ["生产订单", "productionOrder"], |
| | | 生产报工: ["报工", "productionReporting"], |
| | | 过程检: ["过程检", "processInspection"], |
| | | 生产能耗: ["生产能耗", "productionEnergyConsumption"], |
| | | 生产成本: ["生产成本", "productionCostAccounting"], |
| | | 标准vs实际: ["标准", "实际", "stdVsActCostAnalysis"], |
| | | 决策分析: ["决策", "看板", "dataDashboard"], |
| | | }; |
| | | |
| | | const findRouteByKeywords = (keywords = []) => { |
| | | const lowerKeywords = keywords.map((k) => String(k).toLowerCase()); |
| | | return pageOptions.find((item) => { |
| | | const lowerKeywords = keywords.map(k => String(k).toLowerCase()); |
| | | return pageOptions.find(item => { |
| | | const title = String(item.title || "").toLowerCase(); |
| | | const path = String(item.path || "").toLowerCase(); |
| | | return lowerKeywords.some((k) => title.includes(k) || path.includes(k)); |
| | | return lowerKeywords.some(k => title.includes(k) || path.includes(k)); |
| | | }); |
| | | }; |
| | | |
| | | const getPathByKeywords = (keywords = []) => findRouteByKeywords(keywords)?.path || ""; |
| | | const getPathByKeywords = (keywords = []) => |
| | | findRouteByKeywords(keywords)?.path || ""; |
| | | |
| | | const getRecommendedShortcuts = () => { |
| | | const list = defaultShortcuts |
| | | .map((item) => { |
| | | const matched = findRouteByKeywords(keywordMap[item.label] || [item.label]); |
| | | .map(item => { |
| | | const matched = findRouteByKeywords( |
| | | keywordMap[item.label] || [item.label] |
| | | ); |
| | | return matched ? { label: item.label, path: matched.path } : null; |
| | | }) |
| | | .filter(Boolean); |
| | | return list.length > 0 ? list : defaultShortcuts; |
| | | }; |
| | | |
| | | const tryRepairSavedShortcut = (item) => { |
| | | const tryRepairSavedShortcut = item => { |
| | | const matched = findRouteByKeywords(keywordMap[item.label] || [item.label]); |
| | | if (matched) return { label: item.label, path: matched.path }; |
| | | return item; |
| | |
| | | if (!saved) return recommended; |
| | | const parsed = JSON.parse(saved); |
| | | if (!Array.isArray(parsed) || parsed.length === 0) return recommended; |
| | | return parsed.map((item) => tryRepairSavedShortcut(item)); |
| | | return parsed.map(item => tryRepairSavedShortcut(item)); |
| | | } catch (error) { |
| | | return recommended; |
| | | } |
| | |
| | | const persistShortcuts = () => { |
| | | localStorage.setItem( |
| | | SHORTCUT_STORAGE_KEY, |
| | | JSON.stringify(shortcuts.slice(0, 6).map(({ label, path }) => ({ label, path }))) |
| | | JSON.stringify( |
| | | shortcuts.slice(0, 6).map(({ label, path }) => ({ label, path })) |
| | | ) |
| | | ); |
| | | }; |
| | | |
| | |
| | | { key: "warningCenter", label: "异常预警中心" }, |
| | | { key: "planTable", label: "生产计划执行明细表" }, |
| | | ]; |
| | | const enabledSectionKeys = ref(sectionConfigOptions.map((i) => i.key)); |
| | | const enabledSectionKeys = ref(sectionConfigOptions.map(i => i.key)); |
| | | |
| | | const chartStyle = { width: "100%", height: "100%" }; |
| | | const grid = { left: "3%", right: "4%", bottom: "3%", containLabel: true }; |
| | |
| | | |
| | | const planTable = reactive([]); |
| | | const recentTrendCards = reactive([ |
| | | { key: "planIssued", label: "计划下发量", unit: "单", values: [0, 0, 0, 0, 0, 0, 0], latest: 0, change: 0 }, |
| | | { key: "qualityRaw", label: "来料检数量", unit: "条", values: [0, 0, 0, 0, 0, 0, 0], latest: 0, change: 0 }, |
| | | { key: "qualityProcess", label: "过程检数量", unit: "条", values: [0, 0, 0, 0, 0, 0, 0], latest: 0, change: 0 }, |
| | | { key: "qualityFactory", label: "成品检数量", unit: "条", values: [0, 0, 0, 0, 0, 0, 0], latest: 0, change: 0 }, |
| | | { |
| | | key: "planIssued", |
| | | label: "计划下发量", |
| | | unit: "单", |
| | | values: [0, 0, 0, 0, 0, 0, 0], |
| | | latest: 0, |
| | | change: 0, |
| | | }, |
| | | { |
| | | key: "qualityRaw", |
| | | label: "来料检数量", |
| | | unit: "条", |
| | | values: [0, 0, 0, 0, 0, 0, 0], |
| | | latest: 0, |
| | | change: 0, |
| | | }, |
| | | { |
| | | key: "qualityProcess", |
| | | label: "过程检数量", |
| | | unit: "条", |
| | | values: [0, 0, 0, 0, 0, 0, 0], |
| | | latest: 0, |
| | | change: 0, |
| | | }, |
| | | { |
| | | key: "qualityFactory", |
| | | label: "成品检数量", |
| | | unit: "条", |
| | | values: [0, 0, 0, 0, 0, 0, 0], |
| | | latest: 0, |
| | | change: 0, |
| | | }, |
| | | ]); |
| | | |
| | | const toNumber = (value) => { |
| | | const toNumber = value => { |
| | | const num = Number(value); |
| | | return Number.isFinite(num) ? num : 0; |
| | | }; |
| | | |
| | | const pickFirstNumber = (obj, keys = []) => { |
| | | for (const key of keys) { |
| | | if (obj && obj[key] !== undefined && obj[key] !== null) return toNumber(obj[key]); |
| | | if (obj && obj[key] !== undefined && obj[key] !== null) |
| | | return toNumber(obj[key]); |
| | | } |
| | | return 0; |
| | | }; |
| | |
| | | target.splice(0, target.length, ...list); |
| | | }; |
| | | |
| | | const toFixedOne = (num) => Number(num || 0).toFixed(1); |
| | | const toFixedOne = num => Number(num || 0).toFixed(1); |
| | | |
| | | const normalizeSeven = (list = []) => { |
| | | const nums = list.map((i) => toNumber(i)); |
| | | const nums = list.map(i => toNumber(i)); |
| | | if (nums.length >= 7) return nums.slice(-7); |
| | | return [...Array(7 - nums.length).fill(0), ...nums]; |
| | | }; |
| | | |
| | | const calcTrend = (list = []) => { |
| | | if (!Array.isArray(list) || list.length === 0) return { latest: 0, change: 0 }; |
| | | if (!Array.isArray(list) || list.length === 0) |
| | | return { latest: 0, change: 0 }; |
| | | const first = toNumber(list[0]); |
| | | const latest = toNumber(list[list.length - 1]); |
| | | if (first === 0) return { latest, change: latest > 0 ? 100 : 0 }; |
| | |
| | | }; |
| | | |
| | | const setTrendCard = (key, values) => { |
| | | const target = recentTrendCards.find((i) => i.key === key); |
| | | const target = recentTrendCards.find(i => i.key === key); |
| | | if (!target) return; |
| | | const series = normalizeSeven(values); |
| | | const { latest, change } = calcTrend(series); |
| | |
| | | target.change = Number(toFixedOne(change)); |
| | | }; |
| | | |
| | | const trendClass = (change) => (change > 0 ? "up" : change < 0 ? "down" : "flat"); |
| | | const trendClass = change => (change > 0 ? "up" : change < 0 ? "down" : "flat"); |
| | | |
| | | const calcBarHeight = (value, list) => { |
| | | const max = Math.max(...list, 1); |
| | |
| | | }; |
| | | |
| | | const filteredPendingTasks = computed(() => { |
| | | if (pendingFilter.value === "high") return pendingTasks.filter((i) => i.level === "高"); |
| | | if (pendingFilter.value === "high") |
| | | return pendingTasks.filter(i => i.level === "高"); |
| | | if (pendingFilter.value === "mine") { |
| | | const currentUserName = String(userStore?.name || "").toLowerCase(); |
| | | const currentUserId = String(userStore?.userId || ""); |
| | | return pendingTasks.filter((i) => { |
| | | return pendingTasks.filter(i => { |
| | | const ownerName = String(i.ownerName || "").toLowerCase(); |
| | | const ownerId = String(i.ownerId || ""); |
| | | return (currentUserName && ownerName && ownerName.includes(currentUserName)) || (currentUserId && ownerId === currentUserId); |
| | | return ( |
| | | (currentUserName && ownerName && ownerName.includes(currentUserName)) || |
| | | (currentUserId && ownerId === currentUserId) |
| | | ); |
| | | }); |
| | | } |
| | | return pendingTasks; |
| | | }); |
| | | |
| | | const isSectionVisible = (key) => enabledSectionKeys.value.includes(key); |
| | | const isSectionVisible = key => enabledSectionKeys.value.includes(key); |
| | | |
| | | const goTo = (path) => { |
| | | const goTo = path => { |
| | | if (!isRouteValid(path)) { |
| | | ElMessage.warning("当前菜单未配置该页面或无访问权限"); |
| | | return; |
| | |
| | | router.push(path); |
| | | }; |
| | | |
| | | const handleTrendCardClick = (card) => { |
| | | const handleTrendCardClick = card => { |
| | | const mapping = { |
| | | planIssued: routePathMap.plan || routePathMap.order, |
| | | qualityRaw: routePathMap.processInspection, |
| | |
| | | ElMessage.warning("请先选择页面"); |
| | | return; |
| | | } |
| | | if (shortcuts.some((item) => item.path === selectedPagePath.value)) { |
| | | if (shortcuts.some(item => item.path === selectedPagePath.value)) { |
| | | ElMessage.warning("该快捷入口已存在"); |
| | | return; |
| | | } |
| | |
| | | selectedPagePath.value = ""; |
| | | }; |
| | | |
| | | const removeShortcut = (index) => { |
| | | const removeShortcut = index => { |
| | | shortcuts.splice(index, 1); |
| | | persistShortcuts(); |
| | | ElMessage.success("已删除快捷入口"); |
| | |
| | | const res = await homeTodos(); |
| | | const list = Array.isArray(res?.data) ? res.data : []; |
| | | const mapped = list.slice(0, 4).map((item, idx) => { |
| | | const text = item?.approveReason || item?.approveTypeName || `待处理事项 ${idx + 1}`; |
| | | const text = |
| | | item?.approveReason || item?.approveTypeName || `待处理事项 ${idx + 1}`; |
| | | const levelType = idx === 0 ? "danger" : idx <= 2 ? "warning" : "success"; |
| | | const level = idx === 0 ? "高" : idx <= 2 ? "中" : "低"; |
| | | return { level, title: text, type: levelType }; |
| | | }); |
| | | updateArray(todos, mapped); |
| | | const pendingMapped = list.slice(0, 4).map((item, idx) => { |
| | | const title = item?.approveReason || item?.approveTypeName || `待处理事项 ${idx + 1}`; |
| | | const title = |
| | | item?.approveReason || item?.approveTypeName || `待处理事项 ${idx + 1}`; |
| | | const path = inferTodoPath(item); |
| | | return { |
| | | id: item?.id || `${idx}-${title}`, |
| | |
| | | |
| | | const loadOrderAndProgress = async () => { |
| | | try { |
| | | const [orderRes, progressRes] = await Promise.allSettled([orderCount(), getProgressStatistics()]); |
| | | const [orderRes, progressRes] = await Promise.allSettled([ |
| | | orderCount(), |
| | | getProgressStatistics(), |
| | | ]); |
| | | |
| | | if (orderRes.status === "fulfilled") { |
| | | const items = Array.isArray(orderRes.value?.data) ? orderRes.value.data : []; |
| | | const items = Array.isArray(orderRes.value?.data) |
| | | ? orderRes.value.data |
| | | : []; |
| | | const byName = Object.fromEntries( |
| | | items.map((i) => [String(i?.name || "").replace(/\s/g, ""), i?.value]) |
| | | items.map(i => [String(i?.name || "").replace(/\s/g, ""), i?.value]) |
| | | ); |
| | | businessFocus[0].value = `${pickFirstNumber(byName, ["生产订单数", "生产订单总数", "总订单数"]) || 0} 单`; |
| | | businessFocus[1].value = `${pickFirstNumber(byName, ["已完成订单数"]) || 0} 单`; |
| | | businessFocus[2].value = `${pickFirstNumber(byName, ["待生产订单数", "未完成订单数"]) || 0} 单`; |
| | | businessFocus[3].value = `${pickFirstNumber(byName, ["部分完成订单数"]) || 0} 单`; |
| | | businessFocus[0].value = `${ |
| | | pickFirstNumber(byName, ["生产订单数", "生产订单总数", "总订单数"]) || 0 |
| | | } 单`; |
| | | businessFocus[1].value = `${ |
| | | pickFirstNumber(byName, ["已完成订单数"]) || 0 |
| | | } 单`; |
| | | businessFocus[2].value = `${ |
| | | pickFirstNumber(byName, ["待生产订单数", "未完成订单数"]) || 0 |
| | | } 单`; |
| | | businessFocus[3].value = `${ |
| | | pickFirstNumber(byName, ["部分完成订单数"]) || 0 |
| | | } 单`; |
| | | } |
| | | |
| | | if (progressRes.status === "fulfilled") { |
| | | const p = progressRes.value?.data || {}; |
| | | const detail = Array.isArray(p.completedOrderDetails) ? p.completedOrderDetails : []; |
| | | const detail = Array.isArray(p.completedOrderDetails) |
| | | ? p.completedOrderDetails |
| | | : []; |
| | | const rows = detail.slice(0, 6).map((item, index) => { |
| | | const qty = pickFirstNumber(item, ["quantity", "planQuantity"]); |
| | | const done = pickFirstNumber(item, ["completeQuantity", "completedQuantity"]); |
| | | const done = pickFirstNumber(item, [ |
| | | "completeQuantity", |
| | | "completedQuantity", |
| | | ]); |
| | | return { |
| | | planNo: item.npsNo || item.productionPlanNo || `NO-${index + 1}`, |
| | | product: item.productCategory || item.productName || "-", |
| | | qty, |
| | | issued: done, |
| | | status: qty > 0 && done >= qty ? "已完成" : done > 0 ? "执行中" : "待下发", |
| | | status: |
| | | qty > 0 && done >= qty ? "已完成" : done > 0 ? "执行中" : "待下发", |
| | | }; |
| | | }); |
| | | updateArray(planTable, rows); |
| | | setTrendCard( |
| | | "planIssued", |
| | | detail.slice(-7).map((i) => pickFirstNumber(i, ["completeQuantity", "completedQuantity", "issueNum"])) |
| | | detail |
| | | .slice(-7) |
| | | .map(i => |
| | | pickFirstNumber(i, [ |
| | | "completeQuantity", |
| | | "completedQuantity", |
| | | "issueNum", |
| | | ]) |
| | | ) |
| | | ); |
| | | |
| | | } |
| | | } catch (error) { |
| | | console.error("orderCount/getProgressStatistics接口获取失败:", error); |
| | | } |
| | | }; |
| | | |
| | | const inferTodoPath = (todo) => { |
| | | const text = `${todo?.approveTypeName || ""}${todo?.approveReason || ""}`.toLowerCase(); |
| | | const inferTodoPath = todo => { |
| | | const text = `${todo?.approveTypeName || ""}${ |
| | | todo?.approveReason || "" |
| | | }`.toLowerCase(); |
| | | if (text.includes("计划")) return routePathMap.plan || routePathMap.order; |
| | | if (text.includes("订单")) return routePathMap.order || routePathMap.plan; |
| | | if (text.includes("过程检") || text.includes("质检")) return routePathMap.processInspection || routePathMap.plan; |
| | | if (text.includes("能耗") || text.includes("抄表")) return routePathMap.meter || routePathMap.plan; |
| | | if (text.includes("过程检") || text.includes("质检")) |
| | | return routePathMap.processInspection || routePathMap.plan; |
| | | if (text.includes("能耗") || text.includes("抄表")) |
| | | return routePathMap.meter || routePathMap.plan; |
| | | return routePathMap.plan || routePathMap.order || ""; |
| | | }; |
| | | |
| | | const loadPlanTrend = async () => { |
| | | try { |
| | | const res = await processDataProductionStatistics({ type: chartRangePlan.value }); |
| | | const res = await processDataProductionStatistics({ |
| | | type: chartRangePlan.value, |
| | | }); |
| | | const list = Array.isArray(res?.data) ? res.data : []; |
| | | planXAxis[0].data = list.map((i, index) => i.processName || `工序${index + 1}`); |
| | | planSeries[0].data = list.map((i) => pickFirstNumber(i, ["totalInput", "input", "planNum"])); |
| | | planSeries[1].data = list.map((i) => pickFirstNumber(i, ["totalOutput", "output", "issueNum"])); |
| | | planSeries[2].data = list.map((i) => pickFirstNumber(i, ["totalScrap", "scrap", "completeNum"])); |
| | | planXAxis[0].data = list.map( |
| | | (i, index) => i.processName || `工序${index + 1}` |
| | | ); |
| | | planSeries[0].data = list.map(i => |
| | | pickFirstNumber(i, ["totalInput", "input", "planNum"]) |
| | | ); |
| | | planSeries[1].data = list.map(i => |
| | | pickFirstNumber(i, ["totalOutput", "output", "issueNum"]) |
| | | ); |
| | | planSeries[2].data = list.map(i => |
| | | pickFirstNumber(i, ["totalScrap", "scrap", "completeNum"]) |
| | | ); |
| | | } catch (error) { |
| | | console.error("processDataProductionStatistics接口获取失败:", error); |
| | | } |
| | |
| | | |
| | | const loadQualityData = async () => { |
| | | try { |
| | | const res = await qualityInspectionStatistics({ type: chartRangeQuality.value }); |
| | | const res = await qualityInspectionStatistics({ |
| | | type: chartRangeQuality.value, |
| | | }); |
| | | const data = res?.data || {}; |
| | | const items = Array.isArray(data.item) ? data.item : []; |
| | | if (items.length > 0) { |
| | | qualityXAxis[0].data = items.map((i) => i.date || i.name || "-"); |
| | | qualitySeries[0].data = items.map((i) => |
| | | pickFirstNumber(i, ["supplierNum", "processNum", "factoryNum", "totalNum"]) |
| | | qualityXAxis[0].data = items.map(i => i.date || i.name || "-"); |
| | | qualitySeries[0].data = items.map(i => |
| | | pickFirstNumber(i, [ |
| | | "supplierNum", |
| | | "processNum", |
| | | "factoryNum", |
| | | "totalNum", |
| | | ]) |
| | | ); |
| | | setTrendCard("qualityRaw", items.map((i) => pickFirstNumber(i, ["supplierNum"]))); |
| | | setTrendCard("qualityProcess", items.map((i) => pickFirstNumber(i, ["processNum"]))); |
| | | setTrendCard("qualityFactory", items.map((i) => pickFirstNumber(i, ["factoryNum"]))); |
| | | setTrendCard( |
| | | "qualityRaw", |
| | | items.map(i => pickFirstNumber(i, ["supplierNum"])) |
| | | ); |
| | | setTrendCard( |
| | | "qualityProcess", |
| | | items.map(i => pickFirstNumber(i, ["processNum"])) |
| | | ); |
| | | setTrendCard( |
| | | "qualityFactory", |
| | | items.map(i => pickFirstNumber(i, ["factoryNum"])) |
| | | ); |
| | | } else { |
| | | qualityXAxis[0].data = ["来料检", "过程检", "成品检"]; |
| | | qualitySeries[0].data = [ |
| | |
| | | setTrendCard("qualityProcess", [pickFirstNumber(data, ["processNum"])]); |
| | | setTrendCard("qualityFactory", [pickFirstNumber(data, ["factoryNum"])]); |
| | | } |
| | | businessFocus[4].value = `${pickFirstNumber(data, ["supplierNum", "totalNum"])} 条`; |
| | | businessFocus[4].value = `${pickFirstNumber(data, [ |
| | | "supplierNum", |
| | | "totalNum", |
| | | ])} 条`; |
| | | businessFocus[5].value = `${pickFirstNumber(data, ["processNum"])} 条`; |
| | | } catch (error) { |
| | | console.error("qualityInspectionStatistics接口获取失败:", error); |
| | |
| | | const list = Array.isArray(res?.data) ? res.data : []; |
| | | const mapped = list.slice(0, 6).map((item, idx) => { |
| | | const levelNum = toNumber(item.level ?? item.warningLevel ?? 2); |
| | | const levelType = levelNum >= 3 ? "danger" : levelNum === 2 ? "warning" : "info"; |
| | | const levelType = |
| | | levelNum >= 3 ? "danger" : levelNum === 2 ? "warning" : "info"; |
| | | const levelText = levelNum >= 3 ? "高" : levelNum === 2 ? "中" : "低"; |
| | | const title = item.name || item.title || item.paramName || `异常预警 ${idx + 1}`; |
| | | const text = `${title}${item.processName || ""}${item.orderNo || ""}`.toLowerCase(); |
| | | const title = |
| | | item.name || item.title || item.paramName || `异常预警 ${idx + 1}`; |
| | | const text = `${title}${item.processName || ""}${ |
| | | item.orderNo || "" |
| | | }`.toLowerCase(); |
| | | const path = text.includes("质检") |
| | | ? routePathMap.processInspection |
| | | : text.includes("订单") |
| | | ? routePathMap.order |
| | | : routePathMap.processInspection || routePathMap.order || routePathMap.plan; |
| | | return { id: item.id || `${idx}-${title}`, levelType, levelText, title, path }; |
| | | : routePathMap.processInspection || |
| | | routePathMap.order || |
| | | routePathMap.plan; |
| | | return { |
| | | id: item.id || `${idx}-${title}`, |
| | | levelType, |
| | | levelText, |
| | | title, |
| | | path, |
| | | }; |
| | | }); |
| | | updateArray(warningList, mapped); |
| | | } catch (error) { |
| | |
| | | if (!raw) return; |
| | | const parsed = JSON.parse(raw); |
| | | if (Array.isArray(parsed) && parsed.length > 0) { |
| | | enabledSectionKeys.value = parsed.filter((k) => sectionConfigOptions.some((i) => i.key === k)); |
| | | enabledSectionKeys.value = parsed.filter(k => |
| | | sectionConfigOptions.some(i => i.key === k) |
| | | ); |
| | | } |
| | | } catch (error) { |
| | | console.error("读取首页配置失败:", error); |
| | |
| | | ElMessage.warning("至少保留一个模块"); |
| | | return; |
| | | } |
| | | localStorage.setItem(SECTION_CONFIG_KEY, JSON.stringify(enabledSectionKeys.value)); |
| | | localStorage.setItem( |
| | | SECTION_CONFIG_KEY, |
| | | JSON.stringify(enabledSectionKeys.value) |
| | | ); |
| | | configDialogVisible.value = false; |
| | | ElMessage.success("首页配置已保存"); |
| | | }; |
| | |
| | | try { |
| | | const res = await expenseCompositionAnalysis({ type: 1 }); |
| | | const list = Array.isArray(res?.data) ? res.data : []; |
| | | const mapped = list.map((i) => ({ |
| | | const mapped = list.map(i => ({ |
| | | name: i.name || "未命名", |
| | | value: pickFirstNumber(i, ["value", "amount", "cost"]), |
| | | })); |
| | |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | initSectionConfig(); |
| | | refreshDashboardData(); |
| | | // initSectionConfig(); |
| | | // refreshDashboardData(); |
| | | }); |
| | | </script> |
| | | |