|
|
<template>
|
|
|
<div class="dashboard-page">
|
|
|
<!-- 第1行 — 3个统计卡片 -->
|
|
|
<el-row :gutter="16" class="stat-row">
|
|
|
<el-col :span="8">
|
|
|
<el-card shadow="hover">
|
|
|
<div class="stat-card">
|
|
|
<div class="stat-label">
|
|
|
在线机床数
|
|
|
<el-tooltip content="当前网络连通的机床数量占所有已启用机床总数的比例。" placement="top">
|
|
|
<span class="info-icon">ⓘ</span>
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
<div class="stat-value">{{ summary.onlineCount }}<span class="stat-unit"> / {{ summary.totalMachines }}</span></div>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<el-card shadow="hover">
|
|
|
<div class="stat-card">
|
|
|
<div class="stat-label">
|
|
|
今日总产量
|
|
|
<el-tooltip content="今日所有机床加工完成的零件总数。" placement="top">
|
|
|
<span class="info-icon">ⓘ</span>
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
<div class="stat-value">{{ summary.todayProduction?.toLocaleString() }}</div>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<!-- 第2行 — 双图表 -->
|
|
|
<el-row :gutter="16" class="chart-row">
|
|
|
<el-col :span="12">
|
|
|
<el-card shadow="hover">
|
|
|
<template #header>
|
|
|
<span class="card-title">
|
|
|
产量趋势（近7天）
|
|
|
<el-tooltip content="最近7天每天的零件总产量变化趋势。" placement="top">
|
|
|
<span class="info-icon">ⓘ</span>
|
|
|
</el-tooltip>
|
|
|
</span>
|
|
|
</template>
|
|
|
<div ref="trendChartRef" style="height: 260px"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-card shadow="hover">
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
<span class="card-title">
|
|
|
NC程序产量分布
|
|
|
<el-tooltip content="按NC程序名统计的产量占比分布。" placement="top">
|
|
|
<span class="info-icon">ⓘ</span>
|
|
|
</el-tooltip>
|
|
|
</span>
|
|
|
<div class="date-filter">
|
|
|
<el-radio-group v-model="programDistDateType" size="small" @change="onProgramDistDateChange">
|
|
|
<el-radio-button value="today">今日</el-radio-button>
|
|
|
<el-radio-button value="yesterday">昨日</el-radio-button>
|
|
|
<el-radio-button value="last3">近3天</el-radio-button>
|
|
|
<el-radio-button value="last7">近7天</el-radio-button>
|
|
|
<el-radio-button value="custom">自定义</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
<el-date-picker
|
|
|
v-if="programDistDateType === 'custom'"
|
|
|
v-model="programDistDateRange"
|
|
|
type="daterange"
|
|
|
range-separator="至"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
size="small"
|
|
|
value-format="YYYY-MM-DD"
|
|
|
:disabled-date="(d: Date) => d > new Date()"
|
|
|
style="margin-left: 8px"
|
|
|
@change="loadProgramDistributionData"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<div ref="programDistChartRef" style="height: 260px"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<!-- 第3行 — 双排行 -->
|
|
|
<el-row :gutter="16" class="rank-row">
|
|
|
<el-col :span="12">
|
|
|
<el-card shadow="hover">
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
<span class="card-title">
|
|
|
机床产量排行 TOP
|
|
|
<el-select v-model="machineTopN" size="small" style="width: 72px" @change="loadMachineRankData">
|
|
|
<el-option :value="5" label="5" />
|
|
|
<el-option :value="10" label="10" />
|
|
|
<el-option :value="20" label="20" />
|
|
|
<el-option :value="50" label="50" />
|
|
|
<el-option :value="100" label="100" />
|
|
|
</el-select>
|
|
|
<el-tooltip content="单台机床加工零件数排列。" placement="top">
|
|
|
<span class="info-icon">ⓘ</span>
|
|
|
</el-tooltip>
|
|
|
</span>
|
|
|
<div class="date-filter">
|
|
|
<el-select v-model="machineSortOrder" size="small" style="width: 90px; margin-right: 8px" @change="loadMachineRankData">
|
|
|
<el-option value="desc" label="降序" />
|
|
|
<el-option value="asc" label="升序" />
|
|
|
</el-select>
|
|
|
<el-radio-group v-model="machineDateType" size="small" @change="onMachineDateChange">
|
|
|
<el-radio-button value="today">今日</el-radio-button>
|
|
|
<el-radio-button value="yesterday">昨日</el-radio-button>
|
|
|
<el-radio-button value="last3">近3天</el-radio-button>
|
|
|
<el-radio-button value="last7">近7天</el-radio-button>
|
|
|
<el-radio-button value="custom">自定义</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
<el-date-picker
|
|
|
v-if="machineDateType === 'custom'"
|
|
|
v-model="machineDateRange"
|
|
|
type="daterange"
|
|
|
range-separator="至"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
size="small"
|
|
|
value-format="YYYY-MM-DD"
|
|
|
:disabled-date="(d: Date) => d > new Date()"
|
|
|
style="margin-left: 8px"
|
|
|
@change="loadMachineRankData"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<el-table :data="machineRank" stripe size="small" style="width: 100%">
|
|
|
<el-table-column prop="rank" label="排名" width="60" align="center" />
|
|
|
<el-table-column label="机床名称" width="120">
|
|
|
<template #default="{ row }">
|
|
|
<router-link :to="isMock ? '/mock/machine/' + row.id : '/machine/' + row.id" class="machine-link">{{ row.machineName }}</router-link>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="program" label="当前程序" show-overflow-tooltip />
|
|
|
<el-table-column label="产量" width="80" align="center">
|
|
|
<template #default="{ row }">{{ formatNumber(row.quantity) }}</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="状态" width="70" align="center">
|
|
|
<template #default="{ row }">
|
|
|
<el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">{{ row.status === 1 ? '在线' : '离线' }}</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-card shadow="hover">
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
<span class="card-title">
|
|
|
NC程序产量排行 TOP
|
|
|
<el-select v-model="programRankTopN" size="small" style="width: 72px" @change="loadProgramRankData">
|
|
|
<el-option :value="5" label="5" />
|
|
|
<el-option :value="10" label="10" />
|
|
|
<el-option :value="20" label="20" />
|
|
|
<el-option :value="50" label="50" />
|
|
|
<el-option :value="100" label="100" />
|
|
|
</el-select>
|
|
|
<el-tooltip content="按NC程序名统计的产量排行。" placement="top">
|
|
|
<span class="info-icon">ⓘ</span>
|
|
|
</el-tooltip>
|
|
|
</span>
|
|
|
<div class="date-filter">
|
|
|
<el-radio-group v-model="programRankDateType" size="small" @change="onProgramRankDateChange">
|
|
|
<el-radio-button value="today">今日</el-radio-button>
|
|
|
<el-radio-button value="yesterday">昨日</el-radio-button>
|
|
|
<el-radio-button value="last3">近3天</el-radio-button>
|
|
|
<el-radio-button value="last7">近7天</el-radio-button>
|
|
|
<el-radio-button value="custom">自定义</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
<el-date-picker
|
|
|
v-if="programRankDateType === 'custom'"
|
|
|
v-model="programRankDateRange"
|
|
|
type="daterange"
|
|
|
range-separator="至"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
size="small"
|
|
|
value-format="YYYY-MM-DD"
|
|
|
:disabled-date="(d: Date) => d > new Date()"
|
|
|
style="margin-left: 8px"
|
|
|
@change="loadProgramRankData"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<el-table :data="programRank" stripe size="small" style="width: 100%">
|
|
|
<el-table-column prop="rank" label="排名" width="60" align="center" />
|
|
|
<el-table-column prop="programName" label="程序名" show-overflow-tooltip />
|
|
|
<el-table-column label="总产量" width="100" align="center">
|
|
|
<template #default="{ row }">{{ formatNumber(row.totalQuantity) }}</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="machineCount" label="涉及机床数" width="120" align="center" />
|
|
|
</el-table>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<!-- 第4行 — 双排行/图表 -->
|
|
|
<el-row :gutter="16" class="rank-row">
|
|
|
<el-col :span="12">
|
|
|
<el-card shadow="hover">
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
<span class="card-title">
|
|
|
工人产量排行 TOP
|
|
|
<el-select v-model="workerTopN" size="small" style="width: 72px" @change="loadWorkerRankData">
|
|
|
<el-option :value="5" label="5" />
|
|
|
<el-option :value="10" label="10" />
|
|
|
<el-option :value="20" label="20" />
|
|
|
<el-option :value="50" label="50" />
|
|
|
<el-option :value="100" label="100" />
|
|
|
</el-select>
|
|
|
<el-tooltip content="工人所绑定的所有机床产量合计。" placement="top">
|
|
|
<span class="info-icon">ⓘ</span>
|
|
|
</el-tooltip>
|
|
|
</span>
|
|
|
<div class="date-filter">
|
|
|
<el-select v-model="workerSortOrder" size="small" style="width: 90px; margin-right: 8px" @change="loadWorkerRankData">
|
|
|
<el-option value="desc" label="降序" />
|
|
|
<el-option value="asc" label="升序" />
|
|
|
</el-select>
|
|
|
<el-radio-group v-model="workerDateType" size="small" @change="onWorkerDateChange">
|
|
|
<el-radio-button value="today">今日</el-radio-button>
|
|
|
<el-radio-button value="yesterday">昨日</el-radio-button>
|
|
|
<el-radio-button value="last3">近3天</el-radio-button>
|
|
|
<el-radio-button value="last7">近7天</el-radio-button>
|
|
|
<el-radio-button value="custom">自定义</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
<el-date-picker
|
|
|
v-if="workerDateType === 'custom'"
|
|
|
v-model="workerDateRange"
|
|
|
type="daterange"
|
|
|
range-separator="至"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
size="small"
|
|
|
value-format="YYYY-MM-DD"
|
|
|
:disabled-date="(d: Date) => d > new Date()"
|
|
|
style="margin-left: 8px"
|
|
|
@change="loadWorkerRankData"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<el-table :data="workerRank" stripe size="small" style="width: 100%">
|
|
|
<el-table-column prop="rank" label="排名" width="60" align="center" />
|
|
|
<el-table-column prop="workerName" label="工人姓名" />
|
|
|
<el-table-column prop="machineCount" label="绑定机床" width="100" align="center" />
|
|
|
<el-table-column label="总产量" width="100" align="center">
|
|
|
<template #default="{ row }">{{ formatNumber(row.totalQuantity) }}</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-card shadow="hover">
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
<span class="card-title">
|
|
|
车间平均单机产量（{{ workshopDateLabel }}）
|
|
|
<el-tooltip placement="top">
|
|
|
<template #content>
|
|
|
<div style="max-width: 360px; line-height: 1.6">
|
|
|
<b>统计规则：</b>车间总产量 ÷ 车间机床数 ÷ 天数<br /><br />
|
|
|
<b>数据来源：</b>系统每日凌晨1:00自动执行日终汇总，将每台机床当天所有产量分段按程序名合并计算，生成日产量记录。多天范围取日均单机产量。<br /><br />
|
|
|
<b>产量计算：</b>以NC程序名标识零件，程序切换时自动结算上一段产量。同程序多次出现时分段记录、日汇总合并。含手工修正值。
|
|
|
</div>
|
|
|
</template>
|
|
|
<span class="info-icon">ⓘ</span>
|
|
|
</el-tooltip>
|
|
|
</span>
|
|
|
<div class="date-filter">
|
|
|
<el-radio-group v-model="workshopDateType" size="small" @change="onWorkshopDateChange">
|
|
|
<el-radio-button value="today">今日</el-radio-button>
|
|
|
<el-radio-button value="yesterday">昨日</el-radio-button>
|
|
|
<el-radio-button value="last3">近3天</el-radio-button>
|
|
|
<el-radio-button value="last7">近7天</el-radio-button>
|
|
|
<el-radio-button value="custom">自定义</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
<el-date-picker
|
|
|
v-if="workshopDateType === 'custom'"
|
|
|
v-model="workshopDateRange"
|
|
|
type="daterange"
|
|
|
range-separator="至"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
size="small"
|
|
|
value-format="YYYY-MM-DD"
|
|
|
:disabled-date="(d: Date) => d > new Date()"
|
|
|
style="margin-left: 8px"
|
|
|
@change="loadWorkshopData"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<div ref="workshopChartRef" style="height: 260px"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<!-- 车间产量表格 -->
|
|
|
<el-row :gutter="16" style="margin-top:16px">
|
|
|
<el-col :span="24">
|
|
|
<el-card shadow="hover">
|
|
|
<template #header><span class="card-title">车间产量明细</span></template>
|
|
|
<el-table :data="workshopData" stripe size="small">
|
|
|
<el-table-column prop="workshopName" label="车间" />
|
|
|
<el-table-column prop="quantity" label="总产量" align="center" />
|
|
|
<el-table-column prop="machineCount" label="机床数" align="center" />
|
|
|
<el-table-column label="平均单产({{ workshopUnitLabel }})" align="center">
|
|
|
<template #default="{ row }">{{ row.machineCount ? (row.quantity / row.machineCount).toFixed(2) : '-' }} {{ workshopUnit }}</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
|
|
|
import { ElMessage } from 'element-plus'
|
|
|
import request from '@/utils/request'
|
|
|
import { useMockMode } from '@/composables/useMockMode'
|
|
|
import echarts from '@/utils/echarts'
|
|
|
import type { ECharts } from 'echarts/core'
|
|
|
import type { ApiResponse, DashboardSummary, CollectorStatus, MachineRankRow, WorkerRankRow, DashboardTrendItem, WorkshopProduction } from '@/types'
|
|
|
|
|
|
// ==================== 本地类型定义（不修改 types/index.ts） ====================
|
|
|
|
|
|
/** NC程序产量排行项 */
|
|
|
interface ProgramRankItem {
|
|
|
rank: number
|
|
|
programName: string
|
|
|
totalQuantity: number
|
|
|
machineCount: number
|
|
|
}
|
|
|
|
|
|
/** NC程序产量分布项 */
|
|
|
interface ProgramDistributionItem {
|
|
|
programName: string
|
|
|
totalQuantity: number
|
|
|
percentage: number
|
|
|
}
|
|
|
|
|
|
// ==================== Mock 模式 ====================
|
|
|
|
|
|
const { isMock } = useMockMode()
|
|
|
|
|
|
// ==================== 日期类型 ====================
|
|
|
|
|
|
type DateType = 'today' | 'yesterday' | 'last3' | 'last7' | 'custom'
|
|
|
|
|
|
const dateLabels: Record<DateType, string> = {
|
|
|
today: '今日',
|
|
|
yesterday: '昨日',
|
|
|
last3: '近3天',
|
|
|
last7: '近7天',
|
|
|
custom: '自定义',
|
|
|
}
|
|
|
|
|
|
// 日期范围格式化工具函数
|
|
|
function getDateRange(type: DateType, customRange?: [string, string]): { startDate: string; endDate: string } {
|
|
|
const today = new Date()
|
|
|
const fmt = (d: Date) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
|
|
|
const endDate = fmt(today)
|
|
|
switch (type) {
|
|
|
case 'today': return { startDate: endDate, endDate }
|
|
|
case 'yesterday': { const y = new Date(today); y.setDate(y.getDate() - 1); const ys = fmt(y); return { startDate: ys, endDate: ys } }
|
|
|
case 'last3': { const d = new Date(today); d.setDate(d.getDate() - 2); return { startDate: fmt(d), endDate } }
|
|
|
case 'last7': { const d = new Date(today); d.setDate(d.getDate() - 6); return { startDate: fmt(d), endDate } }
|
|
|
case 'custom': return { startDate: customRange?.[0] || endDate, endDate: customRange?.[1] || endDate }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// ==================== 响应式数据 ====================
|
|
|
|
|
|
// 第1行 — 统计卡片
|
|
|
const summary = ref<DashboardSummary>({
|
|
|
onlineCount: 0,
|
|
|
totalMachines: 0,
|
|
|
todayProduction: 0,
|
|
|
activeAlerts: 0,
|
|
|
collectSuccessRate: 0,
|
|
|
runningMachines: 0,
|
|
|
dataMissingMachines: 0,
|
|
|
})
|
|
|
const collectorStatus = ref<CollectorStatus>({
|
|
|
status: 'stopped',
|
|
|
uptimeSeconds: 0,
|
|
|
serviceStatus: 'NotInstalled',
|
|
|
serviceName: '',
|
|
|
})
|
|
|
|
|
|
// 采集服务按钮状态
|
|
|
const startLoading = ref(false)
|
|
|
const stopLoading = ref(false)
|
|
|
const refreshLoading = ref(false)
|
|
|
|
|
|
// 图表数据
|
|
|
const trendData = ref<DashboardTrendItem[]>([])
|
|
|
const programDistribution = ref<ProgramDistributionItem[]>([])
|
|
|
|
|
|
// 排行数据
|
|
|
const machineRank = ref<MachineRankRow[]>([])
|
|
|
const programRank = ref<ProgramRankItem[]>([])
|
|
|
const workerRank = ref<WorkerRankRow[]>([])
|
|
|
const workshopData = ref<WorkshopProduction[]>([])
|
|
|
|
|
|
// ==================== 日期筛选状态 ====================
|
|
|
|
|
|
// 产量趋势（近7天）— 无日期筛选
|
|
|
|
|
|
// NC程序产量分布日期
|
|
|
const programDistDateType = ref<DateType>('today')
|
|
|
const programDistDateRange = ref<[string, string]>()
|
|
|
|
|
|
// 机床排行日期
|
|
|
const machineDateType = ref<DateType>('today')
|
|
|
const machineDateRange = ref<[string, string]>()
|
|
|
|
|
|
// NC程序排行日期
|
|
|
const programRankDateType = ref<DateType>('today')
|
|
|
const programRankDateRange = ref<[string, string]>()
|
|
|
|
|
|
// 工人排行日期
|
|
|
const workerDateType = ref<DateType>('today')
|
|
|
const workerDateRange = ref<[string, string]>()
|
|
|
|
|
|
// 车间平均单机产量日期
|
|
|
const workshopDateType = ref<DateType>('today')
|
|
|
const workshopDateRange = ref<[string, string]>()
|
|
|
|
|
|
// ==================== TOP N 和排序 ====================
|
|
|
|
|
|
const machineTopN = ref(10)
|
|
|
const machineSortOrder = ref<'asc' | 'desc'>('desc')
|
|
|
|
|
|
const programRankTopN = ref(10)
|
|
|
|
|
|
const workerTopN = ref(10)
|
|
|
const workerSortOrder = ref<'asc' | 'desc'>('desc')
|
|
|
|
|
|
// ==================== 计算属性 ====================
|
|
|
|
|
|
const workshopDateLabel = computed(() => dateLabels[workshopDateType.value])
|
|
|
|
|
|
const workshopDays = computed(() => {
|
|
|
const { startDate, endDate } = getDateRange(workshopDateType.value, workshopDateRange.value)
|
|
|
return Math.max(1, Math.round((new Date(endDate).getTime() - new Date(startDate).getTime()) / 86400000) + 1)
|
|
|
})
|
|
|
const workshopUnit = computed(() => workshopDays.value > 1 ? '件/台/天' : '件/台')
|
|
|
const workshopUnitLabel = computed(() => workshopDays.value > 1 ? '日均' : '平均')
|
|
|
|
|
|
// 采集服务状态标签
|
|
|
const collectorTagType = computed(() => {
|
|
|
const { status } = collectorStatus.value
|
|
|
if (status === 'running') return 'success'
|
|
|
if (status === 'paused') return 'info'
|
|
|
if (status === 'timeout') return 'warning'
|
|
|
if (status === 'stopped') return 'info'
|
|
|
if (status === 'not_installed') return 'danger'
|
|
|
return 'warning'
|
|
|
})
|
|
|
|
|
|
const collectorStatusText = computed(() => {
|
|
|
const { status } = collectorStatus.value
|
|
|
if (status === 'running') return '运行中'
|
|
|
if (status === 'paused') return '已暂停'
|
|
|
if (status === 'timeout') return '心跳超时'
|
|
|
if (status === 'stopped') return '已停止'
|
|
|
if (status === 'not_installed') return '未安装'
|
|
|
return status || '-'
|
|
|
})
|
|
|
|
|
|
// ==================== 工具函数 ====================
|
|
|
|
|
|
function formatUptime(seconds: number | undefined): string {
|
|
|
if (!seconds) return '-'
|
|
|
const days = Math.floor(seconds / 86400)
|
|
|
const hours = Math.floor((seconds % 86400) / 3600)
|
|
|
if (days > 0) return `${days}天${hours}时`
|
|
|
return `${hours}时`
|
|
|
}
|
|
|
|
|
|
function formatNumber(val: number | undefined | null): string {
|
|
|
if (val == null) return '-'
|
|
|
return Number(val).toFixed(2)
|
|
|
}
|
|
|
|
|
|
// ==================== 日期变更处理 ====================
|
|
|
|
|
|
function onWorkshopDateChange() {
|
|
|
workshopDateType.value !== 'custom' ? loadWorkshopData() : undefined
|
|
|
}
|
|
|
|
|
|
function onMachineDateChange() {
|
|
|
machineDateType.value !== 'custom' ? loadMachineRankData() : undefined
|
|
|
}
|
|
|
|
|
|
function onWorkerDateChange() {
|
|
|
workerDateType.value !== 'custom' ? loadWorkerRankData() : undefined
|
|
|
}
|
|
|
|
|
|
function onProgramDistDateChange() {
|
|
|
programDistDateType.value !== 'custom' ? loadProgramDistributionData() : undefined
|
|
|
}
|
|
|
|
|
|
function onProgramRankDateChange() {
|
|
|
programRankDateType.value !== 'custom' ? loadProgramRankData() : undefined
|
|
|
}
|
|
|
|
|
|
// ==================== 采集服务控制 ====================
|
|
|
|
|
|
async function startCollector() {
|
|
|
if (startLoading.value) return
|
|
|
startLoading.value = true
|
|
|
try {
|
|
|
if (collectorStatus.value.serviceStatus && collectorStatus.value.serviceStatus === 'Running') {
|
|
|
ElMessage.info('采集服务已在运行中')
|
|
|
return
|
|
|
}
|
|
|
if (collectorStatus.value.serviceStatus && collectorStatus.value.serviceStatus === 'NotInstalled') {
|
|
|
ElMessage.warning('采集服务未安装，请运行 install.ps1 安装脚本')
|
|
|
return
|
|
|
}
|
|
|
await request.post('/admin/collector/start')
|
|
|
ElMessage.success('采集服务已启动')
|
|
|
await loadData()
|
|
|
} catch {
|
|
|
/* request拦截器已显示错误 */
|
|
|
} finally {
|
|
|
startLoading.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function stopCollector() {
|
|
|
if (stopLoading.value) return
|
|
|
stopLoading.value = true
|
|
|
try {
|
|
|
await request.post('/admin/collector/stop')
|
|
|
ElMessage.success('采集服务已停止')
|
|
|
await loadData()
|
|
|
} catch {
|
|
|
/* request拦截器已显示错误 */
|
|
|
} finally {
|
|
|
stopLoading.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function refreshCollectorConfig() {
|
|
|
if (refreshLoading.value) return
|
|
|
refreshLoading.value = true
|
|
|
try {
|
|
|
await request.post('/admin/collector/refresh')
|
|
|
ElMessage.success('配置已刷新')
|
|
|
await loadData()
|
|
|
} catch {
|
|
|
/* request拦截器已显示错误 */
|
|
|
} finally {
|
|
|
refreshLoading.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// ==================== ECharts 实例 ====================
|
|
|
|
|
|
const trendChartRef = ref<HTMLElement>()
|
|
|
const programDistChartRef = ref<HTMLElement>()
|
|
|
const workshopChartRef = ref<HTMLElement>()
|
|
|
|
|
|
let trendChart: ECharts | null = null
|
|
|
let programDistChart: ECharts | null = null
|
|
|
let workshopChart: ECharts | null = null
|
|
|
|
|
|
// ==================== 图表初始化 ====================
|
|
|
|
|
|
function initTrendChart() {
|
|
|
if (trendChartRef.value && trendData.value.length) {
|
|
|
trendChart = echarts.init(trendChartRef.value)
|
|
|
trendChart.setOption({
|
|
|
tooltip: { trigger: 'axis' },
|
|
|
grid: { left: 50, right: 20, top: 20, bottom: 30 },
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: trendData.value.map(i => i.date.slice(5)),
|
|
|
axisLabel: { fontSize: 12 },
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
axisLabel: { fontSize: 12 },
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
type: 'line',
|
|
|
data: trendData.value.map(i => i.quantity),
|
|
|
smooth: true,
|
|
|
areaStyle: { opacity: 0.15 },
|
|
|
itemStyle: { color: '#409EFF' },
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function initProgramDistChart() {
|
|
|
if (programDistChartRef.value && programDistribution.value.length) {
|
|
|
programDistChart = echarts.init(programDistChartRef.value)
|
|
|
programDistChart.setOption({
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: (params: { name: string; value: number; percent: number }) =>
|
|
|
`${params.name}: ${params.value}件 (${params.percent}%)`,
|
|
|
},
|
|
|
legend: {
|
|
|
type: 'scroll',
|
|
|
bottom: 0,
|
|
|
itemWidth: 12,
|
|
|
itemHeight: 12,
|
|
|
textStyle: { fontSize: 12 },
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
type: 'pie',
|
|
|
radius: ['40%', '65%'],
|
|
|
center: ['50%', '45%'],
|
|
|
label: {
|
|
|
show: true,
|
|
|
formatter: '{b}: {c}件 ({d}%)',
|
|
|
fontSize: 12,
|
|
|
},
|
|
|
data: programDistribution.value.map(item => ({
|
|
|
value: item.totalQuantity,
|
|
|
name: item.programName,
|
|
|
})),
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function initWorkshopChart() {
|
|
|
if (workshopChartRef.value && workshopData.value.length) {
|
|
|
const unit = workshopUnit.value
|
|
|
const unitLabel = workshopUnitLabel.value
|
|
|
workshopChart = echarts.init(workshopChartRef.value)
|
|
|
workshopChart.setOption({
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
formatter: (params: { name: string; value: number; dataIndex: number }[]) => {
|
|
|
const d = workshopData.value[params[0].dataIndex]
|
|
|
return `${d.workshopName}<br/>${unitLabel}产量: ${Number(params[0].value).toFixed(2)} ${unit}<br/>总产量: ${d.quantity} 件<br/>机床数: ${d.machineCount} 台`
|
|
|
},
|
|
|
},
|
|
|
grid: { left: 60, right: 20, top: 20, bottom: 30 },
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: workshopData.value.map(i => i.workshopName),
|
|
|
axisLabel: { fontSize: 12 },
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
name: unit,
|
|
|
axisLabel: { fontSize: 12 },
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
type: 'bar',
|
|
|
data: workshopData.value.map(i => i.avgQuantity),
|
|
|
itemStyle: { color: '#67C23A', borderRadius: [4, 4, 0, 0] },
|
|
|
barWidth: '40%',
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'top',
|
|
|
formatter: (p: { value: number }) => `${Number(p.value).toFixed(2)} ${unit}`,
|
|
|
fontSize: 12,
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function initCharts() {
|
|
|
initTrendChart()
|
|
|
initProgramDistChart()
|
|
|
// workshopChart 在 loadWorkshopData 中初始化
|
|
|
}
|
|
|
|
|
|
function disposeCharts() {
|
|
|
trendChart?.dispose()
|
|
|
programDistChart?.dispose()
|
|
|
workshopChart?.dispose()
|
|
|
trendChart = null
|
|
|
programDistChart = null
|
|
|
workshopChart = null
|
|
|
}
|
|
|
|
|
|
// ==================== 数据加载 ====================
|
|
|
|
|
|
async function loadProgramDistributionData() {
|
|
|
try {
|
|
|
const { startDate, endDate } = getDateRange(programDistDateType.value, programDistDateRange.value)
|
|
|
const res = await request.get<{ items: ProgramDistributionItem[] }>(
|
|
|
'/admin/dashboard/program-distribution',
|
|
|
{ params: { startDate, endDate } }
|
|
|
)
|
|
|
programDistribution.value = res.data?.items || []
|
|
|
programDistChart?.dispose()
|
|
|
programDistChart = null
|
|
|
await nextTick()
|
|
|
initProgramDistChart()
|
|
|
} catch {
|
|
|
/* 容错 */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function loadProgramRankData() {
|
|
|
try {
|
|
|
const { startDate, endDate } = getDateRange(programRankDateType.value, programRankDateRange.value)
|
|
|
const res: ApiResponse<{ items: ProgramRankItem[] }> = await request.get(
|
|
|
'/admin/dashboard/program-rank',
|
|
|
{ params: { startDate, endDate, top: programRankTopN.value } }
|
|
|
)
|
|
|
programRank.value = res.data?.items || []
|
|
|
} catch {
|
|
|
/* 容错 */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function loadMachineRankData() {
|
|
|
try {
|
|
|
const { startDate, endDate } = getDateRange(machineDateType.value, machineDateRange.value)
|
|
|
const res: ApiResponse<{ items: MachineRankRow[] }> = await request.get(
|
|
|
'/admin/dashboard/machine-rank',
|
|
|
{ params: { startDate, endDate, top: machineTopN.value, sortOrder: machineSortOrder.value } }
|
|
|
)
|
|
|
machineRank.value = res.data?.items || []
|
|
|
} catch {
|
|
|
/* 容错 */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function loadWorkerRankData() {
|
|
|
try {
|
|
|
const { startDate, endDate } = getDateRange(workerDateType.value, workerDateRange.value)
|
|
|
const res: ApiResponse<{ items: WorkerRankRow[] }> = await request.get(
|
|
|
'/admin/dashboard/worker-rank',
|
|
|
{ params: { startDate, endDate, top: workerTopN.value, sortOrder: workerSortOrder.value } }
|
|
|
)
|
|
|
workerRank.value = res.data?.items || []
|
|
|
} catch {
|
|
|
/* 容错 */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function loadWorkshopData() {
|
|
|
try {
|
|
|
const { startDate, endDate } = getDateRange(workshopDateType.value, workshopDateRange.value)
|
|
|
const res = await request.get<{ items: WorkshopProduction[] }>(
|
|
|
'/admin/dashboard/workshop-production',
|
|
|
{ params: { startDate, endDate } }
|
|
|
)
|
|
|
workshopData.value = res.data?.items || []
|
|
|
workshopChart?.dispose()
|
|
|
workshopChart = null
|
|
|
await nextTick()
|
|
|
initWorkshopChart()
|
|
|
} catch {
|
|
|
/* 容错 */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function loadData() {
|
|
|
try {
|
|
|
// 并行加载：统计摘要 + 采集状态 + 产量趋势
|
|
|
const [summaryRes, trendRes] = await Promise.all([
|
|
|
request.get<DashboardSummary>('/admin/dashboard/summary'),
|
|
|
request.get<{ items: DashboardTrendItem[] }>('/admin/dashboard/trend'),
|
|
|
])
|
|
|
summary.value = summaryRes.data || summary.value
|
|
|
trendData.value = trendRes.data?.items || []
|
|
|
|
|
|
// 重置图表
|
|
|
disposeCharts()
|
|
|
await nextTick()
|
|
|
initCharts()
|
|
|
|
|
|
// 并行加载各区域独立数据
|
|
|
await Promise.all([
|
|
|
loadProgramDistributionData(),
|
|
|
loadWorkshopData(),
|
|
|
loadMachineRankData(),
|
|
|
loadWorkerRankData(),
|
|
|
loadProgramRankData(),
|
|
|
])
|
|
|
} catch {
|
|
|
// 保持容错
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// ==================== 生命周期 ====================
|
|
|
|
|
|
onMounted(() => {
|
|
|
loadData()
|
|
|
})
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
disposeCharts()
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.dashboard-page {
|
|
|
.stat-row {
|
|
|
margin-bottom: 16px;
|
|
|
|
|
|
.el-card {
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.stat-card {
|
|
|
text-align: center;
|
|
|
padding: 10px 0;
|
|
|
|
|
|
.stat-label {
|
|
|
font-size: 14px;
|
|
|
color: #909399;
|
|
|
margin-bottom: 8px;
|
|
|
|
|
|
.info-icon {
|
|
|
margin-left: 2px;
|
|
|
font-size: 13px;
|
|
|
color: #c0c4cc;
|
|
|
cursor: help;
|
|
|
vertical-align: middle;
|
|
|
|
|
|
&:hover {
|
|
|
color: #409eff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.stat-value {
|
|
|
font-size: 28px;
|
|
|
font-weight: bold;
|
|
|
color: #303133;
|
|
|
|
|
|
.stat-unit {
|
|
|
font-size: 14px;
|
|
|
font-weight: normal;
|
|
|
color: #909399;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.stat-sub {
|
|
|
font-size: 12px;
|
|
|
color: #909399;
|
|
|
margin-top: 4px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.collector-actions {
|
|
|
margin-top: 12px;
|
|
|
display: flex;
|
|
|
gap: 8px;
|
|
|
justify-content: flex-start;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.chart-row,
|
|
|
.rank-row {
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
|
|
|
.card-title {
|
|
|
font-size: 15px;
|
|
|
font-weight: 500;
|
|
|
|
|
|
.info-icon {
|
|
|
margin-left: 4px;
|
|
|
font-size: 14px;
|
|
|
color: #b0b5bd;
|
|
|
cursor: help;
|
|
|
|
|
|
&:hover {
|
|
|
color: #409eff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.card-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 8px;
|
|
|
|
|
|
.card-sub {
|
|
|
font-size: 12px;
|
|
|
color: #909399;
|
|
|
}
|
|
|
|
|
|
.date-filter {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.machine-link {
|
|
|
color: var(--el-color-primary);
|
|
|
cursor: pointer;
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
}
|
|
|
</style>
|