From df1406d0f571972d033dffd6a93fb4b94febeb56 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 24 六月 2025 16:46:44 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev' into dev
---
src/views/index.vue | 546 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 541 insertions(+), 5 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index c57322c..452fcfa 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,14 +1,550 @@
<template>
- <div class="app-container">
-
+ <div class="dashboard">
+ <!-- 椤堕儴缁熻鍗＄墖 -->
+ <div class="top-cards">
+ <div class="stat-card revenue">
+ <div class="card-icon">
+ <i class="el-icon-money"></i>
+ </div>
+ <div class="card-content">
+ <div class="card-title">钀ユ敹閲戦</div>
+ <div class="card-value">楼1,234,567</div>
+ <div class="card-trend">
+ <span class="trend-label">杈冩槰鏃�</span>
+ <span class="trend-value up">+12.5%</span>
+ </div>
+ </div>
+ </div>
+
+ <div class="stat-card supply">
+ <div class="card-icon">
+ <i class="el-icon-truck"></i>
+ </div>
+ <div class="card-content">
+ <div class="card-title">渚涘簲閲�</div>
+ <div class="card-value">8,965 鍚�</div>
+ <div class="card-trend">
+ <span class="trend-label">杈冩槰鏃�</span>
+ <span class="trend-value up">+8.2%</span>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 涓棿鍥捐〃鍖哄煙 -->
+ <div class="chart-section">
+ <div class="chart-container">
+ <div class="chart-title">钀ユ敹鍒嗗竷</div>
+ <div ref="pieChart" class="chart-content pie-chart"></div>
+ </div>
+
+ <div class="chart-container">
+ <div class="chart-title">渚涘簲閲忚秼鍔�</div>
+ <div ref="areaChart" class="chart-content area-chart"></div>
+ </div>
+ </div>
+
+ <!-- 搴曢儴涓夋爮甯冨眬 -->
+ <div class="bottom-section">
+ <!-- 搴撳瓨缁熻 -->
+ <div class="bottom-card inventory">
+ <div class="card-header">
+ <h3>搴撳瓨缁熻</h3>
+ </div>
+ <div class="inventory-items">
+ <div class="inventory-item">
+ <div class="item-name">鍘熺叅</div>
+ <div class="item-value">15,432 鍚�</div>
+ <div class="item-status normal">姝ｅ父</div>
+ </div>
+ <div class="inventory-item">
+ <div class="item-name">绮剧叅</div>
+ <div class="item-value">8,765 鍚�</div>
+ <div class="item-status normal">姝ｅ父</div>
+ </div>
+ <div class="inventory-item">
+ <div class="item-name">鐒︾叅</div>
+ <div class="item-value">3,241 鍚�</div>
+ <div class="item-status low">鍋忎綆</div>
+ </div>
+ <div class="inventory-item">
+ <div class="item-name">鍧楃叅</div>
+ <div class="item-value">6,789 鍚�</div>
+ <div class="item-status normal">姝ｅ父</div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 鏌辩姸鍥� -->
+ <div class="bottom-card chart">
+ <div class="card-header">
+ <h3>鏈堝害瀵规瘮</h3>
+ </div>
+ <div ref="barChart" class="chart-content bar-chart"></div>
+ </div>
+
+ <!-- 閿�鍞暟鎹〃鏍� -->
+ <div class="bottom-card table">
+ <div class="card-header">
+ <h3>閿�鍞暟鎹�</h3>
+ </div>
+ <el-table
+ :data="salesData"
+ style="width: 100%"
+ :header-cell-style="tableHeaderStyle"
+ >
+ <el-table-column prop="product" label="浜у搧" width="80"></el-table-column>
+ <el-table-column prop="quantity" label="鏁伴噺" width="80"></el-table-column>
+ <el-table-column prop="amount" label="閲戦" width="90"></el-table-column>
+ <el-table-column prop="status" label="鐘舵��" width="70">
+ <template #default="scope">
+ <el-tag
+ :type="scope.row.status === '宸插畬鎴�' ? 'success' : 'warning'"
+ size="small"
+ >
+ {{ scope.row.status }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
</div>
</template>
-<script setup name="Index">
+<script>
+import * as echarts from 'echarts'
+export default {
+ name: 'Dashboard',
+ data() {
+ return {
+ salesData: [
+ { product: '鍘熺叅', quantity: '1,234鍚�', amount: '楼456,789', status: '宸插畬鎴�' },
+ { product: '绮剧叅', quantity: '567鍚�', amount: '楼234,567', status: '宸插畬鎴�' },
+ { product: '鐒︾叅', quantity: '890鍚�', amount: '楼345,678', status: '杩涜涓�' },
+ { product: '鍧楃叅', quantity: '432鍚�', amount: '楼123,456', status: '宸插畬鎴�' },
+ { product: '鐓ゆ偿', quantity: '678鍚�', amount: '楼234,567', status: '杩涜涓�' }
+ ],
+ tableHeaderStyle: {
+ backgroundColor: '#f5f7fa',
+ color: '#606266',
+ fontSize: '12px'
+ }
+ }
+ },
+ mounted() {
+ this.$nextTick(() => {
+ this.initCharts()
+ })
+ },
+ methods: {
+ initCharts() {
+ this.initPieChart()
+ this.initAreaChart()
+ this.initBarChart()
+ },
+
+ initPieChart() {
+ const chart = echarts.init(this.$refs.pieChart)
+ const option = {
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b}: {c} ({d}%)'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'right',
+ top: 'center',
+ textStyle: {
+ fontSize: 12
+ }
+ },
+ series: [
+ {
+ name: '钀ユ敹鍒嗗竷',
+ type: 'pie',
+ radius: ['30%', '70%'],
+ center: ['40%', '50%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: '16',
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ { value: 335, name: '鍘熺叅', itemStyle: { color: '#409EFF' } },
+ { value: 310, name: '绮剧叅', itemStyle: { color: '#67C23A' } },
+ { value: 234, name: '鐒︾叅', itemStyle: { color: '#E6A23C' } },
+ { value: 135, name: '鍧楃叅', itemStyle: { color: '#F56C6C' } },
+ { value: 155, name: '鍏朵粬', itemStyle: { color: '#909399' } }
+ ]
+ }
+ ]
+ }
+ chart.setOption(option)
+
+ // 鍝嶅簲寮�
+ window.addEventListener('resize', () => {
+ chart.resize()
+ })
+ },
+
+ initAreaChart() {
+ const chart = echarts.init(this.$refs.areaChart)
+ const option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985'
+ }
+ }
+ },
+ legend: {
+ data: ['渚涘簲閲�'],
+ top: 10
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�'],
+ axisLabel: {
+ fontSize: 12
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ axisLabel: {
+ fontSize: 12
+ }
+ }
+ ],
+ series: [
+ {
+ name: '渚涘簲閲�',
+ type: 'line',
+ stack: 'Total',
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
+ { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
+ ])
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [1200, 1320, 1010, 1340, 900, 1230, 1100],
+ lineStyle: {
+ color: '#409EFF'
+ },
+ itemStyle: {
+ color: '#409EFF'
+ }
+ }
+ ]
+ }
+ chart.setOption(option)
+
+ // 鍝嶅簲寮�
+ window.addEventListener('resize', () => {
+ chart.resize()
+ })
+ },
+
+ initBarChart() {
+ const chart = echarts.init(this.$refs.barChart)
+ const option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: ['鍘熺叅', '绮剧叅', '鐒︾叅', '鍧楃叅', '鐓ゆ偿'],
+ axisLabel: {
+ fontSize: 11
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ fontSize: 11
+ }
+ },
+ series: [
+ {
+ name: '閿�閲�',
+ type: 'bar',
+ data: [320, 302, 301, 334, 290],
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#409EFF' },
+ { offset: 1, color: '#79bbff' }
+ ])
+ },
+ barWidth: '60%'
+ }
+ ]
+ }
+ chart.setOption(option)
+
+ // 鍝嶅簲寮�
+ window.addEventListener('resize', () => {
+ chart.resize()
+ })
+ }
+ }
+}
</script>
-<style scoped lang="scss">
+<style scoped>
+.dashboard {
+ padding: 20px;
+ background-color: #f5f7fa;
+ min-height: 100vh;
+}
+/* 椤堕儴缁熻鍗＄墖 */
+.top-cards {
+ display: flex;
+ gap: 20px;
+ margin-bottom: 20px;
+}
+
+.stat-card {
+ flex: 1;
+ background: white;
+ border-radius: 8px;
+ padding: 20px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ display: flex;
+ align-items: center;
+ gap: 15px;
+}
+
+.card-icon {
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 24px;
+ color: white;
+}
+
+.revenue .card-icon {
+ background: linear-gradient(135deg, #409EFF, #79bbff);
+}
+
+.supply .card-icon {
+ background: linear-gradient(135deg, #67C23A, #95d475);
+}
+
+.card-content {
+ flex: 1;
+}
+
+.card-title {
+ font-size: 14px;
+ color: #909399;
+ margin-bottom: 8px;
+}
+
+.card-value {
+ font-size: 24px;
+ font-weight: bold;
+ color: #303133;
+ margin-bottom: 5px;
+}
+
+.card-trend {
+ font-size: 12px;
+}
+
+.trend-label {
+ color: #909399;
+ margin-right: 5px;
+}
+
+.trend-value.up {
+ color: #67C23A;
+}
+
+/* 涓棿鍥捐〃鍖哄煙 */
+.chart-section {
+ display: flex;
+ gap: 20px;
+ margin-bottom: 20px;
+}
+.el-scrollbar__view{
+ width: 100%;
+}
+.chart-container {
+ flex: 1;
+ background: white;
+ border-radius: 8px;
+ padding: 20px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.chart-title {
+ font-size: 16px;
+ font-weight: bold;
+ color: #303133;
+ margin-bottom: 15px;
+ padding-bottom: 10px;
+ border-bottom: 2px solid #f0f0f0;
+}
+
+.chart-content {
+ height: 280px;
+}
+
+/* 搴曢儴涓夋爮甯冨眬 */
+.bottom-section {
+ display: flex;
+ gap: 20px;
+}
+
+.bottom-card {
+ flex: 1;
+ background: white;
+ border-radius: 8px;
+ padding: 20px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+ margin-bottom: 15px;
+ padding-bottom: 10px;
+ border-bottom: 2px solid #f0f0f0;
+}
+
+.card-header h3 {
+ margin: 0;
+ font-size: 16px;
+ font-weight: bold;
+ color: #303133;
+}
+
+/* 搴撳瓨缁熻鏍峰紡 */
+.inventory-items {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.inventory-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 12px;
+ background: #f8f9fa;
+ border-radius: 6px;
+ border-left: 3px solid #409EFF;
+}
+
+.item-name {
+ font-weight: bold;
+ color: #303133;
+}
+
+.item-value {
+ color: #606266;
+ font-size: 14px;
+}
+
+.item-status {
+ padding: 2px 8px;
+ border-radius: 12px;
+ font-size: 12px;
+ font-weight: bold;
+}
+
+.item-status.normal {
+ background: #f0f9ff;
+ color: #67C23A;
+}
+
+.item-status.low {
+ background: #fef0e6;
+ color: #E6A23C;
+}
+
+/* 鏌辩姸鍥惧鍣� */
+.bar-chart {
+ height: 200px;
+}
+
+/* 琛ㄦ牸鏍峰紡璋冩暣 */
+.bottom-card.table {
+ min-width: 320px;
+}
+
+.bottom-card.table .el-table {
+ font-size: 12px;
+}
+
+.bottom-card.table .el-table td,
+.bottom-card.table .el-table th {
+ padding: 8px 0;
+}
+
+/* 鍝嶅簲寮忚璁� */
+@media (max-width: 1200px) {
+ .bottom-section {
+ flex-direction: column;
+ }
+
+ .chart-section {
+ flex-direction: column;
+ }
+}
+
+@media (max-width: 768px) {
+ .top-cards {
+ flex-direction: column;
+ }
+
+ .dashboard {
+ padding: 10px;
+ }
+
+ .stat-card {
+ padding: 15px;
+ }
+
+ .card-value {
+ font-size: 20px;
+ }
+}
</style>
-
--
Gitblit v1.9.3