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

初始化：静态菜单版 数据大屏管理系统，对接KLPL3数据库

Browse Source
This commit is contained in:
zuqijia
2026-05-15 18:18:51 +08:00
commit 39fed2c08c
58 changed files with 12751 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

310
src/modules/dashboardBig/views/order.vue Normal file
View File

@@ -0,0 +1,310 @@
<template>
<div class="big-screen">
<header class="screen-header">
<h1 class="title">订单数据大屏</h1>
<span class="time">{{ currentTime }}</span>
</header>
<main class="screen-body">
<div class="card-grid">
<div class="data-card" v-for="card in cards" :key="card.title">
<div class="card-title">{{ card.title }}</div>
<div class="card-value" :style="{ color: card.color }">{{ card.value }}</div>
<div class="card-unit">{{ card.unit }}</div>
</div>
</div>
<div class="chart-area">
<div class="chart-box">
<div class="box-title">订单趋势</div>
<div ref="trendChartRef" class="chart"></div>
</div>
<div class="chart-box">
<div class="box-title">订单状态分布</div>
<div ref="pieChartRef" class="chart"></div>
</div>
<div class="chart-box">
<div class="box-title">客户订单排行</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="order-list-box">
<div class="box-title">订单列表</div>
<div class="order-table">
<div class="table-header">
<span>订单号</span>
<span>客户</span>
<span>金额</span>
<span>状态</span>
<span>时间</span>
</div>
<div class="table-body">
<div class="table-row" v-for="order in orderList" :key="order.orderNo">
<span class="order-no">{{ order.orderNo }}</span>
<span>{{ order.customer }}</span>
<span class="amount">{{ formatAmount(order.amount) }}</span>
<span :class="['status', order.status]">{{ order.status }}</span>
<span class="time">{{ order.time }}</span>
</div>
</div>
</div>
</div>
</main>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
const currentTime = ref('')
const trendChartRef = ref(null)
const pieChartRef = ref(null)
let trendChart = null
let pieChart = null
let timeInterval = null
const cards = ref([
{ title: '今日订单', value: '45', unit: '单', color: '#5cd9e8' },
{ title: '待处理订单', value: '12', unit: '单', color: '#ff9800' },
{ title: '已完成订单', value: '156', unit: '单', color: '#67c23a' },
{ title: '订单金额', value: '258', unit: '万元', color: '#1A5CD7' }
])
const rankingList = ref([
{ name: '周口钢铁', value: 125 },
{ name: '南阳重工', value: 98 },
{ name: '洛阳机械', value: 86 },
{ name: '开封汽配', value: 72 },
{ name: '商丘金属', value: 65 }
])
const orderList = ref([
{ orderNo: 'ORD20260515001', customer: '周口钢铁', amount: 125000, status: '生产中', time: '10:30' },
{ orderNo: 'ORD20260515002', customer: '南阳重工', amount: 89000, status: '已完成', time: '09:45' },
{ orderNo: 'ORD20260515003', customer: '洛阳机械', amount: 156000, status: '待生产', time: '11:20' },
{ orderNo: 'ORD20260515004', customer: '开封汽配', amount: 67000, status: '生产中', time: '08:15' },
{ orderNo: 'ORD20260515005', customer: '商丘金属', amount: 45000, status: '已完成', time: '07:30' }
])
const formatAmount = (amount) => {
return '¥' + (amount / 10000).toFixed(2) + '万'
}
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 (trendChartRef.value) {
trendChart = echarts.init(trendChartRef.value)
trendChart.setOption({
grid: { top: 30, right: 30, bottom: 30, left: 60 },
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLine: { lineStyle: { color: '#2a3f5c' } },
axisTick: { show: false },
axisLabel: { color: '#999' }
},
yAxis: {
type: 'value',
axisLine: { show: false },
axisTick: { show: false },
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
axisLabel: { color: '#999' }
},
series: [{
type: 'bar',
data: [35, 42, 38, 45, 40, 48],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#1A5CD7' },
{ offset: 1, color: '#5cd9e8' }
]),
borderRadius: [4, 4, 0, 0]
}
}]
})
}
if (pieChartRef.value) {
pieChart = echarts.init(pieChartRef.value)
pieChart.setOption({
tooltip: { trigger: 'item' },
legend: { bottom: 10, textStyle: { color: '#999' } },
series: [{
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '40%'],
data: [
{ value: 45, name: '生产中', itemStyle: { color: '#409eff' } },
{ value: 12, name: '待生产', itemStyle: { color: '#e6a23c' } },
{ value: 156, name: '已完成', itemStyle: { color: '#67c23a' } }
],
label: { show: false }
}]
})
}
}
onMounted(() => {
updateTime()
timeInterval = setInterval(updateTime, 1000)
initCharts()
window.addEventListener('resize', () => {
trendChart?.resize()
pieChart?.resize()
})
})
onUnmounted(() => {
if (timeInterval) clearInterval(timeInterval)
trendChart?.dispose()
pieChart?.dispose()
})
</script>
<style lang="scss" scoped>
.big-screen {
width: 1920px;
height: 1080px;
background: linear-gradient(135deg, #0a0e27 0%, #1a1f4e 100%);
color: #d3d6dd;
}
.screen-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
.title { font-size: 32px; font-weight: bold; color: #fff; text-shadow: 0 0 20px rgba(26, 92, 215, 0.8); letter-spacing: 4px; }
.time { font-size: 18px; color: #5cd9e8; font-family: 'Courier New', monospace; }
}
.screen-body { padding: 0 20px; }
.card-grid {
display: flex;
justify-content: space-around;
padding: 20px 0;
.data-card {
width: 22%;
background: rgba(19, 25, 47, 0.8);
border: 1px solid rgba(26, 92, 215, 0.3);
border-radius: 8px;
padding: 20px;
text-align: center;
.card-title { font-size: 16px; color: #999; margin-bottom: 10px; }
.card-value { font-size: 36px; font-weight: bold; margin-bottom: 5px; }
.card-unit { font-size: 14px; color: #666; }
}
}
.chart-area {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
padding: 20px 0;
.chart-box {
background: rgba(19, 25, 47, 0.8);
border: 1px solid rgba(26, 92, 215, 0.3);
border-radius: 8px;
padding: 15px;
.box-title { font-size: 16px; color: #5cd9e8; margin-bottom: 15px; padding-left: 10px; border-left: 3px solid #1A5CD7; }
.chart { height: 280px; }
.ranking-list {
height: 280px;
display: flex;
flex-direction: column;
justify-content: space-around;
.ranking-item {
display: flex;
align-items: center;
padding: 10px 15px;
background: rgba(26, 92, 215, 0.1);
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: rgba(255,255,255,0.1);
&.rank-1 { background: linear-gradient(135deg, #ffd700, #ffb700); color: #fff; }
&.rank-2 { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); color: #fff; }
&.rank-3 { background: linear-gradient(135deg, #cd7f32, #b87333); color: #fff; }
}
.name { flex: 1; font-size: 14px; color: #d3d6dd; }
.value { font-size: 16px; font-weight: bold; color: #5cd9e8; margin-right: 5px; }
.unit { font-size: 12px; color: #666; }
}
}
}
}
.order-list-box {
background: rgba(19, 25, 47, 0.8);
border: 1px solid rgba(26, 92, 215, 0.3);
border-radius: 8px;
padding: 15px;
margin-top: 20px;
.box-title { font-size: 16px; color: #5cd9e8; margin-bottom: 15px; padding-left: 10px; border-left: 3px solid #1A5CD7; }
.order-table {
.table-header {
display: grid;
grid-template-columns: 2fr 2fr 1.5fr 1fr 1fr;
gap: 15px;
padding: 10px 15px;
background: rgba(26, 92, 215, 0.2);
border-radius: 4px;
font-size: 14px;
color: #999;
font-weight: 500;
}
.table-body {
max-height: 250px;
overflow-y: auto;
.table-row {
display: grid;
grid-template-columns: 2fr 2fr 1.5fr 1fr 1fr;
gap: 15px;
padding: 12px 15px;
border-bottom: 1px solid rgba(255,255,255,0.05);
font-size: 14px;
.order-no { color: #5cd9e8; font-family: 'Courier New', monospace; }
.amount { color: #ff9800; font-weight: 600; }
.status {
padding: 2px 8px; border-radius: 4px; font-size: 12px; text-align: center;
&.已完成 { background: rgba(103,194,58,0.2); color: #67c23a; }
&.生产中 { background: rgba(64,158,255,0.2); color: #409eff; }
&.待生产 { background: rgba(230,162,60,0.2); color: #e6a23c; }
}
.time { color: #999; }
}
}
}
}
</style>