You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
3.4 KiB
Vue
78 lines
3.4 KiB
Vue
<template>
|
|
<div class="screen-page">
|
|
<!-- 顶部栏 -->
|
|
<header class="screen-header">
|
|
<div class="header-left">CNC机床数据采集系统</div>
|
|
<div class="header-right">
|
|
<el-select v-model="filterWorkshop" placeholder="车间" size="small" style="width:120px;margin-right:8px" @change="refreshAll">
|
|
<el-option label="全部" value="" />
|
|
<el-option v-for="w in workshopOptions" :key="w" :label="w" :value="w" />
|
|
</el-select>
|
|
<el-select v-model="filterBrand" placeholder="品牌" size="small" style="width:120px;margin-right:16px" @change="refreshAll">
|
|
<el-option label="全部" value="" />
|
|
<el-option v-for="b in brandOptions" :key="b" :label="b" :value="b" />
|
|
</el-select>
|
|
<span class="header-time">{{ currentTime }}</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 第一行：统计数字卡片 -->
|
|
<div class="stat-row">
|
|
<div class="stat-card" v-for="s in statCards" :key="s.key">
|
|
<div class="stat-label">{{ s.label }}</div>
|
|
<div class="stat-value" :style="{ color: s.color }">{{ s.value }}</div>
|
|
<div class="stat-sub" v-if="s.sub">{{ s.sub }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第二行：图表区 -->
|
|
<div class="chart-row">
|
|
<div class="chart-card">
|
|
<div class="chart-title">各车间产量</div>
|
|
<div ref="barChartRef" class="chart-container"></div>
|
|
</div>
|
|
<div class="chart-card">
|
|
<div class="chart-title">产量趋势(7天)</div>
|
|
<div ref="lineChartRef" class="chart-container"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第三行：排行+状态 -->
|
|
<div class="bottom-row">
|
|
<div class="rank-card">
|
|
<div class="chart-title">机床产量排行</div>
|
|
<div class="rank-list">
|
|
<div v-if="machineRank.length === 0" class="no-data">暂无数据</div>
|
|
<div v-for="item in machineRank" :key="item.rank" class="rank-item">
|
|
<span class="rank-num" :class="{ 'rank-top': item.rank <= 3 }">{{ item.rank }}</span>
|
|
<span class="rank-name">{{ item.machineName }}</span>
|
|
<span class="rank-value">{{ item.quantity }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rank-card">
|
|
<div class="chart-title">工人产量排行</div>
|
|
<div class="rank-list">
|
|
<div v-if="workerRank.length === 0" class="no-data">暂无数据</div>
|
|
<div v-for="item in workerRank" :key="item.rank" class="rank-item">
|
|
<span class="rank-num" :class="{ 'rank-top': item.rank <= 3 }">{{ item.rank }}</span>
|
|
<span class="rank-name">{{ item.workerName }}</span>
|
|
<span class="rank-value">{{ item.quantity }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="status-card">
|
|
<div class="chart-title">机床状态总览</div>
|
|
<div class="status-grid">
|
|
<div v-if="machineStatus.length === 0" class="no-data">暂无机床</div>
|
|
<div v-for="m in machineStatus" :key="m.machineId" class="status-block" :class="m.isOnline ? 'online' : 'offline'" :title="m.machineName"></div>
|
|
</div>
|
|
<div class="status-legend">
|
|
<span class="legend-item"><span class="legend-block online"></span> 在线</span>
|
|
<span class="legend-item"><span class="legend-block offline"></span> 离线</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|