DeXun/screen
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 修改大屏样式布局

Browse Source
This commit is contained in:
zuqijia
2026-05-19 17:56:44 +08:00
parent 5663be1f6b
commit 4434480f32
31 changed files with 2162 additions and 5716 deletions
Download Patch File Download Diff File Expand all files Collapse all files

324
src/modules/dashboardBig/views/oee.vue
View File

@@ -6,39 +6,42 @@
<div class="header-right">
<span class="current-shift">当前班组：{{ currentShift }}</span>
<span class="time">{{ currentTime }}</span>
<button v-if="isFullscreen" class="exit-fullscreen-btn" @click="exitFullscreen" title="退出全屏">
<span>⛶ 退出全屏</span>
</button>
</div>
</header>
<main class="screen-body">
<div class="kpi-grid">
<div class="kpi-card">
<div class="kpi-title">OEE</div>
<div class="kpi-value oee">{{ oeeData.oee.toFixed(1) }}%</div>
<div class="kpi-trend" :class="oeeData.oeeTrend">
<div class="card-header">OEE</div>
<div class="kpi-value">{{ oeeData.oee.toFixed(1) }}%</div>
<div class="kpi-trend" :class="getTrendClass(oeeData.oeeTrend)">
<span>{{ oeeData.oeeTrend > 0 ? '↑' : '↓' }}</span>
{{ Math.abs(oeeData.oeeTrend).toFixed(1) }}%
</div>
</div>
<div class="kpi-card">
<div class="kpi-title">时间稼动率</div>
<div class="kpi-value availability">{{ oeeData.availability.toFixed(1) }}%</div>
<div class="kpi-trend" :class="oeeData.availabilityTrend">
<div class="card-header">时间稼动率</div>
<div class="kpi-value">{{ oeeData.availability.toFixed(1) }}%</div>
<div class="kpi-trend" :class="getTrendClass(oeeData.availabilityTrend)">
<span>{{ oeeData.availabilityTrend > 0 ? '↑' : '↓' }}</span>
{{ Math.abs(oeeData.availabilityTrend).toFixed(1) }}%
</div>
</div>
<div class="kpi-card">
<div class="kpi-title">性能稼动率</div>
<div class="kpi-value performance">{{ oeeData.performance.toFixed(1) }}%</div>
<div class="kpi-trend" :class="oeeData.performanceTrend">
<div class="card-header">性能稼动率</div>
<div class="kpi-value">{{ oeeData.performance.toFixed(1) }}%</div>
<div class="kpi-trend" :class="getTrendClass(oeeData.performanceTrend)">
<span>{{ oeeData.performanceTrend > 0 ? '↑' : '↓' }}</span>
{{ Math.abs(oeeData.performanceTrend).toFixed(1) }}%
</div>
</div>
<div class="kpi-card">
<div class="kpi-title">良品率</div>
<div class="kpi-value quality">{{ oeeData.quality.toFixed(1) }}%</div>
<div class="kpi-trend" :class="oeeData.qualityTrend">
<div class="card-header">良品率</div>
<div class="kpi-value">{{ oeeData.quality.toFixed(1) }}%</div>
<div class="kpi-trend" :class="getTrendClass(oeeData.qualityTrend)">
<span>{{ oeeData.qualityTrend > 0 ? '↑' : '↓' }}</span>
{{ Math.abs(oeeData.qualityTrend).toFixed(1) }}%
</div>
@@ -47,22 +50,22 @@
<div class="chart-row">
<div class="chart-box flex-2">
<div class="box-title">OEE趋势分析</div>
<div class="box-header">OEE趋势分析</div>
<div ref="trendChartRef" class="chart"></div>
</div>
<div class="chart-box flex-1">
<div class="box-title">7大损失分布</div>
<div class="box-header">7大损失分布</div>
<div ref="lossChartRef" class="chart"></div>
</div>
</div>
<div class="chart-row">
<div class="chart-box flex-1">
<div class="box-title">设备状态监控</div>
<div class="box-header">设备状态监控</div>
<div ref="statusChartRef" class="chart"></div>
</div>
<div class="chart-box flex-2">
<div class="box-title">停机事件明细</div>
<div class="box-header">停机事件明细</div>
<div class="event-table">
<el-table :data="stoppageList" border size="small" max-height="280">
<el-table-column prop="startDate" label="停机时间" width="160" />
@@ -87,6 +90,7 @@ import { getOeeDailySummary, getOeeLossSummary, getOeeStoppageEvents } from '@/a
const currentTime = ref('')
const currentShift = ref('甲班')
const isFullscreen = ref(false)
const trendChartRef = ref(null)
const lossChartRef = ref(null)
const statusChartRef = ref(null)
@@ -96,6 +100,7 @@ let statusChart = null
let timeInterval = null
let dataInterval = null
let resizeObserver = null
let fullscreenChangeHandler = null
const oeeData = ref({
oee: 0,
@@ -112,6 +117,12 @@ const summaryList = ref([])
const lossList = ref([])
const stoppageList = ref([])
const getTrendClass = (value) => {
if (value > 0) return 'positive'
if (value < 0) return 'negative'
return 'zero'
}
const updateTime = () => {
currentTime.value = new Date().toLocaleString('zh-CN', {
year: 'numeric',
@@ -221,28 +232,33 @@ const updateTrendChart = () => {
const qualValues = summaryList.value.map(item => item.quality)
trendChart.setOption({
backgroundColor: '#ffffff',
backgroundColor: 'transparent',
grid: { top: 40, right: 20, bottom: 30, left: 50 },
tooltip: { trigger: 'axis' },
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(10, 20, 40, 0.9)',
borderColor: '#1e3a5f',
textStyle: { color: '#fff' }
},
legend: {
data: ['OEE', '时间稼动率', '性能稼动率', '良品率'],
bottom: 0,
textStyle: { color: '#666' }
textStyle: { color: '#a0c4e8' }
},
xAxis: {
type: 'category',
data: dates,
axisLine: { lineStyle: { color: '#ddd' } },
axisLine: { lineStyle: { color: '#3a5a8a' } },
axisTick: { show: false },
axisLabel: { color: '#666' }
axisLabel: { color: '#a0c4e8' }
},
yAxis: {
type: 'value',
min: 70,
max: 100,
axisLine: { show: false },
splitLine: { lineStyle: { color: '#eee' } },
axisLabel: { color: '#666' }
splitLine: { lineStyle: { color: '#1e3a5f', type: 'dashed' } },
axisLabel: { color: '#a0c4e8' }
},
series: [
{
@@ -250,34 +266,40 @@ const updateTrendChart = () => {
type: 'line',
smooth: true,
data: oeeValues,
lineStyle: { color: '#4a90d9', width: 3 },
itemStyle: { color: '#4a90d9' },
lineStyle: { color: '#00d4ff', width: 3 },
itemStyle: { color: '#00d4ff' },
symbol: 'circle',
symbolSize: 8
symbolSize: 8,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(0, 212, 255, 0.3)' },
{ offset: 1, color: 'rgba(0, 212, 255, 0.05)' }
])
}
},
{
name: '时间稼动率',
type: 'line',
smooth: true,
data: avalValues,
lineStyle: { color: '#52c41a', width: 2 },
itemStyle: { color: '#52c41a' }
lineStyle: { color: '#00ff88', width: 2 },
itemStyle: { color: '#00ff88' }
},
{
name: '性能稼动率',
type: 'line',
smooth: true,
data: perfValues,
lineStyle: { color: '#5cd9e8', width: 2 },
itemStyle: { color: '#5cd9e8' }
lineStyle: { color: '#7c63ff', width: 2 },
itemStyle: { color: '#7c63ff' }
},
{
name: '良品率',
type: 'line',
smooth: true,
data: qualValues,
lineStyle: { color: '#ff9800', width: 2 },
itemStyle: { color: '#ff9800' }
lineStyle: { color: '#ff9f43', width: 2 },
itemStyle: { color: '#ff9f43' }
}
]
})
@@ -287,9 +309,15 @@ const updateLossChart = () => {
if (!lossChart) return
lossChart.setOption({
backgroundColor: '#ffffff',
tooltip: { trigger: 'item', formatter: '{b}: {c}分钟 ({d}%)' },
legend: { bottom: 0, textStyle: { color: '#666' } },
backgroundColor: 'transparent',
tooltip: {
trigger: 'item',
formatter: '{b}: {c}分钟 ({d}%)',
backgroundColor: 'rgba(10, 20, 40, 0.9)',
borderColor: '#1e3a5f',
textStyle: { color: '#fff' }
},
legend: { bottom: 0, textStyle: { color: '#a0c4e8' } },
series: [{
type: 'pie',
radius: ['40%', '70%'],
@@ -298,10 +326,17 @@ const updateLossChart = () => {
value: item.lossTimeMin || 0,
name: item.lossCategoryName || '损失' + (index + 1),
itemStyle: {
color: ['#4a90d9', '#5cd9e8', '#52c41a', '#ff9800', '#ff5722', '#9c27b0', '#673ab7'][index]
color: ['#ff6b6b', '#ffa94d', '#ffd43b', '#69db7c', '#74c0fc', '#b197fc', '#ff8fab'][index]
}
})),
label: { show: false }
label: { show: false },
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
})
}
@@ -310,20 +345,32 @@ const updateStatusChart = () => {
if (!statusChart) return
statusChart.setOption({
backgroundColor: '#ffffff',
tooltip: { trigger: 'item' },
legend: { bottom: 0, textStyle: { color: '#666' } },
backgroundColor: 'transparent',
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(10, 20, 40, 0.9)',
borderColor: '#1e3a5f',
textStyle: { color: '#fff' }
},
legend: { bottom: 0, textStyle: { color: '#a0c4e8' } },
series: [{
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '45%'],
data: [
{ value: 65, name: '运行中', itemStyle: { color: '#52c41a' } },
{ value: 15, name: '待机', itemStyle: { color: '#ff9800' } },
{ value: 12, name: '故障', itemStyle: { color: '#f56c6c' } },
{ value: 8, name: '维护', itemStyle: { color: '#5cd9e8' } }
{ value: 65, name: '运行中', itemStyle: { color: '#00ff88' } },
{ value: 15, name: '待机', itemStyle: { color: '#ffd43b' } },
{ value: 12, name: '故障', itemStyle: { color: '#ff6b6b' } },
{ value: 8, name: '维护', itemStyle: { color: '#74c0fc' } }
],
label: { show: false }
label: { show: false },
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
})
}
@@ -366,8 +413,27 @@ onMounted(() => {
dataInterval = setInterval(loadData, 30000)
})
window.addEventListener('refresh-data', handleRefresh)
fullscreenChangeHandler = () => {
isFullscreen.value = !!document.fullscreenElement
}
document.addEventListener('fullscreenchange', fullscreenChangeHandler)
})
const handleRefresh = () => {
loadData()
}
const exitFullscreen = () => {
if (document.fullscreenElement) {
document.exitFullscreen().catch(err => {
console.error('退出全屏失败:', err)
})
}
}
onBeforeUnmount(() => {
if (timeInterval) {
clearInterval(timeInterval)
@@ -378,10 +444,15 @@ onBeforeUnmount(() => {
dataInterval = null
}
window.removeEventListener('resize', handleResize)
window.removeEventListener('refresh-data', handleRefresh)
if (resizeObserver) {
resizeObserver.disconnect()
resizeObserver = null
}
if (fullscreenChangeHandler) {
document.removeEventListener('fullscreenchange', fullscreenChangeHandler)
fullscreenChangeHandler = null
}
if (trendChart) {
trendChart.dispose()
trendChart = null
@@ -405,18 +476,16 @@ onUnmounted(() => {
.screen-wrapper {
width: 100%;
min-height: 100%;
background: #f5f5f5;
background: linear-gradient(180deg, #0a1428 0%, #0d1b34 50%, #0a1428 100%);
overflow-y: auto;
overflow-x: hidden;
}
.screen-content {
background: #ffffff;
color: #333333;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
background: transparent;
color: #ffffff;
width: 100%;
padding-bottom: 20px;
padding: 20px;
}
.screen-header {
@@ -424,88 +493,117 @@ onUnmounted(() => {
justify-content: space-between;
align-items: center;
padding: 20px 30px;
border-bottom: 1px solid #eee;
background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, rgba(12, 30, 60, 0.8) 100%);
border-radius: 8px;
margin-bottom: 20px;
border: 1px solid rgba(0, 212, 255, 0.2);
.title {
font-size: 24px;
font-size: 26px;
font-weight: bold;
color: #333333;
letter-spacing: 2px;
color: #00d4ff;
letter-spacing: 3px;
margin: 0;
text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}
.header-right {
display: flex;
gap: 20px;
gap: 25px;
align-items: center;
.current-shift {
font-size: 14px;
color: #4a90d9;
font-size: 16px;
color: #a0c4e8;
font-weight: 600;
}
.time {
font-size: 16px;
color: #666666;
font-size: 18px;
color: #00d4ff;
font-family: 'Courier New', monospace;
font-weight: bold;
}
.exit-fullscreen-btn {
padding: 8px 16px;
border: 1px solid rgba(255, 107, 107, 0.5);
border-radius: 6px;
background: rgba(255, 107, 107, 0.2);
color: #ff6b6b;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background: rgba(255, 107, 107, 0.3);
border-color: #ff6b6b;
box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
}
}
}
}
.screen-body {
padding: 15px;
padding: 0;
}
.kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 16px;
margin-bottom: 20px;
.kpi-card {
background: #fafafa;
border: 1px solid #e0e0e0;
background: linear-gradient(180deg, rgba(14, 40, 80, 0.9) 0%, rgba(10, 20, 40, 0.95) 100%);
border: 1px solid rgba(0, 212, 255, 0.2);
border-radius: 8px;
padding: 20px;
padding: 0;
text-align: center;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
.kpi-title {
.card-header {
background: linear-gradient(90deg, #00a8cc 0%, #00d4ff 50%, #00a8cc 100%);
padding: 10px 15px;
font-size: 14px;
color: #666666;
margin-bottom: 10px;
font-weight: bold;
color: #0a1428;
letter-spacing: 2px;
}
.kpi-value {
font-size: 32px;
font-size: 40px;
font-weight: bold;
margin-bottom: 8px;
&.oee { color: #4a90d9; }
&.availability { color: #52c41a; }
&.performance { color: #5cd9e8; }
&.quality { color: #ff9800; }
color: #00d4ff;
margin: 15px 0;
text-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
}
.kpi-trend {
font-size: 12px;
padding: 2px 8px;
border-radius: 10px;
font-size: 14px;
padding: 4px 12px;
border-radius: 15px;
display: inline-block;
margin-bottom: 15px;
font-weight: 600;
&.positive {
background: #f0f9eb;
color: #52c41a;
background: rgba(0, 255, 136, 0.15);
color: #00ff88;
border: 1px solid rgba(0, 255, 136, 0.3);
}
&.negative {
background: #fef0f0;
color: #f56c6c;
background: rgba(255, 107, 107, 0.15);
color: #ff6b6b;
border: 1px solid rgba(255, 107, 107, 0.3);
}
&.zero {
background: #fafafa;
color: #999999;
background: rgba(160, 196, 232, 0.15);
color: #a0c4e8;
border: 1px solid rgba(160, 196, 232, 0.3);
}
}
}
@@ -517,12 +615,14 @@ onUnmounted(() => {
margin-bottom: 16px;
.chart-box {
background: #fafafa;
border: 1px solid #e0e0e0;
background: linear-gradient(180deg, rgba(14, 40, 80, 0.85) 0%, rgba(10, 20, 40, 0.9) 100%);
border: 1px solid rgba(0, 212, 255, 0.15);
border-radius: 8px;
padding: 15px;
padding: 0;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
&.flex-1 {
flex: 1;
@@ -532,22 +632,60 @@ onUnmounted(() => {
flex: 2;
}
.box-title {
.box-header {
background: linear-gradient(90deg, rgba(0, 168, 204, 0.8) 0%, rgba(0, 212, 255, 0.6) 100%);
padding: 12px 18px;
font-size: 14px;
font-weight: 600;
color: #333333;
margin-bottom: 12px;
padding-left: 10px;
border-left: 3px solid #4a90d9;
font-weight: bold;
color: #0a1428;
letter-spacing: 2px;
border-bottom: 1px solid rgba(0, 212, 255, 0.3);
}
.chart {
height: 300px;
width: 100%;
padding: 15px;
}
.event-table {
flex: 1;
padding: 15px;
}
}
}
:deep(.el-table) {
background: rgba(10, 20, 40, 0.8);
border: 1px solid rgba(0, 212, 255, 0.2);
.el-table__header-wrapper {
.el-table__header {
th {
background: rgba(0, 212, 255, 0.15);
color: #00d4ff;
font-weight: bold;
border-bottom: 1px solid rgba(0, 212, 255, 0.3);
}
}
}
.el-table__body-wrapper {
.el-table__body {
tr {
td {
color: #a0c4e8;
border-bottom: 1px solid rgba(0, 212, 255, 0.1);
}
&:nth-child(even) {
background: rgba(0, 212, 255, 0.05);
}
&:hover {
background: rgba(0, 212, 255, 0.1);
}
}
}
}
}