713 lines
19 KiB
Vue
713 lines
19 KiB
Vue
<template>
|
||
<div class="screen-wrapper">
|
||
<div class="screen-content">
|
||
<header class="screen-header">
|
||
<h1 class="title">OEE综合监控大屏</h1>
|
||
<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="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="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="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="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>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chart-row">
|
||
<div class="chart-box flex-2">
|
||
<div class="box-header">OEE趋势分析</div>
|
||
<div ref="trendChartRef" class="chart"></div>
|
||
</div>
|
||
<div class="chart-box flex-1">
|
||
<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-header">设备状态监控</div>
|
||
<div ref="statusChartRef" class="chart"></div>
|
||
</div>
|
||
<div class="chart-box flex-2">
|
||
<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" />
|
||
<el-table-column prop="duration" label="时长(分钟)" width="100" align="center" />
|
||
<el-table-column prop="stopType" label="停机类型" width="120" />
|
||
<el-table-column prop="unit" label="设备单元" width="100" />
|
||
<el-table-column prop="shift" label="班组" width="80" />
|
||
<el-table-column prop="remark" label="原因说明" />
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, onBeforeUnmount, onUnmounted, nextTick } from 'vue'
|
||
import * as echarts from 'echarts'
|
||
import { getOeeDailySummary, getOeeLossSummary, getOeeStoppageEvents } from '@/api/acidOee'
|
||
|
||
const currentTime = ref('')
|
||
const currentShift = ref('甲班')
|
||
const isFullscreen = ref(false)
|
||
const trendChartRef = ref(null)
|
||
const lossChartRef = ref(null)
|
||
const statusChartRef = ref(null)
|
||
let trendChart = null
|
||
let lossChart = null
|
||
let statusChart = null
|
||
let timeInterval = null
|
||
let dataInterval = null
|
||
let resizeObserver = null
|
||
let fullscreenChangeHandler = null
|
||
|
||
const oeeData = ref({
|
||
oee: 0,
|
||
availability: 0,
|
||
performance: 0,
|
||
quality: 0,
|
||
oeeTrend: 0,
|
||
availabilityTrend: 0,
|
||
performanceTrend: 0,
|
||
qualityTrend: 0
|
||
})
|
||
|
||
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',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
second: '2-digit'
|
||
})
|
||
}
|
||
|
||
const loadData = async () => {
|
||
try {
|
||
const today = new Date().toISOString().split('T')[0]
|
||
const monthStart = today.substring(0, 7) + '-01'
|
||
|
||
const [summaryRes, lossRes, eventsRes] = await Promise.all([
|
||
getOeeDailySummary({ startDate: monthStart, endDate: today }),
|
||
getOeeLossSummary({ topN: 7 }),
|
||
getOeeStoppageEvents({ pageSize: 10 })
|
||
])
|
||
|
||
if (summaryRes && summaryRes.length > 0) {
|
||
summaryList.value = summaryRes
|
||
const latest = summaryRes[0]
|
||
const previous = summaryRes[1] || latest
|
||
|
||
oeeData.value = {
|
||
oee: latest.oee || 0,
|
||
availability: latest.availability || 0,
|
||
performance: latest.performanceTon || 0,
|
||
quality: latest.quality || 0,
|
||
oeeTrend: (latest.oee || 0) - (previous.oee || 0),
|
||
availabilityTrend: (latest.availability || 0) - (previous.availability || 0),
|
||
performanceTrend: (latest.performanceTon || 0) - (previous.performanceTon || 0),
|
||
qualityTrend: (latest.quality || 0) - (previous.quality || 0)
|
||
}
|
||
}
|
||
|
||
if (lossRes) {
|
||
lossList.value = lossRes
|
||
}
|
||
|
||
if (eventsRes) {
|
||
stoppageList.value = eventsRes
|
||
}
|
||
|
||
updateCharts()
|
||
} catch (error) {
|
||
console.error('加载OEE数据失败:', error)
|
||
loadMockData()
|
||
}
|
||
}
|
||
|
||
const loadMockData = () => {
|
||
summaryList.value = [
|
||
{ statDate: '05-11', oee: 85.2, availability: 91.5, performanceTon: 88.7, quality: 97.2 },
|
||
{ statDate: '05-12', oee: 86.8, availability: 92.8, performanceTon: 89.5, quality: 97.8 },
|
||
{ statDate: '05-13', oee: 85.9, availability: 91.2, performanceTon: 89.2, quality: 97.5 },
|
||
{ statDate: '05-14', oee: 87.2, availability: 93.5, performanceTon: 90.1, quality: 98.0 },
|
||
{ statDate: '05-15', oee: 86.5, availability: 92.1, performanceTon: 89.8, quality: 97.5 }
|
||
]
|
||
|
||
lossList.value = [
|
||
{ lossCategoryName: '设备故障', lossTimeMin: 350, lossTimeRate: 31.8 },
|
||
{ lossCategoryName: '换模换线', lossTimeMin: 85, lossTimeRate: 24.5 },
|
||
{ lossCategoryName: '空转停机', lossTimeMin: 55, lossTimeRate: 15.8 },
|
||
{ lossCategoryName: '速度损失', lossTimeMin: 45, lossTimeRate: 12.9 },
|
||
{ lossCategoryName: '质量损失', lossTimeMin: 25, lossTimeRate: 7.2 },
|
||
{ lossCategoryName: '启动损失', lossTimeMin: 15, lossTimeRate: 4.3 },
|
||
{ lossCategoryName: '管理损失', lossTimeMin: 6, lossTimeRate: 1.7 }
|
||
]
|
||
|
||
stoppageList.value = [
|
||
{ startDate: '2024-05-15 14:25:00', duration: 120, stopType: '设备故障', unit: '1#轧机', shift: '甲班', remark: '电机故障' },
|
||
{ startDate: '2024-05-15 13:15:00', duration: 45, stopType: '换模换线', unit: '2#轧机', shift: '乙班', remark: '更换模具' },
|
||
{ startDate: '2024-05-15 11:30:00', duration: 15, stopType: '计划停机', unit: '1#轧机', shift: '甲班', remark: '例行检查' }
|
||
]
|
||
|
||
oeeData.value = {
|
||
oee: 86.5,
|
||
availability: 92.1,
|
||
performance: 89.8,
|
||
quality: 97.5,
|
||
oeeTrend: 0.5,
|
||
availabilityTrend: 0.3,
|
||
performanceTrend: 0.2,
|
||
qualityTrend: 0.1
|
||
}
|
||
|
||
updateCharts()
|
||
}
|
||
|
||
const updateCharts = () => {
|
||
updateTrendChart()
|
||
updateLossChart()
|
||
updateStatusChart()
|
||
}
|
||
|
||
const updateTrendChart = () => {
|
||
if (!trendChart) return
|
||
|
||
const dates = summaryList.value.map(item => item.statDate)
|
||
const oeeValues = summaryList.value.map(item => item.oee)
|
||
const avalValues = summaryList.value.map(item => item.availability)
|
||
const perfValues = summaryList.value.map(item => item.performanceTon)
|
||
const qualValues = summaryList.value.map(item => item.quality)
|
||
|
||
trendChart.setOption({
|
||
backgroundColor: 'transparent',
|
||
grid: { top: 40, right: 20, bottom: 30, left: 50 },
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(10, 20, 40, 0.9)',
|
||
borderColor: '#1e3a5f',
|
||
textStyle: { color: '#fff' }
|
||
},
|
||
legend: {
|
||
data: ['OEE', '时间稼动率', '性能稼动率', '良品率'],
|
||
bottom: 0,
|
||
textStyle: { color: '#a0c4e8' }
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: dates,
|
||
axisLine: { lineStyle: { color: '#3a5a8a' } },
|
||
axisTick: { show: false },
|
||
axisLabel: { color: '#a0c4e8' }
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
min: 70,
|
||
max: 100,
|
||
axisLine: { show: false },
|
||
splitLine: { lineStyle: { color: '#1e3a5f', type: 'dashed' } },
|
||
axisLabel: { color: '#a0c4e8' }
|
||
},
|
||
series: [
|
||
{
|
||
name: 'OEE',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: oeeValues,
|
||
lineStyle: { color: '#00d4ff', width: 3 },
|
||
itemStyle: { color: '#00d4ff' },
|
||
symbol: 'circle',
|
||
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: '#00ff88', width: 2 },
|
||
itemStyle: { color: '#00ff88' }
|
||
},
|
||
{
|
||
name: '性能稼动率',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: perfValues,
|
||
lineStyle: { color: '#7c63ff', width: 2 },
|
||
itemStyle: { color: '#7c63ff' }
|
||
},
|
||
{
|
||
name: '良品率',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: qualValues,
|
||
lineStyle: { color: '#ff9f43', width: 2 },
|
||
itemStyle: { color: '#ff9f43' }
|
||
}
|
||
]
|
||
})
|
||
}
|
||
|
||
const updateLossChart = () => {
|
||
if (!lossChart) return
|
||
|
||
lossChart.setOption({
|
||
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%'],
|
||
center: ['50%', '45%'],
|
||
data: lossList.value.map((item, index) => ({
|
||
value: item.lossTimeMin || 0,
|
||
name: item.lossCategoryName || '损失' + (index + 1),
|
||
itemStyle: {
|
||
color: ['#ff6b6b', '#ffa94d', '#ffd43b', '#69db7c', '#74c0fc', '#b197fc', '#ff8fab'][index]
|
||
}
|
||
})),
|
||
label: { show: false },
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}]
|
||
})
|
||
}
|
||
|
||
const updateStatusChart = () => {
|
||
if (!statusChart) return
|
||
|
||
statusChart.setOption({
|
||
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: '#00ff88' } },
|
||
{ value: 15, name: '待机', itemStyle: { color: '#ffd43b' } },
|
||
{ value: 12, name: '故障', itemStyle: { color: '#ff6b6b' } },
|
||
{ value: 8, name: '维护', itemStyle: { color: '#74c0fc' } }
|
||
],
|
||
label: { show: false },
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}]
|
||
})
|
||
}
|
||
|
||
const handleResize = () => {
|
||
nextTick(() => {
|
||
trendChart?.resize()
|
||
lossChart?.resize()
|
||
statusChart?.resize()
|
||
})
|
||
}
|
||
|
||
onMounted(() => {
|
||
updateTime()
|
||
timeInterval = setInterval(updateTime, 1000)
|
||
|
||
nextTick(() => {
|
||
if (trendChartRef.value) {
|
||
trendChart = echarts.init(trendChartRef.value)
|
||
}
|
||
if (lossChartRef.value) {
|
||
lossChart = echarts.init(lossChartRef.value)
|
||
}
|
||
if (statusChartRef.value) {
|
||
statusChart = echarts.init(statusChartRef.value)
|
||
}
|
||
loadData()
|
||
|
||
window.addEventListener('resize', handleResize)
|
||
|
||
if (window.ResizeObserver) {
|
||
resizeObserver = new ResizeObserver(() => {
|
||
handleResize()
|
||
})
|
||
const container = document.querySelector('.screen-wrapper')
|
||
if (container) {
|
||
resizeObserver.observe(container)
|
||
}
|
||
}
|
||
|
||
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)
|
||
timeInterval = null
|
||
}
|
||
if (dataInterval) {
|
||
clearInterval(dataInterval)
|
||
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
|
||
}
|
||
if (lossChart) {
|
||
lossChart.dispose()
|
||
lossChart = null
|
||
}
|
||
if (statusChart) {
|
||
statusChart.dispose()
|
||
statusChart = null
|
||
}
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
// 确保清理完成
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.screen-wrapper {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
height: 100%;
|
||
background: linear-gradient(180deg, #0a1428 0%, #0d1b34 50%, #0a1428 100%);
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.screen-content {
|
||
background: transparent;
|
||
color: #ffffff;
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
margin: 0;
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.screen-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16px 24px;
|
||
background: linear-gradient(90deg, rgba(0, 168, 204, 0.9) 0%, rgba(0, 212, 255, 0.8) 50%, rgba(0, 168, 204, 0.9) 100%);
|
||
margin-bottom: 20px;
|
||
border-bottom: 2px solid rgba(0, 212, 255, 0.4);
|
||
|
||
.title {
|
||
font-size: 26px;
|
||
font-weight: bold;
|
||
color: #00d4ff;
|
||
letter-spacing: 3px;
|
||
margin: 0;
|
||
text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
|
||
}
|
||
|
||
.header-right {
|
||
display: flex;
|
||
gap: 25px;
|
||
align-items: center;
|
||
|
||
.current-shift {
|
||
font-size: 16px;
|
||
color: #a0c4e8;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.time {
|
||
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: 0;
|
||
}
|
||
|
||
.kpi-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 16px;
|
||
margin-bottom: 20px;
|
||
|
||
.kpi-card {
|
||
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: 0;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||
|
||
.card-header {
|
||
background: linear-gradient(90deg, #00a8cc 0%, #00d4ff 50%, #00a8cc 100%);
|
||
padding: 10px 15px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #0a1428;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.kpi-value {
|
||
font-size: 40px;
|
||
font-weight: bold;
|
||
color: #00d4ff;
|
||
margin: 15px 0;
|
||
text-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
|
||
}
|
||
|
||
.kpi-trend {
|
||
font-size: 14px;
|
||
padding: 4px 12px;
|
||
border-radius: 15px;
|
||
display: inline-block;
|
||
margin-bottom: 15px;
|
||
font-weight: 600;
|
||
|
||
&.positive {
|
||
background: rgba(0, 255, 136, 0.15);
|
||
color: #00ff88;
|
||
border: 1px solid rgba(0, 255, 136, 0.3);
|
||
}
|
||
|
||
&.negative {
|
||
background: rgba(255, 107, 107, 0.15);
|
||
color: #ff6b6b;
|
||
border: 1px solid rgba(255, 107, 107, 0.3);
|
||
}
|
||
|
||
&.zero {
|
||
background: rgba(160, 196, 232, 0.15);
|
||
color: #a0c4e8;
|
||
border: 1px solid rgba(160, 196, 232, 0.3);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.chart-row {
|
||
display: flex;
|
||
gap: 16px;
|
||
margin-bottom: 16px;
|
||
|
||
.chart-box {
|
||
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: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||
|
||
&.flex-1 {
|
||
flex: 1;
|
||
}
|
||
|
||
&.flex-2 {
|
||
flex: 2;
|
||
}
|
||
|
||
.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: 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);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 1200px) {
|
||
.kpi-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.chart-row {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
.kpi-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style> |