库存总览初版大屏
This commit is contained in:
117
src/components/DataVLayout.vue
Normal file
117
src/components/DataVLayout.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<dv-full-screen-container class="datav-container" auto-fit>
|
||||
<div class="datav-wrapper">
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="datav-header">
|
||||
<dv-decoration-10 style="width: 400px; height: 40px" />
|
||||
<div class="header-title">
|
||||
<dv-decoration-9 :reverse="true" />
|
||||
<span class="title-text">{{ title || '数据可视化大屏' }}</span>
|
||||
<dv-decoration-9 />
|
||||
</div>
|
||||
<dv-decoration-10 style="width: 400px; height: 40px" :reverse="true" />
|
||||
</div>
|
||||
|
||||
<!-- 左侧装饰 -->
|
||||
<div class="decoration decoration-left">
|
||||
<dv-decoration-3 style="width: 200px; height: 100%" />
|
||||
</div>
|
||||
|
||||
<!-- 右侧装饰 -->
|
||||
<div class="decoration decoration-right">
|
||||
<dv-decoration-3 style="width: 200px; height: 100%" :reverse="true" />
|
||||
</div>
|
||||
|
||||
<!-- 主体内容区域 -->
|
||||
<div class="datav-main">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<!-- 底部装饰 -->
|
||||
<div class="datav-footer">
|
||||
<dv-decoration-2 style="width: 100%; height: 30px" />
|
||||
</div>
|
||||
</div>
|
||||
</dv-full-screen-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.datav-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #0a1428;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.datav-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.datav-header {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
.title-text {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #00d4ff;
|
||||
text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
|
||||
letter-spacing: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.decoration {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
bottom: 30px;
|
||||
width: 15px;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.decoration-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.decoration-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.datav-main {
|
||||
flex: 1;
|
||||
padding: 10px 30px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.datav-footer {
|
||||
height: 30px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -14,9 +14,9 @@
|
||||
<style lang="scss" scoped>
|
||||
.app-main {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: #050a15;
|
||||
padding: 16px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
<nav class="navbar">
|
||||
<div class="navbar-left">
|
||||
<hamburger @toggle-click="toggleSideBar" />
|
||||
<span class="navbar-title">{{ title }}</span>
|
||||
</div>
|
||||
<div class="navbar-right">
|
||||
<button class="action-btn refresh-btn" @click="handleRefresh" title="刷新数据">
|
||||
@@ -54,23 +53,23 @@ onUnmounted(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
height: 60px;
|
||||
background: linear-gradient(90deg, rgba(0, 168, 204, 0.95) 0%, rgba(0, 212, 255, 0.9) 50%, rgba(0, 168, 204, 0.95) 100%);
|
||||
height: 50px;
|
||||
background: linear-gradient(90deg, #00a8cc 0%, #00d4ff 50%, #00a8cc 100%);
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 2px solid rgba(0, 212, 255, 0.4);
|
||||
box-shadow: 0 4px 20px rgba(0, 212, 255, 0.2);
|
||||
border-bottom: 1px solid rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
.navbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
|
||||
@@ -39,7 +39,6 @@ const activeMenu = computed(() => route.path)
|
||||
|
||||
const iconMap = {
|
||||
'monitor': Monitor,
|
||||
'example': PieChart,
|
||||
'order': Document,
|
||||
'cost': PieChart,
|
||||
'energy': Monitor,
|
||||
@@ -53,7 +52,6 @@ const getIcon = (iconName) => {
|
||||
}
|
||||
|
||||
const menuItems = [
|
||||
{ path: '/dashboard/demo', meta: { title: '示例大屏', icon: 'example' } },
|
||||
{ path: '/dashboard/order', meta: { title: '订单大屏', icon: 'order' } },
|
||||
{ path: '/dashboard/cost', meta: { title: '成本大屏', icon: 'cost' } },
|
||||
{ path: '/dashboard/energy', meta: { title: '能源大屏', icon: 'energy' } },
|
||||
|
||||
@@ -1,540 +0,0 @@
|
||||
<template>
|
||||
<div class="screen-wrapper">
|
||||
<div class="screen-content">
|
||||
<header class="screen-header">
|
||||
<h1 class="title">大数据可视化平台</h1>
|
||||
<div class="header-right">
|
||||
<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" v-for="card in cards" :key="card.title">
|
||||
<div class="card-header">{{ card.title }}</div>
|
||||
<div class="kpi-value" :style="{ color: card.color }">{{ card.value }}</div>
|
||||
<div class="kpi-unit">{{ card.unit }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-row">
|
||||
<div class="chart-box flex-1">
|
||||
<div class="box-header">产量趋势</div>
|
||||
<div ref="lineChartRef" class="chart"></div>
|
||||
</div>
|
||||
<div class="chart-box flex-1">
|
||||
<div class="box-header">运行状态</div>
|
||||
<div ref="pieChartRef" class="chart"></div>
|
||||
</div>
|
||||
<div class="chart-box flex-1">
|
||||
<div class="box-header">班组排名</div>
|
||||
<div class="ranking-list">
|
||||
<div class="ranking-item" v-for="(item, index) in rankingList" :key="item.name">
|
||||
<span class="rank" :class="'rank-' + (index + 1)">{{ index + 1 }}</span>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span class="value">{{ item.value }}</span>
|
||||
<span class="unit">吨</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-row">
|
||||
<div class="chart-box flex-2">
|
||||
<div class="box-header">实时告警</div>
|
||||
<div class="alarm-list">
|
||||
<div class="alarm-item" v-for="alarm in alarmList" :key="alarm.time">
|
||||
<span class="alarm-icon">{{ alarm.icon }}</span>
|
||||
<div class="alarm-content">
|
||||
<div class="alarm-title">{{ alarm.title }}</div>
|
||||
<div class="alarm-time">{{ alarm.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount, onUnmounted, nextTick } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const currentTime = ref('')
|
||||
const isFullscreen = ref(false)
|
||||
const lineChartRef = ref(null)
|
||||
const pieChartRef = ref(null)
|
||||
let lineChart = null
|
||||
let pieChart = null
|
||||
let timeInterval = null
|
||||
let resizeObserver = null
|
||||
let fullscreenChangeHandler = null
|
||||
|
||||
const cards = ref([
|
||||
{ title: '总产量', value: '12,580', unit: '吨', color: '#00d4ff' },
|
||||
{ title: '日产量', value: '1,258', unit: '吨', color: '#00ff88' },
|
||||
{ title: '运行效率', value: '96.8', unit: '%', color: '#7c63ff' },
|
||||
{ title: '良品率', value: '99.2', unit: '%', color: '#ff9f43' }
|
||||
])
|
||||
|
||||
const rankingList = ref([
|
||||
{ name: '甲班', value: '3,200' },
|
||||
{ name: '乙班', value: '2,980' },
|
||||
{ name: '丙班', value: '2,850' },
|
||||
{ name: '丁班', value: '2,720' }
|
||||
])
|
||||
|
||||
const alarmList = ref([
|
||||
{ icon: '✅', title: '系统运行正常', time: '15:30:00', level: 'success' },
|
||||
{ icon: '⚠️', title: '速度损失告警', time: '14:25:00', level: 'warning' },
|
||||
{ icon: '🔴', title: '设备故障停机', time: '13:15:00', level: 'danger' }
|
||||
])
|
||||
|
||||
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 initCharts = () => {
|
||||
if (lineChartRef.value) {
|
||||
lineChart = echarts.init(lineChartRef.value)
|
||||
lineChart.setOption({
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(10, 20, 40, 0.9)',
|
||||
borderColor: '#1e3a5f',
|
||||
textStyle: { color: '#fff' }
|
||||
},
|
||||
grid: { top: 20, right: 20, bottom: 30, left: 50 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00'],
|
||||
axisLine: { lineStyle: { color: '#3a5a8a' } },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { color: '#a0c4e8' }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { show: false },
|
||||
splitLine: { lineStyle: { color: '#1e3a5f', type: 'dashed' } },
|
||||
axisLabel: { color: '#a0c4e8' }
|
||||
},
|
||||
series: [{
|
||||
name: '产量',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [820, 932, 901, 1234, 1290, 1330],
|
||||
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)' }
|
||||
])
|
||||
},
|
||||
lineStyle: { color: '#00d4ff', width: 2 },
|
||||
itemStyle: { color: '#00d4ff' }
|
||||
}]
|
||||
})
|
||||
}
|
||||
|
||||
if (pieChartRef.value) {
|
||||
pieChart = echarts.init(pieChartRef.value)
|
||||
pieChart.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: ['45%', '75%'],
|
||||
center: ['50%', '45%'],
|
||||
data: [
|
||||
{ value: 65, name: '运行中', itemStyle: { color: '#00ff88' } },
|
||||
{ value: 20, name: '待机', itemStyle: { color: '#ffd43b' } },
|
||||
{ value: 10, name: '故障', itemStyle: { color: '#ff6b6b' } },
|
||||
{ value: 5, name: '维护', itemStyle: { color: '#00d4ff' } }
|
||||
],
|
||||
label: { show: false }
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleResize = () => {
|
||||
nextTick(() => {
|
||||
lineChart?.resize()
|
||||
pieChart?.resize()
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
updateTime()
|
||||
timeInterval = setInterval(updateTime, 1000)
|
||||
|
||||
nextTick(() => {
|
||||
initCharts()
|
||||
handleResize()
|
||||
|
||||
window.addEventListener('resize', handleResize)
|
||||
|
||||
if (window.ResizeObserver) {
|
||||
resizeObserver = new ResizeObserver(() => {
|
||||
handleResize()
|
||||
})
|
||||
const container = document.querySelector('.screen-wrapper')
|
||||
if (container) {
|
||||
resizeObserver.observe(container)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
window.addEventListener('refresh-data', handleRefresh)
|
||||
|
||||
fullscreenChangeHandler = () => {
|
||||
isFullscreen.value = !!document.fullscreenElement
|
||||
}
|
||||
document.addEventListener('fullscreenchange', fullscreenChangeHandler)
|
||||
})
|
||||
|
||||
const handleRefresh = () => {
|
||||
initCharts()
|
||||
}
|
||||
|
||||
const exitFullscreen = () => {
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen().catch(err => {
|
||||
console.error('退出全屏失败:', err)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (timeInterval) {
|
||||
clearInterval(timeInterval)
|
||||
timeInterval = 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 (lineChart) {
|
||||
lineChart.dispose()
|
||||
lineChart = null
|
||||
}
|
||||
if (pieChart) {
|
||||
pieChart.dispose()
|
||||
pieChart = 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;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.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: 36px;
|
||||
font-weight: bold;
|
||||
margin: 15px 0 5px;
|
||||
text-shadow: 0 0 15px currentColor;
|
||||
}
|
||||
|
||||
.kpi-unit {
|
||||
font-size: 14px;
|
||||
color: #a0c4e8;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.ranking-list {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
.ranking-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: rgba(10, 20, 40, 0.8);
|
||||
border: 1px solid rgba(0, 212, 255, 0.15);
|
||||
border-radius: 6px;
|
||||
|
||||
.rank {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin-right: 12px;
|
||||
background: #3a5a8a;
|
||||
color: #a0c4e8;
|
||||
|
||||
&.rank-1 {
|
||||
background: linear-gradient(135deg, #ffd43b, #ff9f43);
|
||||
color: #0a1428;
|
||||
}
|
||||
&.rank-2 {
|
||||
background: linear-gradient(135deg, #a0c4e8, #74c0fc);
|
||||
color: #0a1428;
|
||||
}
|
||||
&.rank-3 {
|
||||
background: linear-gradient(135deg, #ffa94d, #ff6b6b);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #a0c4e8;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #00d4ff;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 13px;
|
||||
color: #a0c4e8;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alarm-list {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
.alarm-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid;
|
||||
background: rgba(10, 20, 40, 0.8);
|
||||
border: 1px solid rgba(0, 212, 255, 0.15);
|
||||
border-left-width: 4px;
|
||||
|
||||
&.success {
|
||||
border-color: #00ff88;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
border-color: #ffd43b;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
border-color: #ff6b6b;
|
||||
}
|
||||
|
||||
.alarm-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.alarm-content {
|
||||
flex: 1;
|
||||
|
||||
.alarm-title {
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.alarm-time {
|
||||
font-size: 12px;
|
||||
color: #a0c4e8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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>
|
||||
@@ -4,7 +4,7 @@ export const constantRoutes = [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('@/layout/index.vue'),
|
||||
redirect: '/dashboard/demo',
|
||||
redirect: '/dashboard/acid-rolling',
|
||||
children: []
|
||||
},
|
||||
{
|
||||
@@ -12,12 +12,6 @@ export const constantRoutes = [
|
||||
component: () => import('@/layout/index.vue'),
|
||||
meta: { title: '数据大屏', icon: 'monitor' },
|
||||
children: [
|
||||
{
|
||||
path: 'demo',
|
||||
name: 'Demo',
|
||||
component: () => import('@/modules/dashboardBig/views/index.vue'),
|
||||
meta: { title: '示例大屏', icon: 'example' }
|
||||
},
|
||||
{
|
||||
path: 'order',
|
||||
name: 'Order',
|
||||
|
||||
@@ -36,7 +36,7 @@ const actions = {
|
||||
function filterAsyncRoutes(routes) {
|
||||
return routes.filter(route => {
|
||||
if (!route.component || route.component === '') {
|
||||
route.component = () => import('@/modules/dashboardBig/views/index.vue')
|
||||
route.component = () => import('@/views/screens/acid-rolling/index.vue')
|
||||
} else if (route.component !== 'Layout') {
|
||||
route.component = loadComponent(route.component)
|
||||
}
|
||||
@@ -51,7 +51,6 @@ function loadComponent(componentPath) {
|
||||
const path = componentPath.replace(/^\//, '').replace(/\.vue$/, '')
|
||||
const componentMap = {
|
||||
'Layout': () => import('@/layout/index.vue'),
|
||||
'modules/dashboardBig/views/index': () => import('@/modules/dashboardBig/views/index.vue'),
|
||||
'modules/dashboardBig/views/order': () => import('@/modules/dashboardBig/views/order.vue'),
|
||||
'modules/dashboardBig/views/cost': () => import('@/modules/dashboardBig/views/cost.vue'),
|
||||
'modules/dashboardBig/views/energy': () => import('@/modules/dashboardBig/views/energy.vue'),
|
||||
@@ -60,7 +59,7 @@ function loadComponent(componentPath) {
|
||||
'modules/dashboardBig/views/stopAnalysis': () => import('@/modules/dashboardBig/views/stopAnalysis.vue'),
|
||||
'screens/acid-rolling/index': () => import('@/views/screens/acid-rolling/index.vue')
|
||||
}
|
||||
return componentMap[path] || (() => import('@/modules/dashboardBig/views/index.vue'))
|
||||
return componentMap[path] || (() => import('@/views/screens/acid-rolling/index.vue'))
|
||||
}
|
||||
|
||||
export default {
|
||||
|
||||
@@ -209,7 +209,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</dv-border-box8>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
8
tsconfig.json
Normal file
8
tsconfig.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user