ShiDaKe/ShenYangLiku.git

<template>
  <div class="warehouse-capacity-container">
    <div class="chart-wrapper">
      <div class="chart" id="warehouse-chart"></div>
    </div>
  </div>
</template>
 
<script>
import * as echarts from "echarts";
import axios from 'axios';
 
export default {
  name: 'WarehouseCapacity',
  data() {
    return {
      warehouseData: [],
      chart: null,
      refreshInterval: null
    };
  },
  mounted() {
    this.getWarehouseData();
    
    // 监听窗口大小变化，重绘图表
    window.addEventListener("resize", this.resizeChart);
  },
  beforeDestroy() {
    this.stopAutoRefresh();
    window.removeEventListener("resize", this.resizeChart);
    
    // 销毁图表实例
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  methods: {
    // 获取仓库数据
    async getWarehouseData() {
      try {
        const response = await axios.get("http://127.0.0.1:8889/api/Dashboard/Warehouse");
 
        // 根据API响应结构获取数据
        const responseData = response;
        
        if (responseData && Array.isArray(responseData)) {
          // 只取前两个仓库的数据
          const apiData = responseData;
          
          // 转换数据结构以适应图表
          this.warehouseData = apiData.map(item => ({
            warehouseId: item.warehouseId,
            freeLocations: item.freeLocations,
            remainingCapacityPercentage: item.remainingCapacityPercentage,
            // 计算已使用百分比（100 - 剩余容量百分比）
            usagePercentage: 100 - item.remainingCapacityPercentage,
            // 模拟总货位数（根据实际情况调整）
            totalLocations: Math.round(item.freeLocations / (item.remainingCapacityPercentage / 100)),
            // 计算已使用货位数
            usedLocations: Math.round(item.freeLocations / (item.remainingCapacityPercentage / 100)) - item.freeLocations
          }));
          
          this.$nextTick(() => {
            this.initChart();
          });
        } else {
          console.warn("获取仓库数据失败或数据格式不正确");
          this.warehouseData = [];
          this.$nextTick(() => {
            this.initChart();
          });
        }
      } catch (error) {
        console.error("获取仓库数据失败:", error);
        this.warehouseData = [];
        this.$nextTick(() => {
          this.initChart();
        });
      }
    },
    
    // 启动自动刷新
    startAutoRefresh() {
      if (this.refreshInterval) {
        clearInterval(this.refreshInterval);
      }
      this.refreshInterval = setInterval(() => {
        this.getWarehouseData();
      }, 10000); 
    },
    
    // 停止自动刷新
    stopAutoRefresh() {
      if (this.refreshInterval) {
        clearInterval(this.refreshInterval);
        this.refreshInterval = null;
      }
    },
    
    // 初始化图表
    initChart() {
      const chartDom = document.getElementById('warehouse-chart');
      
      if (chartDom) {
        // 如果已有图表实例，先销毁
        if (this.chart) {
          this.chart.dispose();
        }
        
        // 创建新的图表实例
        this.chart = echarts.init(chartDom, 'dark');
        
        // 检查是否有数据
        if (this.warehouseData.length === 0) {
          // 如果没有数据，显示空状态
          this.chart.setOption({
            title: {
              text: '暂无数据',
              left: 'center',
              top: 'center',
              textStyle: {
                color: '#aaa',
                fontSize: 16
              }
            }
          });
          return;
        }
        
        // 设置图表配置
        const option = this.getChartOption();
        this.chart.setOption(option);
        
        // 启动自动刷新
        this.startAutoRefresh();
      }
    },
    
    // 获取图表配置 - 科幻风格柱状图
    getChartOption() {
      // 提取两个仓库的数据
      const warehouse1 = this.warehouseData[0] || {};
      const warehouse2 = this.warehouseData[1] || {};
      
      const warehouse1Usage = warehouse1.usagePercentage || 0;
      const warehouse1Free = warehouse1.remainingCapacityPercentage || 0;
      const warehouse1Total = warehouse1.totalLocations || 0;
      const warehouse1Used = warehouse1.usedLocations || 0;
      const warehouse1FreeLoc = warehouse1.freeLocations || 0;
      
      const warehouse2Usage = warehouse2.usagePercentage || 0;
      const warehouse2Free = warehouse2.remainingCapacityPercentage || 0;
      const warehouse2Total = warehouse2.totalLocations || 0;
      const warehouse2Used = warehouse2.usedLocations || 0;
      const warehouse2FreeLoc = warehouse2.freeLocations || 0;
      
      // 仓库名称
      const warehouse1Name = this.getWarehouseName(warehouse1.warehouseId || 1);
      const warehouse2Name = this.getWarehouseName(warehouse2.warehouseId || 2);
      
      return {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#00ffff',
          borderWidth: 1,
          textStyle: {
            color: '#ffffff',
            fontSize: 12
          },
          formatter: (params) => {
            const data = params[0];
            const warehouseIndex = data.dataIndex;
            const warehouse = warehouseIndex === 0 ? warehouse1 : warehouse2;
            const usage = warehouseIndex === 0 ? warehouse1Usage : warehouse2Usage;
            const free = warehouseIndex === 0 ? warehouse1Free : warehouse2Free;
            const used = warehouseIndex === 0 ? warehouse1Used : warehouse2Used;
            const freeLoc = warehouseIndex === 0 ? warehouse1FreeLoc : warehouse2FreeLoc;
            const total = warehouseIndex === 0 ? warehouse1Total : warehouse2Total;
            const name = warehouseIndex === 0 ? warehouse1Name : warehouse2Name;
            
            return `
              <div style="font-weight: bold; color: #00ffff; margin-bottom: 8px; border-bottom: 1px solid #00ffff; padding-bottom: 5px;">
                ${name} - 容量状态
              </div>
              <div style="display: flex; align-items: center; margin: 5px 0;">
                <span style="display: inline-block; width: 10px; height: 10px; background: linear-gradient(45deg, #ff416c, #ff4b2b); margin-right: 8px; border-radius: 2px;"></span>
                <span style="color: #ff8a8a;">已使用：</span>
                <span style="font-weight: bold; color: #ff416c; margin-left: 5px;">${usage.toFixed(1)}% (${used.toLocaleString()}货位)</span>
              </div>
              <div style="display: flex; align-items: center; margin: 5px 0;">
                <span style="display: inline-block; width: 10px; height: 10px; background: linear-gradient(45deg, #00ffff, #0080ff); margin-right: 8px; border-radius: 2px;"></span>
                <span style="color: #8ad3ff;">空闲：</span>
                <span style="font-weight: bold; color: #00ffff; margin-left: 5px;">${free.toFixed(1)}% (${freeLoc.toLocaleString()}货位)</span>
              </div>
              <div style="margin-top: 8px; padding-top: 8px; border-top: 1px dashed #555; color: #aaa; font-size: 11px;">
                总容量: ${total.toLocaleString()}货位 | 状态: ${usage > 80 ? '⚡ 高负荷' : usage > 50 ? '✓ 正常' : '○ 空闲'}
              </div>
            `;
          }
        },
        legend: {
          data: ['已使用容量', '剩余容量'],
          top: '5%',
          textStyle: {
            color: '#ffffff',
            fontSize: 12,
            fontWeight: 'bold'
          },
          itemStyle: {
            borderColor: '#00ffff',
            borderWidth: 1
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '15%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [warehouse1Name, warehouse2Name],
          axisLabel: {
            color: '#ffffff',
            fontSize: 14,
            fontWeight: 'bold',
            textShadow: '0 0 5px #00ffff'
          },
          axisLine: {
            lineStyle: {
              color: '#00ffff',
              width: 2,
              shadowBlur: 10,
              shadowColor: '#00ffff'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          name: '容量百分比 (%)',
          nameTextStyle: {
            color: '#ffffff',
            fontSize: 12,
            fontWeight: 'bold',
            textShadow: '0 0 3px #00ffff'
          },
          min: 0,
          max: 100,
          axisLabel: {
            color: '#ffffff',
            fontSize: 12,
            formatter: '{value}%',
            textShadow: '0 0 3px #00ffff'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#00ffff',
              width: 2,
              shadowBlur: 10,
              shadowColor: '#00ffff'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 255, 255, 0.2)',
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '已使用容量',
            type: 'bar',
            data: [warehouse1Usage, warehouse2Usage],
            barWidth: '30%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff416c' },
                { offset: 0.5, color: '#ff4b2b' },
                { offset: 1, color: '#ff2300' }
              ]),
              borderRadius: [4, 4, 0, 0],
              borderColor: '#ff8a8a',
              borderWidth: 1,
              shadowColor: 'rgba(255, 65, 108, 0.5)',
              shadowBlur: 10,
              shadowOffsetY: 3
            },
            label: {
              show: true,
              position: 'top',
              formatter: '{c}%',
              color: '#ff416c',
              fontSize: 14,
              fontWeight: 'bold',
              textShadow: '0 0 5px #ff416c'
            },
            emphasis: {
              itemStyle: {
                shadowColor: 'rgba(255, 65, 108, 0.8)',
                shadowBlur: 15,
                borderColor: '#ffffff',
                borderWidth: 2
              }
            }
          },
          {
            name: '剩余容量',
            type: 'bar',
            data: [warehouse1Free, warehouse2Free],
            barWidth: '30%',
            barGap: '10%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#00ffff' },
                { offset: 0.5, color: '#0080ff' },
                { offset: 1, color: '#0044ff' }
              ]),
              borderRadius: [4, 4, 0, 0],
              borderColor: '#8ad3ff',
              borderWidth: 1,
              shadowColor: 'rgba(0, 255, 255, 0.5)',
              shadowBlur: 10,
              shadowOffsetY: 3
            },
            label: {
              show: true,
              position: 'top',
              formatter: '{c}%',
              color: '#00ffff',
              fontSize: 14,
              fontWeight: 'bold',
              textShadow: '0 0 5px #00ffff'
            },
            emphasis: {
              itemStyle: {
                shadowColor: 'rgba(0, 255, 255, 0.8)',
                shadowBlur: 15,
                borderColor: '#ffffff',
                borderWidth: 2
              }
            }
          }
        ]
      };
    },
    
    // 获取仓库名称
    getWarehouseName(id) {
      const nameMap = {
        1: '原料仓',
        2: '成品仓',
      };
      return nameMap[id] || `仓库${id}`;
    },
    
    // 重绘图表
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  }
};
</script>
 
<style lang="scss" scoped>
.warehouse-capacity-container {
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  position: relative;
  
  // 科幻背景效果
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
  
  // 网格线效果
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0.3;
  }
}
 
.chart-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  
  // 边框光效
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 4px;
    // box-shadow: 
    //   0 0 10px rgba(0, 255, 255, 0.3),
    //   inset 0 0 10px rgba(0, 255, 255, 0.1);
    pointer-events: none;
    z-index: 1;
  }
}
 
.chart {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0;
}
 
// 响应式设计
@media (max-width: 768px) {
  .warehouse-capacity-container {
    padding: 10px;
  }
  
  .chart-wrapper {
    &::before {
      border-width: 1px;
    }
  }
}
 
@media (max-width: 480px) {
  .warehouse-capacity-container {
    &::after {
      background-size: 15px 15px;
    }
  }
}
</style>