Merge remote-tracking branch 'origin/dev' into dev

gaoluyang

昨天 df1406d0f571972d033dffd6a93fb4b94febeb56

 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>